#header {z-index: 9999}
#header .pcHeader {background: #fff;}
#header .pcHeader .inner {max-width: 182rem; padding: 1.7rem 0;}
#header .pcHeader .logo {}
#header .pcHeader .gnb {gap: 8rem; margin-left: 20rem;}
#header .pcHeader .call {margin-left: auto}

@media all and (max-width: 880px){
    #header {}

    #header .moHead {background: transparent; transition: 0.2s;}
    #header .moHead.act {background: #fff}
    #header .moHead .inner {max-width: 89.3%; padding: 1rem 0;}
    #header .moHead .logo {width: 14.4rem;;}
    #header .moHead .menuBtn {width: 2rem;;}

    #header .menuWrap {position: fixed; width: 100%; height: 100%; top: 0; display: none;}
    #header .menuWrap .menuBg {width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; top:0; left: 0;}

    #header .menuBox {width: 80%; height: 100%; margin-left: auto; background: #fff; right: -100%; transition: 1s; padding: 5.6rem 2.8rem}
    #header .menuBox .menuLogo {width: 14.4rem;}

    #header .menuGnb {margin-top: 3.5rem;}
    #header .menuGnb li {}
    #header .menuGnb li + li {margin-top: 3.8rem;}
    #header .menuGnb li a {display: block;}
    #header .menuGnb li span {display: block;}

    #header .menuClose {width: 2.2rem; height: 2.2rem; top: 2.6rem; right: 2.6rem;}
}

#float {right: 5rem; z-index: 999}
#float .lst {background: #fff; padding: 3rem 1rem; border-radius: 4.5rem; box-shadow: 0 0.2rem 0.6rem rgba(0,0,0,0.2);}
#float .lst li {}
#float .lst li + li {padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid #C9CDD2}
#float .lst li a {color: #33383C; width: 7rem; gap: 1rem; transition: 0.1s;}
#float .lst li a:hover {font-weight: 500; color: #000}
#float .lst li a img {}

@media all and (max-width: 880px){
    #float {right: 3.6rem; top: 10rem; transform: none}
    #float .floatBtn {filter: drop-shadow(0 0 1rem rgba(0,0,0,0.1)); margin-bottom: 1.2rem; width: 4.6rem;}
    #float .lst {padding: 2.2rem 0.8rem; display: none;}
    #float .lst li {}
    #float .lst li + li {padding-top: 1.2rem; margin-top: 1.2rem;}
    #float .lst li a {width: 3rem;}
    #float .lst li a img {width: 1.8rem;}
}

#footer {background: #212B1D; border-top: 1px solid rgba(255,255,255,0.4)}
#footer .inner {padding: 4rem 0 5rem;}
#footer .ftlogo {margin-bottom: 3rem; width: 17.6rem;}
#footer .ftinfo {gap: 1rem 2.5rem;}
#footer .ftinfo .info {color: #BCBCBC;}
#footer .ftinfo .info.add {color: #fff;}
#footer .copy {margin-top: 3.5rem;}

@media all and (max-width: 880px){
    #footer {}
    #footer .inner {max-width: var(--innerMo);}
    #footer .ftlogo {margin-bottom: 2.2rem;}
    #footer .ftinfo {font-size: 1.4rem;}
    #footer .ftinfo .info {}
    #footer .copy {margin-top: 3rem; font-size: 1.4rem; line-height: 2.4rem;}
}


#wrap {overflow: hidden;}

#s1 {}
#s1 .vdoArea {height: 100vh;}
#s1 .vdoArea .vdo {height: 100%; border-radius: 0 0 25rem 0; overflow: hidden;}
#s1 .vdoArea .vdo video {width: 100%; height: 100%; display: block; object-fit: cover;}
#s1 .txtArea {bottom: 17.75%;}
#s1 .txtArea .tit {padding-bottom: 2rem; text-shadow: 0 0 0.6rem rgba(0,0,0,0.16);}
#s1 .txtArea .tit span.clr {color: #DDEFAC}
#s1 .txtArea .tit .ico {bottom: 75%;}
#s1 .txtArea .wrt {text-shadow: 0 0 0.6rem rgba(0,0,0,0.16);}

@media all and (max-width: 880px){
    #wrap {}

    #s1 {}
    #s1 .vdoArea {}
    #s1 .vdoArea .vdo {border-radius: 0 0 7rem 0;}
    #s1 .vdoArea .vdo video {}
    #s1 .txtArea {bottom: 13.5%;}
    #s1 .txtArea .tit {font-size: 3.6rem; padding-bottom: 2.4rem; line-height: 4.8rem; display: inline-block;}
    #s1 .txtArea .tit .ico {bottom: 42%; right: -11%;}
    #s1 .txtArea .wrt {font-size: 1.8rem; line-height: 2.8rem;}
}

#s2 {background: url('../img/s2_bg.png') bottom 11.6rem left / 92.6rem 68.5rem no-repeat;}
#s2 .inner {padding: 18rem 0 25rem;}
#s2 .txtArea {width: 100%;}
#s2 .txtArea .ico {}
#s2 .txtArea .t1 {margin: 2.5rem 0 2rem; gap: 3rem;}
#s2 .txtArea .t1 .txt {flex-shrink: 0;}
#s2 .txtArea .t1 .line {width: 100%; background: #415936; height: 1px;}
#s2 .txtArea .t2 {margin-bottom: 5rem;}
#s2 .txtArea .t3 {}
#s2 .txtArea .t3 p {line-height: 3rem;}
#s2 .txtArea .t3 p + p {margin-top: 2.5rem;}
#s2 .txtArea .t4 {margin-top: 4rem;}
#s2 .txtArea .t5 {margin-top: 0.6rem;}
#s2 .imgArea {width: 62.1rem; flex-shrink: 0}

@media all and (max-width: 880px){
    #s2 {background-size: 53rem 40.8rem; background-position: bottom 42% left;}
    #s2 .inner {max-width: var(--innerMo); padding: 10rem 0; flex-direction: column; gap: 6.4rem;}
    #s2 .txtArea {}
    #s2 .txtArea .ico {}
    #s2 .txtArea .ico img {width: 4.8rem;}
    #s2 .txtArea .t1 {font-size: 2.2rem; gap: 1.6rem; margin: 2.4rem 0 2rem;}
    #s2 .txtArea .t2 {font-size: 3.2rem; margin-bottom: 4.8rem;}
    #s2 .txtArea .t3 {font-size: 1.8rem;}
    #s2 .txtArea .t3 p {}
    #s2 .txtArea .t3 p + p {margin-top: 2rem;}
    #s2 .txtArea .t4 {font-size: 1.8rem; margin-top: 3.4rem;}
    #s2 .txtArea .t5 {font-size: 2.2rem;}
    #s2 .imgArea {width: 100%;}
}

#s3 {background: url('../img/s3_bg.png') center/cover no-repeat}
#s3 .inner {padding-top: 12.3rem; gap: 8rem;}
#s3 .imgArea {}
#s3 .imgArea .img {}
#s3 .txtArea  {padding-top: 3.6rem;}
#s3 .txtArea .subt {letter-spacing: 0.2rem;}
#s3 .txtArea .tit {margin: 3rem 0 6rem; line-height: 5.5rem;}
#s3 .txtArea .name {gap: 1.2rem; padding-bottom: 1.5rem; border-bottom: 1px solid #D6D6D6}
#s3 .txtArea .name::before {content: ''; display: block; position: absolute; width: 19.5rem; height: 3px; background: #A1B15C; left: 0; bottom: -2px;}
#s3 .txtArea .history {margin-top: 4rem; gap: 5rem;}
#s3 .txtArea .history .hst {}
#s3 .txtArea .history .hstDiv {min-height: 14rem;}
#s3 .txtArea .history .opt {padding: 0.6rem 2rem; background: #415936; border-radius: 3.7rem; margin-bottom: 1.5rem;}
#s3 .txtArea .history .lst {}
#s3 .txtArea .history .lst li {padding-left: 1.4rem;}
#s3 .txtArea .history .lst li::before {content: ''; display: block; position: absolute; width: 0.4rem; height: 0.4rem; background: #415936; border-radius: 50%; top: calc(50% - 2px); left: 0;}
#s3 .txtArea .history .lst li + li {margin-top: 1rem;}

@media all and (max-width: 880px){
    #s3 {background: url('../img/s3_bg_mo.png') center/cover no-repeat}
    #s3 .inner {max-width: var(--innerMo); flex-direction: column; padding: 7.4rem 0 13rem; gap: 5.2rem;}
    #s3 .imgArea {}
    #s3 .imgArea .img {}
    #s3 .txtArea  {padding: 0;}
    #s3 .txtArea .subt {font-size: 1.6rem;}
    #s3 .txtArea .tit {font-size: 3rem; line-height: 4.4rem; margin: 2.4rem 0 4.8rem;}
    #s3 .txtArea .name {font-size: 3rem; gap: 0.8rem; padding-bottom: 1.2rem;}
    #s3 .txtArea .name::before {height: 5px; bottom: -3px;}
    #s3 .txtArea .name span {font-size: 1.8rem}
    #s3 .txtArea .history {margin-top: 3.2rem; flex-direction: column; gap: 0;}
    #s3 .txtArea .history .hst {}
    #s3 .txtArea .history .hstDiv {min-height: auto; margin-bottom: 4.2rem;}
    #s3 .txtArea .history .opt {font-size: 1.4rem; padding: 0.7rem 2.2rem;}
    #s3 .txtArea .history .lst {}
    #s3 .txtArea .history .lst li {font-size: 1.4rem;}
    #s3 .txtArea .history .lst li + li {margin-top: 0.8rem;}
}

#s4 {background: url('../img/s4_bg.jpg') center/cover}
#s4 .inner {padding: 11rem 0;}
#s4 .cont {}

@media all and (max-width: 880px){
    #s4 {background: url('../img/s4_bg_mo.jpg') center/cover}
    #s4 .inner {padding: 7.2rem 0; max-width: var(--innerMo);}
    #s4 .cont {}
}

#s5 {}
#s5 .inner {padding: 18rem 0 20rem;}
#s5 .titArea {margin-bottom: 10rem;}
#s5 .titArea .subt {letter-spacing: 0.2rem; margin-bottom: 3.5rem;}
#s5 .titArea .tit {line-height: 7rem;}
#s5 .contArea {justify-content: space-between;}
#s5 .contArea .imgArea {width: 62rem;}
#s5 .contArea .lstArea {width: 71rem;}
#s5 .contArea .lstArea .lst {padding-top: 4.5rem;}
#s5 .contArea .lstArea .lst + .lst {margin-top: 4.5rem; border-top: 1px solid #D6D6D6;}
#s5 .contArea .lstArea .lst .tit {margin-bottom: 2.5rem;}
#s5 .contArea .lstArea .lst .wrt {line-height: 3.4rem;}
#s5 .contArea .lstArea .lst .img {top: 10%; right: 0;}

@media all and (max-width: 880px){
    #s5 {}
    #s5 .inner {max-width: var(--innerMo); padding: 10rem 0;}
    #s5 .titArea {margin-bottom: 4.8rem;}
    #s5 .titArea .subt {font-size: 1.8rem; margin-bottom: 2.4rem;}
    #s5 .titArea .tit {font-size: 3rem; line-height: 4.4rem;}
    #s5 .contArea {flex-direction: column; gap: 1.6rem;}
    #s5 .contArea .imgArea {width: 100%}
    #s5 .contArea .lstArea {width: 100%}
    #s5 .contArea .lstArea .lst {padding-top: 4rem;}
    #s5 .contArea .lstArea .lst + .lst {margin-top: 4rem;}
    #s5 .contArea .lstArea .lst .tit {font-size: 2.2rem;}
    #s5 .contArea .lstArea .lst .wrt {font-size: 1.6rem; line-height: 2.6rem;}
    #s5 .contArea .lstArea .lst .img {top: 12%;}
    #s5 .contArea .lstArea .lst .img img {width: 5.6rem;}
}

#s6 {background: url('../img/s6_bg.jpg') center/cover}
#s6 .inner {padding: 12rem 0;}
#s6 .inner .subt {letter-spacing: 0.1rem;}
#s6 .inner .tit {padding: 3rem 0 6rem; line-height: 6.2rem;}
#s6 .inner .tit span {color: #DDEFAC}
#s6 .inner .txtImg {max-width: 60rem;}
#s6 .inner .txtImg .img {}

@media all and (max-width: 880px){
    #s6 {background: url('../img/s6_bg_mo.jpg') center/cover}
    #s6 .inner {max-width: var(--innerMo); padding: 9rem 0 10rem;}
    #s6 .inner .subt {font-size: 1.8rem; line-height: 2.8rem;}
    #s6 .inner .tit {padding: 2.4rem 0 4.8rem; font-size: 3rem; line-height: 4.4rem;}
    #s6 .inner .txtImg {}
    #s6 .inner .txtImg .img {}
}

#s7 {background: #F5F5F5}
#s7 .inner {padding: 15rem 0 18rem}
#s7 .titArea {}
#s7 .titArea .subt {}
#s7 .titArea .tit {padding: 3rem 0 3.5rem; line-height: 7rem;}
#s7 .titArea .wrt {}
#s7 .tabArea {margin: 6rem 0 5rem; gap: 1.5rem;}
#s7 .tabArea li {padding: 1.6rem 0; text-align: center; width: 30rem; background: #9B9B9B; border-radius: 3.5rem; cursor: pointer;}
#s7 .tabArea li.on {background: #415936}
#s7 .tabPanel {display: none}
#s7 .tabPanel.act {display: block;}
#s7 .s7swiper {overflow: hidden; padding: 1rem 0;}
#s7 .s7swiper .swiper-wrapper {display: flex; align-items: stretch;}
#s7 .s7swiper .slide {padding: 2rem 0 4rem; background: #fff; border-radius: 3rem; overflow: hidden; height: auto; box-shadow: 0 0.3rem 1rem rgba(0,0,0,0.05)}
#s7 .s7swiper .slide .img {}
#s7 .s7swiper .slide .txt {padding: 4rem 0 0 4rem;}
#s7 .s7swiper .slide .txt .t1 {color: #B5B5B5;}
#s7 .s7swiper .slide .txt .t2 {padding: 1rem 0 2rem;}
#s7 .s7swiper .slide .txt .t3 {line-height: 3rem;}
#s7 .s7prev {background: url('../img/s7_prev.png') center/contain; left: -9rem;}
#s7 .s7next {background: url('../img/s7_next.png') center/contain; right: -9rem;}
#s7 .s7prev::after,
#s7 .s7next::after {display: none}
#s7 .s7prev,
#s7 .s7next {width: 6rem; height: 6rem;}

@media all and (max-width: 880px){
    #s7 {}
    #s7 .inner {max-width: var(--innerMo); padding: 11rem 0 20rem;}
    #s7 .titArea {}
    #s7 .titArea .subt {font-size: 2rem;}
    #s7 .titArea .tit {font-size: 3.2rem; line-height: 4.4rem; padding: 2rem 0 2.4rem;}
    #s7 .titArea .wrt {font-size: 1.8rem; line-height: 2.8rem;}
    #s7 .tabArea {flex-direction: column; gap: 1rem; margin: 4rem 0 4.8rem;}
    #s7 .tabArea li {width: 100%; font-size: 2rem; }
    #s7 .tabArea li.on {}
    #s7 .tabPanel {}
    #s7 .tabPanel.act {}
    #s7 .s7swiper {}
    #s7 .s7swiper .slide {}
    #s7 .s7swiper .slide .img {}
    #s7 .s7swiper .slide .txt {padding: 2rem 0 0; text-align: center;}
    #s7 .s7swiper .slide .txt .t1 {}
    #s7 .s7swiper .slide .txt .t2 {padding: 1.2rem 0 2.2rem;}
    #s7 .s7swiper .slide .txt .t3 {font-size: 1.6rem; line-height: 2.6rem;}
    #s7 .s7prev {margin: 0; top: 106%; left: 32%;}
    #s7 .s7next {margin: 0; top: 106%; right: 32%;}
    #s7 .s7prev,
    #s7 .s7next {width: 5.7rem; height: 5.7rem;}
}

#s8 {}
#s8 .inner {padding: 18rem 0 22rem;}
#s8 .inner .tit {}
#s8 .inner .wrt {padding: 3.5rem 0 8rem;}
#s8 .s8swiper {max-width: 166rem; margin-left: auto; overflow: hidden;}
#s8 .s8swiper .img {}
#s8 .nav {gap: 3rem; margin-top: 5rem;}
#s8 .nav .s8_prev {width: 1.6rem; height: 1.4rem; background: url('../img/arr_prev.svg') center/contain; cursor: pointer}
#s8 .nav .s8_next {width: 1.6rem; height: 1.4rem; background: url('../img/arr_next.svg') center/contain; cursor: pointer}
#s8 .nav .nums {gap: 1.4rem;}
#s8 .nav .nums .num {}
#s8 .nav .nums .slsh {color: #D6D6D6}

@media all and (max-width: 880px){
    #s8 {}
    #s8 .inner {max-width: var(--innerMo); padding: 11rem 0 13rem;}
    #s8 .inner .tit {font-size: 3.2rem; line-height: 4.4rem;}
    #s8 .inner .wrt {font-size: 1.8rem; line-height: 2.8rem; padding: 2.4rem 0 4rem;}
    #s8 .s8swiper {}
    #s8 .s8swiper .img {}
    #s8 .nav {margin-top: 6.4rem;}
    #s8 .nav .s8_prev {}
    #s8 .nav .s8_next {}
    #s8 .nav .nums {}
    #s8 .nav .nums .num {}
    #s8 .nav .nums .slsh {}
}

#s9 {}
#s9 .inner {max-width: 166rem; padding-bottom: 22.6rem;}
#s9 .titArea {margin-bottom: 8rem;}
#s9 .titArea .subt {}
#s9 .titArea .tit {padding: 3rem 0 3.5rem;}
#s9 .titArea .wrt {line-height: 3.6rem}
#s9 .cont {gap: 6rem;}
#s9 .cont .imgArea {}
#s9 .cont .txtArea {max-width: 70rem; gap: 2rem;}
#s9 .cont .txtArea .t1 {}
#s9 .cont .txtArea .t2 {}
#s9 .cont .txtArea .t3 {}
#s9 .cont .txtArea .t4 {}

@media all and (max-width: 880px){
    #s9 {}
    #s9 .inner {max-width: var(--innerMo); margin: 0 auto; padding-bottom: 12rem;}
    #s9 .titArea {margin-bottom: 4.8rem;}
    #s9 .titArea .subt {font-size: 2rem;}
    #s9 .titArea .tit {font-size: 3.2rem; padding: 2rem 0 2.4rem;}
    #s9 .titArea .wrt {font-size: 1.8rem; line-height: 2.8rem;}
    #s9 .cont {gap: 0;}
    #s9 .cont .imgArea {}
    #s9 .cont .txtArea {gap: 2.4rem;}
    #s9 .cont .txtArea .t1 {}
    #s9 .cont .txtArea .t2 {}
    #s9 .cont .txtArea .t3 {}
    #s9 .cont .txtArea .t4 {}
}

#s10 {background: #F3F7F0}
#s10 .inner {padding: 12rem 0 18rem;}
#s10 .titArea {margin-bottom: 7rem;}
#s10 .titArea img {margin-bottom: 3.5rem;}
#s10 .titArea .tit {}
#s10 .lstArea {max-width: 182rem; margin: 0 auto}
#s10 .lstArea .lst {}
#s10 .lstArea .lst + .lst {}
#s10 .lstArea .lst .img {}
#s10 .lstArea .lst .dimg {}
#s10 .lstArea .lst .himg {opacity: 0; transition: 0.2s;}
#s10 .lstArea .lst:hover .himg {opacity: 1;}

@media all and (max-width: 880px){
    #s10 {}
    #s10 .inner {max-width: var(--innerMo); padding: 8rem 0 10rem;}
    #s10 .titArea {margin-bottom: 4.8rem;}
    #s10 .titArea img {width: 4.2rem; margin-bottom: 2rem;}
    #s10 .titArea .tit {font-size: 3rem; line-height: 4.2rem;}
    #s10 .lstArea {flex-direction: column;}
    #s10 .lstArea .lst {}
    #s10 .lstArea .lst + .lst {}
    #s10 .lstArea .lst .img {}
    #s10 .lstArea .lst .dimg {}
    #s10 .lstArea .lst .himg {}
    #s10 .lstArea .lst:hover .himg {}
}

.compA {padding: 20rem 0; gap: 8rem; max-width: 161rem;}
.compA .txtArea {width: 70rem;}
.compA .txtArea .t0 {font-size: 15rem; color: #F5F5F5; position: absolute; right: 0; top: 8%;}
.compA .txtArea .t1 {padding: 1.4rem 4rem; border: 2px solid #415936; border-radius: 3.2rem; letter-spacing: 0.2rem;}
.compA .txtArea .t2 {padding: 3.5rem 0 4rem;}
.compA .txtArea .t3 {color: #347C12; text-decoration: underline; text-underline-offset: 0.8rem; margin-bottom: 4.5rem;}
.compA .txtArea .t4 {line-height: 3.6rem; letter-spacing: -0.07rem;}
.compA .txtArea .t4 + .t4 {margin-top: 3.5rem;}
.compA .txtArea .t4 .clr {color: #8DA526}
.compA .imgArea {}
.compA.dr {margin-left: auto; margin-right: 5rem;}
.compA.dl {margin-right: auto; margin-left: 5rem;}

@media all and (max-width: 880px){
    .compA {padding: 9.6rem 0; max-width: var(--innerMo); gap: 5.6rem; align-items: baseline;}
    .compA .txtArea {width: 100%}
    .compA .txtArea .t0 {font-size: 6.8rem; top: 10%;}
    .compA .txtArea .t1 {font-size: 1.4rem; padding: 1.2rem 1.8rem; border: 1px solid #415936;}
    .compA .txtArea .t2 {font-size: 3.2rem; padding: 2.4rem 0;}
    .compA .txtArea .t3 {font-size: 1.6rem;}
    .compA .txtArea .t4 {font-size: 1.4rem; line-height: 2.6rem;}
    .compA .txtArea .t4 + .t4 {margin-top: 2.8rem;}
    .compA .txtArea .t4 .clr {}
    .compA .imgArea {}
    .compA.dr {flex-direction: column-reverse; margin: 0 auto;}
    .compA.dl {flex-direction: column; margin: 0 auto;}
}

.compB {padding: 15rem 0 18rem;}
.compB .titArea {margin-bottom: 8rem;}
.compB .titArea .tit {padding-bottom: 3.5rem;}
.compB .titArea .wrt {}
.compB .cont {max-width: 161rem; gap: 5rem;}
.compB .cont .imgArea {width: 72rem; flex-shrink: 0;}
.compB .cont .lstArea {gap: 2rem;}
.compB .cont .lstArea .lst {width: calc((100% - 2rem) / 2); background: #FFFFFF; border-radius: 2rem; box-shadow: 0 0 1rem rgba(0,0,0,0.08); padding: 6rem 0 0 5rem; height: 32rem;}
.compB .cont .lstArea .lst + .lst {}
.compB .cont .lstArea .lst .num {color: #B5B5B5}
.compB .cont .lstArea .lst .tit {padding: 1.5rem 0 3rem;}
.compB .cont .lstArea .lst .wrt {line-height: 3rem;}
.compB.dl {background: #F2F4EF; border-radius: 25rem 0 0 0;}
.compB.dl .cont {margin-right: auto; margin-left: 5rem;}
.compB.dr {background: #F5F5F5; border-radius: 0 25rem 0 0;}
.compB.dr .cont {margin-left: auto; margin-right: 5rem;}


@media all and (max-width: 880px){
    .compB {padding: 10rem 0;}
    .compB .titArea {margin-bottom: 4.8rem;}
    .compB .titArea .tit {font-size: 3rem; padding-bottom: 2.2rem;}
    .compB .titArea .wrt {font-size: 1.8rem; line-height: 2.8rem;}
    .compB .cont {gap: 4.5rem;}
    .compB .cont .imgArea {width: 100%;}
    .compB .cont .lstArea {gap: 1.2rem;}
    .compB .cont .lstArea .lst {width: 100%; height: auto; padding: 4.8rem 2.4rem;}
    .compB .cont .lstArea .lst + .lst {}
    .compB .cont .lstArea .lst .num {font-size: 1.8rem;}
    .compB .cont .lstArea .lst .tit {font-size: 2.2rem; padding: 1.8rem 0 2.4rem;}
    .compB .cont .lstArea .lst .wrt {font-size: 1.4rem; line-height: 2.4rem;}
    .compB.dl {border-radius: 7rem 0 0 0;}
    .compB.dl .cont {margin: 0 auto; max-width: var(--innerMo); flex-direction: column;}
    .compB.dr {border-radius: 0 7rem 0 0;}
    .compB.dr .cont {margin: 0 auto; max-width: var(--innerMo); flex-direction: column-reverse;}
}

#s15 {background: url('../img/s15_bg.jpg') center/cover;}
#s15 .inner {padding: 21rem 0 15rem;}
#s15 .tit {}
#s15 .tit .img {width: 78rem;}
#s15 .wrt {margin-top: 2.6rem; line-height: 4.8rem;}
#s15 .wrt + .wrt {}
#s15 .wrt span {color: #DDEFAC}

@media all and (max-width: 880px){
    #s15 {background: url('../img/s15_bg_mo.jpg') center/cover;}
    #s15 .inner {padding: 9rem 0 13rem;}
    #s15 .tit {}
    #s15 .tit .img {width: 38.4rem;}
    #s15 .wrt {font-size: 1.6rem; line-height: 2.6rem;}
    #s15 .wrt + .wrt {}
    #s15 .wrt span {}
}

#s20 {background: url('../img/s20_bg.jpg') center/cover;}
#s20 .compA .txtArea .t0 {opacity: 0.15}
#s20 .compA .txtArea .t1 {border-color: #fff}
#s20 .compA .txtArea .t3 {color: #DDEFAC}
#s20 .compA .txtArea .t4 .clr {color: #DDEFAC}

@media all and (max-width: 880px){
    #s20 {}
}

#s21 {background: url('../img/s21_bg.jpg') center/contain;}
#s21 .inner {padding: 12rem 0 13rem;}
#s21 .cont {}
#s21 .cont .img {}

@media all and (max-width: 880px){
    #s21 {background: url('../img/s21_bg_mo.jpg') center/contain;}
    #s21 .inner {padding: 7rem 0; max-width: var(--innerMo);}
    #s21 .cont {}
    #s21 .cont .img {}
}


#s22 {}
#s22 .inner {padding: 18rem 0 20rem;}
#s22 .s22swiper {overflow: hidden;}
#s22 .nav {gap: 3rem; bottom: 16%; right: 37%; z-index: 1}
#s22 .nav .s22_prev {width: 1.6rem; height: 1.4rem; background: url('../img/arr_prev.svg') center/contain; cursor: pointer}
#s22 .nav .s22_next {width: 1.6rem; height: 1.4rem; background: url('../img/arr_next.svg') center/contain; cursor: pointer}
#s22 .nav .nums {gap: 1.4rem;}
#s22 .nav .nums .num {}
#s22 .nav .nums .slsh {color: #D6D6D6}

@media all and (max-width: 880px){
    #s22 {}
    #s22 .inner {max-width: var(--innerMo); padding: 15rem 0 11rem;}
    #s22 .s22swiper {padding-bottom: 8.5rem;}
    #s22 .nav {bottom: 0; right: auto; left: 50%; transform: translateX(-50%);}
    #s22 .nav .s22_prev {}
    #s22 .nav .s22_next {}
    #s22 .nav .nums {}
    #s22 .nav .nums .num {}
    #s22 .nav .nums .slsh {}
}

#s23 {}
#s23 .titArea {margin-bottom: 8rem;}
#s23 .titArea .ico {}
#s23 .titArea .tit {line-height: 7rem; padding: 3.5rem 0;}
#s23 .titArea .wrt {}
#s23 .s23swiper {overflow: hidden;}
#s23 .nav {gap: 3rem; margin-top: 5rem;}
#s23 .nav .s23_prev {width: 1.6rem; height: 1.4rem; background: url('../img/arr_prev.svg') center/contain; cursor: pointer}
#s23 .nav .s23_next {width: 1.6rem; height: 1.4rem; background: url('../img/arr_next.svg') center/contain; cursor: pointer}
#s23 .nav .nums {gap: 1.4rem;}
#s23 .nav .nums .num {}
#s23 .nav .nums .slsh {color: #D6D6D6}

@media all and (max-width: 880px){
    #s23 {}
    #s23 .titArea {margin-bottom: 5rem;}
    #s23 .titArea .ico {}
    #s23 .titArea .tit {font-size: 3rem; padding: 2.2rem 0 2.7rem; line-height: 4.2rem;}
    #s23 .titArea .wrt {font-size: 1.6rem; line-height: 2.8rem;}
    #s23 .s23swiper {max-width: var(--innerMo); margin: 0 auto; border-radius: 0.8rem;}
    #s23 .nav {}
    #s23 .nav .s23_prev {}
    #s23 .nav .s23_next {}
    #s23 .nav .nums {}
    #s23 .nav .nums .num {}
    #s23 .nav .nums .slsh {}
}

#s24 {}
#s24 .inner {max-width: 182rem; padding: 27rem 0 20rem;}
#s24 .cont {background: url('../img/s24_bg.png') bottom center/contain no-repeat;}
#s24 .cont .contIn {align-items: flex-end;}
#s24 .cont .imgArea {max-width: 45.2rem; margin-right: 16.8rem;}
#s24 .cont .txtArea {padding-bottom: 10.7rem;}
#s24 .cont .txtArea .tit {}
#s24 .cont .txtArea .wrt {padding: 3rem 0 5rem; line-height: 4rem;}
#s24 .cont .txtArea .lst {max-width: 65.5rem; gap: 1.5rem;}
#s24 .cont .txtArea .lst li {width: calc((100% - 1.5rem) / 2); background: #fff; border-radius: 4rem; padding: 2.2rem 0 2.2rem 4.5rem; box-shadow: 0 0 1rem rgba(0,0,0,0.05);}
#s24 .cont .txtArea .lst li a {gap: 1.9rem;}
#s24 .cont .txtArea .lst li a img {}

@media all and (max-width: 880px){
    #s24 {}
    #s24 .inner {max-width: 92%; padding: 10.6rem 0 10.3rem;}
    #s24 .cont {background: url('../img/s24_bg_mo.png') top center/contain no-repeat;}
    #s24 .cont .contIn {flex-direction: column-reverse; align-items: center; gap: 4.6rem; padding-top: 9.6rem; max-width: 90%;}
    #s24 .cont .imgArea {padding: 0 1.5rem; margin: 0 auto;}
    #s24 .cont .txtArea {padding: 0 1rem;}
    #s24 .cont .txtArea .tit {font-size: 2.6rem;}
    #s24 .cont .txtArea .wrt {font-size: 1.6rem; padding: 1.9rem 0 3.8rem; line-height: 2.7rem;}
    #s24 .cont .txtArea .lst {gap: 1.8rem;}
    #s24 .cont .txtArea .lst li {width: calc((100% - 1.8rem) / 2); border-radius: 1.5rem; padding: 2.8rem 0 3rem;}
    #s24 .cont .txtArea .lst li a {flex-direction: column; gap: 1.7rem; text-align: center; font-size: 1.4rem;}
    #s24 .cont .txtArea .lst li a img {width: 3.4rem;}
}

#s25 {background: #212B1D}
#s25 .inner {padding: 15rem 0 10rem;}
#s25 .title {margin-bottom: 5rem;}
#s25 .title span {color: #DDEFAC;}
#s25 .cont {gap: 8rem;}
#s25 .cont .mapArea {width: 70rem; flex-shrink: 0; border-radius: 1rem; overflow: hidden;}
#s25 .cont .infoArea {width: 100%;}
#s25 .cont .infoArea .lst {}
#s25 .cont .infoArea .lst + .lst {padding-top: 3.4rem; margin-top: 3.4rem; border-top: 1px solid rgba(255,255,255,0.2)}
#s25 .cont .infoArea .lst .ico {top: 0.4rem;}
#s25 .cont .infoArea .lst .tit {margin: 0 5rem 0 2rem;}
#s25 .cont .infoArea .lst .con {}
#s25 .cont .infoArea .lst .time {}
#s25 .cont .infoArea .lst .time .div {}
#s25 .cont .infoArea .lst .time .div + .div {margin-top: 1rem;}
#s25 .cont .infoArea .lst .time .div span {padding-right: 2.5rem;}
#s25 .cont .infoArea .lst .time .prg {color: #DDEFAC; margin-top: 1.8rem; line-height: 2.4rem;}
#s25 .cont .infoArea .lst .mdbtn {}
#s25 .cont .infoArea .lst .mdbtn span {padding: 0.8rem 2.5rem; background: #fff; color: #415936; border-radius: 1.8rem; cursor: pointer;}

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

@media all and (max-width: 880px){
    #s25 {}
    #s25 .inner {max-width: var(--innerMo); padding: 8rem 0 5.7rem;}
    #s25 .title {text-align: center; margin-bottom: 3.4rem; font-size: 3rem;}
    #s25 .cont {gap: 4.8rem; flex-direction: column;}
    #s25 .cont .mapArea {width: 100%;}
    #s25 .cont .infoArea {}
    #s25 .cont .infoArea .lst {flex-wrap: wrap;}
    #s25 .cont .infoArea .lst + .lst {padding-top: 2.3rem; margin-top: 2.3rem;}
    #s25 .cont .infoArea .lst .ico {width: 2rem; top: 0;}
    #s25 .cont .infoArea .lst .tit {font-size: 1.6rem; margin: 0 0 0 0.9rem;}
    #s25 .cont .infoArea .lst .con {width: 100%; font-size: 1.8rem; padding-top: 1.3rem;}
    #s25 .cont .infoArea .lst .time {width: 100%; font-size: 1.8rem; padding-top: 1.3rem;}
    #s25 .cont .infoArea .lst .time .div {}
    #s25 .cont .infoArea .lst .time .div + .div {}
    #s25 .cont .infoArea .lst .time .div span {}
    #s25 .cont .infoArea .lst .time .prg {}
    #s25 .cont .infoArea .lst .mdbtn {width: 100%; font-size: 1.8rem; padding-top: 1.3rem;}
    #s25 .cont .infoArea .lst .mdbtn span {font-size: 1.6rem;}
}

.modal {z-index: 9999; display: none;}
.modal .modalBg {background: rgba(0,0,0,0.5)}
.modal .modalBoxA {max-width: 72.5rem; display: none}
.modal .modalBoxB {max-width: 64.2rem; display: none;}
.modal .mdClose {top: 2rem; right: 2rem; width: 2rem; cursor: pointer}

@media all and (max-width: 880px){
    .modal {}
    .modal .modalBg {}
    .modal .modalBoxA {max-width: 86%; width: 100%;}
    .modal .modalBoxB {max-width: 86%; width: 100%;}
    .modal .mdClose {}
}








..