@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus,
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

.only-desktop-tablet {display:block;}
.only-desktop {display:block;}
.only-tablet {display:none;}
.only-mobile {display:none;}

#container {position:relative; background:#1a1a1a; overflow:hidden;}
.contain {max-width:1260px; padding-left:30px; padding-right:30px; margin:0 auto;}

/* header */
#header {position:absolute; top:0; left:0; width:100%; transition:.2s; z-index:100; border-bottom:1px solid rgba(255,255,255,.3);}
#header .contain {position:relative; display:flex; align-items:center; justify-content:center; max-width:1780px; z-index:2; height:80px;}
#header .sitelogo {flex:1; padding:15px 0;}
#header .sitelogo img {max-height:70px;}

#main .sitelogo {display:none;}
#main #header {border-bottom:none;}
#header.header-active {height:60px;border-bottom:none;}
#header.header-active  .sitelogo {display:none;}

#gnb {flex:1 1 auto; min-width:0; width:1%;}
#gnb > ul {display:flex; justify-content:flex-end; margin:0 -40px;}
#gnb > ul > li {position:relative;}
#gnb > ul > li > a {display:flex; align-items:center; justify-content:center; height:99px; padding:0 40px; color:#fff; font-size:19.81px; font-weight:500; line-height:1.2em; letter-spacing:-.03em;}
#gnb .submenu {position:absolute; left:0; width:100%; height:0; overflow:hidden; text-align:center;}
#gnb .submenu ul {padding-top:22px; padding-bottom:27px;}
#gnb .submenu ul li {padding:8px 0;}
#gnb .submenu ul li a {position:relative;display:block; line-height:1.5em; letter-spacing:-.03em; font-size:16px;}
#gnb .submenu ul li a:hover {color:#0a6a7e; text-decoration:underline; text-underline-offset:5px;}
#gnb > ul > li > a:after {content:""; position:absolute; bottom:-5px; left:50%; width:0; height:2px; transform:translateX(-50%); border-radius:100%; background:#0a6a7e; transition:.2s;}
#gnb > ul > li.active > a:after {width:8px; height:8px; }
#header.active #gnb > ul > li.active > a {color:#0a6a7e; font-weight:700;}


/* for mobile */
#header.header-active .btn-m-menu {bottom:0;}
.btn-m-menu {position:absolute; right:0; width:26px; height:20px; overflow:hidden; text-indent:-9999em; z-index:50;}
.btn-m-menu span {position:absolute; top:50%; right:0; width:50%; height:2px; margin-top:-1px; background:#fff;}
.btn-m-menu:before,
.btn-m-menu:after {content:" "; position:absolute; left:0; width:100%; height:2px; background:#fff;}
.btn-m-menu:before {top:0;}
.btn-m-menu:after {bottom:0;}

.mobile-navigation {position:fixed; top:0; right:0; width:580px; height:100%; overflow:auto; transition:.2s linear; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:150; color:#454545; letter-spacing:-.03em; font-family:"montserrat", sans-serif;}
.mobile-navigation .home {display:flex; align-items:center; height:120px; padding:0 20px;}
.mobile-navigation .home img {height:45px;}
.mobile-navigation .menu-nav {padding:0 72px;}
.mobile-navigation .menu-nav > ul > li:hover > .menu-tit {color:#373f99;}
.mobile-navigation .submenu > ul > li:hover > a {color:#373f99}
.mobile-navigation .menu-tit {font-weight:600; font-size:22px; margin-bottom:10px; display:block;}
.mobile-navigation .menu-nav > ul > li:not(:last-child) {margin-bottom:25px;}
.mobile-navigation .submenu a {font-size:15px; font-weight:500; margin-bottom:2px;}
.mobile-navigation .submenu li {position:relative; padding-left:10px; margin-bottom:7px;}
.mobile-navigation .submenu li:before {position:absolute; content:'·'; left:0;}
.mobile-navigation .submenu.diff a {font-family:'Pretendard'; font-weight:400;}

.mobile-navigation .close {position:absolute; top:25px; right:100px; width:26px; height:26px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:12px; left:0; width:100%; height:3px; background:#454545; border-radius:3px;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}
.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:101;}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}

/* main */
.main-intro {position:relative;}
.main-intro .slick-dots {position:absolute; width:100%; bottom:165px; padding:0 30px; display:flex; justify-content:center; gap:10px;}
.main-intro .slick-dots button {border:none; width:13px; height:13px; background:#fff; border-radius:100%; font-size:0; text-indent:-9999em; overflow:hidden;}
.main-intro .slick-dots .slick-active button {background:#4b53a3;}
.main-intro .btn-sort {position:absolute;  bottom:60px; left:50%; transform:translateX(-50%); }
.btn-sort {font-family:"roboto", sans-serif; border-radius:25px; border:1px solid rgba(255,255,255,.3); font-size:22px; font-weight:500; padding:11px 26px;}
.btn-sort:hover {background:#4b53a3; border-color:#4b53a3;}
.main-intro .center {position:absolute; top:50%; left:50%; margin-left:-185px; margin-top:-217px;}
.main-intro .inner {display:flex;}
.main-intro .intro-slide {width:50%; position:relative; display:block;}
.main-intro .intro-slide .item {position:relative; width:100%; height:100vh;}
.main-intro .intro-slide .item img {position:absolute;width:100%; height:100%; object-fit:cover; top:0; left:0;}


/* sub */
.lnb-wrap {position:relative;  text-align:center;}
.lnb {margin:0 auto; max-width:1200px;}
.lnb .swiper-container {margin-bottom:-2px; padding-bottom:0;}
.lnb ul {justify-content:flex-start; flex-direction: column;}
.lnb ul li {text-align: left; border-bottom: 1px solid #fff;}
.lnb ul li a {position:relative; display:flex; align-items:center; padding: 15px 0; width:100%; color:#bfbfbf; font-size:17px;  line-height:1.2em; letter-spacing:-.03em;}
.lnb ul li.active a {font-weight:500; color:#4b53a3;}
.lnb ul li.active a:before {position: absolute; content: ''; width: 8px; height: 14px; background: url('../images/common/lnb-arrow.png') no-repeat center center; background-size: contain; right: 0;}

.sub-title {position: relative; display: flex; align-items: center; justify-content: center; font-family:"roboto", sans-serif; padding:40px 0; max-width:1260px; margin:0 auto; text-align:center; }
#contArea.wide .sub-title {max-width: 100%; padding-left:30px; padding-right:30px;}
.sub-title h2 {font-size:50px; line-height:1.3em;}
.sub-title .year {font-size:50px; line-height:1.3em; font-weight: 700; margin-right: 10px;}
.sub-title .btn-pdf {position: absolute; right: 0; bottom: 50px; height: 65px; width: 30px; background: url('/pdfjs/web/images/toolbarButton-presentationMode.png') no-repeat center center; background-size: contain;}

#contArea {max-width:1260px; padding-left:30px; padding-right:30px; margin:0 auto;}
#contArea.wide {max-width:100%; padding:0;}


.ico img {vertical-align:middle;}

.real-cont {padding-bottom:110px;}

/* footer */
#footer {background:#1a1a1a; font-size:13px; font-weight:300; color:#b8b8b8; padding:30px 0; text-align:center; border-top:1px solid rgba(255,255,255,.3);}
#footer .contain {display:flex; justify-content:space-between;max-width:1780px;}
#footer h5 {font-weight:500; font-size:17px; color:#fff; letter-spacing:-.02em; margin-bottom:10px;}
#footer address {display:flex; align-items:center; gap:15px; justify-content:center;}
#footer address span {font-style:normal; }
#footer .copyright span {color:#4e4e4e;}