/* ============================================================
   苏州市智坤自动化设备有限公司 - 全站样式
   严格对照 index.psd（1920×9467）还原
   主色 #f64f23 / 深藏青 #002c51 / 产品区 #edeef0 / 页脚 #333
   自适应策略：所有尺寸按「设计稿px ÷ 19.2 = vw」做 clamp 流体缩放
   （1920 视口 1vw = 19.2px），配合 1400/1200/992/768/576 断点做版式堆叠
   ============================================================ */
:root {
  --zk-primary: #f64f23;
  --zk-primary-dark: #d93d13;
  --zk-navy: #002c51;
  --zk-navy-deep: #0b2138;
  --zk-text: #333;
  --zk-title: #171717;
  --zk-gray: #6c6c6c;
  --zk-bg: #edeef0;
  --zk-line: #e3e5e8;
  --zk-radius: 20px;
  /* 通用流体间距（设计稿 px / 19.2） */
  --pad-y: clamp(42px, 4.06vw, 78px);      /* 78 */
  --gap: clamp(14px, 1.56vw, 30px);        /* 30 */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: var(--zk-text);
  background: #fff;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; transition: color .3s, background .3s, border-color .3s, opacity .3s, transform .3s; }
a:hover { color: var(--zk-primary); }
img { max-width: 100%; display: block; border: 0; }
img[data-src] { transition: opacity .5s ease; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; }
input, button, textarea { font-family: inherit; }

/* 容器：设计稿内容区 1600 居中 */
.wrap { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 clamp(16px, 2.08vw, 40px); }

/* ---------------- 顶部橙条 ---------------- */
.topbar {
  background: var(--zk-primary);
  color: #fff;
  font-size: 14px;
  height: clamp(34px, 1.98vw, 38px);
  line-height: clamp(34px, 1.98vw, 38px);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; }
.topbar .tb-right { display: flex; align-items: center; }
.topbar .tb-tel { display: inline-flex; align-items: center; gap: 8px; color: #fff; white-space: nowrap; }
.topbar .tb-tel svg { width: 15px; height: 15px; flex: 0 0 auto; }
.topbar .tb-link {
  color: #fff;
  margin-left: clamp(14px, 1.15vw, 22px);
  padding-left: clamp(14px, 1.15vw, 22px);
  border-left: 1px solid rgba(255,255,255,.45);
  white-space: nowrap;
}
.topbar a:hover { color: #fff; opacity: .82; }

/* ---------------- 导航 ---------------- */
.site-header { background: #fff; position: sticky; top: 0; z-index: 1020; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.site-header .wrap {
  height: clamp(58px, 5.16vw, 99px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.site-header .logo img { height: clamp(32px, 2.81vw, 54px); width: auto; }
.main-nav { display: flex; align-items: center; }
.main-nav > li > a {
  display: block;
  font-size: clamp(16px, .94vw, 18px);
  color: var(--zk-text);
  padding: 0 clamp(10px, 2.5vw, 26px);
  line-height: clamp(58px, 5.16vw, 99px);
  position: relative;
  white-space: nowrap;
}
.main-nav > li > a::after {
  content: "";
  position: absolute;
  left: clamp(10px, 1.35vw, 26px); right: clamp(10px, 1.35vw, 26px);
  bottom: clamp(12px, 1.15vw, 22px);
  height: 3px;
  background: var(--zk-primary);
  transform: scaleX(0);
  transition: transform .35s;
}
.main-nav > li > a:hover,
.main-nav > li > a.active { color: var(--zk-primary); }
.main-nav > li > a:hover::after,
.main-nav > li > a.active::after { transform: scaleX(1); }

.header-search { position: relative; margin-left: clamp(10px, 1.35vw, 26px); flex: 0 0 auto; }
.header-search input {
  width: clamp(120px, 8.75vw, 168px);
  height: clamp(34px, 2.08vw, 40px);
  border: 1px solid #dcdcdc;
  background: #fff;
  padding: 0 44px 0 14px;
  font-size: 14px;
  color: #333;
  outline: none;
  transition: border-color .3s, width .3s;
}
.header-search input::placeholder { color: #989898; }
.header-search input:focus { border-color: var(--zk-primary); }
.header-search button {
  position: absolute;
  right: 1px; top: 50%;
  transform: translateY(-50%);
  width: 42px; height: calc(clamp(34px, 2.08vw, 40px) - 2px);
  border: 0;
  background: transparent;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-search button svg { width: 17px; height: 17px; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 0;
  background: transparent;
  align-items: center;
  justify-content: center;
  color: #333;
}
.nav-toggle svg { width: 26px; height: 26px; }

.nav-toggle .ico-close { display: none; }
.nav-toggle.is-open .ico-menu { display: none; }
.nav-toggle.is-open .ico-close { display: block; }

/* ---------------- Banner ---------------- */
.hero { position: relative; overflow: hidden; }
.hero .swiper { height: 46.9vw; max-height: 900px; min-height: 300px; }
.hero .swiper-slide { position: relative; overflow: hidden; }
.hero .slide-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 6s linear;
}
.hero .swiper-slide-active .slide-bg { transform: scale(1); }

.hero .slide-inner {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 4%;
}
.hero .slide-title {
  color: #fff;
  font-size: clamp(22px, 3.13vw, 60px);
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.3;
  margin-bottom: clamp(12px, 1.35vw, 26px);
}
.hero .slide-sub {
  color: rgba(255,255,255,.92);
  font-size: clamp(14px, 1.56vw, 30px);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: clamp(22px, 2.71vw, 52px);
  max-width: 60%;
}
.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.15vw, 22px);
  background: var(--zk-primary);
  color: #fff;
  font-size: clamp(14px, .94vw, 18px);
  padding: 0 8px 0 clamp(18px, 1.77vw, 34px);
  height: clamp(42px, 2.92vw, 56px);
  border-radius: 40px;
  width: fit-content;
}
.btn-hero .arw {
  width: clamp(32px, 2.29vw, 44px); height: clamp(32px, 2.29vw, 44px);
  border-radius: 50%;
  background: #fff;
  color: var(--zk-primary);
  display: flex; align-items: center; justify-content: center;
  transition: transform .35s;
}
.btn-hero .arw svg { width: 18px; height: 18px; }
.btn-hero:hover { background: var(--zk-primary-dark); color: #fff; }
.btn-hero:hover .arw { transform: translateX(4px); }

.hero .swiper-button-prev,
.hero .swiper-button-next {
  width: clamp(40px, 2.92vw, 56px); height: clamp(40px, 2.92vw, 56px);
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  margin-top: 0;
  top: auto;
  bottom: clamp(30px, 3.23vw, 62px);
  transition: background .3s;
}
.hero .swiper-button-prev { left: max(clamp(16px, 2.08vw, 40px), calc((100% - 1560px) / 2)); }
.hero .swiper-button-next { right: max(clamp(16px, 2.08vw, 40px), calc((100% - 1560px) / 2)); }
.hero .swiper-button-prev::after,
.hero .swiper-button-next::after { font-size: 16px; font-weight: 700; }
.hero .swiper-button-prev:hover,
.hero .swiper-button-next:hover { background: var(--zk-primary); border-color: var(--zk-primary); }
.hero .swiper-pagination {
  bottom: clamp(38px, 4.27vw, 82px);
  left: max(clamp(16px, 2.08vw, 40px), calc((100% - 1560px) / 2 + 90px));
  width: auto;
  text-align: left;
}
.hero .swiper-pagination-bullet {
  width: 7px; height: 7px;
  background: rgba(255,255,255,.55);
  opacity: 1;
  margin: 0 6px !important;
  transition: all .3s;
}
.hero .swiper-pagination-bullet-active { background: #fff; transform: scale(1.5); }

/* ---------------- 区块标题 ---------------- */
.sec { padding: clamp(46px, 4.69vw, 90px) 0; position: relative; }
.sec-head { position: relative; }
.sec-head .wm {
  display: block;
  font-size: clamp(30px, 4.21vw, 80px);
  font-weight: 800;
  line-height: .86;
  letter-spacing: 2px;
  text-transform: uppercase;
  user-select: none;
  white-space: nowrap;
      background: linear-gradient(180deg, #f0dcd6, #efedee);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.sec-head .ttl {
  font-size: clamp(22px, 2.81vw, 54px);
  font-weight: 700;
  color: var(--zk-title);
  line-height: 1.15;
  margin-top: -0.8em;
  position: relative;
  letter-spacing: 2px;
}
.sec-head .sub { font-size: clamp(14px, .83vw, 16px); color: #6c6c6c; margin-top: clamp(8px, .73vw, 14px); }
.sec-head .bar { width: 34px; height: 3px; background: var(--zk-primary); margin-top: clamp(10px, 1.54vw, 15px);display: block; }
.sec-head.center { text-align: center; }
.sec-head.center .bar { margin-left: auto; margin-right: auto; }

/* 通用按钮（深色胶囊 + 橙色圆箭头） */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  height: clamp(44px, 2.92vw, 56px);
  padding: 0 8px 0 clamp(20px, 1.67vw, 32px);
  border-radius: 40px;
  background: var(--zk-navy-deep);
  color: #fff;
  font-size: clamp(14px, .94vw, 18px);
}
.btn-pill .arw {
  width: clamp(34px, 2.29vw, 44px); height: clamp(34px, 2.29vw, 44px);
  border-radius: 50%;
  background: var(--zk-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform .35s;
}
.btn-pill .arw svg { width: 18px; height: 18px; }
.btn-pill:hover { color: #fff; background: #000; }
.btn-pill:hover .arw { transform: translateX(4px); }

/* ---------------- 产品展示 ---------------- */
.products { background: var(--zk-bg); padding: var(--pad-y) 0 clamp(42px, 3.85vw, 74px); }
.products .sec-head { margin-bottom: clamp(20px, 1.77vw, 34px); }
/* 产品主展示：Swiper 左右滑动（图片 + 介绍卡） */
.ps-stage { position: relative; }
.ps-main-swiper { overflow: hidden; }
.ps-main-swiper .swiper-slide { height: auto; }
.ps-row { display: flex; align-items: stretch; gap: var(--gap); height: 100%; }
.ps-photo { flex: 1 1 45%; min-width: 0; overflow: hidden; position: relative; min-height: clamp(300px, 25vw, 520px); }
.ps-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.ps-photo:hover img { transform: scale(1.04); }
.ps-card {
  flex: 0 0 54%;
  min-width: 0;
  background: #fff;
  padding: clamp(26px, 2.92vw, 56px) clamp(22px, 2.6vw, 50px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ps-card .cat { font-size: clamp(15px, .94vw, 18px); color: var(--zk-primary); margin-bottom: 12px; }
.ps-card h3 { font-size: clamp(20px, 1.88vw, 36px); color: #333; font-weight: 700; line-height: 1.3; }
.ps-card .line { width: 34px; height: 3px; background: var(--zk-primary); margin: clamp(16px, 1.25vw, 24px) 0; }
.ps-card .desc { font-size: clamp(14px, .83vw, 16px); color: #6b6b6b; line-height: 2; margin-bottom: clamp(18px, 1.46vw, 28px); }
.ps-feats { display: flex; flex-wrap: wrap; gap: clamp(8px, .73vw, 14px) var(--gap); margin-bottom: clamp(22px, 1.98vw, 38px); }
.ps-feats li {
  font-size: clamp(14px, .94vw, 18px);
  color: #6b6b6b;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: calc(50% - var(--gap) / 2);
}
.ps-feats svg { width: 19px; height: 19px; color: var(--zk-primary); flex: 0 0 auto; }
.btn-block {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--zk-primary);
  color: #fff;
  font-size: 14px;
  height: clamp(40px, 2.5vw, 48px);
  padding: 0 clamp(18px, 1.35vw, 26px);
  width: fit-content;
  transition: background .3s;
}
.btn-block svg { width: 16px; height: 16px; }
.btn-block:hover { background: var(--zk-primary-dark); color: #fff; }

/* 产品主展示：左右滑动箭头 */
.ps-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(36px, 2.6vw, 50px);
  height: clamp(36px, 2.6vw, 50px);
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.6);
  color: #444;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
  transition: background .3s, color .3s, opacity .3s;
}
.ps-nav.prev { left: clamp(8px, .94vw, 18px); }
.ps-nav.next { left: auto; right: auto; }
.ps-nav.next { left: calc(45% - clamp(36px, 2.6vw, 50px) - clamp(8px, .94vw, 18px)); }
.ps-nav svg { width: 18px; height: 18px; }
.ps-nav:hover { background: var(--zk-primary); border-color: var(--zk-primary); color: #fff; }
.ps-nav.swiper-button-disabled { opacity: .35; cursor: default; }

/* 产品切换条：文字节点 */
.ps-tabs { margin-top: clamp(30px, 3.13vw, 60px); display: flex; position: relative; }
.ps-tabs::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: #d9dbde; }
.ps-tabs li { flex: 1; min-width: 0; text-align: center; position: relative; }
.ps-tabs button {
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
  font-size: clamp(14px, .83vw, 16px);
  color: #6b6b6b;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.35vw, 26px);
  transition: color .3s;
}
.ps-tabs .dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #c9ccd0;
  border: 4px solid var(--zk-bg);
  position: relative;
  z-index: 2;
  transition: background .3s, transform .3s;
}
.ps-tabs button span:not(.dot) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-tabs button:hover { color: var(--zk-primary); }
.ps-tabs button.active { color: var(--zk-primary); }
.ps-tabs button.active .dot { background: var(--zk-primary); transform: scale(1.15); }

/* ---------------- 行业应用 ---------------- */
.industry { position: relative; color: #fff; background: url("../images/bg01.jpg") center/cover no-repeat; padding: var(--pad-y) 0 0;aspect-ratio: 16/7; display: flex; flex-direction: column; }
.industry::before { content: ""; position: absolute; inset: 0; background: rgba(4,26,48,.36); }
.industry .wrap { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1; }
.industry .sec-head .wm {     opacity: 0.2;
    background: linear-gradient(180deg, #f0dcd6, rgba(255,255,255,0.3));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;}
.industry .sec-head .ttl { color: #fff; }
.ind-list { display: flex; margin-top: clamp(30px, 2.92vw, 56px); flex: 1; align-items: stretch; }
.ind-item {
  flex: 1;
  min-width: 0;
  border-right: 1px solid rgba(255,255,255,.22);
  padding: clamp(30px, 5.23vw, 62px) 10px clamp(38px, 5.65vw, 70px);
  text-align: center;
  color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background .4s;
}

.ind-list .ind-item:nth-child(n + 6){ display: none; }

.ind-item:last-child { border-right: none; }
.ind-item .ico { height: clamp(52px, 4.06vw, 78px); display: flex; align-items: center; justify-content: center; margin-bottom: clamp(18px, 1.77vw, 34px); }
.ind-item .ico svg { width: clamp(44px, 3.44vw, 66px); height: clamp(44px, 3.44vw, 66px); stroke: #fff; fill: none; stroke-width: 1.4; }
.ind-item h5 { font-size: clamp(16px, 1.25vw, 24px); color: #fff; font-weight: 400; letter-spacing: 1px; }
.ind-item .dash { width: 24px; height: 2px; background: rgba(255,255,255,.55); margin: clamp(14px, 1.25vw, 24px) 0 0; }
.ind-item .plus {
  width: clamp(40px, 2.71vw, 52px); height: clamp(40px, 2.71vw, 52px);
  border-radius: 50%;
  background: #fff;
  color: #333;
  display: flex; align-items: center; justify-content: center;
  margin-top: clamp(20px, 1.77vw, 34px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s, transform .35s;
}
.ind-item .plus svg { width: 18px; height: 18px; }
.ind-item:hover { background: rgba(246,79,35,0.7);; }
.ind-item:hover .plus { opacity: 1; transform: none; }
.ind-item.on { background:rgba(246,79,35,0.7); }
.ind-item.on .plus { opacity: 1; transform: none; }

/* ---------------- 关于我们 ---------------- */
.about { background: #fff; padding: clamp(50px, 5vw, 96px) 0 clamp(50px, 6.5vw, 96px); position: relative; overflow: hidden; }
.about-top { display: flex; gap: clamp(20px, 1.08vw, 40px); align-items: flex-start; position: relative; }
.about .wrap{ position: relative; z-index: 2 }

.about-left { flex: 0 0 34%; min-width: 0; }
.about-left .company {
  font-size: clamp(17px, 1.25vw, 24px);
  color: #3b3b3b;
  font-weight: 700;
  margin-top: clamp(22px, 5.19vw, 82px);
  letter-spacing: 1px;
}
.about-right { flex: 1; min-width: 0; padding-top: clamp(20px, 2.29vw, 44px); }
.about-right p { font-size: clamp(14px, .93vw, 16px); color: #4a4a4a; line-height: 2.05; text-align: justify; }
.about-photo { margin-top: clamp(24px, 2.4vw, 46px); overflow: hidden; display: flex;align-items: flex-end;
    justify-content: space-between; }
.about-photo img { transition: transform .8s;border-radius: 10px; }
.about-photo:hover img { transform: scale(1.03); }
.about-actions { margin-top: clamp(26px, 2.4vw, 46px); position: absolute; bottom: 0; left: 0}
.skyline { height: clamp(100px, 12.04vw, 280px);  background: url("../images/bg02.jpg") center bottom/cover no-repeat; opacity: .9; pointer-events: none;position: absolute; bottom:0; width: 100%; }

/* ---------------- 荣誉资质 ---------------- */
.honor { background: #fff; padding: clamp(40px, 3.44vw, 66px) 0 clamp(24px, 2.08vw, 40px); }
.honor .sec-head { margin-bottom: clamp(24px, 2.29vw, 44px); }
.honor-swiper { position: relative; }
.honor-swiper .swiper { padding-bottom: clamp(28px, 2.4vw, 46px); }
.honor-card { display: block; background: #fff; border: 1px solid #ececec; padding: 8px; transition: box-shadow .4s, transform .4s; }
.honor-card img { width: 100%; height: auto; aspect-ratio: 3/4.15; object-fit: cover; }
.honor-card:hover { box-shadow: 0 16px 36px rgba(0,0,0,.14); transform: translateY(-6px); }
.honor-swiper .swiper-pagination-bullet { width: 8px; height: 8px; background: #d2d2d2; opacity: 1; margin: 0 5px !important; }
.honor-swiper .swiper-pagination-bullet-active { background: var(--zk-primary); }

/* ---------------- 我们的优势 ---------------- */
.adv { position: relative; color: #fff; background: url("../images/bg03.jpg") center/cover no-repeat; padding-top: clamp(44px, 3.85vw, 74px); aspect-ratio: 16/7;}
.adv::before { content: ""; position: absolute; inset: 0; background: rgba(10,26,42,.38); }
.adv > .wrap { position: relative; z-index: 2; }
.adv .sec-head .wm {  background: linear-gradient(180deg, #f0dcd6, rgba(255,255,255,0.3));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;opacity: 0.2 }
.adv .sec-head .ttl { color: #fff; }
.adv-list { display: flex; gap: clamp(12px, 1.04vw, 20px); margin: clamp(26px, 4.4vw, 66px) 0 clamp(26px, 4.4vw, 66px); }
.adv-card {
  flex: 1;
  min-width: 0;
  background: #fff;
  border-radius: var(--zk-radius);
  padding: clamp(26px, 2.29vw, 44px) clamp(20px, 1.77vw, 34px) clamp(24px, 2.08vw, 40px);
  position: relative;
  overflow: hidden;
  color: #333;
  transition: transform .4s, background .4s, color .4s;min-height: 300px;
}
.adv-card .ico { margin-bottom: clamp(16px, 1.35vw, 26px); }
.adv-card .ico svg { width: clamp(32px, 3.08vw, 50px);    height: clamp(32px, 3.08vw, 50px); stroke: #333; fill: none; stroke-width: 1.5; }
.adv-card h5 { font-size: clamp(15px, .94vw, 18px); font-weight: 700; margin-bottom: clamp(8px, .73vw, 14px); color: #222; }
.adv-card p { font-size: 14px; color: #777; line-height: 1.95; position: relative; z-index: 2; }
.adv-card::after {
  content: "";
  position: absolute;
  right: -60px; bottom: -70px;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: #fdece7;
  transition: background .4s;
}
.adv-card.on, .adv-card:hover { background: var(--zk-primary); }
.adv-card.on h5, .adv-card:hover h5 { color: #fff; }
.adv-card.on p, .adv-card:hover p { color: rgba(255,255,255,.88); }
.adv-card.on .ico svg, .adv-card:hover .ico svg { stroke: #fff; }
.adv-card.on::after, .adv-card:hover::after { background: rgba(255,255,255,.14); }

/* 优势图片轮播 */
.adv-gallery { position: relative; background: #fff; padding: clamp(24px, 2.08vw, 40px) 0 clamp(28px, 2.4vw, 46px); margin-top: clamp(30px, 2.92vw, 56px); }
.adv-gallery .wrap { position: relative; }
.adv-gallery .swiper { overflow: hidden; }
.adv-gallery .swiper-slide { width: 19.2%; }
.adv-gallery img { width: 100%; height: 22vw; max-height: 420px; min-height: 180px; object-fit: cover; transition: filter .4s, transform .5s; }
.adv-gallery a:hover img { filter: brightness(1.05); transform: scale(1.02); }
.adv-gallery .swiper-button-prev,
.adv-gallery .swiper-button-next { top: 50%; width: clamp(34px, 2.4vw, 46px); height: clamp(34px, 2.4vw, 46px); border-radius: 50%; background: rgba(0,0,0,.16); color: #fff; margin-top: calc(clamp(34px, 2.4vw, 46px) / -2); }
.adv-gallery .swiper-button-prev { left: 10px; }
.adv-gallery .swiper-button-next { right: 10px; }
.adv-gallery .swiper-button-prev::after,
.adv-gallery .swiper-button-next::after { font-size: 14px; }
.adv-gallery .swiper-button-prev:hover,
.adv-gallery .swiper-button-next:hover { background: var(--zk-primary); }

/* ---------------- 列表资讯 ---------------- */
.news { background: #f6f6f6; padding: clamp(44px, 3.96vw, 76px) 0 clamp(50px, 4.48vw, 86px); }
.news-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: clamp(24px, 2.08vw, 40px); flex-wrap: wrap; }
.news-tabs { display: flex; }
.news-tabs button {
  border: 0;
  font-size: 14px;
  color: #fff;
  padding: 12px clamp(18px, 1.77vw, 34px);
  background: #1a1a1a;
  transition: background .3s;
  white-space: nowrap;
}
.news-tabs button + button { margin-left: 6px; }
.news-tabs button.active { background: var(--zk-primary); }
.news-body { display: flex; gap: var(--gap); align-items: stretch; }
.news-left { flex: 1 1 66%; min-width: 0; }
.news-right { flex: 0 0 31%; min-width: 0; display: flex; flex-direction: column; }
.news-hero { display: flex; }
.news-hero .pic { flex: 1; min-width: 0; overflow: hidden; }
.news-hero .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.news-hero .pic:hover img { transform: scale(1.05); }
.news-hero .hot {
  flex: 1;
  min-width: 0;
  background: var(--zk-primary);
  padding: clamp(20px, 1.77vw, 34px) clamp(18px, 1.67vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
}
.news-hero .hot h4 { font-size: clamp(15px, .94vw, 18px); line-height: 1.65; color: #fff; font-weight: 700; }
.news-hero .hot p { font-size: 14px; line-height: 1.9; color: rgba(255,255,255,.9); margin-top: clamp(10px, .83vw, 16px); }
.news-hero .hot .dt { font-size: 14px; color: rgba(255,255,255,.85); margin-top: clamp(12px, 1.04vw, 20px); }
.news-grid { display: flex; flex-wrap: wrap; margin-top: clamp(20px, 1.77vw, 34px); }
.news-grid a { width: 50%; min-width: 0; padding: 0 clamp(12px, 1.25vw, 24px) clamp(18px, 1.56vw, 30px) 0; display: block; }
.news-grid a:nth-child(even) { padding-right: 0; padding-left: clamp(12px, 1.25vw, 24px); }
.news-grid h5 { font-size: clamp(14px, .83vw, 16px); color: #222; font-weight: 700; margin-bottom: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-grid p { font-size: 14px; color: #8a8a8a; line-height: 1.9; height: 54px; overflow: hidden; }
.news-grid .dt { display: block; font-size: 14px; color: #8a8a8a; margin-top: 12px; }
.news-grid a:hover h5 { color: var(--zk-primary); }

.news-list a {
  display: flex;
  gap: clamp(12px, .94vw, 18px);
  background: #fff;
  padding: clamp(14px, 1.04vw, 20px) clamp(12px, .94vw, 18px);
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
  transition: box-shadow .3s, transform .3s;
}
.news-body .news-list a { flex: 1; align-items: center; }
.news-body .news-list a:last-child { margin-bottom: 0; }
.news-list a:hover { box-shadow: 0 10px 26px rgba(0,0,0,.1); transform: translateY(-2px); }
.news-list .dt-box { flex: 0 0 clamp(52px, 3.23vw, 62px); text-align: center; }
.news-list .dt-box strong { display: block; font-size: clamp(24px, 1.67vw, 32px); font-weight: 700; color: #333; line-height: 1.05; }
.news-list .dt-box span { font-size: 14px; color: #999; }
.news-list .txt { min-width: 0; }
.news-list h5 { font-size: 15px; color: #222; font-weight: 700; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-list p { font-size: 14px; color: #999; line-height: 1.8; height: 46px; overflow: hidden; }
.news-list a:hover h5 { color: var(--zk-primary); }

/* ---------------- 合作客户 ---------------- */
.clients { background: #fff; padding: clamp(40px, 3.23vw, 62px) 0 clamp(44px, 3.65vw, 70px); }
.clients .sec-head { margin-bottom: clamp(24px, 2.08vw, 40px); }
.client-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: clamp(10px, .94vw, 18px); }
.client-item {
  border: 1px solid #ececec;
  height: clamp(92px, 6.88vw, 132px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: clamp(8px, .83vw, 16px);
  transition: box-shadow .35s, border-color .35s, transform .35s;
}
.client-item img { max-width: 100%; max-height: 100%; object-fit: contain; opacity: .85; transition: filter .35s, opacity .35s; }
.client-item:hover { border-color: #ddd; box-shadow: 0 10px 26px rgba(0,0,0,.08); transform: translateY(-3px); }
.client-item:hover img { filter: grayscale(100%);  opacity: 1; }

/* ---------------- 在线留言 ---------------- */
.message { display: flex; }
.message-left {
  flex: 0 0 45%;
  min-width: 0;
  background: url("../images/contact_bg.jpg") center/cover no-repeat, #ebebeb;
  padding: clamp(34px, 3.23vw, 62px) clamp(20px, 3.65vw, 70px) clamp(36px, 3.23vw, 62px) clamp(20px, 5vw, 100px);
  position: relative;
}
.message-left::before { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.72); }
.message-left .inner { position: relative; z-index: 2; }
.message-left .logo-sm img { height: clamp(46px, 3.23vw, 62px); margin-bottom: clamp(18px, 1.56vw, 30px); }
.message-left h4 { font-size: clamp(17px, 1.04vw, 20px); color: #333; margin-bottom: 14px; }
.message-left .bar { width: 30px; height: 3px; background: var(--zk-primary); margin-bottom: clamp(16px, 1.35vw, 26px); }
.message-left li { display: flex; gap: 12px; font-size: 15px; color: #555; line-height: 1.9; margin-bottom: 14px; }
.message-left li b{ font-size: 22px; }
.message-left li svg { width: 18px; height: 18px; color: #666; flex: 0 0 auto; margin-top: 5px; }
.message-left .tel-label { font-size: 16px; color: #333; margin: 18px 0 6px; }
.message-left .tel-num { font-size: clamp(26px, 2.08vw, 40px); font-weight: 700; color: #6c6f73; letter-spacing: 1px; line-height: 1.2; }
.message-left .btn-msg {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--zk-primary);
  color: #fff;
  height: clamp(46px, 2.92vw, 56px);
  padding: 0 clamp(28px, 3.13vw, 60px);
  border-radius: 40px;
  font-size: 14px;
  margin: clamp(18px, 1.35vw, 26px) 0 0;
}
.message-left .btn-msg svg { width: 18px; height: 18px; }
.message-left .btn-msg:hover { background: var(--zk-primary-dark); color: #fff; }

.message-right { flex: 1; min-width: 0; background: #f6f6f6; padding: clamp(38px, 3.33vw, 64px) clamp(20px, 5vw, 96px) clamp(44px, 3.65vw, 70px); }
.message-right .m-title { text-align: center; margin-bottom: clamp(22px, 1.77vw, 34px); }
.message-right .m-title h3 { font-size: clamp(24px, 1.77vw, 34px); color: #1a1a1a; font-weight: 700; letter-spacing: 2px; }
.message-right .m-title .cn { font-size: clamp(15px, .94vw, 18px); color: var(--zk-primary); margin-top: 8px; letter-spacing: 3px; }
.msg-form .row-2 { display: flex; gap: clamp(16px, 1.25vw, 24px); margin-bottom: clamp(16px, 1.25vw, 24px); }
.msg-form .field { flex: 1; min-width: 0; position: relative; }
.msg-form .field svg { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #9a9a9a; }
.msg-form input,
.msg-form textarea {
  width: 100%;
  height: clamp(46px, 2.81vw, 54px);
  border: 0;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  padding: 0 24px 0 52px;
  font-size: 14px;
  color: #333;
  outline: none;
  transition: box-shadow .3s;
}
.msg-form input::placeholder,
.msg-form textarea::placeholder { color: #a0a0a0; }
.msg-form input:focus,
.msg-form textarea:focus { box-shadow: 0 4px 16px rgba(246,79,35,.18); }
.msg-form .btn-submit {
  display: block;
  width: clamp(180px, 12.5vw, 240px);
  height: clamp(46px, 2.92vw, 56px);
  margin: 18px auto 0;
  border: 0;
  border-radius: 30px;
  background: var(--zk-primary);
  color: #fff;
  font-size: 14px;
  letter-spacing: 2px;
  transition: background .3s;
}
.msg-form .btn-submit:hover { background: var(--zk-primary-dark); }

/* ---------------- 页脚 ---------------- */
.footer { background: #333; color: rgba(255,255,255,.65); font-size: 14px; }
.footer .f-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: clamp(20px, 1.56vw, 30px) 0; border-bottom: 1px solid rgba(255,255,255,.1); flex-wrap: wrap; }
.footer .f-logo img { height: clamp(34px, 2.4vw, 46px); filter: brightness(1.05); }
.footer .f-nav { display: flex; flex-wrap: wrap; }
.footer .f-nav a { color: rgba(255,255,255,.75); font-size: clamp(14px, .83vw, 16px); padding: 6px clamp(10px, 1.15vw, 22px); }
.footer .f-nav a:hover, .footer .f-nav a.on { color: var(--zk-primary); }
.footer .f-main { display: flex; padding: clamp(28px, 2.29vw, 44px) 0 clamp(32px, 2.6vw, 50px); align-items: flex-start; gap: clamp(20px, 6vw, 90px); flex-wrap: wrap; }
.footer .qr-box { display: flex; gap: 18px; }
.footer .qr-item { text-align: center; }
.footer .qr-item img { width: clamp(88px, 5.83vw, 112px); height: clamp(88px, 5.83vw, 112px); object-fit: contain; background: #fff; padding: 5px; }
.footer .qr-item span { display: block; font-size: 14px; color: rgba(255,255,255,.55); margin-top: 10px; }
.footer .f-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,.55); margin-bottom: 12px; }
.footer .f-label svg { width: 16px; height: 16px; }
.footer .f-tel { font-size: clamp(20px, 1.35vw, 26px); color: #fff; line-height: 1.55; font-weight: 400; letter-spacing: .5px; }
.footer .f-tel  i{ font-style: normal; font-size: 14px;margin-left: 15px; }
.footer .f-addr { font-size: 14px; color: rgba(255,255,255,.72); line-height: 1.9; max-width: 400px; }
.footer .f-msg { width: 62px; text-align: center; color: rgba(255,255,255,.75); margin-left: auto; align-self: center; }
.footer .f-msg .circ { width: clamp(44px, 2.92vw, 56px); height: clamp(44px, 2.92vw, 56px); border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; transition: background .3s; }
.footer .f-msg .circ svg { width: 22px; height: 22px; }
.footer .f-msg:hover .circ { background: var(--zk-primary); }
.footer .f-bot { display: flex; justify-content: space-between; gap: 8px; padding: 18px 0 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; color: rgba(255,255,255,.45); flex-wrap: wrap; }
.footer .f-bot a { color: rgba(255,255,255,.45); }
.footer .f-bot a:hover { color: var(--zk-primary); }

/* ---------------- 右侧浮动栏 ---------------- */
.float-bar { position: fixed; right: 14px; bottom: 100px; z-index: 1030; display: flex; flex-direction: column; gap: 6px; }
.float-bar a, .float-bar button {
  width: 50px; height: 50px;
  border: 0;
  border-radius: 6px;
  background: rgba(0,44,81,.9);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 11px;
  cursor: pointer;
  transition: background .3s;
}
.float-bar svg { width: 18px; height: 18px; }
.float-bar a:hover, .float-bar button:hover { background: var(--zk-primary); color: #fff; }
.float-bar .qr-wrap { position: relative; }
.float-bar .qr-pop { position: absolute; right: 60px; bottom: 0; width: 130px; background: #fff; padding: 8px; box-shadow: 0 8px 26px rgba(0,0,0,.2); display: none; }
.float-bar .qr-wrap:hover .qr-pop { display: block; }
.float-bar .back-top { display: none; }

/* ---------------- 滚动动效 ---------------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .2s; }
.reveal.d3 { transition-delay: .3s; }
.reveal.d4 { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero .slide-bg { transition: none; }
}

/* ---------------- 内页 ---------------- */
.page-banner { position: relative; height: clamp(180px, 17.7vw, 340px); background: url("../images/banner.jpg") center/cover no-repeat; display: flex; align-items: center; overflow: hidden; }
.page-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,44,81,.92), rgba(0,44,81,.55)); }
.page-banner .wrap { position: relative; z-index: 2; }
.page-banner h2 { font-size: clamp(24px, 2.29vw, 44px); color: #fff; letter-spacing: 3px; }
.page-banner .crumb { font-size: 14px; color: rgba(255,255,255,.72); margin-top: 14px; }
.page-banner .crumb a { color: rgba(255,255,255,.72); }
.page-banner .crumb a:hover { color: var(--zk-primary); }

.page-main { padding: clamp(15px, 1.65vw, 30px) 0 clamp(15px, 1.69vw, 30px); }

/* ============================================================
   内页顶部横排导航（侧边导航改为顶部横排 Tab）
   ============================================================ */
.top-nav {
  background: #fff;
  border-bottom: 1px solid var(--zk-line);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .04);
  position: relative;
  z-index: 5;
}
.top-nav .wrap { display: flex; align-items: stretch; min-height: clamp(56px, 4.27vw, 82px); }

.tn-brand {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--zk-navy);
  color: #fff;
  padding: clamp(10px, .83vw, 16px) clamp(18px, 1.67vw, 32px) clamp(14px, 1.04vw, 20px);
  position: relative;
}
.tn-brand::after {
  content: "";
  position: absolute;
  left: clamp(18px, 1.67vw, 32px);
  bottom: clamp(8px, .63vw, 12px);
  width: 30px;
  height: 3px;
  background: var(--zk-primary);
}
.tn-brand h3 { font-size: clamp(16px, 1.15vw, 22px); font-weight: 700; letter-spacing: 2px; line-height: 1.2; }
.tn-brand p { font-size: clamp(11px, .63vw, 14px); color: rgba(255, 255, 255, .62); letter-spacing: 1px; margin-top: 4px; }

.tn-list { flex: 1 1 auto; display: flex; align-items: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.tn-list::-webkit-scrollbar { display: none; }
.tn-list li { flex: 0 0 auto; display: flex; }
.tn-list a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 clamp(14px, 1.3vw, 28px);
  font-size: clamp(14px, .94vw, 18px);
  color: #555;
  white-space: nowrap;
  position: relative;
  transition: color .3s, background .3s;
}
.tn-list a::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--zk-primary);
  transition: width .3s;
}
.tn-list a:hover,
.tn-list a.on { color: var(--zk-primary); }
.tn-list a:hover::after,
.tn-list a.on::after { width: 62%; }

.tn-tel {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(8px, .63vw, 12px);
  padding-left: clamp(14px, 1.25vw, 26px);
  border-left: 1px solid var(--zk-line);
}
.tn-tel svg { width: clamp(20px, 1.15vw, 24px); height: clamp(20px, 1.15vw, 24px); color: var(--zk-primary); flex: 0 0 auto; }
.tn-tel .lab { font-size: 14px; color: #8b8b8b; }
.tn-tel .num { font-size: clamp(15px, 1.04vw, 20px); font-weight: 700; color: var(--zk-navy); line-height: 1.3; }

.page-layout { display: flex; gap: clamp(20px, 2.08vw, 40px); align-items: flex-start; }
.page-side { flex: 0 0 clamp(220px, 13.96vw, 268px); min-width: 0; }
.side-nav { border: 1px solid var(--zk-line); margin-bottom: 22px; }
.side-nav .s-head { background: var(--zk-navy); color: #fff; font-size: clamp(16px, .94vw, 18px); padding: clamp(14px, 1.04vw, 20px) clamp(16px, 1.25vw, 24px); position: relative; }
.side-nav .s-head::after { content: ""; position: absolute; left: clamp(16px, 1.25vw, 24px); bottom: 0; width: 30px; height: 3px; background: var(--zk-primary); }
.side-nav a { display: block; padding: 14px clamp(16px, 1.25vw, 24px); font-size: 15px; color: #5a5a5a; border-bottom: 1px solid #f2f2f2; border-left: 3px solid transparent; }
.side-nav a:last-child { border-bottom: 0; }
.side-nav a:hover, .side-nav a.on { color: var(--zk-primary); border-left-color: var(--zk-primary); background: #fafafa; }
.side-contact { background: var(--zk-navy); color: rgba(255,255,255,.8); padding: clamp(20px, 1.35vw, 26px) clamp(18px, 1.25vw, 24px); }
.side-contact h6 { color: #fff; font-size: 17px; margin-bottom: 14px; }
.side-contact .t { color: var(--zk-primary); font-size: clamp(20px, 1.25vw, 24px); font-weight: 700; line-height: 1.4; }
.side-contact .t span{ font-size: 14px; color: #eee; }
.side-contact p { font-size: 14px; line-height: 1.9; margin-top: 8px; }

.page-content { flex: 1; min-width: 0; width: 100%; }
/* 锚点跳转避开吸顶导航 */
.page-content [id] { scroll-margin-top: clamp(70px, 6vw, 110px); }
.page-title { margin-bottom: clamp(18px, 1.46vw, 28px); }
.page-content .page-title + * { margin-top: 0; }
.page-content > .page-title:not(:first-child) { margin-top: clamp(28px, 2.6vw, 50px); }
.page-title h3 { font-size: clamp(20px, 2.2vw, 30px); color: var(--zk-title); }
.page-title .bar { width: 34px; height: 3px; background: var(--zk-primary); margin-top: 14px; }

.rich { font-size: clamp(14px, .83vw, 16px); color: #4a4a4a; line-height: 2.1; margin-bottom: 30px; }
.rich p + p { margin-top: 18px; }
.rich img { margin: 24px 0; width: 100%; }
.rich h4 { font-size: clamp(17px, 1.04vw, 20px); color: var(--zk-title); margin: 30px 0 14px; }

.prod-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px, 1.25vw, 24px);margin:20px 0; }
.prod-card { display: block; background: #fff; overflow: hidden; position: relative; }
.prod-card .ph { display: block; overflow: hidden; }
.prod-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform .6s;margin:0 !important; }
.prod-card .nm { padding: 16px 4px 6px; font-size: 16px; color: #333; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prod-card .nm svg { width: 20px; height: 20px; color: #bbb; flex: 0 0 auto; }
.prod-card:hover img { transform: scale(1.06); }
.prod-card:hover .nm { color: var(--zk-primary); }

.list-news a { display: flex; gap: clamp(14px, 1.15vw, 22px); padding: clamp(18px, 1.25vw, 24px) 0; border-bottom: 1px dashed #e5e5e5; align-items: flex-start; }
.list-news .dt-box { flex: 0 0 clamp(64px, 4.06vw, 78px); text-align: center; background: #f7f7f8; padding: 12px 0; transition: background .3s; }
.list-news .dt-box strong { display: block; font-size: clamp(24px, 1.56vw, 30px); color: #333; line-height: 1.05; }
.list-news .dt-box span { font-size: 14px; color: #999; }
.list-news h5 { font-size: clamp(15px, .89vw, 17px); color: #222; margin-bottom: 8px; }
.list-news p { font-size: 14px; color: #8c8c8c; line-height: 1.9; }
.list-news a:hover h5 { color: var(--zk-primary); }
.list-news a:hover .dt-box { background: var(--zk-primary); }
.list-news a:hover .dt-box strong,
.list-news a:hover .dt-box span { color: #fff; }

.pager { display: flex; gap: 8px; margin-top: 40px; flex-wrap: wrap;align-items: center;justify-content: center; }
.pager li{ list-style: none; }
.pager li a { min-width: 40px; height: 40px; border: 1px solid #e2e2e2; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; color: #666; font-size: 14px; }
.pager li a.on, .pager li a:hover { background: var(--zk-primary); border-color: var(--zk-primary); color: #fff; }
.page-item.active .page-link{ background: var(--zk-navy);border-color: var(--zk-navy); }



.info-grid { display: flex; gap: var(--gap); flex-wrap: wrap; }
.info-card { flex: 1 1 200px; min-width: 0; border: 1px solid var(--zk-line); padding: clamp(18px, 1.35vw, 26px) clamp(16px, 1.15vw, 22px); transition: border-color .3s, box-shadow .3s; }
.info-card:hover { border-color: var(--zk-primary); box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.info-card svg { width: 26px; height: 26px; color: var(--zk-primary); margin-bottom: 14px; }
.info-card h6 { font-size: 16px; color: #333; margin-bottom: 8px; }
.info-card p { font-size: 14px; color: #777; line-height: 1.9; }

/* 关于页：数字墙 + 资质墙 */
.stat-row { display: flex; gap: var(--gap); flex-wrap: wrap; margin: clamp(24px, 1.77vw, 34px) 0; }
.stat-item { flex: 1 1 160px; background: var(--zk-bg); padding: clamp(18px, 1.56vw, 30px); text-align: center; }
.stat-item b { display: block; font-size: clamp(26px, 2.08vw, 40px); color: var(--zk-primary); line-height: 1.1; }
.stat-item span { display: block; font-size: 14px; color: #6c6c6c; margin-top: 8px; }
.cert-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(12px, .94vw, 18px); margin-top: clamp(18px, 1.25vw, 24px); }
.cert-grid a { display: block; border: 1px solid #ececec; padding: 8px; background: #fff; transition: box-shadow .35s, transform .35s; }
.cert-grid img { width: 100%; aspect-ratio: 3/4.15; object-fit: cover; }
.cert-grid a:hover { box-shadow: 0 14px 30px rgba(0,0,0,.12); transform: translateY(-5px); }

/* ============================================================
   导航二级下拉（参考 zy01.a09.com.cn 结构：nav-link + 下拉面板）
   ============================================================ */
.main-nav > li { position: relative; }
.nav-item > a { display: block; }
.has-sub .sub-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  margin-top: -3px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #9a9a9a;
  cursor: pointer;
  transition: transform .3s, border-top-color .3s;
}
.has-sub:hover .sub-toggle,
.has-sub.open .sub-toggle { border-top-color: var(--zk-primary); transform: rotate(180deg); }

.sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  min-width: 186px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
  border-top: 3px solid var(--zk-primary);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, transform .3s, visibility .3s;
  z-index: 60;
}
.has-sub:hover > .sub-menu,
.has-sub.open > .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.sub-menu a { display: block; padding: 10px 22px; font-size: 16px; color: #555; white-space: nowrap; position: relative; }
.sub-menu a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--zk-primary); transition: width .28s; }
.sub-menu a:hover { color: var(--zk-primary); background: #fafafa; padding-left: 28px; }
.sub-menu a:hover::before { width: 3px; }

/* 产品中心：多列 mega 下拉 */
.sub-mega { width: min(920px, 92vw); padding: clamp(18px, 1.56vw, 30px) clamp(20px, 1.67vw, 32px); }
.mega-wrap { display: flex; gap: clamp(18px, 1.67vw, 32px); }
.mega-group { flex: 1; min-width: 0; }
.mega-group h4 {
  font-size: 15px;
  color: var(--zk-title);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  letter-spacing: .5px;
}
.mega-group ul li a { padding: 7px 0; font-size: 16px; color: #6b6b6b; }
.mega-group ul li a::before { display: none; }
.mega-group ul li a:hover { background: transparent; padding-left: 6px; color: var(--zk-primary); }
.mega-more { display: inline-block; margin-top: 8px; font-size: 14px; color: var(--zk-primary); }
.mega-more:hover { text-decoration: underline; }

/* ============================================================
   内页通用：inside-banner（居中大标题）+ 面包屑（参考站版式）
   ============================================================ */
.inside-banner { position: relative; overflow: hidden; }
.inside-banner .ib-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.inside-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,44,81,.9), rgba(0,44,81,.55)); }
.inside-banner .wrap { position: relative; z-index: 2; padding: clamp(80px, 10.2vw, 150px) clamp(16px, 2.08vw, 40px); text-align: center; }
.inside-banner h1,.inside-banner h3 { font-size: clamp(24px, 2.29vw, 44px); color: #fff; letter-spacing: 4px; font-weight: 700; }
.inside-banner h2 { font-size: clamp(14px, .94vw, 18px); color: rgba(255,255,255,.6); letter-spacing: 3px; text-transform: uppercase; margin-top: 10px; font-weight: 400; }
.crumb-bar { background: #f7f8f9; border-bottom: 1px solid #eee; }
.crumb-bar .wrap { display: flex; align-items: center; gap: 8px; padding-top: 14px; padding-bottom: 14px; font-size: 14px; color: #888; }
.crumb-bar svg { width: 15px; height: 15px; color: var(--zk-primary); flex: 0 0 auto; }
.crumb-bar a { color: #888; }
.crumb-bar a:hover { color: var(--zk-primary); }
.crumb-bar .cur { color: var(--zk-primary); }

/* 侧栏：sol-side（参考站版式：标题块 + 分类列表） */
.sol-side { border: 1px solid var(--zk-line); }
.sol-side-head { background: var(--zk-navy); color: #fff; padding: clamp(16px, 1.35vw, 26px) clamp(16px, 1.25vw, 24px); }
.sol-side-head h3 { font-size: clamp(16px, 2vw, 30px); color: #fff; letter-spacing: 1px; }
.sol-side-head p { font-size: 15px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: 2px; margin-top: 6px; }
.sol-side-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px clamp(16px, 1.25vw, 24px);
  font-size: 15px;
  color: #5a5a5a;
  border-bottom: 1px solid #f2f2f2;
  border-left: 3px solid transparent;
  transition: color .3s, background .3s, border-color .3s;
}
.sol-side-list li:last-child a { border-bottom: 0; }
.sol-side-list a .plus { position: relative; width: 12px; height: 12px; flex: 0 0 auto; }
.sol-side-list a .plus::before,
.sol-side-list a .plus::after { content: ""; position: absolute; background: #c2c2c2; transition: background .3s; }
.sol-side-list a .plus::before { left: 0; top: 5px; width: 12px; height: 2px; }
.sol-side-list a .plus::after { left: 5px; top: 0; width: 2px; height: 12px; }
.sol-side-list a:hover, .sol-side-list a.on { color: var(--zk-primary); background: #fafafa; border-left-color: var(--zk-primary); }
.sol-side-list a:hover .plus::before, .sol-side-list a.on .plus::before,
.sol-side-list a:hover .plus::after, .sol-side-list a.on .plus::after { background: var(--zk-primary); }
.sol-side-list a.on .plus::after { opacity: 0; }
.section{ padding: 50px 0; }



/* 关于页：口号 + 数字墙（参考站 stat） */
.about-slogan { font-size: clamp(20px, 1.67vw, 32px); color: var(--zk-title); font-weight: 700; letter-spacing: 3px; margin-bottom: clamp(14px, 1.04vw, 20px); }
.stat-grid { display: flex; gap: clamp(12px, 1.04vw, 20px); flex-wrap: wrap; margin: clamp(24px, 1.77vw, 34px) 0; }
.stat {
  flex: 1 1 150px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(10px, .83vw, 16px);
  background: var(--zk-bg);
  padding: clamp(16px, 1.25vw, 24px);
  transition: background .35s, transform .35s;
}
.stat:hover { background: var(--zk-primary); transform: translateY(-4px); }
.stat .ico svg { width: clamp(26px, 2vw, 40px);
    height: clamp(26px, 2vw, 40px); color: var(--zk-primary); transition: color .35s; }
.stat:hover .ico svg { color: #fff; }
.stat .num { font-size: clamp(22px, 3.77vw, 44px); font-weight: 700; color: var(--zk-title); line-height: 1.1; transition: color .35s; }
.stat .num sup { font-size: .5em; font-weight: 400; margin-left: 2px; }
.stat .lab { font-size: 16px; color: #6c6c6c; margin-top: 4px; transition: color .35s; display: block; }
.stat:hover .num, .stat:hover .lab { color: #fff; }

/* 关于页：发展历程（横向 swiper + 年份导航条） */
.history-mod {
  position: relative;
  margin-top: clamp(24px, 2.08vw, 40px);
  background: linear-gradient(180deg, #f3f6fa 0%, #fbfcfe 60%, #fff 100%);
  padding: clamp(28px, 2.9vw, 56px) clamp(14px, 1.35vw, 26px) clamp(26px, 2.7vw, 52px);
}
.history-swiper { position: relative; }
/* 贯穿时间轴横线（与圆点中心对齐） */
.history-swiper::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 34px;
  height: 1px;
  background: #e2e6ee;
}
.history-card { position: relative; }
.history-card .dian { position: relative; }
.history-card .dian i {
  width: 20px; height: 20px;
  margin: 24px auto 0;
  display: block;
  border-radius: 50%;
  background: var(--zk-primary);
  border: 4px solid #fff;
  box-shadow: 0 0 0 1px var(--zk-primary);
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}
.history-card .dian::after {
  content: "";
  position: absolute;
  left: 50%; top: 34px;
  width: 0; height: 0;
  transform: translate(-50%, -50%);
  background: rgba(246, 79, 35, .16);
  border-radius: 50%;
  transition: all .3s;
}
.history-card.active .dian::after,
.history-card .dian:hover::after { width: 48px; height: 48px; }
.history-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  border-radius: 8px 8px 0 0;
  background: transparent;
  transition: background .3s;
}
.history-card .year {
  display: block;
  font-size: clamp(17px, 1.35vw, 26px);
  font-weight: 700;
  color: #666;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  text-align: center;
  margin-bottom: clamp(12px, 1.04vw, 20px);
  transition: color .3s;
}
.history-card .txt {
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 8px;
  padding: clamp(14px, 1.25vw, 24px) clamp(12px, 1.04vw, 20px) clamp(14px, 1.15vw, 22px);
  position: relative;
  transition: all .3s ease;
  height: 100%;
  min-height: clamp(180px, 14.6vw, 280px);
  box-sizing: border-box;
}
.history-card .lc_pic { display: block; margin-bottom: clamp(10px, .83vw, 16px); }
.history-card .lc_pic img { width: 100%; display: block; aspect-ratio: 16/10.4; object-fit: cover; }
.history-card h3 { font-size: clamp(14px, .94vw, 18px); font-weight: 600; color: var(--zk-title); margin: 0 0 8px; }
.history-card .t01 p { font-size: clamp(13px, .78vw, 15px); color: #8a8f96; line-height: 1.8; margin: 0; }
.history-card.active .txt {
  background: var(--zk-primary);
  border-color: var(--zk-primary);
  box-shadow: 0 14px 30px rgba(246, 79, 35, .28);
}
.history-card.active::before { background: rgba(255, 255, 255, .4); }
.history-card.active .year { color: var(--zk-primary); }
.history-card.active h3 { color: #fff; }
.history-card.active .t01 p { color: rgba(255, 255, 255, .85); }
/* 左右按钮：与标题行齐平 */
.history-nav {
  position: absolute;
  right: clamp(14px, 1.35vw, 26px);
  top: calc(-1 * clamp(44px, 3.9vw, 66px));
  display: flex;
  gap: 8px;
}
.history-nav button {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid #d6dbe2;
  background: #fff;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .3s;
}
.history-nav button svg { width: 18px; height: 18px; }
.history-nav button:hover { background: var(--zk-primary); border-color: var(--zk-primary); color: #fff; }
.history-nav button.swiper-button-disabled { opacity: .4; cursor: default; }


/* 关于页：荣誉资质轮播（参考 chengao 版式：灰底证书卡 + 箭头 + 胶囊分页） */
.honor-slider { position: relative; margin-top: clamp(20px, 1.77vw, 34px); }
.honor-slider .swiper { overflow: hidden; padding-bottom: 4px; }
.hslide {
  background: #f0f2f7;
  border: 1px solid #e6eaf0;
  border-radius: 6px;
  padding: 16px;
  text-align: center;
  transition: all .3s;
  box-sizing: border-box;
  height: auto;
}
.hslide:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .1); }
.hslide .frame {
  aspect-ratio: 3 / 4;
  border: 1px solid #e0e5ec;
  border-radius: 4px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  background: #fff;
}
.hslide .frame img { display: block; width: 80%; height: 100%; object-fit: cover; margin: 0 auto; }
.hslide p { font-size: 14px; color: #444; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.honor-nav {
  position: absolute;
  right: 0;
  top: -58px;
  display: flex;
  gap: 8px;
  z-index: 3;
}
.honor-nav button {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid #d6dbe2;
  background: #fff;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .3s;
}
.honor-nav button svg { width: 18px; height: 18px; }
.honor-nav button:hover { background: var(--zk-primary); border-color: var(--zk-primary); color: #fff; }
.honor-nav button.swiper-button-disabled { opacity: .4; cursor: default; }
.honor-nav button.swiper-button-disabled:hover { background: #fff; border-color: #d6dbe2; color: #555; }
.honor-pagi { text-align: center; margin-top: 18px; }
.honor-pagi .swiper-pagination-bullet {
  width: 22px; height: 5px;
  border-radius: 3px;
  background: #c9ccd0;
  opacity: 1;
  transition: background .3s;
}
.honor-pagi .swiper-pagination-bullet-active { background: var(--zk-primary); }


/* 产品列表（参考站：3 列 + zoomImg + 名称 + 箭头） */
.product-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px, 1.25vw, 24px); }
.pl-item { display: block; background: #fff; border: 1px solid #f0f0f0; transition: box-shadow .35s, border-color .35s, transform .35s; }
.pl-item .img { display: block; overflow: hidden; position: relative;}
.pl-item .img img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform .6s; }
.pl-item .text { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: clamp(12px, .94vw, 18px) clamp(14px, 1.04vw, 20px); }
.pl-item .text .h2 { font-size: 15px; color: #333; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-item .text .more { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: #f4f4f4; color: #999; display: flex; align-items: center; justify-content: center; transition: all .35s; }
.pl-item .text .more svg { width: 15px; height: 15px; }
.pl-item:hover { box-shadow: 0 14px 32px rgba(0,0,0,.1); border-color: transparent; transform: translateY(-4px); }
.pl-item:hover .img img { transform: scale(1.08); }
.pl-item:hover .text .h2 { color: var(--zk-primary); }
.pl-item:hover .text .more { background: var(--zk-primary); color: #fff; }

/* ============================================================
   断点：仅用于版式堆叠，尺寸仍由 clamp 流体控制
   ============================================================ */
@media (max-width: 1199.98px) {
  .ps-card { flex: 0 0 42%; }
  .ps-feats li { width: 100%; }
  .ind-item { padding: clamp(26px, 3.23vw, 62px) 6px clamp(30px, 3.65vw, 70px); }
  .news-right { flex: 0 0 33%; }
  .page-side { flex: 0 0 clamp(200px, 13.96vw, 268px); }
  .cert-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 991.98px) {
  .topbar .slogan { display: none; }
  .topbar .wrap { justify-content: flex-end; }
  .nav-toggle { display: flex; }
  .main-nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    box-shadow: 0 16px 30px rgba(0,0,0,.1);
    display: none;
    z-index: 50;
    max-height: 70vh;
    overflow-y: auto;
  }
  .main-nav.open { display: flex; }
  .main-nav > li > a { line-height: 1; padding: 18px clamp(16px, 2.08vw, 40px); border-bottom: 1px solid #f2f2f2; font-size: 16px; }
  .main-nav > li > a::after { display: none; }
  .header-search { display: none; }

  /* 移动端：二级菜单改为点击展开的手风琴 */
  .has-sub .sub-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    right: clamp(16px, 2.08vw, 40px);
    top: 18px;
    margin-top: 0;
    width: 30px; height: 30px;
    border: 0;
    opacity: 1;
    visibility: visible;
    position: absolute;
  }
  .has-sub .sub-toggle::after {
    content: "";
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #9a9a9a;
    transition: transform .3s, border-top-color .3s;
  }
  .has-sub.open .sub-toggle::after { border-top-color: var(--zk-primary); transform: rotate(180deg); }
  .sub-menu {
    position: static;
    transform: none;
    min-width: 0;
    width: 100%;
    box-shadow: none;
    border-top: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition: max-height .35s ease;
    background: #fafafa;
  }
  .has-sub.open > .sub-menu { max-height: 640px; transform: none; }
  .sub-menu a { padding: 12px clamp(28px, 4vw, 56px); border-bottom: 1px solid #f0f0f0; }
  .sub-menu a:hover { padding-left: clamp(32px, 4.4vw, 62px); }
  .sub-mega { width: 100%; padding: 0; }
  .mega-wrap { flex-direction: column; gap: 0; }
  .mega-group { border-bottom: 1px solid #f0f0f0; }
  .mega-group h4 { margin: 0; padding: 12px clamp(28px, 4vw, 56px); border-bottom: 0; background: #f2f3f5; }
  .mega-group ul li a { padding: 10px clamp(28px, 4vw, 56px); }
  .mega-more { display: none; }
  .has-sub.open > .sub-mega { max-height: 1400px; }

  .hero .swiper { height: 62vw; min-height: 320px; }
  .hero .slide-sub { max-width: 100%; }
  .hero .swiper-button-prev,
  .hero .swiper-button-next { display: none; }
  .hero .swiper-pagination { left: clamp(16px, 2.08vw, 40px); bottom: 24px; }

  .ps-main { flex-direction: column; }
  .ps-photo, .ps-card { flex: none; width: 100%; }
  .ps-feats li { width: calc(50% - var(--gap) / 2); }
  .ps-tabs { overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .ps-tabs::-webkit-scrollbar { display: none; }
  .ps-tabs li { flex: 0 0 150px; }

  .ind-list { flex-wrap: wrap; }
  .ind-item { flex: 0 0 50%; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.16); padding: 30px 10px 34px; }
  .ind-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.16); }
  .ind-item:last-child { border-bottom: 0; }
  .ind-item .plus { display: none; }

  .about-top { flex-direction: column; gap: 20px; }
  .about-left, .about-right { flex: none; width: 100%; padding-top: 0; }
  .about-right p { font-size: 15px; line-height: 1.95; }
  .about-actions { position: static; margin-top: 24px; }
  .about-actions .btn-pill { width: 100%; justify-content: center; padding: 14px 0; }

  .adv-list { flex-wrap: wrap; gap: 14px; }
  .adv-card { flex: 0 0 calc(50% - 7px); }
  .adv-gallery .swiper-slide { width: 45%; }
  .adv-gallery img { height: 58vw; max-height: none; }

  .news-body { flex-direction: column; }
  .news-left, .news-right { flex: none; width: 100%; }
  .news-grid a { width: 100%; padding: 0 0 clamp(18px, 1.56vw, 30px); }
  .news-grid a:nth-child(even) { padding-left: 0; }
  .news-right { margin-top: 20px; }

  .client-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }

  .message { flex-direction: column; }
  .message-left { flex: none; padding: clamp(34px, 3.23vw, 62px) clamp(16px, 2.08vw, 40px) clamp(36px, 3.23vw, 62px); }
  .message-left .btn-msg { width: 100%; justify-content: center; padding: 0 20px; }
  .message-right { padding: 40px clamp(16px, 2.08vw, 40px) 46px; }
  .msg-form .row-2 { flex-direction: column; gap: 16px; margin-bottom: 16px; }
  .msg-form .btn-submit { width: 100%; }

  .footer .f-main { flex-direction: column; gap: 26px; }
  .footer .f-msg { margin-left: 0; align-self: flex-start; display: flex; align-items: center; gap: 12px; width: auto; }
  .footer .f-msg .circ { margin: 0; }

  .page-layout { flex-direction: column; gap: 26px; align-items: stretch; }
  .page-side { flex: none; width: 100%; }
  .page-content { flex: none; width: 100%; }
  .side-nav ul { display: flex; flex-wrap: wrap; }
  .side-nav a { border-bottom: 0; border-left: 0; border-right: 1px solid #f2f2f2; }
  .prod-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cert-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .float-bar { display: none; }
}

@media (max-width: 767.98px) {
  /* 顶部横排导航：品牌块独占一行，Tab 横向滑动 */
  .top-nav .wrap { flex-wrap: wrap; }
  .tn-brand { flex: 1 1 auto; }
  .tn-tel { flex: 0 0 auto; border-left: 0; padding-left: 0; }
  .tn-tel .lab { display: none; }
  .tn-list { flex: 0 0 100%; border-top: 1px solid var(--zk-line); }
  .tn-list a { padding: 14px clamp(14px, 3.6vw, 22px); font-size: 15px; }

  .hero .swiper { height: 74vw; min-height: 280px; }
  .news-hero { flex-direction: column; }
  .news-hero .pic img { height: 190px; }
  .client-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .prod-grid { grid-template-columns: 1fr; }
  .stat-item { flex: 1 1 calc(50% - var(--gap)); }
  .product-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hs-slide { flex-direction: column; }
  .hs-pic { flex: none; }
  .hs-pic img { min-height: 180px; }
  .stat { flex: 1 1 calc(50% - var(--gap)); }
  .ps-row { flex-direction: column; gap: 0; }
  .ps-photo img { min-height: 0; height: 52vw; }
  .ps-card { padding: clamp(20px, 5.6vw, 30px) clamp(16px, 4.6vw, 24px); }
  .ps-nav { top: 26vw; width: 32px; height: 32px; }
  .ps-nav.prev { left: 8px; }
  .ps-nav.next { left: auto; right: 8px; }
  .ps-nav svg { width: 15px; height: 15px; }
  .ps-tabs { margin-top: 22px; flex-wrap: wrap; }
  .ps-tabs::before { display: none; }
  .ps-tabs li { flex: 0 0 33.3333%; margin-bottom: 16px; }
  .ps-tabs button { font-size: 14px; gap: 10px; }
  .ps-tabs button span:not(.dot) { white-space: normal; line-height: 1.4; }
}

@media (max-width: 575.98px) {
  .topbar { font-size: 12px; }
  .topbar .tb-link { margin-left: 14px; padding-left: 14px; }
  .hero .slide-inner { padding-bottom: 52px; }
  .hero .swiper-pagination { bottom: 16px; }
  .ps-feats li { width: 100%; }
  .adv-card { flex: 0 0 100%; }
  .page-banner { height: 200px; }
  .cert-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .list-news .dt-box { flex: 0 0 64px; }
  .news-list .dt-box strong { font-size: 26px; }
}

/* ============================================================
   V1024 新闻列表（截图版式：左图右文卡片）
   ============================================================ */
.news-cards { display: flex; flex-direction: column; gap: clamp(14px, 1.15vw, 22px); }
.news-card {
  display: flex;
  gap: clamp(16px, 1.46vw, 28px);
  background: #fff;
  border: 1px solid var(--zk-line);
  padding: clamp(14px, 1.15vw, 22px);
  transition: box-shadow .35s, transform .35s;
}
.news-card:hover { box-shadow: 0 16px 36px rgba(0, 0, 0, .1); transform: translateY(-3px); }
.news-card .nc-pic { flex: 0 0 clamp(180px, 13.5vw, 260px); overflow: hidden; }
.news-card .nc-pic img { width: 100%; height: clamp(120px, 8.3vw, 160px); object-fit: cover; display: block; transition: transform .55s; }
.news-card:hover .nc-pic img { transform: scale(1.06); }
.news-card .nc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.news-card .nc-date { font-size: 14px; color: #9a9a9a; }
.news-card h5 { font-size: clamp(16px, 1.15vw, 22px); font-weight: 700; color: var(--zk-title); margin-top: clamp(6px, .52vw, 10px); line-height: 1.45; transition: color .3s; }
.news-card:hover h5 { color: var(--zk-primary); }
.news-card .nc-body > p { font-size: 14px; color: #8c8c8c; line-height: 1.9; margin-top: clamp(8px, .68vw, 13px); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-card .nc-more { margin-top: auto; padding-top: clamp(8px, .73vw, 14px); font-size: 14px; color: var(--zk-navy); display: inline-flex; align-items: center; gap: 5px; transition: color .3s; }
.news-card .nc-more svg { width: 14px; height: 14px; flex: 0 0 auto; transition: transform .3s; }
.news-card:hover .nc-more { color: var(--zk-primary); }
.news-card:hover .nc-more svg { transform: translateX(4px); }

/* ============================================================
   V1024 新闻详情（参考 detail-layout：左正文 + 右推荐/热线）
   ============================================================ */
.detail-layout { display: flex; gap: clamp(20px, 2.08vw, 40px); align-items: flex-start; }
.detail-main { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--zk-line); padding: clamp(20px, 1.88vw, 36px); }
.detail-title { font-size: clamp(20px, 1.56vw, 30px); color: var(--zk-title); line-height: 1.5; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 14px; color: #999; padding: 14px 0 16px; border-bottom: 1px solid var(--zk-line); margin-bottom: clamp(16px, 1.25vw, 24px); }
.detail-body { font-size: clamp(14px, .83vw, 16px); color: #4a4a4a; line-height: 2.1; }
.detail-body p + p { margin-top: 16px; }
.detail-body img { max-width: 100%; width: auto; margin: 20px auto; display: block; }
.detail-body h2 { font-size: clamp(17px, 1.04vw, 20px); color: var(--zk-title); margin: 26px 0 12px; }
.detail-body strong { color: var(--zk-title); }
.detail-pn { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--zk-line); margin-top: clamp(20px, 1.77vw, 34px); padding-top: 18px; }
.detail-pn a { font-size: 14px; color: #888; min-width: 0; }
.detail-pn a span { color: var(--zk-navy); transition: color .3s; }
.detail-pn a:hover span { color: var(--zk-primary); }
.detail-more { margin-top: 28px; text-align: center; }
.btn-more-line { display: inline-flex; align-items: center; gap: 8px; padding: 11px 36px; border: 1px solid var(--zk-line); color: #555; font-size: 14px; transition: all .3s; }
.btn-more-line:hover { background: var(--zk-primary); border-color: var(--zk-primary); color: #fff; }
.detail-aside { flex: 0 0 clamp(240px, 16.15vw, 310px); min-width: 0; }
.aside-box { background: #fff; border: 1px solid var(--zk-line); padding: clamp(16px, 1.25vw, 24px); box-shadow:0 10px 30px rgba(0, 0, 0, .08); }
.aside-box + .aside-box { margin-top: 22px; }
.aside-title { font-size: clamp(17px, 1.04vw, 20px); color: var(--zk-title); padding-bottom: 14px; border-bottom: 1px solid var(--zk-line); margin-bottom: 4px; }
.aside-title em { font-style: normal; color: var(--zk-primary); }
.aside-list li { border-bottom: 1px dashed #ececec; }
.aside-list li:last-child { border-bottom: 0; }
.aside-item { display: flex; gap: 12px; padding: 14px 0; }
.aside-pic { flex: 0 0 84px; }
.aside-pic img { width: 84px; height: 60px; object-fit: cover; display: block; }
.aside-info { flex: 1; min-width: 0; }
.aside-info time { font-size: 14px; color: #aaa; display: block; line-height: 1.5; }
.aside-info p { font-size: 14px; color: #444; line-height: 1.7; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .3s; }
.aside-item:hover p { color: var(--zk-primary); }
.aside-hotline .aside-tel { font-size: clamp(18px, 1.25vw, 24px); font-weight: 700; color: var(--zk-primary); line-height: 1.5; margin-top: 12px; }
.aside-hotline .aside-tel:first-of-type { margin-top: 14px; }
.aside-hotline .aside-note { font-size: 14px; color: #999; line-height: 1.9; margin-top: 12px; }


.faq-sec { background: #fff; }
.faq-head { text-align: center; margin-bottom: 38px; }
.faq-list { max-width: 1040px; margin: 0 auto; }

.faq-item {
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 16px;
  overflow: hidden;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.faq-item:last-child { margin-bottom: 0; }
.faq-item:hover { border-color: rgba(190, 30, 29, .35); box-shadow: var(--shadow); }
.faq-item[open] { border-color: var(--zk-primary); box-shadow: var(--shadow); }

.faq-item > summary {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 26px; cursor: pointer;
  list-style: none; list-style-type: none;
  font-size: 17px; font-weight: 700; color: #222; line-height: 1.55;
  transition: color .25s ease;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ""; }
.faq-item > summary:hover { color: var(--zk-primary); }
.faq-item > summary:focus-visible { outline: 2px solid var(--zk-navy); outline-offset: -2px; }

/* 序号圆标 */
.faq-num {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: rgba(190, 30, 29, .08); color: var(--zk-navy);
  font-size: 14px; font-weight: 900; font-style: italic; letter-spacing: .5px;
  transition: background .25s ease, color .25s ease;
}
.faq-item[open] .faq-num,
.faq-item > summary:hover .faq-num { background: var(--zk-primary); color: #fff; }

.faq-q { flex: 1; }

/* 展开图标：默认「+」，展开后变「−」 */
.faq-arrow { flex: none; position: relative; width: 20px; height: 20px; }
.faq-arrow::before,
.faq-arrow::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: #b3b3b3; transform: translate(-50%, -50%);
  transition: transform .3s ease, opacity .3s ease, background .25s ease;
}
.faq-arrow::before { width: 13px; height: 2px; }
.faq-arrow::after { width: 2px; height: 13px; }
.faq-item[open] .faq-arrow::after { opacity: 0; transform: translate(-50%, -50%) scaleY(0); }
.faq-item[open] .faq-arrow::before,
.faq-item > summary:hover .faq-arrow::before,
.faq-item > summary:hover .faq-arrow::after { background: var(--zk-primary); }

/* 答案区 */
.faq-a {
  padding: 0 26px 24px 76px;
  color: var(--gray); font-size: 15px; line-height: 1.95;
  animation: faqFade .35s ease both;
}
.faq-a p { margin: 0; }
.faq-a a { color: var(--zk-navy); font-weight: 700; }
.faq-a a:hover { text-decoration: underline; }
@keyframes faqFade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 底部引导 */
.faq-more {
  max-width: 1040px; margin: 30px auto 0; text-align: center;
  color: var(--gray); font-size: 14.5px;
}
.faq-more a { color: var(--zk-navy); font-weight: 700; }
.faq-more a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .faq-item > summary { font-size: 15.5px; padding: 16px 16px; gap: 12px; }
  .faq-num { width: 28px; height: 28px; font-size: 12.5px; }
  .faq-a { padding: 0 16px 18px 56px; font-size: 14px; line-height: 1.85; }
  .faq-more { font-size: 14px; margin-top: 22px; }
}


.case-item img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform .4s, box-shadow .4s;
}
.case-item:hover img { transform: translateY(-6px); box-shadow: var(--shadow); }
.case-item figcaption { text-align: center; color: #555; font-size: 16px; line-height: 56px; transition: all .25s;}
.case-item:hover figcaption{ background:var(--zk-navy); color: #fff;  }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 30px; }
.case-grid .case-item { background: #fff; }
.case-grid .case-item a { display: block; }


/* ============================================================
   V1024 产品详情（参考 pv-section：图廊 + 信息 + 选项卡）
   ============================================================ */
.pv-top { display: flex; gap: clamp(20px, 2.08vw, 40px); align-items: stretch; margin-bottom: clamp(24px, 2.08vw, 40px); }
.pv-gallery { flex: 0 0 46%; min-width: 0; }
.pv-main { border: 1px solid var(--zk-line); background: #fff; overflow: hidden; }
.pv-main img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
/* 缩略图：横向滚动条（箭头 / 鼠标拖拽 / 触摸滑动） */
.pv-thumbs-wrap { position: relative; margin-top: 12px; }
.pv-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
  cursor: grab;
}
.pv-thumbs::-webkit-scrollbar { display: none; }
.pv-thumbs.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.pv-thumb {
  flex: 0 0 calc((100% - 45px) / 4.5);
  aspect-ratio: 4 / 3;
  border: 1px solid var(--zk-line);
  padding: 2px;
  background: #fff;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color .3s, transform .3s;
}
.pv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-thumb.on, .pv-thumb:hover { border-color: var(--zk-primary); }
.pv-thumb.on { border-color: var(--zk-primary); box-shadow: inset 0 0 0 1px var(--zk-primary); }
/* 左右滚动箭头（仅桌面显示，移动端用触摸滑动） */
.pv-thumbs-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(11, 43, 75, .78);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background .3s, opacity .3s;
}
.pv-thumbs-nav svg { width: 15px; height: 15px; }
.pv-thumbs-nav.prev { left: 0; }
.pv-thumbs-nav.next { right: 0; }
.pv-thumbs-nav:hover { background: var(--zk-primary); }
.pv-thumbs-nav.is-off { opacity: 0; pointer-events: none; }
/* 桌面：箭头放在两侧留白里，不覆盖缩略图 */
@media (min-width: 992px) {
  .pv-thumbs-wrap { padding: 0 36px; }
  .pv-thumbs-nav { display: flex; }
}
.pv-info { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--zk-line); padding: clamp(20px, 1.77vw, 34px); display: flex; flex-direction: column; }
.pv-info h1 { font-size: clamp(19px, 1.35vw, 26px); color: var(--zk-title); line-height: 1.5; padding-bottom: 14px; border-bottom: 1px solid var(--zk-line); }
.pv-desc, .pv-meta { font-size: 14px; color: #666; line-height: 2; margin-top: 10px; }
.pv-desc b, .pv-meta b { color: var(--zk-title); font-weight: 700; }
.btn-pv-ask { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: var(--zk-primary); color: #fff; font-size: 15px; padding: 12px 42px; margin-top: 22px; transition: background .3s; }
.btn-pv-ask svg { width: 14px; height: 14px; }
.btn-pv-ask:hover { background: var(--zk-primary-dark); color: #fff; }

.pv-tabs { display: flex; border-bottom: 2px solid var(--zk-line); overflow-x: auto; scrollbar-width: none; }
.pv-tabs::-webkit-scrollbar { display: none; }
.pv-tab { flex: 0 0 auto; padding: 13px 28px; font-size: 15px; color: #555; position: relative; transition: color .3s; border:none; }
.pv-tab.on { color: var(--zk-primary); font-weight: 700; }
.pv-tab.on::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--zk-primary); }
.pv-panel { display: none; padding-top: clamp(18px, 1.46vw, 28px); }
.pv-panel.active { display: block; }
.pv-panel img { width: auto; max-width: 100%; display: block; margin: 20px auto; }
.pv-panel .rich img { width: auto; max-width: 100%; }
.pv-table { width: 100%; border-collapse: collapse; }
.pv-table th, .pv-table td { border: 1px solid var(--zk-line); padding: 12px 16px; font-size: 14px; text-align: left; vertical-align: top; }
.pv-table th { background: #f7f8fa; color: var(--zk-title); width: 170px; font-weight: 700; }
.pv-table tr:hover td { background: #fbfbfc; }

.pv-panel p{ font-size: 16px; color: #222; line-height: 36px; }
.pv-panel h4,.pv-panel h2{ font-size: 18px; color: #222; font-weight: bold; line-height: 40px;margin:15px 0; }

.info-pn { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--zk-line); margin-top: clamp(24px, 2.08vw, 40px); padding-top: 18px; font-size: 14px; }
.info-pn a { color: #888; min-width: 0; }
.info-pn a span { color: var(--zk-navy); transition: color .3s; }
.info-pn a:hover span { color: var(--zk-primary); }

/* ---- V1024 响应式 ---- */
@media (max-width: 991.98px) {
  .pv-top { flex-direction: column; }
  .pv-gallery { flex: none; width: 100%; }
  .detail-layout { flex-direction: column; }
  .detail-aside { flex: none; width: 100%; }
}
@media (max-width: 767.98px) {
  /* 移动端每屏约 3.5 张，第 4 张露边提示可滑动 */
  .pv-thumb { flex: 0 0 calc((100% - 35px) / 3.5); }
  .pv-panel p{ font-size: 14px; line-height: 28px; }
  .pv-panel h4,.pv-panel h2{ font-size: 16px; line-height: 32px; }
}
@media (max-width: 575.98px) {
  .news-card { flex-direction: column; gap: 12px; }
  .news-card .nc-pic { flex: none; width: 100%; }
  .news-card .nc-pic img { height: 52vw; }
  .pv-tab { padding: 12px 16px; font-size: 14px; }
  .pv-table th { width: 110px; }
  .detail-pn a, .info-pn a { width: 100%; }
}

/* ============================================================
   V1025 产品图廊：点击看大图 + 左右切换 + 关闭
   ============================================================ */
.pv-main { position: relative; cursor: zoom-in; }
.pv-main img { transition: transform .5s; }
.pv-main:hover img { transform: scale(1.02); }
.pv-zoom-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 14px;
  color: #fff;
  background: rgba(0, 44, 81, .68);
  border-radius: 40px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.pv-zoom-hint svg { width: 15px; height: 15px; }
.pv-main:hover .pv-zoom-hint { opacity: 1; transform: none; }

.pv-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(6, 10, 16, .965);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.pv-lightbox.open { opacity: 1; visibility: visible; }
.pv-lb-swiper { width: 100%; height: 100%; }
.pv-lb-swiper .swiper-wrapper { align-items: center; }
.pv-lb-swiper .swiper-slide { display: flex; align-items: center; justify-content: center; padding: 0 clamp(20px, 5vw, 90px); }
.pv-lb-swiper .swiper-slide img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  transform: scale(.94);
  opacity: 0;
  transition: transform .45s ease, opacity .45s ease;
}
.pv-lb-swiper .swiper-slide-active img { transform: scale(1); opacity: 1; }

.pv-lb-close {
  position: absolute;
  top: clamp(14px, 2vw, 28px);
  right: clamp(14px, 2vw, 28px);
  z-index: 3;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s, transform .3s;
}
.pv-lb-close svg { width: 22px; height: 22px; }
.pv-lb-close:hover { background: var(--zk-primary); transform: rotate(90deg); }

.pv-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: clamp(40px, 3.4vw, 56px);
  height: clamp(40px, 3.4vw, 56px);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s;
}
.pv-lb-nav svg { width: 22px; height: 22px; }
.pv-lb-nav.prev { left: clamp(10px, 1.6vw, 28px); }
.pv-lb-nav.next { right: clamp(10px, 1.6vw, 28px); }
.pv-lb-nav:hover { background: var(--zk-primary); }
.pv-lb-nav.swiper-button-disabled { opacity: .35; cursor: default; }

.pv-lb-count {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 2.4vw, 34px);
  transform: translateX(-50%);
  z-index: 3;
  font-size: 14px;
  color: rgba(255, 255, 255, .82);
  letter-spacing: 2px;
}

/* ============================================================
   V1026 侧栏：桌面完整展开 / 移动端只显示"产品中心"标题条，点击伸缩分类
   （产品仅一级分类，无二级子类）
   ============================================================ */
.sol-side-list a .arr {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: #c2c2c2;
  transition: color .3s, transform .3s;
}
.sol-side-list a:hover .arr,
.sol-side-list a.on .arr { color: var(--zk-primary); transform: translateX(2px); }

/* 侧栏分类卡与咨询热线卡之间留出间距 */
.page-side .sol-side { margin-bottom: clamp(16px, 1.25vw, 22px); }

@media (max-width: 991.98px) {
  .sol-acc .sol-side-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-right: 52px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  /* 右侧箭头指示（收起：向下 / 展开：向上） */
  .sol-acc .sol-side-head::after {
    content: "";
    position: absolute;
    right: clamp(16px, 4vw, 26px);
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -6px;
    border-right: 2px solid rgba(255, 255, 255, .82);
    border-bottom: 2px solid rgba(255, 255, 255, .82);
    transform: rotate(45deg);
    transition: transform .35s, margin-top .35s;
  }
  .sol-acc.open .sol-side-head::after {
    margin-top: -2px;
    transform: rotate(-135deg);
  }
  /* 分类列表：收起为 0 高度，展开平滑拉伸 */
  .sol-acc .sol-side-body {
    display: block;
    overflow: hidden;
    max-height: 0;
    transition: max-height .4s ease;
  }
  .sol-acc.open .sol-side-body { max-height: 640px; }
}

/* ============ 图片列表（图片墙） ============ */
.gal-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: clamp(14px, 1.35vw, 22px);
  margin-bottom: clamp(18px, 1.7vw, 30px);
  border-bottom: 1px solid var(--zk-line, #e3e5e8);
}
.gal-title {
  position: relative; margin: 0;
  font-size: clamp(20px, 1.46vw, 28px); font-weight: 700;
  color: var(--zk-title, #171717); letter-spacing: .5px;
  padding-left: 14px; line-height: 1.3;
}
.gal-title::before {
  content: ""; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 78%; border-radius: 4px;
  background: var(--zk-primary, #f64f23);
}
.gal-sub {
  margin: 8px 0 0 14px;
  font-size: 13px; color: #9a9a9a; letter-spacing: .2px;
}
.gal-count { font-size: 13px; color: #999; padding-bottom: 4px; white-space: nowrap; }
.gal-count b { color: var(--zk-primary, #f64f23); font-size: 16px; font-weight: 700; margin: 0 2px; }

.gal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.15vw, 22px);
}
.gal-item {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--zk-radius, 20px);
  background: var(--zk-bg, #edeef0);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
  transform: translateY(0);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s;
  animation: galIn .6s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes galIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gal-item .gi-pic {
  display: block; position: relative;
  aspect-ratio: 20 / 23; overflow: hidden;
}
.gal-item img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s;
}
.gal-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,44,81,0) 30%, rgba(0,44,81,.55) 100%);
  opacity: 0; transition: opacity .45s; pointer-events: none;
}
.gal-item .gi-zoom {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: clamp(38px, 3.1vw, 54px); height: clamp(38px, 3.1vw, 54px);
  margin: calc(clamp(38px, 3.1vw, 54px) / -2) 0 0 calc(clamp(38px, 3.1vw, 54px) / -2);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff;
  background: rgba(246, 79, 35, .92);
  box-shadow: 0 8px 24px rgba(246, 79, 35, .38);
  opacity: 0; transform: scale(.6);
  transition: opacity .35s, transform .45s cubic-bezier(.2,.7,.2,1);
}
.gal-item .gi-zoom svg { width: 52%; height: 52%; }
.gal-item:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0, 44, 81, .18); }
.gal-item:hover img { transform: scale(1.07); }
.gal-item:hover::after { opacity: 1; }
.gal-item:hover .gi-zoom { opacity: 1; transform: scale(1); }
.gal-item:focus-visible { outline: 3px solid var(--zk-primary, #f64f23); outline-offset: 3px; }

/* 无 hover 设备（手机）常显放大角标 */
@media (hover: none) {
  .gal-item::after { opacity: .55; }
  .gal-item .gi-zoom {
    opacity: 1; transform: scale(.82);
    left: auto; right: 10px; top: 10px;
    margin: 0;
    width: 32px; height: 32px;
    background: rgba(0, 44, 81, .55);
    box-shadow: none;
  }
}

@media (max-width: 1100px) { .gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gal-item { border-radius: 12px; }
  .gal-head { padding-bottom: 12px; margin-bottom: 14px; }
}

/* ============ 图片放大预览 ============ */
.lb-mask {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 24, 40, .93);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .32s, visibility .32s;
  padding: 0;
}
.lb-mask.on { opacity: 1; visibility: visible; }
.lb-fig {
  position: relative; max-width: min(88vw, 900px);
  transform: scale(.94); transition: transform .38s cubic-bezier(.2,.7,.2,1);
  text-align: center;
}
.lb-mask.on .lb-fig { transform: scale(1); }
.lb-fig img {
  display: block; margin: 0 auto;
  max-width: 100%; max-height: 76vh; height: auto; width: auto;
  border-radius: 10px; box-shadow: 0 26px 70px rgba(0, 0, 0, .55);
  background: #0b2138;
}
.lb-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; margin-top: 16px; color: rgba(255, 255, 255, .82);
  font-size: 14px; flex-wrap: wrap;
}
.lb-idx { letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.lb-idx b { color: #fff; font-size: 17px; }
.lb-sep { width: 1px; height: 14px; background: rgba(255, 255, 255, .25); }
.lb-link { color: var(--zk-primary, #f64f23); font-weight: 600; }
.lb-link:hover { color: #fff; }
.lb-close, .lb-prev, .lb-next {
  position: absolute; z-index: 3; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(255, 255, 255, .12);
  border-radius: 50%; width: 52px; height: 52px;
  transition: background .3s, transform .3s;
  -webkit-tap-highlight-color: transparent;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: var(--zk-primary, #f64f23); }
.lb-close svg, .lb-prev svg, .lb-next svg { width: 24px; height: 24px; }
.lb-close { top: 24px; right: 24px; }
.lb-prev { left: 3vw; top: 50%; transform: translateY(-50%); }
.lb-next { right: 3vw; top: 50%; transform: translateY(-50%); }
.lb-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lb-next:hover { transform: translateY(-50%) translateX(3px); }
.lb-close:hover { transform: rotate(90deg); }
.lb-mask.no-prev .lb-prev, .lb-mask.no-next .lb-next { opacity: .25; pointer-events: none; }
@media (max-width: 760px) {
  .lb-close { top: 14px; right: 14px; width: 42px; height: 42px; }
  .lb-prev { left: 8px; width: 42px; height: 42px; }
  .lb-next { right: 8px; width: 42px; height: 42px; }
  .lb-fig img { max-height: 68vh; }
  .lb-bar { gap: 12px; font-size: 13px; }
}
body.lb-lock { overflow: hidden; }