.sec_2 .container .wrapper {
  position: relative;
  width: 100%;
  height: 250vh;
  overflow: hidden;
}
.sec_2 .container .wrapper .bg_area {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100vh;
}
.sec_2 .container .wrapper .bg_area .video_box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.sec_2 .container .wrapper .bg_area .video_box::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
}
.sec_2 .container .wrapper .bg_area .video_box video {
  position: relative;
  height: 115%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.sec_2 .container .wrapper .bg_area.intro_bg_area.bg--fixed {
  position: fixed;
  right: 0;
  bottom: 0;
  height: 100vh;
  max-height: unset;
}
.sec_2 .container .wrapper .bg_area.intro_bg_area.bg--fixed-end {
  top: auto;
  right: auto;
  bottom: 0;
}
.sec_2 .container .wrapper .txt_area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  /* max-height: -webkit-fill-available; */
  display: flex;
  align-items: center;
  z-index: 1;
}
.sec_2 .container .wrapper .txt_area .cont .txt {
  color: #fff;
  font-size: var(--font-size-ko-04);
  line-height: var(--font-lineheight-ko-04);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-02);
}
.sec_2 .container .wrapper .txt_area .cont .txt:not(:first-child) {
  margin-top: 32px;
}

/*
.sec_3 {
  .container {
    background: #fff;
    .wrapper {
      .service_list {
        gap: 36px;
        .list_item {
          .thumb_area {
            border-radius: 6px;
            overflow: hidden;
            img {
            }
          }
          .cont_area {
            margin-top: 32px;
            .tit {
              font-size: var(--font-size-ko-04);
              line-height: var(--font-lineheight-ko-04);
              font-weight: 700;
              letter-spacing: var(--letter-spacing-02);
            }
            .txt {
              font-size: var(--font-size-ko-06);
              line-height: var(--font-lineheight-ko-06);
              font-weight: 500;
              letter-spacing: var(--letter-spacing-03);
              margin-top: 8px;
              color: var(--color-secondary);
            }
          }
        }
      }
    }
  }
}
*/
.sec_3 .container .wrapper {
  width: 96%;
  /*
  .tit_area {
    .tit {
      font-size: var(--font-size-ko-02);
      line-height: var(--font-lineheight-ko-02);
      font-weight: 700;
      letter-spacing: var(--letter-spacing-01);
    }
  }
  .process_step_area {
    .step_list {
      width: calc(100% - 46px);
      font-size: 0;
      margin-top: 60px;
      .list_item {
        position: relative;
        width: calc(25% + 46px);
        margin: 0 -23px;
        border-radius: 50%;
        transition: transform 0.6s cubic-bezier(0.32, 0.6, 0.46, 1);
        padding-top: calc(25% + 46px);
        &:nth-child(n).animate {
          transform: translateX(0);
        }
        &:nth-child(1) {
          background-color: #eba7c3;
          transform: translateX(-75px);
        }
        &:nth-child(2) {
          background-color: #df75a0;
          transform: translateX(-25px);
        }
        &:nth-child(3) {
          background-color: #d3437d;
          transform: translateX(25px);
        }
        &:nth-child(4) {
          background: var(--color-primary);
          transform: translateX(75px);
        }
        .txt_area {
          position: absolute;
          top: 50%;
          left: 0;
          width: 100%;
          transform: translateY(-50%);
          color: #fff;
          padding: 0 12px;
          .step {
            font-size: var(--font-size-en-06);
            line-height: var(--font-lineheight-en-06);
            font-weight: 700;
            letter-spacing: var(--letter-spacing-03);
          }
          .txt {
            font-size: var(--font-size-ko-05);
            line-height: var(--font-lineheight-ko-05);
            font-weight: 700;
            letter-spacing: var(--letter-spacing-03);
            margin-top: 2px;
          }
        }
      }
    }
    .step_mark {
      margin-top: 24px;
      .mark {
        position: relative;
        display: inline-block;
        color: #888;
        &::after {
          content: "";
          display: block;
          position: absolute;
          top: 6px;
          left: 40px;
          width: calc(100% - 80px);
          height: 8px;
          border: 2px solid #bbb;
          border-top: 0;
        }
        span {
          position: relative;
          display: inline-block;
          padding: 0 16px;
          background: var(--color-base-bg);
          z-index: 1;
          font-size: var(--font-size-en-06);
          line-height: var(--font-lineheight-en-06);
          font-weight: 700;
          letter-spacing: var(--letter-spacing-03);
        }
        &.mark1 {
          width: calc(75% + 23px);
          margin-right: -23px;
        }
        &.mark2 {
          width: calc(25% + 23px);
          margin-left: -23px;
        }
      }
    }
  }
  */
}
.sec_3 .container .wrapper .process_list_area .process_list {
  padding: 16px 40px;
  background: #fff;
  text-align: left;
  margin-top: 60px;
  border-radius: 6px;
}
.sec_3 .container .wrapper .process_list_area .process_list.on .list_item:nth-child(1) .tit span {
  animation: typo_animate 0.6s both;
}
.sec_3 .container .wrapper .process_list_area .process_list.on .list_item:nth-child(1) .txt {
  animation: opacity 0.6s both;
}
.sec_3 .container .wrapper .process_list_area .process_list.on .list_item:nth-child(2) .tit span {
  animation: typo_animate 0.6s 0.3s both;
}
.sec_3 .container .wrapper .process_list_area .process_list.on .list_item:nth-child(2) .txt {
  animation: opacity 0.6s 0.3s both;
}
.sec_3 .container .wrapper .process_list_area .process_list.on .list_item:nth-child(3) .tit span {
  animation: typo_animate 0.6s 0.6s both;
}
.sec_3 .container .wrapper .process_list_area .process_list.on .list_item:nth-child(3) .txt {
  animation: opacity 0.6s 0.6s both;
}
.sec_3 .container .wrapper .process_list_area .process_list.on .list_item:nth-child(4) .tit span {
  animation: typo_animate 0.6s 0.9s both;
}
.sec_3 .container .wrapper .process_list_area .process_list.on .list_item:nth-child(4) .txt {
  animation: opacity 0.6s 0.9s both;
}
.sec_3 .container .wrapper .process_list_area .process_list.on .list_item:nth-child(5) .tit span {
  animation: typo_animate 0.6s 1.2s both;
}
.sec_3 .container .wrapper .process_list_area .process_list.on .list_item:nth-child(5) .txt {
  animation: opacity 0.6s 1.2s both;
}
.sec_3 .container .wrapper .process_list_area .process_list.on .list_item:nth-child(6) .tit span {
  animation: typo_animate 0.6s 1.5s both;
}
.sec_3 .container .wrapper .process_list_area .process_list.on .list_item:nth-child(6) .txt {
  animation: opacity 0.6s 1.5s both;
}
.sec_3 .container .wrapper .process_list_area .process_list .list_item {
  position: relative;
  padding: 24px 40px;
}
.sec_3 .container .wrapper .process_list_area .process_list .list_item:not(:last-child) {
  border-bottom: 1px solid #ebebeb;
}
.sec_3 .container .wrapper .process_list_area .process_list .list_item::before {
  content: attr(data-num);
  position: absolute;
  left: 0;
  top: 27px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #b18523;
  color: #fff;
  text-align: center;
  line-height: 26px;
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 700;
}
.sec_3 .container .wrapper .process_list_area .process_list .list_item .tit {
  font-size: var(--font-size-ko-05);
  line-height: var(--font-lineheight-ko-05);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-03);
  overflow: hidden;
}
.sec_3 .container .wrapper .process_list_area .process_list .list_item .tit span {
  transform: translateY(100%);
}
.sec_3 .container .wrapper .process_list_area .process_list .list_item .txt {
  color: var(--color-secondary);
  margin-top: 4px;
  font-size: var(--font-size-ko-06);
  line-height: var(--font-lineheight-ko-06);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-03);
  opacity: 0;
}
.sec_3 .container .wrapper .cta_area.on .txt span {
  animation: main_visual_animate2 0.5s both;
}
.sec_3 .container .wrapper .cta_area .txt {
  font-size: var(--font-size-ko-03);
  line-height: var(--font-lineheight-ko-03);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-02);
  overflow: hidden;
}
.sec_3 .container .wrapper .cta_area .txt span {
  color: #b18523;
  transform: translateY(100%);
}
.sec_3 .container .wrapper .cta_area .more_area {
  margin-top: 60px;
}
.sec_3 .container .wrapper .cta_area .more_area.on .more_btn:first-child {
  animation: fadeIn 0.7s 0.5s both;
}
.sec_3 .container .wrapper .cta_area .more_area.on .more_btn:last-child {
  animation: fadeIn 0.7s 0.8s both;
}
.sec_3 .container .wrapper .cta_area .more_area .more_btn {
  opacity: 0;
}
.sec_3 .container .wrapper .cta_area .more_area .more_btn:last-child {
  margin-left: 16px;
}

/* keyframe */
@keyframes typo_animate {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* RWD */
@media (max-width: 1080px) {
  .sec_1 .container .wrapper {
    width: 100%;
  }
  .sec_1 .container .wrapper .tit_area {
    padding-bottom: 7.4074vw;
  }
  .sec_2 .container .wrapper .bg_area .video_box video {
    display: none;
  }
  .sec_2 .container .wrapper .bg_area .video_box .mo_img {
    display: block;
    height: 100vh;
  }
  .sec_2 .container .wrapper .bg_area .video_box::after {
    display: none;
  }
  .sec_2 .container .wrapper .bg_area.intro_bg_area.bg--fixed {
    height: 100vh;
  }
  .sec_2 .container .wrapper .txt_area .cont {
    padding-top: 20vw;
  }
  .sec_2 .container .wrapper .txt_area .cont .txt {
    font-size: 3.5vw;
    line-height: 5vw;
  }
  .sec_2 .container .wrapper .txt_area .cont .txt .mo_br {
    display: block;
  }
  .sec_2 .container .wrapper .txt_area .cont .txt:not(:first-child) {
    margin-top: 3vw;
  }
  .sec_3 .container .wrapper {
    width: 100%;
    max-width: unset;
  }
  .sec_3 .container .wrapper .process_list_area .process_list {
    margin-top: 0;
    padding: 0 5.5556vw;
  }
  .sec_3 .container .wrapper .process_list_area .process_list .list_item {
    padding: 7.4074vw 0;
  }
  .sec_3 .container .wrapper .process_list_area .process_list .list_item::before {
    top: 7.4074vw;
    left: 0;
    width: 5.5556vw;
    height: 5.5556vw;
    font-size: 3.7037vw;
    line-height: 5.5556vw;
  }
  .sec_3 .container .wrapper .process_list_area .process_list .list_item .tit {
    padding-top: 8.3333vw;
    font-size: 4.6296vw;
    line-height: 6.2963vw;
  }
  .sec_3 .container .wrapper .process_list_area .process_list .list_item .txt {
    margin-top: 2.7778vw;
    font-size: 3.7037vw;
    line-height: 5.3704vw;
    word-break: break-all;
    letter-spacing: -1px;
  }
  .sec_3 .container .wrapper .process_list_area .process_list .list_item .mo_br {
    display: block;
  }
  .sec_3 .container .wrapper .cta_area .txt {
    font-size: 6.4815vw;
    line-height: 8.3333vw;
    letter-spacing: -1px;
  }
  .sec_3 .container .wrapper .cta_area .more_area {
    margin-top: 9.2593vw;
  }
  .sec_3 .container .wrapper .cta_area .more_area .mo_br {
    display: block;
  }
  .sec_3 .container .wrapper .cta_area .more_area .more_btn {
    width: 38.4259vw;
    border-radius: 0.7407vw;
    background: #b18523;
    color: #fff;
    line-height: 12.7778vw;
    font-size: 3.7037vw;
    border: none;
    padding: 0;
  }
  .sec_3 .container .wrapper .cta_area .more_area .more_btn:last-child {
    margin-left: 0;
    margin-top: 3.7037vw;
  }
}
@media (max-width: 700px) {
  .sec_2 .container .wrapper .txt_area .cont {
    padding-top: 10vw;
  }
  .sec_2 .container .wrapper .txt_area .cont .txt {
    font-size: 4.2593vw;
    line-height: 6.2963vw;
  }
  .sec_2 .container .wrapper .txt_area .cont .txt .mo_br {
    display: block;
  }
  .sec_2 .container .wrapper .txt_area .cont .txt:not(:first-child) {
    margin-top: 9.2593vw;
  }
}