@charset "UTF-8";
/*****************************************************************

Copyright C 위브온 테마 All rights reserved.
weevon@naver.com & master@weevon.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;}
/* ── PC 헤더 래퍼: max 1200px 중앙 ── */
#hd_wrapper {
    position: relative;
    margin: 0 auto;
    max-width: 1500px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/* gnb-container: 로고 | GNB(중앙) | 로그인 */
#hd_wrapper .gnb-container {
    display: flex;
    align-items: center;
    height: 100px;
    position: relative;
}

#mob-gnb { display: none; }

/* 로고: 왼쪽 고정 */
.logo { flex-shrink: 0; z-index: 100; transition: all .3s; }
#logo {
    position: static !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
}
#logo > a {
    display: flex;
    align-items: center;
    height: 60px;
}
#logo > a > img {
    position: static !important;
    transform: none !important;
    height: 42px;
    width: auto;
}

/* 로그인: 오른쪽 고정 */
#hd_wrapper .hd_login {
    position: static !important;
    transform: none !important;
    flex-shrink: 0;
    z-index: 100;
    text-transform: uppercase;
    font-size: 14px;
    display: flex;
    align-items: center;
}
#hd_wrapper .hd_login li {float:left;margin:0 5px;line-height:13px}
#hd_wrapper .hd_login li:first-child {border-left:0}
#hd_wrapper .hd_login li> a {position:relative; text-align:left;padding:5px 10px; font-size:12px;  color:#000; border-radius: 30px; background: rgba(0,0,0,0.05);border: 1px solid rgba(0,0,0,0.05);}
#hd_wrapper .hd_login li:first-child > a{color: #666;background: #fff;border: 1px solid #ddd;}
#hd_wrapper .hd_login a{color: #222;}

/*1차메뉴*/
#gnb {
    flex: 1;
    display: flex;
    align-items: center;
    justify-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; }
.gnb_1da{padding: 0;}
#gnb .gnb_1dli{position:relative;flex:1;display: flex;place-content: center;align-items: center;text-align: center;}
.gnb_1dli.gnb_al_li_plus .gnb_1da{position:relative;padding:0;transition: all 0.3s 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);}
.wv-side-menu-container01 > [class*="wv-side-menu-depth"] > button{border-radius: 50px;}

/*2차메뉴*/
#gnb .gnb_wrap { margin: 0 auto; position: relative; width: 100%; height: 100%; }
.gnb_2dul_box {padding:20px 0;position:absolute;top:90px;left:50%;transform: translateX(-50%);z-index:99;width:100%;text-align:center;visibility:hidden;opacity:0;transition:all 0.3s cubic-bezier(0.4, 0, 1, 1);border-radius:20px;box-shadow:0px 10px 30px rgba(0, 0, 0, 0.25);}
.gnb_2dul_box:before{content:"";position:absolute; top:0px; left:0px; right:0px;height:0; border-radius: 20px;transition:all 0.3s cubic-bezier(0.4, 0, 1, 1);background: var(--main-color);}
.gnb_2dli{padding: 0 14px;}
a.gnb_2da{position:relative;z-index:10;display:block;padding:10px 0;color:#fff;line-height:1.3;opacity:0.7;font-size:14px;font-family:"NotoKr_M", sans-serif;transform:translateY(-20px);transition: all .3s;}
a.gnb_2da:after{content:"";display:block; width:0;height:2px;background:#fff;position:absolute;bottom:0;left: 50%;transform: translateX(-50%);transition: all .3s;}
a.gnb_2da:hover{opacity: 1;}
a.gnb_2da:hover:after{width: 100%;}

/*3차메뉴 (PC GNB - 2차 hover 시 슬라이드)*/
.gnb_3dul{display:none;margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.2);text-align:left;}
.gnb_3dli{padding:0;}
a.gnb_3da{position:relative;display:block;padding:7px 14px 7px 22px;color:#fff;line-height:1.3;opacity:0.55;font-size:12px;font-family:"NotoKr_M",sans-serif;transition:all .2s;}
a.gnb_3da:before{content:"ㄴ";position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:11px;opacity:0.6;}
a.gnb_3da:hover{opacity:1;padding-left:26px;}

/*2차에 3차 활성화된 상태*/
.gnb_2dli.dep3-on > a.gnb_2da{opacity:1;}
.gnb_2dli.dep3-on > a.gnb_2da:after{width:100%;}

/*mob 전체메뉴 3차*/
.dep02-li{width:100%;}
.dep02-a{display:block;width:100%;color:rgba(255,255,255,0.5);font-family:'NotoKr_M',sans-serif;transition:all .3s;padding:0;}
.dep02-a:hover,.dep02-a:focus{color:rgba(255,255,255,1);}
.dep03{padding:4px 0 4px 10px;border-left:2px solid rgba(255,255,255,0.2);margin:4px 0 4px 12px;}
.dep03-li{height:auto !important;padding:0 !important;opacity:1 !important;transform:none !important;}
.dep03-a{display:block;width:100%;padding:6px 0 6px 10px;color:rgba(255,255,255,0.4);font-size:12px;font-family:'NotoKr_M',sans-serif;position:relative;transition:all .2s;}
.dep03-a:before{content:"ㄴ";position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:11px;opacity:0.6;}
.dep03-a:hover{color:rgba(255,255,255,0.8);padding-left:14px;}

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

/*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);}


/* 햄버거메뉴 */
#menu-btn {display: inline-block;position: absolute;top:50%;right:0;transform:translateY(-50%);z-index:9999;width: 30px;height: 30px;transition: .1s;cursor: pointer;}
#menu-btn span {position: absolute;width: 5px;height: 5px;background: var(--main-color);display: block;border-radius: 50%;transition: all .3s cubic-bezier(.8, .5, .2, 1.4);}
#menu-btn:hover span{transform: scale(1.2);}
#menu-btn span:nth-child(1){left: 0;top: 0;opacity: 0.5;}
#menu-btn span:nth-child(2){left: 12px;top: 0;}
#menu-btn span:nth-child(3){right: 0;top: 0;opacity: 0.5;}
#menu-btn span:nth-child(4){left: 0;top: 12px;}
#menu-btn span:nth-child(5){position: absolute;left: 12px;top: 12px;opacity: 0.5;}
#menu-btn span:nth-child(6){right: 0px;top: 12px;}
#menu-btn span:nth-child(7){left: 0px;bottom: 0px;opacity: 0.5;}
#menu-btn span:nth-child(8){position: absolute;left: 12px;bottom: 0px;}
#menu-btn span:nth-child(9){right: 0px;bottom: 0px;opacity: 0.5;}
#menu-btn.active{transform:translateY(-50%) rotate(180deg);cursor: pointer;transition: .2s cubic-bezier(.8, .5, .2, 1.4);}
#menu-btn.active span{border-radius: 50%;transition-delay: 200ms;transition: .5s cubic-bezier(.8, .5, .2, 1.4);background: #fff;}
#menu-btn.active span:nth-child(2) {left: 6px;top: 6px;}
#menu-btn.active span:nth-child(4) {left: 6px;top: 18px;}
#menu-btn.active span:nth-child(6) {right: 6px;top: 6px;}
#menu-btn.active span:nth-child(8) {left: 18px;bottom: 6px;}

#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);transition: opacity 0.5s ease, visibility 0.5s ease;}
#mob-gnb .menu-list{width: 100%;height: 0;display:flex;align-items:center;place-content:center;}
#mob-gnb .menu-list > ul {display: flex;place-content: center;width:100%;}
#mob-gnb .menu-list > ul > li {position:relative;flex: 1;text-align: center;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.3);}
#mob-gnb .menu-list > ul > li:after {content: "";display: block;width: 100%;height: 300vh;background: var(--main-color);position: absolute;top: -200%;left: 0;opacity: 0;visibility: hidden;transition: all 0.3s;}
#mob-gnb .menu-list > ul > li:hover:after{opacity: 1;visibility: visible;}
#mob-gnb .menu-list > ul > li > .dep01{position: relative;z-index: 10;display:block;width: 100%;height:55px;line-height:55px;font-family:'NotoKr_B' , sans-serif; font-size: var(--main-title04);font-family: 'NanumSquareNeoExtraBold', sans-serif;color:#fff;transition: all .3s;}
#mob-gnb .menu-list > ul > li > .dep01 .hassub{display: inline-block;}
#mob-gnb .menu-list > ul > li > .dep01 .hassub:after {content: "";display: block;width: 0;height: 2px;background: #fff;position: absolute;bottom: 5px;left: 50%;transform: translateX(-50%);transition: all 0.3s;}
#mob-gnb .dep02 > li{position:relative;z-index:10;padding:0 40px;width: 100%;height: 45px;line-height: 45px;opacity: 0;transform: translateY(50px);transition: opacity 0.5s ease, transform 0.5s ease;}
#mob-gnb .dep02 > li a{display: block;width: 100%;color:rgba(255,255,255,0.5);font-family:'NotoKr_M' , sans-serif;transition:all .3s;}
#mob-gnb .menu-list > ul > li:hover > .dep01 .hassub:after{width: 100%;}
#mob-gnb .dep02 > li a:hover{color:rgba(255,255,255,1.0);}
.mob-hd-login{display: none;}

html.on,body.on{overflow: hidden;}
#logo.on{display: none;}
#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);}



/*mob 3차 메뉴 - 고정height 해제*/
#mob-gnb .dep02 > li.dep02-li{height:auto;line-height:1.5;padding:8px 40px;}
#mob-gnb .dep02 > li.dep02-li.has-dep03{padding-bottom:4px;}
#mob-gnb .dep02 > li.dep02-li > .dep02-a{height:auto;line-height:1.5;}

/*다크모드*/
body.dark-mode #hd{background: #111;border-bottom:1px solid #222;}
body.dark-mode #menu-btn span{background: #fff;}
body.dark-mode #gnb{background: #111;}
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 #hd_wrapper .hd_login li> a{color:#fff;border: 1px solid rgba(255, 255, 255, 0.6);}
body.dark-mode #hd_wrapper .hd_login li:first-child > a{background:#333;}
body.dark-mode  #gnb .hassub.on:after{color: #fff;}
body.dark-mode .gnb_2dul{background: #111;}
body.dark-mode .gnb_3dul{border-top-color:rgba(255,255,255,0.1);}
body.dark-mode a.gnb_3da{color:rgba(255,255,255,0.5);}
body.dark-mode a.gnb_3da:hover{color:#fff;}/* ============================================================
   모바일 헤더 오버라이드
   ============================================================ */

/* PC 기본: mob-hd-right 숨김, menu-btn 숨김 */
.mob-hd-right { display: none; }
#menu-btn { display: none; }

/* ── 1280px 이하: 모바일 헤더 활성화 ── */
@media screen and (max-width: 1280px) {

    /* 헤더 래퍼: 모바일에서 max-width 해제, 전체 너비 */
    #hd_wrapper {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        margin: 0 !important;
    }

    /* gnb-container: 로고 왼쪽 / 우측버튼 오른쪽 */
    #hd_wrapper .gnb-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 60px !important;
        overflow: visible !important;
        position: relative !important;
    }

    /* 로고 왼쪽 정렬 - wv-column-center 리셋 */
    #logo {
        position: static !important;
        transform: none !important;
        width: auto !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        flex-shrink: 0;
    }

    #logo > a {
        display: flex !important;
        align-items: center !important;
        width: auto !important;
        height: auto !important;
        position: static !important;
    }

    #logo > a > img {
        position: static !important;
        top: auto !important;
        transform: none !important;
        height: 40px !important;
        width: auto !important;
        max-width: none !important;
        object-fit: contain !important;
    }

    /* 우측 버튼 래퍼 표시 */
    .mob-hd-right {
        display: flex !important;
        align-items: center !important;
        gap: 15px;
        flex-shrink: 0;
    }

    /* 전화 아이콘 */
    .mob-call-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        text-decoration: none;
    }

    .mob-call-btn img {
        width: 30px;
        height: 30px;
        object-fit: contain;
    }

    /* 3선 햄버거 버튼 표시 */
    #menu-btn {
        display: flex !important;
        position: static !important;
        transform: none !important;
        top: auto !important;
        right: auto !important;
        width: 30px !important;
        height: 30px !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        overflow: visible !important;
        flex-shrink: 0;
        z-index: 9999;
    }

    /* 기존 9개 점 숨김 */
    #menu-btn span { display: none !important; }

    /* 3선: ::before + box-shadow */
    #menu-btn::before {
        content: '' !important;
        display: block !important;
        width: 24px;
        height: 2px;
        background: #222;
        border-radius: 2px;
        box-shadow: 0 8px 0 #222, 0 16px 0 #222;
        transition: all 0.3s;
        margin-bottom: 14px;
    }

    #menu-btn::after { display: none !important; }

    /* 활성 상태 */
    #menu-btn.active { transform: none !important; }
    #menu-btn.active::before {
        background: #fff;
        transform: rotate(45deg) translateY(9px);
        box-shadow: 0 -9px 0 #fff, 0 9px 0 transparent;
    }
}

/* ── 576px 이하: 로고 크기 소폭 축소 ── */
@media screen and (max-width: 576px) {
    #hd_wrapper { padding: 0 12px !important; }
    #logo > a > img { height: 34px !important; }
    .mob-call-btn { width: 26px; height: 26px; }
    .mob-call-btn img { width: 26px; height: 26px; }
    #menu-btn { width: 26px !important; height: 26px !important; }
    #menu-btn::before { width: 22px; }
}