@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 swiper center focus
********************************************************/
#sec-sw-center-focus { }
#sec-sw-center-focus .wrap { position: relative; }
#sec-sw-center-focus .swiper-wrap { position:relative; --swiper-size:clamp(200px, 50vw, 500px); z-index:2; }

#sec-sw-center-focus .tab-btns { position: absolute; left:var(--default-padding); top:50%; transform: translateY(-50%); width:clamp(110px, 10vw, 150px); display:grid; gap:10px; z-index:9; }
#sec-sw-center-focus .tab-btns button { border-radius: 99px; background:#fff; border:1px solid #ddd; padding:10px; }
#sec-sw-center-focus .tab-btns button.on { background:var(--main-color1); border-color:var(--main-color1); color:#fff; }

#sec-sw-center-focus .swiper-main { margin:0 auto; width:var(--swiper-size); }
#sec-sw-center-focus .swiper-slide .image { padding-bottom:100%; }
#sec-sw-center-focus .swiper-slide img { object-fit: contain; }


#sec-sw-center-focus .swiper-main .swiper-slide:not(.swiper-slide-active) { opacity: 0 !important; }
#sec-sw-center-focus .swiper-main .swiper-slide.swiper-slide-active { opacity: 1; }

#sec-sw-center-focus .swiper-nav { position: absolute; top:50%; transform: translateY(-50%); z-index:9; --nav-gap:20px; --nav-position:calc(50% - var(--swiper-size)/2 - var(--nav-gap) - var(--default-padding)); }
#sec-sw-center-focus .swiper-prev { left:var(--nav-position); margin-left:calc(-1 * var(--circle-size)); }
#sec-sw-center-focus .swiper-next { right:var(--nav-position); margin-right:calc(-1 * var(--circle-size)); }


#sec-sw-center-focus .swiper-thumbs { overflow:visible; padding-bottom:clamp(30px, 10vw, 60px); margin-top:clamp(10px, 2vw, 30px); --bar-size:clamp(2px, .8vw, 5px); }
#sec-sw-center-focus .swiper-thumbs:before,
#sec-sw-center-focus .swiper-thumbs:after { content:""; position:absolute; left:50%; top:calc(-1 * clamp(60px, 18vw, 190px)); width:100vw; transform: translateX(-50%); z-index:-1; }

#sec-sw-center-focus .swiper-thumbs:before { background:var(--main-color1); bottom:0; }
#sec-sw-center-focus .swiper-thumbs:after { background:linear-gradient(180deg, var(--main-color2) var(--bar-size), transparent var(--bar-size), transparent calc(100% - var(--bar-size)), var(--main-color1) calc(100% - var(--bar-size))); height:calc(var(--bar-size) * 4); margin-top:calc(-1 * var(--bar-size)*6); }


#sec-sw-center-focus .swiper-thumbs .swiper-slide { border-radius: 100%; background:#ffffff33; padding: 2%; transition-duration: .5s; }
#sec-sw-center-focus .swiper-thumbs .swiper-slide-thumb-active { background:#fff; transform: scale(1.1); box-shadow:10px 10px 20px #00000080; }



@media (max-width: 768px) {
    #sec-sw-center-focus .tab-btns { position: relative; display:flex; flex-wrap: wrap; justify-content: center; width:100%; gap:0; transform: translateY(0); margin:0 -2px 20px; }
    #sec-sw-center-focus .tab-btns button { padding:7px 20px; margin:2px; font-size:.875rem; }

    #sec-sw-center-focus .swiper-nav { --nav-position:var(--circle-size); }
}