/* 产品概览页面专用样式 */

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

.overview-page .banner-container {
	width: 82%;
	/* 100% - 9% - 9% = 82% */
	margin: 0 auto;
	padding: 0;
	height: 100%;
	position: relative;
}

/* Mobile header banner default hidden */
.overview-page .m-header-banner {
	display: none;
}

.overview-page .m-main-content {
	display: none;
}

.overview-page .m-title-bar {
	display: none;
}

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

.overview-page .m-title-learn {
	font-size: 14px;
	color: #717171;
	margin-bottom: 8px;
}

.overview-page .m-title-line {
	font-size: 20px;
	color: #0078ff;
	font-weight: 600;
}

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

/*   标题 - 居中 */
.overview-page .model-title {
	position: absolute;
	top: 45px;
	/* 调整为在90px容器中居中：(90-18)/2 = 36px */
	left: 50%;
	transform: translateX(-50%);
	font-size: 28px;
	font-weight: bold;
	font-stretch: normal;
	line-height: 31px;
	letter-spacing: 0px;
	color: #000000;
	font-family: 'MiSans-Regular';

}

/* 3D Face Recognition Door Lock - 左侧，与 间距45% */
.overview-page .product-description {
	position: absolute;
	top: 48px;
	/* 调整为在90px容器中居中：(90-18)/2 = 36px */
	left: calc(50% - 45% - 76px);
	/* 从中心点向左偏移45%再减去一半文字宽度 */
	width: 238px;
	height: 18px;
	font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 31px;
	letter-spacing: 0px;
	color: #000000;
}

/* Overview - 右侧导航，与 间距15% */
.overview-page .nav-overview {
	position: absolute;
	top: 48px;
	/* 调整为在90px容器中居中：(90-14)/2 ≈ 38px，但为了与其他元素对齐使用36px */
	left: calc(50% + 38px + 15%);
	/* 50% +  宽度的一半 + 15%间距 */
	height: 14px;
	font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 31px;
	letter-spacing: 0px;
	color: #0078ff;
	/* 当前页面高亮 */
	cursor: pointer;
	transition: color 0.3s ease;
}

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

/* Specification - 与Overview间距4% */
.overview-page .nav-specification {
	position: absolute;
	top: 48px;
	/* 调整为在90px容器中居中 */
	left: calc(50% + 38px + 15% + 64px + 4%);
	/* Overview位置 + Overview宽度 + 4%间距 */
	height: 14px;
	font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 31px;
	letter-spacing: 0px;
	color: #000000;
	cursor: pointer;
	transition: color 0.3s ease;
}

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

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

/* 360° - 与Specification间距3% */
.overview-page .nav-360 {
	position: absolute;
	top: 48px;
	/* 调整为在90px容器中居中 */
	left: calc(50% + 38px + 15% + 64px + 4% + 100px + 3%);
	/* Specification位置 + Specification宽度 + 3%间距 */
	height: 14px;
	font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 31px;
	letter-spacing: 0px;
	color: #000000;
	cursor: pointer;
	transition: color 0.3s ease;
}

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

/* Inquiry Now 按钮 - 与360°间距3% */
.overview-page .inquiry-btn {
	position: absolute;
	top: 40px;
	/* 调整为在90px容器中居中：(90-40)/2 = 25px */
	left: calc(50% + 38px + 15% + 64px + 4% + 100px + 3% + 30px + 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;
}

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

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

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

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

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


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

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

/* 主要内容区域样式 */
.overview-page .main-content.overview-layout {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 0;
	gap: 0;
	margin: 0;
}

/* 产品概述容器样式 */
.overview-page .overview-container {
	width: 100%;
	height: auto;
	position: relative;
	overflow: visible;
	margin: 0;
	padding: 0;
	display: block;
}

/* 第一个和第三个容器 - 图片展示 */
.overview-page .overview-image-one,
.overview-page .overview-image-two {
	display: flex;
	align-items: center;
	justify-content: center;
}

.overview-page .overview-image {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

/* 第二个容器 - 视频播放区域 */
.overview-page .overview-video {
	background-image: url('../images/video-bg.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1920 / 901;
}

.overview-page .overview-video-player,
.overview-page .overview-video-frame {
	width: 100%;
	height: 100%;
	display: none;
	background: #000;
}

.overview-page .overview-video-player {
	object-fit: cover;
}

.overview-page .overview-text {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.overview-page .overview-text-content {
	width: 82%;
	max-width: 82%;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.8;
	color: #333333;
}

/* 播放按钮样式 */
.overview-page .video-play-button {
	width: 124px;
	height: 80px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.overview-page .video-play-button:hover {
	transform: scale(1.1);
}

.overview-page .play-icon {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

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

	/* 在1920px分辨率下保持45%间距 */
	.overview-page .product-description {
		left: calc(50% - 45% - 76px);
		/* 保持与基础样式一致的45%间距 */
	}

	.overview-page .nav-overview {
		left: calc(50% + 38px + 15%);
		/* 与基础样式保持一致 */
	}

	.overview-page .nav-specification {
		left: calc(50% + 38px + 15% + 64px + 4%);
		/* 与基础样式保持一致 */
	}

	.overview-page .nav-360 {
		left: calc(50% + 38px + 15% + 64px + 4% + 100px + 3%);
		/* 与基础样式保持一致 */
	}

	.overview-page .inquiry-btn {
		left: calc(50% + 38px + 15% + 64px + 4% + 100px + 3% + 30px + 3%);
		/* 与基础样式保持一致 */
	}

	.overview-page .overview-container {
		height: auto;
	}
}

/* 响应式设计 */
@media (max-width: 768px) {

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

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

	.overview-page .product-description {
		display: none;
	}

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

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

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

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

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

	.overview-page .overview-container {
		height: auto;
	}

	.overview-page .video-play-button {
		width: 80px;
		height: 50px;
	}

	.overview-page .header-banner {
		display: none;
	}

	.overview-page .m-header-banner {
		display: block;
		background-color: #ffffff;
		/* margin-top: 10vw; */
	}

	.overview-page .m-banner-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 10vw;
		line-height: 10vw;
		padding: 0 3vw;
	}

	.overview-page .m-model-title {
		font-size: 3.733vw;
		font-weight: 600;
		color: #000000;
	}

	.overview-page .m-banner-nav {
		display: flex;
		gap: 6vw;
		align-items: center;
	}

	.overview-page .m-banner-nav .m-nav-item {
		font-size: 3.2vw;
		color: #333333;
		text-decoration: none;
	}

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

	.overview-page .main-content.overview-layout {
		display: none;
	}

	.overview-page .m-main-content {
		display: block;
	}

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

@media (max-width: 480px) {
	.overview-page .header-banner {
		height: 60px;
	}

	.overview-page .model-title {
		top: 20px;
		font-size: 12px;
	}

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

	.overview-page .inquiry-btn {
		width: 80px;
		height: 30px;
		top: 15px;
		right: 15px;
	}

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

	.overview-page .overview-container {
		height: auto;
	}

	.overview-page .video-play-button {
		width: 60px;
		height: 40px;
	}
}