/* ========================= #hd ========================= */
#hd {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 9999;
  width: 100%;
  max-width: calc(var(--unit) * 100);
  translate: -50% 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--unit) * 2.34) calc(var(--unit) * var(--side));
  transition: 0.4s;
  font-family: var(--Pretendard);
  font-size: 18px;
  color: #fff;
}
#hd::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  backdrop-filter: blur(10px);
  background-color: rgba(var(--theme-color-rgb), 0.6);
  transition: opacity 0.5s, height 0.5s;
}
#hd h1 {
  position: relative;
  z-index: 10;
}
#hd h1 a {
  display: block;
  width: calc(var(--unit) * 22.81);
  height: calc(var(--unit) * 5.31);
  background: url(/img/logo/logo-white.svg) center/contain no-repeat;
}
#hd .hd__button {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
}
#hd .hd__button .hd__lang {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-right: 20px;
}
#hd .hd__button .hd__lang a {
  width: 2em;
  aspect-ratio: 1/1;
  border: 2px solid transparent;
  border-radius: 10em;
  transition: 0.3s;
}
#hd .hd__button .hd__lang a:hover {
  border-color: rgba(255, 255, 255, 0.5333333333);
}
#hd .hd__button .hd__lang .--cn {
  background: url(/img/common/lang/cn.svg) center/cover no-repeat;
}
#hd .hd__button .hd__lang .--tw {
  background: url(/img/common/lang/tw.svg) center/cover no-repeat;
}
#hd .hd__button .hd__lang .--ko {
  background: url(/img/common/lang/ko.svg) center/cover no-repeat;
}
#hd .hd__button .hd__slogan {
  color: #fff;
  display: flex;
  align-items: center;
}
#hd .hd__button .hd__slogan::before {
  content: "";
  width: 2em;
  height: 2em;
  margin-right: calc(var(--unit) * 1.56);
  background: url(/img/common/hd/figure.png) center/contain no-repeat;
}
#hd .hd__button .hd__slogan p {
  font-size: calc(var(--unit) * 2.5);
  margin-right: calc(var(--unit) * 4.69);
  font-weight: 600;
  display: flex;
  flex-direction: column;
}
#hd .hd__button .hd__slogan p span {
  display: flex;
  align-items: center;
}
#hd .hd__button .hd__slogan p .logo__text {
  width: 3.5em;
  height: 0.8em;
  margin: 0 0.2em;
}
#hd .hd__button #btn__menu {
  width: calc(var(--unit) * 5.47);
  height: calc(var(--unit) * 4.69);
  position: relative;
  background: none;
  border: 0;
  font-size: 0;
}
#hd .hd__button #btn__menu::before,
#hd .hd__button #btn__menu span, #hd .hd__button #btn__menu::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--unit) * 5.47);
  height: 2px;
  background: #fff;
}
#hd .hd__button #btn__menu::before {
  translate: -50% calc(var(--unit) * -2.03);
  transition: transform 0.5s, translate 0.5s 0.5s;
}
#hd .hd__button #btn__menu span {
  translate: -50% -50%;
  transition: 0.4s;
}
#hd .hd__button #btn__menu::after {
  translate: -50% calc(var(--unit) * 1.7);
  transition: transform 0.5s, translate 0.5s 0.5s;
}

body.hd-fixed #hd::before {
  opacity: 1;
}

body.menu-active #hd::before {
  opacity: 0;
}
body.menu-active #hd .hd__button #btn__menu::before, body.menu-active #hd .hd__button #btn__menu::after {
  translate: -50% -50%;
  transition: transform 0.5s 0.5s, translate 0.5s;
}
body.menu-active #hd .hd__button #btn__menu span {
  width: 0;
}
body.menu-active #hd .hd__button #btn__menu::before {
  transform: rotate(45deg);
}
body.menu-active #hd .hd__button #btn__menu::after {
  transform: rotate(-45deg);
}
body.menu-active #hd .hd__gnb {
  opacity: 0;
  pointer-events: none;
}

/* ========================= #sitemap ========================= */
#sitemap {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 999;
  width: 100%;
  height: 100dvh;
  max-width: 100vw;
  translate: -50% 0;
  background: url(/img/common/hd/bg.webp);
  font-family: var(--Pretendard);
  font-size: clamp(22px, 4dvw, 40px);
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1;
  max-height: 0;
  overflow: hidden;
  transition: max-height 1.2s cubic-bezier(0.79, -0.01, 0.2, 1.01);
}
#sitemap button {
  background: none;
  border: 0;
  outline: none;
  color: inherit;
  line-height: 1;
}
#sitemap .stmp__wrapper {
  width: calc(var(--unit) * var(--wrap));
  height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
#sitemap .stmp__wrapper .stmp__container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
#sitemap .stmp__title {
  height: 15%;
  margin-top: 10%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
#sitemap .stmp__title .stmp__logo {
  display: block;
  width: 80%;
  height: 90%;
  opacity: 0.15;
  background: url(/img/logo/logo-white.svg) center/contain no-repeat;
  transition: 0.4s;
}
#sitemap .stmp__title .stmp__text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-family: var(--Angelle);
  font-size: calc(var(--unit) * 16);
  font-style: normal;
  color: #fff;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: 0.4s;
}
#sitemap .stmp__title.--active .stmp__text {
  opacity: 0.15;
}
#sitemap .stmp__title.--active .stmp__logo {
  opacity: 0;
}
#sitemap nav {
  display: flex;
  flex-direction: column;
}
#sitemap nav dl {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5em;
}
#sitemap nav dl dt {
  display: flex;
  opacity: 0;
  translate: -2em 0;
  transition-duration: 0.6s;
}
#sitemap nav dd ul {
  padding: 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition-property: opacity, max-height, padding;
  transition-duration: 1s;
}
#sitemap nav dd ul li {
  font-size: 0.9em;
  padding-left: 1em;
}
#sitemap nav dd ul li + li {
  margin-top: 1em;
}
#sitemap nav dl.--active dd ul {
  pointer-events: auto;
  padding-top: 1em;
  opacity: 1;
  max-height: 15em;
}
#sitemap .stmp__ft {
  height: 10dvh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}
#sitemap .stmp__ft::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: 0;
  height: 1px;
  opacity: 0;
  background: #fff;
  transition-duration: 0.6s;
}
#sitemap .stmp__ft .stmp__member {
  display: flex;
  font-weight: 500;
  opacity: 0;
  transition-duration: 0.6s;
}
#sitemap .stmp__ft .stmp__member li {
  padding: 0 1em;
}

body.menu-active #sitemap {
  max-height: 100dvh;
}
body.menu-active #sitemap .stmp__ft::before {
  opacity: 1;
  width: 100%;
  transition-delay: 1.2s;
}
body.menu-active #sitemap nav dl dt {
  opacity: 1;
  transition-duration: 0.6s;
}
body.menu-active #sitemap nav dl:nth-child(odd) dt {
  translate: 0 0;
}
body.menu-active #sitemap nav dl:nth-child(even) dt {
  translate: 0 0;
}
body.menu-active #sitemap nav dl:nth-child(1) dt {
  transition-delay: 1.1s;
}
body.menu-active #sitemap nav dl:nth-child(2) dt {
  transition-delay: 1.2s;
}
body.menu-active #sitemap nav dl:nth-child(3) dt {
  transition-delay: 1.3s;
}
body.menu-active #sitemap nav dl:nth-child(4) dt {
  transition-delay: 1.4s;
}
body.menu-active #sitemap nav dl:nth-child(5) dt {
  transition-delay: 1.5s;
}
body.menu-active #sitemap nav dl:nth-child(6) dt {
  transition-delay: 1.6s;
}
body.menu-active #sitemap nav dl:nth-child(7) dt {
  transition-delay: 1.7s;
}
body.menu-active #sitemap nav dl:nth-child(8) dt {
  transition-delay: 1.8s;
}
body.menu-active #sitemap nav dl:nth-child(9) dt {
  transition-delay: 1.9s;
}
body.menu-active #sitemap .stmp__ft .stmp__member {
  opacity: 1;
  transition-delay: 1.2s;
}

@media screen and (orientation: landscape) {
  #sitemap {
    font-size: clamp(16px, 4dvh, 16px);
  }
}/*# sourceMappingURL=hd.min.css.map */