/* ============================================================
   中测（淮安）检测科技有限公司 · 官网全站公共样式
   配色：主色 #005949 墨绿 / 深色文字 #0d3b4a / 强调 #00695c / 浅底 #eef6f3
   ============================================================ */

/* ---------- 基础 ---------- */
*{margin:0;padding:0;box-sizing:border-box}
body{font:14px/1.8 "微软雅黑","Microsoft YaHei",Arial,sans-serif;color:#333;background:#fff;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit;transition:all .3s}
li{list-style:none}
img{display:block;max-width:100%;border:0}
.container{width:1200px;max-width:96%;margin:0 auto}
.clearfix::after{content:"";display:block;clear:both}
input,textarea,button{font-family:inherit;outline:none}

/* ---------- 顶部信息条 ---------- */
.gz-top{height:38px;line-height:38px;background:#0d3b4a;color:#bcd8dc;font-size:13px}
.gz-top .container{display:flex;justify-content:space-between;align-items:center}
.gz-top a{color:#bcd8dc}
.gz-top a:hover{color:#7fe3c4}
.gz-top .r{display:flex;align-items:center;gap:8px}
.gz-top .r img{width:15px;height:15px;display:inline-block;vertical-align:-3px}
.gz-top .tel{font-weight:bold;color:#fff}

/* ---------- 头部导航 ---------- */
.gz-head{background:#fff;position:sticky;top:0;z-index:900;box-shadow:0 2px 12px rgba(2,44,66,.08)}
.gz-head .container{display:flex;align-items:center;justify-content:space-between;height:88px}
.gz-logo img{height:58px;width:auto}
.gz-menu{display:flex;align-items:center;height:88px}
.gz-menu>li{position:relative;height:88px;display:flex;align-items:center}
.gz-menu>li>a{display:flex;align-items:center;height:88px;padding:0 21px;font-size:16px;color:#0d3b4a;font-weight:500;position:relative}
.gz-menu>li>a::after{content:"";position:absolute;left:50%;bottom:24px;width:0;height:2px;background:#005949;transition:all .3s;transform:translateX(-50%)}
.gz-menu>li:hover>a,.gz-menu>li.on>a{color:#005949;font-weight:bold}
.gz-menu>li:hover>a::after,.gz-menu>li.on>a::after{width:60%}
/* 下拉 */
.gz-sub{position:absolute;top:88px;left:50%;transform:translateX(-50%) translateY(8px);min-width:158px;background:#fff;box-shadow:0 8px 28px rgba(2,44,66,.14);padding:6px 0;opacity:0;visibility:hidden;transition:all .26s;z-index:99;border-top:3px solid #005949}
.gz-menu>li:hover .gz-sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.gz-sub li a{display:block;padding:9px 20px;font-size:14px;color:#555;white-space:nowrap}
.gz-sub li a:hover{background:#f0f9f6;color:#005949;padding-left:26px}

/* 手机菜单按钮 */
.gz-toggle{display:none;font-size:22px;color:#0d3b4a;cursor:pointer;padding:8px}

/* ---------- 内页 banner（明亮版） ---------- */
.gz-banner{height:300px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#dceef0}
.gz-banner .bg{position:absolute;inset:0;z-index:1}
.gz-banner .mask{position:absolute;inset:0;background:rgba(255,255,255,.34);z-index:2}
.gz-banner .txt{position:relative;z-index:3;text-align:center;color:#0d3b4a}
.gz-banner .txt h1{font-size:38px;font-weight:bold;letter-spacing:2px;margin-bottom:10px}
.gz-banner .txt p{font-size:13px;letter-spacing:5px;text-transform:uppercase;color:#0e7d68}

/* ---------- 面包屑 ---------- */
.gz-crumb{background:#f6f9f8;padding:16px 0;font-size:13px;color:#8a8a8a;border-bottom:1px solid #eef3f1}
.gz-crumb a{color:#8a8a8a}
.gz-crumb a:hover{color:#005949}
.gz-crumb span{color:#005949}

/* ---------- 通用区块标题 ---------- */
.gz-title{text-align:center;margin-bottom:46px}
.gz-title .en{font-size:13px;letter-spacing:5px;text-transform:uppercase;color:#9db3bd;margin-bottom:10px}
.gz-title h2{font-size:32px;font-weight:bold;color:#0d3b4a;display:inline-block;padding-bottom:16px;position:relative}
.gz-title h2::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:46px;height:3px;background:#005949;border-radius:2px}

/* ---------- 页脚（明亮版） ---------- */
.gz-foot{background:#eef6f3;color:#4a6670;padding:56px 0 0;border-top:1px solid #dcebe6}
.gz-foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:44px;padding-bottom:44px}
.gz-foot .fcol h4{color:#0d3b4a;font-size:16px;font-weight:bold;margin-bottom:22px;position:relative;padding-bottom:12px}
.gz-foot .fcol h4::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:2px;background:#005949}
.gz-foot .fcol p{font-size:13px;line-height:2.1;color:#4a6670}
.gz-foot .fcol ul li{margin-bottom:11px}
.gz-foot .fcol ul li a{font-size:13px;color:#4a6670}
.gz-foot .fcol ul li a:hover{color:#005949;padding-left:5px}
.gz-foot .logo{height:50px;margin-bottom:18px}
.gz-foot .lx li{display:flex;gap:10px;margin-bottom:13px;font-size:13px;line-height:1.75;color:#4a6670}
.gz-foot .lx li b{color:#00695c;font-weight:normal;flex:0 0 42px}
.gz-foot .bottom{background:#e3efeb;padding:20px 0;color:#5c7a84;font-size:13px}
.gz-foot .bottom .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.gz-foot .bottom a{color:#5c7a84}
.gz-foot .bottom a:hover{color:#005949}

/* ---------- 返回顶部 ---------- */
/* ⚠️ bottom 从 80px 提到 132px —— 给右下角的「在线报价」浮动按钮（.gz-fab）让位，
   否则两者会在 bottom 80~108px 区间重叠（2026-09-14） */
#gzTop{position:fixed;right:26px;bottom:132px;width:48px;height:48px;background:#005949;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;opacity:0;visibility:hidden;transition:all .3s;z-index:900;box-shadow:0 8px 22px rgba(0,89,73,.35);border:0}
#gzTop.show{opacity:1;visibility:visible}
#gzTop:hover{background:#007a63;transform:translateY(-4px)}

/* ---------- 右侧悬浮工具栏 ---------- */
.gz-toolbar{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:880;display:flex;flex-direction:column;gap:1px}
.gz-toolbar a{width:52px;height:52px;background:#005949;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;gap:2px;transition:all .3s;border-bottom:1px solid rgba(255,255,255,.14)}
.gz-toolbar a:first-child{border-radius:8px 0 0 0}
.gz-toolbar a:last-child{border-radius:0 0 0 8px}
.gz-toolbar a:hover{background:#005949}
.gz-toolbar a .ic{font-size:18px;line-height:1}
.gz-toolbar a b{font-weight:normal;transform:scale(.85)}

/* ---------- 通用按钮 ---------- */
.gz-btn{display:inline-block;padding:12px 38px;border-radius:40px;font-size:15px;font-weight:bold;cursor:pointer;border:0}
.gz-btn-p{background:#005949;color:#fff}
.gz-btn-p:hover{background:#007a63;transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,89,73,.3)}
.gz-btn-o{border:2px solid #005949;color:#005949;background:transparent}
.gz-btn-o:hover{background:#005949;color:#fff}

/* ---------- 分页 ---------- */
.gz-pager{display:flex;justify-content:center;gap:8px;margin-top:36px;flex-wrap:wrap}
.gz-pager a,.gz-pager span{display:inline-block;min-width:38px;height:38px;line-height:36px;text-align:center;padding:0 13px;border:1px solid #dfe8e5;border-radius:6px;font-size:14px;color:#555;background:#fff;cursor:pointer}
.gz-pager a:hover{border-color:#005949;color:#005949}
.gz-pager .cur{background:#005949;border-color:#005949;color:#fff;font-weight:bold}
.gz-pager .dis{color:#c8c8c8;cursor:not-allowed}

/* ---------- 响应式 ---------- */
@media(max-width:1240px){
  .container{padding-left:20px;padding-right:20px}
  .gz-menu>li>a{padding:0 13px;font-size:15px}
  .gz-foot .cols{grid-template-columns:1fr 1fr;gap:30px}
  .gz-toolbar{display:none}
}
@media(max-width:900px){
  .gz-top{display:none}
  .gz-head .container{height:64px}
  .gz-logo img{height:42px}
  .gz-toggle{display:block}
  .gz-menu{position:fixed;left:0;top:64px;right:0;bottom:0;background:#fff;flex-direction:column;align-items:stretch;height:auto;padding:10px 0;display:none;overflow-y:auto;box-shadow:0 10px 30px rgba(0,0,0,.12)}
  .gz-menu.open{display:flex}
  .gz-menu>li{height:auto;display:block;width:100%}
  .gz-menu>li>a{height:auto;padding:14px 24px;border-bottom:1px solid #f0f4f3;font-size:15px}
  .gz-menu>li>a::after{display:none}
  /* 🚨 手机端二级菜单「占着位置、字却看不见」的真正原因（2026-09-21 用户手机截图报障，已复现）：
     桌面那条展开规则 `.gz-menu>li:hover .gz-sub{transform:translateX(-50%) translateY(0)}`
     优先级是 (0,3,1)，**高于**本块里 `.gz-sub` 的 (0,1,0) —— 所以它压过了下面的 `transform:none`。
     手机点按会产生「粘滞 :hover」，于是桌面那条照样生效，把 390px 宽的二级菜单整体左移 195px；
     子项文字左边距只有 16px，被推到屏幕外，屏幕上只剩一条空白带 —— 看着就像没画出来。
     ⚠️ 用 JS 的 element.click() 测试不会带 :hover，所以之前一直复现不了，别再用它验这个问题。
     修法：选择器补成与桌面同权重的 `.gz-menu>li .gz-sub`，并把 `:hover` 那条一并纳入重置；
     手机端只认 display（由 JS 的 inline style 切换），桌面端完全不受影响。 */
  .gz-menu>li .gz-sub,
  .gz-menu>li:hover .gz-sub{position:static;transform:none;opacity:1;visibility:visible;transition:none;box-shadow:none;border-top:0;padding:0 0 6px 16px;display:none}
  .gz-menu>li:hover .gz-sub{display:block}
  .gz-banner{height:200px}
  .gz-banner .txt h1{font-size:24px}
  .gz-title h2{font-size:24px}
  .gz-foot .cols{grid-template-columns:1fr;gap:26px}
}
@media(max-width:560px){
  .gz-banner{height:170px}
  .gz-banner .txt h1{font-size:20px}
  .gz-foot .bottom .container{flex-direction:column;text-align:center}
  #gzTop{right:14px;bottom:100px;width:42px;height:42px}
}

/* ---------- 右下角「在线报价」浮动按钮（2026-09-14）----------
   客户自助报价程序（/quote/，独立程序）在官网的唯一入口。
   用户明确要求「飘动的入口」→ 独立圆形按钮 + 轻微上下浮动 + 呼吸光圈。
   ⚠️ 位置必须与 #gzTop 错开：#gzTop 已上移到 bottom:132px。
   ⚠️ .gz-toolbar 在 ≤1240px 时 display:none，但本按钮**保留**（移动端更需要入口）。 */
.gz-fab{
  position:fixed;right:26px;bottom:26px;z-index:910;
  width:78px;height:78px;border-radius:50%;
  background:linear-gradient(145deg,#00796a,#005949);
  color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:12.5px;font-weight:bold;line-height:1.2;text-align:center;
  border:2px solid rgba(255,255,255,.55);
  box-shadow:0 10px 26px rgba(0,89,73,.36),0 2px 6px rgba(0,89,73,.22);
  cursor:pointer;
  animation:gzFabFloat 3.2s ease-in-out infinite;
  transition:box-shadow .28s,background .28s
}
.gz-fab .ic{font-size:22px;line-height:1}
.gz-fab .tx{letter-spacing:.5px}
.gz-fab:hover{
  animation:none;transform:translateY(-5px) scale(1.06);
  background:linear-gradient(145deg,#00897a,#006b57);
  box-shadow:0 16px 38px rgba(0,89,73,.46)
}
/* 呼吸光圈：外层扩散，强化「飘动」的存在感 */
.gz-fab::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid rgba(0,137,122,.4);
  animation:gzFabPulse 2.6s ease-out infinite;pointer-events:none
}
@keyframes gzFabFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes gzFabPulse{0%{transform:scale(.9);opacity:.75}70%{transform:scale(1.2);opacity:0}100%{transform:scale(1.2);opacity:0}}
/* 尊重「减少动态效果」偏好 */
@media(prefers-reduced-motion:reduce){
  .gz-fab{animation:none}
  .gz-fab::after{animation:none;opacity:0}
}
/* 小屏：按钮缩小、贴边，仍完整可点 */
@media(max-width:560px){
  .gz-fab{right:14px;bottom:16px;width:64px;height:64px;font-size:11px}
  .gz-fab .ic{font-size:19px}
}

/* ---------- 「报告数据自查」浮动按钮（2026-09-17） ----------
   与「在线报价」**水平并排**，排在它左边。
   ⚠️ 为什么不竖着叠：右下角 bottom:132px 已经被「返回顶部」(#gzTop) 占着，
      竖排会撞上。
   ⚠️ 配色特意用蓝：两个同色圆按钮并排会分不清哪个是哪个。 */
.gz-fab.gz-fab-2{right:118px;background:linear-gradient(145deg,#2a86d0,#1a5f9e)}
.gz-fab.gz-fab-2:hover{background:linear-gradient(145deg,#3a96e0,#1f6fae)}
.gz-fab.gz-fab-2::after{border-color:rgba(42,134,208,.42)}
@media(max-width:560px){
  .gz-fab.gz-fab-2{right:90px;bottom:16px;width:64px;height:64px;font-size:11px}
}