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

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

* {
  -webkit-tap-highlight-color: black;
  outline: none;
}

#section_1 {
  position: relative;

  margin-top: 28.125vw;
  padding: 0 11.875vw;
}

#section_1 #title,
#section_2 #title,
#section_3 #title {
  margin-bottom: 12.91vw;

  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 400;
  font-size: 2.81vw;
  letter-spacing: -1.08px;
  line-height: 4.375vw;
}

#section_1 #categories {
  display: flex;
  flex-direction: column;

  justify-content: flex-start;
}

#section_1 #categories>* {
  width: fit-content;
}

#section_1 #categories>*:nth-child(2) {
  align-self: flex-end;
}

#section_1 #categories>*:nth-child(3) {
  justify-content: flex-start;
}

#section_1 #categories *:nth-child(3) #description {
  width: 55%;
}

#section_1 #categories>*:not(:first-child) {
  margin-top: 8.33vw;
}

#section_1 #categories .category {
  display: flex;
  flex-direction: column;
}

#section_1 #categories .category #name {
  margin-bottom: 2.08vw;

  font-size: 3.33vw;
  letter-spacing: -1.28px;
  line-height: 4.73vw;
}

#section_1 #categories .category #description {
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 300;
  font-size: 1.66vw;
  letter-spacing: -.64;
  line-height: 2.5vw;
}

@media screen and (max-width: 645px) {
  #section_1 {
    margin-top: 0;
    padding: 0 5.12vw;
  }

  #section_1 #title,
  #section_2 #title,
  #section_3 #title {
    margin-bottom: 30.76vw;

    font-size: 8.2vw;
    line-height: 10.51vw;
  }

  #section_1 #categories>*:not(:first-child) {
    margin-top: 22.56vw;
  }

  #section_1 #categories .category #name {
    margin-bottom: 6.15vw;
  
    font-size: 10.25vw;
    letter-spacing: -.8px;
    line-height: 23.33vw;
  }

  #section_1 #categories *:nth-child(3) #description {
    width: 100%;
  }
  
  #section_1 #categories .category #description {
    font-size: 5.38vw;
    letter-spacing: -.42;
    line-height: 7.69vw;
  }
}

#section_2 {
  position: relative;

  margin-top: 26.45vw;
  padding: 0 11.875vw;
}

#section_2 #title {
  margin-bottom: 13.33vw;

  line-height: 3.64vw;
}

#section_2 #description_slider {
  display: flex;
  flex-direction: column;
  align-self: center;
}

#section_2 #description_slider #description_box {
  margin: 0 17.18vw;
  overflow-x: hidden;
}

#section_2 #description_slider #description_box * {
  width: 100%;

  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 300;
  font-size: 1.66vw;
  letter-spacing: -1.28px;
  line-height: 2.5vw;
  text-align: center;
}

#section_2 #description_slider #description_controller {
  margin-top: 3.31vw;

  display: flex;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
}

#section_2 #description_slider #description_controller img {
  width: 3.43vw;

  cursor: pointer;
}

#section_2 #description_slider #description_controller #description_numbering {
  margin: 0 7.13vw;

  font-family: "Argesta Hairline", sans-serif;
  font-weight: 400;
  font-size: 1.25vw;
  letter-spacing: -.72px;
  line-height: 9.47vw;
  color: #777777;
}

#section_2 #description_slider #description_controller #description_numbering span {
  color: var(--main-color);
}

@media screen and (max-width: 645px) {
  #section_2 {
    margin-top: 67.17vw;
    padding: 0 5.12vw;
  }

  #section_2 #title {
    margin-bottom: 41.02vw;
  
    line-height: 10.51vw;
  }

  #section_2 #description_slider #description_box {
    margin: 0 5.12vw;
  }

  #section_2 #description_slider #description_box * {
    font-size: 5.38vw;
    letter-spacing: -.42px;
    line-height: 8.2vw;
  }
  
  #section_2 #description_slider #description_controller {
    margin-top: 20.51vw;
  }
  
  #section_2 #description_slider #description_controller img {
    width: 10.25vw;
  }
  
  #section_2 #description_slider #description_controller #description_numbering {
    margin: 0 14.61vw;

    font-size: 5.38vw;
    letter-spacing: -.63px;
  }
}

#section_3 {
  position: relative;

  margin-top: 24.67vw;
  padding: 0 11.875vw;
}

#section_3 #title {
  margin-bottom: 8.33vw;
}

#section_3 #description {
  margin-bottom: 22.65vw;

  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) {
  #section_3 {
    margin-top: 44.61vw;
    padding: 0 5.12vw;
  }

  #section_3 #title {
    margin-bottom: 30.76vw;
  }
  
  #section_3 #description {
    margin-bottom: 55.89vw;
  
    font-size: 5.38vw;
    letter-spacing: -.42px;
    line-height: 8.2vw;
  }
}