@charset "utf-8";
/* ==========================================================================
   theme-2026.css  ·  「科技蓝 2026」现代化主题层  (PC)
   --------------------------------------------------------------------------
   加载顺序：pintuer.css → header.css → style.css → theme-2026.css
   本文件是纯覆盖层，不修改任何既有文件。
   回滚方式：从模板 <head> 移除本文件的引用即可，视觉立即还原。
   ========================================================================== */

/* ==========================================================================
   1. 设计令牌 Design Tokens
   ========================================================================== */
:root {
	/* --- 品牌色阶 --- */
	--brand-900: #062C7A;
	--brand-800: #083FA8;
	--brand-700: #0A50C8;
	--brand-600: #0A5CE8;
	--brand-500: #046DFF;
	--brand-400: #3D8BFF;
	--brand-300: #7FB3FF;
	--brand-200: #B8D6FF;
	--brand-100: #E6F0FF;
	--brand-50: #F4F8FF;
	--brand-grad: linear-gradient(135deg, #2B82FF 0%, #046DFF 46%, #0A46B8 100%);
	--brand-grad-h: linear-gradient(135deg, #046DFF 0%, #0A46B8 100%);
	--brand-grad-soft: linear-gradient(135deg, #EAF3FF 0%, #F7FBFF 100%);

	/* --- 中性色阶 --- */
	--ink-950: #060E1C;
	--ink-900: #0B1524;
	--ink-800: #152238;
	--ink-700: #2A3A4F;
	--ink-600: #45566B;
	--ink-500: #5E6E82;
	--ink-400: #8A98AA;
	--ink-300: #B4BECC;
	--ink-200: #D7DEE7;
	--line: #E7EBF1;
	--line-soft: #F0F3F7;
	--bg: #FFFFFF;
	--bg-soft: #F5F7FB;
	--bg-mute: #EEF2F8;

	/* --- 功能色 --- */
	--ok: #12B76A;
	--warn: #F79009;
	--danger: #F04438;

	/* --- 圆角 --- */
	--r-xs: 6px;
	--r-sm: 10px;
	--r-md: 14px;
	--r-lg: 20px;
	--r-xl: 28px;
	--r-full: 999px;

	/* --- 阴影 --- */
	--sh-xs: 0 1px 2px rgba(11, 21, 36, .05);
	--sh-sm: 0 2px 10px rgba(11, 21, 36, .06);
	--sh-md: 0 10px 28px rgba(11, 21, 36, .09);
	--sh-lg: 0 20px 50px rgba(11, 21, 36, .14);
	--sh-brand: 0 12px 30px rgba(4, 109, 255, .28);

	/* --- 间距刻度 --- */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;
	--sp-9: 80px;
	--sp-10: 104px;

	/* --- 版心与结构 --- */
	--wrap: 1240px;
	--header-h: 78px;

	/* --- 缓动 --- */
	--ease: cubic-bezier(.22, .61, .36, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ==========================================================================
   2. 基础排版
   ========================================================================== */
body {
	font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
		"Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC",
		"WenQuanYi Micro Hei", Arial, sans-serif;
	color: var(--ink-700);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

a {
	color: var(--ink-600);
	transition: color .22s var(--ease), background-color .22s var(--ease), border-color .22s var(--ease);
}

a:focus,
a:hover {
	color: var(--brand-500);
}

::selection {
	color: #fff;
	background: var(--brand-500);
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--bg-soft);
}

::-webkit-scrollbar-thumb {
	background: var(--ink-300);
	border-radius: var(--r-full);
	border: 2px solid var(--bg-soft);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--ink-400);
}

/* 版心 */
.container {
	max-width: var(--wrap);
	padding: 0 24px;
}

.container-layout {
	max-width: 1320px;
	padding: 0 24px;
}

@media screen and (max-width:1440px) {
	.container-layout {
		max-width: 98%;
	}
}

/* 背景色统一 */
.bg-gray {
	background: var(--bg-soft);
}

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

/* 文本色工具 */
.text-main {
	color: var(--ink-900);
}

.text-sub {
	color: var(--ink-500);
}

.text-gray {
	color: var(--ink-400);
}

/* ==========================================================================
   3. 按钮体系
   ========================================================================== */
.button {
	border-radius: var(--r-sm);
	font-weight: 600;
	font-size: 14px;
	padding: 11px 24px;
	line-height: 20px;
	transition: all .25s var(--ease);
	letter-spacing: .01em;
}

.button.radius-rounded {
	border-radius: var(--r-full);
}

/* 品牌实心按钮 */
.button.bg-blue,
.btn-brand {
	background: var(--brand-grad) !important;
	border: 0 !important;
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(4, 109, 255, .22);
}

.button.bg-blue:hover,
.btn-brand:hover {
	background: var(--brand-grad-h) !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: var(--sh-brand);
}

/* 通用按钮类（新组件用） */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 50px;
	padding: 0 28px;
	border-radius: var(--r-full);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	transition: all .28s var(--ease);
	border: 1px solid transparent;
	cursor: pointer;
}

.btn i {
	font-size: 15px;
	transition: transform .28s var(--ease);
}

.btn:hover i {
	transform: translateX(3px);
}

.btn-brand {
	background: var(--brand-grad);
	color: #fff;
	box-shadow: 0 10px 26px rgba(4, 109, 255, .34);
}

.btn-brand:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(4, 109, 255, .42);
}

.btn-ghost {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .55);
	color: #fff;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.btn-ghost:hover {
	background: #fff;
	border-color: #fff;
	color: var(--ink-900);
	transform: translateY(-2px);
}

.btn-light {
	background: #fff;
	border-color: var(--line);
	color: var(--ink-700);
	box-shadow: var(--sh-xs);
}

.btn-light:hover {
	border-color: var(--brand-300);
	color: var(--brand-600);
	transform: translateY(-2px);
	box-shadow: var(--sh-sm);
}

/* ==========================================================================
   4. 区块标题组件
   ========================================================================== */
.sec-head {
	text-align: center;
	margin-bottom: 56px;
}

.sec-head.text-left {
	text-align: left;
}

.sec-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--brand-500);
	margin-bottom: 14px;
	position: relative;
	padding-left: 0;
}

.sec-head:not(.text-left) .sec-eyebrow::before,
.sec-head:not(.text-left) .sec-eyebrow::after {
	content: '';
	display: inline-block;
	width: 26px;
	height: 1px;
	vertical-align: middle;
	margin: 0 12px 4px;
	background: linear-gradient(90deg, transparent, var(--brand-300));
}

.sec-head:not(.text-left) .sec-eyebrow::after {
	background: linear-gradient(90deg, var(--brand-300), transparent);
}

.sec-head h2,
.sec-head h3,
.sec-title {
	position: relative;
	font-size: 40px;
	line-height: 1.24;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--ink-900);
	margin: 0;
}

.sec-head h2::after,
.sec-head h3::after,
.sec-title::after {
	content: '';
	display: block;
	width: 46px;
	height: 4px;
	border-radius: var(--r-full);
	background: var(--brand-grad);
	margin: 18px auto 0;
}

.sec-head.text-left h2::after,
.sec-head.text-left h3::after {
	margin-left: 0;
}

.sec-desc {
	max-width: 720px;
	margin: 20px auto 0;
	font-size: 15px;
	line-height: 1.9;
	color: var(--ink-500);
}

.sec-head.text-left .sec-desc {
	margin-left: 0;
}

/* 深色底上的区块标题 */
.sec-head.on-dark .sec-eyebrow {
	color: var(--brand-300);
}

.sec-head.on-dark .sec-eyebrow::before,
.sec-head.on-dark .sec-eyebrow::after {
	background: linear-gradient(90deg, transparent, var(--brand-300));
}

.sec-head.on-dark .sec-eyebrow::after {
	background: linear-gradient(90deg, var(--brand-300), transparent);
}

.sec-head h3.text-white::after,
.sec-head h2.text-white::after {
	background: #fff;
}

.sec-head h3.text-white,
.sec-head h2.text-white {
	color: #fff;
}

/* 兼容旧结构 .title-c */
.title-c h3 {
	font-size: 40px;
	line-height: 1.24;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--ink-900);
	margin: 0 auto 0;
}

.title-c h3::before {
	width: 46px;
	height: 4px;
	border-radius: var(--r-full);
	bottom: -22px;
	margin-left: -23px;
	background: var(--brand-grad);
}

.title-c h3.text-white {
	color: #fff;
}

.title-c h3.text-white::before {
	background: #fff;
}

.title-c {
	margin-bottom: 52px;
}

/* 区块上下留白（2026 版）
   --------------------------------------------------------------------------
   旧模板用 .blank-* 占位符控制区块间距。注意：不能把它们统一归零 ——
   像 .layout > .blank-big 这类区块（首页「公司简介」「新闻动态」）完全
   依赖占位符撑开顶部间距，归零后标题会紧贴区块顶边、压到深浅色交界线上。
   这里保留占位符机制并整体略微放大，换取更舒展的呼吸感。 */
.blank-small {
	height: 24px;
	line-height: 24px;
}

.blank-middle {
	height: 40px;
	line-height: 40px;
}

.blank-big {
	height: 64px;
	line-height: 64px;
}

.blank-large {
	height: 92px;
	line-height: 92px;
}

/* ==========================================================================
   5. 头部导航（深色玻璃 · 全站固定）
   --------------------------------------------------------------------------
   说明：原站头部在首页/栏目页是覆盖式（absolute），在详情页是占位式
   （relative，占 90px）。这里统一为 fixed 覆盖式，并让 #pc-header 自身
   在文档流中保留 --header-h 的高度作为占位；首页 hero 与栏目 banner 再用
   负边距顶到最上方，因此三类页面的布局都不会错位。
   ========================================================================== */
#pc-header {
	position: relative;
	height: var(--header-h);
	z-index: 999;
}

#pc-header .navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: rgba(8, 17, 34, .76);
	-webkit-backdrop-filter: saturate(170%) blur(18px);
	backdrop-filter: saturate(170%) blur(18px);
	opacity: 1;
	border-bottom: 1px solid rgba(255, 255, 255, .09);
	box-shadow: none;
	transition: box-shadow .3s var(--ease), background .3s var(--ease);
}

#pc-header .navbar.is-stuck {
	background: rgba(8, 17, 34, .94);
	box-shadow: 0 12px 34px rgba(4, 10, 24, .34);
}

/* 详情页（文章 / 产品 / 图集 / 招聘）顶栏用实心 #0b1524。
   为什么详情页要单独处理：首页与栏目页的顶栏是玻璃态
   （rgba(8,17,34,.76) + 18px 背景模糊），它压在栏目横幅图上时下面有暗色打底，
   玻璃质感才成立；而详情页没有横幅图，同样的玻璃态直接压在白色正文上会发灰发糊。
   所以详情页改成实心深色 —— 与栏目横幅的底色 #0b1524 同色，全站观感统一。

   .page-detail 由 4 个详情页模板的 <body> 提供：
     view_article.htm / view_product.htm / view_images.htm / view_recruit.htm
   （之前这 4 个模板各自在 <head> 里塞了一段内联 <style> 把顶栏压成纯黑 #000，
     已删除；改用 body 类 + 主题层规则，样式集中在一处，不再散落在模板里。）

   ⚠️ 两条选择器都要写：.is-stuck 态的权重比基础态高一级，
   只写基础态的话，滚动后会被 #pc-header .navbar.is-stuck 的 rgba(8,17,34,.94) 抢回去，
   出现「往下滚一下顶栏就变色」的怪现象。
   这里只覆盖 background，原有的 1px 白色分隔线与 is-stuck 的投影都保留。 */
.page-detail #pc-header .navbar,
.page-detail #pc-header .navbar.is-stuck {
	background: #0b1524;
}

/* 顶部品牌渐变细线 */
#pc-header::before {
	content: '';
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--brand-grad);
	z-index: 1000;
}

#pc-header .logo {
	padding: 14px 0;
}

#pc-header .logo img {
	max-height: 48px;
}

/* 主导航 */
#pc-header .nav {
	padding: 0;
}

#pc-header .nav li a {
	color: rgba(255, 255, 255, .80);
	line-height: var(--header-h);
	padding: 0 19px;
	font-size: 15.5px;
	font-weight: 500;
	letter-spacing: .01em;
}

#pc-header .nav li.active a,
#pc-header .nav li a:hover,
#pc-header .nav li:hover a.first-level {
	color: #fff;
}

/* 悬停/激活下划线 */
#pc-header .nav>li>a::after {
	content: '';
	position: absolute;
	left: 19px;
	right: 19px;
	bottom: 21px;
	height: 2px;
	border-radius: var(--r-full);
	background: var(--brand-grad);
	transform: scaleX(0);
	transform-origin: 50% 50%;
	transition: transform .3s var(--ease-out);
}

#pc-header .nav>li:hover>a::after,
#pc-header .nav>li.active>a::after {
	transform: scaleX(1);
}

/* 下拉菜单 */
#pc-header .nav li ul.drop-menu {
	top: var(--header-h);
	background: #fff;
	min-width: 196px;
	padding: 10px;
	border-radius: 0 0 var(--r-md) var(--r-md);
	box-shadow: 0 18px 42px rgba(11, 21, 36, .22);
	border-top: 2px solid var(--brand-500);
	margin: 0;
}

/* 下拉子菜单项 —— ⚠️ 选择器必须带上 li.active 这一层，否则「点进去之后」就白底白字。
   header.css 里有两条老规则会在「父级导航项处于 active」时把子菜单文字刷成白色：
     header.css:5   #pc-header .nav li.active ul li a { color:#FFF }   → 权重 (1,2,4)
     header.css:10  #pc-header .nav li.active a        { color:#fff }   → 权重 (1,2,2)
   它们都比下面这条基础规则的 (1,1,4) 高，所以问题只在「父级 active」时出现 ——
   表现是：在工程案例下属页面（如 /led_hw/）展开下拉，白字压在白色面板上，
   整个面板看起来是一块空白方块；只有鼠标划过的那一项因为 :hover 变蓝才显形。
   旧模板的下拉面板本来是黑底（header.css:12 的 background:#000），白字没毛病；
   2026 改版把面板改成白色后，漏了这两条老规则。
   这条选择器与 header.css:5 权重同为 (1,2,4)，但 theme-2026.css 后加载 → 胜出。
   ⚠️ 顺序要紧：必须排在下面 :hover 规则之前，否则同权重的 :hover 会被这条压掉、
   鼠标划过不再变蓝。 */
#pc-header .nav li ul li a,
#pc-header .nav li.active ul li a {
	background: transparent;
	opacity: 1;
	color: var(--ink-600);
	line-height: 40px;
	padding: 0 14px;
	font-size: 14px;
	font-weight: 400;
	border-radius: var(--r-xs);
	text-align: left;
	transition: all .2s var(--ease);
}

#pc-header .nav li ul li a:hover {
	background: var(--brand-50);
	color: var(--brand-600);
}

#pc-header .nav li:hover>ul.drop-menu {
	animation: navDrop .24s var(--ease-out) both;
}

@keyframes navDrop {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 搜索 / 购物车 / 登录 */
#pc-header .searchBar {
	top: 22px;
	right: 92px;
}

#pc-header .shopBar {
	top: 22px;
	right: 56px;
}

#pc-header a.search-ico,
#pc-header a.shop-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--r-full);
	transition: background .22s var(--ease);
}

#pc-header a.search-ico:hover,
#pc-header a.shop-ico:hover {
	background: rgba(255, 255, 255, .12);
}

#pc-header a.search-ico i {
	font-size: 16px;
	color: rgba(255, 255, 255, .86);
}

#pc-header a.search-ico:hover i {
	color: #fff;
}

#pc-header a.shop-ico i {
	font-size: 16px;
	color: rgba(255, 255, 255, .86);
}

#pc-header a.shop-ico:hover i {
	color: #fff;
}

.log-in {
	top: 22px;
	right: 8px;
}

.log-in a.user-ico {
	background: rgba(255, 255, 255, .12);
	transition: all .22s var(--ease);
}

.log-in a.user-ico:hover {
	background: var(--brand-500);
}

.log-in a.user-ico i {
	color: rgba(255, 255, 255, .86);
	font-size: 14px;
}

.log-in a.user-ico:hover i {
	color: #fff;
}

/* 首页 hero 与栏目 banner 顶到页面最上方（头部为固定覆盖式） */
.hero-section {
	margin-top: calc(var(--header-h) * -1);
}

.channel-banner {
	margin-top: calc(var(--header-h) * -1);
	height: calc(380px + var(--header-h));
}

.channel-banner .banner-info {
	padding-top: var(--header-h);
}

/* ==========================================================================
   6. 首页 Hero
   ========================================================================== */
.hero-section {
	position: relative;
	overflow: hidden;
	min-height: 620px;
	height: 76vh;
	max-height: 840px;
	background: var(--ink-950);
	isolation: isolate;
}

.hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero-video,
.hero-bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 分层遮罩：左侧深、右下品牌蓝渗透 */
.hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(100deg, rgba(4, 10, 24, .94) 0%, rgba(4, 12, 30, .78) 34%, rgba(6, 30, 78, .52) 62%, rgba(4, 109, 255, .30) 100%);
}

/* 科技网格 */
.hero-grid {
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: .5;
	background-image:
		linear-gradient(rgba(127, 179, 255, .10) 1px, transparent 1px),
		linear-gradient(90deg, rgba(127, 179, 255, .10) 1px, transparent 1px);
	background-size: 68px 68px;
	-webkit-mask-image: radial-gradient(ellipse 78% 68% at 22% 46%, #000 0%, transparent 78%);
	mask-image: radial-gradient(ellipse 78% 68% at 22% 46%, #000 0%, transparent 78%);
}

/* 底部渐隐，与下一区块衔接 */
.hero-fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 130px;
	z-index: 2;
	background: linear-gradient(to bottom, transparent, rgba(4, 10, 24, .55));
	pointer-events: none;
}

.hero-inner {
	position: relative;
	z-index: 3;
	height: 100%;
	display: flex;
	align-items: center;
}

.hero-inner>.container {
	width: 100%;
}

.hero-content {
	max-width: 780px;
	animation: heroIn .9s var(--ease-out) both;
}

@keyframes heroIn {
	from {
		opacity: 0;
		transform: translateY(26px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--brand-300);
	margin-bottom: 22px;
}

.hero-eyebrow::before {
	content: '';
	display: block;
	width: 40px;
	height: 2px;
	border-radius: var(--r-full);
	background: var(--brand-400);
}

.hero-title {
	font-size: 62px;
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -.022em;
	color: #fff;
	margin: 0 0 24px;
	text-shadow: 0 6px 34px rgba(0, 0, 0, .35);
}

.hero-sub {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 19px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .82);
	letter-spacing: .06em;
	margin: 0 0 40px;
	max-width: 620px;
}

.hero-sub-en {
	font-family: "Conv_DINCondensedC", var(--ink-400), sans-serif;
	font-size: 15px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--brand-300);
	padding-left: 16px;
	border-left: 1px solid rgba(255, 255, 255, .28);
}

.hero-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

/* ==========================================================================
   7. 产品卡片
   ========================================================================== */
.carousel-pro .media {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sh-xs);
	transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
}

.carousel-pro .media:hover {
	transform: translateY(-8px);
	border-color: var(--brand-200);
	box-shadow: 0 24px 54px rgba(4, 109, 255, .16), 0 6px 18px rgba(11, 21, 36, .06);
}

.carousel-pro .padding-large {
	padding: 0 0 26px;
}

.carousel-pro .media>a,
.carousel-pro .padding-large>a {
	display: block;
	overflow: hidden;
	background: var(--bg-mute);
}

.carousel-pro .media img.img-responsive {
	width: 100%;
	transition: transform .6s var(--ease-out);
}

.carousel-pro .media:hover img.img-responsive {
	transform: scale(1.06);
}

.carousel-pro .media-body {
	padding: 22px 24px 0;
}

.carousel-pro .media-body h2 {
	margin: 0;
}

.carousel-pro .media-body h2 a {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ink-900) !important;
	transition: color .22s var(--ease);
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.carousel-pro .media:hover .media-body h2 a {
	color: var(--brand-500) !important;
}

.carousel-pro .button {
	background: transparent !important;
	box-shadow: none !important;
	color: var(--brand-500) !important;
	border: 0 !important;
	padding: 0 !important;
	font-size: 14px;
	font-weight: 600;
	border-radius: 0;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.carousel-pro .button::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 100%;
	height: 1px;
	background: var(--brand-300);
	transform: scaleX(.4);
	transform-origin: left;
	opacity: 0;
	transition: all .3s var(--ease-out);
}

.carousel-pro .media:hover .button::after {
	transform: scaleX(1);
	opacity: 1;
}

.carousel-pro .media:hover .button i {
	transform: translateX(4px);
}

.carousel-pro .button i {
	transition: transform .3s var(--ease-out);
}

/* 轮播点 */
.owl-carousel .owl-dots .owl-dot span {
	background: var(--ink-200);
	width: 8px;
	height: 8px;
	transition: all .3s var(--ease);
}

.owl-carousel .owl-dots .owl-dot.active span {
	width: 22px;
	background: var(--brand-500);
	border-radius: var(--r-full);
}

/* TAB 胶囊 */
.tab-normal .tab .tab-nav li a {
	background: #fff;
	color: var(--ink-500);
	border: 1px solid var(--line);
	border-radius: var(--r-full);
	padding: 0 22px;
	height: 42px;
	line-height: 40px;
	margin: 0 7px 10px;
	font-size: 14.5px;
	font-weight: 500;
	transition: all .26s var(--ease);
}

.tab-normal .tab .tab-nav li a:hover,
.tab-normal .tab .tab-nav .active a {
	background: var(--brand-grad) !important;
	border-color: transparent;
	color: #fff !important;
	box-shadow: 0 8px 20px rgba(4, 109, 255, .26);
}

/* ==========================================================================
   8. 关于我们
   ========================================================================== */
.home-about {
	position: relative;
	background-attachment: fixed;
}

.home-about::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(6, 14, 28, .88) 0%, rgba(8, 30, 74, .72) 55%, rgba(4, 109, 255, .34) 100%);
}

.home-about>* {
	position: relative;
	z-index: 1;
}

.home-about .line.bg-white {
	border-radius: var(--r-xl);
	overflow: hidden;
	box-shadow: var(--sh-lg);
	background: #fff;
}

.home-about .padding-large {
	padding: 52px 50px;
}

.home-about h2 {
	position: relative;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ink-900);
	margin: 0 0 22px;
	letter-spacing: -.01em;
}

.home-about h2::before {
	content: '';
	display: block;
	position: absolute;
	width: 46px;
	height: 4px;
	border-radius: var(--r-full);
	background: var(--brand-grad);
	bottom: -16px;
	left: 0;
}

.home-about p.text-sub {
	font-size: 15px;
	line-height: 2;
	color: var(--ink-500);
}

.home-about .button {
	margin-top: 34px;
	height: 48px;
	padding: 0 30px;
	line-height: 46px;
}

.home-about .x6:last-child {
	overflow: hidden;
}

.home-about .x6 img.img-responsive {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--ease-out);
}

.home-about:hover .x6 img.img-responsive {
	transform: scale(1.04);
}

/* 宽屏下让左右两栏等高，配图铺满不留白 */
@media screen and (min-width:1001px) {
	.home-about .line.bg-white {
		display: flex;
		align-items: stretch;
	}

	.home-about .line.bg-white>.x6 {
		float: none;
		flex: 1 1 50%;
		min-width: 0;
	}

	.home-about .line.bg-white>.x6:last-child {
		position: relative;
		min-height: 420px;
	}

	.home-about .line.bg-white>.x6:last-child img.img-responsive {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* ==========================================================================
   9. 工程案例 / 解决方案卡片
   ========================================================================== */
.solution {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10px;
}

.solution>div[class*="x"] {
	padding: 10px;
	float: none;
}

.solution .media-img {
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sh-sm);
	transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}

.solution .media-img:hover {
	transform: translateY(-6px);
	box-shadow: var(--sh-lg);
}

.solution .media-img img {
	width: 100%;
	display: block;
	transition: transform .8s var(--ease-out);
}

.solution .media-img:hover img {
	transform: scale(1.08);
}

.solution .media-img .linear-link {
	background: linear-gradient(to bottom, rgba(4, 12, 30, 0) 42%, rgba(4, 12, 30, .55) 68%, rgba(4, 12, 30, .92) 100%);
	opacity: 1;
}

.solution .media-img:hover .linear-link {
	opacity: 0;
}

.solution .media-img .linear-link .subtitle {
	padding: 0 22px 22px;
}

.solution .media-img .linear-link .subtitle h3 {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 6px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}

.solution .media-img .linear-link .subtitle p {
	font-size: 12.5px;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .68);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.solution .media-img .mask {
	background: linear-gradient(140deg, rgba(4, 109, 255, .94) 0%, rgba(10, 70, 184, .96) 100%);
	transform: none;
	display: flex;
	align-items: center;
}

.solution .media-img:hover .mask {
	transform: none;
	opacity: 1;
}

.solution .media-img .mask .subtitle {
	padding: 28px;
}

.solution .media-img .mask .subtitle h2 {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.45;
}

.solution .media-img .mask .subtitle p {
	font-size: 13px;
	line-height: 1.85;
	color: rgba(255, 255, 255, .86);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.solution .media-img .mask .subtitle .more {
	position: static;
	margin-top: 16px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.solution .media-img .mask .subtitle .more::after {
	content: '\f105';
	font-family: FontAwesome;
	font-size: 14px;
}

/* ==========================================================================
   10. 新闻动态
   ========================================================================== */
.home-news-h .media-img {
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sh-md);
}

.home-news-h .media-img>img {
	width: 100%;
	transition: transform .8s var(--ease-out);
}

.home-news-h .media-img:hover>img {
	transform: scale(1.05);
}

.home-news-h .media-img .post-title {
	left: 24px;
	right: 24px;
	width: auto;
	bottom: 24px;
	padding: 24px 26px;
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, .95);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 14px 36px rgba(11, 21, 36, .16);
	transition: all .45s var(--ease-out);
}

.home-news-h .media-img:hover .post-title {
	bottom: 24px;
}

.home-news-h .media-img .post-title h3 a {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--ink-900);
	display: block;
	transition: color .22s var(--ease);
}

.home-news-h .media-img:hover .post-title h3 a {
	color: var(--brand-500);
}

.home-news-h .media-img .post-title .text-gray {
	font-size: 13px;
	letter-spacing: .04em;
}

/* 卡片右下角的圆形箭头按钮（原结构里已存在，此处改为定位到右下角） */
.home-news-h .media-img .post-title {
	padding-right: 88px;
}

.home-news-h .button {
	position: absolute;
	right: 24px;
	bottom: 24px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: var(--r-full) !important;
	background: var(--brand-grad) !important;
	color: #fff !important;
	font-size: 16px;
	padding: 0;
	margin: 0;
	box-shadow: 0 8px 20px rgba(4, 109, 255, .28);
}

.home-news-h .media-img .post-title h3 a {
	padding-right: 0;
}

/* 右侧新闻列表 */
.home-news-c {
	border-radius: var(--r-md);
	border: 1px solid transparent;
	transition: all .3s var(--ease);
	overflow: hidden;
}

.home-news-c:hover {
	border-color: var(--brand-200);
	box-shadow: 0 14px 34px rgba(4, 109, 255, .12);
	transform: translateX(4px);
}

.home-news-c .x3 {
	overflow: hidden;
}

.home-news-c .x3 img {
	width: 100%;
	transition: transform .6s var(--ease-out);
}

.home-news-c:hover .x3 img {
	transform: scale(1.07);
}

.home-news-c .news-time {
	margin: 20px 0 0;
	border-right: 1px solid var(--line);
	padding: 0;
}

.home-news-c .news-time .text-large {
	font-size: 34px;
	line-height: 38px;
	font-weight: 700;
	color: var(--brand-500);
}

.home-news-c .news-time .text-middle {
	font-size: 12px;
	color: var(--ink-400);
	letter-spacing: .06em;
}

.home-news-c .news-title {
	margin-top: 22px;
	margin-left: 16px;
}

.home-news-c .news-title h2 a {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ink-900);
	margin-bottom: 10px;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.home-news-c:hover .news-title h2 a {
	color: var(--brand-500);
}

.home-news-c .news-title p {
	font-size: 13px;
	line-height: 1.8;
	color: var(--ink-400);
}

/* ==========================================================================
   11. 频道 Banner（内页通用）
   ========================================================================== */
.channel-banner {
	height: calc(380px + var(--header-h));
	position: relative;
	overflow: hidden;
	background-color: var(--ink-900);
	margin-top: calc(var(--header-h) * -1);
}

.channel-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(4, 10, 24, .90) 0%, rgba(6, 24, 62, .70) 48%, rgba(4, 109, 255, .38) 100%);
	z-index: 2;
}

.channel-banner .banner-info {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	z-index: 3;
	transform: translateY(-50%);
	margin-top: 0;
}

.channel-banner .banner-info h1,
.channel-banner .banner-info h3 {
	font-size: 44px;
	font-weight: 700;
	letter-spacing: -.015em;
	color: #fff;
	position: relative;
	margin-bottom: 26px;
	text-shadow: 0 6px 30px rgba(0, 0, 0, .3);
}

.channel-banner .banner-info h1::before,
.channel-banner .banner-info h3::before {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -23px;
	bottom: -14px;
	width: 46px;
	height: 4px;
	border-radius: var(--r-full);
	background: var(--brand-400);
}

.channel-banner .banner-info p {
	font-size: 14px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .66);
}

/* ==========================================================================
   12. 内页组件
   ========================================================================== */

/* 面包屑 */
.nav-bread {
	height: 64px;
	line-height: 64px;
}

.nav-bread h2 {
	font-size: 22px;
	font-weight: 700;
	color: var(--ink-900);
}

.nav-bread a {
	color: var(--ink-400);
	font-size: 13.5px;
}

.nav-bread a:hover {
	color: var(--brand-500);
}

/* 左标题（侧栏小标题） */
.title-l h2 {
	color: var(--ink-900);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
	padding-left: 18px;
	margin-bottom: 14px;
}

.title-l h2:before {
	width: 4px;
	height: 18px;
	top: 5px;
	border-radius: var(--r-full);
	background: var(--brand-grad);
}

/* 侧栏卡片 */
.sidebar-r>.bg-white,
.sidebar-l>.bg-white {
	border-radius: var(--r-lg);
	border: 1px solid var(--line);
	box-shadow: var(--sh-xs);
	overflow: hidden;
}

.sidebar-r .padding-big,
.sidebar-l .padding-big {
	padding: 24px;
}

/* 栏目下拉导航（胶囊 Tab） */
.nav-tree {
	height: auto;
	line-height: normal;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	padding: 18px 0;
	font-size: inherit;
}

.nav-tree li {
	display: inline-block;
}

.nav-tree li a {
	color: var(--ink-600);
	padding: 0 22px;
	height: 42px;
	line-height: 40px;
	font-size: 14.5px;
	font-weight: 500;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-full);
	transition: all .26s var(--ease);
}

.nav-tree li a.active,
.nav-tree li a.cur,
.nav-tree li.focusa a {
	background: var(--brand-grad);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 8px 20px rgba(4, 109, 255, .26);
	border-radius: var(--r-full);
}

/* ⚠️ 悬停态必须与「当前项」同款 —— 这里踩过一次坑，务必看注释。
   模板底部有一段内联 JS（在 common.js 之后）会在鼠标移入时给 .nav-tree li
   动态加 .focusa 类（同时展开子级 ul）：
     $('.nav-tree li').hover(function(){ $(this).children('ul').show();
                                         $(this).focus().addClass('focusa') }, ...)
   所以「悬停」在 CSS 里其实表现为 li.focusa，只写 :hover 会漏掉这一层。
   曾经的写法是
     .nav-tree li a:hover { background:#fff; color:var(--brand-600); }
   它与
     .nav-tree li.focusa a { background:var(--brand-grad); color:#fff; }
   权重同为 (0,2,2) 却排在后面 —— 悬停时 background 被覆盖成白色，
   而 color 又被 `.nav-tree li.focusa a:hover`(0,3,2) 拉回白色，
   最终「白底白字」，整个标签的文字看起来消失了。
   现在把悬停态改成与当前项完全一致的品牌渐变胶囊。
   用 `>` 限定到一级标签，避免命中下拉子菜单里的 a（它们有自己的悬停样式）。 */
.nav-tree > li > a:hover {
	background: var(--brand-grad);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 8px 20px rgba(4, 109, 255, .26);
}

.nav-tree li a.active:hover,
.nav-tree li a.cur:hover,
.nav-tree li.focusa a:hover {
	color: #fff;
	border-color: transparent;
}

.nav-tree li ul {
	top: 52px;
	background: #fff;
	padding: 10px;
	border-radius: var(--r-md);
	box-shadow: 0 18px 42px rgba(11, 21, 36, .14);
	border-top: 2px solid var(--brand-500);
	min-width: 100%;
	width: max-content;
}

.nav-tree li ul:after {
	display: none;
}

.nav-tree li ul li.children a {
	font-size: 14px;
	line-height: 38px;
	height: 38px;
	padding: 0 16px;
	border-radius: var(--r-xs);
	color: var(--ink-600);
	border: 0;
	background: transparent;
}

.nav-tree li ul li.children a:hover,
.nav-tree li ul li.children a.active {
	color: var(--brand-600);
	background: var(--brand-50);
}

/* 筛选器 */
.filter-box {
	border-radius: var(--r-lg);
	border: 1px solid var(--line);
	box-shadow: var(--sh-xs);
	overflow: hidden;
}

.filter-box .padding-big {
	padding: 18px 28px;
}

.filter-box dl {
	margin: 12px 0;
	display: flex;
	align-items: flex-start;
	border-bottom: 1px dashed var(--line-soft);
	padding-bottom: 12px;
}

/* 最后一个筛选组不要底部分隔线。
   ⚠️ 必须用 :last-of-type，不能用 :last-child ——
   {eyou:screening} 标签会在最后一个 <dl> 后面再输出一个 <script>
   （筛选跳转用的 ey_xxxx(this) 函数），于是 .padding-big 的元素子节点是
   [dl, script]，最后一个 dl 永远不是 :last-child。
   原来写成 .filter-box dl:last-child 时这条规则**从来没生效过**，
   那条 1px dashed 分隔线就一直留着。
   本站每个产品页都只有「品牌」一个筛选组（已逐页核实：
   /products/、/changguishinamozu/、/changguishiwaimozu/、/cob_led/、
   /smd_led/、/yejing/、/rouxingping/ 均只有 1 个 dl），
   所以这条线下面空无一物，看起来就是一条莫名其妙的横线（用户截图反馈）。
   :last-of-type 既修掉当前的单组场景，又保留将来加第二个筛选组时的组分隔线能力。 */
.filter-box dl:last-of-type {
	border-bottom: 0;
	padding-bottom: 0;
}

.filter-box dl dt {
	width: 86px;
	float: none;
	flex: 0 0 86px;
	line-height: 30px;
	color: var(--ink-500);
	font-weight: 600;
	font-size: 14px;
}

.filter-box dl dd {
	float: none;
	flex: 1;
	min-width: 0;
}

.filter-nav ul {
	display: flex;
	flex-wrap: wrap;
}

.filter-nav ul li a {
	margin: 0 8px 8px 0;
	padding: 5px 14px;
	border-radius: var(--r-full);
	font-size: 13.5px;
	color: var(--ink-600);
	background: var(--bg-soft);
	transition: all .22s var(--ease);
}

.filter-nav ul li a:hover {
	background: var(--brand-100);
	color: var(--brand-600);
}

.filter-nav ul li a.active {
	background: var(--brand-grad);
	color: #fff;
	box-shadow: 0 6px 16px rgba(4, 109, 255, .24);
}

/* 产品列表卡片 */
.product-list .media {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sh-xs);
	transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
}

.product-list .media:hover {
	transform: translateY(-8px);
	border-color: var(--brand-200);
	box-shadow: 0 24px 54px rgba(4, 109, 255, .16), 0 6px 18px rgba(11, 21, 36, .06);
}

.product-list .padding-large {
	padding: 0 0 24px;
}

.product-list .padding-large>a {
	display: block;
	overflow: hidden;
	background: var(--bg-mute);
}

.product-list .media img.img-responsive {
	width: 100%;
	transition: transform .6s var(--ease-out);
}

.product-list .media:hover img.img-responsive {
	transform: scale(1.06);
}

.product-list .media-body {
	padding: 20px 22px 0;
}

.product-list .media-body h2 {
	margin: 0;
}

.product-list .media-body h2 a {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ink-900);
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.product-list .media:hover .media-body h2 a {
	color: var(--brand-500);
}

/* 新闻列表（大卡） */
.list-news {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sh-xs);
	margin-bottom: 20px;
	transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
}

.list-news:hover {
	transform: translateY(-4px);
	border-color: var(--brand-200);
	box-shadow: 0 20px 46px rgba(4, 109, 255, .14);
}

.list-news .time {
	margin-top: 34px;
	margin-right: 0;
	border-right: 1px solid var(--line);
	padding: 0;
}

.list-news .time .text-large {
	font-size: 42px;
	line-height: 46px;
	font-weight: 700;
	color: var(--brand-500);
}

.list-news .news {
	margin: 34px 26px 34px 26px;
}

.list-news .news h3 {
	margin: 0;
}

.list-news .news h3 a {
	font-size: 20px;
	font-weight: 600;
	color: var(--ink-900);
	margin-bottom: 12px;
	line-height: 1.5;
}

.list-news .news p {
	font-size: 14px;
	line-height: 1.85;
	color: var(--ink-400);
}

.list-news .button {
	margin-top: 34px;
	width: 46px;
	height: 46px;
	/* 必须清零内边距：pintuer 的 .button 是 padding: 11px 24px（合计 48px），
	   比这个 46px 的圆还大。box-sizing: border-box 下内容盒会被压成负值，
	   浏览器把外框撑到 48+2=50px、内容盒归零 —— 于是 inline-block 的图标
	   在 0 宽的内容盒里按基线对齐，被整个推到圆的右下方外面去，
	   看起来就像"图标被裁掉了"。
	   参考：首页 .home-news-h .button 一直是正常的，差别正是它有 padding: 0。 */
	padding: 0;
	line-height: 44px;
	font-size: 17px;
	background: var(--brand-50);
	border: 1px solid var(--brand-100);
	border-radius: var(--r-full) !important;
	color: var(--brand-500);
}

.list-news:hover .button {
	background: var(--brand-grad);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 10px 24px rgba(4, 109, 255, .28);
}

.list-news:hover h3 a {
	color: var(--brand-500);
}

/* 下载 / 文档列表 */
.normal-list li {
	border-radius: var(--r-md);
	border: 1px solid var(--line);
	overflow: hidden;
	margin-bottom: 14px;
	transition: all .28s var(--ease);
}

.normal-list li a {
	padding: 22px 30px 22px 46px;
	font-size: 15.5px;
	font-weight: 500;
	color: var(--ink-800);
}

.normal-list li:hover {
	background: var(--brand-grad);
	border-color: transparent;
	box-shadow: 0 12px 30px rgba(4, 109, 255, .26);
	transform: translateX(4px);
}

.normal-list li.dot a:before {
	top: 32px;
	background: var(--brand-300);
}

/* 纯文字列表 */
.list-post-text li.dot a {
	transition: all .24s var(--ease);
}

.list-post-text li.dot a:before {
	background: var(--brand-200);
	width: 5px;
	height: 5px;
	top: 10px;
}

.list-post-text li.dot:hover a {
	color: var(--brand-500);
	transform: translateX(4px);
}

/* 分页 */
.pagination li {
	margin: 0 5px;
}

.pagination li a {
	border-radius: var(--r-sm);
	color: var(--ink-600);
	background: #fff;
	padding: 11px 17px;
	border: 1px solid var(--line);
	font-weight: 500;
	transition: all .24s var(--ease);
}

.pagination li.active a,
.pagination li a:hover {
	background: var(--brand-grad);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 8px 20px rgba(4, 109, 255, .26);
}

/* 上/下一篇 */
.prenext-pro a.button {
	height: 62px;
	line-height: 60px;
	padding: 0 26px;
	border-radius: var(--r-md);
	font-weight: 500;
}

.prenext-pro a.button:hover {
	background: var(--brand-grad);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 12px 28px rgba(4, 109, 255, .24);
}

.prenext-pro a.border {
	border: 1px solid var(--line);
}

/* 详情页右下角「返回列表」按钮（view_article.htm / view_images.htm 里的 .x2 列）。
   所在列在 1440 视口下只有 121px 宽，而 .button 的 11px 24px 内边距吃掉 48px，
   可用文字宽只剩 71px；内容实需「图标 14px + margin 5px + 返回列表 4×14px = 75px」，
   差 4px 就把「表」挤到第二行，按钮从 42px 变成 62px 高的两行胶囊。
   短标签的胶囊按钮不该折行 —— 这里禁止折行，并把 .button-big 偏大的横向内边距
   （pintuer 原值 12px 35px，被 .radius-rounded 改成 1em）收窄到 16px 留出余量。
   注意 .prenext-pro 里的同类按钮不受影响（它们有独立的 padding: 0 26px）。 */
.x2.text-center > .button.button-block {
	white-space: nowrap;
}

.x2.text-center > .button.button-big.button-block {
	padding-left: 16px;
	padding-right: 16px;
}

/* 正文排版 */
.article {
	background: #fff;
	border-radius: var(--r-lg);
	border: 1px solid var(--line);
	box-shadow: var(--sh-xs);
	overflow: hidden;
}

.article .padding-large {
	padding: 44px 52px 56px;
}

.article .post h1 {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ink-900);
	letter-spacing: -.01em;
	text-align: left;
	margin: 0 0 18px;
}

.article .post h2 {
	font-size: 22px;
	font-weight: 700;
	color: var(--ink-900);
	margin: 32px 0 14px;
}

.article .post h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--ink-800);
	margin: 26px 0 12px;
}

.article .post p {
	font-size: 16px;
	line-height: 2;
	color: var(--ink-600);
	margin-bottom: 16px;
}

.article .post img {
	border-radius: var(--r-md);
}

.article .post a {
	color: var(--brand-500);
}

.article .post ul li {
	font-size: 16px;
	line-height: 2;
	color: var(--ink-600);
	padding: 0 0 6px 22px;
}

.article .post ul li:before {
	top: 12px;
	background: var(--brand-400);
	width: 6px;
	height: 6px;
}

.article .post table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--r-md);
	overflow: hidden;
	border: 1px solid var(--line);
}

.article .post table th {
	background: var(--brand-50);
	color: var(--ink-800);
	border: 0;
	border-bottom: 1px solid var(--line);
	padding: 12px 16px;
	font-weight: 600;
}

.article .post table td {
	border: 0;
	border-bottom: 1px solid var(--line-soft);
	padding: 12px 16px;
	color: var(--ink-600);
}

/* 内容页头信息条 */
.article .post .text-right {
	color: var(--ink-400);
}

/* 联系我们 / 单页 */
.inside h2 {
	font-size: 32px;
	font-weight: 700;
	color: var(--ink-900);
	margin-bottom: 22px;
}

.inside .contact .media span {
	background: var(--brand-grad) !important;
	border-radius: var(--r-md) !important;
	width: 46px !important;
	height: 46px !important;
	line-height: 46px !important;
	text-align: center;
	box-shadow: 0 10px 24px rgba(4, 109, 255, .24);
}

.inside .contact .media i {
	font-size: 20px !important;
	color: #fff;
}

.inside .contact .media .media-body a,
.inside .contact .media .media-body p {
	color: var(--ink-700);
}

.inside .wx {
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 22px 30px;
	background: #fff;
	box-shadow: var(--sh-xs);
}

/* 留言板表单 */
.guestbook .input,
.guestbook .textarea {
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	font-size: 15px;
}

.guestbook .input:focus,
.guestbook .textarea:focus {
	border-color: var(--brand-400);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(4, 109, 255, .10);
}

.guestbook h2 {
	font-size: 26px;
	font-weight: 700;
	color: var(--ink-900);
}

/* 联系我们页「在线反馈」区块：右侧楼宇配图铺满整列。
   用户反馈：红色圈出的图片没铺满。
   结构是 .layout > .line.home-contact > 两个 .x6（左=表单，右=图片）。
   pintuer 的 .x6 是 float:left + width:50%，这一行的高度由更高的左列决定 ——
   实测 1440 视口下行高 560px（表单撑出来的），而右列的 <img> 只有
   max-width:100% + height:auto，按原图 1250×740 的比例渲染成 715×423，
   比列高矮 137px。于是右列底部露出一条 137px 的灰条 ——
   颜色来自 style.css:409 的 .home-contact{background:#cacaca}，
   看起来就是"图片没铺满"。（宽度其实早就铺满了，缺的是高度。）
   改法与 line 1033 的 .home-about 完全一致：这一行改成 flex 并 stretch，
   两个 .x6 等高；图片绝对定位铺满右列、object-fit:cover 裁掉溢出部分。
   配图是抽象建筑线条，裁切无信息损失。
   两个细节不能省：
     · float 必须显式写成 none —— flex 项上的 float 会被浏览器忽略，
       但保留在计算样式里会误导后来人以为还在走浮动布局；
     · flex 下 float 失效后如果不给宽度，两列会按内容宽度收缩、布局散掉，
       所以 flex:1 1 50% 要保留。
   图片列给 min-height:420px 是兜底：万一左列表单在某个断点塌成很矮，
   右列也不会被压成一条线。 */
.home-contact {
	display: flex;
	align-items: stretch;
}

.home-contact>.x6 {
	float: none;
	flex: 1 1 50%;
	min-width: 0;
}

.home-contact>.x6:last-child {
	position: relative;
	min-height: 420px;
}

.home-contact>.x6:last-child img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 表单容器 .gb 在 style.css:415 被写死 width:590px + float:right。
   1440 视口下列宽 715px，590 放得下；但视口一缩，列宽就小于 590 了 ——
   1024 时列宽只剩 507px，590px 宽的表单会横向溢出列外被裁掉
   （改前实测：1024 下 .gb 右边界超出列边界）。
   改成 width:100% + max-width:590px：宽视口下仍被 max-width 钳在 590px
   （1440 下与改前逐像素一致，零回归），窄视口下自动收到列宽、不再溢出。
   float:right 保持不动，表单依旧是右对齐。 */
.home-contact .gb {
	width: 100%;
	max-width: 590px;
}

/* 弹窗 */
.dialog {
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(6, 14, 28, .30);
}

.dialog .dialog-body {
	padding: 16px 40px 40px;
}

.dialog-body .input,
.dialog-body select {
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--bg-soft);
}

.dialog-body .input:focus {
	border-color: var(--brand-400);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(4, 109, 255, .10);
}

.dialog-body .button.bg-yellow {
	background: var(--brand-grad) !important;
	border: 0 !important;
	box-shadow: 0 10px 24px rgba(4, 109, 255, .26);
}

/* 产品详情 */
.product-description .padding-large {
	padding: 0 0 0 34px;
}

/* 产品详情首屏信息块（.x7 > .padding-large > .article）去掉白色卡片。
   用户反馈：这一块不要白色背景色与边框。
   注意四个属性必须一起清掉 —— 只去 background / border 而留着
   border-radius + box-shadow，会在浅灰底上留下一个"幽灵卡片"的圆角阴影残影。
   作用域严格限定在 .product-description 内，以下位置的 .article 不受影响：
     · lists_single.htm / view_recruit.htm —— 模板里显式写了 article bg-white，有意为之
     · view_download.htm —— .article 嵌套在外层 .bg-white.padding-large 里
     · view_media.htm —— .article 在 TAB 面板内 */
.product-description .article {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.product-description p {
	font-size: 14.5px;
	line-height: 1.95;
	color: var(--ink-500);
}

.product-overview {
	background: #fff;
	border-radius: var(--r-lg);
	border: 1px solid var(--line);
	overflow: hidden;
	box-shadow: var(--sh-xs);
}

.product-overview .tab-head {
	border-bottom: 1px solid var(--line);
}

.product-overview .tab .tab-nav li a {
	font-size: 16.5px;
	font-weight: 500;
	color: var(--ink-500);
	padding: 22px 0;
}

.product-overview .tab .tab-nav .active a {
	color: var(--brand-500);
	font-weight: 700;
	border-bottom: 3px solid var(--brand-500);
}

.pro-thumb .item img {
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	transition: border-color .24s var(--ease);
}

.pro-thumb .item:hover img {
	border-color: var(--brand-400);
}

.attribute li {
	line-height: 34px;
	color: var(--ink-600);
}

.attribute li span {
	color: var(--ink-400);
}

/* 招聘列表 */
.job-list {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-xs);
	transition: all .3s var(--ease);
}

.job-list:hover {
	transform: translateY(-4px);
	border-color: var(--brand-200);
	box-shadow: 0 20px 46px rgba(4, 109, 255, .14);
}

/* ==========================================================================
   13. 页脚
   ========================================================================== */
footer,
footer.bg-main {
	position: relative;
	background: var(--ink-900);
	color: rgba(255, 255, 255, .62);
	padding: 76px 0 0;
	overflow: hidden;
}

footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--brand-grad);
}

footer::after {
	content: '';
	position: absolute;
	top: -160px;
	right: -120px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(4, 109, 255, .22) 0%, transparent 68%);
	pointer-events: none;
}

footer>* {
	position: relative;
	z-index: 1;
}

footer h3 {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	letter-spacing: .02em;
	margin-bottom: 22px !important;
}

footer ul li ul li a {
	line-height: 32px;
	color: rgba(255, 255, 255, .56);
	font-size: 13.5px;
	transition: all .22s var(--ease);
}

footer ul li ul li a:hover {
	color: #fff;
	padding-left: 4px;
}

footer .contact .media span {
	background: rgba(4, 109, 255, .20) !important;
	border: 1px solid rgba(4, 109, 255, .38);
	width: 30px !important;
	height: 30px !important;
	line-height: 28px !important;
}

footer .contact .media i {
	color: var(--brand-300) !important;
	line-height: 28px !important;
	font-size: 14px !important;
}

footer .contact .media .media-body a,
footer .contact .media .media-body p {
	color: rgba(255, 255, 255, .66);
	line-height: 1.7;
	font-size: 13.5px;
}

footer .contact .media .media-body a.text-large {
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	letter-spacing: .02em;
}

footer .qr {
	margin-left: 0;
	background: #fff;
	border-radius: var(--r-md);
	padding: 12px !important;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}

footer .qr img {
	width: 100%;
	border-radius: var(--r-xs);
}

footer .qr p {
	color: var(--ink-500) !important;
	font-size: 12px;
	margin-top: 8px;
}

/* 友情链接 */
footer .tab-head {
	border-bottom: 1px solid rgba(255, 255, 255, .10);
}

footer .tab .tab-nav li a {
	color: rgba(255, 255, 255, .56);
	font-size: 14.5px;
	font-weight: 500;
}

footer .tab .tab-nav .active a {
	border-bottom: 2px solid var(--brand-400);
	color: #fff;
}

footer .tab .tab-body {
	padding: 22px 0 4px;
}

footer .tab .tab-body .flink a {
	color: rgba(255, 255, 255, .50);
	font-size: 13px;
	margin-right: 20px;
	line-height: 26px;
	transition: color .22s var(--ease);
}

footer .tab .tab-body .flink a:hover {
	color: var(--brand-300);
}

footer .copyright {
	padding: 26px 0 40px;
	color: rgba(255, 255, 255, .44);
	font-size: 13px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	margin-top: 20px;
}

footer .copyright a {
	color: rgba(255, 255, 255, .60);
	margin-left: 4px;
}

footer .copyright a:hover {
	color: var(--brand-300);
}

/* ==========================================================================
   14. 响应式
   ========================================================================== */
@media screen and (max-width:1200px) {
	.hero-title {
		font-size: 50px;
	}

	.sec-head h2,
	.sec-head h3,
	.title-c h3 {
		font-size: 34px;
	}
}

@media screen and (max-width:1000px) {
	:root {
		--header-h: 68px;
	}

	.hero-section {
		height: auto;
		min-height: 520px;
		padding: 120px 0 90px;
	}

	.hero-title {
		font-size: 42px;
	}

	.hero-sub {
		font-size: 17px;
	}

	#pc-header .nav li a {
		padding: 0 13px;
		font-size: 14.5px;
	}
}

@media screen and (max-width:760px) {
	.sec-head h2,
	.sec-head h3,
	.title-c h3 {
		font-size: 27px;
	}

	.sec-head {
		margin-bottom: 36px;
	}

	.hero-title {
		font-size: 33px;
	}

	.hero-eyebrow {
		font-size: 11px;
		letter-spacing: .18em;
	}

	.hero-sub {
		font-size: 15px;
		gap: 10px;
	}

	.hero-sub-en {
		padding-left: 10px;
		font-size: 13px;
	}

	.channel-banner {
		height: calc(240px + var(--header-h));
	}

	.channel-banner .banner-info h1,
	.channel-banner .banner-info h3 {
		font-size: 26px;
	}

	.article .padding-large {
		padding: 26px 20px 34px;
	}

	.btn {
		height: 46px;
		padding: 0 22px;
		font-size: 14px;
	}

	.home-about .padding-large {
		padding: 32px 24px;
	}

	.home-about {
		background-attachment: scroll;
	}
}

/* ==========================================================================
   15. 动效与可访问性
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.button:focus-visible {
	outline: 2px solid var(--brand-400);
	outline-offset: 2px;
	border-radius: var(--r-xs);
}

/* 修复旧模板中 .button 用作纯图标时的居中 */
.home-news-h .button i,
.list-news .button i {
	line-height: inherit;
}