body { 
  background-color: #f1f3f4;
  margin-top: 100px; 
  padding: 0;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  
}

/* 针对支持自定义滚动条的浏览器 */  
html {  
  scrollbar-width: none; /* Firefox */  
  -ms-overflow-style: none;  /* IE 10+ */  
}  
  
html::-webkit-scrollbar {  
  display: none; /* Chrome, Safari, Opera */  
}  
  
/* 同时确保页面可以滚动 */  
body {  
  overflow-y: scroll; /* 保持y轴滚动 */  
  height: 100vh; /* 假设你想要页面全屏滚动 */  
}
.abcd {
    display: flex;
 justify-content: space-between;
 width: 1100px;
 margin: auto;
}

#progress-bar-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: #fff;
            z-index: 9999;
        }
        
        #progress-bar {
            height: 100%;
            background-color: #4285f4;
            width: 0%;
            transition: width 0.5s;
        }
        
        .hidden {
            display: none;
        }
        
        /* 禁止所有元素被选择 */
        * {
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }
        
        /* 允许特定元素（如输入框）被选择 */
        input,
        textarea {
            user-select: text;
            -webkit-user-select: text;
            -moz-user-select: text;
            -ms-user-select: text;
        }


/* 禁止所有元素被选择 */
* {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* 允许特定元素（如输入框）被选择 */
input, textarea {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

@font-face {
  font-family: '钉钉进步体';
  src: url('../font/DingTalk JinBuTi.woff2') format('woff2'); /* 指定字体文件路径 */
  font-weight: normal;
  font-style: normal;
}

.content {
    flex: 1;
    margin: 0 10px; /* 单独给内容容器设置左右外边距 */
    padding-bottom: 20px; /* 保证底部栏不会覆盖页面内容 */
}
footer {
    position: relative;
    width: 100%;
    background-color: #fff;
    color: #585959;
    padding: 5px 0px;
    text-align: center;
    margin-top: 0px; /* 设置底部栏的顶部外间距 */
    letter-spacing: 1px; /* 设置文字间距 */
}

footer p, 
footer a {
    font-size: 12px; /* 文字大小 */
    line-height: 1.5; /* 文字上下间距 */
    margin-bottom: 10px; /* 段落之间的下外间距 */
    letter-spacing: 1px; /* 设置文字间距 */
}

footer a {
    text-decoration: none; /* 取消超链接下划线 */
    color: #585959; /* 超链接文字颜色 */
    margin: 0 5px;
}

footer a:hover {
    text-decoration: underline; /* 悬停时的下划线 */
    color: #4285f4; /* 悬停时的字体颜色 */
}

.container999 {
    max-width: 1050px; /* 设置容器最大宽度 */
    margin: 0 auto; /* 左右内边距为auto，使内容居中 */
    padding: 0 20px; /* 设置容器的左右内边距 */
}

.container999 a {
    text-decoration: none; /* 取消下划线 */
}

.container999 a:hover {
    text-decoration: none; /* 取消悬停时的下划线 */
}

.friend-links {
    background-color: #f7f7f7; /* 友链内容的背景颜色 */
    font-size: 12px;
    padding: 5px; /* 友链内容的内边距 */
    border-radius: 3px; /* 圆角半径 */
}

.friend-links a {
    text-decoration: none; /* 取消超链接的下划线 */
    margin: 10px 10px; /* 设置链接与链接之间的外边距：上下为10px，左右为10px */
    display: inline-block; /* 确保链接作为独立的块级元素进行换行 */
}

.friend-links a:hover {
    text-decoration: none; /* 鼠标悬停时取消下划线 */
}

/* 在不同大小的屏幕上设置不同的文字大小 */
@media screen and (max-width: 768px) {
    footer p, 
    footer a {
        font-size: 12px; /* 小屏幕上的文字大小 */
        line-height: 1.5; /* 小屏幕上的文字上下间距 */
        margin-bottom: 10px; /* 段落之间的下外间距 */
        letter-spacing: 1px; /* 小屏幕上的文字间距 */
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    footer p, 
    footer a {
        font-size: 12px; /* 中屏幕上的文字大小 */
        line-height: 1.5; /* 中屏幕上的文字上下间距 */
        margin-bottom: 10px; /* 段落之间的下外间距 */
        letter-spacing: 1px; /* 中屏幕上的文字间距 */
    }
}

@media screen and (min-width: 1025px) {
    footer p, 
    footer a {
        font-size: 12px; /* 大屏幕上的文字大小 */
        line-height: 1.5; /* 大屏幕上的文字上下间距 */
        margin-bottom: 10px; /* 段落之间的下外间距 */
        letter-spacing: 1px; /* 大屏幕上的文字间距 */
    }
}


a {
    text-decoration: none;
}

.container0 {
  
  position: relative;
  max-width: 1050px;
  margin-top: 30px; /* 设置顶部外边距，例如这里是20像素 */
  margin-bottom: 20px; /* 设置底部外边距，例如这里是30像素 */
  margin-left: auto;
  margin-right: auto;
}

.container0-description {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 10px; /* 左右内边距不变，仍为10像素 */
  font-size: 13px;
  color: #333;
  z-index: 1; /* 保持z-index值以确保描述在容器内容之上显示 */
}






/* 响应式调整 */
@media (min-width: 768px) {
  .container0 {
   font-family: '钉钉进步体';
  }


}

/* 添加媒体查询针对小屏幕设备 */
@media (min-width: 768px) { /* 这里的480px可以根据需要调整，代表小屏幕的阈值 */
  .container {
    font-family: '钉钉进步体';
  }
}



.container {
  
  position: relative;
  max-width: 1050px;
  margin-top: 0px; /* 设置顶部外边距，例如这里是20像素 */
  margin-bottom: 20px; /* 设置底部外边距，例如这里是30像素 */
  margin-left: auto;
  margin-right: auto;
}

.container-description {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 10px; /* 左右内边距不变，仍为10像素 */
  font-size: 13px;
  color: #333;
  z-index: 1; /* 保持z-index值以确保描述在容器内容之上显示 */
}

.container1 {
  position: relative;
  max-width: 1050px;
  margin: 0 auto;
  padding: 0 5px; /* 添加左右内边距，例如这里设为5像素 */
}

.container1-description {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #fff;
  padding: 5px 10px; /* 添加左右内边距，例如这里设为10像素 */
  font-size: 12px;
  color: #333;
  z-index: 1; /* 可能需要设置一个z-index值以确保描述在容器内容之上显示 */
}

.links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-gap: 10px;
  margin-top: 10px;
  justify-content: flex-start; /* 添加此行使元素靠左对齐 */
}



/* 保持原有.links的样式不变，但您可以根据需要调整以适应新结构 */

/* 可选：为.tabs-container添加响应式设计，根据需要调整 */
@media screen and (max-width: 768px) {
  .tab-links {
    flex-direction: column;
  }
}


.link {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  background-color: #fff;
  border-radius: 3px;
  transition: background-color 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}

.link:hover {
  background-color: #fff;
  transform: translateY(-5px);
}

.link img {
  max-height: 20px;
  max-width: 20px;
  margin-left: 10px;
  margin-right: 5px;
}

.link a {
  margin: 0;
  font-size: 8px;
  text-align: left;
  color: #000;
}

.special-link::after {
  content: "";
  position: absolute;
  top: 5px; /* 调整上边距 */
  right: 5px; /* 调整右边距 */
  background-image: url("../image/点.png");
  background-size: contain;
  width: 8px;
  height: 8px;
}





/* 对于中等屏幕尺寸 */
@media screen and (min-width: 769px) and (max-width: 1210px) {
  .links {
    grid-template-columns: repeat(5, minmax(140px, 1fr)); /* 在中等屏幕下每行固定为6列 */
  }
}

/* 已存在的小屏幕样式 */
@media screen and (max-width: 768px) {
  .links {
    grid-template-columns: repeat(3, 1fr);
  }

  .link img {
    max-height: 14px;
    max-width: 14px;
	margin-left: 7px;
  margin-right: 2px;
  }

  .link a {
    font-size: 10px;
  }
}

/* 已存在的大屏幕样式（如果需要单独设定更大屏幕尺寸下的样式） */
@media screen and (min-width: 1211px) {
  .links {
    grid-template-columns: repeat(6, minmax(140px, 1fr)); /* 在大屏幕下每行固定为8列 */
  }
}

.ppp {
  
}

/* 首先清除body和html的默认样式 */
body, html {
  
  height: 100%;
}


/* 当屏幕宽度小于或等于768px时，恢复默认字体 */
@media (max-width: 768px) {
  .top-bar {
    font-family: sans-serif; /* 这里换成你想在小屏幕上使用的默认字体 */
  }
}

.top-bar {
  font-family: '钉钉进步体';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  width: 100%;
  height: auto;
  
  /* 添加背景颜色透明度和高斯模糊 */
  background-color: rgba(255, 255, 255, 0.7); /* 你可以调整透明度，如0.7为70%不透明 */
  backdrop-filter: blur(10px); /* 高斯模糊的像素值，根据需要调整 */
  
  /* 确保内容不受模糊影响，如果需要的话 */
  -webkit-backdrop-filter: blur(10px);
  
  color: #333;
}




/* 新增滚动时顶部栏底部边框样式 */
.top-bar--scrolled {
  box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.2); /* 这里可以调整边框效果，如透明度、颜色和模糊程度 */
}

/* 新增内部容器，用于放置Logo、Title和Search Box */
.top-bar__content {
  display: flex;
  align-items: center;
  width: 100%;
}

/* 为Logo、Title和Search Box创建单独的类以设置各自的左右外间距 */
.logo {
 
}





/* 左侧Logo或标题的左外间距 */
.logo {
  font-size: 24px;
  font-weight: bold;
  margin-left: 20px; /* 默认左外间距 */
  margin-right: 0px; /* 示例：设置Logo右边的外间距 */
}



/* 调整左侧Logo在小屏幕设备上的左外间距 */
@media (max-width: 767px) {
  .logo {
    margin-left: 20px; /* 小屏幕设备减小左外间距 */
    margin-right: 0px; /* 小屏幕设备上设置右外间距 */
  }
}

/* 大屏幕设备Logo左外间距 */
@media (min-width: 768px) {
  .logo {
    margin-left: 20px; /* 大屏幕设备增加左外间距 */
  }
}

.title {

  font-size: 20px;
  color: #2f3030;
}


/* Search Box样式 */
/* Search Box样式 */
.search-box-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; /* 设置宽度为100% */
    max-width: 100%; /* 确保最大宽度为100% */
    margin: auto; /* 居中对齐 */
    padding: 0 10px; /* 增加左右内边距，防止内容紧贴边缘 */
    box-sizing: border-box; /* 包括内边距和边框在内的总宽度 */
}

.tabs-container {
    display: flex;
    overflow-x: auto;
    width: 50%; /* 设置宽度为100% */
    max-width: 100%; /* 确保最大宽度为100% */
    white-space: nowrap;
    border-radius: 5px;
    padding: 5px;
    box-sizing: border-box; /* 包括内边距和边框在内的总宽度 */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #e8eaea #f4f5f6; /* Firefox */
}

/* WebKit 内核浏览器（如 Chrome 和 Safari）的滚动条样式 */
.tabs-container::-webkit-scrollbar {
    height: 2px;
}

.tabs-container::-webkit-scrollbar-track {
    background-color: #f4f5f6;
}

.tabs-container::-webkit-scrollbar-thumb {
    background-color: #e8eaea;
    border-radius: 5px;
}

.tabs-container::-webkit-scrollbar-thumb:hover {
    background-color: #e8eaea;
}

/* Firefox 的滚动条拇指 hover 样式（可能需要JavaScript辅助实现完美的hover效果） */
.tabs-container:hover::-moz-scrollbar-thumb {
    background-color: #e8eaea;
}

.tabs {
    position: relative;
    flex: 1; /* 使Tab项自适应宽度 */
    min-width: 50px; /* 确保最小宽度 */
    height: 30px;
    display: flex; /* 使用Flexbox布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    cursor: pointer;
    font-size: 14px;
    color: #343a40;
    background-color: transparent;
    border: none;
    outline: none;
    transition: background-color 0.3s ease;
    border-radius: 2px;
    margin-right: 5px; /* 保持Tab之间的水平间隔 */
    padding: 0;
    box-sizing: border-box; /* 包括内边距和边框在内的总宽度 */
}

.tabs:last-child {
    margin-right: 0; /* 移除最后一个Tab的右边距 */
}

@media (min-width: 768px) {
    .tabs {
        font-family: '钉钉进步体';
    }
    .tabs-container {
        font-family: '钉钉进步体';
    }
}

@media (max-width: 768px) {
    .tabs-container {
        width: 100%; /* 设置宽度为100% */
    }
}

.tabs.actives {
    color: #4285f4;
    background-color: rgba(0, 123, 255, 0.1);
    transition: background-color 0.3s ease;
    border-radius: 2px;
}

.search-box {
    display: flex; /* 默认显示搜索框，并使用flex布局适应不同屏幕 */
    align-items: center;
    border-radius: 5px; /* 增大圆角 */
    padding: 10px; /* 增加内边距 */
    transition: all 0.3s ease; /* 添加过渡效果 */
    width: 100%; /* 设置宽度为100% */
    background-color: #ffffff; /* 设置背景颜色为白色 */
    box-sizing: border-box; /* 包括内边距和边框在内的总宽度 */
}

input[type="text"] {
    border: none;
    outline: none;
    flex-grow: 1;
    background-color: transparent; /* 设置背景为透明 */
    padding: 5px; /* 添加内边距 */
    transition: all 0.3s ease; /* 添加过渡效果 */
    font-size: 14px; /* 增加字体大小 */
}

.search-box button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease; /* 添加过渡效果 */
    padding: 0; /* 移除按钮内边距 */
}

.search-box button img {
    width: 20px; /* 增加图标宽度 */
    height: 20px; /* 增加图标高度 */
    object-fit: contain; /* 确保图标适应容器 */
}

@media (min-width: 768px) {
    .search-box-wrapper {
        max-width: 1100px; /* 设置最大宽度 */
    }
}

@media (max-width: 767px) {
    .search-box-wrapper {
        max-width: 100%; /* 确保最大宽度为100% */
    }
}



/* 右侧链接容器 */
.top-bar__right-link {
  display: flex;
  align-items: center;
  margin-left: auto;
  font-size: 16px;
  color: #333;
  text-decoration: none;
  margin-right: 20px; /* 默认右外间距 */
}

/* 右侧链接样式 */
.top-bar__right-link a {
  color: #2f3030; /* 自定义链接颜色 */
  text-decoration: none; /* 取消下划线 */
  margin-left: 10px; /* 每个链接之间的间距 */
  padding: 5px 10px; /* 内边距，增加点击区域 */
  min-width: 50px; /* 最小宽度，防止换行 */
  text-align: center; /* 文本居中 */
}

/* 调整小屏幕设备上的右外间距 */
@media (max-width: 767px) {
  .top-bar__right-link {
    margin-right: 10px; /* 小屏幕设备右外间距 */
  }
}

/* 调整大屏幕设备上的右外间距 */
@media (min-width: 768px) {
  .top-bar__right-link {
    margin-right: 10px; /* 大屏幕设备右外间距 */
  }
}




/* 移除 Logo 和 Title 之间的间隔 */
.logo + .title {
  margin-left: 0px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.title {
  font-size: 20px;
}

.title a {
  text-decoration: none; /* 取消下划线 */
  color:#2f3030; /* 更改字体颜色，请将“您的颜色值”替换为具体的颜色值，例如 #4285f4（红色） */
}





.copyright {
    background-color: white;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 10px 10px 10px; /* 上右下左四个方向的内间距分别设置 */
    text-align: left;
    font-size: 12px;
    color: #999999;
    margin: 0;
}

/* 设置 .copyright1 的样式 */
.copyright1 {
    background-color: white;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 10px 0px 10px; /* 上右下左四个方向的内间距分别设置 */
    text-align: left;
    font-size: 14px;
    color: #303030;
    margin: 0;
}

/* 设置 .copyright1 内超链接的样式 */
.copyright1 a {
    display: inline-block; /* 使其能应用内边距和背景色 */
    color: #303030; /* 链接字体颜色与父元素一致 */
    text-decoration: none; /* 取消下划线 */
    background-color: #f4f5f6; /* 超链接背景颜色 */
    padding: 5px 10px; /* 添加内边距以显示背景色 */
    border-radius: 3px; /* 添加圆角 */
	font-size: 12px;
}


.copyright2 {
    background-color: white;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 10px 5px 10px; /* 上右下左四个方向的内间距分别设置 */
    text-align: left;
    font-size: 12px;
    color: #999999;
    margin: 0;
}




/* 首页顶部公告栏 */
.container01 {
  
  position: relative;
  max-width: 1200px;
  margin-top: 0px; /* 设置顶部外边距，例如这里是20像素 */
  margin-bottom: 0px; /* 设置底部外边距，例如这里是30像素 */
  background-color: #fff;
  border-radius: 2px;
  margin-left: auto;
  margin-right: auto;
}

.container01-content {
  padding: 10px; /* 添加上下左右内间距，例如这里设为20像素 */
}

.container01-description {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #fff;
  padding: 5px 10px; /* 添加左右内边距，例如这里设为10像素 */
  font-size: 14px;
  color: #333;
  z-index: 1; /* 可能需要设置一个z-index值以确保描述在容器内容之上显示 */
}



/* 公告栏样式 */
.notice-bar {
  background-color: #fcf6f0;
  padding: 10px;
  position: relative;
  text-align: left;
  margin-bottom: 10px;
  border: 1px solid #f5bcb9; /* 设置边框粗细为2px，颜色为深灰色 */
  border-radius: 3px; /* 设置圆角为10px */
  opacity: 1; /* 直接设置为不透明 */
  height: auto; /* 高度自动适应内容 */
}

/* 移除淡入动画的关键帧定义 */
/* @keyframes fadeIn {...} 这部分可以完全移除 */

/* 从显示的公告栏类中移除动画应用 */
.notice-bar.show {
  /* opacity 和 height 的直接设置已经在 .notice-bar 中完成，无需重复 */
  /* 删除动画相关属性 */
}

/* 其余样式保持不变 */
.notice-bar p {
  margin: 0;
  font-size: 14px;
  padding-right: 30px;
  line-height: 2;
  color: #000;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #686868;
  outline: none;
}

.close-btn:hover {
  color: #2ca7d8;
}

.ui {
  opacity: 0;
  transform: translateY(-50px); /* 初始时元素略高于其最终位置 */
  animation: fadeInDownSmooth 1s ease both; /* 调整动画时间和速度曲线，'both'让动画在正反向都应用ease效果 */
}

@keyframes fadeInDownSmooth {
  0% {
    opacity: 0;
    transform: translateY(-50px); /* 或使用'-100%'等，根据实际需求调整初始偏移量 */
  }
  50% {
    opacity: 0.5;
    transform: translateY(0); /* 在半程时完成位置移动，但不完全透明 */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}



/* 实用工具板块tab */

.tab-container {
  display: flex;
  overflow-x: auto;
  max-width: 1050px;
  white-space: nowrap;
  border-radius: 5px;
  padding: 5px;
  
  /* 为支持的浏览器添加滚动条样式 */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #e8eaea #f4f5f6; /* Firefox */
}

/* WebKit 内核浏览器（如 Chrome 和 Safari）的滚动条样式 */
.tab-container::-webkit-scrollbar {
  width: 2px;
}

.tab-container::-webkit-scrollbar-track {
  background-color: #f4f5f6;
}

.tab-container::-webkit-scrollbar-thumb {
  background-color: #e8eaea;
  border-radius: 5px;
}

.tab-container::-webkit-scrollbar-thumb:hover {
  background-color: #e8eaea;
}

/* Firefox 的滚动条拇指 hover 样式（可能需要JavaScript辅助实现完美的hover效果） */
.tab-container:hover::-moz-scrollbar-thumb {
  background-color: #e8eaea; /* 注意: Firefox 不直接支持:hover伪类应用于滚动条 thumb，可能需要JS解决 */
}

.tab {
  
  position: relative;
  width: 60px; /* 若之前已设定的固定宽度 */
  height: 30px; /* 若之前已设定的固定高度 */
  display: flex; /* 使用Flexbox布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  cursor: pointer;
  font-size: 14px;
  color: #343a40;
  background-color: transparent;
  border: none;
  outline: none;
  transition: background-color 0.3s ease;
  border-radius: 2px;
  margin-right: 5px; /* 保持Tab之间的水平间隔 */
  margin-top: 10px; /* 新增的上外边距 */
  margin-bottom: 5px; /* 新增的下外边距 */
  padding: 0; /* 由于使用了 Flexbox 居中，可以移除内边距或按需调整 */
  
  /* 确保每个.tab的宽度固定，不受内容或数量影响 */
  min-width: 60px; /* 添加这一行可以确保宽度不会因为内容挤压而变窄 */
}

@media (min-width: 768px) {
  .tab {
   font-family: '钉钉进步体';
  }
  .tab-container {
   font-family: '钉钉进步体';
  }
}

.tab:hover {
  color: #343a40;
}

.tab.active {
  color: #4285f4;
  background-color: rgba(0, 123, 255, 0.1);
  transition: background-color 0.3s ease;
  border-radius: 2px;
}


.tab:not(:last-child) {
  margin-right: 5px; /* 保持Tab之间的水平间隔 */
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* 资源网站板块tab */

.tab1-container {
  display: flex;
  overflow-x: auto;
  max-width: 1050px;
  white-space: nowrap;
  border-radius: 5px;
  padding: 5px;
  
  /* 为支持的浏览器添加滚动条样式 */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #e8eaea #f4f5f6; /* Firefox */
}



/* WebKit 内核浏览器（如 Chrome 和 Safari）的滚动条样式 */
.tab1-container::-webkit-scrollbar {
  width: 2px;
}

.tab1-container::-webkit-scrollbar-track {
  background-color: #f4f5f6;
}

.tab1-container::-webkit-scrollbar-thumb {
  background-color: #e8eaea;
  border-radius: 5px;
}

.tab1-container::-webkit-scrollbar-thumb:hover {
  background-color: #e8eaea;
}

/* Firefox 的滚动条拇指 hover 样式（可能需要JavaScript辅助实现完美的hover效果） */
.tab1-container:hover::-moz-scrollbar-thumb {
  background-color: #e8eaea; /* 注意: Firefox 不直接支持:hover伪类应用于滚动条 thumb，可能需要JS解决 */
}

.tab1 {
  
  position: relative;
  width: 60px; /* 若之前已设定的固定宽度 */
  height: 30px; /* 若之前已设定的固定高度 */
  display: flex; /* 使用Flexbox布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  cursor: pointer;
  font-size: 14px;
  color: #343a40;
  background-color: transparent;
  border: none;
  outline: none;
  transition: background-color 0.3s ease;
  border-radius: 2px;
  margin-right: 5px; /* 保持Tab之间的水平间隔 */
  margin-top: 10px; /* 新增的上外边距 */
  margin-bottom: 5px; /* 新增的下外边距 */
  padding: 0; /* 由于使用了 Flexbox 居中，可以移除内边距或按需调整 */
  
  /* 确保每个.tab的宽度固定，不受内容或数量影响 */
  min-width: 60px; /* 添加这一行可以确保宽度不会因为内容挤压而变窄 */
}

@media (min-width: 768px) {
  .tab1 {
   font-family: '钉钉进步体';
  }
  .tab1-container {
   font-family: '钉钉进步体';
  }
}

.tab1:hover {
  color: #343a40;
}

.tab1.active1 {
  color: #4285f4;
  background-color: rgba(0, 123, 255, 0.1);
  transition: background-color 0.3s ease;
  border-radius: 2px;
}


.tab1:not(:last-child) {
  margin-right: 5px; /* 保持Tab之间的水平间隔 */
}

.tab1-content {
  display: none;
}

.tab1-content.active1 {
  display: block;
}


/* 千奇百怪板块tab */

.tab2-container {
  display: flex;
  overflow-x: auto;
  max-width: 1050px;
  white-space: nowrap;
  border-radius: 5px;
  padding: 5px;
  
  /* 为支持的浏览器添加滚动条样式 */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #e8eaea #f4f5f6; /* Firefox */
}

/* WebKit 内核浏览器（如 Chrome 和 Safari）的滚动条样式 */
.tab2-container::-webkit-scrollbar {
  width: 2px;
}

.tab2-container::-webkit-scrollbar-track {
  background-color: #f4f5f6;
}

.tab2-container::-webkit-scrollbar-thumb {
  background-color: #e8eaea;
  border-radius: 5px;
}

.tab2-container::-webkit-scrollbar-thumb:hover {
  background-color: #e8eaea;
}

/* Firefox 的滚动条拇指 hover 样式（可能需要JavaScript辅助实现完美的hover效果） */
.tab2-container:hover::-moz-scrollbar-thumb {
  background-color: #e8eaea; /* 注意: Firefox 不直接支持:hover伪类应用于滚动条 thumb，可能需要JS解决 */
}

.tab2 {
  
  position: relative;
  width: 60px; /* 若之前已设定的固定宽度 */
  height: 30px; /* 若之前已设定的固定高度 */
  display: flex; /* 使用Flexbox布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  cursor: pointer;
  font-size: 14px;
  color: #343a40;
  background-color: transparent;
  border: none;
  outline: none;
  transition: background-color 0.3s ease;
  border-radius: 2px;
  margin-right: 5px; /* 保持Tab之间的水平间隔 */
  margin-top: 10px; /* 新增的上外边距 */
  margin-bottom: 5px; /* 新增的下外边距 */
  padding: 0; /* 由于使用了 Flexbox 居中，可以移除内边距或按需调整 */
  
  /* 确保每个.tab的宽度固定，不受内容或数量影响 */
  min-width: 60px; /* 添加这一行可以确保宽度不会因为内容挤压而变窄 */
}

@media (min-width: 768px) {
  .tab2 {
   font-family: '钉钉进步体';
  }
  .tab2-container {
   font-family: '钉钉进步体';
  }
}

.tab2:hover {
  color: #343a40;
}

.tab2.active2 {
  color: #4285f4;
  background-color: rgba(0, 123, 255, 0.1);
  transition: background-color 0.3s ease;
  border-radius: 2px;
}


.tab2:not(:last-child) {
  margin-right: 5px; /* 保持Tab之间的水平间隔 */
}

.tab2-content {
  display: none;
}

.tab2-content.active2 {
  display: block;
}


/* 二次元tab */

.tab3-container {
  display: flex;
  overflow-x: auto;
  max-width: 1050px;
  white-space: nowrap;
  border-radius: 5px;
  padding: 5px;
  
  /* 为支持的浏览器添加滚动条样式 */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #e8eaea #f4f5f6; /* Firefox */
}

/* WebKit 内核浏览器（如 Chrome 和 Safari）的滚动条样式 */
.tab3-container::-webkit-scrollbar {
  width: 2px;
}

.tab3-container::-webkit-scrollbar-track {
  background-color: #f4f5f6;
}

.tab3-container::-webkit-scrollbar-thumb {
  background-color: #e8eaea;
  border-radius: 5px;
}

.tab3-container::-webkit-scrollbar-thumb:hover {
  background-color: #e8eaea;
}

/* Firefox 的滚动条拇指 hover 样式（可能需要JavaScript辅助实现完美的hover效果） */
.tab3-container:hover::-moz-scrollbar-thumb {
  background-color: #e8eaea; /* 注意: Firefox 不直接支持:hover伪类应用于滚动条 thumb，可能需要JS解决 */
}

.tab3 {
  position: relative;
  width: 60px; /* 若之前已设定的固定宽度 */
  height: 30px; /* 若之前已设定的固定高度 */
  display: flex; /* 使用Flexbox布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  cursor: pointer;
  font-size: 14px;
  color: #343a40;
  background-color: transparent;
  border: none;
  outline: none;
  transition: background-color 0.3s ease;
  border-radius: 2px;
  margin-right: 5px; /* 保持Tab之间的水平间隔 */
  margin-top: 10px; /* 新增的上外边距 */
  margin-bottom: 5px; /* 新增的下外边距 */
  padding: 0; /* 由于使用了 Flexbox 居中，可以移除内边距或按需调整 */
  
  /* 确保每个.tab的宽度固定，不受内容或数量影响 */
  min-width: 60px; /* 添加这一行可以确保宽度不会因为内容挤压而变窄 */
}

@media (min-width: 768px) {
  .tab3 {
   font-family: '钉钉进步体';
  }
  .tab3-container {
   font-family: '钉钉进步体';
  }
}

.tab3:hover {
  color: #343a40;
}

.tab3.active3 {
  color: #4285f4;
  background-color: rgba(0, 123, 255, 0.1);
  transition: background-color 0.3s ease;
  border-radius: 2px;
}


.tab3:not(:last-child) {
  margin-right: 5px; /* 保持Tab之间的水平间隔 */
}

.tab3-content {
  display: none;
}

.tab3-content.active3 {
  display: block;
}


/* 访问统计 */
.background-container {
    background: linear-gradient(to right, #dae7f4, #dae7f4); /* 渐变背景色，这里使用了从绿色到轻微灰色的过渡 */
    padding-top: 1px; /* 上边距 */
    padding-right: 5px; /* 右边距 */
    padding-bottom: 1px; /* 下边距 */
    padding-left: 5px; /* 左边距 */
    border: 0px solid #5c5d5d; /* 添加边框，颜色自定义，这里选择了与绿色渐变协调的深绿色 */
    
    border-radius: 3px;
    display: inline-block;
	
  }

  .visit-title {
    font-size: 12px;
    color: #4285f4;
    margin-right: 0px;
    
  }

  #visitCount {
    color: #4285f4;
    text-decoration: none;
    transition: color 0.3s ease;
    
  }

  #visitCount:hover {
    color: #4285f4;
  }
  
  #link-count {
    color: #4285f4;
  }
  
/* 弹出提示 */  
  .tip {
    position: fixed;
    top: -100px; /* 初始位置在屏幕外上方 */
    left: 50%;
    transform: translateX(-50%);
    background-color: #3c3c3c; /* 深灰色背景 */
    color: #fff; /* 白色字体 */
    padding: 8px 10px;
    border-radius: 999px; /* 将圆角拉满 */
    transition: top 0.5s ease, opacity 0.5s ease; /* 添加过渡效果 */
    opacity: 0;
    z-index: 999; /* 确保提示显示在顶层 */
    display: flex; /* 使用 flexbox 对齐内容 */
    align-items: center; /* 垂直居中 */
    font-size: 14px; /* 设置字体大小为14像素 */
	max-width: 80%; /* 设置提示框的最大宽度为页面宽度的80% */
  }

  .tip img {
    margin-right: 5px; /* 图片和文字之间的间距 */
    width: 20px; /* 图片宽度 */
    height: 20px; /* 图片高度 */
	
  }

  .tip.show {
    top: 35px; /* 将提示顶部位置设置为20px */
    opacity: 1;
	width: auto; /* 让提示框宽度自适应内容长度 */
  }

  .tip.hide {
    top: -100px; /* 将提示移回屏幕外上方 */
    opacity: 0;
  }
  
  
  
/* 默认样式，适用于大屏幕 */
.container888 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.container888 p {
    margin: 0;
}

/* 针对小屏幕的样式 */
@media (max-width: 768px) {
    .container888 {
        display: block;
        text-align: center;
    }

    .container888 p {
        margin-bottom: 10px; /* 或你认为合适的间距 */
    }
}





/* 占位元素，用于推动底部栏到最底部 */
        .spacer {
            flex: 1;
        }
        
        

    
.image-container {
            display: none; /* 首先隐藏图片容器 */
            margin-top: 20px; /* 添加顶部边距 */
        }

        @media only screen and (max-width: 600px) {
            .image-container {
                display: flex; /* 在小屏幕下显示图片容器并使用Flexbox布局 */
                justify-content: space-between; /* 在图片之间添加空间 */
                gap: 10px; /* 添加图片之间的间距 */
            }

            .image-container a {
                width: calc(50% - 5px); /* 每个链接容器宽度为50%，减去间距的一半 */
            }

            .image-container img {
                width: 100%; /* 图片宽度填满父容器 */
                height: auto; /* 保持图片的原始比例 */
                border-radius: 10px;
            }
        }