/* 移动端样式修复 */

/* PC端导航栏样式 */
@media screen and (min-width: 961px) {
	header:not(.scrolled-past-banner) {
		background-color: rgba(0, 0, 0, 0.4) !important; /* PC端导航栏透明度 */
		transition: all 0.3s ease !important; /* 添加过渡效果 */
		height: 80px !important; /* 设置导航栏高度为100px */
	}

	/* 滚动超过横幅区域后的样式 */
	header.scrolled-past-banner {
		background-color: #ffffff !important;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
		height: 80px !important; /* 设置导航栏高度为100px */
	}

	header.scrolled-past-banner .menu a {
		color: #333333 !important;
	}

	header.scrolled-past-banner .menu a:hover,
	header.scrolled-past-banner .menu a.active {
		color: #333333 !important;
		border-bottom-color: #333333 !important;
	}

	header.scrolled-past-banner .language-switch a {
		color: #333333 !important;
	}

	header.scrolled-past-banner .menu-toggle i {
		color: #333333 !important;
	}

	/* PC端吸顶效果的类，将通过JavaScript添加 */
	header.sticky {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height: 100px !important; /* 设置导航栏高度为100px */
		z-index: 9999 !important; /* 增加z-index确保在所有元素之上 */
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
	}

	/* Banner图片调整 */
	.banner-image {
		width: 100% !important;
		height: 100% !important;
		max-height: none !important; /* 移除高度限制 */
		object-fit: cover !important; /* 确保图片完整显示 */
	}
}

/* 移动端通用样式 - 适用于所有移动设备 */
@media screen and (max-width: 960px) {
	/* 确保移动端菜单按钮始终可见 */
	header .menu-toggle {
		display: block !important;
		cursor: pointer !important;
		z-index: 100000 !important; /* 确保在最顶层 */
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
	}

	header .menu-toggle i {
		font-size: 24px !important;
		color: #333 !important; /* 默认颜色 */
	}

	/* 移动端导航栏基本样式 */
	header:not(.scrolled-past-banner) {
		background-color: rgba(255, 255, 255, 0.95) !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height: 60px !important; /* 设置导航栏高度为100px */
		z-index: 99999 !important;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		padding: 5px 0 !important;
	}

	/* 移动端滚动超过横幅区域后的样式 */
	header.scrolled-past-banner {
		background-color: #ffffff !important;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height: 60px !important; /* 设置导航栏高度为100px */
		z-index: 99999 !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		padding: 5px 0 !important;
	}

	header.scrolled-past-banner .menu-toggle i {
		color: #333333 !important;
	}

	/* 容器通用样式 */
	header .container {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		width: 100% !important;
		height: 60px !important; /* 设置容器高度为100px */
		visibility: visible !important;
		opacity: 1 !important;
	}

	/* Logo通用样式 */
	.logo {
		display: flex !important;
		align-items: center !important;
		/* justify-content: center !important; */
		visibility: visible !important;
		opacity: 1 !important;
	}

	/* 隐藏导航菜单，显示汉堡按钮 */
	.nav-wrapper {
		display: none;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height: 100vh !important;
		background-color: rgba(0, 0, 0, 0.9) !important;
		z-index: 9997 !important;
		padding-top: 60px !important;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}

	/* 菜单展开样式 - 增强可见性 */
	.nav-wrapper.active {
		display: block !important;
		position: fixed !important; /* 更改为fixed定位确保覆盖整个屏幕 */
		top: 0 !important; /* 从0开始覆盖整个屏幕 */
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height: 100vh !important; /* 设置为100vh覆盖整个视口高度 */
		background-color: rgba(0, 0, 0, 0.9) !important; /* 更深的背景色 */
		z-index: 9997 !important; /* 确保在导航栏下方，但在所有其他内容上方 */
		overflow-y: auto !important; /* 允许滚动 */
		animation: fadeIn 0.3s ease-in-out !important; /* 添加淡入动画 */
		padding-top: 60px !important; /* 为顶部导航栏留出空间 */
		opacity: 1 !important;
		visibility: visible !important;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	/* 移动端菜单样式 - 更美观的布局 */
	.menu {
		display: none !important;
		position: relative !important;
		top: 0 !important;
		left: 0 !important;
		flex-direction: column !important;
		width: 100% !important;
		background-color: transparent !important;
		padding: 0 !important;
		box-shadow: none !important;
		transition: none !important;
	}

	.menu.active {
		display: flex !important;
		left: 0 !important;
	}

	.menu li {
		width: 100% !important;
		text-align: center !important;
		margin: 0 !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
	}

	.menu li:last-child {
		border-bottom: none !important;
	}

	.menu a {
		display: block !important;
		padding: 15px !important;
		color: #fff !important;
		font-size: 30px !important; /* 与主样式保持一致 */
		border-bottom: none !important;
		transition: all 0.3s ease !important;
	}

	.menu a:hover,
	.menu a.active {
		background-color: rgba(255, 255, 255, 0.15) !important;
		border-bottom: none !important;
		transform: none !important;
	}

	/* 汉堡菜单按钮样式 */
	.menu-toggle {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		cursor: pointer !important;
		transition: all 0.3s ease !important;
		padding: 5px 10px !important;
		border-radius: 0 !important; /* 移除圆角 */
		background-color: transparent !important; /* 移除背景色 */
	}

	.menu-toggle:hover {
		background-color: transparent !important; /* 移除悬停时的背景色 */
	}

	.menu-toggle i {
		color: #333 !important;
		display: block !important;
		visibility: visible !important;
		font-size: 24px !important;
		transition: all 0.3s ease !important;
	}

	/* 自定义关闭按钮样式 */
	.menu-toggle i.fa-times {
		color: #333 !important;
		font-size: 26px !important; /* 略微调大一点 */
	}

	/* 移动端点击展开菜单后的背景色 */
	header.menu-open {
		background-color: #f5f5f5 !important; /* 当菜单打开时，header背景色设为浅灰色 */
	}

	/* 主内容区域通用样式 */
	main {
		padding-top: 120px !important; /* 增加顶部内边距，为固定导航栏留出空间（导航栏高度100px + 额外空间20px） */
		overflow-x: hidden !important;
		width: 100% !important;
	}

	/* 移动端横幅通用样式 */
	.banner {
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		overflow: hidden !important;
	}

	.banner-image {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		display: block !important;
		height: 100% !important;
		object-fit: cover !important;
	}

	/* 解决滚动问题 */
	html,
	body {
		overflow-x: hidden !important;
		width: 100% !important;
		min-height: 100% !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}
}

/* 轮播区域文字响应式样式 */
@media screen and (max-width: 960px) {
	/* Banner区域文字叠加层样式调整 */
	.banner-text-overlay {
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		text-align: center !important;
		width: 90% !important; /* 控制宽度 */
		z-index: 10 !important;
	}

	/* 英文标题 - 基础样式，具体大小将通过JS动态计算 */
	.banner-text-en {
		color: #ffffff !important;
		font-weight: bold !important;
		margin-bottom: 10px !important;
		/* 初始字体大小，将被JS覆盖 */
		font-size: 18px !important;
		line-height: 1.2 !important;
		text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7) !important;
		white-space: normal !important; /* 允许文字换行 */
		overflow: visible !important; /* 修改为可见，不截断 */
		text-overflow: clip !important; /* 不使用省略号 */
		width: 100% !important; /* 占满容器宽度 */
	}

	/* 中文标题 - 基础样式，具体大小将通过JS动态计算 */
	.banner-text-cn {
		color: #ffffff !important;
		font-weight: bold !important;
		/* 初始字体大小，将被JS覆盖 */
		font-size: 22px !important;
		line-height: 1.3 !important;
		text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7) !important;
		white-space: nowrap !important; /* 中文保持在一行内显示 */
		overflow: visible !important; /* 修改为可见，不截断 */
		text-overflow: clip !important; /* 不使用省略号 */
		width: 100% !important; /* 占满容器宽度 */
	}
}

/* 小屏幕手机特定样式 */
@media screen and (max-width: 576px) {
	.banner-text-overlay {
		width: 95% !important;
	}
}

/* 关于我们标题动态样式 */
@media screen and (max-width: 960px) {
	/* 关于我们内容区域 - 移除左侧内边距 */
	.about-content {
		padding-left: 0 !important; /* 移除左侧内边距 */
		padding-right: 0 !important; /* 移除右侧内边距 */
		max-width: 100% !important; /* 在移动端占满宽度 */
	}

	/* 关于我们标题 */
	.about-us .section-title {
		text-align: left !important; /* 居左对齐 */
		margin-left: 0 !important;
		font-size: 20px !important; /* 初始字体大小，将被JS覆盖 */
	}

	/* 副标题 */
	.about-us .about-slogan {
		text-align: left !important; /* 居左对齐 */
		margin-left: 0 !important;
		font-size: 16px !important; /* 初始字体大小，将被JS覆盖 */
	}

	/* 公司名称 */
	.about-us .company-title {
		text-align: left !important; /* 居左对齐 */
		margin-left: 0 !important;
		font-size: 18px !important; /* 初始字体大小，将被JS覆盖 */
	}

	/* 容器样式调整 */
	.about-container {
		padding: 0 15px !important; /* 保留少量内边距 */
	}
}

/* 产品中心样式调整 - 移动端显示文字 */
@media screen and (max-width: 960px) {
	/* 确保产品叠加层在移动端始终可见 */
	.product-overlay {
		opacity: 1 !important; /* 始终显示文字内容 */
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7)) !important; /* 加深背景渐变 */
		justify-content: center !important; /* 垂直居中 */
		align-items: center !important; /* 水平居中 */
		text-align: center !important; /* 文本居中 */
	}

	/* 调整文字大小使其更适合移动端阅读 */
	.product-overlay .product-title {
		font-size: 20px !important;
		text-align: center !important;
		margin-top: 0 !important; /* 移除PC端的顶部边距 */
	}

	.product-overlay .product-desc {
		font-size: 12px !important;
		text-align: center !important;
		max-width: 90% !important; /* 控制宽度，确保在小屏幕上更好地居中 */
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* "查看更多"按钮样式调整 */
	.product-overlay .more-btn {
		padding: 6px 18px !important;
		font-size: 12px !important;
		margin-top: 10px !important; /* 添加按钮顶部边距 */
		align-self: center !important; /* 按钮居中显示 */
		margin-bottom: 0 !important; /* 移除PC端的底部边距 */
	}

	/* 调整产品图片容器 */
	.product-image {
		height: 220px !important; /* 控制高度，使其在移动端更紧凑 */
	}
}

/* 荣誉资质部分移动端样式调整 */
@media screen and (max-width: 960px) {
	/* 荣誉资质图片容器高度动态调整 */
	.certificate-image {
		height: auto !important; /* 取消固定高度，改为自适应 */
		min-height: 200px !important; /* 最小高度 */
		max-height: 250px !important; /* 最大高度限制 */
	}

	/* 荣誉资质卡片样式调整 */
	.certificate-card {
		margin-bottom: 0 !important;
		height: auto !important; /* 取消固定高度，改为自适应内容高度 */
		max-height: 350px !important; /* 设置最大高度 */
	}

	/* 调整图片显示方式 */
	.certificate-image img {
		object-fit: contain !important; /* 确保图片完整显示不裁剪 */
	}

	/* 内容部分样式优化 */
	.certificate-content {
		padding: 15px !important;
		padding-bottom: 10px !important; /* 减少底部内边距 */
	}

	.certificate-content h3 {
		font-size: 18px !important;
		margin-bottom: 5px !important;
	}

	.certificate-content p {
		font-size: 14px !important;
		line-height: 1.4 !important;
		margin-bottom: 0 !important; /* 移除底部边距 */
	}
}

/* 平板特定样式 */
@media screen and (min-width: 577px) and (max-width: 960px) {
	.logo {
		width: auto !important;
		min-width: auto !important;
		flex: 0 0 auto !important;
	}

	.logo-img-container {
		margin-left: 0 !important;
		max-height: 50px !important;
	}

	.logo img {
		max-height: 50px !important;
	}

	.menu-toggle {
		width: 30% !important;
		text-align: right !important;
		padding-right: 15px !important;
		font-size: 24px !important;
	}

	.menu a {
		font-size: 22px !important; /* 平板设备上的字体大小 */
	}

	header .container {
		padding: 5px 15px !important;
	}

	.banner-image {
		max-height: none !important; /* 移除高度限制 */
	}

	main {
		padding-top: 70px !important; /* 增加顶部内边距 */
	}

	/* 平板设备页脚调整 */
	footer .container {
		padding: 0 20px 20px 20px !important;
	}
}

/* 手机特定样式 */
@media screen and (max-width: 576px) {
	.logo {
		min-width: 140px !important;
		width: 70% !important;
		margin-left: 10px !important;
	}

	.logo-img-container {
		max-height: 40px !important;
		max-width: 140px !important;
	}

	.logo img {
		max-height: 40px !important;
		margin-left: -30px !important;
	}

	.menu-toggle {
		width: 30% !important;
		text-align: right !important;
		padding-right: 10px !important;
		font-size: 24px !important;
	}

	.menu a {
		font-size: 18px !important; /* 手机设备上的字体大小 */
	}

	header .container {
		padding: 5px 10px !important;
	}

	.banner-image {
		max-height: none !important; /* 移除高度限制 */
	}

	main {
		padding-top: 60px !important; /* 增加顶部内边距 */
	}

	/* 移动设备页脚调整 */
	footer .container {
		padding: 0 15px 20px 15px !important;
	}

	/* 移动设备主内容 */
	main section {
		padding: 30px 15px !important;
	}

	.section-title {
		margin-bottom: 15px !important;
	}

	.section-desc {
		margin-bottom: 20px !important;
	}

	footer .footer-content {
		display: block !important;
	}

	footer .footer-column {
		width: 100% !important;
		margin-bottom: 20px !important;
	}
}

/* 移动端页脚动画修复 - 解决页脚闪烁和滑动问题 */
@media screen and (max-width: 960px) {
	/* 移除页脚在移动端的 WOW 动画效果，防止闪烁和重新滑入 */
	footer .wow {
		visibility: visible !important;
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	/* 确保页脚内容立即显示 */
	#footer-placeholder {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	/* 优化页脚加载过程中的显示 */
	footer {
		animation: none !important;
		transition: none !important;
		/* 保证页脚位置固定，不会有闪烁或滑动效果 */
		position: relative !important;
		bottom: 0 !important;
	}
}