@charset "UTF-8";

/* progress */
#progress {
  background: #fff0a4;
  overflow: hidden;
}
#progress .width-wrap {
  z-index: 1;
}
#progress .width-wrap h2 {
  text-align: center;
  margin-top: 100px;
}
#progress .img-wrap {
  position: absolute;
  top: 30px;
  width: 100%;
  height: calc(100% + 6px);
  z-index: 1;
}
#progress .img-wrap .top-area {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  height: -webkit-fill-available;
}
#progress .img-wrap .bottom-area {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  height: -webkit-fill-available;
}

/* apply */
#apply {
  background: #fff;
  z-index: 2;
}
#apply .width-wrap {
  padding: 131px 0 100px;
}
#apply .width-wrap .title-area {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 48px;
}
#apply .width-wrap .title-area p {
  color: #666;
  font-size: 20px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.6px;
  margin-top: 16px;
}
.agree {
  margin-top: 36px;
  font-size: 14px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.42px;
}
#apply .width-wrap .text-area {
  background: #e8f1ff;
  border-radius: 15px;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 36px;
}
#apply .width-wrap .text-area p {
  font-size: 24px;
  line-height: 150%;
  letter-spacing: -0.72px;
}

/* responsive */
@media all and (max-width: 1445px) {
  #progress .img-wrap {
    width: 105%;
    height: calc(100% + -20px);
    top: 45px;
    left: -20px;
  }
  #progress .img-wrap .top-area img {
    width: 267.92px;
  }
  #progress .img-wrap .bottom-area img {
    width: 285.59px;
  }
}
@media all and (max-width: 1230px) {
  #progress .img-wrap {
    height: calc(100% + -34px);
    top: 55px;
  }
  #progress .img-wrap .top-area img {
    width: 198.13px;
  }
  #progress .img-wrap .bottom-area img {
    width: 211.05px;
  }
}
@media all and (max-width: 1155px) {
  #progress .width-wrap:before {
    right: -90px;
    width: 204.83px;
  }
}
@media all and (max-width: 1030px) {
  #progress .img-wrap {
    width: 120%;
    height: calc(100% + -27px);
    top: 46px;
    left: -10%;
  }
}
@media all and (max-width: 768px) {
  #apply .width-wrap .title-area p {
    font-size: 18px;
    letter-spacing: -0.54px;
  }
}
@media all and (max-width: 700px) {
  #apply .width-wrap .text-area p {
    font-size: 20px;
  }
  #apply .width-wrap .text-area .img-zone img {
    width: 115px;
  }
}
@media all and (max-width: 580px) {
  #apply .width-wrap .text-area {
    flex-direction: column;
    align-items: flex-start;
  }
  #apply .width-wrap .text-area .img-zone {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
@media all and (max-width: 455px) {
  #progress .width-wrap {
    padding: 100px 0;
  }
  #progress .img-wrap {
    width: 134%;
    height: calc(100% + 17px);
    top: 18px;
    left: -80px;
  }
  #progress .img-wrap .top-area img {
    width: 182.75px;
  }

  #apply .width-wrap {
    padding: 99px 0 60px;
  }
  #apply .width-wrap .title-area p {
    margin: 8px 0 28px;
  }
  .agree {
    margin-top: -32px;
  }
  #apply .width-wrap .text-area {
    padding: 12px 20px;
    margin-top: 16px;
  }
  #apply .width-wrap .text-area p {
    font-size: 18px;
    letter-spacing: -0.54px;
  }
}
@media all and (max-width: 375px) {
  #progress .img-wrap {
    width: 141%;
  }
}