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

#hd{width:100vw;transition: all 0.3s ease;position: fixed;left: 0;top: 0;z-index: 9999;}
#hd_wrapper {padding:0 40px;position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:9999;width: 100%;height:100px;zoom:1;background:#fff;}
#hd_wrapper .gnb-container{position:relative;height:100px;}
.logo{z-index: 100;width:300px;height:40px;transition: all 0.4s ease-in-out;}
#logo > a {position: relative;width: 100%;height: 100%;display: block;}
#logo > a > img {position: absolute;top: 50%;left: 0;transform:translateY(-50%);}
#hd .gw-hd-right{position: relative;z-index: 100;}
#hd_wrapper .hd_login{position:relative;display:flex;gap:0.5rem;text-transform: uppercase;font-size: 14px;transition: all 0.4s ease-in-out;}
#hd_wrapper .hd_login li {float:left;line-height:13px}
#hd_wrapper .hd_login li> a {padding:0 12px;position:relative;display: flex;align-items:center;justify-content:space-between;min-width: 90px;width:auto;height: 30px;border-radius: 30px; font-size:0.8rem;  color:#58595B; font-weight:600;background:rgba(0,0,0,0.1);}

/* 햄버거메뉴 */
#menu-btn{ width:40px; height:40px; display:flex; flex-direction:column; justify-content: center; margin-left:2rem; box-sizing:border-box;cursor: pointer;}
#menu-btn .gw-line{display:block; width:40px; height:4px; background:#000;transition:all 0.4s ease-in-out;}
#menu-btn .gw-line:first-child {display:inline-block; margin-bottom: 0.5rem;}

/*1차메뉴*/
#gnb{padding-left:310px;position:absolute;top:0;left:0;z-index:99;width:100%;height: 100%;box-shadow: 0 15px 10px rgba(34, 34, 34, .02);text-align: left;}
#gnb .gnb_wrap > ul{display: inline-block;height: 100%;}
.gnb_1da{padding: 0;}
#gnb .gnb_1dli{position:relative; float:left; word-break:keep-all;}
.gnb_1dli.gnb_al_li_plus .gnb_1da{padding: 0 30px;position: relative;z-index: 100;display: block;line-height: 100px;text-align: center;letter-spacing: -0.02em;font-weight: 700;transition: all 0.4s 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_2dul{position:absolute;top:calc(100px - 20px);left:50% !important;transform:translateX(-50%);z-index:99;width:150px;text-align:left;visibility:hidden;opacity:0;filter:Alpha(opacity=0);transition:all 0.2s cubic-bezier(0.4, 0, 1, 1);}
.gnb_2dul:before{content:"";position:absolute; top:0; left:0; right:0;height:0;background-color:var(--main-color);transition:all 0.2s cubic-bezier(0.4, 0, 1, 1);}
#gnb .gnb_wrap {display: inline-block;}
.gnb_2dul_box {padding:15px 0;}
.gnb_2dli{position:relative; padding:8px; opacity:0; transition:all 0s 0s; }
.gnb_2da{display:block; color:#fff !important; font-size:14px; font-weight:400; text-align:center; line-height:1.4; opacity:0.5;transition:all 0.4s ease-in-out;}
.gnb_2da:hover{opacity:1;}

/*2차 메뉴 활성화*/
.gnb_2dul.show {visibility:visible; opacity:1;}
.gnb_2dul.show:before{height:100%;}
.gnb_2dul.show .gnb_2dli{opacity:1; transition:all 0.4s ease-in-out;}

/*모바일메뉴*/
#mob-gnb{opacity:0;visibility:hidden;position:fixed;top:0;right:0;z-index:100;max-width:100vw;width:100%;height:100vh;background:#fff;transition:all 0.5s;}
#mob-gnb .menu-bg-container{position:absolute;top:0;left:0;width:100%;height:100%;}
#mob-gnb .menu-bg{display: flex;width:calc(100% - 5vw);height:100%;}
#mob-gnb .menu-bg > li{position: relative;flex:1;height:100%;}
#mob-gnb .menu-bg > li:before {content: "";display: block;position: absolute;right: 0;top: 0;width: 1px;height: 100%;background: #ddd;}
#mob-gnb .menu-bg > li:after {content: "";display: block;position: absolute;right: 0;top: 0;width: 100%;height: 100%;background: var(--main-color);transition:width 0.4s ease-in-out;}
#mob-gnb .menu-list{position:absolute;top:50%;right:5vw;transform:translateY(-50%);width: calc(100% - 5vw);border-right:1px solid #ddd;}
#mob-gnb .menu-list > ul{display: flex;}
#mob-gnb .menu-list > ul > li{flex:1;position: relative;}
#mob-gnb .menu-list > ul > li > .dep01{padding:20px 15%;position: relative;display:block;width: 100%;font-weight: 800; font-size: var(--main-title04);transition:all 0.4s;}
#mob-gnb .dep02{opacity:0;filter:Alpha(opacity=0);transition: opacity .8s cubic-bezier(0.47, 0, 0.31, 1.04) 0s;}
#mob-gnb .dep02 > li{width: 100%;}
#mob-gnb .dep02 > li a{padding:10px 15%;position: relative;display: block;width: 100%;color:#666;font-family:'NotoKr_M' , sans-serif;transition: all 0.4s ease-in-out;}
#mob-gnb .dep02 > li a > span{position: relative;z-index: 1;}
#mob-gnb .dep02 > li a:before {content: "";display: block;position: absolute;left: 0;top: 0;width: 0;height: 100%;background: var(--main-color);transition: all 0.4s ease-in-out;}
#mob-gnb .menu-list > ul > li > .dep01:hover{color:var(--main-color);}
#mob-gnb .gw-close-btn{position:absolute; top:0; right:0; width:5vw; height:5vw;}
#mob-gnb .gw-close-btn i{font-size:3rem; color:#000; font-weight:600; transition:transform 0.4s ease-in-out;}
#mob-gnb .gw-close-btn:hover i{transform:rotate(180deg);}

html.on,body.on{overflow: hidden;}
#gnb.on{display: none;}
#mob-gnb.on{opacity:1;visibility:visible;z-index:99999;}
#mob-gnb.on .dep02{opacity:1.0;filter:Alpha(opacity=100);transition: opacity .8s cubic-bezier(0.47, 0, 0.31, 1.04);}
#mob-gnb.on .menu-bg > li:after{width: 0;}

@media (hover: hover) and (min-width:1281px) {
    #mob-gnb .dep02 > li a:hover {color: #fff;}
    #mob-gnb .dep02 > li a:hover:before{width: 100%;}
}