/*!
 * 武汉昌龙 官网主题样式
 *
 * 设计参数来自原站实测：
 *   主色 #006baf（取自原站 CSS 与整页截图双重校验）
 *   辅助蓝 #51b5f5 / #3e99d4 / #429dda
 *   正文 #333 / 次级 #666 / 弱化 #999
 *   分割线 #e9e9e9 / #e2e2e2     浅灰底 #f6f6f6
 *   版心 1200px，页头高 80px
 *
 * 原生 CSS，无预处理器、无框架依赖，也不依赖任何外部 CDN——
 * 这是为了能在客户内网离线环境直接运行，同时把体积压到最小。
 */

/* ==========================================================================
   1. 变量与基础
   ========================================================================== */
:root {
	--blue: #006baf;
	--blue-dark: #005e9b;
	--blue-light: #51b5f5;
	--blue-mid: #3e99d4;
	--blue-hover: #429dda;
	--navy: #061a3a;

	--text: #333333;
	--text-mid: #666666;
	--text-light: #999999;

	--line: #e9e9e9;
	--line-light: #e2e2e2;
	--bg-gray: #f6f6f6;
	--white: #ffffff;

	--radius: 4px;
	--shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	--container: 1200px;
	--header-h: 80px;

	--font: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: 14px;
	line-height: 1.8;
	color: var(--text);
	background: var(--white);
	overflow-x: hidden;
}

body.nav-open {
	overflow: hidden;
}

img {
	max-width: 100%;
	height: auto;
	border: 0;
	vertical-align: middle;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s, background-color 0.2s, opacity 0.2s;
}

a:hover {
	color: var(--blue);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.6em;
	font-weight: 700;
	line-height: 1.35;
	color: var(--text);
}

p {
	margin: 0 0 1em;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
	cursor: pointer;
}

input, textarea, select {
	font: inherit;
	color: inherit;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 9999;
	width: auto;
	height: auto;
	padding: 10px 16px;
	clip: auto;
	background: var(--white);
	color: var(--blue);
	box-shadow: var(--shadow);
}

/* ==========================================================================
   2. 布局容器
   ========================================================================== */
.container {
	width: 100%;
	/*
	 * 原站版心是 1200px，但 Bootstrap 的 col-* 自带 15px 内边距，
	 * 所以「可视内容宽」= 1200。这里用 max-width 1230 + 左右 15px 内边距，
	 * 让内容真正占据 1200px，和原站的横向起止位置对齐。
	 */
	max-width: calc(var(--container) + 30px);
	margin: 0 auto;
	padding: 0 15px;
}

.section {
	/*
	 * 只设上下内边距，别用 padding:60px 0 这种简写——
	 * 简写会把 .container 的左右 15px 内边距一起清掉，
	 * 结果整块内容比原站左移 15px（实测侧栏 x338 vs 原站 x353）。
	 */
	padding-top: 60px;
	padding-bottom: 60px;
}

.section--gray {
	background: var(--bg-gray);
}

.section--white {
	background: var(--white);
}

/* 原站图文板块（.p1700m50030）：上 55px / 下 60px */
.section--text-image {
	padding-top: 0;
	/*
	 * 底部不留间距：这 64px 已经挪到标题下方（见下方的 .sec-head padding-bottom），
	 * 用来把正文整体下移到与原站一致的位置。若这里再留 60px，
	 * 整个板块会高出 64px，后面所有板块跟着错位。
	 */
	padding-bottom: 62px;
}

/*
 * 带板块标题的板块：上间距完全由 .sec-head 的 padding-top 提供。
 *
 * 之前 .section 自己也给了 60px 上间距，和 .sec-head 的 60px 叠加成 120px，
 * 导致每个板块都比原站高出约 60px，误差一路累积——最后一个板块能偏 500px。
 */
.section--heading {
	padding-top: 0;
}

/*
 * 产品板块的下间距单独补 64px。
 *
 * 修掉 .sec-head 双重内边距后，各板块的实际高度比原站短了约 62-64px
 * （实测锚点偏移：关于 -4 / 产品 -66 / 案例 -130）。
 * 原站各板块的下间距本来就不统一，这里按实测值逐个补。
 */
.section--products {
	/*
	 * 原站产品板块：1259 → 1908（高 649）= 标题区 181 + 内容 468。
	 *   标题区 = 上 50（.p1700m7a32874379f6931a margin-top:50px）+ 标题行 78
	 *            + 副标题行 8+25 + 下 20（.p1700maf5c782ec362dfdb margin-bottom:20px）
	 *   内容   = 列表上 20（margin-top:20px）+ 两行卡片 448
	 * 之前用的 116px 下间距是在「标题区偏高 42px」的前提下凑出来的补偿值，
	 * 标题区按原站口径重做后这 116px 反而会把整块顶高 96px。
	 */
	padding-bottom: 0;
	/*
	 * 我们的「关于昌龙」比原站矮 6px（原站产品板块从 1259 开始），
	 * 这里补 6px，后面所有板块才跟着对齐。
	 */
	margin-top: 6px;
}

.section--products > .container > .sec-head {
	padding-top: 50px;
	padding-bottom: 20px;
}

.section--products > .container > .sec-head > .sec-head__line {
	padding-bottom: 3px;
}

/*
 * 案例板块下间距补 64px（实测锚点偏移：案例 -64）。
 * 原因同上：原站各板块的下间距本来就不统一。
 */
.section--cases {
	/*
	 * 原站产品板块 1259-1908、案例板块 1948-2611，两块之间空 40px。
	 * 这里用 margin-top 补在板块外，板块自身的盒子才与原站一致
	 * （1948 → 2611，高 663 = 标题区 151 + 大图 512）。
	 */
	margin-top: 40px;
	padding-bottom: 0;
}

/* 新闻板块下间距归零：实测该板块比原站高 61px，去掉多余的 60px 后基本对齐 */
.section--news {
	/* 原站该板块自身带 padding-top:60px，标题行从 2671 起 */
	padding-top: 60px;
	padding-bottom: 0;
}

/*
 * 首页三个带标题的板块：标题区高度严格按原站实测重做。
 *
 * 原站结构是「标题行 78（行高 75 + 行框基线留白 3）+ 副标题行 73
 * （外边距 8 + 文字 25 + 下留白 40）」= 151px。
 * 我们早期把 .sec-head 写成 padding-top:60 + padding-bottom:55 = 223px，
 * 各板块的 padding-bottom 又是按这个偏差逐块补偿的，所以只能逐块改成原站口径。
 */
.section--cases > .container > .sec-head,
.section--news > .container > .sec-head,
.section--partners > .container > .sec-head {
	padding-top: 0;
	padding-bottom: 40px;
}

/*
 * 原站标题行高 78px（标题文字行 75 + 行框基线留白 3），
 * 这 3px 在标题下方、不在上方（实测 .xg_text 标题盒 1948-2023、所在行 1948-2026）。
 */
.section--cases > .container > .sec-head > .sec-head__line,
.section--news > .container > .sec-head > .sec-head__line,
.section--partners > .container > .sec-head > .sec-head__line {
	padding-bottom: 3px;
}

/*
 * 图文板块的标题与正文之间，原站还多出约 64px。
 *
 * 原站这里其实是两个 section：标题 section（含副标题行）+ 内容 section，
 * 内容 section 除 padding-top 55px 外还带一段额外的行高留白。
 * 合并成一个板块后需要把这 64px 补回来，否则正文整体上移，
 * 逐行比对时 11 行文字全部偏移 68px。
 */
.section--text-image .sec-head {
	/*
	 * 119 → 123：正文逐行比对时整体偏高 4px。
	 * 14px 的中文小字行高只有 28px，差 4px 就有一成多的像素对不上，
	 * 逐行量化后按实测值补回来。
	 */
	padding-bottom: 123px;
}

.empty,
.notice {
	padding: 40px 20px;
	text-align: center;
	color: var(--text-mid);
}

.notice--info {
	background: var(--bg-gray);
	border-left: 4px solid var(--blue);
	text-align: left;
}

/* ==========================================================================
   3. 通用组件
   ========================================================================== */
.btn {
	display: inline-block;
	padding: 10px 26px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
	transition: all 0.25s;
}

.btn--primary {
	background: var(--blue);
	color: var(--white);
}

.btn--primary:hover {
	background: var(--blue-hover);
	color: var(--white);
}

.btn--ghost {
	border-color: var(--blue);
	color: var(--blue);
	background: transparent;
}

.btn--ghost:hover {
	background: var(--blue);
	color: var(--white);
}

.btn--lg {
	padding: 13px 40px;
	font-size: 16px;
	border-radius: 22px;
}

.link-more {
	color: var(--text-light);
	font-size: 13px;
}

.link-more:hover {
	color: var(--blue);
}

/*
 * 板块标题：黑字 + 蓝字 + 灰色副标题，完全按原站实测值还原。
 *
 * 原站 CSS（.p1700md18fb45b434ea426 / .p1700mb818f3618eac9e2c）：
 *   font-size 36px / font-weight bold / line-height 75px / 居中
 *   标题下方居中一条 250×3 的装饰线：105px 灰 #d2d2d2 + 40px 蓝 #046ec6 + 105px 灰
 * 这条线用 CSS 渐变复刻，不搬运原站图片。
 */
.sec-head {
	margin-bottom: 0;
	/*
	 * 原站把标题放在独立 section 里：margin-top 60px + 标题行 75px，
	 * 装饰线正好落在距 Banner 底 135px 处；随后的内容 section 再给 55px 上间距。
	 * 这里合并成一个板块，等价于 padding-top 60 + padding-bottom 55。
	 */
	padding-top: 60px;
	padding-bottom: 55px;
	text-align: center;
}

.sec-head__title {
	margin: 0;
	font-size: 36px;
	font-weight: 700;
	line-height: 75px;
	letter-spacing: normal;
	display: inline-block;
}

/*
 * 装饰线必须画在整行容器上，不能画在标题本身。
 * 原站把 250×3 的线作为背景放在整列（宽度满版）上、居中贴底，
 * 所以无论标题几个字，线都固定 250px 居中。
 * 早先画在 inline-block 的标题上，标题只有 144px 宽，线被裁得只剩中间一段。
 */
.sec-head__line {
	background-image: linear-gradient(
		to right,
		#d2d2d2 0 105px,
		#046ec6 105px 145px,
		#d2d2d2 145px 250px
	);
	background-size: 250px 3px;
	background-position: center bottom;
	background-repeat: no-repeat;
}

.sec-head__title em {
	font-style: normal;
	color: var(--blue);
	/*
	 * 原站两个标题片段之间有一个约 4px 的间隙
	 * （实测「案例」646-718 + 「展示」722-794，整段 646-794 居中）。
	 * 没有这个间隙时整段只有 148px，两边各差 2px。
	 */
	margin-left: 4px;
}

.sec-head__sub {
	margin: 8px 0 0;
	font-size: 14px;
	/*
	 * 行高必须写死 25px：原站是 14px/25px，继承 body 的 1.8 会得到 25.2px，
	 * 每块多出 0.2px，七块叠起来就是 1-2px 的整体错位（实测板块起点会晚 1px）。
	 */
	line-height: 25px;
	/* 原站首页各板块副标题都是默认的 #666（实测「专业从事高科技多功能视听系统及声学处理」= #666） */
	color: #666666;
	letter-spacing: normal;
}

.sec-head--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	text-align: left;
}

.sec-head--split .sec-head {
	margin-bottom: 0;
	text-align: left;
}

.sec-head--split .sec-head__title {
	display: block;
	text-align: left;
}

.sec-head--split .sec-head__line {
	background-position: left bottom;
}

/* ==========================================================================
   4. 页头
   ========================================================================== */
.site-header {
	position: relative;
	z-index: 100;
	background: var(--blue);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--header-h);
}

.site-logo img {
	max-height: 54px;
	width: auto;
}

.site-logo__text {
	font-size: 24px;
	font-weight: 700;
	color: var(--white);
	letter-spacing: 2px;
}

.nav-main {
	display: flex;
	align-items: center;
}

.nav-main > li {
	position: relative;
}

.nav-main > li > a {
	display: block;
	/*
	 * 原站 .p1735mf1735-07a321e25f8bcec71 .xg_menuLi1：
	 * width:130px; height:80px; line-height:80px; font-size:17px;
	 * padding:0 20px; background:#006baf；文字居中。
	 */
	width: 130px;
	padding: 0 20px;
	line-height: var(--header-h);
	font-size: 17px;
	color: var(--white);
	text-align: center;
}

/* 当前栏目与悬停：原站底色 #5197df（.xg_menuLi1-select / :hover） */
.nav-main > li > a:hover,
.nav-main > li.is-current > a,
.nav-main > li.current-menu-item > a,
.nav-main > li.current_page_item > a,
.nav-main > li.current-menu-ancestor > a {
	background: #5197df;
	color: var(--white);
}

.nav-main .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 170px;
	background: var(--blue);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
	display: none;
}

.nav-main > li:hover > .sub-menu {
	display: block;
}

.nav-main .sub-menu a {
	display: block;
	padding: 10px 18px;
	color: var(--white);
	font-size: 14px;
}

.nav-main .sub-menu a:hover {
	background: var(--blue-mid);
}

.nav-toggle {
	display: none;
	width: 46px;
	height: 46px;
	padding: 12px 10px;
	background: transparent;
	border: 0;
}

.nav-toggle__bar {
	display: block;
	height: 2px;
	margin: 5px 0;
	background: var(--white);
}

/* ==========================================================================
   5. Banner / 轮播
   ========================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--navy);
}

.hero--large {
	/*
	 * 首页 Banner 用的是原站成品图（1920×557 超宽比例，文字已做在图里）。
	 * 如果用固定高度 + object-fit: cover，两侧的粒子球和文字会被裁掉，
	 * 所以这里让图片自己决定高度，按原始比例完整显示。
	 */
	height: auto;
}

.hero--large .hero__slide.is-active {
	position: relative;
}

.hero--large .hero__bg {
	position: static;
	width: 100%;
	height: auto;
	display: block;
}

.hero--medium {
	height: 300px;
}

/*
 * 栏目页 Banner：原站是 1920×300 成品图，居中、原尺寸铺放（窄屏两侧各裁一点），
 * 图上不叠任何文字。实测原站 .xg_abanner 高 300，img 盒 1920×300、left:-7（1905 视口）。
 */
.hero--medium .hero__bg {
	position: absolute;
	top: 0;
	right: auto;
	bottom: auto;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	min-width: 1920px;
	max-width: none;
	height: 300px;
	object-fit: cover;
	display: block;
}

.hero--small {
	height: 180px;
}

.hero__track {
	position: relative;
	height: 100%;
}

.hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s;
}

.hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	position: relative;
	height: 100%;
}

.hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__mask {
	position: absolute;
	inset: 0;
	background: rgba(3, 16, 42, 0.45);
}

.hero__inner {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--white);
}

.hero__eyebrow {
	margin: 0 0 14px;
	font-size: 15px;
	letter-spacing: 4px;
	color: var(--blue-light);
	text-transform: uppercase;
}

.hero__title {
	margin: 0 0 16px;
	font-size: 42px;
	font-weight: 700;
	color: var(--white);
	letter-spacing: 3px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hero__sub {
	margin: 0 0 26px;
	font-size: 18px;
	color: var(--white);
	position: relative;
	letter-spacing: 2px;
}

.hero--small .hero__title {
	font-size: 30px;
	margin: 0;
}

.hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 46px;
	height: 46px;
	border: 0;
	background: rgba(255, 255, 255, 0.16);
	color: var(--white);
	font-size: 30px;
	line-height: 1;
	border-radius: 50%;
	transition: background 0.25s;
}

.hero__arrow:hover {
	background: var(--blue);
}

.hero__arrow--prev {
	left: 24px;
}

.hero__arrow--next {
	right: 24px;
}

.hero__dots {
	position: absolute;
	bottom: 24px;
	left: 0;
	right: 0;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.hero__dot {
	width: 11px;
	height: 11px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
}

.hero__dot.is-active {
	background: var(--white);
}

/* ==========================================================================
   6. 图文左右（按原站 .p1700m50030 区块实测还原）
   ========================================================================== */
.media-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: flex-start;
}

/* 原站左栏 col-lg-6（15px 内边距）+ padding-right 56px；右栏 col-lg-6（15px 内边距） */
.media-row__text {
	/* 原站实测：.p1700m73f39f953e6f9e93 = padding-right 56px、无左右内边距，
	   文字块 .p1700m365c8b1140c5d069 宽 544（600-56），起点与版心左缘对齐 */
	padding: 0 56px 0 0;
}

.media-row__media {
	/* 原站右侧 col-lg-6 没有内边距，图片撑满 600 宽（900×668 缩到 600×445），
	   外层 max-height 400 + overflow hidden 裁掉下半部分 */
	padding: 0;
	max-width: 695px;
	/* 原站 .p1700m2a0d3de9aa8ccc0b：max-height 400px + overflow hidden */
	max-height: 400px;
	overflow: hidden;
}

.media-row--text-right .media-row__text {
	order: 2;
}

.media-row--text-right .media-row__media {
	order: 1;
}

.media-row__title {
	/* 原站 .p1700m125cf378f1600c05：24px / 字重 normal / 下间距 20px */
	font-size: 24px;
	font-weight: 400;
	line-height: normal;
	margin-bottom: 20px;
}

.media-row__text .entry-content {
	/* 原站 .p1700m365c8b1140c5d069：14px / 行高 28px / 两端对齐 / 颜色 #999 */
	font-size: 14px;
	line-height: 28px;
	text-align: justify;
	text-justify: inter-ideograph;
	color: var(--text-light);
}

/*
 * 段落外边距归零。
 *
 * 原站正文相邻段落之间刚好空一行（28px）：段距完全由原稿里的空 <p> 提供，
 * 段落本身不带外边距。这里保留主题默认的 1em 下边距会多出 28px，
 * 实测两段下来整块就高出约 30px，后面所有板块跟着错位。
 */
.media-row__text .entry-content p {
	margin: 0;
}

.media-row__media img {
	width: 100%;
	display: block;
}

/* ==========================================================================
   7. 卡片 / 图标卡片
   ========================================================================== */
.cards {
	display: grid;
	gap: 24px;
}

.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }

.card {
	padding: 34px 24px;
	text-align: center;
	background: var(--white);
	border: 1px solid var(--line);
	transition: box-shadow 0.25s, transform 0.25s;
}

.card:hover {
	box-shadow: var(--shadow);
	transform: translateY(-3px);
}

.card__icon img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	margin-bottom: 16px;
}

.card__title {
	font-size: 18px;
	margin-bottom: 10px;
}

.card__desc {
	margin: 0;
	color: var(--text-mid);
	font-size: 13px;
	line-height: 1.9;
}

/* ==========================================================================
   8. 产品：品牌卡片 / 产品卡片
   ========================================================================== */
.brands {
	display: grid;
	/*
	 * 原站首页产品板块是 4 列 × 285px、列间 20px（4×285 + 3×20 = 1200），
	 * 整块上边距 20px（.p1700m5333ff92aca4d887 margin-top:20px）。
	 */
	grid-template-columns: repeat(4, 285px);
	/* 行距来自卡片自身的 margin-bottom（原站 .data_col{margin-bottom:20px}） */
	row-gap: 0;
	column-gap: 20px;
	margin-top: 20px;
}

.brand {
	display: block;
	/*
	 * 原站卡片（.data_col 285×204）= 左右各 20px + 内容 245 + 下留白 15。
	 * 图片框 245×139（1px #e9e9e9 描边 + 左右各 5px 内边距），
	 * 下面是 50px 的文字行（16px / 行高 50px / 居中 / #333）。
	 */
	padding: 0 20px 15px;
	/* 原站 .data_col 的 margin-bottom:20px，两行合计正好 448 */
	margin-bottom: 20px;
	background: var(--white);
	text-align: center;
}

.brand:hover .brand__desc {
	color: var(--blue);
}

.brand__logo {
	display: block;
	height: 139px;
	margin-bottom: 0;
	padding: 0 5px;
	border: 1px solid var(--line);
	background: var(--white);
	overflow: hidden;
}

.brand__logo img {
	width: 100%;
	height: 137px;
	object-fit: contain;
}

.brand__name {
	display: block;
	line-height: 139px;
	font-size: 16px;
	color: #333333;
}

.brand__desc {
	display: block;
	/*
	 * 原站 .p1700me119d77a36409e9c：16px / 行高 50px / 居中 / #333，
	 * 文字区左右各 20px 内边距（245 - 40 = 205 宽）。
	 */
	padding: 0 20px;
	height: 50px;
	line-height: 50px;
	font-size: 16px;
	color: #333333;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.grid {
	display: grid;
	gap: 24px;
}

.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.pcard {
	display: block;
	background: var(--white);
	border: 1px solid var(--line);
	transition: box-shadow 0.25s, border-color 0.25s;
}

.pcard:hover {
	border-color: var(--blue);
	box-shadow: var(--shadow);
}

.pcard__media {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 200px;
	padding: 16px;
	background: #fbfbfb;
	overflow: hidden;
}

.pcard__media img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
	transition: transform 0.35s;
}

.pcard:hover .pcard__media img {
	transform: scale(1.05);
}

.pcard__title {
	display: block;
	padding: 14px 12px;
	text-align: center;
	font-size: 15px;
	color: var(--blue);
	border-top: 1px solid var(--line);
}

/* ==========================================================================
   9. 案例切换（原站 .p1700mdc2171c307e583a8：左 250px 列表 + 右 930×512 大图）
   ========================================================================== */
.case-tabs {
	display: grid;
	/*
	 * 原站左列表 250px 自 x120 起、右大图 930px 自 x390 起、右沿 1320，
	 * 也就是两块之间正好隔 20px（版心 1200 - 250 - 930 = 20）。
	 */
	grid-template-columns: 250px 930px;
	justify-content: space-between;
	align-items: start;
}

.case-tabs__nav {
	display: flex;
	flex-direction: column;
}

.case-tabs__btn {
	display: block;
	width: 100%;
	height: 80px;
	padding: 0 0 0 40px;
	margin: 0 0 6px;
	border: 0;
	/*
	 * 文字是居中而不是左对齐：原站左侧列表是「40px 左内边距 + 文字在剩余
	 * 210px 里居中」，实测「多功能厅」四个字落在 x240-300（内容盒 160-370，
	 * 居中点 265）。写成左对齐的话文字会从 160 起，和 170 处的图标叠在一起。
	 */
	text-align: center;
	background: #eeeeee;
	color: #333333;
	font-size: 16px;
	line-height: 80px;
	/*
	 * 原站每个分类前面都有一个细线图标，用 background-position: 50px 20px 摆放
	 * （图标本体约 32-38px）。图标是「深色 / 白色」两套，鼠标悬停与选中态换白色那套。
	 */
	background-position: 50px 20px;
	background-repeat: no-repeat;
}

.case-tabs__btn:hover {
	/*
	 * 原站悬停就是选中态配色：蓝底 + 白字 + 白色图标。
	 * 必须用 background-color 而不是 background 简写：简写会把上面
	 * background-position / background-repeat 一起重置成 0 0 / repeat，
	 * 43×43 的图标就会被平铺满整条（实测就是这个现象）。
	 */
	background-color: var(--blue);
	color: var(--white);
}

.case-tabs__btn.is-active {
	/* 同上：只能改颜色，不能动简写 */
	background-color: var(--blue);
	color: var(--white);
}

/* 六个分类的图标（顺序与原站 data-index 一致） */
.case-tabs__btn:nth-child(1) { background-image: url("../images/case-1.png"); }
.case-tabs__btn:nth-child(2) { background-image: url("../images/case-2.png"); }
.case-tabs__btn:nth-child(3) { background-image: url("../images/case-3.png"); }
.case-tabs__btn:nth-child(4) { background-image: url("../images/case-4.png"); color: #000000; }
.case-tabs__btn:nth-child(5) { background-image: url("../images/case-5.png"); }
.case-tabs__btn:nth-child(6) { background-image: url("../images/case-6.png"); font-weight: 700; }

/* 第 4 项常态是纯黑字、第 6 项常态加粗，悬停/选中时都要回到白字 */
.case-tabs__btn:nth-child(4):hover,
.case-tabs__btn:nth-child(4).is-active,
.case-tabs__btn:nth-child(6):hover,
.case-tabs__btn:nth-child(6).is-active { color: var(--white); }

.case-tabs__btn:nth-child(1):hover,
.case-tabs__btn:nth-child(1).is-active { background-image: url("../images/case-1-on.png"); }
.case-tabs__btn:nth-child(2):hover,
.case-tabs__btn:nth-child(2).is-active { background-image: url("../images/case-2-on.png"); }
.case-tabs__btn:nth-child(3):hover,
.case-tabs__btn:nth-child(3).is-active { background-image: url("../images/case-3-on.png"); }
.case-tabs__btn:nth-child(4):hover,
.case-tabs__btn:nth-child(4).is-active { background-image: url("../images/case-4-on.png"); }
.case-tabs__btn:nth-child(5):hover,
.case-tabs__btn:nth-child(5).is-active { background-image: url("../images/case-5-on.png"); }
.case-tabs__btn:nth-child(6):hover,
.case-tabs__btn:nth-child(6).is-active { background-image: url("../images/case-6-on.png"); }

/*
 * 最后一项不能留 6px 下外边距：flex 列会把末项的外边距算进容器高度，
 * 于是左列表变成 516px、比右侧大图（512px）还高，整块多出 4px。
 */
.case-tabs__btn:last-child {
	margin-bottom: 0;
}

.case-tabs__panel {
	display: none;
	height: 512px;
	overflow: hidden;
}

.case-tabs__panel.is-active {
	display: block;
}

.case-tabs__panel img {
	width: 100%;
	height: 512px;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   10. 新闻
   ========================================================================== */
.news-feature {
	display: grid;
	/*
	 * 原站是左右各一个 col-lg-6，各占版心一半（600px）且左右紧挨：
	 * 左卡片宽 580px（起点 120），右列表 600px（起点 720），
	 * 列表文字再从 750 起（内边距 30px）。
	 * 之前用 1fr / 1fr + 30px 缝，左卡被压到 585、右列表被推到 765，
	 * 整条新闻带横向错位 15-17px。
	 */
	grid-template-columns: 600px 600px;
	gap: 0;
	/*
	 * 关键：必须顶对齐，不能让网格把子项拉伸到同高。
	 * 原站用浮动布局，左卡片的高度只由自己的内容决定；
	 * 网格默认 stretch 会把蓝底拉到和右侧列表一样高（实测高了一倍）。
	 */
	align-items: start;
}

.news-feature__main {
	display: block;
	/* 原站 .data_col：宽度 580px（600 - 20），蓝底卡片 */
	width: 580px;
	/*
	 * 原站 .p1700ma502375c014ef2ea .data_col：
	 *   background-color:#006baf; padding-bottom:20px;
	 * 也就是说整张特色新闻卡片是蓝底——图片盖住上半部分，
	 * 下半部分露出蓝色，日期/标题/摘要都是白字。
	 * 之前做成白底 + 日期压在图上，和原站差得很远。
	 */
	background: var(--blue);
	padding-bottom: 20px;
}

.news-feature__list {
	padding: 0;
}

.news-feature__media {
	position: relative;
	display: block;
	/* 原站 .p1700m6138d6c5995d6928：margin-bottom 30px + max-height 338px */
	margin-bottom: 30px;
	max-height: 338px;
	overflow: hidden;
}

.news-feature__media img {
	width: 100%;
	/*
	 * 原站 .p1700m3ea0abaf6817fb01：固定 338px 高，,img 没有 object-fit，
	 * 也就是按 580×338 直接拉伸（原图 1231×662 比例本来就不同）。
	 * 用 cover 会裁掉上下内容，和原站画面不一样。
	 */
	height: 338px;
	object-fit: fill;
}

.news-feature__date {
	/* 原站 .p1700mcbfdf220b8770887：18px / 行高 40px / 白字 / 右对齐 */
	display: block;
	height: 40px;
	padding: 0 10px;
	color: var(--white);
	text-align: right;
	font-size: 18px;
	line-height: 40px;
}

/* 日期占 1/4（原站 col-lg-3），右侧一条 1px 白色分隔线 */
.news-feature__date-col {
	flex: 0 0 25%;
	max-width: 25%;
	min-width: 0;
	border-right: 1px solid var(--white);
}

/* 标题与摘要占 3/4（原站 col-lg-9，padding-left 20px / margin-top 1rem / min-height 91px） */
.news-feature__text {
	flex: 1;
	padding-left: 20px;
	/*
	 * 关键：flex 项默认 min-width:auto，会被 white-space:nowrap 的内容撑开，
	 * 于是 text-overflow:ellipsis 永远不触发，文字直接顶到卡片右边缘被硬裁。
	 * 必须显式 min-width:0 才能真正限制宽度、让省略号生效。
	 * 右侧留 20px 内边距，对应原站摘要的 margin-right:20px。
	 */
	min-width: 0;
	padding-right: 20px;
	/*
	 * 原站这里是 margin-top:1rem + min-height:91px，但原站的字号/行高语境不同：
	 * 直接照搬会在标题上方多出约 86px 空白（实测标题被顶到面板中部），
	 * 整卡比原站高 105px。这里只保留必要的上间距。
	 */
	margin-top: 0;
	min-height: 0;
	/*
	 * 右内边距归零：原站 .p1700ma731156461d996cf 只有 padding-left:20px，
	 * 右侧留白是摘要自己的 margin-right:20px。两边都留会少 20px 宽，
	 * 标题的省略号会提前 20px 出现。
	 */
	padding-right: 0;
}

.news-feature__body {
	display: flex;
	align-items: flex-start;
}

.news-feature__main .news-feature__title {
	color: var(--white);
	font-size: 16px;
	font-weight: 700;
	/* 原站标题行 21px + 下间距 10px，再接摘要行 50px，整个文字块 81px */
	line-height: 21px;
	margin-bottom: 10px;
	/*
	 * 原站 .p1700maa2a2ea80586b28e 固定 height:20px + line-height:20px，
	 * 也就是标题永远只占一行（原稿本身也已截断成"…"结尾）。
	 * 不限制的话长标题会折成两行，把整张卡片撑高 20px。
	 */
	display: block;
	height: 21px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.news-feature__main .news-feature__excerpt {
	color: var(--white);
	font-size: 12px;
	line-height: 25px;
	margin-right: 20px;
	/*
	 * 强制 2 行。原站摘要在后台就已被截成两行；
	 * 只靠字数截断不可靠（这里实测折了 5 行，整卡高出 88px），
	 * 用行数钳制才能保证高度稳定。
	 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.news-feature__list li {
	/* 原站 .p1700m25e23e0ff73f7e14：底部 1px #d2d2d2 分割线 */
	border-bottom: 1px solid #d2d2d2;
	/* 原站相邻两条之间有 12px 间隙（实测条目盒 2822→2911、2911→3025…） */
	margin-bottom: 12px;
}

.news-feature__list li:last-child {
	margin-bottom: 0;
}

.news-feature__list a {
	display: block;
	/*
	 * 原站：上 20px / 下 21px / 左 30px，并在 15px 30px 处有一个小图标。
	 * 下边距这里给 25 而不是 21：原站摘要还带一个 4px 下外边距，
	 * 但摘要为空时（原站第一条就是空的）空块的外边距会自我折叠、不生效，
	 * 我们这边同样不生效，于是每条比原站矮 4px、后面三条整体上移 4px。
	 * 把这 4px 挪到 padding 上就与「有没有摘要」无关了。
	 */
	padding: 20px 0 25px 30px;
	/*
	 * 原站 .p1700m25e23e0ff73f7e14 的小图标：
	 * background-position: 15px 30px，用的是原站那张 png（不是自画的方块）。
	 */
	background-image: url("../images/news-dot.png");
	background-position: 15px 30px;
	background-repeat: no-repeat;
}

.news-feature__item-title {
	display: block;
	/* 原站 .p1700mee198541ddc58fbf：16px / 加粗 / 下间距 10px */
	font-size: 16px;
	font-weight: 700;
	/* 原站标题行实测 21px（1.3 会得到 20.8，四条累计差 1px） */
	line-height: 21px;
	margin-bottom: 10px;
}

.news-feature__item-excerpt {
	display: block;
	/* 原站 .p1700me5e4883b8c599b40：12px / 行高 25px / #999 */
	color: #999999;
	font-size: 12px;
	line-height: 25px;
	/* 原站那 4px 已并入 .news-feature__list a 的下内边距 */
	margin-bottom: 0;
}

.ncard {
	display: block;
	background: var(--white);
}

.ncard__media img {
	width: 100%;
	height: 190px;
	object-fit: cover;
}

.ncard__title {
	display: block;
	padding: 12px 14px 4px;
	font-size: 15px;
}

.ncard__date {
	display: block;
	padding: 0 14px 14px;
	color: var(--text-light);
	font-size: 13px;
}

/* ==========================================================================
   11. 合作客户 / 资质轮播
   ========================================================================== */
.partners {
	/*
	 * 原站 .p1700c6d0392f522ca51c1（Slick）：一屏 6 个，格子 200×100。
	 * 1200px 版心 ÷ 6 = 200px，正好对上。
	 */
	overflow: hidden;
}

/*
 * 「我们的合作客户」：原站该板块从 y3291 开始，标题行落在 3361（上留白 70），
 * Logo 行落在 3537（标题区 151 + 额外 25），格子 94，板块下留白 70，
 * 合计 70 + 151 + 25 + 94 + 70 = 410，正好是大板块高度。
 */
.section--partners {
	padding-top: 70px;
	padding-bottom: 70px;
}

.section--partners .partners {
	margin-top: 25px;
}

.partners__track {
	display: flex;
	transition: transform 0.5s ease;
}

.partner {
	flex: 0 0 calc(100% / 6);
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * 原站格子实测 200×94（含 1px #e9e9e9 描边），内部图片 198×92，
	 * 也就是图片正好铺满描边以内的整格，格子本身不留内边距。
	 */
	height: 94px;
	padding: 0;
	border: 1px solid var(--line);
	background: var(--white);
	/* 客户要求：保留 Logo 原色，不做灰度处理 */
	transition: border-color 0.25s;
}

.partner:hover {
	border-color: var(--blue);
}

.partner img {
	/*
	 * 原站就是 width:100% + height:auto：图片按 198px 宽铺满格子内部，
	 * 高度自然落到 92px（原图 300×140，比例与格子一致，不会被拉伸）。
	 * 用 object-fit 反而会把原图自带的留白算错，logo 大小对不上。
	 */
	width: 100%;
	height: auto;
}

.cert-carousel {
	position: relative;
}

.cert-carousel__track {
	position: relative;
	min-height: 380px;
}

.cert-carousel__item {
	position: absolute;
	inset: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s;
}

.cert-carousel__item.is-active {
	opacity: 1;
	visibility: visible;
	position: relative;
}

.cert-carousel__item img {
	max-height: 340px;
	width: auto;
	box-shadow: var(--shadow);
}

.cert-carousel__item figcaption {
	margin-top: 14px;
	color: var(--text-mid);
}

.cert-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line);
	background: var(--white);
	color: var(--blue);
	font-size: 26px;
	line-height: 1;
	border-radius: 50%;
}

.cert-carousel__arrow:hover {
	background: var(--blue);
	color: var(--white);
	border-color: var(--blue);
}

.cert-carousel__arrow--prev { left: 0; }
.cert-carousel__arrow--next { right: 0; }

/* ==========================================================================
   12. 友情链接 / 联系方式
   ========================================================================== */
.friend-links {
	/* 原站 .p1700m50010：上下各 10px，白底，整块 77px 高 */
	padding: 10px 0;
	background: var(--white);
	/* 客户要求：上下都不要边框 */
}

.friend-links__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	/*
	 * 原站这一行的内容区高 57px，标题与链接都在这 57px 里垂直居中
	 * （标题行 3726-3751 居中、链接 3731-3748 居中）。
	 */
	min-height: 57px;
	/* 原站 .xg_flink_item：13px / #484848 */
	font-size: 13px;
	color: #484848;
}

.friend-links__title {
	/* 原站「友情链接：」16px / 加粗 / #333，宽 80px */
	color: #333333;
	font-size: 16px;
	font-weight: 700;
	line-height: 25px;
}

.friend-links a {
	display: inline-block;
	padding: 0;
	/* 原站两个链接之间相隔 20px（220→318，前一个宽 78） */
	margin-left: 20px;
	color: #484848;
	font-size: 13px;
}

.friend-links a:hover {
	color: var(--blue);
	text-decoration: underline;
}

.contact-block {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 0;
	background: var(--white);
	box-shadow: var(--shadow);
}

.contact-block__map img {
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	display: block;
}

.contact-block__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	background: var(--bg-gray);
	color: var(--text-light);
}

.contact-block__info {
	padding: 40px 36px;
	background: var(--bg-gray);
}

.contact-block__company {
	font-size: 19px;
	margin-bottom: 20px;
}

.contact-block__list li {
	display: flex;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px dashed var(--line-light);
	font-size: 14px;
}

.contact-block__label {
	flex: 0 0 92px;
	color: var(--text-mid);
}

.contact-block__value {
	color: var(--text);
	word-break: break-all;
}

/* ==========================================================================
   13. 面包屑 / 分页
   ========================================================================== */
.crumbs-row {
	padding-top: 18px;
	padding-bottom: 18px;
}

/*
 * 面包屑横条。原站结构（产品中心栏目页实测）：
 *   外层 section .p1703m50001 —— padding:10px 0、background:#f6f6f6（产品页是 #f8f8f8）
 *   1200px 容器里左侧一个 16×16 房子图标，再空 24px 开始写面包屑
 *   文字 12px / #444 / 行高 16px，前缀后面空 18px，层级之间 6×7 箭头图（左右各 7px）
 */
.crumbs-bar {
	padding: 10px 0;
	background: #f6f6f6;
	line-height: 16px;
}

body.post-type-archive-product .crumbs-bar,
body.tax-product_cat .crumbs-bar,
body.single-product .crumbs-bar {
	background: #f8f8f8;
}

.breadcrumb {
	font-size: 12px;
	color: #444444;
	line-height: 16px;
}

.breadcrumb__home {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 8px;
	vertical-align: -3px;
	background: url("../images/crumb-home.png") no-repeat left center;
}

.breadcrumb__prefix { padding-right: 18px; }

.breadcrumb__sep {
	display: inline-block;
	width: 6px;
	height: 7px;
	margin: 0 7px;
	vertical-align: 1px;
	background: url("../images/crumb-arrow.png") no-repeat left center;
}

.breadcrumb a { color: #444444; }

.breadcrumb a:hover {
	color: var(--blue);
}

.pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 40px;
}

.pager__total {
	margin-right: 8px;
	color: var(--text-light);
	font-size: 13px;
}

.pager__btn,
.pager__num {
	display: inline-block;
	min-width: 34px;
	padding: 6px 10px;
	border: 1px solid var(--line);
	background: var(--white);
	text-align: center;
	font-size: 13px;
	color: var(--text-mid);
}

.pager__num.is-active,
.pager__num:hover,
.pager__btn:hover {
	background: var(--blue);
	border-color: var(--blue);
	color: var(--white);
}

.pager__btn.is-disabled {
	color: #ccc;
	pointer-events: none;
}

/* ==========================================================================
   14. 列表页（左栏 + 内容）
   ========================================================================== */
/*
 * 原站列表页布局：左侧栏 270px + 右内容 930px，两栏之间没有 gap（合计正好 1200）。
 * 侧栏里的每个块自己只有 234px 宽（左对齐），右边留 36px 空白。
 * 实测原站：.col-lg-3 min/max-width 270，.p1703m9ee3fa2f78e59f5c min/max-width 930。
 */
.layout-side {
	display: grid;
	grid-template-columns: 270px 930px;
	gap: 0;
	align-items: start;
}

/* 列表页：面包屑到侧栏之间留 35px（原站 .p1703m50004 margin-top:35px），内容区底部留 50px */
.section--list {
	padding-top: 35px;
	padding-bottom: 0;
}

.section--list .side-content {
	padding-bottom: 50px;
}

/*
 * 栏目页「分类卡片墙」（原站 产品中心 / 成功案例 栏目页）：
 * 3 列、卡宽 294px、封面图 294×223、白底 + 1px 浅阴影、
 * 标题块 padding:20px 10px、14px、行高 26px、居中、#333。
 */
.term-grid {
	display: grid;
	grid-template-columns: repeat(3, 294px);
	gap: 30px 24px;
}

.tcard {
	display: block;
	background: var(--white);
	box-shadow: #e9e9e9 1px 1px 6px;
	padding-bottom: 15px;
	text-decoration: none;
	transition: box-shadow 0.25s;
}

.tcard:hover {
	box-shadow: #dcdcdc 1px 1px 10px;
}

.tcard__media {
	display: block;
	width: 294px;
	height: 223px;
	overflow: hidden;
	background: #fbfbfb;
}

.tcard__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tcard__title {
	display: block;
	padding: 20px 10px;
	font-size: 14px;
	line-height: 26px;
	color: #333333;
	text-align: center;
}

.tcard:hover .tcard__title {
	color: var(--blue);
}

/*
 * 「成功案例」栏目页是 2 列（原站 .data_col col-lg-6）：卡更宽，
 * 封面图按原始比例自适应高度（.p1708mc5c78899dfd6117e width:100%;height:auto），
 * 标题 16px。
 */
.term-grid--wide {
	grid-template-columns: repeat(2, 1fr);
	/* 原站案例卡片：列间距 30px、行间距 10px（实测行距 341→802） */
	gap: 10px 30px;
}

.term-grid--wide .tcard__media {
	width: 100%;
	height: auto;
}

.term-grid--wide .tcard__media img {
	height: auto;
}

.term-grid--wide .tcard__title {
	font-size: 16px;
}

.side {
	width: 270px;
}

/* 蓝底标题块：PRODUCT（上 50 / 下 8 / 左 40）+ 栏目名（24px 粗体、下 37px、底部 1px #e9e9e9） */
.side__head {
	width: 234px;
	background: var(--blue);
	color: var(--white);
}

.side__en {
	display: block;
	padding: 50px 0 8px 40px;
	font-size: 14px;
	line-height: 25px;
	text-transform: uppercase;
}

.side__cn {
	display: block;
	padding: 0 0 37px 40px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	border-bottom: 1px solid #e9e9e9;
}

/* 栏目菜单：234×45 一格、#f6f6f6 底、#333 字、缩进 35px，悬停/当前项反白（#333 底 + 白字） */
.side-menu {
	width: 234px;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}

.side-menu li {
	height: 45px;
	line-height: 45px;
	background: #f6f6f6;
	border: 0;
}

.side-menu a {
	display: block;
	height: 45px;
	padding: 0 0 0 35px;
	font-size: 14px;
	color: #333333;
}

.side-menu li:hover a,
.side-menu li.is-active a {
	background: #333333;
	color: var(--white);
}

/* 联系方式：蓝色标题块 + 浅灰正文块 */
.side__contact {
	width: 234px;
	margin-top: 20px;
	padding: 0;
	background: transparent;
}

.side__contact-title {
	margin: 0;
	padding: 35px 0 15px 40px;
	background: var(--blue);
	color: var(--white);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	border-bottom: 1px solid #e9e9e9;
}

.side__contact p {
	margin: 0;
	padding: 0 15px;
	background: #f6f6f6;
	color: #333333;
	font-size: 13px;
	line-height: 30px;
	word-break: break-all;
}

.side__contact p:first-of-type {
	padding-top: 30px;
}

.side__contact p:last-of-type {
	padding-bottom: 100px;
}

.icard {
	display: block;
	background: var(--white);
	/* 原站列表卡片：白底 + 1px 浅阴影（无描边），卡片下方留 15px */
	box-shadow: #e9e9e9 1px 1px 6px;
	padding-bottom: 15px;
	transition: box-shadow 0.25s;
}

.icard:hover {
	box-shadow: #dcdcdc 1px 1px 10px;
}

.icard__media {
	display: block;
	/* 原站图片区 294×223（.p1703m326693d85fea1e9f） */
	height: 223px;
	overflow: hidden;
	background: #fbfbfb;
}

.icard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s;
}

.icard:hover .icard__media img {
	transform: scale(1.05);
}

.icard__body {
	display: block;
	padding: 20px 10px 0;
	text-align: center;
}

.icard__title {
	display: block;
	font-size: 14px;
	line-height: 26px;
	color: #333333;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.icard__date {
	display: block;
	color: var(--text-light);
	font-size: 12px;
	margin-top: 4px;
}

.icard__excerpt {
	display: block;
	margin-top: 6px;
	color: var(--text-light);
	font-size: 13px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* ==========================================================================
   14b. 新闻列表（原站行版式）
   ========================================================================== */
/*
 * 原站实测（1920 视口）：
 *   行 = 68px 日期块 + 543px 文字列 + 310px 配图，行下 1px #e9e9e9 分隔线，
 *   padding-bottom 40px、margin-bottom 40px；
 *   日期块 68×88、底色 #333、白字右对齐（上面 mm-dd 18px、下面年份 14px，行高 25px）；
 *   标题 22px/#333，摘要 14px/#666 行高 25px，「查看更多」98×30 描边按钮（#cdcdcd）。
 */
.nrow {
	display: grid;
	grid-template-columns: 68px 543px 1fr;
	align-items: start;
	padding-bottom: 40px;
	margin-bottom: 40px;
	border-bottom: 1px solid #e9e9e9;
}

.nrow__date {
	width: 68px;
	height: 88px;
	padding: 10px 12px 0 0;
	background: #333333;
	color: var(--white);
	text-align: right;
}

.nrow__day {
	display: block;
	font-size: 18px;
	line-height: 25px;
}

.nrow__year {
	display: block;
	font-size: 14px;
	line-height: 25px;
}

.nrow__text {
	padding: 35px 30px 0;
}

.nrow__title {
	margin: 0;
	font-size: 22px;
	font-weight: 400;
	/* 原站实测两行标题盒高 70px（35px/行） */
	line-height: 35px;
}

.nrow__title a {
	color: #333333;
}

.nrow__title a:hover {
	color: var(--blue);
}

.nrow__excerpt {
	margin: 0;
	font-size: 14px;
	line-height: 25px;
	color: #666666;
}

.nrow__more {
	display: inline-block;
	width: 98px;
	height: 30px;
	margin-top: 25px;
	border: 1px solid #cdcdcd;
	color: #666666;
	font-size: 14px;
	line-height: 30px;
	text-align: center;
}

.nrow__more:hover {
	border-color: var(--blue);
	color: var(--blue);
}

.nrow__media {
	display: block;
	padding-left: 9px;
}

.nrow__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   15. 详情页
   ========================================================================== */
.product-detail {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: start;
}

.product-detail__main {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 380px;
	padding: 20px;
	background: #fbfbfb;
	border: 1px solid var(--line);
}

.product-detail__main img {
	max-height: 420px;
	width: auto;
	object-fit: contain;
}

.product-detail__noimg {
	color: var(--text-light);
}

.product-detail__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.product-detail__thumb {
	width: 84px;
	height: 84px;
	padding: 4px;
	background: var(--white);
	border: 1px solid var(--line);
}

.product-detail__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.product-detail__thumb.is-active,
.product-detail__thumb:hover {
	border-color: var(--blue);
}

.product-detail__title {
	font-size: 28px;
	margin-bottom: 12px;
}

.product-detail__term {
	color: var(--text-light);
	font-size: 13px;
}

.product-detail__cta {
	margin-top: 26px;
}

.spec-table {
	width: 100%;
	margin: 18px 0;
	border-collapse: collapse;
	font-size: 14px;
}

.spec-table th,
.spec-table td {
	padding: 9px 12px;
	border: 1px solid var(--line);
	text-align: left;
}

.spec-table th {
	width: 150px;
	background: var(--bg-gray);
	font-weight: 400;
	color: var(--text-mid);
}

.detail-title {
	font-size: 26px;
	margin-bottom: 10px;
}

.detail-meta,
.article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	padding-bottom: 16px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--line);
	color: var(--text-light);
	font-size: 13px;
}

.entry-content {
	line-height: 2;
	color: var(--text-mid);
	word-break: break-word;
}

.entry-content img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 16px auto;
}

.entry-content video,
.entry-content iframe {
	max-width: 100%;
}

.entry-content h2,
.entry-content h3 {
	margin-top: 1.4em;
	color: var(--text);
}

.entry-content ul {
	list-style: disc;
	padding-left: 22px;
	margin-bottom: 1em;
}

.entry-content ol {
	list-style: decimal;
	padding-left: 22px;
	margin-bottom: 1em;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1em 0;
}

.entry-content th,
.entry-content td {
	padding: 8px 12px;
	border: 1px solid var(--line);
}

.article {
	max-width: 980px;
	margin: 0 auto;
}

.article__title {
	font-size: 26px;
	text-align: center;
	margin-bottom: 14px;
}

.article__meta {
	justify-content: center;
}

.prevnext {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 40px;
	margin-top: 36px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font-size: 14px;
	color: var(--text-light);
}

.prevnext a {
	color: var(--text-mid);
}

.prevnext a:hover {
	color: var(--blue);
}

.related {
	margin-top: 56px;
}

/* ==========================================================================
   16. 页脚
   ========================================================================== */
.site-footer {
	/*
	 * 原站页脚紧贴友情链接（友情链接 3701-3778，页脚 3778 起），
	 * 上沿那道浅灰是 .footer-main 的向上阴影，不是分隔线
	 * （截图取色：y3759-3777 由 #fefefe 渐深到 #e9e9e9，y3778 直接是白色）。
	 */
	margin-top: 0;
	border-top: 0;
}

.footer-nav {
	/*
	 * 客户要求：页脚导航融进页脚大板块，不要单独一条带分隔线的横条。
	 * 去掉下边框，背景与页脚主区一致。
	 * 原站导航文字行在 y3803-3843（页脚上沿 3778 + 上留白 25）。
	 */
	padding: 0;
	/* 导航行底 3843 与下方二维码行顶 3873 之间隔 30px */
	margin-bottom: 30px;
	background: var(--white);
}

.footer-nav__list {
	display: flex;
	flex-wrap: wrap;
	/* 原站页脚导航是靠左排列的，不是居中 */
	justify-content: flex-start;
	gap: 0;
}

/*
 * 原站 .xg_bnavi .xg_menuLi1：每项宽 110px、行高 40px、14px，
 * 项与项之间还有约 30px 间距，5 项文字总跨度约 120-734px。
 */
.footer-nav__list li {
	width: 110px;
	margin-right: 30px;
}

.footer-nav__list a {
	display: block;
	padding: 0;
	line-height: 40px;
	font-size: 14px;
	/* 原站 .xg_bnavi .xg_menuA1：14px / 行高 40px / #444 */
	color: #444444;
}

.footer-nav__list a:hover {
	color: var(--blue);
}

.footer-main {
	/*
	 * 原站 .p1731mf1731-00003：上 25px、下 35px，并带一道向上的浅阴影。
	 * 板块实际高度 305（3778 → 4083）：25 + 导航 40 + 30 + 内容 157 + 53。
	 * 原站内容区最矮的一列到底 4030，之后还有 53px 才是版权条，
	 * 所以这里下留白给 53 而不是标注的 35（原站那段留白由两个块叠加产生）。
	 */
	padding: 25px 0 53px;
	background: var(--white);
	box-shadow: 0 -5px 15px #e0e0e0;
}

.footer-main__inner {
	/*
	 * 原站三列：Logo 170×138（x120）、联系方式（x355，6 行 14px/25px）、
	 * 两个二维码 120×120（x960 / x1160，行高 3873，比 Logo 高 7px）。
	 */
	display: flex;
	gap: 0;
	align-items: flex-start;
}

.footer-brand {
	width: 200px;
	/* Logo 与联系方式都比二维码低 7px（原站 3880 vs 3873） */
	padding-top: 7px;
}

.footer-brand img {
	max-width: 170px;
	height: auto;
}

.footer-contact {
	width: 605px;
	padding: 7px 0 0 35px;
}

.footer-contact p {
	/*
	 * 原站页脚联系方式的每行间距是 25px（line-height:25px、无外边距），
	 * 用 1.85 行高 + 5px 外边距会变成 31px，6 行下来偏出 36px。
	 */
	margin: 0;
	font-size: 14px;
	line-height: 25px;
	color: var(--text-mid);
}

.footer-qr {
	display: flex;
	/* 二维码块整体靠右，右边缘停在 1280（版心右沿 1320 - 40） */
	margin: 0 40px 0 auto;
	gap: 80px;
}

.footer-qr__item {
	text-align: center;
}

.footer-qr__item img {
	width: 120px;
	height: 120px;
	object-fit: contain;
	border: 0;
	padding: 0;
	background: var(--white);
}

.footer-qr__item span {
	display: block;
	/* 图片底 3993 → 文字 3999，隔 6px；14px / #666 */
	margin-top: 6px;
	font-size: 14px;
	line-height: 19px;
	color: var(--text-mid);
}

.footer-copy {
	background: var(--blue);
	/* 原站版权条是纯白字，不是半透明白 */
	color: var(--white);
	/* 版权条紧接页脚主体（原站 4083 起，高 49） */
	margin-top: 0;
}

.footer-copy__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	/*
	 * 原站整行从 x222 排到 x1218（996px，居中）。
	 * 段落间距是各段自己带的（版权 14 / ICP 12 / 公安 14 / 网站地图 24），
	 * 不是统一 gap —— 用统一 gap 时整行会宽 58px、每段都偏。
	 */
	gap: 0;
	/*
	 * 版权条整条 49px 高，文字在其中垂直居中。
	 * 不写 padding 而是写死 min-height：继承的 1.8 行高（25.2px）会把
	 * 15px 上下内边距顶成 55px，整条比原站高 6px。
	 */
	padding: 0;
	min-height: 49px;
	line-height: 25px;
	font-size: 14px;
	/*
	 * 原站文字行盒在 y4094..4119（整条 4083..4132），居中会落在 4094.5，
	 * 多出半像素就会把文字整体压低 1px —— 版权条里 5 段文字全部跟着错位。
	 * 下内边距给 2px，行盒落到 4094 整数位。
	 */
	padding-bottom: 2px;
}

.footer-copy a {
	color: var(--white);
}

.footer-copy__copyright { margin-right: 14px; }
.footer-copy__icp { margin-right: 12px; }

/*
 * 公安备案前面有一个 22px 宽的小徽章（原站 p1731mf1731-05dcfde705e48cb47
 * 用 background-position:left center + padding-left:22px 实现）。
 */
.footer-copy__police {
	padding-left: 22px;
	margin-right: 14px;
	background: url("../images/police-badge.png") left center no-repeat;
}

.footer-copy__sitemap { margin-right: 24px; }

.footer-copy__vendor { margin-left: 0; }

.footer-copy a:hover {
	color: var(--white);
	text-decoration: underline;
}

/* ==========================================================================
   17. 悬浮客服
   ========================================================================== */
/*
 * 右侧悬浮客服：整体一个 fixed 容器，内部左侧是展开面板、右侧是竖标签，
 * 顶边对齐、彼此贴合（客户提供的展开态截图就是紧贴的）。
 * 尺寸按原站实测：竖条约 24×96，展开面板约 74px 宽。
 */
.floatwrap {
	position: fixed;
	/*
	 * 水平锚点照抄原站 .p1736mf1736-00001：right:10px、width:75px。
	 * 原站收起时 JS 把面板的 right 改成 -75px（整块推到屏幕右侧外面），
	 * 竖标签挂在面板左边（right:100%），于是正好停在视口最右边；
	 * 展开时面板右移到 right:10px，竖标签跟着左移。
	 * 这里用「right:10px + 收起时整体右移 10px」等价实现，
	 * 收起态竖标签仍与视口右缘齐平，展开态面板右缘内缩 10px。
	 */
	right: 10px;
	transform: translateX(10px);
	transition: transform 0.3s ease;
	/*
	 * 锚点按原站实测倒推：
	 *   竖条 96px、展开面板 291px，两者顶边对齐。
	 *   原站竖条在 y504-600（视口 945 高），面板同顶边延伸到 y795。
	 *   容器高度 = 面板高度 291，所以 bottom = 945 - 795 = 150px。
	 * 之前直接写 bottom:345px（那是竖条自身的底边距），
	 * 结果容器被高 291 的面板撑高，竖条被顶到 y213 去了。
	 */
	bottom: 150px;
	z-index: 901;
	display: flex;
	align-items: flex-start; /* 面板与竖条顶边对齐 */
}

.floatwrap.is-open {
	transform: none;
}

/*
 * 裁切层：收起时宽 0，展开时涨到面板宽度。
 * 用宽度过渡而不是 display 切换，才有「从右往左推开」的效果。
 */
.float-panel {
	width: 0;
	overflow: hidden;
	transition: width 0.3s ease;
}

.float-panel.is-open {
	width: 76px; /* 面板 74px + 左右各 1px 描边 */
	/*
	 * 展开后必须放开裁切：微信二维码 / 电话提示是悬停弹在面板左侧的，
	 * 继续 overflow:hidden 会把弹层整个裁掉（实测点微信、电话什么也不弹）。
	 */
	overflow: visible;
}

.floatbar {
	width: 74px;
	background: var(--white);
	border: 1px solid #e5e5e5;
}

/*
 * 竖标签：约 26×97px（原站实测 26×97，x1879-1904），底色 #029bdb，
 * 白字竖排「在线客服」+ 下方耳麦图标。
 * 按钮用纵向 flex 排列，内部的文字块自己竖排——直接在按钮上写 writing-mode
 * 会让文字和图标变成并排（实测图标会跑到文字右边）。
 */
.float-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 26px;
	width: 26px;
	/* 原站竖条实测高 96px：内边距与字距按此收，避免比原站高出一截 */
	padding: 7px 0 9px;
	border: 0;
	background: #029bdb;
	color: var(--white);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1px;
	cursor: pointer;
}

.float-tab:hover {
	background: #0288c0;
}

.float-tab__text {
	display: block;
	/* 文字竖排：在↘下逐字排列 */
	writing-mode: vertical-lr;
	text-orientation: upright;
}

.float-tab__icon {
	display: block;
	width: 16px;
	height: 16px;
	margin-top: 6px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 3a8 8 0 0 0-8 8v5a3 3 0 0 0 3 3h1v-8H6v-1a6 6 0 0 1 12 0v1h-2v8h1a3 3 0 0 0 3-3v-5a8 8 0 0 0-8-8z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.floatbar__item {
	position: relative;
	display: block;
	width: 100%;
	/* 原站 .xg_hf-list li：上下各 15px、居中、12px */
	padding: 15px 0;
	border: 0;
	background: transparent;
	color: #444444;
	text-align: center;
	font-size: 12px;
	cursor: pointer;
}

.floatbar__item:hover {
	/* 原站 .xg_hf-list li:hover：底色 #d5d5d5 */
	background: #d5d5d5;
}

.floatbar__icon {
	display: block;
	width: 48px;
	height: 48px;
	margin: 0 auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 48px 48px;
}

/* 图标取自原站同一套素材，保证视觉一致 */
.floatbar__icon--wx { background-image: url("../images/float-wx.png"); }
.floatbar__icon--tel { background-image: url("../images/float-tel.png"); }
.floatbar__icon--mail { background-image: url("../images/float-mail.png"); }
.floatbar__icon--msg {
	/* 原站没有「在线留言」这一项，用同一套图标体系补一个（剪贴板） */
	background-image: url("../images/float-mail.png");
}

/* 回到顶部：原站没有这一项，用 SVG 画一个统一的箭头 */
.floatbar__icon--top {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='19' fill='none' stroke='%23444' stroke-width='2.5'/%3E%3Cpath d='M24 33V17M17 24l7-7 7 7' fill='none' stroke='%23444' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.floatbar__text {
	display: block;
	/* 原站 .xg_hfl-txt：color #444、padding-top 3px */
	color: #444444;
	padding-top: 3px;
	font-size: 12px;
	line-height: 1.3;
}

.floatbar__pop {
	position: absolute;
	/*
	 * 定位照抄原站：
	 *   原站基础 CSS 是 right:125px，客户自有样式表「营销窗口距离.css」里又用
	 *   .xg_rnp-tips-ewm{right:115px!important} 覆盖过，实际生效值 115px；
	 *   right 是相对 li 右缘算的，所以弹层落在竖条左边、与面板留 40px 间隙。
	 *   （CDP 实测原站：li 右缘 1895，二维码弹层 1665-1780）
	 */
	right: 115px;
	top: 50%;
	transform: none;
	margin-right: 0;
	background: var(--white);
	box-shadow: 6px 0 19px rgba(0, 0, 0, 0.09);
	border-radius: 4px;
	display: none;
	text-align: center;
	white-space: nowrap;
	color: #484c61;
	font-size: 14px;
}

.floatbar__item:hover .floatbar__pop {
	display: block;
}

/* 二维码：原站 .xg_rnp-tips-ewm：115×115、内边距 5px、右移 115px、上移 70px */
.floatbar__item--qr .floatbar__pop {
	width: 115px;
	height: 115px;
	padding: 5px;
	margin-top: -70px;
	box-shadow: 6px 0 29px rgba(0, 0, 0, 0.09);
}

/* 电话：原站 .xg_rnp-tips-tel：205×55、行高 55px、右移 95px、上移 27px、带右向箭头 */
.floatbar__item--tel .floatbar__pop {
	width: 205px;
	height: 55px;
	padding: 0;
	right: 95px;
	margin-top: -27px;
	line-height: 55px;
	font-weight: 400;
}

.floatbar__item--tel .floatbar__pop::after {
	content: "";
	position: absolute;
	right: -10px;
	top: 50%;
	margin-top: -8px;
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 10px solid var(--white);
}

.floatbar__pop img {
	width: 105px;
	height: 105px;
	object-fit: contain;
}

.floatbar__pop p {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--text-mid);
}

.floatbar__tel {
	color: var(--blue);
	font-size: 16px;
	font-weight: 700;
}

/* ==========================================================================
   18. 留言面板
   ========================================================================== */
.msg-panel {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 950;
	width: 340px;
	max-width: calc(100vw - 40px);
	background: var(--white);
	border-radius: 6px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

.msg-panel[hidden] {
	display: none;
}

.msg-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: linear-gradient(90deg, var(--blue), var(--blue-light));
	color: var(--white);
}

.msg-panel__close {
	border: 0;
	background: transparent;
	color: var(--white);
	font-size: 20px;
	line-height: 1;
}

.msg-panel__form {
	padding: 16px;
	max-height: 70vh;
	overflow-y: auto;
}

.msg-panel__tip {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--text-light);
}

.field {
	display: block;
	margin-bottom: 10px;
}

.field__label {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	color: var(--text-mid);
}

.field__label em {
	color: #e4573d;
	font-style: normal;
}

.field input,
.field textarea {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 14px;
	background: #fcfcfc;
}

.field input:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--blue);
	background: var(--white);
}

.field textarea {
	resize: vertical;
}

.hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.msg-panel__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 6px;
}

.msg-panel__status {
	font-size: 12px;
	color: var(--blue);
}

.msg-panel__status.is-error {
	color: #e4573d;
}

/* ==========================================================================
   19. 搜索 / 404 / 站点地图
   ========================================================================== */
.search-form {
	display: flex;
	gap: 10px;
	max-width: 520px;
	margin: 0 auto 34px;
}

.search-form input[type="search"] {
	flex: 1;
	padding: 10px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.search-count {
	text-align: center;
	color: var(--text-light);
	font-size: 13px;
}

.notfound {
	padding: 90px 15px;
	text-align: center;
}

.notfound__code {
	margin: 0;
	font-size: 96px;
	font-weight: 700;
	line-height: 1;
	color: var(--blue);
	opacity: 0.18;
}

.notfound__title {
	font-size: 26px;
	margin-top: -20px;
}

.notfound__desc {
	color: var(--text-light);
}

.notfound__actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	margin-top: 26px;
}

.sitemap-group {
	margin-bottom: 34px;
}

.sitemap-group__title {
	font-size: 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--blue);
}

.sitemap-group__terms {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px 20px;
	padding-top: 16px;
}

.sitemap-group__terms a {
	color: var(--text-mid);
	font-size: 14px;
}

.sitemap-group__terms a:hover {
	color: var(--blue);
}

.sitemap-group__count {
	color: var(--text-light);
	font-size: 12px;
}

.post-list {
	display: grid;
	gap: 24px;
}

.post-card {
	padding: 22px;
	border: 1px solid var(--line);
}

.post-card__meta {
	color: var(--text-light);
	font-size: 13px;
}

/* ==========================================================================
   20. 响应式
   ========================================================================== */
@media (max-width: 1199px) {
	.hero--large { height: 520px; }
	.footer-main__inner { grid-template-columns: 1fr 1fr; }

	/* 1200 版心放不下时，侧栏收窄、内容列自适应，卡片墙改 2 列 */
	.layout-side { grid-template-columns: 230px 1fr; gap: 24px; }
	.side,
	.side__head,
	.side-menu,
	.side__contact { width: 100%; }
	.term-grid { grid-template-columns: repeat(2, 1fr); }
	.tcard__media { width: 100%; height: auto; aspect-ratio: 294 / 223; }
}

@media (max-width: 991px) {
	.nav-toggle { display: block; }

	.site-nav {
		position: fixed;
		top: var(--header-h);
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 990;
		background: var(--blue);
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform 0.3s;
	}

	.site-nav.is-open { transform: translateX(0); }

	.nav-main {
		flex-direction: column;
		align-items: stretch;
	}

	.nav-main > li > a {
		line-height: 1.4;
		padding: 16px 22px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	.nav-main .sub-menu {
		position: static;
		display: block;
		box-shadow: none;
		background: rgba(0, 0, 0, 0.12);
	}

	.layout-side { grid-template-columns: 1fr; }
	.side { order: 2; }
	.side-content { order: 1; }

	.media-row,
	.product-detail,
	.news-feature,
	.contact-block,
	.case-tabs {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.media-row--text-right .media-row__text,
	.media-row--text-right .media-row__media {
		order: 0;
	}

	.cards--3,
	.cards--4,
	.grid--3,
	.grid--4,
	.brands,
	.sitemap-group__terms {
		grid-template-columns: repeat(2, 1fr);
	}

	.partners { grid-template-columns: repeat(3, 1fr); }
	.footer-main__inner { grid-template-columns: 1fr; gap: 26px; }
	.footer-brand,
	.footer-qr { justify-content: center; }
	.footer-qr { display: flex; }
}

@media (max-width: 767px) {
	.section { padding: 40px 0; }

	.hero--large { height: 400px; }
	.hero--medium { height: 220px; }
	.hero__title { font-size: 26px; letter-spacing: 1px; }
	.hero__eyebrow { font-size: 12px; letter-spacing: 2px; }
	.hero__sub { font-size: 14px; }
	.hero__arrow { display: none; }

	.sec-head__title { font-size: 24px; }
	.sec-head--split { flex-direction: column; align-items: flex-start; gap: 10px; }

	.cards--2,
	.cards--3,
	.cards--4,
	.grid--3,
	.grid--4,
	.brands,
	.case-strip,
	.sitemap-group__terms {
		grid-template-columns: 1fr;
	}

	.partners { grid-template-columns: repeat(2, 1fr); }

	/* 分类卡片墙在窄屏改成单列，封面图跟着撑满 */
	.term-grid { grid-template-columns: 1fr; gap: 20px; }
	.tcard__media { width: 100%; height: auto; aspect-ratio: 294 / 223; }

	.product-detail__main { min-height: 240px; }
	.product-detail__title { font-size: 21px; }
	.detail-title,
	.article__title { font-size: 20px; }

	/*
	 * 移动端：竖标签去掉，客服条直接铺在底部（与原站的移动端形态一致）。
	 */
	.float-tab { display: none; }
	.floatwrap {
		right: 0;
		left: 0;
		bottom: 0;
		transform: none; /* 移动端是整条吸底，不能带桌面端的右移补偿 */
	}
	.float-panel,
	.float-panel.is-open {
		display: flex;
		width: 100%;
	}
	.floatbar { width: 100%; border: 0; border-top: 1px solid #e5e5e5; }
	.floatbar__item { flex: 1; padding: 8px 0; }
	.floatbar__icon { width: 32px; height: 32px; background-size: 32px 32px; }
	/* 移动端是底部横条，悬停弹层没有意义（原站移动端也不弹） */
	.floatbar__pop { display: none !important; }
	.msg-panel { left: 10px; right: 10px; bottom: 10px; width: auto; }

	.footer-copy__inner { flex-direction: column; gap: 4px; text-align: center; }
}

/* 打印：去掉浮层，避免打印出客服按钮 */
@media print {
	.floatbar,
	.msg-panel,
	.nav-toggle { display: none !important; }
}

/* ==========================================================================
   19. 关于我们 / 联系我们（按原站实测逐块对齐）
   ========================================================================== */
/* ---- 案例详情页（原站 case_view 实测）
   面包屑下留 35px（原站 section margin-top:35px、无内边距），
   左侧栏与分类页一致，右侧 930 列内容左右各缩进 30px：
   标题 18px 加粗居中（行高 70、底部 1px #e9e9e9），下面居中「发布日期 / 浏览次数」，
   正文，最后上一篇 / 下一篇两行（行高 30、14px #333）。 */
.single-case .container.section {
	margin-top: 35px;
	/* 只清上下内边距，左右 15px 是 .container 的版心边距，不能一起清掉 */
	padding-top: 0;
	padding-bottom: 0;
}

.single-case .detail-title {
	margin: 0 30px;
	padding: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 70px;
	color: #484848;
	text-align: center;
	border-bottom: 1px solid #e9e9e9;
}

.single-case .detail-meta {
	margin: 10px 30px 0;
	padding: 0;
	font-size: 14px;
	line-height: 25px;
	color: #666666;
	text-align: center;
}

.single-case .detail-meta span { margin: 0 10px; }

.single-case .detail-content {
	margin: 20px 30px 0;
}

.single-case .detail-content img {
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	display: block;
}

/* 原站案例正文里图片段落之间是 7px（实测两张 870×578 的图，间距 7px） */
.single-case .detail-content p {
	margin: 0 0 7px;
}

.single-case .prevnext {
	display: block;
	/* 原站正文结束到上一篇之间是 62px */
	margin: 62px 30px 0;
	padding: 0;
	border: 0;
	font-size: 14px;
	line-height: 30px;
	color: #333333;
}

.single-case .prevnext__item {
	display: block;
	width: 100%;
}

.single-case .prevnext a { color: #333333; }
.single-case .prevnext a:hover { color: var(--blue); }

/* ---- 产品详情页（原站 prod_view 实测）
   浅灰底 section（上下 40/60）：
   ① 左右各 600 白卡：左图库 600×437（当前图 578×437），右信息区 min-height 437、左内边距 25，
      标题 18px 加粗 #484848（上 20 / 右 20 / 下 20、行高 26）；
   ② 简介白框（内边距 20，外层 margin 30/50）；
   ③ 上一篇 / 下一篇两行（行高 30、14px #333）；
   ④ 相关推荐：17px 标题 + 右侧 MORE >>，下面 4 列卡片 285×265（图 285×215、标题行高 50 居中）。 */
.single-product .section--product {
	padding: 40px 0 60px;
	background: #f7f7f7;
}

.single-product .product-top {
	display: grid;
	grid-template-columns: 600px 600px;
}

.single-product .product-gallery {
	position: relative;
	width: 600px;
	height: 437px;
	background: var(--white);
	overflow: hidden;
}

.single-product .product-gallery__track {
	position: relative;
	height: 100%;
}

.single-product .product-gallery__item {
	position: absolute;
	/* 原站当前图 578×437：左右各缩 11px，高度撑满 */
	inset: 0 11px;
	display: none;
	margin: 0;
}

.single-product .product-gallery__item.is-active {
	display: block;
}

.single-product .product-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-product .product-gallery__arrow {
	position: absolute;
	top: 50%;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, 0.25);
	color: var(--white);
	font-size: 18px;
	line-height: 28px;
	text-align: center;
	cursor: pointer;
	z-index: 5;
}

.single-product .product-gallery__arrow--prev { left: 0; }
.single-product .product-gallery__arrow--next { right: 0; }

.single-product .product-info {
	min-height: 437px;
	padding-left: 25px;
	background: var(--white);
}

.single-product .product-info__title {
	margin: 0 0 20px;
	padding: 20px 20px 0 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 26px;
	color: #484848;
	text-align: left;
}

.single-product .product-info__spec {
	height: 360px;
	overflow: auto;
	padding-right: 40px;
}

.single-product .product-desc {
	/* 下外边距会跟上一篇的外边距折叠，导致整体下移 39px；原站这一段的净间距是 11px */
	margin: 30px 0 0;
}

.single-product .product-desc__box {
	/* 原站空简介时这一块是 90px 高（20+50+20） */
	min-height: 90px;
	padding: 20px;
	background: var(--white);
}

.single-product .related {
	margin-top: 0;
}

.single-product .prevnext {
	display: block;
	margin: 11px 0 39px;
	padding: 0;
	border: 0;
	font-size: 14px;
	line-height: 30px;
	color: #333333;
}

.single-product .prevnext__item {
	display: block;
	width: 100%;
}

.single-product .prevnext a { color: #333333; }
.single-product .prevnext a:hover { color: var(--blue); }

.single-product .related__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.single-product .related__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 25px;
	color: #484848;
}

.single-product .related__more {
	font-size: 12px;
	line-height: 25px;
	color: #484848;
}

.single-product .related__more:hover { color: var(--blue); }

.single-product .related__grid {
	display: grid;
	grid-template-columns: repeat(4, 285px);
	gap: 20px;
	margin-top: 0;
}

.single-product .rcard {
	display: block;
	width: 285px;
	background: var(--white);
	text-decoration: none;
}

.single-product .rcard__media {
	display: block;
	width: 285px;
	height: 215px;
	overflow: hidden;
	background: #fbfbfb;
}

.single-product .rcard__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-product .rcard__title {
	display: block;
	height: 50px;
	overflow: hidden;
	font-size: 16px;
	line-height: 50px;
	color: #333333;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.single-product .rcard:hover .rcard__title { color: var(--blue); }

/*
 * 新闻详情页（原站 news_view 实测）：
 *   整段浅灰底 #f7f7f7、上下 31/50；白卡片 1200 宽（内边距 10/40/40、下外边距 20）；
 *   标题 18px 加粗 #484848 居中、行高 70、底部 1px #e9e9e9 分隔线；
 *   元信息居中一行（发布日期 / 浏览次数，14px #666，行高 25）；
 *   正文 14px/25px #666、距标题 20；上下篇两行（行高 30、14px #333）。
 */
.single-news .section--article {
	padding: 31px 0 50px;
	background: #f7f7f7;
}

.single-news .article {
	max-width: none;
	margin: 0 0 20px;
	padding: 10px 40px 40px;
	background: var(--white);
}

.single-news .article__title {
	margin: 0;
	padding: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 70px;
	color: #484848;
	text-align: center;
	border-bottom: 1px solid #e9e9e9;
}

.single-news .article__meta {
	display: block;
	margin: 10px 0 0;
	padding: 0;
	border: 0;
	text-align: center;
	font-size: 14px;
	line-height: 25px;
	color: #666666;
}

.single-news .article__meta span {
	margin: 0 10px;
}

.single-news .article__content {
	/* 原站正文外层 .p1710m429c7b9c6b30e455 margin-top 20 + 正文自身 margin-top 20 */
	margin-top: 40px;
	font-size: 14px;
	line-height: 25px;
	color: #666666;
}

/* 原站正文里的段落没有额外样式，用的是浏览器默认段距；图片也不加外边距 */
.single-news .article__content img {
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.single-news .prevnext {
	display: block;
	margin: 20px 0 0;
	padding: 0;
	border: 0;
	font-size: 14px;
	line-height: 30px;
	color: #333333;
}

.single-news .prevnext__item {
	display: block;
	width: 100%;
}

.single-news .prevnext a {
	color: #333333;
}

.single-news .prevnext a:hover {
	color: var(--blue);
}

/*
 * 这两页原站是三段/一段固定版式，不能复用首页那套通用版块间距，
 * 所以统一用 body.page-about / body.page-contact 作用域覆盖。
 * 实测数据（CDP，1920 视口）见 README 第十四轮。
 */

/* 这两页的上下间距全部按原站单独给，先清掉 .section / .section--heading 的默认内边距 */
.page-about .section--heading {
	padding-top: 0;
	padding-bottom: 0;
}

/* ---- 关于我们 1/3：公司简介（原站 .p1713m50016：上下 60/40）
   左栏浅灰面板 600×445（padding 25/20/36），右栏配图 600×445 */
.page-about .section--text-image {
	padding: 60px 0 40px;
}

.page-about .section--text-image .media-row {
	align-items: stretch;
}

.page-about .section--text-image .media-row__text {
	padding: 25px 36px 0 20px;
	background: #f9f9f9;
	min-height: 445px;
}

.page-about .section--text-image .media-row__media {
	padding: 0;
	max-height: none;
	overflow: visible;
}

.page-about .section--text-image .media-row__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- 关于我们 2/3：团队/管理/服务
   原站整块是白卡片（padding 50/36/40 + 1px 阴影），里面 4 列 282px、
   每列高 370、顶部留 55，奇数列浅灰底（#f7f7f7）偶数列透明 */
.page-about .cards--4 {
	gap: 0;
	padding: 50px 36px 40px;
	background: var(--white);
	box-shadow: #e9e9e9 0 0 6px;
}

.page-about .cards--4 .card {
	min-height: 370px;
	padding: 55px 0 0;
	border: 0;
	background: transparent;
}

.page-about .cards--4 .card:nth-child(odd) {
	background: #f7f7f7;
}

.page-about .cards--4 .card:hover {
	box-shadow: none;
	transform: none;
}

.page-about .cards--4 .card__icon img {
	width: 60px;
	height: 60px;
	margin-bottom: 16px;
}

.page-about .cards--4 .card__title {
	font-size: 18px;
	font-weight: 700;
	color: #333333;
}

.page-about .cards--4 .card__desc {
	margin-top: 25px;
	padding: 0 30px;
	font-size: 14px;
	line-height: 25px;
	color: #666666;
	text-align: center;
}

/* ---- 关于我们 3/3：资质荣誉（原站 .p1713c500260016：上下 70/80）
   标题 26px 加粗黑、居中；英文副标题 18px #737373 */
.page-about .section--cert {
	padding: 70px 0 80px;
}

.page-about .section--cert .sec-head {
	padding: 0 0 18px;
}

.page-about .section--cert .sec-head__line {
	background: none;
}

.page-about .section--cert .sec-head__title {
	font-size: 26px;
	font-weight: 700;
	line-height: normal;
	color: #000000;
}

.page-about .section--cert .sec-head__sub {
	margin: 0;
	font-size: 18px;
	line-height: normal;
	color: #737373;
}

/* ---- 关于我们 3/3 的证书轮播：原站是 coverflow
   一屏露 5 张：中间 460px 宽（带浓阴影），两侧 420px（淡阴影），左右各一个圆形箭头 */
.page-about .cert-carousel {
	/* 原站这个轮播的可视窗口比 1200 版心还宽（1280，左右各溢出 40），
	   且左缘与版心左缘对齐（353），所以当前卡片中心落在 353+640=993 处 */
	width: 1280px;
	max-width: none;
	margin-left: 0;
	padding: 12px 0 0;
	overflow: hidden;
}

.page-about .cert-carousel__track {
	position: relative;
	/* 原站这一行高 442 */
	height: 442px;
	min-height: 0;
}

.page-about .cert-carousel__item,
.page-about .cert-carousel__item.is-active {
	position: absolute;
	top: 12px;
	right: auto;
	bottom: auto;
	left: 50%;
	width: 460px;
	height: 301px;
	margin: 0 0 0 -230px;
	/* 缩放中心按原站「460×370 的卡片」的中心来，这样每层下移 37px 与原站一致 */
	transform-origin: 50% 185px;
	background: var(--white);
	/* 原站 .p1713c372d1e9e6f2e9271：所有卡片都是同一个 #e9e9e9 0 12px 24px 阴影 */
	box-shadow: #e9e9e9 0 12px 24px;
	justify-content: flex-start;
	visibility: visible;
	transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
}

.page-about .cert-carousel__item.is-active {
	box-shadow: #e9e9e9 0 12px 24px;
}

.page-about .cert-carousel__item img {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
	object-fit: contain;
	box-shadow: none;
}

.page-about .cert-carousel__item figcaption {
	margin-top: 0;
	font-size: 16px;
	line-height: 64px;
	color: #1b1b1b;
	text-align: center;
}

.page-about .cert-carousel__arrow {
	width: 50px;
	height: 50px;
	/* 原站两个圆形箭头在可视窗口左右各内缩 10px、垂直居中 */
	transform: none;
	margin-top: -25px;
	border-color: #c8c8c8;
	background: transparent;
	color: #9a9a9a;
	font-size: 24px;
	line-height: 48px;
	z-index: 1001;
}

.page-about .cert-carousel__arrow--prev { left: 10px; }
.page-about .cert-carousel__arrow--next { right: 10px; }

/* ---- 联系我们：原站 .p1715m50002（上下 70）+ 白卡片（padding 10 + 阴影）
   里面是左右两栏，文字在右栏的浅灰块里（padding 71/50/72） */
.page-contact .container.section {
	padding-top: 70px;
	padding-bottom: 70px;
}

.page-contact .entry-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* 原站白卡片 1200×394、灰块 374 高（贴满卡片上下） */
	min-height: 394px;
	align-content: stretch;
	padding: 10px;
	background: var(--white);
	box-shadow: #e9e9e9 1px 1px 6px;
}

.page-contact .entry-content > * {
	grid-column: 2;
	margin: 0;
	padding-left: 50px;
	background: #f6f6f6;
	color: #333333;
}

.page-contact .entry-content > *:first-of-type {
	padding-top: 71px;
}

.page-contact .entry-content > *:last-of-type {
	padding-bottom: 72px;
}

@media (max-width: 991px) {
	.page-about .section--text-image .media-row,
	.page-about .cards--4 {
		grid-template-columns: 1fr;
	}
	.page-about .section--text-image .media-row__text {
		min-height: 0;
	}
	.page-about .cards--4 {
		padding: 24px 18px;
	}
	.page-about .cards--4 .card {
		min-height: 0;
		padding: 24px 0;
	}
	/* 窄屏放不下 1280 的轮播窗口，改成占满一行、卡片居中（两侧自然裁切） */
	.page-about .cert-carousel {
		width: 100%;
		margin-left: 0;
	}
	.page-about .cert-carousel__arrow--prev { left: 0; }
	.page-about .cert-carousel__arrow--next { right: 0; }
	.page-contact .entry-content {
		grid-template-columns: 1fr;
	}
	.page-contact .entry-content > * {
		grid-column: 1;
		padding-left: 20px;
		padding-right: 20px;
	}
}