.horizontal-menu {
  display: flex;
  flex-wrap: wrap; /* 允许换行（如果空间不足）*/
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 15px;}

.horizontal-menu .menu-item {
  font-size: 16px;
  text-decoration: none;
  color: #333;
  padding: 8px 12px;
  transition: color 0.2s;
  margin-top:10px;}

/* 当前栏目高亮样式 */
.horizontal-menu .menu-item.active {
  color: red !important;
  border-bottom: 2px solid red;}

/* 可选：悬停效果 */
.horizontal-menu .menu-item:hover {
  color: red;}
.navigator_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
  gap: 15px; /* 图片之间的间距 */
  padding: 0;
  margin: 0;
  list-style: none;}

.navigator_list li {
  text-align: center;}

/* 移除链接的下划线 */
.image-link {
  text-decoration: none; /* 移除链接的下划线 */
  color: inherit; /* 继承父元素的颜色 */
  display: block;}

.image-container {
  border: 2px solid #ddd; /* 边框颜色和宽度 */
  padding: 10px; /* 内边距 */
  border-radius: 8px; /* 圆角 */
  transition: transform 0.2s ease-in-out; /* 平滑过渡效果 */
  background-color: #fff; /* 设置背景色，增强对比度 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}

.image-container:hover {
  transform: scale(1.05);}

.image-container img {
  height: 150px; /* 固定图片高度 */
  width: auto; /* 自动调整宽度以保持比例 */
  object-fit: cover; /* 确保图片填充整个容器，可能会裁剪 */
  display: block; /* 移除图片底部空白 */
  margin-bottom: 10px;}

.image-caption {
  font-family: 'Arial', sans-serif; /* 使用无衬线字体，提高可读性 */
  font-size: 1rem; /* 使用相对单位，适应不同的屏幕尺寸 */
  line-height: 1.5; /* 行高设置为字体大小的1.5倍，增加可读性 */
  color: #333; /* 深灰色，比纯黑更柔和 */
  margin: 0; /* 移除默认的段落间距 */
  padding: 0 5px; /* 给标题一点左右内边距 */
  word-wrap: break-word;}