.sub-visual{background-image: url(../img/sub03/visual.png);}
.sub-section .inner{max-width: 1400px;}

.sec01{padding: 20rem 0;}
.sec01 .inner{display: flex; align-items: center; justify-content: space-between; gap: 2rem;}
.sec01 .txtbox{}
.sec01 .txtbox h2{}
.sec01 .txtbox h3{font-weight: 300;}
.sec01 .imgbox{width: 50%; font-size: 0; max-width: 500px;}
.sec01 .imgbox img{width: 100%;}

@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sec01{padding: 80px 0;}
}
@media all and (max-width:768px){
    .sec01 .inner{flex-wrap: wrap;}
    .sec01 .txtbox,
    .sec01 .imgbox{width: 100%;}
}

.sec02{padding: 20rem 0; text-align: center; color: #fff; background-color: #3761db;}
.sec02 h2{}
.sec02 ul{display: flex; justify-content: center; gap: 5rem; padding: 8rem 0;}
.sec02 ul li{position: relative;  color: #3761db; background-color: #fff; border-radius: 1000px; flex: 1; display: flex; align-items: center; justify-content: center; max-width: 300px;}
.sec02 ul li::after{content: ""; padding-bottom: 100%; display: block;}
.sec02 ul li p{font-weight: 700; font-size: 4.8rem; position: absolute;}
.sec02 h3{font-size: 3rem;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sec02{padding: 80px 0;}
    .sec02 ul{padding: 30px 0; gap: 20px;}
    .sec02 h3{font-size: 20px;}
}
@media all and (max-width:768px){
    .sec02 h3{font-size: 16px;}
    .sec02 ul li p{font-size: 30px;}
}
@media all and (max-width:500px){
    .sec02 ul li p{font-size: 20px;}
}

.sec03{padding: 30rem 0 35rem; text-align: center;}
.sec03 .inner{}
.sec03 h2{padding-bottom: 8rem;}
.sec03 ul{display: flex; gap: 5rem; justify-content: center; flex-wrap: wrap;}
.sec03 ul li{flex: 1; background: #d7dff8; }
.sec03 ul li .top{background: #3761db; color: #fff; padding: 7rem 2rem;}
.sec03 ul li .top > *{max-width: 490px; margin: 0 auto;}
.sec03 ul li .top h3{font-size: 5rem; font-family: 'GmarketSansLight';}
.sec03 ul li .top h4{font-weight: 700; font-size: 3.5rem; padding-bottom: 3rem; border-bottom: 1px solid #fff; margin-bottom: 2rem;}
.sec03 ul li .top h5{font-size: 3rem;}
.sec03 ul li .btm{background: #d7dff8; padding: 8rem 2rem 10rem;}
.sec03 ul li .btm h6{color: #3761db; font-size: 3rem; font-weight: 700; padding-bottom: 4rem;}
.sec03 ul li .btm p{}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sec03{padding: 80px 0;}
    .sec03 h2{padding-bottom: 40px;}
    .sec03 ul{gap: 20px;}
    .sec03 ul li .top{padding: 40px 20px;}
    .sec03 ul li .top h3{font-size: 30px;}
    .sec03 ul li .top h4{font-size: 26px;}
    .sec03 ul li .top h5{font-size: 20px;}
    .sec03 ul li .btm{padding: 40px 20px;}
    .sec03 ul li .btm h6{font-size: 20px; padding-bottom: 20px;}
    .sec03 ul li .btm p{}
}
@media all and (max-width:768px){
    .sec03 ul{}
    .sec03 ul li{flex: auto; width: 100%; }
    .sec03 ul li .top h3{font-size: 30px;}
    .sec03 ul li .top h4{font-size: 20px;}
    .sec03 ul li .top h5{font-size: 18px;}
    .sec03 ul li .btm h6{font-size: 18px;}
}

.sec04{background: #3761db; color: #fff; padding: 28rem 0;}
.sec04 .inner{display: flex; flex-direction: column; gap: 8rem;}
.sec04 .cont{display: flex; align-items: center; justify-content: space-between; gap: 2rem;}
.sec04 .cont .imgbox{font-size: 0; flex: 1;}
.sec04 .cont .imgbox img{}
.sec04 .cont .txtbox{width: 52rem;}
.sec04 .cont .txtbox h3{font-family: 'GmarketSansLight'; font-size: 3.5rem; padding-bottom: 4rem; }
.sec04 .cont .txtbox p{font-size: 2.6rem; letter-spacing: -2px;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sec04{padding: 80px 0;}
    .sec04 .inner{gap: 40px;}
    .sec04 .cont .txtbox h3{padding-bottom: 10px; font-size: 24px;}
}
@media all and (max-width:768px){
    .sec04 .cont{flex-wrap: wrap;}
    .sec04 .cont .imgbox,
    .sec04 .cont .txtbox{flex: auto; width: 100%;}
    .sec04 .cont .txtbox p{font-size: 18px; letter-spacing: -1px;}
}

.sec05{padding: 28rem 0 30rem;}
.sec05 h2{text-align: center; padding-bottom: 8rem;}
.sec05 ul{display: flex; flex-direction: column; gap: 2.8rem;}
.sec05 ul li{background: #d7dff8; padding: 2rem; display: flex; justify-content: center; min-height: 13rem; align-items: center;}
.sec05 ul li .txt{display: flex; gap: 4rem; width: 100%; max-width: 840px; align-items: center;}
.sec05 ul li .txt .icon{width: 3.8rem;}
.sec05 ul li .txt .icon img{width: 100%;}
.sec05 ul li .txt p{font-size: 3rem;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sec05{padding: 80px 0;}
    .sec05 h2{padding-bottom: 40px;}
    .sec05 ul li{min-height: auto;}
    .sec05 ul li .txt p{font-size: 20px;}
}
@media all and (max-width:768px){
    .sec05 ul li .txt .icon{width: 20px;}
    .sec05 ul li .txt{gap: 10px;}
    .sec05 ul li .txt p{font-size: 16px;}
}

.sec06{padding: 20rem 0 24rem; text-align: center; color: #fff; background: #3761db;}
.sec06 .inner{}
.sec06 h2{}
.sec06 h3{padding: 3rem 0 8rem;}
.sec06 ul{display: flex; gap: 2rem;}
.sec06 ul li{display: flex; align-items: center; justify-content: center; background: #fff; width: calc((100% - 6rem) / 4); padding: 10px;}
.sec06 ul li::after{content: ""; padding-bottom: 80%; display: block;}
.sec06 ul li p{color: #3761db; position: absolute; font-weight: 700; font-size: 3rem;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sec06{padding: 80px 0;}
    .sec06 h3{padding: 20px 0 30px;}
    .sec06 ul li p{font-size: 20px;}
}
@media all and (max-width:768px){
    .sec06 ul{flex-wrap: wrap;}
    .sec06 ul li{width: calc((100% - 2rem) / 2);}
    .sec06 ul li p{font-size: 16px;}
}