.sec1 {padding: 248px 0 171px; background: var(--wt_fa); overflow: hidden;}
.sec1 .tit-box.left {position: relative; z-index: 1; white-space: nowrap;}
.sec1 .tit-box.left:before {position: absolute; top: 419.625px; left: 496.141px; content: ''; display: block; width: 100%; height: 100%; transform: rotate(270deg); transform-origin: top left; background-image: linear-gradient(to bottom, #fafafa 0%, rgba(250, 250, 250, 0.9) 69%, rgba(250, 250, 250, 0) 100%); z-index: -1;}
.sec1 .d-flex {display: flex; align-items: flex-start; justify-content: space-between; gap: 78px;}
.rolling-area {overflow: hidden; width: 1030px; margin-right: -292px;}
.sec1_item {display: flex; animation: roll 10s linear infinite; width: fit-content; gap: 20px;}
.sec1_item ul {display: flex; gap: 20px; padding: 0; margin: 0; list-style: none;}

@keyframes roll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.sec1_item ul li {display: flex; flex-flow: column; gap: 20px; width: 330px; height: auto; flex: 0 0 auto;}
.sec1_item ul li .child-box {width: 100%; height: auto; padding: 25px 25px 31px; box-sizing: border-box; background: var(--wt); border-radius: 20px; box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.08);}
.sec1_item ul li .child-box .top {display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px;}
.sec1_item ul li .child-box .top .tit {font-size: 18px; font-weight: bold; line-height: 1; color: var(--black_1);}
.sec1_item ul li .child-box .top .ckd_img {width: 30px; height: auto; aspect-ratio: 1; background: url(./../img/ckd_off2.png)no-repeat 50% 50%; background-size: cover;}
.sec1_item ul li.on .child-box .top .ckd_img {animation: jello-diagonal-2 0.8s both; background: url(./../img/ckd_on2.png)no-repeat 50% 50%; background-size: cover;}
.sec1_item ul li:nth-child(even).on .child-box:nth-child(1) .top .ckd_img {animation: jello-diagonal-2 0.8s both; background: url(./../img/ckd_off2.png)no-repeat 50% 50% !important; background-size: cover !important;}
.sec1_item ul li:nth-child(even).on .child-box:nth-child(1) .top .ckd_img {animation: jello-diagonal-2 0.8s both; background: url(./../img/ckd_off2.png)no-repeat 50% 50% !important; background-size: cover !important;}
@keyframes jello-diagonal-2 {
  0% {
    -webkit-transform: skew(0deg 0deg);
            transform: skew(0deg 0deg);
  }
  30% {
    -webkit-transform: skew(-25deg -25deg);
            transform: skew(-25deg -25deg);
  }
  40% {
    -webkit-transform: skew(15deg, 15deg);
            transform: skew(15deg, 15deg);
  }
  50% {
    -webkit-transform: skew(-15deg, -15deg);
            transform: skew(-15deg, -15deg);
  }
  65% {
    -webkit-transform: skew(5deg, 5deg);
            transform: skew(5deg, 5deg);
  }
  75% {
    -webkit-transform: skew(-5deg, -5deg);
            transform: skew(-5deg, -5deg);
  }
  100% {
    -webkit-transform: skew(0deg 0deg);
            transform: skew(0deg 0deg);
  }
}

.sec1_item ul li .child-box .body {display: flex; flex-flow: column; gap: 10px; width: 100%; height: auto;}
.sec1_item ul li .child-box .body dl {display: flex; align-items: center; gap: 45px;}
.sec1_item ul li .child-box .body dl dt {min-width: 55px; width: auto; font-size: 12px; font-weight: 400; line-height: 1; color: var(--gray_69);;}
.sec1_item ul li .child-box .body dl dd {font-size: 12px; font-weight: 400; line-height: 1; color: var(--black_3);}

.sec1_item ul li .child-box .s_note {width: 100%; height: auto; padding: 15px 20px; margin-top: 15px; box-sizing: border-box; background: var(--wt_f6); border-radius: 5px;}
.sec1_item ul li .child-box .s_note .tit {margin-bottom: 12px; font-size: 12px; font-weight: bold; line-height: 1; color: var(--gray_69);}
.sec1_item ul li .child-box .s_note dl {display: flex; align-items: center; gap: 8px;}
.sec1_item ul li .child-box .s_note dl dt {width: 12px; height: auto;}
.sec1_item ul li .child-box .s_note dl dt img {width: 100%; height: auto;}
.sec1_item ul li .child-box .s_note dl dd {font-size: 11px; font-weight: 400; line-height: 1; color: var(--black_3);}

/* sec2 */
.sec2 {width: 100%; height: auto; padding: 150px 0;}
.sec2 .tit-box {position: relative; z-index: 2;}
.sec2 .container {overflow: hidden;}

.sec2_item {width: 100%; height: auto;}
.sec2_item ul {display: flex; align-items: center; flex-wrap: wrap; margin: 0 -12px;}
.sec2_item ul li {position: relative; width: calc(100% / 3); height: auto; padding: 0 12px; box-sizing: border-box; transition: all .3s;}
.sec2_item ul li .child-box {position: relative; width: 100%; height: auto; aspect-ratio: 424/400; border-radius: 20px; padding: 50px; box-sizing: border-box; overflow: hidden;}
.sec2_item ul li:nth-child(1) .child-box {background: #EEF4FE;}
.sec2_item ul li:nth-child(2) .child-box {background: #E3F9EE;}
.sec2_item ul li:nth-child(3) .child-box {background: #2C3667;}

.sec2_item ul li .child-box .tit {font-size: 24px; font-weight: bold; line-height: 1.6; color: var(--black_1);}
.sec2_item ul li:nth-child(3) .child-box .tit {color: var(--wt);}

.sec2_item ul li .child-box .img-box {position: absolute; bottom: 47px;}

.sec2_item ul li:nth-child(1) .child-box .img-box {right: 45px; width: 167px; height: 156px;}
.sec2_item ul li:nth-child(1) .child-box .img-box img:nth-child(1) {position: absolute; bottom: 0; right: 0; width: 125px; height: auto;}
.sec2_item ul li:nth-child(1) .child-box .img-box.on img:nth-child(1) {animation: tilt-in-tr 0.65s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
@keyframes tilt-in-tr {
  0% {
    -webkit-transform: rotateY(-35deg) rotateX(20deg) translate(250px, -250px) skew(-12deg, -15deg);
            transform: rotateY(-35deg) rotateX(20deg) translate(250px, -250px) skew(-12deg, -15deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}
.sec2_item ul li:nth-child(1) .child-box .img-box img:nth-child(2) {position: absolute; top: 0; left: 0; width: 81px; height: auto;}
.sec2_item ul li:nth-child(1) .child-box .img-box img:nth-child(2) {animation: vibrate-2 2s linear infinite both;}
@keyframes vibrate-2 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  40% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  60% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  80% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}


.sec2_item ul li:nth-child(2) .child-box .img-box {position: absolute; right: 0;}
.sec2_item ul li:nth-child(2) .child-box .img-box .d-flex {display: flex; align-items: center; justify-content: center; gap: 15px;}
.sec2_item ul li:nth-child(2) .child-box .img-box .d-flex:first-of-type {margin-bottom: 15px;}
.sec2_item ul li:nth-child(2) .child-box .img-box img {width: 80px; height: auto;}
.sec2_item ul li:nth-child(2) .child-box .img-box img:nth-child(1) {}
.sec2_item ul li:nth-child(2) .child-box .img-box img:nth-child(2) {}
.sec2_item ul li:nth-child(2) .child-box .img-box img:nth-child(3) {width: 62px;}
.sec2_item ul li:nth-child(2) .child-box .img-box img:nth-child(4) {}
.sec2_item ul li:nth-child(2) .child-box .img-box img:nth-child(5) {}

.sec2_item ul li:nth-child(2) .child-box .img-box.on img {animation: roll-in-left 0.6s ease-out both;}
@keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
            transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

.sec2_item ul li:nth-child(3) .child-box .img-box {position: absolute; bottom: 50px; right: 50px; width: 110px; text-align: center;}
.sec2_item ul li:nth-child(3) .child-box .img-box.on {animation: jello-horizontal 0.9s both;}
@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
.sec2_item ul li:nth-child(3) .child-box .img-box img:nth-child(1) {width: 100%; height: auto;}
.sec2_item ul li:nth-child(3) .child-box .img-box img:nth-child(2) {width: calc(100% - 20px); height: auto; margin-top: 10px;}

.sec2_item .description {width: 100%; height: auto; margin-top: 80px;}
.sec2_item .description p {text-align: center; font-size: 30px; font-weight: bold; line-height: 1; color: var(--black_1);}
.sec2_item .description p span {font-size: 40px;}
.sec2_item .description p span:first-child {color: var(--pr);}
.sec2_item .description p span:nth-child(2) {color: var(--pr2);}
.sec2_item .description p span:nth-child(3) {color: var(--pr2);}

.sec2_item .sec_btn {display: flex; align-items: center; justify-content: center; background: var(--pr); border-radius: 15px; width: 300px; height: 60px; aspect-ratio: 365 / 60; margin: 0 auto; margin-top: 60px; font-size: 18px; font-weight: bold; line-height: 1; color: var(--wt);}

/* sec3 */
.sec3 {position: relative; width: 100%; height: auto; padding: 150px 0 294px; background: var(--black_1);}
.sec3 .tit-box .tit span {color: #3D6AFF;}
.sec3 .sec_btn {position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; background: var(--pr); border-radius: 15px; width: 300px; height: 60px; aspect-ratio: 300 / 60; margin: 0 auto; font-size: 18px; font-weight: bold; line-height: 1; color: var(--wt); z-index: 2;}
.sec3:before {position: absolute; bottom: 0; left: 0; content: ''; display: block; width: 100%; height: auto; aspect-ratio: 1917/448; background-image: linear-gradient(to bottom, rgba(12, 16, 26, 0) 0%, rgba(12, 16, 26, 0.9) 31%, #0c101a); z-index: 1;}
.sec3 .tit-box {margin-bottom: 60px;}
.sec3 .tit-box .tit {color: var(--wt);}
.sec3 .tit-box .sub {color: var(--gray_9);}

/* sec3_ct */
.sec3_ct {position: relative; width: 100%; height: auto;}
.sec3_ct ul {display: flex; align-items: center; gap: 24px 0; flex-wrap: wrap; margin: 0 -12px;}
.sec3_ct ul li {width: calc(100% / 7); padding: 0 12px; box-sizing: border-box;}
.sec3_ct ul li:hover img {transform: scale(1.2);}
.sec3_ct ul li .child-box {width: 100%; height: auto;}
.sec3_ct ul li .child-box .img-box {width: 100%; height: auto;}
.sec3_ct ul li .child-box .img-box img {width: 100%; height: auto; transition: all .3s;}

/* sec4 */
.sec4 {width: 100%; height: auto; padding: 140px 0 112px;}

/* sec4_ct */
.sec4_ct {width: 100%; height: auto;}
.sec4_ct ul {display: flex; align-items: center; gap: 24px 0; flex-wrap: wrap; margin: 0 -12px;}
.sec4_ct ul li {width: calc(100% / 3); padding: 0 12px; box-sizing: border-box;}
.sec4_ct ul li .child-box {display: flex; align-items: center; justify-content: center; flex-flow: column; gap: 20px; width: 100%; height: auto; aspect-ratio: 424/340; background: var(--wt_f0); border-radius: 20px; overflow: hidden;}
.sec4_ct ul li .child-box .img-box {width: 150px; height: auto;}
.sec4_ct ul li .child-box .img-box img {width: 100%; height: auto;}

.sec4_ct ul li:nth-child(1) .child-box .img-box.on img {animation: slide-in-fwd-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
@keyframes slide-in-fwd-center {
  0% {
    -webkit-transform: translateZ(-1400px);
    transform: translateZ(-1400px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
.sec4_ct ul li:nth-child(2) .child-box .img-box.on img {animation: slide-in-blurred-bl 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;}
@keyframes slide-in-blurred-bl {
  0% {
    -webkit-transform: translate(-1000px, 1000px) skew(-80deg, -10deg);
            transform: translate(-1000px, 1000px) skew(-80deg, -10deg);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0) skew(0deg, 0deg);
            transform: translate(0, 0) skew(0deg, 0deg);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
.sec4_ct ul li:nth-child(3) .child-box .img-box.on img {animation: tilt-in-top-1 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
@keyframes tilt-in-top-1 {
  0% {
    -webkit-transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
            transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0deg) translateY(0) skewY(0deg);
            transform: rotateY(0deg) translateY(0) skewY(0deg);
    opacity: 1;
  }
}


.sec4_ct ul li .child-box .txt {font-size: 20px; font-weight: bold; line-height: 1.5; color: var(--black_1); text-align: center;}


/* dbding form style */


/* .sec_new {position: relative; width: 100%; height: auto; padding: 140px 0 112px; background: #f6f6f6; z-index: 6;} */
/* .sec_new .container {padding-top: 100px; padding-bottom: 140px;} */
/* .sec_new .tit-box {margin-bottom: 60px; text-align: center;}
.sec_new .tit-box .tit {font-size: 50px; font-weight: 800; line-height: 1.2; color: var(--black_1);}
.sec_new .tit-box .tit span {color: var(--pr);}

.sec_new .form-box {width: 100%; height: auto; position: relative;}
.sec_new .form-box .input-box {display: flex; flex-flow: column; gap: 10px; width: 100%; height: auto; margin-bottom: 30px;}
.sec_new .form-box .input-box .tit {font-size: 18px; font-weight: bold; line-height: 1.28; color: #242a30;}
.sec_new .form-box .input-box .tit span {color: #ff4040;}
.sec_new .form-box .input-box .tit em {padding-left: 10px; font-size: 16px; font-weight: bold; line-height: 1.44; color: var(--pr);}
.sec_new .form-box .input-box .d-flex {display: flex; align-items: center; gap: 11px;}
.sec_new .form-box .input-box input[type="text"] {width: 100%; height: 60px; padding: 0 22px; border-radius: 15px; background: var(--wt); box-sizing: border-box; font-size: 16px; font-weight: 400; line-height: 1.44; color: var(--black_1);}
.sec_new .form-box .input-box input[type="text"]::placeholder {color: #bfbfbf;}

.sec_new .form-box .input-box textarea {width: 100%; height: 150px; padding: 22px; border-radius: 15px; background: var(--wt); box-sizing: border-box; font-size: 16px; font-weight: 400; line-height: 1.44; color: var(--black_1);}
.sec_new .form-box .input-box textarea::placeholder {color: #bfbfbf;}

.sec_new .form-box .input-box select {width: 100%; height: 60px; border-radius: 15px; padding: 0 22px; background: url(./../img/select_icon.png)no-repeat calc(100% - 20px) 50%; background-size: 15px 9px; background-color: var(--wt); box-sizing: border-box; appearance: none; font-size: 16px; font-weight: 400; line-height: 1.44; color: var(--black_1);;}

.sec_new .form-box .input-box .ckd-box {display: flex; align-items: center; gap: 10px;}
.sec_new .form-box .input-box .ckd-box input[type="checkbox"] {display: none;}
.sec_new .form-box .input-box .ckd-box label {display: flex; align-items: center; justify-content: center; width: 241px; height: 60px; border-radius: 15px; border: 1px solid #d4d4d4; background: var(--wt); box-sizing: border-box; text-align: center; font-size: 16px; font-weight: 500; line-height: 1.19; color: var(--gray_72);}
.sec_new .form-box .input-box .ckd-box input[type="checkbox"]:checked + label {border-color: var(--pr); background: #e5efff; color: var(--pr);}
.sec_new .form-box .input-box .ckd-box input[type="radio"]:checked + label {border-color: var(--pr); background: #e5efff; color: var(--pr);}

.sec_new .form-box .input-box input[type="radio"] {display: none;}
.sec_new .form-box .input-box .radio_tit {display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: bold; line-height: 1.28; color: #242a30;}
.sec_new .form-box .input-box .radio_tit button {font-size: 18px; font-weight: bold; line-height: 1.28; color: #242a30;}
.sec_new .form-box .input-box .radio_tit:before {content: ''; display: block; width: 21px; height: auto; aspect-ratio: 5/5; background: url(./../img/nckd_off2.png)no-repeat 50% 50%; background-size: cover;}
.sec_new .form-box .input-box input[type="radio"]:checked + .radio_tit:before {content: ''; display: block; width: 21px; height: auto; aspect-ratio: 5/5; background: url(./../img/nckd_on2.png)no-repeat 50% 50%; background-size: cover;}

.sec_new .form-box .submit-btn {cursor: pointer; display: flex; align-items: center; justify-content: center; width: 100%; height: 60px; margin-top: 40px; border-radius: 15px; background: var(--pr); box-sizing: border-box; font-size: 18px; font-weight: 600; line-height: 1.17; color: var(--wt);}
*/
.form-box form .input-box.d_step{display: none;} 

.btn_hiddenzone {
  width: 100%;
  height: 80px;
  position: absolute;
  bottom: 0;
  z-index:3;
}