@charset "utf-8";
/* ==========================================================================
汇富物流（hfky.net）· 2.0 全新 UI 样式表
版本：2026-09-17
加载顺序：（老样式，规则一条未删，保底）
→ （本文件，完整覆盖视觉，定义 2.0 全新组件）
回滚：后台「API 管理 → 站点开关」把前台版本切回 1.0/1.1 即可，本文件不再加载。
约定：老页面专用类（.pd_*、.news_class*、.login_*、.product_* 等）在 2.0 下
由本文件统一重定义为现代卡片风格；2.0 新组件一律使用 hf- 前缀类名。
========================================================================== */
/* ---------------------------------------------------------------- 1. 变量 */
:root{
--brand: #0A3D70; /* 品牌深蓝（主） */
--brand-2: #1E6FD9; /* 亮蓝（交互） */
--brand-3: #0E4C8A; /* 中蓝（渐变中段） */
--brand-ink: #082B4F; /* 墨蓝（深色块/标题） */
--brand-soft: #EAF2FB; /* 浅蓝底 */
--accent: #F57C1F; /* 安全橙（危化品行业强调） */
--accent-soft:#FDF1E3; /* 浅橙底 */
--ink: #22303F;
--ink-2: #5A6B7E;
--ink-3: #93A1B1;
--line: #E4EAF2;
--bg: #F4F7FB;
--card: #FFFFFF;
--r: 14px;
--r-sm: 10px;
--sh-s: 0 1px 3px rgba(10,45,90,.06), 0 1px 2px rgba(10,45,90,.04);
--sh-m: 0 12px 30px -14px rgba(10,45,90,.28), 0 3px 8px rgba(10,45,90,.05);
--sh-l: 0 24px 55px -24px rgba(10,45,90,.34);
--max: 1200px;
--nav-h: 64px;
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}
/* ------------------------------------------------------- 2. 基础排版 */
html{ -webkit-text-size-adjust:100%; }
body{
font-family:var(--font);
font-size:15px; line-height:1.75; color:var(--ink);
background:var(--bg);
}
/* 覆盖老站"所有元素 12px"的规则（同选择器 + 本文件在后 → 后者生效） */
ul,form,p,div,h4,h5,h6,input,text,textarea,dl,dt,dd{ font-size:15px; font-weight:400; }
h1{ font-size:30px; line-height:1.35; } h2{ font-size:24px; } h3{ font-size:18px; }
a{ color:var(--brand-2); transition:color .15s ease; }
a:hover{ color:var(--brand); }
img{ max-width:100%; }
img[width][height]{ height:auto; } /* 老站写死了 width/height 属性，小屏要能缩 */
.fl{ float:left; } .fr{ float:right; }
.cle_both{ height:0; overflow:hidden; clear:both; }
*{ box-sizing:border-box; }
/* ---------------------------------------------------- 3. 顶部信息条（2.0） */
.hf-topbar{ background:var(--brand-ink); color:rgba(255,255,255,.72); font-size:13px; }
.hf-topbar-inner{
max-width:var(--max); margin:0 auto; padding:7px 20px;
display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.hf-topbar-tag{ color:rgba(255,255,255,.62); letter-spacing:.4px; }
.hf-topbar-tag b{ color:#fff; font-weight:600; }
.hf-topbar-contacts{ display:flex; align-items:center; gap:20px; white-space:nowrap; }
.hf-topbar-contacts a{ color:rgba(255,255,255,.82); text-decoration:none; }
.hf-topbar-contacts a:hover{ color:#fff; }
.hf-topbar-contacts .hf-tb-tel{ color:#FFC069; font-weight:600; font-size:14px; }
@media (max-width:768px){ .hf-topbar-tag{ display:none; } .hf-topbar-inner{ justify-content:center; } }
/* ------------------------------------------------------- 4. 主导航（2.0） */
.hf-nav{
position:-webkit-sticky; position:sticky; top:0; z-index:1000;
background:linear-gradient(180deg,var(--brand) 0%,var(--brand-3) 100%);
box-shadow:0 8px 26px -18px rgba(0,25,55,.9);
}
.hf-nav-inner{
max-width:var(--max); margin:0 auto; padding:0 20px;
min-height:var(--nav-h);
display:flex; align-items:center; gap:22px;
}
.hf-logo{ flex:none; display:flex; align-items:center; }
.hf-logo img{ width:auto; height:46px !important; display:block; }
.hf-menu{ flex:1 1 auto; min-width:0; display:flex; justify-content:flex-end; align-items:center; gap:2px; }
.hf-menu a.hf-menu-link{
display:block; padding:10px 15px; font-size:15.5px; font-weight:500;
color:rgba(255,255,255,.92); border-radius:9px; text-decoration:none;
transition:background .15s ease,color .15s ease;
}
.hf-menu a.hf-menu-link:hover{ color:#fff; background:rgba(255,255,255,.14); }
.hf-menu a.hf-menu-link.hf-active{ color:#fff; background:rgba(255,255,255,.18); }
.hf-nav-actions{ flex:none; display:flex; align-items:center; gap:10px; }
.hf-btn-login{
display:inline-flex; align-items:center; gap:6px;
background:#fff; color:var(--brand) !important; padding:9px 18px; border-radius:999px;
font-size:14px; font-weight:600; text-decoration:none;
box-shadow:0 8px 20px -12px rgba(0,0,0,.6);
}
.hf-btn-login:hover{ filter:brightness(.96); color:var(--brand-ink) !important; }
.hf-btn-login svg{ width:15px; height:15px; flex:none; }
.hf-btn-login span{ max-width:84px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 汉堡按钮（≤1024px 显示） */
.hf-burger{
display:none; flex:none; width:42px; height:42px; border:0; cursor:pointer;
background:rgba(255,255,255,.12); border-radius:10px; padding:0;
flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.hf-burger span{ display:block; width:20px; height:2px; border-radius:2px; background:#fff; transition:all .25s ease; }
.hf-burger.hf-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hf-burger.hf-open span:nth-child(2){ opacity:0; }
.hf-burger.hf-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
/* 移动端抽屉 */
.hf-drawer{
position:fixed; top:0; right:-320px; width:300px; height:100%; z-index:2000;
background:#fff; box-shadow:-18px 0 50px -20px rgba(0,25,55,.5);
transition:right .28s ease; display:flex; flex-direction:column;
}
.hf-drawer.hf-open{ right:0; }
.hf-drawer-head{
padding:18px 20px; background:linear-gradient(180deg,var(--brand),var(--brand-3));
display:flex; align-items:center; justify-content:space-between;
}
.hf-drawer-head img{ height:34px !important; width:auto; }
.hf-drawer-close{ border:0; background:rgba(255,255,255,.15); color:#fff; width:34px; height:34px;
border-radius:9px; font-size:18px; line-height:1; cursor:pointer; }
.hf-drawer-menu{ flex:1 1 auto; overflow-y:auto; padding:14px; }
.hf-drawer-menu a{
display:block; padding:13px 16px; margin-bottom:4px; border-radius:10px;
color:var(--ink); font-size:15.5px; text-decoration:none;
}
.hf-drawer-menu a:hover{ background:var(--brand-soft); color:var(--brand); }
.hf-drawer-menu a.hf-active{ background:var(--brand); color:#fff; font-weight:600; }
.hf-drawer-foot{ padding:16px 20px; border-top:1px solid var(--line); }
.hf-drawer-foot .hf-df-tel{ display:flex; align-items:center; gap:10px; color:var(--ink-2); font-size:13.5px; }
.hf-drawer-foot .hf-df-tel b{ color:var(--accent); font-size:19px; font-weight:700; }
.hf-drawer-mask{
position:fixed; inset:0; background:rgba(6,24,48,.5); z-index:1999;
opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.hf-drawer-mask.hf-open{ opacity:1; pointer-events:auto; }
/* 导航加载前隐藏抽屉，防止闪烁 */
.hf-drawer, .hf-drawer-mask{ display:none; }
html.hf-drawer-ready .hf-drawer, html.hf-drawer-ready .hf-drawer-mask{ display:flex; }
html.hf-drawer-ready .hf-drawer-mask{ display:block; }
@media (max-width:1024px){
.hf-menu, .hf-nav-actions .hf-btn-login{ display:none; }
.hf-burger{ display:flex; }
.hf-nav-inner{ justify-content:space-between; }
}
/* ---------------------------------------------------- 5. 首页 Hero（2.0） */
.hf-hero{
position:relative; overflow:hidden;
background:linear-gradient(140deg,#062A50 0%,var(--brand) 48%,#0E4C8A 100%);
}
.hf-hero-bgimg{
position:absolute; inset:0; z-index:0;
background-image:url("exships_14.jpg");
background-size:cover; background-position:center 42%;
opacity:.34; filter:saturate(.9);
}
.hf-hero::after{
content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(90deg,rgba(6,34,70,.88) 0%,rgba(6,34,70,.55) 55%,rgba(6,34,70,.15) 100%);
}
.hf-hero-inner{
position:relative; z-index:2;
max-width:var(--max); margin:0 auto; padding:74px 20px 82px;
display:flex; align-items:center; gap:44px;
}
.hf-hero-copy{ flex:1 1 58%; min-width:0; color:#fff; }
.hf-hero-eyebrow{
display:inline-flex; align-items:center; gap:8px;
background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
color:#FFD9A8; font-size:13.5px; letter-spacing:1px;
padding:6px 14px; border-radius:999px; margin-bottom:20px;
}
.hf-hero-copy h1{ color:#fff; font-size:38px; line-height:1.28; font-weight:700; margin:0 0 16px; letter-spacing:.5px; }
.hf-hero-copy h1 em{ font-style:normal; color:#FFB45C; }
.hf-hero-sub{ color:rgba(255,255,255,.78); font-size:16.5px; line-height:1.85; margin:0 0 28px; max-width:560px; }
.hf-hero-form{
display:flex; gap:10px; max-width:600px; background:#fff; padding:8px;
border-radius:16px; box-shadow:0 24px 60px -24px rgba(0,20,50,.65);
}
.hf-hero-form .hf-inp{
flex:1 1 auto; min-width:0; border:0; outline:none; resize:none;
height:52px; padding:8px 16px; font-size:14.5px; color:var(--ink);
background:transparent; font-family:var(--font); line-height:1.6;
}
.hf-hero-form .hf-btn{
flex:none; border:0; cursor:pointer; height:52px; padding:0 32px;
border-radius:12px; font-size:15.5px; font-weight:600; color:#fff;
background:linear-gradient(135deg,var(--accent),#E8640C);
box-shadow:0 12px 24px -12px rgba(245,124,31,.8);
font-family:var(--font); transition:filter .15s ease;
}
.hf-hero-form .hf-btn:hover{ filter:brightness(1.06); }
.hf-hero-hint{ color:rgba(255,255,255,.5); font-size:12.5px; margin-top:10px; }
.hf-hero-stats{ flex:1 1 42%; min-width:0; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hf-hero-stat{
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
backdrop-filter:blur(6px); border-radius:18px; padding:22px 20px; text-align:center;
color:#fff; transition:transform .18s ease,background .18s ease;
}
.hf-hero-stat:hover{ transform:translateY(-4px); background:rgba(255,255,255,.13); }
.hf-hero-stat b{ display:block; font-size:32px; font-weight:700; color:#FFC069; line-height:1.2; }
.hf-hero-stat span{ display:block; margin-top:6px; font-size:13.5px; color:rgba(255,255,255,.75); }
@media (max-width:1024px){
.hf-hero-inner{ flex-direction:column; gap:30px; padding:54px 20px 60px; }
.hf-hero-copy h1{ font-size:30px; }
.hf-hero-stats{ width:100%; }
}
@media (max-width:640px){
.hf-hero-copy h1{ font-size:25px; }
.hf-hero-form{ flex-direction:column; }
.hf-hero-form .hf-btn{ width:100%; }
.hf-hero-stats{ grid-template-columns:1fr 1fr; gap:10px; }
.hf-hero-stat{ padding:16px 12px; }
.hf-hero-stat b{ font-size:24px; }
}
/* ------------------------------------------------- 6. 通用区块容器（2.0） */
.hf-section{ max-width:var(--max); margin:0 auto; padding:52px 20px 8px; }
.hf-section-head{ text-align:center; margin-bottom:30px; }
.hf-section-head .hf-sec-eyebrow{
display:inline-block; font-size:13px; letter-spacing:2px; color:var(--accent);
font-weight:600; margin-bottom:8px;
}
.hf-section-head h2{
margin:0 0 10px; font-size:28px; font-weight:700; color:var(--brand-ink); letter-spacing:.5px;
}
.hf-section-head p{ margin:0 auto; color:var(--ink-3); font-size:14.5px; max-width:640px; }
.hf-section-head .hf-sec-line{
width:56px; height:4px; margin:16px auto 0; border-radius:2px;
background:linear-gradient(90deg,var(--brand-2),var(--accent));
}
/* ------------------------------------------------- 7. 首页服务卡片（2.0） */
.hf-services{ padding-top:6px; padding-bottom:30px; }
.hf-service-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.hf-service-card{
background:var(--card); border:1px solid rgba(10,45,90,.07);
border-radius:var(--r); padding:30px 22px 26px; text-align:center;
box-shadow:var(--sh-s); display:flex; flex-direction:column;
transition:transform .2s ease, box-shadow .2s ease;
}
.hf-service-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-m); }
.hf-service-ico{
width:72px; height:72px; margin:0 auto 18px; border-radius:20px;
background:var(--brand-soft); background-repeat:no-repeat; background-position:center;
background-size:36px 36px; transition:background-color .2s ease;
}
.hf-service-card:hover .hf-service-ico{ background-color:#DFECFB; }
.hf-service-card h3{ margin:0 0 10px; font-size:17px; font-weight:600; color:var(--brand-ink); }
.hf-service-card p{
margin:0 0 18px; color:var(--ink-2); font-size:13.8px; line-height:1.75; flex:1 1 auto;
text-align:left;
}
.hf-service-card .hf-link{
display:inline-flex; align-items:center; gap:6px; margin:0 auto;
color:var(--brand-2); font-size:14px; font-weight:600; text-decoration:none;
}
.hf-service-card .hf-link:hover{ color:var(--accent); }
.hf-service-ico.ico1{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A3D70' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8'/%3E%3Cpath d='M14 3v6h5'/%3E%3Ccircle cx='16.6' cy='16.4' r='3'/%3E%3Cpath d='M18.9 18.7 21 20.8'/%3E%3C/svg%3E"); }
.hf-service-ico.ico2{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A3D70' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h11v9H2z'/%3E%3Cpath d='M13 10h4l4 3.2V16h-8z'/%3E%3Ccircle cx='6.6' cy='18' r='1.9'/%3E%3Ccircle cx='17' cy='18' r='1.9'/%3E%3C/svg%3E"); }
.hf-service-ico.ico3{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A3D70' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.2-2.9 7.7-7 9-4.1-1.3-7-4.8-7-9V6z'/%3E%3Cpath d='M12 8.4v4.2'/%3E%3Cpath d='M12 15.8h.01'/%3E%3C/svg%3E"); }
.hf-service-ico.ico4{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A3D70' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12.5h18V18H3z'/%3E%3Cpath d='M5.5 12.5 7.6 7h8.8l2.1 5.5'/%3E%3Ccircle cx='7.4' cy='18' r='1.5'/%3E%3Ccircle cx='16.6' cy='18' r='1.5'/%3E%3C/svg%3E"); }
@media (max-width:1024px){ .hf-service-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .hf-service-grid{ grid-template-columns:1fr; } }
/* ------------------------------------------------- 8. 公司优势（2.0） */
.hf-advantages{ padding-bottom:40px; }
.hf-adv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.hf-adv-card{
background:var(--card); border:1px solid rgba(10,45,90,.07);
border-radius:var(--r); padding:28px 24px; box-shadow:var(--sh-s);
display:flex; gap:16px; align-items:flex-start;
transition:transform .2s ease, box-shadow .2s ease;
}
.hf-adv-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-m); }
.hf-adv-ico{
flex:none; width:52px; height:52px; border-radius:15px;
background:var(--accent-soft); background-repeat:no-repeat; background-position:center;
background-size:28px 28px;
}
.hf-adv-card h3{ margin:0 0 6px; font-size:16.5px; font-weight:600; color:var(--brand-ink); }
.hf-adv-card p{ margin:0; color:var(--ink-2); font-size:13.5px; line-height:1.75; }
.hf-adv-ico.a1{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F57C1F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.2 12.3l2.5 2.5 5.1-5.6'/%3E%3C/svg%3E"); }
.hf-adv-ico.a2{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F57C1F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.2v5l3.4 2'/%3E%3C/svg%3E"); }
.hf-adv-ico.a3{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F57C1F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.2-2.9 7.7-7 9-4.1-1.3-7-4.8-7-9V6z'/%3E%3Cpath d='M9.1 12.1l2.2 2.2 4-4.4'/%3E%3C/svg%3E"); }
.hf-adv-ico.a4{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F57C1F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E"); }
.hf-adv-ico.a5{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F57C1F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.2h3.1L8.7 6h6.6l1.6 2.2H20V19H4z'/%3E%3Ccircle cx='12' cy='13' r='3.3'/%3E%3C/svg%3E"); }
.hf-adv-ico.a6{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F57C1F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='M4 7.5l8 4.5 8-4.5'/%3E%3Cpath d='M12 12v9'/%3E%3C/svg%3E"); }
@media (max-width:1024px){ .hf-adv-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .hf-adv-grid{ grid-template-columns:1fr; } }
/* -------------------------------------------------- 9. 新闻动态（2.0） */
.hf-news{ padding-bottom:56px; }
.hf-news-grid{ display:grid; grid-template-columns:1fr 330px; gap:26px; align-items:start; }
.hf-news-list{
background:var(--card); border:1px solid rgba(10,45,90,.07);
border-radius:var(--r); box-shadow:var(--sh-s); padding:10px 26px;
}
.hf-news-item{
display:flex; align-items:center; gap:14px;
padding:15px 2px; border-bottom:1px dashed var(--line);
}
.hf-news-item:last-child{ border-bottom:0; }
.hf-news-item .hf-news-date{
flex:none; width:58px; text-align:center; border-radius:10px;
background:var(--brand-soft); color:var(--brand); padding:7px 4px;
}
.hf-news-item .hf-news-date b{ display:block; font-size:16px; font-weight:700; line-height:1.2; }
.hf-news-item .hf-news-date span{ font-size:11px; }
.hf-news-item a.hf-news-title{
flex:1 1 auto; min-width:0; color:var(--ink); font-size:14.8px; text-decoration:none;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hf-news-item a.hf-news-title:hover{ color:var(--brand-2); }
.hf-news-item .hf-news-tag{
flex:none; font-size:11px; color:#fff; background:var(--accent);
padding:2px 8px; border-radius:999px;
}
.hf-news-item .hf-news-more{
flex:none; color:var(--ink-3); font-size:12.5px; text-decoration:none; white-space:nowrap;
}
.hf-news-item .hf-news-more:hover{ color:var(--brand-2); }
.hf-qr-card{
background:linear-gradient(160deg,var(--brand) 0%,var(--brand-ink) 100%);
border-radius:var(--r); color:#fff; padding:30px 26px; box-shadow:var(--sh-m);
}
.hf-qr-card h3{ margin:0 0 6px; font-size:19px; font-weight:700; }
.hf-qr-card p{ margin:0 0 20px; color:rgba(255,255,255,.68); font-size:13.5px; }
.hf-qr-card .hf-qr-img{
background:#fff; border-radius:12px; padding:8px; display:inline-block; line-height:0;
}
.hf-qr-card .hf-qr-img img{ width:128px; height:128px; border-radius:6px; display:block; }
.hf-qr-card .hf-qr-tips{ margin-top:14px; color:rgba(255,255,255,.6); font-size:12.5px; line-height:1.9; }
.hf-qr-card .hf-qr-tel{ margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.14); }
.hf-qr-card .hf-qr-tel span{ font-size:12.5px; color:rgba(255,255,255,.6); }
.hf-qr-card .hf-qr-tel b{ display:block; font-size:24px; color:#FFC069; font-weight:700; }
@media (max-width:1024px){ .hf-news-grid{ grid-template-columns:1fr; } }
/* ------------------------------------------------- 10. 页脚（2.0） */
.hf-footer{ background:linear-gradient(180deg,#082B4F 0%,#051C36 100%); color:rgba(255,255,255,.66); }
.hf-footer-inner{
max-width:var(--max); margin:0 auto; padding:52px 20px 20px;
display:grid; grid-template-columns:1.3fr 1fr 1fr 1.3fr; gap:36px;
}
.hf-footer h4{ color:#fff; font-size:16px; font-weight:600; margin:0 0 16px; }
.hf-footer .hf-f-about{ font-size:13.5px; line-height:2; color:rgba(255,255,255,.58); }
.hf-footer ul{ list-style:none; padding:0; margin:0; }
.hf-footer ul li{ padding:5px 0; }
.hf-footer ul a{ color:rgba(255,255,255,.66); font-size:14px; text-decoration:none; }
.hf-footer ul a:hover{ color:#fff; }
.hf-footer .hf-f-contact{ font-size:13.8px; line-height:2.1; color:rgba(255,255,255,.66); }
.hf-footer .hf-f-contact b{ color:#FFC069; font-size:22px; display:block; }
.hf-footer .hf-f-contact a{ color:rgba(255,255,255,.75); text-decoration:none; }
.hf-footer .hf-f-contact a:hover{ color:#fff; }
.hf-footer-bottom{
border-top:1px solid rgba(255,255,255,.1);
padding:16px 20px; text-align:center;
font-size:12.5px; color:rgba(255,255,255,.42);
}
.hf-footer-bottom a{ color:rgba(255,255,255,.55); text-decoration:none; }
.hf-footer-bottom a:hover{ color:#fff; }
.hf-footer-bottom .hf-fb-inner{ max-width:var(--max); margin:0 auto; }
@media (max-width:1024px){ .hf-footer-inner{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .hf-footer-inner{ grid-template-columns:1fr; } }
/* ------------------------------------------------ 11. 内页公共（2.0） */
.product_banner, .product_mian{ max-width:var(--max); width:auto; margin:0 auto; }
.product_banner{ padding:22px 20px 0; box-sizing:border-box; }
.product_mian{ padding:22px 20px 46px; box-sizing:border-box;
display:flex; gap:26px; align-items:flex-start; }
/* 面包屑（内页新增，2.0 由 header 注入） */
.hf-crumb{
max-width:var(--max); margin:0 auto; padding:16px 20px 0; box-sizing:border-box;
font-size:13.5px; color:var(--ink-3);
}
.hf-crumb a{ color:var(--ink-3); text-decoration:none; }
.hf-crumb a:hover{ color:var(--brand-2); }
.hf-crumb .hf-crumb-cur{ color:var(--brand); font-weight:500; }
.hf-crumb .hf-crumb-sep{ margin:0 9px; color:#C6D2E0; }
/* 内页侧栏 */
.product_mian_l{ width:250px !important; float:none; flex:0 0 250px; }
.product_ml_ti{
background:linear-gradient(135deg,var(--brand-2),var(--brand)) !important;
width:auto !important; height:auto !important; line-height:1.4 !important;
padding:15px 20px; border-radius:var(--r-sm) var(--r-sm) 0 0;
font-size:16px !important; font-weight:600; color:#fff;
}
.product_ml_ti span{ padding-left:0 !important; }
.product_ml_lis{
background:#fff !important; border:1px solid var(--line) !important; border-top:none !important;
border-radius:0 0 var(--r-sm) var(--r-sm); overflow:hidden;
}
.product_ml_lis ul{ padding:10px !important; }
.product_ml_lis ul li{
background:none !important; padding:0 !important; margin:0; font-size:14.5px !important;
border-radius:8px; color:var(--ink-2);
}
.product_ml_lis ul li a{
display:block; padding:11px 14px 11px 32px; position:relative;
color:var(--ink-2); border-radius:8px; font-size:14.5px;
}
.product_ml_lis ul li a::before{
content:''; position:absolute; left:15px; top:50%; margin-top:-3px;
width:6px; height:6px; border-radius:50%; background:#C6D2E0; transition:background .15s ease;
}
.product_ml_lis ul li a:hover{ background:var(--brand-soft); color:var(--brand-2); text-decoration:none; }
.product_ml_lis ul li a:hover::before{ background:var(--brand-2); }
.product_ml_lis .choice{ background:var(--brand-soft) !important; }
.product_ml_lis .choice a{ color:var(--brand) !important; font-weight:600; }
.product_ml_lis .choice a::before{ background:var(--brand); }
/* 内页右侧内容卡 */
.product_mian_r{
width:auto !important; float:none; flex:1 1 auto; min-width:0;
background:var(--card); border:1px solid rgba(10,45,90,.07);
border-radius:var(--r); box-shadow:var(--sh-s); padding:28px 30px 34px; box-sizing:border-box;
}
.product_mr_ti{
font-size:20px !important; font-weight:700; color:var(--brand-ink) !important;
background:none !important; border-bottom:1px solid var(--line) !important;
padding:0 0 15px 16px !important; margin-bottom:6px; position:relative;
}
.product_mr_ti::before{
content:''; position:absolute; left:0; top:3px; width:4px; height:21px;
border-radius:2px; background:linear-gradient(180deg,var(--brand-2),var(--accent));
}
.product_mr_text_about, .product_mr_text{ padding:16px 0 0; }
.product_mr_text p, .pd_nc_zw p{ color:var(--ink-2) !important; font-size:15px !important; line-height:2 !important; margin:0 0 14px; }
.pd_nc_zw{
padding:0 !important; color:var(--ink-2) !important; line-height:2 !important;
font-size:15px !important; word-break:break-word;
}
.pd_nc_zw img{ max-width:100%; height:auto !important; border-radius:10px; }
.pd_nc_zw table{ max-width:100%; }
.pd_nc_zw h1,.pd_nc_zw h2,.pd_nc_zw h3,.pd_nc_zw h4{ color:var(--brand-ink); }
.pd_nc_zw a{ color:var(--brand-2); }
.pd_zw_pro_lb_pic1_img img,.apd_zw_pro_lb_pic1_img img{ border-radius:10px; border-color:var(--line) !important; }
/* 内页轮播（沿用本地实现结构，2.0 样式） */
.product_banner .mySwiper{
border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-s);
background:var(--brand-soft); position:relative;
}
.product_banner .swiper-wrapper{ display:grid; }
.product_banner .swiper-slide{ grid-area:1 / 1; line-height:0; opacity:0; transition:opacity .55s ease; pointer-events:none; }
.product_banner .swiper-slide img{ width:100% !important; height:auto !important; display:block; }
.product_banner .mySwiper:not(.hf-ready) .swiper-slide:first-child{ opacity:1; pointer-events:auto; }
.product_banner .mySwiper.hf-ready .swiper-slide-active{ opacity:1; pointer-events:auto; }
.product_banner .swiper-pagination{
position:absolute; left:0; right:0; bottom:10px; display:flex;
justify-content:center; gap:7px; z-index:5;
}
.product_banner .swiper-pagination-bullet{
width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.62);
box-shadow:0 1px 3px rgba(0,0,0,.28); cursor:pointer; transition:all .2s ease;
}
.product_banner .swiper-pagination-bullet-active{ background:#fff; width:22px; border-radius:999px; }
/* 新闻列表（内页） */
.news_class{ padding:0 !important; }
.pd_news_lb{
background:none !important; border-bottom:1px solid var(--line) !important;
padding:15px 2px 15px 20px !important; position:relative;
display:flex; align-items:center; gap:10px;
}
.pd_news_lb::before{
content:''; position:absolute; left:2px; top:50%; margin-top:-3px;
width:6px; height:6px; border-radius:50%; background:var(--brand-2);
}
.pd_news_lb a{
flex:1 1 auto; min-width:0; font-size:15px !important; font-weight:400 !important;
color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pd_news_lb a:hover{ color:var(--brand-2); text-decoration:none; }
.pd_news_lb span{ flex:none; font-size:13px; color:var(--ink-3); }
.pd_news_lb > font{ color:var(--ink-3); }
.news_lb_ge{ display:none !important; }
.news_class:last-child .pd_news_lb{ border-bottom:1px solid var(--line) !important; }
.news_class_bt, .news_class_time{ float:none; }
/* 分页 */
.fy{ padding:24px 0 4px !important; font-family:var(--font) !important; clear:both; }
.fy table, .fy tbody, .fy tr, .fy td{ display:block !important; width:auto !important; }
.fy td{ text-align:center !important; height:auto !important; font-size:13.5px !important; color:var(--ink-3); }
.fy b, .fy strong{ color:var(--brand-ink); font-weight:600; }
.fy a{
display:inline-block; padding:7px 15px; margin:0 3px; border-radius:999px;
background:#fff; border:1px solid var(--line); color:var(--ink-2) !important;
font-size:13.5px; text-decoration:none; transition:all .15s ease;
}
.fy a:hover{ border-color:var(--brand-2); color:var(--brand-2) !important; background:var(--brand-soft); }
.fy font{ color:var(--accent) !important; font-weight:700; }
/* 留言/反馈等老表格 → 卡片化 */
.pd_zw_lb_feedback{ border:1px solid #F3D9B0 !important; background:#FFF9EF !important;
border-radius:var(--r-sm); padding:16px !important; text-align:center; }
.pd_zw_l, .pd_zw_r, .pd_zw_c{ border-color:var(--line) !important; border-radius:var(--r-sm); }
.pd_zw_lb_other a{ color:var(--accent) !important; }
/* 联系页卡片 */
.pd_zw_lb_qq{ padding:6px 0; }
.pd_zw_lb_qq img{ vertical-align:middle; margin-right:5px; }
/* 留言表单 */
.feedback_form input[type="text"], .feedback_form input[type="tel"], .feedback_form input[type="email"],
.feedback_form textarea, .pd_zw_lb_feedback input[type="text"], .pd_zw_lb_feedback textarea{
border:1px solid var(--line); border-radius:10px; padding:10px 14px;
font-size:14px; font-family:var(--font); outline:none; background:#FBFCFE;
}
.feedback_form input[type="text"]:focus, .feedback_form textarea:focus,
.pd_zw_lb_feedback input[type="text"]:focus, .pd_zw_lb_feedback textarea:focus{
border-color:var(--brand-2); box-shadow:0 0 0 3px rgba(30,111,217,.12); background:#fff;
}
.feedback_form input[type="submit"], .feedback_form input[type="button"],
.pd_zw_lb_feedback input[type="submit"]{
border:0 !important; padding:11px 34px !important; border-radius:999px;
background:linear-gradient(135deg,var(--brand-2),var(--brand)) !important;
color:#fff !important; font-size:14.5px !important; font-weight:600;
cursor:pointer; font-family:var(--font); box-shadow:0 10px 20px -12px rgba(10,61,112,.8);
}
.feedback_form input[type="submit"]:hover{ filter:brightness(1.08); }
/* 帮助中心 / 服务页正文 */
.pd_zw_lb_jj, .pd_zw_lb_region, .pd_zw_lb_model{ font-size:14px !important; line-height:2 !important; color:var(--ink-2) !important; }
/* 老首页遗留区块（1.0 结构在 2.0 下兜底：若 index.php 未走 2.0 分支也保持可读） */
.service, .linebtm_mian, .friend_links_wrap{ display:none; }
/* ------------------------------------------------ 12. 响应式（2.0 内页） */
@media (max-width:1024px){
.product_mian{ flex-direction:column; gap:18px; }
.product_mian_l{ flex:1 1 auto; width:100% !important; }
.product_ml_lis ul{ display:flex; flex-wrap:wrap; gap:6px; padding:10px !important; }
.product_ml_lis ul li{ flex:0 1 auto; }
.product_ml_lis ul li a{ padding:7px 14px; background:var(--bg); border:1px solid var(--line); }
.product_ml_lis ul li a::before{ display:none; }
.product_ml_lis .choice{ background:transparent !important; }
.product_ml_lis .choice a{ background:var(--brand) !important; border-color:var(--brand) !important; color:#fff !important; }
.product_mian_r{ width:100% !important; padding:22px 20px 26px; }
}
@media (max-width:768px){
body{ font-size:15px; }
.hf-section{ padding:40px 14px 6px; }
.hf-section-head h2{ font-size:23px; }
.product_banner, .product_mian{ padding-left:14px; padding-right:14px; }
.product_banner{ padding-top:14px; }
.hf-news-list{ padding:8px 18px; }
.hf-news-item{ flex-wrap:wrap; gap:8px; }
.hf-news-item .hf-news-title{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.pd_news_lb{ padding:12px 2px 12px 18px !important; gap:8px; }
.pd_news_lb a{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.product_mian_r{ padding:18px 16px 22px; }
}
/* ========== 联系我们 · 电子地图（2.0 卡片） ========== */
.hf-map-block{
max-width:var(--max); margin:26px auto 10px; padding:0 20px; box-sizing:border-box;
scroll-margin-top:96px;
}
.hf-map-card{
background:#fff; border:1px solid rgba(10,45,90,.06); border-radius:var(--r-md);
box-shadow:0 18px 44px -26px rgba(10,45,90,.28); overflow:hidden;
}
.hf-map-head{
padding:20px 24px 16px; border-bottom:1px solid #EEF2F7;
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.hf-map-head h3{
margin:0; font-size:19px; color:var(--brand); font-weight:700;
display:flex; align-items:center; gap:10px;
}
.hf-map-head h3::before{
content:''; width:5px; height:20px; border-radius:3px;
background:linear-gradient(180deg,var(--brand-2),var(--brand)); flex:none;
}
.hf-map-addrs{ display:flex; gap:14px; flex-wrap:wrap; }
.hf-map-addr{
display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--ink-2);
background:#F6F9FD; border:1px solid #E7EEF6; border-radius:999px; padding:6px 13px;
}
.hf-map-addr b{ color:var(--ink); font-weight:600; }
.hf-map-pin{
width:20px; height:20px; border-radius:50%; flex:none; color:#fff; font-size:11.5px; font-weight:700;
display:inline-flex; align-items:center; justify-content:center;
}
.hf-pin-1{ background:linear-gradient(135deg,#F57C1F,#E05A00); }
.hf-pin-2{ background:linear-gradient(135deg,#1E6FD9,#0A3D70); }
.hf-map-canvas{ width:100%; height:430px; display:block; background:#EAF1F8; }
.hf-map-canvas .amap-logo{ opacity:.75; }
.hf-map-canvas .amap-copyright{ font-size:11px; }
@media (max-width:768px){
.hf-map-block{ padding:0 14px; margin-top:18px; }
.hf-map-head{ padding:16px 16px 14px; }
.hf-map-canvas{ height:330px; }
}
@media (max-width:640px){
.hf-map-canvas{ height:300px; }
.hf-map-addr{ font-size:12.5px; padding:5px 10px; }
}