@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */

.doc-tit {display:flex; align-items:center; gap:clamp(10px, calc(15 / var(--inner) * 100vw), 15px); margin-bottom:var(--space-24); font-size:var(--font-size-32); font-weight:700; line-height:1.5em; letter-spacing:-.03em; color:#121212;}
.doc-tit::before {content:""; flex-shrink:0; display:block; width:clamp(20px, calc(28 / var(--inner) * 100vw), 28px); aspect-ratio:1/1; background:url(/images/sub/bullet.svg) no-repeat center/contain;}


/* 회사소개 */
.greetings {display:flex; gap:clamp(40px, calc(100 / var(--inner) * 100vw), 100px); align-items:flex-start;}
.greetings-visual {position:relative; flex:0 0 clamp(280px, calc(600 / var(--inner) * 100vw), 600px); min-height:clamp(420px, calc(760 / var(--inner) * 100vw), 760px);}
.greetings-visual .photo {position:relative; z-index:1; display:block; width:clamp(260px, calc(560 / var(--inner) * 100vw), 560px); aspect-ratio:560/720; object-fit:cover;}
.greetings-visual .deco {position:absolute; right:0; bottom:0; z-index:0; width:clamp(180px, calc(350 / var(--inner) * 100vw), 350px); aspect-ratio:1/1; background:linear-gradient(135deg, #008fc8 0%, var(--color-primary) 100%);}
.greetings-body {flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--space-40); align-items:flex-end; padding-top:var(--space-20);}
.greetings-body .head {width:100%; display:flex; flex-direction:column; gap:var(--space-60);}
.greetings-body .slogan {font-size:clamp(36px, calc(72 / var(--inner) * 100vw), 72px); font-weight:700; line-height:1.5em; letter-spacing:-.03em; color:var(--color-primary);}
.greetings-body .sub {display:flex; align-items:center; gap:var(--space-20);}
.greetings-body .sub .line {flex-shrink:0; width:60px; height:1px; background:#121212;}
.greetings-body .sub .desc {font-size:clamp(20px, calc(32 / var(--inner) * 100vw), 32px); font-weight:400; line-height:1.2em; letter-spacing:-.03em; color:#121212;}
.greetings-body .text {width:100%; display:flex; flex-direction:column; gap:var(--space-30); font-size:var(--font-size-18); font-weight:400; line-height:1.66em; letter-spacing:-.03em; color:#505050;}
.greetings-body .sign {font-size:var(--font-size-20); font-weight:600; line-height:1.2em; letter-spacing:-.03em; color:#121212;}

:root {--history-gutter: clamp(20px, calc(81 / var(--inner) * 100vw), 81px);}
.history {position:relative; display:flex; flex-direction:column; gap:var(--space-150);}
.history-line {position:absolute; left:50%; top:14px; bottom:0; width:2px; margin-left:-1px; pointer-events:none;}
.history-line .line {position:absolute; inset:0; background:#eee;}
.history-line .active {position:absolute; top:0; left:0; width:100%; height:100%; background:var(--color-primary); transform-origin:top center; transform:scaleY(0);}
.history-dot {flex-shrink:0; width:10px; height:10px; margin-left:calc((var(--history-gutter) + 5px) * -1); margin-right:calc(var(--history-gutter) - 5px); border-radius:50%; background:#ccc; z-index:2; pointer-events:none; transition:background .25s;}
.history-dot.is-active {background:var(--color-primary);}
@media (max-width:900px) {.history-dot {display:none;}}
.history-block .year-group > .year {display:flex; align-items:center; margin-bottom:var(--space-30); font-size:var(--font-size-32); font-weight:600; line-height:1.2em; letter-spacing:-.03em; color:#121212;}
.history-block {position:relative; display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-50) 0;}
.history-block .visual {flex:1; min-width:0; padding-right:var(--history-gutter);}
.history-block .visual .image {height:250px; overflow:hidden;}
.history-block .visual .image img {display:block; width:100%; height:100%; object-fit:cover;}
.history-block .period {margin-top:var(--space-30);}
.history-block .period .year {font-size:clamp(28px, calc(40 / var(--inner) * 100vw), 40px); font-weight:600; line-height:1.2em; letter-spacing:-.03em; color:#ccc;}
.history-block .period .tit {margin-top:var(--space-16); font-size:var(--font-size-32); font-weight:600; line-height:1.2em; letter-spacing:-.03em; color:#121212;}
.history-block .timeline {flex:1; min-width:0; padding-left:var(--history-gutter);}
.history-block .year-group {margin-bottom:var(--space-90);}
.history-block .year-group:last-child {margin-bottom:0;}
.history-block .year-group .list {display:flex; flex-direction:column; gap:var(--space-24); list-style:none; margin:0; padding:0;}
.history-block .year-group .list li {display:flex; gap:var(--space-30); align-items:flex-start;}
.history-block .month {flex:0 0 38px; font-size:var(--font-size-18); font-weight:600; line-height:1.2em; letter-spacing:-.03em; color:var(--color-primary);}
.history-block .txt {flex:1; min-width:0; font-size:var(--font-size-18); font-weight:400; line-height:1.2em; letter-spacing:-.03em; color:#505050;}

.clients .page-head {margin-bottom:var(--space-60); text-align:center;}
.clients .page-head .tit {font-size:clamp(22px, calc(40 / var(--inner) * 100vw), 40px); font-weight:700; line-height:1.2em; letter-spacing:-.03em; color:#121212;}
.clients .page-head .tit:after {content:""; display:block; width:40px; height:2px; margin:var(--space-20) auto 0; background:var(--color-primary);}
.clients .page-head .desc {margin-top:var(--space-30); font-size:var(--font-size-18); font-weight:400; line-height:1.2em; letter-spacing:-.03em; color:#505050;}
.clients-group {margin-bottom:var(--space-120);}
.clients-group:last-child {margin-bottom:0;}
.clients-group .group-tit {position:relative; margin-bottom:var(--space-40); padding-bottom:var(--space-20); font-size:var(--font-size-32); font-weight:700; line-height:1.2em; letter-spacing:-.03em; color:#121212;}
.clients-group .group-tit:after {content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:#eee;}
.clients-group .group-tit:before {content:""; position:absolute; left:0; bottom:0; z-index:1; width:209px; height:2px; background:var(--color-primary);}
.clients .logo-grid {display:flex; flex-wrap:wrap; gap:var(--space-20); list-style:none; margin:0; padding:0;}
.clients .logo-grid li {width:calc(20% - 16px); flex:0 0 calc(20% - 16px);}
.clients .logo-item {display:flex; align-items:center; justify-content:center; height:79px; padding:10px; border:1px solid #ddd; background:#fff;}
.clients .logo-item img {max-width:100%; max-height:100%; object-fit:contain;}

.directions {display:flex; flex-direction:column; gap:var(--space-150);}
.directions-block {display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-40);}
.directions-block .office-tit {flex-shrink:0; font-size:clamp(22px, calc(40 / var(--inner) * 100vw), 40px); font-weight:700; line-height:1.2em; letter-spacing:-.03em; color:#121212;}
.directions-block .office-body {width:100%; max-width:950px; flex:1; min-width:0;}
.directions-block .map-area {height:clamp(240px, calc(400 / var(--inner) * 100vw), 400px); margin-bottom:var(--space-40); border:1px solid #ddd; overflow:hidden;}
.directions-block .map-area .root_daum_roughmap {width:100%; height:100%;}
.directions-block .map-area .root_daum_roughmap .wrap_map {height:100%;}
.directions-block .map-area .root_daum_roughmap .map_border {display:none !important;}
.directions-block .info {display:flex; flex-direction:column; gap:var(--space-25);}
.directions-block .info-row {display:flex; align-items:center; gap:var(--space-40); padding-bottom:var(--space-25); border-bottom:1px solid #ddd;}
.directions-block .info-row:last-child {padding-bottom:0; border-bottom:0;}
.directions-block .label {display:flex; align-items:center; gap:var(--space-15); flex:0 0 143px;}
.directions-block .label .icon {display:flex; align-items:center; justify-content:center; flex-shrink:0; width:clamp(40px, calc(48 / var(--inner) * 100vw), 48px); aspect-ratio:1/1; border-radius:100%; background:#e8f0f7;}
.directions-block .label .icon img {display:block; width:clamp(20px, calc(24 / var(--inner) * 100vw), 24px); aspect-ratio:1/1;}
.directions-block .label .name {font-size:var(--font-size-18); font-weight:700; line-height:1.2em; letter-spacing:-.03em; color:#121212;}
.directions-block .val {flex:1; min-width:0; font-size:var(--font-size-18); font-weight:400; line-height:1.5em; letter-spacing:-.03em; color:#505050;}
.org-chart {display:flex; flex-direction:column; align-items:center; gap:var(--space-80);}
.org-chart .ceo .node {display:flex; align-items:center; justify-content:center; width:180px; height:180px; border-radius:50%; background:linear-gradient(135deg, var(--color-primary) 0%, #002853 100%); color:#fff; font-size:var(--font-size-24); font-weight:600; line-height:1.4em; text-align:center;}
.org-tree {width:100%; max-width:1320px;}
.org-tree .dept-row {display:flex; justify-content:space-between; gap:var(--space-20); position:relative; padding-top:80px;}
.org-tree .dept-row::before {content:""; position:absolute; top:0; left:50%; width:1px; height:80px; background:#ddd;}
.org-tree .dept-row::after {content:""; position:absolute; top:80px; left:0; right:0; height:1px; background:#ddd;}
.org-tree .dept-row .node {position:relative; flex:1; max-width:270px; padding:28px 40px; border:1px solid var(--color-primary); border-radius:8px; background:#f5f8ff; color:var(--color-primary); font-size:var(--font-size-18); font-weight:700; line-height:1.5em; text-align:center;}
.org-tree .dept-row .node::before {content:""; position:absolute; top:-80px; left:50%; width:1px; height:80px; background:#ddd;}
.org-tree .dept-sub {display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-20); padding-top:80px; position:relative; width:100%;}
.org-tree .dept-sub::before {content:""; position:absolute; top:0; left:62.5%; width:1px; height:80px; background:#ddd; transform:translateX(-50%);}
.org-tree .dept-sub .node {grid-column:3; justify-self:center; max-width:270px; width:100%; padding:28px 64px; border:1px solid var(--color-primary); border-radius:8px; background:#fff; color:var(--color-primary); font-size:var(--font-size-18); font-weight:700; line-height:1.5em; text-align:center;}
.org-staff {display:flex; flex-direction:column; gap:var(--space-40);}
.org-staff .staff-title {font-size:var(--font-size-24); font-weight:600; line-height:1.5em; letter-spacing:-.03em; color:var(--color-secondary);}
.org-table {overflow-x:auto; border-top:1px solid var(--color-primary);}
.org-table table {width:100%; min-width:900px; border-collapse:collapse; text-align:center;}
.org-table caption {position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);}
.org-table thead th {padding:18px 10px; background:#f9f9f9; border-right:1px solid #ddd; border-bottom:1px solid #ddd; font-size:var(--font-size-18); font-weight:600; line-height:1.5em; letter-spacing:-.03em; color:var(--color-secondary);}
.org-table thead th:last-child {border-right:0;}
.org-table tbody th, .org-table tbody td {padding:18px 10px; border-right:1px solid #ddd; font-size:var(--font-size-18); line-height:1.5em; letter-spacing:-.03em; color:#505050;}
.org-table tbody th {font-weight:400;}
.org-table tbody td:last-child, .org-table tbody th:last-child {border-right:0;}

.certifications ul {display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-60) var(--space-20); list-style:none; margin:0; padding:0;}
.certifications li figure {display:flex; flex-direction:column; gap:var(--space-20); margin:0;}
.certifications .thumb {border:1px solid #ddd; aspect-ratio:335/454; overflow:hidden;}
.certifications .thumb img {display:block; width:100%; height:100%; object-fit:cover;}
.certifications figcaption {font-size:var(--font-size-18); font-weight:400; line-height:1.5em; letter-spacing:-.03em; text-align:center; color:var(--color-secondary);}

/* 고객지원 */
.service-as {display:flex; flex-direction:column; gap:var(--space-80);}
.as-procedure {display:flex; flex-direction:column; gap:var(--space-40);}
.as-procedure .sect-head .desc {font-size:var(--font-size-18); font-weight:400; line-height:1.5em; letter-spacing:-.03em; color:#505050;}
.as-procedure .as-steps {display:flex; align-items:flex-start; justify-content:space-between; gap:15px; width:100%; margin-bottom:var(--space-20);}
.as-procedure .as-steps .step {flex:0 0 192px; max-width:192px; display:flex; flex-direction:column; align-items:center; gap:var(--space-20); text-align:center;}
.as-procedure .as-steps .ico {display:flex; align-items:center; justify-content:center; width:64px; height:64px; overflow:hidden;}
.as-procedure .as-steps .ico img {display:block; width:64px; height:64px;}
.as-procedure .as-steps .label {display:inline-flex; align-items:center; justify-content:center; margin:0; padding:6px 10px; border-radius:99px; background:#eee; color:#505050; font-size:var(--font-size-14); font-weight:400; line-height:1.5em; letter-spacing:-.03em;}
.as-procedure .as-steps .name {margin:0; font-size:var(--font-size-18); font-weight:600; line-height:1.5em; letter-spacing:-.03em; color:#121212;}
.as-procedure .as-steps .step-arrow {flex-shrink:0; display:flex; align-items:center; align-self:center; width:19px; height:16px; margin-top:24px;}
.as-procedure .as-steps .step-arrow img {display:block; width:100%; height:100%;}
.as-procedure .as-info {padding:50px 40px; background:#f3f5f8;}
.as-procedure .as-info .lead {margin:0 0 var(--space-30); font-size:var(--font-size-20); font-weight:600; line-height:1.5em; letter-spacing:-.03em; color:#121212;}
.as-procedure .as-info .lead .point {color:#e91c1f; font-weight:700;}
.as-procedure .as-info dl {display:flex; flex-direction:column; gap:var(--space-16); margin:0;}
.as-procedure .as-info .row {display:flex; align-items:center; gap:var(--space-30);}
.as-procedure .as-info dt {flex:0 0 84px; margin:0; font-size:var(--font-size-16); font-weight:600; line-height:1.5em; letter-spacing:-.03em; color:#121212;}
.as-procedure .as-info dd {margin:0; font-size:var(--font-size-16); font-weight:400; line-height:1.5em; letter-spacing:-.03em; color:#505050;}
.as-notice .notice-body {display:flex; flex-direction:column; gap:var(--space-40); width:100%;}
.as-notice .note-list {display:flex; flex-direction:column; gap:var(--space-20); margin:0; padding:0; list-style:none;}
.as-notice .note-list li {position:relative; padding-left:13px; color:#505050; font-size:var(--font-size-16); font-weight:400; line-height:1.625em; letter-spacing:-.03em;}
.as-notice .note-list li::before {content:""; position:absolute; top:10px; left:0; width:5px; height:5px; border-radius:50%; background:#ccc;}
.as-notice .service-guide {padding:50px 40px; background:#f3f5f8;}
.as-notice .service-guide .guide-tit {margin:0 0 var(--space-30); font-size:var(--font-size-20); font-weight:700; line-height:1.5em; letter-spacing:-.03em; color:#121212;}
.as-notice .service-guide .guide-group {margin-bottom:var(--space-40);}
.as-notice .service-guide .guide-group:last-child {margin-bottom:0;}
.as-notice .service-guide .group-tit {margin:0 0 var(--space-20); font-size:var(--font-size-16); font-weight:600; line-height:1.5em; letter-spacing:-.03em; color:#121212;}
.as-notice .service-guide ul {display:flex; flex-direction:column; gap:var(--space-10); margin:0; padding:0; list-style:none;}
.as-notice .service-guide ul li {position:relative; padding-left:12px; color:#505050; font-size:var(--font-size-14); font-weight:400; line-height:1.5em; letter-spacing:-.03em;}
.as-notice .service-guide ul li::before {content:"-"; position:absolute; left:0; top:0;}

.inquiry-area .real-cont {padding:0;}
.inquiry-area .sub-title {display:none;}