/* ==========================================================================
   宝点数字化科技有限公司 — 官网样式
   主色 #FB8C00   主文字 #1F2229   次文字 #61656E   背景 #FFFFFF / #F7F8FA
   ========================================================================== */

:root {
    --brand: #FB8C00;
    --brand-dark: #E57E00;
    --brand-light: #FFF4E6;
    --brand-line: #FFE0B8;
    --ink: #1F2229;
    --ink-2: #31353D;
    --ink-3: #61656E;
    --ink-4: #9AA0A8;
    --line: #EAECEF;
    --line-2: #F2F4F6;
    /* 全站统一底色：整页只用这一个浅灰，白色只留给"卡片"（--card），
       不再出现白色/浅灰交替的色带，避免看起来"有的白有的灰" */
    --bg: #F6F7F9;
    --bg-soft: #F6F7F9;
    --card: #FFFFFF;
    --radius: 12px;
    --shadow-sm: 0 2px 8px rgba(23, 26, 33, .05);
    --shadow-md: 0 10px 30px rgba(23, 26, 33, .08);
    --shadow-lg: 0 22px 50px rgba(23, 26, 33, .12);
    --maxw: 1200px;
    /* 正文栏宽度（全站唯一口径，2026-10-12 起 homepage/solutions/products 统一）：
         · 桌面：70vw —— 任意屏两侧恒定 15%，1440/1366/1280 笔记本屏也成立；
         · 大屏：≥1715px 封顶 1200px；
         · 窄屏：<971px 回落到 680px 下限，<680px 直接满宽。
       ⚠️ 三个坑都踩过，别再简化：
         1) 只写 max-width:1200px（固定）→ 1280 屏留白只剩 40px「铺得太大」；
         2) 只写 min(70vw,1200px) → 390 手机屏正文只剩 273px「太窄」；
         3) 用 max-width 而不是 width 在 .bleed/.map-mod 上无效（它们是块级定宽元素）。 */
    --wrapw: min(100%, clamp(680px, 70vw, var(--maxw)));
    --nav-h: 72px;
}

* { box-sizing: border-box; }

/* overflow-x 用 clip 而不是 hidden：hidden 会把 html/body 变成滚动容器，
   导致子元素的 position:sticky 失效（页头跟着页面滚走）。clip 只裁剪、不创建滚动容器。
   老浏览器不支持 clip 时由上面的 hidden 兜底（@supports 生效时覆盖掉）。 */
html { scroll-behavior: smooth; overflow-x: hidden; }
@supports (overflow: clip) {
    html { overflow-x: clip; }
}

body {
    margin: 0;
    overflow-x: hidden;
    font-family: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', system-ui, -apple-system, sans-serif;
    color: var(--ink-2);
    background: var(--bg);
    font-size: 15px;
    line-height: 1.78;
    -webkit-font-smoothing: antialiased;
    word-break: break-word;
}
@supports (overflow: clip) {
    body { overflow-x: clip; }
}

a { color: inherit; text-decoration: none; }
/* height:auto 必须显式写：HTML 的 width/height 属性是「表现属性」，在没有 CSS 覆盖时会真的生效。
   之前给图片补 width/height 防塌陷时，凡是只写了 width:100% 的容器（.partner-wall、.biz__link img）
   就被 height 属性顶成了固定像素高 → 图片纵向拉伸变形。补 height:auto 后属性只当宽高比提示用。 */
img { max-width: 100%; height: auto; display: block; border: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* 正文栏口径：min(70vw, 1200px)
   ⚠️ 不能写成 max-width: var(--maxw)（固定 1200）——那样 1280/1366/1440 笔记本屏上
   容器就等于视口，留白塌到 40/83/120px（实测）。加 70vw 之后任意屏两侧恒定 15%，
   ≥1715px 才吃满 1200 上限。与产品中心、解决方案同口径。 */
.wrap { max-width: var(--wrapw); margin: 0 auto; padding: 0 24px; }
.sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- 通用 */
.sec { padding: 80px 0; }
.sec--soft { background: transparent; }   /* 与整页统一底色一致，不再单独铺灰 */
.sec--tight { padding: 56px 0; }
.sec--sys { background: none; }           /* 去掉暖色径向渐变，保持整页单色 */
.sec-head { text-align: center; margin-bottom: 48px; }
.sec-head h2 {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: .5px;
}
.sec-head p { margin: 14px 0 0; color: var(--ink-3); font-size: 15px; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 28px;
    border-radius: 6px;
    font-size: 15px;
    background: var(--brand);
    color: #fff;
    border: 1px solid var(--brand);
    cursor: pointer;
    font-family: inherit;
    transition: .2s;
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn--ghost { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn--ghost:hover { background: var(--brand); color: #fff; }

/* 焦点样式：去掉浏览器默认光晕。
   输入框聚焦时只把边框变成品牌色；按钮仅在键盘导航时给一条实线描边。 */
.btn:focus, .biz__btn:focus, .partners__nav button:focus,
.field input:focus, .field textarea:focus,
.bleed__nav:focus, .why-cover__play:focus,
.form-actions button:focus { outline: none !important; }
.btn:focus-visible, .biz__btn:focus-visible, .partners__nav button:focus-visible,
.bleed__nav:focus-visible, .why-cover:focus-visible {
    outline: 2px solid var(--brand) !important;
    outline-offset: 3px;
}
.why-cover:focus { outline: none !important; }

/* ---------------------------------------------------------------- 顶部导航 */
.nav {
    position: sticky;
    top: 0;
    z-index: 90;
    height: var(--nav-h);
    background: rgba(246, 247, 249, .92);       /* 与整页底色一致，不再是一条白色带 */
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
}
.nav__in {
    /* 定死 1400 会在 1440 屏上只剩 20px 留白、1366/1280 直接顶满（实测）；
       加 90vw 上限后窄屏至少留 5% 边距，大屏仍吃满 1400（设计稿导航条 ~1490）。 */
    max-width: min(100%, clamp(680px, 94vw, 1400px));
    margin: 0 auto;
    height: 100%;
    padding: 0 28px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.nav__logo { display: flex; align-items: center; margin-right: 26px; flex: none; }
.nav__logo img { height: 34px; }
.nav__menu { display: flex; align-items: center; height: 100%; flex: 1; }
.nav__item { position: relative; height: 100%; display: flex; align-items: center; }
.nav__link {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 18px;
    border-radius: 19px;
    font-size: 15px;
    color: var(--ink-2);
    white-space: nowrap;
    transition: .18s;
}
.nav__item:hover > .nav__link { color: var(--brand); background: var(--brand-light); }
.nav__item.is-active > .nav__link { background: var(--brand); color: #fff; }
.nav__caret {
    width: 0; height: 0;
    margin-left: 6px;
    border: 4px solid transparent;
    border-top-color: currentColor;
    transform: translateY(2px);
}
.nav__drop {
    position: absolute;
    left: 50%;
    top: calc(100% - 6px);
    transform: translateX(-50%) translateY(6px);
    min-width: 200px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transition: .18s;
}
.nav__item:hover .nav__drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* 下拉里的分组标题（如「智能硬件系列」），不可点击 */
.nav__drop-title {
    margin: 6px 0 2px;
    padding: 8px 14px 4px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--ink-4);
    letter-spacing: .05em;
    white-space: nowrap;
}
.nav__drop-title:first-child { margin-top: 0; border-top: 0; padding-top: 4px; }
.nav__drop a {
    display: block;
    padding: 9px 14px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--ink-3);
    white-space: nowrap;
    transition: .15s;
}
.nav__drop a:hover { background: var(--brand-light); color: var(--brand); }
.nav__lang { position: relative; flex: none; margin-left: 12px; }
.nav__lang > span { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-3); cursor: pointer; }
.nav__toggle { display: none; }

/* ---------------------------------------------------------------- 首页 Hero */
.hero { position: relative; overflow: hidden; background: #0f1218; }
.hero__img { width: 100%; display: block; }

/* ---------------------------------------------------------------- 板块标题条 / 整块设计图 */
.sec-banner { text-align: center; margin-bottom: 44px; }
.sec-banner img { width: auto; margin: 0 auto; max-width: 100%; max-height: 96px; }
/* 整块设计图：尺寸/位置照原站 row1078 + module1096
   原站参数：行 padding-left 19.772905246671887%、模块宽 width=0.601904296875（占视口），
   模块 mr=0.2474074 → 左右约 19.8% 留白居中。
   底色不再单独给一块 #F8F9FD（那会形成一道比页面更冷的色带），
   改为让图自带底色与全站统一底色一致（图已按 #F6F7F9 重新铺底） */
/* 首页「宝点业务覆盖全球」地图：素材两侧原是整片底色留白（#F6F7F9，与页面底色一致），
   已裁掉（1920x1269 -> 1320x1269，绕素材自身中心对称裁，保持标题居中），所以可以按正文内容栏宽度显示、与上下区块左右对齐；
   容器宽度与 .wrap 同口径，否则图片会被原站 60.19% 的视口百分比压得比上下内容窄一大截。 */
.full-figure { width: 100%; max-width: var(--wrapw); margin: 0 auto; padding: 0 24px; }
.full-figure img { width: 100%; display: block; }

/* ---------------------------------------------------------------- 四大体系 */
.sys-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.sys-card {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s, border-color .28s;
}
.sys-card:hover {
    transform: translateY(-8px);
    border-color: var(--brand-line);
    box-shadow: 0 16px 34px rgba(16, 24, 40, .12);
}
.sys-card img { width: 100%; display: block; }

/* ---------------------------------------------------------------- 多业态解决方案 */
.biz { display: grid; grid-template-columns: 244px 1fr; gap: 52px; align-items: start; }
.biz__nav { display: flex; flex-direction: column; gap: 12px; }
.biz__btn {
    position: relative;
    height: 54px;
    padding: 0 20px 0 46px;
    text-align: left;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 27px;
    font-size: 15.5px;
    color: var(--ink-2);
    cursor: pointer;
    font-family: inherit;
    overflow: hidden;
    transition: .22s;
}
.biz__btn::before {
    content: '';
    position: absolute;
    left: 22px; top: 50%;
    width: 8px; height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: #D5D8DD;
    transition: .22s;
}
.biz__btn::after {
    content: '';
    position: absolute;
    right: 18px; top: 50%;
    width: 7px; height: 7px;
    margin-top: -3.5px;
    border-top: 1.6px solid currentColor;
    border-right: 1.6px solid currentColor;
    transform: rotate(45deg) translate(-2px, 2px);
    opacity: 0;
    transition: .22s;
}
.biz__btn:hover { border-color: var(--brand); color: var(--brand); }
.biz__btn:hover::before { background: var(--brand); }
.biz__btn.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    font-weight: 600;
}
.biz__btn.is-active::before { background: #fff; }
.biz__btn.is-active::after { opacity: 1; }
.biz__pane { display: none; }
.biz__pane.is-active { display: block; animation: fadeUp .38s ease both; }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
.biz__link {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(16, 24, 40, .09);
    transition: .28s cubic-bezier(.2, .7, .3, 1);
}
.biz__link:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(16, 24, 40, .15); }
.biz__link img { width: 100%; display: block; }

/* ---------------------------------------------------------------- 为什么选择宝点（左视频卡 + 右优势清单） */
.why { display: flex; align-items: center; gap: 46px; }
.why__media { width: 54%; flex: none; }
.why-cover { position: relative; border-radius: 14px; overflow: hidden; cursor: pointer; background: #EEF0F4; box-shadow: 0 0 0 1px rgba(17, 24, 39, .08), 0 10px 28px -14px rgba(17, 24, 39, .22); }
.why-cover img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.why-cover__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: rgba(17, 24, 39, .30);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .22s;
}
.why-cover__play i {
    width: 0; height: 0;
    margin-left: 4px;
    border-left: 14px solid rgba(255, 255, 255, .96);
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}
.why-cover:hover .why-cover__play { background: rgba(17, 24, 39, .48); transform: translate(-50%, -50%) scale(1.04); }
.why__body { flex: 1; min-width: 0; }
.why__title { margin: 0; font-size: 32px; font-weight: 700; line-height: 1.3; letter-spacing: .5px; color: var(--ink); }
.why__title::after { content: ""; display: block; width: 36px; height: 3px; border-radius: 2px; background: var(--brand); margin-top: 13px; }
.why__lead { margin: 18px 0 0; font-size: 16px; line-height: 1.85; color: var(--ink-3); }
.why__list { list-style: none; margin: 20px 0 0; padding: 0; }
.why__list li { position: relative; padding-left: 17px; margin-bottom: 11px; font-size: 14.5px; line-height: 1.8; color: var(--ink-3); }
.why__list li:last-child { margin-bottom: 0; }
.why__list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.why__list b { color: var(--ink); font-weight: 700; margin-right: 7px; }

/* ---------------------------------------------------------------- 视频播放弹窗 */
.vmodal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
.vmodal[hidden] { display: none; }
.vmodal__mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .84); }
.vmodal__box { position: relative; width: min(1080px, 92vw); }
.vmodal__video { width: 100%; display: block; border-radius: 8px; background: #000; max-height: 78vh; }
.vmodal__close {
    position: absolute;
    right: 0;
    top: -46px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: .2s;
}
.vmodal__close:hover { background: rgba(255, 255, 255, .32); }

/* ---------------------------------------------------------------- 通栏轮播（案例 / 品牌墙整图） */
/* ---------------------------------------------------------------- 首页案例轮播（原站 module855）
   v2（2026-10-12）：原先 max-width 1680 → 1600/1440/1366/1280 屏直接顶满（留白 0），
   而正文栏在那些屏上有 15% 留白，案例块比上下内容宽出一条，是首页最突兀的一处。
   现在与 .wrap 完全同口径（宽度 min(70vw,1200) + 左右 24px 内边距），
   素材也已按内容真实边界裁掉两侧烘焙留白（_ref/crop_case.py），
   于是「图内案例卡」的左右边缘正好落在正文栏上，上下对齐。
   箭头相应移到图片外侧（-46px，落在页面留白里）；≤720px 仍回到图内 8px。 */
.bleed { position: relative; width: var(--wrapw); margin: 0 auto; padding: 0 24px; background: transparent; }
.bleed__track { position: relative; }
.bleed__item { display: none; width: 100%; }
.bleed__item.is-active { display: block; }
.bleed__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #8A8F98;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(20, 24, 32, .14);
    transition: .2s;
    z-index: 2;
}
.bleed__nav:hover { background: var(--brand); color: #fff; }
.bleed__nav--prev { left: -46px; }
.bleed__nav--next { right: -46px; }

/* ---------------------------------------------------------------- 通用图片轮播（内页） */
.slider {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-md);
}
.slider__item { display: none; width: 100%; }
.slider__item.is-active { display: block; }
.slider__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .3);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: .2s;
    z-index: 2;
}
.slider__btn:hover { background: var(--brand); }
.slider__btn--prev { left: 20px; }
.slider__btn--next { right: 20px; }
.slider__dots {
    position: absolute;
    left: 0; right: 0; bottom: 16px;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.slider__dots i {
    display: block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
    cursor: pointer;
    transition: .2s;
}
.slider__dots i.is-active { background: var(--brand); width: 20px; border-radius: 4px; }

/* ---------------------------------------------------------------- 合作品牌 */
.partners { display: grid; grid-template-columns: 244px 1fr; gap: 52px; align-items: start; }
.partners__nav { display: flex; flex-direction: column; gap: 12px; }
.partners__nav button {
    position: relative;
    height: 50px;
    padding: 0 18px 0 46px;
    text-align: left;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 25px;
    font-size: 15.5px;
    color: var(--ink-2);
    cursor: pointer;
    font-family: inherit;
    transition: .22s;
}
.partners__nav button::before {
    content: '';
    position: absolute;
    left: 22px; top: 50%;
    width: 8px; height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: #D5D8DD;
    transition: .22s;
}
.partners__nav button:hover { border-color: var(--brand); color: var(--brand); }
.partners__nav button:hover::before { background: var(--brand); }
.partners__nav button.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    font-weight: 600;
}
.partners__nav button.is-active::before { background: #fff; }
.partner-wall { width: 100%; display: block; border-radius: 12px; }
.tabs__pane { display: none; }
.tabs__pane.is-active { display: block; animation: fadeUp .38s ease both; }

/* ---------------------------------------------------------------- 留言表单
   整体收紧：区块上下留白 80→60/68，标题与卡片间距 48→30，
   卡片 1000×590 → 880×~488（内边距 44/48 → 30/34），行距 20/28 → 16/22，
   留言框 110 → 92，按钮上间距 28 → 22。整块更紧凑，不再一大片空。 */
#contact { padding: 80px 0 56px; }   /* 上与大区块同节奏(80)，下与地图紧排(56) */
#contact .sec-head { margin-bottom: 30px; }
#contact .sec-head p { margin-top: 10px; }
.form-card {
    background: var(--card);
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(23, 26, 33, .07);
    padding: 30px 34px 32px;
    width: min(100%, clamp(560px, 70vw, 880px));   /* 与全站同口径：窄屏也保证两侧 15% 留白（原先定死 880，1024 屏只剩 72px） */
    margin: 0 auto;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.field { display: flex; flex-direction: column; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 13.5px; color: var(--ink-3); line-height: 1.3; margin-bottom: 6px; }
.field label i { color: var(--brand); font-style: normal; margin-left: 3px; }
.field input, .field textarea {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 13px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink-2);
    outline: none;
    transition: .18s;
    background: var(--card);
}
.field input:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(251, 140, 0, .12); }
.field textarea { resize: vertical; min-height: 92px; }
.form-actions { text-align: center; margin-top: 22px; }

/* ---------------------------------------------------------------- 地图（公司地址）
   逐条对齐原站 module2121（在线地图）：
     宽度 = 视口 × 0.7489 且居中（原站 width:calc(...* 0.7489583333333333); align-self:center）
     高度 = 宽度 × 0.368942（原站 module2121 自定义模块高度 privatePattern.pc.pmh，
          覆盖 .module_online_map 默认的 padding-bottom:27.7778%；此处取 36.9286% 与 1400x517 底图同比例）
     左上浮地址面板 = 原站 .multi_panel（left:72px top:20px width:20% min-width:256px radius:4px）
     定位针 = 原站 .icon_mark（fill:#fc5634; 24×28） */
.map-sec { padding: 56px 0; background: transparent; }
/* 门店地图：原先 74.9%（约 1438 @1920）—— 比正文栏宽 286px，是全页唯一「贴边」的块。
   现在与 .wrap 同口径，地图左右边缘与上下正文栏对齐。
   2026-10-13 起升级为 Leaflet 交互地图（高德瓦片免 key，可拖动/缩放），静态底图仅作 noscript 降级。 */
.map-mod { position: relative; width: var(--wrapw); margin: 0 auto; padding: 0 24px; }
.map-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1400 / 517;      /* = 原站 pmh 0.368942（1400x517 底图同比例） */
    overflow: hidden;
    background: #EDEFF2;
}
/* Leaflet 画布 */
.map-canvas { position: absolute; inset: 0; z-index: 1; background: #EDEFF2; }
.leaflet-container { width: 100%; height: 100%; font: inherit; outline: none; background: #EDEFF2; }
.leaflet-container .leaflet-control-attribution { background: rgba(255, 255, 255, .78); font-size: 10px; color: #999; }
.leaflet-control-zoom {
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(20, 24, 32, .12) !important;
}
.leaflet-control-zoom a { color: #555 !important; border-bottom: 1px solid var(--line) !important; }
.leaflet-control-zoom a:hover { background: #FFF3E5 !important; color: var(--brand) !important; }
/* Leaflet 定位针（视觉沿用原 .icon_mark 橙红针形） */
.lpin-wrap { background: none; border: 0; }
.lpin {
    position: relative;
    display: block;
    width: 26px; height: 31px;
    cursor: pointer;
    filter: drop-shadow(0 3px 4px rgba(20, 24, 32, .3));
    transition: transform .18s;
    transform-origin: 50% 100%;
}
.lpin svg { width: 100%; height: 100%; display: block; }
.lpin svg path { fill: #FC5634; }
.lpin b {
    position: absolute; left: 0; right: 0; top: 0; height: 23px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; font-weight: 400; line-height: 1;
}
.lpin:hover { transform: scale(1.15); }
.lpin.is-on { transform: scale(1.22); }
.lpin.is-on svg path { fill: #E23A1C; }
/* 针弹窗（点击针 / 点地址列表弹出） */
.leaflet-popup-content-wrapper { border-radius: 10px; box-shadow: 0 6px 24px rgba(20, 24, 32, .18); }
.leaflet-popup-content { margin: 12px 16px; font: inherit; line-height: 1.5; }
.leaflet-popup-close-button { color: #B6B8BC !important; }
.map-pop__d { color: var(--ink); font-size: 14px; font-weight: 700; }
.map-pop__a { color: #888; font-size: 12.5px; margin-top: 3px; }
.map-pop__nav { display: inline-block; margin-top: 7px; color: var(--brand); font-size: 13px; text-decoration: none; }
.map-pop__nav:hover { text-decoration: underline; }

/* 左上地址面板（原站 .multi_panel） */
.map-panel {
    position: absolute;
    left: 60px; top: 14px;
    width: 20%;
    min-width: 256px;
    max-height: calc(100% - 28px);
    box-sizing: border-box;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(20, 24, 32, .14);
    z-index: 4;
}
.map-panel__search {
    flex: none;
    display: flex;
    align-items: center;
    height: 30px;
    margin: 12px 12px 0;
    padding: 0 9px;
    border-bottom: 1px solid #E3E2E8;
}
.map-panel__search svg { flex: none; width: 13px; height: 13px; fill: #B6B8BC; margin-right: 6px; }
.map-panel__search input {
    flex: 1; min-width: 0;
    border: 0; outline: none; background: transparent;
    font-size: 13px; color: #333; font-family: inherit;
}
.map-panel__search input::placeholder { color: #B6B8BC; }
.map-panel__list {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 4px;
    padding: 0 12px 8px;
    overflow: auto;
}
.map-item {
    display: flex;
    padding: 9px 12px;
    cursor: pointer;
    border-radius: 2px;
    transition: background .15s;
}
.map-item:hover { background: #F7F7F7; }
.map-item.is-active { background: #F4F4F4; }
.map-item__ico {
    flex: none;
    position: relative;
    width: 24px; height: 28px;
    margin-right: 6px;
}
.map-item__ico svg { width: 24px; height: 28px; display: block; }
.map-item__ico svg path { fill: #FC5634; }
.map-item__ico b {
    position: absolute; left: 50%; top: 0;
    height: 22px;
    transform: translateX(-50%);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; font-weight: 400; line-height: 1;
    z-index: 2;
}
.map-item__c { flex: 1; min-width: 0; font-size: 13px; }
.map-item__d { color: #333; word-break: break-all; line-height: 1.5; }
.map-item__a { color: #999; text-decoration: underline; line-height: 1.5; margin-top: 2px; }
.map-panel__empty { padding: 16px 12px; font-size: 13px; color: #999; text-align: center; }

/* ---------------------------------------------------------------- 内页 banner（设计好带标题的整图） */
.banner { position: relative; background: transparent; }
.banner img { width: 100%; display: block; }
.crumb-bar {
    border-bottom: 1px solid var(--line);
    background: transparent;
    font-size: 13px;
    color: var(--ink-4);
}
.crumb-bar .wrap { display: flex; align-items: center; justify-content: space-between; height: 52px; gap: 16px; }
.crumb-bar a:hover { color: var(--brand); }
.crumb-bar span.sep { margin: 0 8px; }

/* ---------------------------------------------------------------- 内页文本头 */
.phero {
    position: relative;
    padding: 68px 0 60px;
    background: transparent;          /* 与整页底色一致；暖色光斑作为点缀保留 */
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
.phero::after {
    content: '';
    position: absolute;
    right: -140px; top: -140px;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 140, 0, .13) 0%, rgba(251, 140, 0, 0) 70%);
}
.phero::before {
    content: '';
    position: absolute;
    left: -80px; bottom: -160px;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 140, 0, .07) 0%, rgba(251, 140, 0, 0) 70%);
}
.phero .wrap { position: relative; z-index: 1; }
.phero h1 { margin: 0; font-size: 38px; color: var(--ink); letter-spacing: 1px; }
.phero p { margin: 14px 0 0; color: var(--ink-3); font-size: 15.5px; max-width: 760px; }
.crumb { margin-top: 20px; font-size: 13px; color: var(--ink-4); }
.crumb a:hover { color: var(--brand); }
.crumb span.sep { margin: 0 8px; }

/* ---------------------------------------------------------------- 内页正文 */
.article { padding: 56px 0 72px; }
.article > .wrap > p { color: var(--ink-3); margin: 0 0 18px; font-size: 15.5px; }
.article h2 {
    font-size: 24px;
    color: var(--ink);
    margin: 56px 0 22px;
    padding-left: 14px;
    border-left: 4px solid var(--brand);
    line-height: 1.3;
}
.article h2:first-child { margin-top: 0; }
.article h3 { font-size: 18px; color: var(--ink); margin: 0 0 10px; }
.article .lead { font-size: 16.5px; color: var(--ink-2); line-height: 1.9; }

/* 单张整图 */
.fig { margin: 0 0 30px; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.fig img { width: 100%; display: block; }
/* 关于宝点简介视频：按 about.jpg 内缩略图位置（x622,y206,419x238 / 1280x711）百分比覆盖真实播放器 */
.fig--video { position: relative; }
.fig--video .fig__video { position: absolute; left: 48.594%; top: 28.973%; width: 32.734%; height: 33.474%; background: #000; object-fit: cover; }
.fig--flush { box-shadow: none; border-radius: 0; }
/* 展厅实拍双视频 */
.fig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 30px; }
.fig-grid .fig { margin: 0; }
.fig-grid video { width: 100%; aspect-ratio: 16 / 9; display: block; border-radius: 12px; background: #000; }
@media (max-width: 720px) { .fig-grid { grid-template-columns: 1fr; } }
.fig--line { border: 1px solid var(--line); }
/* 竖版长图：按长宽比限宽居中，避免把页面纵向拉得过长 */
.fig--tall, .longshot.fig--tall { max-width: 400px; margin-left: auto; margin-right: auto; }
.fig--long, .longshot.fig--long { max-width: 780px; margin-left: auto; margin-right: auto; }

/* 两列 / 三列图墙 */
.gal { display: grid; gap: 22px; margin: 0 0 34px; }
.gal--2 { grid-template-columns: repeat(2, 1fr); }
.gal--3 { grid-template-columns: repeat(3, 1fr); }
.gal--4 { grid-template-columns: repeat(4, 1fr); }
.gal figure { margin: 0; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--line); transition: .25s; }
.gal figure:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-line); }
.gal img { width: 100%; display: block; }

/* 左图右文 / 左文右图 */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin: 0 0 42px; }
.split--rev .split__media { order: 2; }
.split__media { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.split__media img { width: 100%; display: block; }
.split h3 { font-size: 21px; color: var(--ink); margin: 0 0 12px; }
.split p { color: var(--ink-3); margin: 0 0 12px; }

/* 数字条 */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 0 0 42px; }
.stat {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 26px 20px;
    text-align: center;
    transition: .25s;
}
.stat:hover { border-color: var(--brand-line); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.stat b { display: block; font-size: 30px; color: var(--brand); letter-spacing: .5px; line-height: 1.2; }
.stat span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--ink-3); }

/* 功能卡片（8 宫格） */
.fgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0 0 40px; }
.fcard {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 26px 22px 24px;
    overflow: hidden;
    transition: .25s;
}
.fcard::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand) 0%, #FFC061 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: .3s;
}
.fcard:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(16, 24, 40, .12); border-color: var(--brand-line); }
.fcard:hover::after { transform: scaleX(1); }
.fcard i {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--brand-light);
    color: var(--brand);
    font-style: normal;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 14px;
}
.fcard b { display: block; font-size: 16px; color: var(--ink); margin-bottom: 8px; }
.fcard span { display: block; font-size: 13.5px; color: var(--ink-3); line-height: 1.7; }

/* 产品卡 */
.pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0 0 40px; }
.pcard {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 26px 24px;
    background: #fff;
    transition: .25s;
}
.pcard:hover { border-color: var(--brand-line); box-shadow: 0 12px 26px rgba(16, 24, 40, .11); transform: translateY(-4px); }
.pcard b { display: block; color: var(--ink); font-size: 16.5px; margin-bottom: 8px; }
.pcard span { font-size: 13.5px; color: var(--ink-3); }

/* 要点清单 */
.checklist { margin: 0 0 32px; }
.checklist li {
    position: relative;
    padding: 0 0 0 30px;
    margin-bottom: 12px;
    color: var(--ink-3);
    font-size: 15px;
}
.checklist li::before {
    content: '';
    position: absolute;
    left: 2px; top: 9px;
    width: 14px; height: 8px;
    border-left: 2.2px solid var(--brand);
    border-bottom: 2.2px solid var(--brand);
    transform: rotate(-45deg);
}

/* 步骤 */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0 0 40px; counter-reset: st; }
.step { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 26px 24px 24px; position: relative; }
.step::before {
    counter-increment: st;
    content: counter(st, decimal-leading-zero);
    display: block;
    font-size: 26px;
    font-weight: 700;
    color: #F0F1F3;
    line-height: 1;
    margin-bottom: 12px;
    letter-spacing: 1px;
}
.step b { display: block; color: var(--ink); font-size: 16.5px; margin-bottom: 8px; }
.step span { font-size: 13.5px; color: var(--ink-3); }

/* 长图（原站整页效果图） */
.longshot { max-width: 1040px; margin: 0 auto 34px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }

/* ---------------------------------------------------------------- 解决方案页（对照原站 1:1）
   原站 = 通栏 banner（高宽比照抄各页 banner_pic_group：多数页 41.6667%，
   票务文旅 h-col-118 是 38.20459290187891%）+ 通栏内容大图（满宽），
   页面无面包屑、无 CTA，内容全部是设计好的整图 */
.sol-banner {
    position: relative;
    display: block;
    width: 100%;
    /* 用 aspect-ratio 而不是 padding-bottom：容器限宽后 padding 百分比按外层算会失真 */
    aspect-ratio: 2.4;              /* = 原站 41.6667% 的倒数，各页可用 inline 覆盖 */
    overflow: hidden;
    background: var(--bg-soft);
}
.sol-banner > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
}
/* 多张 banner：自动轮播 + 鼠标拖拽切换（JS 驱动，见 main.js 的 [data-sol-slides]）
   图片叠放，用 opacity 淡入淡出；拖拽时跟手平移并露出前后张。 */
.sol-banner--slides {
    cursor: default;                /* 保持普通箭头光标（拖拽能力照常可用） */
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;            /* 纵向留给页面滚动，横向由拖拽接管 */
}
.sol-banner--slides.is-dragging { cursor: default; }
.sol-banner--slides > img {
    opacity: 0;
    z-index: 1;
    -webkit-user-drag: none;
    transition: opacity .6s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}
.sol-banner--slides > img.is-active { opacity: 1; z-index: 2; }
.sol-banner--slides > img.is-peek { opacity: 1; z-index: 1; }
/* 拖拽跟手期间禁用过渡，松手瞬间禁用过渡以无跳变地归位 */
.sol-banner--slides.is-dragging > img,
.sol-banner--slides.no-anim > img { transition: none; }

/* 原站同款短线指示器（原站为 pic_short_line 三条短线）—— 弱化版：
   更短（16/24px）、更细（2px）、低对比（半透明白），去掉黑色投影，
   让它在 banner 上几乎"隐形"，只在需要时能看清当前页 */
.sol-banner__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.sol-banner__dot {
    width: 16px;
    height: 2px;
    padding: 0;
    border: 0;
    border-radius: 1px;
    background: rgba(255, 255, 255, .38);
    cursor: pointer;
    transition: background .2s, width .2s;
}
.sol-banner__dot:hover { background: rgba(255, 255, 255, .62); }
.sol-banner__dot.is-active { width: 24px; background: rgba(255, 255, 255, .78); }

/* 版式宽度照原站凡科 SSR 口径（col-131 等）：
   banner 的设计宽度 1920（responsiveInfo.independent.banner.bl[0].width=1920），
   正文内容区宽度 1680（responsiveInfo.pattern.adaptWidth.w=1680）。
   屏幕宽于该值时整块居中、两侧留页面底色（#F6F7F9，与原站一致且看不出接缝），
   避免 >设计宽度 的屏幕把 1920 素材拉伸放大后变形、发虚 */
.sol-banner { width: 100%; max-width: 1920px; margin-left: auto; margin-right: auto; }

/* 正文内容栏：原站口径 1680（responsiveInfo.pattern.adaptWidth.w）。
   ⚠️ 容器本身不直接决定观感 —— 正文图还有一层百分比（见 .sol-main--product），
      用户看到的是「图」而不是容器。收留白要动的是那个百分比，不是这里。
      解决方案 7 页用 .sol-main--narrow 收到 1440；产品中心 13 页用 .sol-main--product。 */
.sol-main {
    width: 100%;
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
    padding-top: clamp(36px, 3.5vw, 56px);   /* 2026-10-13：12~22px 太贴 banner，全站统一放大到 36~56px */
    padding-bottom: clamp(40px, 4.2vw, 62px);
}
.sol-main > * + * { margin-top: clamp(14px, 1.5vw, 24px); }

/* 解决方案 7 页：1680 → 1440（2026-10-12 用户反馈「铺得太大、留白太少」）
   依据：全站其它页面正文栏是 1200（内容 1152），解决方案页却占满视口 87.5%，
   实机两侧只剩 120px，比全站宽了 46%，观感「铺得太开」。
   收到 1440 后：1920 屏两侧留白 120 → 240px（翻倍）；
   内容图内可见内容宽 1267 → 1086，与全站正文栏 1152 基本齐平；
   图内烘焙文字缩放 0.875 → 0.75，票务页智能硬件标签实测仍清晰；
   再往下收到 1200 会掉到 0.60、标签糊成一片，故 1440 是下限。 */
.sol-main--narrow { max-width: 1440px; }

/* 内容长图：宽度按各页原站模块真实百分比（inline style 给值），居中，不超原始像素 */
.sol-main .sol-shot { display: block; width: 100%; max-width: 100%; height: auto; margin-left: auto; margin-right: auto; }

/* 产品中心 13 页：正文图统一收成一档宽度（2026-10-12）
   —— 实测原先有 **7 种** 宽度（1088/1145/1263/1303/1351/1522/1680），页与页跳变，
      这才是「比例不协调」的真正来源；已把这些内联百分比全部删掉，改由这一条统一给值。
   口径：min(70vw, 1200px)  —— 「两侧各留 15%」+「大屏封顶全站内容栏」
     · 70vw：任意屏幕都保证两侧各 15% 留白，1440/1366/1280 笔记本屏也适用
     · 1200px：全站内容栏口径（首页/客户案例/关于/资金扶持都是 1200/1152），
       ≥1715px 的宽屏取上限，1920 屏两侧留白 360px（原先最宽的 1680 块只剩 120px）
   实测各视口（图宽 / 单侧留白）：2560→1200/680、1920→1200/360、1600→1120/240、
       1440→1008/216、1280→896/192、1024→717/154、768→538/115
   ⚠️ 为什么不是把容器直接定死 1200：那样在 1440/1366/1280 笔记本屏上容器就等于视口，
      图片 100% 撑满 → 反而比现在更宽、留白更少（1280 屏只剩 40px，与诉求完全相反）。
      必须「视口比例 + 上限」才能两头都对 —— 这是本轮最关键的一个判断。
   ⚠️ 为什么不再往下压：素材原图 1920 宽，1200 → 缩放 0.625，
      站内本来就有 0.567 / 0.596 的块（f-atmos-03、智能硬件 tab）且一直可用，0.625 在其之上。 */
.sol-main--product .sol-shot { width: min(70vw, 1200px); }

/* ---------- 解决方案页「功能卡片」区块（2026-10-12 由内容大图改为真实 HTML）
   v2（同日）：用户反馈「橙色的比例太多了」。
   上一版整卡浅橙渐变 #FFF3EA→#FDE2CF + 橙标题 #FF6C00 + 橙图标 #F98027
   → 一屏里橙色（含浅橙底）占了约七成面积，视觉发闷、也没有层次。
   现在改为「白卡 + 品牌色点缀」的克制配色，并全部改用站内调色板变量：
     卡底     --card     #FFFFFF + 1px 描边 --line + --shadow-sm（浅灰底上一眼能分出卡片）
     图标圆   --brand    #FB8C00（全站品牌色，顺带换掉原先偏红的 #F98027）
     标题     --ink      #1F2229（与站内 .why__title 等区块标题同口径）
     正文     --ink-3    #61656E
     区块标题 --ink + 3px 品牌色短线（与 .why__title::after 同款）
   橙色只剩「8 个图标圆 + 1 条 3px 短线 + hover 描边」，占比从 ~70% 收到 <10%，
   层次也出来了：白卡 → 灰正文 → 橙图标，视线自然先落在图标上。
   几何仍沿用设计图口径（卡宽 312 / 间距 48 / 图标圆 74 / 标题 27 / 正文 20），
   圆角从 63（糖果块）收到 30 —— 白卡用大圆角会显得软塌、不像卡片。
   字号与间距走 clamp(390 屏定值, vw, 1920 屏定值)，不用一堆断点。 */
.sol-cards { width: 100%; max-width: 1200px; margin: 0 auto; padding: clamp(32px, 3.4vw, 52px) 24px clamp(38px, 4vw, 58px); }
.sol-cards__title {
    margin: 0 0 clamp(26px, 2.8vw, 46px);
    text-align: center;
    font-size: clamp(23px, 2.1vw, 34px);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--ink);
}
.sol-cards__title::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: var(--brand);
    margin: 18px auto 0;
}
/* 副标题（仅票务页有，原设计图里就带这一行；其余 6 页原图无此行） */
.sol-cards__lead {
    max-width: 860px;
    margin: 0 auto clamp(26px, 2.8vw, 44px);
    text-align: center;
    font-size: clamp(14px, 1.02vw, 17px);
    line-height: 1.75;
    color: var(--ink-3);
    text-wrap: pretty;
}
.sol-cards__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 2.4vw, 34px);
}
.sol-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(26px, 3vw, 46px) clamp(14px, 1.5vw, 22px) clamp(24px, 2.6vw, 38px);
    border-radius: clamp(16px, 1.7vw, 30px);
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    transition: transform .22s, box-shadow .22s, border-color .22s;
}
.sol-card:hover {
    transform: translateY(-4px);
    border-color: var(--brand-line);
    box-shadow: var(--shadow-md);
}
.sol-card__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(48px, 4vw, 64px);
    height: clamp(48px, 4vw, 64px);
    border-radius: 50%;
    background: linear-gradient(150deg, #FFA23A 0%, var(--brand) 100%);
    box-shadow: 0 6px 14px rgba(251, 140, 0, .26);
    color: #fff;
    flex: none;
}
.sol-card__ico svg { width: 56%; height: 56%; }
.sol-card h3 {
    margin: clamp(18px, 2.3vw, 34px) 0 0;
    font-size: clamp(17px, 1.5vw, 23px);
    line-height: 1.3;
    font-weight: 700;
    color: var(--ink);
    text-wrap: balance;
}
.sol-card p {
    margin: clamp(9px, 1.1vw, 16px) 0 0;
    font-size: clamp(13px, 1.05vw, 16px);
    line-height: 1.6;
    color: var(--ink-3);
    text-wrap: pretty;      /* 避免末行只剩 1~2 个字的「孤字行」 */
}
/* 弹珠机页：7 张卡 + 长文案，走 3 列，字号略收，避免一行只剩几个字 */
.sol-cards--wide .sol-cards__grid { grid-template-columns: repeat(3, 1fr); }
.sol-cards--wide .sol-card:last-child { grid-column: 2; }   /* 第 7 张单独一行时居中（与原设计一致） */
.sol-cards--wide .sol-card h3 { font-size: clamp(17px, 1.35vw, 21px); }
.sol-cards--wide .sol-card p { font-size: clamp(13px, 1vw, 15px); line-height: 1.6; }

/* 案例网格（票务文旅页 module2128：每行 4 个，图 71.67% 比例 cover） */
.sol-cases { padding: 26px 1.2% 10px; }
/* 票务页把左右内边距提到 8%，让案例网格与上方内容图的「可见内容栏」两边对齐
   （实测各图左右内边距 7.4%~8.2%）。不收的话，正文栏收窄后这块会比其它区块
   宽出约 200px、反而更突兀。移动端维持原有 3.2%，不参与。 */
@media (min-width: 721px) {
    .sol-main--narrow .sol-cases { padding-left: 8%; padding-right: 8%; }
}
.sol-cases__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 18px; }
.sol-case { display: block; }
.sol-case__pic {
    display: block;
    position: relative;
    padding-bottom: 71.67%;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.sol-case__pic img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .3s;
}
.sol-case:hover .sol-case__pic img { transform: scale(1.03); }
.sol-case__name { display: block; margin-top: 10px; font-size: 14px; color: var(--ink-3); transition: .18s; }
.sol-case:hover .sol-case__name { color: var(--brand); }

/* ---------------------------------------------------------------- 页脚 */
.foot { background: transparent; border-top: 1px solid var(--line); color: var(--ink-3); padding: 48px 0 0; font-size: 14px; }
/* 品牌 + 联系方式条：设计稿原本是「logo + 电话」一整张 JPEG（1326×118），
   缩到 520px 显示后，里面的「市场商务合作 / 售后支持 / 号码」只有约 11.8px，
   比页脚正文（.foot 的 14px）小一号。这里拆成「logo 图 + 网页真文字」，
   字号与页脚正文完全一致，且窄屏可自动换行、电话可点。 */
.foot__brand {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 30px;
    padding-bottom: 24px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--line);
}
.foot__logo { display: block; width: 98px; height: auto; flex: 0 0 auto; }
.foot__ct { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: #666; }
.foot__cti { display: block; width: 16px; height: 16px; flex: 0 0 auto; }
.foot__ct a { color: #F4550A; transition: .18s; }
.foot__ct a:hover { color: var(--brand); }
/* 前 4 列等分，二维码列按内容自适应贴右边界 —— 让页脚左右都对齐到 wrap，不留半截空当 */
.foot__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 34px; }
.foot h4 { color: var(--ink); font-size: 16px; font-weight: 700; margin: 0 0 15px; }
.foot li { margin-bottom: 9px; }
.foot li a { color: var(--ink-3); transition: .18s; }
.foot li a:hover { color: var(--brand); }
.foot__qr { display: flex; gap: 22px; }
.foot__qr div { text-align: center; }
.foot__qr img { width: 100px; height: 100px; border-radius: 8px; background: #fff; padding: 4px; border: 1px solid var(--line); }
.foot__qr span { display: block; margin-top: 7px; font-size: 13px; color: var(--ink-4); }
/* 底部版权 + 备案：两行居中；备案号可跳转（工信部 beian.miit.gov.cn / 公安 www.beian.gov.cn） */
.foot__bar {
    margin-top: 34px;
    border-top: 1px solid var(--line);
    padding: 22px 0 28px;
}
.foot__cr {
    margin: 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.7;
    color: #999;
}
.foot__beian {
    margin: 9px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 24px;
    font-size: 14px;
    line-height: 1.6;
}
/* 备案号链接：固定 #666，无 hover 变色（按要求） */
.foot__beian a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #666;
    text-decoration: none;
}
.foot__ga img { width: 20px; height: 20px; display: block; flex: none; }

/* ---------------------------------------------------------------- CTA（品牌橙） */
.cta { background: linear-gradient(100deg, #F98307 0%, #FFA02C 100%); color: #fff; padding: 52px 0; }
.cta__in { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta h2 { margin: 0; font-size: 27px; color: #fff; }
.cta p { margin: 8px 0 0; color: rgba(255, 255, 255, .88); }
.cta .btn-b { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 32px; border-radius: 6px; background: #fff; color: var(--brand-dark); font-size: 15px; font-weight: 700; transition: .2s; }
.cta .btn-b:hover { background: #FFF6EA; transform: translateY(-1px); }

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 1180px) {
    .map-panel { left: 40px; width: 30%; }
}
@media (max-width: 1100px) {
    .sys-cards { grid-template-columns: repeat(2, 1fr); }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .fgrid { grid-template-columns: repeat(2, 1fr); }
    .pcards { grid-template-columns: repeat(2, 1fr); }
    .gal--4 { grid-template-columns: repeat(2, 1fr); }
    .biz, .partners { grid-template-columns: 1fr; }
    .foot__grid { grid-template-columns: repeat(2, 1fr); gap: 26px 32px; }
    .why { gap: 32px; }
    .why__media { width: 51%; }
    .why__title { font-size: 26px; }
}
@media (max-width: 860px) {
    .why { flex-direction: column; align-items: stretch; gap: 26px; }
    .why__media { width: 100%; }
    .split { grid-template-columns: 1fr; gap: 22px; }
    .split--rev .split__media { order: 0; }
    .steps { grid-template-columns: 1fr; }
    .gal--3 { grid-template-columns: repeat(2, 1fr); }
    /* 手机端：地图改为更方的高宽比（原站 mobi padding-bottom:74.9279%），
       地址面板不再浮在地图上遮挡视线，改为落到地图下方 */
    .map-stage { aspect-ratio: 3 / 4; }   /* 交互地图无横竖版之分，窄屏给竖版比例更高 */
    /* 面板改为正常流，落到地图下方，不再遮挡地图 */
    .map-panel {
        position: static;
        width: auto;
        min-width: 0;
        max-height: none;
        margin-top: 14px;
        border: 1px solid var(--line);
        box-shadow: none;
    }
    .map-panel__list { overflow: visible; }
}
@media (max-width: 720px) {
    .nav__menu { display: none; }
    .nav__toggle { display: flex; flex-direction: column; gap: 5px; margin-left: auto; cursor: pointer; }
    .nav__lang { display: none; }
    .nav__toggle i { width: 22px; height: 2px; background: var(--ink-2); display: block; }
    .sec-banner { margin-bottom: 26px; }
    .sec-banner img { max-width: 100%; }
    /* 原站 mobi 参数：ml=mr=0.03733 → 图宽 = 100%-2×3.733% */
    .full-figure img { width: 92.534%; margin-left: 3.733%; }
    .sec { padding: 44px 0; }
    .sec-head { margin-bottom: 30px; }
    .sec-head h2 { font-size: 21px; letter-spacing: 0; }
    .sec-head p { font-size: 14px; padding: 0 6px; }
    .sys-cards, .stats, .fgrid, .pcards, .gal--2, .gal--3, .gal--4, .steps { grid-template-columns: 1fr; }
    .sys-cards { gap: 16px; }
    .sys-card { width: 100%; max-width: 330px; margin: 0 auto; }
    .biz__nav { flex-direction: row; overflow-x: auto; gap: 10px; padding-bottom: 6px; }
    .biz__btn { flex: none; height: 42px; padding: 0 18px; font-size: 14px; border-radius: 21px; }
    .biz__btn::before, .biz__btn::after { display: none; }
    .why__title { font-size: 22px; }
    .why__title::after { width: 30px; margin-top: 10px; }
    .why__lead { margin-top: 14px; font-size: 15px; line-height: 1.8; }
    .why__list { margin-top: 16px; }
    .why__list li { font-size: 14px; line-height: 1.75; margin-bottom: 9px; padding-left: 15px; }
    .why__list li::before { top: 9px; width: 5px; height: 5px; }
    .why-cover { border-radius: 12px; }
    .why-cover__play { width: 48px; height: 48px; }
    .why-cover__play i { border-left-width: 12px; border-top-width: 8px; border-bottom-width: 8px; margin-left: 3px; }
    .partners__nav { flex-direction: row; overflow-x: auto; gap: 10px; padding-bottom: 6px; }
    .partners__nav button { flex: none; height: 42px; padding: 0 16px 0 38px; font-size: 14px; border-radius: 21px; }
    .partners__nav button::before { left: 18px; width: 7px; height: 7px; margin-top: -3.5px; }
    #contact { padding: 44px 0; }
    #contact .sec-head { margin-bottom: 22px; }
    .form-card { padding: 22px 16px 24px; border-radius: 14px; }
    .form-grid { grid-template-columns: 1fr; gap: 14px; }
    .map-sec { padding: 44px 0; }
    .foot { padding-top: 40px; }
    .foot__grid { grid-template-columns: 1fr; gap: 26px; }
    .foot__cr { font-size: 12.5px; }
    .foot__beian { font-size: 12.5px; gap: 6px 16px; }
    .phero { padding: 46px 0 38px; }
    .phero h1 { font-size: 25px; }
    .phero p { font-size: 14px; }
    .article { padding: 34px 0 48px; }
    .article--flush { padding: 34px 0 48px; }
    .article h2 { font-size: 19px; margin: 34px 0 16px; }
    .article .lead { font-size: 15px; }
    .cta { padding: 38px 0; }
    .cta h2 { font-size: 20px; }
    .slider__btn { width: 36px; height: 36px; }
    .slider__btn--prev { left: 8px; }
    .slider__btn--next { right: 8px; }
    .bleed__nav { width: 34px; height: 34px; font-size: 12px; }
    .bleed__nav--prev { left: 8px; }
    .bleed__nav--next { right: 8px; }
    .crumb-bar .wrap { height: 46px; }
}

/* ---------------------------------------------------------------- 解决方案页响应式 */
@media (max-width: 900px) {
    .sol-cases__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
    /* banner 保持 41.6667% 不动 —— 原站就是把这个百分比硬写在 HTML 上、没有任何移动端覆盖，
       且 banner 原图本身是 2.4:1，41.6667% 的容器在任何宽度下比例恒为 2.4:1，
       cover 不会裁掉两侧文字，所以这里无需（也不应该）调整高度比，以保持 1:1 */
    .sol-cases { padding: 20px 3.2% 6px; }
    .sol-cases__grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
    .sol-case__name { margin-top: 8px; font-size: 13px; }
}
@media (max-width: 1080px) {
    .sol-cards__grid { grid-template-columns: repeat(2, 1fr); }
    .sol-cards--wide .sol-cards__grid { grid-template-columns: repeat(2, 1fr); }
    .sol-cards--wide .sol-card:last-child { grid-column: auto; }
}
@media (max-width: 620px) {
    .sol-cards { padding: 34px 20px 44px; }
    .sol-cards__grid { grid-template-columns: 1fr; gap: 16px; }
    .sol-cards--wide .sol-cards__grid { grid-template-columns: 1fr; }
    .sol-cards--wide .sol-card:last-child { grid-column: auto; }
}

/* ---------------------------------------------------------------- 产品中心（对照原站 1:1）
   原站产品页结构与解决方案页一致：通栏 banner + 通栏内容整图，
   无面包屑、无自造文案卡片。宝点云多一个「轮播多图」模块（8 张功能模块图）。 */

/* 通用内容轮播（原站「轮播多图」）—— 与 banner 轮播共用一套 JS（[data-sol-slides]），
   区别只是容器高度比由图片自身比例决定，写在 inline style 上 */
.sol-slides {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 2.4;              /* 兜底，实际比例由各页 inline aspect-ratio 指定 */
    overflow: hidden;
    background: var(--bg-soft);
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}
.sol-slides > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    opacity: 0;
    z-index: 1;
    -webkit-user-drag: none;
    transition: opacity .6s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}
.sol-slides > img.is-active { opacity: 1; z-index: 2; }
.sol-slides > img.is-peek { opacity: 1; z-index: 1; }
.sol-slides.is-dragging > img,
.sol-slides.no-anim > img { transition: none; }

/* 宝点云「功能模块」轮播（仅 product-cloud.html 使用）。
   原照抄原站 module1119 的 .photo_display_wrap{width:75.176%}，与页面第一张正文图同宽；
   当时的顾虑是「通栏 1680 会超出原站 33%、图内图标小字发虚」。
   2026-10-12 起与正文图共用同一条 min(75.176%, 1200px) 口径 → 和页面上其它块严格同宽。
   原先 1263 → 1200，缩放 0.658 → 0.625，不会发虚（素材 sw-cloud-01 是 1920×1098）。 */
.sol-slides--narrow {
    max-width: min(70vw, 1200px);
    margin-left: auto;
    margin-right: auto;
}

/* 智能硬件系列切换：对照原站「横向标签」tabpack
   原站：选中底 rgba(254,87,34,1) 橙红、未选 rgba(222,222,222,1) 浅灰、标签居中、左右各 5px 间距 */
.hw-tabs { width: 100%; }
.hw-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 10px;
    padding: 26px 3% 6px;
}
/* 智能硬件页 tab 条与正文图同宽（2026-10-12）：
   默认 nav 撑满 1680 容器，会比 1200 的内容图宽出一半，看起来「散」。
   这里只收 nav（容器保持 100%，面板里的图仍是 .sol-shot 那一档宽度）。 */
@media (min-width: 721px) {
    .sol-main--product .hw-tabs__nav {
        width: min(70vw, 1200px);
        margin-left: auto;
        margin-right: auto;
    }
}
.hw-tabs__btn {
    margin: 0 5px;
    padding: 9px 20px;
    border: 0;
    border-radius: 4px 4px 0 0;
    background: rgba(222, 222, 222, 1);
    color: #212121;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.25;
    cursor: pointer;
    transition: .22s;
}
.hw-tabs__btn:hover { background: #D0D0D0; }
.hw-tabs__btn.is-active {
    background: rgba(254, 87, 34, 1);
    color: #fff;
    font-weight: 600;
}
.hw-tabs__pane { display: none; }
.hw-tabs__pane.is-active { display: block; animation: fadeUp .38s ease both; }
@media (max-width: 720px) {
    .hw-tabs__nav { padding: 18px 3% 4px; gap: 6px; }
    .hw-tabs__btn { padding: 8px 14px; font-size: 14px; margin: 0 3px; }
}

/* 宝点云「功能模块」文字区：与上方轮播联动（main.js 同步 is-active）。
   原站把这些说明画在图里、放大后发虚，这里用网页真文字渲染。 */
.sol-feats {
    max-width: 1000px;
    margin: 30px auto 10px;
    padding: 0 24px;
}
.sol-feat { display: none; }
.sol-feat.is-active { display: block; animation: fadeUp .36s ease both; }
.sol-feat h3 {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    text-align: center;
}
.sol-feat li {
    margin: 10px 0;
    font-size: 15px;
    line-height: 1.92;
    color: var(--ink-3);
    text-align: center;              /* 文字水平居中显示 */
}
.sol-feat li strong { color: var(--ink-2); font-weight: 600; }
@media (max-width: 720px) {
    .sol-slides--narrow { max-width: 100%; }   /* 手机端占满，和原站移动版一致 */
    .sol-main .sol-shot { width: 100% !important; }   /* 手机端内容图满宽（原站移动版同） */
    .sol-feats { margin-top: 22px; padding: 0 16px; }
    .sol-feat h3 { font-size: 18px; margin-bottom: 12px; }
    .sol-feat li { font-size: 14px; line-height: 1.86; margin: 8px 0; }
}

/* ==========================================================================
   数智运营 / 客户案例 / 资金扶持 / 关于宝点 栏目页（2026-10-12）
   —— 原站这些页基本是「整页烘焙设计图」，多图模块一律是「轮播多图」：
      .photo_display_wrap width:100%（或 62.696%/92.086%），一屏一张，不是网格。
      这里复用站点既有的 [data-sol-slides] 轮播（淡入切换 + 拖拽 + 自动播放）。
   ========================================================================== */
.sol-slides--card {
    margin: 0 0 30px;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-sm);
}
/* 短线指示器默认是给深色 banner 用的「半透明白」，浅底内容图上必须转深色 */
.sol-slides--card .sol-banner__dot { background: rgba(23, 26, 33, .16); }
.sol-slides--card .sol-banner__dot:hover { background: rgba(23, 26, 33, .30); }
.sol-slides--card .sol-banner__dot.is-active { background: rgba(23, 26, 33, .52); }
/* 需要完整显示整图、宁可留边的轮播（团建照片宽高比不一致） */
.sol-slides--contain > img { object-fit: contain; }

/* 全域代运营「资源赋能」轮播：原站 .photo_display_wrap width:62.696%
   （折算到本站 --wrapw 栏 = 62.696/75×100 ≈ 83.6%，保持原站「比正文图窄一档」的节奏） */
.u-w84 { max-width: 83.6%; margin-left: auto; margin-right: auto; }

/* 资金扶持：1920x11431 的整页长图切成 6 片，必须无缝竖排（不能有圆角/间距，否则露缝） */
.stack { margin: 0 0 30px; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.stack img { width: 100%; display: block; }

/* 宝点资讯（原站 col140 1:1）：48px 居中大标题 + 3 列白卡（news_list_style1：
   卡宽 calc(33.333% - 40px)、内外边距 20px、内边距 5%、图 AR 2.316、
   标题 16px 粗 #212121、日期 #999 14px、摘要 #666 14px、
   分组标签 1px #e5e5e5 描边圆角 + 右侧长箭头，hover 出 0 0 22px 阴影） */
.news-page { width: min(100% - 48px, 1268px); margin: 0 auto; }
.news-h1 {
    margin: 0; padding-top: 4px;
    font-size: clamp(30px, 2.5vw, 48px);
    font-weight: 400; color: #333; text-align: center;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin: 10px 0 0;
    padding-bottom: 4px;
}
.news-card {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow .4s ease-out, border-radius .4s ease-out;
}
.news-card:hover { border-radius: 4px; box-shadow: 0 0 22px rgba(0, 0, 0, .12); }
.news-card__link { display: block; color: inherit; text-decoration: none; }
.news-card__pic { display: block; overflow: hidden; margin: 5% 5% 0; }
.news-card__pic img {
    width: 100%;
    display: block;
    aspect-ratio: 2.316;            /* 原站 news_list_img_box padding-top: 43.1734% */
    object-fit: cover;
}
.news-card__body { padding: 0 5% 5%; }
.news-card__body h3 {
    margin: 20px 0 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #212121;
}
.news-card__body time { display: inline-block; margin-top: 9px; font-size: 14px; line-height: 1; color: #999; }
.news-card__body p {
    margin: 18px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: #666;
}
.news-card__ext { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; }
.news-card__group {
    display: inline-flex; align-items: center;
    min-height: 26px; padding: 0 8px;
    border: 1px solid #e5e5e5; border-radius: 5px;
    color: #999; font-size: 12px; line-height: 1.5;
}
.news-card__arrow {
    flex: 0 0 auto; width: 30px; height: 28px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 28'%3E%3Cg fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M2 14h24'/%3E%3Cpath d='M19 7l7 7-7 7'/%3E%3C/g%3E%3C/svg%3E") center / 30px 28px no-repeat;
    transition: transform .36s ease;
}
.news-card:hover .news-card__arrow { transform: translateX(4px); }
@media (max-width: 900px) {
    .news-page { width: min(100% - 32px, 1268px); }
    .news-grid { gap: 24px; }
    .u-w84 { max-width: 100%; }
}
@media (max-width: 620px) {
    .news-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ===== 2026-10-13 客户案例 / 数智运营按原站 1:1 =====
   原站口径：客户案例 banner 下是 6 个满宽轮播（ppw=1.0，AR=100/39.1543≈2.554），
   图与图之间零间距（标题都烘焙在图里）；全域代运营 = 图75%(1260) → 图75% →
   窄栏轮播 62.7%(1053, AR1.5, 5张) → 图(1263)；商业创新服务 = banner 下仅 1 张图(1281)。 */
.wrap--1680 { max-width: min(100%, 1680px); }
.op-fig { width: 92%; margin: 0 auto; }
.op-fig img { width: 100%; }
.sol-slides--strip { margin: 0; background: transparent; }
.sol-slides--strip .sol-banner__dot { background: rgba(23, 26, 33, .16); }
.sol-slides--strip .sol-banner__dot:hover { background: rgba(23, 26, 33, .30); }
.sol-slides--strip .sol-banner__dot.is-active { background: rgba(23, 26, 33, .52); }

/* ===== 2026-10-13 第二轮 1:1：原站 banner 下无标题区/面包屑，正文直接开始 ===== */
.article--flush { padding: 56px 0 72px; }   /* banner 下留出呼吸空隙（2026-10-13 用户反馈：正文顶死 banner） */

/* 内容轮播左右箭头（原站 col107 轮播同款：两侧悬浮白方块 + 灰箭头） */
.sol-slides__nav {
    position: absolute; top: 50%; z-index: 5;
    width: 40px; height: 56px; margin-top: -28px;
    border: 0; border-radius: 4px; cursor: pointer; padding: 0;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    transition: background .25s ease, opacity .25s ease;
}
.sol-slides__nav--prev { left: 14px; }
.sol-slides__nav--next { right: 14px; }
.sol-slides__nav::before {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 11px; height: 11px;
    border-top: 2px solid #7a7f88; border-right: 2px solid #7a7f88;
}
.sol-slides__nav--prev::before { transform: translate(-28%, -50%) rotate(-135deg); }
.sol-slides__nav--next::before { transform: translate(-72%, -50%) rotate(45deg); }
.sol-slides__nav:hover { background: #fff; }
.sol-slides__nav:hover::before { border-color: #F4550A; }
@media (max-width: 720px) {
    .sol-slides__nav { width: 30px; height: 42px; margin-top: -21px; }
    .sol-slides__nav--prev { left: 6px; }
    .sol-slides__nav--next { right: 6px; }
    .sol-slides__nav::before { width: 9px; height: 9px; }
}

/* ===== 资讯详情页（原站 sys-nd 口径）===== */
.nart-page { padding: 56px 24px 40px; }
.nart-title { margin: 0; font-size: 48px; line-height: 1.3; font-weight: 700; color: #212121; }
.nart-info { display: flex; gap: 22px; margin-top: 36px; margin-bottom: 24px; font-size: 14px; line-height: 1; color: #999; }
.nart-body { border-top: 1px solid #ebebeb; padding-top: 30px; margin-bottom: 30px; font-size: 14px; line-height: 1.8; color: #555; }
.nart-body p { margin: 0 0 18px; }
.nart-long { margin: 0 auto; }
.nart-body .nart-long + .nart-long { margin-top: 0; }
.nart-long img { width: 100%; }
.nart-part { margin: 40px 0 20px; font-size: 22px; font-weight: 700; color: #E36C09; }
.nart-part span { margin-right: 14px; }
.nart-dash { padding-left: 1em; }
.nart-qr img { width: 181px; }
.nart-body h3 { margin: 32px 0 16px; font-size: 16px; font-weight: 700; color: #333; }
.nart-fig { margin: 24px auto; text-align: center; }
.nart-body .nart-fig.nart-long { margin: 0; }
.nart-body .nart-fig.nart-long img { display: block; }
.nart-fig img { display: inline-block; max-width: 100%; height: auto; }
.nart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; }
.nart-grid .nart-fig { margin: 0; }
.nart-grid img { width: 100%; }
.nart-link { color: #F4550A; text-decoration: none; }
.nart-link:hover { text-decoration: underline; }
.nart-nav { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid #ebebeb; padding-top: 24px; }
.nart-nav__item { max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.6; color: #555; text-decoration: none; }
.nart-nav__item em { font-style: normal; color: #999; margin-right: 10px; }
a.nart-nav__item:hover { color: #F4550A; }
.nart-nav__item.is-off { color: #bbb; }
.nart-nav__item.is-next { text-align: right; margin-left: auto; }
@media (max-width: 900px) {
    .nart-page { padding: 36px 16px 24px; }
    .nart-title { font-size: 28px; }
    .nart-info { margin-top: 20px; }
    .nart-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 620px) {
    .nart-grid { grid-template-columns: 1fr; }
    .nart-nav { flex-direction: column; gap: 10px; }
    .nart-nav__item { max-width: 100%; white-space: normal; }
    .nart-nav__item.is-next { text-align: left; }
}