.visual{background-image: url(../img/sub01/visual.png); }
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    
}
@media all and (max-width:768px){
    .sub .visual .inner{justify-content: center;}
}
@media all and (max-width:500px){
    .visual .txtbox{margin-bottom: 70px;}
}

.sec01{padding: 15vw 0; }
.sec01 .inner{display: flex; justify-content: space-between; gap: 30px;}
.sec01 .txtbox{}
.sec01 .txtbox h2{padding-bottom: 2.6vw;}
.sec01 .txtbox h3{}
.sec01 .imgbox{width: 50%; max-width: 635px;}
.sec01 .imgbox img{}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sec01{padding: 80px 0;}
}
@media all and (max-width:768px){
    .sec01 .inner{flex-direction: column;}
    .sec01 .imgbox{width: 100%; max-width:none}
    .sec01 .imgbox img{width: 100%;}
}

.sec02{padding-bottom: 18vw;}
.sec02 .inner{}
.sec02 h2{text-align: right; font-size: 4.5vw; padding-bottom: 6.8vw;}
.sec02{}
.sec02 ul{position: relative; }
/* .sec02 ul::before{content:''; position:absolute; top:20px; left: 15.7vw; width:1px; height:98%; background:#ff8c20; } */
.sec02 ul li{display: flex; padding-bottom: 7vw; position: relative;}
.sec02 ul li:last-child{padding-bottom: 0;}
.sec02 ul li::before{content: ""; width: 4rem; height: 4rem; background: #ff8c20; position: absolute; left: calc(15.7vw - 2rem); border-radius: 100px; top: 10%;}
.sec02 ul li:not(:last-child)::after{content:''; position:absolute; top:10%; left: 15.7vw; width:1px; height:105%; background:#ff8c20;}
.sec02 ul li.center{align-items: center;}
.sec02 ul li .year{color: #ff8c20; font-family: 'GmarketSansMedium'; font-size: 4.2VW; width: 15.7vw; line-height: 1;}
.sec02 ul li .r-text{flex: 1; padding-left: 4.7vw; position: relative;}
.sec02 ul li.center .r-text::before{top: 50%; transform: translateY(-50%);}
.sec02 ul li .r-text h4{font-size: 2.8VW;}
.sec02 ul li .r-text h4 span{font-size: 1.9vw; }
.sec02 ul li .r-text p{font-size: 1.9vw; padding-top: 2vw;}
@media all and (max-width:1024px){
    .sec02{padding-bottom: 80px;}
    .sec02 ul li:not(:last-child)::after{left: 160px;}
    .sec02 ul li::before{left: calc(160px - 2rem); top: 0;}
    .sec02 ul li .year{font-size: 40px; width: 160px;}
    .sec02 ul li .r-text{padding-left: 50px;}
    .sec02 ul li .r-text h4{font-size: 30px;}
    .sec02 ul li .r-text h4 span,
    .sec02 ul li .r-text p{font-size: 20px;}
}
@media all and (max-width:768px){
    .sec02 h2{font-size: 30px; padding-bottom: 40px;}
    .sec02 ul li:not(:last-child)::after{left: 10px; height: 96%;}
    .sec02 ul li{display: block; padding-left: 40px; padding-bottom: 60px;}
    .sec02 ul li::before{width: 20px; height: 20px; left: 0; top: 0;}
    .sec02 ul li .year{font-size: 30px; width: 100%; margin-bottom: 10px;}
    .sec02 ul li .r-text{padding-left: 0px;}
    .sec02 ul li .r-text h4{font-size: 24px;}
    .sec02 ul li .r-text h4 span,
    .sec02 ul li .r-text p{font-size: 16px; padding-top: 0;}
}
@media all and (max-width:500px){
    .sec02 ul li:not(:last-child)::after{height: 94%;}
}

.sec03{padding: 10vw 0; color: #fff; text-align: center; }
.sec03 .inner{max-width: 1500px;}
.sec03 h2{padding-bottom: 5vw;}
.sec03 ul{gap: 20px; display: flex; align-items: flex-start; justify-content: space-between;}
.sec03 ul li{flex: 1; max-width: 338px;}
.sec03 ul li:nth-child(1){padding-top: 4.7vw;}
.sec03 ul li:nth-child(2){}
.sec03 ul li:nth-child(3){padding-top: 5vw;}
.sec03 ul li:nth-child(4){padding-top: 5vw;}
.sec03 ul li .imgbox{margin-bottom: 2vw; width: 100%;}
.sec03 ul li .imgbox img{width: 100%;}
.sec03 ul li h3{font-size: 3.2rem; font-weight: 500; display: inline-block; border-bottom: 1px solid #fff; margin-bottom: 3rem; padding-bottom: 1rem;}
.sec03 ul li p{font-size: 2.7rem;}

@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sec03{padding: 80px 0;}
    .sec03 h2{padding-bottom: 40px;}
    .sec03 ul li .imgbox{}
    .sec03 ul li h3{font-size: 24px; margin-bottom: 10px; }
    .sec03 ul li p{font-size: 18px;}
}
@media all and (max-width:768px){
    .sec03 h2{padding-bottom: 30px;}
    .sec03 ul{flex-wrap: wrap;}
    .sec03 ul li{width: calc((100% - 20px) / 2); flex: none;}
    .sec03 ul li:nth-child(1){padding-top: 0; order: 1;}
    .sec03 ul li:nth-child(2){order: 3;}
    .sec03 ul li:nth-child(3){padding-top: 0; order: 4;}
    .sec03 ul li:nth-child(4){padding-top: 0; order: 2;}
    .sec03 ul li h3{font-size: 20px; }
    .sec03 ul li p{font-size: 16px;}
}
.sec04{padding: 13.5vw 0 12vw; background: #fdf2e3;}
.sec04 .inner{max-width: 1300px; display: flex; justify-content: space-between; gap: 30px;}
.sec04 h2{width: max-content;}
.sec04 ul{display: flex; flex-direction: column; gap: 2rem; flex: 1; max-width: 730px;}
.sec04 ul li{background: #fff; border-radius: 3rem; padding: 2.5rem 3rem 2rem; min-width: 38vw; display: flex; gap: 4rem;}
.sec04 ul li h3{font-family: 'GmarketSansMedium'; font-size: 4rem; color: #ff8316; }
.sec04 ul li p{font-size: 3.3rem; }
.sec04 ul li p b{color: #ff8316;}

@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sec04{padding: 80px 0;}
    .sec04 ul{max-width: 500px;}
    .sec04 ul li{padding: 20px; padding-bottom: 15px; gap: 20px;}
    .sec04 ul li h3{font-size: 30px; }
    .sec04 ul li p{font-size: 24px;}
    
}
@media all and (max-width:768px){
    .sec04 .inner{flex-direction: column;}
    .sec04 ul{max-width: none;}
    .sec04 ul li{gap: 10px; padding: 15px; border-radius: 15px;}
    .sec04 ul li h3{font-size: 20px; }
    .sec04 ul li p{font-size: 16px;}
}
.cmm-contact{display: none;}