@import "./common.less";

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

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

	@media (max-width: 768px) {}
}
.catBtn{
    --btn:36px;
    background: #4075A0;
    border-radius: 4px;
    .flex-center;
    display: inline-flex;
    gap: var(--p10);
    span{
        line-height: 1em;
    }
    img{
        
    margin-bottom: 5px;
    }
    &.white{
        background: #fff;
        color: #4075A0;
    }
}
cta {
	border: none;
	background: none;
	cursor: pointer;
}

.cta span {
	padding-bottom: 7px;
	letter-spacing: 4px;
	font-size: var(--ft18);
	padding-right: 15px;
	text-transform: uppercase;
}

.cta svg {
	transform: translateX(-8px);
	transition: all 0.3s ease;
}

.cta:hover svg {
	transform: translateX(0);
}

.cta:active svg {
	transform: scale(0.9);
}

.hover-underline-animation {
	position: relative;
	color: black;
	padding-bottom: 20px;

	span {
		position: relative;
		z-index: 1;
	}
}


.hover-underline-animation:after {
	content: "";
	position: absolute;
	width: 100%;
	transform: scaleX(0);
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #000000;
	transform-origin: bottom right;
	transition: transform 0.25s ease-out;
}

.hover-underline-animation:before {
	content: "";
	width: 80%;
	height: 20px;
	width: 94%;
	height: 14px;
	position: absolute;
	left: 1em;
	left: 0.4em;
	top: 0.4em;
	z-index: 0;
	background-color: #e2eef8;
	transform-origin: bottom right;
	transition: transform 0.25s ease-out;
	display: block;
}

.cta:hover .hover-underline-animation:after {
	transform: scaleX(1);
	transform-origin: bottom left;
}

.pagenum {
	text-align: center;

	.next-ten,
	.next-page,
	.prev-page,
	.prev-ten {

		font-family: layui-icon !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		position: relative;
		transition: all 0.3s;
		padding: 0 5px;
	}

	a.next-ten,
	a.next-page {
		&:hover {

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

	a.prev-ten,
	a.prev-page {
		&:hover {

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

	.prev-ten {
		&::before {

			content: "\e65a";
		}
	}

	.next-ten {
		&::before {

			content: "\e65b";
		}
	}

	.prev-page {
		&::before {

			content: "\e603";
		}
	}

	.next-page {
		&::before {

			content: "\e602";
		}
	}

	span {
		opacity: 0.5;
	}

	.position-info {
		opacity: 1;
	}

	.pagination {
		.flex-center;
		gap: 20px;
	}
}

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

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

	.layui-main {
		background: #fff;
		padding: var(--p40) var(--p30);
	}

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

	.time {
		text-align: center;
		color: #666;
	}

	.con {
		margin: var(--p20) 0;
		min-height: 20vh;
	}

	.foot {
		.d-grid;

		a {
			.line-clamp1;

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

		gap: var(--p10);
	}
}

@keyframes pulseLoader {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(100%);
	}
}

main {
	flex: 1;
}

.ContactImg {
	aspect-ratio: 1920/600;
}

.NewImg {
	aspect-ratio: 1920/438;
}

.CaseImg {
	position: absolute;
	z-index: 1;
	min-height: 300px;
}

.videoDialog {
	width: 80%;
	overflow: hidden;
	aspect-ratio: 4/2;
}

.Case {
	position: relative;

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

	h1 {
		color: #fff;
	}

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

		.layui-btn {
			--btn: 50px;
			border-radius: 0;
			padding: 0 var(--p40);

			&:hover {
				padding: 0 var(--p30);

			}
		}
	}
}

h1 {
	text-align: center;
	color: var(--bgc);
	font-size: var(--ft48);
}

.Contact {
	.layui-main {
		position: relative;
		bottom: vaR(--p70);
		z-index: 5;
	}

	.Block1 {
		padding: var(--p60) var(--p30) var(--p80);
		background: #fff;
		margin-bottom: var(--p30);



		ul {
			margin-top: var(--p50);
			.d-grid;
			.grid3;
			gap: var(--p80) var(--p50);
		}

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

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

		.sub {
			margin-top: 5px;
			font-size: var(--ft20);
		}

		.key {
			background: var(--bgc);
			color: #fff;
			display: inline-block;
			padding: 2px 10px;
			margin-bottom: var(--p15);
		}

		.top {
			h5 {
				color: var(--bgc);
			}
		}
	}

	.Block2 {

		.d-grid;
		grid-template-columns: 0.6fr 1fr;
		gap: var(--p60);
		padding: var(--p80) var(--p30) var(--p50);
		background: #fff;
		color: #333;

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

		ul {
			font-size: var(--ft18);
			margin-top: var(--p40);
			.d-grid;
			gap: var(--p30);
		}

		h5 {
			color: var(--bgc);
		}
	}

	.grid-row {
		gap: var(--p20);
	}

	.label {
		color: #706F73;
		transform: skewX(-10deg);
	}

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

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


	--input_border_color: #C2C2C2;

}

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

	/* for all social containers*/
	.item {
		width: 30px;
		aspect-ratio: 1/1;
		background-color: var(--bgc);
		display: flex;
		align-items: center;
		padding: 5px;
		justify-content: center;
		overflow: hidden;
		transition-duration: 0.3s;
		border-radius: 30px;

		&:hover {
			background-color: var(--ftc);
			transition-duration: 0.3s;
		}
	}


	.item:hover img {
		animation: slide-in-top 0.3s both;
	}



}

.AboutText {
	margin-bottom: var(--p20);

	h1 {
		margin: var(--p70) 0 var(--p50);
	}

	ul {
		background: #fff;
		padding: var(--p60) var(--p30);
		.d-grid;
		gap: var(--p50);

		h5 {
			color: var(--bgc);
			font-weight: normal;
			margin-bottom: var(--p20);
			font-size: var(--ft36);
		}

		.con {
			font-size: var(--ft24);
			line-height: 1.3em;

		}

		li {
			.d-grid;
			grid-template-columns: 1fr 0.7fr;
			gap: var(--p60);
		}
	}
}

.AboutLine {
	overflow: hidden;

	h1 {

		margin: var(--p70) 0 var(--p50);
	}

	.Card {
		padding: var(--p120) 0;
		background: #fff;
	}

	ul {
		display: flex;
		list-style: none;
		padding: 0;
		margin: 0;
		width: fit-content;
		width: 100%;
		position: relative;
    width: fit-content;

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

		}

		.flex-center;

	}

	.item {
		min-width: 240px;
		position: relative;
		top: 10px;

		h1 {
			margin: 0;
			text-align: left;
		}
	}

	li {
		.d-grid;
		flex-shrink: 0;
		grid-template-rows: 1fr 1fr;

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

				top: -10px;
			}
		}
	}

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

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

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

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

	.hr {
		width: 1px;
		height: 68px;
		background: #D0D3D8;
	}
}

.jtbtn {
	span {
		cursor: pointer;
		display: inline-block;
		position: relative;
		transition: 0.5s;
	}

	span:after {
		content: '»';
		position: absolute;
		opacity: 0;
		top: 0;
		right: -15px;
		transition: 0.5s;
	}

	&:hover {
		opacity: 1;

		span {
			padding-right: 15px;
		}

		span:after {
			opacity: 1;
			right: 0;
		}
	}
}

footer {
	.foot1 {
		color: #333333;
		background: #EEEEEE;
		padding: var(--p40) 0;

		.layui-main {
			.d-flex;
			.jc-s;
			.al-fs;
			gap: vaR(--p40);
		}
	}
	.nav2{
	    dd:nth-child(n + 6) {
	       // display: none;
	    }
	}

	.foot2 {
		text-align: center;
		padding: var(--p15) 0;
		font-size: var(--ft14);
		color: #fff;
		background: vaR(--ftc);
	}

	.info {
		margin-top: vaR(--p25);
		.d-grid;

		gap: var(--p20);

		.img_box {
			width: 15px;
		}

		img {
			flex-shrink: 0;
		}

		li {
			.d-flex;
			.al-c;
			gap: 5px;
		}
	}

	.link {

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



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

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

		a:hover {
			opacity: 0.8;
		}
	}

	.title {
		color: var(--ftc);
		font-size: var(--ft18);
	}
}

header {
	.head1 {
		background: var(--bgc);
		color: #fff;
		padding: 5px 0;

		.layui-main {
			.d-flex;
			.jc-fe;
			.al-c;
			gap: var(--p10);
		}

		.info {
			line-height: auto;
			font-size: var(--ft14);
			.d-flex;
			gap: var(--p15);

			li {
				gap: var(--p10);
				.d-flex;
				.al-c;
				*{
				    line-height: normal;
				}
			}
		}

		.link .item {
			width: 25px;

			&:hover {
				background: initial;
			}
		}

	}

	.hedad2 {
		background: #fff;
		padding: var(--p15) 0;

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

				color: var(--ftc);
			}
		}
		.layui-menu-body-panel{
		   
    padding: 7px 2px;
    margin-left: 0;
		}
.layui-menu-body-title,
		.layui-nav .layui-nav-item a {
			font-size: vaR(--ft18);
			color: var(--ftc);
			position: relative;

		}

		.layui-nav .layui-nav-item>a {
			&::before {
				display: block;
				content: '';
				bottom: 0;
				width: 0;
				left: 50%;
				transform: translateX(-50%);
				background: var(--ftc);
				height: 2px;
				transition: all 0.3s;
				position: absolute;
			}

			&:hover::before {
				width: 70%;

			}
		}

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


	.logo {
		flex: 1;
	}

}

.container-input {
	position: relative;
	width: fit-content;

	.input {
		width: 150px;
		padding: 5px 0px 5px 20px;
		border-radius: 9999px;
		border: solid 1px #333;
		transition: all .2s ease-in-out;
		outline: none;
		opacity: 0.8;
		background: #F8F8F8;
	}

	svg {
		position: absolute;
		top: 50%;
		right: 10px;
		transform: translate(0, -50%);
	}

	.input:focus {
		background: #fff;
		opacity: 1;
		width: 200px;
	}
}

.New {
	padding: var(--p30) 0 var(--p80);

	.layui-main {
		background: #fff;
		padding: var(--p40) var(--p30);
	}

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

.NewList {
	.d-grid;
	.grid2;
	gap: var(--p40);
	color: #666;

	.img {
		aspect-ratio: 740/400;
	}

	.item {
		.d-flex;
		.flex-column;
		position: relative;
		right: 0;

		&:hover {
			.content {

				padding-right: var(--p50);

			}

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

	.content {
		position: relative;
		padding-right: 0;
		transition: all 0.3s;
		margin-top: vaR(--p20);
	}

	.sub {
		margin: var(--p10) 0;
		.line-clamp1;
	}

	.time {
		.d-flex;
		.jc-s;
		font-size: var(--ft14);
	}

	h5 {
		line-height: 1em;
		color: #000;
		font-size: var(--ft24);
		.line-clamp1;
	}

	.jt {
		.flex-center;
		top: 50%;
		width: var(--p50);
		transform: translateY(-50%);
		position: absolute;
		right: 0;
	}

	.arrow {

		font-size: vaR(--ft24);
		opacity: 0;
	}

	.arrow path {
		fill: rgb(19, 19, 19);
	}

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

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

}

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

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

.Nav {
	padding: var(--p30);
	font-size: var(--ft18);
}

.AboutMain {
	.Block1 {
		font-size: var(--ft20);
		background: #fff;
		padding: var(--p50) var(--p30);
	}

	.Block2 {
		padding: var(--p40) var(--p30);
		margin: var(--p30) 0;
		background: var(--bgc);
		color: #fff;
		font-size: var(--ft24);
		.d-flex;
		.al-c;
		gap: var(--p80);

		.sub {
			transform: skewX(-5deg);
		}

		.img {
			flex-shrink: 0;
		}
	}

	.Video {
		video {
			max-height: 100vh;
			width: 100%;
		}
	}
}

#more.hidden {
	opacity: 0;
	pointer-events: none;
	height: 0;
	padding: 0;
}

.CaseList {
	.d-grid;
	.grid2;
	gap: var(--p25);
	margin-top: vaR(--p60);

	.item {
		display: block;
		background: #FFFFFF;
		box-shadow: -4px 3px 10px 0px rgba(0, 0, 0, 0.1);
		border-radius: 4px;
		padding: var(--p30);
		.d-grid;
		gap: var(--p10);
		grid-template-columns: 1fr 0.8fr;

		&.hide {
			opacity: 0;
			height: 0;
			overflow: hidden;
			margin: 0;
			padding: 0;
			border: none;
		}
	}


	font-size: var(--ft18);
	line-height: 1.2em;

	h5 {
		color: var(--bgc);

	}

	.sub {}

	.img {
		position: relative;
	}


}

.container {
	width: 80px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	height: 80px;
	border-radius: 50%;

	.play-btn {
		position: absolute;
		appearance: none;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 4px solid #fff;
		cursor: pointer;
		outline: none;
	}

	.play-btn::before {
		content: "";
		position: absolute;
		width: 93%;
		height: 93%;
		background-color: initial;
		border-radius: 50%;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}


	.play-icon {
		position: absolute;
		width: 30px;
		height: 30px;
		left: 60%;
		top: 50%;
		background-color: #fff;
		transform: translate(-60%, -50%) rotate(90deg);
		clip-path: polygon(50% 15%, 0% 100%, 100% 100%);
		transition: all 400ms ease-in-out;
		cursor: pointer;
	}
}

.video-container {
	position: relative;
	/* 相对定位，为播放按钮的绝对定位做参考 */
	width: 100%;
	background: #000;
	aspect-ratio: 1920/600;

	video {
		aspect-ratio: 1920/600;
		width: 100%;
		height: 100%;
	}

	#playButton {
		.bg_img;
		position: absolute;
		/* 绝对定位，可覆盖在视频区域上方 */
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		.flex-center;
		cursor: pointer;

		/* 鼠标悬停显示手型，提示可点击 */
		&:hover {
			.play {

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

	#playButton img {
		width: 80px;
		/* 设置按钮图标宽度，可调整 */
		height: 80px;
		/* 设置按钮图标高度，可调整 */
	}
}

.PinPai {
	padding: var(--p50) 0;
	--main: 1300px;

	.layui-main {
		.d-grid;
		.al-c;
		gap: vaR(--p60);
		grid-template-columns: 0.4fr 1fr;

	}

	.img {
		padding-right: var(--p60);
		border-right: 1px solid #9D9D9D;
	}

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

	.sub {
		font-size: var(--ft18);
		color: #6A6A6A;
	}
}

.suppImg {
	aspect-ratio: 1920/680;
	padding: var(--p140) 0;
	.flex-center;
	.bg_fixed;

	h1 {
		text-align: left;
	}

	.sub {
		width: 1000px;
		max-width: 100%;
		margin-top: var(--p40);
		font-size: var(--ft18);
	}

	.letter {
		display: inline-block;
		opacity: 0;
		transform: translateY(20px);
	}

	.content-auto {
		content-visibility: auto;
	}

	.text-shadow {
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
}

.Support {
	.layui-main {
		padding: var(--p50) var(--p30);
		position: relative;
		bottom: var(--p100);
		background: #fff;
	}

	.pic {
		.d-grid;
		.grid2;
		gap: var(--p40);
		margin-bottom: var(--p60);
	}

	h2 {
		font-size: vaR(--ft36);
		font-weight: normal;
		color: var(--bgc);
	}

	.sub {
		margin-top: vaR(--p10);
		line-height: 1.3em;
		font-size: vaR(--ft24);
		margin-bottom: var(--p30);
	}

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

	.text {
		.d-grid;
		.grid3;
		gap: var(--p15);
		margin-bottom: var(--p40);

		.item {
			position: relative;
			bottom: 0;
			transition: all 0.3s;

			&:hover {
				bottom: 10px;
			}

			img {
				position: absolute;
			}

			.img1 {
				left: 5%;
				top: 5%;
			}

			.img2 {
				right: 5%;
				bottom: 5%;
			}

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

			color: var(--bgc);
			font-size: var(--ft30);
			background: #FFFFFF;
			box-shadow: -5px 3px 10px 0px rgba(102, 102, 102, 0.15);
			border-radius: 20px;
			line-height: 1.2em;
			padding: var(--p40) var(--p60);
		}
	}
}

.Resour {
	.layui-main {
		.d-grid;
		grid-template-columns: 1fr 0.4fr;
		gap: var(--p20);
	}

	.Card {
		.d-flex;
		.flex-column;
		background: #FFFFFF;
		box-shadow: -4px 5px 10px 0px rgba(0, 0, 0, 0.08);
		border-radius: 4px 4px 0px 0px;
	}

	.title {
		font-size: vaR(--ft24);
		padding: 5px var(--p30);
		background: var(--bgc);
		color: #fff;
	}

	.Text {
		.d-grid;
		.al-c;
		grid-template-columns: 1fr 0.8fr;

		.img {
			height: 100%;
		}

		.con {
			line-height: 1.3em;
			font-size: var(--ft20);
			color: #666;
			padding: var(--p50) vaR(--p30);
		}

	}

	.foot {
		margin-top: var(--p25);
		.flex-center;
	}

	.Ul {
		flex: 1;
		.d-flex;
		.flex-column;
		.jc-s;
		padding: var(--p50) vaR(--p30);
	}

}

.DownNav {
	position: sticky;
	top: 0;
	z-index: 10;
	background: #fff;
	/* 确保有明确背景色 */
	isolation: isolate;
	/* 创建独立渲染上下文 */
	.d-grid;
	gap: var(--p15);

	.img {
		position: relative;
		display: inline-block;
		/* 为图片容器添加背景色作为混合基础 */
		background-color: #fff;

		&::after {
			transition: all 0.3s;
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #919191;
			/* 改用更稳定的混合模式组合 */
			mix-blend-mode: overlay;
			opacity: 0.7;
			/* 增加透明度控制 */
			pointer-events: none;
		}
	}

	.item {
		font-size: var(--ft20);
		.d-grid;
		grid-template-columns: 24px 1fr;
		gap: var(--p15);
		transition: all 0.3s;

		div:nth-child(2) {
			display: inline-block;
		}

		&.active,
		&:hover {
			font-weight: bold;
			font-size: var(--ft22);
			color: var(--bgc);

			.img::after {
				background-color: var(--bgc);
				/* 调整混合模式参数 */
				mix-blend-mode: overlay;
				opacity: 0.9;
			}
		}
	}
}

.DownLoad {
	.title {
		padding: var(--p70) 0 var(--p50);
		text-align: center;

		.sub {
			width: 1300px;
			max-width: 100%;
			margin: var(--p30) auto 0;
		}
	}

	.DownNav {
		position: st;
	}

	.Card {
		.d-grid;
		gap: vaR(--p70);
		grid-template-columns: 0.3fr 1fr;
		background: #fff;
		padding: var(--p50) var(--p30);

		.title1 {
			text-align: left;
			color: #3A6085;
			font-size: var(--ft24);
			margin-top: vaR(--p60);
		}
	}

	form {
		width: 100%;
		margin-bottom: var(--p40);
	}

	.container-input .input {
		width: 100%;
	}
}

.DownNavPro {
	margin-top: var(--p30);
	.d-grid;
	gap: var(--p15);

	.item {
		font-size: var(--ft20);

		&.active {
			color: var(--bgc);
		}
	}
}

.DownloadList {
	.item {
		.d-grid;
		.al-c;
		border-bottom: 1px solid #CDCDCD;
		;
		grid-template-columns: 19px 1fr 40px;
		gap: var(--p15);
		padding: var(--p15) 0;

		h5 {
			.line-clamp1;
		}
		&:hover {
		color: var(--ftc);

		.Btn {
			transition-duration: 0.3s;
		}

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

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

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

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

	.tooltip {
		position: absolute;
		top: -50px;
		font-size: var(--ft14);
		opacity: 0;
		background-color: var(--ftc);
		color: white;
		padding: 10px 10px;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		transition-duration: 0.2s;
		pointer-events: none;
		letter-spacing: 0.5px;
		width: max-content;
	}

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

	.svgIcon {
		fill: #000;
	}

	.icon2 {
		width: 18px;
		height: 5px;
		border-bottom: 2px solid #000;
		border-left: 2px solid #000;
		border-right: 2px solid #000;
	}



	

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

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

.ProductInfo {
	background: #fff;
	.d-grid;
	.grid2;

	.img {
		height: 100%;
	}

	.con {
		gap: var(--p20);
		.d-flex;
		.flex-column;
		padding: var(--p60) var(--p60);
	}

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

	.sub {
		font-size: var(--ft20);
		flex: 1;
		color: #666;
	}

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

.Mianze {
	background: var(--ftc);
	padding: var(--p20);
	margin-top: var(--p40);

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

	text-align: center;
	color: #fff;
}

.ProductDownlod {
	padding: var(--p40) var(--p25);
	background: #fff;

	.item {
		grid-template-columns: 1fr 0.2fr 18px;
	}

	.key {
		color: #999;
	}
}

.ColorUl {
	.d-grid;
	.grid9;
	gap: var(--p20) vaR(--p15);

	.item {

		cursor: pointer;
	}

	.img {
		position: relative;
		aspect-ratio: 155/100;
		border-radius: 4px;
		border: 1px solid #E3E3E3;

		.img_100 {
			height: 100%;
		}

		img {
			transition: all 0.3s;
		}

		&::before {
			position: absolute;
			top: -14px;
			right: -5px;
			display: block;
			content: '';
			width: 28px;
			height: 28px;
			background: url(../images/dui.png);
			background-size: contain;
			background-repeat: no-repeat;
			opacity: 0;
			z-index: 1;
		}
	}

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

	.item:hover,
	.item.active {
		.img {
			border-color: var(--bgc);

			img {
				scale: 1.2;
			}

			&::before {
				opacity: 1;
				animation: 1s 0.2s bounceIn both;
			}
		}
	}
}

.ColorNav {
	.flex-center;
	color: #666666;
	gap: var(--p20);
	flex-wrap: wrap;
	margin-bottom: var(---p30);

	.active {
		color: var(--bgc);
		font-weight: bold;
	}

	.item {
		cursor: pointer;
	}
}

.ProductCradBox {
	padding: var(--p50) var(--p20);
	background: #fff;
	max-height: 600px;
	overflow: hidden;
	overflow-y: auto;
}

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

	.s_content {
		background: #fff;

		table {
			width: 100%;

			th,
			td {

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

	.Block {
		>h1 {
			padding: var(--p60) 0 var(--p40);
		}

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

.Index {
	h1 {
		padding: var(--p80) 0 var(--p40);
	}
}

.IndexNew {
	padding: var(--p60) 0;
	background: #fff;

	.img {
		aspect-ratio: 877/336;
	}
	.New_more{
	    width: max-content;
	    position: absolute;
	    right: 0;
	    bottom: -16px;
	    a{
	        padding: 10px 20px;
	        background-color: var(--ftc);
	        color: #fff;
	        border-radius: 5px;
	    }
	    a:hover{
	        border: 1px var(--ftc) solid ;
	        background-color: #fff;
	        color: var(--ftc);
	    }
	}
	
	

	.layui-main {
		.d-grid;
		grid-template-columns: 1fr 0.7fr;
		gap: var(--p50);
		position: relative;
	}

	.NewList {
		.grid1;
	}

	.block1 {
		.NewList {
			gap: var(--p20);
		}

		.content {
			margin-top: 0;
		}

		.item {
			padding-bottom: var(--p20);
			border-bottom: 1px solid #CCCCCC;
		}
	}
}

.IndexAbout {
	.d-grid;
	.al-c;
	background: var(--ftc);
	grid-template-columns: 1fr 0.8fr;

	.img {
		height: 100%;
	}

	.con {
		color: #fff;
		line-height: 1.3em;
		font-size: var(--ft20);
		padding: var(--p50) vaR(--p30);
	}

	.foot {
		.d-flex;
		.jc-fe;
		margin-top: vaR(--p40);
	}

	.hover-underline-animation:after {
		background: #fff;
	}

	.hover-underline-animation {
		color: #fff;
	}

	.hover-underline-animation:before {
		background: var(--bgc);
	}
}

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

	.item {
		box-shadow: -4px 3px 10px 0px rgba(0, 0, 0, 0.1);
		border-radius: 4px;
		.d-grid;
		.grid2;
		background: #fff;

		&:nth-child(even) {
			direction: rtl;
		}
	}

	.con {
		direction: ltr;
		padding: var(--p80) var(--p30);
	}

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

	.sub {
		line-height: 1.3em;
		color: #666666;
		font-size: var(--ft20);
	}
	
	 .con{
        position: relative;
        overflow: hidden;
        *{
            position: relative;
            z-index: 2;
        }
        &:before {
			content: '';
			position: absolute;
			z-index: -1;
			top: -16px;
			right: -16px;
			background: #fff;
			height: 32px;
			z-index: 0;
			width: 32px;
			border-radius: 32px;
			transform: scale(1);
			transform-origin: 50% 50%;
			transition: transform 0.8s ease-out;
		}
    }
    .go-corner {
	    color: #fff;
		position: absolute;
		right: 10px;
		top: 5px;
	}
	.item:hover {
		* {

			color: #fff;
		}

		.con:before {
		    background: var(--ftc);
			transform: scale(50);
		}
	}
}

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

	.item {
	    .d-flex;
	    .flex-column;
		border-radius: 4px;
		background: #fff;

	}

	.item:hover {
		* {

			color: #fff;
		}

		.con:before {
		    background: var(--ftc);
			transform: scale(50);
		}
	}

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

	.img {
		aspect-ratio: 520/380;
	}

	.go-corner {
	    color: #fff;
		position: absolute;
		right: 10px;
		top: 5px;
	}

	.con {
	    flex: 1;
		overflow: hidden;
		position: relative;
		padding: var(--p20);

		&:before {
			content: '';
			position: absolute;
			z-index: -1;
			top: -16px;
			right: -16px;
			background: #fff;
			height: 32px;
			width: 32px;
			border-radius: 32px;
			transform: scale(1);
			transform-origin: 50% 50%;
			transition: transform 0.8s ease-out;
		}
	}

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

	.sub {
		line-height: 1.3em;
		color: #666666;
		font-size: var(--ft20);
	}
}
.IndexTop{
    background: #fff;
    padding: var(--p20) 0;
    font-size: var(--ft18);
    .layui-main{
        .flex-center;
        gap: var(--p20);
    }
}
.index_swiper{
        color: #fff;
   .swiper-slide{
       .bg_img;
       padding: 50px 0;
    height: 600px;
    .flex-center;
    position: relative;
    &::before{
        display: block;
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        
    background: linear-gradient(90deg, black, transparent 50%);
    }
   }
    h5{
        position: relative;
        z-index: 2;
        font-size: vaR(--ft48);
        color: #fff;
    }
    .sub{
             position: relative;
        z-index: 2;
        width: 500px;
        max-width: 100%;
    }
}
.IndexProductInfo{
    h5{
        font-size: var(--ft30);
    }
    .sub1{
        line-height: 1.2em;
        font-size: var(--ft24);
    }
    .sub{
        line-height: 1.3em;
    }
   
}
.Main3d{
    padding: vaR(--p20) 0;
    .layui-main{
  background: #fff;
    }
    .Nav3d{
        .d-flex;
        flex-wrap: wrap;
        gap: var(--p20);
        padding: 0 var(--p20);
        border-bottom: 1px solid #EEEEEE;
    }
    .item3d{
        font-size: var(--ft24);
        .d-flex;
        .al-c;
        gap: 5px;
        padding: var(--p10) 0;
        i{
            width: 20px;
            height: 20px;
            background: vaR(--bgc);
            color: #fff;
            font-size: var(--ft20);
            border-radius: 50%;
            .flex-center;
            color: #fff;
            font-weight: normal;
        }
        &.active{
            font-weight: bold;
            color: var(--bgc);
            font-weight: bold;
        }
    }
    .layui-tabs-body{
        padding: 0;;
    }
    .Body3d{
        height: 1086px;
        .d-grid;
        grid-template-columns: 1fr 0.4fr;
        .right{
            height: 100%;
            background: #F7F7F7;
            padding: var(--p25) var(--p20);
            overflow: hidden;
            overflow-y: auto;
        }
        .btn{
            padding: vaR(--p20);
            background: #fff;
            border-radius: 10px;
        }
        h5{
            color: var(--bgc);
            margin:var(--p25) var(--p10);
        }
    }
    .ColorUl{
        .grid2;
    }
    
}
@media only screen and (max-width: 1400px) {}

@media only screen and (max-width: 990px) {
    .container{
        width: 40px;
        height: 40px;
    }
    .ColorUl{
        .grid3;
    }
    .container .play-icon{
        
    width: 10px;
    height: 10px;
    }
    .IndexPorduct{
        .grid2;
    }
    .Support .text .item img{
        width: 15px;
    }
   .Main3d .Body3d,
    .Contact .Block2,
    .Contact .Block1 ul,
    .Support .text,
    .DownLoad .Card,
    .CaseList,
    .Resour .Text,
    .Resour .layui-main,
    .AboutText ul li,
    .ProductInfo,
    .IndexPorductTop .item,
    .IndexAbout,
    .IndexNew .layui-main{
    .grid1 !important;
    }
   .index_swiper .swiper-slide{
        height: 300px;
    }

header .head1 .info li{
    gap: 2px;
}
.AboutMain .Block2{
    flex-wrap: wrap;
}
.navMobile  {
    background: var(--ftc);
}
.footerLogo img,
.logo img{
    max-height: 30px;
    
}
.menu_button .line{
    
    stroke: #000;
}
    header{
    .head1 .info{
        gap: 2px;
    }
        .link{
            gap: 0;
        }
    }
    footer .foot1 .layui-main{
        flex-wrap: wrap;
    }
    .AboutLine .Card{
        
    overflow: hidden;
    overflow-x: auto;
    }
    .link .item{
        width: 20px;
    }
    .AboutLine .item{
        width: auto;
        width: 100px;
    }
}

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