* {
  margin: 0;
  padding: 0;
}
i {
  display: block;
  font-style: normal;
}
body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container {
  background-color: #000;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
  opacity: 0;
}
.container .nav_box {
  width: 6.56rem;
  height: 0.84rem;
  background: url('../img/page1/nav_bg.png');
  background-size: 100% 100%;
  position: absolute;
  top: 0rem;
  z-index: 8;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .nav_box .link_btn {
  display: flex;
  align-items: center;
}
.container .nav_box .link_btn a {
  transform: translateY(-0.12rem);
  font-size: 0.24rem;
  color: #FFFFFF;
  text-decoration: none;
}
.container .nav_box .link_btn .facebook {
  margin: 0 0.26rem;
}
.container .nav_box .link_btn a:hover {
  opacity: 1;
}
.container .nav_box .link_btn .nav_menu {
  display: flex;
  align-items: center;
}
.container .nav_box .link_btn .nav_menu a:nth-child(2) {
  margin: 0 0.26rem;
}
.container .recharge_btn {
  width: 1.7rem;
  height: 0.56rem;
  position: fixed;
  top: 0.2rem;
  right: 0.2rem;
  z-index: 8;
  cursor: pointer;
  display: none;
  justify-content: center;
  align-items: center;
}
.container .recharge_btn a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
}
.container .recharge_btn img {
  width: 100%;
  height: 100%;
}
.container .recharge_btn .recharge_ani {
  width: 4rem;
  height: 2rem;
  animation: rechargeAni 3s infinite linear;
  position: absolute;
  transform: scale(0.66);
  pointer-events: none;
  background: url('../img/page1/recharge/ios1.png');
  background-size: 100% 100%;
}
.container .recharge_btn .recharge_ani_1 {
  opacity: 0;
  z-index: -1;
  background: url('../img/page1/recharge/ios1.png'), url('../img/page1/recharge/ios2.png'), url('../img/page1/recharge/ios3.png'), url('../img/page1/recharge/ios4.png'), url('../img/page1/recharge/ios5.png'), url('../img/page1/recharge/ios6.png'), url('../img/page1/recharge/ios7.png'), url('../img/page1/recharge/ios8.png'), url('../img/page1/recharge/ios9.png'), url('../img/page1/recharge/ios10.png'), url('../img/page1/recharge/ios11.png'), url('../img/page1/recharge/ios12.png'), url('../img/page1/recharge/ios13.png'), url('../img/page1/recharge/ios14.png'), url('../img/page1/recharge/ios15.png'), url('../img/page1/recharge/ios16.png'), url('../img/page1/recharge/ios17.png'), url('../img/page1/recharge/ios18.png'), url('../img/page1/recharge/ios19.png'), url('../img/page1/recharge/ios20.png'), url('../img/page1/recharge/ios21.png'), url('../img/page1/recharge/ios22.png'), url('../img/page1/recharge/ios23.png'), url('../img/page1/recharge/ios24.png'), url('../img/page1/recharge/ios25.png'), url('../img/page1/recharge/ios26.png'), url('../img/page1/recharge/ios27.png'), url('../img/page1/recharge/ios28.png'), url('../img/page1/recharge/ios29.png'), url('../img/page1/recharge/ios30.png'), url('../img/page1/recharge/ios31.png'), url('../img/page1/recharge/ios32.png'), url('../img/page1/recharge/ios33.png'), url('../img/page1/recharge/ios34.png'), url('../img/page1/recharge/ios35.png'), url('../img/page1/recharge/ios36.png'), url('../img/page1/recharge/ios37.png'), url('../img/page1/recharge/ios38.png'), url('../img/page1/recharge/ios39.png'), url('../img/page1/recharge/ios40.png'), url('../img/page1/recharge/ios41.png'), url('../img/page1/recharge/ios42.png'), url('../img/page1/recharge/ios43.png'), url('../img/page1/recharge/ios44.png'), url('../img/page1/recharge/ios45.png'), url('../img/page1/recharge/ios46.png'), url('../img/page1/recharge/ios47.png'), url('../img/page1/recharge/ios48.png'), url('../img/page1/recharge/ios49.png'), url('../img/page1/recharge/ios50.png'), url('../img/page1/recharge/ios51.png'), url('../img/page1/recharge/ios52.png'), url('../img/page1/recharge/ios53.png'), url('../img/page1/recharge/ios54.png'), url('../img/page1/recharge/ios55.png'), url('../img/page1/recharge/ios56.png'), url('../img/page1/recharge/ios57.png'), url('../img/page1/recharge/ios58.png'), url('../img/page1/recharge/ios59.png'), url('../img/page1/recharge/ios60.png');
  background-size: 100% 100%;
  position: absolute;
  animation: rechargeAni 4s infinite linear;
}
@keyframes rechargeAni {
  0% {
    background: url('../img/page1/recharge/ios1.png');
    background-size: 100% 100%;
  }
  2% {
    background: url('../img/page1/recharge/ios2.png');
    background-size: 100% 100%;
  }
  3.33% {
    background: url('../img/page1/recharge/ios3.png');
    background-size: 100% 100%;
  }
  5% {
    background: url('../img/page1/recharge/ios4.png');
    background-size: 100% 100%;
  }
  6.67% {
    background: url('../img/page1/recharge/ios5.png');
    background-size: 100% 100%;
  }
  8.33% {
    background: url('../img/page1/recharge/ios6.png');
    background-size: 100% 100%;
  }
  10% {
    background: url('../img/page1/recharge/ios7.png');
    background-size: 100% 100%;
  }
  11.67% {
    background: url('../img/page1/recharge/ios8.png');
    background-size: 100% 100%;
  }
  13.33% {
    background: url('../img/page1/recharge/ios9.png');
    background-size: 100% 100%;
  }
  15% {
    background: url('../img/page1/recharge/ios10.png');
    background-size: 100% 100%;
  }
  16.67% {
    background: url('../img/page1/recharge/ios11.png');
    background-size: 100% 100%;
  }
  18.33% {
    background: url('../img/page1/recharge/ios12.png');
    background-size: 100% 100%;
  }
  20% {
    background: url('../img/page1/recharge/ios13.png');
    background-size: 100% 100%;
  }
  21.67% {
    background: url('../img/page1/recharge/ios14.png');
    background-size: 100% 100%;
  }
  23.33% {
    background: url('../img/page1/recharge/ios15.png');
    background-size: 100% 100%;
  }
  25% {
    background: url('../img/page1/recharge/ios16.png');
    background-size: 100% 100%;
  }
  26.67% {
    background: url('../img/page1/recharge/ios17.png');
    background-size: 100% 100%;
  }
  28.33% {
    background: url('../img/page1/recharge/ios18.png');
    background-size: 100% 100%;
  }
  30% {
    background: url('../img/page1/recharge/ios19.png');
    background-size: 100% 100%;
  }
  31.67% {
    background: url('../img/page1/recharge/ios20.png');
    background-size: 100% 100%;
  }
  33.33% {
    background: url('../img/page1/recharge/ios21.png');
    background-size: 100% 100%;
  }
  35% {
    background: url('../img/page1/recharge/ios22.png');
    background-size: 100% 100%;
  }
  36.67% {
    background: url('../img/page1/recharge/ios23.png');
    background-size: 100% 100%;
  }
  38.33% {
    background: url('../img/page1/recharge/ios24.png');
    background-size: 100% 100%;
  }
  40% {
    background: url('../img/page1/recharge/ios25.png');
    background-size: 100% 100%;
  }
  41.67% {
    background: url('../img/page1/recharge/ios26.png');
    background-size: 100% 100%;
  }
  43.33% {
    background: url('../img/page1/recharge/ios27.png');
    background-size: 100% 100%;
  }
  45% {
    background: url('../img/page1/recharge/ios28.png');
    background-size: 100% 100%;
  }
  46.67% {
    background: url('../img/page1/recharge/ios29.png');
    background-size: 100% 100%;
  }
  48.33% {
    background: url('../img/page1/recharge/ios30.png');
    background-size: 100% 100%;
  }
  50% {
    background: url('../img/page1/recharge/ios31.png');
    background-size: 100% 100%;
  }
  51.67% {
    background: url('../img/page1/recharge/ios32.png');
    background-size: 100% 100%;
  }
  53.33% {
    background: url('../img/page1/recharge/ios33.png');
    background-size: 100% 100%;
  }
  55% {
    background: url('../img/page1/recharge/ios34.png');
    background-size: 100% 100%;
  }
  56.67% {
    background: url('../img/page1/recharge/ios35.png');
    background-size: 100% 100%;
  }
  58.33% {
    background: url('../img/page1/recharge/ios36.png');
    background-size: 100% 100%;
  }
  60% {
    background: url('../img/page1/recharge/ios37.png');
    background-size: 100% 100%;
  }
  61.67% {
    background: url('../img/page1/recharge/ios38.png');
    background-size: 100% 100%;
  }
  63.33% {
    background: url('../img/page1/recharge/ios39.png');
    background-size: 100% 100%;
  }
  65% {
    background: url('../img/page1/recharge/ios40.png');
    background-size: 100% 100%;
  }
  66.67% {
    background: url('../img/page1/recharge/ios41.png');
    background-size: 100% 100%;
  }
  68.33% {
    background: url('../img/page1/recharge/ios42.png');
    background-size: 100% 100%;
  }
  70% {
    background: url('../img/page1/recharge/ios43.png');
    background-size: 100% 100%;
  }
  71.67% {
    background: url('../img/page1/recharge/ios44.png');
    background-size: 100% 100%;
  }
  73.33% {
    background: url('../img/page1/recharge/ios45.png');
    background-size: 100% 100%;
  }
  75% {
    background: url('../img/page1/recharge/ios46.png');
    background-size: 100% 100%;
  }
  76.67% {
    background: url('../img/page1/recharge/ios47.png');
    background-size: 100% 100%;
  }
  78.33% {
    background: url('../img/page1/recharge/ios48.png');
    background-size: 100% 100%;
  }
  80% {
    background: url('../img/page1/recharge/ios49.png');
    background-size: 100% 100%;
  }
  81.67% {
    background: url('../img/page1/recharge/ios50.png');
    background-size: 100% 100%;
  }
  83.33% {
    background: url('../img/page1/recharge/ios51.png');
    background-size: 100% 100%;
  }
  85% {
    background: url('../img/page1/recharge/ios52.png');
    background-size: 100% 100%;
  }
  86.67% {
    background: url('../img/page1/recharge/ios53.png');
    background-size: 100% 100%;
  }
  88.33% {
    background: url('../img/page1/recharge/ios54.png');
    background-size: 100% 100%;
  }
  90% {
    background: url('../img/page1/recharge/ios55.png');
    background-size: 100% 100%;
  }
  91.67% {
    background: url('../img/page1/recharge/ios56.png');
    background-size: 100% 100%;
  }
  93.33% {
    background: url('../img/page1/recharge/ios57.png');
    background-size: 100% 100%;
  }
  95% {
    background: url('../img/page1/recharge/ios58.png');
    background-size: 100% 100%;
  }
  96.67% {
    background: url('../img/page1/recharge/ios59.png');
    background-size: 100% 100%;
  }
  98.33% {
    background: url('../img/page1/recharge/ios60.png');
    background-size: 100% 100%;
  }
  100% {
    background: url('../img/page1/recharge/ios1.png');
    background-size: 100% 100%;
  }
}
.container .ad_img {
  width: 2.6rem;
  position: fixed;
  right: 0;
  top: 5rem;
  z-index: 5;
}
.container .ad_img img {
  width: 100%;
  height: auto;
}
.container .ad_img a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.container .content {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container .content .section {
  width: 100% !important;
  height: 10.8rem !important;
  display: flex !important;
  justify-content: center;
  position: relative;
}
.container .content .section .fp-tableCell {
  width: 19.2rem !important;
  height: 10.8rem !important;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container .content .page1 {
  background: url('../img/page1/bg.jpg');
  background-size: cover;
}
.container .content .page1 .slogo {
  width: 2.78rem;
  height: 0.91rem;
  background: url('../img/page1/logo.png');
  background-size: 100% 100%;
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
}
.container .content .page1 .btn_box {
  display: flex;
  align-items: center;
  margin-top: 8.4rem;
}
.container .content .page1 .btn_box .ios_btn {
  width: 2.47rem;
  height: 0.83rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-right: 0.6rem;
}
.container .content .page1 .btn_box .ios_btn a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
}
.container .content .page1 .btn_box .ios_btn img {
  width: 100%;
  height: 100%;
}
.container .content .page1 .btn_box .google_btn {
  width: 2.82rem;
  height: 0.83rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-right: 0.6rem;
}
.container .content .page1 .btn_box .google_btn a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
}
.container .content .page1 .btn_box .google_btn img {
  width: 100%;
  height: 100%;
}
.container .content .page1 .btn_box .apk_btn {
  width: 2.56rem;
  height: 0.84rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.container .content .page1 .btn_box .apk_btn a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
}
.container .content .page1 .btn_box .apk_btn img {
  width: 100%;
  height: 100%;
}
.container .content .page2 {
  background: url('../img/page2/bg.jpg');
  background-size: cover;
}
.container .content .page2 .train {
  width: 19.2rem;
  height: 10.8rem;
  background: url('../img/page2/train.png');
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.container .content .page2 .people {
  width: 19.2rem;
  height: 10.8rem;
  background: url('../img/page2/people.png');
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.container .content .page2 .right_i {
  width: 0.47rem;
  height: 0.88rem;
  background: url('../img/page2/right.png');
  background-size: 100% 100%;
  position: absolute;
  right: 2.28rem;
  z-index: 4;
  top: 4rem;
  cursor: pointer;
}
.container .content .page2 .left_i {
  width: 0.46rem;
  height: 0.89rem;
  background: url('../img/page2/left.png');
  background-size: 100% 100%;
  position: absolute;
  left: 5.1rem;
  z-index: 4;
  top: 4rem;
  cursor: pointer;
}
.container .content .page2 .game_swiper {
  width: 10.3rem;
  height: 4.75rem;
  border-radius: 0.2rem;
  overflow: hidden;
  position: absolute;
  top: 2.04rem;
  left: 5.84rem;
  z-index: 2;
}
.container .content .page2 .game_swiper img {
  width: 100%;
  height: 100%;
}
.container .content .page3 {
  height: 1.23rem !important;
  background-color: #000;
}
.container .content .page3 .fp-tableCell {
  height: 1.23rem !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
}
.container .content .page3 .fp-tableCell .bottom_i {
  width: 0.85rem;
  height: 0.33rem;
  background: url('../img/page3/logo.png');
  background-size: 100% 100%;
}
.container .content .page3 .fp-tableCell span {
  font-size: 0.18rem;
  color: #FFFFFF;
  opacity: 0.42;
  margin: 0 0.3rem;
}
.container .content .page3 .fp-tableCell a {
  font-size: 0.18rem;
  text-decoration: none;
  color: #FFFFFF;
  opacity: 0.42;
}
.container .content .page3 .fp-tableCell .link_a {
  margin: 0 0.3rem;
}
.container .content .page3 .fp-tableCell .logo_18 {
  width: 0.92rem;
  height: 0.46rem;
  background: url('../img/page3/18_logo.png');
  background-size: 100% 100%;
  margin-left: 0.3rem;
}
.container .content .page3 .fp-tableCell .tip {
  position: absolute;
  top: 0.8rem;
}