/* =========================================
1. 全局变量定义
========================================= */
		:root {
			--primary-green: #2E7D32;
			--primary-green-hover: #388E3C;
			--light-green: #28a745;
			--dark-text: #333333;
			--black-text: #000000;
			--white: #ffffff;
			--gray-bg: #f9f9f9;
			--footer-bg: #f1f1f1;
			--footer-text: #555555;
			--nav-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
			--border-color: #e0e0e0;
			--component-padding-y: 6px;
		}

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			font-family: 'Arial', 'Microsoft YaHei', sans-serif;
			line-height: 1.5;
			color: var(--dark-text);
			background-color: var(--white);
			display: flex;
			flex-direction: column;
			min-height: 100vh;
		}

		a {
			text-decoration: none;
			color: inherit;
		}

		ul {
			list-style: none;
		}

		img {
			max-width: 100%;
			display: block;
		}

		.container {
			max-width: 1220px;
			margin: 0 auto;
			padding: 0 1.25rem;
			width: 100%;
		}

		/* =========================================
2. 导航栏
========================================= */
		nav {
			background: var(--white);
			padding: 1rem 0;
			position: fixed;
			width: 100%;
			top: 0;
			z-index: 1000;
			box-shadow: var(--nav-shadow);
			transition: box-shadow 0.3s ease;
		}

		.nav-container {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 50px;
			position: relative;
			/* 关键：作为绝对定位子元素的参考父级 */
		}

		.nav-left {
			display: flex;
			align-items: center;
			flex: 0 0 auto;
			z-index: 1002;
		}

		.logo-wrapper {
			display: flex;
			align-items: center;
		}

		.logo-icon {
			height: 48px;
			width: auto;
		}

		/* 导航中心区域 (桌面端显示) */
		.nav-center {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			margin: 0 1.25rem;
		}

		.nav-links {
			display: flex;
			gap: 1.875rem;
		}

		.nav-links a {
			font-weight: 500;
			color: var(--dark-text);
			transition: color 0.3s ease;
			position: relative;
			font-size: 16px;
		}

		.nav-links a:hover,
		.nav-links a.active {
			color: var(--primary-green);
		}

		.nav-links a::after {
			content: '';
			position: absolute;
			width: 0;
			height: 2px;
			bottom: -5px;
			left: 0;
			background-color: var(--primary-green);
			transition: width 0.3s ease;
		}

		.nav-links a:hover::after {
			width: 100%;
		}

		/* 导航右侧区域 */
		.nav-right {
			display: flex;
			align-items: center;
			gap: 1.25rem;
			flex: 0 0 auto;
			z-index: 1002;
		}

		/* 联系按钮 (桌面端样式) */
		.contact-btn {
			background-color: #41a863;
			color: var(--black-text);
			font-weight: 400;
			font-size: 16px;
			padding: var(--component-padding-y) 1rem;
			border: 1px solid transparent;
			white-space: nowrap;
			transition: all 0.3s ease;
			border-radius: 2px;
			line-height: 1.25;
			display: inline-flex;
			align-items: center;
		}

		.contact-btn:hover {
			background-color: var(--primary-green-hover);
			transform: translateY(-1px);
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
		}

		/* 语言切换组件 */
		.lang-custom-select {
			position: relative;
			width: fit-content;
			user-select: none;
		}

		.lang-trigger {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			background: var(--gray-bg);
			padding: var(--component-padding-y) 10px;
			border-radius: 6px;
			border: 1px solid var(--border-color);
			cursor: pointer;
			transition: all 0.3s ease;
			min-width: 90px;
			justify-content: space-between;
			height: auto;
			box-sizing: border-box;
		}

		.lang-trigger:hover {
			border-color: var(--primary-green);
			background-color: #f0f0f0;
		}

		.lang-trigger-content {
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.lang-flag {
			width: 20px;
			height: 14px;
			object-fit: cover;
			border-radius: 2px;
			flex-shrink: 0;
			background-color: #eee;
		}

		//切换语言文字
		.lang-text {
			font-size: 16px;
			font-weight: 500;
			color: var(--dark-text);
			white-space: nowrap;
		}

		.lang-arrow {
			width: 10px;
			height: 10px;
			fill: var(--dark-text);
			transition: transform 0.3s ease;
			flex-shrink: 0;
		}

		.lang-custom-select.active .lang-arrow {
			transform: rotate(180deg);
		}

		.lang-options {
			position: absolute;
			top: calc(100% + 8px);
			right: 0;
			background: var(--white);
			border: 1px solid var(--border-color);
			border-radius: 6px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
			width: 100%;
			padding: 6px 0;
			opacity: 0;
			visibility: hidden;
			transform: translateY(-10px);
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			z-index: 1003;
		}

		.lang-custom-select.active .lang-options {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}

		.lang-option-item {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 8px 12px;
			cursor: pointer;
			transition: background 0.2s ease;
		}

		.lang-option-item:hover {
			background-color: var(--gray-bg);
			color: var(--primary-green);
		}

		/* --- 移动端汉堡菜单按钮 --- */
		.mobile-menu-btn {
			display: none;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 30px;
			height: 30px;
			background: transparent;
			border: none;
			cursor: pointer;
			padding: 0;
			margin-left: 10px;
		}

		.mobile-menu-btn span {
			display: block;
			width: 24px;
			height: 2px;
			background-color: var(--dark-text);
			margin: 3px 0;
			transition: all 0.3s ease;
			border-radius: 2px;
		}

		.mobile-menu-btn.active span:nth-child(1) {
			transform: translateY(8px) rotate(45deg);
		}

		.mobile-menu-btn.active span:nth-child(2) {
			opacity: 0;
		}

		.mobile-menu-btn.active span:nth-child(3) {
			transform: translateY(-8px) rotate(-45deg);
		}

		/* --- 移动端下拉菜单容器 (已修改为右侧 35% 宽度) --- */
		.mobile-nav-dropdown {
			display: none;
			position: absolute;
			top: 100%;
			left: auto;
			/* 取消左对齐 */
			right: 0;
			/* 靠右对齐 */
			width: 30%;
			/* 宽度设为 35% */
			min-width: 250px;
			/* 最小宽度，防止在极小屏幕上过窄 */
			background-color: var(--white);
			box-shadow: -4px 10px 20px rgba(0, 0, 0, 0.15);
			/* 左侧阴影，增强立体感 */
			padding: 20px 0;
			flex-direction: column;
			align-items: center;
			/* 内容靠右对齐 */
			gap: 0;
			z-index: 1001;
			border-top: 1px solid var(--border-color);
			border-left: 1px solid var(--border-color);
			/* 左侧边框 */
			border-bottom-left-radius: 8px;
			/* 左下角圆角 */
			animation: slideDownRight 0.3s ease-out;
			overflow: hidden;
		}

		@keyframes slideDownRight {
			from {
				opacity: 0;
				transform: translateY(-10px);
			}

			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.mobile-nav-dropdown.show {
			display: flex;
		}

		.mobile-nav-dropdown a {
			font-size: 16px;
			font-weight: 500;
			color: var(--dark-text);
			padding: 12px 20px;
			width: 100%;
			text-align: center;
			/* 文字右对齐 */
			border-bottom: 1px solid #f0f0f0;
			transition: background 0.2s, color 0.2s;
		}

		.mobile-nav-dropdown a:last-child {
			border-bottom: none;
		}

		.mobile-nav-dropdown a:hover,
		.mobile-nav-dropdown a.active {
			color: var(--primary-green);
			background-color: #f9f9f9;
		}

		/* 移动端菜单内的联系按钮样式 - 优化版 */
		.mobile-contact-btn {
			background-color: white;
			color: black !important;
			padding: 12px 20px;
			margin-top: 10px;
			/* 建议改为 block 或 width: 100% 让按钮在移动端菜单中更整齐，方便点击 */
			display: block;
			width: 100%;
			box-sizing: border-box;
			/* 确保 padding 不会撑破宽度 */
			border: none;
			text-align: right;
			font-weight: 500;
			/* 稍微加粗字体 */
			/* 添加过渡效果，让悬浮变色更平滑 */
			transition: all 0.3s ease;
			border-radius: 4px;
			/* 可选：添加一点圆角 */
		}

		/* 修复关键点：去掉中间的空格 */
		.mobile-contact-btn:hover {
			background-color: var(--primary-green-hover) !important;
			/* 添加 !important 确保覆盖 */
			color: white !important;
			/* 悬浮时文字变白，对比度更好 */
			/* transform: translateX(-5px); /* 可选：悬浮时微微向左移动，增加交互感 */
			*/
		}

		/* =========================================
3. 首页主要内容
========================================= */
		main {
			flex: 1;
			padding-top: 80px;
			background-color: var(--white);
			display: flex;
			flex-direction: column;
		}

		.home-section {
			width: 100%;
			padding: 60px 0;
			border-bottom: 1px solid var(--border-color);
		}

		.home-section:last-child {
			border-bottom: none;
		}

		/* --- 修改点：板块标题样式 --- */
		.section-title {
			text-align: left;
			/* 改为居左 */
			font-size: 24px;
			margin-bottom: 40px;
			color: var(--dark-text);
			position: relative;
		}

		/* 移除绿色横线伪元素 */
		.section-title::after {
			content: none;
			display: none;
		}

		/* --- 盒子1：顶部大图 (原轮播图区域) --- */
		#section-slider {
			padding: 0;
			border-bottom: 1px solid var(--border-color);
			position: relative;
			background: #000;
			/* 移除固定高度，让图片自适应 */
			height: auto;
		}

		/* 新增：顶部大图样式 */
		.top-banner-img {
			width: 100%;
			height: auto;
			display: block;
			object-fit: cover;
			/* 保持比例填充，如需完全自适应可去掉此行或改为 contain */
		}

		/* --- 盒子2：产品包含 --- */
		#section-2 {
			background-color: var(--white);
		}

		.product-category-box {
			background-color: var(--white);
			border: 1px solid var(--border-color);
			border-radius: 8px;
			padding: 25px;
			margin-bottom: 30px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
			display: flex;
			flex-direction: column;
			gap: 20px;
		}

		.product-category-box:last-child {
			margin-bottom: 0;
		}

		.product-header {
			display: flex;
			align-items: center;
			gap: 15px;
			border-bottom: 1px solid #eee;
			padding-bottom: 15px;
		}

		.product-title-marker {
			width: 6px;
			height: 24px;
			background-color: var(--primary-green);
			border-radius: 2px;
			flex-shrink: 0;
		}

		.product-title {
			font-size: 20px;
			font-weight: 600;
			color: var(--dark-text);
		}

		.product-images-container {
			display: flex;
			gap: 15px;
			flex-wrap: wrap;
			align-items: flex-start;
			justify-content: flex-start;
		}

		.product-img-wrapper {
			height: 108px;
			width: auto;
			display: inline-flex;
			flex: 0 0 auto;
			border-radius: 6px;
			overflow: hidden;
			border: 1px solid #eee;
			background-color: #fafafa;
			align-items: center;
			justify-content: center;
		}

		.product-img-wrapper img {
			height: 100%;
			width: auto;
			object-fit: contain;
			display: block;
			transition: transform 0.3s ease;
		}

		.product-img-wrapper:hover img {
			transform: scale(1.05);
		}

		/* --- 盒子3：质量控制 --- */
		#section-3 {
			background-color: var(--gray-bg);
		}

		.quality-control-row {
			background-color: var(--white);
			border: 1px solid var(--border-color);
			border-radius: 8px;
			padding: 0;
			margin-bottom: 30px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
			display: flex;
			flex-direction: row;
			overflow: hidden;
			min-height: 300px;
		}

		.quality-control-row:last-child {
			margin-bottom: 0;
		}

		.qc-left {
			flex: 1;
			padding: 40px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			background-color: var(--white);
			gap: 20px;
		}

		.qc-right {
			flex: 1;
			background-color: #f4f4f4;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			position: relative;
		}

		.qc-title {
			font-size: 20px;
			font-weight: 700;
			color: var(--black-text);
			margin: 0;
		}

		.qc-text {
			font-size: 16px;
			color: var(--black-text);
			line-height: 1.5;
			text-align: justify;
			margin: 0;
		}

		.qc-btn {
			display: inline-block;
			background-color: var(--light-green);
			color: #ffffff;
			font-weight: 600;
			font-size: 16px;
			padding: 10px 24px;
			border-radius: 4px;
			transition: all 0.3s ease;
			border: 1px solid transparent;
			margin-top: 10px;
			cursor: pointer;
		}

		.qc-btn:hover {
			background-color: #218838;
			transform: translateY(-2px);
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			color: #ffffff;
		}

		.qc-right img {
			width: 100%;
			height: 100%;
			object-fit: contain;
			display: block;
			transition: transform 0.5s ease;
		}

		.quality-control-row:hover .qc-right img {
			transform: scale(1.03);
		}

		/* --- 盒子4：行业涉及 --- */
		#section-4 {
			background-color: var(--white);
		}

		.industry-big-box {
			display: flex;
			gap: 20px;
			margin-bottom: 30px;
			width: 100%;
		}

		.industry-big-box:last-child {
			margin-bottom: 0;
		}

		.industry-small-box {
			flex: 1;
			background-color: var(--white);
			border: 1px solid var(--border-color);
			border-radius: 8px;
			overflow: hidden;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
			transition: transform 0.3s ease, box-shadow 0.3s ease;
			display: flex;
			flex-direction: column;
		}

		.industry-small-box:hover {
			transform: translateY(-5px);
			box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
		}

		.industry-text-part {
			align-items: center;
			justify-content: center;
			text-align: left;
			padding: 15px;
		}

		.industry-text-part h4 {
			font-size: 16px;
			font-weight: 600;
			color: var(--dark-text);
			margin: 0;
		}

		.industry-img-part {
			flex: 1.5;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			overflow: hidden;
			width: 100%;
			height: 100%;
		}

		.industry-img-part img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.3s ease;
			display: block;
		}

		.industry-small-box:hover .industry-img-part img {
			transform: scale(1.1);
		}

		/* --- 盒子5：关于我们 --- */
		#section-5 {
			background-color: var(--gray-bg);
		}

		.about-us-container {
			background-color: var(--white);
			border: 1px solid var(--border-color);
			border-radius: 8px;
			padding: 0;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
			display: flex;
			flex-direction: row;
			overflow: hidden;
			min-height: 400px;
			margin: 0 20px;
		}

		.about-left {
			flex: 1.5;
			background-color: #f4f4f4;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			position: relative;
		}

		.about-right {
			flex: 1;
			padding: 40px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			background-color: var(--white);
			gap: 20px;
		}

		.about-title {
			font-size: 20px;
			font-weight: 700;
			color: var(--black-text);
			margin: 0;
		}

		.about-text {
			font-size: 16px;
			color: var(--black-text);
			line-height: 1.5;
			text-align: justify;
			margin: 0;
		}

		.about-btn {
			display: inline-block;
			background-color: var(--light-green);
			color: #ffffff;
			font-weight: 600;
			font-size: 16px;
			padding: 10px 24px;
			border-radius: 4px;
			transition: all 0.3s ease;
			border: 1px solid transparent;
			margin-top: 10px;
			cursor: pointer;
		}

		.about-btn:hover {
			background-color: #218838;
			transform: translateY(-2px);
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			color: #ffffff;
		}

		.about-left img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
			transition: transform 0.5s ease;
		}

		.about-us-container:hover .about-left img {
			transform: scale(1.03);
		}

		/* =========================================
盒子6：核心优势
========================================= */
		#section-6 {
			background-color: var(--white);
		}

		.advantage-row {
			display: flex;
			justify-content: space-between;
			gap: 30px;
			width: 100%;
		}

		.advantage-item {
			flex: 1;
			background-color: var(--white);
			border: 1px solid var(--border-color);
			border-radius: 8px;
			overflow: hidden;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
			transition: transform 0.3s ease, box-shadow 0.3s ease;
			display: flex;
			flex-direction: column;
		}

		.advantage-item:hover {
			transform: translateY(-5px);
			box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
		}

		.advantage-img-box {
			width: 100%;
			height: auto;
			background-color: #f4f4f4;
			display: block;
			overflow: hidden;
			border-bottom: 1px solid #eee;
			line-height: 0;
		}

		.advantage-img-box img {
			width: 100%;
			height: auto;
			object-fit: contain;
			display: block;
		}

		.advantage-text-box {
			padding: 25px;
			display: flex;
			flex-direction: column;
			flex: 1;
		}

		.advantage-title {
			font-size: 20px;
			font-weight: 700;
			color: #000000;
			margin-bottom: 15px;
			display: block;
		}

		.advantage-title::before {
			content: none;
			display: none;
		}

		.advantage-desc {
			font-size: 0.95rem;
			color: #000000;
			line-height: 1.5;
			text-align: justify;
			margin: 0;
		}

		/* =========================================
4. 页脚
========================================= */
		footer {
			margin-top: auto;
			background-color: var(--footer-bg);
			color: var(--footer-text);
			font-size: 16px;
			border-top: 1px solid var(--border-color);
		}

		.footer-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 40px;
			padding: 30px 0;
		}

		.footer-col1 {
			flex: 1.5;
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

		.footer-col2 {
			flex: 2.0;
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

		.footer-col3 {
			flex: 0.3;
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

		.footer-logo-wrapper {
			display: flex;
			align-items: center;
			height: 100%;
			padding-top: 5px;
		}

		.footer-logo {
			height: 80px;
			width: auto;
		}

		.footer-contact-info {
			display: flex;
			flex-direction: column;
			gap: 8px;
			text-align: left;
			align-items: flex-start;
			width: 100%;
		}

		.contact-title {
			font-weight: 700;
			color: var(--dark-text);
			font-size: 20px;
			margin-bottom: 4px;
			display: block;
		}

		.contact-item {
			align-items: center;
			justify-content: flex-start;
			gap: 8px;
			color: var(--footer-text);
			transition: color 0.3s;
			font-size: 16px;
			width: 100%;
                                               
		}

		.contact-item:hover {}

		.footer-qr-wrapper {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: 5px;
		}

		.footer-qr-img {
			width: 80px;
			height: 80px;
			object-fit: contain;
			border: 1px solid #ddd;
			padding: 4px;
			background: #fff;
			border-radius: 4px;
		}

		/* 页脚底部版权条样式 */
		.footer-copyright {
			background-color: #ffffff;
			/* 背景色白色 */
			font-size: 14px;
			/* 字号 14px */
			color: #666666;
			/* 文字颜色深灰 */
			text-align: center;
			/* 文字居中 */
			padding: 15px 0;
			/* 上下内边距 */
			margin-top: 0;
			/* 紧贴上方内容 */
			border-top: 1px solid #e0e0e0;
			/* 顶部细边框 */
			width: 100%;
			/* 占满宽度 */
		}

		/* 响应式适配：确保移动端也居中 */
		@media (max-width: 768px) {
			.footer-copyright {
				font-size: 14px;
				padding: 12px 0;
			}
		}

		/* =========================================
响应式适配
========================================= */
		/* 断点设置为 1024px */
		@media (max-width: 1024px) {

			/* 隐藏桌面端导航中心 */
			.nav-center {
				display: none;
			}

			/* 隐藏桌面端联系按钮 */
			.contact-btn {
				display: none;
			}

			/* 显示汉堡按钮 */
			.mobile-menu-btn {
				display: flex;
			}

			/* 调整右侧区域，移除多余间距 */
			.nav-right {
				gap: 10px;
			}

			/* 轮播图高度调整 (此处已改为大图，无需固定高度，但可保留以防万一) */
			/* .slider-container { height: 300px; } */

			.home-section {
				padding: 40px 0;
			}

			/* 质量控制模块调整 */
			.quality-control-row {
				flex-direction: column;
				min-height: auto;
			}

			.qc-left {
				padding: 25px;
				order: 2;
			}

			.qc-right {
				height: 250px;
				order: 1;
			}

			/* 行业模块调整 */
			.industry-big-box {
				flex-direction: column;
				gap: 15px;
			}

			.industry-small-box {
				flex-direction: row;
				height: 120px;
			}

			.industry-text-part {
				flex: 0 0 100px;
				border-bottom: none;
				border-right: 1px solid #eee;
				padding: 10px;
				align-items: flex-start;
				justify-content: flex-start;
			}

			.industry-text-part h4 {
				font-size: 16px;
				line-height: 1.25;
			}

			.industry-img-part {
				flex: 1;
				padding: 0;
			}

			.industry-img-part img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			/* 关于我们模块调整 */
			.about-us-container {
				flex-direction: column;
				min-height: auto;
				margin: 0;
			}

			.about-left {
				height: 250px;
				order: 1;
				flex: none;
				width: 100%;
			}

			.about-right {
				padding: 25px;
				order: 2;
				flex: none;
				width: 100%;
			}

			/* 核心优势模块调整 */
			.advantage-row {
				flex-direction: column;
				gap: 20px;
			}

			.advantage-img-box {
				max-height: 300px;
			}

			.advantage-img-box img {
				height: auto;
				max-height: 300px;
			}

			/* 页脚调整 */
			.footer-content {
				flex-direction: column;
				align-items: center;
				text-align: center;
				gap: 20px;
			}

			.footer-col {
				align-items: center;
			}

			.footer-logo-wrapper {
				justify-content: center;
				padding-top: 0;
			}

			.footer-contact-info {
				align-items: center;
				text-align: center;
			}

			.contact-item {
				justify-content: center;
			}

			.footer-qr-wrapper {
				align-items: center;
			}
		}

		/* 小屏幕额外调整 */
		@media (max-width: 480px) {

			/* 在小屏幕上，如果 35% 太窄，可以稍微调整最小宽度或百分比，这里保持 35% 但确保最小宽度有效 */
			.mobile-nav-dropdown {
				width: 60%;
				/* 超小屏幕下适当增加比例，或者保持 35% 依靠 min-width */
			}

			.industry-small-box {
				flex-direction: column;
				height: auto;
			}

			.industry-text-part {
				border-bottom: 1px solid #eee;
				border-right: none;
				padding: 15px;
				width: 100%;
			}

			.industry-img-part {
				padding: 0;
				height: 200px;
				width: 100%;
			}

			.industry-img-part img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.advantage-img-box {
				max-height: 200px;
			}
		}
