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

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

/********************************************************
■ Main visual
********************************************************/
.is-main { padding-top:100svh; }
#main-visual { position:fixed; left:0; top:var(--header-h); width:100vw; height:calc(100svh - var(--header-h)); }
#main-visual .swiper { height:100%; }
#main-visual .swiper-slide .image { height:100%; }
#main-visual .swiper-slide video { width:100%; height:100%; object-fit:cover; }
#main-visual .swiper-slide .youtube { position:relative; padding-bottom:56.25%; overflow:hidden; }
#main-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; }

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

#main-visual .swiper-ctrl { position:absolute; left:0; right:0; bottom:clamp(80px, 12vw, 150px); display:flex; align-items: center; justify-content: center; z-index:9; --bar-color:#222; }
#main-visual .swiper-pg { width: auto; display:flex; align-items: center; margin-right:10px; }
#main-visual .swiper-pg .progress { position:relative; width:120px; height:3px; background:rgba(255,255,255,.3); margin:0 10px; border-radius: 2px; overflow:hidden; }
#main-visual .swiper-pg .progress .bar { position: absolute; left:0; top:0; width:0; bottom:0; background:var(--bar-color); transition-duration: .5s; }

#main-visual .swiper-pg .num { font-variant-numeric:tabular-nums; }

@keyframes pbar-width {
    0% { width:0; }
    100% { width:100%; }
}

#main-visual .swiper-ctrl.white { color:#fff; --bar-color:#fff; }

@media (min-width: 769px) {
    #main-visual .swiper-slide img + video { display:none; }
}