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

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

/********************************************************
■ Footer Branch
********************************************************/
#footer-branch { position: relative; background:#f1f1f1; z-index:1; }
#footer-branch .swiper-wrapper { transition-timing-function: linear; }
#footer-branch .swiper-slide { width:clamp(100px, 12vw, 150px); text-align: center; }
#footer-branch .swiper-slide img { width:100%; max-height:clamp(80px, 9vw, 130px); object-fit: cover; }

@media (max-width: 768px) {
    #footer-branch .swiper-wrapper { transition-duration: 3s !important; }
}


/********************************************************
■ Footer
********************************************************/
#nn-footer { position:relative; background:#1e1e1e; color:var(--txt-color); text-align: center; padding:clamp(25px, 12vw, 40px) 0; --txt-color:#ffffffe6; }

#nn-footer .footer-nav ul { display:flex; flex-wrap:wrap; align-items:center; justify-content: center; --nav-color:#ffffff80; }
#nn-footer .footer-nav li { position:relative; margin:0 5px; }
#nn-footer .footer-nav li:not(:first-child):before { content:""; position:absolute; left:-5px; top:3px; bottom:3px; width:1px; background:var(--nav-color); }
#nn-footer .footer-nav a { display:block; padding:0 5px; color:var(--nav-color); }
#nn-footer .footer-nav a:hover { color:var(--txt-color); }

#nn-footer .footer-logo { margin:clamp(25px, 5vw, 45px) 0 clamp(5px, 1.4vw, 15px); }
#nn-footer .footer-logo img { filter: grayscale(1) invert(1) brightness(10); width:clamp(150px, 12vw, 200px); }

#nn-footer address .row { display:flex; align-items: center; flex-wrap:wrap; justify-content: center; }
#nn-footer address span { display:flex; align-items: center; margin:2px 5px; line-height:1.2; }
#nn-footer address strong { white-space:nowrap; margin-right:5px; align-self: flex-start; }


#nn-footer .footer-utils { display:flex; justify-content: center; flex-wrap: wrap; margin-top:clamp(25px, 4vw, 40px); --sns-size:clamp(40px, 6vw, 50px); }
#nn-footer .footer-utils nav { margin:0 5px; }

#nn-footer .sns-nav { display:flex; justify-content: center; }
#nn-footer .sns-nav a { background:#fff; border-radius: 99px; width:var(--sns-size); height:var(--sns-size); padding:11px; margin:0 2px; }
#nn-footer .sns-nav a[href="#"] { display:none; }

#nn-footer .sns-nav a img { width:100%; height:100%; object-fit: contain; filter:grayscale(1) invert(1) brightness(0); }


#nn-footer .family-nav { position:relative; width: 160px; }

#nn-footer .btn-family { display:flex; align-items: center; justify-content: space-between; width:100%; height:100%; min-height:var(--sns-size); padding:0 15px; border:1px solid var(--txt-color); border-radius: 10px; }

#nn-footer .family-list { position:absolute; left:0; right:0; bottom:100%; border:1px solid #ddd; background:#fff; opacity:0; visibility:hidden; transform:translateY(10px); border-radius: 10px 10px 0 0; padding:5px 0; transition:opacity .2s ease, transform .2s ease; }
#nn-footer .family-list a { display:block; padding:5px; color:#111; opacity:0; }

#nn-footer .family-list:hover a { color:#ccc; }
#nn-footer .family-list:hover a:hover { color:#101010; }

#nn-footer .family-nav.open .btn-family { border-top-left-radius: 0; border-top-right-radius: 0; }
#nn-footer .family-nav.open .family-list { opacity:1; visibility:visible; transform:translateY(0); }
#nn-footer .family-nav.open .family-list a { opacity:1; transition-delay: .05s; }



@media (max-width: 768px) {
    #nn-footer { font-size:.875rem; }

    #nn-footer address .row,
    #nn-footer .footer-utils { flex-direction: column; justify-content: center; align-items: center; }

    #nn-footer .btn-family { margin-top:10px; }

    #nn-footer .sns-nav a { padding:9px; }
}

@media (max-width: 480px) {
    #nn-footer address .adr { opacity:0; visibility: hidden; position:absolute; }
}