/**
 * 首页首屏关键 CSS（仅同步加载这一份）
 * 作用：在 common.css / style.css 等异步到达前，稳定 header + Banner 布局，
 * 同时兼顾 PC（#pc）与移动端（#sj），避免异步 CSS 带来的 CLS。
 * 二级页不走本文件。
 */

/* 基础盒模型，避免异步全量 CSS 到达后宽度跳动 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	width: 100%;
	overflow-x: hidden;
}

.layout {
	width: 1480px;
	max-width: 100%;
	margin: 0 auto;
	position: relative;
}

.hide {
	display: none !important;
}

.h5Show {
	display: none;
}

.pcShow {
	display: block;
}

/* ===== PC 顶栏：固定悬浮，先占位避免 Banner 上顶 ===== */
.web_head {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	border: 1px solid #fff;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	top: 62px;
	z-index: 999;
	/* width: calc(100% - 80px); */
	/* max-width: 1480px; */
}

.head_layer .layout {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0 30px;
	/* min-height: 90px; */
}

.web_head .logo img {
	max-height: 77px;
	width: auto;
	display: block;
}

/* ===== Banner：用固定宽高比占位（PC / 移动端分别处理）===== */
.slider_banner_box {
	position: relative;
	width: 100%;
	/* PC 横幅常见约 1920×750；固定比例后图片加载不再撑高页面 → 降 CLS */
	aspect-ratio: 1920 / 750;
	overflow: hidden;
	background: #f0f0f0;
}

.slider_banner,
.slider_banner .swiper-wrapper,
.slider_banner .swiper-slide,
.slider_banner .swiper-slide a {
	width: 100%;
	height: 100%;
}

.slider_banner .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* 关键 CSS 阶段不做 scale 动画，避免与异步 style.css 叠加视觉跳动 */
	transform: none;
	transition: none;
}

/* PC 显示 #pc，隐藏手机 Banner */
#sj {
	display: none;
}

#pc {
	display: block;
	height: 100%;
}

/* ===== 移动端（≤950px）：顶栏改为静态，Banner 换竖图比例 ===== */
@media only screen and (max-width: 950px) {
	body {
		min-width: 0;
	}

	.layout {
		width: 100%;
	}

	.pcShow {
		display: none;
	}

	.h5Show {
		display: block;
	}

	.web_head {
		position: relative;
		left: auto;
		transform: none;
		top: auto;
		width: 100%;
		max-width: none;
		border-radius: 0;
		border: 0;
		background: #fff;
		/* 给移动顶栏预留高度，降低 mSizeChange 注入导航前的跳动 */
		min-height: 56px;
	}

	.head_layer .layout {
		display: block;
		text-align: center;
		min-height: 56px;
		padding: 8px 15px;
	}

	.web_head .logo {
		display: none;
	}

	/* 首页移动：直接显示 phone_logo，不必等 mSizeChange 克隆 → 降 CLS */
	body.site-home .web_head .logo2.hide {
		display: block !important;
		margin: 0 auto;
	}

	body.site-home .web_head .logo2.hide img {
		max-height: 40px;
		width: auto;
		vertical-align: middle;
	}

	.web_head .nav_wrap,
	.web_head .head_right {
		display: none;
	}

	/* 预留移动顶栏右侧菜单区，mSizeChange 注入前减少横向跳动 */
	.web_head::after {
		content: '';
		display: block;
		position: absolute;
		right: 12px;
		top: 50%;
		transform: translateY(-50%);
		width: 72px;
		height: 24px;
	}

	.slider_banner_box {
		/* 手机 Banner 实际尺寸 1920×850，与 PC 分开占位，降 CLS */
		aspect-ratio: 1920 / 850;
	}

	#pc {
		display: none;
	}

	#sj {
		display: block;
		height: 100%;
	}

	/* ===== 首屏下第一块内容：全量 CSS 异步到达前的基础排版，防 CLS ===== */
	.flex {
		display: flex;
		align-items: center;
	}

	.big_title,
	.big_title a {
		text-align: center;
		font-weight: bold;
		font-size: 20px;
		color: #333;
		line-height: 1.3;
		text-decoration: none;
	}

	.rec_desc {
		margin-top: 10px;
		text-align: center;
		font-size: 16px;
		color: #666;
		line-height: 1.6;
	}

	.index_type {
		margin: 5% 0;
	}

	.index_type_swi_box {
		margin-top: 20px;
	}

	.index_type_swi .swiper-slide {
		padding: 25px;
		background: #fff;
		border-radius: 12px;
		border: 1px solid #dbdbdb;
	}

	.imgBox {
		position: relative;
		overflow: hidden;
		display: block;
	}

	.index_type_swi .imgBox {
		aspect-ratio: 1 / 1;
		padding-bottom: 0;
		border-radius: 10px;
		position: relative;
		overflow: hidden;
		display: block;
	}

	/* 懒加载占位图：有 width/height 属性，再用 CSS 铺满容器 → 降 CLS */
	img.lazy-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.logo2 img {
		max-height: 40px;
		width: auto;
		height: auto;
	}

	/* 移动顶栏 logo 区占位（mSizeChange 克隆 phone_logo 前稳定高度） */
	.web_head .logo2 {
		display: block;
		min-height: 40px;
		line-height: 40px;
	}

	.index_type_swi_tit {
		display: block;
		font-weight: bold;
		font-size: 18px;
		line-height: 1.5;
		height: 1.5em;
		overflow: hidden;
		color: #333;
		text-align: center;
		margin-top: 15px;
	}

	/**
	 * 首屏下区块跳过首屏样式计算，降低 Style & Layout 主线程耗时
	 * （Lighthouse「最大程度减少主线程工作」）
	 */
	.index_sol,
	.index_service,
	.index_about,
	.index_display,
	.index_num_box,
	.index_institutions,
	.index_news,
	.footer_box2,
	.form-pop,
	.inquiry-pop-bd {
		content-visibility: auto;
		contain-intrinsic-size: 800px;
	}
}