@charset "utf-8";
/* ==========================================================================
安通瑞达 QUOWN · 前台设计系统 v2
目录结构：/template/antongruida/
基准：1440 设计稿 / 栅格 1280 / 8pt 间距体系
========================================================================== */
/* ---------- 1. 设计令牌 ---------- */
:root{
/* 品牌色 */
--q-primary:#0B2E59; /* 工业蓝 · 主色 */
--q-primary-light:#12447F;
--q-primary-dark:#07203D;
--q-accent:#E8590C; /* 安全橙 · 行动色 */
--q-accent-hover:#C74909;
--q-success:#0F7B4F;
--q-warn:#BA7517;
--q-danger:#C0322F;
/* 中性色 */
--q-text:#1B2430;
--q-text-2:#48566A;
--q-text-3:#77869B;
--q-border:#E3E8EF;
--q-border-2:#CBD5E1;
--q-bg:#F4F6F9;
--q-bg-2:#EDF1F6;
--q-white:#fff;
/* 排版 */
--q-font:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
--q-mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
--q-fs-xs:12px; --q-fs-sm:13px; --q-fs-base:14px;
--q-fs-lg:16px; --q-fs-xl:20px; --q-fs-2xl:28px; --q-fs-3xl:38px;
/* 间距 */
--q-g1:8px; --q-g2:16px; --q-g3:24px; --q-g4:32px; --q-g5:48px; --q-g6:72px;
/* 圆角 */
--q-r-sm:4px; --q-r:8px; --q-r-lg:12px;
/* 阴影（克制使用，仅浮层） */
--q-sh-1:0 1px 3px rgba(11,46,89,.08);
--q-sh-2:0 4px 16px rgba(11,46,89,.10);
--q-sh-nav:0 2px 12px rgba(11,46,89,.08);
--q-wrap:1280px;
}
/* ---------- 2. 基础重置 ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
margin:0;font-family:var(--q-font);font-size:var(--q-fs-base);
line-height:1.7;color:var(--q-text);background:var(--q-white);
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;border:0;}
a{color:inherit;text-decoration:none;transition:color .15s;}
a:hover{color:var(--q-accent);}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5{margin:0;font-weight:600;line-height:1.4;}
p{margin:0;}
button,input,select,textarea{font-family:inherit;font-size:inherit;outline:none;}
table{border-collapse:collapse;width:100%;}
/* 键盘可达性 */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
outline:2px solid var(--q-accent);outline-offset:2px;
}
.q-wrap{width:100%;max-width:var(--q-wrap);margin:0 auto;padding:0 20px;}
.q-visually-hidden{
position:absolute!important;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;
}
/* ---------- 3. 顶部工具条 ---------- */
.q-topbar{
background:var(--q-primary-dark);color:rgba(255,255,255,.72);
font-size:var(--q-fs-xs);height:34px;line-height:34px;
}
.q-topbar a{color:rgba(255,255,255,.72);}
.q-topbar a:hover{color:#fff;}
.q-topbar .q-wrap{display:flex;justify-content:space-between;align-items:center;}
.q-topbar-l{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.q-topbar-r{display:flex;gap:var(--q-g2);align-items:center;}
.q-topbar .q-sep{opacity:.35;}
/* ---------- 4. 头部导航 ---------- */
.q-header{background:var(--q-white);position:sticky;top:0;z-index:100;}
/* 头部三段布局：logo（左）· 搜索区（弹性，占满中间）· 按钮（右）
搜索区不加 max-width，让它吃掉 logo 与按钮之间的全部空间，
热搜词行也随之拉开，不再挤在 logo 右侧。 */
.q-header-main{display:flex;align-items:center;gap:var(--q-g4);padding:var(--q-g2) 0;}
.q-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.q-logo img{height:56px;width:auto;}
.q-logo-txt strong{
display:block;font-size:var(--q-fs-xl);font-weight:700;
color:var(--q-primary);letter-spacing:.5px;line-height:1.2;
}
.q-logo-txt span{display:block;font-size:11px;color:var(--q-text-3);letter-spacing:2px;}
/* 站内搜索：权重提高 */
/* 搜索区：吃掉 logo 与按钮之间的全部空间，宽度上限 860px。
用 flex:1 而非 margin-left:auto，使左端紧邻 logo（有呼吸间距由 gap 提供）、
右端顶住按钮，整体在头部居中偏右，不会在宽屏飘到最右。 */
.q-hsearch{flex:1 1 auto;min-width:0;max-width:860px;}
.q-hsearch form{display:flex;}
.q-hsearch input[type=text]{
flex:1;height:40px;padding:0 14px;border:1.5px solid var(--q-border-2);
border-right:0;border-radius:var(--q-r) 0 0 var(--q-r);
font-size:var(--q-fs-sm);background:var(--q-bg);
}
.q-hsearch input[type=text]:focus{border-color:var(--q-primary);background:#fff;}
.q-hsearch button{
height:40px;padding:0 20px;background:var(--q-primary);color:#fff;
border:0;border-radius:0 var(--q-r) var(--q-r) 0;cursor:pointer;
font-size:var(--q-fs-sm);
}
.q-hsearch button:hover{background:var(--q-primary-light);}
/* 热搜词：SEO 内部链接 */
/* 热搜词：置于搜索框下方独占一行。
不能用绝对定位（会溢出头部被导航浮层遮住），
也需让 .q-hsearch 参与 flex 布局以保证换行空间。 */
.q-hsearch-hot{
margin-top:8px;font-size:var(--q-fs-xs);
color:var(--q-text-3);display:flex;gap:10px;flex-wrap:wrap;align-items:center;
}
.q-hsearch-hot a{color:var(--q-text-3);}
.q-hsearch-hot a:hover{color:var(--q-accent);text-decoration:underline;}
.q-header-cta{display:flex;gap:var(--q-g1);flex-shrink:0;margin-left:var(--q-g2);}
.q-btn{
display:inline-flex;align-items:center;justify-content:center;gap:6px;
height:40px;padding:0 18px;border-radius:var(--q-r);
font-size:var(--q-fs-sm);cursor:pointer;border:1.5px solid transparent;
white-space:nowrap;
}
.q-btn-primary{background:var(--q-primary);color:#fff;}
.q-btn-primary:hover{background:var(--q-primary-light);color:#fff;}
/* 主按钮：品牌蓝，避免页头大面积橙色跳脱视觉重心。
橙色仅用于图标高亮、价格标签等小面积提示。 */
.q-btn-accent{background:var(--q-primary-light);color:#fff;}
.q-btn-accent:hover{background:var(--q-primary);color:#fff;}
.q-btn-ghost{border-color:var(--q-border-2);color:var(--q-text-2);}
.q-btn-ghost:hover{border-color:var(--q-accent);color:var(--q-accent);}
/* 主导航 */
.q-nav{background:var(--q-primary);position:relative;z-index:101;}
.q-nav .q-wrap{display:flex;align-items:center;height:48px;}
.q-nav ul{display:flex;flex-wrap:wrap;}
.q-nav li{position:relative;}
.q-nav li>a{
display:block;padding:0 20px;height:48px;line-height:48px;
color:rgba(255,255,255,.86);font-size:var(--q-fs-base);
}
.q-nav li>a:hover,
.q-nav li.current>a{background:var(--q-primary-light);color:#fff;}
.q-nav li.current>a{box-shadow:inset 0 -3px 0 var(--q-accent);}
/* 二级下拉 */
.q-nav .sub{
position:absolute;left:0;top:48px;min-width:186px;background:#fff;
border:1px solid var(--q-border);border-top:2px solid var(--q-accent);
box-shadow:var(--q-sh-2);display:none;z-index:20;
}
.q-nav li:hover .sub{display:block;}
.q-nav .sub a{
display:block;padding:9px 16px;font-size:var(--q-fs-sm);
color:var(--q-text-2);border-bottom:1px solid var(--q-bg-2);
}
.q-nav .sub a:hover{background:var(--q-bg);color:var(--q-accent);padding-left:20px;}
.q-nav .sub li:last-child a{border-bottom:0;}
/* 产品中心：四列分组下拉，覆盖全部 24 个分类 */
.q-nav .sub.q-sub-3col{
display:none;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:0 8px;padding:18px 8px 14px;min-width:920px;
}
.q-nav li:hover .sub.q-sub-3col{display:grid;}
.q-sub-group{display:flex;flex-direction:column;}
.q-sub-t{
font-size:12px;color:var(--q-primary);font-weight:600;
padding:0 14px 8px;margin-bottom:6px;border-bottom:1px solid var(--q-bg-2);
margin-bottom:4px;
}
.q-nav .sub.q-sub-3col .q-sub-group a{
padding:6px 14px;border-bottom:0;border-radius:var(--q-r-sm);
font-size:13px;color:var(--q-text-2);white-space:nowrap;
}
.q-nav .sub.q-sub-3col .q-sub-group a:hover{
background:var(--q-bg);color:var(--q-accent);padding-left:18px;
}
.q-nav .sub .q-sub-all{
margin-top:10px;color:var(--q-accent);font-weight:600;
border-top:1px solid var(--q-bg-2);padding-top:10px!important;
}
.q-nav-toggle{
display:none;margin-left:auto;background:none;border:0;
color:#fff;font-size:20px;padding:8px 12px;cursor:pointer;
}
/* ---------- 5. 面包屑（SEO 必备） ---------- */
.q-crumb{
background:var(--q-bg);border-bottom:1px solid var(--q-border);
font-size:var(--q-fs-xs);color:var(--q-text-3);
}
.q-crumb .q-wrap{padding-top:12px;padding-bottom:12px;}
.q-crumb ol{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.q-crumb a{color:var(--q-text-2);}
.q-crumb a:hover{color:var(--q-accent);}
.q-crumb li:not(:last-child)::after{content:"›";margin-left:6px;color:var(--q-border-2);}
.q-crumb li[aria-current]{color:var(--q-text-3);}
/* ---------- 6. 首页区块通用 ---------- */
.q-section{padding:var(--q-g6) 0;}
.q-section.alt{background:var(--q-bg);}
.q-section-head{margin-bottom:var(--q-g4);}
.q-section-head .q-eyebrow{
font-size:var(--q-fs-xs);color:var(--q-accent);font-weight:600;
letter-spacing:1px;margin-bottom:8px;
}
.q-section-head h2{
font-size:var(--q-fs-2xl);color:var(--q-primary);margin-bottom:10px;
}
.q-section-head .q-sub{font-size:var(--q-fs-base);color:var(--q-text-2);max-width:760px;}
.q-section-head.center{text-align:center;}
.q-section-head.center .q-sub{margin:0 auto;}
/* ---------- 7. 首屏 ---------- */
.q-hero{position:relative;background:var(--q-primary);overflow:hidden;}
.q-hero-bg{position:absolute;inset:0;opacity:.14;}
.q-hero-bg img{width:100%;height:100%;object-fit:cover;}
.q-hero-inner{
position:relative;z-index:2;padding:80px 0 72px;max-width:660px;
}
.q-hero .q-eyebrow{
display:inline-block;font-size:var(--q-fs-xs);color:#fff;
background:rgba(255,255,255,.12);border-left:3px solid var(--q-accent);
padding:6px 14px;border-radius:0 var(--q-r-sm) var(--q-r-sm) 0;margin-bottom:20px;
}
.q-hero h1{
font-size:var(--q-fs-3xl);color:#fff;line-height:1.28;margin-bottom:18px;
letter-spacing:-.5px;
}
.q-hero h1 em{font-style:normal;color:var(--q-accent);}
.q-hero p{font-size:var(--q-fs-lg);color:rgba(255,255,255,.78);margin-bottom:28px;}
.q-hero-actions{display:flex;gap:var(--q-g2);flex-wrap:wrap;}
.q-hero .q-btn-ghost{border-color:rgba(255,255,255,.4);color:#fff;}
.q-hero .q-btn-ghost:hover{background:#fff;color:var(--q-primary);border-color:#fff;}
/* 数据条 */
.q-stats{background:var(--q-primary-dark);}
.q-stats .q-wrap{display:flex;flex-wrap:wrap;}
.q-stat{
flex:1;min-width:160px;padding:26px 20px;text-align:center;
border-right:1px solid rgba(255,255,255,.1);
}
.q-stat:last-child{border-right:0;}
.q-stat b{
display:block;font-size:var(--q-fs-2xl);color:#fff;font-weight:700;line-height:1.2;
}
.q-stat b i{font-style:normal;font-size:var(--q-fs-lg);color:var(--q-accent);}
.q-stat span{font-size:var(--q-fs-xs);color:rgba(255,255,255,.6);}
/* ---------- 8. 产品系列卡（双维度架构） ---------- */
.q-grid{display:grid;gap:var(--q-g2);}
.q-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.q-grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.q-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.q-cat-card{
background:#fff;border:1px solid var(--q-border);border-radius:var(--q-r-lg);
padding:24px;transition:border-color .18s,box-shadow .18s,transform .18s;
display:flex;flex-direction:column;
}
.q-cat-card:hover{
border-color:var(--q-accent);box-shadow:var(--q-sh-2);
transform:translateY(-2px);
}
.q-cat-ico{
width:46px;height:46px;border-radius:var(--q-r);background:var(--q-bg);
display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.q-cat-card:hover .q-cat-ico{background:var(--q-accent);}
.q-cat-card:hover .q-cat-ico svg path,
.q-cat-card:hover .q-cat-ico svg circle,
.q-cat-card:hover .q-cat-ico svg rect{stroke:#fff;}
.q-cat-card h3{font-size:var(--q-fs-lg);color:var(--q-primary);margin-bottom:6px;}
.q-cat-card .q-desc{font-size:var(--q-fs-sm);color:var(--q-text-2);margin-bottom:14px;}
.q-cat-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;}
.q-tag{
font-size:11px;padding:3px 9px;border-radius:var(--q-r-sm);
background:var(--q-bg);color:var(--q-text-2);
}
.q-cat-card:hover .q-tag{background:var(--q-bg-2);}
/* ---------- 9. 型号标签云（长尾词覆盖） ---------- */
.q-modelbar{
background:#fff;border:1px solid var(--q-border);border-radius:var(--q-r-lg);
padding:22px 24px;
}
.q-modelbar h3{font-size:var(--q-fs-base);color:var(--q-primary);margin-bottom:14px;}
.q-modelbar ul{display:flex;flex-wrap:wrap;gap:8px;}
.q-modelbar a{
font-family:var(--q-mono);font-size:var(--q-fs-sm);padding:5px 12px;
border:1px solid var(--q-border-2);border-radius:var(--q-r);
color:var(--q-text-2);background:var(--q-bg);
}
.q-modelbar a:hover{border-color:var(--q-accent);color:var(--q-accent);background:#fff;}
/* ---------- 10. 方案卡 ---------- */
.q-sol-card{
position:relative;background:#fff;border:1px solid var(--q-border);
border-radius:var(--q-r-lg);overflow:hidden;
transition:box-shadow .18s,border-color .18s;
}
.q-sol-card:hover{box-shadow:var(--q-sh-2);border-color:var(--q-primary);}
.q-sol-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--q-bg);}
.q-sol-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.q-sol-card:hover .q-sol-thumb img{transform:scale(1.05);}
.q-sol-body{padding:18px 20px 22px;}
.q-sol-body h3{font-size:var(--q-fs-lg);color:var(--q-primary);margin-bottom:8px;}
.q-sol-body p{font-size:var(--q-fs-sm);color:var(--q-text-2);margin-bottom:14px;}
.q-sol-meta{
display:flex;flex-wrap:wrap;gap:8px 14px;font-size:var(--q-fs-xs);
color:var(--q-text-3);border-top:1px solid var(--q-bg-2);padding-top:12px;
}
.q-sol-more{
display:inline-block;margin-top:14px;font-size:var(--q-fs-sm);
color:var(--q-accent);font-weight:500;
}
.q-sol-more::after{content:" →";}
/* ---------- 11. 场景应用 ---------- */
.q-scene-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--q-g2);}
.q-scene{
position:relative;aspect-ratio:4/3;border-radius:var(--q-r-lg);
overflow:hidden;background:var(--q-primary);
}
.q-scene img{width:100%;height:100%;object-fit:cover;opacity:.62;transition:opacity .3s,transform .4s;}
.q-scene:hover img{opacity:.85;transform:scale(1.06);}
.q-scene figcaption{
position:absolute;left:0;right:0;bottom:0;padding:16px;
background:linear-gradient(transparent,rgba(7,32,61,.9));
color:#fff;font-size:var(--q-fs-base);font-weight:500;
}
.q-scene figcaption span{
display:block;font-size:var(--q-fs-xs);font-weight:400;
color:rgba(255,255,255,.7);margin-top:2px;
}
/* ---------- 12. 列表页布局 ---------- */
.q-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:var(--q-g4);align-items:start;}
.q-side{position:sticky;top:130px;}
.q-side-box{
background:#fff;border:1px solid var(--q-border);border-radius:var(--q-r-lg);
margin-bottom:var(--q-g2);overflow:hidden;
}
.q-side-h{
background:var(--q-primary);color:#fff;padding:13px 18px;
font-size:var(--q-fs-base);font-weight:600;
}
.q-side-body{padding:6px 0 10px;}
.q-side-body a{
display:block;padding:9px 18px;font-size:var(--q-fs-sm);color:var(--q-text-2);
border-left:3px solid transparent;
}
.q-side-body a:hover{background:var(--q-bg);color:var(--q-accent);}
.q-side-body a.current{
background:var(--q-bg);color:var(--q-accent);
border-left-color:var(--q-accent);font-weight:600;
}
.q-side-body a .q-cnt{float:right;color:var(--q-text-3);font-size:var(--q-fs-xs);}
.q-side-cta{
background:var(--q-primary);color:#fff;border-radius:var(--q-r-lg);
padding:22px 20px;text-align:center;
}
.q-side-cta h4{font-size:var(--q-fs-base);margin-bottom:8px;}
.q-side-cta p{font-size:var(--q-fs-xs);color:rgba(255,255,255,.7);margin-bottom:16px;}
.q-side-cta .q-btn{width:100%;}
/* ---------- 13. 筛选条 ---------- */
.q-filterbar{
display:flex;flex-wrap:wrap;align-items:center;gap:var(--q-g2);
background:var(--q-bg);border:1px solid var(--q-border);
border-radius:var(--q-r);padding:12px 18px;margin-bottom:var(--q-g3);
font-size:var(--q-fs-sm);
}
.q-filterbar .q-lbl{color:var(--q-text-3);}
.q-chips{display:flex;flex-wrap:wrap;gap:8px;}
.q-chip{
padding:5px 14px;border-radius:14px;background:#fff;
border:1px solid var(--q-border-2);color:var(--q-text-2);
}
.q-chip:hover{border-color:var(--q-accent);color:var(--q-accent);}
.q-chip.on{background:var(--q-primary);border-color:var(--q-primary);color:#fff;}
.q-filter-right{margin-left:auto;display:flex;gap:var(--q-g2);align-items:center;}
.q-sortbar{font-size:var(--q-fs-sm);color:var(--q-text-3);margin-bottom:var(--q-g2);}
.q-sortbar a{color:var(--q-text-2);}
.q-sortbar a.on{color:var(--q-accent);font-weight:600;}
/* ---------- 14. 产品卡（列表） ---------- */
.q-prod-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--q-g2);}
.q-prod{
background:#fff;border:1px solid var(--q-border);border-radius:var(--q-r-lg);
overflow:hidden;display:flex;flex-direction:column;
transition:box-shadow .18s,border-color .18s,transform .18s;
}
.q-prod:hover{box-shadow:var(--q-sh-2);border-color:var(--q-primary);transform:translateY(-2px);}
.q-prod-thumb{
position:relative;aspect-ratio:4/3;background:var(--q-bg);overflow:hidden;
display:flex;align-items:center;justify-content:center;
}
.q-prod-thumb img{width:100%;height:100%;object-fit:contain;padding:16px;transition:transform .35s;}
.q-prod:hover .q-prod-thumb img{transform:scale(1.06);}
.q-prod-badge{
position:absolute;top:10px;left:10px;font-size:11px;
padding:3px 8px;border-radius:var(--q-r-sm);background:var(--q-accent);color:#fff;
}
.q-prod-badge.gray{background:var(--q-text-3);}
.q-prod-body{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column;}
.q-prod-cat{font-size:11px;color:var(--q-text-3);margin-bottom:6px;}
.q-prod-body h3{
font-size:var(--q-fs-base);color:var(--q-primary);margin-bottom:8px;
line-height:1.5;
}
.q-prod-body h3 a:hover{color:var(--q-accent);}
.q-prod-body p{
font-size:var(--q-fs-xs);color:var(--q-text-2);line-height:1.65;
margin-bottom:14px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.q-prod-foot{
display:flex;align-items:center;justify-content:space-between;
border-top:1px solid var(--q-bg-2);padding-top:12px;margin-top:auto;
font-size:var(--q-fs-xs);color:var(--q-text-3);
}
.q-prod-model{font-family:var(--q-mono);color:var(--q-accent);}
/* 表格视图 */
.q-prod-table{width:100%;border:1px solid var(--q-border);background:#fff;}
.q-prod-table th{
background:var(--q-bg);text-align:left;padding:11px 14px;
font-size:var(--q-fs-xs);color:var(--q-text-2);font-weight:600;
border-bottom:1px solid var(--q-border);
}
.q-prod-table td{padding:12px 14px;font-size:var(--q-fs-sm);border-bottom:1px solid var(--q-bg-2);}
.q-prod-table tr:hover td{background:var(--q-bg);}
.q-prod-table .q-t-img{width:64px;}
.q-prod-table .q-t-img img{width:64px;height:48px;object-fit:contain;background:var(--q-bg);}
/* ---------- 15. 分页（SEO 友好 URL） ---------- */
/* ============================================================
分页（基于 PbootCMS {page:bar} + quown.js 拆平）
{page:bar} 输出的是**带包装层**的嵌套结构：
共N条 当前x/y页
首页
前一页
1...
···
后一页
尾页
直接用 CSS 排这些包装层会导致：
- 包装 span 被选中器命中 → 加边框后撑开、整块换行
- inline-flex 混排 → 基线错位、顺序视觉混乱
解决：initPager() 在 JS 里把各包装层的 全部提到同一层，
按固定顺序重排（首页 上一页 页码 下一页 尾页），
纯 CSS 只负责给 .q-pg-bar 里的直接子元素上样式。
============================================================ */
.q-pager{
display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;
gap:6px;margin:24px 0 0;width:100%;
padding:10px 16px;background:var(--q-white);
border:1px solid var(--q-border);border-radius:var(--q-r-lg);
box-shadow:0 1px 3px rgba(11,46,89,.04);
line-height:1;
}
.q-pg-bar{
display:flex;flex-wrap:nowrap;align-items:center;
gap:4px;
}
/* 直接子元素才有边框；JS 已把包装层里的 a 提到这一层 */
.q-pg-bar>.q-pg-item{
display:inline-flex;align-items:center;justify-content:center;
min-width:32px;height:32px;padding:0 10px;
border:1px solid var(--q-border);border-radius:16px;
background:var(--q-white);color:var(--q-text-2);
font-size:var(--q-fs-xs);line-height:1;white-space:nowrap;
transition:all .2s ease;flex-shrink:0;box-sizing:border-box;
}
.q-pg-bar>.q-pg-item:hover{
border-color:var(--q-primary);color:var(--q-primary);
background:#F0F5FB;
}
/* 状态文字：无边框 */
.q-pg-bar>.q-pg-status{
min-width:0;height:32px;border:0;background:transparent;
color:var(--q-text-3);padding:0 6px;font-size:var(--q-fs-xs);flex-shrink:0;
display:inline-flex;align-items:center;
}
/* 数字页码：稍窄 */
.q-pg-bar>.q-pg-num{min-width:32px;padding:0;font-variant-numeric:tabular-nums;}
/* 省略号：无边框 */
.q-pg-bar>.q-pg-dots{
min-width:18px;padding:0 2px;border:0;background:transparent;color:var(--q-text-3);flex-shrink:0;
}
/* 当前页：实心蓝底 + 白字 */
.q-pg-bar>.q-pg-cur{
background:var(--q-primary);border-color:var(--q-primary);
color:#fff;font-weight:600;
box-shadow:0 2px 6px rgba(11,46,89,.25);
}
.q-pg-bar>.q-pg-cur:hover{
background:var(--q-primary-light);border-color:var(--q-primary-light);color:#fff;
}
/* 首页/上一页/下一页/尾页 文字稍加粗 */
.q-pg-bar>.q-pg-edge{font-weight:500;}
/* 在首页时上一页/下一页是javascript:;，置灰不可点 */
.q-pg-bar>.q-pg-disabled{opacity:.38;pointer-events:none;}
/* ---------- 跳至 __ 跳转 ---------- */
.q-pg-jump{
display:flex;align-items:center;gap:4px;
font-size:var(--q-fs-xs);color:var(--q-text-3);flex-shrink:0;
margin-left:8px;padding-left:12px;border-left:1px solid var(--q-border);
height:32px;
}
.q-pg-jump-lb{color:var(--q-text-3);white-space:nowrap;}
.q-pg-input{
width:44px;height:30px;padding:0 4px;text-align:center;
border:1px solid var(--q-border);border-radius:15px;
background:var(--q-white);color:var(--q-text);font-size:var(--q-fs-xs);
font-variant-numeric:tabular-nums;-moz-appearance:textfield;
transition:border-color .2s;
}
.q-pg-input::-webkit-outer-spin-button,
.q-pg-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.q-pg-input:focus{outline:none;border-color:var(--q-primary);}
.q-pg-btn{
min-width:44px;height:30px;padding:0 12px;cursor:pointer;
border:1px solid var(--q-primary);border-radius:15px;
background:var(--q-primary);color:#fff;font-size:var(--q-fs-xs);font-family:inherit;
transition:all .2s ease;
}
.q-pg-btn:hover{background:var(--q-primary-light);border-color:var(--q-primary-light);}
/* 小屏 */
@media (max-width:640px){
.q-pager{gap:4px;padding:8px 10px;margin:20px 0 0;flex-wrap:wrap;}
.q-pg-bar{gap:3px;flex-wrap:wrap;}
.q-pg-bar>.q-pg-item{height:30px;min-width:30px;padding:0 8px;font-size:11px;border-radius:15px;}
.q-pg-bar>.q-pg-num{min-width:30px;}
.q-pg-input,.q-pg-btn{height:30px;}
.q-pg-input{width:40px;}
.q-pg-jump{margin-left:4px;padding-left:6px;}
}
/* ---------- 16. 内容页（产品详情） ---------- */
.q-detail{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--q-g4);align-items:start;}
.q-article{background:#fff;border:1px solid var(--q-border);border-radius:var(--q-r-lg);padding:var(--q-g4);}
.q-article-h{border-bottom:1px solid var(--q-bg-2);padding-bottom:20px;margin-bottom:24px;}
.q-article-h h1{font-size:var(--q-fs-2xl);color:var(--q-primary);margin-bottom:12px;line-height:1.35;}
.q-article-meta{
display:flex;flex-wrap:wrap;gap:8px 20px;font-size:var(--q-fs-xs);color:var(--q-text-3);
}
.q-article-meta a{color:var(--q-accent);}
.q-prod-gallery{
background:var(--q-bg);border-radius:var(--q-r);padding:var(--q-g3);
margin-bottom:var(--q-g3);
}
.q-prod-gallery .q-main-img{
aspect-ratio:4/3;background:#fff;border-radius:var(--q-r);
display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.q-prod-gallery .q-main-img img{width:100%;height:100%;object-fit:contain;}
.q-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.q-thumbs img{
width:76px;height:60px;object-fit:cover;background:#fff;
border:1.5px solid var(--q-border);border-radius:var(--q-r-sm);cursor:pointer;
}
.q-thumbs img.on{border-color:var(--q-accent);}
/* 参数表 */
.q-spec{margin:24px 0;}
.q-spec h2,.q-content h2{
font-size:var(--q-fs-xl);color:var(--q-primary);margin:32px 0 14px;
padding-left:12px;border-left:4px solid var(--q-accent);line-height:1.3;
}
.q-spec h3,.q-content h3{font-size:var(--q-fs-lg);color:var(--q-primary);margin:24px 0 10px;}
.q-spec table{font-size:var(--q-fs-sm);border:1px solid var(--q-border);}
.q-spec th{
background:var(--q-bg);text-align:left;padding:11px 16px;width:180px;
color:var(--q-text-2);font-weight:600;border:1px solid var(--q-border);vertical-align:top;
}
.q-spec td{padding:11px 16px;border:1px solid var(--q-border);color:var(--q-text);}
.q-content{font-size:var(--q-fs-base);line-height:1.85;color:var(--q-text-2);}
.q-content p{margin-bottom:16px;}
.q-content ul{margin:0 0 16px;padding-left:4px;}
.q-content ul li{position:relative;padding-left:18px;margin-bottom:8px;}
.q-content ul li::before{
content:"";position:absolute;left:4px;top:11px;width:5px;height:5px;
border-radius:50%;background:var(--q-accent);
}
.q-content img{border-radius:var(--q-r);margin:20px 0;}
.q-content a{color:var(--q-primary);text-decoration:underline;}
.q-content a:hover{color:var(--q-accent);}
.q-content strong{color:var(--q-text);}
.q-content h2:first-child,.q-content h3:first-child{margin-top:0;}
/* ---------- 16b. 后台录入的 HTML 表格样式 ----------
PbootCMS 的技术参数（ext_spec）常以 录入，
后台编辑器输出的 table 无样式，这里统一成可读的两列表格。 */
.q-content table{
width:100%;border-collapse:collapse;margin:16px 0 24px;
font-size:var(--q-fs-sm);border:1px solid var(--q-border);
border-radius:var(--q-r);overflow:hidden;
}
.q-content table tr:nth-child(odd){background:var(--q-bg);}
.q-content table tr:nth-child(even){background:#fff;}
.q-content table td,.q-content table th{
padding:11px 16px;border:1px solid var(--q-border);
text-align:left;vertical-align:top;line-height:1.7;
}
.q-content table td:first-child{
width:180px;font-weight:600;color:var(--q-text-2);
white-space:nowrap;
}
/* 单列包裹式表格（后台常见：一整行包一段文字）*/
.q-content table td:only-child{width:auto;}
/* 单列表格的多行情况：每个 td 独立成行 */
.q-content table td:not(:first-child){color:var(--q-text);}
/* 功能特点字段常是"单行单列"包裹式表格，恢复常规正文样式 */
.q-content table td:only-child{
width:auto;font-weight:400;color:var(--q-text);
}
.q-spec table{margin:0;}
.q-spec table td:only-child,
.q-spec table td:first-child:only-child{font-weight:400;color:var(--q-text);}
.q-content table img{max-width:100%;height:auto;}
/* 场景图注 */
.q-figure{margin:24px 0;}
.q-figure figcaption{font-size:var(--q-fs-xs);color:var(--q-text-3);margin-top:8px;text-align:center;}
/* ---------- 17. 侧栏 ---------- */
.q-aside{position:sticky;top:130px;}
.q-aside-box{
background:#fff;border:1px solid var(--q-border);border-radius:var(--q-r-lg);
padding:20px;margin-bottom:var(--q-g2);
}
.q-aside-box h3{
font-size:var(--q-fs-base);color:var(--q-primary);
padding-bottom:10px;margin-bottom:14px;border-bottom:2px solid var(--q-bg-2);
}
.q-aside-cta{background:var(--q-primary);color:#fff;border:0;}
.q-aside-cta h3{color:#fff;border-bottom-color:rgba(255,255,255,.2);}
.q-aside-cta .q-phone{font-size:var(--q-fs-xl);font-weight:700;color:#fff;margin-bottom:4px;display:block;}
.q-aside-cta p{font-size:var(--q-fs-xs);color:rgba(255,255,255,.7);margin-bottom:16px;}
.q-aside-cta .q-btn{width:100%;margin-bottom:8px;}
.q-aside-list li{border-bottom:1px solid var(--q-bg-2);}
.q-aside-list li:last-child{border-bottom:0;}
.q-aside-list a{display:flex;gap:10px;padding:10px 0;}
.q-aside-list img{width:56px;height:42px;object-fit:contain;background:var(--q-bg);border-radius:var(--q-r-sm);flex-shrink:0;}
.q-aside-list b{
display:block;font-size:var(--q-fs-sm);font-weight:500;color:var(--q-text);
line-height:1.5;
}
.q-aside-list a:hover b{color:var(--q-accent);}
.q-aside-list span{font-size:11px;color:var(--q-text-3);font-family:var(--q-mono);}
/* 询盘表单 */
.q-form label{display:block;font-size:var(--q-fs-sm);color:var(--q-text-2);margin-bottom:6px;}
.q-form .q-field{margin-bottom:14px;}
.q-form input,.q-form select,.q-form textarea{
width:100%;padding:10px 12px;border:1px solid var(--q-border-2);
border-radius:var(--q-r);background:#fff;font-size:var(--q-fs-sm);
}
.q-form input:focus,.q-form select:focus,.q-form textarea:focus{
border-color:var(--q-primary);
}
.q-form textarea{min-height:96px;resize:vertical;}
.q-form .q-req{color:var(--q-danger);}
/* ---------- 18. FAQ 手风琴 ---------- */
.q-faq{border:1px solid var(--q-border);border-radius:var(--q-r-lg);overflow:hidden;background:#fff;}
.q-faq-item{border-bottom:1px solid var(--q-border);}
.q-faq-item:last-child{border-bottom:0;}
.q-faq-q{
width:100%;text-align:left;background:#fff;border:0;cursor:pointer;
padding:18px 48px 18px 22px;font-size:var(--q-fs-base);color:var(--q-text);
position:relative;font-weight:500;
}
.q-faq-q::after{
content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;
border-right:2px solid var(--q-accent);border-bottom:2px solid var(--q-accent);
transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}
.q-faq-q[aria-expanded=true]::after{transform:translateY(-30%) rotate(-135deg);}
.q-faq-a{display:none;padding:0 22px 20px;font-size:var(--q-fs-sm);color:var(--q-text-2);line-height:1.8;}
.q-faq-a.open{display:block;}
/* ---------- 19. 新闻列表 ---------- */
.q-news-row{
display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--q-bg-2);
}
.q-news-row:first-child{padding-top:0;}
.q-news-date{
flex-shrink:0;width:76px;text-align:center;font-size:var(--q-fs-xs);
color:var(--q-text-3);border-right:1px solid var(--q-border);padding-right:16px;
}
.q-news-date b{display:block;font-size:var(--q-fs-xl);color:var(--q-primary);font-weight:700;line-height:1.1;}
.q-news-main{flex:1;min-width:0;}
.q-news-main h3{font-size:var(--q-fs-lg);color:var(--q-primary);margin-bottom:8px;}
.q-news-main p{
font-size:var(--q-fs-sm);color:var(--q-text-2);line-height:1.7;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.q-news-thumb{
flex-shrink:0;width:150px;aspect-ratio:4/3;border-radius:var(--q-r);
overflow:hidden;background:var(--q-bg);
}
.q-news-thumb img{width:100%;height:100%;object-fit:cover;}
/* ---------- 20. 底部 CTA 条 ---------- */
.q-cta-band{background:var(--q-primary);color:#fff;padding:var(--q-g5) 0;}
.q-cta-band .q-wrap{display:flex;align-items:center;gap:var(--q-g4);flex-wrap:wrap;}
.q-cta-band h2{font-size:var(--q-fs-2xl);margin-bottom:8px;}
.q-cta-band p{color:rgba(255,255,255,.72);font-size:var(--q-fs-sm);}
.q-cta-band .q-actions{margin-left:auto;display:flex;gap:var(--q-g2);flex-wrap:wrap;}
/* ---------- 21. 页脚 ---------- */
.q-footer{background:var(--q-primary-dark);color:rgba(255,255,255,.62);font-size:var(--q-fs-sm);}
.q-footer-main{padding:var(--q-g5) 0 var(--q-g4);}
.q-footer-cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--q-g3);}
.q-footer h4{
color:#fff;font-size:var(--q-fs-base);margin-bottom:16px;
padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.12);
}
.q-footer a{color:rgba(255,255,255,.62);}
.q-footer a:hover{color:var(--q-accent);}
.q-footer li{margin-bottom:8px;}
.q-footer-brand img{height:48px;width:auto;margin-bottom:14px;}
.q-footer-brand p{line-height:1.8;margin-bottom:14px;font-size:var(--q-fs-xs);}
.q-footer-contact li{display:flex;gap:8px;align-items:flex-start;margin-bottom:10px;font-size:var(--q-fs-xs);}
.q-footer-contact svg{flex-shrink:0;margin-top:4px;}
.q-footer-bot{
border-top:1px solid rgba(255,255,255,.1);padding:18px 0;
display:flex;justify-content:space-between;gap:var(--q-g2);flex-wrap:wrap;
font-size:var(--q-fs-xs);
}
.q-footer-bot a{margin-left:16px;}
/* ---------- 22. 响应式 ---------- */
@media (max-width:1200px){
.q-nav li>a{padding:0 14px;font-size:var(--q-fs-sm);}
.q-footer-cols{grid-template-columns:1.4fr repeat(2,1fr);}
/* 多列下拉在窄屏降为两列 */
.q-nav .sub.q-sub-3col{grid-template-columns:repeat(2,minmax(0,1fr));min-width:440px;}
}
@media (max-width:1024px){
.q-header-main{height:auto;flex-wrap:wrap;padding:14px 0;gap:var(--q-g2);}
.q-hsearch{max-width:none;order:3;width:100%;position:static;}
/* 小屏只保留前两个热搜词，避免头部过高 */
.q-hsearch-hot a:nth-of-type(n+3){display:none;}
.q-hsearch-hot{gap:8px;font-size:12px;}
.q-header-cta{margin-left:auto;}
.q-nav-toggle{display:block;}
.q-nav .q-wrap{height:auto;flex-wrap:wrap;}
.q-nav ul{display:none;width:100%;flex-direction:column;padding-bottom:8px;}
.q-nav ul.open{display:flex;}
.q-nav li>a{padding:0 4px;line-height:44px;}
.q-nav .sub{position:static;display:none;box-shadow:none;border:0;background:var(--q-primary-dark);}
.q-nav li:hover .sub{display:block;}
/* 移动端分组标题与多列 */
.q-nav .sub.q-sub-3col{display:none;grid-template-columns:1fr;min-width:0;padding:0 0 6px;}
.q-nav li:hover .sub.q-sub-3col,
.q-nav li.open .sub.q-sub-3col{display:grid;}
.q-nav .sub.q-sub-3col .q-sub-group a{color:rgba(255,255,255,.72);padding:7px 14px;}
.q-nav .sub.q-sub-3col .q-sub-group a:hover{background:rgba(255,255,255,.06);}
.q-nav .sub .q-sub-all{color:var(--q-accent)!important;border-top-color:rgba(255,255,255,.12);}
.q-sub-t{color:#fff!important;border-bottom-color:rgba(255,255,255,.14)!important;padding-top:10px!important;}
.q-layout,.q-detail{grid-template-columns:minmax(0,1fr);}
.q-side,.q-aside{position:static;}
.q-grid-3,.q-prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.q-scene-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.q-hero-inner{padding:56px 0 48px;}
.q-hero h1{font-size:var(--q-fs-2xl);}
.q-section{padding:var(--q-g5) 0;}
.q-cta-band .q-wrap{flex-direction:column;align-items:flex-start;}
.q-cta-band .q-actions{margin-left:0;}
}
@media (max-width:640px){
.q-topbar-l{display:none;}
.q-topbar .q-wrap{justify-content:flex-end;}
.q-grid-2,.q-grid-3,.q-grid-4,.q-prod-grid,
.q-scene-grid,.q-footer-cols{grid-template-columns:minmax(0,1fr);}
.q-news-thumb{display:none;}
.q-article{padding:var(--q-g2);}
.q-spec th{width:auto;}
.q-filter-right{width:100%;margin-left:0;}
.q-stats .q-stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.1);}
/* 参数表在窄屏改为两列纵向排列，避免横向滚动 */
.q-content table,.q-spec table,.q-prod-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.q-content table td:first-child{width:auto;white-space:nowrap;}
/* 字号与间距收紧，避免小屏信息拥挤 */
.q-hero h1{font-size:26px;}
.q-section-head h2{font-size:20px;}
.q-hero-inner{padding:44px 0 40px;}
.q-hero p{font-size:var(--q-fs-base);}
.q-btn{height:38px;padding:0 14px;}
.q-header-cta .q-btn-ghost{display:none;}
/* 分页按钮加大点击区域 */
.q-pager a,.q-pager span{min-width:40px;height:40px;}
/* 移动端下拉分类标题与链接间距 */
.q-nav .sub.q-sub-3col .q-sub-group a{padding:9px 14px;}
}
/* 触屏设备无 hover，下拉需可点击展开 */
@media (hover:none){
.q-nav li:hover .sub{display:none;}
.q-nav li.open .sub{display:block;}
.q-nav li.open .sub.q-sub-3col{display:grid;}
}
/* ---------- 23. 打印与偏好 ---------- */
@media print{
.q-topbar,.q-header,.q-nav,.q-footer,.q-cta-band,.q-aside,.q-side,.q-pager{display:none!important;}
body{font-size:12pt;}
.q-article{border:0;padding:0;}
}
@media (prefers-reduced-motion:reduce){
*{transition:none!important;animation:none!important;scroll-behavior:auto!important;}
}
/* ---------- 24. 结构化数据样式（隐藏） ---------- */
.q-jsonld{display:none;}
/* ==================== 24. 关于我们页=================== */
.q-about-hero{
background:linear-gradient(135deg,var(--q-primary-dark) 0%,var(--q-primary) 55%,var(--q-primary-light) 100%);
padding:72px 0 64px;position:relative;overflow:hidden;
}
.q-about-hero::after{
content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;
border-radius:50%;background:radial-gradient(circle,rgba(232,89,12,.18),transparent 70%);
}
.q-about-hero .q-wrap{position:relative;z-index:2;}
.q-about-hero .q-eyebrow{color:rgba(255,255,255,.7);}
.q-about-hero h1{color:#fff;font-size:var(--q-fs-2xl);margin-bottom:16px;}
.q-about-hero p{
color:rgba(255,255,255,.8);font-size:var(--q-fs-base);
max-width:720px;line-height:1.9;
}
/* 数据条 */
.q-about-stats{
background:var(--q-primary);padding:var(--q-g4) 0;
margin-top:-40px;position:relative;z-index:3;
}
.q-about-stats .q-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
background:rgba(255,255,255,.12);border-radius:var(--q-r-lg);overflow:hidden;}
.q-about-stat{background:var(--q-primary);padding:24px 16px;text-align:center;}
.q-about-stat b{display:block;font-size:30px;color:#fff;line-height:1.2;font-weight:700;}
.q-about-stat b i{font-style:normal;font-size:14px;color:var(--q-accent);margin-left:2px;}
.q-about-stat span{display:block;font-size:13px;color:rgba(255,255,255,.62);margin-top:6px;}
/* 主体两栏 */
.q-about-main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--q-g4);align-items:start;}
/* 公司档案卡 */
.q-profile{border:1px solid var(--q-border);border-radius:var(--q-r-lg);overflow:hidden;background:#fff;}
.q-profile-h{background:var(--q-bg);padding:14px 20px;font-weight:600;font-size:15px;
color:var(--q-primary);border-bottom:1px solid var(--q-border);}
.q-profile-b{padding:6px 20px 14px;}
.q-profile-row{display:flex;gap:12px;padding:11px 0;border-bottom:1px dashed var(--q-bg-2);font-size:14px;}
.q-profile-row:last-child{border-bottom:0;}
.q-profile-row dt{flex-shrink:0;width:76px;color:var(--q-text-3);margin:0;}
.q-profile-row dd{margin:0;color:var(--q-text);line-height:1.7;word-break:break-all;}
/* 发展历程 */
.q-tl{position:relative;padding-left:26px;}
.q-tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;
background:linear-gradient(var(--q-accent),var(--q-border-2));}
.q-tl-item{position:relative;padding-bottom:22px;}
.q-tl-item:last-child{padding-bottom:0;}
.q-tl-item::before{
content:"";position:absolute;left:-23px;top:5px;width:12px;height:12px;
border-radius:50%;background:#fff;border:3px solid var(--q-accent);
}
.q-tl-item b{display:block;font-size:15px;color:var(--q-primary);margin-bottom:4px;}
.q-tl-item p{font-size:14px;color:var(--q-text-2);line-height:1.75;margin:0;}
/* 能力标签 */
.q-about-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.q-about-tag{
font-size:13px;padding:6px 13px;border-radius:100px;
background:var(--q-primary-light);color:#fff;
}
/* ==================== 25. 联系我们页 ==================== */
.q-contact-hero{
background:linear-gradient(135deg,var(--q-primary-dark),var(--q-primary));
padding:56px 0 52px;
}
.q-contact-hero h1{color:#fff;font-size:var(--q-fs-2xl);margin-bottom:12px;}
.q-contact-hero p{color:rgba(255,255,255,.8);max-width:640px;line-height:1.85;}
/* 联系方式卡片 */
.q-contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--q-g3);
margin-top:-34px;position:relative;z-index:3;}
.q-ccard{
background:#fff;border:1px solid var(--q-border);border-radius:var(--q-r-lg);
padding:26px 22px;box-shadow:var(--q-sh-1);text-align:center;
transition:transform .2s,box-shadow .2s,border-color .2s;
}
.q-ccard:hover{transform:translateY(-3px);box-shadow:var(--q-sh-2);border-color:var(--q-primary-light);}
.q-ccard-ico{
width:52px;height:52px;margin:0 auto 14px;border-radius:50%;
background:var(--q-primary-light);display:flex;align-items:center;justify-content:center;
}
.q-ccard h3{font-size:16px;color:var(--q-primary);margin-bottom:8px;}
.q-ccard .q-ccard-v{font-size:20px;font-weight:700;color:var(--q-text);letter-spacing:.3px;}
.q-ccard .q-ccard-d{font-size:12px;color:var(--q-text-3);margin-top:8px;line-height:1.7;}
.q-ccard a:hover{color:var(--q-accent);}
/* 主体：左表单右信息 */
.q-contact-main{display:grid;grid-template-columns:minmax(0,1fr) 340px;
gap:var(--q-g4);align-items:start;margin-top:var(--q-g4);}
.q-contact-form{background:#fff;border:1px solid var(--q-border);
border-radius:var(--q-r-lg);padding:var(--q-g3);}
.q-contact-form h2{font-size:20px;color:var(--q-primary);margin-bottom:6px;}
.q-contact-form > p{font-size:13px;color:var(--q-text-3);margin-bottom:22px;}
.q-form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
/* 地图区 */
.q-map{
height:260px;border-radius:var(--q-r);overflow:hidden;border:1px solid var(--q-border);
background:var(--q-bg);display:flex;align-items:center;justify-content:center;
}
.q-map iframe{width:100%;height:100%;border:0;}
@media (max-width:1024px){
.q-about-main,.q-contact-main{grid-template-columns:minmax(0,1fr);}
.q-contact-cards{grid-template-columns:1fr 1fr;}
.q-about-stats .q-wrap{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
.q-contact-cards{grid-template-columns:1fr;}
.q-about-stats .q-wrap{grid-template-columns:1fr 1fr;}
.q-form-row{grid-template-columns:1fr;}
.q-about-hero{padding:52px 0 46px;}
.q-about-stat b{font-size:24px;}
}
/* ---------- 悬浮返回顶部 ---------- */
#q-gotop{
position:fixed;right:28px;bottom:36px;z-index:999;
width:44px;height:44px;border-radius:50%;
background:var(--q-primary);color:#fff;
display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 14px rgba(11,46,89,.3);
transition:all .25s ease;opacity:0;pointer-events:none;transform:translateY(10px);
}
#q-gotop.show{opacity:1;pointer-events:auto;transform:translateY(0);}
#q-gotop:hover{background:var(--q-primary-light);box-shadow:0 6px 18px rgba(11,46,89,.4);}
@media (max-width:640px){
#q-gotop{right:16px;bottom:20px;width:40px;height:40px;}
}