.sub04 .sub-visual{background-image: url(../img/sub04/sub04-visual.png);}
.sub04 .sub-section h2{font-family: 'GmarketSansMedium'; font-size: 6rem; color: #00697c; text-align: center;}
.sub04 .sub-section h3{padding: 3.5rem 0 7rem; text-align: center; line-height: 1.5;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sub04 .sub-section h2{font-size: 28px;}
    .sub04 .sub-section h3{font-size: 18px; padding: 20px 0 30px;}
}
@media all and (max-width:768px){
    .sub04 .sub-section h2{font-size: 24px;}
    .sub04 .sub-section h3{font-size: 16px;}
}

.sub04 .sec01{padding: 20rem 0 17rem; background-color: #00697c;}
.sub04 .sec01 .inner{}
.sub04 .sec01 h2{color: #fff; text-align: left;}
.sub04 .sec01 ul{color: #fff; display: flex; gap: 3rem;}
.sub04 .sec01 ul li{padding-top: 5.5rem; margin-top: 6rem; width: calc((100% - 6rem) / 3); border-top: 1px solid #fff; font-size: 3.5rem;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sub04 .sec01{padding: 60px 0;}
    .sub04 .sec01 ul li{padding-top: 20px; margin-top: 30px; font-size: 24px;}
}
@media all and (max-width:768px){
    .sub04 .sec01 ul{flex-wrap: wrap; gap: 0;}
    .sub04 .sec01 ul li{width: 100%; font-size: 20px;}
}
.sub04 .sec02{padding: 27rem 0 16rem; position: relative;}
.sub04 .sec02::after{content: ""; position: absolute; bottom: 0; background-color: #f3f3f3; height: 36rem; z-index: -1; width: 100%;}
.sub04 .sec01 .inner{}
.sub04 .sec02 h2{}
.sub04 .sec02 ul{display: flex; gap: 4.8rem; justify-content: center;}
.sub04 .sec02 ul li{position: relative; background-color: #00697c; width: calc((100% - 9.6rem) / 3); border-radius: 1000px; color: #fff; max-width: 360px;}
.sub04 .sec02 ul li::after{display: block; content: ""; padding-bottom: 100%;}
.sub04 .sec02 ul li .txt{position: absolute; top: 50%; transform: translateY(-50%); width: 100%; left: 0; text-align: center;}
.sub04 .sec02 ul li .txt h5{font-size: 4.3rem; font-weight: 500; padding-bottom: 3rem;}
.sub04 .sec02 ul li .txt p{font-size: 2.8rem; line-height: 1.4;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sub04 .sec02{padding: 60px 0 0;}
    .sub04 .sec02::after{height: 40%;}
    .sub04 .sec02 ul{justify-content: space-between; gap: 0;}
    .sub04 .sec02 ul li{width: 32%; max-width: none;}
    .sub04 .sec02 ul li .txt h5{font-size: 24px;}
    .sub04 .sec02 ul li .txt p{font-size: 18px;}
}
@media all and (max-width:768px){
    .sub04 .sec02::after{display: none;}
    .sub04 .sec02 ul{gap: 15px 0; flex-wrap: wrap;}
    .sub04 .sec02 ul li{width: 49%;}
    .sub04 .sec02 ul li .txt h5{font-size: 20px; padding-bottom: 10px;}
    .sub04 .sec02 ul li .txt p{font-size: 16px;}
}
@media all and (max-width:400px){
    /* .sub04 .sec02 ul li{width: 100%;} */
}
.sub04 .sec03{padding: 29rem 0 10rem;}
.sub04 .sec03 .inner{}
.sub04 .sec03 h2{text-align: left;}
.sub04 .sec03 h3{text-align: left;}
.sub04 .sec03 .item-wrap{}
.sub04 .sec03 .item-wrap .item{display: flex; padding: 4rem 0; gap: 5rem; border-top: 1px solid #777777;}
.sub04 .sec03 .item-wrap .item h5{font-weight: 500; font-size: 3.8rem; width: 45rem;}
.sub04 .sec03 .item-wrap .item p{width: 40rem; line-height: 1.4;}
.sub04 .sec03 .item-wrap .item .imgbox{flex: 1;}
.sub04 .sec03 .item-wrap .item .imgbox img{width: 100%;}
@media all and (max-width:1200px){
    .sub04 .sec03 .item-wrap .item h5{width: 40rem;}
}
@media all and (max-width:1024px){
    .sub04 .sec03{padding: 60px 0;}
    .sub04 .sec03 .item-wrap .item{gap: 20px 0; flex-wrap: wrap; justify-content: space-between;}
    .sub04 .sec03 .item-wrap .item h5{font-size: 24px; width: 100%;}
    .sub04 .sec03 .item-wrap .item p{font-size: 18px; width: 49%;}
    .sub04 .sec03 .item-wrap .item .imgbox{width: 49%; flex: none;}
}
@media all and (max-width:768px){
    .sub04 .sec03 .item-wrap .item h5{font-size: 20px;}
    .sub04 .sec03 .item-wrap .item p{font-size: 16px;}
}
@media all and (max-width:500px){
    .sub04 .sec03 .item-wrap .item p{width: 100%;}
    .sub04 .sec03 .item-wrap .item .imgbox{width: 100%;}
}
.sub04 .sec04{padding: 23rem 0 21rem; color: #fff; background-color: #00697c;} 
.sub04 .sec04 h2{padding-bottom: 8rem; color: #fff;}
.sub04 .sec04 ul{display: flex; gap: 30px 0; justify-content: space-between;}
.sub04 .sec04 ul li{width: 32%; max-width: 395px;}
.sub04 .sec04 ul li .imgbox{margin-bottom: 3rem;}
.sub04 .sec04 ul li .imgbox img{width: 100%;}
.sub04 .sec04 ul li .txtbox{display: flex;}
.sub04 .sec04 ul li .txtbox h5{font-family: 'GmarketSansMedium'; font-size: 5.3rem; padding-right: 3rem; margin-right: 2rem; border-right: 1px solid #fff;}
.sub04 .sec04 ul li .txtbox div{}
.sub04 .sec04 ul li .txtbox div h6{font-size: 3.6rem; font-weight: 500; padding-bottom: 3rem;}
.sub04 .sec04 ul li .txtbox div p{line-height: 1.5;}
@media all and (max-width:1200px){
    .sub04 .sec04 ul li .txtbox h5{padding-right: 15px; margin-right: 15px;}
}
@media all and (max-width:1024px){
    .sub04 .sec04{padding: 60px 0;}
    .sub04 .sec04 h2{padding-bottom: 30px;}
    .sub04 .sec04 ul{}
    .sub04 .sec04 ul li{}
    .sub04 .sec04 ul li .txtbox h5{font-size: 30px;}
    .sub04 .sec04 ul li .txtbox div h6{font-size: 24px; padding-bottom: 15px;}
    .sub04 .sec04 ul li .txtbox div p{font-size: 18px;}
}
@media all and (max-width:768px){
    .sub04 .sec04 ul{flex-wrap: wrap;}
    .sub04 .sec04 ul li{width: 49%; max-width: none;}
    .sub04 .sec04 ul li .txtbox div h6{font-size: 20px; padding-bottom: 10px;}
    .sub04 .sec04 ul li .txtbox div p{font-size: 16px;}
    .sub04 .sec04 ul li .txtbox div p br{display: none;}
}
@media all and (max-width:500px){
    .sub04 .sec04 ul li{width: 100%;}
}
.sub04 .sec05{padding: 23rem 0 22rem; position: relative;}
.sub04 .sec05::after{content: ""; position: absolute; bottom: 0; background-color: #f3f3f3; height: 33%; z-index: -1; width: 100%;}
.sub04 .sec05 .inner{max-width: 1500px;}
.sub04 .sec05 h2{}
.sub04 .sec05 h3{padding-bottom: 10rem;}
.sub04 .sec05 ul{display: flex; gap: 15px 0; justify-content: space-between; flex-wrap: wrap;}
.sub04 .sec05 ul li{position: relative; background-color: #00697c; width: 19.5%;  border-radius: 1000px; color: #fff; max-width: 276px; font-size: 2.7rem; font-weight: 500;}
.sub04 .sec05 ul li::after{display: block; content: ""; padding-bottom: 100%;}
.sub04 .sec05 ul li p{position: absolute; top: 50%; transform: translateY(-50%); width: 100%; left: 0; text-align: center; }
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sub04 .sec05{padding: 60px 0;}
    .sub04 .sec05 h3{padding-bottom: 30px;}
    .sub04 .sec05 ul li{max-width: none; font-size: 18px;}
    .sub04 .sec05 ul li p{font-size: 18px;}
}
@media all and (max-width:768px){
    .sub04 .sec05::after{display: none;}
    .sub04 .sec05 ul{justify-content: center; gap: 15px 10px;}
    .sub04 .sec05 ul li{width: calc((100% - 20px) / 3);}
    .sub04 .sec05 ul li p{font-size: 16px;}
}
@media all and (max-width:500px){
    .sub04 .sec05 ul{justify-content: space-between;}
    .sub04 .sec05 ul li{width: calc((100% - 10px) / 2);}
}
.sub04 .sec06{padding: 24rem 0 17rem;}
.sub04 .sec06 .inner{}
.sub04 .sec06 h2{}
.sub04 .sec06 h3{}
.sub04 .sec06 .item-wrap{}
.sub04 .sec06 .item-wrap .item{display: flex; padding: 5rem 0 11rem; border-top: 2px solid #00697c; justify-content: space-between;}
.sub04 .sec06 .item-wrap .item .left{width: 38rem;}
.sub04 .sec06 .item-wrap .item .left h5{color: #00697c; font-weight: 600; font-size: 4rem; padding-bottom: 1.5rem;}
.sub04 .sec06 .item-wrap .item .left h6{font-size: 3rem; border: 1px solid #00697c; display: inline-block; padding: 10px 1rem;}
.sub04 .sec06 .item-wrap .item .right{max-width: 75rem; width: calc(100% - 38rem); display: flex; flex-direction: column; gap:6rem;}
.sub04 .sec06 .item-wrap .item .right ul{display: flex; flex-direction: column; gap: 1.8rem;}
.sub04 .sec06 .item-wrap .item .right ul li{width: 100%; font-weight: 500;}
.sub04 .sec06 .item-wrap .item .right ul li b{font-family: 'GmarketSansBold'; color: #00697c;}
.sub04 .sec06 .item-wrap .item .right ul li i{color: #00697c; font-weight: 700;}
.sub04 .sec06 .item-wrap .item .right ul li.tit{font-size: 3rem; font-weight: 700;}
.sub04 .sec06 .item-wrap .item .right ul li.box{display: flex; height: 9rem;}
.sub04 .sec06 .item-wrap .item .right ul li.box span{color: #00697c; font-family: 'GmarketSansMedium'; font-size: 3.5rem; display: inline-flex; align-items: center; height: 100%; width: 7rem; justify-content: center; background-color: #b6dae1;}
.sub04 .sec06 .item-wrap .item .right ul li.box .txt{background-color: #f3f3f3; display: flex; align-items: center; height: 100%; width: calc(100% - 7rem); padding: 0 3rem; }
.sub04 .sec06 .item-wrap .item .right ul li.box .txt p{}
.sub04 .sec06 .item-wrap .item .right ul li.total{height: 9rem; background-color: #00697c; font-size: 3.5rem; display: flex; align-items: center; justify-content: center; color: #fff;}
.sub04 .sec06 .item-wrap .item .right ul li.total p{}
.sub04 .sec06 .item-wrap .item .right ul li.total p b{color: #fff;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sub04 .sec06{padding: 60px 0 30px;}
    .sub04 .sec06 .item-wrap .item{padding: 30px 0;}
    .sub04 .sec06 .item-wrap .item .left{width: 230px;}
    .sub04 .sec06 .item-wrap .item .left h5{font-size: 28px;}
    .sub04 .sec06 .item-wrap .item .left h6{font-size: 18px;}
    .sub04 .sec06 .item-wrap .item .right{width: calc(100% - 230px);}
    .sub04 .sec06 .item-wrap .item .right ul li.tit{font-size: 24px;}
    .sub04 .sec06 .item-wrap .item .right ul li.box .txt{font-size: 18px;}
    .sub04 .sec06 .item-wrap .item .right ul li.box span{font-size: 24px;}
    .sub04 .sec06 .item-wrap .item .right ul li.total{font-size: 24px;}
}
@media all and (max-width:768px){
    .sub04 .sec06 .item-wrap .item{flex-wrap: wrap; gap: 20px;}
    .sub04 .sec06 .item-wrap .item .left{width: 100%;}
    .sub04 .sec06 .item-wrap .item .right{width: 100%; max-width: none;}
    .sub04 .sec06 .item-wrap .item .left h5{font-size: 24px;}
    .sub04 .sec06 .item-wrap .item .left h6{font-size: 16px;}
    .sub04 .sec06 .item-wrap .item .right ul li.tit{font-size: 18px;}
    .sub04 .sec06 .item-wrap .item .right ul li.box{height: 60px;}
    .sub04 .sec06 .item-wrap .item .right ul li.box .txt{font-size: 16px;}
    .sub04 .sec06 .item-wrap .item .right ul li.box span{font-size: 18px;}
    .sub04 .sec06 .item-wrap .item .right ul li.total{font-size: 18px; height: 60px;}
}
@media all and (max-width:500px){
    
}
.sub04 .sec07{padding: 28rem 0 26rem; background-color: #00697c;}
.sub04 .sec07 .inner{}
.sub04 .sec07 h2{color: #fff; padding-bottom: 10rem;}
.sub04 .sec07 .imgbox{display: flex; align-items: center; justify-content: center; background-color: #fff; border-radius: 1000px; margin: 0 auto; width: 100%; height: 43rem; max-width: 76rem; padding: 0 50px;}
.sub04 .sec07 .imgbox img{width: 90%; max-width: 380px;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sub04 .sec07{padding: 60px 0;}
    .sub04 .sec07 h2{padding-bottom: 30px;}
    .sub04 .sec07 .imgbox{height: 200px;}
}
@media all and (max-width:768px){
    
}
.sub04 .sec08{padding: 30rem 0;}
.sub04 .sec08 .inner{}
.sub04 .sec08 h2{}
.sub04 .sec08 h3{padding-bottom: 15rem;}
.sub04 .sec08 .imgbox{text-align: center;}
.sub04 .sec08 .imgbox img{}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sub04 .sec08{padding: 60px 0;}
    .sub04 .sec08 h3{padding-bottom: 30px;}
}
@media all and (max-width:768px){
    
}