/* 原 :root 自定义属性已展开为各处的字面量 */

/* ────────────────────────────────────────────────────────────────
   2. 根字号 — 1rem = 100px @ 1920px 视口
      clamp 防止在极小/极大屏幕上失控
──────────────────────────────────────────────────────────────── */
html {
  font-size: clamp(10px, 5.2083vw, 100px);
}


/* ────────────────────────────────────────────────────────────────
   3. 全局重置 & 基础样式
──────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family:
    'Noto Sans SC',
    'Source Han Sans CN',
    'PingFang SC',
    'Microsoft YaHei',
    'Helvetica Neue',
    Arial,
    sans-serif;
  /* 正文 16px，使用 clamp 保证可读性下限 12px */
  font-size: clamp(12px, 0.16rem, 16px);
  font-weight: 400;
  color: #333333;
  background-color: #f6f6f6;
  line-height: 1.6;
  /* 消除 iOS 字号自动调整，防止 CLS */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 字体抗锯齿 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  /* 防止图片加载时出现布局偏移 */
  vertical-align: middle;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

address {
  font-style: normal;
}


/* ────────────────────────────────────────────────────────────────
   4. 导航栏 (.nav)
      设计稿: 高 124px，白色背景，sticky 吸顶
      结构: Logo | 导航链接 | 联系电话
──────────────────────────────────────────────────────────────── */
.nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  /* 导航高度 124px */
  height: clamp(56px, 1.24rem, 124px);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  /* 防止内容溢出时破坏导航高度 */
  overflow: hidden;
}

/* 导航内容容器：flex 行布局，左中右三段 */
.nav-inner {
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: 0 13.28%;
}

/* ── Logo ── */
.nav-brand {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  line-height: 0; /* 消除 inline 底部间隙 */
}

.nav-logo {
  /* 设计稿: 265.766px × 55.737px */
  width: clamp(140px, 2.658rem, 266px);
  height: auto;
  object-fit: contain;
}

/* ── 主导航菜单 ── */
.nav-menu {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  margin: 0 clamp(0.1rem, 0.32rem, 0.32rem);
}

/* 导航项列表：水平排列 */
.nav-list {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: clamp(0.2rem, 0.4rem, 0.4rem);
  /* 列表项需要占满导航高度以便定位激活指示条 */
  height: clamp(56px, 1.24rem, 124px);
}

/* 每个列表项作为激活指示条的定位父元素 */
.nav-list-item {
  position: relative;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}

/* 导航链接基础样式 */
.nav-link {
  font-size: clamp(12px, 0.16rem, 16px);
  color: #626262; /* #626262 */
  white-space: nowrap;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: #0080ff;
}

/* 弱化颜色（教程） */
.nav-link--muted {
  color: #989898; /* #989898 */
}

/* 激活状态 */
.nav-link--active {
  color: #0080ff;
  font-weight: 500;
}

/* 内页：非当前导航项（与模板 nav-link--gray 对应） */
.nav-link--gray {
  color: #989898;
}

.nav-link--gray:hover {
  color: #0080ff;
}

/* ── 激活指示条 ──
   设计稿: 宽 36px，高 5px，圆角 2.5px
   位置: 距导航底部 20px（在 nav-list-item 的 bottom:0.20rem 处）
*/
.nav-list-item--active::after {
  content: '';
  position: absolute;
  /* 距列表项（= 整个导航栏）底部 20px */
  bottom: clamp(8px, 0.20rem, 20px);
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: clamp(20px, 0.36rem, 36px);
  height: clamp(3px, 0.05rem, 5px);
  background: #0080ff;
  border-radius: 9999px;
  pointer-events: none;
}

/* ── 联系电话 ── */
.nav-phone {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: clamp(6px, 0.10rem, 10px);
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.nav-phone-icon {
  width: clamp(22px, 0.32rem, 35px);
  height: auto;
  object-fit: contain;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.nav-phone-info {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 2px;
}

.nav-phone-label {
  font-size: clamp(10px, 0.14rem, 14px);
  color: #666666;
  line-height: 1;
  white-space: nowrap;
}

.nav-phone-number {
  font-size: clamp(14px, 0.24rem, 24px);
  font-weight: 500;
  color: #333333;
  line-height: 1;
  white-space: nowrap;
}

/* ── 汉堡按钮（桌面隐藏，移动端显示）── */
.nav-hamburger {
  display: none;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.nav-hamburger-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: #333333;
  border-radius: 1px;
  -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease;
}


/* ────────────────────────────────────────────────────────────────
   5. 英雄区 (.hero)
      设计稿: 高 498px，背景 #f6f9ff
      左半: 标题 + 分类标签 + 日期
      右半: 封面图 706×394px
──────────────────────────────────────────────────────────────── */
.hero {
  background: #f6f9ff;
  /* 设计稿高度 498px */
  height: clamp(280px, 4.98rem, 498px);
  overflow: hidden;
}

/* Hero 内容容器：两列 flex */
.hero-inner {
  height: 100%;
  padding: 0 13.28%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

/* ── 左侧文字区 ── */
.hero-content {
  -webkit-flex: 0 0 50%;
  flex: 0 0 50%;
  /* 设计稿: 标题距英雄区顶部 91px (215-124) */
  padding-top: clamp(30px, 0.91rem, 91px);
  min-width: 0;
}

/* 主标题: 48px, 字重 500, #282828 */
.hero-title {
  font-size: clamp(22px, 0.44rem, 44px);
  font-weight: 500;
  color: #282828;
  line-height: 1.25;
  /* 设计稿: 标题与标签间距 ~35px */
  margin-bottom: clamp(12px, 0.35rem, 35px);
  white-space: nowrap;
}

/* 分类标签: 蓝色背景，圆角，20px 字体
   设计稿: 宽 96px，高 41px，位置 (255, 308)
   text "汽车" 宽 ~40px，左右 padding = (96-40)/2 = 28px
*/
.hero-tag {
  display: inline-block;
  background: rgba(0, 128, 255, 0.2);  /* rgba(0,128,255,0.2) */
  color: #0080ff;
  font-size: clamp(12px, 0.20rem, 20px);
  font-weight: 500;
  /* 垂直 padding = (41-30)/2 ≈ 5.5px，水平 padding = 28px */
  padding: clamp(3px, 0.055rem, 6px) clamp(10px, 0.28rem, 28px);
  border-radius: clamp(2px, 0.03rem, 3px);
  /* 标签底部(225px)到日期(424px)的间距 = 199px */
  margin-bottom: clamp(16px, 1.99rem, 199px);
  line-height: 1.5;
}

/* 发布时间行：图标 + 时间文字 */
.hero-meta {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: clamp(4px, 0.06rem, 8px);
}

.hero-meta-icon {
  width: clamp(12px, 0.17rem, 17px);
  height: auto;
  object-fit: contain;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.hero-meta-date {
  font-size: clamp(12px, 0.16rem, 16px);
  color: #9d9d9d; /* #9d9d9d */
}

/* ── 右侧封面图 ── */
.hero-cover {
  -webkit-flex: 0 0 50%;
  flex: 0 0 50%;
  /* 设计稿: 封面图距英雄区顶部 37px (161-124) */
  padding-top: clamp(16px, 0.37rem, 37px);
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  min-width: 0;
}

/* 封面图: 706×394px，设计稿中带遮罩圆角，用 CSS 实现 */
.hero-cover-img {
  width: clamp(200px, 7.06rem, 706px);
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: clamp(4px, 0.08rem, 12px);
  /* 防止图片在加载前占位导致布局偏移 */
  aspect-ratio: 706 / 394;
}


/* ────────────────────────────────────────────────────────────────
   6. 文章正文区 (.article)
      背景: #f6f6f6
      内容: 两段正文 + 一张插图
      设计稿正文区域: 左 255px 起，宽 1410px
──────────────────────────────────────────────────────────────── */
.article {
  background: #f6f6f6;
  /* 设计稿底部到页脚间距约 112px */
  padding-bottom: clamp(40px, 1.12rem, 112px);
}

.article-inner {
  padding: 0 13.28%;
  /* 设计稿: 正文顶部距英雄区底部 61px (683-622) */
  padding-top: clamp(24px, 0.61rem, 61px);
}

/* ── 正文段落容器 ── */
.article-body {
  color: #282828;
}

.article-body p {
  font-size: clamp(12px, 0.16rem, 16px);
  /* 设计稿行高 40px，使用无单位比值兼容多字号 */
  line-height: 2.5;
  color: #282828;
}

/* 段落间距 */
.article-body p + p {
  margin-top: 0;
}

/* ── 文章二级标题 ──
   设计稿: 32px，字重 500，颜色 #0080ff
*/
.article-subtitle {
  font-size: clamp(16px, 0.32rem, 32px);
  font-weight: 500;
  color: #0080ff;
  /* 设计稿行高同为 40px */
  line-height: 1.25;
  margin-top: clamp(16px, 0.40rem, 40px);
  margin-bottom: clamp(12px, 0.40rem, 40px);
}

/* ── 正文插图 ──
   设计稿: 宽 1091px（容器 1410px 的 77.4%），水平近似居中
   距上方文字: 44px | 距下方文字: 94px
*/
.article-figure {
  /* 77.4% = 1091/1410，两侧各留约 11.3% */
  width: 77.4%;
  margin-right: auto;
  margin-left: auto;
  margin-top: clamp(20px, 0.44rem, 44px);
  margin-bottom: clamp(40px, 0.94rem, 94px);
}

.article-figure-img {
  width: 100%;
  height: auto;
  border-radius: clamp(2px, 0.04rem, 6px);
  /* 防止 CLS */
  aspect-ratio: 1091 / 469;
}


/* ────────────────────────────────────────────────────────────────
   7. 页脚 (.footer)
      背景: 黑色 (#000)  总高: 529px
      左: 品牌 Logo + 备案  中: 二维码  右: 联系我们
      底: 版权文字
──────────────────────────────────────────────────────────────── */
.footer {
  background: #000000;
  color: #ffffff;
}

/* ── 页脚主体 ── */
.footer-main {
  /* 底部分割线用 border-bottom 实现 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.footer-inner {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  /* 使用 flex-start 而非 space-between，每个区块自带 margin-right */
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  padding: 0 13.28%;
  /* 底部内边距：内容最晚结束处(2670px)到分割线(2727px)约 57px */
  padding-bottom: clamp(24px, 0.57rem, 57px);
}

/* ── 品牌信息区 ── */
.footer-brand {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  /* 设计稿: Logo 在页脚顶部 115px 处 (2397-2282) */
  padding-top: clamp(24px, 1.15rem, 115px);
  /* 品牌区右边缘(~662px)到 QR 区左边缘(821px)，间距约 159px */
  margin-right: clamp(16px, 1.59rem, 159px);
  min-width: 0;
}

.footer-logo {
  /* 设计稿: 405px × 78px */
  width: clamp(160px, 4.05rem, 405px);
  height: auto;
  object-fit: contain;
  /* 设计稿: Logo 底部到文字间距 23px */
  margin-bottom: clamp(10px, 0.23rem, 23px);
}

.footer-brand-info {
  font-size: clamp(11px, 0.16rem, 16px);
  /* 设计稿行高 43px */
  line-height: 2.6875;
  color: #ffffff;
}

.footer-brand-info p {
  white-space: nowrap;
}

/* ── 二维码区 ── */
.footer-qr-group {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  display: -webkit-flex;
  display: flex;
  /* 两张二维码间距: 1007-(821+139)=47px */
  gap: clamp(16px, 0.47rem, 47px);
  /* 设计稿: 二维码在页脚顶部 154px 处 (2436-2282) */
  padding-top: clamp(24px, 1.54rem, 154px);
  /* QR 区右边缘(~1175px)到分割线(1319px)，间距约 144px */
  margin-right: 0;
}

.footer-qr-card {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
}

/* 二维码白色圆角外框 (139×139px，内边距 7px) */
.footer-qr-frame {
  width: clamp(80px, 1.39rem, 139px);
  height: clamp(80px, 1.39rem, 139px);
  background: #ffffff;
  /* 设计稿使用遮罩实现圆角，CSS 等效 */
  border-radius: clamp(6px, 0.12rem, 16px);
  /* 7px 内边距，露出 125×125 的二维码图片 */
  padding: clamp(4px, 0.07rem, 7px);
  overflow: hidden;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.footer-qr-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.footer-qr-label {
  font-size: clamp(11px, 0.16rem, 16px);
  color: #ffffff;
  /* 设计稿: 标签距二维码底部约 9px */
  margin-top: clamp(6px, 0.09rem, 10px);
  white-space: nowrap;
}

/* ── 竖向分割线 ──
   设计稿: 宽 2px，高 333px，距页脚顶 90px (2372-2282)
   颜色: rgba(217,217,217,0.5)
*/
.footer-divider {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width: 2px;
  /* 设计稿高度 333px */
  height: clamp(150px, 3.33rem, 333px);
  background: rgba(217, 217, 217, 0.5);
  /* 距页脚顶部 90px (2372-2282) */
  margin-top: clamp(24px, 0.90rem, 90px);
  /* 两侧内边距让分割线与相邻内容保持距离 */
  margin-left: clamp(8px, 0.46rem, 46px);
  margin-right: clamp(8px, 0.46rem, 46px);
}

/* ── 联系我们 ── */
.footer-contact {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  /* 设计稿: "联系我们" 标题在页脚顶部 85px 处 (2367-2282) */
  padding-top: clamp(20px, 0.85rem, 85px);
  min-width: 0;
}

.footer-contact-title {
  font-size: clamp(14px, 0.24rem, 24px);
  font-weight: 700;
  color: #ffffff;
  /* 设计稿行高 43px */
  line-height: clamp(1.5, 1.79, 1.79);
  /* 设计稿: 标题底部到第一个联系项约 25px */
  margin-bottom: clamp(10px, 0.25rem, 25px);
}

/* 联系列表（禁止绝对定位，使用 flex 列表） */
.footer-contact-list {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0;
}

.footer-contact-item {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  /* 图标与文字间距 */
  gap: clamp(6px, 0.10rem, 10px);
  font-size: clamp(11px, 0.14rem, 14px);
  color: #ffffff;
  /* 设计稿行高 24px */
  line-height: clamp(1.5, 1.714, 1.714);
  /* 行间距（设计稿各行约间距 34px = 行高 + gap） */
  min-height: clamp(24px, 0.34rem, 34px);
  padding-bottom: clamp(4px, 0.10rem, 10px);
}

.footer-contact-icon {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  object-fit: contain;
  /* 图标最大尺寸不超过设计稿 18px */
  width: clamp(12px, 0.18rem, 18px);
  height: auto;
}

.footer-contact-link {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

.footer-contact-link:hover {
  opacity: 0.75;
}

/* ── 版权栏 ── */
.footer-bottom {
  /* 设计稿底部约 53px 的内边距空间 */
  padding: clamp(12px, 0.31rem, 31px) 13.28%;
  text-align: center;
}

.footer-copyright {
  font-size: clamp(10px, 0.14rem, 14px);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}


/* ================================================================
   8. 响应式 — 平板端适配（≤ 1200px）
   主要调整: 导航间距收紧，英雄区标题换行，页脚允许换行
================================================================ */
@media (max-width: 1200px) {

  .hero-title {
    white-space: normal;
    word-break: break-all;
  }

  /* 页脚内层允许自然换行 */
  .footer-inner {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .footer-divider {
    display: none;
  }

  .footer-contact {
    -webkit-flex-basis: 100%;
    flex-basis: 100%;
    padding-top: clamp(12px, 0.30rem, 30px);
  }
}


/* ================================================================
   9. 响应式 — 移动端适配（≤ 768px）
   根字号重置为 16px，所有尺寸改用 px 值
   布局: 单列垂直排列
================================================================ */
@media (max-width: 768px) {

  /* 重置根字号，避免 rem 值在小屏失效 */
  html {
    font-size: 16px;
  }
  /* 小屏：水平边距 5%（替代原 --container-px） */

  .footer-bottom {
    padding: clamp(12px, 0.31rem, 31px) 5%;
  }

  .hp-banner-content {
    left: 5%;
  }

  

  /* ── 导航 ── */
  .nav {
    height: 56px;
    overflow: visible; /* 菜单展开时需溢出 */
  }

  .nav-inner {
    height: 56px;
    position: relative;
  }

  .nav-logo {
    width: 130px;
  }

  /* 显示汉堡按钮 */
  .nav-hamburger {
    display: -webkit-flex;
    display: flex;
  }

  /* 折叠导航菜单（默认隐藏） */
  .nav-menu {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: #ffffff;
    padding: 8px 16px 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
    border-top: 1px solid #f0f0f0;
    z-index: 999;
    /* 重置 flex 对齐方式，允许列表垂直排列 */
    margin: 0;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }

  /* 展开状态 */
  .nav-menu--open {
    display: block;
  }

  .nav-menu--open .nav-list {
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    height: auto;
    gap: 0;
  }

  .nav-menu--open .nav-list-item {
    height: auto;
    width: 100%;
    padding: 11px 0;
    border-bottom: 1px solid #f5f5f5;
  }

  .nav-menu--open .nav-list-item:last-child {
    border-bottom: none;
  }

  .nav-menu--open .nav-link {
    font-size: 15px;
  }

  /* 移动端无底部条：用左侧色条 + 背景突出当前页 */
  .nav-menu--open .nav-list-item--active {
    background: rgba(0, 128, 255, 0.06);
    box-shadow: inset 3px 0 0 #0080ff;
  }

  .nav-menu--open .nav-list-item--active .nav-link {
    color: #0080ff;
    font-weight: 500;
  }

  .nav-menu--open .nav-list-item--active::after {
    display: none;
  }

  /* 移动端隐藏电话号码 */
  .nav-phone {
    display: none;
  }

  /* ── 英雄区 ── */
  .hero {
    height: auto;
    padding: 24px 0 28px;
  }

  .hero-inner {
    -webkit-flex-direction: column;
    flex-direction: column;
    height: auto;
    gap: 20px;
  }

  .hero-content {
    -webkit-flex: none;
    flex: none;
    width: 100%;
    padding-top: 0;
  }

  .hero-title {
    font-size: 22px;
    white-space: normal;
    word-break: break-all;
    line-height: 1.4;
    margin-bottom: 12px;
  }

  .hero-tag {
    font-size: 13px;
    padding: 4px 10px;
    margin-bottom: 14px;
  }

  .hero-meta-date {
    font-size: 13px;
  }

  .hero-meta-icon {
    width: 14px;
  }

  .hero-cover {
    -webkit-flex: none;
    flex: none;
    width: 100%;
    padding-top: 0;
  }

  .hero-cover-img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    aspect-ratio: 706 / 394;
  }

  /* ── 文章正文 ── */
  .article {
    padding-bottom: 32px;
  }

  .article-inner {
    padding-top: 24px;
  }

  .article-body p {
    font-size: 14px;
    line-height: 2;
  }

  .article-subtitle {
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 12px;
  }

  /* 移动端插图占满容器宽度 */
  .article-figure {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 24px;
  }

  .article-figure-img {
    border-radius: 6px;
  }

  /* ── 页脚 ── */
  .footer-inner {
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 24px;
    padding-top: 28px;
    padding-bottom: 20px;
  }

  .footer-brand {
    padding-top: 0;
    width: 100%;
  }

  .footer-logo {
    width: 180px;
    margin-bottom: 12px;
  }

  .footer-brand-info {
    font-size: 13px;
    line-height: 2;
  }

  .footer-qr-group {
    padding-top: 0;
    gap: 20px;
  }

  .footer-qr-frame {
    width: 90px;
    height: 90px;
  }

  .footer-qr-label {
    font-size: 12px;
    margin-top: 6px;
  }

  .footer-divider {
    display: none;
  }

  .footer-contact {
    padding-top: 0;
    width: 100%;
    -webkit-flex-basis: auto;
    flex-basis: auto;
  }

  .footer-contact-title {
    font-size: 17px;
    margin-bottom: 12px;
  }

  .footer-contact-item {
    font-size: 13px;
    gap: 8px;
    padding-bottom: 8px;
    min-height: auto;
  }

  .footer-contact-icon {
    width: 14px;
  }

  .footer-bottom {
    padding: 14px 5%;
  }

  .footer-copyright {
    font-size: 12px;
  }
}


/* ================================================================
   10. 超宽屏上限（≥ 1920px）— 锁定根字号为 100px
================================================================ */
@media (min-width: 1920px) {
  html {
    font-size: 100px;
  }
}


/* ================================================================
   11. 首页专属样式 (index.html)
   设计稿基准: 1920px
   类前缀: hp- (homepage)
================================================================ */

/* ── 导航覆盖：首页导航背景改为 #f3f3f3 ── */
.hp-nav {
  background: #f3f3f3;
}

/* ── 首页通用区块头部 ── */
.hp-section-head {
  text-align: center;
  padding-top: clamp(30px, 0.57rem, 57px);
  padding-bottom: clamp(20px, 0.40rem, 40px);
}

.hp-section-title {
  font-size: clamp(24px, 0.44rem, 44px);
  font-weight: 700;
  color: #000;
  margin-bottom: clamp(10px, 0.20rem, 20px);
}

.hp-section-sub {
  font-size: clamp(14px, 0.30rem, 30px);
  color: #9b9e9e;
  font-weight: 400;
}

/* 产品应用区标题 — Figma node 48:5 */
.hp-section-head--products {
  padding-top: clamp(24px, 0.42rem, 42px);
  padding-bottom: clamp(16px, 0.26rem, 26px);
}

.hp-section-head--products .hp-section-title {
  font-size: clamp(28px, 0.48rem, 48px);
  font-weight: 700;
  margin-bottom: clamp(8px, 0.15rem, 15px);
}

.hp-section-head--products .hp-section-sub {
  font-size: clamp(14px, 0.30rem, 30px);
  color: #9b9e9e;
}

/* ── Banner 区（Swiper 全宽轮播） ── */
.hp-banner {
  position: relative;
  height: clamp(280px, 7.18rem, 718px);
  overflow: hidden;
  background: #0a1a4a;
}

.hp-banner-swiper {
  width: 100%;
  height: 100%;
}

.hp-banner-swiper.swiper {
  margin-left: 0;
  margin-right: 0;
}

.hp-banner-swiper .swiper-wrapper {
  height: 100%;
}

.hp-banner-swiper .swiper-slide {
  height: 100%;
}

.hp-banner-slide {
  position: relative;
  width: 100%;
  height: 100%;
}

.hp-banner-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hp-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  max-width: none;
}

.hp-banner-content {
  position: absolute;
  left: 13.28%;
  top: 50%;
  transform: translateY(-40%);
  max-width: 50%;
  z-index: 1;
}

.hp-banner-slide--dark .hp-banner-content {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.hp-banner-title {
  margin: 0;
  font-size: clamp(28px, 0.68rem, 68px);
  font-weight: 700;
  line-height: 1.2;
  color: #000;
  margin-bottom: clamp(12px, 0.25rem, 25px);
}

.hp-banner-title-accent {
  color: #005fe8;
}

.hp-banner-title--light {
  color: #ffffff;
}

.hp-banner-title-accent--light {
  color: #7dd3fc;
}

.hp-banner-subtitle {
  margin: 0;
  font-size: clamp(14px, 0.36rem, 36px);
  color: #767676;
  line-height: 1.5;
}

.hp-banner-subtitle--light {
  color: rgba(255, 255, 255, 0.92);
}

.hp-banner-pagination.swiper-pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(15px, 0.55rem, 55px);
  top: auto;
  width: 100% !important;
  max-width: 100%;
  margin: 0;
  padding: 0;
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.08rem, 10px);
  box-sizing: border-box;
  transform: none;
  text-align: center;
  pointer-events: none;
}

.hp-banner-pagination .swiper-pagination-bullet {
  pointer-events: auto;
  width: clamp(14px, 0.19rem, 19px);
  height: clamp(14px, 0.19rem, 19px);
  margin: 0 !important;
  opacity: 1;
  border-radius: 50%;
  background: #0080ff;
  flex-shrink: 0;
}

.hp-banner-pagination .swiper-pagination-bullet-active {
  width: clamp(40px, 0.69rem, 69px);
  border-radius: 9999px;
  background: #0080ff;
}

/* ── 功能模块区 ── */
.hp-features {
  background: #fff;
  padding-bottom: clamp(40px, 0.80rem, 80px);
}

/* 主面板：左蓝侧栏 + 右内容 */
.hp-features-panel {
  display: flex;
  margin: clamp(20px, 1.06rem, 106px) 13.28% 0;
  background: #f0f8ff;
  min-height: clamp(300px, 6.92rem, 692px);
  border-radius: 0;
}

/* 左侧蓝色导航栏 */
.hp-sidebar {
  flex-shrink: 0;
  width: clamp(120px, 2.72rem, 272px);
  background: #0080ff;
  display: flex;
  flex-direction: column;
  padding: clamp(8px, 0.20rem, 20px) 0;
  padding-right: 0.35rem;
}

.hp-sidebar-item {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.12rem, 14px);
  padding: clamp(14px, 0.28rem, 25px) clamp(10px, 0.28rem, 28px);
  color: #fff;
  font-size: clamp(12px, 0.20rem, 20px);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
  position: relative;
}

.hp-sidebar-item--active {
  background: #fff;
  border-radius: 0 clamp(20px, 0.36rem, 36px) clamp(20px, 0.36rem, 36px) 0;
  color: #0080ff;
}

.hp-sidebar-icon {
  width: clamp(16px, 0.28rem, 28px);
  height: auto;
  flex-shrink: 0;
  display: block;
}
.ptkc{
	background-color: #E9F5FF;
	padding: 0.64rem 13.28% 0.54rem;
}
.more{
	margin-top: 0.72rem;
	text-align: center;
}
.more a{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #0080FF;
	width: 2.6rem;
	height: 0.84rem;
	background-color: #ffffff;
	font-size: 0.24rem;
	color: #0080FF;
	border-radius: 0.4rem;
}
/* 功能模块侧栏：未选中显示 tooicon，选中显示 tooicona */
.hp-sidebar-item .tooicona {
  display: none;
}

.hp-sidebar-item--active .tooicon {
  display: none;
}

.hp-sidebar-item--active .tooicona {
  display: block;
}

/* 右侧内容区 */
.hp-feature-main {
  flex: 1;
  display: flex;
  align-items: center;
  padding: clamp(20px, 0.56rem, 56px) clamp(16px, 0.40rem, 40px);
  gap: clamp(16px, 0.40rem, 40px);
  min-width: 0;
}

.hp-feature-info {
  flex: 0 0 38%;
  min-width: 0;
  padding-top: clamp(8px, 0.20rem, 20px);
}

.hp-feature-heading {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.14rem, 14px);
  margin-bottom: clamp(16px, 0.44rem, 44px);
}

.hp-feature-heading-bar {
  width: clamp(4px, 0.09rem, 9px);
  height: clamp(28px, 0.48rem, 48px);
  background: #0080ff;
  border-radius: 4px;
  flex-shrink: 0;
}

.hp-feature-title {
  font-size: clamp(18px, 0.36rem, 36px);
  font-weight: 700;
  color: #000;
}

.hp-feature-desc {
  font-size: clamp(12px, 0.20rem, 20px);
  color: #5d5d5d;
  line-height: 1.75;
  margin-bottom: clamp(20px, 0.40rem, 40px);
}

.hp-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0080ff;
  color: #fff;
  font-size: clamp(13px, 0.20rem, 20px);
  font-weight: 500;
  height: clamp(34px, 0.48rem, 48px);
  padding: 0 clamp(14px, 0.32rem, 36px);
  border-radius: clamp(4px, 0.05rem, 5px);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
  text-decoration: none;
}

.hp-btn-primary:hover {
  opacity: 0.85;
  color: #fff;
}

.hp-feature-preview {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
}

.hp-feature-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  object-fit: cover;
}

/* 笔记本叠加效果：屏幕内容 + 外框 */
.hp-laptop-wrap {
  position: relative;
  width: 100%;
}

.hp-laptop-screen {
  display: block;
  width: 82%;
  height: auto;
  border-radius: 4px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  opacity: 0.9;
}

.hp-laptop-frame {
  display: block;
  opacity: 0;
  width: 100%;
  height: auto;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  max-width: none;
}

/* ── 产品应用区（Figma X8PeGztGKecJkz9i93jzbE · 48:5 · 1920 画板） ── */
.hp-products {
  background: #F3FAFF;
  padding-bottom: clamp(20px, 0.30rem, 30px);
}

.hp-product-block {
  background: #f3faff;
  position: relative;
}

/* 产品详情两列：左列宽约 51.25%（984/1920），高 630 */
.hp-product-row {
  display: flex;
  align-items: stretch;
  padding: 0 13.28%;
  min-height: clamp(280px, 6.30rem, 630px);
}
.hp-product-left {
  flex: 0 0 51.25%;
  max-width: 51.25%;
  position: relative;
  overflow: hidden;
  background: #000;
}

.hp-video-img {
  width: 100%;
  height: 100%;
  min-height: clamp(220px, 6.30rem, 630px);
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0.6;
}

.hp-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(70px, 1.40rem, 140px);
  height: clamp(70px, 1.40rem, 140px);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

.hp-play-btn img {
  width: 100%;
  height: auto;
  display: block;
}

.hp-product-right {
  flex: 1;
  min-width: 0;
  background: #f3faff;
  padding: clamp(28px, 0.47rem, 47px) clamp(16px, 0.60rem, 60px) clamp(24px, 0.50rem, 50px)
    0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
}

.hp-product-title-wrap {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.15rem, 15px);
  margin-bottom: clamp(12px, 0.26rem, 26px);
}

.hp-product-title-bar {
  width: clamp(6px, 0.09rem, 9px);
  height: clamp(24px, 0.35rem, 35px);
  background: #1677ff;
  border-radius: clamp(4px, 0.06rem, 6px);
  flex-shrink: 0;
}

.hp-product-name {
  font-size: clamp(18px, 0.32rem, 32px);
  font-weight: 500;
  color: #000;
  margin: 0;
  line-height: 1.25;
}

.hp-product-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: clamp(32px, 0.40rem, 40px);
  padding: 0 clamp(10px, 0.21rem, 21px);
  background: #d1e4ff;
  color: #1677ff;
  font-size: clamp(12px, 0.16rem, 16px);
  font-weight: 400;
  border-radius: clamp(3px, 0.05rem, 5px);
  margin-bottom: clamp(14px, 0.22rem, 22px);
  box-sizing: border-box;
}

.hp-product-desc {
  font-size: clamp(12px, 0.16rem, 16px);
  color: #666;
  line-height: 1.875;
  margin: 0 0 clamp(18px, 0.27rem, 27px);
  max-width: clamp(280px, 6.68rem, 668px);
}

.hp-product-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(28px, 0.43rem, 43px);
  margin-bottom: 0;
}

.hp-btn-product-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: clamp(100px, 1.18rem, 118px);
  height: clamp(40px, 0.50rem, 50px);
  padding: 0 clamp(12px, 0.20rem, 20px);
  background: #0080ff;
  color: #fff;
  font-size: clamp(12px, 0.16rem, 16px);
  font-weight: 500;
  border-radius: clamp(6px, 0.10rem, 10px);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
  text-decoration: none;
}

.hp-btn-product-primary:hover {
  opacity: 0.85;
}

.hp-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: clamp(100px, 1.18rem, 118px);
  height: clamp(40px, 0.50rem, 50px);
  padding: 0 clamp(12px, 0.20rem, 20px);
  background: transparent;
  color: #0080ff;
  font-size: clamp(12px, 0.16rem, 16px);
  font-weight: 500;
  border-radius: clamp(6px, 0.10rem, 10px);
  border: 1px solid #1677ff;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
  text-decoration: none;
}

.hp-btn-outline:hover {
  background: #f0f7ff;
}

/* Tab：与主行重叠 171px @1920 → -1.71rem；左起 916px → 47.708vw；Tab 185×77，间距 35 */
.hp-product-tabs {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.18rem, 18px);
  margin-top: 60px;
  position: relative;
  padding: 0 13.28%;
  z-index: 2;
  background: transparent;
  box-sizing: border-box;
}

.hp-tab-arrow {
  flex-shrink: 0;
  width: clamp(28px, 0.30rem, 30px);
  height: clamp(28px, 0.30rem, 30px);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hp-tab-arrow img {
  width: 100%;
  height: auto;
  display: block;
}

.hp-product-tabs-swiper {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.hp-product-tabs-swiper.swiper {
  margin-left: 0;
  margin-right: 0;
}
.hp-product-tabs-swiper.swiper{
    padding: 10px 0;
}
.hp-product-tabs-swiper .swiper-slide {
  width: auto;
  height: auto;
  box-sizing: border-box;
}

@media (min-width: 769px) {
  .hp-product-tabs-swiper .swiper-slide {
    width: clamp(140px, 1.85rem, 185px);
  }
}

.hp-product-tabs-swiper .hp-tab {
  width: 100%;
  margin: 0;
}

.hp-tab {
  flex: 0 0 auto;
  width: 100%;
  height: clamp(52px, 0.77rem, 77px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3faff;
  border: 2px solid #0080ff;
  border-radius: clamp(6px, 0.10rem, 10px);
  color: #1677ff;
  font-size: clamp(11px, 0.16rem, 16px);
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  text-align: center;
  white-space: nowrap;
  padding: 0 clamp(6px, 0.10rem, 10px);
}

.hp-tab--active {
  background: #1677ff;
  border-color: #1677ff;
  color: #fff;
}

.hp-tab:hover:not(.hp-tab--active) {
  background: #e8f2ff;
}


/* ── 精益专家区（Figma node 50:6 · 1920：标题48 / 卡424×449 / 间距66 / 箭头63） ── */
.hp-experts {
  background: #f6f6f6;
  padding: clamp(36px, 0.55rem, 55px) clamp(16px, calc(173 / 1920 * 100vw), 173px)
    clamp(40px, 0.60rem, 60px);
}

.hp-experts-head {
  text-align: center;
  margin-bottom: clamp(48px, 0.80rem, 80px);
}

.hp-experts-heading {
  margin: 0;
  font-size: clamp(28px, 0.48rem, 48px);
  font-weight: 700;
  color: #000;
  line-height: 1.2;
}

.hp-experts-row {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.15rem, 15px);
  max-width: 1440px;
  margin: 0 auto;
}

.hp-experts-swiper {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.hp-experts-swiper.swiper {
  margin-left: 0;
  margin-right: 0;
}

.hp-experts-swiper .swiper-slide {
  width: 4.24rem;
  max-width: 424px;
  height: 4.49rem;
  max-height: 449px;
  box-sizing: border-box;
}

/* Figma：63×63 圆形箭头资源，无灰底 */
.hp-experts-arrow {
  flex-shrink: 0;
  width: clamp(44px, 0.63rem, 63px);
  height: clamp(44px, 0.63rem, 63px);
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.hp-experts-arrow:hover:not(.swiper-button-disabled) {
  opacity: 0.85;
}

.hp-experts-arrow.swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.hp-experts-arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.hp-expert-card {
  height: 100%;
}

.hp-expert-card-inner {
  display: flex;
  align-items: stretch;
  height: 100%;
  min-height: clamp(360px, 4.49rem, 449px);
  border-radius: clamp(16px, 0.20rem, 20px);
  overflow: hidden;
  background-color: #e8f4ff;
  background-image: url('../img/hp-expert-card-bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 4px 20px rgba(0, 80, 180, 0.06);
}

.hp-expert-text {
  flex: 1;
  min-width: 0;
  padding: clamp(56px, 0.86rem, 86px) clamp(8px, 0.16rem, 16px) clamp(20px, 0.34rem, 34px)
    clamp(20px, 0.31rem, 31px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.hp-expert-name {
  font-size: clamp(22px, 0.40rem, 40px);
  font-weight: 400;
  color: #000;
  margin: 0 0 clamp(28px, 0.53rem, 53px);
  line-height: 1.2;
}

.hp-expert-bar {
  width: clamp(40px, 0.50rem, 50px);
  height: clamp(8px, 0.10rem, 10px);
  background: #0080ff;
  margin-bottom: clamp(16px, 0.22rem, 22px);
  border-radius: 0;
  flex-shrink: 0;
}

.hp-expert-desc {
  font-size: clamp(13px, 0.16rem, 16px);
  color: #000;
  line-height: 26px;
  margin: 0 0 clamp(12px, 0.20rem, 20px);
  flex: 1 1 auto;
  min-height: 0;
  max-width: clamp(140px, 1.65rem, 165px);
}

/* 首页精益专家简介最多 3 行，超出省略 */
.hp-experts .hp-expert-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}

.hp-expert-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: clamp(96px, 1.05rem, 105px);
  height: clamp(36px, 0.40rem, 40px);
  padding: 0;
  margin-top: auto;
  border-radius: clamp(18px, 0.20rem, 20px);
  font-size: clamp(14px, 0.16rem, 16px);
  font-weight: 400;
  text-decoration: none;
  transition: opacity 0.2s, background 0.2s;
  white-space: nowrap;
}

.hp-expert-btn--solid {
  background: #0080ff;
  color: #fff;
  border: none;
}

.hp-expert-btn--solid:hover {
  opacity: 0.9;
}

.hp-expert-btn--outline {
  background: transparent;
  color: #0080ff;
  border: 1px solid #0080ff;
}

.hp-expert-btn--outline:hover {
  background: rgba(0, 128, 255, 0.06);
}

.hp-expert-photo {
  flex: 0 0 clamp(200px, 2.70rem, 270px);
  width: clamp(200px, 2.70rem, 270px);
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  align-self: stretch;
}

.hp-expert-photo img {
  width: 100%;
  max-width: 270px;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}


/* ── 下载 ECRS 客户端横幅 ── */
.hp-download {
  position: relative;
  overflow: hidden;
  /* min-height: clamp(200px, 2.79rem, 279px); */
}

.hp-download-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(0, 100, 220, 0.88) 0%, rgba(0, 180, 200, 0.82) 100%),
    url('../img/download-banner-bg.png') center / cover no-repeat;
  pointer-events: none;
}

.hp-download-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 0.40rem, 40px);
  flex-wrap: wrap;
  padding: clamp(28px, 0.45rem, 45px) 13.28%;
  max-width: 100%;
}

.hp-download-copy {
  flex: 1 1 280px;
  min-width: 0;
}

.hp-download-title {
  font-size: clamp(22px, 0.44rem, 44px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 clamp(10px, 0.18rem, 18px);
  line-height: 1.2;
}

.hp-download-sub {
  font-size: clamp(13px, 0.20rem, 20px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  line-height: 1.5;
  max-width: 42em;
}

.hp-download-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 0.12rem, 12px);
  min-height: clamp(72px, 1.08rem, 108px);
  padding: 0 clamp(28px, 0.45rem, 45px);
  background: rgba(255, 255, 255, 0.92);
  border-radius: clamp(40px, 0.675rem, 67.5px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}

.hp-download-cta:hover {
  background: #fff;
  transform: translateY(-1px);
}

.hp-download-cta-icon {
  flex-shrink: 0;
  width: clamp(32px, 0.40rem, 40px);
  height: auto;
}

.hp-download-cta-text {
  font-size: clamp(20px, 0.36rem, 36px);
  font-weight: 700;
  color: #0078d6;
}


/* ================================================================
   12. 首页响应式 — 平板端（≤ 1200px）
================================================================ */
@media (max-width: 1200px) {

  .hp-banner-content {
    max-width: 60%;
  }

  .hp-features-panel {
    margin-left: 4%;
    margin-right: 4%;
  }
  .hp-product-row {
    padding: 0 4%;
  }
  .hp-product-tabs {
    padding: 0 4%;
  }

  .hp-feature-main {
    flex-direction: column;
  }

  .hp-feature-info {
    flex: none;
    width: 100%;
  }

  .hp-feature-preview {
    width: 100%;
  }

  .hp-product-tabs {
    flex-wrap: wrap;
    margin-top: clamp(-100px, -1.2rem, -80px);
    padding-left: 5%;
  }

  .hp-experts-arrow {
    width: 44px;
    height: 44px;
  }

  .hp-download-inner {
    align-items: flex-start;
  }
}


/* ================================================================
   13. 首页响应式 — 移动端（≤ 768px）
================================================================ */
@media (max-width: 768px) {

  .hp-banner {
    height: clamp(200px, 56vw, 360px);
  }

  .hp-banner-content {
    max-width: 80%;
    left: 5%;
    transform: translateY(-50%);
  }

  .hp-banner-title {
    font-size: clamp(20px, 6vw, 32px);
    margin-bottom: 8px;
  }

  .hp-banner-subtitle {
    font-size: clamp(12px, 3.5vw, 18px);
  }

  .hp-banner-pagination.swiper-pagination {
    bottom: 12px;
  }

  .hp-banner-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
  }

  .hp-banner-pagination .swiper-pagination-bullet-active {
    width: 30px;
  }

  .hp-section-title {
    font-size: 22px;
  }

  .hp-section-sub {
    font-size: 14px;
  }

  .hp-features-panel {
    flex-direction: column;
    margin: 20px 5% 0;
  }
  .hp-product-row {
    padding: 0 5%;
  }
  .hp-product-tabs {
    padding: 0 5%;
  }

  .hp-sidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 8px;
    gap: 4px;
  }

  .hp-sidebar-item {
    flex: 1 1 calc(50% - 4px);
    padding: 8px 10px;
    font-size: 13px;
    white-space: nowrap;
    justify-content: center;
  }

  .hp-sidebar-item--active {
    border-radius: 6px;
  }

  .hp-sidebar-icon {
    width: 16px;
  }

  .hp-feature-main {
    flex-direction: column;
    padding: 16px;
    gap: 16px;
  }

  .hp-feature-info {
    flex: none;
    width: 100%;
    padding-top: 0;
  }

  .hp-feature-heading {
    margin-bottom: 12px;
  }

  .hp-feature-title {
    font-size: 20px;
  }

  .hp-feature-desc {
    font-size: 14px;
  }

  .hp-btn-primary {
    font-size: 14px;
    height: 38px;
    padding: 0 20px;
  }

  .hp-product-row {
    flex-direction: column;
    min-height: auto;
  }

  .hp-product-left {
    flex: none;
    max-width: none;
    width: 100%;
    height: 220px;
  }

  .hp-video-img {
    max-width: none;
    min-height: 0;
    height: 100%;
  }

  .hp-play-btn {
    width: 60px;
    height: 60px;
  }

  .hp-product-right {
    padding: 20px 16px 24px;
  }

  .hp-product-name {
    font-size: 18px;
  }

  .hp-product-desc {
    font-size: 14px;
    max-width: none;
  }

  .hp-product-actions {
    flex-wrap: wrap;
    gap: 12px;
  }

  .hp-btn-product-primary,
  .hp-btn-outline {
    font-size: 14px;
    min-width: 0;
    flex: 1 1 auto;
    height: 44px;
    padding: 0 16px;
  }

  .hp-product-tabs {
    margin-top: 0;
    padding: 12px 5% 16px;
    gap: 8px;
  }

  .hp-product-tabs-swiper .swiper-slide {
    width: auto;
    max-width: min(280px, 88vw);
  }

  .hp-tab {
    height: 48px;
    font-size: 13px;
  }

  .hp-tab-arrow {
    width: 30px;
    height: 30px;
  }

  .hp-experts {
    padding-left: 5%;
    padding-right: 5%;
  }
  .ptkc {
    padding-left: 5%;
    padding-right: 5%;
  }

  .hp-experts-arrow {
    width: 36px;
    height: 36px;
  }

  .hp-experts-swiper .swiper-slide {
    width: min(100%, 424px);
    height: auto;
    max-height: none;
  }

  .hp-expert-card-inner {
    min-height: 0;
    flex-direction: column-reverse;
  }

  .hp-expert-text {
    padding: 16px 16px 20px;
    max-width: 100%;
  }

  .hp-expert-desc {
    max-width: none;
  }

  .hp-expert-photo {
    flex: none;
    max-height: 220px;
    width: 100%;
  }

  .hp-expert-photo img {
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: contain;
  }

  .hp-download-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }

  .hp-download-cta {
    align-self: center;
    width: 100%;
    max-width: 320px;
    min-height: 56px;
    padding: 12px 24px;
    border-radius: 999px;
  }

  .hp-download-cta-text {
    font-size: 18px;
  }

  .hp-download-title {
    font-size: 22px;
  }

  .hp-download-sub {
    font-size: 14px;
  }
}


/* ================================================================
   14. 产品介绍页 .page-product / .prod-*（Figma 2:285 · 1920 基准）
================================================================ */

.page-product {
  background: #fff;
}

.page-product .nav-list-item--active::after {
  width: clamp(36px, 0.63rem, 63px);
}

.prod-main {
  background: #fff;
}

.prod-h1 {
  margin: 0;
  padding: clamp(48px, 0.85rem, 85px) 13.28% clamp(36px, 0.55rem, 55px);
  font-size: clamp(28px, 0.44rem, 44px);
  font-weight: 700;
  color: #000;
  text-align: center;
  line-height: 1.2;
}

.prod-inner {
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 13.28%;
  padding-right: 13.28%;
  box-sizing: border-box;
}

/* ── 价值四段：浅蓝装饰底 + 图文 ── */
.prod-value {
  position: relative;
  padding: clamp(28px, 0.45rem, 45px) 0;
  overflow: hidden;
  margin-bottom: 0.8rem;
}

.prod-value-slab {
  position: absolute;
  top: 50%;
  width: min(1017px, 53vw);
  height: clamp(280px, 3.96rem, 396px);
  background: #f3f7ff;
  pointer-events: none;
  z-index: 0;
}

.prod-value--img-left .prod-value-slab {
  left: 0;
  transform: translateY(-50%);
  border-radius: 0 clamp(20px, 0.30rem, 30px) clamp(20px, 0.30rem, 30px) 0;
}

.prod-value--img-right .prod-value-slab {
  right: 0;
  transform: translateY(-50%);
  border-radius: clamp(20px, 0.30rem, 30px) 0 0 clamp(20px, 0.30rem, 30px);
}

.prod-value .prod-inner {
  position: relative;
  z-index: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  gap: clamp(24px, 0.75rem, 75px);
}

.prod-value--img-right .prod-inner {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.prod-value-media {
  -webkit-flex: 0 1 704px;
  flex: 0 1 704px;
  max-width: 100%;
  min-width: 0;
}

.prod-value-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(12px, 0.18rem, 18px);
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); */
}

.prod-value-copy {
  -webkit-flex: 1 1 280px;
  flex: 1 1 280px;
  min-width: 0;
  max-width: 539px;
}

.prod-value-title {
  margin: 0;
  font-size: clamp(26px, 0.4rem, 40px);
  font-weight: 500;
  color: #000;
  line-height: 1.2;
}

.prod-value-bar {
  width: clamp(180px, 2.31rem, 231px);
  height: clamp(4px, 0.06rem, 6px);
  margin: clamp(10px, 0.14rem, 14px) 0 clamp(14px, 0.22rem, 22px);
  background: #0080ff;
  border-radius: 6.5px;
}

.prod-value-desc {
  margin: 0;
  font-size: clamp(14px, 0.16rem, 16px);
  font-weight: 400;
  color: #333;
  line-height: 43px;
}

/* ── 功能 12 宫格 ── */
.prod-features {
  background: #e9f5ff;
  padding: clamp(40px, 0.65rem, 65px) 0 clamp(48px, 0.80rem, 80px);
}

.prod-features-h {
  margin: 0 0 clamp(36px, 0.55rem, 55px);
  font-size: clamp(28px, 0.44rem, 44px);
  font-weight: 700;
  color: #000;
  text-align: center;
  line-height: 1.2;
}

.prod-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 0.40rem, 40px) clamp(28px, 0.43rem, 43px);
}

.prod-fcard {
  margin: 0;
}

.prod-fcard-img {
  display: block;
  width: 100%;
  /* 与稿 443×341 一致：固定可视高度，避免不同素材比例导致高低不齐 */
  height: clamp(200px, 3.41rem, 341px);
  object-fit: cover;
  object-position: center;
  border-radius: clamp(8px, 0.12rem, 12px);
  margin-bottom: clamp(20px, 0.34rem, 34px);
}

.prod-fcard-title {
  margin: 0 0 clamp(12px, 0.18rem, 18px);
  font-size: clamp(18px, 0.28rem, 28px);
  font-weight: 700;
  color: #0080ff;
  line-height: 1.2;
  text-align: center;
  font-family: serif;
}

.prod-fcard-desc {
  margin: 0;
  font-size: clamp(15px, 0.18rem, 18px);
  font-weight: 500;
  color: #666;
  line-height: 45px;
}

/* ── 合作伙伴长图 ── */
.prod-partners {
  padding: clamp(40px, 0.65rem, 65px) 0 clamp(48px, 0.75rem, 75px);
  background: #fff;
}

.prod-partners-h {
  margin: 0 0 clamp(32px, 0.50rem, 50px);
  font-size: clamp(22px, 0.44rem, 44px);
  font-weight: 700;
  color: #000;
  text-align: center;
  line-height: 1.35;
}

.prod-partners-fig {
  margin: 0;
  padding: 0;
}

.prod-partners-img {
  display: block;
  width: 100%;
  max-width: 1405px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.24);
}
.partner{
	font-size: 0;
	margin-top: 0.5rem;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.partner1{
	margin-top: 0.2rem;
	width: calc((100% - 1.2rem)/7);
	margin-right: 0.2rem;
	border: 1px solid #eeeeee;
	border-radius: 0.1rem;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.partner1:nth-child(7n){
	margin-right: 0;
}
/* ── 下载条：使用产品介绍专用底图（本地 img） ── */
.page-product .prod-download .hp-download-bg {
  background:
    linear-gradient(105deg, rgba(0, 100, 220, 0.88) 0%, rgba(0, 180, 200, 0.82) 100%),
    url('../img/product-download-banner-bg.png') center / cover no-repeat;
}

@media (max-width: 1200px) {
  .prod-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .prod-value-slab {
    display: none;
  }

  .prod-value .prod-inner {
	  display: block;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    align-items: stretch;
  }

  .prod-value--img-right .prod-inner {
    -webkit-flex-direction: column;
    flex-direction: column;
  }

  .prod-value-copy {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .prod-h1 {
    padding: 20px 5% 0;
    font-size: 24px;
  }

  .prod-feature-grid {
    grid-template-columns: 1fr;
  }

  .prod-fcard-desc {
    line-height: 1.65;
  }

  .prod-value-desc {
    line-height: 1.75;
  }

  .prod-partners-h {
    font-size: 18px;
  }
}


/* ================================================================
   15. 课程列表页 .page-courses / .course-*（Figma 1:430 · 1920 基准）
================================================================ */

.course-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-courses {
  background: #fff;
}

.course-main {
  background: #F6F6F6;
  padding-bottom: clamp(32px, 0.50rem, 50px);
}

/* 筛选区外框 1409×242 @1920 */
.course-toolbar {
  padding: clamp(24px, 0.40rem, 40px) 13.28% clamp(12px, 0.20rem, 20px);
}

.course-toolbar-inner {
  max-width: 1409px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
}

.course-filter-panel {
  /* display: -webkit-flex;
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 0.28rem, 28px); */
}

.course-filter-block {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  gap: clamp(10px, 0.16rem, 16px);
}

.course-filter-block--cat {
	/*margin-top: 20px;*/
  /* -webkit-flex-direction: column;
  flex-direction: column; */
}

.course-filter-heading {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 6px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  min-width: 4em;
}

.course-filter-label {
  font-size: clamp(14px, 0.16rem, 16px);
  color: #111;
}

.course-filter-bar {
  display: block;
  width: 36px;
  height: 5px;
  background: #0080ff;
  border-radius: 2.5px;
}

.course-filter-tags {
	flex: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: clamp(8px, 0.14rem, 14px);
  -webkit-align-items: center;
  align-items: center;
}

.course-filter-tags--wrap {
  max-width: 100%;
}

.course-tag {
  padding: 4px 2px;
  margin: 0;
  border: none;
  background: none;
  font-size: clamp(13px, 0.16rem, 16px);
  color: #626262;
  cursor: pointer;
  font-family: inherit;
}

.course-tag:hover {
  color: #0080ff;
}

.course-tag--active {
  color: #0080ff;
  font-weight: 500;
  border-bottom: 3px solid #0080ff;
}

.course-sort-row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width: 1409px;
  margin: 0 auto;
  gap: clamp(16px, 0.30rem, 30px);
  margin-top: clamp(12px, 0.22rem, 22px);
  padding-top: clamp(8px, 0.12rem, 12px);
}

.course-sort-btn {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  font-size: clamp(13px, 0.16rem, 16px);
  color: #111;
  cursor: pointer;
  font-family: inherit;
}

.course-sort-caret {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #666;
}

a.course-sort-btn {
  text-decoration: none;
}

.course-sort-btn--active {
  color: #0080ff;
  font-weight: 600;
}

/* 卡片网格：4 列 · 间距约 19px */
.course-grid-wrap {
  padding: clamp(8px, 0.16rem, 16px) 13.28% clamp(24px, 0.40rem, 40px);
}

.course-grid-inner {
  max-width: 1409px;
  margin-left: auto;
  margin-right: auto;
}

.course-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 0.19rem, 19px);
}

.course-card {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.course-card-thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 339 / 226;
  background: #d9d9d9;
}

.course-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.course-card-title {
  margin: 0;
  padding: clamp(12px, 0.20rem, 20px) clamp(14px, 0.20rem, 20px) clamp(6px, 0.10rem, 10px);
  font-size: clamp(15px, 0.28rem, 28px);
  font-weight: 400;
  color: #111;
  line-height: 1.3;
}

.course-card-foot {
  margin-top: auto;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: 0 clamp(14px, 0.20rem, 20px) clamp(14px, 0.20rem, 20px);
  gap: 8px;
}

.course-card-meta {
  margin: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 6px;
  font-size: clamp(12px, 0.14rem, 14px);
  color: #666;
}

.course-card-usericon {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.course-card-btn {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(88px, 1.08rem, 108px);
  height: clamp(32px, 0.38rem, 38px);
  padding: 0 12px;
  border: 1px solid #0080FF;
  color: #0080FF;
  font-size: clamp(12px, 0.14rem, 14px);
  text-decoration: none;
  border-radius: 14px;
  transition: opacity 0.2s;
}

.course-card-btn:hover {
  opacity: 0.9;
}

.nbut {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(88px, 1.08rem, 108px);
  height: clamp(32px, 0.38rem, 38px);
  padding: 0 12px;
  border: 1px solid #0080FF;
  color: #0080FF;
  font-family: inherit;
  font-size: clamp(12px, 0.14rem, 14px);
  text-decoration: none;
  border-radius: 14px;
  transition: opacity 0.2s;
}

.nbut:hover {
  opacity: 0.9;
}

/* 分页 47×36 */
.course-pagination {
  padding: clamp(16px, 0.24rem, 24px) 13.28% clamp(48px, 0.80rem, 80px);
}

.course-page-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  gap: clamp(16px, 0.25rem, 25px);
}

.course-page {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: clamp(40px, 0.47rem, 47px);
  height: clamp(32px, 0.36rem, 36px);
  border-radius: 4px;
  font-size: clamp(16px, 0.26rem, 26px);
  font-weight: 500;
  color: #333;
  font-size: 14px;
  text-decoration: none;
  background: #fff;
  box-sizing: border-box;
}

.course-page:hover {
  border-color: #0080ff;
  color: #0080ff;
}

.course-page--active {
  background: #0080ff;
  border-color: #0080ff;
  color: #fff;
}

@media (max-width: 1200px) {
  .course-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-filter-block {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .course-grid {
    grid-template-columns: 1fr;
  }

  .course-sort-row {
    /*-webkit-flex-direction: column;*/
    /*flex-direction: column;*/
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }
}


/* ── 课程「立即观看」弹窗（Figma 1:873 · 遮罩 + 1420×805 内容区） ── */
body.course-modal-open {
  overflow: hidden;
}

.course-modal[hidden] {
  display: none !important;
}

.course-modal:not([hidden]) {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 3000;
  padding: clamp(12px, 0.24rem, 24px);
  box-sizing: border-box;
}

.course-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.course-modal-panel {
  position: relative;
  z-index: 1;
  width: min(1420px, 100%);
  max-height: min(85vh, 805px);
  border-radius: 8px;
  overflow: visible;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
}

.course-modal-close {
  position: absolute;
  top: clamp(-8px, -0.12rem, -12px);
  right: clamp(-8px, -0.12rem, -12px);
  z-index: 3;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #333;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  transition: background 0.2s;
}

.course-modal-close:hover {
  background: #fff;
}

.course-modal-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1420 / 805;
  max-height: min(85vh, 805px);
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.course-modal-video {
  display: block;
  width: 100%;
  height: 100%;
  max-height: min(85vh, 805px);
  object-fit: contain;
}

@media (max-width: 768px) {
  .course-modal-close {
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    font-size: 24px;
  }

  .course-modal-visual {
    aspect-ratio: 16 / 9;
    max-height: 70vh;
  }
}


/* ================================================================
   16. 案例列表页 .page-cases / .case-*（Figma 1:1025「05案例」· 1920 基准）
================================================================ */

.page-cases {
  background: #fff;
}

.case-main {
  background: #F6F6F6;
  padding-bottom: clamp(32px, 0.50rem, 50px);
}

/* 头图区 382px 高 */
.case-hero {
  position: relative;
  min-height: clamp(220px, 3.82rem, 382px);
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  overflow: hidden;
}

.case-hero-bg {
  position: absolute;
  inset: 0;
}

.case-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.case-hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: clamp(32px, 0.60rem, 60px) 13.28%;
  max-width: 100%;
}

.case-hero-title {
  margin: 0 auto;
  max-width: 12em;
  font-size: clamp(28px, 0.44rem, 44px);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.case-hero-bar {
  width: clamp(80px, 1.26rem, 126px);
  height: clamp(6px, 0.10rem, 10px);
  margin: clamp(16px, 0.28rem, 28px) auto 0;
  background: #0080ff;
  border-radius: 2px;
}

/* 分类条 1409×73 */
.case-toolbar {
  padding: clamp(20px, 0.35rem, 35px) 13.28%;
}

.case-toolbar-inner {
  max-width: 1409px;
  margin-left: auto;
  margin-right: auto;
  min-height: clamp(56px, 0.73rem, 73px);
  border-radius: 10px;
  background: #fff;
  padding: clamp(10px, 0.16rem, 16px) clamp(14px, 0.28rem, 28px);
  box-sizing: border-box;
}

.case-cats {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: center;
  align-items: center;
  gap: clamp(6px, 0.12rem, 12px) clamp(10px, 0.20rem, 20px);
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

.case-cat {
  margin: 0;
  padding: 4px 2px 8px;
  border: none;
  background: none;
  font-size: clamp(13px, 0.16rem, 16px);
  color: #626262;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  line-height: 1.4;
}

.case-cat:hover {
  color: #0080ff;
}

.case-cat--active {
  color: #0080ff;
  font-weight: 500;
}

.case-cat--active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  width: 31px;
  margin-left: auto;
  margin-right: auto;
  background: #0080ff;
  border-radius: 1px;
}

/* 案例卡片网格 430×395 · 列间距 60 · 行间距 32 */
.case-grid-section {
  padding: clamp(16px, 0.30rem, 30px) 13.28% clamp(24px, 0.40rem, 40px);
}

.case-grid-inner {
  max-width: 1409px;
  margin-left: auto;
  margin-right: auto;
}

.case-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 430px));
  gap: clamp(24px, 0.32rem, 32px) clamp(40px, 0.60rem, 60px);
  -webkit-justify-content: center;
  justify-content: center;
}

.case-card {
  margin: 0;
  height: 100%;
}

.case-card-link {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  height: 100%;
  min-height: clamp(340px, 3.95rem, 395px);
  padding: clamp(12px, 0.16rem, 16px);
  border: 1px solid #ebebeb;
  border-radius: 4px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  transition: box-shadow 0.2s;
}

.case-card-link:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* 有演示视频：封面/标题不可点进详情；标签与「立即观看」同一行，无日期 */
.case-card-body {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  height: 100%;
  min-height: clamp(340px, 3.95rem, 395px);
  padding: clamp(12px, 0.16rem, 16px);
  border: 1px solid #ebebeb;
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
  transition: box-shadow 0.2s;
}

.case-card--video .case-card-body:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.case-card-title-link {
  text-decoration: none;
  color: inherit;
}

.case-card-title-link:hover .case-card-title {
  color: #0080ff;
}

.case-card-meta--video {
  margin-top: auto;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  gap: clamp(6px, 0.10rem, 10px);
}

.case-card-meta--video .case-card-tag {
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
}

.case-card-meta--video .case-card-watch-btn {
  margin-top: 0;
  margin-left: auto;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.case-card-media {
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 398 / 232;
  background: #e5e5e5;
}

.case-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-card-title {
  margin: clamp(12px, 0.20rem, 20px) 0 clamp(10px, 0.14rem, 14px);
  font-size: clamp(16px, 0.24rem, 24px);
  font-weight: 500;
  color: #111;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

.case-card-meta {
  margin-top: auto;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
}

.case-card-tag {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  min-width: 70px;
  height: 30px;
  padding: 0 8px;
  box-sizing: border-box;
  font-size: clamp(12px, 0.14rem, 14px);
  color: #0080FF;
  background: rgba(0, 128, 255, 0.2);
  border-radius: 4px;
}

.case-card-date {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 6px;
  font-size: clamp(12px, 0.14rem, 14px);
  color: #666;
  white-space: nowrap;
}

.case-card-clock {
  flex-shrink: 0;
  display: block;
}

/* 分页 */
.case-pager {
  padding: clamp(16px, 0.24rem, 24px) 13.28% clamp(40px, 0.65rem, 65px);
}

.case-pager-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  gap: clamp(16px, 0.25rem, 25px);
}

.case-pager-link {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: clamp(40px, 0.47rem, 47px);
  height: clamp(32px, 0.36rem, 36px);
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: clamp(16px, 0.26rem, 26px);
  font-weight: 500;
  color: #333;
  text-decoration: none;
  background: #fff;
  box-sizing: border-box;
}

.case-pager-link:hover {
  border-color: #0080ff;
  color: #0080ff;
}

.case-pager-link--active {
  background: #0080ff;
  border-color: #0080ff;
  color: #fff;
}

@media (max-width: 1200px) {
  .case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .case-grid {
    grid-template-columns: 1fr;
  }

  .case-cats {
    -webkit-justify-content: center;
    justify-content: center;
  }
}


/* ================================================================
   17. 培训页 .page-training / .training-*（Figma 1:1301「07培训」· 1920 基准）
================================================================ */

.page-training {
  background: #f6f6f6;
}

.training-main {
  background: #f6f6f6;
}

/* ── 顶部介绍（Figma node 35:2 / 1:1301，1920 稿 1:1）── */
.training-intro {
  position: relative;
  padding-top: 81px;
  padding-bottom: 85px;
  overflow: hidden;
  background: url(../img/tranbg.png) no-repeat;
  background-size: cover;
}

.training-intro-bg {
  display: none;
}

.training-intro-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.4;
}

.training-intro-inner {
  position: relative;
  z-index: 1;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  /* 稿：左 256px、右 139px边距（1920 宽） */
  padding-left: 13.33%;
  padding-right: 7.25%;
  box-sizing: border-box;
}

.training-intro-title {
  margin: 0 auto 105px;
  font-size: 64px;
  font-weight: 500;
  color: #000000;
  text-align: center;
  line-height: normal;
  font-family:
    'Source Han Sans CN',
    'Noto Sans SC',
    'PingFang SC',
    'Microsoft YaHei',
    sans-serif;
}

.training-intro-row {
  display: grid;
  grid-template-columns: minmax(0, 703px) minmax(0, 1fr);
  gap: 35px;
  -webkit-align-items: start;
  align-items: start;
}

.training-intro-text {
  max-width: 703px;
  font-size: 16px;
  line-height: 36px;
  color: #363636;
  font-family:
    'Source Han Sans CN',
    'Noto Sans SC',
    'PingFang SC',
    'Microsoft YaHei',
    sans-serif;
}

.training-intro-text p {
  margin: 0 0 36px;
  text-indent: 2em;
}

.training-intro-text p:last-child {
  margin-bottom: 0;
}

.training-intro-visual {
  position: relative;
  width: 100%;
  max-width: 787px;
  min-height: 434px;
  justify-self: end;
  -webkit-align-self: start;
  align-self: start;
}

/* 浅蓝装饰块：稿 405×345、圆角 15px，相对团队图下移约 152px 与右对齐 */
.training-intro-accent {
  position: absolute;
  z-index: 0;
  width: 405px;
  height: 345px;
  max-width: 51.5%;
  background: #8bbcec;
  border-radius: 15px;
  right: 0;
  top: 152px;
}

.training-intro-photo {
  position: relative;
  z-index: 1;
  width: 787px;
  max-width: 100%;
  margin-left: auto;
  margin-right: 0;
}

.training-intro-photo-img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
  object-fit: cover;
  -webkit-mask-image: url('../img/training-team-mask-figma.svg');
  mask-image: url('../img/training-team-mask-figma.svg');
  -webkit-mask-size: 671px 434px;
  mask-size: 671px 434px;
  -webkit-mask-position: 0 3px;
  mask-position: 0 3px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ── 章节标题「课程」「师资」 ── */
.training-section-inner {
  /* max-width: 1409px;
  margin-left: auto;
  margin-right: auto; */
  padding-left: 13.28%;
  padding-right: 13.28%;
}

.training-section-title {
  margin: 0 auto clamp(28px, 0.48rem, 48px);
  font-size: clamp(28px, 0.44rem, 44px);
  font-weight: 700;
  color: #000;
  text-align: center;
  line-height: 1.2;
}

/* ── 课程网格 ── */
.training-courses {
  padding-top: clamp(48px, 0.90rem, 90px);
  padding-bottom: clamp(24px, 0.40rem, 40px);
}

.training-course-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 430px));
  gap: clamp(24px, 0.32rem, 32px) clamp(40px, 0.60rem, 60px);
  -webkit-justify-content: center;
  justify-content: center;
}

.training-course-card {
  margin: 0;
  height: 100%;
}

.training-course-link {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  height: 100%;
  min-height: clamp(340px, 3.95rem, 395px);
  padding: clamp(12px, 0.16rem, 16px);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  transition: box-shadow 0.2s;
}

.training-course-link:hover {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

/* 有演示视频：封面/标题不可点外链；标签与「立即观看」同行，不显示观看人数 */
.training-course-link--video {
  cursor: default;
}

.training-course-meta--video {
  margin-top: auto;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  gap: clamp(6px, 0.10rem, 10px);
}

.training-course-meta--video .training-course-tag {
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
}

.training-course-meta--video .training-course-watch-btn {
  margin-top: 0;
  margin-left: auto;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.training-course-media {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 414 / 231;
  background: #e8e8e8;
}

.training-course-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.training-course-name {
  margin: clamp(14px, 0.20rem, 20px) 0 clamp(10px, 0.12rem, 12px);
  font-size: clamp(18px, 0.32rem, 32px);
  font-weight: 500;
  color: #282828;
  line-height: 1.3;
  text-align: center;
}

.training-course-meta {
  margin-top: auto;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  gap: 8px;
}

.training-course-watch {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: clamp(8px, 0.12rem, 12px);
  flex-shrink: 0;
}

.training-course-watch .course-card-meta {
  margin: 0;
}

.training-course-tag {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  min-width: 70px;
  height: 30px;
  padding: 0 6px;
  box-sizing: border-box;
  font-size: clamp(12px, 0.14rem, 14px);
  font-weight: 500;
  color: #0080ff;
  background: rgba(0, 128, 255, 0.2);
  border-radius: 3px;
}

.training-course-date {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 6px;
  font-size: clamp(12px, 0.14rem, 14px);
  color: #9d9d9d;
  white-space: nowrap;
}

.training-course-clock {
  flex-shrink: 0;
}

.training-pager {
  padding: clamp(20px, 0.35rem, 35px) 0 clamp(8px, 0.16rem, 16px);
}

.training-pager-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  gap: clamp(16px, 0.25rem, 25px);
}

.training-pager-link {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: clamp(40px, 0.47rem, 47px);
  height: clamp(32px, 0.36rem, 36px);
  border-radius: 5px;
  border: 1px solid #ddd;
  background: #fff;
  font-size: clamp(12px, 0.14rem, 14px);
  font-weight: 500;
  color: #aaa;
  text-decoration: none;
  box-sizing: border-box;
}

.training-pager-link:hover {
  border-color: #0080ff;
  color: #0080ff;
}

.training-pager-link--active {
  background: #fff;
  border-color: #e0e0e0;
  color: #0080ff;
}

/* ── 师资（Figma node 37:4 · Swiper，与 .hp-experts 同卡尺寸） ── */
.training-faculty {
  background: #ffffff;
  padding-top: 40px;
  padding-bottom: 60px;
}

.training-faculty-inner {
  box-sizing: border-box;
}

.training-faculty-head {
  text-align: center;
  margin-bottom: 111px;
}
.mt30{
	margin-top: 30px;
}
.training-faculty-heading {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  color: #000000;
  line-height: normal;
  font-family:
    'Source Han Sans CN',
    'Noto Sans SC',
    'PingFang SC',
    'Microsoft YaHei',
    sans-serif;
}

.training-faculty-swiper-wrap {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.training-faculty-swiper {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.training-faculty-swiper.swiper {
  margin-left: 0;
  margin-right: 0;
}

.training-faculty-swiper .swiper-slide {
  width: 4.24rem;
  max-width: 424px;
  height: 4.49rem;
  max-height: 449px;
  box-sizing: border-box;
}

/* 培训页师资简介最多 3 行，超出省略（不影响首页 .hp-experts） */
.training-faculty .hp-expert-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-height: 0;
}

/* 分页：稿中激活条 104×20圆角 10，未激活 20 圆 */
.training-faculty-pagination.swiper-pagination {
  position: relative;
  margin-top: 30px;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px;
}

.training-faculty-pagination .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  margin: 0 !important;
  opacity: 1;
  background: rgba(0, 128, 255, 0.28);
  border-radius: 50%;
}

.training-faculty-pagination .swiper-pagination-bullet-active {
  width: 104px;
  height: 20px;
  border-radius: 10px;
  background: #0080ff;
}

@media (max-width: 1200px) {
  .training-intro {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .training-intro-inner {
    padding-left: 13.28%;
    padding-right: 13.28%;
  }

  .training-intro-title {
    font-size: 48px;
    margin-bottom: 48px;
  }

  .training-intro-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .training-intro-text {
    max-width: none;
  }

  .training-intro-visual {
    max-width: 787px;
    min-height: 0;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
  }

  .training-intro-accent {
    top: 20%;
    max-width: 55%;
    height: 280px;
  }

  .training-intro-photo {
    width: 100%;
  }

  .training-intro-photo-img {
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
    -webkit-mask-position: center top;
    mask-position: center top;
  }

  .training-course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .training-faculty-head {
    margin-bottom: 48px;
  }

  .training-faculty-heading {
    font-size: 36px;
  }

  .training-faculty-swiper .swiper-slide {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .training-course-grid {
    grid-template-columns: 1fr;
  }

  .training-intro {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .training-intro-title {
    font-size: 28px;
    margin-bottom: 28px;
  }

  .training-intro-text {
    font-size: 15px;
    line-height: 28px;
  }

  .training-intro-text p {
    margin-bottom: 20px;
  }

  .training-intro-accent {
    width: 70%;
    max-width: none;
    height: 200px;
    top: 25%;
  }

  .training-intro-photo-img {
    -webkit-mask-image: none;
    mask-image: none;
    border-radius: 15px;
  }

  .training-faculty-head {
    margin-bottom: 32px;
  }

  .training-faculty-heading {
    font-size: 28px;
  }

  .training-faculty {
    padding-top: 32px;
    padding-bottom: 48px;
  }
}


/* ================================================================
   18. 招聘页 .page-recruit / .recruit-*（Figma 1:1765「09招聘」· 1920 基准）
================================================================ */

.page-recruit {
  background: #f6f6f6;
}

.recruit-main {
  background: #f6f6f6;
  padding-bottom: clamp(32px, 0.50rem, 50px);
}

.recruit-list-section {
  padding-top: clamp(28px, 0.49rem, 49px);
}

.recruit-list-inner {
  /* max-width: 1410px;
  margin-left: auto;
  margin-right: auto; */
  padding-left: 13.28%;
  padding-right: 13.28%;
}

.recruit-card {
  margin-bottom: clamp(20px, 0.28rem, 28px);
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.recruit-card-toggle {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  gap: clamp(12px, 0.20rem, 20px);
  width: 100%;
  min-height: clamp(120px, 1.65rem, 165px);
  padding: clamp(16px, 0.20rem, 20px) clamp(16px, 0.34rem, 34px);
  border: none;
  background: #fff;
  cursor: pointer;
  font: inherit;
  text-align: left;
  box-sizing: border-box;
}

.recruit-card-toggle:hover {
  background: #fafafa;
}

.recruit-card-text {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: clamp(8px, 0.10rem, 10px);
  min-width: 0;
  -webkit-flex: 1;
  flex: 1;
}

.recruit-card-title {
  font-size: clamp(20px, 0.32rem, 32px);
  font-weight: 500;
  color: #000;
  line-height: 1.3;
}

.recruit-meta-line,
.recruit-meta-sub {
  display: block;
  font-size: clamp(14px, 0.16rem, 16px);
  color: #666;
  line-height: 1.5;
}

.recruit-meta-sub {
  font-size: clamp(13px, 0.16rem, 16px);
}

.recruit-meta-line .recruit-meta-sep,
.recruit-meta-sub .recruit-meta-sep {
  display: inline-block;
  padding: 0 0.35em;
  color: #c2c2c2;
  font-size: clamp(12px, 0.14rem, 14px);
}

.recruit-chevron {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width: clamp(22px, 0.24rem, 24px);
  height: clamp(22px, 0.24rem, 24px);
  margin-top: 4px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  box-sizing: border-box;
}

.recruit-chevron::before {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  margin-top: -3px;
}

.recruit-card--open .recruit-chevron::before {
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  margin-top: 4px;
}

.recruit-panel[hidden] {
  display: none;
}

.recruit-panel-inner {
  padding: 0 clamp(16px, 0.43rem, 43px) clamp(24px, 0.40rem, 40px);
}

.recruit-desc-head {
  margin-bottom: clamp(10px, 0.12rem, 12px);
}

.recruit-desc-title {
  margin: 0;
  font-size: clamp(18px, 0.24rem, 24px);
  font-weight: 700;
  color: #141c23;
  line-height: 1.3;
}

.recruit-desc-bar {
  width: 54px;
  height: 5px;
  margin-top: clamp(24px, 0.44rem, 44px);
  background: #0080ff;
  border-radius: 2.5px;
}

.recruit-desc-body {
  font-size: clamp(13px, 0.14rem, 14px);
  line-height: 30px;
  color: #333;
  max-width: 1324px;
}

.recruit-desc-body p {
  margin: 0 0 0.15em;
}

.recruit-desc-label {
  margin-top: 0.5em;
  margin-bottom: 0.15em;
  font-weight: 500;
  font-size: clamp(13px, 0.14rem, 14px);
}

.recruit-desc-body .recruit-desc-label:first-child {
  margin-top: 0;
}

.recruit-apply-line {
  margin-top: 0.5em;
  font-weight: 500;
}

.recruit-mail {
  color: #0080ff;
  text-decoration: underline;
}

.recruit-mail:hover {
  opacity: 0.9;
}

.recruit-pager {
  padding: clamp(28px, 0.40rem, 40px) 0 0;
}

.recruit-pager-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  gap: clamp(16px, 0.25rem, 25px);
}

.recruit-pager-link {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: clamp(40px, 0.47rem, 47px);
  height: clamp(32px, 0.36rem, 36px);
  border-radius: 5px;
  border: 1px solid #e0e0e0;
  background: #fff;
  font-size: clamp(12px, 0.14rem, 14px);
  font-weight: 500;
  color: #aaa;
  text-decoration: none;
  box-sizing: border-box;
}

.recruit-pager-link:hover {
  border-color: #0080ff;
  color: #0080ff;
}

.recruit-pager-link--active {
  color: #0080ff;
  border-color: #e0e0e0;
  background: #fff;
}

@media (max-width: 768px) {
  .recruit-card-toggle {
    -webkit-flex-direction: column;
    flex-direction: column;
  }

  .recruit-chevron {
    margin-top: 0;
    -webkit-align-self: flex-end;
    align-self: flex-end;
  }

  .recruit-meta-line,
  .recruit-meta-sub {
    word-break: break-word;
  }
}


/* ================================================================
   19. 联系我们页 .page-contact / .contact-*（Figma 1:1861「10联系我们」· 1920 基准）
================================================================ */

.page-contact {
  background: #f6f6f6;
}

/* 「联系我们」导航项指示条加宽 66px（稿） */
.page-contact .nav-list-item--contact.nav-list-item--active::after {
  width: clamp(36px, 0.66rem, 66px);
}

.contact-main {
  background: #f6f6f6;
  padding-bottom: clamp(48px, 0.80rem, 80px);
}

/* 头图区 641px 高，背景图 + 暗化 */
.contact-hero {
  position: relative;
  min-height: clamp(280px, 6.41rem, 641px);
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  overflow: hidden;
}

.contact-hero-media {
  position: absolute;
  inset: 0;
}

.contact-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.7;
}

.contact-hero-scrim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.35;
  pointer-events: none;
}

.contact-hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: clamp(48px, 1.23rem, 123px) 13.28% clamp(32px, 0.60rem, 60px);
}

.contact-hero-title {
  margin: 0 auto;
  font-size: clamp(28px, 0.58rem, 58px);
  font-weight: 500;
  color: #fff;
  line-height: 1.2;
}

.contact-hero-bar {
  width: clamp(80px, 1.26rem, 126px);
  height: clamp(8px, 0.10rem, 10px);
  margin: clamp(20px, 0.25rem, 25px) auto 0;
  background: #fff;
  border-radius: 11.5px;
}

/* 上浮白卡片 1533×722 · 圆角 30 · 阴影 */
.contact-card-outer {
  /* max-width: 1533px;
  margin-left: auto;
  margin-right: auto; */
  padding: 0 13.28%;
  margin-top: clamp(-200px, -2.28rem, -228px);
  position: relative;
  z-index: 2;
}

.contact-card {
  background: #fff;
  border-radius: 30px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
  display: grid;
  grid-template-columns: minmax(0, 810px) minmax(280px, 1fr);
  gap: clamp(20px, 0.32rem, 32px);
  padding: clamp(32px, 0.62rem, 62px) clamp(24px, 0.62rem, 62px) clamp(40px, 0.72rem, 72px);
  box-sizing: border-box;
  -webkit-align-items: start;
  align-items: start;
}

.contact-card-visual {
  min-width: 0;
}

.contact-card-photo {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(90vw, 565px);
  object-fit: cover;
  object-position: center;
  /* -webkit-mask-image: url('../img/contact-image-mask.png');
  mask-image: url('../img/contact-image-mask.png');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center; */
}

.contact-card-aside {
  min-width: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: stretch;
  align-items: stretch;
  gap: clamp(36px, 0.55rem, 55px);
}

.contact-aside-section {
  margin: 0;
  padding: 0;
}

.contact-aside-heading {
  margin: 0 0 clamp(14px, 0.22rem, 22px);
  font-size: clamp(22px, 0.36rem, 36px);
  font-weight: 700;
  color: #000;
  line-height: 1.25;
}

.contact-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: clamp(14px, 0.16rem, 16px);
  line-height: 36px;
  color: #000;
}

.contact-info-item {
  margin: 0;
  padding: 0;
}

.contact-info-mail {
  color: #0080ff;
  text-decoration: underline;
}

.contact-info-mail:hover {
  opacity: 0.9;
}

/* 两列二维码：顶对齐，避免 flex-end 导致说明文字高低不齐 */
.contact-qr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 0.32rem, 32px) clamp(24px, 1.20rem, 80px);
  width: 100%;
  max-width: 520px;
}

.contact-qr-cell {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
  min-width: 0;
}

.contact-qr-thumb {
  display: block;
  width: 100%;
  max-width: 205px;
  margin: 0 auto;
  border-radius: 4px;
 /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); */
  line-height: 0;
  background: #fff;
  overflow: hidden;
}

.contact-qr-thumb--round {
  max-width: 217px;
  border-radius: 50%;
}

.contact-qr-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.contact-qr-img--douyin {
  /* 与左侧方块码视觉重量接近 */
  max-width: 217px;
}

.contact-qr-label {
  margin: clamp(12px, 0.18rem, 18px) 0 0;
  padding: 0 4px;
  font-size: clamp(15px, 0.20rem, 20px);
  line-height: 1.45;
  color: #000;
}

@media (max-width: 1200px) {
  .contact-card {
    grid-template-columns: 1fr;
  }

  .contact-card-outer {
    margin-top: clamp(-120px, -12vw, -80px);
  }

  .contact-qr-grid {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
	.prod-partners-h{
		margin-bottom: 20px;
	}
  .partner1{
	margin-top: 10px;
	  width: calc((100% - 20px)/3);
  	margin-right: 10px;
  }
  .hp-download-copy{
	  flex: unset;
  }
  .partner1:nth-child(7n){
  	margin-right: 10px;
  }
  .partner1:nth-child(3n){
  	margin-right: 0;
  }
  .contact-hero {
    min-height: clamp(220px, 50vw, 400px);
  }

  .contact-card {
    border-radius: 20px;
    padding: clamp(20px, 0.32rem, 32px);
  }

  .contact-card-photo {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
    border-radius: 16px;
  }

  .contact-qr-grid {
    grid-template-columns: 1fr;
    max-width: 280px;
  }
  .prod-value-copy{
	  margin-top: 20px;
  }
  .prod-value-title{
	  font-size: 20px;
  }
  .prod-value-bar{
	  width: 120px;
  }
  .prod-value{
	  padding: 0;
	  margin-top: 20px;
  }
  .prod-fcard-title{
	  font-size: 18px;
  }
  .nav-inner,
  .hero-inner,
  .article-inner,
  .footer-inner {
    padding-left: 5%;
    padding-right: 5%;
  }
  .training-intro-inner,
  .training-section-inner {
    padding-left: 5%;
    padding-right: 5%;
  }

  .page-teacher-detail .td-inner {
    padding-left: 5%;
    padding-right: 5%;
  }
}


/* ================================================================
   师资详情页 .page-teacher-detail / .td-*（Figma 1:1510「08师资详情」· 1920）
================================================================ */

.page-teacher-detail {
  background: #f6f6f6;
}

.td-main {
  background: #f6f6f6;
}

.td-inner {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  padding: 68px 13.28% 80px;
  box-sizing: border-box;
}

.td-profile {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  gap: 42px;
}

.td-profile-visual {
  position: relative;
  margin: 0;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 509px;
  max-width: 100%;
  height: 539px;
  border-radius: 15px;
  overflow: hidden;
}

.td-profile-visual-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.td-profile-visual-person {
  position: absolute;
  right: 6%;
  bottom: 0;
  width: 63.5%;
  height: auto;
  max-height: 92%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}

.td-profile-body {
  -webkit-flex: 1 1 280px;
  flex: 1 1 280px;
  min-width: 0;
  max-width: 857px;
}

.td-profile-name {
  margin: 0;
  font-size: 64px;
  font-weight: 500;
  color: #000000;
  line-height: normal;
  font-family:
    'Source Han Sans CN',
    'Noto Sans SC',
    'PingFang SC',
    'Microsoft YaHei',
    sans-serif;
}

.td-profile-accent {
  width: 123px;
  height: 10px;
  margin-top: 61px;
  background: #0080ff;
  border-radius: 5px;
}

.td-profile-bio {
  margin-top: 30px;
  max-width: min(36em, 100%);
  width: 100%;
  box-sizing: border-box;
  font-size: 20px;
  line-height: 40px;
  color: #000000;
  font-family:
    'Source Han Sans CN',
    'Noto Sans SC',
    'PingFang SC',
    'Microsoft YaHei',
    sans-serif;
}

.td-profile-bio p {
  margin: 0;
}

.td-profile-bio-spacer {
  min-height: 40px;
  line-height: 40px;
  font-size: 20px;
}

.td-course-tab {
  margin-top: 63px;
  width: 100%;
  max-width: 1410px;
  background: #cbe5ff;
  height: 82px;
  box-sizing: border-box;
}

.td-course-tab-track {
  height: 100%;
  position: relative;
}

.td-course-tab-active {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 211px;
  height: 82px;
  padding-left: 12px;
  background: #0080ff;
}

.td-course-tab-line {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width: 9px;
  height: 33px;
  background: #ffffff;
  border-radius: 4.5px;
}

.td-course-tab-label {
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  color: #ffffff;
  line-height: 40px;
  font-family:
    'Source Han Sans CN',
    'Noto Sans SC',
    'PingFang SC',
    'Microsoft YaHei',
    sans-serif;
}

@media (max-width: 1200px) {
  .td-inner {
    padding-top: 48px;
    padding-bottom: 60px;
  }

  .td-profile {
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    gap: 32px;
  }

  .td-profile-body {
    max-width: 100%;
  }

  .td-profile-name {
    font-size: 48px;
    text-align: center;
  }

  .td-profile-accent {
    margin-left: auto;
    margin-right: auto;
  }

  .td-profile-bio {
    font-size: 18px;
    line-height: 36px;
  }

  .td-profile-bio-spacer {
    min-height: 36px;
    line-height: 36px;
    font-size: 18px;
  }

  .td-course-tab-label {
    font-size: 26px;
  }
}

@media (max-width: 768px) {
  .td-inner {
    padding-top: 32px;
    padding-bottom: 48px;
  }

  .td-profile-visual {
    width: 100%;
    height: auto;
    min-height: 280px;
    aspect-ratio: 509 / 539;
  }

  .td-profile-name {
    font-size: 32px;
  }

  .td-profile-bio {
    font-size: 16px;
    line-height: 28px;
  }

  .td-profile-bio-spacer {
    min-height: 28px;
    line-height: 28px;
    font-size: 16px;
  }

  .td-course-tab {
    height: auto;
    min-height: 64px;
  }

  .td-course-tab-active {
    width: 100%;
    max-width: 211px;
    height: 64px;
  }

  .td-course-tab-label {
    font-size: 22px;
    line-height: 1.2;
  }
  
  .hp-features-panel {
    margin-left: 5%;
    margin-right: 5%;
  }
  .hp-product-row {
    padding: 0 5%;
  }
  .hp-product-tabs {
    padding: 0 5%;
  }
  
  .hp-product-tabs {
    padding-left: 5%;
    padding-right: 5%;
  }
  
  .hp-experts {
    padding-left: 5%;
    padding-right: 5%;
  }
  .ptkc {
    padding-left: 5%;
    padding-right: 5%;
  }
  
  .hp-download-inner {
    padding-left: 5%;
    padding-right: 5%;
  }
  
  .prod-h1 {
    padding-left: 5%;
    padding-right: 5%;
  }
  
  .prod-inner {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
  
  .course-toolbar {
    padding-left: 5%;
    padding-right: 5%;
  }
  
  .course-grid-wrap {
    padding-left: 5%;
    padding-right: 5%;
  }
  
  .course-pagination {
    padding-left: 5%;
    padding-right: 5%;
  }
  
  .case-hero-inner,
  .case-toolbar,
  .case-grid-section,
  .case-pager {
    padding-left: 5%;
    padding-right: 5%;
  }
  
  
  .recruit-list-inner {
    padding-left: 5%;
    padding-right: 5%;
  }
  
  .contact-hero-inner {
    padding-left: 5%;
    padding-right: 5%;
  }
  
  .contact-card-outer {
    padding-left: 5%;
    padding-right: 5%;
  }
  
}


/* ================================================================
   全站页面动画与交互（配合 js/site-animations.js）
   — prefers-reduced-motion 下自动降级为静态
================================================================ */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.nav {
  transition:
    box-shadow 0.35s ease,
    background-color 0.35s ease;
}

.nav.nav--scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* 滚动显现：在 JS 打上 anim-ready 前保持可见，避免闪烁 */
.reveal-scroll {
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal-scroll.is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.anim-ready .reveal-scroll:not(.is-inview) {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal-scroll,
  html.anim-ready .reveal-scroll:not(.is-inview) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }

  .nav {
    transition: none;
  }
}

/* 导航链接、主按钮微过渡 */
.nav-link {
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

.footer a,
.footer-contact-link {
  transition: color 0.2s ease, opacity 0.2s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .course-card {
    transition:
      transform 0.35s ease,
      box-shadow 0.35s ease;
  }

  .course-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 80, 180, 0.12);
  }

  .course-card-thumb img {
    transition: transform 0.45s ease;
  }

  .course-card:hover .course-card-thumb img {
    transform: scale(1.03);
  }

  .case-card {
    transition:
      transform 0.35s ease,
      box-shadow 0.35s ease;
  }

  .case-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
  }

  .hp-expert-card-inner {
    transition:
      transform 0.35s ease,
      box-shadow 0.35s ease;
  }

  .hp-expert-card:hover .hp-expert-card-inner {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(0, 80, 180, 0.12);
  }

  .contact-card {
    transition:
      transform 0.35s ease,
      box-shadow 0.35s ease;
  }

  .contact-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
  }

  .hp-btn-primary,
  .hp-btn-product-primary,
  .hp-download-cta {
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease,
      opacity 0.2s ease;
  }

  .hp-btn-primary:active,
  .hp-btn-product-primary:active,
  .hp-download-cta:active {
    transform: scale(0.98);
  }
}