@charset "UTF-8";
.hide {
  display: none;
}

#keyIMG {
  height: 200vh;
}
#keyIMG .img_container {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  background: url(../img/main_img.jpg) center;
  background-size: cover;
  transition: transform 0.1s;
}
#keyIMG .img_container .scope {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.1s;
}
#keyIMG .img_container .btnScroll {
  position: absolute;
  bottom: 3vw;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}
#keyIMG .img_container .btnScroll img {
  width: 6vw;
  animation: scrollbtn 0.5s ease-in-out alternate infinite;
}

@keyframes scrollbtn {
  0% {
    transform: translateY(-10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
#mainSection1 {
  background: #E8EAE1;
  padding: 16vw 4vw 20vw;
  border-radius: 3vw 3vw 0 0;
  margin: 0 0 -40vh;
}
#mainSection1 .slogan {
  font-size: 3vw;
  font-weight: 700;
  line-height: 110%;
  border-bottom: 1px #000 solid;
  margin-bottom: 4vw;
  padding-bottom: 1vw;
}
#mainSection1 .slogan .flex {
  display: flex;
  align-items: center;
}
#mainSection1 .slogan .flex img {
  margin-left: -1vw;
  width: 30vw;
}
#mainSection1 p.text {
  margin-bottom: 12vw;
}
#mainSection1 .h4black {
  text-align: right;
}
#mainSection1 .h4black h3 {
  display: inline-block;
  background: #000;
  color: #E8EAE1;
  font-size: 2.5em;
  line-height: 120%;
  padding: 0 1vw;
  margin: 0 0 3vw;
}
#mainSection1 .features {
  border-top: 1px #000 solid;
}
#mainSection1 .features li {
  display: flex;
  gap: 5vw;
  padding: 3vw 3vw 2vw;
  border-bottom: 1px #000 solid;
}
#mainSection1 .features li img {
  width: 8vw;
}
#mainSection1 .features li h4 {
  margin: 0;
  font-weight: 500;
  line-height: 150%;
  font-size: 1em;
}
#mainSection1 .features li h4 span.en {
  display: block;
  font-size: 4em;
  font-weight: 700;
  line-height: 110%;
}

#mainSection2 {
  background: #fff;
  margin: 0 0 -40vh;
  padding: 12vw 4vw 20vw;
  border-radius: 3vw 3vw 0 0;
  box-shadow: 0 0 1vw 0 rgba(0, 0, 0, 0.1);
}
#mainSection2 .img .baloons .img1 {
  margin: 0 auto 10vw;
  width: 88vw;
}
#mainSection2 .img .baloons .img1_2 {
  position: absolute;
  top: 0;
  width: 88vw;
}
#mainSection2 .img .img2 {
  margin: -10vw auto 22vw;
  width: 34vw;
  transform: translateY(10vw);
}
#mainSection2 p.text {
  padding-bottom: 4vw;
  border-bottom: 1px #000 solid;
}

#mainSection3 {
  background: #000;
  margin: 0 0 -40vh;
  padding: 12vw 4vw 12vw;
  border-radius: 3vw 3vw 0 0;
  box-shadow: 0 0 1vw 0 rgba(0, 0, 0, 0.5);
  color: #fff;
  overflow: hidden;
}
#mainSection3 h4 {
  font-size: 3em;
  margin: 0 0 8vw;
}
#mainSection3 .wordFlow {
  width: 100vw;
  height: 4vw;
  overflow: hidden; /* 영역 밖 텍스트 숨김 */
  display: flex;
  margin: 0 -4vw;
}
#mainSection3 .wordFlow .wordList {
  display: flex;
  gap: 1vw;
  padding-right: 1vw;
  will-change: transform; /* 성능 최적화 */
}
#mainSection3 .wordFlow .wordList .word {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 1.5em;
  font-weight: 100;
  background: #1e1e1e;
  border-radius: 100px;
  padding: 0 7vw;
}
#mainSection3 .text_container {
  margin-top: 8vw;
  border-top: 1px #fff solid;
}
#mainSection3 .text_container .text {
  margin: 5vw 0 15vw 24vw;
  font-weight: 300;
}
#mainSection3 .projects .topper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2vw;
}
#mainSection3 .projects .topper h5 {
  font-size: 1em;
  font-weight: 300;
  margin: 0;
}
#mainSection3 .projects .topper a {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 0.2vw 2vw;
  border-radius: 100px;
}
#mainSection3 .projects .topper a:hover {
  color: #000;
  background: #fff;
}
#mainSection3 .projects .swiperProjects .swiper {
  width: 100%;
}
#mainSection3 .projects .swiperProjects .swiper-slide {
  background: rgba(255, 255, 255, 0.2);
  min-height: 10vw;
  cursor: pointer;
  border-radius: 1vw;
  overflow: hidden;
}
#mainSection3 .projects .swiperProjects .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#mainSection3 .projects .swiper-scrollbar {
  position: relative;
  width: 100%;
  background: rgba(255, 255, 255, 0.2);
  height: 0.7vw;
  margin: 2.5vw 0 0;
  left: 0;
}
#mainSection3 .projects .swiper-scrollbar .swiper-scrollbar-drag {
  background: #fff;
  cursor: pointer;
}
#mainSection3 .slogan {
  display: flex;
  justify-content: space-between;
  margin: 12vw 0 6vw;
  font-size: 2.4em;
  gap: 2vw;
}
#mainSection3 .slogan strong {
  white-space: nowrap;
}
#mainSection3 .slogan span {
  width: 100%;
  border-bottom: 1px #fff solid;
}

#mainSection4 {
  background: #E8EAE1;
  margin: 0 0 -40vh;
  padding: 12vw 4vw 20vw;
  border-radius: 3vw 3vw 0 0;
}
#mainSection4 h4 {
  display: block;
  margin: 0 0 8vw;
  font-size: 3em;
  line-height: 150%;
  border-bottom: 1px #000 solid;
}
#mainSection4 .img_process {
  display: block;
  width: 70vw;
  margin: 8vw auto 12vw;
}
#mainSection4 .slogan {
  font-size: 3em;
  line-height: 150%;
}

#mainSection5 {
  background: #000;
  color: #fff;
  padding: 12vw 4vw 6vw;
  border-radius: 3vw 3vw 0 0;
  box-shadow: 0 0 1vw 0 rgba(0, 0, 0, 0.5);
}
#mainSection5 h4 {
  display: inline-block;
  font-size: 13em;
  margin: 0 0 8vw;
  line-height: 90%;
}
#mainSection5 h4 img {
  width: 100%;
}
#mainSection5 .form_nav_tap {
  display: flex;
  gap: 1vw;
  justify-content: center;
  margin-bottom: 3.5vw;
}
#mainSection5 .form_nav_tap a {
  text-align: center;
  cursor: pointer;
  width: 18vw;
  padding: 0.5vw;
  color: #fff;
  font-size: 1em;
  border: 1px rgba(255, 255, 255, 0.2) solid;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.1);
}
#mainSection5 .form_nav_tap a:hover {
  background: rgba(255, 255, 255, 0.2);
}
#mainSection5 .form_nav_tap a.active {
  background: #fff;
  color: #000;
}
#mainSection5 .formContent {
  width: 100%;
  top: 0;
  display: none;
  background: #fff;
  border-radius: 1vw;
  color: #000;
  padding: 4vw 4.5vw;
}
#mainSection5 .formContent.active {
  display: block;
}
#mainSection5 .formContent .topper {
  display: flex;
  gap: 2vw;
  margin-bottom: 4vw;
}
#mainSection5 .formContent .topper h5 {
  margin: 0;
  font-size: 0.8em;
}
#mainSection5 .formContent .topper span {
  font-size: 0.6em;
  font-weight: 200;
}
#mainSection5 .formContent .agree_privacy {
  margin: 8vw 0 0;
  justify-content: center;
}
#mainSection5 .formContent .agree_privacy .check-select {
  justify-content: center;
  font-weight: 500;
}
#mainSection5 .formContent .agree_privacy .check-select a {
  font-weight: 200;
  color: #000;
}

@media all and (max-width: 768px) {
  .swiper-slide {
    border-radius: 2vw !important;
  }
  #keyIMG .img_container {
    background: url(../img/main_img_m.jpg) center;
    background-size: cover;
  }
  #keyIMG .img_container .btnScroll {
    bottom: 8vw;
  }
  #keyIMG .img_container .btnScroll img {
    width: 20vw;
  }
  #mainSection1 {
    padding: 16vw 4vw 30vh;
  }
  #mainSection1 .slogan {
    font-size: 6.5vw;
    line-height: 120%;
    margin-bottom: 8vw;
    padding-bottom: 4vw;
  }
  #mainSection1 .slogan .flex img {
    width: 56vw;
  }
  #mainSection1 p.text {
    margin-bottom: 30vw;
    font-size: 1.3em;
    line-height: 180%;
  }
  #mainSection1 .h4black {
    text-align: center;
  }
  #mainSection1 .h4black h3 {
    display: block;
    font-size: 2.1em;
    font-weight: 500;
    padding: 1vw;
    margin: 0 0 6vw;
  }
  #mainSection1 .features li {
    align-items: center;
  }
  #mainSection1 .features li img {
    width: 10vw;
  }
  #mainSection1 .features li h4 {
    font-size: 1.3em;
  }
  #mainSection1 .features li h4 span.en {
    font-size: 1.7em;
  }
  #mainSection2 {
    padding: 16vw 4vw 30vh;
  }
  #mainSection2 .img .img1 {
    margin: 0 auto 10vw;
    width: 88vw;
  }
  #mainSection2 .img .img2 {
    margin: 0 auto 20vw;
    width: 70vw;
  }
  #mainSection2 p.text {
    padding-bottom: 4vw;
    border-bottom: none;
    font-size: 1.4em;
    line-height: 180%;
    font-weight: 500;
  }
  #mainSection3 {
    padding: 16vw 4vw 30vh;
  }
  #mainSection3 h4 {
    text-align: center;
    font-size: 2.2em;
    margin: 0 0 16vw;
  }
  #mainSection3 .wordFlowMb {
    width: 100%;
    margin: 0;
  }
  #mainSection3 .wordFlowMb .wordList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1vw;
  }
  #mainSection3 .wordFlowMb .wordList .word {
    align-items: center;
    white-space: nowrap;
    font-size: 1.2em;
    font-weight: 200;
    background: #1e1e1e;
    border-radius: 100px;
    padding: 2vw 3vw;
  }
  #mainSection3 .text_container {
    margin-top: 12vw;
    border-top: 1px #fff solid;
  }
  #mainSection3 .text_container .text {
    margin: 12vw 0 15vw 0;
    font-size: 1.4em;
    line-height: 180%;
    font-weight: 500;
  }
  #mainSection3 .projects .topper {
    margin-bottom: 4vw;
    justify-content: center;
  }
  #mainSection3 .projects .topper h5 {
    font-size: 1.5em;
  }
  #mainSection3 .projects .linkBtn {
    width: 100%;
    margin: 6vw 0 20vw;
    display: flex !important;
    justify-content: center;
  }
  #mainSection3 .projects .linkBtn a {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 100px;
    padding: 0.5vw 4vw;
    font-size: 1.2em;
  }
  #mainSection3 .projects .swiper-scrollbar {
    height: 1.5vw;
    margin: 4vw 0 0;
  }
  #mainSection3 .slogan.mb {
    display: flex !important;
    margin-top: 6vw;
    font-size: 1.7em;
    gap: 3vw;
  }
  #mainSection4 {
    padding: 16vw 4vw 30vh;
  }
  #mainSection4 h4 {
    margin: 0 0 16vw;
    line-height: 180%;
  }
  #mainSection4 .img_process {
    width: 49vw;
    margin-bottom: 24vw;
  }
  #mainSection4 .slogan {
    font-size: 1.8em;
  }
  #mainSection5 {
    padding: 16vw 4vw 24vw;
  }
  #mainSection5 h4 {
    display: block;
    font-size: 6.5em;
    text-align: center;
    border-bottom: none;
    margin-bottom: 16vw;
  }
  #mainSection5 .form_nav_tap {
    gap: 2vw;
    margin-bottom: 2vw;
  }
  #mainSection5 .form_nav_tap a {
    width: calc((100% - 4vw) / 3);
    padding: 1vw;
    font-size: 1.3em;
    font-weight: 500;
  }
  #mainSection5 .formContent .topper {
    margin: 4vw auto 8vw;
  }
  #mainSection5 .formContent .topper h5 {
    font-size: 1.5em;
  }
  #mainSection5 .formContent .topper span {
    font-size: 1em;
    font-weight: 400;
  }
}/*# sourceMappingURL=main.css.map */