/* 基础样式 */
 * {
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
 	font-family: 'Arial', sans-serif;
 }

 /* Webkit 内核（Chrome/Edge/Safari）- 超细滚动条 */
 ::-webkit-scrollbar {
 	/* 极致细尺寸：4px（可缩至 3px，低于3px易操作不便） */
 	width: 4px;
 	height: 4px;
 }

 /* 滚动条轨道 - 适配细尺寸的圆角 */
 ::-webkit-scrollbar-track {
 	background: #f8f8f8;
 	border-radius: 2px;
 	/* 与宽度/2 匹配，避免圆角溢出 */
 }

 /* 滚动条滑块 - 细条专属渐变，更细腻 */
 ::-webkit-scrollbar-thumb {
 	background: linear-gradient(180deg, #8a91e8 0%, #9d65c9 100%);
 	border-radius: 2px;
 	/* 与轨道圆角一致 */
 	border: none;
 	/* 移除默认边框，避免细条变宽 */
 	transition: background 0.2s ease;
 	/* 仅变色，避免缩放变形 */
 }

 /* 滑块 hover 效果 - 细条避免缩放，仅加深颜色 */
 ::-webkit-scrollbar-thumb:hover {
 	background: linear-gradient(180deg, #7980e0 0%, #8f59b8 100%);
 }

 /* 滚动条角落 - 适配细尺寸 */
 ::-webkit-scrollbar-corner {
 	background: #f8f8f8;
 	border-radius: 2px;
 }

 /* Firefox 适配 - 超细滚动条 */
 * {
 	scrollbar-width: thin;
 	/* 强制细滚动条 */
 	scrollbar-color: #8a91e8 #f8f8f8;
 	/* 滑块色/轨道色，匹配webkit */
 }

 body {
 	color: #2C3E50;
 	background-color: #F9FAFB;
 	line-height: 1.6;
 	overflow-x: hidden;
 	/* 禁止横向滚动 */
 	max-width: 100vw;
 	/* 限制最大宽度为屏幕宽度 */
 }

 .container {
 	width: 100%;
 	max-width: 1600px;
 	margin: 0 auto;
 	padding: 0 20px;
 	position: relative;
 	box-sizing: border-box;
 	/* 确保内边距不增加总宽度 */
 }

 a {
 	text-decoration: none;
 	color: inherit;
 	transition: color 0.3s ease;
 }

 h1,
 h2,
 h3,
 h4 {
 	font-weight: bold;
 	margin-bottom: 1rem;
 }

 button {
 	cursor: pointer;
 	border: none;
 	background: none;
 	font-family: inherit;
 }

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

 /* 动画效果 */
 @keyframes fadeIn {
 	from {
 		opacity: 0;
 	}

 	to {
 		opacity: 1;
 	}
 }

 @keyframes slideUp {
 	from {
 		opacity: 0;
 		transform: translateY(20px);
 	}

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

 @keyframes pulse {
 	0% {
 		transform: scale(1);
 	}

 	50% {
 		transform: scale(1.05);
 	}

 	100% {
 		transform: scale(1);
 	}
 }

 .animate-fade-in {
 	animation: fadeIn 0.8s ease forwards;
 	opacity: 0;
 }

 .animate-slide-up {
 	animation: slideUp 0.8s ease forwards;
 	opacity: 0;
 }

 .animate-delay-100 {
 	animation-delay: 0.1s;
 }

 .animate-delay-200 {
 	animation-delay: 0.2s;
 }

 .animate-delay-300 {
 	animation-delay: 0.3s;
 }

 .animate-delay-400 {
 	animation-delay: 0.4s;
 }

 /* 导航栏样式 */
 header {
 	position: fixed;
 	top: 0;
 	left: 0;
 	width: 100%;
 	z-index: 50;
 	transition: all 0.3s ease;
 	padding: 15px 0;
 }

 header.scrolled {
 	background-color: white;
 	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 	padding: 10px 0;
 }

 header.scrolled a {
 	color: #2C3E50;
 }

 header.scrolled a:hover {
 	color: #07c160;
 }

 header.scrolled .menu-btn {
 	color: #2C3E50;
 }

 .navbar {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 }

 .logo {
 	display: flex;
 	align-items: center;
 	font-size: 20px;
 	font-weight: bold;
 	color: #ffffff;
 }


 .nav-links {
 	display: flex;
 	gap: 40px;
 }

 .nav-links a {
 	color: #ffffff;
 }

 .nav-links a:hover {
 	color: #00ff7a;
 }

 .menu-btn {
 	display: none;
 	font-size: 24px;
 	color: #ffffff;
 }

 .mobile-menu {
 	display: none;
 	position: absolute;
 	top: 100%;
 	left: 0;
 	width: 100%;
 	background-color: white;
 	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 	padding: 20px;
 	flex-direction: column;
 	gap: 15px;
 	z-index: 999;
 }

 .mobile-menu.active {
 	display: flex;
 }

 /* banner区域样式 */
 /* 光圈样式 */
 .pulse-ring {
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	border-radius: 50%;
 	background-color: rgba(255, 255, 255, 0.1); 
 	border: 6px solid rgba(255, 255, 255, 0.1);
 	/* 半透明白色光圈 */
 	animation: pulse 4s infinite ease-out;
 	opacity: 0;
 }

 /* 不同光圈设置不同大小和动画延迟，形成波浪效果 */
 .pulse-ring:nth-child(1) {
 	width: 200px;
 	height: 200px;
 	animation-delay: 0s;
 }

 .pulse-ring:nth-child(2) {
 	width: 300px;
 	height: 300px;
 	animation-delay: 0.5s;
 }

 .pulse-ring:nth-child(3) {
 	width: 400px;
 	height: 400px;
 	animation-delay: 1s;
 }

 .pulse-ring:nth-child(4) {
 	width: 500px;
 	height: 500px;
 	animation-delay: 1.5s;
 }

 .pulse-ring:nth-child(5) {
 	width: 600px;
 	height: 600px;
 	animation-delay: 2s;
 }

 /* 光圈动画：从中心放大并逐渐消失 */
 @keyframes pulse {
 	0% {
 		transform: translate(-50%, -50%) scale(0);
 		opacity: 0.8;
 	}

 	100% {
 		transform: translate(-50%, -50%) scale(2);
 		opacity: 0;
 	}
 }

 .hero {
 	min-height: 100vh;
 	padding-top: 100px;
 	background: linear-gradient(135deg, rgba(3, 165, 244, 0.2), rgba(7, 193, 76, 0.3));
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	text-align: center;
 	background-image: url(../image/bg.jpg);
 	background-repeat: no-repeat;
 	background-position: center top;
 	/* background-size: 100%; */
 	overflow: hidden;
 }

 .hero-content {
 	padding: 80px 0;
 }

 .hero h1 {
 	font-size: clamp(2.5rem, 5vw, 4rem);
 	color: #ffffff;
 	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 	padding-top: 50px;
 }

 .hero p {
 	font-size: clamp(1rem, 2vw, 1.25rem);
 	margin: 0 auto 50px;
 	color: rgba(44, 62, 80, 0.8);
 }

 .hero h2 {
 	display: none;
 }

 .btn-group {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
 	gap: 30px;
 	margin-bottom: 50px;
 }

 .erwm img {
 	width: 100px;
 	height: 100px;
 	border-radius: 60px;
 	border: 6px solid #ffffff;
 }


 .btn {
 	font-size: 16px;
 	height: 50px;
 	line-height: 50px;
 	padding: 0px 50px;
 	border-radius: 30px;
 	font-weight: 600;
 	transition: all 0.3s ease;
 	position: relative;
 	overflow: hidden;
 }

 .btn::after {
 	content: '';
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	background-color: rgba(255, 255, 255, 0.2);
 	border-radius: 30px;
 	transform: scale(0);
 	opacity: 0;
 	transition: transform 0.5s ease, opacity 0.5s ease;
 }

 .btn:hover::after {
 	transform: scale(1.5);
 	opacity: 1;
 }

 .btn-primary {
 	background-color: #2ECC71;
 	color: white;
 	box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
 }

 .btn-primary:hover {
 	background-color: #27ae60;
 }

 .scroll-indicator {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	animation: bounce 1s infinite ease-in-out;
 	padding-top: 5%;
 }

 .scroll-indicator a img {
 	width: 30px;
 	height: 30px;
 	border-radius: 15px;
 	overflow: hidden;
 }

 .scroll-indicator a {
 	color: rgba(44, 62, 80, 0.6);
 	font-size: 24px;
 }

 .scroll-indicator a:hover {
 	color: #2ECC71;
 }

 /* 定义动画关键帧 */
 @keyframes bounce {

 	0%,
 	100% {
 		transform: translateY(0);
 		/* 起始和结束位置 */
 	}

 	50% {
 		transform: translateY(20px);
 		/* 中间位置（向下移动20px） */
 	}
 }


 /* 城市文脉区域 */
 .section {
 	padding: 80px 0;
 }

 .section-title {
 	text-align: center;
 	margin-bottom: 60px;
 }

 .section-title h2 {
 	font-size: clamp(1.8rem, 3vw, 2.5rem);
 	margin-bottom: 15px;
 }

 .section-title p {
 	color: rgba(44, 62, 80, 0.7);
 	margin: 0 auto;
 }

 .grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 	gap: 50px;
 }

 .card {
 	background-color: white;
 	border-radius: 10px;
 	overflow: hidden;
 	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 	transition: all 0.3s ease;
 }

 .card:hover {
 	transform: translateY(-5px);
 	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }

 .card-img {
 	height: 200px;
 	overflow: hidden;
 	background-color: #f2f5f7;
 }

 .card-img img {
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
 	transition: transform 0.5s ease;
 }

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

 .card-content {
 	padding: 25px;
 }

 .card-content h3 {
 	font-size: 1.5rem;
 	margin-bottom: 10px;
 }

 .card-content p {
 	color: rgba(44, 62, 80, 0.7);
 	margin-bottom: 20px;
 }

 .card-link {
 	display: inline-flex;
 	align-items: center;
 	color: #2ECC71;
 	font-weight: 600;
 }

 .card-link:hover {
 	color: #27ae60;
 }

 .card-link span {
 	margin-left: 5px;
 }

 /* 核心功能区域 */
 .features {
 	background: linear-gradient(135deg, rgba(46, 204, 113, 0.05), rgba(52, 152, 219, 0.05));
 }

 .features-content {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 50px;
 }

 .features-image {
 	flex: 1;
 	min-width: 300px;
 	position: relative;
 	display: flex;
 	align-items: center;
 }

 .phone-mockup {
 	max-width: 300px;
 	margin: 0 auto;
 	border-radius: 30px;
 	overflow: hidden;
 	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
 	position: relative;
 	z-index: 2;
 }

 .features-image::before {
 	content: '';
 	position: absolute;
 	bottom: -40%;
 	left: 50%;
 	transform: translateX(-50%);
 	width: calc(100% + 10px);
 	height: calc(100% + 10px);
 	background: linear-gradient(135deg, rgba(46, 204, 113, 0.2), rgba(52, 152, 219, 0.2));
 	border-radius: 30px;
 	z-index: 1;
 	animation: pulse 3s infinite;
 }

 .features-list {
 	flex: 1;
 	min-width: 300px;
 }

 .feature-item {
 	display: flex;
 	gap: 15px;
 	margin-bottom: 30px;
 }

 .feature-icon {
 	width: 50px;
 	height: 50px;
 	border-radius: 50%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	flex-shrink: 0;
 }

 .feature-icon img {
 	width: 28px;
 }

 .feature-icon.primary {
 	background-color: rgba(216, 30, 6, 0.1);
 }

 .feature-icon.secondary {
 	background-color: rgba(255, 82, 16, 0.1);
 }

 .feature-icon.san {
 	background-color: rgba(31, 186, 113, 0.1);
 }

 .feature-icon.si {
 	background-color: rgba(37, 157, 249, 0.1);
 }

 .feature-icon.wu {
 	background-color: rgba(31, 186, 113, 0.1);
 }

 .feature-content h3 {
 	font-size: 1.25rem;
 	margin-bottom: 5px;
 }

 .feature-content p {
 	color: rgba(44, 62, 80, 0.7);
 	margin-bottom: 1rem;
 }

 /* 合作交流区域 */
 .cooperation-cards {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 	gap: 30px;
 	margin-bottom: 60px;
 }

 .cooperation-card {
 	background: linear-gradient(135deg, rgba(46, 204, 113, 0.05), rgba(46, 204, 113, 0.1));
 	padding: 30px;
 	border-radius: 10px;
 	text-align: center;
 	transition: all 0.3s ease;
 }

 .cooperation-card:nth-child(2) {
 	background: linear-gradient(135deg, rgba(52, 152, 219, 0.05), rgba(52, 152, 219, 0.1));
 }

 .cooperation-card:nth-child(3) {
 	background: linear-gradient(135deg, rgba(26, 188, 156, 0.05), rgba(26, 188, 156, 0.1));
 }

 .cooperation-card:hover {
 	transform: translateY(-5px);
 	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
 }

 .cooperation-icon {
 	width: 60px;
 	height: 60px;
 	border-radius: 50%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	margin: 0 auto 20px;
 	font-size: 24px;
 }

 .cooperation-icon span {
 	font-weight: 600;
 }

 .cooperation-icon.primary {
 	background-color: rgba(46, 204, 113, 0.2);
 	color: #2ECC71;
 }

 .cooperation-icon.secondary {
 	background-color: rgba(52, 152, 219, 0.2);
 	color: #3498DB;
 }

 .cooperation-icon.accent {
 	background-color: rgba(26, 188, 156, 0.2);
 	color: #1ABC9C;
 }

 .cooperation-card h3 {
 	font-size: 1.25rem;
 	margin-bottom: 15px;
 }

 .cooperation-card p {
 	color: rgba(44, 62, 80, 0.7);
 	margin-bottom: 20px;
 }

 .cooperation-link {
 	color: #2ECC71;
 	font-weight: 600;
 	display: inline-flex;
 	align-items: center;
 }

 .cooperation-card:nth-child(2) .cooperation-link {
 	color: #3498DB;
 }

 .cooperation-card:nth-child(3) .cooperation-link {
 	color: #1ABC9C;
 }

 .cooperation-link span {
 	margin-left: 5px;
 }

 .partner-logos {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
 	gap: 30px;
 }

 .partner-logo {
 	width: 160px;
 	height: 60px;
 	background-color: #F9FAFB;
 	border-radius: 5px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 	transition: box-shadow 0.3s ease;
 }

 .partner-logo:hover {
 	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }

 .partner-logo img {
 	max-height: 30px;
 }

 /* 招商引资区域 */
 .investment {
 	background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(46, 204, 113, 0.1));
 }

 .investment-card {
 	background-color: white;
 	border-radius: 15px;
 	overflow: hidden;
 	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 	display: flex;
 	flex-wrap: wrap;
 }

 .investment-content {
 	flex: 1;
 	min-width: 300px;
 	padding: 40px;
 }

 .investment-content h2 {
 	font-size: clamp(1.5rem, 3vw, 2rem);
 	margin-bottom: 20px;
 }

 .investment-content p {
 	color: rgba(44, 62, 80, 0.7);
 	margin-bottom: 30px;
 }

 .investment-list {
 	margin-bottom: 30px;
 }

 .investment-item {
 	display: flex;
 	align-items: flex-start;
 	gap: 10px;
 	margin-bottom: 15px;
 }

 .investment-item i {
 	color: #2ECC71;
 	margin-top: 5px;
 }

 .investment-image {
 	flex: 1;
 	min-width: 300px;
 	position: relative;
 }

 .investment-image::before {
 	content: '';
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	background: linear-gradient(135deg, #2ECC71, #3498DB);
 	z-index: 1;
 }

 .investment-image img {
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
 	mix-blend-mode: overlay;
 	opacity: 0.7;
 	position: relative;
 	z-index: 2;
 }

 /* 联系我们区域 */
 .contact-content {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 50px;
 }

 .contact-info {
 	flex: 1;
 	min-width: 300px;
 }

 .contact-item {
 	display: flex;
 	gap: 15px;
 	margin-bottom: 30px;
 }

 .contact-icon {
 	width: 50px;
 	height: 50px;
 	border-radius: 50%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	flex-shrink: 0;
 }

 .contact-icon.primary {
 	background-color: rgba(46, 204, 113, 0.1);
 	color: #2ECC71;
 }

 .contact-icon.secondary {
 	background-color: rgba(52, 152, 219, 0.1);
 	color: #3498DB;
 }

 .contact-icon.accent {
 	background-color: rgba(26, 188, 156, 0.1);
 	color: #1ABC9C;
 }

 .contact-details h3 {
 	font-size: 1.1rem;
 	margin-bottom: 5px;
 }

 .contact-details p {
 	color: rgba(44, 62, 80, 0.7);
 }

 .lxwmb {
 	width: 50%;
 	display: flex;
 	align-items: center;
 	justify-content: right;
 }

 .lxleft {
 	margin: 0px 50px;
 	text-align: center;
 }

 .lxleft img {
 	width: 150px;
 	border-radius: 8px 8px;
 	box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
 }

 .lxleft span {
 	display: block;
 	line-height: 30px;
 	color: rgba(44, 62, 80, 0.7);
 }


 /* 页脚样式 */
 footer {
 	background-color: #2C3E50;
 	color: white;
 	padding: 30px 0px;
 }


 .footer a {
 	color: rgba(255, 255, 255, 0.6);
 	transition: color 0.3s ease;
 }

 .footer a:hover {
 	color: #2ECC71;
 }

 .copyright {
 	text-align: center;
 	color: rgba(255, 255, 255, 0.5);
 	font-size: 0.9rem;
 }

 /* 响应式调整 */
 @media (max-width: 768px) {
 	.nav-links {
 		display: none;
 	}

 	.menu-btn {
 		display: block;
 	}

 	.features-content {
 		flex-direction: column;
 	}
 }

 @media (max-width: 480px) {
 	.hero {
 		padding-top: 30px;
 	}

 	.hero-content {
 		padding: 20px 0;
 	}

 	.hero h1 {
 		font-size: 2rem;
 		display: none;
 	}

 	.hero p {
 		margin: 0 auto 30px;
 	}

 	.hero h2 {
 		display: block;
 		font-size: clamp(2.5rem, 5vw, 2.5rem);
 		line-height: 3rem;
 		margin-bottom: 20px;
 		color: #ffffff;
 		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 	}

 	.erwm img {
 		width: 80px;
 		height: 80px;
 		border-radius: 40px;
 	}

 	.btn {
 		width: 100%;
 	}

 	.grid {
 		grid-template-columns: 1fr;
 	}

 	.scroll-indicator {
 		padding-top: 35%;
 	}

 	.lxwmb {
 		width: 100%;
 		justify-content: center;
 	}
 }