@charset "utf-8";
.container { margin: 0 auto 140px; }

/* 我的协议*/
.layout-header { margin: 30px auto; font-size: 16px; line-height: 30px; overflow: hidden; }
.layout-header a { display: inline-block; width: 75px; height: 30px; background-color: #0091f4; color: #ffffff; vertical-align: top; float: left; text-align: center; }
.layout-header span { display: inline-block; font-size: 18px; color: #333333; background-color: #fff; height: 30px; vertical-align: top; float: left; padding: 0 16px; }

.layout-body { background-color: #fff; overflow: hidden; border: 1px solid #dfdfdf; }
.layout-body h2.layout-title { line-height: 22px; margin: 20px; border-left: 5px solid #0091f4; padding-left: 10px; font-size: 18px; color: #333333; }
.layout-body .xy-content { color: #000000; font-size: 16px; line-height: 24px; padding: 0px 30px 30px; }

.layout-body .message-wrapper { overflow: hidden; }
.layout-body .message-box { padding: 0 40px; overflow: hidden; }
.layout-body .message-box li { border-bottom: 1px solid #dfdfdf; padding-bottom: 20px; margin-bottom: 16px; }
.layout-body .message-box li:last-child { border-bottom: none; }
.layout-body .message-box li .messagebox { height: 36px; overflow: hidden; position: relative; }
.layout-body .message-box .photo { width: 30px; height: 30px; border-radius: 50%; background-size: cover; background-repeat: no-repeat; background-position: center center; position: absolute; top: 6px; left: 3px; }
.layout-body .message-box .content { margin-left: 46px; margin-right: 240px; }
.layout-body .message-box .content h2 { color: #333333; line-height: 18px; margin-bottom: 3px; }
.layout-body .message-box .content p { color: #666666; line-height: 15px; }
.layout-body .message-box .timebox { position: absolute; right: 0; top: 0; font-size: 12px; color: #999999; }

.layout-body .view-more { height: 63px; text-align: center; line-height: 63px; background-color: #fff; border-top: 1px solid #dfdfdf; }
.layout-body .view-more .more_icon { width: 16px; height: 16px; display: inline-block; vertical-align: top; background: url(../images/user/more.png) center center no-repeat; margin: 24px 15px; }

.front-header { background-color: #fff; padding: 35px 0; border-bottom: 1px solid #dfdfdf; }
.front-header h2 { line-height: 30px; font-size: 24px; color: #333333; }
.front-header .info { margin-top: 16px; font-size: 14px; color: #666666; }
.front-header .info span { margin-right: 40px; }
.front-header .info span em { font-weight: bold; color: #ff0000; font-size: 16px; font-style: normal; }
.front-header .info a { float: right; color: #333333; }
.front-header .info a:hover { opacity: 0.85; }

.layout-wrapper { margin: 30px auto 100px; }
.layout-wrapper .layout-left-box { width: 750px; background-color: #fff; border: 1px solid #dfdfdf; }
.layout-wrapper .tabbox .tab-nav li { width: 33.3%; height: 45px; line-height: 42px; font-size: 16px; color: #333333; border-top: 3px solid #fafafa; float: left; text-align: center; background-color: #fafafa; cursor: pointer; transition: all ease-in-out .1s; }
.layout-wrapper .tabbox .tab-nav li.on { background-color: #fff; border-top: 3px solid #6e6e7e; }
.layout-wrapper .tabbox .tab-content .box { display: none; padding: 20px 0; }
.layout-wrapper .tabbox .tab-content .no-data{padding:100px 0;width:100%;}
.layout-wrapper .tabbox .tab-content .no-data img { margin: 0 auto; }
.layout-wrapper .tabbox .tab-content .no-data p { line-height: 30px; font-size: 18px; text-align: center; margin-top: 20px; }
.layout-wrapper .layout-right-box {width: 310px;}
.layout-wrapper .panel-small {padding-bottom: 20px;border: 1px solid #dfdfdf;background-color: #fff;}
.layout-wrapper .panel-small .panel-heading { height: 36px; background-color: #fafafa; font-size: 16px; color: #333333; padding-left: 20px; line-height: 36px; }
.layout-wrapper .panel-small .panel-body { padding: 20px; }
.layout-wrapper .progress-box .baseinfo { position: relative; overflow: hidden; height: 30px; }
.layout-wrapper .progress-box .baseinfo .photo { width: 30px; height: 30px; background-size: cover; position: absolute; top: 0; left: 0; }
.layout-wrapper .progress-box .baseinfo a { display: block; line-height: 30px; font-size: 14px; color: #333333; margin-left: 40px; }
.layout-wrapper .progress-box .progress { margin: 20px auto 10px; height: 5px; background-color: #f2f1f6; }
.layout-wrapper .progress-box .progressing { display: block; background-color: #0091f4; height: 100%; }
.layout-wrapper .progress-box p { color: #666666; font-size: 10px; }
.layout-wrapper .progress-box p em { font-style: normal; color: #333333; }

/* 课程列表 */
.layout-wrapper .mulu_list{margin:0 auto;width:720px;}
.layout-wrapper .mulu_list li,.layout-wrapper .mulu_list>li>div{min-height: 40px;line-height: 40px;color: #666;display: block;cursor: pointer;margin: 0 auto;}
.layout-wrapper .mulu_list>li{width: 720px;display:inline-block;border-bottom:1px solid #F7F7F7;}
.layout-wrapper .mulu_list>li>.inactive{background: url("../images/detail/zhankai.png") no-repeat 700px center;border-bottom:1px solid #F7F7F7;}
.layout-wrapper .mulu_list>li>.inactives{background: url("../images/detail/shouqi.png") no-repeat 700px center;border-bottom:1px solid #F7F7F7;}
.layout-wrapper .mulu_list>li>.inactive.inactives:before,.layout-wrapper .mulu_list>li>.inactive:before{display:inline-block;float: right;margin-right: 40px;}
.layout-wrapper .mulu_list>li>.inactive.inactives:before{content:"收起";}
.layout-wrapper .mulu_list>li>.inactive:before{content:"展开";}
.layout-wrapper .mulu_list>li>ul>li{width:690px;padding:0 15px;background-color:#F7F7F7;}

.layout-wrapper .mulu_list h5 { color: #666; margin-right: 30px; }
.layout-wrapper .mulu_list img{ width: 16px; height: 10px; display: inline-block; margin-right: 4px; margin-top: 15px;}
.layout-wrapper .mulu_list span.shuxian { margin: 0 10px; color: #009cf5; font-size: 12px; font-weight: bold; }
.layout-wrapper .mulu_list>li>div a{margin-right:15px;}

.layout-wrapper .tab-content .box .lists{padding: 20px;}
.layout-wrapper .tab-content .box .lists .ulbox{border-left: 1px solid #f2f2f5;}
.layout-wrapper .tab-content .box .lists ul{margin-left: -5px;background: none;}
.layout-wrapper .tab-content .box .lists li{margin-bottom: 10px;background: url(../images/common/libg.png) 0px 10px no-repeat;padding-left: 25px;}
.layout-wrapper .tab-content .box .lists p{font-size: 12px;color:#333333;line-height: 30px;}
.layout-wrapper .tab-content .box .lists .date{font-size: 14px;}
.layout-wrapper .tab-content .box .lists .kc-content{margin-left: 60px;border-bottom: 1px solid #f2f2f5;padding-bottom: 10px;position: relative;}
.layout-wrapper .tab-content .box .lists .kc-content p{line-height:24px;}
.layout-wrapper .tab-content .box .lists .content{color:#666666;}
.layout-wrapper .tab-content .box .lists span{margin-right: 30px;}
.layout-wrapper .tab-content .box .lists .opbtn{position: absolute;bottom: 25px;right: 10px;overflow: hidden;}
.layout-wrapper .tab-content .box .lists .opbtn a{display: block;float: left;margin-left: 12px;width: 54px;height: 20px;background-size: contain;}
.opbtn.disabled a{cursor: not-allowed;}
.opbtn a.pl-btn{background-image: url(../images/common/pinglun.png)}
.opbtn.disabled a.pl-btn{background-image: url(../images/common/pinglun_disabled.png)}
.opbtn a.hf-btn{background-image: url(../images/user/zhibo.png)}
.opbtn a.wkk-btn{background-image: url(../images/common/weikaike.png)}
/* 目录回放 */
.layout-wrapper .mainbox .main-heading { padding-left: 20px; line-height: 40px; height: 40px; background-color: #eaeaea; font-size: 16px; color: #666666; }
.layout-wrapper .mainbox .main-list { margin: 0 20px; overflow: hidden; }
.layout-wrapper .mainbox .main-list li { line-height: 40px; height: 40px; border-bottom: 1px solid #eaeaea; font-size: 14px; color: #666666; position: relative; }
.layout-wrapper .mainbox .main-list li:last-child { border-bottom: none; }
.layout-wrapper .mainbox .main-list li .title { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: break-word; margin-right: 150px; color: #666666; }
.layout-wrapper .mainbox .main-list li .title:before { content: ""; display: inline-block; vertical-align: top; width: 14px; height: 8px; background: url(../images/common/video.png); margin: 16px; }
.layout-wrapper .mainbox .main-list li .rights { position: absolute; right: 0; top: 0; width: 102px; font-size: 12px; color: #999999; }
.layout-wrapper .mainbox .main-list li.active .rights, .layout-wrapper .mainbox .main-list li.active .title, .layout-wrapper .mainbox .main-list li:hover .rights, .layout-wrapper .mainbox .main-list li:hover .title { color: #0091f4; }
.layout-wrapper .mainbox .main-list li.disabled:hover .title { color: #666666; }
.layout-wrapper .mainbox .main-list li.disabled:hover .rights { color: #999999; }
.layout-wrapper .mainbox .main-list li.disabled a { cursor: default; }
.layout-wrapper .mainbox .main-list li.disabled .rights:before { content: ""; position: absolute; width: 62px; height: 40px; background: url(../images/common/play_end_icon.png); top: 0; left: -40px; }

/* 错误页面 */
.error-box { width: 500px; margin: 15vh auto; text-align: center; }
.error-box img { margin: 0 auto; vertical-align: top; }
.error-box p { text-align: center; line-height: 50px; font-size: 30px; color: #000000; margin: 20px auto; }
.error-box .btn-box { overflow: hidden; }
.error-box .btn-box li { width: 50%; text-align: center; float: left; }
.error-box .btn-box li .btn { display: block; border: 1px solid #0091f4; width: 160px; height: 60px; line-height: 60px; text-align: center; border-radius: 6px; font-size: 24px; color: #0091f4; margin: 20px auto; }
.error-box .btn-box li a:hover { opacity: 0.9; }
.error-box .btn-box li a.btn-blur { background-color: #0091f4; color: #ffffff; }

/*四六级听力页面*/
.tingli_list { width: 620px; margin: 0 auto; position: relative; }
.tingli_list ol li ,.tingli_list ul li { color: #ccc; list-style: decimal-leading-zero inside; position: relative; margin: 0px; padding: 9px 2px 10px; border-bottom: 1px solid #ccc; cursor: pointer; }
.tingli_list ol li.playing:before { content: '♬'; width: 14px; height: 14px; padding: 3px; line-height: 14px; margin: 0px; position: absolute; left: -24px; top: 9px; color: #000; font-size: 14px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); }
.tingli_list ol li a,.tingli_list ul li a { display: block; color: #888; margin-top: 5px;overflow: hidden; }
.tingli_list ol li.playing { color: #000; }
.tingli_list ol li.playing a { color: #000; }
.tingli_list .bofang_bg { width: 100%; background: #fff; position: fixed; left: 0; bottom: 0; height: 60px; border-top: 1px solid #ddd; z-index:999;}
.audiojs { width: 1050px; height: 60px; line-height: 60px; float: left; background: none; box-shadow: none; font-size: 14px; color: #bfbfbf; }
.audiojs .play-pause { width: 48px; height: 60px; padding: 0; margin: 0px; border-right: none; }
.audiojs p { width: 48px; height: 60px; }
.audiojs .play { background: url(../../static/audiojs/play1.png) no-repeat center; }
.audiojs .pause { background: url(../../static/audiojs/pause1.png) no-repeat center; }
.audiojs .error { background: url(../../static/audiojs/error.png) no-repeat center; }
.audiojs .loading { background: url(../../static/audiojs/loading1.gif) no-repeat center; }
.audiojs .play:hover { background: url(../../static/audiojs/play.png) no-repeat center; }
.audiojs .pause:hover { background: url(../../static/audiojs/pause.png) no-repeat center; }
.audiojs .jindutiao { width: 880px; height: 30px; line-height: 30px; background-color: #f2f2f5; position: relative; float: left; overflow: hidden; margin: 15px 0; padding: 0 10px; margin-left: 15px; }
.audiojs .scrubber { width: 776px; background: #999999; height: 4px; margin: 13px 0; border: none; position: relative; overflow: initial; cursor: pointer; }
.audiojs .progress { height: 4px; background: #0191F4; background-image: none; min-width: 15px; }
.audiojs .progress:after { content: ""; display: block; width: 15px; height: 15px; background-color: #ffffff; box-shadow: 0px 1px 9px 0px rgba(0, 145, 244, 0.29); border-radius: 100%; float: right; margin-top: -6px; }
.audiojs .loaded { height: 4px; background-image: none; background: #fff; }
.audiojs .time { height: 30px; line-height: 30px; border: none; text-shadow: none; margin-left: 15px; padding: 0; }
.audiojs .time em { color: #333; }
.audiojs .time strong { color: #CCCCCC; }
.tingli_list .prev, .tingli_list .next { display: block; width: 42px; height: 42px; float: left; margin-top: 9px; }
.tingli_list .prev { background: url(../../static/audiojs/prev1.png) no-repeat center; background-size: 30px; }
.tingli_list .next { background: url(../../static/audiojs/next1.png) no-repeat center; background-size: 30px; }
.tingli_list .down1 { background: url(../../static/audiojs/down1.png) no-repeat center; display: block; width: 48px; height: 60px; float: right; }
.tingli_list .prev:hover { background: url(../../static/audiojs/prev.png) no-repeat center; background-size: 30px; }
.tingli_list .next:hover { background: url(../../static/audiojs/next.png) no-repeat center; background-size: 30px; }
.tingli_list .down1:hover { background: url(../../static/audiojs/down.png) no-repeat center; }
/*四六级听力页面 右侧*/
.kc_wenti{width:312px;background-color: #fafafa;border: 1px solid #dfdfdf;border-radius: 4px;margin-bottom:15px;}
.kc_wenti1{width:308px;margin-top:15px}
.kc_wenti_tit{height: 44px;line-height: 44px;margin-left: 10px;background: url("../images/detail/side-recommends.png") no-repeat center left;padding-left: 25px;}
.kc_wenti_tit .more{margin-right:10px;background: url("../images/detail/xiala.png") no-repeat center right;padding-right: 14px;}
.kc_wenti ul{padding:16px;}
.kc_wenti ul li{margin-bottom:16px;background-color: #F8FBFD;height:  60px;padding: 15px 5px 15px 9px;cursor: inherit;}
.kc_wenti ul li img{width:90px;}
.kc_wenti .cont{width:168px;line-height: 16px;}
.kc_wenti .cont p{max-height:32px;margin-bottom:6px;}
.kc_wenti .btn a{min-width: 30px;height:  20px;line-height:  20px;border-radius: 4px;border: 1px solid #999999;text-align: center;padding: 0 5px;}
.kc_wenti .btn a.clan{border:1px solid #0091f4;}
/*四六级听力页面 弹出提取码*/
.hui-mask{position:fixed; z-index:20; background:rgba(0,0,0, 0.2); width:100%; left:0px; top:0px; height:100%;display:none;}
.extract{width: 140px;height: 90px;background-color: #fff;position: fixed;top: 50%;margin-top: -65px;left: 50%;margin-left: -90px;z-index: 21;padding: 20px;display:none;}
.extract p{height:30px;line-height: 30px;}
.extract input{border:none;width: 50px;height: 30px;line-height: 30px;outline: none;}
.extract .copy,.extract a{height:30px;border: none;line-height: 30px;background-color: #3098f6;color: #fff;display: inline-block;padding: 0 10px;}
.extract_btn{width: 140px;margin-top: 20px;}
/* 详情弹窗 */
.coursedet-cont .form-group{overflow: hidden;}
.course-det-img{cursor: pointer;margin-bottom:10px;}
.course-det-pop {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, .7);z-index: 998; display: none; padding:30px 0 20px 0;}
.coursedet-cont{display: none;width: 260px;border-radius: 6px;background-color: #fff;position: fixed;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);padding: 20px;z-index:999;}
.coursedet-input input {display: block;width: 100%;height: 44px;line-height: 44px;border: none;background: #eee;outline: none;margin:0 auto;margin-bottom: 20px;padding: 0 15px;box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */}
.coursedet-btn {width: 100%;height: 44px;display: flex; justify-content: center;align-items: center;background-color: #0af;font-size: 18px;color: #fff;margin:0 auto;cursor: pointer;}
.coursedet-cont p{margin-top: 8px;}
.coursedet-input>input:first-child{margin-top: 20px;}
.coursedet-input .form-group input{width:50%;float:left;}
.coursedet-cont .verification_img {float:right;width: 48%;height:44px;}
.coursedet-cont .verification_img img{height:44px!important;}
.coursedet-cont .form-group .getyzm {width: 48%;/* background-color: #180e3c; */color: #666;/* font-size: 20px; */line-height: 44px;text-align: center;background: #eee;height: 44px;float: right;}
#hui-toast{width:100%; position:fixed; z-index:999; left:0; bottom:50px; text-align:center;}
#hui-toast-msg{margin:0 auto; height:36px; line-height:36px; background:rgba(0,0,0,0.7); padding:2px 10px; color:#FFFFFF; font-size:14px; text-align:center; max-width:200px; border-radius:6px; display:inline-block;}