* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
  border: none;
}

area {
  outline: none;
}

body {
  font-family: '微软雅黑', 'Microsoft YaHei';
  background: #000;
  overflow: hidden;
  padding: 0 !important;
}

::-webkit-scrollbar-track {
  background-color: #242d3e;
  -webkit-box-shadow: inset 0 0 6px #242d3e;
}

/*定义滚动条高宽及背景*/
::-webkit-scrollbar {
  width: 6px;
  background-color: #242d3e;
}

/*定义滚动条*/
::-webkit-scrollbar-thumb {
  background-color: #fff;
  border-radius: 0px;
}


/* .videoBg {
  height:1080px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  clip-path: ellipse(90% 90% at 50% 0%);
}

.videoBg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(to bottom, transparent, #000);
  z-index: 1;
}

.videoBg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin-top: -6%;
} */

.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  zoom: 1;
}

.icon {
  background: url('../../images/index20260601/icon.png') no-repeat;
}

.wrap {
  overflow: hidden;
}

.bottom {
  display: block; /* 👈 改为块级显现 */
  width: 100%;
  position: relative;
  z-index: 2;
}
html, body {
  width: 100% !important;
  height: auto !important; /* 👈 彻底释放高度 */
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important; /* 👈 强制呼出浏览器原生垂直滚动条 */
}

body {
  font-family: '微软雅黑', 'Microsoft YaHei';
  background: #000;
  overflow-x: hidden;          /* 防止横向产生多余的左右晃动 */
}

/* 剥夺大容器的“列车推屏”绝对定位属性 */
.roll-container {
  width: 100% !important;
  position: relative !important; /* 👈 从 absolute 改为 relative 随文档流平铺 */
  top: auto !important;
  left: auto !important;
  transform: none !important;    /* 彻底清除 JS translateY 偏置的干扰 */
  transition: none !important;   /* 关闭旧动画 */
}

/* 让每个车厢章节变成普通的标准块，自上而下顺畅平铺 */
.part {
  width: 100% !important;
  position: relative !important; /* 👈 从 absolute 改为 relative 参与自然文档流排队 */
  display: block !important;
  opacity: 1 !important;         /* 全员无条件显现 */
  overflow: hidden !important;
}

.part1 {
  height: 1074px;
  position: relative;
  background: url('../images/index20260601/part1_bg.jpg') no-repeat center center / 100% 100%;
}

/* .part1-title {
  position: absolute;
  bottom: 295px;
  left: 50%;
  transform: translateX(-50%);
  width: 922px;
  z-index: 5;
  pointer-events: none;
}

.part1-ribbon {
  position: absolute;
  bottom: 100px;
  left: 0;
  width: 100%;
  z-index: 5;
  pointer-events: none;
} */

.part2 {
  height: 913px;
  background: url('../images/index20260601/part2_bg.jpg') no-repeat center center / 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.part3 {
  height: 966px;
  background: url('../images/index20260601/part3_bg.jpg') no-repeat center center / 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.part4 {
  height: 1026px;
  background: url('../images/index20260601/part4_bg.jpg') no-repeat center center / 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;    
  margin-top: 0;
}

.part5 {
  background: url('../images/index20260601/part5_bg2.jpg') no-repeat top center / cover; /* 确保等比铺满 */
  height: 1002px;
  display: flex;
  align-items: center;     /* 水平完美居中 about-box */
  justify-content: center;    /* 垂直完美居中 about-box */
  position: relative;     
}

.part4-img {
  width: 155px;
  height: 208px;
  position: absolute;
  bottom: 100px;
  right: 120px;
  z-index: 2;
}

.part4-img img{
  width: 100%;
  height: 100%;
}

.handbook-section {
  width: 1450px;
  margin: 0 auto;
  position: relative;
  padding-top: 90px;
}

/* 1. 顶部 英雄图鉴 标题标题样式（复用 part2 风格保持一致） */
.handbook-title {
  width: 100%;
  text-align: center;
  height: 125px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('../images/index20260601/title1.png') no-repeat top center;
  
  /* 💡 核心改动：全面废除原有 margin-bottom: 25px，改用绝对定位 */
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 10;
}

.handbook-section, .main-news-section {
  width: 1500px;
  margin: 0 auto;
  position: relative;
  padding-top: 150px; /* 👈 留足 150px 刚好空出上方悬浮的标题即可 */
}

.handbook-title h2 {
  font-size: 58px;
  color: #6f523e;
  font-weight: bold;
}

/* 2. 主体卡片容器布局 */
.handbook-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin-bottom: 30px;
  gap: 30px;
  position: absolute;
  top: 200px;
}

/* 左侧职业切换立体页签 */
.job-tabs-list {
  background: url('../images/index20260601/role_menu.png') no-repeat center center / contain;
  width: 134px;
  height: 532px;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-right: -4px; /* 让卡片无缝贴合右边大背景板 */
  position: relative;
  z-index: 5;
}

.job-tabs-list li {
  width: 100%;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.job-tabs-list li p {
  font-size: 20px;
  color: #6f523e;
  font-weight: bold;
}

/* 选中的职业标签高亮 */
.job-tabs-list li.focus {
  background: #8bb655;
  width: 134px;
}

.job-tabs-list li.focus p {
  color: #ffffff;
}

.mini-card-item.focus {
  border: 3px solid #8bb655;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(139, 182, 85, 0.4);
  transform: translateY(-4px);
}

/* 右侧核心大型双色信息展示面板 */
.hero-detail-panel {
  width: 1166px;
  height: 535px;
  box-sizing: border-box;
  background: #fbf6dd;
  border: 4px solid #c2d8a4;
  border-radius: 24px;
  padding: 25px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

/* 左侧立绘大图留空区 */
.hero-poster-box {
  width: 409px;
  height: 477px;
  background: url('../images/index20260601/role_bg.png') no-repeat top center;
  background-size: contain;
  overflow: hidden;
  position: relative;
}

.hero-poster-box img {
  width: 268px;
  height: 234px;
  /* object-fit: contain; */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 15%;
}

/* 右侧文本与属性介绍组合 */
.hero-info-box {
  width: 649px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  height: 477px;
}

.hero-name-zone {
  text-align: center;
  margin-bottom: 15px;
  position: relative;
  flex-shrink: 0;
}

.hero-desc-card {
  width: 100%;
  flex-grow: 1; 
  background: #fcefb3; 
  /* border: 2px solid #e7cd91; */
  border-radius: 16px; 
  /* padding: 20px 25px; */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-shadow: inset 0 2px 5px rgba(255,255,255,0.6);
  
  /* 必须加上这两个属性：作为底层伪元素的定位基准，并保证内容在最上层 */
  position: relative;
  z-index: 1;
}

/* .hero-desc-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fcefb3;
  border: 2px solid #e7cd91;
  border-radius: 16px;
  z-index: -1;
  transform: translate(8px, 6px);
}

.hero-desc-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fcefb3;
  border: 2px solid #e7cd91;
  border-radius: 16px;
  z-index: -2;
  transform: translate(16px, 12px);
} */

/* 角色简介多行文本块 */
.hero-intro-zone {
  margin-bottom: 20px;
  flex-shrink: 0;
}

/* 基础属性技能图标阵列 */
.hero-skills-zone {
  margin-top: auto; /* 👈 核心铁律：利用 flex 自动把属性模块死死压在黄色卡片的正最底端 */
  width: 100%;
}

/* 通用橙色长条标签头 */
.zone-label {
  width: 100%;
  height: 38px;
  background: #f4c770; 
  border-radius: 19px;
  color: #5b451a;
  border: 2px solid #e0b767;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  letter-spacing: 2px;
}

.hero-name-zone h3 {
  width: 269px;
  height: 63px;
  line-height: 58px;
  font-size: 32px;
  color: #6f523e;
  font-weight: bold;
  position: relative;
  background: url('../images/index20260601/role_name.png') no-repeat top center;
  margin: 0 auto;
}

/* 角色简介多行文本 */
.hero-intro-zone {
  margin-bottom: 25px;
}

.zone-text {
  font-size: 16px;
  color: #6f523e;
  line-height: 1.6;
  text-align: justify;
  padding: 0 10px;
}

.hero-info-box .zone-text,
.hero-desc-card .zone-text {
  /* ❌ 先清除可能存在的固定高度，交给行数限制去卡位 */
  height: auto !important; 
  
  /* 💡 核心防御：锁死多行文本省略号 */
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  /* 👈 黄金卡位：根据你的固定高度，PC 端这里限制最多展示 4 行，超过自动变 ... */
  -webkit-line-clamp: 4 !important; 
  
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-all !important; /* 防止英文字母长单词不换行导致直接被切 */
  
  /* 规整行高，确保 4 行的高度绝不溢出盒子底边 */
  line-height: 1.5 !important; 
}

.skills-icon-list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
}

.skills-icon-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* 圆形技能/属性框 */
.icon-img-wrapper {
  width: 83px;
  height: 83px;
  border-radius: 50%;
  /* border: 5px solid #d9c87f; */
  background: #fff;
  box-sizing: border-box;
  position: relative;
}

.icon-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}

/* 技能描述气泡弹窗 */
.skill-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  width: 180px;
  background: #3e2a10;
  border: 2px solid #c2a050;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  transform: translateX(-50%) translateY(4px);
  z-index: 100;
}

.icon-img-wrapper:hover .skill-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.skill-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #c2a050;
}

.skill-tooltip-name {
  font-size: 13px;
  font-weight: bold;
  color: #f4d98a;
  margin-bottom: 5px;
  line-height: 1.4;
}

.skill-tooltip-desc {
  font-size: 12px;
  color: #e8d8b0;
  line-height: 1.6;
}

.skills-icon-list li span {
  font-size: 14px;
  color: #6f523e;
  font-weight: bold;
}

/* 3. 底部横向走马灯展示条 */
.handbook-carousel-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: absolute;
  top: 750px;
}

/* 绿色的左右三角形方向箭头按钮 */
.arrow-btn {
  width: 61px;
  height: 61px;
  cursor: pointer;
  transition: transform 0.1s;
  background: url('../images/index20260601/mini_arrow.png') no-repeat;
  background-size: contain;
  background-repeat: no-repeat;
  /* background-position: -20px -635px; */
}
.arrow-btn:active {
  transform: scale(0.9);
  background: url('../images/index20260601/mini_arrow_clicked.png') no-repeat;
  background-size: contain;
  background-repeat: no-repeat;  
}

/* 建议替换为您自己切图出来的绿色三角形箭头 */
.arrow-prev {

}

.arrow-next {
  transform: rotate(180deg);
}

.arrow-next:active {
  transform: rotate(180deg) scale(0.9);
}

/* 小卡片横切槽 */
.mini-cards-wrapper {
  display: flex;
  gap: 15px;
}

/* 圆角小方块卡片 */
.mini-card-item {
  width: 100px;
  height: 100px;
  background: #e3f0b9; /* 视觉稿中的浅绿色小卡片 */
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mini-card-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.part.active {
  z-index: 10;
  opacity: 1;
}

@keyframes move {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

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

.topFix {
  width: 100%;
  height: 82px;
  background: #0b172e;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
}

.topFix img {
  width: 107px;
  height: 84px;
  margin-left: 80px;
  float: left;
}

.topFix .topNav {
  margin-left: 216px;
  float: left;
  display: flex;
  width: 1050px;
  text-align: center;
  align-items: center;
  color: #fffbe7;
  height: 82px;
  font-size: 26px;
  /* color: #ffde5a; */
}

/* ==================== 2. 社交遮罩层显隐控制 ==================== */
.top-social-bar {
  display: none; /* 默认让它隐藏 */
}

/* 当被打上 .open 标签时，强制以完美的 flex 弹性盒模型显现 */

.topFix .top-social-bar {
  display: none !important; 
  position: absolute;
  right: 281px; 
  top: 85px;  
  width: 547px;
  height: 85px;
  z-index: 999;
}

/* 2. 激活状态：提升权重！精确指定带 .open 时的显示状态，完美反制隐藏 */
.topFix .top-social-bar.open {
  display: flex !important;
}

@media screen and (max-width: 1440px) {
  .topFix .topNav {
    width: 800px;
  }
}

.topFix .topNav li {
  cursor: pointer;
  width: 210px;
  /* 为颜色变化加上平滑的过渡动效 */
  transition: color 0.15s ease-out, text-shadow 0.15s ease-out;
}

/* 核心：当页面滚动到对应屏时，li 会被自动打上 .focus 类名，此时让其内部的文字变色 */
.topFix .topNav li.focus p {
  color: #ffde5a; /* 变更为你指定的金色高亮色 */
  font-weight: bold;
}

.topFix .topNav li p {
  border-right: 1px solid #828487;
  /* 确保未激活状态下的常规字体也有过渡基础 */
  transition: color 0.3s ease; 
}

.topFix .topNav li:last-child p {
  border: none;
}

.topFix .topNav li span {
  font-size: 12px;
  opacity: 0.4;
}

.top-social-bar {
  position: absolute;
  right: 281px;
  top: 83px;
  width: 547px;
  height: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 25;
  background-position: -253px -184px;
}

.social-icons-list {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
}

.social-link {
  display: block;
  width: 55px;
  height: 55px;
  /* 💡 统一绑定你的基础雪碧图路径 */
  background-image: url('../images/index20260601/icon.png'); 
  background-repeat: no-repeat;
  transition: transform 0.1s ease;
}

.social-link:hover {
  transform: scale(1.05); /* 悬浮微量放大反馈 */
}

/* 二维码悬浮弹出 */
.social-icons-list li.has-qr {
  position: relative;
}

.has-qr .qr-code-img {
  position: absolute;
  top: calc(100%);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 200;
}

.has-qr .qr-code-img img {
  width: 120px;
  height: 120px;
  margin-left: 45px;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  background: #fff;
}

.has-qr:hover .qr-code-img {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.icon-dy   { background-position: -359px -7px; }
.icon-dy:hover { background-position: -359px -71px; }

.icon-sph  { background-position: -432px -7px; }
.icon-sph:hover { background-position: -432px -71px; }

.icon-ks   { background-position: -506px -7px; }
.icon-ks:hover { background-position: -507px -71px; }

.icon-tb   { background-position: -574px -7px; }
.icon-tb:hover { background-position: -580px -71px; }

.icon-bili { background-position: -560px -288px; }
.icon-bili:hover { background-position: -631px -288px; }

.icon-xhs  { background-position: -640px -7px; }
.icon-xhs:hover { background-position: -640px -71px; }

.icon-gzh    { background-position: -705px -7px; }
.icon-gzh:hover { background-position: -705px -71px; }

.main-download-matrix {
  position: absolute;
  bottom: 220px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
  z-index: 15;
}

.down-btn {
  display: block;
  width: 213px;
  height: 66px;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
  background-size: cover;
  /* background-image: url('../images/index20260601/icon.png');  */
}

.down-btn:hover {
  transform: translateY(-3px); /* 悬浮向上微弹效果，极具质感 */
  filter: brightness(1.1);     /* 悬浮轻微点亮 */
}

.btn-taptap-pc {  background-image: url('../images/index20260601/pc_taptap.png'); }
.btn-taptap-m  { background-image: url('../images/index20260601/taptap.png'); }
.btn-android   { background-image: url('../images/index20260601/android.png'); }
.btn-ios       { background-image: url('../images/index20260601/ios.png'); }

.section-title {
  width: 100%;
  text-align: center;
  height: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('../images/index20260601/new_title.png') no-repeat top center;
  
  /* 💡 核心改动：绝对定位，不往下推挤 banner 和新闻列表 */
  position: absolute;
  top: 40px;
  left: 0;
  z-index: 10;
}
.section-title h2 {
  font-size: 58px;
  color: #6f523e;
  font-weight: bold;
  position: relative;
  display: inline-block;
}

.section-content {
  width: 100%;
  display: flex;
  align-items: flex-start;
  margin-top: 70px;
  gap: 50px;
  margin-left: 50px;
}

.news-banner-box {
  width: 772px;
  height: 487px;
  background: url('../images/index20260601/card_bg.png');
  position: relative;
  overflow: hidden;
}

.part2-img {
  width: 268px;
  height: 198px;
  position: absolute;
  top: 80px;
  left: -140px;
  z-index: 1;
}

.part2-img img{
  width: 100%;
  height: 100%;
}

.part3-img {
  width: 193px;
  height: 228px;
  position: absolute;
  bottom: 105px;
  right: 180px;
  z-index: 2;
}

.part3-img img{
  width: 100%;
  height: 100%;
}

.carousel-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-list {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-list li {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  display: none;
}

/* 默认显示第一个 */
.carousel-list li:first-child {
  display: block;
}

.carousel-list img {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 25px 23px 35px 20px;
  object-fit: fill;
  border-radius: 16px;
}

/* 轮播小圆点定位在底部中央 */
.carousel-dots {
  position: absolute;
  bottom: 45px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  background: rgba(249, 249, 241, 0.5);;
  padding: 6px 16px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}

.carousel-dots a {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff; /* 半透明白 */
  transition: all 0.25s ease;
}

.carousel-dots a.focus {
  background: #e64f13;
  width: 50px;
  border-radius: 5px;
}

/* ================= 右侧新闻列表区域 ================= */
.news-tabs-box {
  width: 578px;
}

/* 导航 Tab */
.news-tabs-nav {
  width: 100%;
  display: flex;
  border-bottom: 2px solid #e1dbcd;
  padding-bottom: 8px;
  margin-bottom: 15px;
  align-items: center;
}

.news-tabs-nav a {
  font-size: 18px;
  color: #6f523e; 
  font-weight: 500;
  position: relative;
  padding-bottom: 4px;
  margin-right: 0; /* 💡 彻底清除原本不均匀的右边距 */
}

.news-tabs-nav span {
  color: #857059;
  margin: 0 16px;
  font-size: 23px;
  user-select: none;
  margin-top: -4px;
}

.news-tabs-nav a.focus {
  color: #5c9c28; /* 👈 修改：点击后的激活颜色 */
  font-weight: bold;
}

/* 顺手把下划线也改成配套的绿色，更还原设计稿 */
.news-tabs-nav a.focus::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 4px;
  background: #5c9c28; 
  border-radius: 2px;
}

/* More 按钮单独靠右 */
.news-tabs-nav a.more-btn {
  height: 48px;
  width: 48px;
  margin-left: auto;
  background-image: url('../images/index20260601/more.png'); 
  background-size: contain;
  background-repeat: no-repeat;
  /* background-position: -161px -236px; */
}

.news-vertical-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px; /* 行间距 */
}

.news-vertical-list li {
  width: 100%;
  height: 52px;
  background: #ecefdb;
  border-radius: 22px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 👈 新增：在标题前加一个尺寸 33x33 的标志 */
/* 因为 li 是 flex 布局，利用 ::before 伪元素不仅干净，而且绝对不会破坏原有 HTML 结构 */
.news-vertical-list li::before {
  content: "";
  display: block;
  width: 33px;
  height: 33px;
  margin-right: 12px; /* 和右边文字拉开点间距 */
  flex-shrink: 0;
  background-image: url('../images/index20260601/icon.png');
  background-repeat: no-repeat;
  background-position: -147px -185px;
}

/* 👈 修改：点击（悬浮触发）后的样式，背景变色且向右移动 20px */
.news-vertical-list li:hover {
  background: #fcefb3; 
  transform: translateX(20px); 
}

/* 如果这个 33x33 的小图标在激活状态下也会变色，把变色后的坐标填在这里 */
.news-vertical-list li:hover::before {
  background-position: -192px -185px;
}

/* 标题文本自动截断（保持不变） */
.news-title-text {
  color: #5c432d;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
  margin-right: 20px;
}

/* 👈 修改：右侧的日期颜色始终为 #4a1f14 */
.news-date {
  color: #4a1f14; 
  font-weight: bold; /* 设计稿看起来字体偏粗，加个粗体更还原 */
  font-size: 14px;
  flex-shrink: 0;
}

.wrap {
  width: 100%;
  height: auto; 
  position: relative;
  overflow: hidden; /* 保留 hidden 防止内部元素横向溢出导致页面左右晃动 */
}

/* 进入当前屏时，内部子元素激活动画（可结合你原有的动效） */
.part.active {
  z-index: 10;
}

/* 当滑到底部，让底部版权信息流式展出，不破坏首屏模型 */
.bottom {
  width: 100%;
  background: #31384e;
  position: relative;
  z-index: 2;
}

.goDetail {
  display: none;
  width: 48px;
  height: 49px;
  background: #f9c42e;
  font-weight: bold;
  text-align: center;
  line-height: 49px;
  color: #fff;
  font-size: 30px;
  position: absolute;
  right: 0;
  top: 0;
}

.title {
  width: 474px;
  height: 158px;
}

.skillImg {
  width: 109px;
  height: 114px;
  float: left;
}

.title1 {
  background-position: 0 -653px;
}

.title2 {
  background-position: -474px -653px;
}

.title3 {
  background-position: 0 -830px;
}

.title4 {
  background-position: -474px -830px;
}

.title5 {
  background-position: 0 -1036px;
}

.title6 {
  background-position: -474px -1036px;
}

.skillImg_1 {
  background-position: 0 -206px;
}

.skillImg_2 {
  background-position: -142px -206px;
}

.skillImg_3 {
  background-position: -290px -206px;
}

.skillImg_4 {
  background-position: -446px -206px;
}

.skillImg_5 {
  background-position: -606px -206px;
}

.skillImg_6 {
  background-position: -761px -206px;
}

.skillBox {
  width: 468px;
  height: 115px;
  padding: 25px 0;
  border-bottom: 1px solid rgba(178, 223, 168, 0.47);
}

.skillDes {
  width: 300px;
  float: left;
  margin-left: 20px;
}

.skillDes h6 {
  font-weight: normal;
  color: #ffec4b;
  font-size: 20px;
  line-height: 60px;
}

.skillDes p {
  color: #fff;
  font-size: 16px;
}

.skill_s {
  width: 344px;
  height: 66px;
  margin-top: 36px;
  position: relative;
  z-index: 2;
}

.role {
  position: absolute;
}

.role1 {
  right: -146px;
  top: 127px;
}

.role2 {
  right: -352px;
  top: 99px;
}

.role3 {
  right: -237px;
  top: 105px;
}

.role4 {
  right: -387px;
  top: 95px;
}

.role5 {
  right: -225px;
  top: 60px;
}

.role6 {
  right: -125px;
  top: 99px;
}

.roleNav {
  display: flex;
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 1258px;
  height: 142px;
  background: rgba(0, 0, 0, 0.7);
  justify-content: space-around;
  z-index: 11;
}

.roleNav li {
  width: 141px;
  height: 176px;
  margin-top: -56px;
  position: relative;
}

.roleNav li.focus {
  border: 3px solid #ffec4b;
  border-radius: 0 20px 0 15px;
  margin-top: -80px;
  width: 135px;
  height: 170px;
}

.roleNav li.roleNav1 {
  background-position: 0 0;
}

.roleNav li.roleNav2 {
  background-position: -163px 0;
}

.roleNav li.roleNav3 {
  background-position: -324px 0;
}

.roleNav li.roleNav4 {
  background-position: -485px 0;
}

.roleNav li.roleNav5 {
  background-position: -661px 0;
}

.roleNav li.roleNav6 {
  background-position: -835px 0;
}

.roleNav li p {
  width: 100%;
  height: 36px;
  text-align: center;
  line-height: 36px;
  color: #787ca7;
  background: #14141e;
  position: absolute;
  bottom: 0px;
  left: 0;
  border-radius: 0 0 0 11px;
}

.roleNav li.focus p {
  background: #f8d601;
  color: #4f3417;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
  }

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

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
  }

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

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
  }

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

#certify {
  position: relative;
  width: 1260px; 
  margin: 0 auto; 
  height: 670px;
  padding-top: 70px;
}

#certify .swiper-container {
  padding-bottom: 60px;
  height: 100%;
  /* 💡 核心修复：必须允许内部的卡片溢出 1400px 的盒子！
     否则被挤在边缘的副卡片和它们身上帅气的 3D 阴影会被直接切掉一块！ */
  overflow: visible !important; 
}

/* 下面这部分保持上一步的样式不变，用于生成紧凑无缝的卡片与阴影 */
#certify .swiper-slide {
  width: 1062px !important;
  height: 613px !important;
  background: none;
  border-radius: 16px;
  margin: 0 !important; 
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.55);
}

#certify .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover; 
}

/* 💡 核心修复3：给两侧被推到后面的卡片设置最佳半透明度，配合阴影更显深邃 */
.swiper-slide.swiper-slide-next,
.swiper-slide.swiper-slide-prev {
  opacity: 1 !important; /* 再次确认无透明度 */
  /* 用黑魔法 filter: brightness 强行压暗两侧卡片的亮度，模拟被挡在后面的物理背光阴影！ */
  /* 数值 0.5 代表亮度减半，你可以根据视觉喜好在 0.3(极暗) ~ 0.7(微暗) 之间微调 */
  filter: brightness(0.5) !important; 
  /* 将两侧卡片的物理阴影加重、加散，加强纵深感 */
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8) !important;
}

#certify .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-next):not(.swiper-slide-prev) {
  opacity: 0 !important;
}

#certify .swiper-slide p {
  line-height: 98px;
  padding-top: 0;
  text-align: center;
  color: #636363;
  font-size: 1.1em;
  margin: 0;
}

#certify .swiper-pagination {
  width: 100%;
  top: 710px;
}

#certify .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 10px;
  background-color: #a79182;
  width: 10px;
  height: 10px;
  opacity: 1;
}

#certify .swiper-pagination-bullets .swiper-pagination-bullet-active {
  background-color: #493222;
}

#certify .swiper-button-prev {
  left: -150px;
  width: 80px;
  height: 80px;
  background: url(../images/index20260601/arrow.png) no-repeat;
  background-size: contain;
  background-repeat: no-repeat;
  /* background-position: -24px -705px; */
  z-index: 10;
  margin-top: -35px;
}

#certify .swiper-button-next {
  right: -160px;
  width: 80px;
  height: 80px;
  background: url(../images/index20260601/arrow.png) no-repeat;
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(180deg);
  z-index: 10;
  margin-top: -35px;
}

#certify .swiper-button-prev:active {
  background: url(../images/index20260601/arrow_clicked.png) no-repeat;
  background-size: contain;
  background-repeat: no-repeat;
}

#certify .swiper-button-next:active {
  background: url(../images/index20260601/arrow_clicked.png) no-repeat;
  background-size: contain;
  background-repeat: no-repeat;
}

.about-box {
  width: 100%;
  height: 352px;
  background: url(../images/index20260601/about_card.png) no-repeat center center / contain;
  position: absolute;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 220px;
}

.about-content-wrapper {
  /* 💡 核心整改：彻底删掉原本冲突的 width: 1100px; margin-left: 110px; margin-top: 80px; */
  display: flex;
  align-items: center;       /* 二维码与右侧按钮垂直对齐 */
  justify-content: center;   /* 水平居中 */
  gap: 60px;                 /* 用干净的 gap 间距取代原本生硬的 margin 偏置 */
}

.qr-code-zone {
  display: flex;
  gap: 40px;
  align-items: center;
}

.qr-item-box {
  display: flex;
  align-items: flex-start;
  position: relative;
  width: 273px;
  height: 237px;
}

.qr-tag-label {
  /* width: 273px;
  height: 237px; */
  /* background: url('../images/index20260601/icon.png') no-repeat; */
  /* text-indent: -9999px;
  flex-shrink: 0; */
}

.label-gzh {
  /* background-position: -8px -183px; */
  background: url('../images/index20260601/gzh_bg.png') no-repeat;
}

.label-sph {
  /* background-position: -79px -183px; */
  background: url('../images/index20260601/sph_bg.png') no-repeat;
}

.qr-code-img {
  width: 210px;
  height: 210px;
  position: absolute;
  right: 13px;
  top: 13px;
}

.qr-code-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 15px;
}

.media-links-zone {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-left: 50px;
}

.media-btn {
  display: block;
  width: 291px;
  height: 101px;
  /* background: url('../images/index20260601/icon.png') no-repeat; */
  transition: transform 0.1s ease;
}

.media-btn:hover {
  transform: scale(1.02);
}

.media-btn:active {
  transform: scale(0.98);
}

.btn-dy {
  /* background-position: -2px -5px; */
  background: url('../images/index20260601/douyin_icon.png') no-repeat;
}

.btn-tap {
  /* background-position: -2px -93px; */
  background: url('../images/index20260601/taptap_icon.png') no-repeat;
}

.part5 .handbook-title {
  background: url(../images/index20260601/title3.png) no-repeat top center;
}

.ageTips {
  position: absolute;
  top: 150px;
  right: 10px;
  z-index: 100;
  display: none;
}

.bottom {
  background: #31384e;
}

.copy_right {
  width: 800px;
  margin: 0 auto;
  color: #9ea4b4;
  background: #31384e;
  font-size: 14px;
  line-height: 28px;
  padding-bottom: 25px;
}

.copy_right a {
  font-size: 14px;
  color: #9ea4b4;
}


.bottom {
  display: block;
  width: 100%;
  /* 1. 将底色改为与新页脚一致的深苔绿/深灰色系，完美交融 */
  background: #0b172e; 
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}


.agreement-content {
  width: 1200px; /* 框定在官网常规主视觉宽度内，防止高分屏下两侧飞散 */
  margin: 0 auto;
  color: #fce9aa; /* 复刻新版温润高贵的淡金黄色字体 */
  height: 200px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.agreement-content .agreement-left {
  width: 200px;
  margin-right: 25px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 约束Logo图片的长宽比，防止发生被挤压畸变 */
.agreement-content .agreement-left img {
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
}

.agreement-right {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* 文本整体靠左对齐，排版更具工业规范感 */
  text-align: left;
  height: 200px;
}

.agreement-right p {
  font-size: 14px; /* 在官网中微调至 14px，字形更精致紧凑 */
  width: 100%;
  line-height: 24px;
  margin: 2px 0;
}

.agreement-right p:nth-child(1) {
  margin-bottom: 8px;
}

/* 协议文本高亮超链接样式 */
.agreement-right p > a {
  color: #fce9aa;
  margin: 0 15px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.agreement-right p > a:first-child {
  margin-left: 0; /* 首项去掉左边距，保持左边缘绝对对齐 */
}

.agreement-right p > a:hover {
  color: #ffffff; /* 悬浮时变白提示可点击 */
  text-decoration: underline;
}

/* 彻底删掉清理掉原本无用的旧老样式残余 */
.copy_right {
  display: none;
}