/****************** VISUAL **/
#main .mVisual {}
#main .mVisual .mVisualSwiper {overflow: hidden;}
#main .mVisual .mVisualSwiper .imgArea {width: 100%; height: 100vh;}
#main .mVisual .mVisualSwiper .imgArea img {width: 100%; height: 100%; object-fit: cover;}
#main .mVisual .mVisualSwiper .txtArea {top: 40%; max-width: 136.4rem;}
#main .mVisual .mVisualSwiper .txtArea .tit {line-height: 7.5rem;}

#main .mVisual .mainSlideBtn {max-width: 136.4rem; bottom: 30%; z-index: 10; gap: 18rem;}

#main .mVisual .mainVisualPrev,
#main .mVisual .mainVisualNext {position: relative; top: auto; left: auto; right: auto; width: 1.3rem; height: 1.7rem; margin: 0; z-index: 11}
#main .mVisual .mainVisualPrev::after,
#main .mVisual .mainVisualNext::after {display: none}
#main .mVisual .mainVisualPrev {background: url('../img/main/visual_slide_prev.svg') no-repeat center/contain}
#main .mVisual .mainVisualNext {background: url('../img/main/visual_slide_next.svg') no-repeat center/contain}

#main .mVisual .mainVisualPage {z-index: 12; top: 50%; left: 4%; transform: translateY(-50%); display: flex; align-items: center; gap: 1.5rem;}
#main .mVisual .mainVisualPage .swiper-pagination-bullet {width: 0.9rem; height: 0.9rem; border: 1px solid #fff; opacity: 1; background: transparent;}
#main .mVisual .mainVisualPage .swiper-pagination-bullet-active {width: 1.3rem; height: 1.3rem; background: #fff}
#main .mVisual .mainVisualPage .swiper-pagination-bullet-active.after {margin-left: 40px;}
#main .mVisual .mainVisualPage .swiper-pagination-bullet-active.before {margin-right: 40px;}
#main .mVisual .mainVisualPage .swiper-pagination-bullet-active.after::after {content: ''; display: block; position: absolute; width: 2.5rem; height: 1px; background: #fff; top: 48%; right: 27px;}
#main .mVisual .mainVisualPage .swiper-pagination-bullet-active.before::before {content: ''; display: block; position: absolute; width: 2.5rem; height: 1px; background: #fff; top: 48%; left: 27px;}

#main .mVisual .consultLink {border-radius: 63px; overflow: hidden; bottom: 7.8%; z-index: 9}
#main .mVisual .consultLink a {background: #53A74A; padding: 2.7rem 0; width: 36.9rem; gap: 1rem; transition: 0.2s;}
#main .mVisual .consultLink a:hover {background: #479c3e; gap: 1.6rem;}
#main .mVisual .consultLink a .ico {}


#main .mVisual .mVisualSwiper .txtArea {top: 50%; transition: 1s; opacity: 0}
#main .mVisual .mVisualSwiper .txtArea.on {top: 40%; opacity: 1}

@media all and (max-width: 920px){
    #main .mVisual .mVisualSwiper .txtArea {max-width: 88.4%;}
    #main .mVisual .mVisualSwiper .txtArea .tit {font-size: 4.5rem; line-height: 5.5rem;}
    #main .mVisual .mainSlideBtn {max-width: 88.4%; left: 50%; transform: translateX(-50%); bottom: 40%;}
}

/****************** S1 **/
#main .s1 {}
#main .s1 .titArea {padding: 11.4rem 0 10rem;}
#main .s1 .titArea .tit {padding-bottom: 3.4rem; line-height: 6.5rem;}
#main .s1 .titArea .wrt {}
#main .s1 .lstArea {}
#main .s1 .lstArea .lst {flex: 1; height: 69.5rem; position: relative; transition: 1s;}
#main .s1 .lstArea .lst::after {content: ''; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.5); transition: 0.4s;}
#main .s1 .lstArea .lst .txt {z-index: 1;}
#main .s1 .lstArea .lst .txt .tit {}
#main .s1 .lstArea .lst .txt .subt {padding: 0; display: none; transition: 0.4s; opacity: 0}
#main .s1 .lstArea .lst .txt .wrt {line-height: 3rem; display: none; transition: 0.4s; opacity: 0}

#main .s1 .lstArea .lst.on {flex: 1.5}
#main .s1 .lstArea .lst.on::after {background: rgba(0,0,0,0.7);}
#main .s1 .lstArea .lst.on .txt .subt {display: block;}
#main .s1 .lstArea .lst.on .txt .wrt {display: block;}
#main .s1 .lstArea .lst.active .txt .subt {opacity: 1; padding: 2rem 0 4.6rem;}
#main .s1 .lstArea .lst.active .txt .wrt {opacity: 1;}

#main .s1 .lstArea .lst1 {background: url('../img/main/s1_img_1.png') no-repeat center/cover}
#main .s1 .lstArea .lst2 {background: url('../img/main/s1_img_2.png') no-repeat center/cover}
#main .s1 .lstArea .lst3 {background: url('../img/main/s1_img_3.png') no-repeat center/cover}
#main .s1 .lstArea .lst4 {background: url('../img/main/s1_img_4.png') no-repeat center/cover}
#main .s1 .lstArea .lst5 {background: url('../img/main/s1_img_5.png') no-repeat center/cover}

@media all and (max-width: 920px){
    #main .s1 .titArea {padding: 11rem 0 9.5rem;}
    #main .s1 .titArea .tit {font-size: 4rem; padding-bottom: 3rem; line-height: 5.5rem;}
    #main .s1 .titArea .wrt  {font-size: 2rem; line-height: 3.5rem;}
    #main .s1 .lstArea {flex-direction: column;}
    #main .s1 .lstArea .lst {height: 45rem; flex: auto}
    #main .s1 .lstArea .lst::after {background: rgba(0,0,0,0.7)}
    #main .s1 .lstArea .lst .txt .subt {display: block; opacity: 1; padding: 2rem 0;}
    #main .s1 .lstArea .lst .txt .wrt {line-height: 3rem; display: block; opacity: 1}
    #main .s1 .lstArea .lst.on {flex: 1;}
    #main .s1 .lstArea .lst.active .txt .subt {padding: 2rem 0}
}

/****************** S2 **/
#main .s2 {background: url('../img/main/s2_bg.jpg') no-repeat center/cover;}
#main .s2 .inner {padding: 13rem 0 11.7rem;}
#main .s2 .titArea {margin-bottom: 6.8rem;}
#main .s2 .titArea .tit {padding-bottom: 1.4rem;}
#main .s2 .titArea .wrt {}
#main .s2 .lstArea {gap: 1rem 2rem;}
#main .s2 .lstArea li {width: calc((100% - 6rem) / 4);}

#main .s2 .lstArea li {opacity: 0; top: 4rem; transition: 1s;}
#main .s2 .lstArea li.on {opacity: 1; top: 0}

@media all and (max-width: 920px){
    #main .s2 .inner {padding: 10rem 0;}
    #main .s2 .titArea .tit {font-size: 4rem; padding-bottom: 1.6rem;}
    #main .s2 .lstArea {gap: 1.4rem 1.75rem; max-width: 90%; margin: 0 auto}
    #main .s2 .lstArea li {width: calc((100% - 1.75rem) / 2); border: 1px solid #eee;}
}

/****************** S3 **/
#main .s3 {background: url('../img/main/s3_bg.jpg') no-repeat; background-position: center bottom; background-size: 100%; background-attachment: fixed;}
#main .s3 .inner {padding: 16rem 0;}
#main .s3 .cont {}
#main .s3 .titArea {width: 30%;}
#main .s3 .titArea #main .subt {padding-bottom: 0.8rem;}
#main .s3 .titArea .tit {padding-bottom: 4.9rem;}
#main .s3 .titArea .img {}
#main .s3 .lstArea {width: calc(70% - 6.6rem)}
#main .s3 .lstArea li {border: 2px solid #fff; border-right: 0; border-left: 0;}
#main .s3 .lstArea li + li {border-top: 0;}
#main .s3 .lstArea li .tit {padding: 4rem 0 4rem 0.9rem;}
#main .s3 .lstArea li .tit .ico {transition: 0.4s;}
#main .s3 .lstArea li .tit .ico.on {transform: rotate(180deg);}
#main .s3 .lstArea li .wrt {padding: 4.5rem 0 4.5rem 4rem; border-top: 1px solid rgba(255,255,255,0.5); line-height: 3rem; display: none}
#main .s3 .lstArea li .wrt > div {gap: 0.5rem;}

@media all and (max-width: 920px){
    #main .s3 {background: url('../img/main/s3_bg_mo.jpg') no-repeat; background-position: center bottom; background-size: 100%; background-attachment: scroll;}
    #main .s3 .inner {padding: 11rem 0 13rem;}
    #main .s3 .cont {flex-direction: column; align-items: center;}
    #main .s3 .titArea {width: 100%; text-align: center;}
    #main .s3 .titArea .tit {padding: 1.8rem 0 6.5rem; font-size: 4rem;}
    #main .s3 .lstArea {width: 87.5%;}
    #main .s3 .lstArea li .tit {font-size: 2.5rem; padding: 4rem 0;}
    #main .s3 .lstArea li .tit .ico {width: 2.8rem; right: 2rem;}
    #main .s3 .lstArea li .wrt {padding: 3rem 0;}
}

/****************** S4 **/
#main .s4 {}
#main .s4 .inner {}
#main .s4 .imgArea {width: 50%; background: url('../img/main/s4_img.jpg') no-repeat center/cover; padding: 16rem 0}
#main .s4 .imgArea .txt {max-width: 66rem; margin-left: auto}
#main .s4 .imgArea .txt .tit {padding-bottom: 3rem;}
#main .s4 .imgArea .txt .wrt {color: #D5D5D5; line-height: 3rem}
#main .s4 .formArea {padding: 16rem 0; width: 50%;}
#main .s4 .formCont {padding-left: 7.3rem; max-width: 66rem; margin-right: auto}
#main .s4 .formCont .formLst {gap: 6rem 4.7rem}
#main .s4 .formCont .formLst li {width: calc((100% - 4.7rem) / 2); border-bottom: 1px solid #566869; padding-bottom: 1.5rem;}
#main .s4 .formCont .formLst li label {min-width: 10.5rem; min-width: 10.5rem;}
#main .s4 .formCont .formLst li input {width: 100%; box-shadow: none; border: 0}
#main .s4 .formCont .formCheck {gap: 3rem; padding: 6rem 0;}
#main .s4 .formCont .formCheck li {color: #666666}
#main .s4 .formCont .formCheck li input {display: none;}
#main .s4 .formCont .formCheck li input + label {padding-left: 2.8rem; background: url('../img/main/s4_check_off.png') no-repeat; background-size: 2.4rem 2.4rem; background-position: left center;}
#main .s4 .formCont .formCheck li input:checked + label {background: url('../img/main/s4_check_on.png') no-repeat; background-size: 2.4rem 2.4rem; background-position: left center;}
#main .s4 .formCont .formTxt {}
#main .s4 .formCont .formTxt .tit {padding-bottom: 2.2rem;}
#main .s4 .formCont .formTxt textarea {box-shadow: none; border-radius: 5px; border: 1px solid #666666; width: 100%; height: 24rem}
#main .s4 .formCont .formTxt textarea::placeholder {font-family: "Pretendard", sans-serif;}
#main .s4 .formCont .submitBtn {background: #0F6641; padding: 2rem 0; margin-top: 4rem;}

@media all and (max-width: 920px){
    #main .s4 .inner {flex-direction: column;}
    #main .s4 .imgArea {width: 100%; padding: 11rem 0 13rem;}
    #main .s4 .imgArea .txt {max-width: 87.5%;}
    #main .s4 .formArea {width: 100%; padding: 7rem 0 10rem;}
    #main .s4 .formCont {padding: 0; max-width: 87.5%; margin: 0 auto;}
    #main .s4 .formCont .formLst {gap: 5rem 2rem;}
    #main .s4 .formCont .formLst li {width: calc((100% - 2rem) / 2);}
    #main .s4 .formCont .formCheck {padding: 5.5rem 0; gap: 1.4rem; justify-content: space-between;}
}