:root {
  --nav-h: 4.375rem;

  --nb-bg: #f5f2ee;
  --nb-card: #fffdfa;
  --nb-ink: #3f3b37;

  --nb-shadow: 0 0.625rem 1.75rem rgba(20, 13, 13, .12),
    0 0.125rem 0.375rem rgba(20, 13, 13, .06);
  --nb-radius: 1rem;

  /* 侧栏配色 */
  --side-bg: #dff3f2;
  --side-ink: #4a3224;
  /* 深棕默认文字 */
  --side-muted: #5a6d6a;
  --side-accent: #2f9e9b;
  --side-hover: #cbe9e7;
  --side-active: #b7dfdc;
  --side-shadow: 0 10px 24px rgba(18, 57, 55, .10), 0 2px 6px rgba(18, 57, 55, .06);
}
/* 垂直进度条容器 */
.progress-bar-container-vertical {
    position: fixed;
    top: 0px;
    left: 25%;
    width: 5px;
    height: 100%;
    background-color: #f2a479;
    z-index: 0 !important;
}

  /* 移动的图片标记样式 */
  .progress-marker {
    position: absolute;
    /* top值在JS中动态设置，初始设为0 */
    top: 0;
    /* 将图片水平居中于轨道 */
    left: 50%;
    transform: translateX(-50%);
    width: 25px; /* 图片的宽度 */
    height: 25px; /* 图片的高度 */
    transition: top 0.2s ease-out; /* 让图片的垂直移动更平滑 */
    z-index: 25 ;
}


/* 快速导航列表的样式 */
.quick-nav-list li {
    position: relative; /* 关键：为伪元素定位 */
    margin-bottom: 10px;
    margin-top: 10px;
    list-style: none
  }

 /*使用 ::before 伪元素创建圈*/
 .quick-nav-list li a::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 8px; 
    vertical-align: middle; 
    transition: background-color 0.2s ease; 
    background-color: #3f3b37;
  }

  .quick-nav-list li.active a::before {
    background-color: #fff; /* 填充颜色 */
  }

/*
  .quick-nav-list li:hover a::before {
    background-color: #3f3b37; 
  }
*/

 .quick-nav-list li a {
    text-decoration: none; /* 移除下划线 */
    font-family: "Roboto", "Segoe UI", Helvetica, Arial, sans-serif; ;
    color: #3f3b37;
    display: block;
    padding-left: 20px;
    padding-right: 10px;
  }

 /* 选中链接的文字颜色变化*/
 .quick-nav-list li.active a {
  color: #fff;
  background-color:#2f8f83 ;
  border-radius: 4.2px;
  outline: 4.2px solid #2f8f83;
  outline-offset: 0;
}

.quick-nav-list li :hover{
  background-color: #66c2b6;
  transition: 0.2s ease;
  outline: 4.2px solid #66c2b6;
  outline-offset: 0;
  border-radius: 4.2px;
}


.sidebar-1.des{
    position: relative;
    margin-left: -18px !important;
    font-size: 20px;
    font-weight: bold;
    margin-right: 10px;
}

.sidebar-2.des{
    position: relative;
    margin-left: -4px !important;
    font-size: 18px;
    font-weight: 550;
}
.sidebar-3.des{
    position: relative;
    margin-left: 4px !important;
}

.des.sidebar {
  align-self: start;
  border-radius: 0.75rem;
  box-shadow: var(--nb-shadow);
  left: 2.5%;
  width: 20%;
  background-color: #d6f0f2;
  padding: 10px;
  margin-top: 55px;
  width: 100% !important;
}
.left-colunm{
  position: sticky;
  top: calc(var(--nav-h) + 0.85rem);
  align-self: start;
  left: 2.5%;
  width: 20%;
}

/**/
.des-content{
    position: relative;
    margin-top: 50px;
    width: 100%;
    padding: 25px;
    background-color: #fffdfb;
    border-radius: 14px;
    box-shadow: var(--nb-shadow);
    text-align: justify;
  }
  .des-content.title-1{
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .des-content.title-2{
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 90%;
    background-color: #f5f2ee
  }
  
  .main-content-wrapper{
   width: 70%;
   display: flex;
   flex-direction: column;
   align-items: center;
  }
  #all-des-content{
    display: flex;
    align-items: flex-start;
    gap: 8%;
  }

  .sidenav-title {
    margin-left: 2.0vw !important;
    margin-top: 2.1vh !important;
    font-weight: 800;
    color: var(--side-ink);
    margin: 0.25rem 0.375rem 0.6rem;
    letter-spacing: .02em;
    position: relative;
    padding-left: .85rem;
    font-family: "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
    /* 标题字体 */
  }
  
  .sidenav-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: .2rem;
    bottom: .2rem;
    width: .34rem;
    border-radius: .25rem;
    background: linear-gradient(180deg, var(--side-accent), #3fb7b3);
    box-shadow: 0 0 0 2px rgba(47, 158, 155, .08) inset;
  }



  @media (max-width: 1000px) {
    
    /* 1. 隐藏进度条 */
    .progress-bar-container-vertical {
        display: none !important; 
    }
  
    /* 2. 隐藏侧边栏/导航栏 */
    /* .left-colunm 是侧边栏的定位和尺寸容器，隐藏它最有效 */
    .left-colunm {
        display: none !important;
        /* 移除任何影响布局的固定定位或粘性定位 */
        position: static !important;
        width: 0 !important;
    }
    
    /* 3. 调整主内容区域，使其占据全部宽度并居中 */
    .main-content-wrapper {
      position: relative;
      margin-left: 5%;
      width: 90%;
    }
    
    /* 可选：如果页面最外层容器（例如 #all-hp-content）是多列布局，
       需要确保它在小屏幕下恢复为单列或正常流 */
    #all-des-content {
        display: block !important;
        /* 移除任何 grid-template-columns 或 flex-direction 属性 */
    }
  }