.visual{background-image: url(../img/sub04/visual.png);}

.sec01{display: flex;}
.sec01 .imgbox{width: 50%; font-size: 0;}
.sec01 .imgbox img{width: 100%; height: 101%; object-fit: cover;}
.sec01 .txtbox{width: 50%; background: #f5f5f5; display: flex; flex-direction: column; gap: 4rem; justify-content: center; padding: 20px 30px 20px 5vw;}
.sec01 .txtbox h2{font-size: 3vw;}
.sec01 .txtbox h3{}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    
}
@media all and (max-width:768px){
    .sec01{flex-direction: column;}
    .sec01 .imgbox,
    .sec01 .txtbox{width: 100%;}
    .sec01 .txtbox{padding: 40px 20px; gap: 20px;}
    .sec01 .txtbox h2{font-size: 24px;}
}

.sec02{}
.sec02 ul{display: flex;}
.sec02 ul li{flex: 1; position: relative;}
.sec02 ul li .imgbox{font-size: 0; width: 100%; height: 100%;}
.sec02 ul li .imgbox img{width: 100%; height: 100%; object-fit: cover;}
.sec02 ul li p{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3.5rem; font-weight: 700; color: #fff; width: 100%; text-align: center;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sec02 ul li p{font-size: 24px;}
}
@media all and (max-width:768px){
    .sec02 ul{flex-direction: column;}
    .sec02 ul li p{font-size: 20px;}
}

.sec03{padding: 18rem 0 26rem;}
.sec03 .inner01{max-width: 1270px; display: flex; justify-content: space-between; gap: 30px;}
.sec03 .inner02{max-width: 1630px;}
.sec03 .txtbox{padding-top: 13rem;}
.sec03 .txtbox h2{padding-bottom: 4rem;}
.sec03 ul{margin-top: -23rem; display: flex; background: #cb9d89; color: #fff; border-radius: 200px; padding: 4rem;}
.sec03 ul li{font-size: 3.7rem; font-weight: 700; flex: 1; text-align: center; border-right: 1px solid #fff; display: flex; align-items: center; justify-content: center; height: 17rem;}
.sec03 ul li:last-child{border: none;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sec03{padding: 80px 0;}
    .sec03 ul li{font-size: 24px;}
}
@media all and (max-width:768px){
    .sec03{text-align: center;}
    .sec03 .inner01{flex-wrap: wrap; justify-content: center;}
    .sec03 .txtbox{padding-top: 0; width: 100%;}
    .sec03 .imgbox{max-width: 400px; width: 100%;}
    .sec03 ul{flex-wrap: wrap; gap: 20px; margin-top: -50px; border-radius: 20px; gap: 0;}
    .sec03 ul li{flex: auto; border: none; width: 100%; height: 50px; font-size: 18px; border-bottom: 1px solid #fff; height: 70px;}
}

.sec04{padding-bottom: 20rem;}
.sec04 .inner{max-width: 1470px;}
.sec04 h2{text-align: center;}
.sec04 h3{padding: 3rem 0 7rem; text-align: center;}
.sec04 ul{display: flex; flex-wrap: wrap; gap: 2rem 1.7rem;}
.sec04 ul li{width: calc((100% - 1.7rem) / 2); background-color: #f5f0ed; border-radius: 60rem; display: flex; padding: 3rem 8rem; gap: 1.5rem;}
.sec04 ul li span{color: #cb9d89; font-size: 4rem;}
.sec04 ul li p{font-size: 2.7rem; color: #515151; padding-top: 1.5rem;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sec03{padding-bottom: 80px;}
    .sec04 h3{padding: 20px 0 30px;}
    .sec04 ul li{padding: 10px 30px;}
    .sec04 ul li span{font-size: 20px;}
    .sec04 ul li p{font-size: 18px; padding-top: 3px;}
}
@media all and (max-width:768px){
    .sec04 ul li{width: 100%;}
    .sec04 ul li span{font-size: 18px;}
    .sec04 ul li p{font-size: 16px;}
}
.sec05{padding: 20rem 0; background: #caa08e; text-align: center; color: #fff;}
.sec05 .inner{max-width: 1440px;}
.sec05 h2{color: #fff; padding-bottom: 7rem;}
.sec05 h2 b{color: #fff;}
.sec05 ul{display: flex; justify-content: space-between; gap: 2rem;}
.sec05 ul li{width: calc((100% - 4rem) / 3);}
.sec05 ul li .imgbox{border-radius: 4rem; overflow: hidden; font-size: 0;}
.sec05 ul li .imgbox img{width: 100%;}
.sec05 ul li .txtbox{margin-top: -4rem; position: relative;}
.sec05 ul li .txtbox span{width: 8rem; height: 8rem; background: #5e5e5e; border-radius: 10rem; display: inline-flex; align-items: center; justify-content: center; font-family: 'GmarketSansBold'; font-size: 4.3rem; padding-top: 0.6rem;}
.sec05 ul li .txtbox h3{font-size: 4rem; font-weight: 700; padding: 2rem 0 3rem;}
.sec05 ul li .txtbox p{font-size: 2.5rem;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sec05{padding: 80px 0;}
    .sec05 h2{padding-bottom: 30px;}
    .sec05 ul li .txtbox span{font-size: 30px;}
    .sec05 ul li .txtbox h3{font-size: 24px;}
    .sec05 ul li .txtbox p{font-size: 18px;}
}
@media all and (max-width:768px){
    .sec05 ul{flex-wrap: wrap; gap: 30px;}
    .sec05 ul li{width: calc((100% - 30px) / 2);}
    .sec05 ul li .txtbox{margin-top: -20px;}
    .sec05 ul li .txtbox span{font-size: 24px; width: 40px; height: 40px;}
    .sec05 ul li .txtbox h3{font-size: 20px; padding: 10px 0;}
    .sec05 ul li .txtbox p{font-size: 16px;}
}
@media all and (max-width:500px){
    .sec05 ul li{width: 100%;}
}

.sec06{padding: 20rem 0;}
.sec06 .inner{max-width: 1440px; display: flex; justify-content: space-between; align-items: center; gap: 20px;}
.sec06 .imgbox{}
.sec06 .imgbox img{}
.sec06 .txtbox{}
.sec06 .txtbox h2{width: max-content; padding-bottom: 4rem;}
.sec06 .txtbox h3{}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sec06{padding: 80px 0;}
    .sec06 .txtbox h2{padding-bottom: 20px;}
    
}
@media all and (max-width:768px){
    .sec06 .inner{flex-direction: column; align-items: flex-start;}
    .sec06 .imgbox{max-width: 400px;}
    .sec06 .txtbox h2{width: auto;}
}
.sec07{padding: 18rem 0 15rem; text-align: center; background: #5d5d5d; color: #fff;}
.sec07 .inner{max-width: 1440px;}
.sec07 h2 b{color: #fff;}
.sec07 h3{padding: 3rem 0 5rem;}
.sec07 ul{display: flex; justify-content: space-between; gap: 2rem;}
.sec07 ul li{}
.sec07 ul li .imgbox{margin-bottom: 5rem; font-size: 0;}
.sec07 ul li .imgbox img{}
.sec07 ul li h5{font-weight: 200; font-size: 3.5rem;}
.sec07 ul li p{font-size: 1.8rem;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sec07{padding: 80px 0;}
    .sec07 h3{padding: 20px 0 30px;}
    .sec07 ul li .imgbox{margin-bottom: 20px;}
    .sec07 ul li h5{font-size: 24px;}
}
@media all and (max-width:768px){
    .sec07 ul{flex-wrap: wrap;}
    .sec07 ul li{width: calc((100% - 4rem) / 3);}

}
.sec08{padding: 20rem 0 18rem; background: #f8efea;}
.sec08 .inner{max-width: 1440px;}
.sec08 h2{padding-bottom: 9rem; text-align: center;}
.sec08 ul{display: flex; flex-direction: column; gap: 3rem;}
.sec08 ul li{display: flex; background: #fff; border-radius: 20rem; overflow: hidden;}
.sec08 ul li h4{font-family: 'GmarketSansMedium'; font-size: 5rem; display: flex;
 align-items: center; justify-content: center; width: 27rem; color: #fff;}
.sec08 ul li:nth-child(1) h4{background: #f2d9cf;}
.sec08 ul li:nth-child(2) h4{background: #eccabc;}
.sec08 ul li:nth-child(3) h4{background: #deb6a5;}
.sec08 ul li:nth-child(4) h4{background: #caa08e;}
.sec08 ul li .txtbox{ padding: 5rem 6rem; width: calc(100% - 27rem);}
.sec08 ul li .txtbox h5{font-size: 4.3rem; font-weight: 700; padding-bottom: 2rem;}
.sec08 ul li .txtbox p{font-size: 2.7rem; color: #515151;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sec08{padding: 80px 0;}
    .sec08 h2{padding-bottom: 30px;}
    .sec08 ul li h4{font-size: 28px;}
    .sec08 ul li .txtbox{padding: 20px 30px;}
    .sec08 ul li .txtbox h5{font-size: 24px; padding-bottom: 5px;}
    .sec08 ul li .txtbox p{font-size: 18px;}
}
@media all and (max-width:768px){
    .sec08 ul li{flex-direction: column; border-radius: 25px;}
    .sec08 ul li h4{font-size: 24px; width: 100%; border-radius: 100px; height: 50px;}
    .sec08 ul li .txtbox{padding: 20px; width: 100%; text-align: center;}
    .sec08 ul li .txtbox h5{font-size: 20px;}
    .sec08 ul li .txtbox p{font-size: 16px;}
}