@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;height:var(--gw-header-h);transition: all 0.3s ease;position: fixed;left: 0;top: 0;z-index: 9999;background:#fff;}
/* 폭을 100vw 가 아니라 #hd(min-width:320px) 기준 100% 로 잡아, 320px 미만에서
   헤더 콘텐츠도 더 줄지 않고 320px 하한을 지키게 한다 */
#hd_wrapper {position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:9999;width: calc(100% - 80px);zoom:1}
#hd_wrapper .gnb-container{position:relative;height:var(--gw-header-h);}
#mob-gnb,#menu-btn{display: none;}
.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;}
/* 로고 원본(279x80)이 낮아진 헤더(85px)를 넘지 않도록 높이를 묶는다 */
#logo > a > img {position: absolute;top: 50%;left: 0;transform:translateY(-50%);max-height:44px;width:auto;transition: opacity 0.3s ease;}
/* 흰 로고(다크 배경용)는 컬러 로고와 같은 자리에 겹쳐 두고 투명 헤더에서만 보인다 */
#logo > a > .dark-mode-logo{opacity:0;}
#hd .gw-hd-right{position: relative;z-index: 100;}

/* 햄버거메뉴 — PC(1281px~)에서는 GNB 가 있으므로 노출하지 않는다(responsive.css 에서 1280px 이하에만 표시).
   MENU 텍스트를 없애고 길이가 다른 두 줄 + CI 골드 짧은 줄 구성으로 정리했다.
   두 줄이 모두 오른쪽 정렬이라 접힘/펼침 상태가 시각적으로 구분된다. */
#menu-btn{position: relative; width:34px; height:34px; display:none; flex-direction:column; justify-content:center; gap:8px; margin-left:20px; box-sizing:border-box;cursor: pointer;}
#menu-btn .gw-line{position: relative; top:0; display:block; margin-left:auto; width:28px; height:3px; border-radius:3px; background:#111; transition:top 0.4s 0.4s, transform 0.4s 0s, width 0.3s ease, background 0.4s ease-in-out;}
#menu-btn .gw-line:nth-child(3){width:18px; background:var(--pnf-gold, #FFCB08);}
#menu-btn:hover .gw-line:nth-child(3){width:28px;}
#menu-btn .gw-txt-box{display:none;}
/* active — 두 줄이 X 로 모인다 */
#menu-btn.active{z-index:100000;}
#menu-btn.active .gw-line{transition:top 0.4s 0s, transform 0.4s 0.4s; width:28px;}
#menu-btn.active .gw-line:nth-child(1){top:5.5px;transform: rotate(45deg);}
#menu-btn.active .gw-line:nth-child(3){top:-5.5px;transform: rotate(-45deg); background:#111;}

/*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: right;}
#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 .gnb_1dli > a span{position:relative;}
#gnb .gnb_1dli > a span:before{content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--main-color); 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 .gnb_1dli:hover > a span:before{transform: scale(1, 1); transition-delay: 0s; transform-origin: 0% 50%; }
/* 하위메뉴 유무와 무관하게 모든 대메뉴에 적용한다. gnb_al_li_plus(하위메뉴 있음)에만
   걸면 하위메뉴 없는 대메뉴가 헤더 높이만큼의 line-height 를 못 받아 좌상단에 작게 떠버린다 */
.gnb_1dli .gnb_1da{padding: 0 30px;position: relative;z-index: 100;display: block;line-height: var(--gw-header-h);text-align: center;font-size: var(--main-text01);letter-spacing: -0.02em;font-weight: 700;transition: all 0.4s ease-in-out;}
.gnb_1dli .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);}
/* 우측 정렬. 마지막 대메뉴가 컨테이너 오른쪽 끝에 딱 붙지 않도록 여백을 남긴다 */
#gnb .gnb_1dli:last-child .gnb_1da{padding-right:40px;}
.gw-side-menu-container01 > [class*="gw-side-menu-depth"] > button{border-radius: 50px;}

/*2차메뉴*/
#gnb .gnb_wrap {display: inline-block;}
/* 부모 대메뉴 아래 가운데로 열리게 한다(left:50% + translateX(-50%)). left:0 이면
   우측 정렬된 마지막 대메뉴에서 드롭다운이 오른쪽 밖으로 나가 잘린다. 폭도 줄인다. */
.gnb_2dul_box {padding:14px 0; position: absolute;top: calc(var(--gw-header-h) - 14px);left: 50%;transform: translateX(-50%);z-index: 99;visibility: hidden;opacity: 0;width: 180px;text-align: center;border-radius: 16px;transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1), visibility 0.3s cubic-bezier(0.4, 0, 1, 1);}
.gnb_2dul_box:before{content:"";position:absolute; top:0; left:0; right:0;height:0;background:#fff;box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);border-radius:20px;transition:all 0.2s cubic-bezier(0.4, 0, 1, 1);}
.gnb_2dli{padding: 0 14px;}
.gnb_2da{position:relative;z-index:10;display:block;padding:7px 0;line-height:1.3;font-size:15px;font-weight:600;transform:translateY(-20px);transition: all 0.4s ease-in-out;}
.gnb_2da > span{display:inline-block;position:relative;background: linear-gradient(90deg, var(--main-color), var(--main-color) 50%, rgba(0,0,0,0.2) 0);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-size: 200% 100%;background-position: 100%;transition:background-position 0.4s;}
.gnb_2dli:hover .gnb_2da > span{background-position:0;}

/*gnb_1dli 마우스를 올렸을 때*/
#gnb .hassub.on .gnb_1da{color:var(--main-color);}


/*2차 메뉴 활성화*/
.gnb_2dul.show .gnb_2dul_box{display:block;opacity: 1;visibility: visible;}
.gnb_2dul.show .gnb_2dul_box:before{height:100%;}
.gnb_2dul.show a.gnb_2da{transform: translateY(0);}

#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: 1720px;height: 0;display:flex;align-items:center;place-content:center;border-left:1px solid rgba(255,255,255,0.07);border-right: 1px solid rgba(255,255,255,0.07);}
#mob-gnb .menu-list > ul {display: flex;place-content: center;width:100%;}
#mob-gnb .menu-list > ul > li {padding:0 10px 0 30px;position:relative;flex: 1;opacity: 0;transform: translateY(-50px);transition: opacity 0.5s ease, transform 0.5s ease;}
#mob-gnb .menu-list > ul > li:not(:last-child):before {content: "";display: block;position: absolute;right: 0;top: -200%;height: 300vh;width: 1px;background: rgba(255,255,255,0.07);}
#mob-gnb .menu-list > ul > li:after { content:"";position: absolute; top:50%; left:0;width:100%; height:100vh; background: transparent linear-gradient(180deg, var(--main-color) 0%, var(--main-color) 100%) 0 0 no-repeat padding-box; opacity:0.5; transform: translateY(0%) scale(1,0); z-index:-1;transition:all 0.4s ease-in-out;}
#mob-gnb .menu-list > ul > li:hover:after{transform: translateY(-50%) scale(1,1);}
#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 > 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%;font-weight:600;transition:all 0.4s ease-in-out;}
#mob-gnb .dep02 > li a span{display:inline-block;position:relative;background: linear-gradient(90deg, #fff, #fff 50%, rgba(255,255,255,0.5) 0);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-size: 200% 100%;background-position: 100%;transition:background-position 0.4s;}
#mob-gnb .dep02 > li:hover a span{background-position:0;}
.mob-hd-login{display: none;}

html.on,body.on{overflow: hidden;}
#gnb.on{display: none;}
#hd.on #hd_wrapper{width: 1720px;}

/* 투명 헤더 — 메인(hd-transparent)에서 최상단에 있을 때만.
   메인 히어로가 크림 색면이라 배경만 비우고 로고·글자는 기본(어두운) 상태를 그대로 쓴다.
   즉 헤더는 히어로 위에 얹혀 보이되 색을 뒤집지 않는다.
   스크롤하면(is-scrolled) 흰 배경으로 돌아가고,
   모바일 메뉴가 열리면(on) 흰 드롭다운과 이어지도록 역시 흰 배경으로 만든다.

   어두운 히어로를 쓰는 화면이 생기면 그 섹션에 .hd-over-dark 를 함께 붙여
   아래 '어두운 배경 위' 블록으로 색을 뒤집는다. */
#hd.hd-transparent:not(.is-scrolled):not(.on){background:transparent;}
#hd.hd-transparent:not(.is-scrolled):not(.on) #gnb{box-shadow:none;}
/* 밝은 히어로 위에서는 브랜드색 밑줄이 골드보다 잘 읽힌다 */
#hd.hd-transparent:not(.is-scrolled):not(.on) #gnb .gnb_1dli > a span:before{background:var(--main-color);}

/* 어두운 배경 위에 헤더가 얹힐 때만 흰색으로 뒤집는다 */
#hd.hd-transparent.hd-over-dark:not(.is-scrolled):not(.on) .gnb_1dli .gnb_1da{color:#fff;}
#hd.hd-transparent.hd-over-dark:not(.is-scrolled):not(.on) #gnb .gnb_1dli > a span:before{background:var(--pnf-gold, #FFCB08);}
#hd.hd-transparent.hd-over-dark:not(.is-scrolled):not(.on) #gnb .hassub.on .gnb_1da{color:#fff;}
#hd.hd-transparent.hd-over-dark:not(.is-scrolled):not(.on) #logo .light-mode-logo{opacity:0;}
#hd.hd-transparent.hd-over-dark:not(.is-scrolled):not(.on) #logo .dark-mode-logo{opacity:1;}
#hd.hd-transparent.hd-over-dark:not(.is-scrolled):not(.on) #menu-btn .gw-line{background:#fff;}
#hd.hd-transparent.hd-over-dark:not(.is-scrolled):not(.on) #menu-btn .gw-line:nth-child(3){background:var(--pnf-gold, #FFCB08);}

/* 스크롤 후에는 얇은 그림자로 헤더가 콘텐츠 위에 떠 있음을 알린다 */
#hd.is-scrolled{box-shadow:0 10px 30px rgba(0,0,0,.06);}
#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);}

/* 지금 보고 있는 대메뉴 — 밑선을 상시 펴 두고 글씨를 한 단계 굵힌다.
   호버 밑선과 같은 부품을 쓰므로 마우스를 올려도 어긋나지 않는다. */
#gnb .gnb_1dli.is-current > a span:before{transform: scale(1, 1); transform-origin: 0% 50%;}
#gnb .gnb_1dli.is-current .gnb_1da{font-weight:800;}