.visual{background-image: url(../img/sub01/visual.png);}
.visual .inner{gap: 30px;}
.visual h3{line-height: 1.7;}

@media all and (max-width:1290px){
    .visual .inner{flex-direction: column;}
}
@media all and (max-width:1024px){
    
}
@media all and (max-width:768px){
    .visual .inner{gap: 20px;}
}
@media all and (max-width:500px){
    .visual{background-image: url(../img/sub01/visual-mo.png); height: auto; padding: 100px 0;}
}


.sec01{padding: 15rem 0 20rem;}
.sec01 .inner{display: flex; position: initial; justify-content: space-between; gap: 3vw;}
.sec01 .imgbox{position: relative; font-size: 0; width: 39rem;}
.sec01 .imgbox img{width: 100%;}
.sec01 .txtbox{width: calc(100% - 39rem - 3vw); display: flex; flex-wrap: wrap; margin-top: 6rem; gap: 7rem 5rem; justify-content: space-between;}
.sec01 .txtbox h2{width: 100%;}
.sec01 .txtbox p{line-height: 2.2; font-size: 1.8rem; }
.sec01 .txtbox p b{font-weight: 700; font-size: 1.6rem; padding-bottom: 10px; display: inline-block; color: #09474e;}

@media all and (max-width:1024px){
    .sec01{padding: 80px 0;}
}
@media all and (max-width:768px){
    .sec01 .inner{flex-wrap: wrap;}
    .sec01 .imgbox{width: 100%;}
    .sec01 .txtbox{width: 100%; margin-top: 0; gap: 30px;}
    .sec01 .txtbox p{font-size: 16px; }
    .sec01 .txtbox p b{font-size: 14px; padding-bottom: 10px;}
}
@media all and (max-width:500px){
    .sec01 .txtbox{gap: 20px;}
    .sec01 .txtbox h2{margin-bottom: 0;}
    .sec01 .txtbox p{width: 100%;}
}


.sec02{padding: 20rem 0 18rem; background: linear-gradient(90deg,#0f859c 0%, #0a7084 100%);}
.sec02 .inner{max-width: 1360px;}
.sec02 h2{text-align: center; padding-bottom: 5rem; color: #fff;}
.sec02 ul{display: flex; gap: 2rem; justify-content: space-between;}
.sec02 ul li{flex: 1; max-width: 415px; padding: 3.6vw 3.2vw; background: #fff;}
.sec02 ul li h4{font-family: 'GmarketSansMedium'; font-size: 3.8rem; color: #00b79b;}
.sec02 ul li h5{font-size: 3.5rem; color: #005059; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid #005059; font-family: 'chungbuk-Bold';}
.sec02 ul li p{font-size: 2.5rem;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sec02{padding: 80px 0;}
    .sec02 ul li{padding: 30px;}
    .sec02 ul li h4{font-size: 22px;}
    .sec02 ul li h5{font-size: 22px;}
    .sec02 ul li p{font-size: 18px;}
}
@media all and (max-width:768px){
    .sec02 ul{flex-wrap: wrap; gap: 20px;}
    .sec02 ul li{flex: none; width: calc((100% - 20px) / 2); padding: 20px;}
    .sec02 ul li h4{font-size: 20px;}
    .sec02 ul li h5{font-size: 20px;}
    .sec02 ul li p{font-size: 16px;}
}
@media all and (max-width:500px){
    .sec02 ul li{width: 100%;}
}

.sec03{padding-top: 24rem;}
.sec03 .inner{max-width: 1420px;}
.sec03 h2{text-align: center; padding-bottom: 7rem;}
.sec03 ul{display: flex; flex-wrap: wrap; gap: 12rem 1.8rem;}
.sec03 ul li{width: calc((100% - 3.6rem) / 3);}
.sec03 ul li h3{background: #0f859c; color: #fff; font-size: 2.7rem; font-weight: 500; padding: 0.7rem 1rem;}
.sec03 ul li .imgbox{}
.sec03 ul li .imgbox img{}
.sec03 ul li p{padding-top: 1.5rem; border-top: 1px solid #888888; font-weight: 300; font-size: 2.2rem;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sec02{padding: 80px 0;}
    .sec03 ul li h3{font-size: 20px;}
    .sec03 ul li p{font-size: 16px;}
}
@media all and (max-width:768px){
    .sec03 ul li{width: calc((100% - 1.8rem) / 2);}
    .sec03 ul li h3{text-align: center; font-size: 18px;}
    .sec03 ul li p{font-size: 16px;}
}
@media all and (max-width:500px){
    .sec03 ul li{width: 100%;}
}