/*** 메인 ***/
#mainMenu {position: fixed; z-index: 9; top: 50%; transform: translateY(-50%);}
#mainMenu .menuLst {}
#mainMenu .menuLst li {width: 50px; height: 200px; left: -1rem; transition: 0.4s;}
#mainMenu .menuLst li a {font-size: 1.6rem; font-weight: bold; color: #999999; display: block; height: 100%;}
#mainMenu .menuLst li span {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg);}

#mainMenu .menuLst li::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; background: url('@/assets/img/main/float_menu_bg.svg') center/contain; filter: brightness(0.3) opacity(0.85) drop-shadow(1px 3px 5px black)}

#mainMenu .menuLst li:nth-child(1) {bottom: -3rem; z-index: 3;}
#mainMenu .menuLst li:nth-child(2) {z-index: 2;}
#mainMenu .menuLst li:nth-child(3) {top: -3rem; z-index: 1;}

#mainMenu .menuLst li:hover {left: 0;}
#mainMenu .menuLst li:hover:nth-child(1) a {color: #D54F90;}
#mainMenu .menuLst li:hover:nth-child(2) a {color: #EC7D4F;}
#mainMenu .menuLst li:hover:nth-child(3) a {color: #7A74FF;}

@media all and (max-width: 880px){
    #mainMenu {display: none;}
}


#main {}

#main .s1 {}
#main .s1 .inner {height: 100vh; background: url('@/assets/img/main/s1_bg.jpg') center/cover; background-attachment: fixed;}
#main .s1 .txtArea {left: 30rem; margin-top: -5rem;}
#main .s1 .txtArea .tit {font-size: 6.4rem; font-weight: bold; color: #fff;}
#main .s1 .txtArea .wrt {font-size: 2.4rem; color: #fff; padding-top: 0rem; font-size: 36px;}

@media all and (max-width: 880px){
    #main {overflow: hidden;}

    #main .s1 {}
    #main .s1 .inner {}
    #main .s1 .txtArea {left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center;}
    #main .s1 .txtArea .tit {font-size: 3.8rem;}
    #main .s1 .txtArea .wrt {font-size: 2.8rem; line-height: 4.5rem; padding-top: 4rem;}
}

#main .s2 {background: #101010; overflow: visible;}
#main .s2 .inner {padding: 20rem 0;}
#main .s2 .content {justify-content: space-between;}
#main .s2 .txtArea {align-self: flex-start; position: sticky; top: 35vh}
#main .s2 .txtArea .tit {font-size: 4.8rem; font-weight: bold; color: #fff;}
#main .s2 .txtArea .tit span {color: #D54F90;}
#main .s2 .txtArea .subt {font-size: 2rem; color: #999999; line-height: 3.4rem; margin: 5rem 0 10rem;}
#main .s2 .txtArea .subt b {color: #fff;}
#main .s2 .txtArea .btn {background: #D54F90; border-radius: 3rem; display: inline-block; overflow: hidden;}
#main .s2 .txtArea .btn a {display: inline-block; padding: 2rem 4.8rem;}
#main .s2 .txtArea .btn a::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; background: #AC366F; top: 0; left: -100%; border-radius: 3rem; transition: 0.4s;}
#main .s2 .txtArea .btn:hover a::before {left: 0;}
#main .s2 .txtArea .btn a span {font-size: 1.8rem; color: #fff; font-weight: bold;}
#main .s2 .lstArea {width: 66rem; border-top: 1px solid #4F4F4F;}
#main .s2 .lstArea li {border-bottom: 1px solid #4F4F4F; }
#main .s2 .lstArea li .cont {padding: 6rem 0; justify-content: space-between;}
#main .s2 .lstArea li .txt {}
#main .s2 .lstArea li .num {font-size: 1.6rem; font-weight: bold; color: #D54F90;}
#main .s2 .lstArea li .tit {font-size: 2.4rem; font-weight: bold; color: #fff; margin: 1.5rem 0 2rem;}
#main .s2 .lstArea li .wrt {font-size: 1.6rem; line-height: 1.9rem; color: #fff; opacity: 0.7}
#main .s2 .lstArea li .ico {}
#main .s2 .moBtn {display: none;}

@media all and (max-width: 880px){
    #main .s2 {}
    #main .s2 .inner {}
    #main .s2 .content {flex-direction: column; gap: 5rem;}
    #main .s2 .txtArea {}
    #main .s2 .txtArea .tit {}
    #main .s2 .txtArea .subt {font-size: 2.8rem; line-height: 3.8rem; margin: 4.2rem 0 0 0;}
    #main .s2 .txtArea .btn {display: none;}
    #main .s2 .lstArea {width: 100%;}
    #main .s2 .lstArea li {}
    #main .s2 .lstArea li .cont {padding: 5.2rem 0;}
    #main .s2 .lstArea li .txt {}
    #main .s2 .lstArea li .num {font-size: 2.4rem;}
    #main .s2 .lstArea li .tit {font-size: 2.4rem; margin: 1.2rem 0;}
    #main .s2 .lstArea li .wrt {font-size: 2.4rem; line-height: 3.4rem;}
    #main .s2 .lstArea li .ico {width: 13rem; height: 13rem;}
    #main .s2 .lstArea li .ico img {display: block; width: 100%;}
    #main .s2 .moBtn {background: #D54F90; border-radius: 3rem; display: inline-block; overflow: hidden; align-self: center;}
    #main .s2 .moBtn a {display: inline-block; padding: 2rem 4.8rem;}
    #main .s2 .moBtn a span {font-size: 1.8rem; color: #fff; font-weight: bold;}
}

#main .s3 {}
#main .s3 .inner {background: url('@/assets/img/main/s3_bg.png') center/100%; background-attachment: fixed; padding: 10.8rem 0;}
#main .s3 .txtArea {}
#main .s3 .txtArea .tit {font-size: 4.2rem; font-weight: bold; color: #fff;}
#main .s3 .txtArea .wrt {font-size: 2.4rem; line-height: 3.4rem; color: #fff; opacity: 0.7; padding-top: 2.6rem;}

@media all and (max-width: 880px){
    #main .s3 {}
    #main .s3 .inner {padding: 10.4rem 0;}
    #main .s3 .txtArea {}
    #main .s3 .txtArea .tit {}
    #main .s3 .txtArea .wrt {padding-top: 3rem;}
}

#main .s4 {background: #101010; overflow: visible;}
#main .s4 .inner {padding: 20rem 0;}
#main .s4 .content {justify-content: space-between;}
#main .s4 .txtArea {align-self: flex-start; position: sticky; top: 35vh}
#main .s4 .txtArea .tit {font-size: 4.8rem; font-weight: bold; color: #fff;}
#main .s4 .txtArea .tit span {color: #EC7D4F;}
#main .s4 .txtArea .subt {font-size: 2rem; color: #fff; line-height: 3.4rem; margin: 5rem 0 10rem;}
#main .s4 .txtArea .subt b {color: #fff;}
#main .s4 .txtArea .btn {background: #fff; border-radius: 3rem; display: inline-block; overflow: hidden;}
#main .s4 .txtArea .btn a {display: inline-block; padding: 2rem 4.8rem;}
#main .s4 .txtArea .btn a::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; background: #EC7D4F; top: 0; left: -100%; border-radius: 3rem; transition: 0.4s;}
#main .s4 .txtArea .btn:hover a::before {left: 0;}
#main .s4 .txtArea .btn a span {font-size: 1.8rem; color: #EC7D4F; font-weight: bold;}
#main .s4 .txtArea .btn:hover a span {color:#fff; transition: 0.4s;}
#main .s4 .lstArea {gap: 2.4rem; width: 66rem; flex-shrink: 0;}
#main .s4 .lstArea li {width: calc((100% - 2.4rem) / 2);}
#main .s4 .lstArea li:nth-child(even) {top: 15.9rem;}
#main .s4 .lstArea li .img {filter: brightness(0.5) grayscale(0.8); transition: 0.4s;}
#main .s4 .lstArea li .tit {font-size: 2.4rem; color: #fff; font-weight: bold; position: absolute; bottom: 2.4rem; transition: 0.4s; width: 100%; padding: 0 2.4rem;}
#main .s4 .lstArea li .wrt {font-size: 1.6rem; line-height: 2.2rem; color: #fff; position: absolute; bottom: 2.4rem; opacity: 0; transition: 0.4s; width: 100%; padding: 0 2.4rem;}

#main .s4 .lstArea li:hover {}
#main .s4 .lstArea li:hover .img {filter: none;}
#main .s4 .lstArea li:hover .tit {bottom: 5.3rem;}
#main .s4 .lstArea li:nth-child(1):hover .tit {bottom: 7.2rem;}
#main .s4 .lstArea li:nth-child(2):hover .tit {bottom: 7.2rem;}
#main .s4 .lstArea li:hover .wrt {opacity: 0.7;}

#main .s4 .mainMoSwiper {display: none}
#main .s4 .moBtn {display: none;}

html[lang="en"] #main .s4 .lstArea li:hover .tit {bottom: 7rem;}
html[lang="en"] #main .s4 .lstArea li:nth-child(1):hover .tit {bottom: 13.2rem;}
html[lang="en"] #main .s4 .lstArea li:nth-child(2):hover .tit {bottom: 11.2rem;}
html[lang="en"] #main .s4 .lstArea li:nth-child(7):hover .tit {bottom: 5.3rem;}

@media all and (max-width: 880px){
    #main .s4 {}
    #main .s4 .inner {max-width: 100%;}
    #main .s4 .content {flex-direction: column; gap: 5rem;}
    #main .s4 .txtArea {max-width: 87.5%; margin: 0 auto}
    #main .s4 .txtArea .tit {}
    #main .s4 .txtArea .tit span {}
    #main .s4 .txtArea .subt {font-size: 2.8rem; line-height: 3.8rem; margin: 4.2rem 0 0 0;}
    #main .s4 .txtArea .subt b {}
    #main .s4 .txtArea .btn {display: none}
    #main .s4 .lstArea {display: none}
    #main .s4 .mainMoSwiper {overflow: hidden; display: block;}
    #main .s4 .mainMoSwiper .navBtn {display: flex; gap: 0.8rem; margin-bottom: 4rem; justify-content: flex-end; padding-right: 6.5%;}
    #main .s4 .mainMoSwiper .mainMoPrev,
    #main .s4 .mainMoSwiper .mainMoNext {left: auto; right: auto; top: auto; position: relative; margin: 0; width: 5rem; height: 5rem; background: rgba(255, 255, 255, 0.1); transition: 0.2s; border-radius: 50%;}
    #main .s4 .mainMoSwiper .mainMoPrev:hover,
    #main .s4 .mainMoSwiper .mainMoNext:hover {background: rgba(255,255,255,0.25);}
    #main .s4 .mainMoSwiper .mainMoPrev::after,
    #main .s4 .mainMoSwiper .mainMoNext::after {font-weight: bold; color: #fff; font-size: 1.5rem;}
    #main .s4 .mainMoSwiper .swiper-wrapper {padding-left: 4rem;}
    #main .s4 .moBtn {background: #EC7D4F; border-radius: 3rem; display: inline-block; overflow: hidden; align-self: center;}
    #main .s4 .moBtn a {display: inline-block; padding: 2rem 4.8rem;}
    #main .s4 .moBtn a span {font-size: 1.8rem; color: #fff; font-weight: bold;}
}

#main .s5 {}
#main .s5 .inner {background: url('@/assets/img/main/s5_bg.png') center/100%; background-attachment: fixed; padding: 10.8rem 0;}
#main .s5 .txtArea {}
#main .s5 .txtArea .tit {font-size: 4.2rem; font-weight: bold; color: #fff;}
#main .s5 .txtArea .wrt {font-size: 2.4rem; line-height: 3.4rem; color: #fff; opacity: 0.7; padding-top: 2.6rem;}

@media all and (max-width: 880px){
    #main .s5 {}
    #main .s5 .inner {padding: 10.4rem 0;}
    #main .s5 .txtArea {}
    #main .s5 .txtArea .tit {}
    #main .s5 .txtArea .wrt {padding-top: 3rem;}
}

#main .s6 {background: #101010;}
#main .s6 .inner {padding: 20rem 0 19rem;}
#main .s6 .txtArea {margin-bottom: 8rem;}
#main .s6 .txtArea .txt {}
#main .s6 .txtArea .txt .tit {font-size: 4.8rem; font-weight: bold; color: #fff; margin-bottom: 5rem;}
#main .s6 .txtArea .txt .tit span {color: var(--pcr);}
#main .s6 .txtArea .txt .wrt {font-size: 2rem; line-height: 3rem; color: #999999;}
#main .s6 .txtArea .txt .wrt b {color: #fff;}
#main .s6 .txtArea .swipNav {display: flex; gap: 0.8rem;}
#main .s6 .txtArea .swipNav .mainPrev,
#main .s6 .txtArea .swipNav .mainNext {left: auto; right: auto; top: auto; position: relative; margin: 0; width: 5rem; height: 5rem; background: rgba(255, 255, 255, 0.1); transition: 0.2s; border-radius: 50%;}
#main .s6 .txtArea .swipNav .mainPrev:hover,
#main .s6 .txtArea .swipNav .mainNext:hover {background: rgba(255,255,255,0.25);}
#main .s6 .txtArea .swipNav .mainPrev::after,
#main .s6 .txtArea .swipNav .mainNext::after {font-weight: bold; color: #fff; font-size: 1.5rem;}
#main .s6 .txtArea .swipNav .mainPrev {}
#main .s6 .txtArea .swipNav .mainNext {}

#main .s6 .mainSwiper {overflow: hidden;}
#main .s6 .mainSwiper .slide {background: rgba(255,255,255,0.1); border-radius: 2rem; overflow: hidden; padding: 4rem; transition: 0.4s;}
#main .s6 .mainSwiper .slide::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #1C1C38; background: linear-gradient(180deg,rgba(28, 28, 56, 1) 0%, rgba(45, 45, 107, 1) 100%); opacity: 0; transition: 0.4s;}
#main .s6 .mainSwiper .slide:hover::before {opacity: 1;}
#main .s6 .mainSwiper .tit {font-size: 1.8rem; color: #fff; font-weight: bold}
#main .s6 .mainSwiper .tit span {color: var(--pcr); padding-right: 0.8rem;}
#main .s6 .mainSwiper .ico {margin: 9.4rem 0 8rem; text-align: center;}
#main .s6 .mainSwiper .ico img {max-height: 10rem;}
#main .s6 .mainSwiper .lst {}
#main .s6 .mainSwiper .lst li {font-size: 1.6rem; color: #fff; padding-left: 1.3rem;}
#main .s6 .mainSwiper .lst li::before {content: ''; display: block; position: absolute; width: 0.5rem; height: 0.5rem; background: #fff; border-radius: 50%; left: 0; top: 50%; transform: translateY(-50%);}
#main .s6 .mainSwiper .lst li + li {margin-top: 0.9rem;}


@media all and (max-width: 880px){
    #main .s6 {}
    #main .s6 .inner {}
    #main .s6 .txtArea {flex-direction: column; gap: 5rem; margin-bottom: 5rem; align-items: baseline;}
    #main .s6 .txtArea .txt {}
    #main .s6 .txtArea .txt .tit {}
    #main .s6 .txtArea .txt .wrt {font-size: 2.8rem; line-height: 3.8rem;}
    #main .s6 .txtArea .swipNav {}
    #main .s6 .txtArea .swipNav .mainPrev {}
    #main .s6 .txtArea .swipNav .mainNext {}
    #main .s6 .mainSwiper {}
    #main .s6 .mainSwiper .swiper-slide-active::before {opacity: 1;}
    #main .s6 .mainSwiper .tit {}
    #main .s6 .mainSwiper .ico {}
    #main .s6 .mainSwiper .lst {}
    #main .s6 .mainSwiper .lst li {}
    #main .s6 .mainSwiper .lst li + li {}
}

#main .s7 {background: #101010;}
#main .s7 .inner {padding: 1rem 0 12.8rem;}
#main .s7 .txtArea {margin-bottom: 6rem;}
#main .s7 .txtArea .titArea {}
#main .s7 .txtArea .titArea .tit {font-size: 4.8rem; font-weight: bold; color: #fff; padding-bottom: 5rem;}
#main .s7 .txtArea .titArea .tit span {color: var(--pcr);}
#main .s7 .txtArea .titArea .wrt {font-size: 2rem; color: #999999;}
#main .s7 .txtArea .btn {background: #504AD1; border-radius: 3rem; display: inline-block; overflow: hidden;}
#main .s7 .txtArea .btn a {display: inline-block; padding: 2rem 4.8rem;}
#main .s7 .txtArea .btn a::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; background: #3C37AC; top: 0; left: -100%; border-radius: 3rem; transition: 0.4s;}
#main .s7 .txtArea .btn:hover a::before {left: 0;}
#main .s7 .txtArea .btn a span {font-size: 1.8rem; color: #fff; font-weight: bold;}
#main .s7 .newsLst {border: 1px solid #FFFFFF; border-right: 0; border-left: 0;}
#main .s7 .newsLst .lst {padding: 4rem 0;}
#main .s7 .newsLst .lst + .lst {border-top: 1px solid rgba(255,255,255,0.2);}
#main .s7 .newsLst .lst a {}
#main .s7 .newsLst .lst a .thumb {width: 31.2rem; height: 21.2rem; border-radius: 2rem; overflow: hidden; filter: brightness(0.7) grayscale(0.8); flex-shrink: 0;}
#main .s7 .newsLst .lst a .thumb img {height: 100%; object-fit: cover; transition: 0.4s;}
#main .s7 .newsLst .lst a .lstTxt {width: 100%; margin-left: 8rem;}
#main .s7 .newsLst .lst a .subj {font-size: 2.4rem; font-weight: bold; color: #fff;}
#main .s7 .newsLst .lst a .date {font-size: 1.6rem; color: #fff; opacity: 0.7; margin-left: auto;}

#main .s7 .newsLst .lst:hover {}
#main .s7 .newsLst .lst:hover .thumb {filter: none;}
#main .s7 .newsLst .lst:hover .thumb img {transform: scale(1.05);}
#main .s7 .newsLst .lst:hover a .subj {text-decoration: underline; text-underline-offset: 4px;}
#main .s7 .moBtn {display: none;}


@media all and (max-width: 880px){
    #main .s7 {}
    #main .s7 .inner {display: flex; flex-direction: column; gap: 5rem;}
    #main .s7 .txtArea {margin: 0;}
    #main .s7 .txtArea .titArea {}
    #main .s7 .txtArea .titArea .tit {padding-bottom: 4.2rem;}
    #main .s7 .txtArea .titArea .wrt {font-size: 2.8rem; line-height: 3.8rem;}
    #main .s7 .txtArea .btn {display: none}
    #main .s7 .newsLst {}
    #main .s7 .newsLst .lst {}
    #main .s7 .newsLst .lst a {}
    #main .s7 .newsLst .lst a .thumb {width: 20rem; height: 15rem; flex-shrink: 0; filter: none;}
    #main .s7 .newsLst .lst a .thumb img {}
    #main .s7 .newsLst .lst a .lstTxt {margin-left: 4rem; flex-direction: column; gap: 2rem; align-items: baseline;}
    #main .s7 .newsLst .lst a .subj {font-size: 2.4rem; line-height: 3.4rem;}
    #main .s7 .newsLst .lst a .date {margin: 0; font-size: 1.8rem; line-height: 2.2rem;}
    #main .s7 .moBtn {background: #504AD1; border-radius: 3rem; display: inline-block; overflow: hidden; align-self: center;}
    #main .s7 .moBtn a {display: inline-block; padding: 2rem 4.8rem;}
    #main .s7 .moBtn a span {font-size: 1.8rem; color: #fff; font-weight: bold;}
}

#main .s8 {background: #101010;}
#main .s8 .inner {}
#main .s8 .inner::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; background: #fff; top: 7.2rem; left: 0}
#main .s8 .mapArea {width: 83.6rem; height: 78rem; margin-top: 7.2rem; flex-shrink: 0; border-radius: 0 5rem 0 0; box-shadow: 0 0.3rem 0.6rem rgba(0,0,0,0.16); overflow: hidden; z-index: 9; background: #fff}
#main .s8 .mapArea .mapBox {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#main .s8 .mapArea .mapBox.box1 {z-index: 2; opacity: 1;}
#main .s8 .mapArea .mapBox.box1.on {z-index: 1; opacity: 0}
#main .s8 .mapArea .mapBox.box2 {z-index: 1; opacity: 0;}
#main .s8 .mapArea .mapBox.box2.on {z-index: 2; opacity: 1;}
#main .s8 .txtArea {width: 100%; margin-top: 7.2rem; padding-left: 12.4rem; background: #fff url('@/assets/img/main/s8_bg.png') right center / contain no-repeat}
#main .s8 .txtArea .cont {padding-top: 20rem;}
#main .s8 .txtArea .tit {font-size: 4.8rem; font-weight: bold;}
#main .s8 .txtArea .tit span {color: var(--pcr);}
#main .s8 .txtArea .tab {display: flex; width: 30rem;border: 1px solid #AAAAAA; border-radius: 3rem; margin: 4rem 0 6rem;}
#main .s8 .txtArea .tab::before {content: ''; display: block; position: absolute; width: 16rem; height: 100%; background: var(--pcr); border-radius: 3rem; transition: 0.5s; left: 0;}
#main .s8 .txtArea .tab li {font-size: 1.8rem; color: #999999; flex: 1; text-align: center; padding: 1.5rem 0; z-index: 1; transition: 0.5s; cursor: pointer;}
#main .s8 .txtArea .tab li.on {color: #fff; font-weight: bold;}
#main .s8 .txtArea .tab.act::before {left: 14rem;}
#main .s8 .txtArea .infoArea {}
#main .s8 .txtArea .infoLst {display: none;}
#main .s8 .txtArea .infoLst.on {display: block;}
#main .s8 .txtArea .infoLst li {gap: 0.8rem;}
#main .s8 .txtArea .infoLst li + li {margin-top: 4rem;}
#main .s8 .txtArea .infoLst li img {}
#main .s8 .txtArea .infoLst li .txt {font-size: 1.8rem; color: #555555;}

@media all and (max-width: 880px){
    #main .s8 {}
    #main .s8 .inner {flex-direction: column;}
    #main .s8 .inner::before {content: ''; display: block; position: absolute; width: 100%; height: 50%; background: #fff; top: 10rem; left: 0}
    #main .s8 .mapArea {height: 45rem; width: 87.5%; margin: 0 auto; border-radius: 5rem;}
    #main .s8 .mapArea .mapBox {}
    #main .s8 .mapArea .mapBox.on {}
    #main .s8 .txtArea {margin: 0; padding: 0; background: #fff url('@/assets/img/main/s8_bg_mo.png') bottom center / contain no-repeat;}
    #main .s8 .txtArea .cont {padding: 8rem 0 19rem; display: flex; flex-direction: column; align-items: center;}
    #main .s8 .txtArea .tit {}
    #main .s8 .txtArea .tit span {}
    #main .s8 .txtArea .tab {}
    #main .s8 .txtArea .tab::before {}
    #main .s8 .txtArea .tab li {}
    #main .s8 .txtArea .tab li.on {}
    #main .s8 .txtArea .infoArea {}
    #main .s8 .txtArea .infoLst {display: none;}
    #main .s8 .txtArea .infoLst.on {display: block;}
    #main .s8 .txtArea .infoLst li {flex-direction: column; gap: 1rem;}
    #main .s8 .txtArea .infoLst li img {width: 5rem;}
    #main .s8 .txtArea .infoLst li .txt {font-size: 2.4rem; line-height: 3.4rem; text-align: center;}
}