* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
}
/* 基础样式 */
.navbar {
  display: flex;
  justify-content: flex-end;
  background: #333;
  padding: 10px;
  position: relative;
}

.head-content {
  display: flex;
  justify-content: space-between;
  background-color: #333;
  align-items: center;
  width: 100%; /* 确保宽度填满 */
}

.head-text {
  color: white;
  padding: 0 15px;
  font-size: 1.2rem;
}

/* 导航项样式 */
.nav-items {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-items li a {
  color: white;
  padding: 10px 15px;
  text-decoration: underline;
  white-space: nowrap;
  display: block;

}

.nav-items li a:hover {
  background: #555;
}

/* 菜单按钮样式 */
.menu-toggle {
  display: none;
}

.menu-button {
  color: white;
  font-size: 24px;
  cursor: pointer;
  display: none;
  padding: 5px 10px;
  background: none;
  border: none;
}

/* 响应式设计 */
@media (max-width: 600px) {
  .navbar {
    flex-wrap: wrap;
    padding: 10px;
  }
  
  .menu-button {
    display: block;
    order: 1;
  }
  
  .nav-items {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #333;
    display: none;
    flex-direction: column;
    z-index: 100;
  }
  
  .menu-toggle:checked ~ .nav-items {
    display: flex;
  }
  
  /* 防止父容器被撑大 */
  .head-content {
    flex-wrap: wrap;
  }
}

.intro-context {
  width: 100%;
  height: 200px;
  margin: 20px auto;
  padding: 20px;

  display: flex;
  justify-content: center;   /* 水平居中 */
  align-items: center;       /* 垂直居中 */

  font-size: 3rem;
  font-weight: bold;
  color: #333;
  border-bottom: 3px solid #4CAF50;
  letter-spacing: 1px;
  white-space: nowrap;       /* 不换行 */
}

/* 父容器样式 */
.wrapper1 {
  max-width: 1200px;           /* 最大宽度，避免过宽 */
  width: 90%;                  /* 使内容自适应 */
  padding: 20px;               /* 内边距 */
  background-color: rgba(red, green, blue, alpha);    /* 白色背景 */
  border-radius: 8px;          /* 圆角效果 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影效果 */
  text-align: center;          /* 水平居中文本 */
  height: 560px;
}

/* .more-infor超链接样式 */
.more-infor {
  display: inline-block;     /* 使超链接成为块级元素，支持宽度和高度 */
  width: 80%;                /* 设置宽度为80%，根据需要调整 */
  max-width: 600px;          /* 设置最大宽度，避免超宽 */
  margin: 20px auto;         /* 上下间隔20px，左右居中 */
  padding: 15px;             /* 内边距，增加与文本的距离 */
  text-align: center;        /* 水平居中文本 */
  background-color: #4CAF50; /* 背景色：绿色 */
  color: #fff;               /* 文字颜色：白色 */
  border: 2px solid #4CAF50; /* 边框颜色与背景色一致 */
  border-radius: 25px;       /* 圆角矩形 */
  text-decoration: none;     /* 默认去除下划线 */
  font-weight: bold;         /* 加粗文字 */
  transition: background-color 0.3s, transform 0.2s; /* 平滑过渡 */
}

.more-infor:hover {
  background-color: #45a049; /* 悬停时背景色变为稍微暗一点的绿色 */
  border-color: #45a049;     /* 悬停时边框颜色与背景色一致 */
  text-decoration: underline; /* 悬停时显示下划线 */
  transform: scale(1.05);     /* 悬停时稍微放大按钮 */
}
.section-intromoutain {
  position: relative;              /* 为了定位蒙版 */
  background-image: url(上方.jpg); /* 背景图 */
  background-position: center;
  background-size: cover;
  padding: 30px 0;                 /* 上下内边距 */
  display: flex;                   /* 使内容居中 */
  justify-content: center;         /* 水平居中 */
  border-bottom: 4px solid #4CAF50;
}

.section-intromoutain::before {
  content: '';                      /* 必须指定内容为空 */
  position: absolute;               /* 绝对定位 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);  /* 半透明黑色蒙版 (可以调整透明度) */
  z-index: 1;                       /* 确保蒙版位于背景上方，但内容下方 */
  pointer-events: none;             /* 禁止蒙版层阻止点击事件 */
}

.intro-context {
  font-size: 2rem;           /* 文本大小 */
  color:#fff;
  margin-bottom: 15px;          /* 与下方内容的间隔 */
}

/* .more-infor 超链接样式 */
.more-infor {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  text-decoration: none;
  border-radius: 25px;
  font-weight: bold;
  position: relative; /* 确保伪元素的绝对定位基于父元素 */
  z-index: 10; /* 使超链接浮在上层 */
  transition: background-color 0.3s, transform 0.2s;
}

/* 创建默认下划线 */
.more-infor::after {
  content: ''; /* 内容为空，只是用于显示下划线 */
  position: absolute;
  bottom: 0;
  left: 50%; /* 默认起始位置居中 */
  width: 0%; /* 默认宽度为0 */
  height: 2px; /* 下划线的高度 */
  background-color: white; /* 下划线的颜色 */
  transform: translateX(-50%); /* 确保下划线以元素中心为起点 */
  transition: width 0.3s ease, transform 0.3s ease; /* 平滑过渡 */
}



/* section-conciseintro样式 */
/* 整体容器 */
.section-conciseintro {
  display: flex;                      /* 使用Flex布局 */
  justify-content: space-between;      /* 左右分布 */
  align-items: flex-start;             /* 垂直顶部对齐 */
  gap: 20px;                           /* 左右元素之间的间距 */
  padding: 40px;                       /* 增加内边距 */
  background-image: url('back2.jpg'); /* 背景图片 */
  background-position: center;         /* 背景居中 */
  background-size: cover;              /* 背景覆盖整个容器 */
  background-repeat: no-repeat;        /* 防止背景重复 */
  height: 500px;                       /* 容器高度 */
  position: relative;                  /* 必须添加相对定位，为伪元素定位提供参考 */
}

/* 在section-conciseintro上添加蒙版 */
.section-conciseintro::before {
  content: '';                            /* 伪元素内容为空 */
  position: absolute;                     /* 绝对定位 */
  top: 0;                                 /* 覆盖容器的顶部 */
  left: 0;                                /* 覆盖容器的左侧 */
  right: 0;                               /* 覆盖容器的右侧 */
  bottom: 0;                              /* 覆盖容器的底部 */
  background: rgba(0, 0, 0, 0.4);        /* 半透明黑色蒙版 */
  border-radius: 8px;                     /* 保持圆角效果 */
  z-index: 1;                             /* 使蒙版位于图片和文字下方 */
}

/* 标题样式 */
.title {
  font-size: 2rem;              /* 字体大小 */
  font-weight: bold;            /* 加粗 */
  text-align: center;           /* 水平居中 */
  color: #fff ;                  /* 字体颜色 */
  
  position: relative;           /* 用于下划线定位 */
  display: inline-block;        /* 确保标题只有所需宽度 */
  opacity: 0;                   /* 初始透明度为0，文字不可见 */
  animation: fadeIn 2s forwards; /* 加载时逐渐显示 */
  z-index: 2;                   /* 确保标题位于蒙版之上 */
}

/* 下划线效果 */
.title::after {
  content: '';                  /* 清空内容 */
  position: absolute;           /* 绝对定位 */
  bottom: -5px;                 /* 下划线与文字之间的间距 */
  left: 0;                       /* 左侧对齐 */
  width: 100%;                   /* 下划线宽度为100% */
  height: 2px;                   /* 下划线高度 */
  background-color: #4CAF50;     /* 下划线颜色 */
}

/* 渐显效果 */
@keyframes fadeIn {
  0% {
    opacity: 0;                  /* 开始时透明 */
    transform: translateY(-20px); /* 初始位置稍微上移 */
  }
  100% {
    opacity: 1;                  /* 完全显示 */
    transform: translateY(0);    /* 恢复到正常位置 */
  }
}

/* 文字内容 */
.concise-text {
  flex: 1;                             /* 文字区域占据可用空间 */
  font-size: 1.2rem;                   /* 字体大小 */
  line-height: 1.8;                    /* 增大行高，优化阅读 */
  color: #ffffff;                      /* 文字颜色为白色 */
  text-align: justify;                 /* 文本两端对齐 */
  text-justify: inter-word;            /* 使空格更加均匀 */
  margin-top: 6%;
  font-family: Arial, sans-serif;      /* 清晰的无衬线字体 */
  font-weight: 400;                    /* 常规字体粗细 */
  letter-spacing: 0.5px;               /* 适当增加字母间距 */
  word-wrap: break-word;               /* 防止单词溢出 */
  padding: 10px;                       /* 增加内边距 */
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景增强可读性 */
  border-radius: 8px;                  /* 圆角效果 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 阴影效果 */
  z-index: 2;                           /* 确保文字位于蒙版之上 */
}

/* 图片容器 */
.image-container {
  display: flex;                          /* 使用flex布局，确保图片在同一行 */
  justify-content: space-between;         /* 在可用空间中均匀分配图片之间的间距 */
  gap: 20px;                              /* 图片之间的间距 */
  flex-wrap: nowrap;                      /* 禁止换行，确保图片始终在同一行 */
  position: relative;                     /* 需要在此容器上添加蒙版 */
  z-index: 2;                             /* 确保图片项在蒙版之上 */
}

/* 单个图片项容器 */
.image-item {
  flex: 1 1 30%;                          /* 每个图片项占父容器的30%宽度 */
  display: flex;                          /* 图片和简介垂直排列 */
  flex-direction: column;                 /* 图片和文字垂直排列 */
  gap: 10px;                              /* 图片与简介之间的间距 */
  z-index: 2;                             /* 使内容位于蒙版之上 */
}

/* 图片样式 */
.intro-image {
  margin-top: 25%;
  width: 100%;                            /* 图片宽度占容器的100% */
  height: 200px;                          /* 固定高度 */
  object-fit: cover;                      /* 保证图片按比例填充容器，裁剪多余部分 */
  border-radius: 8px;                     /* 图片圆角效果 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 图片阴影效果 */
  transition: transform 0.3s ease;        /* 图片悬停时放大效果 */
  z-index: 2;                             /* 使图片位于蒙版之上 */
}

/* 鼠标悬停时图片变大 */
.image-item:hover .intro-image {
  transform: scale(1.05);                 /* 放大图片 */
}

/* 图片简介样式 */
.image-description {
  color: white;                           /* 文本颜色 */
  font-size: 1rem;                        /* 字体大小 */
  font-weight: bold;                      /* 字体加粗 */
  text-align: center;                     /* 简介居中显示 */
  background-color: rgba(0, 0, 0, 0.6);  /* 半透明背景 */
  padding: 10px;                          /* 内边距 */
  border-radius: 8px;                     /* 圆角效果 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 阴影效果 */
  z-index: 3;                             /* 使文字位于蒙版和图片之上 */
}

/* conciseintro样式结束 */

/* gallery section样式 */
.section-gallery {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 自动填充网格，每个图片项至少300px宽 */
  gap: 20px; /* 图片之间的间距 */
  padding: 20px;
  width: 100%; /* 使容器占满整行 */
}

/* gallery section样式 */
.section-gallery {
  display: flex;                     /* 使用flex布局 */
  flex-direction: column;            /* 使标题和内容垂直排列 */
  align-items: center;               /* 水平居中容器 */
  padding: 40px 20px;                /* 上下内边距增大 */
  background-image: url('IMG_20250704_151356.jpg'); /* 背景图片 */
  background-position: center;       /* 背景图片居中 */
  background-size: cover;            /* 背景图片覆盖整个容器 */
  background-repeat: no-repeat;      /* 防止背景重复 */
  width: 100%;
  border-top: 4px solid #4CAF50;     /* 顶部边框，用来区分标题与内容 */
  border-bottom:4px solid #4CAF50;
  position: relative;                /* 为了定位蒙版 */
}

/* 在 gallery section 上添加蒙版 */
.section-gallery::before {
  content: '';                            /* 伪元素内容为空 */
  position: absolute;                     /* 绝对定位 */
  top: 0;                                 /* 覆盖容器的顶部 */
  left: 0;                                /* 覆盖容器的左侧 */
  right: 0;                               /* 覆盖容器的右侧 */
  bottom: 0;                              /* 覆盖容器的底部 */
  background: rgba(0, 0, 0, 0.4);        /* 半透明黑色蒙版 */
  border-radius: 8px;                     /* 保持圆角效果 */
  z-index: 1;                             /* 使蒙版位于图片和文字下方 */
}

/* gallery标题样式 */
.gallery-title {
  font-size: 2rem;                   /* 设置标题的字体大小 */
  font-weight: bold;                 /* 设置字体加粗 */
  margin-bottom: 10px;               /* 设置标题与下方分隔线之间的间距 */
  color: #fff;                       /* 设置标题颜色 */
  text-align: center;                /* 设置标题居中 */
  text-transform: uppercase;         /* 将标题字母转为大写 */
  border-bottom: 2px solid #4CAF50;  /* 添加下方的绿色边框 */
  padding-bottom: 10px;              /* 增加边框与内容之间的间距 */
  z-index: 2;                        /* 确保标题位于蒙版之上 */
}

/* gallery-item容器 */
.gallery-item {
  position: relative;                /* 用于定位按钮 */
  overflow: hidden;                  /* 确保鼠标悬停时图片不会溢出 */
  border-radius: 8px;                /* 圆角效果 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  /* 阴影效果 */
  transition: transform 0.3s ease;    /* 平滑过渡 */
  display: flex;                     /* 使图片和按钮可以在容器中居中对齐 */
  justify-content: center;           /* 水平居中图片 */
  align-items: center;               /* 垂直居中图片 */
  width: 70%;                         /* 使每个图片项占满父容器的70% */
  max-width: 700px;                  /* 限制最大宽度，避免过宽 */
  margin-bottom: 30px;               /* 图片和下方图片之间的间距 */
  z-index: 2;                        /* 确保图片位于蒙版之上 */
}

/* 图片样式 */
.gallery-item img {
  width: 100%;                        /* 保证图片的宽度始终填充容器 */
  height: auto;                       /* 保证图片的高度按比例自动调整 */
  object-fit: cover;                  /* 保证图片按比例填充容器，不变形 */
  transition: transform 0.3s ease;    /* 图片变大时的过渡 */
}

/* 鼠标悬停时图片变大 */
.gallery-item:hover img {
  transform: scale(1.1);             /* 放大图片 */
}

/* 按钮样式 */
.gallery-btn {
  position: absolute;
  bottom: 10px;                      /* 将按钮定位到图片的底部 */
  left: 10px;                        /* 将按钮定位到图片的左侧 */
  background-color: rgba(0, 0, 0, 0.7);  /* 半透明黑色背景 */
  color: white;
  padding: 12px 25px;                /* 增加按钮内边距 */
  font-weight: bold;
  text-decoration: none;
  border-radius: 30px;               /* 圆角按钮 */
  font-size: 1rem;                   /* 字体大小 */
  transition: all 0.3s ease;         /* 所有属性的平滑过渡 */
  opacity: 0.9;                      /* 默认按钮的透明度 */
}

/* 鼠标悬停时按钮变大并改变背景色 */
.gallery-btn:hover {
  transform: scale(1.1);             /* 放大按钮 */
  background-color: rgba(0, 0, 0, 0.9);  /* 增加按钮的背景色深度 */
  text-decoration: underline;        /* 悬停时显示下划线 */
  opacity: 1;                        /* 悬停时按钮完全显示 */
}

/* 上方山景色部分 */
/* 整体容器 */
.shangfangscene {
  padding: 40px 20px;                /* 内边距 */
  background-image: url('微信图片_20250705102030.jpg'); /* 背景图片 */
  background-position: center;        /* 背景居中 */
  background-size: cover;             /* 背景覆盖整个容器 */
  background-repeat: no-repeat;       /* 防止背景重复 */
  text-align: center;                 /* 文字居中 */
  position: relative;                 /* 为了定位蒙版 */
  overflow: hidden;                   /* 防止内容溢出 */
}

/* 在shangfangscene上添加蒙版 */
.shangfangscene::before {
  content: '';                         /* 伪元素内容为空 */
  position: absolute;                  /* 绝对定位 */
  top: 0;                              /* 覆盖容器的顶部 */
  left: 0;                             /* 覆盖容器的左侧 */
  right: 0;                            /* 覆盖容器的右侧 */
  bottom: 0;                           /* 覆盖容器的底部 */
  background: rgba(0, 0, 0, 0.5);     /* 半透明黑色蒙版 */
  z-index: 1;                          /* 使蒙版位于背景下方 */
}

/* 标题部分 */
.scene-title h2 {
  font-size: 2rem;                     /* 标题字体大小 */
  font-weight: bold;                   /* 字体加粗 */
  margin-bottom: 10px;                 /* 标题下方间距 */
  color: #fff;                         /* 字体颜色为白色 */
  position: relative;                  /* 让z-index生效 */
  z-index: 2;                          /* 确保标题位于蒙版上方 */
}

/* 标题下的下划线 */
.underline {
  width: 60px;                         /* 下划线宽度 */
  height: 4px;                         /* 下划线高度 */
  background-color: #4CAF50;           /* 下划线颜色 */
  margin: 0 auto 20px auto;            /* 下划线居中 */
}

/* 简短介绍 */
.scene-intro {
  font-size: 1.1rem;                   /* 文字大小 */
  color: #fff;                         /* 文字颜色为白色 */
  margin-bottom: 30px;                 /* 与九宫格之间的间距 */
  line-height: 1.6;                    /* 行高 */
  max-width: 800px;                    /* 限制最大宽度 */
  margin-left: auto;                   /* 水平居中 */
  margin-right: auto;                  /* 水平居中 */
  position: relative;                  /* 让z-index生效 */
  z-index: 2;                          /* 确保介绍文本在蒙版上方 */
}

/* 九宫格容器 */
.scene-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 每行三个图片 */
  gap: 20px;                            /* 图片间隙 */
  max-width: 1200px;                    /* 最大宽度 */
  margin: 0 auto;                       /* 居中显示 */
  position: relative;                   /* 让z-index生效 */
  z-index: 2;                           /* 确保图片项在蒙版上方 */
}

/* 每个图片项 */
.scene-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;                   /* 圆角效果 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  /* 阴影效果 */
  transition: transform 0.3s ease;      /* 平滑过渡效果 */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  z-index: 2;                           /* 确保图片项在蒙版上方 */
}

/* 可见状态：淡入并上移 */
.scene-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 图片样式 */
.scene-item img {
  width: 100%;                         /* 图片宽度填充容器 */
  height: 100%;                        /* 图片高度填充容器 */
  object-fit: cover;                   /* 保持图片比例 */
  transition: transform 0.3s ease;     /* 鼠标悬停时放大效果 */
}

/* 鼠标悬停时图片变大 */
.scene-item:hover img {
  transform: scale(1.1);               /* 放大图片 */
}

/* 响应式设计：当屏幕宽度较小时 */
@media (max-width: 768px) {
  .scene-gallery {
    grid-template-columns: repeat(2, 1fr); /* 每行显示两个图片 */
  }
}

@media (max-width: 480px) {
  .scene-gallery {
    grid-template-columns: 1fr;            /* 每行显示一个图片 */
  }
}


/* member部分样式 */
/* 整体容器 */
.section-member {
  border-top: 4px solid #4CAF50;
  padding: 20px;                    /* 减少上下内边距，降低整体高度 */
  background-image: url('微信图片_20250705102257.jpg'); /* 背景图片 */
  background-position: center;      /* 背景居中 */
  background-size: cover;           /* 背景覆盖整个容器 */
  background-repeat: no-repeat;     /* 防止背景重复 */
  text-align: center;
  height: auto;                     /* 高度自适应 */
  position: relative;               /* 为了定位蒙版 */
  overflow: hidden;                 /* 防止内容溢出 */
  border-top: 4px solid #45a049;
}

/* 在section-member上添加蒙版 */
.section-member::before {
  content: '';                         /* 伪元素内容为空 */
  position: absolute;                  /* 绝对定位 */
  top: 0;                              /* 覆盖容器的顶部 */
  left: 0;                             /* 覆盖容器的左侧 */
  right: 0;                            /* 覆盖容器的右侧 */
  bottom: 0;                           /* 覆盖容器的底部 */
  background: rgba(0, 0, 0, 0.5);     /* 半透明黑色蒙版 */
  z-index: 1;                          /* 使蒙版位于背景下方 */
}

/* 标题样式 */
.section-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 20px;
  z-index: 2;                         /* 确保标题位于蒙版上方 */
  position: relative;                 /* 使z-index生效 */
  color: white;                       /* 文字颜色为白色 */
}

/* 图片展示容器 */
.members-container {
  display: flex;                     /* 使用flex布局 */
  flex-wrap: wrap;                    /* 允许换行 */
  gap: 15px;                          /* 减少图片之间的间距 */
  justify-content: flex-start;        /* 默认左对齐 */
  margin-top: 10px;                   /* 上间距减小 */
  position: relative;                 /* 使z-index生效 */
  z-index: 2;                         /* 确保图片项在蒙版上方 */
}

/* 每个成员的容器 */
.member-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex: 0 0 23%;                     /* 每个项目占23%的宽度，允许4个元素在第一行 */
  height: 240px;                     /* 固定高度 */
  margin-bottom: 15px;               /* 底部间距减小 */
  z-index: 2;                        /* 确保每个成员容器位于蒙版上方 */
}

/* 成员图片 */
.member-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  border-radius: 8px;
}

/* 成员信息区域 */
.member-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px;
  text-align: center;
  visibility: hidden; /* 默认隐藏 */
  opacity: 0;
  transform: translateY(100%); /* 初始位置在容器下方 */
  transition: opacity 0.3s ease, transform 0.3s ease; /* 弹出效果 */
}

/* 鼠标悬停时显示信息 */
.member-item:hover .member-img {
  transform: scale(1.05); /* 放大图片 */
}

.member-item:hover .member-info {
  visibility: visible;
  opacity: 1;
  transform: translateY(0); /* 弹出到容器顶部 */
}

/* 鼠标悬停时容器放大 */
.member-item:hover {
  transform: scale(1.1); /* 放大容器 */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* 放大阴影效果 */
}

/* 名字和分工样式 */
.name {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.role {
  font-size: 1rem;
}

/* 保持第一行和第二行的图片容器大小一致 */
.members-container .member-item {
  flex: 0 0 23%; /* 保证所有成员容器宽度一致 */
}

/* 调整第二行的图片显示位置，保持大小一致 */
.members-container .member-item:nth-child(n + 5) {
  flex: 0 0 23%; /* 第二行显示3个元素，每个占30% */
  margin-left: 5%; 
  justify-self: center; /* 保证第二行容器居中显示 */
}

/* 保证每行4个图片，最后一行调整为3个 */
@media (max-width: 1024px) {
  .members-container {
    justify-content: center; /* 平板设备时居中显示 */
  }
  .member-item {
    flex: 0 0 45%; /* 每行显示2个成员 */
  }
}

@media (max-width: 600px) {
  .members-container {
    justify-content: center; /* 居中显示 */
  }
  .member-item {
    flex: 0 0 90%; /* 每行显示1个成员 */
  }
}


/* contact 内容部分 */
.section-contact {
  padding: 40px 20px;
  background-color: #f5f5f5;
  text-align: center;

}

#contact-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
  text-align: center;
}


.underline {
  width: 60px;
  height: 4px;
  background-color: #4CAF50;
  margin: 0 auto 20px auto;
}

form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 3%;
}

input, textarea {
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
}

textarea {
  height: 150px;
  resize: vertical;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

/* footer 内容部分 */
.footer-content {
  display: flex;                      /* 使用flex布局 */
  flex-direction: column;             /* 垂直排列 */
  justify-content: center;            /* 垂直居中 */
  align-items: center;                /* 水平居中 */
  max-width: 1200px;                   /* 最大宽度 */
  margin: 0 auto;                     /* 水平居中 */
  padding: 0 20px;                    /* 左右内边距 */
  background-color: #333;             /* 背景颜色（深色） */
  color: #fff;                        /* 字体颜色为白色 */
  height: 150px;                      /* 高度 */
}

.footer-down p {
  font-size: 1rem;                    /* 字体大小 */
  margin: 0;                          /* 去除默认间距 */
  margin-bottom: 10px;                /* 版权信息与下方链接的间距 */
  text-align: center;                 /* 居中文本 */
}

.footer-up {
  display: flex;                      /* 水平排列社交媒体链接 */
  gap: 15px;                          /* 链接之间的间距 */
  margin-top: 10px;                   /* 上方间距 */
}

/* 社交媒体链接样式 */
.social-link {
  color: #fff;                        /* 链接颜色为白色 */
  text-decoration: none;              /* 去除下划线 */
  font-size: 1.2rem;                  /* 字体大小 */
  transition: color 0.3s;             /* 平滑过渡效果 */
}

/* 悬停效果：改变链接颜色 */
.social-link:hover {
  color: #4CAF50;                     /* 悬停时绿色 */
}

/* 响应式设计，适应小屏幕 */
@media (max-width: 600px) {
  .footer-content {
    flex-direction: column;           /* 在小屏幕下垂直排列 */
    align-items: center;              /* 中心对齐 */
    height: auto;                     /* 高度自适应 */
    padding: 10px;                    /* 增加内边距 */
  }

  .footer-up {
    margin-top: 10px;                 /* 上方间距 */
    justify-content: center;          /* 链接居中 */
  }

  .footer-down p {
    font-size: 0.9rem;                /* 较小字体 */
    margin-bottom: 5px;                /* 减小间距 */
  }
}