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


#content {overflow: hidden;}
.pop {font-family: "Poppins", sans-serif;}

/* splitting */
.page-header > .container.motion h3.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: 640px; background: url() 50% 50% no-repeat; background-size: cover;}
.page-header > .container {padding-top: 320px;}
.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.type5 {background-image: url(../images/sub/s-visual05.jpg);}
.page-header.type10 {background-image: url(../images/sub/s-visual05.jpg);}

.page-header .container h3 {font-size: 55px; font-weight: 600; color: #fff; text-align: center;}

.lnb {position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(174,174,174, .08); backdrop-filter: blur(7px);  z-index: 5;}
.lnb ul {width: auto; display: table; table-layout:fixed; margin: 0 auto;}
.lnb ul li {display: table-cell; position: relative;}
.lnb ul li::after {position: absolute; content:''; width: 1px; height: 12px; top: 50%; right: 0; transform: translateY(-50%); background-color: rgba(255,255,255, .2);}
.lnb ul li:last-child::after {display: none;}
.lnb ul li a {position: relative; display: flex; gap: 70px; align-items: center; padding: 0 40px; color: #fff; line-height: 77px; transition: all .3s linear; z-index: 2; cursor: default; pointer-events: none; font-size: 18px;}
.lnb ul li.snav a {cursor: pointer; pointer-events: auto; min-width: 205px;}
.lnb ul li a > span {display: block; font-weight: 500;}
.lnb ul li a > i {display: block; font-style: normal; font-size: 20px; font-weight: 400; padding-bottom: 3px;}

.lnb ul li .snav-drop {display: none; width: 100%; position: absolute; top: 80px; left: 0; background-color: #fff; border-radius: 0 0 10px 10px; overflow: hidden; box-shadow: 0px 5px 10px rgba(0,0,0, 0.15);}
.lnb ul li .snav-drop a {display: block; width: 100%; line-height: 60px; font-size: 16px; color: #666; padding: 0 15px;  border-bottom: 1px solid #ddd; transition: all .2s linear;}
.lnb ul li .snav-drop a:last-child {border-bottom: 0;}
.lnb ul li .snav-drop a.active {color: #2a98f0;}


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

section {padding: 160px 0 180px;}
.section-header h4 {position: relative; padding-top: 25px; text-align: center; color: #000; font-weight: 600; font-size: 48px;}
.section-header h4::before {position: absolute; content: ''; width: 23px; height: 12px; background: url(../images/sub/ico_bullet.png) 50% 50% no-repeat; background-size: auto; top: 0; left: 50%; transform: translateX(-50%);}
.section-header p {font-size: 22px; color: #666; line-height: 1.636; margin-top: 45px; text-align: center;}


.article-header h5 {font-size: 50px; font-weight: 600; color: #000; text-align: center; line-height: 60px;}
.article-header p {font-size: 24px; line-height: 40px; color: #333; padding-top: 45px; text-align: center;}

.bg {margin-top: 80px; width: 100%; height: 480px; background: url() 50% 50% no-repeat; background-size: cover; overflow: hidden; border-radius: 16px;}
.bg.s101 {background-image:url(../images/sub/bg_s101.jpg);}
.bg.s102 {background-image:url(../images/sub/bg_s102.jpg);}

/* s1_1 */
.s1_1 .greeting {width: 100%; margin-top: 75px; display: flex; position: relative;}
.s1_1 .greeting .tit {max-width: 530px; width: 100%; padding-left: 20px; position: relative;}
.s1_1 .greeting .tit span {display: block; font-size: 18px; font-weight: 700; color: #1c5ab1;}
.s1_1 .greeting .tit h5 {font-size: 36px; line-height: 1.333; font-weight: 600; color: #000; margin-top: 20px;}
.s1_1 .greeting dl {position: absolute; bottom: 5px; left: 20px; display: flex; gap: 10px;}
.s1_1 .greeting dl dt {font-size: 23px; color: #999; font-weight: 600;}
.s1_1 .greeting dl dd {font-size: 23px; color: #333; font-weight: 600;}
.s1_1 .greeting .txt {max-width: 910px; width: 100%;}
.s1_1 .greeting .txt p {font-size: 18px; color: #666; line-height: 1.667;}
.s1_1 .greeting .txt p ~ p {margin-top: 30px;}

/* s1_2 */
.s1_2 {padding-bottom: 0;}
.history-wrap {position:relative; margin-top: 75px;}
.history-wrap.history-fixed .year h3 {position:fixed; left:5px; top:5px; padding-left:calc((100% - 1290px)/2); padding-top:230px;}
.history-wrap.history-fixed .year p {position:fixed; left:0; top:55px; padding-left:calc((100% - 1290px)/2); padding-top:230px; color: #1c5ab1;}
.history-wrap.history-fixed.last .year h3  {position:absolute; bottom:465px; left:0; padding-left:0; padding-top:0; top:auto;}
.history-wrap.history-fixed.last .year p  {position:absolute; bottom:240px; left:0; padding-left:0; padding-top:0; top:auto;}
.history-wrap .col {display:flex; position:relative; z-index:11;}
.history-wrap .year {max-width: 585px; width:100%; position:relative; padding-left: 75px;}
.history-wrap .year h3 {font-size:32px; color:#000; font-weight:600; position:absolute; top:5px; left:80px;}
.history-wrap .year p {font-size:90px; font-weight:700; position:absolute; top:55px; left:75px; opacity:0; color: #1c5ab1; font-family: 'Montserrat';}
.history-wrap .year p.on {opacity:1;}
.history-wrap .txt-wrap {width:1%; flex:1 1 auto;}
.history-wrap .txt-wrap .txt-box {padding-left:50px; position:relative; padding-bottom:85px;}
.history-wrap .txt-wrap .txt-box:last-child {padding-bottom:290px; margin-bottom:0;}
.history-wrap .txt-wrap .txt-box:before {content:''; width:18px; height:18px; border-radius:50%; background-image:url(../images/sub/ico_dot.png); position:absolute; top:9px; left:-9px; z-index: 2;}
.history-wrap .txt-wrap .txt-box:after {position:absolute; content:''; width:1px; height:100%; top:25px; left:-1px; background:#ddd; z-index: 1;}
.history-wrap .txt-wrap .txt-box .mo-year {display:none;}
.history-wrap .txt-wrap .txt {display:flex;}
.history-wrap .txt-wrap .txt ~ .txt {margin-top: 35px;}
.history-wrap .txt-wrap .txt .month {width:75px; font-size:18px; line-height:30px; color:#111; font-weight:600;}
.history-wrap .txt-wrap .txt ul {width:1%; flex:1 1 auto;}
.history-wrap .txt-wrap .txt ul li {font-size:18px; color:#666; line-height:30px;}
.history-wrap .txt-wrap .txt ul li ~ li {padding-top: 10px;}

/* s1_3 */
.s1_3 figure {margin-top: 35px; width: 100%;}
.s1_3 figure img {display: block; margin: 0 auto; }

/* s1_4 */
.s1_4 .map-box {width: 100%; height: 480px; border-radius: 16px; overflow: hidden; margin-top: 80px;}
.root_daum_roughmap .wrap_controllers {display: none;}
.root_daum_roughmap .cont {display: none;}
.root_daum_roughmap_landing {width: 100% !important; height: 100%;}
.root_daum_roughmap .wrap_map {width: 100%; height: 100% !important;}
.root_daum_roughmap .map_border {display: none;}
.s1_4 .map-info {margin-top: 55px; width: 100%;}
.s1_4 .map-info .info-tit {width: 100%; display: flex; align-items: center; justify-content: space-between; padding-bottom: 25px; border-bottom: 1px solid #ddd; gap:15px;}
.s1_4 .map-info .info-tit h5 {font-size: 36px; font-weight: 600; color: #000;}
.s1_4 .map-info .info-tit h5 span {font-size: 24px; font-weight: 600; color: #cdcdcd; display: inline-block; vertical-align: bottom; padding-left: 10px;}
.s1_4 .map-info .info-tit .btn-area {width: auto; display: flex; gap: 10px;}
.s1_4 .map-info .info-tit .btn-area a {display: block; width: 160px; border-radius: 10px; line-height: 53px; padding: 0 25px 0 30px; color: #fff; font-size: 18px; font-weight: 400; background: url(../images/sub/ico_plus.png) calc(100% - 25px) 50% no-repeat; background-size: auto; transition: all .2s linear;}
.s1_4 .map-info .info-tit .btn-area a.search {background-color: #1698d5; border: 1px solid #1698d5;}
.s1_4 .map-info .info-tit .btn-area a.print {background-color: #1c5ab1; border: 1px solid #1c5ab1;}
.s1_4 .map-info .info-tit .btn-area a.search:hover {background-color: #fff; color: #1698d5; background-image: url(../images/sub/ico_plus_on1.png);} 
.s1_4 .map-info .info-tit .btn-area a.print:hover {background-color: #fff; color: #1c5ab1;background-image: url(../images/sub/ico_plus_on2.png);}

.s1_4 .map-info .info {margin-top: 35px;}
.s1_4 .map-info .info dl {display: flex; line-height: 28px;}
.s1_4 .map-info .info dl ~ dl {margin-top: 12px;}
.s1_4 .map-info .info dl dt {max-width: 50px; width: 100%; font-size: 18px; font-weight: 600; color: #000;}
.s1_4 .map-info .info dl dd {font-size: 18px; color: #666; font-weight: 400;}
.s1_4 .map-info .info dl dd address {font-style: normal;}
.s1_4 .map-info .info dl dd a {color: #666;}

/* s2_1 */
.s2_1 article {margin-top: 80px; width: 100%;}
.s2_1 article ul {width: calc(100% + 24px); margin: 0 -12px; display: flex; flex-wrap: wrap;}
.s2_1 article ul li {width: 33.3333%; padding: 0 12px; min-height: 595px;}
.s2_1 article ul li:nth-of-type(3) ~ li {margin-top: 80px;}
.s2_1 article ul li figure {width: 100%; border-radius: 16px; overflow: hidden; height: 100%;}
.s2_1 article ul li figure img {display: block; margin: 0 auto; max-width: 100%; width: 100%; height: 290px;}
.s2_1 article ul li figure figcaption {border: 1px solid #ddd; border-top: 0; padding: 50px 40px 20px; min-height: calc(100% - 290px); overflow: hidden; border-radius: 0 0 16px 16px;}
.s2_1 article ul li figure figcaption span {display: inline-block; padding: 0 17px; line-height: 38px; border-radius: 30px; border: 1px solid #1c5ab1; color: #1c5ab1; font-weight: 700; font-size: 16px;}
.s2_1 article ul li figure figcaption h5 {font-size: 26px; font-weight: 600; color: #000; margin-top: 30px; line-height: 1;}
.s2_1 article ul li figure figcaption p {font-size: 18px; line-height: 1.667; color: #666; margin-top: 18px;}

/* s3_1 */
.s3_1 article {margin-top: 80px; width: 100%;}
.s3_1 article ul {width: calc(100% + 24px); margin: 0 -12px; display: flex; flex-wrap: wrap;}
.s3_1 article ul li {width: 33.3333%; padding: 0 12px;}
.s3_1 article ul li:nth-of-type(3) ~ li {margin-top: 24px;}
.s3_1 article ul li a {display: block; width: 100%; border-radius: 16px; overflow: hidden; position: relative;}
.s3_1 article ul li a img {width: 100%; display: block; margin: 0 auto; max-width: 100%; transition: all .2s linear;}
.s3_1 article ul li a h5 {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; font-size: 36px; font-weight: 600; color: #fff; text-align: center; z-index: 1;}
.s3_1 article ul li a h5 span {font-size: 26px; font-weight: 400; display: block; padding-top: 10px;}
.s3_1 article ul li a::before {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(20, 63, 124, .7); z-index: 1; filter: brightness(1.5); opacity: 0; transition: all .2s linear;}
.s3_1 article ul li a:hover img {filter: blur(3px);}
.s3_1 article ul li a:hover::before {opacity: 1;}