/* 侧边栏设置 */
.jindu {
    pointer-events: none;
    left: 0;
    top: 0;
    width: 32.5px;
    height: 100vh;
    position: fixed;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0); /* 添加半透明背景，以便覆盖图片 */
}

.rectangle {
    width: 32.5px; /* 与 .jindu 宽度相同 */
    height: 6px; /* 高度调整为您希望的大小 */
    background-color: rgb(255, 132, 0); /* 橙色 */
    position: absolute;
}


/* 隐藏浏览器默认滚动条 */
::-webkit-scrollbar {
    display: none;
}
   /* 进度条样式 */
   .progress-bar-container-w {
    pointer-events: none;
    position: fixed;
    top:0%;
    left: 0;
    height: 38px;
    width: 200px; /* 进度条容器宽度 */
    z-index: 999; /* 确保进度条在最顶层 */
    overflow: hidden; /* 隐藏溢出部分 */
}

.progress-bar-w {
    margin-top: 1px;
    pointer-events: none;
    position: absolute;
    top:0%;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url('/static/sidebar/zebra-w.png'); /* 进度条背景图片 */
    background-size: 35% 18px; /* 设置背景图片高度为 50px，并在垂直方向上填满元素 */
    background-repeat: repeat-y; /* 图片在垂直方向上平铺 */
    transition: height 0.05s; /* 添加过渡效果 */
}
   /* 进度条样式 */
.progress-bar-container {
    pointer-events: none;
    position: fixed;
    top:18px;
    left: 0;
    height: 100%;
    width: 200px; /* 进度条容器宽度 */
    z-index: 0; /* 确保进度条在最顶层 */
    overflow: hidden; /* 隐藏溢出部分 */
}

.progress-bar {
    margin-top: 3px;
    pointer-events: none;
    position: absolute;
    top:18px;
    left: 0;
    width: 100%;
    background-image: url('/static/sidebar/zebra-s.png'); /* 进度条背景图片 */
    background-size: 35% 18px; /* 设置背景图片高度为 50px，并在垂直方向上填满元素 */
    background-repeat: repeat-y; /* 图片在垂直方向上平铺 */
    transition: height 0.05s; /* 添加过渡效果 */
}
/* 侧边栏设置 */

/* 侧边栏按钮 */
.sidebar {
    position: fixed;
    top: 0;
    left: 0px;
    width: 4%;
    height: 100%;
    color: #000000;
    padding-top: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 2;
}

.sidebar a {
    color: #000000;
    padding: 10px;
    transition: background-color 0.3s ease;
    transform: rotate(-90deg); /* 顶部朝左排列 */
    transform-origin: top left; /* 旋转原点设置在左上角 */
    margin-bottom: 10px; /* 间隔距离 */
    transition: all 0.3s ease-in-out;
    position: fixed;
}

.sidebar a:hover {
    background-color: #ff5500;
}

.sidebar a.active {
    background-color:#ff6f00;
}
.tit {
    left: 0px;
    font-size: 1.7vw;
    font-variation-settings: "RONG" 1000, "CHON" 0 , "ROWT" 200; 
    color: black; /* Set default color to black */
    text-decoration: none; /* Remove default underline */
    transition: all 0.5s ease-in-out;
    letter-spacing: -2px;
    z-index: 999;
    text-align: center;
    justify-content: center;
}
.tit:hover{
    left: 0px;
    font-size: 1.7vw;
    font-variation-settings: "RONG" 1000, "CHON" 0,"ROWT" 1000; 
    color: rgb(0, 0, 0); /* Set default color to black */
    text-decoration: none; /* Remove default underline */
    transition: all 0.5s ease-in-out;
    letter-spacing: -4px;
}

#title1 {
    top: 18%;
    
}
#title2 {
    top: 38.5%;
}
#title3 {
    top: 75%;
}
#title4 {
    top: 100%;
}