.visual{background-image: url(../img/sub10/visual.png); }
@media all and (max-width:1200px){}
@media all and (max-width:1024px){}
@media all and (max-width:768px){}


.sec01{padding: 12vw 0 16.5vw;}
.sec01 .inner{display: flex; justify-content: space-between; align-items: flex-start; gap: 6vw;}
.sec01 .txtbox{padding-top: 4rem;}
.sec01 .txtbox h2{width: max-content; }
.sec01 .txtbox h3{}
.sec01 .imgbox{}
.sec01 .imgbox img{}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sec01{padding: 80px 0;}
    .sec01 .top{gap: 30px;}
}
@media all and (max-width:768px){
    .sec01 .inner{flex-direction: column; gap: 30px;}
    .sec01 .txtbox{padding-top: 0;}
    .sec01 .txtbox h3{width: auto;}
    .sec01 .imgbox{width: 100%; max-width: 400px;}
    .sec01 .imgbox img{width: 100%;}
}



.sec02{padding-bottom: 14vw; text-align: center; }
.sec02 .inner{max-width: 1500px;}
.sec02 h2{margin-bottom: 4.4vw; display: inline-block; padding-bottom: 1rem; border-bottom: 1px solid #020910;}
.sec02 ul{gap: 20px; display: flex; align-items: flex-start; justify-content: space-between;}
.sec02 ul li{flex: 1; max-width: 470px;}
.sec02 ul li:nth-child(1){padding-top: 9vw;}
.sec02 ul li:nth-child(2){}
.sec02 ul li:nth-child(3){padding-top: 5vw;}
.sec02 ul li .imgbox{margin-bottom: 2vw; width: 100%;}
.sec02 ul li .imgbox img{width: 100%;}
.sec02 ul li p{font-size: 3rem;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sec02{padding-bottom: 80px;}
    .sec02 h2{margin-bottom: 40px;}
    .sec02 ul li p{font-size: 18px;}
}
@media all and (max-width:768px){
    .sec02 h2{margin-bottom: 30px;}
    .sec02 ul{flex-wrap: wrap; gap: 30px;}
    .sec02 ul{gap: 30px 20px;}
    .sec02 ul li{flex: none; width: calc((100% - 20px) / 2);}
    .sec02 ul li:nth-child(1){padding-top: 0; order: 3;}
    .sec02 ul li:nth-child(2){order: 1;}
    .sec02 ul li:nth-child(3){padding-top: 0; order: 2;}
}
@media all and (max-width:500px){
    .sec02 ul li{width: 100%;}
}



.sec03{padding: 9.5vw 0 12vw;}
.sec03 .inner{}
.sec03 .title{color: #fff; padding-bottom: 7vw;}
.sec03 .title h2{padding-bottom: 3rem;}
.sec03 .title h3{font-size: 3.8rem;}
.sec03 .item-wrap{display: flex; flex-direction: column; gap: 5rem; font-size: 3rem;}
.sec03 .item-wrap .item{display: flex; justify-content: space-between; gap: 3rem;}
.sec03 .item-wrap .item h4{flex: 1;}
.sec03 .item-wrap .item h4 b{font-size: 3.5rem; font-weight: 600;}
.sec03 .item-wrap .item h4 .second{display: none;}
.sec03 .item-wrap .item .right{width: 87rem;}
.sec03 .item-wrap .item .box{width: 100%; border-radius: 5rem; overflow: hidden; background: #fff;}
.sec03 .item-wrap .item .box .top{padding: 0 2vw; display: flex; background: #424242; color: #fff; height: 11rem; align-items: center; justify-content: space-between;}
.sec03 .item-wrap .item .box .top h5{font-size: 3.6rem; font-weight: 600; padding-left: 2vw;; width: 50%;}
.sec03 .item-wrap .item .box .top h5:nth-child(2){padding: 0;}
.sec03 .item-wrap .item .box .btm{padding: 1vw 2vw;}
.sec03 .item-wrap .item .box .btm .txt{border-bottom: 1px solid #424242; display: flex; padding: 1vw 0; justify-content: space-between;}
.sec03 .item-wrap .item .box .btm .txt:nth-child(1){}
.sec03 .item-wrap .item .box .btm .txt:nth-child(2){border: none;}
.sec03 .item-wrap .item .box .btm .txt h6{width: 50%; padding-top: 1rem; padding-left: 2vw; padding-top: 1rem;}
.sec03 .item-wrap .item .box .btm .txt p{width: 50%;}
.sec03 .item-wrap .item .box .btm .txt p b{color: #ff8316; font-size: 5rem; font-family: 'GmarketSansBold';}
.sec03 .item-wrap .item .box .btm .txt p span{font-size: 2.4rem; letter-spacing: -2px;}
.sec03 .item-wrap .item .btm-txt{font-size: 2.5rem; padding-top: 2.5vw; text-align: center;}
@media all and (max-width:1400px){
    .sec03 .item-wrap .item h4 .second{display: block;}
    .sec03 .item-wrap .item .right{width: 730px;}
    .sec03 .item-wrap .item .box .top h5,
    .sec03 .item-wrap .item .box .btm .txt h6{width: 280px; padding-left: 0;}
    .sec03 .item-wrap .item .box .top h5:nth-child(2),
    .sec03 .item-wrap .item .box .btm .txt p{width: calc(100% - 280px);}
}
@media all and (max-width:1200px){
    .sec03 .item-wrap .item .right{width: 730px;}
    .sec03 .item-wrap .item .box .top h5,
    .sec03 .item-wrap .item .box .btm .txt h6{width: 280px;}
    .sec03 .item-wrap .item .box .top h5:nth-child(2),
    .sec03 .item-wrap .item .box .btm .txt p{width: calc(100% - 280px);}
}
@media all and (max-width:1024px){
    .sec03{padding: 80px 0;}
    .sec03 .title h2{padding-bottom: 10px;}
    .sec03 .title h3{font-size: 28px;}
    .sec03 .title{padding-bottom: 40px;}
    .sec03 .item-wrap{font-size: 24px;}
    .sec03 .item-wrap .item{flex-direction: column;}
    .sec03 .item-wrap .item .right{width: 100%;}
    .sec03 .item-wrap .item h4 .second{display: none;}
    .sec03 .item-wrap .item .box .top{height: 70px; padding: 0 30px;}
    .sec03 .item-wrap .item .box .top h5{font-size: 24px;}
    .sec03 .item-wrap .item .box .top h5,
    .sec03 .item-wrap .item .box .btm .txt h6,
    .sec03 .item-wrap .item .box .top h5:nth-child(2),
    .sec03 .item-wrap .item .box .btm .txt p{width: 50%;}
    .sec03 .item-wrap .item .box .btm{padding: 10px 30px;}
    .sec03 .item-wrap .item .box .btm .txt p b{font-size: 30px;}
    .sec03 .item-wrap .item .btm-txt{font-size: 18px;}
}
@media all and (max-width:768px){
    .sec03 .title{padding-bottom: 20px;}
    .sec03 .title h3{font-size: 20px;}
    .sec03 .item-wrap{font-size: 18px;}
    .sec03 .item-wrap .item .box{border-radius: 20px;}
    .sec03 .item-wrap .item .box .top h5{font-size: 20px;}
    .sec03 .item-wrap .item .box .top,
    .sec03 .item-wrap .item .box .btm{padding: 10px 20px;}
    .sec03 .item-wrap .item .btm-txt{font-size: 16px;}
    .sec03 .item-wrap .item .box .top h5:nth-child(1),
    .sec03 .item-wrap .item .box .btm .txt h6{width: 100px;}
    .sec03 .item-wrap .item .box .btm .txt h6{padding-top: 0;}
    .sec03 .item-wrap .item .box .btm .txt{padding: 10px 0;}
    .sec03 .item-wrap .item .box .top h5:nth-child(2),
    .sec03 .item-wrap .item .box .btm .txt p{width: calc(100% - 120px);}
    .sec03 .item-wrap .item .box .btm .txt p span{font-size: 16px;}
    .sec03 .item-wrap .item .box .btm .txt p b{font-size: 24px;}
}


.sec04{padding: 16vw 0 13vw;}
.sec04-02{background: #f0f0f0; padding: 13vw 0 16vw;}
.sec04 .inner{}
.sec04 .gradient-text{display: flex; gap: 1rem; padding-bottom: 5vw; flex-wrap: wrap;}
.sec04 ul{display: flex; flex-direction: column; position: relative;}
.sec04 ul li{display: flex; gap: 4vw; position: relative; padding-bottom: 8.5vw;}
.sec04 ul li:last-child{padding-bottom: 0;}
.sec04 ul li:not(:last-child):after{content:''; position:absolute; top:20px; left: 7rem; width:1px; height:100%; background:#ff8c20; z-index: 0;}
.sec04-02 ul li:not(:last-child):after{background: #fff;}
.sec04 ul li span{font-family: 'GmarketSansMedium'; font-size: 5rem; width: 14rem; height: 14rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(90deg, #ff8316 0%, #ff9335 100%); border-radius: 100px; color: #fff; padding-top: 1rem; line-height: 1; position: relative; z-index: 1;}
.sec04-02 ul li span{background: #fff; box-shadow: 1px 1px 10px 5px rgba(0, 0, 0, 0.14); color: #ff8316;}
.sec04 ul li .contbox{padding-top: 4rem; width: calc(100% - 14rem - 4vw);}
.sec04 ul li .contbox h2{margin-bottom: 3rem;}
.sec04 ul li .contbox h2 i{font-size: 1.6rem;}
.sec04 ul li .contbox h3{font-size: 3.4rem;}
.sec04 ul li .contbox .imgbox{margin-top: 6rem; gap: 4rem; display: flex; flex-wrap: wrap;}
.sec04 ul li .contbox .imgbox img{width: 100%;}
.sec04 ul li .contbox .imgbox2 img{width: calc((100% - 4rem) / 2);;}
@media all and (max-width:1200px){
    
}
@media all and (max-width:1024px){
    .sec04,
    .sec04-02{padding: 80px 0;}
    .sec04 ul li {gap: 30px;}
    .sec04 ul li:not(:last-child):after{left: 50px;}
    .sec04 ul li span{width: 100px; height: 100px;}
    .sec04 ul li .contbox h2{}
    .sec04 ul li .contbox h3{font-size: 20px;}
}
@media all and (max-width:768px){
    .sec04 .gradient-text{padding-bottom: 30px;}
    .sec04 ul li{gap: 15px;}
    .sec04 ul li:not(:last-child):after{left: 25px;}
    .sec04 ul li span{width: 50px; height: 50px; font-size: 24px; padding-top: 5px;}
    .sec04 ul li .contbox{padding-top: 10px; width: calc(100% - 65px);}
    .sec04 ul li .contbox h2{margin-bottom: 10px; font-size: 22px;}
    .sec04 ul li .contbox h3{font-size: 16px;}
    .sec04 ul li .contbox .imgbox{margin-top: 20px; gap: 20px;}
    .sec04 ul li .contbox .imgbox2 img{width: calc((100% - 20px) / 2);}
}

@media all and (max-width:500px){
    .sec04 ul li .contbox .imgbox2 img{width: 100%;}
}