@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');

/* ---------------------------------------------------------------- */
#side_menu {
  width: 300px;
  height: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
  position: fixed;
}

ul.side_menu_section {
  width: 250px;
  height: auto;
  margin-top: 40px;
}

ul.side_menu_section>li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin-top: 20px;
}

ul.side_menu_section>li:first-child {
  margin-top: 0;
}

.gnb>p {
  color: #333;
  font-size: 18px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.198px;
}

.gnb>i {
  font-size: 15px;
  color: #868686;
}

ul.side_menu_section > li.gnb{
  position: relative;
  flex-wrap: wrap;
}

ul.sub_menu{
  width: 100%;
  max-height: 0;       
  overflow: hidden;    
  opacity: 0;
  transform: translateY(-5px);

  transition: 
    max-height 0.35s ease,
    opacity 0.25s ease,
    transform 0.25s ease;
}

ul.side_menu_section > li.gnb.open > ul.sub_menu{
  max-height: 300px;
  opacity: 1;
  transform: translateY(0);
}

ul.sub_menu>li.sub>a>p {
  color: #868686;
  font-size: 15px;
  font-weight: 500;
}

ul.sub_menu>li.sub>a>p:hover {
  color: #333;
  transition: color 0.3s ease;
}

ul.sub_menu>li.sub {
  margin-top: 10px;
}

.gnb > i{
  transition: transform .25s ease;
}
ul.side_menu_section > li.gnb.open > i{
  transform: rotate(180deg);
}

ul.support_center {
  width: 250px;
  height: 100px;
  margin-top: 80px;
}

.sc_tit>span {
  color: #868686;
  font-size: 15px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: -0.165px;
}

.sc_txt {
  width: 100%;
  height: 23px;
}

.sc_txt>a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.sc_txt1 {
  margin-top: 20px;
}

.sc_txt2 {
  margin-top: 10px;
}

.sc_txt>a>p {
  color: #B3B3B3;
  font-size: 15px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.165px;
}

.sc_txt>a:hover p,
.sc_txt>a:hover i {
  color: #333;
  transition: color 0.3s ease;
}

.sc_txt>a>i {
  font-size: 14px;
  color: #B3B3B3;
}

.quick_btns {
  width: 130px;
  height: 75px;
  margin-top: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 80px;
}

.q_btn {
  width: 50px;
  height: 75px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.q_btn>a {
  width: 50px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.sq_icons {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #BFA76F;
}

.sq_icons:hover {
  background: #004225;
  transition: background-color 0.3s ease;
}

.sq_icons>i {
  font-size: 20px;
  color: #fff;
}

.q_btn>a>p { 
  color: #868686;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.143px;
}

ul.sub_menu > li.sub.active > a > p {
  color: #10BD00;
  font-weight: 700;
}

.sc_txt.active p {
  color: #10BD00;
  font-weight: 700;
}
/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */