/* ===== 首页首屏：左右三等分 + 中间立方体（绕水平轴上下翻转） ===== */
.hero-cube {
	/* 尺寸随视口等比缩放：中栏 = 33.33vw，方图取中栏的 30% = 10vw */
	--hero-h: min(36vw, 690px);
	--cube-d: min(21vw, 420px);
	--face-img: min(10vw, 192px);
	--c-edge: #00305e;    /* 两边深 */
	--c-main: #0056b3;    /* 主色 */
	--c-center: #4d94dd;  /* 中间浅 */
	position: relative;
	display: flex;
	width: 100%;
	height: var(--hero-h);
	overflow: hidden;
	background: linear-gradient(90deg, var(--c-edge) 0%, var(--c-main) 26%, var(--c-center) 50%, var(--c-main) 74%, var(--c-edge) 100%);
	user-select: none;
	-webkit-user-select: none;
}

.hero-col { display: flex; width: 33.3333%; }
.hero-left, .hero-right { flex-direction: column; align-items: center; justify-content: space-evenly; }
.hero-mid { position: relative; align-items: center; justify-content: center; }

/* 两侧方块（图片位） */
.hero-thumb {
	width: var(--face-img);
	height: var(--face-img);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
	transition: background-color .45s ease;
}
.hero-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 立方体 */
.cube-stage {
	width: var(--cube-d);
	height: var(--cube-d);
	perspective: 1500px;
}
.cube {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform .85s cubic-bezier(.25, .8, .3, 1);
}
.cube-face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 14%;
	border-radius: 6px;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	box-shadow: inset 0 0 80px rgba(0, 0, 0, .35), 0 0 40px rgba(0, 0, 0, .22);
	text-align: center;
	text-decoration: none;
}

/* 面上的图：左右居中，位于上下中线之上 */
.face-img {
	width: var(--face-img);
	height: var(--face-img);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .32);
	transition: background-color .45s ease;
}
.face-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.face-title {
	margin: 5.5% 0 2%;
	font-size: clamp(15px, 1.15vw, 22px);
	font-weight: 700;
	color: #fff;
	letter-spacing: 1px;
}
.face-sub {
	margin: 0;
	padding: 0 10%;
	font-size: clamp(11px, .72vw, 14px);
	line-height: 1.7;
	color: rgba(255, 255, 255, .72);
}

/* 圆点 */
.cube-dots {
	position: absolute;
	left: 50%;
	bottom: 4%;
	transform: translateX(-50%);
	display: flex;
}
.cube-dots i {
	display: block;
	width: 9px;
	height: 9px;
	margin: 0 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	cursor: pointer;
	transition: all .3s;
}
.cube-dots i.on { background: #fff; transform: scale(1.3); }

/* 小屏：两侧收起，只留中间立方体 */
@media (max-width: 991.98px) {
	.hero-cube { --hero-h: 460px; --cube-d: 240px; --face-img: 110px; }
	.hero-left, .hero-right { display: none; }
	.hero-mid { width: 100%; }
}