html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

main {
  min-height: 100vh;
  display: flex;
}

.guide_main_container {
  max-width: 1700px;
  padding-top: 128px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  gap: 80px;
}

.side_menu_container {
  max-width: 278px;
  width: 100%;
  box-sizing: border-box;
  float: left;
  height: 836px;
  overflow-y: overlay; /* overlay로 변경하여 필요할 때만 표시 */
  position: relative;
  position: fixed;
  top: 127px;
  left: 7.5vw;
}

/* 사이드바 스크롤바 스타일 */
.side_menu_container::-webkit-scrollbar {
  width: 8px;
}

.side_menu_container::-webkit-scrollbar-thumb {
  background: rgba(221, 255, 71, 0.5);
  border-radius: 8px;
}

.side_menu_container::-webkit-scrollbar-track {
  background: #f6f7fa;
  border-radius: 8px;
}
/* 스크롤바 스타일 */
.scrollbar {
  height: 836px;
  overflow-y: auto; /* 필요할 때만 스크롤바 표시 */
}

/* 스크롤바의 폭 너비 */
.scrollbar::-webkit-scrollbar {
  width: 8px;
}

.scrollbar::-webkit-scrollbar-thumb {
  background: rgba(221, 255, 71, 0.5); /* 스크롤바 색상 */
  border-radius: 8px; /* 스크롤바 둥근 테두리 */
}

.scrollbar::-webkit-scrollbar-track {
  background: #f6f7fa; /*스크롤바 뒷 배경 색상*/
  border-radius: 8px;
}

.side_menu {
  width: 100%;
}

.side_menu_title {
  color: #bbc1ce;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px; /* 100% */
  letter-spacing: -0.42px;
  padding-bottom: 16px;
  padding-left: 5px;
}

.side_menu_list,
.side_sub_menu {
  list-style: none;
  padding-left: 0;
  margin: 0;
  /* margin-right: 8px; */
  padding-right: 8px;
}

.side_menu_btn {
  width: 100%;
  width: 260px;
  background: none;
  border: none;
  text-align: left;
  padding: 12px 0px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #434d62;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px; /* 100% */
  letter-spacing: -0.48px;

  padding-left: 12px;
  outline: none;
}

.side_menu_btn:hover {
  background: #f6f7fa;
  border-radius: 4px;
}

.side_sub_menu {
  display: none;
}

.side_sub_menu.open {
  display: block;
}

.side_menu_arrow {
  padding-right: 8px;
}

.side_menu_btn[data-toggle]:focus,
.side_menu_btn[data-toggle]:active {
  outline: none;
  /* background: none; */
  /* color: inherit; */
  font-weight: 500;
  color: #434d62;
}

.side_sub_menu .side_menu_btn {
  padding-left: 32px; /* 2단계(중메뉴) */
}

/* 3단계 이상: .side_sub_menu .side_sub_menu .side_menu_btn */
.side_sub_menu .side_sub_menu .side_menu_btn {
  padding-left: 54px; /* 3단계(서브-서브메뉴) */
}

.small_category_menu {
  padding-left: 68px !important;
}

/* 중분류 버튼 스타일 */
.mid_category {
  padding-left: 25px !important;
}

/* 소분류 버튼 스타일 */
.small_category {
  padding-left: 48px !important;
}

.side_menu_btn.active {
  color: #ff5694 !important;
  font-weight: 700 !important;
  background: #f6f7fa !important;
  border-radius: 4px !important;
}