body {
	margin: 0;
	padding: 0;
	background: #ffc0cb;
	font-size: 20px;
	font-family: '微软雅黑', '宋体', sans-serif;
	color: #000000;
	overflow: auto
}

a {
	color: #000;
	font-size: 14px;
}

#main {
	width: 100%;
}

#wrap {
	position: relative;
	margin: 0 auto;
	width: 1100px;
	height: 680px;
	margin-top: 10px;
}

#text {
	width: 400px;
	height: 425px;
	left: 60px;
	top: 80px;
	position: absolute;
}

#code {
	display: none;
	font-size: 16px;
}

#clock-box {
	position: absolute;
	left: 60px;
	top: 550px;
	font-size: 28px;
	display: none;
}

#clock-box a {
	font-size: 28px;
	text-decoration: none;
}

#clock {
	margin-left: 48px;
}

#clock .digit {
	font-size: 64px;
}

#canvas {
	margin: 0 auto;
	width: 1100px;
	height: 680px;
}

#error {
	margin: 0 auto;
	text-align: center;
	margin-top: 60px;
	display: none;
}

.hand {
	cursor: pointer;
}

.say {
	margin-left: 5px;
}

.space {
	margin-right: 150px;
}

/* 横向时间轴样式 */
#timeline-container {
    position: absolute;
    width: 100%;
    height: 200px; /* 增加高度以容纳更多内容和间距 */
    left: 0;
    top: 65%; /* 调整位置，使其更靠近底部 */
    transform: translateY(-50%);
    display: none; /* 初始隐藏 */
    overflow: hidden; /* 隐藏超出部分 */
    z-index: 10; /* 确保在其他元素之上 */
    white-space: nowrap; /* 确保内容不换行 */
    padding: 20px 0; /* 增加上下内边距 */
}

#timeline-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* 使用 flexbox 实现横向布局 */
    height: 100%;
    align-items: center; /* 垂直居中时间点 */
    position: relative;
    left: 0; /* 用于JS动画 */
}

.timeline-item {
    flex: 0 0 auto;
    width: 240px; /* 调整每个时间点的宽度，增加一些 */
    text-align: center;
    padding: 15px;
    box-sizing: border-box;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out; /* 放慢动画节奏 */
    background-color: rgba(255, 255, 255, 0.95); /* 更不透明的背景 */
    border-radius: 15px; /* 更大的圆角 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 更明显的阴影 */
    margin: 0 25px; /* 增加左右外边距 */
    display: flex; /* 使用flexbox布局内部内容 */
    flex-direction: column; /* 垂直排列 */
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
}


.timeline-item .timeline-date {
    font-weight: bold;
    font-size: 1.3em; /* 增大字体 */
    color: #e91e63; /* 更深的粉色 */
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 2px solid #f06292;
    width: 100%; /* 增加分隔线宽度 */
    margin: 0 auto 8px auto; /* 居中并调整底部间距 */
    text-align: center; /* 显式设置文本居中 */
}

.timeline-item .timeline-content {
    color: #444; /* 调整颜色 */
    line-height: 1.5;
    font-size: 1.15em; /* 增大字体 */
    margin-top: 10px; /* 增加顶部间距 */
}

.timeline-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px; /* 增大圆点 */
    height: 22px; /* 增大圆点 */
    background-color: #e91e63; /* 更深的粉色圆点 */
    border-radius: 50%;
    border: 4px solid #fff; /* 增加边框 */
    z-index: 1;
}