@charset "utf-8";

.main_container{overflow: hidden;}

/* slick 슬릭 깜빡임 이슈 fix */
.slick-slider .slick-track,
.slick-slider .slick-list{-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition-delay: 10ms;}


/* btn_hex */
.btn_hex{display: inline-flex; justify-content: center; align-items: center; width: 140px; height: 152px; background: url("/src/img/2024/main/btn_hex_bdr.svg") no-repeat; background-size: 100% auto; text-align: center; margin: 96px auto 0;}
.btn_hex span{font-size: 22px; font-weight: var(--fwsb); color: var(--white); line-height: 1.25;}
.btn_hex span:after{content: ""; display: block; margin: 4px auto 0; width: 32px; height: 20px; background: url("/src/img/2024/main/btn_hex_arr.svg") no-repeat; background-position: center; background-size: 100% auto;}
@media (max-width: 1024px){
    .btn_hex{width: 120px; height: 131px;}
    .btn_hex span{font-size: 19px;}
    .btn_hex span:after{width: 26px; height: 18px;}
}
@media (max-width: 640px){
    .btn_hex{width: 100px; height: 111px;}
    .btn_hex span{font-size: 16px;}
    .btn_hex span:after{width: 26px; height: 18px;}
}


/* btn_wrap */
#main_container .btn_wrap{display: flex; gap: 10px;}


/* btn */
#main_container .btn{padding: 0 25px; line-height: 46px; border-radius: 46px; font-size: 20px; font-weight: var(--fwm); color: var(--white); background-color: var(--main); letter-spacing: -0.02em;}
#main_container .btn.hasIco{}
#main_container .btn.hasIco span{display: inline-flex; gap: 10px; align-items: center;}
#main_container .btn.hasIco span:after{content: ""; display: inline-block; vertical-align: middle; margin: 0 0 0 0; width: 17px; height: 10px; background-repeat: no-repeat; background-position: center;}
/* .btn.hasIco.diag span:after{background-image: url(/src/img/2024/main/btn_dbcircle.svg);} */
#main_container .btn.hasIco.arr{background-color: #2850fa;}
#main_container .btn.hasIco.arr span:after{background-image: url(/src/img/2024/main/btn_arr.svg);}
#main_container .btn.hasIco.arr:hover span:after{animation: arr_move 0.4s ease;}

#main_container .btn.diag{}
#main_container .btn.diag span{display: inline-flex; gap: 10px; align-items: center;}
#main_container .btn.diag span .shape{position: relative; display: inline-block; vertical-align: middle; margin: 0 0 0 0; width: 17px; height: 10px;}
#main_container .btn.diag span .shape:before{content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; background-color: #24ff54; transition: 0.3s ease-out;}
#main_container .btn.diag span .shape:after{content: ""; position: absolute; top: 0; left: 7px; width: 10px; height: 10px; border-radius: 50%; background-color: #05daff; transition: 0.3s ease-out;}
#main_container .btn.diag:hover span .shape:before{left: 7px;}
#main_container .btn.diag:hover span .shape:after{left: 0;}
@media (max-width: 1280px){
    #main_container .btn{padding: 0 20px; line-height: 43px; font-size: 17px;}
}


/* tit */
.tit{}
.tit h3{font-size: 60px; font-weight: var(--fwb); letter-spacing: -0.02em; line-height: 1.15;}
.tit .hex_link{display: inline-block; padding: 36px 0 0; font-size: 20px; font-weight: var(--fwm); letter-spacing: -0.04em;}
.tit .hex_link span{position: relative; display: inline-block; padding: 0 0 0 65px;}
.tit .hex_link span:before{content: ""; position: absolute; top: 50%; transform: translateY(-50%) rotate(0deg); left: 0; display: inline-flex; margin: 0 14px 0 0; vertical-align: middle; flex-direction: column; justify-content: center; transition: 0.5s; text-align: center; width: 51px; height: 55px; background: url("/src/img/2024/main/hex_link.svg") no-repeat; font-size: 24px; font-weight: var(--fwsb); color: #fff;}
.tit .hex_link:hover span:before{transform: translateY(-50%) rotate(90deg);}
.tit .hex_link span:after{content: "?"; position: absolute; top: 50%; transform: translateY(-50%); left: 0; display: inline-flex; margin: 0 14px 0 0; vertical-align: middle; flex-direction: column; justify-content: center; text-align: center; width: 51px; height: 55px; font-size: 24px; font-weight: var(--fwsb); color: #fff; transition: 0.5s;}
.tit .hex_link:hover span:after{font-size: 30px;}
.tit .hex_link span b{font-weight: var(--fwb);}
@media (max-width: 1600px){
    .tit h3{font-size: 50px;}
}
@media (max-width: 1280px){
    .tit{padding: 0 0 30px;}
    .tit h3{font-size: 4vw;}
    .tit .hex_link{padding: 20px 0 0;}
    .tit .hex_link span{padding: 0 0 0 55px;}
    .tit .hex_link span:before{background-size: contain; width: 41px; height: 45px; margin: 0 9px 0 0;}
    .tit .hex_link span:after{background-size: contain; width: 41px; height: 45px; margin: 0 9px 0 0;}
}
@media (max-width: 800px){
    .tit h3{font-size: 5.2vw;}
}
@media (max-width: 640px){
    .tit h3{font-size: 28px;}
    .tit .hex_link{font-size: 16px; padding: 10px 0 0;}
    .tit .hex_link span{padding: 0 0 0 40px;}
    .tit .hex_link span:before{width: 31px; height: 34px;}
    .tit .hex_link span:after{width: 31px; height: 34px; font-size: 20px;}
}


/* txt */
.txt{}
.txt .sup{font-size: 20px; font-weight: var(--fwb); color: #2850fa; line-height: 1;}
.txt .title{font-size: 45px; font-weight: var(--fwb); line-height: 1.33; padding: 14px 0 0;}
/* .on .txt .title span{animation: anime2 1.2s forwards; animation-timing-function: ease;}
.txt .title span:nth-child(1){animation-delay: 0s;}
.txt .title span:nth-child(2){animation-delay: 0.3s;} */



.txt .des{font-size: 22px; font-weight: var(--fwm); line-height: 1.36; padding: 39px 0 0;}
.txt .des p{}
.txt .des p + p{padding: 20px 0 0;}
.txt .des p b{font-weight: var(--fwb);}
.txt .btn_wrap{padding: 52px 0 0;}
@media (max-width: 1500px){
    .txt .title{font-size: 3.1vw;}
    .txt .des{font-size: clamp(18px,1.8vw,22px);}
    .txt .des p + p{padding: 10px 0 0;}
}
@media (max-width: 1280px){
    .txt .sup{font-size: 18px;}
    .txt .title{padding: 10px 0 0; line-height: 1.25;}
    .txt .des{padding: 20px 0 0;}
}
@media (max-width: 1000px){
    .txt .des{font-size: 17px;}
}
@media (max-width: 800px){
    .txt .title{font-size: 5vw;}
}
@media (max-width: 640px){
    .txt .sup{font-size: 16px;}
    .txt .title{font-size: 24px;}
    .txt .des{font-size: 15px;}
    .txt .btn_wrap{padding: 30px 0 0;}
}


/* titColor */
.titColor{color: #002367; text-align: center;}
.titColor .sup{color: #2871fa; font-family: 'Poppins'; font-size: 14px; font-weight: var(--fwsb); line-height: 1;}
.titColor .sup .color{color: #98bcff;}
.titColor h3{font-size: 45px; font-weight: var(--fwsb); line-height: 1; padding: 9px 0 0;}
.titColor .ico{padding: 32px 0 0;}
.titColor .ico lord-icon{width: 60px; height: 60px;}
.titColor .des{font-size: 18px; font-weight: var(--fwm); letter-spacing: -0.04em; line-height: 1.35; padding: 25px 0 0;}
@media (max-width: 1280px){
    .titColor h3{font-size: 4vw;}
    .titColor .des{font-size: clamp(18px,1.8vw,22px);}
}
@media (max-width: 800px){
    .titColor .sup{font-size: 15px;}
    .titColor h3{font-size: 5vw;}
    .titColor .des{font-size: clamp(18px,1.8vw,22px);}
}
@media (max-width: 640px){
    .titColor .sup{font-size: 16px;}
    .titColor h3{font-size: 24px;}
    .titColor .ico{padding: 20px 0 0;}
    .titColor .ico lord-icon{width: 80px; height: 80px;}
    .titColor .des{font-size: 15px; padding: 10px 0 0;}
}


/* descBox */
.descBox{display: flex; flex-wrap: wrap; background-color: #ddd; border-radius: 20px; overflow: hidden; box-shadow: 0px 0px 20px rgba(0,0,0,0.4);}
.descBox dt{display: flex; flex-direction: column; width: 48.979%; background: linear-gradient(90deg, #1A49A4 73.78%, #184294 100%); color: #fff; padding: 46px 55px 55px 60px}
.con2 .descBox dt{background: linear-gradient(90deg, #3852C2 76.78%, #344BB1 100%);}
.con3 .descBox dt{background: linear-gradient(90deg, #2B62CF 72.67%, #2759BC 100%);}
.descBox dt .sbj{display: flex; align-items: center;}
.descBox dt .sbj h4{position: relative; font-size: 24px; font-weight: var(--fwb); letter-spacing: -0.04em; line-height: 1.35;}
.descBox dt .sbj h4:before{content: ""; position: absolute; top: 0; left: 100%; display: inline-block; width: 27px; height: 27px; margin: 1px 0 0 7px; background: url("/src/img/2024/main/descBoxChk.svg") no-repeat center; display: none !important;}
.descBox dt .sbj .num{margin-left: auto; margin-right: 0.33em; font-size: 76px; font-family: 'Poppins'; font-style: italic; font-weight: var(--fwsb); letter-spacing: -0.2em; color: rgba(40, 113, 250, 0.15); line-height: 1;}
.descBox dt .sbj .num em{font-family: inherit; font-style: inherit; font-family: inherit; color: rgba(40, 113, 250, 0.5);}
.descBox dt .sub{font-size: 18px; font-weight: var(--fwm); letter-spacing: -0.04em; line-height: 1.45; padding: 22px 0 0;}
.descBox dt .btns{margin-top: auto;}
.descBox dt .btns a{display: inline-block; line-height: 36px; border-radius: 36px; font-size: 18px; font-weight: var(--fwsb); color: #2850fa; background-color: #fff; text-align: center; padding: 0 15px;}
.descBox dt .btns a span{display: inline-flex; align-items: center; gap: 8px;}
.descBox dt .btns a span:after{content: ""; display: inline-block; vertical-align: middle; margin: 0 0 0 0; width: 20px; height: 20px; background: #2850fa url("/src/img/2024/main/btn_descBox_arr.svg") no-repeat center; border-radius: 50%; transition: 0.2s;}
.descBox dt .btns a:hover span:after{margin-left: 8px;}
.descBox dd{width: 51.021%;}
.descBox dd .box{width: 100%; height: 100%;}
.descBox dd .box img{width: 100%; height: 100%; object-fit: cover;}
@media (max-width: 1400px){
    .descBox dt{padding: 4.5%;}
    .descBox dt .sub{font-size: 17px;}
}
@media (max-width: 1280px){
    .descBox dt .btns a{font-size: 17px;}
}
@media (max-width: 860px){
    .descBox dt .sbj h4{font-size: 20px;}
    .descBox dt .sub{font-size: 15px; padding: 15px 0 0;}
}
@media (max-width: 800px){
    .con1 .descBox{background: linear-gradient(90deg, #1A49A4 73.78%, #184294 100%);}
    .con2 .descBox{background: linear-gradient(90deg, #3852C2 76.78%, #344BB1 100%);}
    .con3 .descBox{background: linear-gradient(90deg, #2B62CF 72.67%, #2759BC 100%);}
    .descBox dt{width: 100%; padding: 0 0 40px; background: transparent;}
    .con2 .descBox dt{background: transparent;}
    .con3 .descBox dt{background: transparent;}
    .descBox dt .sbj h4{padding: 0 35px 0 0;}
    .descBox dt .sbj h4 br{display: none;}
    .descBox dt .sbj h4:before{left: auto; right: 0; top: -1px;}
    .descBox dt .sub{}
    .descBox dt .sub br{display: none;}
    .descBox dt .btns{margin-top: 20px; display: flex;}
    .descBox dd{width: 100%; aspect-ratio: 500 / 400;}
    .descBox dd .box{border-radius: 10px; overflow: hidden;}
}
@media (max-width: 640px){
    .descBox dt{padding: 0 0 40px;}
    .descBox dt .sbj h4{font-size: 20px;}
    .descBox dt .sbj h4:before{top: -1px;}
    .descBox dt .btns{margin-top: 15px;}
    .descBox dt .btns a{line-height: 30px; font-size: 15px; padding: 0 12px;}
}


/* scr_hint */
.scr_hint{position: absolute; z-index: 1; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: transparent; color: #fff; transition: 0.25s;}
.scr_hint .text{text-transform: uppercase; font-size: 14px; font-weight: var(--fwb); letter-spacing: 0; padding: 0 0 5px;}
.scr_hint .arrs{display: flex; flex-direction: column; gap: 5px;}
.scr_hint .arrs .arr{height: auto; line-height: 0; text-align: center; /* animation: arrowBlink 1.25s infinite; */}
.scr_hint .arrs .arr1{animation: arrowBlink1 2.5s infinite; animation-delay: 0s;}
.scr_hint .arrs .arr2{animation: arrowBlink2 2.5s infinite; animation-delay: 0s;}
.scr_hint .arrs .arr3{animation: arrowBlink3 2.5s infinite; animation-delay: 0s;}
.scr_hint .arrs .arr img{display: block; margin: 0 auto;}
.visualWrap.resize + .scr_hint{transform: translateX(-50%) scale(0.8);}
@keyframes arrowBlink{
    0%{opacity: 0.25;}
    20%{opacity: 1;}
    100%{opacity: 0;}
}
@keyframes arrowBlink1{
    0%{opacity: 1;}
    33%{opacity: 0;}
    33.1%{opacity: 0;}
    66%{opacity: 0;}
    66.1%{opacity: 0;}
    100%{opacity: 0;}
}
@keyframes arrowBlink2{
    0%{opacity: 0;}
    33%{opacity: 0;}
    33.1%{opacity: 1;}
    66%{opacity: 0;}
    66.1%{opacity: 0;}
    100%{opacity: 0;}
}
@keyframes arrowBlink3{
    0%{opacity: 0;}
    33%{opacity: 0;}
    33.1%{opacity: 0;}
    66%{opacity: 0;}
    66.1%{opacity: 1;}
    100%{opacity: 0;}
}


/* forTrigger */
.forTrigger{position: absolute; z-index: 99; top: 50px; left: 0; right: 0; height: 1px; background-color: pink;}


/* sec */
.sec{overflow: hidden !important;}


/* visual */
:root{
    --visualTransitionTime: 0.5s;
}
#visual{position: relative;;}
#visual .visualWrap{position: relative; height: 100vh; transition: height var(--visualTransitionTime) cubic-bezier(.2,0,.2,1), margin var(--visualTransitionTime) cubic-bezier(.2,0,.2,1);}
#visual .visualWrap.resize{height: 700px !important; margin-top: 90px;}

#visual .visualWrap .list{width: 100%; height: 100%;}

#visual .visualWrap .item{/* position: absolute; */ width: 100%; height: 100%;}
#visual .visualWrap .item .img{position: absolute; width: 100%; height: 100%;}
#visual .visualWrap .item .img img{width: 100%; height: 100%; object-fit: cover; object-position: center top;}

#visual .visualWrap .item .wrap{display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 0 0 0;}
#visual .visualWrap .item .con{display: flex; flex-wrap: wrap; gap: 74px; align-items: center; text-align: left; justify-content: center; transition: var(--visualTransitionTime) cubic-bezier(.2,0,.2,1);}
#visual .visualWrap.resize .item .con{transform: scale(0.8);}

#visual .visualWrap .item .con .txt{position: relative; padding: 42px 0 42px 0; font-size: 70px; font-weight: var(--fwsb); line-height: 1.36; letter-spacing: -0.05em; color: var(--white);}
#visual .visualWrap .item .con .txt:has(.num){padding-left: 420px;}
#visual .visualWrap .item .con .txt .num{position: absolute; left: 0; top: 0; font-size: 370px; font-weight: var(--fwr); letter-spacing: -0.1em; line-height: 0; text-indent: -0.03em;}
#visual .visualWrap .item .con .txt .num strong{display: inline-block; min-width: 289px; font-weight: inherit; letter-spacing: inherit; line-height: 0.74; text-align: right; opacity: 0; animation: just_opacity 2.0s forwards;}
#visual .visualWrap .item .con .txt .num em{position: absolute; top: 50%; left: 10%; transform: translate(-50%, 50%); font-family: 'Poppins'; font-style: italic; font-size: 0.081em; font-weight: var(--fwsb); letter-spacing: 1.13em; opacity: 0; animation: txt_minutes 0.4s forwards; animation-delay: 1.4s; color: #24ff92; line-height: 1;}
#visual .visualWrap .item .con .txt .op{display: inline-block; opacity: 0;}
#visual .visualWrap .item .con .txt .op1{animation: opacity 0.5s forwards; animation-delay: 0.7s;}
#visual .visualWrap .item .con .txt .op2{animation: opacity 0.5s forwards; animation-delay: 1.0s;}
#visual .visualWrap .item .con .txt > div{display: block; overflow: hidden;}
#visual .visualWrap .item .con .txt > div > span{display: block; transform-origin: 0 0; transform: translate3d(0,100%,0) skew(0, 30deg); opacity: 0;}

/* #visual .visualWrap .item.swiper-slide-active .con .txt > div{display: block;} */
#visual .visualWrap .item.swiper-slide-active .con .txt > div em{display: inline-block; transform-origin: top; transform: translateZ(-90deg); opacity: 0; animation: anime 0.25s forwards;}
#visual .visualWrap .item.swiper-slide-active .con .txt > div em:nth-child(1){animation-delay: 0.6s}
#visual .visualWrap .item.swiper-slide-active .con .txt > div em:nth-child(2){animation-delay: 0.65s}
#visual .visualWrap .item.swiper-slide-active .con .txt > div em:nth-child(3){animation-delay: 0.70s}
#visual .visualWrap .item.swiper-slide-active .con .txt > div em:nth-child(4){animation-delay: 0.75s}
#visual .visualWrap .item.swiper-slide-active .con .txt > div em:nth-child(5){animation-delay: 0.80s}
#visual .visualWrap .item.swiper-slide-active .con .txt > div em:nth-child(6){animation-delay: 0.85s}
#visual .visualWrap .item.swiper-slide-active .con .txt > div em:nth-child(7){animation-delay: 0.90s}
#visual .visualWrap .item.swiper-slide-active .con .txt > div em:nth-child(8){animation-delay: 0.95s}
#visual .visualWrap .item.swiper-slide-active .con .txt > div em:nth-child(9){animation-delay: 1.00s}
#visual .visualWrap .item.swiper-slide-active .con .txt > div em:nth-child(10){animation-delay: 1.05s}
#visual .visualWrap .item.swiper-slide-active .con .txt > div em:nth-child(11){animation-delay: 1.10s}
#visual .visualWrap .item.swiper-slide-active .con .txt > div em:nth-child(12){animation-delay: 1.15s}

#visual .visualWrap .item.swiper-slide-active .con .txt > div:nth-of-type(2) em:nth-child(1){animation-delay: 1.2s}
#visual .visualWrap .item.swiper-slide-active .con .txt > div:nth-of-type(2) em:nth-child(2){animation-delay: 1.25s}
#visual .visualWrap .item.swiper-slide-active .con .txt > div:nth-of-type(2) em:nth-child(3){animation-delay: 1.30s}
#visual .visualWrap .item.swiper-slide-active .con .txt > div:nth-of-type(2) em:nth-child(4){animation-delay: 1.35s}
#visual .visualWrap .item.swiper-slide-active .con .txt > div:nth-of-type(2) em:nth-child(5){animation-delay: 1.40s}
#visual .visualWrap .item.swiper-slide-active .con .txt > div:nth-of-type(2) em:nth-child(6){animation-delay: 1.45s}
#visual .visualWrap .item.swiper-slide-active .con .txt > div:nth-of-type(2) em:nth-child(7){animation-delay: 1.50s}
#visual .visualWrap .item.swiper-slide-active .con .txt > div:nth-of-type(2) em:nth-child(8){animation-delay: 1.55s}
#visual .visualWrap .item.swiper-slide-active .con .txt > div:nth-of-type(2) em:nth-child(9){animation-delay: 1.60s}
#visual .visualWrap .item.swiper-slide-active .con .txt > div:nth-of-type(2) em:nth-child(10){animation-delay: 1.65s}
#visual .visualWrap .item.swiper-slide-active .con .txt > div:nth-of-type(2) em:nth-child(11){animation-delay: 1.70s}
#visual .visualWrap .item.swiper-slide-active .con .txt > div:nth-of-type(2) em:nth-child(12){animation-delay: 1.75s}
#visual .visualWrap .item .btn_hex{position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); transition: 0.25s cubic-bezier(.2,0,.2,1);}
#visual .visualWrap .item .btn_hex:hover{background-image: url("/src/img/2024/contents/btn_anal.svg");}
#visual .visualWrap .item .btn_hex:hover span:after{animation: arr_move 0.5s ease; animation-delay: 0.25s;}
#visual .visualWrap.resize .item .btn_hex{transform: translateX(-50%) scale(0.8); bottom: 70px;}
@media (max-width: 1600px){
    #visual .visualWrap .item .con .txt{padding: 62px 0 62px 0; font-size: 60px;}
}
@media (max-width: 1280px){
    #visual .visualWrap.resize{margin-top: 0;}
    #visual .visualWrap .item .con .txt:has(.num){padding-left: 330px;}
    #visual .visualWrap .item .con .txt{font-size: 50px; padding: 48px 0 48px 0;}
    #visual .visualWrap .item .con .txt .num{font-size: 300px;}
    #visual .visualWrap .item .con .txt .num strong{min-width: 235px;}
}
@media (max-width: 960px){
    #visual .visualWrap .item .con .txt:has(.num){padding-left: 260px;}
    #visual .visualWrap .item .con .txt{font-size: 42px; padding: 31px 0 31px 0;}
    #visual .visualWrap .item .con .txt .num{font-size: 230px;}
    #visual .visualWrap .item .con .txt .num strong{min-width: 181px;}
}
@media (max-width: 800px){
    #visual .visualWrap .item .con{justify-content: initial;}
    #visual .visualWrap .item .con .txt{width: 100%; padding: 200px 0 0 !important; text-align: center;}
    #visual .visualWrap .item .con .txt .num{position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: block; text-indent: -0.1em;} 
    #visual .visualWrap .item .con .txt .num strong{min-width: auto;}
    #visual .visualWrap .item .con .txt .num em{left: 2%;}
}
@media (max-width: 640px){
    /* #visual .visualWrap{height: 70vh !important;} */
    #visual .visualWrap .item .con .txt{font-size: 30px; padding: 140px 0 15vh !important;}
    #visual .visualWrap .item .con .txt .num{font-size: 160px;}
    #visual .visualWrap .item .btn_hex{bottom: 80px;}
}


/* intro */
#intro{margin: 0 0 200px; padding: 200px 0 0;}
#intro > .introWrap{display: flex; width: calc(100% - ((100% - 1400px) / 2) ); margin: 0 0 0 calc((100% - 1400px) / 2);}
#intro .tit{flex: 0 0 auto; width: 368px;}

.combineSlider{position: relative; flex: 1; display: flex; background-color: var(--theme_blue); border-radius: 30px 0 0 30px; overflow: hidden;}
.combineSlider:before{content: ""; position: absolute; right: 27px; bottom: 0; display: inline-block; width: 243px; height: 320px; background: url("/src/img/2024/main/combineSlider_bg.svg") no-repeat; background-position: left center;}
.combineSlider .single_list{display: flex; flex-wrap: wrap; width: 100%; padding: 65px 0 71px 87px; color: var(--white); display: none !important;}
.combineSlider .single_list .slick-list{height: 100%; width: 426px; padding: 0 0 0 0; flex: 0 0 auto;}
.combineSlider .single_list .slick-track{height: 100%;}
.combineSlider .single_list .item{display: flex; flex-direction: column; flex-wrap: wrap; padding: 0 0 0 0; overflow: hidden; height: 334px;}
.combineSlider .single_list .item .top{}
.combineSlider .single_list .item .top .img{}
.combineSlider .single_list .item .top .img img{vertical-align: top;}
.combineSlider .single_list .item .top .title{font-size: 30px; font-weight: var(--fwsb); letter-spacing: -0.04em; line-height: 1.3; padding: 15px 0 0;}
.combineSlider .single_list .item .top .title span{position: relative;}
.combineSlider .single_list .item .top .title span:before{content: ""; position: absolute; bottom: 16px; left: calc(100% + 50px); display: inline-block; height: 1px; width: 500px; background-color: rgba(255,255,255,0.5);}
.combineSlider .single_list .item .mid{margin-top: auto;}
.combineSlider .single_list .item .mid .des{font-weight: var(--fwm); font-size: 18px; letter-spacing: -0.04em; line-height: 1.65; padding-right: 51px;}

.combineSlider .single_list .slide_nav{flex: 1; display: flex; flex-wrap: wrap; padding: 10px 0 0; display: none !important;}
.combineSlider .single_list .slide_nav > li{flex: 1; margin-right: 20px; max-width: 280px;}
.combineSlider .single_list .slide_nav > li.slick-active{display: none;}
.combineSlider .single_list .slide_nav > li button{width: 100%; display: flex; flex-direction: column; height: 100%; color: var(--white); border-radius: 20px; padding: 30px 30px 30px 30px; transition: box-shadow 0.1s ease-in-out; background: linear-gradient(180deg, #1F68D6 0%, #003C97 100%); transition: all 0.35s ease; box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.25);}
.combineSlider .single_list .slide_nav > li button .img{margin-left: auto; display: flex; justify-content: center; align-items: center; text-align: center; width: 60px; height: 60px; border-radius: 50%; background-color: var(--white); background-position: center; background-image: url("/src/img/2024/main/ico_multipleList_1.svg");}
.combineSlider .single_list .slide_nav > li button .img img{vertical-align: top;}
/* .combineSlider .single_list .slide_nav > li:nth-child(1) button .img{background-image: url("/src/img/2024/main/ico_multipleList_1.svg");} */
/* .combineSlider .single_list .slide_nav > li:nth-child(2) button .img{background-image: url("/src/img/2024/main/ico_multipleList_2.svg");} */
/* .combineSlider .single_list .slide_nav > li:nth-child(3) button .img{background-image: url("/src/img/2024/main/ico_multipleList_3.svg");} */
.combineSlider .single_list .slide_nav > li button .txt{margin-top: auto; width: 100%; text-align: left; font-size: 20px; font-weight: var(--fwsb); line-height: 1.45; letter-spacing: -0.04em;}
.combineSlider .single_list .slide_nav > li button .txt br{}

.combineSlider .miltiple_list{height: 470px; padding: 75px 15% 75px 213px; overflow: hidden;}
.combineSlider .miltiple_list .list{position: relative; box-sizing: border-box; height: 100%;}
.combineSlider .miltiple_list .list .slick-list{box-sizing: border-box; padding: 0 15% 0 0; height: 100%; overflow: visible;}
.combineSlider .miltiple_list .list .slick-list .slick-track{height: 100%;}
.combineSlider .miltiple_list .list .cardWrap{opacity: 0;}
.combineSlider .miltiple_list .list .cardWrap.swiper-slide-active,
.combineSlider .miltiple_list .list .cardWrap.swiper-slide-next,
.combineSlider .miltiple_list .list .cardWrap.swiper-slide-next + .cardWrap{opacity: 1;}
.combineSlider .miltiple_list .list .card{position: relative; display: flex; flex-direction: column; width: 310px; width: 100%; height: 320px; aspect-ratio: 280 / 320; color: var(--white); border-radius: 20px; padding: 30px 40px 36px 40px; transition: box-shadow 0.1s ease-in-out; transition: all 0.35s ease; overflow: hidden;}
.combineSlider .miltiple_list .list .card:before{content: ""; position: absolute; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; display: block; background: linear-gradient(180deg, #1F68D6 0%, #003C97 100%); transition: 1s;}
.combineSlider .miltiple_list .list .card.slick-current{}
.combineSlider .miltiple_list .list .card.slick-active{box-shadow: 0px 0px 30px rgba(0,0,0,0.25);}
.combineSlider .miltiple_list .list .card.slick-active:not(.slick-current) + .card{box-shadow: 0px 0px 30px rgba(0,0,0,0.25);}
.combineSlider .miltiple_list .list .card .img{margin-left: auto; display: flex; justify-content: center; align-items: center;  text-align: center; width: 70px; height: 70px; border-radius: 50%; background-color: var(--white);}
.combineSlider .miltiple_list .list .card .img img{vertical-align: top;}
.combineSlider .miltiple_list .list .card .img img.on{display: none;}
.combineSlider .miltiple_list .list .card .txt{margin-top: auto; font-size: 20px; font-weight: var(--fwsb); line-height: 1.45; transition: 0.3s 0.05s;}
.combineSlider .miltiple_list .list .card .sub{height: 0; overflow: hidden; opacity: 0; transition: opacity 0.3s 0.2s, height 0s;}

.combineSlider .miltiple_list .list .cardWrap.swiper-slide-active .card{width: calc(100% + 147px); aspect-ratio: initial; margin-left: -168px; margin-top: -40px; /* padding: 0; border-radius: 0; */ height: calc(100% + 80px);}
.combineSlider .miltiple_list .list .cardWrap.swiper-slide-active .card:before{opacity: 0;}
.combineSlider .miltiple_list .list .cardWrap.swiper-slide-active .card .img{margin-right: auto; margin-left: 0; background-color: transparent; width: auto; height: auto;}
.combineSlider .miltiple_list .list .cardWrap.swiper-slide-active .card .img img:not(.on){display: none;}
.combineSlider .miltiple_list .list .cardWrap.swiper-slide-active .card .img img.on{display: inline;}
.combineSlider .miltiple_list .list .cardWrap.swiper-slide-active .card .txt{font-size: 30px; line-height: 1.2; padding: 20px 0 0; margin: 0;}
.combineSlider .miltiple_list .list .cardWrap.swiper-slide-active .card .sub{width: auto; height: auto; opacity: 1; /* padding: 0 50px 0 0; */ margin-top: auto;}
@media (max-width: 1700px){
    .combineSlider .miltiple_list{padding: 75px 5% 75px 213px;}
}
@media (max-width: 1600px){
    .combineSlider .single_list{padding: 60px 0 60px 60px;}
    .combineSlider .single_list .slick-list{width: 340px;}
    .combineSlider .single_list .item .mid .des{padding-right: 40px;}
    .combineSlider .single_list .item .mid .des br{display: none;}

    .combineSlider .miltiple_list{padding: 75px 40px 75px 150px;}
    .combineSlider .miltiple_list .list .card{padding: 30px;}
    .combineSlider .miltiple_list .list .cardWrap.swiper-slide-active .card{margin-left: -120px; width: calc(100% + 120px);}
}
@media (max-width: 1500px){
    #intro > .introWrap{width: 100%; padding-left: 30px; margin: 0;}
    #intro .tit{width: 340px;}
}
@media (max-width: 1280px){
    #intro{margin: 150px 0 150px; padding: 0;}
    #intro .tit{width: 100%;}
    #intro .tit h3 br{display: none;}
    #intro > .introWrap{flex-direction: column; padding-left: 30px;}
    
    .combineSlider .single_list{padding: 50px 0 50px 50px;}
    .combineSlider .single_list .item{width: 330px;}
    .combineSlider .miltiple_list{padding: 50px 40px 50px 150px; /* height: auto; */ height: 450px;}
    .combineSlider .miltiple_list .list .cardWrap.swiper-slide-active .card{margin-left: -130px; margin-top: -20px; height: calc(100% + 40px);}
}
@media (max-width: 1024px){
    .combineSlider .single_list{padding: 40px 0 40px 40px;}
    .combineSlider .single_list .item .top .title{font-size: 24px;}
    .combineSlider .single_list .item .top .title span:before{left: calc(100% + 20px);}
    .combineSlider .single_list .item .mid .des{font-size: 16px;}

    .combineSlider .miltiple_list{padding: 40px 40px 40px 150px; height: auto;}
    .combineSlider .miltiple_list .list .card{padding: 30px 20px;}
    .combineSlider .miltiple_list .list .cardWrap.swiper-slide-active .card{width: calc(100% + 110px);}
    .combineSlider .miltiple_list .list .card .txt{font-size: 18px;}
}
@media (max-width: 960px){
    #intro > .introWrap{padding-right: 0;}
    .combineSlider{background-color: transparent; border-radius: 0; overflow: visible;}
    .combineSlider:before{display: none;}
    .combineSlider .miltiple_list{padding: 0 !important;}
    .combineSlider .miltiple_list .list .cardWrap{opacity: 1; width: 300px;}
    .combineSlider .miltiple_list .list .cardWrap .card{width: 100% !important; margin: 0 !important; aspect-ratio: initial !important; height: 100% !important; margin-left: 0; padding: 30px 20px !important; border-radius: 20px !important;}
    .combineSlider .miltiple_list .list .cardWrap .card:before{opacity: 1 !important;}
    .combineSlider .miltiple_list .list .cardWrap .card .img{margin-left: 0; margin-right: auto; width: auto; height: auto; background-color: transparent;}
    .combineSlider .miltiple_list .list .cardWrap .card .img img{width: 30px !important; height: auto !important;}
    .combineSlider .miltiple_list .list .cardWrap .card .img img:not(.on){display: none;}
    .combineSlider .miltiple_list .list .cardWrap .card .img img.on{display: inline;}
    .combineSlider .miltiple_list .list .cardWrap .card .txt{font-size: 20px !important; line-height: 1.2; padding: 20px 0 0; margin: 0;}
    .combineSlider .miltiple_list .list .cardWrap .card .txt br{}
    .combineSlider .miltiple_list .list .cardWrap .card .sub{width: auto; height: auto; opacity: 1; padding: 0 !important; margin: 20% 0 0 !important; font-size: 15px;}
    .combineSlider .miltiple_list .list .cardWrap .card .sub br{display: none;}

    
    .combineSlider .single_list{padding: 0; width: 100%; display: block;}
    .combineSlider .single_list .slick-list{width: calc(100% + 20px); padding: 0 45% 0 0; margin-left: -20px;}
    .combineSlider .single_list .item{background-color: var(--theme_blue); padding: 30px; border-radius: 20px; margin-left: 20px; transition: 0.2s;}
    .combineSlider .single_list .item .top .img img{width: 30px;}
    .combineSlider .single_list .item .top .title{font-size: 20px;}
    .combineSlider .single_list .item .top .title span:before{display: none;}
    .combineSlider .single_list .item .mid{margin-top: 0; padding: 20% 0 0;}
    .combineSlider .single_list .item .mid .des{font-size: 15px; padding: 0;}
}
@media (max-width: 640px){
    #intro{margin: 80px 0 80px;}
    #intro > .introWrap{padding-left: 15px;}

    .combineSlider .single_list .slick-list{padding: 0 25% 0 0;}
    .combineSlider .single_list .item{height: 330px;}
}
@media (max-width 500px){
    .combineSlider .miltiple_list .list .cardWrap{width: 260px;}
}


/* diag */
#diag{overflow: hidden; display: flex; flex-direction: column; gap: 300px;}
#diag .dbox{}
#diag .dbox > .wrap{display: flex; align-items: center; gap: 80px;}
#diag .txt{flex: 0 0 auto; width: 465px;}
#diag .mock{flex: 1;}
#diag .mock .box{position: relative; width: 100%; height: 100%; background-color: #f2f2f2; border-radius: 868px 0 0 868px; padding: 0 0 0 77px;}
#diag .mock .box:before{content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 50vw; background-color: #f2f2f2;}
#diag .mock .box .obje{position: relative;}
#diag .mock .box .obje img.fixedImg{}
#diag .mock .box .obje img.overlay{position: absolute; top: 0; left: 0; opacity: 0;}
#diag .mock .box .obje img.overlay.step0{opacity: 1;}

#diag .dbox:nth-child(1) .mock.step1 .box .obje img.overlay:not(.step1){opacity: 0;}
#diag .dbox:nth-child(1) .mock.step1 .box .obje img.overlay.step1{opacity: 1;}
#diag .dbox:nth-child(1) .mock.step2 .box .obje img.overlay:not(.step2){opacity: 0;}
#diag .dbox:nth-child(1) .mock.step2 .box .obje img.overlay.step2{opacity: 1;}
#diag .dbox:nth-child(1) .mock.step3 .box .obje img.overlay:not(.step3){opacity: 0;}
#diag .dbox:nth-child(1) .mock.step3 .box .obje img.overlay.step3{opacity: 1;}

#diag .mock .box .sub{position: absolute; top: 100%; margin-top: 20px; left: 50%; letter-spacing: -0.02em; font-family: 'Poppins'; font-weight: var(--fwsb); font-size: 35px; color: #f3f3f3; line-height: 0.9;}

#diag .dbox.even{}
#diag .dbox.even > .wrap{flex-direction: row-reverse;}
#diag .dbox.even .mock .box{border-radius: 0 868px 868px 0; padding: 0 77px 0 0;}
#diag .dbox.even .mock .box:before{left: auto; right: 100%;}
#diag .dbox.even .mock .box .sub{top: auto; bottom: 100%; left: auto; margin-top: 0; margin-bottom: 20px; right: 50%;}
@media (max-width: 1500px){
    #diag .mock .box .sub{left: 40%;}
}
@media (max-width: 1280px){
    #diag{gap: 25vw;}
    #diag .dbox > .wrap{gap: 40px;}
    #diag .txt{width: 33vw;}
    #diag .mock .box{padding: 0 0 0 4vw;}
    #diag .mock .box .sub{font-size: clamp(20px,2.4vw,26px); left: 30%;}

    #diag .dbox.even .mock .box{padding: 0 4vw 0 0;}
    #diag .dbox.even .mock .box .sub{right: 30%;}
}
@media (max-width: 1000px){
    #diag .dbox > .wrap{gap: 80px;}
    #diag .mock .box .sub{font-size: 22px}
}
@media (max-width: 800px){
    #diag{gap: 150px;}
    #diag .dbox > .wrap{flex-direction: column; align-items: initial;}
    #diag .mock{flex: initial; width: 87%; margin-left: auto;}
    #diag .mock .box .obje{}
    #diag .mock .box .obje img{}
    #diag .txt{width: 100%; text-align: center;}
    #diag .txt .btn_wrap{justify-content: center;}

    #diag .dbox.even > .wrap{flex-direction: column; padding-bottom: 60px;}
    #diag .dbox.even .mock{margin-left: 0; margin-right: auto;}
    #diag .dbox.even .mock .box .sub{top: 100%; bottom: auto; right: 30%; left: auto; margin-bottom: 0; margin-top: 20px;}
}
@media (max-width: 640px){
    #diag{gap: 30vw;}
    #diag .dbox > .wrap{gap: 40px;}
    #diag .mock .box .sub{font-size: 18px; margin-top: 12px;}

    #diag .dbox.even .mock .box .sub{margin-bottom: 12px;}
}


/* lounge */
#lounge{}
#lounge > .wrap{margin-top: 300px; margin-bottom: 300px; margin-bottom: 90px;}
#lounge > .wrap > .con + .con{margin-top: 200px;}
#lounge .con{display: flex; flex-wrap: wrap; align-items: center; align-items: flex-start; /* margin: 300px 0 0; */}
#lounge .con1{}
#lounge .con2{}
#lounge .con3{}
#lounge .con .titColor{width: 281px; padding: 70px 0 0;}
#lounge .con .descBoxWrap{position: relative; margin-left: auto; width: 980px; /* height: 400px; */ /* aspect-ratio: 980 / 400; */ /* box-shadow: 0px 0px 20px rgba(0,0,0,0.4); */ /* overflow: hidden; */ border-radius: 20px;}
#lounge .con .descBoxWrap .descBox{width: 100%; height: 100%;}
#lounge .con .descBoxWrap .descBox:nth-child(2){/* transform: translateY(0%); transform: translateY(30px); */}
#lounge .con .descBoxWrap .descBox + .descBox{margin-top: 30px;}
@media (max-width: 1400px){
    #lounge > .wrap{margin-top: 20vw; margin-bottom: 20vw;}
    #lounge .con{margin: 20vw 0 0; margin: 0;}
    #lounge .con .titColor{width: 370px; max-width: 100%; padding-right: 60px;}
    #lounge .con .descBoxWrap{width: auto; flex: 1;}
}
@media (max-width: 1280px){
    #lounge .con{flex-direction: column; gap: 60px;}
    #lounge .con .titColor{padding: 0; margin: 0 auto; width: 100%;}
    #lounge .con .descBoxWrap{width: 100%; max-width: 900px; margin: 0 auto;}
    #lounge .con .descBoxWrap .descBox{height: auto;}
}
@media (max-width: 800px){
    #lounge .con .descBoxWrap{width: 100%; height: auto; max-width: none; flex: initial; aspect-ratio: initial; box-shadow: none; overflow: initial; display: flex; flex-direction: column; gap: 40px;}
    #lounge .con .descBoxWrap .descBox{width: 100%; height: auto; background-color: var(--theme_navy); padding: 30px;}
    #lounge .con .descBoxWrap .descBox + .descBox{margin-top: 0;}
}
@media (max-width: 640px){
    #lounge > .wrap{margin-top: 120px; margin-bottom: 120px;}
    #lounge .con{margin: 0; gap: 40px;}
    #lounge > .wrap > .con + .con{margin-top: 120px;}
}







/* css animaitons */
@keyframes anime{
    0%{transform: rotateX(90deg); opacity: 0;}
    100%{transform: rotateX(0deg); opacity: 1;}
}
@keyframes arr_move{
    0%{transform: translateX(0px);}
    50%{transform: translateX(3px);}
    100%{transform: translateX(0px);}
}
@keyframes txt_minutes{
    0%{opacity: 0; transform: translateY(30%);}
    100%{opacity: 1; transform: translateY(-50%);}
}
@keyframes opacity{
    0%{opacity: 0; transform: translateY(10%);}
    100%{opacity: 1; transform: translateY(0%);}
}
@keyframes just_opacity{
    0%{opacity: 0;}
    50%{opacity: 1.0;}
    65%{opacity: 1.0;}
    100%{opacity: 0.3;}
}
@keyframes text_jump{
    0%{transform: translateY(0px);}
    50%{transform: translateY(-5px);}
    100%{transform: translateY(0px);}
}