/* main 메인 */
.ms-visual{padding-top: 0;}
.ms-visual::after{content: ""; width: 90%; height: 6rem; background-color: #fff; position: absolute; bottom: 0; right: 0; z-index: 1;}
.ms-visual ul{height: 100%;}
.ms-visual ul li{width: 100%; height: 100%; display: flex; align-items: center;}
.ms-visual ul li.slide01{
    background: url(../img/main/main-visual01.png) no-repeat center / cover;
}
.ms-visual ul li.slide03{
    background: url(../img/main/main-visual03.png) no-repeat center / cover;
}
.ms-visual ul li.slide04{
    background: url(../img/main/main-visual04.png) no-repeat center / cover;
}
.ms-visual ul li .txtbox{}
.ms-visual .sw-btn{font-family: 'BcCardFont'; position: absolute; left: 50%; transform: translate(-50%, -50%); display: flex; gap: 1.5rem; z-index: 1; bottom: 20rem;}
.ms-visual .sw-btn > div{width: 5rem; height: 5rem; background-color: #fff; border-radius: 1000px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #5c5c5c; font-size: 2rem;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .ms-visual .cont .sw-btn{bottom: -50px;}
}
@media all and (max-width:768px){
    .ms-visual::after{display: none;}
    .ms-visual ul li{}
    .ms-visual .sw-btn{bottom: 20%;}
    

}
@media all and (max-width:500px){
    .ms-visual .sw-btn{bottom: 25%;}
    .ms-visual ul li{align-items: flex-start; padding-top: 100px;}
    .ms-visual ul li.slide01{
        background: url(../img/main/main-visual01-mo.png) no-repeat center / cover;
    }
}
/* ms01 */
.ms01{padding: 13vw 0 16vw; }
.ms01 .inner{max-width: 1380px; display: flex; align-items: center; gap: 7vw;}
.ms01 .imgbox{}
.ms01 .imgbox img{}
.ms01 .txtbox{}
.ms01 .txtbox p{font-size: 2.4rem; padding-bottom: 2rem;}
.ms01 .txtbox h2{padding-bottom: 5rem;}
.ms01 .txtbox h3{padding-bottom: 4rem; width: max-content;}
.ms01 .txtbox span{font-size: 2.2rem; font-weight: 700;}
@media all and (max-width:1300px){

}
@media all and (max-width:1024px){
    .ms01{padding: 80px 0;}
    .ms01 .inner{gap: 20px;}
}
@media all and (max-width:768px){
    .ms01 .inner{flex-direction: column-reverse; align-items: flex-start; gap: 30px;}
    .ms01 .inner > div{width: 100%;}
    .ms01 .txtbox h2{padding-bottom: 20px;}
    .ms01 .txtbox h3{width: auto;}
    .ms01 .imgbox{max-width: none; justify-content: flex-start;}
}

.ms02{padding: 9vw 0; background: #e9f7fa;}
.ms02 .inner{max-width: 1500px; display: flex; align-items: center; justify-content: space-between; gap: 3rem;}
.ms02 .txtbox{text-align: center; position: absolute; left: 50%; transform: translateX(-50%); width: 100%;}
.ms02 .txtbox h2{}
.ms02 .txtbox h3{}
.ms02 .txtbox h4{font-weight: 700; font-size: 2.2rem;}
.ms02 .imgbox{max-width: 350px; width: 40%;}
.ms02 .imgbox img{}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .ms02{padding: 80px 0;}
}
@media all and (max-width:768px){
    
}

.banner01{padding: 9vw 0; background: linear-gradient(90deg,rgba(5, 107, 127, 1) 0%, rgba(4, 82, 97, 1) 100%); text-align: center;}
.banner01 h2,
.banner01 h3{color: #fff;}

.banner02{background-color: #fdfaf5;}
.banner02 .inner{position: absolute; left: 50%; transform: translateX(-50%); display: flex; height: 100%; align-items: center; max-width: 1340px;}
.banner02 .txtbox{ }
.banner02 .txtbox h2{}
.banner02 .txtbox h2 b{}
.banner02 .txtbox h3{}
.banner02 .imgbox{text-align: right; 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{position: relative; left: auto; transform: translateX(0); padding-bottom: 20px;}
    .banner02 .txtbox h2{font-size: 22px;}
    .banner02 .txtbox h3{font-size: 16px;}
}







/* ms03 */
.ms03{padding: 10.5vw 0; background: url(../img/main/sec03-bg.png) no-repeat center center / cover; color: #fff;}
.ms03 .title{ display: flex; gap: 6rem; max-width: 1320px; padding-bottom: 10rem; }
.ms03 .title h2{font-family: 'GmarketSansBold'; font-size: 4.2rem; text-align: right;}
.ms03 .title h3{padding-top: 0; color: #fff;}
.ms03 ul{display: flex; justify-content: space-between; gap: 2rem; align-items: flex-start; max-width: 1840px;}
.ms03 ul li{display: flex; flex-direction: column; gap: 3rem; padding-top: 9rem;}
.ms03 ul li:nth-child(3){padding-top: 0;}
.ms03 ul li:nth-child(4){align-self: flex-end;}
.ms03 ul li .imgbox{position: relative;}
.ms03 ul li .imgbox img{}
.ms03 ul li h4{font-size: 3rem; font-weight: 700; }
@media all and (max-width:1360px){
    
}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .ms03{padding: 80px 0;}
    .ms03 ul{height: auto;}
    .ms03 .title{gap: 0; flex-direction: column; padding-bottom: 50px;}
    .ms03 .title h2,
    .ms03 .title h3{text-align: center;}
    .ms03 .title h3{padding-top: 2rem;}
}
@media all and (max-width:768px){
    .ms03 .title h2{font-size: 24px;}
    .ms03 ul{flex-wrap: wrap; justify-content: center; gap: 2rem;}
    .ms03 ul li{width: calc((100% - 4rem) / 3); gap: 10px; justify-content: space-between; padding-top: 0;}
    .ms03 ul li .imgbox::after{content: ""; padding-bottom: 100%; display: block;}
    .ms03 ul li .imgbox img{position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0;}
    /* .ms03 ul li:nth-child(1){order: 1;}
    .ms03 ul li:nth-child(2){order: 4; }
    .ms03 ul li:nth-child(3){order: 2; }
    .ms03 ul li:nth-child(4){order: 3; }
    .ms03 ul li:nth-child(5){order: 5; } */
    .ms03 ul li h4{font-size: 16px;}
}
/* ms04 장비 */
.ms04{padding: 12vw 0 16vw;}
.ms04 .inner{max-width: 1600px;}
.ms04 h2{padding-bottom: 8rem;}
.ms04 ul{display: flex; flex-wrap: wrap; gap: 7rem 4rem;}
.ms04 ul li{width: calc((100% - 8rem) / 3); position: relative;}
.ms04 ul li img{width: 100%;}
.ms04 ul li p{font-size: 2.2rem; position: relative; width: 85%; padding: 10px; padding-left: 0; background-color: #fff; margin-top: -50px;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .ms04{padding: 80px 0;}
    .ms04 h2{padding-bottom: 40px;}
    .ms04 ul{gap: 20px;}
    .ms04 ul li{width: calc((100% - 40px) / 3);}
    .ms04 ul li p{margin-top: -32px;}
}
@media all and (max-width:768px){
    .ms04 ul{gap: 10px 20px;}
    .ms04 ul li{width: calc((100% - 20px) / 2);}
    .ms04 ul li p{font-size: 16px; margin-top: -5vw; width: 90%;}
}
@media all and (max-width: 500px){
    
}
.ms05{display: flex; align-items: center; background: #0f859c; color: #fff;}
.ms05 .imgbox{width: 50%;}
.ms05 .imgbox img{width: 100%;}
.ms05 .txtbox{width: 50%; padding: 0 20px 0 6.5vw;}
.ms05 .txtbox h2{color: #fff; padding-bottom: 2rem;}
.ms05 .txtbox h3{color: #fff; line-height: 1.7;}
@media all and (max-width: 1400px){
    .ms05 .imgbox{width: 45%;}
    .ms05 .txtbox{width: 55%; padding: 30px;}
}
@media all and (max-width: 1024px){
    .ms05 .imgbox{width: 50%;}
    .ms05 .txtbox{width: 50%; padding: 30px 20px;}
    .ms05 .txtbox h2{padding-bottom: 0;}
}
@media all and (max-width: 768px){
    .ms05{flex-direction: column;}
    .ms05 .imgbox{width: 100%;}
    .ms05 .txtbox{width: 100%; }
}