/* =============> Header <============= */
.header {position: fixed;width: 100%;left: 0;top: 0;z-index: 99; transition: .5s; /* border-bottom:1px solid rgba(255,255,255,0.3) */}
.header a {color:#fff}

.header .inner{max-width:1800px;margin: auto;padding:0 2rem}
.header .logo {max-width:20em}
.header .logo .LogoImg {filter: brightness(10);}
.header.active .logo .LogoImg {filter: none;}
.header.st_fixed .logo .LogoImg {filter: none;}
.header.board .logo .LogoImg {filter: none;}

.header .nav {width: 76%; justify-content: space-between; padding: 0 2rem;}
.header .nav>li {position: relative;}
.header .nav>li>a {display: block; padding:1.3rem .5rem}
.header .submenu {display: none;position: absolute;background: #fff;left:50%;bottom:0;transform: translate(-50%,100%);padding:1em 0;text-align: center; min-width:10em; border-top: 3px solid #333;}
.header .submenu li a{white-space: nowrap; padding:0.5em;display: block;}


.header .nav > li:hover li a {color:#333;}
.header .nav > li:hover li:hover a {color:#fff;}

.header .submenu li:hover {background-color: #333;}
.header .submenu li:hover a {color:#fff;}

.header .aside a+a{margin-left:2em;position: relative;}
.header .aside a+a:before {position: absolute; left: -1em; content: ''; height: 1em; width: 1px; background: #fff; display: block; top: 0.2em;}
.header.active .aside a+a:before {background-color: #333;}


/* ====> scroll & active */
.header.active {background: #fff !important; /* box-shadow: 0 0 0.5em rgba(0,0,0,0.1); */}
.header.board  {background: #fff !important; /* box-shadow: 0 0 0.5em rgba(0,0,0,0.1); */}
.header.active a {color:#333;}
.header.board  a {color:#333;}
.header.st_fixed{ background: #fff !important;border-bottom:1px solid #c1c1c1;}
.header.active .menuBtn, .header.st_fixed .menuBtn, .header.board .menuBtn  {filter: brightness(0);}

@media (max-width:1240px) {
    .header .inner{padding:1.5rem 5%}
    .header .m-menu{width:3em}
}


/* =============> Sitemap <============= */
.sitemap {position: fixed;width: 100%; left:0 ;top: 0;height: 100vh;z-index: 98; background: #fff;padding-top:6rem; transform: translateY(-100%); transition: all 0.5s; overflow: hidden;padding-bottom:4em}
.sitemap a {display: block; padding:1rem}
.sitemap.on {transform: translateY(0)}



.sitemap .st_menu {padding: 2rem;}
.sitemap .st_menu > li > a { color: #000; font-size:1.5em}
.sitemap .submenu {background: #fff; display: flex; flex-wrap:wrap; padding: 1rem 2rem;}
.sitemap .submenu > li { width:50%}
.sitemap .submenu a {color: #333; font-size: 1.2em;}

.sitemap .st_menu > li > a {position: relative;}
.sitemap .st_menu > li > a:after {content:''; width: 20px; height: 1px; background-color: #c1c1c1; position: absolute; right:1rem; top:0; bottom:0; margin: auto; transition: .3s;}
.sitemap .st_menu > li > a:before {content:''; width: 1px; height: 20px; background-color: #c1c1c1; position: absolute; right:2rem; top:0; bottom:0; margin: auto; transition: .3s;}
.sitemap .st_menu > li > a.active:after {background-color: #c1c1c1; transform: rotate(0deg);}
.sitemap .st_menu > li > a.active:before {background-color: #c1c1c1; transform: rotate(90deg);}


.sitemap .st_login {position: relative; bottom: 0; width: 100%;display: flex; padding: 2rem 1rem;}
.sitemap .st_login a {color: #333;display: block;position: relative; font-size: 1.5em; padding: 0 2.5rem;}
.sitemap .st_login a:first-child:after {content:''; height: 70%; width: 1px; background-color: #c4c4c4; position: absolute; right: 0; top:0; bottom:0; margin: auto;}
.sitemap .st_login a+a:before {position: absolute;left: 0;content: '';height: 1em;width: 1px;background: #fff;display: block;top: 50%; transform: translateY(-50%);}


/* 퀵메뉴 */
.quick_box_main .q_link {position: fixed;right: 3rem;bottom:120px; width: 67px; height: 67px; display:flex;justify-content: center;align-items: center;z-index: 9990;background-color: #646464; border-radius: 50%; box-shadow: 0 0 10px rgb(142 142 142 / 20%);}
.quick_box_main .q_link img {align-self: center;}
.quick_box_main .q_link.click_btn {bottom:120px;background-color: #fff; box-shadow: 0 0 10px rgb(142 142 142 / 20%); z-index: 9991; display: none;}
.quick_box_main .q_link.top {font-size: 14px; letter-spacing: 0;}

.quick_box_main .q_link.click_btn img{transform: rotate(0);transition: all .8s var(--ani); width: 1.9375rem;}
.quick_box_main .q_link.click_btn.active img{transform: rotate(45deg); display: block;}
.quick_box_main .quick {position: fixed;z-index: 9993;bottom: 200px;right: 3rem;}
.quick_box_main .quick li{margin-top:10px;}
.quick_box_main .quick li a{display: flex; border-radius: 50px; width: 67px; height: 67px; box-shadow: 0 0 10px rgb(142 142 142 / 20%); background-color: #fff;justify-content: center;align-items: center;}


.quick_box_main .quick li:nth-child(1){transition-delay: .2s;}
.quick_box_main .quick li:nth-child(2){transition-delay: .4s;}
.quick_box_main .quick li:nth-child(3){transition-delay: .6s;}
.quick_box_main .quick li:nth-child(4){transition-delay: .8s;}
.quick_box_main .quick li:nth-child(5){transition-delay: 1s;}

@media (max-width: 768px) { 
    .quick_box_main .quick li {transform: translateX(160px);opacity: 0;transition: all .8s var(--ani);}
    .quick_box_main .quick.active li{transform: translateX(0);opacity: 1;}
    .quick_box_main .q_link {bottom:40px;}
    .quick_box_main .q_link.click_btn {display: flex;}

    .quick_box_main .q_link, .quick_box_main .quick {right:2rem}
}