@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.

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

/********************************************************
■ Sub visual
********************************************************/
:root { --sub-visual-h:clamp(120px, 18vw, 300px); }
#sub-visual { position: relative; height:var(--sub-visual-h); }
#sub-visual .swiper { height:100%; }
#sub-visual .swiper-slide:before { content:""; position: absolute; left:0; top:0; right:0; bottom:0; background:#000000b3; z-index:2; }

#sub-visual .swiper-slide .image { height:100%; }
#sub-visual .swiper-slide video { width:100%; height:100%; object-fit:cover; }
#sub-visual .swiper-slide .youtube { position:relative; padding-bottom:56.25%; overflow:hidden; }
#sub-visual .swiper-slide iframe { position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); width: 100vw; height: calc(100vw / 1.77); min-height: 180vh; min-width: 250vh; }

#sub-visual .swiper-slide video,
#sub-visual .swiper-slide iframe { pointer-events:none; }


#sub-visual .sub-txt { position:absolute; left:0; top:50%; right:0; transform: translateY(-50%); text-align:center; color:#fff; z-index:2; }
#sub-visual .sub-txt .sub-title { font-size:clamp(1.5rem, 2.6vw, 3rem); }
#sub-visual .sub-txt .sub-desc { margin-top:clamp(5px, .8vw, 10px); }




/********************************************************
■ Sub menu
********************************************************/
:root { --sub-menu-h:clamp(50px, 2vw, 70px); }
#nn-sub-menu { position: relative; border-bottom:1px solid #ddd; z-index:9; }
#nn-sub-menu .sub-menu-wrap { display:flex; align-items: center; }
#nn-sub-menu .depth-wrap { position: relative; --sub-menu-gap:clamp(15px, 2vw, 20px); }
#nn-sub-menu .depth-wrap.home { margin-right:var(--sub-menu-gap); }
#nn-sub-menu .depth-wrap:not(:first-of-type) { border-left:1px solid #ddd; min-width: 200px; }

#nn-sub-menu button { display: flex; align-items: center; padding:clamp(12px, 2vw, 20px) var(--sub-menu-gap); justify-content: space-between; width:100%; }
#nn-sub-menu button span { margin-right:10px; }
#nn-sub-menu button i { font-size:.75em; transition-duration: .2s; }
#nn-sub-menu .depth-wrap.on i { transform: scaleY(-1); }


#nn-sub-menu .menu-list { position: absolute; left:-1px; top:100%; min-width:calc(100% + 1px); background:#fff; margin-top:-5px; max-height:0; opacity:0; visibility: hidden; padding:clamp(10px, 1vw, 15px) clamp(15px, 2vw, 25px); overflow: hidden; border:1px solid #ddd; transition: all .5s, opacity .3s; z-index:9; }

#nn-sub-menu .depth-wrap.on .menu-list { opacity:1; visibility: visible; margin-top:0; }

#nn-sub-menu .menu-name { white-space: nowrap; display:block; padding:clamp(3px, .5vw, 5px) 0; }
#nn-sub-menu li:hover .menu-name,
#nn-sub-menu li.on .menu-name { color:var(--main-color1); }


@media (max-width: 768px) {
    #nn-sub-menu { font-size:.875rem; }
    #nn-sub-menu .depth-wrap:not(:first-of-type) { min-width:0; flex:1; }

    #nn-sub-menu .menu-name { white-space: wrap; }
}