@charset "utf-8";
/* ==========================================================================
   贤哲互联官网 · 站点统一样式表 site.css
   --------------------------------------------------------------------------
   由 news.css（新闻）+ case.css（案例）+ service.css（业务介绍）合并而成，
   三份文件命名空间互不重叠（news 用 np-/nw-，案例用 cs-，业务用 sv-），
   仅「顶部菜单二级下拉」5 条规则重复，已合并去重（重复 4 条）。

   页面引入顺序（别调换）：
     reset_css.css → all.css → dynamic.css → site.css
   上线放置：/static/index/style/site.css
   ========================================================================== */



/* ==========================================================================
   新闻模块（news-list / news-detail）—— 原 news.css
   ========================================================================== */
/* ==========================================================================
   新闻中心 · 内页专用样式
   --------------------------------------------------------------------------
   设计基准：跟随首页 /static/index/style/all.css 的配色与节奏
     主色   #0095ef      深蓝 #0b2b4f
     浅底   #f3f6fd      描边 #e2ebf3
     圆角   6px(小) / 16px(大)     与主站一致
   类名统一 np- 前缀，不与主站原有样式冲突
   上线放置：/static/index/style/news.css
   ========================================================================== */

@charset "utf-8";


:root{
  --np-brand:      #0095ef;
  --np-brand-dk:   #0b2b4f;
  --np-ink:        #18181b;
  --np-text:       #333333;
  --np-sub:        #596c80;
  --np-faint:      #8c8c8c;
  --np-line:       #e2ebf3;
  --np-wash:       #f3f6fd;
  --np-r-sm:       6px;
  --np-r:          16px;
  --np-sh:         0 6px 24px rgba(11,43,79,.07);
  --np-sh-lg:      0 14px 40px rgba(11,43,79,.13);
  --np-ease:       cubic-bezier(.22,.61,.36,1);
  /* 列表缩略图比例对齐原站：.anewslist li .img img 实际显示 230×125（≈1.84:1） */
  --np-thumb-ar:   230 / 125;
}

/* ---------- 页面底色：低饱和蓝白渐变 + 顶部光晕，避免纯白平铺 ---------- */

.np-page{
  min-height:60vh;
  background:
    radial-gradient(900px 420px at 50% -12%, #e8f2fd 0%, rgba(232,242,253,0) 62%),
    linear-gradient(180deg,#f6f9fd 0%, #fafcfe 42%, #ffffff 100%);
}

.np-shell{ max-width:1440px; margin:0 auto; padding:0 18px; }

/* ==========================================================================
   一、内页 Hero：深蓝渐变 + 光晕 + 网格，与主站 banner 同一语境
   ========================================================================== */

.np-hero{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(135deg,#0b2b4f 0%, #123b7a 46%, #0095ef 100%);
  /* 顶部留足空间：#header 是 absolute 悬浮层（菜单行高约 100px），不能让内容钻到 logo 底下 */
  padding:104px 0 44px;
}

/* 装饰：两枚柔光圆 + 一层细网格，制造纵深 */

.np-hero::before,
.np-hero::after{
  content:""; position:absolute; border-radius:50%; pointer-events:none;
}

.np-hero::before{
  width:340px; height:340px; right:-90px; top:-140px;
  background:radial-gradient(circle, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 70%);
}

.np-hero::after{
  width:260px; height:260px; left:-110px; bottom:-160px;
  background:radial-gradient(circle, rgba(0,149,239,.55) 0%, rgba(0,149,239,0) 70%);
}

.np-hero__grid{
  position:absolute; inset:0; pointer-events:none; opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(180deg,#000 0%, transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%, transparent 78%);
}

.np-hero__in{ position:relative; z-index:2; }

/* 面包屑 */

.np-crumb{ font-size:12.5px; color:rgba(255,255,255,.72); margin-bottom:14px; }

.np-crumb a{ color:rgba(255,255,255,.82); transition:color .2s; }

.np-crumb a:hover{ color:#fff; }

.np-crumb i{ font-style:normal; margin:0 7px; opacity:.5; }

.np-crumb b{ font-weight:500; color:#fff; }

/* 标题区 */

.np-hero__row{ display:flex; flex-direction:column; gap:20px; }

.np-hero__title{
  margin:0; font-size:30px; line-height:1.25; font-weight:700; letter-spacing:.5px;
}

.np-hero__title small{
  display:block; margin-top:8px; font-size:12.5px; font-weight:400;
  letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.55);
}

.np-hero__desc{
  margin:12px 0 0; font-size:14.5px; line-height:1.75; color:rgba(255,255,255,.8);
  max-width:44em;
}

/* 统计：tabular 数字 + 竖线分隔 */

.np-hero__stats{ display:flex; gap:26px; margin-top:20px; flex-wrap:wrap; }

.np-stat__num{
  display:block; font-size:26px; font-weight:700; line-height:1.1;
  font-variant-numeric:tabular-nums; letter-spacing:-.5px;
}

.np-stat__label{ display:block; margin-top:5px; font-size:12px; color:rgba(255,255,255,.62); }

@media (min-width:768px){
  .np-hero{ padding:150px 0 62px; }  /* 与主站 .text-banner 的 150px 顶部预留一致 */
  .np-hero__title{ font-size:40px; }
  .np-hero__desc{ font-size:16px; }
  .np-hero__row{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:40px; }
  .np-hero__stats{ margin-top:0; gap:34px; }
  .np-stat__num{ font-size:32px; }
}

/* 宽屏下 hero 描述强制一行（窄屏仍允许换行，避免溢出） */

@media (min-width:1200px){
  .np-hero__desc{ white-space:nowrap; max-width:none; }
}

/* 窄版 hero：内页正文用，只放面包屑。页头是 absolute 透明层（白字），
   正文页必须有一条深色带垫底，否则页头叠在白卡上等于隐形 */

.np-hero--slim{ padding:96px 0 30px; }

@media (min-width:768px){
  .np-hero--slim{ padding:128px 0 36px; }
}

/* ==========================================================================
   二、主体栅格：主内容 + 侧栏（移动端单列，侧栏落到下方）
   ========================================================================== */

.np-main{ padding:30px 0 56px; }

.np-grid{ display:grid; grid-template-columns:1fr; gap:26px; }

@media (min-width:960px){
  .np-grid{ grid-template-columns:minmax(0,1fr) 296px; gap:34px; align-items:start; }
  .np-side{ position:sticky; top:20px; }
}

/* ---------- 栏目标题条 ---------- */

.np-secbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--np-line);
}

.np-secbar h2{
  margin:0; font-size:18px; font-weight:700; color:var(--np-ink);
  display:flex; align-items:center; gap:9px;
}

.np-secbar h2::before{
  content:""; width:4px; height:17px; border-radius:2px;
  background:linear-gradient(180deg,var(--np-brand),#0b7fd0);
}

.np-secbar span{ font-size:12.5px; color:var(--np-faint); }

/* ==========================================================================
   三、新闻卡片列表
   ========================================================================== */

.np-list{ display:flex; flex-direction:column; gap:16px; }

/* 首篇「头条」：整幅大图 */

.np-card{
  position:relative; display:block; background:#fff; border:1px solid var(--np-line);
  border-radius:var(--np-r); overflow:hidden; text-decoration:none; color:inherit;
  transition:box-shadow .28s var(--np-ease), transform .28s var(--np-ease), border-color .28s;
}

.np-card:hover{ box-shadow:var(--np-sh-lg); transform:translateY(-3px); border-color:#cfe4f8; }

/* 主站 reset 有 a:hover{text-decoration:underline}，整卡是 <a>，悬停会全划线 —— 关掉 */

.np-card:hover, .np-card:focus-visible,
.np-mini a:hover, .np-pn:hover{ text-decoration:none; }

.np-card:focus-visible{ outline:2px solid var(--np-brand); outline-offset:3px; }

/* 左侧蓝色进度条：hover 展开 —— 本页的记忆点 */

.np-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--np-brand),#0b7fd0);
  transform:scaleY(0); transform-origin:top; transition:transform .3s var(--np-ease);
}

.np-card:hover::before,
.np-card:focus-visible::before{ transform:scaleY(1); }

.np-card__in{ display:grid; grid-template-columns:1fr; }

/* 缩略图 */

.np-card__pic{
  position:relative; aspect-ratio:var(--np-thumb-ar); overflow:hidden; background:var(--np-wash);
}

.np-card__pic img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--np-ease);
}

.np-card:hover .np-card__pic img{ transform:scale(1.045); }

/* 日期印章压在图上（移动端） */

.np-card__stamp{
  position:absolute; left:12px; top:12px; z-index:2;
  background:rgba(11,43,79,.86); color:#fff; border-radius:var(--np-r-sm);
  padding:6px 10px 7px; line-height:1; text-align:center;
  backdrop-filter:blur(4px);
}

.np-card__stamp b{
  display:block; font-size:19px; font-weight:700; font-variant-numeric:tabular-nums;
}

.np-card__stamp em{
  display:block; margin-top:3px; font-style:normal; font-size:10.5px;
  opacity:.78; font-variant-numeric:tabular-nums;
}

.np-card__body{ padding:16px 18px 18px; }

.np-card__title{
  margin:0; font-size:16.5px; line-height:1.55; font-weight:700; color:var(--np-ink);
  transition:color .2s;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.np-card:hover .np-card__title{ color:var(--np-brand); }

.np-card__desc{
  margin:9px 0 0; font-size:13.5px; line-height:1.72; color:var(--np-sub);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.np-card__meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px;
  margin-top:13px; font-size:12px; color:var(--np-faint);
}

.np-card__meta em{ font-style:normal; display:inline-flex; align-items:center; gap:5px; }

.np-card__meta em::before{
  content:""; width:5px; height:5px; border-radius:50%; background:#c3d6e8;
}

.np-tag{
  display:inline-block; padding:2px 9px; border-radius:20px; font-size:11.5px;
  background:var(--np-wash); color:var(--np-brand); border:1px solid #d9e9f8;
}

/* 右箭头：hover 右移 */

.np-card__go{
  position:absolute; right:16px; bottom:16px; width:26px; height:26px; border-radius:50%;
  background:var(--np-wash); color:var(--np-brand); display:none;
  align-items:center; justify-content:center; font-size:13px;
  transition:transform .3s var(--np-ease), background .2s;
}

.np-card:hover .np-card__go{ transform:translateX(4px); background:var(--np-brand); color:#fff; }

@media (min-width:640px){
  .np-card__in{ grid-template-columns:280px minmax(0,1fr); }
  /* 图片占满整列高度（不留白边），列宽 280 ÷ 1.84 ≈ 152，
     正文 min-height 与之配套，实际显示比例≈原站 230:125 */
  .np-card__pic{ aspect-ratio:auto; height:100%; min-height:0; align-self:stretch; }
  .np-card__body{ min-height:152px; }
  .np-card__stamp{ display:none; }   /* 桌面端日期改到正文区左侧 */
  .np-card__body{ padding:18px 22px; position:relative; padding-left:94px; }
  .np-card__date{
    position:absolute; left:20px; top:20px; width:42px; text-align:center;
    border-right:1px solid var(--np-line); padding-right:12px;
  }
  .np-card__date b{
    display:block; font-size:23px; font-weight:700; color:var(--np-brand-dk);
    line-height:1; font-variant-numeric:tabular-nums;
  }
  .np-card__date em{
    display:block; margin-top:4px; font-style:normal; font-size:11px;
    color:var(--np-faint); font-variant-numeric:tabular-nums;
  }
  .np-card__title{ font-size:17.5px; }
  .np-card__go{ display:flex; }
}

/* ---------- 头条卡（第一篇，桌面端横向大图） ---------- */

.np-card--lead .np-card__in{ grid-template-columns:1fr; }

.np-card--lead .np-card__pic{ aspect-ratio:var(--np-thumb-ar); }

.np-card--lead .np-card__body{ padding:20px 22px 22px; padding-left:22px; }

.np-card--lead .np-card__date{
  position:static; width:auto; border:0; padding:0; text-align:left;
  display:flex; align-items:baseline; gap:8px; margin-bottom:8px;
}

.np-card--lead .np-card__date b{ font-size:15px; }

.np-card--lead .np-card__date em{ font-size:12px; margin-top:0; }

.np-card--lead .np-card__title{ font-size:19px; -webkit-line-clamp:2; }

.np-card--lead .np-card__desc{ -webkit-line-clamp:3; font-size:14px; }

@media (min-width:960px){
  .np-card--lead .np-card__in{ grid-template-columns:minmax(0,1fr) 380px; }
  .np-card--lead .np-card__pic{ height:100%; order:2; }
  .np-card--lead .np-card__body{ order:1; padding:24px 26px; min-height:206px; }
}

.np-badge{
  display:inline-flex; align-items:center; gap:5px; margin-bottom:9px;
  padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:600;
  background:linear-gradient(90deg,var(--np-brand),#0b7fd0); color:#fff;
}

/* ==========================================================================
   四、侧栏
   ========================================================================== */

.np-side{ display:flex; flex-direction:column; gap:16px; }

.np-box{
  background:#fff; border:1px solid var(--np-line); border-radius:var(--np-r);
  padding:18px; box-shadow:var(--np-sh);
}

.np-box__hd{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:13px; padding-bottom:10px; border-bottom:1px solid var(--np-line);
}

.np-box__hd h3{
  margin:0; font-size:14.5px; font-weight:700; color:var(--np-ink);
  display:flex; align-items:center; gap:8px;
}

.np-box__hd h3::before{
  content:""; width:3px; height:13px; border-radius:2px; background:var(--np-brand);
}

/* 搜索 */

.np-search{ display:flex; gap:8px; }

.np-search input{
  flex:1; min-width:0; height:40px; padding:0 12px; font-size:13.5px;
  border:1px solid var(--np-line); border-radius:var(--np-r-sm); background:#fbfcfe;
  color:var(--np-text); transition:border-color .2s, box-shadow .2s;
}

.np-search input:focus{
  outline:none; border-color:var(--np-brand); box-shadow:0 0 0 3px rgba(0,149,239,.12);
}

.np-search button{
  flex:none; width:56px; height:40px; border:0; border-radius:var(--np-r-sm);
  background:var(--np-brand); color:#fff; font-size:13px; cursor:pointer;
  transition:background .2s, transform .15s;
}

.np-search button:hover{ background:#0b7fd0; }

.np-search button:active{ transform:scale(.97); }

/* 栏目切换 */

.np-cats{ display:flex; flex-direction:column; gap:6px; }

.np-cats a{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:var(--np-r-sm); font-size:13.5px;
  color:var(--np-text); text-decoration:none; transition:.2s;
  border:1px solid transparent;
}

.np-cats a:hover{ background:var(--np-wash); color:var(--np-brand); }

.np-cats a.on{
  background:var(--np-wash); color:var(--np-brand); font-weight:600;
  border-color:#d9e9f8;
}

.np-cats a i{ font-style:normal; font-size:11.5px; color:var(--np-faint); }

/* 侧栏小列表 */

.np-mini{ display:flex; flex-direction:column; }

.np-mini a{
  display:grid; grid-template-columns:70px minmax(0,1fr); gap:11px;
  padding:11px 0; text-decoration:none; color:inherit;
  border-bottom:1px dashed #edf2f8;
}

.np-mini a:last-child{ border-bottom:0; padding-bottom:0; }

.np-mini a:first-child{ padding-top:0; }

.np-mini img{
  width:70px; height:50px; object-fit:cover; border-radius:var(--np-r-sm); background:var(--np-wash);
}

.np-mini h4{
  margin:0; font-size:13px; line-height:1.5; font-weight:500; color:var(--np-text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:color .2s;
}

.np-mini a:hover h4{ color:var(--np-brand); }

.np-mini span{ display:block; margin-top:5px; font-size:11.5px; color:var(--np-faint); }

/* 本文信息（侧栏键值块）：行距放宽 */

.np-facts{
  font-size:13.5px; line-height:2.15; color:var(--np-text);
}

.np-facts b{ font-weight:500; color:var(--np-sub); }

/* 侧栏 CTA */

.np-cta{
  position:relative; overflow:hidden; border-radius:var(--np-r); padding:22px 20px;
  background:linear-gradient(135deg,#0b2b4f 0%, #123b7a 55%, #0095ef 100%); color:#fff;
}

.np-cta::after{
  content:""; position:absolute; width:180px; height:180px; right:-60px; bottom:-80px;
  border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 70%);
}

.np-cta h3{ margin:0 0 8px; font-size:16px; font-weight:700; position:relative; }

.np-cta p{ margin:0 0 15px; font-size:12.5px; line-height:1.7; color:rgba(255,255,255,.78); position:relative; }

.np-cta a{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  padding:9px 18px; border-radius:22px; background:#fff; color:var(--np-brand-dk);
  font-size:13px; font-weight:600; text-decoration:none; transition:transform .2s, box-shadow .2s;
}

.np-cta a:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.18); }

/* ==========================================================================
   五、分页
   ========================================================================== */

.np-page-nav{ display:flex; flex-wrap:wrap; justify-content:center; margin-top:30px; }

.np-page-nav a{
    margin-right: 7px;
  min-width:38px; height:38px; padding:0 12px; border-radius:var(--np-r-sm);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; text-decoration:none; border:1px solid var(--np-line);
  background:#fff; color:var(--np-text); transition:.2s;
}

.np-page-nav a:hover{ border-color:var(--np-brand); color:var(--np-brand); background:var(--np-wash); }

.np-page-nav .on{
  background:linear-gradient(90deg,var(--np-brand),#0b7fd0); color:#fff; border-color:transparent;
  font-weight:600;
}

.np-page-nav .off{ color:#b8c4d0; cursor:default; }

.page-status{display:none}
/* ==========================================================================
   六、文章内页
   ========================================================================== */

/* 顶部阅读进度条 */

.np-progress{
  position:fixed; left:0; top:0; height:3px; width:0%; z-index:999;
  background:linear-gradient(90deg,var(--np-brand),#38bdf8);
  transition:width .12s linear;
}

.np-article{
  background:#fff; border:1px solid var(--np-line); border-radius:var(--np-r);
  padding:24px 20px 30px; box-shadow:var(--np-sh);
}

@media (min-width:768px){ .np-article{ padding:38px 44px 44px; } }

/* 文章头 */

.np-art__title{
  margin:14px 0 0; font-size:23px; line-height:1.42; font-weight:700; color:var(--np-ink);
}

@media (min-width:768px){ .np-art__title{ font-size:31px; } }

.np-art__meta{
  display:flex; flex-wrap:wrap; gap:9px 18px; margin-top:16px; padding-bottom:18px;
  border-bottom:1px solid var(--np-line); font-size:12.5px; color:var(--np-faint);
}

.np-art__meta em{ font-style:normal; }

.np-art__meta a{ color:var(--np-brand); text-decoration:none; }

.np-art__meta a:hover{ text-decoration:underline; }

/* 正文排版：17px 起、行高 1.9、保留首行缩进 */

.np-body{
  margin-top:22px; font-size:16px; line-height:1.9; color:#2c3a47;
  word-wrap:break-word;
}

@media (min-width:768px){ .np-body{ font-size:17px; } }

.np-body p{ margin:0 0 1.15em; }

.np-body img{
  display:block; max-width:100%; height:auto; margin:22px auto;
  border-radius:var(--np-r-sm); background:var(--np-wash);
}

.np-body h2, .np-body h3, .np-body h4{
  margin:1.8em 0 .8em; font-weight:700; color:var(--np-ink); line-height:1.5;
}

.np-body h2{ font-size:20px; padding-left:12px; border-left:4px solid var(--np-brand); }

.np-body h3{ font-size:17.5px; }

.np-body a{ color:var(--np-brand); text-decoration:underline; }

.np-body ul, .np-body ol{ margin:0 0 1.15em; padding-left:1.4em; }

.np-body li{ margin-bottom:.5em; }

.np-body blockquote{
  margin:1.4em 0; padding:14px 18px; background:var(--np-wash);
  border-left:3px solid var(--np-brand); border-radius:0 var(--np-r-sm) var(--np-r-sm) 0;
  color:var(--np-sub); font-size:15px;
}

/* 文尾标签 */

.np-art__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }

.np-art__tags a{
  padding:5px 13px; border-radius:20px; font-size:12.5px; text-decoration:none;
  background:var(--np-wash); color:var(--np-brand); border:1px solid #d9e9f8; transition:.2s;
}

.np-art__tags a:hover{ background:var(--np-brand); color:#fff; border-color:var(--np-brand); }

/* 上一篇 / 下一篇 */

.np-prevnext{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:26px; }

@media (min-width:640px){ .np-prevnext{ grid-template-columns:1fr 1fr; } }

.np-pn{
  display:block; padding:16px 18px; border:1px solid var(--np-line); border-radius:var(--np-r);
  background:#fff; text-decoration:none; color:inherit; transition:.25s var(--np-ease);
}

.np-pn:hover{ border-color:#cfe4f8; box-shadow:var(--np-sh); transform:translateY(-2px); }

.np-pn span{ display:block; font-size:11.5px; color:var(--np-faint); margin-bottom:6px; }

.np-pn strong{
  display:block; font-size:14px; font-weight:500; line-height:1.6; color:var(--np-text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.np-pn:hover strong{ color:var(--np-brand); }

.np-pn.empty{ opacity:.5; pointer-events:none; }

.np-pn.next{ text-align:right; }

/* 相关阅读 */

.np-rel{ display:grid; grid-template-columns:1fr; gap:14px; }

@media (min-width:560px){ .np-rel{ grid-template-columns:repeat(2,1fr); } }

@media (min-width:960px){ .np-rel{ grid-template-columns:repeat(2,1fr); } }

.np-rel .np-card__body{
  padding:16px 18px 50px;   /* 摘要下方固定保留 50px 留白 */
  padding-left:18px; min-height:0;
}

.np-rel .np-card__desc{ margin-top:7px; -webkit-line-clamp:2; }

.np-rel .np-card__date{ display:none; }

.np-rel .np-card__in{ grid-template-columns:1fr; }

.np-rel .np-card__pic{ aspect-ratio:var(--np-thumb-ar); height:auto; align-self:start; }

.np-rel .np-card__title{ font-size:15px; }

/* 返回列表 */

.np-back{
  display:inline-flex; align-items:center; gap:7px; margin-top:26px;
  padding:9px 20px; border-radius:22px; border:1px solid var(--np-line);
  background:#fff; font-size:13px; color:var(--np-text); text-decoration:none; transition:.2s;
}

.np-back:hover{ border-color:var(--np-brand); color:var(--np-brand); background:var(--np-wash); }

/* ==========================================================================
   八、返回顶部
   ========================================================================== */

.np-top{
  position:fixed; right:26px; bottom:36px; z-index:1600;
  width:46px; height:46px; border-radius:50%;
  border:1px solid #d5e5f4; background:#fff; color:var(--np-brand-dk);
  font-size:17px; line-height:1; cursor:pointer; box-shadow:var(--np-sh);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .28s var(--np-ease), transform .28s var(--np-ease),
             background .2s, border-color .2s, color .2s;
}

.np-top.is-show{ opacity:1; visibility:visible; transform:none; }

.np-top:hover{ background:var(--np-brand); border-color:var(--np-brand); color:#fff; }

/* ==========================================================================
   九、顶部菜单二级下拉
   --------------------------------------------------------------------------
   首页的下拉是站点 JS 给 li 加 .hover 类实现的；新闻页不引主站 JS，
   这里用纯 CSS hover 等效复刻同一套外观（白色圆角面板 + 投影 + 高亮）。
   ========================================================================== */

.module-menu ul>li:hover>ol{ display:block; }

.module-menu ul>li:hover ._white_arrow{ transform:rotate(-180deg); }

.module-menu ol>li>a{ color:#4f4f4f; }

/* 下拉项默认深灰，避免继承页头白字 */

.module-menu ol>li>a:hover{ color:var(--np-brand); }

/* header 落到白底（滚动后）时下拉项仍为深灰，箭头同步变黑 */

#header.header_change .module-menu ul>li:hover>a{ color:#000; }

/* ==========================================================================
   九、移动端适配 (<768px)
   --------------------------------------------------------------------------
   页头（汉堡按钮 / 菜单面板 / 遮罩）和页脚（纵向堆叠 + 手风琴站点地图）
   全部沿用首页手机版的 mobile.css —— 本页通过 dynamic.css 引入它，这里不再覆盖，
   只补 mobile.css 管不到的内容层排版。

   断点约定（与全站一致）：
     0-639    单列，图片整宽
     640-959  卡片图文左右分栏，侧栏落到下方
     960+     主内容 + 侧栏双列，侧栏吸顶
     1200+    hero 描述强制单行
   ========================================================================== */

@media (max-width:767px){
  /* 首页手机版页头高 55px，hero 顶部预留随之收紧 */
  .np-hero{ padding:84px 0 32px; }
  .np-hero--slim{ padding:80px 0 26px; }
  .np-hero__title{ font-size:26px; }
  .np-hero__stats{ gap:22px; }
  .np-stat__num{ font-size:22px; }
  .np-crumb{ font-size:12px; }
  .np-art__title{ font-size:24px; }

  /* 分页与卡片 */
  .np-page-nav{ flex-wrap:wrap; justify-content:center; }
  .np-card__title{ font-size:16px; }
  .np-top{ right:14px; bottom:20px; width:42px; height:42px; }
}

/* 平板：卡片已分栏，但侧栏还在下方，给侧栏一点间距 */

@media (min-width:640px) and (max-width:959px){
  .np-side{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
  .np-side>*{ margin-top:0; }
}

/* ==========================================================================
   十、无障碍：降低动效偏好
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .np-card, .np-card__pic img, .np-card::before, .np-pn, .np-cta a, .np-card__go{
    transition:none !important;
  }
  .np-card:hover{ transform:none; }
  .np-card:hover .np-card__pic img{ transform:none; }
}

/* ==========================================================================
   案例模块（case-list / case-detail）—— 原 case.css
   ========================================================================== */
/* ==========================================================================
   成功案例 · 列表页 / 内页专用样式
   --------------------------------------------------------------------------
   设计基准：跟随首页 /static/index/style/all.css 的配色与节奏
     主色   #0095ef      深蓝 #0b2b4f
     浅底   #f3f6fd      描边 #e2ebf3
     圆角   6px(小) / 16px(大)     与主站一致
   类名统一 cs- 前缀，不与主站原有样式冲突
   上线放置：/static/index/style/case.css

   依赖（页面必须按此顺序引入）：
     reset_css.css → all.css → dynamic.css（内含 tablet.css + mobile.css）
     → case.css
   手机版页头（汉堡菜单/电话）与页脚由 mobile.css 负责，本文件不覆盖，
   只补 mobile.css 管不到的内容层排版。
   ========================================================================== */

@charset "utf-8";


:root{
  --cs-brand:      #0095ef;
  --cs-brand-dk:   #0b2b4f;
  --cs-ink:        #18181b;
  --cs-text:       #333333;
  --cs-sub:        #596c80;
  --cs-faint:      #8c8c8c;
  --cs-line:       #e2ebf3;
  --cs-wash:       #f3f6fd;
  /* 圆角四档：大容器 12 / 卡片图块 10 / 小控件 8 / 胶囊 999 */
  --cs-r-lg:       12px;
  --cs-r:          10px;
  --cs-r-sm:       8px;
  --cs-r-pill:     999px;
  --cs-sh:         0 6px 24px rgba(11,43,79,.07);
  --cs-sh-lg:      0 14px 40px rgba(11,43,79,.13);
  --cs-ease:       cubic-bezier(.22,.61,.36,1);
  /* 列表缩略图比例对齐原图：站点案例图统一 800×442 */
  --cs-thumb-ar:   800 / 442;
}

/* ---------- 页面底色 ---------- */

.cs-page{
  min-height:60vh;
  background:
    radial-gradient(900px 420px at 50% -12%, #e8f2fd 0%, rgba(232,242,253,0) 62%),
    linear-gradient(180deg,#f6f9fd 0%, #fafcfe 42%, #ffffff 100%);
}

.cs-shell{ max-width:1440px; margin:0 auto; padding:0 18px; }

/* ==========================================================================
   一、内页 Hero
   ========================================================================== */

.cs-hero{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(135deg,#0b2b4f 0%, #123b7a 46%, #0095ef 100%);
  /* 顶部留足空间：#header 是 absolute 悬浮层（菜单行高约 100px） */
  padding:104px 0 44px;
}

.cs-hero::before,
.cs-hero::after{ content:""; position:absolute; border-radius:50%; pointer-events:none; }

.cs-hero::before{
  width:340px; height:340px; right:-90px; top:-140px;
  background:radial-gradient(circle, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 70%);
}

.cs-hero::after{
  width:260px; height:260px; left:-110px; bottom:-160px;
  background:radial-gradient(circle, rgba(0,149,239,.55) 0%, rgba(0,149,239,0) 70%);
}

.cs-hero__grid{
  position:absolute; inset:0; pointer-events:none; opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(180deg,#000 0%, transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%, transparent 78%);
}

.cs-hero__in{ position:relative; z-index:2; }

.cs-crumb{ font-size:12.5px; color:rgba(255,255,255,.72); margin-bottom:14px; }

.cs-crumb a{ color:rgba(255,255,255,.82); transition:color .2s; }

.cs-crumb a:hover{ color:#fff; }

.cs-crumb i{ font-style:normal; margin:0 7px; opacity:.5; }

.cs-crumb b{ font-weight:500; color:#fff; }

.cs-hero__row{ display:flex; flex-direction:column; gap:20px; }

.cs-hero__title{ margin:0; font-size:30px; line-height:1.25; font-weight:700; letter-spacing:.5px; }

.cs-hero__title small{
  display:block; margin-top:8px; font-size:12.5px; font-weight:400;
  letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.55);
}

.cs-hero__desc{
  margin:12px 0 0; font-size:14.5px; line-height:1.75; color:rgba(255,255,255,.8);
  max-width:44em;
}

.cs-hero__stats{ display:flex; gap:26px; margin-top:20px; flex-wrap:wrap; }

.cs-stat__num{
  display:block; font-size:26px; font-weight:700; line-height:1.1;
  font-variant-numeric:tabular-nums; letter-spacing:-.5px;
}

.cs-stat__label{ display:block; margin-top:5px; font-size:12px; color:rgba(255,255,255,.62); }

@media (min-width:768px){
  .cs-hero{ padding:150px 0 62px; }
  .cs-hero__title{ font-size:40px; }
  .cs-hero__desc{ font-size:16px; }
  .cs-hero__row{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:40px; }
  .cs-hero__stats{ margin-top:0; gap:34px; }
  .cs-stat__num{ font-size:32px; }
}

/* 宽屏 hero 描述强制一行 */

@media (min-width:1200px){
  .cs-hero__desc{ white-space:nowrap; max-width:none; }
}

/* 内页顶部大图 hero：图铺满 + 深色压角，标题绝对定位贴底
   （不用负 margin，避免文字比图高时溢出到浅色底上变成白字看不见） */

.cs-hero--cover{
  position:relative; padding:0; background:#0b2b4f; min-height:0;
}

.cs-hero--cover .cs-hero__cover{
  position:relative; height:300px; overflow:hidden;
}

.cs-hero--cover .cs-hero__cover img{
  width:100%; height:100%; object-fit:cover; display:block;
}

.cs-hero--cover .cs-hero__cover::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,43,79,.45) 0%, rgba(11,43,79,.70) 48%, rgba(11,43,79,.94) 100%);
}

.cs-hero--cover .cs-hero__in{
  position:absolute; left:0; right:0; bottom:0; z-index:3; padding-bottom:24px;
}

@media (min-width:768px){
  .cs-hero--cover .cs-hero__cover{ height:460px; }
  .cs-hero--cover .cs-hero__in{ padding-bottom:44px; }
}

/* ==========================================================================
   二、分类切换
   ========================================================================== */

.cs-main{ padding:30px 0 56px; }

.cs-tabs{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px;
}

.cs-tab{
  display:inline-flex; align-items:center; height:38px; padding:0 18px;
  border-radius:var(--cs-r-pill); border:1px solid var(--cs-line); background:#fff;
  font-size:14px; color:var(--cs-sub); text-decoration:none;
  transition:.24s var(--cs-ease);
}

.cs-tab:hover{ border-color:#cfe4f8; color:var(--cs-brand); background:var(--cs-wash); }

.cs-tab.on{
  background:linear-gradient(90deg,var(--cs-brand),#0b7fd0);
  border-color:transparent; color:#fff; box-shadow:0 6px 18px rgba(0,149,239,.25);
}

.cs-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:0 0 16px; font-size:13px; color:var(--cs-faint);
}

.cs-bar h2{ margin:0; font-size:18px; color:var(--cs-ink); font-weight:700; }

/* ==========================================================================
   三、案例卡片网格
   ========================================================================== */

.cs-grid{
  display:grid; grid-template-columns:1fr; gap:20px;
}

@media (min-width:640px){ .cs-grid{ grid-template-columns:repeat(2,1fr); gap:22px; } }

@media (min-width:1024px){ .cs-grid{ grid-template-columns:repeat(3,1fr); gap:26px; } }

.cs-card{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--cs-line);
  border-radius:var(--cs-r); overflow:hidden; text-decoration:none; color:inherit;
  transition:box-shadow .28s var(--cs-ease), transform .28s var(--cs-ease), border-color .28s;
}

.cs-card:hover{ box-shadow:var(--cs-sh-lg); transform:translateY(-4px); border-color:#cfe4f8; }

.cs-card:focus-visible{ outline:2px solid var(--cs-brand); outline-offset:3px; }

.cs-card:hover, .cs-card:focus-visible{ text-decoration:none; }

/* 顶部蓝线：hover 从左展开 */

.cs-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; z-index:3;
  background:linear-gradient(90deg,var(--cs-brand),#0b7fd0);
  transform:scaleX(0); transform-origin:left; transition:transform .32s var(--cs-ease);
}

.cs-card:hover::before, .cs-card:focus-visible::before{ transform:scaleX(1); }

/* 缩略图：严格 800×442 */

.cs-card__pic{
  position:relative; aspect-ratio:var(--cs-thumb-ar); overflow:hidden;
  background:var(--cs-wash);
}

.cs-card__pic img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s var(--cs-ease);
}

.cs-card:hover .cs-card__pic img{ transform:scale(1.05); }

/* 客户 logo 方标压在图左下角（本页的记忆点） */

.cs-card__logo{
  position:absolute; left:14px; bottom:-18px; z-index:2;
  width:56px; height:56px; border-radius:var(--cs-r-sm); background:#fff;
  border:1px solid var(--cs-line); box-shadow:0 8px 20px rgba(11,43,79,.14);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  transition:transform .3s var(--cs-ease);
}

.cs-card__logo img{ max-width:76%; max-height:76%; object-fit:contain; display:block; }

/* 没有 logo 素材的客户：用首字做字标，保持版面整齐 */

.cs-card__logo--txt{
  color:var(--cs-brand); font-weight:700; font-size:19px; letter-spacing:1px;
}

.cs-card:hover .cs-card__logo{ transform:translateY(-3px); }

/* 编号：CASE 01 */

.cs-card__no{
  position:absolute; right:12px; top:12px; z-index:2;
  padding:4px 9px; border-radius:var(--cs-r-pill); font-size:11px; letter-spacing:1px;
  background:rgba(11,43,79,.55); color:#fff; backdrop-filter:blur(4px);
  font-variant-numeric:tabular-nums;
}

.cs-card__body{
  padding:26px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1;
}

.cs-card__title{
  margin:0; font-size:17px; line-height:1.5; font-weight:700; color:var(--cs-ink);
  transition:color .2s;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}

.cs-card:hover .cs-card__title{ color:var(--cs-brand); }

.cs-card__meta{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--cs-faint); }

.cs-tag{
  display:inline-block; padding:2px 9px; border-radius:var(--cs-r-pill); font-size:11.5px;
  background:var(--cs-wash); color:var(--cs-brand); border:1px solid #d9e9f8;
}

.cs-tag--solid{
  background:linear-gradient(90deg,var(--cs-brand),#0b7fd0); color:#fff; border-color:transparent;
}

.cs-card__go{
  margin-top:auto; padding-top:12px; font-size:13px; color:var(--cs-brand);
  display:flex; align-items:center; gap:6px;
}

.cs-card__go i{
  font-style:normal; display:inline-block; transition:transform .3s var(--cs-ease);
}

.cs-card:hover .cs-card__go i{ transform:translateX(5px); }

/* ==========================================================================
   四、内页：标题区 / 正文 / 双端展示
   ========================================================================== */

.cs-art{ padding:30px 0 0; }

.cs-art__hd{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}

.cs-art__logo{
  width:64px; height:64px; border-radius:var(--cs-r-sm); background:#fff; border:1px solid var(--cs-line);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex:none;
  box-shadow:var(--cs-sh);
}

.cs-art__logo img{ max-width:76%; max-height:76%; object-fit:contain; display:block; }

.cs-art__title{ margin:0; font-size:26px; line-height:1.4; font-weight:700; color:#fff; }

@media (min-width:768px){ .cs-art__title{ font-size:34px; } }

.cs-art__meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px;
  margin-top:16px; font-size:13px; color:rgba(255,255,255,.78);
}

.cs-art__meta em{ font-style:normal; display:inline-flex; align-items:center; gap:6px; }

.cs-art__meta em::before{
  content:""; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.5);
}

.cs-art__meta a{ color:rgba(255,255,255,.9); text-decoration:none; }

.cs-art__meta a:hover{ color:#fff; }

.cs-wrap{
  background:#fff; border:1px solid var(--cs-line); border-radius:var(--cs-r-lg);
  box-shadow:var(--cs-sh); padding:26px 20px 30px; position:relative; z-index:2;
}

/* 桌面端让白色内容卡压住大图一点，但只压 18px，
   不会碰到绝对定位贴底（padding-bottom:44px）的标题与元信息 */

@media (min-width:768px){ .cs-wrap{ padding:38px 46px 44px; margin-top:-18px; } }

.cs-sec{ margin-top:30px; }

.cs-sec:first-child{ margin-top:0; }

.cs-sec__hd{
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
}

.cs-sec__hd::before{
  content:""; width:4px; height:16px; border-radius:2px;
  background:linear-gradient(180deg,var(--cs-brand),#0b7fd0);
}

.cs-sec__hd h2{ margin:0; font-size:19px; font-weight:700; color:var(--cs-ink); }

.cs-sec p{ margin:0 0 14px; font-size:15.5px; line-height:1.9; color:#2c3a47; }

/* PC + 手机双端并排 */

.cs-shot figure{ margin:0; }

.cs-shot__pc img{
  width:100%; height:auto; display:block; border-radius:8px;
  box-shadow:0 10px 26px rgba(11,43,79,.16); background:#fff;
}

.cs-shot__mb{
  display:flex; flex-direction:column; align-items:center; gap:8px;
}

.cs-shot__mb img{
  width:100%; height:auto; display:block; border-radius:var(--cs-r);
  box-shadow:0 10px 26px rgba(11,43,79,.18);
}

.cs-shot__mb span{ font-size:12px; color:var(--cs-faint); }

/* 长图展示 */

.cs-shots{ display:grid; gap:16px; margin-top:4px; }

@media (min-width:768px){ .cs-shots{ grid-template-columns:repeat(2,1fr); gap:20px; } }

.cs-shots img{
  width:100%; height:auto; display:block; border-radius:10px;
  border:1px solid var(--cs-line); background:#fff;
}

/* 严正声明 */

.cs-notice{
  margin-top:30px; padding:16px 18px; border-radius:var(--cs-r);
  background:#fff8f2; border:1px solid #f6e2d0; color:#8a5a33;
  font-size:13px; line-height:1.8;
}

.cs-notice b{ color:#c1541f; }

/* 上/下一个案例 */

.cs-prevnext{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:30px; }

@media (min-width:640px){ .cs-prevnext{ grid-template-columns:1fr 1fr; } }

.cs-pn{
  display:block; padding:16px 18px; border-radius:var(--cs-r);
  border:1px solid var(--cs-line); background:#fff; text-decoration:none;
  transition:.24s var(--cs-ease);
}

.cs-pn:hover{ border-color:var(--cs-brand); background:var(--cs-wash); text-decoration:none; }

.cs-pn span{ display:block; font-size:12px; color:var(--cs-faint); margin-bottom:5px; }

.cs-pn strong{
  display:block; font-size:14px; font-weight:500; line-height:1.6; color:var(--cs-text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.cs-pn:hover strong{ color:var(--cs-brand); }

.cs-pn.next{ text-align:right; }

/* 相关案例 */

.cs-rel{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:14px; }

@media (min-width:640px){ .cs-rel{ grid-template-columns:repeat(3,1fr); } }

.cs-rel .cs-card__body{ padding:22px 16px 16px; }

.cs-rel .cs-card__title{ font-size:15px; }

/* 返回栏目 */

.cs-back{
  display:inline-flex; align-items:center; gap:7px; margin-top:26px;
  padding:9px 20px; border-radius:var(--cs-r-pill); border:1px solid var(--cs-line);
  background:#fff; font-size:13px; color:var(--cs-text); text-decoration:none; transition:.2s;
}

.cs-back:hover{ border-color:var(--cs-brand); color:var(--cs-brand); background:var(--cs-wash); }

/* CTA 条 */

.cs-cta{
  position:relative; overflow:hidden; border-radius:var(--cs-r-lg); margin-top:34px;
  padding:28px 24px; color:#fff;
  background:linear-gradient(135deg,#0b2b4f 0%, #123b7a 55%, #0095ef 100%);
}

.cs-cta::after{
  content:""; position:absolute; width:260px; height:260px; right:-70px; top:-120px;
  border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 70%);
}

.cs-cta__in{ position:relative; z-index:2; }

.cs-cta h3{ margin:0 0 8px; font-size:20px; font-weight:700; }

.cs-cta p{ margin:0; font-size:14px; line-height:1.8; color:rgba(255,255,255,.82); }

.cs-cta a{
  display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  padding:10px 22px; border-radius:var(--cs-r-pill); background:#fff; color:var(--cs-brand);
  font-size:14px; font-weight:600; text-decoration:none; transition:.24s var(--cs-ease);
}

.cs-cta a:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.18); }

@media (min-width:768px){
  .cs-cta{ padding:36px 40px; }
  .cs-cta h3{ font-size:24px; }
}

/* ==========================================================================
   五、顶部菜单二级下拉（与新闻页一致：主站 JS 的 CSS 等效）
   ========================================================================== */

.module-menu ol>li>a:hover{ color:var(--cs-brand); }

/* ==========================================================================
   六、返回顶部
   ========================================================================== */

.cs-top{
  position:fixed; right:26px; bottom:36px; z-index:1600;
  width:46px; height:46px; border-radius:50%;
  border:1px solid #d5e5f4; background:#fff; color:var(--cs-brand-dk);
  font-size:17px; line-height:1; cursor:pointer; box-shadow:var(--cs-sh);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .28s var(--cs-ease), transform .28s var(--cs-ease),
             background .2s, border-color .2s, color .2s;
}

.cs-top.is-show{ opacity:1; visibility:visible; transform:none; }

.cs-top:hover{ background:var(--cs-brand); border-color:var(--cs-brand); color:#fff; }

/* ==========================================================================
   七、移动端适配（页头/页脚由 mobile.css 负责，这里只管内容层）
   ========================================================================== */

@media (max-width:767px){
  .cs-hero{ padding:84px 0 32px; }
  .cs-hero--cover .cs-hero__cover{ height:240px; }
  .cs-hero--cover .cs-hero__in{ padding-bottom:20px; }
  .cs-hero__title{ font-size:26px; }
  .cs-hero__stats{ gap:22px; }
  .cs-stat__num{ font-size:22px; }
  .cs-crumb{ font-size:12px; }
  .cs-art__title{ font-size:23px; }
  .cs-art__logo{ width:54px; height:54px; }
  .cs-wrap{ padding:22px 16px 24px; margin-top:0; }
  .cs-sec p{ font-size:15px; }
  .cs-card__title{ font-size:16px; }
  .cs-top{ right:14px; bottom:20px; width:42px; height:42px; }
}

/* ==========================================================================
   八、降低动效偏好
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .cs-card, .cs-card__pic img, .cs-card::before, .cs-card__logo,
  .cs-pn, .cs-cta a, .cs-top{ transition:none !important; }
  .cs-card:hover{ transform:none; }
  .cs-card:hover .cs-card__pic img{ transform:none; }
}

/* ==========================================================================
   四·b 内页改版（2026-10-10）：顶部无大图背景 · 左图右栏
   --------------------------------------------------------------------------
   结构：cs-shell--detail > cs-detail（grid）> 左 article.cs-art / 右 aside.cs-side
   展示区三种方案：cs-shots--pc（仅PC堆叠）/ cs-shots--stack（PC堆叠+手机横排）
                   / cs-shots--mb（仅手机横排）
   历史案例截图原始宽度 1002px：左列上限即 1002px，原图 1:1 呈现不放大
   ========================================================================== */

.cs-shell--detail{ max-width:1440px; }

/* 左列 1002px = 老截图原生宽度，1:1 显示；
   右栏弹性填充（min 300px），在 1440 版心下约 408px，中部区域整体铺满不留空 */

.cs-detail{
  display:grid; grid-template-columns:minmax(0,1002px) minmax(300px,1fr);
  gap:30px; align-items:start;
}

/* 左列不再吃旧版的 30px 顶部内边距，保证与右栏顶头齐平 */

.cs-detail .cs-art{ padding-top:0; }

/* 去掉外层白卡：只剩图片自己这一层圆角框 */

.cs-detail .cs-wrap{ padding:0; margin:0; background:none; border:0; border-radius:0; box-shadow:none; }

/* 案例截图：不套容器 div，每张图自己独立成块、各自圆角 */

.cs-shot{
  display:block; width:100%; height:auto; box-sizing:border-box;
  margin:0; padding:0; border-radius:var(--cs-r); border:1px solid var(--cs-line); background:#fff;
  box-shadow:0 6px 16px rgba(11,43,79,.06);
}

.cs-shot + .cs-shot{ margin-top:18px; }

/* 手机端横排：同样不再套托盘，图片自带圆角 */

.cs-mbrow{
  display:flex; flex-wrap:wrap; gap:20px; justify-content:center;
  margin-top:20px; padding:0;
}

.cs-mbrow__item{
  margin:0; width:220px; max-width:46%;
  display:flex; flex-direction:column; align-items:center; gap:9px;
}

.cs-mbrow__item img{
  width:100%; height:auto; display:block; border-radius:var(--cs-r);
  border:1px solid var(--cs-line); box-shadow:0 10px 24px rgba(11,43,79,.16); background:#fff;
}

.cs-mbrow__item figcaption{ font-size:12px; color:var(--cs-faint); }

/* ---------- 右栏 ---------- */

/* 右栏：滚动时吸附在视口顶部（离顶 16px）；
   栏目总高超过视口时允许内部细滚动条兜底，保证底部内容仍可达 */

.cs-side{
  position:sticky; top:16px;
  display:flex; flex-direction:column; gap:26px;
  max-height:calc(100vh - 32px); overflow-y:auto; scrollbar-width:thin;
}

.cs-side::-webkit-scrollbar{ width:5px; }

.cs-side::-webkit-scrollbar-thumb{ background:#d5e2ef; border-radius:4px; }

.cs-side::-webkit-scrollbar-track{ background:transparent; }

.cs-side__hd{
  display:flex; align-items:center; gap:9px;
  margin:0 0 10px; font-size:15.5px; font-weight:700; color:var(--cs-ink);
}

.cs-side__hd::before{
  content:""; width:4px; height:15px; border-radius:2px; flex:none;
  background:linear-gradient(180deg,var(--cs-brand),#0b7fd0);
}

.cs-side__hd--en{ letter-spacing:.5px; }

.cs-side__hd--en::before{ display:none; }

.cs-side__txt{ margin:0; font-size:14px; line-height:1.95; color:#3a4754; }

/* 右栏卡片框：项目信息 / 相关业务 / 咨询共用同一套盒子 */

.cs-side__card{
  padding:15px 17px 17px; border-radius:var(--cs-r);
  background:#fff; border:1px solid var(--cs-line);
  box-shadow:0 4px 14px rgba(11,43,79,.05);
}

.cs-side__card .cs-side__hd{ margin-bottom:6px; }

.cs-side__more{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--cs-brand); text-decoration:none; transition:gap .22s var(--cs-ease);
}

.cs-side__more:hover{ gap:10px; text-decoration:none; }

.cs-side__more i{ font-style:normal; }

/* 项目信息（规格表） */

.cs-side__spec{ margin:0; display:grid; grid-template-columns:auto 1fr; }

.cs-side__spec dt,
.cs-side__spec dd{
  padding:9px 0; border-top:1px solid var(--cs-line); line-height:1.6;
}

.cs-side__spec dt{ font-size:12.5px; color:var(--cs-faint); white-space:nowrap; }

.cs-side__spec dd{ margin:0; padding-left:14px; font-size:13px; color:var(--cs-text); text-align:right; }

.cs-side__spec dt:first-of-type,
.cs-side__spec dd:first-of-type{ border-top:none; }

/* 相关业务（胶囊入口） */

.cs-side__cats{ display:flex; flex-wrap:wrap; gap:8px; }

.cs-side__cats a{
  padding:6px 12px; border-radius:var(--cs-r-pill); font-size:12.5px; text-decoration:none;
  background:var(--cs-wash); color:var(--cs-sub); border:1px solid var(--cs-line);
  transition:.22s var(--cs-ease);
}

.cs-side__cats a:hover{ color:var(--cs-brand); border-color:#cfe4f8; background:#fff; text-decoration:none; }

/* 咨询卡 */

.cs-side__consult{
  padding:16px 17px 18px; border-radius:var(--cs-r);
  background:linear-gradient(160deg,#f3f8ff 0%, #e9f2fd 100%); border:1px solid #d9e9f8;
}

.cs-side__consult .cs-side__hd{ margin-bottom:6px; }

.cs-side__consult p.cs-side__txt{ font-size:12.5px; line-height:1.85; color:var(--cs-sub); }

.cs-side__ct{ list-style:none; margin:13px 0 0; padding:0; display:grid; gap:9px; }

.cs-side__ct li{ display:flex; align-items:center; gap:9px; font-size:13px; }

/* 线稿透明图标（内联 SVG，跟随文字色，不用站点那套实心 png 精灵图） */

.cs-side__ct i{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; color:var(--cs-brand);
}

.cs-side__ct svg{ width:18px; height:18px; display:block; }

.cs-side__ct a{
  color:var(--cs-text); text-decoration:none; font-variant-numeric:tabular-nums; transition:color .2s;
}

.cs-side__ct a:hover{ color:var(--cs-brand); }

.cs-side__btn{
  display:block; margin-top:15px; padding:9px 0; border-radius:var(--cs-r-pill); text-align:center;
  background:linear-gradient(90deg,var(--cs-brand),#0b7fd0); color:#fff;
  font-size:13.5px; font-weight:600; text-decoration:none;
  box-shadow:0 8px 18px rgba(0,149,239,.26); transition:.24s var(--cs-ease);
}

.cs-side__btn:hover{ transform:translateY(-2px); color:#fff; text-decoration:none; }

/* 分享圆钮 */

.cs-share{ display:flex; flex-wrap:wrap; gap:10px; }

.cs-share a{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:600; color:#fff; text-decoration:none;
  transition:transform .22s var(--cs-ease), box-shadow .22s var(--cs-ease);
}

.cs-share a:hover{ transform:translateY(-3px); box-shadow:0 10px 20px rgba(11,43,79,.22); text-decoration:none; }

.cs-share .i-wx{ background:#2aae67; }

.cs-share .i-qq{ background:#12b7f5; }

.cs-share .i-wb{ background:#e6462e; }

.cs-share .i-fb{ background:#1877f2; font-size:15px; }

.cs-share .i-tw{ background:#14171a; font-size:15px; }

.cs-share .i-cp{ background:#8c9bb0; font-size:16px; }

/* 严正声明（右栏版） */

.cs-side__notice{
  padding:15px 17px; border-radius:var(--cs-r);
  background:#fff8f2; border:1px solid #f6e2d0;
  font-size:12.5px; line-height:1.85; color:#8a5a33;
}

.cs-side__notice b{ display:block; color:#c1541f; margin-bottom:4px; }

.cs-side__notice p{ margin:0; }

/* 上一篇 / 下一篇（竖排两行，参考原站右栏） */

.cs-side__pager{ border-top:1px solid var(--cs-line); }

.cs-pg{
  display:flex; align-items:center; gap:10px;
  padding:15px 2px; border-bottom:1px solid var(--cs-line);
  text-decoration:none;
}

.cs-pg span{ flex:none; font-size:12px; color:var(--cs-faint); }

.cs-pg strong{
  flex:1; font-size:13.5px; font-weight:500; color:var(--cs-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .2s;
}

.cs-pg i{
  flex:none; font-style:normal; font-size:18px; line-height:1; color:#c3d2e2;
  transition:transform .22s var(--cs-ease), color .2s;
}

.cs-pg:hover{ text-decoration:none; }

.cs-pg:hover strong{ color:var(--cs-brand); }

.cs-pg:hover i{ transform:translateX(4px); color:var(--cs-brand); }

/* ---------- 新旧对比滑块 ---------- */

.cs-cmp{
  position:relative; overflow:hidden; border-radius:var(--cs-r);
  border:1px solid var(--cs-line); background:#fff;
  cursor:ew-resize; user-select:none; -webkit-user-select:none; touch-action:none;
  box-shadow:0 10px 26px rgba(11,43,79,.14);
}

.cs-cmp:focus-visible{ outline:2px solid var(--cs-brand); outline-offset:3px; }

.cs-cmp__old{ display:block; width:100%; height:auto; }

.cs-cmp__new{
  position:absolute; inset:0; overflow:hidden;
  clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0);
  -webkit-clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0);
}

.cs-cmp__new img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:left top;
}

.cs-cmp__handle{
  position:absolute; top:0; bottom:0; left:var(--pos,50%); width:2px;
  background:#fff; box-shadow:0 0 10px rgba(0,0,0,.4);
  pointer-events:none;
}

.cs-cmp__handle i{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%;
  background:var(--cs-brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-style:normal;
  box-shadow:0 6px 18px rgba(0,60,120,.4), 0 0 0 3px rgba(255,255,255,.85);
}

.cs-cmp__tag{
  position:absolute; top:12px; z-index:2;
  padding:3px 12px; border-radius:var(--cs-r-pill); font-size:11.5px; letter-spacing:1px;
  color:#fff; background:rgba(11,43,79,.55); backdrop-filter:blur(4px);
  pointer-events:none;
}

.cs-cmp__tag--old{ left:12px; }

.cs-cmp__tag--new{ right:12px; background:rgba(0,149,239,.75); }

/* ---------- 响应式 ---------- */

/* 窄屏单列时右栏不再吸附，正常跟流 */

@media (max-width:1180px){
  .cs-detail{ grid-template-columns:minmax(0,1fr); gap:30px; }
  .cs-side{ position:static; max-width:640px; max-height:none; overflow:visible; }
}

@media (max-width:767px){
  .cs-detail{ gap:24px; }
  .cs-detail .cs-wrap{ padding:0; }
  .cs-shot + .cs-shot{ margin-top:12px; }
  .cs-mbrow{ margin-top:16px; gap:14px; }
  .cs-mbrow__item{ width:46%; }
  .cs-side{ gap:22px; }
}

/* ==========================================================================
   业务介绍模块（service-miniapp / software / touchscreen）—— 原 service.css
   ========================================================================== */
/* ==========================================================================
   业务介绍页通用样式（小程序开发 / 触控大屏 / 软件定制 三个单页共用）
   --------------------------------------------------------------------------
   设计基线：与已交付的新闻页、案例页同一套视觉语言
     · 主色 #0095ef（对齐首页 all.css）
     · 深蓝渐变 Hero + 网格纹理
     · 版心 1440px（对齐站点 .center）
     · 卡片圆角 14px / 描边 #e8eef5 / 悬停上浮
   命名：全部 sv- 前缀，与 np-(新闻) cs-(案例) 互不冲突
   断点：<768 手机（页头页脚由 dynamic.css 接管） / 768-1199 平板 / 1200+ 桌面
   ========================================================================== */

@charset "utf-8";


:root{
  --sv-brand:      #0095ef;
  --sv-brand-d:    #0078c4;
  --sv-ink:        #0b2b4f;
  --sv-text:       #2c3a47;
  --sv-sub:        #5b6b7c;
  --sv-faint:      #93a1b0;
  --sv-line:       #e8eef5;
  --sv-wash:       #f5f9fd;
  --sv-r:          14px;
  --sv-sh:         0 4px 18px rgba(11,43,79,.06);
  --sv-sh-lg:      0 14px 34px rgba(11,43,79,.12);
  --sv-ease:       cubic-bezier(.22,.61,.36,1);
}

/* 版心：1440px，与站点 .center 一致 */

.sv-shell{ max-width:1440px; margin:0 auto; padding:0 18px; }

@media (min-width:768px){ .sv-shell{ padding:0 30px; } }

@media (min-width:1200px){ .sv-shell{ padding:0 40px; } }

.sv-page{ display:block; }

/* ==========================================================================
   一、Hero：真实照片 banner 底图 + 深蓝遮罩（照片由内联 background-image 传入）
   顶部预留 150px —— 页头是绝对定位悬浮层（菜单行高约 100px），
   手机端由 mobile.css 接管后页头高 55px，故收到 104px。
   ========================================================================== */

.sv-hero{
  position:relative; overflow:hidden;
  background:#0b2b4f;             /* 照片加载前的兜底色 */
  background-size:cover; background-position:center;
}

.sv-hero__mask{
  position:absolute; inset:0;
  background:linear-gradient(96deg, rgba(11,43,79,.96) 4%, rgba(11,43,79,.88) 42%, rgba(11,43,79,.55) 100%);
}

.sv-hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 20% 0%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 20% 0%, #000 0%, transparent 72%);
  pointer-events:none;
}

/* 注意：这里只能用 padding-top / padding-bottom，不能用 padding 简写。
   .sv-hero__in 与 .sv-shell 挂在同一个元素上（class="sv-shell sv-hero__in"），
   两者特异性相同、本条又在后面，一旦用简写就会把 .sv-shell 的左右留白（手机 18px / 桌面 40px）清成 0。 */
.sv-hero__in{ position:relative; padding-top:104px; padding-bottom:60px; }

@media (min-width:768px){ .sv-hero__in{ padding-top:150px; padding-bottom:88px; } }

.sv-crumb{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:12.5px; color:rgba(255,255,255,.66); }

.sv-crumb a{ color:rgba(255,255,255,.78); }

.sv-crumb a:hover{ color:#fff; text-decoration:none; }

.sv-crumb i{ font-style:normal; opacity:.5; }

.sv-crumb b{ font-weight:400; color:#fff; }

.sv-hero__row{ margin-top:16px; }

@media (min-width:1200px){
  .sv-hero__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; }
}

.sv-hero__title{
  margin:0; font-size:29px; line-height:1.22; font-weight:700; color:#fff; letter-spacing:.5px;
}

.sv-hero__title small{
  display:block; margin-top:8px; font-size:12px; font-weight:400;
  letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.5);
}

.sv-hero__desc{
  margin:14px 0 0; max-width:760px; font-size:14.5px; line-height:1.85; color:rgba(255,255,255,.8);
}

@media (min-width:768px){
  .sv-hero__title{ font-size:40px; }
  .sv-hero__desc{ font-size:16px; }
}

@media (min-width:1200px){ .sv-hero__desc{ white-space:nowrap; } }

.sv-hero__stats{ display:flex; gap:24px; margin-top:24px; }

@media (min-width:768px){ .sv-hero__stats{ margin-top:0; gap:34px; } }

.sv-stat__num{ display:block; font-size:24px; font-weight:700; color:#fff; line-height:1.2; }

.sv-stat__num em{ font-style:normal; font-size:14px; font-weight:400; opacity:.7; margin-left:2px; }

.sv-stat__label{ display:block; margin-top:4px; font-size:12px; color:rgba(255,255,255,.62); }

@media (min-width:768px){ .sv-stat__num{ font-size:32px; } }

.sv-hero__btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:40px; }

@media (min-width:768px){ .sv-hero__btns{ margin-top:52px; } }

.sv-btn{
  display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 22px;
  border-radius:999px; font-size:14.5px; font-weight:600;
  background:#fff; color:var(--sv-ink); border:1px solid #fff;
  transition:transform .25s var(--sv-ease), box-shadow .25s var(--sv-ease);
}

.sv-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.18); text-decoration:none; }

.sv-btn--ghost{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.5); }

.sv-btn--ghost:hover{ background:rgba(255,255,255,.2); }

/* ==========================================================================
   三、内容区与章节
   ========================================================================== */

.sv-main{ background:var(--sv-wash); padding:26px 0 44px; }

@media (min-width:768px){ .sv-main{ padding:40px 0 64px; } }

.sv-sec{ margin-top:38px; }

@media (min-width:768px){ .sv-sec{ margin-top:64px; } }

.sv-sec__hd{ margin-bottom:20px; }

.sv-sec__hd h2{
  position:relative; margin:0; padding-left:13px;
  font-size:21px; font-weight:700; color:var(--sv-ink); letter-spacing:.4px;
}

.sv-sec__hd h2::before{
  content:""; position:absolute; left:0; top:4px; bottom:4px; width:4px;
  border-radius:2px; background:var(--sv-brand);
}

.sv-sec__hd p{ margin:9px 0 0; padding-left:13px; font-size:14px; color:var(--sv-sub); line-height:1.8; }

@media (min-width:768px){ .sv-sec__hd h2{ font-size:26px; } }

/* 白底内容卡 */

.sv-wrap{
  background:#fff; border:1px solid var(--sv-line); border-radius:var(--sv-r);
  box-shadow:var(--sv-sh); padding:20px 16px 24px;
}

@media (min-width:768px){ .sv-wrap{ padding:34px 38px 40px; } }

/* ==========================================================================
   四、能力卡片矩阵
   ========================================================================== */

.sv-cards{ display:grid; gap:14px; }

@media (min-width:640px){ .sv-cards{ grid-template-columns:repeat(2,1fr); } }

@media (min-width:1100px){ .sv-cards{ grid-template-columns:repeat(3,1fr); gap:18px; } }

.sv-card{
  position:relative; display:block; overflow:hidden;
  background:#fff; border:1px solid var(--sv-line); border-radius:var(--sv-r);
  padding:22px 20px 20px; transition:transform .3s var(--sv-ease), box-shadow .3s var(--sv-ease), border-color .3s var(--sv-ease);
}

.sv-card::before{
  content:""; position:absolute; left:0; top:0; height:3px; width:0;
  background:var(--sv-brand); transition:width .35s var(--sv-ease);
}

.sv-card:hover{ transform:translateY(-4px); box-shadow:var(--sv-sh-lg); border-color:#cfe4f8; }

.sv-card:hover::before{ width:100%; }

.sv-card__ico{
  width:auto; height:auto; display:block; margin-bottom:14px;
  background:none; color:var(--sv-brand);   /* 去掉背景框，图标放大占住原来的位置 */
}

.sv-card__ico svg{ width:30px; height:30px; overflow:visible; }

.sv-card__t{ margin:0; font-size:17px; font-weight:700; color:var(--sv-ink); }

.sv-card__d{ margin:9px 0 0; font-size:14px; line-height:1.8; color:var(--sv-sub); }

.sv-card__list{ margin:12px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px; }

.sv-card__list li{
  font-size:12px; color:var(--sv-sub); background:var(--sv-wash);
  border:1px solid var(--sv-line); border-radius:999px; padding:3px 10px;
}

/* ==========================================================================
   五、功能模块 chips
   ========================================================================== */

.sv-mods{ display:grid; gap:10px; }

@media (min-width:560px){ .sv-mods{ grid-template-columns:repeat(2,1fr); } }

@media (min-width:1000px){ .sv-mods{ grid-template-columns:repeat(3,1fr); } }

.sv-mod{
  display:flex; align-items:flex-start; gap:10px;
  padding:13px 15px; background:#fff; border:1px solid var(--sv-line); border-radius:10px;
  font-size:14px; line-height:1.65; color:var(--sv-text);
}

.sv-mod b{ display:block; font-size:14.5px; color:var(--sv-ink); font-weight:600; }

.sv-mod span{ font-size:12.5px; color:var(--sv-sub); }

.sv-mod::before{
  content:""; flex:none; width:7px; height:7px; margin-top:6px; border-radius:50%;
  background:var(--sv-brand);
}

/* ==========================================================================
   六、流程步骤
   ========================================================================== */

.sv-flow{ display:grid; gap:12px; }

@media (min-width:700px){ .sv-flow{ grid-template-columns:repeat(3,1fr); } }

@media (min-width:1100px){ .sv-flow{ grid-template-columns:repeat(6,1fr); } }

.sv-step{
  position:relative; padding:18px 16px; background:#fff;
  border:1px solid var(--sv-line); border-radius:12px;
}

.sv-step__n{
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:11px; line-height:1;
  background:none; color:var(--sv-brand); font-size:20px; font-weight:700; letter-spacing:.5px;
}

.sv-step__t{ margin:0; font-size:15px; font-weight:700; color:var(--sv-ink); }

.sv-step__d{ margin:7px 0 0; font-size:13px; line-height:1.75; color:var(--sv-sub); }

/* ==========================================================================
   七、对比表：模板套壳 vs 定制开发
   ========================================================================== */

.sv-cmp{ border:1px solid var(--sv-line); border-radius:12px; overflow:hidden; background:#fff; }

.sv-cmp__row{ display:grid; grid-template-columns:1fr; }

@media (min-width:700px){ .sv-cmp__row{ grid-template-columns:1fr 1fr 1fr; } }

.sv-cmp__row > div{ padding:14px 18px; border-top:1px solid var(--sv-line); font-size:14px; line-height:1.75; }

.sv-cmp__row:first-child > div{ border-top:0; }

.sv-cmp__row > div:first-child{
  background:var(--sv-wash); color:var(--sv-ink); font-weight:600;
}

@media (min-width:700px){ .sv-cmp__row > div + div{ border-left:1px solid var(--sv-line); } }

.sv-cmp__hd > div{
  background:var(--sv-ink) !important; color:#fff !important; font-weight:700; font-size:13.5px;
}

.sv-cmp__hd > div.sv-hi{ background:var(--sv-brand) !important; }

.sv-cmp__row .sv-hi{ color:var(--sv-brand-d); font-weight:600; }

/* 与上方图文块的间距 + 斑马纹与行悬停，读起来不挤 */

.sv-duo + .sv-cmp{ margin-top:26px; }

.sv-cmp__row:not(.sv-cmp__hd):nth-child(odd) > div{ background:#fafcff; }

.sv-cmp__row:not(.sv-cmp__hd){ transition:background .2s; }

.sv-cmp__row:not(.sv-cmp__hd):hover > div{ background:#f2f9ff; }

.sv-cmp__row:not(.sv-cmp__hd):hover > div.sv-hi{ background:#e9f5ff; }

/* ==========================================================================
   八、标签组 / 提示条
   ========================================================================== */

.sv-tags{ display:flex; flex-wrap:wrap; gap:8px; }

.sv-tag{
  padding:6px 13px; border-radius:999px; font-size:13px;
  background:#fff; border:1px solid var(--sv-line); color:var(--sv-text);
}

.sv-note{
  margin-top:14px; padding:13px 16px; border-radius:10px;
  background:var(--sv-wash); border:1px dashed var(--sv-line);
  font-size:13px; line-height:1.8; color:var(--sv-sub);
}

.sv-note b{ color:var(--sv-ink); }

/* ==========================================================================
   九、FAQ 折叠
   ========================================================================== */

.sv-faq{ display:grid; gap:10px; }

.sv-faq details{
  background:#fff; border:1px solid var(--sv-line); border-radius:11px; overflow:hidden;
}

.sv-faq summary{
  cursor:pointer; list-style:none; padding:15px 44px 15px 18px; position:relative;
  font-size:15px; font-weight:600; color:var(--sv-ink);
}

.sv-faq summary::-webkit-details-marker{ display:none; }

.sv-faq summary::after{
  content:""; position:absolute; right:19px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--sv-brand); border-bottom:2px solid var(--sv-brand);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s var(--sv-ease);
}

.sv-faq details[open] summary::after{ transform:translateY(-30%) rotate(225deg); }

.sv-faq__a{
  padding:0 18px 17px; font-size:14px; line-height:1.85; color:var(--sv-sub);
}

/* ==========================================================================
   十、底部 CTA
   ========================================================================== */

.sv-cta{ margin-top:30px; }

@media (min-width:768px){ .sv-cta{ margin-top:48px; } }

.sv-cta__in{
  position:relative; overflow:hidden; border-radius:16px; padding:30px 22px;
  background:linear-gradient(120deg,#0b2b4f 0%, #143d7d 55%, #0095ef 100%);
  text-align:center; color:#fff;
}

.sv-cta__in::before{
  content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%;
  background:rgba(255,255,255,.07);
}

.sv-cta__in h3{ position:relative; margin:0; font-size:22px; font-weight:700; }

.sv-cta__in p{
  position:relative; margin:12px auto 0; max-width:660px;
  font-size:14.5px; line-height:1.85; color:rgba(255,255,255,.82);
}

.sv-cta__in a{
  position:relative; display:inline-flex; align-items:center; gap:6px; margin-top:22px;
  height:44px; padding:0 28px; border-radius:999px; background:#fff; color:var(--sv-ink);
  font-size:15px; font-weight:700; transition:transform .25s var(--sv-ease);
}

.sv-cta__in a:hover{ transform:translateY(-2px); text-decoration:none; }

@media (min-width:768px){ .sv-cta__in{ padding:44px 40px; } .sv-cta__in h3{ font-size:28px; } }

/* ==========================================================================
   十一、返回顶部
   ========================================================================== */

.sv-top{
  position:fixed; right:18px; bottom:26px; z-index:1500;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; color:var(--sv-ink);
  background:rgba(255,255,255,.94); border:1px solid var(--sv-line);
  box-shadow:0 6px 20px rgba(11,43,79,.16);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .28s var(--sv-ease), transform .28s var(--sv-ease), background .2s;
}

.sv-top.is-show{ opacity:1; visibility:visible; transform:none; }

.sv-top:hover{ background:var(--sv-brand); border-color:var(--sv-brand); color:#fff; }

@media (max-width:767px){
  .sv-top{ right:14px; bottom:20px; width:42px; height:42px; }
}

/* ==========================================================================
   十二、移动端微调（页头页脚由 dynamic.css 接管，这里只管内容层）
   ========================================================================== */

@media (max-width:767px){
  .sv-hero__title{ font-size:26px; }
  .sv-hero__stats{ flex-wrap:wrap; gap:16px 22px; }
  .sv-stat__num{ font-size:22px; }
  .sv-sec__hd h2{ font-size:20px; }
  .sv-card{ padding:18px 16px; }
  .sv-btn{ height:40px; padding:0 18px; font-size:14px; }
  .sv-cmp__row > div{ padding:12px 14px; font-size:13.5px; }
}

@media (min-width:768px) and (max-width:1099px){
  .sv-cards{ grid-template-columns:repeat(2,1fr); }
}

/* ==========================================================================
   十三、无障碍：降低动效偏好
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .sv-card, .sv-btn, .sv-top, .sv-card::before, .sv-faq summary::after{ transition:none; }
  .sv-card:hover{ transform:none; }
}

/* ==========================================================================
   十四、滚动入场动画
   JS 给 <html> 加 .sv-anim 后，.sv-rv 初始隐藏，进入视口加 .is-in 浮现；
   无 JS / 减少动效偏好时全部直接可见，内容不受影响。
   ========================================================================== */

.sv-anim .sv-rv{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s var(--sv-ease), transform .7s var(--sv-ease);
  transition-delay:var(--d, 0s);
  will-change:opacity, transform;
}

.sv-anim .sv-rv.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .sv-anim .sv-rv{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   十五、通栏驿站：全宽图文横幅，滚动节奏中的视觉休息区
   一页只放一条，压在深蓝遮罩下的大图 + 一句大字，左右通栏。
   ========================================================================== */

.sv-band{
  position:relative; margin-top:46px;
  background-size:cover; background-position:center;
}

@media (min-width:768px){ .sv-band{ margin-top:60px; } }

.sv-band__mask{
  position:absolute; inset:0;
  background:linear-gradient(96deg, rgba(11,43,79,.94) 8%, rgba(11,43,79,.82) 46%, rgba(11,43,79,.42) 100%);
}

.sv-band__in{ position:relative; padding:44px 0; }

@media (min-width:768px){ .sv-band__in{ padding:64px 0; } }

.sv-band__kick{
  display:inline-block; padding:5px 15px; border-radius:999px;
  border:1px solid rgba(255,255,255,.42); color:rgba(255,255,255,.92);
  font-size:12px; letter-spacing:3px;
}

.sv-band__t{
  margin:16px 0 0; max-width:840px;
  font-size:24px; line-height:1.45; font-weight:700; color:#fff; letter-spacing:.4px;
}

.sv-band__d{
  margin:13px 0 0; max-width:660px;
  font-size:14.5px; line-height:1.95; color:rgba(255,255,255,.85);
}

.sv-band__btn{
  display:inline-flex; align-items:center; margin-top:24px; height:42px; padding:0 25px;
  border-radius:999px; background:#fff; color:var(--sv-ink);
  font-size:14.5px; font-weight:700;
  transition:transform .25s var(--sv-ease), box-shadow .25s var(--sv-ease);
}

.sv-band__btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.28); text-decoration:none; }

@media (min-width:768px){
  .sv-band__t{ font-size:32px; }
  .sv-band__d{ font-size:15.5px; }
}

/* ==========================================================================
   十六、插画卡：图上文下（细节区 / 行业场景区）
   ========================================================================== */

.sv-figs{ display:grid; gap:14px; }

@media (min-width:640px){ .sv-figs{ grid-template-columns:repeat(2,1fr); } }

@media (min-width:1000px){ .sv-figs{ grid-template-columns:repeat(3,1fr); gap:18px; } }

.sv-figs--4{ display:grid; }

@media (min-width:1000px){ .sv-figs--4{ grid-template-columns:repeat(4,1fr); } }

/* 行业场景卡：4 列窄卡配 4:3 图框，与细节区的 3:1 区分开 */

.sv-figs--4 .sv-fig__pic{ aspect-ratio:4/3; }

.sv-fig{
  margin:0; display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--sv-line); border-radius:var(--sv-r);
  transition:transform .3s var(--sv-ease), box-shadow .3s var(--sv-ease), border-color .3s var(--sv-ease);
}

.sv-fig:hover{ transform:translateY(-4px); box-shadow:var(--sv-sh-lg); border-color:#cfe4f8; }

.sv-fig__pic{ display:block; aspect-ratio:3/1; overflow:hidden; background:var(--sv-wash); }

.sv-fig__pic img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s var(--sv-ease);
}

.sv-fig:hover .sv-fig__pic img{ transform:scale(1.05); }

.sv-fig figcaption{ padding:22px 19px 26px; }

.sv-fig b{ display:block; font-size:15.5px; color:var(--sv-ink); }

.sv-fig figcaption span{ display:block; margin-top:9px; font-size:13px; line-height:1.8; color:var(--sv-sub); }

/* ==========================================================================
   十七、图文左右：一侧插画/照片 + 一侧信息框
   ========================================================================== */

.sv-duo{
  display:grid; background:#fff; overflow:hidden;
  border:1px solid var(--sv-line); border-radius:16px; box-shadow:var(--sv-sh);
}

.sv-duo__pic{ margin:0; position:relative; min-height:210px; }

.sv-duo__pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

.sv-duo__body{ padding:22px 20px 26px; }

.sv-duo__lead{ margin:0 0 14px; font-size:14.5px; line-height:1.95; color:var(--sv-sub); }

@media (min-width:860px){
  .sv-duo{ grid-template-columns:11fr 13fr; }
  .sv-duo__pic{ min-height:0; }
  .sv-duo__body{ padding:36px 40px 38px; }
  .sv-duo--rev .sv-duo__pic{ order:2; }
}

.sv-duo .sv-mods{ gap:8px; margin-top:4px; }

.sv-duo .sv-note{ margin-top:16px; }

/* 配图高度减半：图片上下留白、垂直居中，适合竖长原图 */

.sv-duo--half .sv-duo__pic{ background:var(--sv-wash); min-height:230px; }

.sv-duo--half .sv-duo__pic img{ top:24%; height:52%; }

/* ==========================================================================
   十七·补、交付清单：图标 + 名称 + 一句话说明的图文混排卡
   ========================================================================== */

.sv-dls{ display:grid; gap:12px; }

@media (min-width:640px){ .sv-dls{ grid-template-columns:repeat(2,1fr); } }

@media (min-width:1000px){ .sv-dls{ grid-template-columns:repeat(4,1fr); } }

.sv-dl{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  padding:18px 16px 16px; background:var(--sv-wash);
  border:1px solid var(--sv-line); border-radius:12px;
  transition:transform .28s var(--sv-ease), box-shadow .28s var(--sv-ease),
             border-color .28s var(--sv-ease), background .2s;
}

.sv-dl:hover{ transform:translateY(-3px); background:#fff; border-color:#cfe4f8; box-shadow:var(--sv-sh); }

.sv-dl__ico{
  display:block; margin-bottom:10px;
  background:none; border:0; color:var(--sv-brand);   /* 同样去掉背景框 */
  transition:transform .28s var(--sv-ease);
}

.sv-dl:hover .sv-dl__ico{ transform:scale(1.08); }

.sv-dl__ico svg{ width:26px; height:26px; overflow:visible; }

.sv-dl b{ font-size:15px; font-weight:600; color:var(--sv-ink); }

.sv-dl span:last-child{ font-size:12.5px; line-height:1.7; color:var(--sv-sub); }

/* ==========================================================================
   十八、hover 增强：信息框、步骤、标签、FAQ 都要有回应
   ========================================================================== */

.sv-mod, .sv-step{
  transition:transform .28s var(--sv-ease), box-shadow .28s var(--sv-ease), border-color .28s var(--sv-ease);
}

.sv-mod::before{ transition:transform .28s var(--sv-ease), background .2s; }

.sv-mod:hover{ transform:translateY(-2px); border-color:#cfe4f8; box-shadow:var(--sv-sh); }

.sv-mod:hover::before{ transform:scale(1.45); }

.sv-step:hover{ transform:translateY(-3px); border-color:#cfe4f8; box-shadow:var(--sv-sh); }

.sv-step__n{ transition:transform .28s var(--sv-ease); }

.sv-step:hover .sv-step__n{ transform:scale(1.12); }

.sv-tag{ transition:border-color .2s, color .2s, transform .2s var(--sv-ease); }

.sv-tag:hover{ border-color:var(--sv-brand); color:var(--sv-brand-d); transform:translateY(-1px); }

.sv-faq details{ transition:border-color .25s var(--sv-ease), box-shadow .25s var(--sv-ease); }

.sv-faq details:hover{ border-color:#cfe4f8; box-shadow:var(--sv-sh); }

/* 对比表「贤哲列」：浅蓝底 + 深色字，保证可读性（避免彩底彩字） */

.sv-cmp__row .sv-hi{ background:#eef7ff; color:var(--sv-ink); }

@media (prefers-reduced-motion:reduce){
  .sv-mod, .sv-step, .sv-tag, .sv-fig, .sv-fig__pic img{ transition:none; }
  .sv-mod:hover, .sv-step:hover, .sv-fig:hover{ transform:none; }
}

/* ==========================================================================
   九、案例栏目「访问授权」弹窗 .cs-auth（2026-10-10c）
   --------------------------------------------------------------------------
   DOM 由 assets/js/site.js 动态注入（不写死在 HTML 里）；未注入、未打开时
   不占版面、不可聚焦。配色/圆角全部锚到本文件 :root 的 cs 变量与
   .cs-side__btn / .cs-side__notice 同款色系。
   ========================================================================== */

.cs-auth{
  position:fixed; inset:0; z-index:2000;           /* 压过 .cs-top(1600) */
  display:flex; align-items:center; justify-content:center; padding:22px;
  background:rgba(11,43,79,.55);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .32s var(--cs-ease), visibility .32s var(--cs-ease);
}

.cs-auth.is-open{ opacity:1; visibility:visible; pointer-events:auto; }

.cs-auth__panel{
  position:relative; width:100%; max-width:440px;
  max-height:calc(100vh - 44px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:26px 26px 20px; border-radius:var(--cs-r-lg);
  background:#fff; box-shadow:0 24px 60px rgba(11,43,79,.30);
  opacity:0; transform:translateY(16px);
  transition:opacity .32s var(--cs-ease), transform .32s var(--cs-ease);
}

.cs-auth.is-open .cs-auth__panel{ opacity:1; transform:none; }

.cs-auth__x{
  position:absolute; top:10px; right:10px; width:34px; height:34px;
  border:0; border-radius:var(--cs-r-sm); background:transparent; cursor:pointer;
  color:var(--cs-faint); font-size:22px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:color .2s, background .2s;
}

.cs-auth__x:hover{ color:var(--cs-ink); background:var(--cs-wash); }

.cs-auth__title{
  margin:0 34px 6px 0; font-size:19px; line-height:1.4; font-weight:700; color:var(--cs-ink);
}

.cs-auth__desc{ margin:0 0 16px; font-size:13.5px; line-height:1.75; color:var(--cs-sub); }

.cs-auth__label{
  display:block; margin-bottom:7px; font-size:12.5px; font-weight:600; color:var(--cs-sub);
}

.cs-auth__input{
  width:100%; box-sizing:border-box; padding:11px 13px;
  border:1px solid var(--cs-line); border-radius:var(--cs-r-sm);
  background:#fbfdff; color:var(--cs-ink); font-size:15px; font-family:inherit;
  transition:border-color .2s, box-shadow .2s, background .2s;
}

.cs-auth__input::placeholder{ color:#b6c2cf; }

.cs-auth__input:focus{
  outline:0; background:#fff; border-color:var(--cs-brand);
  box-shadow:0 0 0 3px rgba(0,149,239,.15);
}

.cs-auth__input.is-err{ border-color:#e6462e; background:#fff7f6; }

.cs-auth__input.is-err:focus{
  border-color:#e6462e; box-shadow:0 0 0 3px rgba(230,70,46,.15);
}

.cs-auth__err{
  display:none; margin:9px 0 0; font-size:12.5px; line-height:1.6; color:#e6462e;
}

.cs-auth__err.is-show{ display:block; }

/* 关掉弹窗里所有「只读文本」的插入光标：浏览器开启「插入符浏览」（F7）后，
   点一下正文就会在只读文字里留一根闪烁竖线，看着像页面出了 bug。
   逐条列出元素，切勿写成 .cs-auth__panel{caret-color:transparent}
   ——caret-color 会继承，那样连密码框的输入光标一起没了，用户看不到输入位置。 */
.cs-auth__title,
.cs-auth__desc,
.cs-auth__label,
.cs-auth__err,
.cs-auth__notice,
.cs-auth__lawHd,
.cs-auth__law,
.cs-auth__law li,
.cs-auth__btn{ caret-color:transparent; }

/* 密码框必须保留正常光标 */
.cs-auth__input{ caret-color:var(--cs-brand); }

.cs-auth__btns{ display:flex; gap:10px; margin-top:16px; }

.cs-auth__btn{
  flex:1; padding:10px 0; border-radius:var(--cs-r-pill); cursor:pointer;
  font-size:13.5px; font-weight:600; font-family:inherit;
  transition:.24s var(--cs-ease);
}

/* 主按钮：复刻 .cs-side__btn（品牌渐变 + 白字 + 胶囊） */
.cs-auth__btn--main{
  flex:1.35; border:0; color:#fff;
  background:linear-gradient(90deg,var(--cs-brand),#0b7fd0);
  box-shadow:0 8px 18px rgba(0,149,239,.26);
}

.cs-auth__btn--main:hover{ transform:translateY(-2px); }

/* 次按钮：白底描边 */
.cs-auth__btn--ghost{
  border:1px solid var(--cs-line); background:#fff; color:var(--cs-sub);
}

.cs-auth__btn--ghost:hover{ border-color:#cfe4f8; color:var(--cs-brand); }

.cs-auth__btn.is-busy{ opacity:.72; pointer-events:none; transform:none; }

/* 法律声明块：与 .cs-side__notice（严正声明）同色系
   默认收起（只显示标题行 + 箭头），点标题展开 —— 避免 5 条正文把弹窗撑高
   字号按视口自适应，各档都取该档最小可读值（窄屏 11px → 宽屏 12.5px） */
.cs-auth__notice{
  margin-top:14px; padding:8px 13px; border-radius:var(--cs-r);
  background:#fff8f2; border:1px solid #f6e2d0; color:#8a5a33;
  font-size:clamp(11px, 0.42vw + 9.6px, 12.5px);
  line-height:1.8;
}

/* 标题行 = 展开开关 */
.cs-auth__lawHd{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; margin:0; padding:2px 0; background:none; border:0;
  font:inherit; font-weight:600; text-align:left; cursor:pointer;
  color:#c1541f; font-size:clamp(11.5px, 0.42vw + 10.1px, 13px);
  user-select:none; -webkit-user-select:none;   /* 连点标题不选中文字，避免出现选区/光标错觉 */
}
.cs-auth__lawHd:hover{ color:#a8410f; }
.cs-auth__lawHd:focus-visible{ outline:2px solid var(--cs-brand); outline-offset:2px; border-radius:4px; }

/* 箭头：CSS 三角，展开时翻 180° */
.cs-auth__arrow{
  flex:none; width:0; height:0;
  border-left:4.5px solid transparent; border-right:4.5px solid transparent;
  border-top:5px solid currentColor;
  transition:transform .2s ease;
}
.cs-auth__lawHd[aria-expanded="true"] .cs-auth__arrow{ transform:rotate(180deg); }

/* 展开区：限高 + 内部细滚动，弹窗总高不受条文长度影响 */
.cs-auth__law{
  margin-top:7px; padding-right:4px;
  max-height:min(32vh, 176px); overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:#e3c4a8 transparent;
}
.cs-auth__law::-webkit-scrollbar{ width:5px; }
.cs-auth__law::-webkit-scrollbar-thumb{ background:#e3c4a8; border-radius:4px; }

/* ⚠️ reset_css.css 第 16 行有 ul,ol{list-style-type:none}，编号会被清掉，
   这里必须显式写明 list-style 才能看到 1、2、3 */
.cs-auth__notice ol{
  margin:0; padding-left:20px;
  /* 写全称属性不用简写：jsdom/部分老浏览器对 list-style 简写解析不一致 */
  list-style-type:decimal;
  list-style-position:outside;
}

.cs-auth__notice ol li{
  margin-bottom:6px; padding-left:2px;   /* 每条独立成段，段间留白 */
}

.cs-auth__notice ol li:last-child{ margin-bottom:0; }

.cs-auth__notice ol li::marker{ color:#c1541f; font-weight:600; }

/* 窄屏：编号更贴左，给文字多让出宽度 */
@media (max-width:767px){
  .cs-auth__notice{ padding:7px 11px; line-height:1.78; }
  .cs-auth__notice ol{ padding-left:17px; }
  .cs-auth__notice ol li{ margin-bottom:5px; }
}

@media (prefers-reduced-motion:reduce){
  .cs-auth__arrow{ transition:none; }
}

/* 弹窗打开时锁定页面滚动（与站内 .bodyhidden 互不干扰） */
body.cs-auth-open{ overflow:hidden; }

@media (max-width:767px){
  .cs-auth{ padding:14px; }
  .cs-auth__panel{ padding:22px 18px 16px; max-height:calc(100vh - 28px); }
  .cs-auth__title{ font-size:17px; }
  .cs-auth__btns{ flex-direction:column; }
  .cs-auth__btn{ flex:none; width:100%; }
  .cs-auth__btn--main{ order:-1; }
}

@media (prefers-reduced-motion:reduce){
  .cs-auth, .cs-auth__panel{ transition:none !important; }
  .cs-auth__panel{ opacity:1; transform:none; }
  .cs-auth__btn--main:hover{ transform:none; }
}