.visual .bg{background-image: url(../img/sub01/visual-bg.png);}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    
}
@media all and (max-width:768px){
    
}
@media all and (max-width:500px){
    
}

.sec01{padding: 12vw 0; background: linear-gradient(90deg,#014142 0%, #025051 100%); color: #fff;}
.sec01 .inner{display: flex; align-items: flex-start; justify-content: space-between; gap: 5rem;}
.sec01 .left{}
.sec01 .left h2{font-size: 6rem; font-weight: 700; width: fit-content;}
.sec01 .left h2 b{color: #fec93b;}
.sec01 .right{flex: 1; max-width: 820px;}
.sec01 .right h3{font-size: 2.5rem;}


@media all and (max-width:1024px){
    .sec01{padding: 80px 0;}
    .sec01 .left h2{font-size: 35px;}
    .sec01 .right h3{font-size: 18px;}
}
@media all and (max-width:768px){
    .sec01 .inner{flex-direction: column; gap: 20px;}
    .sec01 .left h2{font-size: 30px;}
    .sec01 .right h3{font-size: 16px;}
}
@media all and (max-width:500px){
    .sec01 .left h2{font-size: 24px;}
}


.sec02{padding: 13vw 0 18vw;}
.sec02 .inner{display: flex; align-items: flex-start; justify-content: space-between; gap: 3rem;}
.sec02 .txtbox{}
.sec02 .txtbox h2{color: #0a6566; font-size: 6rem; font-weight: 700; margin-bottom: 4rem;}
.sec02 .txtbox h3{line-height: 1.7; font-size: 2.3rem; width: max-content; margin-bottom: 10rem;}
.sec02 .txtbox ul{display: flex; flex-direction: column; gap: 3rem; }
.sec02 .txtbox ul li{display: flex; align-items: center; gap: 4rem; padding-bottom: 2rem; border-bottom: 1px solid #726b68; cursor: pointer;}
.sec02 .txtbox ul li.on{border-bottom: 2px solid #0a6566; color: #0a6566;}
.sec02 .txtbox ul li span{font-family: 'GmarketSansMedium'; font-size: 2.3rem; padding-top: 5px;}
.sec02 .txtbox ul li.on span{font-family: 'GmarketSansBold';}
.sec02 .txtbox ul li p{font-size: 2.8rem;}
.sec02 .imgbox{max-width: 820px;}
.sec02 .imgbox ul{}
.sec02 .imgbox ul li{border-radius: 5rem; overflow: hidden; aspect-ratio: 4/3.8; display: none;}
.sec02 .imgbox ul li.on{display: block;}
.sec02 .imgbox ul li img{width: 100%; height: 100%; object-fit: cover;}
.sec02 .imgbox ul li:nth-child(1) img{object-position: left;}


@media all and (max-width:1024px){
    .sec02{padding: 80px 0;}
    .sec02 .txtbox h2{font-size: 35px; margin-bottom: 20px;}
    .sec02 .txtbox h3{font-size: 16px; margin-bottom: 40px;}
    .sec02 .txtbox ul{gap: 10px;}
    .sec02 .txtbox ul li{gap: 20px;}
    .sec02 .txtbox ul li span{font-size: 16px;}
    .sec02 .txtbox ul li p{font-size: 18px;}
}
@media all and (max-width:768px){
    .sec02 .inner{flex-direction: column;}
    .sec02 .txtbox{width: 100%;}
    .sec02 .txtbox h2{font-size: 30px; margin-bottom: 10px;}
    .sec02 .txtbox h3{margin-bottom: 20px; width: auto; font-size: 15px;}
    .sec02 .txtbox ul li{padding-bottom: 10px;}
    .sec02 .imgbox{max-width: 500px;}
}
@media all and (max-width:500px){
    .sec02 .txtbox h2{font-size: 24px;}
}

.sec03{padding-bottom: 16vw;}
.sec03 .inner{max-width: 1200px;}
.sec03 .title{text-align: center;}
.sec03 .title h2{color: #0a6566; font-size: 6rem; font-weight: 700; margin-bottom: 3rem;}
.sec03 .title h3{line-height: 1.7; font-size: 2.3rem; margin-bottom: 10rem;}

.sec03 .tab-wrap{display: flex; gap: 5rem;}
.sec03 .tab-list{display: flex; flex-direction: column; gap: 10px;}
.sec03 .tab-list li{background: #eeeeee; color: #0a6566; position: relative; display: flex; align-items: center; height: 14rem; padding: 0 3rem; gap: 3rem; cursor: pointer;}
.sec03 .tab-list li.on{background: #0a6566; color: #fff;}
.sec03 .tab-list li.on::after{content: ''; position: absolute; right: 0; top: 50%; width: 0; height: 0; border: 20px solid transparent; border-left-color: #0a6566; border-right: 0; margin-top: -20px; margin-right: -20px;}
.sec03 .tab-list li span{font-family: 'GmarketSansMedium'; font-size: 3rem;}
.sec03 .tab-list li .line{width: 1px; height: 8rem; background: #0a6566;}
.sec03 .tab-list li.on .line{background: #fff;}
.sec03 .tab-list li p{font-size: 2.7rem; font-weight: 700;}

.sec03 .md-line{width: 1px; background: #0a6566;}
.sec03 .tab-cont{flex: 1;}
.sec03 .tab-cont li{display: none;}
.sec03 .tab-cont li.on{display: block;}
.sec03 .tab-cont li h2{font-size: 4.3rem; font-weight: 700; color: #0a6566;}
.sec03 .tab-cont li h3{font-size: 2.1rem; margin: 2rem 0 3rem;}
.sec03 .tab-cont li .imgbox{max-width: 350px; width: 35rem; margin-bottom: 5rem;}
.sec03 .tab-cont li .imgbox img{}
.sec03 .tab-cont li .txtbox{display: flex; flex-direction: column; gap: 3rem;}
.sec03 .tab-cont li .txtbox .item{}
.sec03 .tab-cont li .txtbox .item h5{color: #0a6566; font-size: 2.5rem; font-weight: 700; padding-bottom: 1rem;}
.sec03 .tab-cont li .txtbox .item p{font-size: 2.1rem; padding-left: 2.8rem;}
@media all and (max-width:1024px){
    .sec03{padding-bottom: 80px;}
    .sec03 .title h2{font-size: 35px; margin-bottom: 20px;}
    .sec03 .title h3{font-size: 16px; margin-bottom: 40px;}

    .sec03 .tab-wrap{flex-direction: column; gap: 20px;}
    .sec03 .tab-list{flex-direction: row; overflow-x: auto; gap: 10px; padding-bottom: 10px; -webkit-overflow-scrolling: touch;}
    .sec03 .tab-list li{flex: 0 0 auto; height: auto; padding: 12px 20px; border-radius: 999px; gap: 10px; white-space: nowrap;}
    .sec03 .tab-list li.on::after{display: none;}
    .sec03 .tab-list li .line{display: none;}
    .sec03 .tab-list li span{font-size: 20px;}
    .sec03 .tab-list li p{font-size: 18px;}
    .sec03 .md-line{display: none;}
    .sec03 .tab-cont{width: 100%;}
    .sec03 .tab-cont li h2{font-size: 26px;}
    .sec03 .tab-cont li h3{font-size: 16px; margin: 10px 0 20px;}
    .sec03 .tab-cont li .imgbox{width: 100%;}
    .sec03 .tab-cont li .txtbox{gap: 15px;}
    .sec03 .tab-cont li .txtbox .item h5{font-size: 18px;}
    .sec03 .tab-cont li .txtbox .item p{font-size: 16px; padding-left: 20px;}
}
@media all and (max-width:768px){
    .sec03 .title h2{font-size: 30px; margin-bottom: 10px;}
    .sec03 .title h3{margin-bottom: 20px;}

    .sec03 .tab-list li{padding: 10px 16px;}
    .sec03 .tab-list li span{font-size: 18px;}
    .sec03 .tab-list li p{font-size: 16px;}
    .sec03 .tab-cont li h2{font-size: 24px;}
    .sec03 .tab-cont li .txtbox .item h5{font-size: 16px;}
    .sec03 .tab-cont li .txtbox .item p{font-size: 14px;}
}
@media all and (max-width:500px){
    .sec03 .title h2{font-size: 23px;}
    .sec03 .tab-cont li h2,
    .sec03 .tab-cont li h3{text-align: center;}
    
}

.sec04{padding: 14vw 0; background: linear-gradient(90deg,#086162 0%, #025051 100%); color: #fff;}
.sec04 .inner{max-width: 1300px; display: flex; align-items: flex-start; justify-content: space-between; gap: 30px;}
.sec04 .left{}
.sec04 .left h2{font-size: 7rem; font-weight: 700; margin-bottom: 7rem; width: max-content;}
.sec04 .left h2 b{color: #fec93b;}
.sec04 .left h3{font-size: 2.5rem;}
.sec04 .right{display: flex; flex-direction: column; gap: 3rem;}
.sec04 .right .box{padding: 4rem; border-radius: 1.8rem; background: #0c7677; cursor: pointer;}
.sec04 .right .box .top{margin-bottom: 2rem; display: flex; justify-content: space-between;}
.sec04 .right .box .top h3{font-size: 3.5rem; font-weight: 700;}
.sec04 .right .box .top h4{font-size: 2.5rem; font-weight: 700;}
.sec04 .right p{font-size: 2.2rem;}
@media all and (max-width:1024px){
    .sec04{padding: 80px 0;}
    .sec04 .left h2{font-size: 40px; margin-bottom: 20px;}
    .sec04 .left h3{font-size: 18px;}
    .sec04 .right .box .top h3{font-size: 24px;}
    .sec04 .right .box .top h4{font-size: 18px;}
    .sec04 .right p{font-size: 16px;}
}
@media all and (max-width:768px){
    .sec04 .inner{flex-direction: column; }
    .sec04 .left h2{font-size: 30px;}
    .sec04 .left h3{font-size: 16px;}
    .sec04 .right{width: 100%;}
    .sec04 .right .box{padding: 20px; width: 100%; max-width: 500px;}
    .sec04 .right .box .top h3{font-size: 20px;}
    .sec04 .right .box .top h4{font-size: 16px;}
}
@media all and (max-width:500px){
    .sec04 .left h2{font-size: 24px;}
}


.sec05{padding-top: 16vw;}

@media all and (max-width:1024px){
    .sec05{padding-top: 80px;}
}
@media all and (max-width:768px){
    
}
@media all and (max-width:500px){
    
}