* {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}

html,
body {
  width: 100%;
  min-height: 100%;
  background: #72cfff;
}

body {
  overflow-x: hidden;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

#app {
  position: relative;
  width: 100%;
  overflow-x: hidden;
}

:root {
  --i2-ease-premium: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.i2_reveal {
  opacity: 0;
  transform: translate3d(0, 0.18rem, 0);
  transition: opacity 0.55s var(--i2-ease-premium), transform 0.55s var(--i2-ease-premium);
  transition-delay: var(--i2-reveal-delay, 0s);
  will-change: transform, opacity;
}

.i2_reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.i2_nav.i2_reveal,
.i2_s1_btn.i2_reveal,
.i2_s3_share.i2_reveal,
.i2_feature_frame.i2_reveal,
.i2_s4_pagination.i2_reveal {
  transform: translateX(-50%) translateY(0.18rem);
}

.i2_nav.i2_reveal.is-visible,
.i2_s1_btn.i2_reveal.is-visible,
.i2_s3_share.i2_reveal.is-visible,
.i2_feature_frame.i2_reveal.is-visible,
.i2_s4_pagination.i2_reveal.is-visible {
  transform: translateX(-50%) translateY(0);
}

.gr_hover_1 {
  cursor: pointer;
  transition: transform 0.24s var(--i2-ease-premium), opacity 0.2s ease, filter 0.24s var(--i2-ease-premium);
}

.gr_hover_1:active {
  opacity: 0.9;
  transform: scale(0.97);
}

.i2_s1_btn.gr_hover_1:active {
  animation-play-state: paused;
  transform: translateX(-50%) scale(0.97);
}

.i2_popup_btn_wrap.gr_hover_1:active {
  animation-play-state: paused;
  transform: translateX(-50%) scale(0.97);
}

.i2_popup_close.gr_hover_1:active {
  transform: translateX(-50%) scale(0.97);
}

.i2_s3_share.gr_hover_1:active {
  animation-play-state: paused;
  transform: translateX(-50%) scale(0.97);
}

@keyframes i2HandFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0.08rem, -0.04rem, 0) scale(1.05);
  }
}

@keyframes i2BtnShake {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  6% {
    transform: translate3d(-0.02rem, 0, 0) rotate(-0.8deg);
  }
  12% {
    transform: translate3d(0.02rem, 0, 0) rotate(0.8deg);
  }
  18% {
    transform: translate3d(-0.015rem, 0, 0) rotate(-0.45deg);
  }
  24% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@keyframes i2BtnPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.045);
  }
}

@keyframes i2PopupBtnCallout {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
    filter: drop-shadow(0 0 0 rgba(255, 232, 127, 0.35));
  }
  40% {
    transform: translateX(-50%) scale(1.035);
    filter: drop-shadow(0 0 0.08rem rgba(255, 232, 127, 0.55));
  }
  56% {
    transform: translateX(-50%) scale(0.96);
    filter: drop-shadow(0 0 0.04rem rgba(255, 232, 127, 0.45));
  }
  70% {
    transform: translateX(-50%) scale(1.02);
    filter: drop-shadow(0 0 0.1rem rgba(255, 232, 127, 0.62));
  }
  84% {
    transform: translateX(-50%) scale(1.03);
    filter: drop-shadow(0 0 0.12rem rgba(255, 232, 127, 0.68));
  }
}

@keyframes i2PopupHandTap {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  40% {
    transform: translate3d(0.012rem, -0.04rem, 0) scale(1.03) rotate(-1.3deg);
  }
  56% {
    transform: translate3d(0.018rem, 0.006rem, 0) scale(0.94) rotate(-3.8deg);
  }
  70% {
    transform: translate3d(0.015rem, -0.02rem, 0) scale(1.02) rotate(-1.2deg);
  }
  84% {
    transform: translate3d(0.006rem, -0.006rem, 0) scale(1.01) rotate(-0.35deg);
  }
}

@keyframes i2S1HandTap {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  34% {
    transform: translate3d(0.02rem, -0.045rem, 0) scale(1.03) rotate(-1.5deg);
  }
  52% {
    transform: translate3d(0.07rem, 0.03rem, 0) scale(0.9) rotate(-8deg);
  }
  66% {
    transform: translate3d(0.03rem, -0.018rem, 0) scale(1.02) rotate(-2deg);
  }
  82% {
    transform: translate3d(0.012rem, -0.006rem, 0) scale(1.005) rotate(-0.6deg);
  }
}

@keyframes i2LogoFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -0.015rem, 0) rotate(-0.8deg);
  }
}

@keyframes i2NavIconBob {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -0.012rem, 0) scale(1.03);
  }
}

@keyframes i2MainBtnBreath {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.03);
  }
}

@keyframes i2ShareBtnBreath {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
    filter: drop-shadow(0 0 0 rgba(255, 247, 184, 0.18));
  }
  50% {
    transform: translateX(-50%) scale(1.04);
    filter: drop-shadow(0 0 0.08rem rgba(255, 247, 184, 0.46));
  }
}

@keyframes i2FeatureFrameGlow {
  0%,
  100% {
    box-shadow: 0 0 0 0.02rem #a7d3ef inset, 0 0 0 rgba(142, 221, 255, 0.1);
  }
  50% {
    box-shadow: 0 0 0 0.02rem #a7d3ef inset, 0 0 0.1rem rgba(142, 221, 255, 0.28);
  }
}

.i2_nav {
  position: fixed;
  top: 0;
  left: 50%;
  width: 7.5rem;
  height: 0.99rem;
  transform: translateX(-50%);
  z-index: 20;
}

.i2_nav_bg {
  display: block;
  width: 100%;
  height: 100%;
}

.i2_logo {
  position: absolute;
  top: 0.14rem;
  left: 0.16rem;
  width: 1.36rem;
  height: 0.7rem;
  transform-origin: 15% 50%;
  animation: i2LogoFloat 2.8s ease-in-out infinite;
}

.i2_nav_right {
  position: absolute;
  top: 0.1rem;
  right: 0.08rem;
  display: flex;
  gap: 0;
}

.i2_nav_icon {
  display: block;
  width: 0.98rem;
  height: 0.79rem;
  transform-origin: center 70%;
  animation: i2NavIconBob 1.8s ease-in-out infinite;
}

.i2_nav_discord {
  animation-delay: 0.2s;
}

.i2_nav_share {
  animation-delay: 0.4s;
}

.i2_sec {
  position: relative;
  width: 7.5rem;
  margin: 0 auto;
  font-size: 0;
}

#i2_s1 {
  /* margin-top: 0.99rem; */
}

.i2_sec_bg {
  display: block;
  width: 100%;
  height: auto;
}

.i2_abs {
  position: absolute;
}

.i2_s1_btn {
  left: 50%;
  top: 80.5%;
  width: 5.06rem;
  transform: translateX(-50%);
  z-index: 2;
  transform-origin: center center;
  animation: i2PopupBtnCallout 1.5s ease-in-out infinite;
}

.i2_s1_btn > img:first-child,
.i2_s2_btn1 img,
.i2_s2_btn2 img,
.i2_s3_share img {
  display: block;
  width: 100%;
  height: auto;
}

.i2_hand {
  position: absolute;
  right: -0.5rem;
  bottom: -0.1rem;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
  transform-origin: 20% 78%;
  animation: i2S1HandTap 1.5s ease-in-out infinite;
}

.i2_s2_btn1 {
  top: 4.8rem;
  right: 0.61rem;
  width: 2.91rem;
  z-index: 2;
}

.i2_s2_btn2 {
  top: 9.4rem;
  right: 0.79rem;
  width: 2.91rem;
  z-index: 2;
}

.i2_s2_btn1,
.i2_s2_btn2 {
  transform-origin: center center;
  animation: i2BtnPulse 1.6s ease-in-out infinite;
}

.i2_s2_btn2 {
  animation-delay: 0.2s;
}

.i2_s2_btn1.gr_hover_1:active,
.i2_s2_btn2.gr_hover_1:active {
  animation-play-state: paused;
  transform: scale(0.97);
}

.i2_s2_fb_btn,
.i2_s2_discord_btn {
  top: 83.75%;
  width: 2.91rem;
  height: 0.79rem;
  display: block;
  z-index: 2;
}

.i2_s2_fb_btn {
  left: 0.85rem;
}

.i2_s2_discord_btn {
  right: 0.82rem;
}

.i2_fb_btn,
.i2_discord_btn {
  transform-origin: center center;
  animation: i2BtnShake 2.6s ease-in-out infinite;
}

.i2_discord_btn {
  animation-delay: 0.35s;
}

.i2_fb_btn.gr_hover_1:active,
.i2_discord_btn.gr_hover_1:active {
  animation-play-state: paused;
  transform: scale(0.97);
}

.i2_s3_overlay {
  display: block;
  height: auto;
  z-index: 1;
  pointer-events: none;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.i2_s3_overlay0 {
  top: 2.7rem;
  left: 0.175rem;
  width: 7.15rem;
}

.i2_s3_overlay1 {
  top: 4.85rem;
  left: 0.175rem;
  width: 7.15rem;
}

.i2_s3_overlay2 {
  top: 7.03rem;
  left: 0.175rem;
  width: 7.15rem;
}

.i2_s3_overlay3 {
  top: 9.21rem;
  left: 0.175rem;
  width: 7.15rem;
}

.i2_s3_overlay.i2_reveal {
  opacity: 0;
  transform: translate3d(-0.52rem, 0, 0);
  transition: transform 0.86s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.68s ease-out;
  transition-delay: var(--i2-s3-delay, 0s);
}

.i2_s3_overlay0.i2_reveal.is-visible,
.i2_s3_overlay1.i2_reveal.is-visible,
.i2_s3_overlay2.i2_reveal.is-visible,
.i2_s3_overlay3.i2_reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 540px) {
  .i2_s3_overlay.i2_reveal {
    transform: translate3d(-0.44rem, 0, 0);
  }
}

.i2_s3_share {
  left: 50%;
  top: 77%;
  width: 4.19rem;
  transform: translateX(-50%);
  z-index: 2;
  transform-origin: center center;
  animation: i2ShareBtnBreath 2s ease-in-out infinite;
}

.i2_feature_frame {
  top: 18.95%;
  left: 50%;
  width: 6.23rem;
  height: 4rem;
  transform: translateX(-50%);
  border-radius: 0.16rem;
  overflow: hidden;
}

.i2_feature_screen {
  width: 100%;
  height: 100%;
  background: #3f9ee6;
  border: 0.04rem solid #f9f0cb;
  border-radius: 0.16rem;
  box-shadow: 0 0 0 0.02rem #a7d3ef inset;
  animation: i2FeatureFrameGlow 2.6s ease-in-out infinite;
}

.i2_s4_swiper {
  width: 100%;
  height: 100%;
  background: #3f9ee6;
  border: 0.04rem solid #f9f0cb;
  border-radius: 0.16rem;
  box-shadow: 0 0 0 0.02rem #a7d3ef inset;
}

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

.i2_s4_swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.12rem;
}

.i2_s4_pagination {
  left: 50% !important;
  top: 60%;
  width: 3rem;
  height: 0.48rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.06rem;
  z-index: 3;
}

.i2_s4_star {
  position: relative;
  width: 0.48rem;
  height: 0.48rem;
  background: url('../images/sel_n.png') center / contain no-repeat;
  opacity: 1;
}

.i2_s4_pagination .swiper-pagination-bullet {
  margin: 0 !important;
  background-color: transparent;
}

.i2_s4_star::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/sel_s.png') center / contain no-repeat;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.i2_s4_star.swiper-pagination-bullet-active::after {
  opacity: 1;
}

#i2_popup {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
}

.i2_popup_mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.i2_popup_box {
  position: relative;
  z-index: 1;
  width: 6.55rem;
  padding-bottom: 0.44rem;
  animation: i2PopupIn 0.3s ease-out both;
}

@keyframes i2PopupIn {
  from {
    opacity: 0;
    transform: translateY(0.28rem) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.i2_popup_bg_img {
  display: block;
  width: 100%;
  height: auto;
}

.i2_popup_title_img {
  position: absolute;
  top: -0.92rem;
  left: 50%;
  width: 5.77rem;
  transform: translateX(-50%);
}

.i2_popup_btn_wrap {
  position: absolute;
  left: 50%;
  bottom: 1.15rem;
  width: 5.06rem;
  transform: translateX(-50%);
  z-index: 2;
  transform-origin: center center;
  animation: i2PopupBtnCallout 1.5s ease-in-out infinite;
}

.i2_popup_btn_img {
  display: block;
  width: 100%;
  height: auto;
}

.i2_popup_hand_img {
  position: absolute;
  right: 0.3rem;
  bottom: 0.7rem;
  z-index: 123;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
  animation: i2PopupHandTap 1.5s ease-in-out infinite;
}

@media (hover: hover) and (pointer: fine) {
  .gr_hover_1:hover {
    opacity: 0.98;
    filter: drop-shadow(0 0.06rem 0.12rem rgba(25, 40, 66, 0.2));
  }

  .i2_s1_btn.gr_hover_1:hover {
    animation-play-state: paused;
    transform: translateX(-50%) scale(1.02);
  }

  .i2_popup_btn_wrap.gr_hover_1:hover,
  .i2_s3_share.gr_hover_1:hover {
    animation-play-state: paused;
    transform: translateX(-50%) scale(1.018);
  }

  .i2_s2_btn1.gr_hover_1:hover,
  .i2_s2_btn2.gr_hover_1:hover,
  .i2_fb_btn.gr_hover_1:hover,
  .i2_discord_btn.gr_hover_1:hover,
  .i2_logo.gr_hover_1:hover {
    animation-play-state: paused;
    transform: scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .i2_reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .i2_logo,
  .i2_nav_icon,
  .i2_s1_btn,
  .i2_s2_btn1,
  .i2_s2_btn2,
  .i2_fb_btn,
  .i2_discord_btn,
  .i2_s3_share,
  .i2_feature_screen,
  .i2_popup_btn_wrap,
  .i2_popup_hand_img,
  .i2_hand {
    animation: none !important;
  }
}

.i2_popup_close {
  position: absolute;
  left: 50%;
  bottom: -0.03rem;
  width: 0.39rem;
  height: 0.4rem;
  transform: translateX(-50%);
  z-index: 2;
}

@media (min-width: 540px) {
  .i2_nav,
  .i2_sec {
    width: 500px;
  }
}