
.cosdetail-header{
  background: #fff; 
  overflow: hidden;
  border-top: 1px solid #E6E9ED;
}
.cosdetail-header .container{
  position: relative;
  height: 125px;
  box-sizing: border-box;
  padding-top: 25px;
}

.cosdetail-header__bg1,
.cosdetail-header__bg2,
.cosdetail-header__bg3{
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.cosdetail-header__title{
  font-size: 24px;
  line-height: 34px;
  /* cursor: pointer; */
}
.cosdetail-header__desc{
  line-height: 20px;
  margin-top: 15px;
  color:#888;
  font-size: 14px;
}


.cosdetail-header__bg1{
  width: 390px;
  height: 100%;
  left:-55px;
  top:0;
  background-image: url(@/images/user/img_bj01@2x.png);
}
.cosdetail-header__bg2{
  width: 40px;
  height: 40px;
  left: 545px;
  top: 40px;
  background-image: url(@/images/user/img_bj02@2x.png);
}
.cosdetail-header__bg3{
  width: 121px;
  height: 91px;
  right: -65px;
  bottom:0;
  background-image: url(@/images/user/img_bj03@2x.png);
}
.cosdetail-header__progess,.progress{
  display:inline-block;
}
.cosdetail-header__progess{
  margin-left: 49px;
}
.progress{
  width:300px;
  margin: 0 10px;
}
.cosdetail-header__progess-head{
  line-height: 36px;
  font-size: 14px;
  font-weight: bold;
}
.cosdetail-header__progess-head span{
  font-weight: normal;
}
.cosdetail-header__progess-head span span{
  color:#E43C3C;
}
.cosdetail-header__progess .el-progress-bar__outer{
  background:#E6E9ED;
}
.cosdetail-header__down{
  background: url(/ks_inc/member-center/images/coursedetail/lesson_icon_mobile.png) no-repeat 50% 0;
  padding-top: 47px;
  text-align: center;
  cursor: pointer;
  margin-top: 5px;
  color: #8D9299;
}


.cosdetail{
  margin-top: 40px;
  margin-bottom:70px;
}
.cosdetail-left{
  min-height: 600px;
}
.cosdetail-left .ks-empty{
  border:0px;
}
.cosdetail-left,
.cosdetail-right{
  background: #fff;
  border-radius: 6px;
  position: relative;
}
.cosdetail-right{
  padding: 5px;
}
.cosdetail-right ul{
  margin: 5px;
}
.cosdetail-right::after{
  content: '';
  width: 1px;
  height: calc(100% - 20px);
  background: #BCC3CC;
  position: absolute;
  left: 50%;
  top: 10px;
}
.cosdetail-right li{
  width: 50%;
  float: left;
  text-align: center;
  padding:40px 0 28px 0;
  box-sizing: border-box;
  border-bottom: 1px solid #BCC3CC;
  cursor: pointer;
}
.cosdetail-right li:last-child,
.cosdetail-right li:nth-child(3){
  border-bottom: 0px;
}
.cosdetail-right .active{
  background: rgba(60, 129, 249, 0.08);
}

.cosdetail-right__icon{
  width: 58px;
  height: 58px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0 auto;
}

.cosdetail-right__icon--data{
  background-image: url(/ks_inc/member-center/images/coursedetail/lesson_icon_doc.png);
}
.cosdetail-right__icon--course{
  background-image: url(/ks_inc/member-center/images/coursedetail/class_icon_lesson.png);
}
.cosdetail-right__icon--work{
  background-image: url(/ks_inc/member-center/images/coursedetail/lesson_icon_homework.png);
}

.cosdetail-right__icon--ask{
  background-image: url(/ks_inc/member-center/images/coursedetail/lesson_icon_enquiry.png);
}

.cosdetail-right__icon--exam{
  background-image: url(/ks_inc/member-center/images/coursedetail/lesson_icon_exam.png);
}
.cosdetail-right__icon--announcement{
  background-image: url(/ks_inc/member-center/images/coursedetail/class_icon_notice.png);
}

.cosdetail-right__icon--shop{
  background-image: url(/ks_inc/member-center/images/coursedetail/column_icon_item.png);
}
.cosdetail-right__name{
  height: 24px;
  line-height: 24px;
  overflow: hidden;
  font-size: 14px;
  color: #606367;
}

.cosdetail-classpop{
  position: relative;
}

.cosdetail-classpop .el-dialog{
  background: url(@/images/user/img_bg.png) no-repeat;
  background-size: 100% auto;
  box-shadow:0 0 0 rgba(0,0,0,0);
  overflow: initial;
}
.cosdetail-classpop .el-dialog__headerbtn{
  right: -46px;
  top: 5px;
  width: 36px;
  height: 36px;
  text-align: center;
  line-height: 36px;
}
.cosdetail-classpop .el-dialog__headerbtn .el-dialog__close{
  font-size: 28px;
  color:#fff;
}
.cosdetail-classpop .el-dialog__title{
  font-size: 22px;
}
.cosdetail-classpop .el-dialog__header{
  font-weight: bold;
  padding-top:25px;
  padding-bottom: 25px;
}

.cosdetail-classpop .el-dialog__body{
  background: #fff;
  border-radius: 12px;
  text-align: center;
  padding-top:20px;
}

.cosdetail-classpop__code{
  text-align: center;
}
.cosdetail-classpop__code img{
  width: 126px;
  height: 126px;
  display: block;
  margin:0 auto;
}
.cosdetail-classpop__code p{
  font-size: 14px;
  line-height: 20px;
  margin-top: 5px;
}
.cosdetail-classpop__text{
  font-size: 18px;
  line-height: 26px;
  margin-top: 10px;
}

.cosdetail-classpop__stit{
  position: relative;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  margin-top: 26px;
  display: inline-block;
}
.cosdetail-classpop__stit span{
  position: relative;
  z-index: 1;
  color:#272727;
}
.cosdetail-classpop__stit::after{
  content: '';
  width: 100%;
  height: 10px;
  background: #FFD227;
  position: absolute;
  bottom: 0;
  left: 0;
}

.cosdetail-classpop__orderid{
  height: 24px;
  line-height: 24px;
  display: inline-block;
  padding:0 10px;
  border:1px solid #FFE5E5;
  border-radius: 24px;
  color:#E43C3C;
  margin-top: 15px;
}
.last-time{
  margin-left:50px;
}
.last-time__font{
  margin-left:15px;
  color:#3C81F9;
}
.course-label{
  display:inline-block;
  height:22px;
  line-height:22px;
  padding:0 7px;
  border-radius:12px  0px   12px  0px;
  color:#3C81F9;
  border:1px solid #3C81F9;
  font-size:14px;
  margin-right:8px;
}
.cosdetail-header__span{
  margin-right:49px;
}
.green-font{
  color:#2CC252;
}
.red-font{
  color:#FF5C5C;
}
