/* ============================================================
JSEMI - common.css
首页 Banner + 各内页（产品/新闻/关于/联系/样品/搜索）样式
============================================================ */
/* ===== 首页 Banner ===== */
.js-home-banner { position: relative; }
/* 桌面端：容器比例与轮播图（2048×880）一致，完整显示整张图、随屏宽加高；min-height 兜底小平板，max-height 880 为原图高度上限避免过度放大。手机端高度见 responsive.css */
.js-banner-swiper { width: 100%; aspect-ratio: 2048 / 880; min-height: 420px; max-height: 880px; }
.js-banner-slide {
width: 100%; height: 100%;
background-size: cover; background-position: center;
position: relative;
}
.js-banner-slide::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(31, 58, 46,0.7) 0%, rgba(31, 58, 46,0.3) 60%, rgba(31, 58, 46,0.1) 100%);
}
.js-banner-content {
position: relative; z-index: 2;
height: 100%; display: flex; flex-direction: column; justify-content: center;
color: #fff; max-width: 700px;
}
.js-banner-title { font-size: 44px; color: #fff; font-weight: 700; line-height: 1.25; margin-bottom: 18px; }
.js-banner-sub { font-size: 20px; color: rgba(255,255,255,0.9); margin-bottom: 30px; font-weight: 300; }
.js-banner-btn {
display: inline-flex; align-items: center; gap: 8px;
align-self: flex-start;
padding: 12px 32px; background: var(--js-steel); color: #fff;
border-radius: var(--js-radius); font-size: 15px; font-weight: 500;
transition: var(--js-transition);
}
.js-banner-btn:hover { background: #fff; color: var(--js-navy); }
.js-banner-pagination .swiper-pagination-bullet {
width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.5); opacity: 1;
transition: var(--js-transition);
}
.js-banner-pagination .swiper-pagination-bullet-active { background: #fff; width: 50px; }
/* ===== 首页：产品分类入口（工业目录式卡片 · 左对齐编辑型，区别于原站居中圆图标卡） ===== */
.js-home-cat {
display: flex; flex-direction: column; position: relative; overflow: hidden;
background: #fff; border: 1px solid var(--js-border); border-radius: var(--js-radius-lg);
padding: 32px 28px 22px; text-align: left;
transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
/* 左侧竖向强调条：hover 由顶部下拉铺满（替代原顶部横线） */
.js-home-cat::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg, var(--js-steel) 0%, var(--js-navy) 100%);
transform: scaleY(0); transform-origin: top;
transition: transform 0.34s cubic-bezier(0.4,0,0.2,1);
}
/* 右上角大号序号水印（CSS 计数 01/02/03），增强目录感 */
.js-home-cat::after {
counter-increment: cat;
content: counter(cat, decimal-leading-zero);
position: absolute; right: 20px; top: 16px;
font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -1px;
color: #eef1f4; transition: color 0.3s ease; pointer-events: none;
}
.js-home-cat:hover,
.js-home-cat:focus-visible { transform: translateY(-5px); border-color: #c8d4dd; box-shadow: var(--js-shadow-hover); }
.js-home-cat:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--js-focus-ring); }
.js-home-cat:hover::before,
.js-home-cat:focus-visible::before { transform: scaleY(1); }
.js-home-cat:hover::after { color: #e2e8ed; }
/* 图标：方形小瓦片，左上对齐（替代原 90px 大圆图标） */
.js-home-cat-icon {
width: 54px; height: 54px; border-radius: 12px;
background: rgba(46, 125, 107,0.09);
display: flex; align-items: center; justify-content: center;
margin-bottom: 18px;
}
.js-home-cat-icon img { width: 32px; height: 32px; object-fit: contain; }
.js-home-cat-icon i { font-size: 24px; color: var(--js-steel); }
.js-home-cat h3 { font-size: 19px; color: var(--js-navy); margin-bottom: 0; }
/* 标题下短强调线，hover 拉长 */
.js-home-cat h3::after {
content: ''; display: block; width: 26px; height: 2px;
background: var(--js-steel); margin-top: 10px;
transition: width 0.32s cubic-bezier(0.4,0,0.2,1);
}
.js-home-cat:hover h3::after { width: 46px; }
/* 子项改为 chip 标签（流式换行），替代原破折号竖排列表 */
.js-home-cat-sub {
display: flex; flex-wrap: wrap; gap: 8px;
margin: 16px 0 20px; padding: 0; list-style: none;
}
.js-home-cat-sub li {
font-size: 12.5px; line-height: 1.3; color: var(--js-text-2);
padding: 5px 11px; background: var(--js-gray-bg);
border: 1px solid var(--js-border); border-radius: 999px;
}
/* 底部 CTA：顶部分隔线 + 文案与箭头两端对齐 */
.js-home-cat-more {
margin-top: auto; width: 100%;
display: flex; align-items: center; justify-content: space-between;
padding-top: 16px; border-top: 1px solid var(--js-border);
font-size: 13px; color: var(--js-steel); font-weight: 600;
}
.js-home-cat-more i { transition: transform 0.25s ease; }
.js-home-cat:hover .js-home-cat-more i { transform: translateX(5px); }
/* ===== 首页：应用领域 ===== */
.js-home-app {
display: block; border-radius: var(--js-radius-lg); overflow: hidden;
aspect-ratio: 16 / 9; position: relative;
}
.js-home-app-img { width: 100%; height: 100%; position: relative; overflow: hidden; }
.js-home-app-img img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.4s ease; }
.js-home-app:hover .js-home-app-img img { filter: brightness(1.08); }
.js-home-app-mask {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(31, 58, 46,0.85) 0%, rgba(31, 58, 46,0.2) 60%, transparent 100%);
display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
padding: 24px; color: #fff;
}
.js-home-app-mask i { font-size: 40px; margin-bottom: 12px; }
.js-home-app-mask h3 { color: #fff; font-size: 18px; }
/* ===== 首页：公司简介（居中标题 + 左图右文，参考 fame-sh 关于我们） ===== */
.js-home-about { background: var(--js-gray-bg); }
.js-home-about-head { margin-bottom: 46px; }
.js-home-about-line { display: block; width: 56px; height: 3px; margin: 18px auto 0; background: var(--js-steel); border-radius: 2px; }
.js-home-about-flex { display: flex; align-items: center; gap: 56px; }
.js-home-about-img { flex: 1; aspect-ratio: 3 / 2; border-radius: var(--js-radius-lg); overflow: hidden; box-shadow: var(--js-shadow); }
.js-home-about-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.js-home-about-text { flex: 1; min-width: 0; }
.js-home-about-name { font-size: 22px; font-weight: 700; color: var(--js-navy); margin-bottom: 16px; line-height: 1.4; }
.js-home-about-content { margin: 0 0 24px; color: var(--js-text-muted); line-height: 1.95; font-size: 15px; text-align: justify; }
.js-home-about-content p + p { margin-top: 12px; }
.js-home-about-points { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
.js-home-about-points li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--js-navy); font-weight: 500; }
.js-home-about-points li i { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: rgba(46, 125, 107, 0.12); color: var(--js-steel); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.js-home-about-points li span { min-width: 0; }
/* ===== 首页：各板块网格（桌面基准列数，响应式覆盖见 responsive.css） ===== */
.js-home-cats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: cat; }
.js-home-apps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.js-home-new-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.js-home-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
/* 缺图占位：渐变底 + 居中图标，避免空 img 塌陷 */
.js-home-app-img .js-app-ph,
.js-home-new-img .js-home-new-ph,
.js-news-card-img .js-news-ph,
.js-home-about-img .js-about-ph {
display: block; width: 100%; height: 100%;
background: linear-gradient(135deg, var(--js-gray-bg) 0%, #e9eef2 100%);
display: flex; align-items: center; justify-content: center;
}
.js-app-ph i,
.js-home-new-ph i,
.js-news-ph i { font-size: 40px; color: var(--js-steel); opacity: 0.45; }
.js-home-about-img .js-about-ph { min-height: 320px; }
.js-home-about-img .js-about-ph::after {
content: 'JSEMI'; font-size: 22px; font-weight: 700; letter-spacing: 2px; color: var(--js-navy); opacity: 0.25;
}
/* ===== 首页：Featured Products ===== */
.js-home-new-card {
display: block; background: #fff; border: 1px solid var(--js-border);
border-radius: var(--js-radius-lg); overflow: hidden;
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.js-home-new-card:hover,
.js-home-new-card:focus-visible {
border-color: var(--js-steel); box-shadow: var(--js-shadow); transform: translateY(-4px);
}
.js-home-new-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--js-focus-ring); }
.js-home-new-img { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--js-gray-bg); }
.js-home-new-img img { width: 100%; height: 100%; object-fit: contain; padding: 18px; transition: transform 0.4s ease; }
.js-home-new-card:hover .js-home-new-img img { transform: scale(1.04); }
.js-home-new-body { padding: 20px 22px 24px; }
.js-home-new-body h3 {
font-size: 15px; color: var(--js-navy); font-weight: 600; margin-bottom: 8px; line-height: 1.5;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.js-home-new-model {
display: inline-block; font-size: 12px; color: var(--js-steel); font-weight: 600;
background: rgba(0, 127, 183, 0.08); padding: 3px 10px; border-radius: var(--js-radius); margin-bottom: 10px;
}
.js-home-new-body p {
font-size: 13px; color: var(--js-text-muted); line-height: 1.6; margin-bottom: 14px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.js-home-new-more { font-size: 13px; color: var(--js-steel); font-weight: 500; }
.js-home-new-more i { margin-left: 4px; transition: transform 0.25s ease; }
.js-home-new-card:hover .js-home-new-more i { transform: translateX(4px); }
/* Featured 空态 */
.js-home-new-empty {
text-align: center; padding: 50px 20px; color: var(--js-text-muted);
background: var(--js-gray-bg); border-radius: var(--js-radius-lg);
}
.js-home-new-empty-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 64px; height: 64px; border-radius: 50%; background: #fff; margin-bottom: 16px;
}
.js-home-new-empty-icon i { font-size: 28px; color: var(--js-steel); }
.js-home-new-empty p { margin-bottom: 14px; font-size: 15px; }
/* ===== 首页：新闻卡片 ===== */
.js-news-card {
display: block; background: #fff; border-radius: var(--js-radius-lg); overflow: hidden;
box-shadow: 0 2px 12px rgba(31, 58, 46, 0.06);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.js-news-card:hover,
.js-news-card:focus-visible { transform: translateY(-4px); box-shadow: var(--js-shadow); }
.js-news-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--js-focus-ring); }
.js-news-card-img { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--js-gray-bg); }
.js-news-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.js-news-card:hover .js-news-card-img img { transform: scale(1.05); }
.js-news-card-body { padding: 22px 24px 26px; }
.js-news-card-date {
display: inline-block; font-size: 13px; color: var(--js-steel); font-weight: 600;
margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--js-border);
}
.js-news-card-body h3 {
font-size: 17px; color: var(--js-navy); font-weight: 600; line-height: 1.5; margin-bottom: 10px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.js-news-card:hover .js-news-card-body h3 { color: var(--js-steel); }
.js-news-card-body p {
font-size: 14px; color: var(--js-text-muted); line-height: 1.7;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* ===== 内页 Banner ===== */
.js-inner-banner {
height: 280px; background-size: cover; background-position: center;
position: relative; display: flex; align-items: center;
}
.js-inner-banner::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(31, 58, 46,0.8) 0%, rgba(31, 58, 46,0.4) 100%);
}
.js-inner-banner-inner,
.js-inner-banner-content { position: relative; z-index: 2; color: #fff; width: 100%; }
.js-inner-banner-inner h1,
.js-inner-banner-content h2 { color: #fff; font-size: 34px; margin-bottom: 8px; font-weight: 700; }
.js-inner-banner-inner p,
.js-inner-banner-content p { color: rgba(255,255,255,0.85); font-size: 15px; }
/* ===== 面包屑 ===== */
.js-breadcrumb {
background: var(--js-gray-bg); padding: 14px 0; font-size: 13px;
border-bottom: 1px solid var(--js-border);
}
.js-breadcrumb a { color: var(--js-text-muted); }
.js-breadcrumb a:hover { color: var(--js-steel); }
.js-breadcrumb .sep { margin: 0 8px; color: var(--js-text-light); }
.js-breadcrumb .current { color: var(--js-navy); font-weight: 500; }
.js-breadcrumb i { margin-right: 6px; }
/* ===== 产品列表：两栏布局 =====
设计取向：datasheet 工业感。悬浮反馈克制——
仅靠极淡底色 + 左侧 datasheet 高光线 + 型号链接转钢蓝，
不再用整行灰底压白字（原方案牺牲可读性）。 */
.js-filter-wrap { display: flex; gap: 36px; padding: 48px 0 64px; align-items: flex-start; }
.js-filter-side { width: 256px; flex-shrink: 0; position: sticky; top: calc(var(--js-header-h) + 20px); }
.js-side-box {
background: #fff; border: 1px solid var(--js-border);
border-radius: var(--js-radius-lg); margin-bottom: 20px; overflow: hidden;
box-shadow: var(--js-shadow);
}
.js-side-title {
background: var(--js-navy); color: #fff;
padding: 16px 20px; font-size: 15px; font-weight: 600;
display: flex; align-items: center;
letter-spacing: 0.3px;
}
/* 标题前小色块，呼应卡片 datasheet 高光线语言 */
.js-side-title span { position: relative; padding-left: 12px; }
.js-side-title span::before {
content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 3px; height: 14px; background: var(--js-steel-light); border-radius: 2px;
}
.js-cat-tree { padding: 10px 0; }
.js-cat-tree > li > a, .js-cat-sub a {
display: flex; align-items: center;
font-size: 14px; color: var(--js-text-2);
border-left: 3px solid transparent; transition: var(--js-transition);
}
/* 一级分类：行内布局（名称 + 折叠角标） */
.js-cat-tree > li > a { padding: 11px 18px; justify-content: space-between; }
.js-cat-tree > li > a .js-cat-name { flex: 1; min-width: 0; }
.js-cat-tree .js-cat-ico { color: var(--js-text-light); font-size: 13px; transition: transform 0.25s ease; }
.js-cat-tree > li > a:hover .js-cat-ico { color: var(--js-steel); }
/* 二级分类：缩进 + 前置短破折号点（与全站 eyebrow 语言统一，去模板感） */
.js-cat-sub {
background: var(--js-gray-light); padding: 4px 0;
border-top: 1px solid var(--js-gray-bg);
}
.js-cat-sub a { font-size: 13px; padding: 8px 18px 8px 36px; color: var(--js-text-muted); position: relative; }
.js-cat-sub .js-cat-sub-dot {
width: 5px; height: 5px; border-radius: 50%; background: var(--js-border);
margin-right: 10px; flex-shrink: 0; transition: var(--js-transition);
}
/* 悬浮 / 选中：左侧 3px datasheet 高光线 + 钢蓝字 + 极淡底色 */
.js-cat-tree > li > a:hover, .js-cat-sub a:hover {
background: var(--js-gray-light); color: var(--js-steel); border-left-color: var(--js-steel);
}
.js-cat-tree > li > a:hover .js-cat-sub-dot,
.js-cat-sub a:hover .js-cat-sub-dot { background: var(--js-steel); }
.js-cat-tree .active {
background: var(--js-gray-light); color: var(--js-steel);
border-left-color: var(--js-steel); font-weight: 600;
}
.js-cat-sub a.active { color: var(--js-navy); }
.js-cat-sub a.active .js-cat-sub-dot { background: var(--js-steel); }
.js-filter-main { flex: 1; min-width: 0; }
.js-filter-top {
display: flex; align-items: center; justify-content: space-between; gap: 20px;
margin-bottom: 24px; flex-wrap: wrap;
}
/* 搜索框：图标内嵌 + focus 整框钢蓝描边 */
.js-filter-search { display: flex; flex: 1; max-width: 520px; position: relative; align-items: stretch; }
.js-filter-search-ico {
position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
color: var(--js-text-light); font-size: 14px; pointer-events: none; transition: var(--js-transition);
}
.js-filter-search input {
flex: 1; padding: 12px 16px 12px 42px;
border: 1px solid var(--js-border); border-right: none;
border-radius: var(--js-radius) 0 0 var(--js-radius);
outline: none; font-size: 14px; background: #fff; transition: var(--js-transition);
}
.js-filter-search input::placeholder { color: var(--js-text-light); }
.js-filter-search input:focus { border-color: var(--js-steel); }
.js-filter-search input:focus ~ .js-filter-search-ico,
.js-filter-search:focus-within .js-filter-search-ico { color: var(--js-steel); }
.js-filter-search button {
padding: 0 26px; background: var(--js-steel); color: #fff;
border-radius: 0 var(--js-radius) var(--js-radius) 0;
font-size: 14px; font-weight: 500; transition: var(--js-transition);
}
.js-filter-search button:hover { background: var(--js-navy); }
/* 结果计数：编辑式 caption，数字用钢蓝强调 */
.js-filter-count { font-size: 13px; color: var(--js-text-muted); letter-spacing: 0.3px; }
.js-filter-count strong { color: var(--js-steel); font-size: 17px; font-weight: 700; margin: 0 3px; font-family: "MiSans", -apple-system, sans-serif; }
/* 产品规格表 — 列表页核心 */
.js-spec-table-wrap {
border: 1px solid var(--js-border); border-radius: var(--js-radius-lg);
overflow: hidden; box-shadow: var(--js-shadow); background: #fff;
}
/* table-layout: fixed —— 列宽由 /| 统一决定，杜绝表头与正文列宽错位 */
.js-spec-table { width: 100%; border-collapse: collapse; background: #fff; table-layout: fixed; }
/* 固定列宽（百分比，配合 colgroup） */
.js-spec-table col.js-col-thumb { width: 72px; }
.js-spec-table col.js-col-model { width: 15%; }
.js-spec-table col.js-col-name { width: 22%; }
.js-spec-table col.js-col-pkg { width: 11%; }
.js-spec-table col.js-col-brief { width: 22%; }
.js-spec-table col.js-col-pdf { width: 8%; }
.js-spec-table col.js-col-action { width: 12%; }
/* 表头统一深海军蓝，不加竖向分隔线（否则头部会出现色块/割裂感） */
.js-spec-table thead th {
background: var(--js-navy); color: #fff;
padding: 15px 18px; font-size: 13px; font-weight: 600; text-align: left;
letter-spacing: 0.3px; white-space: nowrap;
}
.js-spec-table thead th.col-model { padding-left: 24px; }
.js-spec-table thead th.col-thumb,
.js-spec-table thead th.col-pkg,
.js-spec-table thead th.col-pdf,
.js-spec-table thead th.col-action { text-align: center; }
.js-spec-table tbody td {
padding: 16px; font-size: 13px; line-height: 1.5;
border-bottom: 1px solid var(--js-gray-bg); vertical-align: middle;
transition: background 0.2s ease, color 0.2s ease;
}
.js-spec-table tbody tr:last-child td { border-bottom: none; }
/* 行悬浮：克制反馈——极淡底色 + 型号列左缘 datasheet 高光线
注意：不能用 tr::before，table 布局下伪元素会被当成匿名单元格，挤乱列对齐。
改用首格左 border 做高光线，box-shadow 内描边实现。 */
.js-spec-table tbody tr:hover { background: var(--js-gray-light); }
.js-spec-table tbody tr:hover td.col-model {
box-shadow: inset 3px 0 0 var(--js-steel);
}
/* 型号列：钢蓝描边 chip，高对比、强可读（避免型号列看起来发空） */
.js-spec-table .col-model { padding-left: 24px; }
.js-spec-table .col-thumb { text-align: center; vertical-align: middle; padding: 10px 8px; }
.js-prod-thumb {
display: inline-flex; align-items: center; justify-content: center;
width: 52px; height: 52px; border-radius: 6px; overflow: hidden;
border: 1px solid var(--js-border); background: var(--js-gray-light);
}
.js-prod-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.js-prod-thumb-ph {
display: inline-flex; align-items: center; justify-content: center;
width: 52px; height: 52px; color: var(--js-text-light); font-size: 18px;
border-radius: 6px; border: 1px dashed var(--js-border); background: #fff;
}
.js-prod-thumb:hover { border-color: var(--js-steel); }
.js-model-chip {
display: inline-block; padding: 5px 12px;
background: rgba(46, 125, 107, 0.08); color: var(--js-navy);
border: 1px solid rgba(46, 125, 107, 0.35);
border-radius: 4px; font-weight: 700; font-size: 13px;
font-family: "SF Mono", "Consolas", "MiSans", "Microsoft YaHei", monospace;
letter-spacing: 0.3px; white-space: nowrap; transition: var(--js-transition);
}
.js-model-chip:hover { background: var(--js-steel); border-color: var(--js-steel); color: #fff; }
/* 产品名称：默认深色，悬浮钢蓝；固定布局下允许换行，超出截断 */
.js-spec-table .col-name a { color: var(--js-text-2); display: block; }
.js-spec-table .col-name a:hover { color: var(--js-steel); }
/* 封装：灰色小标签风 */
.js-spec-table .col-pkg { color: var(--js-text-muted); text-align: center; white-space: nowrap; }
.js-spec-table .col-pkg .js-cell-empty { color: var(--js-text-light); }
/* 简介：固定列宽下允许换行，超出 2 行截断，避免撑高行 */
.js-spec-table .col-brief {
color: var(--js-text-muted);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; line-height: 1.5;
}
.js-spec-table .col-brief { color: var(--js-text-muted); }
/* PDF 列居中；无 PDF 用破折号占位，避免空单元格 */
.js-spec-table .col-pdf { text-align: center; }
.js-spec-table .js-pdf-link {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 50%;
color: var(--js-red); font-size: 17px; transition: var(--js-transition);
}
.js-spec-table .js-pdf-link:hover { background: var(--js-red); color: #fff; transform: translateY(-1px); }
.js-spec-table .js-pdf-empty { color: var(--js-text-light); }
/* 操作列：样品申请按钮（描边风，悬浮实心，比旧版轻盈） */
.js-spec-table .col-action { text-align: center; }
.js-spec-table .js-row-sample {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 14px; font-size: 12px; font-weight: 500;
color: var(--js-steel); background: #fff;
border: 1px solid var(--js-steel); border-radius: 30px;
transition: var(--js-transition); white-space: nowrap;
}
.js-spec-table .js-row-sample i { font-size: 11px; }
.js-spec-table .js-row-sample:hover { background: var(--js-steel); color: #fff; }
/* 分页：与表格同语言（同圆角、同钢蓝激活态） */
.js-pagination { padding: 32px 0 8px; text-align: center; }
.js-pagination a, .js-pagination span {
display: inline-block; min-width: 36px; height: 36px; line-height: 34px;
padding: 0 12px; margin: 0 4px;
border: 1px solid var(--js-border); border-radius: var(--js-radius);
font-size: 13px; color: var(--js-text-2); background: #fff;
transition: var(--js-transition);
}
.js-pagination a:hover { border-color: var(--js-steel); color: var(--js-steel); box-shadow: var(--js-shadow); }
.js-pagination .current { background: var(--js-steel); color: #fff; border-color: var(--js-steel); font-weight: 600; }
.js-pagination .disabled { color: var(--js-text-light); cursor: not-allowed; background: var(--js-gray-light); }
/* 空状态：更克制、更品牌化 */
.js-empty { padding: 90px 0; text-align: center; color: var(--js-text-light); }
.js-empty-ico {
width: 84px; height: 84px; margin: 0 auto 22px;
border-radius: 50%; background: var(--js-gray-bg);
display: flex; align-items: center; justify-content: center;
}
.js-empty-ico i { font-size: 38px; margin: 0; color: var(--js-steel-light); }
.js-empty-text { font-size: 15px; letter-spacing: 0.3px; }
/* ===== 产品页内页 Banner 细化（产品页钩子 .js-inner-banner--products，不改共享基样式） =====
在通用 .js-inner-banner 之上：叠加 eyebrow 小标签 + 微妙钢蓝渐变层，提升层级感 */
.js-inner-banner--products .js-inner-banner-content { padding-top: 4px; }
.js-inner-banner-tag {
display: inline-block; font-size: 13px; font-weight: 600;
color: #fff; letter-spacing: 1px; margin-bottom: 12px;
padding: 4px 12px; border: 1px solid rgba(255,255,255,0.4);
border-radius: 30px; text-transform: uppercase;
background: rgba(255,255,255,0.08);
}
.js-inner-banner--products::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
background: linear-gradient(90deg, var(--js-steel) 0%, var(--js-steel-dark) 100%);
z-index: 2;
}
/* ===== 产品分类浏览（扬杰式多级导航） ===== */
.js-pcat-wrap { padding: 48px 0 72px; }
.js-pcat-head {
display: flex; align-items: center; justify-content: space-between;
gap: 24px; flex-wrap: wrap; margin-bottom: 36px;
}
.js-pcat-title {
font-size: 36px; font-weight: 700; color: var(--js-navy); margin: 0;
letter-spacing: 0.5px;
}
.js-pcat-search {
position: relative; display: flex; align-items: center;
min-width: 280px; max-width: 420px; flex: 1;
}
.js-pcat-search i {
position: absolute; left: 16px; color: var(--js-text-light); font-size: 15px; pointer-events: none;
}
.js-pcat-search input {
width: 100%; height: 46px; padding: 0 18px 0 42px;
border: 1px solid var(--js-border); border-radius: 30px;
background: var(--js-gray-light); font-size: 14px; color: var(--js-text-2);
transition: var(--js-transition);
}
.js-pcat-search input:focus {
border-color: var(--js-steel); background: #fff;
box-shadow: 0 0 0 3px var(--js-focus-ring); outline: none;
}
.js-pcat-search .sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.js-pcat-l1 {
display: flex; gap: 8px; flex-wrap: wrap;
border-bottom: 1px solid var(--js-border); padding-bottom: 4px; margin-bottom: 28px;
}
.js-pcat-l1-item {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px 16px; color: var(--js-text-2); font-size: 16px; font-weight: 600;
border-bottom: 3px solid transparent; margin-bottom: -5px;
transition: var(--js-transition);
}
.js-pcat-l1-item:hover { color: var(--js-steel); }
.js-pcat-l1-item.active {
color: var(--js-steel); border-bottom-color: var(--js-steel);
}
.js-pcat-l1-icon {
width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px; background: var(--js-gray-bg); color: var(--js-steel); font-size: 18px;
overflow: hidden; flex-shrink: 0;
}
.js-pcat-l1-item.active .js-pcat-l1-icon { background: rgba(46, 125, 107, 0.12); }
.js-pcat-l1-icon img { width: 100%; height: 100%; object-fit: cover; }
.js-pcat-l2 {
display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px;
}
.js-pcat-l2-item {
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px; padding: 10px 22px;
border: 1px solid var(--js-border); border-radius: var(--js-radius);
background: #fff; color: var(--js-text-2); font-size: 14px; font-weight: 500;
transition: var(--js-transition);
}
.js-pcat-l2-item:hover {
border-color: var(--js-steel); color: var(--js-steel);
}
.js-pcat-l2-item.active {
border-color: var(--js-navy); background: var(--js-navy); color: #fff;
box-shadow: var(--js-shadow);
}
.js-pcat-l3 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 28px 24px;
}
.js-pcat-l3-col.is-active .js-pcat-l3-head { color: var(--js-steel); }
.js-pcat-l3-head {
display: inline-flex; align-items: center; gap: 8px;
font-size: 15px; font-weight: 700; color: var(--js-navy);
margin-bottom: 14px; transition: var(--js-transition);
}
.js-pcat-l3-head i { font-size: 12px; color: var(--js-steel); }
.js-pcat-l3-head:hover { color: var(--js-steel); }
.js-pcat-l4 { display: flex; flex-direction: column; gap: 10px; }
.js-pcat-leaf {
display: block; padding: 12px 16px;
border: 1px solid var(--js-border); border-radius: var(--js-radius);
background: #fff; color: var(--js-text-2); font-size: 13px; line-height: 1.4;
transition: var(--js-transition);
}
.js-pcat-leaf:hover {
border-color: var(--js-steel); color: var(--js-steel);
box-shadow: 0 2px 10px rgba(31, 58, 46, 0.06);
}
.js-pcat-leaf--solo {
font-size: 14px; font-weight: 600; padding: 16px 18px;
}
.js-pcat-leaf--all {
color: var(--js-steel); border-style: dashed; font-size: 12px;
}
.js-pcat-empty { padding: 40px 0; text-align: center; }
.js-pcat-empty-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 60px; height: 60px; border-radius: 50%; background: var(--js-gray-bg); margin-bottom: 14px;
}
.js-pcat-empty-icon i { font-size: 26px; color: var(--js-steel); opacity: 0.6; }
.js-pcat-empty p { color: var(--js-text-muted); font-size: 15px; }
/* 产品目录：产品列表（搜索结果 / 叶子产品） */
.js-pcat-products { margin-top: 32px; }
.js-pcat-result-tip { color: var(--js-text-muted); font-size: 14px; margin-bottom: 20px; }
.js-pcat-result-tip strong { color: var(--js-navy); }
.js-pcat-prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.js-pcat-prod {
display: block; background: #fff; border: 1px solid var(--js-border); border-radius: var(--js-radius-lg);
overflow: hidden; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.js-pcat-prod:hover { border-color: var(--js-steel); box-shadow: var(--js-shadow); transform: translateY(-3px); }
.js-pcat-prod-img { width: 100%; aspect-ratio: 4 / 3; background: var(--js-gray-bg); overflow: hidden; }
.js-pcat-prod-img img { width: 100%; height: 100%; object-fit: contain; padding: 16px; transition: transform 0.4s ease; }
.js-pcat-prod:hover .js-pcat-prod-img img { transform: scale(1.04); }
.js-pcat-prod-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.js-pcat-prod-ph i { font-size: 38px; color: var(--js-steel); opacity: 0.4; }
.js-pcat-prod-body { padding: 16px 18px 20px; }
.js-pcat-prod-model {
display: inline-block; font-size: 12px; font-weight: 600; color: var(--js-steel);
background: rgba(0, 127, 183, 0.08); padding: 2px 9px; border-radius: var(--js-radius); margin-bottom: 8px;
}
.js-pcat-prod-body h3 {
font-size: 14px; color: var(--js-navy); font-weight: 600; line-height: 1.5; margin-bottom: 6px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.js-pcat-prod:hover .js-pcat-prod-body h3 { color: var(--js-steel); }
.js-pcat-prod-body p {
font-size: 13px; color: var(--js-text-muted); line-height: 1.6;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 1280px) { .js-pcat-prod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .js-pcat-prod-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 480px) { .js-pcat-prod-grid { grid-template-columns: 1fr; } }
/* ===== 产品列表（快速搜索 + 规格表） ===== */
.js-plist-wrap { padding: 36px 0 64px; }
.js-plist-title {
font-size: 32px; font-weight: 700; color: var(--js-navy);
margin: 0 0 28px; letter-spacing: 0.3px;
}
.js-plist-toolbar {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.js-quick-search {
background: #fafbfc;
border: 1px solid var(--js-border);
border-radius: var(--js-radius);
box-shadow: none;
padding: 18px 22px 16px; margin-bottom: 20px;
}
.js-quick-search-head {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; margin-bottom: 14px;
}
.js-quick-search-head h3 {
margin: 0; font-size: 16px; color: var(--js-navy); font-weight: 700;
display: flex; align-items: center; gap: 8px;
letter-spacing: 0.3px;
}
.js-quick-search-head h3::before {
content: ''; width: 3px; height: 15px; border-radius: 2px;
background: var(--js-steel); flex-shrink: 0;
}
.js-filter-active {
font-size: 12px; color: var(--js-steel); font-weight: 600;
display: inline-flex; align-items: center; gap: 5px;
}
.js-filter-active i { font-size: 13px; }
.js-quick-search-body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 18px 26px;
max-height: none;
padding: 4px 0 8px;
}
.js-quick-col {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
min-width: 0;
transition: none;
}
.js-quick-col:hover {
border-color: transparent;
box-shadow: none;
}
.js-quick-col-title {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 8px; margin-bottom: 10px; padding-bottom: 8px;
border-bottom: 1px solid var(--js-border);
font-size: 13px; font-weight: 700;
color: var(--js-navy); line-height: 1.35;
}
.js-quick-col-name {
flex: 1; min-width: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.js-quick-unit {
flex-shrink: 0; font-style: normal; font-weight: 600;
font-size: 11px; line-height: 1; color: var(--js-steel);
background: rgba(46, 125, 107, 0.1);
border-radius: 3px; padding: 4px 6px; margin-left: 0;
letter-spacing: 0.2px;
}
.js-quick-col-list {
max-height: 168px; overflow-y: auto;
display: flex; flex-direction: column; gap: 2px;
padding-right: 4px;
}
.js-quick-col-list::-webkit-scrollbar { width: 5px; }
.js-quick-col-list::-webkit-scrollbar-thumb { background: var(--js-border); border-radius: 3px; }
.js-quick-check {
display: flex; align-items: flex-start; gap: 8px;
font-size: 12px; color: var(--js-text-2); cursor: pointer;
padding: 4px 6px; line-height: 1.35; border-radius: 4px;
transition: background 0.15s ease;
}
.js-quick-check:hover { background: var(--js-gray-bg); }
.js-quick-check input {
margin-top: 2px; flex-shrink: 0; accent-color: var(--js-steel);
}
.js-quick-check span { word-break: break-all; }
.js-quick-search-foot {
display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center;
margin-top: 18px; padding-top: 16px;
border-top: 1px solid var(--js-border);
}
.js-quick-search-foot .js-btn-search {
min-width: 132px; height: 40px; padding: 0 28px;
font-size: 14px; font-weight: 600; letter-spacing: 1px;
}
.js-quick-search-foot .js-btn-outline { height: 40px; padding: 0 22px; }
/* 双滑块数值区间：竖向滑轨（左）+ min/max 数字框（右）（参考扬杰） */
.js-quick-col--range { min-width: 0; }
.js-range { padding-top: 2px; }
.js-range-row {
display: flex; flex-direction: row; align-items: stretch; gap: 14px;
}
/* 竖向滑轨容器：固定高度，宽度仅容纳拇指 */
.js-range-track {
position: relative; width: 28px; height: 150px; flex-shrink: 0;
touch-action: none;
}
.js-range-track::before {
content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
width: 4px; margin-left: -2px; border-radius: 999px;
background: #E8EBEE; z-index: 0;
}
.js-range-fill {
position: absolute; left: 50%; width: 4px; margin-left: -2px;
border-radius: 999px;
background: var(--js-steel);
z-index: 1; pointer-events: none;
}
.js-range-input {
position: absolute; top: 0; bottom: 0; left: 50%; width: 28px; height: 100%;
margin: 0; padding: 0; transform: translateX(-50%);
/* 自定义竖向滑块：用 appearance:none 关掉原生轨道，仅保留可拖拽拇指 */
-webkit-appearance: none; appearance: none;
writing-mode: vertical-lr; direction: rtl;
background: transparent; pointer-events: none; z-index: 2;
}
.js-range-input::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 16px; height: 16px; border-radius: 50%;
background: #fff; border: 2px solid var(--js-steel);
box-shadow: 0 1px 5px rgba(31, 58, 46, 0.22);
cursor: grab; pointer-events: auto; position: relative; z-index: 3;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.js-range-input::-webkit-slider-thumb:hover {
background: var(--js-steel);
border-color: var(--js-steel);
transform: scale(1.1);
box-shadow: 0 2px 8px rgba(31, 58, 46, 0.3);
}
.js-range-input::-webkit-slider-thumb:active {
cursor: grabbing; background: var(--js-steel);
}
.js-range-input::-moz-range-thumb {
width: 16px; height: 16px; border-radius: 50%;
background: #fff; border: 2px solid var(--js-steel);
box-shadow: 0 1px 5px rgba(31, 58, 46, 0.22);
cursor: grab; pointer-events: auto;
}
/* 关掉原生轨道（竖向 writing-mode 下 runnable-track 即纵向凹槽） */
.js-range-input::-webkit-slider-runnable-track {
background: transparent; border: none;
}
.js-range-input::-moz-range-track {
background: transparent; border: none;
}
.js-range-input--max { z-index: 3; }
/* min/max 数字框：竖向排列（小在上、大在下，贴近滑轨上下两端） */
.js-range-value {
display: flex; flex-direction: column; justify-content: space-between;
align-items: stretch; gap: 10px; flex: 1; min-width: 0;
}
.js-range-value .js-range-num { flex: 1; width: 100%; }
.js-range-sep {
color: var(--js-text-light); font-weight: 400; flex-shrink: 0;
text-align: center; line-height: 1; font-size: 14px;
}
.js-range-num {
width: 100%; flex: 0 0 auto; height: 34px; padding: 0 8px;
border: 1px solid var(--js-border); border-radius: 6px;
font-size: 13px; font-weight: 600; color: var(--js-navy);
text-align: center; background: #fff;
font-variant-numeric: tabular-nums;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.js-range-num:hover { border-color: rgba(46, 125, 107, 0.55); }
.js-range-num:focus {
border-color: var(--js-steel); outline: none;
box-shadow: 0 0 0 3px var(--js-focus-ring);
}
.js-range-bounds { display: none; }
.js-quick-col--range.is-active .js-quick-col-title {
border-bottom-color: rgba(46, 125, 107, 0.45);
}
.js-quick-col--range.is-active .js-range-num {
border-color: rgba(46, 125, 107, 0.55);
color: var(--js-steel);
}
/* 表头排序：可点击链接 + 三态箭头（默认双向灰 / 升序↑ / 降序↓） */
.js-th-sort { padding: 0 !important; vertical-align: middle; }
.js-sort-link {
display: inline-flex; align-items: center; gap: 5px;
padding: 10px 12px; width: 100%; height: 100%;
color: var(--js-text-2); text-decoration: none;
font-size: 12px; font-weight: 600; white-space: nowrap;
transition: color 0.15s ease, background 0.15s ease;
}
.js-sort-link:hover { color: var(--js-steel); background: var(--js-gray-bg); }
.js-sort-link span { flex: 1; }
.js-sort-ico { font-size: 11px; color: var(--js-text-light); flex-shrink: 0; }
/* 默认只显示双向箭头，隐藏单向 */
.js-sort-both { display: inline-block; }
.js-sort-on, .js-sort-off { display: none; }
/* 激活态：高亮钢蓝 + 显示对应单向箭头 */
.js-sort-link.is-active { color: var(--js-steel); }
.js-sort-link.is-active .js-sort-ico { color: var(--js-steel); }
.js-sort-link.is-asc .js-sort-both { display: none; }
.js-sort-link.is-asc .js-sort-on { display: inline-block; }
.js-sort-link.is-desc .js-sort-both { display: none; }
.js-sort-link.is-desc .js-sort-off { display: inline-block; }
.js-spec-table--params { table-layout: auto; }
.js-spec-table--params thead th {
white-space: nowrap; font-size: 12px;
}
.js-spec-table--params tbody td {
font-size: 13px; white-space: nowrap;
}
.js-spec-table--params .col-model { min-width: 120px; }
/* ===== 产品详情（扬杰式） ===== */
.js-pdetail-hero {
background: var(--js-gray-bg);
border-bottom: 1px solid var(--js-border);
padding: 40px 0 48px;
}
.js-pdetail-hero-inner {
display: flex; gap: 48px; align-items: flex-start;
}
.js-pdetail-gallery { flex: 0 0 420px; max-width: 100%; }
.js-pdetail-main-img {
width: 100%; aspect-ratio: 4/3; background: #fff;
border: 1px solid var(--js-border); border-radius: var(--js-radius-lg);
overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.js-pdetail-main-img img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }
.js-pdetail-info { flex: 1; min-width: 0; padding-top: 8px; }
.js-pdetail-model {
font-size: 34px; font-weight: 700; color: var(--js-steel);
margin: 0 0 14px; letter-spacing: 0.5px;
}
.js-pdetail-badge {
display: inline-block; font-size: 12px; font-weight: 600;
color: var(--js-steel); background: rgba(46, 125, 107, 0.12);
padding: 4px 12px; border-radius: 4px; margin-bottom: 14px;
}
.js-pdetail-title {
font-size: 16px; color: var(--js-navy); font-weight: 600; margin: 0 0 10px;
}
.js-pdetail-intro {
color: var(--js-text-muted); line-height: 1.7; margin: 0 0 22px; font-size: 14px;
}
.js-pdetail-meta { margin-bottom: 28px; }
.js-pdetail-meta-row {
display: flex; gap: 8px; padding: 6px 0; font-size: 14px;
}
.js-pdetail-meta-row .lbl { color: var(--js-text-muted); flex-shrink: 0; }
.js-pdetail-meta-row .val { color: var(--js-text-2); font-weight: 500; }
.js-pdetail-meta-row .val a { color: var(--js-steel); }
.js-pdetail-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.js-pdetail-body { padding: 40px 0 72px; }
.js-pdetail-section { margin-bottom: 40px; }
.js-pdetail-section > h3 {
font-size: 20px; color: var(--js-navy); margin: 0 0 18px;
padding-bottom: 12px; border-bottom: 2px solid var(--js-navy);
display: inline-block; min-width: 120px;
}
.js-pdetail-table-wrap {
width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
border: 1px solid var(--js-border); border-radius: var(--js-radius);
}
.js-pdetail-table {
width: 100%; border-collapse: collapse; min-width: 640px; background: #fff;
}
.js-pdetail-table th {
background: var(--js-gray-bg); color: var(--js-text-muted);
font-size: 12px; font-weight: 600; text-align: left;
padding: 12px 14px; white-space: nowrap; border-bottom: 1px solid var(--js-border);
}
.js-pdetail-table td {
padding: 14px; font-size: 13px; color: var(--js-text-2);
border-bottom: 1px solid var(--js-border); white-space: nowrap;
}
.js-pdetail-table tr:last-child td { border-bottom: none; }
.js-pdetail-table td.is-model,
.js-pdetail-table td.is-model a {
color: var(--js-steel); font-weight: 600;
}
.js-pdetail-table td.is-model a:hover { text-decoration: underline; }
.js-pdetail-related .col-more { text-align: right; }
.js-pdetail-related .col-more a {
color: var(--js-steel); font-size: 13px; white-space: nowrap;
}
.js-pdetail-related .col-more a:hover { color: var(--js-navy); }
.js-pdetail-package-img {
max-width: 560px; padding: 20px; background: #fff;
border: 1px solid var(--js-border); border-radius: var(--js-radius);
}
.js-pdetail-package-img img { max-width: 100%; height: auto; display: block; }
/* ===== 产品详情 ===== */
.js-prod-wrap { padding: 40px 0; }
.js-prod-top { display: flex; gap: 40px; margin-bottom: 40px; }
.js-prod-gallery { flex: 0 0 480px; }
.js-prod-main-img {
width: 100%; aspect-ratio: 1; background: var(--js-gray-bg);
border: 1px solid var(--js-border); border-radius: var(--js-radius); overflow: hidden;
}
.js-prod-main-img img { width: 100%; height: 100%; object-fit: contain; }
.js-prod-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.js-prod-thumb {
width: 70px; height: 70px; border: 2px solid var(--js-border); border-radius: 4px;
overflow: hidden; cursor: pointer; transition: var(--js-transition); background: #fff;
}
.js-prod-thumb img { width: 100%; height: 100%; object-fit: contain; }
.js-prod-thumb:hover, .js-prod-thumb.active { border-color: var(--js-steel); }
.js-prod-info { flex: 1; min-width: 0; }
.js-prod-info h1 { font-size: 26px; color: var(--js-navy); margin-bottom: 10px; }
.js-prod-model { font-size: 16px; color: var(--js-steel); font-weight: 600; margin-bottom: 16px; }
.js-prod-intro { color: var(--js-text-muted); line-height: 1.8; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--js-border); }
.js-prod-params { margin-bottom: 24px; }
.js-prod-params .row { display: flex; padding: 8px 0; font-size: 14px; }
.js-prod-params .row .lbl { width: 120px; color: var(--js-text-muted); }
.js-prod-params .row .val { color: var(--js-text-2); font-weight: 500; }
.js-prod-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.js-prod-actions .js-btn-pdf { background: #fff; color: var(--js-red); border: 1px solid var(--js-red); }
.js-prod-actions .js-btn-pdf:hover { background: var(--js-red); color: #fff; }
.js-prod-section { margin-top: 40px; }
.js-prod-section h3 {
font-size: 20px; color: var(--js-navy); margin-bottom: 20px;
padding-left: 14px; border-left: 4px solid var(--js-steel);
}
.js-prod-specs { width: 100%; border-collapse: collapse; border: 1px solid var(--js-border); }
.js-prod-specs td { padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--js-gray-bg); }
.js-prod-specs tr:nth-child(odd) td:first-child { background: var(--js-gray-bg); width: 40%; color: var(--js-navy); font-weight: 600; }
.js-prod-features ul { padding-left: 20px; }
.js-prod-features li { list-style: disc; padding: 4px 0; color: var(--js-text-2); }
.js-prod-package img { max-width: 300px; border: 1px solid var(--js-border); border-radius: var(--js-radius); }
.js-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* ===== 新闻列表 ===== */
.js-news-list { padding: 40px 0; }
.js-news-tabs { display: flex; gap: 8px; margin-bottom: 30px; flex-wrap: wrap; border-bottom: 1px solid var(--js-border); }
.js-news-tabs a {
padding: 12px 24px; font-size: 15px; color: var(--js-text-muted);
border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.js-news-tabs a:hover, .js-news-tabs a.active { color: var(--js-steel); border-bottom-color: var(--js-steel); font-weight: 600; }
.js-news-item {
display: flex; gap: 24px; padding: 24px; background: #fff;
border: 1px solid var(--js-border); border-radius: var(--js-radius);
margin-bottom: 18px; transition: var(--js-transition);
}
.js-news-item:hover,
.js-news-item:focus-visible { box-shadow: var(--js-shadow); border-color: var(--js-steel); transform: translateX(1px); }
.js-news-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--js-focus-ring), var(--js-shadow); }
.js-news-item-img { flex: 0 0 220px; aspect-ratio: 16/10; border-radius: 4px; overflow: hidden; background: var(--js-gray-bg); }
.js-news-item-img img { width: 100%; height: 100%; object-fit: cover; }
.js-news-item-body { flex: 1; min-width: 0; }
.js-news-item-body .date { font-size: 13px; color: var(--js-steel); margin-bottom: 8px; }
.js-news-item-body h3 { font-size: 18px; color: var(--js-navy); margin-bottom: 10px; }
.js-news-item-body h3:hover { color: var(--js-steel); }
.js-news-item-body p { font-size: 14px; color: var(--js-text-muted); }
.js-news-top-tag { display: inline-block; padding: 2px 8px; background: var(--js-red); color: #fff; font-size: 11px; border-radius: 3px; margin-left: 8px; vertical-align: middle; }
/* ===== 新闻详情 ===== */
.js-article { padding: 40px 0; max-width: 900px; margin: 0 auto; }
.js-article-head { text-align: center; padding-bottom: 24px; border-bottom: 1px solid var(--js-border); margin-bottom: 30px; }
.js-article-head h1 { font-size: 28px; color: var(--js-navy); margin-bottom: 14px; }
.js-article-meta { font-size: 13px; color: var(--js-text-muted); display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.js-article-meta span i { margin-right: 4px; }
.js-article-cover {
width: 100%; max-height: 520px; margin: 0 0 30px;
object-fit: cover; border-radius: var(--js-radius); background: var(--js-gray-bg);
}
.js-article-content { min-width: 0; line-height: 1.9; font-size: 15px; overflow-wrap: anywhere; }
.js-article-content img { max-width: 100%; border-radius: var(--js-radius); margin: 1.5em 0; }
.js-article-nav { display: flex; justify-content: space-between; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--js-border); gap: 20px; }
.js-article-nav a { font-size: 14px; color: var(--js-text-muted); }
.js-article-nav a:hover { color: var(--js-steel); }
.js-article-nav a.disabled { color: var(--js-text-light); pointer-events: none; }
/* ===== 关于我们 ===== */
.js-about-wrap { display: flex; gap: 30px; padding: 40px 0; align-items: flex-start; }
.js-about-side { width: 240px; flex-shrink: 0; position: sticky; top: calc(var(--js-header-h) + 20px); background: #fff; border: 1px solid var(--js-border); border-radius: var(--js-radius); overflow: hidden; }
.js-about-side .side-title { background: var(--js-navy); color: #fff; padding: 16px 20px; font-size: 16px; font-weight: 600; }
.js-about-side a { display: block; padding: 14px 20px; font-size: 15px; color: var(--js-text-2); border-left: 3px solid transparent; }
.js-about-side a:hover, .js-about-side a.active { color: var(--js-steel); border-left-color: var(--js-steel); background: var(--js-gray-bg); }
.js-about-main { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--js-border); border-radius: var(--js-radius); padding: 40px; }
.js-about-main h2 { font-size: 24px; color: var(--js-navy); margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--js-steel); display: inline-block; }
.js-about-img { width: 100%; border-radius: var(--js-radius); margin-bottom: 24px; }
/* 发展历程时间轴 */
.js-timeline { position: relative; padding: 20px 0; }
.js-timeline::before { content: ''; position: absolute; left: 80px; top: 0; bottom: 0; width: 2px; background: var(--js-steel); }
.js-timeline-item { position: relative; padding-left: 120px; padding-bottom: 36px; }
.js-timeline-item:last-child { padding-bottom: 0; }
.js-timeline-year {
position: absolute; left: 0; top: 0; width: 80px;
font-size: 18px; font-weight: 700; color: var(--js-steel); text-align: right; padding-right: 16px;
}
.js-timeline-item::after {
content: ''; position: absolute; left: 74px; top: 6px; width: 14px; height: 14px;
background: #fff; border: 3px solid var(--js-steel); border-radius: 50%; z-index: 1;
}
.js-timeline-event { background: var(--js-gray-bg); padding: 14px 18px; border-radius: var(--js-radius); font-size: 15px; }
/* 资质荣誉墙 */
.js-honor-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.js-honor-item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border: 1px solid var(--js-border); border-radius: var(--js-radius); }
/* 企业文化 */
.js-culture-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.js-culture-item { background: var(--js-gray-bg); padding: 30px; border-radius: var(--js-radius-lg); border-top: 3px solid var(--js-steel); }
.js-culture-item h4 { font-size: 18px; color: var(--js-navy); margin-bottom: 10px; }
.js-culture-item p { color: var(--js-text-muted); }
/* ===== 公司简介页（沉浸式分段布局，仅 type=company 使用，不改共享样式） ===== */
/* Banner 修饰：仿产品页 --products，eyebrow 标签 + 底部钢蓝渐变条 */
.js-inner-banner--about .js-inner-banner-content { padding-top: 4px; }
.js-inner-banner--about::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
background: linear-gradient(90deg, var(--js-steel) 0%, var(--js-steel-dark) 100%);
z-index: 2;
}
/* 横向子导航条 */
.js-company-nav { background: #fff; border-bottom: 1px solid var(--js-border); position: sticky; top: var(--js-header-h); z-index: 5; }
.js-company-nav .w1480 { display: flex; gap: 8px; overflow-x: auto; }
.js-company-nav a { padding: 16px 20px; font-size: 15px; color: var(--js-text-muted); white-space: nowrap; position: relative; }
.js-company-nav a:hover { color: var(--js-steel); }
.js-company-nav a.active { color: var(--js-navy); font-weight: 600; }
.js-company-nav a.active::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: -1px; height: 3px; background: var(--js-steel); }
/* Hero 图文区 */
.js-company-hero { padding: 70px 0; }
.js-company-hero-flex { display: flex; gap: 50px; align-items: center; }
.js-company-hero-img { flex: 0 0 50%; }
.js-company-hero-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--js-radius-lg); box-shadow: var(--js-shadow); }
.js-company-hero-ph { width: 100%; aspect-ratio: 4/3; border-radius: var(--js-radius-lg); background: linear-gradient(135deg, var(--js-navy), var(--js-steel)); display: flex; align-items: center; justify-content: center; }
.js-company-hero-ph i { font-size: 80px; color: rgba(255,255,255,0.4); }
.js-company-hero-text { flex: 1; min-width: 0; }
.js-company-eyebrow { display: inline-block; font-size: 13px; letter-spacing: 0.5px; color: var(--js-steel); font-weight: 600; margin-bottom: 14px; padding: 4px 12px; background: rgba(46, 125, 107,0.1); border-radius: 30px; }
.js-company-title { font-size: 34px; color: var(--js-navy); margin-bottom: 20px; font-weight: 700; letter-spacing: -0.5px; }
.js-company-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.js-company-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--js-text-2); padding: 6px 14px; background: var(--js-gray-bg); border-radius: 30px; }
.js-company-tag i { color: var(--js-steel); }
.js-company-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; color: var(--js-steel); font-size: 15px; font-weight: 500; }
.js-company-link:hover { color: var(--js-navy); }
.js-company-link i { transition: var(--js-transition); }
.js-company-link:hover i { transform: translateX(4px); }
/* 数据亮点条（navy 全宽） */
.js-company-stats { background: var(--js-navy); padding: 50px 0; position: relative; overflow: hidden; }
.js-company-stats::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 50%, rgba(46, 125, 107,0.25), transparent 60%); pointer-events: none; }
.js-company-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; z-index: 1; }
.js-company-stat { text-align: center; color: #fff; padding: 10px; }
.js-company-stat > i { font-size: 26px; color: var(--js-steel-light); margin-bottom: 12px; }
.js-company-stat-num { font-size: 42px; font-weight: 700; line-height: 1; color: #fff; letter-spacing: -1px; }
.js-company-stat-num .plus { font-size: 26px; color: var(--js-steel-light); }
.js-company-stat-label { font-size: 14px; color: rgba(255,255,255,0.7); margin-top: 10px; }
/* 应用领域区（灰底，复用 .js-section-head + .js-app-grid） */
.js-company-apps { background: var(--js-gray-bg); }
/* 全球布局区 */
.js-company-offices { background: #fff; }
.js-company-offices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.js-company-office { background: #fff; border: 1px solid var(--js-border); border-radius: var(--js-radius); padding: 28px; transition: var(--js-transition); }
.js-company-office:hover { border-color: var(--js-steel); box-shadow: var(--js-shadow); }
.js-company-office .js-office-type { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; padding: 4px 10px; border-radius: 3px; color: #fff; margin-bottom: 14px; }
.js-company-office .js-office-type-hq { background: var(--js-red); }
.js-company-office .js-office-type-branch { background: var(--js-steel); }
.js-company-office h4 { font-size: 18px; color: var(--js-navy); margin-bottom: 12px; }
.js-company-office p { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--js-text-muted); margin-top: 8px; }
.js-company-office p i { color: var(--js-steel); flex-shrink: 0; margin-top: 3px; }
/* 联系 CTA 区（navy 渐变） */
.js-company-cta { background: linear-gradient(135deg, var(--js-navy) 0%, var(--js-steel-dark) 100%); padding: 60px 0; }
.js-company-cta-flex { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.js-company-cta-text h2 { color: #fff; font-size: 28px; margin-bottom: 8px; }
.js-company-cta-text p { color: rgba(255,255,255,0.8); font-size: 15px; }
.js-company-cta-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.js-company-cta .js-btn-outline { color: #fff; border-color: rgba(255,255,255,0.6); }
.js-company-cta .js-btn-outline:hover { background: #fff; color: var(--js-navy); border-color: #fff; }
/* ===== 应用领域 ===== */
.js-app-list-wrap { padding-bottom: 80px; }
.js-app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 40px 0; }
/* ===== 应用详情页：概述头 ===== */
.js-app-detail-head { display: flex; align-items: center; gap: 32px; }
.js-app-detail-ico {
flex: 0 0 auto; width: 96px; height: 96px; border-radius: 20px;
background: linear-gradient(135deg, var(--js-navy) 0%, var(--js-steel) 100%);
color: #fff; display: flex; align-items: center; justify-content: center; font-size: 42px;
}
.js-app-detail-intro { flex: 1 1 auto; min-width: 0; }
.js-app-detail-title { font-size: 32px; color: var(--js-navy); font-weight: 700; margin: 6px 0 14px; line-height: 1.25; }
.js-app-detail-summary { font-size: 17px; color: var(--js-text-muted); line-height: 1.8; max-width: 820px; }
/* ===== 应用详情：图文正文 ===== */
.js-app-article-section { padding-top: 0; }
.js-article { max-width: 900px; margin: 0 auto; }
.js-article h2 {
font-size: 24px; color: var(--js-navy); font-weight: 700; line-height: 1.35;
margin: 44px 0 18px; padding-left: 14px; border-left: 4px solid var(--js-steel);
}
.js-article h2:first-child { margin-top: 0; }
.js-article p { font-size: 16px; color: var(--js-text, #36404d); line-height: 1.95; margin-bottom: 18px; }
.js-article img {
display: block; width: 100%; height: auto; border-radius: 14px;
margin: 28px 0; box-shadow: var(--js-shadow);
}
/* 应用卡片：图片 + 悬浮遮罩 */
.js-app-card {
display: block;
position: relative;
border-radius: var(--js-radius);
overflow: hidden;
background: #fff;
border: 1px solid var(--js-border);
transition: var(--js-transition);
height: 100%;
}
.js-app-card:hover,
.js-app-card:focus-visible {
border-color: var(--js-steel);
box-shadow: var(--js-shadow-hover);
transform: translateY(-4px);
}
.js-app-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--js-focus-ring), var(--js-shadow-hover); }
.js-app-card-img {
position: relative;
aspect-ratio: 4 / 3;
background: var(--js-gray-bg);
overflow: hidden;
}
.js-app-card-img > img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.js-app-card:hover .js-app-card-img > img { transform: scale(1.08); }
/* 无图占位 */
.js-app-card-ph {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--js-navy) 0%, var(--js-steel) 100%);
color: rgba(255,255,255,0.5);
font-size: 64px;
}
/* 悬浮遮罩 */
.js-app-card-mask {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center;
padding: 28px 24px;
background: linear-gradient(135deg, rgba(31, 58, 46,0.92) 0%, rgba(46, 125, 107,0.88) 100%);
color: #fff;
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.js-app-card:hover .js-app-card-mask,
.js-app-card:focus-visible .js-app-card-mask,
.js-app-card:focus-within .js-app-card-mask { opacity: 1; }
.js-app-card-mask > i {
font-size: 36px; color: #fff; opacity: 0.9;
margin-bottom: 12px;
transform: translateY(10px);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
}
.js-app-card-mask h3 {
color: #fff; font-size: 20px; margin-bottom: 10px;
transform: translateY(10px);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}
.js-app-card-mask p {
color: rgba(255,255,255,0.85); font-size: 13px; line-height: 1.6;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
transform: translateY(10px);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}
.js-app-card-more {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 18px; padding: 7px 18px;
font-size: 13px; font-weight: 500; letter-spacing: 0.5px;
color: #fff;
border: 1px solid rgba(255,255,255,0.6);
border-radius: 30px;
transform: translateY(10px);
transition: background 0.3s, border-color 0.3s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
.js-app-card-more i { transition: transform 0.3s; }
.js-app-card:hover .js-app-card-mask > i,
.js-app-card:hover .js-app-card-mask h3,
.js-app-card:hover .js-app-card-mask p,
.js-app-card:hover .js-app-card-more,
.js-app-card:focus-visible .js-app-card-mask > i,
.js-app-card:focus-visible .js-app-card-mask h3,
.js-app-card:focus-visible .js-app-card-mask p,
.js-app-card:focus-visible .js-app-card-more { transform: translateY(0); }
.js-app-card:hover .js-app-card-more { background: var(--js-steel); border-color: var(--js-steel); }
.js-app-card:hover .js-app-card-more i { transform: translateX(4px); }
/* 默认（无悬浮）状态下显示标题条，保证信息可读 */
.js-app-card-img::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0;
height: 60px;
background: linear-gradient(to top, rgba(31, 58, 46,0.55) 0%, rgba(31, 58, 46,0) 100%);
pointer-events: none;
}
/* ===== 联系我们 ===== */
/* 主体：双栏（信息左 / 表单右吸顶）。js-section 已提供区段 padding，此处不再叠加。 */
.js-contact-wrap { padding: 0; }
/* 双栏：左信息 / 右表单（吸顶），左右等分让表单更舒展、向左延伸 */
.js-cinfo-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
.js-cinfo-left { min-width: 0; }
/* 信息卡网格：桌面 2 列，地址卡跨整行（长文本独占一行，5 项排为 2+1+2，无落单）；手机 1 列见 responsive.css */
.js-cinfo-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 36px;
}
.js-cinfo-card {
display: flex;
flex-direction: column;
gap: 14px;
background: #fff;
border: 1px solid var(--js-border);
border-radius: var(--js-radius);
padding: 22px 20px;
transition: var(--js-transition);
}
.js-cinfo-card:hover {
border-color: var(--js-steel-light);
box-shadow: var(--js-shadow);
transform: translateY(-1px);
}
/* 地址卡：跨整行独占，横向排版（图标左、文字右），适合长地址文本 */
.js-cinfo-card--full {
grid-column: 1 / -1;
flex-direction: row;
align-items: center;
gap: 18px;
}
.js-cinfo-card-ico {
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: rgba(46, 125, 107, 0.12);
color: var(--js-steel);
border-radius: var(--js-radius);
font-size: 18px;
}
.js-cinfo-card-text { min-width: 0; }
.js-cinfo-card-text h4 {
font-size: 13px;
color: var(--js-text-muted);
font-weight: 500;
margin-bottom: 6px;
letter-spacing: 0.5px;
}
.js-cinfo-card-text p {
font-size: 15px;
color: var(--js-navy);
font-weight: 600;
line-height: 1.5;
word-break: break-word;
}
.js-cinfo-card-link { color: inherit; text-decoration: none; transition: var(--js-transition); }
.js-cinfo-card-link:hover { color: var(--js-steel); }
/* ===== 联系页：快速通道（置于联系信息卡片下方） ===== */
.js-contact-extras { margin-top: 30px; }
.js-contact-extras .js-section-head { display: block; text-align: left; margin-bottom: 18px; }
.js-contact-extras .js-section-title { font-size: 20px; }
.js-contact-extras .js-section-desc { margin-top: 6px; }
.js-extras-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.js-extra-card {
display: flex;
align-items: center;
gap: 18px;
background: #fff;
border: 1px solid var(--js-border);
border-radius: var(--js-radius-lg);
padding: 24px 22px;
text-decoration: none;
color: inherit;
transition: var(--js-transition);
}
.js-extra-card:hover {
border-color: var(--js-steel-light);
box-shadow: var(--js-shadow-hover);
transform: translateY(-2px);
}
.js-extra-ico {
flex: 0 0 52px;
width: 52px; height: 52px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--js-steel) 0%, var(--js-navy) 100%);
color: #fff;
border-radius: var(--js-radius);
font-size: 20px;
}
.js-extra-body { flex: 1; min-width: 0; }
.js-extra-body h3 {
font-size: 16px;
font-weight: 700;
color: var(--js-navy);
margin-bottom: 4px;
}
.js-extra-body p {
font-size: 13px;
color: var(--js-text-muted);
line-height: 1.5;
}
.js-extra-arrow {
flex: 0 0 auto;
color: var(--js-steel);
font-size: 16px;
transition: var(--js-transition);
}
.js-extra-card:hover .js-extra-arrow { transform: translateX(4px); }
/* 地图：嵌入 iframe 或品牌占位 */
.js-map {
position: relative;
height: 300px;
border-radius: var(--js-radius);
overflow: hidden;
background: linear-gradient(135deg, var(--js-navy) 0%, var(--js-steel) 100%);
box-shadow: var(--js-shadow);
display: flex;
align-items: center;
justify-content: center;
}
.js-map-frame {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
border: 0;
display: block;
}
.js-map::before {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
}
.js-map:has(.js-map-frame)::before { display: none; }
.js-map-placeholder {
position: relative;
z-index: 2;
text-align: center;
color: #fff;
padding: 0 24px;
}
.js-map-placeholder > i {
display: flex;
align-items: center;
justify-content: center;
width: 64px; height: 64px;
margin: 0 auto 14px;
background: rgba(255,255,255,0.15);
border: 2px solid rgba(255,255,255,0.5);
border-radius: 50%;
font-size: 26px;
}
.js-map-placeholder > span {
display: block;
font-size: 14px;
line-height: 1.6;
opacity: 0.92;
max-width: 360px;
}
/* 右栏：在线留言（吸顶） */
.js-contact-form-wrap {
background: #fff;
border: 1px solid var(--js-border);
border-radius: var(--js-radius-lg);
padding: 32px;
box-shadow: var(--js-shadow);
position: sticky;
top: calc(var(--js-header-h) + 24px);
}
.js-contact-form-wrap .js-section-head { margin-bottom: 22px; }
.js-contact-form-wrap .js-section-title { font-size: 24px; }
.js-contact-form-wrap .js-section-desc { font-size: 13px; margin-top: 8px; }
/* ===== 联系页表单（作用域限定，不污染 .js-form / 样品申请页） ===== */
.js-contact-form .js-form-field { margin-bottom: 16px; }
.js-contact-form .js-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.js-contact-form .js-form-row > .js-form-field { margin-bottom: 16px; }
.js-contact-form label {
display: block;
font-size: 14px;
color: var(--js-text-2);
margin-bottom: 6px;
font-weight: 500;
}
.js-contact-form label em { color: var(--js-red); margin-left: 2px; font-style: normal; }
.js-contact-form input[type=text],
.js-contact-form input[type=email],
.js-contact-form input[type=tel],
.js-contact-form textarea {
width: 100%;
padding: 11px 14px;
border: 1px solid var(--js-border);
border-radius: var(--js-radius);
font-size: 14px;
color: var(--js-text);
outline: none;
background: var(--js-gray-light);
transition: var(--js-transition);
box-sizing: border-box;
}
.js-contact-form input::placeholder,
.js-contact-form textarea::placeholder { color: var(--js-text-light); }
.js-contact-form input:focus,
.js-contact-form input:focus-visible,
.js-contact-form textarea:focus,
.js-contact-form textarea:focus-visible {
border-color: var(--js-steel);
background: #fff;
box-shadow: 0 0 0 3px var(--js-focus-ring);
}
.js-contact-form textarea { resize: vertical; min-height: 110px; }
/* 验证码行：输入框 + 图片并排 */
.js-contact-form .js-form-captcha {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: end;
margin-bottom: 20px;
}
.js-contact-form .js-form-captcha label { grid-column: 1 / -1; }
.js-contact-form .js-form-captcha img {
height: 44px;
border-radius: var(--js-radius);
cursor: pointer;
border: 1px solid var(--js-border);
}
/* 提交区：纯容器，按钮全宽 */
.js-contact-form .js-form-submit { margin-top: 4px; }
.js-contact-form .js-form-submit .js-btn {
width: 100%;
justify-content: center;
padding: 14px;
font-size: 15px;
}
/* ===== 表单通用（样品申请页等复用，保留原有 .js-form 作用域） ===== */
.js-form .form-group { margin-bottom: 18px; }
.js-form label { display: block; font-size: 14px; color: var(--js-text-2); margin-bottom: 6px; }
.js-form label .req { color: var(--js-red); margin-left: 2px; }
.js-form input[type=text], .js-form input[type=email], .js-form input[type=tel], .js-form textarea, .js-form select {
width: 100%; padding: 10px 14px; border: 1px solid var(--js-border); border-radius: 4px;
font-size: 14px; outline: none; transition: var(--js-transition);
}
.js-form input:focus, .js-form textarea:focus, .js-form select:focus,
.js-form input:focus-visible, .js-form textarea:focus-visible, .js-form select:focus-visible { border-color: var(--js-steel); box-shadow: 0 0 0 3px var(--js-focus-ring); }
.js-contact-form input:disabled,
.js-contact-form textarea:disabled,
.js-form input:disabled,
.js-form textarea:disabled,
.js-form select:disabled { background: var(--js-gray-bg); color: var(--js-text-light); }
.js-form textarea { resize: vertical; min-height: 90px; }
.js-captcha-row { display: flex; gap: 10px; align-items: center; }
.js-captcha-row input { flex: 1; }
.js-captcha-row img { height: 40px; border-radius: 4px; cursor: pointer; border: 1px solid var(--js-border); }
.js-form-submit {
width: 100%; padding: 13px; background: var(--js-steel); color: #fff;
border-radius: var(--js-radius); font-size: 15px; font-weight: 500; transition: var(--js-transition);
}
.js-form-submit:hover { background: var(--js-navy); }
.js-form-submit:disabled,
.js-form-submit[aria-disabled="true"] { background: var(--js-row-hover); cursor: not-allowed; }
/* ===== 样品申请 ===== */
.js-sample-wrap { padding: 50px 0; }
.js-sample-form { max-width: 880px; margin: 0 auto; background: #fff; border: 1px solid var(--js-border); border-radius: var(--js-radius-lg); padding: 40px; box-shadow: var(--js-shadow); }
.js-sample-grid { display: flex; flex-direction: column; gap: 18px; }
.js-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.js-form-row .form-group { margin-bottom: 0; }
.js-sample-grid > .form-group { margin-bottom: 0; }
/* 验证码一行：标签在上，输入框+图片并排 */
.js-captcha-row .js-captcha-field { display: flex; gap: 10px; align-items: center; }
.js-captcha-row .js-captcha-field input { flex: 1; }
.js-captcha-row .js-captcha-field img { height: 42px; border-radius: 4px; cursor: pointer; border: 1px solid var(--js-border); }
/* 提交按钮居中显示 */
.js-sample-form .js-form-submit { width: auto; max-width: 240px; margin: 10px auto 0; }
.js-sample-form .js-form-submit .js-btn { width: 100%; justify-content: center; }
/* 企业微信引导弹窗 */
.js-wechat-modal {
position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 2000;
display: none; align-items: center; justify-content: center; padding: 20px;
}
.js-wechat-modal.show,
.js-wechat-modal[style*="display: block"] { display: flex !important; }
.js-wechat-modal-mask { position: absolute; inset: 0; }
.js-wechat-modal-box {
position: relative; z-index: 1;
background: #fff; border-radius: var(--js-radius-lg); padding: 40px;
max-width: 420px; width: 100%; max-height: calc(100dvh - 40px); overflow-y: auto;
text-align: center; box-shadow: 0 20px 60px rgba(10, 22, 30, 0.28);
animation: jsModalIn 0.3s ease;
}
@keyframes jsModalIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.js-wechat-modal-ico { width: 64px; height: 64px; margin: 0 auto 16px; background: #07c160; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32px; }
.js-wechat-modal-inner { text-align: center; }
.js-wechat-modal-box h3 { font-size: 20px; color: var(--js-navy); margin-bottom: 8px; }
.js-wechat-modal-desc { color: var(--js-text-muted); font-size: 14px; margin-bottom: 20px; line-height: 1.7; }
.js-wechat-modal-content { margin-bottom: 8px; }
.js-wechat-qr { width: 200px; margin: 0 auto 20px; text-align: center; }
.js-wechat-qr img { width: 200px; height: 200px; object-fit: contain; }
.js-wechat-qr span { display: block; margin-top: 8px; color: var(--js-text-muted); font-size: 13px; }
.js-wechat-btn { margin: 0 auto 20px; background: #07c160 !important; border-color: #07c160 !important; }
.js-wechat-btn:hover { background: #06a050 !important; border-color: #06a050 !important; }
.js-wechat-modal-close { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; line-height: 30px; text-align: center; color: var(--js-text-light); font-size: 18px; }
.js-wechat-modal-close:hover { color: var(--js-navy); }
/* ===== 搜索结果 ===== */
.js-search-wrap { padding: 40px 0; }
.js-search-box { max-width: 760px; margin: 0 auto 22px; }
.js-search-box form { display: flex; align-items: stretch; }
.js-search-box input {
flex: 1; min-width: 0; padding: 13px 18px;
border: 1px solid var(--js-border); border-right: none;
border-radius: var(--js-radius) 0 0 var(--js-radius);
background: #fff; color: var(--js-text-2); outline: none;
transition: var(--js-transition);
}
.js-search-box input::placeholder { color: var(--js-text-light); }
.js-search-box input:focus,
.js-search-box input:focus-visible { position: relative; z-index: 1; border-color: var(--js-steel); box-shadow: 0 0 0 3px var(--js-focus-ring); }
.js-search-box button {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-width: 118px; padding: 0 24px;
background: var(--js-steel); color: #fff;
border: 1px solid var(--js-steel); border-radius: 0 var(--js-radius) var(--js-radius) 0;
font-size: 14px; font-weight: 600; transition: var(--js-transition);
}
.js-search-box button:hover { background: var(--js-navy); border-color: var(--js-navy); }
.js-search-keyword {
max-width: 760px; margin: 0 auto 42px; padding: 11px 16px;
border-left: 3px solid var(--js-steel); background: var(--js-gray-bg);
color: var(--js-text-muted); font-size: 14px;
}
.js-search-keyword strong { color: var(--js-navy); font-weight: 600; overflow-wrap: anywhere; }
.js-search-block { margin-bottom: 54px; }
.js-search-block:last-child { margin-bottom: 0; }
.js-search-block-head { max-width: 100%; margin-bottom: 28px; text-align: left; }
.js-search-block-head .js-section-tag { margin-bottom: 8px; }
.js-search-block-head .js-section-title { margin-bottom: 0; font-size: 26px; }
.js-search-count { color: var(--js-steel); font-size: 15px; font-weight: 600; vertical-align: middle; }
/* 搜索页新闻结果使用模板现有选择器，视觉与新闻列表保持一致但更紧凑 */
.js-search-block .js-news-list { padding: 0; }
.js-news-list-item {
display: flex; gap: 24px; padding: 22px;
background: #fff; border: 1px solid var(--js-border);
border-radius: var(--js-radius); margin-bottom: 16px;
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.js-news-list-item:hover,
.js-news-list-item:focus-visible { border-color: var(--js-steel); box-shadow: var(--js-shadow); transform: translateX(1px); }
.js-news-list-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--js-focus-ring), var(--js-shadow); }
.js-news-list-img { flex: 0 0 220px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--js-gray-bg); }
.js-news-list-img img { width: 100%; height: 100%; object-fit: cover; }
.js-news-list-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--js-steel-light); font-size: 38px; }
.js-news-list-body { flex: 1; min-width: 0; }
.js-news-list-date { display: block; margin-bottom: 7px; color: var(--js-steel); font-size: 13px; }
.js-news-list-body h3 { margin-bottom: 8px; color: var(--js-navy); font-size: 18px; overflow-wrap: anywhere; }
.js-news-list-body p { color: var(--js-text-muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.js-news-list-more { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; color: var(--js-steel); font-size: 13px; font-weight: 500; }
.js-news-list-more i { transition: transform 0.25s ease; }
.js-news-list-item:hover .js-news-list-more i { transform: translateX(2px); }
/* 兼容旧搜索结果选择器 */
.js-search-result-block { margin-bottom: 40px; }
.js-search-result-block h2 { font-size: 20px; color: var(--js-navy); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--js-border); }
.js-search-result-block h2 .count { font-size: 14px; color: var(--js-steel); margin-left: 8px; }
.js-search-products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* ===== 产品选型工作台 ===== */
.js-page-product-list .js-inner-banner-content h1 {
margin: 0; color: #fff; font-size: 42px; font-weight: 700; letter-spacing: 0.5px;
}
.js-plist-wrap { padding-top: 28px; }
.js-plist-categories {
display: flex; align-items: center; gap: 20px; margin-bottom: 18px;
padding: 14px 18px; border: 1px solid var(--js-border); border-radius: var(--js-radius-lg);
background: #fff; box-shadow: 0 4px 18px rgba(31, 58, 46, 0.04);
}
.js-plist-categories-label {
flex: 0 0 auto; color: var(--js-text-muted); font-size: 12px; font-weight: 600;
letter-spacing: 0.8px; text-transform: uppercase;
}
.js-plist-category-links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.js-plist-category-links a {
display: inline-flex; align-items: center; min-height: 36px; padding: 7px 14px;
border: 1px solid transparent; border-radius: 999px; color: var(--js-text-2);
background: var(--js-gray-light); font-size: 13px; font-weight: 500; transition: var(--js-transition);
}
.js-plist-category-links a:hover,
.js-plist-category-links a:focus-visible { color: var(--js-steel); border-color: rgba(46, 125, 107,0.35); outline: none; }
.js-plist-category-links a.active { color: #fff; background: var(--js-navy); border-color: var(--js-navy); }
.js-selector-workbench {
position: relative; margin-bottom: 22px;
}
.js-selector-title { margin: 0; }
.js-selector-workbench .js-plist-toolbar {
margin: 0 0 18px; padding: 0; gap: 16px;
}
.js-selector-workbench .js-filter-search { flex: 1 1 420px; max-width: 640px; }
.js-selector-workbench .js-filter-search input { height: 42px; background: #fff; }
.js-selector-workbench .js-filter-search button { min-width: 100px; font-weight: 600; }
.js-quick-col { margin: 0; min-inline-size: 0; }
.js-quick-col-title { width: 100%; }
.js-table-scroll-hint {
display: none; align-items: center; justify-content: flex-end; gap: 7px;
margin: 0 2px 8px; color: var(--js-text-muted); font-size: 12px;
}
.js-spec-table-wrap { position: relative; }
.js-spec-table caption {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.js-spec-table--params .col-product { min-width: 320px; width: 320px; text-align: left; }
.js-spec-table--params thead .col-product { padding-left: 18px; }
.js-spec-table--params tbody th.col-product {
position: relative; padding: 12px 16px 12px 18px; border-bottom: 1px solid var(--js-gray-bg);
background: linear-gradient(90deg, rgba(46, 125, 107,0.055), rgba(46, 125, 107,0.015));
text-align: left; font-weight: 400; vertical-align: middle;
}
.js-spec-table--params tbody tr:last-child th.col-product { border-bottom: none; }
.js-spec-table--params tbody tr:hover th.col-product { box-shadow: inset 3px 0 0 var(--js-steel); }
.js-product-identity { display: flex; align-items: center; gap: 13px; min-width: 0; }
.js-product-identity .js-prod-thumb,
.js-product-identity .js-prod-thumb-ph { flex: 0 0 54px; width: 54px; height: 54px; }
.js-product-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 4px; }
.js-product-copy .js-model-chip { padding: 3px 9px; font-size: 12px; }
.js-product-name {
max-width: 220px; overflow: hidden; color: var(--js-navy); font-size: 13px;
font-weight: 650; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap;
}
.js-product-name:hover { color: var(--js-steel); }
.js-product-brief {
display: -webkit-box; max-width: 220px; overflow: hidden; color: var(--js-text-muted);
font-size: 11px; font-weight: 400; line-height: 1.35; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.js-spec-table .js-pdf-link:focus-visible,
.js-spec-table .js-row-sample:focus-visible,
.js-model-chip:focus-visible,
.js-product-name:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--js-focus-ring); }
@media (prefers-reduced-motion: reduce) {
.js-spec-table .js-pdf-link { transition: none; }
.js-spec-table .js-pdf-link:hover { transform: none; }
}
/* ===== 技术中心 ===== */
.js-tech-tabs-wrap { padding: 0 0 8px; }
.js-tech-tabs {
display: flex; gap: 8px; flex-wrap: wrap;
padding: 24px 0; border-bottom: 1px solid var(--js-border);
}
.js-tech-tabs a {
padding: 10px 22px; font-size: 14px; color: var(--js-text-muted);
border-radius: 30px; border: 1px solid var(--js-border);
background: #fff; transition: var(--js-transition);
}
.js-tech-tabs a:hover { color: var(--js-steel); border-color: var(--js-steel-light); }
.js-tech-tabs a.active {
color: #fff; background: var(--js-steel); border-color: var(--js-steel); font-weight: 600;
}
/* 栏目首页：子栏目卡片网格（复用 .js-app-grid 的卡片视觉） */
.js-tech-cards-wrap { padding-bottom: 80px; }
.js-tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 40px 0; }
.js-tech-card {
display: block; position: relative; border-radius: var(--js-radius);
overflow: hidden; background: #fff; border: 1px solid var(--js-border);
transition: var(--js-transition);
}
.js-tech-card:hover { border-color: var(--js-steel); box-shadow: var(--js-shadow-hover); transform: translateY(-4px); }
.js-tech-card-img { position: relative; aspect-ratio: 4 / 3; background: var(--js-gray-bg); overflow: hidden; }
.js-tech-card-img > img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); }
.js-tech-card:hover .js-tech-card-img > img { transform: scale(1.08); }
.js-tech-card-ph {
width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--js-navy) 0%, var(--js-steel) 100%);
color: rgba(255,255,255,0.5); font-size: 64px;
}
.js-tech-card-mask {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; text-align: center; padding: 28px 24px;
background: linear-gradient(135deg, rgba(31, 58, 46,0.92) 0%, rgba(46, 125, 107,0.88) 100%);
color: #fff; opacity: 0; transition: opacity 0.4s cubic-bezier(0.4,0,0.2,1);
}
.js-tech-card:hover .js-tech-card-mask { opacity: 1; }
.js-tech-card-mask > i { font-size: 36px; color: #fff; opacity: 0.9; margin-bottom: 12px; }
.js-tech-card-mask h3 { color: #fff; font-size: 20px; margin-bottom: 10px; }
.js-tech-card-mask p {
color: rgba(255,255,255,0.85); font-size: 13px; line-height: 1.6;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.js-tech-card-more {
display: inline-flex; align-items: center; gap: 6px; margin-top: 18px;
padding: 7px 18px; font-size: 13px; font-weight: 500; color: #fff;
border: 1px solid rgba(255,255,255,0.6); border-radius: 30px;
}
.js-tech-card-img::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px;
background: linear-gradient(to top, rgba(31, 58, 46,0.55) 0%, rgba(31, 58, 46,0) 100%); pointer-events: none;
}
/* 子栏目内容容器 */
.js-tech-content { padding-bottom: 80px; }
/* 封装图纸：系列分组 + 型号标签 */
.js-tech-package { display: flex; flex-direction: column; gap: 28px; padding-top: 20px; }
.js-tech-pkg-group {
background: #fff; border: 1px solid var(--js-border); border-radius: var(--js-radius-lg);
padding: 24px 28px; box-shadow: var(--js-shadow);
}
.js-tech-pkg-series {
display: flex; align-items: center; gap: 10px;
font-size: 17px; color: var(--js-navy); margin-bottom: 16px;
padding-bottom: 12px; border-bottom: 1px solid var(--js-border);
}
.js-tech-pkg-series i { color: var(--js-steel); }
.js-tech-pkg-models { display: flex; flex-wrap: wrap; gap: 10px; }
.js-tech-pkg-model {
display: inline-block; padding: 7px 16px; font-size: 13px; font-weight: 500;
color: var(--js-steel-dark); background: var(--js-gray-bg);
border: 1px solid var(--js-border); border-radius: var(--js-radius);
transition: var(--js-transition);
}
.js-tech-pkg-model:hover { background: var(--js-steel); color: #fff; border-color: var(--js-steel); }
/* 产品结构：图片画廊 */
.js-tech-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 20px; }
.js-tech-gallery-item {
background: #fff; border: 1px solid var(--js-border); border-radius: var(--js-radius-lg);
overflow: hidden; box-shadow: var(--js-shadow); transition: var(--js-transition);
}
.js-tech-gallery-item:hover { box-shadow: var(--js-shadow-hover); transform: translateY(-3px); }
.js-tech-gallery-item a { display: block; aspect-ratio: 4 / 3; background: var(--js-gray-bg); overflow: hidden; }
.js-tech-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.js-tech-gallery-item:hover img { transform: scale(1.05); }
.js-tech-gallery-ph {
aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
background: var(--js-gray-bg); color: var(--js-text-light); font-size: 48px;
}
.js-tech-gallery-item p { padding: 14px 18px; font-size: 14px; color: var(--js-text-2); text-align: center; }
/* 测试报告：标准分组 + 下载按钮 */
.js-tech-report { display: flex; flex-direction: column; gap: 16px; padding-top: 20px; }
.js-tech-report-item {
display: flex; align-items: center; gap: 20px; padding: 20px 24px;
background: #fff; border: 1px solid var(--js-border); border-radius: var(--js-radius-lg);
box-shadow: var(--js-shadow); transition: var(--js-transition);
}
.js-tech-report-item:hover { box-shadow: var(--js-shadow-hover); border-color: var(--js-steel-light); }
.js-tech-report-icon {
width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--js-radius);
display: flex; align-items: center; justify-content: center;
background: var(--js-gray-bg); color: var(--js-steel); font-size: 22px;
}
.js-tech-report-body { flex: 1; }
.js-tech-report-body h3 { font-size: 16px; color: var(--js-navy); margin-bottom: 4px; }
.js-tech-report-body p { font-size: 13px; color: var(--js-text-muted); }
.js-tech-report-action { flex-shrink: 0; }
.js-tech-dl-btn {
display: inline-flex; align-items: center; gap: 6px; padding: 9px 20px;
font-size: 13px; font-weight: 500; color: #fff;
background: var(--js-steel); border-radius: var(--js-radius); transition: var(--js-transition);
}
.js-tech-dl-btn:hover { background: var(--js-steel-dark); color: #fff; }
.js-tech-dl-btn.disabled { background: var(--js-gray-bg); color: var(--js-text-light); cursor: not-allowed; }
/* 发展路线 / 信赖试验：单图 + 富文本 */
.js-tech-single { padding-top: 20px; }
.js-tech-single-img {
background: #fff; border: 1px solid var(--js-border); border-radius: var(--js-radius-lg);
padding: 24px; text-align: center; box-shadow: var(--js-shadow); margin-bottom: 28px;
}
.js-tech-single-img img { max-width: 100%; height: auto; border-radius: var(--js-radius); }
/* 产品应用：富文本 */
.js-tech-rich { padding-top: 20px; }
/* ============================================================
产品增强（第 2 批）：状态徽章 / 每页条数 / 导出 / 对比栏 / 对比表
============================================================ */
/* 产品生命周期状态徽章 */
.js-life-status {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600;
line-height: 1.6; white-space: nowrap;
}
.js-life-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.js-life-status-active { background: rgba(30, 122, 82,.12); color: #1E7A52; }
.js-life-status-nrnd { background: rgba(232,160,23,.14); color: #C8860A; }
.js-life-status-eol { background: rgba(102,102,102,.14); color: #666; }
.js-spec-table .col-status { text-align: center; white-space: nowrap; }
.js-pdetail-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 14px; }
/* 工具区：导出按钮 */
.js-plist-tools { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.js-tool-export {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; font-size: 12px; color: var(--js-steel);
border: 1px solid var(--js-border); border-radius: var(--js-radius);
transition: var(--js-transition); white-space: nowrap;
}
.js-tool-export:hover { color: #fff; background: var(--js-steel); border-color: var(--js-steel); }
/* 每页条数 */
.js-pagination-with-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.js-pagination-num { display: flex; align-items: center; gap: 8px; }
.js-pagination-num label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--js-text-muted); }
.js-perpage-select {
height: 32px; padding: 0 8px; border: 1px solid var(--js-border);
border-radius: var(--js-radius); background: #fff; font-size: 13px; color: var(--js-text); cursor: pointer;
}
.js-pagination-links { flex: 1; text-align: right; }
/* 对比勾选列 */
.js-spec-table .col-compare { text-align: center; width: 50px; }
.js-compare-check { cursor: pointer; display: inline-flex; }
.js-compare-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.js-compare-box {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border: 1.5px solid var(--js-border); border-radius: 5px;
background: #fff; color: transparent; transition: var(--js-transition); font-size: 12px;
}
.js-compare-check input:checked + .js-compare-box { background: var(--js-steel); border-color: var(--js-steel); color: #fff; }
.js-compare-check input:focus-visible + .js-compare-box { outline: 2px solid var(--js-focus-ring); outline-offset: 2px; }
/* 列表操作列：样品 + 询价 图标按钮 */
.js-spec-table .col-action { white-space: nowrap; }
.js-row-inquire, .js-row-sample {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; margin: 0 2px; border-radius: var(--js-radius);
color: var(--js-text-muted); transition: var(--js-transition);
}
.js-row-inquire:hover, .js-row-sample:hover { color: #fff; background: var(--js-steel); }
/* 小按钮变体 */
.js-btn-sm { padding: 7px 16px; font-size: 13px; }
/* 对比浮动栏 */
.js-comparebar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
background: var(--js-navy); color: rgba(255,255,255,.85);
box-shadow: 0 -4px 20px rgba(0,0,0,.18);
transform: translateY(110%); transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.js-comparebar.show { transform: translateY(0); }
.js-comparebar-inner {
width: 90%; max-width: var(--js-max); margin: 0 auto;
display: flex; align-items: center; gap: 20px; padding: 14px 0;
}
.js-comparebar-slots { display: flex; gap: 12px; flex: 1; align-items: center; }
.js-comparebar-slot {
position: relative; display: flex; align-items: center; gap: 8px;
background: rgba(255,255,255,.08); border-radius: var(--js-radius); padding: 6px 10px;
max-width: 200px;
}
.js-comparebar-slot img, .js-comparebar-slot-ph {
width: 32px; height: 32px; border-radius: 4px; object-fit: cover; background: rgba(255,255,255,.1);
display: inline-flex; align-items: center; justify-content: center; color: var(--js-steel-light); flex: 0 0 auto;
}
.js-comparebar-model { font-size: 13px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.js-comparebar-remove {
position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%;
background: var(--js-red); color: #fff; border: none; font-size: 10px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.js-comparebar-empty {
background: transparent; border: 1.5px dashed rgba(255,255,255,.2);
color: rgba(255,255,255,.3); min-width: 60px; height: 44px; justify-content: center;
}
.js-comparebar-foot { display: flex; align-items: center; gap: 10px; }
.js-comparebar-count { font-size: 13px; color: var(--js-steel-light); font-weight: 600; }
.js-comparebar-go.disabled { opacity: .45; pointer-events: none; }
/* 对比页 */
.js-page-compare .js-compare-wrap { padding: 30px 0 60px; }
.js-compare-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.js-compare-head h2 { font-size: 24px; color: var(--js-text); }
.js-compare-table th.col-attr { text-align: left; width: 160px; min-width: 140px; background: var(--js-gray-bg); font-weight: 600; color: var(--js-text); }
.js-compare-table th.col-prod { vertical-align: top; min-width: 180px; }
.js-compare-prod { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 4px; }
.js-compare-prod .js-prod-thumb { width: 64px; height: 64px; }
.js-compare-model { font-weight: 600; color: var(--js-text); }
.js-compare-model:hover { color: var(--js-steel); }
.js-compare-name { font-size: 12px; color: var(--js-text-muted); text-align: center; }
.js-compare-action-row td { padding-top: 16px; }
.js-compare-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
/* 联系页询价提示 */
.js-inquire-hint { font-size: 13px; color: var(--js-steel); background: rgba(46, 125, 107,.08); padding: 8px 12px; border-radius: var(--js-radius); margin-bottom: 10px; }
/* ============================================================
技术中心补全（第 3 批）：交叉参考 / 防伪查询
============================================================ */
/* 技术中心通用搜索框 */
.js-tech-search { margin: 30px auto; max-width: 680px; }
.js-tech-search-row {
display: flex; align-items: center; gap: 8px;
background: #fff; border: 2px solid var(--js-border); border-radius: 40px;
padding: 6px 6px 6px 20px; transition: var(--js-transition);
}
.js-tech-search-row:focus-within { border-color: var(--js-steel); box-shadow: 0 0 0 4px var(--js-focus-ring); }
.js-tech-search-row > i { color: var(--js-text-muted); font-size: 16px; flex: 0 0 auto; }
.js-tech-search-row input {
flex: 1; border: none; outline: none; background: transparent;
font-size: 15px; color: var(--js-text); height: 40px;
}
.js-tech-search-row input::placeholder { color: var(--js-text-light); }
.js-tech-search-row button {
flex: 0 0 auto; padding: 0 28px; height: 44px; border: none; border-radius: 40px;
background: var(--js-steel); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
transition: var(--js-transition);
}
.js-tech-search-row button:hover { background: var(--js-navy-light); }
/* 交叉参考表 */
.js-cross-table th, .js-cross-table td { text-align: left; }
.js-cross-table .js-cross-ref { font-weight: 600; color: var(--js-text); }
.js-cross-table .js-cross-model a { color: var(--js-steel); font-weight: 600; }
.js-tech-intro {
background: var(--js-gray-bg); border-radius: var(--js-radius-lg);
padding: 30px 36px; color: var(--js-text-muted); font-size: 15px; line-height: 1.9;
text-align: center; max-width: 800px; margin: 20px auto;
}
/* 防伪查询结果卡 */
.js-verify-box { max-width: 760px; }
.js-verify-result {
margin-top: 36px; padding: 40px 30px; border-radius: var(--js-radius-lg);
text-align: center; border: 1px solid var(--js-border); background: #fff;
}
.js-verify-ico { font-size: 56px; margin-bottom: 16px; }
.js-verify-valid { border-color: rgba(30, 122, 82,.3); background: rgba(30, 122, 82,.05); }
.js-verify-valid .js-verify-ico { color: #1E7A52; }
.js-verify-invalid, .js-verify-warning { border-color: rgba(255,52,72,.3); background: rgba(255,52,72,.05); }
.js-verify-invalid .js-verify-ico, .js-verify-warning .js-verify-ico { color: var(--js-red); }
.js-verify-result h3 { font-size: 22px; color: var(--js-text); margin-bottom: 12px; }
.js-verify-meta {
display: inline-flex; flex-direction: column; gap: 8px; margin: 20px auto;
background: rgba(255,255,255,.7); border-radius: var(--js-radius); padding: 16px 28px;
min-width: 260px; text-align: left;
}
.js-verify-meta-row { display: flex; justify-content: space-between; gap: 24px; font-size: 14px; }
.js-verify-meta-row .lbl { color: var(--js-text-muted); }
.js-verify-meta-row .val { color: var(--js-text); font-weight: 600; }
.js-verify-first { color: var(--js-steel); }
.js-verify-result p { color: var(--js-text-muted); font-size: 14px; line-height: 1.7; }
.js-verify-tip { margin-top: 16px; }
/* ============================================================
关于我们细化（第 4 批）：招聘信息
============================================================ */
.js-page-career .js-career-wrap,
.js-page-career-detail .js-career-detail-wrap { padding: 30px 0 60px; }
/* 招聘筛选条 */
.js-career-filter {
display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
margin: 24px 0 30px; padding: 16px 20px;
background: var(--js-gray-bg); border-radius: var(--js-radius-lg);
}
.js-career-filter-field { display: flex; align-items: center; }
.js-career-filter-field > i { color: var(--js-text-muted); margin-right: -24px; z-index: 1; padding-left: 10px; }
.js-career-filter-field input,
.js-career-filter-field select {
height: 40px; padding: 0 12px 0 32px; border: 1px solid var(--js-border);
border-radius: var(--js-radius); background: #fff; font-size: 14px; color: var(--js-text); min-width: 180px;
}
.js-career-filter-field select { padding-left: 12px; cursor: pointer; }
.js-career-filter .js-btn { height: 40px; }
/* 招聘列表卡片 */
.js-career-list { display: flex; flex-direction: column; gap: 14px; }
.js-career-card {
display: flex; justify-content: space-between; align-items: center; gap: 20px;
padding: 22px 26px; background: #fff; border: 1px solid var(--js-border);
border-radius: var(--js-radius-lg); transition: var(--js-transition);
}
.js-career-card:hover { border-color: var(--js-steel); box-shadow: var(--js-shadow-hover); }
.js-career-card-main { flex: 1; min-width: 0; }
.js-career-title { font-size: 17px; font-weight: 600; color: var(--js-text); margin-bottom: 8px; }
.js-career-card:hover .js-career-title { color: var(--js-steel); }
.js-career-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--js-text-muted); }
.js-career-meta span { display: inline-flex; align-items: center; gap: 5px; }
.js-career-meta i { color: var(--js-steel-light); width: 14px; }
.js-career-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.js-career-headcount { font-size: 12px; color: var(--js-steel); background: rgba(46, 125, 107,.1); padding: 3px 10px; border-radius: 20px; }
.js-career-more { font-size: 13px; color: var(--js-steel); white-space: nowrap; }
/* 招聘详情 */
.js-career-detail-wrap { display: flex; gap: 40px; align-items: flex-start; }
.js-career-detail-main { flex: 1; min-width: 0; }
.js-career-detail-head { padding-bottom: 20px; border-bottom: 1px solid var(--js-border); margin-bottom: 24px; }
.js-career-detail-head h1 { font-size: 26px; color: var(--js-text); margin-bottom: 12px; }
.js-career-detail-head .js-career-meta { font-size: 14px; }
.js-career-section { margin-bottom: 30px; }
.js-career-section h2 { font-size: 18px; color: var(--js-text); margin-bottom: 14px; padding-left: 12px; border-left: 3px solid var(--js-steel); }
.js-career-apply { background: var(--js-gray-bg); border-radius: var(--js-radius-lg); padding: 24px; }
.js-career-apply h2 { border: none; padding: 0; }
.js-career-apply p { color: var(--js-text-muted); margin-bottom: 16px; line-height: 1.7; }
.js-career-detail-side { flex: 0 0 280px; position: sticky; top: 100px; }
.js-career-detail-side h3 { font-size: 16px; color: var(--js-text); margin-bottom: 16px; }
.js-career-related-item {
display: block; padding: 14px 16px; background: #fff; border: 1px solid var(--js-border);
border-radius: var(--js-radius); margin-bottom: 10px; transition: var(--js-transition);
}
.js-career-related-item:hover { border-color: var(--js-steel); }
.js-career-related-item h4 { font-size: 14px; color: var(--js-text); margin-bottom: 6px; font-weight: 600; }
.js-career-related-item:hover h4 { color: var(--js-steel); }
.js-career-related-item .js-career-meta { font-size: 12px; }
/* ============================================================
HEPA 滤材详情页（product_hepa）
============================================================ */
/* 规格参数表 */
.js-spec-table-wrap { max-width: 760px; margin: 0 auto; }
.js-spec-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--js-radius-lg); overflow: hidden; box-shadow: 0 2px 12px rgba(31, 58, 46,0.06); }
.js-spec-table th, .js-spec-table td { padding: 14px 24px; text-align: left; border-bottom: 1px solid var(--js-border); font-size: 15px; }
.js-spec-table tr:last-child th, .js-spec-table tr:last-child td { border-bottom: none; }
.js-spec-table th { width: 38%; color: var(--js-text-muted); font-weight: 500; background: var(--js-gray-bg); }
.js-spec-table td { color: var(--js-navy); font-weight: 600; }
/* 效率对比条 */
.js-eff-grid { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.js-eff-row { display: flex; align-items: center; gap: 20px; }
.js-eff-grade { width: 56px; font-size: 18px; font-weight: 700; color: var(--js-navy); flex-shrink: 0; }
.js-eff-bar { flex: 1; height: 28px; background: #e2e8ed; border-radius: 14px; overflow: hidden; }
.js-eff-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--js-steel) 0%, var(--js-navy) 100%); border-radius: 14px; transition: width 0.8s cubic-bezier(0.4,0,0.2,1); }
.js-eff-val { width: 80px; text-align: right; font-size: 15px; font-weight: 700; color: var(--js-steel); flex-shrink: 0; }
/* 四层过滤 */
.js-hepa-layers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.js-hepa-layer { background: #fff; border: 1px solid var(--js-border); border-radius: var(--js-radius-lg); padding: 32px 24px; text-align: center; position: relative; transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.js-hepa-layer:hover { border-color: var(--js-steel); box-shadow: var(--js-shadow); }
.js-hepa-layer-no { position: absolute; top: 14px; right: 18px; font-size: 32px; font-weight: 800; color: var(--js-gray-bg); line-height: 1; }
.js-hepa-layer-icon { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; background: rgba(0,127,183,0.08); display: flex; align-items: center; justify-content: center; }
.js-hepa-layer-icon i { font-size: 30px; color: var(--js-steel); }
.js-hepa-layer h3 { font-size: 17px; color: var(--js-navy); margin-bottom: 10px; }
.js-hepa-layer p { font-size: 13px; color: var(--js-text-muted); line-height: 1.7; }
/* 环境适应性 */
.js-hepa-env-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.js-hepa-env { background: #fff; border-radius: var(--js-radius-lg); padding: 30px 24px; text-align: center; }
.js-hepa-env i { font-size: 34px; color: var(--js-steel); margin-bottom: 14px; }
.js-hepa-env h3 { font-size: 16px; color: var(--js-navy); margin-bottom: 8px; }
.js-hepa-env p { font-size: 13px; color: var(--js-text-muted); line-height: 1.6; }
.js-hepa-sub-title { font-size: 20px; font-weight: 700; color: var(--js-navy); margin: 36px 0 18px; text-align: center; }
/* 六位一体产业链 */
.js-supply-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.js-supply-step { background: #fff; border-radius: var(--js-radius-lg); padding: 28px 24px; position: relative; border: 1px solid var(--js-border); transition: border-color 0.25s ease; }
.js-supply-step:hover { border-color: var(--js-steel); }
.js-supply-no { position: absolute; top: 16px; right: 20px; font-size: 28px; font-weight: 800; color: var(--js-gray-bg); }
.js-supply-step > i { font-size: 28px; color: var(--js-steel); margin-bottom: 12px; display: inline-block; }
.js-supply-step h3 { font-size: 16px; color: var(--js-navy); margin-bottom: 8px; }
.js-supply-step p { font-size: 13px; color: var(--js-text-muted); line-height: 1.6; }
/* 认证标签条 */
.js-cert-band { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; list-style: none; padding: 0; }
.js-cert-band li { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; background: #fff; border: 1px solid var(--js-border); border-radius: var(--js-radius); font-size: 16px; font-weight: 700; color: var(--js-navy); }
.js-cert-band li i { color: var(--js-steel); }
/* 首页 HEPA 推荐卡 */
.js-hepa-feature {
display: flex; align-items: center; justify-content: space-between; gap: 24px;
margin-top: 30px; padding: 32px 40px; border-radius: var(--js-radius-lg);
background: linear-gradient(135deg, var(--js-navy) 0%, #2A5040 100%); color: #fff;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.js-hepa-feature:hover { transform: translateY(-3px); box-shadow: var(--js-shadow); }
.js-hepa-feature-tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; color: #8FD4C2; margin-bottom: 8px; }
.js-hepa-feature h3 { font-size: 24px; color: #fff; margin-bottom: 8px; }
.js-hepa-feature p { font-size: 14px; color: rgba(255,255,255,0.8); }
.js-hepa-feature-more { font-size: 15px; font-weight: 600; color: #fff; white-space: nowrap; flex-shrink: 0; }
.js-hepa-feature-more i { margin-left: 6px; transition: transform 0.25s ease; }
.js-hepa-feature:hover .js-hepa-feature-more i { transform: translateX(6px); }
/* HEPA 响应式 */
@media (max-width: 1024px) {
.js-hepa-layers, .js-hepa-env-grid { grid-template-columns: repeat(2, 1fr); }
.js-supply-grid { grid-template-columns: repeat(2, 1fr); }
.js-hepa-feature { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 768px) {
.js-hepa-layers, .js-hepa-env-grid, .js-supply-grid { grid-template-columns: 1fr; }
.js-spec-table th, .js-spec-table td { padding: 12px 16px; font-size: 14px; }
.js-eff-grade { width: 44px; font-size: 16px; }
.js-eff-val { width: 64px; font-size: 13px; }
}
/* HEPA 图文：详情图 figure */
.js-hepa-fig { margin: 0 auto 32px; max-width: 920px; }
.js-hepa-fig img { width: 100%; display: block; border-radius: var(--js-radius-lg); box-shadow: 0 4px 24px rgba(31, 58, 46,0.10); }
.js-hepa-fig-double { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 920px; margin: 0 auto 32px; }
.js-hepa-fig-double .js-hepa-fig { margin: 0; }
/* HEPA 图文：优势卡片网格（六大技术优势 / 为什么选择我们） */
.js-hepa-adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.js-hepa-adv {
background: #fff; border: 1px solid var(--js-border); border-radius: var(--js-radius-lg);
padding: 30px 24px; transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.js-hepa-adv:hover { border-color: var(--js-steel); box-shadow: var(--js-shadow); }
.js-hepa-adv i { font-size: 30px; color: var(--js-steel); margin-bottom: 14px; display: inline-block; }
.js-hepa-adv h3 { font-size: 16px; color: var(--js-navy); margin-bottom: 8px; }
.js-hepa-adv p { font-size: 13px; color: var(--js-text-muted); line-height: 1.7; }
@media (max-width: 1024px) {
.js-hepa-adv-grid { grid-template-columns: repeat(2, 1fr); }
.js-hepa-fig-double { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.js-hepa-adv-grid { grid-template-columns: 1fr; }
}
/* 应用领域详情页「滤材价值」：4 卡片左右对称、每行 2 个（覆盖默认 3 列，避免末行单卡孤悬） */
.js-page-application .js-hepa-adv-grid {
grid-template-columns: repeat(2, 1fr);
max-width: 920px;
margin: 0 auto;
}
@media (max-width: 768px) {
.js-page-application .js-hepa-adv-grid { grid-template-columns: 1fr; }
}
/* 全站隐藏样品申请入口（所有 href 含 sample 的链接） */
a[href*="sample"] { display: none !important; }
/* 隐藏首页「Featured Products / 新品」版块 */
.js-home-new { display: none; }
/* ===== 公司地址（联系卡片增强版） ===== */
.js-contact-card {
display: grid;
grid-template-columns: 1.05fr 1.4fr;
border-radius: var(--js-radius-lg);
overflow: hidden;
box-shadow: var(--js-shadow);
border: 1px solid var(--js-border);
background: #fff;
margin-top: 36px;
}
.js-contact-brand {
background: linear-gradient(150deg, var(--js-navy) 0%, var(--js-steel-dark) 100%);
color: #fff;
padding: 42px 38px;
position: relative;
overflow: hidden;
}
.js-contact-brand::after {
content: '';
position: absolute;
right: -70px;
top: -70px;
width: 230px;
height: 230px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 65%);
pointer-events: none;
}
.js-contact-brand-icon {
width: 58px;
height: 58px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.14);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #fff;
margin-bottom: 20px;
}
.js-contact-brand-tag {
display: inline-block;
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
padding: 4px 12px;
border-radius: 30px;
background: var(--js-red);
color: #fff;
margin-bottom: 14px;
}
.js-contact-brand h3 {
font-size: 22px;
font-weight: 700;
margin-bottom: 8px;
line-height: 1.35;
}
.js-contact-brand > p {
font-size: 13px;
color: rgba(255, 255, 255, 0.72);
margin-bottom: 24px;
}
.js-contact-brand-list {
list-style: none;
padding: 0;
margin: 0;
}
.js-contact-brand-list li {
font-size: 13px;
color: rgba(255, 255, 255, 0.9);
padding: 6px 0;
display: flex;
align-items: center;
gap: 10px;
}
.js-contact-brand-list li i {
color: #8fd0a4;
font-size: 12px;
}
.js-contact-info {
padding: 40px 38px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
}
.js-contact-row {
display: flex;
align-items: center;
gap: 16px;
padding: 13px 0;
border-bottom: 1px dashed var(--js-border);
}
.js-contact-row:last-child {
border-bottom: 0;
}
.js-contact-ico {
flex: 0 0 46px;
width: 46px;
height: 46px;
border-radius: 12px;
background: rgba(46, 125, 107, 0.1);
color: var(--js-steel);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.js-contact-row-phone .js-contact-ico {
background: var(--js-steel);
color: #fff;
}
.js-contact-body {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.js-contact-label {
font-size: 12px;
color: var(--js-text-muted);
letter-spacing: 0.5px;
}
.js-contact-value {
font-size: 15px;
color: var(--js-navy);
font-weight: 600;
line-height: 1.5;
word-break: break-word;
}
.js-contact-phone {
font-size: 22px;
font-weight: 700;
color: var(--js-steel);
letter-spacing: 0.5px;
text-decoration: none;
}
.js-contact-phone:hover {
color: var(--js-steel-dark);
}
@media (max-width: 1024px) {
.js-contact-card {
grid-template-columns: 1fr;
}
.js-contact-brand {
padding: 34px 30px;
}
.js-contact-info {
padding: 32px 30px;
}
}
@media (max-width: 768px) {
.js-contact-card {
margin-top: 28px;
}
.js-contact-brand {
padding: 30px 24px;
}
.js-contact-brand h3 {
font-size: 19px;
}
.js-contact-info {
padding: 28px 24px;
}
}
@media (max-width: 480px) {
.js-contact-ico {
flex-basis: 40px;
width: 40px;
height: 40px;
font-size: 15px;
border-radius: 10px;
}
.js-contact-row {
gap: 12px;
}
.js-contact-value {
font-size: 14px;
}
.js-contact-phone {
font-size: 19px;
}
}
|