@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); }
}

/*배경움직임*/
@keyframes bgmove01 {
    0% {transform:translateX(-101%);}
    50% {transform:translateX(0);}
    100% {transform:translateX(101%);}
}

@keyframes bgmove02 {
    0% {opacity:0;}
    50% {opacity:0;}
    51% {opacity:1;}
    100% {opacity:1;}
}


#hd{width:100vw;transition: all 0.3s ease;position:absolute;left: 0;top: 0;z-index: 300;}
#hd:before{content: "";display:block;position: absolute;bottom:0;left:0;width: 100%;height: 1px;background:rgba(255,255,255,0.2);}
#hd_wrapper {position:relative;margin:0 auto;width: calc(100vw - 100px);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: 0;transform:translateY(-50%);}
.hd_login{position:absolute;top:50%;right:100px;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 {border-left:0}
.hd_login li> a {display: block;padding: 10px 20px;border-radius: 30px;}
.hd_login li:first-child > a{color: #fff;border: 1px solid rgba(255,255,255,0.2);}
.hd_login li:last-child > a {background: rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.2);}
.hd_login a{color: #fff;}

/*1차메뉴*/
#gnb{position:relative;display:flex;align-items:center;place-content:center;height: 100%;}
#gnb .gnb_wrap > ul{position:relative;display: flex;height: 100%;z-index: 200;}
.gnb_1da{padding: 0 !important;color: #fff !important;font-family: "Noto Sans KR", sans-serif; font-weight: 800;}
#gnb .gnb_1dli{position:relative;padding:0 50px;display: flex;place-content: center;align-items: center;flex: 1;text-align: center;word-break:keep-all;cursor:pointer;}
#gnb .gnb_1dli:before {content: "";display: block;width: 100%;height: 0;background: var(--main-color);z-index: -1;transition: all 0.3s linear;position: absolute;top: 0;left: 0;right: 0;}
.gnb_1dli.gnb_al_li_plus .gnb_1da{position:relative;z-index:100;padding:0;transition: all .3s;}
.gnb_1dli.active .gnb_1da{color:var(--main-color);}
#gnb .gnb_1dli:hover > a {color:#fff !important;}
.gw-side-menu-container01 > [class*="gw-side-menu-depth"] > button{border-radius: 50px;}

/*1차 메뉴 활성화*/
#gnb  .gnb_1dli.on:before {height: 100%;}


/*2차메뉴*/
#gnb .gnb_wrap {position:relative;height: 100%;}
.gnb_2dul {position:absolute;top:0;width:100%;font-size:14px;opacity: 0;visibility: hidden;}
.gnb_2dul:before {content: "";display: block;width: 100%;height: 0;background: var(--main-color);z-index: -1;transition: all 0.3s linear;position: absolute;top: 0;left: 0;right: 0;}
.gnb_2dul .gnb_2dul_box {padding:14px 0;}
.gnb_2dli{overflow:hidden;color:rgba(255,255,255,0.5);}
.gnb_2da {display:block;transform:translateY(100%);opacity:0;line-height:40px;color:rgba(255,255,255,0.6) !important;font-family:"Noto Sans KR", sans-serif; font-weight: 500;transition: all 0.3s 0.3s;}
.gnb_2da:hover {color:rgba(255,255,255,1) !important;}

/*2차 메뉴 활성화*/
.gnb_2dul.show{display:block;padding: 100px 0 10px;opacity: 1;visibility: visible;  height: auto;z-index:2;}
.gnb_2dul.show:before {height: 100%;}
.gnb_2dul.show .gnb_2da{opacity: 1;transform: translateY(0);}

/* 모바일 */
#menu-btn {display: block;width: 80px;height: 16px;position: absolute;top: 50%;right: 0;transform:translateY(-50%);z-index: 1000;cursor: pointer;transition: all .3s;}
#menu-btn span {display: block;width: 100%;height: 2px;background: #fff;position: absolute;transition: all 0.3s ease-in-out;}
#menu-btn span:nth-child(1) {top: 10%;}
#menu-btn span:nth-child(2) {top: 50%;}
#menu-btn span:nth-child(3) {top: 90%;}
#menu-btn.active{right:-43px;z-index:99999;}
#menu-btn.active span{height:5px;background:#fff !important;}
#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{/*display: none;*/position:fixed;top:0;left:-100%;z-index:100;max-width:100vw;width:100%;height:100vh;background:var(--main-color);}
#mob-gnb .menu-bg{position: relative;overflow: hidden;opacity:0;width: 30%;height:100vh;background: url(../img/gw-theme05-mene-bg.jpg) center no-repeat;background-size: cover;transition: all 0.5s ease-in-out;}
#mob-gnb .menu-bg:after {content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: var(--main-color);display: block;transform: translateX(-101%);}
#mob-gnb.on .menu-bg{animation: bgmove02 both 1s 0.2s;}
#mob-gnb.on .menu-bg:after {animation: bgmove01 both 1s 0.2s;}
#mob-gnb .menu-list{padding:0 100px;width: 70%;height: 100%;}
#mob-gnb .menu-list > ul > li {position:relative;padding:30px 0;display: flex;border-bottom: 1px solid rgba(255,255,255,0.1);transform:translateY(100%);opacity: 0;transition: all 0.8s ease-in-out;}
#mob-gnb .menu-list > ul > li:before {content: "";display: block;position: absolute;left: 0;bottom: 0;width: 0;height: 1px;background: #fff;transition: all 0.5s ease-in-out;}
#mob-gnb .menu-list > ul > li:hover:before{width: 100%;}
#mob-gnb .menu-list > ul > li > a{width: 200px;color: #fff;font-size: var(--main-title02);font-family:"Noto Sans KR", sans-serif; font-weight: 800;}
#mob-gnb .dep02 {display: flex;flex-wrap: wrap;gap:20px;width: calc(100% - 200px);}
#mob-gnb .dep02 > li > a {font-size: 20px;color: rgba(255,255,255,0.6) !important;transition: all 0.3s;}
#mob-gnb .dep02 > li > a:hover{color:rgba(255,255,255,1) !important;}

/* 메뉴 검정색 */
#hd.black:before{background: #ddd;}
#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 #menu-btn span{background: #000;}
#hd.black .hd_login a{color:#222;}
.hd_login li:first-child > a{border:1px solid #ddd;}
#hd.black .hd_login li:last-child > a{background:#f2f2f2;border:1px solid #f2f2f2;}

/* 메뉴 활성화 */
html.on,body.on{overflow: hidden;}
#hd.on{border-bottom:1px solid #e8e8e8;}
#hd.on{border-bottom:1px solid #e8e8e8;}
#logo.on{display: none;}
#mob-gnb.on{left:0;display:block;z-index:9999;}
#mob-gnb.on .menu-list > ul > li{transform:translateY(0);opacity: 1;}
#mob-gnb .dep02.on > li{height: auto;}

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