.main{
    background: #f7f7fa;
}
.banner{
    width: 100%;
    height: 560px;
    background: url(../images/classroom/banner.png) no-repeat;
    position: relative;
    background-size: cover;
    background-position: center;
}
.banner .banner-mask{
    width: 100%;
    height: 160px;
    background: linear-gradient(180deg, rgba(255,255,255,0.00) 0%, #FFFFFF 100%);
    position: absolute;
    bottom: 0;
    left: 0;
}
.main .classroom,.main .tools{
    background: #FFFFFF;
    border-radius: 4px;
    width: 1023px;
    margin: 0 auto;
    position: relative;
    top: -160px;
}
.main .tools{
    margin-top: 50px;
}
.main .title{
    font-size: 32px;
    color: #000000;
    text-align: center;
    line-height: 32px;
    padding-top: 64px;
    margin-bottom: 40px;
}
.main .intro{
    width: 90%;
    margin:0 auto;
    opacity: 0.3;
    filter: Alpha(opacity=30);
    font-size: 16px;
    color: #000000;
    text-align: center;
    line-height: 16px;
    margin-bottom: 48px;
    line-height: 1.6;
}
.main .tabs .tabs_items{
    /* border-bottom: 1px solid #EEEEEF; */
    text-align: center;
}
.main .tabs .tabs_item{
    position: relative;
    display: inline-block;
    line-height: 16px;
    font-size: 16px;
    color: #333333;
    text-align: center;
    padding: 0 32px;
    padding-bottom: 20px;
    cursor: pointer;
}
.main .tabs .tabs_item.active{
    color: #1e77bd;
}
.main .tabs .tabs_item.active .line {
    height: 3px;
    width: 40px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -20px;
    top: 33px;
    background: #1e77bd;
}
.items{
    border-top: 1px solid #eeeeef;
}
.items .item{
    float: left;
    width: 341px;
    padding: 50px 0;
    text-align: center;
    border-right: 1px solid #eeeeef;
    border-bottom: 1px solid #eeeeef;
    cursor: pointer;
    display: block;
}
.items .item i img{
    width: 48px;
    height: 48px;
}
.items .item .tools_item_title{
    font-size: 20px;
    color: #333333;
    text-align: center;
    line-height: 20px;
    margin-top: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.items .item:hover{
    text-decoration: none;
}
.items .item:hover .tools_item_title{
    color: #1e77bd;
}
.items .item .intro{
    width: 240px;
    margin: 0 auto;
    opacity: 0.3;
    filter: Alpha(opacity=30);
    font-size: 14px;
    color: #000000;
    text-align: center;
    line-height: 20px;
    margin-top: 10px;
}
.items .item:nth-child(3n){
    border-right: none;
}
.classroom .items .item i img{
    width: 75px;
    height: 50px;
}
.classroom .items .more{
    color: #999;
    font-size: 22px;
    height: 115px;
    line-height: 115px;
    transform: all 1s;
}
.classroom .items .more img{
    width: 30px;
    height: 30px;
    vertical-align: text-bottom;
    margin-left: 10px;
}
.classroom .items .item_more:hover .more{
    transform: scale(1.1);
}
.empty-wrap .empty-item{
    text-align: center;
    padding: 137px 0;
}
.empty-wrap .empty-item img{
    width: 200px;
}
.empty-wrap .empty-item p{
    color: #b2b2b2;
    font-size: 18px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .banner{height: 120px;}
    .banner .banner-mask{height: 20px;}
    .main .classroom, .main .tools{top: 0;width: 100%;}
    .items .item{padding: 20px 10px;width: calc(50% - 21px);}
    .items .item .tools_item_title{font-size: 16px;}
    .items .item:nth-child(3n){border-right: 1px solid #eeeeef;}
    .items .item .intro{width: 100%;}
    .main .tabs .tabs_item{padding: 0 5px;padding-bottom: 20px;}
    .items .item_more{border-bottom: none;}
    .main .title{font-size: 28px;padding-top: 26px;}
    .main .tools{margin-top: 30px;margin-bottom: 50px;}
    .tools .item{width: 33%;padding: 20px 0;}
    .tools .item:nth-child(3n){border-right: none;}
    .items .item i img{width: 28px;height: 28px;}
    .main .title{margin-bottom: 16px;}
}