@charset "UTF-8";

/*페이지 로딩*/
#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%);width:190px}
.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: 600; font-size: 24px;}
#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 0.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.1s 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%);font-size:18px;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.1s;}
.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: 35px;height: 22px;position: absolute;top: 50%;right: 0;transform:translateY(-50%);z-index: 1000;cursor: pointer;transition: all 0.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: 0%;}
#menu-btn span:nth-child(2) {top: 50%;}
#menu-btn span:nth-child(3) {top: 100%;}
#menu-btn.active{/* right: -43px; */ z-index: 99999; width: 80px; height: 80px;}
#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/menu-bg.jpg) center no-repeat;background-size: cover;transition: all 0.1s 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: 600;}
#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;}

#mob-gnb .btns:before {content: ""; position: absolute; left: 0; top: -55px; height: 30px; bottom: 0; width: 160px; background: url('/data/theme/gnuwiz/light_logo_img.png') no-repeat left center/contain;}
#mob-gnb .btns {position: relative; left: 0; top: 15px; right: 0; display: block; align-items: center; margin: 20px 0 30px  0;}
#mob-gnb .btns a { padding:3px 10px; margin:0 2.5px; font-size:.75rem; }
#mob-gnb .btns a {display: inline-block; padding: 7px 12px; border: 1px solid rgba(255,255,255,.6); color: #fff; margin: 0 5px; font-size: .875rem; transition-duration: 400ms;}
#mob-gnb .btns a:hover { background:#fff; color:#000; }

/* 메뉴 검정색 */
#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;}

#langs  {position: absolute; margin-right: 20px; padding:0; right: 30px; top: 38px;}
#langs .lang-btn {background: url('/theme/basic/img/top-icon-language.png') no-repeat center/contain; display: block; width: 27px; height: 27px; filter: invert(92%) sepia(79%) saturate(2%) hue-rotate(128deg) brightness(106%) contrast(101%); cursor: pointer;}

#langs .sub { position:absolute; top:140%; left:50%; transform:translateX(-50%); padding:0 25px; background:#fff; border-radius:10px; border:1px solid transparent; opacity:0; visibility:hidden; max-height:0; transition-duration:300ms; }
#langs:hover .sub,
#langs .sub:hover { max-height:300px; padding:7px 5px; border-color:#ddd; opacity:1; visibility:visible; transition-duration:600ms; }

#langs .sub:before { content:""; position:absolute; bottom:calc(100% - 10px); left:50%; transform:translateX(-50%) rotate(45deg); width:20px; height:20px; border-radius:5px 0 0 0; background:#fff; border-left:1px solid #ddd; border-top:1px solid #ddd; }
#langs .sub a {display: block; padding: 2.5px 0; text-align: center; opacity: 0; font-size: .875rem; font-weight: 600; transition-duration: 400ms; width: 100px;font-family:'Montserrat'}
#langs:hover .sub a { opacity:1; }
#langs .sub a img {width:18px}





/* 메뉴 활성화 */
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%);}