.sub-visual{color: #000; background-image: url(../img/sub01/visual.png);}

@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    
}
@media all and (max-width:768px){
    
}
.sec01{padding-top: 14rem;}
.sec01 > .inner{padding: 0 5vw; display: flex; justify-content: space-between;}
.sec01 .title{padding: 9rem 0 21rem;}
.sec01 .title h6{color: #3761db; font-size: 2.8rem; font-weight: 300; padding-bottom: 2rem;}
.sec01 .title h2{}
.sec01 .btm-txt{max-width: 1740px; position: relative; width: 100%; margin-left: auto; color: #fff;}
.sec01 .btm-txt .inner{padding: 0 5vw; margin: 0;}
.sec01 .btm-txt::after{content: ""; width: 100%; height: 100%; background-color: #3761db; top: 0; left: 0; mix-blend-mode: multiply; position: absolute; z-index: -1;}
.sec01 .btm-txt ul{padding: 4vw 0 5vw; display: flex; justify-content: space-between; gap: 2rem; margin: 0; flex-wrap: wrap;}
.sec01 .btm-txt ul li{flex: 1; max-width: 400px; border-top: 1px solid #fff;}
.sec01 .btm-txt ul li h4{padding: 3rem 0 2rem; font-weight: 700; font-size: 3.2rem; letter-spacing: -2.5px;}
.sec01 .btm-txt ul li p{line-height: 1.8; letter-spacing: -2px;}
.sec01 .imgbox{z-index: -1; position: absolute; right: 5vw; bottom: 0; width: 60rem;}
.sec01 .imgbox img{width: 100%;}
@media all and (max-width:1400px){
    .sec01 .btm-txt ul li h4{font-size: 28px;}
}
@media all and (max-width:1200px){
    .sec01 > .inner,
    .sec01 .btm-txt .inner{padding: 0 20px;}
    .sec01 .btm-txt ul li h4{font-size: 24px;}
}
@media all and (max-width:1024px){
    .sec01{padding-top: 80px;}
    .sec01 .btm-txt ul{gap: 30px 20px; padding: 30px 0;}
    .sec01 .btm-txt ul li{flex: none; width: 100%; max-width: none;}
    .sec01 .btm-txt ul li h4{font-size: 20px; letter-spacing: -1px; padding: 15px 0 10px;}
    .sec01 .btm-txt ul li p{letter-spacing: -1px;}
    .sec01 .imgbox{bottom: 100%; width: 250px;}
}
@media all and (max-width:768px){
    .sec01 .imgbox{width: 35%;}
}
@media all and (max-width:500px){
    
}
.sec02{padding-top: 26rem;}
.sec02 .inner{max-width: 1420px; display: flex; padding-bottom: 27rem; align-items: flex-start; padding-left: 60px;}
.sec02 .left{}
.sec02 .left .imgbox{padding-right: 8rem; position: relative;}
.sec02 .left .imgbox::after{content: ""; position: absolute; width: 100%; height: 90%; background-color: #f0f0f0; left: 0; bottom: 0; z-index: -1;}
.sec02 .left .imgbox img{margin-left: -5rem; }
.sec02 .left p{font-weight: 500; font-size: 3rem; padding-top: 3rem; width: 100%;}
.sec02 h2{position: relative; left: -7rem; padding-top: 15rem;}
.sec02 .txtcont{position: absolute; right: 0; display: flex; bottom: 0; line-height: 1.8; padding-top: 5rem; border-top: 1px solid #000; gap: 5vw; width: 50%; padding-right: 20px;}
.sec02 .txtcont p{}
.sec02 .txtcont p b{font-weight: 700;}
@media all and (max-width:1300px){
    .sec02 .inner{padding: 0 20px; padding-bottom: 50px;}
    .sec02 .left {width: 30%;}
    .sec02 .left .imgbox{padding-right: 0; padding: 0 20px;}
    .sec02 .left .imgbox img{margin-left: 0;}
    .sec02 h2{font-size: 3.5vw; left: auto; margin-left: 30px;}
    .sec02 .txtcont{position: relative; padding-top: 30px; width: 100%; width: calc(100% - 40px); margin: 0 auto;}
    .sec02 .txtcont p{flex: 1;}

}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sec02{padding-top: 80px;}
    .sec02 h2{font-size: 28px;}
}
@media all and (max-width:768px){
    .sec02 .inner{flex-direction: column-reverse; padding-bottom: 30px;}
    .sec02 .left{width: 100%; max-width: 500px;}
    .sec02 .left .imgbox{width: 100%;}
    .sec02 h2{font-size: 24px; width: 100%; margin: 0; margin-bottom: 30px; padding-top: 0;}
    .sec02 .txtcont{flex-wrap: wrap;}
    .sec02 .txtcont p{width: 100%; flex: none;}
}
@media all and (max-width:500px){
    
}

.sec03{padding-top: 27rem; padding-bottom: 40px;}
.sec03 .inner{}
.sec03 h2{padding-bottom: 9rem;}
.sec03 ul{display: flex; flex-wrap: wrap; gap: 4.2vw 2rem; justify-content: space-between;}
.sec03 ul li{width: calc((100% - 6rem) / 3); position: relative; max-width: 485px;}
.sec03 ul li img{width: 100%;}
.sec03 ul li p{font-size: 1.9rem; font-weight: 700; position: absolute; width: 90%; max-width: 380px; min-height: 4.2vw;display: flex; align-items: center; bottom: -2vw; background-color: #fff; padding: 10px 0;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sec03{padding-top: 80px;}
    .sec03 h2{padding-bottom: 40px;}
    .sec03 ul{gap: 20px 2rem;}
    .sec03 ul li p{position: relative; width: 100%; height: auto; padding-top: 10px; bottom: auto;}
}
@media all and (max-width:768px){
    .sec03 ul{gap:20px;}
    .sec03 ul li{width: calc((100% - 20px) / 2);}
    .sec03 ul li p{font-size: 16px;}
}
@media all and (max-width: 500px){
    .sec03 ul li p{font-size: 14px;}
}

.sec04{text-align: center; padding-top: 29rem;}
.sec04 h2{padding-bottom: 12rem;}
.sec04 .sw-sec04{position: relative;}
.sec04 .sw-sec04 ul{padding-bottom: 5rem;}
.sec04 .sw-sec04 ul li{transform: scale(.8); font-size: 0;}
.sec04 .sw-sec04 ul li.swiper-slide-active{transform: scale(1);}
.sec04 .sw-sec04 .swiper-pagination{position: relative; display: flex; justify-content: center; gap: 8px; align-items: center;}
.sec04 .sw-sec04 .swiper-pagination-clickable .swiper-pagination-bullet{margin: 0;}
.sec04 .sw-sec04 .swiper-pagination-bullet-active{width: 12px; height: 12px; background-color: #1e437c;}
.sec04 .sw-sec04 .sw-btn{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: space-between; width: 100%; z-index: 10; padding-bottom: 5rem; width: 57%; }
.sec04 .sw-sec04 .sw-btn > div{width: 2.5rem;}
.sec04 .sw-sec04 .sw-btn > div img{width: 100%;}


@media all and (max-width:1024px){
    .sec04{padding-top: 80px;}
    .sec04 h2{padding-bottom: 40px;}
}
@media all and (max-width:768px){
    .sec04 .sw-sec04 .sw-btn{width: 76%;}
    .sec04 .sw-sec04 .sw-btn > div{width: 15px;}
}
@media all and (max-width: 500px){
    .sec04 .sw-sec04 .sw-btn{width: 78%;}
}