@charset "utf-8";

/********************************************************

// * 본 스킨은 Ninny Design에서 제작되었습니다.
// * 이 파일은 저작권법의 보호를 받습니다.
// * 무단 복제, 배포, 수정, 재판매를 금지합니다.
// * 위반 시 민·형사상 법적 책임을 질 수 있습니다.

// * Developed by Ninny Design.
// * This file is protected by copyright law.
// * Unauthorized copying, distribution, modification, or resale is strictly prohibited.
// * Violators may be subject to civil and criminal penalties.

// * © 2026 Ninny Design. All rights reserved.

********************************************************/

/********************************************************
■ Header
********************************************************/
:root { --header-h:clamp(60px, 7vw, 90px); }

#nn-header { position:fixed; left:0; top:0; right:0; background:var(--bg-color); border-bottom:2px solid var(--main-color1); height:var(--header-h); z-index:var(--header-index); }
#nn-header .header-wrap { display:flex; align-items: center; justify-content: space-between; height:100%; }
#nn-header .logo a { position: relative; width:clamp(160px, 17vw, 220px); height:max(40px, 4vw); display:block; }
#nn-header .logo img { width:100%; height:100%; object-fit: contain; display:block; }


#nn-header .btn-menu-wrap { position: relative; z-index:var(--header-index); display: none; }
#nn-header .btn-menu { width:30px; height:30px; display:flex; flex-direction: column; justify-content: center; align-items: center; }
#nn-header .btn-menu span { width:100%; height:3px; border-radius:3px; background:var(--txt-color); transition-duration: .3s; }
#nn-header .btn-menu span:nth-child(2) { margin:5px 0; }




@media (max-width: 1024px) {
    #nn-header .btn-menu-wrap { display:block; }
}

@media (max-width: 768px) {
    body.menu-open { position:relative; height:100vh !important; overflow:hidden !important; }
    body.menu-open:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background:#000000cc; z-index:99; }

    body.menu-open #nn-header { background:rgba(var(--bg-color-rgb), .1); border-color:rgba(var(--main-color1-rgb), .1); }
    body.menu-open #nn-header .logo { opacity:.5; z-index:-1; }

    body.menu-open #nn-header .btn-menu span:nth-child(1) { transform: rotate(45deg); margin-bottom:-3px; }
    body.menu-open #nn-header .btn-menu span:nth-child(2) { opacity:0; visibility: hidden; margin:0; }
    body.menu-open #nn-header .btn-menu span:nth-child(3) { transform: rotate(-45deg); margin-top:-3px; }
}




/********************************************************
■ Menu
********************************************************/
#nn-menu { display: flex; align-items: center; justify-content: flex-end; flex:1; margin-left:5%; --menu-li-gap:clamp(0px, .3vw, 10px); --menu-a-gap:clamp(5px, 1.2vw, 15px); }
#nn-menu .depth1 { display:flex; justify-content: flex-end; margin-right:calc(-1 * (var(--menu-li-gap) + var(--menu-a-gap))); }
#nn-menu .depth1-li { position:relative; margin:0 var(--menu-li-gap); }
#nn-menu .btn-depth1 { display:inline-grid; padding:10px var(--menu-a-gap); font-size:clamp(1rem, 1vw, 1.125rem); }
#nn-menu .btn-depth1 span { grid-area:1/1; text-align: center; white-space: nowrap; transition-duration: .15s; }
#nn-menu .btn-depth1 .hover { opacity:0; }

#nn-menu .depth1-li:hover .btn-depth1,
#nn-menu .depth1-li.on .btn-depth1 { color:var(--main-color1); }


#nn-menu .btn-sub { display:block; padding:5px 0; color:#666; }
#nn-menu .sub-wrap:hover > li > .btn-sub { color:#ccc; }
#nn-menu .sub-wrap:hover > li > .btn-sub:hover,
#nn-menu .sub-wrap > li.on > .btn-sub { color:#000; font-weight: 600; }

#nn-menu .btn-login { margin-left:30px; font-size:.75rem; border:1px solid #333; padding:3px 10px; border-radius: 99px; }
#nn-menu .btn-login:hover { background:#333; color:#fff; }




@media (min-width: 1025px) {
    #nn-menu .sub-wrap { position:absolute; left:50%; top:calc(100% - 10px); transform: translateX(-50%); opacity:0; visibility: hidden; max-height:0; background:#fff; padding:15px 25px; overflow: hidden; min-width:150px; border:1px solid #ddd; transition: all .5s, opacity .3s; }
    #nn-menu li:hover > .sub-wrap { opacity: 1; visibility: visible; top:100%; border-radius: 5px; max-height:190px; }
}

@media (max-width: 1024px) {
    #nn-menu { position:fixed; top:0; right:calc(-1 * var(--menu-w)); width:min(var(--menu-w), 100vw); height:100vh; background:var(--bg-color); transition-duration: .6s; z-index:calc(var(--header-index) - 1); --menu-li-gap:0; --menu-w:500px; }
    body.menu-open #nn-menu { display:block; right:0; box-shadow: 0 0 20px #0000001a; }

    #nn-menu .depth1 { margin:0; padding:calc(var(--header-h)*1.5) clamp(20px, 5vw, 30px); display:block; }
    #nn-menu .depth1-li { margin-bottom:15px; }

    #nn-menu .btn-depth1 { width:100%; padding:3px 0; font-weight:600; margin-bottom:5px; }
    #nn-menu .btn-depth1 span { text-align:left; }


    #nn-menu .btn-login { position:absolute; left:clamp(20px, 5vw, 30px); top:calc(var(--header-h)/2); margin-left: 0; }
}