/* ==========================================================================
   JW 站点主题层 — 设计令牌 / 组件统一 / 产品页布局 / 交互组件
   加载顺序：all.css → theme.css（本文件），只做覆盖与新增，不改动 all.css
   ========================================================================== */

:root {
	--c-ink: #141b26;
	--c-body: #4a5566;
	--c-muted: #8a93a3;
	--c-line: #e8ebf0;
	--c-line-2: #dfe3ea;
	--c-brand: #0a2b52;
	--c-brand-2: #113a68;
	--c-accent: #c53f17;
	--c-accent-h: #a8330f;
	--c-accent-soft: #fdf1ec;
	--c-soft: #f5f7fa;

	--fs-1: 26px;
	--fs-2: 20px;
	--fs-3: 16px;
	--fs-4: 14px;
	--fs-5: 13px;
	--fs-6: 12px;

	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;

	--r-s: 4px;
	--r-m: 8px;
	--r-l: 14px;

	--sh-1: 0 2px 10px rgba(16, 26, 45, .05);
	--sh-2: 0 12px 32px rgba(16, 26, 45, .12);
}

/* ---------- 1. 基础排版 ---------- */

body {
	color: var(--c-body);
	font-size: var(--fs-4);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5 {
	color: var(--c-ink);
	font-weight: 700;
	letter-spacing: 0;
}

a {
	color: var(--c-body);
	transition: color .2s ease;
}

a:hover {
	color: var(--c-accent);
}

img {
	max-width: 100%;
}

/* 视觉隐藏（用于补 H1 与可读性标签） */
.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- 2. 区块与标题 ---------- */

.section {
	padding: var(--sp-8) 0;
}

.section-title {
	margin-bottom: var(--sp-6);
	font-size: var(--fs-1);
	line-height: 1.3;
	color: var(--c-ink);
}

.section-title p {
	margin-top: var(--sp-2);
	font-size: var(--fs-6);
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--c-muted);
}

.section-title::after {
	content: '';
	display: block;
	width: 40px;
	height: 3px;
	margin: var(--sp-4) auto 0;
	background: var(--c-accent);
	border-radius: 2px;
}

/* ---------- 3. 头部导航 ---------- */

/* 页头区域禁止选中：避免点击导航瞬间出现文本选中高亮（蓝块一闪） */
.header,
.header a,
.header .nav,
.header .nav li,
.header .nav li a,
.header .logo,
.header .cnen,
.header .text {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* logo：高度按视口宽度动态缩放，宽度按原始比例自动跟随。
   移动端会在文件末尾再收紧一次（clamp 24~34px）。 */
.header .logo img {
	display: block;
	height: auto;
	width: auto;
	max-height: clamp(48px, 9vw, 72px);
	max-width: none;
	transition: max-height .25s ease;
}

/* 导航项：统一直角矩形，尺寸一致（覆盖 all.css 的 18px 药丸圆角） */
.header .nav li > a {
	display: block;
	position: relative;
	/* 建立层叠上下文：让 z-index:-1 的马赛克层显示在文字下方、背景之上 */
	isolation: isolate;
	line-height: 42px;
	font-size: var(--fs-3);
	color: var(--c-ink);
	border-radius: 0;
	transition: color .18s ease;
}

/* 悬停：深蓝色块以「马赛克」方式从左到右逐格推进，最后填成一个完整矩形
   （实色块 + steps(12) 台阶式过渡；z-index:-1 保证文字始终在上层） */
.header .nav li > a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	background: var(--c-brand);
	transition: width .30s steps(12, end);
	z-index: -1;
	pointer-events: none;
}
.header .nav li a:hover::before,
.header .nav li.open > a::before,
.header .nav li.open > a:hover::before {
	width: 100%;
}
/* 悬停时文字等马赛克填充完成再转白，避免填充过程中出现「白字压白底」看不见 */
.header .nav li a:hover,
.header .nav li.open > a,
.header .nav li.open > a:hover {
	color: #fff;
	background-color: transparent;
	transition: color .15s ease .2s;
}

/* 选中：深蓝整块 + 底部一条橙色横线 */
.header .nav li.active > a,
.header .nav li.active > a:hover {
	background-color: var(--c-brand);
	color: #fff;
}
.header .nav li.active > a::before {
	display: none;
}
.header .nav li.active > a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--c-accent);
	z-index: 2;
	pointer-events: none;
}

/* 下拉菜单：与父项同宽、统一行高、直角，白底深字 */
.header .nav li .dropdown-box {
	width: 100%;
	background: #fff;
	border-radius: 0;
	box-shadow: var(--sh-2);
	overflow: hidden;
}

.header .nav li .dropdown-box a {
	background: #fff;
	color: var(--c-ink);
	font-size: var(--fs-5);
	line-height: 42px;
	padding: 0;
	text-align: center;
	border-bottom: 1px solid var(--c-line);
	border-radius: 0;
	transition: background-color .2s ease, color .2s ease;
}

.header .nav li .dropdown-box a:last-child {
	border-bottom: 0;
}

.header .nav li .dropdown-box a:hover {
	background-color: var(--c-brand);
	color: #fff;
}

/* 「服务热线」块与「中文/English」切换按钮：**完全不做任何覆盖**，
   交回 all.css 原样式。
   all.css 原文：
     .header .text      { font-size:22px; color:#c53f17; margin:-10px 0;
                          background:url(tel.jpg) no-repeat left 50px;
                          height:100px; width:240px; padding-top:40px; line-height:29px }
     .text span         { font-size:16px; padding-left:50px }
     .text span i       { font-family:impact; font-size:28px; display:block;
                          padding-left:50px; ... }
   注意 all.css 里 `.text span` / `.text span i` 是**全局**选择器（不是 .header 限定），
   会命中页头电话块里的 <span>/<i>，所以这里一个字都不能再加，
   之前加的 font-size:19px / font-style:normal / color 等覆盖已全部删除。 */

/* ---------- 4. 栏目 banner ---------- */

.banner-sub {
	position: relative;
	height: 250px;
	background-color: var(--c-brand);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
}

.banner-sub::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 18, 36, .58) 0%, rgba(6, 18, 36, .40) 55%, rgba(6, 18, 36, .58) 100%);
	pointer-events: none;
}

.banner-sub .container {
	position: relative;
	z-index: 1;
	width: 100%;
	text-align: center;
}

.banner-sub__t {
	margin: 0;
	padding: 0;
	font-size: 40px;
	line-height: 1.25;
	font-weight: 700;
	color: #fff;
	letter-spacing: 2px;
	text-shadow: 0 2px 12px rgba(4, 12, 26, .5);
}

.banner-sub__t::after {
	content: '';
	display: block;
	width: 44px;
	height: 3px;
	margin: var(--sp-3) auto 0;
	background: var(--c-accent);
	border-radius: 2px;
}

.banner-sub__s {
	margin-top: var(--sp-2);
	font-size: 15px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
}

/* 面包屑 */
/* 面包屑：去框，改为文字下方等长深蓝线 + 左端橙色点缀 */
.wz {
	position: relative;
	border: 0;
	border-bottom: 2px solid var(--c-brand);
	padding: 0 0 var(--sp-4);
	margin-bottom: var(--sp-5);
	font-size: var(--fs-5);
	color: var(--c-body);
}

.wz::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 64px;
	height: 2px;
	background: var(--c-accent);
}

.wz a {
	color: var(--c-body);
}

.wz a:hover {
	color: var(--c-accent);
}

/* ---------- 5. 侧栏 ---------- */

/* all.css 把 .sidebar 固定 250px，.main 固定 910px，右侧分页栏也是 float。
   这里只做最小收窄：侧栏内容留出 12px 右余量，让长文本（公司名、地址）
   不顶到 250px 边缘，两栏之间形成明确分界。绝不动 float 布局模型。 */
.sidebar {
	box-sizing: border-box;
	padding-right: 12px;
}

.sidebar .lanmu {
	border: 1px solid var(--c-line);
	border-bottom: 2px solid var(--c-accent);
	background: #fff;
	border-radius: var(--r-m) var(--r-m) 0 0;
	overflow: hidden;
	margin-bottom: var(--sp-5);
}

.sidebar .lanmu h4 {
	font-size: var(--fs-2);
	line-height: 64px;
	background: var(--c-brand);
	letter-spacing: 1px;
}

/* 每个分类行：左文字 + 右产品图（图由 _work/tmp/sidepic.py 预裁为透明 PNG）
   行高 46 → 60（+30%），图片高度 50px 完整放入，宽度按比例不拉伸 */
.sidebar .lanmu li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	height: 60px;
	padding: 0 8px 0 18px;
	border-bottom: 1px solid var(--c-line);
	font-size: var(--fs-4);
	color: var(--c-body);
	position: relative;
	transition: background-color .2s ease, color .2s ease, padding-left .2s ease;
}

.sidebar .lanmu li a .tit__t {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 17px;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 图片位固定 66×50（与「全部产品」那张一致），内部 contain：
   宽图高度小一些、窄图宽度小一些，但右边界永远对齐，视觉整齐 */
.sidebar .lanmu li a .tit__pic {
	flex: 0 0 auto;
	width: 66px;
	height: 50px;
	object-fit: contain;
	object-position: center;
	transition: transform .25s ease;
}

.sidebar .lanmu li a:hover .tit__pic {
	transform: translateY(-1px) scale(1.04);
}

.sidebar .lanmu li a:hover {
	color: var(--c-accent);
	background: var(--c-accent-soft);
	padding-left: 22px;
}

.sidebar .lanmu li a.is-current {
	color: var(--c-accent);
	font-weight: 700;
	background: var(--c-accent-soft);
}

.sidebar .lanmu li a.is-current::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--c-accent);
}

/* 联系方式卡片 */
.sidebar .cc {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--r-m);
	padding: var(--sp-4) var(--sp-4) var(--sp-5);
	font-size: var(--fs-5);
	line-height: 1.6;
	box-shadow: var(--sh-1);
}

.sidebar .cc__row {
	margin: 0 0 10px;
	padding-bottom: 10px;
	border-bottom: 1px dashed var(--c-line);
	color: var(--c-ink);
	word-break: break-all;
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 6px;
	align-items: start;
}

.sidebar .cc__row:last-child {
	margin-bottom: 0;
	border-bottom: 0;
	padding-bottom: 0;
}

.sidebar .cc__row span {
	color: var(--c-muted);
	font-size: var(--fs-6);
	line-height: 1.7;
}

.sidebar .cc__row a:hover {
	color: var(--c-accent);
}

/* ---------- 6. 产品 / 资讯列表卡片 ---------- */

.list-1 li a {
	border: 1px solid #eef1f5;
	background: #fff;
	border-radius: var(--r-m);
	padding: var(--sp-3);
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.list-1 li a:hover {
	border-color: var(--c-line-2);
	box-shadow: var(--sh-1);
	transform: translateY(-2px);
}

.list-1 li .img-center {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	overflow: hidden;
}

.list-1 li .img-center img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	max-height: 100%;
}

.list-1 li p {
	margin-top: var(--sp-3);
	font-size: var(--fs-4);
	color: var(--c-ink);
	line-height: 1.5;
}

.list-1 li a:hover p {
	color: var(--c-accent);
}

/* 首页关于我们：文字左、图片右，两栏等高 */
.about {
	display: flex;
	align-items: center;
	gap: var(--sp-7);
}

.about .img-center {
	float: none;
	order: 2;
	flex: 0 0 420px;
	width: 420px;
	border-radius: var(--r-l);
	overflow: hidden;
}

.about .img-center img {
	display: block;
	width: 100%;
	height: auto;
}

.about .text {
	order: 1;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.about .text h3 {
	margin: 0 0 var(--sp-4);
	padding-bottom: var(--sp-3);
	font-size: var(--fs-2);
	color: var(--c-ink);
	border-bottom: 1px solid var(--c-line);
}

.about .text p {
	margin: 0 0 var(--sp-5);
	padding: 0;
	min-height: 0;
	font-size: var(--fs-4);
	line-height: 1.9;
	color: var(--c-body);
}

.about .text .btn {
	margin: 0;
}

/* 首页产品轮播卡片：文字统一截断，避免高度参差 */
.service .swiper-slide h4 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.9em;
	font-size: var(--fs-4);
	line-height: 1.45;
	color: var(--c-ink);
}

.service .swiper-slide p {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--c-muted);
	font-size: var(--fs-6);
	line-height: 1.6;
}

/* ---------- 7. 详情页正文 ---------- */

.content-body {
	font-size: 15px;
	line-height: 1.9;
	color: var(--c-body);
}

.content-body img {
	height: auto;
	max-width: 100%;
	display: block;
	margin: var(--sp-4) auto;
	border-radius: var(--r-s);
}

.content-body p {
	margin: 0 0 var(--sp-3);
}

.content-body h2,
.content-body h3,
.content-body h4 {
	margin: var(--sp-5) 0 var(--sp-3);
}

.content-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-5);
}

.content-body td,
.content-body th {
	border: 1px solid var(--c-line);
	padding: var(--sp-2) var(--sp-3);
}

/* 详情页标题区 */
.content-title {
	padding-bottom: var(--sp-4);
	margin-bottom: var(--sp-5);
	border-bottom: 1px solid var(--c-line);
}

.content-title h1 {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-1);
	line-height: 1.4;
}

.content-title p {
	margin: 0;
	font-size: var(--fs-6);
	color: var(--c-muted);
}

.content-title span {
	margin-right: var(--sp-4);
}

/* 上下篇 */
.content-exp {
	margin-top: var(--sp-5);
	padding-top: var(--sp-4);
	border-top: 1px dashed var(--c-line);
	font-size: var(--fs-5);
	color: var(--c-muted);
}

.content-exp p {
	margin: 6px 0;
}

/* 分页 */
.pages {
	margin-top: var(--sp-6);
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.pagination .page-item {
	min-width: 38px;
	height: 38px;
	line-height: 36px;
	text-align: center;
	border: 1px solid var(--c-line);
	border-radius: var(--r-s);
	padding: 0 var(--sp-3);
	font-size: var(--fs-5);
	background: #fff;
	color: var(--c-body);
}

.pagination .page-item:hover,
.pagination .page-item.active {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: #fff;
}

/* ---------- 8. 按钮规范 ---------- */

.btn,
.jwb-act {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 var(--sp-5);
	font-size: var(--fs-4);
	line-height: 1;
	color: #fff;
	background: var(--c-accent);
	border: 1px solid var(--c-accent);
	border-radius: var(--r-s);
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.btn:hover,
.jwb-act:hover {
	background: var(--c-accent-h);
	border-color: var(--c-accent-h);
	color: #fff;
	box-shadow: 0 6px 16px rgba(197, 63, 23, .22);
}

.btn--ghost,
.jwb-act--ghost {
	background: #fff;
	color: var(--c-accent);
	border-color: var(--c-accent);
}

.jwb-act.is-disabled {
	background: #f2f4f7;
	color: var(--c-muted);
	border-color: var(--c-line-2);
	cursor: not-allowed;
	box-shadow: none;
}

.jwb-act.is-disabled:hover {
	background: #f2f4f7;
	color: var(--c-muted);
	border-color: var(--c-line-2);
	box-shadow: none;
}

.btn--ghost:hover,
.jwb-act--ghost:hover {
	background: var(--c-accent-soft);
	color: var(--c-accent-h);
}

/* ---------- 9. 产品详情：图库与按钮行等高对齐 ---------- */

.eyou-showcase {
	display: flex;
	align-items: stretch;
	gap: var(--sp-6);
	padding-bottom: var(--sp-6);
}

.eyou-showcase .pc-slide {
	float: none;
	width: 380px;
	flex: 0 0 380px;
	display: flex;
	flex-direction: column;
}

.eyou-showcase .view {
	flex: 0 0 auto;
}

.eyou-showcase .view .imgauto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	max-width: 100%;
}

.eyou-showcase .preview {
	margin-top: auto;
	padding-top: var(--sp-3);
}

.eyou-showcase .eyou-showcase-info {
	float: none;
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.eyou-showcase .eyou-showcase-info h1 {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-1);
	line-height: 1.35;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

/* 型号行：取消原 168px 死高度，改由内容撑开 */
.eyou-showcase .eyou-showcase-info > p:first-of-type,
.eyou-showcase .spec-model {
	margin: 0;
	height: auto;
	color: var(--c-muted);
	font-size: var(--fs-5);
	line-height: 1.7;
	word-break: break-word;
}

/* 系列简介要点（数据驱动，模板只负责容器） */
.spec-list {
	margin: var(--sp-4) 0 0;
	padding: var(--sp-4) 0 0;
	border-top: 1px dashed var(--c-line);
	list-style: none;
}

.spec-list li {
	position: relative;
	padding-left: 16px;
	margin-bottom: var(--sp-2);
	font-size: var(--fs-5);
	line-height: 1.65;
	color: var(--c-body);
}

/* ● 由数据自带（与原站一致），这里不再画圆点 */
.spec-list li {
	padding-left: 14px;
}
.spec-list li .sub {
	display: block;
	margin-top: 2px;
	padding-left: 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--c-muted);
}

.spec-list li strong {
	color: var(--c-ink);
	font-weight: 700;
}

/* 按钮行：贴底，与左侧缩略图条底部齐平 */
.jwb-acts {
	margin-top: auto;
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-line);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-3);
}

.jwb-acts .jwb-act {
	width: 100%;
	padding: 0 var(--sp-2);
	font-size: var(--fs-4);
}

/* 微信二维码浮层 */
.jwb-act--wx {
	position: relative;
}

.wx-pop {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 14px);
	z-index: 9999;
	width: 180px;
	padding: 14px 14px 12px;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--r-l);
	box-shadow: var(--sh-2);
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	pointer-events: none;
}

.wx-pop::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -7px;
	margin-left: -7px;
	border: 7px solid transparent;
	border-top-color: #fff;
	border-bottom: 0;
	filter: drop-shadow(0 1px 0 var(--c-line));
}

.wx-pop img {
	display: block;
	width: 100% !important;
	height: auto;
	margin: 0 0 var(--sp-2);
	border-radius: var(--r-s);
}

.wx-pop em {
	display: block;
	font-style: normal;
	font-size: var(--fs-6);
	color: var(--c-body);
	line-height: 1.4;
}

.jwb-act--wx:hover .wx-pop,
.jwb-act--wx:focus .wx-pop,
.jwb-act--wx.is-open .wx-pop {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	pointer-events: auto;
}

.wx-mask {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(10, 18, 32, .55);
	z-index: 9998;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease;
}

.wx-mask.is-open {
	opacity: 1;
	visibility: visible;
}

@media (max-width: 767px) {
	.wx-mask {
		display: block;
	}

	.jwb-act--wx.is-open .wx-pop {
		position: fixed;
		left: 50%;
		top: 50%;
		bottom: auto;
		transform: translate(-50%, -50%);
		width: 220px;
		z-index: 9999;
		opacity: 1;
		visibility: visible;
	}

	.wx-pop::after {
		display: none;
	}
}

/* ---------- 10. 产品简介 Tab ----------
   选中 = 橙色实底白字；未选中 = 白底（描边区分）。
   之前的覆盖版把 background 设成 transparent，橙色底整个消失了。 */

.jianjie {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: var(--sp-5);
}

.jianjie .nav-item {
	float: none !important;
	margin: 0 !important;
	border: 0;
	list-style: none;
}

/* 未选中：白底深字 + 浅描边 */
.jianjie .nav-item .btn {
	display: inline-block;
	line-height: 30px;
	height: auto;
	padding: 0 20px;
	background-color: #fff;
	color: var(--c-body);
	border: 1px solid var(--c-line);
	border-radius: 0;
	box-shadow: none;
	font-size: var(--fs-4);
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* 选中：橙色实底白字 */
.jianjie .nav-item.active .btn,
.jianjie .nav-item.active .btn:hover {
	background-color: var(--c-accent);
	border-color: var(--c-accent);
	color: #fff;
	font-weight: 700;
}

.jianjie .nav-item:not(.active) .btn:hover {
	background-color: var(--c-accent-soft);
	border-color: var(--c-accent);
	color: var(--c-accent-h);
}

/* 首页联系区块（原橙底固定高，改为品牌深蓝自适应卡片） */
.contact {
	background: linear-gradient(135deg, #0a2b52 0%, #14406f 100%);
	height: auto;
	min-height: 0;
	border-radius: var(--r-l);
	padding: var(--sp-6) var(--sp-6) var(--sp-6) 0;
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	overflow: hidden;
}

.contact-text {
	float: none;
	width: 320px;
	flex: 0 0 320px;
	padding: 0 0 0 var(--sp-6);
	color: rgba(255, 255, 255, .82);
}

.contact-text h3 {
	margin: 0 0 var(--sp-4);
	padding-bottom: var(--sp-3);
	font-size: var(--fs-3);
	font-weight: 400;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, .22);
}

.contact-text h3 strong {
	display: block;
	margin-top: 6px;
	font-size: 26px;
	letter-spacing: .5px;
	color: #fff;
}

.contact-text p {
	margin: 0 0 8px;
	font-size: var(--fs-5);
	line-height: 1.7;
}

.contact-map {
	flex: 1 1 auto;
	min-width: 0;
}

.contact-map img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-m);
}

/* ---------- 11. 联系我们：地图 ---------- */
.jwmap {
	position: relative;
	margin: var(--sp-5) 0;
	border: 1px solid var(--c-line);
	border-radius: var(--r-l);
	overflow: hidden;
	background: #eef2f6;
	box-shadow: var(--sh-1);
}

.jwmap__frame {
	display: block;
	width: 100%;
	height: 380px;
	border: 0;
	filter: grayscale(.15) contrast(1.02);
}

/* 离线矢量底图（无地图 Key 时的兜底） */
.jwmap__bg {
	position: relative;
	display: block;
	width: 100%;
	height: 380px;
	background: #0f1e33;
	overflow: hidden;
}

.jwmap__bg svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* 中心箭头标记点 */
.jwmap__pin {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -100%);
	width: 46px;
	height: 46px;
	border: 0;
	padding: 0;
	background: linear-gradient(180deg, #e2552a, var(--c-accent));
	color: #fff;
	border-radius: 50% 50% 50% 4px;
	box-shadow: 0 8px 18px rgba(150, 45, 15, .35);
	cursor: pointer;
	transform-origin: 50% 100%;
	transition: transform .2s ease;
	z-index: 3;
}

.jwmap__pin::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
	margin: -5px 0 0 -5px;
	border: 5px solid transparent;
	border-bottom: 8px solid #fff;
	border-top: 0;
}

.jwmap__pin:hover,
.jwmap__pin.is-open {
	transform: translate(-50%, -100%) scale(1.08);
}

.jwmap__pulse {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border-radius: 50%;
	background: rgba(197, 63, 23, .35);
	animation: jwPulse 2s ease-out infinite;
	pointer-events: none;
	z-index: 2;
}

@keyframes jwPulse {
	0% {
		transform: scale(.6);
		opacity: .9;
	}

	100% {
		transform: scale(3.4);
		opacity: 0;
	}
}

/* 气泡卡片 */
.jwmap__card {
	position: absolute;
	left: 50%;
	top: calc(50% - 58px);
	transform: translate(-50%, -100%) scale(.96);
	width: 300px;
	max-width: calc(100% - 32px);
	background: #fff;
	border-radius: var(--r-m);
	box-shadow: var(--sh-2);
	padding: var(--sp-4);
	opacity: 0;
	visibility: hidden;
	transition: opacity .22s ease, transform .22s ease, visibility .22s;
	z-index: 4;
	text-align: left;
}

.jwmap__card.is-open {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -100%) scale(1);
}

.jwmap__card::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -7px;
	margin-left: -7px;
	border: 7px solid transparent;
	border-top-color: #fff;
	border-bottom: 0;
}

.jwmap__card h4 {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-3);
	color: var(--c-ink);
}

.jwmap__card p {
	margin: 0 0 6px;
	font-size: var(--fs-5);
	color: var(--c-body);
	line-height: 1.6;
}

.jwmap__card p strong {
	color: var(--c-accent);
}

.jwmap__card .jwmap__btns {
	display: flex;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
}

.jwmap__card .jwmap__btns a {
	flex: 1;
	height: 34px;
	line-height: 32px;
	text-align: center;
	font-size: var(--fs-6);
	border: 1px solid var(--c-accent);
	border-radius: var(--r-s);
	color: var(--c-accent);
}

.jwmap__card .jwmap__btns a:hover {
	background: var(--c-accent);
	color: #fff;
}

.jwmap__close {
	position: absolute;
	right: 6px;
	top: 4px;
	width: 26px;
	height: 26px;
	border: 0;
	background: transparent;
	color: var(--c-muted);
	font-size: 18px;
	line-height: 26px;
	cursor: pointer;
	padding: 0;
}

/* 地图信息条 */
.jwmap__bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-5);
	padding: var(--sp-4) var(--sp-5);
	background: var(--c-brand);
	color: rgba(255, 255, 255, .86);
	font-size: var(--fs-5);
}

.jwmap__bar b {
	color: #fff;
	font-weight: 600;
}

/* ---------- 12. 页脚 ---------- */

.footer {
	background: var(--c-brand);
	color: rgba(255, 255, 255, .8);
	padding: var(--sp-6) 0;
	font-size: var(--fs-5);
}

.footer__main {
	display: flex;
	align-items: stretch;
	gap: var(--sp-7);
}

/* 左：二维码（放大）—— 与右侧信息文字垂直居中对齐 */
.footer__ewm {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-top: 6px;
}

.footer__ewm img {
	display: block;
	width: 132px;
	height: 132px;
	padding: 8px;
	background: #fff;
	border-radius: var(--r-m);
}

.footer__ewm span {
	margin-top: 10px;
	font-size: var(--fs-6);
	color: rgba(255, 255, 255, .72);
}

/* 中：联系信息（放大） */
.footer__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.footer__info p {
	margin: 0 0 10px;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .82);
}

.footer__info .footer__tel {
	font-size: 17px;
	color: rgba(255, 255, 255, .88);
}

.footer__info .footer__tel strong {
	font-size: 26px;
	color: #fff;
	letter-spacing: .5px;
}

.footer__info .footer__copy,
.footer__info .footer__icp {
	font-size: 13px;
	color: rgba(255, 255, 255, .55);
	margin-bottom: 4px;
}

.footer__info a {
	color: rgba(255, 255, 255, .78);
}

.footer__info a:hover {
	color: #fff;
}

.footer__tel {
	font-size: var(--fs-4);
}

.footer__tel strong {
	font-size: 22px;
	color: #fff;
	letter-spacing: .5px;
}

.footer__copy {
	margin-top: var(--sp-3) !important;
	color: rgba(255, 255, 255, .5);
	font-size: var(--fs-6);
}

.footer__icp {
	color: rgba(255, 255, 255, .5);
	font-size: var(--fs-6);
}

/* ---------- 13. 影像/描述列表统一 ---------- */

.lazy {
	opacity: 0;
	transition: opacity .35s ease;
}

.lazy.is-loaded {
	opacity: 1;
}

/* ---------- 15. 响应式 ---------- */

/* 容器：all.css 写死了 width:1200px，在 1024px 及以下视口（含平板、
   分屏窗口）会把整页撑出横向滚动条。改为「上限 1200px + 宽度自适应」，
   ≥1200px 的桌面端视觉与原来完全一致。
   box-sizing:border-box 必须显式写 —— all.css 用了 content-box，
   否则 100% + 15px×2 内边距会比视口宽 30px。 */
.container {
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* all.css 给 body 写了 min-width:1230px（老式固定宽度设计），
   只在 ≤767px 的媒体查询里被改成 320px，导致 768~1229px 的平板/
   分屏窗口宽度下整页被撑出横向滚动条。这里统一接管。 */
body {
	min-width: 0;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
}

@media (max-width: 767px) {
	:root {
		--fs-1: 20px;
		--fs-2: 17px;
		--fs-3: 15px;
		--fs-4: 14px;
	}

	.section {
		padding: var(--sp-6) 0;
	}

	.section-title {
		margin-bottom: var(--sp-5);
	}

	.section-title::after {
		margin-top: var(--sp-3);
	}

	/* Banner：高度 132 → 79（-40%），文字块整体收紧 */
	.banner-sub {
		height: 79px;
	}

	.banner-sub__t {
		font-size: 19px;
		line-height: 1.2;
		letter-spacing: 1px;
	}

	/* 标题下的橙色短线：上间距收紧 */
	.banner-sub__t::after {
		margin-top: 5px;
		width: 22px;
		height: 2px;
	}

	/* 英文副标题：与标题间距再压小 */
	.banner-sub__s {
		margin-top: 4px;
		font-size: 10px;
		letter-spacing: 2px;
	}

	/* Banner 与下方内容的间距同步收紧 */
	.section {
		padding: var(--sp-5) 0;
	}

	/* 面包屑（当前位置）：上下留白收紧 */
	.wz {
		margin-bottom: var(--sp-3);
		padding-bottom: var(--sp-2);
		font-size: 13px;
	}

	/* 产品详情：移动端转为单列，按钮行不贴底而是紧随内容 */
	.eyou-showcase {
		display: block;
		padding-bottom: var(--sp-3);
	}

	.eyou-showcase .pc-slide {
		width: 100%;
		flex: none;
	}

	/* 主图与右侧信息块之间的间距收紧 */
	.eyou-showcase .eyou-showcase-info {
		display: block;
		margin-top: var(--sp-3);
	}

	/* 标题与型号行的间距 */
	.eyou-showcase .eyou-showcase-info h1 {
		margin-bottom: 2px;
		line-height: 1.3;
	}

	/* 短介绍列表：上方虚线与内边距收紧 */
	.spec-list {
		margin-top: var(--sp-3);
		padding-top: var(--sp-3);
	}

	/* 短介绍每条要点行距收紧 */
	.spec-list li {
		margin-bottom: 3px;
		line-height: 1.5;
	}

	/* 按钮行 */
	.jwb-acts {
		margin-top: var(--sp-3);
		padding-top: var(--sp-3);
		gap: var(--sp-2);
	}

	.jwb-acts .jwb-act {
		font-size: var(--fs-5);
		padding: 0 4px;
	}

	/* 产品简介 / 使用说明 Tab：与上方内容、下方正文的间距收紧 */
	.jianjie {
		margin-top: var(--sp-3);
	}

	.content-body {
		min-height: 0;
	}

	.jwmap__frame {
		height: 300px;
	}

	.contact {
		display: block;
		padding: var(--sp-5);
	}

	.contact-text {
		width: 100%;
		flex: none;
		padding: 0 0 var(--sp-4);
	}

	.contact-text h3 strong {
		font-size: 22px;
	}

	.about {
		display: block;
	}

	.about .img-center {
		width: 100%;
		flex: none;
		margin-top: var(--sp-4);
	}

	.about .text p {
		display: -webkit-box;
		-webkit-line-clamp: 5;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.jwmap__bg {
		height: 300px;
	}

	.jwmap__bar {
	.gap: var(--sp-3);
		padding: var(--sp-3) var(--sp-4);
		font-size: var(--fs-6);
	}

	/* 页尾的移动端布局统一放到文件末尾的「M5 页尾」区块处理，
	   这里删掉早期这段 display:block 写法，避免与后来的 flex 平铺规则打架。 */
}

@media (max-width: 479px) {
	.jwmap__card {
		width: 260px;
	}
}

/* ---------- 12. 地图与通用导航 ---------- */

/* 真实地图容器 */
.jwmap {
	position: relative;
	margin: var(--sp-4) auto 0;
	max-width: 750px;          /* 与正文配图同宽并居中对齐 */
	width: 100%;
	border: 1px solid var(--c-line);
	border-radius: var(--r-m);
	overflow: hidden;
	background: var(--c-brand);
}

.jwmap__canvas {
	height: 420px;
	width: 100%;
	background: #0b2a4d;
}

.jwmap__canvas.is-ready {
	background: #eef3f7;
}

.jwmap__fallback {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	height: 420px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, .75);
	font-size: var(--fs-6);
	background: linear-gradient(135deg, var(--c-brand), var(--c-brand-2));
}

.jwmap__canvas.is-ready + .jwmap__fallback {
	display: none;
}

.jwleaf-pin {
	position: relative;
	display: block;
}

.jwleaf-pin__dot {
	position: absolute;
	left: 6px;
	top: 4px;
	width: 14px;
	height: 14px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.jwleaf-pin__ring {
	position: absolute;
	left: 4px;
	top: 26px;
	width: 18px;
	height: 6px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .22);
}

.jwleaf-pin--osm .jwleaf-pin__ring {
	background: transparent;
	border: 2px solid #1f7ac4;
	left: 3px;
	top: 4px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
}

.jwleaf-switch {
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 500;
	padding: 6px 12px;
	font-size: var(--fs-6);
	color: var(--c-ink);
	background: rgba(255, 255, 255, .92);
	border: 1px solid var(--c-line-2);
	border-radius: var(--r-s);
	cursor: pointer;
}

.jwleaf-switch:hover {
	color: var(--c-accent);
	border-color: var(--c-accent);
}

.jwleaf-card h4 {
	margin: 0 0 6px;
	font-size: var(--fs-3);
	color: var(--c-ink);
}

.jwleaf-card p {
	margin: 0;
	font-size: var(--fs-6);
	color: var(--c-body);
}

.jwleaf-card__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.jwleaf-card__btns a {
	padding: 6px 12px;
	font-size: var(--fs-6);
	border-radius: var(--r-s);
	background: var(--c-accent);
	color: #fff;
}

.jwleaf-card__btns a + a {
	background: var(--c-brand);
}

.leaflet-container {
	font-family: inherit;
}

/* 地图下方信息条 + 操作按钮 */
.jwmap__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
	padding: 14px 18px;
	font-size: var(--fs-6);
	color: var(--c-body);
	background: var(--c-soft);
	border-top: 1px solid var(--c-line);
}

.jwmap__bar em {
	font-style: normal;
	color: var(--c-muted);
	margin-right: 6px;
}

.jwmap__bar b {
	color: var(--c-ink);
}

.jwmap__acts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0 18px 18px;
	background: var(--c-soft);
}

.jwmap__acts .btn {
	cursor: pointer;
	font-family: inherit;
}

/* 页脚地图组件：无文字，仅定位图 + 按钮 */
.footer__map {
	flex: 0 0 300px;
	display: flex;
	flex-direction: column;
}

.footer__map .footer__map-fig {
	flex: 1 1 auto;
	min-height: 0;
}

.footer__map .footer__map-fig img {
	height: 100%;
	object-fit: cover;
}

.footer__map-fig {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--r-m);
	overflow: hidden;
	cursor: pointer;
	background: #0b2a4d;
	line-height: 0;
}

.footer__map-fig img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .35s ease;
}

.footer__map-fig:hover img {
	transform: scale(1.05);
}

.footer__map-mask {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 46px;
	background: linear-gradient(180deg, rgba(6, 18, 34, 0), rgba(6, 18, 34, .72));
	pointer-events: none;
}

.footer__map-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
	flex: 0 0 auto;
	min-width: 0;
}

.jwnav-btn {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 10px;
	font-size: var(--fs-6);
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: var(--r-s);
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background-color .2s ease, border-color .2s ease;
}

.jwnav-btn:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .12);
}

.jwnav-btn--primary {
	background: var(--c-accent);
	border-color: var(--c-accent);
}

.jwnav-btn--primary:hover {
	background: var(--c-accent-h);
	border-color: var(--c-accent-h);
}

/* 地图 App 选择弹层 */
.jwnav-sheet {
	position: fixed;
	inset: 0;
	z-index: 9999;
}

.jwnav-sheet[hidden] {
	display: none;
}

.jwnav-sheet__mask {
	position: absolute;
	inset: 0;
	background: rgba(8, 16, 28, .55);
	opacity: 0;
	transition: opacity .2s ease;
}

.jwnav-sheet.is-open .jwnav-sheet__mask {
	opacity: 1;
}

.jwnav-sheet__panel {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 100%);
	width: 100%;
	max-width: 460px;
	background: #fff;
	border-radius: var(--r-l) var(--r-l) 0 0;
	transition: transform .24s ease;
}

.jwnav-sheet.is-open .jwnav-sheet__panel {
	transform: translate(-50%, 0);
}

.jwnav-sheet__hd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid var(--c-line);
	font-size: var(--fs-3);
	color: var(--c-ink);
}

.jwnav-sheet__hd b {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jwnav-sheet__hd button {
	border: 0;
	background: none;
	font-size: 22px;
	line-height: 1;
	color: var(--c-muted);
	cursor: pointer;
}

.jwnav-sheet__list {
	margin: 0;
	padding: 6px 0;
	list-style: none;
}

.jwnav-sheet__list a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 20px;
	color: var(--c-ink);
	font-size: var(--fs-2);
}

.jwnav-sheet__list a:active {
	background: var(--c-soft);
}

.jwnav-sheet__list em {
	margin-left: auto;
	font-style: normal;
	font-size: var(--fs-6);
	color: var(--c-muted);
}

/* 图标：纯 CSS 色块，不引用任何地图厂商资源 */
.jwnav-ic {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 5px;
	background: var(--c-line-2);
}

.jwnav-ic--amap { background: #0a8ee8; }
.jwnav-ic--baidu { background: #2b6cf0; }
.jwnav-ic--tencent { background: #14b8a0; }
.jwnav-ic--apple { background: linear-gradient(135deg, #34c759, #0a84ff); }
.jwnav-ic--google { background: linear-gradient(135deg, #ea4335 25%, #fbbc05 50%, #34a853 75%); }
.jwnav-ic--link { background: var(--c-accent); }
.jwnav-ic--pin {
	width: 18px;
	height: 18px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	background: var(--c-accent);
}

@media (min-width: 768px) {
	.jwnav-sheet__panel {
		top: 50%;
		bottom: auto;
		transform: translate(-50%, -46%) scale(.98);
		border-radius: var(--r-m);
		opacity: 0;
	}

	.jwnav-sheet.is-open .jwnav-sheet__panel {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
}

@media (max-width: 767px) {
	.jwmap__canvas,
	.jwmap__fallback {
		height: 300px;
	}

	/* 移动端页尾：二维码与地图同排一行；文字信息整行居中在下方。
	   注意：这里用 flex-wrap:wrap（而非 nowrap）+ 精确的 width 分配，
	   因为 nowrap 下 flex-basis:100% 的 .footer__info 会把同行前两项压成 0 宽。 */
	/* 移动端页尾：二维码 | 地图 两列并排，**整组在容器里居中**。
	   要点：grid 的列宽是固定/上限值，不写成 1fr 撑满 —— 否则两列会顶满
	   360px 容器（15→375），整组贴到左边缘、看起来"靠左"。
	   这里用 fixed 的二维码列 + max-width 的地图列，再用 justify-content:center
	   把整组居中，左右自然留出相等余量。 */
	.footer__main {
		display: grid;
		grid-template-columns: 106px 196px;   /* 二维码 + 地图，总宽 302 */
		grid-template-rows: auto auto;
		align-items: start;
		justify-content: center;               /* 整组水平居中 */
		column-gap: 22px;                      /* 二维码与地图之间的缝隙 */
		row-gap: 14px;
	}

	/* 二维码：占第 1 列第 1 行 */
	.footer__ewm {
		grid-column: 1;
		grid-row: 1;
		width: 106px;
		align-self: start;
		justify-content: flex-start;
		padding: 0;
	}

	.footer__ewm img {
		width: 106px;
		height: 106px;
	}

	.footer__ewm span {
		margin-top: 5px;
		font-size: 11px;
		line-height: 1.3;
	}

	/* 地图：占第 2 列第 1 行，宽度受 grid 列宽约束（不再撑满） */
	.footer__map {
		grid-column: 2;
		grid-row: 1;
		width: 196px;
		max-width: 196px;
		align-self: start;
	}

	.footer__map .footer__map-fig {
		width: 100%;
		height: 110px;
		min-height: 110px;
		margin: 0;
	}

	.footer__map .footer__map-fig img {
		width: 100%;
		height: 110px;
		object-fit: cover;
	}

	/* 按钮在地图图**下方**横排（不再塞进地图块右侧，避免把二维码挤掉） */
	.footer__map .footer__map-btns {
		display: flex;
		flex-wrap: nowrap;
		gap: 6px;
		margin-top: 6px;
	}

	.footer__map .jwnav-btn {
		flex: 1 1 0;
		min-width: 0;
		padding: 5px 4px;
		font-size: 11px;
		line-height: 1.3;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
	}

	/* 文字信息：第 2 行，跨两列整行居中 */
	.footer__info {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100%;
		text-align: center;
		margin-top: 0;
	}

	.footer__contact,
	.footer__addr {
		display: none !important;
	}

	.footer__info p {
		font-size: 12.5px;
		margin-bottom: 3px;
		line-height: 1.4;
		word-break: break-all;
	}

	.footer__info .footer__tel strong {
		font-size: 19px;
	}

	.footer__copy,
	.footer__icp {
		font-size: 11px !important;
		margin-top: 0 !important;
	}
}

/* 字段为空时自动隐藏（PbootCMS 的 if 标签遇到含括号的字段值会解析失败，故改用 :empty） */
.spec-model:empty,
.spec-list:empty,
.jwb-act[href=""]:empty { display: none !important; }
.spec-list:empty { padding: 0; margin: 0; }
.jwb-act[href=""]{ display:none !important; }

/* ==========================================================================
   移动端专项修正（置于文件末尾，确保覆盖 all.css 与上文所有移动端规则）
   ========================================================================== */

/* ---------- M0. mmenu 桌面端中和 ----------
   site.js 现在无条件初始化 mmenu（保证任何视口进入都能点开菜单），
   但 mmenu 会把页面主体包进 .mm-page 并挂上 .mm-slideout 位移，
   在桌面端（≥768px）这层包装纯属多余，必须中和掉。 */
@media (min-width: 768px) {
	.mm-page,
	.mm-page.mm-slideout,
	.mm-slideout {
		display: contents !important;
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		transform: none !important;
		-webkit-transform: none !important;
		position: static !important;
		float: none !important;
	}

	/* 桌面端不显示抽屉面板与遮罩 */
	.mm-menu,
	.mm-pagedim,
	.mm-navbar {
		display: none !important;
	}
}

/* ---------- M1. 页头：logo 随视口动态缩小 ---------- */
@media (max-width: 767px) {
	.header {
		padding: 8px 0;
	}

	.header .container {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	/* 汉堡按钮：order 9（最右），紧贴语言切换之后 */
	.header .menu-btn {
		flex: 0 0 auto;
		order: 9;
		margin-left: auto;
		padding: 10px 2px 10px 12px;
	}

	.header .logo {
		float: none;
		flex: 1 1 auto;
		min-width: 0;
		padding: 0;
	}

	/* 动态缩小：高度随视口宽度线性变化并封顶
	   320px 屏 ≈ 24px、390px 屏 ≈ 30px、≥448px 封顶 34px
	   宽度按 logo 原始比例（220:79）自动跟随 */
	.header .logo img {
		display: block;
		height: auto;
		width: auto;
		max-height: clamp(24px, 7.6vw, 34px);
		max-width: none;
	}

	/* 语言切换：order 8，紧挨着右侧的汉堡按钮（原先挤在 logo 右边）。
	   不加 margin-left:auto —— 由 .logo 的 flex:1 1 auto 撑开空间。 */
	.header .cnen {
		flex: 0 0 auto;
		order: 8;
		float: none;
		font-size: 12px;
		white-space: nowrap;
	}

	/* 汉堡三横线加粗一点，移动端更易点中 */
	.header .menu-btn:before,
	.header .menu-btn:after,
	.header .menu-btn span {
		height: 2px;
	}
}

/* ---------- M2. 产品主图：移动端动态缩放（去掉 all.css 固定 310px） ---------- */
@media (max-width: 767px) {
	.eyou-showcase {
		padding-bottom: var(--sp-4);
	}

	.eyou-showcase .pc-slide {
		width: 100%;
		flex: 1 1 100%;
	}

	/* 主图区：宽度 100% + 高度按视口比例，彻底随屏幕缩放 */
	.eyou-showcase .view .swiper-slide .imgauto {
		height: auto;
		line-height: 1;
		width: 100%;
		padding: 6px 0;          /* 10 → 6，图变小后容器跟着收 */
		background: #fff;
	}

	/* 产品图整体缩到 70%（原 100%）—— 方图受宽度限制，
	   只写 max-height 不生效，必须同时限宽。
	   max-height 同步降到 32vh（约 46vh 的 70%）。 */
	.eyou-showcase .view .imgauto img {
		width: 70%;
		height: auto;
		max-height: 32vh;
		max-width: 70%;
		margin: 0 auto;
		object-fit: contain;
		object-position: center;
	}

	/* 图片变小后，外层容器跟着收紧，不留大片空白 */
	.eyou-showcase .view .swiper-slide.img-center {
		display: flex;
		justify-content: center;
	}

	.eyou-showcase .view .swiper-container {
		overflow: hidden;
	}

	/* ---------- M3. 移动端隐藏产品图上下页（缩略图）模块 ---------- */
	.eyou-showcase .preview {
		display: none !important;
	}
}

/* ---------- M4. 产品短介绍：默认折叠 2 行，点击向下展开 ---------- */
@media (max-width: 767px) {
	/* Tab：手机上收紧内边距，视觉更紧凑 */
	.jianjie {
		gap: 4px;
	}

	.jianjie .nav-item .btn {
		line-height: 28px;
		padding: 0 16px;
		font-size: var(--fs-5);
	}

	.spec-list {
		position: relative;
	}

	/* 折叠态：max-height 由 JS 按「实际单行高 × 2」写入（--spec-line），
	   这样不论字号、行高、要点带不带 .sub 都能精确折成 2 行 */
	.spec-list.is-collapsed {
		max-height: calc(var(--spec-line, 46px) * 2);
		overflow: hidden;
	}

	/* 折叠时底部做渐隐，暗示还有内容 */
	.spec-list.is-collapsed::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 30px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 78%);
		pointer-events: none;
	}

	/* 展开按钮 */
	.spec-toggle {
		display: block;
		width: 100%;
		margin-top: var(--sp-2);
		padding: 0;
		border: 0;
		background: none;
		color: var(--c-brand);
		font-size: var(--fs-5);
		line-height: 1.8;
		text-align: left;
		cursor: pointer;
		user-select: none;
		-webkit-user-select: none;
	}

	.spec-toggle::after {
		content: '';
		display: inline-block;
		width: 7px;
		height: 7px;
		margin-left: 6px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform .2s ease;
	}

	.spec-list.is-expanded + .spec-toggle::after {
		transform: translateY(1px) rotate(-135deg);
	}
}

@media (min-width: 768px) {
	.spec-toggle { display: none; }
}

/* ==========================================================================
   移动端分页：紧凑一行
   · 隐藏「首页 / 尾页」（.hidden-sm 在 CSS 里一直缺定义，导致它们在手机上也没隐藏）
   · 页码框变窄（38px → 28px），间距收紧
   · 强制不换行（flex-wrap:nowrap），超长时横向可滑动
   ========================================================================== */
@media (max-width: 767px) {
	.pagination{
		flex-wrap:nowrap !important;
		gap:4px !important;
		overflow-x:auto;
		-webkit-overflow-scrolling:touch;
		justify-content:center;
		padding-bottom:2px;
	}
	/* 首页 / 尾页在移动端隐藏 */
	.pagination .page-item.hidden-sm{
		display:none !important;
	}
	.pagination .page-item{
		min-width:28px !important;
		width:28px;
		height:28px !important;
		line-height:26px !important;
		padding:0 !important;
		font-size:12.5px !important;
		border-radius:4px;
		flex:0 0 auto;
	}
	/* 「上一页 / 下一页」文字项稍微放宽一点 */
	.pagination .page-item[title="上一页"],
	.pagination .page-item[title="下一页"]{
		width:auto;
		min-width:44px !important;
		padding:0 8px !important;
	}
	.pagebar .pagination{ margin:0; }
}

/* ==========================================================================
   窄屏（≤360px）收口：分页与页脚不再横向溢出
   现象：安卓 320/360 宽下 document.scrollWidth 比视口多 2px，
        元凶是 .footer__tel strong（26px 号码）和分页方块（28px × 多个 + gap）。
   处理：号码降字号、分页方块缩到 24px 且间距 2px，
        同时把 justify-content 改成 flex-start —— center 配合 overflow-x:auto
        会让超出的部分滚不到左边（经典 flex 坑）。
   ========================================================================== */
@media (max-width: 360px) {
	.pagination {
		gap: 2px !important;
		justify-content: flex-start !important;
	}

	.pagination .page-item {
		min-width: 24px !important;
		width: 24px;
		height: 24px !important;
		line-height: 22px !important;
		font-size: 11.5px !important;
		border-radius: 3px;
	}

	.pagination .page-item[title="上一页"],
	.pagination .page-item[title="下一页"] {
		min-width: 38px !important;
		padding: 0 6px !important;
	}

	.footer__info {
		width: 100%;
		max-width: 100%;
	}

	.footer__info p {
		font-size: 13.5px;
		word-break: break-word;
	}

	.footer__info .footer__tel strong {
		font-size: 20px;
		letter-spacing: 0;
	}

	.footer__map,
	.footer__map img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	.footer__ewm img {
		width: 84px;
		height: 84px;
	}
}

/* ≤360px：footer 网格原本是 106+196+gap22=324px（比 320 视口还宽 4px）。
   这里整体缩到 92+172+16=280px，保留居中，任何窄屏都留得出余量。 */
@media (max-width: 360px) {
	.footer__main {
		grid-template-columns: 92px 172px !important;
		column-gap: 16px !important;
	}
	.footer__ewm {
		width: 92px !important;
	}
	.footer__ewm img {
		width: 92px !important;
		height: 92px !important;
	}
	.footer__map {
		width: 172px !important;
	}
	.footer__map img {
		width: 172px !important;
		height: auto !important;
	}
}

/* ==========================================================================
   分页条（移动端）统一收口
   问题根因：数字页是 .page-num（height 24 + padding 2/8），
   上一页/下一页是 .page-item（height 28 + padding 0/8），两套盒模型不同，
   所以高低不齐；父级又是 nowrap + overflow-x:auto，页数多就横向滚动。
   处理：
     1) 所有子项统一 inline-flex 居中、height 30px（含 1px 边框）、line-height 1
     2) gap 由 4px 收到 2px（现间隙的 50%）
     3) flex-wrap: wrap 取代 nowrap —— 任何页数都换行，永不允许左右滚动
   ========================================================================== */
@media (max-width: 767px) {
	.pagination {
		flex-wrap: wrap !important;
		gap: 2px !important;
		overflow: visible !important;
		overflow-x: visible !important;
		justify-content: center !important;
		padding-bottom: 0 !important;
	}

	.pagination > .page-item,
	.pagination > .page-num,
	.pagination > a {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		height: 30px !important;
		min-height: 30px !important;
		line-height: 1 !important;
		padding: 0 8px !important;
		box-sizing: border-box !important;
		margin: 0 !important;
		float: none !important;
		font-size: 12.5px !important;
		border-radius: 4px;
	}

	/* 数字页：正方形，宽度与高度一致 */
	.pagination > .page-num {
		min-width: 30px !important;
		width: 30px !important;
		padding: 0 2px !important;
	}

	/* 上一页 / 下一页：高度与数字页完全一致，只放宽宽度 */
	.pagination > .page-item[title="上一页"],
	.pagination > .page-item[title="下一页"] {
		min-width: 58px !important;
		padding: 0 8px !important;
	}
}

/* ==========================================================================
   产品大图：PhotoSwipe 触发器样式
   ========================================================================== */
.pswp-gallery .pswp-item {
	position: relative;
	display: block;
	line-height: 0;
	cursor: zoom-in;
}

.pswp-gallery .pswp-item img {
	transition: transform .35s ease;
}

.pswp-gallery .pswp-item:hover img {
	transform: scale(1.03);
}

.pswp-hint {
	position: absolute;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	padding: 4px 10px;
	font-size: 12px;
	line-height: 1.4;
	color: #fff;
	background: rgba(16, 24, 40, .62);
	border-radius: 999px;
	opacity: 0;
	transition: opacity .2s;
	pointer-events: none;
	white-space: nowrap;
}

.pswp-gallery .pswp-item:hover .pswp-hint {
	opacity: 1;
}

@media (max-width: 767px) {
	.pswp-hint { display: none; }
}

/* ==========================================================================
   产品卡片：3D 倾斜 + 跟随光泽（原生，见 template/cn/js/visual.js）
   只在鼠标设备启用（JS 侧判断 hover:none 直接不绑定），移动端零影响。
   倾角 6.5°，图片层 translateZ 浮起 16px，高光走 soft-light 不抢文字。
   ========================================================================== */
.list-1 li a.jwb-tilt {
	position: relative;
	display: block;
	transform-style: preserve-3d;
	transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px);
	box-shadow: 0 18px 44px -20px rgba(16, 32, 56, .30), 0 3px 8px rgba(16, 32, 56, .05);
	border-color: var(--c-line-2);
	transition: border-color .25s ease, box-shadow .3s ease, transform .18s ease-out;
	will-change: transform;
}

.list-1 li a.jwb-tilt::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
			rgba(255, 255, 255, .92),
			rgba(255, 255, 255, .30) 42%,
			rgba(255, 255, 255, 0) 70%);
	opacity: var(--on, 0);
	transition: opacity .28s ease;
	mix-blend-mode: soft-light;
}

.list-1 li a.jwb-tilt .img-center {
	transform: translateZ(16px);
	transition: transform .3s ease;
}

.list-1 li a.jwb-tilt p {
	transform: translateZ(6px);
}

@media (prefers-reduced-motion: reduce) {
	.list-1 li a.jwb-tilt {
		transform: none;
	}
	.list-1 li a.jwb-tilt::after {
		display: none;
	}
}

/* ==========================================================================
   移动端抽屉菜单（mmenu）：与电脑端侧栏一致
   - 行高 40 → 60（+50%，因为移动端要放图）
   - 右侧加栏目缩略图（根菜单 nav/{scode}.png，子菜单 side/{scode}.png）
   - mmenu 的子菜单箭头是绝对定位的独立 <a class="mm-btn_next">，
     所以内容链接要留 46px 右侧安全区，箭头垂直居中
   ========================================================================== */
/* mmenu 会给「有子菜单」的行加 li 的 padding-right（给箭头让位），
   这会让绝对定位的图片参照系偏移 50px，两种行对不齐。统一清零。 */
.mm-menu .mm-listitem {
	position: relative !important;
	padding-right: 0 !important;
}

.mm-menu .mm-listitem > a {
	display: flex !important;
	align-items: center !important;
	gap: 8px;
	box-sizing: border-box !important;
	min-height: 60px !important;
	height: 60px !important;
	padding: 5px 10px 5px 18px !important;
	line-height: 1.3 !important;
}

/* 内容链接：给右侧「图片 + 箭头」留出固定位置，文字不压图。
   图片改成绝对定位，右边界钉在 46px 处 —— mmenu 对有子菜单的行会额外
   塞 padding，用 flex 排会一行动一行，绝对定位才能在两种行之间对齐。 */
.mm-menu .mm-listitem > a:not(.mm-btn_next) {
	position: relative !important;
	margin-right: 0 !important;   /* mmenu 对带箭头的行加 50px 外边距，会让图偏移 */
	padding-right: 118px !important;
}

.mm-menu .mm-t {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 16px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mm-menu .mm-pic {
	position: absolute;
	right: 46px;
	top: 50%;
	transform: translateY(-50%);
	width: 66px;
	height: 50px;
	object-fit: cover;
	border-radius: 4px;
	background: #f5f7fa;
	border: 1px solid rgba(16, 32, 56, .07);   /* 白底缩略图（如电子样本）也能看出边界 */
	pointer-events: none;
}

/* 箭头：跟随 60px 行高垂直居中 */
.mm-menu .mm-listitem > a.mm-btn_next {
	top: 50% !important;
	height: 44px !important;
	margin-top: -22px !important;
	transform: none !important;
}

/* 有缩略图的行，箭头往里收一点，避免压到图 */
.mm-menu .mm-listitem > a.mm-btn_next::after {
	right: 12px;
}

/* 联系卡片：二维码区（中文微信 / 英文 WhatsApp）
   行距收紧一点，保证加二维码后卡片底部不越过列表页分页条 */
.sidebar .cc__row {
	margin: 0 0 8px;
	padding-bottom: 8px;
}

.sidebar .cc {
	display: flex;
	flex-direction: column;
}

.sidebar .cc__qr {
	margin-top: auto;   /* 卡片被拉高时，二维码区贴底，上方留白 */
	padding-top: 12px;
	border-top: 1px dashed var(--c-line);
	text-align: center;
}

.sidebar .cc__qr a {
	display: inline-block;
}

.sidebar .cc__qr img {
	display: block;
	width: 92px;
	height: 92px;
	margin: 0 auto 7px;
	border-radius: 4px;
	object-fit: contain;
	background: #fff;
}

.sidebar .cc__qr em {
	display: block;
	font-style: normal;
	font-size: 12px;
	color: var(--c-muted);
	line-height: 1.4;
}

/* ============================================================
   H70 · PC 端页头紧凑化（高度 ≈ 原 70%）
   2026-10-30
   - 只作用于 ≥768px（移动端 max-width:767px 那套保持原样）
   - 全部选择器都带 .header 前缀：all.css 里 .text span / .text span i
     是全局选择器，绝不能裸写覆盖（见上方「完全不做任何覆盖」注释）
   - 不改 float / order / position，中英切换按钮布局不受影响
   ============================================================ */
@media (min-width: 768px) {
	/* logo 容器上下留白：20px → 14px（=70%） */
	.header .logo {
		padding: 14px 0;
	}

	/* logo 图形：72px → 50px（72×0.7≈50.4，取整 50） */
	.header .logo img {
		max-height: 50px;
	}

	/* 服务热线块：高/宽/字号/图标位置全部按 70% 等比缩 */
	.header .text {
		height: 70px;
		width: 168px;
		padding-top: 28px;
		margin: -7px 0;
		font-size: 15px;
		line-height: 20px;
		background-position: left 35px;
		background-size: 26px 26px;
	}

	/* 电话图标：37px → 26px，文字左内边距 50px → 35px */
	.header .text span {
		font-size: 11px;
		padding-left: 35px;
	}

	.header .text span i {
		font-size: 20px;
		padding-left: 35px;
	}

	/* 中英切换：布局属性一律不动，只收字号/行高与内边距 */
	.header .cnen {
		line-height: 21px;
		font-size: 13px;
	}

	.header .cnen .active {
		padding: 4px;
		border-radius: 3px;
	}
}

/* ============================================================
   B60 · 栏目 Banner 高度 60% + 中间文字 80%（PC 端）
   2026-10-30
   - 首页轮播 .banner：保持 825px（2026-10-30 按用户要求不缩，缩了展示不全）
   - 栏目 banner .banner-sub：250px → 150px（60%）
   - 标题 40 → 32px、副标题 15 → 12px（80%），间距同步收紧
   - 只作用于 ≥768px；移动端（79px / 19px 那套）保持原样
   ============================================================ */
@media (min-width: 768px) {
	/* 栏目 banner：250 × 0.6 = 150 */
	.banner-sub {
		height: 150px;
	}

	/* 主标题：40 × 0.8 = 32，行高/字距同步 80% */
	.banner-sub__t {
		font-size: 32px;
		line-height: 1.2;
		letter-spacing: 1.6px;
	}

	/* 标题下橙色短线：宽度 44 → 35，上间距 12 → 10 */
	.banner-sub__t::after {
		width: 35px;
		height: 2px;
		margin-top: 10px;
	}

	/* 英文副标题：15 × 0.8 = 12，上间距 8 → 6，字距 4 → 3.2 */
	.banner-sub__s {
		margin-top: 6px;
		font-size: 12px;
		letter-spacing: 3.2px;
	}
}

/* ============================================================
   M3 · 手机抽屉菜单修复（2026-10-30）
   - 缩略图 object-fit cover → contain：原 cover 会把长图上下裁掉
   - 子菜单（产品中心）就地展开/折叠，不滑动跳页
   ============================================================ */
@media (max-width: 767px) {
	.mm-menu .mm-pic {
		object-fit: contain;
		background: #fff;
	}

	/* 子菜单行：比主菜单略矮、左缩进，视觉上从属于「产品中心」 */
	.mm-menu .mm-listitem > ul.mm-sub > .mm-listitem > a {
		min-height: 48px !important;
		height: 48px !important;
		padding-left: 32px !important;
	}

	.mm-menu .mm-listitem > ul.mm-sub > .mm-listitem > a .mm-t {
		font-size: 15px;
		color: #4a5460;
	}
}

/* ---------- M3b · 展开态箭头钉在第一行（li 变高后 50% 会跑到面板中间）---------- */
@media (max-width: 767px) {
	.mm-menu .mm-listitem_vertical > a.mm-btn_next {
		top: 30px !important;          /* 第一行 60px 的中心 */
		height: 40px !important;
		margin-top: 0 !important;
		transform: translateY(-50%) !important;
		background: transparent !important;
	}

	/* 子菜单行：不要箭头、不要右侧留白 */
	.mm-menu .mm-sub > .mm-listitem > a {
		padding-right: 18px !important;
	}
}


/* ============================================================
   M6 · 手机端首页紧凑化（2026-10-30）
   - 产品展示：隐藏左右翻页箭头（改手势滑动）、一屏 2 列 × 2 行 = 4 个
   - 产品卡片高度统一（图片固定框 + 标题单行）
   - 关于我们：图片可点跳转、文字完整、默认折叠 7 行
   ============================================================ */
@media (max-width: 767px) {
	/* 1) 区块上下留白收紧 */
	.section {
		padding: 16px 0;
	}

	.section-title {
		margin-bottom: 14px;
	}

	/* 2) 产品展示：不要左右翻页按钮，只保留手势滑动 */
	.service .arr {
		display: none !important;
	}

	/* 3) 卡片：图片固定高度 + 标题单行 → 2×2 四张卡片高度一致 */
	.service .swiper-slide .img-center {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 120px;
		overflow: hidden;
	}

	.service .swiper-slide .img-center img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.service .swiper-slide h4 {
		margin: 8px 0 3px;
		min-height: 0;
		font-size: 13px;
		line-height: 1.45;
		-webkit-line-clamp: 1;
	}

	.service .swiper-slide p {
		font-size: 11px;
		line-height: 1.5;
		min-height: 17px;          /* 无型号的卡片也占一行，保证 2×2 底部对齐 */
		-webkit-line-clamp: 1;
	}

	/* 4) 关于我们：图片可点，文字完整（默认折叠 7 行） */
	.about .img-center {
		display: block;
	}

	.about .text p {
		-webkit-line-clamp: 7;
	}

	.about.is-open .text p {
		display: block;
		-webkit-line-clamp: none;
		overflow: visible;
	}

	.about-toggle {
		display: inline-block;
		margin-top: 2px;
		padding: 7px 16px;
		border: 1px solid var(--c-accent);
		border-radius: var(--r-s);
		background: #fff;
		color: var(--c-accent);
		font-size: 13px;
		line-height: 1.2;
		cursor: pointer;
	}

	.about-toggle[hidden] {
		display: none !important;
	}
}

/* ============================================================
   P6 · 电脑端「关于我们」：整体高度 +20%，图片等比放大
   420×274 → 504×329（274×1.2 = 329）
   ============================================================ */
@media (min-width: 768px) {
	.about .img-center {
		flex: 0 0 504px;
		width: 504px;
	}

	.about-toggle {
		display: none !important;
	}
}

/* ============================================================
   M6m · 手机菜单：一级不显示缩略图，产品分类（二级）显示缩略图
   ============================================================ */
@media (max-width: 767px) {
	/* 一级：右侧只留箭头安全区 */
	.mm-menu > .mm-listview > .mm-listitem > a:not(.mm-btn_next) {
		padding-right: 56px !important;
	}

	/* 二级（产品分类）：略矮的行 + 右侧缩略图 */
	.mm-menu .mm-listitem > ul.mm-sub > .mm-listitem > a {
		min-height: 56px !important;
		height: 56px !important;
		padding: 4px 82px 4px 30px !important;
	}

	.mm-menu .mm-sub .mm-pic {
		right: 14px;
		width: 60px;
		height: 40px;
		border-radius: 3px;
	}

	.mm-menu .mm-sub .mm-t {
		font-size: 15px;
		color: #4a5460;
	}
}

/* ============================================================
   D6 · 产品详情主图显示不全（2026-10-30）
   原因：主图 <img> 外面套了一层 <a class="pswp-item">，<a> 没有高度，
        img 的 `height:100%` 百分比高度失效 → 退化成按宽度等比缩放，
        方图（400×400）被撑到 380×380，而容器 .imgauto 只有 310px，
        外层 .swiper-container overflow:hidden 直接把底部裁掉。
        高瘦图（如 ARM10/ARJ310/VT325）因此只看到上半截。
   修法：让 <a> 撑满容器并做 flex 居中，img 改为 max-width/height 双向限制。
   ============================================================ */
.eyou-showcase .view .imgauto > .pswp-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

@media (min-width: 768px) {
	.eyou-showcase .view .imgauto img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}
}

/* ============================================================
   P7 · 电脑端页头搜索框（手机端一律不显示）
   ============================================================ */
.hsearch {
	display: none;
}

@media (min-width: 768px) {
	.hsearch {
		display: block;
		float: right;
		width: 210px;
		height: 32px;
		margin: 26px 18px 0 0;
	}

	.hsearch form {
		display: flex;
		align-items: stretch;
		height: 32px;
		border: 1px solid var(--c-line-2);
		border-radius: 16px;
		background: #fff;
		overflow: hidden;
	}

	.hsearch input {
		flex: 1 1 auto;
		min-width: 0;
		border: 0;
		background: transparent;
		padding: 0 12px;
		font-size: 13px;
		line-height: 30px;
		color: var(--c-body);
		outline: none;
	}

	.hsearch input::placeholder {
		color: #a9b1bf;
	}

	.hsearch button {
		flex: 0 0 54px;
		border: 0;
		background: var(--c-accent);
		color: #fff;
		font-size: 13px;
		line-height: 30px;
		cursor: pointer;
	}

	.hsearch button:hover {
		background: var(--c-accent-h);
	}
}

/* ============================================================
   M7 · 手机端收尾：产品标题居中/隐藏型号小字、关于我们不折叠、
        菜单行高 70%、菜单小图透明底
   ============================================================ */
@media (max-width: 767px) {
	/* 产品卡片：系列名居中，隐藏下方浅色型号小字（电脑端不受影响） */
	.service .swiper-slide h4 {
		text-align: center;
	}

	.service .swiper-slide p {
		display: none !important;
	}

	/* 关于我们：完整展示，不再折叠，也不要「展开全文」 */
	.about .text p {
		display: block;
		-webkit-line-clamp: none;
		overflow: visible;
	}

	.about-toggle {
		display: none !important;
	}

	/* 菜单：行高 60/56 → 42（约 70%） */
	.mm-menu .mm-listitem > a {
		min-height: 42px !important;
		height: 42px !important;
		padding: 2px 10px 2px 16px !important;
	}

	.mm-menu .mm-listitem > a:not(.mm-btn_next) {
		padding-right: 46px !important;
	}

	.mm-menu .mm-listitem > a.mm-btn_next,
	.mm-menu .mm-listitem_vertical > a.mm-btn_next {
		top: 21px !important;
		height: 32px !important;
		margin-top: 0 !important;
		transform: translateY(-50%) !important;
		background: transparent !important;
	}

	.mm-menu .mm-sub > .mm-listitem > a {
		min-height: 42px !important;
		height: 42px !important;
		padding: 2px 74px 2px 26px !important;
	}

	.mm-menu .mm-sub .mm-pic {
		right: 12px;
		width: 52px;
		height: 34px;
	}

	/* 菜单缩略图：透明底、无边框（原来白底+细边框像贴了块白纸） */
	.mm-menu .mm-pic {
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
	}

	.mm-menu .mm-sub .mm-t {
		font-size: 14px;
	}
}

/* ============================================================
   G6 · 详情页主图：单一大轮播（2026-10-30 恢复 10-29 R38 定稿）
   - 多图（pics 循环 + ico 末位）在同一个 swiper 里
   - 鼠标拖动换页，箭头只在悬浮时出现
   - 缩略条整块删除（原来是「上下页的框」）
   ============================================================ */
.eyou-showcase .view .swiper-container {
	position: relative;
}

.eyou-showcase .view .imgauto {
	display: flex;
	align-items: center;
	justify-content: center;
}

.eyou-showcase .view .imgauto img {
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
}

.eyou-showcase .view .swiper-container,
.eyou-showcase .view .swiper-wrapper,
.eyou-showcase .view .swiper-slide {
	touch-action: pan-y;
}

.eyou-showcase .gallery-prev,
.eyou-showcase .gallery-next {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: block;
	width: 30px;
	height: 46px;
	margin-top: -23px;
	background: rgba(255, 255, 255, .92);
	border: 1px solid var(--c-line);
	border-radius: var(--r-s);
	color: var(--c-ink);
	font-size: 22px;
	line-height: 42px;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(16, 26, 45, .14);
	opacity: 0;
	transition: opacity .18s ease, background .18s ease;
}

.eyou-showcase .gallery-prev {
	left: 0;
}

.eyou-showcase .gallery-next {
	right: 0;
}

.eyou-showcase .pc-slide:hover .gallery-prev,
.eyou-showcase .pc-slide:hover .gallery-next {
	opacity: 1;
}

.eyou-showcase .gallery-prev:hover,
.eyou-showcase .gallery-next:hover {
	background: #fff;
}

.eyou-showcase .gallery-prev.swiper-button-disabled,
.eyou-showcase .gallery-next.swiper-button-disabled {
	opacity: 0 !important;
	pointer-events: none;
}

/* 手机端：没有 hover，箭头常显淡一点，主要靠手指滑动 */
@media (max-width: 767px) {
	.eyou-showcase .gallery-prev,
	.eyou-showcase .gallery-next {
		width: 26px;
		height: 40px;
		margin-top: -20px;
		font-size: 18px;
		line-height: 36px;
		opacity: .85;
	}

	.eyou-showcase .gallery-prev.swiper-button-disabled,
	.eyou-showcase .gallery-next.swiper-button-disabled {
		opacity: 0 !important;
	}
}

/* G6b · 去掉缩略条后主图下方留白：主图列垂直居中 */
.eyou-showcase .pc-slide {
	justify-content: center;
}

/* ============================================================
   H7 · 页头右侧：服务热线在上、搜索框在下，两块同宽（2026-10-30）
   - 原来搜索框与热线横向并排，字号差太大很难看
   - 现在包进 .hrt，纵向两行，宽度统一 236px；页头高度 84 不变
   ============================================================ */
.hrt {
	display: none;          /* 手机端不显示（.text / .hsearch 本来也隐藏） */
}

@media (min-width: 768px) {
	.hrt {
		display: block;
		float: right;
		width: 236px;
		margin: 12px 0 0;
	}

	/* 第一行：电话图标 +「服务热线：」+ 号码，压成一行不换行 */
	.hrt .text {
		float: none !important;
		width: 100% !important;
		height: auto !important;
		margin: 0 0 7px !important;
		padding: 0 0 0 28px !important;
		background: url(../images/tel.jpg) no-repeat left center !important;
		background-size: 21px 21px !important;
		font-size: 11px;
		font-weight: 400;
		line-height: 1.2;
	}

	.hrt .text span {
		display: flex;
		align-items: baseline;
		gap: 6px;
		padding: 0 !important;
		font-size: 11px;
		color: #8a93a3;
		white-space: nowrap;
	}

	.hrt .text span i {
		padding: 0 !important;
		font-style: normal;
		font-size: 19px;
		line-height: 1.1;
		font-weight: 700;
		letter-spacing: .2px;
		color: var(--c-accent);
	}

	/* 第二行：搜索框，与上块同宽、高度压到 28 */
	.hrt .hsearch {
		float: none !important;
		width: 100% !important;
		height: 28px !important;
		margin: 0 !important;
	}

	.hrt .hsearch form {
		height: 28px;
		border-radius: 14px;
	}

	.hrt .hsearch input {
		padding: 0 10px;
		font-size: 12px;
		line-height: 26px;
	}

	.hrt .hsearch button {
		flex: 0 0 52px;
		font-size: 12px;
		line-height: 26px;
	}
}

/* ============================================================
   S7 · 首页「产品展示」上方留白再缩一半（2026-10-30）
   只影响搜索条紧跟的这个 section，其它区块间距不变
   ============================================================ */
@media (min-width: 768px) {
	.eyou-sou + .section {
		padding-top: 32px;
	}
}

@media (max-width: 767px) {
	.eyou-sou + .section {
		padding-top: 8px;
	}
}

/* ============================================================
   L7 · 电脑端首页产品卡片：同样隐藏型号小字与翻页箭头
   （手机端已在 M7 里隐藏；箭头去掉后统一用鼠标拖动换页）
   ============================================================ */
.service .swiper-slide p {
	display: none !important;
}

.service .arr {
	display: none !important;
}

/* ---------- G6c · 详情页主图箭头：默认 50% 可见（提示有多图），悬浮加深 ---------- */
.eyou-showcase .gallery-prev,
.eyou-showcase .gallery-next {
	opacity: .5;
}
.eyou-showcase .pc-slide:hover .gallery-prev,
.eyou-showcase .pc-slide:hover .gallery-next {
	opacity: 1;
}
/* 到头一侧保持可见但更淡（不再整块消失，避免左右不对称） */
.eyou-showcase .gallery-prev.swiper-button-disabled,
.eyou-showcase .gallery-next.swiper-button-disabled {
	opacity: .22 !important;
}

/* ---------- H7b · 修正：text 的 width:100% 在 content-box 下会变成 236+28=264，撑出右边界 ---------- */
@media (min-width: 768px) {
	.hrt .text {
		box-sizing: border-box;
	}

	/* 页头高度保持原来 84px，不因热线块收窄而变矮 */
	.header .container {
		min-height: 84px;
	}
}

/* ---------- H7c · 修正 H7b 的误伤：.header .container 同时命中了导航内部的 .container，
   把导航撑到 84px，导致导航与 banner 之间多出一条白带 ---------- */
@media (min-width: 768px) {
	.header .nav .container {
		min-height: 0;
	}
}

/* ---------- H7d · 页头右侧块左移 / 导航条加浅灰 50% 底（2026-10-30） ---------- */
@media (min-width: 768px) {
	/* 服务热线+搜索框整体往左让开，别贴着「中文/English」 */
	.hrt {
		margin: 12px 70px 0 0;
	}
}

/* 导航条：只加一层浅灰半透明底，不影响悬停/选中的蓝块与橙线 */
.header .nav {
	background-color: rgba(214, 219, 227, .5);
}