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

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

/********************************************************
■ CEO
********************************************************/
#ceo { position: relative; font-size:clamp(1rem, 2vw, 1.25rem); line-height:1.7; --sec-gap:clamp(40px, 5vw, 80px); }
#ceo header { margin-bottom:clamp(25px, 3.5vw, 50px); }

#ceo .sec1 { display: grid; grid-template-columns: repeat(2, 1fr); align-items: end; gap:clamp(20px, 4vw, 50px) clamp(70px, 7vw, 140px); }
#ceo .sec1 p:nth-child(1) { font-size:clamp(2.25rem, 5vw, 4rem); font-weight: 200; line-height:1.2; grid-column: 1/3; }
#ceo .sec1 p:nth-child(2) { grid-column: 2/3; }
#ceo .sec1 span { font-size:.75rem; color:#777; }

#ceo .sec1 .sec-img { display: grid; gap:30px; grid-template-columns: repeat(3, 1fr); justify-items: center; align-items: center; grid-column: 1/2; grid-row:2/3; }
#ceo .sec1 .sec-img img { max-height:clamp(50px, 5vw, 80px); }


#ceo .sec2 { position: relative; margin-top:var(--sec-gap); display:grid; grid-template-columns: repeat(2, 1fr); align-items: end; gap:50px clamp(70px, 7vw, 140px); padding:80px 0; z-index:1; }
#ceo .sec2::before { content:""; position: absolute; left:50%; top:0; bottom:0; transform: translateX(-50%); width:100vw; background: var(--nn-bg-gray); z-index:-1; }
#ceo .sec2 p { word-break: keep-all; }

#ceo .sec2 .sec-img { display: flex; align-items: flex-end; }
#ceo .sec2 .sec-img img { max-width:clamp(60px, 8vw, 120px); }
#ceo .sec2 .sec-img img:nth-last-child(n+3) { max-height:clamp(120px, 13vw, 200px); }
#ceo .sec2 .sec-img img:nth-last-child(3) { margin-left:30px; }


#ceo .sec3 { margin-top:var(--sec-gap); }
#ceo .sec3 .sign img { width:clamp(110px, 10vw, 170px); margin-left:10px; }
#ceo .sec3 p:last-child { display:flex; align-items: center; justify-content: right; text-align: right; line-height:1.2; }



@media (max-width: 768px) {
    #ceo .sec1 { grid-template-columns: 100%; }

    #ceo .sec1 p:nth-child(1) { grid-column: 1/2; }
    #ceo .sec1 p:nth-child(2) { grid-column: 1/2; }
    #ceo .sec1 .sec-img { grid-row: 3/4; }


    #ceo .sec2 { grid-template-columns: 100%; }
    #ceo .sec2 .sec-img { justify-content: center; }
}