/* 基础重置和通用样式 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Arial', sans-serif;
}
body {
	color: #333;
	line-height: 1.6;
	overflow-x: hidden;
}
a {
	text-decoration: none;
	color: inherit;
}
ul {
	list-style: none;
}
/* 整体宽度 85% */
.container {
	width: 85%;
	margin: 0 auto;
}
.btn {
	display: inline-block;
	background-color: #0099e6;
	color: #fff;
	padding: 10px 24px;
	border-radius: 20px;
	font-size: 14px;
	font-weight: bold;
	transition: background 0.3s;
}
.btn:hover {
	background-color: #007acc;
}
/* 顶部信息栏 */
.top-bar {
	background-color: #0099e6;
	color: #fff;
	font-size: 12px;
	padding: 8px 0;
}
.top-bar .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.top-bar-contact {
	display: flex;
	gap: 25px;
	align-items: center;
}
.top-bar-contact span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}
/* 白色 SVG 图标 */
.top-bar-contact svg {
	width: 14px;
	height: 14px;
	fill: #fff;
}
/* 顶部右侧工具组 (包含多语言和汉堡菜单) */
.top-bar-tools {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-left: auto; /* 确保在隐藏左侧联系方式时依然靠右 */
}
/* 多语言切换下拉菜单样式 */
.language-dropdown {
	position: relative;
	cursor: pointer;
	padding: 5px 0;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
}
.language-dropdown::after {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid #fff;
	transition: transform 0.3s;
}
.language-dropdown:hover::after {
	transform: rotate(180deg);
}
.language-menu {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 10px;
	background-color: #fff;
	color: #333;
	border-radius: 5px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	min-width: 140px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all 0.3s ease;
	z-index: 200;
}
.language-dropdown:hover .language-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.language-menu li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 15px;
	font-size: 13px;
	border-bottom: 1px solid #f0f0f0;
	transition: background 0.2s, color 0.2s;
}
.language-menu li:last-child a {
	border-bottom: none;
}
.language-menu li a:hover {
	background-color: #f5f9fc;
	color: #0099e6;
}
.flag-icon {
	width: 20px;
	height: 14px;
	border-radius: 2px;
	box-shadow: 0 0 2px rgba(0,0,0,0.2);
}
/* =======================================
           汉堡菜单按钮 (三横杠) - PC端默认隐藏
           ======================================= */
.hamburger-menu {
	cursor: pointer;
	display: none; /* PC端隐藏 */
	flex-direction: column;
	justify-content: space-between;
	width: 20px;
	height: 14px;
	z-index: 1000;
}
.hamburger-menu span {
	display: block;
	width: 100%;
	height: 2px;
	background-color: #fff;
	transition: all 0.3s ease;
}
/* 点击后的 X 变形动画 */
.hamburger-menu.active span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}
.hamburger-menu.active span:nth-child(2) {
	opacity: 0;
}
.hamburger-menu.active span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}
/* =======================================
           全屏侧边/下拉菜单结构 - 默认隐藏
           ======================================= */
.mobile-menu-overlay {
	position: fixed;
	top: 0;
	right: -100%; /* 默认隐藏在屏幕右侧 */
	width: 300px;
	height: 100vh;
	background-color: #fff;
	box-shadow: -5px 0 15px rgba(0,0,0,0.1);
	z-index: 999;
	transition: right 0.4s ease;
	padding-top: 80px;
}
.mobile-menu-overlay.active {
	right: 0; /* 激活时滑入 */
}
.mobile-menu-overlay ul {
	padding: 0 30px;
}
.mobile-menu-overlay ul li {
	border-bottom: 1px solid #eee;
}
.mobile-menu-overlay ul li a {
	display: block;
	padding: 15px 0;
	font-size: 16px;
	font-weight: bold;
	color: #333;
	text-transform: uppercase;
}
.mobile-menu-overlay ul li a:hover {
	color: #0099e6;
}
/* 导航栏 (PC端) */
.header {
	background-color: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	position: sticky;
	top: 0;
	z-index: 100;
}
.header .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 80px;
}
.logo {
	display: flex;
	align-items: center;
	font-size: 24px;
	font-weight: bold;
	color: #0099e6;
}
.logo-icon {
	width: 40px;
	height: 40px;
	background-color: #0099e6;
	border-radius: 50%;
	margin-right: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-size: 18px;
}
.nav-links {
	display: flex;
	gap: 30px;
	font-size: 14px;
	text-transform: uppercase;
	height: 100%;
	align-items: center;
}
/* 导航下拉菜单 */
.nav-item {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 0 10px;
}
.nav-item > a {
	display: flex;
	align-items: center;
	gap: 5px;
	transition: color 0.3s;
}
.nav-item.has-dropdown > a::after {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform 0.3s;
}
.nav-item:hover > a {
	color: #0099e6;
}
.nav-item:hover.has-dropdown > a::after {
	transform: rotate(180deg);
}
.dropdown-menu {
	position: absolute;
	top: 80px;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	background-color: #fff;
	min-width: 240px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	border-radius: 0 0 8px 8px;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	padding: 10px 0;
}
.nav-item:hover .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.dropdown-menu li a {
	display: block;
	padding: 10px 20px;
	color: #333;
	font-size: 13px;
	font-weight: normal;
	white-space: nowrap;
	transition: background 0.3s, color 0.3s;
}
.dropdown-menu li a:hover {
	background-color: #f2f8fb;
	color: #0099e6;
}
/* 触屏点击展开（js 添加 open-dropdown） */
.nav-item.open-dropdown > .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
/* 二级菜单：分类下的子分类，向右飞出 */
.dropdown-menu li {
	position: relative;
}
.dropdown-menu .submenu {
	position: absolute;
	left: 100%;
	top: 0;
	min-width: 220px;
	background-color: #fff;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	padding: 10px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateX(10px);
	transition: all 0.25s ease;
	z-index: 20;
}
.dropdown-menu li:hover > .submenu,
.dropdown-menu li.open-submenu > .submenu {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}
.dropdown-menu li.has-submenu > a::after {
	content: '›';
	float: right;
	margin-left: 10px;
	font-size: 16px;
	line-height: 1;
	opacity: 0.6;
}
/* 移动端菜单中的产品分类（两级） */
.mobile-menu-overlay .mobile-submenu {
	padding: 0 0 0 15px;
}
.mobile-menu-overlay .mobile-submenu li {
	border-bottom: none;
}
.mobile-menu-overlay .mobile-submenu a {
	padding: 10px 0;
	font-size: 14px;
	font-weight: normal;
	text-transform: none;
	color: #555;
}
.mobile-menu-overlay .mobile-submenu ul {
	padding: 0 0 0 15px;
	border-left: 1px solid #eee;
}
/* Banner 轮播区域 */
.hero {
	background-color: #ededed;
	position: relative;
	overflow: hidden;
	height: 500px;
}
.slider-container {
	position: relative;
	width: 100%;
	height: 100%;
}
.slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
	display: flex;
	align-items: center;
}
.slide.active {
	opacity: 1;
	z-index: 1;
}
.slide .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.hero-content {
	flex: 1;
	max-width: 500px;
}
.hero-content h1 {
	font-size: 32px;
	margin-bottom: 20px;
	color: #111;
}
.hero-content p {
	font-size: 14px;
	color: #666;
	margin-bottom: 30px;
}
.hero-image {
	flex: 1;
	text-align: right;
}
.hero-image img {
	max-width: 100%;
	height: auto;
	mix-blend-mode: multiply;
}
/* 轮播指示器 */
.slider-dots {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 10;
}
.dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #ccc;
	cursor: pointer;
	transition: background 0.3s;
}
.dot.active {
	background-color: #0099e6;
}
/* 数据统计区域 */
.stats {
	padding: 40px 0;
}
.stats-box {
	display: flex;
	border: 1px solid #eee;
	border-radius: 10px;
	padding: 30px;
	justify-content: space-around;
	box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}
.stat-item {
	text-align: center;
	flex: 1;
	border-right: 1px solid #eee;
}
.stat-item:last-child {
	border-right: none;
}
.stat-item h3 {
	font-size: 32px;
	color: #0099e6;
	display: flex;
	justify-content: center;
	align-items: baseline;
	line-height: 1;
	margin-bottom: 5px;
}
.stat-item h3 span.text-part {
	color: #333;
	font-size: 16px;
	margin-left: 5px;
}
.stat-item p {
	font-size: 14px;
	color: #666;
}
/* 产品组件 */
.products-section {
	background-color: #f8f9fa;
	padding: 60px 0;
	text-align: center;
}
.section-title {
	font-size: 28px;
	font-weight: bold;
	margin-bottom: 40px;
	text-transform: uppercase;
}
.product-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	margin-bottom: 40px;
}
.product-item {
	background: #fff;
	padding: 20px;
	border-radius: 10px;
	text-align: center;
	transition: box-shadow 0.3s;
}
.product-item:hover {
	box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.product-item img {
	width: 100%;
	height: 120px;
	object-fit: contain;
	margin-bottom: 15px;
}
.product-item p {
	font-size: 16px;
	color: #333;
}
/* 关于我们 */
.about-section {
	padding: 80px 0;
}
.about-section .container {
	display: flex;
	align-items: center;
	gap: 50px;
}
.about-content {
	flex: 1;
}
.about-content h2 {
	font-size: 28px;
	margin-bottom: 20px;
	text-transform: uppercase;
}
.about-content p {
	font-size: 14px;
	color: #666;
	margin-bottom: 15px;
}
.about-content .btn {
	margin-top: 20px;
}
.about-image {
	flex: 1;
}
.about-image img {
	width: 100%;
	border-radius: 10px;
}
/* 新闻中心 */
.news-section {
	background-color: #f8f9fa;
	padding: 60px 0;
}
.news-section .section-title {
	text-align: center;
}
.news-item {
	display: flex;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 20px;
	padding: 20px;
	gap: 30px;
	align-items: center;
}
.news-img {
	width: 200px;
	height: 120px;
	flex-shrink: 0;
}
.news-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}
.news-content {
	flex: 1;
}
.news-date {
	font-size: 12px;
	color: #0099e6;
	margin-bottom: 10px;
}
.news-title {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
	text-transform: uppercase;
}
.news-desc {
	font-size: 14px;
	color: #666;
	margin-bottom: 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.read-more {
	font-size: 14px;
	color: #0099e6;
	font-weight: bold;
}
/* 底部 CTA 区域 */
.cta-section {
	background-color: #eef6fb;
	padding: 60px 0;
}
.cta-section .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.cta-content {
	max-width: 600px;
}
.cta-content h2 {
	font-size: 24px;
	margin-bottom: 15px;
	text-transform: uppercase;
}
.cta-content p {
	font-size: 14px;
	color: #555;
	margin-bottom: 25px;
}
.cta-image img {
	max-width: 300px;
}
/* 页脚 */
.footer {
	background-color: #111;
	color: #fff;
	padding: 60px 0 40px;
}
.footer-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 30px;
	border-bottom: 1px solid #333;
	margin-bottom: 40px;
}
.footer-logo {
	font-size: 24px;
	font-weight: bold;
}
.social-icons {
	display: flex;
	gap: 15px;
}
.social-icons span {
	width: 30px;
	height: 30px;
	border: 1px solid #555;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}
.social-icons span:hover {
	background-color: #333;
}
.footer-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.footer-col h4 {
	font-size: 16px;
	margin-bottom: 20px;
	text-transform: uppercase;
}
.footer-col ul li {
	margin-bottom: 10px;
	font-size: 14px;
	color: #aaa;
	text-transform: uppercase;
}
.footer-col ul li a:hover {
	color: #fff;
}
.footer-copyright {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid #333;
	text-align: center;
	font-size: 13px;
	line-height: 1.6;
	color: #888;
}

        /* =======================================
           响应式设计 (重点修改区)
           ======================================= */
        
        /* 平板及以下尺寸 */
        @media (max-width: 992px) {
.product-grid {
	grid-template-columns: repeat(3, 1fr);
}
.slide .container, .about-section .container, .cta-section .container {
	flex-direction: column;
	text-align: center;
}
.hero-image, .about-image {
	margin-top: 30px;
}
.stats-box {
	flex-direction: column;
	gap: 20px;
}
.stat-item {
	border-right: none;
	border-bottom: 1px solid #eee;
	padding-bottom: 20px;
}
.stat-item:last-child {
	border-bottom: none;
}
.footer-grid {
	grid-template-columns: repeat(2, 1fr);
}
.hero {
	height: auto;
	padding: 40px 0;
}
.slide {
	position: relative;
	display: none;
	opacity: 1;
}
.slide.active {
	display: flex;
}
}

 /* 手机端尺寸 (小于 768px) */
        @media (max-width: 768px) {

.nav-links {
	display: none;
}
/* 显示汉堡菜单 */
.hamburger-menu {
	display: flex;
}
/* 隐藏顶部的联系方式和PC端的下拉菜单，腾出空间 */
.top-bar-contact {
	display: none;
}
/* 其他移动端排版调整 */
.product-grid {
	grid-template-columns: repeat(2, 1fr);
}
.news-item {
	flex-direction: column;
	text-align: center;
}
.news-img {
	width: 100%;
	height: 200px;
}
.footer-grid {
	grid-template-columns: 1fr;
}
}
/* ------------------------------
           右侧漂浮按钮组 (核心样式)
           - 采用 fixed 定位，垂直居中靠右
           - 优雅圆角，阴影，悬浮动画
        -------------------------------- */
.float-buttons {
	position: fixed;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 16px;
	z-index: 1000;
	transition: all 0.2s ease;
}
/* 单个按钮容器 */
.float-btn {
	width: 56px;
	height: 56px;
	background: #ffffff;
	border-radius: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.05);
	transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
	position: relative;
	cursor: pointer;
	border: 1px solid rgba(0,0,0,0.03);
}
/* 图标样式 */
.float-btn i {
	font-size: 28px;
	transition: transform 0.2s;
}
/* 各自品牌色 (悬浮时强化 + 一般保留中性底色，但加上品牌色感) */
.btn-whatsapp i {
	color: #25D366;
}
.btn-whatsapp:hover {
	background: #25D366;
	box-shadow: 0 12px 22px rgba(37, 211, 102, 0.3);
	transform: scale(1.08);
}
.btn-whatsapp:hover i {
	color: white;
}
.btn-email i {
	color: #EA4335;
}
.btn-email:hover {
	background: #EA4335;
	box-shadow: 0 12px 22px rgba(234, 67, 53, 0.3);
	transform: scale(1.08);
}
.btn-email:hover i {
	color: white;
}
.btn-wechat i {
	color: #07C160;
}
.btn-wechat:hover {
	background: #07C160;
	box-shadow: 0 12px 22px rgba(7, 193, 96, 0.3);
	transform: scale(1.08);
}
.btn-wechat:hover i {
	color: white;
}
/* 悬浮提示 tooltip (用于显示文字: WhatsApp, Email, 微信) */
.float-btn .tooltip-text {
	position: absolute;
	right: 70px;
	background: #1e2a36e6;
	backdrop-filter: blur(6px);
	color: white;
	padding: 6px 14px;
	border-radius: 40px;
	font-size: 0.8rem;
	font-weight: 500;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translateX(8px);
	transition: opacity 0.2s, transform 0.2s;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	font-family: inherit;
	letter-spacing: 0.3px;
}
.float-btn:hover .tooltip-text {
	opacity: 1;
	transform: translateX(0);
}

        /* 为移动设备做细微调整: 按钮稍小一点，但仍易点 */
        @media (max-width: 640px) {
.float-buttons {
	right: 12px;
	gap: 12px;
}
.float-btn {
	width: 48px;
	height: 48px;
}
.float-btn i {
	font-size: 24px;
}
.tooltip-text {
	font-size: 0.7rem;
	right: 60px;
	padding: 4px 10px;
}
.hero h1 {
	font-size: 1.8rem;
}
.container {
	padding: 1rem 1.2rem;
}
}
/* 当页面滚动时轻微增加阴影效果，提升质感 */
.float-btn {
	transition: all 0.2s ease;
}
/* 添加简单的微信弹窗Modal (点击微信显示二维码或微信号) 
           外贸站常用微信悬浮展示联系方式，优雅弹窗 */
.wechat-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(3px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0.2s, opacity 0.2s;
}
.wechat-modal.active {
	visibility: visible;
	opacity: 1;
}
.modal-card {
	background: white;
	max-width: 300px;
	width: 85%;
	border-radius: 36px;
	text-align: center;
	padding: 1.8rem 1.5rem 2rem;
	box-shadow: 0 30px 40px rgba(0,0,0,0.2);
	transform: scale(0.95);
	transition: transform 0.25s ease;
}
.wechat-modal.active .modal-card {
	transform: scale(1);
}
.modal-card i.fa-weixin {
	font-size: 56px;
	color: #07C160;
	margin-bottom: 12px;
}
.modal-card h4 {
	font-size: 1.5rem;
	margin: 10px 0 5px;
	color: #1e2a36;
}
.wechat-number {
	background: #f0f2f5;
	padding: 12px;
	border-radius: 60px;
	font-size: 1.2rem;
	font-weight: bold;
	letter-spacing: 1px;
	margin: 15px 0;
	color: #2c3e50;
	font-family: monospace;
}
.close-modal {
	background: #eef2f9;
	border: none;
	padding: 8px 24px;
	border-radius: 50px;
	font-weight: 600;
	margin-top: 8px;
	cursor: pointer;
	color: #2c3e50;
	transition: 0.1s;
}
.close-modal:hover {
	background: #dce3ec;
}
.copy-tip {
	font-size: 0.7rem;
	color: #6c86a3;
	margin-top: 8px;
}
/*联系方式*/
		
		
		 /* =======================================
           1. 页面顶部横幅 (Page Banner)
           ======================================= */
.page-banner {
	position: relative;
	height: 300px;
	background: url(../images/banner_contacts.jpg) no-repeat center;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	color: #fff;
}
/* 背景遮罩，确保文字清晰 */
.page-banner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
}
.page-banner .container {
	position: relative;
	z-index: 1;
}
.page-banner h1 {
	font-size: 48px;
	font-weight: bold;
	margin-bottom: 15px;
}
.breadcrumbs {
	display: flex;
	align-items: center;
	font-size: 14px;
}
.breadcrumbs i {
	margin-right: 8px;
}
.breadcrumbs a {
	color: #fff;
	transition: color 0.3s;
}
.breadcrumbs a:hover {
	color: #0099e6;
}
.breadcrumbs span {
	margin: 0 10px;
	color: #ccc;
}
/* =======================================
           2. 联系信息区块
           ======================================= */
.contact-section {
	padding: 80px 0;
}
.contact-title {
	font-size: 32px;
	font-weight: bold;
	margin-bottom: 20px;
	color: #111;
}
.contact-address {
	display: flex;
	align-items: center;
	color: #666;
	font-size: 14px;
	margin-bottom: 50px;
}
.contact-address svg {
	width: 16px;
	height: 16px;
	margin-right: 8px;
	fill: #666;
}
.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.5fr; /* 左侧卡片与右侧地图比例 */
	gap: 40px;
}
/* 左侧卡片网格 */
.info-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.info-card {
	background-color: #fff;
	padding: 30px;
	border-radius: 12px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.05);
	border: 1px solid #f0f0f0;
	transition: transform 0.3s;
}
.info-card:hover {
	transform: translateY(-5px);
}
.info-icon {
	width: 24px;
	height: 24px;
	margin-bottom: 20px;
	fill: #333;
}
.info-label {
	font-size: 13px;
	color: #888;
	margin-bottom: 5px;
}
.info-value {
	font-size: 15px;
	font-weight: bold;
	color: #111;
}
/* 右侧地图占位符 */
.map-container {
	background-color: #f1f3f5; /* 占位灰色 */
	border-radius: 12px;
	border: 1px solid #e0e0e0;
	height: 100%;
	min-height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #999;
	font-size: 16px;
}
/* =======================================
           3. 留言表单区块
           ======================================= */
.message-section {
	background-color: #fff;
	padding: 80px 0;
}
.message-section .contact-title {
	margin-bottom: 40px;
}
.form-group {
	margin-bottom: 20px;
}
.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}
/* 输入框样式 */
.form-control {
	width: 100%;
	padding: 15px 20px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	background-color: #f5f6f8;
	font-size: 14px;
	color: #333;
	outline: none;
	transition: border-color 0.3s, background-color 0.3s;
}
.form-control:focus {
	border-color: #0099e6;
	background-color: #fff;
}
textarea.form-control {
	resize: vertical;
	min-height: 150px;
}
/* 必填项红星 */
.required::before {
	content: '* ';
	color: #ff4d4f;
}
/* 验证码及提交按钮行 */
.form-actions {
	display: grid;
	grid-template-columns: 1fr 150px 150px; /* 输入框、验证码、按钮比例 */
	gap: 30px;
	align-items: center;
	margin-top: 10px;
}
/* 图片验证码 */
.captcha-img {
	display: block;
	width: 100%;
	height: 50px;
	object-fit: contain;
	background-color: #f3fbfe;
	border: 1px solid #d9e8ee;
	border-radius: 8px;
	cursor: pointer;
	user-select: none;
}
.btn-submit {
	background-color: #0099e6;
	color: #fff;
	border: none;
	padding: 15px 0;
	border-radius: 8px;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.3s;
}
.btn-submit:hover {
	background-color: #007acc;
}

        /* 响应式设计 */
        @media (max-width: 992px) {
.contact-grid {
	grid-template-columns: 1fr;
}
.map-container {
	min-height: 300px;
}
.form-actions {
	grid-template-columns: 1fr; /* 手机端竖排 */
	gap: 15px;
}
.captcha-img {
	width: 150px;
}
}
 @media (max-width: 768px) {
.page-banner h1 {
	font-size: 36px;
}
.info-cards {
	grid-template-columns: 1fr;
}
.form-row {
	grid-template-columns: 1fr;
	gap: 0;
}
}
/*-----------关于我们-----------*/




        /* 通用标题样式 */
.section-title {
	font-size: 36px;
	font-weight: bold;
	color: #111;
	margin-bottom: 15px;
}
/* 标题下方的蓝色短横线 */
.title-line {
	width: 50px;
	height: 3px;
	background-color: #0099e6;
	margin-bottom: 30px;
}
/* =======================================
           1. 首屏 Banner
           ======================================= */
.about-hero {
	position: relative;
	height: 450px;
	background: url(../images/banner_about.jpg) no-repeat center top;
	display: flex;
	align-items: center;
}
/* 深蓝色渐变遮罩 */
.about-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, rgba(0, 85, 150, 0.85) 0%, rgba(0, 150, 220, 0.4) 60%, transparent 100%);
}
.about-hero .container {
	position: relative;
	z-index: 1;
	color: #fff;
	padding-top: 40px;
}
/* Logo 占位 */
.hero-logo {
	display: flex;
	align-items: center;
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 30px;
}
.hero-logo-box {
	background: #fff;
	color: #0099e6;
	padding: 2px 8px;
	border-radius: 4px;
	margin-right: 10px;
}
.about-hero h1 {
	font-size: 36px;
	max-width: 700px;
	line-height: 1.3;
	font-weight: bold;
}
/* =======================================
           2. 关于我们介绍 (About NWSRUI)
           ======================================= */
               /* =======================================
           2. 关于我们介绍 (About Intro) - 优化版
           ======================================= */
.about-intro {
	padding: 80px 0;
	background-color: #fff; /* 确保背景干净 */
	overflow: hidden; /* 防止元素溢出产生横向滚动条 */
}
.intro-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}
.intro-text {
	width: 100%;
	word-wrap: break-word; /* 强制长单词换行，防止撑破容器 */
	word-break: break-all; /* 兼容部分长串英文字符 */
}
.intro-text p {
	font-size: 15px;
	color: #555;
	margin-bottom: 20px;
	line-height: 1.8;
	text-align: justify;/* text-align: justify 可能导致中文/长英文间距过大，若觉得不好看可删掉此行 */
}
.intro-image {
	width: 100%;
}
.intro-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.1);
	display: block; /* 消除图片底部的默认间隙 */
}

        /* --- 针对公司简介模块的移动端适配 --- */
        @media (max-width: 992px) {
.intro-grid {
	grid-template-columns: 1fr; /* 平板及以下变为上下排版 */
	gap: 40px; /* 图片和文字的间距 */
}
}
 @media (max-width: 768px) {
.about-intro {
	padding: 50px 0; /* 缩小手机端上下留白 */
}
.section-title {
	font-size: 28px; /* 手机端标题稍微变小 */
}
.intro-text p {
	font-size: 14px;
	text-align: left; /* 手机端建议左对齐，justify 会导致满天星一样的空格 */
	line-height: 1.6;
}
}
/* =======================================
           3. 使命/愿景/价值观卡片
           ======================================= */
.values-section {
	padding-bottom: 80px;
}
.values-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.value-card {
	background: #fff;
	border: 1px solid #f0f0f0;
	border-radius: 12px;
	padding: 40px 30px;
	text-align: center;
	box-shadow: 0 5px 20px rgba(0,0,0,0.03);
	transition: transform 0.3s;
}
.value-card:hover {
	transform: translateY(-5px);
}
.value-icon {
	width: 60px;
	height: 60px;
	margin: 0 auto 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.value-icon svg {
	width: 40px;
	height: 40px;
	fill: #333;
}
.value-card h3 {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
	color: #111;
}
.value-card p {
	font-size: 14px;
	color: #666;
	line-height: 1.6;
}
/* =======================================
           4. 市场覆盖率 (Market coverage)
           ======================================= */
.market-coverage {
	background-color: #fcfcfc;
	/* 替换为世界地图背景图 */
	background-image: url('https://upload.wikimedia.org/wikipedia/commons/8/80/World_map_-_low_resolution.svg');
	background-size: 80%;
	background-position: center;
	background-repeat: no-repeat;
	padding: 80px 0;
	border-top: 1px solid #eee;
}
.market-coverage .section-title {
	margin-bottom: 10px;
}
.market-desc {
	font-size: 15px;
	color: #555;
	margin-bottom: 50px;
}
.coverage-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
}
.coverage-col h3 {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 30px;
	color: #111;
}
/* 进度条列表 */
.progress-list {
	list-style: none;
}
.progress-item {
	margin-bottom: 25px;
}
.progress-info {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 8px;
}
.progress-bar-bg {
	width: 100%;
	height: 8px;
	background-color: #e9ecef;
	border-radius: 4px;
	overflow: hidden;
}
.progress-bar-fill {
	height: 100%;
	background-color: #0099e6;
	border-radius: 4px;
}
/* =======================================
           5. 经销商支持框架 (Distributor Support Framework)
           ======================================= */
.support-section {
	background-color: #f8f9fa;
	padding: 80px 0;
}
.support-section .section-title {
	text-align: center;
	margin-bottom: 10px;
}
.support-desc {
	text-align: center;
	font-size: 15px;
	color: #666;
	margin-bottom: 50px;
}
.support-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.support-card {
	background-color: #fff;
	padding: 30px;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 250px;
	transition: box-shadow 0.3s;
}
.support-card:hover {
	box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.support-card-header {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
}
.support-card-icon {
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.support-card-icon svg {
	width: 24px;
	height: 24px;
	fill: #0099e6;
}
.support-card h4 {
	font-size: 18px;
	font-weight: bold;
	color: #111;
	line-height: 1.3;
}
.support-card p {
	font-size: 13px;
	color: #666;
	line-height: 1.6;
	margin-bottom: 30px;
	flex-grow: 1;
	font-size: 14px;
}
.support-arrow {
	font-size: 20px;
	color: #999;
	align-self: flex-end;
}
/* =======================================
           6. 底部 CTA 行动呼吁
           ======================================= */
.cta-section {
	background-color: #eef5fa;
	padding: 60px 0;
	overflow: hidden;
}
.cta-section .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.cta-content {
	max-width: 600px;
}
.cta-content h2 {
	font-size: 28px;
	font-weight: bold;
	color: #111;
	margin-bottom: 15px;
}
.cta-content p {
	font-size: 16px;
	color: #555;
	margin-bottom: 30px;
}
.btn-primary {
	display: inline-block;
	background-color: #0099e6;
	color: #fff;
	padding: 12px 30px;
	border-radius: 30px;
	font-size: 15px;
	font-weight: bold;
	transition: background 0.3s;
}
.btn-primary:hover {
	background-color: #007acc;
}
.cta-image img {
	max-width: 400px;
	height: auto;
}

        /* =======================================
           响应式设计
           ======================================= */
        @media (max-width: 1024px) {
.support-grid {
	grid-template-columns: repeat(2, 1fr);
}
.coverage-grid {
	gap: 40px;
}
}
 @media (max-width: 768px) {
.about-hero h1 {
	font-size: 28px;
}
.intro-grid {
	grid-template-columns: 1fr;
	gap: 30px;
}
.values-grid {
	grid-template-columns: 1fr;
}
.coverage-grid {
	grid-template-columns: 1fr;
}
.support-grid {
	grid-template-columns: 1fr;
}
.cta-section .container {
	flex-direction: column;
	text-align: center;
	gap: 30px;
}
}
/*  新闻列表页面开始*/
		
		
.news-hero {
	position: relative;
	height: 300px;
	background: url(../images/banner_news.jpg) no-repeat center top;
	display: flex;
	align-items: center;
}
.news-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4); /* 黑色半透明遮罩 */
}
.news-hero .container {
	position: relative;
	z-index: 1;
	color: #fff;
}
.news-hero h1 {
	font-size: 40px;
	font-weight: bold;
	margin-bottom: 10px;
}
/* 面包屑导航 */
.breadcrumbs {
	display: flex;
	align-items: center;
	font-size: 14px;
}
.breadcrumbs svg {
	width: 16px;
	height: 16px;
	fill: #fff;
	margin-right: 8px;
}
.breadcrumbs a {
	color: #fff;
	transition: color 0.3s;
}
.breadcrumbs a:hover {
	color: #0099e6;
}
.breadcrumbs span {
	margin: 0 10px;
	color: #ccc;
}
/* =======================================
           2. 新闻列表区块
           ======================================= */
.news-section {
	padding: 60px 0;
	background-color: #fafbfc; /* 极浅灰背景，凸显白色卡片 */
}
/* 标题与简介 */
.section-header {
	margin-bottom: 40px;
}
.section-title {
	font-size: 32px;
	font-weight: bold;
	color: #111;
	margin-bottom: 15px;
}
.section-desc {
	font-size: 14px;
	color: #555;
	line-height: 1.8;
	margin-bottom: 20px;
}
/* 小圆角按钮 (Read More +) */
.btn-outline {
	display: inline-block;
	padding: 8px 20px;
	border: 1px solid #0099e6;
	color: #0099e6;
	border-radius: 20px;
	font-size: 14px;
	font-weight: bold;
	transition: all 0.3s;
}
.btn-outline:hover {
	background-color: #0099e6;
	color: #fff;
}
/* 新闻条目列表 */
.news-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
/* 单个新闻卡片 */
.news-card {
	display: flex;
	background: #fff;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.03);
	transition: transform 0.3s, box-shadow 0.3s;
	align-items: center;
	border: 1px solid #f0f0f0;
}
.news-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
/* 左侧图片 */
.news-img {
	width: 220px;
	height: 140px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
	margin-right: 30px;
}
.news-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s;
}
.news-card:hover .news-img img {
	transform: scale(1.05); /* 鼠标悬浮图片微放大 */
}
/* 右侧内容 */
.news-content {
	flex: 1;
	padding-right: 20px;
}
.news-date {
	font-size: 13px;
	color: #0099e6;
	margin-bottom: 8px;
	font-weight: bold;
}
.news-title {
	font-size: 18px;
	font-weight: bold;
	color: #111;
	margin-bottom: 12px;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2; /* 限制两行 */
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.news-title a {
	transition: color 0.3s;
}
.news-title a:hover {
	color: #0099e6;
}
.news-excerpt {
	font-size: 14px;
	color: #666;
	line-height: 1.6;
	margin-bottom: 15px;
	display: -webkit-box;
	-webkit-line-clamp: 2; /* 限制两行 */
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.read-more-link {
	font-size: 14px;
	color: #0099e6;
	font-weight: bold;
	display: inline-flex;
	align-items: center;
}
.read-more-link:hover {
	text-decoration: underline;
}
/* =======================================
           3. 分页器 (Pagination)
           ======================================= */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 50px;
}
.page-btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 15px;
	background-color: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	font-size: 14px;
	color: #333;
	transition: all 0.3s;
}
.page-btn:hover {
	border-color: #0099e6;
	color: #0099e6;
}
.page-btn.active {
	background-color: #0099e6;
	border-color: #0099e6;
	color: #fff;
}
.page-btn.disabled {
	color: #ccc;
	cursor: not-allowed;
	border-color: #eee;
}
/* =======================================
           4. 底部 CTA 行动呼吁 (与前面页面一致)
           ======================================= */
.cta-section {
	background-color: #eef5fa;
	padding: 60px 0;
	overflow: hidden;
}
.cta-section .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.cta-content {
	max-width: 600px;
}
.cta-content h2 {
	font-size: 28px;
	font-weight: bold;
	color: #111;
	margin-bottom: 15px;
}
.cta-content p {
	font-size: 16px;
	color: #555;
	margin-bottom: 30px;
}
.btn-primary {
	display: inline-block;
	background-color: #0099e6;
	color: #fff;
	padding: 12px 30px;
	border-radius: 30px;
	font-size: 15px;
	font-weight: bold;
	transition: background 0.3s;
}
.btn-primary:hover {
	background-color: #007acc;
}
.cta-image img {
	max-width: 350px;
	height: auto;
}

        /* =======================================
           响应式设计 (兼容手机/平板)
           ======================================= */
        @media (max-width: 992px) {
.cta-section .container {
	flex-direction: column;
	text-align: center;
	gap: 30px;
}
}
 @media (max-width: 768px) {
.news-hero h1 {
	font-size: 32px;
}
.section-title {
	font-size: 26px;
}
/* 新闻卡片在手机端变成上下结构 */
.news-card {
	flex-direction: column;
	align-items: flex-start;
	padding: 15px;
}
.news-img {
	width: 100%;
	height: 200px; /* 手机端图片占满宽度 */
	margin-right: 0;
	margin-bottom: 20px;
}
.news-content {
	padding-right: 0;
}
/* 手机端分页器紧凑一点 */
.pagination {
	flex-wrap: wrap;
}
.page-btn {
	min-width: 35px;
	height: 35px;
	padding: 0 10px;
	font-size: 13px;
}
}
		
		
	/*新闻列表页面结束*
	
/*------------新闻详情开始----------------*//
	
	
	  .news-hero {
            position: relative;
            height: 250px;
			background:url(../images/banner_news.jpg) no-repeat center;   
          
            display: flex;
            align-items: center;
        }
        .news-hero::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.5); /* 黑色半透明遮罩 */
        }
        .news-hero .container {
            position: relative;
            z-index: 1;
            color: #fff;
        }
        .news-hero h1 {
            font-size: 40px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        /* 面包屑导航 */
        .breadcrumbs {
            display: flex;
            align-items: center;
            font-size: 14px;
            flex-wrap: wrap; /* 手机端自动换行 */
        }
        .breadcrumbs svg {
            width: 16px;
            height: 16px;
            fill: #fff;
            margin-right: 8px;
        }
        .breadcrumbs a {
            color: #fff;
            transition: color 0.3s;
        }
        .breadcrumbs a:hover {
            color: #0099e6;
        }
        .breadcrumbs span {
            margin: 0 10px;
            color: #ccc;
        }
        .breadcrumbs .current {
            color: #0099e6;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 250px; /* 手机端截断长标题 */
        }

        /* =======================================
           2. 文章主要内容区
           ======================================= */
        .article-section {
            padding: 60px 0;
            background-color: #fff;
        }
        
        /* 文章头部（标题与分享） */
        .article-header {
            margin-bottom: 40px;
        }
        .article-title {
            font-size: 32px;
            font-weight: bold;
            color: #111;
            margin-bottom: 20px;
            line-height: 1.4;
        }
        
        .article-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        .article-date {
            font-size: 14px;
            color: #666;
        }
        .share-box {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            color: #666;
        }
        .share-icons {
            display: flex;
            gap: 5px;
        }
        .share-icons a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 24px;
            height: 24px;
            border-radius: 3px;
            color: #fff;
            font-size: 12px;
            transition: opacity 0.3s;
        }
        .share-icons a:hover { opacity: 0.8; }
        .icon-fb { background-color: #3b5998; }
        .icon-x { background-color: #000000; }
        .icon-in { background-color: #0077b5; }
        .icon-red { background-color: #ff4500; }
        .icon-wa { background-color: #25d366; }
        .icon-wc { background-color: #07c160; }

        /* 文章正文排版 */
        .article-body {
            font-size: 15px;
            color: #444;
        }
        
        /* 视频占位图 */
        .video-placeholder {
            width: 100%;
            height: 450px;
            background-color: #f0f0f0;
            border-radius: 8px;
            margin-bottom: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #999;
            font-size: 18px;
            /* 如果有封面图可以替换为 background: url(...) */
        }

        .article-body h3 {
            font-size: 18px;
            font-weight: bold;
            color: #111;
            margin: 30px 0 15px;
        }
        .article-body p {
            margin-bottom: 15px;
        }
        /* 列表样式 */
        .article-body ul {
            list-style: none;
            margin-bottom: 20px;
            padding-left: 20px;
        }
        .article-body ul li {
            position: relative;
            margin-bottom: 8px;
        }
        .article-body ul li::before {
            content: '•';
            position: absolute;
            left: -15px;
            color: #333;
            font-weight: bold;
        }
        /* 正文链接 */
        .article-body a {
            color: #0099e6;
            text-decoration: underline;
        }
        .article-body a:hover {
            color: #007acc;
        }

        /* 上下篇切换 */
        .post-navigation {
            display: flex;
            justify-content: space-between;
            margin-top: 60px;
            padding-top: 30px;
            border-top: 1px solid #eee;
        }
        .nav-item {
            display: flex;
            align-items: center;
            gap: 15px;
            max-width: 45%;
            text-decoration: none;
            color: #333;
            transition: color 0.3s;
        }
        .nav-item:hover {
            color: #0099e6;
        }
        .nav-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
            transition: background 0.3s;
        }
        .nav-item:hover .nav-icon {
            background-color: #e0f0fa;
        }
        .nav-icon svg {
            width: 16px;
            height: 16px;
            fill: #999;
        }
        .nav-item:hover .nav-icon svg {
            fill: #0099e6;
        }
        .nav-text {
            display: flex;
            flex-direction: column;
        }
        .nav-label {
            font-size: 12px;
            color: #999;
            margin-bottom: 3px;
        }
        .nav-title {
            font-size: 14px;
            font-weight: bold;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .nav-next {
            text-align: right;
            flex-direction: row-reverse;
        }
        .nav-next .nav-text {
            align-items: flex-end;
        }

        /* =======================================
           3. 底部 CTA 行动呼吁
           ======================================= */
        .cta-section {
            background-color: #eef5fa;
            padding: 60px 0;
            overflow: hidden;
        }
        .cta-section .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .cta-content {
            max-width: 600px;
        }
        .cta-content h2 {
            font-size: 28px;
            font-weight: bold;
            color: #111;
            margin-bottom: 15px;
        }
        .cta-content p {
            font-size: 16px;
            color: #555;
            margin-bottom: 30px;
        }
        .btn-primary {
            display: inline-block;
            background-color: #0099e6;
            color: #fff;
            padding: 12px 30px;
            border-radius: 30px;
            font-size: 15px;
            font-weight: bold;
            transition: background 0.3s;
        }
        .btn-primary:hover {
            background-color: #007acc;
        }
        .cta-image img {
            max-width: 350px;
            height: auto;
        }

        /* =======================================
           响应式设计 (电脑端与手机端兼容)
           ======================================= */
        @media (max-width: 992px) {
            .cta-section .container {
                flex-direction: column;
                text-align: center;
                gap: 30px;
            }
        }

        @media (max-width: 768px) {
            .news-hero h1 { font-size: 32px; }
            .breadcrumbs .current { max-width: 150px; } /* 手机端面包屑截断变短 */
            
            .article-title { font-size: 24px; }
            
            /* 手机端 meta 信息竖排 */
            .article-meta {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
            
            .video-placeholder {
                height: 220px; /* 手机端视频占位变矮 */
            }
            
            /* 上下篇切换竖排 */
            .post-navigation {
                flex-direction: column;
                gap: 20px;
            }
            .nav-item {
                max-width: 100%;
            }
            .nav-next {
                flex-direction: row; /* 手机端上一篇下一篇都保持图标在左 */
                text-align: left;
            }
            .nav-next .nav-text {
                align-items: flex-start;
            }
        }
		
		
		
		/*-------------产品列表开始-----------------*/


/* =======================================
           1. 顶部横幅 (Hero Banner)
           ======================================= */
        .page-hero {
            position: relative;
            height: 300px;
			background: url(../images/banner_products.jpg) no-repeat center;
			
            display: flex;
            align-items: center;
        }
        .page-hero::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.45);
        }
        .page-hero .container {
            position: relative;
            z-index: 1;
            color: #fff;
        }
        .page-hero h1 {
            font-size: 40px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        /* 面包屑 */
        .breadcrumbs {
            display: flex;
            align-items: center;
            font-size: 14px;
        }
        .breadcrumbs svg {
            width: 16px; height: 16px; fill: #fff; margin-right: 8px;
        }
        .breadcrumbs a { color: #fff; transition: color 0.3s; }
        .breadcrumbs a:hover { color: #0099e6; }
        .breadcrumbs span { margin: 0 10px; color: #ccc; }
        .breadcrumbs .current { color: #0099e6; }

        /* =======================================
           2. 主体内容区 (分类导航 + 产品网格)
           ======================================= */
        .products-section {
            padding: 60px 0;
            background-color: #fafbfc;
        }

        /* --- 顶部横向分类导航 --- */
        .category-nav {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            margin-bottom: 40px;
        }
        .category-btn {
            display: inline-block;
            padding: 10px 25px;
            background-color: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 30px; /* 药丸形状 */
            font-size: 15px;
            color: #555;
            font-weight: 500;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0,0,0,0.02);
        }
        .category-btn:hover {
            border-color: #0099e6;
            color: #0099e6;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 153, 230, 0.15);
        }
        .category-btn.active {
            background-color: #0099e6;
            border-color: #0099e6;
            color: #fff;
            box-shadow: 0 4px 12px rgba(0, 153, 230, 0.3);
        }

        /* --- 顶部工具栏（排序/展示数量） --- */
        .product-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
            font-size: 14px;
            color: #666;
        }

        /* --- 产品网格 --- */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 电脑端4列 */
            gap: 30px;
            margin-bottom: 50px;
        }
        .product-card {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid #f0f0f0;
            transition: transform 0.3s, box-shadow 0.3s;
            display: flex;
            flex-direction: column;
        }
        .product-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.08);
        }
        .product-img {
            width: 100%;
            height: 240px;
            overflow: hidden;
            background-color: #fff;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .product-img img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            transition: transform 0.4s;
        }
        .product-card:hover .product-img img {
            transform: scale(1.08);
        }
        .product-info {
            padding: 20px;
            text-align: center;
            border-top: 1px solid #f5f5f5;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background-color: #fafafa;
        }
        .product-name {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 限制两行 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.4;
        }
        .product-name a:hover {
            color: #0099e6;
        }
        .product-model {
            font-size: 13px;
            color: #888;
        }

        /* --- 分页器 --- */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
        }
        .page-btn {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            min-width: 40px;
            height: 40px;
            padding: 0 15px;
            background-color: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            font-size: 14px;
            color: #333;
            transition: all 0.3s;
        }
        .page-btn:hover { border-color: #0099e6; color: #0099e6; }
        .page-btn.active { background-color: #0099e6; border-color: #0099e6; color: #fff; }
        .page-btn.disabled { color: #ccc; cursor: not-allowed; border-color: #eee; }

        /* =======================================
           3. 响应式设计 (电脑端与手机端兼容)
           ======================================= */
        @media (max-width: 1200px) {
            .product-grid { grid-template-columns: repeat(3, 1fr); } /* 小电脑/平板横屏 3列 */
        }

        @media (max-width: 992px) {
            .product-grid { grid-template-columns: repeat(2, 1fr); } /* 平板竖屏 2列 */
            .category-nav { gap: 10px; }
            .category-btn { padding: 8px 20px; font-size: 14px; }
        }

        @media (max-width: 768px) {
            .page-hero h1 { font-size: 32px; }
            
            /* 手机端产品单列 */
            .product-grid { grid-template-columns: 1fr; gap: 20px; } 
            .product-img { height: 280px; } /* 手机端图片可以稍大一些 */
            
            .product-toolbar { display: none; } /* 手机端隐藏顶部工具栏，节省空间 */
            
            /* 手机端分类导航可以横向滑动，也可以换行，这里采用换行居中 */
            .category-nav { justify-content: flex-start; overflow-x: auto; padding-bottom: 10px; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
            .category-btn { white-space: nowrap; }
            
            .pagination { flex-wrap: wrap; }
            .page-btn { min-width: 35px; height: 35px; padding: 0 10px; font-size: 13px; }
        }
		
		
		
/*---------------产品详情----------------------*/



  /* =======================================
           1. 顶部横幅 (Hero Banner)
           ======================================= */
        .page-hero {
            position: relative;
            height: 350px;
			background:url(../images/banner_products.jpg) no-repeat center top;
			background-size:cover;       
          
            display: flex;
            align-items: center;
        }
        .page-hero::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.4);
        }
        .page-hero .container {
            position: relative;
            z-index: 1;
            color: #fff;
        }
        .page-hero h1 {
            font-size: 40px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        /* 面包屑 */
        .breadcrumbs {
            display: flex;
            align-items: center;
            font-size: 14px;
        }
        .breadcrumbs svg {
            width: 16px; height: 16px; fill: #fff; margin-right: 8px;
        }
        .breadcrumbs a { color: #fff; transition: color 0.3s; }
        .breadcrumbs a:hover { color: #0099e6; }
        .breadcrumbs span { margin: 0 10px; color: #ccc; }
        .breadcrumbs .current { color: #0099e6; }

        /* =======================================
           2. 分类导航条
           ======================================= */
        .category-nav-wrapper {
            background-color: #f8f9fa;
            border-bottom: 1px solid #eee;
        }
        .category-nav {
            display: flex;
            justify-content: center;
            overflow-x: auto; /* 手机端横向滚动 */
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none; /* 隐藏滚动条 */
        }
        .category-nav::-webkit-scrollbar { display: none; }
        
        .category-btn {
            padding: 18px 30px;
            font-size: 15px;
            font-weight: bold;
            color: #555;
            white-space: nowrap;
            transition: all 0.3s;
            border-bottom: 3px solid transparent;
        }
        .category-btn:hover {
            color: #0099e6;
        }
        .category-btn.active {
            color: #0099e6;
            border-bottom-color: #0099e6;
            background-color: #fff;
        }

        /* =======================================
           3. 主体内容区
           ======================================= */
        .content-section {
            padding: 60px 0;
            background-color: #fafbfc;
        }
        .content-box {
            background: #fff;
            padding: 50px;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.03);
            border: 1px solid #f0f0f0;
        }

        /* 顶部标题 */
        .main-heading {
            text-align: center;
            font-size: 28px;
            font-weight: bold;
            color: #0099e6;
            margin-bottom: 30px;
            text-transform: uppercase;
        }

        /* 主图 */
        .main-image {
            width: 100%;
            max-width: 800px;
            margin: 0 auto 40px;
            display: block;
            border-radius: 8px;
        }

        /* 全局通用文字排版 */
        .rich-text {
            font-size: 14px;
            color: #555;
        }
        .rich-text p {
            margin-bottom: 20px;
            text-align: justify;
        }
        .rich-text h3 {
            font-size: 16px;
            font-weight: bold;
            color: #111;
            margin: 35px 0 15px;
        }
        .rich-text h4 {
            font-size: 15px;
            font-weight: bold;
            color: #333;
            margin: 20px 0 10px;
        }
        .rich-text ul {
            list-style: none;
            padding-left: 20px;
            margin-bottom: 25px;
        }
        .rich-text ul li {
            position: relative;
            margin-bottom: 8px;
        }
        .rich-text ul li::before {
            content: '•';
            position: absolute;
            left: -15px;
            color: #555;
            font-weight: bold;
        }

        /* 表格样式 */
        .table-responsive {
            width: 100%;
            overflow-x: auto; /* 手机端表格横向滚动 */
            margin-top: 30px;
            margin-bottom: 20px;
            border: 1px solid #eee;
            border-radius: 8px;
        }
        .product-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 800px; /* 保证表格在手机上不被挤压变形 */
        }
        .product-table th, 
        .product-table td {
            padding: 15px 20px;
            text-align: left;
            border-bottom: 1px solid #eee;
            font-size: 14px;
            vertical-align: middle;
        }
        .product-table th {
            background-color: #f5f6f8;
            font-weight: bold;
            color: #333;
        }
        .product-table tr:hover {
            background-color: #fafafa;
        }
        .product-table td img {
            max-width: 60px;
            height: auto;
            display: block;
        }

        /* =======================================
           4. 底部 CTA 行动呼吁
           ======================================= */
        .cta-section {
            background-color: #eef5fa;
            padding: 60px 0;
            overflow: hidden;
        }
        .cta-section .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .cta-content {
            max-width: 600px;
        }
        .cta-content h2 {
            font-size: 28px;
            font-weight: bold;
            color: #111;
            margin-bottom: 15px;
        }
        .cta-content p {
            font-size: 16px;
            color: #555;
            margin-bottom: 30px;
        }
        .btn-primary {
            display: inline-block;
            background-color: #0099e6;
            color: #fff;
            padding: 12px 30px;
            border-radius: 30px;
            font-size: 15px;
            font-weight: bold;
            transition: background 0.3s;
        }
        .btn-primary:hover {
            background-color: #007acc;
        }
        .cta-image img {
            max-width: 350px;
            height: auto;
        }

        /* =======================================
           响应式设计 (电脑端与手机端兼容)
           ======================================= */
        @media (max-width: 992px) {
            .cta-section .container {
                flex-direction: column;
                text-align: center;
                gap: 30px;
            }
            .content-box {
                padding: 30px; /* 平板端减小内边距 */
            }
        }

        @media (max-width: 768px) {
            .page-hero h1 { font-size: 32px; }
            
            /* 分类导航靠左排列，方便滑动 */
            .category-nav { justify-content: flex-start; }
            .category-btn { padding: 15px 20px; font-size: 14px; }
            
            .content-box { padding: 20px; }
            .main-heading { font-size: 22px; }
            
            .rich-text h3 { font-size: 15px; }
            .rich-text h4 { font-size: 14px; }
			
			
 
        }
		
@media (max-width: 768px) {
    /* 同时控制四个 Banner 的高度 */
    .page-hero,
    .about-hero,
    .news-hero,
    .page-banner {
        height: 160px !important; /* 把高度调低 */
    }
    
    /* 同时控制四个 Banner 内部图片的自适应和对齐焦点 */
    .page-hero .banner-bg,
    .about-hero .banner-bg,
    .news-hero .banner-bg,
    .page-banner .banner-bg {
        object-fit: cover; /* 保持不变，填满不留白 */
        object-position: 80% center; /* 统一靠右对齐，露出右侧内容 */
    }
}


/* 侧边栏关闭按钮样式 */
.mobile-menu-overlay .close-btn {
    position: absolute;
    top: 20px;      /* 距离顶部距离 */
    right: 20px;    /* 距离右侧距离 */
    width: 40px;
    height: 40px;
    background-color: #f5f5f5; /* 浅灰底色，圆角显示，比较美观 */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s;
    z-index: 1001; /* 确保按钮在最上层 */
}

.mobile-menu-overlay .close-btn:hover {
    background-color: #e0e0e0; /* 鼠标悬浮加深颜色 */
}

/* 如果您用的是 <img> 标签做图标，可以限制一下图片大小 */
.mobile-menu-overlay .close-btn img {
    width: 16px;
    height: 16px;
}

/* =====================================================
   peijian 主题补充样式（新设计稿未覆盖的部件）
   风格与设计稿保持一致：圆角、#0099e6 主色、浅灰底
   ===================================================== */

/* 页脚栏目中的真实链接（设计稿页脚联系方式为纯文本，导航/产品列为链接） */
.footer-col a {
    color: inherit;
    text-decoration: none;
}
.footer-col a:hover {
    text-decoration: underline;
}

/* 后台未配置的链接占位直接隐藏 */
.is-empty {
    display: none !important;
}

/* 联系页 Google 地图容器（company-map.js 渲染目标） */
.map-container #company-google-map,
#company-google-map.company-google-map {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border-radius: 12px;
    overflow: hidden;
}

/* 产品卡片可点击包裹层（设计稿卡片无链接，数据驱动后需跳转详情） */
.product-item > a,
.product-card .product-img a {
    display: block;
    color: inherit;
    text-decoration: none;
}
.product-item > a:hover,
.product-card .product-img a:hover {
    opacity: 0.92;
}

/* 联系表单提示信息（提交成功/失败回显） */
.form-notice {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 18px;
}
.form-notice.form-success {
    background-color: #e8f5e9;
    color: #1b5e20;
    border: 1px solid #a5d6a7;
}
.form-notice.form-error {
    background-color: #fdecea;
    color: #b71c1c;
    border: 1px solid #f5c6cb;
}

/* 验证码可点击刷新 */
.captcha-img.js-captcha {
    cursor: pointer;
    user-select: none;
    transition: border-color 0.2s ease;
}
.captcha-img.js-captcha:hover {
    border-color: #0099e6;
}

/* 产品详情画廊 */
.product-gallery {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.gallery-main {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    background-color: #fff;
}
.gallery-main img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: contain;
}
.gallery-thumbs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.gallery-thumbs li {
    width: 74px;
    height: 74px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background-color: #fff;
}
.gallery-thumbs li.active {
    border-color: #0099e6;
}
.gallery-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 隐私政策弹窗 */
.privacy-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.privacy-modal[hidden] {
    display: none;
}
.privacy-modal-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.55);
}
.privacy-modal-dialog {
    position: relative;
    background-color: #fff;
    border-radius: 12px;
    max-width: 720px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.privacy-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #e0e0e0;
}
.privacy-modal-header h2 {
    margin: 0;
    font-size: 20px;
    color: #1a1a2e;
}
.privacy-modal-close {
    border: none;
    background: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #555;
}
.privacy-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.8;
    color: #333;
}
body.privacy-modal-open {
    overflow: hidden;
}

/* 产品详情页两栏（画廊 + 摘要询价） */
.product-detail-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 30px;
}
.product-detail-info p {
    font-size: 15px;
    line-height: 1.9;
    color: #444;
    margin-bottom: 22px;
}
.product-detail-info .btn-primary,
.product-detail-info .btn-outline {
    display: inline-block;
    margin-right: 12px;
    margin-bottom: 10px;
}
@media (max-width: 860px) {
    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* 列表空状态与搜索行 */
.list-empty {
    text-align: center;
    padding: 40px 0;
    color: #666;
    font-size: 15px;
}
.search-form {
    margin-bottom: 26px;
}
.search-form-row {
    display: flex;
    gap: 12px;
    max-width: 560px;
}
.search-form-row input[type="search"] {
    flex: 1;
    height: 46px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 14px;
    outline: none;
}
.search-form-row input[type="search"]:focus {
    border-color: #0099e6;
}

/* 显式白底：设计稿默认浅色画布，避免浏览器深色模式把透明区块渲染成黑底 */
body {
    background-color: #fff;
}

/* 禁用 WebView 强制深色自动反色，锁定设计稿的浅色画布 */
:root {
    color-scheme: light;
}
html {
    background-color: #fff;
}