/* 基础样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #fff;
  color: #333;
}
#timeline-header {
  border: none;
  box-shadow: none;
  background-color: transparent; /* 或使用页面背景色 */
  margin: 0;
  padding: 0;
}
#timeline-date {
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
  font-size: 1.5em;
  text-align: left;
}
#news-list {
  position: relative;
  margin: 0;
  padding: 10px;
  list-style: none;
}
/* 时间线样式 */
.news-item {
  position: relative;
  padding: 10px 0; /* 调整上下边距 */
  border-left: 3px solid #007bff;
  margin-left: 20px;
  cursor: pointer; /* 添加鼠标指针样式 */
}
.news-item .content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 30px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.news-item .text-content {
  flex: 1;
}
.news-item h4 {
  margin: 0 0 0 0;
  font-size: 1.2em;
  color: #000;
}
.news-item p {
  margin: 0;
  color: #666;
}
.news-item .publish-time {
  position: absolute;
  left: -80px;
  top: 10px;
  width: 60px;
  text-align: right;
  font-size: 0.9em;
  color: #999;
}
.news-item img {
  max-width: 100px; /* 图片最大宽度 */
  max-height: 75px; /* 图片最大高度 */
  width: 100%;
  height: auto; /* 自动根据宽度调整高度，保持长宽比 */
  border-radius: 5px; /* 图片圆角 */
  margin-left: 10px; /* 图片左边距 */
  margin-top: 0; /* 设置图片上边距 */
  margin-bottom: 0; /* 设置图片下边距 */
}
/* 悬停样式 */
.news-item:hover {
  background-color: #f1f1f1;
  border-left-color: #0056b3;
}
/* 模态弹窗背景样式 */
#news-details-modal {
  display: none; /* 默认隐藏模态框 */
  position: fixed; /* 固定位置，使其在页面上保持不变 */
  top: 0; /* 定位到视口的顶部 */
  left: 0; /* 定位到视口的左侧 */
  width: 100%; /* 宽度为视口的100% */
  height: 100%; /* 高度为视口的100% */
  background-color: rgba(0,0,0,0.5); /* 半透明背景遮罩 */
  justify-content: center; /* 垂直和水平居中对齐 */
  align-items: center; /* 垂直和水平居中对齐 */
  overflow-y: auto; /* 当内容超出时，显示垂直滚动条 */
  border-radius: 8px; /* 圆角边框 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 盒子阴影 */
  z-index: 9999; /* 确保模态框位于其他内容之上 */
}
/* 模态弹窗内容的样式 */
#news-details-modal .modal-content {
  background-color: #fff; /* 白色背景 */
  padding: 20px; /* 内边距 */
  border-radius: 5px; /* 圆角边框 */
  width: 40%; /* 宽度为视口的40% */
  max-height: 80%; /* 最大高度为视口的80% */
  overflow-y: auto; /* 当内容超出时，显示垂直滚动条 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 盒子阴影 */
  position: relative; /* 使子元素的绝对定位相对于这个容器 */
  overflow: hidden; /* 隐藏溢出内容 */
  box-sizing: border-box; /* 确保内边距包含在总宽度和高度中 */
}
/* 关闭按钮样式 */
#news-details-modal .close {
  position: absolute; /* 绝对定位在模态框的右上角 */
  top: 10px; /* 距离顶部10px */
  right: 10px; /* 距离右边20px */
  font-size: 1.5em; /* 字体大小 */
  cursor: pointer; /* 鼠标指针样式 */
  z-index: 10000; /* 确保按钮在顶部 */
}
/* 模态框内容中的段落样式 */
#news-details p {
  font-size: 1em; /* 字体大小 */
  line-height: 1.6; /* 行高 */
  color: #333; /* 字体颜色 */
}
/* 模态框内容中的图片样式 */
#news-details img {
  max-width: 100%; /* 最大宽度为容器宽度 */
  border-radius: 5px; /* 圆角边框 */
  margin: 10px 0; /* 上下边距 */
}
/* 模态框内容中的视频样式 */
#news-details video {
  width: 100%; /* 宽度为容器宽度 */
  border-radius: 5px; /* 圆角边框 */
  margin: 10px 0; /* 上下边距 */
}
/* 模态框中显示新闻详情样式 */
#news-details {
  height: 80vh; /* 高度设置为视口高度的80% */
  max-height: 80vh; /* 最大高度设置为视口高度的80% */
  overflow-y: auto; /* 当内容溢出时显示垂直滚动条 */
  padding: 20px; /* 内边距 */
  box-sizing: border-box; /* 确保内边距包含在总高度中 */
}
/* 日期标题样式 */
#news-list h3 {
  font-size: 1.5em; /* 调整字体大小 */
  margin: 0 0 10px 0px; /* 设置上下边距和左边距 */
  padding: 0; /* 设置内边距 */
  font-weight: bold; /* 设置字体加粗 */
}
/* 回到顶部按钮的样式 */
#back-to-top {
  position: fixed; /* 固定在视口位置 */
  bottom: 20px; /* 距离底部20px */
  right: 20px; /* 距离右边20px */
  background-color: #007bff; /* 背景色 */
  color: #fff; /* 文字颜色 */
  border: none; /* 去掉边框 */
  border-radius: 5px; /* 圆角 */
  padding: 10px 20px; /* 内边距 */
  cursor: pointer; /* 鼠标指针样式 */
  z-index: 1000; /* 确保按钮在顶部 */
}
/* 响应式设计 */
@media (max-width: 768px) {
  #news-details-modal .modal-content {
    width: 95%; /* 宽度占视口的95% */
    max-width: none; /* 不限制最大宽度 */
    max-height: 90%; /* 最大高度占视口的90% */
    padding: 15px; /* 减少内边距 */
  }
  #news-details {
    max-height: calc(90vh - 50px); /* 设置内容区域最大高度 */
  }
  #news-details-modal .close {
    font-size: 1.2em; /* 调整字体大小 */
    top: 5px; /* 减少距离顶部 */
    right: 5px; /* 减少距离右边 */
  }
  .news-item {
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 将子元素排列为列方向（垂直方向） */
    align-items: flex-start; /* 子元素在交叉轴（横向）方向上对齐到起始位置 */
    margin-left: 0; /* 去除左外边距 */
    padding-left: 0; /* 去除左内边距 */
    padding-top: 0; /* 去除顶部内边距 */
    padding-bottom: 10px; /* 底部内边距设为 10 像素 */
    border-left: none; /* 去除左边框 */
    border-top: 3px solid #007bff; /* 顶部边框为 3 像素宽的实线，颜色为蓝色 (#007BFF) */
  }
  .news-item .publish-time {
    position: relative; /* 使定位相对于正常流中的位置 */
    left: 0; /* 将元素的左边距设为 0 像素 */
    width: auto; /* 宽度自动调整 */
    text-align: left; /* 文本左对齐 */
    margin-bottom: 10px; /* 底部外边距设为 10 像素 */
  }
  .news-item .content {
    flex-direction: column; /* 将子元素排列为列方向（垂直方向） */
    align-items: flex-start; /* 子元素在交叉轴（横向）方向上对齐到起始位置 */
    margin-left: 0; /* 去除左外边距 */
  }
  .news-item img {
    max-width: 100%; /* 图片最大宽度为父容器的100% */
    max-height: 200px; /* 最大高度设置为200px，适应手机屏幕 */
    height: auto; /* 高度自动调整，保持长宽比 */
    margin-left: 0; /* 去除左边距 */
    margin-top: 10px; /* 上边距设置为10px */
  }
}