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


#sub {overflow: hidden;}
.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%;}
.page-header > .container {position: relative; padding: 145px 15px 25px; display: flex; align-items: flex-end; justify-content: space-between;}
.page-header > .container::after {position: absolute; content:''; width: calc(100% - 30px); height: 1px; background-color: #808080; bottom: 0; left: 50%; transform: translateX(-50%);}
.page-header .container h2 {font-size: 65px; font-weight: 700; color: #333;}
.lnb ul {display: flex; align-items: center;}
.lnb ul li {position: relative; font-size: 16px; font-weight: 500; color: #333;}
.lnb ul li.home {padding-right: 10px;}
.lnb ul li.home img {display: block; max-width: 100%; margin: 0 auto;}
.lnb ul li:nth-of-type(3) {padding-left: 24px;}
.lnb ul li:nth-of-type(3)::after {position: absolute; content: ''; width: 6px; height: 11px; top: 50%; left: 9px; background:url(../images/sub/ico_arrow.png) 50% 50% no-repeat; background-size: auto; transform: translateY(-50%);}

.sub_2_1_ .lnb ul li:nth-of-type(3), 
.sub_3_1_ .lnb ul li:nth-of-type(3), 
.sub_5_1_ .lnb ul li:nth-of-type(3), 
.sub_6_1_ .lnb ul li:nth-of-type(3),
.sub_10 .lnb ul li:nth-of-type(3),
.sub_13 .lnb ul li:nth-of-type(3){display: none;}

section {padding: 155px 0 310px;}
.section-header h3 {position: relative; color: #333; font-weight: 300; font-size: 48px; line-height: 1.25;}
.section-header h3 > strong {font-weight: 600;}
.section-header p {font-size: 30px; line-height: 1.5; color: #333; margin-top: 35px;}
.section-header p > span {font-size: 25px; color: #919191; font-weight: 400;}

.cnt-tit {position: relative; font-size: 30px; font-weight: 600; color: #333; padding-left: 20px;}
.cnt-tit::before {position: absolute; content: ''; width: 4px; height: 4px; border-radius: 50%; background-color: #333; top: 15px; left: 0;}
.cnt {padding: 60px 0 50px;}
.cnt:last-child {padding-bottom: 0;}
.cnt ~ .cnt {border-top: 1px solid #ddd;}
.cnt p {font-size: 20px; color: #666; line-height: 1.75; margin-top: 30px; margin-left: 20px;}

.inner {padding: 0 145px; width: 100%;}

.bg {width: 100%; margin-top: 80px;}
.bg img {max-width: 100%; display: block; margin: 0 auto;}


/* s1_1 */
.s1_1 .arti01 {position: relative; width: 100%;}
.s1_1 .arti01 .intro {max-width: 1045px; width: 100%; background-color: #f7f7f7; padding: 65px 75px 65px;}
.s1_1 .arti01 .intro h4 {font-size: 48px; font-weight: 600; color: #333;}
.s1_1 .arti01 .intro h5 {font-size: 30px; font-weight: 600; color: #333; line-height: 1.56; margin-top: 60px;}
.s1_1 .arti01 .intro p {font-size: 20px; color: #333; line-height: 1.75; margin-top: 35px;}
.s1_1 .arti01 > figure {position: absolute; top: 50px; right: 0;}
.s1_1 .arti01 > figure img {display: block; margin: 0 auto; max-width: 100%;}

.s1_1 .arti02 {margin-top: 100px;}
.s1_1 .cnt p.dot {position: relative; padding-left: 15px;}
.s1_1 .cnt p.dot ~ .dot {margin-top: 0;}
.s1_1 .cnt p.dot::before {position: absolute; content: ''; width: 3px; height: 3px; background-color: #666; border-radius: 50%; top: 15px; left: 0;}
.s1_1 .cnt p.mt0 {margin-top: 0;}
.s1_1 .cnt p > b {font-weight: 600; color: #418154; display: block; margin-top: 10px; padding-left: 15px;}

.s1_1 .key3 {margin-top: 30px; width: 100%;}
.s1_1 .key3 ul {width: calc(100% + 54px); margin: 0 -27px; display: flex;}
.s1_1 .key3 ul li {width: 33.3333%; padding: 0 27px;}
.s1_1 .key3 ul li dl {width: 100%;}
.s1_1 .key3 ul li dl dt {width: 100%;}
.s1_1 .key3 ul li dl dt img {max-width: 100%; display: block; margin: 0 auto; width: 100%;}
.s1_1 .key3 ul li dl dd {margin-top: 45px; width: 100%;}
.s1_1 .key3 ul li dl dd strong {font-size: 24px; font-weight: 600; color: #418154;}
.s1_1 .key3 ul li dl dd strong > span {font-size: 20px;}
.s1_1 .key3 ul li dl dd p {margin-left: 0;}

.s1_1 .slogan {margin-top: 165px; width: 100%;}
.s1_1 .slogan figure {text-align: center;}
.s1_1 .slogan h3 {font-size: 40px; font-weight: 400; color: #8d9a8f; line-height: 1.5; margin-top: 40px; text-align: center;}
.s1_1 .slogan h3 > strong {font-weight: 600; color: #418154;}

/* s1_2 */
.s1_2 figure {max-width: 1048px; width: 100%; margin: 0 auto;}
.s1_2 figure img {max-width: 100%; display: block; margin: 0 auto;}

/* s1_3 */
.s1_3 article {display: flex; width: 100%; gap: 175px;}
.s1_3 article figure {max-width: 440px; width: 100%; padding-top: 5px;}
.s1_3 .history-wrap {width: 1%; flex: 1 1 auto;}
.s1_3 .history {width: 100%; display: flex;}
.s1_3 .history:nth-of-type(1) {margin-top: 90px;}
.s1_3 .history-wrap h3 {font-size: 48px; font-weight: 300; color: #333;}
.s1_3 .history-wrap h3 > strong {font-weight: 600;}
.s1_3 .history .year {max-width: 205px; width: 100%;}
.s1_3 .history .year h4 {font-size: 47px; color: #418154; font-weight: 600; padding-left: 10px;}
.s1_3 .history .month {position: relative; width: 1%; flex: 1 1 auto; padding-left: 40px; padding-bottom: 100px;}
.s1_3 .history .month::before {position: absolute; content: ''; width: 24px; height: 24px; border: 1px solid #418154; border-radius: 50%; top: 5px; left: -12px;}
.s1_3 .history .month::after {position: absolute; content: ''; width: 1px; height: calc(100% - 37px); top: 35px; left: 0; background-color: #ddd;}
.s1_3 .history:last-child .month {padding-bottom: 0;}
.s1_3 .history:last-child .month::after {display: none;}
.s1_3 .history .month dl {display: flex; width: 100%;}
.s1_3 .history .month dl ~ dl {margin-top: 10px;}
.s1_3 .history .month dl dt {max-width: 80px; width: 100%; font-size: 20px; color: #333; font-weight: 600; line-height: 1.6;}
.s1_3 .history .month dl dd {width: 1%; flex: 1 1 auto;font-size: 20px; color: #666; line-height: 1.6;}
.s1_3 .history:last-child .month {padding-top: 4px;}


/* s1_4 */
.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; width: 100%; padding: 0 15px;}
.certi-pop .popup .inner {padding:50px 30px 0px; position: relative; width: 100%; background-color: #fff;}
.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:30px 0; line-height: 1.5; color: #202020; font-weight: 500; text-align: center;}


/* s1_5 */
.s1_5 .map {width: 100%; height: 740px;}
.s1_5 .map iframe {width: 100%; height: 100%; border: 0;}
.s1_5 .map  .root_daum_roughmap, .s1_5 .map .root_daum_roughmap .wrap_map {width: 100% !important; height: 100% !important; border: 0;}
.root_daum_roughmap .cont, .root_daum_roughmap .wrap_controllers {display: none;}
.root_daum_roughmap .map_border {display: none !important;}
.s1_5 .map-info {margin-top: 45px; width: 100%; display: flex; padding: 0 10px 0 40px;}
.s1_5 .map-info .info {width: 1%; flex:1 1 auto;}
.s1_5 .map-info .info dl {width: 100%;}
.s1_5 .map-info .info dl dt {position: relative; max-width: 150px; width: 100%; font-size: 20px; font-weight: 700; color: #333; line-height: 48px; border-radius: 50px; text-align: center;}
.s1_5 .map-info .info dl dt::before {position: absolute; content: ''; width: 100%; height: 50%; top: 0; left: 0; background-color: #fff; z-index: -1;}
.s1_5 .map-info .info dl dt::after {position: absolute; content: ''; width: 100%; height: 100%; bottom: 0; left: 0; border: 4px solid #418154; background-color: transparent; border-radius: 50px; z-index: -2;}
.s1_5 .map-info .info dl dd {margin-top: 25px;}
.s1_5 .map-info .info dl dd p {font-size: 20px; font-weight: 500; color: #333; line-height: 1.6; display: inline-block;}
.s1_5 .map-info .info dl dd p * {color: #333; display: inline-block;}
.s1_5 .map-info .info dl dd p:last-child {margin-top: 10px;}
.s1_5 .map-info .btn-area {margin-top: 17px; max-width: 150px; width: 100%; display: flex; gap: 20px;}
.s1_5 .map-info .btn-area > a {display: block; width: 65px; height: 65px; border: 1px solid #418154; border-radius: 50%; background: url() 50% 50% no-repeat; background-size: auto; transition: all .2s linear;}
.s1_5 .map-info .btn-area > a:hover {background-color: #808080; border-color: #808080;}
.s1_5 .map-info .btn-area > a.print {background-image: url(../images/sub/ico_print.png);}
.s1_5 .map-info .btn-area > a.search {background-image: url(../images/sub/ico_search.png);}
.s1_5 .map-info .btn-area > a:hover.print {background-image: url(../images/sub/ico_print_on.png);}
.s1_5 .map-info .btn-area > a:hover.search {background-image: url(../images/sub/ico_search_on.png);}

/* s2 s3 */
.s2 .bg {margin-top: 0;}
.s2 article {margin-top: 110px;}
.s2 .cnt {display: flex;}
.s2 .cnt .cnt-tit {max-width: 430px; width: 100%; margin-top: 5px; line-height: 1.3; font-size: 28px;}
.s2 .cnt .cnt-tit::before {width: 6px; height: 6px; top: 13px;}
.s2 .cnt p {width: 1%; flex: 1 1 auto; margin: 0;}

/* .s3_1 .cnt:nth-of-type(1) .cnt-tit {line-height: 1.7; margin-top: 0;}
.s3_1 .cnt:nth-of-type(1) .cnt-tit::before {top: 22px;}
.s3_1 .cnt .cnt-tit {max-width: 330px;} */


/* s4 */
.s4 article.inner {margin-top: 125px;}
.s4 article .item {width: 100%; border-bottom: 1px solid #ddd; display: flex; align-items: center; padding: 20px 0; min-height: 200px;}
.s4 article .item .icon {max-width: 170px; width: 100%; padding-left: 10px;}
.s4 article .item .txt {width: 1%; flex: 1 1 auto;}
.s4 article .item .txt h5 {font-size: 30px; font-weight: 600; color: #333; line-height: 1.2;}
.s4 article .item .txt p {font-size: 20px; color: #666; line-height: 1.5; margin-top: 35px;}