@charset "UTF-8";
/*-----------------------------------------微学院------------------------------------------*/
.header{position: relative;}
.header .nav{display: none;}
.pro-top{width: 100%; height: 60px;background-color: #fff;z-index: 999;}
.pro-title{ height: 60px; line-height: 60px; }
.pro-title h3{letter-spacing: 1px; font-size: 20px; }
.pro-title .share-btn{ font-size: 14px; }
.pro-title .share{margin-left: 20px;color: #04a7ec;margin-bottom: 0;}
.pro-title .share-box{z-index: 99; top:60px;left: 0px;}
.pro-title .share-box:after{ left: 30px;}
.subnav ul li{display: inline-block;float: left;}
.subnav ul li a{display: inline-block;margin-left:40px;color: #676767; font-size: 16px;}
.subnav ul li a:hover{color: #04a7ec;}
.subnav ul li.current a{color: #04a7ec;}
.online-video{background: url('../images/teacher_topbg.jpg') no-repeat center 0;padding-top: 35px;padding-bottom: 35px;}
.online-box{padding-right: 300px;position: relative;background: #151515;}
.play-main{ position: relative; height:610px;overflow: hidden;}
.play-tip{position: absolute;z-index: 8;width: 150px;height: 40px;cursor: pointer;left:50%;top:50%;margin: -20px 0 0 -75px;line-height: 40px;text-align: center;border:2px solid #04a7ec;border-radius: 5px;font-size: 16px;background-color:#04a7ec; color: #fff;}
.play-tip:hover{background-color:#04a7ec; color: #fff;}
.play-default{background: #bfbfbf;border-color:#bfbfbf; color: #fff; cursor: default; }
.play-default:hover{background: #bfbfbf;border-color:#bfbfbf; color: #fff; }.play-list{width: 300px;background-color:#000;position: absolute;top:0;right: 0; height:610px;color: #fff;}
.play-list h3{font-size: 20px;height: 90px;line-height: 90px;text-align: center;background: url('../images/online_bg.png') no-repeat 0 0;margin-bottom: -6px;position: relative;z-index: 9;}
.project .play-list .list-con{height: 520px;overflow-y: auto;overflow-x: hidden;}
.play-list ul{height: auto; margin-bottom: 25px;}
.play-live .tit{width: 260px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.list-con h4{font-size: 16px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; text-align: center;}
.list-title{height: 30px;line-height: 30px;text-align: center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 12px; margin-bottom: 10px;}
.list-title .line{display: block;width: 180px;margin: 0 auto;position: relative;overflow: hidden;}
.list-title .line:before, .list-title .line:after {position: absolute;top: 51%;content: '';width: 75px;height: 1px;overflow: hidden; background: #333;}
.list-title .line:before {left: -30px;}
.list-title .line:after {right: -30px;background: #333;}
.list-con .list-con ul{ height: auto; }
.list-con li{padding: 6px 20px 12px;display: block;}
.list-con .course-name{height: 30px;line-height: 30px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.list-con .icon-zhibo{margin-right: 5px;}
.list-con .periods,.list-con .qustions{ display: none; }
.course-tip{font-size: 12px; display: none;}
.course-tip .iconfont{margin-right: 3px;}
.periods{margin-left: 19px;}
.qustions{margin-left: 15px;}
.list-con a{ color: #fff; }
.list-con .iconfont{font-size: 12px;}
.list-con .living{display: none;width: 13px; height: 13px;background: url('../images/live.gif') no-repeat 0 0;margin-right: 5px;}
.list-con li:hover{background-color: #363636;color: #04a7ec;}
.list-con .current .iconfont{margin-right: 3px;}
.list-con .current{background-color: #363636;}
.list-con .current .periods,.list-con .current .qustions{ display: inline-block; }
.list-con .current .icon-zhibo{display: none;}
.list-con .current .living{display: inline-block;}
.list-con .current .course-name{color: #04a7ec;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.list-con .periods:hover,.course-list .qustions:hover{color: #04a7ec;}
.play-video{ width: 100%; height: 100%; }
.video-js{ margin: 0 auto;width: 100%; height: 100%;}
.vjs-flash-fallback{margin: 0 auto;width: 100%; height: 100%;}
video::-internal-media-controls-download-button {
    display:none;
}
video::-webkit-media-controls-enclosure {
    overflow:hidden;
}
video::-webkit-media-controls-panel {
    width: calc(100% + 30px); 
}

.text-area{text-align: center;}
.text-area img{max-width: 100%;}
.pro-img{text-align: center;width: 100%;height: 600px;background-repeat: no-repeat;background-position: center center;}
.course-box{padding: 30px 0;}
.course-box h2{font-size: 30px;text-align: center;height: 30px;margin-bottom: 15px;color: #676767;}
.course-box .des{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.more-btn{ display: block;width: 220px;height: 45px;line-height:45px;text-align: center;border:1px solid #eaeaea;margin:0 auto;border-radius: 20px;color: #b3b3b3;}

.teacher-team{background: url('../images/pro_teacherbg.jpg') no-repeat center center;padding: 50px 0 70px;color: #fff;}
.teacher-team h2{font-size: 30px;text-align: center;line-height: 45px;}
.teacher-team .tip{font-size: 12px;text-align: center;font-weight: bold;text-transform: uppercase;}
.teacher-scroll{ width:100%; overflow:hidden; position:relative; padding: 40px 0 0;}
.teacher-scroll .hd{ overflow:hidden;}
.teacher-scroll .hd .prev,.teacher-scroll .hd .next{ display:none; width:33px; height:33px; line-height: 33px;text-align: center; background-color: rgba(0,0,0,.6);filter: alpha(opacity=60); overflow:hidden; cursor:pointer;}
.teacher-scroll .hd .prev{ position: absolute;z-index: 1;left: 0;bottom: 112px; }
.teacher-scroll .hd .next{  position: absolute;z-index: 1;right: 0;bottom: 112px; }
.teacher-scroll .hd .prevStop{ background-position:-60px 0; }
.teacher-scroll .hd .nextStop{ background-position:-60px -50px; }
.teacher-scroll .bd ul{ zoom:1; margin-right: -20px;}
.teacher-scroll .bd ul li{width: 450px; float:left; _display:inline; margin-right: 20px;position: relative; padding-top: 70px;}
.teacher-scroll .bd ul .li-info{background-color: #fff;position: relative;padding: 70px 25px 20px;border-radius: 5px;}
.teacher-name{font-size: 16px;color: #04a7ec;position: relative;font-weight: bold;margin-bottom: 20px;}
.teacher-name:after{content: '';width: 20px;height: 4px;background-color:#04a7ec; position: absolute;left: 0;bottom: -10px;}
.teacher-pro{color:#999;height: 126px;overflow: hidden;text-align: justify; }
.teacher-pic{position: absolute;z-index: 9;top:-63px;left: 50%;margin-left: -63px;width: 126px;height: 126px;padding: 5px;background-color: #eaeaea;border-radius: 50%;}
.teacher-pic img{width: 100%; height: 100%; object-fit: cover;border-radius: 50%;}
.teacher-scroll:hover .prev,.teacher-scroll:hover .next{display: block;}

.project .workshop{padding: 60px 0 50px;}
.workshop h2{font-size:30px;color: #676767;line-height: 45px;margin-bottom: 60px;text-align: center;}
.workshop .tabs-info{padding: 0 0 15px 0;margin-right: -9px;margin-left: -9px;}
.workshop .tabs-info img{object-fit: cover;}
.workshop li{margin:0 3px 10px;z-index: 1;padding: 6px;position: relative;}
.workshop li .info-li{display: inline-block;width: 100%;height: 100%;}
.workshop li:before{content: "";position: absolute;z-index: -1;top:-2px;left:-2px;right: -2px;bottom: 0;margin:auto;}
.workshop li:hover{box-shadow: none;}
.workshop li:hover .info-li{ background-color: #fff;}
.workshop li:hover:before{background-color: #fff;box-shadow: 0 0 9px 1px #ccc;}
.workshop .tabs-info .des .tip{max-width:130px; white-space: nowrap;overflow: hidden; text-overflow: ellipsis;}
.workshop .tabs-info .des .person{width: 160px;}
.workshop li .person .pic{display: inline-block;width: 24px;height: 24px;object-fit: cover;border-radius: 50%;margin-right: 5px;}
.workshop .collect{margin-right: 5px;}
.workshop .comment .icon-iconfontpinglun{ font-size:14px;}

/*----------------------课程---------------------*/
.goods-course{background: url('../images/online_course01.jpg') no-repeat center center;}
.goods-course .tabs-info{padding-top: 30px;}
.goods-course .container{padding-top: 30px;}
.all-tit{font-size: 20px;color: #676767;border-left: 5px solid #04a7ec;line-height: 18px;padding: 0 5px;letter-spacing: 2px;}
.all-tit span{font-size: 12px;color: #b3b3b3;margin-left: 20px;}
.goods-course .des{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.goods-course .tabs-info li{background-color: transparent;position: relative;}
.goods-course .tabs-info li .mask{display: none;position: absolute;top:0;left: 0;width: 100%;height: 205px;background-color: rgba(4,167,236,.7);}
.goods-course .mask .play-btn{position: absolute;width: 116px;height: 26px;line-height: 26px; text-align: center; border: 1px solid #fff;left: 50%;top:50%;margin:-13px 0 0 -58px; background-color: rgba(255,255,255,.3);filter: alpha(opacity=30); color: #fff;border-radius: 5px;}
.goods-course .tabs-info li:hover{background-color: #fff;box-shadow: none;}
.goods-course .tabs-info li:hover .mask{ display: block;}

.vip-course{padding: 30px 0 50px;}
.vip-course .tabs-info{padding:30px 0 0;margin-right: -9px;margin-left: -9px;}
.vip-course li{margin:0 3px 10px;z-index: 1;padding: 6px;position: relative;}
.vip-course li>div{display: inline-block;width: 100%;height: 100%;}
.vip-course li .pic{position: relative;}
.vip-course li:before{content: "";position: absolute;z-index: -1;top:-2px;left:-2px;right: -2px;bottom: 0;margin:auto;}
.vip-course li:hover{box-shadow: none;}
.vip-course li:hover>div{ background-color: #fff;}
.vip-course li:hover:before{background-color: #fff;box-shadow: 0px 0px 9px 1px #ccc;}
.vip-course .later{position: absolute;left: 0;bottom:0;width: 294px; height: 30px;line-height: 30px;background-color: rgba(0,0,0,.3);filter: alpha(opacity=30);color: #fff;padding: 0 20px;font-size: 12px;}
.later .living{font-size: 12px;}
.later .living:before{top:7px;}
.vip-course .mask{display: none;position: absolute;width: 100%;height: 100%;line-height: 205px;text-align: center;top:0;left:0;background-color: rgba(0,0,0,.4);filter: alpha(opacity=40);}
.vip-course li .icon-bofang{font-size: 60px;color: #fff;}
.vip-course li .des{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.vip-course li:hover .later{display: none;}
.vip-course li:hover .mask{display: block;}

/*---------------------资源库---------------------*/
.source-box{padding: 40px 0 100px;}
.online-source .all-tit{ color: #04a7ec; }
.source-box .file-ico{display: inline-block;}
.source-box ul{padding: 40px 0;margin-right: -24px;}
.source-box ul li{float: left;padding: 0 20px;border: 1px solid #eaeaea;border-radius: 5px;margin-right: 24px;margin-bottom: 24px;}
.file-box{position: relative;height:105px; line-height: 105px;}
.file-word .icon-pinghuayangyuanjuxingzsj{font-size: 66px;color: #04a7ec;}
.file-excel .icon-pinghuayangyuanjuxingzsj{font-size: 66px;color: #31cd6c;}
.file-ppt .icon-pinghuayangyuanjuxingzsj{font-size: 66px;color: #de6a3d;}
.file-pdf .icon-pinghuayangyuanjuxingzsj{font-size: 66px;color: #e21607;}
.file-rar .icon-pinghuayangyuanjuxingzsj{font-size: 66px;color: #42b21b;}
.file-other .icon-pinghuayangyuanjuxingzsj{font-size: 66px;color: #9349a8;}
.icon-word,.icon-excel,.icon-ppt,.icon-rar,.icon-pdf,.icon-other{position: absolute;z-index: 9;left: 17px;top:0;font-size: 32px;color: #fff;}
.icon-rar{ left: 15px; }
.file-name{margin-top: 30px;color: #676767;margin-left: 10px;width: 210px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.file-info{border-top: 1px solid #eaeaea;height: 40px;line-height: 40px;font-size: 12px;}
.file-num{display: inline-block;padding-right: 10px;border-right: 1px solid #eaeaea;margin-right: 12px;line-height: 13px;}
.file-info span{ color: #b3b3b3;}
.file-info .icon-xiazai{margin-right: 3px;}
.source-box ul li:hover{box-shadow: 0 0 9px 1px #ccc;}
.source-box ul li:hover .file-name{color: #04a7ec;}

/*----------------------学员作品-----------------------*/
.online-workshop .workshop{padding: 40px 0 100px;}
.online-workshop .all-tit{ color: #04a7ec; margin-top: 30px;}
.online-workshop .workshop ul{padding: 40px 0;}
.online-workshop .submit-btn{font-size:16px; padding: 15px 40px;border-radius: 30px;}
.online-workshop .tabs-info li img{height: auto;}
.online-workshop .pop-layer{z-index: 9999;position: fixed;width: 100%;height: 100%;left: 0;top:0;background-color: rgba(0,0,0,0.5);background-color: #666666 \9; filter:alpha(opacity=50) \9;color: #000;display: none;}
.online-workshop .pop-layer a{color: #676767;}
.online-workshop .pop-bd{z-index: 10000;position: absolute;background-color: #fff;top:50%;left: 50%;width: 520px;max-height: 530px;margin:-265px 0 0 -260px;border-radius: 5px;-webkit-box-shadow:0 0 10px 1px rgba(0,0,0,.6);  -moz-box-shadow:0 0 10px 1px rgba(0,0,0,.6);  box-shadow:0px 0px 10px 1px rgba(0,0,0,.6);}
.online-workshop .pop-tit{position: relative;padding: 12px;border-bottom: 1px solid #d9d9d9;border-top-left-radius: 5px;border-top-right-radius: 5px;}
.online-workshop .pop-tit .close{ float:right; color:#999;font:bold 14px/14px simsun;text-shadow:0 1px 0 #ddd;height: 24px;line-height: 24px;}
.online-workshop .pop-tit h2{height: 24px;line-height: 24px;font-weight: normal; font-size: 14px;color: #575e65}
.online-workshop .pop-box{padding: 20px 23px;}
.pop-box dl{display: block; height: 40px;line-height: 40px;margin-bottom: 10px;}
.pop-box dt{float: left;display: block;width: 70px;height: 40px;}
.pop-box dd{display: block;}
.pop-box .title{border: 1px solid #d9d9d9;width: 350px;padding: 0 10px;}
.uploader-img{position: relative;height: 20px;margin-top: 10px;margin-right: 20px;color: #04a7ec;}
.uploader-img .file{width:80px; height: 20px;position: absolute;left: 0;top:0;font-size: 0;opacity: 0;cursor: pointer;}
.uploader-img .select-file{display: block;width: 80px;height: 20px;font-size: 14px;line-height: 20px;color: #04a7ec;cursor: pointer;}
.upload-file{height: 20px;margin-top: 10px;}
.start-file{height: 20px;line-height: 20px;cursor: pointer;color: #76b600;}
.pop-box .icon-add{vertical-align: middle;font-weight: bold;font-size: 18px;}
.pop-box .icon-shangchuan{font-size: 14px;margin-right: 2px;}
.pop-box .btns{ margin-top: 20px; }
.pop-box .btns a{display: inline-block;width: 100px;text-align: center;height: 35px;line-height: 35px;border: 1px solid #04a7ec;border-radius: 5px;margin-right: 20px; }
.pop-box .btns .btn-primary{background: #04a7ec;color: #fff;}
.pop-box .btns .btn-primary:hover{background: #15b4f7;color: #fff;}
.pop-box .btns .btn-default:hover{background: #04a7ec;color: #fff;}
#js-photo-show{ zoom:1; max-height: 222px;overflow: auto; }
#js-photo-show:after{display:block;clear:both;content:"";visibility:hidden;height:0;} 
.img-list{ float: left; margin-right:10px; margin-bottom: 10px; }
.img-list-action{ text-align: center; }

/*作品详情*/
.work-layer{position: fixed;top:0;bottom: 0;left: 0;right: 0;margin: 0 auto;background: rgba(0,0,0,.5);z-index: 9999;min-height: 100%;overflow: hidden;display: none;}
.work-layer .work-scroll{ overflow-y: auto;min-height: 100%;height: 100%;overflow-x: hidden;}
.work-layer .close{position: absolute;top:30px; right: 30px; font-size: 25px;color: rgba(255,255,255,.6);}
.work-layer .work-wrap{width: 980px;min-height: 500px;background: #fff;border-radius: 5px;margin: 40px auto;padding: 40px 0; }
.work-layer .work-hd{padding:0 40px 25px;border-bottom: 1px solid #eaeaea;}
.work-hd h3{letter-spacing: 1px;font-size: 16px;color: #04a7ec;}
.work-wrap p{font-size: 12px;margin-top: 15px;}
.work-wrap p span{margin-left: 20px;}
.work-wrap .stu-status{width: 14px; height: 14px;border-radius: 50%;margin-right: 5px;}
.work-wrap .prev{position: fixed;top: 50%;margin-top: -20px;left: 100px;font-size: 32px;color: rgba(255,255,255,.6);}
.work-wrap .next{position: fixed;top: 50%;margin-top: -20px;right: 100px;font-size: 32px;color: rgba(255,255,255,.6);}
.work-wrap .prevStop{ display:none;}
.work-wrap .nextStop{ display:none;}
.work-img{margin: 20px 40px;background: #eee;min-height: 500px;}
.work-img .img-box{width: 100%; height: 100%;text-align: center;min-height: 500px;position: relative;}
.work-hd-box{position: relative;}
.work-img .img-box img{max-width: 100%;1display: block;position: absolute;left: 0;top:0;right: 0;bottom: 0;margin:auto;vertical-align: middle;}
.work-hd .stu-info{width: 170px;}
.work-hd .stu-info img{width: 60px; height: 60px;display: block;border-radius: 50%;margin-right: 8px;}
.work-hd .stu-info h3{margin-top: 8px;margin-bottom: 5px;font-size: 14px;width: 100px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.work-hd .stu-info .follow span{ display: inline-block;width:15px;height: 15px;text-align: center;line-height: 13px;border-radius: 50%;background: #04a7ec;color: #fff;margin-right: 5px;}
.work-operate{padding: 0 40px 20px;border-bottom: 1px solid #eaeaea;}
.work-operate .op-trans,.work-operate .op-share{margin-right: 20px;}
.work-operate .icon-fenxiang{font-size: 13px;}
.work-operate .icon-shijian{font-size: 14px;}
.work-operate .iconfont{margin-right: 3px;}
.work-comment{margin: 20px 40px;}
.work-comment .comment-text{width: 900px;height: 120px;padding: 10px;background: #fff;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box;box-sizing: border-box;border: 1px solid #eaeaea;margin-bottom: 10px;}
.work-comment .comment-text:focus{border-color: rgba(82, 168, 236, 0.8);outline: 0;outline: thin dotted \9;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);}
.op-btn{padding: 7px 30px;margin-left: 5px;}
.work-comment-con h3{padding: 0 40px;border-bottom: 1px solid #eaeaea;color: #04a7ec;font-size: 14px;height: 25px;line-height: 25px;}
.total-rank{padding: 30px 0;}
.total-rank p{color: #b3b3b3;}
.total-rank .score{color: #676767;}
.total-rank .rank-left{width: 250px;text-align: center;border-right: 1px solid #eaeaea;}
.total-remark li{width: 100%;border: none;height: auto;padding: 20px 40px;box-sizing: border-box;}
.rank-right{height: 73px;line-height: 73px;padding-left: 60px;}
.rank-right label{margin:0 10px;}
.rank-right label input{vertical-align: middle;margin-right: 2px;}
.remark-img{width: 60px;height: 60px;margin-right: 20px;}
.remark-img img{width: 60px; height: 60px;object-fit: cover;border-radius: 50%;}
.remark-info{margin-left: 80px;}
.remark-info .time{font-size: 12px;color: #b3b3b3;margin-left: 20px;}
.remark-name,.remark-star{ height: 28px;line-height: 28px;}
.remark-name a{color:#04a7ec;font-size: 16px;font-weight: bold;letter-spacing: 0;}
.remark-txt{height: auto;line-height: 26px;}
.remark-star img{margin-right: 5px;}
.total-remark li:hover{background-color: #f6f6f6;}
.remak-operate{margin-top: 6px;}
.remak-operate a{margin-right: 20px;}
.work-layer ::-webkit-scrollbar-thumb{ background-color: #959595;}