@charset "UTF-8"; /* ============================================================================ 鸣山机械 · 解决方案（客户案例）全局组件样式 v1 ---------------------------------------------------------------------------- 设计规范：《案例改版-设计规范-v1.md》主题令牌：全部集中在下面「0. 全局主题令牌」的单个 :root 里（唯一真源），本文件由 view/pc/head.html 与 view/m/head.html 在 site.css 之后加载，因此两端全站都可直接 var(--ms-*)。本文件必须由两端加载（首帧即生效，杜绝闪动）。命名空间：全部以 .ms-cs- / .ms-cm 开头，并在选择器上限定容器，不与站内既有类冲突。一套文件同时服务 PC 与 m：m 端视口 ≤480px，直接走同一套媒体查询。 ⚠ 所有 var() 都带兜底值：即便本文件某次没加载成功，页面也不会「裸奔」。 ========================================================================== */ /* ======================== 0. 全局主题令牌（唯一真源） ======================== 与站点既有 Tailwind 色板同源：ink-950 #061424 / ink-900 #0B1E33 / brand-600 #C81E2D。色阶取「深蓝工业底 + 单一锐利红」两族，不引入第三个色相 —— 避免廉价 AI 花哨感。对比度实测（底 #0B1E33）： --ms-text #EAF2FA → 15.1:1 标题级 --ms-text-soft .78 白 → 9.6:1 正文级 --ms-text-dim .62 白 → 6.5:1 次要说明 --ms-text-faint .50 白 → 4.7:1 小号标签（仍达 WCAG AA 4.5:1） --ms-link #8FC4EC → 9.1:1 --ms-accent-soft #F2B7BC → 10.0:1 注意：brand-600 #C81E2D 在深底上只有 2.97:1，**只用于背景/描边，绝不用作文字色**。 ========================================================================== */ :root{ /* 深蓝阶（与 site.css / Tailwind 一致） */ --ms-ink-950:#061424; --ms-ink-900:#0B1E33; --ms-ink-800:#12293F; --ms-ink-700:#1B3B57; --ms-ink-600:#235580; --ms-ink-500:#3E7BB0; --ms-ink-400:#5EA0D9; --ms-ink-300:#8FC4EC; --ms-ink-200:#BEDBF2; --ms-ink-100:#DCEDF9; --ms-ink-50:#F4F8FB; /* 品牌红阶 */ --ms-brand-700:#A61521; --ms-brand-600:#C81E2D; --ms-brand-500:#DF3543; --ms-brand-300:#FF8089; --ms-brand:var(--ms-brand-600); --ms-accent-soft:#F2B7BC; /* 页面底：连续深蓝渐变，全站案例页统一，任何位置都不出现纯白底 */ --ms-page-bg:linear-gradient(180deg,#0B1E33 0%,#08172A 42%,#061424 100%); /* 面 / 线 */ --ms-surface:rgba(255,255,255,.045); --ms-surface-2:rgba(6,20,36,.42); --ms-surface-3:#0E2438; --ms-line:rgba(122,168,214,.17); --ms-line-strong:rgba(122,168,214,.34); /* 文字色阶（对比度见上方实测表） */ --ms-text:#EAF2FA; --ms-text-soft:rgba(234,242,250,.78); --ms-text-dim:rgba(234,242,250,.62); --ms-text-faint:rgba(234,242,250,.50); --ms-link:#8FC4EC; /* 圆角 / 阴影 / 缓动 / 时长 */ --ms-r-sm:8px; --ms-r-md:12px; --ms-r-lg:16px; --ms-sh-1:0 2px 6px rgba(0,0,0,.28); --ms-sh-2:0 18px 40px -22px rgba(0,0,0,.85); --ms-sh-3:0 30px 70px -30px rgba(0,0,0,.92); --ms-ease:cubic-bezier(.22,.61,.36,1); --ms-t-fast:180ms; --ms-t-base:320ms; --ms-t-scene:680ms; } /* ============================ 1. 页面容器 ============================ */ /* 深蓝连续渐变，与 /product（.ms-pcenter）、/about.html（main.ms-about）同源同法。不设纯白底：这是本次改版的核心诉求之一。 */ .ms-casepage{ background:var(--ms-page-bg,#0B1E33); color:var(--ms-text,#EAF2FA); overflow-x:hidden; /* ⚠ 下面这行是「移动端筛选条吸顶」的前置条件： overflow-x:hidden 会产生滚动容器 → 其后代 position:sticky 永久失效（永远不吸顶）； overflow-x:clip 同样裁掉横向溢出，但**不产生滚动容器**，sticky 正常。两行都写：老浏览器忽略 clip 退回 hidden，新浏览器以后者为准。 */ overflow-x:clip; } .ms-casepage ::selection{background:rgba(200,30,45,.35);color:#fff} /* 屏幕阅读器专用 */ .ms-cs-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ============================ 2. 通用小节 ============================ */ .ms-cs-sec{padding:56px 0} .ms-cs-sec + .ms-cs-sec{border-top:1px solid var(--ms-line,rgba(122,168,214,.17))} .ms-cs-eyebrow{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700; letter-spacing:.24em;color:var(--ms-link,#8FC4EC);text-transform:uppercase;margin:0} .ms-cs-eyebrow i{display:block;width:26px;height:2px;border-radius:1px;background:var(--ms-brand,#C81E2D)} .ms-cs-h2{margin:14px 0 0;font-size:clamp(21px,2.4vw,30px);line-height:1.34;font-weight:800;color:var(--ms-text,#EAF2FA)} .ms-cs-h2-sub{margin:14px 0 0;font-size:15px;line-height:2;color:var(--ms-text-soft,rgba(234,242,250,.68));max-width:76ch} /* 深底分页器（覆盖 site.css 的白底 .ms-pager） */ .ms-cs-pager .pagination li a, .ms-cs-pager .pagination li span{ background:var(--ms-surface,rgba(255,255,255,.045)); border-color:var(--ms-line,rgba(122,168,214,.17)); color:var(--ms-text-soft,rgba(234,242,250,.68)); } .ms-cs-pager .pagination li a:hover{ background:rgba(94,160,217,.18); border-color:var(--ms-line-strong,rgba(122,168,214,.34)); color:#fff; } .ms-cs-pager .pagination li.active span{ background:var(--ms-brand,#C81E2D);border-color:var(--ms-brand,#C81E2D);color:#fff; } .ms-cs-pager .pagination li.disabled span{opacity:.35} /* ============================ 3. 列表页页头 ============================ */ .ms-cs-hd{position:relative;overflow:hidden;border-bottom:1px solid var(--ms-line,rgba(122,168,214,.17))} .ms-cs-hd-grid,.ms-cs-hd-glow{position:absolute;display:block;pointer-events:none} .ms-cs-hd-grid{inset:0;opacity:.55; background-image:linear-gradient(rgba(122,168,214,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(122,168,214,.07) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(120% 100% at 18% 0%,#000 14%,transparent 72%); mask-image:radial-gradient(120% 100% at 18% 0%,#000 14%,transparent 72%)} .ms-cs-hd-glow{right:-8%;top:-44%;width:660px;height:660px;border-radius:50%; background:radial-gradient(circle,rgba(200,30,45,.20),rgba(200,30,45,0) 62%)} .ms-cs-hd-in{position:relative;padding-top:34px;padding-bottom:40px} .ms-cs-hd .ms-crumb-dark{margin-bottom:20px} .ms-cs-h1{margin:14px 0 0;font-size:clamp(26px,3.6vw,42px);line-height:1.22;font-weight:800; letter-spacing:-.01em;color:var(--ms-text,#EAF2FA)} .ms-cs-lead{margin:16px 0 0;max-width:78ch;font-size:15px;line-height:2.05; color:var(--ms-text-soft,rgba(234,242,250,.68))} .ms-cs-lead b{color:#fff;font-weight:700} /* 统计条：1px 分割线的栅格，数字等宽对齐（真实计数，不写死） */ .ms-cs-stats{list-style:none;margin:30px 0 0;padding:0;display:grid; grid-template-columns:repeat(4,minmax(0,1fr));gap:1px; border:1px solid var(--ms-line,rgba(122,168,214,.17));border-radius:var(--ms-r-md,12px); overflow:hidden;background:var(--ms-line,rgba(122,168,214,.17))} .ms-cs-stats li{display:flex;align-items:center;gap:12px;padding:18px 20px; background:rgba(6,20,36,.72)} .ms-cs-stats b{flex:0 0 auto;font-size:clamp(22px,2.6vw,30px);font-weight:800;line-height:1; color:#fff;font-variant-numeric:tabular-nums} /* 单位跟在数字后面，小一号、次级色，读作「6项 / 已交付案例」 */ .ms-cs-stats b i{font-style:normal;margin-left:3px;font-size:.5em;font-weight:700; color:var(--ms-text-dim,rgba(234,242,250,.62))} .ms-cs-stats span{font-size:12.5px;line-height:1.55;color:var(--ms-text-dim,rgba(234,242,250,.62))} /* ============================ 4. 行业筛选条 ============================ */ .ms-cs-filter{position:relative;padding:22px 0 6px} .ms-cs-filter-in{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .ms-cs-filter-lb{font-size:12.5px;font-weight:600;letter-spacing:.06em; color:var(--ms-text-dim,rgba(234,242,250,.52));margin-right:2px} .ms-cs-chip{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px; border-radius:999px;font-size:13.5px;font-weight:600;text-decoration:none; color:var(--ms-text-soft,rgba(234,242,250,.68)); background:var(--ms-surface,rgba(255,255,255,.045)); border:1px solid var(--ms-line,rgba(122,168,214,.17));cursor:pointer; transition:background var(--ms-t-fast,180ms) ease,color var(--ms-t-fast,180ms) ease, border-color var(--ms-t-fast,180ms) ease} .ms-cs-chip em{font-style:normal;font-size:11.5px;font-variant-numeric:tabular-nums; color:var(--ms-text-faint,rgba(234,242,250,.40))} .ms-cs-chip:hover{color:#fff;border-color:var(--ms-line-strong,rgba(122,168,214,.34)); background:rgba(94,160,217,.14)} .ms-cs-chip.is-on{color:#fff;font-weight:700;border-color:rgba(200,30,45,.55); background:linear-gradient(90deg,rgba(200,30,45,.30),rgba(94,160,217,.16))} .ms-cs-chip.is-on em{color:rgba(255,255,255,.75)} .ms-cs-chip:focus-visible{outline:2px solid var(--ms-link,#8FC4EC);outline-offset:3px} /* —— 移动端案例列表：筛选条「一行显示 + 吸顶」（用户 2026-09-23 要求）—— · .ms-cs-filter-x 只出现在移动端列表页（PC 用 .ms-cs-filter-in），设成 flex + nowrap 让 4 枚按钮（全部/锻压机床/船舶海工/冶金）永远一行；极窄屏（<320px）才允许横向滑动兜底，不换行。 · 吸顶贴在全站移动端页头正下方：.ms-m-bar 高 56px（见 view/m/header.html）。 ⚠ 前置条件：祖先链不能有 overflow:hidden/auto，否则 sticky 永久失效 —— 故 .ms-casepage 已改为 overflow-x:clip（clip 同样裁溢出但不产生滚动容器）。 · 负边距抵消外层容器（section.px-4 = 16px）的内边距，吸顶时才是通栏的一条，不是浮空小条。 */ .ms-cs-filterbar{position:sticky;top:56px;z-index:45; margin:0 -16px;padding:10px 16px 9px; background:rgba(6,20,36,.94); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border-bottom:1px solid var(--ms-line,rgba(122,168,214,.17))} .ms-cs-filter-x{display:flex;align-items:center;gap:6px;flex-wrap:nowrap; overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; scrollbar-width:none} .ms-cs-filter-x::-webkit-scrollbar{display:none} /* ============================ 5. 案例卡片（全局公共组件） ============================ */ .ms-cs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px; counter-reset:mscs-card} .ms-cs-card{min-width:0;counter-increment:mscs-card} .ms-cs-card__link{display:flex;flex-direction:column;height:100%;min-width:0;cursor:pointer; border-radius:var(--ms-r-md,12px);overflow:hidden;text-decoration:none; border:1px solid var(--ms-line,rgba(122,168,214,.17)); background:var(--ms-surface,rgba(255,255,255,.045)); transition:transform var(--ms-t-base,320ms) var(--ms-ease,cubic-bezier(.22,.61,.36,1)), border-color var(--ms-t-base,320ms) ease, box-shadow var(--ms-t-base,320ms) ease} .ms-cs-card__media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#0E2438} .ms-cs-card__media img{width:100%;height:100%;object-fit:cover;display:block; transition:transform var(--ms-t-scene,680ms) var(--ms-ease,cubic-bezier(.22,.61,.36,1))} .ms-cs-card__media::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(6,20,36,0) 42%,rgba(6,20,36,.78) 100%)} .ms-cs-card__inum{position:absolute;left:14px;bottom:10px;z-index:2; font-size:26px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums; color:transparent;-webkit-text-stroke:1px rgba(143,196,236,.62)} /* 序号由 CSS counter 自动产生，模板不传索引 */ .ms-cs-card__inum::before{content:counter(mscs-card,decimal-leading-zero)} .ms-cs-card__body{display:flex;flex-direction:column;flex:1;min-width:0;padding:18px 18px 16px} .ms-cs-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px} .ms-cs-card__title{margin:0;font-size:16.5px;line-height:1.5;font-weight:700;color:#fff; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; transition:color var(--ms-t-fast,180ms) ease} .ms-cs-card__desc{margin:10px 0 0;font-size:13.5px;line-height:1.82; color:var(--ms-text-dim,rgba(234,242,250,.52)); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ms-cs-card__foot{display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:auto;padding-top:14px;border-top:1px solid var(--ms-line,rgba(122,168,214,.17))} .ms-cs-card__cust{display:flex;align-items:center;gap:6px;min-width:0;font-style:normal; font-size:12.5px;color:var(--ms-text-dim,rgba(234,242,250,.52))} .ms-cs-card__cust svg{flex:0 0 auto;width:14px;height:14px;color:var(--ms-text-faint,rgba(234,242,250,.40))} .ms-cs-card__cust span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ms-cs-card__go{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;margin-left:auto; font-size:12.5px;font-weight:600;color:var(--ms-accent-soft,#F2B7BC)} .ms-cs-card__go svg{width:14px;height:14px; transition:transform var(--ms-t-fast,180ms) ease} .ms-cs-card__link:hover{transform:translateY(-6px); border-color:rgba(94,160,217,.52); box-shadow:var(--ms-sh-2,0 18px 40px -22px rgba(0,0,0,.85))} .ms-cs-card__link:hover .ms-cs-card__media img{transform:scale(1.05)} .ms-cs-card__link:hover .ms-cs-card__title{color:var(--ms-accent-soft,#F2B7BC)} .ms-cs-card__link:hover .ms-cs-card__go svg{transform:translateX(3px)} .ms-cs-card__link:focus-visible{outline:2px solid var(--ms-link,#8FC4EC);outline-offset:3px} /* 变体 mini：侧栏 / 相关案例（横排小卡） */ .ms-cs-card--mini .ms-cs-card__link{flex-direction:row;align-items:center;gap:12px; padding:10px;border-radius:var(--ms-r-sm,8px)} .ms-cs-card--mini .ms-cs-card__media{flex:0 0 auto;width:104px;aspect-ratio:4/3;border-radius:6px} .ms-cs-card--mini .ms-cs-card__media::after{display:none} .ms-cs-card--mini .ms-cs-card__inum{display:none} .ms-cs-card--mini .ms-cs-card__body{padding:0;gap:6px} .ms-cs-card--mini .ms-cs-card__title{font-size:13.5px;-webkit-line-clamp:2} .ms-cs-card--mini .ms-cs-card__desc, .ms-cs-card--mini .ms-cs-card__go{display:none} .ms-cs-card--mini .ms-cs-card__tags{margin-bottom:2px} .ms-cs-card--mini .ms-cs-card__foot{padding-top:0;border-top:0;margin-top:0} /* 变体 flat：产品详情「应用案例」页签内（双列，图在左） */ .ms-cs-card--flat .ms-cs-card__link{flex-direction:row;gap:16px;padding:14px} .ms-cs-card--flat .ms-cs-card__media{flex:0 0 auto;width:150px;aspect-ratio:4/3;border-radius:8px} .ms-cs-card--flat .ms-cs-card__media::after{display:none} .ms-cs-card--flat .ms-cs-card__inum{display:none} .ms-cs-card--flat .ms-cs-card__body{padding:0;justify-content:center;gap:8px} .ms-cs-card--flat .ms-cs-card__title{font-size:15px;line-height:1.5} .ms-cs-card--flat .ms-cs-card__desc{-webkit-line-clamp:2} .ms-cs-card--flat .ms-cs-card__foot{padding-top:0;border-top:0;margin-top:2px} /* --flat 变体的纵向容器：产品详情「应用案例」页签内一行一张横排卡 */ .ms-cs-flatlist{display:flex;flex-direction:column;gap:14px} /* ============================ 6. 标签（行业 / 吨位·规格 / 客户类型） ============================ */ .ms-cs-tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px; font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap; transition:border-color var(--ms-t-fast,180ms) ease,color var(--ms-t-fast,180ms) ease} .ms-cs-tag--ind{color:#8FC4EC;background:rgba(94,160,217,.14); border:1px solid rgba(94,160,217,.30)} .ms-cs-tag--cap{color:#F2B7BC;background:rgba(200,30,45,.12); border:1px solid rgba(200,30,45,.42);font-variant-numeric:tabular-nums} .ms-cs-tag--ct{color:var(--ms-text-soft,rgba(234,242,250,.68)); background:rgba(255,255,255,.04);border:1px solid var(--ms-line-strong,rgba(122,168,214,.34))} /* 详情页头部标签稍大一号 */ .ms-cs-dhead .ms-cs-tag{height:28px;padding:0 13px;font-size:13px} /* 可点标签（= 行业筛选入口） */ a.ms-cs-tag{cursor:pointer;text-decoration:none} a.ms-cs-tag--ind:hover{color:#fff;background:rgba(94,160,217,.28);border-color:#8FC4EC} a.ms-cs-tag:focus-visible{outline:2px solid var(--ms-link,#8FC4EC);outline-offset:2px} /* ============================ 7. 空状态 / 引导卡 ============================ */ .ms-cs-empty{margin-top:26px;padding:52px 24px;text-align:center;border-radius:var(--ms-r-md,12px); border:1px solid var(--ms-line,rgba(122,168,214,.17)); background:var(--ms-surface-2,rgba(6,20,36,.42))} .ms-cs-empty p{margin:0;font-size:15px;color:var(--ms-text-soft,rgba(234,242,250,.68))} .ms-cs-empty .ms-btn-outline{margin-top:22px} /* ============================ 8. 详情页 ============================ */ /* 8.1 标题区：H1 用浅色大字，彻底修掉线上「h1 对比度 1.10」的不可读问题 */ .ms-cs-dhead{position:relative;overflow:hidden; border-bottom:1px solid var(--ms-line,rgba(122,168,214,.17))} .ms-cs-dhead-grid{position:absolute;inset:0;display:block;pointer-events:none;opacity:.5; background-image:linear-gradient(rgba(122,168,214,.065) 1px,transparent 1px), linear-gradient(90deg,rgba(122,168,214,.065) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(130% 100% at 12% 0%,#000 12%,transparent 70%); mask-image:radial-gradient(130% 100% at 12% 0%,#000 12%,transparent 70%)} .ms-cs-dhead-in{position:relative;padding-top:30px;padding-bottom:38px} .ms-cs-dhead .ms-crumb-dark{margin-bottom:18px} .ms-cs-dhead-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px} .ms-cs-dhead h1{margin:0;max-width:26ch;font-size:clamp(24px,3.2vw,40px);line-height:1.24; font-weight:800;letter-spacing:-.01em;color:var(--ms-text,#EAF2FA)} .ms-cs-dhead-sum{margin:18px 0 0;max-width:74ch;font-size:16px;line-height:1.9; color:var(--ms-text-soft,rgba(234,242,250,.68))} /* 元信息条：只保留项目地区 / 客户 / 涉及产品，**不再输出日期与浏览量** （后台 hit 与 create_time 仍照常存储，仅前端不出） */ .ms-cs-dmeta{list-style:none;display:flex;flex-wrap:wrap;gap:12px 28px;margin:24px 0 0;padding:0} .ms-cs-dmeta li{display:flex;align-items:baseline;gap:9px;font-size:13.5px; color:var(--ms-text-soft,rgba(234,242,250,.68))} .ms-cs-dmeta li span{font-size:12px;font-weight:600;letter-spacing:.08em; color:var(--ms-text-faint,rgba(234,242,250,.40))} .ms-cs-dmeta li b{font-weight:700;color:var(--ms-text,#EAF2FA)} /* 8.2 主图 */ .ms-cs-fig{margin:34px 0 0;border-radius:var(--ms-r-lg,16px);overflow:hidden; border:1px solid var(--ms-line,rgba(122,168,214,.17)); background:#0E2438;box-shadow:var(--ms-sh-2,0 18px 40px -22px rgba(0,0,0,.85))} .ms-cs-fig img{display:block;width:100%;height:auto} .ms-cs-fig figcaption{padding:12px 18px;font-size:13px;color:var(--ms-text-dim,rgba(234,242,250,.52)); border-top:1px solid var(--ms-line,rgba(122,168,214,.17))} /* 8.3 模块化分组渲染（_case_modules.html） */ .ms-cm-list{list-style:none;margin:44px 0 0;padding:0} .ms-cm{position:relative;padding-left:58px} .ms-cm + .ms-cm{margin-top:34px} .ms-cm::before{content:"";position:absolute;left:19px;top:44px;bottom:-34px;width:2px; background:linear-gradient(180deg,rgba(200,30,45,.55),rgba(94,160,217,.22) 70%,rgba(94,160,217,0)); border-radius:2px} .ms-cm:last-child::before{display:none} .ms-cm__no{position:absolute;left:0;top:0;display:grid;place-items:center; width:40px;height:40px;border-radius:50%;font-size:14px;font-weight:800; font-variant-numeric:tabular-nums;color:var(--ms-accent-soft,#F2B7BC); background:rgba(6,20,36,.85);border:2px solid rgba(200,30,45,.55); box-shadow:0 0 0 5px rgba(200,30,45,.10)} .ms-cm__hd{display:flex;align-items:center;gap:12px;min-height:40px} .ms-cm__title{margin:0;font-size:17px;line-height:1.4;font-weight:800;color:var(--ms-text,#EAF2FA)} .ms-cm__title i{font-style:normal;margin-left:10px;font-size:11px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--ms-text-faint,rgba(234,242,250,.40))} .ms-cm__body{margin-top:14px;padding:20px 22px;border-radius:var(--ms-r-md,12px); border:1px solid var(--ms-line,rgba(122,168,214,.17)); background:var(--ms-surface-2,rgba(6,20,36,.42)); font-size:15.5px;line-height:2.05;color:var(--ms-text-soft,rgba(234,242,250,.68))} .ms-cm__body > *:first-child{margin-top:0} .ms-cm__body > *:last-child{margin-bottom:0} .ms-cm__body p{margin:0 0 14px} .ms-cm__body p:last-child{margin-bottom:0} .ms-cm__body ul,.ms-cm__body ol{margin:0 0 14px;padding-left:20px} .ms-cm__body li{margin-bottom:8px;line-height:1.95} .ms-cm__body li:last-child{margin-bottom:0} .ms-cm__body strong{font-weight:700;color:#fff} .ms-cm__body a{color:var(--ms-link,#8FC4EC);text-underline-offset:3px} .ms-cm__body h4{margin:16px 0 8px;font-size:15px;font-weight:700;color:var(--ms-text,#EAF2FA)} .ms-cm__body img{margin:14px 0;max-width:100%;height:auto;border-radius:8px; border:1px solid var(--ms-line,rgba(122,168,214,.17))} .ms-cm__body table{width:100%;margin:14px 0;border-collapse:collapse;font-size:14px} .ms-cm__body th{background:rgba(94,160,217,.14);color:#fff;text-align:left; padding:10px 14px;font-weight:600} .ms-cm__body td{padding:10px 14px;border-bottom:1px solid var(--ms-line,rgba(122,168,214,.17))} /* 移动端折叠：