@charset "UTF-8";
/*****************************************************************

Copyright C 그누위즈 테마 All rights reserved.
gnuwiz@naver.com & master@gnuwiz.com
본 페이지는 유료콘텐츠 그누위즈 테마 CSS입니다. 불법복제시 법적인 제제를 받으실 수 있습니다.
라이센스를 삭제하지 마세요. 라이센스 삭제시 불법 사용으로 간주될 수 있습니다.

******************************************************************/
/*페이지 로딩*/
#loading-screen {position: fixed;width: 100%;height: 100%;background: #fff;display: flex;flex-direction: column;justify-content: center;align-items: center;z-index:99999;}
.spinner {border: 2px solid rgba(0, 0, 0, .1);border-top-color: var(--main-color);border-radius: 50%;width: 50px;height: 50px;animation: spin 0.5s linear infinite;}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#hd{width:100vw;transition: all 0.3s ease, transform 1s ease-in-out;position: absolute;left: 0;top: 0;border-bottom: 1px solid transparent;z-index: 9999;background: #fff;}
#hd_wrapper {position:relative;margin:0 auto;width: 100%;zoom:1;}
#hd_wrapper .gnb-container{height:100px;}
.logo{z-index: 100;width:300px;height:40px;transition: all .3s;}
#logo > a {position: relative;width: 100%;height: 100%;display: block;}
#logo > a > img {position: absolute;top: 50%;left: 40px;transform:translateY(-50%);max-height: 50px;}
.hd_login{position:absolute;top:50%;right: 14%;transform:translateY(-50%);text-transform: uppercase;font-size: 14px;transition: all .3s;}
.hd_login li {float:left;margin:0 5px;line-height:13px}
.hd_login li:first-child > a{color: #000;background: #fff;border: 1px solid #fff;transition: all .3s;}
.hd_login a{padding:4px 22px;border: 1px solid rgba(255,255,255,0.8);transition: all .3s;}
#gnb{position:relative;display:flex;align-items:center;place-content:center;height: 100%;transition: all .3s;background: #fff;}
#gnb_1dul{height:100px;display: flex;justify-content: center;align-items: center;}
.gnb_1da{padding: 0;transition: all .3s;}
#gnb .gnb_1dli{padding: 0;position:relative;height:100%;display:flex;align-items:center;place-content:center;text-align: center;width: 180px;transition: all .3s;}
#gnb .gnb_1dli:before {content: "";display: block;position: absolute;bottom: 0;width: 0;height: 2px;background: var(--main-color);transition: all .3s;transform-origin: center;}
.gnb_1dli.gnb_al_li_plus .gnb_1da{padding:0;transition: all .3s;}
#gnb .gnb_1dli:hover > a {color:var(--main-color) !important;}

/* 헤더 화면 로딩 완료 후 움직임 */
#hd.load{transform: translateY(0) !important;}

/* 헤더 배경 흰색 */
#hd.on{background: #fff;}
#hd.on .gnb_1da{color:#000 !important;}
#hd.on .hd_login li:first-child > a{color: #fff;background: #000;border: 1px solid #000;}
#hd.on .hd_login a{color: #222;border: 1px solid #ddd;}
#hd.on #logo .dark-mode-logo{opacity: 0 !important;}
#hd.on #logo .light-mode-logo{opacity: 1 !important;}

/*네비게이션메뉴*/
#gnb .gnb_wrap {position:relative;transition: all .3s;}
#gnb_2dul{display:flex;position: absolute;top: 100px;left: 50%;transform: translateX(-50%);}
#gnb_2dul:before {content: "";display: block;position: absolute;top: 0;left: -100%;width: 200vw;height: 0;border-top:1px solid rgba(0,0,0,0.05);background: #fff;opacity: 0;visibility: hidden;transition: all .3s;}
#gnb_2dul .gnb-depth02 {text-align: center;width:210px;z-index: 200;border-right: 1px solid rgba(0,0,0,0.05);height:0;opacity: 0;visibility: hidden;transition: all .3s;}
#gnb .gnb_1dli{position: relative;}
#gnb_2dul .gnb-depth02:first-child{border-left: 1px solid rgba(0,0,0,0.05);}
#gnb_2dul .gnb-depth02 > ul {padding: 40px 0;}
#gnb_2dul .gnb-depth02 > ul > li {position: relative;}
#gnb_2dul .gnb-depth02 > ul > li > a {padding:9px 15px;display: block;font-size: 14px;color: #666;font-family: "NotoKr_M", sans-serif;}
#gnb_2dul .gnb-depth02 > ul > li > a > span {position:relative;display: inline-block;}
#gnb_2dul .gnb-depth02 > ul > li > a > span:before {content: "";display: block;width: 0;height: 2px;position: absolute;bottom: -5px;left: 0;background: #ddd;transition: all .3s;}
#gnb_2dul .gnb-depth02 > ul > li > a > span:hover:before{width:100%;}

/* 1차 메뉴에 마우스 올렸을 때*/
#gnb.on .gnb_1dli{width: 210px;}
#gnb.on #gnb_2dul:before{height: 100%; opacity: 1; visibility: visible;}
#gnb.on #gnb_2dul .gnb-depth02 {height: auto; opacity: 1; visibility: visible;}
#gnb .gnb_1dli.on:before{width: 100%;}
#gnb #gnb_2dul .gnb-depth02.on{background: #f8f8f8;}

#lang {display: block;width: 100px;height: 100px;position: absolute;top: 0;right: 100px;z-index: 1000;cursor: pointer;transition: all .3s;background: #263c67;}
#lang div {color:#fff; font-weight:bold; font-size:16px;}
#lang div img {
    display:inline-block; margin-right:7px;
}
#menu-btn {display: block;width: 100px;height: 100px;position: absolute;top: 0;right: 0;z-index: 1000;cursor: pointer;transition: all .3s;background: var(--main-color);}
#menu-btn > div {height: 16px;width: 25px;}
#menu-btn span {display: block;width: 25px;height: 2px;background: #fff;position: absolute;transition: all 0.3s;}
#menu-btn span:nth-child(1) {top: 0;}
#menu-btn span:nth-child(2) {top: 6px;}
#menu-btn span:nth-child(3) {top: 12px;}
#menu-btn.active span:nth-child(2) {opacity: 0;}
#menu-btn.active span:nth-child(1) {top: 10px;transform: rotate(45deg);}
#menu-btn.active span:nth-child(3) {top: 10px;transform: rotate(-45deg);}

#mob-gnb{opacity:0;visibility:hidden;position:fixed;top:0;right:0;z-index:100;max-width:100vw;width:100%;height:100vh;background:#fff;transition:all 0.5s;}
#mob-gnb .menu-bg-container{position:absolute;top:0;left:0;width:100%;height:100%;}
#mob-gnb .menu-bg{display: flex;height:100%;}
#mob-gnb .menu-bg > li{position: relative;flex:1;height:100%;}
#mob-gnb .menu-bg > li:before {content: "";display: block;position: absolute;right: 0;top: 0;width: 1px;height: 100%;background: #ddd;}
#mob-gnb .menu-bg > li:after {content: "";display: block;position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: var(--main-color);transition:width 0.4s ease-in-out;}
#mob-gnb .menu-list{position:absolute;top:50%;transform:translateY(-50%);width: 100%;}
#mob-gnb .menu-list > ul{display: flex;}
#mob-gnb .menu-list > ul > li{flex:1;position: relative;}
#mob-gnb .menu-list > ul > li > .dep01{padding:20px 15%;position: relative;display:block;width: 100%;font-family: 'NEXON Lv1 Gothic OTF', sans-serif;font-weight: 700; font-size: 18px;transition:all 0.4s;}
#mob-gnb .dep02 > li{width: 100%;}
#mob-gnb .dep02 > li a{padding:10px 15%;position: relative;display: block;width: 100%;color:#666;font-family:'NotoKr_M' , sans-serif;transition: all 0.4s ease-in-out;}
#mob-gnb .dep02 > li a > span{position: relative;z-index: 1;}
#mob-gnb .dep02 > li a:before {content: "";display: block;position: absolute;left: 0;top: 0;width: 0;height: 100%;background: var(--main-color);transition: all 0.4s ease-in-out;}
#mob-gnb .dep02 > li a:hover {color: #fff;}
#mob-gnb .dep02 > li a:hover:before{width: 100%;}
#mob-gnb .menu-list > ul > li > .dep01:hover{color:var(--main-color);}
#mob-gnb.on{opacity:1;visibility:visible;z-index:999;}
#mob-gnb.on .menu-bg > li:after{width: 0;}


/* 메뉴 검정색 */
#hd.black #logo .dark-mode-logo{opacity: 0 !important;}
#hd.black #logo .light-mode-logo{opacity: 1 !important;}
#hd.black .gnb_1da{color: #000 !important;}
#hd.black .hd_login li:first-child > a{color: #fff;background: #000;border: 1px solid #000;}
#hd.black .hd_login a{color: #222;border: 1px solid #ddd;background: #fff;}

/* 스크롤에 따른 메뉴 나타남, 사라짐 */
#hd.off{transform: translateY(-100%) !important;}

/*다크모드*/
body.dark-mode #hd{background: #000;border-bottom:1px solid #222;}
body.dark-mode #gnb{background: #000;}
body.dark-mode  #gnb .gnb_1dli:hover > a {color:rgba(255, 255, 255, 1);}
body.dark-mode #gnb_2dul:before{border-top: rgba(255, 255, 255, 1);background: #000;}
body.dark-mode .hd_login li:last-child a{color:rgba(255, 255, 255, 0.6);}
body.dark-mode #gnb #gnb_2dul .gnb-depth02.on{background: #111;}
body.dark-mode #hd.on #logo .dark-mode-logo{opacity: 1 !important;}
body.dark-mode #hd.on #logo .light-mode-logo{opacity: 0 !important;}
body.dark-mode #hd.on .gnb_1da{color:rgba(255, 255, 255, 0.6) !important;}
body.dark-mode #hd.on .hd_login li:first-child > a{color: #000;background: #fff;border: 1px solid #fff;}
body.dark-mode #hd.on .hd_login a{color:#fff;border: 1px solid #ddd;}


@media all and (max-width:1440px) {
    #logo > a > img {
        max-height:40px;
    }
}