.justify-between {
  display: flex;
  justify-content: space-between;
}
.image-container-q {
  display: flex;
  flex-direction: column;
  gap: 25px; /* 行间距 */
  margin:4% 9%;
}
.link-list a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s;
}
.section_12 {
  height: auto;
  margin:37px auto ;
}
.group_9 {
  width: 247px;
  height: auto;
  border: 1px solid rgba(220, 220, 220, 1);
  padding:14px 0px;
    justify-content:center;
  align-items:center;
  display:flex;
  flex-wrap: wrap;
}
.group_10 {
  width: 215px;
  height: 296px;
  margin:0 auto;
}
.group_10 img{
  max-height: 100%;
}
.box_q10 {
    padding: 36px 0px;
}
.box_10  img{
width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.text-group_9 {
  width: auto;
  overflow-wrap: break-word;
  color: rgba(68, 68, 68, 1);
  font-size: 20px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: center;
  white-space: wrap;
  line-height: 30px;
  margin:  0 auto;
}
/* 通图专题 - 桌面端样式 (作为基础) */
.section_13 {
  display: flex;
  justify-content: space-between; /* 在桌面端保持两端对齐 */
  width: 100%; /* 改为100%或max-width，避免溢出 */
  margin: 0 auto; /* 居中 */
  box-sizing: border-box; /* 推荐加入，让padding和border不会增加元素总宽度 */
    margin:37px auto 73px;
}

.block_5 {
  background-color: rgba(255, 255, 255, 1);
  width: 48%; /* 在桌面端，两个卡片各占约一半宽度，留出间隙 */
  border: 1px solid rgba(220, 220, 220, 1);
  box-sizing: border-box; /* 重要！确保border不会撑开容器 */
  display: flex; /* 让内部元素可以更好地对齐 */
  padding: 55px 40px;
  gap:55px;
}

.image_2 {
  width: 221px; /* 桌面端可以暂时保留固定宽度，或使用百分比 */
  height: auto; /* 高度自动，保持图片比例 */
    height: 100%;
    object-fit: cover;
    object-position: center;
  margin: 0px; /* 统一四周的边距 */
}

.group_29 {
  box-sizing: border-box;
}

.text-group_39 {
  /* 宽度由父容器决定，无需设置 */
}

.text_21 {
  overflow-wrap: break-word;
  color: #373737;
  font-size: 24px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  line-height: 1.4; /* 使用相对单位行高 */
  margin-bottom: 15px; /* 使用margin代替固定的margin-top */
  min-height:136px;
   display: -webkit-box;           /* 必须 */
  -webkit-box-orient: vertical;   /* 必须 */
  -webkit-line-clamp: 4;          /* 指定显示的行数 */
  overflow: hidden;               /* 必须 */
}

.text_22 {
  overflow-wrap: break-word;
  color: rgba(55, 55, 55, 1);
  font-size: 24px;
  font-family: PingFangSC-Regular;
  text-align: left;
  line-height: 1.4;
  margin: 10px 0px;
}

.text_23 {
  overflow-wrap: break-word;
  color: rgba(129, 129, 129, 1);
  font-size: 18px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  line-height: 1.4;
}

.text-wrapper_2 {
  height: 34px;
  width: 66px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  background: #16BEFA;
border-radius: 5px;
}

.text_24 a {
  width: 40px;
  height: 28px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 20px;
  font-family: PingFangSC-Regular;
  text-decoration: none; /* 去掉链接下划线 */
  line-height: 28px;
  text-align: center;
}


/* --- 手机端响应式媒体查询 --- */
@media (max-width: 768px) {

  /* 1. 改造主容器，使其垂直排列 */
  .section_13 {
    flex-direction: column; /* 关键：从横向改为纵向 */
    width: 90%; /* 手机端宽度，留出一些边距 */
    max-width: none; /* 移除最大宽度限制 */
    gap: 20px; /* 卡片之间的垂直间距 */
  }

  /* 2. 改造卡片，使其占满容器宽度并横向排列内部元素 */
  .block_5 {
    width: 100%; /* 卡片宽度100% */
    height: auto; /* 高度由内容决定 */
    padding: 15px; /* 给卡片增加内边距，让内容不贴边 */
  }

  /* 3. 优化图片和文字布局 */
  .image_2 {
    width: 120px; /* 手机端图片缩小，固定一个合适的尺寸 */
    height: 120px; /* 固定高度，保持方形 */
    margin: 0; /* 重置外边距 */
    margin-right: 15px; /* 图片和文字之间的间距 */
    flex-shrink: 0; /* 防止图片在空间不足时被压缩 */
  }

  .group_29 {
    width: auto; /* 宽度自适应 */
    padding: 0; /* 重置内边距 */
    margin: 0; /* 重置外边距 */
  }

  /* 4. 优化文字样式和大小 */
  .text_21 {
    font-size: 16px; /* 手机端标题字号缩小 */
    /* 处理长标题：最多显示2行，超出部分显示省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 8px;
  }

  .text_22 {
    font-size: 14px; /* 地点字号缩小 */
    white-space: normal; /* 允许换行 */
    margin-bottom: 5px;
  }

  .text_23 {
    font-size: 13px; /* 时间字号缩小 */
    white-space: normal; /* 允许换行 */
  }

  /* 5. 优化预约按钮 */
  .text-wrapper_2 {
    align-self: flex-start; /* 按钮左对齐，在移动端更常见 */
    margin-top: 10px;
    width: 60px;
    height: 30px;
  }

  .text_24 a {
    font-size: 16px; /* 按钮文字缩小 */
  }
}

/* --- 响应式：针对手机端 --- */
/* 当屏幕宽度小于等于 768px 时应用以下样式 */
@media (max-width: 768px) {

  /* 1. 调整主容器边距 */
  .image-container-q {
    margin: 20px 15px; /* 使用固定像素值，更可控 */
    gap: 20px; /* 减小行间距 */
  }

  /* 2. 核心改造：图书列表容器 */
  .section_12 {
    width: 100%; /* 宽度改为100%，自适应父容器 */
    height: auto; /* 高度改为auto，由内容撑开 */
    flex-wrap: wrap; /* 允许项目换行 */
    justify-content: start; /* 换行后，所有项目整体居中对齐 */
    gap: 15px; /* 项目之间的间距 */
  }

  /* 3. 核心改造：图书卡片项目 */
  .group_9 {
    width: calc(50% - 15px); /* 宽度约为50%，并减去间距的一半，确保每行两个 */
    height: auto; /* 高度由内容决定 */
    margin: 0; /* 移除之前的margin */
    box-sizing: border-box; /* 推荐加上，让padding和border包含在宽度内 */
  }

  /* 4. 调整卡片内部内容 */
  .image-text_41 {
    width: 90%; /* 宽度改为百分比，相对于父容器 .group_9 */
    height: auto; /* 高度由内容决定 */
    margin: 5% auto; /* 使用百分比做边距，更灵活 */
    padding-bottom: 10px; /* 给文字底部留出空间 */
  }

  .group_10 {
    width: 100%; /* 宽度100%填充父容器 .image-text_41 */
    height: 0; /* 高度设为0，通过padding-top来创建固定宽高比 */
    padding-top: 140%; /* 创建一个宽高比，例如 296px / 215px ≈ 1.376, 即 137.6%。这里140%是个近似值，可以根据需要调整。这能确保图片区域不变形。 */
    position: relative; /* 为绝对定位的图片做准备 */
  }

  .group_10 img {
    position: absolute; /* 图片绝对定位 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持比例并覆盖 */
  }

  /* 5. 调整文字样式 */
  .text-group_9 {
    font-size: 16px; /* 减小字号，适应小屏幕 */
    line-height: 1.4; /* 调整行高 */
    margin-top: 8px; /* 减小上边距 */
  }
    .box_q10 {
  padding: 16px 0px 0px;
}
    .div_news .news_rt, .div_news .news_lt {
    width: 100%;
    float: none;
    margin-bottom: 0px;
  }
  .section_12 {
  margin: 16px auto 20px;
}
    .section_13 {
    flex-direction: column;
    width: 100%;
    max-width: none;
    gap: 20px;
      margin:16px 0px 26px;
  }
  .block_5{
  gap:20px;
  }
  .text_21 {
    font-size: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 8px;
    min-height:20px;
  }
}