html, body {
  font-family: "Nanum Myeongjo", serif;
  font-style: italic;
  font-size: 1.8vw;
  line-height: 1.4;
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
          text-size-adjust: none;
  color: #222;
}

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, strong, b, i, dl, dt, dd, ol, ul, li, label, table, caption, tbody, tfoot, thead, tr, th, td, canvas, footer, header, nav, section, summary, video, input, button {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

img {
  vertical-align: top;
}

ol, ul {
  list-style: none;
}

button {
  overflow: visible;
  border: 0;
  background: none;
  color: inherit;
  line-height: normal;
  cursor: pointer;
  border-radius: 0;
}

a, a:active, a:hover {
  text-decoration: none;
  color: inherit;
}

.s0 {
  transition-delay: 0ms !important;
}

.s1 {
  transition-delay: 25ms !important;
}

.s2 {
  transition-delay: 50ms !important;
}

.s3 {
  transition-delay: 75ms !important;
}

.s4 {
  transition-delay: 100ms !important;
}

.s5 {
  transition-delay: 125ms !important;
}

.s6 {
  transition-delay: 150ms !important;
}

.s7 {
  transition-delay: 175ms !important;
}

.s8 {
  transition-delay: 200ms !important;
}

.s9 {
  transition-delay: 225ms !important;
}

.s10 {
  transition-delay: 250ms !important;
}

.s11 {
  transition-delay: 275ms !important;
}

.s12 {
  transition-delay: 300ms !important;
}

.s13 {
  transition-delay: 325ms !important;
}

.s14 {
  transition-delay: 350ms !important;
}

.s15 {
  transition-delay: 375ms !important;
}

.s16 {
  transition-delay: 400ms !important;
}

.s17 {
  transition-delay: 425ms !important;
}

.s18 {
  transition-delay: 450ms !important;
}

.s19 {
  transition-delay: 475ms !important;
}

.s20 {
  transition-delay: 500ms !important;
}

.s21 {
  transition-delay: 525ms !important;
}

.s22 {
  transition-delay: 550ms !important;
}

.s23 {
  transition-delay: 575ms !important;
}

.s24 {
  transition-delay: 600ms !important;
}

.s25 {
  transition-delay: 625ms !important;
}

.s26 {
  transition-delay: 650ms !important;
}

.s27 {
  transition-delay: 675ms !important;
}

.s28 {
  transition-delay: 700ms !important;
}

.s29 {
  transition-delay: 725ms !important;
}

.s30 {
  transition-delay: 750ms !important;
}

:root {
  --largeTxt: 2.5rem;
}

::-moz-selection {
  background-color: #9A24FC;
  color: #fff;
}

::selection {
  background-color: #9A24FC;
  color: #fff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.txt_wrap {
  height: calc(var(--largeTxtMo, var(--largeTxt)) * 1.2);
  line-height: 1.2;
  font-size: var(--largeTxtMo, var(--largeTxt));
  position: relative;
  display: inline-block;
  margin-left: 0;
  transition: margin 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  padding-right: 20px;
  min-width: 30vw;
  overflow: hidden;
}
.txt_wrap div {
  transition: opacity 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95), transform 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95), visibility 0.5s 0.5s;
}
.txt_wrap div span:not(.space) {
  display: inline-block;
  padding: 0 0.1em;
  margin: 0 -0.1em;
  box-sizing: border-box;
  transform-origin: center center 0.4em;
  transition: 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.txt_wrap div.txt_show {
  position: absolute;
  top: 0;
  left: 0;
  color: #9A24FC;
  opacity: 1;
  visibility: hidden;
}
.txt_wrap div.txt_show span {
  transform: rotate3d(1, -0.5, 0, 90deg) !important;
}
.txt_wrap .tooltip {
  font-style: normal;
  display: inline-block;
  background: linear-gradient(152.03deg, #9A24FC 1.14%, #5F39E2 53.23%, #078EDE 99.97%);
  color: #fff;
  border-radius: 5px;
  padding: 6px 12px 8px;
  visibility: hidden;
  position: fixed;
  box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px;
  font-family: "Noto Sans KR", sans-serif;
  font-size: 17px;
  line-height: 1.4;
  z-index: 99;
}

.con .txt_wrap.hover {
  margin-left: 1.6rem;
}
.con .txt_wrap.hover span:not(.space) {
  transition: transform 0.7s cubic-bezier(0.5, 0, 0, 1);
}
.con .txt_wrap.hover .txt_basic span {
  transform: rotate3d(1, 0.3, 0, -90deg);
}
.con .txt_wrap.hover .txt_show {
  visibility: visible;
  transition: opacity 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95), transform 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95), visibility 0.5s;
}
.con .txt_wrap.hover .txt_show span {
  transform: rotate3d(0, 0, 0, 90deg) !important;
}
.con .txt_wrap.hover .tooltip {
  visibility: visible;
}
.con .txt_wrap.hover .tooltip.mo {
  top: 36px;
  left: 10px;
}

.wrap {
  min-width: 360px;
  width: 80%;
  margin: auto;
  padding: 0 20px 6rem 20px;
}
.wrap progress {
  position: fixed;
  top: 20px;
  left: 10px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: calc(100% - 20px);
  height: 6px;
  background: transparent;
  border: none;
  z-index: 99;
}
.wrap progress::-webkit-progress-bar {
  background: transparent;
}
.wrap progress::-webkit-progress-value {
  background: linear-gradient(152.03deg, #9A24FC 1.14%, #5F39E2 53.23%, #078EDE 99.97%);
  background-attachment: fixed;
}
.wrap progress::-moz-progress-bar {
  background: linear-gradient(152.03deg, #9A24FC 1.14%, #5F39E2 53.23%, #078EDE 99.97%);
  background-attachment: fixed;
}
.wrap header {
  height: var(--mainHeight, 80vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wrap header .txt_wrap {
  width: 100%;
  box-sizing: border-box;
}
@media screen and (max-width: 768px) {
  .wrap header {
    --mainHeight: 55vh;
    --largeTxtMo: 4.5rem;
  }
}
.wrap .con,
.wrap footer {
  line-height: 1;
}
.wrap .con h2,
.wrap .con h3,
.wrap footer h2,
.wrap footer h3 {
  font-family: "Noto Sans KR", sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  padding-left: 0.4rem;
}
@media screen and (max-width: 768px) {
  .wrap .con h2,
  .wrap .con h3,
  .wrap footer h2,
  .wrap footer h3 {
    padding-bottom: 10px;
  }
}
.wrap .con h2 + ul,
.wrap .con h3 + ul,
.wrap footer h2 + ul,
.wrap footer h3 + ul {
  padding: 1rem 0 0 0;
}
.wrap .con h2 + ul li + li,
.wrap .con h3 + ul li + li,
.wrap footer h2 + ul li + li,
.wrap footer h3 + ul li + li {
  margin-top: 1.6rem;
}
.wrap .con a,
.wrap footer a {
  display: inline-block;
}
.wrap .con a[href^=javascript],
.wrap footer a[href^=javascript] {
  cursor: default;
}
.wrap .con > div + div {
  margin-top: 4rem;
}
.wrap footer {
  margin-top: 6rem;
}
.wrap footer h3 {
  padding-bottom: 1rem;
}
.wrap footer a {
  display: inline-block;
  font-size: 2.5rem;
}
.wrap footer a ~ a {
  margin-top: 1.6rem;
}
.wrap .reveal {
  transition: 0.7s;
  transform: translate3d(0, 2.5rem, 0) rotate(9deg);
  opacity: 0;
}
.wrap .reveal.on {
  transform: none;
  opacity: 1;
}
.wrap .reveal.no-rotate {
  transform: none;
}

@keyframes contact-ani {
  from {
    opacity: 0;
    letter-spacing: 4px;
  }
  to {
    opacity: 1;
    letter-spacing: 0;
  }
}
@media screen and (max-width: 1000px) {
  html, body {
    font-size: 2.2vw;
  }
  .wrap {
    width: 100%;
    padding: 0 20px 6rem 20px;
  }
  .wrap dl dt {
    font-size: 15px;
  }
  .txt_wrap .tooltip {
    font-size: 15px;
  }
}
@media screen and (max-width: 768px) {
  .wrap dl dt {
    font-size: 13px;
  }
  .wrap dl dd {
    padding-top: 1.5rem;
  }
  .txt_wrap .tooltip {
    font-size: 13px;
  }
}
/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .wrap .reveal {
    transform: none;
    opacity: 1;
  }
}/*# sourceMappingURL=app.css.map */