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

.pl {font-family: 'Play';}
br.mo {display: none;}

/* 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;}
}

/* page-header */
.page-header {position: relative; width: 100%; height: 550px; background: url() 50% 50% no-repeat; background-size: cover;}
.page-header > .container {padding-top: 245px;}
.page-header.type1 {background-image: url(../images/sub/s-visual01.jpg);}
.page-header.type2 {background-image: url(../images/sub/s-visual02.jpg);}
.page-header.type3 {background-image: url(../images/sub/s-visual03.jpg);}
.page-header.type4 {background-image: url(../images/sub/s-visual04.jpg);}

.page-header .container h2 {font-size: 65px; font-weight: 700; color: #fff; text-align: center; line-height: 1; font-family: 'Play';}

.page-header .s-nav {margin-top: 35px; width: 100%;}
.page-header .s-nav ul {width: auto; display: flex; align-items: center; justify-content: center;}
.page-header .s-nav ul li {position: relative; font-size: 18px; font-weight: 500; color: #fff; letter-spacing: -.2px;}
.page-header .s-nav ul li ~ li {padding-left: 38px;}
.page-header .s-nav ul li:not(:first-child)::before {position: absolute; content: ''; width: 14px; height: 4px; background: url(../images/sub/ico_dot.png) 50% 50% no-repeat; background-size: auto; top: 50%; left: 13px; transform: translateY(-50%);}


.lnb {position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(0,0,0, .1); backdrop-filter: blur(5px);}
.lnb ul {width: 100%; display: table; table-layout:fixed;}
.lnb ul li {display: table-cell; position: relative; border-left: 1px solid rgba(255,255,255, .2);}
.lnb ul li:last-child {border-right: 1px solid rgba(255,255,255, .2);}
.lnb ul li a {position: relative; display: block; width: 100%; text-align: center; font-size: 20px; color: rgba(255,255,255, .4); line-height: 65px; font-weight: 600; transition: all .3s linear; z-index: 2;}  
.lnb ul li a:hover {color: #fff;}
.lnb ul li.active a {color: #fff; background-color: #112952;}
.lnb ul li.active {border: 0;}
.lnb ul li.active + li {border-left: none;}
.lnb .btn-drop {display: none;}

section {padding: 110px 0 150px;}
.section-header h3 {font-family: 'Play'; position: relative; text-align: center; color: #000; font-weight: 700; font-size: 52px; letter-spacing: -1px;}
.section-header p {font-size: 18px; line-height: 1.778; color: #666; text-align: center; padding-top: 30px;}

.section-header.type2 {text-align: center;}
.section-header.type2 span {position: relative; font-size: 20px; color: #112952; font-weight: 700; display: inline-block;}
.section-header.type2 span::after {position: absolute; width: 100%; height: 1px; content:''; background-color: #112952; bottom: 0; left: 0;}
.section-header.type2 h4 {font-size: 42px; font-weight: 700; color: #000; line-height: 1.354; margin-top: 30px;}

/* s1_1 */
.s1_1 {padding: 140px 0 160px;}
.s1_1 .section-header.type2 {text-align: left;}
.s1_1 .greeting {width: 100%; display: flex;}
.s1_1 .greeting .txt {max-width: 770px; width: 100%;}
.s1_1 .article-header {text-align: left;}
.s1_1 .greeting .txt h4 {font-size: 48px;}
.s1_1 .greeting .txt h5 {font-size: 28px; font-weight: 600; color: #112952; margin-top: 30px;}
.s1_1 .greeting .txt p {font-size: 18px; line-height: 1.778; color: #666; margin-top: 35px;}
.s1_1 .greeting .txt p ~ p {margin-top: 25px;}
.s1_1 .greeting .txt dl {margin-top: 45px; display: flex; align-items: center; gap: 20px;}
.s1_1 .greeting .txt dl dt {font-size: 18px; font-weight: 700; color: #000;}
.s1_1 .greeting .txt dl dd {font-size: 32px; font-weight: 700; color: #000;}
.s1_1 .greeting .img {max-width: 650px; width: 100%;}
.s1_1 .greeting .img img {display: block; max-width: 100%; margin: 0 auto;}


/* s1_2 */
.s1_2 {padding-bottom: 0;}
.s1_2 article {margin-top: 85px; width: 100%; background-color: #f5f5f5; padding:90px 0 140px;}
.s1_2 article .vision {padding: 0px 130px;}
.s1_2 article .vision ul {width: calc(100% + 40px); margin: 0 -20px; display: flex;}
.s1_2 article .vision ul li {width: 33.3333%; padding: 0 20px; min-height: 430px;}
.s1_2 article .vision ul li .item {position: relative; background-color: #fff; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.s1_2 article .vision ul li .item::after {position: absolute; z-index: 1; content: ''; width: 42px; height: 42px; background-color: #f5f5f5; bottom: -1px; right: 0;clip-path: polygon(100% 100%, 0% 100%, 100% 0%);}
.s1_2 article .vision ul li .item img {display: block; margin: 0 auto 30px;}
.s1_2 article .vision ul li .item h5 {font-weight: 700; color: #000; font-size: 32px; text-align: center;}
.s1_2 article .vision ul li .item span {font-size: 20px; font-weight: 700; color: #112952; text-align: center; padding-top: 15px;}
.s1_2 article .vision ul li .item p {font-size: 18px; color: #666; line-height: 1.778; margin-top: 25px; text-align: center;}

/* s1_3 인증서 팝업 */
.certi-pop {display: none; position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0, .3); z-index: 1001; top: 0; left: 0;}
.certi-pop .popup {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 700px; background-color: #fff;}
.certi-pop .popup .inner {padding:50px 30px; position: relative; width: 100%;}
.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: 22px; padding-top: 25px; line-height: 30px; color: #333; font-weight: 600; text-align: center;}

/* s1_4 */
.s1_4 article {margin-top: 70px; width: 100%;}
.s1_4 article ~ article {margin-top: 60px;}
.s1_4 article .map {width: 100%; height: 400px; position: relative;}
.s1_4 article .map::after {position: absolute; z-index: 1; content: ''; width: 67px; height: 67px; background-color: #fff; top: -1px; right: -1px; clip-path: polygon(100% 0%, 100% 100%, 0% 0%);}
.s1_4 article .map iframe {width: 100%; height: 100%;}
.s1_4 article .map-info {margin-top: 30px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 30px;}
.s1_4 article .map-info .info {max-width: 1200px; width: 100%; display: flex; align-items: center;}
.s1_4 article .map-info .info h5 {font-size: 36px; font-weight: 700; color: #000; max-width: 120px; width: 100%;}
.s1_4 article.arti02 .map-info .info h5 {max-width: 195px;}
.s1_4 article.arti03 .map-info .info h5 {max-width: 165px;}
.s1_4 article .map-info .info dl {display: flex; width: 100%; max-width: 335px;}
.s1_4 article .map-info .info dl:nth-of-type(2) {max-width: 370px;}
.s1_4 article.arti02 .map-info .info dl,
.s1_4 article.arti03 .map-info .info dl {max-width: 475px;}
.s1_4 article .map-info .info dl dt {max-width: 50px; width: 100%; font-size: 18px; font-weight: 700; color: #112952;}
.s1_4 article .map-info .info dl dd {font-size: 18px; color: #666;}
.s1_4 article .map-info .info dl dd a {color: #666;}
.s1_4 article .map-info .btn-area {max-width: 120px; display: flex; width: 100%;}
.s1_4 article .map-info .btn-area a {display: block; width: 50%; height: 60px; background: url() 50% 50% no-repeat; background-size: auto; transition: all .2s linear; border: 1px solid #ddd;}
.s1_4 article .map-info .btn-area a.search {background-image: url(../images/sub/ico_search.png);border-right: 1px solid #ddd;}
.s1_4 article .map-info .btn-area a.print {background-image: url(../images/sub/ico_print.png); border-left: 0;}
.s1_4 article .map-info .btn-area a:hover {background-color: #112952;}
.s1_4 article .map-info .btn-area a:hover.search {background-image: url(../images/sub/ico_search_on.png);}
.s1_4 article .map-info .btn-area a:hover.print  {background-image: url(../images/sub/ico_print_on.png);}


/* s2 공통 */
.s2 article {margin-top: 100px; border-top: 1px solid #000; display: flex; padding-top: 50px;}
.s2 article ~ article {margin-top: 120px;}
.s2 article .tit {max-width: 250px; width: 100%; font-size: 36px; font-weight: 700; color: #000; line-height: 1;}
.s2 article .cnt > figure img {display: block; max-width: 100%; margin: 0 auto;}
.s2 article .cnt01 {max-width: 1170px; width: 100%;}
.s2 article .cnt01 ul {width: calc(100% + 30px); margin: 0 -15px; display: flex; flex-wrap: wrap;}
.s2 article .cnt01 ul li {width: 33.3333%; padding: 0 15px;}
.s2 article .cnt01 ul li:nth-of-type(3) ~ li {margin-top: 30px;}
.s2 article .cnt01 ul li figure {width: 100%;}
.s2 article .cnt01 ul li figure img {display: block; max-width: 100%; margin: 0 auto;}
.s2 article .cnt01 ul li figcaption {border: 1px solid #ddd; border-top: 0; text-align: center; font-size: 20px; font-weight: 700; color: #112952; padding: 20px 5px; line-height: 28px;}

/* s2_1 */
.s2_1 .note {margin-top: 40px; width: 100%; background-color: #f5f5f5; padding: 30px;}
.s2_1 .note dl {width: 100%; display: flex; align-items: center; justify-content: center;}
.s2_1 .note dl dt {max-width: 90px; width: 100%; font-size: 18px; color:#000; font-weight: 700;}
.s2_1 .note dl dd {font-size: 18px; color: #666;}

.s2_1 article {margin-top: 40px; padding-top: 45px;}
.s2_1 article .cnt03 {max-width: 1170px; width: 100%;}
.s2_1 article .cnt03 ul {width: 100%; margin: 0; display: block;}
.s2_1 article .cnt03 ul li {width: 100%; padding: 0 0 30px; display: flex; gap: 40px;}
.s2_1 article .cnt03 ul li ~ li {padding: 30px 0;}
.s2_1 article .cnt03 ul li:last-child {padding-bottom: 0;}
.s2_1 article .cnt03 ul li:not(:last-child) {border-bottom: 1px solid #ddd;}
.s2_1 article .cnt03 ul li .img {max-width: 110px; width: 100%;}
.s2_1 article .cnt03 ul li .img img {display: block; max-width: 100%; margin: 0 auto;}
.s2_1 article .cnt03 ul li dl {padding-top: 20px;}
.s2_1 article .cnt03 ul li dl dt {font-size: 28px; font-weight: 700; color: #000;}
.s2_1 article .cnt03 ul li dl dd {font-size: 18px; color: #666; line-height: 1.778; margin-top: 20px;}

.s2_1 article .cnt01 ul li {width: 25%;}
.s2_1 article .cnt01 ul li:nth-of-type(3) ~ li {margin-top: 0;}


/* s2_2 */
figure.bg {margin-top: 50px;}
figure.bg img {max-width: 100%; margin: 0 auto; display: block;}