#news_web {
  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: 1000px; /* 设置内容的最大宽度 */
  margin: 0 auto; /* 让内容水平居中 */
  padding: 20px 40px; /* 内边距，保持内容与容器边缘的距离 */
  text-align: left; /* 文本左对齐 */
}

#news_web article {
  border-bottom: 2px solid #ddddde; /* 设置下边框线 */
  padding-bottom: 10px; /* 可选，给内容底部留出空间 */
  margin: 30px 0; /* 设置文章之间的垂直间距 */
}

div.horizontal, div.vertical {
  display: flex; /* 使用 Flexbox 布局 */
  margin: 20px 0; /* 每个文章之间的间距 */
}

.vertical {
  flex-direction: column; /* 竖排时，图在上，文字在下 */
}

.horizontal {
  flex-direction: row; /* 横排时，图在左，文字在右 */
  align-items: center; /* 确保图片和文字垂直居中对齐 */
}

.news_thumbnail {
  width: auto;
  height: 250px;
  cursor: pointer;
  transition: transform 0.3s ease;
  margin: 0px 20px;
  border-radius: 10px; /* 添加圆角 */
}

.news_thumbnail:hover {
  transform: scale(1.05);
}

#news_web header a {
  font-size: 120%; /* 调整文字大小 */
  color: black; /* 设置文字颜色 */
  text-decoration: none; /* 去掉下划线 */
  font-weight: bold; /* 设置字体为加粗 */
  transition: transform 0.3s ease;
  display: inline-block;
}

#news_web header a:hover {
  transform: scale(1.1);
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  /* 在小屏幕下，#news_web 的布局调整 */
  #news_web {
    padding: 10px; /* 减小内边距，适应小屏幕 */
    max-width: 100%; /* 最大宽度为100% */
  }

  div.horizontal {
    flex-direction: column; /* 横排切换为竖排 */
    align-items: flex-start; /* 图文排布，图在上，文字在下 */
  }

  div.vertical {
    flex-direction: column; /* 竖排不变 */
    align-items: flex-start; /* 图文排布，图在上，文字在下 */
  }

  .news_thumbnail {
    width: 100%; /* 图片宽度自适应 */
    height: 200px; /* 调整图片高度，适应小屏幕 */
  }

  #news_web header a {
    font-size: 100%; /* 小屏幕上缩小字体大小 */
  }

  #news_web article {
    margin: 15px 0; /* 缩小文章间距 */
  }
}