#main {}
#main .cont {width: 77.8%;}
#main .commTitle {gap: 1.6rem;}
#main .commTitle .ico {width: 9rem;}
#main .commTitle .txt {}
#main .commTitle .txt .tit {padding-bottom: 0.5rem;}
#main .commTitle .txt .wrt {color: #898789}

@media all and (max-width: 880px){
    #main .cont {width: 94.44%}
    #main .commTitle {gap: 0.2rem;}
    #main .commTitle .ico {width: 5.7rem;}
    #main .commTitle .txt .tit {font-size: 2.4rem; padding-bottom: 0.3rem;}
    #main .commTitle .txt .wrt {font-size: 1.2rem;}
}

.s1 {background: url('../images/s1_visual.jpg') no-repeat bottom/cover;}
.s1 .inner {padding: 11rem 0 20rem;}
.s1 .cont {width: 53.12% !important;}
.s1 .cont .subt {padding: 0.9rem 2.8rem; border-radius: 17px; background: #171C2E}
.s1 .cont .tit {margin: 1.9rem 0 6.4rem;}
.s1 .cont .imgArea {width: 18.4rem; height: 37rem; background: #fff; border-radius: 15px; top: 1rem; right: 0.5rem;}
.s1 .cont .imgArea .bgImg {width: 17.9rem;}
.s1 .cont .slideCont {height: 100%; justify-content: center;}
.s1 .cont .slideCont .slideTit {font-weight: 600; margin-bottom: 3rem;}
.s1 .cont .slideCont .s1_swiper {overflow: hidden; width: 100%}
.s1 .cont .slideCont .s1_swiper .slideInner {}
.s1 .cont .slideCont .s1_swiper .slideInner .item {width: 5rem;}
.s1 .cont .slideCont .s1_swiper .slideInner .txtArea {margin-top: 1rem;}
.s1 .cont .slideCont .s1_swiper .slideInner .txtArea .itemName {}
.s1 .cont .slideCont .s1_swiper .slideInner .txtArea .itemCost {padding: 0.6rem 0 1rem;}
.s1 .cont .slideCont .s1_swiper .slideInner .txtArea .itemCost span {}
.s1 .cont .slideCont .s1_swiper .slideInner .star {width: 7rem;}
.s1 .cont .slideCont .s1_swiper .s1_prev,
.s1 .cont .slideCont .s1_swiper .s1_next {top: 32%;}
.s1 .cont .slideCont .s1_swiper .s1_prev::after,
.s1 .cont .slideCont .s1_swiper .s1_next::after {font-size: 1.5rem; color: #525252;}
.s1 .cont .slideCont .s1_swiper .s1_prev {left: 2rem;}
.s1 .cont .slideCont .s1_swiper .s1_next {right: 2rem;}
.s1 .cont .slideCont .slideLinkBtn {background: #5A3FFF; font-size: 1.8rem; font-weight: bold; padding: 0.4rem 1.2rem; border-radius: 100px; margin-top: 2rem;}
.s1 .cont .prg {color: #E5C338;}

@media all and (max-width: 880px){
    .s1 {background: url('../images/s1_visual.jpg') no-repeat left/cover;}
    .s1 .inner {padding: 6rem 0 10rem;}
    .s1 .cont {display: flex; flex-direction: column; align-items: center; width: 100% !important;}
    .s1 .cont .tit {text-align: center; font-size: 3.6rem; margin-bottom: 5.7rem;}
    .s1 .cont .imgArea {position: relative; border-radius: 1.5rem; top: auto; right: auto;}
    .s1 .cont .prg {text-align: center; font-size: 2.2rem; margin-top: 5rem; line-height: 2;}
    .s1 .cont .prg i {display: none}
}

.s2 {}
.s2 .inner {padding: 5.6rem 0 4rem;}
.s2 .cont {}
/* .s2 .cont .commTitle {opacity: 0; bottom: -5rem}
.s2 .cont .commTitle.trigger_top_on {opacity: 1; bottom: 0} */
.s2 .cont .lst {gap: 1.9rem; margin: 3.7rem auto 3.3rem; max-width: 82rem;}
.s2 .cont .lst li {width: calc((100% - 1.9rem) / 2); background: #121212; border-radius: 17px; height: 16rem}
.s2 .cont .lst li .lstInner {padding-left: 5rem; gap: 1.4rem;}
.s2 .cont .lst li .lstInner .ico {width: 6.6rem;}
.s2 .cont .lst li .lstInner .txt {}
.s2 .cont .lst li .lstInner .txt .tit {padding-bottom: 1rem;}
.s2 .cont .lst li .lstInner .txt .wrt {color: #898789;}
.s2 .cont .btnArea {gap: 1.9rem;}
.s2 .cont .btnArea a {width: 24rem; padding: 1.8rem 0; border-radius: 30px; background: #272727}
.s2 .cont .btnArea a:hover {background: #4e4e4e}

/* .s2 .cont .lst li {opacity: 0; transition: 1s; bottom: -5rem;}
.s2 .cont .lst li.on {opacity: 1; bottom: 0;} */

.s2 .cont .lst li:hover {bottom: 1rem;}

@media all and (max-width: 880px){
    .s2 .inner {padding: 4.4rem 0 4.2rem;}
    .s2 .cont .lst {margin-top: 1.6rem; gap: 0.4rem; max-width: 90%;}
    .s2 .cont .lst li {width: 100%; height: 10rem; border-radius: 1.7rem;}
    .s2 .cont .lst li .lstInner {padding-left: 4rem;}
    .s2 .cont .lst li .lstInner .ico {width: 5.8rem;}
    .s2 .cont .btnArea {flex-direction: column; gap: 1rem;}
    .s2 .cont .btnArea a {padding: 1.1rem 0; width: 20rem;}
}

.s3 {background: #EDEDED;}
.s3 .inner {padding: 4rem 0;}
.s3 .cont {}
.s3 .cont .lst {gap: 2.4rem; margin-top: 2rem;}
.s3 .cont .lst li {padding: 3.4rem 0; width: calc((100% - 2.4rem) / 2); border-radius: 17px;}
.s3 .cont .lst li .tit {padding-bottom: 3rem;}
.s3 .cont .lst li .img {margin-bottom: 1.2rem;}
.s3 .cont .lst li .linkBtn {margin-top: auto; background: #272727; border-radius: 10px; width: 24rem; overflow: hidden;}
.s3 .cont .lst li .linkBtn a {padding: 1.6rem 0; gap: 0.6rem;}
.s3 .cont .lst li .linkBtn a:hover {background: #4e4e4e;}

.s3 .cont .lst li .s3_swiper {max-width: 36.3rem; margin-bottom: 1.2rem; overflow: hidden;}
.s3 .cont .lst li .s3_swiper .slide {gap: 1rem;}
.s3 .cont .lst li .s3_swiper .slide .imgArea {width: 40%;}
.s3 .cont .lst li .s3_swiper .slide .txtArea {padding-top: 1rem;}
.s3 .cont .lst li .s3_swiper .slide .txtArea .itemName {}
.s3 .cont .lst li .s3_swiper .slide .txtArea .itemWrt {color: #5A3FFF; border: 0px solid #000; padding: 0.1rem 0.1rem; border-radius: 1.4rem; margin: 1.8rem 0 1rem;}
.s3 .cont .lst li .s3_swiper .slide .txtArea .itemCost {}

.s3 .cont .lst li:nth-child(1) .img {max-width: 36.3rem;}
.s3 .cont .lst li:nth-child(2) .img {max-width: 20.6rem;}

.s3 .cont .lst li:nth-child(1) .linkBtn a img {width: 1.3rem;}
.s3 .cont .lst li:nth-child(2) .linkBtn a img {width: 1.6rem;}

.s3 .cont .lst li {opacity: 0; transition: 1s; bottom: -5rem;}
.s3 .cont .lst li.on {opacity: 1; bottom: 0;}

.s3 .cont .lst li:hover {box-shadow: 0 5px 2rem rgba(0,0,0,0.3)}

@media all and (max-width: 880px){
    .s3 .inner {padding: 3rem 0 3.6rem;}
    .s3 .cont .lst {flex-direction: column; gap: 0.8rem; max-width: 95%; margin: 3rem auto 0;}
    .s3 .cont .lst li {width: 100%; padding: 2.2rem 0 2.8rem;}
    .s3 .cont .lst li .tit {padding-bottom: 2.4rem;}
    .s3 .cont .lst li .linkBtn {width: 22rem;}
    .s3 .cont .lst li .linkBtn a {padding: 1rem 0;}

    .s3 .cont .lst li .s3_swiper .slide {max-width: 90%; margin: 0 auto; justify-content: center;}

    .s3 .cont .lst li:nth-child(1) .img {max-width: 24rem;}
    .s3 .cont .lst li:nth-child(2) .img {max-width: 17rem;}
}

.s4 {}
.s4 .inner {padding: 5rem 0 10rem;}
.s4 .cont {}
.s4 .cont .lst {gap: 3rem; width: 81rem; margin: 4rem auto 0;}
.s4 .cont .lst li {width: calc((100% - 9rem) / 4); background: #F3F3F3; border-radius: 5px; padding-top: 1.6rem; height: 19rem;}
.s4 .cont .lst li .step {color: #707070;}
.s4 .cont .lst li .tit {padding: 1rem 0 1.3rem;}
.s4 .cont .lst li .ico {width: 7.3rem;}

.s4 .cont .lst li {opacity: 0; transition: 1s; bottom: -5rem;}
.s4 .cont .lst li.on {opacity: 1; bottom: 0;}

.s4 .cont .lst li:hover {bottom: 1rem;}

@media all and (max-width: 880px){
    .s4 .cont {max-width: 95%;}
    .s4 .cont .lst {width: 100%; gap: 1rem; flex-wrap: wrap;}
    .s4 .cont .lst li {width: calc((100% - 1rem) / 2);}

}

#footer {background: #121212;}
#footer .ftInner {padding: 2.8rem 0 2.2rem; width: 77.8%; margin: 0 auto;}
#footer .ftInner .ftMenu {gap: 1rem;}
#footer .ftInner .ftInfo {line-height: 1.8; margin-top: 2.4rem;}
#footer .ftInner a {text-decoration: underline;}

@media all and (max-width: 880px){
    #footer .ftInner {max-width: 90%;}
    #footer .ftInner .ftMenu {}
}