.sub01{}
.sub01 .sub-visual{background: url(../img/sub01/visual.png) no-repeat center center / cover;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    
}
@media all and (max-width:768px){
    
}
.sub01 .sec01{padding: 20rem 0 25rem;}
.sub01 .sec01 .inner{}
.sub01 .sec01 .thumb{padding: 0 2.5rem; display: flex; gap: 1.2rem; justify-content: flex-end; width: 100%; margin-bottom: 2.5rem;}
.sub01 .sec01 .thumb li{width: 15rem; cursor: pointer;}
.sub01 .sec01 .thumb li .circle{width: 100%; border-radius: 1000px; overflow: hidden; background: #d8dbda; position: relative; transition: 0.3s;}
.sub01 .sec01 .thumb li .circle::after{content: ""; padding-bottom: 100%; display: block;}
.sub01 .sec01 .thumb li .circle h3{position: absolute; width: 100%; height: 100%;  top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(96, 96, 96, 0.9); z-index: 11; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2rem; font-weight: 700; transition: 0.3s;}
.sub01 .sec01 .thumb li .circle img{position: absolute; width: 100%; top: 1rem; }
.sub01 .sec01 .thumb li:hover .circle,
.sub01 .sec01 .thumb li.active .circle{background: #606060;}
.sub01 .sec01 .thumb li:hover .circle h3,
.sub01 .sec01 .thumb li.active .circle h3{opacity: 0;}
.sub01 .sec01 .thumb li.active .circle img{}
.sub01 .sec01 .thumb li p{width: 100%; font-size: 1.5rem; color: #fff; padding: 0 1rem; background: #0089b6; border-radius: 100px; display: flex; align-items: center; justify-content: center; height: 4.2rem; gap: 1rem; margin-top: -2.1rem; z-index: 1; position: relative; opacity: 0; transition: 0.3s;}
.sub01 .sec01 .thumb li:hover p,
.sub01 .sec01 .thumb li.active p{opacity: 1;}
.sub01 .sec01 .thumb li p span{font-size: 2rem; font-weight: 700;}
.sub01 .sec01 .cont{}
.sub01 .sec01 .cont ul{}
.sub01 .sec01 .cont ul li{display: none;}
.sub01 .sec01 .cont ul li.active{display: block;}
.sub01 .sec01 .cont ul li {}
.sub01 .sec01 .cont ul li .imgbox{height: 26rem; border-radius: 13rem; background: #0089b6; position: relative; display: flex; align-items: center; justify-content: flex-end;}
.sub01 .sec01 .cont ul li .imgbox img{position: absolute; bottom: 0; left: 10%; width: 32.5%;}
.sub01 .sec01 .cont ul li .imgbox h3{padding-left: 45%; font-size: 3.5rem; color: #fff; width: 100%;}
.sub01 .sec01 .cont ul li .imgbox h3 br{display: none;}

.sub01 .sec01 .cont ul li .imgbox h3 span{font-size: 5.3rem; font-weight: 700; display: inline-block; margin-right: 2rem;}
.sub01 .sec01 .cont ul li .txt-wrap{padding: 0 20px; width: 100%; max-width: 1240px; margin: 0 auto; }
.sub01 .sec01 .cont ul li .txt-wrap h2{text-align: center; border-bottom: 1px solid #606060; padding: 5.2rem 0 4.4rem;}
.sub01 .sec01 .cont ul li .txt-wrap .txtbox{display: flex; justify-content: center; gap: 2rem; padding-top: 4rem;}
.sub01 .sec01 .cont ul li .txt-wrap .txtbox .txt{}
.sub01 .sec01 .cont ul li .txt-wrap .txtbox .txt h4{padding-bottom: 3rem; font-size: 2.2rem;}
.sub01 .sec01 .cont ul li .txt-wrap .txtbox .txt p{font-size: 2rem; line-height: 1.8; font-weight: 400;}
@media all and (max-width:1300px){
    .sub01 .sec01 .cont ul li .imgbox{margin-top: 15rem;}
}
@media all and (max-width:1200px){

}
@media all and (max-width:1024px){
    .sub01 .sec01{padding: 80px 0;}
    .sub01 .sec01 .thumb{gap: 15px; padding: 0;}
    .sub01 .sec01 .thumb li{width: calc((100% - 60px) / 5);}
    .sub01 .sec01 .thumb li img{width: 100%;}
    .sub01 .sec01 .cont ul li .imgbox{margin-top: 30px; height: auto; padding: 0 20px; border-radius: 50px; justify-content: center; align-items: center; gap: 20px; overflow: hidden;}
    .sub01 .sec01 .cont ul li .imgbox img{position: relative; left: auto; bottom: auto; width: 40%; padding-top: 50px;}
    .sub01 .sec01 .cont ul li .imgbox h3{padding: 0; width: auto;}
    .sub01 .sec01 .cont ul li .imgbox h3 br{display: block;}
    .sub01 .sec01 .cont ul li .imgbox h3 br.mo{display: none;}
    .sub01 .sec01 .cont ul li .txt-wrap{padding: 0 10px;}
}
@media all and (max-width:768px){
    .sub01 .sec01 .thumb{gap: 10px; margin-bottom: 10px;}
    .sub01 .sec01 .thumb li{width: calc((100% - 40px) / 5);}
    .sub01 .sec01 .thumb li:hover p,
    .sub01 .sec01 .thumb li.active p{display: none;}
    .sub01 .sec01 .cont ul li .imgbox{margin-top: 0;}
    .sub01 .sec01 .cont ul li .imgbox img{padding-top: 20px;}
    .sub01 .sec01 .cont ul li .imgbox h3{font-size: 16px; line-height: 1.5;}
    .sub01 .sec01 .cont ul li .imgbox h3 span{font-size: 20px;}
    .sub01 .sec01 .cont ul li .imgbox h3 br.mo{display: block;}
    .sub01 .sec01 .cont ul li .txt-wrap h2{font-size: 20px; padding: 20px 0;}
    .sub01 .sec01 .cont ul li .txt-wrap .txtbox{flex-direction: column; gap: 30px; padding-top: 20px;}
    .sub01 .sec01 .cont ul li .txt-wrap .txtbox .txt h4{padding-bottom: 10px; font-size: 18px;}
}
@media all and (max-width:600px){
    .sub01 .sec01 .thumb{gap: 5px;}
    .sub01 .sec01 .thumb li{width: calc((100% - 20px) / 5);}
    .sub01 .sec01 .thumb li .circle h3{font-size: 10px;}
}
.sub01 .sec02{background: url(../img/sub01/sec02-bg.png) no-repeat center center / cover; padding: 20rem 0; color: #fff; text-align: center;}
.sub01 .sec02 .inner{}
.sub01 .sec02 h2{color: #fff; padding-bottom: 7rem;}
.sub01 .sec02 .txtbox{line-height: 1.8; padding: 7rem 20px; border-radius: 200rem; background-color: rgba(4, 149, 198, 0.67); font-weight: 400;}
@media all and (max-width:1200px){

}
@media all and (max-width:1024px){
    .sub01 .sec02{padding: 80px 0;}
    .sub01 .sec02 h2{padding-bottom: 40px;}
}
@media all and (max-width:768px){
    
}
@media all and (max-width:550px){
    .sub01 .sec02 .txtbox{border-radius: 50px; padding: 30px 10px;}
}

.sub01 .sec03{padding: 21rem 0 29rem;}
.sub01 .sec03 .inner{}
.sub01 .sec03 .inner > h2{text-align: center; padding-bottom: 8rem;}
.sub01 .sec03 ul{display: flex; justify-content: space-between; gap: 3vw;}
.sub01 .sec03 ul li{padding: 4vw 2.6vw; border-radius: 7rem; background: linear-gradient(165deg,#ebfbff 0%, #c9f1fe 100%); flex: 1;}
.sub01 .sec03 ul li span{font-family: 'GmarketSansLight'; font-size: 3.8rem; color: #0089b6;}
.sub01 .sec03 ul li h2{font-size: 3.5rem; padding: 2rem 0 3rem; }
.sub01 .sec03 ul li p{font-size: 2.5rem; font-weight: 400;}
@media all and (max-width:1400px){
    .sub01 .sec03 ul{gap: 20px;}
    /* .sub01 .sec03 ul li{padding: 4vw 3vw;} */
}
@media all and (max-width:1200px){
    .sub01 .sec03 ul li h2{padding: 15px 0 25px 0;}
}
@media all and (max-width:1024px){
    .sub01 .sec03{padding: 80px 0;}
    .sub01 .sec03 h2{padding-bottom: 40px;}
    .sub01 .sec03 ul li{padding: 30px 20px; border-radius: 30px;}
    .sub01 .sec03 ul li span{font-size: 22px;}
    .sub01 .sec03 ul li h2{font-size: 20px; padding: 10px 0 20px 0;}
    .sub01 .sec03 ul li p{font-size: 18px;}
}
@media all and (max-width:768px){
    .sub01 .sec03 ul{flex-wrap: wrap;}
    .sub01 .sec03 ul li{flex: none; width: calc((100% - 20px) / 2); border-radius: 30px; padding: 30px 20px;}
    .sub01 .sec03 ul li span{font-size: 20px;}
    .sub01 .sec03 ul li h2{font-size: 18px;}
    .sub01 .sec03 ul li p{font-size: 16px;}
}
@media all and (max-width:600px){
    .sub01 .sec03 ul li{width: 100%;}
}

/* 장비 */
.sub01 .sec04{padding-bottom: 35rem;}
.sub01 .sec04 .inner{}
.sub01 .sec04 .top-wrap{display: flex; justify-content: space-between; padding-bottom: 12rem;}
.sub01 .sec04 .top-wrap h2{padding-top: 10rem;}
.sub01 .sec04 .top-wrap ul{width: calc((100% - 3.6rem) / 3);}
.sub01 .sec04 .top-wrap ul li{width: 100%;}
.sub01 .sec04 ul{display: flex; gap: 12rem 1.8rem; flex-wrap: wrap;}
.sub01 .sec04 ul li{width: calc((100% - 3.6rem) / 3);}
.sub01 .sec04 .inner > ul li:first-child{display: none;}
.sub01 .sec04 ul li h3{background-color: #0089b6; color: #fff; padding: 1.3rem; font-size: 2.7rem;}
.sub01 .sec04 ul li .imgbox{width: 100%; border-bottom: 1px solid #000; margin-bottom: 2rem;}
.sub01 .sec04 ul li .imgbox img{width: 100%;}
.sub01 .sec04 ul li p{font-size: 2.2rem; font-weight: 300; }
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sub01 .sec04{padding-bottom: 80px;}
    .sub01 .sec04 ul li h3{font-size: 18px;}
    .sub01 .sec04 ul li p{font-size: 16px;}
}
@media all and (max-width:768px){
    .sub01 .sec04 .top-wrap{padding-bottom: 40px;}
    .sub01 .sec04 .top-wrap h2{padding-top: 0;}
    .sub01 .sec04 .top-wrap ul{display: none;}
    .sub01 .sec04 ul{gap: 30px 10px;}
    .sub01 .sec04 .inner > ul li:first-child{display: block;}
    .sub01 .sec04 ul li{width: calc((100% - 10px) / 2);}
    .sub01 .sec04 ul li h3{font-size: 15px; padding: 8px 5px;}
    .sub01 .sec04 ul li:nth-child(4) h3{font-size: 13px; height: 35.5px; display: flex; align-items: center;}
    .sub01 .sec04 ul li p{font-size: 14px;}
}
/* sec05 둘러보기 */
.sub01 .sec05{margin-left: calc((100vw - 1400px) / 2);}
.sub01 .sec05 .inner{padding: 0; max-width: none; display: flex; align-items: center;}
.sub01 .sec05 .txtbox{width: 20rem; position: relative; z-index: 2; color: #0089b6;}
.sub01 .sec05 .txtbox h2{}
.sub01 .sec05 .txtbox .sec04-paging{display: flex; align-items: center; gap: 20px;}
.sub01 .sec05 .txtbox .sec04-paging > *{cursor: pointer; }
.sub01 .sec05 .sw-sec05{width: calc(100% - 15rem); overflow: hidden; }
.sub01 .sec05 .sw-sec05 ul{}
.sub01 .sec05 .sw-sec05 ul li{}
.sub01 .sec05 .sw-sec05 ul li .imgbox{width: 100%;}
.sub01 .sec05 .sw-sec05 ul li .imgbox img{width: 100%; height: 100%; object-fit: cover;}
@media all and (max-width:1460px){
    .sub01 .sec05{margin-left: 0;}
    .sub01 .sec05 .inner{padding-left: 20px;}
}
@media all and (max-width:1024px){
    .sub01 .sec05{}
    .sub01 .sec05 .inner{flex-wrap:wrap;}
    .sub01 .sec05 .txtbox{width: 100%; margin-bottom: 20px; }
    .sub01 .sec05 .sw-sec05{width: 100%; }
    .sub01 .sec05 .txtbox .sec04-paging{justify-content: flex-end; position: absolute; right: 10px; bottom: 0; height: 10px;}
}
@media all and (max-width:768px){
    .sub01 .sec05 .txtbox{}
}