@import "./common.less";

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

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

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

.layui-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border-radius: 0;
	color: #535762;
	padding: 0 vaR(--p40);
	font-size: var(--ft22);
	background: initial;
	border: 1px solid #535762;
        &.white{
            border-color: #fff;
            color: #fff;
        }
	&:hover {
		color: #000;
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
		background: #fff;

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

.SwiperItem{
        .img_100 {
            img{
                object-fit:unset !important;
            }
        }
    }
header {
	--color: #fff;
	color: var(--color);
    --main:1700px;
    background: rgba(47,47,47,0.57);

	.layui-main {
	padding: 0 var(--p50);
	max-width: 100%;
	}
	.logo {
		flex: 1;
		.d-flex;
		.jc-fs;
		align-items: baseline;
		gap: var(--p25);
		span {
			width: 1px;
			height: 42px;
			background: #FFFFFF;
			opacity: 0.2;
		}
	}
    
	.layui-nav .layui-this:after,
	.layui-nav-bar {
		display: none;
	}

	.layui-nav-more {
		display: none;
	}

	.navMobile {
		color: var(--color);

	}

	.menu_button .line {

		stroke: var(--color);
	}

	.nav-child {
		--main: 1300px;
		height: 0;
		transition: all 0.3s;
		overflow: hidden;
		position: absolute;
		left: 0;
		right: 0;

		.img {
			height: 100%;
		}

		* {
			line-height: 1.2em;
		}

		.Block {
			box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
			color: #222222;
			padding: var(--p40) 0;
			background: #fff;
			height: 100%;

			.layui-main {
				.d-grid;
				grid-template-columns: 0.8fr 1fr;
				.al-fs;
				gap: var(--p80);
			}

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

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

			ul {
				.d-flex;

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

			.title {
				padding: 0;
				text-align: left;
				color: #999999;
				font-size: var(--ft15);
				margin-bottom: var(--p15);
				line-height: 1em;
				text-transform: uppercase;
			}

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

				a {
					text-transform: uppercase;
					font-size: vaR(--ft16);
					padding: 0;
					padding-right: 1em;
					color: #000;
					white-space: nowrap;

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

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

	.layui-nav-item {
		&:hover {
			.nav-child {
				height: 470px;
			}
		}
	}

	.img1 {
		display: block;
	
	}

	.img2 {
		display: none;
	
	}

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

		i {
			font-size: var(--ft12);

		}
	}

// 	--bgc:#18FF00;



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

	.layui-nav .layui-nav-more {

		right: -14px;
	}

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

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

	.layui-nav>.layui-nav-item {
		line-height: 80px;
		margin: 0 var(--p20);

	}

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

		&::before {
			content: "";
			position: absolute;
			left: 0;
			top: 68%;
			width: 0;
			height: 1px;
			background-color: #fff;
			transition: all .2s;
			-webkit-transition: all .2s;
			pointer-events: none;
		}
	}

	.layui-nav .layui-this>a,
	.layui-nav .layui-nav-item:hover>a {
		&::before {
			width: 100%;
			right: 0;
		}
	}

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

	}

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

// 		background: rgba(0, 0, 0, 0.14);
	&.bgcolor {
		background: rgba(255, 255, 255, 0.8);
	}

	&.bgcolor,

	&.black {
		background: rgba(0, 0, 0, 0.14);
		// 		.input:focus::placeholder {

		// 			color: rgb(131, 128, 128);
		// 		}

		// 		--color:#222;

		// 		.img1 {
		// 			display: none;
		// 		}

		// 		.img2 {
		// 			display: block;
		// 		}

		// 		.layui-nav .layui-nav-item a:hover,
		// 		.layui-nav .layui-this a {
		// 			color: var(--color);
		// 		}
	}
}
.index_swiper{
    .h1{
        font-size: var(--ft40);
    }
    .sub{
        margin-top: var(--p40);
        font-size: var(--ft24);
    }
    .foot{
        margin-top: vaR(--p70);
    }
}

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

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


.capsule {
	z-index: 1;
	position: relative;
	color: var(--color-light)
}

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


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

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


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

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

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

.capsule:not(.is-disabled):before {
	transition: transform .45s ease-out
}

.capsule:not(.is-disabled):hover:before {
	transform: scale(1.035)
}

main {
	flex: 1;
}

:root {}

.animated-button {
	--color: #fff;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: vaR(--ft16);
	padding: 5px var(--p30);
	/* 内边距控制按钮基础大小，自适应核心 */
	border: 1px solid transparent;
	/* 透明边框，hover时不跳动 */

	background-color: inherit;
	border-radius: 0;
	font-weight: 600;
	/* 颜色统一使用自定义变量 --color */
	color: var(--color);
	box-shadow: 0 0 0 1px var(--color);
	cursor: pointer;
	overflow: hidden;
	transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
	/* 移除固定宽高，完全自适应 */
	font-weight: normal;
	width: auto;
	height: auto;
	line-height: 40px;
}

.animated-button svg {
	position: absolute;
	width: 24px;
	fill: var(--color);
	/* 图标颜色同步 --color */
	z-index: 9;
	transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .arr-1 {
	right: 16px;
}

.animated-button .arr-2 {
	left: -25%;
}

.animated-button .circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	background-color: var(--color);
	/* 圆形背景同步 --color */
	border-radius: 50%;
	opacity: 0;
	transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .text {
	position: relative;
	z-index: 1;
	margin: 0 5px;
	transform: translateX(-12px);
	transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button:hover {
	box-shadow: 0 0 0 12px transparent;
	color: #212121;
	/* hover后文字变深色（与圆形背景对比） */
	border-radius: 8px;
	font-size: var(--ft14);
}

.animated-button:hover .arr-1 {
	right: -25%;
}

.animated-button:hover .arr-2 {
	left: 16px;
}

.animated-button:hover .text {
	transform: translateX(12px);
}

.animated-button:hover svg {
	fill: #212121;
	/* hover后图标变深色 */
}

.animated-button:active {
	scale: 0.95;
	box-shadow: 0 0 0 4px var(--color);
	/* 点击时阴影同步 --color */
}

.animated-button:hover .circle {
	width: 220px;
	height: 220px;
	opacity: 1;
}

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

	.arrow path {
		fill: white;
	}



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

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

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

}

.NewsList {
	.d-grid;
	.grid3;
	gap: var(--p30) var(--p25);
}

.TitleHr {
	.flex-column-center;
	gap: 5px;
	margin-bottom: var(--p25);

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

	i {
		width: 90px;
		height: 1px;
		.bgc;

	}

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

		i {
			background: #fff;
		}
	}
}

.titleCom {
	text-align: center;

	h1 {
		.ftc;
		font-weight: normal;
		font-size: var(--ft24);
		margin-bottom: var(--p10);
	}

	.sub {
		color: #909299;
		font-size: var(--ft18);

	}

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

main {
	position: relative;

}

.ProNav {
	background: #fff;
	position: sticky;
	top: 0;
	font-size: vaR(--ft18);
	color: #343943;
	line-height: 1.2em;
	border-bottom: 1px solid #E5E5E6;
	z-index: 20;

	ul {
		.flex-center;
		gap: vaR(--p100);

		.item {
			padding: var(--p15) var(--p30);
			opacity: 0.4;

			&:hover,
			&.active {
				opacity: 1;
			}

			&.curr {
				.bgc;
				color: #fff;
				opacity: 1;
			}
		}
	}
}

main {
	background: #F7FAFF;
}

.rightNavBox {
	width: 0;

}

.NewDetails {
	.d-flex;

	font-size: var(--ft20);

	.back {
		.ftc;
	}

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

	dl {
		margin-top: var(--p25);
		color: #666666;
		.flex-center;
		flex-wrap: wrap;
		gap: var(--p20);
	}

	.con {
		margin-top: var(--p60);
	}

	.newRightNav {
		width: 200px;
		position: fixed;
		background: #fff;
		padding: var(--p20) var(--p15);
		top: var(--p60);
		right: 2%;
		top: 62%;

		p {
			.ftc;
		}

		.item {
			padding: var(--p10) 0;
			.d-flex;
			.al-c;
			.jc-s;
			gap: var(--p10);
			border-bottom: 1px solid #F2F2F2;

			i {
				flex-shrink: 0;
			}

			h5 {
				.line-clamp1;
				font-weight: normal;
				font-size: vaR(--ft14);
			}
		}
	}

	.foot {
		.d-grid;
		gap: var(--p10);
		margin-top: var(--p90);

		&>* {
			.line-clamp1;
		}

		a:hover {
			.ftc;
		}
	}
}

.ContactForm {
	position: relative;
	background: #F7FAFF;
}

.ContactJingXiao {
	background: #fff;
	position: relative;

	.bg {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
		right: 0;
	}
}

.Form {
	gap: var(--p30) var(--p40);

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

		&::before {
			.ftc;
		}
	}

	.tip {
		.ftc;
	}

	.foot {
		.flex-center;
	}

	.layui-btn {
		border-color: var(--ftc);
		color: vaR(--ftc);
		padding: 0 vaR(--p40);
		background: initial;
		display: flex;
		align-items: center;
		.jc-c;
		border-radius: 0;
		overflow: hidden;
		transition: all 0.2s;
		cursor: pointer;

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

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

		&:hover {
			background: #fff;
			opacity: 1;

			box-shadow: 0 8px 16px rgba(46, 91, 190, 0.2);
		}

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

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

		&:hover span {
			transform: translateX(0.5em);
		}

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

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

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

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

.canvas {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 0;
}

.ContactInfo {
	padding-bottom: 0;

	.layui-main {
		.d-grid;
		.grid2;
		background: RGBA(243, 246, 250, 1);
	}

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

		ul {
			.d-grid;
			gap: var(--p15);
			margin-top: var(--p25);

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

		padding: var(--p90) var(--p100);
	}
}

.NewsList {
	.img {
		aspect-ratio: 38/20;

	}

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

	* {
		transition: all 0.3s;
	}

	.sub {
		margin-top: var(--p15);
		height: 6em;
		color: #666;
		.line-clamp3;
		line-height: 2em;
	}

	.foot {
		margin-top: var(--p15);
		.d-flex;
		.al-c;
		.jc-s;
		color: #999;
	}

	.item:hover {
		.more {
			.ftc;

			i {

				animation-duration: 0.75s;
				animation-fill-mode: forwards;
				animation-name: mo_arrow;
				animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
			}
		}
	}

}

.pagenum {

	input,
	button,
	a,
	span {
		border-radius: 4px;
		border: 1px solid #E1E2E4;
		background: #fff;
		height: 35px;
		min-width: 2em;
	}

	input {
		min-width: 3em;
	}
}

@keyframes mo_arrow {

	40%,
	50% {
		opacity: 0;
	}

	43% {
		transform: translateX(90%) scaleY(0.1);
	}

	44%,
	50% {
		transform: translateX(-110%) scaleY(0.2);
	}

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

.Msg {
	color: #fff;
	.bg_img;

	.layui-main {
		.flex-column-center;

	}

	.sub {
		margin-bottom: var(--p40);
		font-size: var(--ft18);
	}

	.animated-button {
		line-height: 30px;
		font-size: var(--ft14);

	}
}

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

footer {
	font-size: var(--ft14);
	.bg_fixed;
	color: #fff;

	.foot1 {
		.d-flex;
		.al-fs;
		.jc-s;
		flex-wrap: wrap;
		gap: var(--p60);
		padding: vaR(--p60) 0;

	}

	.link {
		.d-flex;
		.al-fs;
		.jc-s;
		gap: var(--p130);
		flex-wrap: wrap;

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

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

		a:hover {
			padding-left: 1em;
			opacity: 0.8;
		}
	}

	.qrcode {
		li {
			.flex-column-center;
			gap: 5px;
		}
	}

	.foot2 {
		border-top: 1px solid rgba(255, 255, 255, 0.4);
		padding: var(--p10);

		ul {
			.flex-center;
			gap: var(--p10);
			flex-wrap: wrap;
		}

		span {

			opacity: 0.6;
		}

		a {
			opacity: 0.6;

			&[href]:hover {
				opacity: 1;
			}
		}
	}
}

.SoftList {
	.item {
		padding: var(--p60) 0;
		.d-grid;
		.grid2;
		gap: var(--p50);
		border-bottom: 1px solid #E1E2E6;

		&:first-child {
			padding-top: var(--p40);
		}

		dl {
			gap: var(--p20);
			.d-grid;
			.grid3;
		}

		.img {
			aspect-ratio: 180/200;

			&:hover {
				box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
			}
		}

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

		.sub {
			margin-top: 5px;
			font-size: var(--ft18);
			color: #666666;
			line-height: 2em;
			height: 4em;
			.line-clamp2;
			margin-bottom: var(--p20);
		}
	}
}

.SoftForm {
	background: #fff;
}

.download-btn {
	.bgc;
	display: inline-flex;
	.al-c;
	gap: var(--p10);
	color: #fff;
	border-color: vaR(--ftc);

	&:hover {
		.bgc;
		color: #fff;
	}
}
.IndexAbout{
    .title{
        .key{
            font-size: var(--ft20);
color: #82858C;
        }
        h1{
            font-size: var(--ft26);
            display: inline-block;
            position: relative;
            line-height: 1em;
            &:before{
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: 0.3em;
                z-index: -1;
                .bgc;
                display:inline-block;
                content: '';
                
            }
        }
    }
    .con{
        margin: vaR(--p20) 0  var(--p40);
        font-size: var(--ft22);
    }
}
.softDetails {
	position: relative;
	overflow: hidden;

	#canvas {
		position: absolute;
		left: -35%;
		bottom: -10%;
		z-index: 0;
		opacity: 0.6;
	}

	.Info {
		.d-flex;
		.al-s;
		.jc-s;
		flex-wrap: wrap;
		gap: vaR(--p30);

	}

	.Text {
		flex-shrink: 0;
		width: 500px;
		max-width: 100%;
		.d-flex;
		.flex-column;
		.al-fs;
		.jc-fs;
		gap: var(--p20);

		.sub {
			flex: 1;
		}

		h5 {

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

		.sub {
			font-size: vaR(--ft20);
			color: #666;
		}
	}

	.con {
		margin-top: vaR(--p100);
	}

	.Box {
		padding: 0 vaR(--p50);
		position: relative;
		width: 500px;
		max-width: 100%;
	}

	.Box1 {
		padding: var(--p10);
		background: #fff;
	}
}

.flow-bg-horizontal {
	position: absolute;
	bottom: 0;
	width: 100vw;
	/* 容器宽度，可根据需求调整 */
	height: 40%;
	/* 容器高度，可根据需求调整 */
	/* 1. 设置背景图：建议用无缝衔接图，避免流动时出现断层 */
	background-image: url("../images/bg.png");
	/* 2. 背景图重复：横向重复（纵向不重复可设 no-repeat） */
	background-repeat: repeat-x;
	/* 3. 背景图尺寸：cover 覆盖容器 / contain 完整显示，按需选择 */
	background-size: cover;
	animation: flowHorizontal 50s linear infinite;
}

.SoftForm {
	position: relative;

}


.AboutParent {
	.block {
		position: relative;
	}

	.block::after {
		content: "";
		width: 100%;
		height: 100%;
		background-image: linear-gradient(270deg, #F7FAFF 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, #F7FAFF 100%);
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 2;
	}
}

.marquee-container {
	width: 100%;
	overflow: hidden;
	position: relative;
	padding: 10px 0;

	/* 滚动轨道 */
	.marquee-track {
		display: flex;
		gap: var(--p40);
		width: max-content;
		animation: marquee 20s linear infinite;
		/* 匀速滚动动画 */
	}

	/* 滑块样式 */
	.marquee-item {
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		/* 防止压缩 */
		position: relative;
		transition: all 0.5s;
	}



	/* 核心动画 - 实现完全匀速滚动 */
	@keyframes marquee {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(calc(-50% - 10px));
			/* 滚动到一半长度（减去半个间距） */
		}
	}

	/* 复制一组内容用于无缝衔接 */
	.marquee-clone {
		display: flex;
		gap: var(--p40);
	}
}



/* HTML: <div class="loader"></div> */
.loader {
    --color:rgba(46, 91, 190, 0.2);

  background: var(--ftc);
  box-shadow: 0 0 0 0 var(--color);
  animation: l1 1s infinite;
  @keyframes l1 {
    100% {box-shadow: 0 0 0 10px var(--color)}
}
}



.AboutHistory {
	background: #fff;
	position: relative;

	.bg {
		background-image: url("../images/bg1.png");
	}

	.Card {
		margin-top: vaR(--p60);
		padding-bottom: var(--p40);
		overflow: hidden;
		overflow-y: hidden;
		overflow-x: scroll;

		&::-webkit-scrollbar {
			width: 5px;
			height: 1px;
		}
	}

	ul {
		display: flex;
		list-style: none;
		.al-fs;
		padding: 0;
		gap: vaR(--p40);
		margin: 0;
		width: fit-content;
		position: relative;

		&::before {
			display: block;
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: 60px;
			height: 1px;
			background: rgba(46, 91, 190, 0.4);

		}


	}

	.card {
	    
	    position: relative;
	    bottom: 0;
	    transition: all 0.3s;
		padding: var(--p30) var(--p20);
		background: #fff;
		box-shadow: 4px 4px 16px 0px rgba(27, 30, 38, 0.1);
		border-radius: 4px;
	}

	.item {

		position: relative;

		h1 {
			margin: 0;
			.ftc;
		}
	}
	.topBox{
	    .d-flex;
	    margin-left: 67px;
	}
	.dian2{
	    margin-top: 5px;
	 width: 12px;
	 height: 12px;
	 display: block;
	 border-radius: 50%;
	 border: 1px solid var(--ftc);
	}
dl{
    position: relative;
    transition: all 0.3s;
    .d-grid;
    gap: var(--p10);
    dd{
        color:#6C6D75;
    .d-grid;
    gap: 5px;
    grid-template-columns: 3em  1fr;
    }
}
	.img {
		padding: var(--p40) 0;
	}

	.year {
		font-weight: bold;
		height: 40px;
		padding-left: 45px;
		font-size: var(--ft28);
	}

	li {
		width: 360px;
		flex-shrink: 0;
		margin-left: var(--p100);
		.d-grid;

		&:last-child {
			margin-right: var(--p100);
			;
		}
		&:hover{
		   .card{
		       bottom: 10px;
		   }
		}

		.item {
		    position: relative;
			top: 10px;
			.d-flex;
			.flex-column;
			.jc-fe;
		}


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

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

		.hr {
			width: 2px;
			height: 40px;
			transition: all 0.3s;
		.bgc;
		}
	}


}
.lineTitle{
    border-left: 4px solid var(--ftc);
    padding-left: 0.8em;
    line-height: 1em;
    .key{
        color: #848B94;
        font-size: var(--ft20);
        margin-bottom: 10px;
    }
    h1{
        font-size: var(--ft24);
        
    }
    
}
.IndexNew{
    background: #fff;
    .foot{
        .flex-center;
    }
}
.IndexNewList{
    margin: var(--p60) 0;
    .d-grid;
    .grid2;
    gap: var(--p30) var(--p100);
    .item{
        .d-grid;
        grid-template-columns: 0.6fr 1fr;
        gap: var(--p20);
        &:hover{
            h5{
                .ftc;
            }
        }
    }
    *{
        transition: all 0.3s;
    }
    .day{
        color: #999999;
        font-size: var(--ft18);
    }
    h5{
        margin-top: vaR(--p10);
        font-size: var(--ft20);
        .line-clamp1;
        
    }
    .sub{
           .line-clamp2; 
    }
}
.IndexMap{
    .TitleHr{
        margin-bottom: var(--p60);
    }
    --main:1500px;
    .layui-main{
        .d-grid;
        grid-template-columns: 1fr 0.4fr;
        gap:var(--p40);
    }
    .Card{
        .d-flex;
        .flex-column;
        padding: var(--p30) var(--p50);
        background: #FFFFFF;
box-shadow: 0px 2px 18px 0px rgba(22,26,34,0.26);

    }
    ul{
        flex: 1;
        font-size: var(--ft20);
        margin: var(--p40) 0;
        .d-grid;
        gap: var(--p15);
        li{
            .d-grid;
            gap: var(--p20);
            grid-template-columns: 15px 1fr auto;
        }
    }
    .foot{
        .flex-center;
    }
   .btn {
  width: 140px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  position: relative;
  background-color: transparent;
  transition: .2s cubic-bezier(0.19, 1, 0.22, 1);

  .ftc;
}

.btn::after {
  content: '';
  border-bottom: 3px double var(--ftc);
  width: 0;
  height: 100%;
  position: absolute;
  margin-top: -5px;
  top: 0;
  left: 5px;
  visibility: hidden;
  opacity: 1;
  transition: .2s linear;
}

.btn .icon {
  transform: translateX(0%);
  transition: .2s linear;
  stroke: var(--ftc);
  animation: attention 1.2s linear infinite;
}

.btn:hover::after {
  visibility: visible;
  opacity: 0.7;
  width: 90%;
}

.btn:hover {
  letter-spacing: 2px;
  opacity: 1;
}

.btn:hover > .icon {
  transform: translateX(30%);
  animation: none;
}

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

  50% {
    transform: translateX(30%);
  }
}
 
}
.AboutInfo{
    overflow: hidden;
    position: relative;
    canvas{
        top: 50% !important ;
        position: absolute !important
       
    }
    .layui-main{
        z-index: 1;
        .d-grid;
        .grid2;
        .al-fs;
        gap: var(--p100);
    }
    .con{
        font-size: var(--ft18);
        margin-top: vaR(--p30);
    }
    .Img{
        color: #848B94;
        text-align: center;
        .flex-column-center;
        gap: var(--p30);
    }
}

.ProductDetails {
	position: relative;
	overflow: hidden;

	#canvas {
		position: absolute;
		left: -35%;
		bottom: -10%;
		z-index: 0;
		opacity: 0.6;
	}

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

	.Info {
		.d-flex;
		.al-s;
		.jc-s;
		flex-wrap: wrap;
		gap: vaR(--p30);

	}

	.Img {
		max-width: 50%;
	}

	.Text {
		flex-shrink: 0;
		width: 500px;
		max-width: 100%;
		.d-flex;
		.flex-column;
		.al-fs;
		.jc-fs;
		gap: var(--p20);

		.sub {
			flex: 1;
		}

		h5 {
			.ftc;
			font-size: var(--ft34);
		}

		.sub {
			font-size: vaR(--ft20);
			color: #666;
		}
	}

	.con {
		margin-top: vaR(--p100);
	}

	.con {
		table {

			th,
			td {
				text-align: left;
				padding-left: 3em;
			}
		}
	}
}



/* 定义横向流动动画 */
@keyframes flowHorizontal {
	0% {
		background-position: 0 0;
		/* 起始位置：左上角 */
	}

	100% {
		background-position: -2000px 0;
		/* 结束位置：向左移动2000px（值越大，单次流动范围越广） */
	}
}

.s_content {
	table {

		background: #fff;

		th,
		td {
			text-align: center;
			padding: vaR(--p10);
			font-size: var(--ft20);
		}

		tr:nth-child(odd) {
			background: rgba(46, 91, 190, 0.1);
		}

		.firstRow {
			.bgc !important;
			color: #fff;
		}
	}
}

.softDetails {
	.mySwiper {}

	--swiper-navigation-color:var(--ftc);

	.mySwiper2 {
		aspect-ratio: 3/2;
	}

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

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

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

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

	.img1 {
		aspect-ratio: 1/1;
		box-shadow: 4px 4px 10px 0px rgba(27, 30, 38, 0.1);
		border: 1px solid #fff;
		transition: all 0.3s;
		opacity: 0.8;
	}

	.swiper-slide-thumb-active {
		border-color: var(--ftc);
		opacity: 1;

	}
}


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

	.item {
		&:hover {
			.bg {
				opacity: 1;
				background: rgba(46, 91, 190, 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 {
		background: #fff;
		aspect-ratio: 350/285;
	}

	.Img {
		position: relative;

	}



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

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

.IndexProductList {
	.d-grid;
	.grid3;
	gap: var(--p60) var(--p30);

	.item {
		&:hover {
			.bg {
				opacity: 1;
				background: rgba(46, 91, 190, 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;
	}

	.Img {
	    padding: var(--p30);
	    background: #E6EAF0;
	    box-shadow: 3px 3px 6px 0px rgba(27,30,38,0.1);
		position: relative;

	}



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

	}
	.more{
	    text-align: right;
	    .ftc;
	}
}
@media only screen and (max-width: 1400px) {}

@media only screen and (max-width: 990px) {
    .Msg .animated-button{
        padding: 0 20px;
    }
    .animated-button svg{
        width: 12px;
    }
    .AboutInfo .img{
        img{
            max-width:70%;
        }
    }
    footer .qrcode li img{
        width: 100px;
    }
    .ContactInfo .layui-main,
    .SoftList .item,
    .IndexMap .layui-main,
    .IndexNewList,
    .AboutInfo .layui-main,
    .IndexProductList{
        .grid1;
    }
    .layui-btn{
        --btn:30px;
        font-size: var(--ft12);
    }
    .swiper-button-next, .swiper-button-prev{
        display: none !important;
    }
    .index_swiper .SwiperItem{
        
    height: 50vh;
    }
    .navMobile  {
        background: Rgba(0,0,0,0.5);
    }
    header .logo img{
        max-height: 30px;
    }
    .ProductDetails .Img{
        width: 100%;
        max-width: unset;
        img{
            max-width: 50%;
        }
    }
    .AboutHistory li{
       width: 300px;
    }
    .marquee-container .marquee-item{
        height: 80px;
    }
    .NewsList,
    .ProductList{
        .grid2;
    }
}

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