* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== pc-container ===== */
.pc-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* ===== 视频遮罩 ===== */
.video-mask {
  width: 100%;
  height: 100%;
}

.intro-video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}

.secondary-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background-color: transparent;
  pointer-events: none;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}

.secondary-page.visible {
  clip-path: inset(0 0 0 0);
  pointer-events: all;
}
.secondary-page .logo-box {
  position: absolute;
  z-index: 9999;
  width: 353px;
  height: 40px;
  background: none !important;
}

.secondary-page .logo-box .logo-icon {
  width: 353px;
  height: 40px;
  background: url(https://game.gtimg.cn/images/arc/web202605/logo_sec.png)
    no-repeat center center;
}

/* 二级页面关闭按钮 */
.secondary-page .close-btn {
  position: absolute;
  top: 30px;
  right: 50px;
  cursor: pointer;
  display: flex;
  justify-content: flex-end; /* 将子元素推到右侧 */
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 49px;
  width: 49px;
  height: 49px;
  border-radius: 30px;
  padding: 0;
  border: 1px solid #756e6c;
  background-color: #1a1d26;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    min-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s ease;
  opacity: 1;
  z-index: 9999;
}

.close-btn .btn-icon {
  width: 18px;
  height: 29px;
  background: url(https://game.gtimg.cn/images/arc/web202605/icon_back.png);
}

.close-btn .btn-text {
  font-size: 16px;
  color: #fff;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  margin-left: 0;
  transition:
    max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease 0.1s,
    margin-left 0.3s ease;
}

.close-btn:hover {
  min-width: 130px;
  width: auto;
  border-color: rgba(255, 255, 255, 0.4);
}

.close-btn::after {
  content: '';
  position: absolute;
  top: -16px;
  left: -24px;
  width: 0;
  height: 78px;
  background: url('https://game.gtimg.cn/images/arc/web202605/back_effect.webp')
    no-repeat left center;
  overflow: hidden;
  opacity: 0;
  transition:
    width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
}
.close-btn:hover::after {
  width: 178px;
  opacity: 1;
}

.close-btn:hover .btn-text {
  max-width: 80px;
  opacity: 1;
  margin-left: 10px;
}

.secondary-content {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* ===== sec-gallery 图片画廊 ===== */
.sec-gallery {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

/* 每张图片层叠在同一位置，默认隐藏 */
.sec-gallery-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* 当前激活的图片：完全可见 */
.sec-gallery-item.active {
  opacity: 1;
  pointer-events: all;
  z-index: 2;
}

/* 旧图片切换时的暗区遮罩（伪元素叠加） */
.sec-gallery-item.active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.7s cubic-bezier(0.77, 0, 0.175, 1);
  pointer-events: none;
  z-index: 3;
}

/* 切换进行中，旧图片暗区加深 */
.sec-gallery-item.active.dimming::after {
  background: rgba(0, 0, 0, 0.7);
}

/* 旧图片退出偏移：滚轮向下/下一张时旧图片轻微下移 */
.sec-gallery-item.active.exiting-bottom {
  transform: translateY(10%);
  transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}

/* 旧图片退出偏移：滚轮向上/上一张时旧图片轻微上移 */
.sec-gallery-item.active.exiting-top {
  transform: translateY(-10%);
  transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}

/* 正在执行动画的图片：强制可见，z-index 最高 */
.sec-gallery-item.curtain-in-bottom,
.sec-gallery-item.curtain-in-top {
  opacity: 1;
  z-index: 10;
}

/* 窗帘从顶部向下拉开（向前切换） */
.sec-gallery-item.curtain-in-bottom {
  animation: galleryCurtainBottom 0.7s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* 窗帘从底部向上拉开（向后切换） */
.sec-gallery-item.curtain-in-top {
  animation: galleryCurtainTop 0.7s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes galleryCurtainBottom {
  0% {
    clip-path: inset(0 0 100% 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes galleryCurtainTop {
  0% {
    clip-path: inset(100% 0 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

/* 各图片背景 */
.slide-content {
  width: 100%;
  height: 100%;
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.slide-content-1 {
  background-image: url('https://game.gtimg.cn/images/arc/web202605/page2_sec_01.png');
}
.slide-content-2 {
  background-image: url('https://game.gtimg.cn/images/arc/web202605/page2_sec_02.png');
}
.slide-content-3 {
  background-image: url('https://game.gtimg.cn/images/arc/web202605/page2_sec_03.png');
}
.slide-content-4 {
  background-image: url('https://game.gtimg.cn/images/arc/web202605/page2_sec_04.png');
}
.slide-content-5 {
  background-image: url('https://game.gtimg.cn/images/arc/web202605/page2_sec_05.png');
}
.slide-content-6 {
  background-image: url('https://game.gtimg.cn/images/arc/web202605/page2_sec_06.png');
}

.slide-content .slide-title {
  width: 499px;
  height: 200px;
  position: absolute;
  /* top: 696px; */
  bottom: 200px;
  left: 175px;
}

.slide-content-1 .slide-title {
  background: url('https://game.gtimg.cn/images/arc/web202605/slide-title1.png')
    no-repeat center center;
  background-size: 100% 100%;
}
.slide-content-2 .slide-title {
  background: url('https://game.gtimg.cn/images/arc/web202605/slide-title2.png')
    no-repeat center center;
  background-size: 100% 100%;
}
.slide-content-3 .slide-title {
  background: url('https://game.gtimg.cn/images/arc/web202605/slide-title3.png')
    no-repeat center center;
  background-size: 100% 100%;
}
.slide-content-4 .slide-title {
  background: url('https://game.gtimg.cn/images/arc/web202605/slide-title4.png')
    no-repeat center center;
  background-size: 100% 100%;
}
.slide-content-5 .slide-title {
  background: url('https://game.gtimg.cn/images/arc/web202605/slide-title5.png')
    no-repeat center center;
  background-size: 100% 100%;
}
.slide-content-6 .slide-title {
  background: url('https://game.gtimg.cn/images/arc/web202605/slide-title6.png')
    no-repeat center center;
  background-size: 100% 100%;
}

.slide-content .slide-text {
  font-size: 20px;
  color: #ede7d7;
  width: 499px;
  height: 100px;
  position: absolute;
  /* top: 810px; */
  bottom: 80px;
  left: 175px;
}
.slide-content .slide-text .hl {
  color: #f1aa1c;
}

/* pagination */
.sec-gallery-pagination {
  position: absolute;
  left: 130px;
  /* top: 694px; */
  /* bottom: 220px; */
  bottom: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  z-index: 100;
}
.sec-gallery-bullet {
  display: block;
  width: 8px;
  height: 18px;
  border-radius: 5px;
  background: transparent;
  border: 3px solid #746c60;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.3s ease;
}
.sec-gallery-bullet.active {
  height: 77px;
  background: transparent;
  border-color: transparent;
  border: none;
}
/* ::before 负责渐变色 + clip-path 展开动画，受 clip-path 裁剪没关系 */
.sec-gallery-bullet::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: transparent;
  pointer-events: none;
  /* 非 active 时不加 transition，避免 JS 设起点时触发反向过渡 */
}
.sec-gallery-bullet.active::before {
  background: linear-gradient(to bottom, #af0bff, #5aa7fa, #9ce7e5, #d9e8da);
  clip-path: var(--bullet-clip, inset(0 0 0 0 round 5px));
  transition: clip-path 0.3s ease;
}
/* ::after 负责 box-shadow，不加 clip-path，不会被裁剪 */
.sec-gallery-bullet::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 5px;
  box-shadow: 0 0 0px rgba(218, 168, 32, 0);
  transition: box-shadow 0.3s ease;
  pointer-events: none;
}
.sec-gallery-bullet.active::after {
  box-shadow: 0 0 10px 2px rgba(218, 168, 32, 0.7);
}

/* ===== page2-sec-swiper 旧 pagination（已废弃，保留备用） ===== */
/* .page2-sec-bullet {
  display: block;
  width: 10px;
  height: 15px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, height 0.3s ease,
    border-radius 0.3s ease;
  flex-shrink: 0;
} */

/* 激活圆点：拉伸为竖向胶囊 + 高亮 */
/* .page2-sec-bullet-active {
  background: linear-gradient(to bottom, #af0bff, #5aa7fa, #9ce7e5, #d9e8da);
  border: none;
  width: 10px;
  height: 60px;
  border-radius: 5px;
  transform: none;
  box-shadow: 0 0 8px rgba(218, 168, 32, 0.7);
} */

/* ===== page2-sec-swiper 旧动画（已废弃） ===== */

/* ===== Swiper ===== */
.swiper {
  height: 100vh;
}

.swiper-slide {
  /* height: 100vh; */
  height: 100%;
}
/* ===== page-wrapper ===== */
.page-wrapper {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);
  transform: translateX(0);
}

/* 二级页面打开时，当前一级页面轻微左移 */
.page-wrapper.secondary-open {
  transform: translateX(-60px);
}

/* ===== wrap 公共 ===== */
.wrap {
  position: relative;
  width: 100%;
  height: 100%;
  color: #fff;
}

/* logo-box */
.wrap .logo-box {
  width: 49px;
  height: 38px;
  background: url(https://game.gtimg.cn/images/arc/web202605/logo.png);
  position: absolute;
  top: 42px;
  left: 30px;
  z-index: 2;
}

/* link-box */
.global-link-box {
  position: absolute;
  top: 30px;
  right: 50px;
  font-size: 16px;
  display: flex;
  gap: 32px;
  align-items: center;
  z-index: 3;
}

.global-link-box .link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 49px;
  width: 49px;
  height: 49px;
  padding: 0;
  border: 1px solid #756e6c;
  background-color: #1a1d26;
  border-radius: 30px;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    min-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s ease;
  opacity: 0;
  transform: translateX(100%);
}

.global-link-box .link-btn:last-child {
  color: #ebe6d7;
  width: fit-content;
  background: none;
  border: none;
  font-size: 20px;
  border-radius: none;
  transition: none;
  opacity: 1;
  transform: none;
  padding: 0;
}

.global-link-box .link-btn:last-child .userinfo {
  color: #ebe6d7;
}
.global-link-box .link-btn:last-child .link-btn-op {
  color: #ebe6d7;
  margin-left: 6px;
}

/* 从右往左出现的动画 */
@keyframes fromRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.global-link-box .link-btn.animate-in {
  animation: fromRight 0.6s ease forwards;
}

.global-link-box .link-btn:last-child.animate-in {
  animation: none;
}

.link-btn:nth-child(1).animate-in {
  animation-delay: 0.2s;
}
.link-btn:nth-child(2).animate-in {
  animation-delay: 0.4s;
}
.login-box .link-btn:nth-child(1).animate-in {
  animation-delay: 0.6s;
}

.global-link-box .link-btn-icon {
  width: 24px;
  height: 27px;
  flex-shrink: 0;
}

.global-link-box > .link-btn:nth-child(1) .link-btn-icon {
  background: url(https://game.gtimg.cn/images/arc/web202605/link_icon2.png)
    no-repeat center / contain;
}

.global-link-box > .link-btn:nth-child(2) .link-btn-icon {
  background: url(https://game.gtimg.cn/images/arc/web202605/link_icon3.png)
    no-repeat center / contain;
}

.global-link-box .login-box .link-btn:nth-child(1) .link-btn-icon {
  background: url(https://game.gtimg.cn/images/arc/web202605/link_icon4.png)
    no-repeat center / contain;
}

.link-btn-text {
  color: #ebe6d7;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  margin-left: 0;
  transition:
    max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease 0.1s,
    margin-left 0.3s ease;
}

.global-link-box .link-btn:hover {
  min-width: 172px;
  width: auto;
  padding: 0 20px;
  border-color: rgba(255, 255, 255, 0.4);
}

.global-link-box .link-btn:last-child:hover {
  width: auto;
  min-width: auto;
  padding: 0;
}

.global-link-box .link-btn:hover .link-btn-text {
  max-width: 120px;
  opacity: 1;
  margin-left: 10px;
}

.global-link-box .link-btn::after {
  content: '';
  position: absolute;
  top: -15px;
  left: -24px;
  width: 0;
  height: 78px;
  background: url('https://game.gtimg.cn/images/arc/web202605/circle_effect.webp')
    no-repeat left center;
  background-size: 216px 78px;
  overflow: hidden;
  opacity: 0;
  transition:
    width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
  pointer-events: none;
}

.global-link-box > .link-btn:nth-child(1)::before {
  content: '';
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: 198px;
  height: 198px;
  background: url('https://game.gtimg.cn/images/arc/web202605/mini_program_code.webp')
    no-repeat left center;
  background-size: 100% 100%;
  overflow: hidden;
  opacity: 0;
}

.global-link-box > .link-btn:nth-child(1):hover::before {
  opacity: 1;
}

.global-link-box .link-btn:last-child::after {
  transition: none;
  width: fit-content;
}

.global-link-box .link-btn:hover::after {
  width: 216px;
  opacity: 1;
}
.global-link-box .link-btn:last-child:hover::after {
  opacity: 0;
  width: fit-content;
}

/* "测试招募"按钮保持展开状态（不依赖 hover） */
.global-link-box > .link-btn:nth-child(2) {
  min-width: 172px;
  width: auto;
  padding: 0 20px;
  border-color: rgba(255, 255, 255, 0.4);
  display: none;
}

.global-link-box > .link-btn:nth-child(2) .link-btn-text {
  max-width: 120px;
  opacity: 1;
  margin-left: 10px;
}

.global-link-box > .link-btn:nth-child(2)::after {
  width: 216px;
  opacity: 1;
}

/* follow-box */
.wrap .follow-box {
  position: absolute;
  right: 40px;
  bottom: 20px;
  /* display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2; */
  width: 38px;
  height: 65px;
  background: url('https://game.gtimg.cn/images/arc/web202605/subscribeuse.png')
    no-repeat center center;
  background-size: 100% 100%;
  z-index: 3;
  cursor: pointer;
}
.wrap .follow-box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 39px;
  background: url('https://game.gtimg.cn/images/arc/web202605/circle.png')
    no-repeat center center;
  background-size: 100% 100%;
  /* 默认隐藏，原地旋转的中心点 */
  transform-origin: center center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.wrap .follow-box:hover::after {
  opacity: 1;
  /* hover时启动原地循环旋转动画 */
  animation: rotate 1s linear infinite;
}
/* .wrap .follow-icon {
  width: 60px;
  height: 36px;
  background-color: #fff;
  margin-bottom: 30px;
}

.wrap .follow-title {
  width: 36px;
  height: 36px;
  font-size: 16px;
  margin-bottom: 30px;
  position: relative;
}

.wrap .follow-title::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 36px;
  height: 1px;
  border: none;
  border-bottom: 1px solid #fff;
} */

.wrap .music-control {
  position: absolute;
  right: 40px;
  bottom: 130px;
  width: 42px;
  height: 32px;
  z-index: 3;
  cursor: pointer;
}
.wrap .music-control .music-play,
.wrap .music-control .music-pause {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.wrap .music-control .music-play {
  background: url('https://game.gtimg.cn/images/arc/web202605/music_play_effect.webp')
    no-repeat center center;
  background-size: 100% 100%;
  display: block;
  position: relative;
}
.wrap .music-control .music-pause {
  background: url('https://game.gtimg.cn/images/arc/web202605/music_pause.png')
    no-repeat center center;
  background-size: 100% 100%;
  display: none;
}
/* 暂停状态：展示「播放」图标，点击后会切回播放状态 */
.wrap .music-control.is-paused .music-play {
  display: none !important;
}

.wrap .music-control.is-paused .music-pause {
  display: block !important;
}

/* ===== page1 ===== */
.page1 {
  /* background: url("https://game.gtimg.cn/images/arc/web202605/page1.png")
    no-repeat center center;
  background-size: cover; */
  position: relative;
  overflow: hidden;
}

/* page1视频背景样式 */
.page1-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -1;
}

.page1 .dirction-box {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0px;
  height: calc(100% - 50px);
  min-width: 240px;
  letter-spacing: 2px;
}

.page1 .prev-box {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  left: 50%;
  transform: translateX(-50%);
  width: 191px;
  height: 21px;
  background: url('https://game.gtimg.cn/images/arc/web202605/prev.png')
    no-repeat center center;
  background-size: 100% 100%;
}
.page1 .prev-box::after {
  content: '';
  position: absolute;
  left: -7px;
  top: -7px;
  width: 35px;
  height: 33px;
  transform: rotate(180deg);
  background: url(https://game.gtimg.cn/images/arc/web202605/arrow_effect.webp)
    no-repeat center center;
  opacity: 0;
}
.page1 .prev-box:hover::after {
  opacity: 1;
}

.page1 .next-box {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  letter-spacing: 5px;
  width: 153px;
  height: 22px;
  background: url('https://game.gtimg.cn/images/arc/web202605/next.png')
    no-repeat center center;
  background-size: 100% 100%;
}

.page1 .next-box::after {
  content: '';
  position: absolute;
  left: -7px;
  top: -5px;
  width: 35px;
  height: 33px;
  background: url(https://game.gtimg.cn/images/arc/web202605/arrow_effect.webp)
    no-repeat center center;
  opacity: 0;
}
.page1 .next-box:hover::after {
  opacity: 1;
}

.page1 .content-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 195px;
}
.page1 .content-box .logo-con {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 96px;
  opacity: 0;
  transform: translateY(96px);
}

@keyframes logoSlideUp {
  0% {
    opacity: 0;
    transform: translateY(96px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.page1 .content-box .logo-con.slide-in {
  animation: logoSlideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.page1 .logo-con .game-logo {
  height: 127px;
  width: 277px;
  background: url(https://game.gtimg.cn/images/arc/web202605/game_logo.png)
    no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.page1 .logo-con .btn-play {
  position: absolute;
  right: 0;
  top: 0;
  width: 43px;
  height: 43px;
  background: url(https://game.gtimg.cn/images/arc/web202605/btn_play.png);
  cursor: pointer;
  visibility: hidden;
}

@keyframes btnSubscribeSlideDown {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-43px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.page1 .resevation-box {
  display: flex;
  align-items: center;
  position: absolute;
  left: 50%;
  bottom: 0;
  opacity: 0;
  transform: translateX(-50%) translateY(-43px);
}

.page1 .resevation-box.slide-in {
  animation: btnSubscribeSlideDown 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    0.8s forwards;
}

.page1 .btn-reservation {
  width: 194px;
  height: 48px;
  background: url(https://game.gtimg.cn/images/arc/web202605/btn_reservate.png);
  cursor: pointer;
  position: relative;
}

.page1 .btn-reservation::after {
  position: absolute;
  content: '';
  top: -12px;
  left: -18px;
  width: 230px;
  height: 74px;
  /*  TODO 立即预约待替换资源 */
  background: url(https://game.gtimg.cn/images/arc/web202605/reserve_effect1.webp);
  background-size: 100% 100%;
  pointer-events: none;
}

.page1 .btn-cancelReservation {
  width: 194px;
  height: 48px;
  background: url(https://game.gtimg.cn/images/arc/web202605/btn_reservated.png);
  cursor: pointer;
}

/* 解绑手机号按钮样式 */
.page1 .btn-unbind-phone {
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  margin: 50px;
}

/* ===== page2 ===== */
.page2 {
  background: url('https://game.gtimg.cn/images/arc/web202605/page2.png')
    no-repeat center center;
  background-size: cover;
}
.page2 .location-box {
  width: 100%;
  height: 100%;
  z-index: 1;
  position: relative;
}
.page2 .location1 {
  position: absolute;
  /* 设计稿基准 1920×1080：left 800px / top 130px */
  left: 41.6667%;
  top: 12.037%;
  width: 160px;
  height: 120px;
}
.page2 .location3 {
  position: absolute;
  /* 设计稿基准 1920×1080：left 1330px / top 650px */
  left: 76.6667%;
  top: 51.9583%;
  width: 160px;
  height: 120px;
}
.page2 .location2 {
  position: absolute;
  /* 设计稿基准 1920×1080：left 460px / top 430px */
  left: 23.9583%;
  top: 39.8148%;
  width: 160px;
  height: 120px;
}
.page2 .page2-flash-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.page2 .page2-flash-video.visible {
  opacity: 1;
}

.page2 .location1:hover::after {
  position: absolute;
  content: '';
  width: 193px;
  height: 100px;
  background: url(https://game.gtimg.cn/images/arc/web202605/page2_effect1.webp);
  top: -18px;
  left: -18px;
  cursor: pointer;
}

.page2 .location2:hover::after {
  position: absolute;
  content: '';
  width: 193px;
  height: 100px;
  background: url(https://game.gtimg.cn/images/arc/web202605/page2_effect1.webp);
  top: -18px;
  left: -18px;
  cursor: pointer;
}

.page2 .page2-flash-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 1;
  background: url(https://game.gtimg.cn/images/arc/web202605/page2_flash_effect.webp)
    no-repeat center center;
  background-size: 100% 100%;
}

.page2:has(.location2:hover) .page2-flash-effect {
  opacity: 1;
}

.location-box {
  position: absolute;
  z-index: 2;
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* left: 800px;
  top: 130px; */
  /* width: 160px;
  height: 120px; */
  /* opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); */
}

.location-box.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.location-dot {
  width: 35px;
  height: 35px;
  position: absolute;
  bottom: 0;
  left: 28px;
  opacity: 0;
  transform: scale(0);
}

@keyframes dotUp {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.location-dot .location-dot-outer {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: rgb(0, 0, 0, 0.5);
  position: relative;
}

.location-dot .location-dot-inner {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 50%;
}
.location1:hover .location-dot .location-dot-inner {
  background-color: #daa820;
}
.location2:hover .location-dot .location-dot-inner {
  background-color: #daa820;
}

.location-line {
  height: 35px;
  background: url(https://game.gtimg.cn/images/arc/web202605/location_line.png)
    no-repeat center center;
  background-size: cover;
  position: absolute;
  bottom: 30px;
  left: 55px;
  opacity: 0;
  width: 0;
}

@keyframes lineUp {
  0% {
    opacity: 0;
    width: 0;
  }
  100% {
    opacity: 1;
    width: 25px;
  }
}

.page2 .location-info {
  width: 160px;
  background-color: rgba(25, 27, 39, 0.8);
  border-radius: 5px;
  position: absolute;
  bottom: 56px;
  left: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  overflow: hidden;
  opacity: 0;
  height: 0;
  box-sizing: border-box;
  border: 1px solid #605e5f;
}

@keyframes heightUp {
  0% {
    opacity: 0;
    height: 0;
  }
  100% {
    opacity: 1;
    height: 62px;
  }
}

/* location-text 文字从底部到顶部展开 */
.location-text {
  opacity: 0;
  transform: translateY(100%);
  color: #ece2d0;
  font-weight: 900;
}

@keyframes textUp {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== page3 ===== */
.page3 {
  /* background: url("https://game.gtimg.cn/images/arc/web202605/page3.png") no-repeat center center; */
  /* background-size: cover; */
  position: relative;
}

.page3-gallery {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* opacity: 0; */
  /* transition: opacity 0.4s ease; */
}

.page3-gallery.visible {
  opacity: 1;
}
.page3-gallery .page3-gallery-item {
  /* width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; */
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* 当前激活的图片：完全可见 */
.page3-gallery .page3-gallery-item.active {
  opacity: 1;
  pointer-events: all;
  z-index: 2;
  transform: translateX(0);
  transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}

.page3-gallery-item-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}

/* 旧图片切换时的暗区遮罩（伪元素叠加） */
.page3-gallery .page3-gallery-item.active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.6s ease;
  pointer-events: none;
  z-index: 3;
}

/* 切换进行中，旧图片暗区加深 */
.page3-gallery .page3-gallery-item.active.dimming::after {
  background: rgba(0, 0, 0, 0.7);
}

/* 旧图片退出偏移：向左退出（新图从右进入时） */
.page3-gallery .page3-gallery-item.active.exiting-left {
  transform: translateX(-3%);
}

/* 旧图片退出偏移：向右退出（新图从左进入时） */
.page3-gallery .page3-gallery-item.active.exiting-right {
  transform: translateX(3%);
}

/* 新图片窗帘动画时，叠加一个从暗到亮的遮罩 */
.page3-gallery .page3-gallery-item.curtain-in-right::before,
.page3-gallery .page3-gallery-item.curtain-in-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  animation: galleryReveal 0.7s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  pointer-events: none;
  z-index: 11;
}

@keyframes galleryReveal {
  0% {
    background: rgba(0, 0, 0, 0.5);
  }
  100% {
    background: rgba(0, 0, 0, 0);
  }
}

/* 正在执行动画的图片：强制可见，z-index 最高 */
.page3-gallery .page3-gallery-item.curtain-in-right,
.page3-gallery .page3-gallery-item.curtain-in-left {
  opacity: 1;
  z-index: 10;
}

/* 窗帘从左边向右边拉开(向前切换) */
.page3-gallery .page3-gallery-item.page3-gallery-item.curtain-in-right {
  animation: galleryCurtainRight 0.7s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* 窗帘从右边向左拉开（向后切换） */
.page3-gallery .page3-gallery-item.curtain-in-left {
  animation: galleryCurtainLeft 0.7s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes galleryCurtainRight {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes galleryCurtainLeft {
  0% {
    clip-path: inset(0 0 0 100%);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

.page3-gallery-indicator {
  position: absolute;
  /* top: 900px; */
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  gap: 40px;
  z-index: 3;
  width: 1060px;
  /* padding: 0px 86px; */
  height: 230px;
  /* background-color: #1a1d26; */
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%) scale(0.8);
}

.page3-gallery-indicator .page3-gallery-indicator-con {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 7px 0;
}
.page3-gallery-indicator .page3-gallery-indicator-box {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: fit-content;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.page3-gallery-indicator
  .page3-gallery-indicator-box
  .page3-gallery-indicator-item {
  box-sizing: border-box;
  width: 310px;
  height: 175px;
  /* background-color: rgba(255, 255, 255, 0.5); */
  /* border-radius: 10px; */
  margin: 0 15px;
  flex-shrink: 0;
  cursor: pointer;
  transition:
    width 0.4s ease,
    height 0.4s ease,
    background-color 0.4s ease;
  position: relative;
  /* border: 1px solid #747373; */
}

.page3-gallery-indicator
  .page3-gallery-indicator-box
  .page3-gallery-indicator-item.active {
  width: 380px;
  height: 215px;
  /* background-color: #fff; */
  position: relative;
}
.page3-gallery-indicator
  .page3-gallery-indicator-box
  .page3-gallery-indicator-item:not(.active)::before {
  /* 灰色遮罩层 */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

.page3-gallery-indicator
  .page3-gallery-indicator-box
  .page3-gallery-indicator-item:hover::before {
  background: none;
}

.page3-gallery-indicator
  .page3-gallery-indicator-box
  .page3-gallery-indicator-item.active::after {
  content: '';
  position: absolute;
  top: -16px;
  left: -25px;
  width: 425px;
  height: 251px;
  background: url('https://game.gtimg.cn/images/arc/web202605/gallery_active_effect.webp')
    no-repeat center center;
}

.page3-gallery-indicator
  .page3-gallery-indicator-box
  .page3-gallery-indicator-item:last-child.active::before {
  background: none;
}
.page3-gallery-indicator
  .page3-gallery-indicator-box
  .page3-gallery-indicator-item[data-index='0'].active
  .indicator-item-img {
  width: 100%;
  height: 170px;
  background: url(https://game.gtimg.cn/images/arc/web202605/page3_4_active.png);
  background-size: cover;
  border-radius: 10px 10px 0 0;
}
.page3-gallery-indicator
  .page3-gallery-indicator-box
  .page3-gallery-indicator-item[data-index='1'].active
  .indicator-item-img {
  width: 100%;
  height: 170px;
  background: url(https://game.gtimg.cn/images/arc/web202605/page3_1_active.png);
  background-size: cover;
  border-radius: 10px 10px 0 0;
}
.page3-gallery-indicator
  .page3-gallery-indicator-box
  .page3-gallery-indicator-item[data-index='2'].active
  .indicator-item-img {
  width: 100%;
  height: 170px;
  background: url(https://game.gtimg.cn/images/arc/web202605/page3_2_active.png);
  background-size: cover;
  border-radius: 10px 10px 0 0;
}
.page3-gallery-indicator
  .page3-gallery-indicator-box
  .page3-gallery-indicator-item[data-index='3'].active
  .indicator-item-img {
  width: 100%;
  height: 170px;
  background: url(https://game.gtimg.cn/images/arc/web202605/page3_3_active.png);
  background-size: cover;
  border-radius: 10px 10px 0 0;
}
/* .page3-gallery-indicator
  .page3-gallery-indicator-box
  .page3-gallery-indicator-item[data-index="4"].active
  .indicator-item-img {
  width: 100%;
  height: 170px;
  background: url(https://game.gtimg.cn/images/arc/web202605/page3_5.png);
  background-size: cover;
  border-radius: 10px 10px 0 0;
} */

.page3-gallery-indicator
  .page3-gallery-indicator-box
  .page3-gallery-indicator-item[data-index='0']
  .indicator-item-img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: url(https://game.gtimg.cn/images/arc/web202605/page3_4.png)
    no-repeat center center;
  background-size: cover;
}
.page3-gallery-indicator
  .page3-gallery-indicator-box
  .page3-gallery-indicator-item[data-index='1']
  .indicator-item-img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: url(https://game.gtimg.cn/images/arc/web202605/page3_1.png);
  background-size: cover;
}
.page3-gallery-indicator
  .page3-gallery-indicator-box
  .page3-gallery-indicator-item[data-index='2']
  .indicator-item-img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: url(https://game.gtimg.cn/images/arc/web202605/page3_2.png);
  background-size: cover;
}
.page3-gallery-indicator
  .page3-gallery-indicator-box
  .page3-gallery-indicator-item[data-index='3']
  .indicator-item-img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: url(https://game.gtimg.cn/images/arc/web202605/page3_3.png);
  background-size: cover;
}
/* .page3-gallery-indicator
  .page3-gallery-indicator-box
  .page3-gallery-indicator-item[data-index="4"]
  .indicator-item-img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: url(https://game.gtimg.cn/images/arc/web202605/page3_5.png);
  background-size: cover;
} */

.page3-gallery-indicator
  .page3-gallery-indicator-box
  .page3-gallery-indicator-item.active
  .indicator-info {
  width: 100%;
  height: calc(100% - 170px);
  display: flex;
}

/* .page3-gallery-indicator
  .page3-gallery-indicator-box
  .page3-gallery-indicator-item::after {
  content: "";
  width: 90px;
  height: 22px;
  background: url("https://game.gtimg.cn/images/arc/web202605/line.png");
  position: absolute;
  top: 50%;
  right: 99%;
  transform: translateY(-50%);
  background-color: #ccb167;
}
.page3-gallery-indicator
  .page3-gallery-indicator-box
  .page3-gallery-indicator-item::before {
  content: "";
  width: 90px;
  height: 22px;
  background: url("https://game.gtimg.cn/images/arc/web202605/line.png");
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  transform: scaleX(-1);
  background-color: #5e2a2a;
} */
.page3-gallery-indicator
  .page3-gallery-indicator-box
  .page3-gallery-indicator-item.active
  .indicator-info::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 45px;
  width: 48px;
  height: 43px;
  background: url(https://game.gtimg.cn/images/arc/web202605/location_active_icon.png)
    no-repeat center center;
}
.page3-gallery-indicator
  .page3-gallery-indicator-box
  .page3-gallery-indicator-item
  .indicator-info {
  position: relative;
  display: none;
}

.page3-gallery-indicator
  .page3-gallery-indicator-box
  .page3-gallery-indicator-item.active
  .indicator-info
  .indicator-text {
  width: 100%;
  height: 100%;
  background-color: #1d161b;
  border-radius: 0 0 10px 10px;
  padding-left: 20px;
  display: flex;
  align-items: center;
  font-weight: 900;
  font-size: 18px;
}
/* .page3-gallery-indicator
  .page3-gallery-indicator-box
  .page3-gallery-indicator-item.active
  .indicator-icon {
  width: 38px;
  height: 44px;
  background: url("https://game.gtimg.cn/images/arc/web202605/indicator_active_icon.png");
} */

.page3-gallery-direction {
  position: absolute;
  /* top: 900px; */
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 980px;
  height: 210px;
}

.page3-gallery-direction .direction-icon {
  box-sizing: border-box;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid #fff;
  background: url(https://game.gtimg.cn/images/arc/web202605/gallery_left.png)
    no-repeat center center;
  cursor: pointer;
  position: relative;
}

.page3-gallery-direction .direction-icon:hover {
  border: none;
}

.page3-gallery-direction .direction-icon:hover::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: 52px;
  height: 52px;
  background: url(https://game.gtimg.cn/images/arc/web202605/gallery_effect.webp)
    no-repeat center center;
}

.page3-gallery-direction .direction-icon:last-child {
  transform: rotate(180deg);
}

/* ===== page4 ===== */
.page4 {
  overflow: hidden;
  position: relative;
}

/* gfooter 作为 swiper 第 5 页：定位到 #mainSwiper（视口）底部，
 * 不在 .swiper-wrapper 内，因此不会被 swiper 翻页 transform 带走。
 * 默认 translateY(100%) 完全藏在屏幕下方；page4 上推时 translateY(0) 露出。 */
#mainSwiper {
  position: relative;
}
.swiper-slide-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: 10;
  transform: translateY(100%);
  transition: transform 0.5s ease-out;
  will-change: transform;
}
.swiper-slide-footer #gfooter {
  position: relative;
  width: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper-slide-footer .dev-logo {
  width: 160px;
  height: 36px;
  background: url('https://game.gtimg.cn/images/arc/web202605/logo-embark.png')
    no-repeat 0 0 / 100% 100%;
}

/* page4 与 footer 联动：body 加 .page4-footer-revealed 时
 *   - footer 整体上移露出（translateY(0)）
 *   - page4 容器整体上移 footer 高度（避免 footer 遮挡 page4 底部内容）
 * --footer-h 由 JS 在测量后写入。 */
body.page4-footer-revealed .swiper-slide-footer {
  transform: translateY(0);
}
.page4-transition {
  transition: transform 0.5s ease-out;
  will-change: transform;
}
body.page4-footer-revealed .page4-transition {
  transform: translateY(calc(-1 * var(--footer-h, 0px)));
}
/*
 * 背景图层（抗漏底方案）：
 * - 盒子向四周各外扩 --bg-pad（默认 80px），即水平 / 垂直每边都有 80px 物理余量
 * - background-size: cover → 无论容器比例如何都铺满盒子，不露白底
 * - JS 视差将 translate 绝对值 clamp 在 [-PAD+4, PAD-4] 内，留 4px 抗 subpixel 渲染
 * - MAX_OFFSET = 40，远小于余量 80，垂直 / 水平任何方向都有 2 倍安全系数
 */
.page4-bg {
  --bg-pad: 80px;
  position: absolute;
  top: calc(-1 * var(--bg-pad));
  left: calc(-1 * var(--bg-pad));
  right: calc(-1 * var(--bg-pad));
  bottom: calc(-1 * var(--bg-pad));
  background: url('https://game.gtimg.cn/images/arc/web202605/page4_cover.jpg')
    no-repeat center center;
  background-size: cover;
  transform-origin: 50% 50%;
  will-change: transform;
  z-index: 0;
  pointer-events: none;
}

.page4 .location-box {
  position: absolute;
  z-index: 1;
  opacity: 0;
  transform: translateX(var(--parallax-x, 0px))
    translateY(calc(50px + var(--parallax-y, 0px)));
  transition:
    opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.page4 .location-box.animate-in {
  opacity: 1;
  transform: translateX(var(--parallax-x, 0px))
    translateY(var(--parallax-y, 0px));
  /* animate-in 后 transform 不再有 transition，由 rAF lerp 驱动，与背景图完全同步 */
  transition:
    opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0s;
}

.page4 .location .location-info {
  background-color: none;
  width: 110px;
  height: 35px;
  cursor: pointer;
  border-radius: 5px;
  position: absolute;
  bottom: 55px;
  left: 30px;
  font-size: 20px;
  overflow: hidden;
  opacity: 0;
  height: 0;
}
.page4 .location .location-info .location-text {
  width: 110px;
  height: 35px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(25, 27, 39, 0.8);
  border-radius: 10px;
  box-sizing: border-box;
  border: none;
  /* border: 1px solid #605e5f; */
}
.page4 .location:hover .location-info .location-text {
  border-radius: 5px 0 0 5px;
  border: none;
}
.page4 .location:hover .location-info {
  width: 150px;
  justify-content: none;
  /* border-right: none; */
  box-sizing: border-box;
  /* border: 1px solid #605e5f; */
}

.page4 .location:hover .location-info .location-icon {
  width: 35px;
  height: 35px;
  cursor: pointer;
  position: absolute;
  left: 110px;
  top: 0;
  z-index: 1;
  background-color: rgb(0, 0, 0, 0.5);
  border-radius: 0 5px 5px 0;
  border-left: 1px solid #605e5f;
}
.page4 .location:hover .location-info .location-icon {
  animation: fromLeft 0.3s ease forwards;
  position: absolute;
}

.page4 .location-icon::after {
  /* 实现一个三角形橙色 */
  content: '';
  width: 12px;
  height: 15px;
  background: url(https://game.gtimg.cn/images/arc/web202605/triangle.png);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0;
}

.page4 .location:hover .location-icon::after {
  opacity: 1;
}

.page4 .location-icon::before {
  /* 实现圆圈转圈动画 */
  content: '';
  box-sizing: border-box;
  background: url(https://game.gtimg.cn/images/arc/web202605/icon_circle.png);
  width: 30px;
  height: 30px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -15px;
  margin-top: -15px;
  transform-origin: 13px 15px;
  z-index: 2;
  opacity: 0;
}
.page4 .location:hover .location-icon::before {
  opacity: 1;
  animation: rotate 0.8s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fromLeft {
  0% {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0% 0 0);
  }
}

.page4 .location:hover .location-dot .location-dot-inner {
  background-color: #daa820;
}

.page4 .location:hover::after {
  position: absolute;
  content: '';
  width: 352px;
  height: 193px;
  top: -40px;
  left: -80px;
  cursor: pointer;
}
.page4 .location1:hover::after {
  position: absolute;
  content: '';
  background: url(https://game.gtimg.cn/images/arc/web202605/page4_effect2.webp)
    no-repeat center center;
  background-size: 100% 100%;
  cursor: pointer;
}
.page4 .location2:hover::after {
  position: absolute;
  content: '';
  background: url(https://game.gtimg.cn/images/arc/web202605/page4_effect2.webp);
  cursor: pointer;
}
.page4 .location3:hover::after {
  position: absolute;
  content: '';
  background: url(https://game.gtimg.cn/images/arc/web202605/page4_effect2.webp);
  cursor: pointer;
}
.page4 .location4:hover::after {
  position: absolute;
  content: '';
  top: -38px;
  background: url(https://game.gtimg.cn/images/arc/web202605/page4_effect2.webp);
  cursor: pointer;
}
.page4 .location5:hover::after {
  position: absolute;
  content: '';
  background: url(https://game.gtimg.cn/images/arc/web202605/page4_effect2.webp);
  cursor: pointer;
}

.page4 .location {
  width: 160px;
  height: 100px;
}

.page4 .location-box {
  width: 100%;
  height: 100%;
  position: relative;
}

.page4 .location1 {
  position: absolute;
  /* 设计稿基准 1920×1080：top 580px / left 380px */
  top: 46%;
  left: 14.5%;
}
.page4 .location2 {
  position: absolute;
  /* 设计稿基准 1920×1080：top 300px / left 620px */
  top: 13.9%;
  left: 25.0526%;
}
.page4 .location3 {
  position: absolute;
  /* 设计稿基准 1920×1080：top 700px / left 1080px */
  top: 53%;
  left: 49%;
}
.page4 .location4 {
  position: absolute;
  /* 设计稿基准 1920×1080：top 270px / left 1444px */
  top: 6.75%;
  right: 24.5%;
}
.page4 .location5 {
  position: absolute;
  /* 设计稿基准 1920×1080：top 545px / left 1572px */
  top: 38.52%;
  right: 23.2%;
}

/* .page4 .page-container {
  position: absolute;
  right: 40px;
  bottom: 20px;
  width: 42px;
  height: 140px;
}
.page4 .page-container .follow-box {
  position: absolute;
  left: 0;
  bottom: 0px;
}
.page4 .page-container .music-control {
  position: absolute;
  left: 0;
  top: 0px;
  width: 42px;
  height: 32px;
  z-index: 3;
  cursor: pointer;
}
.page4 .page-container .music-control .music-play,
.page4 .page-container .music-control .music-pause {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.page4 .page-container .music-control .music-play {
  background: url("https://game.gtimg.cn/images/arc/web202605/music_play.png") no-repeat center center;
  background-size: 100% 100%;
  display: none;
}
.page4 .page-container .music-control .music-pause {
  background: url("https://game.gtimg.cn/images/arc/web202605/music_pause.png") no-repeat center center;
  background-size: 100% 100%;
  display: block;
}
/* 暂停状态：展示「播放」图标，点击后会切回播放状态 */
/* .page4 .page-container .music-control.is-paused .music-play {
  display: block;
}
.page4 .page-container .music-control.is-paused .music-pause {
  display: none;
} */
@keyframes heightUp2 {
  0% {
    opacity: 0;
    height: 0;
  }
  100% {
    opacity: 1;
    height: 35px;
  }
}
/*
.slide-content {
  width: 100%;
  height: 100%;
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
} */

/* page4的二级页面 */
.page4-sec-gallery {
  background-color: #0a0c14; /* 防止快速点击时 gallery-item 全部隐藏露出白色底 */
}

.page4-sec-gallery .page4-sec-gallery-item {
  /* width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; */
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 视频全覆盖 */
.page4-sec-gallery .page4-sec-gallery-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 当前激活的图片：完全可见 */
.page4-sec-gallery .page4-sec-gallery-item.active {
  opacity: 1;
  pointer-events: all;
  z-index: 2;
  transform: translateX(0);
  transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}

/* 窗帘动画：强制可见，z-index 最高 */
.page4-sec-gallery .page4-sec-gallery-item.curtain-in-right,
.page4-sec-gallery .page4-sec-gallery-item.curtain-in-left {
  opacity: 1;
  z-index: 10;
}

/* 旧图片退出偏移：向左退出（新图从右进入时） */
.page4-sec-gallery .page4-sec-gallery-item.active.exiting-left {
  transform: translateX(-3%);
}

/* 旧图片退出偏移：向右退出（新图从左进入时） */
.page4-sec-gallery .page4-sec-gallery-item.active.exiting-right {
  transform: translateX(3%);
}
/* 窗帘从左往右拉出（向前切换） */
.page4-sec-gallery .page4-sec-gallery-item.curtain-in-right {
  animation: galleryCurtainRight 0.7s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* 窗帘从右往左退回（向后切换） */
.page4-sec-gallery .page4-sec-gallery-item.curtain-in-left {
  animation: galleryCurtainLeft 0.7s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.page4-gallery-indicator {
  position: absolute;
  /* top: 900px; */
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  gap: 40px;
  z-index: 3;
  /* width: 1225px; */
  /* padding: 0px 86px; */
  width: 1060px;
  height: 230px;
  /* background-color: #1a1d26; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.page4-gallery-indicator .page4-gallery-indicator-con {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 7px 0;
}
.page4-gallery-indicator .page4-gallery-indicator-box {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: fit-content;
  position: relative;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.page4-gallery-indicator
  .page4-gallery-indicator-box
  .page4-gallery-indicator-item {
  box-sizing: border-box;
  width: 310px;
  height: 175px;
  /* background-color: rgba(255, 255, 255, 0.5); */
  /* border-radius: 10px; */
  margin: 0 15px;
  flex-shrink: 0;
  cursor: pointer;
  transition:
    width 0.4s ease,
    height 0.4s ease,
    background-color 0.4s ease;
  position: relative;
  /* border: 1px solid #747373; */
}

.page4-gallery-indicator
  .page4-gallery-indicator-box
  .page4-gallery-indicator-item.active {
  width: 380px;
  height: 215px;
  /* background-color: #fff; */
  position: relative;
}
.page4-gallery-indicator
  .page4-gallery-indicator-box
  .page4-gallery-indicator-item:not(.active)::before {
  /* 灰色遮罩层 */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

.page4-gallery-indicator
  .page4-gallery-indicator-box
  .page4-gallery-indicator-item:hover::before {
  background: none;
}

.page4-gallery-indicator
  .page4-gallery-indicator-box
  .page4-gallery-indicator-item.active::after {
  content: '';
  position: absolute;
  top: -16px;
  left: -26px;
  width: 425px;
  height: 251px;
  background: url('https://game.gtimg.cn/images/arc/web202605/gallery_active_effect.webp')
    no-repeat center center;
}

.page4-gallery-indicator
  .page4-gallery-indicator-box
  .page4-gallery-indicator-item:last-child.active::before {
  background: none;
}
.page4-gallery-indicator
  .page4-gallery-indicator-box
  .page4-gallery-indicator-item.active
  .indicator-item-img {
  position: relative;
}
.page4-gallery-indicator
  .page4-gallery-indicator-box
  .page4-gallery-indicator-item.active
  .indicator-item-img::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 43px;
  background: url(https://game.gtimg.cn/images/arc/web202605/location_active_icon.png)
    no-repeat center center;
}
.page4-gallery-indicator
  .page4-gallery-indicator-box
  .page4-gallery-indicator-item[data-index='0'].active
  .indicator-item-img {
  width: 100%;
  height: 170px;
  background: url(https://game.gtimg.cn/images/arc/web202605/page4_sec_01.png);
  background-size: cover;
  border-radius: 10px 10px 0 0;
}
.page4-gallery-indicator
  .page4-gallery-indicator-box
  .page4-gallery-indicator-item[data-index='1'].active
  .indicator-item-img {
  width: 100%;
  height: 170px;
  background: url(https://game.gtimg.cn/images/arc/web202605/page4_sec_02.png);
  background-size: cover;
  border-radius: 10px 10px 0 0;
}
.page4-gallery-indicator
  .page4-gallery-indicator-box
  .page4-gallery-indicator-item[data-index='2'].active
  .indicator-item-img {
  width: 100%;
  height: 170px;
  background: url(https://game.gtimg.cn/images/arc/web202605/page4_sec_03.png);
  background-size: cover;
  border-radius: 10px 10px 0 0;
}
.page4-gallery-indicator
  .page4-gallery-indicator-box
  .page4-gallery-indicator-item[data-index='3'].active
  .indicator-item-img {
  width: 100%;
  height: 170px;
  background: url(https://game.gtimg.cn/images/arc/web202605/page4_sec_04.png);
  background-size: cover;
  border-radius: 10px 10px 0 0;
}
.page4-gallery-indicator
  .page4-gallery-indicator-box
  .page4-gallery-indicator-item[data-index='4'].active
  .indicator-item-img {
  width: 100%;
  height: 170px;
  background: url(https://game.gtimg.cn/images/arc/web202605/page4_sec_05.png);
  background-size: cover;
  border-radius: 10px 10px 0 0;
}

.page4-gallery-indicator
  .page4-gallery-indicator-box
  .page4-gallery-indicator-item[data-index='0']
  .indicator-item-img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: url(https://game.gtimg.cn/images/arc/web202605/page4_sec_01.png)
    no-repeat center center;
  background-size: cover;
}
.page4-gallery-indicator
  .page4-gallery-indicator-box
  .page4-gallery-indicator-item[data-index='1']
  .indicator-item-img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: url(https://game.gtimg.cn/images/arc/web202605/page4_sec_02.png);
  background-size: cover;
}
.page4-gallery-indicator
  .page4-gallery-indicator-box
  .page4-gallery-indicator-item[data-index='2']
  .indicator-item-img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: url(https://game.gtimg.cn/images/arc/web202605/page4_sec_03.png);
  background-size: cover;
}
.page4-gallery-indicator
  .page4-gallery-indicator-box
  .page4-gallery-indicator-item[data-index='3']
  .indicator-item-img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: url(https://game.gtimg.cn/images/arc/web202605/page4_sec_04.png);
  background-size: cover;
}
.page4-gallery-indicator
  .page4-gallery-indicator-box
  .page4-gallery-indicator-item[data-index='4']
  .indicator-item-img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: url(https://game.gtimg.cn/images/arc/web202605/page4_sec_05.png);
  background-size: cover;
}

.page4-gallery-indicator
  .page4-gallery-indicator-box
  .page4-gallery-indicator-item.active
  .indicator-info {
  width: 100%;
  height: calc(100% - 170px);
  display: flex;
}

.page4-gallery-indicator
  .page4-gallery-indicator-box
  .page4-gallery-indicator-item
  .indicator-info {
  position: relative;
  display: none;
}

.page4-gallery-indicator
  .page4-gallery-indicator-box
  .page4-gallery-indicator-item.active
  .indicator-info
  .indicator-text {
  width: 100%;
  height: 100%;
  background-color: #1d161b;
  border-radius: 0 0 10px 10px;
  padding-left: 20px;
  display: flex;
  align-items: center;
}

.page4-gallery-direction {
  position: absolute;
  /* top: 900px; */
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1225px;
  height: 210px;
}

.page4-gallery-direction .direction-icon {
  box-sizing: border-box;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid #fff;
  background: url(https://game.gtimg.cn/images/arc/web202605/gallery_left.png)
    no-repeat center center;
  cursor: pointer;
  position: relative;
}

.page4-gallery-direction .direction-icon:hover {
  border: none;
}

.page4-gallery-direction .direction-icon:hover::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: 52px;
  height: 52px;
  background: url(https://game.gtimg.cn/images/arc/web202605/gallery_effect.webp)
    no-repeat center center;
}

.page4-gallery-direction .direction-icon:last-child {
  transform: rotate(180deg);
}

/* ===== 转场视频覆盖层 ===== */
/*
  目标：与背景 .wrap 完全相同的缩放视觉 —— "cover 式"铺满视口
    → 取最小缩放比覆盖视口：scale = max(视口宽/视频原生宽, 视口高/视频原生高)
    → 视频永远铺满视口、绝不漏底图、绝不出黑边
    → 只做一次等比缩放，永不变形
    → 多余部分由外层 overflow:hidden 自然裁切（等价 object-fit:cover 的效果）

  结构：
    .transition-overlay-scale  外层：position:fixed 铺满视口、overflow:hidden 裁切
      └ .transition-overlay    内层：视频原生尺寸 + scale(cover-scale) + 居中定位
          └ <video>            100% × 100%，容器比例≡视频比例 → fill 不变形

  内层定位：
    - 使用 left/top 配合 transform-origin:0 0 实现"先平移再缩放后仍居中"
    - left = (视口宽 - 视频原生宽 × scale) / 2   （可能为负 = 向左溢出裁切）
    - top  = (视口高 - 视频原生高 × scale) / 2   （可能为负 = 向上溢出裁切）
*/
.transition-overlay-scale {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1100;
  pointer-events: none;
  opacity: 0;
  /* 关闭蒙层时保留 0.18s 淡出，避免转场结束瞬间硬切；
     但"亮起"由 .playing 重置为 0s（见下方），
     必须立刻盖住下层 Swiper 切页画面，防止其他页面视频闪现。 */
  transition: opacity 0.18s ease-out;
  background-color: #000;
}

.transition-overlay-scale.playing {
  opacity: 1;
  pointer-events: all;
  /* 亮起阶段 0s：必须立即不透明盖住下层 Swiper / 页面视频，
     避免 3→0 等切屏中"看到其他视频"。柔和过渡由 video 元素自身的
     opacity 淡入承担（见 JS 中 transitionVideo.style.opacity 控制）。 */
  transition: opacity 0s;
}

.transition-overlay {
  position: absolute;
  left: var(--overlay-left, 0px);
  top: var(--overlay-top, 0px);
  width: var(--overlay-w, 1920px);
  height: var(--overlay-h, 1080px);
  transform: scale(var(--overlay-scale, 1));
  transform-origin: 0 0;
}

/* 双 video 双缓冲：两层 video 绝对定位铺满同一容器，通过 .is-front 切换前后显示。
   - 默认所有 .transition-video-buffer 都是 opacity:0（后台层），
   - 加上 .is-front 的那一层切到 opacity:1 显示在前。
   - 切换是 0s 瞬时（无淡入淡出），保证 A→B swap 当帧完成、视觉无缝。 */
.transition-overlay .transition-video-buffer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  opacity: 0;
  transition: opacity 0s;
  /* 后台层不应该响应交互、也不该影响合成层布局 */
  pointer-events: none;
}

.transition-overlay .transition-video-buffer.is-front {
  opacity: 1;
}

/* ===== 圆盘转盘指示器 ===== */
/* 参考 link-btn 的 translateX 初始偏移思路，配合 JS 的 class 切换实现
   "从左到右滑入指定位置 / 向左反向退出" 的整体平移特效。
   三种状态：
     默认（无类名 / 初始态）    → 屏外左侧 -900px，透明（page0、页面加载时）
     .visible                  → 滑入到位（translateX(0)），完全可见
     .leaving                  → 反向退出回屏外左侧 -900px，透明（切页瞬间触发） */
.dial-indicator {
  position: fixed;
  /* 外圈直径 752，仅露出 12%（≈90px）：left = 90 - 400 - 376 = -686 */
  left: -686px;
  top: 50%;
  /* 初始态：额外向左平移 900px，完全退到左侧视野外 */
  transform: translate(-900px, -50%);
  z-index: 99;
  width: 800px;
  height: 800px;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  /* transform 用更长时长 + 带回弹感的缓出曲线，让"滑入到位"动作感更明显 */
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 进入态：从左侧平滑滑入到指定位置（整体水平平移） */
.dial-indicator.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

/* 离开态：反向向左退出（比默认隐藏更有"被甩出去"的加速感） */
.dial-indicator.leaving {
  opacity: 0;
  visibility: visible;
  transform: translate(-900px, -50%);
  transition:
    opacity 0.45s ease,
    transform 0.55s cubic-bezier(0.55, 0, 0.75, 0);
}

.dial-pointer {
  position: absolute;
  left: 400px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff6060, #c0392b);
  box-shadow:
    0 0 12px rgba(220, 60, 60, 0.9),
    0 0 24px rgba(220, 60, 60, 0.4);
  z-index: 10;
}

.dial-wheel {
  position: absolute;
  width: 800px;
  height: 800px;
  left: 0;
  top: 0;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: 400px 400px;
}

.dial-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.dial-node {
  position: absolute;
  top: 400px;
  left: 400px;
  width: 0;
  height: 0;
  pointer-events: all;
  cursor: pointer;
}

/* 闭环克隆节点：默认隐藏，仅在末页（currentPage===3）时显现，暗示"下一个就是首页" */
.dial-node-clone {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.dial-node-clone.clone-visible {
  opacity: 1;
  pointer-events: all;
}

.dial-node-content {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 7px;
  left: -20px;
  top: -20px;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  white-space: nowrap;
}

/* 两种态 DOM 共存，按 .active 切换显隐（JS 复用节点，避免销毁重建破坏 transition） */
.dial-node .node-badge-wrap,
.dial-node .node-label-active {
  display: none;
}
.dial-node.active .node-badge-wrap,
.dial-node.active .node-label-active {
  display: flex;
}
.dial-node.active .node-number,
.dial-node.active .node-label-small {
  display: none;
}

/* 非激活节点容器：仅一层外圈圆环，无内芯、无填充 */
.node-number {
  position: relative;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* 字符隐藏兜底：即使节点内残留文本也不展示 */
  font-size: 18px;
  line-height: 0;
  color: transparent;
}

/* 外圈圆环：无填充，环色由 JS 内联 border-color 注入为节点色 */
.node-ring-outer {
  position: absolute;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid #9f9d95;
  background: rgba(22, 30, 30, 1);
}

/* 非激活态页面名字（小节点文字）：灰色 #9f9d95、18px */
.node-label-small {
  font-size: 18px;
  color: #9f9d95;
  white-space: nowrap;
  font-weight: bold;
  letter-spacing: 0.5px;
}

/* 当前节点徽章 */
.node-badge-wrap {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.badge-ring-outer {
  position: absolute;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #f6f0d7;
  background: rgba(160, 30, 30, 0.1);
}

.badge-core {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

/* 当前节点文字 */
.node-label-active {
  font-size: 20px;
  color: rgba(255, 255, 255, 1);
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 1px;
}

@keyframes pointerPulse {
  0%,
  100% {
    box-shadow:
      0 0 10px rgba(220, 60, 60, 0.9),
      0 0 20px rgba(220, 60, 60, 0.4);
  }

  50% {
    box-shadow:
      0 0 16px rgba(220, 60, 60, 1),
      0 0 32px rgba(220, 60, 60, 0.6);
  }
}

/* 公共弹窗样式 */
.popup-wrap {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  width: 100%;
  background: url('https://game.gtimg.cn/images/arc/web202605/pop_bg.png');
  z-index: 999;
  /* 用 visibility + opacity + transition 替代 display 切换，避免回流 */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s ease,
    visibility 0s linear 0.5s;
  will-change: opacity;
}
/* 弹窗渐现 */
.popup-wrap.active {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.5s ease,
    visibility 0s linear 0s;
}

.popup-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 317px;
  height: 622px;
  background: url('https://game.gtimg.cn/images/arc/web202605/pop_icon.png');
  z-index: 1000;
}

/* 关注我们弹窗样式 */
.follow-us-popup .follow-us-popup-con {
  display: flex;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 1500px;
  height: 510px;
}

.follow-us-popup .follow-us-popup-con .follow-us-popup-close {
  width: 86px;
  height: 44px;
  background-color: rgba(255, 0, 0, 0.5);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 22px;
  background-color: #1f1f24;
  cursor: pointer;
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}
.follow-us-popup .follow-us-popup-con .follow-us-popup-close::after {
  content: '';
  position: absolute;
  top: -31px;
  left: -31px;
  height: 102px;
  width: 148px;
  background: url('https://game.gtimg.cn/images/arc/web202605/close_effect.webp')
    no-repeat left center;
  opacity: 0;
  z-index: 1001;
  /* transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; */
}
.follow-us-popup .follow-us-popup-con .follow-us-popup-close:hover::after {
  opacity: 1;
}

.follow-us-popup .follow-us-popup-con .follow-us-popup-title {
  font-size: 40px;
  font-weight: bold;
  color: #f1e9cb;
}

.follow-us-popup .follow-us-popup-con .follow-us-popup-content {
  max-width: 1500px;
  height: 160px;
  display: flex;
  align-items: center;
  position: absolute;
  top: 160px;
  left: 50%;
  transform: translateX(-50%);
}

.follow-us-popup
  .follow-us-popup-con
  .follow-us-popup-content
  .follow-us-popup-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #f1e9cb;
  font-size: 20px;
  margin: 0 70px;
  position: relative;
}

.follow-us-popup-item.wx::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 239px;
  height: 225px;
  background: url(https://game.gtimg.cn/images/arc/web202605/wecom_code.webp)
    no-repeat left center;
  background-size: 100% 100%;
  overflow: hidden;
  opacity: 0;
}
.follow-us-popup-item.wx:hover::before {
  transition: opacity 0.3s ease;
  opacity: 1;
}
.follow-us-popup-item.wx:hover .follow-us-popup-item-img {
  transition: opacity 0.3s ease;
  opacity: 0;
}

.follow-us-popup-item.qw::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 225px;
  height: 215px;
  background: url(https://game.gtimg.cn/images/arc/web202605/plant_code.webp)
    no-repeat left center;
  background-size: 100% 100%;
  overflow: hidden;
  opacity: 0;
}
.follow-us-popup-item.qw:hover::before {
  transition: opacity 0.3s ease;
  opacity: 1;
}
.follow-us-popup-item.qw:hover .follow-us-popup-item-img {
  transition: opacity 0.3s ease;
  opacity: 0;
}

.follow-us-popup
  .follow-us-popup-con
  .follow-us-popup-content
  .follow-us-popup-item
  .follow-us-popup-item-img {
  display: inline-block;
  width: 123px;
  height: 109px;
  background-size: cover;
}

.follow-us-popup
  .follow-us-popup-con
  .follow-us-popup-content
  .follow-us-popup-item:nth-child(1)
  .follow-us-popup-item-img {
  background: url('https://game.gtimg.cn/images/arc/web202605/wechat.png')
    no-repeat center center;
}
.follow-us-popup
  .follow-us-popup-con
  .follow-us-popup-content
  .follow-us-popup-item:nth-child(1)
  .follow-us-popup-item-img::after {
  position: absolute;
  content: '';
  top: -48px;
  left: -64px;
  width: 235px;
  height: 213px;
  background: url('https://game.gtimg.cn/images/arc/web202605/wechat_effect.webp')
    no-repeat center center;
  opacity: 0;
}
.follow-us-popup
  .follow-us-popup-con
  .follow-us-popup-content
  .follow-us-popup-item:nth-child(2)
  .follow-us-popup-item-img {
  background: url('https://game.gtimg.cn/images/arc/web202605/blibli.png')
    no-repeat center center;
}
.follow-us-popup
  .follow-us-popup-con
  .follow-us-popup-content
  .follow-us-popup-item:nth-child(2)
  .follow-us-popup-item-img::after {
  position: absolute;
  content: '';
  top: -48px;
  left: -65px;
  width: 235px;
  height: 213px;
  background: url('https://game.gtimg.cn/images/arc/web202605/bilibili_effect.webp')
    no-repeat center center;
  opacity: 0;
}
.follow-us-popup
  .follow-us-popup-con
  .follow-us-popup-content
  .follow-us-popup-item:nth-child(3)
  .follow-us-popup-item-img {
  background: url('https://game.gtimg.cn/images/arc/web202605/wegame.png')
    no-repeat center center;
}
.follow-us-popup
  .follow-us-popup-con
  .follow-us-popup-content
  .follow-us-popup-item:nth-child(3)
  .follow-us-popup-item-img::after {
  position: absolute;
  content: '';
  top: -48px;
  left: -64px;
  width: 235px;
  height: 213px;
  background: url('https://game.gtimg.cn/images/arc/web202605/wegame_effect.webp')
    no-repeat center center;
  opacity: 0;
}
.follow-us-popup
  .follow-us-popup-con
  .follow-us-popup-content
  .follow-us-popup-item:nth-child(4)
  .follow-us-popup-item-img {
  background: url('https://game.gtimg.cn/images/arc/web202605/tictok.png')
    no-repeat center center;
}
.follow-us-popup
  .follow-us-popup-con
  .follow-us-popup-content
  .follow-us-popup-item:nth-child(4)
  .follow-us-popup-item-img::after {
  position: absolute;
  content: '';
  top: -48px;
  left: -64px;
  width: 235px;
  height: 213px;
  background: url('https://game.gtimg.cn/images/arc/web202605/tictok_effect.webp')
    no-repeat center center;
  opacity: 0;
}
.follow-us-popup
  .follow-us-popup-con
  .follow-us-popup-content
  .follow-us-popup-item:nth-child(5)
  .follow-us-popup-item-img {
  background: url('https://game.gtimg.cn/images/arc/web202605/blackbox.png')
    no-repeat center center;
}

.follow-us-popup
  .follow-us-popup-con
  .follow-us-popup-content
  .follow-us-popup-item:nth-child(5)
  .follow-us-popup-item-img::after {
  position: absolute;
  content: '';
  top: -48px;
  left: -64px;
  width: 235px;
  height: 213px;
  background: url('https://game.gtimg.cn/images/arc/web202605/blackbox_effect.webp')
    no-repeat center center;
  opacity: 0;
}
.follow-us-popup
  .follow-us-popup-con
  .follow-us-popup-content
  .follow-us-popup-item:nth-child(6)
  .follow-us-popup-item-img {
  background: url('https://game.gtimg.cn/images/arc/web202605/wechat2.png')
    no-repeat center center;
}
.follow-us-popup
  .follow-us-popup-con
  .follow-us-popup-content
  .follow-us-popup-item:nth-child(6)
  .follow-us-popup-item-img::after {
  position: absolute;
  content: '';
  top: -48px;
  left: -64px;
  width: 235px;
  height: 213px;
  background: url('https://game.gtimg.cn/images/arc/web202605/wechat2_effect.webp')
    no-repeat center center;
  opacity: 0;
}
.follow-us-popup
  .follow-us-popup-con
  .follow-us-popup-content
  .follow-us-popup-item:hover
  .follow-us-popup-item-img::after {
  opacity: 1;
}
.follow-us-popup
  .follow-us-popup-con
  .follow-us-popup-content
  .follow-us-popup-item
  div.follow-us-popup-item-text {
  margin-top: 30px;
}

/* 立即预约弹窗样式 */
.reserve-popup .reserve-popup-con {
  display: inline-block;
  min-width: 550px;
  min-height: 420px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reserve-popup .reserve-popup-con .reserve-popup-close {
  width: 86px;
  height: 44px;
  background-color: rgba(255, 0, 0, 0.5);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 22px;
  background-color: #1f1f24;
  /* opacity: 0.4; */
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
}
.reserve-popup .reserve-popup-con .reserve-popup-close::after {
  content: '';
  position: absolute;
  top: -31px;
  left: -31px;
  width: 148px;
  height: 102px;
  background: url('https://game.gtimg.cn/images/arc/web202605/close_effect.webp')
    no-repeat left center;
  opacity: 0;
  z-index: 1001;
  /* transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; */
}
.reserve-popup .reserve-popup-con .reserve-popup-close:hover::after {
  opacity: 1;
}

.reserve-popup .reserve-popup-con .reserve-popup-title {
  font-size: 40px;
  font-weight: bold;
  color: #f1e9cb;
}

.reserve-popup .reserve-popup-con .reserve-popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 70px;
}

.reserve-popup .reserve-popup-con .reserve-popup-content .reserve-popup-item {
  margin-bottom: 25px;
  color: #76757f;
  font-size: 18px;
}
.reserve-popup
  .reserve-popup-con
  .reserve-popup-content
  .reserve-popup-item:nth-child(2) {
  margin-bottom: 40px;
}
.reserve-popup
  .reserve-popup-con
  .reserve-popup-content
  .reserve-popup-item:nth-child(3) {
  margin-bottom: 45px;
}
.reserve-popup
  .reserve-popup-con
  .reserve-popup-content
  .reserve-popup-item:nth-child(4) {
  margin-bottom: 0px;
}

.reserve-popup
  .reserve-popup-con
  .reserve-popup-content
  div.reserve-popup-item
  input.reserve-input {
  border: none;
  border-radius: 5px;
  background-color: #000;
  opacity: 0.4;
  height: 60px;
  padding: 0 10px;
  width: 540px;
  color: #fff;
  font-size: 20px;
}
.reserve-popup
  .reserve-popup-con
  .reserve-popup-content
  div.reserve-popup-item:nth-child(2)
  input.reserve-input {
  border: none;
  border-radius: 5px;
  background-color: #000;
  opacity: 0.4;
  height: 60px;
  padding: 0 10px;
  width: 400px;
  color: #fff;
  font-size: 20px;
}
.reserve-popup
  .reserve-popup-con
  .reserve-popup-content
  div.reserve-popup-item
  .reserve-popup-btn-code {
  border: none;
  height: 60px;
  width: 135px;
  color: #fff;
  background-color: #000;
  opacity: 0.4;
  font-size: 20px;
  margin-left: 5px;
  border-radius: 5px;
  cursor: pointer;
}

.reserve-popup
  .reserve-popup-con
  .reserve-popup-content
  div.reserve-popup-item
  .reserve-popup-btn-code:disabled,
.reserve-popup
  .reserve-popup-con
  .reserve-popup-content
  div.reserve-popup-item
  .reserve-popup-btn-code.is-counting {
  cursor: not-allowed;
  color: #bbb;
}

.reserve-popup
  .reserve-popup-con
  .reserve-popup-content
  div.reserve-popup-item
  input.reserve-input::placeholder {
  color: #fff;
  text-align: center;
}
.reserve-popup
  .reserve-popup-con
  .reserve-popup-content
  div.reserve-popup-item
  .reserve-popup-btn {
  position: relative;
  font-size: 0;
  border: none;
  width: 422px;
  height: 50px;
  background: url(https://game.gtimg.cn/images/arc/web202605/reserve_btn.png)
    no-repeat center center;
}

.reserve-popup
  .reserve-popup-con
  .reserve-popup-content
  div.reserve-popup-item
  .reserve-popup-btn::after {
  content: '';
  position: absolute;
  top: -70px;
  left: -80px;
  width: 568px;
  height: 194px;
  background: url('https://game.gtimg.cn/images/arc/web202605/reserve_effect.webp')
    no-repeat center center;
  opacity: 0;
  z-index: 1001;
  /* transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; */
}
.reserve-popup
  .reserve-popup-con
  .reserve-popup-content
  div.reserve-popup-item
  .reserve-popup-btn:hover::after {
  opacity: 1;
}

/* 取消预约并解除手机号绑定弹窗样式 */
.cancel-reserve-popup .cancel-reserve-popup-con {
  display: inline-block;
  min-width: 550px;
  min-height: 420px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cancel-reserve-popup .cancel-reserve-popup-con .cancel-reserve-popup-close {
  width: 86px;
  height: 44px;
  background-color: rgba(255, 0, 0, 0.5);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 22px;
  background-color: #1f1f24;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
}
.cancel-reserve-popup
  .cancel-reserve-popup-con
  .cancel-reserve-popup-close::after {
  content: '';
  position: absolute;
  top: -31px;
  left: -31px;
  width: 148px;
  height: 102px;
  background: url('https://game.gtimg.cn/images/arc/web202605/close_effect.webp')
    no-repeat left center;
  opacity: 0;
  z-index: 1001;
}
.cancel-reserve-popup
  .cancel-reserve-popup-con
  .cancel-reserve-popup-close:hover::after {
  opacity: 1;
}

.cancel-reserve-popup .cancel-reserve-popup-con .cancel-reserve-popup-title {
  font-size: 40px;
  font-weight: bold;
  color: #f1e9cb;
}

.cancel-reserve-popup .cancel-reserve-popup-con .cancel-reserve-popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 70px;
}

.cancel-reserve-popup
  .cancel-reserve-popup-con
  .cancel-reserve-popup-content
  .cancel-reserve-popup-item {
  margin-bottom: 25px;
  color: #fff;
  font-size: 24px;
}
.cancel-reserve-popup
  .cancel-reserve-popup-con
  .cancel-reserve-popup-content
  .cancel-reserve-popup-item:nth-child(2) {
  margin-bottom: 40px;
}
.cancel-reserve-popup
  .cancel-reserve-popup-con
  .cancel-reserve-popup-content
  .cancel-reserve-popup-item:nth-child(3) {
  margin-bottom: 45px;
  color: #76757f;
}
.cancel-reserve-popup
  .cancel-reserve-popup-con
  .cancel-reserve-popup-content
  .cancel-reserve-popup-item:nth-child(4) {
  margin-bottom: 0px;
}

.cancel-reserve-popup
  .cancel-reserve-popup-con
  .cancel-reserve-popup-content
  div.cancel-reserve-popup-item
  input.cancel-reserve-input {
  border: none;
  border-radius: 5px;
  background-color: #000;
  opacity: 0.7;
  height: 60px;
  padding: 0 10px;
  width: 400px;
  color: #fff;
  font-size: 20px;
}

.cancel-reserve-popup
  .cancel-reserve-popup-con
  .cancel-reserve-popup-content
  div.cancel-reserve-popup-item
  .cancel-reserve-popup-btn-code {
  border: none;
  height: 60px;
  width: 135px;
  color: #fff;
  background-color: #000;
  opacity: 1;
  font-size: 20px;
  margin-left: 5px;
  border-radius: 5px;
  cursor: pointer;
}

.cancel-reserve-popup
  .cancel-reserve-popup-con
  .cancel-reserve-popup-content
  div.cancel-reserve-popup-item
  .cancel-reserve-popup-btn-code:disabled,
.cancel-reserve-popup
  .cancel-reserve-popup-con
  .cancel-reserve-popup-content
  div.cancel-reserve-popup-item
  .cancel-reserve-popup-btn-code.is-counting {
  cursor: not-allowed;
  opacity: 0.6;
  color: #bbb;
}

.cancel-reserve-popup
  .cancel-reserve-popup-con
  .cancel-reserve-popup-content
  div.cancel-reserve-popup-item
  input.cancel-reserve-input::placeholder {
  color: #fff;
  text-align: center;
}

.cancel-reserve-popup
  .cancel-reserve-popup-con
  .cancel-reserve-popup-content
  div.cancel-reserve-popup-item
  .cancel-reserve-popup-btn {
  position: relative;
  font-size: 0;
  border: none;
  width: 422px;
  height: 50px;
  background: url(https://game.gtimg.cn/images/arc/web202605/cancel_reserve_btn.png)
    no-repeat center center;
}

.cancel-reserve-popup
  .cancel-reserve-popup-con
  .cancel-reserve-popup-content
  div.cancel-reserve-popup-item
  .cancel-reserve-popup-btn::after {
  content: '';
  position: absolute;
  top: -70px;
  left: -80px;
  width: 568px;
  height: 194px;
  background: url('https://game.gtimg.cn/images/arc/web202605/reserve_effect.webp')
    no-repeat center center;
  opacity: 0;
  z-index: 1001;
}
.cancel-reserve-popup
  .cancel-reserve-popup-con
  .cancel-reserve-popup-content
  div.cancel-reserve-popup-item
  .cancel-reserve-popup-btn:hover::after {
  opacity: 1;
}

/* ============================================================
 * 预约 / 取消预约 弹窗：协议勾选框 & 提交按钮禁用态
 * ============================================================ */

/* 勾选框 + 文案整体（label） */
.reserve-popup-agree,
.cancel-reserve-popup-agree {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  user-select: none;
  line-height: 1.5;
  text-align: left;
}

/* 隐藏原生 checkbox，但保留可访问性（仍可被空格触发） */
.reserve-popup-agree-check,
.cancel-reserve-popup-agree-check {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* 自定义勾选框外观 */
.reserve-popup-agree-box,
.cancel-reserve-popup-agree-box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  margin-right: 10px;
  border: 1px solid #888;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
  position: relative;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}

/* 选中态：勾 */
.reserve-popup-agree-check:checked + .reserve-popup-agree-box,
.cancel-reserve-popup-agree-check:checked + .cancel-reserve-popup-agree-box {
  background-color: #fff;
  border-color: #fff;
}
.reserve-popup-agree-check:checked + .reserve-popup-agree-box::after,
.cancel-reserve-popup-agree-check:checked
  + .cancel-reserve-popup-agree-box::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 文案区域 */
.reserve-popup-agree-text,
.cancel-reserve-popup-agree-text {
  flex: 1;
}

/* 提交按钮的"未满足条件"态：灰色 + 禁止点击 */
.reserve-popup .reserve-popup-btn.is-disabled,
.reserve-popup .reserve-popup-btn:disabled,
.cancel-reserve-popup .cancel-reserve-popup-btn.is-disabled,
.cancel-reserve-popup .cancel-reserve-popup-btn:disabled {
  filter: grayscale(1);
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* 禁用态下隐藏 hover 光效 */
.reserve-popup .reserve-popup-btn.is-disabled::after,
.reserve-popup .reserve-popup-btn:disabled::after,
.cancel-reserve-popup .cancel-reserve-popup-btn.is-disabled::after,
.cancel-reserve-popup .cancel-reserve-popup-btn:disabled::after {
  opacity: 0 !important;
}

/* ============================================================
 * btn-play 点击后的全屏视频播放弹层
 * - 铺满视口（100vw × 100vh），视频 object-fit:cover 铺满无黑边
 * - 默认隐藏（opacity:0 + visibility:hidden + pointer-events:none）
 * - 添加 .show 后渐显，播放 transition01.mp4（视频占位）
 * - 点击视频任意位置即可关闭
 * ============================================================ */
.btn-play-video-mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 9999;
  transition:
    opacity 0.4s ease,
    visibility 0s linear 0.4s;
  overflow: hidden;
}
.btn-play-video-mask.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* 鼠标手型，提示"点击任意位置关闭" */
  cursor: pointer;
  transition:
    opacity 0.4s ease,
    visibility 0s linear 0s;
}
.btn-play-video-mask .btn-play-video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  outline: none;
  /* 点击穿透到 mask，从而实现"点击视频任意位置关闭" */
  pointer-events: none;
}

/* ===================================================== */
/* page2 二级页面——新闻资讯（左图+右tab列表）            */
/* ===================================================== */
#secondaryPage2-news .secondary-content {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 大背景层：跟随画廊索引切换（bg 图片） */
.news-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  background-color: #000;
}
.news-bg-item {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}
.news-bg-item.active {
  opacity: 1;
}

/* 新闻内容根容器（左右并排） */
.news-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
}

/* ===== 左侧：新闻图片画廊 ===== */
.news-gallery {
  width: 927px;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.news-gallery-inner {
  width: 927px;
  height: 529px;
  position: relative;
  overflow: hidden;
}

.news-gallery-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 1;
}

.news-gallery-item.active {
  opacity: 1;
  pointer-events: all;
  z-index: 2;
}

/* 左下角横向 pagination */
.news-gallery-pagination {
  position: absolute;
  left: 50%;
  bottom: 0px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  z-index: 10;
}
.news-gallery-bullet {
  display: block;
  width: 18px;
  height: 8px;
  border-radius: 5px;
  background: transparent;
  border: 2px solid #746c60;
  cursor: pointer;
  transition:
    width 0.3s ease,
    background 0.3s ease,
    border 0.3s ease;
}
.news-gallery-bullet.active {
  width: 77px;
  height: 8px;
  background: linear-gradient(to right, #af0bff, #5aa7fa, #9ce7e5, #d9e8da);
  border: none;
  box-shadow: 0 0 8px rgba(218, 168, 32, 0.5);
}

/* ===== 右侧：tab + 列表 ===== */
.news-panel {
  width: 590px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 顶部 tab */
.news-tab {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 50px;
  flex-shrink: 0;
}
.news-tab-item {
  min-width: 80px;
  height: 40px;
  padding: 10px 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #f9eedf;
  border-radius: 22px;
  cursor: pointer;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border 0.3s ease;
  border: 1px solid transparent;
  user-select: none;
}
.news-tab-item:hover {
  color: #f9eedf;
}
.news-tab-item.active {
  color: #f9eedf;
  background: #191b27;
  border: 1px solid #f9eedf;
}

/* 列表容器 */
.news-list-box {
  position: relative;
  margin-top: 60px;
  overflow: hidden;
  width: 100%;
  height: 393px;
  overflow: hidden;
}

/* 每个列表分类，层叠（只有 active 的可见） */
.news-list {
  position: absolute;
  inset: 0;
  flex-direction: column;
  opacity: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* transform: translateY(8px); */
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}
.news-list.active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

/* 单项 */
.news-list-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 90px;
  padding: 0 24px;
  box-sizing: border-box;
  background: #0c0e1b;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  cursor: pointer;
  transition:
    background 0.3s ease,
    border-color 0.3s ease;
  margin-bottom: 9px;
}
.news-list-item:hover {
  background: #f9eedf;
  border-color: #605e5f;
}
/* 第一条高亮（米黄色底） */
.news-list-item.highlight {
  background: #f9eedf;
  border: 1px solid #f9eedf;
}
.news-list-item.highlight:hover {
  background: rgba(240, 228, 204, 1);
  color: #171722;
}

.news-list-item-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
  padding-right: 16px;
}

.news-list-item-title {
  font-size: 16px;
  color: #f9f7e6;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-list-item-desc {
  font-size: 14px;
  color: #7e8696;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-list-item.highlight .news-list-item-title {
  color: #171722;
}
.news-list-item:hover .news-list-item-title {
  color: #171722;
}

.news-list-item.highlight .news-list-item-desc {
  color: #5e6170;
}

.news-list-item-time {
  flex-shrink: 0;
  font-size: 12px;
  color: #7e8696;
  letter-spacing: 1px;
  font-family: Arial, sans-serif;
  margin-top: 24px;
}
.news-list-item.highlight .news-list-item-time {
  color: #0c0e1b;
}

/* 翻页：非当前页的 item 隐藏 */
.news-list-item.hidden {
  display: none;
}

/* 右下角横向 pagination（与左侧样式一致） */
.news-list-pagination {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  z-index: 10;
}
.news-list-bullet {
  display: block;
  width: 20px;
  height: 8px;
  border-radius: 5px;
  background: transparent;
  border: 3px solid #746c60;
  cursor: pointer;
  transition:
    width 0.3s ease,
    background 0.3s ease,
    border 0.3s ease;
}
.news-list-bullet.active {
  width: 77px;
  height: 8px;
  background: linear-gradient(to right, #af0bff, #5aa7fa, #9ce7e5, #d9e8da);
  border: none;
  box-shadow: 0 0 8px rgba(218, 168, 32, 0.5);
}

/* .loading-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  z-index: 10;
  letter-spacing: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
} */
@keyframes flash {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.6;
  }
}
@keyframes loading-dots {
  to {
    width: 100px;
  }
}

/*footlink*/
.foot_cpright {
  min-width: 1200px;
  margin: 0 auto;
  padding: 15px 20px !important;
}
.footlink {
  width: 100%;
  height: 2rem;
  background: #151223
    url(//game.gtimg.cn/images/mdnf/web202004/index/bg_link.jpg) no-repeat top;
  overflow: hidden;
}

.foot-p {
  width: 4.12rem;
  height: 2rem;
  color: #fff;
  text-align: right;
  font-size: 0.16rem;
  position: absolute;
  top: 0.6rem;
  left: 50%;
  margin-left: -2.06rem;
}

.foot-p .font-line {
  display: block;
  width: 4.06rem;
  height: 0.18rem;
  background-position: 0.44rem -0.71rem;
  margin-top: -0.17rem;
}

/* 取消预约并解除手机号绑定弹窗样式 */
.unbind-phone-popup .unbind-phone-popup-con {
  display: inline-block;
  min-width: 550px;
  min-height: 420px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* .unbind-phone-popup .unbind-phone-popup-con .unbind-phone-popup-close {
  width: 86px;
  height: 44px;
  background-color: rgba(255, 0, 0, 0.5);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 22px;
  background-color: #1f1f24;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
}
.unbind-phone-popup .unbind-phone-popup-con .unbind-phone-popup-close::after {
  content: "";
  position: absolute;
  top: -31px;
  left: -31px;
  width: 148px;
  height: 102px;
  background: url("https://game.gtimg.cn/images/arc/web202605/close_effect.webp")
    no-repeat left center;
  opacity: 0;
  z-index: 1001;
} */
.unbind-phone-popup
  .unbind-phone-popup-con
  .unbind-phone-popup-close:hover::after {
  opacity: 1;
}

.unbind-phone-popup .unbind-phone-popup-con .unbind-phone-popup-title {
  font-size: 40px;
  font-weight: bold;
  color: #f1e9cb;
}

.unbind-phone-popup .unbind-phone-popup-con .unbind-phone-popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 70px;
  min-width: 980px;
}

.unbind-phone-popup
  .unbind-phone-popup-con
  .unbind-phone-popup-content
  .unbind-phone-popup-item {
  margin-bottom: 98px;
  color: #fff;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
}

.unbind-phone-popup
  .unbind-phone-popup-con
  .unbind-phone-popup-content
  .unbind-phone-popup-item
  .unbind-phone-btn {
  color: #f1e9cb;
  text-decoration: underline;
}

.unbind-phone-popup
  .unbind-phone-popup-con
  .unbind-phone-popup-content
  div.unbind-phone-popup-item
  .unbind-phone-popup-close {
  position: relative;
  font-size: 0;
  border: none;
  width: 422px;
  height: 50px;
  background: url(https://game.gtimg.cn/images/arc/web202605/unbind_phone_popup_close.png)
    no-repeat center center;
}

.unbind-phone-popup
  .unbind-phone-popup-con
  .unbind-phone-popup-content
  div.unbind-phone-popup-item
  .unbind-phone-popup-close::after {
  content: '';
  position: absolute;
  top: -70px;
  left: -80px;
  width: 568px;
  height: 194px;
  background: url('https://game.gtimg.cn/images/arc/web202605/reserve_effect.webp')
    no-repeat center center;
  opacity: 0;
  z-index: 1001;
}
.unbind-phone-popup
  .unbind-phone-popup-con
  .unbind-phone-popup-content
  div.unbind-phone-popup-item
  .unbind-phone-popup-close:hover::after {
  opacity: 1;
}

/* .unbind-phone-popup
  .unbind-phone-popup-con
  .unbind-phone-popup-content
  div.unbind-phone-popup-item
  .unbind-phone-popup-btn {
  position: relative;
  font-size: 0;
  border: none;
  width: 422px;
  height: 50px;
  background: url(https://game.gtimg.cn/images/arc/web202605/cancel_reserve_btn.png)
    no-repeat center center;
} */

/* ============================================================
   资讯详情页弹窗样式（news-detail-popup）
   设计要点：
   - 整页 80% 黑色半透明遮罩（覆盖背景内容）
   - 右上角圆形关闭按钮（左箭头）
   - 居中标题 + 发布时间
   - 中间为视频/头图，宽度约 800px
   - 正文区域宽度与头图一致，可滚动
   ============================================================ */
.news-detail-popup {
  /* 覆盖 popup-wrap 默认的图片背景，使用纯黑半透明遮罩 */
  background: rgba(0, 0, 0, 0.85) !important;
  /* 资讯详情弹窗在 secondary-page (z-index:9999) 之上，确保从新闻列表点击打开时位于最顶层 */
  z-index: 10000 !important;
}
/* 隐藏 popup-wrap 默认的左下角装饰图标 */
.news-detail-popup::after {
  display: none !important;
}

.news-detail-popup .news-detail-popup-logo .news-detail-popup-logo-icon {
  width: 100%;
  height: 100%;
  background: url(https://game.gtimg.cn/images/arc/web202605/logo_sec.png)
    no-repeat left center;
  background-size: contain;
}

/* 右上角圆形关闭按钮 */
.news-detail-popup .news-detail-popup-close {
  position: absolute;
  top: 30px;
  right: 50px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background-color: rgba(26, 29, 38, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}
.news-detail-popup .news-detail-popup-close:hover {
  background-color: rgba(40, 44, 56, 0.9);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
}
.news-detail-popup .news-detail-popup-close .news-detail-popup-close-icon {
  width: 21px;
  height: 21px;
  background: url(https://game.gtimg.cn/images/arc/web202605/icon_close.png)
    no-repeat center center;
  background-size: contain;
}

/* 内容容器：垂直布局，整体居中 */
.news-detail-popup .news-detail-popup-con {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
  align-items: center;
}

.detail-con {
  height: 100%;
  width: 100vw;
  max-width: 940px;
  margin: 0 auto;
  overflow-y: auto;
}
.news-detail-popup .detail-con::-webkit-scrollbar {
  width: 2px;
}
.news-detail-popup .detail-con::-webkit-scrollbar-thumb {
  background: rgba(235, 230, 215, 1);
  border-radius: 2px;
}
.news-detail-popup .detail-con::-webkit-scrollbar-track {
  background: #5b5957;
}

/* 标题区 */
.news-detail-popup .news-detail-popup-header {
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
}
.news-detail-popup .news-detail-popup-title {
  font-size: 40px;
  font-weight: bold;
  color: #f9eedf;
  letter-spacing: 1px;
  margin-bottom: 14px;
  line-height: 1.3;
}
.news-detail-popup .news-detail-popup-publish-time {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.5px;
}

/* 详情主体（头图 + 正文）：固定宽度居中 */
.news-detail-popup .news-detail-popup-body {
  width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 头图/视频区域 */
.news-detail-popup .news-detail-popup-header-img {
  width: 800px;
  /* height: 530px; */
  border-radius: 10px;
  margin-bottom: 30px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.news-detail-popup .news-detail-popup-header-img img {
  display: block;
  width: 100%;
  height: 100%;
  height: auto;
  border-radius: 10px;
}
.news-detail-popup .detail-video-player {
  width: 800px;
  height: 450px;
  background: #000;
}

/* 正文文本 */
.news-detail-popup .news-detail-popup-text {
  width: 100%;
  font-size: 16px;
  line-height: 1.9;
  color: #fff;
  letter-spacing: 0.3px;
  text-align: justify;
}
.news-detail-popup .news-detail-popup-text p {
  margin: 0 0 18px;
  text-indent: 2em;
}
.news-detail-popup .news-detail-popup-text .news-detail-popup-subtitle {
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  margin: 28px 0 14px;
  letter-spacing: 1px;
  text-indent: 0;
}
.common-popup {
  z-index: 10000 !important;
}
.common-popup .common-popup-con {
  display: inline-block;
  min-width: 550px;
  min-height: 420px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.common-popup .common-popup-con .common-popup-title {
  font-size: 40px;
  font-weight: bold;
  color: #f1e9cb;
}

.common-popup .common-popup-con .common-popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 70px;
  min-width: 980px;
}
.common-popup .common-popup-con .common-popup-content .common-popup-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
}
.common-popup
  .common-popup-con
  .common-popup-content
  .common-popup-item
  .common-tips {
  display: flex;
  align-items: center;
  min-height: 300px;
  text-align: center;
}
.common-popup
  .common-popup-con
  .common-popup-content
  .common-popup-item:nth-child(2) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.common-popup
  .common-popup-con
  .common-popup-content
  .common-popup-item
  button {
  font-size: 0;
  border: none;
  width: 430px;
  height: 58px;
  margin-bottom: 40px;
  position: relative;
}
.common-popup
  .common-popup-con
  .common-popup-content
  .common-popup-item
  .common-popup-ok-btn {
  background: url(https://game.gtimg.cn/images/arc/web202605/ok_btn.png)
    no-repeat center center;
  background-size: 100% 100%;
}
.common-popup
  .common-popup-con
  .common-popup-content
  .common-popup-item
  .common-popup-close-btn {
  background: url(https://game.gtimg.cn/images/arc/web202605/close_btn.png)
    no-repeat center center;
  background-size: 100% 100%;
}
.common-popup
  .common-popup-con
  .common-popup-content
  div.common-popup-item
  button::after {
  content: '';
  position: absolute;
  top: -70px;
  left: -80px;
  width: 568px;
  height: 194px;
  background: url('https://game.gtimg.cn/images/arc/web202605/reserve_effect.webp')
    no-repeat center center;
  opacity: 0;
  z-index: 1001;
}
.common-popup
  .common-popup-con
  .common-popup-content
  div.common-popup-item
  button:hover::after {
  opacity: 1;
}

.loading-box {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease;
  background-color: #000;
}
.loading-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loading-box.hidden {
  opacity: 0;
  pointer-events: none;
}
.loading-box .loading-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.loading-box .loading-logo {
  width: 333px;
  height: 37px;
  background: url('https://game.gtimg.cn/images/arc/web202605/loading_logo.png');
  background-size: 100% 100%;
  margin: 20px auto 0;
}
.loading-bar {
  width: 408px;
  height: 22px;
  background: url('https://game.gtimg.cn/images/arc/web202605/loading_bar.png');
  background-size: 100% 100%;
  margin: 50px auto 0;
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 0 3px;
}
.loading-progress {
  width: 0%;
  height: 16px;
  background: url('https://game.gtimg.cn/images/arc/web202605/loading_progress.png');
  background-size: auto 100%;
  background-repeat: no-repeat;
  /* 不加 transition：width 由 JS 在 rAF 中逐帧单调写入，
     CSS 再做过渡会让"声明值"和"渲染值"产生相位差，
     在 readyState>=4 / 收尾阶段会被肉眼感知为"回缩"。 */
}
.loading-text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  margin: 20px auto 0;
}
.loading-icon {
  width: 26px;
  height: 27px;
  background: url('https://game.gtimg.cn/images/arc/web202605/loading_icon.png');
  margin-right: 10px;
}
.loading-percent {
  margin-left: 10px;
}
.goto-index {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease;
  background-color: #000;
}
.goto-index .goto-index-btn {
  width: 196px;
  height: 50px;
  background: url(https://game.gtimg.cn/images/arc/web202605/goto_index_btn.png);
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.goto-index .goto-index-btn::after {
  position: absolute;
  content: '';
  top: -12px;
  left: -18px;
  width: 230px;
  height: 74px;
  background: url(https://game.gtimg.cn/images/arc/web202605/reserve_effect1.webp);
  background-size: 100% 100%;
  pointer-events: none;
}