/*common start*/
body, div, ul, li, a, img, p, dl, dt, dd, h1, h2, h3, h4, span, input, button, textarea, dl, dt {
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	border: 0;
	list-style: none;
	font-family: normal;
	font-weight: normal;
}

body {
	font-size: 14px;
	color: #111;
	overflow-x: hidden;
}

a img {
	border: 0;
}

em {
	font-style: normal;
}

body.head_on {
	overflow: hidden;
}

a {
	text-decoration: none;
	color: #333;
	transition: all .3s;
}

* {
	box-sizing: border-box;
}

input, select, textarea {
	outline: none;
}

.clear {
	margin: 0;
	padding: 0;
	font-size: 0;
	clear: both;
}

.wapper {
	width: 100%;
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
}

@media only screen and (min-width: 1200px) {
	.wapper {
		width: 1408px;
		margin: 0 auto;
	}
}

:root {
	--primary-color: #2a62ac;
	--font-color: #666;
	--main-white: #fff;
}





/* 轮播图通用 */
.swiper {
	width: 100%;
	height: 100%;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

	.swiper-slide img {
		width: 100%;
	}

.overflow1 {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	width: 100%;
	display: block;
}

.overflow2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.overflow3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (min-width: 640px) {
	.sm\:h-32 {
		height: 128px;
		width: 100%;
	}
}
/* 导航 */
.headerbox {
	width: 100%;
	margin: 0 auto;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	background: #fff;
}

	.headerbox .header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

.logo {
	font-size: 0;
}

	.logo img {
		max-width: 100%;
		height: 40px;
	}

.h_right {
	display: flex;
	align-items: center;
}

.headerbox .header .menu > ul > li {
	display: inline-block;
	border-right: 1px solid rgb(229, 231, 235);
}

	.headerbox .header .menu > ul > li > a {
		font-size: 16px;
		font-weight: 600;
		line-height: 44px;
		padding: 0px 25px;
		color: #333;
		display: flex;
		text-decoration: none;
	}

	.headerbox .header .menu > ul > li.curr > a {
		background: #3a3d3d25;
		border-top: 4px solid #000;
	}

.headerbox .header .menu ul li .sub_menu {
	width: 100%;
	position: absolute;
	top: 140%;
	left: 0%;
	z-index: 10;
	visibility: hidden;
	opacity: 0;
	background: white;
	transition: all 400ms ease;
	padding: 20px;
}

	.headerbox .header .menu ul li .sub_menu dl {
		max-width: 1200px;
		display: flex;
		flex-wrap: wrap;
		margin: 0 auto;
	}

		.headerbox .header .menu ul li .sub_menu dl dd {
			width: 33.33%;
			padding-left: 10px;
			border-left: 1px solid #333;
			margin-bottom: 16px;
		}

			.headerbox .header .menu ul li .sub_menu dl dd a {
				line-height: 30px;
				font-size: 18px;
				color: #000;
			}

.headerbox .header .menu ul li:hover > .sub_menu {
	opacity: 1;
	visibility: visible;
	top: 100%;
}



.h_lan {
	position: relative;
	line-height: 44px;
	padding: 0 16px;
	display: flex;
	align-items: center;
}

	.h_lan i {
		margin-left: 20px;
	}

	.h_lan ul {
		position: absolute;
		right: 0;
		width: 224px;
		border-radius: 12px;
		background: #fff;
		z-index: 999;
		padding: 8px;
		opacity: 1;
		visibility: hidden;
		z-index: 99;
		top: 100%;
	}

	.h_lan:hover ul {
		opacity: 1;
		visibility: visible;
	}

	.h_lan ul li {
		padding: 4px 12px;
		font-size: 14px;
		color: #000;
		border-radius: 12px;
		line-height: 28px;
	}

		.h_lan ul li:hover {
			background: rgb(243 244 246);
		}

		.h_lan ul li span {
			padding: 0 12px;
			font-size: 10px;
			font-weight: 700;
			letter-spacing: 1px;
		}


.h_search {
	display: flex;
	align-items: center;
}

	.h_search .h_text {
		background: #3a3d3d25;
		text-indent: 8px;
		line-height: 28px;
		width: 0;
		transition: all 0.5s;
	}

	.h_search:hover .h_text {
		width: 133px;
	}

	.h_search .h_btn {
		background: transparent;
		cursor: pointer;
		padding: 0 16px;
	}




/*mMenu*/
.m_header {
	width: 100%;
}

.sp_header {
	height: 70px;
	/* overflow: hidden; */
	background: var(--main-white);
	position: fixed;
	z-index: 999;
	width: 100%;
	display: none;
	top: 0;
	align-items: center;
	justify-content: space-between;
}

.sp_logo {
	height: 70px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-left: 10px;
}

	.sp_logo img {
		margin: auto;
		max-height: 50px;
	}
.sp_right{display: flex;align-items: center;}
.sp_right .h_lan{margin-right: 20px;}

.sp_nav {
	width: 77px;
	position: relative;
	cursor: pointer;
	height: 30px;
}
	/* 横杠 */
	.sp_nav
	span {
		display: block;
		background: #000000;
		width: 30px;
		height: 3px;
		position: absolute;
		left: 10px;
		transition: all ease 0.35s
	}

		.sp_nav span:nth-of-type(1) {
			top: 0px
		}

		.sp_nav span:nth-of-type(2) {
			top: 10px
		}

		.sp_nav span:nth-of-type(3) {
			top: 20px
		}

.sp_nav_se span:nth-of-type(1) {
	top: 10px;
	transform: rotate(45deg)
}

.sp_nav_se span:nth-of-type(2) {
	width: 0
}

.sp_nav_se span:nth-of-type(3) {
	top: 10px;
	transform: rotate(-45deg)
}

.sjj_nav {
	position: fixed;
	z-index: 9999;
	background: var(--main-white);
	width: 100%;
	height: calc(100% - 70px);
	font-size: 14px;
	line-height: 40px;
	top: 70px;
	left: 0;
	overflow: auto;
	overflow-x: hidden;
	transition: top ease 0.35s;
	display: none;
	transition: all ease 0.35s
}

.nav_show {
	display: block;
}

.sjj_nav ul li i {
	position: absolute;
	top: 5px;
	right: 0px;
	height: 30px;
	padding: 0px 7px 0 7px;
}

	.sjj_nav ul li i svg {
		transform: rotate(-90deg);
		transition: all ease 0.35s
	}

.sjj_nav ul li .sjj_nav_i_se svg {
	transform: rotate(0deg)
}

.sjj_nav ul li {
	border-bottom: 1px dashed #ddd;
	;
	position: relative;
	line-height: 45px;
	font-size: 16px
}

.sjj_nav > ul > li:last-child {
	border-bottom: 1px dashed #ddd;
}

.sjj_nav ul li ul {
	display: none
}

.sjj_nav ul li a {
	color: var(--font-color);
	width: 100%;
	padding: 0 20px;
	display: block;
	box-sizing: border-box;
}

	.sjj_nav ul li a:hover {
		color: #000000;
	}

.sjj_nav ul li ul li a {
	color: var(--font-color);
	display: block;
	text-align: left;
}

.sjj_nav ul li i svg {
	width: 25px;
	height: 25px;
	fill: #333;
}

.sjj_nav ul li .sjj_nav_i_se svg {
	fill: #333;
}

.sjj_nav ul li ul li > ul {
	margin-left: 10px
}

.sjj_nav ul li ul li {
	border-top: none;
}

	.sjj_nav ul li ul li a {
		padding: 0 30px;
	}


.plr15 {
	padding-left: 15px;
	padding-right: 15px;
}

.ptm50 {
	padding-top: 50px;
	padding-bottom: 50px;
}

.bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.img_list2 {
	width: 100%;
	margin: 0 auto;
}

	.img_list2 ul {
		display: flex;
		flex-wrap: wrap;
	}

		.img_list2 ul li {
			width: 50%;
			font-size: 0;
			padding: 0 15px;
		}

			.img_list2 ul li img {
				width: 100%;
			}

.img_list3 {
	width: 100%;
	margin: 0 auto;
}

	.img_list3 ul {
		display: flex;
		flex-wrap: wrap;
	}

		.img_list3 ul li {
			width: 33.33%;
			font-size: 0;
			padding: 0 15px;
		}

			.img_list3 ul li img {
				width: 100%;
			}

.img_list4 {
	width: 100%;
	margin: 0 auto;
}

	.img_list4 ul {
		display: flex;
		flex-wrap: wrap;
	}

		.img_list4 ul li {
			width: 25%;
			font-size: 0;
			padding: 0 15px;
		}

			.img_list4 ul li img {
				width: 100%;
			}





/* bannerbox */
.bannerbox {
	width: 100%;
}

	.bannerbox .mySwiper1 {
		width: 100%;
	}

		.bannerbox .mySwiper1 .swiper-slide a {
			display: block;
			font-size: 0;
			width: 100%;
		}

			.bannerbox .mySwiper1 .swiper-slide a img {
				width: 100%;
			}

/* .prev_btn,.next_btn{font-size: 20px;position: absolute;top: 50%;z-index: 9;line-height: 50px;height: 50px;width: 30px;text-align: center;transform: translateY(-50%);vertical-align: middle;cursor: pointer;color: white;background: rgba(0,0,0,.1);}
.prev_btn{left: 0;}
.next_btn{right: 0;} */
.mySwiper1 .swiper-pagination1 {
	max-width: 66vw;
	bottom: 65px !important;
	left: 50% !important;
	transform: translateX(-50%);
	text-align: left;
}

.mySwiper1 .swiper-pagination-bullet {
	width: 40px;
	height: 5px;
	background: rgba(255, 255, 255, 0.3);
	position: relative;
	border-radius: 0;
	opacity: 1;
}

.mySwiper1 .swiper-pagination-bullet-active:after {
	content: "";
	position: absolute;
	inset: 0;
	background: #333;
	transform-origin: left center;
	transform: scaleX(0);
	animation: bullet-progress var(--progress-duration, 3s) linear forwards;
}

@keyframes bullet-progress {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* 悬停暂停时，进度条同步暂停 */
.swiper-pagination-bullet-active.is-paused::after {
	animation-play-state: paused;
}



.out_top {
	position: fixed;
	z-index: 999;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 16px;
	color: #fff;
	right: 32px;
	bottom: 32px;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
}


/* footer */
.footerbox {
	width: 100%;
	margin: 0 auto;
	padding-top: 48px;
	padding-bottom: 30px;
}

.footer {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-bottom: 48px;
	border-bottom: 1px solid #ffff;
}

.f_logo {
	width: 30%;
	font-size: 0;
}

	.f_logo img {
		max-width: 100%;
		width: auto;
	}

.f_link {
	width: 25%;
}

.f_contact {
	width: 35%;
}

	.f_link h3, .f_contact h3 {
		font-size: 20px;
		color: #fff;
		font-weight: 600;
		margin-bottom: 16px;
	}

.f_link ul li {
	margin-top: 4px;
}

	.f_link ul li a {
		font-size: 16px;
		color: #fff;
		line-height: 33px;
	}

.f_contact .desc {
	font-size: 16px;
	color: #fff;
	line-height: 33px;
}


.height { /*height: 44px;*/
}

/* 通用内页 */
.inbannerbox {
	position: relative;
	width: 100%;
	margin: 0 auto;
	font-size: 0;
}

	.inbannerbox img {
		width: 100%;
	}

	.inbannerbox video {
		width: 100%;
	}

	.inbannerbox h3 {
		position: absolute;
		left: 80px;
		top: 80px;
		font-size: 24px;
		color: #fff;
		font-weight: bold;
	}



.insidebox {
	width: 100%;
	margin: 0 auto;
}

	.insidebox .inside {
		width: 100%;
		box-sizing: border-box;
	}


.s_menubox {
	width: 100%;
	margin: 0 auto;
}

.s_menu {
	width: 100%;
	margin: 0 auto;
	padding: 32px 0;
}

	.s_menu span {
		padding: 0 15px;
	}




/* ================首页样式========================= */
.index1box {
	width: 100%;
	margin: 0 auto;
	max-width: 1500px;
}

	.index1box a {
		display: block;
		width: 100%;
		overflow: hidden;
		position: relative;
		height: 37vw;
	}

		.index1box a img {
			width: 100%;
			transition: all 0.7s;
			height: 100%;
			object-fit: cover;
		}

		.index1box a:hover img {
			transform: scale(1.05);
		}

		.index1box a h3 {
			position: absolute;
			left: 20px;
			bottom: 24px;
			color: #fff;
			font-size: 30px;
			font-weight: 600;
			z-index: 22;
		}



.index2box {
	width: 100%;
	margin: 0 auto;
}

.index2 {
	width: 100%;
	margin: 0 auto;
}

.i2_tit {
	width: 100%;
	text-align: center;
	margin-bottom: 45px;
}

	.i2_tit h1 {
		font-size: 40px;
		color: #000;
		font-weight: bold;
	}

.i2_content {
	width: 100%;
	margin: 0 auto;
}

	.i2_content .ul2 {
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

		.i2_content .ul2 li {
			width: 49%;
			margin-bottom: 30px;
		}

			.i2_content .ul2 li a {
				display: block;
				width: 100%;
			}

				.i2_content .ul2 li a .imgbox {
					width: 100%;
					font-size: 0;
				}

					.i2_content .ul2 li a .imgbox img {
						width: 100%;
					}

				.i2_content .ul2 li a h3 {
					text-align: center;
					font-size: 24px;
					color: #000000;
					font-weight: 600;
					margin-top: 0.75rem;
				}

	.i2_content .ul3 {
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
	}

		.i2_content .ul3 li {
			width: 32%;
			margin-bottom: 30px;
			margin-right: 2%;
		}

			.i2_content .ul3 li:nth-child(3n) {
				margin-right: 0;
			}

			.i2_content .ul3 li a {
				display: block;
				width: 100%;
			}

				.i2_content .ul3 li a .imgbox {
					width: 100%;
					font-size: 0;
				}

					.i2_content .ul3 li a .imgbox img {
						width: 100%;
					}

				.i2_content .ul3 li a h3 {
					text-align: center;
					font-size: 24px;
					color: #000000;
					font-weight: 600;
				}




/*  */
.about1box {
	width: 100%;
	margin: 0 auto;
	margin-top: 300px;
	margin-bottom: 300px;
	overflow: hidden;
}

.about1 {
	margin-left: 14vw;
	max-width: 100%;
}

	.about1 h3 {
		font-size: 37px;
		color: #222;
		font-weight: 600;
		max-width: 1200px;
	}

	.about1 .desc {
		font-size: 18px;
		color: #374151;
		line-height: 2em;
		max-width: 1200px;
		margin-top: 12px;
	}

.a1_content {
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	margin-top: 7vw;
	margin-left: 14vw;
}

	.a1_content .bd {
		width: 100%;
	}

	.a1_content ul {
		overflow: hidden;
		zoom: 1;
	}

		.a1_content ul li {
			display: inline;
			overflow: hidden;
			text-align: center;
			font-size: 0;
			width: 300px;
		}

			.a1_content ul li img {
				width: 300px;
				display: block;
			}




.about2box {
	width: 100%;
	margin: 0 auto;
}

.about2 {
	width: 100%;
	margin: 0 auto;
}

.a2_tit {
}

	.a2_tit h3 {
		display: flex;
		align-items: center;
		font-size: 18px;
		color: #222;
		font-weight: 600;
	}

		.a2_tit h3 span {
			margin-right: 16px;
			display: inline-block;
			width: 32px;
			background: #1e3a8a;
			height: 2px;
		}

.a2_content {
	width: 100%;
	margin: 0 auto;
}

	.a2_content h3 {
		font-size: 37.5px;
		color: #222;
		font-weight: 600;
		margin-top: 12.5px;
	}

	.a2_content .desc {
		margin-top: 12px;
		font-size: 18px;
		color: #374151;
		line-height: 2em
	}

	.a2_content .imgbox {
		width: 100%;
		font-size: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}




.about3box {
	width: 100%;
	margin: 0 auto;
	margin-top: 80px
}

.about3 {
	width: 100%;
	margin: 0 auto;
}

.a3_tit {
	width: 100%;
	margin: 0 auto;
	margin-bottom: 20px;
	text-align: center;
}

	.a3_tit h1 {
		font-size: 36px;
		color: #333;
		font-weight: bold;
	}

.a3_content {
	width: 100%;
	margin: 0 auto;
	margin-top: 32px;
}

	.a3_content ul {
		display: flex;
		flex-wrap: wrap;
	}

		.a3_content ul li {
			width: 33.33%;
			position: relative;
		}

			.a3_content ul li:hover {
				opacity: 0.8;
			}

			.a3_content ul li a {
				display: block;
				width: 100%;
				font-size: 0;
			}

				.a3_content ul li a img {
					width: 100%;
				}





/*  */
.productbox {
	width: 100%;
	margin: 0 auto;
}

.product {
	width: 100%;
	margin: 0 auto;
}

.px {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	margin-bottom: 20px;
}

	.px .inner {
		position: relative;
		cursor: pointer;
	}

		.px .inner h3 {
			font-size: 14px;
			color: #333;
			padding: 10px 0;
		}

			.px .inner h3 i {
				color: #6b7280;
				margin-left: 10px;
			}

		.px .inner ul {
			position: absolute;
			right: 0;
			top: 100%;
			z-index: 999;
			background: #fff;
			width: 160px;
			border-radius: 6px;
			box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
			padding: 4px 0;
			border: 1px solid #e5e7eb;
			opacity: 0;
			visibility: hidden;
		}

		.px .inner:hover ul {
			opacity: 1;
			visibility: visible;
		}

		.px .inner ul li {
			padding: 8px 16px;
		}

			.px .inner ul li a {
				font-size: 14px;
				color: #6b7280;
			}

			.px .inner ul li.curr a {
				color: #111827;
			}

			.px .inner ul li:hover {
				background: #efefef;
			}

.prolist {
	width: 100%;
	margin: 0 auto;
}

	.prolist ul {
		display: flex;
		flex-wrap: wrap;
	}

		.prolist ul li {
			width: 32%;
			margin-right: 2%;
			margin-bottom: 20px;
			border-radius: 8px;
			overflow: hidden;
		}

			.prolist ul li:nth-child(3n) {
				margin-right: 0;
			}

			.prolist ul li a {
				display: block;
				width: 100%;
				border: 1px solid #e5e7eb;
			}

				.prolist ul li a .imgbox {
					width: 100%;
					font-size: 0;
					overflow: hidden;
				}

					.prolist ul li a .imgbox img {
						width: 100%;
						transition: all 0.5s;
					}

			.prolist ul li:hover a .imgbox img {
				transform: scale(1.1);
			}

			.prolist ul li a h3 {
				text-align: center;
				padding: 16px;
				font-size: 16px;
				color: #111827;
			}



/*  */
.detailbanner {
	width: 100%;
	margin: 0 auto;
	padding: 192px 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	text-align: center;
}

	.detailbanner h3 {
		font-size: 36px;
		color: #fff;
		font-weight: bold;
		letter-spacing: 5px;
	}


.innerlistbox {
	width: 100%;
	margin: 0 auto;
}

.innerlist {
	width: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.weizhi {
	display: flex;
	align-items: center;
	width: 30%;
}

	.weizhi a {
		font-size: 14px;
		color: #6b7280;
	}

	.weizhi span {
		font-size: 16px;
		color: #d1d5db;
		padding: 0 10px;
	}

.menuinner {
	display: flex;
	align-items: center;
}

	.menuinner .list ul {
		display: flex;
		align-items: center;
	}

		.menuinner .list ul li a {
			line-height: 80px;
			padding: 10px 16px;
			display: inline-block;
			font-size: 16px;
			color: #555d65;
		}

		.menuinner .list ul li.curr a {
			background: #686B6D !important;
			color: #fff;
		}

	.menuinner .more {
		position: relative;
		display: flex;
		align-items: center;
		line-height: 80px;
		padding: 10px 16px;
		font-size: 16px;
		color: #555d65;
		cursor: pointer;
	}

		.menuinner .more:hover {
			background: #686B6D;
			color: #fff;
		}

		.menuinner .more h3 i {
			margin-left: 10px;
		}

		.menuinner .more ul {
			position: absolute;
			right: 0;
			width: 224px;
			border-radius: 12px;
			background: #fff;
			z-index: 999;
			padding: 8px;
			opacity: 1;
			visibility: hidden;
			z-index: 99;
			top: 100%;
		}

		.menuinner .more:hover ul {
			opacity: 1;
			visibility: visible;
		}

		.menuinner .more ul li {
			padding: 4px 12px;
			font-size: 14px;
			color: #000;
			border-radius: 12px;
			line-height: 28px;
			width: 100%;
		}

			.menuinner .more ul li:hover {
				background: rgb(243 244 246);
			}

			.menuinner .more ul li span {
				padding: 0 12px;
				font-size: 10px;
				font-weight: 700;
				letter-spacing: 1px;
			}








/* ========== 全局 ========== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "";
	background: #fff;
	padding: 40px 0 0 0;
	color: #333;
}

/* ========== 整体布局 ========== */
.gallery-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	width: fit-content;
	position: relative;
}

/* ========== 左侧缩略图区 ========== */
.thumb-area {
	position: relative;
	width: 102px;
	height: 460px;
	flex-shrink: 0;
	object-fit: contain;
}

.thumb-swiper {
	width: 100%;
	height: 100%;
}

	.thumb-swiper .swiper-slide {
		height: 90px;
		width: 100%;
		border: 1px solid #d9dee3;
		background: #fff;
		cursor: pointer;
		opacity: 1;
		transition: border-color 0.2s;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

		.thumb-swiper .swiper-slide img {
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
		}

	/* 当前激活的缩略图：虚线高亮边框 */
	.thumb-swiper .swiper-slide-thumb-active {
		border: 1px dashed #333;
	}

.thumb-nav {
	position: absolute;
	left: 0;
	width: 100%;
	height: 26px;
	line-height: 24px;
	text-align: center;
	background: #fff;
	border: 1px solid #d9dee3;
	color: #999;
	font-size: 18px;
	cursor: pointer;
	user-select: none;
	z-index: 5;
	transition: color 0.2s;
}

	.thumb-nav:hover {
		color: #333;
	}

.thumb-nav-prev {
	top: -34px;
}

.thumb-nav-next {
	bottom: -34px;
}

/* ========== 中间主图区 ========== */
.main-area {
	position: relative;
	width: 545px;
	height: 545px;
	background: #fff;
	overflow: hidden;
	cursor: crosshair;
}

.main-swiper {
	width: 100%;
	height: 100%;
}

	.main-swiper .swiper-slide img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		background: #fff;
		user-select: none;
		-webkit-user-drag: none;
	}

/* 主图左右切换按钮 */
.main-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 48px;
	line-height: 46px;
	text-align: center;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid #e3e6ea;
	color: #999;
	font-size: 20px;
	cursor: pointer;
	user-select: none;
	z-index: 10;
	transition: color 0.2s;
}

	.main-nav:hover {
		color: #333;
	}

.main-nav-prev {
	left: 8px;
}

.main-nav-next {
	right: 8px;
}

/* 右下角放大镜图标 */
.zoom-icon {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 24px;
	height: 24px;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	pointer-events: none;
	transition: opacity 0.2s;
}

/* 悬停时隐藏放大镜小图标 */
.main-area:hover .zoom-icon {
	opacity: 0;
}

/* ========== 右侧放大镜面板（默认隐藏） ========== */
.zoom-panel {
	display: none;
	width: 460px;
	height: 460px;
	background: #fff;
	border: 1px solid #e3e6ea;
	overflow: hidden;
	position: relative;
	flex-shrink: 0;
}

	.zoom-panel.is-visible {
		display: block;
	}

/* 放大层：背景图由 JS 控制，默认 2 倍放大 */
.zoom-panel-inner {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-size: 920px 920px; /* 460 * 2 倍放大 */
	background-position: 0 0;
	pointer-events: none;
}

/* ========== 半透明遮罩镜头（跟随鼠标） ========== */
.zoom-lens {
	position: absolute;
	background: rgba(255, 255, 200, 0.45);
	border: 1px solid rgba(0, 0, 0, 0.15);
	pointer-events: none;
	z-index: 15;
	display: none;
}

/* ========== 商品名称（主图右上侧） ========== */
.detail1 {
	position: relative;
}

.product-name {
	position: absolute;
	top: 0;
	left: 725px; /* 90(缩略图) + 10(间距) + 460(主图) + 20 */
	font-size: 30px;
	color: #4c5664;
	white-space: nowrap;
	transition: opacity 0.2s;
}

/* 鼠标悬停主图区域（放大镜显示时）隐藏标题 */
.gallery-wrapper:hover ~ .product-name {
	opacity: 0;
}

/* ============================================================
   布局断点（<= 1080px）：三列放不下时改为纵向堆叠
   主图 -> 放大面板 -> 缩略图（面板始终在视口内，不会跑到屏幕外）
   ============================================================ */
@media (max-width: 1080px) {
	body {
		padding: 16px;
	}

	.page {
		width: 100%;
	}

	/* 顺序：主图 -> 放大面板 -> 缩略图 */
	.gallery-wrapper {
		flex-direction: column;
		width: 100%;
		gap: 10px;
		position: relative;
		z-index: 2;
	}

	/* 进入放大模式后禁止页面滚动 / Swiper 拖动，手指只用来移动镜头 */
	.main-area.is-zooming {
		touch-action: none;
	}

	.main-area {
		order: 1;
	}

	.zoom-panel {
		order: 2;
	}

	.thumb-area {
		order: 3;
	}

	/* 主图：宽度自适应，保持 1:1 比例，最大不超过桌面尺寸 */
	.main-area {
		width: 100%;
		max-width: 460px;
		height: auto;
		aspect-ratio: 1 / 1;
		cursor: default;
	}

	/* ---- 放大面板：宽度自适应，保持 1:1 ---- */
	.zoom-panel {
		display: none;
		width: 100%;
		max-width: 460px;
		height: auto;
		aspect-ratio: 1 / 1;
	}

		.zoom-panel.is-visible {
			display: block;
		}

	/* 放大模式下的操作提示（触屏用） */
	.main-area.is-zooming::after {
		content: "拖动图片查看放大细节，再点右下角图标退出";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		padding: 6px 8px;
		font-size: 12px;
		line-height: 1.4;
		color: #fff;
		background: rgba(0, 0, 0, 0.45);
		text-align: center;
		z-index: 16;
		pointer-events: none;
	}

	/* 缩略图：横向条 */
	.thumb-area {
		width: 100%;
		max-width: 460px;
		height: 76px;
	}

	.thumb-swiper .swiper-slide {
		width: 76px;
		height: 76px;
	}

	/* 缩略图竖向箭头在堆叠布局下无意义，隐藏 */
	.thumb-nav {
		display: none;
	}

	.main-nav {
		width: 24px;
		height: 40px;
		line-height: 38px;
		font-size: 18px;
	}

	/* 商品名改为普通文档流 */
	.product-name {
		position: static;
		margin-top: 14px;
		font-size: 18px;
	}

	.gallery-wrapper:hover ~ .product-name {
		opacity: 1;
	}
}

/* ============================================================
   触屏设备（无鼠标悬停能力）：放大镜图标变成常显的开关按钮
   交互：点图标进入/退出放大模式，拖动手指移动镜头
   ============================================================ */
@media (hover: none), (pointer: coarse) {
	.main-area,
	.main-area:hover {
		cursor: pointer;
	}

		.zoom-icon,
		.main-area:hover .zoom-icon {
			display: flex;
			width: 32px;
			height: 32px;
			background: rgba(0, 0, 0, 0.4);
			pointer-events: auto;
			cursor: pointer;
			opacity: 1; /* 触屏常显，充当开关按钮 */
		}

			/* 放大模式激活时图标高亮 */
			.zoom-icon.is-active {
				background: #333;
			}

			.zoom-icon svg {
				width: 16px;
				height: 16px;
			}
}








.detail2box {
	width: 100%;
	margin: 0 auto;
}

.detail2 {
	width: 100%;
	margin: 0 auto;
}

.d2_tab {
	width: 100%;
	margin: 0 auto;
	border-bottom: 1px solid #e5e7eb;
}

	.d2_tab ul {
		display: flex;
		align-items: center;
	}

		.d2_tab ul li {
			padding: 16px 4px;
			font-size: 14px;
			color: #6b7280;
			margin-right: 32px;
			border-bottom: 2px solid transparent;
			cursor: pointer;
		}

			.d2_tab ul li:hover {
				border-bottom: 2px solid #374151;
			}

			.d2_tab ul li span {
			}

			.d2_tab ul li.on {
				border-bottom: 2px solid #6b7280;
			}

.d2_box {
	width: 100%;
	margin: 0 auto;
}

	.d2_box ul li {
		width: 100%;
	}

		.d2_box ul li .inner {
			width: 100%;
			padding: 20px 0;
		}

.d2_form {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

	.d2_form .item {
		width: 49%;
		margin-bottom: 20px;
	}

		.d2_form .item h3 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 14px;
			color: #1c1917;
			margin-bottom: 5px;
		}

			.d2_form .item h3 span {
				font-size: 14px;
				color: #78716c;
			}

		.d2_form .item .d2_text {
			width: 100%;
			padding: 12px 16px;
			background: #fff;
			border: 1px solid #d6d3d1;
			border-radius: 5px;
			box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
		}

		.d2_form .item textarea {
			width: 100%;
			padding: 12px 16px;
			background: #fff;
			border: 1px solid #d6d3d1;
			border-radius: 5px;
			box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
		}

.d2_btn {
	width: 100%;
	display: flex;
	justify-content: flex-end;
}

	.d2_btn button {
		padding: 12px 24px;
		background: #686b6d;
		border-radius: 5px;
		font-size: 16px;
		color: #fff;
		font-weight: 600;
	}






.detail3box {
	width: 100%;
	margin: 0 auto;
}

.detail3 {
	width: 100%;
	margin: 0 auto;
}

.d3_tit {
	width: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

	.d3_tit h3 {
		font-size: 18px;
		color: #111827;
	}

	.d3_tit a {
		font-size: 14px;
		color: #6b7280;
	}

.d3_content {
	width: 100%;
	margin: 0 auto;
}

	.d3_content ul {
		display: flex;
		flex-wrap: wrap;
	}

		.d3_content ul li {
			width: 23.5%;
			margin-right: 2%;
			margin-bottom: 20px;
		}

			.d3_content ul li:nth-child(4n) {
				margin-right: 0;
			}

			.d3_content ul li a {
				display: block;
				width: 100%;
			}

				.d3_content ul li a .imgbox {
					width: 100%;
					position: relative;
					font-size: 0;
				}

					.d3_content ul li a .imgbox img {
						width: 100%;
					}

					.d3_content ul li a .imgbox span {
						position: absolute;
						left: 50%;
						width: 90%;
						bottom: 30px;
						background: #ffffffbf;
						transform: translateX(-50%);
						text-align: center;
						display: block;
						padding: 8px 0;
						font-size: 16px;
						color: #111827;
						z-index: 22;
						opacity: 0;
						visibility: hidden;
						transition: all 0.5s;
					}

			.d3_content ul li:hover a .imgbox span {
				opacity: 1;
				visibility: visible;
			}

			.d3_content ul li a .textbox {
				width: 100%;
				text-align: left;
				margin-top: 10px;
			}

				.d3_content ul li a .textbox h3 {
					font-size: 16px;
					color: #222;
				}

				.d3_content ul li a .textbox p {
					font-size: 14px;
					color: #6b7280;
				}





@media only screen and (max-width: 980px) {
	.headerbox {
		display: none;
	}

	.sp_header {
		display: flex;
	}

	.height {
		height: 70px;
	}

	.img_list2 ul li, .img_list3 ul li, .img_list4 ul li {
		width: 50%;
		margin-bottom: 15px;
	}

	.f_logo {
		width: 109%;
		margin-bottom: 20px;
	}

	.f_link {
		width: 100%;
		margin-bottom: 20px;
	}

	.f_contact {
		width: 100%;
	}

	.index1box a h3 {
		font-size: 24px;
	}

	.i2_tit h1 {
		font-size: 30px;
	}

	.i2_content .ul2 li a h3 {
		font-size: 20px;
	}

	.i2_content .ul3 li a h3 {
		font-size: 20px;
	}

	.prolist ul {
		justify-content: space-between;
	}

		.prolist ul li {
			width: 49%;
			margin-right: 0 !important;
		}

			.prolist ul li a h3 {
				padding: 8px;
				font-size: 14px;
			}

	.about1box {
		margin-top: 150px;
		margin-bottom: 150px;
	}

	.about1 h3 {
		font-size: 25px;
	}

	.about1 .desc {
		font-size: 16px;
	}

	.about1 {
		width: 100%px;
		margin: 0;
		padding: 0 15px;
	}

	.a1_content {
		width: 100%;
		margin: 0 auto;
		padding: 0 15px;
		margin-top: 100px;
	}

	.a2_content h3 {
		font-size: 25px;
	}

	.a2_content .desc {
		font-size: 16px;
	}

	.a3_tit h1 {
		font-size: 25px;
	}

	.a3_content ul li {
		width: 100%;
	}

	.weizhi {
		width: 100%;
		margin-bottom: 10px;
	}

	.menuinner {
		width: 100%;
	}

	.d3_content ul {
		justify-content: space-between;
	}

		.d3_content ul li {
			width: 49%;
		}

	.gallery-wrapper {
		width: 100%;
		margin-bottom: 20px;
	}

	.product-name {
		width: 100%;
	}

	.d2_form .item {
		width: 100%;
	}

	.innerlist {
		flex-wrap: wrap;
	}
}


@media only screen and (max-width: 680px) {
	.img_list2 ul li, .img_list3 ul li, .img_list4 ul li {
		width: 100%;
	}

	.i2_content .ul2 li {
		width: 100%;
		margin-right: 0;
	}

	.i2_content .ul3 li {
		width: 100%;
		margin-right: 0;
	}
}

/* 产品详情左右布局 */
.detail1box .detail1 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	width: 100%;
}

/* 左侧图片区域 */
.detail1box .gallery-wrapper {
	width: 100%;
	min-width: 0;
	gap: 16px;
	position: relative;
}

/* 左侧缩略图 */
.detail1box .thumb-area {
	width: 90px;
	flex-shrink: 0;
}

/* 主图自适应 */
.detail1box .main-area {
	width: auto;
	height: auto;
	aspect-ratio: 1 / 1;
	flex: 1;
	min-width: 0;
}

/* 右侧产品信息 */
.detail1box .detail-info {
	min-width: 0;
	width: 100%;
	padding-top: 0;
	text-align: left;
}

/* 产品标题 */
.detail1box .product-name {
	position: static;
	top: auto;
	left: auto;
	width: 100%;
	font-size: 30px;
	font-weight: 500;
	line-height: 1.4;
	color: #4c5664;
	white-space: normal;
	margin: 0 0 22px;
	opacity: 1;
}

/* 产品简介 */
.detail1box .product-desc {
	font-size: 16px;
	line-height: 1.55;
	color: #4c5664;
	overflow-wrap: anywhere;
}

	.detail1box .product-desc p {
		margin: 0;
		line-height: inherit;
	}

	.detail1box .product-desc strong,
	.detail1box .product-desc b {
		font-weight: 700;
	}

/* 放大镜不再挤压正常布局 */
@media (min-width: 1081px) {
	.detail1box .zoom-panel.is-visible {
		position: absolute;
		top: 0;
		left: calc(100% + 32px);
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		z-index: 20;
	}

	.detail1box .gallery-wrapper:hover ~ .detail-info .product-name {
		opacity: 1;
	}
}

/* 平板及手机 */
@media (max-width: 1080px) {
	.detail1box .detail1 {
		display: block;
	}

	.detail1box .gallery-wrapper {
		width: 100%;
	}

	.detail1box .main-area {
		width: 100%;
		max-width: 460px;
		flex: none;
	}

	.detail1box .detail-info {
		margin-top: 25px;
	}

	.detail1box .product-name {
		font-size: 24px;
		margin-bottom: 15px;
	}

	.detail1box .product-desc {
		font-size: 15px;
		line-height: 1.7;
	}
}

/* 产品文字区域 */
.prolist ul li a .pro-text {
	padding: 15px 16px;
	text-align: left;
}

	/* 产品名称：一行省略 */
	.prolist ul li a .pro-text h3 {
		padding: 0;
		margin: 0 0 8px;
		font-size: 14px;
		font-weight: 700;
		color: #374151;
		line-height: 1.6;
		text-align: left;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

/* 产品描述：两行省略 */
.prolist ul li a .pro-desc {
	font-size: 14px;
	font-weight: 400;
	color: #6b7280;
	line-height: 1.5;
	text-align: left;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	overflow-wrap: anywhere;
}

	/* 英文加粗标记 */
	.prolist ul li a .pro-desc strong {
		font-weight: 700;
	}