html {
  /* 设置 font-size 为 page_box 宽度的 1%，最大 750px，这样 2.0000rem = 1% 的 page_box 宽度 */
  font-size: calc(min(100vw, 750px) / 100);
}
body {
  background: #1b0d0b;
  overflow-x: hidden;
}
* {
  padding: 0px;
  margin: 0px;
  line-height: 1;
  box-sizing: border-box;
}
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
  clear: both;
}
.page_box {
  max-width: 750px;
  position: relative;
  margin: 0 auto;
  height: 100%;
  background: url(../images/bg.png) no-repeat center top;
  /* 100% auto：宽度铺满，高度按比例缩放，保持原图比例不变形 */
  background-size: 100% auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #1b0d0b;
}
.logo {
  height: 5.63rem;
  position: absolute;
  top: 6rem;
  left: 6rem;
}
.header-text {
  display: flex;
  align-items: center;
  margin-top: 3rem;
}
.header-text > img {
  width: 33.2589rem;
  height: 20.2079rem;
  /* 原图尺寸 285 × 173，比例 285/173 ≈ 1.646 */
  /* 26.4 × 1.646 ≈ 43.45，调整到 0.765 倍（0.729 × 1.05） */
}
.text-right {
  display: flex;
  flex-direction: column;
}
.header {
  position: relative;
  width: 100%;
  overflow: hidden;
  top: 7rem;
}
.header-bg {
  width: 129.6rem;
  /* height: 100%; */
  position: relative;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
}
.number-box {
  width: 87.36rem;
  position: absolute;
  left: 54%;
  top: 74%;
  transform: translateX(-50%);
}
.number-column,
.number-item {
  display: inline-block;
}
.number-column {
  width: 6.48rem;
  height: 13.2rem;
  overflow: hidden;
  margin: 0 0.1rem;
  position: relative;
}
.number-column-inner {
  position: relative;
  transition: transform 0.08s linear;
}
.number-column-inner .number-item {
  height: 13.2rem;
  width: auto;
  display: block;
  margin: 0 auto;
}
/* 逗号：更小一点并下移 */
.comma-item {
  width: 4.4rem;
  /* margin: 0.4200rem 0.4800rem 0 0.4800rem; */
  /* transform: translateY(0.4000rem); */
}
.guang-1,
.guang-2 {
  position: absolute;
  top: 56.58rem;
  left: 50%;
  transform: translateX(-50%);
  width: 96.5rem;
  transition: opacity 0.4s ease;
}
/* 默认只显示第一张光效图 */
.guang-2 {
  opacity: 0;
}
.text-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4rem;
}
.text-1 {
  height: 10rem;
}
.text-2 {
  height: 11.7rem;
  margin-top: -3rem;
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.4rem;
  position: relative;
}
.btn-01 {
  height: 11.3rem;
}
.shou {
  position: absolute;
  left: 80%;
  top: 30%;
  height: 9.84rem;
  animation: shou-pulse 1s ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes shou-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}
.pic-box {
  position: relative;
  width: 100%;
  margin-top: 4rem;
  height: 63.09rem;
  overflow: visible;
}
.pic-box-list {
  position: relative;
  width: 100%;
  height: 100%;
}
.pic-box-list .pic-item {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: center bottom;
  transition: all 0.3s ease;
}
/* 中间大图 */
.pic-box-list .pos-center {
  z-index: 3;
  transform: translateX(-50%) scale(1);
}
/* 左右两边稍小一点 */
.pic-box-list .pos-left {
  left: 1%;
  z-index: 2;
  margin-top: -3rem;
  transform: translateX(0) scale(0.85);
}
.pic-box-list .pos-right {
  left: 99%;
  z-index: 2;
  margin-top: -3rem;
  transform: translateX(-100%) scale(0.85);
}
/* 其他隐藏 */
.pic-box-list .pos-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(0.6);
}
/* 统一图片尺寸，适配你导出的素材比例 */
.pic-box-list .pic-item {
  height: 63.09rem;
}
/* 左右切换按钮 */
.pic-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 7.68rem;
  height: 7.68rem;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 6rem;
  line-height: 7.68rem;
  text-align: center;
  cursor: pointer;
}
.pic-arrow-left {
  left: 2.4rem;
}
.pic-arrow-right {
  right: 2.4rem;
}
.footer {
  position: relative;
  width: 100%;
  height: 100%;
  margin-top: -21rem;
}
.footer-img {
  width: 100%;
  position: absolute;
}
.guang-line {
  width: 100%;
  max-width: 750px;
  position: fixed;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  pointer-events: none;
}
.footer-btn {
  display: flex;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 750px;
  height: auto;
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.1) 100%
  );
}
.btn-left {
  /* height: 30.91rem; */
  width: 48rem;
  position: absolute;
  bottom: 0;
  left: 1rem;
  z-index: 999;
}
.btn-right {
  width: 47.7rem;
  position: absolute;
  bottom: 0;
  right: 1rem;
  z-index: 999;
}