/* ==========================================================================
   page.css — 首页业务样式（1920 设计稿，1rem = 100 设计像素）
   ========================================================================== */

/* ===========================  共用：区块标题  =========================== */
.head { position: relative; }
.head-en {
  position: relative;
  /* 自成层叠上下文：这样 ::before 的 z-index:-1 只落到本元素内部，
     红块会藏在文字下面，又不会掉到 section 背景之后 */
  isolation: isolate;
  font-family: var(--ff-en);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: 0.002em;
  color: var(--c-primary);
}
/* 红色斜块：位于文字左上角，但在字母「下面」（PSD 里白字压红块） */
.head-en::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.13rem;
  top: 0.03rem;
  width: 0.41rem;
  height: 0.43rem;
  background: var(--c-accent);
  clip-path: polygon(37% 0, 100% 0, 63% 100%, 0 100%);
}
.head-cn {
  margin-top: 0.16rem;
  font-size: var(--fs-h2);
  line-height: 1;
  font-weight: 400;
  color: var(--c-ink);
}

/* ===========================  头部导航  =========================== */
.header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 30;
  color: var(--c-white);
}
.header-inner {
  display: flex;
  align-items: center;
  height: 1rem;
}
.logo {
  flex: none;
  width: 1.33rem;
  height: 0.56rem;
}
.logo img { width: 100%; height: 100%; }

.main-nav {
  display: flex;
  justify-content: space-between;
  width: 9.25rem;
  margin-left: 3.23rem;
  font-size: var(--fs-body);
}
/* 每一项撑满 header 高度：hover 从文字下移进下拉时不会「掉出去」 */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 1rem;
}
.nav-link {
  position: relative;
  padding-block: 0.18rem;
  color: var(--c-white-70);
  transition: color 0.2s ease;
  white-space: nowrap;
}
.nav-link:hover,
.nav-link.is-active { color: var(--c-white); }
.nav-item.is-open > .nav-link { color: var(--c-white); }

/* 二级下拉：白卡 + 顶部主色细条，默认收起不占布局 */
.nav-drop {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 1.86rem;
  padding: 0.1rem;
  border-radius: 0 0 0.06rem 0.06rem;
  background: var(--c-white);
  box-shadow: 0 0.16rem 0.4rem rgba(6, 18, 32, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.06rem);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  pointer-events: none;
}
.nav-drop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0.02rem;
  background: var(--c-primary);
}
.nav-drop a {
  display: block;
  padding: 0.1rem 0.16rem;
  border-radius: 0.04rem;
  font-size: var(--fs-sm);
  line-height: 1.2;
  color: var(--c-ink-2);
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-drop a:hover,
.nav-drop a:focus-visible {
  background: #f2f6fc;
  color: var(--c-primary);
}
/* 当前所在子页（如企业文化页的下拉里）用主色 + 左侧竖条标出 */
.nav-drop a.is-current {
  position: relative;
  color: var(--c-primary);
  font-weight: 500;
  background: #f7faff;
}
.nav-drop a.is-current::before {
  content: "";
  position: absolute;
  left: 0.05rem;
  top: 50%;
  width: 0.02rem;
  height: 0.16rem;
  margin-top: -0.08rem;
  border-radius: 0.01rem;
  background: var(--c-primary);
}
/* 长下拉（产品中心 6 项、关于智仁 7 项）也走一列，逐条往下排 */
.nav-drop--grid {
  min-width: 1.86rem;
}
/* 原来这里把最后两项（联系我们 / 关于智仁）的下拉改成 right:0 右对齐，
   结果「关于智仁」的下拉左缘跑到 1353、和菜单文字（1467）差了 114px，
   和其余 5 个菜单左对齐的样子对不上。实测左对齐后右缘最深也只到 1653（1920 视口），
   1025~1920 全程不会溢出，所以去掉这条，统一 left:0。 */

/* 只对「下拉里真有链接」的栏目(由 main.js 打 has-drop 标)开放显示；
   否则 :focus-within 会让联系我们这类空下拉在点击后露出一个空白框 */
.nav-item.has-drop.is-open > .nav-drop,
.nav-item.has-drop:focus-within > .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.header.is-solid {
  position: fixed;
  background: rgba(10, 18, 33, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.header-tools {
  display: flex;
  align-items: center;
  margin-left: auto;
}

/* 移动端汉堡按钮 / 抽屉关闭按钮：桌面端不出现 */
.nav-toggle,
.nav-close { display: none; }
.search-btn {
  width: 0.19rem;
  height: 0.19rem;
  opacity: 0.9;
}
.search-btn:hover { opacity: 1; }
.search-btn img { width: 100%; height: 100%; }

.lang {
  position: relative;
  margin-left: 0.25rem;
}
.lang-btn {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  width: 1.04rem;
  height: 0.46rem;
  padding-inline: 0.16rem;
  border-radius: var(--radius-pill);
  background: var(--c-white-14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 0.22s ease;
}
.lang-btn:hover { background: rgba(255, 255, 255, 0.24); }
.lang-globe { width: 0.21rem; height: 0.21rem; }
.lang-label { font-size: var(--fs-sm); line-height: 1; }
.lang-btn .caret {
  width: 0.1rem;
  height: 0.07rem;
  margin-left: auto;
  transition: transform 0.25s ease;
}
.lang.is-open .lang-btn .caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.12rem);
  min-width: 1.42rem;
  padding: 0.1rem;
  border-radius: 0.06rem;
  background: var(--c-white);
  box-shadow: 0 0.12rem 0.36rem rgba(0, 0, 0, 0.18);
  color: var(--c-ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.06rem);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 40;
}
.lang.is-open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.lang-menu a {
  display: block;
  padding: 0.1rem 0.14rem;
  border-radius: 0.04rem;
  font-size: var(--fs-sm);
  line-height: 1.2;
  white-space: nowrap;
}
.lang-menu a:hover { background: #f2f6fc; }
.lang-menu a.is-active { color: var(--c-primary); }

/* 搜索面板 */
.search-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding-block: 0.32rem 0.26rem;
  background: rgba(8, 17, 30, 0.96);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.3);
  color: var(--c-white);
  animation: panelIn 0.24s ease;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(-0.08rem); }
  to { opacity: 1; transform: none; }
}
.search-form {
  display: flex;
  align-items: center;
  gap: 0.16rem;
  height: 0.62rem;
  padding-inline: 0.2rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.31rem;
  background: rgba(255, 255, 255, 0.1);
  transition: border-color 0.22s ease, background-color 0.22s ease;
}
.search-form:focus-within {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.14);
}
.search-form__ico { width: 0.22rem; height: 0.22rem; opacity: 0.7; }
.search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  outline: none;
  color: var(--c-white);
  font-family: inherit;
  font-size: var(--fs-body);
  -webkit-appearance: none;
  appearance: none;
}
.search-input::placeholder { color: rgba(255, 255, 255, 0.45); }
.search-input::-webkit-search-cancel-button { display: none; }
.search-submit {
  flex: none;
  height: 0.44rem;
  line-height: 0.44rem;
  padding-inline: 0.28rem;
  border-radius: 0.22rem;
  background: var(--c-primary);
  color: var(--c-white);
  font-size: var(--fs-sm);
  transition: background-color 0.22s ease;
  cursor: pointer;
}
.search-submit:hover { background: #0a6ecb; }
.search-close {
  position: relative;
  flex: none;
  width: 0.3rem;
  height: 0.3rem;
  opacity: 0.6;
  transition: opacity 0.22s ease;
}
.search-close:hover { opacity: 1; }
.search-close span::before,
.search-close span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.18rem;
  height: 1px;
  background: var(--c-white);
}
.search-close span::before { transform: translate(-50%, -50%) rotate(45deg); }
.search-close span::after { transform: translate(-50%, -50%) rotate(-45deg); }
.search-hot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem 0.22rem;
  margin-top: 0.2rem;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.45);
}
.search-hot__label { color: rgba(255, 255, 255, 0.55); }
.search-hot a {
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.2s ease;
}
.search-hot a:hover { color: var(--c-white); }

/* ===========================  Banner  =========================== */
.hero {
  position: relative;
  height: var(--h-hero);
  overflow: hidden;
  background: #0b1523;
  color: var(--c-white);
}
.hero-media { position: absolute; inset: 0; }
/* <picture> 默认是 inline，会让里面的 img 变成行内替换元素、上下 margin 失效，
   统一按块级处理，尺寸仍由下面的 img 规则决定 */
.hero-media picture { display: block; }
.hero-media img {
  width: 100%;
  height: 10.64rem;
  margin-top: -0.3rem;
  object-fit: cover;
  object-position: 50% 40%;
  will-change: transform;
}
/* Ken Burns：当前 banner 随播放缓慢放大，时长与 autoplay 间隔（6s）对齐 */
.hero-media.is-zooming img {
  animation: heroZoom 6.2s ease-out forwards;
}
@keyframes heroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-media.is-zooming img { animation: none; }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  /* 设计稿为整层 30% 压暗，保证白字可读 */
  background: rgba(4, 12, 22, 0.3);
}
.hero-swiper .swiper-wrapper { height: 100%; }
/* 无 JS / Swiper 未就绪时只显示首张，避免所有 banner 竖排 */
.hero-swiper:not(.swiper-initialized) .swiper-slide ~ .swiper-slide { display: none; }
.hero-slide {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.hero-inner { position: absolute; inset: 0; }
.hero-ui {
  position: absolute;
  inset: 0;
  /* swiper-wrapper 自带 z-index:1，控制条需压在其上 */
  z-index: 2;
  pointer-events: none;
}
.hero-ui > * { pointer-events: auto; }
.hero-title--alt::before { display: none; }
.hero-copy {
  position: absolute;
  left: 0;
  right: 0;
  top: 5.16rem;
}
.hero-title {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-size: var(--fs-hero);
  line-height: 0.97rem; /* PSD 两行基线间距 97（528→625） */
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 0.04rem 0.24rem rgba(0, 0, 0, 0.28);
}
/* 红色斜块：压在「技」字左上角 */
.hero-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0rem;
  top: -0.09rem;
  width: 0.43rem;
  height: 0.46rem;
  background: var(--c-accent);
  clip-path: polygon(29% 0, 100% 0, 71% 100%, 0 100%);
}
.hero-sub {
  margin-top: 0.39rem;
  font-size: var(--fs-h3);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.hero-en {
  margin-top: 0.06rem;
  font-size: var(--fs-body);
  line-height: 1;
  letter-spacing: 0.07em;
  color: var(--c-white-70);
}

/* 分页指示器
   设计稿（PSD x 758~1135）：4 个标记 + 3 组虚线点，步距 120。
   标记不是正方框，而是「斜切的平行四边形」：上下边各 24 宽、整体斜移 6（≈14°），
   外框 24×24 只描当前项，内块 8×8 四张都一样大。 */
.hero-progress {
  position: absolute;
  left: calc(50% - 0.08rem);
  top: 8.60rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.09rem;
}
.pg-dash {
  width: 0.72rem;
  height: 0.02rem;
  /* PSD 是 2px 小方点、10px 步距 */
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.85) 0 0.02rem,
    rgba(255, 255, 255, 0) 0.02rem 0.1rem
  );
}
/* 每个标记占 0.30×0.24 的格子（斜切后的外接框），内外同角度斜切 */
.pg {
  position: relative;
  display: grid;
  place-items: center;
  width: 0.30rem;
  height: 0.24rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
/* 外框：只有当前项描边 */
.pg::before {
  content: "";
  position: absolute;
  left: 0.03rem;
  top: 0;
  width: 0.24rem;
  height: 0.24rem;
  border: 1px solid transparent;
  transform: skewX(-14deg);
  transition: border-color 0.28s ease;
  pointer-events: none;
}
.pg span {
  display: block;
  width: 0.08rem;
  height: 0.08rem;
  background: rgba(255, 255, 255, 0.88);
  transform: skewX(-14deg);
  transition: background-color 0.28s ease, transform 0.28s ease;
}
.pg:hover span,
.pg:focus-visible span { background: var(--c-white); transform: skewX(-14deg) scale(1.18); }
.pg.is-active::before { border-color: var(--c-white); }
.pg.is-active span { background: var(--c-white); }

/* 左右切换按钮 */
.hero-arrows {
  position: absolute;
  right: 0;
  top: 8.43rem;
  display: flex;
  gap: 0.08rem;
}
.hero-arrow {
  position: relative;
  display: grid;
  place-items: center;
  width: 0.58rem;
  height: 0.58rem;
  border: 1px solid var(--c-white-40);
  border-radius: 50%;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.hero-arrow:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--c-white-70);
}
.hero-arrow img { width: 0.11rem; height: 0.16rem; }
/* 外圈红弧 = 当前这一张的停留计时：从 12 点方向顺时针由 0 长到满圈。
   进度由 JS 写 --hero-p（0~1），暂停 / 手动切换时归零。
   用 conic-gradient 画弧 + radial 遮罩挖出圆环，避免 SVG 的额外请求。 */
.hero-arrow--next::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--c-accent) calc(var(--hero-p, 0) * 360deg),
    rgba(255, 255, 255, 0) 0
  );
  -webkit-mask: radial-gradient(
    closest-side,
    rgba(0, 0, 0, 0) calc(100% - 0.02rem),
    #000 calc(100% - 0.02rem)
  );
  mask: radial-gradient(
    closest-side,
    rgba(0, 0, 0, 0) calc(100% - 0.02rem),
    #000 calc(100% - 0.02rem)
  );
  pointer-events: none;
}

/* ===========================  产品中心  =========================== */
.product {
  padding-top: 1.06rem;
  padding-bottom: 1.21rem;
  background: var(--c-surface);
}
.product-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.tabs {
  display: flex;
  /* 设计稿里六个标签不是等分六列：每列宽度 = max(图标, 文字)，
     列与列之间用 space-between 均分剩余空间（实测中心点误差 <1px） */
  justify-content: space-between;
  width: 9.56rem;
  margin-top: 0.14rem;
  border-bottom: 1px solid var(--c-line);
}
.tab {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.17rem;
  padding-bottom: 0.28rem;
  color: var(--c-ink);
}
/* 六个图标的宽度不一样（PSD 图层框 48/40/40/32/45/38 × 38），
   统一给高度、宽度跟 svg 自带的比例走，别再用 contain 塞进同一个方框 */
.tab img {
  width: auto;
  height: 0.38rem;
}
.tab span {
  font-size: var(--fs-body);
  line-height: 1;
  white-space: nowrap;
}
.tab.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 0.42rem;
  height: 0.06rem;
  background: var(--c-accent);
}

.product-panels { position: relative; }
.product-panel { display: none; }
.product-panel.is-active { display: block; }
/* 默认显示第一个面板（模板循环里不做条件输出，状态交给 JS 切换） */
.product-panel:first-child { display: block; }
/* JS 切换后用 hidden 属性隐藏非当前面板，需压过 :first-child 规则 */
.product-panel[hidden] { display: none; }
.product-swiper {
  /* 上方留出 0.08rem，避免卡片 hover 上浮被裁切 */
  padding-top: 0.08rem;
  margin-top: -0.08rem;
}
.product-swiper .swiper-slide { height: auto; }

.cards {
  display: flex;
  gap: 0.18rem;
  margin-top: 0.69rem;
}
/* 三张卡同高、总宽恒定：默认窄卡 392.5，展开态 783，
   比例来自设计稿 783 : 392.5 : 392.5 = 版心 1568，切换只改 flex-grow 不抖动 */
.card {
  --fig-w: 2.18rem;
  --fig-h: 2.15rem;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  flex: 392.5 1 0;
  height: 4.53rem;
  border-radius: var(--radius-card);
  background: var(--c-card);
  overflow: hidden;
  transition: flex-grow 0.55s var(--ease), box-shadow 0.35s ease;
}
.card.is-active {
  flex-grow: 783;
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.06);
}
/* 标题：窄卡居中落底，展开态回到左上 */
.card-txt {
  position: absolute;
  left: 0;
  right: 0;
  top: 3.66rem;
  text-align: center;
  transition: left 0.55s var(--ease), right 0.55s var(--ease),
    top 0.55s var(--ease);
}
.card-txt h3 {
  font-size: var(--fs-h5);
  line-height: 1;
  font-weight: 400;
  transition: font-size 0.45s var(--ease);
}
.card.is-active .card-txt {
  left: 0.73rem;
  right: 0.73rem;
  top: 0.93rem;
  text-align: left;
}
.card.is-active .card-txt h3 { font-size: var(--fs-h3); }

/* 描述与按钮：只在展开态出现 */
.card-desc,
.card-btn {
  position: absolute;
  left: 0.72rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}
.card-desc {
  top: 1.71rem;
  width: 2.94rem;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--c-ink-2);
}
.card-btn {
  top: 2.92rem;
  width: 1.62rem;
}
.card.is-active .card-desc,
.card.is-active .card-btn {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.16s;
}

/* 产品图：窄卡居中靠上，展开态移到右侧 */
.card-fig {
  position: absolute;
  left: 50%;
  top: 0.78rem;
  width: var(--fig-w);
  height: var(--fig-h);
  transform: translateX(-50%);
  transition: left 0.55s var(--ease), top 0.55s var(--ease),
    width 0.55s var(--ease), height 0.55s var(--ease),
    transform 0.55s var(--ease);
}
.card:nth-child(3) { --fig-w: 2.3rem; }
.card-fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.card.is-active .card-fig {
  left: 4.41rem;
  top: 1.12rem;
  width: 2.6rem;
  height: 2.3rem;
  transform: translateX(0);
}

/* 轮播控制条：分页点居中，箭头贴版心两侧，不改变原分页条占位高度 */
.product-foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0.08rem;
  margin-top: 0.66rem;
}
.product-foot .slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.product-foot .slide-arrow--prev { left: 0; }
.product-foot .slide-arrow--next { right: 0; }
.slide-arrow {
  display: grid;
  place-items: center;
  width: 0.42rem;
  height: 0.42rem;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-white);
  transition: background-color 0.22s ease, border-color 0.22s ease, opacity 0.22s;
}
.slide-arrow img {
  width: 0.11rem;
  height: 0.16rem;
  opacity: 0.55;
  /* 图标本体为白色（banner 上用），浅底按钮里需转深色 */
  filter: brightness(0);
  transition: opacity 0.22s ease, filter 0.22s ease;
}
.slide-arrow:hover {
  border-color: var(--c-primary);
  background: var(--c-primary);
}
.slide-arrow:hover img { opacity: 1; filter: brightness(0) invert(1); }
.slide-arrow.swiper-button-disabled img { opacity: 0.55; filter: brightness(0); }
.slide-arrow.swiper-button-disabled { opacity: 0.35; cursor: default; }
.slide-arrow.swiper-button-disabled:hover {
  border-color: var(--c-line);
  background: var(--c-white);
}
.slide-arrow.swiper-button-disabled:hover img { opacity: 0.55; filter: brightness(0); }

.swiper-pagination { position: static; }
.product-foot .swiper-pagination {
  display: flex;
  align-items: center;
  gap: 0.08rem;
  width: auto;
}
.swiper-pagination-bullet {
  width: 0.42rem;
  height: 0.08rem;
  margin: 0 !important;
  border-radius: 0.04rem;
  background: #e6e6e6;
  opacity: 1;
  transition: width 0.3s ease, background-color 0.3s ease;
}
.swiper-pagination-bullet:hover { background: #d6d6d6; }
.swiper-pagination-bullet-active,
.swiper-pagination-bullet-active:hover {
  width: 0.72rem;
  background: var(--c-accent);
}

/* ===========================  产品应用  =========================== */
/* 横向手风琴：4 块面板斜切拼接（左缘 −1.01rem 斜角互相咬合），
   展开块 flex-grow 放大，其余收成窄条；文案随所属面板一起走 */
.apply {
  position: relative;
  height: var(--h-apply);
  overflow: hidden;
  color: var(--c-white);
  background: #041a33;
}
.apply-stack {
  position: absolute;
  inset: 0;
  display: flex;
}
.apply-panel {
  --slant: 1.01rem;
  --g: 3.14;
  position: relative;
  flex: var(--g) 1 0;
  min-width: 0;
  margin-left: calc(-1 * var(--slant));
  /* PSD 四块是平行四边形窗口，左右缘同斜率（101px / 963px ≈ 6°）：
     1 号右缘 1338@顶 → 1237@底，2/3 号窗口各 213 宽，4 号右缘被视口裁掉 */
  -webkit-clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  transition: flex-grow 0.62s cubic-bezier(0.4, 0, 0.2, 1);
}
.apply-panel:first-child {
  --g: 13.38; /* 带 1338（顶 0-1338 / 底 0-1237） */
  margin-left: 0;
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
}
.apply-panel:last-child {
  -webkit-clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
}
/* 遮罩 --veil 必须作为 background-image 的第一层（叠在照片之上）；
   照片由模板内联输出：background-image: var(--veil), url(照片) */
.apply-panel { background-image: var(--veil); }
.apply-panel:nth-child(1) { --g: 13.38; }
.apply-panel:nth-child(2) { --g: 3.14; }
.apply-panel:nth-child(3) { --g: 3.13; }
.apply-panel:nth-child(4) { --g: 2.59; }
/* 展开块与 1 号默认态同宽，其余按 --g 收缩 */
.apply-panel.is-open { flex-grow: 13.38; }
/* 展开的不是 1 号时，三条窄带一律收到 2.95，好让展开块的 1338 带宽
   容得下 158 起、775 宽（文案宽度）的文案块；默认态不受影响，仍按 PSD 的
   314 / 313 / 259 排布 */
.apply-stack:has(.apply-panel.is-open:not(:first-child)) .apply-panel:not(.is-open) {
  flex-grow: 2.95;
}
/* 非 1 号展开时左缘被自身斜面吃掉 101，文案改从斜面右侧起排 */
.apply-stack:has(.apply-panel.is-open:not(:first-child)) .apply-panel.is-open .apply-copy {
  left: 1.79rem;
}
/* 整区蓝调压暗：PSD 在 4 张照片之上压了一层深蓝（实测 ref ≈ 0.28×photo + (10,51,93)）。
   注意 panel 有 clip-path 会自建层叠上下文，遮罩必须做进 background 层，
   不能放在 .apply-stack 的伪元素上（那会压住文字） */
.apply-panel {
  --veil: linear-gradient(rgba(10, 51, 93, 0.72), rgba(10, 51, 93, 0.72));
}

/* 展开块的左侧压暗，保证标题与正文可读 */
.apply-panel::before {
  /* PSD 里每块之间是 1px 纯白斜线（矩形 20 拷贝 的描边），沿用同一斜率 */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  width: 0.015rem;
  background: #fff;
  transform: skewX(-6deg);
  transform-origin: 50% 0;
  pointer-events: none;
}
.apply-panel:last-child::before { display: none; }
.apply-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(3, 20, 42, 0.94) 0%,
    rgba(4, 28, 56, 0.82) 18%,
    rgba(5, 34, 66, 0.52) 38%,
    rgba(5, 34, 68, 0.18) 62%,
    rgba(5, 34, 68, 0.02) 100%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.apply-panel.is-open::after { opacity: 1; }

/* 整块面板即热区，窄条上竖排编号与名称 */
.apply-hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  cursor: pointer;
}
.apply-hit:focus-visible { outline-offset: -3px; }
.apply-tab {
  position: absolute;
  right: 0.62rem;
  top: 2.47rem;
  display: flex;
  align-items: flex-start;
  gap: 0.14rem;
  color: var(--c-white);
  opacity: 0; /* 设计稿窄条上无文字，只在悬停时浮出 */
  transition: opacity 0.28s ease;
}
.apply-tab__idx {
  writing-mode: vertical-rl;
  font-family: var(--ff-en);
  font-size: 0.13rem;
  line-height: 1;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.62);
}
.apply-tab__name {
  writing-mode: vertical-rl;
  font-size: 0.2rem;
  line-height: 1;
  letter-spacing: 0.1em;
}
.apply-panel:hover .apply-tab { opacity: 1; }
.apply-panel.is-open .apply-tab { opacity: 0; }

/* 展开块的文案：锚在版心左缘，随面板移动 */
.apply-copy {
  position: absolute;
  left: 1.58rem;
  top: 4.16rem;
  z-index: 2;
  width: 7.75rem;
  opacity: 0;
  visibility: hidden;
  transform: translateX(0.12rem);
  transition: opacity 0.32s ease 0.14s, transform 0.42s ease 0.14s,
    visibility 0.32s;
  pointer-events: none;
}
.apply-panel.is-open .apply-copy {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.apply-copy h3 {
  font-size: var(--fs-h3);
  line-height: 1;
  font-weight: 400;
  color: var(--c-white);
}
.apply-copy p {
  margin-top: 0.32rem;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.88);
}
.apply-copy .btn {
  width: 1.64rem;
  margin-top: 0.9rem;
}
.apply-copy .btn .ico { width: 0.1rem; height: 0.12rem; }

/* 区块标题始终固定在版心左上，不随面板移动 */
.apply-head {
  position: absolute;
  left: 0;
  right: 0;
  top: 1.61rem;
  z-index: 3;
  pointer-events: none;
}
.apply .head-en,
.apply .head-cn { color: var(--c-white); }

/* ===========================  公司简介  =========================== */
.company {
  position: relative;
  padding-top: 1.3rem;
  padding-bottom: 1.3rem;
  background: var(--c-surface);
}
.company::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    72% 68% at 0% -8%,
    #d9ebfa 0%,
    rgba(219, 238, 252, 0.62) 34%,
    rgba(255, 255, 255, 0) 68%
  );
  pointer-events: none;
}
.company .container { position: relative; }
.company-text { width: 7.07rem; }
.company-text .edit_info {
  margin-top: 0.60rem;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink-2);
}
.company-media {
  position: absolute;
  /* 设计稿里拼图右侧越出版心 1.58rem 直到贴住屏幕右缘；按可用外边距收敛，
     滚动条吃掉宽度时自动少溢一点，永不产生横向滚动 */
  right: calc(-1 * min(1.58rem, (100vw - var(--sbw, 0px) - 100%) / 2));
  left: auto;
  top: -1.95rem;
  width: 10.88rem;
  height: 8.3rem;
}
.company-collage {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
/* 素材已按层重合成、不含播放键，这里直接画红色斜切块（不再靠底色去盖烘焙三角）。
   几何取自 PSD：红块外接框 x 1037~1157、y 3140~3205（121×66），
   上边从 x1053 起、下边从 x1038 起 → 左斜 16px / 66px ≈ 13.2%。 */
.cv-play {
  position: absolute;
  left: 18.84%;
  top: 39.16%;
  width: 11.12%;
  height: 7.95%;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: var(--c-accent);
  -webkit-clip-path: polygon(13.2% 0, 100% 0, 86% 100%, 0 100%);
  clip-path: polygon(13.2% 0, 100% 0, 86% 100%, 0 100%);
  transition: background-color 0.25s ease;
}
.cv-play:hover { background: #b3070c; }
.cv-play:focus-visible { background: #b3070c; }
/* clip-path 会把 outline 一起裁掉，键盘焦点框改用内描边画在斜切形状里 */
.cv-play:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0.045rem;
  border: 0.02rem solid var(--c-white);
  -webkit-clip-path: polygon(13.2% 0, 100% 0, 86% 100%, 0 100%);
  clip-path: polygon(13.2% 0, 100% 0, 86% 100%, 0 100%);
  pointer-events: none;
}
.cv-tri {
  /* PSD 白三角 8×13，几何上正好在红块正中 */
  width: 0.08rem;
  height: 0.13rem;
  background: var(--c-white);
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: transform 0.25s ease;
}
.cv-play:hover .cv-tri,
.cv-play:focus-visible .cv-tri {
  transform: translateX(0.01rem) scale(1.1);
}

.stat-value { display: inline-block; }

.stats {
  display: flex;
  gap: 0.98rem;
  margin-top: 0.71rem;
}
.stat-num {
  font-size: var(--fs-num);
  line-height: 1;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: 0.01em;
}
.stat-unit {
  font-size: var(--fs-body);
  color: var(--c-ink);
}
.stat-label {
  margin-top: 0.21rem;
  font-size: var(--fs-body);
  line-height: 1;
  color: var(--c-ink-3);
}

/* ===========================  研发智造  =========================== */
.rd {
  position: relative;
  height: var(--h-rd);
  overflow: hidden;
  color: var(--c-white);
}
.rd-media { position: absolute; inset: 0; }
.rd-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rd-inner {
  position: relative;
  height: 100%;
  padding-top: 1.11rem;
  text-align: center;
}
.rd .head { display: block; text-align: center; }
.rd .head-en { display: inline-block; color: var(--c-white); }
.rd .head-cn {
  margin-top: 0.17rem;
  font-size: var(--fs-h2);
  color: var(--c-white);
}
.rd-body {
  margin-top: 0.70rem;
}
.rd-body p {
  width: 10.97rem;
  margin-inline: auto;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.92);
}
.rd-cards {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 0.14rem;
}
.rd-card {
  position: relative;
  /* 自成层叠上下文：底色交给下面两个负 z-index 叠加层，
     这样 width/height/底色都能过渡（linear-gradient 之间无法补间，只能淡入淡出） */
  isolation: isolate;
  flex: none;
  width: 3.63rem;
  height: 2.52rem;
  border: 1px solid var(--c-white-18);
  border-radius: var(--radius-card);
  background: none;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  text-align: left;
  transition: width 0.45s ease, height 0.45s ease, border-color 0.45s ease,
    box-shadow 0.45s ease;
}
.rd-card::before,
.rd-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
/* 常态：白色毛玻璃 */
.rd-card::before {
  z-index: -1;
  opacity: 1;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.29) 0%,
    rgba(255, 255, 255, 0.27) 45%,
    rgba(255, 255, 255, 0.21) 100%
  );
}
/* 展开态：品牌蓝，淡入盖掉毛玻璃 */
.rd-card::after {
  z-index: -2;
  opacity: 0;
  background: linear-gradient(168deg, #17629f 0%, #105ea3 42%, #16639e 100%);
}
.rd-card.is-active {
  width: 4.73rem;
  height: 3.53rem;
  border-color: rgba(255, 255, 255, 0.14);
}
.rd-card.is-active::before { opacity: 0; }
.rd-card.is-active::after { opacity: 1; }
.rd-card { cursor: pointer; }
.rd-card:focus-visible { outline-offset: -2px; }
.rd-ic {
  display: grid;
  place-items: center;
  /* 96 画布 = 设计稿 96px：玻璃球已烘进图里，球径 63 与 PSD 一致 */
  width: 0.66rem;
  height: 0.66rem;
  background: none;
}
.rd-ic img { width: 100%; height: 100%; }
/* 球心固定在画布 (46,34)，据此反推图标盒左上角：
   展开态球心 = (96.5, 88.5)，常态 = (99.5, 81.5) */
.rd-card.is-active .rd-ic {
  position: absolute;
  left: 0.505rem;
  top: 0.545rem;
}
.rd-card.is-active h3 {
  position: absolute;
  left: 0.52rem;
  top: 1.77rem;
  font-size: var(--fs-h4);
  line-height: 1;
  font-weight: 400;
}
.rd-card.is-active p {
  position: absolute;
  left: 0.53rem;
  top: 2.48rem;
  width: 3.52rem;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: rgba(255, 255, 255, 0.9);
}
.rd-card:not(.is-active) .rd-ic {
  position: absolute;
  left: 0.535rem;
  top: 0.475rem;
}
.rd-card:not(.is-active) h3 {
  position: absolute;
  left: 0.53rem;
  top: 1.67rem;
  font-size: var(--fs-h5);
  line-height: 1;
  font-weight: 400;
}
.rd-card:not(.is-active) p {
  display: none;
}
.rd-card .rd-ic,
.rd-card h3 {
  transition: left 0.45s ease, top 0.45s ease, font-size 0.45s ease;
}
.rd-card:hover:not(.is-active) {
  border-color: rgba(255, 255, 255, 0.36);
  box-shadow: 0 0.12rem 0.4rem rgba(6, 34, 66, 0.18);
}

/* ===========================  新闻中心  =========================== */
.news {
  padding-top: 1.05rem;
  padding-bottom: 1.34rem;
  background: var(--c-surface);
}
.news-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.news-tabs {
  display: flex;
  gap: 0.18rem;
}
.news-tab {
  display: grid;
  place-items: center;
  width: 1.83rem;
  height: 0.58rem;
  border-radius: var(--radius-btn);
  background: var(--c-tab);
  color: var(--c-primary-deep);
  font-size: var(--fs-body);
  line-height: 1;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.news-tab:hover { background: #e9eef8; }
.news-tab.is-active {
  background: var(--c-primary);
  color: var(--c-white);
}
.news-tab.is-active:hover { background: var(--c-primary); }

.news-panel { display: none; }
.news-panel.is-active { display: block; }
.news-swiper {
  margin-top: 0.73rem;
  overflow: hidden;
}
.news-swiper .swiper-slide { height: auto; }
.news-swiper .slide-arrow {
  position: absolute;
  top: 1.47rem;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.25s ease, background-color 0.22s ease,
    border-color 0.22s ease;
}
.news-swiper .slide-arrow--prev { left: -0.1rem; }
.news-swiper .slide-arrow--next { right: -0.1rem; }
.news-swiper:hover .slide-arrow,
.news-swiper:focus-within .slide-arrow { opacity: 1; }
.news-pagination {
  display: flex;
  justify-content: center;
  gap: 0.08rem;
  margin-top: 0.56rem;
}
.news-pagination .swiper-pagination-bullet {
  width: 0.42rem;
  height: 0.04rem;
  border-radius: 0.02rem;
}
.news-pagination .swiper-pagination-bullet-active {
  width: 0.68rem;
}

.news-card { min-width: 0; }
.news-card figure {
  position: relative;
  height: 3.37rem;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.news-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.news-card:hover figure img { transform: scale(1.04); }
.news-date {
  margin-top: 0.36rem;
  font-family: var(--ff-en);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1;
  color: var(--c-primary);
}
.news-year {
  margin-top: 0.17rem;
  font-family: var(--ff-en);
  font-size: var(--fs-body);
  line-height: 1;
  color: var(--c-primary);
}
.news-card h3 {
  margin-top: 0.32rem;
  font-size: var(--fs-h5);
  line-height: 1.25;
  font-weight: 400;
  color: var(--c-ink);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.news-desc {
  margin-top: 0.18rem;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--c-ink-2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.news-card:hover h3 {color: var(--c-primary);}
/* ===========================  页脚  =========================== */
.footer {
  position: relative;
  height: var(--h-footer);
  background: var(--c-night);
  color: var(--c-white);
  /* 弹出层（二维码、友情链接）向上展开，不能被裁掉 */
  overflow: visible;
}
.footer-mark {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 12.83rem;
  /* 素材已把图层 5/255 的不透明度烘进 alpha，这里必须 1，
     再叠一次透明度就又看不见了 */
  opacity: 1;
  pointer-events: none;
}
.footer .container { position: relative; }
.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  /* 设计稿里页脚整块内容比这里低 8px（友情链接胶囊 5765 vs 5755），
     footer 高度是固定的 --h-footer，往下挪只是吃掉底部留白，不改变页高 */
  padding-top: 0.79rem;
}
.socials {
  display: flex;
  gap: 0.19rem;
}
.social {
  display: grid;
  place-items: center;
  width: 0.59rem;
  height: 0.59rem;
  border-radius: 50%;
  background: #232a38;
  transition: background-color 0.25s ease;
}
.social { position: relative; }
.social:hover { background: #35405a; }

/* 社交图标悬停二维码：向上弹出 */
.social-qr {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.11rem);
  top: auto;
  width: 1.3rem;
  padding: 0.1rem 0.1rem 0.08rem;
  border-radius: 0.06rem;
  background: var(--c-white);
  box-shadow: 0 0.12rem 0.32rem rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 0.06rem);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  pointer-events: none;
  z-index: 30;
}
.social-qr::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.05rem;
  width: 0.1rem;
  height: 0.1rem;
  background: var(--c-white);
  transform: translateX(-50%) rotate(45deg);
}
.social .social-qr img {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  object-fit: contain;
  background: var(--c-white);
}
.social-qr__name {
  display: block;
  margin-top: 0.06rem;
  font-size: 0.13rem;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: #333;
}
.social:hover .social-qr,
.social:focus-visible .social-qr {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.social > img {
  max-width: 0.24rem;
}
.social--xhs img {
  height: 0.16rem;
  width: 0.4rem;
}

.footer-links {
  display: flex;
  gap: 0.18rem;
}
.link-drop { position: relative; }
.link-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 2.82rem;
  height: 0.52rem;
  padding-inline: 0.4rem;
  border: 1px solid var(--c-white-18);
  border-radius: 0.26rem;
  font-size: var(--fs-sm);
  color: #c7c7c8;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.link-pill:hover {
  border-color: var(--c-white-40);
  color: var(--c-white);
}
.link-pill .link-caret {
  width: 0.14rem;
  height: 0.09rem;
  transition: transform 0.25s ease;
}
.link-drop.is-open .link-pill {
  border-color: var(--c-white-40);
  color: var(--c-white);
}
.link-drop.is-open .link-caret { transform: rotate(180deg); }

/* 友情链接下拉：向上展开 */
.link-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.1rem);
  top: auto;
  width: 2.82rem;
  padding: 0.1rem;
  border-radius: 0.08rem;
  background: var(--c-white);
  box-shadow: 0 0.14rem 0.4rem rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.06rem);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 30;
}
.link-drop.is-open .link-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.link-menu a {
  display: block;
  padding: 0.09rem 0.16rem;
  border-radius: 0.04rem;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: #444;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.link-menu a:hover {
  background: #f2f6fc;
  color: var(--c-primary);
}

.footer-main {
  display: flex;
  margin-top: 0.76rem;
}
.contact { flex: none; width: 2.77rem; }
.contact-row {
  display: flex;
  align-items: center;
  gap: 0.07rem;
}
/* 三个图标的画幅并不一样（PSD 图层框：电话 22×21、信封 18×14、定位 20×22），
   以前统一塞进 0.22rem 的方框里，会把信封横向压窄、把定位捏扁，
   这里按各自原始比例给尺寸，别再用同一个正方形框 */
.contact-row img {
  flex: none;
  display: block;
}
.contact-row img[src*="ico-phone"] { width: 0.22rem; height: 0.21rem; }
.contact-row img[src*="ico-mail"]  { width: 0.18rem; height: 0.14rem; }
.contact-row img[src*="ico-pin"]   { width: 0.20rem; height: 0.22rem; }
.contact-label {
  font-size: var(--fs-body);
  line-height: 1;
  color: var(--c-mute);
}
.contact-value {
  /* 设计稿实测：标签↔数值 36px、数值↔下一组标签 61px（1920 稿） */
  margin-top: 0.12rem;
  font-size: var(--fs-h5);
  line-height: 1;
  font-weight: 700;
  color: var(--c-white);
}
.contact-value a:hover { color: var(--c-primary); }
.contact-value + .contact-row { margin-top: 0.43rem; }
.contact-value--addr {
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.5;
}

.footer-nav {
  display: flex;
  gap: 1rem;
  margin-left: 1.93rem;
}
.footer-col {max-width: 2rem;}
.footer-col h3 {
  font-size: 0.16rem;
  font-weight: 400;
  line-height: 1;
  color: var(--c-white);
}
/* 列标题是 <h3><a>：链接的灰色会盖掉标题的白色，单独复位 */
.footer-col h3 a { color: var(--c-white); font-size: inherit; }
.footer-col ul { margin-top: 0.25rem; }
.footer-col li { line-height: 0.32rem; }
.footer-col a {
  font-size: var(--fs-sm);
  color: var(--c-mute);
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--c-white); }

.footer-qr {
  margin-left: auto;
  text-align: center;
}
.footer-qr img {
  width: 1rem;
  height: 1rem;
  background: var(--c-white);
}
.footer-qr p {
  margin-top: 0.18rem;
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--c-white);
  white-space: nowrap;
}

.copyright {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.62rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-sm);
  color: var(--c-copy);
}
.copyright-links {
  display: flex;
  gap: 0.28rem;
}
.copyright-links a:hover { color: var(--c-mute); }
.copyright-time { color: #3f4249; }

/* ==========================================================================
   1025–1440：等比缩小后仍需处理的局部
   ========================================================================== */
/* 769–1599：版心两侧边距变窄，原本越出版心的两处结构需按可用宽度收敛 */
@media (min-width: 769px) and (max-width: 1599.98px) {
  /* 窄屏改回左对齐锚定：拼图左缘保持 6.74rem，右侧仍可借外边距贴到屏幕右缘 */
  .company-media {
    left: 6.74rem;
    right: auto;
    width: 100%;
    max-width: calc(100% - 6.74rem + (100vw - var(--sbw, 0px) - 100%) / 2);
    height: auto;
  }
  .company-collage { height: auto; }
  /* 研发卡片总宽 16.04rem，超出容器时按原比例弹性压缩，仍保持大卡:小卡 = 4.73:3.63 */
  .rd-cards { gap: 0.12rem; }
  .rd-card {
    flex: 3.63 1 0;
    width: auto;
    min-width: 0;
    transition: flex-grow 0.45s ease, height 0.45s ease,
      background 0.45s ease, border-color 0.45s ease;
    /* 亚像素宽度下 backdrop-filter 会整块不绘制，窄屏改用等效不透明渐变 */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.32) 45%,
      rgba(255, 255, 255, 0.26) 100%
    );
  }
  .rd-card.is-active {
    flex: 4.73 1 0;
    width: auto;
  }
  .rd-card.is-active p { width: auto; right: 0.4rem; }
}

@media (max-width: 1440px) {
  .main-nav { margin-left: 2.2rem; }
  .footer-nav { margin-left: 2.4rem; gap: 0.7rem; }
  .footer-qr { margin-left: 0.7rem; }
}

/* ==========================================================================
   ≤1024：平板 —— 局部改双列/换行，避免溢出
   ========================================================================== */
@media (max-width: 1024px) {
  /* ---------- 移动端导航抽屉 ----------
     桌面端的主导航在这里改成右侧滑出面板，尺寸用 px 而不用 rem：
     ≤1024 时根字号会在 70~100px 之间跳，rem 换算出来的点击区高度不稳定。 */
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    margin-left: 4px;
    padding: 0 8px;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
	width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--c-white);
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* 语言切换：这一档根字号在 70~100px 之间跳，rem 算出来的按钮忽大忽小，
     改用 px 钉死与汉堡一致的 40px 触控高度；宽度改自适应，跟随文字长短 */
  .lang { margin-left: 8px; }
  .lang-btn {
    width: auto;
    height: 40px;
    gap: 7px;
    padding-inline: 14px;
  }
  .lang-globe { width: 17px; height: 17px; }
  .lang-label { font-size: 13px; }
  .lang-btn .caret { width: 9px; height: 7px; }
  .lang-menu {
    top: calc(100% + 8px);
    min-width: 140px;
    padding: 6px;
    border-radius: 6px;
  }
  .lang-menu a { padding: 11px 12px; font-size: 14px; }

  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 60;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 320px;
    max-width: 86vw;
    height: auto;
    margin: 0;
    padding: 54px 0 32px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #0d1626;
    box-shadow: -14px 0 44px rgba(4, 10, 20, 0.5);
    transform: translateX(100%);
    visibility: hidden;
    font-size: 15px;
    transition: transform 0.28s ease, visibility 0.28s;
    overscroll-behavior: contain;
  }
  .main-nav.is-open {
    transform: none;
    visibility: visible;
  }
  /* 抽屉打开时的压暗遮罩（不必额外加 DOM） */
  .header.is-nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(6, 12, 20, 0.55);
  }

  .nav-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .nav-close span,
  .nav-close span::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--c-white);
    content: "";
  }
  .nav-close span { transform: translate(-50%, -50%) rotate(45deg); }
  .nav-close span::after { transform: translate(-50%, -50%) rotate(90deg); }

  .nav-item {
    display: block;
    height: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .nav-item:last-child { border-bottom: 0; }
  .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    padding: 0 18px;
    font-size: 16px;
    color: var(--c-white-70);
  }
  .nav-item.has-drop > .nav-link::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.25s ease;
  }
  .nav-item.has-drop.is-open > .nav-link::after {
    transform: rotate(-135deg) translateY(-2px);
  }
  .nav-item.is-open > .nav-link { color: var(--c-white); }

  /* 抽屉里下拉改成行内手风琴，不再浮层 */
  .main-nav .nav-drop {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 18px 8px 30px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
  .main-nav .nav-item.is-open > .nav-drop { display: block; }
  .main-nav .nav-drop::before { display: none; }
  .main-nav .nav-drop a {
    padding: 10px 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.62);
    white-space: normal;
  }
  .main-nav .nav-drop a:hover,
  .main-nav .nav-drop a:focus-visible {
    background: none;
    color: var(--c-white);
  }
  .main-nav .nav-drop a.is-current {
    padding-left: 10px;
    background: none;
    color: var(--c-white);
  }
  .main-nav .nav-drop a.is-current::before { background: var(--c-white); }

  /* 抽屉铺开时锁住背景滚动 */
  html.nav-lock,
  html.nav-lock body { overflow: hidden; }

  .product-head { flex-direction: column; gap: 0.36rem; }
  .tabs { width: 100%; margin-top: 0; }
  .card-desc { width: 2.4rem; }
  .card.is-active .card-fig {
    left: auto;
    right: 0.3rem;
    width: 2.1rem;
  }
  .rd-body p { width: 86%; }
  .company-media {
    position: relative;
    left: 0;
    right: auto;
    top: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    /* 素材顶部约 14.16% 是透明留白，负 margin 抵消，避免出现大空洞 */
    margin-top: calc(0.5rem - 14.16%);
  }
  .company-text { width: 100%; }
  .footer-nav { gap: 0.5rem; margin-left: 1.2rem; }
  .footer-qr { margin-left: 0.4rem; }
  .footer-links { flex-direction: column; gap: 0.12rem; }
}

/* ==========================================================================
   ≤768：移动版（单栏）
   ========================================================================== */
@media (max-width: 768px) {
  /* 字号重设：此段 1rem ≈ 50px（750 稿） */
  body { font-size: 0.28rem; }

  .header-inner { height: 1rem; }
  .logo { width: 1.7rem; height: 0.72rem; }
  /* 语言切换：原来把 width/height/padding 写在 .lang 外壳上，里面的 .lang-btn
     仍是 1.04×0.46rem，胶囊比外壳小一圈还贴顶偏上。改成外壳自适应、尺寸落在
     按钮上；尺寸沿用 ≤1024 的 px 值，才能和旁边固定 40px 的汉堡一档齐平。 */
  .lang { width: auto; height: auto; margin-left: 8px; padding-inline: 0; }
  .lang-menu {
    top: calc(100% + 8px);
    min-width: 168px;
    padding: 10px;
    border-radius: 8px;
  }
  .lang-menu a { padding: 13px 14px; font-size: 15px; border-radius: 6px; }
  .search-btn { width: 0.34rem; height: 0.34rem; }

  .hero { height: 8.6rem; }
  /* 手机走 <picture> 换的竖幅图（750x860），构图已经在图里定好，
     object-position 回到正中；原来的 62% 是为了补救横图被放大的裁切 */
  .hero-media img { height: 100%; margin-top: 0; object-position: 50% 50%; }
  .hero-overlay {
    background: linear-gradient(180deg, rgba(5, 18, 34, 0.5) 0%, rgba(5, 18, 34, 0.75) 100%);
  }
  .hero-copy { top: 3.4rem; }
  .hero-title { font-size: 0.52rem; line-height: 0.62rem; }
  .hero-sub { margin-top: 0.2rem; font-size: 0.3rem; line-height: 1.3; }
  .hero-en { margin-top: 0.14rem; font-size: 0.2rem; letter-spacing: 0.04em; line-height: 1.4; }
  .hero-progress { top: auto; bottom: 1.7rem; gap: 0.05rem; }
  .pg { width: 0.24rem; height: 0.2rem; }
  .pg::before { left: 0.02rem; width: 0.2rem; height: 0.2rem; }
  .pg span { width: 0.06rem; height: 0.06rem; }
  .pg-dash { width: 0.36rem; height: 0.03rem; }
  .hero-arrows { top: auto; bottom: 0.5rem; right: 0; }
  .hero-arrow { width: 0.6rem; height: 0.6rem; }

  .head-en { font-size: 0.42rem; line-height: 1.1; }
  .head-en::before { width: 0.26rem; height: 0.28rem; left: -0.1rem; top: 0.01rem; }
  .head-cn { margin-top: 0.08rem; font-size: 0.36rem; }

  .product { padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .product-head { gap: 0.3rem; }
  .tabs {
    width: 100%;
    flex-wrap: wrap;
    row-gap: 0.26rem;
    border-bottom: 0;
  }
  .tab {
    flex: 0 0 33.3333%;
    width: auto;
    gap: 0.1rem;
    padding-bottom: 0.06rem;
  }
  .tab img { width: auto; height: 0.46rem; }
  .tab span { font-size: 0.22rem; }
  .tab.is-active::after { height: 3px; width: 0.4rem; bottom: -5px;}

  .cards {
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.4rem;
  }
  /* 触屏没有 hover：三张卡一律用展开态竖排 */
  .card { flex: none; width: 100%; height: 4.9rem; }
  .card-txt { left: 0.4rem; right: 0.4rem; top: 0.5rem; text-align: left; }
  .card-txt h3 { font-size: 0.34rem; }
  .card-desc {
    left: 0.4rem;
    top: 1.3rem;
    width: 3.4rem;
    opacity: 1;
    visibility: visible;
    font-size: 0.24rem;
    line-height: 0.4rem;
  }
  .card-btn {
    left: 0.4rem;
    top: 3.52rem;
    width: 2.2rem;
    height: 0.72rem;
    font-size: 0.24rem;
    opacity: 1;
    visibility: visible;
  }
  .card-fig,
  .card.is-active .card-fig {
    left: auto;
    right: 0.28rem;
    top: 1.3rem;
    width: 2.5rem;
    height: 2.2rem;
    transform: none;
  }
  .product-foot { gap: 0.2rem; margin-top: 0.3rem; }
  .slide-arrow { width: 0.6rem; height: 0.6rem; }
  .slide-arrow img { width: 0.17rem; height: 0.24rem; }
  .swiper-pagination-bullet { width: 0.3rem; height: 0.06rem; }
  .swiper-pagination-bullet-active { width: 0.5rem; }

  /* 手机端改为纵向手风琴，斜切改到上下边 */
  .apply { height: auto; padding-bottom: 0.7rem; }
  .apply-head { position: static; padding-top: 0.7rem; }
  .apply-stack {
    position: relative;
    inset: auto;
    flex-direction: column;
    margin-top: 0.5rem;
  }
  .apply-panel,
  .apply-panel:first-child {
    flex: none;
    height: 1rem;
    margin-left: 0;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.24rem), 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.24rem), 0 100%);
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .apply-panel.is-open { height: 6.4rem; }
  .apply-panel::after {
    background: linear-gradient(
      180deg,
      rgba(4, 28, 58, 0.86) 0%,
      rgba(4, 28, 58, 0.9) 100%
    );
  }
  .apply-tab {
    right: auto;
    left: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
  }
  .apply-tab__idx,
  .apply-tab__name { writing-mode: horizontal-tb; }
  .apply-tab__name { font-size: 0.3rem; }
  .apply-copy {
    left: 0.5rem;
    top: 1.3rem;
    width: auto;
    right: 0.4rem;
    transform: none;
  }
  .apply-stack:has(.apply-panel.is-open:not(:first-child)) .apply-panel.is-open .apply-copy {
    left: 0.5rem;
  }
  .apply-panel:last-child{clip-path: inherit;}
  .apply-copy h3 { font-size: 0.36rem; }
  .apply-copy p { margin-top: 0.24rem; font-size: 0.24rem; line-height: 0.42rem; }
  .apply-copy .btn { margin-top: 0.4rem; width: 2.2rem; height: 0.72rem; font-size: 0.24rem; }

  .company { padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .company-text .edit_info { margin-top: 0.4rem; font-size: 0.28rem; line-height: 1.8; }
  .company-media { margin-top: calc(0.3rem - 14.16%); }
  .company-collage { width: 100%; height: auto; }
  .stats { gap: 0.4rem; margin-top: 0.4rem; flex-wrap: wrap; }
  .stat-num { font-size: 0.42rem; }
  .stat-unit { font-size: 0.24rem; }
  .stat-label { margin-top: 0.12rem; font-size: 0.24rem; }

  .rd { height: auto; padding-bottom: 0.7rem; }
  .rd-inner { padding-top: 0.7rem; }
  .rd .head-cn { margin-top: 0.12rem; font-size: 0.3rem; }
  .rd-body { margin-top: 0.36rem; }
  .rd-body p { width: 100%; font-size: 0.24rem; line-height: 0.42rem; }
  .rd-cards {
    position: static;
    flex-wrap: wrap;
    gap: 0.16rem;
    margin-top: 0.4rem;
  }
  .rd-card,
  .rd-card.is-active { width: 100%; height: auto; min-height: 2.6rem; }
  .rd-card.is-active h3 { font-size: 0.32rem; }
  .rd-card:not(.is-active) h3,
  .rd-card.is-active h3 { position: static; }
  .rd-card.is-active .rd-ic,
  .rd-card:not(.is-active) .rd-ic { position: static; margin: 0.36rem 0 0 0.4rem; }
  .rd-card.is-active h3 { margin: 0.24rem 0 0 0.4rem; }
  .rd-card.is-active p { position: static; width: auto; margin: 0.16rem 0.4rem 0.4rem; font-size: 0.24rem; line-height: 0.4rem; }
  .rd-card:not(.is-active) h3 { margin: 0.24rem 0 0.4rem 0.4rem; font-size: 0.3rem; }

  .news { padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .news-head { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .news-tabs { width: 100%; gap: 0.12rem; }
  .news-tab { flex: 1; width: auto; height: 0.72rem; font-size: 0.28rem; }
  .news-swiper { margin-top: 0.4rem; }
  .news-swiper .slide-arrow { display: none; }
  .news-pagination { margin-top: 0.3rem; }
  .news-card figure { height: 4.5rem; }
  .news-date { margin-top: 0.24rem; font-size: 0.36rem; }
  .news-year { font-size: 0.24rem; margin-top: 0.1rem; }
  .news-card h3 { margin-top: 0.16rem; font-size: 0.3rem; }
  .news-desc { font-size: 0.24rem; line-height: 0.4rem; }

  .footer { height: auto; padding-bottom: 0.5rem; }
  .footer-top { flex-direction: column; gap: 0.3rem; padding-top: 0.5rem; }
  .footer-links { flex-direction: row; }
  .link-pill { width: 3.2rem; height: 0.72rem; font-size: 0.24rem; padding-inline: 0.3rem; }
  .footer-main { flex-direction: column; gap: 0.4rem; margin-top: 0.4rem; }
  .contact { width: 100%; }
  .contact-label { font-size: 0.26rem; }
  .contact-value { font-size: 0.32rem; }
  /* 移动端等比放大 0.32/0.22 ≈ 1.455 倍，保持各自原始画幅 */
  .contact-row img[src*="ico-phone"] { width: 0.32rem; height: 0.31rem; }
  .contact-row img[src*="ico-mail"]  { width: 0.26rem; height: 0.20rem; }
  .contact-row img[src*="ico-pin"]   { width: 0.29rem; height: 0.32rem; }
  .footer-nav { flex-wrap: wrap; gap: 0.4rem 0.6rem; margin-left: 0; }
  .footer-col h3 { font-size: 0.28rem; }
  .footer-col ul { margin-top: 0.16rem; }
  .footer-col li { line-height: 0.46rem; }
  .footer-col a { font-size: 0.24rem; }
  .footer-qr { margin-left: 0; text-align: left; }
  .footer-qr img { width: 1.4rem; height: 1.4rem; }
  .footer-qr p { font-size: 0.24rem; }
  .copyright {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    margin-top: 0.4rem;
    padding-top: 0.3rem;
    font-size: 0.22rem;
    line-height: 1.6;
  }
  .footer-mark { width: 6rem; }
}


/* ==========================================================================
   视频弹层
   ========================================================================== */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
}
.video-modal[hidden] { display: none; }
.video-modal__mask {
  position: absolute;
  inset: 0;
  background: rgba(4, 9, 16, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.video-modal__dialog {
  position: relative;
  width: min(11.6rem, calc(100% - 0.6rem));
  border-radius: 0.08rem;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.6);
  animation: vmIn 0.28s ease;
}
@keyframes vmIn {
  from { opacity: 0; transform: translateY(0.16rem) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.video-modal__el {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-modal__fallback {
  padding: 0.2rem;
  font-size: var(--fs-sm);
  color: #fff;
  text-align: center;
}
.video-modal__close {
  position: absolute;
  right: 0.14rem;
  top: 0.14rem;
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  transition: background-color 0.2s ease;
  z-index: 2;
}
.video-modal__close:hover { background: var(--c-accent); }
.video-modal__close span::before,
.video-modal__close span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.16rem;
  height: 1px;
  background: var(--c-white);
}
.video-modal__close span::before { transform: translate(-50%, -50%) rotate(45deg); }
.video-modal__close span::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* 滚动锁 */
body.is-locked { overflow: hidden; }