@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: fixed;left: 0;top: 0;background:transparent;z-index: 9999;}
#hd_wrapper {position:relative;zoom:1}
#hd_wrapper .gnb-container{height:100px;}
.logo{z-index: 100;width:250px;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%;height: auto;}
#logo .light-mode-logo{opacity: 0;}

/*sns*/
#hd .gw-sns-container{position:absolute;top:50%;right:100px;transform:translateY(-50%);text-transform: uppercase;font-size: 14px;transition: all .3s;}
#hd .gw-sns-container > li > a{display:block;color:#fff;transition: all .3s;}


/*1차메뉴*/
#gnb{padding-left:1rem;position:relative;display:flex;align-items:center;height: 100%;background: transparent;}
#gnb .gnb_wrap > ul{display: flex;height: 100%;}
.gnb_1da{padding: 0;}
#gnb .gnb_1dli{display: flex;place-content: center;align-items: center;text-align: center;}
.gnb_1dli .gnb_1da{padding:0 20px;font-size:var(--main-text01);color:rgba(255, 255, 255, 0.6);transition: all .3s;}
.gnb_1dli .gnb_1da span{position: relative;}
.gnb_1dli .gnb_1da span:before{display: block; width: 100%; height: 2px; content: ''; position: absolute; bottom: -1px; left: 0; background-color: #fff; transform-origin: 100% 50%; transition: transform .6s cubic-bezier(0.3, 0, 0.1, 1); transition-delay: 0s; z-index: 3; transform: scale(0, 1);}
.gnb_1dli:hover .gnb_1da {color: rgba(255,255,255,1);}
.gnb_1dli:hover .gnb_1da span:before{transform: scale(1, 1); transition-delay: 0s; transform-origin: 0% 50%; }
.gw-side-menu-container01 > [class*="gw-side-menu-depth"] > button{border-radius: 50px;}


/*2차메뉴*/
#gnb .gnb_wrap {position:relative;height: 100%;}
.gnb_2dul {position:absolute;top:80px;left:0; width: 250px;text-align: left;opacity: 0;visibility: hidden;transition: all .3s cubic-bezier(0.19, 1, 0.22, 1); pointer-events: none;}
.gnb_2dul:before{content:"";position:absolute; top:0; left:0; right:0;height:0;background:#fff;box-shadow: 0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.1);transition:all 0.2s cubic-bezier(0.4, 0, 1, 1);border-radius:20px;}
.gnb_2dul .gnb_2dul_box {padding:14px 0;}
.gnb_2dli{opacity: 0;transition: all 0s 0s;}
.gnb_2da {position:relative;display:flex;gap:5px;padding:0 14px;line-height:40px;border-radius:5px;color:#aaa;font-family:'Pretendard', sans-serif; font-weight: 500;transition:all 0.2s cubic-bezier(0.4, 0, 1, 1);}
a.gnb_2da:hover {color:var(--main-color);background:#f8f8f8;}
.gnb_2da .gnb-img{width: 20px;height: 20px;}
.gnb_2da .gnb-img > img{width: 100%;height: 100%;object-fit: cover;}

/*gnb_1dli 마우스를 올렸을 때*/
#gnb .hassub.on:after{transform: rotate(180deg);transform-origin: center;color: var(--main-color);}

/*2차 메뉴 활성화*/
.gnb_2dul.show{opacity: 1;visibility: visible;pointer-events: auto;}
.gnb_2dul.show:before{height: 100%;}
.gnb_2dul.show .gnb_2dli{opacity:1.0; transition:all 0.4s ease-in-out;}
.gnb_2dul.show .gnb_2dli:nth-child(1){transition-delay:0.1s;}
.gnb_2dul.show .gnb_2dli:nth-child(2){transition-delay:0.2s;}
.gnb_2dul.show .gnb_2dli:nth-child(3){transition-delay:0.3s;}
.gnb_2dul.show .gnb_2dli:nth-child(4){transition-delay:0.4s;}
.gnb_2dul.show .gnb_2dli:nth-child(5){transition-delay:0.5s;}
.gnb_2dul.show .gnb_2dli:nth-child(6){transition-delay:0.6s;}
.gnb_2dul.show .gnb_2dli:nth-child(7){transition-delay:0.7s;}
.gnb_2dul.show .gnb_2dli:nth-child(8){transition-delay:0.8s;}

/*햄버거메뉴*/
#menu-btn{display: flex;flex-direction:column;justify-content: center;align-items:flex-end;gap:8px;position: absolute;right:3rem;top: 50%;transform: translateY(-50%);width:3rem;height:3rem;box-sizing:border-box;cursor: pointer;}
#menu-btn > span{display:block; width:2rem; height:3px; background:#fff;transition:all 0.4s ease-in-out;}
#menu-btn > span:nth-child(2){width:1.5rem;}
#menu-btn.active{z-index:1000;}
#menu-btn.active span,
#menu-btn.active span:nth-child(2){top: 10px; left: 0; width: 60px; height: 4px;background: #fff !important;}
#menu-btn.active span:nth-child(1){transform: translateY(17px) rotate(45deg);}
#menu-btn.active span:nth-child(2){transform: translateY(5px) rotate(-45deg);}
#menu-btn.active span:nth-child(3){opacity: 0;}

#mob-gnb{position:fixed;top:0;right:-100%;z-index:100;max-width:100vw;width:100%;height:100vh;visibility:hidden;opacity:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(30px) brightness(0.95);transition:all 0.5s ease;}
#mob-gnb .menu-list{position:relative;height: 100%;width: 100%;padding:0 5rem;margin: 0 auto;display: flex;flex-direction: column;place-content: center;}
#mob-gnb .menu-list > ul {display: flex;}
#mob-gnb .menu-list > ul > li{flex: 1;border-left: 1px solid rgba(255,255,255,0.1);opacity: 0;transform: translateY(-50px);transition: opacity 0.5s ease, transform 0.5s ease;}
#mob-gnb .menu-list > ul > li:last-child {border-right: 1px solid rgba(255,255,255,0.1);}
#mob-gnb .menu-list > ul > li > .dep01{display:block;padding:0 2rem;margin-bottom:30px;width: 100%;height:55px;line-height:55px;font-family:'Pretendard', sans-serif; font-weight: 800; font-size: var(--main-title03);color:#fff;}
#mob-gnb .menu-list > ul > li > .dep01 .hassub{display: block;width: 100%;}
#mob-gnb .dep02 {}
#mob-gnb .menu-list > ul > li.open > .dep01 .hassub:before{transform: rotate(180deg);transform-origin: center;color: var(--main-color);}
#mob-gnb .dep02 > li{padding:0 2rem;width: 100%;height: 45px;}
#mob-gnb .dep02 > li a{position: relative;display: block;width: 100%;color:#fff;opacity: 0.3;transition: opacity 0.3s;}
#mob-gnb .dep02 > li a:hover{opacity: 1;}
#mob-gnb.on{right:0;z-index:999;visibility:visible;opacity:1;}
#mob-gnb.on .menu-list > ul > li {opacity: 1;transform: translateY(0);}
#mob-gnb .mob-menu-close{display: none;}

/* 스크롤 내렸을 때 */
#hd.scroll{background: #fff;}
#hd.scroll #logo .light-mode-logo{opacity: 1;}
#hd.scroll #logo .dark-mode-logo{opacity: 0;}
#hd.scroll .gnb_1dli .gnb_1da{color: rgba(0,0,0,0.6);}
#hd.scroll .gnb_1dli:hover .gnb_1da{color: rgba(0,0,0,1);}
#hd.scroll .gw-sns-container > li > a{color: #000;}
#hd.scroll #menu-btn > span{background: #000;}
#hd.scroll .gnb_1dli .gnb_1da span:before{background-color: #000;}