/** 인트로 **/
#intro {background: #fff; z-index: 99999}
#intro .introLogo {max-width: 27.4rem; transform: scale(0.3) rotate(90deg); transition: 1s;}
#intro .introLogo.on {transform: scale(1) rotate(0);}

/** 헤더 **/
#header {z-index: 9999}

.head {background: transparent; transition: 0.2s;}
.head .inner {max-width: 141.6rem; padding: 1.7rem 0 2rem;}
.head .logo {}
.head .gnb {gap: 11rem; margin-left: auto; padding-right: 12rem;}
.head .gnb li {line-height: 1;}
.head .gnb li a {}
.head .call {}
.head .call .callTop {gap: 0.6rem; color: #EDB7E2; letter-spacing: -0.05rem;}
.head .call .callBot {color: #72787F; line-height: 1;}

.head.change {background: rgba(255,255,255,0.85)}
.head.change .gnb {color: #000}
.head.change .call .callTop {color: #662878}

@media all and (max-width: 880px){
    .head .inner {justify-content: center; padding: 1rem 0;}
    .head .logo {width: 51%;}
    .head .logo img {display: block; width: 100%}
    .head .gnb {display: none}
    .head .call {display: none}
}


/** 푸터 **/
#footer {background: #000000}
#footer .inner {color: #A4AAB1; max-width: 78%; padding: 5.8rem 0 6.6rem;}
#footer .ftLogo {}
#footer .info {margin-left: 13.6rem}
#footer .info .infoLst {gap: 4.5rem;}
#footer .info .infoLst + .infoLst {margin-top: 2rem;}
#footer .info .infoLst span {}
#footer .menu {margin-left: auto}
#footer .menu a {}
#footer .menu a + a {margin-top: 2rem;}
#footer .menu span {margin-top: 2rem;}

#footer .modal {z-index: 99999; display: none}
#footer .modalBg {background: rgba(0, 0, 0, 0.7);}
#footer .modalBox {max-width: 72rem;}

@media all and (max-width: 880px){
    #footer .inner {flex-direction: column; max-width: 91%; padding: 3rem 0 12rem;}
    #footer .info {margin: 0; padding: 3rem 0 2rem; font-size: 1.2rem;}
    #footer .info .infoLst {gap: 1.6rem;}
    #footer .info .infoLst + .infoLst {margin-top: 2rem;}
    #footer .menu {margin: 0; font-size: 1.2rem; display: flex; gap: 2.4rem; margin-bottom: 2rem}
    #footer .menu a + a {margin: 0;}
    #footer .menu span {margin: 0;}

    #footer .modalBox {max-width: 88%}
}


/** 사이드바 **/
#float {right: 5%; z-index: 999}
#float .pcFloat li {border-radius: 100%; overflow: hidden;}
#float .pcFloat li + li {margin-top: 0.8rem;}
#float .pcFloat li a {background: rgba(238,240,243,0.5); width: 6.5rem; height: 6.5rem; transition: 0.2s;}
#float .pcFloat li a:hover {background: rgba(238,240,243,0.8)}

@media all and (max-width: 880px){
    #float {background: #000000; width: 100%; bottom: 0; transform: none; top: auto; right: 0;}
    #float .moFloat {padding: 1.7rem 0;}
    #float .moFloat li {flex: 1; gap: 0.4rem; justify-content: center}
    #float .moFloat li + li {border-left: 1px solid #454C53;}
}


/** 상담바 **/
#consultBar {background-color: #662878; z-index: 999; bottom: -100%;}
#consultBar .barUp {background-color: #662878; padding: 1.4rem 6rem; border-radius: 20px 20px 0 0; gap: 1rem; bottom: 100%;}
#consultBar .inner {padding: 5.4rem 0; gap: 7rem;}
#consultBar .field {gap: 2.7rem;}
#consultBar .field .elmArea {gap: 2.4rem;}
#consultBar .field .elmArea input {height: 4.8rem; border-radius: 40px; padding: 1.4rem 1.8rem; width: 26rem; border: 0; box-shadow: none; text-indent: 0; font-family: inherit;}
#consultBar .field .agrArea {}
#consultBar .field .agrArea input {}
#consultBar .conBtn {}
#consultBar .conBtn button {height: 100%; width: 16rem; height: 9.2rem; border-radius: 14px; font-family: inherit;}

@media all and (max-width: 880px){
    #consultBar .barUp {width: 60%; justify-content: center; padding: 1.4rem 0;}
    #consultBar .inner {max-width: 90%; padding: 2rem 0; flex-direction: column; gap: 2rem;}
    #consultBar .field {align-items: baseline; gap: 0.8rem; flex-direction: column;}
    #consultBar .field .elmArea {flex-direction: column; gap: 1rem; width: 100%; font-size: 1.4rem;}
    #consultBar .field .elmArea input {width: 100%; height: 3.8rem; padding: 0 1rem;}
    #consultBar .field .elmArea select {width: 100%; height: 3.8rem; padding: 0 1rem;}
    #consultBar .field .agrArea {font-size: 1.4rem}
    #consultBar .conBtn button {width: 100%; border-radius: 5px; padding: 1rem 0; font-size: 1.8rem; height: auto;}
}


/** 메인 섹션1 **/
#s1 {background: #24122B; padding-top: 10rem;}
#s1 .inner {transition: 1s; overflow: hidden;}
#s1 .inner.on {width: 94.5%; border-radius: 40px;}
#s1 .inner .video {height: 79rem; background: #000}
#s1 .inner .video video {width: 100%; height: 100%; object-fit: cover;}
#s1 .inner .txt {bottom: 7.5rem;}
#s1 .inner .txt .ico {max-width: 8.5rem;}
#s1 .inner .txt .tit {padding: 2rem 0 1.6rem;}
#s1 .inner .txt .wrt {}

@media all and (max-width: 880px){
    #s1 {padding-top: 6.6rem;}
    #s1 .inner.on {width: 91%; border-radius: 30px;}
    #s1 .inner .video {height: 80vh}
    #s1 .inner .txt {bottom: auto; top: 50%; transform: translate(-50%,-50%);}
    #s1 .inner .txt .ico {max-width: 5.6rem;}
    #s1 .inner .txt .tit {font-size: 4rem; line-height: 5rem; padding: 1.6rem 0;}
    #s1 .inner .txt .wrt {font-size: 1.8rem; line-height: 2.8rem;}
}

/** 메인 섹션2 **/
#s2 {}
#s2 .inner {}
#s2 .bgImg {}
#s2 .cont {gap: 15rem; width: 100%}
#s2 .txtArea {}
#s2 .txtArea .subt {font-style: italic; gap: 1.2rem; margin-bottom: 2rem;}
#s2 .txtArea .subt .line {width: 6rem; height: 1px; background: #fff;}
#s2 .txtArea .tit {line-height: 1.2;}
#s2 .txtArea .tit .txt3 {color: #EDB7E2;}
#s2 .imgArea {gap: 5rem;}
#s2 .imgBox {}
#s2 .botLine {width: 2px; height: 20rem; background: #fff;}

#s2 .txtArea .subt {opacity: 0; transition: 1s; bottom: -4rem;}
#s2 .txtArea .subt.on {bottom: 0; opacity: 1;}
#s2 .txtArea .tit div {opacity: 0; transition: 1s; bottom: -4rem;}
#s2 .txtArea .tit div.on {bottom: 0; opacity: 1;}
#s2 .txtArea .tit .txt1.on {opacity: 0.24;}
#s2 .imgArea .imgBox {opacity: 0; transition: 1s; right: -5rem;}
#s2 .imgArea .imgBox.on {opacity: 1; right: 0}

@media all and (max-width: 880px){
    #s2 .cont {flex-direction: column; max-width: 91%; align-items: baseline; gap: 5rem;}
    #s2 .txtArea .tit {font-size: 4.6rem; line-height: 6rem;}
    #s2 .imgArea {flex-direction: column; gap: 1.6rem;}
    #s2 .botLine {height: 6rem;}
}

/** 메인 섹션3 **/
#s3 {}
#s3 .inner {padding-top: 25.3rem;}
#s3 .inner::before {content: ''; display: block; position: absolute; width: 100%; height: 20%; bottom: 0; background: #F6F7F9}
#s3 .topLine {height: 20rem; width: 2px; background: #662878;}
#s3 .title {gap: 3.6rem; margin-bottom: 12.7rem;}
#s3 .title span {padding: 1.7rem 2.1rem 1.6rem 3.5rem; background: #662878}
#s3 .title span .ico {width: 3.8rem; left: -5%; top: -18%;}
#s3 .cont {gap: 9rem; padding-left: 1.2rem;}
#s3 .cont .imgArea {width: 61.4rem; }
#s3 .cont .imgArea .img {}
#s3 .cont .imgArea .img img {}
#s3 .cont .txtArea {padding-top: 4.3rem;}
#s3 .cont .txtArea .subt {}
#s3 .cont .txtArea .tit {line-height: 8.2rem; margin: 2.2rem 0 4.9rem;}
#s3 .cont .txtArea .tit span {color: #662878}
#s3 .cont .txtArea .wrt {gap: 10rem; line-height: 3rem;}
#s3 .cont .txtArea .wrt .txt {}
#s3 .cont .txtArea .wrt img {width: 33.5rem;}
#s3 .cont .txtArea .lst {margin-top: 5rem; padding-bottom: 1rem;}
#s3 .cont .txtArea .lst li {background: #FFFFFF; box-shadow: 2px 2px 15px rgba(0,0,0,0.1); width: 63rem; padding: 2.6rem 0; padding-left: 5.2rem;}
#s3 .cont .txtArea .lst li b {font-weight: 800}
#s3 .cont .txtArea .lst li::before {content: ''; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3.8rem; height: 2px; background: #662878}
#s3 .cont .txtArea .lst li + li {margin-top: 1.6rem;}


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

@media all and (max-width: 880px){
    #s3 .inner {padding-top: 12rem; max-width: 91%; margin: 0 auto}
    #s3 .topLine {height: 6rem;}
    #s3 .title {gap: 2rem; margin-bottom: 4.8rem; flex-direction: column; text-align: center; font-size: 4.6rem}
    #s3 .title span {padding: 1.3rem 2.2rem 1.3rem 2.6rem;}
    #s3 .title span .ico {width: 2.8rem;}
    #s3 .cont {flex-direction: column; padding: 0; gap: 4.8rem;}
    #s3 .cont .imgArea {width: 100%;}
    #s3 .cont .txtArea {padding: 0;}
    #s3 .cont .txtArea .subt {font-size: 2.4rem;}
    #s3 .cont .txtArea .tit {font-size: 4.6rem; line-height: 6rem; margin: 2.2rem 0 2.9rem;}
    #s3 .cont .txtArea .wrt {flex-direction: column; gap: 4rem; font-size: 1.6rem; line-height: 2.8rem; align-items: baseline;}
    #s3 .cont .txtArea .wrt img {width: 24.5rem; margin-left: auto;}
    #s3 .cont .txtArea .lst li {width: 100%; text-align: center; padding: 1.8rem 0; font-size: 1.6rem; line-height: 2.8rem;}
    #s3 .cont .txtArea .lst li::before {display: none;}
}


/** 메인 섹션4 **/
#s4 {background: #F6F7F9;}
#s4 .inner {padding: 25rem 0 23.8rem;}
#s4 .txtArea {}
#s4 .txtArea .ico {}
#s4 .txtArea .tit {padding: 3.2rem 0;}
#s4 .txtArea .tit i {color: #662878;}
#s4 .txtArea .wrt {}
#s4 .txtArea .tab {margin-top: 5.6rem; gap: 1.6rem;}
#s4 .txtArea .tab li {padding: 1.6rem 2.4rem; color: #C9CDD2; background: #fff; border: 1px solid #C9CDD2; border-radius: 29px; text-align: center; min-width: 18rem; cursor: pointer; transition: 0.1s; line-height: 1;}
#s4 .txtArea .tab li.on {color: #fff; border: 1px solid #662878; background: #662878; font-weight: 800}
#s4 .imgArea {max-width: 149.6rem; margin-top: 7.2rem; border-radius: 30px;}
#s4 .imgArea .imgLst {opacity: 0; transition: 0.3s;}
#s4 .imgArea .imgLst.on {opacity: 1;}
#s4 .imgArea .imgLst .img {}
#s4 .imgArea .imgLst .txt {left: 56%; line-height: 3.2rem;}
#s4 .imgArea .imgLst .txt .tit {padding-bottom: 2.4rem;}
#s4 .imgArea .imgLst .txt .wrt {}
#s4 .imgArea .imgLst .txt .wrt b {font-weight: 800}

@media all and (max-width: 880px){
    #s4 .inner {max-width: 91%; margin: 0 auto; padding: 8.8rem 0;}
    #s4 .txtArea .ico {max-width: 4.4rem;}
    #s4 .txtArea .tit {font-size: 3.2rem; padding: 2.4rem 0 2rem; text-align: center;}
    #s4 .txtArea .wrt {font-size: 1.4rem; line-height: 2.2rem;}
    #s4 .txtArea .tab {flex-wrap: wrap; width: 100%; gap: 0.7rem; font-size: 1.6rem; text-align: center; margin-top: 2.4rem;}
    #s4 .txtArea .tab li {padding: 1.4rem 0; min-width: auto; width: calc((100% - 0.7rem) / 2);}
    #s4 .imgArea {margin-top: 4.8rem;}
    #s4 .imgArea .imgLst .txt {left: 8%; top: 10%; transform: none;}
    #s4 .imgArea .imgLst .txt .tit {font-size: 2.4rem; padding-bottom: 2rem;}
    #s4 .imgArea .imgLst .txt .wrt {font-size: 1.6rem; line-height: 2.8rem}
}


/** 메인 섹션5 **/
#s5 {}
#s5 .grad {background: rgb(102,40,120); background: linear-gradient(90deg, rgba(102,40,120,1) 27%, rgba(237,183,226,1) 100%);}
#s5 .grad .inner {padding: 4rem; padding-left: 1rem; transition: 1s;}
#s5 .grad .inner div:nth-child(1) {position: relative;}
#s5 .grad .inner div:nth-child(2) {}

#s5 .grad .inner.trigger_act_off {max-width: 121.6rem; opacity: 0;}
#s5 .grad .inner.trigger_act_on {max-width: 141.6rem; opacity: 1;}
#s5 .grad .inner.trigger_act_off div:nth-child(1)::after {content: ''; display: block; position: absolute; background: #fff; width: 0; height: 1px; left: 105%; top: 50%; transition: 1s}
#s5 .grad .inner.trigger_act_on div:nth-child(1)::after {content: ''; display: block; position: absolute; background: #fff; width: 14rem; height: 1px; left: 105%; top: 50%; transition: 1s}

#s5 .cont {padding-top: 29rem; background: #000000;}
#s5 .cont .titArea {margin-bottom: 5rem;}
#s5 .cont .titArea .subt {margin-bottom: 1rem;}
#s5 .cont .titArea .tit {text-transform: uppercase; line-height: 13rem;}
#s5 .cont .titArea .tit i {color: #EDB7E2}
#s5 .cont .contArea {max-width: 94.5%; overflow: hidden;}
#s5 .cont .contArea img {transition: 1s;}
#s5 .cont .contArea .lst {}
#s5 .cont .contArea .lst1 {top: 14%; right: 11%;}
#s5 .cont .contArea .lst2 {top: 30%; left: 14%;}
#s5 .cont .contArea .lst3 {top: 42%; left: 62%;}
#s5 .cont .contArea .lst4 {top: 59%; left: 21%;}
#s5 .cont .prg {margin-top: 8rem;}

#s5 .cont .contArea.trigger_act_off img {transform: scale(1.05);}
#s5 .cont .contArea.trigger_act_on img {transform: scale(1);}

#s5 .cont .contArea .lst {opacity: 0; transition: 1s;}
#s5 .cont .contArea .lst.on {opacity: 1;}

@media all and (max-width: 880px){
    #s5 .grad .inner {flex-direction: column; padding: 3.5rem 0;}
    #s5 .grad .inner div {text-align: center;}
    #s5 .grad .inner div:nth-child(1) {font-size: 1.6rem; padding-bottom: 3rem;}
    #s5 .grad .inner.trigger_act_on div:nth-child(1)::after {left: 50%; transform: translateX(-50%); top: auto; bottom: 1.4rem; width: 6.6rem;}
    #s5 .grad .inner div:nth-child(2) {font-size: 2rem;}

    #s5 .cont {padding: 13rem 0 0;}
    #s5 .cont .titArea {margin-bottom: 2rem}
    #s5 .cont .titArea .subt {font-size: 1.6rem;}
    #s5 .cont .titArea .tit {font-size: 6.4rem; line-height: 6.2rem; padding-top: 0.8rem}
    #s5 .cont .contArea {max-width: 91%}
    #s5 .cont .contArea .lst {margin-top: 2.4rem; opacity: 1;}
    #s5 .cont .contArea .lst li + li {margin-top: 1.2rem;}
    #s5 .cont .contArea .lst li {width: 84.5%; margin: 0 auto;}
    #s5 .cont .contArea .lst li img {display: block; width: 100%}
    #s5 .cont .prg {margin-top: 2.2rem; font-size: 1.6rem; line-height: 2.8rem;}
}

/** 메인 섹션6 **/
#s6 {background: #000000; padding: 34rem 0 13rem;}
#s6 .inner {}
#s6 .symbol {left: 0; animation-name:spinCircle; animation-duration: 15s; animation-iteration-count:infinite; animation-timing-function:linear;}
#s6 .cont {padding-left: 24%;}
#s6 .subt {}
#s6 .tit {padding: 3rem 0 4rem; line-height: 7.5rem;}
#s6 .tit i {color: #EDB7E2;}
#s6 .wrt {line-height: 3.2rem}
#s6 .step {margin-top: 3.7rem;}
#s6 .step::before {content: ''; display: block; position: absolute; height: 1px; background: #EDB7E2; width: 86%; bottom: 33%;}
#s6 .step li {}
#s6 .step li:nth-child(1) {margin-right: 13.2rem;}
#s6 .step li:nth-child(2) {margin-right: 13.2rem;}
#s6 .step li:nth-child(3) {margin-right: 9rem;}
#s6 .step li:nth-child(4) {margin-right: 14.2rem;}
#s6 .step li:nth-child(5) {}
#s6 .step li .img {}

#s6 .step li {opacity: 0; left: -2rem; transition: 1s;}
#s6 .step li.on {opacity: 1; left: 0}

@keyframes spinCircle {
    from {
        transform:translate(-50%, -50%) rotate(0);
    }
    to {
        transform:translate(-50%, -50%) rotate(360deg);
    }
}

@media all and (max-width: 880px){
    #s6 {padding: 18rem 0 0 0;}
    #s6 .symbol {max-width: 35rem; top: 17%; left: -50%;}
    #s6 .cont {padding: 0; max-width: 91%; margin: 0 auto; text-align: center;}
    #s6 .subt {font-size: 1.6rem;}
    #s6 .tit {font-size: 3.2rem; line-height: 4.2rem;}
    #s6 .wrt {font-size: 1.6rem; line-height: 2.8rem;}
    #s6 .step {margin-top: 6.5rem; flex-direction: column; align-items: baseline;}
    #s6 .step::before {width: 1px; height: 100%; bottom: 0; transform: none; left: 29%}
    #s6 .step li {margin-right: 0 !important; width: 95%}
    #s6 .step li + li {margin-top: 3.5rem;}
}

/** 메인 섹션7 **/
#s7 {background: #000; overflow: hidden;}
#s7 .inner {padding: 30rem 0 25.4rem; max-width: 141rem;}
#s7 .txtArea {padding-top: 1rem;}
#s7 .txtArea .subt {}
#s7 .txtArea .tit {padding: 1.2rem 0 3.2rem; line-height: 6.4rem;}
#s7 .txtArea .tit i {color: #EDB7E2}
#s7 .txtArea .wrt {margin-bottom: 5.6rem;}
#s7 .txtArea .lst {gap: 1rem; width: 43.2rem}
#s7 .txtArea .lst li {width: calc((100% - 1rem) / 2); padding: 1.9rem 0; border-radius: 50px;}
#s7 .txtArea .lst li:hover {background: #662878; color: #fff;}
#s7 .txtArea .navi {gap: 1.6rem; margin-top: 6.4rem;}
#s7 .txtArea .navi .naviCom {width: 6rem; height: 6rem;}
#s7 .txtArea .navi .naviCom img.on {opacity: 0}
#s7 .txtArea .navi .naviCom:hover img.on {opacity: 1;}
#s7 .txtArea .navi .naviLeft {}
#s7 .txtArea .navi .naviRight {}
#s7 .s7_swiper {overflow: hidden; max-width: 74rem;}
#s7 .s7_swiper .slide {border-radius: 30px; overflow: hidden; display: flex; flex-direction: column; height: 61.5rem;}
#s7 .s7_swiper .slide .txt {padding: 6rem 0 0 0;}
#s7 .s7_swiper .slide .tit {padding-bottom: 2.4rem;}
#s7 .s7_swiper .slide .tit.etc {padding-bottom: 1.6rem;}
#s7 .s7_swiper .slide .tit .subt {display: block;}
#s7 .s7_swiper .slide .wrt {line-height: 2.8rem;}
#s7 .s7_swiper .slide .img {margin-top: auto;}
#s7 .s7_swiper .slide .img .num {background: #000; border-radius: 100%; width: 7rem; height: 7rem; top: -3.5rem;}

@media all and (max-width: 880px){
    #s7 .inner {padding: 15rem 0 20rem; flex-direction: column; max-width: 100%;}
    #s7 .txtArea {padding: 0; max-width: 91%; margin: 0 auto; margin-bottom: 5.8rem;}
    #s7 .txtArea .subt {font-size: 2rem;}
    #s7 .txtArea .tit {font-size: 3.2rem; padding: 1.2rem 0 1.6rem; line-height: 4rem;}
    #s7 .txtArea .wrt {font-size: 2rem; margin-bottom: 3.2rem;}
    #s7 .txtArea .lst {gap: 0.8rem; width: 90%;}
    #s7 .txtArea .lst li {padding: 1rem 0; width: calc((100% - 0.8rem) / 2);}
    #s7 .txtArea .lst li:nth-child(5) {width: 65%}
    #s7 .txtArea .lst li:nth-child(6) {width: 65%}
    #s7 .txtArea .navi {gap: 1.2rem; margin: 3.2rem 0 0 0;}
    #s7 .txtArea .navi .naviCom {width: 4rem; height: 4rem;}

    #s7 .s7_swiper {width: 91%; margin: 0 auto; max-width: 91%}
    #s7 .s7_swiper .slide {height: 50rem;}
    #s7 .s7_swiper .slide .txt {padding: 3.4rem 0 0;}
    #s7 .s7_swiper .slide .tit {font-size: 2.4rem; padding-bottom: 2.2rem;}
    #s7 .s7_swiper .slide .tit.etc {padding-bottom: 1.2rem;}
    #s7 .s7_swiper .slide .img .num {font-size: 1.6rem; width: 5rem; height: 5rem; top: -2.5rem;}
}


/** 메인 섹션8 **/
#s8 {}
#s8 .inner {max-width: 90%; padding: 27rem 0 14rem;}

#s8 .botArea {background: #FCF8FB; border-radius: 37px; overflow: hidden; padding: 13rem 0; gap: 12.4rem;}
#s8 .botArea .txtArea {}
#s8 .botArea .txtArea .tit {line-height: 7.5rem; padding-bottom: 5.6rem;}
#s8 .botArea .txtArea .tit i {color: #662878}
#s8 .botArea .txtArea .wrt {line-height: 3.6rem; color: #33383C}
#s8 .botArea .imgArea {gap: 1.6rem;}
#s8 .botArea .imgArea li {}
#s8 .botArea .imgArea li .circle {max-width: 27.4rem}
#s8 .botArea .imgArea li .circle img {z-index: 1;}
#s8 .botArea .imgArea li .circle .txt {font-style: italic; text-transform: uppercase; z-index: 2; width: 100%; text-align: center;}
#s8 .botArea .imgArea li .prg {margin-top: 6.3rem;}

#s8 .botArea .imgArea li .circle::before {content: ''; display: block; position: absolute; width: 35.8rem; height: 35.8rem; border-radius: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #F9DAF4;}
#s8 .botArea .imgArea li:nth-child(2) .circle::before {background: #F2E7F0}

#s8 .botArea .txtArea .tit {opacity: 0; left: -2rem; transition: 1s}
#s8 .botArea .txtArea .wrt {opacity: 0; left: -2rem; transition: 1s}
#s8 .botArea .txtArea .tit.on {opacity: 1; left: 0;}
#s8 .botArea .txtArea .wrt.on {opacity: 1; left: 0;}

#s8 .botArea .imgArea li .circle::before {width: 0; height: 0; transition: 1s;}
#s8 .botArea .imgArea li.on .circle::before {width: 35.8rem; height: 35.8rem}

@media all and (max-width: 880px){
    #s8 .inner {max-width: 91%; padding: 12rem 0 18rem;}
    #s8 .botArea {margin-top: 2.4rem; padding: 6rem 0 7rem; border-radius: 30px; flex-direction: column; gap: 7rem;}
    #s8 .botArea .txtArea .tit {font-size: 3.2rem; padding-bottom: 2rem; line-height: 4rem;}
    #s8 .botArea .txtArea .wrt {font-size: 1.4rem; line-height: 2.2rem;}
    #s8 .botArea .imgArea {flex-direction: column; gap: 1.8rem;}
    #s8 .botArea .imgArea li .circle {max-width: 19.4rem;}
    #s8 .botArea .imgArea li .circle::before {width: 25.2rem; height: 25.2rem}
    #s8 .botArea .imgArea li .circle .txt {font-size: 2rem;}
    #s8 .botArea .imgArea li .circle .moTxt {padding-top: 0.8rem; font-style: normal; line-height: 2.2rem;}

    #s8 .botArea .imgArea li .circle::before {width: 0; height: 0; transition: 1s;}
    #s8 .botArea .imgArea li.on .circle::before {width: 25.2rem; height: 25.2rem}

}

/** 메인 섹션15 **/
#s9 {}
#s9 .inner {padding: 19rem 0 14rem; overflow: hidden;}
#s9 .inner::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 0; background: url('../img/s9_bg.jpg') no-repeat top/cover;}
#s9 .titArea {margin-bottom: 9rem;}
#s9 .titArea .symbol {max-width: 10.7rem;}
#s9 .titArea .title {padding: 3.2rem 0 6rem; line-height: 8.4rem;}
#s9 .titArea .title i {color: #662878}
#s9 .titArea .subt {margin-bottom: 9rem;}
#s9 .titArea .lst {gap: 4.4rem;}
#s9 .titArea .lst li {gap: 1.4rem; }
#s9 .titArea .lst li .ico {max-width: 7rem;}
#s9 .titArea .lst li .txt {}
#s9 .titArea .lst li .txt .tit {padding-bottom: 0.8rem;}
#s9 .titArea .lst li .txt .wrt {}
#s9 .s9_swiper {overflow: hidden;}

#s9 .inner.trigger_act_off::before {top: 5%; transition: 4s;}
#s9 .inner.trigger_act_on::before {top: 0; transition: 4s;}

#s9 .titArea .symbol {opacity: 0; bottom: -4rem; transition: 0.8s;}
#s9 .titArea .title {opacity: 0; bottom: -4rem; transition: 0.8s;}
#s9 .titArea .subt {opacity: 0; bottom: -4rem; transition: 0.8s;}
#s9 .titArea .lst {opacity: 0; bottom: -4rem; transition: 0.8s;}
#s9 .titArea .symbol.on {opacity: 1; bottom: 0}
#s9 .titArea .title.on {opacity: 1; bottom: 0}
#s9 .titArea .subt.on {opacity: 1; bottom: 0}
#s9 .titArea .lst.on {opacity: 1; bottom: 0}

@media all and (max-width: 880px){
    #s9 .inner {background: url('../img/s9_bg_mo.jpg') no-repeat top/cover; padding: 0 0 7.3rem;}
    #s9 .titArea {}
    #s9 .titArea .symbol {max-width: 24%;}
    #s9 .titArea .title {font-size: 3.2rem; padding: 2.2rem 0 2.4rem; line-height: 4.2rem;}
    #s9 .titArea .subt {font-size: 1.6rem; line-height: 2.8rem; margin-bottom: 3.8rem;}
    #s9 .titArea .lst {flex-wrap: wrap; gap: 1.8rem 1.4rem; max-width: 86%; margin: 0 auto; align-items: baseline;}
    #s9 .titArea .lst li {width: calc((100% - 1.4rem) / 2); flex-direction: column; text-align: center; align-items: center; gap: 0.8rem;}
    #s9 .titArea .lst li .txt {text-align: center;}
    #s9 .titArea .lst li .txt .tit {padding-bottom: 0.6rem; font-size: 1.8rem;}
    #s9 .titArea .lst li .txt .wrt {font-size: 1.4rem;}
}


/** 메인 섹션10 **/
#s10 {}
#s10 .inner {padding: 16rem 0 14rem; max-width: 150.8rem;}
#s10 .mapArea {}

#s10 .infoArea {margin-top: 8.8rem;}
#s10 .infoBox {width: 50%; padding-left: 8rem;}
#s10 .infoBox .title {gap: 2.6rem; margin-bottom: 4.2rem;}
#s10 .infoBox .title .tit {}
#s10 .infoBox .infoLst {}
#s10 .infoBox .infoLst .lst {}
#s10 .infoBox .infoLst .lst + .lst {margin-top: 3.5rem}
#s10 .infoBox .infoLst .lst .tit {min-width: 12.4rem; color: #662878}
#s10 .infoBox .infoLst .lst .wrt {}
#s10 .infoBox .infoLst .lst .wrt b {font-weight: 800}
#s10 .infoBox .infoLst .lst .wrt i {color: #662878}
#s10 .infoBox .infoLst .lst .wrt span {background: #662878; border-radius: 12px; display: inline-block; padding: 0.3rem 1rem; margin-left: 0.6rem;}
#s10 .infoBox .prg {margin-top: 2.3rem; line-height: 2.8rem;}

#s10 .infoBox.box1 {}
#s10 .infoBox.box2 {border-left: 1px solid #A4AAB1;}
#s10 .infoBox.box2 .infoLst .lst + .lst {margin-top: 2.2rem}
#s10 .infoBox .infoLst .lst.callLst {}
#s10 .infoBox .infoLst .lst.plusLst .wrt {gap: 1rem;}
#s10 .infoBox .infoLst .lst.locaLst .wrt {line-height: 3.2rem;}

@media all and (max-width: 880px){
    #s10 .inner {padding: 7rem 0 10rem;}
    #s10 .mapArea {max-width: 91%; margin: 0 auto}

    #s10 .infoArea {flex-direction: column; margin-top: 4.6rem;}
    #s10 .infoBox {width: 100%; padding: 0; max-width: 91%; margin: 0 auto;}
    #s10 .infoBox .title {font-size: 1.2rem; gap: 1.2rem; margin-bottom: 4.6rem}
    #s10 .infoBox .title .tit {font-size: 3.2rem; }
    #s10 .infoBox .infoLst .lst + .lst {margin-top: 3.2rem;}
    #s10 .infoBox .infoLst .lst .tit {font-size: 1.6rem; min-width: 8.6rem;}
    #s10 .infoBox .infoLst .lst .wrt {font-size: 1.6rem;}
    #s10 .infoBox .infoLst .lst.locaLst .wrt {line-height: 2.8rem;}

    #s10 .infoBox.box2 {border: 0; padding-top: 6rem; margin-top: 6rem; border-top: 1px solid #A4AAB1;}
    #s10 .infoBox.box2 .infoLst .lst + .lst {margin-top: 2rem;}
}

.