@import "./common.less";

body {
	font-size: var(--ft18);
	color: #000;

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

.section {
	width: 100vw;
	min-height: 100vh;
}

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

.section.img_100 {
	height: 100vh;
}

#canvas {
	position: absolute;
	right: 0;
	width: 100px;
	height: 100%;
	top: 0;
}

footer {
	.bg_img;
	background-image: url(../images/footer.png);
	color: #fff;
	padding: var(--p70) var(--p30);
	background: #2B2F31;
	font-size: var(--ft14);

	.footer2 {
		margin-top: var(--p10);
		text-align: right;
	}

	.footer1 {
		gap: var(--p60);
		.d-flex;
	}

	.qrocde {
		.img_box {
			width: 140px;
			max-width: 100%;
		}

		img {
			display: block;
			width: auto;
			height: auto;
			max-width: 140px;
			max-height: 140px;
			object-fit: contain;
		}

		p {

			margin-top: var(--p10);
		}
	}

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

	.nav {
		flex: 1;
		.d-flex;
		.al-fs;
		gap: var(--p40);
	}

	nav {
		margin-left: auto;
		.d-flex;
		flex-wrap: flex-wrap;
		gap: var(--p25);

		.item {
			min-width: 100px;
			display: block;
			white-space: nowrap;
		}

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

.index_swiper {

	overflow: auto;
		scroll-snap-type: y mandatory;
	height: 100vh;
	width: 100vw;

	.section {
		width: 100%;
		min-height: 100vh;
		position: relative;
		scroll-snap-stop: always;
		scroll-snap-align: start;
		overflow: hidden;

		&.footer {
			height: auto;
			min-height: auto;
		}
	}
	footer{
		scroll-snap-stop: always;
		scroll-snap-align: start;
	    
	}

}

.top_box {
	color: #Fff;
	width: 100%;
	height: 100vh;
	.d-flex;
	.al-c;
	.jc-c;
	.bg_fixed;

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

	p {
		margin-top: var(--p20);
		font-size: var(--ft40);
	}
}

header {
	padding: var(--p20) 0;
	transition: all 0.3s;

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

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

	[lay-on="nav"] {
		color: #fff;
	}

	.layui-nav {
		.d-flex;
		.jc-s;
		width: 800px;
		max-width: 100%;
	}

	.layui-nav .layui-nav-item {
		line-height: 40px;
	}

	.layui-nav .layui-nav-item>a {
		white-space: nowrap;
		color: #fff;
		font-size: var(--ft18);
	}

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

	.logo img {
		transition: all 0.5s;
		height: 90px;
	}

	.logo .img2 {
		display: none;
	}

	&.bgcolor {
		background: rgba(0, 0, 0, 0.5);
		box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
		padding: var(--p10) 0;

		.logo img {
			height: 50px;
		}

	}

	&.black:not(.bgcolor) {
		.logo .img1 {
			display: none;
		}

		.layui-nav .layui-nav-item>a {
			color: #000;
		}

		.logo .img2 {
			display: block;
		}
	}

}

.contact-map-image {
	width: 100%;
	aspect-ratio: 1920 / 480;
	overflow: hidden;

	img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	@media (max-width: 768px) {
		aspect-ratio: 16 / 9;
	}
}

.pageContact {
	.layui-btn {
		background: #164D96;
	}

	.contactList {
		.d-grid;
		.grid4;
		gap: var(--p20);
		margin-top: var(--p40);

		li {
			background: #E9EDF0;
			text-align: center;
			padding: var(--p40);

			p {
				margin-top: var(--p30);
			}

			span {
				display: inline-block;
				margin-top: var(--p40);
			}
		}
	}

	form {
		margin-top: var(--p90);

		h1 {
			margin-bottom: var(--p40);
			font-weight: normal;
			text-align: center;
			font-size: var(--ft18);
		}

		.form {
			.d-grid;
			.grid2;
			gap: var(--p20) var(--p80);

			.content {
				grid-row: span 2 / 6;
				grid-column: 2;
			}

			margin: var(--p40) 0;
		}
	}

}

.comTitle {
	text-align: center;

	h1 {

		margin-bottom: var(--p30);
	}

	p {
		line-height: 1.7em;
		text-align: center;
	}
}

.swiper-button-prev,
.swiper-button-next {
	--swiper-navigation-size: var(--ft16);
	background: #FFf;
	border-radius: 50%;
	.flex-center;
	width: 50px;
	color: #999;
	height: 50px;
	border: 1px solid #fff;
}

.swiper-button-prev.swiper-button-white,
.swiper-button-next.swiper-button-white {

	background: initial;
	color: #fff;
}

.AboutWenhua {

	padding-top: 140px;

	.comTitle {
		color: #fff;
	}

	ul {
		margin-top: var(--p100);
		.d-grid;
		.grid2;

		li {
			.d-grid;
			.grid2;
			background: #fff;
		}

		.content {
			padding: var(--p40) var(--p30);
			border: 1px solid #eee;
		}

		.t1 {
			text-align: center;
			font-size: var(--ft26);
			;
		}

		.img {
			position: relative;

			i {
				top: 50%;
				right: 0;
				transform: translateY(-50%);
				background: url(../images/sanjiao.png) no-repeat;
				width: var(--p25);
				height: var(--p30);
				background-size: 100% 100%;
				position: absolute;
			}
		}

		hr {
			border-color: #D6D6D6;
		}

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

		li:nth-child(4n+3),
		li:nth-child(4n+4) {

			direction: rtl;

			i {
				right: unset;
				left: -1px;
				transform: translateY(-50%) rotate(180deg);
			}
		}
	}
}

.AboutInfo {
	padding: 140px 0;

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

	.content {
		padding-right: var(--p30);
	}


	h2 {
		margin-top: var(--p20);
		font-size: 22px;
		font-weight: normal;
	}

	.s_content {
		margin-top: var(--p30);
		line-height: 1.8em;
	}

	dl {
		margin-top: var(--p40);
		.d-flex;
		.al-c;
		.jc-s;
		gap: var(--p10);
		text-align: center;

		.t1 {
			margin-top: var(--p20);
			margin-bottom: var(--p10);
		}

		.num {
			font-weight: bold;
			font-size: var(--ft24);
		}
	}
}

.AboutMain {
	background: #fff;
}

.AboutRongyu {

	padding-top: 140px;


	.comTitle {
		color: #fff;
	}

	flex: 1;
	height: 90%;

	.swiper {
		margin-top: 30vh;
	}

}

.IndexSwiper{
    .layui-btn {
        
		width: 190px;
    }
}
.btnBox {
	position: relative;
	.flex-center;
	gap: var(--p20);
	margin-top: var(--p60);

	.swiper-button-prev,
	.swiper-button-next {
		position: unset;
		margin: 0;
	}

	.layui-btn {
		width: 190px;
		color: #474747;
		background: #fff;
		overflow: visible;

		&::before {
			border-radius: 50px;
			background: initial;
			border-color: #Fff;
		}

	}
}

.abouSwipwer {
	flex: 1;
	height: 80vh;
	margin-top: var(--p30);

	.img {
		z-index: 1;
		transition: all 0.5s;
	}

	.swiper-slide {
		.flex-center;

	}

	.swiper-slide-active {

		z-index: 999;

		.img {
			scale: 1.3;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
		}
	}

}

.newsNav {
	.layui-main {
		.d-flex;
		.al-c;
		gap: var(--p20);
		.jc-s;

	}

	border-bottom: 1px solid rgba(127, 126, 126, 1);

	padding-top: var(--p50);

	nav {
		font-size: var(--ft22);
		line-height: 2em;
		.d-flex;
		gap: var(--p60);
		color: #636363;

		.item {

			border-bottom: 4px solid #fff;
		}

		.active {
			border-color: var(--color);
		}
	}

	.searchForm {
		width: 500px;
		max-width: 100%;

	}
}

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

	.layui-input {
		flex: 1;
		background: #F7F9FA;
		border: none;
	}

	button {
		cursor: pointer;
		padding: 0 var(--p30);
		background: var(--color);
		border-radius: 3px;
	}
}

.productNav {
	padding-top: var(--p70);
	border-bottom: none;
}

.newsList {
	.d-grid;
	gap: var(--p60);

	.item {
		background: #F7F9FA;
		.d-grid;
		grid-template-columns: 400px 1fr;

		.content {
			.d-flex;
			.flex-column;
			padding: var(--p50) var(--p40) var(--p20);

			&:before {
				background: var(--color);
			}

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

			.sub {
				margin: var(--p40) 0;
				;
				color: #737373;
				flex: 1;

				p {
					.line-clamp4;
					line-height: 1.7em;
				}
			}

			.foot {
			    flex-wrap: wrap;
				.d-flex;
				.al-c;
				.jc-s;
			}

			i {
				font-size: var(--ft16);
				color: #737373;
			}
		}
	}
}

.moreBtn {
	.d-flex;
	.al-c;
	padding: 0;
	--btn: auto;
	padding: 3px 8px 3px 5px;
	font-size: var(--ft16);
	gap: 4px;
	overflow: hidden;
	line-height: 20px;

	img {
		background: #fff;
		aspect-ratio: 1/1;
		border-radius: 50%;
	}

	span {
		flex: 1;
	}

	&:hover {
		color: var(--color);

	}

	&:before {
		background: #fff;
	}

	&.white {
		background: #E9EDF0;

	}
}

.newsDetails {
	.d-grid;
	grid-template-columns: 1fr 360px;
	gap: var(--p60);

	.Content {
		h1 {
			font-size: var(--ft26);

		}

		hr {
			width: 700px;
			max-width: 100%;
			margin: var(--p25) 0 var(--p40);
			border: 2px solid rgba(0, 0, 0, 0.22);
		}


	}

	.List {
		padding: var(--p50) var(--p10);
		background: #F0F0F3;

		.day {
			font-size: var(--ft30);
			color: #888888;
		}

		.time {
			color: #888888;
			margin-bottom: var(--p50);
		}

		.hr1 {
			border: 3px solid #094D95;
			width: 40px;
		}

		.hr2 {
			margin-right: var(--p20);
			border-color: rgba(0, 0, 0, 0.22);
		}

		h2 {
			font-size: var(--ft22);
			font-weight: normal;
		}

		ul {
			.item {
				display: block;
				padding: var(--p30) 0;
				border-bottom: 1px solid rgba(0, 0, 0, 0.22);

				h5 {
					font-weight: normal;
					.line-clamp2;
					margin-bottom: var(--p10);
				}

				.time2 {
					font-size: var(--ft16);
					text-align: right;
				}

			}
		}
	}
}

.btn {
	margin-top: var(--p60);
	gap: var(--p60);
	.d-flex;

	.layui-btn {
	    margin-left: 0;
		width: 190px;
		max-width: 100%;
	}
}

.productBox {
	.d-grid;
	grid-template-columns: 329px 1fr;
	gap: var(--p30);

	nav {
		.d-grid;
		gap: var(--p20);

		.item {
			background: #F7F9FA;
			position: relative;
			padding: var(--p20) vaR(--p10);

			.img1 {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				opacity: 0;
				transition: all 0.5s;
			z-index: 0;
			}

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

				h3 {
					font-weight: normal;
					font-size: var(--ft18);
					flex: 1;
					.line-clamp3;
				}

				position: relative;
				z-index: 2;
			}

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

				.img1 {
					opacity: 1;
				}
			}

		}
	}
}

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

	.item {
		background: #F7F9FA;
		padding: var(--p20);
		aspect-ratio: 1/1;
		.d-flex;
		.flex-column;
		transition: all 0.5s;

		.img {
			flex: 1;
		}

		h5 {
			color: var(--color);
			font-size: var(--ft18);
			text-align: center;
			font-weight: normal;
			.line-clamp1;
			margin-top: var(--p10);
		}

		&:hover {
			box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
			scale: 1.01;
		}
	}
}

.productDetails {
	padding-top: 140px;

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

	.Content {
		background: #F7F9FA;
		padding: var(--p50) 0;
		font-size: var(--ft18);
		color: #555;
		line-height: 1.9em;

		.s_content {
			background: #fff;
			padding: var(--p40);
			box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);

			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
				color: #000;
				font-weight: 600;
				line-height: 1.4em;
				margin: var(--p40) 0 var(--p20);
			}

			h1:first-child,
			h2:first-child,
			h3:first-child,
			h4:first-child,
			h5:first-child,
			h6:first-child {
				margin-top: 0;
			}

			h2 {
				font-size: var(--ft24);
				padding-left: var(--p15);
				border-left: 4px solid var(--color);
			}

			p {
				margin: 0 0 var(--p30);
			}

			p:last-child {
				margin-bottom: 0;
			}

			ul,
			ol {
				margin: 0 0 var(--p30);
				padding-left: var(--p30);
			}

			img {
				max-width: 100%;
				height: auto;
				margin: var(--p20) 0 var(--p30);
			}
		}
	}

	.Banner {
		h1 {
			margin-top: var(--p100);
			color: #fff;
			background: var(--color);
			font-size: var(--ft30);
			text-align: center;
			padding: var(--p20);
			margin-bottom: var(--p30);
		}
	}

	.BannerBox {
		.d-grid;
		grid-template-columns: 480px 1fr;
		gap: var(--p20);

		.bigSwiper {
			height: 440px;
			max-width: 100%;

			.swiper {
				height: 100%;
			}
		}

		.Title {
			padding-top: var(--p30);
			.d-flex;
			.al-c;
			.jc-s;
			gap: var(--p10);
			padding-left: var(--p20);
			margin-bottom: var(--p25);

			h2 {
				font-size: var(--ft22);
				color: #000;
			}

			span {
				color: #666;
			}
		}

		.sub {
			background: #F7F9FA;
			padding: var(--p20);
			color: #666;
			font-size: var(--ft18);
			line-height: 1.7em;
			margin-bottom: var(--p50);
		}

		.smallSwiper {
			position: relative;
			padding: 0 var(--p70);

			.swiper {
				height: 160px;
			}
		}

		.bigSwiper {
			padding-bottom: var(--p50);
			position: relative;

		}

		.img_100 img {
			object-fit: contain;
			background: #F7F9FA;
		}
	}
}

.swiper-pagination-bullet {
	transition: all 0.5s;
}

.swiper-pagination-bullet-active {
	background: var(--color);
	width: 40px;
	border-radius: 3px;
}

.soultBox {
	.d-grid;
	grid-template-columns: 405px 1fr;
	gap: var(--p100);

	.Nav {
		h1 {
			font-size: var(--ft24);
			margin-bottom: var(--p30);
		}

		form {
			margin-bottom: var(--p30);
		}

		.layui-menu-body-title {
			.d-flex;
			.al-c;
			color: #333;
			font-size: var(--ft18);

			img {
				margin-right: 5px;
			}
		}

		.item {
			padding: var(--p10) 0;
			margin-bottom: var(--p10);
			border-bottom: 1px solid #7F7E7E;
		}

		.item2 {
			padding: var(--p10) 0;
			font-size: var(--ft18);
		}

		.layui-menu .layui-menu-item-down>ul {
			margin-left: -15px;
			margin-right: -15px;
		}
	}
}

.soultList {
	.d-grid;
	.grid2;
	gap: var(--p30);

	.item {
		background: #FFFFFF;
		box-shadow: 1px 2px 6px 0px rgba(0, 0, 0, 0.18);
		.d-flex;
		.flex-column;
		color: var(--color);

		.img {
		    height: 200px;
		}

		.content {
			.d-flex;
			flex: 1;
			.flex-column;
			padding: var(--p20);

			&:before {
				background: var(--color);
			}

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

			.sub {
				margin: var(--p20) 0;

				flex: 1;

				p {
					.line-clamp3;
					line-height: 1.7em;
				}
			}

			.foot {
			    flex-wrap: wrap;
				margin-top: var(--p30);
				.d-flex;
				.al-c;
				.jc-s;
			}

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


}

.soultDetails {
	.d-grid;
	grid-template-columns: 55% 40%;
	gap: 5%;

	.Content {

		h1 {
			font-size: VAR(--ft30);
			padding-bottom: var(--p15);
			margin-bottom: var(--p40);
			border-bottom: 3PX solid rgba(0, 0, 0, 0.22);
		}

		.s_content {
			line-height: 1.7em;
		}

		.item+.item {
			margin-top: var(--p80);

		}
	}

	.Banner {
		position: relative;
		padding-bottom: var(--p30);

		.swiper-slide {
			aspect-ratio: 570/400;
		}
	}

	.InfoBox {
		margin-top: var(--p40);
		background: #F0F0F3;

		h1 {

			border-bottom: 3PX solid rgba(0, 0, 0, 0.22);
			padding: var(--p20);
			font-size: VAR(--ft30);
		}

		.s_content {
			padding: var(--p20);
			line-height: 1.8em;
		}

	}
}

.IndexPage {}

.indexContact {
	.bg_img;

	h1 {
		text-align: center;
		color: #Fff;
		margin-bottom: var(--p50);
	}

	.form {
		.d-grid;
		.grid2;
		gap: var(--p20);

		&>div {
			gap: var(--p15);
			.d-grid;

		}

		.layui-btn {
			--btn: var(--input);
			background: #fff;
			width: 100%;
			color: var(--color);
			border-radius: 0;
		}
	}
}

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

	.layui-main {
		.d-flex;
		.jc-sa;
		.flex-column;
	}

	h1 {
		text-align: center;
		margin-bottom: var(--p60);
	}
}

.IndexSwiper {
	.moreBtn {
		color: #474747;
	}
}

.IndexSoult {
	h1 {
		text-align: center;
		color: #Fff;
		margin-bottom: var(--p50);
	}

	.d-flex;
	.al-c;

	.layui-main {
		.d-flex;
		.jc-sa;
		.flex-column;
	}

	.item {
		.d-grid;
		.grid2;
		background: var(--color);
		color: #fff;
		min-height: 60vh;

		.content {
			padding: var(--p40) var(--p30);
			.d-flex;
			.flex-column;
			gap: var(--p20);

			.sub {
				line-height: 1.8em;
				flex: 1;
			}
		}

		.layui-btn {
			color: #474747;
			background: #fff;
		}

		h2 {
			font-size: var(--ft30);

		}
	}
}

.IndexNews {
	.d-flex;
	.jc-sa;
	.flex-column;
	background: var(--color);

	h1 {
		text-align: center;
		color: #Fff;
		margin-bottom: var(--p50);
	}

	.swiper {
		width: 100%;
	}

	.item {
		background: #Fff;
		width: 450px;
		max-width: 100%;
		.d-flex;
		.flex-column;

		.content {
			padding: var(--p10);
			gap: var(--p20);
			.d-flex;
			.flex-column;
		}

		.t1 {
			.line-clamp2;
			font-size: var(--ft18);
			margin-bottom: var();
			line-height: 1.6em;
		}

		.img {
			aspect-ratio: 450/280;
		}

		.sub {
			flex: 1;
			font-size: var(--ft16);

			&>div {
				.line-clamp2;
				line-height: 1.8em;
			}
		}

		.time {
			margin-top: var(--p20);
			color: #999;
			font-size: var(--ft14);
		}
	}
}

.IndexAboutRongyu {
	h1 {
		color: #fff;
		padding-top: var(--p30);
	}

	.AboutRongyu .swiper {
		margin-top: 0;
	}

	.AboutRongyu {
		padding-top: 0;
		height: auto;
		.d-flex;
		.al-c;
	}


	.d-flex;
	flex: 1;

	.layui-main {
		gap: var(--p30);
		.d-flex;
		.jc-sa;
		.flex-column;
	}
}

.indexJishu {
	position: relative;

	.Bg {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 0;
		overflow: hidden;
		background: #082f52;

		.layui-tab-item {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		.layui-tab-item img {
			opacity: 0;
			transform: scale(1.06);
		}

		.layui-tab-item.layui-show img {
			animation: technologyBackgroundReveal 1.15s cubic-bezier(0.22, 1, 0.36, 1) both;
		}

	}

	.TitleList,
	.Content {
		position: relative;
		z-index: 1;
	}

	.d-flex;
	.flex-column;

	.Content {
		flex: 1;
	}

	.Content {
		color: #fff;
		padding-top: 140px;
		padding-bottom: var(--p30);

		h1 {
			margin-bottom: var(--p50);
			;
		}

		.t1 {
			font-size: var(--ft22);
			margin-bottom: var(--p30);
		}

		.layui-tab-item {
			width: 700px;
			max-width: 100%;
		}

		.foot {
			margin-top: var(--p40);

			.layui-btn {
				min-width: 190px;
			}

			.d-flex;
			.jc-fs;
		}


	}

	.TitleList {
		.d-grid;
		.grid6;

		.item {

			background: rgba(0, 0, 0, 0.36);
			padding: var(--p30);
			text-align: center;
			color: #fff;
			font-size: var(--ft20);
			cursor: pointer;
			grid-column: span 2;
			border: 0.5px solid rgba(255, 255, 255, 0.3);
		}

		.item.layui-this {
			background: #fff;
			color: #333;
		}

		.item:nth-child(4) {
			grid-column: span 4;

		}
	}
}

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

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

@media (prefers-reduced-motion: reduce) {
	.indexJishu .Bg .layui-tab-item.layui-show img {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

.indexProduct{
    h1{
       text-align: center;
       color: #fff;
       padding-top: var(--p20);
       margin-bottom: var(--p50);;
    }
    .head{
        .d-flex;
        .al-c;
        .jc-c;
        
        gap: var(--p20);
        flex-wrap: wrap;
        .item{
            cursor: pointer;
            border: 1px solid #fff;
            color: #fff;
            background:rgba(255, 255, 255, 0.1) ;border-radius: 28px;
            padding: var(--p10) var(--p20);
        }
        .item.layui-this{
            
            background:rgba(255, 255, 255, 0.3) ;
        }
    }
    .layui-tab-item {
        margin-top: var(--p80);
        .swiper-slide{
        height: 46vh;
            .flex-column-center;
        }
        .item{
            color: #fff;
            .t1{
                text-align: center;
                margin-top: var(--p30);
            }
            .img{
                height: auto;
                aspect-ratio:328/218 ;
            }
        }
    }
 
}

.moreBtn.white.hvr-ripple-out::before{
        border-color: #E9EDF0;
        background: initial;
    
}
.indexAbout{
    .d-grid;
    .grid2;
    .Left{
        padding: 140px var(--p40) 140px 20%;
        color: #fff;
        background: rgba(9, 77, 149, 0.5);
        h1{
            margin-bottom: var(--p50);
        }
        .sub{
            line-height: 1.8em;
            height: 60vh;
            font-size: var(--ft24);
            margin-bottom: var(-p10);
        }
        
    }
    .Right{
		.d-flex;
		.al-c;
		.jc-c;
		padding: 140px 10%;
		margin: 0;
		background: linear-gradient(90deg, rgba(3, 35, 65, 0.58), rgba(3, 35, 65, 0.72));
        color: #fff;
		text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
        ul{
            .d-grid;
            .grid2;
			width: 100%;
            gap:var(--p100) var(--p60);
            li{
				.d-flex;
				.flex-column;
				.al-c;
				.jc-c;
                text-align: center;
				border-left: 1px solid rgba(255, 255, 255, 0.65);
                .counter-auto{
					font-size: var(--ft50);
					line-height: 1.2em;
                    font-weight: bold;;
                }
				.t2 {
					font-size: var(--ft20);
				}
				.t1 {
					font-size: var(--ft22);
					line-height: 1.5em;
					margin-top: var(--p15);
				}
            }
        }
    }
}
.indexBanner{
    .swiper{
        
    position: relative;
    }
    .item{
        .d-flex;
        .al-c;
        font-size: var(--ft18);
        line-height: 1.8em;
        color: #fff;
        padding-bottom: 5vh;
        height: 100vh;
        min-height: 60vh;
    h1{
        line-height: 1.8em;
        font-size: var(--ft40);
        margin-bottom: var(--p30);
        
		transform:translateX(-200px);
			opacity:0;
		transition:all 2s;
    }
      .sub{
               
		transform:translateX(-400px);
			opacity:0;
		transition:all 2s;
      }
    }
      .swiper-pagination-bullet{
          border-radius: 5px;
            width: 40px;
            background: #fff;
        }
        
        
 .ani-slide  .sub,
	.ani-slide h1{
		transform:translateX(0);
		opacity:1;
		}
}

.menu_button {
	display: block;
	cursor: pointer;
	width: 30px;
	height: 30px;

	&:focus {
		outline: none;
	}

	* {
		transition: all 0.3s;
	}

	.line {
		fill: none;
		stroke: #fff;
		stroke-width: 6;
		stroke-linecap: round;
		transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
			stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
	}



	.line1 {
		stroke-dasharray: 60 207;
		stroke-width: 6;
	}

	.line2 {
		stroke-dasharray: 45 60;
		stroke-width: 6;
	}

	.line3 {
		stroke-dasharray: 30 207;
		stroke-width: 6;
	}

	&.opened {
		.line1 {
			stroke-dasharray: 90 207;
			stroke-dashoffset: -134;
			stroke-width: 6;
		}

		.line2 {
			stroke-dasharray: 1 60;
			stroke-dashoffset: -30;
			stroke-width: 6;
		}

		.line3 {
			stroke-dasharray: 90 207;
			stroke-dashoffset: -134;
			stroke-width: 6;
		}

	}
}
	.navMobile {
	    background: rgba(0,0,0,0.5);
		color: #fff;
		text-align: center;

		li {
			padding: var(--p10);
			border-top: 1px solid rgba(255, 255, 255, 0.5);

			>a {
				display: block;
			}
		}

		.child {
			>a {

				&::after {
					display: inline-block;
					font-family: layui-icon !important;
					font-style: normal;
					content: "\e61a";
				}
			}

			dl {
				margin-top: var(--p10);
				.d-grid;
				gap: 8px;
			}
		}


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

@media only screen and (max-width: 990px) {
    .index_swiper .section{
    min-height: auto;
}

.soultDetails{
    .grid1;
}
}

@media only screen and (max-width: 768px) {
	.productDetails .Content .s_content {
		padding: var(--p20);
	}

      .IndexSwiper{
        overflow-y: auto;
        height: auto;
    }
	.indexJishu .TitleList {
		.d-flex;
		.flex-column;
	}
	.indexBanner .item{
	    height: 60vh;
	}

	.productDetails .BannerBox .bigSwiper {
		padding-bottom: 30px;
	}

	.productNav {
		padding-top: 60px;
	}

	section {
		padding: 20px 0;
	}

	.newsNav .layui-main {
		flex-direction: column;
		.al-fs;
	}

	.top_box {
		height: 30vh;
	}

	.section {
		min-height: auto;
	}

	.AboutWenhua ul .img {
		aspect-ratio: 300/100;
	}
.indexAbout,
	.IndexSoult .item,
	.indexContact .form,
	.soultBox,
	.productDetails .BannerBox,
	.BannerBox,
	.productBox,
	.newsDetails,
	.newsList .item,
	.AboutInfo ul,
	.AboutWenhua ul li,
	.AboutWenhua ul {
		.grid1;
	}
    .indexAbout .Right,
    .indexAbout .Left,
	.indexJishu .Content,
	.productDetails,
	.AboutInfo,
	.AboutWenhua,
	.AboutRongyu {
		padding-top: 80px;
	}
	.indexAbout .Left {
	    
    padding-left: var(--p40);
    padding-bottom: var(--p40);
	}
.indexAbout .Left .sub{
    height: auto;
}
	.productList,
	.pageContact ul {
		.grid2;
	}

	.swiper-button-prev,
	.swiper-button-next {
		width: 40px;
		height: 40px;
	}

	header .logo img {
		height: 40px !important;
	}

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

	}

	.newsList .item .content i {
		display: NONE;
	}

	.moreBtn {

		transform: scale(0.8);
		transform-origin: left;
	}

	footer .footer1 {
		display: none;
	}

	.btnBox .layui-btn {

		transform-origin: center;
	}

	.IndexNews .swiper {
		width: 100vw;
	}
	.searchForm button img{
	    max-width: 15px;
	    
	}
	.soultList .item .img{
	    height: 80px;
	}
	.newsList{
	    .grid2;
	}

	// 	.IndexNews .item{
	// 	    width: 200px;
	// 	}
}


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

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