/* 全局样式重置 */
html {
	margin: 0;
	padding: 0;
	height: 100%;
	min-height: 100%;
	overflow-y: auto;
	/* 只在html上显示滚动条 */
	overflow-x: hidden;
	/* 隐藏水平滚动条 */
	box-sizing: border-box;
	/* 确保padding不影响总宽度 */
}

body {
	margin: 80px 0 0 0;
	/* 为固定header留出顶部空间，防止滚动条被覆盖 */
	padding: 0;
	height: calc(100% - 80px);
	min-height: calc(100% - 80px);
	overflow: visible;
	/* 允许内容正常溢出 */
	box-sizing: border-box;
	/* 确保padding不影响总宽度 */
}

/* 应用容器 */
#app {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	/* 确保容器至少占满视口 */
	overflow: visible;
	/* 允许内容正常溢出 */
	width: 100%;
	position: relative;
}

/* 产品页面主容器 */
.product-main {
	/* flex: 1; */
	min-height: calc(100vh - 80px);
	/* 确保至少占满视口 */
	position: relative;
	padding-bottom: 150px;
	/* 增加底部padding确保内容完全显示 */
	margin-top: 0;
	/* 已在body上添加padding-top，此处设为0 */
	overflow: visible;
	/* 允许内容正常溢出 */
}

.product-main::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('../img/product-bg.png');
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	z-index: -1;
	/* 确保背景在内容下方 */
	min-height: 100%;
	/* 确保背景至少覆盖整个视口 */
	transform: translateZ(0);
	/* 提高性能，避免背景闪烁 */
}

/* 产品内容容器 */
.product-main-b {
	min-height: calc(100vh - 80px);
	width: 100%;
	display: flex;
	flex-direction: row;
	position: relative;
	z-index: 1;
	align-items: flex-start;
	/* 确保内容从顶部开始 */
	height: auto;
	/* 让高度根据内容自动调整 */
	flex-wrap: wrap;
	/* 允许内容换行 */
	overflow: visible;
	/* 允许内容正常溢出 */
}

.container {
	display: flex;
	align-items: flex-start;
	padding: 20px;
	width: fit-content;
	margin: 164px auto;
	/* 新增：相对定位，为圆点绝对定位做基准 */
	position: relative;
}

/* 竖线容器 - 关键修改：移除overflow，扩大高度，调整位置 */
.vertical-line {
	position: relative;
	width: 8px;
	/* 3个选项总高度：(20px选项高度 + 60px间距) * 2 + 20px = 200px */
	height: 200px;
	background-color: rgba(40, 60, 51, 1);
	margin-right: 20px;
	border-radius: 5px;
	/* 移除overflow，避免裁剪圆点 */
	/* overflow: hidden; */
}

/* 进度条 - 仅占竖线容器范围，层级低于圆点 */
.line-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background-color: rgba(31, 116, 68, 1);
	transition: height 0.3s ease;
	z-index: 1;
	border-radius: 5px;
}

/* 圆点 - 终极调整：脱离竖线宽度限制，完全覆盖 */
.dot {
	position: absolute;
	/* 定位基准改为container，水平左移到竖线中心 */
	left: calc(8px / 2);
	top: 0;
	/* 水平+垂直居中，无偏移 */
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: rgba(31, 116, 68, 1);
	/* border: 2px solid rgba(40, 60, 51, 1); */
	transition: top 0.3s ease;
	z-index: 3;
	/* 最高层级，完全覆盖 */
	box-sizing: border-box;
	/* 强制显示，避免任何裁剪 */
	clip: auto;
}

/* 选项列表 - 精准对齐 */
.options {
	display: flex;
	flex-direction: column;
	gap: 60px;
	/* 选项间距 */
	padding: 0;
	margin: 0;
	/* 选项总高度：3*20 + 2*60 = 180px，与圆点定位匹配 */
}

.option {
	color: rgba(255, 255, 255, 0.65);
	cursor: pointer;
	transition: color 0.3s ease;
	font-size: 16px;
	height: 20px;
	/* 与圆点内容区高度一致 */
	line-height: 20px;
	display: flex;
	align-items: center;
}

.option.active {
	color: rgba(255, 255, 255, 1);
}

.content-item {
	display: none;
	opacity: 0;
	/* 初始完全透明 */
	animation: fadeIns 1.2s ease-in-out forwards;
}

@keyframes fadeIns {
	from {
		opacity: 0;
		/* 起始：透明 */
		/* 可选：加轻微缩放，效果更生动（可删除） */
		transform: scale(0.75);
	}

	to {
		opacity: 1;
		/* 结束：完全可见 */
		transform: scale(1);
	}
}

.content-item.active {
	display: block;
}
.left-content {
	width: 40%;
	height: auto;
	/* 让高度根据内容自动调整 */
	position: relative;
	min-height: calc(100vh - 80px);
	/* 确保至少占满视口高度 */
}

/* 右侧内容区域 */
.right-content {
	width: 60%;
	height: auto;
	/* 让高度根据内容自动调整 */
	position: relative;
	padding-bottom: 150px;
	/* 增加底部padding确保内容完全显示 */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* 内容居中对齐 */
	min-height: calc(100vh - 80px);
	/* 确保至少占满视口 */
}
.right-content img{
	display: block;
}
/* 右侧图片区域 */
.right-content-img1 {
	width: 735px;
	max-width: 100%;
	/* 确保图片宽度不会超过容器 */
	height: auto;
	/* 保持宽高比 */
	margin: 160px auto 20px;
	/* 调整与顶部和底部的距离 */
	display: block;
	/* 确保它是块级元素 */
}

.right-content-img2 {
	width: 741px;
	max-width: 100%;
	/* 确保图片宽度不会超过容器 */
	height: auto;
	/* 保持宽高比 */
	margin: 110px auto 0;
	/* 调整与顶部和底部的距离，底部为0 */
	display: block;
	/* 确保它是块级元素 */
}

.right-content-img3 {
	width: 735px;
	max-width: 100%;
	/* 确保图片宽度不会超过容器 */
	height: auto;
	/* 保持宽高比 */
	margin: 110px auto 20px;
	/* 调整与顶部和底部的距离 */
	position: relative;
	z-index: 1;
	display: block;
	/* 确保它是块级元素 */
}

.right-content-down {
	width: 264px;
	height: 80px;
	margin: 20px auto;
	/* 调整与顶部和底部的距离 */
	cursor: pointer;
	display: block;
	/* 确保它是块级元素 */
}

/* 右侧更多按钮 */
.right-content-more {
	width: 240px;
	height: 73px;
	margin: -170px auto;
	/* 调整为0 margin-top，使按钮更靠近图片 */
	cursor: pointer;
	display: block;
	/* 确保它是块级元素 */
}

.right-content-button3 {
	width: 264px;
	height: 80px;
	margin: 20px auto;
	/* 调整与顶部和底部的距离 */
	cursor: pointer;
	position: relative;
	z-index: 2;
	display: block;
	/* 确保它是块级元素 */
	margin-top: -100px;
}