@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;background:#fff;border-bottom: 1px solid #e8e8e8;z-index: 9999;}
#hd_wrapper {position:relative;margin:0 auto;width: calc(100vw - 120px);zoom:1}
#hd_wrapper .gnb-container{position:relative;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; width: 80%;  transform:translateY(-50%);}
.hd_login{display:flex;border:1px solid #000;position:absolute;top:50%;right:180px;transform:translateY(-50%);text-transform: uppercase;font-size: 14px;transition: all .3s;width: 11%;}
.hd_login li {flex:1;padding:5px 10px;text-align:center;font-family: "SUIT", 'NotoKr_B' , sans-serif;font-weight: 700;}
.hd_login li:first-child {background:#000;}
.hd_login li:first-child > a{color: #fff;}
.hd_login a{color: #222;}

/*1차메뉴*/
#gnb{position:relative;display:flex;align-items:center;place-content:center;height: 100%;background: #fff;box-shadow: 0 15px 10px rgba(34, 34, 34, .02);}
#gnb .gnb_wrap > ul{display: flex;height: 100%;place-content:center;align-items: center;}
.gnb_1da{padding: 0;font-family: 'SUIT', sans-serif;font-weight: 700;}
#gnb .gnb_1dli{position:relative;flex:1;display: flex;place-content: center;align-items: center;text-align: center;height: 100%;}
#gnb .gnb_1dli:before{content:"";display:block; width:0;height:2px;background:var(--main-color);position:absolute;bottom:0;left: 50%;transform: translateX(-50%);z-index:100;transition: all .3s;}
.gnb_1dli.gnb_al_li_plus .gnb_1da{position:relative;padding:0;font-family: 'SUIT', sans-serif;font-weight: 700;transition: all 0.3s ease-in-out;}

/*2차메뉴*/
.gnb_2dul {position: absolute;top: 98px;left: 50%;transform: translateX(-50%);width: 100%;text-align: center;visibility: hidden;opacity: 0;transition: all 0.3s cubic-bezier(0.4, 0, 1, 1);}
.gnb_2dul:before {content: "";position: absolute;top: 0px;left: 0px;right: 0px;height: 0;background: #fff;box-shadow: 4px 5px 14px 3px rgba(0, 0, 0, .06);border: 1px solid rgba(199, 213, 221, 0.5);border-top: 0;transition: all 0.3s cubic-bezier(0.4, 0, 1, 1);}
.gnb_2dul.show {visibility: visible;opacity: 1;}
.gnb_2dul_box {background-color: #fff;border:1px solid #eaeaea;}
.gnb_2dli {opacity: 0;transform: translateY(-10px);transition: opacity 0.3s, transform 0.3s;}
.gnb_2dul.show .gnb_2dli {opacity: 1;transform: translateY(0);}
a.gnb_2da {position: relative;z-index: 10;display: block;padding: 15px 0;color: #222;line-height: 1.3;opacity: 0.7;font-size: 14px;font-family: "SUIT", sans-serif;transition: all 0.3s;}
a.gnb_2da:hover {opacity: 1;background: #f8f8f8;}
#gnb .hassub.on .gnb_1da {color: var(--main-color);}

/*네비게이션메뉴*/
#gnb .gnb_wrap {margin:0 auto;position:relative;width: 55%;height:100%;}
#gnb_all {opacity: 0; visibility:hidden; position:absolute;top:61px;left:1px;width:100%;z-index:1000;transition:all .3s}
#gnb_all:before {content: "";display: block;width: 100vw;height: 0;background: #fff;position: absolute;left: 50%;transform: translateX(-50%);box-shadow: 0 15px 10px rgba(34, 34, 34, .02); opacity: 0; visibility:hidden;}
#gnb_all .gnb_al_ul {display: flex;}
#gnb_all .gnb_al_li {position:relative;min-height:150px;padding:20px;flex:1;text-align: center;font-size: 14px;}
#gnb_all .gnb_al_li:not(:first-child):before{content: "";position: absolute;left:0;top:0;width:1px;height:0;background:#ddd;transition: all 0.5s;}
#gnb_all .gnb_al_li li {padding:6.5px 0; word-break: keep-all;}
#gnb_all .gnb_al_li li a {color:#888;transition: all .3s;}
#gnb_all_bg {display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;left:0;top:0;}

/* 모바일 */
.menu-btn-container{display: block;width: 100px;height: 16px;position: absolute;top: 50%;right: 0;z-index:9999;transform:translateY(-50%);}
#menu-btn {position: absolute;left: 50%;transform: translateX(-50%);z-index: 1000;width: 100%;height: 16px;cursor: pointer;transition: all .3s;}
#menu-btn span {display: block;width: 100%;height: 3px;background: #000;position: absolute;transition: all 0.3s;}
#menu-btn span:nth-child(1) {top: 0;}
#menu-btn span:nth-child(2) {top: 12px;}
#menu-btn.active{width: 50px;z-index: 99999;}
#menu-btn.active span{background: #fff;}
#menu-btn.active span:nth-child(1) {top: 6px;transform: rotate(45deg);}
#menu-btn.active span:nth-child(2) {top: 6px;transform: rotate(-45deg);}
#menu-btn:hover{width: 50px;}

#mob-gnb{opacity:0;visibility:hidden;position:fixed;top:0;left:0;z-index:100;max-width:100vw;width:100%;height:100vh;background:rgba(0, 0, 0, 0.8);backdrop-filter:blur(50px);transition:opacity 0.5s ease, visibility 0.5s ease;}
#mob-gnb .menu-list{display:flex;align-items:center;margin:0 auto;width: 1400px;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: "";opacity:0;display: block;position: absolute;left: 0;bottom: 0;width: 100%;height: 1px;background: #fff;transition: all 0.5s ease-in-out;}
#mob-gnb .menu-list > ul > li:hover:before{opacity:1;}
#mob-gnb .menu-list > ul > li > a{width: 300px;color: #fff;font-size: var(--main-title03);font-family:'SUIT', sans-serif;font-weight:700;}
#mob-gnb .dep02 {display: flex;flex-wrap: wrap;justify-content:flex-end;gap:20px;width: calc(100% - 300px);}
#mob-gnb .dep02 > li > a {margin:0 10px;position:relative;font-size: 20px;color: rgba(255,255,255,0.6);transition: all 0.3s;}
#mob-gnb .dep02 > li > a:before{content: "";display:block;position: absolute;bottom: -5px;left: 50%;width: 0;height: 2px;background:#fff;transition: all 0.3s;transform: translateX(-50%);}
#mob-gnb .dep02 > li:not(:first-child) > a:after {content: "/";display: block;position: absolute;top: 50%;left: -20px;font-size: 14px;color: rgba(255,255,255,0.3);transform: translateY(-50%);}
#mob-gnb .dep02 > li > a:hover{color:#fff !important;}
#mob-gnb .dep02 > li > a:hover:before{width: 100%;}

/*활성화*/
#mob-gnb.on{opacity:1;visibility:visible;z-index: 999;}
#mob-gnb.on .menu-list > ul > li{transform:translateY(0);opacity: 1;}
#mob-gnb .dep02.on > li{height: auto;}

/*메뉴가 없을때*/
#mob-gnb .menu-list > ul {width: 100%;}
#mob-gnb .menu-list .gnb_empty{padding: 60px;gap: 10px;align-items: center;place-content: center; text-align: center;color: #fff;border: 1px solid rgba(255,255,255,0.1);}
#mob-gnb .menu-list .gnb_empty > a {width: auto;}

/*스크롤 했을 때 헤더 움직임*/
#hd.scrolled {width: calc(100vw - 120px);left: 50%;margin-left:calc(-1 * (100vw - 120px) * 0.5);;border-bottom: 0;top: 20px;}
#hd.scrolled .logo{left: 60px;}
#hd.scrolled #gnb{border:1px solid #eaeaea;}
#hd.scrolled #gnb_all:before{width: calc(100vw - 120px);border: 1px solid #eaeaea;border-top: none;}
#hd.scrolled .menu-btn-container{right:60px;}
#hd.scrolled #menu-btn.active {left: 100%;top: 0;}

/*헤더 마우스 호버시 움직임*/
#gnb_all.show{opacity: 1;visibility:visible;}
#gnb_all.show:before{opacity: 1;visibility:visible;height: 100%;}
#gnb .gnb_1dli.on:before{width: 100%;}

/*마우스호버시 움직임*/
#gnb_all .gnb_al_li li a:hover{color: var(--main-color);}

/*다크모드*/
body.dark-mode #hd{background: #111;border-bottom:1px solid #222;}
body.dark-mode #gnb{background: #111;}
body.dark-mode #gnb_all:before{background: #111;}
body.dark-mode #hd.scrolled #gnb_all:before{border:1px solid #222;}
body.dark-mode #hd.scrolled #gnb{border:1px solid #222;}
body.dark-mode .gnb_1da{color:rgba(255, 255, 255, 0.6);}
body.dark-mode  #gnb .gnb_1dli:hover > a {color:rgba(255, 255, 255, 1);}
body.dark-mode .gnb_1dli.active .gnb_1da{color:rgba(255, 255, 255, 1);}
body.dark-mode #gnb_all .gnb_al_li li a:hover{color:#fff;}
body.dark-mode .gnb_2dul_box{background: #000;border:1px solid #000;}
body.dark-mode a.gnb_2da{color:rgba(255, 255, 255, 0.6);}
body.dark-mode a.gnb_2da:hover {opacity: 1;background:#222;}
body.dark-mode .hd_login{border:1px solid rgba(255, 255, 255, 0.6);}
body.dark-mode .hd_login a{color: #666;}
body.dark-mode .hd_login li:first-child{background: #fff;}
body.dark-mode .hd_login li:first-child > a{color: #000;}
body.dark-mode #menu-btn span{background: #fff;}