body {
    /*font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, Arial, sans-serif;*/
    font-family: -apple-system, BlinkMacSystemFont, opensans, Optima, "Microsoft Yahei", sans-serif;;
    line-height: 1.6;
    /*background: #f5f5f5;*/
    background: #f2f3f5;
    color: #3F536E;
    padding: 0;
    margin: 0px;
}

/* ============ 通用 ============ */
/*.card {*/
/*    background-color: hsla(0, 0%, 100%, 0.9);*/
/*    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
/*    border-radius: 10px;*/

/*}*/

/*.clear_li_style {*/
/*    list-style: none; !* ul, ol 移除所有列表符号 *!*/
/*    margin: 0; !* 移除默认外边距 *!*/
/*    padding: 0; !* 移除默认内边距 *!*/
/*}*/

/*.clear_a_style a {*/
/*    text-decoration: none; !* 移除下划线 *!*/
/*    color: inherit; !* 使用父元素的文字颜色 *!*/
/*}*/

/* ============ 自定义滚动条 ============  */
/* 针对 Chrome、Edge 和 Safari 浏览器的滚动条样式 */
::-webkit-scrollbar {
    width: 3px;
}

::-webkit-scrollbar {
    width: 3px !important; /* 滚动条宽度 */
    height: 3px !important; /* 滚动条宽度 */
}


::-webkit-scrollbar-thumb {
    /*background-color: red;*/
    background-color: #9f9898;
}

/* 针对 Firefox 浏览器的滚动条样式 */
body {
    scrollbar-width: thin;
    /*scrollbar-color: red transparent;*/
}

/* 针对 WebKit 浏览器 (如 Chrome, Safari) 的滚动条样式 */
pre::-webkit-scrollbar {
    width: 3px !important; /* 滚动条宽度 */
    height: 3px !important; /* 滚动条宽度 */
}

pre::-webkit-scrollbar-thumb {
    background-color: red; /* 滚动条颜色 */
}

pre::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* 滚动条背景颜色 */
}

/* ============ 遮罩层 ============  */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none; /* 默认隐藏 */
}

.overlay.active {
    display: block; /* 显示遮罩层 */
    z-index: 90;
}

/* ============ 居中弹窗 ============  */
.alert_center {
    display: none;
    width: 100%;
    height: 100%;

    position: fixed;
    top: 0;
    border-radius: 10px;
}

.alert_center.active {
    display: flex;
    left: 0;
    z-index: 100;

    justify-content: center;
    align-items: center;
}

/*.alert_content {*/
/*    width: 300px;*/
/*    height: 300px;*/
/*    background-color: white;*/
/*    border-radius: 10px;*/
/*    padding: 15px;*/
/*}*/

/* ============ header ============ */

/* 顶部 */
header {
    width: 100%;
    position: relative;
    background-color: hsla(0, 0%, 100%, 0.9);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    z-index: 100;
    transition: transform 0.5s ease; /* 过渡效果 */

}

header.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;

    background-color: hsla(0, 0%, 100%, 0.9);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s ease;
}

/* 容器样式 */
.header_container {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; /* 设置左右内边距 */
}

#title {
    font-size: 20px;
    font-weight: 600;
}


/* 桌面导航样式 */
.desktop-nav ul {
    height: 50px;
    list-style: none; /* 清除列表样式 */
    display: flex; /* 使用 Flexbox 布局 */
    gap: 20px; /* 子元素间距 */
    margin-right: 50px;
}

.desktop-nav ul li {
    list-style: none; /* 清除列表样式 */
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: center;
    align-items: center;
    /*gap: 20px; !* 子元素间距 *!*/
    /*width: 55px;*/
    /*height: 100%;*/
    /*padding-left: 10px;*/
    /*padding-right: 10px;*/
}

.desktop-nav ul li:hover {
    list-style: none; /* 清除列表样式 */
    display: flex; /* 使用 Flexbox 布局 */
    gap: 20px; /* 子元素间距 */
    background-color: rgba(153, 0, 255, 0.2);
    /*width: 100%;*/

}

/* 汉堡按钮样式 */
.hamburger {
    display: none; /* 默认隐藏汉堡按钮 */
    font-size: 24px; /* 设置字体大小 */
    cursor: pointer; /* 鼠标悬停时显示为指针 */
}

/* ============ nav  ============ */
nav.sticky {
    position: fixed;
    top: 85px;

}

.nav li:hover {
    background: pink;
}


/* ============ aside ============ */
.aside.sticky {
    position: fixed;
    top: 85px;
    right: 45px;
    width: 230px;
}

.aside li:hover {
    background: pink;
}