@charset "UTF_8";

#header { position: relative; left: 0; right: 0; width: 100%; z-index: 9998; background: #fff; font-family: var(--mainfont); }
#header .gnb { display: flex; justify-content: center; gap: 2rem; }
#header .gnb > li { position: relative; min-width: 7.5rem; text-align: center; cursor: pointer; }
#header .gnb > li > span { display: inline-block; color: var(--textcolor); font-weight: 500; padding: 2rem 0; }
#header .lnb { display: block; position: absolute; left: 50%; top: 5.5rem; transform: translateX(-50%); width: 12.5rem; background: #fff; text-align: left; padding: .75rem; border-top: 3px solid var(--pointcolor); opacity: 0; visibility: hidden; transition: .5s; }
#header .lnb.on { opacity: 1; visibility: visible; }
#header .lnb > li > a { position: relative; display: block; color: var(--textcolor); padding: .75rem .5rem; font-weight: 400; transition: .5s; }
#header .lnb > li > a::after { position: absolute; content: ''; height: 1px; width: 0; background: var(--pointcolor); bottom: .5rem; left: 50%; transform: translateX(-50%); transform-origin: center; transition: .5s; }
#header .lnb > li:hover > a { color: var(--pointcolor); }
#header .lnb > li:hover > a::after { width: 100%; }
#header .lnb > li.hasChild { position: relative; }
#header .lnb > li.hasChild > ul { position: absolute; width: 100%; border-top: 3px solid var(--pointcolor); right: calc( ( 100% * -1) - 1.25rem ); top: -.75rem; background: #fff; padding: .75rem; opacity: 0; visibility: hidden; transition: .5s; }
#header .lnb > li.hasChild > ul.on { opacity: 1; visibility: visible; }
#header .lnb > li.hasChild > ul li.depth03 > a { display: block; padding: .5rem; color: var(--textcolor); }
#header .lnb > li.hasChild > ul li.depth03:hover > a { color: var(--pointcolor); }

#header .sidenav > * { margin-left: 3rem; }
#header .sidenav a { color: var(--textcolor); }
#header .sidenav a i.fa { font-size: 1.25rem; transition: .25s; }
#header .sidenav a:hover i.fa { color: var(--pointcolor); }
@media(max-width: 1410px){
    #header .gnb { gap: 1.5rem; }
    #header .gnb > li { min-width: 5rem; }
    #header .lnb { width: 10rem; }
    #header .lnb > li > a, #header .lnb > li.hasChild > ul li.depth03 > a { padding: .5rem .25rem; }
}
@media(max-width: 990px){
    #header .container_mini { padding: 1.5rem 0; }
    #header .logo { max-width: 50%; }
    #header .logo a { display: block; }
    #header .gnb, #header .logCtrl { display: none; }
    #header .sidenav a i.fa { font-size: 2.5rem; }
}

.fullMenu { display: none; }
@media(max-width: 990px){
    .fullMenu { display: block; position: fixed; top: 0; left: -100%; width: 100%; min-height: 100vh; transition: .5s; z-index: 12000; }
    .fullMenu.on { left: 0; }
    .fullMenu .cover { position: absolute; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; background-color: rgba(0,0,0,.75); z-index: 12001; transition: .5s; }
    .fullMenu .inner { position: relative; max-width: 90%; height: 100%; background-color: #fff; z-index: 12001; }
    .fullMenu .tit { padding: 1.5rem 5%; border-bottom: 1px solid #dadada; }
    .fullMenu .tit .logo { max-width: 50%; }
    .fullMenu .tit .logo a { display: block; }
    .fullMenu .logCtrl { padding: 0 5%; border-bottom: 1px dotted #dadada; }
    .fullMenu .logCtrl a { display: block; width: 50%; cursor: pointer; padding: 1.25rem 0; text-align: center; }
    .fullMenu .fnb { overflow-y: auto; }
    .fullMenu .fnb::-webkit-scrollbar { width: 3px; }
    .fullMenu .fnb > li > span.depth01 { display: block; padding: 1.5rem 5%; font-weight: 500; border-bottom: 1px solid #f1f1f1; }
    .fullMenu .lnb { display: none; background-color: #f1f1f1; padding: .5rem 0; }
    .fullMenu .lnb > li > a { display: block; font-size: 1.5rem; font-weight: 500; padding: .5rem 5%;  }
    .fullMenu .lnb > li.hasChild > ul { display: flex; flex-wrap: wrap; padding: 0 7.5%; }
    .fullMenu .lnb > li.hasChild > ul li.depth03 { width: 50%; padding-top: .25rem; }
    .fullMenu .lnb > li.hasChild > ul li.depth03 a { display: block; font-size: 1.25rem; padding: .5rem 0; }
}

.siteMap { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; min-height: 100vh; z-index: 12000; }
.siteMap .cover { position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.75); z-index: 12001; }
.siteMap .popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); min-width: var(--layoutwidthMini); max-width: 90%; min-height: 150px; max-height: 90vh; overflow-y: auto; background-color: #fff; border-radius: 1rem; overflow: hidden; z-index: 12001; }
.siteMap .popup .tit { padding: 2rem 3rem; background-image: linear-gradient(to right, #122a88 0%, #0d6fb8 25%, #28a7e1 50%, #f8b500 75%, #fff100 100%); color: #fff; }
.siteMap .popup .tit h4 { text-shadow: .125rem .125rem .5rem rgba(0,0,0,.25); }
.siteMap .popup .tit i.fa { color: #fff; font-size: 3rem; text-shadow: .125rem .125rem .5rem rgba(0,0,0,.25); }
.siteMap .popup .cont { padding: 1.5rem 3rem; }
.siteMap .popup .cont > li { width: calc( ( 100% / 5 ) - 1.25rem ); }
.siteMap .popup .cont > li span.depth01 { display: block; font-size: 1.5rem; font-weight: 700; color: var(--subcolor); padding: .5rem 0; border-bottom: 2px solid var(--subcolor); text-align: center; }
.siteMap .popup .cont > li .lnb li.depth02 { font-size: 1.15rem; font-weight: 500; padding: .5rem .25rem; }
.siteMap .popup .cont > li .lnb li.depth02:not(:last-child) { border-bottom: 2px dashed #dadada; }
.siteMap .popup .cont > li .lnb li.depth02.hasChild ul li.depth03 { position: relative; font-size: 1rem; font-weight: 400; padding: .125rem 0 .125rem .5rem; }
.siteMap .popup .cont > li .lnb li.depth02.hasChild ul li.depth03::before { position: absolute; content: ''; width: 3px; height: auto; aspect-ratio: 1/1; background-color: var(--pointcolor); border-radius: 50%; left: 0; top: 50%; transform: translateY(-50%); }
@media(max-width: 990px){
    .siteMap, .siteMap .cover, .siteMap .popup { display: none !important; }
}