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

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

/********************************************************
■ Seobongju
********************************************************/
#nn-sub-top { display:none; }
.is-sub #nn-sub-conts { padding:0; width:auto; }
#seobongju { background:var(--nn-bg-gray) url('../../img/sub/seobongju-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; }

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

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

#seobongju 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; }

#seobongju header .products { display: flex; align-items: flex-end; }
#seobongju header .products li { position: relative; width:var(--img-size); --img-size:clamp(30px, 7vw, 100px); }
#seobongju 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; }

#seobongju header .products li:nth-child(n+4) { width:calc(var(--img-size)*.9); }
#seobongju header .products li:nth-child(9) { width:calc(var(--img-size)*1.1); margin-left:clamp(-5px, -.9vw, -15px); }
#seobongju header .products li:nth-child(1), #seobongju header .products li:nth-child(9) { margin-bottom:clamp(15px, 3.5vw, 50px); }
#seobongju header .products li:nth-child(2), #seobongju header .products li:nth-child(8) { margin-bottom:clamp(10px, 2vw, 30px); }
#seobongju header .products li:nth-child(3), #seobongju header .products li:nth-child(7) { margin-bottom:clamp(5px, .8vw, 10px); }

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

#seobongju header h2 { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top:clamp(20px, 5vw, 50px); }
#seobongju header h2 span { font-size:clamp(1rem, 2vw, 1.5rem); color:var(--main-color1); }
#seobongju header h2 b { font-weight: 600; }
#seobongju 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; }

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

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


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

#seobongju section .sec-bg { position:absolute; left:0; top:0; right:0; bottom:0; z-index:-1; }
#seobongju section h3 { font-size:clamp(1.5rem, 3.5vw, 3rem); }
#seobongju 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; }
#seobongju section .sec-desc p { word-break: keep-all; }

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

#seobongju .sec1 .sec-desc b { position: relative; padding:5px 10px; }
#seobongju .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; }
#seobongju .sec1 .sec-desc p.aos-animate b { color:var(--bg-color); }
#seobongju .sec1 .sec-desc p.aos-animate b:before { width:100%; }

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




#seobongju .sec2 { background:#fff url('../../img/sub/seobongju-bg.png') no-repeat left var(--bg-v-position)/var(--bg-size) fixed; --tit-gap:20px; }
#seobongju .sec2 .history { display:grid; grid-template-columns: 25% 1fr; margin-top:clamp(45px, 7vw, 100px); }
#seobongju .sec2 .history-tit { position: relative; padding-bottom:var(--tit-gap); margin-bottom: var(--tit-gap); font-weight: 700; font-size:clamp(1rem, 3vw, 1.25rem); }
#seobongju .sec2 .history-bc { border-right:2px solid #333; }
#seobongju .sec2 .history-ad { padding-left:var(--ad-gap); --ad-gap:clamp(25px, 3.2vw, 50px); }
#seobongju .sec2 .history-tit:before { content:""; position: absolute; left:0; right:0; bottom:0; border-bottom:2px dashed #111; z-index:-1; }
#seobongju .sec2 .history-tit:after { position:absolute; bottom:0; transform: translateY(50%); font-family: "Font Awesome 7 Free"; font-weight:900;  }

#seobongju .sec2 .history-ad .history-tit:before { left:calc(-1 * var(--ad-gap)); }
#seobongju .sec2 .history-bc .history-tit:after { content:"\f104"; left:0; animation: bounceLeft 1.2s infinite linear; }
#seobongju .sec2 .history-ad .history-tit:after { content:"\f105"; right:0; animation: bounceRight 1.2s infinite linear; }

@keyframes bounceLeft {
  0%, 100% { transform: translate(0, 50%); }
  25% { transform: translate(-50%, 50%); }
  50% { transform: translate(-100%, 50%); }
  75% { transform: translate(-50%, 50%); }
}

@keyframes bounceRight {
  0%, 100% { transform: translate(0, 50%); }
  25% { transform: translate(50%, 50%); }
  50% { transform: translate(100%, 50%); }
  75% { transform: translate(50%, 50%); }
}

@keyframes bounceUp {
  0%, 100% { transform: translate(50%, 0); }
  25% { transform: translate(50%, -50%); }
  50% { transform: translate(50%, -100%); }
  75% { transform: translate(50%, -50%); }
}

@keyframes bounceDown {
  0%, 100% { transform: translate(50%, 0); }
  25% { transform: translate(50%, 50%); }
  50% { transform: translate(50%, 100%); }
  75% { transform: translate(50%, 50%); }
}

#seobongju .sec2 .history ul { display:flex; padding-top:10px; }
#seobongju .sec2 .history li { display: grid; gap:10px; flex:1; }
#seobongju .sec2 .history li span { color:#666; }



#seobongju section:nth-of-type(n+3) { color:#fff; }
#seobongju 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; }

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

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

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




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

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



  #seobongju .sec2 { --tit-gap:30px; }
  #seobongju .sec2 .history { grid-template-columns: 100%; grid-template-rows: auto auto; }
  #seobongju .sec2 .history > div { display:grid; grid-template-columns: 120px 1fr; --}

  #seobongju .sec2 .history-bc { border-right:none; border-bottom:2px solid #111; padding-bottom:var(--tit-gap); margin-bottom:var(--tit-gap); }
  #seobongju .sec2 .history-ad { padding-left:0; }

  #seobongju .sec2 .history-tit { padding:0 var(--tit-gap) 0 0; margin:0 var(--tit-gap) 0 0; }
  #seobongju .sec2 .history-tit:before { top:0; right:-2px; bottom:0px; border-bottom:none; border-right:2px dashed #111; }
  #seobongju .sec2 .history-tit:after { right:0; height:16px; display:flex; align-items: center; }

  #seobongju .sec2 .history-bc .history-tit:before { bottom:calc(-1 * var(--tit-gap)); }
  #seobongju .sec2 .history-ad .history-tit:before { top:calc(-1 * var(--tit-gap)); }
  #seobongju .sec2 .history-bc .history-tit:after { content:"\f106"; left:auto; top:0; bottom:auto; animation-name: bounceUp; }
  #seobongju .sec2 .history-ad .history-tit:after { content:"\f107"; animation-name: bounceDown; }

  #seobongju .sec2 .history ul { display:grid; gap:30px; padding:0 0 0 20px; }
  #seobongju .sec2 .history li { transform: translateX(100px); }
  #seobongju .sec2 .history li.aos-animate { transform: translateX(0); }



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