/* Generated by Font Squirrel (https://www.fontsquirrel.com) on June 1, 2016 */


/*
@font-face {
    font-family: 'source_sans_problack';
    src: url('sourcesanspro-black.woff2') format('woff2'),
         url('sourcesanspro-black.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'source_sans_problack_italic';
    src: url('sourcesanspro-blackit.woff2') format('woff2'),
         url('sourcesanspro-blackit.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}*/

/* 여기부터 */
@font-face {
    font-family: 'source_sans_probold';
    src: url('../fonts/sourcesanspro-bold.woff2') format('woff2'),
         url('../fonts/sourcesanspro-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'source_sans_proextralight';
    src: url('../fonts/sourcesanspro-extralight.woff2') format('woff2'),
         url('../fonts/sourcesanspro-extralight.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'source_sans_proregular';
    src: url('../fonts/sourcesanspro-regular.woff2') format('woff2'),
         url('../fonts/sourcesanspro-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'source_sans_prosemibold';
    src: url('../fonts/sourcesanspro-semibold.woff2') format('woff2'),
         url('../fonts/sourcesanspro-semibold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansbold';
    src: url('../fonts/opensans-bold.woff2') format('woff2'),
         url('../fonts/opensans-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/opensans-regular.woff2') format('woff2'),
         url('../fonts/opensans-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'open_sanssemibold';
    src: url('../fonts/opensans-semibold.woff2') format('woff2'),
         url('../fonts/opensans-semibold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* 여기까지 */
/*

@font-face {
    font-family: 'source_sans_probold_italic';
    src: url('../fonts/sourcesanspro-boldit.woff2') format('woff2'),
         url('sourcesanspro-boldit.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}






@font-face {
    font-family: 'source_sans_proXLtIt';
    src: url('../fonts/sourcesanspro-extralightit.woff2') format('woff2'),
         url('../fonts/sourcesanspro-extralightit.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'source_sans_proitalic';
    src: url('sourcesanspro-it.woff2') format('woff2'),
         url('sourcesanspro-it.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'source_sans_prolight';
    src: url('sourcesanspro-light.woff2') format('woff2'),
         url('sourcesanspro-light.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'source_sans_prolight_italic';
    src: url('sourcesanspro-lightit.woff2') format('woff2'),
         url('sourcesanspro-lightit.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}









@font-face {
    font-family: 'source_sans_proSBdIt';
    src: url('sourcesanspro-semiboldit.woff2') format('woff2'),
         url('sourcesanspro-semiboldit.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}*/
.nav-bar {
    /* 조절 가능한 변수: 확장 높이(150~180px), 배경 투명도(0.85~0.95) */
    --header-expanded-height: 180px;
    --header-bg-alpha: 0.88;
    height: 75px;
    background: #262626;
    /* 메뉴 호버 시 전체 헤더가 부드럽게 커지고 투명해지도록 */
    transform-origin: top center;
    transition: height .22s ease, transform .22s ease, background-color .22s ease, box-shadow .22s ease;
}

/* 헤더/메뉴에 커서를 올리면 살짝 확대 + 반투명 효과 */
/* .nav-bar:hover {
    height: var(--header-expanded-height); /* 예: 150~180px 권장 *
    transform: scaleY(1.02);
    background: rgba(38, 38, 38, var(--header-bg-alpha));
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
} */

/*nav ul li:hover > .nav-dropdown {*/
/*    display: block;*/
/*}*/

/*!* 헤더 확장 시 메뉴 배경도 동일하게 반투명 회색 적용 *!*/
/*.nav-bar:hover nav ul li a,*/
/*.nav-bar:hover nav ul li a:visited {*/
/*    background: inherit !important; !* 헤더 배경과 1:1 매칭 *!*/
/*}*/

.brand {
    position: absolute;
    padding-left: 20px;
    float: left;
    line-height: 70px;
    text-transform: uppercase;
    font-size: 1.4em;
}
.brand a img {
    width: 100px;
    max-height: 70px;
}
.brand a,
.brand a:visited {
    color: #ffffff;
    text-decoration: none;
}

.nav-bar.nav-container {
    max-width: 1000px;
    margin: 0 auto;
}

nav {
    float: right;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav ul li {
    float: left;
    position: relative;
}
/* 데스크탑에서 강제 줄바꿈용 더미 아이템 */
/* 더미 줄바꿈 제거(이제 드롭다운으로 대체) */
.menu-break { display: none !important; }
nav ul li a,
nav ul li a:visited {
    display: block;
    padding: 0 15px;
    line-height: 70px;
    background: transparent !important; /* 헤더 배경과 동일하게 보이도록 강제 */
    color: #ffffff;
    text-decoration: none;
    border-bottom: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
    /*background: #2ab1ce;*/
    color: #ff2e3c;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
    padding-left: 4px;
    content: ' ▾';
}
nav ul li ul li {
    min-width: 150px;
}
nav ul li ul li:hover {
    color: #fff;
    background: rgba(255,255,255,0.06);
}
nav ul li ul li a {
    padding: 15px;
    line-height: 20px;
    border-bottom: none;
    color: #ffffff; /* 드롭다운 글씨 흰색 */
}

.nav-dropdown {
    position: absolute;
    display: none;
    z-index: 1;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.20);
    background: rgba(38, 38, 38, var(--header-bg-alpha)); /* 드롭다운도 동일 투명도 */
    border-radius: 10px;
    overflow: hidden;
}
.nav-mobile {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    background: #262626;
    height: 70px;
    width: 160px;
}
.hover_menu:hover > ul {
    display: block;
}

/* 기본: 데스크톱(PC)에서는 숨김 */
.submenu-button {
    display: none;
}

.temp-login {
    display: none;
}

.temp-signup {
    display: none;
}
@media only screen and (max-width: 990px) {

    .submenu-button {
        position: absolute;
        z-index: 99;
        right: 0;
        top: 0;
        display: block;
        height: 53px;
        width: 53px;
        cursor: pointer;
    }

    /* 장기렌트 메뉴의 토글 버튼 숨기기 */
    .long-term-menu .submenu-button {
        display: none !important;
    }

    /* 기본 세로선 (△) */
    .submenu-button:before {
        position: absolute;
        top: 20px;
        right: 25px;
        width: 2px;
        height: 12px;
        content: ''; /* 세로선 (△) */
        background: black;
        transition: all 0.3s ease;
    }

    /* 기본 가로선 (▽) */
    .submenu-button:after {
        position: absolute;
        top: 25px;
        right: 20px;
        width: 12px;
        height: 2px;
        content: ''; /* 가로선 (▽) */
        background: black;
        transition: all 0.3s ease;
    }

    /* open 상태에서 (+) -> (-)으로 전환 */
    .submenu-button.openSubMenu:before {
        transform: rotate(45deg);   /* 세로선 회전 */
        top: 24px;                  /* 위치 변경 (세로선 회전할 때 위치 보정) */
        height: 0;                  /* 세로선 숨기기 */
    }

    .submenu-button.openSubMenu:after {
        /* 가로선은 회전 없이 그대로 보이게 */
        top: 24px;                  /* 위치 변경 */
        width: 12px;                /* 가로선 보이기 */
        opacity: 1;                 /* 가로선 보이도록 설정 */
    }

    /* 가로선은 회전 없이 보이기만 하고, 세로선은 사라짐 */
    .submenu-button.openSubMenu:before {
        opacity: 0;                 /* 세로선 숨기기 */
    }

    .nav-bar .container {
        margin-right: 5px;
        margin-left: 5px;
    }
    .header_flex {
        display: flex;
    }
    .nav-bar {
        padding: 5px 0;
    }
    .brand {
        padding-left: 0px;
    }
    .nav-mobile {
        display: block; /* 모바일용 아이콘 컨테이너는 보여준다 */
    }
    nav ul li a:not(:only-child):after,
    nav ul li a:visited:not(:only-child):after {
        padding-left: 0px;
        content: '';
    }
    nav {
        width: 100%;
        padding: 70px 15px 15px;
    }
    /* ★★★ 여기가 핵심! ★★★ */
    /* 평소에는 메뉴 리스트 전체를 숨겨둔다. */
    /*.nav-list {*/
    /*    display: none;               !* 기본적으로 메뉴를 숨김 *!*/
    /*    position: absolute;          !* 부모 기준으로 겹치게 설정 *!*/
    /*    top: 70px;                   !* 헤더 아래에 배치 *!*/
    /*    left: 0;*/
    /*    width: 100%;*/
    /*    z-index: 1000;               !* 기존 콘텐츠보다 위에 위치 *!*/
    /*    background: white;           !* 배경색 설정 *!*/
    /*    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); !* 그림자 효과 *!*/
    /*}*/
    .nav-list {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 70%;
        max-width: 320px;
        z-index: 1000;
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15),
        -2px 0 12px rgba(0, 0, 0, 0.1);
        border-radius: 24px 0 0 24px;
        border: none;
        border-left: 1px solid rgba(66, 133, 244, 0.1);
        overflow-y: auto;
        overflow-x: hidden;
        opacity: 0;
        transform: translateX(100%);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    
    /* 모바일 메뉴 장식: 상단 그라데이션 액센트 */
    .nav-list::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #4285f4 0%, #34a853 50%, #4285f4 100%);
        background-size: 200% 100%;
        animation: shimmer 3s ease-in-out infinite;
        z-index: 1;
    }
    
    @keyframes shimmer {
        0%, 100% {
            background-position: 0% 0%;
        }
        50% {
            background-position: 100% 0%;
        }
    }
    
    /* 다크 모드 상단 액센트 */
    @media (prefers-color-scheme: dark) {
        .nav-list::before {
            background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 50%, #60a5fa 100%);
        }
    }

    .nav-list.show {
        opacity: 1;
        transform: translateX(0);
    }

    /* Toss-style backdrop overlay */
    .nav-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .nav-backdrop.show {
        opacity: 1;
        visibility: visible;
    }

    /* ★★★ 그리고 자바스크립트가 .nav-list를 보여줄 때를 대비해,
           내부 스타일을 미리 정해둔다. ★★★ */
    nav ul {
        /* 'display: none' 규칙을 여기서 제거! JS가 제어하도록 둔다. */
    }
    nav ul {
        list-style: none;
        margin: 0;
        padding: 80px 0 20px 0;
    }

    nav ul li {
        float: none;
        margin: 0;
        position: relative;
    }

    /* 일반 메뉴 항목 (세부 메뉴 제외) */
    nav ul li a {
        display: flex;
        align-items: center;
        padding: 16px 20px;
        line-height: 1.5;
        color: #1f2937 !important;
        background-color: transparent !important;
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: -0.01em;
        transition: all 0.2s ease;
        position: relative;
        margin: 0 12px 4px 12px;
        border-radius: 12px;
    }
    
    /* 첫 번째 메뉴 항목 강조 */
    nav ul li:first-child a {
        background: linear-gradient(135deg, rgba(66, 133, 244, 0.05) 0%, rgba(52, 168, 83, 0.03) 100%);
    }
    
    /* 일반 메뉴 항목에 항상 언더바 표시 */
    nav ul li a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: #e5e7eb;
        transition: all 0.2s ease;
    }
    
    /* 장기렌트 메뉴 항목은 언더바 제거 */
    .long-term-menu > a::after {
        display: none;
    }
    
    /* 로그인 메뉴 항목은 언더바 제거 */
    .temp-login a::after,
    .temp-signup a::after {
        display: none;
    }


    nav ul li a:hover {
        background: linear-gradient(135deg, rgba(66, 133, 244, 0.08) 0%, rgba(52, 168, 83, 0.05) 100%) !important;
        color: #2563eb !important;
        padding-left: 28px;
        transform: translateX(4px);
        box-shadow: 0 2px 8px rgba(66, 133, 244, 0.15);
    }
    
    nav ul li a:hover::after {
        background: linear-gradient(90deg, #4285f4 0%, #34a853 100%);
        height: 3px;
        border-radius: 0 0 2px 2px;
    }

    nav ul li:last-child a {
        border-bottom: none;
    }

    /* 클릭/활성화 시 추가 언더바 효과 */
    nav ul li a:active::after,
    nav ul li a.active::after,
    nav ul li a[aria-current="page"]::after {
        background: linear-gradient(90deg, #4285f4 0%, #34a853 100%);
        height: 3px;
        border-radius: 0 0 2px 2px;
    }
    
    nav ul li a.active,
    nav ul li a[aria-current="page"] {
        background: linear-gradient(135deg, rgba(66, 133, 244, 0.1) 0%, rgba(52, 168, 83, 0.06) 100%) !important;
        font-weight: 600;
    }


    @keyframes sparkle {
        0%, 100% {
            transform: translateY(-50%) scale(1) rotate(0deg);
            opacity: 1;
        }
        50% {
            transform: translateY(-50%) scale(1.2) rotate(180deg);
            opacity: 0.8;
        }
    }

    .nav-dropdown {
        position: static;
        background: transparent;
        border: none;
        border-radius: 0;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }

    /* 장기렌트 세부메뉴 - 항상 표시 (토글 버튼 없음) */
    .long-term-menu .nav-dropdown {
        position: static;
        background: #f9fafb !important;
        border: none !important;
        border-radius: 0;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        display: block !important;
    }

    .long-term-menu .nav-dropdown li {
        margin: 0 !important;
        list-style: none;
        width: 100%;
    }

    /* 장기렌트 세부메뉴 링크 스타일 */
    .long-term-menu .nav-dropdown li a {
        display: flex;
        align-items: center;
        background: transparent !important;
        color: #6b7280 !important;
        font-weight: 400 !important;
        font-size: 14px !important;
        padding: 12px 20px 12px 40px !important;
        margin: 0 !important;
        text-align: left;
        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        transition: all 0.2s ease;
        position: relative;
    }

    .long-term-menu .nav-dropdown li a:hover {
        background: #f3f4f6 !important;
        color: #2563eb !important;
        padding-left: 44px !important;
        border-bottom: none !important;
    }
    
    .long-term-menu .nav-dropdown li a:active,
    .long-term-menu .nav-dropdown li a:focus {
        border-bottom: none !important;
        outline: none;
    }

    .brand a img {
        width: 80px;
        max-height: 60px;
        margin-top: 5px;
    }
    .member-menu {
        display: none !important;
    }
    .login-menu {
        display: none !important;
    }
    .temp-login {
        display: block !important;
    }
    .temp-signup {
        display: block !important;
    }
}
@media screen and (min-width: 991px) {
    .nav-list {
        display: block !important;
    }
    .nav-mobile {
        display: none !important;
    }
    .nav-dropdown {
        display: none !important;
    }
}

@media screen and (max-width: 968px) {
    /* 장기렌트 세부메뉴 - 항상 표시 (토글 버튼 없음) */
    .long-term-menu .nav-dropdown {
        display: block !important;
        background: #f9fafb !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .long-term-menu .nav-dropdown li {
        width: 100%;
        margin: 0 !important;
    }

    .long-term-menu .nav-dropdown li a {
        display: flex !important;
        align-items: center;
        background: transparent !important;
        color: #6b7280 !important;
        font-weight: 400 !important;
        font-size: 14px !important;
        border-radius: 0 !important;
        padding: 12px 20px 12px 40px !important;
        margin: 0 !important;
        text-align: left !important;
        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    .long-term-menu .nav-dropdown li a:hover {
        background: #f3f4f6 !important;
        color: #2563eb !important;
        padding-left: 44px !important;
        border-bottom: none !important;
    }
    
    .long-term-menu .nav-dropdown li a:active,
    .long-term-menu .nav-dropdown li a:focus {
        border-bottom: none !important;
        outline: none;
    }

    .nav-dropdown {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: none;
        border-radius: 12px;
        margin: 4px 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .sub-nav-bar {
        display: none !important;
    }
}

/* Additional responsive optimizations */
@media screen and (max-width: 480px) {
    .nav-list {
        width: calc(100% - 24px);
        max-width: none;
        top: 85px;
        border-radius: 20px;
    }
    
    #nav-toggle {
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        width: 52px;
        height: 52px;
        border-radius: 18px;
        box-shadow: 0 10px 28px rgba(66, 133, 244, 0.35);
    }
    
    #nav-toggle span,
    #nav-toggle span:before,
    #nav-toggle span:after {
        height: 3px;
        width: 22px;
    }
    
    nav ul li a {
        padding: 16px 20px;
        font-size: 15px;
        margin: 3px 8px;
        border-radius: 14px;
    }
    
    
    nav ul li ul li a {
        padding: 12px 20px 12px 44px;
        font-size: 13px;
    }
    
    /* 장기렌트 세부메뉴 - 항상 표시 (토글 버튼 없음, 작은 화면) */
    .long-term-menu .nav-dropdown {
        display: block !important;
        background: #f9fafb !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .long-term-menu .nav-dropdown li {
        width: 100%;
        margin: 0 !important;
    }

    .long-term-menu .nav-dropdown li a {
        display: flex !important;
        align-items: center;
        background: transparent !important;
        color: #6b7280 !important;
        font-weight: 400 !important;
        font-size: 14px !important;
        border-radius: 0 !important;
        padding: 12px 20px 12px 40px !important;
        margin: 0 !important;
        text-align: left !important;
        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        position: relative !important;
    }

    .long-term-menu .nav-dropdown li a:hover {
        background: #f3f4f6 !important;
        color: #2563eb !important;
        padding-left: 44px !important;
        border-bottom: none !important;
    }
    
    .long-term-menu .nav-dropdown li a:active,
    .long-term-menu .nav-dropdown li a:focus {
        border-bottom: none !important;
        outline: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .nav-list {
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
        /*border: 1px solid rgba(66, 133, 244, 0.2);*/
        box-shadow: 0 24px 48px rgba(66, 133, 244, 0.2), 
                    0 12px 24px rgba(0, 0, 0, 0.3);
    }
    
    /* 일반 메뉴 항목에 항상 언더바 표시 (다크 모드) */
    nav ul li a {
        color: #e5e7eb !important;
    }
    
    nav ul li a::after {
        background: #4b5563;
    }
    
    /* 장기렌트 메뉴 항목은 언더바 제거 (다크 모드) */
    .long-term-menu > a::after {
        display: none;
    }
    
    /* 로그인 메뉴 항목은 언더바 제거 (다크 모드) */
    .temp-login a::after,
    .temp-signup a::after {
        display: none;
    }


    nav ul li a:hover {
        background: linear-gradient(135deg, rgba(96, 165, 250, 0.1) 0%, rgba(59, 130, 246, 0.08) 100%) !important;
        color: #60a5fa !important;
        padding-left: 28px;
        transform: translateX(4px);
        box-shadow: 0 2px 8px rgba(96, 165, 250, 0.2);
    }
    
    nav ul li a:hover::after {
        background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 100%);
        height: 3px;
        border-radius: 0 0 2px 2px;
    }
    
    nav ul li a:active::after,
    nav ul li a.active::after,
    nav ul li a[aria-current="page"]::after {
        background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 100%);
        height: 3px;
        border-radius: 0 0 2px 2px;
    }
    
    nav ul li a.active,
    nav ul li a[aria-current="page"] {
        background: linear-gradient(135deg, rgba(96, 165, 250, 0.15) 0%, rgba(59, 130, 246, 0.1) 100%) !important;
        font-weight: 600;
    }
    
    nav ul li ul li a {
        color: #9ca3af !important;
    }
    
    /* 세부 메뉴 항목에는 언더바 없음 */
    nav ul li ul li a::after {
        display: none;
    }
    
    nav ul li ul li a:hover {
        color: #60a5fa !important;
        background-color: #374151 !important;
    }
    
    /* 장기렌트 세부메뉴 - 항상 표시 (토글 버튼 없음, 다크 모드) */
    .long-term-menu .nav-dropdown {
        display: block !important;
        background: #1f2937 !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .long-term-menu .nav-dropdown li {
        width: 100%;
        margin: 0 !important;
    }

    .long-term-menu .nav-dropdown li a {
        display: flex !important;
        align-items: center;
        background: transparent !important;
        color: #9ca3af !important;
        font-weight: 400 !important;
        font-size: 14px !important;
        border-radius: 0 !important;
        padding: 12px 20px 12px 40px !important;
        margin: 0 !important;
        text-align: left !important;
        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        position: relative !important;
    }

    .long-term-menu .nav-dropdown li a:hover {
        background: #374151 !important;
        color: #60a5fa !important;
        padding-left: 44px !important;
        border-bottom: none !important;
    }
    
    .long-term-menu .nav-dropdown li a:active,
    .long-term-menu .nav-dropdown li a:focus {
        border-bottom: none !important;
        outline: none;
    }
    
    #nav-toggle {
        background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
        box-shadow: 0 8px 24px rgba(66, 133, 244, 0.4);
    }
    
    #nav-toggle:hover {
        background: linear-gradient(135deg, #3367d6 0%, #2d8f47 100%);
        transform: translateY(-50%) scale(1.1);
        box-shadow: 0 12px 32px rgba(66, 133, 244, 0.5);
    }
    
    #nav-toggle span,
    #nav-toggle span:before,
    #nav-toggle span:after {
        background: #ffffff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .nav-backdrop {
        background: linear-gradient(135deg, rgba(66, 133, 244, 0.15) 0%, rgba(52, 168, 83, 0.08) 100%);
    }
}

/* ===== 간편상담신청 폼 스타일링 ===== */
/* 입력 필드 호버 및 포커스 효과 */
.form-control:focus {
    border-color: #4285f4 !important;
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1) !important;
    transform: translateY(-2px) !important;
}

.form-control:hover {
    border-color: #4285f4 !important;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.15) !important;
    transform: translateY(-1px) !important;
}

/* 상담신청 버튼 호버 효과 */
.car_card_button:hover {
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 12px 32px rgba(66, 133, 244, 0.4) !important;
}

.car_card_button:active {
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 6px 16px rgba(66, 133, 244, 0.3) !important;
}

/* 체크박스 호버 효과 */
input[type="checkbox"]:hover {
    transform: scale(1.1) !important;
}

/* 폼 컨테이너 호버 효과 */
.bg-light.pinside30:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 24px 48px rgba(66, 133, 244, 0.15), 0 12px 24px rgba(0,0,0,0.08) !important;
}

/* 모바일에서 폼 컨테이너 호버 효과 */
@media screen and (max-width: 768px) {
    .bg-light.pinside30:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 20px 40px rgba(66, 133, 244, 0.12), 0 8px 16px rgba(0,0,0,0.06) !important;
    }
}

#nav-toggle {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    padding: 10px;
    z-index: 1000;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: none;
    box-shadow: 0 8px 24px rgba(66, 133, 244, 0.3);
}

#nav-toggle:hover {
    background: linear-gradient(135deg, #3367d6 0%, #2d8f47 100%);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 12px 32px rgba(66, 133, 244, 0.4);
}

#nav-toggle:active {
    transform: translateY(-50%) scale(0.95);
}

#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
    cursor: pointer;
    border-radius: 3px;
    height: 3px;
    width: 20px;
    background: #ffffff;
    position: absolute;
    display: block;
    content: '';
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#nav-toggle span:before {
    top: -6px;
}

#nav-toggle span:after {
    bottom: -6px;
}

#nav-toggle.active span {
    background-color: transparent;
}

#nav-toggle.active span:before, 
#nav-toggle.active span:after {
    top: 0;
}

#nav-toggle.active span:before {
    transform: rotate(45deg);
}

#nav-toggle.active span:after {
    transform: rotate(-45deg);
}

article {
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px;
}

.login-menu {
    display: flex;
    align-items: center;
}

.login-menu a {
    display: block;
    padding: 0 10px;
    line-height: 70px;
    background-color: #262626;
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: none;
}

.member-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-login:hover,
.member-dropdown li a:hover {
    color: #ff2e3c !important;
}
.nav-member-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 24px;
    transition: color 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
    margin-right: 20px;
}
.nav-member-icon:hover {
    background: transparent !important;
    color: #ff2e3c !important;
}

.member-dropdown {
    display: none;
    position: absolute;
    top: 48px;
    right: 0;
    background: #262626;
    border: none;
    border-radius: 0;
    min-width: 100px;
    box-shadow: none;
    z-index: 1000;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 메뉴 안의 링크(a) 스타일 - .nav-dropdown과 동일하게 */
.member-dropdown li a {
    display: block;
    padding: 15px 20px;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
    transition: color 0.2s;
    border-bottom: 1px solid #333;
}

.member-dropdown li:last-child a {
    border-bottom: none;
}

.member-dropdown li a:hover {
    color: #e60023 !important;
    background-color: transparent;
}

/* ★★★ 가장 중요한 규칙 ★★★ */
/* 아이콘과 드롭다운 메뉴를 포함하는 전체(.member-hover-menu)에
   마우스를 올리면, 숨겨놨던 .member-dropdown을 보여준다! */
.member-hover-menu:hover .member-dropdown {
    display: block;
}

.member-dropdown li .as-link {
    display: block;
    padding: 15px 20px;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
    transition: color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%; /* 링크와 같은 영역 차지 */
}

.member-dropdown li .as-link:hover {
    color: #e60023 !important;
    background-color: transparent;
}

.member-hover-menu {
    position: relative;
    padding-bottom: 10px;
}

.sub-nav-bar {
    background: #363636;
    border-bottom: 1px solid #e9ecef;
    padding: 0;
    position: relative;
    z-index: 999; /* member-dropdown의 z-index보단 낮아야함 */
    height: 30px; /* 세로 길이 */
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
}

.sub-nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%; /* 부모 높이에 맞춤 */
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
}

.sub-nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%; /* 부모 높이에 맞춤 */
    align-items: center; /* 수직 중앙 정렬 */
}

.sub-nav-list li {
    margin: 0;
    display: inline-flex;
    align-items: center;
    height: 30px;
}

.sub-nav-list li a {
    display: inline-flex;
    align-items: center; /* 텍스트 수직 중앙 정렬 */
    height: auto; /* 높이를 서브 네비 바와 동일하게 */
    line-height: 1;
    padding: 0 15px; /* 좌우 패딩만 유지 */
    color: #ffffff; /* 텍스트 색상을 흰색으로 */
    text-decoration: none;
    font-weight: 500;
    font-size: 14px; /* 폰트 크기 약간 줄임 */
    transition: color 0.3s ease, background-color 0.3s ease;
    border-radius: 8px;
    margin: 0 5px; /* 좌우 간격 */
}

.sub-nav-list li a:hover {
    color: #4285f4;
    background-color: rgba(66, 133, 244, 0.1);
}

.sub-nav-list li:nth-child(3) {
    margin-right: 118px; /* 오른쪽에서 얼마나 띄워둘지 */
}


@charset "UTF-8";

/* CSS Document */

/*------------------------------------------------------------------

Template Name:      Hair Salon Website Templates Free Download
Version:            1.0.0
Created Date:       30/03/2017
Author:             Jitu Chauhan

------------------------------------------------------------------
[CSS Table of contents]

1.  Body / Typography
2.  Form Elements
3.  Buttons
4.  General / Elements
        4.1 Section space
        4.2 Margin space
        4.3 Padding space
        4.4 Background color
        4.5 Features
        4.7 Call to actions
        4.8 Img hover effect
        4.9 Icon
        -----------------------
5. Header / Navigations
        5.1 Header Regular
        5.2 Header Transparent
        5.3 Navigation Regular
        5.4 Page Header

        -----------------------
6. Slider
        6.1 Slider
        -----------------------
7. Content
8. Footers
9. Pages
    9.1  Service
    9.2  Service Single / sidebar with sidenav
    9.3  Testimonial
    9.4  Contact us
    9.5  Styleguide
    ------------------------------------
10.Blog
    10.1 Blog Default
    10.2 Blog Single
    ------------------------------------
11.Sidebar
    11.1 Widget
    ------------------------------------

13. Media Queries

------------------------------------------------------------------*/

/* Web Fonts */
/*@font-face {*/
/*    font-family: 'HangeulNuri-Bold';*/
/*    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/HangeulNuri-Bold.woff') format('woff');*/
/*    font-weight: normal;*/
/*    font-style: normal;*/
/*}*/
@font-face {
    font-family: 'NanumSquareNeo-Variable';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/*-----------------------------------
    1. Body / Typography
-----------------------------------*/

body { font-size: 1.4rem; background-color: #fff; color: #000000; font-family: 'NanumSquareNeo'; line-height: 1.75rem; font-weight: 300;
    /*-ms-overflow-style: none;*/
}
/*::-webkit-scrollbar { display: none; }*/

::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-thumb {
    background: #a9a9a9;
}

h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0 0 0.625rem;
    color: #000000; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1 { font-size: 3.3rem; line-height: 5rem; }
h2 { font-size: 2.2rem; line-height: 32px; }
h3 { font-size: 2rem; line-height: 28px; }
h4 { font-size: 1.8rem; line-height: 4.5rem; margin-bottom: 10px; }
h5 { font-size: 1.5rem; }
h6 { font-size: 1rem; }
p { font-size: 1.5rem; line-height: 2.5rem; margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0px; }
ul, ol { margin: 0; }
ul li, ol li { }
a { color: #000000; text-decoration: none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
a:focus, a:hover { text-decoration: none; color: #e74c3c; }
b, strong { font-weight: 600; }
.listnone { list-style: none; padding: 0px; }
.lead { font-size: 21px; color: #3c3c3c; font-weight: 400; }
.italic { font-style: italic; }
.small-text { color: #b4b1ac; font-size: 12px; }
.text-caps { text-transform: uppercase; letter-spacing: 2px; font-size: 0.875rem; }
/*::selection { background: #e74c3c; color: #333; }*/
h3 small { font-weight: 400; line-height: 1; color: #e74c3c; font-size: 0.875rem; }
hr { margin-top: 30px; margin-bottom: 30px; border: 0; border-top: 1px solid #e2dcdb; }
blockquote { padding: 50px; margin: 0px; font-size: 1.375rem; line-height: 32px; color: #3c3c3c; font-style: italic; border-left: 5px solid #372d2b; }

h1.index-text,
h2.index-text,
h3.index-text {
    font-weight: 300;
    margin: 0;
}
h4.index-text,
h5.index-text  {
    font-weight: 300;
    margin: 0;
    line-height: 2rem;
}
h1.index-text {
    font-size: 5vh;
    line-height: 6rem;
    color: #fff;
}
h2.index-text {
    font-size: 1.8rem;
    line-height: 3.5rem;
    color: #FFFFFF;
}
h3.index-text {
    font-size: 1.5rem;
    line-height: 3rem;
    color: #fff;
}
h4.index-text {
    font-size: 1.2rem;
    line-height: 2.5rem;
    margin-bottom: 1.5rem;
}
p.index-text {
    line-height: 2rem;
    font-size: 1.2rem;
}

/*-------------- align ------------*/

/* =WordPress Core
-------------------------------------------------------------- */

.alignnone { margin: 5px 20px 20px 0; }
.aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; }
.alignright { float: right; margin: 0px 0 30px 30px; }
.alignleft { float: left; margin: 0px 30px 0px 0; }
a img.alignright { float: right; margin: 0px 0 30px 30px; }
a img.alignnone { margin: 5px 20px 20px 0; }
a img.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%;    /* Image does not overflow the content area */ padding: 5px 3px 10px; text-align: center; }
.wp-caption.alignnone { margin: 5px 20px 20px 0; }
.wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; }

/*-----------------------------------
    2. Form css
-----------------------------------*/
label { }
.control-label { color: #474747; font-weight: 400; font-size: 17px; text-transform: uppercase; }
.span-control { display: inline-block; margin-right: 20px; width: 100px; height: 40px;}
.span-input { /* 추후 뭘 설정할지 고민하면 좋을듯 */ }
.form-control { width: 100%; height: 50px; padding: 6px 12px; font-size: 1.3rem; line-height: 1.42857143; color: #000; background-color: #fff; border: 1px solid #e2dcdb; background-image: none; border-radius: 0px; -webkit-box-shadow: inset 0 0px 0px rgba(255, 255, 255, .075); box-shadow: inset 3px 3px 3px rgba(255, 255, 255, .075); margin-bottom: 15px; }
.form-control-span { width: 100%; height: 50px; padding: 6px 12px; font-size: 1.3rem; line-height: 1.42857143; color:#000; background-color: #fff; border: 1px solid #e2dcdb; background-image: none; border-radius: 0px; -webkit-box-shadow: inset 0 0px 0px rgba(255, 255, 255, .075); box-shadow: inset 3px 3px 3px rgba(255, 255, 255, .075); margin-bottom: 15px; }
.form-control-span2 { width: 60%; height: 50px; padding: 6px 12px; font-size: 1.25rem; line-height: 1.42857143; color:#000; background-color: #fff; border: 1px solid #e2dcdb; background-image: none; border-radius: 0px; -webkit-box-shadow: inset 0 0px 0px rgba(255, 255, 255, .075); box-shadow: inset 3px 3px 3px rgba(255, 255, 255, .075); margin-bottom: 15px; }
.form-control-span3 { width: 40%; height: 50px; padding: 6px 12px; font-size: 1.3rem; line-height: 1.42857143; color:#000; background-color: #fff; border: 1px solid #e2dcdb; background-image: none; border-radius: 0px; -webkit-box-shadow: inset 0 0px 0px rgba(255, 255, 255, .075); box-shadow: inset 3px 3px 3px rgba(255, 255, 255, .075); margin-bottom: 15px; }
.form-control-select { margin-right: 10px; width: 35%; height: 50px; padding: 6px 12px; font-size: 1.3rem; line-height: 1.42857143; color: #000; background-color: #fff; border: 1px solid #e2dcdb; background-image: none; border-radius: 0px; -webkit-box-shadow: inset 0 0px 0px rgba(255, 255, 255, .075); box-shadow: inset 3px 3px 3px rgba(255, 255, 255, .075); margin-bottom: 15px; }
.form-control-select2 { margin-right: 0px; width: 60%; height: 50px; padding: 6px 12px; font-size: 1.3rem; line-height: 1.42857143; color: #000; background-color: #fff; border: 1px solid #e2dcdb; background-image: none; border-radius: 0px; -webkit-box-shadow: inset 0 0px 0px rgba(255, 255, 255, .075); box-shadow: inset 3px 3px 3px rgba(255, 255, 255, .075); margin-bottom: 15px; }
.form-control-text { width: 70%; height: 50px; padding: 6px 12px; font-size: 15px; line-height: 1.42857143; color: #000; background-image: none; border-radius: 0px; -webkit-box-shadow: inset 0 0px 0px rgba(255, 255, 255, .075); box-shadow: inset 3px 3px 3px rgba(255, 255, 255, .075); margin-bottom: 15px; }
.form-control:focus { border-color: #bab6ae; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .075), 0 0 8px rgba(255, 255, 255, .6); box-shadow: inset 0 3px 3px rgba(255, 255, 255, .075), 0 0 8px rgba(235, 237, 238, .6); background-color: #fffefd; }
.textarea.form-control { background-color: #f6f8f9; height: auto; }
.required { }
.form-news-letter .form-control { float: left; width: 75%; margin-right: 10px; }
.form-group { margin-bottom: 10px; }
.get-in-touch { }
.get-in-touch .form-control { margin-bottom: 10px; }
.input-group-addon { padding: 6px 12px; font-size: 1.5rem; font-weight: 400; line-height: 1; color: #bdb6b5; text-align: center; background-color: #fff; border: 1px solid #d7cfce; border-radius: 10px; }

.contain-word-middle-div:after {
    content: "";
    display: inline-block;
    height: 60%;
    vertical-align: auto;
}
.contain-word-div:after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
}

.control-label {
    display: inline-block;
    vertical-align: bottom;
}

/*-----------------------------------
    3. Buttons
-----------------------------------*/
.btn1 { display: inline-block; padding: 10px 30px; margin: 2.5px; font-size: 13px; font-weight: 800; letter-spacing: 1px; line-height: 1.42857143; text-align: center; border: none; text-transform: uppercase; border-radius: 10px; font-family: 'NanumSquareNeo';
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.btn1-default { color: #fff; background-color: dodgerblue; }
.btn1-default:hover { color: #fff; background-color: blue; border-color: blue; }
.btn1-default.focus, .btn1-default:focus { color: #fff; background-color: blue; border-color: blue; }
.btn1-primary { background-color: dodgerblue; color: #fff; }
.btn1-primary:hover { background-color: blue; color: #fff; }
.btn1-primary.focus, .btn1-primary:focus { }
.btn1-white { color: #372d2b; background-color: #fff; border: 1px solid #fff; }
.btn1-white:hover { background-color: #e7a625; border-color: #e7a625; color: #fff; }
.btn1-white.focus, .btn1-white:focus { background-color: #e7a625; border-color: #e7a625; color: #fff; }
.btn1-link { color: #372d2b; text-transform: uppercase; text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: 2px; padding-bottom: 2px; }
.btn1-link:hover { color: #e7a625; font-weight: 700; text-decoration: none; }
.btn1-lg { font-size: 14px; padding: 20px 30px; }
.btn1-sm { font-size: 12px; padding: 5px 10px; }
.btn1-xs { font-size: 12px; padding: 5px 7px; }
.btn2-default { color: #fff; background-color:#13a0b2; }
.btn2-default:hover { color: #fff; background-color: #e7a625; border-color: #e7a625; }
.btn2-default.focus, .btn2-default:focus { color: #fff; background-color: #e7a625; border-color: #e7a625; }

.btn3-default { color: #fff; background-color:#999999; }
.btn3-default:hover { color: #fff; background-color: #13a0b2; border-color: #e7a625; }
.btn3-default.focus, .btn3-default:focus { color: #fff; background-color: #e7a625; border-color: #e7a625; }


.btn4-default { color: black; background-color:#fff; border: 1px solid #13a0b2; }
.btn4-default:hover { color: #fff; background-color: #13a0b2; border-color: #13a0b2; }
.btn4-default.focus, .btn4-default:focus { color: #fff; background-color: #13a0b2; border-color: #13a0b2; }
.btn4-default:active {
    color: #fff; background-color: #13a0b2; border-color: #13a0b2;
}


.btn5-default {  color: black; background-color:#b7e5d7; }
.btn5-default:hover {  color: black; background-color: #fff; border:  1px solid #d82229; }
.btn5-default.focus, .btn2-default:focus {  color: black; background-color: #fff; border: 1px solid #d82229; }

.btn-clicked {
    color: #fff; background-color: #13a0b2; border-color: #13a0b2;
}


/*-----------------------------------
    4. General / Elements
-----------------------------------*/

/*-----------------------
    4.1 Section space :
-------------------------*/

/*Note: Section space help to create top bottom space;*/

.content { }
.space-small { padding-top: 40px; padding-bottom: 40px; }
.space-medium { padding-top: 100px; padding-bottom: 100px; }
.space-large { padding-top: 120px; padding-bottom: 120px; }
.space-ex-large { padding-top: 140px; padding-bottom: 140px; }

/*----------------------
   4.2 Margin Space
-----------------------*/
.mb0 { margin-bottom: 0px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb35 { margin-bottom: 35px; }
.mb40 { margin-bottom: 40px; }
.mb60 { margin-bottom: 60px; }
.mb80 { margin-bottom: 80px; }
.mb100 { margin-bottom: 100px; }
.mt0 { margin-top: 0px; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt60 { margin-top: 60px; }
.mt70 { margin-top: 70px; }
.mt80 { margin-top: 80px; }
.mt100 { margin-top: 100px; }

/*----- less margin space from top --*/
.mt-20 { margin-top: -20px; }
.mt-40 { margin-top: -40px; }
.mt-60 { margin-top: -60px; }
.mt-80 { margin-top: -80px; }

/*-----------------------
   4.3 Padding space
-------------------------*/

.reservationSide4-10 { padding: 4px 10px; }

.nopadding { padding: 0px; }
.nopr { padding-right: 0px; }
.nopl { padding-left: 0px; }
.pinside10 { padding: 10px; }
.pinside20 { padding: 20px; }
.pinside30 { padding: 30px; }
.pinside40 { padding: 40px; }
.pinside50 { padding: 50px; }
.pinside60 { padding: 60px; }
.pinside80 { padding: 80px; }
.pinside130 { padding: 130px; }
.pdt10 { padding-top: 10px; }
.pdt20 { padding-top: 20px; }
.pdt30 { padding-top: 30px; }
.pdt40 { padding-top: 40px; }
.pdt60 { padding-top: 60px; }
.pdt80 { padding-top: 80px; }
.pdb10 { padding-bottom: 10px; }
.pdb20 { padding-bottom: 20px; }
.pdb30 { padding-bottom: 30px; }
.pdb40 { padding-bottom: 40px; }
.pdb60 { padding-bottom: 60px; }
.pdb80 { padding-bottom: 80px; }
.pdl10 { padding-left: 10px; }
.pdl20 { padding-left: 20px; }
.pdl30 { padding-left: 30px; }
.pdl40 { padding-left: 40px; }
.pdl60 { padding-left: 60px; }
.pdl80 { padding-left: 80px; }
.pdr10 { padding-right: 10px; }
.pdr20 { padding-right: 20px; }
.pdr30 { padding-right: 30px; }
.pdr40 { padding-right: 40px; }
.pdr60 { padding-right: 60px; }
.pdr80 { padding-right: 80px; }

/*--------------------------------
4.4 Background & Block color
----------------------------------*/
.bg-light { background-color: #f8f6f2; }
.bg-white { background-color: #ffffff; }
.bg-primary { }
.bg-default { }
.bg-white { background-color: #fff; }
.outline { border: 1px solid #f3f0eb; }
.section-title { }
.title { color: #383433; }
.small-title { color: #84837f; font-size: 13px; letter-spacing: 1px; margin-bottom: 20px; }
.text-white { color: #fff; }
.primary-sidebar { }
.secondary-sidebar { }
.well-block { background-color: #fff; padding: 40px; }

/*--------------------------------
4.5 Features Block
----------------------------------*/
.feature { }
.feature-icon { margin-bottom: 20px; }
.feature-left { }
.feature-left .feature-icon { float: left; }
.feature-left .feature-content { padding-left: 80px; }
.feature-center { }
.feature-center .feature-icon { }
.feature-center .feature-content { }
.feature-inner { }
.feature-outline { }
.thumbnail-block { }
.thumbnail-img { }
.thumbnail-content { }
.thumbnail-inner { }
.thumbnail-outline { }

/*----------------- video ---------------*/
.video-section { position: relative; }
.video-img { position: relative; }
.video-img img { width: 100%; }
.video-action { position: absolute; top: 40%; left: 47%; }

/*--------------------------------
4.6 Bullet
----------------------------------*/
.bullet { position: relative; padding-left: 15px; color: #78807e; line-height: 32px; }
.bullet-double-right li:before { font-family: FontAwesome; display: block; position: absolute; left: 0; width: 13px; font-size: 14px; color: #78807e; content: "\f101"; }

/*--------------------------------
4.7 Call to actions
----------------------------------*/
.cta-block { }
.cta-title { }
.cta-text { text-transform: uppercase; font-size: 32px; margin-bottom: 0; margin-top: 10px; }
.cta-content { }
.cta-call, .cta-mail { text-align: right; }
.cta-section { padding-top: 115px; padding-bottom: 115px; }/* background:  linear-gradient(rgba(202, 182, 178, 0.8), rgba(202, 182, 178, 0.8)), rgba(202, 182, 178, 0.8)*/
.cta-caption { }
.cta-title { font-size: 36px; color: #fff; line-height: 58px; margin-bottom: 10px; letter-spacing: 1px; text-transform: uppercase; }
.cta-text { }

/*--------------------------------
4.8 Image Hover Effect
----------------------------------*/

.imgzoom {
    margin: 0px auto;
    position: relative;
    overflow: hidden;
}
.imgzoom img {
    transition: .3s;
}
.imgzoom:hover img {
    transform: scale(1.1);
}

/*--------------------------------
4.9 Icon
----------------------------------*/
.icon { }
.icon-1x { font-size: 18px; }

/* default icon size of font*/
.icon-2x { font-size: 38px; }
.icon-4x { font-size: 65px; }
.icon-6x { font-size: 88px; }
.icon-8x { font-size: 108px; }
.icon-default { color: #aa9144; }
.icon-primary { color: #474954; }
.icon-secondary { color: #fff; }
.icon-white { color: #fff; }


/*--------------------------------
4.10 table
----------------------------------*/
/*tr>td {*/
/*    width: 100%;*/
/*    float: left;*/
/*}*/

/*--------------------------------
5 Header / Navigations
----------------------------------*/

/*--------------------
    5.1 Header Regular
   ----------------------*/

.header-collapse { background-color: rgba(0, 0, 0, 0.64); }
.logo { }
.header { padding-top: 30px; padding-bottom: 20px; }
.top-text { text-align: right; }
.top-text .text-block { padding-left: 20px; color: #fff; line-height: 18px; }
.call-block { }
.call-no { }
.mail-block { }
.mail-text { }
.time-block { }
.time-text { }
.call-block, .mail-block, .time-block { }

/*--------------------------
    5.2 Navigations Regular
   ----------------------------*/
.hero-caption { padding-top: 100px; padding-bottom: 100px; }
.hero-title { font-size: 46px; color: #fff; line-height: 58px; margin-bottom: 30px; letter-spacing: -1px; }
.hero-text { }
.navigation { float: right; }
.is-sticky .header { border-bottom: 1px solid #eae7e2; }
#navigation, #navigation ul, #navigation ul li, #navigation ul li a, #navigation #menu-button { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#navigation:after, #navigation > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
#navigation #menu-button { display: none; }
#navigation { font-family: 'NanumSquareNeo'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
#navigation > ul > li { float: left; }
#navigation.align-center > ul { font-size: 0; text-align: center; }
#navigation.align-center > ul > li { display: inline-block; float: none; }
#navigation.align-center ul ul { text-align: left; }
#navigation.align-right > ul > li { float: right; }
#navigation > ul > li > a { padding: 15px; font-size: 13px; color: #fff; text-decoration: none; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
#navigation > ul > li:hover > a { color: #ffffff; background-color: transparent; }
#navigation > ul > li.has-sub > a { padding-right: 32px; }

/*#navigation > ul > li.has-sub > a:after {
 position: absolute;
 top: 22px;
 right: 11px;
 width: 8px;
 height: 2px;
 display: block;
 background: #dddddd;
 content: '';
}*/
#navigation > ul > li.has-sub > a:before { position: absolute; right: 14px; font-family: FontAwesome; content: "\f107"; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; }

/*#navigation > ul > li.has-sub:hover > a:before {
 top: 23px;
 height: 0;
}*/
#navigation ul ul { position: absolute; left: -9999px; z-index: 999;}
#navigation.align-right ul ul { text-align: right; }
#navigation ul ul li { height: 0; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; }
#navigation li:hover > ul { left: auto; }
#navigation.align-right li:hover > ul { left: auto; right: 0; }
#navigation li:hover > ul > li { height: 46px; }
#navigation ul ul ul { margin-left: 100%; top: 0; }
#navigation.align-right ul ul ul { margin-left: 0; margin-right: 100%; }
#navigation ul ul li a { padding: 16px; width: 170px; font-size: 13px; text-decoration: none; color: black; font-weight: 600; background: white; text-transform: uppercase; border-bottom: 1px solid #cc9019; }
#navigation ul ul li:last-child > a, #navigation ul ul li.last-item > a { border-bottom: 0; }
#navigation ul ul li:hover > a, #navigation ul ul li a:hover { color: white; background-color: #2b2929f0; }
#navigation ul ul li.has-sub > a:after { position: absolute; top: 16px; right: 11px; width: 8px; height: 2px; display: block; background: #dddddd; content: ''; }
#navigation.align-right ul ul li.has-sub > a:after { right: auto; left: 11px; }
#navigation ul ul li.has-sub > a:before { position: absolute; top: 13px; right: 14px; display: block; width: 2px; height: 8px; background: #dddddd; content: ''; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; }
#navigation.align-right ul ul li.has-sub > a:before { right: auto; left: 14px; }
#navigation ul ul > li.has-sub:hover > a:before { top: 17px; height: 0; }
#navigation.small-screen { width: 50%; }
#navigation.small-screen ul { width: 100%; display: none; }
#navigation.small-screen.align-center > ul { text-align: right; }
#navigation.small-screen ul li { width: 100%; border-top: 1px solid #474747; }
#navigation.small-screen ul ul li, #navigation.small-screen li:hover > ul > li { height: auto; }
#navigation.small-screen ul li a, #navigation.small-screen ul ul li a { width: 100%; border-bottom: 0; padding: 20px 15px; background-color: #2b2929; color: white; }
#navigation.small-screen > ul > li { float: none; }
#navigation.small-screen ul ul li a { padding-left: 25px; }
#navigation.small-screen ul ul ul li a { padding-left: 35px; }
#navigation.small-screen ul ul li a { color: #474747; background: white; }
#navigation.small-screen ul ul li:hover > a, #navigation.small-screen ul ul li.active > a { color: #474747; }
#navigation.small-screen ul ul, #navigation.small-screen ul ul ul, #navigation.small-screen.align-right ul ul { position: relative; left: 0; width: 100%; margin: 0; text-align: left; }
#navigation.small-screen > ul > li.has-sub > a:after, #navigation.small-screen > ul > li.has-sub > a:before, #navigation.small-screen ul ul > li.has-sub > a:after, #navigation.small-screen ul ul > li.has-sub > a:before { display: none; }
#navigation.small-screen #menu-button { display: block; padding: 15px; color: #ffffff; cursor: pointer; font-size: 12px; text-transform: uppercase; font-weight: 700; margin-top: 10px; }
#navigation.small-screen #menu-button:after { position: absolute; top: 16px; right: 17px; display: block; height: 12px; width: 20px; border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff; content: ''; }
#navigation.small-screen #menu-button:before { position: absolute; top: 21px; right: 17px; display: block; height: 2px; width: 20px; background: #ffffff; content: ''; }
#navigation.small-screen #menu-button.menu-opened:after { top: 23px; border: 0; height: 2px; width: 15px; background: white; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
#navigation.small-screen #menu-button.menu-opened:before { top: 23px; background: white; width: 15px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
#navigation.small-screen .submenu-button { position: absolute; z-index: 99; right: 0; top: 0; display: block;  height: 53px; width: 53px; cursor: pointer; }
#navigation.small-screen .submenu-button.submenu-opened { }
#navigation.small-screen ul ul .submenu-button { height: 34px; width: 34px; }
#navigation.small-screen .submenu-button:after { position: absolute; top: 25px; right: 20px; width: 12px; height: 2px; display: block; background: white; content: ''; }
#navigation.small-screen ul ul .submenu-button:after { top: 15px; right: 13px; }
#navigation.small-screen .submenu-button.submenu-opened:after { background: white; }
#navigation.small-screen .submenu-button:before { position: absolute; top: 20px; right: 25px; display: block; width: 2px; height: 12px; background: white; content: ''; }
#navigation.small-screen ul ul .submenu-button:before { top: 12px; right: 16px; }
#navigation.small-screen .submenu-button.submenu-opened:before { display: none; }
#navigation.small-screen.select-list { padding: 5px; }

/*----------------------------------------------
    5.4 Page Header
----------------------------------------------*/
.page-header { background: linear-gradient(rgba(36, 39, 38, 0.5), rgba(36, 39, 38, 0.5)), rgba(36, 39, 38, 0.5)  no-repeat center; background-size: cover; margin: 0; border-bottom: none; padding-bottom: 0px; }
.page-caption { padding: 0; position: relative; z-index: 1; color: #fff; text-align: center; }
.page-title { color: #fff; font-size: 40px; font-weight: 400; }
.breadcrumb { }
.breadcrumb>.active { }
.page-breadcrumb { }
.page-breadcrumb .breadcrumb { background-color: transparent; margin-bottom: 0px; font-size: 12px; text-transform: uppercase; }

/*-----------------------------------
    6. Slider
-------------------------------------*/

/*-----------------------------------
7. Content
-------------------------------------*/

.content { padding-bottom: 100px; }


/*-----------------------------------
8. Footer
-------------------------------------*/
.footer { background-color: #0e0c0b; padding-top: 60px; padding-bottom: 60px; }
.footer-widget > p { color: #FFFFFF;}
.footer-widget > h2, .footer-widget > h4, .footer-widget > h5 { color: #FFFFFF; }
.footer-widget .widget-title {
    color: #fff;
    /*font-weight: 600; */
    padding-bottom: 30px;
    letter-spacing: 1.75px;
}
.footer-widget { align-content: center;}
.footer-widget ul { }
.footer-widget li { }
.footer-widget li a { }
.footer-widget li a:hover { }
.footer-link { }
.footer-social { }
.footer-social ul { float: right; }
.footer-social ul li { float: left; margin-left: 15px; }
.footer-social ul li a i { color: #acacac; font-size: 20px; }
.footer-social ul li a:hover i { color: #e7a625; }
.footer .contact li { }
.footer .contact li i { }

/*-------------- tiny footer ------------*/
.tiny-footer { padding-top: 19px; padding-bottom: 9px; font-size: 12px; background-color: #000000; color: #FFFFFF; }

/*-----------------------------------
9. Pages
-------------------------------------*/

/*-------------------------
 9.1 About us
---------------------------*/

.about-text { line-height: 40px; }
.about-block { }
.about-img { }
.about-info { }
.about-contact { font-size: 18px; color: #8c9292; font-weight: 600; margin-left: 5px; }
.counter_block { }
.counter_box { border-bottom: 1px solid #eee; padding: 40px 0px; }
.counter_number { font-weight: 900; margin-bottom: 0px; }
.counter_text { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; }

/*-------------------------
 9.2  Service / single / sidebar
--------------------------*/

/* service section */

.service-block { margin-bottom: 30px; }
.service-text-main { width: 100%; height: 100px; }
.service-text-mobile { width: 70%; height: 220px; }
.service-img { margin-bottom: 30px; }
.service-img img { width: 100%; min-height: 300px;}
.service-img-main img { width: 50%; height: 150px;}
#service-img-a img:hover { width: 400px; color: blue; background: red;}
/*.service-img a:hover img { width: 100%; min-height: 360px;}*/
.service-content { }
.service-caption { }
.service-title { font-size: 20px; color: #212330; text-transform: uppercase; text-align: center; letter-spacing: 1px; }
.service-icon { }
.service-icon img { }
.service-single-block { }
.service-single-img { }
.service-single-content { }
.price { font-size: 24px; color: #aa9144; font-weight: 600; font-family: 'NanumSquareNeo'; }

/*-----------------------------------------
    service side-nav
   ------------------------------------------*/
.sidenav { background-color: #fff; margin-bottom: 30px; }
.sidenav li { position: relative; }
.sidenav li:last-child { margin-bottom: 0px; }
.sidenav li a { display: block; line-height: 14px; color: #2b2d2c; font-weight: 600; font-size: 13px; background-color: #f3f0eb; padding: 20px; margin-bottom: 1px; text-transform: uppercase; font-family: 'NanumSquareNeo'; letter-spacing: 1px; }
.sidenav li a:hover { color: #fff; background-color: #cec8c1; }
.sidenav li a.active, .sidenav ul li a.active .sidenav ul li i { color: #fff; background-color: #cec8c1; }
.sidenav li a:focus { color: #cec8c1; }
.sidenav li.active a:before { color: #cec8c1; }

/*.sidenav li a:before { margin-right: 10px; font-family: FontAwesome; position: absolute; width: 20px; font-size: 12px; color: #7d7f89; content: "138"; left: 10px; }
.sidenav li a:hover:before { color: #bb0349; }*/
.arrow-circle-right li:last-child { border-bottom: 0px solid #d2cfcb; }
.arrow-circle-right li a:before { margin-right: 10px; font-family: FontAwesome; position: absolute; left: 20px; width: 20px; font-size: 16px; color: #5a5a5a; content: "\f105"; font-weight: normal; }

/*--------------------------
  9.5  Testimonial
---------------------------*/
.quote-left { float: left; font-size: 36px; color: #d2cfcb; }
.testimonial-block { }
.testimonial-img { }
.testimonial-img img { }
.testimonial-content { font-weight: 400; padding-left: 100px; }
.testimonial-info { text-align: right; }
.testimonial-text { }
.testimonial-name { font-size: 16px; color: #383433; margin-right: 10px; font-weight: 600; }
.testimonial-meta { }

/*--------------------------
  9.5  Case Study
---------------------------*/
.case-study-block { margin-bottom: 30px; }
.case-study-pic { }
.case-study-info { }

/*-------------------------
  9.8 Contact us
---------------------------*/
.contact-block { }
.contact-block ul { }
.contact-block ul li { }
.contact-block ul li i { }
.contact-block .contact-text { }
.contact-info { }
.contact-info ul { }
.contact-info li { }
.contact-info li:last-child { }
.contact-info li i { }
.map { }
.contact-social { text-align: center; }
.contact-social { }
.contact-social a i { font-size: 14px; color: #c12d17; }
.contact-social a i:hover { color: #8e7424; }
address { margin-bottom: 20px; font-style: normal; line-height: 1.42857143; }

/*------------------------
 10. Blog pages
--------------------------*/
.sidebar { }
.post-block, .post-quote { position: relative; margin-bottom: 30px; }

/*-- use for thumbnail --*/
.post-holder { position: relative; margin-bottom: 30px; }

/*-- for single post page --*/
.post-img { position: relative; }
.post-img img { width: 100%; }
.post-title { }
.post-content { padding-top: 40px; padding-right: 40px; }
.post-header { }

/*-------- Post meta --------*/
.meta { font-weight: 600; font-size: 14px; text-transform: capitalize; margin-bottom: 20px; font-family: 'NanumSquareNeo'; color: #beb6b4; }
.meta-link { color: #383433; }
.meta-date { }
.meta-user { }
.meta-comment { }
.meta-author { font-weight: 600; color: #beb6b4; text-transform: uppercase; font-size: 12px }
.meta-cat { }
.meta-date, .meta-author, .meta-comment, .meta-cat { display: inline-block; margin-right: 10px; }
.meta-link { }
.meta-tags { }

/*-------- Post Type --------*/
.post-gallery { }
.post-video { }
.post-video .video-sign { }
.post-audio { }
.post-quote { background-color: #372d2b; }
.quote-content { }
.post-quote blockquote { color: #fff; text-transform: uppercase; font-size: 22px; line-height: 42px; text-align: center; }
.quote-icon { font-size: 40px; margin-bottom: 40px; }
.quote-info { font-size: 14px; color: #fff; }
.quote-date { margin-right: 20px; }
.author-name { }

/*-------- Related Post --------*/
.related-post-block { }
.related-post { margin-bottom: 30px; }
.related-post-title { color: #383433; }
.related-post-img { margin-bottom: 30px; }
.related-post-img img { }

/*----- Prev Next Post -----*/
.post-navigation { margin-bottom: 30px; }
.nav-previous, .nav-next { }
.nav-previous { }
.nav-next { }
.prev-post { }
.next-post { }
.prev-link { }
.next-link { text-align: right; }
.prev-link, .next-link { margin-bottom: 10px; display: block; text-transform: uppercase; font-size: 12px; font-weight: 600; color: #383433; text-decoration: none; }

/*----- Author Post -----*/
.author-post { }
.author-img { }
.author-title { }
.author-img img { width: 100%; }
.author-bio { float: left; }
.author-bio .meta { margin-bottom: 0px; }
.author-meta { }
.author-name { text-transform: uppercase; }
.author-header { margin-bottom: 50px; }
.author-detail { }
.author-link { }
.author-social { text-align: right; }
.author-social a { color: #655f5d; font-size: 20px; }
.author-social a:hover { color: #383433; }
.author-info { }

/*------------- Post Pagination -------------*/
.st-pagination { text-align: center; }
.st-pagination .pagination>li>a, .pagination>li>span { position: relative; float: left; margin-left: -1px; line-height: 1.42857143; color: #372d2b; text-decoration: none; font-size: 12px; background-color: #f3f0eb; font-weight: 700; text-transform: uppercase; margin-right: 5px; margin-bottom: 5px; padding: 8px 13px; border: 1px solid #efefef; border-radius: 100%; }
.st-pagination .pagination>li>a:focus, .st-pagination .pagination>li>a:hover, .st-pagination .pagination>li>span:focus, .st-pagination .pagination>li>span:hover, .st-pagination .pagination>li>a.active { z-index: 2; color: #f3f0eb; background-color: #372d2b; border: 1px solid #372d2b; }
.st-pagination .pagination>li:first-child>a, .st-pagination .pagination>li:first-child>span { margin-left: 0; border-radius: 100px; }
.st-pagination .pagination>li:last-child>a, .st-pagination .pagination>li:last-child>span { border-radius: 100px; }
.st-pagination .pagination>.active>a, .st-pagination .pagination>.active>a:focus, .st-pagination .pagination>.active>a:hover, .st-pagination .pagination>.active>span, .st-pagination .pagination>.active>span:focus, .st-pagination .pagination>.active>span:hover { z-index: 3; color: #fff; cursor: default; background-color: #372d2b; border: 1px solid #372d2b; }

/*----- Project -----*/
.project-img { }
.project-info { }
.project-title { font-size: 12px; }
.project-content { font-weight: 600; }
.project-socials { border-top: 1px solid #e2dcdb; border-bottom: 1px solid #e2dcdb; padding-bottom: 10px; padding-top: 10px; }
.project-socials a { color: #655f5d; font-size: 20px; }
.project-socials a i { padding-left: 10px; float: right; padding-top: 6px; }
.project-socials a:hover { color: #383433; }

/*------------------------
  12. Sidebar / Widgets
--------------------------*/

/*----- widget -----*/

.widget { margin-bottom: 30px; background-color: #f3f0eb; padding: 30px; }
.widget-title { margin-bottom: 20px; }
.widget ul { }
.widget ul li { margin-bottom: 16px; line-height: 18px; }
.widget ul li:last-child { margin-bottom: 0px; }
.widget ul li a { color: #474747; }
.widget ul li a.active { color: #e7a625; }
.widget ul li a:hover { color: #e7a625; }
.widget-search { background-color: transparent; padding: 0px; }
.widget-search .input-group-addon { color: #372d2b; text-align: center; background-color: transparent; border: 1px solid #e2dcdb; border-left: transparent; }
.widget-search .form-control { border-right: 1px solid transparent; }
.widget-categories { }
.widget-categories ul { }
.widget-categories ul li { }
.widget-categories ul li a { }
.widget-archives { }
.widget-archives ul { }
.widget-archives ul li { }
.widget-archives ul li a { }
ul.widget-recent-post { }
.widget-recent-post li { margin-bottom: 10px; border-bottom: 1px solid #cecbc7; padding-bottom: 10px; }
.widget-recent-post li:last-child { border-bottom: 1px solid transparent; }
.widget-recent-post ul li a { }
.widget-recent-post .meta { margin-bottom: 10px; }
.recent-post-img { margin-bottom: 20px; }
.recent-post-content { }
.recent-title { font-size: 15px; line-height: 22px; color: #655f5d; }
.widget-tags { }
.widget-tags a { border: 1px solid #cac5c1; padding: 3px 23px; display: inline-block; background-color: #cac5c1; font-weight: 700; font-size: 12px; margin-bottom: 5px; margin-right: 3px; border-radius: 10px; color: #464241; }
.widget-tags a:hover { background-color: #372d2b; color: #fff; border: 1px solid #372d2b; }
.widget-text { }
.widget-contact { }
.widget-social { }
.social-circle a { color: #655f5d; font-size: 20px; margin-left: 5px; }
.social-circle a:hover { color: #383433; }
.widget-call-to-action { }
.widget-call-to-action .widget-title { }
.widget-call-to-action p { }
.team-block { }
.team-img { }
.team-content { }
.team-title { }
.team-name { }
.team-meta { }
.team-designation { }

/*----- Comment Post -----*/
.comments-area { border-bottom: 1px solid #f6f4f4; }
.comments-title { float: left; margin-right: 20px; font-weight: 600; }
.comment-list { list-style: none; padding: 0px; }
.comment { }
.comment-body { margin-top: 20px; margin-bottom: 30px; border-bottom: 1px solid #f6f4f4; padding-bottom: 20px; }
.comment-author { }
.comment-author img { float: left; }
.comment-info { padding-left: 120px; }
.comment-header { margin-bottom: 0px; }
.user-title { font-size: 15px; color: #474747; margin-bottom: 10px; font-weight: 500; }
.comment-meta { }
.comment-meta-date { color: #98989c; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; }
.comment-content { margin-bottom: 20px; }
.reply { }

/*---- thread comments --------*/
.childern { padding-left: 100px; list-style: none; }
.childern .comment-body { border-bottom: 0px solid; margin-top: 0px; margin-bottom: 0px; }
.childern .comment-info { padding-left: 120px; }

/*----- Leave Reply -----*/
.leave-comments { margin-top: 30px; }
.leave-comments .control-label { color: #474747; font-weight: 600; font-size: 13px; }

/*--------------------------------
 Extra Plugin CSS - Back to top
---------------------------------*/
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover { -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; }
.cd-top.cd-is-visible {    /* the button becomes visible */
    visibility: visible; opacity: 1; }
.cd-top.cd-fade-out {    /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
    opacity: .5; }
.no-touch .cd-top:hover { background-color: #e70359; opacity: 1; }

/*-------------styleguide-------------
.box-info { }
.box-default-color { background-color: #aa9144; height: 160px; width: 160px; }
.box-primary-color { background-color: #18150d; height: 160px; width: 160px; }
.box-heading-color { background-color: #18150d; height: 160px; width: 160px; }
.box-secondary-color { background-color: #6f6f6f; height: 160px; width: 160px; }
.box-bg-color { background-color: #eddba5; height: 160px; width: 160px; }*/

/*-------------error-------------*/

.error-block { text-align: center; margin-top: 45px; }
.error-title { font-size: 282px; margin-bottom: 140px; font-weight: 800; }

/* ------------campingcar------------ */
.width-height-box { height: 500px; }
.work-menu { padding: 60px 0 40px 0; }
#home { display: none }
#home_pc { display: block }


.go_top_btn {
    display:none;
    position:fixed;
    bottom:30px;
    right:30px;
    z-index:999;
    border:1px solid #ccc;
    outline:none;
    background-color:white;
    color:#333;
    cursor:pointer;
    padding:15px 20px;
    border-radius:100%;
}

/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width:3000px) {
    .index-long-term { width: 75%; }
}

@media only screen and (max-width:1200px) {
    .index-long-term { width: 85%; }
    .navigation { float: none; }
    .campingnav { float: none; }
    .hero-title { font-size: 25px; line-height: 40px; }
    .hero-section { padding-top: 130px; padding-bottom: 50px; }
    .comment-info { padding-left: 100px; }
    .cta-title { font-size: 26px; line-height: 40px; }
    .cta-section { padding-top: 50px; padding-bottom: 50px; }
    .footer-widget { margin-bottom: 20px; }
    .footer-widget .widget-title { margin-bottom: 0px; }
    .page-title { font-size: 30px; font-weight: 800; }
    .page-caption { padding: 50px 0px 40px; }
    .childern .comment-info { padding-left: 90px; }
    .childern { padding-left: 0px; list-style: none; }
    #navigation > ul > li > a { padding: 15px 5px; }
    .width-height-box { height: 300px; }
    .work-menu { padding: 40px 0 0 0; }
    #home_pc { display: none }
    #home { display: block }
    .fixed_phone_btn { top: 81%;  }
}

/* Medium Devices, Desktops */
@media only screen and (max-width:992px) {
    .navigation { float: none; }
    .campingnav { float: none; }
    .hero-title { font-size: 25px; line-height: 40px; }
    .hero-section { padding-top: 50px; padding-bottom: 50px; }
    .comment-info { padding-left: 100px; }
    .cta-title { font-size: 26px; line-height: 40px; }
    .cta-section { padding-top: 50px; padding-bottom: 50px; }
    .footer-widget { margin-bottom: 20px; }
    .footer-widget .widget-title { margin-bottom: 0px; }
    .page-title { font-size: 20px; }
    .page-caption { padding: 50px 0px; }
    .childern .comment-info { padding-left: 90px; }
    .childern { padding-left: 0px; list-style: none; }
    .width-height-box { height: 300px; }
    .work-menu { padding: 40px 0 0 0; }
    #home_pc { display: none }
    #home { display: block }
    .fixed_phone_btn { top: 85%; }
    .padding_top_only_mobile { padding-top: 50px; }
}

/* Small Devices, Tablets */
@media only screen and (max-width:768px) {
    .navigation { float: none; background: #0e0c0b; }
    .campingnav { float: none; }
    .hero-title { font-size: 25px; line-height: 40px; }
    .hero-section { padding-top: 50px; padding-bottom: 50px; }
    .comment-info { padding-left: 100px; }
    .cta-title { font-size: 26px; line-height: 40px; }
    .cta-section { padding-top: 50px; padding-bottom: 50px; }
    .footer-widget { margin-bottom: 20px; }
    .footer-widget .widget-title { margin-bottom: 0px; }
    .page-title { font-size: 20px; }
    .page-caption { padding: 160px 0px 60px 0px; }
    .childern .comment-info { padding-left: 90px; }
    .childern { padding-left: 0px; list-style: none; }
    .error-title { font-size: 62px; margin-bottom: 10px; font-weight: 800; }
    .width-height-box { height: 300px; }
    .work-menu { padding: 40px 0 0 0; }
    #home_pc { display: none }
    #home { display: block }
    .fixed_phone_btn { top: 80%; }
    /* text-decoration: line-through; text-decoration-color: darkred;  */
    .not-show-in-mobile {
        display: none;
    }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width:480px) {
    .navigation { float: none; }
    .campingnav { float: none; }
    .hero-title { font-size: 25px; line-height: 40px; }
    .hero-section { padding-top: 50px; padding-bottom: 50px; }
    .comment-info { padding-left: 100px; }
    .cta-title { font-size: 26px; line-height: 40px; }
    .cta-section { padding-top: 50px; padding-bottom: 50px; }
    .footer-widget { margin-bottom: 20px; }
    .footer-widget .widget-title { margin-bottom: 0px; }
    .page-title { font-size: 25px; }
    .page-caption { padding: 120px 0px 40px; }
    .childern .comment-info { padding-left: 90px; }
    .childern { padding-left: 0px; list-style: none; }
    .error-title { font-size: 62px; margin-bottom: 10px; font-weight: 800; }
    .width-height-box { height: 300px; }
    .work-menu { padding: 40px 0 0 0; }
    #home_pc { display: none }
    #home { display: block }
    .fixed_phone_btn { top: 81%; }
    .not-show-in-mobile {
        display: none;
    }
}


/* Custom, iPhone Retina */
@media only screen and (max-width:320px) {
    .navigation { float: none; }
    .campingnav { float: none; }
    .hero-title { font-size: 25px; line-height: 40px; }
    .hero-section { padding-top: 50px; padding-bottom: 50px; }
    .comment-info { padding-left: 100px; }
    .cta-title { font-size: 26px; line-height: 40px; }
    .cta-section { padding-top: 50px; padding-bottom: 50px; }
    .footer-widget { margin-bottom: 20px; }
    .footer-widget .widget-title { margin-bottom: 0px; }
    .page-title { font-size: 20px; }
    .page-caption { padding: 150px 0px 40px; }
    .childern .comment-info { padding-left: 90px; }
    .childern { padding-left: 0px; list-style: none; }
    .error-title { font-size: 42px; margin-bottom: 10px; font-weight: 800; }
    .testimonial-content { font-weight: 400; padding-left: 0px; }
    .width-height-box { height: 300px; }
    .work-menu { padding: 40px 0 0 0; }
    #home_pc { display: none }
    #home { display: block }
    .fixed_phone_btn { top: 80%; }
    .not-show-in-mobile {
        display: none;
    }
}


/* Popup */
.popup_display {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    position: absolute;
    top: 15%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
div.popStyle1, div.popStyle2 {
    z-index: 9;
}

#divpop1, #divpop2 {
    background: #f8f6f2;
    padding: 0;
    height: fit-content;
}

#divpop1 .popup_content {
    background-color: lightgray;
}
.popup_upper, .popup_bottom {
    padding: 10px;
}
.popup_bottom {
    border-top: solid 1px rgba(0, 0, 0, 0.3);
    border-bottom: solid 1px rgba(0, 0, 0, 0.3);
    text-align: center;
}
.popup_header {
    background-color: white;
    text-align: center;
    padding: 10px;
}
.popup_header h1 {
    color: #286090;
    margin: 0;
    font-size: 2.1rem;
}
.popup_rent_banner {
    background-color: lightgray;
    padding: 10px 0;
    text-align: center;
}
.popup1_box2_upper h3 {
    color: #286090;
    line-height: 2rem;
    word-break: keep-all;
}
.popup1_box2_upper h4:last-child {
    margin-bottom: 0;
}
.popup1_table td {
    padding: 20px;
}
.popup1_box1 {
    background-color: #f8f6f2;
    color: black;
    margin: 0px 10px;
    padding: 10px 0;
}
.popup1_box1 table {
    background: transparent;
}
.popup1_box1 table td {
    border-bottom : none;
    vertical-align: baseline;
    color: black;
    width: 25%;
}

.popup1_box1 table tr:first-child {
    border-bottom: solid 1px white;
    text-align: center;
}

/*.popup1_box1 table tr:first-child td {*/
/*    font-size: 1.3rem;*/
/*}*/
.popup1_box1 table tr td:first-child {
    text-align: center;
}

.popup1_box1 table tr td:last-child {
    text-align: center;
    word-break: keep-all;
}
.popup1_box1_small {
    font-size: 1rem;
}
.popup1_box1_yellow {
    color: #ffec76;
    font-size: 1.8rem;
}
.popup1_box2 {
    border-radius: 10px 10px 0 0;
    background: white;
    margin-top: -10px;
}
.popup1_box2_upper {
    text-align: center;
    border-bottom: 1px solid #286090;
    padding: 30px 0 20px 0;
}
.popup1_box2_upper_title {
    font-size: 1.7rem;
    margin-bottom: 0;
}
.popup1_box2_upper_text {
    color: #707070;
}
.popup1_box2_purple {
    color: #7506db;
    font-size: 2rem;
}
.popup1_box2_bottom {
    display: grid;
    padding: 20px;
    grid-template-columns: 30% 70%;
    text-align: center;
}
.popup1_box2_bottom i {
    color: #a593e0;
    font-size: 6rem;
    margin: auto;
}
.popup1_box2_bottom p {
    font-size: 1.5rem;
    color: #393939;
    margin-bottom: 0;
    line-height: 1.7;
    text-align: left;
}
.popup1_box2_small {
    color: #939393;
    font-size: 1rem;
}
.popup_footer h4 {
    color: black;
    text-align: center;
    margin: 0;
    word-break: keep-all;
}
.popup_bg_img_wrapper {
    width: 44%;
    left: 28%;
    position: relative;
}
.popup_bg_img {
    width: 100%;
    padding-top: 100%; /* 1:1 aspect ratio */
    background-color: white;
    background-position: center;
    background-size: 76%;
    background-repeat: no-repeat;
    border-radius: 50%;
    position: absolute;
    margin-top: 7em;
}
.popup_camping_banner {
    background-color: #40c4b6;
}
.popup_camping_banner h4 {
    font-size: 2rem;
    color: white;
    text-align: center;
    margin-bottom: 0;
}
.popup_bg_red {
    background: white;
    text-align: center;
    padding-bottom: 2em;
}
.popup_bg_red h1 {
    position: relative;
    font-size: 4.5em;
    line-height: 100%;
    margin: 0;
}
.popup_bg_red h3 {
    position: relative;
    font-size: 3em;
    line-height: 100%;
    margin: 0;
}
.popup_bg_red h4 {
    color: white;
    line-height: 100%;
    padding: 1em 0;
    margin: 0;
}
.popup_outline_text {
    color: black;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: white;
}
.popup_bg_green {
    background: #40c4b6;
}
.popup_bg_alice_blue {
    background: aliceblue;
}
.popup_bg_dark_blue {
    background: #286090;
}
.popup_bottom_content_wrapper {
    position: relative;
    padding: 100px 30px 30px 30px;
}
.popup_box_slogan {
    position: absolute;
    width: 82%;
    left: 9%;
    top: 14%;
    padding: 10px !important;
    font-size: 1.5em;
    border-radius: 12px !important;
}
.popup_box_wrapper {
    grid-template-columns: 1fr 1fr;
    display: grid;
    grid-column-gap: 20px;
}
.popup_box_wrapper:first-child {
    margin-bottom: 30px;
}
popup_box_wrapper_long_term {
    grid-template-columns: 1fr;
    display: grid;
    grid-column-gap: 20px;
}
.promotion_slogan {
    top: 58% !important;
}
.popup_box {
    border: 5px solid #296090;
    border-radius: 30px;
    padding: 40px 20px 20px 20px;
    text-align: center;
    background: white;
}
popup_box_long_term {
    border: 5px solid #e71c36;
    border-radius: 30px;
    padding: 20px;
    text-align: left;
    background: white;
}
.popup_box_sub_title {
    font-size: 1.8rem;
}
.popup_box_title {
    font-size: 2em;
    margin: 0;
}
.popup_box_subtitle {
    font-size: 1em;
    margin: 0;
}
.popup_box_price_number {
    font-size: 1.5em;
    color: #e71c36;
}
.popup_box_text,
.popup_box_price {
    margin: 0;
}
.popup_button {
    margin-top: 0.5em;
    background: white;
    padding: 12px;
    text-align: center;
    border-radius: 10px;
    font-size: 1.3em;
    color: #40c4b6;
}
.home-to-prior-rent-month-button-wrap {
    margin-bottom: 10px;
}
.home-to-prior-rent-month-button {
    background: black;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
}
.home-to-price-rent-month-button {
    background: dodgerblue;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    border-color: dodgerblue;
}
#loading {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /*background: rgba(195, 195, 195, 0.5);*/
    position: absolute;
    z-index: 20;
}
.loading_spinner_box {
    background-color: white;
    display: inline-block;
    margin: 30vh 43vw;
    padding: 30px;
    border: 1px solid black;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: max-content;
    align-items: center;
}
.loading_spinner {
    width: 3em;
    height: 3em;
    border-radius: 50%;
    border: 5px solid gainsboro;
    border-top: 5px solid black;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@media (min-width: 769px) and (max-width: 991px) {
    .popup_display {
        flex-direction: column;
    }
    .popup_bottom_content_wrapper {
        padding: 165px 30px 30px 30px;
    }
    .popup_box_slogan {
        top: 24%;
    }
}
@media (min-width: 630px) and (max-width: 768px) {
    .loading_spinner_box {
        margin: 40vh 20vw;
    }
    .popup_display {
        flex-direction: column;
    }
    .popup_bottom_content_wrapper {
        padding: 110px 30px 30px 30px;
    }
    .popup_box_slogan {
        top: 20%;
    }
    .popup1_box1 table tr td:first-child {
        font-size: 1.3rem;
    }

    .popup1_box2_bottom p {
        font-size: 1.4rem;
    }
    h2 {
        font-size: 1.8rem;
    }
}
@media (max-width: 629px) {
    .loading_spinner_box {
        margin: 40vh 20vw;
    }
    .popup_display {
        flex-direction: column;
    }
    .popup1_box1 table td {
        padding: 10px 5px;
    }
    .popup_header h1 {
        font-size: 1.8rem;
    }
    .popup1_box1 table tr td:first-child {
        font-size: 1.3rem;
    }
    .popup1_box1 table tr td:last-child {
        font-size: 1.3rem;
    }
    .popup1_box1_yellow {
        font-size: 1.7rem;
    }
    .popup1_box2_upper_title {
        font-size: 1.6rem;
    }
    .popup1_box2_bottom i {
        font-size: 5rem;
    }
    .popup1_box2_bottom {
        padding: 10px;
    }

    .popup_bg_img_wrapper {
        width: 50%;
        left: 25%;
    }
    .popup_bg_img {
        margin-top: 10em;
    }
    .popup_box_subtitle {
        font-size: 0.9em;
    }
    .popup_box_slogan {
        font-size: 1.2em;
        top: 11%;
    }
    .popup_box_wrapper {
        grid-column-gap: 5px;
    }
    .popup_box_title {
        font-size: 1.2em;
    }
    .popup_box {
        padding: 30px 3px 10px 3px;
    }
    .popup_bottom_content_wrapper {
        padding: 90px 10px 20px 10px;
    }

    .popup1_box2_bottom p {
        font-size: 1.4rem;
    }

    h2 {
        font-size: 1.8rem;
    }
}

#mobile_pop {
    position: relative;
    width: 100%;
}

.btn-more {
    color: #797979; border: 1px solid #ddd; border-radius: 50px; width: 90px; line-height: 36px;
}
.btn-more:hover {
    background: dodgerblue;
    color: white;
}

.btn-paging {
    border: 1px solid #797979;
    margin: 0 4px;
    background: white;
    width: 30px;
    height: 30px;
}
.btn-paging:hover {
    border: 1px solid black;
}

/*
---------------------------------------
 */

.main-card {
    box-shadow: 5px 5px 30px #969696;
}

.mobile_navbar_phone_btn, .mobile_navbar_message_btn {
    display: block;
    background: transparent;
    color: #ffffff;
    padding: 10px 10px;
    font-size: 1.2em;
    border: none;
    border-radius: 10px;
}
.mobile_navbar_btns {
    display: flex;
    margin-top: 15px;
    margin-right: 120px;
}

@media only screen and (max-width:768px) {
    .mobile_navbar {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .mobile_navbar_btns {
        display: flex;
        margin-top: 15px;
        margin-right: 120px;
    }
}



/* ====== 장기렌트 클러스터 시각 일체감 & 높이 정렬 ====== */
:root {
    --cluster-bg-start: rgba(66, 133, 244, 0.14);  /* 상단과 자연스러운 톤 */
    --cluster-bg-end:   rgba(52, 168, 83, 0.08);
    --cluster-border:   rgba(66, 133, 244, 0.28);
}

/* 부모 탭(스페셜장기렌트) 스타일 강조 */
.hover_menu > a {
    background: linear-gradient(135deg, var(--cluster-bg-start) 0%, var(--cluster-bg-end) 100%) !important;
    border: 1px solid var(--cluster-border);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    position: relative;
    z-index: 2; /* 드롭다운과 자연스럽게 겹치도록 */
}

/* 데스크톱에서 드롭다운 컨테이너도 같은 톤 */
@media screen and (min-width: 991px) {
    .hover_menu .nav-dropdown {
        background: linear-gradient(135deg, rgba(38, 38, 38, var(--header-bg-alpha))) !important; /* 기존 톤 유지 */
        border: 1px solid var(--cluster-border);
        border-top-left-radius: 0;   /* 부모와 맞닿는 위쪽은 둥글지 않게 */
        border-top-right-radius: 0;
        margin-top: 0;
        top: 70px; /* 상단 메뉴 높이와 정확히 맞물리게 */
    }
}

/* 하위 항목들도 동일한 군(群) 배경감 */
@media screen and (min-width: 991px) {
    .hover_menu .nav-dropdown li a {
        /* 상위와 유사 배경 (살짝 약하게) */
        background: linear-gradient(135deg, rgba(66,133,244,0.10) 0%, rgba(52,168,83,0.06) 100%) !important;
        border-bottom: 1px solid rgba(66,133,244,0.15);
    }
    .hover_menu .nav-dropdown li a:hover {
        background: linear-gradient(135deg, rgba(66,133,244,0.16) 0%, rgba(52,168,83,0.10) 100%) !important;
    }
}

/* ====== 드롭다운 항목 높이를 상위(70px)와 동일하게 ====== */
@media screen and (min-width: 991px) {
    /* 상위 메뉴는 이미 line-height:70px 이므로 유지 */
    nav ul li a,
    nav ul li a:visited {
        line-height: 70px; /* 상단과 일치 */
        height: 70px;      /* 명시적으로 고정 */
        padding-top: 0;
        padding-bottom: 0;
    }

    /* 드롭다운 항목도 같은 높이/라인으로 정렬 */
    .nav-dropdown li a {
        display: flex !important;
        align-items: center;       /* 텍스트 수직 중앙정렬 */
        height: 70px !important;   /* 상위와 동일 */
        line-height: 70px !important;
        padding: 0 24px !important; /* 좌우만 패딩 */
        border-bottom: 1px solid rgba(255,255,255,0.06); /* 기존 경계감 유지 */
    }

    /* 드롭다운 각 li에 고정 높이 보조 (애니메이션/호버에 영향 줄이기) */
    #navigation li:hover > ul > li,
    nav ul li ul li {
        height: 70px !important;
    }
}

/* 다크모드에서도 일체감 유지 */
@media (prefers-color-scheme: dark) and (min-width: 991px) {
    .hover_menu > a {
        background: linear-gradient(135deg, rgba(66,133,244,0.20) 0%, rgba(52,168,83,0.12) 100%) !important;
        border-color: rgba(66,133,244,0.35);
    }
    .hover_menu .nav-dropdown {
        background: linear-gradient(135deg, rgba(45,45,45,0.92) 0%, rgba(26,26,26,0.85) 100%) !important;
        border-color: rgba(66,133,244,0.25);
    }
    .hover_menu .nav-dropdown li a {
        background: linear-gradient(135deg, rgba(66,133,244,0.16) 0%, rgba(52,168,83,0.10) 100%) !important;
        border-bottom-color: rgba(66,133,244,0.18);
    }
}

/* 드롭다운이 열렸을 때 부모와 드롭다운이 끊겨 보이지 않도록 상단 경계선 제거 */
@media screen and (min-width: 991px) {
    .hover_menu:hover > a {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom-color: transparent;
    }
}
/* =========================
   스페셜장기렌트 클러스터 & 하위메뉴바 높이/색상 일치
   (이 블록은 CSS 맨 아래에 붙여 넣기!)
   ========================= */
:root{
    --cluster-start: rgba(66,133,244,0.14);
    --cluster-end:   rgba(52,168,83,0.08);
    --cluster-border: rgba(66,133,244,0.28);
    --cluster-text: #ffffff;
}

/* 1) 부모 탭(스페셜장기렌트) 자체 톤 */
.hover_menu > a{
    background: linear-gradient(135deg,var(--cluster-start) 0%,var(--cluster-end) 100%) !important;
    border: 1px solid var(--cluster-border) !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    position: relative;
    z-index: 2;
    color: var(--cluster-text) !important;
}

/* 데스크톱 전용 */
@media (min-width:991px){

    /* (중요) 데스크톱에서 드롭다운 숨김 규칙 무효화 */
    nav ul li:hover > .nav-dropdown{ display:block !important; }

    /* 드롭다운 컨테이너를 상단바 바로 아래에, 같은 톤으로 */
    .hover_menu .nav-dropdown{
        top: 70px !important;                /* 상단 메뉴 높이와 정확히 맞물리게 */
        padding: 0 !important;
        background: linear-gradient(135deg,var(--cluster-start) 0%,var(--cluster-end) 100%) !important;
        border: 1px solid var(--cluster-border) !important;
        border-top-left-radius: 0 !important;  /* 부모와 이어지게 위 라운드 제거 */
        border-top-right-radius: 0 !important;
    }

    /* 드롭다운 항목(하위메뉴) 높이 = 70px, 수직 중앙정렬 */
    .hover_menu .nav-dropdown li,
    nav ul li ul li{
        height: 70px !important;
    }

    /* 여러 규칙을 이기기 위해 selector를 넓게 덮어씀 */
    .hover_menu .nav-dropdown li a,
    nav ul li ul li a,
    #navigation ul ul li a{
        display: flex !important;
        align-items: center !important;
        height: 70px !important;
        line-height: 70px !important;
        padding: 0 24px !important;           /* 좌우만 패딩 */
        border-bottom: 1px solid rgba(255,255,255,0.10) !important;
        color: var(--cluster-text) !important;
        background: transparent !important;   /* 컨테이너 그라데이션 보이게 */
    }

    .hover_menu .nav-dropdown li a:hover{
        background: linear-gradient(135deg, rgba(66,133,244,0.18) 0%, rgba(52,168,83,0.12) 100%) !important;
    }

    /* 부모와 드롭다운이 하나로 이어진 느낌 */
    .hover_menu:hover > a{
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-bottom-color: transparent !important;
    }

    /* 2) “하위메뉴바(=sub-nav-bar)”도 같은 톤/높이로 강조 */
    .sub-nav-bar{
        height: 70px !important;
        background: linear-gradient(135deg,var(--cluster-start) 0%,var(--cluster-end) 100%) !important;
        border-bottom: 1px solid var(--cluster-border) !important;
    }
    .sub-nav,
    .sub-nav-list,
    .sub-nav-list li{
        height: 70px !important;
        align-items: center !important;
    }
    .sub-nav-list li a{
        display: flex !important;
        align-items: center !important;
        height: 70px !important;
        line-height: 70px !important;
        color: var(--cluster-text) !important;
        font-weight: 600 !important;
        padding: 0 18px !important;
        background: transparent !important;
        border-radius: 12px !important;
    }
    .sub-nav-list li a:hover{
        background: linear-gradient(135deg, rgba(66,133,244,0.18) 0%, rgba(52,168,83,0.12) 100%) !important;
    }
}

/* 다크모드 보강 */
@media (prefers-color-scheme: dark) and (min-width:991px){
    .hover_menu > a{
        background: linear-gradient(135deg, rgba(66,133,244,0.22) 0%, rgba(52,168,83,0.14) 100%) !important;
        border-color: rgba(66,133,244,0.35) !important;
    }
    .hover_menu .nav-dropdown{
        background: linear-gradient(135deg, rgba(45,45,45,0.92) 0%, rgba(26,26,26,0.86) 100%) !important;
        border-color: rgba(66,133,244,0.28) !important;
    }
    .hover_menu .nav-dropdown li a{
        border-bottom-color: rgba(66,133,244,0.22) !important;
    }
    .sub-nav-bar{
        background: linear-gradient(135deg, rgba(66,133,244,0.20) 0%, rgba(52,168,83,0.13) 100%) !important;
        border-bottom-color: rgba(66,133,244,0.28) !important;
    }
}

/* =========================
   데스크톱에서 스페셜장기렌트 드롭다운 비활성화
   (모바일은 유지)
   ========================= */
@media (min-width: 991px) {
    /* 1) .hover_menu(스페셜장기렌트)의 드롭다운 자체를 숨김 + 클릭/포커스 불가 */
    .hover_menu > .nav-dropdown {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* 2) 기존 전역 규칙(nav ul li:hover > .nav-dropdown {display:block})을
          스페셜장기렌트에 한해 무효화 */
    .hover_menu:hover > .nav-dropdown {
        display: none !important;
    }

    /* 3) caret(▾) 제거: 하위가 없다고 느껴지게 */
    .hover_menu > a::after {
        content: '' !important;
    }
}

/* =========================
   하위메뉴바(두 번째 줄) 톤/높이 강조 (데스크톱)
   ========================= */
:root{
    --cluster-start: rgba(66,133,244,0.14);
    --cluster-end:   rgba(52,168,83,0.08);
    --cluster-border: rgba(66,133,244,0.28);
    --cluster-text: #ffffff;
}
@media (min-width: 991px) {
    .sub-nav-bar{
        height: 70px !important;
        background: linear-gradient(135deg,var(--cluster-start) 0%,var(--cluster-end) 100%) !important;
        border-bottom: 1px solid var(--cluster-border) !important;
    }
    .sub-nav, .sub-nav-list, .sub-nav-list li{
        height: 70px !important;
        align-items: center !important;
    }
    .sub-nav-list li a{
        display: flex !important;
        align-items: center !important;
        height: 70px !important;
        line-height: 70px !important;
        color: var(--cluster-text) !important;
        font-weight: 600 !important;
        padding: 0 18px !important;
        background: transparent !important;
        border-radius: 12px !important;
    }
    .sub-nav-list li a:hover{
        background: linear-gradient(135deg, rgba(66,133,244,0.18) 0%, rgba(52,168,83,0.12) 100%) !important;
    }

    /* 상단 탭(스페셜장기렌트)도 같은 톤으로 통일(선택 사항) */
    .hover_menu > a{
        background: linear-gradient(135deg,var(--cluster-start) 0%,var(--cluster-end) 100%) !important;
        border: 1px solid var(--cluster-border) !important;
        border-radius: 10px !important;
        color: var(--cluster-text) !important;
    }
}

/* 다크 모드 보강 */
@media (prefers-color-scheme: dark) and (min-width:991px){
    .sub-nav-bar{
        background: linear-gradient(135deg, rgba(66,133,244,0.20) 0%, rgba(52,168,83,0.13) 100%) !important;
        border-bottom-color: rgba(66,133,244,0.28) !important;
    }
    .hover_menu > a{
        background: linear-gradient(135deg, rgba(66,133,244,0.22) 0%, rgba(52,168,83,0.14) 100%) !important;
        border-color: rgba(66,133,244,0.35) !important;
        color: #fff !important;
    }
}

@media (min-width: 991px){
    .sub-nav-bar{
        background: linear-gradient(135deg, rgba(66,133,244,0.28) 0%, rgba(52,168,83,0.18) 100%) !important;
    }
}

/* ============ 서브 네비(둘째 줄) 가독성 향상 ============ */
:root{
    --subnav-text: #0f172a;        /* 기본 글자색(짙은 남회색) */
    --subnav-hover-text: #0b57d0;  /* 호버 시 링크 색(구글 블루 톤) */
}

@media (min-width: 991px) {
    /* 기본 상태: 흰색 대신 진한 글자색으로 */
    .sub-nav-bar .sub-nav .sub-nav-list li a{
        color: var(--subnav-text) !important;
        font-weight: bold !important;
        text-shadow: none !important;
    }

    /* 호버: 배경 살짝 강조 + 글자색은 선명한 블루 */
    .sub-nav-bar .sub-nav .sub-nav-list li a:hover{
        color: var(--subnav-hover-text) !important;
        background: linear-gradient(135deg, rgba(66,133,244,0.16) 0%, rgba(52,168,83,0.10) 100%) !important;
    }

    /* 현재 선택된 탭(있다면) 더 또렷하게 */
    .sub-nav-bar .sub-nav .sub-nav-list li a.active,
    .sub-nav-bar .sub-nav .sub-nav-list li a[aria-current="page"]{
        color: #ffffff !important;
        background: #0b57d0 !important;
        border-radius: 10px !important;
    }
}

/* 다크모드: 배경이 어두워지므로 밝은 글자색 유지 */
@media (prefers-color-scheme: dark) and (min-width: 991px){
    .sub-nav-bar .sub-nav .sub-nav-list li a{
        color: #e8f0fe !important;        /* 밝은 청백 */
    }
    .sub-nav-bar .sub-nav .sub-nav-list li a:hover{
        color: #ffffff !important;
        background: linear-gradient(135deg, rgba(66,133,244,0.22) 0%, rgba(52,168,83,0.16) 100%) !important;
    }
}

/* === 상단 '스페셜장기렌트'를 하위메뉴 톤과 동일 + 더 찐하게 === */
@media (min-width: 991px){
    /* 기본 상태: 하위메뉴 그라데이션과 동일 계열 + 진하게 */
    .hover_menu > a{
        background: linear-gradient(135deg, rgba(66,133,244,0.28) 0%, rgba(52,168,83,0.18) 100%) !important;
        border: 1px solid rgba(66,133,244,0.45) !important;
        color: #0f172a !important;                    /* 하위메뉴와 동일한 진한 글자색 */
        border-radius: 10px !important;
        box-shadow: 0 0 0 1px rgba(66,133,244,0.18),  /* 테두리 또렷 */
        0 8px 16px rgba(66,133,244,0.15) !important;
    }

    /* 호버 시 한 단계 더 진하게 + 링크색은 또렷하게 */
    .hover_menu > a:hover{
        background: linear-gradient(135deg, rgba(66,133,244,0.34) 0%, rgba(52,168,83,0.24) 100%) !important;
        color: #0b57d0 !important;
        border-color: rgba(66,133,244,0.55) !important;
    }
}

/* 다크모드에선 대비를 위해 글자는 흰색 유지, 배경만 강화 */
@media (prefers-color-scheme: dark) and (min-width: 991px){
    .hover_menu > a{
        color: #ffffff !important;
        background: linear-gradient(135deg, rgba(66,133,244,0.32) 0%, rgba(52,168,83,0.22) 100%) !important;
        border-color: rgba(66,133,244,0.55) !important;
        box-shadow: 0 0 0 1px rgba(66,133,244,0.25),
        0 8px 18px rgba(0,0,0,0.35) !important;
    }
    .hover_menu > a:hover{
        background: linear-gradient(135deg, rgba(66,133,244,0.40) 0%, rgba(52,168,83,0.30) 100%) !important;
    }
}

/* 상단 '스페셜장기렌트' 배경 더 진하게 + 글자 밝게 + 아래 모서리 라운드 제거 */
@media (min-width: 991px){
    .hover_menu > a{
        /* 진한 톤: 알파를 확 올려서 존재감 강화 */
        background: linear-gradient(135deg, rgba(66,133,244,0.50) 0%, rgba(52,168,83,0.40) 100%) !important;
        border: 1px solid rgba(66,133,244,0.60) !important;

        /* 아래 하위메뉴와 이어지게: 아래쪽 라운드 0 */
        border-radius: 12px 12px 0 0 !important;

        /* 글자는 밝게 */
        color: #ffffff !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.25) !important;

        /* 살짝 입체감 */
        box-shadow:
                0 0 0 1px rgba(66,133,244,0.20),
                0 10px 20px rgba(0,0,0,0.25) !important;
    }

    .hover_menu > a:hover{
        /* 호버 시 한 단계 더 진하게 */
        background: linear-gradient(135deg, rgba(66,133,244,0.60) 0%, rgba(52,168,83,0.50) 100%) !important;
        border-color: rgba(66,133,244,0.70) !important;
        color: #ffffff !important;
    }

    /* 하위줄(둘째 줄)과 '딱 붙어' 보이도록 위 경계선 겹치기 */
    .sub-nav-bar{
        /* 서브네비는 기존 설정 유지하되, 위쪽 경계선 이음새 제거 */
        border-top: 0 !important;
        margin-top: -1px;             /* 경계선 1px 겹치기(시각적 이음새 제거) */
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }
}

/* 다크모드에서는 상단 탭 더 진하고 글자 흰색 유지 */
@media (prefers-color-scheme: dark) and (min-width: 991px){
    .hover_menu > a{
        background: linear-gradient(135deg, rgba(66,133,244,0.62) 0%, rgba(52,168,83,0.50) 100%) !important;
        border-color: rgba(66,133,244,0.75) !important;
        color: #ffffff !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.45) !important;
    }
    .hover_menu > a:hover{
        background: linear-gradient(135deg, rgba(66,133,244,0.70) 0%, rgba(52,168,83,0.58) 100%) !important;
    }
}

/* ====== 1) 기본 여백/패딩/보더 제거 ====== */
@media (min-width: 991px){
    .nav-bar,
    .sub-nav-bar{
        margin: 0 !important;
    }
    .nav-bar > .container,
    .sub-nav-bar > .container{
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* nav 내부 요소에 혹시 남은 바깥여백 제거 */
    .nav-bar .brand,
    .nav-bar nav{
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .sub-nav,
    .sub-nav-list{
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 위/아래 바의 경계선이 겹치며 공간처럼 보이는 것 방지 */
    .nav-bar{ border-bottom: 0 !important; }
    .sub-nav-bar{ border-top: 0 !important; }
}

/* ====== 2) 아직도 미세한 틈이 보이면 살짝 당겨 붙이기 ====== */
/* (화면/브라우저별 서브픽셀 반올림 때문에 1~4px 생길 수 있어요) */
@media (min-width: 991px){
    /* 방법 A: 음수 마진으로 위로 끌어올리기 */
    .nav-bar + .sub-nav-bar{
        margin-top: -3px !important;  /* 필요 시 -1 ~ -6px 사이로 미세 조정 */
    }

    /* 방법 B(대안): position으로 살짝 올리기 — A 대신 사용 가능 */
    /* .nav-bar + .sub-nav-bar{
         position: relative;
         top: -2px;                  // 필요 시 -1 ~ -4px 조정
       } */
}

/* ====== 3) 시각적으로 '붙어 보이게' 모서리/이음새 정리 ====== */
@media (min-width: 991px){
    /* 상단 '스페셜장기렌트' 아래 모서리 라운드 제거(이미 적용했더라도 재보강) */
    .hover_menu > a{
        border-radius: 12px 12px 0 0 !important;
    }

    /* 서브네비의 위 모서리는 둥글지 않게 */
    .sub-nav-bar{
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }
}

/* ====== 상·하단 바 사이 '틈' 완전 제거(데스크톱) ====== */
@media (min-width: 991px){
    /* 1) 높이 통일: 위/아래 모두 정확히 70px */
    .nav-bar{
        /*display: block !important;       !* inline style=flex 무력화 *!*/ /* 로그인이 내려져서 뺌 */
        height: 78px !important;
        margin: 0 !important;
        padding: 8px 0 0 0 !important;
        border-bottom: 0 !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        background: linear-gradient(to bottom, #1e293b 0%, #0f172a 100%) !important;
        border-bottom: 1px solid rgba(30, 41, 59, 0.8) !important;
        backdrop-filter: blur(10px);
        z-index: 9998 !important;
        position: relative;
    }
    .nav-bar > .container{
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .brand{ line-height: 70px !important; }
    nav, nav ul, nav ul li{
        margin: 0 !important;
        padding: 0 !important;
    }
    /* 로그인 버튼 스타일 - 개발 중이므로 거의 안 보이게 */
    .login-menu a {
        background: transparent !important;
        color: rgba(241, 245, 249, 0.3) !important;
        border-radius: 8px;
        padding: 0 20px !important;
        font-weight: 400;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: none !important;
        opacity: 0.4;
    }
    .login-menu a:hover {
        background: transparent !important;
        color: rgba(241, 245, 249, 0.4) !important;
        transform: none !important;
        box-shadow: none !important;
        opacity: 0.5;
    }
    nav ul li a{
        height: 70px !important;
        line-height: 70px !important;
        padding: 0 18px !important;
        color: #f1f5f9 !important;
        position: relative;
        font-weight: 600;
        border-radius: 8px;
        margin: 0 4px;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    nav ul li a:hover,
    nav ul li a:visited:hover {
        color: #ffffff !important;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%) !important;
        transform: translateY(-1px);
    }
    /* nav-list 스타일도 동일하게 적용 */
    .nav-list li a,
    .nav-list li a:visited {
        color: #f1f5f9 !important;
        padding: 0 18px !important;
        font-weight: 600;
        border-radius: 8px;
        margin: 0 4px;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
    }
    .nav-list li a:hover {
        color: #ffffff !important;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%) !important;
        transform: translateY(-1px);
    }
    /* 활성화된 메뉴에 파란색 밑줄 추가 */
    nav ul li a.active,
    nav ul li a[aria-current="page"],
    .nav-list li a.active,
    .nav-list li a[aria-current="page"] {
        color: #ffffff !important;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.4) 0%, rgba(37, 99, 235, 0.35) 100%) !important;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
    }
    nav ul li a.active::after,
    nav ul li a[aria-current="page"]::after,
    .nav-list li a.active::after,
    .nav-list li a[aria-current="page"]::after {
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 8px;
        height: 4px;
        background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 100%);
        border-radius: 2px 2px 0 0;
        box-shadow: 0 2px 12px rgba(96, 165, 250, 0.6), 0 0 8px rgba(59, 130, 246, 0.5);
    }

    /* 2) 둘째 줄: 위쪽 경계선/여백 제거 + '붙이기' 오프셋 */
    .sub-nav-bar{
        height: 70px !important;
        margin: 0 !important;
        border-top: 0 !important;
        /* 서브픽셀(1px) 틈 방지용: 살짝 위로 겹치게 */
        position: relative;
        top: -2px; /* 필요 시 -1 ~ -4px 사이로 조정 */
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }
    .sub-nav, .sub-nav-list, .sub-nav-list li, .sub-nav-list li a{
        height: 70px !important;
        line-height: 70px !important;
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 3) 상단 '스페셜장기렌트'는 아래 라운드 제거해 자연스럽게 접합 */
    .hover_menu > a{
        border-radius: 12px 12px 0 0 !important;
    }

    /* 4) 혹시 여전히 미세한 틈이 보이면 마지막 한 방 더 (주석 해제해서 사용) */
    /* .nav-bar + .sub-nav-bar{ margin-top: -3px !important; } */
}
/* ===== 서브 네비(둘째줄) 위치 리셋 + 깔끔하게 '딱 붙이기' ===== */
@media (min-width: 991px){
    /* 1) 가로 치우침 방지: 위치/폭/정렬 리셋 */
    .sub-nav-bar{
        position: static !important;     /* top/left 등 이전 위치 보정 초기화 */
        left: auto !important;
        right: auto !important;
        display: block !important;       /* 원래 flex였던 걸 블록으로 복귀 */
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-top: 0 !important;
        transform: none !important;      /* 이전 transform 잔여 제거 */
        overflow: visible !important;
    }

    /* 2) 내부 컨테이너를 가운데 정렬(가로 반만 보이는 현상 방지) */
    .sub-nav-bar > .container,
    .sub-nav{
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }

    /* 3) 틈 메우기는 레이아웃에 영향 없는 translateY로만 살짝 */
    .nav-bar + .sub-nav-bar{
        transform: translateY(-2px) !important; /* 필요 시 -1 ~ -4px 조절 */
    }

    /* 4) 항목 높이/정렬 유지 */
    .sub-nav,
    .sub-nav-list,
    .sub-nav-list li,
    .sub-nav-list li a{
        height: 70px !important;
        line-height: 70px !important;
        display: flex !important;
        align-items: center !important;
    }
}

/* ===== 둘째줄 하위메뉴 3개: 중앙 정렬 & 왼쪽 쏠림 제거 ===== */
@media (min-width: 991px){
    /* 리스트 자체를 가운데로 */
    .sub-nav {
        justify-content: center !important;
        padding-left: 0 !important;   /* 남아있던 좌우 패딩 제거(선택) */
        padding-right: 0 !important;
    }
    .sub-nav-list{
        width: 100% !important;
        justify-content: center !important; /* 항목들을 중앙으로 */
        margin: 0 auto !important;
    }
    /* 마지막 항목에 남아있던 여백 제거 */
    .sub-nav-list li:nth-child(3){
        margin-right: 0 !important;
    }
}

@media (min-width: 991px){
    /* 기본은 왼쪽부터 배치하고, JS가 padding-left로 정확히 보정 */
    .sub-nav{
        display:flex !important;
        justify-content:flex-start !important;
        padding-left:0 !important;
        max-width:inherit; /* JS가 상단 컨테이너 폭으로 세팅 */
        box-sizing:border-box !important;
    }
    .sub-nav-list{ display:flex !important; }

    /* 왼쪽으로 밀리게 하던 잔여 여백 강제 제거 */
    .sub-nav-list li{ margin-right:0 !important; }
    .sub-nav-list li:nth-child(3){ margin-right:0 !important; }
}


/* 전구간 공통: JS가 .sub-nav-list를 transform으로 움직일 수 있게 리셋 */
.sub-nav-bar,
.sub-nav { overflow: visible !important; }
.sub-nav { position: relative !important; justify-content: flex-start !important; }
.sub-nav-list {
    position: relative !important;
    left: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    will-change: transform;
    transition: transform .25s ease; /* 옵션 */
}
.sub-nav-list { transform: none !important; } /* 기본값을 비우고 JS가 다시 씀 */

/* 모바일 전용: 스페셜장기렌트카 텍스트를 검정으로 */
@media only screen and (max-width: 991px) {
    nav ul li.hover_menu > a,
    .hover_menu > a,
    .hover_menu > a:visited {
        color: #000 !important;
        /* 필요하면 배경을 투명으로 */
        background: transparent !important;
        /* 필요하면 테두리도 제거 */
        border: none !important;
    }
}

/* 다크모드에서도 모바일은 검정 유지 */
@media (prefers-color-scheme: dark) and (max-width: 990px) {
    nav ul li.hover_menu > a,
    .hover_menu > a,
    .hover_menu > a:visited {
        color: #000 !important;
    }
}

@media (min-width: 991px){
    /* 기존 padding: 0 20px !important; 때문에 왼쪽 보정이 막히는 걸 방지 */
    .sub-nav { padding-right: 20px !important;
        /*left: 500px !important;*/
        /* left는 JS가 계산해서 넣음 */ }
}
/* Fix: 481~990px에서 '한달렌트' 글자색을 검정으로 */
@media only screen and (min-width: 481px) and (max-width: 990px) {
    nav ul li:nth-child(2) > a,
    nav ul li:nth-child(2) > a:visited {
        color: #000 !important;
        text-shadow: none !important; /* 혹시 남아있는 반짝 효과 제거용(선택) */
    }
}
@media (min-width: 991px) {
    .nav-list li a {
        font-weight: bold;
    }

}

/* =========================
   둘째줄(서브 네비) 초강조
   ========================= */
@media (min-width: 991px){

    /* 바 자체 톤/대비 업 + 스티키 옵션(원하면 유지) */
    .sub-nav-bar{
        background: linear-gradient(135deg, #fdfcff 0%, #eef5ff 100%) !important;
        border-bottom: 2px solid rgba(11,99,196,.28) !important;
        box-shadow: inset 0 8px 24px rgba(11,99,196,.10);
        /* 스크롤 내려도 계속 보이게 하려면 주석 해제 */
        position: sticky; top: 70px; z-index: 998;
        transform: none !important; /* 위쪽 코드의 translateY 상쇄 */
        margin: 0 !important; padding: 0 !important;
    }

    .sub-nav, .sub-nav-list, .sub-nav-list li{
        height: 70px !important;
        align-items: center !important;
    }

    .sub-nav .sub-nav-list{
        display: flex !important;
        gap: 10px;                  /* 메뉴 간격 */
        justify-content: center;    /* 가운데 정렬 */
    }

    /* 기본 폰트/패딩 강화 */
    .sub-nav-list li a{
        display: inline-flex !important;
        align-items: center !important;
        height: 44px !important;
        line-height: 44px !important;
        padding: 0 18px !important;
        font-weight: 800 !important;
        font-size: 16px !important;
        letter-spacing: -.01em;
        border-radius: 999px !important;
        color: #0f172a !important;
        border: 2px solid transparent;
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
    }

    /* 장기렌트 메뉴 색상도 다른 항목과 동일하게 유지 */
    .sub-nav-list a[href*="longTermPageYearlySpecial"],
    .sub-nav-list a[href="/rent/longterm/new"],
    .sub-nav-list a[href="/rent/longterm/used"]{
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    .sub-nav-list a[href*="longTermPageYearlySpecial"]:hover,
    .sub-nav-list a[href="/rent/longterm/new"]:hover,
    .sub-nav-list a[href="/rent/longterm/used"]:hover{
        transform: none !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    /* 현재 페이지 표시(원하면 서버/JS로 aria-current나 .is-active 붙여 사용) */
    .sub-nav-list a[aria-current="page"],
    .sub-nav-list a.is-active{
        background: #0b63c4 !important;
        color: #fff !important;
        border-color: #0b63c4 !important;
        box-shadow: 0 12px 24px rgba(11,99,196,.32) !important;
    }

}

/* 다크모드 대비 보강 */
@media (prefers-color-scheme: dark) and (min-width: 991px){
    .sub-nav-bar{
        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
        border-bottom-color: rgba(147,197,253,.35) !important;
        box-shadow: inset 0 8px 24px rgba(147,197,253,.12);
    }
    .sub-nav-list li a{ color: #e8f0fe !important; }
    .sub-nav-list a[href*="longTermPageYearlySpecial"],
    .sub-nav-list a[href="/rent/longterm/new"],
    .sub-nav-list a[href="/rent/longterm/used"]{
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }
    .sub-nav-list a[aria-current="page"],
    .sub-nav-list a.is-active{
        background: #0b63c4 !important;
        border-color: #0b63c4 !important;
        color: #fff !important;
    }
}

/* ===== 홈 첫 화면에서 '간편상담신청'이 가려지는 문제 패치 ===== */

/* 1) 서브네비 위로 끌어올리던 보정 무효화 */
@media (min-width: 991px){
    .nav-bar + .sub-nav-bar{
        top: 0 !important;
        transform: none !important;
        margin-top: 0 !important;
    }
}

/* 2) 서브네비를 sticky로 쓴 경우, 겹침 방지(원치 않으면 주석 해제 X) */
@media (min-width: 991px){
    .sub-nav-bar{
        position: static !important;   /* sticky 비활성화 */
        top: auto !important;
        z-index: 999;                  /* 겹침 순서만 안전하게 */
    }
}

/*!* 3) 첫 콘텐츠를 헤더(70) + 서브네비(70) 만큼 안전 여백 확보 *!*/
/*@media (min-width: 991px){*/
/*    !* 첫 섹션 후보들을 한 번에 커버 (프로젝트 구조에 맞게 남길 것만 남겨도 OK) *!*/
/*    #home, #home_pc, main, .content, article {*/
/*        margin-top: 140px !important; !* 상단 2줄 총 높이 *!*/
/*    }*/
/*}*/

/*!* 4) 태블릿/모바일(서브네비 숨김)에서는 상단바만큼만 확보 *!*/
/*@media (max-width: 990px){*/
/*    #home, #home_pc, main, .content, article {*/
/*        margin-top: 70px !important;  !* 상단 1줄 *!*/
/*    }*/
/*}*/

/* 5) 앵커 이동 시(#consult 같은) 헤더에 가려지지 않게 */
[id*="consult"], [id*="reservation"], [id*="counsel"] {
    scroll-margin-top: 140px;       /* PC */
}
/* PC: 상단 '장기렌트•리스•구독' 메뉴 텍스트 가독성 ↑ (배경 유지) */
@media (min-width: 991px){
    .nav-list .hover_menu > a{
        background: linear-gradient(135deg, rgb(238 245 255) 0%, rgb(236 242 253) 100%) !important; /* 그대로 유지 */
        color: #0f172a !important;   /* 진한 네이비 계열로 변경 */
        font-weight: 700;            /* 두께 살짝 ↑ */
        border: 1px solid rgba(37,99,235,.25) !important; /* 테두리 미세 대비 */
        border-radius: 10px;
    }
    .nav-list .hover_menu > a:hover{
        background: linear-gradient(135deg, rgba(29,78,216,.80) 0%, rgba(8,145,178,.65) 100%) !important; /* 그대로 유지 */
        color: #ffffff !important;   /* 어두운 배경에 흰 글자 */
        border-color: rgba(37,99,235,.75) !important;
    }
}

/* 드롭다운 항목도 대비만 개선(배경 유지) */
.nav-dropdown li a{
    color: #0f172a !important;
    background: transparent !important;
    font-weight: 600;
}
.nav-dropdown li a:hover{
    background: rgba(226,232,240,.45) !important; /* 연한 하이라이트 */
    color: #0f172a !important;
}

/* PC: '장기렌트•리스•구독' – 배경 유지 + hover 색상 변화 제거 */
@media (min-width: 991px){
    .nav-list .hover_menu > a{
        background: linear-gradient(135deg, rgb(238 245 255) 0%, rgb(236 242 253) 100%) !important; /* 기존 그대로 */
        color: #0f172a !important;     /* 진한 텍스트로 가독성 ↑ */
        font-weight: 700;
        border: 1px solid rgba(37,99,235,.25) !important;
        border-radius: 10px;
        text-decoration: none;
        transition: none;              /* 애니메이션 제거 */
    }

    /* 🔇 hover 시 스타일 변화 없앰 */
    .nav-list .hover_menu > a:hover{
        background: inherit !important;
        color: inherit !important;
        border-color: inherit !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }
}

@media (min-width: 991px) {
    /* 1) .hover_menu(스페셜장기렌트)의 드롭다운 자체를 숨김 + 클릭/포커스 불가 */
    .nav-list .long-term-menu > a{
        background: transparent !important;
        color: #f1f5f9 !important;
        font-weight: 600 !important;
        border: none !important;
        border-radius: 8px;
        text-decoration: none;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        display: inline-flex;
        align-items: center;
        position: relative;
        padding: 0 18px !important;
        margin: 0 4px;
    }
    .nav-list .long-term-menu > a:hover {
        color: #ffffff !important;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%) !important;
        transform: translateY(-1px);
    }
    .nav-list .long-term-menu > a.active,
    .nav-list .long-term-menu > a[aria-current="page"] {
        color: #ffffff !important;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.4) 0%, rgba(37, 99, 235, 0.35) 100%) !important;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
    }
    .nav-list .long-term-menu > a.active::before,
    .nav-list .long-term-menu > a[aria-current="page"]::before {
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 8px;
        height: 4px;
        background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 100%);
        border-radius: 2px 2px 0 0;
        box-shadow: 0 2px 12px rgba(96, 165, 250, 0.6), 0 0 8px rgba(59, 130, 246, 0.5);
    }
    .nav-list .long-term-menu > a::after{
        content: "\25BE";
        font-size: 10px;
        margin-left: 6px;
        transition: transform .25s ease;
        color: #1e293b;
    }
    .nav-list .long-term-menu:hover > a::after,
    .nav-list .long-term-menu:focus-within > a::after{
        transform: rotate(180deg);
    }
    /* 장기렌트 메뉴 활성화 상태 밑줄 - 화살표 유지 */
    .nav-list .long-term-menu > a.active,
    .nav-list .long-term-menu > a[aria-current="page"] {
        position: relative;
    }
    .nav-list .long-term-menu > a.active::before,
    .nav-list .long-term-menu > a[aria-current="page"]::before {
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 8px;
        height: 3px;
        background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%);
        border-radius: 2px 2px 0 0;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
    }
    .nav-list .long-term-menu::after{
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 18px;
        background: transparent;
    }
    .long-term-menu > .submenu-button { display: none; }
    .nav-list .long-term-menu {
        position: relative;
        z-index: 10000 !important;
    }
    .nav-list .long-term-menu > .nav-dropdown {
        position: absolute !important;
        left: 0;
        top: 100%;
        transform: translateY(12px);
        display: flex;
        flex-direction: column;
        min-width: 260px;
        padding: 10px 0;
        margin: 8px 0 0 0;
        list-style: none;
        background: #ffffff;
        border: 1px solid rgba(226, 232, 240, 0.9);
        border-radius: 14px;
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(37, 99, 235, 0.08);
        backdrop-filter: blur(12px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .2s cubic-bezier(0.4, 0, 0.2, 1), transform .25s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 10001 !important;
    }
    .nav-list .long-term-menu:hover > .nav-dropdown,
    .nav-list .long-term-menu:focus-within > .nav-dropdown{
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(6px);
    }
    .nav-list .long-term-menu > .nav-dropdown .dropdown-heading{
        font-size: 14px;
        font-weight: 700;
        color: #1e293b;
        letter-spacing: .015em;
        padding: 18px 24px 12px;
        margin: -12px 0 6px;
        text-transform: none;
        text-align: left;
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%);
        border-radius: 18px 18px 0 0;
    }
    .nav-list .long-term-menu > .nav-dropdown li{
        list-style: none;
        margin: 0;
        width: 100%;
        position: relative;
    }
    .nav-list .long-term-menu > .nav-dropdown li a{
        display: flex;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        padding: 14px 24px;
        font-size: 15px;
        font-weight: 600;
        color: #1e293b !important;
        text-decoration: none;
        transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        position: relative;
        border-left: 3px solid transparent;
        margin: 0 6px;
        border-radius: 8px;
    }
    .nav-list .long-term-menu > .nav-dropdown li a::before{
        display: none;
    }
    .nav-list .long-term-menu > .nav-dropdown li a:hover{
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(59, 130, 246, 0.06) 100%);
        color: #2563eb !important;
        border-left-color: #2563eb;
        transform: translateX(4px);
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
    }
    .nav-list .long-term-menu > .nav-dropdown li a.active,
    .nav-list .long-term-menu > .nav-dropdown li a[aria-current="page"] {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(37, 99, 235, 0.2) 100%) !important;
        color: #2563eb !important;
        border-left-color: #2563eb;
        font-weight: 700;
    }
    .nav-list .long-term-menu > .nav-dropdown li + li::before{
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        top: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(226, 232, 240, 0.6) 50%, transparent 100%);
    }
}

@media (prefers-color-scheme: dark) {
    .nav-list .long-term-menu > .nav-dropdown {
        background: rgba(26, 32, 44, 0.96);
        border-color: rgba(148, 163, 184, 0.35);
        box-shadow: 0 18px 36px rgba(15, 23, 42, 0.45);
    }
    .nav-list .long-term-menu > .nav-dropdown li + li::before{
        background: linear-gradient(90deg, transparent 0%, rgba(148, 163, 184, 0.35) 50%, transparent 100%);
    }
    .nav-list .long-term-menu > .nav-dropdown li a{
        color: #e2e8f0 !important;
        border-left-color: transparent;
    }
    .nav-list .long-term-menu > .nav-dropdown li a:hover{
        color: #93c5fd !important;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(37, 99, 235, 0.12) 100%);
        border-left-color: rgba(59, 130, 246, 0.8);
        box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
    }
    .nav-list .long-term-menu > .nav-dropdown li a.active,
    .nav-list .long-term-menu > .nav-dropdown li a[aria-current="page"] {
        color: #bfdbfe !important;
        border-left-color: rgba(59, 130, 246, 0.85);
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.32) 0%, rgba(37, 99, 235, 0.26) 100%) !important;
    }
    .nav-list .long-term-menu > a::after{
        color: #ffffff !important;
        text-shadow: 0 1px 2px rgba(15, 23, 42, 0.55);
    }
    .nav-list .long-term-menu > a:hover::after,
    .nav-list .long-term-menu > a.active::after{
        color: #ffffff !important;
    }
}

/* ===== 전역: 모든 링크/버튼 hover 시 밑줄 제거 ===== */
a:hover,
a:focus,
button:hover,
button:focus,
.btn:hover,
.btn:focus,
label:hover,
label:focus {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* ===== index 페이지 간편 상담신청 폼 placeholder 한 줄 표시 ===== */
@media (min-width: 1200px) and (max-width: 1400px) {
    #reservation-detail-name-pc::placeholder,
    #reservation-detail-phone-pc::placeholder,
    #reservation-detail-carname-pc::placeholder,
    #reservation-detail-region-pc::placeholder,
    #reservation-detail-resdate-pc::placeholder,
    #reservation-detail-details-pc::placeholder {
        font-size: 14px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #reservation-detail-name-pc,
    #reservation-detail-phone-pc,
    #reservation-detail-carname-pc,
    #reservation-detail-region-pc,
    #reservation-detail-resdate-pc,
    #reservation-detail-details-pc {
        font-size: 14px !important;
    }
}