.top-space {
  display: flex;                    /* 使用 Flexbox 布局 */
  justify-content: center;          /* 水平居中对齐 */
  align-items: center;              /* 垂直居中对齐 */
  height: 150px;                    /* 高度调整 */
  padding: 20px;                    /* 内边距 */
  gap: 20px;                        /* 子元素之间的间距 */
  background:#59a5f5;
  border-radius: 8px 8px 0 0; /* 圆角化 */
  /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

.s-search {
  display: flex;                    /* 使用 Flexbox 布局 */
  flex-direction: column;           /* 子元素垂直排列 */
  align-items: center;              /* 垂直居中对齐 */
  gap: 15px;                        /* 子元素之间的间距 */
}

.s-type-list {
  display: flex;                    /* 使用 Flexbox 布局 */
  justify-content: center;          /* 水平居中对齐 */
  gap: 10px;                        /* 标签之间的间距 */
}

/* 搜索框上方父项 */
.s-type-list label {
  cursor: pointer;                  /* 鼠标指针为手型 */
  padding: 8px 12px;                /* 内边距 */
  color: #ffffff;                   /* 默认浅灰色文字 */
  transition: color 0.3s ease;      /* 颜色过渡效果 */
  opacity: 0.7
 
}

.s-type-list label.active {
  color: #ffffff;                   /* 激活状态为深灰色文字 */
  font-weight: bold;                /* 字体变为粗体 */
  opacity: 1
}

.s-type-list label:hover,
.s-type-list label:focus {
  color: #ffffff;                   /* 悬停或聚焦时文字颜色略深 */
}

.s-search form {
  display: flex;                    /* 使用 Flexbox 布局 */
  align-items: center;              /* 垂直居中对齐 */
}

/* 搜索框 */
.search-container {
  position: relative;               /* 父容器使用相对定位，以便按钮绝对定位 */
  width: 900px;                     /* 搜索容器宽度 */
  margin-bottom: 5px;              /* 底部外边距 */
}

#search-text {
  width: 100%;                      /* 输入框占满容器宽度 */
  padding: 8px 60px 8px 20px;        /* 内边距，右边留出按钮位置 */
  border: 1px solid #ddd;           /* 边框样式 */
  border-radius: 100px;               /* 圆角 */
  box-sizing: border-box;           /* 包括内边距和边框在内计算宽度 */
  outline: none;                    /* 去除默认轮廓 */
  transition: border-color 0.3s ease; /* 边框颜色过渡 */
  height: 50px
}

#search-text:focus {
  border-color: #007bff;            /* 聚焦时边框颜色改为蓝色 */
}

.search-button {
  position: absolute;               /* 绝对定位在容器内 */
  right: 0;                         /* 右对齐 */
  top: 0;                           /* 顶部对齐 */
  bottom: 0;                        /* 持续到容器底部 */
  padding: 0 20px;                  /* 按钮的内边距 */
  background: none;                 /* 无背景颜色 */
  color: #555555;                   /* 按钮文字颜色为深灰色 */
  border: none;                     /* 无边框 */
  cursor: pointer;                  /* 鼠标指针为手型 */
  display: flex;                    /* 使用 Flexbox 布局 */
  align-items: center;              /* 垂直居中对齐 */
  gap: 5px;                         /* 图标与文字之间的间距 */
}

.search-group {
  display: none;                    /* 默认隐藏 */
}

.search-group.active {
  display: flex;                    /* 激活时使用 Flexbox 布局 */
  justify-content: center;          /* 水平居中对齐 */
  gap: 10px;                        /* 间距 */
}

/* 搜索框下方子项 */
.search-type {
  display: flex;                    /* 使用 Flexbox 布局 */
  justify-content: center;          /* 水平居中对齐 */
  gap: 10px;                        /* 标签之间的间距 */
}

.search-type label {
  cursor: pointer;                  /* 鼠标指针为手型 */
  padding: 6px 10px;                /* 内边距 */
  color: #ffffff;                   /* 默认浅灰色文字 */
  transition: color 0.3s ease;      /* 颜色过渡效果 */
  opacity: 0.7
}

.search-type label.active {
  color: #ffffff;                   /* 激活状态为深灰色文字 */
  font-weight: bold;                /* 字体变为粗体 */
  opacity: 1
}

.search-type label:hover {
  color: #ffffff;                   /* 悬停时文字颜色略深 */
}

ul {
  list-style: none;                 /* 去掉默认的圆点 */
  padding: 0;                       /* 去掉内边距 */
  margin: 0;                        /* 去掉外边距 */
}