@import "./common.less";

:root {
	--loader-bg-color: #E5E7EB;
	/* 加载背景色 */
	--loader-shine-color: rgba(255, 255, 255, 1);
	/* 光效颜色 */
	--loader-animation-duration: 1.5s;
}

h1,
h2,
h3,
h4,
h5,
.s_content {
	line-height: 1.2em;
}

.image-container {
	position: relative;
	background: #ebebeb3b;
}

/* 关键修改：使用::before伪元素替代原来的.loader-shine元素 */
.image-container::before {
	content: '';
	/* 伪元素必须有content属性 */
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background: linear-gradient(to right,
			rgba(255, 255, 255, 0) 0%,
			var(--loader-shine-color) 50%,
			rgba(255, 255, 255, 0) 100%);
	animation: pulseLoader var(--loader-animation-duration) infinite;
	/* 加载完成后隐藏伪元素 */
	opacity: 1;
	transition: opacity 0.3s ease;
}

.image-container::after {
	background: border-radius;
}

/* 图片加载完成后隐藏伪元素动画 */
.image-container.loaded::before {
	opacity: 0;
	display: none;
}

.image-container.loaded {
	background: initial;
}

.image-loading {
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

.image-loaded {
	opacity: 1;
}

@keyframes pulseLoader {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(100%);
	}
}

body {
	font-size: var(--ft16);
	color: #000;
	.d-flex;

	.flex-column;
	min-height: 100vh;

	@media (max-width: 768px) {}
}

main {
	flex: 1;
}

a {
	transition: all 0.3s;


}

@keyframes slide-right {
	0% {
		transform: translateX(-20px);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

.Contact {
	margin-top: vaR(--p100);
}

.btn-shine {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 12px 48px;
	color: #fff;
	background: linear-gradient(to right, #000 0, #fff 10%, #000 20%);
	background-position: 0;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: shine 3s infinite linear;
	animation-fill-mode: forwards;
	-webkit-text-size-adjust: none;
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
	white-space: nowrap;
	font-family: "Poppins", sans-serif;
}

@keyframes shine {
	0% {
		background-position: 0;
	}

	60% {
		background-position: 180px;
	}

	100% {
		background-position: 180px;
	}
}

.layui-btn {
	position: relative;
}

header {
	--color: #fff;
	color: var(--color);

	.layui-nav .layui-this:after,
	.layui-nav-bar {
		display: none;
	}

	.layui-nav-more {
		display: none;
	}

	.navMobile {
		color: var(--color);

	}

	.menu_button .line {

		stroke: var(--color);
	}

	.nav-child {
		height: 0;
		transition: all 0.3s;
		overflow: hidden;
		position: absolute;
		left: 0;
		right: 0;

		* {
			line-height: 1.2em;
		}

		.Block {
			color: #222222;
			padding: var(--p40) 0;
			background: #fff;
			height: 100%;

			.layui-main {
				.d-grid;
				.grid2;
				.al-fs;
				gap: var(--p80);
			}

			h1 {
				font-size: vaR(--ft32);
			}

			ul {
				.d-grid;
				.grid3;
				gap: var(--p20);
				margin-top: var(--p35);
			}

			.title {
				color: #999999;
				font-size: var(--ft15);
				margin-bottom: var(--p15);
				line-height: 1em;
				text-transform: uppercase;
			}

			dl {
				margin-top: vaR(--p20);
				.d-grid;
				gap: vaR(--p15);

				a {
					text-transform: uppercase;
					font-size: vaR(--ft16);
					padding: 0;
					color: #000;

					&:hover {
						.ftc;
					}
				}
			}
		}
	}

	.layui-main,
	.layui-nav,
	.layui-nav .product-item {
		position: unset;
	}

	.layui-nav-item {
		&:hover {
			.nav-child {
				height: 400px;
			}
		}
	}

	.img1 {
		display: block;
		max-width:150px;
	}

	.img2 {
		display: none;
		;
	}

	.dropdown {
		.d-flex;
		.al-c;
		gap: 6px;
		font-size: var(--ft14);
		margin-left: vaR(--p25);

		i {
			font-size: var(--ft12);

		}
	}

	--bgc:#18FF00;

	.logo {
		flex: 1;
	}

	.layui-nav-child {
		left: 50%;
		transform: translateX(-50%) !important;
		top: 100%;
		border-radius: 10px;
	}

	.layui-nav .layui-nav-more {

		right: -14px;
	}

	.layui-nav .layui-nav-child a:hover {
		color: var(--ftc);
	}

	.layui-main {
		.d-flex;
		.al-c;
	}

	.layui-nav>.layui-nav-item {
		line-height: 100px;
		margin: 0 var(--p20);

	}

	.layui-nav .layui-nav-item>a {
		text-transform: uppercase;
		font-size: var(--ft14);
		color: var(--color);
		padding: 0;
		position: relative;

		&::before {
			content: "";
			position: absolute;
			left: 0;
			top: 65%;
			width: 0;
			height: 3px;
			background-color: #16b777;
			transition: all .2s;
			-webkit-transition: all .2s;
			pointer-events: none;
		}
	}

	.layui-nav .layui-this>a,
	.layui-nav .layui-nav-item:hover>a {
		&::before {
			width: 100%;
			right: 0;
		}
	}

	.layui-nav .layui-nav-item>a:hover,
	.layui-nav .layui-this>a {
		color: #fff;

	}

	.input-container {
		position: relative;
		display: flex;
		align-items: center;
	}

	.input {
		width: 35px;
		height: 35px;
		border-radius: 0;
		outline: none;
		background-color: #fff;
		color: var(--color);
		padding: 18px 16px;
		background-color: transparent;
		cursor: pointer;
		transition: all .5s ease-in-out;
		border-top: 1px solid rgba(0, 0, 0, 0);
		border-bottom: 1px solid rgba(0, 0, 0, 0);
	}

	.input::placeholder {
		color: transparent;
	}

	.input:focus::placeholder {
		color: rgba(255, 255, 255, 0.6);
	}

	.input:focus,
	.input:not(:placeholder-shown) {
		height: 35px;
		border-bottom: 1px solid var(--color);
		width: 145px;
		font-size: var(--ft14);
		cursor: none;
		padding: 8px 16px 8px 36px;
	}

	.icon {
		position: absolute;
		left: 2px;
		height: 24px;
		width: 24px;
		border-radius: 99px;
		z-index: -1;

		path {
			fill: var(--color);

		}
	}

	.input:focus+.icon,
	.input:not(:placeholder-shown)+.icon {
		z-index: 0;
		background-color: transparent;
		border: none;
	}

	&.bgcolor {
		background: rgba(255, 255, 255, 0.8);
	}

	&.bgcolor,

	&.black {
		.input:focus::placeholder {

			color: rgb(131, 128, 128);
		}

		--color:#222;

		.img1 {
			display: none;
		}

		.img2 {
			display: block;
		}

		.layui-nav .layui-nav-item a:hover,
		.layui-nav .layui-this a {
			color: var(--color);
		}
	}
}

footer {
	padding: var(--p100) 0;
	background: #000000;
	color: #fff;

	.footer2 {
		.d-flex;
		.al-c;
		.jc-s;
		padding: var(--p20) 0;
		margin-top: vaR(--p25);
		border-top: 1px solid #fff;
	}

	.footer1 {
		.d-flex;
		.al-fs;
		.jc-s;
		flex-wrap: wrap;

	}

	a[href]:hover {
		opacity: 0.8;
	}

	.foot1 {
		width: 350px;
		max-width: 100%;
		.d-grid;
		gap: vaR(--p20);

		.desc {
			width: 90%;
		}

		form {
			padding: 0 var(--p15) 0 var(--p30);
			--input: 50px;

			width: 100%;
			background: rgba(255, 255, 255, 0.3);
			border-radius: 25px;

			.d-flex;
			.al-c;

			input {
				color: #ffff;
				padding: 0;
				border: none;
				flex: 1;
			}
		}
	}

	button {
		border-radius: 50%;
		width: 28px;
		background: #fff;
		aspect-ratio: 1/1;
		.flex-center;
		cursor: pointer;
	}

	button:hover .arrow {
		animation: slide-right .6s ease-out both;
	}

	.footerUl {
		.d-flex;
		.al-fs;
		.jc-s;
		gap: var(--p100);
	}

	.list {
		max-width: 300px;

		h1 {
			font-size: vaR(--ft26);
			margin-bottom: var(--p20);
		}

		i {
			display: block;
			opacity: 0.8;
			margin-right: 10px;
		}

		.item {
			.d-flex;
			.al-fs;
		}

		a {
			left: 0;
			position: relative;

		}

		a:hover {
			opacity: 1;
			left: 1em;
		}

		dl {
			padding-left: 1em;
			.d-grid;
			gap: var(--p10);
		}
	}

	.Info {
		.d-grid;
		gap: var(--p30);
	}

}

.Contact {
	--main: 1400px;

	.layui-main {
		.d-flex;
		.al-fs;
		.jc-s;
		gap: var(--p30);
	}

	.Info {
		width: 650px;
		max-width: 100%;

		h1 {
			font-size: vaR(--ft60);
		}

		.desc {
			color: #555555;
			margin-top: vaR(--p50);
		}

		ul {
			margin-top: vaR(--p50);
			.d-grid;
			.grid2;
			gap: var(--p60);
		}

		.sub {
			margin-top: vaR(--p20);
			color: #555555;
		}

		h5 {
			font-size: var(--ft24);
		}

		padding:var(--p70) 0;
	}
}

@keyframes scaleDown {
	from {
		transform: scale(1.1);
		opacity: 1;
		/* 可选：添加淡入效果 */
	}

	to {
		transform: scale(1);
		opacity: 1;
		/* 可选：添加淡入效果 */
	}
}

.From {

	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	width: 540px;
	max-width: 100%;
	color: #fff;
	.bgc;
	border-radius: 10px;
	padding: var(--p40);
	gap: var(--p20);

	.layui-btn {
		background: #fff;
		width: 100%;
		text-transform: uppercase;

		.btn-shine {
			transition: all 0.3s;
		}

		&:hover {
			opacity: 1;
			scale: 1.05;
		}
	}

	--input_scolor:var(--ftc);

	.layui-form-select .layui-edge {

		border-top-color: #fff;
	}

	.layui-input,
	.layui-select,
	.layui-textarea {

		border: none;
		--input_pcolor: rgba(255, 255, 255, 0.3);
		padding: 0;
		color: #fff;
		border-bottom: 1px solid #fff;
	}

	.layui-textarea {
		margin-top: var(--p10);
	}

	.layui-input:focus,
	.layui-textarea:focus {
		box-shadow: none;
		border-color: rgba(255, 255, 255, 0.6) !important;
	}

	.foot {
		margin-top: var(--p10);
	}
}

.top_box {

	position: relative;
	color: #fff;
	display: flex;
	align-items: center;

	.img {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		img {
			transition: all 0.3s;

			animation: scaleDown 5s ease-out forwards;
		}
	}

	h1 {
		font-size: var(--ft56);
	}

	nav {
		margin-top: var(--p10);
		.d-flex;
		gap: var(--p15);
		font-size: vaR(--ft14);

		* {
			opacity: 0.8;
		}

		a:hover {
			opacity: 1;
			color: var(--ftc)
		}
	}

	.block {
		.flex-center;
		padding-top: var(--p100);
		position: relative;
		z-index: 1;
		width: 100%;
		aspect-ratio: 1920/500;
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2));
	}
}

.New {}

.NavTab {
	.flex-center;
	flex-wrap: wrap;
	gap: var(--p25);

	.item {
	    cursor: pointer;
		color: #444444;
		padding: var(--p10) var(--p30);
		border-radius: 25px;
		border: 1px solid #D2D2D2;
		position: relative;
		overflow: hidden;
		transition: all 0.3s;

		&:before {
			content: "";
			position: absolute;
			left: -4em;
			width: 4em;
			height: 100%;
			top: 0;
			transition: transform .4s ease-in-out;
			background: linear-gradient(to right, transparent 1%, rgba(126, 205, 40, 0.1) 40%, rgba(126, 205, 40, 0.1) 60%, transparent 100%);
		}

		&:hover:before {
			transform: translateX(15em);
		}
            &.layui-this,
		&.active {
			background: var(--ftc);
			color: #fff;
		}
	}
}

.pagenum {

	input,
	button,
	a,
	span {
		border-color: #fff;
		min-width: 38px;
	}

	a:hover {
		color: var(--ftc);
	}

	.page-number {
		border-radius: 50%;
	}
}

.NewList {

	margin-top: vaR(--p60);
	.d-grid;
	.grid3;
	gap: var(--p80) var(--p25);

	.item {
		display: block;
		overflow: visible;

		.imgBlock {
			transition: all 0.3s;
		}

		&:hover {
			h5 {
				.ftc;
			}

			.imgBlock {

				box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
			}

			.img {
				border-radius: 0;
			}

			.btn::after {
				width: 100%;
			}

			.btn p::before {
				width: 100%;
			}

			.btn svg {
				transform: translateX(4px);
				color: var(--hovered-color);
			}
		}


	}

	.img {
		transition: all 0.3s;
		aspect-ratio: 410/310;
		border-radius: 20px;
	}

	.info {
		.d-flex;
		.al-c;
		margin-top: var(--p15);
	}

	.tag {
		.flex-center;
		.al-c;
		margin-right: var(--p20);
		display: inline-block;
		background: #E7F8F0;
		font-size: vaR(--ft14);
		border-radius: 5px;
		padding: 5px var(--p10);
		color: var(--ftc);
		line-height: normal;
	}

	.date {
		letter-spacing: 0.1em;
		color: #222222;
		opacity: 0.4;
		white-space: nowrap;
	}

	h5 {
		transition: all 0.3s;
		font-size: var(--ft26);
		.line-clamp2;
		min-height: 2.4em;
		margin-top: vaR(--p15);
		margin-bottom: var(--p25);
	}

	.btn {
		padding: 0;
		margin: 0;
		border: none;
		background: none;
		cursor: pointer;
		--primary-color: #111;
		--hovered-color: var(--ftc);
		position: relative;
		display: inline-flex;
		gap: 0.5rem;
		align-items: center;

		p {
			margin: 0;
			position: relative;
			color: var(--primary-color);
		}

		&::after {
			position: absolute;
			content: "";
			width: 0;
			left: 0;
			bottom: 0;
			background: var(--hovered-color);
			height: 2px;
			transition: 0.3s ease-out;
		}

		& p::before {
			position: absolute;
			/*   box-sizing: border-box; */
			content: "Read Article";
			width: 0%;
			inset: 0;
			color: var(--hovered-color);
			overflow: hidden;
			transition: 0.3s ease-out;
		}

		svg {
			color: var(--primary-color);
			transition: 0.2s;
			position: relative;
			width: 15px;
			transition-delay: 0.2s;
		}
	}


}

.detailsMain {
	section {
		padding: var(--p30) 0 var(--p80);
	}

	.info {
		.flex-center;
		gap: vaR(--p30);
		font-weight: bold;

		i {
			margin-right: 5px;
			color: vaR(--ftc);
		}

		.tag {
			.flex-center;
			display: inline-block;
			.bgc;

			font-size: vaR(--ft14);
			border-radius: 5px;
			padding: 5px var(--p10);
			color: #fff;
		}
	}

	.layui-main {
		background: #fff;
		padding: var(--p40) var(--p30);
	}

	h3 {
		font-size: var(--ft46);
		margin-bottom: vaR(--p30);
		text-align: center;
	}

	.time {
		text-align: center;
		color: #666;
	}

	.con {
		margin: var(--p30) 0;
		min-height: 20vh;
	}

}

.detailsFoot {
	margin-top: vaR(--p40);
	padding-top: var(--p30);
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	.d-grid;
	gap: vaR(--p15);
	font-size: vaR(--ft14);

	>div {
		.d-flex;
		.al-c;
	}

	span {
		color: #666;
	}

	a {
		.line-clamp1;

		&:hover {
			color: vaR(--ftc);
		}
	}

}

.Projects {}

.TitleCom {
	margin-bottom: var(--p50);

	text-align: center;

	.t1 {
		text-transform: uppercase;
		color: #666666;
		font-size: var(--ft18);
		gap: var(--p10);
	}

	h1 {
		margin-top: var(--p10);
		font-size: var(--ft60);
	}

	.desc {
		width: 80%;
		color: #666666;
		font-size: vaR(--ft18);
		margin: var(--p35) auto 0;

		b {
			color: #F9A010;
			font-size: var(--ft26);
		}
	}
}

@keyframes scaleLoop {
	0% {
		transform: scale(1);
		/* 初始大小 */
	}

	50% {
		transform: scale(1.05);
		/* 放大到1.2倍（可调整比例） */
	}

	100% {
		transform: scale(1);
		/* 回到初始大小 */
	}
}

.ProjectsList {
	margin-top: vaR(--p80);
	.d-grid;
	.grid4;

	.item {
		aspect-ratio: 480/600;
		position: relative;
		overflow: hidden;

		.content {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			.d-flex;
			.al-fe;
			padding-bottom: vaR(--p40);
			z-index: 2;
			transition: all 0.5s;

			h5 {
				box-shadow: 0 8px 16px rgba(255, 255, 255, 0.58);
				transition: all 0.5s;
				width: 80%;
				margin-left: 20%;
				padding: var(--p20);
				.bgc;
				color: #fff;
				opacity: 0;
				position: relative;
				top: 100%;
			}
		}

		&:hover {
			.content {
				background: rgba(0, 0, 0, 0.2);
			}

			h5 {
				opacity: 1;
				top: 0;
			}

			img {

				animation: scaleLoop 8s infinite ease-in-out;
			}
		}
	}
}

.Certi {
	--main: 1400px;
}

.CertiList {
	margin-top: vaR(--p90);
	.d-grid;
	.grid4;

	gap: var(--p50) var(--p40);

	h5 {
		font-weight: normal;
		text-align: center;
		margin-top: vaR(--p15);
		color: #666;
		font-size: var(--ft14);
	}

	.img {
		flex: 1;
	}

	.item {
		.d-flex;
		.flex-column;
	}
}

.ProjectsDetailsMain {
	h3 {
		font-size: var(--ft36);
	}

	.con {
		margin-top: var(--p40);
	}

	.layui-main {
		.d-grid;
		gap: var(--p20);
		grid-template-columns: 1fr 0.4fr;
	}

	.Info {
		border-radius: 10px;
		margin-bottom: var(--p30);
		overflow: hidden;
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);

		.t1 {
			padding: var(--p10) 0;
			color: #fff;
			font-size: vaR(--ft24);
			text-align: center;
			background: #072032;

		}

		ul {
			.d-grid;
			padding: var(--p10) var(--p35);

			li {
				border-bottom: 1px solid #D4D4D4;
				;
				.d-grid;
				grid-template-columns: 0.2fr 1fr;
				gap: 10px;
				padding: var(--p20) 0;

				&:last-child {
					border-bottom: 0;
				}
			}
		}
	}
}

.ContactBlock {
	position: relative;

	.info:hover {
		.InfoBlock {
			* {
				color: #fff;
			}
		}

		img {

			animation: floatUpDown 1.2s infinite ease-in-out;
		}

		.InfoBlock::before {
			width: 100%;
		}
	}

	.img {
		border-radius: 8px;
	}

	.Block {
		left: 0;
		right: 0;
		position: relative;
		bottom: 300px;
		background-image: url(../images/bg.png);
		.bg_img;
		background-color: initial;
		.d-flex;
		.al-c;
		.jc-fe;
		.flex-column;
		gap: var(--p20);
		padding-top: var(--p200);
		padding-bottom: var(--p60);

	}

	h5 {
		font-size: vaR(--ft34);
		text-align: center;
		color: #fff;
	}

	.InfoBlock {
		background: #FFFFFF;
		position: relative;
		border-radius: 12px;
		overflow: hidden;
		padding: VAR(--p10);

		* {
			position: relative;
			z-index: 2;
			transition: all 0.3s;
		}

		&::before {
			transition: all 0.3s;
			display: block;
			content: '';
			position: absolute;
			z-index: 0;
			right: 0;
			width: 5px;
			top: 0;
			bottom: 0;
			.bgc;
		}
	}

	.info {
		position: relative;
		text-align: center;
		width: 419px;
		max-width: 70%;

		.sub {
			font-size: var(--ft14);
			color: #222222;
		}

		.tel {
			font-size: var(--ft26);

		}

		img {
			z-index: 5;
			transform: translateY(-50%);
			top: 50%;
			left: -30PX;
			position: absolute;
		}
	}
}

:root {
	--loader-size: 20px;
	/* 统一控制加载动画的基础尺寸 */
}

.loader {
	display: flex;
	justify-content: center;
	align-items: center;
	--color: hsl(0, 0%, 87%);
	/* 加载动画主色 */
	--animation: 2s ease-in-out infinite;
	/* 统一动画时长与循环 */
}

/* 单个圆形加载主体 */
.loader .circle {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: var(--loader-size);
	/* 使用root定义的尺寸 */
	height: var(--loader-size);
	/* 使用root定义的尺寸 */
	border: solid 2px var(--color);
	border-radius: 50%;
	/* 圆形外观 */
	background-color: transparent;
	animation: circle-keys var(--animation);
	/* 主体缩放动画 */
}

/* 圆形内部小点 */
.loader .circle .dot {
	position: absolute;
	transform: translate(-50%, -50%);
	/* 居中定位 */
	width: calc(var(--loader-size) * 0.8);
	/* 相对尺寸（80%） */
	height: calc(var(--loader-size) * 0.8);
	/* 相对尺寸（80%） */
	border-radius: 50%;
	background-color: var(--color);
	animation: dot-keys var(--animation);
	/* 小点显隐动画 */
}

/* 圆形外部扩散轮廓 */
.loader .circle .outline {
	position: absolute;
	transform: translate(-50%, -50%);
	/* 居中定位 */
	width: var(--loader-size);
	/* 使用root定义的尺寸 */
	height: var(--loader-size);
	/* 使用root定义的尺寸 */
	border-radius: 50%;
	animation: outline-keys var(--animation);
	/* 轮廓扩散动画 */
}

/* 主体圆形缩放动画 */
@keyframes circle-keys {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		transform: scale(1.5);
		/* 中间帧放大 */
		opacity: 0.5;
		/* 中间帧半透明 */
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* 内部小点显隐动画 */
@keyframes dot-keys {
	0% {
		transform: translate(-50%, -50%) scale(1);
		/* 初始显示 */
	}

	50% {
		transform: translate(-50%, -50%) scale(0);
		/* 中间帧隐藏 */
	}

	100% {
		transform: translate(-50%, -50%) scale(1);
		/* 结束帧显示 */
	}
}

/* 外部轮廓扩散动画 */
@keyframes outline-keys {
	0% {
		transform: translate(-50%, -50%) scale(0);
		outline: solid var(--loader-size) var(--color);
		/* 使用root尺寸作为轮廓粗度 */
		outline-offset: 0;
		opacity: 1;
	}

	100% {
		transform: translate(-50%, -50%) scale(1);
		outline: solid 0 transparent;
		/* 结束轮廓消失 */
		outline-offset: var(--loader-size);
		/* 使用root尺寸作为扩散距离 */
		opacity: 0;
	}
}

@keyframes floatUpDown {
	0% {
		/* 初始位置：继承原有 transform（translateY(-50%)），再叠加 0px 位移 */
		transform: translateY(-50%) translateY(0px);
	}

	50% {
		/* 向下浮动：在原有居中基础上，再向下移 8px（可调整浮动距离） */
		transform: translateY(-50%) translateY(8px);
	}

	100% {
		/* 向上浮动：回到初始位置（也可调整为向上移，如 translateY(-8px)） */
		transform: translateY(-50%) translateY(0px);
	}
}

.SoultList {
	.d-grid;
	.grid4;
	gap: var(--p30);

	.item {
		overflow: hidden;
		position: relative;
		display: block;
		border-radius: 16px;
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
		bottom: 0;
		transition: all 0.5s;

		&:hover {
			bottom: var(--p20);

			.foot {
				font-size: vaR(--ft20);
				background: var(--ftc);
				letter-spacing: 2px;
				color: #fff;
			}

			.img {
				img {
					scale: 1.05;
				}
			}
		}
	}

	h5 {
		.line-clamp1;
		font-size: var(--ft24);
	}

	.sub {
		color: #787878;
		font-size: var(--ft18);
		.line-clamp2;
	}

	.content {
		position: relative;
		gap: var(--p20);
		.flex-column-center;
		height: 190px;
		text-align: center;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}

	.img {
		aspect-ratio: 380/270;

		img {
			transition: all 0.5s;
		}
	}

	.yuan {
		top: -70px;
		position: absolute;
		left: 0;
		right: 0;

		.img2 {
			width: 94px;
			aspect-ratio: 1/1;
			display: inline-flex;
			background: #FCFCFC;
			border-radius: 50%;
			position: relative;
			/* 新增：用于定位涟漪伪元素 */
			z-index: 1;
			/* 确保图片在涟漪上方 */
			padding: var(--p20);

			img {
				max-width: 100%;
				max-height: 100%;
			}
		}

		/* 涟漪效果 */
		.img2::before,
		.img2::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background: rgba(252, 252, 252, 0.6);
			/* 涟漪颜色，与背景协调 */
			z-index: -1;
			animation: ripple 2.5s infinite ease-out;
		}

		/* 第二个涟漪，延迟动画以创建层次感 */
		.img2::after {
			animation-delay: 0.8s;
		}
	}

	.foot {
		transition: all 0.3s;
		.flex-center;
		height: 60px;
		position: relative;
		z-index: 2;
		bottom: 0;


		span {
			font-weight: bold;
			border-bottom: 2px solid var(--ftc);
		}
	}
}

/* 涟漪动画关键帧 */
@keyframes ripple {
	0% {
		width: 100%;
		height: 100%;
		opacity: 1;
	}

	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}

.s_content {

	color: #666666;
	font-size: var(--ft18);
}

.SoultDetailsMain {
	.Info {
		.d-grid;
		.grid2;
		gap: var(--p150);
	}

	h3 {
		font-size: var(--ft52);
	}

	.sub {
		color: #666666;
		margin-top: vaR(--p40);
		font-size: var(--ft18);
	}

	.con {
		margin-top: vaR(--p60);
	}
}

.AboutPic {
	--main: 1720px;
	.bg_fixed;

	h1 {
		font-size: var(--ft36);
		text-align: center;
	}

	ul {
		.d-grid;
		.grid6;
		gap: var(--p25) var(--p30);
		margin-top: var(--p50);

		.img {
			background-color: #fff;
			box-shadow: 0 5px 6px rgba(126, 205, 40, 0.1);
		}
	}
}

.AboutHistory {
	.TitleCom {
		.d-flex;
		.flex-column;
		.al-fs;
		.jc-fs;
		margin-bottom: var(--p20);

		* {
			text-align: left;
		}
	}

	.Text {

		position: relative;
		z-index: 2;
	}

	.tabs-header {
		position: relative;
		z-index: 2;
		.d-flex;
		flex-wrap: wrap;
		gap: var(--p20);
		margin-bottom: vaR(--p35);

		.item {
			cursor: pointer;
			border: 1px solid rgba(0, 0, 0, 0);
			transition: all 0.3s;
			border-radius: 0;
			font-size: var(--ft18);
			padding: var(--p10) var(--p20);

			&.layui-active {
				.ftc;
				border-radius: 27px;
				border-color: #7ECD28;
				box-shadow: 0px 1px 11px 0px rgba(37, 71, 0, 0.1);
				background: #F8F7F0;

			}
		}
	}

	.tabs-item {
		transition: all 0.1s;
		opacity: 0;
		height: 0;
		visibility: hidden;
	}

	.layui-show {
		height: auto;
		visibility: visible;
		transition: all 0.3s;
		display: block;
		opacity: 1;

		.img img {
			opacity: 1;
			transform: translateX(0);
		}

		.con {
			opacity: 1;
			transform: translateX(0);

		}
	}

	.sub,
	.t1 {
		.ftc;
		margin-bottom: vaR(--p10);
	}

	.img img {
		max-width: 50vw;
		opacity: 0;
		transition: transform 0.5s ease, opacity 0.5s ease;

		position: relative;
		transform: translateX(100px);
	}

	.sub {
		font-weight: bold;
		font-size: vaR(--ft24);
	}

	.con {
		width: 600px;
		max-width: 100%;
		color: #666;
		transition: transform 0.5s ease 0.1s, opacity 0.5s ease 0.1s;
		opacity: 0;
		color: var(--ft16);
		position: relative;
		transform: translateX(100px);

		* {
			color: #666;

		}
	}

	.layui-main {
		.d-grid;
		gap: var(--p40);
		grid-auto-columns: var(--p20);
		grid-template-columns: 0.8fr 1fr;
	}
}

.AboutInfo {
	.Info {
		.d-grid;
		.grid2;
		gap: var(--p60);

		.con {
			line-height: 1.5em;
			margin-top: vaR(--p60);
			color: #666;
		}
	}

	.TitleCom {
		padding-top: var(--p20);
		.d-flex;

		* {

			text-align: left;
		}

		.flex-column;
		.al-fs;
		.jc-fs;
		margin-bottom: var(--p20);
	}

	ul {
		margin-top: vaR(--p150);
		.d-grid;
		.grid4;
		gap: var(--p20);
		text-align: center;

		.counter-auto {
			.ftc;
			font-weight: bold;
			font-size: var(--ft60);
		}

		.key {
			font-weight: bold;
			font-size: var(--ft40);
		}

		h5 {

			font-weight: normal;
			color: #666;
		}
	}

}

.ProductCenter {
	background: #F7F7F7;

	.foot {
		.flex-center;
		margin-top: var(--p20);

	}
}

.Product {
	.layui-btn {
		text-transform: uppercase;

		&:hover {
			letter-spacing: 0.5em;
		}
	}

	.swiper-slide {
		width: auto;
		padding: var(--p10);

	
	}

}

		.ProductItem {
			max-width: calc(100% - 20px);
			display: block;
			box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1);
			width: 382px;
			border-radius: 16px;
			overflow: hidden;
			position: relative;

	.button {
		display: block;
		position: relative;
		width: 42px;
		height: 42px;
		margin: 0;
		.flex-center;
		overflow: hidden;
		outline: none;
		background-color: transparent;
		cursor: pointer;
		border-radius: 50%;
		border: 0;
		transform: rotate(180deg);
		background: #E7E8EA;
	}

	.button:before,
	.button:after {
		content: "";
		position: absolute;
		border-radius: 50%;
		inset: 7px;
	}

	.button:before {
		transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
			transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
	}

	.button:after {
		transform: scale(1.3);
		transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
			transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		opacity: 0;
	}

	.button:hover:before,
	.button:focus:before {
		opacity: 0;
		transform: scale(0.7);
		transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
			transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	.button:hover:after,
	.button:focus:after {
		opacity: 1;
		transform: scale(1);
		transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
			transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
	}

	.button-box {
		display: flex;
		position: absolute;

		top: -7px;
		left: -6px;
	}

	.button-elem {
		display: block;
		width: 20px;
		height: 20px;
		margin: 17px 18px 0 18px;
		transform: rotate(180deg);
		fill: #fff;
	}

	.button:hover {
		.bgc;
	}

	.button:hover .button-box,
	.button:focus .button-box {
		transition: 0.4s;
		transform: translateX(-56px);
	}

			&.active {
				width: 540px;

				.con {

					background: rgba(223, 223, 223, 0.5);
				}
			}

			&:hover {
				.con {

					background: rgba(223, 223, 223, 0.5);
				}

				.button {
					.bgc;
				}

				.button .button-box {
					transition: 0.4s;
					transform: translateX(-56px);
				}
			}
				.img {
			position: absolute;
			z-index: 0;

			width: 60%;
			height: 60%;
			bottom: var(--p30);
			right: var(--p30);
			background-repeat: no-repeat;
			background-size: contain;
			background-position: right bottom;
		}

		* {}

		.con {
			transition: all 0.3s;
			padding: var(--p40) var(--p20);

		}

		h5 {
			font-size: var(--ft20);
			position: relative;
			z-index: 2;
		}

		hr {
			margin: var(--p20) 0;
			border-color: rgba(0, 0, 0, 0.1);
		}

		.sub {
			line-height: 1.5em;
			color: #666;
			height: 9em;
			.line-clamp6;
			position: relative;
			z-index: 2;
		}

		.foot1 {
			padding: var(--p30) var(--p20);
		}
		}

.ProductIndex2 {
	.TitleCom {
		.d-flex;
		.flex-column;
		.al-fs;
		.jc-fs;
		text-align: left;

		.desc {
			margin: var(--p40) 0;
		}
	}

	.layui-main {
		.d-grid;
		.al-c;
		grid-template-columns: 1fr 0.5fr;
		gap: vaR(--p40);
	}

}

.ProductIndex {
	.TitleCom {
		.d-flex;
		.flex-column;
		.al-fs;
		.jc-fs;
		text-align: left;

		.desc {
			margin: var(--p40) 0;
		}
	}

	.layui-main {
		.d-grid;
		.al-c;
		grid-template-columns: 0.5fr 1fr;
		gap: vaR(--p80);
	}

	.swiper {
		width: 55vw;
	}


}

.PorductDetailsMain {
	.layui-main {
		.d-grid;
		grid-template-columns: 0.4fr 1fr;
		gap: var(--p50);
	}

	h3 {
		font-size: var(--ft50);
		margin-bottom: var(--p40);
	}

	.Info {
		ul {
			margin-bottom: var(--p30);
			.d-grid;
			gap: var(--p10);

			.item {
				height: 68px;
				transition: all 0.3s;
				border-radius: 10px;
				box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
				padding: var(--p10) var(--p20);
				.d-flex;
				.al-c;
				gap: var(--p15);

				&.active,
				&:hover {
					background: #072032;
					color: #fff;
				}

				h5 {
					flex: 1;
				}
			}
		}

	}
}

body {
  scroll-behavior: smooth;
  scroll-timing-function: ease-in-out;
  /* 确保根元素没有默认边距 */
  margin: 0;
  padding: 0;
    -webkit-scroll-snap-type: y mandatory;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
  /* 确保没有内边距影响高度计算 */
  padding: 0;
  margin: 0;
  /* 避免内容溢出 */
  box-sizing: border-box;
}


 .section {
  -webkit-scroll-snap-align: start;
  scroll-snap-align: start;
min-height: 100vh;
  /* 确保区块内容不会溢出容器 */
  box-sizing: border-box;
  &.IndexGet,
&.footer{
    min-height: auto;
    
}
}
.IndexNew{
    .flex-center;
    .en{
        color: #A71F24;
    }
}

.IndexGet{
    color: #fff;
    height: auto;
    .bg_img;
    text-align: center;
    h1{
        margin-top: var(--p60);
    }
    .sub{
        margin-top: vaR(--p30);
    }
    
    	.layui-btn {
    	    margin-top: vaR(--p60);
		text-transform: uppercase;

		&:hover {
		    opacity: 1;
    	    box-shadow: 0 8px 16px rgba(126, 205 ,40,0.2);
			letter-spacing: 0.5em;
		}
	}

}
.titleComIndex{
        .flex-column-center;
    .en{
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: var(--ft14);
        margin-bottom: var(--p30);
    }
    h1{
        
        font-size: var(--ft60);
    }
    .sub{
        font-size: vaR(--ft16s);
    }
}


.IndexSwiper {
	--swiper-pagination-color: #fff;
	--swiper-pagination-bullet-inactive-color: #fff;
	--swiper-pagination-bullet-inactive-opacity: 0.5;
	position: relative;
	
		.layui-btn {
    	    margin-top: vaR(--p60);
		text-transform: uppercase;

		&:hover {
		    opacity: 1;
    	    box-shadow: 0 8px 16px rgba(126, 205 ,40,0.2);
			letter-spacing: 0.5em;
		}
	}
    .next{
        svg{
            
    transform: rotate(180deg);
        }
    }
    .foot{
        width: 100%;
        position: absolute;
        bottom: 20px;
        z-index: 2;
        font-size: var(--ft20);
        
        .layui-main{
            .d-flex;
            .al-c;
            gap: 20px;
            color: #fff;
        }
        .next,
        .prev{
            transition: all 0.3s;
            cursor: pointer;
            
        }
    }
	.swiper {
		position: relative;
	}

	.bg {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 0;
		object-fit: cover;
	}

	.swiper-pagination-bullet {
		transition: all 0.5s;
		width: 20px;
		border-radius: 16px;
	}

	.swiper-pagination-bullet-active {
		width: 40px;
	}

	video {

		object-fit: cover;
		width: 100%;
		height: 100%;
		background: #000;
	}


	.SwiperItem {
		position: relative;
		color: #fff;
		z-index: 9;
		.flex-center;
		width: 100vw;
		height: 100vh;

		.block {
    width: 100%;
			position: relative;
			z-index: 2;
		}

		.bg {
			.flex-center;
		}

		video {
			object-fit: cover;
			width: 100%;
			height: 100%;
			background: #000;
		}
	}

	.ani-slide {
		position: relative;
		z-index: 20;

		.t2,
		.t3,
		.t1 {
			transform: translateY(0);
			opacity: 1;
		}
	}

	.t2,
	.t3,
	.t1 {
		transform: translateY(100px);
		opacity: 0;
		transition: all 1s;
		max-width: 100%;
	}
    .t1{
        width: 1100px;
        font-size: var(--ft80);
        margin-bottom: vaR(--p40);
    }
	.t2 {
        width: 1100px;
	    font-weight: normal;
        font-size: var(--ft24);
		transition-delay: 0.4s;
        margin-bottom: vaR(--p40);
	}

	.t3 {

		transition-delay: 0.8s;
	}
	/* 4. 自定义分页器容器：包裹“左箭头 + 页码 + 右箭头” */
    .custom-pagination {
      display: flex; /* 横向排列 */
      align-items: center; /* 垂直居中 */
      justify-content: center; /* 整体居中 */
      padding-bottom: 10px;
      left: 0.2em;
    }

.nextPage{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    cursor: pointer;
    transition: all 0.3s;
    svg{
         transform: rotate(
270deg); 
    }
       &:hover{
            opacity: 0.7;
        }
            animation: float 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
  @keyframes float {
            0% {
                transform: translateY(0px); /* 起始位置 */
            }
            50% {
                transform: translateY(-15px); /* 向上移动 */
            }
            100% {
                transform: translateY(0px); /* 回到起始位置 */
            }
        }
     

}

.Index{
    
    scroll-behavior: smooth;
    scroll-timing-function: ease-in-out;
    -webkit-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    .AboutInfo{
    padding: var(--p130) 0;
        color: #fff;
        .con{
            
    	    margin-top: vaR(--p30);
        }
        		.layui-btn {
    	    margin-top: vaR(--p30);
		text-transform: uppercase;

		&:hover {
		    opacity: 1;
    	    box-shadow: 0 8px 16px rgba(126, 205 ,40,0.2);
			letter-spacing: 0.5em;
		}
	}
        .TitleCom .t1{
            margin-bottom: var(--p20);
        }
        *{
            color: #fff !important;
        }
        .bg_fixed;
        ul{
            margin-top: vaR(--p40);
        }
        .Info{
           grid-template-columns: 1.2fr 0.8fr; 
        }
        	.numList .item:nth-child(1) {
		animation: float1 4s ease-in-out infinite;

	}

 .item:nth-child(2) {
		animation: float2 3.5s ease-in-out infinite;
	}

 .item:nth-child(3) {
		animation: float3 4.2s ease-in-out infinite;
	}

.item:nth-child(4) {
		animation: float4 3.8s ease-in-out infinite;
	}
    }
    .Contact{
        margin-top: 0;
        background: #FFFDF3;
        .Info{
            padding: 0;
            gap: var(--p80);
            .al-fs;
            width: 800px;
        }
        .titleComIndex{
            .al-fs;
            text-align: left;
        }
        .en{
            .ftc;
            margin-bottom: vaR(--p60);
        }
        .sub{
            margin-top: vaR(--p60);
        }
    }
}
	/* 浮动动画关键帧 - 定义不同方向的浮动效果 */
	@keyframes float1 {

		0%,
		100% {
			transform: translateY(0) translateX(0);
		}

		50% {
			transform: translateY(-10px) translateX(0);
		}
	}

	@keyframes float2 {

		0%,
		100% {
			transform: translateY(0) translateX(0);
		}

		50% {
			transform: translateY(-8px) translateX(-0);
		}
	}

	@keyframes float3 {

		0%,
		100% {
			transform: translateY(0) translateX(0);
		}

		50% {
			transform: translateY(-12px) translateX(0);
		}
	}

	@keyframes float4 {

		0%,
		100% {
			transform: translateY(0) translateX(0);
		}

		50% {
			transform: translateY(-9px) translateX(-0);
		}
	}

	@keyframes float5 {

		0%,
		100% {
			transform: translateY(0) translateX(0);
		}

		50% {
			transform: translateY(-11px) translateX(2px);
		}
	}
.IndexProducts{
    .bg_fixed;
  padding: var(--p130) 0;
       .NavTab{
           margin-top: vaR(--p30);
       }
   .NavTab .item{
       background: #fff;
       &.layui-this{
           .bgc !important;
       }
       
   }
   ul{
           margin-top: vaR(--p50);
       .d-grid;
       .grid3;
       gap: vaR(--p40);
   }
   .ProductItem {
       width: 100%;
       background: #fff;
   }
}
.IndexSoult{
   padding: 0;
    ul{
        height: 100vh;
         .d-grid;
        .grid4;
        .item{
            position: relative;
            &:hover{
                .img img{
                    scale: 1.05;
                }
                .more{
                    .ftc;
                    margin-bottom: vaR(--p10);
                }
                .sub{
                    height: 6em;
                }
            }
        }
        .img{
            position: absolute;
            z-index: 0;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            img{
                transition: all 0.5s;
            }
        }
        .Block{
            color: #fff;
            position: relative;
            z-index: 2;
            height: 100%;
            .d-flex;
            .al-fs;
            .jc-fe;
            gap: var(--p20);
            .flex-column;background: linear-gradient(0deg, rgba(0,0,0,0.7), rgba(0,0,0,0.01));
            padding: var(--p50);
                transition: all 0.3s;
            *{
                transition: all 0.3s;
            }
        }
        h5{
            font-size: vaR(--ft32);
        }
        .more{
            border-bottom: 2px solid var(--ftc);
        }
        .sub{
            height: 0;
            overflow: hidden;
        }
    }
}
@media only screen and (max-width: 1400px) {}

@media only screen and (max-width: 990px) {
	header .navMobile {
		color: #fff;
		background: rgba(0, 0, 0, 0.5);
	}

	:root {
    --input:40px;
		--input_size: 14px;
		--btn: 40px;
		--btn_size: 14px;
	}

	.ProductIndex2 .swiper,
	.ProductIndex .swiper {
		width: 100vw;
	}

	.AboutHistory .tabs-item .img {
		.flex-center;
	}

	.SoultList {
		.grid1;
	}

	.CertiList,
	.AboutPic ul {
		.grid3;
	}

	.NewList,
	.ProjectsList {
		.grid2;
	}

	.Contact {

		margin-top: 40px;
	}

	footer .footerUl {
		margin-top: var(--p30);
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.Contact>.img_100 {
		min-height: auto !important;
	}

	.Contact .layui-main {
		.flex-column;
	}
	.section{
	    min-height: auto;
	}
	.IndexSoult ul{
	   .grid2
	}
	.IndexProducts ul,
.Index .AboutInfo .Info,
	.ProjectsDetailsMain .layui-main,
	.AboutHistory .layui-main,
	.AboutInfo .Info,
	.ProductIndex2 .layui-main,
	.ProductIndex .layui-main,
	.PorductDetailsMain .layui-main {
		.grid1;
	}

	.ContactBlock {
		width: 300px;
	}

	.ContactBlock .Block {
		bottom: 200px;
		padding-top: 140px;
	}

	.top_box .block {
		min-height: 300px;
	}

	header .logo img {
		max-height: 30px;
	}

	header.down {
		top: 0;
	}

	.AboutHistory .tabs-header .item {
		padding: 5px 10px;
	}

	.PorductDetailsMain .Info ul .item {
		height: 50px;
	}

	.NewList .info {
		flex-wrap: wrap;
	}
}

@media only screen and (max-width: 768px) {}

@media only screen and (min-width: 751px) and (max-width: 1400px) {}

@media only screen and (min-width: 751px) {}