/* 文件：css/style.css | 用途：全站样式（CSS 变量 / 重置 / 全局组件 / 各页面 / 响应式 / 动画） | 最近更新：2026-08-28 */

/* ============================================ */
/* 1. 全局基础配置（最顶层：变量 + 重置 + 通用工具） */
/* ============================================ */
:root {
  /* 主品牌色系（网站主色调，统一管理） */
  --brand-deep-blue: #002366;
  --brand-bright-blue: #3b82f6; /* 亮蓝色（时间轴连接线/小标题竖线等强调元素） */
  --brand-red: #E21837;
  --gold-color: #C8A97E;

  /* 文本/边框通用色 */
  --text-dark: #222;       /* 正文深色 */
  --text-gray: #555;        /* 灰色文字 */
  --text-light: #fff;       /* 白色文字 */
  --text-gray-light: #b0bccc;/* 浅灰色文字 */
  --border-color: #eee;     /* 通用边框色 */
  --border-line: rgba(255,255,255,0.1); /* 透明分割线 */

  /* 背景色 */
  --footer-bg-gradient: linear-gradient(180deg, #0f2c4a, #071e35); /* 页脚渐变 */
  --page-banner-gradient: linear-gradient(135deg,#3b82f6 0%,#1e40af 100%); /* 子页面banner渐变 */

  /* 通用过渡动画 */
  --transition-base: all 0.3s ease;
  --shadow-base: 0 4px 10px rgba(0,0,0,0.08);
  --shadow-hover: 0 10px 25px rgba(0, 35, 102, 0.25);

  /* 页脚后三列统一行节奏（Quick Link / Products / Contact 三列共用） */
  --footer-line-height: 1.5;  /* 单行文字高度倍数 */
  --footer-row-gap: 10px;     /* 行与行之间的间距 */
}

/* 全局重置：清除浏览器默认内外边距，统一盒模型 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/* html body 基础设置 */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 禁止横向滚动 */
  padding-top: 72px; /* 固定导航高度，防止内容被顶部导航遮挡 */
}
/* 图片自动等比缩放（核心！） */
img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* 通用容器：所有页面内容居中、宽度统一、左右留白 */
.container,
.nav,
.intro-section,
.about-section .container,
.footer-wrap,
.contact-section{
  width: 94%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 通用按钮样式：所有按钮公共基础样式 */
.btn-base {
  padding: 15px 36px;
  border-radius: 4px;
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition-base);
  display: inline-block;
  border: none;
  cursor: pointer;
}
/* 主按钮（白底深蓝字） */
.btn-primary {
  background: var(--text-light);
  color: var(--brand-deep-blue);
  box-shadow: 0 4px 12px rgba(0, 35, 102, 0.15);
}
/* 次按钮（透明底白字边框） */
.btn-secondary {
  background: transparent;
  color: var(--text-light);
  border: 2px solid var(--text-light);
}
/* 品牌按钮（深蓝底白字） */
.btn-brand {
  background: var(--brand-deep-blue);
  color: var(--text-light);
}
.btn-brand:hover {
  background: #001a4d;
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* 通用hover动效：卡片、按钮悬浮上移效果 */
.btn-base:hover,
.contact-inquiry-btn:hover,
.team-card:hover,
.product-card:hover {
  transform: translateY(-2px);
}

/* ============================================ */
/* 2. 全局通用模块（导航/页脚/回到顶部 等全局组件） */
/* ============================================ */
/* 顶部 Header 导航栏（固定在顶部） */
.header {
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid var(--border-color);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999; /* 最高层级 */
  transition: box-shadow 0.3s ease, border-bottom 0.3s ease;
}
/* 导航滚动时的阴影样式 */
.header.sticky {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid #f0f0f0;
}

/* 导航容器：logo + 菜单 左右布局 */
.nav {
  max-width: 1500px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo 区域 */
.logo {
  display: flex;
  align-items: center;
}
.logo img {
  height: 44px;
}

/* 桌面端导航链接 */
.nav-links {
  display: flex;
  align-items: center;
  gap: 44px;
}
.nav-links a {
  text-decoration: none;
  font-size: 18px;
  color: var(--text-dark);
  font-weight: 520;
  position: relative;
  transition: var(--transition-base);
}
/* 导航下划线动画 */
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--brand-deep-blue);
  transition: width 0.3s ease;
}
.nav-links a:hover::after {
  width: 100%;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--brand-deep-blue);
}
.nav-links a.active {
  font-weight: 600;
}

/* 导航内联系按钮（特殊样式） */
.contact-btn {
  padding: 8px 16px;
  border: 1px solid var(--brand-deep-blue);
  border-radius: 50px;
  color: var(--brand-deep-blue);
  font-weight: 600;
  transition: var(--transition-base);
  white-space: nowrap;
  text-decoration: none;
}
.contact-btn:hover {
  background: var(--brand-deep-blue);
  color: var(--text-light) !important;
  text-decoration: none;
}
/* 清除联系按钮的下划线 */
.contact-btn::after,
.btn-base::after {
  display: none;
}
.contact-btn.active {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
/* Contact页面专属：取消按钮样式，变回普通导航文字 */
.page-contact .contact-btn {
  padding: 0;
  border: none;
  border-radius: 0;
  color: inherit;
  font-weight: normal;
}
/* 清除contact页面按钮hover变色效果 */
.page-contact .contact-btn:hover {
  background: transparent;
  color: var(--brand-deep-blue) !important;
}
/* 保留导航通用下划线动画（和其他导航a标签统一） */
.page-contact .contact-btn::after {
  display: block;
}

/* 语言切换 */
.lang-switch {
  position: relative;
  width: 80px;
  flex-shrink: 0;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  user-select: none;
}
.lang-current {
  display: block;
  padding: 6px 0;
}
.lang-switch:hover .lang-current {
  background: #f5f5f5;
}
/* 下拉菜单 */
.lang-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border: 1px solid var(--border-color);
  min-width: 160px;
  box-shadow: var(--shadow-base);
  display: none;
  flex-direction: column;
  z-index: 9999;
  overflow: hidden;
}
.lang-switch:hover .lang-dropdown,
.lang-switch.active .lang-dropdown {
  display: flex;
}
.lang-dropdown a {
  padding: 12px 16px;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid var(--border-color);
}

.lang-dropdown a:hover {
  background: #f7f7f7;
  color: var(--brand-deep-blue);
}

/* 手机端导航 */
.mobile-header-right {
  display: none;
  align-items: center;
  gap: 14px;
}
.desktop-nav {
  display: flex;
}
/* 汉堡菜单图标 */
.hamburger {
  width: 24px;
  height: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
.hamburger span {
  width: 100%;
  height: 2px;
  background: var(--text-dark);
}
/* 手机端弹出菜单 */
.mobile-menu {
  position: absolute;
  top: 72px;
  left: 0;
  width: 100%;
  background: #f8f9fa;
  border-top: 1px solid var(--border-color);
  padding: 0 20px 20px;
  z-index: 9999;
  /* 动画核心配置 */
  transform: translateY(-10px); /* 初始向上偏移一点 */
  opacity: 0;
  pointer-events: none; /* 隐藏时禁止点击 */
  transition: all 0.25s ease-out; /* 过渡时长+缓动曲线 */
  visibility: hidden; /* 隐藏时脱离交互，优化性能 */
}
/* 激活状态：滑入显示 */
.mobile-menu.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.mobile-menu a {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dark);
  text-decoration: none;
  padding: 15px 12px;
  border-bottom: 1px solid var(--border-color);
  text-align: left;
}
.mobile-menu a:hover {
  background: #f1f1f1;
}
.mobile-menu a.active {
  background: #e8f0fe;
  color: #1e40af;
}
/* 页脚（全局通用） */
footer {
  background: var(--footer-bg-gradient);
  color: var(--text-gray-light);
  padding: 20px;
  font-size: 14px;
}
/* 页脚顶部标语 */
.footer-top-slogan {
  text-align: center;
  font-size: 15px;
  color: var(--text-light);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
  line-height: 1.5;
}
.footer-top-slogan strong {
  color: var(--gold-color);
  font-weight: 500;
  letter-spacing: 0.3px;
}
/* 页脚分割线 */
.footer-divider {
  height: 1px;
  background: var(--border-line);
  margin: 0 auto 15px;
}
/* 页脚布局：多列弹性布局 */
.footer-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}
/* 桌面端：中间四列区域与上下两条分隔线保持相同间距
   （上方间距来自 .footer-divider 的 margin-bottom:15px，
     此处补齐下方间距，避免最后一行文字紧贴下面那条横线） */
@media (min-width: 769px) {
  .footer-row {
    padding-bottom: 15px;
  }
}
.footer-col {
  flex: 1;
  min-width: 200px;
}
.footer-brand { flex: 1.3; }
.footer-links { flex: 1.1; }
.footer-contact { flex: 1.1; }
.align-center-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.align-center-col h4,
.align-center-col ul {
  width: 100%;
  text-align: left;
}

/* 页脚logo */
.footer-logo {
  height: 60px;
  width: auto;
  margin-bottom: 15px;
  filter: brightness(0) invert(1); /* 将图标强制反相为纯白色，适配深色背景 */

}
.footer-slogan {
  color: var(--text-light);
  font-size: 15px;
  margin: 0 0 10px;
}
/* 品牌描述（英文站已不使用，中文站仍在用，样式合并保留） */
.footer-desc {
  line-height: 1.5;
  color: var(--text-gray-light);
  margin: 0;
  padding-right: 100px; /* 桌面端右侧留白 */
}
@media (max-width: 768px) {
  .footer-desc { padding-right: 0; } /* 移动端取消右侧留白 */
}
.footer-links h4,
.footer-contact h4 {
  color: var(--text-light);
  font-size: 16px;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.arrow-icon {
  display: none;
  font-size: 12px;
  color: var(--text-light);
}
.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links a {
  color: var(--text-gray-light);
  text-decoration: none;
  transition: var(--transition-base);
}

/* ---------------------------------------------------------------
   页脚后三列行距统一（Quick Link / Products / Contact）
   原来第2、3列是 li(无行高)+10px 间距，第4列是 flex 行(行高1.5)+9px 间距，
   两边行高和间距都不一致，视觉上第4列明显更松。此处统一到同一节奏。
   --------------------------------------------------------------- */
.footer-links li,
.footer-contact .contact-item {
  margin: 0 0 var(--footer-row-gap);
  line-height: var(--footer-line-height);
  min-height: calc(1em * var(--footer-line-height));
}
.footer-links li:last-child,
.footer-contact .contact-item:last-child {
  margin-bottom: 0;
}
.footer-links a:hover,
.contact-item a:hover,
.footer-legal a:hover {
  color: var(--brand-red);
  text-decoration: underline;
}

/* 页脚联系方式 */
.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* 图标不参与撑高行，保证与第2、3列行高严格一致 */
.contact-item > svg {
  flex-shrink: 0;
}
.contact-item a,
.contact-item span {
  line-height: var(--footer-line-height);
  color: var(--text-gray-light);
  text-decoration: none;
}
/* 社交图标 */
.contact-icons {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 10px;
  margin-left: 26px;
  flex-wrap: nowrap;
}
.ft-icon {
  font-size: 18px;
  color: #b0b0b0;
  transition: var(--transition-base);
  cursor: pointer;
}
.wa-icon:hover { color: #25d366; }
.wc-icon:hover { color: #07c160; }
.wechat-icon-wrap {
  position: relative;
  display: inline-block;
}
/* 微信二维码*/
.wechat-qrcode {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(180px, 40vw, 220px); /* 最小180，最大220，中间根据视口宽度自适应 */
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  padding: 8px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); /* 增加柔和阴影，提升悬浮质感 */
  border: 1px solid rgba(0, 0, 0, 0.05); /* 极淡的边框，防止纯白在浅色背景下看不清 */
  display: none;
  z-index: 9999;
}
/* 可选：底部指示小三角 */
.wechat-qrcode::after {
  content: '';
  position: absolute;
  bottom: -6px; /* 位于卡片底部外侧 */
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #fff;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.05); /* 让三角也有阴影 */
  z-index: -1; /* 放在卡片下方 */
}

.wechat-qrcode img {
  width: 100%;
  /* 不用height，依靠父aspect-ratio约束成正方 */
}
.wechat-icon-wrap:hover .wechat-qrcode {
  display: block;
}
.contact-us-btn {
  padding: 4px 14px;
  border: 1px solid var(--text-light);
  border-radius: 999px;
  color: var(--text-light);
  font-size: 14px;
  text-decoration: none;
  transition: var(--transition-base);
  white-space: nowrap;
}
.contact-us-btn:hover {
  background: var(--text-light);
  color: #0a2540;
  border-color: var(--text-light);
}
/* 页脚底部 */
.footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-light);
  margin-top: 0;
  padding-top: 0;
  gap: 12px;
  text-align: center;
}
.footer-legal a {
  color: #b0c4de;
  text-decoration: underline;
  margin: 0 12px;
}
.footer-bottom-bar .copyright {
  color: #b0c4de;
}
.contact-item a:hover span {
  color: #E21837;
}

/* ============================================ */
/* 2.1 右下角全局悬浮联系图标（仅电脑端）        */
/* ============================================ */
.float-contact {
  position: fixed;
  right: 24px;
  bottom: 40px;           /* 初始值，滚动时由 JS 接管，保证不越过页脚 */
  z-index: 9990;          /* 低于 header(99999) 与弹窗(99999) */
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* 默认隐藏，向下滚动后由 JS 加 .show 淡入 */
  opacity: 0;
  visibility: hidden;
  transform: translateX(24px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
.float-contact.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* 单个圆形按钮 */
.float-item {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e6ebf2;
  box-shadow: 0 4px 14px rgba(0, 35, 102, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  color: var(--brand-deep-blue);
  transition: var(--transition-base);
}
.float-item svg {
  width: 24px;
  height: 24px;
  pointer-events: none; /* 避免 svg 抢走 hover，导致气泡闪烁 */
}
.float-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 35, 102, 0.22);
}
/* 各按钮品牌配色 */
.float-item.fc-whatsapp { color: #25D366; }
.float-item.fc-whatsapp:hover { background: #25D366; color: #ffffff; }
.float-item.fc-wechat { color: #07C160; }
.float-item.fc-wechat:hover { background: #07C160; color: #ffffff; }
.float-item.fc-tel { color: var(--brand-deep-blue); cursor: default; }
.float-item.fc-tel:hover { background: var(--brand-deep-blue); color: #ffffff; }
.float-item.fc-email { color: #ea4335; }
.float-item.fc-email:hover { background: #ea4335; color: #ffffff; }
.float-item.fc-top { color: #002D62; }
.float-item.fc-top:hover { background: #002D62; color: #ffffff; }

/* 左侧滑出的气泡（号码提示 / 二维码） */
.float-pop {
  position: absolute;
  top: 50%;
  right: calc(100% + 14px);
  transform: translateY(-50%) translateX(8px);
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.float-item:hover .float-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}
/* 气泡右侧小三角 */
.float-pop::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -6px;
  width: 12px;
  height: 12px;
  background: #ffffff;
  transform: translateY(-50%) rotate(45deg);
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
/* 号码文字气泡 */
.float-pop.pop-text {
  padding: 8px 14px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-deep-blue);
}
/* 二维码气泡 */
.float-pop.pop-qr {
  width: 218px;           /* 在桌面端“直接显示二维码”基础上放大 30%（168 → 218） */
}
.float-pop.pop-qr img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* 悬浮图标轻提示（如点击电话显示号码） */
.fc-toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%) translateY(10px);
  background: rgba(0, 35, 102, 0.92);
  color: #fff;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  white-space: nowrap;
}
.fc-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* 手机端不显示悬浮图标（手机用底部固定三图标栏） */
@media (max-width: 768px) {
  .float-contact { display: none !important; }
}

/*比例容器（保持图片等比缩放，适应不同屏幕） */
.scale-box {
  width: 100%;
  height: 0;
  /* 16:9图片比例（统一展示比例） */
  padding-top: 56.25%;
  position: relative;
}
.slider-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slider-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================ */
/* 3. 首页 Banner和子页面 Banner */
/* ============================================ */
/* 首页 Banner（全屏高度） */
.hero-banner {
  width: 100%;                          /* 宽度100%，铺满浏览器整行 */
  height: calc(100vh - 72px);
  max-height: calc(100vh - 72px);                       /* 高度占满整个视口（浏览器可视区），实现全屏banner */
  overflow: hidden;          /* 超出容器的部分直接隐藏（防止图片或内容溢出） */
  margin-top: -72px;                    /* 向上负边距，抵消顶部导航栏高度，让banner顶到页面最顶端 */
  content-visibility: auto;             /* 浏览器优化渲染性能，不在视口时减少绘制，提升性能 */
  display: flex;                        /* 开启弹性布局，方便内部文字/内容居中 */
  align-items: center;                  /* 弹性布局：垂直方向居中 */
  justify-content: center;              /* 弹性布局：水平方向居中 */
  position: relative;                   /* 相对定位，为内部绝对定位元素（如遮罩、文字）做参照 */
  z-index: 0;                           /* 层级为0，保证在导航下方、遮罩层下方，不遮挡其他模块 */
}
/* 遮罩层 */
.hero-banner::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 40, 90, 0.18);
  z-index: -1;
}

/* 首屏背景视频：绝对定位铺满整个 Banner 区域，作为循环播放的背景且不挤压文字内容 */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 保持比例铺满，超出部分裁切，避免变形与黑边 */
  z-index: -1;
  display: block;
}
.banner-content {
  max-width: 900px;
  padding: 0 20px;
  text-align: center;
  color: var(--text-light);
  margin-top: 120px;
  z-index: 1;
}
.hero-banner h1 {
  font-size: 42px;
  margin-bottom: 10px;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  white-space: nowrap; /* 强制不换行 */
  overflow: visible;   /* 内容正常显示 */
}
.hero-banner p {
  font-size: 19px;
  line-height: 1.8;
  margin-bottom: 45px;
  opacity: 0.95;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.banner-buttons {
  display: flex;
  justify-content: center;
  align-items: center; /* 新增：两个按钮垂直中线对齐，解决高低不齐 */
  gap: 50px;
  flex-wrap: wrap;
  margin-top: 250px;
}
/* 向下滚动按钮 */
.scroll-down {
  position: fixed;
  right: 24px;
  left: auto;
  bottom: 28px;
  transform: none;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.2);
  border: 2px solid var(--text-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  font-size: 16px;
  cursor: pointer !important;
  z-index: 999 !important;
  transition: var(--transition-base);
  animation: bounce 2s infinite;
}
.scroll-down.hidden {
  opacity: 0;
  visibility: hidden;
}

/* 子页面 Banner（非首页） */
.page-banner {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 !important;
  margin: 0 !important;
  margin-top: -72px !important; /* 上移以紧贴顶部导航栏 */
  background: var(--page-banner-gradient);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.page-banner h1,
.page-banner .banner-content,
.page-banner .banner-title {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  position: relative !important;
  z-index: 3 !important;
}
.banner-title {
  color: var(--text-light);
  font-size: 46px;
  font-weight: 700;
  text-shadow: 0 3px 6px rgba(0,0,0,0.15);
  margin: 0 0 12px 0;
  letter-spacing: 0.5px;
}
/* 波浪动画 */
.banner-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 160px;
  z-index: 1;
  animation: waveFadeIn 1.1s ease-out;
}
.banner-wave::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" preserveAspectRatio="none"><path d="M0,64 C320,110 640 40 1440 70 L1440 120 L0 120 Z" fill="rgba(255,255,255,0.1)"></path></svg>');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: bottom center;
}
.banner-wave::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 180" preserveAspectRatio="none"><path d="M0,110 C280 60 720 130 1440 80 L1440 180 L0 180 Z" fill="rgba(255,255,255,0.05)"></path></svg>');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: bottom center;
}
/* 手机端适配：减小波浪高度 */
@media (max-width: 768px) {
  .banner-wave::before {
    height: 60px; /* 将原来的 120px 减小一半 */
  }
  .banner-wave::after {
    height: 90px; /* 将原来的 180px 减小一半 */
  }
}

/* ===============轮播图按钮效果================= */
.prev-btn,.next-btn{
  transition: background 0.2s ease;
}
.prev-btn:hover,.next-btn:hover{
  background: rgba(0,0,0,0.6) !important;
}

/* ============================================ */
/* 4. 首页关于我们 */
/* ============================================ */
/* 关于我们模块 */
.intro-section {
  margin: 70px auto;
}
.about-section {
  padding: 70px 0;
  background-color: #fafafa;
}
.about-section .title-wrap {
  text-align: center;
  margin-bottom: 50px;
}
.about-section .title-wrap h2 {
  font-size: 36px;
  color: var(--brand-deep-blue);
  font-weight: 600;
  margin: 0;
}
/* 内容左右布局 */
.about-section .content-wrap {
  display: flex;
  gap: 50px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 60px;
}
.about-section .slider-wrap {
  flex: 1;
  min-width: 300px;
  aspect-ratio: 16 / 9;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}
.about-slider {
  width: 100%;
  height: 100%;
}

.about-slider .slide {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity 1s;
}
/* Mission & Vision 单图：16:9 铺满裁剪 */
.about-section .slider-wrap > img.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-section .text-wrap {
  flex: 1;
  min-width: 300px;
}
.about-section .text-wrap h3 {
  font-size: 24px;
  color: var(--brand-deep-blue);
  margin-bottom: 20px;
}
.about-section .text-wrap p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-gray);
  margin-bottom: 15px;
}
/* 数据展示 */
.about-section .stats-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
  margin-bottom: 60px;
}
.about-section .stats-wrap .stat-item {
  text-align: center;
}
.about-section .stats-wrap .stat-icon {
  font-size: 50px;
  color: var(--brand-deep-blue);
  margin-bottom:10px;
}
.about-section .stats-wrap h4 {
  font-size:18px;
  color:var(--brand-deep-blue);
  margin:0 0 5px 0;
}
.about-section .stats-wrap p {
  font-size:14px;
  color:#666;
  margin:0;
}
.about-section .btn-wrap {
  text-align:center;
}
.about-section .btn-wrap a {
  background-color:var(--brand-deep-blue);
  color:var(--text-light);
  border-radius:4px;
  text-decoration:none;
}

@media (max-width: 768px) {
  /* 正常上下排列，不用反转 */
  .about-section .content-wrap {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px;
  }

  /* 手机轮播：统一 16:9 比例自适应宽度 */
  .about-section .slider-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-width: unset;
    overflow: hidden;
  }

  .about-section .text-wrap {
    min-width: unset;
    padding: 0 8px;
  }
  .about-section .title-wrap h2 {
    font-size: 28px;
  }

  /* 下方三栏模块竖排 */
  .about-section > .container > div:last-child {
    flex-direction: column;
    transform: translateY(0);
    gap: 30px;
  }
  .about-section > .container > div:last-child > div {
    width: 94%;
    max-width: 480px;
    margin: 0 auto;
  }
}

/* 首页 About Us 手机端：图片与下方文字保持合适间距（文字不再贴图） */
@media (max-width: 768px) {
  .about-home-row {
    gap: 30px !important;
  }
}
  /* ABOUT US页面，3个数据手机端适配 */
@media (max-width:768px) {
  /* 外层纵向堆叠，一行1个 */
  .three-icon-wrap {
    flex-direction: column !important;
    gap: 24px !important;
    transform: translateY(0) !important;
  }
  /* 单个条目横向布局：左图标 + 右文字盒子 */
  .icon-item {
    display: flex !important;
    gap: 18px !important;
    flex: unset !important;
    width: 100% !important;
    align-items: flex-start !important;
  }
  /* 图标固定宽度，靠左，取消底部间距 */
  .icon-item > div:first-child {
    text-align: left !important;
    margin-bottom: 0 !important;
    flex-shrink: 0;
    width: 42px;
  }
  /* 文字盒子自动占剩余宽度，内部标题、文字上下排列 */
  .text-box {
    flex: 1;
  }
  /* 文字全部左对齐 */
  .text-box h4,
  .text-box p {
    text-align: left !important;
  }
}
@media (max-width:768px) {
  /* 外层容器加宽卡片，左右仅4px留白 */
  .container {
    padding: 0 4px !important;
  }
  /* 卡片上下内边距加大，底部预留充足空间 */
  .factory-card {
    padding: 24px 16px 40px !important;
    margin-bottom: 30px !important;
  }
  /* 纵向正常排列，不使用reverse，容器高度自动跟随内容撑开 */
  .factory-row {
    flex-direction: column !important;
    gap: 28px !important;
    align-items: stretch !important;
  }
  /* 子元素100%宽度，无左右挤压 */
  .factory-row > div {
    width: 100% !important;
    min-width: unset !important;
  }
  /* 轮播图限制高度，不挤占文字区域 */
  .factory-row > div:first-child {
    max-height: 240px;
    overflow: hidden;
  }

}
@media (min-width:769px) {
  /* 大屏PC端，基地2手动调换左右顺序，实现左文字右图 */
  .base-two .factory-row {
    flex-direction: row-reverse !important;
  }
}
/* 仅大屏PC生效 */
@media (min-width:769px) {
  .factory-row {
    align-items: center !important;
  }
}
/* 手机端恢复顶部对齐，避免图文拥挤 */
@media (max-width:768px) {
  .factory-row {
    align-items: flex-start !important;
  }
}

/* 手机端：资质认证一行1个 */
@media screen and (max-width: 768px) {
  .grid-four-card {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}
/* ============================================ */
/* 5. 产品页 */
/* ============================================ */
.product-card {
  background: var(--text-light);
  border-radius: 8px;
  box-shadow: 0 3px 15px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: var(--transition-base);
  border: 2px solid transparent;
}
.product-card:hover {
  border-color: var(--brand-deep-blue);
}
.product-card:hover .card-text {
  background: var(--brand-deep-blue);
}
.product-card:hover .card-text h4 {
  color: var(--text-light);
}

/* ===== 首页产品区域类目卡片（悬停上浮 + 阴影加深） ===== */
.home-product-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border: 2px solid transparent;
  position: relative;
  cursor: pointer;
}
.home-product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 35, 102, 0.16);
  border-color: var(--brand-deep-blue);
}
.home-product-card:hover .card-text {
  background: var(--brand-deep-blue);
}
.home-product-card:hover .card-text h4 {
  color: #fff !important;
}
.home-product-card:hover .overlay {
  opacity: 1 !important;
}

/* ===== 首页团队板块卡片（垂直居中对齐 + 悬停微效） ===== */
/* 团队卡片网格：卡片固定高度，三卡等高对齐 */
.team-grid {
  align-items: start;
}
.team-card {
  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: 12px;
  padding: 30px 26px;
  height: 360px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0, 35, 102, 0.14);
}
.team-avatar {
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #f0f0f0;
  transition: transform 0.3s ease;
}
.team-card:hover .team-avatar {
  transform: scale(1.05);
}
.team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-name {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin: 0 0 4px;
}
.team-role {
  font-size: 14px;
  font-weight: 400;
  color: var(--brand-deep-blue);
  margin: 0 0 10px;
}
.team-bio {
  font-size: 14px;
  line-height: 1.6;
  color: #777;
  margin: 0;
  text-align: left;
  /* 固定 4 行高度（14px × 1.6 × 4 ≈ 90px），超出显示省略号 */
  height: 90px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-text {
  padding: 24px;
  text-align: center;
  transition: var(--transition-base);
}
.card-text h4 {
  font-size: 18px;
  color: var(--brand-deep-blue);
  margin: 0;
}
.cate-link {
  display:block;
  padding:10px 15px;
  color:#333;
  text-decoration:none;
  border-radius:4px;
  transition:var(--transition-base);
}
.cate-link:hover,
.main-cate li a.active {
  background:var(--brand-deep-blue) !important;
  color:var(--text-light) !important;
}
/* ============================================ */
/* 5. products页面 */
/* ============================================ */
/* products页面单个产品卡片通用样式 */
/* 产品卡片 - 上下两区结构 + 完美圆角 */
.product-card-item {
  width: 100%;           /* 充满网格列，保证桌面端一行稳定 4 个 */
  background: var(--text-light);
  border-radius: 16px;   /* 圆角适当加大，更柔和 */
  /* 柔和弥散阴影，营造轻微悬浮感 */
  box-shadow: 0 6px 24px rgba(0, 35, 102, 0.07);
  overflow: hidden;      /* 保证图片圆角不溢出 */
  border: 1px solid #eef1f6;  /* 极淡描边，强化卡片边界而不显厚重 */
  cursor: pointer;       /* 桌面端整卡可点 */
  display: flex;         /* 纵向布局，支撑底部交易信息对齐 */
  flex-direction: column;
  height: 100%;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
/* 悬停：轻微上浮 + 阴影加深，提升交互精致感 */
.product-card-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 35, 102, 0.14);
}
/* 卡片文字区：纵向弹性布局，撑满高度以支撑交易信息置底 */
.product-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 20px;  /* 充足内边距，文字不紧贴卡片边缘 */
}

/* 产品列表网格：桌面端固定 4 列（显示器 100% 比例下一行 4 个） */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}
@media (max-width: 1024px) and (min-width: 769px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 顶部产品分类 Tab 导航（4 大类横向、全部可见、点击切换分类） */
/* 顶部产品分类 Tab 导航：Apple/Anker 式极简——居中、大间距、无厚重色块 */
.product-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;        /* 横向居中 */
  gap: 14px 52px;                 /* 列间"奢侈"间距，产生大气感 */
  margin: 0 0 44px;               /* 与产品列表的充分留白 */
}
.product-tabs .cate-link {
  position: relative;             /* 承载绝对定位文字层与下划线 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 26px;             /* ample padding */
  font-size: 17px;
  font-weight: 400;               /* 未选中：常规字重，更轻 */
  color: #4a4f57;                 /* 中性深灰，非死黑 */
  text-decoration: none;
  background: transparent;        /* 去掉色块感，扁平化 */
  border: 1px solid transparent;
  border-radius: 14px;            /* 圆角 */
  transition: all 0.25s ease;
  white-space: nowrap;
}
/* 不可见加粗副本：预占"加粗宽度"，使切换时盒子宽度恒定、零跳动 */
.product-tabs .cate-link::before {
  content: attr(data-cate);
  font-weight: 700;
  visibility: hidden;
  white-space: nowrap;
}
/* 可见文字层：绝对填充、叠加在加粗副本之上；未选中常规字重 */
.product-tabs .cate-link > span {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  color: #4a4f57;
}
/* 悬停：极淡底色 + 柔和阴影 + 圆角，文字转深蓝 */
.product-tabs .cate-link:hover {
  background: #f3f7fd !important;
  border-color: #e3e9f2 !important;
  box-shadow: 0 4px 14px rgba(0, 35, 102, 0.08) !important;
}
.product-tabs .cate-link:hover > span {
  color: var(--brand-deep-blue) !important;
}
/* 激活态：仅选中加粗 + 深蓝字 + 细下划线（替代实心色块，视觉更通透） */
.product-tabs .cate-link.active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.product-tabs .cate-link.active > span {
  font-weight: 700;
  color: var(--brand-deep-blue) !important;
}
.product-tabs .cate-link.active::after {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-deep-blue);
}
/* 顶部四格缩略图分类导航（原版本 ul.main-cate）：默认隐藏，仅手机端显示 */
ul.main-cate {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 手机端：隐藏桌面文字 Tab，改用四格缩略图分类导航（恢复 Website8.1 原版样式） */
@media (max-width: 768px) {
  .product-tabs {
    display: none;
  }
  /* 顶部四格缩略图分类导航：横向均分铺满整行（4 个窗格等宽）+ 方形缩略图（与原版一致） */
  ul.main-cate {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    padding: 6px 0 !important;
    margin: 0 20px !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    background: #f5f7fa !important;
    list-style: none;
  }
  ul.main-cate::-webkit-scrollbar { display: none !important; }

  ul.main-cate li {
    flex: 1 1 0 !important;   /* 每个窗格等宽，横向均分铺满整行 */
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: none !important;
  }
  ul.main-cate li a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 6px 0 !important;
    font-size: 12px !important;
    color: #333 !important;
    background: transparent !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    text-align: center !important;
    line-height: 1.05 !important;
    text-decoration: none;
  }
  /* 分类缩略图：4:3 比例（61.33px 宽 × 46px 高）圆角 */
  ul.main-cate li a::before {
    content: '';
    display: block;
    width: 61.33px !important;
    height: 46px !important;
    border-radius: 8px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: 1px solid #eee !important;
    background-color: #f5f7fa;
  }
  ul.main-cate li:nth-child(1) a::before { background-image: url('../images/category/Beach Towels-category.webp'); }
  ul.main-cate li:nth-child(2) a::before { background-image: url('../images/category/Sports Towels-category.webp'); }
  ul.main-cate li:nth-child(3) a::before { background-image: url('../images/category/Household Towels-category.webp'); }
  ul.main-cate li:nth-child(4) a::before { background-image: url('../images/category/Accessories-category.webp'); }

  /* 去掉悬浮高亮效果：手机端直接点击即可，无需悬浮变色 */
  ul.main-cate li a:hover {
    background: transparent !important;
    color: #333 !important;
  }
  ul.main-cate li a:hover::before {
    border: 1px solid #eee !important;
    box-shadow: none !important;
  }
  /* 选中态：文字高亮 + 缩略图蓝色外框（与原版一致）。
     提高特异性（加 .cate-link），确保触屏设备 hover 残留不会覆盖激活态的蓝框/蓝字 */
  ul.main-cate li a.cate-link.active {
    background: transparent !important;
    color: var(--brand-deep-blue) !important;
    font-weight: 700 !important;
  }
  ul.main-cate li a.cate-link.active::before {
    border: 2px solid #0056b3 !important;
    box-shadow: 0 0 0 2px #fff inset !important;
  }
  ul.main-cate li a::after,
  ul.main-cate li a.cate-link.active::after {
    display: none !important;
  }
}

/* 上区块：图片填满，4:3 比例（保持宽度、按高度比例调整） */
.product-img-box {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  overflow: hidden;
}

.product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  will-change: transform; /* 提前提升为合成层，hover 缩放走 GPU，避免重绘抖动 */
}

/* 只有图片 hover 放大 */
.product-img:hover {
  transform: scale(1.05);
}

/* 下区块：文字区域 */
.product-info {
  padding: 14px 12px;
}

/* 产品卡片标题（需求#7：每个产品显示名称） */
.product-name {
  font-size: 17px;       /* 适中字号 */
  font-weight: 600;      /* 半粗 */
  color: #002D62;
  margin: 0 0 10px 0;
  line-height: 1.4;      /* 标题行高约 1.4 */
  /* 固定两行高度，保证卡片对齐；超出第 2 行省略 */
  min-height: calc(1.4em * 2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* 产品简介：深灰、行高 1.6、3 行省略，提升长文本可读性 */
.product-desc {
  font-size: 14px;       /* 略小于标题 */
  color: #555;           /* 深灰，非纯黑 */
  line-height: 1.6;      /* 长文本舒适行高 */
  text-align: left;
  font-weight: 400;      /* 常规字重，清晰易读 */
  margin: 0 0 4px 0;
  /* 固定 3 行高度，避免内容撑开布局、保证卡片等高 */
  max-height: calc(14px * 1.6 * 3);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* 悬浮提示：柔和底色 */
.product-tooltip {
  display: none;
  position: fixed; /* fixed 相对视口，clientX/clientY 直接对应；且不计入文档溢出，杜绝 hover 时横向滚动条/整页位移 */
  background: #f8f9fa;
  color: #2d3748;
  border: 1px solid #dbeafe;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  z-index: 9999;
  max-width: 280px;
  pointer-events: none;
  white-space: pre-line;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

/* 交易信息（起订量 / 交期）：数值加粗 + 品牌色高亮，一眼可捕获采购条件 */
.product-moq,
.product-lead {
  font-size: 13px;
  line-height: 1.6;
  font-weight: 600;                 /* 数值默认加粗 */
  color: var(--brand-deep-blue);   /* 数值品牌主色高亮 */
}
/* 独立交易信息模块：与上方描述用极淡分割线 + 间距区隔，并置底对齐 */
.product-moq {
  margin-top: auto;                /* 推至卡片底部，跨卡片水平线对齐 */
  padding-top: 16px;
  border-top: 1px solid #eef1f6;   /* 极淡分割线，区隔为独立模块 */
}
.product-lead {
  margin-top: 6px;
}
/* 标签（Min. order: / Lead Time:）：小号浅灰，弱化存在感 */
.product-moq strong,
.product-lead strong {
  font-weight: 400;
  font-size: 12px;
  color: #9aa1ab;
  margin-right: 4px;
}
/* ============================================ */
/* 5. 联系我们页面 */
/* ============================================ */
.contact-section {
  padding: 40px 0;
  background: var(--text-light);
}
.contact-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  width: 100%;
  /* 限制整体宽度并居中：避免两栏撑满全屏显得过宽；
     同时左右留白，让右下角悬浮联系图标不压住表单输入框 */
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
.contact-info,
.contact-form {
  width: 100%;
}
/* contact.html 两栏：保持无背景，高度随表单区域；加大 Contact Information 行间距使两栏视觉高度一致（仅作用于 contact 页） */
.contact-container { align-items: stretch; }
.contact-container > .contact-info,
.contact-container > .contact-form {
  padding: 0;
  height: 100%;
  box-sizing: border-box;
}
.contact-info { line-height: 1.9; }
.contact-info .contact-group { margin-bottom: 26px; }
.contact-info .contact-title { margin: 0 0 14px; font-size: 18px; color: var(--brand-deep-blue); }
.contact-info .contact-title-subtitle { margin: 0 0 8px; font-size: 15px; color: var(--brand-deep-blue); }
.contact-info .contact-row { margin-bottom: 12px; display: flex; align-items: center; }
.contact-info .contact-row svg { flex-shrink: 0; margin-top: 0; }

/* 中宽屏（小笔记本/平板横屏 769–1500px）：加大左右留白，为右下角悬浮图标让位，
   避免图标压住右侧表单输入框（≤768px 时悬浮图标已隐藏，无需处理） */
@media (min-width: 769px) and (max-width: 1500px) {
  .contact-container {
    padding: 0 48px;
  }
}
.contact-info h3,
.contact-form h3 {
  font-size: 26px;
  color: var(--brand-deep-blue);
  margin-bottom: 30px;
}
.form-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-bottom: 16px; /* 字段组之间的段前间距（2026-08-30 加大，避免过于拥挤） */
}
.form-group label {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 5px;
}
.form-group label span {
  color: #e74c3c;
}
/* 错误提示紧跟标题右侧、与标题同行显示，节省纵向空间（flex 顺序：标题 → 错误 → 输入框） */
.form-group .error-tip {
  order: 2;
  margin: 0 0 5px 10px;
}
.form-group input,
.form-group textarea {
  order: 3;
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 15px;
}
.form-note {
  font-size: 12px;
  color: #666;
}
/* 隐私提示语：锁形图标 + 整句超链接到隐私政策 */
.form-note .note-star {
  margin-right: 2px;
}
.privacy-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--brand-deep-blue);
  text-decoration: none;
  transition: var(--transition-base);
}
.privacy-link:hover {
  text-decoration: underline;
}
.privacy-lock {
  flex-shrink: 0;
  display: block;
  align-self: center;
}
.submit-btn {
  padding: 15px 36px;
  background: var(--brand-deep-blue);
  color: var(--text-light);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  float: right;
  font-size: 18px;
  margin-top: 10px;
  transition: var(--transition-base);
}
/* 与首页按钮一致的微交互：悬停上浮 + 加深阴影 + 背景微暗 */
.submit-btn:hover {
  background: #001a4d;
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.submit-btn:active {
  transform: translateY(0);
}
.contact-group {
  margin-bottom: 20px;
}
.contact-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 14px 0;
  padding-bottom: 6px;
  border-bottom: none;
  position: relative;
}
.contact-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 93%;
  height: 1px;
  border-bottom: 2px solid #333;
}
.contact-title-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0px 0 14px 0;
  padding-bottom: 6px;
  border-bottom: none;
  position: relative;
}
.contact-title-subtitle::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 85%;
  height: 1px;
  border-bottom: 1px dashed #ccc;
}
.contact-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 15px;
  color: #333;
  line-height: 1.3;
}
.contact-row svg {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  margin-top: 2px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 内部use统一缩放，强制所有图标图形按比例缩小留白 */
.contact-row svg use {
  transform: scale(0.92);
  transform-origin: center;
}
.contact-item svg {
  padding: 1px; /* 上下左右留白，防止缩放裁切 */
  box-sizing: border-box;
}
/* 全局统一缩放，所有图标基础大小一致 */
.icon-shrink use {
  transform: scale(0.88);
  transform-origin: center;
}
/* 手机端 WhatsApp、WeChat 自动换行，电脑端同行 */
@media (max-width: 768px) {
  .contact-row {
    row-gap: 10px;
  }
  /* 标题文字块独占一整行，强制换行 */
  .contact-row > div:first-child {
    flex-basis: 100%;
  }
  /* WhatsApp、WeChat 不占满整行，自动并排一行 */
  .contact-row > a.tooltip-follow,
  .contact-row > .wechat-icon-wrap {
    flex-basis: auto;
    margin-left: 36px; /* 数值越大，整体越靠右，按需调整 8px~16px */
  }
}
.error-tip {
  font-size: 13px;
  color: #e53935;
  line-height: 1.4;
}
/* contact us页面的邮箱样式 */
.contact-row a {
  color: inherit;
  text-decoration: none;
  margin-left: 5px; /* 文字和邮箱之间留一点空隙 */
  width: fit-content;
}
/* hover直接邮箱：红字+下划线 */
.contact-row a:hover {
  color: var(--brand-red);
  text-decoration: underline;
}
/* 让两个 sales-col 左右并排（Europe / US Hub 同行显示） */
.sales-row-wrap {
  display: flex;
  gap: 40px;    /* 两个栏目之间的距离，可改 */
  flex-wrap: nowrap;  /* 强制同行，不因空间不足换行 */
  margin-top: 20px;
}

/* Regional Hubs每个栏目宽度自适应 */
.sales-col {
  flex: 1 1 0;  /* 等分可用宽度 */
  min-width: 0; /* 允许收缩，避免触发换行导致两 Hub 上下堆叠 */
}

/* 手机端：仅调整顺序 —— 表单在上，联系信息在下 */
@media (max-width: 768px) {
  .contact-container {
    display: flex;
    flex-direction: column;
  }
  /* 表单放第一 */
  .contact-form {
    order: 1;
  }
  /* 联系信息放第二 */
  .contact-info {
    order: 2;
  }
  .sales-row-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px; /* 上下正常间距，你可以改小/改大 */
    justify-content: flex-start; /* 关键：取消分散对齐 */
  }
  .sales-col {
    width: 100%; /* 占满一行 */
  }
}

/* Custom Services页面全局样式 */
.process-page {
  width: 100%;
  max-width: 850px;
  margin: 30px auto;
  padding: 0 20px;
  box-sizing: border-box;
  overflow: visible;
}
.process-header {
  text-align: center;
  margin-bottom: 30px;
}
.process-header h2 {
  font-size: 26px;
  margin: 0 0 10px;
  color: #222;
}
.process-header p {
  font-size: 16px;
  color: #666;
}
.process-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  --node-half: 28px;
  --gap: 45px;
}
.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  z-index: 2;
  margin-bottom: 45px;
}
.timeline-node {
  position: relative;
  z-index: 3;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d4dae3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: transform 0.4s ease, background 0.4s ease, border-color 0.4s ease;
}
.timeline-node svg {
  width: 26px;
  height: 26px;
  fill: #9aa1ab;
  transition: fill 0.4s ease;
}
/* 图标路径继承 svg 的 fill，使未激活灰、激活白可被 CSS 控制 */
.timeline-node svg path { fill: inherit; }
/* 连接线：默认浅灰，激活变品牌色 */
.timeline-line {
  position: absolute;
  left: var(--node-half);
  top: 0;
  bottom: calc(-1 * var(--gap));
  width: 3px;
  background: #E0E0E0;
  z-index: 1;
  transition: background 0.4s ease;
}
.timeline-item:first-child .timeline-line { top: var(--node-half); }
.timeline-item:last-child .timeline-line { bottom: var(--node-half); }
/* 激活态：节点变色 + 放大，连接线变蓝 */
.timeline-node.active {
  background: var(--brand-bright-blue);
  border-color: var(--brand-bright-blue);
  transform: scale(1.1);
}
.timeline-node.active svg { fill: #fff; }
.timeline-line.active { background: var(--brand-bright-blue); }
/* 当前进行步骤的脉冲光晕 */
.timeline-node.active::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--brand-bright-blue);
  animation: timelinePulse 2s ease-out infinite;
}
@keyframes timelinePulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(1.8); opacity: 0; }
}
.timeline-content {
  flex: 1;
  background: #fff;
  padding: 24px 26px;
  border-radius: 12px;
  box-shadow: 0 3px 15px rgba(0,0,0,0.05);
  border: 1px solid #f1f1f1;
}
.timeline-content h3 {
  font-size: 17px;
  color: var(--brand-deep-blue);
  margin: 0 0 8px;
}
.en-desc {
  font-size: 14px;
  color: #64748b;
  font-style: italic;
  margin-bottom:14px;
}
.flow-ul{
  list-style: none;
  padding:0;
  margin:0;
}
.flow-li{
  padding:7px 0;
  border-bottom:1px solid #f5f5f5;
}
.flow-li:last-child{
  border:none;
}
/* 作用域限定到 custom.html 的流程列表，避免与 faq 的 .li-title 定义相互覆盖 */
.flow-ul .li-title {
  position: relative; /* 供 ::before 竖线绝对定位 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14.5px;
  font-weight: 600;
  color: #2a2f3a;
  line-height: 1.5;
  width: 100%;
  padding: 6px 0 6px 13px; /* 左侧留出竖线装饰空间 */
  margin: 16px 0 8px; /* 与正文拉开间距，增强层级 */
}
/* 左侧竖线：高度严格等于文字高度（约 120%），垂直居中于文字 */
.flow-ul .li-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.2em; /* 文字高度的 120% */
  background: var(--brand-bright-blue);
  border-radius: 2px;
}
.flow-ul .arrow {
  display: none;
}
.flow-ul .li-detail{
  max-height:none;
  overflow:visible;
  font-size:14px;
  color:#444;
  line-height:1.6;
  padding:8px 10px 0;
  background:#f4f7fb;
  border-radius:8px;
}

.faq-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ============================================ */
/* 4. 响应式配置（统一放在最后，按屏幕尺寸从小到大） */
/* ============================================ */
/* 通用响应式：768px以下（手机） */
@media (max-width: 768px) {
  /* 导航响应式 */
  .desktop-nav { display: none; }
  .mobile-header-right { display: flex; }
  body { padding-top: 72px; }

  /* 首页Banner响应式 */
  .hero-banner {
 /*    background-image: url('../images/index/hero-mobile.webp');
    background-position: center top;
    background-size: cover;*/
    height: calc(100vh - 72px - 55px); /* 视口高度 - 导航高度 - 按钮高度 */
    min-height: calc(100vh - 72px - 55px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
  }

/* 手机端首屏布局修正 */
.banner-content {
  margin-top: 0;
  padding-top: 0;
  width: 90%;
  max-width: 100%; /* 限制最大宽度，防止内容超出屏幕 */
}
.hero-banner h1 {
  font-size: 28px;
  margin-top: 9vh;
  margin-bottom: 2px;

  /* 允许自动换行，避免文字溢出屏幕 */
  white-space: normal !important;   /* 允许自动换行 */
  word-wrap: break-word !important;  /* 长单词自动换行 */
  width: 100%;                       /* 占满宽度 */
  text-align: center;                /* 居中 */
  padding: 0 15px;                   /* 左右留安全距离，永不被吃掉 */
}
  .hero-banner p {
    font-size: 16px;
    margin: 0;
  }

  /* 按钮固定在底部导航栏上方 */
  .banner-buttons {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 55px; /* 底部导航高度 */
    z-index: 999;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    padding: 0 20px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }
  .btn-base {
    width: 100%;
    max-width: 200px;
  }
  /* 手机端：向下跳动箭头固定在右下角、常驻底部导航之上，避免压住按钮 */
  .scroll-down {
    position: fixed !important;
    display: flex !important;
    right: 16px !important;
    left: auto !important;
    bottom: 64px !important;
    background: rgba(255, 255, 255, 0.2); /* 与电脑端一致：半透明白色底 */
    border-color: rgba(255, 255, 255, 0.9);
    color: #fff;
  }

  /* 子页面Banner响应式 */
  .page-banner { height: 80px !important; }
  .banner-title { font-size: 32px !important; }
  .banner-subtitle { font-size: 16px !important; }

  /* 关于我们响应式 */
  .about-section > .container > div:nth-child(2) > div:first-child {
    height: 240px !important;
  }

/* 首页产品中心-2列网格 */
  /* 产品 2列 */
  .products-section > .container > div[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
    align-items: start !important;
  }

  /* 🔥 强制覆盖电脑端固定高度（历史 300px / 现为 400px）→ 高度由图片按比例撑开
     注意：内联样式里写的是 height:400px，之前只匹配 300px 导致该规则从未生效，
     手机端图片容器仍被撑到 400px，故补齐 400px 与带空格的写法。 */
  .products-section .container > div > div > div[style*="height:300px"],
  .products-section .container > div > div > div[style*="height: 300px"],
  .products-section .container > div > div > div[style*="height:400px"],
  .products-section .container > div > div > div[style*="height: 400px"] {
    height: auto !important;
  }

  /* 🔥 图片自适应：宽度100%，高度自动等比缩小 */
  .products-section .container img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
  }

  /* 🔥 遮罩层同步自适应 */
  .products-section .overlay {
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }

  /* 🔥 卡片高度由内容撑开，不拉伸 */
  .products-section .container > div > div {
    height: auto !important;
  }
 /* ========== 文字：强制不换行，统一高度 ========== */
  .products-section .card-text {
    padding: 12px 10px !important;
    /* 文字不换行核心代码 */
    white-space: nowrap !important;
    overflow: hidden !important;
  }
  .products-section .card-text h4 {
    font-size: 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
    /* 我们的团队保持单列 */
  .team-section > .container > div:nth-child(2) {
    grid-template-columns: 1fr !important;
  }
  /* 联系我们页响应式 */
  .contact-container {
    grid-template-columns:1fr;
    gap: 40px;
  }
  .submit-btn {
    width:100%;
    float:none;
  }
  .contact-info {
    border-right: none;
    padding-right: 0;
  }
  .footer-links {margin-left: 0px; }

  /* 页脚响应式 */
  .arrow-icon { display: inline-block; }
  .footer-row {
    flex-direction: column;
    gap: 8px;
  }
  .collapse-list { display: none; }
  .collapse-list.show { display: block; }
  .footer-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 8px;
    margin-top: 10px !important;
  }
  /* 手机端：底部 4 个法律链接（隐私/条款/FAQ/站点地图）强制同行、收紧间距 */
  .footer-legal {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }
  .footer-legal a {
    margin: 0 6px;
    white-space: nowrap;
  }
  /* 极小屏（≤359px，如老款小屏手机）：进一步缩小字号与间距，保证一行放下 */
  @media (max-width: 359px) {
    .footer-legal a {
      margin: 0 4px;
      font-size: 12px;
    }
  }
  .footer-divider.hide-mobile {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }

  /* 在线咨询响应式 */
  .chat-redbox-container {
    flex-direction: column;
    padding: 0 15px;
  }
  .chat-redbox {
    min-width: auto;
    max-width: none;
    width: 100%;
  }
}

/* 产品页面专属响应式：768px以下 */
@media (max-width: 768px) {
  /* 产品菜单横向滑动 */
  .product-wrap {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

.cate-link {
  padding: 0 !important; /* 交给 a 控制，这里清空 */
}

  /* 产品页面顶部间距 */
  section[style*="padding:40px 0"] {
    padding-top: 10px !important;
  }
  /* 手机端产品列表：一行2个 + 左右边距很小 + 产品更大 */
.product-main > div {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 15px !important;           /* 产品之间的间距 */
  padding: 0 2px !important;      /* 屏幕左右小间距 */
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* 产品卡片：100% 充满网格，不留白 */
.product-card-item {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  height: auto !important;
  border-width: 1px !important;
  cursor: default !important;   /* 移动端仅图片可点，整卡不显示为可点 */
}
/* 移动端：仅图片区域显示可点手势 */
.product-img,
.product-img-box {
  cursor: pointer !important;
}

/* 图片保持 4:3（宽度不变，高度按比例 = 宽度的 3/4） */
.product-img-box {
  height: 0 !important;
  padding-bottom: 75% !important;
  position: relative !important;
}
.product-img {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 产品文字内边距适配手机 */
.product-info {
  padding: 10px !important;
}

/* 手机端产品描述：默认4行省略 + 超行显示双三角展开收起 */
.product-desc {
  height: auto !important;
  font-size: 13px !important; /* 与下方 4 行高度计算一致 */
  max-height: calc(13px * 1.3 * 4) !important; /* 默认显示4行 */
  line-height: 1.3 !important;
  -webkit-line-clamp: 4 !important; /* 核心：4行省略 */
  line-clamp: 4 !important;
  overflow: hidden !important;
  cursor: pointer !important;
  position: relative !important;
}
/* 超行时（JS 检测后加 .has-more）：右下角双下三角 */
.product-desc.has-more {
  padding-right: 20px !important; /* 给三角留位 */
}
.product-desc.has-more::after {
  content: "▾▾" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  font-size: 10px !important;
  color: #999 !important;
  letter-spacing: -2px !important; /* 两小三角贴紧 */
}
/* 展开后 双三角变向上 */
.product-desc.has-more.open::after {
  content: "▴▴" !important;
}
/* 展开后不限制行数 */
.product-desc.open {
  max-height: 999px !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}
/* MOQ + 交期（移动端：仅收窄字号，保留数值品牌色高亮） */
.product-moq,
.product-lead {
  font-size: 12px;
  line-height: 1.5;
}
}
/* ==============================================
   仅在产品页固定：Banner 与产品分类菜单始终置顶，不随内容滚动；不影响其他页面
============================================== */
@media (max-width: 768px) {
  /* 只在产品页生效 */
  body.product-page {
    /* 给内容留出固定区的高度：导航72px + Banner80px + 四格菜单高度（约30px，html 已自带72px偏移） */
    padding-top: calc(72px + 80px + 30px) !important;
  }
  /* 1. 导航：默认已经固定，这里只做层级保证 */
  header {
    z-index: 101 !important;
  }
  /* 2. 固定 Our Products Banner */
  body.product-page .page-banner {
    position: fixed !important;
    top: 72px !important; /* 导航下面 */
    left: 0 !important;
    right: 0 !important;
    height: 80px !important;
    z-index: 100 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }
  /* 3. 固定四格缩略图导航（紧贴 Banner 下方，横向可滚动，始终置顶） */
  body.product-page ul.main-cate {
    position: fixed !important;
    top: calc(72px + 80px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 6px 20px !important;
    background: #f5f7fa !important;
  }
  /* 收起产品区顶部 40px 大留白，让产品紧贴固定菜单下方 */
  body.product-page section[style*="padding:40px 0"] {
    padding-top: 10px !important;
  }
  /* 清除父容器对 fixed 的干扰 */
  body.product-page .main,
  body.product-page .container,
  body.product-page .product-wrap {
    transform: none !important;
    overflow: visible !important;
    position: static !important;
  }
}
/* Custom Services页面手机适配 */
@media (max-width:768px){
  .process-timeline{
    --node-half:18px;
    --gap:32px;
  }
  .timeline-node{
    width:36px;height:36px;
  }
  .timeline-node svg{
    width:18px;height:18px;
  }
  .timeline-line{
    width:2px;
  }
  .timeline-item{
    gap:16px;
    margin-bottom:32px;
  }
  .timeline-content{
    padding:18px;
  }
  .process-header h2{
    font-size:22px;
  }
}
/* 手机端固定底部美观按钮 */
/* ==============================================
 手机精致底部固定栏（全面屏适配）
============================================== */
/* ==============================================
 手机底部固定导航栏 - 清爽等分款（参考样式）
============================================== */
@media (max-width: 768px) {
  /* 给页面底部留出空间，防止被导航栏遮挡 */
  body {
    padding-bottom: 65px !important;
    box-sizing: border-box !important;
  }

  /* 底部导航容器 */
  .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 55px;
    background: #ffffff;
    border-top: 1px solid #eee;
    padding-bottom: env(safe-area-inset-bottom); /* 适配全面屏底部安全区 */
  }

  /* 按钮通用样式：图标+文字上下分布 */
  .nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    gap: 2px;
    font-size: 12px;
    font-weight: 500;
    color: #666 !important;
    transition: all 0.2s ease;
  }

  /* 图标大小 */
  .nav-btn i {
    font-size: 20px;
  }

  /* -------- 左侧：WhatsApp 主题色（绿色） -------- */
  .nav-btn.whatsapp i,
  .nav-btn.whatsapp span {
    color: #25D366 !important;
  }

  /* -------- 中间：Home 中性色（深灰） -------- */
  .nav-btn.home i,
  .nav-btn.home span {
    color: #333 !important;
  }

  /* -------- 右侧：Inquiry 品牌主题色 -------- */
  .nav-btn.inquiry i,
  .nav-btn.inquiry span {
    color: #002D62 !important; /* 你的品牌色 */
  }

  /* 点击反馈 */
  .nav-btn:active {
    transform: scale(0.95);
    opacity: 0.8;
  }
}

/* 半屏弹窗 */
/* 半屏弹窗 */
.modal-overlay {
  display: block;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  transition: opacity 0.3s ease;
}
.modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* 底部滑出 */
.modal-bottom-popup {
  position: absolute;
  bottom: -100%;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
  max-height: 85vh;
  overflow-y: auto;
  transition: bottom 0.4s ease;
}
.modal-overlay.show .modal-bottom-popup {
  bottom: 0;
}

/* 弹窗头部 */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}
.modal-header h4 {
  margin: 0;
  font-size: 16px;
}
.close-btn {
  font-size: 24px;
  cursor: pointer;
  color: #666;
}

/* 弹窗内容 */
.modal-body {
  padding: 20px;
}

/* 桌面端隐藏 */
@media (min-width: 769px) {
  .mobile-bottom-nav {
    display: none !important;
  }
}
/* ============================================ */
/* 5. 动画关键帧（统一放在最后） */
/* ============================================ */
/* 上下弹跳动画 */
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
/* 波浪渐入动画 */
@keyframes waveFadeIn {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 滚动关键动画，全局生效  */

    @keyframes scrollLeft {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

/* =============== Sitemap 页面 =============== */
.banner-sub {
  display: block;
  color: rgba(255,255,255,0.92);
  font-size: 16px;
  margin-top: 6px;
  font-weight: 400;
  letter-spacing: 0.3px;
}
.sitemap-body {
  padding: 60px 0 70px;
  background: #fff;
}
.sitemap-intro {
  max-width: 780px;
  margin: 0 auto 44px;
  text-align: center;
  color: #5b6b7d;
  font-size: 15px;
  line-height: 1.7;
}
.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px 30px;
}
.sitemap-col-title {
  font-size: 18px;
  color: #002D62;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eaf0f7;
}
.sitemap-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sitemap-list li {
  margin-bottom: 11px;
}
.sitemap-list a {
  color: #44525f;
  text-decoration: none;
  font-size: 14px;
  transition: color .2s ease;
}
.sitemap-list a:hover {
  color: #002D62;
}
.sitemap-list .sitemap-sub {
  display: block;
  color: #9aa7b4;
  font-size: 12px;
  margin-top: 2px;
}
@media (max-width: 768px) {
  .sitemap-grid { gap: 28px 20px; }
  .banner-sub { font-size: 14px; }
}

/* ====================== 询盘表单：同意隐私政策勾选框（2026-08-30） ====================== */
.consent-box {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 8px; /* 段前距离原 16px，缩小一半（2026-08-30） */
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  cursor: pointer;
  user-select: none;
}
.consent-box input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: #0d6db8;
  cursor: pointer;
}
.consent-box .consent-text a.consent-privacy-link {
  color: #0d6db8;
  text-decoration: underline;
}
.consent-box .consent-text a.consent-privacy-link:hover {
  color: #062863;
}

/* ====================== 同意隐私政策提示弹窗（2026-08-30） ====================== */
.consent-popup-mask {
  position: fixed;
  inset: 0;
  z-index: 100000; /* 高于半屏表单 modal-overlay(99999) 与 header(99999)，确保置顶 */
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.consent-popup-mask.show {
  opacity: 1;
  visibility: visible;
}
.consent-popup {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: 12px;
  padding: 26px 24px 22px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(6, 40, 99, 0.18);
  transform: translateY(16px);
  transition: transform 0.3s ease;
}
.consent-popup-mask.show .consent-popup {
  transform: translateY(0);
}
.consent-popup-icon {
  margin: 0 auto 10px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fdf0e6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.consent-popup-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: #062863;
}
.consent-popup-msg {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.7;
  color: #555;
}
.consent-popup-btn {
  display: inline-block;
  min-width: 132px;
  padding: 11px 24px;
  border: none;
  border-radius: 6px;
  background: #0d6db8;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.consent-popup-btn:hover {
  background: #062863;
}

/* ====================== 隐私政策正文弹窗（2026-08-30，点击同意勾选框中的 Privacy Policy 链接打开） ====================== */
.privacy-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 100000; /* 与同意提示弹窗同级，确保在最上层 */
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.privacy-modal-mask.show {
  opacity: 1;
  visibility: visible;
}
.privacy-modal {
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  background: #fff;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(6, 40, 99, 0.22);
  transform: translateY(16px);
  transition: transform 0.3s ease;
}
.privacy-modal-mask.show .privacy-modal {
  transform: translateY(0);
}
.privacy-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 22px;
  border-bottom: 1px solid #eef1f6;
  background: #f7f9fc;
  flex-shrink: 0;
}
.privacy-modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: #062863;
}
.privacy-modal-close {
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: #666;
  cursor: pointer;
  padding: 0 4px;
}
.privacy-modal-close:hover {
  color: #062863;
}
.privacy-modal-body {
  flex: 1;
  min-height: 0;
  padding: 18px 22px 26px;
  overflow-y: auto;
  line-height: 1.8;
  color: #555;
  font-size: 14px;
}
.privacy-modal-body .privacy-modal-updated {
  margin: 0 0 10px;
  font-size: 13px;
  color: #888;
}
.privacy-modal-body h3 {
  color: #002366;
  font-size: 16px;
  margin: 20px 0 6px;
}
.privacy-modal-body h3:first-of-type {
  margin-top: 0;
}
.privacy-modal-body ul {
  padding-left: 20px;
  margin: 6px 0;
}
.privacy-modal-body p {
  margin: 6px 0;
}
/* 弹窗底部关闭按钮（手机端尤其需要，不用去右上角叉叉关闭） */
.privacy-modal-footer {
  padding: 12px 22px;
  border-top: 1px solid #eef1f6;
  background: #f7f9fc;
  flex-shrink: 0;
  text-align: center;
}
.privacy-modal-footer .privacy-modal-btn-close {
  width: 100%;
  max-width: 360px;
  padding: 11px 24px;
  border: none;
  border-radius: 30px;
  background: #0d6db8;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.25s ease;
}
.privacy-modal-footer .privacy-modal-btn-close:hover {
  background: #062863;
}
/* 手机端：底部滑出、宽度撑满整个屏幕（与半屏询盘表单一致） */
@media (max-width: 768px) {
  .privacy-modal-mask {
    padding: 0;
    align-items: flex-end;
    max-width: 100vw; /* 兜底：防止异常布局视口导致弹窗溢出屏幕 */
  }
  .privacy-modal {
    width: 100vw; /* 撑满整个屏幕宽度 */
    max-width: 100%;
    max-height: 82vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }
  .privacy-modal-mask.show .privacy-modal {
    transform: translateY(0);
  }
}