.index-page{
  background: #f7f7f7;
}
.index-header{
  height: 44px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  background-color: #fff;
}
.index-header-logo{
  width: 72px;
  height: 100%;
}
.index-header-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.index-header-search{
  height: 32px;
  flex:1;
  margin-left: 10px;
  position: relative;
}
.index-header-search__icon{
  position: absolute;
  left:12px;
  top:50%;
  margin-top: -8px;
}
.index-header-search input{
  background-color: #f3f3f3;
  width: 100%;
  height: 100%;
  border: 0px;
  border-radius: 20px;
  box-sizing: border-box;
  padding: 10px 10px 10px 35px;
  font-size: 14px;
}

.index-header-nav .van-tabs__wrap{
  background-color: #fff;
  height: 44px;
  line-height: 44px;
}
.index-header-nav .van-tab__text{
  position: relative;
}
.index-header-nav .van-tab{
  padding: 0 15px;
}
.index-header-nav .van-tab--active{
  font-size:18px;
  color:var(--color-primary);
  font-weight: bold;
}
.index-header-nav .van-tabs__line{
  width: 16px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}

/*轮播图*/
.page-index{
  padding: .5rem 0;
}
.index-banner{
  margin: 0 .5rem;
}
.index-swiper { /*height:7.5rem;*/ border-radius: 0.25rem;} 
.index-swiper .swiper-slide { background-size:cover; background-position: 50% 50%; background-repeat: no-repeat } 
.index-swiper .swiper-pagination-bullet { width: 0.6rem; height: 0.25rem; background: #fff; opacity: 0.5; border-radius: 0.25rem; } 
.index-swiper .swiper-pagination-bullet-active { opacity: 1; } 
.index-menu {
  background-color: #fff;
  margin: 0 .5rem;
  border-radius: .25rem;
  margin-top: .5rem;
  padding: .35rem 0;
}
.index-menu .item { width:25%; float:left; text-align: center; line-height: 0.8rem; padding:.35rem 0; } 
.index-menu .item img { height: 2rem; display: block; margin:0 auto} 
.index-menu .item a { display: block; color: #606367; } 

.market-banner{
  margin: .5rem .5rem 0 .5rem;
}
.market-banner img{
  width: 100%;
  display: block;
}
.index-course-banner{
  margin:0.5rem 0.5rem 0 0.5rem;
  border-radius: 0.25rem;
  overflow: hidden;
}
.index-box{
  margin: .5rem .5rem 0 .5rem;
  background-color: #fff;
  padding: 0 .75rem;
  border-radius: .25rem;
}
.index-box-title{
  height: 2.2rem;
  line-height: 2.2rem;
  font-size: .8rem;
  position: relative;
  font-weight: bold;
}
.index-box-title .recommend{
  display: inline-block;
  width: 1.45rem;
  height: .7rem;
  background:#f4593c;
  border-radius: .3rem .3rem .3rem 0;
  color:#fff;
  line-height: .7rem;
  font-size: .5rem;
  text-align: center;
  position: relative;
  top: -.15rem;
  font-weight: normal;
}
.index-box-title .more { float: right; font-size: 0.6rem; color:#606367; background: url(./icon-right.png) no-repeat 100% 50%; background-size:0.5rem 0.5rem; padding-right:0.65rem; font-weight: normal; } 

.index-fight-group .item { position: relative; padding: .75rem 0; display: flex;} 
.index-fight-group .item + .item::before{
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
  left:0;
  top:0;
  background-color: #eee;
  transform: scaleY(0.5);
}
.index-fight-group .images-box {width: 6.5rem; height: 3.64rem;  border-radius: 0.25rem; overflow: hidden;} 
.index-fight-group .images-info {flex:1;padding-left: 0.5rem; position: relative; } 
.index-fight-group .default-bg { border-radius: 0.25rem; overflow: hidden; } 
.index-fight-group .name { font-size: 0.8rem; height: 2rem; line-height: 1rem; overflow: hidden; font-weight: 500; } 
.index-fight-group .desc { color:#929699; font-size: 0.6rem; line-height: 1rem;height: 1rem;margin-top: .15rem; } 
.index-fight-group .price { font-size: 0.7rem; color: #E14F4F; line-height: 1.1rem; margin-top: .15rem;} 
.index-fight-group .price .btn{
  width: 3.7rem;
  height: 1.2rem;
  line-height: 1.2rem;
  background: linear-gradient(90deg, #23B8FF 0%, #72D2FF 100%);
  border-radius: .6rem;
  text-align: center;
  color:#fff;
  font-size: .6rem;
  float: right;
}
.index-fight-group .price span{
  font-weight: 500;
}
.index-fight-group .price span font{
  font-size: .5rem;
  margin-right: .1rem;
}
.index-fight-group .price font.free_cor{
  font-size: 0.7rem;
}
.index-scroller{
  overflow-x: hidden;
  overflow-y: auto;
}

/*热门直播*/

.index-live{}
.index-live-item{
  display: flex;
  padding: .75rem 0;
  position: relative;
}
.index-live-item + .index-live-item::before{
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
  left:0;
  top:0;
  background-color: #eee;
  transform: scaleY(0.5);
}
.index-live-item__cover{
  width: 3.5rem;
  height: 4.25rem;
  border-radius: .25rem;
  overflow: hidden;
  position: relative;
}
.index-live-item__cover img{
  width: 100%;
  height:100%;
  object-fit: cover;
}
.index-live-item__play-icon{
  width: 1.4rem;
  height: 1.4rem;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  position: absolute;
  left:50%;
  top:50%;
  margin-top: -0.7rem;
  margin-left: -0.7rem;
  color:#fff;
  justify-content: center;
  display: flex;
  align-items: center;
}
.index-live-item__info{
  flex: 1;
  margin-left: .5rem;
}
.index-live-item__title{ font-size:16px; height: 20px; line-height: 20px; overflow: hidden; font-weight: 500; } 
.index-live-item__zj,
.index-live-item__time{
  color:#999;
  margin-top: 7px;
  line-height: 20px;
}
.index-live-item__zj{
  font-weight: bold;
}
.index-live-item__time{
  margin-top: 3px;
}
.index-live-item__zj span{
  height: 18px;
  line-height: 18px;
  border: 1px solid #2ABAFF;
  background-color: #E1F5FF;
  color:#2ABAFF;
  padding: 0 6px;
  border-radius: 4px;
  margin-left: 10px;
  display: inline-block;
}
.index-live-item__price{
  font-size: 14px;
  color: #E14F4F; 
  font-weight: 500;
  margin-top: 3px;
  line-height: 20px;
}

/*免费课*/
.index-free-item{
  padding: .75rem 0;
  position: relative;
}
.index-free-item + .index-free-item::before{
  content: '';
  width: 100%;
  height: 1px;
  background-color: #e6e6e6;
  transform: scaleY(0.5);
  position: absolute;
  top: 0;
  left: 0;
}
.index-free-item__title{
  font-size: .8rem;
  font-weight: bold;
  line-height: 1.2rem;
}
.index-free-item__title span{
  display: inline-block;
  height: .9rem;
  line-height: .9rem;
  background-color: #A8ACB7;
  color:#fff;
  border-radius: .15rem;
  padding: 0 .3rem;
  font-size: .5rem;
  margin-right: .4rem;
}
.index-free-item__title span{
  display: inline-block;
}
.index-free-item__desc{
  color:#999;
  font-size: .6rem;
  line-height: 1rem;
  padding: .5rem 0;
}
.index-free-item__fot{
  display: flex;
  margin-top: .25rem;
  align-items: flex-end;
}
.index-free-item__teacher{
  flex: 1;
}
.index-free-item__teacher a{
  width: 25%;
  float: left;
  text-align: center;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.index-free-item__teacher .teacherface{
  display: block;
}
.index-free-item__teacher img{
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: .15rem;
}
.index-free-item__price{
  
  text-align: right;
}
.index-free-item__price strong{
  background: url(./icon-play.png) no-repeat 0 50%;
  background-size: .8rem .8rem;
  font-size: .9rem;
  padding-left: 1.2rem;
  color:#F53520;
}
.index-free-item__price p{
  color:#999;
}

.index-teacher{
  background:url(./tcbg.png) no-repeat;
  background-size: 100% 8rem;
  padding:1rem 0 .5rem 0;
  margin-top: .5rem;
}

.index-teacher-tit{
  text-align: center;
  color: #fff;
}
.index-teacher-tit strong{
  font-size: .9rem;
}
.index-teacher-tit p{
  font-size: .75rem;
  margin-top: .15rem;
}
.index-teacher-inner{
  height: 10rem;
  margin-top: .75rem;
}
.index-teacher-item{
  height: 10rem;
  position: relative;
  border-radius: .25rem;
  overflow: hidden;
  transform: scale(0.85);
  transition: .3s;
}
.index-teacher-item__img{
  position: relative;
  width: 100%;
  height: 100%;
}
.index-teacher-item__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-slide-active .index-teacher-item{
  transform: scale(1);
}
.index-teacher-item__name{
  width: 88%;
  height: 1.8rem;
  opacity: 0;
  transition: .3s;
  line-height: 1.8rem;
  color:#fff;
  text-align: center;
  position: absolute;
  bottom: 0;
  left:0;
  right: 0;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: .25rem;
  bottom: .5rem;
  font-size: .8rem;
}
.swiper-slide-active .index-teacher-item__name{
  opacity: 1;
}
.index-news-item{
  display: flex;
  padding: .75rem 0;
}
.index-news-item .images-box{
  width: 6.5rem;
  height: 3.64rem;
  border-radius: .25rem;
  overflow: hidden;
}
.index-news-item .images-info{
  margin-left: .5rem;
  flex: 1;
}
.index-news-item .name{
  font-size: 0.8rem;
  height: 2.2rem;
  line-height: 1.1rem;
  overflow: hidden;
  font-weight: 500;
}
.index-news-item .desc{
  color:#999;
  margin-top: .5rem;
}
.index-news-item .desc span + span{
  margin-left:.75rem;
}