:root {
  --quick-nav-width: calc(100% / 10 - 5px);
  /* PC 端每行 10 个，减小内容间距 */
  --quick-nav-margin: 1.5px;
  /* 控制间距 */
  --quick-nav-height: 38px;
  /* 控制高度 */
  --items-per-row-mobile: 5;
  /* 移动端每行 5 个 */
  --bg-color-1: #fdfdfd;
  /* 第一个背景颜色 */
  --bg-color-2: #fffefe;
  /* 第二个背景颜色 */
  --bg-color-3: #fefefe;
  /* 第三个背景颜色 */
  --bg-color-4: #fefefe;
  /* 第四个背景颜色 */
  --bg-color-5: #fefefe;
  /* 第五个背景颜色 */
  --bg-color-6: #fefefe;
  /* 第六个背景颜色 */
  --bg-color-7: #fefefe;
  /* 第七个背景颜色 */
  --bg-color-8: #fefefe;
  /* 第七个背景颜色 */
  --bg-color-9: #fefefe;
  /* 第七个背景颜色 */
  --bg-color-10: #fefefe;
  /* 第七个背景颜色 */
  --bg-color-11: #fefefe;
  /* 第七个背景颜色 */
  --bg-color-12: #fefefe;
  /* 第七个背景颜色 */
  --bg-color-13: #fefefe;
  /* 第七个背景颜色 */
  --bg-color-14: #fefefe;
  /* 第七个背景颜色 */
  --bg-color-15: #fefefe;
  /* 第七个背景颜色 */
  --bg-color-16: #fefefe;
  /* 第七个背景颜色 */
  --bg-color-17: #fefefe;
  /* 第七个背景颜色 */
  --bg-color-18: #fefefe;
  /* 第七个背景颜色 */
}

.header {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 665px;
  /* PC端的高度 */
  background-image: url('你的图片路径');
  /* 确保路径正确 */
  background-size: cover;
  /* 确保背景图片覆盖整个区域 */
  background-position: center;
  /* 居中背景图片 */
  background-repeat: no-repeat;
  /* 防止背景图片重复 */
  background-color: #fffefe;
  /* 与图片颜色一致，防止缝隙 */
  transition: background 0.5s ease;
  /* 添加过渡效果 */
}

.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  pointer-events: none;
  z-index: 1;
}

.container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.quick-nav {
  background-color: rgba(255, 255, 255, 0);
  padding: 0px;
  position: relative;
  margin-top: -310px;
  padding-bottom: 0px;
  z-index: 10;
  max-width: 1165px;
  margin-left: auto;
  margin-right: auto;
}

.quick-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.quick-nav .nav-item {
  border: 1px solid #dfd3dd;
  width: var(--quick-nav-width);
  /* 控制宽度 */
  height: var(--quick-nav-height);
  /* 控制高度 */
  margin: var(--quick-nav-margin);
  /* 控制间距 */
  padding: 0;
  border-radius: 6px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.quick-nav .nav-item a {
  text-decoration: none;
  color: #c973b2;
  font-size: 15px;
  font-weight: bold;
  display: block;
  line-height: var(--quick-nav-height);
  /* 控制字体大小与高度匹配 */
  text-align: center;
}

.quick-nav .nav-item a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 768px) {
  :root {
    --quick-nav-width: calc(100% / var(--items-per-row-mobile) - 2px);
    /* 设置移动端每行的项数 */
    --quick-nav-height: 35px;
    /* 移动端高度调整 */
    --quick-nav-margin: 1px;
    /* 移动端间距调整 */
  }

  .header {
    height: 250px;
    /* 移动端高度调整 */
    background-size: cover;
    background-position: center;
    background-color: #fffefe;
    /* 与图片背景颜色一致 */
  }

  .quick-nav {
    top: -5px;
    margin-top: -30px;
  }

  .quick-nav ul {
    flex-direction: row;
  }

  .quick-nav .nav-item {
    width: var(--quick-nav-width);
    /* 控制宽度 */
    height: var(--quick-nav-height);
    /* 控制高度 */
    font-size: 12px;
    /* 控制字体大小 */
    margin: var(--quick-nav-margin);
    /* 控制移动端内容之间的间距 */
  }

  .quick-nav .nav-item a {
    font-size: 12px;
    /* 控制字体大小 */
  }
}

.main-content {
  position: relative;
  z-index: 2;
  padding-top: 6px;
}

footer.footer {
  text-align: center;
  padding: 10px;
  background: #f1f1f1;
  border-top: 1px solid #e1e1e1;
}

.banner-container {
  width: 100%;
  text-align: center;
  margin: 5px 0;
}

/* 默认是 PC 端的样式 */
.responsive-banner {
  width: 100%;
  height: auto;
  max-height: 220px;
  /* ✅ 你可以自己调整这个高度 */
  object-fit: cover;
  border-radius: 15px;
  opacity: 0;
  /* 初始状态为透明 */
  transition: opacity 0.3s;
  /* 过渡效果 */
}

/* 移动端样式（屏幕宽度 ≤768px 时） */
@media screen and (max-width: 768px) {
  .responsive-banner {
    max-height: 80px;
    /* ✅ 移动端更小的高度 */
    border-radius: 10px;
    /* 也可以独立控制圆角 */
  }
}

.card-title span {
  font-size: 14px;
  color: #666;
}

/* 控制所有元素的样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

.time-container {
  position: relative;
  text-align: center;
  margin: 5% 0;
  /* 根据需要设置上下间距 */
}

.time {
  font-size: 3vw;
  /* 根据需要调节大小 */
  position: absolute;
  top: 40%;
  /* 可以根据需要设置为 10% */
  left: 50%;
  transform: translateX(-50%);
  color: #ffffffcc;
  /* 字体颜色 */
  text-shadow:
    1px 1px 0 #00000000,
    /* 第一条阴影 */
    -1px -1px 0 #00000000,
    /* 第二条阴影 */
    1px -1px 0 #00000000,
    /* 第三条阴影 */
    -1px 1px 0 #00000000;
  /* 第四条阴影 */
  padding: 10px;
  /* 添加内边距 */
  background-color: rgb(237 223 223 / 3%));
  /* 半透明背景 */
  border-radius: 10px;
  /* 圆角 */
}

.navigation {
  background-color: #333;
}

.navigation ul {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

.navigation li {
  margin: 0 15px;
}

.navigation a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}

.navigation a:hover {
  text-decoration: underline;
}

/* 媒体查询调整样式以保持比例 */
@media (max-width: 600px) {
  .time {
    font-size: 8vw;
    /* 小屏幕时增大字体 */
    top: 63%;
    /* 适当调整位置 */
  }
}


/* 修复 hover 样式避免宽高变化，并添加颜色变化 */
ul li a:hover {
  /* 不要直接改变宽高、内外边距 */
  text-decoration: none;
  transform: scale(1.05);
  /* 使用 transform 增加放大效果 */
  transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  /* 平滑动画 */
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2);
  /* 修改为不带偏移的阴影 */
  color: rgb(147 112 219);
  /* 添加变色效果，悬停时变成红色 */
}


/* 确保所有列表项大小固定 */
ul li {
  list-style: none;
  display: inline-block;
  /* 或 flex 布局 */
  vertical-align: top;
  box-sizing: border-box;
  /* 确保内边距和边框不影响大小 */
  margin: 0px;
  /* 调整间距 */
  width: calc(10% - 20px);
  /* 根据需要调整宽度 */
  text-align: center;
}

/* 保证 ul 不会被 hover 的样式挤压 */
ul {
  display: flex;
  flex-wrap: wrap;
  /* 自动换行 */
  justify-content: space-between;
}

ul {
  display: flex;
  flex-wrap: wrap;
  /* 允许换行 */
  justify-content: flex-start;
  /* 元素靠左对齐 */
  gap: 0px;
  /* 控制元素间距 */
  padding: 0;
  /* 去掉默认内边距 */
  margin: 0;
  /* 去掉默认外边距 */
}

ul li {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  /* 去掉外边距 */
  width: calc(12.5% - 10px);
  /* 每行8个元素时的宽度，减去间距 */
  text-align: center;
}



/* 推荐小容器样式 */
.recommend-container {
  display: inline-block;
  /* 使它与文本并排显示 */
  background-color: #26b9b7;
  /* 默认背景色 */
  color: white;
  /* 默认文字颜色 */
  font-weight: bold;
  padding: 5px 3px;
  /* 为推荐标签添加适当的内边距 */
  border-radius: 7px;
  /* 圆角 */
  margin-right: 2px;
  /* 使其与后面的文本有一定的间距 */
  font-size: 1em;
  /* 设置字体大小 */
  line-height: 1;
  /* 保持文字垂直居中 */
}

/* 鼠标悬停时背景颜色变化 */
.recommend-container:hover {
  background-color: #e04e23;
  /* 悬停时的背景色 */
}

/* 自定义容器大小（可选） */
.recommend-container.small {
  font-size: 0.8em;
  padding: 4px 6px;
}

.recommend-container.medium {
  font-size: 1em;
  padding: 5px 10px;
}

.recommend-container.large {
  font-size: 1.2em;
  padding: 6px 12px;
}



/*新增*/

@media screen and (max-width: 768px) {
  .card {
    margin: 1px auto;
    /* 确保内容不挤压 */
  }

  .quick-nav ul {
    display: flex;
    flex-wrap: wrap;
  }

  .quick-nav .nav-item a {
    font-size: 12px;
    /* 调整字体大小 */
  }
}


img {
  max-width: 100%;
  height: auto;
}



:root {
  --background-color: #ffffff00;
  --text-color: #000000;
}

body.dark-mode {
  --background-color: #1e1e1e;
  --text-color: #ffffff;
}

.card,
.quick-nav,
.row.no-gutters ul li a {
  background-color: var(--background-color);
  color: var(--text-color);
}


.content-container {
  position: relative;
  /* 确保子元素基于这个容器定位 */
}

.black-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.8;
  /* 设置透明度 */
  z-index: 10;
  /* 确保覆盖内容 */
}

.card .dhsl ul li {

  padding: 0px;
  /* 添加内边距 */
  margin: 0px;
  /* 增加外边距，分隔每个块 */
  border-radius: 0px;
  /* 可选：增加圆角效果 */
}

.card .dhsl ul li a {

  text-decoration: none;
  /* 去掉下划线 */
  display: block;
  /* 使链接占满整个背景区域 */
}

/* 默认（白天模式） */
.card .dhsl ul li {
  background-color: #fefefe;
  /* 背景黑色 */
  color: red;
  /* 白天文字为红色 */
}

/* 针对黑夜模式 */
body.dark .card .dhsl ul li,
[data-theme="dark"] .card .dhsl ul li {
  color: white;
  /* 黑夜模式文字为白色 */
}


/* 默认情况下，card-header 使用黑色文字 */
.card-header h5,
.card-header h5 strong {
  color: #000;
  /* 白天模式下的标题颜色为黑色 */
}

/* 黑夜模式下，修改 card-header 区域的文字颜色为白色 */
body.dark-mode .card-header h5,
body.dark-mode .card-header h5 strong {
  color: #ffffff;
  /* 黑夜模式下标题文字颜色为白色 */
}

/* 如果标题中包含链接 .more，也可以调整它的颜色 */
body.dark-mode .card-header .more {
  color: #ffffff;
  /* 黑夜模式下修改 "more" 链接颜色 */
}

/* 针对链接中的文本颜色变化 */
body.dark-mode .links-top ul li a {
  color: #ffffff;
  /* 黑夜模式下修改链接文字颜色为白色 */
}

body.dark-mode .links-top ul li a:hover {
  color: #ff9800;
  /* 黑夜模式下鼠标悬停时的颜色，使用亮色来突出 */
}

/* 修改图片文字描述区域 */
body.dark-mode .links-top ul li span b {
  color: #ffffff;
  /* 黑夜模式下修改文字描述颜色为白色 */
}

/* 这里是对特定标签 <font> 中的颜色进行调整 */
body.dark-mode .links-top ul li font {
  color: #ff0000;
  /* 你可以自定义这个颜色，如果需要 */
}

/* 默认情况下，公告区域背景为白色，文字为黑色 */
.announcement-container div {
  background-color: #ffffff;
  /* 白天模式下的背景颜色 */
  color: #000000;
  /* 白天模式下的文字颜色 */
  border: 1px solid rgba(0, 0, 0, 0.125);
  /* 边框颜色 */
}

/* 黑夜模式下，修改公告区域的背景颜色和文字颜色 */
body.dark-mode .announcement-container div {
  background-color: #333333 !important;
  /* 黑夜模式下的背景颜色 */
  color: #ffffff !important;
  /* 黑夜模式下的文字颜色 */
}

/* 针对 "温馨提示："、"最新网址："、"公告："等文字颜色控制 */
body.dark-mode .announcement-container div>span.name hong,
body.dark-mode .announcement-container div>span.name hong strong,
body.dark-mode .announcement-container div>span.name hong font {
  color: #ffcc00 !important;
  /* 修改标题文字颜色为黄色 */
}

/* 针对各个标题图标修改颜色 */
body.dark-mode .announcement-container div>i.fa-bell,
body.dark-mode .announcement-container div>i.fa-chain,
body.dark-mode .announcement-container div>i.fa-bullhorn {
  color: #ffcc00 !important;
  /* 修改图标颜色为黄色 */
}

/* 修改公告区域中的链接颜色 */
body.dark-mode .announcement-container div a {
  color: #ffcc00 !important;
  /* 在黑夜模式下修改链接颜色 */
}

/* 对公告区中的特定颜色和悬停进行控制 */
body.dark-mode .announcement-container div a:hover {
  color: #ff6600 !important;
  /* 黑夜模式下鼠标悬停时的链接颜色 */
}

/* 针对 .hong 类中字体颜色的调整 */
body.dark-mode .hong {
  color: #ffcc00 !important;
  /* 修改 .hong 类文字的颜色 */
}

/* 进一步确保标题文字的颜色 */
body.dark-mode .announcement-container div span.name hong strong {
  color: #ffcc00 !important;
  /* 强制设置 strong 中标题的颜色 */
}

/* 针对 i 元素图标的进一步颜色设置 */
body.dark-mode .announcement-container div i {
  color: #ffcc00 !important;
  /* 修改图标的颜色 */
}