/* 此为网页右侧目录的样式 */

/* 目录大容器 */
.main .menubg {
  position: relative;
  user-select: none;
  /* 保持原始大小，不随其他容器变化而变化 */
  flex: none;
  width: 20vw;
  border-radius: 20px;
  transition: width 0.5s;
  /* margin: 50px 0; */
  /* margin-right: 30px; */
  /* overflow: hidden; */
}

/* 进度条部分 */
.main .menubg #menu {
  position: sticky;
  width: 100%;
  transition: width 1s;
  padding: 30px 0px;
  display: flex;
  margin-top: 30vh;
}

.main .menubg #menu.fixed {
  margin-top: 3vh;
  position: fixed;
  padding-left: 0;
  top: 15vh;
  width: 20vw;
}

#scrollbar1 {
  position: relative;
  height: 350px;
  left: -10vh;
  top: -47px;
  z-index: 2;
}

#scrollbar1 #bar {
  position: absolute;
  width: 100%;
  height: 80vh;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.2s ease-out;
  z-index: 2;
}

#scrollbar1 #bar img {
  width: fit-content; /* 根据需要调整图片宽度 */
  height: 80vh; /* 根据需要调整图片高度 */
  object-fit: contain; /* 确保图像在容器中缩放时保持宽高比，并且显示在中心 */
  transform-origin: center; /* 图像始终从中心进行缩放 */
  transition: transform 0.3s ease; /* 添加缩放的平滑过渡效果 */
  /* margin-left: 30px; */
  margin-top: 0px;
}

#scrollbar1 #overlay {
  width: 100%;
  height: 80vh;
  pointer-events: none;
  z-index: 1;
}

#scrollbar1 #overlay img {
  width: fit-content; /* 根据需要调整图片宽度 */
  height: 80vh; /* 根据需要调整图片高度 */
  object-fit: contain; /* 确保图像在容器中缩放时保持宽高比，并且显示在中心 */
  transform-origin: center; /* 图像始终从中心进行缩放 */
  transition: transform 0.3s ease; /* 添加缩放的平滑过渡效果 */
  margin-top: 0px;
}

/* Circle element that follows the scroll */
.scroll-circle {
  position: absolute;
  width: 6%;
  height: auto;
  border-radius: 0%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.2s ease-out;
  z-index: 3;
}
.scroll-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin-left: 2vw;
}

/* Content area for scrolling */
.scrollable-content {
  width: 80%;
  margin: 0 auto;
  padding-bottom: 200vh;
  overflow-y: scroll;
  scrollbar-width: none; /* For Firefox */
}

/* Hide native scrollbar for WebKit-based browsers */
/* .scrollable-content::-webkit-scrollbar {
          display: none;
      } */

/* Scrollable content style */
.scrollable-content h1,
.scrollable-content p {
  text-align: center;
  margin: 50px;
}

/* menucontent 部分样式 */
/* 第一层文字大小, 第一层之间的距离*/
.main .menubg .menucontent{
  left: -2vh;
  position: relative;
  top: -5vh;
  flex-shrink: 0;
  width: 16vw;
}

.main .menubg #menu .t1 {
  /* 字体类 */
  font-size: 16px;
  /* text-transform: capitalize; */
  font-family: Montserrat-Bold, sans-serif;
  color: var(--mg);
  /* 位置类 */
  position: relative;
  padding: 2vh 0;
  /* 动效类 */
  transition: 0.5s;
  cursor: pointer;
}

.main .menubg #menu .t1:hover {
  color: var(--y);
}

.main .menubg #menu .t1.unfold {
  font-size: 20px;
  padding-bottom: 1vh;
}

.main .menubg #menu .t1.unfold + .h2-sec {
  /* 字体类 */
  color: var(--y);
  font-size: 14px;
  /* 排版 */
  grid-template-rows: 1fr;
  opacity: 1;
}

.main .menubg #menu .t1.unfold + .h2-sec .t2 {
  /* text-transform: capitalize; */
  padding: 0.5vh;
  border-radius: 5px;
}

/* .main .menubg #menu .t1.unfold + .h2-sec .t2.show::before {
  content: "";
  display: block;
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: rgb(255, 255, 255);
  transform: translateX(-50%);
  transition: 0.8s;
  opacity: 1;
  top: 50%
} */

.main .menubg #menu .h2-sec {
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid 0.5s, opacity 0.8s;
  opacity: 0;
  font-size: 0;
}

.main .menubg #menu .h2-sec .t2 {
  transition: 0.8s;
  min-height: 0;
}

.main .menubg #menu .t1.unfold + .h2-sec .divide {
  height: 20px;
  margin-top: 5px;
  opacity: 1;
}

.main .menubg #menu .t2 {
  font-family: Montserrat-Bold, sans-serif;
  color: var(--mg);
  cursor: pointer;
}
.main .menubg #menu .t2.show {
  color: var(--y);
}
.main .menubg #menu .t2:hover {
  color: var(--y);
}


/* 以下为未使用的样式 0920 */

/* 文字分隔条 */
/* 未用到 */
.main .menubg #menu .divide {
  opacity: 0;
  height: 0;
  width: fit-content;
  position: relative;
  margin-top: 0;
  left: 15px;
  transition: 0.8s;
}

/* .main .menubg #menu .divide img {
  height: 100%;
  object-fit: contain;
  object-position: center;
} */

/* 项目符号类（无用） */
/* .main .menubg #menu .t1::before {
  opacity: 0.3;
  position: absolute;
  content: "";
  display: block;
  width: 20px;
  height: 24px;
  left: -2px;
  top: 8px;
  transform: translateX(-100%);
  transition: 0.5s;
  background-image: url(pic.svg);
  background-size: 300%;
  background-size: contain;
  background-repeat: no-repeat;
}
.main .menubg #menu .t1:hover::before {
  opacity: 1;
}
.main .menubg #menu .t1.unfold::before {
  top: 10px;
} */

@media all and (max-width: 700px), all and (max-aspect-ratio: 2/3) {
  .menubg{
    display: none;
  }
}