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

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

/********************************************************
■ sadeukju
********************************************************/
#nn-sub-top { display:none; }
.is-sub #nn-sub-conts { padding:0; width:auto; }
#sadeukju { background:var(--nn-bg-gray) url('../../img/sub/sadeukju-bg.png') no-repeat right var(--bg-v-position)/var(--bg-size) fixed; --sec-h:calc(100svh - var(--header-h)); --bg-size:contain; --bg-v-position:center; }

#sadeukju header { position:relative; padding-top:calc(var(--sec-h)/2); height:calc(var(--sec-h) + var(--sec-h)/2); }

#sadeukju header .image { position:relative; height:var(--sec-h); z-index:1; }
#sadeukju header .image:before { content: ""; position: absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.8); z-index:1; }

#sadeukju header .header-cont { position: sticky; top:var(--header-h); height:var(--sec-h); margin-top:calc(-2 * 100svh); padding-bottom:var(--header-h); display: flex; align-items: center; justify-content: center; flex-direction: column; z-index:9; }

#sadeukju header .products { display: flex; align-items: flex-end; }
#sadeukju header .products li { position: relative; width:var(--img-size); --img-size:clamp(30px, 7vw, 100px); }
#sadeukju header .products li:after { content: ''; position: absolute; left: 50%; bottom: -1px; width: 60%; height: 12px; transform: translateX(-50%); background: rgba(0,0,0,.6); border-radius: 50%; -webkit-filter: blur(4px); filter: blur(4px); z-index: 0; }

#sadeukju header .products li:nth-child(1), #sadeukju header .products li:nth-child(5) { margin-bottom:clamp(15px, 3.5vw, 50px); }
#sadeukju header .products li:nth-child(2), #sadeukju header .products li:nth-child(4) { margin-bottom:clamp(10px, 2vw, 30px); }

#sadeukju header .products img { position: relative; z-index: 1; display: block; width:100%; height:auto; }

#sadeukju header h2 { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top:clamp(20px, 5vw, 50px); }
#sadeukju header h2 span { font-size:clamp(1rem, 2vw, 1.5rem); color:var(--main-color1); }
#sadeukju header h2 b { font-weight: 600; }
#sadeukju header h2 a { font-size:clamp(1rem, 2vw, 1.25rem); font-weight: 700; border-radius: 99px; background:#111; color:#fff; padding:clamp(12px, 2vw, 20px) clamp(30px, 4vw, 50px); margin-top:15px; }

#sadeukju header h2 a:hover { background:var(--main-color1); }

#sadeukju header .image.aos-animate ~ .header-cont span { font-weight: 200; color: #fff; transition-duration: .1s !important; }
#sadeukju header .image.aos-animate ~ .header-cont b { font-weight: 200; color:#fff; transition-duration: .1s !important; transition-delay: 0s !important; }
#sadeukju header .image.aos-animate ~ .header-cont a { background:var(--main-color1); }


#sadeukju section { position: relative; padding:var(--sec-padding) 0; z-index:1; --sec-padding:clamp(65px, 10vw, 130px); }
#sadeukju section:nth-of-type(n+2) { overflow:hidden; }

#sadeukju section .sec-bg { position:absolute; left:0; top:0; right:0; bottom:0; z-index:-1; }
#sadeukju section h3 { font-size:clamp(1.5rem, 3.5vw, 3rem); }
#sadeukju section .sec-desc { margin-top:clamp(25px, 3.5vw, 50px); font-size:clamp(1rem, 2vw, 1.25rem); line-height:1.8; word-break: keep-all; }
#sadeukju section .sec-desc p { word-break: keep-all; }

#sadeukju .sec1 { text-align:center; }

#sadeukju .sec1 .sec-desc b { position: relative; padding:5px 10px; }
#sadeukju .sec1 .sec-desc b:before { content:""; position: absolute; left:0; top:0; right:0; bottom:0; width:0; background:var(--main-color1); transition:width .6s .5s; z-index:-1; }
#sadeukju .sec1 .sec-desc p.aos-animate b { color:var(--bg-color); }
#sadeukju .sec1 .sec-desc p.aos-animate b:before { width:100%; }

#sadeukju .sec1 .logo { margin-top:clamp(50px, 9vw, 100px); }
#sadeukju .sec1 .logo img { width:clamp(90px, 12vw, 130px); height:clamp(80px, 10vw, 110px); margin:0 auto; filter:grayscale(1); }




#sadeukju .sec2 { background:#fff url('../../img/sub/sadeukju-bg.png') no-repeat left var(--bg-v-position)/var(--bg-size) fixed; }
#sadeukju .sec2 .sec-desc { display: grid; grid-template-columns: auto 1fr; align-items: end; gap:10px clamp(30px, 5vw, 60px); line-height: 1.8; }

#sadeukju .sec2 .line-txt { font-size:clamp(2.5rem, 8vw, 7rem); line-height: 1; color: #fff; text-shadow: -1px -1px 0 #111, 1px -1px 0 #111, -1px  1px 0 #111, 1px  1px 0 #111; }

#sadeukju .sec2 .sec-desc span { font-size:clamp(1.25rem, 2vw, 2rem); line-height:1; display: block; margin-bottom:10px; }



#sadeukju .sec2 .episode { display:grid; grid-template-columns: repeat(3, 1fr); gap:clamp(10px, 2.2vw, 30px); margin-top:clamp(25px, 4vw, 50px); grid-column: 1/3; }
#sadeukju .sec2 .episode li { border-radius:20px; box-shadow: 3px 3px 20px rgba(0,0,0,.1); background:#fff; padding:clamp(25px, 3.5vw, 50px); display: grid; gap:10px 20px; align-content: baseline; --icon-size:clamp(60px, 5.5vw, 80px); }
#sadeukju .sec2 .episode .icon { width:var(--icon-size); height:var(--icon-size); border-radius:99px; background:var(--nn-bg-gray); box-shadow: inset 1px 1px 10px rgba(0,0,0,.05); font-size:clamp(1.625rem, 2vw, 2.5rem); display: flex; align-items: center; justify-content: center; }
#sadeukju .sec2 .episode h3 { font-size:clamp(1.25rem, 2vw, 1.5rem); margin-top:5px; }
#sadeukju .sec2 .episode p { font-size:clamp(1rem, 1.2vw, 1.25rem); color:#777; word-break: keep-all; }


#sadeukju section:nth-of-type(n+3) { color:#fff; }
#sadeukju section:nth-of-type(n+3) .sec-bg:before { content: ""; position: absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.7); z-index:2; }

#sadeukju section:nth-of-type(n+3):nth-of-type(odd) { padding-left:50%; }
#sadeukju section:nth-of-type(n+3):nth-of-type(odd) .sec-cont { padding-right:var(--default-padding); }

#sadeukju section:nth-of-type(n+3):nth-of-type(even) { padding-right:50%; }
#sadeukju section:nth-of-type(n+3):nth-of-type(even) .sec-cont { padding-left:var(--default-padding); text-align: right; }

#sadeukju .sec4 .sec-bg { bottom:-1px; }





@media (max-width: 768px) {
    #sadeukju { --bg-size: 70%; --bg-v-position:20%; }

    #sadeukju .sec1 .sec-desc p { max-width:300px; margin:0 auto; }
    #sadeukju .sec1 .sec-desc p:nth-of-type(4) { max-width:220px; }



    #sadeukju .sec2 .sec-desc { display:block; }
    #sadeukju .sec2 .line-txt { margin-bottom:15px; }

    #sadeukju .sec2 .episode { grid-template-columns: 100%; }
    #sadeukju .sec2 .episode li { grid-template-columns: var(--icon-size) 1fr; }
    #sadeukju .sec2 .episode li .icon { grid-row: 1/3; }



    #sadeukju section:nth-of-type(n+3) { padding-left:0 !important; padding-right: 0 !important; }
    #sadeukju section:nth-of-type(n+3) .sec-cont { padding:0 var(--default-padding); }
}