#news_web_content {
  border-style: groove;
  border-width: thin;
  border-color: #ddddde;
  border-radius: 15px;

  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  height: auto; /* 自动高度，适应内容 */

  max-width: 1200px; /* 设置内容的最大宽度 */
  margin: 0 auto; /* 让内容水平居中 */
  padding: 20px 40px; /* 内边距，保持内容与容器边缘的距离 */
  text-align: left; /* 文本左对齐 */
}

#news_web_content header {
  font-size: 120%; /* 调整文字大小 */
  color: black; /* 设置文字颜色 */
  text-decoration: none; /* 去掉下划线 */
  font-weight: bold; /* 设置字体为加粗 */
  text-align: center; /* 居中对齐 */
  margin-bottom: 20px; /* 为标题和文章内容之间添加一些间距 */
}

#news_web_content p {
  text-indent: 2em; /* 段落首行缩进2个字符宽度 */
  line-height: 1.6; /* 设置段落行间距，使文本更易阅读 */
  margin: 15px 0; /* 为段落之间添加间距 */
}

.article_thumbnail {
  max-width: 100%; /* 图片最大宽度不超过父容器 */
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
  margin: 10px 0; /* 图片上下添加间距 */
  border-radius: 10px; /* 添加圆角 */
}

.article_thumbnail:hover {
  transform: scale(1.05); /* 鼠标悬停时放大图片 */
}

#images {
  display: flex;
  justify-content: center; /* 水平居中 */
  flex-wrap: wrap; /* 如果图片数量过多，允许换行 */
  gap: 20px; /* 图片之间的间距 */
}

@media screen and (max-width: 768px) {
  /* 在小屏幕上调整布局 */
  #news_web_content {
    padding: 10px 20px; /* 减少内边距 */
    max-width: 100%; /* 最大宽度调整为100% */
  }

  #news_web_content header {
    font-size: 100%; /* 缩小标题字体 */
  }

  .article_thumbnail {
    width: 100%; /* 图片宽度适应父容器 */
    height: 200px; /* 固定高度 */
  }

  #images {
    flex-direction: column; /* 在小屏幕上，图片垂直排列 */
    align-items: center; /* 图片居中对齐 */
  }
}