/*课程内容页播放器部分*/
.course-main-wraper{
  background-color: #191919;
  position: relative;
  overflow:hidden;
  padding-bottom: 40px;
}
.course-main-wraper .posnav{
  height: 42px;
  background: rgba(102,102,102,.2);
  line-height: 42px;
  padding: 0px;
  font-size: 14px;
  color:#9b9b9b;
}
.course-main-wraper .posnav a{
  color:#ababab;
}
.course-main-wraper .playnow{
  display: inline-block;
  background-color: #f25130;
  color:#fff;
  padding: 0 5px;
  border-radius: 4px;
  margin-left: 15px;
}
.course-main-header{
  height:80px;
  line-height: 80px;
  position: relative;
}
.course-main-title{
  color: #ddd;
  font-size: 24px;
  float: left;
}
.course-main{
  height: 660px;
  position: relative;
}

.course-main .schedule{
  border: 1px solid #3b3b3b;
  padding: 10px;
  margin: 10px 15px 0 15px;
  background: url(../images/img_bg.png) no-repeat;
  background-size: 100% 100%;
  color:#fff;
}
.course-main .schedule-lined{
  border-radius: 20px;
  position: absolute;
  left:0;
  top:0;
  height: 100%;
  background-color: #f25130;
}
.course-main .schedule-line{
  height: 6px;
  background: #868686;
  border-radius: 20px;
  position: relative;
}
.course-main .schedule-ksed{
  margin-top: 5px;
}
.course-main-mode-switch{
  position: absolute;
  right: 0;
  top:50%;
  margin-top:-18px;
  font-size: 14px;
  border-radius: 30px;
  overflow:hidden;
  padding: 3px;
  border: 1px solid rgba(255,255,255,0.1);
}
.course-main-mode-switch span{
  float: left;
  width: 100px;
  text-align: center;
  color:#999;
  cursor: pointer;
  line-height: 30px;
  height: 30px;
}
.course-main-mode-switch .active{
  background: #242424;
  color:#fff;
  border-radius: 20px;
}
.course-main-left{
  width: 72%;
  float: left;
}
.course-main-left .tuwen{
  width: 100%;
  height: 100%;
  position: absolute;
  left:0;
  top:0;
  background-color: #fff;
  z-index: 10;
  box-sizing: border-box;
  padding: 30px;
  font-size: 14px;
  overflow-y: auto;
}
.course-main-left .yinping audio{
  display: none;
}
.course-main-left .ks-audio-player {
  position: absolute ;
  width: 340px;
  margin: 0 auto;
  border-radius: 5px;
  background: #fff;
  box-sizing: border-box;
  height: 380px;
  left: 50%;
  margin-left: -170px;
  top: 50%;
  margin-top: -190px;
}

.course-main-left .tuwen img{
  max-width: 100%;
}
.course-main-left .yinping{
  width: 100%;
  height: 100%;
  position: absolute;
  left:0;
  top:0;
  z-index: 10;
  background: #000;
  padding: 0px;
}
.autonext-btn {
    margin-left: 30px;
    color: #999;
    display: inline-block;
}
.autonext-bg {
    width: 12px;
    height: 12px;
    border: 1px solid #bcc3cc;
    color: #fff;
    text-align: center;
    font-size: 12px;
    line-height: 12px;
    float: left;
    margin: 18px 5px 0 0;
    cursor: pointer;
}

.course-main-play{
  position: relative;
  height: 100%;
  overflow: hidden;
  background-color: #000;
  border-radius: 10px 10px 0 0;
}
.course-main-play iframe{
  border: 0px;
  background-color: #fff;
}
.course-main-play #a1{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top:0;
  z-index: 1;
}

.course-main--packup .course-main-left{
  width: 100%;
}
.course-main--packup .course-main-right{
  display: none;
}
.course-cover{
  width: 100%;
  height: 100%;
  position: relative;
}
.course-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.course-cover.blur img{
  filter: blur(30px);
}
.course-main-left .player-errmsg{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top:0;
  z-index: 10;
  background: rgba(0,0,0,0.6);
}

.course-main-left .player-errmsg__cont{
  width: 600px;
  position: absolute;
  left:0;
  right: 0;
  margin: 0 auto;
  top:50%;
  margin-top: -80px;
  text-align: center;
  color:#fff;
}
.course-main-left .player-errmsg__text{
  font-size: 24px;
}
.course-main-left .player-errmsg__btn{
  width: 140px;
  height: 36px;
  line-height: 36px;
  border: 1px solid #fff;
  margin: 0 auto;
  font-size: 16px;
  margin-top: 30px;
  cursor: pointer;
  border-radius: 4px;
}



.course-main-left .player-faceperiod__cont{
  width: 100%;
  position: absolute;
  left:0;
  right: 0;
  margin: 0 auto;
  top:0px;
  height: 100%;
  overflow-y: auto;
  padding:50px;
  box-sizing: border-box;
}
.course-main-left .player-faceperiod__cont::-webkit-scrollbar {
  width: 4px;    
  
}

.course-main-left .player-faceperiod__cont::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background   :rgba(255,255,255,0);
  
}
.course-main-left .player-faceperiod__cont::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  border-radius: 10px;
  background   :rgba(255,255,255,0);
}
.course-main-left .player-faceperiod__cont:hover::-webkit-scrollbar-thumb{
  background   :rgba(255,255,255,0.2);
}
.course-main-left .player-faceperiod__cont:hover::-webkit-scrollbar-track{
  background   :rgba(255,255,255,0.1);
}
.course-main-left .player-faceperiod__text{
  line-height: 24px;
  font-size: 14px;
  color:#fff;
  margin-top: 5px;
}
.course-main-left .player-faceperiod-title{
  height: 34px;
  line-height: 34px;
  overflow: hidden;
  color:#fff;
  margin-top: 20px;
  font-size: 14px;
  position: relative;
}
.course-main-left .player-faceperiod-title::after{
  content: '';
  width: 30px;
  height: 1px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
}
.course-main-left .player-faceperiod-intro{
  margin-top: 10px;
}
.course-main-left .player-faceperiod-intro,
.course-main-left .player-faceperiod-intro p{
  color:#fff;
  font-size: 14px;
}
.course-main-left .player-faceperiod-intro p{
  padding-top: 10px;
}
.course-main-left .player-faceperiod-intro img{
  max-width: 100%;
}

.course-main-right{
  width: 28%;
  float: right;
  box-sizing: border-box;
  padding-left: 10px;
  position: relative;
}

.course-main-right-buy{
  background-color: #26262b;
  border-radius: 10px;
  
}
.course-main-right-buy .price-box{
  float: left;
  height: 50px;
  overflow: hidden;
  line-height: 50px;
  box-sizing: border-box;
}
.course-main-right-buy .price-box--vip{
  line-height: 20px;
  padding-top: 5px;
}
.course-main-right-buy .price-box .qgbg{
  color: #f25130;
  border: 1px solid #f25130;
  font-size: 12px;
  padding:4px 7px;
  border-radius: 4px;
  margin-right: 5px;
  display: none;
}
.course-main-right-buy .price-box font{
  font-size: 14px;
  margin-right: 3px;
  font-weight: normal;
}
.course-main-right-buy .price-box .free_cor{
  font-size: 22px;
}
.course-main-right-buy .price-box  .vip{
  color:#fff;
}
.course-main-right-buy .price-box  .vip a{
  color:#f5c921;
  margin-left: 10px;
}
.course-main-right-buy .price-box strong{
  font-size: 22px;
  color:#fff;
  font-weight: normal;
}
.course-main-right-buy .price-box .money{
  color:rgba(255,255,255,0.3);
  text-decoration: line-through;
  font-size: 14px;
  margin-left: 10px;
}

/*砍价*/

.course-main-right-activity .bargain_activity{
  background-color: #282828;
  border-radius: 10px;
  margin-bottom: 10px;
}
.course-main-right-activity .bargain_time{
  padding: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.course-main-right-activity .bargain_time h4{
  font-size: 14px;
  color:rgba(255,255,255,0.5);
  font-weight: normal;
  padding-bottom: 8px;
  
}
.course-main-right-activity .bottom{
  font-size: 14px;
  color:rgba(255,255,255,0.5);
  height: 22px;
  overflow: hidden;
  line-height: 22px;
}
.course-main-right-activity .bottom font{
  font-size: 18px;
  color:#fff;
  padding: 0 5px;
}
.course-main-right-activity .bargin_title{
  padding:15px;
}
.course-main-right-activity .bargain_price h4{
  color:rgba(255,255,255,0.5);
  font-weight: normal;    
}
.course-main-right-activity .bargain_price .bottom {
  padding: 8px 0;
}
.course-main-right-activity .bargain_price .bottom span{
  color:#fff;
  font:30px/1 '微软雅黑',Microsoft YaHei,Arial,Verdana,\5b8b\4f53;
  
}
.course-main-right-activity .bargain_price .bottom em{
  display: none;
}
.course-main-right-activity .bottom  span:first-child font{
  padding-left: 0px;
}
.course-main-right-activity .bargin_title .more{
  margin-top: 10px;
}

.course-main-right-activity .bargin_title .more a{
  display: block;
  height: 40px;
  line-height: 40px;
  background-color: #ff701d;
  color:#fff;
  border-radius: 10px;
  font-size: 14px;
  text-align: center;
}
.course-main-right-activity .bargain_tips{
  color:rgba(255,255,255,0.5);
  padding:0 20px 20px;
  line-height: 22px;
}

/*砍价结束*/

/*拼团开始*/
.course-main-right-activity .course-qg,
.course-main-right-activity #collageinfo{
  background-color: #282828;
  border-radius: 10px;
  margin-bottom: 10px;
}
.course-main-right-activity .CollageTit{
  color:rgba(255,255,255,0.5);
}
.course-main-right-activity .CollageTips{
  color:rgba(255,255,255,0.5);
  padding: 20px;
  line-height: 22px;
}
.course-main-right-activity .CollageTopBox{
  text-align: center;
  padding: 0 20px;
}
.course-main-right-activity .CollageLeft{
  float: none;
  padding: 15px 0;
}


.course-main-right-activity .CollageLeft font{
  font-size: 24px;
  color:#fff;
}

.course-main-right-activity .CollageLeft  span{
  color:#fff;
  display: inline-block;
  height: 20px;
  line-height: 20px;
  padding: 0 6px;
  border: 1px solid #fff;
  border-radius: 4px;
  position: relative;
  top:-5px;
}
.course-main-right-activity .CollageTime font{
  font-size: 18px;
  color:#fff;
  padding: 0 5px;
}
.course-main-right-activity .CollageCenter{
  float: none;
}
.course-main-right-activity .CollageTime{
  padding: 20px;
  height: 60px;
  box-sizing: border-box;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  color:rgba(255,255,255,0.5);
}


.course-main-right-activity .OpenRegiment{
  width: 100%;
  height: 44px;
  line-height: 44px;
  background-color: #ff701d;
  color:#fff;
  font-size: 16px;
  border:0px;
  border-radius: 10px;
}

/*抢购、拼团*/
.course-main-right-activity .course-qg{
  color:rgba(255,255,255,0.5);
  padding: 20px;
}
.course-main-right-activity .course-qg-time{
  margin-top:10px;
}
.course-main-right-activity .course-qg-time font{
  font-size: 18px;
  color:#fff;
  padding: 0 5px;
}

/*播放目录*/
.course-main-play-right{
  position: relative;
  height: 100%;
  background-color: #282828;
  border-radius: 10px 10px 0 0;
}

.course-main-footer{
  background-color: #282828;
  position: relative;
  border-radius: 0 0 10px 10px;
}
.course-main-footer::after{
  content: '';
  display: block;
  clear: both;
}
.course-main-footer .course-main-right{
  padding: 0 12px;
  height: 50px;
}

.course-main-right .button .hb-ui-btn,
.course-main-right .button .hb-ui-btn1{
  height: 34px;
  padding:0 20px;
  border: 0px;
  font-size: 16px;
  color:#fff;
  border-radius: 30px;
  margin-top: 8px;
  float: right;
 
}
.course-main-right .button .hb-ui-btn{
  background: none;
  color:#fff;
  border: 1px solid #fff;
}
.course-main-right .button .hb-ui-btn1{
  background-color: rgba(255,255,255,0.3);
}

.course-main-catalog__count{
  line-height: 40px;
  color:rgba(255,255,255,0.4);
  padding:0 20px;
}
.course-main-catalog__title{
  font-size: 16px;
  color:#fff;
  line-height: 36px;
  padding: 10px 20px 0 20px;
}
.course-main-catalog__body{
  overflow-y: auto;
  height: 614px;
  position: relative;
}
/*滚动条样式*/
.course-main-catalog__body::-webkit-scrollbar {
    width: 7px;    
}

.course-main-catalog__body::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background   :rgba(255,255,255,0.4);
}
.course-main-catalog__body::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  border-radius: 10px;
  background   :rgba(255,255,255,0.1);
}
.course-main-catalog .ks-catalog-period{
  background: none;
}
.course-main-catalog .ks-catalog-period.active .ks-catalog-title{
  background-color: #222121;
}
.course-main-catalog .ks-catalog-title__time span{
  display: none;
}
.course-main-catalog  .ks-catalog-title{
  border-bottom: 0px;
  font-size: 12px;
  color:#ccc;
  background: none;
}
.course-main-catalog .ks-catalog-title__try{
  background: #39b378;
  border:0px;
  height: 20px;
  line-height: 20px;
}
.course-main-catalog .ks-catalog-title__arrow{
  width: 10px;
  height: 30px;
  float: left;
  margin-right: 10px;
}
.course-main-catalog .ks-catalog .ks-catalog-title{
  background: none;
  padding: 0px;
}

.course-main-catalog .ks-catalog-section .ks-catalog-period  .ks-catalog-title__th{
  padding-left: 40px;
}
.course-main-catalog .ks-catalog-chapter > .ks-catalog-title .ks-catalog-title__th{
  font-size: 12px;
  color:#ccc;
  background: none;
  padding-left:20px;
}
.course-main-catalog  .ks-catalog-title__arrow{
  right: 0px;
  background-size: auto 6px;
}
.course-main-catalog  .ks-catalog-title:hover{
  background-color: #292929;
}
.course-main-catalog  .ks-catalog-period:hover .ks-button,
.course-main-catalog  .ks-catalog-title .ks-button{
  display: none;
}

.course-main-catalog .ks-catalog-title__th{
  height: 30px;
  line-height: 30px;
}
.course-main-catalog .ks-catalog-title__lock{
  height: 100%;
}
.course-main-catalog .ks-catalog-chapter .ks-catalog-section > .ks-catalog-title .ks-catalog-title__th{
  padding-left: 42px;
}
.course-main-catalog .ks-catalog-chapter > .ks-catalog-period .ks-catalog-title__th{
  padding-left: 40px;
}

.course-main-catalog .ks-catalog-chapter .ks-catalog-section .ks-catalog-period .ks-catalog-title__th{
  padding-left: 63px;
}

.course-main-catalog .ks-catalog-title__type0{
  background: none;
  padding-right: 0px;
}
.course-main-catalog .ks-catalog-title__chapter-intro{
  padding-left: 40px;
  color:rgba(255,255,255,0.3);
}
.course-main-catalog .ks-catalog-section .ks-catalog-title__th--pointer::before{
  background: none;
}

.course-main-tabs{
  width: 60px;
  position: absolute;
  right: -80px;
  height: 100%;
  top:30%;
}

.course-main-tabs .icon{
  width: 21px;
  height: 21px;
  display: block;
  margin: 0 auto;
  background-image: url(../images/icons.png);
  background-repeat: no-repeat;
}
.course-main-tabs .icon-sq{
  background-position: -73px -103px;
}
.course-main--packup .course-main-tabs .icon-sq{
  background-position: -111px -103px;
}
.course-main-tabs .icon-menu{
  background-position: -4px -106px;
}
.course-main-tabs .icon-paper{
  background-position: -74px -134px;
}
.course-main-tabs .icon-download{
  background-position: -4px -223px;
}
.course-main-tabs .icon-pencil{
  background-position: -74px -164px;
}
.course-main-tabs .icon-question{
  background-position: -4px -186px;
}
.course-main-tabs li{
  width: 60px;
  height: 60px;
  background-color: #282828;
  border-radius: 10px;
  margin-top: 10px;
  text-align: center;
  box-sizing: border-box;
  color:#fff;
  position: relative;
  padding-top: 6px;
}
.course-main-tabs li:hover{
  background-color: #272727;
}
.course-main-tabs li.active{
  background-color: #FFD500;
  color:#242424;
}
.course-main-tabs li.active  .icon-menu{
  background-position: -31px -377px;
}
.course-main-tabs li.active .icon-paper{
  background-position: -31px -397px;
}
.course-main-tabs li.active .icon-download{
  background-position: -31px -498px;
}
.course-main-tabs li.active .icon-pencil{
  background-position: -31px -397px;
}
.course-main-tabs li.active .icon-question{
  background-position: -31px -460px;
}

.course-main-tabs li.active::before{
  content: '';
  position: absolute;
  left: -14px;
  top: 20px;
  border: 7px solid transparent;
  border-right: 7px solid #FFD500;
  
}

.course-main-tabs li .icon{
  width: 20px;
  height: 20px;
  margin: 3px auto auto;
  line-height: 20px;
}
.course-main-tabs li .icon i{
  font-size: 18px;
}

.course-main-tabs li .text{
  line-height: 26px;
}

.course-main-tab-pane{
  display: none;
}

.course-main-footer__auto-btn{

  color:#999;
  margin-top:15px;
}
.course-main-footer__auto-btn .autonext-bg{
  width: 14px;
  height: 14px;
  float: left;
  margin-right: 5px;
  border: 1px solid rgba(255,255,255,0.3);
  text-align: center;
  line-height: 14px;
}
.course-main-footer .name-bdshare { font-size: 14px; height: 50px; line-height: 50px;   padding: 0 12px;} 
.course-main-footer .name-bdshare .c_zan,
.course-main-footer .name-bdshare .c_collect { float:left; margin-left: 30px;padding-left: 30px; color:#999; cursor: pointer; position: relative;} 
.course-main-footer .name-bdshare .c_zan i,
.course-main-footer .name-bdshare .c_collect i { margin-right:3px; float:left; color:#999; } 
.course-main-footer .name-bdshare .c_zan .icon-thumb-up{
  width: 21px;
  height: 20px;
  background: url(../images/icons.png) no-repeat -153px -188px;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  left: 0;
}
.course-main-footer .name-bdshare .c_zan .zaned { background-position: -179px -188px; } 


.course-main-footer .name-bdshare .c_collect { margin-right:0; color: #ffd400; } 
.course-main-footer .name-bdshare .c_collect .icon-heart{

  width: 21px;
  height: 20px;
  background: url(../images/icons.png) no-repeat -173px -107px;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  left: 0;
}
.course-main-footer .name-bdshare .c_collect .icon-heart.collected{
  background-position: -152px -136px;
}
.course-main-footer .name-bdshare .bshare-custom{
  margin-top:15px;
  line-height: 20px;
}
.course-main-footer .name-bdshare .share-icon{
  display: inline-block;
  vertical-align: top;
  width: 19px;
  height: 19px;
  background: url(../images/icons.png) -155px -161px;
  margin-right:9px;
}
.course-main-footer .name-bdshare .course-code { position: relative; z-index: 50; padding-left: 25px; color:#999;  cursor: pointer; } 
.course-main-footer .name-bdshare .course-code::before{
  content: '';
  position: absolute;
  left:0;
  width: 14px;
  height: 20px;
  background: url(../images/icons.png) no-repeat -172px -217px;
  top: 50%;
  margin-top:-10px;
} 
.course-main-footer .name-bdshare a.bshare-more {
  color:#999 !important;
  margin-right: 0px;
}
.course-main-footer .name-bdshare a.bshare-more:hover,
.course-main-footer .name-bdshare .course-code:hover{
  color:#f5c921 !important;
  text-decoration: none;
}
.course-main-footer .name-bdshare a.bshare-more:hover .share-icon{
  background-position: -177px -161px;
}
.course-main-footer .name-bdshare .course-code:hover::before{
  background-position: -154px -217px;
}
.course-main-footer .name-bdshare .course-code__img { position: absolute; bottom: 50px; left: -50px; z-index: 9; display: block; border: 1px solid #eee; background: #fff; padding: 10px; display: none; } 
.course-main-footer .name-bdshare .course-code__img img { display: block; width:120px; height:120px; } 
.course-main-footer .name-bdshare .course-code:hover .course-code__img { display:block; } 



/*弹窗*/
.course-detail-popup{
  width: 480px;
  position: absolute;
  right: 0;
  top:0;
  background-color: #fff;
  height: 100%;
  z-index: 100;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  padding: 20px 25px;
  overflow-y: auto;
  display: none;
}
.course-detail-popup__title{
  height: 32px;
  line-height: 32px;
  font-size: 16px;
  font-weight: bold;
}
.course-detail-popup__title .close{
  width: 18px;
  height: 18px;
  float: right;
  cursor: pointer;
  background: url(../images/icons.png) no-repeat;
  background-position: -174px -80px;
}

.course-cred-popup{
  background: #2f75a1;
  width: 240px;
  position: fixed;
  right: 10%;
  top:10%;
  z-index: 999;
  border-radius: 5px;
  margin-right: 10px;
  padding: 15px;
  line-height: 24px;
  color: #fff;
  display: none;
  -webkit-animation-name: animJelly;
  animation-name: animJelly;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}
.course-cred-popup i{
  font-style: normal;
}
.course-cred-popup.ns-show{
  display: block;
}
.course-cred-popup a {
  color: #e1cf75;
  float: right;
}
.course-cred-popup a:hover {
  color: #e1cf75;
}

.cer_btn{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  z-index: 9;
  background-color: #282828;
}

.cer_btn .cer_btn_a{
  display: block;
  text-align: center;
  height: 45px;
  line-height: 45px;
  border-radius: 5px;
  font-size: 16px;
  background-color: #f5c921;
  color: #191919;
}

.cer_btn .no_click{
  background-color: #9e9e9e;
  color: rgb(255 255 255 / 50%);
}
.hasbtn{
  padding-bottom: 75px;
  box-sizing: border-box;
}


.player-tips{
  height: 100%;
  width: 100%;
}
.tips-box{
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.tips-box img{
  margin-bottom: 10px;
}
.tips-box>div{
  margin-top: 10px;
}
.tips-box .tips-btn{
  margin-top: 20px;
  border: 1px solid #f5891e;
  border-radius: 8px;
  width: 120px;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #f5891e;
  line-height: 40px;
  cursor: pointer;
}