/* 垂直进度条容器 */
.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: 12px;
    margin-top: 12px;
    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.com{
    position: relative;
    margin-left: -18px !important;
    font-size: 20px;
    font-weight: bold;
    margin-right: 10px;
}

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

.com.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: 50px;
  width: 100% !important;
}
.left-colunm{
  position: sticky;
  top: calc(var(--nav-h) + 0.85rem);
  align-self: start;
  left: 2.5%;
  width: 20%;
}

.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;
}




/*advice 样式控制*/
.university-advice-container{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 97%;
  margin-right: 5%;
  margin-top: 25px;
  margin-bottom: 25px;
}




/*弹窗内容基础控制*/
.modal-body{
  display: flex;
  align-items: center;
  flex-direction: column;
}
.modal-p1{
  position: relative;
  width: 90%;
  text-align: justify;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal-p1 img{
  width: 85%;
}
.modal-p2 img{
  width: 85%;
}
.modal-p2{
  position: relative;
  width: 90%;
  text-align: justify;
  display: flex;
  align-items: center;
  flex-direction: column;
}
/*按钮控制*/
.read-more-btn{
  right: 1% !important;
  position: absolute;
  border: none;
}
.button {
  width: 100px;
  height: 28px;
  text-align: center;
  color: white;
  border-radius: 6px;
  text-decoration: none;
  overflow: hidden;
  transition: all .2s ease-out 0s;
}
.button:hover > span {
  top: -20px;
  opacity: 0;
}
.button:hover > i {
  opacity: 1;
  font-size: 22px;
  top: 50%;
}
.button-name,
.button-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  transition: all .3s ease-out;
  position: absolute;
}
.button-name {
  font-size: 15px;
  font-weight: 600;
  opacity: 1;
  font-family: "Open Sans", sans-serif;
  white-space: nowrap;
}
.button-icon {
  opacity: 0;
}
.button-color {
  background-color: #3b5998;
}



@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-com-content {
      display: block !important;
      /* 移除任何 grid-template-columns 或 flex-direction 属性 */
  }
}