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

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

/********************************************************
■ Section branch map
********************************************************/
#sec-branch-map { --tab-color1:rgba(var(--main-color1-rgb), .7); --tab-color2:#90ba36b3; --tab-color3:#1685cbb3; --tab-color4:#353535b3; }
#sec-branch-map .sec-header { display:block; }
#sec-branch-map .map-wrap { display:grid; grid-template-columns: repeat(2, 1fr); gap:clamp(10px, 1.2vw, 40px); text-align: center; }

#sec-branch-map .map { position: relative; background:#fdf0d2; padding:13% 10%; border-radius: clamp(10px, 2vw, 20px); }
#sec-branch-map .map .image { padding-bottom:140%; }
#sec-branch-map .map img { object-fit: contain; }

#sec-branch-map .spot { position:absolute; border-radius: 100%; width:var(--spot-size); height:var(--spot-size); display: flex; align-items: center; justify-content: center; font-size:clamp(20px, 2.7vw, 32px); color:#fff; font-weight: 600; transform: translate(-50%, -50%); z-index:1; }
#sec-branch-map .spot:before { content: ""; position: absolute; left:0; top:0; width:100%; height:100%; border-radius: 50%; background:inherit; opacity:.5; animation: nnPulse 2s ease-out infinite; -webkit-animation: nnPulse 1.7s ease-out infinite; z-index:-1; }

#sec-branch-map .seoul { left:33%; top:25%; background:var(--tab-color1); --spot-size:clamp(110px, 10vw, 140px); }
#sec-branch-map .gyeonggi { left:46%; top:37.5%; background:var(--tab-color2); --spot-size:clamp(100px, 8.8vw, 120px); }
#sec-branch-map .incheon { left:23%; top:37%; background:var(--tab-color3); --spot-size:clamp(100px, 8.8vw, 120px); }
#sec-branch-map .etc { left:65%; top:65%; background:var(--tab-color4); --spot-size:clamp(150px, 15vw, 200px); }


@keyframes nnPulse {
    0% { transform: scale(1); opacity: .5; }
    100% { transform: scale(1.2); opacity: 0; }
}
@-webkit-keyframes nnPulse {
    0% { -webkit-transform: scale(1); opacity: .5; }
    100% { -webkit-transform: scale(1.2); opacity: 0; }
}



#sec-branch-map .branch h3 { margin-bottom:clamp(7px, 1.2vw, 15px); }
#sec-branch-map .nn-tab-btns { display:grid; grid-auto-flow: column; gap:0 clamp(3px, .8vw, 10px); }
#sec-branch-map .nn-tab-btns button { border:1px solid #ddd; border-radius: 5px; padding:clamp(7px, 1vw, 10px); }
#sec-branch-map .nn-tab-btns button.on { background:#333; color:#fff; border-color: #333; }


#sec-branch-map .nn-tab-conts { margin-top:clamp(7px, 1.2vw, 15px); border-radius:15px; overflow:hidden; border:1px solid #ddd; background:#f8f8f8; }
#sec-branch-map .nn-tab-conts .cont:not(.on) { display:none; }

#sec-branch-map .nn-tab-conts tr > * { padding:12px; }
#sec-branch-map .nn-tab-conts tr > th:first-child { border-right:1px solid #ddd; }
#sec-branch-map .nn-tab-conts .cont:nth-child(1) thead { background:linear-gradient(45deg, rgba(var(--main-color2-rgb),.4), var(--tab-color1)); }
#sec-branch-map .nn-tab-conts .cont:nth-child(2) thead { background:linear-gradient(45deg, var(--tab-color2), var(--tab-color3)); }
#sec-branch-map .nn-tab-conts .cont:nth-child(3) thead { background:linear-gradient(45deg, #222, var(--tab-color4)); color:#fff; }
#sec-branch-map .nn-tab-conts tbody tr:not(:last-child) { border-bottom:1px solid #ddd; }

#sec-branch-map .nn-tab-conts col:nth-child(1) { width:35%; }

#sec-branch-map .nn-tab-conts a { display:block; }



@media (max-width: 1024px) {
    #sec-branch-map .map-wrap { display:block; }
    #sec-branch-map .map { max-width:500px; margin:0 auto; padding:10% 7%; }

    #sec-branch-map .branch { margin-top:clamp(25px, 4vw, 50px); }
    #sec-branch-map .nn-tab-btns button { font-size:.875rem; }
}


@media (max-width: 400px) {
    #sec-branch-map .seoul { --spot-size:clamp(90px, 10vw, 140px); }
    #sec-branch-map .gyeonggi { --spot-size:clamp(80px, 8.8vw, 120px); }
    #sec-branch-map .incheon { --spot-size:clamp(80px, 8.8vw, 120px); }
    #sec-branch-map .etc { --spot-size:clamp(120px, 15vw, 200px); }
}