.visual{background-image: url(../img/sub01/visual.png); margin-bottom: 17rem;}

@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .visual{margin-bottom: 80px;}
}
@media all and (max-width:768px){
    
}
.sub-gnb{font-size: 2.6rem;}
.sub-gnb ul{display: flex;}
.sub-gnb ul li{flex: 1; }
.sub-gnb ul li a{padding: 2.5rem 2rem; background-color: #f5f5f5; height: 14rem; width: 100%; display: block; color: #858585; transition: 0.3s;}
.sub-gnb ul li:hover a{background: #ceac9e; color: #fff;}
.sub-gnb ul li.on a{background: #caa08e; color: #fff;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    
}
@media all and (max-width:768px){
    .sub-gnb{font-size: 18px;}
    .sub-gnb ul li a{padding: 10px; height: 60px;}
}
@media all and (max-width:500px){
    .sub-gnb ul{flex-wrap: wrap;}
    .sub-gnb ul li{flex: none; width: 50%;}
    .sub-gnb ul li:nth-child(1),
    .sub-gnb ul li:nth-child(2){border-bottom: 1px solid #fff;}
    .sub-gnb ul li:nth-child(2n){border-left: 1px solid #fff;}
}
.dr-info{padding: 20rem 0;}
.dr-info .inner{display: flex; justify-content: space-between; gap: 2rem; align-items: center;}
.dr-info .txtbox{}
.dr-info .txtbox h2{}
.dr-info .txtbox h3{padding: 8rem 0 5rem; line-height: 1.6;}
.dr-info .txtbox h4{font-size: 2.2rem; font-weight: 700;}
.dr-info .imgbox{}
.dr-info .imgbox img{}
@media all and (max-width:1400px){
    
}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .dr-info{padding: 80px 0;}
    
}
@media all and (max-width:768px){
    .dr-info .inner{flex-direction: column; align-items: flex-start;}
    .dr-info .txtbox,
    .dr-info .imgbox{width: 100%;}
    .dr-info .imgbox{max-width: 400px;}
    .dr-info .imgbox img{width: 100%;}
}
@media all and (max-width:500px){
    
}
.banner{}
.banner .inner{display: flex; align-items: center;}
.banner .txtbox{}
.banner .txtbox h2{}
.banner .txtbox h3{font-size: 2.6rem; padding-top: 3rem;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    
}
@media all and (max-width:768px){
    .banner .txtbox h3{font-size: 18px; padding-top: 15px;}
}
.banner01{padding: 15rem 0; background-color: #f5f5f5;}
.banner01 .inner{display: flex; justify-content: center; align-items: center; gap: 9vw;}
.banner01 .imgbox{}
.banner01 .imgbox img{}
.banner01 .txtbox{}
.banner01 .txtbox h2{width: max-content;}
.banner01 .txtbox h3{padding-top: 5.5rem;}
@media all and (max-width:1400px){
    
}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .banner01{padding: 80px 0;}
    .banner01 .imgbox{width: 30%;}
}
@media all and (max-width:600px){
    .banner01{padding: 50px 0;}
    .banner01 .inner{align-items: flex-start; flex-direction: column-reverse; gap: 30px;}
    .banner01 .txtbox,
    .banner01 .imgbox{width: 100%;}
    .banner01 .imgbox{max-width: 200px; align-self: flex-end;}
    .banner01 .imgbox img{width: 100%;}
    .banner01 .txtbox h3{padding-top: 20px;}
}
@media all and (max-width:500px){
    
}
.banner02{padding-top: 2.5rem; background-color: #525461;}
.banner02 .inner{display: flex; justify-content: center; align-items: center; gap: 4rem;}
.banner02 .txtbox{}
.banner02 .txtbox h2{color: #fff; width: max-content;}
.banner02 .txtbox h2 b{color: #fff;}
.banner02 .txtbox h3{color: #fff; width: max-content;}
.banner02 .imgbox{font-size: 0;}
.banner02 .imgbox img{}
@media all and (max-width:1400px){
    
}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    
}
@media all and (max-width:600px){
    .banner02{padding-top: 50px;}
    .banner02 .inner{flex-direction: column; align-items: flex-start; gap: 20px;}
    .banner02 .txtbox h2,
    .banner02 .txtbox h3{width: auto;}
    .banner02 .imgbox{align-self: flex-end;}
    .banner02 .imgbox img{width: 200px;}
}
@media all and (max-width:500px){
    
}
.banner03{padding-top: 5rem; background-color: #c79a86;}
.banner03 .inner{display: flex; justify-content: center; align-items: center; gap: 6vw;}
.banner03 .txtbox{display: flex; flex-direction: column; align-items: flex-end; text-align: right;}
.banner03 .txtbox h2{color: #fff; width: max-content;}
.banner03 .txtbox h2 b{color: #fff;}
.banner03 .txtbox h3{color: #fff;}
.banner03 .imgbox{font-size: 0;}
.banner03 .imgbox img{}
@media all and (max-width:1400px){
    
}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    
}
@media all and (max-width:600px){
    .banner03{padding-top: 50px;}
    .banner03 .inner{flex-direction: column-reverse; align-items: flex-start; gap: 20px;}
    .banner03 .txtbox{text-align: left; align-items: flex-start;}
    .banner03 .txtbox h2,
    .banner03 .txtbox h3{width: auto;}
    .banner03 .imgbox{align-self: flex-end;}
    .banner03 .imgbox img{width: 200px;}
}
@media all and (max-width:500px){
    
}
.banner04{background-color: #f8f3ea;}
.banner04 .inner{position: absolute; left: 50%; transform: translateX(-50%); display: flex; height: 100%; align-items: center; }
.banner04 .txtbox{ }
.banner04 .txtbox h2{}
.banner04 .txtbox h2 b{}
.banner04 .txtbox h2 i{color: #5d5d5d;}
.banner04 .txtbox h3{}
.banner04 .imgbox{text-align: right; font-size: 0;}
.banner04 .imgbox img{}
@media all and (max-width:1400px){
    
}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    
}
@media all and (max-width:600px){
    .banner04{padding-top: 50px;}
    .banner04 .inner{position: relative; left: auto; transform: translateX(0); padding-bottom: 20px;}
    .banner04 .txtbox h2{font-size: 22px;}
    .banner04 .txtbox h3{font-size: 16px;}
}




.dr-history{margin-top: 20rem; padding-bottom: 43rem;}
.dr-history .inner{display: flex; position: initial; justify-content: space-between;}
.dr-history .left{text-align: center;}
.dr-history .left .imgbox{position: relative; font-size: 0;}
.dr-history .left .imgbox img{}
.dr-history .left p{font-size: 3.5rem; padding-top: 5rem; width: 100%;}
.dr-history .txtcont{position: absolute; right: 0; display: flex; width: 52%; flex-wrap: wrap; top: 22rem;}
.dr-history .txtcont h2{width: 100%; border-bottom: 1px solid #858585; padding-bottom: 8rem; margin-bottom: 8rem;}
.dr-history .txtcont p{line-height: 1.8; font-size: 2.4rem; width: 50%;}
.dr-history .txtcont p b{font-weight: 700; font-size: 2.3rem; padding-bottom: 3rem; display: inline-block;}
@media all and (max-width:1450px){
    .dr-history .txtcont h2{font-size: 3.5vw;}
}
@media all and (max-width:1360px){
    .dr-history{padding-bottom: 25rem;}
    .dr-history .inner{position: relative;}
    .dr-history .txtcont{position: relative; padding-top: 22rem; top: auto; width: 55%;}
    .dr-history .txtcont h2{padding-bottom: 5rem; margin-bottom: 5rem; }
}
@media all and (max-width:1200px){
    .dr-history .left {width: 40%;}
    
}
@media all and (max-width:1024px){
    .dr-history{margin-top: 80px; padding-bottom: 80px; }
    .dr-history .left{width: 32%;}
    .dr-history .txtcont{width: 65%; gap: 0 2%; padding-top: 50px;}
    .dr-history .txtcont p{width: 49%;}
}
@media all and (max-width:768px){
    .dr-history .inner{flex-wrap: wrap;}
    .dr-history .left{width: 100%; max-width: 400px;}
    .dr-history .left .imgbox{width: 100%;}
    .dr-history .left p{font-size: 24px; padding-top: 20px;}
    .dr-history .txtcont{width: 100%; padding-top: 30px;}
    .dr-history .txtcont h2{font-size: 23px; padding-bottom: 20px; margin-bottom: 20px;}
    .dr-history .txtcont p{font-size: 16px; }
    .dr-history .txtcont p b{font-size: 16px; padding-bottom: 10px;}
}
@media all and (max-width:500px){
    .dr-history .txtcont{gap: 20px;}
    .dr-history .txtcont h2{margin-bottom: 0;}
    .dr-history .txtcont p{width: 100%;}
}

.sec03{padding-top: 27rem;}
.sec03 .inner{}
.sec03 .txtbox{text-align: center;}
.sec03 .txtbox h2{}
.sec03 .txtbox h3{padding: 4rem 0 10rem;}
.sec03 ul{display: flex; flex-wrap: wrap; gap: 8rem 4rem; }
.sec03 ul li{width: calc((100% - 8rem) / 3); position: relative; max-width: 485px; font-size: 0;}
.sec03 ul li img{width: 100%;}
.sec03 ul li p{font-size: 17px; position: absolute; width: 90%; max-width: 380px; min-height: 4rem; bottom: 0; background-color: #fff; padding: 10px 0;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sec03{padding-top: 80px;}
    .sec03 .txtbox h2{}
    .sec03 .txtbox h3{padding: 20px 0 40px;}
    .sec03 ul{gap: 20px 2rem;}
    .sec03 ul li{width: calc((100% - 4rem) / 3);}
    .sec03 ul li p{position: relative; bottom: auto; width: 100%;}
}
@media all and (max-width:768px){
    .sec03 ul{gap:20px;}
    .sec03 ul li{width: calc((100% - 20px) / 2);}
    .sec03 ul li p{font-size: 16px; }
}
@media all and (max-width: 500px){
    .sec03 ul li p{font-size: 14px;}
}

.sec04{text-align: center; padding-top: 27rem;}
.sec04 h2{padding-bottom: 10rem;}
.sec04 .sw-sec04{position: relative;}
.sec04 .sw-sec04 ul{padding-bottom: 5rem;}
.sec04 .sw-sec04 ul li{transform: scale(.8); font-size: 0;}
.sec04 .sw-sec04 ul li.swiper-slide-active{transform: scale(1);}
.sec04 .sw-sec04 .swiper-pagination{position: relative; display: flex; justify-content: center; gap: 8px; align-items: center;}
.sec04 .sw-sec04 .swiper-pagination-clickable .swiper-pagination-bullet{margin: 0;}
.sec04 .sw-sec04 .swiper-pagination-bullet-active{width: 12px; height: 12px; background-color: #caa08e;}
.sec04 .sw-sec04 .sw-btn{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: space-between; width: 100%; z-index: 10; padding-bottom: 5rem; width: 57%; }
.sec04 .sw-sec04 .sw-btn > div{width: 2.5rem;}
.sec04 .sw-sec04 .sw-btn > div img{width: 100%;}


@media all and (max-width:1024px){
    .sec04{padding-top: 80px;}
    .sec04 h2{padding-bottom: 40px;}
}
@media all and (max-width:768px){
    .sec04 .sw-sec04 .sw-btn{width: 76%;}
    .sec04 .sw-sec04 .sw-btn > div{width: 15px;}
}
@media all and (max-width: 500px){
    .sec04 .sw-sec04 .sw-btn{width: 78%;}
}