@charset "utf-8";
/* ==========================================================================
   CASE 列表页样式  case.css
   配套模板：template/dafeult/caselist.html
   --------------------------------------------------------------------------
   为什么单独一份：
   /case/ 之前和产品列表页共用 product.css + 内联的 .plm-* 模块，
   于是案例页顶着「产品分类页」的骨架 —— 左侧分类栏、规格标签、选型四问，
   跟案例内容完全对不上。这份样式只服务 .case-page，不引用、不覆盖
   product.css 的任何规则，产品列表页一行都不用改。

   视觉语言与 product.css / blog.css / about.css 完全同一套：
     卡面      白底 + 1px #eceef1 边框 + 14px 圆角 + 轻投影
     hover     上浮 4px、阴影加深、标题转橙
     字体      标题 800 / 正文 14.5–15.5px / 弱化文字 #6b7178
     强调色    --cs-brand（与全站 var(--color) 同为 #f08519）
     分页      42px 方块、10px 圆角、当前页橙底白字
     底色      正文区 #f7f8fa（与博客列表同色），banner 与卡片保持白/深色

   和产品列表页不同的只是「排法」，不是「皮肤」：
     1) 没有左侧分类栏，内容按 .l-wrap 通栏走；
     2) 卡片三列（与产品页同列数），第一篇横向通栏占满一行；
     3) 卡片信息是「日期 + 标题 + 摘要 + 查看」，没有规格标签和报价按钮；
     4) 内容区多了「每个档案记什么」「项目用到的系统」两块。

   所有规则都以 .case-page 开头，类名统一 .cs- 前缀。
   改 banner 高度/字号时四处要同步：about.css .ab-hero、product.css .pl-hero、
   blog.css .bl-hero、本文件 .cs-hero。
   ========================================================================== */

:root{
  --cs-ink:#131415;
  --cs-ink2:#3c4248;
  --cs-mute:#6b7178;
  --cs-dim:#8b9097;
  --cs-line:#eceef1;
  --cs-soft:#f7f8fa;
  --cs-brand:#f08519;
  --cs-brand-d:#d96f0b;
  --cs-brand-soft:#fdf3e8;
}

/* --------------------------------------------------------------------------
   0. 基础
   list.css 第 13 行有 article a{text-decoration:underline}，
   本页卡片整体是 <a>，不清掉的话标题、摘要、按钮全带下划线
   -------------------------------------------------------------------------- */
.case-page a,
.case-page a:hover,
.case-page a:focus{text-decoration:none}
.case-page{background:#fff;color:var(--cs-ink2)}
.case-page img{max-width:100%}
/* style.css 给所有标题加了 text-transform:capitalize，英文会被改成
   Each Word Capitalised，这里还原后台填写的原始大小写 */
.case-page h1,
.case-page h2,
.case-page h3{text-transform:none}

/* 内容列：不再自设 1240，直接用站点统一的 .l-wrap（1600 / 左右 70），
   这样 banner 文案、面包屑、卡片与产品页、博客页落在同一条左右边线上 */
.case-page .cs-wrap{max-width:none;margin:0}

/* ==========================================================================
   1. 首屏 banner
   --------------------------------------------------------------------------
   数值照抄 product.css 的 .pl-hero（同高、同遮罩、同字号），
   只有文案来源和产品页不同：描述1 没填时退回 SEO 描述，
   所以 CASE 栏目不会像现在这样 banner 里只有一个「CASE」。
   ========================================================================== */
.case-page .cs-hero{
  position:relative;overflow:hidden;background:#0d141a;
  display:flex;align-items:flex-end;
  min-height:clamp(300px,34vw,520px);
}
.case-page .cs-hero-media{position:absolute;inset:0;z-index:0}
.case-page .cs-hero-media img{
  position:absolute;inset:0;display:block;
  width:100% !important;max-width:100%;height:100% !important;
  object-fit:cover;object-position:center;
}
.case-page .cs-hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,13,18,.94) 0%,rgba(8,13,18,.66) 42%,rgba(8,13,18,.16) 100%);
}
.case-page .cs-hero-copy{
  position:relative;z-index:2;width:100%;
  padding-top:clamp(72px,11vw,150px);
  padding-bottom:clamp(26px,3vw,48px);
}
.case-page .cs-hero-in{max-width:none;margin:0}
.case-page .cs-hero-h1{
  margin:0 0 14px;max-width:20em;
  font-size:clamp(28px,3.6vw,50px);line-height:1.12;letter-spacing:-.02em;
  font-weight:800;color:#fff;
}
.case-page .cs-hero-sub{
  margin:0;max-width:44em;
  font-size:clamp(15px,1.25vw,18px);line-height:1.7;
  color:rgba(255,255,255,.82);
  text-shadow:0 1px 12px rgba(8,13,18,.45);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.case-page .cs-hero-sub:empty{display:none}
.case-page .cs-hero-copy:has(.cs-hero-sub:empty) .cs-hero-h1{margin-bottom:0}

/* ==========================================================================
   2. 面包屑条：与 About / 产品 / 博客列表同一条
   ========================================================================== */
.case-page .cs-crumb{
  background:#FAFAFA;border-top:1px solid #eceef0;border-bottom:1px solid #eceef0;
}
.case-page .cs-crumb .l-wrap{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:14px;padding-bottom:14px;
}
.case-page .cs-crumb .banner-title-h1{
  font-size:20px;font-weight:700;line-height:1.2;margin:0;
  text-transform:uppercase;color:var(--fontcolortitle,#131415);
}
.case-page .cs-crumb .banner-breadcrumbs{
  min-width:0;max-width:64%;text-align:right;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-size:14px;line-height:1.5;color:#6b7178;
}
.case-page .cs-crumb .banner-breadcrumbs a{color:inherit;transition:color .2s linear}
.case-page .cs-crumb .banner-breadcrumbs a:hover{color:var(--cs-brand)}

/* ==========================================================================
   3. 小标签 / 小节标题（全页共用）
   --------------------------------------------------------------------------
   与 blog.css 的 .bl-bar（22px 标题 + 14px 说明）、.bl-widget-title
   （12px 大写小标题）同一套字号，不再用 30px+ 的大标题和橙色杠，
   否则案例页会比其它栏目「重」一头。
   ========================================================================== */
.case-page .cs-kicker{
  margin:0 0 8px;
  font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#a8aeb5;
}
.case-page .cs-sec-h{
  margin:0;font-size:22px;line-height:1.35;letter-spacing:-.01em;
  font-weight:800;color:var(--cs-ink);
}
.case-page .cs-sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:24px;
}
.case-page .cs-sec-note{
  margin:0 0 3px;max-width:32em;text-align:right;
  font-size:14px;line-height:1.6;color:var(--cs-mute);
}
.case-page .cs-sec-head--center{justify-content:flex-start}
.case-page .cs-all{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:3px;
  font-size:13.5px;font-weight:700;color:var(--cs-brand-d);white-space:nowrap;
}
.case-page .cs-all .iconfont{font-size:11px;transition:transform .22s ease}
.case-page .cs-all:hover .iconfont{transform:translateX(4px)}

/* ==========================================================================
   4. 开场白 + 硬指标
   --------------------------------------------------------------------------
   底色与卡片区一样是 #f7f8fa，右侧指标做成白卡（同 .bl-widget 的卡面），
   左边就是一段说明，不额外套盒子。
   ========================================================================== */
.case-page .cs-lead{background:var(--cs-soft);padding:44px 0 34px}
.case-page .cs-lead-in{
  display:grid;grid-template-columns:minmax(0,1fr) 330px;
  gap:clamp(28px,4vw,56px);align-items:start;
}
.case-page .cs-lead-h{
  margin:0 0 12px;max-width:24em;
  font-size:clamp(20px,2vw,27px);line-height:1.3;letter-spacing:-.015em;
  font-weight:800;color:var(--cs-ink);
}
.case-page .cs-lead-p{margin:0;max-width:52em;font-size:15.5px;line-height:1.8;color:var(--cs-mute)}
.case-page .cs-facts{
  padding:6px 22px;
  background:#fff;border:1px solid var(--cs-line);border-radius:14px;
  box-shadow:0 1px 2px rgba(15,20,24,.05);
}
.case-page .cs-facts li{
  display:flex;align-items:baseline;gap:14px;
  padding:15px 0;border-bottom:1px solid #f0f2f4;
}
.case-page .cs-facts li:last-child{border-bottom:0}
.case-page .cs-facts b{
  flex:none;min-width:88px;
  font-size:21px;line-height:1.15;font-weight:800;letter-spacing:-.02em;color:var(--cs-ink);
}
.case-page .cs-facts b em{font-style:normal;font-size:.62em;font-weight:700;color:var(--cs-brand);margin-left:1px}
.case-page .cs-facts span{font-size:13.5px;line-height:1.55;color:var(--cs-mute)}

/* ==========================================================================
   5. 项目卡片
   --------------------------------------------------------------------------
   卡面参数逐条对齐 product.css .pl-card / blog.css .newsitem：
   白底、1px #eceef1、14px 圆角、0 1px 2px 轻投影，hover 上浮 4px。
   第一篇（最新）横向通栏：左图右文；其余两列：上图下文。
   ========================================================================== */
.case-page .cs-files{background:var(--cs-soft);padding:0 0 clamp(38px,4.2vw,60px)}
.case-page .cs-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;margin:0;padding:0;list-style:none;
}
/* 1024–1200 之间三列会把标题挤成三行，退回两列 */
@media (max-width:1200px){
  .case-page .cs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.case-page .cs-card{
  min-width:0;
  background:#fff;border:1px solid var(--cs-line);border-radius:14px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(15,20,24,.05);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,border-color .3s ease;
}
.case-page .cs-card:hover{
  transform:translateY(-4px);border-color:#dfe3e8;
  box-shadow:0 22px 40px -24px rgba(15,20,24,.42),0 2px 6px rgba(15,20,24,.05);
}
.case-page .cs-link{
  display:flex;flex-direction:column;height:100%;color:inherit;
}
.case-page .cs-shot{
  display:block;position:relative;padding-bottom:62%;overflow:hidden;background:#eef0f2;
}
.case-page .cs-shot img{
  position:absolute;top:0;left:0;display:block;
  width:100% !important;height:100% !important;object-fit:cover;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.case-page .cs-card:hover .cs-shot img{transform:scale(1.05)}
.case-page .cs-body{
  display:flex;flex-direction:column;flex:1;
  padding:20px 22px 22px;
}
.case-page .cs-date{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--cs-dim);
}
.case-page .cs-date .iconfont{font-size:13px;color:#c1c7ce}
.case-page .cs-title{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  margin:10px 0 0;
  font-size:17.5px;line-height:1.45;font-weight:700;letter-spacing:-.005em;
  color:var(--cs-ink);
  transition:color .2s ease;
}
.case-page .cs-card:hover .cs-title{color:var(--cs-brand-d)}
.case-page .cs-desc{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  margin:10px 0 0;font-size:14.5px;line-height:1.68;color:var(--cs-mute);
}
.case-page .cs-desc:empty{display:none}
.case-page .cs-go{
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:16px;
  font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--cs-brand-d);
}
.case-page .cs-go .iconfont{font-size:11px;transition:transform .25s ease}
.case-page .cs-card:hover .cs-go .iconfont{transform:translateX(4px)}
.case-page .cs-link:focus-visible{outline:2px solid var(--cs-brand);outline-offset:3px;border-radius:14px}

/* 5.1 第一篇：横向通栏（左图 58% / 右文 42%），参数照 blog.css 的通栏大卡 */
.case-page .cs-card:first-child{grid-column:1 / -1}
.case-page .cs-card:first-child .cs-link{
  flex-direction:row;align-items:stretch;
  display:grid;grid-template-columns:1.06fr 1fr;
}
.case-page .cs-card:first-child .cs-shot{padding-bottom:0;min-height:320px;height:100%}
.case-page .cs-card:first-child .cs-body{
  padding:34px 38px;justify-content:center;
}
.case-page .cs-card:first-child .cs-title{
  font-size:clamp(20px,1.7vw,27px);line-height:1.32;letter-spacing:-.015em;
  -webkit-line-clamp:4;
}
.case-page .cs-card:first-child .cs-desc{
  font-size:15.5px;line-height:1.7;-webkit-line-clamp:4;margin-top:12px;
}
.case-page .cs-card:first-child .cs-go{margin-top:0;padding-top:22px;font-size:13.5px}

/* ==========================================================================
   6. 分页：站点原有 pagebar 结构，只换皮
   ========================================================================== */
.case-page .cs-pagebar{margin-top:36px}
.case-page .cs-pagebar .pagination{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;
}
.case-page .cs-pagebar .pagination a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 13px;
  border:1px solid #e3e6ea;border-radius:10px;background:#fff;
  font-size:14px;font-weight:700;color:#414850;
  transition:border-color .2s ease,color .2s ease,background .2s ease,box-shadow .2s ease;
}
.case-page .cs-pagebar .pagination a:hover{border-color:var(--cs-brand);color:var(--cs-brand-d)}
.case-page .cs-pagebar .pagination .page-num-current,
.case-page .cs-pagebar .pagination a.page-num-current:hover{
  background:var(--cs-brand);border-color:var(--cs-brand);color:#fff;
  box-shadow:0 10px 20px -12px rgba(240,133,25,.9);
}
.case-page .cs-empty{
  padding:56px 20px;border:1px dashed #dfe3e8;border-radius:14px;background:#fff;
  text-align:center;font-size:15px;color:var(--cs-mute);
}

/* ==========================================================================
   7. 每个项目档案里有什么：三张白卡（同 .bl-widget 卡面）
   ========================================================================== */
.case-page .cs-anatomy{
  padding:clamp(40px,4.4vw,64px) 0;
  background:var(--cs-soft);
  border-top:1px solid var(--cs-line);
}
.case-page .cs-ana{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;margin:0;padding:0;list-style:none;
}
.case-page .cs-ana li{
  padding:26px 24px 24px;
  background:#fff;border:1px solid var(--cs-line);border-radius:14px;
  box-shadow:0 1px 2px rgba(15,20,24,.05);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,border-color .3s ease;
}
.case-page .cs-ana li:hover{
  transform:translateY(-4px);border-color:#dfe3e8;
  box-shadow:0 22px 40px -24px rgba(15,20,24,.42),0 2px 6px rgba(15,20,24,.05);
}
.case-page .cs-ana-no{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:22px;padding:0 8px;margin-bottom:14px;border-radius:6px;
  background:var(--cs-brand-soft);color:var(--cs-brand-d);
  font-size:11px;font-weight:800;letter-spacing:.1em;
}
.case-page .cs-ana h3{margin:0 0 8px;font-size:17px;line-height:1.45;font-weight:700;color:var(--cs-ink)}
.case-page .cs-ana p{margin:0;font-size:14.5px;line-height:1.72;color:var(--cs-mute)}

/* ==========================================================================
   8. 项目里用到的系统：4 格白卡，与产品列表卡片同款卡面
   ========================================================================== */
.case-page .cs-systems{background:var(--cs-soft);padding:0 0 clamp(46px,5vw,74px)}
.case-page .cs-sys{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:26px;margin:0;padding:0;list-style:none;
}
.case-page .cs-sys li{
  background:#fff;border:1px solid var(--cs-line);border-radius:14px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(15,20,24,.05);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,border-color .3s ease;
}
.case-page .cs-sys li:hover{
  transform:translateY(-4px);border-color:#dfe3e8;
  box-shadow:0 22px 40px -24px rgba(15,20,24,.42),0 2px 6px rgba(15,20,24,.05);
}
.case-page .cs-sys a{display:block;color:inherit}
.case-page .cs-sys-img{
  display:block;position:relative;padding-bottom:75%;overflow:hidden;background:#f2f4f6;
}
.case-page .cs-sys-img img{
  position:absolute;top:0;left:0;display:block;
  width:100% !important;height:100% !important;object-fit:cover;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.case-page .cs-sys li:hover .cs-sys-img img{transform:scale(1.05)}
.case-page .cs-sys-t{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  padding:14px 18px 16px;
  font-size:14.5px;line-height:1.5;font-weight:700;color:var(--cs-ink2);
  transition:color .2s ease;
}
.case-page .cs-sys li:hover .cs-sys-t{color:var(--cs-brand-d)}

/* ==========================================================================
   9. 结尾转化条：与 blog.css .bl-cta 同一块深色卡
   ========================================================================== */
.case-page .cs-cta{background:var(--cs-soft);padding:0 0 clamp(50px,5.5vw,84px)}
.case-page .cs-cta-in{
  position:relative;overflow:hidden;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:36px;
  padding:clamp(30px,3.6vw,48px) clamp(26px,3.4vw,52px);
  border-radius:18px;
  background:#0f1418;
  color:#fff;
}
.case-page .cs-cta-in::before{
  content:"";position:absolute;left:-90px;bottom:-140px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,133,25,.22) 0%,rgba(240,133,25,0) 70%);
  pointer-events:none;
}
.case-page .cs-cta-eye{
  margin:0;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#f7a55a;
}
.case-page .cs-cta-in h2{
  margin:12px 0 0;max-width:22em;
  font-size:clamp(21px,2.1vw,30px);line-height:1.24;letter-spacing:-.015em;
  font-weight:800;color:#fff;
}
.case-page .cs-cta-in p:not(.cs-cta-eye){
  margin:12px 0 0;max-width:620px;
  font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.66);
}
.case-page .cs-cta-act{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:10px;min-width:224px;
}
.case-page .cs-cta-act a{
  display:flex;align-items:center;justify-content:center;
  height:50px;padding:0 30px;border-radius:999px;
  font-size:14.5px;font-weight:700;white-space:nowrap;
  transition:background .25s ease,border-color .25s ease,color .25s ease,
             box-shadow .25s ease,transform .25s ease;
}
/* 复用页脚现成的询盘弹窗（guestbook.js 直接绑定 .company_subscribe .button） */
.case-page .cs-cta-act .company_subscribe{display:block}
.case-page .cs-cta-act .company_subscribe .button{
  background:linear-gradient(90deg,#f08519 0%,#e0700c 100%);
  color:#fff;font-size:15px;
}
.case-page .cs-cta-act .company_subscribe .button:hover{
  box-shadow:0 18px 30px -16px rgba(240,133,25,.95);transform:translateY(-1px);
}
.case-page .cs-cta-ghost{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.22);
}
.case-page .cs-cta-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}

/* ==========================================================================
   10. 断点
   ========================================================================== */
/* 右侧 #ab-mkf 固定客服浮标（宽 74、right 18）在 768 以上一直显示。
   内容列 = min(视口,1600) - 左右 70，浮标左边缘 = 视口 - 92，
   所以视口小于约 1644 时两者必然重叠。这个区间内容整体右缩 34px 让开，
   面包屑条同步（.l-wrap 自身还有 70 内边距，所以写 104）。
   768 以下浮标隐藏，全部还原。 */
@media (max-width:1660px){
  .case-page .cs-wrap{padding-right:34px}
  .case-page .cs-crumb .l-wrap{padding-right:104px}
}

@media (max-width:1280px){
  .case-page .cs-lead-in{grid-template-columns:minmax(0,1fr) 288px;gap:32px}
}

@media (max-width:1024px){
  /* 平板：指标卡从右栏掉到正文下面，改成三等分横排，
     不要变成三条超宽的横线（左右全空、读起来断气） */
  .case-page .cs-lead-in{grid-template-columns:minmax(0,1fr)}
  .case-page .cs-facts{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    padding:18px 0;
  }
  .case-page .cs-facts li{
    display:block;padding:0 20px;
    border-bottom:0;border-left:1px solid #f0f2f4;
  }
  .case-page .cs-facts li:first-child{padding-left:22px;border-left:0}
  .case-page .cs-facts b{display:block;margin-bottom:3px}
  .case-page .cs-sys{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-page .cs-ana{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-page .cs-ana li:last-child{grid-column:1 / -1}
  .case-page .cs-card:first-child .cs-link{grid-template-columns:1fr 1fr}
  .case-page .cs-card:first-child .cs-shot{min-height:280px}
  .case-page .cs-card:first-child .cs-body{padding:28px}
}

/* ≤900：与 about.css .ab-hero-media / blog.css .bl-hero 同一个断点和高度，
   补上之后 7 个内页的 banner 在任何宽度都是同一高度 */
@media (max-width:900px){
  .case-page .cs-hero{min-height:clamp(280px,46vw,400px)}
  .case-page .cs-hero-h1{max-width:16em}
}

@media (max-width:768px){
  /* 768 以下 #ab-mkf 隐藏，不再需要给浮标让位 */
  .case-page .cs-wrap{padding-right:0}
  .case-page .cs-crumb .l-wrap{padding-right:15px}

  .case-page .cs-hero-copy{padding-top:60px;padding-bottom:22px}
  .case-page .cs-hero-h1{font-size:26px;line-height:1.16;margin-bottom:10px}
  .case-page .cs-hero-sub{font-size:14.5px;line-height:1.65;-webkit-line-clamp:4}
  .case-page .cs-crumb .l-wrap{padding-top:12px;padding-bottom:12px;gap:10px}
  .case-page .cs-crumb .banner-title-h1{font-size:16px}
  .case-page .cs-crumb .banner-breadcrumbs{font-size:12.5px;max-width:56%}

  .case-page .cs-lead{padding:32px 0 26px}
  /* 手机：指标回到上下堆叠 */
  .case-page .cs-facts{display:block;padding:6px 22px}
  .case-page .cs-facts li{
    display:flex;padding:14px 0;
    border-bottom:1px solid #f0f2f4;border-left:0;
  }
  .case-page .cs-facts li:first-child{padding-left:0}
  .case-page .cs-facts li:last-child{border-bottom:0}
  .case-page .cs-facts b{display:block;margin-bottom:0}
  .case-page .cs-sec-head{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:18px}
  .case-page .cs-sec-note{text-align:left}
  .case-page .cs-sec-h{font-size:20px}

  .case-page .cs-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  /* 手机上通栏大卡改回上图下文，横向并排会把图压得太窄 */
  .case-page .cs-card:first-child .cs-link{display:flex;flex-direction:column}
  .case-page .cs-card:first-child .cs-shot{padding-bottom:62%;min-height:0;height:auto}
  .case-page .cs-card:first-child .cs-body{padding:20px 22px 22px}
  .case-page .cs-card:first-child .cs-title{font-size:18px;-webkit-line-clamp:3}
  .case-page .cs-card:first-child .cs-desc{font-size:14.5px;margin-top:10px;-webkit-line-clamp:3}
  .case-page .cs-title{font-size:16.5px}

  .case-page .cs-ana{grid-template-columns:minmax(0,1fr);gap:16px}
  .case-page .cs-ana li:last-child{grid-column:auto}
  .case-page .cs-ana li{padding:22px 20px}
  .case-page .cs-sys{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .case-page .cs-sys-t{padding:12px 14px 14px;font-size:13.5px}

  .case-page .cs-pagebar{margin-top:26px}
  .case-page .cs-pagebar .pagination{gap:6px}
  .case-page .cs-pagebar .pagination a{min-width:36px;height:36px;padding:0 10px;font-size:13px}

  .case-page .cs-cta-in{padding:26px 20px;border-radius:14px;gap:22px}
  .case-page .cs-cta-act{width:100%;min-width:0}
  .case-page .cs-cta-act a,
  .case-page .cs-cta-act .company_subscribe .button{height:46px;padding:0 18px;font-size:14.5px}
}