/* --- 全 局样式 --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Microsoft YaHei", sans-serif;
  line-height: 1.6;
  color: #333;
  background: url(../images/dwcddh_bg.jpg) no-repeat top #fff;
  background-size: 100% 800px;
}
.mt-20 {
  margin-top: 20px;
}
a {
  text-decoration: none;
  color: #000;
}
a:hover {
  text-decoration: none;
  color: #c00;
}
ul {
  list-style: none;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* --- 布局容器 --- */
.container {
  width: 95%;
  max-width: 1280px;
  margin: 0 auto;
  background-color: #fff9ed;
}
/* --- 顶部背景 --- */
.header-bg {
  width: 95%;
  max-width: 1280px;
  margin: 0 auto;
  height: auto; /* 可以根据需要调整高度 */
}
/* --- 导航栏样式 (PC端) --- */
.navbar {
  background-color: #c00;
  width: 100%; /* 强制100%宽度 */
  padding: 0;
  position: relative; /* 为移动端定位按钮做参考 */
}
/* 导航列表 */
.navbar ul {
  display: flex;
  align-items: center;
}
.navbar li {
  margin: 0;
  flex: 1;
  text-align: center;
}
.navbar a {
  display: block;
  padding: 15px 20px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  transition: background 0.3s;
}
.navbar a:hover {
  background-color: #900;
  text-decoration: none;
}
/* --- 汉堡菜单按钮 (默认隐藏，仅在移动端显示) --- */
.menu-toggle {
  display: none;
  background: rgba(99, 0, 0, .5);
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 0.8rem 1rem;
  z-index: 1002; /* 保证层级最高 */
}
/* --- 主要内容区域 --- */
.section {
  padding: 20px;
}
.section-title {
  color: #c00;
  height: 50px;
  padding: 10px;
  background: url(../images/dwcddh_title.png) no-repeat center;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section-title h3 {
  color: #fff;
  font-size: 1.2rem;
}
.section-title a {
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  font-size: 0.8rem;
}
.title-bg {
  background: linear-gradient(to right, #fff6f6, #ca0403);
}
.title-bg h3 {
  color: #be070b;
}
.section-title a:hover {
  background: rgba(255, 255, 255, .5);
}
/* 两栏布局 */
.two-columns {
  display: flex;
  gap: 20px;
}
.column-left, .column-right {
  flex: 1;
}
/* 精确宽度控制 (PC端) */
.w-600 {
  flex: 0 0 600px;
}
.w-610 {
  flex: 0 0 610px;
}
.w-400 {
  flex: 0 0 400px;
}
.w-820 {
  flex: 0 0 820px;
}
/* 组件样式 */
.top-news {
  width: 100%;
  margin: 10px auto;
  box-sizing: border-box;
  padding-bottom: 20px;
}
.top-news ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  /* 定义两列，每列 50% 宽度 (1fr 代表 1份) */
  grid-template-columns: 1fr 1fr;
  gap: 15px; /* 行间距 */
}
.top-news li {
  padding: 0 10px;
}
.top-news li:nth-child(1) {
  grid-column: 1 / -1; /* 从第1条线开始，到最后一条线结束（即占满整行） */
  text-align: center;
}
.top-news li:nth-child(1) a {
  font-size: 1.5rem; /* 字体放大 */
  font-weight: bold;
  color: #c00;
  text-decoration: none;
  display: block;
  transition: transform 0.2s;
}
/* --- 后两条新闻（次新闻）具体样式 --- */
.top-news li:nth-child(2), .top-news li:nth-child(3) {
  flex: 1; /* 各占 50% 宽度 */
}
.top-news li:nth-child(2) a, .top-news li:nth-child(3) a {
  font-size: 1rem; /* 字体较小 */
  align-items: center;
}
/* 红色箭头 */
.top-news li:nth-child(2) a::before, .top-news li:nth-child(3) a::before {
  content: "●";
  color: #000;
  margin-right: 8px;
  font-weight: bold;
}
.hiSlider {
  overflow: hidden;
  height: 400px;
  width: 600px;
}
.hiSlider-item {
  float: left;
}
.slideshow img {
  width: 100%;
  height: 400px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.list-bg {
  padding: 20px 10px;
  background: linear-gradient( to bottom, #fff9ed, #fff1cc)
}
.news-list li {
  display: flex; /* 核心：启用弹性布局 */
  justify-content: space-between; /* 核心：两端对齐 */
  align-items: center; /* 垂直居中对齐 */
  padding: 12px 0; /* 上下间距 */
}
.news-list a {
  text-decoration: none;
  font-size: 1rem;
  display: flex; /* 让箭头和文字在一行 */
  align-items: center;
  /* 动画配置 */
  transition: transform 0.2s ease-out;
  transform: translateZ(0);
}
.news-list a:hover {
  transform: translateZ(0) translateY(-5px);
  color: #c00;
}
.news-list a::before {
  content: ">";
  color: red;
  margin-right: 8px;
  display: inline-block;
}
.news-list span {
  color: #b00;
  font-size: .9rem;
  margin-left: 10px;
  white-space: nowrap;
}
.news-list .one-list a {
  font-weight: bold;
}
.news-list .one-list a::before {
  content: none;
}
.knowledge-list li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
/* 党员风采网格 */
.member-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}
.member-card {
  text-align: center;
  padding: 15px;
}
.member-card img {
  width: 240px;
  height: 160px;
  margin: 0 auto 10px;
  object-fit: cover;
  border-radius: 5px;
  /* 动画配置 */
  transition: transform 0.2s ease-out;
  transform: translateZ(0);
}
.member-card a:hover img {
  transform: translateZ(0) translateY(-5px);
  box-shadow: 3px 3px 3px #aaa;
}
/* 基层活动网格 */
.news-photo {
  display: flex; /* 核心：启用弹性布局 */
  justify-content: space-between; /* 核心：两端对齐 */
  align-items: center; /* 垂直居中对齐 */
  gap: 25px;
}
.news-photo-img {
  flex: 0 0 320px;
}
.news-photo-img img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 5px;
  /* 动画配置 */
  transition: transform 0.2s ease-out;
  transform: translateZ(0);
}
.news-photo-img a:hover img {
  transform: translateZ(0) translateY(-5px);
  box-shadow: 3px 3px 3px #aaa;
}
.news-photo-date {
  padding-top: 20px;
  font-size: .9rem;
  color: #b00;
}
.image-row {
  width: 100%;
  margin: 0 auto; /* 居中显示 */
  padding-bottom:30px;
}
/* 图片列表：核心布局 */
.img-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  /* --- 核心代码：一行 4 列 --- */
  /* 1fr 代表 1 份，4 个 1fr 就是平分 4 份 */
  grid-template-columns: repeat(4, 1fr);
  /* 图片之间的间距 */
  gap: 30px;
}
/* 图片链接容器 */
.img-list li a {
  display: block;
  overflow: hidden; /* 关键：隐藏放大后溢出的图片部分 */
  border-radius: 8px; /* 圆角（可选） */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影（可选） */
  aspect-ratio: 5 / 2; /* 强制保持 4:3 的比例，确保高度也一致 */
}
/* 图片本身 */
.img-list li img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 关键：让图片填满容器且不变形（裁剪模式） */
  transition: transform 0.4s ease; /* 动画过渡 */
}
/* 悬停效果：图片放大 */
.img-list li a:hover img {
  transform: scale(1.1); /* 放大 1.1 倍 */
}
/* --- 手机端适配 --- */
@media (max-width: 768px) {
  .img-list {
    /* 手机端改为 1 行 2 列 */
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
/* 页脚 */
.footer {
  background-color: #ca0403;
  color: #fff;
  text-align: center;
  padding: 50px;
  font-size: .9rem;
}

.class-title {margin:20px auto;max-width:980px;}
.class-title h2 {background:#c00;color:#fff;font-size:1.4rem;padding:10px 30px;display: inline-block;border-radius:5px;}
.position {border-bottom: 1px dotted #ccc;padding:10px;}
.sec-content-box {max-width:980px;margin: 0 auto;}
.zt-list li {border-bottom: 1px dotted #ccc;}
.show-title {margin:20px;text-align: center;}
.show-title h2 {font-size:1.4rem;padding:10px;}
.show-content {padding:10px 0;}
.show-content img {margin:auto;}
/* --- 响应式设计 (移动端) --- */
@media (max-width: 768px) {
  /* 1. 显示汉堡按钮 */
  .menu-toggle {
    display: block;
    position: fixed; /* 固定定位 */
    top: 0; /* 顶部 */
    right: 0; /* 右侧 */
    width: auto;
  }
  /* 2. 导航栏变为弹出式 */
  .navbar ul {
    display: block; /* 垂直排列 */
    position: fixed; /* 固定定位，覆盖内容 */
    top: 0;
    left: -100%; /* 默认隐藏在屏幕左侧 */
    width: 70%; /* 菜单宽度 */
    height: 100vh; /* 全屏高度 */
    background-color: #c00;
    transition: 0.3s ease; /* 滑动动画 */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    padding-top: 60px; /* 给汉堡按钮留出空间 */
  }
  /* 3. 激活状态：菜单滑入 */
  .navbar ul.active {
    left: 0;
  }
  .navbar li {
    border-bottom: 1px solid #900;
  }
  .navbar a {
    padding: 15px 25px;
  }
  /* 4. 布局堆叠 */
  .two-columns {
    flex-direction: column;
  }
  /* 移动端取消固定宽度，改为100%自适应 */
  .w-600, .w-610, .w-400, .w-820 {
    flex: 0 0 100%;
    width: 100%;
  }
  .hiSlider {
	height:auto;
    aspect-ratio: 6 / 4;
  }
  .slideshow img {
  height: 100%;
  object-fit: cover;
  }
	.news-photo {
  display:block; /* 核心：启用弹性布局 */
  align-items: center; /* 垂直居中对齐 */
}
  .news-photo-img {
    flex: 0 0 100%;
  }
  .member-showcase {
    grid-template-columns: repeat(1, 1fr);
  } /* 移动端每行2个 */
  .top-news ul {
    grid-template-columns: 1fr; /* 手机端变为单列 */
  }
  .top-news li:nth-child(1) {
    grid-column: auto; /* 取消跨列 */
  }
}