#header {z-index: 9999}
#header .pcHeader {background: #212121}
#header .pcHeader .inner {padding: 3.5rem 0; max-width: 155.8rem; transition: 0.4s;}
#header .pcHeader .logo {}
#header .pcHeader .logo a {}
#header .pcHeader .gnb {gap: 5rem; margin-left: 14.5rem;}
#header .pcHeader .gnb li {}
#header .pcHeader .gnb li a {}
#header .pcHeader .call {margin-left: auto}
#header .pcHeader .call a {}

#header .pcHeader.act .inner {padding: 2.5rem 0;}

@media all and (max-width: 880px){
    #header {}
    #header .moHeader {}
    #header .moHeader .moHead {background: #212121; z-index: 1;}
    #header .moHeader .moHead .inner {max-width: 36.6rem; padding: 2rem 0; margin: 0 auto; transition: 0.4s;}
    #header .moHeader .moHead .logo {width: 18.5rem;}
    #header .moHeader .moHead .menuBtn {width: 3rem}
    #header .moHeader .menuWrap {width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.6); display: none}
    #header .moHeader .menuArea {background: #fff; width: 30rem; top: 0; right: -20rem; opacity: 0; position: absolute; height: 100%; transition: 0.2s;}
    #header .moHeader .menuArea .inner {padding: 0 2.9rem; margin-top: 7.8rem; padding-top: 5.7rem;}
    #header .moHeader .menuArea .logo {width: 18.4rem}
    #header .moHeader .menuArea .gnb {margin-top: 4.4rem;}
    #header .moHeader .menuArea .gnb li {}
    #header .moHeader .menuArea .gnb li + li {margin-top: 3rem;}
    #header .moHeader .menuArea .gnb li a {}
    #header .moHeader .menuArea .close {width: 3.4rem; top: 0.4rem; right: 1rem;}

    #header .moHeader .menuArea.on {right: 0; opacity: 1;}
}

#float {z-index: 99; bottom: 6rem; right: 5.7rem;}
#float .cont {}
#float .menus {}
#float .menus .lst {background: #007564}
#float .menus .lst a {width: 9.6rem; height: 9.6rem; justify-content: center; gap: 0.5rem;}
#float .menus .lst a img {}
#float .top {margin-top: 3rem; filter: drop-shadow(0 0.3rem 0.6rem rgba(0,0,0,0.16));}
#float .moCont {display: none;}

@media all and (max-width: 880px){
    #float {z-index: 99; bottom: auto; right: 0; top: 37%; transform: translateY(-50%);}
    #float .cont {display: none;}
    #float .moCont {display: flex; flex-direction: column; align-items: center; background: #fff; padding: 1.7rem 1.6rem; border-radius: 2rem 0 0 2rem; filter: drop-shadow(0 0 1rem rgba(0,0,0,0.2));}
    #float .moCont .lst {}
    #float .moCont .lst + .lst {margin-top: 1.4rem;}
}

#footer {background: #212121;}
#footer .inner {padding: 5.5rem 0; gap: 4rem;}
#footer .ftLogo {width: 17.5rem;}
#footer .ftTxt {}
#footer .ftTxt .links {margin-bottom: 1rem; gap: 2rem; }
#footer .ftTxt .links li {}
#footer .ftTxt .links li a {}
#footer .ftTxt .txt {color: #BBBBBB; line-height: 2.4rem;}

@media all and (max-width: 880px){
    #footer {}
    #footer .inner {max-width: 37rem; margin: 0 auto; flex-direction: column; gap: 2rem; align-items: flex-start;}
    #footer .ftLogo {}
    #footer .ftTxt {}
    #footer .ftTxt .links {font-size: 1.6rem; gap: 1.5rem;}
    #footer .ftTxt .links li {}
    #footer .ftTxt .links li a {}
    #footer .ftTxt .txt {}
}

#modal {z-index: 99999; display: none}
#modal .bg {background: rgba(0,0,0,0.6); cursor: pointer}
#modal .box {height: 90%; width: 88rem;}
#modal .box .inner {height: 100%; overflow-y: scroll;}
#modal .box .close {top: 2rem; right: 1rem; width: 5.8rem; cursor: pointer;}

@media all and (max-width: 880px){
    #modal {}
    #modal .bg {}
    #modal .box {height: auto; width: 88%;}
    #modal .box .inner {max-height: 100%; width: 100%}
    #modal .box .close {width: 3rem; top: 1rem; right: 0.1rem;}
}

#wrap {overflow: hidden;}

#s1 {}
#s1 .s1Swiper {overflow: hidden;}
#s1 .s1Swiper .swiper-slide {}
#s1 .s1Swiper .swiper-slide .img {}
#s1 .s1Swiper .swiper-slide img {}
#s1 .s1Swiper .swiper-slide-active img {}
#s1 .s1Swiper .util {bottom: 10rem; color: #fff; z-index: 1; gap: 10rem; font-size: 1.6rem; font-weight: 500; align-items: center;}
#s1 .s1Swiper .util .s1prev {}
#s1 .s1Swiper .util .s1next {}
#s1 .s1Swiper .util .s1pg {bottom: 0; position: relative; width: auto;}
#s1 .s1Swiper .txtAreaA {padding-left: 28.4rem; padding-bottom: 2rem;}
#s1 .s1Swiper .txtAreaA .subt {padding-bottom: 2.4rem;}
#s1 .s1Swiper .txtAreaA .tit {}
#s1 .s1Swiper .txtAreaB {max-width: 138rem; justify-content: space-between; left: 50%; transform: translate(-50%, -50%);}
#s1 .s1Swiper .txtAreaB::before {content: ''; display: block; position: absolute; width: 40.6rem; height: 1px; background: #fff; left: 50%; top: 50%; transform: translateX(-50%);}
#s1 .s1Swiper .txtAreaB .txtBox {}
#s1 .s1Swiper .txtAreaB .txtBox .tit {padding-bottom: 2.9rem;}
#s1 .s1Swiper .txtAreaB .txtBox .wrt {}
#s1 .s1Swiper .txtAreaB .txtBox01 {}
#s1 .s1Swiper .txtAreaB .txtBox02 {text-align: right}
#s1 .lstArea {bottom: 15.5rem; left: 7.5rem; z-index: 1}
#s1 .lstArea li {border-radius: 3rem; overflow: hidden;}
#s1 .lstArea li + li {margin-top: 1.2rem;}
#s1 .lstArea li a {padding: 1.5rem 3.2rem;}
#s1 .lstArea li a span {display: inline-block; min-width: 11.6rem;}
#s1 .lstArea li.lst1 {background: #D8FFEA}
#s1 .lstArea li.lst2 {background: #9FFFC6}
#s1 .lstArea li.lst3 {background: #007564;}
#s1 .lstArea li.lst3 span {color: #fff;}
#s1 .lstArea li.lst3 img {}

@media all and (max-width: 880px){
    #s1 {}
    #s1 .s1Swiper {}
    #s1 .s1Swiper .swiper-slide {}
    #s1 .s1Swiper .util {bottom: 3%;}
    #s1 .s1Swiper .util .s1prev {}
    #s1 .s1Swiper .util .s1next {}
    #s1 .s1Swiper .util .s1pg {}
    #s1 .s1Swiper .txtAreaA {top: auto; transform: none; bottom: 24%; padding: 0; text-align: center;}
    #s1 .s1Swiper .txtAreaA .subt {padding-bottom: 1.6rem;}
    #s1 .s1Swiper .txtAreaA .tit {font-size: 4.2rem;}
    #s1 .s1Swiper .txtAreaB {flex-direction: column; max-width: 84.18%; gap: 8.3rem; top: auto; transform: translateX(-50%); bottom: 26%; left: 50%;}
    #s1 .s1Swiper .txtAreaB::before {display: none;}
    #s1 .s1Swiper .txtAreaB .txtBox {}
    #s1 .s1Swiper .txtAreaB .txtBox .tit {font-size: 4rem; padding-bottom: 2.4rem;}
    #s1 .s1Swiper .txtAreaB .txtBox .wrt {font-size: 1.4rem;}
    #s1 .s1Swiper .txtAreaB .txtBox01 {}
    #s1 .s1Swiper .txtAreaB .txtBox02 {margin-left: auto;}
    #s1 .lstArea {display: flex; max-width: 38.2rem; left: 50%; transform: translateX(-50%); gap: 0.8rem; width: 100%; bottom: 8.6rem;}
    #s1 .lstArea li {width: calc((100% - 1.6rem) / 3); border-radius: 1.4rem;}
    #s1 .lstArea li + li {margin: 0}
    #s1 .lstArea li a {padding: 1.6rem 0 1.2rem; flex-direction: column;}
    #s1 .lstArea li a span {min-width: auto; font-size: 1.8rem;}
}

/* -----------------------------------------
   1. 이미지 스케일 모션 (ZOOM-OUT 효과)
----------------------------------------- */
/* 커진 이미지가 영역 밖으로 삐져나오지 않도록 부모 컨테이너에 overflow: hidden 처리 */
#s1 .s1Swiper .swiper-slide .img {
    overflow: hidden;
}
/* 기본 상태: 이미지를 1.2배 확대해 둠 */
#s1 .s1Swiper .swiper-slide .img img {
    transform: scale(1.2);
    transition: transform 0.8s ease; /* 비활성화 시 다시 부드럽게 커짐 */
    width: 100%;
}
/* 활성화 상태: 4초 동안 천천히 원래 크기(1)로 돌아옴 */
#s1 .s1Swiper .swiper-slide-active .img img {
    transform: scale(1);
    transition: transform 4s ease-out;
}

/* -----------------------------------------
   2. 텍스트 Reveal 모션 (마스크 벗겨짐 효과)
----------------------------------------- */
/* 기본 상태: 위치를 아래로 내리고 clip-path로 아랫부분을 잘라내어(마스크) 숨김 */
#s1 .s1Swiper .swiper-slide .txtAreaA .subt,
#s1 .s1Swiper .swiper-slide .txtAreaA .tit,
#s1 .s1Swiper .swiper-slide .txtAreaB .txtBox .tit,
#s1 .s1Swiper .swiper-slide .txtAreaB .txtBox .wrt {
    opacity: 0;
    transform: translateY(40px);
    clip-path: inset(100% 0 0 0); /* 핵심: 100% 가림 */
    transition: all 0.5s ease;
}

/* 활성화 상태: 전환 시간을 0.8s에서 1.2s로 늘려 더 천천히 스르륵 나타나게 수정 */
#s1 .s1Swiper .swiper-slide-active .txtAreaA .subt,
#s1 .s1Swiper .swiper-slide-active .txtAreaA .tit,
#s1 .s1Swiper .swiper-slide-active .txtAreaB .txtBox .tit,
#s1 .s1Swiper .swiper-slide-active .txtAreaB .txtBox .wrt {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1),
                clip-path 1.2s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 1.2s ease;
}

/* 텍스트가 순차적으로 나타나는 간격(딜레이)도 조금 더 여유롭게 늘림 */
#s1 .s1Swiper .swiper-slide-active .txtAreaA .subt { transition-delay: 0.2s; }
#s1 .s1Swiper .swiper-slide-active .txtAreaA .tit { transition-delay: 0.5s; }

#s1 .s1Swiper .swiper-slide-active .txtAreaB .txtBox01 .tit { transition-delay: 0.2s; }
#s1 .s1Swiper .swiper-slide-active .txtAreaB .txtBox01 .wrt { transition-delay: 0.5s; }
#s1 .s1Swiper .swiper-slide-active .txtAreaB .txtBox02 .tit { transition-delay: 0.8s; }
#s1 .s1Swiper .swiper-slide-active .txtAreaB .txtBox02 .wrt { transition-delay: 1.1s; }



#s2 {background: #212121;}
#s2 .inner {padding: 11rem 0 9rem; max-width: 144rem;}
#s2 .titArea {margin-bottom: 4rem;}
#s2 .titArea .subt {padding-bottom: 0.6rem;}
#s2 .titArea .tit {gap: 1.4rem;}
#s2 .titArea .tit img {}
#s2 .lstArea {gap: 2rem;}
#s2 .lstArea .lst {}
#s2 .lstArea .lst .bg {opacity: 0.2;}
#s2 .lstArea .lst .txts {width: 100%;}
#s2 .lstArea .lst .txts .tit {padding-bottom: 2.2rem;}
#s2 .lstArea .lst .txts .wrt {line-height: 3.4rem;}

@media all and (max-width: 880px){
    #s2 {}
    #s2 .inner {padding: 7rem 0 10rem; max-width: var(--innerMo);}
    #s2 .titArea {margin-bottom: 3.6rem;}
    #s2 .titArea .subt {font-size: 2.6rem; padding-bottom: 2.8rem;}
    #s2 .titArea .tit {font-size: 3.6rem; flex-direction: column; align-items: center;}
    #s2 .titArea .tit img {width: 4.3rem;}
    #s2 .lstArea {flex-direction: column;}
    #s2 .lstArea .lst {}
    #s2 .lstArea .lst .bg {}
    #s2 .lstArea .lst .txts {}
    #s2 .lstArea .lst .txts .tit {font-size: 3.4rem; padding-bottom: 1.5rem;}
    #s2 .lstArea .lst .txts .wrt {font-size: 1.8rem; line-height: 3rem;}
    #s2 .lstArea .lst .txts .wrt b {font-size: 2rem;}
}


#s3 {}
#s3 .inner {max-width: 177rem; margin: 0 auto; padding: 14rem 0 12rem;}
#s3 .titArea {margin-bottom: 6rem;}
#s3 .titArea .subt {}
#s3 .titArea .tit {padding: 1.2rem 0 1.5rem;}
#s3 .titArea .wrt {}
#s3 .lstArea {gap: 3rem;}
#s3 .lstArea .lst {}

#s3 .s3Swiper {overflow: hidden;}
#s3 .s3Swiper .img {cursor: pointer}
#s3 .s3Swiper .s3prev {display: none;}
#s3 .s3Swiper .s3next {display: none;}

#s3 .modalSlide {z-index: 99999; display: none}
#s3 .modalSlide .modalBg {background: rgba(0,0,0,0.67)}
#s3 .modalSlide .modalCont {max-width: 142rem;}
#s3 .modalSlide .s3ModalSwiper {overflow: hidden;}
#s3 .modalSlide .s3ModalSwiper .close {top: 3.4rem; right: 3.4rem; cursor: pointer;}
#s3 .modalSlide .s3ModalPrev {width: 7.6rem; height: 7.6rem; left: -10.6rem; cursor: pointer;}
#s3 .modalSlide .s3ModalNext {width: 7.6rem; height: 7.6rem; right: -10.6rem; cursor: pointer;}

@media all and (max-width: 880px){
    #s3 {}
    #s3 .inner {max-width: 83%; padding: 11.4rem 0 7rem;}
    #s3 .titArea {margin-bottom: 5.4rem;}
    #s3 .titArea .subt {font-size: 1.8rem;}
    #s3 .titArea .tit {font-size: 4.2rem; padding: 1.4rem 0;}
    #s3 .titArea .wrt {font-size: 2rem;}
    #s3 .s3Swiper {padding-bottom: 9.4rem;}
    #s3 .s3Swiper .s3prev {position: absolute; bottom: 0; left: 9.5rem;}
    #s3 .s3Swiper .s3next {position: absolute; bottom: 0; right: 9.5rem;}

    #s3 .modalSlide {}
    #s3 .modalSlide .modalBg {}
    #s3 .modalSlide .modalCont {max-width: 38rem;}
    #s3 .modalSlide .s3ModalSwiper {}
    #s3 .modalSlide .s3ModalSwiper .slide {max-height: 80vh; overflow-y: scroll;}
    #s3 .modalSlide .s3ModalSwiper .close {width: 4.2rem; height: 4.2rem; top: 1.4rem; right: 1.4rem;}
    #s3 .modalSlide .s3ModalPrev {width: 3.4rem; height: 3.4rem; left: 0; z-index: 1;}
    #s3 .modalSlide .s3ModalNext {width: 3.4rem; height: 3.4rem; right: 0; z-index: 1;}
}

#s4 {background: #212121}
#s4 .inner {padding: 8rem 0; gap: 2.3rem;}
#s4 .inner img {}
#s4 .inner .tit {}

@media all and (max-width: 880px){
    #s4 {}
    #s4 .inner {padding: 6.5rem 0;}
    #s4 .inner img {width: 7rem;}
    #s4 .inner .tit {font-size: 3.4rem;}
    #s4 .inner .tit span {font-size: 4rem;}
}

#s5 {background: url('../img/s5_bg.jpg') center/cover no-repeat}
#s5 .inner {max-width: 147rem; padding: 13rem 0 11.5rem;}
#s5 .txtArea {margin-bottom: 5.6rem;}
#s5 .txtArea .t1 {}
#s5 .txtArea .t2 {padding: 1.8rem 0 6.7rem;}
#s5 .txtArea .t3 {padding-bottom: 1.3rem;}
#s5 .txtArea .t4 {}
#s5 .lstArea {}
#s5 .lstArea .lst {}

@media all and (max-width: 880px){
    #s5 {background: url('../img/s5_bg_mo.jpg') center/cover no-repeat}
    #s5 .inner {max-width: 88.37%; padding: 11rem 0 13rem;}
    #s5 .txtArea {}
    #s5 .txtArea .t1 {}
    #s5 .txtArea .t2 {font-size: 3.4rem; padding: 1.4rem 0 8.2rem;}
    #s5 .txtArea .t2 span {font-size: 4.2rem; padding-top: 1rem; display: inline-block;}
    #s5 .txtArea .t3 {font-size: 4rem;}
    #s5 .txtArea .t4 {font-size: 1.6rem;}
    #s5 .s5Swiper {overflow: hidden;}
}

#s6 {}
#s6 .inner {max-width: 147rem; padding: 16.5rem 0 23.5rem;}
#s6 .lstArea {gap: 3rem;}
#s6 .lstArea .lst {width: calc((100% - 6rem) / 3); background: #F6F6F6; border-radius: 2rem; padding: 8.7rem 0 4.7rem;}
#s6 .lstArea .lst .ico {z-index: 1; width: 11rem; top: -5.5rem;}
#s6 .lstArea .lst .txts {}
#s6 .lstArea .lst .txts .tit {padding-bottom: 1.4rem;}
#s6 .lstArea .lst .txts .wrt {}
#s6 .flowTxt {color: #D8FFEA; bottom: 9rem; letter-spacing: 0.1em; overflow: hidden; white-space: nowrap;}
#s6 .flowTxt .track {display: flex; width: max-content; animation: flowMarquee 20s linear infinite;}
#s6 .flowTxt .track span {padding: 0 5rem;}

@keyframes flowMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media all and (max-width: 880px){
    #s6 {}
    #s6 .inner {max-width: 39.4rem; padding: 7rem 0 21.5rem;;}
    #s6 .lstArea {flex-direction: column; gap: 1.4rem;}
    #s6 .lstArea .lst {width: 100%; padding: 4.6rem 0;}
    #s6 .lstArea .lst .ico {left: 4.4rem; transform: translateY(-50%); top: 50%;}
    #s6 .lstArea .lst .txts {text-align: left; padding-left: 19.6rem;}
    #s6 .lstArea .lst .txts .tit {font-size: 3.4rem; padding-bottom: 0.8rem}
    #s6 .lstArea .lst .txts .wrt {font-size: 1.8rem;}
    #s6 .flowTxt {bottom: 7rem;}
}

#s7 {background: #21201F}
#s7 .inner {padding: 13rem 0;}
#s7 .titArea {margin-bottom: 6.2rem;}
#s7 .titArea .ico {}
#s7 .titArea .tit {padding: 3.5rem 0 2.6rem;}
#s7 .titArea .tit b {}
#s7 .titArea .wrt {}
#s7 .s7Swiper {overflow: hidden; max-width: 142rem; margin: 0 auto}
#s7 .s7prev {left: 15.3rem; cursor: pointer}
#s7 .s7next {right: 15.3rem; cursor: pointer}

@media all and (max-width: 880px){
    #s7 {}
    #s7 .inner {max-width: 83.72%;}
    #s7 .titArea {margin-bottom: 5.2rem;}
    #s7 .titArea .ico {width: 15.6rem;}
    #s7 .titArea .tit {font-size: 3rem; padding: 4rem 0 1.2rem;}
    #s7 .titArea .tit b {font-size: 4.4rem; padding-top: 1rem; display: inline-block;}
    #s7 .titArea .wrt {font-size: 1.6rem; line-height: 3rem;}
    #s7 .s7MoSwiper {max-height: 59rem; overflow: hidden;}
    #s7 .s7MoSwiper .swiper-slide {height: auto; opacity: 0.5; transition: all 0.2s ease; display: flex; justify-content: center; align-items: center;}
    #s7 .s7MoSwiper .swiper-slide-active {opacity: 1;}
    .s7MoSwiper .swiper-slide img {object-fit: cover;}
}

#s8 {}
#s8 .cont {}
#s8 .cont .pcImg {height: 72rem; background: url('../img/s8_img.jpg'); background-size: 100%; background-attachment: fixed;}
#s8 .txts {background: #21201F; padding: 9.5rem 0; line-height: 6.6rem;}

@media all and (max-width: 880px){
    #s8 {}
    #s8 .cont {}
    #s8 .cont .moImg {}
    #s8 .txts {font-size: 3.4rem; line-height: 5rem; padding: 6.8rem 0;}
}

#s9 {background: #141414}
#s9 .inner {max-width: 150rem; padding: 12.5rem 0 16rem;}
#s9 .titArea {margin-bottom: 6.5rem;}
#s9 .titArea .tit {}
#s9 .titArea .wrt {padding: 2.2rem 0 3.2rem;}
#s9 .titArea .img {}
#s9 .contArea {}

@media all and (max-width: 880px){
    #s9 {}
    #s9 .inner {max-width: 38rem; padding: 8rem 0 8.8rem;}
    #s9 .titArea {}
    #s9 .titArea .tit {font-size: 5rem; line-height: 5.2rem;}
    #s9 .titArea .wrt {font-size: 1.8rem; line-height: 3rem;}
    #s9 .titArea .img {}
    #s9 .contArea {}
}

#s10 {}
#s10 .imgArea {}
#s10 .txtArea {padding-top: 9rem;}
#s10 .txtArea .tit {}
#s10 .txtArea .tit span {color: #007564}
#s10 .txtArea .wrt {padding-top: 2rem;}

@media all and (max-width: 880px){
    #s10 {}
    #s10 .imgArea {}
    #s10 .txtArea {padding-top: 5.8rem;}
    #s10 .txtArea .tit {font-size: 4rem; line-height: 5rem;}
    #s10 .txtArea .wrt {font-size: 2rem; line-height: 3.2rem;}
}

#s11 {}
#s11 .cont {padding: 22rem 0;}
#s11 .imgArea {width: 50%; padding-right: 4.3rem;}
#s11 .imgArea img {left: -9.5rem;}
#s11 .txtArea {width: 50%}
#s11 .txtArea .tit {line-height: 6rem;}
#s11 .txtArea .tit span {color: #007564}
#s11 .txtArea .wrt {padding-top: 3.8rem; line-height: 4rem;}

@media all and (max-width: 880px){
    #s11 {}
    #s11 .cont {width: 38rem; padding: 8rem 0; margin: 0 auto;}
    #s11 .imgArea {width: 100%; padding: 0;}
    #s11 .imgArea img {left: 0;}
}

#s12 {background: #F8F8F8}
#s12 .inner {padding: 18rem 0 19rem; max-width: 140rem;}
#s12 .titArea {margin-bottom: 7rem;}
#s12 .titArea .tit {padding-bottom: 2rem; line-height: 6.6rem;}
#s12 .titArea .tit span {color: #007564}
#s12 .titArea .wrt {line-height: 3.6rem;}
#s12 .lstArea {gap: 2rem;}
#s12 .lstArea .lst {width: 18rem; flex-shrink: 0; cursor: pointer; transition: 0.3s; height: 54rem;}
#s12 .lstArea .lst.on {flex: 1;}

#s12 .lstArea .lst1 {background: url('../img/s12_bg_1_off.png') center/cover}
#s12 .lstArea .lst2 {background: url('../img/s12_bg_2_off.png') center/cover}
#s12 .lstArea .lst3 {background: url('../img/s12_bg_3_off.png') center/cover}
#s12 .lstArea .lst1.on {background: url('../img/s12_bg_1_on.png') center/cover}
#s12 .lstArea .lst2.on {background: url('../img/s12_bg_2_on.png') center/cover}
#s12 .lstArea .lst3.on {background: url('../img/s12_bg_3_on.png') center/cover}


@media all and (max-width: 880px){
    #s12 {}
    #s12 .inner {padding: 12rem 0 10rem; max-width: 38.6rem;}
    #s12 .titArea {margin-bottom: 5.5rem;}
    #s12 .titArea .tit {font-size: 4rem; line-height: 5rem;}
    #s12 .titArea .wrt {font-size: 1.6rem; line-height: 2.8rem;}
    #s12 .lstArea {flex-direction: column; gap: 1rem;}
    #s12 .lstArea .lst {width: 100%; height: 8rem;}
    #s12 .lstArea .lst.on {flex: auto; height: 33.6rem;}

    #s12 .lstArea .lst1 {background: url('../img/s12_bg_1_mo_off.png') center/cover}
    #s12 .lstArea .lst2 {background: url('../img/s12_bg_2_mo_off.png') center/cover}
    #s12 .lstArea .lst3 {background: url('../img/s12_bg_3_mo_off.png') center/cover}
    #s12 .lstArea .lst1.on {background: url('../img/s12_bg_1_mo_on.png') center/cover}
    #s12 .lstArea .lst2.on {background: url('../img/s12_bg_2_mo_on.png') center/cover}
    #s12 .lstArea .lst3.on {background: url('../img/s12_bg_3_mo_on.png') center/cover}
}

#s13 {}
#s13 .txtArea {background: #141414; padding: 14.5rem 0 7rem;}
#s13 .txtArea .tit {padding-bottom: 2.6rem;}
#s13 .txtArea .tit span {}
#s13 .txtArea .wrt {}
#s13 .imgPc {height: 60rem; background: url('../img/s13_bg.jpg'); background-size: 100%; background-attachment: fixed;}

@media all and (max-width: 880px){
    #s13 {}
    #s13 .txtArea {padding: 13rem 0 6.7rem;}
    #s13 .txtArea .tit {font-size: 4rem; line-height: 5.6rem; padding-bottom: 3rem;}
    #s13 .txtArea .wrt {font-size: 1.8rem; line-height: 3rem;}
    #s13 .imgMo {}
}

#swrap {background: #141414; padding: 16rem 0 21.5rem;}
#swrap::before {content: ''; display: block; position: absolute; width: 100%; height: 64.3rem; bottom: 0; left: 0; background: url('../img/swrap_bg.png') center/contain}
#swrap .inner {max-width: 140rem; background: #fff; border-radius: 2rem; overflow: hidden;}

#s14 {}
#s14 .cont {padding: 9rem 0 14rem; max-width: 112.8rem;}
#s14 .cont .titArea {margin-bottom: 3.6rem;}
#s14 .cont .titArea img {}
#s14 .cont .titArea .txt {padding-top: 1.6rem;}
#s14 .cont .titArea .txt span {color: #007564}
#s14 .cont .imgArea {gap: 1.2rem; margin-bottom: 1.2rem;}
#s14 .cont .imgArea .box {}
#s14 .cont .imgArea .box .img {}
#s14 .cont .lstArea {gap: 1.2rem;}
#s14 .cont .lstArea .lst {width: calc((100% - 1.2rem) / 2); background: #F1F6F5; border-radius: 2rem; height: 16.8rem; display: flex; flex-direction: column; justify-content: center; gap: 0.8rem;}
#s14 .cont .lstArea .lst .tit {justify-content: center; gap: 1rem;}
#s14 .cont .lstArea .lst .tit img {}
#s14 .cont .lstArea .lst .tit .txt {}
#s14 .cont .lstArea .lst .wrt {}

@media all and (max-width: 880px){
    #swrap {padding: 5rem 0;}
    #swrap .inner {max-width: 38.7rem;}

    #s14 {}
    #s14 .cont {padding: 6.4rem 0 4.8rem;}
    #s14 .cont .titArea {margin-bottom: 2rem;}
    #s14 .cont .titArea img {width: 16.6rem;}
    #s14 .cont .titArea .txt {font-size: 3rem;}
    #s14 .cont .titArea .txt span {font-size: 4rem;}
    #s14 .cont .imgArea {max-width: 32rem; flex-direction: column; gap: 0.6rem; margin: 0 auto; margin-bottom: 2rem;}
    #s14 .cont .imgArea .box {}
    #s14 .cont .imgArea .box .img {}
    #s14 .cont .s14Swiper {max-width: 32rem; overflow: hidden; margin: 0 auto}
    #s14 .cont .s14prev {left: 1.6rem;}
    #s14 .cont .s14next {right: 1.6rem;}
}

#s15 {}
#s15 .bgArea {}
#s15 .txtArea {padding: 6.6rem 0 11rem;}
#s15 .txtArea .tit {margin-bottom: 3.8rem;}
#s15 .txtArea .tit span {color: #007564}
#s15 .txtArea .wrt {line-height: 3.6rem;}
#s15 .contArea {max-width: 112.8rem; padding-bottom: 12rem; margin: 0 auto; gap: 7.7rem;}
#s15 .contArea .imgs {}
#s15 .contArea .imgs .img {}
#s15 .contArea .txts {}
#s15 .contArea .txts .tit {color: #007564;}
#s15 .contArea .txts .wrt {padding: 1.2rem 0 4rem;}
#s15 .contArea .txts .lst {}
#s15 .contArea .txts .lst li {padding: 1.2rem; border: 1px solid #E3E3E3; border-radius: 3.3rem; gap: 0.8rem;}
#s15 .contArea .txts .lst li + li {margin-top: 1.2rem;}
#s15 .contArea .txts .lst li img {}

@media all and (max-width: 880px){
    #s15 {}
    #s15 .bgArea {}
    #s15 .txtArea {padding: 2.4rem 0 5.8rem;}
    #s15 .txtArea .tit {font-size: 3rem; margin-bottom: 2.4rem;}
    #s15 .txtArea .tit span {font-size: 4rem;}
    #s15 .txtArea .wrt {font-size: 1.6rem; line-height: 2.4rem;}
    #s15 .contArea {flex-direction: column; max-width: 34.4rem; text-align: center; gap: 2.4rem; padding-bottom: 7rem;}
    #s15 .contArea .imgs {}
    #s15 .contArea .imgs .img {}
    #s15 .contArea .txts {}
    #s15 .contArea .txts .tit {font-size: 2.4rem;}
    #s15 .contArea .txts .wrt {font-size: 1.6rem;}
    #s15 .contArea .txts .lst {}
    #s15 .contArea .txts .lst li {font-size: 1.4rem; text-align: left;}
    #s15 .contArea .txts .lst li + li {}
    #s15 .contArea .txts .lst li img {width: 2.4rem;}
}

#s16 {background: #F1F6F5}
#s16 .inner {max-width: 124.6rem; padding: 17rem 0;}
#s16 .titArea {margin-bottom: 5.6rem;}
#s16 .titArea .wrt {}
#s16 .titArea .tit {padding-top: 1.8rem;}
#s16 .titArea .tit span {color: #007564}
#s16 .tabArea {}
#s16 .tabArea .tab {}
#s16 .tabArea .tab .lst {cursor: pointer}
#s16 .tabArea .tab .lst+.lst::before {content: ''; display: block; position: absolute; width: 1px; height: 100%; left: 0; top: 0; background: #E8E8E8; z-index: 1;}
#s16 .tabArea .tab .lst .dimg {}
#s16 .tabArea .tab .lst .oimg {opacity: 0; transition: 0.2s;}
#s16 .tabArea .tab .lst:hover .oimg {opacity: 1;}
#s16 .tabArea .tab .lst.on .oimg {opacity: 1;}
#s16 .contArea {margin-top: 8.4rem;}
#s16 .contArea .s16Swiper {overflow: hidden; width: 85.3rem; margin: 0 auto}
#s16 .contArea .s16Swiper video {width: 100%}
#s16 .contArea .s16prev {left: 7rem; cursor: pointer;}
#s16 .contArea .s16next {right: 7rem; cursor: pointer;}
#s16 .contArea .txts {background: #313131; height: 16rem; margin-top: -0.3rem;}
#s16 .contArea .txts .tit {padding-bottom: 1.4rem;}
#s16 .contArea .txts .wrt {}

@media all and (max-width: 880px){
    #s16 {}
    #s16 .inner {padding: 10rem 0;}
    #s16 .titArea {margin-bottom: 4.8rem;}
    #s16 .titArea .wrt {font-size: 3rem;}
    #s16 .titArea .tit {font-size: 4.6rem; padding-top: 1.4rem;}
    #s16 .tabArea {overflow-x: scroll;}
    #s16 .tabArea .tab {width: max-content;}
    #s16 .tabArea .tab .lst {width: 16.2rem;}
    #s16 .tabArea .tab .lst .dimg {}
    #s16 .tabArea .tab .lst .oimg {}
    #s16 .tabArea .tab .lst.on .oimg {}
    #s16 .contArea {margin-top: 6.8rem;}
    #s16 .contArea .s16Swiper {width: 37.6rem;}
    #s16 .contArea .s16prev {display: none}
    #s16 .contArea .s16next {display: none}
    #s16 .contArea .txts {height: 13.3rem;}
    #s16 .contArea .txts .tit {font-size: 2.8rem;}
    #s16 .contArea .txts .wrt {font-size: 1.6rem;}
}

#s17 {}
#s17 .inner {padding: 17rem 0 14.5rem; max-width: 177rem;}
#s17 .titArea {margin-bottom: 10rem;}
#s17 .titArea .tit {padding-bottom: 1.8rem;}
#s17 .titArea .tit span {color: #007564;}
#s17 .titArea .wrt {line-height: 3rem;}
#s17 .lstArea {gap: 3rem;}
#s17 .lstArea .lst {transition: 1s; top: 0; width: calc((100% - 9rem) / 4)}
#s17 .lstArea .lst .dimg {}
#s17 .lstArea .lst .oimg {opacity: 0; transition: 0.4s;}
#s17 .lstArea .lst:hover {top: -5rem;}
#s17 .lstArea .lst:hover .oimg {opacity: 1;}

@media all and (max-width: 880px){
    #s17 {}
    #s17 .inner {padding: 10rem 0 8rem;}
    #s17 .titArea {margin-bottom: 8rem;}
    #s17 .titArea .tit {font-size: 4.6rem; padding-bottom: 2rem;}
    #s17 .titArea .tit span {}
    #s17 .titArea .wrt {font-size: 1.8rem;}
    #s17 .lstArea {flex-direction: column; gap: 1.4rem;}
    #s17 .lstArea .lst {width: 100%}
    #s17 .lstArea .lst .dimg {}
    #s17 .lstArea .lst .oimg {}
    #s17 .lstArea .lst:hover {top: 0}
    #s17 .lstArea .lst:hover .oimg {}
}

#s18 {background: url('../img/s18_bg.jpg') center/cover;}
#s18 .inner {padding: 9.5rem 0; gap: 13rem; justify-content: center;}
#s18 .inner .txts {}
#s18 .inner .txts .line {gap: 5rem;}
#s18 .inner .txts .line + .line {margin-top: 6rem;}
#s18 .inner .txts .line .tit {gap: 1rem;}
#s18 .inner .txts .line .tit img {}
#s18 .inner .txts .line .num {}
#s18 .inner .txts .line .time {}
#s18 .inner .txts .line .time li {}
#s18 .inner .txts .line .time li + li {margin-top: 1rem;}
#s18 .inner .txts .line .time li .opt {font-weight: 600; min-width: 10rem; margin-right: 2.7rem;}
#s18 .inner .txts .line .time li .con {}
#s18 .inner .txts .line .time li .night {display: flex; align-items: center; gap: 0.2rem; background: #9FFFC6; border-radius: 1.2rem; color: #212121; padding: 0.4rem 1.1rem; margin-left: 0.8rem;}
#s18 .inner .txts .line .time li.space {color: #D8FFEA}
#s18 .inner .txts .line .loca {}
#s18 .inner .txts .line .loca span {}
#s18 .inner .map {width: 71rem; height: 60rem;}

@media all and (max-width: 880px){
    #s18 {background: url('../img/s18_bg_mo.jpg') center/cover;}
    #s18 .inner {flex-direction: column; max-width: 37rem; gap: 5.7rem;}
    #s18 .inner .txts {}
    #s18 .inner .txts .line {flex-direction: column; align-items: flex-start; gap: 1.5rem;}
    #s18 .inner .txts .line + .line {margin-top: 3.5rem;}
    #s18 .inner .txts .line .tit {}
    #s18 .inner .txts .line .tit img {}
    #s18 .inner .txts .line .num {}
    #s18 .inner .txts .line .time {font-size: 1.8rem;}
    #s18 .inner .txts .line .time li {}
    #s18 .inner .txts .line .time li + li {}
    #s18 .inner .txts .line .time li .opt {min-width: 9rem;}
    #s18 .inner .txts .line .time li .con {}
    #s18 .inner .txts .line .time li .night {font-size: 0.9rem;}
    #s18 .inner .txts .line .time li .night img {display: none}
    #s18 .inner .txts .line .loca {font-size: 1.8rem;}
    #s18 .inner .txts .line .loca span {font-size: 1.6rem}
    #s18 .inner .map {width: 100%; height: 31.4rem;}
}

.root_daum_roughmap .cont {display: none}
.root_daum_roughmap .wrap_controllers {display: none;}


..