/* ============================================================
 * Standoff2.css  —  样式
 * rem 规则：1rem = 100px（PC 1920 稿 / 移动 750 稿）
 * 写法：px ÷ 100 = rem，例：32px → 0.32rem
 * ============================================================ */
@font-face {
  font-family: 'zihunaotushijieti';
  src: url('../fonts/zihunaotushijieti_T.woff2') format('woff2'),
    url('../fonts/zihunaotushijieti_T.woff') format('woff');
  font-display: block;
}

@font-face {
  font-family: 'yixingediaohei';
  src: url('../fonts/yixingediaohei.woff2') format('woff2'),
    url('../fonts/yixingediaohei.woff') format('woff');
  font-display: block;
}

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

img {
  max-width: 100%;
  height: auto;
  display: block;
}

:root {
  --orange: #ff6b1a;
  --orange-l: #ff8c42;
  --gold: #ffd24a;
  --gold-d: #c99b1a;
  --dark: #0a0c12;
  --dark-2: #13161f;
  --dark-3: #1c2030;
  --gray: #606060;
  --gray-d: #4a4d5c;
  --white: #fff;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

body {
  background: var(--dark);
  color: var(--white);
}

[v-cloak] {
  display: none;
}

.flex_box {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ==================== 导航条 ==================== */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0.4rem;
  height: 0.71rem;
  background: #000000;
  backdrop-filter: blur(12px);
  font-size: 0.24rem;
  font-family: SourceHanSansSC-Medium;
}

.logo_icon {
  width: 2.47rem;
  height: 0.32rem;
  margin-right: 0.78rem;
}

.nav-logo {
  font-size: 0.2rem;
  font-weight: 900;
  letter-spacing: 0.02rem;
  background: linear-gradient(135deg, var(--orange), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-items {
  display: flex;
  gap: 0.04rem;
}

.nav-item {
  position: relative;
  padding: 0.08rem 0.16rem;
  color: #606060;
  cursor: pointer;
  transition: color 0.25s;
  white-space: nowrap;
  margin-right: 0.4rem;
  font-family: 'Noto Sans SC', sans-serif;

}

.nav-item .triangle_icon {
  position: absolute;
  top: 58%;
  transform: translateY(-50%);
  right: -0rem;
  width: 0.16rem;
  height: 0.2rem;
}

.nav-item:hover {
  color: var(--white);
}

.nav-item.active {
  color: #FFFFFF;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.16rem;
  right: 0.16rem;
  height: 0.02rem;
  background: #FEC700;
  border-radius: 0.01rem;
}


/* ==================== 全屏 Swiper ==================== */

.page-swiper {
  width: 100%;
  height: 100vh;
}

.page-swiper .swiper-slide {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* 背景图直接放在 swiper-slide 上（替代 .kv-bg div） */
.page-swiper .swiper-slide[data-bg] {
  background-size: cover;
  /* background-size: 100% 100%; */
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--dark-2);
}

/* slide 内子元素在背景图之上 */
/* .page-swiper .swiper-slide > * {
    position: relative;
    z-index: 1;
} */

.hover_box {
  cursor: pointer;
}

/* ==================== 公共标题 ==================== */

.age_icon {
  width: .39rem;
  height: .5rem;
  position: absolute;
  top: 0.9rem;
  left: .4rem;
  z-index: 1;
}




.count-num {
  font-weight: 800;
  font-family: zihunaotushijieti;
  font-weight: 400;
  font-size: 0.6rem;
  
 
  margin: 0 .2rem;
  background: url('https://mwt.zhanhuo.com/homepage/images/pc/part_one/people_bg.png');
  width: 2.6rem;
  height: .6rem;
  background-size: 100% 100%;
}
.num_item{
   color: #feb925;                              /* 兜底：不支持的浏览器显示单色 */
  background: linear-gradient(to bottom, #feb925, #fe9340);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mobile-mode .num_item{
margin-bottom: 0.05rem;
}
.pc-mode {
  /* background: url('https://mwt.zhanhuo.com/homepage/images/pc/part_one/bg-all.png') no-repeat center / cover; */
}

/* ====================================================
 * 第一屏：首页
 * ==================================================== */
  .Vidage__video {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover !important;
}

 .Vidage__video {
    width: 100%;
    height: 101vh;
}
.slide-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.all_icon_first {
  position: absolute;
  top: 1.48rem;
  right: 0.6rem;
}

.all_icon_first img {
  cursor: pointer;
}

.all_icon_first img:hover {

  transform: scale(1.05);
}

.slogan_item {

  position: absolute;
  bottom: .5rem;
  left: .2rem;

}

.slogn_icon {
  width: 4.8rem;
  height: 1.94rem;
}



.video_box {

  position: relative;
  display: inline-block;
  margin-left: .4rem;
  margin-bottom: -.14rem;

}

.video_item {
  width: 1.04rem;
  height: 1.04rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

.play-trigger__disc {
  width: 1.08rem;
  height: 1.06rem;
  display: block;
  animation: ns-spin-once 2s infinite linear;
  position: relative;
  z-index: 100;
  cursor: pointer;
}

.icon_item {
  width: 0.28rem;
  height: 0.30rem;
  margin-bottom: .26rem;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
}
.reward_icon{
  position: absolute;
  right: 3.77rem;
  bottom: -0.15rem;
   transform: scale(1) translate3d(100px, 0, 0);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1), opacity 520ms ease-out;
   width:5.54rem;
  height:3.59rem;
}
.reward_icon_img{
  width:5.54rem;
  height:3.59rem;
 
}
/* PC 版首页 */
.hero-pc {
  position: absolute;
  right: 0.77rem;
  bottom: 0rem;
  opacity: 0;
  transform: scale(1) translate3d(100px, 0, 0);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1), opacity 520ms ease-out;
}

.hero-pc-left {
  position: absolute;
  left: 0.77rem;
  bottom: .2rem;
  opacity: 0;
  transform: scale(1) translate3d(-100px, 0, 0);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1), opacity 520ms ease-out;
}

/* 当 slide 激活时，元素动画进入 */
.movePageOpact .hero-pc,
.movePageOpact .hero-pc-left {
  opacity: 1;
  transform: scale(1) translate3d(0, 0, 0);
}






.btn-reserve {
  background: url('https://mwt.zhanhuo.com/homepage/images/pc/part_one/reservation_btn.png') center top no-repeat;
  width: 3.16rem;
  height: .9rem;
  background-size: 100% 100%;

}

.btn-reserve:hover {
  transform: translateY(-0.02rem);
  filter: brightness(1.3)
}


@keyframes shine {
  0% {
    left: -60%;
  }

  60%,
  100% {
    left: 200%;
  }
}

.reserve-count {
  font-size: 0.16rem;
  color: #FFFFFF;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}



/* ====================================================
 * 第二屏：预约里程
 * ==================================================== */
.slide-milestone {
  /* display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; */
  padding-top: 1.2rem;


}
.midd_box_part_two{
  width:12.3rem;
  margin:0 auto;
}
.mobile-mode .mobile_tittle {
  width: 5.41rem;
  height: 1.01rem;
  margin: .5rem auto 0.44rem auto;
}

.mobile-mode .grid-container {
  width: 5.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 1.22rem);
  gap: .3rem;
  position: relative;
  margin: 0 auto;

}

.mobile-mode .grid-item {
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
  position: relative;
  min-width: 0;
  /* 关键：防止 item-6 撑大第一列 */
}

.mobile-mode .grid-item img {
  width: 100%;
  height: 100%;
  display: block;
}

/* 第1张：左侧占2行 */
.mobile-mode .item-1 {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 3.46rem;
  height: 2.67rem;
  z-index: 2;
  margin-top: -0.15rem;
}

/* 第2张：右上 */
.mobile-mode .item-2 {
  grid-column: 2;
  grid-row: 1;
  width: 1.73rem;
  height: 1.22rem;
  z-index: 2;
}

/* 第3张：右中 */
.mobile-mode .item-3 {
  grid-column: 2;
  grid-row: 2;
  width: 1.73rem;
  height: 1.22rem;
  z-index: 2;
  margin-top: -0.2rem;
}

/* 第4张：右下上 */
.mobile-mode .item-4 {
  grid-column: 1;
  grid-row: 3;
  width: 1.73rem;
  height: 1.22rem;
  z-index: 2;
  margin-top: 0.3rem;
}

/* 第5张：右下下 */
.mobile-mode .item-5 {
  grid-column: 1;
  grid-row: 4;
  width: 1.73rem;
  height: 1.22rem;
  z-index: 2;
  margin-top: 0.3rem;

}

/* 第6张：左侧占2行，最底层 */
.mobile-mode .item-6 {
  /* grid-column: 1;
  grid-row: 3 / 5; */
  width: 7.5rem;
  height: 5.65rem;
  z-index: 1;
  position: absolute;
  bottom: -2.05rem;
  left: -1.1rem;
}

.mobile-mode .slide-milestone {
  padding: 0.1rem;
}

.mobile-mode .part_two_tittle {
  width: 6.49rem;
  height: .91rem;
  margin-bottom: .84rem;


}

.mobile-mode .hero-mobile {
  position: relative;
  margin-top: 1.2rem;
}

.mobile-mode .count-num {
  font-size: .63rem !important;

   background: url('https://mwt.zhanhuo.com/homepage/images/pc/part_one/people_bg.png');
  width: 2.6rem;
  height: .6rem;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ---- PC：横向进度条 ---- --------------------*/
.part_two_tittle{
  /* margin-bottom: .6rem; */
  width: 6.49rem;
  height: .91rem;
  margin: 0 auto .6rem  auto;
}
.progress-bar-area {
  position: relative;
  width: 9.81rem;
  background: #000000;
  margin-left: .2rem;
}
.first-lable{
  margin-left: .3rem;

}
/* el-progress 容器 */
.progress-bar-area .el-progress {
  width: 100%;
}

.el-progress-bar__outer,
.el-progress-bar__inner {
  height: .06rem
}

.progress-bar-area .el-progress-bar {
  width: 100%;
}

/* 里程碑标记覆盖层 */
.progress-markers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: 1;
}

.progress-marker {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
}

/* 已达到：白色菱形（旋转45度的方块） */
.marker-dot {
  width: 0.32rem;
  height: 0.32rem;
  background: url('https://mwt.zhanhuo.com/homepage/images/pc/part_two/lock_icon.png') center top no-repeat;
  margin-top: -0.14rem;


}

.marker-dot-get {
  width: 0.32rem;
  height: 0.32rem;
  margin-top: -0.14rem;
  background: url('https://mwt.zhanhuo.com/homepage/images/pc/part_two/unlock_icon.png') center top no-repeat;

}

/* 未达到：锁图标 */
.marker-lock {
  width: 0.18rem;
  height: 0.18rem;
  margin-top: -0.09rem;
  margin-bottom: 0.02rem;
}

/* 刻度文字 */
.marker-label {
  font-size: 0.13rem;
  margin-top: 0.08rem;
  font-weight: 500;
  position: relative;
  top: -.8rem;
  font-size: .24rem;
  color: #FFFFFF;
  font-family: yixingediaohei;
}

/* ============ 奖励卡片区域 ============ */
.reward-area {
  display: flex;
  align-items: flex-start;
  gap: 0.2rem;
  margin-top: 0.7rem;
}

/* ============ 左侧 3×2 网格 ============ */


/* 单个卡片 */
.reward-card {
  transition: transform 0.3s ease;
  position: relative;
  z-index: 10;
  cursor: pointer;
}

.reward-card .card-icon {
  position: relative;
  width: 2.26rem;
  height: 1.61rem;
  overflow: hidden;

}


/* todo：icon文件 */
.card-icon {
  position: relative;
  z-index: 2;
  width: .9rem;
  height: .9rem;
  margin: 0 auto;
}

/* ============ 右侧大卡 ============ */
.reward-grid {
  display: grid;
  grid-template-columns: repeat(2, 2.2rem) 7.18rem;
  grid-template-rows: repeat(2, 1.56rem);
  gap: 0.1rem;
}

.reward-card-large {
  position: relative;
  width: 7.18rem;
  height: 5.14rem;
  overflow: hidden;
  border-radius: 0.06rem;
  grid-column: 3 / 4;    /* 第3列 */
  grid-row: 1 / 3;        /* 跨2行 */
   margin-left: -1rem;
  margin-top: -1rem;
  /* 删掉 margin-left: -3.4rem 和 margin-top: -1.5rem */
}
.reward-large-img {
 width: 7.18rem;
  height: 5.14rem;
}

.all_icon {
  background: url('https://mwt.zhanhuo.com/homepage/images/commen/join_community.png') center top no-repeat;
  background-size: 100% 100%;
  width: 2.71rem;
  height: .18rem;
  padding-left: 0.6rem;
  padding-bottom: .15rem;
  display: flex;
  align-items: center;
  flex-direction: row;


}

.all_icon img {
  width: .22rem;
  height: .22rem;
  flex: none;
  margin-right: .1rem;
  transition: transform 0.3s ease;

}

.all_icon img:hover {

  transform: scale(1.05);
}

/* ---- 移动：竖向时间轴 ---- */


.milestone-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.milestone-line-v {
  width: 0.03rem;
  flex: 1;
  min-height: 0.4rem;
  background: var(--gray-d);
  margin-top: 0.04rem;
}

.milestone-line-v.line-active {
  background: var(--gold);
}

.milestone-item-v .milestone-info {
  padding-top: 0.04rem;
}

.milestone-item-v .milestone-target {
  font-size: 0.2rem;
}

.milestone-item-v .milestone-reward {
  font-size: 0.14rem;
}

/* ====================================================
 * 第三屏：预约抽奖
 * ==================================================== */
.slide-lottery {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


#feature {
  background: #18202B;
  overflow: hidden;
}


.feature-container {
  width: 100%;
  height: 100%;
}

.feature-swiper,
.feature-swiper .swiper3,
.feature-swiper .swiper3 .swiper-wrapper,
.feature-swiper .swiper3 .swiper-slide {
  width: 100%;
  height: 100%;
}

.feature-swiper .swiper3 .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.feature-container .desc-box {
  /* width: 1400px; */
  width: 4.54em;
  height: 2.35rem;
  margin: 0 auto;
  position: absolute;
  bottom: 2.72rem;
  left: 0px;
  z-index: 99;
  left: .72rem;

}

.feature-container .desc-box .desc-list {
  position: relative;
}

.feature-container .desc-box .desc-item {
  position: absolute;
  left: .38rem;
  top: 2rem;
  z-index: 8;
  transition: .5s transform, .5s opacity;
  transform: translate(-100px);
  opacity: 0;
}

.feature-container .desc-box .desc-item img {
  width: 3.15rem;
  height: 1.645rem;
}

.feature-container .desc-box .desc-item-active {
  z-index: 9;
  transform: translate(0);
  opacity: 1;
}

.feature-container .feature-small-swiper {
  position: absolute;
  left: .72rem;
  bottom: -0.25rem;
  /* width: 13rem; */
  height: 1.59rem;
  padding: 0 .64rem;
}

.feature-small-swiper .swiper4-button-prev::after,
.feature-small-swiper .swiper4-button-next::after {
  content: '';
}




.feature-small-swiper .swiper-slide {
  opacity: .8;
  cursor: pointer;
}

.feature-small-swiper .swiper-slide,
.feature-small-swiper .swiper-slide img {
  width: 1.8rem !important;
  height: 1.08rem;
  margin-right: .2rem;
}

.feature-small-swiper .swiper-slide::after {
  content: '';
  width: 2.67rem;
  height: 1.54rem;
  background: #000;
  opacity: .5;
  position: absolute;
  left: 0;
  top: 0;
  /* left: 50%;
    top: 50%;
    transform: translate(-50%,-50%); */
}

.feature-small-swiper .swiper-slide-active {
  opacity: 1;


}

.feature-small-swiper .bg_item {
  width: 2.72rem;
  height: 1.62rem;
  position: relative;
  z-index: 10;
}

.feature-small-swiper .swiper-slide-active::after {
  display: none;
}

.swiper4-wrapper .swiper-slide:hover {
  opacity: 1;
}

.swiper4-wrapper .swiper-slide:hover::after {
  display: none;
}










/* ====================================================
 * 第四屏：载具展示
 * ==================================================== */
.door {
  position: absolute;
  width: 100%;
  height: 100vh;
  perspective: 800px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.door:hover .left_door {
  transform: translate(-100%);
}

.door:hover .right_door {
  transform: translate(100%);
}

.box_s3_detail {
  position: relative;
  width: 100%;
  height: 100%;
}

.box_s3_detail .tank_tittle {
  width: 6.48rem;
  height: .93rem;
  margin-top: 1rem;
  margin-left: 3.4rem;
}

.box_s3_detail .detail-top {
  position: absolute;
  top: 1rem;
  left: 3.15rem;
  z-index: 5;
}

.box_s3_detail .one_card_tittle {
  width: 7.77rem;
  height: 1.04rem;
}

.box_s3_detail .detail-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 100%;
  text-align: center;
  margin-top: -0.5rem;
}

.box_s3_detail .part3_left_img {
  width: 13rem;
  margin: 0 auto;
}

.box_s3_list {
  display: flex;
}

.box_s3_list_left,
.box_s3_list_right {
  height: 100%;
  position: relative;
  float: left;
  z-index: 1;
}

.box_s3_list_left img,
.box_s3_list_right img {
  height: 100vh;
  width: 50.5vw;
  cursor: pointer;
  object-fit: cover;
}

.box_s3_list_left img {
  filter: brightness(100%);
}

.box_s3_list_left img:hover,
.box_s3_list_right img:hover {
  filter: brightness(120%);
}

.left_door,
.right_door {
  float: left;
  z-index: 1;
  transition: all .5s;
  position: relative;
  z-index: 4;
}

/* 底部卡片栏 */
.box_carousel_list {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.12rem;
  z-index: 10;

}

.bottom-cards {
  display: flex;
  gap: 0.12rem;
}

/* 底部单个卡片 */
.box_s3_detail .s_item {
  width: 1.6rem;
  height: 1.04rem;
  cursor: pointer;
  transition: transform 0.3s ease;
  position: relative;
  flex-shrink: 0;
}

.box_s3_detail .s_item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.box_s3_detail .s_item:hover {
     animation: shake 500ms ease-in-out;
    filter: brightness(120%)
}

.box_s3_detail .s_item.active {
  filter: brightness(1.2);
}

/* 左右导航箭头 */
.carousel-arrow {
  width: 0.24rem;
  height: 0.62rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.3s;
}

.carousel-arrow-left {
  background: url('https://mwt.zhanhuo.com/homepage/images/pc/part_four/left_icon.png') center no-repeat;
  background-size: 100% 100%;
  margin-right: 0.5rem;
}

.carousel-arrow-right {
  background: url('https://mwt.zhanhuo.com/homepage/images/pc/part_four/right_icon.png') center no-repeat;
  background-size: 100% 100%;
  margin-left: 0.5rem;
}

.carousel-arrow.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.carousel-arrow:not(.disabled):hover {
  filter: brightness(1.3);
}

/* 摇晃动画 */
@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-3px);
  }

  40% {
    transform: translateX(3px);
  }

  60% {
    transform: translateX(-2px);
  }

  80% {
    transform: translateX(2px);
  }
}

/* 关闭按钮 */
.box_s3_detail .btn_close {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 0.3rem;
  height: 0.3rem;
  cursor: pointer;
  z-index: 20;
  background: url('https://mwt.zhanhuo.com/homepage/images/close_icon.png') no-repeat center;
  background-size: 100% 100%;
}

/* 返回按钮 */
.bottom-btn {
  font-size: 0.18rem;
  color: #FFFFFF;
  cursor: pointer;
  margin-top: auto;
  /* 推到底部 */
  margin-left: 1rem;
  flex-shrink: 0;
  text-decoration: underline;
  transform: perspective(1px) translateZ(0);
  transition-duration: 0.3s;
  color: #bcb2b2;
  position: absolute;
  bottom: 0.08rem;
  right: -1.5rem;
}

.bottom-btn:hover {
  transform: scale(1.1);
}

/* ====================================================
 * 第五屏：加入社区（共用）
 * ==================================================== */
.slide-community .tittle {
  margin-top: 1.2rem;
  margin-left: 4rem;
}

.slide-community .tittle_icon {
  width: 6.5rem;
  height: 1.39rem;
}

.join_btn {
  width: 1.96rem;
  height: 0.57rem;
  margin-top: .12rem;

}

/* 移动端第3屏幕 */
.mobile_part_three {
  width: 7.5rem;
  height: 14rem;
  background: url('https://mwt.zhanhuo.com/homepage/images/m/part_three/bg.png') no-repeat center;
  background-size: 100% 100%;
  overflow: hidden;
  position: relative;
}

.mobile_part_three_tittle {
  width: 4.06rem;
  height: .95rem;
  margin: .52rem auto .2rem auto;
  position: relative;
}

.mobile_part_three .carousel-img {
  width: 6.26rem;
  height: 3.68rem;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mobile_part_three .el-carousel__arrow--left {
  width: .24rem;
  height: .4rem;
  left: .2rem;
  top: 1.8rem;
  /* left: 10vw;
    top: 70vh; */
  border-radius: unset;
  background: url('https://mwt.zhanhuo.com/homepage/images/m/part_three/left_icon.png') center top no-repeat;
  background-size: 100% 100%;
}

.mobile_part_three .el-icon-arrow-left,
.mobile_part_three .el-icon-arrow-right:before {
  display: none;
  ;
}

.mobile_part_three .el-carousel__arrow--right {
  width: .24rem;
  height: .4rem;
  right: .2rem;
  top: 1.8rem;
  /* left: 16vw;
    top: 70vh; */
  border-radius: unset;
  background: url('https://mwt.zhanhuo.com/homepage/images/m/part_three/right_icon.png') center top no-repeat;
  background-size: 100% 100%;
}

.mobile_part_three .el-carousel__button {
  width: 0.12rem;
  height: 0.12rem;
  border-radius: 50%;
}

.el-carousel__indicators {
  margin-top: -.4rem;
}

/* 载具 */
.vehicle-introduction .mobile_part_three_tittle {
  margin-top: .1rem;
}

/* 创作招募 */
.creative_recruitment {
  background: url('https://mwt.zhanhuo.com/homepage/images/m/part_five/bg.png') center top no-repeat;
  background-size: 100% 100%;
  width: 7.5rem;
  height: 6.23rem;
  position: relative;
  overflow: hidden;
}
.join_part{
   background: url('https://mwt.zhanhuo.com/homepage/images/m/part_six/bg.jpg') center top no-repeat;
  background-size: 100% 100%;
  width: 7.5rem;
  height: 7.31rem;
  position: relative;
  overflow: hidden;
}
.six_tittle{
  width: 4.06rem;
  height: .95rem;
  margin: .6rem auto 0 auto;
}
.m_part_six{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 4.81rem;
  margin: .5rem auto 0 auto;
}
.m_part_six  a:nth-child(3n) .m_one_icon_img {
  margin-right: 0;
}
.m_one_icon_img{
  width:1.43rem;
  height:1.36rem;
  margin-right: .26rem;
  margin-bottom: .2rem;
}
.creative_recruitment .info_txt{
width:5.35rem !important;
height:.28rem !important;
}
.creative_recruitment .join_btn{
width:2.61rem !important;
height:.76rem !important;

}
.creative_recruitment_bottom_box {
  margin: 3.3rem auto 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.creative_recruitment .info_txt {
  width: 4.01rem;
  height: 0.21rem;
}

.creative_recruitment .join_btn {
  width: 1.96rem;
  height: .57rem;
}

.bottom_all_icon {
  width: 100%;
  height: 1rem;
  padding: 0 .3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: .6rem auto 0 auto;
}

.one_icon_img {
  width: .66rem;
  height: .69rem;
}
.fixed_img{
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
}
.immediate_appointment{
  width: 7.5rem;
  height: .88rem;
}
/* ==================== 弹窗 ==================== */
/* 视频播放 */

.palyTips {
  text-align: center;
}

.palyTips::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}

.palyTips .el-dialog {
  margin: 0 !important;
  display: inline-block;
  vertical-align: middle;
  padding-bottom: 20px;
  background: transparent;
  box-shadow: none;
}

.palyTips .el-dialog__body,
.palyTips .el-dialog__header {
  padding: 0;
  width: 100%;
}

.palyTips .el-dialog__headerbtn .el-dialog__close {
  display: none;
}

.palyTips .el-dialog__headerbtn {
  top: -10%;
  right: -15%;
  width: .12rem;
  height: .11rem;
  background: url(https://mwt.zhanhuo.com/homepage/images/close_icon.png) no-repeat center;
  background-size: 100% 100%;

}


.play_contenet {
  width: 100%;
  min-height: 500px;
  margin: 20px auto 0 auto;
}

.play_contenet video {
  width: 100%;
  min-height: 500px;
}

/* 预约===================================== */
.toOrderTips {
  text-align: center;
}

.toOrderTips::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}

.toOrderTips .el-dialog {
  margin: 0 !important;
  display: inline-block;
  vertical-align: middle;
  padding-bottom: .2rem;
  background: transparent;
  box-shadow: none;
  width: 5.59rem;
  height: 3.42rem;
  background: url('https://mwt.zhanhuo.com/homepage/images/commen/diolag.png') center top no-repeat;
  background-size: 100% 100%;
}
.show_reward  .el-dialog {
  margin: 0 !important;
  display: inline-block;
  vertical-align: middle;
  padding-bottom: .2rem;
  background: transparent;
  box-shadow: none;
  width: 7.5rem;
  height: 6.04rem;
  background: url('https://mwt.zhanhuo.com/homepage/images/m/part_one/dialog_reward.png') center top no-repeat;
  background-size: 100% 100%;
}
.show_reward  .el-dialog__headerbtn .el-dialog__close{
color: #f02f2f;
}
.show_reward_box{
  position: absolute;
  width:2.5rem;
  height:0.8rem;
  top: 4.8rem;
  left:50%;
  transform: translateX(-50%);
 margin-left: .1rem;
}
.el-input__icon{
line-height: 0.5rem !important;

width:.25rem !important;
}
.show_reward_box .el-dialog__headerbtn{
  width: 100%;
  height: 100%;
  background: url('https://mwt.zhanhuo.com/homepage/images/m/part_one/close_icon.png') center top no-repeat;
  background-size: 100% 100%;
}
.show_reward_box .el-dialog__headerbtn{
  width: 100%;
  height: 100%;
  background: url('https://mwt.zhanhuo.com/homepage/images/m/part_one/close_icon.png') center top no-repeat;
  background-size: 100% 100%;
}
.yuyue_dialog {
  text-align: center;
}
.el-dialog {
  position: absolute !important;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  margin-top: 0 !important;
}

.toOrderTips .el-dialog__body,
.toOrderTips .el-dialog__header {
  padding: 0;
  width: 100%;
}

.yuyue_dialog .el-dialog__header {
  padding: .26rem .2rem .1rem;
  text-align: center;
  display: flex;
}

.dialog_tittle {
  width: 1.29rem;
  height: .31rem;
}

.yuyue_dialog .toOrder_contenet {
  padding: .3rem .6rem;
}

.toOrderTips .el-dialog__headerbtn .el-dialog__close {
  font-size: .26rem;
  color: #FF3030;
}

.el-dialog__headerbtn:focus .el-dialog__close,
.el-dialog__headerbtn:hover .el-dialog__close {
  color: #FF3030 !important;

}

.toOrderTips .el-dialog__headerbtn {
  top: 0%;
  right: -6%;
  width: .3rem;
  height: .3rem;
}

.toOrderTips .content_box {
  font-weight: normal;
  font-size: .35rem;
  color: #FEA100;
  width: 100%;
  text-align: center;
  height: 2.5rem;
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: yixingediaohei;

}

.toOrder_contenet {
  width: 100%;
  min-height: 2.96rem;
  padding: .33rem;
  margin: 0 auto;
}

.toOrder_contenet .tt {
  height: .5rem;
  line-height: .5rem;
  font-size: .16rem;
  color: #fff;
  text-align: right;
}

.toOrder_contenet .inputbox,
.toOrder_contenet .inputbox .el-input {
  height: .5rem;
  line-height: .5rem;
  width: 3.6rem;
  font-size: .16rem;
  margin: 0 auto;
}

.toOrder_contenet .buttonbox,
.toOrder_contenet .el-button {
  height: .4rem;
  line-height: .4rem;
  width: .98rem;
  font-size: .16rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -.02rem;

}

.el-button {
  padding: 0 !important;
  border-radius: 0 !important;
}

.toOrder_contenet .linerow {
  height: .5rem;

}

.toOrder_contenet .code_btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0 auto;
  width: 3.6rem;
 
}

.buttonbox {
  margin-left: -0.03rem;
}

.code_btn .inputbox,
.code_btn .el-input {
  width: 2.55rem !important;
  margin: 0 .1rem 0 0;

}

.el-input--suffix .el-input__inner {
  padding-right: .3rem !important;
}

.toOrder_contenet .el-input__inner {
  background-color: #6B6969;
  border: none;
  color: #fff;
  border-radius: 0;
  height: .4rem !important;
}

.el-input__inner::placeholder {
  color: #fff;

}

.toOrder_contenet .el-button {
  background-color: #FF682C;
  border:none;
  color: #fff;
}

.toOrder_contenet .el-button.is-plain:focus,
.toOrder_contenet .el-button.is-plain:hover {
  background-color: #FF682C;
  border:none;
  color: #fff;
}

.showTips .el-dialog {
  margin: 0 !important;
  display: inline-block;
  vertical-align: middle;
  padding-bottom: .2rem;
  background: transparent;
  box-shadow: none;
  width: 4.47rem;
  height: 2.73rem;
  background: url('https://mwt.zhanhuo.com/homepage/images/commen/diolag.png') center top no-repeat;
  background-size: 100% 100%;
}

.el-message {
  min-width: 3.8rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: #EBEEF5;
  position: fixed;
  left: 50%;
  top: .2rem;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #edf2fc;
  -webkit-transition: opacity 0.3s, top 0.4s, -webkit-transform 0.4s;
  transition: opacity 0.3s, top 0.4s, -webkit-transform 0.4s;
  transition: opacity 0.3s, transform 0.4s, top 0.4s;
  transition: opacity 0.3s, transform 0.4s, top 0.4s, -webkit-transform 0.4s;
  padding: .15rem .15rem .15rem .2rem;

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.toOrder_contenet .el-button.is-disabled,
.toOrder_contenet .el-button.is-disabled:focus,
.toOrder_contenet .el-button.is-disabled:hover {
  background-color: gray;
  border: unset;
  color: #fff;
}

.toOrder_contenet .btn_yy {
  width: 1.74rem;
  height: .49rem;
  cursor: pointer;
  margin: 0 auto;
  margin-top: .4rem;
}

.toOrder_contenet .btn_yy img {
  width: 100%;
  height: 100%;
  filter: brightness(120%);
  transform: scale(1.08);
}

.toOrder_contenet .result {
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  font-size: .24rem;
  color: #FFF;
}

/* 预约结束=================================== */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: linear-gradient(180deg, var(--dark-2), var(--dark));
  border: 1px solid rgba(255, 107, 26, 0.3);
  border-radius: 0.2rem;
  padding: 0.32rem 0.28rem;
  width: 3.2rem;
  text-align: center;
}

.modal-icon {
  font-size: 0.48rem;
  margin-bottom: 0.12rem;
}

.modal-title {
  font-size: 0.2rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.08rem;
}

.modal-desc {
  font-size: 0.14rem;
  color: var(--gray);
  margin-bottom: 0.24rem;
}

.modal-btn {
  padding: 0.12rem 0.4rem;
  border: none;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, var(--orange), #e85500);
  color: #fff;
  font-size: 0.16rem;
  font-weight: 600;
  cursor: pointer;
}

.modal-enter-active,
.modal-leave-active {
  transition: opacity 0.3s;
}

.modal-enter,
.modal-leave-to {
  opacity: 0;
}

/* ==================== 移动端：普通滚动模式（不用 Swiper 分页） ==================== */
.mobile-mode {
  overflow: visible;
  height: auto;
}

.mobile_logo,
.mobile_slogn,
.mobile_yy_btn,
.mobile_yy_btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%)
}

.mobile_logo {
  width: 2.53rem;
  height: 1.53rem;
  top: 1.25rem;

}

.mobile_year_icon {
  width: .4rem;
  height: .5rem;
  position: absolute;
  top: 1.25rem;
  right: .4rem
}

.mobile_slogn {
  width: 6.15rem;
  height: 1.26rem;
  top: 8.8rem;
}

.mobile_yy_btn {
  width: 2.54rem;
  height: .73rem;
  top: 10.3rem;
}
.reward_icon_m{
 width:2.58rem;
 height:1.44rem;
 position: absolute;
 bottom:.2rem;
 left:.5rem;
}
.mobile-mode .page-swiper {
  height: auto;
  overflow: visible;
}

.mobile-mode .page-swiper .swiper-wrapper {
  display: block;
  transform: none !important;
}

.mobile-mode .page-swiper .swiper-slide {

  width: 7.5rem;
  height: 11.35rem;
  background-size: 100% 100%;
}

.mobile-mode .page-dots {
  display: none;
}

.mobile-mode .scroll-hint {
  display: none;
}

/* 移动端布局微调 */
.mobile-mode .nav-bar {
  padding: 0 0.12rem;
  height: 0.52rem;
}

.mobile-mode .nav-logo {
  font-size: 0.16rem;
}

.mobile-mode .nav-items {
  gap: 0;
}

.mobile-mode .nav-item {
  padding: 0.06rem 0.08rem;
  font-size: 0.24rem;
}

.mobile-mode .slide-home .reserve-count .count-num {
  font-size: 0.24rem;
}

/* 移动端图片尺寸缩小 */
.mobile-mode .vehicle-img-box {
  height: 1rem;
}

.mobile-mode .vehicle-img {
  width: 70%;
  height: 70%;
}

.mobile-mode .milestone-dot {
  width: 0.36rem;
  height: 0.36rem;
}

.mobile-mode .count-num {
  font-size: 0.28rem;
}

.mobile-mode .modal-content {
  width: 5rem;
  padding: 0.24rem 0.2rem;
}

.mobile-mode .btn-reserve {
  padding: 0.12rem 0.4rem;
  font-size: 0.16rem;
}

.el-dialog__headerbtn:focus .el-dialog__close,
.el-dialog__headerbtn:hover .el-dialog__close {
  color: #FF3030;
}

.el-dialog__headerbtn .el-icon {
  font-size: 16px;
}

.movePageOpact .float_opacity_bot_3s {
  -webkit-animation: bounceInbot .5s .3s ease both;
  animation: bounceInbot .5s .3s ease both;
}

.movePageOpact .float_opacity_bot_4s {
  -webkit-animation: bounceInbot .5s .4s ease both;
  animation: bounceInbot .5s .4s ease both;
}

.movePageOpact .float_opacity_bot_5s {
  -webkit-animation: bounceInbot .5s .5s ease both;
  animation: bounceInbot .5s .5s ease both;
}

.movePageOpact .float_opacity_right {
  -webkit-animation: bounceInright .5s .3s ease both;
  animation: bounceInright .5s .3s ease both;
}

.movePageOpact .float_opacity_left {
  -webkit-animation: bounceInleft .5s .3s ease both;
  animation: bounceInleft .5s .3s ease both;
}

.movePageOpact .head_in_2s {
  -webkit-animation: headersInright .5s .2s ease both;
  animation: headersInright .5s .2s ease both;
}

.movePageOpact .head_in_4s {
  -webkit-animation: headersInright .5s .4s ease both;
  animation: headersInright .5s .4s ease both;
}

.arrowLeft {
  -webkit-animation: arrowLeftAni 0.5s linear infinite alternate;
  animation: arrowLeftAni 0.5s linear infinite alternate;
}

.arrowRight {
  -webkit-animation: arrowRightAni 0.5s linear infinite alternate;
  animation: arrowRightAni 0.5s linear infinite alternate;
}

@keyframes headersInright {

  0% {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInbot {

  0% {
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes bounceInright {

  0% {
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInleft {

  0% {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes arrowLeftAni {

  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  100% {
    -webkit-transform: translate(5px, 0);
    transform: translate(5px, 0);
  }
}

@keyframes arrowRightAni {

  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  100% {
    -webkit-transform: translate(-5px, 0);
    transform: translate(-5px, 0);
  }
}

@keyframes ns-spin-once {
  0% {
    transform: rotate(0);
  }


  100% {
    transform: rotate(360deg);

  }
}


/* ==================== 大图切换淡入动画 ==================== */
/* JS 只换数据，CSS 负责动画效果 */
.fade-img-wrap .fade-img {
  animation: fadeInImg 0.3s ease-out;
}

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

  100% {
    opacity: 1;
  }
}

/* ==================== 页面入场动画（参考 mw.zhanhuo.com） ==================== */
/* 初始状态：隐藏 + 位移 */
.anim-fade-up,
.anim-fade-down,
.anim-fade-left,
.anim-fade-right,
.anim-scale-in {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.anim-fade-up {
  transform: translateY(60px);
}

.anim-fade-down {
  transform: translateY(-60px);
}

.anim-fade-left {
  transform: translateX(-80px);
}

.anim-fade-right {
  transform: translateX(80px);
}

.anim-scale-in {
  transform: scale(0.8);
}

/* 动画延迟类 */
.anim-delay-1 {
  transition-delay: 0.1s;
}

.anim-delay-2 {
  transition-delay: 0.2s;
}

.anim-delay-3 {
  transition-delay: 0.3s;
}

.anim-delay-4 {
  transition-delay: 0.4s;
}

.anim-delay-5 {
  transition-delay: 0.5s;
}

/* 页面激活时：元素从初始状态运动到目标状态 */
.movePageOpact .anim-fade-up,
.movePageOpact .anim-fade-down,
.movePageOpact .anim-fade-left,
.movePageOpact .anim-fade-right,
.movePageOpact .anim-scale-in {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* 奖励卡片 hover 放大（覆盖入场动画的 transform） */
.movePageOpact .reward-card.anim-scale-in:hover {
  transform: scale(1.05);
  transition: transform 0.3s cubic-bezier(0.34, 1.05, 0.64, 1);
  z-index: 20;
}



/* ============================================================
 * ==================== 移动端载具详情（新增） ====================
 * 仅在移动端 vehicle-introduction 内生效
 * 与PC端共用 box_s3_detail 类名，通过 mobile-detail 区分
 * ============================================================ */

/* Tab 切换栏：flex 布局，其它元素居中，飞机 tab 底部对齐 */
.mobile-mode .vehicle-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.2rem auto;
  position: relative;
  z-index: 2;
}

.mobile-mode .mobile_name {

  height: 1px;
  font-size: .16rem;
  color: #FEA100;
  text-align: center;
  margin: 0 auto;

}
.spindle-line{
  width: 1.35rem;
  height: 0.02rem;
   height: 0.02rem;
  background: #D4AF37;
  clip-path: polygon(
    0% 50%,    /* 左端中点 */
    50% 0%,    /* 顶部中点 */
    100% 50%,  /* 右端中点 */
    50% 100%   /* 底部中点 */
  );
  margin: 0 auto;
 

}

/* 坦克 tab：1.67rem × 0.4rem */
.mobile-mode .vehicle-tab.tank-tab {

  cursor: pointer;
  margin-right: -.14rem;
}
.mobile-mode .tank_act_tittle_1{
width: 1.66rem;
  height: 0.4rem;
}
.mobile-mode .tank_act_tittle_2{
width: 1.46rem;
  height: 0.35rem;
}
/* 飞机 tab：1.47rem × 0.35rem，底部对齐 */
.mobile-mode .vehicle-tab.aircraft-tab {

  cursor: pointer;
  align-self: flex-end;
  margin-left: -.1rem;

}

/* 移动端载具详情容器 */
.mobile-mode .box_s3_detail.mobile-detail {
  position: relative;
  width: 6.5rem;
  margin: 0.1rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 移动端标题图 */
.mobile-mode .mobile-detail .tank_tittle {
  width: 4rem;
  height: auto;
  margin: 0.1rem auto;
}

/* 移动端选中载具标题图 */
.mobile-mode .mobile-detail .one_card_tittle {
  width: 3rem;
  height: auto;
  margin: 0.1rem auto;
}

/* 移动端大图 */
.mobile-mode .mobile-detail .part3_left_img {
  
  /* height: auto; */
  margin: 0.1rem auto;
  position: absolute;
  top: -1rem;
  left:-2rem;

  width:10rem;
  max-width: 13rem !important;
}
.part3_left_img img{
  max-width: none;
}

.mobile-mode .box_s3_detail .s_item:hover {
  animation: none;
}

/* 移动端 detail-top / detail-content 不用绝对定位，改用相对定位 */
.mobile-mode .mobile-detail .detail-top {
  position: relative;
  top: auto;
  left: auto;
  z-index: auto;
}

.mobile-mode .mobile-detail .detail-content {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  z-index: auto;
  margin-top: 0;
}

/* 移动端底部卡片区域 */
.mobile-mode .mobile-detail .box_carousel_list {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  width: 6.5rem;
  margin: 0.15rem auto;
  justify-content: center;
  top: 4rem;
}

/* 移动端底部卡片 */
.mobile-mode .mobile-detail .bottom-cards {
  display: flex;
  justify-content: center;
  gap: 0.05rem;
  flex-wrap: nowrap;
  overflow: hidden;
}

.mobile-mode .mobile-detail .s_item {
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.04rem;
  overflow: hidden;

}

.mobile-mode .mobile-detail .s_item img {
 
}

/* 移动端箭头 */
.mobile-mode .mobile-detail .carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0.21rem;
  height: 0.4rem;
  cursor: pointer;
  z-index: 10;
}

.mobile-mode .mobile-detail .carousel-arrow-left {
  left: -.4rem;
}

.mobile-mode .mobile-detail .carousel-arrow-right {
  right: -.4rem;
}

.mobile-mode .mobile-detail .carousel-arrow.disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* 移动端返回按钮 */
.mobile-mode .mobile-detail .bottom-btn {
  position: relative;
  bottom: auto;
  right: auto;
  margin: 0.15rem auto 0;
  width: 1.2rem;
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
  background: var(--dark-3);
  color: var(--white);
  border-radius: 0.04rem;
  cursor: pointer;
  font-size: 0.16rem;
  text-decoration: none;
  flex-shrink: 0;
}

/* 移动端关闭按钮 */
.mobile-mode .mobile-detail .btn_close {
  position: absolute;
  top: 0;
  right: 0;
  width: 0.3rem;
  height: 0.3rem;
  cursor: pointer;
  z-index: 10;
}
.mobile-mode .el-dialog__wrapper{
  background: rgba(0, 0, 0, 0.65);
}
/* ==================== footer slide ==================== */
/* slidesPerView:'auto' 需要显式高度，常规 slide 占满 100vh */
.pc-mode .page-swiper .swiper-slide:not(.slide-footer) {
  height: 100vh;
}

/* PC：footer slide 高度由内容决定，不占满 100vh */
.pc-mode .swiper-slide.slide-footer {
  height: auto;
  background: #0a0c12;
  display: flex;
  align-items: flex-end;
}

/* 移动：footer slide 高度自适应，底部留出 fixed 按钮的空间 */
.mobile-mode .swiper-slide.slide-footer {
  height: auto;
  margin-bottom: 0.88rem;
}

/* ============================================================
 * 带鱼屏适配（宽高比 > 21:9）
 * 背景图：cover 等比铺满，居中裁剪
 * 内容：rem 已由 JS 按高度约束（1rem = 100px），
 *       元素尺寸不变，宽度方向自然铺开
 * ============================================================ */

@media (min-aspect-ratio: 21/9) {

  /* ---- 背景图：等比铺满全屏，居中裁剪 ---- */
  .pc-mode .page-swiper .swiper-slide[data-bg] {
    background-size: cover;
    background-position: center center;
  }

  /* 导航栏、内容区全部去掉 max-width 约束，自然铺满宽度 */
  /* 元素本身大小由 rem 控制（已按高度锁定为 100px），
     宽度方向间距变大，整体感觉就是"更宽了"但元素大小不变 */
}

/* 超超宽屏（32:9 以上）也不需要特殊处理 */