/* ============================================================
solution.css · v11 · 2026-10-21
本版变更：CTA 右侧卡片的「服务价值三条」改为正文真实文本
1) 正文结构：三条文案各一个 span
—— 后台板块化编辑器里就是「服务价值 ①②③」三个输入框，改了立刻生效
2) 样式：每条前面一个半透明圆点，13px / 白字 / 行距 1.55
3) 旧的「22 年 + 专注检测…」结构（.big / small）隐藏兜底，不再露出
沿用 v10：卡片 1120 居中 / 浅蓝 #1a5f96→#3a9ee0 / 深蓝玻璃卡片 / 高 226
沿用 v8：背景图写在 CSS（/imgs/hd-solutions/cta-bg.jpg）/ 官网橙 #FC7449
============================================================ */
.sol-detail{box-sizing:border-box;font-family:'Microsoft YaHei','PingFang SC','Hiragino Sans GB','Helvetica Neue',Arial,sans-serif;color:var(--ink);line-height:1.75;font-size:15px;background:#fff}
.sol-detail *,.sol-detail *::before,.sol-detail *::after{box-sizing:border-box}
.sol-detail{--navy:#0c2b47;--navy2:#123f6d;--blue:#1667b8;--bluel:#e9f2fb;--orange:#fc7449;--orangel:#fff1ec;
--ink:#242f3a;--muted:#68788a;--line:#e3eaf2;--bg:#f5f8fc;--white:#fff;}
.sol-detail *{margin:0;padding:0;box-sizing:border-box}
.sol-detail{font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.75;font-size:15px;}
.sol-detail img{max-width:100%;display:block}
.sol-detail a{text-decoration:none;color:inherit;transition:.25s}
.sol-detail .container{max-width:1200px;margin:0 auto;padding:0 22px}
.sol-detail .clear{clear:both}
.sol-detail .topbar{background:var(--navy);color:rgba(255,255,255,.82);font-size:12.5px}
.sol-detail .topbar .inner{max-width:1200px;margin:0 auto;padding:0 22px;display:flex;justify-content:space-between;align-items:center;height:36px}
.sol-detail .topbar .sites a{color:rgba(255,255,255,.82);margin-left:18px}
.sol-detail .topbar .sites a:hover{color:#fff}
.sol-detail .topbar .sites i{display:inline-block;width:1px;height:10px;background:rgba(255,255,255,.3);margin-left:18px;vertical-align:-1px}
.sol-detail .site-header{background:#fff;border-bottom:1px solid var(--line)}
.sol-detail .site-header .inner{max-width:1200px;margin:0 auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between;height:78px}
.sol-detail .logo-box{display:flex;align-items:center;gap:14px}
.sol-detail .logo-box img{height:46px;width:auto}
.sol-detail .logo-slogan{border-left:1px solid var(--line);padding-left:14px}
.sol-detail .logo-slogan b{display:block;font-size:15px;color:var(--navy);letter-spacing:1px}
.sol-detail .logo-slogan em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:2px}
.sol-detail .head-tel{text-align:right}
.sol-detail .head-tel span{display:block;font-size:11.5px;color:var(--muted)}
.sol-detail .head-tel strong{font-size:22px;color:var(--navy);letter-spacing:.5px;font-family:Arial,sans-serif}
.sol-detail .mainnav{background:var(--navy)}
.sol-detail .mainnav ul{max-width:1200px;margin:0 auto;padding:0 22px;list-style:none;display:flex}
.sol-detail .mainnav li{flex:1}
.sol-detail .mainnav a{display:block;height:48px;line-height:48px;text-align:center;color:rgba(255,255,255,.88);font-size:15px;position:relative}
.sol-detail .mainnav a:hover,.sol-detail .mainnav a.on{background:var(--navy2);color:#fff}
.sol-detail .mainnav a.on::after{content:"";position:absolute;left:50%;bottom:0;width:36px;height:3px;background:var(--orange);transform:translateX(-50%)}
/* ============================================================
【Banner 背景怎么换】
把配好的 banner 图保存成 hero-banner.jpg（建议 1920×560 左右，
主体内容靠左，右侧留空给产品图卡片），上传到：
网站根目录 / imgs / hd-solutions / hero-banner.jpg
传上去就会自动生效——不用改任何代码。图片不存在时自动回退到
下面这层浅灰蓝渐变，所以放心传，传错位置也不会白屏。
【文字颜色怎么跟着 banner 走】
下面 5 个变量控制这块区域的所有文字与遮罩：
--hero-ink 主标题 --hero-line 分隔线
--hero-ink2 副标题 --hero-scrim 左侧白色渐变遮罩
--hero-ink3 正文
当前是「浅色 banner」配置（深色字 + 白色遮罩）。
如果以后换成深色 banner 图，把这 5 行换成：
--hero-ink:#ffffff; --hero-ink2:#bcd6ee; --hero-ink3:rgba(255,255,255,.80);
--hero-line:rgba(255,255,255,.18);
--hero-scrim:linear-gradient(96deg,rgba(6,22,44,.62) 0%,rgba(6,22,44,.10) 60%,transparent 80%);
并把 background-color 和最后一层渐变改回深蓝 #0a2540。
============================================================ */
.sol-detail .hero{
--hero-ink:#0a2540;
--hero-ink2:#3f5568;
--hero-ink3:#5c7085;
--hero-line:rgba(10,37,64,.15);
--hero-scrim:linear-gradient(96deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.86) 32%,rgba(255,255,255,.52) 50%,rgba(255,255,255,.12) 66%,rgba(255,255,255,0) 78%);
padding:0;color:var(--hero-ink);position:relative;overflow:hidden;background-color:#eef3f8;
background-image:url(/imgs/hd-solutions/hero-banner.jpg),linear-gradient(120deg,#eef3f8 0%,#e3ecf5 55%,#d9e5f1 100%);
background-size:cover,auto;background-position:center center;background-repeat:no-repeat}
/* 背景图写在 CSS 里 —— 不占正文，后台编辑器排版干净
换图：把下面的 hero-banner.jpg 换成新图路径（建议 1920x560，同名覆盖最省事）
图缺失 / 没上传时，这一层不渲染，自动露出后面的浅色渐变兜底，不会白屏
正文里万一残留 ![]()
，一律隐藏，防止撑坏版式 */
.sol-detail .hero > .hero-bgimg{display:none!important}
/* 左侧柔和白色渐变：压平背景暗部，保证深色文字始终清晰 */
.sol-detail .hero::before{content:"";position:absolute;inset:0;background:var(--hero-scrim);pointer-events:none;z-index:1}
/* 右下角极淡品牌橙光，浅色背景下只作微弱暖调 */
.sol-detail .hero::after{content:"";position:absolute;right:-180px;bottom:-200px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(252,116,73,.15) 0%,transparent 62%);pointer-events:none}
.sol-detail .hero .inner{max-width:1200px;margin:0 auto;padding:38px 22px 44px;display:flex;gap:44px;align-items:center;position:relative;z-index:2}
.sol-detail .hero-left{flex:1.15;min-width:0}
.sol-detail .hero-num{font-size:14px;letter-spacing:4px;color:#7b8fa3;font-family:Arial,sans-serif;margin-bottom:8px}
.sol-detail .hero-num b{color:var(--orange);font-size:24px;margin-right:9px;vertical-align:-2px}
.sol-detail .hero h1{font-size:32px;line-height:1.28;font-weight:700;margin-bottom:12px;color:var(--hero-ink)}
.sol-detail .hero .slogan{font-size:15.5px;color:var(--hero-ink2);margin-bottom:15px;font-weight:400}
.sol-detail .hero .desc{font-size:13.8px;line-height:1.72;color:var(--hero-ink3);margin-bottom:20px;max-width:640px}
.sol-detail .hero-btns{display:flex;gap:14px;margin-bottom:26px}
.sol-detail .btn{display:inline-block;padding:11px 28px;border-radius:4px;font-size:15px;font-weight:600;letter-spacing:1px}
.sol-detail .btn-orange{background:var(--orange);color:#fff;box-shadow:0 8px 20px rgba(252,116,73,.38)}
.sol-detail .btn-orange:hover{background:#e85e30;transform:translateY(-2px)}
.sol-detail .btn-ghost{border:1px solid rgba(10,37,64,.32);color:var(--hero-ink);background:rgba(255,255,255,.62)}
.sol-detail .btn-ghost:hover{background:rgba(10,37,64,.07);border-color:rgba(10,37,64,.5)}
.sol-detail .hero-stats{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--hero-line);padding-top:17px}
.sol-detail .hero-stats .st{padding-right:30px;margin-right:30px;border-right:1px solid var(--hero-line)}
.sol-detail .hero-stats .st:last-child{border-right:none;margin-right:0;padding-right:0}
.sol-detail .hero-stats b{display:block;font-size:23px;color:var(--hero-ink);font-family:Arial,sans-serif;line-height:1.2}
.sol-detail .hero-stats span{font-size:12px;color:#6f8296}
.sol-detail .hero-right{flex:0 0 322px}
/* 浅色背景上白卡容易"糊"在背景里，加深投影 + 细描边把卡片托出来 */
.sol-detail .hero-card{background:#fff;border-radius:8px;padding:12px;border:1px solid rgba(10,37,64,.07);
box-shadow:0 16px 40px rgba(10,37,64,.20),0 3px 10px rgba(10,37,64,.10);position:relative}
.sol-detail .hero-card .ph{height:272px;overflow:hidden;border-radius:5px;background:#f3f6f9;display:flex;align-items:center;justify-content:center}
.sol-detail .hero-card .ph img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease}
.sol-detail .hero-card:hover .ph img{transform:scale(1.05)}
.sol-detail .hero-card .tag{position:absolute;left:-12px;top:18px;background:var(--orange);color:#fff;font-size:12.5px;padding:5px 14px;border-radius:3px;box-shadow:0 4px 12px rgba(252,116,73,.4);z-index:3}
/* 说明条叠在配图底部，让这张图铺满整个白卡（卡片总高不变） */
.sol-detail .hero-card .cap{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;font-size:13px;color:rgba(255,255,255,.94);padding:38px 13px 9px;display:flex;justify-content:space-between;align-items:center;border-radius:0 0 5px 5px;background:linear-gradient(to top,rgba(7,22,44,.82) 0%,rgba(7,22,44,.42) 52%,rgba(7,22,44,0) 100%);pointer-events:none}
.sol-detail .hero-card .cap a{color:#fff;font-size:12.5px;pointer-events:auto}
.sol-detail .subnav{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 2px 14px rgba(12,43,71,.10)}
.sol-detail .subnav ul{max-width:1200px;margin:0 auto;padding:0 22px;list-style:none;display:flex;overflow-x:auto}
.sol-detail .subnav a{display:block;padding:14px 22px;font-size:14.5px;color:var(--ink);white-space:nowrap;border-bottom:2px solid transparent;font-weight:600}
.sol-detail .subnav a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.sol-detail .crumb{background:var(--bg);border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.sol-detail .crumb .inner{max-width:1200px;margin:0 auto;padding:10px 22px}
.sol-detail .crumb a{color:var(--muted)}
.sol-detail .crumb a:hover{color:var(--blue)}
.sol-detail section{padding:64px 0}
.sol-detail section.alt{background:var(--bg)}
.sol-detail .sec-head{margin-bottom:42px}
.sol-detail .sec-head .kick{display:inline-block;font-size:12.5px;letter-spacing:3px;color:var(--orange);font-weight:700;margin-bottom:8px;font-family:Arial,sans-serif}
.sol-detail .sec-head h2{font-size:27px;color:var(--navy);position:relative;padding-left:16px;line-height:1.4}
.sol-detail .sec-head h2::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:5px;background:var(--orange);border-radius:2px}
.sol-detail .sec-head p{margin-top:10px;color:var(--muted);font-size:14.5px;max-width:860px}
.sol-detail [id]{scroll-margin-top:96px}
.sol-detail .pos-box{background:#fff;border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:6px;padding:30px 34px;font-size:15.5px;color:#3a4756;box-shadow:0 6px 22px rgba(12,43,71,.05)}
.sol-detail .pos-box b{color:var(--navy)}
.sol-detail .pain-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.sol-detail .pain-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:28px 24px;position:relative;transition:.3s;overflow:hidden}
.sol-detail .pain-card:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(12,43,71,.12);border-color:#c9dcf0}
.sol-detail .pain-card .no{font-size:34px;font-family:Arial,sans-serif;color:var(--bluel);font-weight:800;line-height:1;position:absolute;right:16px;top:12px}
.sol-detail .pain-card h3{font-size:17px;color:var(--navy);margin-bottom:10px;position:relative}
.sol-detail .pain-card p{font-size:13.5px;color:var(--muted)}
.sol-detail .pain-card::after{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--blue),var(--orange));opacity:0;transition:.3s}
.sol-detail .pain-card:hover::after{opacity:1}
.sol-detail .equip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sol-detail .eq-card{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:.3s;display:flex;flex-direction:column}
.sol-detail .eq-card:hover{transform:translateY(-6px);box-shadow:0 16px 38px rgba(12,43,71,.14);border-color:#c9dcf0}
.sol-detail .eq-ph{height:200px;overflow:hidden;background:#fff;position:relative;display:flex;align-items:center;justify-content:center}
.sol-detail .eq-ph img{max-width:100%;max-height:100%;object-fit:contain;transition:.5s}
.sol-detail .eq-card:hover .eq-ph img{transform:scale(1.04)}
.sol-detail .eq-ph.multi{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;height:170px;background:#fff}
.sol-detail .eq-ph.multi img{width:100%;height:100%;object-fit:contain}
.sol-detail .eq-card:hover .eq-ph.multi img{transform:none}
.sol-detail .eq-body{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column}
.sol-detail .eq-body h3{font-size:16.5px;color:var(--navy);margin-bottom:8px}
.sol-detail .eq-model{font-size:13px;color:var(--blue);font-weight:700;margin-bottom:8px;line-height:1.6}
.sol-detail .eq-target{font-size:13px;color:var(--muted);flex:1}
.sol-detail .eq-foot{margin-top:14px;display:flex;justify-content:space-between;align-items:center}
.sol-detail .badge{display:inline-block;font-size:12px;padding:3px 12px;border-radius:20px;font-weight:600}
.sol-detail .b-core{background:var(--blue);color:#fff}
.sol-detail .b-opt{background:#eef2f6;color:#5c6b7c;border:1px solid #d8e0e8}
.sol-detail .b-spec{background:var(--orangel);color:#de5e2a;border:1px solid #fbd3c1}
.sol-detail .eq-link{font-size:12.5px;color:var(--blue)}
.sol-detail .eq-link:hover{text-decoration:underline}
.sol-detail .flow{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:20px;counter-reset:step}
.sol-detail .flow-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 22px;position:relative}
.sol-detail .flow-card .sn{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--navy));color:#fff;font-size:19px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:Arial,sans-serif;margin-bottom:14px;box-shadow:0 6px 14px rgba(22,103,184,.3)}
.sol-detail .flow-card h3{font-size:16.5px;color:var(--navy);margin-bottom:8px}
.sol-detail .flow-card p{font-size:13.5px;color:var(--muted)}
.sol-detail .flow-card:not(:last-child)::after{content:"";position:absolute;right:-14px;top:48px;width:0;height:0;border-left:9px solid #c9dcf0;border-top:7px solid transparent;border-bottom:7px solid transparent}
.sol-detail .scene-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:26px}
.sol-detail .scene-box{background:#fff;border:1px solid var(--line);border-radius:8px;padding:32px 34px;position:relative}
.sol-detail .scene-box .q{font-size:44px;color:var(--bluel);font-family:Georgia,serif;line-height:1;margin-bottom:6px}
.sol-detail .scene-box h3,.sol-detail .side-box h3{font-size:18px;color:var(--navy);margin-bottom:12px;padding-left:12px;border-left:4px solid var(--orange)}
.sol-detail .scene-box p{font-size:14.5px;color:#41505f}
.sol-detail .side-stack{display:flex;flex-direction:column;gap:26px}
.sol-detail .side-box{background:#fff;border:1px solid var(--line);border-radius:8px;padding:28px 30px}
.sol-detail .side-box p{font-size:14px;color:#41505f}
.sol-detail .std-tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.sol-detail .std-tags span{background:var(--bluel);color:var(--blue);font-size:12.5px;padding:4px 13px;border-radius:4px;font-weight:600}
/* ============================================================
【底部 CTA 蓝色区块 · 背景图怎么换】
把图片保存成 cta-bg.jpg，上传到：
网站根目录 / imgs / hd-solutions / cta-bg.jpg
传上去自动生效，不用改代码。图片不存在时回退深蓝渐变。
建议尺寸：1920 × 460 px（宽高比约 4.2:1）
实际展示高度 433~460px（随文案行数变），宽度铺满浏览器，
所以左右两侧会被裁掉一部分，重要内容请放在中间区域。
本区块已加了深色遮罩，所以换任何明暗的图，白字都清晰。
若想改用浅色图 + 深色字，把下面 6 个变量换掉：
--cta-ink:#0a2540; --cta-ink2:#42566b; --cta-ink3:#6f8296;
--cta-card-bg:rgba(255,255,255,.72); --cta-card-line:rgba(10,37,64,.12);
--cta-scrim:linear-gradient(96deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.55) 55%,rgba(255,255,255,.20) 100%);
============================================================ */
.sol-detail .cta{
--cta-ink:#fff;
--cta-ink2:rgba(255,255,255,.90);
--cta-ink3:#d6ecfb;
--cta-card-bg:rgba(9,38,66,.22);
--cta-card-line:rgba(255,255,255,.20);
--cta-scrim:linear-gradient(96deg,rgba(18,78,132,.56) 0%,rgba(26,96,156,.30) 46%,rgba(36,114,176,.08) 100%);
/* v9b：通栏改为居中限宽卡片，两侧留白，整块「变小」 */
width:calc(100% - 64px);max-width:1120px;margin:36px auto;border-radius:12px;
background-color:#1a5f96;color:var(--cta-ink);position:relative;overflow:hidden;
background-image:url(/imgs/hd-solutions/cta-bg.jpg),linear-gradient(120deg,#1a5f96 0%,#3a9ee0 100%);
background-size:cover,auto;background-position:center center;background-repeat:no-repeat}
/* 背景图写在 CSS 里 —— 不占正文
换图：把下面的 cta-bg.jpg 换成新图路径（建议 1920x460，同名覆盖最省事）
图缺失时自动露出后面的深蓝渐变兜底；深色遮罩仍在，白字始终清晰 */
.sol-detail .cta > .cta-bgimg{display:none!important}
/* 深色遮罩：压住底图，保证白字在任意明暗的图上都可读 */
.sol-detail .cta::before{content:"";position:absolute;inset:0;background:var(--cta-scrim);pointer-events:none;z-index:1}
/* 极淡网格纹理，叠在遮罩之上做质感 */
.sol-detail .cta::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:44px 44px}
.sol-detail section.cta{padding-top:0;padding-bottom:0}
/* v9：整块收窄降高（内容 1040、上下 34px），字号同步下调一档 */
.sol-detail .cta .inner{max-width:1040px;margin:0 auto;padding:34px 24px;position:relative;z-index:2;display:flex;gap:34px;align-items:center}
.sol-detail .cta-left{flex:0 1 560px;min-width:0}
.sol-detail .cta-left .kick{font-size:11px;letter-spacing:2.4px;color:var(--cta-ink3);font-weight:700;margin-bottom:8px}
.sol-detail .cta-left h2{font-size:22px;line-height:1.35;margin-bottom:10px;color:var(--cta-ink)}
.sol-detail .cta-left p{color:var(--cta-ink2);font-size:13px;line-height:1.7;max-width:520px;margin-bottom:18px}
.sol-detail .cta-contact{display:flex;gap:26px;flex-wrap:wrap}
.sol-detail .cta-contact .ci span{display:block;font-size:11.5px;color:var(--cta-ink3);margin-bottom:2px}
.sol-detail .cta-contact .ci b{font-size:16.5px;font-family:Arial,sans-serif;color:var(--cta-ink);letter-spacing:.2px}
/* v11：右侧卡片 = 服务价值三条，用正文里的真实 渲染（后台编辑器可改） */
.sol-detail .cta-right{margin-left:auto;flex:0 0 252px;background:var(--cta-card-bg);border:1px solid var(--cta-card-line);border-radius:10px;padding:22px 20px;text-align:left;backdrop-filter:blur(6px);display:flex;flex-direction:column;justify-content:center;gap:11px}
.sol-detail .cta-right > span{display:block;position:relative;padding-left:15px;font-size:13px;line-height:1.55;color:#fff;letter-spacing:.3px;font-weight:400}
.sol-detail .cta-right > span::before{content:"";position:absolute;left:0;top:.58em;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55)}
/* 兼容：正文若还是旧的「22 年」结构，隐藏掉，不让它露出来 */
.sol-detail .cta-right .big,
.sol-detail .cta-right > small{display:none}
/* v9b：中等屏幕下允许左右两栏换行，窄屏进一步内收 */
@media(max-width:900px){
.sol-detail .cta{width:calc(100% - 40px);margin:26px auto}
.sol-detail .cta .inner{flex-wrap:wrap;gap:22px}
.sol-detail .cta-left{flex:1 1 100%}
.sol-detail .cta-right{flex:none;width:420px;max-width:100%;margin:0 auto}
}
@media(max-width:720px){
.sol-detail .cta{width:calc(100% - 28px);margin:22px auto;border-radius:10px}
}
.sol-detail .other-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.sol-detail .other-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:24px 20px;transition:.3s;position:relative;overflow:hidden}
.sol-detail .other-card:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(12,43,71,.12);border-color:#c9dcf0}
.sol-detail .other-card .no{font-size:13px;color:var(--orange);font-weight:800;font-family:Arial,sans-serif;letter-spacing:1px}
.sol-detail .other-card h3{font-size:17px;color:var(--navy);margin:6px 0 8px}
.sol-detail .other-card p{font-size:12.5px;color:var(--muted);line-height:1.6}
.sol-detail .other-card .go{margin-top:12px;font-size:12.5px;color:var(--blue);font-weight:600}
.sol-detail .other-card:hover .go{color:var(--orange)}
.sol-detail .site-footer{background:var(--navy);color:rgba(255,255,255,.75)}
.sol-detail .ft-top{display:flex;gap:44px;padding:52px 22px 40px;max-width:1200px;margin:0 auto;flex-wrap:wrap}
.sol-detail .ft-logo{flex:1.1;min-width:220px}
.sol-detail .ft-logo img{height:40px;width:auto;margin-bottom:20px;filter:brightness(0) invert(1)}
.sol-detail .ft-logo .fcode{display:flex;gap:18px}
.sol-detail .ft-logo .fcode span{text-align:center;font-size:12px}
.sol-detail .ft-logo .fcode i{display:block;width:86px;height:86px;background:rgba(255,255,255,.1);border-radius:6px;margin-bottom:6px;overflow:hidden}
.sol-detail .ft-logo .fcode img{width:100%;height:100%;object-fit:cover;margin:0}
.sol-detail .ft-col{flex:1;min-width:200px}
.sol-detail .ft-col h4{color:#fff;font-size:16px;margin-bottom:18px;position:relative;padding-bottom:10px}
.sol-detail .ft-col h4::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;background:var(--orange)}
.sol-detail .ft-col ul{list-style:none}
.sol-detail .ft-col li{font-size:13.5px;margin-bottom:10px;display:flex;gap:10px}
.sol-detail .ft-col li span{color:#8fb8dd;flex:none}
.sol-detail .ft-nav{display:flex;flex-wrap:wrap}
.sol-detail .ft-nav a{width:50%;font-size:13.5px;margin-bottom:10px}
.sol-detail .ft-nav a:hover{color:#fff}
.sol-detail .ft-bot{border-top:1px solid rgba(255,255,255,.12);font-size:12.5px}
.sol-detail .ft-bot .inner{max-width:1200px;margin:0 auto;padding:16px 22px;display:flex;justify-content:space-between;flex-wrap:gap;gap:10px}
.sol-detail .ft-bot a{margin-left:16px}
.sol-detail .ft-bot a:hover{color:#fff}
.sol-detail .backtop{position:fixed;right:22px;bottom:90px;width:46px;height:46px;border-radius:6px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 6px 18px rgba(12,43,71,.3);z-index:60;opacity:0;pointer-events:none;transition:.3s;font-family:Arial,sans-serif}
.sol-detail .backtop.show{opacity:1;pointer-events:auto}
.sol-detail .backtop:hover{background:var(--blue)}
@media(max-width:1080px){.sol-detail .hero .inner{flex-direction:column}
.sol-detail .hero-right{flex:none;width:100%;max-width:460px}
.sol-detail .pain-grid{grid-template-columns:repeat(2,1fr)}
.sol-detail .equip-grid{grid-template-columns:repeat(2,1fr)}
.sol-detail .other-grid{grid-template-columns:repeat(2,1fr)}
.sol-detail .flow{grid-template-columns:repeat(2,1fr)}
.sol-detail .flow-card::after{display:none}
.sol-detail .scene-grid{grid-template-columns:1fr}}
@media(max-width:720px){.sol-detail .hero h1{font-size:26px}
.sol-detail .hero-stats .st{padding-right:18px;margin-right:18px}
.sol-detail .pain-grid,.sol-detail .equip-grid,.sol-detail .other-grid,.sol-detail .flow{grid-template-columns:1fr}
.sol-detail .cta .inner{flex-direction:column;padding:26px 20px;gap:20px}
.sol-detail .cta-right{flex:none;width:100%;max-width:100%;padding:18px 16px}
.sol-detail .cta-left h2{font-size:20px}
.sol-detail .cta-left p{max-width:none}
.sol-detail .site-header .inner{height:auto;padding:14px 22px;flex-direction:column;gap:10px}
.sol-detail .mainnav ul{flex-wrap:wrap}
.sol-detail .mainnav li{flex:1 1 33%}
.sol-detail .mainnav a{height:44px;line-height:44px;font-size:14px}
.sol-detail .topbar{font-size:11.5px;line-height:1.5}
.sol-detail .topbar .inner{flex-direction:column;height:auto;padding:7px 22px;gap:3px;text-align:center}
.sol-detail .topbar .sites a{margin-left:8px}
.sol-detail .topbar .sites i{margin-left:8px}}
/* --- 与公司动态页对齐：banner / 面包屑容器字号统一为 14px --- */
.lb .newsban, .lb .p102-search-1, .lb .blk-main.plc { font-size: 14px; }
/* ============================================================
解决方案栏目页 卡片布局（之前缺失，导致卡片裸排、图片撑满整页）
容器基准：1280px（与站内 .wrap / .blk-main 一致）
主色：#FC7449（官网橙）/ 深色：#0C2B47
============================================================ */
/* --- 容器 --- */
.lb { background: #f5f6f8; }
.lb-wrap, .lb-cta { width: 1280px; max-width: calc(100% - 40px); margin: 0 auto; }
.lb-wrap { padding: 56px 0 24px; }
/* --- 卡片栅格 --- */
.lb-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
counter-reset: lbc;
}
/* --- 卡片主体 --- */
.lb-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 8px;
overflow: hidden;
text-decoration: none;
box-shadow: 0 1px 3px rgba(12, 43, 71, .07);
transition: box-shadow .35s ease, transform .35s ease;
counter-increment: lbc;
}
.lb-card:hover {
box-shadow: 0 14px 34px rgba(12, 43, 71, .15);
transform: translateY(-4px);
text-decoration: none;
}
/* --- 配图区（关键：固定高度 + 裁切，图片不再撑爆页面） --- */
.lb-ph {
position: relative;
height: 236px;
flex: none;
overflow: hidden;
background: #ffffff;
}
.lb-ph img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
/* 配图已统一裁掉四周白边与装饰框，cover 直接铺满整框，无留白 */
transition: transform .6s ease;
}
.lb-card:hover .lb-ph img { transform: scale(1.05); }
/* --- 左上角序号 --- */
.lb-num {
position: absolute;
left: 0;
top: 0;
width: 54px;
height: 34px;
background: #FC7449;
color: #fff;
font-size: 15px;
line-height: 34px;
text-align: center;
letter-spacing: .04em;
font-style: normal;
z-index: 2;
}
.lb-num::before { content: counter(lbc, decimal-leading-zero); }
/* --- 文字区 --- */
.lb-body {
display: flex;
flex-direction: column;
flex: 1;
padding: 22px 22px 24px;
}
.lb-body h3 {
margin: 0 0 12px;
font-size: 19px;
line-height: 1.5;
font-weight: 700;
color: #0C2B47;
}
.lb-body p {
margin: 0 0 18px;
font-size: 14px;
line-height: 1.8;
color: #7a7f8c;
height: 50px;
overflow: hidden;
}
.lb-go {
margin-top: auto;
display: inline-block;
font-size: 14px;
font-weight: 500;
color: #FC7449;
transition: color .25s;
}
.lb-card:hover .lb-go { color: #e05c2c; }
/* --- 底部行动区 --- */
.lb-cta { padding: 16px 0 70px; }
.lb-cta-in {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
padding: 34px 40px;
border-radius: 10px;
background: linear-gradient(100deg, #0C2B47 0%, #16395c 100%);
}
.lb-cta-in h3 {
margin: 0 0 8px;
font-size: 22px;
font-weight: 700;
color: #fff;
}
.lb-cta-in p {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: #b9c4d2;
}
.lb-cta-btn {
flex: none;
display: inline-block;
padding: 14px 34px;
border-radius: 4px;
background: #FC7449;
color: #fff;
font-size: 15px;
text-decoration: none;
transition: background .25s;
}
.lb-cta-btn:hover { background: #e05c2c; color: #fff; text-decoration: none; }
/* --- 详情页面包屑（原 .lb-crumb 无样式） --- */
.lb-crumb {
width: 1280px;
max-width: calc(100% - 40px);
margin: 0 auto;
padding: 18px 0;
font-size: 14px;
line-height: 1.8;
color: #7a7f8c;
}
.lb-crumb a { color: #7a7f8c; text-decoration: none; }
.lb-crumb a:hover { color: #FC7449; }
/* --- 响应式 --- */
@media (max-width: 1024px) {
.lb-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.lb-wrap { padding: 40px 0 18px; }
.lb-ph { height: 210px; }
.lb-body { padding: 18px 18px 20px; }
.lb-body h3 { font-size: 17px; }
.lb-cta-in { padding: 28px 26px; }
.lb-cta-in h3 { font-size: 19px; }
}
@media (max-width: 640px) {
.lb-grid { grid-template-columns: 1fr; }
.lb-wrap { padding: 28px 0 12px; }
.lb-ph { height: 200px; }
.lb-cta { padding: 10px 0 44px; }
.lb-cta-in { flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px 20px; }
.lb-cta-btn { width: 100%; text-align: center; }
.lb-crumb { padding: 14px 0; font-size: 13px; }
}
/* ============================================================================
【2026-10-24 新增】解决方案频道页 · 顶部 banner 重排（仅桌面端 >=901px）
一、版式：由「整块居中」改为「左对齐」，与「关于我们」/gywm.html 完全同栅格
· 内容容器 1200px 居中、左右 20px 内距 → 文字左边缘 1440 宽时在 140px，
与关于我们的标题左边缘（140px）严丝合缝
· 英文小标 + 短横线 + 主标题 + 描述 自上而下左对齐，横线跟文字左边对齐
二、字号：与关于我们首屏一致
英文 12px / 行高 22 / 字重 600 / 字距 2.4px
标题 38px / 行高 1.32 / 字重 700 / 字距 0.5px
描述 15.5px / 行高 1.85（描述限制在 660px 内，避免一行拉太长）
三、高度 373px 与关于我们首屏齐平；英文与横线橙色 #FC7449，
标题黑色 #111111，描述深灰 #333333
四、手机端（<=900px）不动；作用域 .lb .newsban，只影响解决方案页
五、换图：改本段最后一行的 url 即可
========================================================================== */
@media (min-width: 901px) {
.lb .newsban {
height: 373px;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
/* 与关于我们同一套栅格：1200 容器 + 左右 20 内距 */
.lb .newsban .wrap {
width: 100%;
max-width: 1200px;
padding: 0 20px;
box-sizing: border-box;
text-align: left;
}
/* 英文小标 */
.lb .newsban span {
display: inline-block;
font-size: 12px;
line-height: 22px;
font-weight: 600;
letter-spacing: 2.4px;
color: #FC7449;
}
/* 英文下面那条短横线：改为跟着左边对齐 */
.lb .newsban span:after {
content: "";
display: block;
width: 60px;
height: 1px;
margin: 16px 0 18px;
background: #FC7449;
}
/* 中文主标题 */
.lb .newsban h2 {
margin: 0;
font-size: 38px;
line-height: 1.32;
font-weight: 700;
letter-spacing: .5px;
color: #111111;
}
/* 描述 */
.lb .newsban p {
margin: 14px 0 0;
max-width: 660px;
font-size: 15.5px;
line-height: 1.85;
color: #333333;
}
/* ★ 换 banner 图：把下面 url 换成你的新图即可
（建议 1920 × 373，浅色底 —— 文字已经是黑色了） */
.lb .newsban { background-image: url("/uploadfile/20250716/anlidongtai01.jpg"); }
}