html{
	font-family: "microsoft yahei,arial, helvetica, sans-serif";
	font-size: 16px;
}

*{
	margin: 0;
	padding: 0;
}

/* 主内容区增加顶部间距 */
.father {
	padding-top: 70px; /* 根据header实际高度调整 */
}

/* 进场动画 */
@keyframes headerSlideDown {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* 原有header样式增强 */
.top {
	/* 保持原有样式 */
	transition: all 0.3s ease;
	height: 60px; /* 确保固定高度 */
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 5%;
}

.top.fixed-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	background: white; /* 确保背景不透明 */
}


/* 滚动时阴影效果 */
.top.scrolled {
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* 修复移动菜单定位 */
.top2 {
	position: fixed;
	top: 60px; /* 与header高度一致 */
	left: 0;
	width: 100%;
	z-index: 999;
}


li,ul,ol{
	list-style: none;
}

a{
	text-decoration: none;
	color: #000;
}

.flex{
	display: flex;
}

.grid {
	display: grid;
}
.auto{
	margin: 0 auto;
}
.clearfix::after{
	content: '';
	display: block;
	clear: both;
}


@media (min-width:1024px) and (max-width:1920px) {
	.father {
		width: 100%;
		text-align: center;
		padding-top: 70px !important; /* 强制覆盖原有样式 */
	}

	/* 基础样式 */
	.top {
		width: 100%;
		height: 70px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff; /* 背景色 */
		padding: 0 20px; /* 增加内边距 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
		position: fixed; /* 新增 */
		top: 0;          /* 新增 */
		left: 0;        /* 新增 */
		z-index: 1000;   /* 新增 */
		/* 其他原有样式保持不变... */
		box-sizing: border-box;
	}

	.top p {
		width: auto; /* 自动宽度 */
		height: 70px;
		line-height: 70px;
		display: flex;
		align-items: center;
		gap: 10px; /* logo 和文字间距 */
	}

	.top p img {
		height: 56px;
		vertical-align: middle;
	}

	.top p span {
		font-size: 22px;
		font-weight: bold;
		display: inline; /* 显示文字 */
	}

	.top ul {
		width: 550px;
		height: 70px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		list-style: none; /* 移除默认列表符号 */
		padding: 0;
		margin: 0;
	}

	.top li {
		flex: 1;
		line-height: 70px;
		text-align: center;
		transition: background-color 0.3s ease; /* 平滑过渡 */
	}

	.top li a {
		display: block;
		text-decoration: none; /* 移除下划线 */
		color: #333; /* 默认文字颜色 */
		padding: 0 10px; /* 增加内边距 */
		height: 100%;
		transition: color 0.3s ease; /* 平滑过渡 */
	}

	/* 鼠标悬停效果 */
	.top li:hover {
		background-color: rgba(0, 0, 0, 0.05); /* 淡色背景 */
	}

	.top li:hover a {
		color: #000; /* 悬停时文字颜色加深 */
	}

	/* 点击时效果 */
	.top li:active {
		background-color: rgba(0, 0, 0, 0.1); /* 稍深的背景色 */
	}

	.top li:active a {
		color: #000; /* 点击时文字颜色加深 */
	}

	/* 当前选中项效果 */
	.top li.active {
		background-color: rgba(0, 0, 0, 0.1); /* 选中项背景色 */
	}

	.top li.active a {
		color: #000; /* 选中项文字颜色加深 */
		font-weight: bold; /* 加粗文字 */
	}

	.top .imgVip {
		height: 60px;
		margin-right: 35px;
	}
	.top2 {
		display: none;
	}
	.menu {
		display: none;
	}
	.banner {
		width: 100%;
		height: auto;
		display: block;
	}
	.con1 {
		width: 100%;
		height: 660px;
		background-color: #F4F4F4;
		box-sizing: border-box;
		padding-top: 50px;
	}
	.content1 {
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}
	.lf1 {
		width: 35%;
	}
	.lf1 h2 {
		font-size: 40px;
	}
	.lf1 a {
		font-size: 15px;
		color: #888;
		font-style: italic;
	}
	.lf1 ul {
		width: 160px;
		height: 260px;
		margin: 70px 0 0 90px;
		border-left: 1px solid #333;
		box-sizing: border-box;
		padding-left: 60px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.lf1 ul li {
		line-height: 50px;
		text-align: left;
		width: 100px;
	}
	.lf1 ul li.active {
		font-weight: bold;
	}
	.rt1 {
		width: 60%;
	}
	.rt1 p {
		font-style: italic;
	}
	.rt1 b {
		font-size: 20px;
	}
	.rt1 img,.rt1 video {
		width: 100%;
		height: auto;
		object-fit: cover;
		border-radius: 15px;
	}
	.div2 {
		width: 90%;
		height: 70px;
		margin: 30px auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.div2 h2 {
		font-size: 40px;
	}
	.div2 a {
		color: #888;
		font-style: italic;
	}
	.con2 {
		width: 90%;
		height: 530px;
		margin: 50px auto;
		display: flex;
		border-top: 1px solid #ccc;
	}
	.con2 div {
		flex: 1;
		box-sizing: border-box;
		padding: 25px;
	}
	.con2 div ~ div {
		border-left: 1px solid #ccc;
	}
	.con2 div p:nth-of-type(1) {
		font-style: italic;
		font-size: 22px;
		padding: 50px 0 30px;
	}
	.con2 div p:nth-of-type(2) {
		font-size: 18px;
		padding-bottom: 20px;
	}
	.con2 div img {
		width: 100%;
		height: auto;
		border-radius: 15px;
	}
	.footer {
		width: 100%;
		height: 220px;
		background-color: #373737;
		color: #eee;
		box-sizing: border-box;
		padding: 30px 0 0 0;
	}
	.ft {
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		font-style: italic;
	}
	.ft .rt2 p:nth-of-type(1) {
		width: 350px;
		padding-top: 30px;
		display: flex;
		justify-content: space-between;
	}
	.ft .rt2 p:last-child {
		margin-top: 50px;
	}
	.ft img {
		width: 80px;
	}
	.ft a {
		color: #eee;
	}
}

@media (min-width:1921px) {
	.father {
		width: 1921px;
	}

	/* 基础样式 */
	.top {
		width: 100%;
		height: 70px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff; /* 背景色 */
		padding: 0 20px; /* 增加内边距 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
	}

	.top p {
		width: auto; /* 自动宽度 */
		height: 70px;
		line-height: 70px;
		display: flex;
		align-items: center;
		gap: 10px; /* logo 和文字间距 */
	}

	.top p img {
		height: 56px;
		vertical-align: middle;
	}

	.top p span {
		font-size: 22px;
		font-weight: bold;
		display: inline; /* 显示文字 */
	}

	.top ul {
		width: 550px;
		height: 70px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		list-style: none; /* 移除默认列表符号 */
		padding: 0;
		margin: 0;
	}

	.top li {
		flex: 1;
		line-height: 70px;
		text-align: center;
		transition: background-color 0.3s ease; /* 平滑过渡 */
	}

	.top li a {
		display: block;
		text-decoration: none; /* 移除下划线 */
		color: #333; /* 默认文字颜色 */
		padding: 0 10px; /* 增加内边距 */
		height: 100%;
		transition: color 0.3s ease; /* 平滑过渡 */
	}

	/* 鼠标悬停效果 */
	.top li:hover {
		background-color: rgba(0, 0, 0, 0.05); /* 淡色背景 */
	}

	.top li:hover a {
		color: #000; /* 悬停时文字颜色加深 */
	}

	/* 点击时效果 */
	.top li:active {
		background-color: rgba(0, 0, 0, 0.1); /* 稍深的背景色 */
	}

	.top li:active a {
		color: #000; /* 点击时文字颜色加深 */
	}

	/* 当前选中项效果 */
	.top li.active {
		background-color: rgba(0, 0, 0, 0.1); /* 选中项背景色 */
	}

	.top li.active a {
		color: #000; /* 选中项文字颜色加深 */
		font-weight: bold; /* 加粗文字 */
	}

	.top .imgVip {
		height: 60px;
	}
	.top2 {
		display: none;
	}
	.menu {
		display: none;
	}
	.banner {
		width: 100%;
		height: auto;
		display: block;
	}
	.con1 {
		width: 100%;
		height: 660px;
		background-color: #F4F4F4;
		box-sizing: border-box;
		padding-top: 50px;
	}
	.content1 {
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}
	.lf1 {
		width: 35%;
	}
	.lf1 h2 {
		font-size: 40px;
	}
	.lf1 a {
		font-size: 15px;
		color: #888;
		font-style: italic;
	}
	.lf1 ul {
		width: 160px;
		height: 260px;
		margin: 70px 0 0 90px;
		border-left: 1px solid #333;
		box-sizing: border-box;
		padding-left: 60px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.lf1 ul li {
		line-height: 50px;
		text-align: left;
		width: 100px;
	}
	.lf1 ul li.active {
		font-weight: bold;
	}
	.rt1 {
		width: 60%;
	}
	.rt1 p {
		font-style: italic;
	}
	.rt1 b {
		font-size: 20px;
	}
	.rt1 img,.rt1 video {
		width: 100%;
		height: auto;
		object-fit: cover;
		border-radius: 15px;
	}
	.div2 {
		width: 90%;
		height: 70px;
		margin: 30px auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.div2 h2 {
		font-size: 40px;
	}
	.div2 a {
		color: #888;
		font-style: italic;
	}
	.con2 {
		width: 90%;
		height: 530px;
		margin: 50px auto;
		display: flex;
		border-top: 1px solid #ccc;
	}
	.con2 div {
		flex: 1;
		box-sizing: border-box;
		padding: 25px;
	}
	.con2 div ~ div {
		border-left: 1px solid #ccc;
	}
	.con2 div p:nth-of-type(1) {
		font-style: italic;
		font-size: 22px;
		padding: 50px 0 30px;
	}
	.con2 div p:nth-of-type(2) {
		font-size: 18px;
		padding-bottom: 20px;
	}
	.con2 div img {
		width: 100%;
		height: auto;
		border-radius: 15px;
	}
	.footer {
		width: 100%;
		height: 220px;
		background-color: #373737;
		color: #eee;
		box-sizing: border-box;
		padding: 30px 0 0 0;
	}
	.ft {
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		font-style: italic;
	}
	.ft .rt2 p:nth-of-type(1) {
		width: 350px;
		padding-top: 30px;
		display: flex;
		justify-content: space-between;
	}
	.ft .rt2 p:last-child {
		margin-top: 50px;
	}
	.ft img {
		width: 80px;
	}
	.ft a {
		color: #eee;
	}
}


@media (min-width:320px) and (max-width:768px) {
	.father {
		width: 100%;
	}

	.top .imgVip {
		height: 60px;
	}
	.menu {
		width: 50px;
		height: 70px;

		margin: 10px 50px 0 0 !important;
		position: relative;
		z-index: 1001;
		filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));


}
	.top2 {
		width: 100%;
		margin: 0 auto;
		background-color: rgba(0, 0, 0, .4);
		display: none;
	}
	.top2 li {
		line-height: 35px;
		text-align: center;
	}
	.top2 a {
		display: block;
		color: #fff;
	}
	.banner {
		width: 100%;
		height: auto;
		display: block;
	}
	.con1 {
		width: 100%;
		height: 560px;
		background-color: #F4F4F4;
		box-sizing: border-box;
		padding-top: 50px;
	}
	.content1 {
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.lf1 {
		width: 100%;
	}
	.lf1 h2 {
		font-size: 12px;
	}
	.lf1 a {
		font-size: 8px;
		color: #888;
		font-style: italic;
	}
	.lf1 ul {
		width: 160px;
		height: 260px;
		margin: 70px 0 0 90px;
		border-left: 1px solid #333;
		box-sizing: border-box;
		padding-left: 60px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.lf1 ul li {
		line-height: 50px;
		text-align: left;
		width: 100px;
	}
	.lf1 ul li.active {
		font-weight: bold;
	}
	.rt1 {
		width: 100%;
	}
	.rt1 p {
		font-style: italic;
		margin-bottom: 20px;
	}
	.rt1 b {
		font-size: 12px;
	}
	.rt1 img,.rt1 video {
		width: 100%;
		height: auto;
		object-fit: cover;
		border-radius: 12px;
	}
	.div2 {
		width: 90%;
		height: 70px;
		margin: 30px auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.div2 h2 {
		font-size: 12px;
	}
	.div2 a {
		color: #888;
		font-style: italic;
		font-size: 8px;
	}
	.con2 {
		width: 90%;
		margin: 50px auto;
		display: flex;
		flex-wrap: wrap;
		border-top: 1px solid #ccc;
	}
	.con2 div {
		width: 100%;
		box-sizing: border-box;
		padding: 25px;
	}
	.con2 div ~ div {
		/* border-left: 1px solid #ccc; */
	}
	.con2 div p:nth-of-type(1) {
		font-style: italic;
		font-size: 14px;
		padding: 50px 0 30px;
	}
	.con2 div p:nth-of-type(2) {
		font-size: 13px;
		padding-bottom: 20px;
	}
	.con2 div img {
		width: 100%;
		height: auto;
		border-radius: 15px;
	}
	.footer {
		width: 100%;
		height: 300px;
		background-color: #373737;
		color: #eee;
		box-sizing: border-box;
		padding: 30px 0 0 0;
	}
	.ft {
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		font-style: italic;
	}
	.ft .lf2 {
		width: 100%;
	}
	.ft .rt2 p:nth-of-type(1) {
		width: 100%;
		padding-top: 30px;
		display: flex;
		justify-content: space-between;
	}
	.ft .rt2 p:last-child {
		margin-top: 50px;
	}
	.ft img {
		width: 80px;
	}
	.ft a {
		color: #eee;
	}
}


@media (min-width:768px) and (max-width:1024px) {
	.father {
		width: 100%;
		padding-top: 60px; /* 移动端导航高度较小 */
	}

	.top.fixed-header {
		position: fixed; /* 确保移动端也固定 */
	}

	/* 在此处添加新样式 */
	.menu {
		margin: 10px 10px 0 0 !important;
		position: relative;
		z-index: 1001;
		filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
	}




	.top2 {
		display: none;
	}
	.menu {
		display: none;
	}
	.banner {
		width: 100%;
		height: auto;
		display: block;
	}
	.con1 {
		width: 100%;
		height: 660px;
		background-color: #F4F4F4;
		box-sizing: border-box;
		padding-top: 50px;
	}
	.content1 {
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.lf1 {
		width: 100%;
	}
	.lf1 h2 {
		font-size: 40px;
	}
	.lf1 a {
		font-size: 15px;
		color: #888;
		font-style: italic;
	}
	.lf1 ul {
		width: 160px;
		height: 260px;
		margin: 70px 0 0 90px;
		border-left: 1px solid #333;
		box-sizing: border-box;
		padding-left: 60px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.lf1 ul li {
		line-height: 50px;
		text-align: left;
		width: 100px;
	}
	.lf1 ul li.active {
		font-weight: bold;
	}
	.rt1 {
		width: 100%;
	}
	.rt1 p {
		font-style: italic;
		margin-bottom: 20px;
	}
	.rt1 b {
		font-size: 20px;
	}
	.rt1 img,.rt1 video {
		width: 100%;
		height: auto;
		object-fit: cover;
		border-radius: 15px;
	}
	.div2 {
		width: 90%;
		height: 70px;
		margin: 30px auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.div2 h2 {
		font-size: 40px;
	}
	.div2 a {
		color: #888;
		font-style: italic;
	}

	.con2 {
		width: 90%;
		margin: 50px auto;
		display: flex;
		flex-wrap: wrap;
		border-top: 1px solid #ccc;
	}
	.con2 div {
		width: 100%;
		box-sizing: border-box;
		padding: 25px;
	}
	.con2 div ~ div {
		/* border-left: 1px solid #ccc; */
	}
	.con2 div p:nth-of-type(1) {
		font-style: italic;
		font-size: 22px;
		padding: 50px 0 30px;
	}
	.con2 div p:nth-of-type(2) {
		font-size: 18px;
		padding-bottom: 20px;
	}
	.con2 div img {
		width: 100%;
		height: auto;
		border-radius: 15px;
	}
	.footer {
		width: 100%;
		height: 300px;
		background-color: #373737;
		color: #eee;
		box-sizing: border-box;
		padding: 30px 0 0 0;
	}
	.ft {
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		font-style: italic;
	}
	.ft .lf2 {
		width: 100%;
	}
	.ft .rt2 p:nth-of-type(1) {
		width: 100%;
		padding-top: 30px;
		display: flex;
		justify-content: space-between;
	}
	.ft .rt2 p:last-child {
		margin-top: 50px;
	}
	.ft img {
		width: 80px;
	}
	.ft a {
		color: #eee;
	}
}