@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: .22rem;  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: .22rem;  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: .22rem; 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: .22rem; 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: .22rem;
    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: .22rem; 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: 80; 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; }

/* Codex responsive desktop shell: keep the mobile UI from stretching on PC */
* { box-sizing: border-box; }
img, video, audio, canvas { max-width: 100%; }
html, body { overflow-x: hidden; }

@media screen and (min-width: 751px) {
	html {
		background: #f3f4f6;
	}
	body {
		width: 750px;
		max-width: 750px;
		min-height: 100vh;
		margin-left: auto;
		margin-right: auto;
		background: #fff;
		overflow-x: hidden;
		box-shadow: 0 0 24px rgba(0,0,0,.08);
	}
	header,
	.pageBanner,
	.banner,
	.popular_courses,
	.course_display,
	.courseTit,
	.course_cate,
	.course_frame,
	.container,
	.nav-container,
	.z-vip3-d1,
	.z-vip9-d1,
	.z-vip10-d1,
	.z-vip11-d1 {
		max-width: 750px;
		margin-left: auto;
		margin-right: auto;
	}
	footer,
	.course_frame .bottomBuy,
	.bottomBuy {
		width: 750px !important;
		max-width: 750px;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%);
	}
	.mask,
	.mask2,
	.mask_qr {
		width: 750px !important;
		max-width: 100vw;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%);
	}
	.inline-course-player audio,
	.inline-course-player video {
		max-width: 100% !important;
	}
}

@media screen and (max-width: 750px) {
	body {
		width: 100%;
		max-width: 100%;
		margin: 0;
		box-shadow: none;
	}
}

/* Codex responsive image fixes: keep cover images at 3:4 and square images at 1:1 */
.pageBanner,
.pageBanner .pbannersw,
.bannersw,
.popular_courses .item .img,
.course_display .list .item .img,
.course_display .delicate .item .imgArea,
.speaker .con .speakerPortrait {
	max-width: 100%;
	overflow: hidden;
}

.pageBanner .pbannersw {
	width: 46%;
	max-width: 320px;
	height: auto;
	aspect-ratio: 3 / 4;
	margin: 0 auto;
	border-radius: .18rem;
}

.pageBanner .pbannersw .swiper-slide,
.bannersw .swiper-slide,
.popular_courses .item .img,
.course_display .list .item .img,
.course_display .delicate .item .imgArea,
.speaker .con .speakerPortrait {
	height: auto;
	aspect-ratio: 1 / 1;
}

.pageBanner .pbannersw .swiper-slide {
	aspect-ratio: 3 / 4;
}

.pageBanner .pbannersw .swiper-slide img,
.bannersw .swiper-slide img,
.popular_courses .item .img img,
.course_display .list .item .img img,
.course_display .delicate .item .img img,
.speaker .con .speakerPortrait img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.courseProfile .con img,
.speaker .con img {
	display: block;
	max-width: 100% !important;
	height: auto !important;
}


/* Codex homepage hot-course thumbnails */
.popular_courses .item .img {
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
	background: #fff;
	border-radius: 13px;
	overflow: hidden;
}
.popular_courses .item .img img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	border-radius: 13px;
}
/* Codex homepage preview thumbnails: small preview, big image stays on detail page */
.popular_courses .item .img {
	width: 72% !important;
	height: 1.85rem !important;
	aspect-ratio: auto !important;
	margin: 0 auto !important;
	background: #fff !important;
	border-radius: 8px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
}
.popular_courses .item .img img {
	max-width: 100% !important;
	max-height: 100% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	border-radius: 0 !important;
}
/* Codex hot-course marquee */
.hot-marquee-section {
	padding-top: .55rem !important;
	padding-bottom: .65rem !important;
	overflow: visible !important;
}
.hot-marquee {
	width: 100%;
	overflow: visible !important;
	padding: .35rem .25rem .45rem;
}
.hot-marquee-track {
	display: flex;
	align-items: stretch;
	width: max-content;
	animation: codexHotMarquee 28s linear infinite;
	overflow: visible;
}
.hot-marquee:hover .hot-marquee-track {
	animation-play-state: paused;
}
.hot-course-card {
	flex: 0 0 1.48rem;
	width: 1.48rem;
	margin-right: .22rem;
	cursor: pointer;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: .08rem .06rem .08rem;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
	transition: transform .22s ease, box-shadow .22s ease;
}
.hot-course-thumb {
	width: 100%;
	height: 1.02rem;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible !important;
	background: #fafafa;
	border: 1px solid #f0f0f0;
	border-radius: 7px;
	padding: .05rem;
	box-sizing: border-box;
	position: relative;
	z-index: 2;
}
.hot-course-thumb img {
	max-width: 100% !important;
	max-height: 100% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	display: block;
	border-radius: 0 !important;
	transition: transform .22s ease, filter .22s ease;
	transform-origin: center center;
}
.hot-course-title {
	font-size: .22rem;
	line-height: .34rem;
	height: .34rem;
	margin-top: .08rem;
	color: #333;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.hot-course-speaker {
	font-size: .2rem;
	line-height: .28rem;
	height: .28rem;
	color: #aaa;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
@keyframes codexHotMarquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
.hot-course-card:hover .hot-course-thumb img {
	transform: scale(2.5);
	filter: saturate(1.08);
	position: relative;
	z-index: 60;
	background: #fff;
	box-shadow: 0 .16rem .36rem rgba(0,0,0,.18);
}
.hot-course-card:hover .hot-course-title {
	color: #111;
}
.hot-course-card:hover {
	transform: translateY(-.08rem) scale(1.04);
	border-color: #dcdcdc;
	box-shadow: 0 .12rem .28rem rgba(0,0,0,.14);
	z-index: 80;
}
.hot-course-card:hover .hot-course-thumb {
	overflow: visible;
}
.hot-course-card:hover .hot-course-thumb {
	border-color: #d8d8d8;
	background: #fff;
}
/* Codex course-display list cards */
.course_display .list {
	overflow: visible !important;
}
.course_display .list .item {
	position: relative;
	overflow: visible !important;
	padding: .22rem .12rem .24rem !important;
	border-bottom: 1px solid #f3f3f3 !important;
	background: #fff;
}
.course_display .list .item .course-show-thumb {
	width: 30% !important;
	height: 1.18rem !important;
	float: left;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #fafafa !important;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: .06rem;
	box-sizing: border-box;
	overflow: visible !important;
	position: relative;
	z-index: 2;
}
.course_display .list .item .course-show-thumb img {
	max-width: 100% !important;
	max-height: 100% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	display: block;
	border-radius: 0 !important;
	transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
	transform-origin: center center;
}
.course_display .list .item .course-show-thumb:hover img,
.course_display .list .item:hover .course-show-thumb img {
	transform: scale(2.1);
	filter: saturate(1.08);
	position: relative;
	z-index: 80;
	background: #fff;
	box-shadow: 0 .16rem .36rem rgba(0,0,0,.18);
}
.course_display .list .item .font {
	width: 66% !important;
	float: right;
}
.course_display .list .item .font .t1 {
	font-size: .28rem !important;
	line-height: .36rem !important;
	height: .36rem !important;
	margin-top: .02rem !important;
}
.course_display .list .item .font .t1 a {
	color: #222 !important;
}
.course_display .list .item .font .t2 {
	font-size: .22rem !important;
	line-height: .34rem !important;
	height: .68rem !important;
	margin: .08rem 0 !important;
	color: #777 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.course_display .list .item .font .t3 {
	height: .38rem !important;
	line-height: .38rem !important;
	overflow: visible !important;
}
.course_display .list .item .font .t3 .t3L {
	display: none !important;
}
.course_display .list .item .font .t3 .price {
	width: auto !important;
	float: left !important;
	font-size: .3rem !important;
	color: #e21618 !important;
	font-weight: bold;
}
.course_display .list .item .font .t3 .price span {
	color: #e21618 !important;
}
.course_display .list .item .font .t3 .price .smallFont {
	font-size: .2rem !important;
	font-weight: normal;
}
/* Codex mobile fixes for homepage course cards */
@media screen and (max-width: 750px), (hover: none) and (pointer: coarse) {
	.hot-marquee-section {
		padding-top: 6% !important;
		padding-bottom: .25rem !important;
		overflow: hidden !important;
	}
	.hot-marquee {
		overflow: hidden !important;
		padding: .1rem 0 .08rem !important;
	}
	.hot-marquee-track {
		overflow: hidden !important;
		animation-duration: 32s;
	}
	.hot-course-card {
		flex: 0 0 1.42rem !important;
		width: 1.42rem !important;
		margin-right: .18rem !important;
		transform: none !important;
		box-shadow: none !important;
		z-index: 1 !important;
	}
	.hot-course-thumb {
		height: .98rem !important;
		overflow: hidden !important;
	}
	.hot-course-card:hover,
	.hot-course-card:active {
		transform: none !important;
		box-shadow: none !important;
	}
	.hot-course-card:hover .hot-course-thumb img,
	.hot-course-card:active .hot-course-thumb img {
		transform: none !important;
		box-shadow: none !important;
		filter: none !important;
	}
	.course_display .list {
		overflow: hidden !important;
	}
	.course_display .list .item {
		overflow: hidden !important;
		padding: .2rem 3% !important;
	}
	.course_display .list .item .course-show-thumb {
		width: 32% !important;
		height: 1.12rem !important;
		overflow: hidden !important;
	}
	.course_display .list .item .course-show-thumb:hover img,
	.course_display .list .item:hover .course-show-thumb img,
	.course_display .list .item .course-show-thumb:active img {
		transform: none !important;
		box-shadow: none !important;
		filter: none !important;
	}
	.course_display .list .item .font {
		width: 64% !important;
	}
	.course_display .list .item .font .t1 {
		font-size: .27rem !important;
		line-height: .35rem !important;
		height: .35rem !important;
	}
	.course_display .list .item .font .t2 {
		font-size: .21rem !important;
		line-height: .32rem !important;
		height: .64rem !important;
	}
	.course_display .list .item .font .t3 .price {
		font-size: .28rem !important;
	}
}
/* Codex homepage quick navigation */
.home-quick-nav {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .18rem;
	padding: .14rem 3% .22rem;
	background: #fff;
	border-bottom: .1rem solid #f8f8f8;
}
.home-quick-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 1.12rem;
	background: #fff;
	border: 1px solid #eeeeee;
	border-radius: 8px;
	color: #333;
	text-decoration: none;
	box-shadow: 0 .04rem .16rem rgba(0,0,0,.04);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.home-quick-item:hover {
	transform: translateY(-.04rem);
	border-color: #dcdcdc;
	box-shadow: 0 .1rem .24rem rgba(0,0,0,.1);
}
.home-quick-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: .52rem;
	height: .52rem;
	margin-bottom: .08rem;
	border-radius: 50%;
	font-size: .22rem;
	line-height: .52rem;
	font-weight: bold;
	color: #fff;
}
.home-quick-icon.icon-hot { background: #f15a3b; }
.home-quick-icon.icon-classic { background: #91c83e; }
.home-quick-icon.icon-music { background: #3c9ad6; }
.home-quick-icon.icon-vip { background: #d59a2f; font-size: .18rem; }
.home-quick-text {
	display: block;
	max-width: 100%;
	font-size: .24rem;
	line-height: .32rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
@media screen and (max-width: 750px) {
	.home-quick-nav {
		gap: .12rem;
		padding: .12rem 3% .2rem;
	}
	.home-quick-item {
		min-height: .98rem;
		box-shadow: none;
	}
	.home-quick-icon {
		width: .46rem;
		height: .46rem;
		font-size: .2rem;
		line-height: .46rem;
		margin-bottom: .06rem;
	}
	.home-quick-icon.icon-vip { font-size: .16rem; }
	.home-quick-text {
		font-size: .22rem;
		line-height: .3rem;
	}
}
/* Codex homepage search bar */
.home-search-panel {
	padding: .08rem 3% .1rem;
	background: #fff;
	border-bottom: none;
}
.home-search-form {
	display: flex !important;
	align-items: center;
	width: 100%;
	height: .62rem;
	line-height: .62rem;
	background: #eeeeee;
	border: 1px solid #e6e6e6;
	border-radius: .5rem;
	box-sizing: border-box;
	padding: 0 .16rem 0 .26rem;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.home-search-input {
	flex: 1;
	min-width: 0;
	height: .56rem;
	border: none;
	outline: none;
	background: transparent;
	font-size: .24rem;
	color: #333;
}
.home-search-input::placeholder {
	color: #aaa;
}
.home-search-submit {
	width: .48rem;
	height: .48rem;
	border: none;
	background: transparent;
	padding: .08rem;
	border-radius: 50%;
	box-sizing: border-box;
	cursor: pointer;
}
.home-search-submit img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: .58;
}
.home-search-submit:active {
	background: rgba(0,0,0,.05);
}
@media screen and (max-width: 750px) {
	.home-search-panel {
		padding: .08rem 3% .1rem;
	}
	.home-search-form {
		height: .58rem;
		line-height: .58rem;
	}
	.home-search-input {
		height: .52rem;
		font-size: .23rem;
	}
	.home-search-submit {
		width: .46rem;
		height: .46rem;
	}
}
/* Codex tighten homepage search spacing */
.home-search-panel {
	padding-top: .08rem !important;
	padding-bottom: .1rem !important;
}
.banner {
	margin-bottom: 0 !important;
}
.home-quick-nav {
	padding-top: .14rem !important;
}
/* Codex compact homepage banner and white search area */
.banner {
	width: 94% !important;
	padding: .04rem 3% .02rem !important;
	border-bottom: none !important;
	background: #fff !important;
}
.bannersw {
	padding-bottom: 0 !important;
	min-height: .24rem !important;
}
.bannersw .swiper-slide {
	height: .34rem !important;
	border-radius: 0 !important;
}
.bannersw .swiper-slide img {
	height: .34rem !important;
	object-fit: cover !important;
}
.home-search-panel {
	background: #fff !important;
	border-bottom: none !important;
	padding-top: .04rem !important;
	padding-bottom: .08rem !important;
}
.home-search-form {
	background: #eeeeee !important;
}
/* Codex compact homepage vertical spacing */
.banner {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.bannersw,
.bannersw .swiper-wrapper {
	padding-bottom: 0 !important;
	min-height: .12rem !important;
}
.bannersw .swiper-slide,
.bannersw .swiper-slide img {
	height: .18rem !important;
}
.home-search-panel {
	padding-top: .02rem !important;
	padding-bottom: .04rem !important;
}
.home-search-form {
	height: .54rem !important;
	line-height: .54rem !important;
}
.home-quick-nav {
	padding-top: .08rem !important;
	padding-bottom: .12rem !important;
	border-bottom-width: .04rem !important;
}
.home-quick-item {
	min-height: .86rem !important;
	padding-top: .06rem !important;
	padding-bottom: .06rem !important;
}
.home-quick-icon {
	width: .4rem !important;
	height: .4rem !important;
	line-height: .4rem !important;
	margin-bottom: .04rem !important;
}
.home-quick-text {
	font-size: .21rem !important;
	line-height: .28rem !important;
}
.hot-marquee-section {
	padding-top: .08rem !important;
	padding-bottom: .1rem !important;
	border-bottom-width: .04rem !important;
}
.popular_courses .tit,
.course_display .tit {
	height: .38rem !important;
	line-height: .38rem !important;
	margin-bottom: .02rem !important;
}
.popular_courses .tit .v-line,
.course_display .tit .v-line,
.v-line-Gradual {
	height: .24rem !important;
	margin-top: .07rem !important;
}
.hot-marquee {
	padding-top: .03rem !important;
	padding-bottom: .04rem !important;
}
.hot-course-card {
	padding-top: .05rem !important;
	padding-bottom: .05rem !important;
}
.hot-course-thumb {
	height: .88rem !important;
}
.hot-course-title {
	margin-top: .04rem !important;
	height: .28rem !important;
	line-height: .28rem !important;
}
.course_display {
	padding-top: .08rem !important;
	padding-bottom: .08rem !important;
}
.course_display .con {
	margin-top: 0 !important;
}
.coursesw {
	padding-bottom: .16rem !important;
}
.coursesw .swiper-slide img {
	height: 1.05rem !important;
	object-fit: contain !important;
}
.coursesw .swiper-pagination {
	bottom: 0 !important;
}
.course_display .list {
	padding-top: .06rem !important;
}
.course_display .list .item {
	margin-bottom: .08rem !important;
	padding-top: .08rem !important;
	padding-bottom: .08rem !important;
}
.course_display .list .item .course-show-thumb {
	height: .92rem !important;
}
.course_display .list .item .font .t1 {
	margin-top: 0 !important;
	height: .3rem !important;
	line-height: .3rem !important;
}
.course_display .list .item .font .t2 {
	margin: .03rem 0 !important;
	height: .54rem !important;
	line-height: .27rem !important;
}
.course_display .list .item .font .t3 {
	height: .32rem !important;
	line-height: .32rem !important;
}
@media screen and (max-width: 750px) {
	.hot-marquee-section {
		padding-top: .06rem !important;
		padding-bottom: .08rem !important;
	}
	.course_display .list .item {
		padding-top: .08rem !important;
		padding-bottom: .08rem !important;
		margin-bottom: .06rem !important;
	}
	.course_display .list .item .course-show-thumb {
		height: .9rem !important;
	}
}
/* Codex compact homepage typography */
.home-search-input {
	font-size: .2rem !important;
}
.home-quick-text {
	font-size: .19rem !important;
	line-height: .25rem !important;
}
.home-quick-icon {
	font-size: .18rem !important;
}
.home-quick-icon.icon-vip {
	font-size: .15rem !important;
}
.popular_courses .tit,
.course_display .tit {
	font-size: .24rem !important;
	font-weight: bold;
}
.course_display .tit a {
	font-size: .2rem !important;
	font-weight: normal;
}
.hot-course-title {
	font-size: .19rem !important;
	line-height: .26rem !important;
	height: .26rem !important;
}
.course_display .list .item .font .t1 {
	font-size: .22rem !important;
	line-height: .3rem !important;
	height: .3rem !important;
	font-weight: normal;
}
.course_display .list .item .font .t1 a {
	font-size: .22rem !important;
	color: #222 !important;
}
.course_display .list .item .font .t2 {
	font-size: .18rem !important;
	line-height: .26rem !important;
	height: .52rem !important;
	color: #777 !important;
}
.course_display .list .item .font .t3 {
	height: .28rem !important;
	line-height: .28rem !important;
}
.course_display .list .item .font .t3 .price {
	font-size: .22rem !important;
	line-height: .28rem !important;
}
.course_display .list .item .font .t3 .price span {
	font-size: .22rem !important;
}
.course_display .list .item .font .t3 .price .smallFont {
	font-size: .14rem !important;
}
@media screen and (max-width: 750px) {
	.home-search-input {
		font-size: .19rem !important;
	}
	.home-quick-text {
		font-size: .18rem !important;
		line-height: .24rem !important;
	}
	.popular_courses .tit,
	.course_display .tit {
		font-size: .23rem !important;
	}
	.hot-course-title {
		font-size: .18rem !important;
		line-height: .25rem !important;
		height: .25rem !important;
	}
	.course_display .list .item .font .t1,
	.course_display .list .item .font .t1 a {
		font-size: .21rem !important;
		line-height: .29rem !important;
		height: .29rem !important;
	}
	.course_display .list .item .font .t2 {
		font-size: .17rem !important;
		line-height: .24rem !important;
		height: .48rem !important;
	}
	.course_display .list .item .font .t3 .price,
	.course_display .list .item .font .t3 .price span {
		font-size: .21rem !important;
	}
	.course_display .list .item .font .t3 .price .smallFont {
		font-size: .13rem !important;
	}
}
/* Codex requested homepage font sizes */
.hot-course-title {
	text-align: center !important;
	font-size: .20rem !important;
	line-height: .28rem !important;
	height: .28rem !important;
}
.course_display .list .item .font .t1,
.course_display .list .item .font .t1 a {
	font-size: .24rem !important;
	line-height: .32rem !important;
	height: .32rem !important;
	color: #222 !important;
}
.course_display .list .item .font .t2 {
	font-size: .20rem !important;
	line-height: .28rem !important;
	height: .56rem !important;
	color: #666 !important;
}
.course_display .list .item .font .t3,
.course_display .list .item .font .t3 .price,
.course_display .list .item .font .t3 .price span {
	font-size: .22rem !important;
	line-height: .30rem !important;
	height: .30rem !important;
}
.course_display .list .item .font .t3 .price .smallFont {
	font-size: .14rem !important;
}
.course_display .list .item .font .t3 .price .freeText {
	font-size: .22rem !important;
	line-height: .30rem !important;
	color: #e21618 !important;
	font-weight: bold;
}
@media screen and (max-width: 750px) {
	.hot-course-title {
		text-align: center !important;
		font-size: .20rem !important;
		line-height: .28rem !important;
		height: .28rem !important;
	}
	.course_display .list .item .font .t1,
	.course_display .list .item .font .t1 a {
		font-size: .24rem !important;
		line-height: .32rem !important;
		height: .32rem !important;
	}
	.course_display .list .item .font .t2 {
		font-size: .20rem !important;
		line-height: .28rem !important;
		height: .56rem !important;
	}
	.course_display .list .item .font .t3,
	.course_display .list .item .font .t3 .price,
	.course_display .list .item .font .t3 .price span {
		font-size: .22rem !important;
		line-height: .30rem !important;
		height: .30rem !important;
	}
	.course_display .list .item .font .t3 .price .smallFont {
		font-size: .14rem !important;
	}
	.course_display .list .item .font .t3 .price .freeText {
		font-size: .22rem !important;
		line-height: .30rem !important;
		color: #e21618 !important;
		font-weight: bold;
	}
}
/* Codex homepage course-display three-column grid */
.course_display .list {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: .16rem !important;
	padding: .08rem .12rem .12rem !important;
	overflow: visible !important;
}
.course_display .list .item {
	display: flex !important;
	flex-direction: column !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: .08rem !important;
	border: 1px solid #eeeeee !important;
	border-radius: 8px !important;
	background: #fff !important;
	box-sizing: border-box !important;
	overflow: visible !important;
}
.course_display .list .item:nth-of-type(n+7) {
	display: none !important;
}
.course_display .list .item .course-show-thumb {
	width: 100% !important;
	height: 1.3rem !important;
	float: none !important;
	padding: .06rem !important;
	margin: 0 0 .07rem !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}
.course_display .list .item .course-show-thumb img {
	max-width: 100% !important;
	max-height: 100% !important;
	width: auto !important;
	height: auto !important;
	margin: auto !important;
	object-fit: contain !important;
}
.course_display .list .item .font {
	width: 100% !important;
	float: none !important;
	min-width: 0 !important;
}
.course_display .list .item .font .t1,
.course_display .list .item .font .t1 a {
	font-size: .20rem !important;
	line-height: .28rem !important;
	height: .28rem !important;
	margin: 0 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}
.course_display .list .item .font .t2 {
	font-size: .16rem !important;
	line-height: .23rem !important;
	height: .46rem !important;
	margin: .04rem 0 !important;
	-webkit-line-clamp: 2 !important;
}
.course_display .list .item .font .t3 {
	height: .28rem !important;
	line-height: .28rem !important;
	margin-top: auto !important;
}
.course_display .list .item .font .t3 .price,
.course_display .list .item .font .t3 .price span,
.course_display .list .item .font .t3 .price .freeText {
	width: 100% !important;
	float: none !important;
	font-size: .17rem !important;
	line-height: .28rem !important;
	height: .28rem !important;
	white-space: nowrap !important;
}
.course_display .list .item .font .t3 .price .smallFont {
	font-size: .12rem !important;
}
.course_display .list .item .clear {
	display: none !important;
}
.course_display .list .item:hover .course-show-thumb img {
	transform: scale(1.35) !important;
}
@media screen and (max-width: 750px) {
	.course_display .list {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: .08rem !important;
		padding: .06rem .08rem .1rem !important;
		overflow: visible !important;
	}
	.course_display .list .item {
		padding: .06rem !important;
		overflow: hidden !important;
	}
	.course_display .list .item .course-show-thumb {
		height: 1.05rem !important;
		margin-bottom: .05rem !important;
	}
	.course_display .list .item .font .t1,
	.course_display .list .item .font .t1 a {
		font-size: .18rem !important;
		line-height: .25rem !important;
		height: .25rem !important;
	}
	.course_display .list .item .font .t2 {
		font-size: .14rem !important;
		line-height: .20rem !important;
		height: .40rem !important;
	}
	.course_display .list .item .font .t3,
	.course_display .list .item .font .t3 .price,
	.course_display .list .item .font .t3 .price span,
	.course_display .list .item .font .t3 .price .freeText {
		font-size: .16rem !important;
		line-height: .24rem !important;
		height: .24rem !important;
	}
	.course_display .list .item .font .t3 .price .smallFont {
		font-size: .11rem !important;
	}
	.course_display .list .item:hover .course-show-thumb img,
	.course_display .list .item .course-show-thumb:active img {
		transform: none !important;
	}
}
/* Codex course-display horizontal card layout */
.course_display .list .item {
	display: grid !important;
	grid-template-columns: 42% minmax(0, 1fr) !important;
	grid-template-rows: 1fr !important;
	align-items: stretch !important;
	column-gap: .10rem !important;
	min-height: 1.42rem !important;
	padding: .09rem !important;
}
.course_display .list .item .course-show-thumb {
	grid-column: 1 !important;
	grid-row: 1 !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 1.22rem !important;
	margin: 0 !important;
	float: none !important;
}
.course_display .list .item .font {
	grid-column: 2 !important;
	grid-row: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	width: 100% !important;
	min-width: 0 !important;
	float: none !important;
}
.course_display .list .item .font .t1,
.course_display .list .item .font .t1 a {
	font-size: .19rem !important;
	line-height: .27rem !important;
	height: .27rem !important;
}
.course_display .list .item .font .t2 {
	font-size: .15rem !important;
	line-height: .21rem !important;
	height: .42rem !important;
	margin: .04rem 0 !important;
}
.course_display .list .item .font .t3 {
	margin-top: auto !important;
}
@media screen and (max-width: 750px) {
	.course_display .list .item {
		grid-template-columns: 40% minmax(0, 1fr) !important;
		column-gap: .06rem !important;
		min-height: 1.12rem !important;
		padding: .05rem !important;
	}
	.course_display .list .item .course-show-thumb {
		height: 100% !important;
		min-height: .98rem !important;
		margin: 0 !important;
	}
	.course_display .list .item .font .t1,
	.course_display .list .item .font .t1 a {
		font-size: .16rem !important;
		line-height: .22rem !important;
		height: .22rem !important;
	}
	.course_display .list .item .font .t2 {
		font-size: .12rem !important;
		line-height: .17rem !important;
		height: .34rem !important;
		margin: .02rem 0 !important;
	}
	.course_display .list .item .font .t3,
	.course_display .list .item .font .t3 .price,
	.course_display .list .item .font .t3 .price span,
	.course_display .list .item .font .t3 .price .freeText {
		font-size: .14rem !important;
		line-height: .21rem !important;
		height: .21rem !important;
	}
	.course_display .list .item .font .t3 .price .smallFont {
		font-size: .10rem !important;
	}
}
/* Codex fix horizontal course cards on phones */
@media screen and (max-width: 750px) {
	.course_display .list {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: .10rem !important;
		padding: .08rem .16rem .14rem !important;
	}
	.course_display .list .item {
		display: grid !important;
		grid-template-columns: 34% minmax(0, 1fr) !important;
		column-gap: .12rem !important;
		min-height: 1.34rem !important;
		padding: .09rem !important;
		border-radius: 8px !important;
		overflow: hidden !important;
	}
	.course_display .list .item .course-show-thumb {
		width: 100% !important;
		height: 1.14rem !important;
		min-height: 1.14rem !important;
		padding: .05rem !important;
		margin: 0 !important;
		overflow: hidden !important;
	}
	.course_display .list .item .course-show-thumb img {
		max-width: 100% !important;
		max-height: 100% !important;
		width: auto !important;
		height: auto !important;
		object-fit: contain !important;
		transform: none !important;
	}
	.course_display .list .item .font {
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		min-width: 0 !important;
	}
	.course_display .list .item .font .t1,
	.course_display .list .item .font .t1 a {
		font-size: .21rem !important;
		line-height: .28rem !important;
		height: .28rem !important;
	}
	.course_display .list .item .font .t2 {
		font-size: .16rem !important;
		line-height: .23rem !important;
		height: .46rem !important;
		margin: .04rem 0 !important;
	}
	.course_display .list .item .font .t3,
	.course_display .list .item .font .t3 .price,
	.course_display .list .item .font .t3 .price span,
	.course_display .list .item .font .t3 .price .freeText {
		font-size: .18rem !important;
		line-height: .26rem !important;
		height: .26rem !important;
	}
	.course_display .list .item .font .t3 .price .smallFont {
		font-size: .12rem !important;
	}
}
/* Codex two-column course cards on phones */
@media screen and (max-width: 750px) {
	.course_display .list {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: .10rem !important;
		padding: .08rem .12rem .14rem !important;
	}
	.course_display .list .item {
		display: flex !important;
		flex-direction: column !important;
		min-width: 0 !important;
		min-height: 2.28rem !important;
		padding: .08rem !important;
		border-radius: 8px !important;
		overflow: hidden !important;
	}
	.course_display .list .item .course-show-thumb {
		display: flex !important;
		width: 100% !important;
		height: 1.12rem !important;
		min-height: 1.12rem !important;
		padding: .05rem !important;
		margin: 0 0 .06rem !important;
		float: none !important;
		overflow: hidden !important;
	}
	.course_display .list .item .course-show-thumb img {
		max-width: 100% !important;
		max-height: 100% !important;
		width: auto !important;
		height: auto !important;
		margin: auto !important;
		object-fit: contain !important;
		transform: none !important;
	}
	.course_display .list .item .font {
		display: flex !important;
		flex: 1 !important;
		flex-direction: column !important;
		width: 100% !important;
		min-width: 0 !important;
		float: none !important;
	}
	.course_display .list .item .font .t1,
	.course_display .list .item .font .t1 a {
		font-size: .19rem !important;
		line-height: .26rem !important;
		height: .26rem !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}
	.course_display .list .item .font .t2 {
		font-size: .14rem !important;
		line-height: .20rem !important;
		height: .40rem !important;
		margin: .03rem 0 !important;
		-webkit-line-clamp: 2 !important;
	}
	.course_display .list .item .font .t3 {
		margin-top: auto !important;
	}
	.course_display .list .item .font .t3,
	.course_display .list .item .font .t3 .price,
	.course_display .list .item .font .t3 .price span,
	.course_display .list .item .font .t3 .price .freeText {
		font-size: .17rem !important;
		line-height: .25rem !important;
		height: .25rem !important;
	}
	.course_display .list .item .font .t3 .price .smallFont {
		font-size: .11rem !important;
	}
}
/* Codex course-card more link */
.course_display .list .item .font .t3 {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: .06rem !important;
	overflow: visible !important;
}
.course_display .list .item .font .t3 .price {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
}
.course_display .list .item .font .t3 .course-more {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 .09rem !important;
	height: .25rem !important;
	line-height: .25rem !important;
	font-size: .14rem !important;
	color: #79b82a !important;
	border: 1px solid #9dcc62 !important;
	border-radius: .14rem !important;
	text-decoration: none !important;
	box-sizing: border-box !important;
}
.course_display .list .item .font .t3 .course-more:hover {
	color: #fff !important;
	background: #79b82a !important;
}
@media screen and (max-width: 750px) {
	.course_display .list .item {
		min-height: 2.34rem !important;
	}
	.course_display .list .item .font .t3 {
		display: flex !important;
		gap: .04rem !important;
	}
	.course_display .list .item .font .t3 .course-more {
		height: .23rem !important;
		line-height: .23rem !important;
		padding: 0 .07rem !important;
		font-size: .12rem !important;
	}
}
/* Codex final mobile course grid: three columns, image above text */
@media screen and (max-width: 750px) {
	.course_display .list {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: .07rem !important;
		padding: .07rem .08rem .12rem !important;
	}
	.course_display .list .item {
		display: flex !important;
		flex-direction: column !important;
		min-width: 0 !important;
		min-height: 2.05rem !important;
		padding: .05rem !important;
		margin: 0 !important;
		border-radius: 7px !important;
		overflow: hidden !important;
	}
	.course_display .list .item .course-show-thumb {
		display: flex !important;
		width: 100% !important;
		height: .90rem !important;
		min-height: .90rem !important;
		padding: .04rem !important;
		margin: 0 0 .04rem !important;
		float: none !important;
		overflow: hidden !important;
	}
	.course_display .list .item .course-show-thumb img {
		max-width: 100% !important;
		max-height: 100% !important;
		width: auto !important;
		height: auto !important;
		margin: auto !important;
		object-fit: contain !important;
		transform: none !important;
	}
	.course_display .list .item .font {
		display: flex !important;
		flex: 1 !important;
		flex-direction: column !important;
		width: 100% !important;
		min-width: 0 !important;
		float: none !important;
	}
	.course_display .list .item .font .t1,
	.course_display .list .item .font .t1 a {
		font-size: .16rem !important;
		line-height: .22rem !important;
		height: .22rem !important;
		margin: 0 !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}
	.course_display .list .item .font .t2 {
		font-size: .12rem !important;
		line-height: .17rem !important;
		height: .34rem !important;
		margin: .02rem 0 !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 2 !important;
		-webkit-box-orient: vertical !important;
		overflow: hidden !important;
	}
	.course_display .list .item .font .t3 {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: .02rem !important;
		margin-top: auto !important;
		height: .23rem !important;
		line-height: .23rem !important;
	}
	.course_display .list .item .font .t3 .price,
	.course_display .list .item .font .t3 .price span,
	.course_display .list .item .font .t3 .price .freeText {
		width: auto !important;
		font-size: .14rem !important;
		line-height: .23rem !important;
		height: .23rem !important;
		white-space: nowrap !important;
	}
	.course_display .list .item .font .t3 .price .smallFont {
		font-size: .09rem !important;
	}
	.course_display .list .item .font .t3 .course-more {
		height: .21rem !important;
		line-height: .21rem !important;
		padding: 0 .04rem !important;
		font-size: .10rem !important;
		border-radius: .11rem !important;
	}
}
/* Codex center mobile course thumbnails */
@media screen and (max-width: 750px) {
	.course_display .list .item .course-show-thumb {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
	}
	.course_display .list .item .course-show-thumb img {
		display: block !important;
		margin: auto !important;
		object-position: center center !important;
	}
}
/* Codex force-center mobile course thumbnails */
@media screen and (max-width: 750px) {
	.course_display .list .item .img.course-show-thumb {
		position: relative !important;
		display: block !important;
		width: 100% !important;
		height: .90rem !important;
		min-height: .90rem !important;
		padding: 0 !important;
		margin: 0 0 .04rem !important;
		float: none !important;
		overflow: hidden !important;
	}
	.course_display .list .item .img.course-show-thumb img {
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;
		right: auto !important;
		bottom: auto !important;
		transform: translate(-50%, -50%) !important;
		transform-origin: center center !important;
		max-width: 92% !important;
		max-height: 92% !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		object-fit: contain !important;
	}
}
/* Codex modern course center */
.course-center-modern {
	min-height: 100vh;
	padding-bottom: 1.2rem;
	background: #fff !important;
}
.cc-head {
	display: flex;
	align-items: center;
	gap: .16rem;
	padding: .18rem .24rem .08rem;
	background: #fff;
}
.cc-search-form {
	display: flex;
	align-items: center;
	flex: 1;
	height: .56rem;
	padding: 0 .18rem;
	background: #f1f1f1;
	border-radius: .32rem;
	box-sizing: border-box;
}
.cc-search-icon {
	width: .22rem;
	height: .22rem;
	margin-right: .10rem;
	border: 2px solid #999;
	border-radius: 50%;
	box-sizing: border-box;
	position: relative;
}
.cc-search-icon:after {
	content: '';
	position: absolute;
	width: .09rem;
	height: 2px;
	right: -.07rem;
	bottom: -.03rem;
	background: #999;
	transform: rotate(45deg);
}
.cc-search-form input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-size: .22rem;
	color: #333;
}
.cc-search-form button { display: none; }
.cc-menu-icon {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: .36rem;
	height: .28rem;
	padding: .04rem 0;
	box-sizing: border-box;
}
.cc-menu-icon span {
	display: block;
	height: 2px;
	background: #666;
}
.course-center-modern .cc-category-nav {
	padding: .08rem .12rem 0 !important;
	background: #fff !important;
	overflow: hidden;
}
.course-center-modern .nav-ul li {
	height: .48rem;
	padding: 0 .08rem;
}
.course-center-modern .nav-ul .slide-a {
	display: block;
	padding: .06rem .12rem .12rem;
	font-size: .23rem;
	line-height: .30rem;
	white-space: nowrap;
}
.course-center-modern .nav-ul .active-li {
	background: none !important;
}
.course-center-modern .nav-ul .active-li .slide-a {
	font-weight: bold;
	color: #222;
	border-bottom: 3px solid #f05a28;
}
.cc-shortcuts {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: .06rem;
	padding: .20rem .16rem .22rem;
	background: #fff;
}
.cc-shortcut {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	color: #333;
}
.cc-shortcut b {
	display: flex;
	align-items: center;
	justify-content: center;
	width: .62rem;
	height: .62rem;
	margin-bottom: .07rem;
	border-radius: 50%;
	background: #f45a22;
	font-size: .25rem;
	font-weight: bold;
	color: #fff;
}
.cc-shortcut span {
	max-width: 100%;
	font-size: .16rem;
	line-height: .22rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cc-course-section {
	padding: .08rem .16rem .18rem;
	background: #fff;
}
.cc-course-section h2 {
	margin: 0 0 .14rem;
	font-size: .28rem;
	line-height: .38rem;
	font-weight: normal;
	color: #222;
}
.course-center-modern .course_display,
.course-center-modern .course_display .con {
	padding: 0 !important;
	background: #fff !important;
}
.course-center-modern .course_display .delicate,
.course-center-modern .course_display .list {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: .16rem .12rem !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}
.course-center-modern .course_display .delicate .item,
.course-center-modern .course_display .list .item {
	display: flex !important;
	flex-direction: column !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: #fff !important;
	overflow: hidden !important;
}
.course-center-modern .course_display .delicate .item .imgArea,
.course-center-modern .course_display .list .item .img {
	order: 1;
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 1.72rem !important;
	min-height: 1.72rem !important;
	padding: .05rem !important;
	margin: 0 0 .07rem !important;
	float: none !important;
	border: 1px solid #eee;
	border-radius: 7px;
	box-sizing: border-box;
	overflow: hidden !important;
}
.course-center-modern .course_display .delicate .item .img,
.course-center-modern .course_display .delicate .item .img a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
}
.course-center-modern .course_display .delicate .item .img img,
.course-center-modern .course_display .list .item .img img {
	position: static !important;
	max-width: 100% !important;
	max-height: 100% !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	margin: auto !important;
	object-fit: contain !important;
	transform: none !important;
}
.course-center-modern .course_display .delicate .t1 {
	order: 2;
	padding: 0 !important;
	font-size: .18rem !important;
	line-height: .26rem !important;
	height: .26rem !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.course-center-modern .course_display .delicate .t1 img,
.course-center-modern .course_display .delicate .playBtn,
.course-center-modern .course_display .delicate .Duration,
.course-center-modern .course_display .delicate .speakerPortrait {
	display: none !important;
}
.course-center-modern .course_display .delicate .name {
	order: 3;
	float: none !important;
	margin: .02rem 0 0 !important;
	padding: 0 !important;
	font-size: .13rem !important;
	line-height: .20rem !important;
	color: #888;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.course-center-modern .course_display .delicate .price {
	order: 4;
	float: none !important;
	margin: .02rem 0 0 !important;
	font-size: .15rem !important;
	line-height: .22rem !important;
	color: #f0442d !important;
}
.course-center-modern .course_display .list .item .font {
	order: 2;
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	float: none !important;
}
.course-center-modern .course_display .list .item .font .t1,
.course-center-modern .course_display .list .item .font .t1 a {
	font-size: .18rem !important;
	line-height: .26rem !important;
	height: .26rem !important;
}
.course-center-modern .course_display .list .item .font .t2 {
	display: none !important;
}
.course-center-modern .course_display .list .item .font .t3 {
	display: block !important;
	height: .24rem !important;
	line-height: .24rem !important;
}
.course-center-modern .course_display .list .item .font .t3 .t3L { display: none !important; }
.course-center-modern .course_display .list .item .font .t3 .price,
.course-center-modern .course_display .list .item .font .t3 .price span {
	float: none !important;
	width: auto !important;
	padding: 0 !important;
	background: none !important;
	font-size: .15rem !important;
	line-height: .22rem !important;
	color: #f0442d !important;
}
@media screen and (max-width: 750px) {
	.cc-head { padding: .14rem .16rem .06rem; }
	.cc-search-form { height: .50rem; }
	.cc-search-form input { font-size: .19rem; }
	.course-center-modern .nav-ul .slide-a { font-size: .20rem; }
	.cc-shortcuts { padding: .16rem .10rem .18rem; }
	.cc-shortcut b { width: .54rem; height: .54rem; font-size: .21rem; }
	.cc-shortcut span { font-size: .14rem; }
	.cc-course-section { padding: .06rem .10rem .16rem; }
	.cc-course-section h2 { margin-bottom: .10rem; font-size: .25rem; }
	.course-center-modern .course_display .delicate,
	.course-center-modern .course_display .list {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: .14rem .08rem !important;
	}
	.course-center-modern .course_display .delicate .item .imgArea,
	.course-center-modern .course_display .list .item .img {
		height: 1.28rem !important;
		min-height: 1.28rem !important;
	}
	.course-center-modern .course_display .delicate .t1,
	.course-center-modern .course_display .list .item .font .t1,
	.course-center-modern .course_display .list .item .font .t1 a {
		font-size: .16rem !important;
		line-height: .23rem !important;
		height: .23rem !important;
	}
	.course-center-modern .course_display .delicate .name { font-size: .12rem !important; }
	.course-center-modern .course_display .delicate .price,
	.course-center-modern .course_display .list .item .font .t3 .price,
	.course-center-modern .course_display .list .item .font .t3 .price span {
		font-size: .14rem !important;
	}
}
/* Codex fix category course grid ordering */
.course-center-modern .course_display .list > a {
	display: contents !important;
}
.course-center-modern .course_display .list > .item,
.course-center-modern .course_display .list > a > .item {
	width: auto !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	transform: none !important;
}
.course-center-modern .course_display .list > .layui-flow-more {
	grid-column: 1 / -1 !important;
}
@media screen and (max-width: 750px) {
	.course-center-modern .course_display .list {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		grid-auto-flow: row !important;
		align-items: start !important;
	}
}

/* Codex unified course detail cover: same 3:4 cover ratio as homepage, enlarged to fill */
.pageBanner .pbannersw {
	width: min(72%, 540px) !important;
	max-width: 540px !important;
	height: auto !important;
	aspect-ratio: 3 / 4 !important;
	margin-left: auto !important;
	margin-right: auto !important;
	overflow: hidden !important;
}
.pageBanner .pbannersw .swiper-wrapper,
.pageBanner .pbannersw .swiper-slide {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: 3 / 4 !important;
}
.pageBanner .pbannersw .swiper-slide img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center center !important;
}
@media screen and (max-width: 750px) {
	.pageBanner .pbannersw {
		width: 76% !important;
		max-width: 420px !important;
	}
}

/* Codex unified automatic cover fill across course sections */
.course-center-modern .course_display .delicate .item .imgArea,
.course-center-modern .course_display .list .item .img {
	overflow: hidden !important;
}
.course-center-modern .course_display .delicate .item .img,
.course-center-modern .course_display .delicate .item .img a {
	width: 100% !important;
	height: 100% !important;
}
.course-center-modern .course_display .delicate .item .img img,
.course-center-modern .course_display .list .item .img img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	object-fit: cover !important;
	object-position: center center !important;
}