@charset "utf-8";
/* CSS Document */
body{background: #f4f4f4}
.Header{background: #fff}
.Header .logo{margin: 10px 0}
.Header .HeaderMain {margin-top: 15px;}
.VideoBox{background: #23303e}
.VideoBox .TitleName{ color: #dddddd }
.VideoBox .TitleName a{color: #fff}
/*视频播放主题*/
.VideoMain{ width: 1200px;}
.VideoLeft{width:832px;height: 468px;float: left;position: relative;}
.VideoLeft .video{width: 100%; height: 100%; border: none; margin:0;}
.VideoRight{float: right; width: 368px; height: 468px; background: #191a2a;position: relative;}
/*章节栏目*/
.VideoTitName{ height: 40px;overflow: hidden;padding: 5px 0;}
.VideoTitName li{padding: 0 20px;position: relative;height: 40px;line-height: 40px;font-size: 16px;color: #fff;text-align: center;float: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.VideoTitName li:hover,.VideoTitName li.cur{color: #ff6000; cursor: pointer;font-weight: bold;}
.VideoTitName li.cur::after{content: '';width: 18px;height: 2px;background-color: #ff6000;position: absolute;bottom: 0;left: 50%;margin-left: -9px;}
.VideoTitName li::before{content: '';width: 1px;height: 14px;background-color: #2b2c3e;position: absolute;right: 0;top: 14px;}
.VideoTitName li:last-child::before{display: none;}
.TeacherTit li{width: 74px}
.ColumnTit li{width: 40%}
.CourseTit li{max-width: 50%;}
/*课程进度*/
.VideoInfor{color: #fff; padding:0 18px; height: 30px; line-height: 30px;font-size: 12px;color: #4a4b55;}
/*章节主题*/
.VideoCataMain{height: 347px;overflow: hidden;overflow-y: scroll}
.VideoCataMain::-webkit-scrollbar{width: 0px;}
/*定义滚动条轨道 内阴影+圆角*/
.VideoCataMain::-webkit-scrollbar-track {border-radius: 0;background-color: #191a2a;}
/*定义滚动滑块 内阴影+圆角*/
.VideoCataMain::-webkit-scrollbar-thumb{border-radius: 12px;background-color: #444551;}
.VideoCataMain::-webkit-scrollbar-thumb:hover{background: #ccc;}
.VideoCataBox .VideoCataMain{height: 400px}
.VideoCataList li{border: 1px solid #414d59; width: 252px; padding:0 8px 5px 10px;  border-radius: 3px; margin-bottom: 10px;}
.VideoCataList li .Tit{height: 32px; line-height: 32px; width: 252px; color: #fff; overflow: hidden;}
.VideoCataList li .Infor{height: 16px; line-height: 16px; color: #556c85; font-size: 12px}
.VideoCataList li .Infor i{ width: 14px; height: 16px; background-position: -380px 0; float: left; margin-right: 50px; }
.VideoCataList li .State{ height: 16px; line-height: 16px; color: #fff;font-size: 12px}
.VideoCataList li .State span,.VideoCataList li .Infor span{padding:0 2px; background: #091623; font-size: 12px; float: left; background: #16212d; margin-right: 36px}
.VideoCataList li .State em{ float: right; font-size: 12px; }
.VideoCataList li .Time{height: 28px; line-height: 28px; color: #556c85; font-size: 12px;}
.VideoCataList li .Time i{width: 7px; height: 28px; margin-right:5px; background-position: -380px -101px; float: left;}
.VideoCataList li .Time span{float: left;}
.VideoCataList li .Time em{float: right;font-size: 12px}
.VideoCataList li .NoteTxt{color: #dddddd; line-height: 24px; margin: 5px 0;word-wrap:break-word }
.VideoCataList li:hover{ cursor: pointer; border-color: #ccc }
.VideoCataList li.cur{background:#16212d; border-color: #16212d}
.VideoCataList li.cur .Tit{color: #00c176}
.VideoCataList li.cur .Infor{display: none}
.VideoCataList li.cur .State{display: block;}
.VideoCataList li.au{max-height: none !important; overflow: visible;}
.VideoNoteList li{ max-height: 105px; overflow: hidden;}
.VideoNoteList li .NoteTxt{margin-bottom: 0;}

.VideoCataOper{height: 40px;background: #16212d}
.VideoCataOper ul{display:flex;}
.VideoCataOper ul li{height: 40px;text-align: center;color: #909ca7;font-size: 12px;position: relative;cursor: pointer;display: flex;align-items: center;flex: 1;justify-content: center;}
.VideoCataOper ul li a,.VideoCataOper ul li .Text{display:flex;justify-content: center;align-items: center;}
.VideoCataOper ul li i{width: 20px;height: 20px;/* display: block; *//* position: absolute; *//* left: 50%; *//* top: 12px; *//* transform: translate(-50%,0); */}
.VideoCataOper ul li i.i1{background:url('./icon_handout.png') no-repeat;}
.VideoCataOper ul li i.i2{background:url('./icon_evaluate.png') no-repeat;}
.VideoCataOper ul li i.i3{background:url('./icon_questions.png') no-repeat;}
.VideoCataOper ul li i.i4{background:url('./icon_note.png') no-repeat;}
.VideoCataOper ul li p{/* padding-top: 40px; */color: #fff;margin-left: 10px;}
.VideoCataOper ul li:hover,
.VideoCataOper ul li.cur{background-color: #ff9b48;}
.VideoCataOper ul li .OperBox{position: relative;}
.VideoCataOper ul li .OperBox i.Close{right: 0px;top: 24px;left: auto;transform: translate(0,0);background: url('./icon_tip_close.png') no-repeat;width: 16px;height: 16px;text-align: right;display: flex;position: absolute;}
.VideoCataOper ul li .ArrowBox,.VideoPraise .ArrowBox{padding: 0 20px;position: absolute;width: 328px;height: 371px;box-sizing: border-box;background: #fff;border-radius: 5px;bottom: 56px;display: none;z-index: 50;}
.VideoCataOper ul li .ArrowW2,.VideoPraise ul li .ArrowW2{width: 188px;}
.VideoCataOper ul li .ArrowW1,.VideoPraise ul li .ArrowW1{width: 102px;}
.VideoCataOper ul li .ArrowBox .ArBtm,
.VideoCataOper ul li .ArrowBox .ArBtm u,
.VideoCataOper .ArrowBox .ArBtm,
.VideoCataOper .ArrowBox .ArBtm u{border-color:#fafafa transparent transparent transparent;}
.VideoCataOper .ArrowBox .ArBtm {position: absolute;border-color: #e8e8e8 transparent transparent transparent;border-style: solid dashed dashed dashed;border-width: 10px;bottom: -20px;}
.VideoRight .switchList{position: absolute;right: 0;top: -42px;width: 100px;height: 30px;}
.VideoRight .switchList span#class-year{background-color: #444551;display: block;width: 100%;height: 30px;line-height: 30px;font-size: 14px;color: #b7b8c1;text-align: center;border-radius: 10px;}
.VideoRight .switchList span#class-year i{display: inline-block;width: 14px;height: 8px;background: url('./select_down_arrow.png') no-repeat;margin-left: 10px;}
.VideoRight .switchList .selectList{display: none;position: absolute;width: 100px;border-radius: 0 0 10px 10px;overflow: hidden;}
.VideoRight .switchList .selectList p{height: 30px;background-color: #444551;width: 100%;font-size: 14px;color: #b7b8c1;text-align: center;line-height: 30px;}
.VideoRight .switchList .selectList p:hover{color: #fff;background-color: #585964;cursor: pointer;}
.VideoRight .switchList:hover #class-year{border-radius: 10px 10px 0 0 !important;}
.VideoRight .switchList:hover .selectList{display: block;}

/*视频操作-评价*/
.VideoCataOper ul li.Eval .ArrowBox{left: -70px;}
.VideoCataOper ul li.Eval .ArBtm{left: 106px;}
.VideoCataOper ul li.Eval .OperBox .teacherInfo{text-align: left;line-height: 59px;padding-top: 16px;}
.VideoCataOper ul li.Eval .OperBox .teacherInfo img{width: 59px;height: 59px;border-radius: 59px;}
.VideoCataOper ul li.Eval .OperBox .teacherInfo span{font-size: 16px;color: #333333;margin-left: 15px;font-weight: bold;}
.VideoCataOper ul li.Eval .OperBox .ListItem{text-align: left;margin-bottom: 15px;}
.VideoCataOper ul li.Eval .OperBox .ListItem span{margin-right: 5px;display: block;line-height: 24px;font-size: 14px;color: #333333;font-weight: bold;}
.VideoCataOper ul li.Eval .OperBox .ListItem .Txt {width: 200px;}
.VideoCataOper ul li.Eval .OperBox .ListItem .Txt .Start i{position: static;transform: translate(0,0); display: inline-block;width: 22px;height: 21px;background: url('./icon_star.png') no-repeat;margin-left: 3px;}
.VideoCataOper ul li.Eval .OperBox .ListItem .Txt .Start i.on{background: url('./icon_star_on.png') no-repeat;}
.VideoCataOper ul li.Eval .OperBox .ListItem .Txt p{padding: 0;font-size: 14px;color: #999999;margin-top: 6px;padding-left: 4px;}
.VideoCataOper ul li.Eval .OperBox .evaluateCont{padding-top: 20px;}
.VideoCataOper ul li.Eval .OperBox .evaluateCont .txtAreaBox{position: relative;margin-bottom: 0;}
.VideoCataOper ul li.Eval .OperBox .evaluateCont .txtAreaBox span{font-size: 14px;color:#999999;font-weight: normal;position: absolute;right: 5px;bottom: 5px;}
.VideoCataOper ul li.Eval .OperBox .evaluateCont .txtAreaBox span em{font-size: 14px;color: #999999;}
.VideoCataOper ul li.Eval .OperBox .evaluateCont .txtArea{height: 86px;border-radius: 10px;box-sizing: border-box;line-height: 22px; resize: none; padding:5px 10px; border: 1px solid #e8e8e8; background: #f7f7f7;width: 100%;display: block;}
.VideoCataOper ul li.Eval .OperBox .evaluateCont .tar{text-align: right;padding-top: 8px;}
.VideoCataOper ul li.Eval .OperBox .evaluateCont .Btn{cursor:pointer;line-height: 35px;color: #fff;font-size: 14px;width: 110px;border-radius: 10px;background-image: -moz-linear-gradient( 180deg, rgb(255,96,0) 0%, rgb(255,155,73) 100%);background-image: -webkit-linear-gradient( 180deg, rgb(255,96,0) 0%, rgb(255,155,73) 100%);background-image: -ms-linear-gradient( 180deg, rgb(255,96,0) 0%, rgb(255,155,73) 100%);}



/*视频操作-提问*/
.VideoCataOper ul li.Put .ArrowBox{left: -140px;}
.VideoCataOper ul li.Put .ArBtm{ left: 176px;}
.VideoCataOper ul li.Put .txtArea{height: 142px;border-radius: 10px;box-sizing: border-box;line-height: 22px; resize: none;padding:5px 10px; border: 1px solid #e8e8e8; background: #f7f7f7;width: 100%;display: block;}
.VideoCataOper ul li.Put .txtAreaBox{position: relative;margin-bottom: 0;}
.VideoCataOper ul li.Put .txtAreaBox span{font-size: 14px;color:#999999;font-weight: normal;position: absolute;right: 5px;bottom: 5px;}
.VideoCataOper ul li.Put .txtAreaBox span em{font-size: 14px;color: #999999;}
.VideoCataOper ul li.Put .TitName{height: 60px; line-height: 60px; text-align: left;font-weight: bold;font-size: 16px}
.VideoCataOper ul li.Put select{font-size: 14px;height: 40px;width: 100%;padding-left: 12px;box-sizing: border-box;outline: none; background: #f7f7f7; border: 1px solid #ececec; color: #999999; margin-bottom:10px;border-radius: 10px;}
.section .item {width: 44px;height: 44px;border: 1px solid #efefef;float: left;margin-right: 10px;display: inline;position: relative;}
.section .item i.addimg {width: 44px;height: 44px;display: inline-block;background: url('./icon_add.png') no-repeat center center;z-index: 2;position: static;transform: translate(0,0);}
.section .preview,.preBlock{position: absolute;display: block;width: 44px;height: 44px;left: 0;top: 0;}
.section .item i.delete {width: 16px;height: 16px;display: inline-block;position: absolute;top: -8px;right: -8px;transform: translate(0,0);left: auto;background: url('./icon_img_close.png') no-repeat;}
.section .preBlock img {display: block;width: 44px;height: 44px;}
.section .upload_input{ display: block;width: 0;height: 0;-webkit-opacity: 0.0;/* Netscape and Older than Firefox 0.9 */  -moz-opacity: 0.0;/* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/-khtml-opacity: 0.0;/* IE9 + etc...modern browsers */opacity: .0;/* IE 4-9 */filter:alpha(opacity=0);/*This works in IE 8 & 9 too*/ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";/*IE4-IE9*/ filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);}
.VideoCataOper ul li.Put p.tip{font-size: 12px;color: #999999;padding: 0;text-align: left;padding-top: 15px;}
.VideoCataOper ul li.Put .tar{text-align: right;padding-top: 18px;}
.VideoCataOper ul li.Put .Btn{cursor:pointer;line-height: 35px;color: #fff;font-size: 14px;width: 110px;border-radius: 10px;background-image: -moz-linear-gradient( 180deg, rgb(255,96,0) 0%, rgb(255,155,73) 100%);background-image: -webkit-linear-gradient( 180deg, rgb(255,96,0) 0%, rgb(255,155,73) 100%);background-image: -ms-linear-gradient( 180deg, rgb(255,96,0) 0%, rgb(255,155,73) 100%);margin-top: 11px;}

.VideoCataList ul{width:100%}
.VideoCataList .fa_Item{overflow:hidden;font-size:12px;color:#fff;transition:all 0.5s;position:relative}
.VideoCataList .fa_Item.heightAuto{height:auto}
.VideoCataList .fa_Item.heightAuto .fa_children{display:block}
.VideoCataList .fa_Item .fa_children{display:none}
.VideoCataList .fa_Item .fa_children{position:relative}
.VideoCataList .fa_children{color:#bfbfbf}
.VideoCataList .fa_Item .fa_Item_lession{position:relative;cursor:pointer;padding:8px 0}
.VideoCataList .fa_Item .fa_Item_lession:hover{background-color:#000}
.VideoCataList .fa_Item .fa_Item_lession:hover .bar_press{background-color:#000}
.VideoCataList .fa_Item .fa_Item_lession.cur{color:#fff}
.VideoCataList .fa_Item .it_less_left{width:81%;position:relative}
.VideoCataList .fa_Item .it_less_right{width:15%;text-align:right;position:relative;z-index:10}
.VideoCataList .fa_Item .it_less_right .end{border:1px solid #9899a3;height:20px;border-radius:20px;line-height:20px;font-size:12px;color:#9899a3;padding:0 6px}
.VideoCataList .fa_Item .it_less_right .living{border:1px solid #ff6000;height:20px;border-radius:20px;line-height:20px;font-size:12px;color:#ff6000;padding:0 6px}
.VideoCataList .fa_Item .it_less_right .wait{border:1px solid #ff9b48;height:20px;border-radius:20px;line-height:20px;font-size:12px;color:#ff9b48;padding:0 6px}
.VideoCataList .it_less_left{padding-left:40px;box-sizing:border-box}
.VideoCataList .it_less_left .name{max-width:100%;display:inline-block;margin-right:5px}
.VideoCataList .it_less_left em.time{font-size:12px;color:#d2ac6e;white-space:nowrap}
.VideoCataList .it_less_left .Btn{display:inline-block;padding:2px 6px;border-radius:10px;background:#5d6d79;margin-left:5px;color:#fff}
.VideoCataList .it_less_left .Btn.free{background:#e8253b;color:#fff}
.VideoCataList .fa_Item .fa_Item_lession .it_less_left::after{display:block;position:absolute;content:"";left:20px;top:2px;width:12px;height:12px;border-radius:50%;border:1px solid #ccc;box-sizing:border-box;z-index:10;background:#444551}
.VideoCataList .fa_Item .fa_Item_lession.isLock .it_less_left::before{display:block;position:absolute;content:"";left:-45.5px;top:-2px;width:20px;height:20px;border:1px solid transparent;z-index:10;background:url("./is_locking.png") no-repeat;background-position:center}
.VideoCataList .fa_Item .fa_Item_lession .bar_press{position:absolute;left:0;height:100%;top:0;width:20%;background:#444551}
.VideoCataList .fa_Item .fa_Item_lession.hasProgress .it_less_left::after{display:block;position:absolute;content:"";left:20px;top:2px;width:12px;height:12px;border-radius:50%;border:0;z-index:10;background:url("./default_dolt_sel.png") no-repeat}
.VideoCataList .fa_Item .fa_Item_lession.watchAll .it_less_left::after{display:block;position:absolute;content:"";left:-22px;top:3px;width:12px;height:12px;border-radius:50%;border:0;z-index:10;background:url("./default_dolt_all.png") no-repeat}
.VideoCataList .fa_Item_lession::before{content:'';display:inline-block;width:9px;height:11px;background:url('./video_play.png') no-repeat;position:absolute;top:10px;left:8px;display:none;z-index:1}
.VideoCataList .cur::before{display:block}
.VideoCataList .fa_Item:first-child .fa_children::after{left:25px;top:10px}
.VideoCataList .fa_Item .fa_children::after{position:absolute;display:block;content:"";left:25px;top:0;width:1px;height:100%;background:#fff}
.VideoCataList .CourseInfor .Name{color:#fff;line-height:50px}
.VideoCataList .CourseInfor .Name .Btn{display:inline-block;padding:0 20px;border-radius:20px 5px 5px 5px;background:#e8253b;color:#fff;position:relative}
.VideoCataList .fa_Item h5{height:32px;line-height:32px;font-size:14px;color:#fff;cursor:pointer}
.VideoCataList .fa_Item h5 .icon_arr{display:inline-block;margin-right:8px;width:12px;height:12px;background:url("./arrow_icon_right.png") no-repeat;background-size:12px auto;background-position:left top}
.VideoCataList .fa_Item.on h5 .icon_arr{display:inline-block;margin-right:8px;width:12px;height:12px;background:url("./arrow_icon_right.png") no-repeat;background-size:12px auto;background-position:left top;transform:rotate(90deg)}
.VideoCataList .fa_Item.on .fa_children{display:block}
.listCont .bankBox{padding:22px 0}
.listCont .bankBox .bankTipBox{padding:22px;box-sizing:border-box;width:100%;border-radius:8px;border:1px solid #fae9d5;background-image:-moz-linear-gradient(0deg,rgb(255,242,240) 0%,rgb(255,247,226) 100%);background-image:-webkit-linear-gradient(0deg,rgb(255,242,240) 0%,rgb(255,247,226) 100%);background-image:-ms-linear-gradient(0deg,rgb(255,242,240) 0%,rgb(255,247,226) 100%)}
.listCont .bankBox .bankTipBox .topBox{line-height:27px;font-size:18px;color:#ff6000;font-weight:bold}
.listCont .bankBox .bankTipBox .topBox img{margin-right:12px}
.listCont .bankBox .bankTipBox .contBox{padding-left:40px;padding-top:20px}
.listCont .bankBox .bankTipBox .contBox .text{font-size:16px;color:#333333;line-height:26px}
.listCont .bankBox .bankTipBox .contBox h4{font-size:16px;color:#ff6000;font-weight:bold;margin-top:12px}
.listCont .bankBox .bankTipBox .contBox .btnBox{text-align:center;padding-top:30px}
.listCont .bankBox .bankTipBox .contBox .btnBox a{transition:all .3s;display:inline-block;width:132px;height:42px;border:1px solid #ff6000;border-radius:8px;font-size:16px;color:#ff6000;text-align:center;line-height:42px}
.listCont .bankBox .bankTipBox .contBox .btnBox a:hover{background-color:#ff6000;color:#fff}
#paperIframe{width:782px;height:800px;border:0}

/*视频操作-笔记*/
.VideoCataOper ul li.Note .ArrowBox{left: -210px;}
.VideoCataOper ul li.Note .ArBtm{ left: 244px;}
.VideoCataOper ul li.Note .TimeCount{height: 36px; line-height: 36px; text-align: center; color: #f24343; border-top:1px solid #e8e8e8;}
.VideoCataOper ul li.Note .TimeCount i{ width:10px; height: 12px; display: inline-block; background-position:-318px -2px; position: static;}
.VideoCataOper ul li.Note .txtArea{height: 132px}
.VideoCataOper ul li.Note .TitName{height: 60px; line-height: 60px; text-align: left;font-weight: bold;font-size: 16px}
.VideoCataOper ul li.Note .txtArea{height: 248px;border-radius: 10px;box-sizing: border-box;line-height: 22px; resize: none;padding:5px 10px; border: 1px solid #e8e8e8; background: #f7f7f7;width: 100%;display: block;}
.VideoCataOper ul li.Note .txtAreaBox{position: relative;margin-bottom: 0;}
.VideoCataOper ul li.Note .txtAreaBox span{font-size: 14px;color:#999999;font-weight: normal;position: absolute;right: 5px;bottom: 5px;}
.VideoCataOper ul li.Note .txtAreaBox span em{font-size: 14px;color: #999999;}
.VideoCataOper ul li.Note .tar{text-align: right;}
.VideoCataOper ul li.Note .Btn{cursor:pointer;display: inline-block;text-align: center;line-height: 35px;color: #fff;font-size: 14px;width: 110px;border-radius: 10px;background-image: -moz-linear-gradient( 180deg, rgb(255,96,0) 0%, rgb(255,155,73) 100%);background-image: -webkit-linear-gradient( 180deg, rgb(255,96,0) 0%, rgb(255,155,73) 100%);background-image: -ms-linear-gradient( 180deg, rgb(255,96,0) 0%, rgb(255,155,73) 100%);margin-top: 11px;}
/*视频操作-点击过后效果*/
.VideoCataOper ul li.cur .ArrowBox{display: block;}
/*视频播放页面，播放完成后弹出的div层的样式*/
.playMaskBox{display: none;width: 100%;height: 100%;position: fixed;top:0;left: 0;background: rgba(0, 0, 0, 0.6);z-index: 1000;}
.playedBox{position: fixed;top: 50%;left: 50%;transform: translate(-50%, -44px);}
.replayBtn{cursor:pointer; margin-right: 10px;display: inline-block;width: 94px;height: 94px;background: url('./replayIcon.png') no-repeat;}
.evaluateBtn{cursor:pointer;margin-right: 10px;display: inline-block;width: 94px;height: 94px;background: url('./evaluateIcon.png') no-repeat;}
.nextBtn{cursor:pointer;display: inline-block;width: 94px;height: 94px;background: url('./nextIcon.png') no-repeat;}
.countDown{display: none;position: fixed;top: 50%;left: 50%;transform:translate(-50%,60px);color: #ff9b48;z-index: 1000;}

.courseDetails .rightBox .teacherInfoBox .swiper-container{height:443px}
.courseDetails .rightBox .teacherInfoBox .slideItem{padding:0 20px;box-sizing:border-box;width:100%;cursor:pointer}
.courseDetails .rightBox .teacherInfoBox .slideItem_top{padding-top:20px}
.courseDetails .rightBox .teacherInfoBox .slideItem_top  .teach_img{position:relative;width:102px;height:154px;border-radius:10px;background-color:#d9dbe5;text-align:center;overflow:hidden}
.courseDetails .rightBox .teacherInfoBox .slideItem_top img{width:94px;position:absolute;bottom:0;left:50%;transform:translate(-50%,0)}
.courseDetails .rightBox .teacherInfoBox .slideItem_top .teach_intro{width:200px;margin-left:15px}
.courseDetails .rightBox .teacherInfoBox .slideItem_top .intro_des{font-size:14px;color:#333333;line-height:1.8;padding-top:5px}
.courseDetails .rightBox .teacherInfoBox .teacherName{font-size:16px;color:#333333;font-weight:bold}
.courseDetails .rightBox .teacherInfoBox .slideItem_bot{padding-top:22px;padding-top:15px}
.courseDetails .rightBox .teacherInfoBox .teach_examList{margin-top:10px}
.courseDetails .rightBox .teacherInfoBox .slideItem_bot .teach_exam{margin-bottom:15px;margin-right:20px;float:left;width:140px;height:30px;background-color:#f7f7f7;text-align:center;line-height:30px;font-size:14px;color:#333333}
.courseDetails .rightBox .teacherInfoBox .slideItem_bot .teach_exam:nth-child(2n){margin-right:0}