﻿@charset "utf-8";

/* 大赛加油站 */
.competition-gas h3{ padding: 10px 15px; background: #fde9d6; font-size: 16px; font-weight: bold; color: #029598}
.competition-gas ul{ margin-bottom: 20px; overflow: hidden}
.competition-gas ul li{ float: left; text-align: center; padding: 16px 15px 0; width: 170px;}
.competition-gas ul li p{ padding: 6px 0}
.competition-gas ul li img{ width: 160px}

.solve-area h3{ background: none; border-bottom: 1px solid #ddd; color: #333}
.solve-area ul li{ text-align: left}
.liTitle16 {
    padding: 5px 0;
    line-height: 28px;
    font-size:16px;
}
.live-on {
    padding: 0;
    overflow: hidden
}
.live-on h3{ font-weight: bold; padding: 10px; margin-top: 20px; font-size: 18px; position: relative;}
.live-on h3::before{ display: block; content: ''; position: absolute; height: 20px; width: 4px; background: #029598; left:0; top:50%; margin-top: -10px}
.live-on h3 a{ float: right; color: #029598; font-weight: normal;}
.live-on li{ padding:20px 10px 50px 160px; position: relative; border-top: 1px solid #ddd}
.live-on li:first-child{ border: 0}
.live-on li img{ width: 150px; height: 100px; position: absolute; top:24px; left: 0}
.live-on li p{ padding: 4px 0; overflow: hidden;}
.live-on li p.f16 span{ float: right; font-weight: normal; color: #2897ff; line-height: 34px; width: 74px; border-radius: 4px; padding-left: 34px; border: 1px solid #ddd; font-size: 14px}
.live-on li p.f16 span.c1{ background: url(../images/vip-1.png) -2px center no-repeat;border: 1px solid #c68e09; color:#c68e09}
.live-on li p.f16 span.c2{ background: url(../images/vip-3.png) -2px center no-repeat;border: 1px solid #09c681;color:#09c681}
.live-on li p.f16 span.c3{ background: url(../images/vip-4.png) -2px center no-repeat;border: 1px solid #c6091f;color:#c6091f}
.live-on li p.f16 span.c4{ background: url(../images/vip-2.png) -2px center no-repeat;border: 1px solid #66c609;color:#66c609}
.live-on li p.f16 span.c0{ background: url(../images/vip-0.png) -2px center no-repeat;border: 1px solid #0469db;color:#0469db}
.live-on li p .text{display: inline-block; width:700px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.live-on li p a{ margin-left: 10px}
.btn-orange,.btn-yellow{ background: #029598; padding: 4px 20px; color: #fff; display: inline-block; border-radius: 4px}
.btn-yellow{ background: #ffd928}
.icon-play{ padding-left: 20px; background: url(../images/icon-play.png) left center no-repeat; background-size: 18px 18px; color: #13bc01}
.live-detail{ min-height: 330px; padding: 0 20px 30px 432px; position: relative;}
.live-detail .picture{ position: absolute; top:4px; left:0; width: 410px; height: 280px;}
.live-detail .picture img{width: 410px; height: 280px; }
.live-detail li{ padding: 5px 0; line-height: 28px}
.btn-orange:hover,.btn-yellow:hover{ color: #fff; text-decoration: none; background: #f90}
.tab-detail{ background: #f9f9f9; margin-bottom: 10px}
.live-detail-bottom{ position: relative; width:845px; min-height: 450px}
.live-detail-bottom p{ padding: 6px 0}
.tab-detail li{cursor:pointer;}
.tab-detail li a {
    padding: 14px 20px;
    font-size: 16px;
    display: inline-block;
}
.tab-detail li a.current{ background: #029598; color: #fff;}
.live-detail-bottom .text{ width: 800px}
.live-detail-bottom .text li{ padding-bottom: 20px; line-height: 24px}
.live-detail-bottom .list{ width: 800px; padding: 20px 0}
.live-detail-bottom .list li{ cursor: pointer; position: relative; border-bottom: 1px solid #ddd;}
.live-detail-bottom .list li.current{ height: auto;}
/* .live-detail-bottom .list li::after{ position: absolute; display: block; content: '';right:30px; top:23px; display: block; content: ''; position: absolute; height: 10px; width: 10px; border-width: 1px 1px 0 0; border-color: #aaa;border-style: solid; -webkit-transform: matrix(0.71, 0.71, 0.71, -0.71, 0, 0)}
.live-detail-bottom .list li.current::after{border-width: 0 0 1px 1px; top:20px} */
.live-detail-bottom .list li i{ border-radius: 26px; padding: 0 20px 0 12px; color: #fff; min-width: 90px; font-weight: bold; background: url(../images/icon-list.png) #f90 88px center no-repeat; margin-right: 12px;}
.live-detail-bottom .list li:last-child{ border-bottom: 0;}
.live-detail-bottom .list li p{ line-height: 36px}
.live-detail-bottom .list li b{ font-weight: normal; margin-left: 14px; background: #aaa; color:#fff; padding: 0 12px; border-radius: 20px; display: inline-block;}
.live-detail-bottom .list li p label{ cursor: pointer; float: right; border: 1px solid #029598; color:#029598; padding: 0 12px; line-height: 24px; margin: 6px 0 6px 10px; border-radius: 4px}
.live-detail-bottom .list li p a{ overflow: hidden; padding: 0 30px;}
.live-detail-bottom .list li p a:first-child:hover{ text-decoration: none; cursor: default; color: #333}
.live-detail-bottom .list li p a:last-child{ float: right}
.live-detail-bottom .list li p label:hover{ background: #029598; color: #fff}

.live-now{ width: 1300px; padding: 0 30px 80px 0}
.live-now video{ width: 830px;}
.right-video-list{ position: absolute; top:0; right: 0; width: 250px; background: #f9f9f9; min-height: 300px}
.right-video-list h3{ margin-bottom: 10px; color: #fff; font-size: 16px; padding: 8px 0 8px 40px; background: url(../images/icon-list.png) #029598 10px center no-repeat;}
    .right-video-list li {
        /*display: -webkit-box;*/
        -webkit-box-pack: center;
        -webkit-box-align: center;
        cursor: pointer;
        /*text-overflow: ellipsis;*/
        white-space: nowrap;
        /*overflow: hidden;*/
        padding:10px 25px 25px 25px;
        
        border-bottom: 1px solid #f2f2f2;
        /*position: relative;*/
        /*width: 216px;*/
    }
.right-video-list li:last-child {
    border-bottom: 0;
}
.right-video-list .img {
    width: 220px;
    height: 150px;
   
}

    .right-video-list .img img {
        max-width: 220px;
        max-height: 150px;
    }

.right-video-list .title {
    text-align: center;
    font-size: 12px;
    color: #666;
    padding: 4px 0;
}
/*.right-video-list li i{position: absolute; left:5px; top:50%; margin-top: -8px; width: 16px; height: 16px; background: url(../images/play-red.png) no-repeat; background-size: contain;}*/
/*.right-video-list li span,.right-video-list li a{ position: absolute; right:5px; top:50%; line-height: 20px; height: 20px; margin-top: -12px; border: 1px solid #f90; padding: 1px 0; width: 46px; text-align: center; border-radius: 4px; font-size: 12px; background: #f90; color: #fff}*/
/*.right-video-list li a{ background: #029598}*/

.famous-teacher{ border-radius: 4px;position: absolute; right: 0; top:58px; border: 4px solid #e1f8ca; z-index: 999; width: 196px}
.famous-teacher h3{ padding: 6px; background: #e1f8ca; text-align: center; font-weight: bold; font-size: 16px}
.famous-teacher img{ width: 180px; height: 172px;}
.famous-teacher li{ padding: 8px; border-top: 1px dashed #ddd}
.class-share{position: absolute; bottom:20px; left:210px;}
.class-share i{ float: left; line-height: 36px; margin-right: 5px}
.class-share i img{ vertical-align: middle; cursor:pointer;}
.class-no{ position: absolute; left: 14px; bottom:26px;padding-left: 26px; line-height: 20px; background: url(../images/icon-click.png) left center no-repeat;}
.mask-btn{ border: 1px solid #ddd;  background: rgba(0,0,0,0.7); color: #fff; border-radius: 20px;  padding: 8px 20px;  position: absolute;  z-index: 99;  top: 130px; left: 160px;}
.mask-btn:hover{ text-decoration: none; background: #057949; color: #fff}

.screen-black{ background: rgba(0,0,0,0.9); position: fixed; left: 0; top:0; width: 100%; height: 100%; z-index: 1000;}
.video-s{ padding: 10px 0; border-radius: 8px; overflow: hidden; position: fixed; top:50%; left:50%; transform: translate(-50%,-50%); background: #f9f9f9;}
.video-s h3{border-bottom: 1px dashed #ddd; font-weight: bold; padding: 14px 0; text-align: center}
.video-s video{ width: 540px; height: 360px; margin: 0 auto;}
.video-s li { text-align: center; padding: 10px 0}
.video-s li a{ padding: 6px 0; width: 100px; display: inline-block; background: #029598; border-radius: 4px; margin: 0 8px; color: #fff;}
.video-s li a.close{ background: #aaa;}



/* 活动模板 */
.active-head{ padding: 6px 0; background: #f9f9f9; border-bottom: 1px solid #efefef; color: #aaa}
.active-head ul{ width: 1200px; margin: 0 auto;}
.active-head a{ color: #029598}
.acitve-top,.active-banner{ height: 150px; position: relative; margin: 0 0 10px; width: 100%; overflow: hidden}
.acitve-top img,.active-banner img,.active-nav img{ position: absolute; left:50%; top:0; transform: translateX(-50%);}
.active-banner { height: 450px;}
.active-intro{ width: 1200px; margin: 0 auto 10px; line-height: 28px; font-size: 16px; position: relative;}
.active-nav{ height:60px; line-height: 60px; position: relative; overflow: hidden}
.active-nav ul{ position: absolute; width: 1200px; left:50%; top:0; margin-left: -600px}
.active-nav li{ float: left; width: 170px; text-align: center; font-size: 18px; font-weight: bold;}
.active-nav li a{ display: inline-block;}
.active-nav li a.btn-active{ font-weight: normal; background: #029598; color: #fff; padding: 0 16px; border-radius: 4px; line-height: 30px; }
.active-content{ margin: 30px auto 0;}
.active-content ul{ margin:0 auto 20px; overflow: hidden; width: 1200px}
.active-content ul li{ line-height: 32px; font-size: 16px}
.active-content h3{ text-align: center; font-size: 26px; font-weight: bold; padding: 6px 0}
.active-content img,.active-foot img{ display: inline-block; margin: 0 auto;}
.active-foot{ line-height: 26px; font-size: 15px; width: 1200px; margin: 20px auto; clear: both; text-align: center;}
.active-foot p img{ padding: 10px 0 0}
.active-fix{ position: fixed; z-index: 999; border-radius: 4px; color: #fff; width: 60px; height: 100px; bottom:40px; right: 10px; font-size: 16px; background: url(../images/active-fix.png) #02cdae no-repeat;}
.active-fix:hover{ background-color: #05a990}

.W-1160 ul{ width: 410px}
/*内页版权*/
.copyright{ background: #636363; overflow: hidden; padding:24px 0; clear: both;}
.copyright ul{ float:left; color: #fff; padding-top:20px}
.copyright ul li{ line-height: 36px; padding-left: 26px; }
.copyright dl{ float: right; padding-right: 20px; text-align: center; color: #fff }
.copyright dl dt{ padding-top: 4px }
/*分页*/
.pager{margin: 10px auto; text-align:center; overflow:hidden; padding:20px 0; float: right; font-size:14px;}
.pager_small{ font-size:14px}
.pager .text{padding:8px 3px 8px 0; display:inline-block; float:left}
.pager_small .text{padding:6px 3px 4px 0;}
.pager a{display:inline-block; padding:7px; min-width:16px; text-align:center; border:1px solid #ddd; margin-right:6px; float:left; border-radius: 4px}
.pager_small a{ padding:5px;_padding:3px 7px}
.pager a.hover,.pager a:hover{ background:#f5b200; color:#fff; text-decoration:none}
.pager a.none,.pager a.none:hover{ background:#fff; color:#999; text-decoration:none; cursor:default}
.pager .input{ border:1px solid #ddd; height:25px; line-height:25px; width:32px; margin:3px 3px 3px 0; text-align: center; border-radius: 2px; float:left}
.pager .pager_btn{ padding:0;float:left; height:30px;line-height:30px; width:48px; text-align:center; border:0; cursor:pointer; border-radius: 2px}
.pager .pager_btn:hover{ background:#ff4200; color:#fff}
/*.pager_small .input{ margin:8px 3px 0 0}
.pager_small .pager_btn{ margin-top:8px}*/
/* COPYRIGHT */
.fl {
    float: left;
}

.fr {
    float: right;
}
.product-col {
    margin-top: 20px;
}

.product-list {
    width: 258px;
    border: 1px solid #e6e6e6;
    height: 324px;
}

.mr20 {
    margin-right: 20px;
}

.product-list img {
    border: 0;
    width: 256px;
    height: 200px;
    padding: 2px;
}

.product-list-info {
    padding: 8px 6px;
}

    .product-list-info div {
        padding: 3px 0;
    }

.product-list:hover {
    border-color: #f40;
}

.product-price {
    font-size: 14px;
    color: #F00
}

    .product-price span {
        font-size: 24px;
    }

.product-text {
    height: 50px;
    line-height: 25px;
}

    .product-text a {
        color: #666666;
    }

        .product-text a:hover {
            text-decoration: underline;
        }

    .product-text span {
        color: #ff7600;
    }

.shop-name {
    height: 25px;
    line-height: 25px;
}

    .shop-name a {
        color: #666666;
        text-decoration: underline;
    }

.product-btn {
}

    .product-btn span {
        display: inline-block;
        width: 100%;
        height: 30px;
        line-height: 30px;
        background: #e6e6e6;
        text-align: center;
        border-right: 1px solid #CCC
    }

    .product-btn i {
        color: #900
    }

.liImg {
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    margin-bottom: 10px;
}



.image {
    max-width: 600px;
    border: 1px solid #EEEEEE;
    background-color: #FFFFFF;
    text-align: center;
    position: relative;
    display: table-cell;
    vertical-align: middle;
}