@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, transform 1s ease-in-out;position: absolute;left: 0;top: 0;background:#fff;border-bottom: 1px solid transparent;z-index: 9999;}
#hd_wrapper {position:relative;margin:0 auto;width: 100%;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: 40px;transform:translateY(-50%);}
.hd_login{position:absolute;top:50%;right:8%;transform:translateY(-50%);display: flex;gap: 10px;text-transform: uppercase;font-size: 14px;transition: all .3s;}
.hd_login.on{z-index: 99999;}
.hd_login li {padding:0 12px;height: 35px; border-radius: 50px; display: flex; background: #F2F2F2;}
.hd_login a{ display: flex; align-items: center;justify-content: center;gap:5px;font-size: 14px;font-weight:600;width: 100%; height: 100%;}
#gnb{padding-right:24rem;position:relative;display:flex;align-items:center;place-content:flex-end;height: 100%;transition: all .3s;}
#gnb_1dul{height:100px;display: flex;justify-content: center;align-items: center;}
#gnb .gnb_1da{display:flex;align-items:center;place-content:center;width:10rem;height:100%;color: #000;transition: all .3s;}
.gnb_1dli.gnb_al_li_plus .gnb_1da{padding:0;transition: all .3s;}
#gnb .gnb_1dli{position: relative;height:100%;display:flex;align-items:center;place-content:center;text-align: center;}
#gnb .gnb_1dli:before{content:""; position:absolute; bottom:0; width:0; left:50%; transform:translateX(-50%);height:3px; background:var(--main-color);transition: all 0.4s ease-in-out;}
#gnb .gnb_1dli:hover > a {color:var(--main-color) !important;}

/* 헤더 화면 로딩 완료 후 움직임 */
#hd.load{transform: translateY(0) !important;}

/*네비게이션메뉴*/
#gnb .gnb_wrap {position:relative;transition: all .3s;}
#gnb_2dul{display:flex;position: absolute;top: 100px;left: 50%;transform: translateX(-50%);width: 100%;}
#gnb_2dul:before {content: "";display: block;position: absolute;top: 0;left: -100%;width: 200vw;height: 0;border-top:1px solid rgba(0,0,0,0.05);background: #fff;opacity: 0;visibility: hidden;transition: all .3s;}
#gnb_2dul .gnb-depth02 {text-align: center;width:100%;z-index: 200;border-right: 1px solid rgba(0,0,0,0.05);height:0;opacity: 0;filter:Alpha(opacity=0);visibility: hidden;}
#gnb_2dul .gnb-depth02:first-child{border-left: 1px solid rgba(0,0,0,0.05);}
#gnb_2dul .gnb-depth02 > ul {padding: 20px 0;}
#gnb_2dul .gnb-depth02 > ul > li {position: relative;}
#gnb_2dul .gnb-depth02 > ul > li > a {padding:9px 15px;display: block;font-size: 14px;color: #666;font-weight: 500;}
#gnb_2dul .gnb-depth02 > ul > li > a > span {position:relative;display: inline-block;}
#gnb_2dul .gnb-depth02 > ul > li > a > span:before {content: "";display: block;width: 0;height: 2px;position: absolute;bottom: -5px;left: 0;background: #ddd;transition: all .3s;}
#gnb_2dul .gnb-depth02 > ul > li > a > span:hover:before{width:100%;}

/* 1차 메뉴에 마우스 올렸을 때*/
#gnb.on .gnb_1da{width: 12rem;}
#gnb.on #gnb_2dul:before{height: 100%; opacity: 1; visibility: visible;}
#gnb.on #gnb_2dul .gnb-depth02 {height: auto; opacity: 1; visibility: visible;filter:Alpha(opacity=100);}
#gnb .gnb_1dli.on:before{width: 100%;}
#gnb #gnb_2dul .gnb-depth02.on{background: #f8f8f8;}

#menu-btn{position: absolute;right:3%;top: 50%;transform: translateY(-50%);display:flex;flex-direction:column;justify-content:center;align-items:flex-end;width:56px;height:32px;box-sizing:border-box;cursor: pointer;}
#menu-btn > span{margin:3.5px 0;display:block;width:100%; height:4px; background:#000; transition:all 0.4s ease-in-out;}
#menu-btn > span:nth-child(1){width: 30px;background: var(--main-color);}

#menu-btn.active{z-index:99999;}
#menu-btn.active span:nth-child(1){width: 100%;transform: translateY(5px) rotate(45deg);;background: #000;}
#menu-btn.active span:nth-child(2){transform: translateY(-5px) rotate(-45deg);;background: #000;}



#mob-gnb{/*display: none;*/position:fixed;top:0;left:-100%;z-index:100;max-width:100vw;width:100%;height:100vh;visibility:hidden;}
#mob-gnb > .gw-flex{height: 100%;}
#mob-gnb .menu-bg{overflow:hidden; position:absolute;top:0;right:0; width:0; height:100%; background:#f9f9f9; transition:all 0.6s ease}
#mob-gnb .menu-bg:before{content:"";position: absolute; width:34.375%; height:100%; top:0; left:0;background:#fff;}
#mob-gnb .menu-container{padding: 50px 30px;margin:0 auto;position: relative; display:flex; align-items:center;place-content:center; opacity:0; width:1720px;transition:opacity 0.5s ease 0s ;}
#mob-gnb .menu-tit-box{width:32.528%; padding-right:4rem;margin-bottom:-4rem;}
#mob-gnb .menu-tit-box .menu-tit-item{margin-bottom:140px;}
#mob-gnb .menu-tit-box .menu-tit-item .gw-tit{font-size:var(--main-title03); line-height:1.5; color:#000; font-weight:700; margin-bottom:50px; transition-delay:0.4s;}
#mob-gnb .menu-tit-box .menu-tit-item .gw-txt{font-size:var(--main-text01); line-height:1.6; letter-spacing:-0.05em; color:#555; font-weight:500; transition-delay:0.6s;}
#mob-gnb .gw-menu-btn-box{display: flex;gap:15px;}
#mob-gnb .menu-list{width:67.472%; padding-left:120px; height:100%;}
#mob-gnb .menu-list > ul > li{transform: translateX(50px);transition: all 0.8s ease-in-out;}
#mob-gnb .menu-list > ul > li > a{display:block;width: 200px;color:#222;font-size: var(--main-title04);font-family:"Noto Sans KR", sans-serif; font-weight: 800;}
#mob-gnb .dep02 {display: flex;flex-wrap: wrap;width: calc(100% - 200px);}
#mob-gnb .menu-list > ul {display: flex;flex-direction: column;gap: 30px;}
#mob-gnb .dep02 > li {position: relative;}
#mob-gnb .dep02 > li:not(:last-child):before {content:'';position: absolute;top:50%;right: 20px;transform:translateY(-50%);width:3px;height:3px;background:#ccc;border-radius:50%;}
#mob-gnb .dep02 > li > a {display: inline-block;position:relative;color: #666;letter-spacing: -0.05em;padding-bottom: 10px;margin-right: 40px;transition: all 0.3s;}
#mob-gnb .dep02 > li > a > span{position: relative;}
#mob-gnb .dep02 > li > a > span:before{content:'';position: absolute;bottom:-2px; left:50%; height:2px; width:0; background-color:var(--main-color); transition: all 0.5s ease-in-out;}
#mob-gnb .dep02 > li > a:hover{color:var(--main-color);}
#mob-gnb .dep02 > li > a:hover > span:before{width:100%; left:0;}



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

/* 메뉴 활성화 */
html.on,body.on{overflow: hidden;}
#hd.on{border-bottom:1px solid #e8e8e8;}
#hd.on{border-bottom:1px solid #e8e8e8;}
#logo.on{z-index: 999999;}
#mob-gnb.on{left:0;display:block;z-index:9999;visibility:visible;}
#mob-gnb.on .menu-bg{width: 100%;}
#mob-gnb.on .menu-container{opacity:1.0; transition-delay:0.4s}
#mob-gnb.on .menu-list > ul > li{display:flex;transform:translateX(0);opacity: 1;}
#mob-gnb .dep02.on > li{height: auto;}