nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 2rem;
  background: var(--gnb_background);
  transition: .2s;
  z-index: 99;
}


nav::before {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gnb_scroll_background);
  transition: .4s;
  z-index: -1;
  border-radius: 0 0 50% 50%;
}

nav.active::before {
  top: 0;
  border-radius: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}




.top_snb {
  width: 100%;
}

.top_snb__inline {
  justify-content: space-between;
  margin: 0 auto;
  height: 5rem;
  color: var(--gnb_color);
}

.top_snb__inline a {
  font-size: 1.3rem;
  color: var(--gnb_cs_color);
  transition: .4s;
}

.top_snb__inline a.active {
  color: var(--color_pmy);
}

.top_snb__inline a:hover {
  color: var(--color_pmy);
}

.top_snb__inline a:last-child {
  color: #fff !important;
}

nav.active .top_snb__inline a {
  color: var(--gnb_scroll_color)
}


.gnb_wrap {
  flex-direction: column;
  justify-content: center;
  max-width: var(--gnb_width);
  width: 100%;
  margin: 0 auto;
}

.gnb_wrap > a > img {
  max-height: 6rem;
  height: 100%;
}

.gnb {
  justify-content: center;
  width: 100%;
  margin-top: 2rem;
}

.gnb > ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  box-shadow: var(--gnb_shadow_color);
  /* border-radius: 0 0 50% 50%; */
  width: 100%;
}

.gnb > ul > li {
  height: 100%;
}


.gnb > ul > li > a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 2rem 2rem;
  /* margin-bottom: 2rem; */
  font-size: var(--gnb_size);
  color: var(--gnb_color);
  font-family: var(--gnb_font_family);
  transition: .3s;
  border-radius: 2em;
}

nav.active .gnb > ul > li > a {
  color: var(--gnb_scroll_color);
}

.gnb img {
  max-height: 7rem;
  height: 100%;
}



/* DEBUG: 호버 스타일 */


.hv_st01 > li > a.active,
.hv_st01 > li > a:hover {
  /* background: var(--gnb_color_hover); */
  /* color: #fff */
}

.hv_st01 > li > a::before {
  content: '';
  position: absolute;
  top: .5rem;
  right: 1rem;
  width: .5rem;
  height: .5rem;
  background: var(--gnb_color_hover);
  border-radius: 50%;
  transition: .3s;
  opacity: 0;
}

.hv_st01 > li > a.active::before,
.hv_st01 > li > a:hover::before {
  opacity: 1
}





.my_page_btn {
  background: var(--color_pmy);
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 2rem;
  margin-left: 1rem;
}



.icon__box {
  width: 100%;
  justify-content: space-between;
  gap: 2rem;
}

.icon__box svg {
  stroke: var(--gnb_color);
  transition: .4s;
}

nav.active .icon__box svg {
  stroke: var(--gnb_scroll_color);
}

.icon__box.active svg {
  stroke: var(--gnb_scroll_color);
}


/* DEBUG: 햄버거 버튼 */

.hamburger_button {
  position: relative;
  display: none;
  width: 2rem;
  height: 2rem;
  z-index: 99;
  cursor: pointer;
}

.hamburger_button > div {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

.hamburger_button > div > div {
  background-color: var(--gnb_color);
  position: absolute;
  width: 100%;
  height: .2rem;
  border-radius: 1000px;
  left: 0;
  top: 45%;
  transition: transform 0.1s linear, top 0.25s linear 0.1s, width 0s linear 0.1s;
}

nav.active .hamburger_button > div > div {
  background-color: var(--gnb_scroll_color);
}

.hamburger_button > div div:nth-child(1) {
  top: 15%;
}

.hamburger_button > div div:nth-child(3) {
  top: 75%;
}

.hamburger_button.close div > div {
  background-color: #242424;
  transition: transform 0.25s linear 0.1s, top 0.1s linear, width 0s linear 0.1s;
}

.hamburger_button.close > div div:nth-child(1) {
  top: 45% !important;
  transform: rotate(45deg);
}

.hamburger_button.close > div div:nth-child(2) {
  width: 0;
}

.hamburger_button.close > div div:nth-child(3) {
  top: 45% !important; transform: rotate(-45deg);
}







.icon__box {
  display: none;
}


@media all and (max-width: 976px) {

}


@media all and (max-width: 810px) {
  .gnb {
    padding: 1rem 0;
    margin-top: 0;
  }

  .gnb_wrap > a > img {
    display: none;
  }

  .gnb > ul {
  display: none;
  }

  .top_snb {
    display: none
  }

  .icon__box {
    display: inherit;
  }

  .icon__box img {
    max-height: 2.5rem;
    height: 100%;
  }

  .hamburger_button {
    display: block;
  }

  .slb {
    display: block;
  }
}


@media all and (max-width: 480px) {
  nav {
    padding: 0 1.5rem;
  }
}