@import "./common.less";

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

	.flex-column;
	min-height: 100vh;
	background: #F6F9F8;

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

main {
	flex: 1;
}

:root {
	--color-grad: linear-gradient(to bottom, #23819f 0%, #3ea6b4 100%);
	--color-grad-diagonal: initial;
	--color-cricle: #fff;
	--color-radius: 25px;
	--color-light: #fff;
}

.fill-circle {
	--x: 0%;
	--y: 0%;
	display: none;
	overflow: hidden;
	border-radius: var(--color-radius);
}

.cp_img{
    width: 100%;
    img{
        width: 100%;
    }
}
.capsule {
	border: 1px solid #fff;
	z-index: 1;
	position: relative;
	color: var(--color-light);

	overflow: hidden;
	border-radius: var(--color-radius);
}

.capsule:before {
	z-index: -1;
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border-radius: var(--color-radius);
	background: var(--color-grad-diagonal);
}


.fill-circle {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border-radius: inherit;
	overflow: hidden
}

.fill-circle:before {
	z-index: -1;
	content: "";
	position: absolute;
	display: block;
	top: var(--y);
	left: var(--x);
	aspect-ratio: 1/1;
	border-radius: 50%;
	background: var(--color-cricle);
	width: 100%;
	opacity: .15;
	transform: translate(-50%, -50%) scale(0)
}


.fill-circle:hover:before {
	animation: fill-circle-aniamtion .65s ease-out
}

@keyframes fill-circle-aniamtion {
	0% {
		transform: translate(-50%, -50%) scale(0);
		opacity: .15
	}

	to {
		transform: translate(-50%, -50%) scale(1.5);
		opacity: 0
	}
}


.splitting .char {
	visibility: visible;
	opacity: 0;
	transform: translateY(100%);
	transition: all 1s;
	transition-delay: calc(.9s * var(--char-index) / var(--char-total));
}

.animate__animated .splitting .char {
	opacity: 1;
	transform: translateY(0);
}

.ContactFrom {
	background: #F6F6F6;

	h1 {
		font-weight: normal;
		text-align: center;
		font-size: var(--ft40);
	}

	.desc {
		text-align: center;

		font-size: var(--ft14);
	}

	.foot {
		.flex-center;
	}

	form {
		gap: var(--p40) var(--p80);
		margin-top: vaR(--p80);
	}

	.label {
		margin-bottom: var(--p10);
	}

	.layui-input,
	.layui-select,
	.layui-textarea {
		background: #fff;
		border: 1px solid #DCDCDC;
	}

	.layui-btn {
		width: 300px;
		padding-left: 0.9em;
		display: flex;
		align-items: center;
		.jc-c;
		border: none;
		border-radius: 0;
		overflow: hidden;
		transition: all 0.2s;
		cursor: pointer;

		span {
			display: block;
			margin-left: 0.3em;
			transition: all 0.3s ease-in-out;
		}

		svg {
			display: block;
			transform-origin: center center;
			transition: transform 0.3s ease-in-out;
		}

		&:hover {
			opacity: 1;
		}

		&:hover .svg-wrapper {
			animation: fly-1 0.6s ease-in-out infinite alternate;
		}

		&:hover svg {
			transform: translateX(-0.5em) rotate(45deg) scale(1.1);
		}

		&:hover span {
			letter-spacing: 0.1em;
			transform: translateX(0.5em);
		}

		&:active {
			transform: scale(0.95);
		}

		@keyframes fly-1 {
			from {
				transform: translateY(0.1em);
			}

			to {
				transform: translateY(-0.1em);
			}
		}
	}
}

.ContactMap {
	.layui-main {
		padding: var(--p80);
		.d-flex;
		.jc-fe;

	}

	.Card {
		background: #e5e2e2;
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
		padding: var(--p80) var(--p60);

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

		ul {
			padding-bottom: var(--p30);
			.d-grid;

			li {
				.d-grid;
				grid-template-columns: 20px 1fr;
				gap: var(--p10);
			}
		}
	}
}

header {
	position: sticky;
	--color: #000;
	color: var(--color);
	background: #fff;

	--main: 1500px;

	.layui-main {}

	.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: 0px;
		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(--p20) 0;
			background: rgba(255, 255, 255, 0.9);
			height: 100%;
			overflow-y: auto;

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

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

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

			ul {
				.d-flex;

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

			.title {
				padding: 0;
				text-align: left;
				font-size: var(--ft20);
				color: #000000;
				margin-bottom: var(--p15);
				line-height: 1em;
				position: relative;

				padding-bottom: 5px;

				&:hover {
					padding-top: 5px;
					padding-bottom: 0;
					.ftc;
				}
			}

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

				a {
					color: #666;

					text-transform: uppercase;
					font-size: vaR(--ft14);
					padding: 0;
					padding-right: 1em;


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

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

	.layui-nav-item {
		&:hover {
			>a {
				color: #fff !important;
			}

			.nav-child {
				height: 420px;
			}
		}
	}


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

		i {
			transition: all 0.3s;
			font-size: var(--ft12);

		}

		&:hover {
			i {

				transform: rotate(-180deg);
			}
		}
	}

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

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

	.layui-nav {
		.layui-nav-more {

			right: -14px;
		}

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

		&>.layui-nav-item {
			line-height: 80px;
			margin: 0 2px;

			&.layui-this,
			&:hover {
				.bgc;
			}

		}

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

			&::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-this>a,
		.layui-nav-item:hover>a {}

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

		}
	}




	.input-container {
		position: relative;
		display: flex;
		align-items: center;
		margin-left: vaR(--p10);
	}

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

	.logo {
		img {
			max-height: 60px;
			max-width: 220px;
			object-fit: contain;
		}
	}

	.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 {
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

	}

	&.down {
		top: -100%;
	}

	&.Home {
		position: fixed;

		&.bgcolor {
			box-shadow: none;
			top: -100%;
		}
	}
}

.detailsMain {
	font-size: var(--ft14);
	background: rgba(245, 245, 245, 1);

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

	.layui-main {}



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

	.time {
		text-align: center;
		color: #666;
		margin-bottom: vaR(--p30);
	}

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

	.foot {
		.d-grid;
		.grid1;

		a {
			.line-clamp1;

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

		gap: var(--p10);
	}

	nav {
		padding: var(--p30);
		background: #fff;
		position: sticky;
		top: var(--p100);
		.d-grid;
		gap: var(--p15);

		.item {
			.d-grid;
			grid-template-columns: 12px 1fr;
			gap: vaR(--p10);
			padding-left: 0;

			* {
				transition: all 0.3s;
			}

			&:hover {
				.ftc;
				padding-left: var(--p10);

				h5 {}
			}
		}

		i {
			aspect-ratio: 1/1;
			.bgc;
			border-radius: 2px;
		}

		h5 {
			.line-clamp1;
		}
	}
}

.NewsDetails {
	h3 {
		font-size: clamp(28px, 2.2vw, 36px);
		line-height: 1.4;
	}

	.con {
		font-size: 18px;
		line-height: 2;
	}
}

.CaseList {
	.d-grid;
	.grid3;
	gap: var(--p80) var(--p40);
	

	@keyframes bubblePop {
		0% {
			transform: scale(0);
			opacity: 0;
		}

		70% {
			transform: scale(1.01);
			opacity: 1;
		}

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

	.item {
	

		&:hover {
			.bg {
				opacity: 1;
				background: rgba(0, 56, 253, 0.5);
			}

			svg {
				animation: 1s 0.2s bounceIn both;
			}
		}
	}

	.bg {
		opacity: 0;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		.flex-center;

		position: absolute;
	}

	* {
		transition: all 0.3s;
	}

	.img1 {
		aspect-ratio: 700/390;
		border: 1px solid #DFDFDF;
	}

	.Img {
		position: relative;

	}



	h5 {
		text-align: center;
		.line-clamp1;
		font-size: vaR(--ft24);
		font-weight: normal;
		margin: vaR(--p15) 0;
	}
}

.ProductBox {
	.d-grid;
	grid-template-columns: 0.23fr 1fr;
	gap: var(--p80);
}

.ProductDetails {
	--main: 1400px;

	h1 {
		font-size: var(--ft28);
		margin-bottom: var(--p40);
	}

	.sub1 {
		margin-top: var(--p30);
	}

	.con {
		margin-bottom: var(--p90);
	}

	.s_content {
		li::marker {
			.ftc;
		}
	}

	.Info {
		margin-bottom: var(--p120);
		.d-grid;
		grid-template-columns: 0.8fr 1fr;
		gap: var(--p60);

		.mySwiper2 {
			aspect-ratio: 1/1;
		}

		.mySwiper {
			margin-top: var(--p30);
		}

		.swiperBox {
			--swiper-navigation-size: var(--ft20);
			--swiper-navigation-color: var(--ftc);
			--swiper-pagination-color: var(--ftc);
			position: relative;
			padding: 0 var(--p30);
		}

		.swiper-button-prev {
			left: 0;
		}

		.swiper-button-next {
			right: 0;
		}

		.img1 {
			aspect-ratio: 125/85;
			border: 1px solid #fff;
			transition: all 0.3s;
			opacity: 0.6;
			cursor: pointer;
		}

		.swiper-slide-thumb-active {

			border-color: var(--ftc);
			opacity: 1;

		}
	}
}

.ProNav {
	h1 {
		font-size: var(--ft24);
		color: #333;
		border-bottom: 5px solid var(--bgc);
		margin-bottom: var(--p25);
	}

	.title {
		font-size: var(--ft18);
		color: #1F5488;
		margin-bottom: var(--p10);
	}

	aside {

		ul {
			.d-grid;
			gap: 2px;
		}

		.item {

			&.open {
				.add {
					display: none;
				}

				.sub {
					display: block;
				}
			}

			&.active {
				.itemType {

					background: #fff;
					color: #1F5488;
					border-color: #9CB1FF;


					.layui-icon {
						color: rgba(241, 4, 4, 1);
					}
				}
			}

		}

		.layui-icon {
			.ftc;
		}

		dl {
			padding-left: 1em;
			.d-grid;
			position: relative;

		}

		dd {
			position: relative;

		
		}

		dd a {
			width: 100%;
			display: inline-block;
			padding: 10px var(--p20);
			transition: all 0.3s;
            color: #666;
            font-size: var(--ft14);
            span{
                scale: 2;
                display: inline-block;
                margin-right: 0.5em;
            }
			&:hover {
				padding-left: vaR(--p30);
			}
&:hover,
			&.active {
    color: #1F5488;
    span{
        .ftc;
    }
			}
		}
	}

	.itemType {
		padding: var(--p15) var(--p20);
		font-size: var(--ft14);
		.d-flex;
		.al-c;
		gap: 5px;
		.jc-s;
		cursor: pointer;
		transition: all 0.3s;
		background: #F7F7F7;
		border-left: 3px solid #EBEBEB;

			color: #666666;
		.sub {
			display: none;
		}

		a {
			.d-flex;
			.al-c;

			img {
				margin-right: 5px;
				;
				width: 1.5em;
			}
		}
	}
}
    .top_box {
        width: 100%;
        position: relative;
        color: #fff;
        display: flex;
        align-items: center;
        aspect-ratio: 1920/360;
        min-height: 300px;
        font-size: var(--ft16);
            @keyframes breathing {
            0% {
           scale: 1;
            }
            50% {
                
              scale: 1.05;
            }
            100% {
                
               scale: 1;
            }
        }
        .BlockPro{
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 5;
            max-width: 60%;
            .bg_img;
            background-image: url('../images/bg.png');
            .d-flex;
            gap: 5px;
            padding:var(--p10) var(--p30) var(--p30 ) var(--p200);
            .al-fe;
            gap: var(--p10);
            .item{
                flex: 1;
                opacity: 0.6;
                &.active{
                    opacity: 1;
                 flex: 1.5;   
                }
                &:hover{
                      opacity: 1;
                 flex: 1.5;   
                }
            }
        }
    }

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

    .top_box .block {
        position: relative;
        z-index: 1;
        left:-50px;

    }
  .top_box .block .img1{
      bottom: vaR(--p50);
      position: relative;
      max-width: 6em;
   
  }
    .top_box .block .img2{
      position: relative;
      top:vaR(--p50);
      max-width:  6em;
  }
    .top_box h1 {
        display: inline-block;
        font-size: var(--ft48);
        margin: 0 var(--p10);
    }

    .top_box .img img {

        animation: breathing 5s ease-out forwards;
    }


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



}
.ProductItem {
    
	@keyframes bubblePop {
		0% {
			transform: scale(0);
			opacity: 0;
		}

		70% {
			transform: scale(1.01);
			opacity: 1;
		}

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

			animation: bubblePop 1s ease forwards;
		}

		&:hover {
			.bg {
				opacity: 1;
				background: rgba(0, 56, 253, 0.5);
			}

			svg {
				animation: 1s 0.2s bounceIn both;
			}
		}

	.bg {
		opacity: 0;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		.flex-center;

		position: absolute;
	}

	* {
		transition: all 0.3s;
	}

	.img1 {
		aspect-ratio: 1/1;
		border: 1px solid #DFDFDF;
	}

	.Img {
		position: relative;
	}

	h5 {
		text-align: center;
		.line-clamp1;
		font-size: vaR(--ft18);
		font-weight: normal;
		margin: vaR(--p15);
	}
}
.pagenum {
	--ftc: #1F5488;

	.pagination {
		gap: 5px;
	}

	i {
		font-size: var(--ft14);
	}

	input,
	button,
	a,
	span {
		border: 1px solid #DEDEDE;
		font-size: var(--ft14);
		border-radius: 4px;
		min-width: 2.2em;
		background: #fff;

	}
}

.JoinUs {
	--main: 1200px;
	.bgc;
	color: #fff;
	padding: var(--p35) 0;

	h1 {
		font-weight: normal;
		line-height: 1em;
		margin-bottom: var(--p15);
		font-size: var(--ft42);
	}

	.desc {
		font-size: var(--ft12);
	}

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

	.capsule {
		font-size: var(--ft14);
		letter-spacing: 0.0em;
		transition: all 0.3s;

		&:hover {
			letter-spacing: 0.2em;

		}

		padding: var(--p10) var(--p50);
	}
}


.backtop {
	opacity: 0;
	width: 40px;
	aspect-ratio: 1/1;
	background: linear-gradient(var(--ftc), #008ec7b5);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	cursor: pointer;
	position: relative;
	border: none;
	position: fixed;
	right: var(--p20);
	box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
	bottom: vaR(--p50);
	transition: all 0.3s;
	visibility: hidden;

	.arrow path {
		fill: white;
	}



	&:hover .arrow {
		animation: slide-in-bottom .7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	}

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

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

}

header {
	&.bgcolor {
		.backtop {
			visibility: visible;
			opacity: 1;
		}
	}
}

footer {
	--main: 1600px;

	form {
		--btn: 38px;
		--btn_size: var(--ft14);
		--input: 40px;
		--input_size: var(--ft14);
		gap: var(--p10);

		.layui-input,
		.layui-select,
		.layui-textarea {
			background: #F6F6F6;
			border: none;
		}

		.foot {
			.d-flex;
			.jc-fe;
			margin-top: var(--p1);

			button {
				border-radius: 0;
				;
			}
		}
	}

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

		h1 {
			font-weight: normal;
			font-size: vaR(--ft18);
			margin-bottom: vaR(--p20);
		}

		dl {
			.d-grid;
			gap: var(--p10);

			a[href] {
				padding-right: 1em;
			}

			a[href]:hover {
				.ftc;
				padding-left: 1em;
				padding-right: 0;
			}
		}
	}

	.foot1 {
		padding: vaR(--p60) 0;
		.bg_img;
		animation: breathing 40s ease-in-out infinite;
	}

	@keyframes breathing {
		0% {
			
			background-size: 100% 100%;
		}

		50% {
			
			background-size: 110% 110%;
		}

		100% {
			
			background-size: 100% 100%;
		}
	}

	.foot2 {
		border-top: 1px solid #C0C0C0;
		font-size: vaR(--ft14);
		text-align: center;
		padding: var(--p20);
		background: #F9F9F9;
	}
}

.New {
	background: #F6F9F8;

	--main: 1440px;
}

:root {
	--loader-bg-color: #fff;
	
	--loader-shine-color: rgba(255, 255, 255, 0.9);
	
	--loader-animation-duration: 3s;
	
}

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


.image-container::before {
	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%);
	}
}


.TopNav {
	padding: var(--p20) 0;

	.flex-center;
	background: #F3F3F3;
	color: #666666;
	gap: var(--p10);

	a[href]:hover {
		.ftc;
	}
}

.NewList {
	.d-grid;
	gap: vaR(--p30);

	.line {
		height: 1px;
		background: #D0D0D0;
		width: 100%;

	}

	.item {
		.d-grid;
		grid-template-columns: 0.3fr 1fr;
		background: #fff;


		* {
			transition: all 0.5s;
		}

		.con:before {
			background: #182A88;

		}

		&:hover {
			box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);

			h5 {
				color: #182A88;
			}

		}
	}

	.date {
		text-align: center;
		color: #182A88;

		.day {
			font-size: vaR(--ft72);
			line-height: 1em;
		}

	}

	.con {
		background: #fff;
		.d-grid;
		.al-c;
		gap: var(--p20);
		grid-template-columns: auto 0.05fr 1fr;
		padding: vaR(--p50) var(--p30);
	}

	hr {
		border-color: #182A88;
		;
	}

	h5 {
		.line-clamp1;
		font-size: vaR(--ft20);
	}

	.sub {

		.line-clamp2;
		margin-top: vaR(--p20);
	}
}

.TwoList {
	.d-grid;
	.grid2;
	margin-bottom: vaR(--p120);
	gap: var(--p100);

	li {
		gap: vaR(--p100);

	}

	.img {
		aspect-ratio: 670/315;
	}

	.t1 {
		font-size: vaR(--ft14);
	}

	h5 {
		margin-bottom: vaR(--p30);
		min-height: 3em;
		margin-top: vaR(--p20);
		font-size: var(--ft50);
		font-weight: normal;
	}

	.sub {
		width: 470px;
		max-width: 100%;
		margin-top: vaR(--p50);
		font-size: vaR(--ft22);
		color: rgba(57, 57, 77, 1);

	}

}

.OneList {
	.d-grid;
	.grid1;
	margin-bottom: vaR(--p120);
	gap: var(--p120);

	li {
		.d-grid;
		grid-template-columns: 0.5fr 1fr;
		gap: vaR(--p100);

		&:nth-child(even) {

			direction: rtl;
		}
	}
	.mySwiper2 {
			aspect-ratio: 1/1;
		}

		.mySwiper {
			margin-top: var(--p30);
		}

		.swiperBox {
			--swiper-navigation-size: var(--ft20);
			--swiper-navigation-color: var(--ftc);
			--swiper-pagination-color: var(--ftc);
			position: relative;
			padding: 0 var(--p30);
		}

		.swiper-button-prev {
			left: 0;
		}

		.swiper-button-next {
			right: 0;
		}

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

	h5 {
		margin-top: vaR(--p20);
		font-size: var(--ft28);
		font-weight: bold;
	}

	.con {
		direction: ltr;
	}

	.sub {
		margin-top: vaR(--p50);
		font-size: vaR(--ft22);
		color: rgba(57, 57, 77, 1);

	}
	.img_box {
	    >div{
	        width: 100%;
	    }
	}
}

.AboutCompany {
	ul {
		.d-grid;
		.grid3;
		gap: var(--p25);

		li {
			padding: var(--p50) var(--p20) var(--p20);
			background: #fff;
box-shadow: -1px 13px 20px  rgba(240, 242, 244, 1);
			border-radius: 5px;
			color: #263238;

			&:hover {
				.bgc;
				color: #fff;
				img{
				    
  filter: grayscale(100%) brightness(1000%) contrast(200%);
				}
				.key{
				    color: #fff;
				    opacity: 0.6;
				}
			}
		}

		.con {
			.d-flex;
			.al-c;
			gap: var(--p20);
			margin-bottom: vaR(--p20);
		}
.key{
 color: #1F5488;   
}
		h5 {
			font-size: vaR(--ft24);
			font-weight: bold;
		}

		.sub {
			line-height: 2em;
			min-height: 10em;
		}

	}
}

   .marquee-container {
       margin-top: var(--p70);
            width: 100%;
            overflow: hidden;
            position: relative;
        }

        
        .marquee-track {
            display: flex;
            width: max-content;
            gap: var(--p30);
            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;
border: 1px solid rgba(240, 240, 240, 1);
background: #fff;
height: 110px;
min-width: 180px;
            a{
                width: 100%;
                height: 100%;
            }
        }

        .marquee-item:hover {
            z-index: 9;
        }


        
        @keyframes marquee {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(calc(-50% - 10px));
                
            }
        }

        
        .marquee-clone {
            gap: var(--p30);
            display: flex;
        }
  
.AboutMap{
    .Card{
        padding: vaR(--p20);
        .al-c;
border-radius: 17px;
gap: var(--p40);
background: rgba(255, 255, 255, 0.5);
border:1px solid rgba(246, 246, 246, 1);
.d-grid;
line-height: 2em;
grid-template-columns: 1fr 0.5fr;
font-size: vaR(--ft24);
    }
}

.ProutAbout {
	margin-top: vaR(--p120);

	h1 {

		text-align: center;
	}

	.swiper-slide {
		padding: var(--p20);
	}

	--swiper-theme-color:var(--bgc);
	position: relative;
	padding-bottom: var(--p40);
}
.AboutHoner {
	ul {
		.d-grid;
		.grid4;
		gap: var(--p60);
		margin-top: vaR(--p80);
		text-align: center;
		color: #4F5362;

		h5 {
		    font-weight: normal;
		    color: #4F5362;
			margin-top: var(--p10);
		}

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

		.img {

			flex: 1;
		}

	}
}
.About{
    --main:1440px;
}
.AboutInfo{
    .Info{
        .d-grid;
        .al-c;
        .grid2;
        gap: var(--p50);
        .img{
            border-radius: var(--p30);
        }
        .desc{
            margin-top: vaR(--p30);
            text-indent: 2em;
            line-height: 2em;
        }
    }
}
.Index{
    --main:1440px;
}
.index_swiper{
    .SwiperItem{
        height: 100vh;
        margin-top: 0;
        h1{
            margin-bottom: var(--p25);
            font-size: var(--ft44);
            line-height: 1.25em;
        }
        .t1,.t2{
            width: 800px;
            max-width: 100%;
            
        }
        .block .layui-main > div{
            font-size: var(--ft18);
        }

    }
          .ani-slide .char{
          	opacity: 1;
	transform: translateY(0);
      }
}
.IndexAbout{
    .bg_fixed;
    position: relative;
    min-height: 100vh;
    .d-flex;
    .al-c;
    .bgl,
    .bgr{
        position: absolute;
        z-index: 0;
        top: 0;
        bottom: 0;
        height: 100%;
    }
    .bgl{
        left: 0;
   
    }
    .bgr{
        right: 0;
    }
    .Info{
        margin-top: vaR(--p60);
        .d-grid;
        .grid2;
        gap: var(--p50);
        video{
            width: 100%;
            border-radius: var(--p30);
        }
        .video{
            .d-flex;
            .flex-column;
            >img{
                width: 100%;
            border-radius: var(--p30);
            }
        }
        .img{
            padding: var(--p20) 0;
            flex: 1;
            .al-c;
        }
        h1{
            font-size: var(--ft24);
        }
        .desc{
            margin-top: vaR(--p30);
            text-indent: 2em;
            line-height: 2em;
        }
    }
}
.titleCom {
	position: relative;
	text-align: center;
	.flex-column-center;

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

	.en {
		.ftc;
		font-size: var(--ft32);
		font-weight: bold;
	}

	h1 {
	    .d-flex;
	    .al-fe;
		.ftc;
		font-weight: bold;
		line-height: 1em;
		font-size: var(--ft36);
		
	}
	.desc{
	    font-weight: bold;
		font-size: var(--ft18);
	}

	hr {
		border-bottom: 6px solid  rgba(175, 40, 47, 1);;
		width: 50px;
	}

	&.white {
		* {
			color: #fff;
		}

		hr {
			border-color: #fff;
		}
	}

	&.left {
		.al-fs;
	}

}
.IndexProduct{
    .list{
        margin-top: vaR(--p60);
        .d-grid;
        .grid6;
        gap: var(--p15);
        .ProductItem{
            display: block;
                border: 1px solid rgba(0,0,0,0);
            &:hover{
                .bgc;
                color: #fff;
                border: 1px solid var(--ftc);
           
            }
        }
    }
    .TextList{
        margin-top: vaR(--p60);
        .item{
            width: 100%;
            .d-grid;
            grid-template-columns: 0.7fr 1fr;
            gap: var(--p40);
        }
        .sub{
            flex: 1;
        }
        .con{
            font-size: var(--ft14);
            .d-flex;
            .flex-column;
            gap: var(--p20);
            padding: var(--p20) 0;
        }
        .img1{
            border-radius: var(--p30);
        }
        h5{
            font-size: var(--ft36);
        }
        .btn{
            .d-flex;
            .al-fs;
        }
        .type{
            margin-bottom: vaR(--p10);
            color: rgba(31, 84, 136, 1);
        }
        .layui-btn{
            --btn:50px;
            .flex-center;
            gap: var(--p10);
            border-radius: 0;
        }
    }
    .foot{
        margin-top: vaR(--p60);
        .layui-btn{
            &:hover{
                opacity: 1;
            }
            .flex-center;
            gap: var(--p10);
            border-radius: 0;
            width: 100%;
            height: 50px;
        }
    }
}
.IndexNew {

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

		.item {
		    height: 100%;
		.d-flex;
		.flex-column;

				background: #F6F6F6;
			.con {
			    flex: 1;
					box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
				position: relative;
				z-index: 5;
				bottom: 0;

			}

			&:hover {
				bottom: 10px;

				* {
					color: #fff;
				}

				.con {

					box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
					.bgc;
					bottom: var(--p30);
				}

				.day {
					border-color: #fff;
				}
			}
		}

		.img {
			aspect-ratio: 500/390;
		}

		.date {
			.d-flex;
			.al-fe;
			gap: 5px;
			color: var(--ftc);
			font-size: var(--ft18);

			.day {
				border-bottom: 2px solid var(--ftc);
				line-height: 1em;
				font-size: var(--ft70);
				;
			}

			span {
				padding-bottom: 10px;
			}
		}

		.con {
			padding: var(--p20);
		}

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

		.sub {
			margin-top: var(--p10);
			color: #666;
			.line-clamp2;
		}

		* {
			transition: all 0.3s;
		}
	}

	.foot {
		margin-top: vaR(--p40);
		.flex-center;
	}

	.layui-btn {
		.flex-center;
		gap: var(--p20);
		border-radius: 0;
		--btn:50px;

		&:hover {
		    opacity: 1;
			padding: 0 vaR(--p30);
			
			 .button__icon-wrapper {

}.button__icon-svg:first-child {
  transition: transform 0.3s ease-in-out;
  transform: translate(150%, -150%);
}.button__icon-svg--copy {
  transition: transform 0.3s ease-in-out 0.1s;
  transform: translate(0);
}
		}
		
.button__icon-wrapper {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  position: relative;
  color: var(--ftc);
  background-color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.button__icon-svg--copy {
  position: absolute;
  transform: translate(-150%, 150%);
}

		
	}
}
.IndexCase{
    .CaseList{
        margin-top: var(--p60);
        .d-grid;
        .grid3;
        gap: var(--p30);
        .img{
            aspect-ratio: 340/220;
        }
        h5{
            
            text-align: center;
        }
    }
}
.chanpinxz{
    h3{
        color: rgb(66,77,231);
        font-weight: 400px;
        font-size: 24px;
    }
}
@media only screen and (max-width: 1400px) {}

@media only screen and (max-width: 990px) {
     .IndexNew ul{
        .grid1;
    }
    .IndexAbout .bgl, .IndexAbout .bgr{
        display: none;
    }
    .IndexCase .CaseList{
        .grid2;
    }
    .top_box{
        min-height: 200px;
    }
    .top_box .block{
        left: 0;
    }
      .top_box .block .img1,
    .top_box .block .img2{
        width: 2em;
    }
    .marquee-item{
    min-width: 120px;
        height: 60px;
    }
    .ProductList,
    .AboutHoner ul,
    footer .footerUl{
       .d-grid;
       .grid2;
    }
    .AboutCompany ul img{
        width: 3em;
    }
    .top_box .BlockPro{
        
    background-position: bottom;
    background-size: contain;
    }
    .OneList li,
    .ProductDetails .Info,
    .ProductBox,
    .AboutMap .Card,
    .AboutCompany ul,
    .AboutInfo .Info,
    .IndexProduct .TextList .item,
    .IndexAbout .Info{
        .grid1;
    }
    .IndexProduct .list{
        .grid3;
    }
    .index_swiper .SwiperItem{
        height: auto;
        min-height: 40vh;
    }
    .index_swiper .swiper-button-next, .index_swiper .swiper-button-prev{
        display: none;
    }
    header{
        position: fixed;
        top: 0;
        &.bgcolor {
    top: 0%;
}
    }
}

@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) {}