@charset "utf-8";
/* CSS Document */
body { margin: 0; padding: 0; font-size: 12px; font-family: "微软雅黑"; -webkit-text-size-adjust: none; color: #000; position: relative; padding-bottom:1.4rem !important; }
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, p { margin: 0; padding: 0; }
img { border: 0; vertical-align: bottom; }
ul, li { list-style-type: none; }
a { color: #000; text-decoration: none; }
input[type="text"]:focus, input[type="password"]:focus, textarea:focus { outline: none; }
video::-internal-media-controls-download-button {
    display:none;
}
video::-webkit-media-controls-enclosure {
    overflow:hidden;
}
video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
}
.tc { text-align: center; }
.tl { text-align: left; }
.tr { text-align: right; }
.fl { float: left; }
.fr { float: right; }
.cl { clear: both; }
.fb { font-weight: bold; }
.clear{clear: both;}
header{padding: .3rem .2rem; border-bottom:1px solid #E4E4E4; }
.logo{ float: left; width: 45%; }
.logo img{ width: 100%; }
.searchArea{ float: right; padding-top:0rem; width: 55%;    }
.searchBtn{ float: right; }
.searchBtn img{ height: .35rem; }
.searchForm{ height: .45rem; line-height: .45rem; text-align: right; display: none; }
.searchForm .icon{ height: .35rem;  }

.searchForm input[type='text']{ border:none; border-bottom:1px solid #C3C3C3; height: .45rem; font-size: .24rem;  float: right; color: #A5A5A8; }
.searchForm .submit{ background:url(../images/magnifier.png) no-repeat; height: .45rem; width: 7%; border:none; float: right; margin-top:.05rem; background-size: 100%; margin-right: 2%;}
.banner{width: 88%; padding:3% 6% 1%; border-bottom:.1rem #F9F8F4 solid;  }
.banner img{  overflow: hidden; }
.bannersw {
  position: relative;
  width: 100%;
/*  height: 3.3rem;*/
padding-bottom:.5rem;

}

.bannersw .swiper-slide {
  position: relative;
  width: 100%;
  height: 3.3rem;
    overflow: hidden;
  border-radius: .3rem;
}

.bannersw .swiper-slide img {
  width: 100%;
  height: 3.3rem;
/*  min-height: 100%;*/
}

.pbannersw {
  position: relative;
  width: 100%;
  height: 4.35rem;
  overflow: hidden;
}

.pbannersw .swiper-slide {
  position: relative;
  width: 100%;
  height: 100%;
}

.pbannersw .swiper-slide img {
  width: 100%;
  height: auto;
/*  min-height: 100%;*/
}
.swiper-pagination-bullet-active{ background:#F33B29 !important; width: 26px !important; border-radius: 4px !important; }

.popular_courses{ padding:6% 3%; background: #fff; border-bottom:.1rem #F9F8F4 solid; }
.popular_courses .tit{ font-size: .3rem; color: #000;text-align: left; height:.5rem; line-height: .5rem; overflow: hidden; margin-bottom:.10rem; }
.popular_courses .tit .v-line,.v-line-Gradual{ height: .3rem; width: .095rem; display: inline-block; background:#90C732; border-radius:15px; overflow: hidden; margin-right: .1rem; float: left; margin-top:.1rem;}
.v-line-Gradual{ background:url(../images/titIcon.png) no-repeat;  background-size:100%;}
.popular_courses .font {  display: inline-block;float: left;}
.popular_courses .item{ width: 49%; float: right; margin:2% 2% 2% 0%; }
.popular_courses .item:nth-child(2n+1){margin-right: 0;}
.popular_courses .item .img img{ width: 100%; border-radius: 13px; overflow: hidden; }
.popular_courses .item  .t1 ,.popular_courses .item  .t2{ height: .35rem; line-height: .35rem; overflow: hidden; overflow: hidden; width: 98%; padding:0 1%;margin-top:.1rem;    white-space: nowrap;    text-overflow: ellipsis; }
.popular_courses .item  .t1 a{ color: #545454; font-size: .26rem;  }
.popular_courses .item  .t2 a.speaker{ color: #a9a6a6; font-size: .24rem;  float: left;}
.popular_courses .item  .t2 a.more{ float: right;padding-left: .5rem;padding-right: .1rem;  }
.loading{ text-align: center; padding:.5rem .5rem 0; }
.loading span{ font-size: .28rem; color: #F33B29 ; padding-right: .1rem; }
.loading img{ height:.32rem; }
.loadingBtn{  }
.course_display{padding:6% 3%; background: #fff;}
.course_display .tit{ font-size: .3rem; color: #000;text-align: left; height:.5rem; line-height: .5rem; overflow: hidden; margin-bottom:.10rem; }
.course_display .tit .v-line{ height: .3rem; width: .095rem; display: inline-block; background:#90C732; border-radius:15px; overflow: hidden; margin-right: .1rem; float: left; margin-top:.1rem;}
.course_display .tit a{ float: right; color: #adadad; font-size: .25rem; }
.coursesw { padding-bottom:.8rem; }
.coursesw .swiper-slide img{ width: 100%;  height: 1.5rem; }
.coursesw .swiper-pagination-bullet-active{ background:#F33B29 !important;  }
.course_display .list{  padding-top:.3rem; }
.course_display .list .item{ padding-bottom:.25rem; border-bottom:2px solid #F9F8F4; margin-bottom:.25rem; }
.course_display .list .item .img{ width:38%; float: left;overflow: hidden; height: 2rem; }
.course_display .list .item .img img{ width:100%; border-radius:13px; overflow: hidden; height: 1.8rem; } 
.course_display .list .item .font{ width: 58%; float: right;  }
.course_display .list .item .font .t1{ font-size: .3rem; width: 100%; height:.32rem; line-height: .32rem; overflow: hidden; margin-top:.1rem;white-space: nowrap;  text-overflow: ellipsis;}
.course_display .list .item .font .t1 a{ color: #2a2a2a; }
.course_display .list .item .font .t2{ font-size: .24rem; width: 100%; height:.8rem; line-height: .4rem; overflow: hidden; color: #6c6c6c; margin:.1rem 0; display: -webkit-box;-webkit-line-clamp:2; -webkit-box-orient:block-axis;}
.course_display .list .item .font .t3{ height:.34rem;overflow: hidden; width: 100%; line-height:.34rem; position: relative; }
.course_display .list .item .font .t3 .t3Split{ position: absolute;left: 61%; }
.course_display .list .item .font .t3 .t3L{ float: left;color: #ff5500;  overflow:hidden; position: relative; }
.course_display .list .item .font .t3 .t3L span{ font-size:.24rem; color: #ff5500; padding:0 2%;  text-overflow: ellipsis; white-space:nowrap; overflow:hidden; float: left;}
.course_display .list .item .font .t3 .t3L span:first-child{ width: 59%; text-align: right; }
.course_display .list .item .font .t3 .t3L span:last-child{ width: 25%; }
.course_display .list .item .font .t3 .price{ float: right; font-size: .3rem; color: #e21618;   } 
.course_display .list .item .font .t3 .price .smallFont{ font-size: .2rem; }
footer{ width: 100%; position: fixed;bottom: 0; left: 0; background:#fff; box-shadow: 0 .1rem .1rem .15rem rgba(0,0,0,.1); z-index: 2; }
footer .item{ width: 20%;float: left; text-align: center; padding:.25rem 0;  }
footer .item .img {width: 100%;}
footer .item .img img{ width:30%; }
footer .item .tit{ font-size: .22rem; color: #6c6c6c; margin-top:.1rem; }
footer .item .hover{ color: #000; }


/* 刷新动画 */
@-webkit-keyframes rotation {
  from {
      -webkit-transform: rotate(0deg);
  }
  to {
      -webkit-transform: rotate(360deg);
  }
  }
@keyframes rotation {
  from {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg)
      }
  to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg)
  }
}

.pageBanner{ position: relative; }
.pageBanner .back{ position: absolute;left: 3%; top: 12%;z-index: 2; width: 8%; display: block;}
.pageBanner .share{ position: absolute;right: 3%; top: 12%;z-index: 2;width: 8%; display: block;}
.pageBanner .back img{ width: 100%; }
.pageBanner .share img{ width: 100%; }
.course_cate{ padding:5% 3% 5%;  text-align: center; }
.course_cate a{ color: #939393; margin:0 6% 0  ; font-size: .28rem; padding-bottom:2.5%; }
.course_cate a.hover{ color: #000; font-weight: bold; background: url(../images/cateHoverIcon.png) no-repeat center bottom; }
.course_frame{ padding-bottom: .7rem; }
.course_frame .course_item{ display: none; }
.course_frame .block{ display: block; position: relative; }
.courseTit{ padding:.3rem 3%; font-size: .32rem; color: #000; line-height: .4rem; border-bottom:.2rem solid #F8F8F8;  }
.courseTit img{ vertical-align: middle; height: .37rem; padding-right: .10rem; }
.courseTit .price{ font-size: .45rem; color: #F13320; padding:.26rem 0; }
.courseTit .price .smallFont{ font-size: .3rem; }
.speaker{  padding:.3rem 3%; border-bottom:.2rem solid #F8F8F8} 
.speaker .tit{  font-size: .32rem; color: #000; line-height: .4rem; }
.speaker .v-line-Gradual img{ vertical-align: top; height: .37rem; padding-right: .10rem; }
.speaker .con{ padding:.45rem 0 .1rem;   }
.speaker .con .speakerPortrait{ width: 16%;  float: left;  }
.speaker .con .speakerPortrait img{  border-radius: 100%;overflow: hidden; width: 100%; }
.speaker .con .speakerR{ 
  float: left; width: 73%; margin-left: 2%
 }
 .speaker .con .speakerR .name{font-size: .32rem; color: #000; margin-top:.1rem;}
 .speaker .con .speakerR .advantage{ font-size: .14rem; color: #fda532; padding:.03rem .06rem; border:1px solid #fda532; background:none; border-radius: .2rem; overflow: hidden; }
  .speaker .con .speakerR .desc{ font-size: .24rem; height: .3rem; line-height: .3rem; overflow: hidden;margin:.15rem 0 0; color:#333333;}
 .speaker .con .detail{ float: right; width: 9%; text-align: center; height: 1.2rem; line-height: 1.2rem; display: block; font-size: .3rem;}
  .speaker .con .detail img{ vertical-align: middle; height: .3rem; }

.courseProfile{  padding:.3rem 3% 0; border-bottom:.2rem solid #F8F8F8} 
.courseProfile .tit{  font-size: .32rem; color: #000; line-height: .4rem; }
.courseProfile .v-line-Gradual img{ vertical-align: top; height: .37rem; padding-right: .10rem; }
.courseProfile .con{ font-size: .26rem; color: #7f7f7f; margin:.2rem 0; line-height: .36rem; }
.courseProfile .con img{ max-width: 100%; }
.h72{ height: .72rem; overflow: hidden; }
.findAll,.putAway{ text-align: center;  color: #f33b29; font-size: .3rem; width: 40%; margin:0px auto; cursor: pointer;padding-bottom: .30rem;}
.findAll span,.putAway span{ padding-left: 2%; }
.findAll img,.putAway img{ height: .3rem; vertical-align: middle; }
.putAway{ display: none; }
.catalog{  padding:.3rem 3%  .3rem; border-bottom:.2rem solid #F8F8F8 }
.catalog .tit{  font-size: .32rem; color: #000; line-height: .4rem; padding-bottom:.2rem; }
.catalog .tit a{ float: right; font-size: .28rem; color: #a9aaad; }
.catalog .v-line-Gradual img{ vertical-align: top; height: .37rem; padding-right: .10rem; }
.catalog .con{  }
.catalog .con .row{ padding:.2rem 0; }
.catalog .con .row .l{ width: 80% ;float: left; }
.catalog .con .row .l .t1{ font-size: .26rem; color: #b9b9b9; line-height: .30rem; height: .30rem; overflow: hidden; margin-bottom:.2rem; }
.catalog .con .row .l .t1 .free{ font-size: .18rem; color: #e72626; padding: .01rem .1rem; border-radius: .1rem; overflow:hidden; border: .03rem solid #e72626; float: left; height: .22rem; line-height: .22rem; margin-right: .1rem;  }
.catalog .con .row .l .t2{ font-size: .3rem; color: #000;line-height: .34rem; height: .34rem; overflow: hidden;white-space: nowrap;    text-overflow: ellipsis;  }
.catalog .con .row .l .t2 span{ padding-right: .1rem; margin-right: .1rem; border-right: 1px solid #000; }
.catalog .con .row .r{ width: 20% ;float: right; text-align: right; height: .7rem; line-height: .7rem; }
.catalog .con .row .r img{height: .5rem; vertical-align: middle;}
.course_frame .bottomBuy{    padding-top: .2rem;    padding-bottom: 1.6rem;position: fixed; bottom: 0;left: 0;     width: 100%;    background: #fff;}
.course_frame .bottomBuy img{ width: 100%; }
.course_frame .bottomBuy .price span{    font-size:.36rem;}
.course_frame .bottomBuy .price{ float:right;    color: #FF2323;    font-size:.3rem;  margin-top:.13rem;  }
.course_frame .bottomBuy .BuyNowBtn{ float:right; margin-left: 2%; margin-right: 3%; width: 28%;}

.catalog .con .row .r .free {
    font-size: .24rem;
    color: #e72626;
    padding: .01rem .1rem;
    border-radius: .1rem;
    overflow: hidden;
    border: .03rem solid #e72626;
    float: right;
    height: .3rem;
    line-height: .3rem;
    margin-right: .1rem;
}



/*课程购买*/
.mask{ background:rgba(51,51,51,.49); position: fixed; top: 0; left: 0; height: 100%; width:100%; z-index: 2;  }
.mask .adArea{width: 60%; margin:25% auto 0; position: relative;}
.mask .adArea .img{ width: 100%; }
.mask .adArea .img img{ width: 100%; }
.mask .adArea .close{ width: 15%; display: block;position: absolute;bottom: -1rem; right:40%; }
.mask .adArea .close img{ width: 100%; }


/*课时购买*/
.mask2{ background:rgba(51,51,51,.49); position: fixed; top: 0; left: 0; height: 100%; width:100%; z-index: 2;  }
.mask2 .adArea2{width: 60%; margin:25% auto 0; position: relative;}
.mask2 .adArea2 .img{ width: 100%; }
.mask2 .adArea2 .img img{ width: 100%; }
.mask2 .adArea2 .close2{ width: 15%; display: block;position: absolute;bottom: -1rem; right:40%; }
.mask2 .adArea2 .close2 img{ width: 100%; }


.mask_qr{ background:rgba(51,51,51,.49); position: fixed; top: 0; left: 0; height: 100%; width:100%; z-index: 2; display: none; }
.mask_qr .adArea{width: 60%; margin:25% auto 0; position: relative;}
.mask_qr .adArea .img{ width: 100%; }
.mask_qr .adArea .img img{ width: 100%; }
.mask_qr .adArea .close_qr{ width: 15%; display: block;position: absolute;bottom: -1rem; right:40%; }
.mask_qr .adArea .close_qr img{ width: 100%; }


.container{
  max-width: 64rem;
  margin: 0 auto;
  overflow-x: hidden;
}
.nav-container{
  width: 100%;
  background: white;
  padding-top: .2rem;
}
.nav-ul{

}
.nav-ul li{
  height: .5rem;
  width: auto !important;
  padding-bottom:.1rem ;
}
.nav-ul .slide-a{
  color: #555;
  font-size: .26rem;
  padding: 0px .2rem .2rem .25rem;
}
.nav-ul .active-li a{
  color: #000;
  /*border-bottom: 2px solid #000;*/
}
.nav-ul .active-li {
  background: url(../images/cateBotLine.jpg) no-repeat bottom center; 
  /*border-bottom: 2px solid #000;*/
}

.nav-container{ background:#F2F2F2; }
.courseCategory{ background:#F2F2F2; }
.courseCategory .course_display{ background:#F2F2F2; padding: 0% 0% 1%; }
.courseCategory .course_display .list .item{  background:#fff; padding:3% 3%; }
.courseCategory .course_display .list .item .font .t3 { height: .48rem; line-height: .48rem; }
.courseCategory .course_display .list .item .font .t3 .price{ float: right; font-size: .3rem; color: #fff; background:#CF2224; border-radius: .4rem; overflow:hidden; padding:.0rem .15rem;   } 
.courseCategory .course_display .list .item .font .t3 .t3L span{ color: #ef3a3c; }
.courseCategoryHead{ padding:3%; } 
.courseCategoryHead .tit{ float: left; font-size: .44rem; color: #454545; padding-top:3%; font-weight: bold; width: 30%; } 
.courseCategoryHead .searchArea{ width: 68%; padding-top:4%; }
.courseCategoryHead .searchForm input[type='text']{ background:none; }
.courseCategory .index{display: none;}
.courseCategory .activity{display: block;}
.course_display .delicate{   margin:.25rem; border-radius: 7px; overflow: hidden;}
.course_display .delicate .item{ padding-bottom:.25rem; border-bottom:.2rem solid #fff; margin-bottom:.25rem; padding:.3rem; background:#fff;  }
.course_display .delicate .item .imgArea{ width: 100%; height: 3.9rem; overflow: hidden; position: relative; }
.course_display .delicate .item .img img{ width: 100%; min-height: 3.9rem; }
.course_display .delicate .item  .Duration{     right: 4%;    bottom: 6%; width: 15%; height: .3rem; line-height: .3rem; border-radius: .2rem; overflow: hidden; text-align: center; background: #2B2B2B; color: #fff; position: absolute;  }
.course_display .delicate .item  .playBtn{ width: 15%; margin:0px auto; position: absolute; top: 35%; left: 43%; z-index: 2;}
.course_display .delicate .item  .playBtn img{ width: 100%; height: auto; margin:0px auto; }

.course_display .delicate .t1{ padding:0rem 0% .3rem; font-size: .32rem; color: #000; line-height: .4rem;  }
.course_display .delicate .t1 img{ vertical-align: middle; height: .37rem; padding-right: .10rem; }
.course_display .delicate .speakerPortrait{ width: 15%;  float: left; padding-top:.3rem;  }
.course_display .delicate .speakerPortrait img{  border-radius: 100%;overflow: hidden; width: 100%; }
.course_display .delicate .item .name{ float: left; font-size: .34rem; margin-top: .65rem; padding-left: .2rem;}
.course_display .delicate .item .price{ font-size: .34rem;  color: #FF0000; float: right; margin-top: .65rem;}

.videoArea{ position: relative; }
.videoArea .html5-video{ width: 100%; }
.videoArea .html5-video *{width: 100%;}

.videoArea .back{ position: absolute;left: 3%; top: 12%;z-index: 2; width: 8%; display: block;}
.videoArea .share{ position: absolute;right: 3%; top: 12%;z-index: 2;width: 8%; display: block;}
.videoArea .back img{ width: 100%; }
.videoArea .share img{ width: 100%; }

.audioArea{ position: relative; background:#888888; text-align: center; width: 100%; }
.audioArea .html5-audio{ width: 30%; padding:.6rem 0; text-align: center;margin:0px auto;}
.audioArea .html5-audio img{ width: 100%; }
.audioArea .back{ position: absolute;left: 3%; top: 12%;z-index: 2; width: 8%; display: block;}
.audioArea .share{ position: absolute;right: 3%; top: 12%;z-index: 2;width: 8%; display: block;}
.audioArea .back img{ width: 100%; }
.audioArea .share img{ width: 100%; }

.borderNone{ border: none; }

.videoInfo{ padding:.2rem 3% .3rem; font-size: .32rem; color: #000; line-height: .4rem; border-bottom:.2rem solid #F8F8F8;  }
.videoInfo .row{ margin:.25rem 0; }
.videoInfo .row .l{ float: left; font-size: .26rem; color: #9a9a9a; width: 50%; margin-bottom:.2rem; }
.videoInfo .row .l img{ height: .28rem; vertical-align: middle; padding-right: .1rem; }
.videoInfo .row .r{ float: right; width: 50%; text-align: right; }
.videoInfo .row .r .qr{ margin-right: 4%; }
.videoInfo .row .r .qr,.videoInfo .r .link{ float: right; width: 25%; }
.videoInfo .r .link{ position: relative; }
.videoInfo .row .r img{ width: 45%; }
.videoInfo .breadcrum{ background:#FFF2F2; border-radius: 5px; overflow: hidden; text-align: left; font-size: .23rem; color: #fb4545; height: .6rem; line-height: .6rem; padding:0 2%; margin-bottom:.15rem; }
.videoInfo .breadcrum span{ float: left; }
.videoInfo .breadcrum a{ float: right; color: #fb4545; width: 8%; text-align: right; }
.videoInfo .breadcrum a img{ vertical-align: middle; }

.expert{ position: relative; }
.expert .photo{ width: 100%; }
.expert .photo img{ width: 100%; }
.expert .back{ position: absolute;left: 3%; top: 7%;z-index: 2; width: 12%; display: block;}
.expert .back img{ width: 30%; }

.expert .expert_info .tit{  font-size: .32rem; color: #000; line-height: .4rem; }
.expert .v-line-Gradual img{ vertical-align: top; height: .37rem; padding-right: .10rem; }
.expert_name{ background:#fff; padding:.3rem 3%; line-height: .45rem; height: .45rem; overflow: hidden; width: 94%; text-align: left;border-bottom:1px solid #EBEBEB; 
  border-radius:.4rem .4rem 0 0; margin-top:-.35rem; z-index: 2; position: relative; }
.expert_name .name{ font-size: .35rem; color:#c73232; padding-right: .15rem;  }
.expert_name .tag{ font-size: .24rem; color: #fda532; margin-right: .15rem; padding:.02rem .2rem; border-radius: .3rem; overflow: hidden; border:1px solid #fda532;  }
.expert_info{ background:#fff;  padding:.3rem 3%;  }
.expert_info .tit{  font-size: .4rem; color: #000; line-height: .4rem; height: .4rem; margin:.3rem 0; }

.expert_info .v-line-Gradual{ background:url(../images/titIcon.png) no-repeat top;  background-size:100%;margin-top: .07rem;}
.expert_info .item{ margin-bottom:.3rem; font-size: .28rem; color: #646464; line-height: 2; }
.expert_info .item div{ padding-left: .5rem; }
.expert_info .item div.spot{ background:url(../images/red_spot.png) no-repeat center left; background-size: auto 100%;  }



.shareArea{ display: block; position: absolute; right: .25rem; top: 1.7rem; z-index: 3; background:rgba(255,255,255,1); border-radius: .4rem; padding:.1rem .4rem; display: none; }
.shareArea .social-share-container1{ text-align: center; }
.shareArea .shareClose{ position: absolute; right: -.1rem; top: -.1rem; width: 10%; z-index: 4 ;}
.shareArea .shareClose img{ width: 100%; }
.shareArea .social-share-container1{  }

.social-share-button .social-share-icon{ font-size: .32rem !important; padding:0 .07rem; }