@font-face {
  font-family: "Argesta Hairline";
  src: url("../../font/Argesta_Hairline.otf");
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

:root {
  --main-color: #30D158;
  --sub-color: #777777;

  --hover-animation-duration: 100ms;
}

* {
  margin: 0;
  padding: 0;

  z-index: 0;

  transition: all linear var(--hover-animation-duration) 0s;
}

p {
  word-break: keep-all;
}

html {
  position: relative;
}

body {
  width: 100%;

  background: black;

  overflow-x: hidden;
}

.text {
  font-family: "Argesta Hairline", sans-serif;

  color: white;
}

.text span {
  color: var(--main-color);
}

.text.reverse {
  color: var(--main-color);
}

.text.reverse span {
  color: white;
}

#introduce {
  padding: 13.33vw 11.875vw 11.875vw;
}

#introduce #title {
  font-weight: 400;
  font-size: 4.16vw;
  letter-spacing: -1.6px;
  line-height: 4.73vw;
}

#introduce #divider {
  width: 100%;
  height: .1vw;
  margin: 3.25vw 0;

  background: white;
}

#introduce #sub_title {
  margin-bottom: 6.25vw;

  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 400;
  font-size: 2.08vw;
  letter-spacing: -.8px;
  line-height: 2.91vw;
}

#introduce #description {
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 300;
  font-size: 1.66vw;
  letter-spacing: -1.28px;
  line-height: 2.5vw;
}

@media screen and (max-width: 645px) {
  #introduce {
    padding: 44.61vw 5.12vw 63.58vw;
  }

  #introduce #title {
    font-size: 12.3vw;
    line-height: 14.35vw;
  }

  #introduce #divider {
    height: .51vw;
    margin: 6.28vw 0;
  }

  #introduce #sub_title {
    margin-bottom: 20.51vw;
    
    font-size: 6.15vw;
    line-height: 8.71vw;
  }

  #introduce #description {
    font-size: 5.38vw;
    line-height: 8.2vw;
  }
}