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

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

******************************************************************/

#hd{width:100vw;transition: all 0.3s ease;position: absolute;left: 0;top: 0;background:#fff;z-index: 300;}
#hd_wrapper {position:fixed;left:2.2%;zoom:1}
#hd_wrapper .gnb-container{position:relative;height:80px;}
#mob-gnb,#menu-btn{display: none;}
.logo{z-index: 100;width:150px;height:40px;transition: all .3s;}
#logo > a {position: relative;width: 100%;height: 100%;display: block;}
#logo > a > img {position: absolute;top: 50%;left: 0;transform:translateY(-50%);width:100%;}
#hd_wrapper .hd_login{display:flex;gap:20px;position:absolute;top:50%;right:calc(66px + 1.5%);transform:translateY(-50%);text-transform: uppercase;transition: all .3s;}
#hd_wrapper .hd_login li {}
#hd_wrapper .hd_login li> a {position:relative;display:block;}
#hd_wrapper .hd_login li> a > img {width: 80%;}

/*1차메뉴*/
#gnb{position:absolute;left:200px;display:flex;align-items:center;place-content:center;width:900px;height: 100%;}
#gnb .gnb_wrap > ul{display: flex;height: 100%;place-content:center;}
.gnb_1da{padding: 0;}
#gnb .gnb_1dli{position:relative;flex:1;display: flex;place-content: center;align-items: center;text-align: center;}
.gnb_1dli.gnb_al_li_plus .gnb_1da{position:relative;padding:0;transition: all 0.3s ease-in-out;}
.gnb_1dli.gnb_al_li_plus .gnb_1da:before {content: "";display: none;position: absolute;top: -10px;left: 50%;transform: translateX(-50%);width: 5px;height: 5px;border-radius: 100%;background: var(--main-color);}
.gw-side-menu-container01 > [class*="gw-side-menu-depth"] > button{border-radius: 50px;}

/*2차메뉴*/
#gnb .gnb_wrap {margin:0 auto;position:relative;width: 100%;height: 100%;}
.gnb_2dul_box {padding:20px 0;position:absolute;top:90px;left:50%;transform: translateX(-50%);z-index:99;width:110%;text-align:center;visibility:hidden;opacity:0;transition:all 0.3s cubic-bezier(0.4, 0, 1, 1);}
.gnb_2dul_box:before{content:"";position:absolute; top:0px; left:0px; right:0px;height:0; border-radius: 20px;transition:all 0.3s cubic-bezier(0.4, 0, 1, 1);background: var(--main-color);}
.gnb_2dli{padding: 0 14px;}
a.gnb_2da{position:relative;z-index:10;display:block;padding:10px 0;color:#fff;line-height:1.3;opacity:0.7;font-size:14px;font-family:"NotoKr_M", sans-serif;transform:translateY(-20px);transition: all .3s;}
a.gnb_2da:after{content:"";display:block; width:0;height:2px;background:#fff;position:absolute;bottom:0;left: 50%;transform: translateX(-50%);transition: all .3s;}
a.gnb_2da:hover{opacity: 1;}
a.gnb_2da:hover:after{width: 100%;}

/*gnb_1dli 마우스를 올렸을 때*/
#gnb .hassub.on .gnb_1da{color:var(--main-color);}
#gnb .hassub.on .gnb_1da:before{display: block;}

/*2차 메뉴 활성화*/
.gnb_2dul.show .gnb_2dul_box{display:block;opacity: 1;visibility: visible;}
.gnb_2dul.show .gnb_2dul_box:before{height:100%;}
.gnb_2dul.show a.gnb_2da{transform: translateY(0);}


/* 햄버거메뉴 */
#menu-btn {display: block;width: 66px;height: 66px;border:2px solid var(--main-color);position: fixed;top: 7px;right: 2.2%;z-index: 1000;cursor: pointer;transition: all .3s;}
#menu-btn .menu-btn-container{display: block;margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 38px;height: 30px;}
#menu-btn span {display: block;width: 100%;height: 5px;background: var(--main-color);position: absolute;transition: all 0.3s ease-in-out;}
#menu-btn span:nth-child(1) {top: 0;}
#menu-btn span:nth-child(2) {top: 50%;transform: translateY(-50%);}
#menu-btn span:nth-child(3) {bottom: 0;}
#menu-btn.active{top:34px;background:#fff;border-color:#fff;z-index:99999;}
#menu-btn.active:before {content: "close";display: block;position: absolute;left: -170%;top: 50%;transform: translateY(-50%);color: #fff;font-size: 20px;letter-spacing: 8px;}
#menu-btn.active span{height:5px;background:var(--main-color);}
#menu-btn.active span:nth-child(1) {top: 50%;transform: translateY(-50%) rotate(45deg) scale(0.5);}
#menu-btn.active span:nth-child(2) {top: 50%;transform: translateY(-50%) rotate(-45deg) scale(0.5);}
#menu-btn.active span:nth-child(3) {opacity: 0;transform:  translateX(-50px);}

#mob-gnb {padding:60px;display:flex;flex-direction:column;place-content:center;visibility: hidden;opacity: 0;display:block;position: fixed;top: 0;right: -100%;max-width: 600px;width: 100%;height: 100vh;background: var(--main-color);transition: opacity 0.5s ease, visibility 0.5s ease;}
#mob-gnb .menu-list > ul {}
#mob-gnb .menu-list > ul > li {position:relative;opacity: 0;transition: opacity 0.5s ease;}
#mob-gnb .menu-list > ul > li:not(:last-child){margin-bottom: 30px;}
#mob-gnb .menu-list > ul > li > .dep01{position: relative;z-index: 10;display:block;width: 100%;height:45px;line-height:45px; color:#fff;font-size:45px;font-weight:600;transition: all .3s;}
.mob-hd-login{display: none;}

#gnb-bg {position: fixed;top: 0;left: 0;z-index:500;opacity: 0;visibility: hidden;width: 100%;height: 100%;background: rgba(0,0,0,0.5);transition: all .3s;}

#logo.on{display: none;}
#mob-gnb.on {visibility: visible;opacity: 1;right:0;z-index: 999;}
#mob-gnb.on .menu-list > ul > li {opacity: 1;transform: translateY(0);}
#mob-gnb.on .dep02 > li{opacity: 1;transform: translateY(0);}
#gnb-bg.on{opacity: 1;visibility: visible;}


/*다크모드*/
body.dark-mode #hd{background: #111;border-bottom:1px solid #222;}
body.dark-mode #menu-btn span{background: #fff;}
body.dark-mode #gnb{background: #111;}
body.dark-mode .gnb_1da{color:rgba(255, 255, 255, 0.6);}
body.dark-mode  #gnb .gnb_1dli:hover > a {color:rgba(255, 255, 255, 1);}
body.dark-mode .gnb_1dli.active .gnb_1da{color:rgba(255, 255, 255, 1);}
body.dark-mode #gnb_all .gnb_al_li li a:hover{color:#fff;}
body.dark-mode #hd_wrapper .hd_login li> a{color:#fff;border: 1px solid rgba(255, 255, 255, 0.6);}
body.dark-mode #hd_wrapper .hd_login li:first-child > a{background:#333;}
body.dark-mode  #gnb .hassub.on:after{color: #fff;}
body.dark-mode .gnb_2dul{background: #111;}