/* 专题页沿用中文站 1920/750 设计基准，所有视觉尺寸使用 rem 随全站根字号同步缩放。 */
.special-topic-page {
    --primary: #343b88;
    --accent: #18adb4;
    --page: #f3f4f9;
    --card: #fff;
    --line: #dde0ea;
    --text: #252a48;
    --shadow: 0 1.2rem 3.5rem rgba(36, 45, 95, .06);
    padding-bottom: 7.2rem;
    overflow: hidden;
    color: var(--text);
    background: var(--page);
    font: 1.6rem/1.75 "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
.special-topic-page, .special-topic-page * { box-sizing: border-box; }
.special-topic-page a { color: inherit; text-decoration: none; }
.special-topic-page .topic-container { width: min(93.75%, 180rem); margin-right: auto; margin-left: auto; }
.topic-module-shell { margin-top: 3.6rem; }
/* Banner 直接按上传图片原始比例缩放，避免包含文字的图片被裁切。 */
.topic-hero { width:100%; overflow:hidden; }
.topic-hero picture { display:block; }
.topic-hero-image { width:100%; height:auto; display:block; }
.topic-section { padding:clamp(3rem,3.2vw,5.8rem); border:0.1rem solid var(--line); border-radius:1.8rem; background:var(--card); box-shadow:var(--shadow); }
.topic-section-head { margin-bottom:3rem; }
.topic-section-kicker { display:block; margin-bottom:-0.3rem; color:var(--accent); font-size:1.3rem; line-height:1.3; }
.topic-section h2 { position:relative; display:inline-block; margin:0; color:var(--primary); font-size:clamp(2.7rem,2vw,3.8rem); font-weight:500; line-height:1.35; }
/* 按对照截图红线的实际起止位置设置为 137.5px，并以 rem 保持页面等比例缩放。 */
.topic-section h2::after { position:absolute; bottom:-1rem; left:0; width:13rem; height:0.3rem; border-radius:0.3rem; background:var(--accent); content:""; }
.topic-section-lead { margin:2.6rem 0 0; color:#4e556e; }
/* 简介中的固定 color 标签使用与模块标题相同的品牌色。 */
.topic-section-lead-highlight { color:var(--primary); }
.topic-subheading { margin:2.8rem 0 1.4rem; color:var(--primary); font-size:2.1rem; font-weight:600; }
.topic-table-wrap { width:100%; overflow-x:auto; border-radius:1.3rem 1.3rem 0 0; }
.special-topic-page table { width:100%; min-width:88rem; border-collapse:separate; border-spacing:0; text-align:left; }
/* 表头仅保留上方左右圆角，下方左右保持直角并与数据行自然衔接。 */
/* PC端上下内边距加至 1.5rem，使表格行高更贴近设计稿；手机端仍由媒体查询单独控制。 */
.special-topic-page th, .special-topic-page td { padding:1.5rem 1.8rem; border-bottom:0.1rem solid #edf0f5; font-size:1.4rem; vertical-align:middle; }
/* 产品按钮加高后扣减该表格单元格的上下留白，使整体行高维持调整前的尺寸。 */
.topic-product-table td { padding-top:0.8rem; padding-bottom:0.8rem; }
.special-topic-page th { color:#fff; border-bottom:0; background:#4653A2; font-weight:500; }
.special-topic-page th:first-child { border-radius:1.3rem 0 0 0; }
.special-topic-page th:last-child { border-radius:0 1.3rem 0 0; }
.special-topic-page tr:nth-child(even) td { background:#f4f5fa; }
/* 表格第一列正文使用设计稿品牌蓝，突出每一行的特性或产品类别名称。 */
.special-topic-page tbody td:first-child { color:#4653A2; }
/* 数据行只提供颜色反馈，本身不能点击，因此保持普通光标。 */
.special-topic-page tbody tr { cursor:default; transition:background-color .25s ease,color .25s ease; }
.special-topic-page tbody tr:hover td { color:var(--primary); background:#e9ecf6; }
.special-topic-page tbody tr:last-child td { border-bottom:0.1rem solid #d9dde8; }
/* 代表产品标签固定为 3.2rem 高并垂直居中；所有产品按钮均显示手型，表格整行仍保持普通光标。 */
.topic-tag { position:relative; z-index:0; min-height:3.2rem; display:inline-flex; align-items:center; justify-content:center; margin:0.3rem 0.5rem 0.3rem 0; padding:0 1.4rem; border:0.1rem solid #83d5d5; border-radius:99.9rem; color:#228e94; background:#f5ffff; font-size:1.2rem; line-height:1; white-space:nowrap; vertical-align:middle; cursor:pointer; transition:transform .25s ease,border-color .25s ease,background-color .25s ease,box-shadow .25s ease; }
/* 子产品配置链接后，各链接状态仍沿用产品标签颜色，不随全站链接样式变色。 */
a.topic-tag, a.topic-tag:visited, a.topic-tag:hover, a.topic-tag:focus, a.topic-tag:active { color:#228e94; }
.topic-tag:hover { z-index:1; border-color:var(--accent); background:#FFFFFF; box-shadow:0 0.4rem 1.2rem rgba(24,173,180,.18); transform:scale(1.06); }
.topic-card-grid { display:grid; grid-template-columns:repeat(var(--columns,3),1fr); gap:1.8rem; }
.topic-info-card { position:relative; z-index:0; min-height:19.5rem; padding:2.9rem; overflow:hidden; border:0.1rem solid #DDE0EA; border-radius:0.4rem 0.4rem 1.4rem 1.4rem; background:#FFFFFF; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
/* 按设计稿 4px 4px 14px 14px 等比换算，顶部渐变线同步使用 0.4rem 小圆角。 */
.topic-info-card::before { position:absolute; top:0; right:0; left:0; height:0.3rem; border-radius:0.4rem 0.4rem 0 0; background:linear-gradient(90deg,var(--primary),var(--accent)); content:""; }
/* 核心优势没有链接，仅在支持鼠标悬停的设备上提供轻微放大反馈。 */
@media (hover:hover) { .topic-info-card:hover { z-index:1; border-color:#C9CDDD; box-shadow:0 1.2rem 2.8rem rgba(52,59,136,.14); transform:translateY(-0.2rem) scale(1.025); } }
.topic-card-icon { width:4.2rem; height:4.2rem; display:grid; margin-bottom:1.5rem; place-items:center; overflow:hidden; border-radius:1.2rem; background:linear-gradient(145deg,#eef1ff,#e8fbfa); font-size:2.2rem; }
.topic-card-icon img { width:100%; height:100%; object-fit:contain; }
.topic-info-card h3, .topic-list-card h3 { margin:0 0 0.8rem; color:var(--primary); font-size:1.8rem; font-weight:600; }
/* 核心优势正文使用设计稿的宽松行距，提升两行及多行内容的可读性。 */
.topic-info-card p { margin:0; color:#5d6478; font-size:1.4rem; line-height:2.8rem; }
.topic-list-grid { display:grid; grid-template-columns:repeat(var(--columns,2),1fr); gap:1.8rem; }
.topic-list-card { position:relative; z-index:0; min-height:22.8rem; padding:2.7rem; border:0.1rem solid #DDE0EA; border-top:0.3rem solid transparent; border-radius:0.4rem 0.4rem 1.4rem 1.4rem; background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,var(--primary),var(--accent)) border-box; }
/* 内容列表和服务卡片仅在鼠标设备上轻微放大，避免手机触摸后残留悬停状态。 */
@media (hover:hover) { .topic-list-grid--content .topic-list-card,.topic-list-grid--services .topic-list-card { transition:transform .25s ease,box-shadow .25s ease; } .topic-list-grid--content .topic-list-card:hover,.topic-list-grid--services .topic-list-card:hover { z-index:1; box-shadow:0 1.2rem 2.8rem rgba(52,59,136,.14); transform:translateY(-0.2rem) scale(1.025); } }
.topic-list-card ul { margin:0; padding:0; list-style:none; }
/* 应用领域列表使用与设计稿一致的宽松行距，顶部小圆角与底部大圆角保持统一。 */
.topic-list-card li { position:relative; padding-left:1.7rem; color:#565d72; font-size:1.4rem; line-height:2.8rem; }
.topic-list-card li::before { position:absolute; top:.78em; left:0; width:0.5rem; height:0.5rem; border-radius:50%; background:var(--accent); content:""; }
.topic-process { display:grid; grid-template-columns:repeat(6,1fr); gap:2.8rem; margin-top:4rem; counter-reset:process; }
.topic-process-step { position:relative; z-index:0; min-height:11.2rem; display:grid; padding:2.4rem 1.2rem 1.3rem; place-content:center; border:0.1rem solid #ccd1df; border-radius:1.3rem; text-align:center; background:#fafbfe; counter-increment:process; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
/* 服务流程步骤在鼠标悬停时轻微放大并提起，保持与服务卡片一致的交互反馈。 */
@media (hover:hover) { .topic-process-step:hover { z-index:1; border-color:#BFC5D7; box-shadow:0 1.2rem 2.8rem rgba(52,59,136,.14); transform:translateY(-0.2rem) scale(1.025); } }
.topic-process-step::before { position:absolute; top:-1.8rem; left:50%; width:3.8rem; height:3.8rem; display:grid; place-items:center; border-radius:50%; transform:translateX(-50%); color:#fff; background:var(--primary); content:counter(process); }
/* 箭头占满两张流程卡之间的 2.8rem 间距，避免横向位移后被下一张卡片遮住。 */
.topic-process-step::after { position:absolute; top:50%; right:-2.8rem; z-index:2; width:2.8rem; color:var(--accent); font-size:2.6rem; line-height:1; text-align:center; transform:translateY(-50%); pointer-events:none; content:"→"; }
.topic-process-step:last-child::after { display:none; }
.topic-process-step strong { display:block; color:#303550; font-size:1.4rem; }
.topic-process-step small { color:#697087; }
.topic-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; }
.topic-stat-card { min-height:17.5rem; display:grid; padding:2.6rem; place-content:center; border:0.1rem solid var(--line); border-radius:1.4rem; text-align:center; }
/* 数据卡片的大标题使用品牌紫到青色的整段文字渐变，与设计稿保持一致。 */
.topic-stat-card strong { color:transparent; background:linear-gradient(90deg,#4653A2 0%,#18ADB4 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-size:clamp(3.4rem,2.5vw,5rem); font-weight:400; line-height:1.15; }
.topic-stat-card strong em { color:inherit; font-style:normal; }
/* 数据卡片的两行子标题使用设计稿相同的字号、行高和灰紫色，仅保留上下间距区别。 */
.topic-stat-card span { margin-top:1.6rem; color:#5B5F6E; font-size:1.6rem; line-height:2.4rem; }
.topic-stat-card small { margin-top:0.8rem; color:#5B5F6E; font-size:1.6rem; line-height:2.4rem; }
.topic-case-category + .topic-case-category { margin-top:2.2rem; }
.topic-case-category h3 { margin:0 0 1rem; color:var(--primary); font-size:1.8rem; font-weight:500; }
/* “案例”标签独立使用品牌紫色竖线，不能与上方案例分类标题混为同一层级。 */
.topic-case-label { position:relative; margin-bottom:1rem; padding-left:1.6rem; color:var(--primary); font-size:1.4rem; line-height:2.4rem; }
.topic-case-label::before { position:absolute; top:0; bottom:0; left:0; width:0.4rem; border-radius:0.4rem; background:var(--primary); content:""; }
.topic-case-card { position:relative; margin-top:1rem; padding:2rem 2.4rem 2rem 3rem; border:0.1rem solid var(--line); border-left:0.5rem solid var(--accent); border-radius:0.4rem 1.2rem 1.2rem 0.4rem; }
/* IF 标签按设计稿扩大到约 90×32px，并由左侧亮青向右侧品牌青渐变。 */
.topic-case-if { min-width:9rem; height:3.2rem; display:inline-flex; align-items:center; justify-content:center; margin-bottom:0.8rem; padding:0 1.8rem; border-radius:99.9rem; color:#fff; background:linear-gradient(90deg,#35C7C5 0%,#18ADB4 100%); font-size:1.4rem; line-height:1; }
/* 案例卡片各文本块间距和自身行高同步收紧，外部模块间距保持不变。 */
.topic-case-card h4 { margin:0 0 0.8rem; color:#303550; font-size:1.5rem; font-weight:500; line-height:2.2rem; }
/* 论文标题前的图钉属于固定视觉元素，不要求后台用户重复填写。 */
.topic-case-card h4::before { margin-right:0.6rem; content:"📌"; }
.topic-case-journal { display:block; color:#15989f; font-size:1.3rem; line-height:2.2rem; }
/* 案例介绍可能自动换成多行，单独放宽正文行高以匹配设计稿阅读节奏。 */
.topic-case-card p { margin:0.8rem 0 0; color:#666d80; font-size:1.3rem; line-height:2.4rem; }
.topic-cta { position:relative; padding:4.8rem clamp(2.4rem,5vw,8rem); overflow:hidden; border-radius:1.5rem; color:#fff; text-align:center; background:radial-gradient(circle at 12% 45%,transparent 0 6rem,rgba(25,180,184,.18) 6.1rem 6.3rem,transparent 6.4rem),linear-gradient(110deg,#173f79,#315c9f); background-position:center; background-size:cover; }
/* .topic-cta::after { position:absolute; right:-7rem; bottom:-9rem; width:23rem; height:23rem; border:0.2rem solid rgba(28,190,190,.17); border-radius:50%; content:""; } */
.topic-cta h2 { margin:0; color:#fff; font-size:clamp(2.7rem,2vw,3.8rem); font-weight:400; }
.topic-cta p { margin:0.7rem 0 2.2rem; color:rgba(255,255,255,.7); font-size:1.3rem; }
.topic-cta-actions { position:relative; z-index:1; display:flex; justify-content:center; flex-wrap:wrap; gap:1.2rem; }
.topic-cta-button { min-width:20.5rem; padding:1.1rem 2.4rem; border:0.1rem solid rgba(255,255,255,.35); border-radius:99.9rem; color:#2d4775; background:#fff; font-size:1.4rem; }
.topic-cta-button.primary { color:#fff; border-color:var(--accent); background:var(--accent); }
/* 最后一个联系方式按钮使用透明底白色描边，与中间白底按钮形成明确区别。 */
.topic-cta-button.outline { color:#fff; border-color:rgba(255,255,255,.72); background:transparent; }
/* CTA 填写链接后会由 span 变为 a，这里明确链接状态的颜色，避免被页面全局链接继承色覆盖。 */
.special-topic-page a.topic-cta-button { color:#2d4775; }
.special-topic-page a.topic-cta-button.primary,.special-topic-page a.topic-cta-button.outline { color:#fff; }
/* 实验用途提示使用固定合规样式，左侧品牌色竖线用于快速识别重要说明。 */
.topic-notice-shell { position:relative; z-index:2; }
.topic-notice { position:relative; padding:2.8rem 3.2rem; border:0.1rem solid #C9C4E8; border-left:0.5rem solid #4653A2; border-radius:0.4rem 1.4rem 1.4rem 0.4rem; color:#55527E; background:#F3F1FC; font-size:1.4rem; line-height:2.4rem; }
.topic-notice p { margin:0; }


/* 手动调整模块样式 */
.topic-cta{background: linear-gradient(171deg, #2c3370 0%, #4653a2 55%, #38428a 100%);overflow: visible;margin-top: 12rem;min-height: 30rem;margin-bottom: 5.2rem;padding: 5rem 0 7rem;}
.topic-cta p{margin: 2.5rem 0 4rem;font-size: 1.6rem;}
.topic-cta-button{padding: 2rem 3.5rem;}

.topic-cta .positionLeft{position: absolute;left: 24.4rem;width: 31.2rem;height: 31.2rem;top: -12.6rem;}
.topic-cta .positionLeft::before{position: absolute;top: 0;left: 0;width: 30.8rem;height: 30.8rem;border: 0.2rem solid #26B7BC;border-radius: 50%;content: "";opacity: 0.08;}
.topic-cta .positionLeft::after{position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width: 23.6rem;height: 23.6rem;border: 0.2rem solid #26B7BC;border-radius: 50%;content: "";opacity: 0.28;}

.topic-cta .positionRight{position: absolute;right: 12rem;width: 26rem;height: 26rem;bottom: -9rem;}
.topic-cta .positionRight::before{position: absolute;top: 0;left: 0;width: 25.6rem;height: 25.6rem;border: 0.2rem solid #26B7BC;border-radius: 50%;content: "";opacity: 0.2;}




@media (max-width:1100px) {
    .topic-card-grid, .topic-list-grid, .topic-stats-grid { grid-template-columns:repeat(2,1fr); }
    .topic-process { grid-template-columns:repeat(3,1fr); row-gap:3.8rem; }
    .topic-process-step:nth-child(3)::after { display:none; }
}
@media (max-width:750px) {
    .special-topic-page { padding-bottom:6rem; font-size:2.4rem; line-height:1.75; }
    .special-topic-page .topic-container { width:69rem; max-width:calc(100% - 4rem); }
    .special-topic-page p,
    .special-topic-page li,
    .special-topic-page th,
    .special-topic-page td,
    .special-topic-page small { font-size:2.4rem; }

    .topic-module-shell { margin-top:3.2rem; }
    .topic-section { padding:4rem 3.2rem; border-radius:1.8rem; }
    .topic-section-head { margin-bottom:4rem; }
    .topic-section-kicker { margin-bottom:0.4rem; font-size:2.4rem; line-height:1.4; }
    .topic-section h2 { font-size:3.8rem; line-height:1.4; }
    .topic-section h2::after { bottom:-1.2rem; width:12rem; height:0.4rem; }
    .topic-section-lead { margin-top:3rem; font-size:2.4rem; line-height:1.75; }
    .topic-subheading { margin:3.6rem 0 2.4rem; font-size:2.8rem; line-height:1.5; }

    .topic-table-wrap { margin-right:-0.8rem; padding-bottom:1rem; border-radius:1.3rem 1.3rem 0 0; -webkit-overflow-scrolling:touch; }
    .special-topic-page table { min-width:110rem; }
    .special-topic-page th, .special-topic-page td { padding:2rem 2.2rem; line-height:1.6; }
    .topic-tag { margin:0.5rem 0.8rem 0.5rem 0; padding:0.5rem 1.6rem; font-size:2.4rem; line-height:1.5; }

    .topic-card-grid, .topic-list-grid, .topic-stats-grid { grid-template-columns:1fr; }
    .topic-card-grid, .topic-list-grid, .topic-stats-grid { gap:2.4rem; }
    .topic-info-card, .topic-list-card { min-height:auto; padding:4rem 3.2rem; border-radius:0.6rem 0.6rem 1.8rem 1.8rem; }
    .topic-card-icon { width:7.2rem; height:7.2rem; margin-bottom:2.4rem; border-radius:1.6rem; font-size:4rem; }
    .topic-info-card h3, .topic-list-card h3 { margin-bottom:1.4rem; font-size:2.8rem; line-height:1.5; }
    .topic-info-card p, .topic-list-card li { font-size:2.4rem; line-height:1.75; }
    .topic-list-card li { padding-left:2.4rem; }
    .topic-list-card li::before { top:1.55rem; width:0.8rem; height:0.8rem; }

    .topic-process { grid-template-columns:repeat(2,1fr); gap:5rem 3rem; margin-top:5rem; }
    .topic-process-step { min-height:16rem; padding:4rem 1.6rem 2rem; border-radius:1.6rem; }
    .topic-process-step::before { top:-2.4rem; width:5.2rem; height:5.2rem; font-size:2.4rem; }
    .topic-process-step::after { right:-3rem; width:3rem; font-size:3.2rem; }
    .topic-process-step:nth-child(3)::after { display:block; }
    .topic-process-step:nth-child(even)::after { display:none; }
    .topic-process-step strong { font-size:2.6rem; line-height:1.45; }
    .topic-process-step small { margin-top:0.8rem; font-size:2.4rem; line-height:1.45; }

    .topic-stat-card { min-height:22rem; padding:3.2rem; border-radius:1.6rem; }
    .topic-stat-card strong { font-size:5rem; }
    .topic-stat-card span { margin-top:1.4rem; font-size:2.6rem; line-height:1.5; }
    .topic-stat-card small { margin-top:0.6rem; font-size:2.6rem; line-height:1.5; }

    .topic-case-category + .topic-case-category { margin-top:3.6rem; }
    .topic-case-category h3 { margin-bottom:1.8rem; font-size:2.8rem; line-height:1.5; }
    .topic-case-label { margin-bottom:1.8rem; padding-left:2rem; font-size:2.4rem; line-height:3.6rem; }
    .topic-case-label::before { width:0.6rem; }
    .topic-case-card { margin-top:1.8rem; padding:3.2rem 2.8rem; border-left-width:0.6rem; border-radius:0.6rem 1.6rem 1.6rem 0.6rem; }
    .topic-case-if { min-width:12rem; height:4.8rem; margin-bottom:1rem; padding:0 2.2rem; font-size:2.4rem; }
    .topic-case-card h4 { margin-bottom:1rem; font-size:2.6rem; line-height:1.5; }
    .topic-case-journal { display:block; font-size:2.4rem; line-height:1.5; }
    .topic-case-card p { margin-top:1rem; font-size:2.4rem; line-height:1.65; }
    .topic-cta { min-height:auto; margin-top:6rem; margin-bottom:4rem; padding:6rem 3rem; border-radius:1.8rem; }
    .topic-cta h2 { font-size:4rem; line-height:1.4; }
    .topic-cta p { margin:2.4rem 0 3.6rem; font-size:2.4rem; line-height:1.65; }
    .topic-cta-actions { flex-direction:column; gap:2rem; }
    .topic-cta-button { width:100%; min-height:7.2rem; display:flex; align-items:center; justify-content:center; padding:1.6rem 2.4rem; font-size:2.4rem; line-height:1.5; }
    .topic-cta .positionLeft { top:-6rem; left:-5rem; width:20rem; height:20rem; }
    .topic-cta .positionLeft::before { width:19.6rem; height:19.6rem; }
    .topic-cta .positionLeft::after { width:14rem; height:14rem; }
    .topic-cta .positionRight { right:-5rem; bottom:-6rem; width:18rem; height:18rem; }
    .topic-cta .positionRight::before { width:17.6rem; height:17.6rem; }

    .topic-notice { padding:3rem 2.8rem; border-left-width:0.6rem; border-radius:0.6rem 1.6rem 1.6rem 0.6rem; font-size:2.4rem; line-height:1.75; }
}