/* 页面主题层：本文件仅供 team-building.html 加载（晚于 tokens.css 与 style.css）。
其中的 :root 覆盖与 .btn / .hero / .card 等通用类覆盖是**刻意保留的页面主题**：
各落地页自成一套视觉规格，取值差异并非 token 冲突，不得为「统一」而随意拉平。
加载顺序：tokens.css → style.css → 本文件，故本文件的覆盖始终生效。 */
/* ============================================================================
企业团建落地页 · css/teambuild.css
----------------------------------------------------------------------------
来源：外部单页（「Paper & Ink 纸白+橙、方角」设计系统）经深度优化改造，
重新适配本站（达师管培）视觉调性。
作用域：全部选择器限定于 .tb-page（唯一包装类，同时承载 id="top"）。
类名：正文类名一律 tb- 前缀 —— 与 style.css / landing-brand.css /
peipao.css / talent.css 的 847 个类名零交集（已用脚本核验）。
----------------------------------------------------------------------------
与 style.css 的关系（本项目核心约定）：
① 样式只出不进 —— 本文件所有规则被 .tb-page 限定，不会外泄到其它页面；
② 反向渗入 —— style.css 中同名类会命中本页元素，故本页类名全量加 tb-
前缀，从命名层面消除了命中可能（无需逐条写中和规则）；
③ 让位 —— .topbar 与 .nav 均为 position:fixed，hero 需用
margin-top: calc(--topbar-effective + --nav-h) 让位（与 .pp-page 一致）。
----------------------------------------------------------------------------
调性映射（源 → 本站）：
纸白 #FAFAF7 → #FFFFFF / 次底 var(--c-bg-soft)（--c-bg-soft）
墨黑 #16181D → var(--c-text)（--c-text）
活力橙 #f2681f → 科技蓝 var(--c-primary)（--c-primary）
全站方角 radius:0 → 卡片 8px / 大块 12px / 标签 999px
海报级字号 → 本站字号阶梯（--fs-4xl 36px 封顶）
============================================================================ */
/* ═══════════════════════════════════════════════════════════
0. 本页令牌（写作包装类选择器，靠自定义属性继承生效，不污染 :root）
═══════════════════════════════════════════════════════════ */
.tb-page {
/* 主色系（对齐 style.css 品牌蓝） */
--tb-primary: #165DFF;
--tb-primary-hover: #4080FF;
--tb-primary-active: #0E42C1;
--tb-gradient: linear-gradient(135deg, var(--c-primary), var(--c-primary-active));
--tb-primary-soft: #F2F7FF;
/* 文字层级 */
--tb-ink: #303133;
--tb-ink-2: #606266;
--tb-ink-3: #606266;
/* 线/底 */
--tb-line: #E4E7ED;
--tb-line-soft: #EEF2F8;
/* 圆角 / 投影（对齐 --radius-card / --shadow-card） */
--tb-r-card: 8px;
--tb-r-lg: 12px;
--tb-r-btn: 6px;
--tb-r-pill: 999px;
--tb-shadow: 0 2px 10px rgba(22, 93, 255, .08);
--tb-shadow-hover: 0 6px 18px rgba(22, 93, 255, .14);
/* 节奏 */
--tb-wrap: var(--container, 1280px);
--tb-pad: 20px;
--tb-gap: 18px;
--tb-sec-pad: clamp(48px, 6vw, 78px);
--tb-dur: .25s;
--tb-ease: cubic-bezier(.16, 1, .3, 1);
}
/* ═══════════════════════════════════════════════════════════
1. 基础重置（仅作用于本页子树）
═══════════════════════════════════════════════════════════ */
.tb-page, .tb-page *, .tb-page *::before, .tb-page *::after { box-sizing: border-box; }
.tb-page html { scroll-behavior: smooth; }
.tb-page {
margin: 0;
background: #fff;
color: var(--tb-ink);
/* 与全站统一：原为原型模板自带的「雅黑优先」栈，本页字体在装有思源黑体的机器上
与其余栏目不一致 —— 已换成站点字体栈（同 style.css 的 body 与各落地页的 --*-sans）。 */
font-family: var(--font-sans-base); /* 唯一真源见 style.css :root */
font-size: 15px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
.tb-page h1, .tb-page h2, .tb-page h3, .tb-page h4, .tb-page h5, .tb-page h6 { margin: 0; font-weight: 700; line-height: 1.35; }
.tb-page p, .tb-page figure, .tb-page blockquote { margin: 0; }
.tb-page ul, .tb-page ol { margin: 0; padding: 0; list-style: none; }
.tb-page a { color: inherit; text-decoration: none; }
.tb-page img, .tb-page svg { max-width: 100%; display: block; }
.tb-page button { font: inherit; color: inherit; cursor: pointer; }
.tb-page table { border-collapse: collapse; width: 100%; }
.tb-page b, .tb-page strong { font-weight: 700; }
.tb-page :focus-visible { outline: 2px solid var(--tb-primary); outline-offset: 2px; border-radius: 2px; }
.tb-page ::selection { background: rgba(22, 93, 255, .16); }
/* 容器 */
.tb-page .tb-wrap { width: 100%; max-width: var(--tb-wrap); margin: 0 auto; padding: 0 var(--tb-pad); }
/* 无障碍隐藏（本页自带，避免依赖 style.css 的 .sr-only） */
.tb-page .tb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* ═══════════════════════════════════════════════════════════
2. 本站适配层：固定顶栏/导航让位 与 锚点避让
═══════════════════════════════════════════════════════════ */
.tb-page .tb-hero {
margin-top: calc(var(--topbar-effective) + var(--nav-h));
transition: margin-top .3s ease;
}
.tb-page .tb-sec[id], .tb-page .tb-hero[id] {
scroll-margin-top: calc(var(--topbar-effective) + var(--nav-h) + 24px);
}
/* ═══════════════════════════════════════════════════════════
3. 通用：区块 / 标题组 / 标签 / 文本
═══════════════════════════════════════════════════════════ */
.tb-page .tb-sec { padding: var(--tb-sec-pad) 0; background: #fff; }
.tb-page .tb-sec--soft { background: var(--tb-primary-soft); }
.tb-page .tb-head { max-width: 880px; margin: 0 0 40px; }
.tb-page .tb-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.tb-page .tb-flag {
display: inline-flex; align-items: center; gap: 10px;
font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: var(--tb-primary); margin-bottom: 14px;
}
.tb-page .tb-flag::before { content: ""; width: 26px; height: 2px; background: var(--tb-primary); border-radius: 2px; }
.tb-page .tb-head--center .tb-flag::after { content: ""; width: 26px; height: 2px; background: var(--tb-primary); border-radius: 2px; }
.tb-page .tb-h2 { font-size: clamp(24px, 3vw, 34px); color: var(--tb-ink); letter-spacing: -.01em; }
.tb-page .tb-h3 { font-size: 19px; color: var(--tb-ink); }
.tb-page .tb-lead { margin-top: 14px; font-size: 16px; line-height: 1.8; color: var(--tb-ink-2); }
.tb-page .tb-head--center .tb-lead { margin-left: auto; margin-right: auto; }
.tb-page .tb-k { font-size: 13px; font-weight: 700; color: var(--tb-primary); letter-spacing: .04em; }
.tb-page .tb-small { font-size: 13px; color: var(--tb-ink-3); }
/* 宽窄比图框（统一图片容器语言） */
.tb-page .tb-media {
position: relative; overflow: hidden;
border-radius: var(--tb-r-card); background: var(--tb-primary-soft);
border: 1px solid var(--tb-line);
}
.tb-page .tb-media > svg, .tb-page .tb-media > img { width: 100%; height: 100%; display: block; }
.tb-page .tb-media--16x9 { aspect-ratio: 16 / 9; }
.tb-page .tb-media--4x3 { aspect-ratio: 4 / 3; }
/* ═══════════════════════════════════════════════════════════
4. 按钮（沿用站点按钮语言：胶囊/圆角、渐变实心、描边次按钮）
═══════════════════════════════════════════════════════════ */
.tb-page .tb-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 46px; padding: 0 26px; border: 1px solid transparent;
border-radius: var(--tb-r-btn); font-size: 15px; font-weight: 700; line-height: 1;
transition: background-color var(--tb-dur) var(--tb-ease), color var(--tb-dur) var(--tb-ease),
border-color var(--tb-dur) var(--tb-ease), transform var(--tb-dur) var(--tb-ease),
box-shadow var(--tb-dur) var(--tb-ease);
white-space: nowrap;
}
.tb-page .tb-btn--solid { background: var(--tb-gradient); color: #fff; box-shadow: 0 6px 16px rgba(22, 93, 255, .22); }
.tb-page .tb-btn--solid:hover { background: var(--tb-primary-hover); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(22, 93, 255, .28); }
.tb-page .tb-btn--outline { background: #fff; color: var(--tb-primary); border-color: rgba(22, 93, 255, .38); }
.tb-page .tb-btn--outline:hover { background: var(--tb-primary-soft); border-color: var(--tb-primary); }
.tb-page .tb-btn--onDark { background: #fff; color: var(--tb-primary-active); }
.tb-page .tb-btn--onDark:hover { background: #EAF1FF; transform: translateY(-2px); }
.tb-page .tb-btn--ghostDark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.tb-page .tb-btn--ghostDark:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.tb-page .tb-btn--sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
/* ═══════════════════════════════════════════════════════════
5. 首屏 Hero
═══════════════════════════════════════════════════════════ */
.tb-page .tb-hero { position: relative; overflow: hidden; background: #fff; }
.tb-page .tb-hero-inner {
padding: clamp(48px, 6.5vw, 88px) 0 clamp(38px, 4.5vw, 58px);
}
.tb-page .tb-hero-grid {
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
gap: clamp(28px, 4vw, 56px); align-items: center;
}
.tb-page .tb-hero h1 {
font-size: clamp(30px, 4.6vw, 52px); line-height: 1.2; letter-spacing: -.02em; color: var(--tb-ink);
}
.tb-page .tb-hero h1 em { font-style: normal; color: var(--tb-primary); }
.tb-page .tb-hero-sub {
margin-top: 20px; font-size: 16px; line-height: 1.85; color: var(--tb-ink-2); max-width: 620px;
}
.tb-page .tb-hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.tb-page .tb-hero-tag {
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 15px; border-radius: var(--tb-r-pill);
background: var(--tb-primary-soft); color: var(--tb-primary);
border: 1px solid rgba(22, 93, 255, .16); font-size: 13px; font-weight: 700;
}
.tb-page .tb-hero-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tb-primary); }
.tb-page .tb-hero-acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.tb-page .tb-hero-note { margin-top: 18px; font-size: 13px; color: var(--tb-ink-3); }
.tb-page .tb-hero-art {
border-radius: var(--tb-r-lg); overflow: hidden;
box-shadow: 0 18px 44px rgba(22, 93, 255, .16);
}
.tb-page .tb-hero-art svg { width: 100%; height: auto; display: block; }
/* 页内锚点导航已按优化000 第8条整块删除（HTML 与下方响应式规则同步清理） */
/* ═══════════════════════════════════════════════════════════
6. 模块 2 · 核心业务
═══════════════════════════════════════════════════════════ */
.tb-page .tb-biz-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 52px); align-items: start; }
.tb-page .tb-biz-copy p + p { margin-top: 16px; }
.tb-page .tb-biz-copy p { font-size: 15.5px; line-height: 1.85; color: var(--tb-ink-2); }
.tb-page .tb-biz-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tb-gap); }
.tb-page .tb-biz-item {
display: flex; gap: 13px; align-items: flex-start;
padding: 18px 18px 17px; border-radius: var(--tb-r-card);
background: #fff; border: 1px solid var(--tb-line);
transition: border-color var(--tb-dur) var(--tb-ease), box-shadow var(--tb-dur) var(--tb-ease),
transform var(--tb-dur) var(--tb-ease), background var(--tb-dur) var(--tb-ease);
}
/* 优化000 第9条：hover 背景 + 边框 + 上浮动效，明确告知访客所处区域 */
.tb-page .tb-biz-item:hover {
border-color: rgba(22, 93, 255, .4); box-shadow: var(--tb-shadow); transform: translateY(-2px);
background: linear-gradient(180deg, #fff 0%, #F3F7FF 100%);
}
.tb-page .tb-biz-item:hover b { color: var(--tb-primary); }
.tb-page .tb-biz-ico {
flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px;
display: grid; place-items: center; background: var(--tb-primary-soft); color: var(--tb-primary);
}
.tb-page .tb-biz-ico svg { width: 20px; height: 20px; }
.tb-page .tb-biz-item b { display: block; font-size: 14.5px; color: var(--tb-ink); line-height: 1.5; }
.tb-page .tb-biz-outcome {
grid-column: 1 / -1; margin-top: 4px;
padding: 18px 20px; border-radius: var(--tb-r-card);
background: var(--tb-primary-soft); border: 1px solid rgba(22, 93, 255, .16);
font-size: 15px; line-height: 1.8; color: var(--tb-primary-active); font-weight: 600;
}
.tb-page .tb-biz-media { margin-bottom: 24px; }
/* ═══════════════════════════════════════════════════════════
7. 模块 3 · 团建项目体系（Tab + 项目卡）
═══════════════════════════════════════════════════════════ */
.tb-page .tb-tabs {
display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
margin: 0 0 28px;
}
.tb-page .tb-tab {
min-height: 44px; padding: 0 24px; border-radius: var(--tb-r-pill);
background: #fff; border: 1px solid var(--tb-line); color: var(--tb-ink-2);
font-size: 15px; font-weight: 700;
transition: all var(--tb-dur) var(--tb-ease);
}
.tb-page .tb-tab:hover { border-color: rgba(22, 93, 255, .45); color: var(--tb-primary); }
.tb-page .tb-tab[aria-selected="true"] {
background: var(--tb-gradient); border-color: transparent; color: #fff;
box-shadow: 0 6px 16px rgba(22, 93, 255, .22);
}
.tb-page .tb-tab-panel[hidden] { display: none; }
.tb-page .tb-panel-fit {
max-width: 900px; margin: 0 auto 28px; text-align: center;
padding: 15px 20px; border-radius: var(--tb-r-card);
background: var(--tb-primary-soft); border: 1px solid rgba(22, 93, 255, .14);
font-size: 14.5px; line-height: 1.8; color: var(--tb-ink-2);
}
.tb-page .tb-panel-fit b { color: var(--tb-primary); }
.tb-page .tb-prog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tb-gap); }
.tb-page .tb-prog-card {
display: flex; flex-direction: column;
background: #fff; border: 1px solid var(--tb-line); border-radius: var(--tb-r-card);
overflow: hidden; box-shadow: var(--tb-shadow);
transition: transform var(--tb-dur) var(--tb-ease), box-shadow var(--tb-dur) var(--tb-ease), border-color var(--tb-dur) var(--tb-ease);
}
.tb-page .tb-prog-card:hover {
transform: translateY(-4px); box-shadow: var(--tb-shadow-hover); border-color: rgba(22, 93, 255, .3);
background: linear-gradient(180deg, #fff 0%, #F3F7FF 100%);
}
.tb-page .tb-prog-thumb { border: 0; border-radius: 0; border-bottom: 1px solid var(--tb-line-soft); background: var(--tb-primary-soft); }
.tb-page .tb-prog-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px; }
.tb-page .tb-prog-tag {
align-self: flex-start; margin-bottom: 10px;
padding: 4px 11px; border-radius: var(--tb-r-pill);
background: var(--tb-primary-soft); color: var(--tb-primary);
font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.tb-page .tb-prog-body h3 { font-size: 17px; line-height: 1.45; color: var(--tb-ink); }
.tb-page .tb-prog-desc { margin-top: 10px; font-size: 14px; line-height: 1.8; color: var(--tb-ink-2); }
.tb-page .tb-prog-fit {
margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--tb-line);
font-size: 13px; line-height: 1.7; color: var(--tb-ink-3);
}
.tb-page .tb-prog-fit b { color: var(--tb-ink-2); margin-right: 8px; font-weight: 700; }
.tb-page .tb-prog-points { margin-top: 14px; }
.tb-page .tb-prog-points .tb-k { display: block; margin-bottom: 8px; }
.tb-page .tb-prog-points li {
position: relative; padding-left: 18px; margin-bottom: 7px;
font-size: 13.5px; line-height: 1.7; color: var(--tb-ink-2);
}
.tb-page .tb-prog-points li:last-child { margin-bottom: 0; }
.tb-page .tb-prog-points li::before {
content: ""; position: absolute; left: 0; top: .58em;
width: 6px; height: 6px; border-radius: 50%; background: var(--tb-primary); opacity: .8;
}
.tb-page .tb-prog-open {
margin-top: 18px; align-self: flex-start;
display: inline-flex; align-items: center; gap: 7px;
padding: 0; border: 0; background: none;
color: var(--tb-primary); font-size: 14px; font-weight: 700;
transition: gap var(--tb-dur) var(--tb-ease);
}
.tb-page .tb-prog-open:hover { gap: 12px; }
.tb-page .tb-prog-open svg { width: 16px; height: 16px; }
/* 项目详情（弹窗内容） */
.tb-page .tb-pe-grid { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 0 18px; }
.tb-page .tb-pe-k {
padding: 14px 0; border-top: 1px solid var(--tb-line);
font-size: 13.5px; font-weight: 700; color: var(--tb-primary);
}
.tb-page .tb-pe-v { padding: 14px 0; border-top: 1px solid var(--tb-line); font-size: 14px; line-height: 1.8; color: var(--tb-ink-2); }
.tb-page .tb-pe-v li { position: relative; padding-left: 18px; margin-bottom: 6px; }
.tb-page .tb-pe-v li:last-child { margin-bottom: 0; }
.tb-page .tb-pe-v li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--tb-primary); opacity: .75; }
.tb-page .tb-prog-note {
margin-top: 28px; text-align: center;
padding: 22px 24px; border-radius: var(--tb-r-card);
background: var(--tb-primary-soft); border: 1px dashed rgba(22, 93, 255, .35);
font-size: 15px; line-height: 1.8; color: var(--tb-ink-2);
}
.tb-page .tb-prog-note a { color: var(--tb-primary); font-weight: 700; }
.tb-page .tb-prog-note a:hover { text-decoration: underline; }
/* ═══════════════════════════════════════════════════════════
8. 模块 4 · 产品与配套框架
═══════════════════════════════════════════════════════════ */
.tb-page .tb-prod-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tb-gap); }
.tb-page .tb-prod-card {
display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0;
background: #fff; border: 1px solid var(--tb-line); border-radius: var(--tb-r-card);
overflow: hidden; box-shadow: var(--tb-shadow);
transition: transform var(--tb-dur) var(--tb-ease), box-shadow var(--tb-dur) var(--tb-ease), border-color var(--tb-dur) var(--tb-ease);
}
.tb-page .tb-prod-card:hover { transform: translateY(-4px); box-shadow: var(--tb-shadow-hover); border-color: rgba(22, 93, 255, .3); }
.tb-page .tb-prod-card--feature { border-color: rgba(22, 93, 255, .3); }
.tb-page .tb-prod-media { border: 0; border-radius: 0; border-right: 1px solid var(--tb-line-soft); }
.tb-page .tb-prod-body { padding: 22px; display: flex; flex-direction: column; justify-content: center; }
.tb-page .tb-prod-no {
display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px;
font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--tb-primary);
}
.tb-page .tb-prod-no::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(22, 93, 255, .22); }
.tb-page .tb-prod-role {
display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: var(--tb-r-pill);
font-size: 11px; font-weight: 700; letter-spacing: .02em;
background: var(--tb-primary-soft); color: var(--tb-primary);
}
.tb-page .tb-prod-role--sub { background: #F4F6FA; color: var(--tb-ink-3); }
.tb-page .tb-prod-body h3 { font-size: 18px; color: var(--tb-ink); }
.tb-page .tb-prod-hint { margin-top: 9px; font-size: 13.5px; line-height: 1.75; color: var(--tb-ink-3); }
.tb-page .tb-prod-desc { margin-top: 12px; font-size: 14px; line-height: 1.8; color: var(--tb-ink-2); }
/* ═══════════════════════════════════════════════════════════
9. 模块 5 · 四层服务体系
═══════════════════════════════════════════════════════════ */
.tb-page .tb-sys-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tb-gap); }
.tb-page .tb-sys-card {
position: relative; padding: 24px 22px;
background: #fff; border: 1px solid var(--tb-line); border-radius: var(--tb-r-card);
box-shadow: var(--tb-shadow);
transition: transform var(--tb-dur) var(--tb-ease), box-shadow var(--tb-dur) var(--tb-ease), border-color var(--tb-dur) var(--tb-ease);
}
.tb-page .tb-sys-card:hover {
transform: translateY(-4px); box-shadow: var(--tb-shadow-hover); border-color: rgba(22, 93, 255, .3);
background: linear-gradient(180deg, #fff 0%, #F3F7FF 100%);
}
.tb-page .tb-sys-card::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
background: var(--tb-gradient); opacity: .9;
border-radius: var(--tb-r-card) var(--tb-r-card) 0 0;
}
/* 优化000 第10条：序号与标题同一行 —— 序号改小号内联块并与 h3 基线对齐 */
.tb-page .tb-sys-idx {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; margin: 0 10px 0 0; border-radius: 8px;
background: var(--tb-primary-soft); color: var(--tb-primary);
font-size: 14px; font-weight: 800; letter-spacing: .02em;
vertical-align: middle;
}
.tb-page .tb-sys-card h3 {
display: inline-block; vertical-align: middle;
font-size: 16.5px; line-height: 1.5; color: var(--tb-ink);
}
.tb-page .tb-sys-card p { margin-top: 12px; font-size: 13.5px; line-height: 1.8; color: var(--tb-ink-2); }
.tb-page .tb-sys-media { margin-bottom: 16px; }
/* ═══════════════════════════════════════════════════════════
10. 模块 6 · 服务详情
═══════════════════════════════════════════════════════════ */
.tb-page .tb-detail {
display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 0;
background: #fff; border: 1px solid var(--tb-line); border-radius: var(--tb-r-lg);
overflow: hidden; box-shadow: var(--tb-shadow); margin-bottom: var(--tb-gap);
transition: box-shadow var(--tb-dur) var(--tb-ease), border-color var(--tb-dur) var(--tb-ease);
}
.tb-page .tb-detail:hover {
box-shadow: var(--tb-shadow-hover); border-color: rgba(22, 93, 255, .28);
background: linear-gradient(180deg, #fff 0%, #F3F7FF 100%);
}
.tb-page .tb-detail--primary { border-color: rgba(22, 93, 255, .35); }
.tb-page .tb-detail-media { border: 0; border-radius: 0; border-right: 1px solid var(--tb-line-soft); }
.tb-page .tb-detail-body { padding: 26px 28px; }
.tb-page .tb-detail-no {
display: inline-flex; align-items: center; gap: 9px; margin-bottom: 12px;
font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--tb-primary);
}
.tb-page .tb-detail-role { padding: 2px 9px; border-radius: var(--tb-r-pill); font-size: 11px; background: var(--tb-primary-soft); color: var(--tb-primary); letter-spacing: .02em; }
.tb-page .tb-detail-role--sub { background: #F4F6FA; color: var(--tb-ink-3); }
.tb-page .tb-detail-body h3 { font-size: 19px; color: var(--tb-ink); }
.tb-page .tb-detail-fit { margin-top: 11px; font-size: 14px; line-height: 1.85; color: var(--tb-ink-2); }
.tb-page .tb-detail-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin-top: 18px; }
.tb-page .tb-detail-list .tb-k { display: block; margin-bottom: 9px; }
.tb-page .tb-detail-list li { position: relative; padding-left: 18px; margin-bottom: 6px; font-size: 13.5px; line-height: 1.7; color: var(--tb-ink-2); }
.tb-page .tb-detail-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--tb-primary); opacity: .75; }
.tb-page .tb-pair-label {
margin-top: 18px; padding: 13px 16px; border-radius: var(--tb-r-card);
background: var(--tb-primary-soft); border: 1px solid rgba(22, 93, 255, .16);
font-size: 13.5px; line-height: 1.75; color: var(--tb-primary-active); font-weight: 600;
}
/* ═══════════════════════════════════════════════════════════
11. 模块 7 · 落地实力
═══════════════════════════════════════════════════════════ */
.tb-page .tb-st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tb-gap); }
.tb-page .tb-st-card {
display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 0;
background: #fff; border: 1px solid var(--tb-line); border-radius: var(--tb-r-card);
overflow: hidden; box-shadow: var(--tb-shadow);
transition: transform var(--tb-dur) var(--tb-ease), box-shadow var(--tb-dur) var(--tb-ease), border-color var(--tb-dur) var(--tb-ease);
}
.tb-page .tb-st-card:hover {
transform: translateY(-4px); box-shadow: var(--tb-shadow-hover); border-color: rgba(22, 93, 255, .3);
background: linear-gradient(180deg, #fff 0%, #F3F7FF 100%);
}
.tb-page .tb-st-body { padding: 22px; }
.tb-page .tb-st-no { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 11px; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--tb-primary); }
.tb-page .tb-st-body h3 { font-size: 16.5px; line-height: 1.5; color: var(--tb-ink); }
.tb-page .tb-st-body p { margin-top: 10px; font-size: 13.5px; line-height: 1.8; color: var(--tb-ink-2); }
.tb-page .tb-st-media { border: 0; border-radius: 0; border-left: 1px solid var(--tb-line-soft); }
/* ═══════════════════════════════════════════════════════════
12. 模块 8 · 品牌定位
═══════════════════════════════════════════════════════════ */
.tb-page .tb-position-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 52px); align-items: center; }
.tb-page .tb-position-copy .tb-lead { font-size: 16.5px; }
.tb-page .tb-position-copy p { margin-top: 16px; font-size: 15px; line-height: 1.85; color: var(--tb-ink-2); }
.tb-page .tb-disclaimer {
margin-top: 22px; padding: 15px 18px; border-radius: var(--tb-r-card);
background: #F7F8FA; border-left: 3px solid var(--tb-line);
font-size: 13px; line-height: 1.8; color: var(--tb-ink-3);
}
.tb-page .tb-position-media { border-radius: var(--tb-r-lg); overflow: hidden; box-shadow: var(--tb-shadow); }
/* ═══════════════════════════════════════════════════════════
12b. 常见问题（GEO：问答型内容）
═══════════════════════════════════════════════════════════ */
.tb-page .tb-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tb-gap); }
.tb-page .tb-faq-item {
padding: 22px 24px; border-radius: var(--tb-r-card);
background: #fff; border: 1px solid var(--tb-line);
border-left: 3px solid var(--tb-primary);
box-shadow: var(--tb-shadow);
transition: box-shadow var(--tb-dur) var(--tb-ease), border-color var(--tb-dur) var(--tb-ease),
transform var(--tb-dur) var(--tb-ease), background var(--tb-dur) var(--tb-ease);
}
/* 优化000 第9条：常见问题 hover —— 背景 + 边框 + 上浮 + 标题变色 */
.tb-page .tb-faq-item:hover {
box-shadow: var(--tb-shadow-hover); border-color: rgba(22, 93, 255, .3);
transform: translateY(-3px);
background: linear-gradient(180deg, #fff 0%, #F3F7FF 100%);
}
.tb-page .tb-faq-item:hover .tb-faq-q { color: var(--tb-primary); }
.tb-page .tb-faq-q { font-size: 15.5px; line-height: 1.6; color: var(--tb-ink); }
.tb-page .tb-faq-a { margin-top: 10px; font-size: 14px; line-height: 1.85; color: var(--tb-ink-2); }
/* ═══════════════════════════════════════════════════════════
13. 模块 9 · 收尾转化（深色带）
═══════════════════════════════════════════════════════════ */
.tb-page .tb-closing { position: relative; overflow: hidden; background: var(--tb-gradient); color: #fff; padding: var(--tb-sec-pad) 0; }
.tb-page .tb-closing::after {
content: ""; position: absolute; right: -120px; top: -120px;
width: 420px; height: 420px; border-radius: 50%;
background: rgba(255, 255, 255, .07); pointer-events: none;
}
.tb-page .tb-claim { position: relative; z-index: 1; font-size: clamp(24px, 3.1vw, 34px); line-height: 1.35; letter-spacing: -.01em; }
.tb-page .tb-claim-sub { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.tb-page .tb-claim-sub span {
padding: 8px 16px; border-radius: var(--tb-r-pill);
background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26);
font-size: 14px; font-weight: 700;
}
.tb-page .tb-convert {
position: relative; z-index: 1; margin-top: 32px;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px;
padding: 28px 30px; border-radius: var(--tb-r-lg);
background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.tb-page .tb-convert h3 { font-size: 20px; color: #fff; }
.tb-page .tb-convert p { margin-top: 8px; font-size: 14px; line-height: 1.75; color: rgba(255, 255, 255, .86); }
.tb-page .tb-convert-acts { display: flex; flex-wrap: wrap; gap: 12px; }
/* ═══════════════════════════════════════════════════════════
14. 悬浮咨询按钮
═══════════════════════════════════════════════════════════ */
.tb-page .tb-float-cta {
position: fixed; right: 24px; bottom: 28px; z-index: 900;
display: inline-flex; align-items: center; gap: 8px;
min-height: 48px; padding: 0 20px 0 16px; border: 0;
border-radius: var(--tb-r-pill); background: var(--tb-gradient); color: #fff;
font-size: 14px; font-weight: 700;
box-shadow: 0 10px 26px rgba(22, 93, 255, .34);
transition: transform var(--tb-dur) var(--tb-ease), box-shadow var(--tb-dur) var(--tb-ease);
}
.tb-page .tb-float-cta:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(22, 93, 255, .42); }
.tb-page .tb-float-cta svg { width: 18px; height: 18px; }
/* ═══════════════════════════════════════════════════════════
15. 弹窗（表单 / 项目详情）
═══════════════════════════════════════════════════════════ */
.tb-page .tb-modal {
position: fixed; inset: 0; z-index: var(--z-modal, 1100);
display: flex; align-items: center; justify-content: center;
padding: 24px; background: var(--c-mask, rgba(0, 0, 0, .55));
}
.tb-page .tb-modal[hidden] { display: none; }
.tb-page .tb-modal-panel {
width: 100%; max-width: 720px; max-height: calc(100vh - 48px);
overflow: auto; background: #fff; border-radius: var(--tb-r-lg);
box-shadow: 0 24px 64px rgba(15, 40, 90, .28);
animation: tb-pop .22s var(--tb-ease);
}
@keyframes tb-pop { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }
.tb-page .tb-modal-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
padding: 24px 26px 18px; border-bottom: 1px solid var(--tb-line);
}
.tb-page .tb-modal-head h3 { font-size: 19px; color: var(--tb-ink); }
.tb-page .tb-modal-head p { margin-top: 7px; font-size: 13.5px; line-height: 1.7; color: var(--tb-ink-3); }
.tb-page .tb-modal-close {
flex: 0 0 auto; width: 36px; height: 36px; border-radius: 8px;
display: grid; place-items: center; background: #F4F6FA; border: 0; color: var(--tb-ink-2);
transition: background-color var(--tb-dur) var(--tb-ease), color var(--tb-dur) var(--tb-ease);
}
.tb-page .tb-modal-close:hover { background: #E8EDF7; color: var(--tb-primary); }
.tb-page .tb-modal-close svg { width: 18px; height: 18px; }
.tb-page .tb-modal-body { padding: 24px 26px 26px; }
/* ═══════════════════════════════════════════════════════════
16. 表单
═══════════════════════════════════════════════════════════ */
.tb-page .tb-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tb-page .tb-field { display: flex; flex-direction: column; gap: 7px; }
.tb-page .tb-field--full { grid-column: 1 / -1; }
.tb-page .tb-field label { font-size: 13.5px; font-weight: 700; color: var(--tb-ink); }
.tb-page .tb-req { color: #E34D59; margin-left: 3px; }
.tb-page .tb-field input, .tb-page .tb-field select, .tb-page .tb-field textarea {
width: 100%; min-height: 46px; padding: 11px 13px;
border: 1px solid var(--tb-line); border-radius: var(--tb-r-btn);
background: #fff; color: var(--tb-ink); font-size: 14px; line-height: 1.6;
transition: border-color var(--tb-dur) var(--tb-ease), box-shadow var(--tb-dur) var(--tb-ease);
}
.tb-page .tb-field textarea { min-height: 104px; resize: vertical; }
.tb-page .tb-field input::placeholder, .tb-page .tb-field textarea::placeholder { color: var(--tb-ink-3); }
.tb-page .tb-field input:focus, .tb-page .tb-field select:focus, .tb-page .tb-field textarea:focus {
outline: none; border-color: var(--tb-primary); box-shadow: 0 0 0 3px rgba(22, 93, 255, .12);
}
.tb-page .tb-field.is-invalid input, .tb-page .tb-field.is-invalid select { border-color: #E34D59; box-shadow: 0 0 0 3px rgba(227, 77, 89, .12); }
.tb-page .tb-err { display: none; font-size: 12.5px; color: #E34D59; }
.tb-page .tb-field.is-invalid .tb-err { display: block; }
.tb-page .tb-form-foot { margin-top: 20px; }
.tb-page .tb-form-agree { font-size: 12.5px; line-height: 1.7; color: var(--tb-ink-3); }
.tb-page .tb-form-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.tb-page .tb-form-tip { margin-top: 12px; font-size: 13px; color: var(--tb-primary); min-height: 18px; }
.tb-page .tb-form-done { display: none; text-align: center; padding: 16px 4px 4px; }
.tb-page .tb-form-done .tb-ico {
width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%;
display: grid; place-items: center; background: var(--tb-primary-soft); color: var(--tb-primary);
}
.tb-page .tb-form-done .tb-ico svg { width: 30px; height: 30px; }
.tb-page .tb-form-done h4 { font-size: 19px; color: var(--tb-ink); }
.tb-page .tb-form-done p { margin-top: 10px; font-size: 14px; line-height: 1.8; color: var(--tb-ink-2); }
.tb-page .tb-form-done .tb-form-acts { justify-content: center; }
/* ═══════════════════════════════════════════════════════════
17. 入场动效（尊重 prefers-reduced-motion）
═══════════════════════════════════════════════════════════ */
.tb-page .tb-reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--tb-ease), transform .55s var(--tb-ease); transition-delay: var(--tb-d, 0ms); }
.tb-page .tb-reveal.tb-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
/* 必须 !important：组件自身规则（如 .tb-reveal / 各卡片动画）与之特异性相同或更高，
且这里是给开启了「减少动态效果」的用户兜底，宁可强行压制。请勿按「代码异味」删除。 */
.tb-page * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
.tb-page .tb-reveal { opacity: 1; transform: none; }
}
/* ═══════════════════════════════════════════════════════════
18. 响应式
断点与全站一致：1199（平板横） / 991（平板竖） / 767（手机横） / 575（小屏）
═══════════════════════════════════════════════════════════ */
/* —— ≤1199px：三栏收两栏，四栏收两栏 —— */
@media (max-width: 1199px) {
.tb-page .tb-prog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tb-page .tb-sys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tb-page .tb-prod-card { grid-template-columns: 240px minmax(0, 1fr); }
.tb-page .tb-detail { grid-template-columns: 280px minmax(0, 1fr); }
}
/* —— ≤991px：主从两栏改单栏 —— */
@media (max-width: 991px) {
.tb-page .tb-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.tb-page .tb-hero-art { order: -1; }
.tb-page .tb-biz-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.tb-page .tb-position-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.tb-page .tb-prod-card { grid-template-columns: 200px minmax(0, 1fr); }
.tb-page .tb-st-card { grid-template-columns: minmax(0, 1fr) 180px; }
.tb-page .tb-detail { grid-template-columns: minmax(0, 1fr); }
.tb-page .tb-detail-media { border-right: 0; border-bottom: 1px solid var(--tb-line-soft); }
.tb-page .tb-detail-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.tb-page .tb-convert { justify-content: flex-start; }
}
/* —— ≤767px：全部单栏，图框改上下结构 —— */
@media (max-width: 767px) {
.tb-page { font-size: 14.5px; }
.tb-page .tb-sec { padding: clamp(38px, 9vw, 54px) 0; }
.tb-page .tb-biz-list { grid-template-columns: minmax(0, 1fr); }
.tb-page .tb-prog-grid { grid-template-columns: minmax(0, 1fr); }
.tb-page .tb-sys-grid { grid-template-columns: minmax(0, 1fr); }
.tb-page .tb-prod-grid { grid-template-columns: minmax(0, 1fr); }
.tb-page .tb-st-grid { grid-template-columns: minmax(0, 1fr); }
.tb-page .tb-prod-card { grid-template-columns: minmax(0, 1fr); }
.tb-page .tb-prod-media { border-right: 0; border-bottom: 1px solid var(--tb-line-soft); }
.tb-page .tb-st-card { grid-template-columns: minmax(0, 1fr); }
.tb-page .tb-st-media { border-left: 0; border-top: 1px solid var(--tb-line-soft); order: -1; }
.tb-page .tb-form-grid { grid-template-columns: minmax(0, 1fr); }
.tb-page .tb-faq-grid { grid-template-columns: minmax(0, 1fr); }
.tb-page .tb-pe-grid { grid-template-columns: minmax(0, 1fr); }
.tb-page .tb-pe-k { padding-bottom: 0; border-top: 1px solid var(--tb-line); }
.tb-page .tb-pe-v { border-top: 0; padding-top: 8px; }
.tb-page .tb-tabs { gap: 8px; }
.tb-page .tb-tab { flex: 1 1 auto; padding: 0 16px; font-size: 14px; }
.tb-page .tb-hero-acts .tb-btn { flex: 1 1 100%; }
.tb-page .tb-convert { padding: 22px 20px; }
.tb-page .tb-convert-acts { width: 100%; }
.tb-page .tb-convert-acts .tb-btn { flex: 1 1 100%; }
.tb-page .tb-modal { padding: 14px; align-items: flex-end; }
.tb-page .tb-modal-panel { max-height: calc(100vh - 28px); }
.tb-page .tb-modal-head, .tb-page .tb-modal-body { padding-left: 20px; padding-right: 20px; }
.tb-page .tb-float-cta { right: 14px; bottom: 16px; padding: 0 16px 0 14px; font-size: 13px; min-height: 44px; }
}
/* —— ≤575px：小屏收边 —— */
@media (max-width: 575px) {
.tb-page .tb-h2 { font-size: 22px; }
.tb-page .tb-hero h1 { font-size: 26px; }
.tb-page .tb-claim { font-size: 21px; }
.tb-page .tb-btn { padding: 0 20px; }
}
/* P3-6 内联样式外置：原先分散在 team-building.html 的 33 处 style 属性（仅 3 种模式）
统一收为工具类，便于集中调整；取值与原内联完全一致，已由像素回归验证零差异。
.tb-fill 用于让 svg / img 撑满容器；.tb-visually-hidden 用于隐藏但保留给读屏的表格标题。 */
.tb-fill { display: block; width: 100%; height: 100%; }
.tb-mt4 { margin-top: 4px; }
.tb-visually-hidden { position: absolute; width: 0; height: 0; overflow: hidden; }
/* ================= 需求优化v6 · 第3条（企业团建页） =================
① 服务详情介绍：图片与图框（卡片边框 / 分隔线）留出微小间距，不再顶边出血；
② 鼠标悬停动态效果显著化（抬升幅度、阴影、主色渗透、图片微放大、标题转主色）；
③ 自「核心业务介绍」往下每个模块：内容区与模块上下边界的间距适当收紧。 */
/* ① 图框内缩：影像素材与容器边框之间保留 10px 呼吸位，并保持圆角语言 */
.tb-page #details .tb-detail-media { padding: 10px; }
.tb-page #details .tb-detail-media > svg,
.tb-page #details .tb-detail-media > img { border-radius: 10px; }
/* ② hover 显著化 —— 统一作用在本页所有「卡片型」模块上 */
.tb-page .tb-biz-item,
.tb-page .tb-prog-card,
.tb-page .tb-prod-card,
.tb-page .tb-sys-card,
.tb-page .tb-detail,
.tb-page .tb-st-card,
.tb-page .tb-faq-item {
transition: transform .3s var(--tb-ease), box-shadow .3s var(--tb-ease),
border-color .3s var(--tb-ease), background .3s var(--tb-ease);
}
.tb-page .tb-biz-item:hover,
.tb-page .tb-prog-card:hover,
.tb-page .tb-prod-card:hover,
.tb-page .tb-sys-card:hover,
.tb-page .tb-detail:hover,
.tb-page .tb-st-card:hover,
.tb-page .tb-faq-item:hover {
transform: translateY(-8px);
border-color: var(--tb-primary);
box-shadow: 0 20px 42px rgba(22, 93, 255, .22);
background: linear-gradient(180deg, #fff 0%, #EAF1FF 100%);
}
/* 悬停时卡片内配图轻微放大，形成明确的「动态」感知 */
.tb-page .tb-prog-card:hover .tb-prog-thumb > img,
.tb-page .tb-prog-card:hover .tb-prog-thumb > svg,
.tb-page .tb-prod-card:hover .tb-prod-media > img,
.tb-page .tb-prod-card:hover .tb-prod-media > svg,
.tb-page .tb-sys-card:hover .tb-sys-media > img,
.tb-page .tb-sys-card:hover .tb-sys-media > svg,
.tb-page .tb-detail:hover .tb-detail-media > img,
.tb-page .tb-detail:hover .tb-detail-media > svg,
.tb-page .tb-st-card:hover .tb-st-media > img,
.tb-page .tb-st-card:hover .tb-st-media > svg {
transform: scale(1.06);
}
.tb-page .tb-prog-thumb > img, .tb-page .tb-prog-thumb > svg,
.tb-page .tb-prod-media > img, .tb-page .tb-prod-media > svg,
.tb-page .tb-sys-media > img, .tb-page .tb-sys-media > svg,
.tb-page .tb-detail-media > img, .tb-page .tb-detail-media > svg,
.tb-page .tb-st-media > img, .tb-page .tb-st-media > svg {
transition: transform .45s var(--tb-ease);
}
/* 悬停时标题与序号转主色，进一步强化反馈 */
.tb-page .tb-prog-card:hover h3,
.tb-page .tb-prod-card:hover h3,
.tb-page .tb-sys-card:hover h3,
.tb-page .tb-detail:hover h3,
.tb-page .tb-st-card:hover .tb-st-body h3 { color: var(--tb-primary); }
.tb-page .tb-prod-card:hover .tb-prod-no,
.tb-page .tb-sys-card:hover .tb-sys-idx,
.tb-page .tb-detail:hover .tb-detail-no,
.tb-page .tb-st-card:hover .tb-st-no { color: var(--tb-primary-active); }
.tb-page .tb-prog-card h3, .tb-page .tb-prod-card h3, .tb-page .tb-sys-card h3,
.tb-page .tb-detail h3, .tb-page .tb-st-body h3 { transition: color .3s var(--tb-ease); }
/* ③ 自「核心业务介绍」往下：模块上下留白与「模块标题 → 内容」间距适度收紧 */
#business, #programs, #products, #system, #details, #strength, #position, #faq {
padding-top: calc(var(--tb-sec-pad) * .6);
padding-bottom: calc(var(--tb-sec-pad) * .6);
}
#business .tb-head, #programs .tb-head, #products .tb-head, #system .tb-head,
#details .tb-head, #strength .tb-head, #position .tb-head, #faq .tb-head {
margin-bottom: 26px;
}
#programs .tb-tabs { margin-bottom: 20px; }
@media (max-width: 900px) {
#business, #programs, #products, #system, #details, #strength, #position, #faq {
padding-top: clamp(30px, 6vw, 40px);
padding-bottom: clamp(30px, 6vw, 40px);
}
}
/* ==================== 需求优化v8 · 第9条 团建图片占位 ====================
原先 26 个「图片」位全部是内联 SVG 插画（后台虽配了 assets/tb/*.jpg，但前台无处生效）。
本轮统一换成真实的团建场景照片（户外拓展 / 室内共创 / 年会会场三类主题，
其余沿用各槽位原有配图），并裁剪为 landing-slots 给出的建议尺寸。
这里补齐 img 形态必需的样式：
① object-fit: cover —— 照片按容器比例裁切，不拉伸变形；
② .tb-hero-art 的自适应规则原本只写给 svg，img 必须一并命中，
否则首屏主图按图片原始像素显示，破坏 Hero 版面。 */
.tb-page .tb-media > img,
.tb-page .tb-prog-thumb > img,
.tb-page .tb-prod-media > img,
.tb-page .tb-sys-media > img,
.tb-page .tb-detail-media > img,
.tb-page .tb-st-media > img { object-fit: cover; }
.tb-page .tb-hero-art > img { width: 100%; height: auto; display: block; }
.tb-page .tb-fill { object-fit: cover; }