@import "./common.less";

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

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

	color: #00112E;

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

.ProductMain {
	.bg_img;
}
*{
    text-align: justify
}

.newNews{
    background: #FFFFFF;
.br;
padding: var(--p30);
.title{
    .d-flex;
    .al-c;
    gap: vaR(--p10);
    h1{
    font-size: vaR(--ft22);
        
    }
}
ul{
    margin: vaR(--p10) 0;
    .d-grid;
    .item{
        border-bottom: 1px solid #D9DBE0;
        padding: var(--p15) 0;
        .d-grid;
    
        grid-template-columns: 0.4fr 1fr;
        gap: var(--p20);
        .al-c;
        &:last-child{
            border: none;
        }
    }
    h5{
        .line-clamp1;
    }
    .date1{
        .ftc;
    }
    .img{  
       border-radius: 10px;
        height: 100%;
        aspect-ratio: 1/1;
    }
}
margin-bottom: vaR(--p40);
}
header {
	--color: #fff;
	color: var(--color);

	--main: 100%;

	.layui-main {
	padding: 0 var(--p50);

		max-width: 100%;
	}

	.logo {
		flex: 1;
		.d-flex;
		.jc-fs;
		align-items: baseline;
		gap: var(--p25);

		span {
			width: 1px;
			height: 42px;
			background: #FFFFFF;
			opacity: 0.2;
		}
	}

	.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 {
		--main: 1300px;
		height: 0;
		transition: all 0.3s;
		overflow: hidden;
		position: absolute;
		left: 0;
		right: 0;

		.img {
			height: 100%;
		}

		* {
			line-height: 1.2em;
		}

		.Block {
			box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
			color: #222222;
			padding: var(--p40) 0;
			background: #fff;
			height: 100%;

			.layui-main {
				.d-grid;
				grid-template-columns: 0.8fr 1fr;
				.al-fs;
				gap: var(--p80);
			}

			.hr {
				width: 1px;
				background: rgba(0, 0, 0, 0.1);
			}

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

			ul {
				.d-flex;

				gap: var(--p40);
				margin-top: var(--p35);
			}

			.title {
				padding: 0;
				text-align: left;
				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;
					padding-right: 1em;
					color: #000;
					white-space: nowrap;

					&:hover {
						padding-right: 0;
						padding-left: 1em;
						.ftc;
					}
				}
			}
		}
	}

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

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

	.img1 {
		display: block;
	
	}

	.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;



	.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: 80px;
		margin: 0 var(--p20);

	}

	.layui-nav .layui-nav-item>a {
		text-transform: uppercase;
		font-size: var(--ft16);
		color: var(--color);
		padding: 0;
		position: relative;
		color: rgba(255, 255, 255, 0.8);

		&::before {
			content: "";
			position: absolute;
			left: 0;
			top: 68%;
			width: 0;
			height: 1px;
			background-color: #fff;
			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;
	}

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

	&.bgcolor,

	&.black {
		background: rgba(0, 0, 0, 0.14);
		// 		.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);
		// 		}
	}
}

.jt {
	border-radius: 50%;
	background: #fff;
	transition: all 0.3s;
	width: 45px;
	aspect-ratio: 1/1;

	img {
		transition: all 0.3s;

	}
}

:root {
	--loader-bg-color: #E5E7EB;
	/* 加载背景色 */
	--loader-shine-color: rgba(255, 255, 255, 0.99);
	/* 光效颜色 */
	--loader-animation-duration: 1.5s;
	/* 动画持续时间 */
}

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

/* 关键修改：使用::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(150%);
	}
}

main {
	background: #EBEFF3;
	flex: 1;
}

footer {
	a {
		color: rgba(255, 255, 255, 0.6);
		transition: all 0.3s;

		&[href]:hover {
			color: rgba(255, 255, 255, 0.8) !important;
		}
	}

	.bg_img;
	color: #fff;

	.foot2 {
		padding: vaR(--p40) 0 var(--p50);
		border-top: 1px solid rgba(255, 255, 255, 0.1);

		.d-flex;
		.al-fs;
		.jc-s;
		gap: var(--p40);

		li {
			max-width: 400px;
			white-space: nowrap;
		}

		ul {
			.d-flex;
			.al-fs;
			gap: var(--p100);
 			

			.t1 {
				font-size: var(--ft20);
			}

			a {
				line-height: 1.2em;
				gap: 5px;
				.d-flex;
				.al-fs;
			}

			.img {
				flex-shrink: 0;
				;
			}

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

			}
		}
	}

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

	.foot1 {
		padding-top: var(--p60);
		padding-bottom: var(--p20);

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

	.foot3 {
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		width: 100%;
		padding: var(--p15) var(--p30);
		.flex-center;
		flex-wrap: wrap;
		gap: var(--p10);

		a {

			color: rgba(255, 255, 255, 0.4);
		}


	}
}

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

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

a {
	transition: all 0.3s;
}

.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);
		line-height: 1.2em;
	}

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

		* {
			opacity: 0.8;
		}

		a:hover {
			opacity: 1;
			color: #fff;
		}
	}

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

.boxshadow {}

.br {
	border-radius: var(--p30);
}

.titleCom {
	.en {
		text-transform: uppercase;
		.ftc;
		font-size: vaR(--ft18);
	}

	h5 {
		color: #222222;
		font-size: var(--ft46);
	}

	.sub {
		color: #00112E;
	}

	&.center {
		text-align: center;
	}
}

.ProductList {
	.d-grid;
	gap: var(--p140);
    

	.item {
		.d-grid;
		.al-c;
		grid-template-columns: 0.9fr 1fr;
		gap: var(--p120);

		.jtBtn {
			margin-top: var(--p50);
		}

		.titleCom {
			h5 {
				font-size: var(--ft52);
			}
		}

		.sub {
			font-size: vaR(--ft18);
			color: #222;
			line-height: 2em;
			margin-top: vaR(--p40);
		}
	}
	.img{
	    .flex-column-center;
	    gap: var(--p25);
	    h5{
	        text-align: center;
	        font-size: var(--ft32);
	    }
	}
}

.ContactList {
	ul {
		.d-grid;
		.grid4;
		gap: vaR(--p25);

		li {
			padding: var(--p40);
			background: #fff;
			.d-flex;
			.flex-column;
			.br;
			gap: var(--p15);
			position: relative;
			box-shadow: 0 8px 10px rgba(0, 0, 0, 0.01);

			&:hover {
				.jt {
					img {
						transform: rotate(-45deg);
					}
				}
			}
		}

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

		.sub {
			flex: 1;
		}

		.jt {
			position: absolute;
			right: -16px;
			bottom: -15px;
			width: 80px;
			border: 10px solid #EBEFF3;
		}
	}
}

:root {
	--input: 60px;

}

.layui-input,
.layui-select,
.layui-textarea {
	.br;
	border: 1px solid #D9DBE0;

}

.layui-textarea {
	height: 130px;
	padding-top: var(--p20);
}

.layui-form-select .layui-edge {

	right: 17px;
}

.QrcodeBox {
	.d-flex;
	.flex-column;
	gap: var(--p40);

	.Qrcode {
		flex: 1;
		.bg_img;
		.flex-column-center;
		gap: var(--p10);
		padding: var(--p60);
		color: #fff;
		.br;

		font-size: vaR(--ft24);

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

}

.Product1 {
	background: #fff;
}

.Product1List {
	.d-grid;
	.grid4;
	margin-top: vaR(--p60);
	gap: var(--p30) var(--p40);

	* {
		position: relative;
		z-index: 9;
	}

	.item {
		background: #F7F8FC;
		overflow: hidden;

		&::before {
			display: block;
			content: '';
			position: absolute;
			z-index: 5;
			left: 0;
			right: 0;
			bottom: 0;
			top: 100%;
			opacity: 0;
			background: linear-gradient(0deg, rgba(0, 53, 141, 0.9), rgba(0, 53, 141, 0.0))
		}

		&:hover {
			&::before {
				opacity: 1;
				top: 50%;
				bottom: 0;
			}

			.img {}

			.content {
				color: #fff;
				bottom: var(--p80);
			}

			.jtBtn {
				bottom: -40px;
			}
		}
	}

	.img {
		padding: var(--p10);
		aspect-ratio: 320/400;
	}

	.content {
		.flex-column-center;
		gap: var(--p20);
		padding: var(--p40);
		text-align: center;
		position: relative;
		transition: all 0.3s;
		bottom: 0;

		.jtBtn {
			bottom: -70px;
			position: absolute;
			transition: all 0.3s;
		}
	}

	h5 {
		font-size: vaR(--ft22);
	}

	.jtBtn {
		background: #fff;

		span {

			.ftc;
			padding: 0 var(--p60) 0 var(--p20);
		}

		.jt {
			.bgc;

			img {

				filter: invert(100%);
			}
		}
	}
}

.ContactForm {

	.Block,
	.layui-main {
		.d-grid;
		grid-template-columns: 0.9fr 1fr;
		gap: var(--p50);
	}

	&.Com {
		.layui-main {
			.d-grid;
			.grid1;
			gap: var(--p40);
		}

		.Block {
			.grid2;
			gap: var(--p100);
		}

		.FormBox {
			padding: 0;
			background: initial;

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



}

.FormBox {
	background: #fff;
	.br;
	padding: var(--p40) var(--p50);

	h1 {
		font-size: var(--ft36);
		color: #333;
	}

	.sub {
		color: #00112E;
	}

	form {
		margin-top: vaR(--p30);
		gap: var(--p15) var(--p25);
	}

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

.msgDialog {
	width: 600px;
	max-width: 80%;

	.layui-layer-content {

		min-height: 400px;
	}

	.layui-layer-btn .layui-layer-btn0 {
		.bgc;
		font-size: var(--ft14);
		border-radius: 10px;
	}
}

.jtBtn {
	.br;
	.bgc;

	display: inline-flex;
	.al-c;
	.jc-c;
	color: #fff;
	cursor: pointer;

	transition: all 0.3s;

	span {
		transition: all 0.3s;
		padding: 0 var(--p80) 0 var(--p40);
	}

	overflow: hidden;
	padding: 5px;
	position: relative;
	height: 60px;

	.jt {
		right: 5px;
		position: absolute;

	}



	.jt2 {
		.bgc;

		position: absolute;
		left: -30%;

		img {
			transition-delay: 0.1s;
			filter: invert(100%);

		}
	}

	&:hover {
		// 		background: #fff;
		// 		.ftc;
		box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3);

		.jt1 {
			right: -30%;


		}

		span {
			padding: 0 var(--p50) 0 var(--p70);
		}

		.jt2 {
			position: absolute;
			left: 5px;

			img {
				animation: fly-1 0.6s ease-in-out infinite alternate;
				transform: rotate(45deg);
			}
		}
	}

}

@keyframes fly-1 {
	0% {
		transform: translateY(0.1em) rotate(45deg);
	}

	100% {
		transform: translateY(-0.1em) rotate(45deg);
	}
}

.NewList {

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

	.item {
		background: #fff;
		.br;
		display: block;
		overflow: visible;
		padding: var(--p40) var(--p20);

		.imgBlock {
			transition: all 0.3s;
		}

		&:hover {
			h5 {
				.ftc;
			}

			.imgBlock {

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

			.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: 400/270;
	.br;
	}

	.info {
		.d-flex;
		.al-c;
		.jc-s;
		margin-bottom: var(--p25);
	}

	.tag {
		.flex-center;
		.al-c;
		margin-right: var(--p20);
		display: inline-block;
		background: rgba(0, 53, 141, 0.1);
	.br;
		font-size: vaR(--ft14);
	
		padding: 5px var(--p10);
		color: var(--ftc);
		line-height: normal;
	}

	.date {
		letter-spacing: 0.1em;
		font-size: var(--ft12);
		color: #00112E;
		white-space: nowrap;
	}

	h5 {
		transition: all 0.3s;
		font-size: var(--ft26);
		.line-clamp2;
		line-height: 1.3em;
		min-height: 2.6em;
		margin-top: vaR(--p25);
		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: 1rem;
		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: "阅读更多";
			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;
		}
	}


}

.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 #444444;
		position: relative;
		overflow: hidden;
		transition: all 0.3s;
		display: inline-flex;
		.al-c;
		.jc-c;

		&: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(0, 53, 141, 0.1) 40%, rgba(0, 53, 141, 0.9) 60%, transparent 100%);
		}

		&:hover:before {
			transform: translateX(20em);
		}

		&.layui-this,
		&.active {
			background: var(--ftc) !important;
			color: #fff !important;
		}
	}

	&.Product {
		margin-bottom: vaR(--p120);

		.item {
			.br;
			font-size: vaR(--ft24);
			background: #fff;
		}
	}
}
.IndexProduct{
    --main: 1800px;
    .bg_fixed;
    color: #fff;
    .title{
        padding: 0 var(--p100);
        .d-flex;
        .jc-s;
        .al-c;
        gap:var(--p20);
        .en,
       h5{
           color: #fff;
       }
    }
    .swiper-btn{
        
        padding: var(--p20) var(--p100);
        .d-flex;
        .al-c;
        .jc-fe;
        gap: var(--p20);
    }
     .NavTab.Product {
         margin-bottom: 0;
     }
    .NavTab.Product .item{
        color: rgba(255,255,255,0.5);
        background: initial;
        &.layui-this{
            background: #fff !important;
            .ftc !important;
        }
    }
    .swiper-wrapper{
        .d-flex;
    }
    .swiper-slide{
        height: auto;
    }
    .ProItem{
    height: 420px;
    display: block;
    
        padding: var(--p10);
        border: 1px solid rgba(255, 255, 255, 0.1);
        .con{
            padding: var(--p20);
        }
        .img{
           height: 300px;
        }
        &:hover{
             .sub{
                 opacity: 1;
                       margin-top: vaR(--p20);
            padding-top: vaR(--p20);
            border-top: 1px solid #fff;  
            height: auto;
            .sub1{
                 height: 3em;
                 .line-clamp2;
                
            }
             }
             .img{
              height: 200px;
             }
        }
        h5{
            font-size: var(--ft24);
        }
        .en{
            color: #fff;
            opacity: 0.6;
        }
        .sub{
            flex: 1;
            transition: all 0.3s;
            height: 0;
            opacity: 0;
            overflow: visible;
    
        }
    }
}
.Index{
    .AboutParent{
        padding-top: var(--p80);
        padding-bottom: 0;
    }
}
.ProjectsList {
	margin-top: vaR(--p80);
	.d-grid;
	.grid3;
	gap: var(--p30) var(--p25);

	.item {
		aspect-ratio: 450/510;
		position: relative;
		overflow: hidden;
		.br;

		.img {
			height: 100%;
		}

		.img1 {
			.jc-fe;
			.al-fs;
			width: 100%;
			flex: 1;

			img {
				width: 20px;
			}
		}

		.content {
			position: absolute;
			left: 0;
			right: 0;
			top: 100%;
			bottom: 0;
			width: 100%;
			height: 100%;
			color: #fff;
			.d-flex;
			padding: var(--p50) vaR(--p35);
			background: rgba(0, 53, 141, 0);
			.flex-column;
			.al-fs;
			z-index: 2;
			transition: all 0.5s;

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

			.sub {
				.line-clamp5;
				margin-top: var(--p15);
			}
		}

		&:hover {
			.content {
				top: 0;
				background: rgba(0, 53, 141, 0.8);
			}

			h5 {
				opacity: 1;
				top: 0;
			}

			img {

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

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

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

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

.pagenum {

	input,
	button,
	a,
	span {
		border: none;
		min-width: 38px;
	}

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

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

.detailsMain {
	.More {
		.QrcodeBox {
			position: sticky;
			top: var(--p100);
		}
	}

	.QrcodeBox .Qrcode h1 {
		font-size: var(--ft30);
	}

	.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;
		}
	}

	h3 {
		font-size: var(--ft30);
		margin-bottom: vaR(--p30);
	}

	.date {
		.ftc;
		border-bottom: 1px solid #D9DBE0;
		;
		font-size: var(--ft14);
		padding-bottom: var(--p20);
		margin-bottom: var(--p20);
	}

	.con {
		color: #00112E;
		min-height: 20vh;
	}

	.sub {
		color: #00112E;
		margin-bottom: var(--p20);
	}

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

}

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

	>div {
		.d-grid;
		gap: 5px;

		&:nth-child(2) {
			text-align: right;
		}
	}

	span {
		width: 100%;
		font-size: var(--ft14);
		display: block;
		color: var(--ftc);
	}

	a {
		font-size: var(--ft18);
		width: 100%;
		display: block;
		font-weight: bold;
		.line-clamp1;

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

}

.ProjectsDetailsMain {
	color: #00112E;

	h3 {
		font-size: var(--ft32);
		margin-bottom: vaR(--p25);
	}

	.con {
		text-indent: 2em;
		margin-bottom: vaR(--p40);
	}

	ul {
		.d-grid;
		.grid1;
		gap: vaR(--p20);

		li {
			padding: var(--p40);
			.br;
			background: #fff;
			.d-grid;
			.al-fs;
			grid-template-columns: 60px 1fr;
			gap: var(--p40);
			font-size: vaR(--ft18);
		}

		.sub {
			font-weight: bold;
		}

		h5 {
			.ftc;
			font-size: vaR(--ft14);
			margin-top: vaR(--p20);
		}
	}
}

.AboutParent {
	.block {
		margin-top: var(--p60);

		position: relative;
	}

	.block::after {
		content: "";
		width: 100%;
		height: 100%;
		background-image: linear-gradient(270deg, #EBEFF3 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, #EBEFF3 100%);
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 2;
	}
}

.marquee-container {
	width: 100%;
	overflow: hidden;
	position: relative;
	padding: 10px 0;

	/* 滚动轨道 */
	.marquee-track {
		display: flex;
		gap: var(--p40);
		width: max-content;
		animation: marquee 20s linear infinite;
		/* 匀速滚动动画 */
	}

	/* 滑块样式 */
	.marquee-item {
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		/* 防止压缩 */
		position: relative;
		transition: all 0.5s;
	}



	/* 核心动画 - 实现完全匀速滚动 */
	@keyframes marquee {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(calc(-50% - 10px));
			/* 滚动到一半长度（减去半个间距） */
		}
	}

	/* 复制一组内容用于无缝衔接 */
	.marquee-clone {
		display: flex;
		gap: var(--p40);
	}
}


.AboutHistory {
	overflow: hidden;
	overflow-x: auto;

	&::-webkit-scrollbar {
		width: 5px;
		height: 8px;
	}

	ul {
		display: flex;
		list-style: none;
		.jc-sa;
		padding: 0;
		margin: 0;
        width: fit-content;
		position: relative;

		&::before {
			display: block;
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			height: 1px;
			background: #CBD0D7;

		}

		.flex-center;

	}

	.item {

		position: relative;

		h1 {
			margin: 0;
			.ftc;
		}
	}

	.img {
		padding: var(--p40) 0;
	}

	li {
		width: 360px;
		flex-shrink: 0;
		padding: 0 var(--p30);
		.d-grid;
		grid-template-rows: 1fr 1fr;
		text-align: center;

		&:nth-child(even) {
			.item {

				top: -10px;
				//     display: flex;
				// flex-direction: column;
				// justify-content: flex-end;
			}
		}

		&:nth-child(odd) {
			.item {
				top: 10px;
				.d-flex;
				.flex-column;
				.jc-fe;
			}

		}

		h5 {
			font-size: var(--ft14);
			color: var(--bgc);
			margin-top: vaR(--p20);
		}

		.top {
			display: inline-flex;
			.al-c;
			.jc-c;
			.flex-column;
		}

		.dian {
			width: 22px;
			aspect-ratio: 1/1;
			background: var(--bgc);
			border-radius: 50%;
			border: 4px solid #fff;
		}

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

		.hr {
			width: 1px;
			height: 40px;
			background: #00112E;
		}
	}


}

.btnright,
.btnleft {
	width: 60px;
	height: 60px;
	.flex-center;
	cursor: pointer;
	border-radius: 50%;
	border: 1px solid #FFFFFF;
	transition: all 0.3s;

	i {
		transition: all 0.3s;
	}

	&:hover {
		box-shadow: 0 8px 16px rgba(255, 255, 255, 0.5);

		i {
			scale: 1.5;
		}
	}
}

.btnleft {
	i {
		color: #fff;
	}

	&:hover {
		i {

			animation: slide-in-left 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		}
	}
}

.btnright {
	background: #fff;

	i {
		.ftc;
	}

	&:hover {
		i {

			animation: slide-in-right 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		}
	}
}

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

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

@keyframes slide-in-left {
	0% {
		transform: translateX(8px);
		opacity: 0;
	}

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

.AboutHoner {
	background: #00112E;
	.br;

	.title {
		.d-flex;
		.al-c;
		.jc-s;
	}

	.swiper-btn {
		.d-flex;
		.al-c;
		gap: var(--p20);
	}

	.titleCom {
		h5 {
			color: #fff;
		}
	}

	.swiper {
		margin-top: var(--p60);
	}
}

.AboutHoner1 {
	.titleCom {
		.en {
			.flex-center;
			gap: vaR(--p60);

			hr {
				border-color: #CFD4DB;
				flex: 1;
			}
		}
	}
	.marquee-container .marquee-track,
.marquee-container .marquee-clone{
    
		gap: var(--p90);
}
	.marquee-item {
		margin-top: vaR(--p70);
// 		.d-flex;
// 		.al-fs;
// 		.jc-s;
// 		display: flex;
// 		width: max-content;
// 		width: 100%;
// 	overflow: hidden;
// 	position: relative;
// 	padding: 10px 0;
.flex-column-center;
		.sub {
			text-align: center;
			color: #00112E;
			font-size: vaR(--ft18);
			margin-top: var(--p30);

		}

	}
}

.AboutInfo {
	.Info {
		.d-grid;
		grid-template-columns: 0.5fr 1fr;
		gap: vaR(--p30);

		.con {
			font-size: vaR(--ft18);
			color: #222222;
			line-height: 2em;
			text-indent: 2em;
		}
	}

	.NumBox {
		margin-top: vaR(--p130);
		.d-grid;
		.grid3;
		.al-c;
		gap: var(--p25);

		.desc {
			line-height: 2em;
		}

		.img {
		    height: 100%;
			.br;
		}

		.Box {
			height: 100%;
			.d-flex;
			.flex-column;
			.jc-s;
			.bg_img;
			.br;
			padding: vaR(--p50);

			.num {
				font-size: vaR(--ft70);
				color: white;
				text-shadow:
					-1px -1px 0 #00358D,
					1px -1px 0 #00358D,
					-1px 1px 0 #00358D,
					1px 1px 0 #00358D;

			}

			.block {
				.flex-column;
				.d-flex;
				.al-fe;
			}
		}

		.Text {
			ul {
				margin-top: var(--p70);
				.flex-center;
				gap: var(--p40);
				text-align: center;
			}

			.num {
				.ftc;
				font-size: vaR(--ft60);
			}

			.hr {
				width: 1px;
				height: 96px;
				background: #6B717B;
				opacity: 0.2;
			}
		}

	}
}

.ProductDetailsMain {
	background: #fff;
	padding-top: var(--p100);
	background-repeat: no-repeat;

	background-position: top right;
}



.ProductInfo {
	.d-grid;
	gap: vaR(--p60);

	.item {
		.d-grid;
		.grid2;
		align-items: start;
	}

	.content {
		padding: 0 var(--p40) var(--p20);
	}

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

	.sub {
		font-size: vaR(--ft26);
// 		margin-top: vaR(--p70);
	}
}

li::marker {
	.ftc;
}

.ProBlock {
	margin-top: vaR(--p100);
	.size50{
	    font-size: var(--ft50);
	}

	>h1 {
		font-size: var(--ft50);
		text-align: center;
		margin-bottom: var(--p20);
	}

	.left {
		text-align: left;
		font-size: var(--ft30);
	}
}

.ProFile {
	border: 1px solid #00358D;
	.br;
	padding: var(--p10) var(--p40);

	.item {
		padding: var(--p20) 0;
		border-bottom: 1px solid #D9DBE0;
		.d-grid;
		.al-c;
		grid-template-columns: 48px 1fr 20px;
		gap: var(--p20);

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

		font-size: vaR(--ft14);

		.sub {
			color: #666;
		}

		&:hover {

			.Btn {
				transition-duration: 0.3s;

				.tooltip {
					opacity: 1;
					transition-duration: 0.3s;
				}

				.icon2 {
					border-bottom: 2px solid var(--ftc);
				}

				.svgIcon {
					fill: var(--ftc);
					animation: slide-in-top 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
				}
			}

		}
	}


}

.Btn {
	border: none;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
	transition-duration: 0.3s;
	background: initial;

	.svgIcon {
		font-size: var(--ft18);
		fill: #5A5A68;
	}

	.icon2 {
		width: 20px;
		height: 5px;
		border-bottom: 2px solid #5A5A68;
	}

	.tooltip {
		position: absolute;
		right: -80px;
		opacity: 0;
		background-color: rgb(12, 12, 12);
		color: white;
		padding: 5px 10px;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		transition-duration: 0.2s;
		pointer-events: none;
		letter-spacing: 0.5px;
	}

	.tooltip::before {
		position: absolute;
		content: "";
		width: 10px;
		height: 10px;
		background-color: rgb(12, 12, 12);
		background-size: 1000%;
		background-position: center;
		transform: rotate(45deg);
		left: -5%;
		transition-duration: 0.3s;
	}



	@keyframes slide-in-top {
		0% {
			transform: translateY(-10px);
			opacity: 0;
		}

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

.DownBox {

	h1 {
		font-size: var(--ft36);
		color: #333;
	}

	.sub {
		color: #00112E;
	}

}

.ProDialog {
	.br;

	.ContactForm.Com {
		.br;
		padding: var(--p60) var(--p70);

		.Block {
			gap: var(--p70);
			grid-template-columns: 0.7fr 2px 1fr;
		}

		.hr {
			width: 2px;
			background: #000000;
			;
			opacity: 0.1;

		}
	}

	.password-container {
		display: flex;
		justify-content: space-between;
		gap: var(--p15);
		margin-bottom: var(--p20);
	}

	.password-input {
		width: 2em;
		height: 2em;
		text-align: center;
		font-size: var(--ft20);
		font-weight: 700;
		border: 2px solid #e5e7eb;
		border-radius: 0.375rem;
		transition: all 0.2s ease;
	}

	.password-input:focus {
		border-color: #3b82f6;
		box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
		outline: none;
	}

	.info-text {
		text-align: center;
		color: #6b7280;
	}

	.layui-layer-content {
		height: auto !important;
	}

	.layui-layer-close2 {
		&::before {
			content: "\1006";
		}

		border: none;
		right: -75px;
		top: -21px;
		width: 50px;
		height: 50px;
		.flex-center;
		background: #fff;
		color: #000;
		font-size: vaR(--ft24);
		transition: all 0.3s;

		&:hover {
			opacity: 0.8;
			background: #fff;
			transform: rotate(180deg);
		}
	}
}
.DownBox{
    .d-flex;
    .flex-column;
    .con{
        .flex-column-center;
        flex: 1;
    }
}
.DownBtn{
    .br;
	background: #F5F5F5;

	display: inline-flex;
	.al-c;
	.jc-c;
	color: #3D3D3D;
	cursor: pointer;
	padding: 5px;
	position: relative;
	height: 60px;
	transition: all 0.3s;

	span {
		transition: all 0.3s;
		padding: 0 var(--p60) 0 var(--p20);
	}



	.jt {
		right: 5px;
		position: absolute;

	}
	.Btn{
	    
	}
		&:hover {

			.Btn {
				transition-duration: 0.3s;

				.tooltip {
					opacity: 1;
					transition-duration: 0.3s;
				}

				.icon2 {
					border-bottom: 2px solid var(--ftc);
				}

				.svgIcon {
					fill: var(--ftc);
					animation: slide-in-top 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
				}
			}

		}

}
.Index{
    .NewList .item:nth-child(n+4){
        display: none;
    }
    
}
.silder{
    .d-grid;
    gap: var(--p20);
    position: fixed;
  top: 50%;
    transition: all 0.5s;
    right: -80px;
    opacity: 0;
    .item{
        .flex-center;
        width: 60px;
        padding: var(--p10);
        aspect-ratio:1/1;
        
        background: #fff;
        border-radius: 50%;;
    box-shadow: 0 8px 10px rgba(0, 53, 141, 0.1);
    cursor: pointer;
    position: relative;
        .tooltip{
          position: absolute;
          top: 20%;
          right: 110%;
          transform: translateY(100%);
          color: #fff;
          padding: 6px 10px;
          border-radius: 5px;
          opacity: 0;
          visibility: hidden;
          font-size: 14px;
          transition: all 0.3s ease;
          background: #fff;
            width: 150px;
            height: 150px;
    box-shadow: 0 8px 10px rgba(0, 53, 141, 0.1);
        }
        .img{
            padding: var(--p10);
            height: 100%;
        }
        &:hover{
            .tooltip {
              opacity: 1;
              visibility: visible;
              top: 0;
    transform: translateY(0);
            }
        }
    }
}
.bgcolor{
    .silder{
        opacity: 1;
    right: var(--p20);
    }
}
.IndexCase{
    ul{
        .d-flex;
        gap: var(--p25);
        margin-top: var(--p60);
    }
    .num{
        width: 70px;
        aspect-ratio: 1/1;
        font-size: var(--ft20);
        border-radius: 50%;
        .flex-center;
        background: rgba(0, 17, 46, 0.1);
        
    margin: 0 auto;
    }
    .item{
        border-radius: 20px;
        background: #fff;
        width: 120px;
        .d-flex;
  transition: flex 0.5s ease; /* 宽度变化过渡，避免生硬 */
  height: 560px;
  overflow: hidden;
        .con{
            .d-flex;
            gap: var(--p10);
            .flex-column;
            .jc-s;
            flex: 1;
            padding: var(--p30) var(--p20);
        }
        h5{
       font-size: var(--ft24);
    margin: 0 auto;
    writing-mode: sideways-lr;
        }
        .btn,
        .img,
        .sub{
            width: 0;
            height: 0;
            overflow: hidden;
        }
        .img{
            
            .br;
        }
       
        &.active{
            flex: 4;
            
            .btn,
        .img,
        .sub{
            width: auto;
            height: auto;
            overflow: hidden;
        }
        .btn{
            margin-top: vaR(--p30);
        }
        .img{
            width: 480px;
            height: 100%;
        }
        .num{
            margin-right: 0;
        }
        h5{
           text-align: left;
    writing-mode: unset; 
    margin: 0;
        }
        .con1{
            padding: var(--p30) var(--p40) var(--p30) var(--p60);
            flex: 1;
            .d-flex;
            .flex-column;
            .jc-c;
            .al-fs;
            gap: var(--p20);
        }
        }
    }
  
   
}
.index_swiper {
    .swiper-pagination-bullet-active{
        width: 20px !important;
    }
   .swiper-pagination-bullet{
       width: 8px;
   }
.bg{
    background-color: var(--ftc);
    img{
        
    transition: all 2s;
    transition-delay:   0.5s;
    
    scale: 1.2;
  filter: blur(2px);
    
    }
}
.SwiperItem{
    
     .al-fe;
      padding-bottom: var(--p100);
    .title{
        display: inline-block;
        .br;
        margin-bottom: var(--p30);
        font-size: var(--ft14);
        border: 1px solid #fff;
        padding: 5px var(--p20);
    }
    .t1{
        
			transform: translateY(-100px);
    }
    .t5{
        position: relative;
       
        transition: all 1s;
			transform: translateX(100px);
        opacity: 0;
        transition-delay: 0.2s;  
    }
    .t4{
        position: relative;
       
        transition: all 1s;
			transform: translateX(100px);
        opacity: 0;
        transition-delay: 1s;
    }
    .con{
        .d-grid;
        .al-fs;
        gap: var(--p60);
        grid-template-columns: 1fr 80px 0.5fr;
    }
 
    .sub{
        font-size: var(--ft14);
        margin-top: var(--p25);
    }
    hr{
        opacity: 0.6;
        margin: var(--p40) 0;
    }
    h1{
        font-size: vaR(--ft56);
    }
    .jtBtn{
        margin-top: vaR(--p40);
        background: rgba(255, 255, 255, 0.2) !important;
        &:hover{
            
        background: rgba(255, 255, 255, 0.5) !important;
        }
    }
}
   .ani-slide{
   .bg{
    img{
        
    scale: 1;
  filter: blur(0);
    
    }
}
    .t5,
         .t4{
			transform: translateX(0);
                opacity: 1;
            }
    }
    --loader-shine-color: rgba(255,255,255,0.1);
   .image-container{
       
       background: rgba(0,0,0,0.5);
   }
.image-container::before{
    animation: pulseLoader 3S infinite;
    }
   
}
@media only screen and (max-width: 1400px) {}

@media only screen and (max-width: 990px) {
    header {
        .input-container{
            display: none;
        }
    }
   
    .AboutHistory li{
        width: 200px;
    }
    .ProFile .item{
        
    grid-template-columns: 20px 1fr 20px;
    }
    .ContactForm.Com .Block,
    .ProductInfo .item,
    .ProductList .item{
       
        .grid1;
    }
    .Product1List{
        .grid2;
    }
     .ProductInfo .item img,
    .ProductList .img img{
        max-width: 50%;
    }
    .IndexProduct .ProItem{
        
    height: 330px;
    }
    .IndexCase .item{
        height: auto;
    }
    .AboutHoner1 ul{
        .d-grid;
        .grid3;
    }
    .IndexCase .item.active{
        flex: none;
         .btn,
        .img,
        .sub{
            display: none;
            width: 0 !important;
            height: 0 !important;
            overflow: hidden !important;
        }
        .con1{
            padding: 0; ;
            display: unset;
        }
         .num{
            margin: 0 auto;
        }
        h5{
            margin: 0 auto;
            writing-mode: sideways-lr;
        }
    }
    .marquee-container .marquee-item{
        height: 30px;
    }
    .silder .item{
        width: 40px;
    }
    .btnright, .btnleft{
        
    width: 30px;
    height: 30px;
    }
    .IndexProduct .title{
        .flex-column;
    }
    .AboutInfo .NumBox,
    .AboutInfo .Info{
        .grid1
    }
    .IndexProduct .NavTab.Product .item{
        padding: 5px 10px;
    }
    .jtBtn{
        padding-right: 30px;
    }
    .index_swiper .SwiperItem .con{
        .grid1;
        padding-bottom: 60px;
        hr{
            margin: 0;
        }
    }
	.ProjectsDetailsMain ul li {
		grid-template-columns: 30px 1fr;
	}

	.NavTab {
		.jc-fs;
	}

	.NavTab .item {
		padding: 5px var(--p30);
	}

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

	header .navMobile {
		color: #fff;
		background: rgba(0, 0, 0, 0.5);
	}

	.footerLogo img {
		max-height: 30px;
	}

 header .logo{
        gap: 5px;
        span{
            display: none;
        }
        img{
            max-height: 20px;
        }
    }
	header.down {
		top: 0;
	}

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

	.NewList,
	.ProjectsList {
		.grid2;
	}

	.ContactForm .layui-main,
	.ContactList ul,
	.detailsMain .layui-main {
		.grid1;
	}

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

	footer .foot2 ul,
	footer .foot2 {
		flex-wrap: wrap;
	}

	.jtBtn {
		border-radius: 30px;
		height: 40px;
	}

	.jtBtn .jt {
		width: 32px;
	}
}



@media only screen and (max-width: 768px) {
	.SwiperItem{
		height:35vh !important;
		.t5{
		margin-top:50px;
		}
	}
	.header{
		.logo{
			img:nth-child(3){
				display:none;
			}
			padding:10px 0;
			img{
				max-height:50px;
				height:50px;
				width:200px
				
			}
		}
	}
	.SwiperItem{
		.t5{
			display:none;
		}
		.s_content{
			display:none;
		}
		hr{
			display:none;
		}
		.jtBtn{
			span{
				font-size:10px;
				padding:0 10px 0 5px;
			}
			.jt{
				width:20px;
			}
		}
	}
	.index_swiper .SwiperItem .jtBtn{
		margin-top: 10px;
	}
	.jtBtn .jt{
	    width:24px;
	}
	.index_swiper .SwiperItem .con{
		padding-bottom:0;
		gap:0;
	}
	.index_swiper .SwiperItem .sub{
	margin-top:0;
	}
	.top_box .block{
		align-items: flex-end;
		padding-bottom:10px;
	}
	.ProductList{
		.item:nth-child(2) {
			display:flex;
        	flex-direction: column-reverse;
        	align-items: center;
        	.img{
        		img{
        			max-width:85%;
        		}
        	}
		}
	}
	.close{
		top:40px
	}
	.map_img{
		img{
			    transform: translateY(100%);
		}
	}
	.menu_button,.dropdown{
		margin-top:15px;
	}
}

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

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