@import "./common.less";

@font-face {
	font-family: 'alimama';
	src: url('../font/AlimamaFangYuanTiVF-Thin-2.ttf');
}

body {
	font-family: 'alimama';
	font-size: var(--ft18);
	color: #000;
	.d-flex;

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

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

.IndexSolutions {
	ul {
		margin-top: var(--p40);
		.d-flex;

		li {

			flex: 1;
		}

		.item {
			height: 100%;
			.bg_img;
			color: #fff;

			.content {
				height: 100%;
				padding: vaR(--p80) var(--p30);
				min-height: 560px;
				.d-flex;
				.flex-column;
				.jc-fe;
				background: rgba(0, 0, 0, 0.5);
				transition: all 0.3s;
			}

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

			p {
				min-height: 4.5em;
				font-size: vaR(--ft16);
			}

			.foot {
				display: block;
				overflow: hidden;
			}

			.layui-btn {
				transition: all 0.3s ease;
				/* 可选：初始状态（比如不透明、无位移） */
				opacity: 1;
				transform: translateY(100%);


			}

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


				}

				.layui-btn {
					opacity: 1;

					margin-top: var(--p20);
					transform: translateY(0%);
				}
			}
		}
	}
}

.ContacFrom {
	.bg_img;
	color: #fff;
	text-align: center;

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

	form {
		.d-flex;
		.al-c;
		width: 700px;
		max-width: 100%;
		margin: var(--p60) auto 0;

		.layui-input {
			background: #fff;
		}

		.layui-btn {
			flex-shrink: 0;
			width: auto;
			border-radius: 0;

			&:hover {
				width: auto;
			}
		}
	}
}

.index_swiper {

	/* 幻灯片容器，设置溢出隐藏 */
	.swiper-slide {
		position: relative;
		overflow: hidden;
		position: relative;
		width: 100%;
		height: auto;
		background: rgba(0, 0, 0, 0.3);
		//   transform: translateY(50px); /* 初始向下位移 */
		transition: all 0.5s ease 0.2s;
		/* 延迟 0.2s 执行动画，让图片先动 */
	}

	// /* 图片默认样式，覆盖幻灯片容器 */
	.img {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 0;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		img {

			scale: 1.3;
			transition: all 2s;
		}
	}

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

	.swiper-pagination-bullet-active {
		width: 20px;
		border-radius: 16px;
	}

	.slide-text {
		aspect-ratio: 1920/ 650;
		padding: var(--p60) 0;
		.d-flex;
		.al-c;

		>.layui-main {
			opacity: 0;
			overflow: hidden;
			transform: translateY(100%);
			transition: all 1s;
		}
	}

	.swiper-slide-active {
		.slide-text {
			>.layui-main {
				opacity: 1;

				transform: translateY(0%);

			}
		}

		.img {
			img {

				scale: 1;
			}
		}
	}

	.sub {
		margin-top: var(--p20);
		font-size: var(--ft24);
	}

	.layui-btn {
		transition: all 0.3s;
		width: 136px;
		margin-top: var(--p20);

		&:hover {
			width: 200px;
		}
	}

	// .slide-text{
	//     position: relative;
	//     z-index: 5;
	//     aspect-ratio: 1920/650;
	// }
	// .swiper-slide img {

	//   transition: all 0.5s ease; /* 图片缩放过渡 */
	// }
	// /* 活动幻灯片：图片缩小 */
	// .swiper-slide-active img {
	//   transform: scale(0.95); 
	// }

	// /* 活动幻灯片：文字显示（恢复透明 + 位移） */
	// .swiper-slide-active .slide-text {
	//   opacity: 1;
	//   transform: translateY(0);
	// }
}

.h1 {

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

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

	.swiper-slide {
		height: auto;
		.d-grid;
	}

	.item {
		height: 560px;
		background: #FFF3F4;
		border-radius: 10px;
		text-align: center;
		.flex-column-center;
		padding: var(--p80) var(--p30) var(--p40);
		transition: all 0.5s;

		&:hover {
			box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.08);
		}

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

	.item+.item {}

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

	.img {
		margin-top: vaR(--p30);
	}

	.layui-btn {
		margin-top: vaR(--p20);
	}

	.swiper-slide:nth-child(2n +2) .item:nth-child(2),
	.swiper-slide:nth-child(2n +1) .item:nth-child(1) {
		background: linear-gradient(0deg, transparent, #FFA3AA);
		color: #fff;
	}

	.foot {
		margin-top: vaR(--p30);
		.flex-center;
		gap: var(--p30);

		>* {
			cursor: pointer;
		}
	}
}

.indexNum {
	.bg_fixed;
	padding: var(--p170) 0 var(--p100);
	color: #fff;

	.sub {
		margin-top: vaR(--p60);
		text-align: center;
	}

	ul {
		.d-flex;
		.al-c;
		.jc-se;
		text-align: center;
		flex-wrap: wrap;

		margin-top: vaR(--p60);
	}

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

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

}

main {
	flex: 1;
}

.Sounltion1Page {

	.layui-main {
		.d-grid;
		gap: vaR(--p90);
	}

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

.SounltionApp {

	.left-menu {
		padding: var(--p80) 0;
		background-color: #f8dada;

	}

	.Box {
		margin-top: vaR(--p60);
		.d-grid;
		grid-template-columns: 500px 1fr;
	}

	.left-menu li {
		padding: var(--p20) var(--p50);
		cursor: pointer;
		transition: all 0.3s;
	}

	.left-menu li.active,
	.left-menu li:hover {

		color: red;
		background: #fafafa;
		transform: translateX(5px);
	}

	.right-content {
		background-color: #fafafa;
		padding: 20px;
		overflow: hidden;
		/* 隐藏内容滑动时的溢出部分 */
	}

	.content-item {
		display: none;
		/* 初始隐藏所有内容项 */
		position: relative;
		right: -100px;
		/* 初始位置在右侧 */
		opacity: 0;
		/* 初始透明度为0 */
	}

	/* 从右侧滑入并渐显的动画 */
	.content-item.active {
		display: block;
		animation: slideInRight 0.5s ease-out forwards;
	}

	@keyframes slideInRight {
		from {
			right: -100px;
			opacity: 0;
		}

		to {
			right: 0;
			opacity: 1;
		}
	}
}

.layui-btn {
	transition: all 0.5s;
	width: 136px;

	&:hover {
		width: 180px;
	}
}

.soultAdvantages {
	ul {
		margin-top: var(--p70);
		.d-grid;
		.grid3;
		gap: var(--p30);

		li {
			transition: all 0.3s;
			padding: var(--p70) var(--p40);
			background: #FFFFFF;
			border-radius: 10px;
			border: 1px solid #DDDDDD;
			.d-flex;
			.flex-column;
			gap: var(--p20);

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

			.sub {
				flex: 1;
				min-height: 9em;
			}

			.foot {
				overflow: hidden;

				.layui-btn {
					margin-bottom: 20px;
					position: relative;
					top: 100%;
					transition: all 0.5s;
					width: 136px;

					&:hover {
						width: 180px;
					}
				}

				.flex-center;
			}

			&:hover {
				box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.26);

				.foot {
					.layui-btn {
						top: 0;
					}
				}
			}
		}
	}

	.layui-btn {
		background: #E50112;
		box-shadow: 0px 8px 15px 0px rgba(229, 1, 18, 0.26);
		border-radius: 24px;
		min-width: 136px;
	}
}

.soultCase {
	ul {
		margin-top: vaR(--p40);
		.d-grid;
		.grid2;
		gap: vaR(--p30);

		.img {
			aspect-ratio: 785/450;
			border-radius: 16px;
		}

		font-size: vaR(--ft24);

		h5 {
			margin: var(--p20) 0 var(--p10);
		}

		.sub {
			color: #666;
		}
	}
}

.soultProduct {
	background: #EEEEEE;
	border-radius: 10px;
	border: 1px solid #DDDDDD;
	padding: var(--p70);

	ul {
		margin-top: vaR(--p40);
		.d-grid;
		.grid4;
		gap: vaR(--p70);

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

			.img {
				margin-bottom: vaR(--p20);
				flex: 1;
			}
		}

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

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

	.item {
		.img {
			aspect-ratio: 785/450;
			border-radius: 16px;
		}

		transition: all 0.3s;

		&:hover {
			h5 {

				color: #E50112;
			}
		}
	}

	.content {
		h5 {
			transition: all 0.3s;
			font-size: vaR(--ft30);
		}

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

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

.ProductMain {
	.Card {
		gap: var(--p40);

		.nav {
			position: sticky;
			top: 0;

			.title {
				background: #E50112;
				font-size: vaR(--ft30);
				padding: 0 var(--p20);
				color: #fff;

			}

			nav {
				background: #F8F8F8;
				padding: var(--p20) var(--p10) var(--p40);
				.d-grid;

				a {
					display: block;
					padding: var(--p10) 0;
					border-bottom: 1px dashed #ccc;
					transition: all 0.3s;

					&:hover,
					&.active {
						color: #E50112;
					}
				}
			}
		}
	}
}

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

	.item {
		transition: all 0.5s;
		display: block;
		border-radius: 10px;
		border: 1px solid #c3c3c3;
		height: 100%;
		padding: 40px 35px 20px;
	}

	.item:hover {
		.img {

			background: #fff;
		}

		box-shadow: 0 1px 20px 0 rgba(9, 46, 111, 0.2);

		img {
			transform: scale(1.1);
		}
	}


	.content {}

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

	.sub {
		.line-clamp2;
		color: #282828;
		font-size: var(--ft16);
		margin-top: var(--p10);
	}

	.img {
		transition: all 0.3s;
		border-radius: 10px;
		aspect-ratio: 4/3;
	}
}

.ProductDetails {
	padding-top: var(--p50);

	.breadcrumb {
		display: block;

		margin-bottom: var(--p50);

	}

	.layui-breadcrumb a:hover {
		color: #E50112 !important;
	}

	.block {
		background: #F8F8F8;
		border-radius: 10px;
		padding: var(--p40) var(--p60);
	}

	.Info {
		gap: var(--p20);
	}

	.Block1 {
		.d-flex;
		gap: var(--p50);

		.img {

			flex-shrink: 0;

		}
	}

	.s_content {
		table {
			margin: 0 auto;
			max-width: 100%;
			border: 1px solid #c6c6c6;
			font-size: var(--ft14);

			tr {
				td {
					border-right: 1px solid #c6c6c6;
					border-bottom: 1px solid #c6c6c6;
					text-align: center;
					padding: 10px;
					background: #Fff;
					line-height: 1.2em;
				}

				td:nth-child(1),
				td:nth-child(3) {
					background: #f0f0f0;
				}
			}
		}
	}

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

	}


	.mySwiper2 {
		padding: vaR(--p10);
		border-radius: 10px;
		border: 1px solid #c3c3c3;
		aspect-ratio: 4/2.5;
	}

	.swiperBox {
		--swiper-navigation-size: var(--ft20);
		--swiper-navigation-color: #E50112;
		--swiper-pagination-color: #E50112;
		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.8;
	}

	.swiper-slide-thumb-active {

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

	}

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

		h1 {
			font-size: var(--ft70)
		}

		.sub {
			margin-top: var(--p40);
			font-size: var(--ft17);
		}
	}
}

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

	li {
		.d-flex;

		gap: vaR(--p20);

		.img {
			width: 40%;
			flex-shrink: 0;
		}

		.content {
			height: 100%;
			.flex-column-center;
			flex: 1;
			gap: var(--p20);
			padding: var(--p30);
			background: linear-gradient(173deg, #FFF2F2, transparent);

			.content1 p {
				color: #0058BB;
			}
		}

		.foot {
			width: 100%;
		}

		h5 {
			font-size: var(--ft36);
			margin-bottom: var(--p10);
		}

		&:nth-child(odd) {
			.img+.content {
				text-align: right;

			}

			.foot {
				.d-flex;
				.jc-fe;

			}

		}

		&.Row {
			.content {

				display: block;
			}

			h5 {

				text-align: center;
			}
		}

		&:nth-child(even) {
			flex-direction: row-reverse;

		}

		.layui-btn {
			width: 136px;
			transition: all 0.5s;

			&:hover {
				width: 200px;
			}
		}
	}
}

footer {
	background: #E50112;
	color: #fff;

	.copy {
		border-top: 1px solid #fff;
		padding: vaR(--p10) 0;
		text-align: right;
	}

	.qrcode {
		.d-flex;
		.al-c;
		flex-wrap: wrap;
		gap: vaR(--p30);
	}

	.footer1 {
		padding: var(--p40) 0;
		.d-flex;
		.al-c;
		gap: var(--p60);

		.footerUl {
			flex: 1;

			ul {

				.d-flex;
				.al-c;
				gap: var(--p30);
				flex-wrap: wrap;
			}
		}
	}
}

.detailsMain {
	.Nav {
		.layui-main {
			padding: var(--p20) 0;
			border-bottom: 1px solid #E9E9E9;
		}

		.layui-breadcrumb span[lay-separator] {
			color: #000 !important;
			margin: 0 3px;
		}

		.layui-breadcrumb a {
			color: #000 !important;
			font-weight: bold;
		}

		cite {
			font-weight: normal;
		}
	}

	h3 {
		font-size: var(--ft30);
		text-align: center;
		width: 1000px;
		max-width: 100%;
		margin: 0 auto;
	}

	.time {
		margin: var(--p40) 0;
		text-align: center;
		color: #666666;
		font-size: var(--ft16);
	}

	.s_content {
		font-size: var(--ft16);
	}
}

.Title {
	text-align: center;
	border-bottom: 1px solid #E9E9E9;
	padding-bottom: var(--p40);

	h1 {
		font-weight: normal;
		font-size: vaR(--ft36);
	}
}

.DownloadPage {
	form {
		.flex-center;
		gap: var(--p20);
		margin-top: vaR(--p30);
	}

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

	th {
		background: #F5F5F5;
	}

	td {
		padding-top: var(--p20);
		padding-bottom: var(--p20);
	}

	tr:hover td {
		background: #fcfcfc;
	}

	a {
		.d-flex;
		.jc-fe;
	}

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

		th {
			min-width: 100px;
			white-space: nowrap;
		}
	}
}

.ContactPage {

	.img {
		border-radius: 16px;
	}

	.Card {
		margin-top: vaR(--p60);
		gap: var(--p50);
		--btn_size: var(--ft24);

		.submit {
			background: #E50112;
			box-shadow: 0px 8px 15px 0px rgba(229, 1, 18, 0.26);
			border-radius: 24px;
			border-radius: 24px;
			min-width: 160px;
		}

		.reset {
			background: #000000;
			border-radius: 24px;
			min-width: 180px;
		}
	}

	.label {
		margin-bottom: var(--p10);
		font-size: vaR(--ft16);
	}


}

.layui-form-checkbox[lay-skin=primary]>div {

	white-space: normal;
}

header {
	background: #fff;
	box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.08);

	.layui-nav .layui-nav-more {
		right: -11px;
	}

	.right {
		.d-flex;
		gap: vaR(--p30);
	}

	.layui-main {
		padding: var(--p40) 0 var(--p20);
		.d-flex;
		.al-c;
		.jc-s;
		gap: var(--p100);
	}

	.layui-nav {
		.d-flex;
		gap: var(--p15);
	}

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

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

	.layui-nav .layui-nav-item a {

		color: #000000;
		font-size: var(--ft18);
		transition: all 0.3s;


	}

	.layui-nav .layui-nav-item a:hover {

		color: #E50112;
	}

	.layui-nav .layui-this>a {
		font-weight: bold;
		color: #E50112;
	}

	.nav {
		flex: 1;
	}

	.layui-nav .layui-nav-item>a {
		display: inline-block;
		text-align: center;
		text-decoration: none;

		line-height: 60px;
		height: 60px;
		overflow: hidden;
		transition: all 0.5s ease;

		&:hover .main-text {
			transform: translateY(-60px);
		}

		&:hover .sub-text {
			transform: translateY(-60px);
			opacity: 1;
		}
	}

	/* 主文字样式 */
	.main-text {
		display: block;
		transform: translateY(0);
		transition: transform 0.3s ease;
		font-size: var(--ft18);
		width: max-content;
	}

	/* 辅助文字样式，默认隐藏（上移超出容器） */
	.sub-text {
		width: max-content;
		font-size: var(--ft18);
		display: block;
		transform: translateY(60px);
		opacity: 0;
		transition: transform 0.3s ease, opacity 0.3s ease;
	}


}

.top_box {
	width: 100%;
	position: relative;
	color: #fff;
	display: flex;
	align-items: center;
	aspect-ratio: 1920/300;
	min-height: 200px;
	.bg_img;

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

	.block {
		padding: 50px 0;
		position: relative;
		z-index: 1;
		text-align: center;
	}

	h1 {
		text-transform: uppercase;
		font-size: var(--ft48);
	}

	p {
		margin-top: 20px;
		font-size: var(--ft18);
	}
}

.CasePage {
	h1 {
		margin-top: vaR(--p40);
		text-align: center;
		font-size: var(--ft36);
	}

	ul {
		li {
			border-bottom: 1px dashed;

			padding: vaR(--p40) 0;
		}

		h5 {
			color: #0058BB;
			font-size: vaR(--ft20);
			font-weight: normal;
		}

	}
}

.NewNav {
	.flex-center;
	flex-wrap: wrap;
	font-size: var(--ft36);
	color: #666;
	gap: var(--p20) var(--p100);

	.item {
		position: relative;
		display: block;

		&::after {
			transition: all 0.3s;
			display: block;
			content: '';
			opacity: 0;
			bottom: -10px;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			width: 0;
			height: 4px;
			background: #E50112;
			border-radius: 2px;
		}

		&.active,
		&:hover {
			color: #E50112;
		}

		&:hover::after,
		&.active::after {
			opacity: 1;
			width: var(--p120);
		}
	}
}

.NewsList {
	.d-grid;
	.grid3;
	margin-top: vaR(--p70);
	gap: var(--p60) var(--p30);

	.img {
		aspect-ratio: 510/350;
		border-radius: 16px;

	}

	h5 {
		font-weight: normal;
		font-size: vaR(--ft18);
		.line-clamp3;
		margin-top: vaR(--p20);
	}

	.time {
		margin-top: vaR(--p10);
		color: #666666;
		font-size: var(--ft16);
	}
}

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

@media only screen and (max-width: 990px) {
	.index_swiper .layui-btn {
		--btn: 40px;
		--btn_size: 14px;
	}

	footer .footer1 {
		.flex-column;
	}

	.footerLogo img {
		height: 30px;
		.al-fs;

	}

	.AboutList li .img {
		width: 100%;
	}

	.AboutList li {
		flex-direction: column !important;
	}

	.ProductDetails {
		.Block1 {
			flex-direction: column !important;
		}
	}

	.ProductList {
		.grid2;
	}

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

	.NewsList {
		.grid2;
	}

	.logo img {
		height: 30px;

	}

	.indexProduct .swiper-slide {
		display: block;
	}

	.indexProduct .item {
		height: auto;
	}

	.indexProduct .img img {
		max-width: 80%;
	}

	.IndexSolutions ul {
		.d-grid;
		.grid2;
	}

	.soultProduct ul {
		.grid2;
	}

	.IndexSolutions ul li .content {
		min-height: auto;
	}

	.SounltionApp .Box,
	.soultAdvantages ul {
		.grid1;
	}

	--input:40px !important;

	.AboutList li .layui-btn,
	.layui-btn {
		--btn: 40px !important;
		--btn_size: 14px !important;
	}
}

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