@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;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%);    width: 50%;}
.hd_login{display: none;/*수정*/position:absolute;top:50%;right:8%;transform:translateY(-50%);text-transform: uppercase;font-size: 14px;transition: all .3s;}
.hd_login li {float:left;margin:0 5px;line-height:13px}
.hd_login li:first-child > a{color: #000;background: #fff;border: 1px solid #fff;transition: all .3s;}
.hd_login a{padding:4px 22px; color: #fff;border: 1px solid rgba(255,255,255,0.8);transition: all .3s;}
#gnb{position:relative;display:flex;align-items:center;place-content:center;height: 100%;transition: all .3s;}
#gnb_1dul{height:100px;display: flex;justify-content: center;align-items: center;}
.gnb_1da{padding: 0;color: #fff !important;transition: all .3s;}
#gnb .gnb_1dli{padding: 0;position:relative;height:100%;display:flex;align-items:center;place-content:center;text-align: center;width: 180px;transition: all .3s;}
#gnb .gnb_1dli:before {content: "";display: block;position: absolute;bottom: 0;width: 0;height: 2px;background: var(--main-color);transition: all .3s;transform-origin: center;}
.gnb_1dli.gnb_al_li_plus .gnb_1da{padding:0;transition: all .3s;}
#gnb .gnb_1dli:hover > a {color:var(--main-color) !important;}

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

/* 헤더 배경 흰색 */
#hd.on{background: #fff;}
#hd.on .gnb_1da{color:#000 !important;}
#hd.on .hd_login li:first-child > a{color: #fff;background: #000;border: 1px solid #000;}
#hd.on .hd_login a{color: #222;border: 1px solid #ddd;}
#hd.on #logo .dark-mode-logo{opacity: 0 !important;}
#hd.on #logo .light-mode-logo{opacity: 1 !important;}

/*네비게이션메뉴*/
#gnb .gnb_wrap {position:relative;transition: all .3s;}
#gnb_2dul{display:flex;position: absolute;top: 100px;left: 50%;transform: translateX(-50%);}
#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:210px;z-index: 200;border-right: 1px solid rgba(0,0,0,0.05);height:0;opacity: 0;visibility: hidden;transition: all .3s;}
#gnb .gnb_1dli{position: relative;}
#gnb_2dul .gnb-depth02:first-child{border-left: 1px solid rgba(0,0,0,0.05);}
#gnb_2dul .gnb-depth02 > ul {padding: 40px 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-family: "NotoKr_M", sans-serif;}
#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_1dli{width: 210px;}
#gnb.on #gnb_2dul:before{height: 100%; opacity: 1; visibility: visible;box-shadow: 1px 1px 2px 2px #f3f3f3;}
#gnb.on #gnb_2dul .gnb-depth02 {height: auto; opacity: 1; visibility: visible;}
#gnb .gnb_1dli.on:before{width: 100%;}
#gnb #gnb_2dul .gnb-depth02.on{background: #f8f8f8;}

#menu-btn {display: block;width: 100px;height: 100px;position: absolute;top: 0;right: 0;z-index: 1000;cursor: pointer;transition: all .3s;background: var(--main-color);}
#menu-btn > div {height: 16px;width: 25px;}
#menu-btn span {display: block;width: 25px;height: 2px;background: #fff;position: absolute;transition: all 0.3s;}
#menu-btn span:nth-child(1) {top: 0;}
#menu-btn span:nth-child(2) {top: 6px;}
#menu-btn span:nth-child(3) {top: 12px;}
#menu-btn.active span:nth-child(2) {opacity: 0;}
#menu-btn.active span:nth-child(1) {top: 10px;transform: rotate(45deg);}
#menu-btn.active span:nth-child(3) {top: 10px;transform: rotate(-45deg);}

#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;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;left: 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%;transform:translateY(-50%);width: 100%;}
#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-family: 'NEXON Lv1 Gothic OTF', sans-serif;font-weight: 700; font-size: 18px;transition:all 0.4s;}
#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 .dep02 > li a:hover {color: #fff;}
#mob-gnb .dep02 > li a:hover:before{width: 100%;}
#mob-gnb .menu-list > ul > li > .dep01:hover{color:var(--main-color);}
#mob-gnb.on{opacity:1;visibility:visible;z-index:999;}
#mob-gnb.on .menu-bg > li:after{width: 0;}


/* 메뉴 검정색 */
#hd.black #logo .dark-mode-logo{opacity: 0 !important;}
#hd.black #logo .light-mode-logo{opacity: 1 !important;}
#hd.black .gnb_1da{color: #000 !important;}
#hd.black .hd_login li:first-child > a{color: #fff;background: #000;border: 1px solid #000;}
#hd.black .hd_login a{color: #222;border: 1px solid #ddd;background: #fff;}

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

/*다크모드*/
body.dark-mode #hd{background: #000;border-bottom:1px solid #222;}
body.dark-mode #gnb{background: #000;}
body.dark-mode  #gnb .gnb_1dli:hover > a {color:rgba(255, 255, 255, 1);}
body.dark-mode #gnb_2dul:before{border-top: rgba(255, 255, 255, 1);background: #000;}
body.dark-mode .hd_login li:last-child a{color:rgba(255, 255, 255, 0.6);}
body.dark-mode #gnb #gnb_2dul .gnb-depth02.on{background: #111;}
body.dark-mode #hd.on #logo .dark-mode-logo{opacity: 1 !important;}
body.dark-mode #hd.on #logo .light-mode-logo{opacity: 0 !important;}
body.dark-mode #hd.on .gnb_1da{color:rgba(255, 255, 255, 0.6) !important;}
body.dark-mode #hd.on .hd_login li:first-child > a{color: #000;background: #fff;border: 1px solid #fff;}
body.dark-mode #hd.on .hd_login a{color:#fff;border: 1px solid #ddd;}


/* PC 전용 (넓은 화면) */
@media screen and (min-width: 1281px){
    #hd_wrapper{
        width: 90%;
        min-width: 1400px;
        margin: 0 auto;
    }
}

/* 태블릿 + 모바일 (1280px 이하) */
@media screen and (max-width: 1280px){
    #hd_wrapper{
        width: 100%;
        min-width: 0;       /* 이게 핵심! 1400px 강제 금지 */
        max-width: 100%;
        margin: 0 auto;
        padding: 0 20px;    /* 살짝 여백 줄거면 */
    }
}
#hd_wrapper .gnb-container{
    height:100px;
    position:relative;   /* 원래대로 + 절대요소 기준만 유지 */
    /* display:flex; align-items:center;  ← 이 둘은 삭제 */
}
/* =========================================
   상단 유틸 영역 (SNS + 언어 선택)
   ========================================= */

/* nav 오른쪽, 햄버거 버튼(#menu-btn) 왼쪽에 고정 */
.gnb-utils{
    position:absolute;
    top:0;
    right:120px;            /* #menu-btn 이 width:100px; right:0; */
    height:100px;           /* 헤더 높이와 동일 */
    display:flex;
    align-items:center;
    gap:24px;
    z-index:600;
}

/* SNS 아이콘 리스트 */
.gnb-sns{
    display:flex;
    align-items:center;
    gap:12px;
    margin:0;
    padding:0;
    list-style:none;
    margin-right: 12px;
    margin-top: 8px;
}

.gnb-sns li a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    color:#fff;
    text-decoration:none;
    transition:color .2s;
}

/* =========================
   언어 선택
   ========================= */

/* 랩퍼 : 헤더 높이 기준 */
.lang-switch{
    position:relative;
    height:100px;
    display:flex;
    align-items:center;     /* 트리거 아이콘 세로 가운데 */
}

/* 평소에 보이는 작은 지구본 아이콘 (SNS랑 같은 톤) */
.lang-trigger{
    width:32px;
    height:32px;
    border:none;
    padding:0;
    background:transparent;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    z-index:610;  
    margin-right: 13px;          /* 패널보다 위 */
    margin-top: 2px;
}

/* 펼쳐지는 노란 세로 박스 */
.lang-panel{
    position:absolute;
    top:0;
    right:-10px;
    width:80px;             /* 세로 컬럼 폭 */
    background:var(--main-color);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:opacity .2s, visibility .2s, transform .2s;
    pointer-events:none;
    z-index:600;
}

/* 상단: 헤더 높이만큼 꽉 찬 아이콘 영역 */
.lang-top{
    height:100px;           /* 헤더 높이랑 동일 → 메뉴 높이와 딱 맞게 */
    display:flex;
    align-items:center;
    justify-content:center;
    border-bottom:1px solid rgba(255,255,255,0.6);
}
.lang-top i{
    font-size:22px;
    color:#000;
}

/* 아래쪽 KOR / ENG 두 줄 (헤더 아래로 떨어져 보이는 영역) */
.lang-item{
    height:44px;            /* 한 줄 높이, 필요하면 40~48 사이로 조절 */
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
    color:#000;
    border-bottom:1px solid rgba(255,255,255,0.6);
    transition:background .2s, color .2s;
}
.lang-item:last-child{
    border-bottom:none;
}
.lang-item.active{
    color:#fff;
}
.lang-item:hover{
    background:rgba(0,0,0,0.12);
}

/* 호버/포커스 시: 패널이 열리고, 작은 아이콘은 숨김 */
.lang-switch:hover .lang-panel,
.lang-switch:focus-within .lang-panel{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
}
.lang-switch:hover .lang-trigger,
.lang-switch:focus-within .lang-trigger{
    opacity:0;
    visibility:hidden;
}

/* =========================================
   헤더 상태에 따른 색상 보정
   ========================================= */

/* 헤더 흰 배경 (#hd.on)일 때 */
#hd.on .gnb-sns li a{
    color:#333;
}
#hd .gnb-sns li a:hover{
    color:var(--main-color);
}
#hd.on .lang-trigger{
    color:#333;
}
#hd.on .lang-top i{
    color:#000;
}

/* 검정/다크 모드일 때 */
#hd.black .gnb-sns li a,
body.dark-mode .gnb-sns li a{
    color:#fff;
}
#hd.black .gnb-sns li a:hover,
body.dark-mode .gnb-sns li a:hover{
    color:var(--main-color);
}
#hd.black .lang-trigger,
body.dark-mode .lang-trigger{
    color:#fff;
}

/* =========================================
   모바일에서는 숨김
   ========================================= */
@media screen and (max-width:1024px){
    .gnb-utils{
        display:none !important;
    }
}


/* =========================================
   Header Search (SNS ↔ 언어선택 사이)
   ========================================= */

.hd-search{
    position:relative;
    height:100px;
    display:flex;
    align-items:center;   /* 아이콘 세로 정렬 */
}

/* 검색 아이콘 버튼: SNS/언어 아이콘과 동일 톤 */
.search-trigger{
    width:32px;
    height:32px;
    border:none;
    padding:0;
    background:transparent;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    z-index:610;
    margin-top: 2px;      /* lang-trigger랑 비슷한 느낌 */
}

/* 펼쳐지는 검색 패널 (lang-panel처럼 absolute로) */
.search-panel{
    position:absolute;
    top:0;
    right:-10px;            /* lang-panel과 맞춤 */
    width:320px;
    background:var(--main-color); /* 너 테마 노랑 사용 */
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:opacity .2s, visibility .2s, transform .2s;
    pointer-events:none;
    z-index:650;
    box-sizing:border-box;
    padding:14px 14px 16px;
}

/* 열림 상태 */
.hd-search.on .search-panel{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
}

/* 닫기(X) 버튼 */
.search-close{
    position:absolute;
    top:10px;
    right:10px;
    width:28px;
    height:28px;
    border:none;
    background:transparent;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#000;
}

/* 검색 폼 정리 */
.search-panel .hd_sch_wr{
    margin:0;
}

.search-panel #hd_sch{
    border:0;
    padding:0;
    margin:0;
}

.search-panel #hd_sch form{
    position:relative;
    margin-top: 18px; /* X 버튼 아래로 살짝 */
}

.search-panel #sch_stx{
    width:100%;
    height:44px;
    border:1px solid rgba(0,0,0,0.25);
    background:#fff;
    color:#000;
    padding:0 44px 0 12px;
    box-sizing:border-box;
    border-radius:4px;
    outline:none;
}

.search-panel #sch_submit{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    width:36px;
    height:36px;
    border:none;
    background:#000;
    color:#fff;
    border-radius:4px;
    cursor:pointer;
}

/* 인기검색어(popular) 영역이 있으면 위 여백 */
.search-panel .popular{
    margin-top:12px;
}

/* 헤더 흰 배경일 때 아이콘 색 보정 (#hd.on 상태) */
#hd.on .search-trigger{
    color:#333;
}
#hd.on .search-trigger:hover{
    color:var(--main-color);
}

/* 검정/다크 모드일 때 */
#hd.black .search-trigger,
body.dark-mode .search-trigger{
    color:#fff;
}
#hd.black .search-trigger:hover,
body.dark-mode .search-trigger:hover{
    color:var(--main-color);
}

.hd-search .search-panel { opacity:0; visibility:hidden; }
.hd-search.on .search-panel { opacity:1; visibility:visible; }