@charset "utf-8";
/* ==========================================================================
   HENGLI · 首页样式
   ========================================================================== */

/* ==========================================================================
   1. 头部：顶部条 + 导航（吸顶 + 滚动进度条）
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--c-white);
  transition: box-shadow .45s var(--ease);
}
.site-header.is-shrink { box-shadow: 0 8px 30px rgba(12, 28, 44, .1); }

/* ---------- 顶栏信息条（浅灰底，滚动后自动收起） ---------- */
.topstrip {
  background: #f1f4f8;
  border-bottom: 1px solid #e6ecf3;
  overflow: hidden;
  max-height: 60px;
  transition: max-height .45s var(--ease), opacity .3s var(--ease), border-color .3s;
}
.site-header.is-shrink .topstrip {
  max-height: 0;
  opacity: 0;
  border-color: transparent;
}
.topstrip-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  height: 36px;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--c-mut);
}
.topstrip-l {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.topstrip-l span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topstrip-l i {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--c-main);
}
.topstrip-r {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 0 0 auto;
}
.topstrip-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--c-mut);
  transition: color .25s var(--ease);
}
.topstrip-item i { font-size: 12px; color: var(--c-main); }
a.topstrip-item:hover { color: var(--c-main); }
.topstrip-item span { white-space: nowrap; }

/* ---------- 顶部条（与导航一起吸顶，滚动后整体轻微收缩） ---------- */
.topbar {
  border-bottom: 1px solid var(--c-line);
  background: var(--c-white);
  transition: border-color .4s var(--ease);
}
.site-header.is-shrink .topbar { border-color: #eef2f7; }

.topbar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-top: 11px;
  padding-bottom: 11px;
  transition: padding .5s var(--ease);
}
.site-header.is-shrink .topbar-in {
  padding-top: 4px;
  padding-bottom: 4px;
}

.logo {
  display: block;
  flex: 0 0 auto;
  transition: opacity .22s var(--ease);
}
.logo img {
  width: auto;
  height: 62px;
  max-width: 326px;
  object-fit: contain;
  transition: height .5s var(--ease);
}
.site-header.is-shrink .logo img { height: 48px; }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 26px;
  flex: 0 0 auto;
}
/* 搜索展开时让出位置，避免与电话图标重叠出现残边 */
.topbar .hotline {
  transition: opacity .28s var(--ease), visibility .28s;
}
.topbar.is-searching .hotline {
  opacity: 0;
  visibility: hidden;
}

.hotline {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hotline-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--c-white);
  background: var(--c-main);
  font-size: 17px;
  flex: 0 0 auto;
  border-radius: 50%;
  transition: width .45s var(--ease), height .45s var(--ease);
}
.site-header.is-shrink .hotline-ico { width: 40px; height: 40px; font-size: 15px; }
.hotline-txt { display: flex; flex-direction: column; line-height: 1.2; }
.hotline-label {
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--c-mut);
  white-space: nowrap;
}
.hotline-num {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  transition: color .3s var(--ease), font-size .45s var(--ease);
}
.site-header.is-shrink .hotline-num { font-size: 22px; }
.hotline:hover .hotline-num { color: var(--c-main); }

/* ---------- 搜索 ---------- */
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: 46px;
}
.search-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: 16px;
  color: var(--c-ink);
  background: var(--c-soft);
  border-radius: 50%;
  transition: background .3s var(--ease), color .3s var(--ease);
  flex: 0 0 auto;
}
.search-btn:hover { background: var(--c-main); color: #fff; }

.search-form {
  position: absolute;
  right: 46px;
  top: 0;
  display: flex;
  align-items: center;
  width: 0;
  height: 46px;
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid transparent;
  border-radius: 23px;
  transition: width .42s var(--ease), border-color .3s, background .3s;
}
.search-wrap.is-open .search-form {
  width: 280px;
  border-color: #d9e3ee;
  background: #f7fafd;
  box-shadow: 0 10px 26px rgba(12, 28, 44, .09);
}
/* 输入框在容器内被 overflow 裁切，用边框高亮替代外轮廓 */
.search-form input:focus-visible { outline: none; }
.search-form:focus-within { border-color: var(--c-main); }
.search-form input {
  width: 100%;
  height: 100%;
  padding: 0 8px 0 19px;
  font-size: 14px;
  color: var(--c-text);
  background: transparent;
}
.search-form input::placeholder { color: #9aa9b8; }
.search-form button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-right: 4px;
  font-size: 13px;
  color: var(--c-main);
  border-radius: 50%;
  flex: 0 0 auto;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.search-form button:hover { background: var(--c-main); color: #fff; }

/* ---------- 主导航（主题色） ---------- */
.mainnav {
  position: relative;
  background: var(--c-main);
  transition: background .3s;
}
.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-list {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}
.nav-item { position: relative; }

.nav-item > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 58px;
  padding: 0 26px;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .9);
  transition: color .3s var(--ease), background .3s var(--ease), height .5s var(--ease);
}
.site-header.is-shrink .nav-item > a { height: 50px; }
.nav-item > a::after {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 0;
  height: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav-item > a:hover,
.nav-item.is-active > a { color: #fff; }
.nav-item > a:hover { background: rgba(255, 255, 255, .1); }
.nav-item > a:hover::after,
.nav-item.is-active > a::after { transform: scaleX(1); }

.nav-home > a { padding-left: 0; }
.nav-home > a::after { left: 0; right: auto; width: calc(100% - 14px); }

.nav-arrow {
  font-size: 9px;
  opacity: .45;
  transition: transform .3s var(--ease), opacity .3s;
}
.nav-item:hover .nav-arrow { transform: rotate(180deg); opacity: 1; }

/* 下拉面板 */
.drop {
  position: absolute;
  left: -1px;
  top: 100%;
  width: 600px;
  max-width: calc(100vw - 32px); /* 兜底：任何窗口宽度下面板都不会撑出视口 */
  padding-top: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  z-index: 20;
}
.nav-item:hover > .drop,
.nav-item.is-open > .drop {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* 靠右的栏目下拉改为右对齐，避免撑出视口 */
.nav-item:nth-last-child(-n+2) > .drop { left: auto; right: -1px; }
/* JS 量测后贴边修正（面板变宽后右侧栏目会溢出） */
.nav-item.drop-right > .drop { left: auto; right: 0; }
/* 有缩略图的栏目：面板收窄，让 1:1 缩略图正好铺满右列（不留白、不裁切） */
.nav-item:has(.drop-thumb) > .drop { width: 436px; }

.drop-inner {
  display: grid;
  grid-template-columns: 196px 1fr;
  background: var(--c-white);
  border-top: 3px solid var(--c-main);
  box-shadow: 0 22px 48px rgba(12, 28, 44, .16);
  max-height: calc(100vh - 168px); /* 矮屏兜底：面板始终完整落在视口内 */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drop-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center; /* 图变高后左列内容垂直居中，避免大片留白 */
  padding: 22px 20px;
  background: var(--c-soft);
  border-right: 1px solid var(--c-line);
}
.drop-en {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--c-accent);
}
.drop-name {
  margin-top: 8px;
  font-size: 17px;
  color: var(--c-ink);
}
.drop-desc {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--c-mut);
}
.drop-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--c-main);
}
.drop-all i { font-size: 10px; transition: transform .3s var(--ease); }
.drop-all:hover i { transform: translateX(4px); }

.drop-cols { padding: 18px 14px 18px 16px; }
.drop-list { display: block; }
.drop-list li { border-bottom: 1px dashed #eef2f7; }
.drop-list li:last-child { border-bottom: 0; }
.drop-list a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 10px 10px 0;
  font-size: 13.5px;
  color: var(--c-text);
  transition: color .25s, padding-left .25s var(--ease);
}
.drop-list a i { font-size: 9px; color: #c3ccd7; transition: color .25s; flex: 0 0 auto; }
/* 标题过长时单行省略，避免把两列布局撑破 */
.drop-list a span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.drop-list a:hover { color: var(--c-main); padding-left: 6px; }
.drop-list a:hover i { color: var(--c-accent); }
.drop-list-sub { margin-bottom: 6px; }
.drop-list-sub a { font-weight: 600; color: var(--c-ink); }

/* 内容标题一排两个 */
.drop-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 8px;
}
.drop-list-grid li { border-bottom: 0; }
.drop-list-grid a { padding: 9px 6px 9px 0; font-size: 13px; }

/* 单页栏目（无子栏目/内容列表）：右侧改为栏目缩略图 */
.drop-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--c-soft);
}
.drop-thumb img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1; /* 栏目缩略图是方图，1:1 铺满右列：不留白也不裁切 */
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.drop-thumb:hover img { transform: scale(1.045); }
.drop-thumb-cap {
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: #fff;
  background: var(--c-main);
  transition: background .3s var(--ease), gap .3s var(--ease);
}
.drop-thumb-cap i { font-size: 10px; }
.drop-thumb:hover .drop-thumb-cap { background: var(--c-main-d); gap: 12px; }

/* 滚动进度条：贴在整个头部（logo 栏）最上方 */
.nav-progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: var(--c-accent);
  z-index: 950;
  pointer-events: none;
  transition: width .1s linear;
}

/* 移动端导航标题 */
.nav-brand {
  display: none;
  align-items: baseline;
  gap: 10px;
}
.nav-brand span {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .18em;
  color: #fff;
}
.nav-brand i {
  font-size: 9.5px;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .35);
}

/* 汉堡按钮 */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  padding: 0;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: #fff;
  transition: transform .35s var(--ease), opacity .25s;
}
.nav-toggle.is-on span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-on span:nth-child(2) { opacity: 0; }
.nav-toggle.is-on span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav-mask {
  position: fixed;
  inset: 0;
  background: rgba(6, 14, 24, .6);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility .35s;
  z-index: 880;
}
.nav-mask.is-on { opacity: 1; visibility: visible; }

/* ==========================================================================
   2. 轮播
   ========================================================================== */
.hero {
  position: relative;
  background: var(--c-ink);
}
.hero-slider {
  position: relative;
  width: 100%;
  height: clamp(400px, 33.34vw, 720px);
  overflow: hidden;
}
.hero-mb { display: none; }

.slide-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  /* 幕布式横向擦除：靠 clip-path 过渡实现，图片本身不缩放 */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.15s cubic-bezier(.72, 0, .16, 1);
  will-change: clip-path;
}
/* 退场的那张继续垫在下面，避免擦除时露出深色底 */
.slide-item.is-prev {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  clip-path: inset(0 0 0 0);
}
.slide-item.is-on {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  clip-path: inset(0 0 0 0);
}
.slide-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-nav {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 5px 14px;
  background: rgba(10, 24, 38, .42);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 5;
}
.hero-dots { display: flex; align-items: center; gap: 2px; }
.hero-dot {
  position: relative;
  padding: 7px 11px 9px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .55);
  font-variant-numeric: tabular-nums;
  transition: color .3s;
  background: none;
  border: 0;
  cursor: pointer;
}
.hero-dot::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 3px;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.hero-dot.is-on { color: #fff; }
.hero-dot.is-on::after { transform: scaleX(1); background: var(--c-accent); }

/* ==========================================================================
   3. 关于我们
   ========================================================================== */
.about {
  position: relative;
  padding: 100px 0 0;
  background: var(--c-white);
}
.about-in {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 70px;
  align-items: center;
}

.about-pic { position: relative; }
.about-pic-frame {
  position: relative;
  padding: 0 26px 26px 0;
}
.about-pic-frame::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58%;
  height: 58%;
  border-right: 6px solid var(--c-accent);
  border-bottom: 6px solid var(--c-accent);
}
.about-pic-frame::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 78px;
  background: var(--c-main);
}
.about-pic-frame img {
  position: relative;
  width: 100%;
  aspect-ratio: 800 / 450;
  object-fit: cover;
  z-index: 1;
}

.about-badge {
  position: absolute;
  left: 26px;
  bottom: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 124px;
  height: 124px;
  background: var(--c-main);
  color: #fff;
  z-index: 2;
  line-height: 1;
}
.about-badge b {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.about-badge i {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .28em;
  opacity: .85;
}
.about-badge em {
  margin-top: 8px;
  font-size: 11.5px;
  letter-spacing: .12em;
}

.about-name {
  margin-bottom: 16px;
  font-size: 19px;
  font-weight: 600;
  color: var(--c-ink-2);
}
.about-desc {
  font-size: 14.5px;
  line-height: 2;
  color: var(--c-text);
  text-align: justify;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 36px;
  border-top: 1px solid var(--c-line);
  padding-top: 26px;
}
.stat {
  position: relative;
  padding-left: 20px;
  border-left: 1px solid var(--c-line);
}
.stat:first-child { padding-left: 0; border-left: 0; }
.stat-num {
  font-size: 30px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat-unit {
  margin-left: 2px;
  font-size: 13px;
  color: var(--c-accent);
  font-weight: 600;
}
.stat p {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--c-mut);
  letter-spacing: .04em;
}

/* 快捷导航（骑跨到下一区块） */
.quick-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 72px;
  margin-bottom: -50px;
  position: relative;
  z-index: 6;
}

.q-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px 24px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  box-shadow: 0 16px 40px rgba(12, 28, 44, .06);
  overflow: hidden;
  position: relative;
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.q-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 0;
  background: var(--c-accent);
  transition: height .4s var(--ease);
}
.q-ico {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  font-size: 19px;
  color: var(--c-main);
  background: var(--c-main-l);
  border-radius: 50%;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.q-txt { display: flex; flex-direction: column; min-width: 0; }
.q-txt b {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-ink);
  transition: color .4s var(--ease);
  white-space: nowrap;
}
.q-txt em {
  margin-top: 4px;
  font-size: 9.5px;
  letter-spacing: .16em;
  color: #9aa9b8;
  white-space: nowrap;
}
.q-arrow {
  margin-left: auto;
  font-size: 12px;
  color: #c3ccd7;
  transition: color .4s var(--ease), transform .4s var(--ease);
}
.q-card:hover { background: var(--c-main); border-color: var(--c-main); transform: translateY(-4px); }
.q-card:hover::before { height: 100%; background: rgba(255, 255, 255, .6); }
.q-card:hover .q-txt b { color: #fff; }
.q-card:hover .q-txt em { color: rgba(255, 255, 255, .72); }
.q-card:hover .q-ico { background: rgba(255, 255, 255, .18); color: #fff; }
.q-card:hover .q-arrow { color: #fff; transform: translateX(4px); }

/* ==========================================================================
   4. 产品中心
   ========================================================================== */
.products {
  padding: 130px 0 96px;
  background: var(--c-soft);
}
.prod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.prod-card {
  display: block;
  background: var(--c-white);
  border: 1px solid #e8eef4;
  transition: box-shadow .4s var(--ease), transform .4s var(--ease), border-color .4s;
}
.prod-card:hover {
  transform: translateY(-6px);
  border-color: var(--c-main);
  box-shadow: 0 22px 44px rgba(16, 130, 227, .14);
}
.prod-pic {
  position: relative;
  overflow: hidden;
  background: #eef2f6;
}
.prod-pic img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.prod-card:hover .prod-pic img { transform: scale(1.07); }

.prod-mask {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(12, 28, 44, .55);
  color: #fff;
  font-size: 18px;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.prod-card:hover .prod-mask { opacity: 1; transform: none; }

.prod-info {
  padding: 20px 18px 22px;
  text-align: center;
}
.prod-info h3 {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--c-ink);
  transition: color .3s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prod-card:hover .prod-info h3 { color: var(--c-main); }
.prod-line {
  display: block;
  width: 24px;
  height: 2px;
  margin: 12px auto 0;
  background: #dfe6ee;
  transition: width .4s var(--ease), background .4s var(--ease);
}
.prod-card:hover .prod-line { width: 48px; background: var(--c-accent); }

/* ==========================================================================
   5. 通栏广告
   ========================================================================== */
.adband {
  position: relative;
  padding: 76px 0;
  background: var(--c-ink);
  overflow: hidden;
}
.adband-bg { position: absolute; inset: 0; pointer-events: none; }
.adband-shape {
  position: absolute;
  display: block;
  background: var(--c-main);
  opacity: .16;
}
.adband-shape.s1 {
  right: -80px;
  top: -90px;
  width: 380px;
  height: 380px;
  transform: rotate(38deg);
}
.adband-shape.s2 {
  left: 42%;
  bottom: -160px;
  width: 260px;
  height: 260px;
  transform: rotate(20deg);
  opacity: .1;
}
.adband-grid {
  position: absolute;
  right: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(220, 157, 62, .5);
}

.adband-in {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  z-index: 2;
}
.adband-txt { max-width: 720px; }
.adband-en {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .28em;
  color: var(--c-accent);
}
.adband-slogan {
  margin-top: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .02em;
  color: #fff;
}
.adband-sub {
  margin-top: 16px;
  font-size: 14px;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .62);
}

.adband-call {
  flex: 0 0 auto;
  padding-left: 44px;
  border-left: 1px solid rgba(255, 255, 255, .14);
  text-align: right;
}
.adband-call-en {
  display: block;
  font-size: 12px;
  letter-spacing: .2em;
  color: rgba(255, 255, 255, .55);
}
.adband-tel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
  transition: color .3s;
}
.adband-tel i { font-size: 24px; }
.adband-tel:hover { color: #fff; }
.adband-tel-note {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .5);
}

/* ==========================================================================
   6. 公司资质
   ========================================================================== */
.honor { padding: 96px 0; background: var(--c-white); }
.honor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px;
  max-width: 1040px;
  margin: 0 auto;
}
.honor-card {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  padding: 18px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.honor-card:hover {
  transform: translateY(-6px);
  border-color: #d4e2f0;
  box-shadow: 0 26px 50px rgba(12, 28, 44, .12);
}
.honor-pic {
  position: relative;
  display: block;
  overflow: hidden;
  background: #f0f3f7;
}
.honor-pic img {
  width: 100%;
  aspect-ratio: 800 / 564;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.honor-card:hover .honor-pic img { transform: scale(1.03); }
.honor-zoom {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(12, 28, 44, .42);
  color: #fff;
  font-size: 20px;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.honor-card:hover .honor-zoom { opacity: 1; }

.honor-card figcaption {
  padding: 20px 4px 4px;
  text-align: center;
}
.honor-card figcaption h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--c-ink);
}
.honor-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--c-mut);
}
.honor-tag i { color: var(--c-accent); font-size: 11px; }

/* ==========================================================================
   7. 案例展示
   ========================================================================== */
.cases { padding: 96px 0; background: var(--c-soft); }
.case-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.case-card {
  display: block;
  position: relative;
  background: var(--c-white);
  border: 1px solid #e8eef4;
  overflow: hidden;
  transition: box-shadow .45s var(--ease), transform .45s var(--ease);
}
.case-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 46px rgba(12, 28, 44, .13);
}
.case-pic { overflow: hidden; }
.case-pic img {
  width: 100%;
  aspect-ratio: 600 / 350;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.case-card:hover .case-pic img { transform: scale(1.08); }

.case-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-top: 1px solid #eef2f7;
  transition: background .4s var(--ease);
}
.case-bar h3 {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .4s var(--ease);
}
.case-bar i {
  font-size: 11px;
  color: #c3ccd7;
  flex: 0 0 auto;
  transition: color .4s var(--ease), transform .4s var(--ease);
}
.case-card:hover .case-bar { background: var(--c-main); }
.case-card:hover .case-bar h3 { color: #fff; }
.case-card:hover .case-bar i { color: #fff; transform: translateX(4px); }

/* ==========================================================================
   8. 新闻中心
   ========================================================================== */
.news { padding: 96px 0; background: var(--c-white); }
.news-in {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 46px;
}

.nf-card { display: block; }
.nf-pic {
  position: relative;
  overflow: hidden;
  background: #eef2f6;
}
.nf-pic img {
  width: 100%;
  aspect-ratio: 500 / 257;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.nf-card:hover .nf-pic img { transform: scale(1.05); }

.nf-date-tag {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  background: var(--c-main);
  color: #fff;
  line-height: 1;
}
.nf-date-tag b {
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.nf-date-tag em {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: .12em;
  opacity: .82;
}

.nf-body { padding-top: 26px; }
.nf-cat {
  display: inline-block;
  padding: 5px 12px;
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--c-main);
  background: var(--c-main-l);
}
.nf-body h3 {
  margin-top: 16px;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--c-ink);
  transition: color .3s;
}
.nf-card:hover .nf-body h3 { color: var(--c-main); }
.nf-body p {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.95;
  color: var(--c-mut);
}
.nf-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--c-ink);
  transition: color .3s, gap .3s var(--ease);
}
.nf-more i { font-size: 11px; }
.nf-card:hover .nf-more { color: var(--c-main); gap: 16px; }

.news-list { display: block; }
.news-list li { border-bottom: 1px solid var(--c-line); }
.news-list li:first-child { border-top: 1px solid var(--c-line); }
.news-list a {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 22px;
  padding: 24px 4px 24px 16px;
  position: relative;
  transition: background .35s var(--ease), padding-left .35s var(--ease);
}
.news-list a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  background: var(--c-main);
  transform: translateY(-50%);
  transition: height .35s var(--ease);
}
.news-list a:hover { background: var(--c-soft); padding-left: 22px; }
.news-list a:hover::before { height: 60%; }

.nl-date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.nl-date b {
  font-size: 26px;
  font-weight: 700;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  transition: color .35s;
}
.nl-date span {
  margin-top: 7px;
  font-size: 11px;
  letter-spacing: .06em;
  color: #9aa9b8;
}
.news-list a:hover .nl-date b { color: var(--c-main); }

.nl-txt { min-width: 0; }
.nl-txt h3 {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--c-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .3s;
}
.news-list a:hover .nl-txt h3 { color: var(--c-main); }
.nl-txt p {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--c-mut);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nl-arrow {
  font-size: 11px;
  color: #c3ccd7;
  transition: color .35s, transform .35s var(--ease);
}
.news-list a:hover .nl-arrow { color: var(--c-main); transform: translateX(4px); }

/* ==========================================================================
   9. 友情链接
   ========================================================================== */
.links {
  background: #eef1f4;
  border-top: 1px solid #e5eaf0;
}
.links-in {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.links-label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--c-ink-2);
}
.links-label i { color: var(--c-main); font-size: 12px; }
.links-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 26px;
  min-width: 0;
}
.links-list a {
  font-size: 13px;
  color: #7a8b9c;
  transition: color .3s;
}
.links-list a:hover { color: var(--c-main); }

/* ==========================================================================
   10. 页脚
   ========================================================================== */
.site-foot {
  background: #0a1826;
  color: rgba(255, 255, 255, .62);
}
.foot-top {
  display: grid;
  grid-template-columns: 1.45fr .75fr 1.15fr .85fr;
  gap: 50px;
  padding-top: 66px;
  padding-bottom: 56px;
}
.foot-logo { display: inline-block; }
.foot-logo img {
  height: 58px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
  /* 深色页脚里还原为纯白剪影，避免深色中文不可见 */
  filter: brightness(0) invert(1);
  opacity: .94;
}
.foot-intro {
  margin-top: 22px;
  font-size: 13px;
  line-height: 1.95;
  color: rgba(255, 255, 255, .5);
  max-width: 400px;
}
.foot-social {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}
.foot-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 14px;
  color: rgba(255, 255, 255, .68);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: background .3s var(--ease), color .3s, border-color .3s;
}
.foot-social a:hover {
  background: var(--c-main);
  border-color: var(--c-main);
  color: #fff;
}

.foot-col h3 {
  position: relative;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  padding-bottom: 16px;
  margin-bottom: 22px;
}
.foot-col h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20px;
  height: 2px;
  background: var(--c-accent);
}
.foot-nav ul { display: flex; flex-direction: column; gap: 12px; }
.foot-nav a {
  font-size: 13px;
  color: rgba(255, 255, 255, .58);
  transition: color .3s, padding-left .3s var(--ease);
}
.foot-nav a:hover { color: var(--c-accent); padding-left: 4px; }

.foot-contact ul { display: flex; flex-direction: column; gap: 13px; }
.foot-contact li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .58);
}
.foot-contact li i {
  margin-top: 4px;
  font-size: 12px;
  color: var(--c-accent);
  width: 14px;
  flex: 0 0 auto;
}
.foot-contact a:hover { color: #fff; }

.qr-box { display: flex; gap: 14px; }
.qr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}
/* 微信图标 */
.qr-wx {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  font-size: 36px;
  color: #fff;
  background: var(--c-main);
  border-radius: 50%;
  transition: background .3s var(--ease), transform .4s var(--ease);
}
.qr-item:hover .qr-wx { background: var(--c-main-d); transform: translateY(-3px); }
/* 二维码（{label:erweima}） */
.qr-code {
  display: block;
  width: 82px;
  height: 82px;
  padding: 5px;
  background: #fff;
  border-radius: 3px;
  transition: transform .4s var(--ease);
}
.qr-code img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.qr-item:hover .qr-code { transform: translateY(-3px); }
.qr-item em {
  font-size: 11.5px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .45);
}
.qr-note {
  margin-top: 14px;
  font-size: 11.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .34);
}

.foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: #071320;
}
.foot-bottom-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.copyright, .foot-meta {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .38);
}
.foot-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.foot-meta i { color: var(--c-accent); font-size: 11px; }
.foot-meta span { opacity: .35; }
.foot-meta a:hover { color: var(--c-accent); }

/* ==========================================================================
   11. 移动端底部栏 / 返回顶部 / 灯箱
   ========================================================================== */
.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 960;
  display: none;
  background: #fff;
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -6px 24px rgba(12, 28, 44, .08);
  padding-bottom: env(safe-area-inset-bottom);
  transition: transform .35s var(--ease), opacity .3s;
}
/* 抽屉打开时底部栏下沉，避免压住菜单 */
body.nav-open .mobile-bar { transform: translateY(110%); opacity: 0; pointer-events: none; }
.mb-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 56px;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--c-ink-2);
}
.mb-item i { font-size: 17px; color: var(--c-ink-2); }
.mb-item.mb-call {
  background: var(--c-main);
  color: #fff;
}
.mb-item.mb-call i { color: #fff; }

.to-top {
  position: fixed;
  right: 26px;
  bottom: 34px;
  z-index: 940;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: 14px;
  color: #fff;
  background: var(--c-ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s, background .3s;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--c-main); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: rgba(6, 14, 24, .94);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
.lightbox.is-on { opacity: 1; visibility: visible; }
.lb-inner {
  max-width: 960px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transform: scale(.96);
  transition: transform .4s var(--ease);
}
.lightbox.is-on .lb-inner { transform: none; }
.lb-inner img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  background: #fff;
}
.lb-inner figcaption {
  font-size: 14px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .78);
}
.lb-close {
  position: absolute;
  right: 34px;
  top: 30px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 18px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  transition: background .3s, border-color .3s;
}
.lb-close:hover { background: var(--c-main); border-color: var(--c-main); }

/* ==========================================================================
   内页公共：栏目通栏 / 面包屑 / 单页正文
   ========================================================================== */

/* ---------- 栏目通栏（设计尺寸 1920×415，等比缩放，超宽封顶） ---------- */
.phero {
  position: relative;
  height: clamp(210px, 21.62vw, 415px);
  overflow: hidden;
  background: var(--c-main-d);
}
.phero-media {
  position: absolute;
  inset: 0;
}
.phero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 压暗一层，保证白字在任意图片上都可读（实色，不做渐变） */
.phero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(9, 23, 38, .46);
}
.phero-in {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.phero-title {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 2px 18px rgba(6, 16, 28, .35);
}
/* 英文副标题在中文标题下方，黄色短线跟在英文后面（右侧） */
.phero-en {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  line-height: 1;
}
.phero-en i {
  display: block;
  width: 46px;
  height: 3px;
  background: var(--c-accent);
  box-shadow: 0 0 12px rgba(220, 157, 62, .45);
}

/* ---------- 面包屑条 ---------- */
.crumb-bar {
  background: var(--c-white);
  border-bottom: 1px solid var(--c-line);
}
.crumb-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 58px;
  font-size: 13px;
  color: var(--c-mut);
}
.crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}
.crumb-ico { margin-right: 10px; font-size: 13px; color: var(--c-main); }
.crumb a { color: var(--c-mut); }
.crumb a:hover { color: var(--c-main); }
/* 分隔箭头（position 标签输出的 i） */
.crumb i:not(.crumb-ico) { margin: 0 9px; font-size: 9px; color: #c3ccd7; }
/* 末级就是当前栏目，压成正文色且不可点 */
.crumb a:last-of-type { color: var(--c-ink); pointer-events: none; }
.crumb-tip {
  flex: 0 0 auto;
  font-size: 10.5px;
  letter-spacing: .28em;
  color: #c9d4e0;
  text-transform: uppercase;
}

/* ---------- 单页正文：居中标题 → 居中配图 → 正文 ---------- */
.page-sec {
  padding: 74px 0 96px;
  background: var(--c-white);
}
.page-head { margin-bottom: 48px; }
.page-head .sec-title { font-size: 30px; letter-spacing: .06em; }

/* 内容缩略图（16:9）居中，宽度与正文列对齐，复用首页的金线角标装饰 */
.page-figure {
  max-width: 900px;
  margin: 0 auto 52px;
}
.page-figure .about-pic-frame img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.page-prose {
  max-width: 900px;
  margin: 0 auto;
}

/* ---------- 富文本排版 ---------- */
.prose {
  font-size: 15px;
  line-height: 2.05;
  color: var(--c-text);
}
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }
.prose p { margin: 0 0 18px; text-align: justify; }
.prose strong { color: var(--c-ink-2); font-weight: 600; }
/* 正文图片：改回行内块，才能跟随编辑器写入的 text-align（居中 / 右对齐） */
.prose img,
.doc-body img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  margin: 20px 0;
  vertical-align: middle;
}
/* 兜底：编辑器若把对齐写在 img 自身或用 align 属性，按块级居中处理 */
.prose img[align="center"],
.prose img[style*="text-align:center"],
.prose img[style*="text-align: center"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* 图片所在段落去掉首行缩进，否则整段缩进 2em 会把图片带偏 */
.prose > p:has(> img),
.doc-body > p:has(> img) {
  text-indent: 0;
}
.prose h3, .prose h4, .prose h5 { margin: 30px 0 14px; font-size: 18px; color: var(--c-ink); }
.prose ul, .prose ol { margin: 0 0 18px; }
.prose ul li { position: relative; padding-left: 18px; margin-bottom: 8px; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .82em;
  width: 5px;
  height: 5px;
  background: var(--c-accent);
}
.prose ol { list-style: decimal; padding-left: 22px; }
.prose ol li { margin-bottom: 8px; }
.prose blockquote {
  margin: 24px 0;
  padding: 20px 26px;
  background: var(--c-soft);
  border-left: 4px solid var(--c-main);
  color: var(--c-ink-2);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose table { width: 100%; margin: 22px 0; font-size: 14px; }
.prose th, .prose td { padding: 10px 14px; border: 1px solid var(--c-line); text-align: left; }
.prose th { background: var(--c-soft); color: var(--c-ink); font-weight: 600; }
.prose a { color: var(--c-main); border-bottom: 1px solid rgba(16, 130, 227, .32); }
.prose a:hover { border-color: var(--c-main); }

/* ==========================================================================
   专题文档页（购买须知 notice.html / 售后服务 service.html）
   纯排版：只有标题、章节、段落与有序条目，无配图、无图标
   ========================================================================== */
.doc-body {
  max-width: 860px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 2.05;
  color: var(--c-text);
  text-align: justify;
  word-break: break-word;
}
.doc-body > *:first-child { margin-top: 0; }
.doc-body > *:last-child { margin-bottom: 0; }

/* 文档主标题：居中 + 下方通栏细线，细线上压一小段主色短线 */
.doc-body > h2 {
  position: relative;
  margin: 0 0 36px;
  padding-bottom: 24px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .02em;
  color: var(--c-ink);
  text-align: center;
  border-bottom: 1px solid var(--c-line);
}
.doc-body > h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 44px;
  height: 3px;
  margin-left: -22px;
  background: var(--c-main);
}

/* 章节标题：（一）（二）… 左侧主色竖条 */
.doc-body > h3 {
  position: relative;
  margin: 42px 0 18px;
  padding-left: 15px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .02em;
  color: var(--c-ink);
  text-align: left;
}
.doc-body > h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 3px;
  height: .95em;
  background: var(--c-main);
}

/* 段落 */
.doc-body p { margin: 0 0 16px; }

/* 主标题下的导语段：稍重一点，和条目拉开层次 */
.doc-body > h2 + p {
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--c-ink-2);
  letter-spacing: .02em;
}

/* 有序条目：原生序号，底色统一到主色，后台再编辑也不会掉 */
.doc-body ol {
  margin: 0 0 8px;
  padding-left: 26px;
  list-style: decimal;
}
.doc-body ol > li {
  margin-bottom: 11px;
  padding-left: 8px;
  text-align: justify;
}
.doc-body ol > li::marker {
  color: var(--c-main);
  font-weight: 700;
}

/* 售后服务这类纯记叙正文：首行缩进两字，列宽收窄，段落间留白更大 */
.doc-body-text { max-width: 760px; }
.doc-body-text > p {
  margin-bottom: 20px;
  text-indent: 2em;
  line-height: 2.15;
}
.doc-body-text > p:last-child { margin-bottom: 0; }

/* ==========================================================================
   联系我们 contact.html：销售 / 货运 / 售后 / 地址 四组联系方式
   ========================================================================== */
.contact-sec {
  padding: 74px 0 88px;
  background: var(--c-soft);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* 卡片：直角、细描边，hover 抬升 + 顶部主色条 */
.cc-card {
  position: relative;
  padding: 32px 36px 30px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.cc-card::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 3px;
  background: var(--c-main);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.cc-card:hover {
  border-color: #cfe2f5;
  box-shadow: 0 18px 40px rgba(12, 28, 44, .09);
  transform: translateY(-4px);
}
.cc-card:hover::before { transform: scaleX(1); }

.cc-card-wide { grid-column: 1 / -1; }

/* 卡片头：图标方块 + 中文标题 + 英文小字 */
.cc-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--c-line);
}
.cc-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  font-size: 17px;
  color: var(--c-main);
  background: var(--c-main-l);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.cc-card:hover .cc-ico { background: var(--c-main); color: #fff; }
.cc-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 18px;
  letter-spacing: .04em;
}
.cc-en {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .22em;
  color: #a9b8c8;
}

/* 键值对：灰色小标签 + 深色大号码 */
.cc-list { display: grid; gap: 20px; }
.cc-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.cc-row dt {
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--c-mut);
}
.cc-row dd {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-ink);
  word-break: break-all;
}
.cc-row dd a { color: var(--c-ink); }
.cc-row dd a:hover { color: var(--c-main); }

/* 销售 / 货运 / 邮箱 / 三位经理都是单号码卡片，号码放大当主视觉，避免大片留白 */
.cc-card:not(.cc-card-wide) .cc-row dd {
  font-size: 26px;
  letter-spacing: .01em;
  line-height: 1.35;
}
/* 邮箱串更长，字号收一档，避免在窄卡片里换行 */
.cc-card .cc-row dd.cc-mail { font-size: 21px; }

/* 地址：整行横条，图标 + 标题 + 地址并排 */
.cc-addr {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 36px;
}
.cc-addr-txt {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 22px;
  min-width: 0;
}
.cc-addr-k {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-ink);
}
.cc-addr-v {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--c-ink-2);
}

/* 底部工作时间提示 */
.contact-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 34px;
  font-size: 13.5px;
  color: var(--c-mut);
}
.contact-note i { color: var(--c-main); }

/* ==========================================================================
   新闻中心 newslist.html：一排 2 条 + 翻页
   ========================================================================== */
.news-sec {
  padding: 64px 0 88px;
  background: var(--c-soft);
}

/* 卡片：图片在左，内容在右 */
.nlist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

.ncard {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.ncard::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 3px;
  background: var(--c-main);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.ncard:hover {
  border-color: #cfe2f5;
  box-shadow: 0 18px 40px rgba(12, 28, 44, .09);
  transform: translateY(-4px);
}
.ncard:hover::before { transform: scaleX(1); }

.ncard-link {
  display: grid;
  grid-template-columns: 46% minmax(0, 1fr);
  height: 100%;
}

.ncard-pic {
  position: relative;
  overflow: hidden;
  min-height: 196px;
  background: #eef2f6;
}
.ncard-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.ncard:hover .ncard-pic img { transform: scale(1.06); }

.ncard-date {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 7px 13px;
  font-size: 12px;
  letter-spacing: .05em;
  color: #fff;
  background: rgba(8, 20, 32, .72);
  font-variant-numeric: tabular-nums;
}

.ncard-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px 28px 24px;
}
.ncard-title {
  font-size: 18px;
  line-height: 1.55;
  color: var(--c-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .3s;
}
.ncard:hover .ncard-title { color: var(--c-main); }
.ncard-desc {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--c-mut);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ncard-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 18px;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--c-ink-2);
  transition: color .3s, gap .3s var(--ease);
}
.ncard-more i { font-size: 11px; }
.ncard:hover .ncard-more { color: var(--c-main); gap: 15px; }

/* ---------- 翻页：直角按钮，首页/上一页/数字/下一页/尾页常显 ---------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 50px;
  padding-top: 32px;
  border-top: 1px solid var(--c-line);
}
/* 统计条也做成按钮外观，与右侧翻页按钮同一视觉体系 */
.pager-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 40px;
  padding: 0 18px;
  font-size: 13px;
  color: var(--c-mut);
  background: var(--c-white);
  border: 1px solid var(--c-line);
}
.pager-status b { font-weight: 700; color: var(--c-main); font-variant-numeric: tabular-nums; }

.pager-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pager-step,
.pager-nums a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 15px;
  font-size: 13px;
  color: var(--c-ink-2);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  transition: color .3s, border-color .3s, background .3s;
}
.pager-step i { font-size: 10px; }
.pager-step:hover,
.pager-nums a:hover { color: var(--c-main); border-color: var(--c-main); }

.pager-nums { display: inline-flex; align-items: center; gap: 8px; }
.pager-nums a { padding: 0; font-variant-numeric: tabular-nums; }
.pager-nums a.page-num-current {
  color: #fff;
  font-weight: 700;
  background: var(--c-main);
  border-color: var(--c-main);
}
/* 数字间的省略号 */
.pager-nums span.page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 40px;
  font-size: 13px;
  color: var(--c-mut);
}

/* 首尾页 / 上下页到头时的灰态（JS 追加 is-disabled，javascript:; 直接命中） */
.pager-step[href="javascript:;"],
.pager-step.is-disabled {
  color: #b6c2cf;
  background: #f7f9fb;
  border-color: #e9eef4;
  pointer-events: none;
}

/* ==========================================================================
   新闻内容页 news.html
   ========================================================================== */
.art-sec {
  padding: 62px 0 92px;
  background: var(--c-white);
}

.article { max-width: 900px; margin: 0 auto; }

/* 标题区：居中，底部通栏细线压一段主色短线 */
.art-head {
  position: relative;
  margin-bottom: 40px;
  padding-bottom: 28px;
  text-align: center;
  border-bottom: 1px solid var(--c-line);
}
.art-head::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 46px;
  height: 3px;
  margin-left: -23px;
  background: var(--c-accent);
}
.art-title {
  font-size: 29px;
  line-height: 1.45;
  letter-spacing: .02em;
}
.art-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--c-mut);
}
.art-meta i { margin-right: 6px; color: #a9b8c8; }

/* 正文首行缩进两字：直接文本节点靠父级 text-indent，块级子元素各自归零后再给 p 加回 */
.art-body { font-size: 15.5px; text-indent: 2em; }
.art-body > * { text-indent: 0; }
.art-body > p { text-indent: 2em; }

/* 上一篇 / 返回列表 / 下一篇：三者同一排；标签与标题也同一行、不换行 */
.art-pn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  margin-top: 52px;
  padding-top: 34px;
  border-top: 1px solid var(--c-line);
}
.pn-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 48px;
  padding: 0 18px;
  background: var(--c-soft);
  border: 1px solid var(--c-line);
  white-space: nowrap;
  overflow: hidden;
  transition: border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.pn-item:hover {
  background: var(--c-white);
  border-color: #cfe2f5;
  box-shadow: 0 12px 28px rgba(12, 28, 44, .07);
}
.pn-label {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--c-mut);
}
.pn-label i { font-size: 10px; }
.pn-label em { font-style: normal; }
.pn-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .3s;
}
.pn-item:hover .pn-title { color: var(--c-main); }

/* 下一篇：标题在前、标签贴右，文本右对齐 */
.pn-next { justify-content: flex-end; }
.pn-next .pn-title { text-align: right; }

/* 到头了：整块灰掉、不可点 */
.pn-item[href="javascript:;"] {
  pointer-events: none;
  background: #fafbfc;
}
.pn-item[href="javascript:;"] .pn-title {
  font-weight: 500;
  color: #adbccb;
}
.pn-item[href="javascript:;"] .pn-label { color: #c3ccd7; }

/* 返回列表：夹在上下篇中间，和两侧等高 */
.art-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 22px;
  font-size: 13.5px;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--c-ink-2);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  transition: color .3s, background .3s, border-color .3s;
}
.art-back i { font-size: 11px; }
.art-back:hover { color: #fff; background: var(--c-main); border-color: var(--c-main); }

/* ==========================================================================
   客户案例 caseslist.html：一排 4 个，每页 8 个
   卡片复用首页 .case-card，仅列表页加一层淡遮罩做 hover 反馈
   ========================================================================== */
.cases-sec {
  padding: 64px 0 88px;
  background: var(--c-soft);
}

.clist .case-pic { position: relative; }

/* 图片上压一层淡遮罩，hover 淡入（不再放文字按钮，只留轻反馈） */
.clist .case-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 22, 36, .26);
  opacity: 0;
  transition: opacity .45s var(--ease);
}

.clist .case-card:hover .case-pic::after { opacity: 1; }

/* ==========================================================================
   公司资质 imageslist.html：一排 2 个，证书完整显示、点击看大图
   卡片复用首页 .honor-card，列表页只放宽尺寸、改 img 为 contain
   ========================================================================== */
.honor-list-sec {
  padding: 64px 0 88px;
  background: var(--c-soft);
}

.hlist .honor-grid {
  max-width: 1180px;
  gap: 30px;
}

.hlist .honor-card { padding: 16px; }

/* 证书不能裁边：contain 保证整张图完整，背景给白底（以后传竖版 A4 也不切内容） */
.hlist .honor-pic img {
  object-fit: contain;
  background: var(--c-white);
}

/* 遮罩里除了放大镜，再给一行「点击查看大图」提示 */
.hlist .honor-zoom {
  align-content: center;
  gap: 10px;
  font-size: 22px;
  background: rgba(12, 28, 44, .34);
}
.hlist .honor-zoom em {
  font-size: 12px;
  font-style: normal;
  letter-spacing: .12em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

.hlist .honor-card figcaption h3 { font-size: 20px; letter-spacing: .02em; }

/* ==========================================================================
   产品展示 productlist.html：一排 4 个、1:1 方图
   动画刻意区别于其他列表页：
   · 进场不用位移淡入，改用「墨色幕布向上收起 + 图片由大回正」，逐列错开 0.1s
   · hover 不上浮，改用「内描边亮起 + 标题细线延长 + 箭头块浮出」，克制、留白
   ========================================================================== */
.prodlist {
  padding: 64px 0 88px;
  background: var(--c-soft);
}

/* 该类只作为幕布动画的触发标记，卡片本身保持常显（图片靠幕布遮住） */
[data-reveal="mask"] {
  opacity: 1;
  transform: none;
  transition: none;
}

.pw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.pcard {
  --d: 0s;
  position: relative;
  display: block;
  background: var(--c-white);
  counter-increment: pcard;
}
/* 同一行 4 个依次登场，第二行重新计时 */
.pcard:nth-child(4n+2) { --d: .1s; }
.pcard:nth-child(4n+3) { --d: .2s; }
.pcard:nth-child(4n+4) { --d: .3s; }

/* 内描边：平时不出现，hover 才淡淡亮起，保持静态页面的纯净留白 */
.pcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  box-shadow: inset 0 0 0 1px var(--c-main);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.pcard:hover::after { opacity: 1; }

/* 底线：hover 时从左侧扫出的一条 2px 主色线，替代整卡上浮的粗暴反馈 */
.pcard::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 5;
  width: 100%;
  height: 2px;
  background: var(--c-main);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s var(--ease);
  pointer-events: none;
}
.pcard:hover::before { transform: scaleX(1); }

.pcard-pic {
  position: relative;
  overflow: hidden;
  background: var(--c-white);
}

/* 图片：进场从 1.13 缓缓回正（仅列表页）；hover 再轻微推近 */
.pcard-pic img {
  --iz: 1;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transform: scale(var(--iz));
  transition: transform 1.15s var(--ease);
}
.prodlist .pcard-pic img { --iz: 1.13; }
.prodlist .pcard.is-in .pcard-pic img { --iz: 1; }
.pcard:hover .pcard-pic img { --iz: 1.05; }

/* 幕布：初始整片墨色盖住图片，进入视口后向上整体收起（仅列表页） */
.prodlist .pcard-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--c-ink);
  transform: translateY(0);
  transition: transform 1.05s var(--ease);
  transition-delay: var(--d);
}
.prodlist .pcard.is-in .pcard-pic::after { transform: translateY(-101%); }

/* 右下角箭头块：hover 时从下方浮出并反白 */
.pcard-go {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 12px;
  color: var(--c-main);
  background: var(--c-white);
  box-shadow: 0 6px 18px rgba(12, 28, 44, .12);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s var(--ease), transform .45s var(--ease),
              background .35s var(--ease), color .35s var(--ease);
}
.pcard:hover .pcard-go {
  opacity: 1;
  transform: none;
  background: var(--c-main);
  color: var(--c-white);
}

.pcard-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 20px;
}
/* 列表页的文字比幕布晚半拍浮出，形成「图先出、字后到」的层次 */
.prodlist .pcard-info {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--d) + .42s);
}
.prodlist .pcard.is-in .pcard-info { opacity: 1; transform: none; }
.pcard-txt { flex: 1 1 auto; min-width: 0; }
.pcard-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-ink);
  letter-spacing: .01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .35s var(--ease), letter-spacing .5s var(--ease);
}
.pcard:hover .pcard-title { color: var(--c-main); letter-spacing: .05em; }

/* 标题下的细线：hover 从 26px 延到 60px 并转主色 */
.pcard-rule {
  display: block;
  width: 26px;
  height: 1px;
  margin-top: 11px;
  background: #dce4ee;
  transition: width .55s var(--ease), background .55s var(--ease);
}
.pcard:hover .pcard-rule { width: 60px; background: var(--c-main); }

.pcard-arrow {
  flex: 0 0 auto;
  font-size: 13px;
  color: #c5d0dd;
  transition: color .35s var(--ease), transform .45s var(--ease);
}
.pcard:hover .pcard-arrow { color: var(--c-main); transform: translateX(4px); }

/* 减弱动效偏好：幕布直接不显示，序号与图片正常呈现 */
@media (prefers-reduced-motion: reduce) {
  .pcard-pic::after { display: none; }
  .pcard-pic img { --iz: 1; }
}

/* ==========================================================================
   产品详情 product.html：左画廊（多图遍历）+ 右信息吸顶
   延续产品列表的克制语气：细线、留白、大图，不用重色块
   ========================================================================== */
.pd-sec {
  padding: 52px 0 92px;
  background: var(--c-white);
}

.pd-top {
  display: grid;
  grid-template-columns: minmax(0, 660px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

/* ---------- 画廊：缩略图竖排在主图左侧 ---------- */
.pd-gallery {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.pd-main {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  background: var(--c-soft);
}
.pd-main img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .85s var(--ease);
}
.pd-main:hover img { transform: scale(1.035); }

/* 换图时的一次淡入，避免大图硬切 */
@keyframes pdSwap {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: none; }
}
.pd-main img.is-swap { animation: pdSwap .5s var(--ease); }

.pd-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  font-size: 12px;
  color: var(--c-ink);
  background: rgba(255, 255, 255, .94);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.pd-zoom i { font-size: 12px; color: var(--c-main); }
.pd-main:hover .pd-zoom { opacity: 1; transform: none; }

.pd-thumbs {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 12px;
}
.pd-thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  padding: 0;
  overflow: hidden;
  background: var(--c-soft);
  border: 1px solid transparent;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.pd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.pd-thumb:hover img { transform: scale(1.06); }
.pd-thumb.is-on {
  border-color: var(--c-main);
  box-shadow: 0 8px 20px rgba(16, 130, 227, .16);
}

/* ---------- 右侧信息 ---------- */
.pd-info {
  position: sticky;
  top: 116px;
  max-width: 500px;
}

.pd-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.35;
  color: var(--c-ink);
}
.pd-rule {
  display: block;
  width: 44px;
  height: 3px;
  margin: 20px 0 22px;
  background: var(--c-main);
}
.pd-desc {
  font-size: 14.5px;
  line-height: 2;
  color: var(--c-text);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pd-desc:empty { display: none; }

/* 三个卖点：竖分隔线，不用卡片，保持轻 */
.pd-feat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 30px;
  padding: 22px 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.pd-feat li { padding: 0 14px; border-left: 1px solid var(--c-line); }
.pd-feat li:first-child { padding-left: 0; border-left: 0; }
.pd-feat i {
  display: block;
  font-size: 17px;
  color: var(--c-main);
  margin-bottom: 9px;
}
.pd-feat b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-ink);
  letter-spacing: .02em;
}
.pd-feat em {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  font-style: normal;
  letter-spacing: .04em;
  color: var(--c-mut);
}

.pd-actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}
.pd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 156px;
  height: 52px;
  padding: 0 30px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--c-white);
  background: var(--c-main);
  transition: background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.pd-btn:hover {
  background: var(--c-main-d);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(16, 130, 227, .22);
}
.pd-btn i { font-size: 13px; }

.pd-btn-o {
  color: var(--c-ink);
  background: var(--c-white);
  border: 1px solid var(--c-line);
}
.pd-btn-o:hover {
  color: var(--c-main);
  background: var(--c-white);
  border-color: var(--c-main);
  box-shadow: 0 14px 28px rgba(12, 28, 44, .07);
}

.pd-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 22px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--c-mut);
}
.pd-tip i { margin-top: 5px; font-size: 12px; color: var(--c-accent); }

/* ---------- 产品详情 ---------- */
.pd-detail {
  margin-top: 76px;
  padding-top: 46px;
  border-top: 1px solid var(--c-line);
}
.pd-dhead {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.pd-dhead h2 {
  position: relative;
  padding-left: 16px;
  font-size: 23px;
  font-weight: 700;
  color: var(--c-ink);
}
.pd-dhead h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 20px;
  margin-top: -10px;
  background: var(--c-main);
}
.pd-dhead span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .26em;
  color: #a9b8c8;
}
.pd-dbody {
  max-width: 980px;
  margin: 30px auto 0;
  font-size: 15px;
  line-height: 2;
}
.pd-dbody:empty { display: none; }

/* 编辑器里设了居中但外面有 text-indent / 全局 display:block 的干扰，
   这里对「居中段落里的图」再兜一层 block + auto margin，确保一定居中 */
.pd-dbody p[style*="center"] img,
.pd-dbody div[style*="center"] img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 相关产品 ---------- */
.pd-rel {
  margin-top: 54px;
}
.pd-rhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}
.pd-rhead-l { display: flex; align-items: baseline; gap: 14px; }
.pd-rhead h2 {
  position: relative;
  padding-left: 16px;
  font-size: 23px;
  font-weight: 700;
  color: var(--c-ink);
}
.pd-rhead h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 20px;
  margin-top: -10px;
  background: var(--c-main);
}
.pd-rhead span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .26em;
  color: #a9b8c8;
}
.pd-rmore {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--c-mut);
  transition: color .3s var(--ease), gap .3s var(--ease);
}
.pd-rmore i { font-size: 11px; }
.pd-rmore:hover { color: var(--c-main); gap: 13px; }

/* 相关产品固定只放 4 个，多取的在样式层裁掉，避免出现半行 */
.pd-rel .pw-grid > .pcard:nth-child(n+5) { display: none; }
.pd-rel .pcard { background: var(--c-white); }

/* 详情页面包屑：position 标签只到栏目，末尾手动补当前标题 */
.crumb .crumb-cur {
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-ink);
}
.crumb:has(.crumb-cur) a:last-of-type { color: var(--c-mut); pointer-events: auto; }
.crumb:has(.crumb-cur) a:last-of-type:hover { color: var(--c-main); }

/* 产品页的上下篇与正文同宽，避免比正文宽出一大截造成重心偏移 */
.pd-sec .art-pn {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   搜索页 search.html：搜索框 + 结果卡片（复用新闻卡）+ 空结果
   ========================================================================== */
.search-sec {
  padding: 56px 0 92px;
  background: var(--c-soft);
}

/* ---------- 搜索框 ---------- */
.sform {
  max-width: 860px;
  margin: 0 auto;
}
.sform-box {
  display: flex;
  align-items: center;
  height: 62px;
  padding-left: 22px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.sform-box:focus-within {
  border-color: var(--c-main);
  box-shadow: 0 16px 40px rgba(16, 130, 227, .14);
}
.sform-ico {
  flex: 0 0 auto;
  font-size: 15px;
  color: #a9b8c8;
  transition: color .35s var(--ease);
}
.sform-box:focus-within .sform-ico { color: var(--c-main); }
.sform-box input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 16px;
  font-size: 15px;
  color: var(--c-ink);
  background: none;
  border: 0;
}
.sform-box input[type="text"]::placeholder { color: #9aa9b8; }
.sform-box input[type="text"]:focus { outline: none; }
.sform-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 132px;
  height: 100%;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #fff;
  background: var(--c-main);
  transition: background .3s var(--ease), gap .3s var(--ease);
}
.sform-btn i { font-size: 12px; }
.sform-btn:hover { background: var(--c-main-d); gap: 15px; }

.sform-tip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 16px;
  padding-left: 4px;
  font-size: 12.5px;
  color: var(--c-mut);
}
.sform-tip a {
  color: var(--c-ink-2);
  transition: color .3s var(--ease);
}
.sform-tip a:hover { color: var(--c-main); }

/* ---------- 分区标题：竖线 + 中文 + 英文 + 右侧更多 ---------- */
.ssec-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 46px 0 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-line);
}
.ssec-head h2 {
  position: relative;
  padding-left: 15px;
  font-size: 22px;
  font-weight: 700;
  color: var(--c-ink);
}
.ssec-head h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 19px;
  margin-top: -9px;
  background: var(--c-main);
}
.ssec-head span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .24em;
  color: #a9b8c8;
}
.ssec-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 12.5px;
  color: var(--c-mut);
  transition: color .3s var(--ease), gap .3s var(--ease);
}
.ssec-more i { font-size: 10px; }
.ssec-more:hover { color: var(--c-main); gap: 12px; }

/* 没有匹配项时整块（含标题）收起，标题不会孤零零挂着 */
.sres-prod:not(:has(.pcard)),
.sres-news:not(:has(.srow)) { display: none; }

/* 只要有任一段有结果，空态就不出现（不依赖脚本，避免闪现） */
.sres-wrap:has(.pcard) .sempty,
.sres-wrap:has(.srow) .sempty { display: none; }

/* 搜索结果里的产品卡沿用列表页卡片，只是不做幕布进场 */
.sres-prod .pcard { background: var(--c-white); }

/* ---------- 资讯行：一排一个，标题 / 日期 / 简介 ---------- */
.srow {
  position: relative;
  display: block;
  padding: 24px 0;
  border-bottom: 1px solid var(--c-line);
}
.srow::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 50%;
  width: 2px;
  height: 0;
  margin-top: 0;
  background: var(--c-main);
  transition: height .4s var(--ease), margin-top .4s var(--ease);
}
.srow:hover::before { height: 70%; margin-top: -35%; }

.srow-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.srow-title {
  min-width: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-ink);
  transition: color .3s var(--ease);
}
.srow:hover .srow-title { color: var(--c-main); }
.srow-date {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--c-mut);
  font-variant-numeric: tabular-nums;
}
.srow-date i { font-size: 11.5px; color: #b6c4d3; }
.srow:hover .srow-date i { color: var(--c-main); }
.srow-desc {
  margin-top: 9px;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--c-mut);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.srow-desc:empty { display: none; }

/* ---------- 空结果 ---------- */
.sempty {
  max-width: 560px;
  margin: 30px auto 0;
  padding: 58px 30px 54px;
  text-align: center;
  background: var(--c-white);
  border: 1px solid var(--c-line);
}
.sempty-ico {
  display: block;
  font-size: 40px;
  color: #c9d6e3;
}
.sempty-title {
  margin-top: 20px;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-ink);
}
.sempty-desc {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--c-mut);
}
.sempty-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.sbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding: 0 22px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--c-ink);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.sbtn i { font-size: 12px; }
.sbtn:hover { color: var(--c-main); border-color: var(--c-main); }
.sbtn-main {
  color: #fff;
  background: var(--c-main);
  border-color: var(--c-main);
}
.sbtn-main:hover { color: #fff; background: var(--c-main-d); border-color: var(--c-main-d); }