* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Microsoft YaHei", PingFang SC, Helvetica, Arial, sans-serif;
}
html,body{
    overflow-x:hidden;
}
body {
	background-color: #f7f9fc;
	color: #222d40;
	line-height: 1.7;
}
.header {
	width: 100%;
	background: #ffffff;
	padding: 24px 5%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 3px 15px rgba(12, 52, 112, 0.09);
}
.logo-area {
	display: flex;
	align-items: center;
	gap: 14px;
}
.logo-icon {
	width: 48px;
	height: 48px;
	background: linear-gradient(135deg, #0c4294, #1968d8);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size:26px;
	font-weight:bold;
}
.logo-name {
	font-size:30px;
	font-weight:700;
	color:#0c4294;
	letter-spacing:1px;
}
.header-nav {
	display: flex;
	gap: 32px;
	align-items: center;
}
.header-nav a {
	font-size: 18px;
	color: #222d40;
	text-decoration: none;
	font-weight: 500;
	transition: all 0.3s ease;
	position: relative;
}
.header-nav a:hover {
	color: #0c4294;
	transform: translateY(-2px);
}
.header-nav a::after {
	content: "";
	position: absolute;
	bottom: -6px;
	left: 0;
	width: 0;
	height: 3px;
	background: #0c4294;
	border-radius: 2px;
	transition: width 0.3s ease;
}
.header-nav a:hover::after {
	width: 100%;
}
.header-tel {
	display:flex;
	align-items:center;
	gap:12px;
}
.tel-icon {
	width:42px;
	height:42px;
	background:#0c4294;
	border-radius:50%;
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:20px;
}
.tel-text span {
	font-size:19px;
	color:#555;
}
.tel-text b {
	font-size:34px;
	color:#0c4294;
}
.banner {
	width:100%;
	background: linear-gradient(150deg, #093477, #1558bd, #2370e0);
	padding:110px 5%;
	color:#fff;
	position:relative;
	overflow:hidden;
	display:flex;
	align-items:center;
	gap:30px;
}
.banner::before {
 content:"";
 position:absolute;
 width:520px;
 height:520px;
 border-radius:50%;
 background:rgba(255, 255, 255, 0.05);
 right:-180px;
 top:-160px;
}
.banner::after {
 content:"";
 position:absolute;
 width:320px;
 height:320px;
 border-radius:50%;
 background:rgba(255, 255, 255, 0.04);
 left:-120px;
 bottom:-120px;
}
.banner-inner {
	position:relative;
	z-index:2;
	flex:1;
	max-width:780px;
}
.banner h1 {
	font-size:50px;
	margin-bottom:26px;
}
.banner p {
	font-size:20px;
	opacity:0.93;
	margin-bottom:42px;
}
.btn-phone {
	display:inline-block;
	padding:18px 46px;
	background:#fff;
	color:#0c4294;
	font-size:19px;
	font-weight:600;
	border-radius:10px;
	text-decoration:none;
	transition:all 0.3s;
}
.btn-phone:hover {
	background:#f3f8ff;
	box-shadow:0 10px 30px rgba(0, 0, 0, 0.18);
	transform:translateY(-4px);
}
.banner-img {
	flex:1;
	text-align:center;
}
.banner-img svg {
	width:60%;
	height:auto;
}
.banner-txt {
	margin-top:12px;
	font-size:20px;
	color:#fff;
	font-weight:bold;
}
.data-box {
	width:90%;
	margin:-55px auto 0;
	background:#fff;
	border-radius:14px;
	box-shadow:0 6px 30px rgba(12, 52, 112, 0.11);
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	padding:40px 20px;
	gap:20px;
	position:relative;
	z-index:3;
}
.data-item {
	text-align:center;
	padding:0 10px;
}
.data-ico {
	width:54px;
	height:54px;
	margin:0 auto 14px;
	background:#e9f2ff;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
}
.data-ico svg {
	width:32px;
	height:32px;
}
.data-num {
	font-size:36px;
	font-weight:bold;
	color:#0c4294;
}
.data-txt {
	color:#555;
	font-size:16px;
}
.advantage {
	padding:95px 5% 50px;
}
.section-title {
	text-align:center;
	margin-bottom:65px;
}
.section-title h2 {
	font-size:36px;
	color:#1f2c44;
	margin-bottom:12px;
}
.section-title p {
	color:#666;
	font-size:17px;
}
.section-title span {
	display:block;
	width:72px;
	height:4px;
	background:#0c4294;
	margin:16px auto 0;
	border-radius:3px;
}
.adv-wrap {
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap:35px;
}
.adv-card {
	background:#fff;
	padding:42px 32px;
	border-radius:14px;
	border:1px solid #e4ebf5;
	transition:0.3s ease;
}
.adv-card:hover {
	border-color:#0c4294;
	box-shadow:0 12px 35px rgba(12, 52, 112, 0.12);
	transform:translateY(-7px);
}
.adv-ico {
	width:88px;
	height:88px;
	background:linear-gradient(135deg, #0c4294, #2273e2);
	border-radius:12px;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-bottom:22px;
}
.adv-ico svg {
	width:44px;
	height:44px;
	fill:#fff;
	stroke:#fff;
}
.adv-card h3 {
	font-size:23px;
	color:#1f2c44;
	margin-bottom:15px;
}
.adv-card p {
	color:#565e70;
	font-size:15.8px;
}
.tech-area {
	padding:90px 5%;
	background:#ffffff;
}
.tech-container {
	display:flex;
	flex-wrap:wrap;
	gap:60px;
	align-items:center;
}
.tech-left {
	flex:1;
	min-width:330px;
}
.tech-left h3 {
	font-size:33px;
	color:#1f2c44;
	margin-bottom:22px;
}
.tech-left p {
	color:#555;
	font-size:16.5px;
	margin-bottom:18px;
}
.tech-list {
	margin-top:26px;
}
.tech-li {
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:14px;
	font-size:16px;
	color:#333;
}
.li-mark {
	width:22px;
	height:22px;
	background:#0c4294;
	color:#fff;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:14px;
}
.tech-right {
	flex:1;
	min-width:330px;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:24px;
}
.tech-tag {
	padding:32px 16px;
	background:#f7f9fc;
	border-radius:12px;
	text-align:center;
	transition:0.3s;
}
.tech-tag:hover {
	background:#0c4294;
	color:#fff;
}
.tag-ico {
	margin-bottom:12px;
}
.tag-ico svg {
	width:52px;
	height:52px;
}
.tech-tag:hover .tag-ico svg {
	stroke:#fff;
	fill:#fff;
	fill-opacity:0.2;
}
.tag-name {
	font-size:17px;
	font-weight:500;
}
.service-area {
	padding:90px 5%;
}
.service-grid {
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap:28px;
}
.service-item {
	background:#fff;
	padding:34px 26px;
	border-radius:13px;
	box-shadow:0 4px 18px rgba(0, 0, 0, 0.05);
}
.ser-ico {
	margin-bottom:16px;
}
.ser-ico svg {
	width:52px;
	height:52px;
}
.service-item h4 {
	font-size:20px;
	margin-bottom:12px;
	color:#222;
}
.service-item p {
	color:#60687a;
	font-size:15.5px;
}
.friend-link {
	padding: 60px 5%;
	background: #ffffff;
	border-top: 1px solid #e4ebf5;
}
.link-wrap {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px 35px;
}
.link-wrap a {
	font-size: 16px;
	color: #444;
	text-decoration: none;
	padding: 8px 14px;
	border-radius: 6px;
	transition: all 0.3s ease;
	background: #f7f9fc;
	border: 1px solid #e4ebf5;
}
.link-wrap a:hover {
	background: #0c4294;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(12, 66, 148, 0.15);
}
.footer {
	background:#092957;
	padding:70px 5%;
	text-align:center;
	color:#fff;
}
.footer h2 {
	font-size:35px;
	margin-bottom:22px;
}
.footer-phone {
	font-size:42px;
	color:#ffdd66;
	font-weight:700;
	margin-bottom:20px;
}
.footer-desc {
	opacity:0.82;
	font-size:17px;
}
.footer-desc a {
	color:#ffFFFF;
}
@media(max-width:768px) {
    .header{
        flex-direction:column;
        gap:20px;
        text-align:center;
    }
	.header-nav{
		gap:18px;
		flex-wrap:wrap;
		justify-content:center;
	}
	.header-nav a{
		font-size:16px;
	}
    .header-tel{justify-content:center;}
    .banner{
        flex-direction:column;
        padding:60px 5%;
    }
    .banner h1{font-size:30px;}
    .banner p{font-size:16px;}
   
    .advantage,.tech-area,.service-area{
        padding:50px 4%;
    }
    .section-title h2{font-size:28px;}
    .tech-container{gap:40px;}
    .tech-right{grid-template-columns:1fr;}
    .service-grid{grid-template-columns:1fr;}
	.link-wrap{
		gap:12px 20px;
	}
	.link-wrap a{
		font-size:14px;
		padding:6px 10px;
	}
    .footer h2{font-size:26px;}
    .footer-phone{font-size:30px;}
}
.package-wrap{width: 100%;margin:50px auto;padding:0 15px;}
.package-head{text-align:center;font-size:26px;color:#0c4294;margin-bottom:30px;font-weight:bold;}
.package-table{border:1px solid #ccc;background:#ccc;display:grid;gap:1px;}
.package-tr{display:grid;grid-template-columns:20% 20% 20% 20% 20%;background:#fff;}
.package-td{padding:12px 6px;text-align:center;line-height:1.6;border-right: 1px solid #ccc;}
.pricenow{font-size:20px;color:#f60;font-weight:bold;}
.note{background:#fff;margin-top:10px;padding:15px;line-height:1.8;max-width:1200px;margin-left:auto;margin-right:auto;}
@media(max-width:768px){
    .package-tr{grid-template-columns:100%;}
}
/*data-box统一宽度和报价区块对齐*/
.data-boxny{margin:50px auto;display:flex;flex-wrap:wrap;justify-content:center;  width:95%;
        padding:30px 15px;
	background:#fff;
	border-radius:14px;
	box-shadow:0 6px 30px rgba(12, 52, 112, 0.11);
	
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	
	gap:20px;
	position:relative;
	z-index:3;}
.data-item{flex:1;min-width:220px;text-align:center;}