@font-face {
  font-family: "PaperlogyMedium";
  src: url("./assets/fonts/Paperlogy-5Medium.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "GmarketSansBold";
  src: url("./assets/fonts/GmarketSansTTFBold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

body {
  margin: 0px;
}

img {
  display: block;
  width: 100%;
  max-width: 1340px;
  margin: 0px auto;
}

header {
  display: flex;
  width: 100%;
  height: 48px;
  align-items: center;
  justify-content: center;
  background-color: #004332;
}
.header-wrap {
  width: 100%;
  max-width: 1340px;
  padding: 0px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#logo_link {
  display: flex;
  align-items: center;
  justify-content: center;
}
#logo_link img {
  max-width: 104px;
}
nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
nav .nav-btn {
  font-family: "PaperlogyMedium", sans-serif;
  font-size: 14px;
  text-decoration: none;
  letter-spacing: -1px;
  color: #fff;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
nav span {
  background-color: #fff;
  width: 1px;
  height: 12px;
}

#s_01,
#s_02,
#s_05,
#s_08 {
  background-color: #e9f2dd;
}
#s_03 {
  background-color: #d9e599;
}
#s_04 {
  background-color: #006b5b;
}
#s_07 {
  background-color: #32a083;
}
#s_09 {
  background-color: #006b5b;
}

#s_02 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#s_02_video {
  position: absolute;
  width: 80.4vw;
  bottom: 4.66vw;
}

#step_section {
  width: 100%;
  background-color: #e9f2dd;
}
#stepper {
  margin: 0 auto;
  max-width: 896px;
  padding: 0px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6vw;
}
#step_controller {
  width: 100%;
  padding: 0px 2.4vw;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1vw;
}
#step_controller .step_btn {
  width: 100%;
  padding: 2vw 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "GmarketSansBold", sans-serif;
  font-size: 2.8vw;
  font-weight: bold;
  color: #b5b5b7;
  border: none;
  border-radius: 2vw 2vw 0px 0px;
  background-color: #c9cacc;
  cursor: pointer;
}
.step_viewer {
  width: 100%;
  box-sizing: border-box;
  border: 0.6vw solid #137364;
  border-radius: 4vw;
  overflow: hidden;
}
.step_viewer img {
  display: none;
}
#stepper[active-step="1"] .step_btn[data-step="1"],
#stepper[active-step="2"] .step_btn[data-step="2"],
#stepper[active-step="3"] .step_btn[data-step="3"],
#stepper[active-step="4"] .step_btn[data-step="4"] {
  color: #fff;
  background-color: #006b5b;
}
#stepper[active-step="1"] img[data-step="1"],
#stepper[active-step="2"] img[data-step="2"],
#stepper[active-step="3"] img[data-step="3"],
#stepper[active-step="4"] img[data-step="4"] {
  display: block;
}

#s_10 {
  padding: 8vw 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #040001;
}
#cta_button_sign_up {
  font-family: "GmarketSansBold", sans-serif;
  font-size: 4.8vw;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: -0.1vw;
  color: #fff200;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

#s_11 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#button_kakao {
  position: absolute;
  width: 34vw;
  height: 11.8vw;
  background-color: transparent;
  border: none;
  cursor: pointer;
  top: 7.4vw;
  left: 4vw;
  z-index: 1;
}

*.m {
  display: block;
}
*.p {
  display: none;
}

@media only screen and (min-width: 768px) {
  *.m {
    display: none;
  }
  *.p {
    display: block;
  }

  header {
    height: 80px;
  }
  .header-wrap {
    padding: 0px 24px;
  }
  #logo_link img {
    max-width: 208px;
  }
  nav {
    gap: 12px;
  }
  nav .nav-btn {
    font-size: 16px;
  }
  nav span {
    width: 2px;
    height: 14px;
  }

  #s_01 {
    background-image: url(./assets/p/s_01_back_p.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
  }

  #s_02_video {
    width: 44.8vw;
    bottom: 1.4vw;
  }

  #stepper {
    padding: 0px 12vw;
    gap: 1vw;
  }
  #step_controller {
    padding: 0px 2.4vw;
    gap: 0.8vw;
  }
  #step_controller .step_btn {
    padding: 1.2vw 0px;
    font-size: 2.4vw;
    letter-spacing: -0.04vw;
    border-radius: 1.2vw 1.2vw 0px 0px;
  }
  .step_viewer {
    border: 0.32vw solid #137364;
    border-radius: 2vw;
  }

  #s_10 {
    padding: 4.8vw 0px;
  }
  #cta_button_sign_up {
    font-size: 2.8vw;
  }

  #button_kakao {
    width: 22vw;
    height: 10.4vw;
    top: 4.4vw;
    left: 20.6vw;
  }
}

@media only screen and (min-width: 1024px) {
  nav .nav-btn {
    font-size: 18px;
  }

  #step_controller .step_btn {
    padding: 16px 0px;
    font-size: 24px;
    border-radius: 16px 16px 0px 0px;
  }
}

@media only screen and (min-width: 1340px) {
  #s_02_video {
    width: 600px;
    bottom: 16px;
  }

  #stepper {
    gap: 12px;
  }
  #step_controller {
    gap: 10px;
  }
  .step_viewer {
    border: 4px solid #137364;
    border-radius: 24px;
  }

  #s_10 {
    padding: 64px 0px;
  }
  #cta_button_sign_up {
    font-size: 36px;
  }

  #button_kakao {
    width: 300px;
    height: 144px;
    top: 60px;
    left: unset;
    margin-right: 478px;
  }
}