.pc {
  opacity: 0;
}

.mobile {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  opacity: 0;
  background-color: #140F23;
}

.download-button {
  width: 5.14rem;
  height: 1.36rem;
  position: absolute;
  left: 50%;
  bottom: 25px;
  transform: translateX(-50%);
  background-image: url('../img/mobile/download.png');
  background-size: contain;
  z-index: 100;
  animation: buttonAnimation 1.5s infinite;
}

.ios-btn {
  background-image: url('../img/mobile/openMiniGame.png');
}

.android-btn {
  background-image: url('../img/mobile/download.png')
}

@keyframes buttonAnimation {
  0% {
    transform: translateX(-50%) scale(1);
  }

  16.5% {
    transform: translateX(-50%) scale(1.1);
  }

  33% {
    transform: translateX(-50%) scale(1);
  }

  49.5% {
    transform: translateX(-50%) scale(1.1);
  }

  66% {
    transform: translateX(-50%) scale(1);
  }

  100% {
    transform: translateX(-50%) scale(1);
  }
}

.arrow {
  width: 0.52rem;
  height: 0.24rem;
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background-image: url('../img/mobile/arrow.png');
  background-size: cover;
  z-index: 100;
  animation: gonext 1.8s infinite linear;
}

@keyframes gonext {
  0% {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, 0.4rem);
  }
}

.swiper-container {
  width: 100vw;
  height: 100vh;
}

.swiper-wrapper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  width: 100%;
  height: 100%;
}

.bg {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  background-size: cover;
  background-position: top;
}

.bg1 {
  background-image: url('../img/mobile/bgn-3.jpg');
}

.bg2 {
  background-image: url('../img/mobile/bgn-4.jpg');
  opacity: 0;
}

.bg3 {
  background-image: url('../img/mobile/bgn-5.jpg');
  opacity: 0;
}

.bg4 {
  background-image: url('../img/mobile/bgn-4.jpg');
  opacity: 0;
}

.bg5 {
  background-image: url('../img/mobile/bgn-5.jpg');
  opacity: 0;
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadein {
  animation: fadein .5s forwards;
}

.fadeout {
  animation: fadeout .5s forwards;
}

.main {
  width: 7.5rem;
  height: 12rem;
  background-size: cover;
  position: absolute;
  left: 50%;
  top: 2.6rem;
  transform: translateX(-50%);
  z-index: 101;
}

.share-mask {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #000;
  opacity: 0.7;
  width: 100%;
  height: 100vh;
  display: none;
  z-index: 110;
}

.share-tips {
  width: 2.68rem;
  height: .92rem;
  background-size: cover;
  position: absolute;
  top: .2rem;
  right: .2rem;
  z-index: 130;
  display: none;
  background-image: url('../img/mobile/share_tips.png');
}

/* .main1 {
  background-image: url('../img/mobile/main1.png');
} */

.title {
  width: 7.5rem;
  height: 2.3rem;
  background-size: cover;
  position: absolute;
  left: 50%;
  top: .8rem;
  transform: translateX(-50%);
  z-index: 101;
  display: none;
}

.title1 {
  background-image: url('../img/mobile/title1.png');
}

.title2 {
  background-image: url('../img/mobile/title2.png');
}

.title3 {
  background-image: url('../img/mobile/title3.png');
}

.title4 {
  background-image: url('../img/mobile/title4.png');
}

.title5 {
  background-image: url('../img/mobile/title5.png');
}

.title6 {
  background-image: url('../img/mobile/title6.png');
}

.main2 {
  background-image: url('../img/mobile/main2.png');
}

.main3 {
  background-image: url('../img/mobile/main3.png');
}

.main4 {
  background-image: url('../img/mobile/main4.png');
}

.main5 {
  background-image: url('../img/mobile/main5.png');
}

.main6 {
  background-image: url('../img/mobile/main6.png');
}

/* .icon1 {
  width: 6.94rem;
  height: 8.84rem;
  margin: 2.38rem 0 0 0.42rem;
  background-image: url('../img/mobile/cat.png');
  background-size: contain;
  z-index: 100;
  animation: catAnimation 5s infinite linear;
} */

@keyframes catAnimation {
  0% {
    transform: translate(0, 0) rotate(0);
  }

  12.5% {
    transform: translate(-.1rem, 0) rotate(-2deg);
  }

  25% {
    transform: translate(-.1rem, -.1rem) rotate(-4deg);
  }

  37.5% {
    transform: translate(0, -.1rem) rotate(-2deg);
  }

  50% {
    transform: translate(0, 0) rotate(0);
  }

  62.5% {
    transform: translate(0, .1rem) rotate(2deg);
  }

  75% {
    transform: translate(.1rem, .1rem) rotate(4deg);
  }

  87.5% {
    transform: translate(.1rem, 0) rotate(2deg);
  }

  100% {
    transform: translate(0, 0) rotate(0);
  }
}

.icon {
  width: 7.5rem;
  height: 8.12rem;
  position: absolute;
  bottom: 0;
  left: 0;
  background-size: contain;
  opacity: 0;
  z-index: 120;
}

.icon2 {
  background-image: url('../img/mobile/icon2.png');
}

.icon3 {
  background-image: url('../img/mobile/icon3.png');
}

.icon4 {
  background-image: url('../img/mobile/icon4.png');
}

.icon5 {
  background-image: url('../img/mobile/icon5.png');
}

.icon6 {
  background-image: url('../img/mobile/icon6.png');
}

.dialog-mask {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #000;
  opacity: 0.7;
  width: 100%;
  height: 100vh;
  display: none;
  z-index: 110;
}

.dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5.4rem;
  height: 5.8rem;
  background: #ffffff;
  border-radius: 0.32rem;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  display: none;
  z-index: 111;
}

.dialog-title {
  font-size: 20px;
  font-weight: 600;
  color: #161616;
  margin-top: 0.4rem;
}

.dialog-qr {
  margin-top: 0.4rem;
  width: 3.46rem;
  height: 3.46rem;
}

.dialog-tip {
  margin-top: 0.24rem;
  font-size: 12px;
  color: #161616;
  font-weight: 400;
}

.dialog-close {
  position: absolute;
  width: 0.62rem;
  height: 0.62rem;
  left: 50%;
  bottom: -1rem;
  transform: translateX(-50%);
  background-image: url('../img/mobile/close.png');
  background-size: cover;
}