*,
*::after,
*::before {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  outline: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  position: relative;
  width: 100%;

  min-height: 100svh;
  text-rendering: optimizeSpeed;
}

:is(a) {
  background-color: transparent;
  text-decoration: none;
  &:link { color: inherit; }
  &:visited { color: inherit; }
  &:hover,
  &:active { outline: 0; }
  &:focus { outline: thin dotted; }
  &:not([class]) { text-decoration-skip-ink: auto; }
}

:is(button) {
  background: none;
  color: inherit;
  line-height: 1em;
  cursor: pointer;
  > * {
    pointer-events: none;
  }
}

:is(img,picture) {
  border: 0;
  border-style: none;
  display: block;
  max-width: 100%;
}

:where(figure,picture) > img {
  height: auto;
}

:is(input,button,textarea,select) {
  font: inherit;
}

/* @media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
} */

@media (prefers-reduced-motion: no-preference) {
  :has(:target) {
    scroll-behavior: smooth;
  }
}

/* Default Sizing Variables */
:root {
  --page-rem-size : 16px;
  --rem : 0.0625rem;
  --em : 0.0625em;
  --vmax : 0.05208333333333vmax;
  --vmin : 0.09259259259259vmin;
}

/* Default Responsive Font */
html {
  scroll-behavior: smooth;
	font-size: 1em;
	line-height: 1.5;
  scrollbar-width: none;
}
@media (max-width: 37.5em) {
  html {
	  font-size: 4vw
  }
}
@media (min-width: 37.5625em) {
  html {
	  font-size: 1em
  }
}

@media (min-width: 160em) {
  html {
	  font-size: 0.8vw
  }
}

/* Default Visibility attributes */
@media (max-width: 37.5em) {
  *[desktop] {
    display: none !important;
    visibility: hidden
  }
}
@media (min-width: 37.5625em) {
  *[mobile] {
    display: none !important;
    visibility: hidden
  }
}
@media (max-width: 64em) {
  *[expanded] {
    display: none !important;
    visibility: hidden
  }
}
@media (min-width: 64.0625em) {
  *[collapsed] {
    display: none !important;
    visibility: hidden
  }
}

/* Z8 GNB */
#page-top-navigation {
  position: sticky;
  z-index: 1010;
  top: 0;
  opacity: 1!important;
  transition: transform 200ms ease-in-out, translate 200ms ease-in-out;
}
#page-top-navigation.topped {
  translate: 0;
}
#page-top-navigation.pushed {
  translate: 0 -50px;
}
@media (width <= 600px) {
  #page-top-navigation.pushed {
    translate: 0 -40px;
  }
}
#sgw-top-navigation {
  position: sticky;
  z-index: 1010;
  opacity: 1!important;
  top: 0;
  width: 100%;
  justify-content: center;
  background-color: hsl(0 0% 0%);
}
#sgw_gnb_div {
  position: static;
}
@media only screen and (max-width: 600px) {
  #sgw_gnb_div.lightboxmode {
    overflow: unset!important;
  }
}
#stickyHamburger {
  position: fixed;
  z-index: 1010;
  top: 0;
  left: 0;

  max-width: 70%;
  cursor: pointer;
}
#stickyHamburger a > div {
  height: 40px;
  padding: 0 0.625rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

@media (width > 600px) {
  #stickyHamburger {
    display: none;
  }
}

nav.sticky {
  transition: transform 200ms ease-in-out, translate 200ms ease-in-out;
  isolation: isolate;
  display: flex;
  align-items: center;
}
nav.sticky.topped,
nav.sticky.bottomed {
  position: sticky;
}
nav.sticky.topped {
  top: 0;
}
nav.sticky.bottomed {
  bottom: 0;
}