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

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

/********************************************************
■ company
********************************************************/
#nn-sub-top { display:none; }
.is-sub #nn-sub-conts { padding:0; width:auto; }

#company p { font-size:clamp(1rem, 2vw, 1.25rem); word-break: keep-all; }


#company header { position: fixed; left:0; top:var(--header-h); right:0; bottom:0; z-index:0; text-align: center; display: flex; align-items: center; color:#fff; }
#company header .image { position: absolute; left:0; top:0; right:0; bottom:0; z-index:-1; }
#company header .image:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.6); z-index:2; }

#company header .header-cont { margin-bottom:var(--quick-form-h); }
#company header .header-cont img { max-width:clamp(200px, 23vw, 400px); margin:0 auto; filter:grayscale(1) invert(1) brightness(10); }
#company header h2 { font-size:clamp(1rem, 1.8vw, 2rem); }
#company header .desc { margin-top:clamp(30px, 3vw, 60px); line-height:1.8; }


#company section { position: sticky; top:var(--header-h); min-height:var(--sec-height); background:#fff; padding:var(--sec-padding) 0 calc(var(--sec-padding) + var(--quick-form-h)); box-shadow: 0 0 20px rgba(0,0,0,.1); overflow:hidden; z-index:1; --sec-padding:clamp(50px, 8vw, 100px); --sec-height:calc(100svh - var(--header-h)); --sec-title-bottom:clamp(25px, 3vw, 50px); }

#company section[style*="--sec-real-h"] { top:calc(100svh - var(--sec-real-h)); }
#company section .sec-bg { position:absolute; left:0; top:0; right:0; bottom:0; z-index:-1; }
/*#company section .sec-bg:before { content: ""; position: absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.7); z-index:2; }*/
#company section h3 { font-size:clamp(1.375rem, 2.2vw, 2.5rem); }
#company section .sec-title { margin-bottom:var(--sec-title-bottom); }
#company section .sec-title p { color:#777; margin-top:5px; }


#company .sec1 { margin-top:var(--sec-height); background:var(--nn-bg-gray); }
#company .sec1 .sec-cont { display: grid; grid-template-columns:repeat(2, 1fr); gap:clamp(30px, 4.5vw, 80px); }
#company .sec1 .sec-cont .cont { display:flex; justify-content: space-between; align-items: center; align-content: baseline; flex-wrap: wrap; }

#company .sec1 .cont-title { font-size:clamp(1.125rem, 1.8vw, 1.5rem); font-weight: 600; line-height:40px; }
#company .sec1 .img-box { width:100%; padding:clamp(15px, 3.3vw, 30px); height:clamp(160px, 20vw, 250px); display:flex; align-items: center; justify-content: center; border:1px solid #ddd; margin-top:5px; text-align: center; }
#company .sec1 .img-box img { max-width:clamp(200px, 20vw, 400px); max-height:clamp(45px, 10vw, 90px); }

#company .sec1 dl { width:100%; margin-top:clamp(10px, 2vw, 20px); }
#company .sec1 dt { font-size:clamp(1rem, .8vw, 1.125rem); font-weight:700; }
#company .sec1 dd { margin-top:5px; color:#777; }
#company .sec1 dd:not(:last-child) { margin-bottom:20px; }


#company .sec1 .btn-wrap { text-align: right; display:flex; }
#company .sec1 .btn-download { padding:10px 20px; display: inline-block; background:#111; color:#fff; margin-left:auto; }


@media (max-width: 768px) {
    #company .sec1 .sec-cont { grid-template-columns: 100%; }
    #company .sec1 .sec-cont .cont { margin-top:40px; }
    #company .sec1 dd { font-size:.875rem; }
}


#company .sec2 { text-align: center; }
#company .sec2 .sec-title { text-align: left; }
#company .sec2 .sec-cont { display:inline-block; text-align: center; padding:50px clamp(50px, 7vw, 100px); border-radius: 999px; border:1px solid var(--main-color1); }
#company .sec2 .cont-title { font-size:clamp(1rem, 1.2vw, 1.375rem); font-weight: 700; display: inline-block; border-bottom:2px solid var(--main-color1); margin-bottom:20px; color:var(--main-color1); }
#company .sec2 ul { display: grid; grid-template-columns: repeat(4, calc(var(--circle-size)/1.1)); align-items: center; justify-content: center; --circle-size:clamp(200px, 16vw, 260px); }
#company .sec2 li { position: relative; left: 50%; width:var(--circle-size); height:var(--circle-size); margin-left:calc(-1 * var(--circle-size)/2); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 999px; color:#fff; }
#company .sec2 li:nth-of-type(1) { background:var(--main-color1); }
#company .sec2 li:nth-of-type(2) { background:#bfa14a; transition-delay: .1s; }
#company .sec2 li:nth-of-type(3) { background:#ead7a3; transition-delay: .2s; color:#2b1d0e; }
#company .sec2 li:nth-of-type(4) { background:#2b1d0e; transition-delay: .3s; }

#company .sec2 li i { font-size:clamp(1.625rem, 2.5vw, 2.5rem); }
#company .sec2 li strong { font-size:clamp(1.25rem, 1.4vw, 1.5rem); margin:10px 0 5px; }


@media (max-width: 1024px) {
    #company .sec2 .sec-cont { border-radius: 150px; }
    #company .sec2 ul { grid-template-columns: repeat(2, calc(var(--circle-size)/1.1)); grid-template-rows: repeat(2, calc(var(--circle-size)/1.1)); margin-bottom:10px; }
    #company .sec2 li:nth-of-type(3) { transition-delay: 0s; }
    #company .sec2 li:nth-of-type(4) { transition-delay: .1s; }

}

@media (max-width: 768px) {
    #company .sec2 ul { grid-template-columns: calc(var(--circle-size)/1.1); grid-template-rows: repeat(4, calc(var(--circle-size)/1.1)); }
     #company .sec2 li:nth-of-type(2),
     #company .sec2 li:nth-of-type(4) { transition-delay: 0s; }
}



#company .sec3 { background: var(--nn-bg-gray); }
#company .sec3 ul { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: clamp(20px, 4.5vw, 50px) clamp(25px, 4.5vw, 50px); align-items: center; grid-auto-flow: row dense; }
#company .sec3 li:nth-child(4n+3) { grid-column: 2/3; }
#company .sec3 li:nth-child(4n+4) { grid-column: 1/2; }
#company .sec3 li:nth-child(odd) { position: relative; border-radius:20px; overflow:hidden; background:no-repeat center/cover; height:320px; padding:5% 10%; display:flex; align-items: center; justify-content: center; }
#company .sec3 li:nth-child(odd):before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.6); z-index:0; }
#company .sec3 li:nth-child(1) { background-image:url('../../img/sub/company-seobongju-bg.jpg'); }
#company .sec3 li:nth-child(3) { background-image:url('../../img/sub/company-sadeukju-bg.jpg'); }
#company .sec3 li:nth-child(5) { background-image:url('../../img/sub/company-purcari-bg.jpg'); }
#company .sec3 li:nth-child(7) { background-image:url('../../img/sub/company-bostavan-bg.jpg'); }

#company .sec3 li img { max-width:clamp(200px, 16vw, 250px); max-height:clamp(120px, 10vw, 150px); filter:grayscale(1) invert(1) brightness(10); }

#company .sec3 dt { font-size:clamp(1.125rem, 1.2vw, 1.375rem); margin-bottom:clamp(5px, 1vw, 15px); font-weight: 600; }
#company .sec3 dd { color:#777; line-height:1.7; }


@media (max-width: 768px) {
    #company .sec3 ul { grid-template-columns: 100%; }
    #company .sec3 li:nth-child(4n+3) { grid-column: 1/2; }

    #company .sec3 li:nth-child(even) { padding:0 10px; }
    #company .sec3 li:nth-child(even):not(:last-child) { margin-bottom:30px; }

    #company .sec3 dd { line-height: 1.5; }
}




#company .sec4 { background:#111; }
#company .sec4 .sec-bg { opacity:.2; }
#company .sec4 .sec-title { color:#fff; }
#company .sec4 .sec-cont { display: grid; grid-template-columns: repeat(3, 1fr); gap:clamp(30px, 4vw, 50px); }
#company .sec4 .card { border-radius: 30px; background:#fff; border:1px solid #eee; box-shadow: 0 0 10px rgba(0,0,0,.1); padding:clamp(25px, 3.2vw, 40px); display:flex; flex-direction: column; }
#company .sec4 .card:nth-child(2) { transition-delay: .2s; }
#company .sec4 .card:nth-child(3) { transition-delay: .4s; }

#company .sec4 .icon { width:clamp(70px, 8vw, 100px); height:clamp(70px, 8vw, 100px); border-radius: 99px; padding:10px; display: flex; align-items: center; justify-content: center; background:#eee; box-shadow: inset 0 0 5px rgba(0,0,0,.03); margin-bottom:clamp(10px, 2.5vw, 20px); }
#company .sec4 .icon img { width:60%; height:60%; }
#company .sec4 h4 { font-size:clamp(1.25rem, 1.5vw, 1.5rem); margin-bottom:10px; }
#company .sec4 span { display: block; color:#777; word-break: break-word; }

#company .sec4 ul { margin-top:clamp(20px, 2.2vw, 30px); }
#company .sec4 li { position: relative; padding-left:10px; margin-bottom:5px; }
#company .sec4 li:before { content: ""; position: absolute; left:0; top:8px; width:3px; height:3px; border-radius: 4px; background:#111; }



@media (max-width: 1024px) {
    #company .sec4 .sec-cont { grid-template-columns: 100%; }
}



#company .sec5 { background:var(--nn-bg-gray); overflow:visible; --title-size:clamp(30px, 2.5vw, 55px); }
#company .sec5 .wrap { padding-bottom:clamp(50px, 8vw, 100px); }
#company .sec5 .sec-title { position: sticky; top: calc(var(--header-h) + var(--sec-padding)); height:var(--title-size); bottom:0; line-height: 1.4; transition-duration: .2s; z-index:9; }

#company .sec5 ul { --year-size:clamp(200px, 8vw, 400px); --month-size:clamp(55px, 5vw, 70px); }
#company .sec5 li { display: grid; grid-template-columns: minmax(250px, 40%) 1fr; align-items: start; transition-duration: .2s; }
#company .sec5 li.off { color:#eee; }
#company .sec5 li:not(:last-child) { padding-bottom:clamp(50px, 8vw, 100px); }
#company .sec5 li:last-child { height:0; }


#company .sec5 h4 { position: sticky; top:calc(var(--header-h) + var(--sec-padding) + var(--title-size) + var(--sec-title-bottom)); font-size:clamp(3rem, 5vw, 5rem); font-weight: 700; line-height: 1; }
#company .sec5 li.off h4 { z-index:0; }


#company .sec5 dl { position: relative; display: grid; grid-template-columns: var(--month-size) 1fr; gap:20px 0; padding:5px 0; --line-position:-70px; }
#company .sec5 dl::before { content: ""; position: absolute; left: var(--line-position); top:0; bottom:-100px; width: 1px; background: #ddd; }
#company .sec5 dt { position: relative; font-weight: 700; }
#company .sec5 dt:nth-of-type(1):before { content:""; position: absolute; left:var(--line-position); top:5px; transform: translateX(-50%); width:11px; height:11px; border:3px solid var(--main-color1); border-radius: 99px; }
#company .sec5 dd {  }


@media (max-width: 768px) {
    #company .sec5 .wrap { padding-bottom:0; }

    #company .sec5 .sec-title,
    #company .sec5 h4 { position: relative; top:0; }

    #company .sec5 li { grid-template-columns: 100%; }
    #company .sec5 li.off { color:inherit; }

    #company .sec5 dl { margin-left:calc(-1 * var(--line-position) + 5px); margin-top:10px; --line-position:-20px; }
    #company .sec5 dl::before { bottom:0; }
}




#company .sec6 .cont-info .logo { height:clamp(30px, 4.5vw, 50px); margin-bottom:clamp(5px, 1.5vw, 15px); }
#company .sec6 .cont-info .logo img { height: 100%; object-fit: contain; }

#company .sec6 .sec-cont { display: grid; grid-template-columns: 33% 1fr; gap:clamp(25px, 5vw, 50px); font-size:1.125rem; --adr-gap:clamp(15px, 3vw, 30px); }
#company .sec6 .sec-cont .root_daum_roughmap { width:100% !important; }
#company .sec6 .sec-cont .cont,
#company .sec6 .sec-cont .wrap_controllers  { display:none; }

#company .sec6 .sec-cont .address { border-bottom:1px solid #ddd; padding-bottom:var(--adr-gap); margin-bottom:var(--adr-gap); }
#company .sec6 .sec-cont dl { display: grid; grid-template-columns: auto 1fr; gap:5px clamp(15px, 2vw, 25px); }
#company .sec6 .sec-cont dt { color:#777; font-weight:300; }

#company .sec6 .sec-cont ul { display: flex; align-items: center; flex-wrap: wrap; margin-top:var(--adr-gap); }
#company .sec6 .sec-cont li { margin-right:5px; margin-bottom:5px; }
#company .sec6 .sec-cont li a { display: flex; align-items: center; padding:7px 15px; border-radius: 99px; border:1px solid #ddd; font-size:.875rem; }
#company .sec6 .sec-cont li a:hover { box-shadow: 0 3px 10px rgba(0,0,0,.1); }
#company .sec6 .sec-cont li a img { width:20px; height:20px; object-fit: contain; border-radius:99px; background:#eee; margin-right:3px; }



@media (max-width: 1024px) {
    #company .sec6 .cont-info { order:2; }

    #company .sec6 .sec-cont { grid-template-columns: 100%; font-size:1rem; }
    #company .sec6 .sec-cont ul { flex-direction: column; }
    #company .sec6 .sec-cont li { margin-bottom:3px; }
    #company .sec6 .sec-cont li a { width:120px; }
}