.sec1 {width: 100%; height: auto;}
.sec1 .img-box {position: relative; width: 100%; height: auto; overflow: hidden; border-radius: 30px;}
.sec1 .img-box img {animation: img_sk 20s linear alternate infinite; width: 100%; height: auto; border-radius: 30px;}
@keyframes img_sk {
  0% {transform: scale(2);}
  100% {transform: scale(1);}
}

.sec1 .img-box .txt-box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: auto; padding: 0 20px; box-sizing: border-box;}
.sec1 .img-box .txt-box .txt {font-size: 40px; font-weight: bold; line-height: 1.4; color: var(--wt); text-align: center;}

.animate_txt {width: 100%; height: auto; margin-top: 160px;}
.animate_txt .tit {margin-bottom: 50px; text-align: center; font-size: 28px; font-weight: 500; line-height: 1.4; color: var(--gray_6);}
.animate_txt .txt-item {width: 100%; height: auto;}
.animate_txt .txt-item ul {display: flex; flex-flow: column; align-items: center; gap: 40px;}
.animate_txt .txt-item ul li {display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 40px; font-weight: bold; line-height: 1.4; color: var(--black_3);}
.animate_txt .txt-item ul li .txt_ld {position: relative; display: flex; align-items: center; justify-content: center; width: 74px; height: 60px; overflow: hidden; top:1px;}
.animate_txt .txt-item ul li .txt_ld img {position: absolute; top: 100%; width: 60px; height: auto; margin: 0 auto;}
.animate_txt .txt-item ul li .txt_ld span {position: absolute; top: 0px;}

/* animate */
.animate_txt .txt-item ul li:nth-child(1) img {animation: txt2_move1_1 .5s linear both;}
.animate_txt .txt-item ul li:nth-child(1) span {animation: txt2_move1_2 .5s linear both;}
@keyframes txt2_move1_1 {
  0% {top: 0;}
  100% {top: -100%;}
}

@keyframes txt2_move1_2 {
  0% {top: 100%;}
  100% {top: 0;}
}
.animate_txt .txt-item ul li.on:nth-child(1) img {animation: txt_move1_1 .5s linear both;}
.animate_txt .txt-item ul li.on:nth-child(1) span {animation: txt_move1_2 .5s linear both;}
@keyframes txt_move1_1 {
  0% {top: 100%;}
  100% {top: 0;}
}

@keyframes txt_move1_2 {
  0% {top: 0;}
  100% {top: -100%;}
}

.animate_txt .txt-item ul li:nth-child(2) img {animation: txt2_move2_1 .5s .3s linear both;}
.animate_txt .txt-item ul li:nth-child(2) span {animation: txt2_move2_2 .5s .3s linear both;}
@keyframes txt2_move2_1 {
  0% {top: 0;}
  100% {top: -100%;}
}

@keyframes txt2_move2_2 {
  0% {top: 100%;}
  100% {top: 0;}
}
.animate_txt .txt-item ul li.on:nth-child(2) img {animation: txt_move2_1 .5s .3s linear both;}
.animate_txt .txt-item ul li.on:nth-child(2) span {animation: txt_move2_2 .5s .3s linear both;}
@keyframes txt_move2_1 {
  0% {top: 100%;}
  100% {top: 0;}
}

@keyframes txt_move2_2 {
  0% {top: 0;}
  100% {top: -100%;}
}

.animate_txt .txt-item ul li:nth-child(3) img {animation: txt2_move3_1 .5s .6s linear both;}
.animate_txt .txt-item ul li:nth-child(3) span {animation: txt2_move3_2 .5s .6s linear both;}
@keyframes txt2_move3_1 {
  0% {top: 0;}
  100% {top: -100%;}
}

@keyframes txt2_move3_2 {
  0% {top: 100%;}
  100% {top: 0;}
}
.animate_txt .txt-item ul li.on:nth-child(3) img {animation: txt_move3_1 .5s .6s linear both;}
.animate_txt .txt-item ul li.on:nth-child(3) span {animation: txt_move3_2 .5s .6s linear both;}
@keyframes txt_move3_1 {
  0% {top: 100%;}
  100% {top: 0;}
}

@keyframes txt_move3_2 {
  0% {top: 0;}
  100% {top: -100%;}
}

/* sec2 */
.sec2 {width: 100%; height: auto;}
.sec2 .txt-box {margin-top: 50px;}
.sec2 .txt-box:first-of-type {margin-top: 0;}
.sec2 .txt-box .tit {margin-bottom: 20px; font-size: 28px; font-weight: bold; line-height: 1.4; color: var(--pr);}
.sec2 .txt-box .txt {font-size: 40px; font-weight: bold; line-height: 1.4; color: var(--black_3);}

.sec2 .sec2_ct {width: 100%; height: auto; margin-top: 60px;}
.sec2 .sec2_ct ul {display: flex; align-items: center; margin: 0 -27.5px; overflow: hidden;}
.sec2 .sec2_ct ul li {position: relative; width: calc(100% / 3); padding: 0 27.5px; box-sizing: border-box; transition: all .3s; z-index: -1;}

/* .sec2 .sec2_ct ul li:nth-child(1) {left: -200px;}
.sec2 .sec2_ct ul li:nth-child(2) {top: -200px;}
.sec2 .sec2_ct ul li:nth-child(3) {right: -200px;} */

.sec2 .sec2_ct ul li .child-box {width: 100%; height: auto;}
.sec2 .sec2_ct ul li .child-box .img-box {width: 100%; height: auto;}
.sec2 .sec2_ct ul li .child-box .img-box img {width: 100%; height: auto; border-radius: 20px;}

.sec2 .sec2_ct ul li .child-box .txt-box {display: flex; align-items: flex-start; justify-content: space-between; margin-top: 30px;}
.sec2 .sec2_ct ul li .child-box .txt-box p {font-size: 28px; font-weight: bold; line-height: 1.5; color: var(--black_3);}
.sec2 .sec2_ct ul li .child-box .txt-box p span {color: var(--gray_9);}
.sec2 .sec2_ct ul li .child-box .txt-box img {width: 46px; height: auto;}

/* sec3 */
.sec3 {width: 100%; height: auto; background: url(./../img/sec3_bg.webp)no-repeat 50% 50%; background-size: cover; background-attachment: fixed;}
.sec3 .container {display: flex; align-items: center; justify-content: center;}
.sec3 .txt-box {display: flex; align-items: center; justify-content: center; flex-flow: column; gap: 44px; text-align: center;}
.sec3 .txt-box p {font-size: 40px; font-weight: bold; line-height: 1.5; color: var(--gray_9);}
.sec3 .txt-box p span {animation: color_op 1s linear alternate infinite; color: var(--wt);}

@keyframes color_op {
  0% {opacity: 0.5;}
  100% {opacity: 1;}
}

/* sec4 */
.sec4 {width: 100%; height: auto;}
.sec4 .tit-box {margin-bottom: 60px; text-align: center;}
.sec4 .tit-box .tit {margin-bottom: 30px; font-size: 40px; font-weight: bold; line-height: 1.4; color: var(--black_3);}
.sec4 .tit-box .tit span {color: var(--pr);}
.sec4 .tit-box .sub {font-size: 28px; font-weight: 500; line-height: 1.5; color: var(--gray_6);}

.sec4 .img-box {width: 100%; height: auto; aspect-ratio: 1280/580; text-align: center; overflow: hidden; border-radius: 30px;}
.sec4 .img-box img {animation: img_wd2 1s ease-in-out alternate both; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 30px; transition: all .5s; will-change: width;}
@keyframes img_wd2 {
  0% {width: 100%; transform: scale(1);}
  100% {width: 0%; transform: scale(2);}
}

.sec4.on .img-box img {animation: img_wd 1s ease-in-out alternate both; will-change: width;}
@keyframes img_wd {
  0% {width: 0%; transform: scale(2);}
  100% {width: 100%; transform: scale(1);}
}