@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 split grid
********************************************************/
#sec-split-grid { background:var(--main-color1); --bg-size:38%; --bg-gap:clamp(50px, 6.2vw, 160px); --bg-radius:clamp(50px, 10vw, 250px); }
#sec-split-grid:before { content:""; position: absolute; left:0; top:0; bottom:0; width:calc(var(--bg-size) + var(--bg-gap)); background:#fff; border-radius: 0 var(--bg-radius) var(--bg-radius) 0; z-index:-1; }

#sec-split-grid .wrap { display:grid; grid-template-columns: auto 1fr; gap:0 var(--bg-gap); max-width:calc(100% - var(--grid-gap)); --grid-gap:clamp(var(--default-padding), 4vw, 90px); }

#sec-split-grid .sec-header { display:block !important; }
#sec-split-grid .hashtag { display:grid; gap:20px; }
#sec-split-grid .hashtag button { border-radius: 10px; border:1px solid var(--main-color1); background:#fff; box-shadow: 0 5px 10px rgba(var(--main-color1-rgb), .2); font-size:clamp(14px, 1.4vw, 24px); font-weight: 600; padding:10px; color:var(--main-color1); }
#sec-split-grid .hashtag button:hover { background:var(--main-color1); color:var(--main-color2); }

#sec-split-grid .grid-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap:clamp(10px, 2vw, 50px); grid-column: 2/3; grid-row: 1/3; }

#sec-split-grid .grid-box { position: relative; border-radius: 20px; overflow: hidden; padding:clamp(30px, 3.8vw, 65px) clamp(25px, 2.5vw, 50px); color:#fff; }
#sec-split-grid .grid-box .image { position: absolute; left:0; top:0; right:0; bottom:0; background:#000; z-index:-1; }
#sec-split-grid .grid-box .image img { opacity:40%; }

#sec-split-grid .grid-box .num { color:var(--main-color2); font-weight: 600; font-size:clamp(22px, 2.2vw, 40px); line-height:1; }
#sec-split-grid .grid-box .title { font-weight: 600; font-size:clamp(18px, 1.8vw, 34px); margin:clamp(10px, 1.2vw, 20px) 0; line-height:1.2; }
#sec-split-grid .grid-box .desc { font-size:clamp(14px, 1.15vw, 20px); }
#sec-split-grid .grid-box li { position:relative; padding-left:15px; margin-top:clamp(5px, .6vw, 10px); }
#sec-split-grid .grid-box li:before { content:"- "; position:absolute; left:0; top:0; }


#sec-split-grid .grid-box.ready:before,
#sec-split-grid .grid-box.ready:after { position: absolute; z-index:9; }
#sec-split-grid .grid-box.ready:before { content:"Coming Soon"; left:0; top:0; right:0; bottom:0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; color:#fff; font-size:clamp(1.25rem, 1.5vw, 1.625rem); font-weight: 800; padding-bottom:30px; }
#sec-split-grid .grid-box.ready:after { content:""; left:50%; top:50%; transform: translate(-50%, -50%); background:url('../../img/logo.svg') no-repeat center/contain; width:clamp(160px, 15vw, 200px); height:50px; filter:grayscale(1) invert(1) brightness(10); margin-top:clamp(20px, 2.5vw, 30px); z-index:9; }

#sec-split-grid .grid-box.ready > *:nth-child(n+2) { opacity: .2; }

@media (max-width: 1360px) {
    #sec-split-grid .wrap { max-width:var(--page-width);  }
}


@media (max-width: 1024px) {
    #sec-split-grid:before { right:0; bottom:auto; width:100%; height:30%; border-radius: 0 0 var(--bg-radius) var(--bg-radius); }

    #sec-split-grid .wrap { display:block; }

    #sec-split-grid .hashtag { display:flex; justify-content: center; flex-wrap: wrap; width:auto; margin:0 auto; gap:0; margin-bottom:30px; }
    #sec-split-grid .hashtag button { margin:2px; box-shadow: 0 3px 5px rgba(var(--main-color1-rgb), .2); }
}


@media (max-width: 768px) {
    #sec-split-grid .grid-wrap { grid-template-columns: repeat(1, 1fr); max-width:400px; margin:0 auto; }
}