/* ========== 页面基础样式 ========== */
.en-page .page-product .lists .item .name {
	letter-spacing: 0
}

.page-product .lists {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	padding-top: 0.80rem;
	padding-bottom: 1.20rem;
	margin: 0 auto;
	gap: 0.80rem 0.7rem;
	box-sizing: border-box
}

.page-product .lists .item {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	background-image: linear-gradient(-21deg,#ffffff 56%,rgba(22,155,255,0.6) 100%);
	border: 2px solid #e8f4ff;
	box-shadow: 0 0 0.20rem 0 rgba(22,155,255,0.1);
	border-radius: 0.30rem;
	padding: 0.20rem 0.20rem;
	text-align: center;
	box-sizing: border-box;
	margin-right: 0;
	width: calc((100% - 1.4rem) / 3);
	position: relative
}

.page-product .lists .item:hover {
	box-shadow: 0 0 0.3rem 0 rgba(22,155,255,0.2);
	border-color: #207efe
}

.page-product .lists .item .img-hover-zoom:hover img {
	transition: transform 0.3s ease;
	transform: scale(1.08)
}

.page-product .lists .item .text-wrap {
	width: 100%;
	margin: 0 auto;
	text-align: left;
	position: relative;
	padding-right: 1.0rem;
	box-sizing: border-box
}

.page-product .lists .item .img-container {
	position: relative;
	display: block;
	width: 100%;
	margin-bottom: 0.15rem
}

.page-product .lists .item img {
	width: 100%;
	max-height: 3.0rem;
	object-fit: contain;
	object-position: center;
	margin: 0 auto
}

.page-product .lists .item .img-label {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 1.0rem;
	height: 1.0rem;
	background-color: transparent;
	padding: 5px;
	border-radius: 0;
	font-size: 0;
	z-index: 10
}

.page-product .lists .item .img-label img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	margin: 0;
	max-height: none;
	border-radius: 0.2rem
}

.page-product .lists .item .name {
	font-size: 0.20rem;
	font-weight: 600;
	height: 45px;
	color: #000;
	line-height: 1.2;
	letter-spacing: 0.01rem;
	margin: 0 0 0.25rem 0;
	transform: none;
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical
}

.page-product .lists .item .desc {
	font-size: 0.14rem;
	color: #555;
	line-height: 1.5;
	letter-spacing: 0.005rem;
	margin: 0 0 0.20rem 0;
	transform: none;
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical
}

.page-product .lists .item .service-tags {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.3rem;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 0.15rem;
	border-top: 1px solid #e8f4ff;
	width: 100%
}

.page-product .lists .item .service-tags span {
	display: flex;
	align-items: flex-start;
	gap: 0.05rem;
	font-size: 0.13rem;
	color: #666;
	max-width: 100px;
	white-space: normal;
	word-wrap: break-word;
	word-break: break-all
}

.page-product .lists .item .service-tags span::before {
	content: "";
	display: inline-block;
	width: 0.16rem;
	height: 0.16rem;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	flex-shrink: 0
}

.page-product .lists .item .service-tags span:nth-child(1)::before {
	background-image: url("../image/icon-custom.webp")
}

.page-product .lists .item .service-tags span:nth-child(2)::before {
	background-image: url("../image/icon-tech.webp")
}

.page-product .lists .item .service-tags span:nth-child(3)::before {
	background-image: url("../image/icon-service.webp")
}

.page-product .lists .item .m {
	color: #fff;
	font-size: 0.16rem;
	text-transform: uppercase;
	margin: 0.20rem auto 0;
	font-family: "source-serif";
	letter-spacing: 2px;
	background-color: #207efe;
	box-shadow: 0 0 0.10rem 0 rgba(214,214,214,0.5);
	line-height: 0.36rem;
	width: 1.20rem;
	border-radius: 0.18rem;
	opacity: 0;
	transform: translateY(80%);
	transition: all 0.25s
}

.page-product .lists .item:hover .m {
	transform: translateY(0);
	opacity: 1
}

@media only screen and (max-width:1024px) {
	.page-product .lists {
		gap: 0.8rem 0.6rem;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		box-sizing: border-box
	}

	.page-product .lists .item {
		width: calc((100% - 0.6rem) / 2);
		padding: 0.4rem 0.3rem;
		border-radius: 0.25rem
	}

	.page-product .lists .item img {
		max-height: 3.2rem
	}

	.page-product .lists .item .name {
		font-size: 0.22rem;
		height: 50px;
		line-height: 1.3;
		margin-bottom: 0.3rem
	}

	.page-product .lists .item .desc {
		font-size: 0.16rem;
		line-height: 1.6;
		margin-bottom: 0.25rem
	}

	.page-product .lists .item .text-wrap {
		padding-right: 0.8rem
	}

	.page-product .lists .item .img-label {
		width: 0.8rem;
		height: 0.8rem;
		right: 0;
		top: 50%;
		transform: translateY(-50%)
	}

	.page-product .lists .item .service-tags {
		gap: 0.4rem;
		padding-top: 0.2rem
	}

	.page-product .lists .item .service-tags span {
		font-size: 0.15rem
	}

	.page-product .lists .item .service-tags span::before {
		width: 0.17rem;
		height: 0.17rem
	}

	.page-product .lists .item .m {
		font-size: 0.15rem;
		line-height: 0.38rem;
		width: 1.3rem;
		border-radius: 0.19rem
	}
}

@media only screen and (max-width:768px) {
	.page-product .lists {
		display: grid;
		grid-template-columns: 1fr;
		padding-top: 30px;
		padding-bottom: 40px;
		gap: 20px;
		justify-items: center;
		align-items: flex-start
	}

	.page-product .lists .item {
		width: 100%;
		padding: 20px 16px;
		border-radius: 10px
	}

	.page-product .lists .item img {
		max-height: 300px
	}

	.page-product .lists .item .name {
		font-size: 18px
	}

	.page-product .lists .item .desc {
		font-size: 14px;
		line-height: 1.6
	}

	.page-product .lists .item .text-wrap {
		padding-right: 110px
	}

	.page-product .lists .item .img-label {
		width: 100px;
		height: 100px;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		font-size: 0
	}

	.page-product .lists .item .m {
		font-size: 10px;
		transform: none;
		opacity: 1;
		line-height: 20px;
		width: 60px;
		border-radius: 20px
	}

	.page-product .lists .item .service-tags {
		padding-top: 20px;
		gap: 40px
	}

	.page-product .lists .item .service-tags span {
		font-size: 12px
	}

	.page-product .lists .item .service-tags span::before {
		width: 14px;
		height: 14px
	}
}

.page-product .details .flex-t-b {
	display: flex;
	align-items: flex-start;
	gap: 0.60rem;
	margin-bottom: 0.26rem
}

@media only screen and (max-width:768px) {
	.page-product .details .flex-t-b {
		display: block;
		padding: 0 0.2rem
	}
}

.page-product .details .flex-p-c {
	display: flex;
	align-items: flex-start;
	gap: 0.60rem;
	margin-bottom: 0.26rem
}

@media only screen and (max-width:640px) {
	.page-product .details .flex-p-c {
		display: block;
		padding: 0 0.2rem
	}
}

.page-product .details .flex-t-b .img-box {
	max-width: 7.80rem;
	max-height: 7.80rem;
	width: auto;
	height: auto;
	object-fit: scale-down;
	display: block;
	margin-bottom: 0.5rem
}

@media only screen and (max-width:768px) {
	.page-product .details .flex-t-b .img-box {
		width: 100%;
		height: auto;
		max-width: 100%;
		margin-bottom: 1rem;
		max-height: none
	}
}

.page-product .details .flex-t-b .img-box .slider-for {
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: 6rem;
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid #e0e0e0;
	border-radius: 0.12rem;
	position: relative;
	box-sizing: border-box;
	background-image: linear-gradient(337deg,#fffdfdba 46%,#169bffe3 100%)
}

@media only screen and (max-width:768px) {
	.page-product .details .flex-t-b .img-box .slider-for {
		height: auto!important;
		min-height: 9rem;
		box-sizing: border-box;
		padding: 0
	}
}

.page-product .details .flex-t-b .img-box .slider-for img {
	width: 100%;
	height: 100%;
	object-fit: contain!important;
	object-position: center;
	border-radius: 0.10rem
}

.page-product .details .flex-t-b .img-box .slider-nav {
	width: 100%;
	max-width: 100%;
	margin: 0.15rem auto 0;
	position: relative;
	padding: 0 0.50rem
}

@media only screen and (max-width:640px) {
	.page-product .details .flex-t-b .img-box .slider-nav {
	}
}

.page-product .details .flex-t-b .img-box .slider-nav .slick-slide {
	width: 1.50rem;
	height: 1.00rem;
	min-height: 80px;
	opacity: 0.7;
	border: 2px solid #e0e0e0;
	border-radius: 0.08rem;
	box-sizing: border-box;
	padding: 0.02rem;
	margin: 0 0.05rem
}

.page-product .details .flex-t-b .img-box .slider-nav .slick-center {
	opacity: 1;
	border-color: #4285f4
}

.page-product .details .flex-t-b .img-box .slider-nav img {
	width: 100%;
	height: 100%;
	object-fit: contain!important;
	object-position: center;
	border-radius: 0.06rem
}

.page-product .details .slider-nav .slick-prev,.page-product .details .slider-nav .slick-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 0.27rem;
	height: 0.94rem;
	border-radius: 0.08rem;
	background: #f8f9fa;
	border: 1px solid #e0e0e0;
	box-shadow: 0 0.02rem 0.08rem rgba(0,0,0,0.1);
	cursor: pointer;
	outline: none;
	transition: all 0.3s ease
}

.page-product .details .slider-nav .slick-prev {
	left: 0
}

.page-product .details .slider-nav .slick-next {
	right: 0
}

.page-product .details .slider-nav .slick-prev::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 52%;
	width: 0.18rem;
	height: 0.18rem;
	border: solid #444;
	border-width: 0 2px 2px 0;
	transform: translate(-50%,-50%) rotate(135deg);
	transition: all 0.3s ease
}

.page-product .details .slider-nav .slick-next::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 48%;
	width: 0.18rem;
	height: 0.18rem;
	border: solid #444;
	border-width: 0 2px 2px 0;
	transform: translate(-50%,-50%) rotate(-45deg);
	transition: all 0.3s ease
}

.page-product .details .slider-nav .slick-prev:hover,.page-product .details .slider-nav .slick-next:hover {
	background: #4285f4;
	border-color: #4285f4;
	box-shadow: 0 0.04rem 0.12rem rgba(66,133,244,0.3);
	transform: translateY(-50%) scale(1.05)
}

.page-product .details .slider-nav .slick-prev:hover::before,.page-product .details .slider-nav .slick-next:hover::before {
	border-color: #fff
}

.page-product .details .slider-nav .slick-disabled {
	opacity: 0.4;
	cursor: not-allowed
}

.page-product .details .slider-nav .slick-disabled:hover {
	background: #f8f9fa;
	border-color: #e0e0e0;
	box-shadow: 0 0.02rem 0.08rem rgba(0,0,0,0.1);
	transform: translateY(-50%) scale(1)
}

.page-product .details .slider-nav .slick-disabled:hover::before {
	border-color: #999
}

@media only screen and (max-width:640px) {
	.page-product .details .slider-nav {
		padding: 0 0.40rem
	}

	.page-product .details .slider-nav .slick-prev,.page-product .details .slider-nav .slick-next {
		width: 0.35rem;
		height: 0.70rem
	}

	.page-product .details .slider-nav .slick-prev::before,.page-product .details .slider-nav .slick-next::before {
		width: 0.15rem;
		height: 0.15rem
	}
}

.page-product .details .flex-t-b .part {
	flex: auto;
	width: 45%;
	padding-left: 0.60rem;
	padding-top: 0.40rem;
	overflow: hidden;
	box-sizing: border-box;
	border-radius: 10px;
	background: #ffffffb3;
	box-shadow: 1px 2px 8px rgb(0 0 0 / 31%);
	transition: all 0.25s ease
}

.page-product .details .flex-t-b .part .t {
	font-size: 0.23rem;
	font-weight: 600;
	color: #111;
	line-height: 60px;
	width: calc(100% + 0.60rem);
	margin: -0.40rem 0 0.3rem -0.60rem;
	padding: 0 0 0 20px;
	border-left: 3px solid #2563eb;
	border-radius: 0;
	border-bottom: 1px solid #e5e7eb;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.page-product .details .flex-p-c .content,.page-product .details .flex-t-b .content {
	flex: auto;
	padding-left: 0.10rem;
	padding-right: 0.10rem;
	padding-top: 0.10rem;
	overflow: hidden;
	box-sizing: border-box;
	border-radius: 10px;
	background: #ffffffb3;
	box-shadow: 1px 2px 8px rgb(0 0 0 / 31%)
}

.page-product .details .flex-p-c .content .t,.page-product .details .flex-t-b .content .t {
	font-size: 0.28rem;
	font-weight: 600;
	color: #111;
	line-height: 0.6rem;
	width: calc(100% + 0.10rem);
	margin: -0.10rem 0 0.2rem -0.10rem;
	padding: 0 0 0 20px;
	border-left: 3px solid #2563eb;
	border-radius: 0;
	border-bottom: 1px solid #e5e7eb;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.page-product .details .flex-t-b .part .des,.page-product .details .flex-p-c .content .des,.page-product .details .flex-t-b .content .des {
	margin-bottom: 0.2rem;
	font-size: 0.16rem;
	color: #4b5563;
	line-height: 1.8;
	text-align: justify;
	padding-right: 0.30rem;
	box-sizing: border-box
}

.page-product .details .flex-p-c .content img,.page-product .details .flex-t-b .content img {
	width: 100%;
	height: auto;
	cursor: zoom-in
}

.image-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.9);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	cursor: zoom-out
}

.image-modal.show {
	display: flex
}

.image-modal img {
	max-width: 90%;
	max-height: 90%;
	object-fit: contain;
	transition: transform 0.3s ease
}

.modal-close {
	position: absolute;
	top: 20px;
	right: 20px;
	color: white;
	font-size: 30px;
	font-weight: bold;
	cursor: pointer;
	z-index: 10000
}

#modalPrev,#modalNext {
	transition: background 0.3s ease
}

#modalPrev:hover,#modalNext:hover {
	background: rgba(255,255,255,0.3)
}

#modalClose:hover {
	color: #ff4444
}

#imageModal.show {
	display: flex!important
}

.en-page .page-product .details .flex-t-b .part .des,.en-page .page-product .details .flex-p-c .content .des,.en-page .page-product .details .flex-t-b .content .des {
	font-size: 0.16rem;
	color: #4b5563;
	line-height: 1.8;
	text-align: justify;
	padding-right: 0.30rem;
	box-sizing: border-box
}

.page-product .details .flex-t-b .part .des p,.page-product .details .flex-p-c .content .des p,.page-product .details .flex-t-b .content .des p {
	white-space: pre-line;
	margin: 0
}

.page-product .details .flex-t-b .part .des p + p,.page-product .details .flex-p-c .content .des p + p,.page-product .details .flex-t-b .content .des p + p {
	margin-top: 0.25rem
}

@media only screen and (max-width:640px) {
	.page-product .details .flex-t-b .part,.page-product .details .flex-p-c .content .page-product .details .flex-t-b .content {
		padding: 0.3rem 0.2rem 0.2rem;
		width: 100%;
		margin-top: 0.3rem;
		box-shadow: 0 1px 6px rgba(0,0,0,0.03)
	}

	.page-product .details .flex-p-c .content img,.page-product .details .flex-t-b .content img {
		width: 100%;
		height: auto
	}

	.page-product .details .flex-t-b .part .t,.page-product .details .flex-p-c .content .t,.page-product .details .flex-t-b .content .t {
		letter-spacing: 0;
		font-size: 16px;
		text-align: center;
		line-height: 40px;
		padding: 0;
		width: calc(100% + 0.4rem);
		margin: -0.3rem -0.2rem 0.2rem -0.2rem;
		border-left: none;
		border-radius: 6px 6px 0 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis
	}

	.en-page .page-product .details .flex-t-b .part .des,.en-page .page-product .details .flex-p-c .content .des,.en-page .page-product .details .flex-t-b .content .des,.page-product .details .flex-t-b .part .des,.page-product .details .flex-p-c .content .des,.page-product .details .flex-t-b .content .des {
		margin-top: 0.2rem;
		font-size: 14px;
		line-height: 1.5;
		padding-right: 0.2rem;
		text-align: left
	}

	.page-product .details .flex-t-b .part:active,.page-product .details .flex-p-c .content:active,.page-product .details .flex-t-b .content:active {
		background: #f9fafb;
		box-shadow: 0 1px 3px rgba(0,0,0,0.05)
	}
}

.page-product .details .flex-p-c .content .table,.page-product .details .flex-t-b .content .table {
	display: flex;
	border-radius: 6px;
	background-color: #eaf8ff;
	padding: 0.30rem 0;
	text-align: center;
	margin-top: 1.00rem
}

@media only screen and (max-width:640px) {
	.page-product .details .flex-p-c .content .table,.page-product .details .flex-t-b .content .table {
		flex-direction: column;
		margin-top: 0.3rem;
		border-radius: 8px;
		padding: 0.2rem
	}
}

.page-product .details .flex-p-c .content .table .item,.page-product .details .flex-t-b .content .table .item {
	flex: 1;
	line-height: 1
}

@media only screen and (max-width:640px) {
	.page-product .details .flex-p-c .content .table .item,.page-product .details .flex-t-b .content .table .item {
		display: flex;
		padding: 0.15rem 0.1rem;
		align-items: center
	}
}

.page-product .details .flex-p-c .content .table .item .n,.page-product .details .flex-t-b .content .table .item .n {
	font-size: 16px;
	font-weight: bold;
	color: #207efe
}

@media only screen and (max-width:640px) {
	.page-product .details .flex-p-c .content .table .item .n,.page-product .details .flex-t-b .content .table .item .n {
		font-size: 13px
	}
}

.page-product .details .flex-p-c .content .table .item .v,.page-product .details .flex-t-b .content .table .item .v {
	font-size: 14px;
	color: #5c5c5c;
	margin-top: 0.20rem
}

@media only screen and (max-width:640px) {
	.page-product .details .flex-p-c .content .table .item .v,.page-product .details .flex-t-b .content .table .item .v {
		margin-top: 0;
		margin-left: 0.1rem;
		font-size: 13px
	}
}

.page-product .details .flex-p-c .content .table .item + .item,.page-product .details .flex-t-b .content .table .item + .item {
	border-left: 1px solid #eee
}

@media only screen and (max-width:640px) {
	.page-product .details .flex-p-c .content .table .item + .item,.page-product .details .flex-t-b .content .table .item + .item {
		border-left: unset;
		border-top: 1px solid #eee
	}
}

.page-product .details .flex-p-c .content .stores,.page-product .details .flex-t-b .content .stores {
	margin-top: 0.36rem;
	border-top: 1px solid #eee;
	padding-top: 0.46rem
}

@media only screen and (max-width:640px) {
	.page-product .details .flex-p-c .content .stores,.page-product .details .flex-t-b .content .stores {
		margin-top: 0.2rem;
		border-top: unset;
		padding-top: 0
	}
}

.page-product .details .flex-p-c .content .stores .n,.page-product .details .flex-t-b .content .stores .n {
	font-size: 0.20rem;
	font-weight: 600;
	color: #111
}

@media only screen and (max-width:640px) {
	.page-product .details .flex-p-c .content .stores .n,.page-product .details .flex-t-b .content .stores .n {
		font-size: 14px;
		text-align: center;
		margin-bottom: 0.15rem
	}
}

.page-product .details .flex-p-c .content .stores .links,.page-product .details .flex-t-b .content .stores .links {
	margin-top: 0.24rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem
}

@media only screen and (max-width:640px) {
	.page-product .details .flex-p-c .content .stores .links,.page-product .details .flex-t-b .content .stores .links {
		justify-content: center;
		margin-top: 0.15rem
	}
}

.page-product .details .flex-p-c .content .stores .links a,.page-product .details .flex-t-b .content .stores .links a {
	display: flex;
	width: 2.20rem;
	height: 0.60rem;
	border-radius: 0.60rem;
	border: 1px solid #979797;
	justify-content: center;
	align-items: center;
	font-size: 0.20rem;
	font-weight: 600;
	color: #111;
	letter-spacing: 1px
}

@media only screen and (max-width:640px) {
	.page-product .details .flex-p-c .content .stores .links a,.page-product .details .flex-t-b .content .stores .links a {
		width: 130px;
		height: 35px;
		letter-spacing: 0;
		border-radius: 35px;
		font-size: 12px
	}
}

.page-product .details .flex-p-c .content .stores .links a img,.page-product .details .flex-t-b .content .stores .links a img {
	height: 0.34rem;
	margin-right: 0.10rem
}

@media only screen and (max-width:640px) {
	.page-product .details .flex-p-c .content .stores .links a img,.page-product .details .flex-t-b .content .stores .links a img {
		height: 14px;
		margin-right: 4px
	}
}

.page-product .details .flex-p-c .content .stores .links a + a,.page-product .details .flex-t-b .content .stores .links a + a {
	margin-left: 0.24rem
}

@media only screen and (max-width:640px) {
	.page-product .details .flex-p-c .content .stores .links a + a,.page-product .details .flex-t-b .content .stores .links a + a {
		margin-left: 0
	}
}

.en-page .page-product .details .flex-t-b .content .t {
	letter-spacing: 0
}

.page-product .contact {
	border-top: 1px solid #eee;
	padding-top: 0.80rem;
	transition: all 0.25s ease
}

@media only screen and (max-width:1024px) {
	.page-product .contact {
		padding-top: 0.6rem;
		border-top: 1px solid #f0f0f0
	}
}

@media only screen and (max-width:640px) {
	.page-product .contact {
		border-top: unset;
		padding-top: 20px
	}
}

.page-product .contact .flex {
	display: flex;
	justify-content: center;
	transition: all 0.25s ease
}

@media only screen and (max-width:1024px) {
	.page-product .contact .flex {
		max-width: 90%;
		margin: 0 auto
	}
}

@media only screen and (max-width:640px) {
	.page-product .contact .flex {
		display: block;
		padding: 0 10px
	}
}

.page-product .contact .flex .item {
	text-align: center;
	padding: 0 0.90rem;
	transition: all 0.25s ease;
	overflow: hidden
}

@media only screen and (max-width:1024px) {
	.page-product .contact .flex .item {
		padding: 0 0.6rem
	}
}

@media only screen and (max-width:640px) {
	.page-product .contact .flex .item {
		padding: 0 5px
	}
}

.en-page .page-product .contact .flex .item .n {
	font-family: "source-serif";
	text-transform: uppercase;
	font-size: 14rpx
}

.page-product .contact .flex .item .n {
	font-weight: 500;
	font-size: 0.20rem;
	color: #111;
	transition: all 0.25s ease;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

@media only screen and (max-width:1024px) {
	.page-product .contact .flex .item .n {
		font-size: 0.18rem
	}
}

@media only screen and (max-width:640px) {
	.page-product .contact .flex .item .n {
		font-size: 14px
	}
}

.page-product .contact .flex .item .en {
	font-family: "source-serif";
	text-transform: uppercase;
	color: #bbbbbb;
	font-size: 14px;
	margin-top: 0.05rem;
	transition: all 0.25s ease
}

@media only screen and (max-width:1024px) {
	.page-product .contact .flex .item .en {
		font-size: 12px;
		margin-top: 0.04rem
	}
}

@media only screen and (max-width:640px) {
	.page-product .contact .flex .item .en {
		font-size: 12px;
		margin-top: 2px
	}
}

.page-product .contact .flex .item .phone {
	font-family: "DINPro";
	color: #222;
	font-size: 0.38rem;
	margin-top: 0.32rem;
	display: block;
	transition: all 0.25s ease;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer
}

.page-product .contact .flex .item .phone:hover {
	color: #207efe
}

@media only screen and (max-width:640px) {
	.page-product .contact .flex .item .phone:active {
		color: #169bff;
		transform: scale(0.98)
	}
}

@media only screen and (max-width:1024px) {
	.page-product .contact .flex .item .phone {
		font-size: 0.3rem;
		margin-top: 0.25rem
	}
}

@media only screen and (max-width:640px) {
	.page-product .contact .flex .item .phone {
		margin-top: 0;
		font-size: 30px
	}
}

.page-product .contact .flex .item .icons {
	display: flex;
	justify-content: center;
	margin-top: 0.26rem;
	font-size: 14px;
	transition: all 0.25s ease
}

@media only screen and (max-width:1024px) {
	.page-product .contact .flex .item .icons {
		margin-top: 0.2rem;
		font-size: 13px
	}
}

@media only screen and (max-width:640px) {
	.page-product .contact .flex .item .icons {
		margin-top: 10px;
		font-size: 12px
	}
}

.page-product .contact .flex .item .icons .icon {
	cursor: pointer;
	transition: all 0.25s ease
}

.page-product .contact .flex .item .icons .icon:hover {
	transform: translateY(-2px)
}

@media only screen and (max-width:640px) {
	.page-product .contact .flex .item .icons .icon:active {
		transform: translateY(0);
		opacity: 0.8
	}
}

.page-product .contact .flex .item .icons .icon img {
	width: 0.54rem;
	margin: 0 auto;
	display: block;
	transition: all 0.25s ease
}

@media only screen and (max-width:1024px) {
	.page-product .contact .flex .item .icons .icon img {
		width: 0.45rem
	}
}

@media only screen and (max-width:640px) {
	.page-product .contact .flex .item .icons .icon img {
		width: 40px
	}
}

.page-product .contact .flex .item .icons .icon p {
	margin-top: 0.10rem;
	transition: all 0.25s ease;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

@media only screen and (max-width:1024px) {
	.page-product .contact .flex .item .icons .icon p {
		margin-top: 0.08rem
	}
}

@media only screen and (max-width:640px) {
	.page-product .contact .flex .item .icons .icon p {
		margin-top: 6px
	}
}

.page-product .contact .flex .item .icons .icon + .icon {
	margin-left: 0.60rem;
	transition: all 0.25s ease
}

@media only screen and (max-width:1024px) {
	.page-product .contact .flex .item .icons .icon + .icon {
		margin-left: 0.4rem
	}
}

@media only screen and (max-width:640px) {
	.page-product .contact .flex .item .icons .icon + .icon {
		margin-left: 10px
	}
}

.page-product .contact .flex .item + .item {
	border-left: 1px solid #eee;
	transition: all 0.25s ease
}

@media only screen and (max-width:1024px) {
	.page-product .contact .flex .item + .item {
		border-left: 1px solid #f0f0f0
	}
}

@media only screen and (max-width:640px) {
	.page-product .contact .flex .item + .item {
		border-left: unset;
		border-top: 1px solid #eee;
		margin-top: 20px;
		padding-top: 20px
	}
}

.consult-module {
	background-color: var(--mid-blue);
	color: var(--white);
	border-radius: 12px;
	text-align: center;
	padding: 30px 0;
	margin-bottom: 30px
}

.consult-title {
	font-size: 24px;
	margin-bottom: 15px;
	font-weight: 600
}

.consult-desc {
	font-size: 16px;
	opacity: 0.9;
	margin-bottom: 30px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.5
}

.consult-form {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 15px;
	max-width: 800px;
	margin: 0 auto 20px;
	padding: 0 15px
}

.consult-input {
	padding: 12px 15px;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	color: var(--dark-gray);
	width: 100%;
	box-sizing: border-box;
	transition: border 0.3s
}

.consult-input:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(255,255,255,0.5)
}

.consult-btn {
	background-color: var(--accent-orange);
	color: var(--white);
	border: none;
	padding: 12px 20px;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s;
	grid-column: 1 / -1
}

.consult-btn:hover {
	background-color: #EA580C;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.1)
}

.consult-note {
	font-size: 12px;
	opacity: 0.8;
	margin: 0 15px
}

@media only screen and (max-width:1024px) {
	.consult-form {
		grid-template-columns: 1fr
	}
}

@media only screen and (max-width:640px) {
	.consult-module {
		padding: 25px 15px
	}

	.consult-title {
		font-size: 20px
	}

	.consult-desc {
		font-size: 14px
	}

	.verify-img {
		height: 40px
	}
}

.imageModal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.9);
	z-index: 9999;
	justify-content: center;
	align-items: center
}

.imageModal .modalClose {
	position: absolute;
	top: 20px;
	right: 30px;
	color: #fff;
	font-size: 36px;
	cursor: pointer;
	z-index: 10
}

.imageModal .modalPrev {
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,0.5);
	color: #fff;
	border: none;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	font-size: 24px;
	cursor: pointer;
	z-index: 10
}

.imageModal .modalNext {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,0.5);
	color: #fff;
	border: none;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	font-size: 24px;
	cursor: pointer;
	z-index: 10
}

.imageModal .modalImage {
	max-width: 90%;
	max-height: 90%;
	object-fit: contain
}

.tab-container {
	width: 100%;
	margin: 40px auto;
	font-family: "Microsoft Yahei",sans-serif
}

.tab-nav {
	display: flex;
	align-items: center;
	gap: 6px;
	background-color: #f8f9fa;
	padding: 8px 8px 0 8px;
	border-radius: 8px 8px 0 0;
	box-sizing: border-box
}

.tab-nav-item {
	padding: 12px 24px;
	cursor: pointer;
	color: #666;
	font-size: 16px;
	border-radius: 8px 8px 0 0;
	transition: all 0.25s ease;
	position: relative;
	user-select: none
}

.tab-nav-item:hover {
	background-color: #eef1ff;
	color: #2d5eff;
	transform: translateY(-1px)
}

.tab-nav-item.active {
	background-color: #0092ffb0;
	color: #ffffff;
	font-weight: 600;
	box-shadow: 0 -2px 0 0 #100d0d inset
}

.tab-panels {
	background-color: #fff;
	padding: 24px;
	border-radius: 0 8px 8px 8px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.05);
	border: 1px solid #eee;
	box-sizing: border-box
}

.tab-panel {
	display: none;
	font-size: 0.16rem;
	color: #333;
	line-height: 1.8
}

.tab-panel.active {
	display: block;
	animation: fadeIn 0.3s ease-out
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(8px)
	}

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

@media only screen and (max-width:768px) {
	.tab-nav {
		flex-wrap: wrap;
		padding: 4px 4px 0 4px
	}

	.page-product .details .flex-t-b .content .t,.tab-nav-item {
		flex: 1;
		text-align: center;
		padding: 10px 0;
		font-size: 13px
	}

	.tab-panels {
		padding: 16px
	}

	.page-product .details .flex-t-b .content .des,.tab-panel {
		font-size: 14px;
		line-height: 1.5
	}
}
/* ========== 表格固定列核心样式（修复宽度适配+竖向边框丢失） ========== */
/* 1. 表格容器样式：强制横向滚动（移除固定宽度，改为内容适配） */
.page-product .details .flex-p-c {
    width: 100%;
    overflow: hidden !important; /* 改为hidden，避免容器溢出 */
}
.page-product .details .flex-p-c .content {
    overflow-x: auto !important;
    padding-bottom: 0.2rem !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
    /* 移除固定width/max-width，让容器宽度跟随内容 */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. 表格基础样式：自动布局+最小宽度，宽度由内容撑开 */
.page-product .details .flex-p-c .content table {
    table-layout: auto !important; /* 改为auto，根据内容自动计算列宽 */
    width: 100% !important; /* 基础宽度100%，内容超出则自动变宽 */
    min-width: 650px !important; /* 保留最小宽度，保证移动端基础展示 */
    border-collapse: separate !important; /* 改为separate，兼容边框显示 */
    border-spacing: 0 !important; /* 消除单元格间距 */
    margin: 0 !important;
}

/* 3. 前2列固定样式（修复竖向边框+优化定位） */
/* 第一列：添加右侧黑色竖边框，z-index提升确保不被遮挡 */
.page-product .details .flex-p-c .content table > tbody > tr > td:nth-child(1),
.page-product .details .flex-p-c .content table > thead > tr > th:nth-child(1) {
    width: 112px !important;
    min-width: 100px !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 11 !important; /* 提升层级，高于第二列 */
    box-shadow: 2px 0 3px -1px rgba(0,0,0,0.1) !important;
    background: #fff !important;
    /* 核心：显式添加右侧竖向黑色边框 */
    border-right: 1px solid #000 !important; /* 黑色竖边框，可改为#ccc等浅色系 */
    box-sizing: border-box !important;
}

/* 第二列：添加右侧黑色竖边框，修正left值 */
.page-product .details .flex-p-c .content table > tbody > tr > td:nth-child(2),
.page-product .details .flex-p-c .content table > thead > tr > th:nth-child(2) {
    width: 50px !important;
    min-width: 50px !important;
    position: sticky !important;
    left: 112px !important; /* 精准匹配第一列宽度 */
    z-index: 10 !important; /* 低于第一列，高于其他列 */
    box-shadow: 2px 0 3px -1px rgba(0,0,0,0.1) !important;
    background: #fff !important;
    /* 核心：显式添加右侧竖向黑色边框 */
    border-right: 1px solid #000 !important;
    box-sizing: border-box !important;
}

/* 4. 非固定列样式：设置合理最小宽度，避免挤压变形 */
.page-product .details .flex-p-c .content table > tbody > tr > td:nth-child(n+3),
.page-product .details .flex-p-c .content table > thead > tr > th:nth-child(n+3) {
    min-width: 45px !important; /* 根据你的需求调整 */
    width: auto !important;
    /* 给非固定列也添加竖向边框，保持样式统一 */
    border-right: 1px solid #000 !important;
    box-sizing: border-box !important;
}

/* 5. 单元格通用样式（优化边框和换行） */
.page-product .details .flex-p-c .content table td,
.page-product .details .flex-p-c .content table th {
    word-wrap: break-word !important;
    word-break: keep-all !important;
    white-space: nowrap !important;
    text-align: center !important;
    height: 20px !important;
    padding: 0 4px !important;
    /* 添加上下边框，保持表格边框完整 */
    border-top: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;
    /* 移除默认左边框，避免重复（靠右侧边框拼接） */
    border-left: none !important;
    box-sizing: border-box !important;
}

/* 最后一列移除右侧边框，避免表格最右侧多出边框 */
.page-product .details .flex-p-c .content table > tbody > tr > td:last-child,
.page-product .details .flex-p-c .content table > thead > tr > th:last-child {
    border-right: none !important;
}

/* 6. 移动端适配（优化最小宽度和边框） */
@media only screen and (max-width: 640px) {
    .page-product .details .flex-p-c {
        padding: 0 0.2rem !important;
    }
    .page-product .details .flex-p-c .content {
        padding-left: 0.1rem !important;
        padding-right: 0.1rem !important;
    }
    .page-product .details .flex-p-c .content table {
        min-width: 700px !important;
        width: auto !important;
    }
    /* 移动端非固定列最小宽度适当减小 */
    .page-product .details .flex-p-c .content table > tbody > tr > td:nth-child(n+3),
    .page-product .details .flex-p-c .content table > thead > tr > th:nth-child(n+3) {
        min-width: 45px !important;
    }
}