@font-face {
  font-family: "sys";
  src: url(../font/SOURCEHANSERIFCN-REGULAR.OTF);
}
.wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  font-size: .24rem;
  color: #fdc;
  background: #dee5f1;
}

.mainSwiper {
  width: 100%;
  height: 100%;
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.content-box {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.nav{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: .94rem;
  background: rgba(0, 0, 0, .6);
  z-index: 100;
  padding: 0 .23rem;
}
.nav.white{
  background: #f0f3f9;
}
.nav.white .name1{
  color: #4f67a7;
}
.nav.white .name2{
  color: #4f67a7;
}
.nav.white .btn-expand{
  background: url(../images/m/btn-expand2.png) no-repeat center/100%;
}
.nav .logo{
  width: 1.11rem;
  height: 1.13rem;
  float: left;
}
.nav .nav-name{
  float: left;
  padding-top: .06rem;
  padding-left: .21rem;
}
.nav .name1{
  font-size: .33rem;
  color: #ffffff;
  font-family: "sys";
}
.nav .name2{
  font-size: .2rem;
  color: #ffffff;
  font-family: "sys";
}
.nav .btn-expand{
  float: right;
  display: block;
  width: .48rem;
  height: .4rem;
  margin-top: .2rem;
  background: url(../images/m/btn-expand.png) no-repeat center/100%;
}
.navlist{
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, .8);
}
.navlist ul{
  position: absolute;
  height: 11rem;
  left: 0;
  top: 50%;
  width: 100%;
  transform: translate(0,-50%);
}
.navlist .close{
  width: 0.89rem;
  height: 0.89rem;
  background: url(../images/m/close.png) no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  right:.2rem;
}
.navlist li{
  width: 100%;
  height: .68rem;
  position: relative;
}
.navlist li img{
  display: block;
  margin: 0 auto;
  height: .68rem;
  margin-top: 1.16rem;
}
.navlist .on::after{
  content: "";
  width: 1.47rem;
  height: 1.45rem;
  background: url(../images/m/nav-act.png) no-repeat center / 100% 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.navlist .btn-box{
  width: 4.04rem;
  margin: 0 auto;
  height: .84rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .66rem;
}
.navlist .btn-box .taptap{
  width: 1.1rem;
  height: .56rem;
  background: url(../images/m/nav-taptap.png) no-repeat center/100%;
  display: block;
}
.navlist .btn-box .bilibili{
  width: .88rem;
  height: .84rem;
  background: url(../images/m/nav-blibli.png) no-repeat center/100%;
  display: block;
}

.slide1 {
  background: url(../images/m/bg1.jpg) no-repeat center top/cover;
}
.kv-video{
  object-fit: cover;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 1s ease;
  z-index: 1;
}
.kv-video.top{
  z-index: 2;
}
.slide1 .content-box {
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  position: absolute;
  z-index: 2;
  height: 11rem;
}
.slide1 .btn-joinme{
  width: 2.28rem;
  height: 2.54rem;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0,-50%);
  display: block;
  z-index: 2;
  background: url(../images/m/btn-joinme.png) no-repeat center/100%;
}
.slide1 .btn-play{
  width: 2.94rem;
  height: 2.94rem;
  display: block;
  background: url(../images/m/btn-play.png) no-repeat center/100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-100%);
}
.slide1 .content-box .agehint{
  width: .71rem;
  height: .9rem;
  position: absolute;
  left: .25rem;
  top: .5rem;
}
.slide1 .btn-taptap{
  width: 2.68rem;
  height: .82rem;
  display: block;
  transform: scale(.9);

  background: url(../images/btn-taps.png) no-repeat center/100%;
}
.slide1 .btn-ios{
   width: 2.68rem;
  height: .82rem;
  display: block;
  transform: scale(.9);
  background: url(../images/btn-ios.png) no-repeat center/100%;
}
.slide1 .btn-box{
  position: absolute;
  bottom: 0;
  left: 50%;
  height: .82rem;
  transform: translate(-50%);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide1 .btn-an{
   width: 2.68rem;
  height: .82rem;
  display: block;
  transform: scale(.9);
  background: url(../images/btn-an.png) no-repeat center/100%;
}
.slide2{
  background: url(../images/m/bg2.png) no-repeat center/cover;
}

.slide2 .content-box{
  width: 100%;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  position: absolute;
  z-index: 2;
  height: 11rem;
  overflow: visible;
}
.slide2 .role-swiper{
  width: 100%;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  position: absolute;
  z-index: 2;
  height: 11rem;
  overflow: visible;
}
.slide2 .people{
  position: absolute;
  height: 8.7rem;
  left: 50%;
  top: -.28rem;
  transform: translate(-50%,0);
  opacity: 0;
}

.slide2 .people-name-bg{
  width: 5.14rem;
  height: .67rem;
  background: url(../images/m/people-name-bg.png) no-repeat center/100%;
  position: absolute;
  left: .26rem;
  top: 6.63rem;
}
.slide2 .role-name{
  height: .7rem;
  margin: 0 auto;
  display: block;
  margin-top: -.2rem;
}
.slide2 .content{
  width: 6.92rem;
  height: 2rem;
  position: absolute;
  top: 7.54rem;
  left: 50%;
  transform: translate(-50%);
}
.slide2 .content .divider{
  width: 6.88rem;
  margin: 0 auto;
}
.slide2 .content .content-role{
  width: 6.36rem;
  height: 1.62rem;
  margin: 0 auto;
  overflow: auto;
  font-family: "sys";
  font-size: .2rem;
  color: #2a4370;
  margin-top: .1rem;
}
.slide2 .slide2-swiper{
  width: 6.95rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  background: url(../images/m/divider1.png) no-repeat center/100%;
  overflow: hidden; /* ���س������� */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.slide2 .swiper-button-prev{
  background: url(../images/m/next.png) no-repeat center/100%;
  width: .39rem;
  height: .63rem;
  left: 0;
  top: 62%;
}
.slide2 .swiper-button-next{
  background: url(../images/m/next.png) no-repeat center/100%;
  width: .39rem;
  height: .63rem;
  transform: rotate(180deg);
  right: 0;
  top: 62%;
}
.slide2 .slide2-swiper img{
  display: block;
  margin: 0 auto;
  filter: brightness(0.5);
  opacity: 0;
  transition: all .1s;
}

.slide2 .slide2-swiper .andalisa{
  width: 1.05rem;
  height: 1.27rem;
  margin-top: .2rem;
}
.slide2 .slide2-swiper .sesia{
  width: 1.39rem;
  height: 1.26rem;
  margin-top: .2rem;
}
.slide2 .slide2-swiper .sophia{
  width: 1.17rem;
  height: 1.26rem;
  margin-top: .2rem;
}
.slide2 .slide2-swiper .avia{
  width: 1.17rem;
  height: 1.46rem;
}
.slide2 .slide2-swiper .bernie{
  width: 1.39rem;
  height: 1.26rem;
  margin-top: .2rem;
}
.slide2 .slide2-swiper .du{
  width: 1.23rem;
  height: 1.43rem;
  margin-top: .05rem;
}

.slide2 .swiper-slide-active img{
  filter:brightness(1);
  opacity: 1;
}
.slide2 .swiper-slide-next img{
  opacity: 1;
}
.slide2 .swiper-slide-prev img{
  opacity: 1;
}



.slide3 {
  background: url(../images/m/bg3.png) no-repeat center/cover;
}

.slide3 .content-box{
  width: 100%;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  position: absolute;
  z-index: 2;
  height: 11rem;
}
.slide3 .title{
  width: 6.05rem;
  height: 1.14rem;
  margin: 0 auto;
  display: block;
}

.slide3 .slide3-swiper{
  width: 100%;
}
.slide3 .slide3-swiper img{
  width: 100%;
}
.slide3  .swiper-pagination-bullets{
  width: 2.4rem;
  position: absolute;
  bottom: 0;
  left: 1.37rem;
}
.slide3 .swiper-pagination-bullet{
  width: .31rem;
  height: .28rem;
  background: url(../images/m/slide3-bull.png) no-repeat center/100%;
  opacity: 1;
}
.slide3 .swiper-pagination-bullet.swiper-pagination-bullet-active{
  width: .31rem;
  height: .28rem;
  background: url(../images/m/slide3-bull-on.png) no-repeat center/100%;
  opacity: 1;
}

.slide4 {
  background: url(../images/m/bg4.png) no-repeat center / cover;
}
.slide4  .content-box{
  width: 100%;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  position: absolute;
  z-index: 2;
  /* height: 11rem; */
}
.slide4 .slide4-swiper{
  width: 7.32rem;
  height: 4.2rem;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.slide4 .slide4-swiper img{
  width: 7.32rem;
  height: 4.2rem;
  margin: 0 auto;
}
.slide4  .swiper-slide::before {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../images/news-banner-box.png) no-repeat center / 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.slide4 .swiper-pagination{
  width: 1.1rem;
  right: .45rem;
  bottom: .23rem;
  left: auto;
}
.slide4 .swiper-pagination-bullet{
  width: .17rem;
  height: .16rem;
  background: url(../images/m/slide4-bull.png) no-repeat center/100%;
  opacity: 1;
}
.slide4 .swiper-pagination-bullet.swiper-pagination-bullet-active{
  width: .17rem;
  height: .16rem;
  background: url(../images/m/slide4-bull-on.png) no-repeat center/100%;
  opacity: 1;
}
.slide4 .title{
  width: 7.16rem;
  margin: 0 auto;
  margin-top: .5rem;
  display: block;
}
.slide4 .news-list{
  width: 7rem;
  margin: 0 auto;
}
.slide4 .news-list li{
  width: 100%;
  height: .67rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide4 .news-list li a{
  width: 100%;
  height: .67rem;
  line-height: .67rem;
  border-bottom: 0.02rem dashed black;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .2rem;
}
.slide4 .tag{
  width: .59rem;
  height: .24rem;
  background: url(../images/m/slide4-tag-bg.png) no-repeat center/100%;
  font-size: .18rem;
  line-height: .2rem;
  color: #ffffff;
  text-align: center;
}
.slide4 .sTitle {
  width: 3.98rem;
  color: #6b7084;
  font-size: .2rem;
  white-space: nowrap; /* ��ֹ���� */
  overflow: hidden; /* ����������� */
  text-overflow: ellipsis; /* ���������ʾʡ�Ժ� */
}



.slide5 {
  background: url(../images/m/bg5.png) no-repeat center / cover;
}

.slide5 .content-box{
  width: 100%;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  position: absolute;
  z-index: 2;
}
.slide5 .title{
  width: 6.5rem;
  margin: 0 auto;
  display: block;
}
.slide5 .one-box{
  width: 6.06rem;
  height: 4.58rem;
  margin: 0 auto;
  background-color: #ffffff;
  border: 0.02rem solid #99afda;
  border-radius: .1rem;
  margin-top: .54rem;
  display: block;
}
.slide5 .one-box .img{
  width: 5.94rem;
  height: 3.37rem;
  position: relative;
  margin: 0 auto;
  margin-top: .05rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide5 .one-box img{
  width: 99%;
  height: 99%;
}
.slide5 .one-box .img::before {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../images/m/border.png) no-repeat center / 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.slide5 .one-box  .sTitle{
  width: 5.67rem;
  margin: 0 auto;
  font-size: .28rem;
  color: #6b7084;
  white-space: nowrap; /* ��ֹ���� */
  overflow: hidden; /* ����������� */
  text-overflow: ellipsis; /* ���������ʾʡ�Ժ� */
  margin-top: .22rem;
  font-weight: 900;
}
.slide5 .one-box  .desc{
  width: 5.67rem;
  margin: 0 auto;
  font-size: .22rem;
  color: #6b7084;
  white-space: nowrap; /* ��ֹ���� */
  overflow: hidden; /* ����������� */
  text-overflow: ellipsis; /* ���������ʾʡ�Ժ� */
  /* margin-top: .16rem; */
}
.slide5 .list-box{
  width: 6.06rem;
  margin: 0 auto;
  margin-top: .32rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.slide5 .listbox{
  width: 2.9rem;
  height: 2.3rem;
  background-color: #ffffff;
  border: 0.02rem solid #99afda;
  border-radius: .1rem;
}
.slide5 .listbox .img{
  width: 2.87rem;
  height: 1.62rem;
  position: relative;
  margin: 0 auto;
  margin-top: .05rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide5 .listbox img{
  width: 99%;
  height: 99%;
}
.slide5 .listbox .img::before {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../images/m/border.png) no-repeat center / 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.slide5 .listbox  .sTitle{
  width: 2.66rem;
  margin: 0 auto;
  font-size: .13rem;
  color: #6b7084;
  white-space: nowrap; /* ��ֹ���� */
  overflow: hidden; /* ����������� */
  text-overflow: ellipsis; /* ���������ʾʡ�Ժ� */
  margin-top: .11rem;
  font-weight: 900;
}
.slide5 .listbox  .desc{
  width: 2.66rem;
  margin: 0 auto;
  font-size: .11rem;
  color: #6b7084;
  white-space: nowrap; /* ��ֹ���� */
  overflow: hidden; /* ����������� */
  text-overflow: ellipsis; /* ���������ʾʡ�Ժ� */
  /* margin-top: .16rem; */
}

.slide5 .look-more{
  width: 2.15rem;
  height: .54rem;
  display: block;
  margin: 0 auto;
  background: url(../images/m/btn-look-more.png) no-repeat center/100%;
  margin-top: .58rem;
}

.section_foot{
  height: auto !important;
}

#afooter {
  position: relative;
  background: #000;
  color: #ffffff;
  text-align: center;
  font-size: 0.2rem;
  height: 4.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 .2rem;
}
#afooter div{
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  padding-bottom: 0.2rem;
}
#afooter p{
  text-align: center;
  padding: 0.05rem 0;
}
#afooter p img{
  width: .2rem;
  height: .2rem;
}
#afooter a{
  color: #ffffff;
}
#afooter img{
  width: 2.62rem;
}
#afooter .taptap{
  width: .83rem;
  height: .22rem;
  background: url(../images/m/taptap.png) no-repeat center/100%;
}
#afooter .bilibili{
  width: .53rem;
  height: .49rem;
  background: url(../images/m/bilibili.png) no-repeat center/100%;
}

.dia-close{
  width: 0.89rem;
  height: 0.89rem;
  background: url(../images/m/close.png) no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: -0.89rem;
  right: -0.89rem;
}



.dia-video{
  width: 7.03rem;
  height: 4rem;
  margin: 0 auto;
}
.dia-video::before {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../images/m/play-bg.png) no-repeat center / 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.dia-video .dia-close{
  top: -0.89rem;
  right:0;
  z-index: 1;
}

#videoContainer{
  width: 100%;
  height: 100%;
}

.scrollbar{
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0);
  pointer-events: auto;
}
  
.scrollbar::-webkit-scrollbar {
  width: 0.1rem;
}
  
.scrollbar::-webkit-scrollbar-track {
  background-color: #040404;
}
  
.scrollbar::-webkit-scrollbar-thumb {
  background-color: #c86;
   background: linear-gradient(to right, #ffe49a, #ffce5b);
}

.delis{
  width: 100%;
  background: url(../images/m/delis-bg.png) center/100%;
  padding-top: 1.44rem;
  overflow-y: auto;
  height: 100%;
  overflow-x: hidden;
}
.delis .join-img{
  width: 6.88rem;
  display: block;
  margin: 0 auto;
  margin-bottom: .6rem;
}
.delis .return{
  width: .84rem;
  height: .84rem;
  display: block;
  margin-left: .22rem;
  background: url(../images/m/return.png) no-repeat center/100%;
}
.delis .news{
  width: 3.09rem;
  margin: 0 auto;
  display: block;
}
.delis .sTitle{
  width: 6rem;
  margin: 0 auto;
  text-align: center;
  font-size: .47rem;
  color: #465ca3;
  font-family: "sys";
  font-weight: 900;
  margin-top: -.2rem;
}
.divider2{
  width: 7.31rem;
  display: block;
  margin: 0 auto;
  margin-top: .25rem;
}
.details{
  width: 6.88rem;
  margin: 0 auto;
  margin-top: .56rem;
  margin-bottom: 1.5rem;
}
.details img{
  width: 6.88rem;
  display: block;
  margin: .6rem auto;
}
.details video{
  width: 6.88rem;
  display: block;
  margin: .6rem auto;
}
.details p{
  font-size: .29rem;
  color: #323232;
  line-height: .7rem;
}

.details p.tips{
  margin-top: vw(-80);
  text-align: center;
  font-size: vw(24);
}

.details .color1{
  color: #fe9b0c;
}
.details .color2{
  color: #000;
  font-weight: 900;
}
.details .colorred{
    color: #ff0000;
}
.details h5{
  font-weight: bold;
  font-size: .34rem;
  color: #1e1e1e;
  margin-top:.3rem;
  margin-bottom: .4rem;
}
.details h6{
  font-weight: bold;
  font-size: .34rem;
  color: #1e1e1e;
  text-align: center;
  margin-top:.3rem;
  margin-bottom: .4rem;
}
.details a{
  font-size: vw(33);
  color: #2c02ff;
  text-decoration: underline;
  word-break: break-all;
}
.dia-hint{
  width: 4.11rem;
  height: 2.21rem;
  transform: scale(1.3);
  background: url(../images/dia-bg.png) no-repeat center/100%;
}
.dia-hint .dia-close{
  display: block;
  width: .2rem;
  height: .2rem;
  top: -.4rem;
  right: .2rem;
  background: url(../images/dia-close.png) no-repeat center/100%;
}
.dia-hint p{
  font-size: .2rem;
  width: 3.62rem;
  margin: 0 auto;
  color: #fff;
  line-height: .24rem;
  text-align: center;
  margin-top: .2rem;
}
#diaHint2 p{
  font-size: .2rem;
  width: 3.62rem;
  margin: 0 auto;
  color: #fff;
  line-height: .24rem;
  text-align: center;
  margin-top: .85rem;
}