:root {
	--primary-color: #333;
	--secondary-color: #ffd700;
	--text-color: #333;
	--background-color: #fff;
	--max-width: 1100px;
}

/* 重置和基础样式 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Poppins', sans-serif;
	color: var(--text-color);
	background-color: var(--background-color);
	line-height: 1.6;
}

html,
body {
	max-width: var(--max-width);
	height: 100vh;
	margin: 0 auto;
	scroll-behavior: smooth;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* 排版 */
a {
	text-decoration: none;
	color: var(--primary-color);
	font-size: 1.2rem;
}

ul {
	list-style: none;
}

h3 {
	font-size: 1.8rem;
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, #ffd700);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font-weight: bold;
	letter-spacing: 1px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* 布局 */
.container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 15px;
}

/* 头部样式 */
.header {
	padding: 20px 0;
}

.menu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.logo-container {
	display: flex;
	align-items: center;
}

.logo {
	display: flex;
	align-items: center;
	width: 30px; /* 修改这里，从0px改为30px或其他适当的值 */
	height: 30px;
	margin-right: 10px;
}

.logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#datetime {
	font-size: 0.9rem;
	color: var(--primary-color);
	margin-right: 40px;
}

.main-menu {
	display: flex;
	align-items: center;
	gap: 30px;
}

.main-menu a {
	padding: 8px 20px;
	border-radius: 5px;
	transition: background-color 0.3s ease;
}

.current {
	padding: 6px 8px;
	border-radius: 5px;
	background-color: var(--secondary-color);
	color: var(--primary-color);
}

.main-menu a:hover,
.current {
	background-color: var(--secondary-color);
	color: var(--primary-color);
}

/* 英雄区域样式 */
.hero {
	height: 350px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 2rem;
	padding-top: 0;
}

.hero h3 {
	font-size: 4.5rem;
	font-weight: normal;
	margin-bottom: 30px;
	margin-top: -50px;
}

/* 详情区域样式 */
.details {
	height: 200px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #333;
	color: #fff;
	margin: 0 auto 70px;
	border-radius: 10px;
}

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

.part-item {
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: calc(33.33% - 10px);
	height: 160px;
	border-right: 1px solid #948c8c;
}

.details .last-item {
	border-right: none;
}

.part-item h2 {
	margin: 8px 0;
	font-size: 1.6rem;
	font-weight: normal;
	color: rgb(253, 246, 246);
}

.part-item p {
	text-align: center;
	line-height: 1.7;
	font-size: 0.9rem;
	color: rgb(203, 197, 197);
	margin-top: 15px;
	padding: 0 10px;
}

.part-item span {
	color: red;
	font-weight: bold;
	font-size: 1.1rem;
}

/* 关于我们区域样式 */
.about {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 50px;
}

.about .text {
	width: 100%;
	height: 200px;
	line-height: 1.6;
	margin: 30px 0;
}

.about .text p {
	font-size: 1rem;
	text-align: center;
	margin-bottom: 20px;
	display: block;
}

.about p:first-child {
	font-size: 1.8rem;
	font-weight: normal;
}

.about-images {
	display: flex;
	justify-content: space-between;
	gap: 20px;
}

.about-img {
	flex: 1;
	height: 350px;
	overflow: hidden;
}

.about-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

/* 为什么注册商标区域样式 */
.why {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.why h2 {
	font-size: 2rem;
	font-weight: normal;
	margin-top: 50px;
	position: relative;
	padding-left: 40px;
}

.why h2::after {
	content: '?';
	position: absolute;
	right: -30px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 2.5rem;
	color: #333;
	animation: pulse 0.5s infinite;
}

.why h3 {
	font-size: 1.5rem;
	font-weight: normal;
	margin: 20px 0 35px;
}

.why p {
	padding: 0 20px;
	text-align: center;
	color: rgb(203, 197, 197);
}

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

.tworeason-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 1px solid #333;
	background-color: #333;
	color: #fff;
	border-radius: 10px;
	height: 180px;
	width: 500px;
	margin: 30px 10px 20px;
}

/* 进度条区域样式 */
.progress-section {
	width: 100%;
	padding: 50px 0;
	margin-bottom: 10px;
	text-align: center;
}

.progress-section h2 {
	margin: 20px 0 50px;
	text-align: center;
	width: 100%;
	font-size: 2rem;
	font-weight: normal;
}

.progress-container {
	position: relative;
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.progress-bar {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: 1.5px;
	width: 98%;
	background-color: black;
	z-index: 1;
}

.progress-step {
	position: relative;
	height: 100px;
	z-index: 2;
}

.progress-step p {
	margin-bottom: 12px;
}

.progress-step .step-circle {
	background-color: white;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 3;
	color: #333;
	font-weight: bold;
}

.progress-container .progress-step:nth-of-type(1) .step-circle {
	background-color: #ffd700;
}
.progress-container .progress-step:nth-of-type(2) .step-circle {
	background-color: #87ceeb;
}
.progress-container .progress-step:nth-of-type(3) .step-circle {
	background-color: #98fb98;
}
.progress-container .progress-step:nth-of-type(4) .step-circle {
	background-color: #ffa07a;
}
.progress-container .progress-step:nth-of-type(5) .step-circle {
	background-color: #dda0dd;
}
.progress-container .progress-step:nth-of-type(6) .step-circle {
	background-color: #b0e0e6;
}
.progress-container .progress-step:nth-of-type(7) .step-circle {
	background-color: #ffd700;
}

/* 文章列表页样式已移至 articles/articles.css */

/* 页脚样式 */
.footer {
	display: flex;
	justify-content: center;
	width: 100%;
	text-align: center;
	padding: 20px 0;
	color: #868585;
	margin-top: auto;
	font-size: 0.8rem;
}

.footer a {
	color: #868585;
	font-size: 0.8rem;
}
/* 动画 */
@keyframes pulse {
	0% {
		transform: translateY(-50%) scale(1);
		opacity: 1;
	}
	50% {
		transform: translateY(-50%) scale(1.2);
		opacity: 0.7;
	}
	100% {
		transform: translateY(-50%) scale(1);
		opacity: 1;
	}
}

/* 平板和手机设备的样式适配 (最大宽度768px) */
@media (max-width: 768px) {
	/* 头部区域样式调整 */
	.header {
		width: 100%;
		padding: 15px 0;
	}

	/* 导航菜单改为垂直排列 */
	.menu {
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	/* Logo容器居中显示 */
	.logo-container {
		justify-content: center;
		width: 100%;
		margin-bottom: 15px;
	}

	/* 主菜单项垂直排列 */
	.main-menu {
		flex-direction: column;
		align-items: center;
		gap: 15px;
		margin-top: 15px;
		width: 100%;
	}

	/* 菜单项宽度占满 */
	.main-menu li {
		text-align: center;
		width: 100%;
	}

	/* 首页横幅区域高度和内边距调整 */
	.hero {
		height: 250px;
		padding: 20px 10px;
	}

	/* 横幅标题字体大小调整 */
	.hero h3 {
		font-size: 3rem;
		margin-top: 0;
	}

	/* 横幅文字大小调整 */
	.hero p {
		font-size: 1.5rem;
	}

	/* 详情区域自适应高度 */
	.details {
		height: auto;
		margin: 20px auto;
		padding: 20px 0;
	}

	/* 详情项改为垂直排列 */
	.part-flex {
		flex-direction: column;
		gap: 20px;
	}

	/* 详情项样式调整 */
	.part-item {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid #948c8c; /* 改用底部分隔线 */
		padding: 20px;
		height: auto;
	}

	/* 最后一个详情项去除底部边框 */
	.part-item:last-child {
		border-bottom: none;
	}

	/* 关于我们文字区域调整 */
	.about .text {
		height: auto;
		padding: 20px 10px;
		display: flex;
		flex-direction: column;
	}

	/* 关于我们文字大小调整 */
	.about .text p {
		font-size: 1rem;

		/* margin-bottom: 15px; */
	}

	/* 关于我们标题大小调整 */
	.about .text p:first-child {
		font-size: 2rem;
	}

	/* 关于我们图片改为垂直排列 */
	.about-images {
		flex-direction: column;
		gap: 15px;
	}

	/* 关于我们图片高度调整 */
	.about-img {
		height: 250px;
	}

	/* 为什么注册商标标题样式调整 */
	.why h2 {
		font-size: 1.8rem;
		padding-left: 20px;
	}

	/* 问号装饰位置调整 */
	.why h2::after {
		right: -20px;
		font-size: 2rem;
	}

	/* 原因说明改为垂直排列 */
	.tworeason-flex {
		flex-direction: column;
		width: 100%;
	}

	/* 原因说明项样式调整 */
	.tworeason-item {
		width: 100%;
		margin: 10px 0;
		height: auto;
		padding: 20px 10px;
	}

	/* 进度条区域内边距调整 */
	.progress-section {
		padding: 30px 10px;
	}

	/* 进度条标题样式调整 */
	.progress-section h2 {
		font-size: 1.8rem;
		margin: 10px 0 -30px;
	}

	/* 进度条容器样式设置 */
	.progress-container {
		position: relative; /* 设置定位上下文 */
		padding: 20px 0; /* 上下留出空间 */
		width: 80%; /* 控制整体宽度 */
		flex-direction: column; /* 垂直排列步骤 */
		align-items: center; /* 整体居中对齐 */
		margin: 0 auto; /* 容器居中 */
	}

	/* 进度条线条样式设置 */
	.progress-bar {
		display: block; /* 显示线条 */
		width: 1px; /* 线条宽度 */
		height: calc(100% - 180px); /* 减少线条长度，留出上下空间 */
		background-color: black;
		position: absolute; /* 绝对定位 */
		top: 80px; /* 从第一个圆圈开始 */
		left: 45%; /* 水平居中 */
		transform: translateX(-50%); /* 精确居中定位 */
	}

	/* 进度步骤样式设置 */
	.progress-step {
		position: relative; /* 相对定位 */
		z-index: 2; /* 确保在线条上层 */
		display: flex; /* 水平布局 */
		align-items: center; /* 垂直居中对齐 */
		margin: 20px 0; /* 步骤间距 */
		width: 100%;
		justify-content: center; /* 水平居中整体内容 */
	}

	/* 步骤圆圈样式设置 */
	.progress-step .step-circle {
		position: absolute; /* 绝对定位 */
		z-index: 3; /* 确保在最上层 */
		left: 45%; /* 水平居中 */
		transform: translateX(-50%); /* 精确居中定位 */
		background-color: white; /* 确保圆圈背景色 */
	}

	/* 步骤文字样式设置 */
	.progress-step p {
		position: absolute; /* 改为绝对定位 */
		z-index: 2; /* 确保在线条上层 */
		left: calc(50% + 10px); /* 圆圈中心位置 + 固定间距 */
		transform: translateY(-50%); /* 垂直居中对齐 */
		top: 50%; /* 垂直居中 */
	}

	/* 页脚样式调整 */
	.footer {
		flex-direction: column;
		align-items: center;

		padding: 15px 0;
	}

	/* 页脚文字和链接样式调整 */
	.footer p,
	.footer a {
		padding: 5px 0;
		text-align: center;
		width: 100%;
	}
}

/* 手机设备的样式适配 (最大宽度480px) */
@media (max-width: 480px) {
	/* 横幅标题进一步缩小 */
	.hero h3 {
		font-size: 2.5rem;
	}

	/* 横幅文字进一步缩小 */
	.hero p {
		font-size: 1.2rem;
	}

	/* 关于我们图片高度调整 */
	.about-img {
		height: 200px;
	}

	/* 进度步骤圆圈尺寸调整 */
	.progress-step .step-circle {
		width: 35px;
		height: 35px;
	}
}