@charset "utf-8";
html,body{height: 100%;}
body{ margin:0 auto; font-size:12px; font-family: "微软雅黑",Arial, Helvetica, sans-serif; line-height:normal; overflow-x: hidden;}
ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;}
ul { list-style:none;}
*{ margin:0px; padding:0px; box-sizing: border-box;}
img { border:0px; display: block; max-width: 100%; height: auto;}
a { color:#05a; text-decoration:none;}
a:hover { color:#f00;}
.clear{ clear:both;}
/*-----------------背景--------------------*/
/* 固定定位 + cover:任何分辨率下背景都铺满视口,且比例正确不拉伸 */
.wzbj{
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	width: 100%;
	height: 100%;
	background: url(../images/bj1.jpg) no-repeat center center;
	background-size: cover;
	z-index: -1;
}
/*-----------------主内容区--------------------*/
/* 思路:
   - width 用 min() 限制最大 1380,同时保证两侧留白
   - 左右两栏 flex 布局,图片始终以"百分比 + height:auto"方式缩放,保持原始比例
   - 关键:左图宽度上限锁在 684px(原图尺寸),避免被放大后模糊 */
.wzbox{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(1380px, calc(100vw - 80px));
	max-width: 1380px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: clamp(20px, 2.5vw, 48px);
}
/* 左侧大图区 */
.wzbox_left{
	flex: 0 1 auto;
	width: min(850px, 56%);
	max-width: 850px;
	min-width: 0;
	margin-left: clamp(40px, 6vw, 120px);
}
.wzbox_left img{
	width: 100%;
	height: auto;
}
/* 右侧按钮区 */
.wzbox_right{
	flex: 0 0 auto;
	width: clamp(260px, 24vw, 338px);
}
.logo{
	width: calc(100% + clamp(20px, 3vw, 60px));
	margin-left: calc(clamp(20px, 3vw, 60px) / -2);
	margin-top: -250px;
	margin-bottom: clamp(8px, 1.5vh, 20px);
	cursor: pointer;
}
.logo img{
	width: 100%;
	height: auto;
}
.wzbox ul{
	width: 100%;
	padding: clamp(24px, 3.5vh, 48px) 0 0;
}
.wzbox li{
	padding-bottom: clamp(12px, 1.8vh, 24px);
}
.wzbox li img{
	width: 100%;
	height: auto;
}
/* hover 动效 */
.img4{
	transition: transform 0.4s ease-in-out;
	-webkit-transition: transform 0.4s ease-in-out;
}
.img4:hover{
	transform: translate(0, -10px);
	-webkit-transform: translate(0, -10px);
}
/* ============ 矮屏(1366x768 笔记本等)============ */
/* 视口矮时按比例缩小,防止内容溢出视口 */
@media screen and (max-height: 820px) and (min-width: 981px){
	.wzbox{
		width: min(1280px, calc(100vw - 80px));
		gap: clamp(16px, 2vw, 32px);
	}
	.wzbox_left{
		width: min(720px, 54%);
	}
	.wzbox_right{
		width: clamp(220px, 20vw, 290px);
	}
	.wzbox ul{
		padding-top: 20px;
	}
	.wzbox li{
		padding-bottom: 14px;
	}
}
/* 超矮屏保护(如 1280x600) */
@media screen and (max-height: 680px) and (min-width: 981px){
	.wzbox{
		width: min(1100px, calc(100vw - 60px));
	}
	.wzbox_left{
		width: min(620px, 52%);
	}
	.wzbox_right{
		width: clamp(200px, 18vw, 260px);
	}
	.wzbox ul{
		padding-top: 12px;
	}
	.wzbox li{
		padding-bottom: 10px;
	}
}
/* ============ 超宽屏 1921px+ (2K / 4K)============ */
/* 锁定上限,获得稳定显示 */
@media screen and (min-width: 1921px){
	.wzbox{
		width: 1500px;
	}
	.wzbox_left{
		width: 850px;
	}
	.wzbox_right{
		width: 338px;
	}
}
/* ============ 平板 / 窄屏(竖向堆叠)============ */
@media screen and (max-width: 980px){
	.wzbox{
		position: static;
		transform: none;
		margin: 20px auto;
		padding: 20px 0;
		width: min(680px, calc(100vw - 24px));
		flex-direction: column;
		align-items: center;
		gap: 20px;
	}
	.wzbox_left{
		width: 100%;
		max-width: 560px;
		margin-left: 0;
	}
	.wzbox_right{
		width: min(338px, 90%);
	}
	.logo{
		width: 100%;
		margin-left: 0;
		margin-bottom: 0;
	}
	.wzbox ul{
		padding-top: 16px;
	}
	.wzbox li{
		padding-bottom: 16px;
	}
}

/* ============================================================
   ↓↓↓ 追加:让左图与 logo 的间距在所有 PC 分辨率下视觉一致 ↓↓↓
   原理:覆盖 .wzbox 的 justify-content,从 space-between 改为
        center,这样 gap 才会按设定值生效,不会被剩余空间撑大。
   只对 PC(>=981px)生效,窄屏堆叠模式不受影响。
   ============================================================ */
@media screen and (min-width: 981px){
	.wzbox{
		justify-content: center !important;
		gap: clamp(40px, 5vw, 90px) !important;
	}
}

/* ============================================================
   ↓↓↓ 追加:修复 logo 在矮屏被裁切问题 ↓↓↓
   原因:.logo 的 margin-top: -250px 在矮屏(1366x768 等)会把
        logo 顶部推出视口外。这里按视口高度自动收紧偏移量。
   ============================================================ */
@media screen and (max-height: 900px) and (min-width: 981px){
	.logo{
		margin-top: -180px !important;
	}
}
@media screen and (max-height: 800px) and (min-width: 981px){
	.logo{
		margin-top: -140px !important;
	}
}
@media screen and (max-height: 720px) and (min-width: 981px){
	.logo{
		margin-top: -100px !important;
	}
}