@charset "UTF-8";

/* ============================================================
   BOGA MAIN MOBILE HEADER FIX v8
   메인 헤더 모바일 배치:
   - 로고: 왼쪽
   - 전화: 햄버거 왼쪽
   - 햄버거: 맨 오른쪽

   주의: 서브페이지 전용 head_sub.php에는 .wv-sub-header가 붙으므로
   아래 규칙은 일반 메인/기본 head.php에만 적용됩니다.
   ============================================================ */

@media screen and (max-width: 768px) {
    #hd:not(.wv-sub-header) {
        height: 82px !important;
        background: #fff !important;
        border-bottom: 1px solid #e8e8e8 !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
    }

    #hd:not(.wv-sub-header) #hd_wrapper {
        width: 100% !important;
        max-width: 100% !important;
        height: 82px !important;
        padding: 0 34px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #hd:not(.wv-sub-header) #hd_wrapper .gnb-container {
        height: 82px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: relative !important;
        overflow: visible !important;
    }

    #hd:not(.wv-sub-header) #gnb,
    #hd:not(.wv-sub-header) #hd_wrapper .hd_login {
        display: none !important;
    }

    #hd:not(.wv-sub-header) #logo,
    #hd:not(.wv-sub-header) #logo.logo {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
        flex: 0 0 auto !important;
        z-index: 10001 !important;
    }

    #hd:not(.wv-sub-header) #logo > a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
    }

    #hd:not(.wv-sub-header) #logo > a > img {
        position: static !important;
        transform: none !important;
        height: 40px !important;
        width: auto !important;
        max-width: 46vw !important;
        object-fit: contain !important;
        display: block !important;
    }

    #hd:not(.wv-sub-header) .mob-hd-right {
        display: flex !important;
        position: static !important;
        width: auto !important;
        height: 82px !important;
        margin-left: auto !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 22px !important;
        pointer-events: auto !important;
        flex: 0 0 auto !important;
        z-index: 10002 !important;
    }

    #hd:not(.wv-sub-header) .mob-call-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 34px !important;
        height: 34px !important;
        order: 1 !important;
        pointer-events: auto !important;
        z-index: 10003 !important;
    }

    #hd:not(.wv-sub-header) .mob-call-btn img {
        width: 34px !important;
        height: 34px !important;
        object-fit: contain !important;
        display: block !important;
    }

    #hd:not(.wv-sub-header) #menu-btn {
        display: block !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 38px !important;
        height: 30px !important;
        order: 2 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        z-index: 10004 !important;
    }

    #hd:not(.wv-sub-header) #menu-btn span {
        display: none !important;
    }

    #hd:not(.wv-sub-header) #menu-btn::before,
    #hd:not(.wv-sub-header) #menu-btn::after {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        width: 38px !important;
        height: 3px !important;
        border-radius: 10px !important;
        background: var(--main-color) !important;
        transition: all .25s ease !important;
        box-shadow: none !important;
    }

    #hd:not(.wv-sub-header) #menu-btn::before {
        top: 8px !important;
    }

    #hd:not(.wv-sub-header) #menu-btn::after {
        top: 20px !important;
    }

    #hd:not(.wv-sub-header) #menu-btn.active::before {
        top: 14px !important;
        transform: rotate(45deg) !important;
        background: var(--main-color) !important;
    }

    #hd:not(.wv-sub-header) #menu-btn.active::after {
        top: 14px !important;
        transform: rotate(-45deg) !important;
        background: var(--main-color) !important;
    }

    #hd:not(.wv-sub-header) #mob-gnb {
        top: 82px !important;
    }

    #hd:not(.wv-sub-header) #mob-gnb.on {
        height: calc(100vh - 82px) !important;
    }

    body:not(.is_subpage) #wrapper {
        padding-top: 82px !important;
    }
}

@media screen and (max-width: 768px) {
    #hd:not(.wv-sub-header),
    #hd:not(.wv-sub-header) #hd_wrapper,
    #hd:not(.wv-sub-header) #hd_wrapper .gnb-container,
    #hd:not(.wv-sub-header) .mob-hd-right {
        height: 64px !important;
    }

    #hd:not(.wv-sub-header) #hd_wrapper {
        padding: 0 18px !important;
    }

    #hd:not(.wv-sub-header) #logo > a > img {
        height: 32px !important;
        max-width: 50vw !important;
    }

    #hd:not(.wv-sub-header) .mob-hd-right {
        gap: 16px !important;
    }

    #hd:not(.wv-sub-header) .mob-call-btn,
    #hd:not(.wv-sub-header) .mob-call-btn img {
        width: 28px !important;
        height: 28px !important;
    }

    #hd:not(.wv-sub-header) #menu-btn {
        width: 30px !important;
        height: 24px !important;
    }

    #hd:not(.wv-sub-header) #menu-btn::before,
    #hd:not(.wv-sub-header) #menu-btn::after {
        width: 30px !important;
        height: 3px !important;
    }

    #hd:not(.wv-sub-header) #menu-btn::before {
        top: 6px !important;
    }

    #hd:not(.wv-sub-header) #menu-btn::after {
        top: 17px !important;
    }

    #hd:not(.wv-sub-header) #menu-btn.active::before,
    #hd:not(.wv-sub-header) #menu-btn.active::after {
        top: 12px !important;
    }

    #hd:not(.wv-sub-header) #mob-gnb {
        top: 64px !important;
    }

    #hd:not(.wv-sub-header) #mob-gnb.on {
        height: calc(100vh - 64px) !important;
    }

    body:not(.is_subpage) #wrapper {
        padding-top: 64px !important;
    }
}