/* ==========================================
   Base
   ========================================== */

body {
    font-family:
        Arial,
        "Malgun Gothic",
        "맑은 고딕",
        sans-serif;

    color: #222;
    background: #fff;

    /* Sticky Footer: 콘텐츠가 짧아도 푸터를 화면 맨 아래로 */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > .site-header,
body > .page-hero,
body > .site-footer {
    flex-shrink: 0;
}

body > main {
    flex: 1 0 auto;
}

 
/* ========================================== 
   Header 
   ========================================== */ 
 
.site-header { 
    width: 100%; 
    background: #fff; 
    border-bottom: 1px solid #ddd; 
} 
 
.header-inner { 
    width: min(1200px, calc(100% - 40px)); 
    min-height: 90px; 
 
    margin: 0 auto; 
 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
} 
 
 
/* Logo */ 
 
.logo { 
    display: block; 
    flex-shrink: 0; 
} 
 
.logo img { 
    width: 92px; 
    height: 41px; 
} 
 
 
/* ========================================== 
   Navigation 
   ========================================== */ 
 
.main-nav { 
    margin-left: auto; 
} 
 
.nav-list { 
    display: flex; 
    align-items: stretch; 
} 
 
.nav-item { 
    position: relative; 
} 
 
.nav-item > a { 
    display: flex; 
    align-items: center; 
 
    min-height: 90px; 
 
    padding: 0 28px; 
 
    font-size: 16px; 
    font-weight: 600; 
 
    color: #333; 
 
    transition: 
        color 0.2s ease, 
        background-color 0.2s ease; 
} 
 
.nav-item > a:hover { 
    color: #000; 
    background: #f5f5f5; 
} 
 
 
/* ========================================== 
   Sub Menu 
   ========================================== */ 
 
.sub-menu { 
    position: absolute; 
 
    top: 100%; 
    left: 0; 
 
    z-index: 1000; 
 
    display: none; 
 
    min-width: 180px; 
 
    padding: 8px 0; 
 
    background: #fff; 
 
    border: 1px solid #ddd; 
 
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.1); 
} 
 
.nav-item:hover > .sub-menu { 
    display: block; 
} 
 
.sub-menu a { 
    display: block; 
 
    padding: 10px 18px; 
 
    font-size: 14px; 
 
    color: #333; 
} 
 
.sub-menu a:hover { 
    background: #f5f5f5; 
} 
 
 
/* ========================================== 
   Mobile Menu 
   ========================================== */ 
 
.menu-toggle { 
    display: none; 
 
    width: 42px; 
    height: 42px; 
 
    padding: 8px; 
} 
 
.menu-toggle span { 
    display: block; 
 
    width: 100%; 
    height: 2px; 
 
    margin: 5px 0; 
 
    background: #333; 
} 
 
 
/* ========================================== 
   Hero 
   ========================================== */ 
 
.hero { 
    width: min(1200px, calc(100% - 40px)); 
 
    margin: 30px auto 0; 
 
    overflow: hidden; 
} 
 
.hero img { 
    width: 100%; 
    height: auto; 
} 
 
 
/* ========================================== 
   Business 
   ========================================== */ 
 
.business-section { 
    width: 100%; 
 
    margin-top: 40px; 
 
    border-top: 1px solid #ddd; 
} 
 
.business-inner { 
    width: min(1200px, calc(100% - 40px)); 
 
    margin: 0 auto; 
 
    padding: 40px 0; 
} 
 
.section-title { 
    margin-bottom: 30px; 
} 
 
.section-title img { 
    width: 50px; 
    height: 30px; 
} 
 
.business-links { 
    display: flex; 
} 
 
.business-link { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
 
    width: 180px; 
    height: 120px; 
 
    border-right: 1px dotted #aaa; 
 
    transition: 
        background-color 0.2s ease, 
        transform 0.2s ease; 
} 
 
.business-link:first-child { 
    border-left: 1px dotted #aaa; 
} 
 
.business-link:hover { 
    background: #f7f7f7; 
    transform: translateY(-2px); 
} 
 
.business-link img { 
    width: auto; 
    height: 76px; 
} 
 
 
/* ========================================== 
   Footer 
   ========================================== */ 
 
.site-footer { 
    width: 100%; 
    margin-top: 40px; 
 
    background-color: #f5f5f5; 
    border-top: 1px solid #ddd; 
} 
 
.footer-container { 
    width: min(1200px, calc(100% - 40px)); 
    margin: 0 auto; 
    padding: 30px 0; 
 
    display: flex; 
    align-items: flex-start; 
    gap: 40px; 
} 
 
 
/* Footer Logo */ 
 
.footer-logo { 
    flex: 0 0 120px; 
 
    display: flex; 
    align-items: flex-start; 
} 
 
.footer-logo a { 
    display: block; 
} 
 
.footer-logo img { 
    display: block; 
 
    width: 100px; 
    height: auto; 
 
    object-fit: contain; 
} 
 
 
/* Footer Content */ 
 
.footer-content { 
    flex: 1; 
} 
 
.footer-company { 
    color: #666; 
    font-size: 13px; 
    line-height: 1.8; 
} 
 
.footer-company p { 
    margin: 0; 
} 
 
.company-basic { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 8px 25px; 
} 
 
.footer-copyright { 
    margin: 15px 0 0; 
 
    color: #888; 
    font-size: 12px; 
} 
 
 
/* ========================================== 
   Footer Mobile 
   ========================================== */ 
 
@media (max-width: 600px) { 
 
    .footer-container { 
        width: calc(100% - 30px); 
        padding: 25px 0; 
 
        flex-direction: column; 
        gap: 20px; 
    } 
 
    .footer-logo { 
        flex: none; 
    } 
 
    .footer-logo img { 
        width: 90px; 
    } 
 
    .footer-company { 
        font-size: 12px; 
    } 
 
    .company-basic { 
        flex-direction: column; 
        gap: 2px; 
    } 
 
    .footer-copyright { 
        font-size: 11px; 
    } 
 
} 
 
 
/* ========================================== 
   Tablet 
   ========================================== */ 
 
@media (max-width: 768px) { 
 
    .header-inner { 
        width: calc(100% - 30px); 
        min-height: 70px; 
    } 
 
    .nav-item > a { 
        min-height: 70px; 
        padding: 0 16px; 
        font-size: 14px; 
    } 
 
    .hero { 
        width: calc(100% - 30px); 
    } 
 
    .business-inner { 
        width: calc(100% - 30px); 
    } 
 
} 
 
 
/* ========================================== 
   Mobile 
   ========================================== */ 
 
@media (max-width: 600px) { 
 
    .header-inner { 
        min-height: 65px; 
    } 
 
    .menu-toggle { 
        display: block; 
    } 
 
    .main-nav { 
        position: absolute; 
 
        top: 65px; 
        left: 0; 
        right: 0; 
 
        z-index: 1000; 
 
        display: none; 
 
        margin: 0; 
 
        background: #fff; 
 
        border-bottom: 1px solid #ddd; 
 
        box-shadow: 
            0 5px 15px rgba(0, 0, 0, 0.08); 
    } 
 
    .main-nav.is-open { 
        display: block; 
    } 
 
    .nav-list { 
        display: block; 
    } 
 
    .nav-item { 
        border-bottom: 1px solid #eee; 
    } 
 
    .nav-item > a { 
        min-height: auto; 
        padding: 16px 20px; 
    } 
 
    .sub-menu { 
        position: static; 
 
        min-width: auto; 
 
        padding: 0; 
 
        border: 0; 
        border-top: 1px solid #eee; 
 
        box-shadow: none; 
 
        background: #fafafa; 
    } 
 
    .nav-item.submenu-open > .sub-menu { 
        display: block; 
    } 
 
    .nav-item:hover > .sub-menu { 
        display: none; 
    } 
 
    .nav-item.submenu-open:hover > .sub-menu { 
        display: block; 
    } 
 
    .hero { 
        width: 100%; 
        margin-top: 0; 
    } 
 
    .business-inner { 
        width: calc(100% - 30px); 
        padding: 30px 0; 
    } 
 
    .business-links { 
        width: 100%; 
    } 
 
    .business-link { 
        width: 50%; 
        height: 100px; 
    } 
 
    .business-link img { 
        height: 65px; 
    } 
 
    .footer-inner { 
        width: calc(100% - 30px); 
    } 
 
} 
 
 
/* ========================================== 
   Common Page 
   ========================================== */ 
 
.page-container { 
    width: min(1200px, calc(100% - 40px)); 
    margin: 0 auto; 
} 
 
 
/* ========================================== 
   Page Hero 
   ========================================== */ 
 
.page-hero {
    position: relative;
    overflow: hidden;

    min-height: 280px;

    display: flex;
    align-items: center;

    background-color: #f3f5f7;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
}

.about-hero {
     background-image: url("/images/design_light_card_notext.png");
}
.business-hero {
     background-image: url("/images/design_biz_card_notext.png");
}
.sitemap-hero {
     background-image: url("/images/design_sitemap_card_notext.png");
}

.page-hero::before {
    content: "";

    position: absolute;

    inset: 0;

    /*background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.8),
            rgba(230, 235, 240, 0.4)
        );*/
}
 
.page-hero__inner { 
    position: relative; 
    z-index: 1; 
 
    width: min(1200px, calc(100% - 40px)); 
    margin: 0 auto; 
} 
 
.page-hero__eng { 
    display: block; 
 
    margin-bottom: 10px; 
 
    color: #777; 
 
    font-size: 14px; 
    font-weight: 600; 
 
    letter-spacing: 0.15em; 
} 
 
.page-hero__title { 
    margin: 0; 
 
    color: #222; 
 
    font-size: clamp(36px, 5vw, 52px); 
    font-weight: 700; 
} 
 
.page-hero__description { 
    margin: 18px 0 0; 
 
    color: #666; 
 
    font-size: 17px; 
} 
 
/* ========================================== 
   Page Sub Navigation 
   ========================================== */ 
 
.page-subnav { 
    border-bottom: 1px solid #e5e5e5; 
 
    background-color: #fff; 
} 
 
.page-subnav__list { 
    display: flex; 
    justify-content: center; 
 
    margin: 0; 
    padding: 0; 
 
    list-style: none; 
} 
 
.page-subnav__list li { 
    flex: 1; 
 
    max-width: 220px; 
 
    border-left: 1px solid #e5e5e5; 
} 
 
.page-subnav__list li:last-child { 
    border-right: 1px solid #e5e5e5; 
} 
 
.page-subnav__list a { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
 
    min-height: 64px; 
 
    color: #666; 
 
    font-size: 16px; 
 
    transition: 
        background-color 0.2s ease, 
        color 0.2s ease; 
} 
 
.page-subnav__list a:hover { 
    background-color: #f7f7f7; 
    color: #222; 
} 
 
.page-subnav__list .is-active a { 
    color: #fff; 
    background-color: #333; 
} 
 
/* ========================================== 
   Breadcrumb 
   ========================================== */ 
 
.breadcrumb { 
    padding: 30px 0; 
} 
 
.breadcrumb ol { 
    display: flex; 
    align-items: center; 
    flex-wrap: wrap; 
 
    margin: 0; 
    padding: 0; 
 
    list-style: none; 
 
    color: #999; 
 
    font-size: 13px; 
} 
 
.breadcrumb li { 
    display: flex; 
    align-items: center; 
} 
 
.breadcrumb li:not(:last-child)::after { 
    content: ">"; 
 
    margin: 0 10px; 
 
    color: #ccc; 
} 
 
.breadcrumb a:hover { 
    color: #333; 
} 
 
.breadcrumb li:last-child { 
    color: #555; 
} 
 
/* ========================================== 
   Content Heading 
   ========================================== */ 
 
.content-heading { 
    padding-bottom: 35px; 
    padding-top: 35px; 
 
    border-bottom: 1px solid #e5e5e5; 
} 
 
.content-heading__eng { 
    display: block; 
 
    margin-bottom: 8px; 
 
    color: #888; 
 
    font-size: 13px; 
    font-weight: 600; 
 
    letter-spacing: 0.12em; 
} 
 
.content-heading h2 { 
    margin: 0; 
 
    color: #222; 
 
    font-size: 32px; 
    font-weight: 700; 
} 
 
/* ========================================== 
   CEO Greeting 
   ========================================== */ 
 
.greeting { 
    max-width: 900px; 
 
    margin: 0 auto; 
 
    padding: 80px 0 100px; 
} 
 
.greeting__content { 
    width: 100%; 
} 
 
 
/* 인사말 핵심 문구 */ 
 
.greeting__intro { 
    margin: 0 0 50px; 
 
    color: #333; 
 
    font-size: clamp(28px, 3vw, 40px); 
    font-weight: 400; 
    line-height: 1.5; 
 
    word-break: keep-all; 
} 
 
.greeting__intro strong { 
    display: block; 
 
    margin-top: 8px; 
 
    color: #222; 
 
    font-weight: 700; 
} 
 
 
/* 본문 */ 
 
.greeting__text { 
    max-width: 820px; 
 
    color: #666; 
 
    font-size: 16px; 
    line-height: 2; 
 
    word-break: keep-all; 
} 
 
.greeting__text p { 
    margin: 0 0 24px; 
} 
 
.greeting__text p:last-child { 
    margin-bottom: 0; 
} 
 
 
/* 서명 */ 
 
.greeting__signature { 
    display: flex; 
    align-items: center; 
    justify-content: flex-end; 
 
    gap: 16px; 
 
    margin-top: 60px; 
 
    color: #555; 
} 
 
.greeting__signature span { 
    font-size: 14px; 
} 
 
.greeting__signature strong { 
    color: #222; 
 
    font-size: 18px; 
    font-weight: 600; 
} 
 
.greeting__text strong { 
    display: block; 
 
    margin-top: 10px; 
 
    color: #333; 
    font-weight: 600; 
} 
 
.greeting__thanks { 
    margin-top: 40px !important; 
 
    color: #333; 
    font-weight: 500; 
} 
 
 
 
/* ========================================== 
   Company History 
   ========================================== */ 
 
.history-page { 
    padding-bottom: 120px; 
} 
 
 
/* 소개 문구 */ 
 
.history-intro { 
    padding: 70px 0 80px; 
 
    border-bottom: 1px solid #e5e5e5; 
} 
 
.history-intro h3 { 
    margin: 0 0 25px; 
 
    color: #222; 
 
    font-size: clamp(30px, 3vw, 46px); 
    font-weight: 400; 
    line-height: 1.4; 
 
    word-break: keep-all; 
} 
 
.history-intro h3 strong { 
    font-weight: 700; 
} 
 
.history-intro p { 
    margin: 0; 
 
    color: #666; 
 
    font-size: 16px; 
    line-height: 1.8; 
} 
 
 
/* ========================================== 
   시대별 탭 
   ========================================== */ 
 
.history-tabs { 
    display: flex; 
 
    margin-bottom: 80px; 
 
    border-bottom: 1px solid #ddd; 
} 
 
.history-tab { 
    position: relative; 
 
    flex: 1; 
 
    padding: 22px 10px; 
 
    border: 0; 
    background: none; 
 
    color: #999; 
 
    font-family: inherit; 
    font-size: 20px; 
    font-weight: 500; 
 
    cursor: pointer; 
} 
 
.history-tab::after { 
    content: ""; 
 
    position: absolute; 
 
    right: 0; 
    bottom: -1px; 
    left: 0; 
 
    height: 3px; 
 
    background: transparent; 
} 
 
.history-tab:hover { 
    color: #333; 
} 
 
.history-tab.is-active { 
    color: #222; 
    font-weight: 700; 
} 
 
.history-tab.is-active::after { 
    background: #222; 
} 
 
 
/* ========================================== 
   연혁 
   ========================================== */ 
 
.history-panel { 
    display: none; 
} 
 
.history-panel.is-active { 
    display: block; 
} 
 
 
/* 연도 하나 */ 
 
.history-year { 
    display: grid; 
 
    grid-template-columns: 220px 1fr; 
 
    padding: 0 0 70px; 
 
    border-bottom: 1px solid #e5e5e5; 
} 
 
.history-year + .history-year { 
    padding-top: 70px; 
} 
 
 
/* 연도 */ 
 
.history-year__title { 
    margin: 0; 
 
    color: #222; 
 
    font-size: 48px; 
    font-weight: 700; 
 
    line-height: 1; 
} 
 
 
/* 날짜 + 내용 */ 
 
.history-year__content { 
    width: 100%; 
} 
 
 
/* 개별 연혁 */ 
 
.history-row { 
    display: grid; 
 
    grid-template-columns: 100px 1fr; 
 
    gap: 30px; 
 
    margin-bottom: 15px; 
} 
 
.history-row:last-child { 
    margin-bottom: 0; 
} 
 
 
/* 날짜 */ 
 
.history-date { 
    color: #555; 
 
    font-size: 16px; 
    font-weight: 600; 
} 
 
 
/* 내용 */ 
 
.history-row p { 
    margin: 0; 
 
    color: #666; 
 
    font-size: 16px; 
    line-height: 1.6; 
 
    word-break: keep-all; 
} 
 
@media (max-width: 768px) { 
 
    .history-page { 
        padding-bottom: 70px; 
    } 
 
 
    /* 소개 */ 
 
    .history-intro { 
        padding: 50px 0 60px; 
    } 
 
    .history-intro h3 { 
        font-size: 28px; 
    } 
 
    .history-intro p { 
        font-size: 15px; 
    } 
 
 
    /* 탭 */ 
 
    .history-tabs { 
        overflow-x: auto; 
 
        margin-bottom: 50px; 
    } 
 
    .history-tab { 
        flex: 0 0 110px; 
 
        padding: 18px 5px; 
 
        font-size: 16px; 
 
        white-space: nowrap; 
    } 
 
 
    /* 연도 */ 
 
    .history-year { 
        display: block; 
 
        padding-bottom: 50px; 
    } 
 
    .history-year + .history-year { 
        padding-top: 50px; 
    } 
 
    .history-year__title { 
        margin-bottom: 35px; 
 
        font-size: 36px; 
    } 
 
 
    /* 연혁 */ 
 
    .history-row { 
        grid-template-columns: 55px 1fr; 
 
        gap: 15px; 
 
        margin-bottom: 14px; 
    } 
 
    .history-date, 
    .history-row p { 
        font-size: 14px; 
    } 
 
} 
 
 
/* ========================================== 
   Location 
   ========================================== */ 
 
.location-page { 
    padding-bottom: 120px; 
} 
 
 
/* 지도 */ 
 
.location-map { 
    width: 100%; 
 
    margin-top: 70px; 
} 
 
.location-map__area { 
    width: 100%; 
    height: 500px; 
 
    background-color: #f5f5f5; 
} 
 
 
/* ========================================== 
   회사 위치 정보 
   ========================================== */ 
 
.location-info { 
    display: grid; 
 
    grid-template-columns: 300px 1fr; 
 
    gap: 80px; 
 
    margin-top: 60px; 
    padding: 60px 0; 
 
    border-top: 1px solid #222; 
    border-bottom: 1px solid #ddd; 
} 
 
 
/* 왼쪽 제목 */ 
 
.location-info__title span { 
    display: block; 
 
    margin-bottom: 10px; 
 
    color: #888; 
 
    font-size: 13px; 
    font-weight: 600; 
 
    letter-spacing: 0.12em; 
} 
 
.location-info__title h3 { 
    margin: 0; 
 
    color: #222; 
 
    font-size: 30px; 
    font-weight: 700; 
} 
 
 
/* 오른쪽 상세 정보 */ 
 
.location-info__content { 
    width: 100%; 
} 
 
.location-info__row { 
    display: grid; 
 
    grid-template-columns: 100px 1fr; 
 
    gap: 30px; 
 
    padding: 18px 0; 
 
    border-bottom: 1px solid #eee; 
} 
 
.location-info__row:first-child { 
    padding-top: 0; 
} 
 
.location-info__row:last-child { 
    padding-bottom: 0; 
    border-bottom: 0; 
} 
 
 
/* 라벨 */ 
 
.location-info__label { 
    color: #333; 
 
    font-size: 14px; 
    font-weight: 700; 
 
    letter-spacing: 0.05em; 
} 
 
 
/* 내용 */ 
 
.location-info__row p { 
    margin: 0; 
 
    color: #666; 
 
    font-size: 16px; 
    line-height: 1.6; 
 
    word-break: keep-all; 
} 
 
 
@media (max-width: 768px) { 
 
    .location-page { 
        padding-bottom: 70px; 
    } 
 
 
    /* 지도 */ 
 
    .location-map { 
        margin-top: 50px; 
    } 
 
    .location-map__area { 
        height: 350px; 
    } 
 
 
    /* 위치 정보 */ 
 
    .location-info { 
        display: block; 
 
        margin-top: 40px; 
        padding: 40px 0; 
    } 
 
 
    .location-info__title { 
        margin-bottom: 35px; 
    } 
 
    .location-info__title h3 { 
        font-size: 24px; 
    } 
 
 
    .location-info__row { 
        grid-template-columns: 75px 1fr; 
 
        gap: 15px; 
 
        padding: 16px 0; 
    } 
 
 
    .location-info__label, 
    .location-info__row p { 
        font-size: 14px; 
    } 
 
} 
 
 
/* ========================================== 
   Organization 
   ========================================== */ 
 
.organization-page { 
    padding-bottom: 120px; 
} 
 
 
/* ========================================== 
   공통 섹션 
   ========================================== */ 
 
.organization-section { 
    margin-top: 100px; 
} 
 
 
.section-heading { 
    margin-bottom: 40px; 
} 
 
 
.section-heading > span { 
    display: block; 
 
    margin-bottom: 10px; 
 
    color: #888; 
 
    font-size: 13px; 
    font-weight: 600; 
 
    letter-spacing: 0.12em; 
} 
 
 
.section-heading h3 { 
    margin: 0; 
 
    color: #222; 
 
    font-size: 32px; 
    font-weight: 700; 
 
    letter-spacing: -0.04em; 
} 
 
 
.section-heading p { 
    margin-top: 15px; 
 
    color: #777; 
 
    font-size: 16px; 
    line-height: 1.7; 
 
    word-break: keep-all; 
} 
 
 
/* ========================================== 
   조직도 
   ========================================== */ 
 
.organization-chart { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
 
    width: 100%; 
 
    padding: 70px 30px; 
 
} 
 
 
.organization-chart img { 
    display: block; 
 
    width: 100%; 
    max-width: 850px; 
    height: auto; 
 
    object-fit: contain; 
} 
 
 
/* ========================================== 
   기술 인력 현황 
   ========================================== */ 
 
.manpower-section { 
    margin-top: 120px; 
} 
 
 
.table-wrap { 
    overflow-x: auto; 
 
    width: 100%; 
} 
 
 
.manpower-table { 
    width: 100%; 
 
    min-width: 800px; 
 
    border-collapse: collapse; 
 
    border-top: 2px solid #222; 
} 
 
 
.manpower-table th { 
    padding: 20px; 
 
    background: #f5f5f5; 
 
    color: #222; 
 
    font-size: 15px; 
    font-weight: 700; 
 
    text-align: center; 
 
    border-bottom: 1px solid #ddd; 
} 
 
 
.manpower-table td { 
    padding: 22px 20px; 
 
    color: #555; 
 
    font-size: 15px; 
    line-height: 1.6; 
 
    text-align: center; 
 
    border-bottom: 1px solid #e5e5e5; 
 
    word-break: keep-all; 
} 
 
 
.manpower-table th:nth-child(1), 
.manpower-table td:nth-child(1) { 
    width: 12%; 
} 
 
 
.manpower-table th:nth-child(2), 
.manpower-table td:nth-child(2) { 
    width: 10%; 
} 
 
 
.manpower-table th:nth-child(3), 
.manpower-table td:nth-child(3) { 
    width: 38%; 
} 
 
 
.manpower-table th:nth-child(4), 
.manpower-table td:nth-child(4) { 
    width: 40%; 
} 
 
 
/* ========================================== 
   Partner 
   ========================================== */ 
 
.partner-section { 
    margin-top: 120px; 
} 
 
 
.partner-grid { 
    display: grid; 
 
    grid-template-columns: repeat(3, 1fr); 
 
    border-top: 1px solid #ddd; 
    border-left: 1px solid #ddd; 
} 
 
 
.partner-item { 
    display: flex; 
 
    justify-content: center; 
    align-items: center; 
 
    min-height: 180px; 
 
    padding: 30px; 
 
    background: #fff; 
 
    border-right: 1px solid #ddd; 
    border-bottom: 1px solid #ddd; 
} 
 
 
.partner-item img { 
    display: block; 
 
    max-width: 180px; 
 
 
    width: 100%; 
    height: auto; 
 
    object-fit: contain; 
 
    transition: 
        transform 0.3s ease, 
        opacity 0.3s ease; 
} 
 
 
.partner-item:hover img { 
    transform: scale(1.05); 
} 
 
 
/* ========================================== 
   Mobile 
   ========================================== */ 
 
@media (max-width: 768px) { 
 
    .organization-page { 
        padding-bottom: 70px; 
    } 
 
 
    .organization-section { 
        margin-top: 70px; 
    } 
 
 
    .section-heading { 
        margin-bottom: 30px; 
    } 
 
 
    .section-heading h3 { 
        font-size: 25px; 
    } 
 
 
    /* 조직도 */ 
 
    .organization-chart { 
        padding: 40px 15px; 
 
        overflow-x: auto; 
    } 
 
 
    .organization-chart img { 
        min-width: 600px; 
    } 
 
 
    /* Partner */ 
 
    .partner-grid { 
        grid-template-columns: repeat(2, 1fr); 
    } 
 
 
    .partner-item { 
        min-height: 130px; 
 
        padding: 20px; 
    } 
 
 
    .partner-item img { 
        max-width: 130px; 
        max-height: 50px; 
    } 
 
} 
 
 
 
/* ======================================== 
   공통 
======================================== */ 
 
.inner { 
    width: min(1200px, calc(100% - 40px)); 
    margin: 0 auto; 
} 
 
 
/* ======================================== 
   서브 비주얼 
======================================== */ 
 
.sub-visual { 
    position: relative; 
    padding: 110px 0 100px; 
    color: #fff; 
    background: #222; 
} 
 
.business-visual { 
    background: 
        linear-gradient( 
            rgba(0, 0, 0, 0.45), 
            rgba(0, 0, 0, 0.45) 
        ), 
        url("../images/m2_main_img.gif") center / cover no-repeat; 
} 
 
.sub-visual__en { 
    margin-bottom: 12px; 
 
    font-size: 14px; 
    font-weight: 700; 
    letter-spacing: 3px; 
 
    opacity: 0.8; 
} 
 
.sub-visual h1 { 
    margin-bottom: 15px; 
 
    font-size: 42px; 
    font-weight: 700; 
} 
 
.sub-visual p:last-child { 
    font-size: 17px; 
} 
 
 
/* ======================================== 
   Breadcrumb 
======================================== */ 
 
.breadcrumb { 
    border-bottom: 1px solid #e5e5e5; 
} 
 
.breadcrumb .inner { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
 
    height: 60px; 
} 
 
 
 
.breadcrumb span { 
    color: #222; 
    font-size: 14px; 
    font-weight: 600; 
} 
 
 
/* ======================================== 
   사업분야 페이지 
======================================== */ 
 
.business-page { 
    padding: 100px 0 120px; 
} 
 
 
/* ======================================== 
   페이지 제목 
======================================== */ 
 
.page-title { 
    margin-bottom: 80px; 
 
    text-align: center; 
} 
 
.page-title__en { 
    margin-bottom: 12px; 
 
    color: #888; 
    font-size: 13px; 
    font-weight: 700; 
 
    letter-spacing: 3px; 
} 
 
.page-title h2 { 
    margin-bottom: 25px; 
 
    color: #222; 
    font-size: 40px; 
    font-weight: 700; 
} 
 
.page-title__desc { 
    color: #666; 
    font-size: 17px; 
    line-height: 1.7; 
} 
 
 
/* ======================================== 
   사업 개요 이미지 
======================================== */ 
 
.business-overview { 
    margin-bottom: 100px; 
 
    text-align: center; 
} 
 
.business-overview__image img { 
    max-width: 100%; 
    height: auto; 
} 
 
 
/* ======================================== 
   사업 영역 
======================================== */ 
 
.business-section { 
    padding: 70px 0; 
 
    border-top: 1px solid #e5e5e5; 
} 
/*
.section-heading { 
    display: flex; 
    align-items: flex-start; 
 
    gap: 20px; 
 
    margin-bottom: 35px; 
} 
 
.section-heading__number { 
    display: block; 
 
    color: #aaa; 
 
    font-size: 14px; 
    font-weight: 700; 
 
    letter-spacing: 2px; 
} 
 
.section-heading p { 
    margin-bottom: 6px; 
 
    color: #888; 
 
    font-size: 13px; 
    font-weight: 700; 
 
    letter-spacing: 2px; 
} 
 
.section-heading h3 { 
    color: #222; 
 
    font-size: 28px; 
    font-weight: 700; 
} */
 
 
/* ======================================== 
   사업 테이블 
======================================== */ 
 
.business-table-wrap { 
    overflow-x: auto; 
} 
 
.business-table { 
    width: 100%; 
    min-width: 700px; 
 
    border-top: 2px solid #222; 
 
    text-align: center; 
} 
 
.business-table th { 
    padding: 18px 15px; 
 
    background: #f5f5f5; 
 
    border-bottom: 1px solid #ddd; 
 
    color: #222; 
 
    font-size: 15px; 
    font-weight: 700; 
} 
 
.business-table td { 
    padding: 22px 15px; 
 
    border-bottom: 1px solid #ddd; 
    border-left: 1px solid #eee; 
 
    color: #555; 
 
    font-size: 15px; 
    line-height: 1.7; 
 
    vertical-align: middle; 
} 
 
.business-table td:first-child { 
    border-left: 0; 
} 
 
 
/* 테이블 열 비율 */ 
 
.business-table th:nth-child(1), 
.business-table td:nth-child(1) { 
    width: 14%; 
} 
 
.business-table th:nth-child(2), 
.business-table td:nth-child(2) { 
    width: 14%; 
} 
 
.business-table th:nth-child(3), 
.business-table td:nth-child(3) { 
    width: 14%; 
} 
 
.business-table th:nth-child(4), 
.business-table td:nth-child(4) { 
    width: 22%; 
} 
 
.business-table th:nth-child(5), 
.business-table td:nth-child(5) { 
    width: 36%; 
} 
 
 
/* ======================================== 
   프로젝트 
======================================== */ 
 
.project-list { 
    border-top: 2px solid #222; 
} 
 
.project-list li { 
    display: flex; 
    align-items: center; 
 
    min-height: 80px; 
 
    border-bottom: 1px solid #ddd; 
} 
 
.project-list span { 
    width: 35%; 
 
    padding: 20px; 
 
    color: #222; 
 
    font-size: 17px; 
    font-weight: 600; 
} 
 
.project-list p { 
    padding: 20px; 
 
    color: #666; 
 
    font-size: 15px; 
} 
 
 
/* ======================================== 
   모바일 
======================================== */ 
 
@media screen and (max-width: 768px) { 
 
    .sub-visual { 
        padding: 80px 0; 
    } 
 
    .sub-visual h1 { 
        font-size: 32px; 
    } 
 
    .sub-visual p:last-child { 
        font-size: 15px; 
    } 
 
 
    .business-page { 
        padding: 70px 0 90px; 
    } 
 
    .page-title { 
        margin-bottom: 55px; 
    } 
 
    .page-title h2 { 
        font-size: 32px; 
    } 
 
    .page-title__desc { 
        font-size: 15px; 
    } 
 
 
    .business-overview { 
        margin-bottom: 60px; 
    } 
 
 
    .business-section { 
        padding: 50px 0; 
    } 
 
    /*
    .section-heading h3 { 
        font-size: 23px; 
    } */
 
 
    .project-list li { 
        display: block; 
    } 
 
    .project-list span { 
        display: block; 
 
        width: 100%; 
 
        padding: 18px 20px 5px; 
    } 
 
    .project-list p { 
        padding: 5px 20px 18px; 
    } 
 
} 
 
 
/* ========================================== 
   Breadcrumb 
========================================== */ 
 
.breadcrumb { 
    border-bottom: 1px solid #e5e7eb; 
    background: #fff; 
} 
 
.breadcrumb .container { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 22px 30px; 
} 
 
.breadcrumb a { 
    color: #777; 
    font-size: 14px; 
    text-decoration: none; 
} 
 
.breadcrumb__arrow { 
    color: #aaa; 
    font-size: 16px; 
} 
 
.breadcrumb strong { 
    color: #222; 
    font-size: 14px; 
    font-weight: 600; 
} 
 
 
/* ========================================== 
   Sitemap 
========================================== */ 
 
.sitemap-section { 
    padding: 80px 0 120px; 
    background: #fff; 
} 
 
.sitemap-section .container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 30px; 
} 
 
.sitemap-grid { 
    display: grid; 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    gap: 24px; 
} 
 
 
/* 사이트맵 카드 */ 
 
.sitemap-card { 
    border: 1px solid #e1e4e8; 
    background: #fff; 
} 
 
 
/* 카드 제목 */ 
 
.sitemap-card__title { 
    display: flex; 
    align-items: center; 
    gap: 18px; 
 
    padding: 28px 32px; 
    border-bottom: 1px solid #e1e4e8; 
} 
 
.sitemap-card__title > span { 
    color: #999; 
    font-size: 12px; 
    font-weight: 600; 
    letter-spacing: 1px; 
} 
 
.sitemap-card__title h2 { 
    margin: 0; 
 
    color: #222; 
    font-size: 22px; 
    font-weight: 700; 
    letter-spacing: -1px; 
} 
 
 
/* 메뉴 */ 
 
.sitemap-menu { 
    margin: 0; 
    padding: 0; 
 
    list-style: none; 
} 
 
.sitemap-menu li { 
    border-bottom: 1px solid #edf0f2; 
} 
 
.sitemap-menu li:last-child { 
    border-bottom: none; 
} 
 
.sitemap-menu a { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
 
    padding: 19px 32px; 
 
    color: #666; 
    font-size: 15px; 
    text-decoration: none; 
 
    transition: all 0.2s ease; 
} 
 
.sitemap-menu a em { 
    color: #aaa; 
    font-size: 16px; 
    font-style: normal; 
 
    transition: transform 0.2s ease; 
} 
 
.sitemap-menu a:hover { 
    background: #f7f8fa; 
    color: #222; 
} 
 
.sitemap-menu a:hover em { 
    transform: translateX(5px); 
} 
 
 
/* ========================================== 
   반응형 
========================================== */ 
 
@media (max-width: 768px) { 
 
    .sitemap-section { 
        padding: 50px 0 80px; 
    } 
 
    .sitemap-grid { 
        grid-template-columns: 1fr; 
        gap: 16px; 
    } 
 
    .sitemap-card__title { 
        padding: 22px 20px; 
    } 
 
    .sitemap-menu a { 
        padding: 17px 20px; 
    } 
 
} 
/* ==================================================
   Solution
================================================== */

.solution-list {
    border-top: 2px solid #333333;
}


.solution-item {
    display: flex;
    align-items: center;

    min-height: 78px;

    border-bottom: 1px solid #dddddd;
}


.solution-item h4 {
    width: 50%;

    margin: 0;
    padding: 20px 25px;

    font-size: 15px;
    font-weight: 600;

    color: #333333;
}


.solution-item p {
    width: 50%;

    margin: 0;
    padding: 20px 25px;

    border-left: 1px solid #dddddd;

    font-size: 14px;

    color: #777777;
}


/* ==========================================================
   모바일 최적화 (통합)
   - 기존 규칙은 그대로 두고 좁은 화면 값만 덮어씀
   ========================================================== */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


/* ---------- 태블릿 이하 (~768px) ---------- */

@media (max-width: 768px) {

    .page-container {
        width: calc(100% - 32px);
    }

    /* 페이지 상단 히어로 */
    .page-hero {
        min-height: 190px;
    }

    .page-hero__inner {
        width: calc(100% - 32px);
    }

    .page-hero__title {
        font-size: clamp(26px, 7vw, 40px);
    }

    .page-hero__description {
        margin-top: 12px;
        font-size: 15px;
    }

    /* 본문 공통 제목 */
    .content-heading {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .content-heading h2 {
        font-size: 25px;
    }

    /* CEO 인사말 */
    .greeting {
        padding: 44px 0 60px;
    }

    .greeting__intro {
        margin-bottom: 34px;
        font-size: clamp(21px, 6vw, 30px);
    }

    .greeting__signature {
        margin-top: 40px;
    }

    /* 조직 / 사업 섹션 간격 */
    .organization-section,
    .manpower-section,
    .partner-section {
        margin-top: 54px;
    }

    /* breadcrumb */
    .breadcrumb {
        padding: 16px 0;
    }
}


/* ---------- 모바일 (~600px) ---------- */

@media (max-width: 600px) {

    /* 회사소개 서브메뉴: 2 x 2 격자 */
    .page-subnav__list {
        flex-wrap: wrap;
        border-top: 1px solid #e5e5e5;
    }

    .page-subnav__list li {
        flex: 0 0 50%;
        max-width: 50%;
        border-left: 0;
        border-bottom: 1px solid #e5e5e5;
    }

    .page-subnav__list li:nth-child(even) {
        border-left: 1px solid #e5e5e5;
    }

    .page-subnav__list li:last-child {
        border-right: 0;
    }

    .page-subnav__list a {
        min-height: 50px;
        font-size: 14px;
    }

    /* 인력 현황 표 */
    .manpower-table {
        min-width: 560px;
    }

    .manpower-table th,
    .manpower-table td {
        padding: 12px 10px;
        font-size: 13px;
    }

    /* 사업 분야 표 */
    .business-table {
        min-width: 540px;
    }

    .business-table th,
    .business-table td {
        padding: 12px 8px;
        font-size: 13px;
    }

    .table-wrap,
    .business-table-wrap,
    .organization-chart {
        -webkit-overflow-scrolling: touch;
    }

    /* 연구·개발 분야 목록: 세로 스택 */
    .solution-item {
        display: block;
        min-height: 0;
    }

    .solution-item h4 {
        width: 100%;
        padding: 16px 20px 4px;
    }

    .solution-item p {
        width: 100%;
        padding: 0 20px 16px;
        border-left: 0;
    }

    /* 사이트맵: 중첩 좌우 여백 제거 */
    .sitemap-section .container {
        padding: 0;
    }

    .sitemap-card__title {
        padding: 20px 18px;
    }

    .sitemap-menu a {
        padding: 16px 18px;
    }
}

/* ==========================================================
   메인 히어로 - 모바일 리디자인
   데스크톱(>=769px): 기존 와이드 배너 main_img.jpg 그대로
   모바일(<=768px): 모바일 전용 디자인 이미지 main_hero_m.jpg 로 교체
   (문구/브랜드는 이미지 안에 포함 - 데스크톱과 동일한 이미지형 히어로)
   ========================================================== */

.hero__media,
.hero__media img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {

    .hero {
        width: 100%;
        margin-top: 0;
    }
}