@charset "utf-8";
.real-cont {padding:0;}

/* splitting */
.page-header > .container.motion h2.chars .char {animation:textAni 1.5s both; animation-delay:calc(0.1s * var(--char-index));}

@keyframes textAni {
    0% {opacity:0;}
    30% {opacity:0;}
}

@keyframes textAni2 {
    0% {opacity:0; transform: translateY(100px);}
    100% {opacity: 1; transform: translateY(0);}
}


/* page-header */
.page-header {position: relative; width: 100%; height: 660px; background: url() 50% 50% no-repeat; background-size: cover;}
.page-header > .container {padding-top: 290px !important;}
.page-header.type1 {background-image: url(../images/sub/s-visual01.jpg); background-color: #333;}
.page-header.type2 {background-image: url(../images/sub/s-visual02.jpg); background-color: #333;}
.page-header.type3 {background-image: url(../images/sub/s-visual03.jpg); background-color: #333;}
.page-header.type4 {background-image: url(../images/sub/s-visual04.jpg); background-color: #333;}
.page-header.type5 {background-image: url(../images/sub/s-visual05.jpg); background-color: #333;}
.page-header.type10 {display: none;}

.page-header .container h2 {font-size: 60px; font-weight: 700; line-height: 1.33; color: #fff; text-align: center; letter-spacing: -1.8px;}

.lnb {max-width: 240px; width: 100%;}
.lnb > ul {width: 100%;}
.lnb > ul > li {width: 100%; border-radius: 50px; overflow: hidden; background-color: #f8f8f8; transition: all .2s linear; padding: 0 25px;}
.lnb > ul > li ~ li {margin-top: 10px;}
.lnb > ul > li > a {position: relative; display: block; width: 100%; padding: 0 5px; font-size: 20px; color: #666; height: 60px; font-weight: 600; transition: all .3s linear; z-index: 2; display: flex; align-items: center; justify-content: center; text-align: center;} 
.lnb > ul > li > a > span {line-height: 1.3;}
.lnb > ul.drop > li > a {justify-content: left;}
.lnb > ul.drop > li:not(:last-child) > a {border-bottom: 1px solid transparent; transition: all .2s linear;}
.lnb > ul.drop > li:not(:last-child) > a::after {position: absolute; content:''; width: 14px; height: 8px; background: url(../images/sub/btn-drop.png) 50% 50%; top: 50%; right: 0; transform: translateY(-50%); transition: all .2s linear;}
.lnb > ul > li .dep-3 {height: 0; visibility: hidden; overflow: hidden; transition: all .2s linear; padding: 0 5px;}
.lnb > ul > li .dep-3 ul li ~ li {margin-top: 6px;}
.lnb > ul > li .dep-3 ul li a {display: block; font-size: 18px; color: rgba(255,255,255, .3); line-height: 1.55; font-weight: 600; letter-spacing: -.54px; transition: all .2s linear;}
.lnb > ul > li .dep-3 ul li a:hover {color: #fff;}
.lnb > ul > li.active {background-color: #003592; border-radius: 30px;}
.lnb > ul.drop > li:not(:last-child).active > a::after {transform: translateY(-50%) rotate(-180deg); filter: brightness(10); opacity: .6;}
.lnb > ul > li.active > a {color: #fff;}
.lnb > ul.drop > li:not(:last-child).active > a {border-bottom: 1px solid rgba(255,255,255, .1);}
.lnb > ul > li.active .dep-3 {display: block; height: auto; visibility: visible;  padding: 16px 5px 26px;}
.lnb > ul > li .dep-3 ul li.on a {color: #fff;}

.lnb .btn-drop {display: none;}

.lnb.fx {position: sticky; top: 200px;}


section {padding: 110px 0 180px;}
.article-header {width: 100%; display: flex; gap: 20px; align-items: flex-end; justify-content: space-between; padding-bottom: 30px; border-bottom: 1px solid #ddd; margin-bottom: 60px;}
.article-header h3 {color: #111; font-weight: 600; font-size: 48px; line-height: 1.29; letter-spacing: -1.44px;}
.article-header .s-nav ul {display: flex; gap: 28px; align-items: center; justify-content: right;}
.article-header .s-nav ul li.home img {display: block; margin: 0 auto;}
.article-header .s-nav ul li {position: relative; font-size: 18px; color: #666; font-weight: 600; line-height: 1.77;}
.article-header .s-nav ul li ~ li::before {position: absolute; content: ''; width: 4px; height: 4px; border-radius: 50%; background-color: #cfcfcf; top: 50%; left: -16px; transform: translateY(-50%);}

section > .container {display: flex; gap: 120px; align-items: flex-start;}
article {max-width: 1080px; width: 100%; margin-left: auto;}
.s10 > .container {display: block;}
.s10 article {max-width: 100%;}

/* s1 */
.s1 figure img {display: block; max-width: 100%; margin: 0 auto;}
.s1_1 .cnt {margin-top: 60px;}
.s1_1 .cnt {display: flex; gap: 110px;}
.s1_1 .cnt .tit {max-width: 295px; width: 100%;}
.s1_1 .cnt .tit small {display: block; font-size: 16px; color: #999; font-weight: 600; line-height: 1.75; letter-spacing: -.48px;}
.s1_1 .cnt .tit h4 {margin-top: 16px; font-size: 36px; font-weight: 600; line-height: 1.38; letter-spacing: -1.08px; color: #111;}
.s1_1 .cnt .tit h4 > span {color: #003592;}
.s1_1 .cnt .txt {width: 1%; flex: 1 1 auto;}
.s1_1 .cnt .txt p {font-size: 20px; color: #666; font-weight: 400; line-height: 1.8; letter-spacing: -.6px;}
.s1_1 .cnt .txt p strong {display: block; font-weight: 600; color: #333;}
.s1_1 .cnt .txt p strong span {color: #003592;}
.s1_1 .cnt .txt p ~ p {margin-top: 35px;}
.s1_1 .cnt .txt dl {display: flex; align-items: center; margin-top: 50px; gap: 26px;}
.s1_1 .cnt .txt dt {font-size: 24px; font-weight: 600; line-height: 1.58; letter-spacing: -.72px; color: #333;}
.s1_1 .cnt .txt dd {font-size: 18px; color: #999; font-weight: 600; position: relative;}
.s1_1 .cnt .txt dd::after {position: absolute; content: ''; width: 2px; height: 16px; background-color: #ddd; right: -13px; top: 50%; transform: translateY(-50%);}

/* .s1_2 {padding-bottom: 0;} */
.s1_2 .history-wrap {margin-top: 60px; width: 100%; display: flex; gap: 98px;}
.s1_2 .history-wrap .tit {padding: 6px 0 0 40px; max-width: 305px; width: 100%;}
.s1_2 .history-wrap .tit h4 {font-size: 64px; font-weight: 700; color: #ddd; line-height: .96; letter-spacing: -1.92px; font-family: 'Poppins';}
.s1_2 .history-wrap .tit h4 > span {font-size: 30px; font-weight: 600; line-height: 1.46; letter-spacing: -.9px; color: #003592; display: block; margin-bottom: 10px;}
.s1_2 .history-wrap .history {width: 1%; flex: 1 1 auto; padding-left: 70px; position: relative;/*  padding-bottom: 180px; */}
.s1_2 .history-wrap .history::before {position: absolute; content: ''; width: 1px; height: calc(100% + 155px); top: 25px; left: 0; background-color: #ddd;} 
.s1_2 .history-wrap .history .txt {position: relative;}
.s1_2 .history-wrap .history .txt::before {position: absolute; content: ''; width: 18px; height: 18px; background: url(../images/sub/ico_dot.png) 50% 50% no-repeat; background-size: auto; top: 17px; left: -79px; z-index: 2; border-radius: 50%;}
.s1_2 .history-wrap .history .txt:not(:last-child) {padding-bottom: 80px;}
.s1_2 .history-wrap .history .txt h5 {font-size: 40px; font-weight: 600; line-height: 1.35; letter-spacing: -1.2px; color: #003592; font-family: 'Poppins';}
.s1_2 .history-wrap .history .txt dl {margin-top: 16px; display: flex; gap: 16px; align-items: flex-start; width: 100%;}
.s1_2 .history-wrap .history .txt dl ~ dl {margin-top: 5px;}
.s1_2 .history-wrap .history .txt dl dt {max-width: 42px; width: 100%; font-size: 20px; color: #333; font-weight: 600; line-height: 1.8; letter-spacing: -.6px; text-align: right;}
.s1_2 .history-wrap .history .txt dl dd {width: 1%; flex: 1 1 auto; font-size: 20px; font-weight: 400; line-height: 1.8; letter-spacing: -.6px;}

.s1_2 .history-wrap .history .txt.motion {animation: textAni2 1.5s .5s both;}


/* s2 */
.s2_2 .process {width: 100%;}
.s2_2 .process .item {position: relative; width: 100%;}
.s2_2 .process .item ~ .item {margin-top: 80px;}
.s2_2 .process .item ~ .item::before {position: absolute; content: ''; width: 40px; height: 40px; top: -60px; left: 50%; transform: translateX(-50%); background: url(../images/sub/ico_arrow.png) 50% 50% no-repeat; background-size: auto;}
.s2_2 .process .item .tit {padding: 20px 40px; background-color: #f8f8f8;  display: flex; align-items: center; justify-content: space-between; gap: 20px; border-radius: 4px 4px 0 0; border: 1px solid #ddd; border-bottom: 0;}
.s2_2 .process .item .tit h5 {font-size: 22px; color: #111; font-weight: 600; line-height: 1.54; letter-spacing: -.66px;}
.s2_2 .process .item .tit h5 > i {font-style: normal; color: #999;}
.s2_2 .process .item .tit span {font-size: 30px; font-weight: 700; line-height: 1.26; letter-spacing: -.9px; color: #cfcfcf; font-family: 'Poppins';}
.s2_2 .process .item .check {position: relative; width: 100%; padding: 30px 40px 50px; display: flex; align-items: flex-start;  border-radius: 0 0 4px 4px; border: 1px solid #ddd; border-top: 0;}
.s2_2 .process .item .check::after {position: absolute; content: ''; width: 1px; height: calc(100% - 70px); background-color: #d9d9d9; top: 30px; left: 50%; transform: translateX(-50%);}
.s2_2 .process .item .check dl {width: 50%;}
.s2_2 .process .item .check dl dt {position: relative; padding-left: 28px; font-size: 20px; font-weight: 600; line-height: 1.8; letter-spacing: -.6px; color: #333; background: url(../images/sub/ico_check.png) 0 50% no-repeat; background-size: auto;}
.s2_2 .process .item .check dl dt > span {color: #003592;}
.s2_2 .process .item .check dl dd {font-size: 20px; color: #666; font-weight: 400; line-height: 1.8; letter-spacing: -.6px; margin-top: 8px ;}
.s2_2 .process .item .check dl:nth-of-type(2) {padding-left: 60px;}
.s2_2 .process .item .figure-box {width: 100%; margin-top: 10px; display: flex; gap: 10px;}
.s2_2 .process .item .figure-box figure {flex: 1 1 auto; border-radius: 4px; overflow: hidden;}
.s2_2 .process .item .figure-box figure img {display: block; max-width: 100%; margin: 0 auto;}


.s2_3 .status {width: 100%;}
.s2_3 .status .tit {width: 100%; line-height: 54px; border-radius: 4px 4px 0 0; background-color: #003592; padding: 0 30px; font-size: 20px; color: #fff; font-weight: 600; letter-spacing: -.6px;}
.s2_3 .status .col {position: relative; width: 100%; padding: 14px 30px; display: flex; align-items: center; border-bottom: 1px dashed #ddd;}
.s2_3 .status .col:last-child {border-bottom: 1px solid #ddd;}
.s2_3 .status .col::after {position: absolute; content: ''; width: 1px; height: 16px; background-color: #ddd; top: 50%; left: 200px; transform: translateY(-50%);}
.s2_3 .status .col p {position: relative; padding-left: 14px; font-size: 18px; font-weight: 400; line-height: 1.77; letter-spacing: -.54px; /* width: 50%; */ color: #666;}
/* .s2_3 .status .col p::before {position: absolute; content: ''; width: 4px; height: 4px; background-color: #cfcfcf; top: 14px; left: 0;} */
.s2_3 .status .col p:nth-of-type(1) {width: 100%; max-width: 200px; font-weight: 500; color: #333}
.s2_3 .status .col p:nth-of-type(2) {/* padding-left: 44px;  */width: 1%; flex: 1 1 auto;}
.s2_3 .status .col p > span {display: block; position: relative; padding-left: 14px;}
.s2_3 .status .col p > span::before {position: absolute; content: ''; width: 4px; height: 4px; background-color: #cfcfcf; top: 14px; left: 0;}
/* .s2_3 .status .col p:nth-of-type(2)::before {left: 30px;} */

.s2_3 .equipment {margin-top: 60px; width: 100%; padding: 50px; background-color: #f8f8f8; border-radius: 4px; display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;}
.s2_3 .equipment .item {flex: 1 1 calc(50% - 10px); height: 320px; border-radius: 4px;}
.s2_3 .equipment .item:nth-of-type(1) {padding: 26px 75px;}
.s2_3 .equipment .item .logo {margin: 0 auto;}
.s2_3 .equipment .item .logo img {display: block; max-width: 100%; margin: 0 auto;}
.s2_3 .equipment .item h5 {margin-top: 30px; text-align: center; font-size: 36px; color: #111; font-weight: 600; line-height: 1.38; letter-spacing: -1.08px;}
.s2_3 .equipment .item h5 > span {color: #666;}
.s2_3 .equipment .item > p {margin-top: 16px; color: #666; font-size: 20px; font-weight: 400; line-height: 1.8; letter-spacing: -.6px; text-align: center; padding: 0 23px;}
.s2_3 .equipment .eq-slide {position: relative; flex: 1 1 calc(50% - 10px);}
.s2_3 .equipment .eq-slide figure {width: 100%; height: 100%;}
.s2_3 .equipment .eq-slide figure img {display: block; max-width: 100%; height: 100%; width: 100%;}
.s2_3 .equipment .eq-slide .tit {position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; display: flex; align-items: center; border-radius: 0 0 4px 4px; background-color: rgba(17,17,17, .8); padding: 0 20px; z-index: 1;}
.s2_3 .equipment .eq-slide .tit p {font-size: 18px; color: #fff; font-weight: 500; letter-spacing: -.54px;  transition: all .8s linear;}
.s2_3 .equipment .eq-slide .swiper-slide {width: 100%;}
.s2_3 .equipment .eq-slide .swiper-slide-prev .tit p {opacity: 0;}
.s2_3 .equipment .eq-slide .swiper-slide-next .tit p {opacity: 0;}
.s2_3 .equipment .eq-slide .swiper-slide-active .tit p {opacity: 1;}
.s2_3 .equipment .eq-slide .eq-control {position: absolute; bottom: 9px; right: 10px; z-index: 2; display: flex; gap: 4px;}
.s2_3 .equipment .eq-slide .eq-control .eq-btn {width: 30px; height: 32px; border-radius: 4px; background:url() 50% 50% no-repeat; background-size: auto; background-color: rgba(255, 255, 255, 0.10); transition: all .2s linear; cursor: pointer;}
.s2_3 .equipment .eq-slide .eq-control .eq-btn:hover {background-color:  #003592;}
.s2_3 .equipment .eq-slide .eq-control .eq-btn.eq-prev {background-image:url(../images/sub/ico_prev.png);}
.s2_3 .equipment .eq-slide .eq-control .eq-btn.eq-next {background-image:url(../images/sub/ico_next.png);}


/* s5 */
.s5 article > figure {width: 100%;}
.s5 article > figure img {max-width: 100%; display: block; margin: 0 auto;}
.s5 .intro {display: flex; align-items: flex-start; margin-top: 60px;}
.s5 .intro .arti-tit {max-width: 218px;width: 100%;}
.s5 .intro .arti-tit span {display: block; font-size: 16px; font-weight: 600; color: #003592; line-height: 1.75; letter-spacing: -.48px;}
.s5 .intro .arti-tit h4 {font-size: 36px; color: #111; font-weight: 600; line-height: 1.38; letter-spacing: -1.08px;}
.s5 .intro .info {width: 1%; flex: 1 1 auto;}
.s5 .intro .info > p {font-size: 20px; font-weight: 400; line-height: 1.8; letter-spacing: -.6px; color: #333;}
.s5 .intro .info > ul {display: flex; gap: 20px;  margin-top: 50px;}
.s5 .intro .info > ul li {width: 1%; flex: 1 1 auto; min-height: 235px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 4px; background-color: #f8f8f8; padding: 30px 32px;}
.s5 .intro .info > ul li dl dt {max-width: 24px; width: 100%; margin-right: auto;}
.s5 .intro .info > ul li dl dt img {display: block;}
.s5 .intro .info > ul li dl dd {margin-top: 10px;}
.s5 .intro .info > ul li dl dd h5 {font-size: 22px; color: #333; font-weight: 600; line-height: 1.54; letter-spacing: -.66px;}
.s5 .intro .info > ul li dl dd small {display: block;font-size: 12px; color: #999; font-weight: 500; line-height: 1.66; letter-spacing: -.36px; font-family: 'Poppins';}
.s5 .intro .info > ul li p {font-size: 18px; color: #666; line-height: 1.55; letter-spacing: -.54px; text-align: right;}
.s5 .intro .info > ul li p a {color: inherit; display: inline-block;}

.s5 .field {width: 100%; padding: 50px; background-color: #f8f8f8; border-radius: 4px;}
.s5 .field h5 {font-size: 36px; color: #111; font-weight: 600; line-height: 1.38; letter-spacing: -1.08px;}
.s5 .field p {font-size: 20px; color: #666; font-weight: 400; line-height: 1.8; letter-spacing: -.6px; padding-bottom: 40px; border-bottom: 1px solid #ddd; margin-top: 16px;}
.s5 .field p > span {color: #003592; font-weight: 600;}
.s5 .img-box {margin-top: 50px;}
.s5 .img-box ul {width: 100%; display: flex; gap: 16px;}
.s5 .img-box ul li {width: 1%; flex: 1 1 auto;}
.s5 .img-box ul li figure {border-radius: 4px; overflow: hidden;}
.s5 .img-box ul li figure img {display: block; max-width: 100%; margin: 0 auto;}

.s5_1_1 .img-box {margin-top: 40px; padding-top: 40px; border-top: 1px solid #ddd;}

.s5_2_2 .status {width: 100%; margin-top: 20px; border-radius: 4px; overflow: hidden;}
.s5_2_2 .status .tit {width: 100%; line-height: 54px;  background-color: #003592; padding: 0 30px; font-size: 20px; color: #fff; font-weight: 600; letter-spacing: -.6px;}
.s5_2_2 .status .col {position: relative; width: 100%; padding: 14px 30px; display: flex; align-items: center; background-color: #fff;}
.s5_2_2 .status .col ~ .col { border-top: 1px dashed #ddd;}
.s5_2_2 .status .col::after {position: absolute; content: ''; width: 1px; height: 16px; background-color: #ddd; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.s5_2_2 .status .col:last-child::after {display: none;}
.s5_2_2 .status .col p {position: relative; padding-left: 14px; font-size: 18px; font-weight: 400; line-height: 1.77; letter-spacing: -.54px; width: 50%; color: #666; padding-bottom: 0; border: 0; margin-top: 0;}
.s5_2_2 .status .col p::before {position: absolute; content: ''; width: 4px; height: 4px; background-color: #cfcfcf; top: 14px; left: 0;}
.s5_2_2 .status .col p:nth-of-type(2) {padding-left: 44px;}
.s5_2_2 .status .col p:nth-of-type(2)::before {left: 30px;}
.s5_2_2 .status .col p > strong {display: inline-block; margin-right: 10px; font-weight: 600; color: #111;}

.s5_3 .intro {margin-top: 0;}

.map {width: 100%; height: 380px; border-radius: 4px; overflow: hidden;}
.root_daum_roughmap {width: 100% !important; height: 100% !important;}
.root_daum_roughmap .map_border {display: none;}
.root_daum_roughmap .wrap_map {height: 100% !important;}
.root_daum_roughmap .cont {display: none;}
.map-info {margin-top: 40px; display: flex; width: 100%; align-items: flex-start; gap: 20px; justify-content: space-between; }
.map-info .info {width: 1%; flex: 1 1 auto;}
.map-info dl {display: flex; gap: 20px; align-items: flex-start; width: 100%;}
.map-info dl dt {max-width: 51px; width: 100%; font-size: 20px; font-weight: 600; line-height: 2; letter-spacing: -.6px; color: #111;}
.map-info dl dd {width: 1%; flex: 1 1 auto; font-size: 20px; font-weight: 400; line-height: 2; letter-spacing: -.6px; color: #666;}
.map-info dl dd > strong {font-weight: 600;}
.map-info dl dd > span {color: #003592; font-weight: 600; display: inline-block; padding-left: 20px; position: relative;}
.map-info dl dd > span::before {position: absolute; content: ''; width: 2px; height: 18px; background-color: #ddd; left: 8px; top: 50%; transform: translateY(-50%);}
.map-info dl dd a {display: inline-block; color: inherit;}
.map-info .btn-area {display: flex; gap: 8px; max-width: 124px; width: 100%;}
.map-info .btn-area a {display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 4px; background-color: #003592;}
.map-info .btn-area a.print {background-color: #f8f8f8;}


/* 갤러리 및 인증서 */
.certi-pop {display: none; position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0, .6); z-index: 1001; top: 0; left: 0;}
.certi-pop .popup {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 700px; width: 100%; padding: 0 15px;}
.certi-pop .popup .inner {padding:50px 30px 0px; position: relative; width: 100%; background-color: #fff; max-height: 95dvh; overflow:auto;}
.certi-pop .popup .inner a {display: block; position: absolute; width: 20px; height: 20px; top: 30px; right: 30px;}
.certi-pop .popup .inner .pop-img {width: 100%;}
.certi-pop .popup .inner .pop-img img {display: block; width: 100%; max-width: 80%; margin: 0 auto; box-shadow: 5px 0px 15px rgba(0,0,0,0.1);}
.certi-pop .popup .inner .pop-tit {font-size: 24px; padding:30px 0; line-height: 1.5; color: #333; font-weight: 600; text-align: center;}

/* .certi-pop .popup .inner::-webkit-scrollbar {display: none;} */
.certi-pop .popup .inner::-webkit-scrollbar {width: 7px;}
.certi-pop .popup .inner::-webkit-scrollbar-track {background-color: transparent;}
.certi-pop .popup .inner::-webkit-scrollbar-thumb {background-color: #003592; border-radius: 5px;}