/************rem定义***************/
html,body{height:100%;margin:0;font-size: .24rem;background: #fff;position: relative;}
@media screen and (min-width:320px){html{font-size:43px;}}
@media screen and (min-width:360px){html{font-size:48px;}}
@media screen and (min-width:375px){html{font-size:50px;}}
@media screen and (min-width:414px){html{font-size:55px;}}
@media screen and (min-width:424px){html{font-size:57px;}}
@media screen and (min-width:480px){html{font-size:64px;}}


/********详情页*********/

#app{padding-bottom:2rem;}
.seprate-line{
  height:.20rem;
  background:#f3f4f5;
}
.class_pic_bg_2{
  position: relative;
  padding: .25rem .20rem .36rem;
}
.vodie-classname{
  color:#333333;
  font-size:.34rem;
  font-weight: bold;
  line-height:.43rem;
}
.vodie-time{
  color:#666666;
  font-size:.24rem; 
  padding-top: .36rem;
}

.vodie-time .line{
  padding: 0 .20rem;
  position: relative;
  top:-.02rem;  
  color:#ccc;
}
.vodie-time .dyntext_2 {
    color: #ff6b49;
}

.class_sale_price {
  padding:.30rem 0 0 0;
}
.class_sale_price .price_tt {
    font-size:.24rem;
    color: #ff6b49;
    margin-right:.12rem;
}
.class_sale_price .price {
    font-size: .48rem;
    margin-right:.24rem;
    color: #ff6b49;
}
.class_sale_price .orgprice {
    font-size: .24rem;
    color: #999999;
    text-decoration: line-through;
    margin-right:.20rem;
}

.class_sale_price .labels{
  font-size:.24rem;
  color: #3eccb3;
  border-radius: .06rem;
  border:.01rem solid #3eccb3;
  display: inline-block;
  padding:.01rem .06rem;
}
.class_sale_price .dyntext_2{
  color: #ff6b49;
}
.teacher-list{
  overflow: hidden;
  padding: .20rem;
  position: relative;
}
.teacher-list .teacher_introduc{
  width: .26rem;
  height: .46rem;
  position: absolute;
  right:.20rem;
  top:.45rem;
}
.teacher-list .teacher-header{
  float: left;
  margin-left: .10rem;
  margin-right:.20rem;
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size:.20rem;
  color:#999;
}
.teacher-list img{
    width: .52rem;
    height: .52rem;
    display: block;
    margin-bottom:.16rem;
    border-radius: 50%;
}

.spell-number{
  padding:.30rem .20rem;
  font-size: .26rem;
  color: #666;
  border-bottom: 1px solid #f5f5f5;
}

.spell-number span{
  color: #3eccb3;
  float:right;
}

.groupmsg{
  padding: .30rem .20rem;
  position: relative;
  border-bottom: 1px solid #ddd;
  overflow: hidden;
}
.group-leader{
  padding-left: .20rem;
  font-size: .30rem;
  color: #333;
}
.groupmsg .group-left{
  width: 4rem;
  float: left;
}
.groupmsg .group-left img{
  width: .80rem;
  height: .80rem;
  border-radius: 50%;
  vertical-align: middle;
}
.group-right{
  margin-left: 3.9rem;
  width: 1.80rem;
  height: .80rem;
  line-height: .80rem;
  font-size: .24rem;
  text-align: right;
  padding: .10rem;
  padding-right: .20rem;
}
.spell-btn{
  position: absolute;
  right:.20rem;
  top:.45rem;
  width: 1.20rem;
  height: .50rem;
  background: #ff6b49;
  color: #fff;
  text-align: center;
  line-height: .50rem;
  border-radius: .05rem;
}
.classdetail{
  padding: .30rem .3rem;
  font-size:.34rem;
  color:#333333;
}
#content_slide1{
  padding-left:.3rem; 
  overflow: hidden;
}

#content_slide1 .chapter_name {
    font-size: .26rem;
    color: #333333;
    margin: .25rem 0 0 0;
    text-align: left;
    padding-right: .50rem;
}
#content_slide1 .chapter_time {
    font-size:.22rem;
    color: #999999;
    padding-bottom: .25rem;
    padding-top: .15rem;
    text-align: left;
}
.iftrial-flag{
  display: inline-block;
  font-size: .20rem;
  line-height: .3rem;
  color: #3eccb3;
  border:1px solid #3eccb3;
  padding: 1px 2px;
  border-radius: .10rem;
  margin-left: .15rem;
}
.chapter_name_if{
  font-size: .26rem;
  color: #333333;
  margin: .24rem 0 .16rem 0;
  text-align: left;
  overflow: hidden;
  display:block;
}
.chapter_right{
  width: .60rem;
  height: .60rem;
  float: right;
  margin-right:.20rem;
}

.chapter_left{
  margin-right: .90rem;
}

/***********底部按钮***********/

.bottom_fixed_buttons{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height: .98rem;
    background-color:#fff;
    box-shadow:0 0 5px rgba(0, 0, 0, 0.1);
    display:flex;
    display:-webkit-flex;
    justify-content:center;
}
.contact_btn_new{
    flex:3;
    -webkit-box-flex: 3;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 3;         /* OLD - Firefox 19- */
    -webkit-flex: 3;          /* Chrome */
    -ms-flex: 3;              /* IE 10 */
    text-align: center;
    height: .98rem;
    background: #fff;
    color: #999;
    border-top: 1px solid #e5e5e5;
}
.footer-btn{
    flex:6;
    -webkit-box-flex: 6;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 6;         /* OLD - Firefox 19- */
    -webkit-flex: 6;          /* Chrome */
    -ms-flex: 6;              /* IE 10 */
    display:flex;
    display:-webkit-flex;
    justify-content:center;
}
.buy-btn{
    flex:1;
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    display:flex;
    display:-webkit-flex;
    justify-content:center;
}
.buy{
    flex:1;
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    height:.98rem;
    line-height:.98rem;
    color:#fff;
    font-size: .3rem;
    background:#f56a4a;
    text-align: center;
}
.alone_buy{
  background:#f5a34a;
}
.spellclass{
    border:1px solid #f56a4a;
    background:#f56a4a;
    color:#fff;
    text-align: center;
}
.contact_btn_new img{
    width: .4rem;
    height: .4rem;
    display: block;
    margin:.1rem auto 0;
}
.content{
    padding:0 .3rem;
}
.content img{width: 100%;}
.noticedot1,.notice,.noticedot2,.details{padding: 0 12px;}
.details,.details div,.details p{
    color:#666;
}
.noticedot1,.noticedot2{
    height: 15px;
    margin:16px 0;
    text-align: center;
}
.noticedot1::before,.noticedot2::before{
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #3eccb3;
    position: relative;
    top:-4px;
    margin-right: 10px;
}
.noticedot1::after,.noticedot2::after{
    content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background: #3eccb3;
  position: relative;
  top:-4px;
  margin-left: 10px;
}
.noticedot2{
    margin-top: 38px;
}
.noticedot1{margin-top:4px;}
.noticedot1 span,.noticedot2 span{
    font-size:15px;
    color:#333;
    line-height: 15px;
    font-weight: bold;
    display: inline-block;
}
.notice{
    color:#666;
    font-size:14px;
}

.moreclass{
  width: 2.20rem;
  height: .60rem;
  line-height: .60rem;
  font-size: .26rem;
  color: #666;
  border:1px solid #666;
  text-align: center;
  margin: .40rem auto .30rem;
  border-radius: .30rem;
  display: block;
}
.recordvideo{
  width: 6.9rem;
  height:1rem;
  margin:.5rem auto .2rem;
  background: #eee;
  color: #333;
  font-size: .34rem;
  position: relative;
  padding-left: 1rem;
  line-height: 1rem;
  border-radius: .1rem;
}
.video_l{
  width: .5rem;
  height: .5rem;
  position: absolute;
  left: .3rem;
  top:.25rem;
}
.video_r{
  width: 1.82rem;
  height: .86rem;
  position: absolute;
  right: .3rem;
  top:.15rem;
}
.video{height: 8rem;overflow: scroll;padding-bottom: 1rem;}
.video h2{font-size: .34rem;color: #333;line-height: 18px;cursor: pointer;background: url('http://imgs.52jiaoshi.com/1545899154.png') no-repeat 98% 55%;background-size:14px 8px;padding:.3rem;border-bottom: 1px solid #eee; }
.video h3{font-size:.32rem;line-height:.32rem;color: #333;cursor: pointer;padding-bottom: .1rem;background: url('http://imgs.52jiaoshi.com/1545899154.png') no-repeat 98% 55%;background-size:14px 8px;padding-left: .3rem;}
.video h3 span{font-size: .32rem;color: #b3bfbd;margin-right: .1rem;display: inline-block;}
.class_3 li,.class_2 li{cursor: pointer;color: #757576;padding:.24rem .2rem .24rem 0;font-size: .3rem;position: relative;margin-left: 1.5rem;border-bottom: 1px dashed #eee;}
.class_3 li.active,.class_2 li.active{color: #3eccb3;font-size: 16px;}
.class_3 li span,.class_2 li span{display: inline-block;width: 32px;height: 16px;line-height: 16px;background: #3eccb3;color: #fff;text-align: center;font-size: .24rem;border-radius: 1px;margin-right: .1rem;}

.class_3 li b,.class_2 li b{
  font-weight: normal;
  color: #999;
  font-size: .24rem;
  display: inline-block;
  
}
.class_3 li p,.class_2 li p{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.class_3 li .play_img,.class_2 li .play_img{
  width: .4rem;
  height: .4rem;
  display: block;
  position: absolute;
  top: .3rem;
  left: -.6rem;
}
.level_2 .level_3:first-child{padding-top: .4rem;}
.level_3{padding-top: .4rem;}
::-webkit-scrollbar{height:2px;width:2px;background:#f5f5f5;border-radius: 2px;}
::-webkit-scrollbar-thumb{background:#c3c3c3}
::-webkit-scrollbar-thumb:hover{background:#929292}
::-webkit-scrollbar-corner{background:#f5f5f5}
.nav{height: 1rem;
    line-height: 1rem; 
    display:flex;
    display:-webkit-flex;
  }
.nav li{
    flex:1;
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    text-align: center;
    font-size: .32rem;
  }
.nav  li.active{
  color: #3eccb3;
}
.nav li.active .line-nav{
  width: .5rem;
  height: 2px;
  background: #3eccb3;
  display: block;
  margin: 0 auto;
}
.video-content{
  display: none;
  padding:.3rem;
  height: 8rem;
  overflow: scroll;
}


/*************录播包**************/
.classname{padding: .3rem;font-size: .32rem;color: #333;}
.videoList{padding:.3rem 0 .3rem .3rem;}
.videoList .videoListTitle{font-size: .3rem;color: #333;padding-bottom: .3rem;line-height: .3rem;}
.videoList ul{overflow: hidden;}
.videoList ul li{float: left;width: 3rem;margin-right: .16rem;padding-bottom: .14rem;}
.videoList ul li img{width: 100%;height: 1.68rem;display: block;border-radius: .1rem;}
.videoList ul li .videoname{
  font-size: .28rem;
  color: #333;
  padding-top: .2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

}
::-webkit-scrollbar{height:1px;width:2px;background:#fff;border-radius: 1px;}
::-webkit-scrollbar-thumb{background:#fff}
::-webkit-scrollbar-thumb:hover{background:#fff}
::-webkit-scrollbar-corner{background:#fff}


/************公共代码************/
/*simpledialog*/
.buttondialog-word {
    padding: 19px 32px 18px;
    text-align: center;
    font-size: 16px;
    border-bottom: 1px solid #dcdcdc;
    color: #ff0404;
    word-break: normal;
}
.buttondialog-op {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -moz-box;
    display: box;
}

.buttondialog-op button {
    outline: none;
    border: none;
    background: none;
    line-height: 45px;
    color: #000;
    font-size: 17px;
    text-align: center;
    display: block;
    border-left: 1px solid #dcdcdc;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    -moz-box-flex: 1;
    box-flex: 1;
    cursor: pointer;
}
.buttondialog-op button:first-child {
    border-left: none;
}
.simplemask {
    position: fixed;
    z-index: 10000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
}
.simpledialog {
    position: absolute;
    z-index: 10001;
    width: 305px;
    background-color: #fff;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -ms-boder-radius: 3px;
}
.buttondialog-wrap {
    border:1px solid #dcdcdc;
}


.fix_mask {
    position: fixed;
    z-index: 999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
}

.buttons {
    position: absolute;
    z-index: 10001;
    width: 2.8rem;
    height: .8rem;
    -webkit-border-radius: 3px;
    bottom:.4rem;
    left:50%;
    margin-left: -1.4rem;
}
.content_mask,.content_mask_1{
    position: fixed;
    width: 5.8rem;
    height: 6.2rem;
    left:50%;
    top:50%;
    margin-left: -2.9rem;
    margin-top: -3.1rem;
    z-index: 9999;
    display: none;
}
.father{position: absolute;left:0;width: 5.8rem;height: 6.6rem;background: #fff3e8;z-index: 9999;}
.father .ninhao{
    position: absolute;
    font-size:16px;
    color:#fff;
    top:20px;
    left:65px;
    z-index:9999;
}
.father ul li{font-size: .24rem;line-height: .4rem;color: #333;}
#mobile,#password{height: 40px;line-height: 40px;width: 85%;border:1px solid #ff830e;margin: 0 auto;display: block;border-radius: 5px;padding-left: 10px;}
.error{font-size: .24rem;color: #ff830e;padding: .2rem 0 .2rem .55rem;display: none;}
#password{margin-top: .5rem;}
.resets_line {
    margin: .2rem .4rem 0;
    height: .8rem;
    line-height: .8rem;
    border-bottom: none;
    border-radius: .1rem;
    padding: 0;
    position: relative;
    background: #fff;
     border:1px solid #ff830e;
}

.resets_line input{border:none;padding-left: 10px; }
.resets_line button{height: 100%;width: 1.7rem;background:#ff830e;color: #fff;border-radius: 5px;float: right; }


.collar_coupon{background: #fff;padding: .3rem .2rem;}
.cou-type{overflow: hidden;}
.coupon-type{background-color:#ff6b49; padding:0 .06rem;color: #fff;font-size: .22rem; display: inline-block;height: .30rem;line-height: .30rem;}
.coupon-t{float: left;color: #999;font-size: .26rem;}
.coupon-c{margin-left:.8rem;position: relative; }
.coupon-tip{font-size: .26rem;color: #333;padding-bottom: .1rem;}
.coupon-tip span{font-size: .26rem;color: #ff6b49;font-weight: bold;display: inline-block;margin-left: .1rem;}
.collar_coupon .coupon_amount{
  background-image:url(http://imgs.52jiaoshi.com/1542781877.png);
  background-position: center right;
  background-repeat: no-repeat ; 
  background-size:.1rem .32rem;
  padding-right: .1rem;
  position: relative;
  bottom: -.02rem;
}
.collar_coupon .get_coupons{background: #ff6b49;border-radius: .4rem;color: #fff;height: .44rem;line-height: .44rem;vertical-align: middle;text-align: center;width: .92rem;position: absolute;top:.15rem;right: .2rem;}
.collar_coupon .have_received{background: #ccc;color: #fff;}
.handlePrompt{width: 70%;line-height: 1.2rem;text-align: center;color: #fff;font-size: .3rem;border-radius: .1rem;background: rgba(0,0,0,0.7);position: fixed;z-index: 100000;top:39%;left: 0;  right: 0;margin:auto}