* {
  padding: 0;
  margin: 0;
}
html,
body {
  background: #000;
  height: 100%;
  max-width: 750px;
  margin: 0 auto;
}
.hide {
  display: none;
}
img {
  display: block;
  width: 100%;
  margin: 0 auto;
}
.wrapper {
  position: relative;
  width: 46.875rem;
  height: 100%;
  overflow-y: auto;
}
.sl-part {
  position: relative;
  overflow: hidden;
}
.part-content {
  position: relative;
  overflow: hidden;
}
.page-bg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 46.875rem;
}
.btn-video {
  position: absolute;
  z-index: 801;
  width: 14.8125rem; /* btn-video.png 237/16 */
  height: 9.8125rem; /* btn-video.png 157/16 */
  top: 54rem;
  right: 0rem;
  background: url(../img/first/btn-video.png) top / 100% no-repeat;
}
.sl-logo-1 {
  position: absolute;
  width: 10rem;
  top: 0;
  left: 10rem;
}
/* part1 */
.part1 .kv {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.part1 .kv img {
  width: 46.875rem;
  margin: 0 auto;
}
.part1 .sl-logo {
  position: absolute;
  background: url(../img/first/logo.png) top/100% no-repeat;
  width: 26.25rem; /* logo.png 420/16 */
  height: 8.5rem; /* logo.png 136/16 */
  left: 1.4rem;
  top: 0rem;
  /* background-size: contain; */
}
.part1 .btn-home {
  background: url(../img/first/btn-home.png) top/100% no-repeat;
  width: 15.3125rem; /* btn-home.png 245/16 */
  height: 6.625rem; /* btn-home.png 106/16 */
  position: absolute;
  top: 0.5rem;
  right: 1rem;
}
.part1 .sl-slogan {
  position: relative;
  width: 48.4375rem;
  height: 38.625rem;
  /* height: 6.625rem; */
  margin: 28.875rem auto 0;
}
.part1 .btn-download {
  background: url(../img/first/download.png) top/100% no-repeat;
  width: 16.25rem; /* download.png 260/16 */
  height: 6.4375rem; /* download.png 103/16 */
}
.part1 .sl-download {
  position: relative;
  display: block;
  background: url(../img/first/download.png) top/100% no-repeat;
  width: 16.25rem; /* download.png 260/16 */
  height: 6.4375rem; /* download.png 103/16 */
  margin-top: 1.125rem;
  z-index: 1;
  margin-bottom: 0rem;
}
.part1 .taptapD {
  position: relative;
  display: block;
  background: url(../img/first/tapD.png) top/100% no-repeat;
  width: 16.25rem; /* tapD.png 260/16 */
  height: 6.4375rem; /* tapD.png 103/16 */
  z-index: 1;
  margin-top: -1rem;
}
.mobileDown {
  display: flex;
  justify-content: space-evenly;
  box-sizing: border-box;
  position: absolute;
  bottom: 7.5rem;
  left: 16.5rem;
  flex-direction: column;
  width: 16.875rem;
  z-index: 800;
}
.mobileDown a {
  -webkit-tap-highlight-color: transparent;
}
.xin {
}
.xin img {
  width: 98%;
}
.xin .title {
  text-indent: -9999px;
  overflow: hidden;
  background: url(../img/2屏/新主线剧情上映.png) top/100% no-repeat;
  width: 17.75rem;
  height: 8.5625rem;
  margin: 3rem auto 0;
}
.wan {
  height: 60rem;
}
.wan .title {
  text-indent: -9999px;
  overflow: hidden;
  background: url(../img/4屏/全新玩法.png) top/100% no-repeat;
  width: 18.375rem;
  height: 7.0625rem;
  margin: 4rem auto 0;
}
.wan-top {
  width: 44.5rem;
  height: 34.5rem;
  position: relative;
  margin: 0 auto;
}
.wan-top-1-img1 {
  position: absolute;
  width: 100%;
  z-index: 100;
  left: 0.8rem;
}
.wan-top-1-img2 {
  position: absolute;
  left: 1.8rem;
  width: 40.8rem;
  top: 0.9rem;
}
.wan-bottom {
  display: flex;
  justify-content: space-evenly;
}
.wan-bottom img {
  width: 14.25rem;
}
/* part3 */
.part3 {
  margin-top: 3rem;
}
.part3 .title {
  text-indent: -9999px;
  overflow: hidden;
  background: url(../img/second/p3-title.png) top/100% no-repeat;
  /* width: 31.875rem; */
  height: 16.4375rem; /* p3-title.png 263/16 */
  position: relative;
}
.part3 .part-content {
  height: 105rem;
  margin-top: -6.125rem;
}
.part3 .wrap-rookie {
  position: absolute;
  top: 0rem;
  left: 0;
  width: 100%;
}
.part3 .wrap-rookie img {
  width: 100%;
  margin-top: -1rem;
  /* margin-left: 1rem; */
}
.part3 .wrap-switch {
  position: absolute;
  top: 4.5rem;
  right: 2rem;
  display: flex;
  z-index: 20;
}
.part3 .wrap-switch .switch {
  width: 6rem;
  height: 2.25rem;
  padding: 1rem 0;
}
.part3 .wrap-switch .switch1 {
  background: url(../img/second/d1.png) center/100% no-repeat;
}
.part3 .wrap-switch .switch1.curr {
  background: url(../img/second/d1c.png) center/100% no-repeat;
}
.part3 .wrap-switch .switch2 {
  background: url(../img/second/d2.png) center/100% no-repeat;
  position: relative;
  left: 1rem;
}
.part3 .wrap-switch .switch2.curr {
  background: url(../img/second/d2c.png) center/100% no-repeat;
}
.part3 .switch-tips {
  color: rgb(194 199 202);
  font-size: 1rem;
  position: absolute;
  top: -1rem;
  left: 0;
}
.part3 .wrap-media {
  position: absolute;
  display: flex;
  justify-content: left;
  align-items: center;
  left: 3.8rem;
  bottom: 35.8rem;
  height: 6.0625rem;
  z-index: 20;
}
.part3 .wrap-media .media-audio1 {
  width: 6.625rem; /* z.png 106/16 */
  height: 2.9375rem; /* z.png 47/16 */
  background: url(../img/second/z.png) top/100% no-repeat;
  background-size: 100%;
  position: relative;
  left: 1rem;
}
.part3 .wrap-media .media-audio1.curr {
  background: url(../img/second/z.gif) top/100% no-repeat;
  width: 6.625rem; /* z.png 106/16 */
  height: 2.9375rem; /* z.png 47/16 */
}
.part3 .wrap-media .media-audio2 {
  width: 6.625rem; /* y.png 106/16 */
  height: 2.9375rem; /* y.png 47/16 */
  background: url(../img/second/y.png) top/100% no-repeat;
  background-size: 100%;
}
.part3 .wrap-media .media-audio2.curr {
  background: url(../img/second/y.gif) top/100% no-repeat;
  width: 6.625rem; /* z.png 106/16 */
  height: 2.9375rem; /* z.png 47/16 */
}
.part3 .wrap-media .media-video1 {
  background: url(../img/second/rookie1-video-btn.png) top/100% no-repeat;
  width: 7.125rem; /* rookie1-video-btn.png 114/16 */
  height: 7.125rem; /* rookie1-video-btn.png 114/16 */
  position: absolute;
  bottom: -9em;
  left: 30rem;
  z-index: 10;
}
.part3 .wrap-media .media-video2 {
  background: url(../img/second/rookie2-video-btn.png) top / 100% no-repeat;
  width: 7.125rem; /* rookie2-video-btn.png 114/16 */
  height: 7.125rem; /* rookie2-video-btn.png 114/16 */
  position: absolute;
  bottom: -13.5rem;
  left: 26rem;
  z-index: 10;
}
.part3 .wrap-media .media-video3 {
  display: none;
}
.part3 .wrap-state {
  position: absolute;
  pointer-events: none;
  bottom: 14rem;
  z-index: 0;
  box-sizing: border-box;
  padding-left: 0;
  left: 3rem;
}
.part3 .wrap-state .rookie1-text {
  width: 23.25rem; /* 1text.png 372/16 */
  /* height: 22.625rem; */
  margin: auto;
  margin-top: 2rem;
}
.rookie2 {
  /* transform: scale(1.3); */
}
.part3 .wrap-state .rookie2-text {
  width: 23.25rem; /* 2text.png 372/16 */
  /* height: 22.625rem; */
  margin-top: 2rem;
}
.part3 .wrap-state .rookie3-text {
  width: 41.25rem;
  /* height: 22.625rem; */
  margin-top: 2rem;
}
.part3 .wrap-tab {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0rem;
  width: 46.875rem;
  margin: 0 auto;
  box-sizing: border-box;
  /* left: 0.7rem; */
}
.part3 .wrap-tab .tab {
  width: 9.9375rem;
  height: 11.375rem;
  margin: 0 2rem;
}
.part3 .wrap-tab .tab1 {
  background: url(../img/second/h1.png) top/100%no-repeat;
  width: 10.9375rem; /* h1.png 175/16 */
  height: 14.625rem; /* h1.png 234/16 */
}
.part3 .wrap-tab .tab1.curr {
  background: url(../img/second/h1c.png) top/100%no-repeat;
  width: 10.9375rem; /* h1c.png 175/16 */
  height: 14.625rem; /* h1c.png 234/16 */
}
.part3 .wrap-tab .tab2 {
  background: url(../img/second/h2.png) top/100%no-repeat;
  width: 10.9375rem; /* h2.png 175/16 */
  height: 14.625rem; /* h2.png 234/16 */
}
.part3 .wrap-tab .tab2.curr {
  background: url(../img/second/h2c.png) top/100%no-repeat;
  width: 10.9375rem; /* h2c.png 175/16 */
  height: 14.625rem; /* h2c.png 234/16 */
}
.part3 .wrap-tab .tab3 {
  background: url(../img/second/h3.png) top/100%no-repeat;
}
.part3 .wrap-tab .tab3.curr {
  background: url(../img/second/h3c.png) top/100%no-repeat;
}
.part3 .wrap-tab .tab4 {
  background: url(../img/second/h4.png) top/100%no-repeat;
}
.part3 .wrap-tab .tab4.curr {
  background: url(../img/second/h4c.png) top/100%no-repeat;
}
/* .part5 */
.part5 {
  margin-top: 1rem;
}
.wam-bg {
  position: absolute;
  top: -3rem;
  left: 0;
  background: url(../img/4屏/垫.png) top/100% no-repeat;
  width: 46.875rem;
  height: 36.4375rem;
}
.part4 .title {
  text-indent: -9999px;
  overflow: hidden;
  background: url(../img/four/t4.png) top/100% no-repeat;
  width: 31.8125rem;
  height: 15.125rem;
  margin: 0rem auto 0;
  position: relative;
  top: 0rem;
}
.part4 #newSwiper {
  width: 100%;
}
.part4 .new-swiper-tab {
  display: flex;
  justify-content: center;
  position: relative;
  top: 0rem;
  left: -1.5rem;
}
.part4 .new-swiper-tab .tab {
  margin: 0 1rem;
}
.part4 #newSwiper p {
  font-size: 1rem;
  color: #969696;
  right: 4rem;
  position: absolute;
  top: 21.5rem;
  z-index: 2;
}
.part4 .new-swiper-tab .tab1 {
  background: url(../img/four/1.png) bottom right/100% no-repeat;
  width: 15.875rem;
  height: 8.0625rem;
  position: relative;
  top: 0.5rem;
}
.part4 .new-swiper-tab .tab1.curr {
  background: url(../img/four/1c.png) bottom right/100% no-repeat;
  width: 15.875rem;
  position: relative;
  top: 0.5rem;
}
.part4 .new-swiper-tab .tab2 {
  background: url(../img/four/2.png) bottom right/100% no-repeat;
  width: 15.875rem;
  height: 8.0625rem;
  position: relative;
  top: 0.5rem;
  left: 2.5rem;
}
.part4 .new-swiper-tab .tab2.curr {
  background: url(../img/four/2c.png) bottom right/100% no-repeat;
  width: 15.875rem;
  position: relative;
  top: 0.5rem;
  left: 2.5rem;
}
.part4 .new-swiper-tab .tab3 {
  background: url(../img/four/3.png) bottom right/100% no-repeat;
  width: 12.0625rem;
  height: 4.25rem;
}
.part4 .new-swiper-tab .tab3.curr {
  background: url(../img/four/3c.png) bottom right/100% no-repeat;
}
.part5 .title {
  text-indent: -9999px;
  overflow: hidden;
  background: url(../img/five/p5-title.png) top/100% no-repeat;
  /* width: 31.8125rem; */
  height: 16.4375rem; /* p5-title.png 263/16 */
  margin: 0 auto;
  /* left: -2rem; */
  position: relative;
}
#featureSwiper {
  position: relative;
  width: 44.125rem;
  margin: 1.5rem auto 0;
  box-sizing: border-box;
  overflow: hidden;
}
#featureSwiper .swiper-slide img {
  display: block;
  width: 100%;
  /* left: 2rem; */
  position: relative;
}
.part5 .feature-prev {
  position: absolute;
  left: 1rem;
  top: 11rem;
  background: url(../img/five/p5-prev.png) top/100% no-repeat;
  width: 2.9375rem;
  height: 3.875rem;
  background-size: contain;
  z-index: 100;
}
/* .part5 .feature-prev:focus {
  background: url(../img/p5-prev-active.png) top/100% no-repeat;
} */
.part5 .feature-next {
  position: absolute;
  right: 1rem;
  top: 11rem;
  background: url(../img/five/p5-next.png) top/100% no-repeat;
  width: 2.9375rem;
  height: 3.875rem;
  background-size: contain;
  z-index: 100;
}
/* .part5 .feature-next:focus {
  background: url(../img/p5-next-active.png) top/100% no-repeat;
} */
.part5 .feature-tab img {
  filter: brightness(0.3);
  transition: opacity 0.3s;
  display: block;
  width: 100%;
  pointer-events: none;
}
.part5 .feature-tab .curr img {
  filter: brightness(1);
}
.part5 .feature-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: auto;
  margin-top: 0;
  width: 90%;
}
.part5 .feature-tab .tab1 {
  width: 9.625rem; /* 1c.png 154/16 */
  height: 6rem; /* 1c.png 96/16 */
}
.part5 .feature-tab .tab2 {
  width: 9.625rem; /* 2c.png 154/16 */
  height: 6rem; /* 2c.png 96/16 */
}
.part5 .feature-tab .tab3 {
  width: 9.625rem; /* 3c.png 154/16 */
  height: 6rem; /* 3c.png 96/16 */
}
.part5 .feature-tab .tab4 {
  width: 9.625rem; /* 4c.png 154/16 */
  height: 6rem; /* 4c.png 96/16 */
}
.part5 .feature-tab .tab5 {
  width: 9.625rem; /* 5c.png 154/16 */
  height: 6rem; /* 5c.png 96/16 */
}
.part5 .feature-tab .tab6 {
  width: 9.625rem; /* 5c.png 154/16 */
  height: 6rem; /* 5c.png 96/16 */
}
.feature-tab .tab {
  margin: 0 -0.75rem;
}
/* part6 */
.part6 .title {
  text-indent: -9999px;
  overflow: hidden;
  background: url(../img/fourth/p6-title.png) top/100% no-repeat;
  /* width: 31.8125rem; */
  height: 16.4375rem; /* p6-title.png 263/16 */
  margin: auto 0;
  position: relative;
  left: 0;
  top: 3rem;
}
.part6 {
  margin-top: -2rem;
  margin-bottom: 5rem;
}
.part6 .part-content {
  margin-top: -1rem;
  margin-bottom: 0;
  box-sizing: border-box;
}
.part6 .link-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.part6 .link {
  position: relative;
  width: 10.5625rem; /* fourth images 169/16 */
  margin: 1.5rem 1rem 0 2rem;
}
.part6 .link img {
  width: 100%;
  display: block;
}

.sl-footer {
  position: relative;
  background-color: #000;
  padding: 3.25rem 0;
  font-size: 0.9rem;
  color: #8c8d8c;
  text-align: center;
  line-height: 1.5;
  top: 1rem;
  /* margin-top: 3.6rem; */
}
.sl-footer a {
  text-decoration: none;
  color: #8c8d8c;
}
.sl-footer .about-box {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin-bottom: 1rem;
}
.sl-footer .about-box a {
  color: #fff;
  font-size: 1.125rem;
  text-decoration: none;
  margin: 0 1.75rem;
}

.sl-footer .logo-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.875rem;
}
.sl-footer .logo-box .footer-logo {
  height: 4.5625rem;
  width: 23.5rem;
}
.sl-footer .logo-box .footer-tips {
  height: 4.9375rem;
  margin-left: -5rem;
  width: 3.875rem;
}

.pop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}
.pop-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.8;
}
.pop-content {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 100%;
}
.pop-tips-content img {
  display: block;
  width: 43.6875rem;
  height: 66.375rem;
}
.pop-video video {
  width: 90%;
  margin: 0 auto;
}
.loading {
  position: absolute;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}
.wxImg {
  width: 30%;
}
.part1-tishi {
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  left: 0;
  right: 0;
  margin: 0 auto 0;
  font-size: 0.9rem;
}

.part1-tishi a {
  color: rgba(255, 255, 255, 0.8);
}
.logo-xiangzhong {
  width: 4.1875rem;
  height: 4.8125rem;
  position: absolute;
  left: 11.5rem;
  top: 0.8rem;
}

.part4 .gif1 {
  position: absolute;
  top: 2.2rem;
  width: 88%;
  left: 2.6rem;
}
#newSwiper2 {
  position: absolute;
  top: 0;
  width: 42rem;
  left: 0;
}
.part4 .new1 {
  position: relative;
  z-index: 1;
}
.mg-icon {
  z-index: 801;
  position: absolute;
  width: 9.875rem; /* mg.png 158/16 */
  height: 12rem; /* mg.png 192/16 */
  left: 6rem;
  bottom: 8.5rem;
}
.rookie-name-1 .wrap-state {
  /* left: 4rem; */
}
.rookie-name-1 .rookie1-text {
  /* width: 37.5625rem;
  height: 18.25rem; */
}
.rookie-name-1 .wrap-rookie img {
  /* margin-left: 3rem;
  margin-top: 2rem; */
}
.rookie-name-1 .media-video2 {
  bottom: -9rem !important;
  left: 30rem !important;
}