/* ===================== Header ===================== */
.header{position: fixed; top: 0;left: 0; width:100%;z-index: 99; transition: background 0.2s}
.header .inner{max-width:1720px; margin:auto; padding:1em ; display: flex; align-items: center; justify-content: space-between;}
.header a{color:white}
.header .logo{max-width:18em}

.header .menu{display: flex; }
.header .menu > li{position: relative;border-bottom:1px solid transparent}
.header .menu > li > a {display: block; padding:1em 2em; font-weight: 500;letter-spacing: 0.05em;}

.header .menu > li:hover{border-color:#fff}

.header .submenu{display: none;position: absolute; width:100%;min-width:10em; left:50%; top:100%; transform: translateX(-50%); z-index: 2;padding:1em 0}
.header .submenu > li {padding:0.5em}
.header .submenu > li > a{display: block;}
.header .submenu > li > a:hover{color: #548dec;}

.header .aside {display: flex; align-items: center;}
.header .aside a{display: block; padding:0.5em; border-radius: 50%; border: 1px solid #fff;background:none; color: #fff; margin-right:1em; font-weight: bold;}  
.header .aside a.lang {background:#fff; color: #333; margin-right: 1em;}
.header .aside .st-open {position: relative; width:1.4em; height: 1em;display: flex; flex-direction: column; justify-content: space-between; margin-left: 2em; cursor: pointer;}
.header .aside .st-open span{width:100%; height: 2px;background:#fff}
.header .aside .st-open span:nth-child(2){width:80%;margin-left: auto;}

@media (max-width:990px) {
    .header .inner{padding:1.5em ;}
}
@media (max-width:768px) {
    .header .aside .st-open {width:1.8em; height: 1.4em;}
}
    
/* ===> Scroll 및 Hover */
    .header.topFixed {background: #000;transition: background 0.5s}
    .header.topFixed .submenu{background: rgba(0,0,0,0.4)}


/* ================= Sitemap ================= */
.sitemap{display:none; position: fixed;top: 0;left: 0; background:#fff; width:100%; z-index: 100;}
.sitemap .st-close{position: absolute;width: 2em;height: 2em;top: 0.5em;right: 0.5em; cursor: pointer;}
.sitemap .st-close:before,.sitemap .st-close:after{content:'';width:80%;height: 2px;position: absolute;background: #333; left: 50%; top: 50%;}
.sitemap .st-close:before {transform: translateX(-50%) rotate(45deg);}
.sitemap .st-close:after{transform: translateX(-50%) rotate(-45deg);}

.sitemap .inner{width:100%; display: flex; justify-content: space-between; height: 100vh;}
.sitemap .leftbox{width:65%;  padding:5%; padding-right:0; display: flex;flex-direction: column;justify-content: center;}
.sitemap .rightbox{width:35%; height: 100%; background: url(/images/main/stBG.jpg) no-repeat center center / cover; }

.sitemap .st-tit{ padding-bottom: 2em; border-bottom: 1px solid #ccc; margin-bottom: 4em;}

.sitemap .st-menu > li{display: flex;}
.sitemap .st-menu > li + li{margin-top:1.5em}
.sitemap .st-menu > li > a{font-size:1.5em; width:7em; color: #333; font-weight: bold;cursor: auto; pointer-events: none; flex-shrink: 0;}

.sitemap .submenu{display: flex; align-items: center; gap:0.5em 1.5em; flex-wrap:wrap }
.sitemap .submenu > li{padding-bottom:4px}
.sitemap .submenu > li > a{color:#333; display: block;}
.sitemap .submenu > li:hover {border-bottom:1px solid #548dec}
.sitemap .submenu > li:hover > a{color: #548dec; font-weight: bold;}

@media (max-width:1240px) {
    .sitemap .inner{flex-direction: column;}
    .sitemap .leftbox{padding: 5%;margin:auto; width: auto;}
    .sitemap .st-tit {margin-bottom:2.5em}
    .sitemap .st-tit img{max-width:60%}
    .sitemap .rightbox{height: 15vh;width:100%}
}
@media (max-width:768px) {
    .sitemap .st-menu > li {flex-direction: column; gap:4px}
    .sitemap .submenu{flex-wrap:wrap}
}


/* ================= Footer ================= */
.footer{background: #212646; }
.footer .container{padding:5em 0;align-items: center;}
.footer .logo{max-width:35%}
.footer .txtbox{margin-left:5em}
/* ==> 메인에서만 Footer 설정 */
.main + .footer .container{border-top:1px solid #fff;}

@media (max-width:990px) {
    .footer .txtbox{margin-left:0; text-align: center;}
}


/* ============= TXT Effect ============= */
.rollingtxt{overflow: hidden;}
.rollingtxt span{position: relative;display: inline-block;vertical-align: top;transform: translate3d(0,0%,0);opacity:0;transition: 0.7s ease-in-out;transition-property: transform,opacity;}
.rollingtxt.aos-animate span{transform: translate3d(0,100%,0); opacity:1; }
.rollingtxt i + i{position: absolute;top: -100%;left: 0;}