@import "./common.less";

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.5s;
}
.footerLogo img{
    // max-width:14px;
    max-height: 80px;
}
header {
	--color: #fff;
	color: #fff;
	border-bottom: 1px solid #fff;
&.bgcolor{
    background: rgba(0,0,0,0.5);
    	.layui-main {
		padding: var(--p10) 0;
	}
}
	.layui-main {
		padding: var(--p20) 0;
	}

	.logo {
		flex: 1;
	}

	.line {

		padding: 0 var(--p30);
	}

	.logo img {
		max-height: 60px;
	}

	.layui-nav .layui-this:after,
	.layui-nav-bar {
		background: #fff;
	}

	.layui-nav {
		.layui-nav-item {
			margin-left: 4rem;
			line-height: 3em;
		}

		.layui-nav-item>a {
			font-size: var(--ft18);
			padding: 0;
		}

		.layui-nav-more {

			right: -1.2em;
		}
	}

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

.ProNav {
	.box {
		border-radius: 10px;
		overflow: hidden;

		position: sticky;
		top: 0;
		box-shadow: 0 6px 16px #DEE6EF4D;
	}

	.title {
		padding: var(--p20);
		font-size: var(--ft24);
		.flex-center;
		gap: var(--p10);
		background: linear-gradient(0deg, #FF7D7D, #C53131);
		color: #fff;
	}

	* {
		transition: all 0.3s;
	}

	ul {
		padding: var(--p10);
		font-size: var(--ft18);

		.itemType {
			.d-flex;
			gap: 5px;

			i {

				display: inline-flex;
				width: var(--p20);
			}
			.al-c;

			padding: var(--p20) var(--p20) var(--p20) var(--p40);
			border-bottom: 1px dashed #E2E5EC;

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

		}

		a {
			.line-clamp1;
		}

		dl {
			display: none;

			dd {
				padding: var(--p10) var(--p20) var(--p10) var(--p60);

				a {
					padding-left: 5px;
				}

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

		li:last-child {

			.itemType {
				border: none;
			}
		}

		dd {
			.active {
				.ftc;
			}
		}

		li.active {
			.itemType {
				font-weight: bold;
				.ftc;
			}
		}
	}
}

.pagenum {

	button:hover,
	a:hover {
		.ftc;
	}

	button {

		background: #fff;
	}
}

.DownloadList {
	.item {
		.d-flex;
		.al-c;
		.jc-s;
		gap: var(--p20);
		font-size: var(--ft22);
		padding: var(--p20) 0;
		margin-left: 1em;
		border-bottom: 1px dashed #E2E5EC;
		position: relative;

		h5 {
			font-weight: normal;
			.line-clamp1;
			flex: 1;
		}

		&::before {
			font-size: var(--ft16);
			;
			position: absolute;
			left: -1em;
			display: inline-block;
			content: '•';
			color: #CCCCCC;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	* {
		transition: all 0.3s;
	}

	.Btn {
		border: none;

		border-radius: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		position: relative;
		transition-duration: 0.3s;
	}

	.svgIcon {
		fill: rgb(70, 70, 70);
	}

	.icon2 {
		width: 18px;
		height: 5px;
		border-bottom: 2px solid rgb(70, 70, 70);
	}

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

		h5 {
			.ftc
		}

		.Btn {
			transition-duration: 0.3s;
		}

		.Btn .icon2 {}

		.Btn .svgIcon {
			animation: slide-in-top 1s linear infinite;
		}

	}


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

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

}

.Page {
	.d-grid;
	grid-template-columns: 0.25fr 1fr;
	gap: var(--p50);
}

:root {
	--loader-bg-color: #E2E5EC;
	/* 加载背景色 */
	--loader-shine-color: rgba(255, 255, 255, 1);
	/* 光效颜色 */
	--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%);
	}
}

.topImg {
	aspect-ratio: 1920/500;
}

footer {
	.foot1 {
		color: #fff;
		padding: var(--p30) 0 var(--p40);
		background: rgba(42, 45, 52, 1);

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

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

			li {
				.d-grid;
				.al-fs;
				grid-template-columns: 30px 1fr;
				gap: vaR(--p20);
			}
		}

		nav {
			.d-flex;
			.al-fs;
			gap: var(--p80);

			.t1 {
				font-size: var(--ft18);
				margin-bottom: var(--p20);
			}

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

				a {
					opacity: 0.8;

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

	.foot2 {
		padding: var(--p10) 0;

		color: rgba(255, 255, 255, 1);
		.flex-center;
		font-size: var(--ft14);
		gap: var(--p30);
		flex-wrap: wrap;
		background: rgba(0, 0, 0, 1);

		a {
			opacity: 0.8;

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

.Form {
	gap: var(--p50) var(--p40);
	--input: 72px;
	margin-top: var(--p60);

	.layui-input-prefix,
	.layui-input-split,
	.layui-input-suffix,
	.layui-input-suffix .layui-input-affix {
		width: var(--input);
		.flex-center;
	}

	.layui-input,
	.layui-select,
	.layui-textarea {
		border-radius: 4px;
		border-color: #E5E5E5;
	}

	.layui-input-wrap {

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

			padding-left: calc(var(--input) + 20px) !important;
		}

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

	.layui-form-select dl {
		top: var(--input);
	}

	.codeBox {
		position: relative;

		canvas {
			position: absolute;
			right: vaR(--p20);
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.foot {
		.flex-center;
	}

	.layui-btn {
		border-radius: 4px;
		width: 500px;
	}
}

.Contact {
	h1 {
		margin-top: var(--p90);
		text-align: center;
		font-size: var(--ft36);
	}

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

		ul {
			li {
				padding: vaR(--p25);
				border-bottom: 1px dashed #E2E5EC;

				&:last-child {
					border: none;
				}
			}

			h5 {
				font-size: vaR(--ft20);
				color: #333333;
			}

			.sub {
				line-height: 2em;
				margin-top: vaR(--p20);
				color: #878F9A;
			}
		}
	}

}

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

	.item {
		&:hover {
			.bg {
				opacity: 1;
				background: rgba(195, 13, 35, 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: 350/285;
		border: 1px solid #DFDFDF;
	}

	.Img {
		position: relative;

	}



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

.detailsMain {
	section {
		padding-top: var(--p30);

	}

	nav {
		i {
			margin-right: 10px;
		}

		font-size: var(--ft14);

		a:hover {
			.ftc
		}
	}

	.Info {
		.d-grid;
		grid-template-columns: 0.7fr 1fr;
		gap: var(--p80);
		margin: var(--p50) 0 var(--p70);

		.Img {
			border: 1px solid #DFDFDF;
			aspect-ratio: 500/410;
		}

		.Text {
			ul {
				color: #606060;
				.d-grid;
				gap: var(--p15);
				margin-top: var(--p30);
			}

			.label {
				display: inline-block;

				text-align: right;
			}

			li {
				.d-grid;
				grid-template-columns: 5em 1fr;
			}

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

			}
		}

		.colorItem {
			cursor: pointer;
			border-radius: 50%;
			width: 30px;
			aspect-ratio: 1/1;
			border: 2px solid #DDDBDB;

			img {

				width: max-content;
				height: max-content;
			}
		}

		h1 {
			line-height: 1.1em;
			font-size: var(--ft28);
		}

		.sub {
			color: #606060;
			padding-top: vaR(--p20);
			margin-top: var(--p20);
			font-size: var(--ft18);
			line-height: 1.7em;
			border-top: 1px solid #DDDBDB;

		}
	}

	.con {
		margin-top: vaR(--p320);
		font-size: var(--ft20);
	}

	.linetitle {
		font-size: var(--ft24);
		border-left: 2px solid #FF0828;
		padding-left: var(--p10);
		line-height: 1em;
		margin-bottom: vaR(--p30);
	}

	.layui-tabs-header .layui-this,
	.layui-tabs-header li {
		font-size: var(--ft18);
		padding: 0;
		margin: 0 var(--p20) !important;
	}

	.layui-tabs-header .layui-this,
	.layui-tabs-header li:hover {
		color: #FF0828;
	}

	.layui-tabs-header .layui-this:after {
		border-color: #FF0828;
	}

	.DownloadList {
		.item {
			padding: var(--p10);
		}

		h5 {
			font-size: var(--ft16);

		}
	}
}

.IndexContact {
	background: #a2194e;
	--main: 1100px;
	color: #fff;
	text-align: center;

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

	.desc {
		margin-top: vaR(--p10);
		font-size: var(--ft25);

	}

	.layui-main {
		position: relative;
		z-index: 2;
	}

	form {
		width: 800px;
		max-width: 100%;
		margin: var(--p40) auto;
		margin-top: vaR(--p40);
		.d-grid;
		grid-template-columns: 1fr auto;
		gap: var(--p40);
	}

	.layui-btn {
		text-align: center;
		border-radius: 4px;
		background: #fff;
		color: #C30D23;
		border: none;
		font-weight: bold;
		font-size: vaR(--ft20);
		letter-spacing: 1em;
		padding-left: 2em;

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

	.layui-input {
		background: #fff;
	}
}

.layui-btn {
	border-radius: 0;
}

.titleCom {
	text-align: center;

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

	.en {
		font-size: var(--ft20);
		color: #CFCFCF;

	}
}

.IndexNew {
	ul {
		.d-grid;
		.grid4;
		gap: var(--p40);
		margin-top: var(--p50);

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

		.sub {
			margin-top: var(--p10);
			font-size: var(--ft14);
			color: #787878;
			.line-clamp3;
		}

		.layui-btn {
			margin-top: var(--p15);
			background: #C30D23;
			width: 50%;
			.flex-center;
			font-size: var(--ft14);
			gap: var(--p10);
		}
	}

	.item {
		margin-top: vaR(--p80);

		.Img {
			position: relative;
			aspect-ratio: 380/240;
		}

		.date {
			font-size: var(--ft14);
			color: #fff;
			position: absolute;
			left: 0;
			bottom: 0;
			background: #C30D23;
			padding: 2px var(--p10);
		}

		&:hover {
			.layui-btn {
				width: 60%;
			}
		}
	}

	.item2 {
		* {
			transition: all 0.5s;
		}

		position: relative;
		grid-column: span 2;

		.img {
			height: 100%;
		}

		.con {
			width: 60%;
			position: absolute;
			right: 0;
			bottom: 0;
			background: #fff;
		}

		h5 {
			padding-top: vaR(--p15);
			line-height: 1em;
			padding-left: var(--p50);
			font-size: var(--ft60);
			.ftc;
		}

		.sub {
			padding-left: var(--p50);

		}

		.layui-btn {
			margin-top: var(--p25);
			.jc-fs;
			padding-left: var(--p50);
			width: 100%;
		}

		&:hover {
			.layui-btn {
				width: 60%;
			}

			.con {
				box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
			}
		}
	}
}

.IndexWhy {

	/* HTML:  */
	.loader {
		width: 20px;
		aspect-ratio: 1;
		border-radius: 50%;
		background: rgba(195, 13, 35, 1);
		box-shadow: 0 0 0 0 rgba(195, 13, 35, 0.6);
		animation: l2 6s infinite linear;
		position: relative;
	}

	.loader:before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		box-shadow: 0 0 0 0 rgba(195, 13, 35, 0.3);
		animation: inherit;
		animation-delay: -3s;
	}

	// .loader:after {
	// 	animation-delay: -4s;
	// }

	@keyframes l2 {
		100% {
			box-shadow: 0 0 0 60px rgba(195, 13, 35, 0.0)
		}
	}

	.Block {
		margin-top: vaR(--p50);
		.bg_img;
		background-size: 100% 100%;
		background-image: url(../images/bg.png);
	}

	position: relative;

	.loader {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -0%);
		width: 170px;
		font-size: vaR(--ft40);
		.flex-center;
		aspect-ratio: 1/1;
		line-height: 1.2em;
		color: #fff;
	}

	ul {
		.d-grid;
		.grid2;
		gap: var(--p80) var(--p200);

		li {
			padding: var(--p50) var(--p40);
			.d-grid;
			.al-fs;
			grid-template-columns: 0.1fr 1fr;
			gap: vaR(--p20);
		}

		h5 {
			line-height: 1em;
			font-size: var(--ft34);
			font-weight: normal;
		}

		.sub {
			color: rgba(96, 96, 96, 1);
			margin-top: var(--p10);
			min-height: 80px;
		}

		li:nth-child(even) {
			padding-left: vaR(--p100);
		}
	}
}
.IndexSoult{
    padding: 0;
 
    min-height: 100vh;
    .d-flex;
    .flex-column;
    ul{
        margin-top: vaR(--p50);
        flex: 1;
        .d-flex;
        *{
            transition: all 0.5s;
        }
        .item{
            flex: 1;
            position: relative;
            &:hover{
                .con{
                background: rgba(195, 13, 35, 0.5);
                }
                .hr{
                    height: 1px;
                    margin: var(--p40) 0;
                    background:  #fff;
  transform: rotate(90deg);
                }
                .desc{
                    height: auto;
                    overflow: visible;
                    opacity: 1;
                    transform: translateY(0);
                }
            }
        }
        .img{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 0;
        }
        .con{
            text-align: center;
            padding: var(--p20) 2rem;
            .flex-column-center;
            position: relative;
            z-index: 1;
            color: #fff;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
        }
        h5{
            font-size: var(--ft24);
            margin-top: var(--p40);
        }
        .sub{
            text-transform: uppercase;
        }
        .hr{
            margin: var(--p20) 0;
            width: 50px;
            height: 3px;
            background: rgba(21, 105, 171, 1);
  transition: transform 0.3s ease;
        }
        .desc{
            overflow: hidden;
            height: 0;
    opacity: 0;
    transition-delay: 0.4s;
    transition: all 0.6s;
                    transform: translateY(30px);
        }
    }
}
.IndexProduct{
    
    .layui-tabs-header{
        margin-top: vaR(--p40);
        .flex-center;
        .jc-se;
    
    }
    .layui-tabs-header li{
        padding: 0;
        font-size: vaR(--ft22);
        color: #333;
        padding-bottom: 5px;
        &::before{
            background: rgba(195, 13, 35, 1);
        }
        &.layui-this,
        &:hover{
            
        color: rgba(195, 13, 35, 1);
        }
        &.layui-this::after{
            display: none;
        }
        &.layui-this::before{
            
                left: 0;
               right: 0;
        }
    }
    .layui-tabs-header:after, .layui-tabs-scroll:after{
        display: none;
    }
    .layui-tabs-item{
        display: block;
        overflow: hidden;
        height: 0;
        transition: all 0.5s;
    }
    .layui-show{
        overflow: visible;
        height: auto;
        .prolist{
            
         transform: translateY(0);
        }
    }
    .prolist{
        transition: all 0.5s;
         transform: translateY(100px);
        margin-top: var(--p40);
        .d-grid;
        .grid2;
        gap: var(--p40);
        .item{
            padding: var(--p15);
            .d-grid;
            .grid2;
            position: relative;
            border: 1px solid rgba(223, 223, 223, 1);
            	&:hover {
            	    
		box-shadow: 0 6px 16px #DEE6EF;
			.bg {
				opacity: 1;
				background: rgba(195, 13, 35, 0.5);
			}

			svg {
				animation: 1s 0.2s bounceIn both;
			}
		}
        }
        .img1{
            aspect-ratio: 1/1;
        }
        .con{
            .d-flex;
            .flex-column;
            .jc-s;
            padding: var(--p50 ) var(--p30); 
        }
        h5{
            .line-clamp1;
            font-weight: normal;
            font-size: var(--ft28);
        }
        .more{
            font-size: var(--ft18);
          color: rgba(195, 13, 35, 1);
        }
 
	.bg {
		opacity: 0;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		.flex-center;

		position: absolute;
	}
    }
}
.index_swiper{
 .block{
     text-align: center;
 }
 h1{
     font-size: var(--ft28);
     font-weight: normal;
 }
 .sub{
     font-size: var(--ft56);
     font-weight: bold;
     
 }
 .layui-btn{
     margin-top: vaR(--p40);
     border-color: #fff;
     --btn:40px;
     background: initial;
     border-radius: 20px;
     &:hover{
       padding: 0 var(--p30);
     }
 }
}
 .navMobile  {
        position: fixed;
        left: 100%;
        width: 100%;
        top: 0;
        bottom: 0;
        background: #fff;
        color: #000;
        transition: all 0.5s;
        z-index: 999;
        &.show{
            left: 0;
        }
        .menu_button{
            path{
                stroke: #000;
            }
        }
    }.SearchMain{
    form{
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: var(--p40);
       gap: var(--p20);
    }
    .search-icon {
        background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 50%;
  margin-left: 10px;
  cursor: pointer;
  aspect-ratio: 1/1;
  width: 50px;
  transition: background-color 0.3s ease;
    flex-shrink: 0;
}
.layui-input-group{
  
       display: flex;
   gap: var(--p20);
}

.model{
    flex-shrink: 0;
    width: 8em;
}
.container{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    aspect-ratio: 1920/400;
    overflow: hidden;
     background: linear-gradient(
                135deg,
                rgba(195, 13, 35, 0.2),
                rgba(139, 0, 0, 0.3),
                rgba(255, 107, 107, 0.2)
            );
            background-size: 200% 200%;
            animation: gradientShift 15s ease infinite; 
}
 .color-blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(150px);
            z-index: 1; /* 低于内容层级，避免遮挡文字 */
        }

        /* 主色块（指定色：rgba(195, 13, 35, 1)） */
        .primary-blob {
            background-color: rgba(195, 13, 35, 0.7);
            width: 700px;
            height: 700px;
            top: -350px;
            left: -150px;
            animation: flow 20s ease-in-out infinite;
        }

        /* 辅助色块 */
        .secondary-blob {
            background-color: rgba(139, 0, 0, 0.6); /* #8B0000 */
            width: 600px;
            height: 600px;
            bottom: -250px;
            left: 20%;
            animation: flow 22s ease-in-out infinite;
            animation-delay: 4s;
        }
         .accent-blob {
            background-color: rgba(255, 107, 107, 0.6); /* #FF6B6B */
            width: 550px;
            height: 550px;
            top: 30%;
            right: -200px;
            animation: flow 18s ease-in-out infinite;
            animation-delay: 8s;
        }

        /* 流动动画：位移+缩放+透明度变化 */
        @keyframes flow {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: 0.7;
            }
            25% {
                transform: translate(20%, -10%) scale(1.1);
                opacity: 0.6;
            }
            50% {
                transform: translate(10%, 15%) scale(0.95);
                opacity: 0.8;
            }
            75% {
                transform: translate(-15%, 5%) scale(1.05);
                opacity: 0.65;
            }
            100% {
                transform: translate(0, 0) scale(1);
                opacity: 0.7;
            }
        }

        /* 背景渐变流动动画 */
        @keyframes gradientShift {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        /* 文字脉冲动画 */
        @keyframes pulseSlow {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.8;
            }
        }
            .container h1 {
            font-size: var(--ft36);
            position: relative;
            z-index: 5;padding-top: var(--p100);
            font-weight: 700;
            text-align: center;
            margin-bottom: 24px;
            letter-spacing: 0.2em;
            color: #fff;
        }
        }
@media only screen and (max-width: 1400px) {}

@media only screen and (max-width: 990px) {
    .SearchMain .container {
    
        padding-top: 40px;
        aspect-ratio: 1920/800;
    }
    .SearchMain .model{
        width: 9em;
    }
    .SearchMain{
        --input:40px;
        --input_size:14px;
    }
    .SearchMain .search-icon{
        width:  40px;
        height: 40px;
    }
    .navMobile  {
        position: fixed;
        left: 100%;
        width: 100%;
        top: 0;
        bottom: 0;
        background: #fff;
        color: #000;
        transition: all 0.5s;
        z-index: 999;
        &.show{
            left: 0;
        }
        .menu_button{
            path{
                stroke: #000;
            }
        }
    }
    .index_swiper .SwiperItem{
        height: 40vh;
        padding-top: 50px;
    }
    .IndexSoult ul .con .img_box img{
        max-width: 30px;
    }
    .IndexSoult ul{
        .d-grid;
        .grid2;
    }
.IndexWhy .Block{
    background: none;
}
    .IndexWhy .loader{
        width: 70px;
        font-size: 16px;
    }
    .IndexNew ul,
    .IndexProduct .prolist{
        .grid1;
    }
    header .logo img{
        max-height: 25px;
        max-width: 100px;
    }
    header .layui-main{
        padding:0px 0;
    }
    .IndexProduct .prolist .item {
      grid-template-columns: 0.5fr 1fr;
    }
    .footerLogo img{
        max-height: 30px;
    }
    .Contact .Info,
    .Page{
        .grid1;
    }
    .ProNav ul .itemType i::before{
        font-size: 12px;
    }
     .ProNav ul li.active .itemType,
    .ProNav ul dl dd{
        padding-top: 5px ;
        padding-bottom: 5px ;
    }
    .ProNav ul dl dd{
        display: inline-block;
    }
    .ProductList{
        .grid2;
    }
    .Form {
        --input:40px;
        --input_size:14px;
    }
 
}

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