@import "./common.less";

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

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

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

main {
	flex: 1;
}

header {
	top: 0;
	transition: all 0.5s;
	color: #fff;
	background: #000;

	.layui-nav .layui-nav-item {
		margin: 0 var(--p20);
		line-height: 2.5em;
	}

	.right {
		.d-flex;
		.al-c;
	}

	font-size: var(--ft14);

	.dropdown {
		margin-left: var(--p20);
		.d-flex;
		.al-c;
		gap: 5px;
	}

	.layui-nav .layui-nav-item>a {
		padding: 0;
	}

	.layui-nav .layui-this:after,
	.layui-nav-bar {
		background: #FF0000;
		height: 1px;
	}

	.layui-main {
		padding: var(--p20) 0;
		transition: all 0.3s;
	}

	.layui-nav .layui-nav-more {

		position: relative;
		right: -4px;
	}

	&.down {
		top: -100%;
	}
}

.productCase {
	background: #000;
	color: #fff;

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

		.img {
			aspect-ratio: 1/1;
		}

		.item {
			position: relative;

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

		.block {
			padding: var(--p20);
			position: absolute;
			bottom: 0;
			top: 0;
			left: 0;
			right: 0;
			transition: all 0.3s;
			background: rgba(0, 0, 0, 0.4);
			.d-flex;
			.al-fe;
		}

		.layui-btn {
			border-radius: 4px;
			background: #000;
			width: 100%;

			img {
				margin-left: 5px;
			}

			&:hover {
				opacity: 1;
			}

			&::before {
				background: linear-gradient(123.44deg, rgba(2, 93, 153, 1) 0%, rgba(0, 133, 140, 1) 100%);
			}
		}
	}
}

footer {
	font: var(--ft14);
	color: rgba(255, 255, 255, 0.8);
	background: #000000;
	padding: var(--p60) 0;

	.foot2 {
		border-top: 1px solid #474747;
		padding: var(--p30) 0;
		.d-flex;
		.al-c;
		.jc-s;
		gap: var(--p20);
		flex-wrap: wrap;

		ul {
			.d-flex;
			gap: var(--p30);
			flex-wrap: wrap;
		}
	}

	.foot1 {
		.d-flex;
		.al-c;
		.jc-s;
		padding-bottom: var(--p40);
		gap: var(--p20);
		flex-wrap: wrap;

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

		ul {
			margin-top: var(--p30);
			.d-flex;
			gap: var(--p15);
			flex-wrap: wrap;
		}

		.form {
			.layui-form-checkbox[lay-skin=primary]>div {
				color: rgba(255, 255, 255, 0.8);
			}

			--ftc:#000;
			width: 340px;
			max-width: 100%;

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

			.layui-form-checked[lay-skin='primary']>i {
				border-color: rgba(255, 255, 255, 0.5) !important;
			}

			.agree {
				margin-top: var(--p15);
			}

			--input:56px;

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

			.layui-input-prefix .layui-icon {
				font-size: var(--ft22);
			}

			.btn {
				background: #000;
				width: 40px;
				aspect-ratio: 1/1;
				padding: 5px;
				position: absolute;
				top: 50%;
				right: 10px;
				transform: translateY(-50%);
				border-radius: 6px;
				transition: all 0.3s;
				cursor: pointer;

				&:hover {

					scale: 0.9;
				}
			}
		}
	}

	a:hover {
		color: rgba(255, 255, 255, 1);

	}

	.foot3 {
		border-top: 1px solid #474747;
		padding-top: var(--p30);
	}
}

.Title {
	font-size: var(--ft32);
	padding: var(--p40) 0;
	background: #000;
	color: #fff;
}

.layui-btn {
	border-radius: 23px;
	border: none;
	background: linear-gradient(123.44deg, #025D99 0%, #00858C 100%);
}

.Contact {
	padding: var(--p50) 0;

	.label {
		margin-bottom: var(--p10);
	}

	form {
		gap: var(--p30);

	}

	.layui-btn {
		display: block;
		margin: var(--p50) auto 0;
		width: 400px;
		max-width: 100%;

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

.img_100 {
	video {

		width: 100%;
		height: 100%;
		object-fit: cover;
		background: #000;
	}
}

.next,
.prev {
	cursor: pointer;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	--ab: 15px;
	z-index: 9;
	.flex-center;

	img {
		max-width: 100%;
		transition: all 0.3s;
	}

	&:hover {
		img {
			scale: 0.9;
		}
	}
}

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

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

		&:hover {

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

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

	.swiper-slide {
		width: 80%;
		transition: all 0.3s;
	}

	.img {
		aspect-ratio: 910/450;
		border-radius: 20px;
		position: relative;

		&::before {
			display: block;
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.7);
		}
	}

	.t1 {
		transition: all 0.5s;
		opacity: 0;
		margin-top: var(--p20);
		transform: translateY(200px);
	}

	.swiper-slide-active {
		.t1 {
			transform: translateY(0);
			opacity: 1;
		}

		.img::before {
			background: rgba(0, 0, 0, 0);

		}
	}
}

.next {
	right: var(--ab);
}

.prev {
	left: var(--ab);
}

.CaseSection {
	color: #fff;
	background: #000;
}

.ftc1 {
	background: linear-gradient(123.44deg, #025D99 0%, #00858C 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.titleCom {
	text-align: center;
	.d-grid;
	gap: var(--p15);

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

	.color {
		font-size: 30px;
		.ftc1;
	}

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

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

	.sub1 {
		color: #828282;
		font-size: var(--ft18);
	}
}

.picList {
	margin-top: var(--p50);

	.item {
		min-height: 400px;
		position: relative;
		.d-flex;
		.flex-column;

		.jc-fe;

		.img {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: 0;
		}

		.block {
			height: 100%;
			position: relative;
			z-index: 2;
			padding: var(--p40) var(--p70);

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

			h5 {
				font-size: var(--ft36);
				font-weight: normal;
			}
		}
	}
}

.CaseBlock {
	background: #000;
	color: #fff;

	.NewsList {
		margin-top: var(--p30);
	}
}

.NewsList {
	.d-grid;

	.item {
		padding: var(--p30) 0;
		.d-grid;
		gap: var(--p25);
		grid-template-columns: 11vw 1fr;
		font-size: var(--ft14);
		border-bottom: 1px solid #696969;
		transition: all 0.3s;

		.img {
			aspect-ratio: 228/177;
			border-radius: 6px;
			border: 1px solid rgba(255, 255, 255, 0.5);
		}

		.sub {
			transition: all 0.3s;
			opacity: 0.8;
			margin-top: var(--p15);
		}

		.top {
			.d-flex;
			.al-fe;
			gap: var(--p20);
			.jc-s;
			flex-wrap: rap;
		}

		h5 {

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

		.date {}

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

		&:before {
			background: #fff;
			height: 1px;

		}
	}
}

.PicSwiper {
	position: relative;
	margin-top: var(--p40);

	.next,
	.prev {
		--ab: -30px;

	}
}

.proBanner {
	--swiper-pagination-bullet-inactive-color: #fff;
	--swiper-pagination-color: #fff;
}

.ProductDetails {
	#demoTabsHeader .layui-btn.layui-this {
		border-color: #eee;
		color: unset;
		background: none;
	}

	.s_content {

		table {
			width: 100%;
			border-radius: 8px;

			box-shadow: 0px 2px 4px #D2D2D2;
			border: 1px solid #DDDDDD;
			overflow: hidden;

		}

		td {
			min-width: 100px;
			padding: var(--p10) var(--p40);
		}

		tr {
			td:nth-child(odd) {
				color: #727272;
			}
		}

		tr:nth-child(odd) {

			background: #F5F5F5;
		}
	}

	#demoTabsBody .test-item {
		display: none;
	}

	#demoTabsBody {
		margin-top: var(--p20);
	}

	.tips {
		font-size: var(--ft14);
		color: #ADADAD;
		line-height: 1.3em;
		margin-top: var(--p20);
	}

	.layui-btn-container {
		.d-grid;
		.grid3;
		gap: var(--p30);

		.item {
			border-radius: 8px;
			background: rgba(229, 229, 229, 1);
			color: #000;
			font-size: var(--ft18);
			padding: 10px 20px;
			text-align: center;
			cursor: pointer;

			&.layui-this {
				background: #000;
				color: #fff;
			}
		}
	}
}

.productImg {
	aspect-ratio: 1920/820;
	color: #fff;
	position: relative;
	padding: var(--p80) 0;
	.flex-center;
	.bg_img;

	.Info {
		width: fit-content;

		max-width: 600px;
	}

	h1 {
		.ftc1;
		line-height: 1em;
		margin-bottom: var(--p10);
		font-size: var(--ft50);
		font-weight: none;

	}

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

	.layui-btn {

		padding: 0 var(--p30);

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

		}
	}

	ul {
		margin-top: var(--p60);
		.d-flex;
		gap: var(--p30);
		flex-wrap: wrap;

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

		p {
			color: #999999;
			margin-top: 5px;
		}
	}

	.down {
		position: relative;
		background: initial;
		border: 1px solid rgba(0, 133, 140, 1);
	}

	.sub {
		margin-top: var(--p30);
		font-size: var(--ft30);
	}

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

	}

	.img {}

}

.phone {
	display: none;
}

.IndexCase {
	ul {
		margin-top: var(--p40);
		.d-grid;
		.grid4;
		gap: var(--p20);
		animation-duration: vaR(--p50);

		.item {
			border-radius: 8px;
			background: rgba(244, 246, 249, 1);

			.img {
				aspect-ratio: 430/200;
			}

			.block {
				padding: var(--p20) var(--p25);
			}

			h5 {
				line-height: 1.3em;
				font-size: var(--ft16);
			}

			.sub {
				color: #666666;
				margin-top: var(--p10);
				font-size: var(--ft12);
			}
		}
	}
}

.IndexOso {
	background: #000;
	color: #fff;

	.swiper-slide {
		position: relative;
		overflow: hidden;
	}

	.swiper-slide-active {
		.title {

			transform: translateY(0);
			opacity: 1;
		}
	}

	.title {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: var(--p30) var(--p50);
		color: #fff;
		font-size: var(--ft20);
		transform: translateY(200px);
		opacity: 0;
		transition: all 0.3s;
	}
}

.Index {
	.productImg {
		aspect-ratio: 1920/560;
		.bg_img;

		&.even {

			.layui-main {
				direction: rtl;
			}

			.Info {

				text-align: right;
				direction: ltr;

				display: flex;
				flex-direction: column;
				align-items: flex-end;
			}
		}
	}
}

.indexBlock {
	padding: var(--p50) 0 var(--p80);
	background: #000;
	color: #fff;

	ul {
		margin-top: var(--p40);

		.item {
			p {
				width: 700px;
				max-width: 100%;
				text-align: center;
				margin: vaR(--p20) auto 0;
			}
		}
	}
}

.Number {
	background-color: #000;
	position: relative;

	.bg {
		// left: 5vw;
		top: 0;
		bottom: 0;
		position: absolute;
		overflow: hidden;
		right: 0;
		left: 0;

		img {
			height: 100%;
		}
	}

	.tips {
		.ftc1;
		font-size: var(--ft20);
		margin-top: vaR(--p30);
		text-align: center;
	}

	ul {
		margin-top: var(--p50);
		.flex-center;
		text-align: center;
		gap: var(--p200);
		font-size: var(--ft18);

		h5 {
			.ftc1;
			font-size: var(--ft100);

		}
	}
}

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

@media only screen and (max-width: 990px) {
	body {
		--btn: 36px;
		--btn_size: 12px;
	}

	.ProductDetails .s_content {
		overflow: hidden;
		overflow-x: auto;
		max-width: 100%;

	}

	.ProductDetails .layui-btn-container {
		gap: 5px;
	}

	.ProductDetails .layui-btn-container .item {
		padding: 10px 2px;
	}

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

	.IndexCase ul,
	.NewsList .item {
		.grid1;
	}

	.next,
	.prev {
		width: 30px;
	}

	.PicSwiper .next,
	.PicSwiper .prev {

		--ab: 0px;
	}

	.Number ul h5 {
		font-size: 20px;
	}

	.productImg .layui-main {
		.grid1;
	}
}

.layui-btn-container {
	word-spacing: 0px;
}

@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) {
	.phone {
		display: block;
	}

	.pc {
		display: none;
	}
}