body {
	font-size: 14px;
	color: #ffffff;
	font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
	// background: url(../img/bg2.png) no-repeat center center fixed;
	background: url(../img/clock/clock2.png) no-repeat center center fixed;
	/* 背景图片居中并固定 */
	padding: 0;
	margin: 0;
	background-size: cover;
	/* 背景图片覆盖整个页面 */
	-webkit-background-size: cover;
	/* 兼容 WebKit 浏览器 */
	-moz-background-size: cover;
	/* 兼容 Firefox */
	-o-background-size: cover;
	/* 兼容 Opera */
	min-height: 100vh;
	/* 确保 body 至少占满整个视口高度 */
	overflow: hidden;
	/* 防止滚动条出现 */
}

/* 添加半透明遮罩层 */
body::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.1);
	/* 黑色半透明遮罩 */
	z-index: -1;
}

.clock {
	list-style: none;
	margin: auto;
	padding: 0;
	width: 700px;
	height: 700px;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	line-height: 20px;

	user-select: none;

}

.clock .date {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 20px;
	text-align: center;
	top: 340px;
	left: 0;
	color: #55ffff;
	/* 绿色 */
	font-weight: bold;
	/* 可选：加粗字体 */
	font-size: 18px;
	/* 增大字体大小 */
}

.clock .hour {
	position: absolute;
	z-index: 3;
	width: 360px;
	height: 20px;
	top: 340px;
	left: 170px;
	transition: transform 0.3s ease-in-out 0s;
	transform: rotate(0deg);
}

.clock .hour>div {
	position: absolute;
	width: 100%;
	right: 0;
	top: 0;
	transition: transform 1s ease-in-out 0s;
	transform: rotate(0deg);
}

.clock .hour>div>div {
	float: right;
	width: 60px;
	text-align: right;
	font-weight: bold;
	/* 字体加粗 */
	/* background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
	padding: 5px;
	/* 内边距 */
	border-radius: 5px;
	/* 圆角效果 */
	*/ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
	/* 阴影效果 */
}

.clock .minute {
	position: absolute;
	z-index: 4;
	width: 520px;
	height: 20px;
	top: 340px;
	left: 90px;
}

.clock .sec {
	position: absolute;
	z-index: 5;
	width: 680px;
	height: 20px;
	top: 340px;
	left: 10px;
}

.clock>hr {
	height: 0;
	width: 0%;
	position: absolute;
	z-index: 1;
	// background-color: #4CAF50;
	border: #4CAF50 solid 0;
	border-bottom-width: 1px;
	margin: 10px 0 0 0;
	left: 50%;
	top: 50%;
	transition: width 0.3s ease-in-out 0s;
	overflow: visible;
}

.clock>hr.active:before {
	content: '';
	display: block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: #4CAF50;
	top: -2px;
	left: 0;
	position: absolute;
}

/* 靠左按钮容器样式 */
.button-container {
	position: absolute;
	top: 50%;
	/* 垂直居中 */
	transform: translateY(-50%);
	/* 向上偏移自身高度的一半 */
	left: 20px;
	display: flex;
	flex-direction: column;
	/* 垂直排列 */
	gap: 10px;
}

/* 按钮样式 */
.nav-button {
	padding: 10px 20px;
	background-color: #4CAF50;
	/* 绿色背景 */
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
	transition: all 0.3s ease;
	/* 添加过渡效果 */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	/* 添加阴影 */
}

/* 悬浮效果 */
.nav-button:hover {
	background-color: #45a049;
	/* 悬停时颜色变深 */
	transform: translateY(-3px);
	/* 按钮向上移动 */
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
	/* 阴影变大 */
}

/* 音乐控件样式调整 */
.music-control {
	position: absolute;
	top: 20px;
	right: 20px;
}

/* 靠右按钮容器样式 */
.button-container-right {
	position: absolute;
	top: 50%;
	/* 垂直居中 */
	transform: translateY(-50%);
	/* 向上偏移自身高度的一半 */
	right: 20px;
	display: flex;
	flex-direction: column;
	/* 垂直排列 */
	gap: 10px;
}