@charset "utf-8";
/*-------------------- 基础布局 --------------------*/
.case-page { --case-blue: #246bfd; --case-blue-hover: color-mix(in srgb, var(--case-blue) 78%, #071b50 22%); --case-cyan: color-mix(in srgb, var(--case-blue) 62%, #fff 38%); --case-blue-soft: color-mix(in srgb, var(--case-blue) 9%, transparent); --case-blue-pale: color-mix(in srgb, var(--case-blue) 7%, #fff 93%); --case-ink: #0f172a; --case-copy: #475569; --case-muted: #64748b; --case-line: #dce5f2; --case-canvas: #f6f9fe; }
.case-banner {
  position: relative;
  /*用 clip 而非 hidden：hidden 会创建可滚动容器，装饰圆超出部分撑大可滚动区域，
     scrollIntoView 会把 banner 自身滚动 224px 导致图标栏下方出现空白；clip 只裁剪不可滚动。*/
  overflow: clip;
  padding: 1.25rem 0 1.5rem;
  /*与首页 home-hero 同套底色：右上蓝色主光晕 + 左上青色辅光晕 + 浅蓝画布。*/
  background: radial-gradient(48rem 34rem at 82% 40%, rgba(35, 112, 255, .16), transparent 68%),
    radial-gradient(30rem 24rem at 8% 20%, rgba(31, 201, 238, .08), transparent 72%),
    var(--case-canvas);
}
/*首屏区块内面包屑（结构/颜色/分隔符由全站统一 .common-breadcrumb 提供，此处仅保留页面间距）*/
.case-banner .common-breadcrumb { margin-bottom: .75rem; }
/*与首页 home-hero::before 一致的精细网格，右侧渐隐，为轮播留白让位。*/
.case-banner::before { content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none; background-image: linear-gradient(rgba(83, 116, 173, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(83, 116, 173, .08) 1px, transparent 1px); background-size: 3.25rem 3.25rem; -webkit-mask-image: linear-gradient(to right, #000, rgba(0, 0, 0, .3) 58%, transparent 94%); mask-image: linear-gradient(to right, #000, rgba(0, 0, 0, .3) 58%, transparent 94%); }
/*氛围层在背景网格之上、面包屑与轮播之下。*/
.case-banner > .container { position: relative; z-index: 2; }
/*---- 首屏氛围层：与首页 home-hero 同语言，位置按居中轮播适配 ----*/
.case-banner-atmosphere { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
/*右下同心圆环（首页 home-hero::after 同款），只露出内弧，衬托轮播右缘。*/
.case-banner-ring { position: absolute; right: -12rem; bottom: -22rem; width: 52rem; height: 52rem; border: 1px solid rgba(62, 132, 255, .13); border-radius: 50%; box-shadow: 0 0 0 6rem rgba(66, 136, 255, .025), 0 0 0 12rem rgba(66, 136, 255, .018); }
.case-banner-flow { position: absolute; width: 72rem; height: 16rem; border: 1px solid rgba(52, 134, 230, .11); border-radius: 50%; opacity: .68; filter: blur(.15rem); transform: rotate(-13deg); animation: caseBannerFlow 18s ease-in-out infinite alternate; }
.case-banner-flow::after { content: ''; position: absolute; inset: 2.2rem 4rem; border-top: 1px solid rgba(51, 184, 222, .13); border-radius: 50%; filter: drop-shadow(0 0 .7rem rgba(65, 177, 230, .16)); }
.case-banner-flow-a { top: 4%; left: -29rem; }
.case-banner-flow-b { right: -25rem; bottom: 0; transform: rotate(164deg); animation-delay: -7s; animation-duration: 23s; }
.case-banner-signal { position: absolute; display: grid; place-items: center; color: rgba(39, 111, 215, .26); font: 600 .68rem/1 Inter, Arial, sans-serif; text-shadow: 0 0 1rem rgba(33, 141, 231, .2); animation: caseBannerSignal 7s ease-in-out infinite; }
.case-banner-signal::before { content: ''; position: absolute; width: 1.8rem; height: 1.8rem; border: 1px solid rgba(57, 127, 220, .08); border-radius: 50%; }
/*信号元素避开轮播主卡：文字信号落两侧留白 gutter，光点贴左上/左下呼吸区。*/
.case-banner-signal-ai { top: 8%; right: 11%; letter-spacing: .05em; }
.case-banner-signal-plus-a { top: 26%; left: 6%; animation-delay: -2.4s; }
.case-banner-signal-plus-b { right: 4%; bottom: 8%; animation-delay: -4.8s; }
.case-banner-signal-dot-a, .case-banner-signal-dot-b { width: .3rem; height: .3rem; border-radius: 50%; background: rgba(40, 150, 225, .25); box-shadow: 0 0 1rem rgba(40, 150, 225, .2); }
.case-banner-signal-dot-a { top: 68%; left: 7%; animation-delay: -3.2s; }
.case-banner-signal-dot-b { top: 13%; left: 36%; animation-delay: -5.2s; }
.case-banner-signal-dot-a::before, .case-banner-signal-dot-b::before { content: none; }
/*地平线光带：首屏底边居中渐变蓝线，与首页/网站模板页首屏一致。*/
.case-banner-horizon { position: absolute; left: 50%; bottom: 0; width: min(64rem, 86%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(64, 118, 255, .6) 38%, rgba(35, 205, 236, .65) 62%, transparent); box-shadow: 0 0 1.4rem rgba(70, 132, 255, .4), 0 -1.2rem 3.5rem rgba(64, 130, 255, .14); }
@keyframes caseBannerFlow {
  from { translate: -2% -3%; scale: .98; opacity: .42; }
  to { translate: 4% 3%; scale: 1.04; opacity: .72; }
}
@keyframes caseBannerSignal {
  0%, 100% { transform: translateY(0); opacity: .36; }
  50% { transform: translateY(-.65rem); opacity: .72; }
}
.case-main { padding: 1.5rem 0 5rem; background: #fff; text-align: left; scroll-margin-top: 5rem; }
/*精选案例统一内容基准：快捷入口、筛选、列表与分页共用 1400px 中轴。*/
.case-content-container { width: calc(100% - 2rem); max-width: 87.5rem; }
/*与 channel_highres.css 的全站 1400px 基准保持一致，案例页共用同一中轴。*/
@media (min-width: 1400px) {
  .case-banner > .container,
  .case-main > .container { width: calc(100% - 4rem); max-width: 87.5rem; }
}
/*栏目名在导航与案例内容中已经充分表达；保留语义 H1，但不重复占用首屏视觉空间。*/
.case-page-title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/*-------------------- 列表区块头（与首页「客户案例」区块头同款） --------------------*/
.case-section-head { max-width: 47.5rem; margin: 0 auto 3rem; text-align: center; }
.case-section-eyebrow { display: flex; align-items: center; justify-content: center; gap: 0.625rem; margin-bottom: 1rem; color: #246bfd; font-size: .75rem; font-weight: 750; letter-spacing: .16em; }
.case-section-eyebrow span { width: 1.625rem; height: 2px; background: linear-gradient(90deg, transparent, #246bfd); }
.case-section-eyebrow span:last-child { background: linear-gradient(90deg, #246bfd, transparent); }
.case-section-head .case-section-title { margin: 0; color: #101a31; font-size: clamp(2.125rem, 3vw, 2.75rem); font-weight: 720; letter-spacing: -.04em; line-height: 1.25; text-wrap: balance; }
.case-section-head .case-section-desc { max-width: 42.5rem; margin: 1.125rem auto 0; color: #65738b; font-size: .9375rem; line-height: 1.8; }
@media (min-width: 992px) {
  .case-section-head { max-width: 54rem; }
}
/*-------------------- 居中主卡 + 两侧预览轮播 --------------------*/
.case-showcase { position: relative; z-index: 1; width: 100%; }
.case-banner .swiper-container { --case-image-ratio: 1672 / 941; width: min(90rem, calc(100% - 8rem)); height: auto; padding: .5rem 0 2.75rem; overflow: visible; }
/*与首页客户案例一致：外框跟随当前图片原始比例，宽度变化时自动等比缩放。*/
.case-banner .swiper-wrapper { height: auto; align-items: center; }
.case-banner .swiper-slide { z-index: 0; height: auto; aspect-ratio: var(--case-image-ratio); transform: scale(.84); opacity: .16; transition: transform .72s cubic-bezier(.2, .75, .25, 1), opacity .72s ease, filter .72s ease; filter: saturate(.65) blur(.7px); }
.case-banner .swiper-slide-prev { z-index: 1; transform: translateX(8rem) scale(.87); opacity: .3; filter: saturate(.75) blur(.35px); }
.case-banner .swiper-slide-next { z-index: 1; transform: translateX(-8rem) scale(.87); opacity: .3; filter: saturate(.75) blur(.35px); }
.case-banner .swiper-slide-active { z-index: 3; transform: translateX(0) scale(1); opacity: 1; filter: none; }
.case-story-card { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .72); border-radius: 1.25rem; background: #e9f1fd; box-shadow: 0 .8rem 2rem rgba(15, 35, 70, .1); color: var(--case-ink); text-decoration: none; cursor: pointer; isolation: isolate; transition: box-shadow .45s ease, border-color .45s ease; }
.case-story-card:focus-visible { outline: 3px solid var(--case-blue); outline-offset: 3px; }
.case-banner .swiper-slide-active .case-story-card { border-color: color-mix(in srgb, var(--case-blue) 52%, #fff 48%); border-bottom: 3px solid var(--case-blue); box-shadow: 0 1.75rem 4rem color-mix(in srgb, var(--case-blue) 24%, transparent),
    0 .5rem 2rem color-mix(in srgb, var(--case-blue) 24%, transparent); }
.case-banner .swiper-slide-active .case-story-media img { filter: saturate(1.03); }
.case-story-media { position: absolute; inset: 0; z-index: -3; display: block; }
.case-story-media img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform .85s cubic-bezier(.2, .7, .25, 1); }
/*轮播图本身包含业务界面，信息区改为浅色玻璃层，避免压暗案例画面。*/
.case-story-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(9,39,83,.03) 0%, rgba(255,255,255,0) 30%, rgba(238,247,255,.2) 50%, rgba(237,246,255,.86) 100%); }
/*所有轮播面板默认只展示案例图片；保留文字语义供读屏软件读取。*/
.case-story-topbar,
.case-story-content { opacity: 0; transform: translateY(.65rem); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.case-story-shade { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.case-story-topbar { position: absolute; top: 1.25rem; left: 1.4rem; right: 1.4rem; z-index: 3; display: flex; align-items: flex-start; gap: 1rem; }
/*品牌身份条：白底 LOGO 小卡 + 客户名，是案例面板的信任状入口。*/
.case-story-brand { display: flex; min-width: 0; align-items: center; gap: .75rem; padding: .28rem .75rem .28rem .28rem; border: 1px solid rgba(203, 224, 248, .9); border-radius: 62.5rem; background: rgba(255,255,255,.86); box-shadow: 0 .3rem .9rem rgba(30, 64, 105, .1); backdrop-filter: blur(10px); }
.case-story-logo { display: inline-flex; width: 2.5rem; height: 2.5rem; flex-shrink: 0; align-items: center; justify-content: center; padding: .15rem; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 .2rem .55rem rgba(15, 35, 70, .08); backdrop-filter: blur(6px); }
.case-story-logo img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.case-story-customer { overflow: hidden; max-width: 16rem; color: #173a68; font-size: 1.05rem; font-weight: 700; letter-spacing: .01em; text-overflow: ellipsis; white-space: nowrap; }
/*元信息行：行业 badge 为主级（实心白底蓝字），能力 tags 为次级（玻璃描边白字），样式拉开层级。*/
.case-story-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .55rem; }
.case-story-badge { display: inline-flex; align-items: center; min-height: 1.55rem; padding: .25rem .6rem; border: 1px solid rgba(36, 107, 253, .3); border-radius: 999px; background: rgba(255, 255, 255, .88); color: var(--case-blue); font-size: .78rem; font-weight: 600; line-height: 1; }
.case-story-tags { display: flex; flex-wrap: wrap; gap: .5rem; min-width: 0; }
.case-story-tags span { display: inline-flex; align-items: center; min-height: 1.55rem; padding: .25rem .6rem; border: 1px solid rgba(147, 197, 253, .6); border-radius: 999px; background: rgba(255, 255, 255, .72); color: #28517f; font-size: .72rem; font-weight: 600; line-height: 1; backdrop-filter: blur(8px); }
/*标题与 CTA 同行：阅读动线末端即行动出口。*/
.case-story-headline { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; margin-bottom: .7rem; }
.case-story-headline h2 { min-width: 0; margin: 0; color: #102e57; font-size: clamp(1.35rem, 2vw, 1.72rem); font-weight: 750; letter-spacing: -.015em; text-shadow: 0 .08rem .4rem rgba(255,255,255,.85); transition: color .2s ease; }
.case-story-card:hover .case-story-headline h2, .case-story-card:focus-visible .case-story-headline h2 { color: var(--case-blue); }
.case-story-content { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.25rem; z-index: 2; }
.case-banner .swiper-slide-active .case-story-content { left: 1.1rem; right: 1.1rem; bottom: 1rem; padding: 1.05rem 1.15rem 1.15rem; border: 1px solid rgba(255,255,255,.5); border-radius: 1.05rem; background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(244,250,255,.3)); box-shadow: 0 .45rem 1.2rem rgba(22, 62, 113, .07), inset 0 1px 0 rgba(255,255,255,.6); backdrop-filter: blur(8px) saturate(1.04); }
/*只展开当前案例：键盘聚焦与鼠标悬停一致，触屏点击仍直接进入详情。*/
.case-banner .swiper-slide-active .case-story-card:focus-visible .case-story-topbar,
.case-banner .swiper-slide-active .case-story-card:focus-visible .case-story-content { opacity: 1; transform: translateY(0); }
.case-banner .swiper-slide-active .case-story-card:focus-visible .case-story-shade { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .case-banner .swiper-slide-active .case-story-card:hover .case-story-topbar,
  .case-banner .swiper-slide-active .case-story-card:hover .case-story-content { opacity: 1; transform: translateY(0); }
  .case-banner .swiper-slide-active .case-story-card:hover .case-story-shade { opacity: 1; }
}
.case-banner .swiper-slide-active .case-story-content { border-color: rgba(255,255,255,.72); background: linear-gradient(135deg, rgba(255,255,255,.76), rgba(244,250,255,.62)); box-shadow: 0 .7rem 1.7rem rgba(22, 62, 113, .12), inset 0 1px 0 rgba(255,255,255,.85); backdrop-filter: blur(14px) saturate(1.08); }
.case-story-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.case-story-point { min-width: 0; min-height: 4.25rem; padding: .7rem .9rem; border: 1px solid rgba(226, 232, 240, .85); border-radius: .875rem; background: rgba(255, 255, 255, .9); box-shadow: 0 .2rem .5rem rgba(15, 35, 70, .06); backdrop-filter: blur(6px); transition: border-color .25s ease, background-color .25s ease; }
.case-story-card:hover .case-story-point { border-color: rgba(191, 219, 254, .9); background: rgba(255, 255, 255, .95); }
.case-story-point h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .3rem; color: var(--case-ink); font-size: .92rem; font-weight: 600; }
.case-story-point h3 i { color: var(--case-blue); font-size: 1.05rem; }
.case-story-point p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--case-copy); font-size: .78rem; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/*轮播指示器：与首页轮播一致的圆点 + 激活进度条轨道*/
.case-banner .swiper-pagination { position: absolute; left: 0; right: 0; bottom: .85rem; height: 0.375rem; z-index: 10; text-align: center; font-size: 0; white-space: nowrap; }
.case-banner .swiper-pagination-bullet { display: inline-block; vertical-align: top; position: relative; width: .42rem; height: .42rem; border: 0; background: #d4e1f5; border-radius: 0.375rem; cursor: pointer; opacity: 1; margin: 0 0.25rem; transition: width .3s ease, background-color .3s ease; box-shadow: none; overflow: hidden; }
/*激活指示器：拉长为轨道，保留外圈白色描边，内嵌进度条随 autoplay 等待时间填充（与首页轮播一致）*/
.case-banner .swiper-pagination-bullet-active { width: 3.4rem; background: #dce8fa; }
.case-banner-progress { position: absolute; inset: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, #246bfd, #13bfe5); display: block; }
.case-banner .swiper-pagination-bullet-active .case-banner-progress { animation: caseBannerProgress 5.2s linear forwards; }
.case-banner .is-single-slide .swiper-pagination,
.case-showcase.is-single-slide > .swiper-button-prev,
.case-showcase.is-single-slide > .swiper-button-next { display: none; }
@keyframes caseBannerProgress {
  from { width: 0; }
  to { width: 100%; }
}
/*轮播切换按钮：与首页轮播一致的白色毛玻璃圆形按钮，悬停变为品牌蓝*/
.case-showcase > .swiper-button-prev, .case-showcase > .swiper-button-next { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; top: 50%; margin-top: -1rem; transform: translateY(-50%); border: 1px solid rgba(218, 226, 238, .9); border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 0.5rem 1.25rem rgba(35, 68, 119, .14); backdrop-filter: blur(8px); color: #51627d; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .65s cubic-bezier(0.19, 1, 0.22, 1), visibility .65s cubic-bezier(0.19, 1, 0.22, 1), background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.case-showcase:hover > .swiper-button-prev,
.case-showcase:hover > .swiper-button-next,
.case-showcase:focus-within > .swiper-button-prev,
.case-showcase:focus-within > .swiper-button-next { opacity: 1; visibility: visible; pointer-events: auto; }
.case-showcase > .swiper-button-prev:after, .case-showcase > .swiper-button-next:after { content: ''; display: inline-block; width: 0.625rem; height: 0.625rem; border-style: solid; border-width: 1px 1px 0 0; border-color: currentColor; font-size: 0; }
.case-showcase > .swiper-button-prev:after { transform: rotate(-135deg); margin-left: 0.188rem; }
.case-showcase > .swiper-button-next:after { transform: rotate(45deg); margin-right: 0.188rem; }
.case-showcase > .swiper-button-prev:hover, .case-showcase > .swiper-button-next:hover { background: #246bfd; border-color: #246bfd; color: #fff; box-shadow: 0 0.5rem 1.25rem rgba(35, 68, 119, .28); }
.case-showcase > .swiper-button-prev { left: 1.25rem; }
.case-showcase > .swiper-button-next { right: 1.25rem; }
/*-------------------- 行业快捷入口 --------------------*/
/*scroll-margin-top 避让固定页头：点击分类图标后图标栏恰好停在页头下方*/
.case-industry-dock { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: .375rem; margin-top: .5rem; padding: .5rem; border: 1px solid var(--case-line); border-radius: 1rem; background: rgba(255, 255, 255, .94); box-shadow: 0 .5rem 1.75rem rgba(15, 35, 70, .06); scroll-margin-top: calc(var(--tncms-header-height, 4.375rem) + .75rem); }
.case-industry-item { position: relative; display: flex; min-width: 0; min-height: 4.5rem; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; border-radius: .75rem; color: var(--case-muted); text-decoration: none; transition: color .2s ease, background-color .2s ease; }
.case-industry-item::after { position: absolute; right: 1rem; bottom: 0; left: 1rem; height: 2px; border-radius: 2px; background: var(--case-blue); content: ''; opacity: 0; transform: scaleX(.5); transition: opacity .2s ease, transform .2s ease; }
.case-industry-item i { color: #7ba7e8; font-size: 1.4rem; line-height: 1; transition: color .2s ease, transform .2s ease; }
.case-industry-item img { width: 1.75rem; height: 1.75rem; object-fit: contain; transition: transform .2s ease; }
.case-industry-item span { width: 100%; overflow: hidden; font-size: .82rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.case-industry-item.active { color: var(--case-blue); background: #eff6ff; }
.case-industry-item.active::after { opacity: 1; transform: scaleX(1); }
.case-industry-item.active i { color: var(--case-blue); transform: translateY(-.0625rem); }
.case-industry-item.active img { transform: translateY(-.0625rem); }
@media (hover: hover) and (pointer: fine) {
  .case-industry-item:hover { color: var(--case-blue); background: #eff6ff; }
  .case-industry-item:hover::after { opacity: 1; transform: scaleX(1); }
  .case-industry-item:hover i { color: var(--case-blue); transform: translateY(-.0625rem); }
  .case-industry-item:hover img { transform: translateY(-.0625rem); }
}
/*-------------------- 内容区域 --------------------*/
.content-box { display: flex; gap: 1.5rem; align-items: flex-start; }
.content-box-left { flex: 1; min-width: 0; }
.content-box-right { width: 20rem; flex-shrink: 0; }
/*-------------------- 案例列表 --------------------*/
/*桌面端一排 3 张：卡片更大、呼吸感更足，突出案例封面与品牌 LOGO*/
.case-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; }
/*卡片面板 1:1 对齐首页新闻动态卡片：表面、悬停态、底部渐变条、图板比例与排版一致；
   案例专属元素（圆形 LOGO、悬停蒙层）保留*/
.case-box { position: relative; overflow: hidden; border: 1px solid var(--case-line); border-radius: 1rem; background: #fff; box-shadow: 0 .5rem 1.5rem rgba(15, 35, 70, .06); transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease; }
.case-box:hover { transform: translateY(-.2rem); border-color: rgba(37, 99, 235, .28); box-shadow: 0 .9rem 2rem rgba(15, 35, 70, .11); }
.case-box-card { display: block; text-decoration: none; color: inherit; position: relative; height: 100%; }
.case-box-card:hover { color: inherit; }
/*封面图区域：裁切只作用于内层图片容器，LOGO 作为其兄弟层悬挂在右下角不被裁掉*/
.case-box-cover { position: relative; width: 100%; background: #eaf1fb; }
/*图板 16:9 与新闻卡片一致，右侧斜角微光*/
.case-box .case-box-cover-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.case-box .case-box-cover-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 68%, rgba(15, 35, 70, .12)); pointer-events: none; }
.case-box .case-box-cover-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .4s ease; }
.case-box:hover .case-box-cover-img img { transform: scale(1.055); }
/*右下角圆形 LOGO：白圈保持窄边，突出 LOGO 本体*/
.case-box-logo { position: absolute; right: 1.25rem; bottom: -1.375rem; width: 4rem; height: 4rem; padding: 0.15rem; background: #fff; border: 1px solid #fff; border-radius: 50%; box-shadow: 0 0.375rem 1.25rem rgba(15, 38, 76, 0.14); z-index: 3; display: flex; align-items: center; justify-content: center; }
.case-box-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
/*卡片正文：排版与新闻卡片一致；顶部留白避让悬挂的 LOGO*/
.case-box-content { position: relative; padding: 2.625rem 1.35rem 1.15rem; background: transparent; z-index: 2; }
.case-box-content-title { margin: 0; overflow: hidden; color: #17243d; font-size: 1rem; font-weight: 680; letter-spacing: -.012em; line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: color .22s ease; }
.case-box:hover .case-box-content-title { color: #1759dc; }
.case-box-content-info { margin: .55rem 0 0; color: #748198; font-size: .8125rem; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.4em; }
/*描述下方元信息行：案例分类为主级（品牌蓝浅底），文章标签为次级（中性灰）*/
.case-box-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.case-box-disclosure { display: inline-flex; align-items: center; min-height: 1.5rem; padding: .12rem .46rem; border: 1px solid #dce5f2; border-radius: 99rem; color: #536476; background: #f7f9fc; font-size: .72rem; line-height: 1.2; }
.case-box-disclosure-verified { border-color: #b9dfca; color: #1b7043; background: #effaf3; }
.case-box-disclosure-public { border-color: #cfdbeb; color: #335e93; background: #f1f6fd; }
.case-box-category, .case-box-tag { display: inline-flex; align-items: center; min-height: 1.5rem; padding: .22rem .55rem; border-radius: .375rem; font-size: .72rem; line-height: 1.2; }
.case-box-category { background: #eff6ff; color: var(--case-blue); font-weight: 600; }
.case-box-tag { background: #f1f5f9; color: #64748b; font-weight: 500; }
/*悬停/键盘聚焦时封面蒙层浮现「查看案例」；蒙层只罩封面图（不遮挡正文），LOGO 层级在蒙层之上保持可见*/
.case-box-hover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0; background: linear-gradient(180deg, rgba(8, 24, 52, .22), rgba(8, 24, 52, .58)); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; z-index: 2; }
.case-box:hover .case-box-hover,
.case-box-card:focus-visible .case-box-hover { opacity: 1; visibility: visible; }
.case-box-hover-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; }
/*蒙层内标题保持隐藏：蒙层只承载操作入口*/
.case-box-card .case-box-hover .case-box-content-title { display: none; }
.case-box-hover-btn { display: inline-flex; align-items: center; justify-content: center; height: 2.25rem; padding: 0 .9rem; background: var(--case-blue); color: #fff; font-size: .8rem; font-weight: 600; border-radius: .625rem; box-shadow: 0 .25rem .75rem rgba(29, 78, 216, .22); transition: all .2s ease; }
.case-box-hover-btn:hover { background: var(--case-blue-hover); transform: translateY(-.0625rem); box-shadow: 0 .35rem 1rem rgba(29, 78, 216, .28); }
/*兼容旧 HTML：强制隐藏蒙层中的详细内容*/
.case-box-hover .case-box-content-info { display: none !important; }
/*空状态*/
.case-empty { padding: 5rem 1.25rem; text-align: center; background: #f8fafc; border-radius: 1rem; color: #64748b; }
.case-empty p { margin: 1rem 0; font-size: 1rem; }
/*AJAX 加载状态*/
.case-loading { position: relative; min-height: 12.5rem; }
.case-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 2.5rem; height: 2.5rem; margin: -1.25rem 0 0 -1.25rem; border: 0.188rem solid #e2e8f0; border-top-color: #2576fb; border-radius: 50%; animation: case-spin 0.8s linear infinite; }
@keyframes case-spin {
  to { transform: rotate(360deg); }
}
/*-------------------- 无限滚动加载 --------------------*/
/*哨兵区域常驻列表下方：加载中转圈，全部加载完毕显示结束提示*/
.case-list-more { display: flex; align-items: center; justify-content: center; min-height: 4.5rem; padding: 2.25rem 0 .5rem; }
.case-list-spinner { width: 1.75rem; height: 1.75rem; border: 0.188rem solid #e2e8f0; border-top-color: #2576fb; border-radius: 50%; animation: case-spin 0.8s linear infinite; }
.case-list-end { margin: 0; color: #94a3b8; font-size: .875rem; letter-spacing: .05em; }
/*-------------------- 分页（noscript 回退） --------------------*/
.case-main .pagination { margin-top: 2rem; }
.case-main .page-link { color: #475569; border-color: #e2e8f0; }
.case-main .page-link:hover { background: #eff6ff; border-color: #bfdbfe; color: #2576fb; }
.case-main .page-item.active .page-link { background: #2576fb; border-color: #2576fb; }
@media (max-width: 1199.98px) {
  .case-banner .swiper-slide-prev { transform: translateX(6rem) scale(.86); }
  .case-banner .swiper-slide-next { transform: translateX(-6rem) scale(.86); }
  .case-banner .swiper-slide-active { transform: translateX(0) scale(1); }
  .case-banner .swiper-container { width: calc(100% - 5rem); }
  .case-story-point { min-height: 4.5rem; padding: .65rem .75rem; }
  .case-story-point p { font-size: .71rem; }
  .case-industry-dock { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .content-box { flex-direction: column; }
  .content-box-right { width: 100%; }
  .case-list { gap: 2rem 1.5rem; }
}
@media (max-width: 991.98px) {
  .case-banner { padding-top: 1rem; }
  .case-banner-flow { width: 44rem; height: 11rem; }
  .case-banner-flow-a { left: -29rem; }
  .case-banner-signal { opacity: .65; }
  .case-banner .swiper-container { width: calc(100% - 3rem); }
  .case-banner .swiper-slide-prev { transform: translateX(3rem) scale(.88); }
  .case-banner .swiper-slide-next { transform: translateX(-3rem) scale(.88); }
  .case-banner .swiper-slide-active { transform: translateX(0) scale(1); }
  .case-story-topbar { top: 1rem; left: 1rem; right: 1rem; }
  .case-story-content { left: 1rem; right: 1rem; bottom: 1rem; }
  .case-story-headline { margin-bottom: .6rem; }
  .case-story-headline h2 { font-size: 1.3rem; }
  .case-story-point { min-height: 4.1rem; padding: .6rem .7rem; }
  .case-story-point h3 { font-size: .85rem; }
  .case-story-point p { font-size: .72rem; line-height: 1.55; }
  .case-showcase > .swiper-button-prev { left: 1rem; }
  .case-showcase > .swiper-button-next { right: 1rem; }
  .case-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-box-right { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .content-box-qrcode { display: none; }
}
@media (max-width: 767.98px) {
  .case-banner { padding: 1.25rem 0; }
  /*移动端卡片全宽铺满，信号粒子几不可见，隐藏以保持画面干净。*/
  .case-banner-signal { display: none; }
  .case-banner .common-breadcrumb { margin-bottom: .85rem; }
  .case-banner .swiper-container { width: 100%; height: auto; min-height: 0; padding: .6rem 0 3rem; }
  .case-banner .swiper-slide { transform: scale(.96); }
  .case-banner .swiper-slide-prev { transform: translateX(.75rem) scale(.94); }
  .case-banner .swiper-slide-next { transform: translateX(-.75rem) scale(.94); }
  .case-banner .swiper-slide-active { transform: scale(1); }
  .case-story-card { border-radius: .8rem; }
  .case-story-media img { object-position: center; }
  .case-story-topbar { top: .85rem; left: .85rem; right: .85rem; gap: .5rem; }
  .case-story-brand { gap: .55rem; }
  .case-story-logo { width: 2rem; height: 2rem; padding: .125rem; }
  .case-story-customer { max-width: 10rem; font-size: .9rem; }
  .case-story-meta { gap: .35rem; margin-bottom: .45rem; }
  .case-story-tags { gap: .35rem; }
  .case-story-tags span { min-height: 1.5rem; padding: .25rem .55rem; font-size: .68rem; }
  .case-story-content { left: .85rem; right: .85rem; bottom: .85rem; }
  .case-story-headline { margin-bottom: .55rem; gap: .6rem; }
  .case-story-headline h2 { font-size: 1.22rem; }
  .case-story-points { grid-template-columns: 1fr; gap: .45rem; }
  .case-story-point { min-height: 4.4rem; padding: .6rem .7rem; }
  .case-story-point h3 { margin-bottom: .25rem; font-size: .82rem; }
  .case-story-point h3 i { font-size: 1rem; }
  .case-story-point p { font-size: .66rem; line-height: 1.5; -webkit-line-clamp: 2; }
  .case-showcase > .swiper-button-prev, .case-showcase > .swiper-button-next { display: none; }
  .case-industry-dock { width: calc(100% + 2.5rem); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; margin: .25rem -1.25rem 0; padding: .5rem; }
  .case-industry-item { min-height: 4.25rem; gap: .35rem; padding: .25rem .1rem; }
  .case-industry-item::after { right: .55rem; left: .55rem; }
  .case-industry-item i { font-size: 1.2rem; }
  .case-industry-item span { overflow: visible; font-size: .72rem; line-height: 1.3; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
  .case-main { padding-top: 1rem; }
  .case-section-head { margin-bottom: 2.125rem; }
  .case-section-eyebrow { margin-bottom: .75rem; font-size: .625rem; }
  .case-section-head .case-section-title { font-size: 1.875rem; }
  .case-section-head .case-section-desc { margin-top: .875rem; font-size: .875rem; line-height: 1.7; }
  .case-list { grid-template-columns: 1fr; gap: 1.75rem; }
  .content-box-right { grid-template-columns: 1fr; }
}
/*案例页在中等桌面宽度下压缩快捷栏，减少其对右侧轮播预览的遮挡。*/
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .case-page .tncms-quickbar { right: .6rem; }
  .case-page .quickbar-rail { width: 4.2rem; }
  .case-page .quickbar-action { min-height: 4.1rem; padding: .45rem; }
  .case-page .quickbar-action > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .case-banner .swiper-slide,
  .case-story-topbar,
  .case-story-content,
  .case-story-shade,
  .case-story-media img,
  .case-story-point,
  .case-industry-item { transition: none; }
  .case-banner .swiper-pagination-bullet-active .case-banner-progress { animation: none; width: 100%; }
  .case-banner-flow,
  .case-banner-signal { animation: none; }
}
/** 大屏适配（原 channel_highres.css 本页专属部分；置于文件末尾以保持最后的覆盖顺序）*/
@media (min-width: 1400px) {
  .case-main > .container { width: calc(100% - (var(--tncms-channel-gutter) * 2)); max-width: var(--tncms-channel-wide); }
}
/*首屏保持案例图片为视觉主体，背景氛围、网格、信号和地平线统一跟随栏目色。*/
.case-page .case-banner { background: radial-gradient(48rem 34rem at 82% 40%, color-mix(in srgb, var(--case-blue) 34%, transparent), transparent 68%),
    radial-gradient(30rem 24rem at 8% 20%, color-mix(in srgb, var(--case-blue) 24%, transparent), transparent 72%),
    linear-gradient(135deg, color-mix(in srgb, var(--case-blue) 12%, #f6f9fe 88%), color-mix(in srgb, var(--case-blue) 5%, #fff 95%)); }
.case-page .case-banner::before { background-image: linear-gradient(color-mix(in srgb, var(--case-blue) 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--case-blue) 10%, transparent) 1px, transparent 1px); }
.case-page .case-banner-ring { border-color: color-mix(in srgb, var(--case-blue) 24%, transparent); box-shadow: 0 0 0 6rem color-mix(in srgb, var(--case-blue) 6%, transparent),
    0 0 0 12rem color-mix(in srgb, var(--case-blue) 4%, transparent); }
.case-page .case-banner-flow,
.case-page .case-banner-flow::after { border-color: color-mix(in srgb, var(--case-blue) 22%, transparent); }
.case-page .case-banner-signal { color: color-mix(in srgb, var(--case-blue) 72%, #173a68 28%); }
.case-page .case-banner-signal::before { border-color: color-mix(in srgb, var(--case-blue) 18%, transparent); }
.case-page .case-banner-signal-dot-a,
.case-page .case-banner-signal-dot-b { background: color-mix(in srgb, var(--case-blue) 52%, transparent); }
.case-page .case-banner-horizon { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--case-blue) 62%, transparent) 38%, color-mix(in srgb, var(--case-blue) 65%, #fff 35%) 62%, transparent); box-shadow: 0 0 1.4rem color-mix(in srgb, var(--case-blue) 40%, transparent), 0 -1.2rem 3.5rem color-mix(in srgb, var(--case-blue) 18%, transparent); }
.case-page .case-story-content { border-color: color-mix(in srgb, var(--case-blue) 30%, #fff 70%); }
.case-page .case-story-point h3 i,
.case-page .case-industry-item i { color: color-mix(in srgb, var(--case-blue) 72%, #7ba7e8 28%); }
.case-page .case-story-tags span { border-color: color-mix(in srgb, var(--case-blue) 32%, #fff 68%); }
.case-page .case-box-hover-btn { background: linear-gradient(135deg, color-mix(in srgb, var(--case-blue) 72%, #fff 28%), var(--case-blue) 58%, var(--case-blue-hover)); box-shadow: 0 .4rem 1rem color-mix(in srgb, var(--case-blue) 24%, transparent); }
.case-page .case-box-hover-btn:hover { background: var(--case-blue-hover); box-shadow: 0 .55rem 1.2rem color-mix(in srgb, var(--case-blue) 30%, transparent); }
.case-page .case-story-badge,
.case-page .case-section-eyebrow,
.case-page .case-box-category,
.case-page .case-box-content-title:hover,
.case-page .case-box:hover .case-box-content-title,
.case-page .case-industry-item.active,
.case-page .case-industry-item.active i { color: var(--case-blue); }
@media (hover: hover) and (pointer: fine) {
  .case-page .case-industry-item:hover,
  .case-page .case-industry-item:hover i { color: var(--case-blue); }
}
.case-page .case-section-eyebrow span { background: linear-gradient(90deg, transparent, var(--case-blue)); }
.case-page .case-section-eyebrow span:last-child { background: linear-gradient(90deg, var(--case-blue), transparent); }
.case-page .case-story-badge { border-color: color-mix(in srgb, var(--case-blue) 30%, transparent); }
.case-page .case-box-category { background: var(--case-blue-pale); }
.case-page .case-industry-item::after { background: var(--case-blue); }
.case-page .case-industry-item.active { background: var(--case-blue-pale); }
@media (hover: hover) and (pointer: fine) {
  .case-page .case-industry-item:hover { background: var(--case-blue-pale); }
}
.case-page .case-box:hover { border-color: color-mix(in srgb, var(--case-blue) 30%, #dce5f2 70%); }
.case-page .case-box-hover-btn { color: #fff; }
.case-page .case-filter-reset,
.case-page .case-box-category { border-color: color-mix(in srgb, var(--case-blue) 30%, transparent); }
.case-page .case-showcase > .swiper-button-prev:hover,
.case-page .case-showcase > .swiper-button-next:hover { background: var(--case-blue); border-color: var(--case-blue); }
.case-page .case-banner .swiper-pagination-bullet-progress,
.case-page .case-banner-progress { background: linear-gradient(90deg, var(--case-blue), var(--case-cyan)); }
/*案例轮播指示器与首页统一：圆点清晰可见，当前页显示进度轨道。*/
.case-page .case-banner .swiper-pagination { bottom: .9rem; z-index: 16; }
.case-page .case-banner .swiper-pagination-bullet { width: .5rem; height: .5rem; margin: 0 .28rem; border: 1px solid rgba(36, 107, 253, .42); background: rgba(255, 255, 255, .94); box-shadow: 0 .2rem .6rem rgba(12, 39, 84, .2); opacity: 1; }
.case-page .case-banner .swiper-pagination-bullet-active { width: 2.75rem; border-color: rgba(255, 255, 255, .88); background: rgba(255, 255, 255, .58); }
.case-page .case-banner .swiper-pagination-bullet:focus-visible { outline: 3px solid color-mix(in srgb, var(--case-blue) 35%, transparent); outline-offset: .25rem; }
.case-page .case-main .page-link,
.case-page .case-main .pagination .page-link { border-radius: .75rem; border-color: color-mix(in srgb, var(--case-blue) 16%, #e2e8f0 84%); color: var(--case-muted); box-shadow: 0 .25rem .75rem rgba(39, 66, 113, .045); }
.case-page .case-main .page-item:not(.active) .page-link:hover { border-color: color-mix(in srgb, var(--case-blue) 48%, #e2e8f0 52%); background: var(--case-blue-pale); color: var(--case-blue-hover); }
.case-page .case-main .page-item.active .page-link { border-color: var(--case-blue); background: linear-gradient(135deg, color-mix(in srgb, var(--case-blue) 72%, #fff 28%), var(--case-blue) 58%, var(--case-blue-hover)); color: #fff; font-weight: 700; box-shadow: 0 .45rem 1.1rem color-mix(in srgb, var(--case-blue) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); }
.case-page .case-loading::after,
.case-page .case-list-spinner { border-top-color: var(--case-blue); }
/*---------- 案例列表卡片交互 ----------
   鼠标移入：主题色光晕 + 封面蒙层 + 内容层次；键盘聚焦：清晰外轮廓且不依赖鼠标。*/
.case-page .case-box { isolation: isolate; border-color: color-mix(in srgb, var(--case-blue) 14%, var(--case-line) 86%); box-shadow: 0 .5rem 1.5rem rgba(15, 35, 70, .06); transition: transform .3s cubic-bezier(.2, .75, .25, 1),
    border-color .3s ease, box-shadow .3s ease, background-color .3s ease; }
.case-page .case-box::before { position: absolute; inset: 0; border: 1px solid transparent; border-radius: inherit; background: linear-gradient(135deg, color-mix(in srgb, var(--case-blue) 58%, transparent), transparent 42%) border-box; content: ''; opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 4; }
.case-page .case-box:hover,
.case-page .case-box:focus-within { transform: translateY(-.45rem); border-color: color-mix(in srgb, var(--case-blue) 48%, #dce5f2 52%); box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--case-blue) 18%, transparent),
    0 .3rem 1rem rgba(15, 35, 70, .08); }
.case-page .case-box:hover::before,
.case-page .case-box:focus-within::before { opacity: 1; }
.case-page .case-box-card:focus-visible { outline: .2rem solid color-mix(in srgb, var(--case-blue) 68%, #fff 32%); outline-offset: -.35rem; border-radius: .75rem; }
.case-page .case-box-cover-img::after { background: linear-gradient(180deg, transparent 48%, color-mix(in srgb, var(--case-blue) 18%, #071b50 82%)); opacity: .72; transition: opacity .3s ease, background .3s ease; }
.case-page .case-box:hover .case-box-cover-img::after,
.case-page .case-box:focus-within .case-box-cover-img::after { background: linear-gradient(180deg, color-mix(in srgb, var(--case-blue) 12%, transparent), color-mix(in srgb, var(--case-blue) 55%, #071b50 45%)); opacity: .88; }
.case-page .case-box:hover .case-box-cover-img img,
.case-page .case-box:focus-within .case-box-cover-img img { transform: scale(1.08); }
.case-page .case-box-logo { transition: transform .3s cubic-bezier(.2, .75, .25, 1), box-shadow .3s ease; }
.case-page .case-box:hover .case-box-logo,
.case-page .case-box:focus-within .case-box-logo { transform: translateY(-.2rem) scale(1.06); box-shadow: 0 .55rem 1.4rem color-mix(in srgb, var(--case-blue) 26%, transparent); }
.case-page .case-box-content { transition: background-color .3s ease; }
.case-page .case-box:hover .case-box-content,
.case-page .case-box:focus-within .case-box-content { background: linear-gradient(180deg, color-mix(in srgb, var(--case-blue) 4%, #fff 96%), #fff 45%); }
.case-page .case-box:hover .case-box-content-title,
.case-page .case-box:focus-within .case-box-content-title { color: var(--case-blue-hover); }
.case-page .case-box-hover { top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; min-height: 0; align-items: center; justify-content: center; padding: 1.5rem; border-radius: inherit; background: linear-gradient(180deg, rgba(8, 18, 38, .3) 0%, transparent 35%),
    linear-gradient(0deg,
      color-mix(in srgb, var(--case-blue) 22%, rgba(5, 14, 31, .91) 78%) 0%,
      color-mix(in srgb, var(--case-blue) 13%, rgba(8, 19, 40, .5) 87%) 45%,
      transparent 76%); backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; z-index: 5; }
.case-page .case-box:hover .case-box-hover,
.case-page .case-box-card:focus-visible .case-box-hover { opacity: 1; visibility: visible; }
.case-page .case-box-card { min-height: 100%; }
.case-page .case-box-hover-btn { min-width: 6.5rem; height: 2.5rem; border: 1px solid rgba(255, 255, 255, .52); box-shadow: 0 .45rem 1.1rem color-mix(in srgb, var(--case-blue) 36%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); letter-spacing: .03em; }
.case-page .case-box-hover-inner { align-items: center; justify-content: center; }
.case-page .case-box-logo { z-index: 6; }
@media (prefers-reduced-motion: reduce) {
  .case-page .case-box,
  .case-page .case-box-cover-img img,
  .case-page .case-box-logo,
  .case-page .case-box-cover-img::after { transition: none; }
}