@charset "UTF-8";

@font-face {
	font-family: "AT-35";
	src: url("./font/AlibabaPuHuiTi-2-35-Thin.ttf");
}

@font-face {
	font-family: "AT-45";
	src: url("./font/AlibabaPuHuiTi-2-45-Light.ttf");
}

@font-face {
	font-family: "AT-55";
	src: url("./font/AlibabaPuHuiTi-2-55-Regular.ttf");
}

@font-face {
	font-family: "AT-65";
	src: url("./font/AlibabaPuHuiTi-2-65-Medium.ttf");
}

@font-face {
	font-family: "AT-75";
	src: url("./font/AlibabaPuHuiTi-2-75-Semibold.ttf");
}

@font-face {
	font-family: "AT-85";
	src: url("./font/AlibabaPuHuiTi-2-85-Bold.ttf");
}

@font-face {
	font-family: "AT-95";
	src: url("./font/AlibabaPuHuiTi-2-95-ExtraBold.ttf");
}

@font-face {
	font-family: "AT-105";
	src: url("./font/AlibabaPuHuiTi-2-105-Heavy.ttf");
}

@font-face {
	font-family: "AT-115";
	src: url("./font/AlibabaPuHuiTi-2-115-Black.ttf");
}

@font-face {
	font-family: "HS-b";
	src: url("./font/HarmonyOS_Sans_SC_Bold.ttf");
}


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "AT-55";
	/* line-height: 1.6; */
	color: #333;
	background-color: #f8f9fa;
}

/* h1,
h2,
h3,
h4 {
	font-weight: normal;
	font-family: "AT-105";
} */

/* 头部样式 */
.header {
	/* background: #FFFFFF; */
	/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	padding: 0 20px;
}

.header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 70px;
}

.logo {
	display: flex;
	align-items: center;

}

.logo img {
	width: 146px;
	height: 40px;
}

.nav {
	display: flex;
	gap: 30px;

}

.nav-link {
	font-size: 16px;
	color: #000000;
	text-decoration: none;
	font-family: "AT-55";
	transition: color 0.3s;
}

.nav-link:hover,
.nav-link.active {
	color: #2196F3;
}

.nav_left_icon {
	align-items: center;
	justify-content: center;
	display: none;
}

.nav_left_icon img {
	width: 24px;
	height: 24px;
}

.phone_nav_box {
	display: none;
	position: fixed;
	right: 0;
	top: 55px;
}

.phone_nav {

	display: flex;
	flex-direction: column;

	background: #FFFFFF;
	box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.09);
}

.phone_nav a {
	padding: 16px 40px;
	border-bottom: 1px solid #D9D9D9;
}

.contact {
	font-family: "HS-b";
	font-weight: bold;
	font-size: 20px;
	color: #000000;
	display: flex;
	align-items: center;
}

.contact .icon {
	width: 21px;
	height: 21px;
	margin-right: 16px;
}


/* 主标题区域 */
.hero {
	background: url('../img/header_bg.jpg');
	background-size: 100% 100%;
	/* width: 100%; */
	height: 640px;
	padding: 200px 20px 0;
	/* padding: 120px 0 80px; */
	/* text-align: center; */
}

.hero h1 {
	font-weight: normal;
	font-style: normal;
	font-size: 64px;
	color: #333333;
	font-family: "AT-105";
	margin-bottom: 20px;
}

.hero p {
	font-size: 18px;
	color: #666;
	margin-bottom: 30px;
}

.cta-button {
	background: linear-gradient(90deg, #0073FF 0%, #009FFF 100%);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
	border-radius: 4px;
	border: none;
	width: 162px;
	height: 56px;
	font-size: 20px;
	color: #FFFFFF;
	cursor: pointer;
	font-family: "AT-85";
	font-weight: normal;
	font-style: normal;
	transition: background 0.3s;
}

.cta-button:hover {
	background: #1976D2;
}

/* 底部CTA区域 */
.bottom-cta {
	background: url('../img/cta_bg.jpg');
	background-size: 100% 100%;
	padding: 60px 20px;
}

.cta-content {
	/* text-align: center; */
	margin-bottom: 40px;
}

.cta-content h2 {
	font-size: 36px;
	color: #333;
	margin-bottom: 20px;
}

.cta-content p {
	font-size: 18px;
	color: #666;
	margin-bottom: 30px;
}

.form-group {
	display: flex;
	gap: 20px;
	justify-content: start;
	align-items: center;
	max-width: 780px;
	/* margin: 0 auto; */
}

.form-group input {
	flex: 1;
	height: 62px;
	width: 300px;
	padding: 15px 15px;
	font-family: "AT-55";
	font-weight: normal;
	font-size: 16px;
	color: #333333;
	border: 1px solid #ddd;
	border-radius: 5px;
}

.submit-btn {
	width: 164px;
	height: 62px;
	background: linear-gradient(270deg, #009FFF 0%, #0073FF 100%);
	border: none;
	border-radius: 4px;
	padding: 0 20px;
	font-family: "AT-85";
	font-weight: normal;
	font-size: 24px;
	color: #FFFFFF;
	text-align: center;
	font-style: normal;
	white-space: nowrap;
	transition: background 0.3s;
}

.submit-btn:hover {
	background: #1976D2;
}


/* 页脚样式 */
.footer {
	background: url('../img/footer_bg.jpg');
	/* padding: 60px 0 30px; */
	border-top: 1px solid #eee;
}

.features {
	display: grid;
	grid-template-columns: repeat(4, 1fr)
}

.feature {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 88px;
	font-weight: normal;
	font-size: 20px;
	color: #000000;
	font-family: "AT-65";
}

.feature-icon {
	width: 40px;
	height: 40px;
	margin-right: 16px;
}

.feature-icon img {
	width: 100%;
	height: 100%;
}

.footer-content {
	display: flex;
	/* gap: 60px; */
	padding: 80px 0;
}

.footer-left {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.footer-left .logo {
	margin-bottom: 30px;
}

.footer-left .qr-code {
	text-align: center;
}

.footer-left .qr-code .qr-code-box {
	display: inline-block;
	background: #fff;
}

.footer-left .qr-code img {
	margin: 16px;
	width: 164px;
	height: 164px;
	margin-bottom: 10px;
}

.footer-links {
	flex: 2;
	display: flex;
	/* gap: 40px; */

}

.link-group {
	flex: 1;
}

.link-group h4 {
	color: #191919;
	font-weight: normal;
	font-family: 'AT-65';
	margin-bottom: 20px;
	font-size: 20px;
	text-align: center;
}

.link-group a {
	font-family: 'AT-55';
	text-align: center;
	display: block;
	font-size: 18px;
	color: #676767;
	text-decoration: none;
	margin-bottom: 10px;
	transition: color 0.3s;
}

.link-group a:hover {
	color: #2196F3;
}

.footer-contact {
	/* flex: 1; */
}

.footer-contact h4 {
	color: #333;
	margin-bottom: 20px;
	font-size: 16px;
}

.footer-contact p {
	font-weight: normal;
	font-size: 18px;
	color: #404146;
	margin-bottom: 15px;
	font-family: 'AT-65';
}

.footer-contact p span {
	font-weight: normal;
	font-size: 20px;
	color: #000000;
	font-family: "AT-65";
}

.footer-contact .contact {
	margin-bottom: 15px;
}

.contact-info {

	display: flex;
	align-items: center;
	margin-bottom: 40px;
}

.contact-info .icon {
	width: 40px;
	height: 40px;
	margin-right: 12px;
}

.contact-info span {
	font-family: "HS-b";
	font-weight: bold;
	font-size: 32px;
	color: #000000;
}


@media(max-width:1024px) {
	.hero h1 {
		font-size: 34px;
	}

	.container h2 {
		font-size: 30px;
	}

	.hero {
		height: 450px;
		padding: 100px 20px 0;
	}
}

@media(max-width:780px) {
	.nav {
		display: none;
	}

	.features {
		grid-template-columns: repeat(2, 1fr)
	}

	.feature {
		font-size: 18px;
	}

	.header .container {
		height: 55px;
	}

	.nav_left_icon {
		display: flex;
	}

	.container h2 {
		font-size: 26px;
	}

	.form-group {
		flex-direction: column;
		gap: 15px;
	}

	.footer-links {
		gap: 20px;
	}

	.cta-button {
		font-size: 16px;
		width: 115px;
		height: 45px;
	}

	.form-group input {
		width: 100%;
		/* padding: 15px; */
	}

	.footer-content {
		flex-direction: column;
		align-items: center;
		gap: 40px;
	}

	.link-group h4 {
		font-size: 16px;
	}

	.link-group a {
		font-size: 16px;
	}

	.hero {
		height: 350px;
		padding: 100px 20px 0;
	}

	.hero h1 {
		font-size: 24px;
	}

	.contact-info .icon {
		width: 21px;
		height: 21px;
		margin-right: 12px;
	}

	.contact-info span {

		font-size: 16px;
	}

	.footer-contact p {
		font-size: 14px;
	}

	.footer-contact p span {

		font-size: 14px;

	}
}

@media (max-width: 480px) {
	.form-group input {
		padding: 15px !important;
	}

	.features {
		grid-template-columns: repeat(1, 1fr);

	}

	.feature {
		font-size: 16px;
	}

	.hero h1 {
		font-size: 24px !important;
	}

	.hero {
		height: 350px;
	}

	.comparison-item {
		justify-content: center;
	}

	.cta-content h2 {
		font-size: 24px;
	}

	.header .container {
		/* flex-direction: column; */
		height: 55px;
		/* padding: 15px 20px; */
		/* height: 167px !important; */
	}

	.footer-links {
		padding: 0 20px;
		gap: 20px;
	}

	.submit-btn {
		width: 115px;
		height: 50px;
		font-size: 18px;
	}

	.stat-item {
		justify-content: center;
	}

	.bottom-cta h2 {
		font-size: 24px;
	}

	.bottom-cta p {
		font-size: 16px;
	}

	.cta-content h2 {
		font-size: 24px;
	}

	.nav {
		gap: 20px !important;
		margin: 10px 0;
	}

	.footer-contact {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.link-group h4 {
		font-size: 14px;
	}

	.link-group a {
		font-size: 14px;
	}
}

@media (max-width: 320px) {
	.hero {
		height: 450px;
	}

	.footer-links {
		padding: 0 20px;
		gap: 20px;
	}
}