@charset "UTF-8";
@import "reset.css";
@import "fonts.css";

:root {
    --font-nanum : "NanumSquareRound", "맑은 고딕", sans-serif;
    --font-lexend : "Lexend", sans-serif;
    --text-color-blue : #46A1EE;
    --text-color-green : #61C548;
    --text-color-orange : #FFC42C;
    --btn-color-green : #71CD59;
    --btn-color-info : #42BDFB;
    --bs-btn-close-color: #fff;
}

.text-hide {position: absolute; overflow: hidden; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);}
.area-title {position: relative; font-family: var(--font-nanum); font-size: 2.5rem; font-weight: 800;}
.area-title::after {display: block; content: ""; position: absolute; top: -.2em; right: -.8rem; z-index: -1; width: .6em; height: .6em; border-radius: 9999px; background-color: #fff; opacity: .5;}
.text-bg-green {background-color: var(--btn-color-green);}
.btn-info {background-color: var(--btn-color-info); color: #fff;}
.text-effect {overflow: hidden; animation: slideup 1.25s ease-in-out;}

/* header */
header {position: fixed; top: 0; left: 0; z-index: 100; width: 100%; padding: 0 6.25rem;}
header:has(.sitemap-area.active) {z-index: 200;}
header .header-container {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 86px;}
header #logo a {display: block; width: 12rem; height: 3rem; background: url(../images/logo-headerW.png) no-repeat center/contain;}
header #gnb {width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
header #gnb ul {display: flex; justify-content: center; gap: 7.5rem;}
header #gnb .depth1-list>li>a {color: rgba(97, 197, 72,.0); font-size: 1.13rem; font-weight: 700; text-shadow: none; -webkit-transition: color .6s; transition: color .6s; }
header #gnb .depth1-list>li>a::before {color: #fff; content: attr(data-hover); position: absolute; -webkit-transition: -webkit-transform 0.4s, opacity 0.2s; transition: transform 0.4s, opacity 0.2s;}
header #gnb .depth1-list>li.active>a, 
header #gnb .depth1-list>li>a:hover,
header #gnb .depth1-list>li>a:focus {color: var(--text-color-green);}
header #gnb .depth1-list>li.active>a::before, 
header #gnb .depth1-list>li>a:hover::before,
header #gnb .depth1-list>li>a:focus::before {-webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0;}
header #gnb .depth2-list {display: none; width: 100%; height: 0; overflow: hidden; position: absolute; left: 0; top: 52px; z-index: 101; border-top: 1px solid #e9eaed; border-bottom: 1px solid #f2f3f7; background: #fff;}
header #gnb li.active .depth2-list {display: block;}
header #gnb .depth2-list ul {padding-top: 40px;}
header #gnb .depth2-list ul a {color: #333; font-weight: 600;}
header .utill {display: flex; gap: 2rem; z-index: 1;}
header .utill .btn-sitemap,
header .utill .btn-user {display: block; width: 2rem; height: 2rem; background-repeat: no-repeat; background-position: center;}
header .utill .btn-sitemap {background-image: url(../images/icon-header-menuW.png); background-size: auto 2.35rem;}
header .utill .btn-user {background-image: url(../images/icon-header-userW.png); background-size: auto 1.85rem;}
header:has(#gnb li.active) {background-color: #fff;}
header:has(#gnb li.active) #logo a,
header.black #logo a {background-image: url(../images/logo-headerB.png);}
header:has(#gnb li.active) #gnb ul a::before,
header.black #gnb ul a::before {color: #333;}
header:has(#gnb li.active) .utill .btn-sitemap,
header.black .utill .btn-sitemap {background-image: url(../images/icon-header-menuB.png);}
header:has(#gnb li.active) .utill .btn-user,
header.black .utill .btn-user {background-image: url(../images/icon-header-userB.png);}

/* sitemap */
.sitemap-area {position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; padding: 0 6.25rem; overflow: hidden; box-sizing: border-box; background: #75c57a url(../images/icon-logoW.png) no-repeat right bottom -2rem/400px; transform: translateY(-100%); transition: transform .4s;}
.sitemap-area.active {transform: translateY(0);}
.sitemap-area .sitemap-header {display: flex; align-items: center; justify-content: space-between; margin-top: 4rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.35);}
.sitemap-area .sitemap-header strong{display: block; color: #fff;}
.sitemap-area .sitemap-header .btn-close {font-size: 1.5rem;}
.sitemap-area .sitemap-menu {display: flex; flex-direction: column; gap: 8.5rem; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; padding: 0 7.25rem;}
.sitemap-area .sitemap-menu>li {display: flex; align-items: center;}
.sitemap-area .sitemap-menu>li strong {color: #fff; flex: 0 0 20%; font-size: 2rem;}
.sitemap-area .sitemap-menu>li a {color: #fff;;}
.sitemap-area .sitemap-depth2 {display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem 3.5rem;}
.sitemap-area .sitemap-depth2 a {position: relative; font-size: 1.5rem; font-weight: 600; opacity: .65; transition: opacity .2s;}
.sitemap-area .sitemap-depth2 a:hover {opacity: 1;}
.sitemap-area .sitemap-depth2 li:not(:last-of-type) a::after {position: absolute; content: ""; top: 50%; right: -1.75rem; transform: translateY(-50%); width: 1px; height: 1.25rem; background-color: rgba(255,255,255,.5);}

/* scrollbar */
.scrollbar {position: fixed; z-index: 100; left: 2.5%; top: 50%; transform: translateY(-50%);}
.scrollbar ul {display: flex; flex-direction: column; align-items: center; gap: 1rem;}
.scrollbar ul li {position: relative;}
.scrollbar ul li a {display: block; width: 8px; height: 8px; border-radius: 99px; background: #DBE5EA; transition: all .3s;}
.scrollbar ul li div {display: none; position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%); width: 4.5rem; padding: .45rem 0; box-sizing: border-box; background-color: rgba(0,0,0,.5); border-radius: 4px; color: #fff; font-size: .88rem; font-family: var(--font-nanum); text-align: center;}
.scrollbar ul li.active a {width: 12px; height: 12px; background-color: var(--text-color-blue);}
.scrollbar ul li:hover div {display: block;}
/* notice */
.notice-wrap {position: fixed; z-index: 110; right: 0; display: flex; align-items: center; height: 100%;}
.notice-wrap .btn-notice {padding: 2.25rem 1rem; border: none; border-radius: 0 10px 10px 0; background: linear-gradient(0deg, #CFDB00 0%, #6DB02B 31%, #2990D0 100%); box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.15); font-family: var(--font-lexend); color: #fff; font-size: 1.13rem; font-weight: 700; writing-mode:vertical-lr; transform: rotate(180deg);}
.notice-area {width: 460px !important; padding: 0 2rem; background: #F3F7FB; border-top-left-radius: 50px; transform: translateX(100%); transition: transform .4s;}
.notice-area .notice-header {display: flex; align-items: center; justify-content: space-between; margin-top: 2.75rem;}
.notice-area .notice-header strong {font-family: var(--font-nanum); font-size: 1.75rem; font-weight: 800;}
.notice-area .notice-header .btn-close {font-size: 1.13rem;}
.notice-area .notice-list {display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2.5em;}
.notice-area .notice-list li a {display: flex; align-items: center; gap: 1.13rem; border: 1px solid #e0e0e0; padding: .88rem; border-radius: 20px;}
.notice-area .notice-list li .notice-date {flex-shrink: 0; width: 4.25rem; height: 4.5rem; display: flex; flex-direction: column; justify-content: center; background-color: #E2F0FF; border-radius: 10px; font-family: var(--font-lexend); text-align: center;}
.notice-area .notice-list li .notice-date .day {margin-bottom: 2px; font-size: 1.63rem; font-weight: 800; color: #4287CB;}
.notice-area .notice-list li .notice-date .year-month {font-size: .88rem; color: #89A3BD; letter-spacing: -.25px;}
.notice-area .notice-list li .notice-text .badge {padding-top: .25rem; padding-bottom: .25rem;}
.notice-area .notice-list li .notice-text .title {margin-top: .25rem; color: #333; line-height: 1.2; letter-spacing: -.25px; font-weight: 600; width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}
.notice-area .btn {margin-top: 1.75rem; padding: 1rem 0; border-radius: 10px; font-family: var(--font-lexend); font-size: .88rem; font-weight: 700;}

/* fullpage */
/* first */
#mainContents1 {overflow: hidden;}
#mainContents1 .main-visual {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-color: #000;}
#mainContents1 .main-visual video {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; opacity: .5;}
#mainContents1 .main-text {text-align: center;}
#mainContents1 .main-text h2 {font-family: var(--font-nanum); color: #fff; font-size: 3.38rem; font-weight: 800; line-height: 1.35;}
#mainContents1 .main-text h2 span {display: block;}
#mainContents1 .main-text h2 span strong {background: linear-gradient(75deg, #A2FA4B, #44B8FF); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#mainContents1 .main-count-up {margin-top: 3.5rem; display: flex; align-items: center; justify-content: space-between;}
#mainContents1 .main-count-up li {position: relative; flex-basis: 24%; padding-top: 5rem; color: #fff; background-position: top center; background-repeat: no-repeat; background-size: auto 3.75rem;}
#mainContents1 .main-count-up li:nth-of-type(1) {background-image: url(../images/main/icon-first-count1.png);}
#mainContents1 .main-count-up li:nth-of-type(2) {background-image: url(../images/main/icon-first-count2.png);}
#mainContents1 .main-count-up li:nth-of-type(3) {background-image: url(../images/main/icon-first-count3.png);}
#mainContents1 .main-count-up li:nth-of-type(4) {background-image: url(../images/main/icon-first-count4.png);}
#mainContents1 .main-count-up li:not(:last-of-type)::after {position: absolute; top: 50%; right: -4.25%; transform: translateY(-50%); display: block; content: "";  width: .65rem; height: 1.5rem; background: #6EC3EE; border-radius: 99px;}
#mainContents1 .main-count-up li strong {font-size: 1.75rem;}
#mainContents1 .main-count-up li .count-group {margin-top: 1.25rem; font-size: 1.88rem; font-weight: 700;}
#mainContents1 .main-count-up li .count {font-family: var(--font-lexend); font-size: 3.5rem; margin-right: .5rem;}

/* second */
#mainContents2, #mainContents3 {background-color: #F6FAFD;}
#mainContents2 .main-container.swiper-container {max-width: 100% !important; height: 100vh; padding: 7.5rem 0 3rem;}
#mainContents2 .main-container .swiper-wrapper {width: 100%; height: 100% !important;}
#mainContents2 .main-container .swiper-slide {width: 100%; height: 100%;}
#mainContents2 .swiper-pagination {bottom: 2rem;}
#mainContents2 .swiper-pagination-bullet {position: relative; margin : 0 .5rem; width: 160px; height: auto; text-align: center; border-radius: 0; opacity: 1; background-color: transparent;}
#mainContents2 .swiper-pagination-bullet em {font-size: .93rem; font-style: normal; line-height: 2.75rem; font-weight: 600; letter-spacing: -0.25px; color: #a5b3bc;}
#mainContents2 .swiper-pagination-bullet i {position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; height: 4px; border-radius: 4px; background-color: #DBE5EA;}
#mainContents2 .swiper-pagination-bullet b {position: absolute; bottom: 0; left: 0; z-index: 2; width: 0%; height: 4px; border-radius: 4px; background-color: #46A1EE;}
#mainContents2 .swiper-pagination-bullet-active {background-color: transparent;}
#mainContents2 .swiper-pagination-bullet-active em {color: var(--text-color-blue);}
#mainContents2 .swiper-pagination-bullet-active b {animation-name: countingBar; animation-duration: 7s; animation-timing-function: ease-in; animation-iteration-count: 1; animation-direction: alternate ; animation-fill-mode:forwards;}
#mainContents2 .swiper-scrollbar {background: none;}
#mainContents2 .slide-wrap {width: 1400px; margin: 0 auto;}
#mainContents2 .slide-title {display: flex; align-items: center; width: 1400px; margin: 0 auto; font-family: var(--font-nanum); font-size: 2.25rem; font-weight: 800;}
#mainContents2 .slide-title .icon {display: block; content: ""; width: 2.5rem; height: 2.5rem; margin-right: 1rem; background: #DEEDFF url(../images/main/icon-second-title1.png) no-repeat center/auto 1.25rem; border-radius: 8px;}
#mainContents2 .slide2 .slide-title .icon {background-image: url(../images/main/icon-second-title2.png); background-size: 1.5rem;}
#mainContents2 .slide3 .slide-title .icon {background-image: url(../images/main/icon-second-title3.png); background-size: 1.5rem;}
#mainContents2 .slide4 .slide-title .icon {background-image: url(../images/main/icon-second-title4.png); background-size: 1.5rem;}
#mainContents2 .slide-wrap {position: relative; top: -4rem; display: flex; align-items: center; height: 100%;}
#mainContents2 .slide1 .slide1-text h4 {margin-bottom: 1.5rem; font-family: var(--font-nanum); font-size: 2.25rem; font-weight: 800; line-height: 1.35;}
#mainContents2 .slide1 .slide1-text h4 span {display: inline-block; position: relative;}
#mainContents2 .slide1 .slide1-text h4 span::before {display: block; content: ""; position: absolute; bottom: .2rem; z-index: -1; width: 100%; height: 1rem; border-radius: 10px;}
#mainContents2 .slide1 .slide1-text h4 span:first-of-type:before {background-color: rgba(144, 201, 254, 0.6);}
#mainContents2 .slide1 .slide1-text h4 span:last-of-type:before {background-color: rgba(140, 236, 167, 0.6);}
#mainContents2 .slide1 .slide1-text p {color: #697075; font-size: 1.38rem; line-height: 1.45; letter-spacing: -.5px;}
#mainContents2 .slide1 .slide1-image {position: absolute; z-index: -1; width: 1400px; height: 750px;}
#mainContents2 .slide1 .slide1-image img {display: block; position: absolute; right: -2rem; border-radius: 40px; transform: scale(.8); opacity: 0; transition: all ease-in-out .3s;}
#mainContents2 .slide1 .slide1-image img.animate {opacity: 1; transform: scale(1);}
#mainContents2 .slide1 .slide1-image img:first-of-type {top: 4rem; width: 475px;}
#mainContents2 .slide1 .slide1-image img:last-of-type {bottom: 2rem; width: 530px;}
#mainContents2 .slide1 .slide1-image .object {display: block; content: ""; position: absolute; background-repeat: no-repeat; background-position: center; background-size: contain;}
#mainContents2 .slide1 .slide1-image .object1{top: -6rem; right: -12rem; width: 320px; height: 310px; background-image: url(../images/main/img-second-slide1-object1.png);}
#mainContents2 .slide1 .slide1-image .object2{bottom: -4rem; right: 24rem; width: 250px; height: 310px; background-image: url(../images/main/img-second-slide1-object2.png);}
#mainContents2 .slide2 .slide2-card-list {display: flex; gap: 1.25rem;}
#mainContents2 .slide2 .slide2-card-list li {display: flex; flex-direction: column; justify-content: space-between; height: 27.5rem; padding: 2rem; border-radius: 20px; background-color: #fff;}
#mainContents2 .slide2 .slide2-card-list .card-top div {justify-content: space-between; align-items: center;}
#mainContents2 .slide2 .slide2-card-list .card-top div .number {font-family: var(--font-lexend); font-weight: 800; font-size: 2.88rem;}
#mainContents2 .slide2 .slide2-card-list .card-top div .number span {opacity: .65;}
#mainContents2 .slide2 .slide2-card-list .card-top div .keyword {font-family: var(--font-nanum); font-weight: 800; font-size: 2.25rem;}
#mainContents2 .slide2 .slide2-card-list .card-top p {margin-top: 1.25rem; font-size: 1.5rem; line-height: 1.35; letter-spacing: -.5px; font-weight: 700;}
#mainContents2 .slide2 .slide2-card-list .card-bottom {font-size: 1.25rem; line-height: 1.5; color: #697075;}
/* #mainContents2 .slide2 .slide2-card-list .card-blue {background-color: #ebf5fc; } */
#mainContents2 .slide2 .slide2-card-list .card-blue .card-top div {color: var(--text-color-blue);}
/* #mainContents2 .slide2 .slide2-card-list .card-green {background-color: #E6F6E7; } */
#mainContents2 .slide2 .slide2-card-list .card-green .card-top div {color: var(--text-color-green);}
/* #mainContents2 .slide2 .slide2-card-list .card-orange {background-color: #fff9ec; } */
#mainContents2 .slide2 .slide2-card-list .card-orange .card-top div {color: var(--text-color-orange);}
#mainContents2 .slide3 .slide-wrap img, #mainContents2 .slide4 .slide-wrap img  {margin: 3rem auto 0; width: 1350px;} 

/* third */
#mainContents3 .main-container {display: flex; align-items: center; justify-content: space-between;}
#mainContents3 .map-nav {position: relative; display:flex; flex-shrink: 0; width: 47.5rem; height: 4.375rem; align-items: center; justify-content: space-between;}
/* #mainContents3 .map-nav::after {position: absolute; content: ""; display: block; width: 100%; height: 100%; padding: 0 2.25rem; background: linear-gradient(to right, #F6FAFD 6%, rgba(255,255,255,0)  12% 86%, #F6FAFD 94%);} */
#mainContents3 .map-nav ul {display: flex; gap:0.625rem; align-items: center; flex-wrap: nowrap;}
#mainContents3 .map-nav li {position: relative; cursor: pointer;}
#mainContents3 .map-nav li a {flex-grow: 0; display:flex; align-items: center; padding:0.625rem 1.25rem; height: 3.375rem; background: #E6F6E7;  font-weight: 700; font-family: var(--font-nanum); font-size: 1.375rem; line-height: 140%; color:#9DBF9F; border-radius: 3.375rem;}
#mainContents3 .map-nav li:has(.active) a, #mainContents3 .map-nav li a:focus, #mainContents3 .map-nav li a:hover {background-color: #68CF6D; color: #fff;}
#mainContents3 .map-nav .region-wrap {overflow: hidden;}
#mainContents3 .map-nav .region-wrap .region {display: none; flex-shrink: 0;}
#mainContents3 .map-nav .region-wrap .region.show {display: block;}
#mainContents3 .map-nav .btn-arrow {z-index: 1; width: 2.25rem; height: 2.25rem; border-radius: 999px; border: none; background: #E2EBE3 url(../images/main/icon-map-nav-arrow-left.png) no-repeat left .65rem center/1.25rem;}
#mainContents3 .map-nav .btn-arrow.next {transform: rotate(180deg);}
#mainContents3 .region-info {margin-top: 1.5rem; padding: 2.5rem 3rem 2rem; flex-shrink: 0; width: 47.5rem; height: 38rem; border-radius: 40px; background: #FFF; box-shadow: 0.625rem 0.625rem 3.125rem 0 rgba(113, 138, 167, 0.10);}
#mainContents3 .region-info .region-title {display:flex; justify-content: space-between; margin-bottom: .75rem;}
#mainContents3 .region-info .region-title h4 {font-family: var(--font-nanum); color:#333; font-weight: 800; font-size: 2.25rem;}
#mainContents3 .region-info .text-green {color: var(--text-color-green); font-size: 1.13rem;}
#mainContents3 .region-info .btn-home {align-items: center; display: inline-flex; width: 10.5rem; padding: 0.45rem; gap: 0.3125rem; justify-content: center; color:var(--text-color-blue); border: 1px solid #71B8F4; border-radius: 10px; }
#mainContents3 .region-info .btn-home span {background: url(../images/main/icon-home-light.png) no-repeat center/contain; width: 1.25rem; height: 1.25rem;}
#mainContents3 .region-info .region-body {margin-top: 1rem; height: 28rem; overflow-y: auto;} 
#mainContents3 .region-info .region-box {padding: 1rem; background-color: #F2F8FF; border-radius: 10px; font-size: 1.13rem; color: #6F7881; letter-spacing: -.25px;}
#mainContents3 .region-info .region-box li {position: relative; padding-left: .75rem;}
#mainContents3 .region-info .region-box li::before {position: absolute; content: ""; display: block; width: 4px; height: 4px; left: 0; top: .4rem; border-radius: 2px; background-color: var(--text-color-blue);}
#mainContents3 .region-info .region-box li:not(:last-child) {margin-bottom: .75rem;}
#mainContents3 .region-info .region-box strong {color: var(--text-color-blue);}
#mainContents3 .region-info .region-table .table-title {display: flex; align-items: center; color: #555b5f; font-size: 1.13rem;}
#mainContents3 .region-info .region-table .table {margin-top: .75rem; width: 100%; border: 1px solid #e9eaed; border-radius: 10px;}
#mainContents3 .region-info .region-table .table th, #mainContents3 .region-info .region-table .table td {padding: .75rem .5rem; line-height: 1.2;}
#mainContents3 .region-info .region-table .table th {background: #f1f2f6; font-weight: 600; vertical-align: middle; border-right: 1px solid #e9eaed; border-bottom : 1px solid #e9eaed; text-align: center; color: #454748;}
#mainContents3 .region-info .region-table .table td {color: #555b5f; border-bottom: 1px solid #e9eaed;}
#mainContents3 .map-area {width: 31.25rem; height: 49rem; background: url(../images/main/icon-map.png) no-repeat center/contain;}

/* fourth */
#mainContents4 {background-color: #ADE8F5;}


@keyframes slideup {
    0% {transform: translateY(100%); opacity: 0;}
    100% {transform: translateY(0); opacity: 1;}
}
@keyframes slidedown {
    0% {transform: translateY(-100%); opacity: 0;}
    100% {transform: translateY(0); opacity: 1;}
}
@keyframes countingBar {
    0% {width: 0;}
    100% {width:100%;}
}


@media (min-width: 1400px) {
    #fullpage .main-container {max-width: 1400px;}
}