/* ==========================================================
   section-service.css
   模块：section03 七维一体服务模式
   作用：固定设计画布、四宫格服务卡片和响应式缩放
   说明：从原首页内联样式拆分，保留原视觉效果与响应式行为。
   ========================================================== */

/* ==========================================================
   section03.css - 七维一体全新咨询服务模式 板块样式
   ========================================================== */

/* =========== 板块容器 =========== */
#section03 {
	position: relative;
	z-index: 10;
	background: #061329;
	padding: 0;
	overflow: hidden;
	height: auto;
}
/* ==========================================================
   ★★★ 七维一体全新咨询服务模式 ★★★
   ========================================================== */
.banner-7in1 {
	width: 1960px;
	height: 670px;
	margin: 0 auto;
	overflow: hidden;
	display: flex;
	background: #020d20;
	position: relative;
	z-index: 10;
}
/* 左侧脑图 */
.banner-7in1 .left {
	width: 716px;
	height: 670px;
	flex-shrink: 0;
	background: url('../../images/qw1.jpg') center center no-repeat;
	background-size: cover;
}
/* 中间标题 */
.banner-7in1 .middle-title {
	width: 190px;
	height: 670px;
	background: #082b73;
	display: flex;
	align-items: center;
	justify-content: center;
}
.banner-7in1 .middle-title h1 {
	writing-mode: vertical-rl;
	text-orientation: upright;
	color: #f3b13f;
	font-size: 40px;
	font-family: "SimSun", "STSong", serif;
	letter-spacing: 8px;
	font-weight: 700;
	line-height: 1.15;
}
/* 右侧背景 */
.banner-7in1 .right {
	flex: 1;
	background: url('../../images/qw3.jpg') center center no-repeat;
	background-size: cover;
	padding: 66px 310px 0 175px;
}
/* 四宫格 */
.banner-7in1 .grid {
    /*
       以 1960px 设计稿中的 536px 四宫格为基准做等比缩放。
       所有与中间十字线相关的间距、图标、字号都从 --grid-size 计算，
       避免不同分辨率下 card 与十字线距离比例不一致。
    */
    --grid-size: clamp(320px, 27.35vw, 536px);
 --card-top: calc(var(--grid-size) * 0.0466);      /* 25 / 536 */
 --line-gap: calc(var(--grid-size) * 0.0522);      /* 28 / 536，靠近十字线的间距 */
 --outer-gap: calc(var(--grid-size) * 0.1306);     /* 70 / 536，外侧留白 */
 --right-gap: calc(var(--grid-size) * 0.0373);     /* 20 / 536，右侧模块外侧留白 */
 --icon-size: calc(var(--grid-size) * 0.0895);     /* 48 / 536 */
 --title-size: calc(var(--grid-size) * 0.0448);    /* 24 / 536 */
 --desc-size: calc(var(--grid-size) * 0.0336);     /* 18 / 536 */
	width: var(--grid-size);
	height: var(--grid-size);
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}
/* 中间竖线 */
.banner-7in1 .grid::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: 1px;
	height: 100%;
	background: rgba(255, 255, 255, 0.75);
}
/* 中间横线 */
.banner-7in1 .grid::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background: rgba(255, 255, 255, 0.75);
}
/* 模块 */
.banner-7in1 .card {
	padding-top: var(--card-top);
}
/* 左侧模块 */
.banner-7in1 .card:nth-child(1), .banner-7in1 .card:nth-child(3) {
	padding-left: var(--outer-gap);
	padding-right: var(--line-gap);
	text-align: right;
}
/* 右侧模块 */
.banner-7in1 .card:nth-child(2), .banner-7in1 .card:nth-child(4) {
	padding-left: var(--line-gap);
	padding-right: var(--right-gap);
	text-align: left;
}
/* 图标 */
.banner-7in1 .icon {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}
/* 左侧模块：图标右对齐 */
.banner-7in1 .card:nth-child(1) .icon, .banner-7in1 .card:nth-child(3) .icon {
	justify-content: flex-end;
}
/* 右侧模块：图标左对齐 */
.banner-7in1 .card:nth-child(2) .icon, .banner-7in1 .card:nth-child(4) .icon {
	justify-content: flex-start;
}
.banner-7in1 .icon img {
	width: var(--icon-size);
	height: auto;
}
/* 标题 */
.banner-7in1 .title {
	margin-bottom: 10px;
}
.banner-7in1 .title a {
	color: #fff;
	font-size: var(--title-size);
	font-weight: 400;
	letter-spacing: 2px;
	transition: color 0.3s ease;
}
.banner-7in1 .title a:hover {
	color: #f0cb58;
}
/* 描述 */
.banner-7in1 .desc p {
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--desc-size);
	line-height: 2.2;
	white-space: nowrap;
}

/* ==========================================================
   响应式适配
   ========================================================== */
@media (max-width: 1960px) {
.banner-7in1 {
	width: 100vw;
	height: 34.18vw;
}
.banner-7in1 .left {
	width: 36.53vw;
	height: 34.18vw;
}
.banner-7in1 .middle-title {
	width: 9.69vw;

	height: 34.18vw;
}
.banner-7in1 .middle-title h1 {
	font-size: 2vw;
}
.banner-7in1 .right {
	padding: 3.4vw 15vw 0 9vw;
}
/*
       注意：grid、card 间距、图标、标题、描述字号已经统一由
       .banner-7in1 .grid 的 --grid-size 等比控制，这里不再单独覆盖，
       否则会再次造成 card 与中间十字线间距比例不一致。
    */
}

/* ===== 移动端适配 ===== */
@media (max-width: 768px) {
.banner-7in1 {
	width: 100%;
	height: auto;
	margin: 0;
	display: flex;
	flex-direction: column;
	overflow: visible;
	background: #020d20;
}
.banner-7in1 .left {
	width: 100%;
	height: auto;
	aspect-ratio: 716 / 670;
	background-position: center center;
	background-size: cover;
}
.banner-7in1 .middle-title {
	width: 100%;
	height: 76px;
	flex-shrink: 0;
	background: #082b73;
}
.banner-7in1 .middle-title h1 {
	writing-mode: horizontal-tb;
	text-orientation: mixed;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: 2px;
	font-family: "SimSun", "STSong", serif;
}
.banner-7in1 .right {
	width: 100%;
	flex: none;
	padding: 28px 0 36px;
	background-position: center center;
	background-size: cover;
}
.banner-7in1 .grid {
	width: 92vw;
	height: 92vw;
	max-width: 420px;
	max-height: 420px;
	margin: 0 auto;
}
.banner-7in1 .card {
	padding-top: 20px;
}
.banner-7in1 .card:nth-child(1),  .banner-7in1 .card:nth-child(2),  .banner-7in1 .card:nth-child(3),  .banner-7in1 .card:nth-child(4) {
	padding-left: 8px;
	padding-right: 8px;
	text-align: center;
	transform: none;
}
.banner-7in1 .card:nth-child(1) .icon,  .banner-7in1 .card:nth-child(2) .icon,  .banner-7in1 .card:nth-child(3) .icon,  .banner-7in1 .card:nth-child(4) .icon {
	justify-content: center;
}
.banner-7in1 .icon {
	margin-bottom: 8px;
}
.banner-7in1 .icon img {
	width: 40px;
}
.banner-7in1 .title {
	margin-bottom: 8px;
}
.banner-7in1 .title a {
	font-size: 18px;
	letter-spacing: 1px;
}
.banner-7in1 .desc p {
	font-size: 13px;
	line-height: 1.8;
	white-space: nowrap;
}
}

@media (max-width: 480px) {
.banner-7in1 .middle-title {
	height: 64px;
}
.banner-7in1 .middle-title h1 {
	font-size: 21px;
	letter-spacing: 1px;
}
.banner-7in1 .right {
	padding: 24px 0 32px;
}
.banner-7in1 .grid {
	width: 94vw;
	height: 94vw;
}
.banner-7in1 .card {
	padding-top: 16px;
}
.banner-7in1 .icon img {
	width: 34px;
}
.banner-7in1 .title a {
	font-size: 16px;
	letter-spacing: 1px;
}
.banner-7in1 .desc p {
	font-size: 12px;
	line-height: 1.75;
}
}