body,html{
    background-color:#222;
    width:100%;
    height:100%;
}
.home-main{padding-bottom:4px;}
.home-video{
    /*padding-top:20px;
    min-height:800px;*/
}
.site-header{
    background-color: #222;
}

.home-top{
    background-color:#222;
/*    width:1300px;*/
    margin:10px 92px;
    /*height:60px;*/
}
.home-top-wrap{
    font-size:18px;
    color: #999;
    height:70px;
    line-height:70px;
}
.home-top-wrap div{
    margin-right:20px;

}
.home-top-wrap p{
    padding:0px;
    margin:0px;
}
.home-top-wrap p:hover{
    color:#00d7c6;
}
.wrap-video-type a{
    margin:auto 20px;
    display: inline-block;
    color:#fff;
    cursor: pointer;
}
.wrap-video-type a:hover{
    color:#00d7c6;
}
.wrap-video-type .a-active{
    color:#00d7c6;
}
.home-center{
    background-color:#333;
    /*width:1300px;*/
    margin:auto;
}
.video-left-wrap{float:left;margin-left:120px;}
.video-left{
    /*width:1000px;*/
    /*float:left;
    margin-left:70px;*/
}
.video-left-bottom{
    height:50px;
    line-height:50px;
    background-color: #2b2b2b;
    color:#999;
    padding:auto 20px;
}
.video-left-bottom ul{margin:auto;padding:auto;}
.video-left-bottom ul li{
    list-style: none;
    width:120px;
    text-align:center;
    float:left;
    cursor: pointer;
    position: relative;
}
.video-left-bottom ul li .top{
    display: none;
    position: absolute;
    top: -210px;
    width: 180px;
    left: 30px;
    z-index: 10000;
}
.video-left-bottom ul li .top1{
    display: none;
    position: absolute;
    top: -220px;
    width: 190px;
    left: 0px;
    z-index: 10000;
}
.video-left-bottom ul #miniprogram i{
    background: url(/public/image/video/icon_miniprogram_grey.png) no-repeat;
    background-size: 20px 20px;
    float: left;
    width: 20px;
    height: 20px;
    margin:10px 4px;
}
.video-left-bottom ul #miniprogram .bg{
    background: url(/public/image/video/icon_miniprogram_white.png) no-repeat;
    background-size: 20px 20px;
}
.video-left-bottom ul #app i{
    background: url(/public/image/video/icon_phone_grey.png) no-repeat;
    background-size: 20px 20px;
    float: left;
    width: 20px;
    height: 20px;
    margin:10px 4px;
}
.video-left-bottom ul #app .bg{
    background: url(/public/image/video/icon_phone_white.png) no-repeat;
    background-size: 20px 20px;
}
.video-left-bottom ul li span{height:40px;line-height:40px;margin:5px;display: inline-block; vertical-align: middle;}
.video-left-bottom ul li span:hover{}
.free-btn{width:180px;height:36px;line-height:36px;margin:7px 12px;background-color: #33d785;color:#fff; text-align: center; cursor: pointer;}
.free-btn a{color:#fff;}
.free-btn{width:180px;height:36px;line-height:36px;margin:7px 12px;background-color: #33d785;color:#fff; text-align: center; cursor: pointer;}
.video-right{
    width:300px;
    /*height:564px;*/
    overflow-y: auto;
    float:left;
    right:0px;
    background-color:#333;
}
.video-right-wrap{
    margin-left:10px;
    padding-right:10px;
}
.video-title{
    height:35px;
    margin-top:10px;
    font-size:16px;
    border-bottom:1px solid #444;

}
.video-title a{
    border-bottom: 2px solid #00d7c6;
    color: #ccc;
    text-align: center;
    width: 48px;
    height: 33px;
    float:left;
}
.video-title .down-resource{
    width:90px;margin-left:8px;border:0px;font-size:14px;line-height:30px;cursor: pointer;float:left;
}
.video-content{
    color:#999;
}
.lesson-list{
    margin:5px;
    padding:0px;
}
.video-li{
    cursor: pointer;
    transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
}
.video-li:hover{
    cursor: pointer;
    color:#00d7c6;
}
.video-li-active{
    color:#00d7c6;
}
.no-video{
    width:1000px;
    float:left;
    font-size:40px;
}
.chapter-name{
    margin:12px 5px;
    font-size:16px;
}
.chapter-name image{
    marging-right:10px;
}

.video-status-start i{
    float: left;
    background: url('/public/image/video/video-icon.png') -5px -65px;
    width: 18px;
    height: 18px;
}
.video-status-going i{
    float: left;
    background: url('/public/image/video/video-icon.png') -5px -35px;
    width: 18px;
    height: 18px;
}
.video-status-end i{
    float: left;
    background: url('/public/image/video/video-icon.png') -5px -5px;
    width: 18px;
    height: 18px;
}
.chapter-name i{
    float: left;
    background: url('/public/image/video/video-icon.png') -5px -93px;
    width: 24px;
    height: 24px;
}
.video-status-play{
    float: left;
    background: url('/public/image/video/play.png');
    width: 18px;
    height: 18px;
}
.video-li-name{
    font-size:8px;
}
.video-li-name:hover{
    color:#e8890d;
}
::-webkit-scrollbar{width:8px;height:8px;background-color:#333}::-webkit-scrollbar-track{background-color:#eaeaea}::-webkit-scrollbar-thumb{border-radius:10px;background-color:#bfbfbf}
::-webkit-scrollbar{width:10px;height:10px;background-color:#292929}::-webkit-scrollbar-thumb{background-color:#515151}::-webkit-scrollbar-track{background-color:#292929;}

.grey-line{
    clear:both;
    border-top: 1px solid #555;
    margin:0px;
    width: 100%;
}



.shopping-popup{
    z-index: 1003;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -400px;
    text-align: center;
    font-size: 14px;
    color: #333;
    line-height: 18px;
    padding-bottom: 0px;
    width: 600px;
    background: #fff;
    border-radius: 4px;
}
.sale{
    padding:0px 20px 0px 10px;
}
.mask{
    width: 100%;
    height: 100%;
    background-color: #000000;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1001;
}

.popup-close{
    background: url('/public/image/icons.png') no-repeat -210px 0px;
    width:16px;
    height:16px;
    float:right;
    text-align: right;
    position: absolute;
    top:8px;
    right:8px;
    cursor: pointer;
}
.popup-close:hover{
    -webkit-transition: -webkit-transform 1s;
}
.popup-image{
    padding:auto;
    margin:30px 8px 30px 30px;
    padding-right:20px;
    border-right:1px solid #E6E6E6;
}
.image-src{
    width:250px;
}

.popup-info-wrap{
    background-color: #fff;
    width:280px;
    padding-right:10px;
}

.popup-info{
    padding-top:40px;
    font-size:14px;
    padding-left:10px;
    text-align: left;
}
.popup-content{
    height:150px;
}
.popup-title{

}
.popup-button-wrap{
    margin:20px;
}
.popup-button{
    width: 200px;
    height: 36px;
    border-radius: 4px;
    background: #00d7c6;
    font-size: 14px;
    line-height: 36px;
    color: #fff;
    text-align: center;
    margin-top:8px;
    cursor: pointer;
}
.popup-button a{
    color:#fff;
}
.bg-white{
    background: #f5f5f5;
    color: #000;
    border:1px solid #c1c1ca;
}