@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;background:#fff;border-bottom: 1px solid transparent;z-index: 9999;}
#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: 10000;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:3%;transform:translateY(-50%);z-index:10000;display: flex;gap: 10px;text-transform: uppercase;font-size: 14px;transition: all .3s;}
.hd_login li {padding:0 12px;height: 35px; border-radius: 50px; display: flex; background: #F2F2F2;}
.hd_login li> a {display: flex; align-items: center;justify-content: center;gap:5px;font-size: 14px;font-weight:600;width: 100%; height: 100%;}

/*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{display:flex;align-items:center;place-content:center;height:100%;color: #000;transition: all .3s;}
#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:flex; flex-wrap:wrap; width:31px; height:31px; position: absolute;top: 50%;right: 0;transform:translateY(-50%);z-index: 1000;cursor: pointer;box-sizing:border-box;transition: all .3s;}
#menu-btn .dots{display:block; width:8px; height:8px; background:#000; margin: 3.5px; transition:all 0.4s ease-in-out, opacity 0.2s 0.4s; border-radius:8px;}
#menu-btn .dots.dots4{background:var(--main-color);}
#menu-btn.active{z-index:100000;}
#menu-btn.active .dots{background:#fff;}
#menu-btn.active .dots:nth-child(2),
#menu-btn.active .dots:nth-child(4){opacity: 0; transition:all 0.4s ease-in-out, opacity 0s 0s}
#menu-btn.active .dots:nth-child(1){transform: translateY(13px) rotate(45deg); width:30px; height:4px;}
#menu-btn.active .dots:nth-child(3){transform: translateY(-13px) rotate(-45deg); width:30px; height:4px;}

/* 모바일 메뉴 */
#mob-gnb {visibility: hidden;opacity: 0;display:block;position: fixed;top: 0;left: 0;z-index: 1;max-width: 100vw;width: 100%;height: 0;background: rgba(0, 0, 0, 0.5);backdrop-filter:blur(30px) brightness(0.95);transition: opacity 0.5s ease, visibility 0.5s ease;}
#mob-gnb .menu-list{margin:0 auto;width: var(--gw-con-width);height: 0;display:flex;align-items:center;place-content:center;}
#mob-gnb .menu-list > ul {display: flex;width:100%;}
#mob-gnb .menu-list > ul > li {padding:0 3rem;position:relative;flex: 1;opacity: 0;transform: translateY(-50px);border-right:1px solid rgba(255,255,255,0.08);transition: opacity 0.5s ease, transform 0.5s ease;}
#mob-gnb .menu-list > ul > li:last-child{border-right: none;}
#mob-gnb .menu-list > ul > li:before{content:""; position: absolute; top: -2rem; left: 3rem; width: 0.8rem; height: 0.8rem; background: var(--main-color); border-radius: 100%; opacity: 0; transform: translateY(-30px); transition:all 0.4s ease-in-out;}
#mob-gnb .menu-list > ul > li > .dep01{margin-bottom:20px;position: relative;z-index: 10;display:block;width: 100%;font-size: var(--main-title04);font-weight:600;color:#fff;transition: all 0.4s ease-in-out;}
#mob-gnb .menu-list > ul > li > .dep01 .hassub{display: inline-block;}
#mob-gnb .dep02 {flex-direction: column;}
#mob-gnb .dep02 > li{position:relative;z-index:10;width: 100%;opacity: 0;transform: translateY(50px);transition: opacity 0.5s ease, transform 0.5s ease;}
#mob-gnb .dep02 > li a{padding:5px 0;display: block;width: 100%;color:rgba(255,255,255,0.5);transition:all 0.4s ease-in-out;}
#mob-gnb .dep02 > li a span{display:inline-block;position:relative;}
.mob-hd-login{display: none;}

@media (hover: hover) and (min-width:1441px)  {
    #mob-gnb .menu-list > ul > li:hover:before{opacity: 1;transform: translateY(0);}
    #mob-gnb .dep02:hover a{opacity:0.4}
    #mob-gnb .dep02:hover a:hover{opacity:1.0; color: #fff;}
}


html.on,body.on{overflow: hidden;}
#gnb.on{display: none;}
.hd_login.on li{background: rgba(255, 255, 255, 0.25);backdrop-filter:blur(10px);}
.hd_login.on li> a{color: #fff;}
#mob-gnb.on {visibility: visible;opacity: 1;z-index: 999;height:100vh;}
#mob-gnb.on .menu-list{height: 100%;}
#mob-gnb.on .menu-list > ul > li {opacity: 1;transform: translateY(0);}
#mob-gnb.on .dep02 > li{opacity: 1;transform: translateY(0);}