/* 产品参数页面专用样式 */

/* 页面整体背景 - 高优先级设置 */
.specification-page {
	background-color: #ffffff !important;
	min-height: 100vh;
}

/* 确保body在此页面下也是白色背景 */
body.specification-page {
	background-color: #ffffff !important;
}

/* 头部横幅区域样式 */
.specification-page .header-banner {
	width: 100%;
	height: 90px;
	/* 修正为89px */
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.specification-page .banner-container {
	width: 82%;
	/* 100% - 9% - 9% = 82% */
	margin: 0 auto;
	padding: 0;
	height: 100%;
	position: relative;
	border-bottom: 1px solid #dfdfdf;
}

/* Mobile header banner default hidden and styles */

@media (max-width: 768px) {
	.m-banner-container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 10vw;
			line-height: 10vw;
			padding: 0 3vw;
		}
	.m-model-title {
			font-size: 3.733vw;
			font-weight: 600;
			color: #000000;
	}
	.specification-page .m-banner-nav {
		display: flex;
		gap: 6vw;
		align-items: center;
	}
	
	.m-banner-nav .m-nav-item {
			font-size: 3.2vw;
			color: #333333;
			text-decoration: none;
		}
}

.specification-page .m-header-banner {
	display: none;
}





.specification-page .m-banner-nav .m-nav-item.active {
	color: #0078ff;
}

/* Mobile cover carousel */
.specification-page .m-cover-carousel {
	display: none;
}

.specification-page .m-carousel-container {
	width: 100%;
	aspect-ratio: 1;
	background-color: #f1f2f6;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.specification-page .m-carousel-slides {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.specification-page .m-slide {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

.specification-page .m-slide.active {
	opacity: 1;
}

.specification-page .m-slide img {
	max-width: 80%;
	max-height: 80%;
	object-fit: contain;
}

.specification-page .m-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}

.specification-page .m-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #ccc;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.specification-page .m-dot.active {
	background-color: #333;
}

.specification-page .m-spec-params {
	display: none;
	width: 90%;
	margin: 20px auto;
}

.specification-page .m-spec-table {
	width: 100%;
}

.specification-page .m-spec-row {
	display: flex;
	align-items: center;
	line-height: 4;
	border-bottom: 1px solid #e5e5e5 !important;
}

.specification-page .m-spec-row:last-child {
	border-bottom: none;
}

.specification-page .m-spec-label {
	width: 40%;
	font-size: 3.2vw;
	font-weight: 600;
	color: #000000;
	padding-right: 1vw;
}

.specification-page .m-spec-value {
	width: 60%;
	font-size: 3.2vw;
	font-weight: normal;
	color: #000000;
	word-wrap: break-word;
}

/* Mobile downloads */
.specification-page .m-downloads {
	display: none;
	width: 90%;
	margin: 7vw auto ;
}

.specification-page .m-downloads-grid {
	display: flex;
	gap:2vw;
}

.specification-page .m-download-card {
	flex: 1;
	background-color: #f1f2f6;
	border-radius: 1.5vw;
	padding: 1vw 2vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.specification-page .m-dl-title {
	font-size: 3.2vw;
	font-weight: 500;
	color: #000;
}

.specification-page .m-dl-sub {
	font-size: 2.4vw;
	color: #666;
	margin: 1vw 0 0 0 ;
}

.specification-page .m-dl-btn {
	margin: 7vw 0 0 0;
}
.m-dl-btn img{
	width:6.5333vw ;
	height: auto;
}

/* Mobile title bar */
.specification-page .m-title-bar {
	display: none;
}

.specification-page .m-title-content {
	text-align: center;
	padding: 24px 16px;
}

.specification-page .m-title-learn {
	font-size: 3.2vw;
	color: #717171;
	margin-bottom: 8px;
}

.specification-page .m-title-line {
	font-size: 3.733vw;
	color: #0078ff;
	font-weight: 600;
}

.specification-page .m-title-name,
.specification-page .m-title-section,
.specification-page .m-title-sep {
	color: #0078ff;
}

/*   标题 - 居中 */
.specification-page .model-title {
	position: absolute;
	top: 45px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 28px;
	line-height: 31px;
	letter-spacing: 0px;
	color: #000000;
	font-weight: bold;
}

/* 3D Face Recognition Door Lock - 左侧 */
.specification-page .product-description {
	position: absolute;
	top: 48px;
	left: 0;
	font-size: 16px;
	font-weight: normal;
	line-height: 31px;
	letter-spacing: 0px;
	color: #000000;
	font-family: 'MiSans-Regular';

}

/* 右侧导航区域 - 使用flexbox布局 */
.specification-page .nav-overview,
.specification-page .nav-specification,
.specification-page .nav-360 {
	position: absolute;
	top: 48px;
	font-size: 16px;
	font-weight: normal;
	line-height: 31px;
	letter-spacing: 0px;
	color: #000000;
	cursor: pointer;
	transition: color 0.3s ease;
}

/* Overview - 与 间距15% */
.specification-page .nav-overview {
	left: calc(50% + 15%);
	/* 从中心点向右偏移15% */
}

.specification-page .nav-overview:hover {
	color: #0078ff;
}

/* Specification - 与Overview间距4% */
.specification-page .nav-specification {
	left: calc(50% + 15% + 70px + 4%);
	/* Overview位置 + Overview宽度估算 + 4%间距 */
	color: #0078ff;
}

.specification-page .nav-specification:hover {
	color: #0078ff;
}

.specification-page .nav-specification a:hover {
	color: #0078ff;
}

/* 360° - 与Specification间距3% */
.specification-page .nav-360 {
	left: calc(50% + 15% + 70px + 4% + 100px + 3%);
	/* Specification位置 + Specification宽度估算 + 3%间距 */
}

.specification-page .nav-360:hover {
	color: #0078ff;
}

/* Inquiry Now 按钮 - 与360°间距3% */
.specification-page .inquiry-btn {
	position: absolute;
	top: 40px;
	left: calc(50% + 15% + 70px + 4% + 100px + 3% + 40px + 3%);
	/* 360°位置 + 360°宽度估算 + 3%间距 */
	width: 120px;
	height: 40px;
	border-radius: 5px;
	border: solid 1px #000000;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
}

.specification-page .inquiry-btn:hover {
	background-color: #0078ff;
	border-color: #0078ff;
}

.specification-page .inquiry-btn:hover .inquiry-text {
	color: #ffffff;
}

.specification-page .inquiry-btn:hover .inquiry-arrow::before {
	color: #ffffff;
}

.specification-page .inquiry-text {
	font-size: 15px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 1;
	letter-spacing: 0px;
	color: #000000;
	white-space: nowrap;
}

.specification-page .inquiry-arrow {
	width: 7px;
	height: 15px;
	position: relative;
	margin-left: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.specification-page .inquiry-arrow::before {
	content: '>';
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	line-height: 1;
}

/* 基础样式 */
.specification-page .main-content.specification-layout {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 0;
	gap: 0;
	margin: 74px 0 0 0;
	/* 设置上边距为74px */
	background-color: #ffffff;
	min-height: 100vh;
	/* 确保至少占满整个视口高度 */
	box-sizing: border-box;
}

.specification-content {
	background: #ffffff;
	border-radius: 8px;
	padding: 0;
	/* 移除内边距，改为在子元素中设置 */
	margin: 0 auto 40px auto;
	max-width: none;
	/* 移除最大宽度限制 */
	width: 82%;
	/* 左右各9%间距，内容区域82% */
	display: flex;
	gap: 7.3%;
	/* 调整间距：100% - 37.8% - 54.9% = 7.3% */
}

/* 左边列 */
.specification-content .left-column {
	width: 37.8%;
	/* 31% ÷ 82% = 37.8% (占容器比例，实现整个页面31%) */
}

/* 右边列 */
.specification-content .right-column {
	width: 54.9%;
	/* 45% ÷ 82% = 54.9% (占容器比例，实现整个页面45%) */
}

/* 左边列样式 */
.specification-content .left-column {
	display: flex;
	flex-direction: column;
}

/* 图片幻灯片样式 */
.image-carousel {
	width: 100%;
	margin-bottom: 86px;
	/* 与第二行的间距 */
}

.carousel-container {
	width: 100%;
	aspect-ratio: 1;
	/* 保持正方形比例 */
	background-color: #f5f5f5;
	/* 灰色背景 */
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.carousel-slides {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.slide {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

.slide.active {
	opacity: 1;
}

.slide img {
	max-width: 80%;
	max-height: 80%;
	object-fit: contain;
}

/* 幻灯片指示点 */
.carousel-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 37px;
	/* 与轮播容器的间距调整为37px */
}

.dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #ccc;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.dot.active {
	background-color: #333;
}

.dot:hover {
	background-color: #666;
}

/* 内容区块样式 */
.content-block {
	height: 159px;
	background-color: #f1f2f6;
	border-radius: 10px;
	padding: 30px 60px 30px 50px;
	display: flex;
	flex-direction: row;
	/* 改为水平布局 */
	align-items: center;
	/* 垂直居中 */
	justify-content: space-between;
	/* 左右分布 */
	margin-bottom: 35px;
	/* 区块间距 */
}

.content-block:last-child {
	margin-bottom: 0;
	/* 最后一个区块不需要下边距 */
}

/* 左边内容区域 */
.content-left {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.content-left h3 {
	font-size: 24px;
	color: #000;
	margin: 0 0 22px 0;
	/* h3与p的间距为22px */
	line-height: 1.2;
}

.content-left p {
	font-size: 15px;
	color: #666;
	margin: 0;
	line-height: 1.2;
}

/* 右边按钮区域 */
.content-right {
	display: flex;
	align-items: center;
	justify-content: center;
}

.download-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #ccc;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease;
}

.download-btn:hover {
	background-color: #999;
}

.download-icon {
	background-image: url();
}

/* 参数表格样式 */
.specification-content .spec-table {
	width: 100%;
	border-bottom: 1px solid #e5e5e5;
}

.specification-content .spec-row {
	display: flex;
	align-items: center;
	/* 改为center对齐 */
	padding: 0;
	/* 移除上下padding，使用line-height控制高度 */
	border-top: 1px solid #e5e5e5;
	min-height: 65px;
	/* 确保最小高度 */
}

.specification-content .spec-row:last-child {
	border-bottom: none;
}

.specification-content .spec-label {
	width: 40%;
	font-size: 16px;
	font-stretch: normal;
	line-height: 100px;
	letter-spacing: 0px;
	color: #000000;
	padding-right: 20px;
	flex-shrink: 0;
	font-family: 'MiSans-Demibold'
	;
}


.specification-content .spec-value {
	width: 60%;
	font-size: 16px;
	font-stretch: normal;
	line-height: 100px;
	letter-spacing: 0px;
	color: #000000;
	word-wrap: break-word;
	font-family: 'MiSans-Regular';
}

/* 1920px及以上分辨率的特定样式 */
@media (min-width: 1920px) {
	.specification-page .banner-container {
		width: 82%;
		/* 保持左右各9%的间距 */
		margin: 0 auto;
		padding: 0;
	}

	/* 1920px分辨率下使用相同的右对齐逻辑 */
	.specification-page .nav-overview {
		right: calc(120px + 25px + 40px + 25px + 80px + 25px);
		/* 稍微增加间距 */
	}

	.specification-page .nav-specification {
		right: calc(120px + 25px + 40px + 25px);
		/* 稍微增加间距 */
	}

	.specification-page .nav-360 {
		right: calc(120px + 25px);
		/* 稍微增加间距 */
	}

	.specification-page .inquiry-btn {
		right: 0;
		/* 保持右对齐 */
	}
}

/* 响应式设计 */
@media (max-width: 768px) {
	.specification-page .header-banner {
		height: 70px;
		/* 移动端调整为70px */
		display: none;
	}

	.specification-page .m-header-banner {
		display: block;
		background-color: #ffffff;
		margin-top: 51px;
	}

	.specification-page .m-cover-carousel {
		display: block;
	}

	.specification-page .m-spec-params {
		display: block;
	}

	.specification-page .m-downloads {
		display: block;
	}

	.specification-page .m-title-bar {
		display: block;
	}

	/* 左边列移动端样式 */
	.specification-content .left-column {
		width: 100%;
		margin-bottom: 30px;
	}

	.image-carousel {
		margin-bottom: 50px;
		/* 移动端减少间距 */
	}

	.content-block {
		height: 120px;
		/* 移动端减少高度 */
		padding: 20px;
		margin-bottom: 25px;
		/* 移动端减少间距 */
	}

	.content-left h3 {
		font-size: 16px;
		margin-bottom: 18px;
		/* 移动端调整间距 */
	}

	.content-left p {
		font-size: 13px;
	}

	.download-btn {
		width: 35px;
		height: 35px;
	}

	.download-icon {
		font-size: 16px;
	}

	.specification-page .banner-container {
		width: 82%;
		/* 保持左右各9%的间距 */
		padding: 0;
	}

	.specification-page .model-title {
		top: 26px;
		/* 调整为在70px容器中居中：(70-18)/2 = 26px */
		font-size: 14px;
	}

	.specification-page .product-description {
		display: none;
		/* 移动端隐藏 */
	}

	.specification-page .nav-overview,
	.specification-page .nav-specification,
	.specification-page .nav-360 {
		position: static;
		display: inline-block;
		margin: 0 10px;
		font-size: 14px;
	}

	.specification-page .inquiry-btn {
		top: 17px;
		/* 调整为在70px容器中居中：(70-35)/2 ≈ 17px */
		right: 20px;
		width: 100px;
		height: 35px;
	}

	.specification-page .inquiry-text {
		font-size: 13px;
	}

	.specification-page .inquiry-arrow {
		width: 6px;
		height: 13px;
		margin-left: 6px;
	}

	.specification-page .inquiry-arrow::before {
		font-size: 12px;
	}

	.specification-content {
		flex-direction: column;
		/* 移动端改为垂直布局 */
		width: 90%;
		/* 移动端减少左右间距 */
		gap: 0;
	}

	.specification-content .left-column,
	.specification-content .right-column {
		width: 100%;
	}

	.specification-content .spec-row {
		flex-direction: column;
		padding: 15px 0;
		min-height: auto;
		/* 移动端取消固定高度 */
		align-items: flex-start;
		/* 移动端左对齐 */
	}

	.specification-content .spec-label {
		width: 100%;
		margin-bottom: 8px;
		font-size: 16px;
		/* 移动端适当减小字体 */
		font-weight: bold;
		line-height: 1.4;
		/* 移动端调整行高 */
		color: #000000;
	}

	.specification-content .spec-value {
		width: 100%;
		font-size: 16px;
		/* 移动端适当减小字体 */
		font-weight: normal;
		line-height: 1.4;
		/* 移动端调整行高 */
		color: #000000;
		padding-left: 0;
	}
}

@media (max-width: 480px) {
	.specification-page .header-banner {
		height: 60px;
		/* 小屏幕进一步调整 */
	}

	.specification-page .model-title {
		top: 21px;
		/* 调整为在60px容器中居中：(60-18)/2 = 21px */
		font-size: 12px;
	}

	.specification-page .nav-overview,
	.specification-page .nav-specification,
	.specification-page .nav-360 {
		font-size: 12px;
		margin: 0 5px;
	}

	.specification-page .inquiry-btn {
		width: 80px;
		height: 30px;
		top: 15px;
		/* 调整为在60px容器中居中：(60-30)/2 = 15px */
		right: 15px;
	}

	.specification-page .inquiry-text {
		font-size: 11px;
	}

	.specification-page .inquiry-arrow {
		width: 5px;
		height: 11px;
		margin-left: 4px;
	}

	.specification-page .inquiry-arrow::before {
		font-size: 10px;
	}

	.specification-content {
		flex-direction: column;
		width: 95%;
		/* 小屏幕进一步减少间距 */
		gap: 0;
	}

	.specification-content .left-column,
	.specification-content .right-column {
		width: 100%;
	}

	/* 小屏幕左边列样式 */
	.image-carousel {
		margin-bottom: 40px;
		/* 小屏幕进一步减少间距 */
	}

	.content-block {
		height: 100px;
		/* 小屏幕进一步减少高度 */
		padding: 15px;
		margin-bottom: 20px;
		/* 小屏幕进一步减少间距 */
	}

	.content-left h3 {
		font-size: 14px;
		margin-bottom: 15px;
		/* 小屏幕调整间距 */
	}

	.content-left p {
		font-size: 12px;
	}

	.download-btn {
		width: 30px;
		height: 30px;
	}

	.download-icon {
		font-size: 14px;
	}

	.specification-content .left-column h1 {
		font-size: 20px;
	}

	.specification-content .spec-row {
		padding: 12px 0;
		min-height: auto;
		align-items: flex-start;
	}

	.specification-content .spec-label {
		font-size: 14px;
		/* 小屏幕进一步减小字体 */
		font-weight: bold;
		line-height: 1.3;
		color: #000000;
		margin-bottom: 6px;
	}

	.specification-content .spec-value {
		font-size: 14px;
		/* 小屏幕进一步减小字体 */
		font-weight: normal;
		line-height: 1.3;
		color: #000000;
	}
}