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

/* 공통 */
.sub-sec {margin-bottom:var(--space-120);}
.sub-sec:last-child {margin-bottom:0;}

.doc-tit {position:relative; padding-left:clamp(42px, calc(72 / var(--inner) * 100vw), 72px); margin-bottom:var(--space-40); color:#242424; font-size:var(--font-size-36); font-weight:600; line-height:1.3em; letter-spacing:-.03em;}
.doc-tit .num {position:absolute; top:0; left:0; display:flex; justify-content:center; align-items:center; width:clamp(32px, calc(48 / var(--inner) * 100vw), 48px); aspect-ratio:1/1; background:var(--color-primary); border-radius:50%; color:#fff; font-size:var(--font-size-16); font-weight:600; line-height:1em; letter-spacing:-.01em;}
.doc-tit.only-text {padding-left:0;}
.doc-tit.line {border-bottom:1px solid #C0C0C0; padding-bottom:var(--space-40);}

.sb-tt {margin-bottom:var(--space-30); font-size:clamp(20px, calc(30 / var(--inner) * 100vw), 30px); font-weight:600; line-height:1.3em; letter-spacing:-.03em; color:#242424;}

.dot-list > li {position:relative; padding-left:1em;}
.dot-list > li:before {content:'·'; position:absolute; top:0; left:.2em;}

.table-style table {width:100%; border-collapse:collapse; border-spacing:0px; font-size:var(--font-size-16); line-height:1.5em; border-top:2px solid #222;}
.table-style table thead th {height:clamp(32px, calc(50 / var(--inner) * 100vw), 50px); padding:var(--space-12) var(--space-22); color:#222; background:#f7f7f7; border:1px solid #ddd;}
.table-style table tbody td {height:clamp(32px, calc(60 / var(--inner) * 100vw), 60px); padding:var(--space-16) var(--space-22); color:#454545; text-align:center; border:1px solid #ddd;}
.table-style table tbody td.left {text-align:left; padding-left:var(--space-30);}
.table-style table tr th:first-child,
.table-style table tr td:first-child {border-left:0;}
.table-style table tr th:last-child,
.table-style table tr td:last-child {border-right:0;}
.table-style .check {position:relative; padding-left:1.2em;}
.table-style .check:before {content:'✓'; position:absolute; top:0; left:0;}
.table-style .check-list {display:flex; flex-direction:column; gap:var(--space-6);}
.table-style .check-list > li {position:relative; padding-left:1.2em;}
.table-style .check-list > li:before {content:'✓'; position:absolute; top:0; left:0;}
.table-style .check-list-wrap {display:flex; flex-wrap:wrap; gap:var(--space-6) var(--space-120);}
.table-style .dot-list {display:flex; flex-direction:column; gap:var(--space-6);}

.gray-box-grid {display:grid; grid-template-columns:repeat(6, 1fr); gap:var(--space-40);}
.gray-box-grid .gray-box.full {grid-column: 1 / -1;}
.gray-box-grid .gray-box.col-2 {grid-column:span 3;}
.gray-box-grid .gray-box.col-3 {grid-column:span 2;}

.gray-box {padding:var(--space-40); background:#f6f6f6; border-radius:var(--space-20);}
.gray-box .icon {margin-bottom:var(--space-30);}
.gray-box .number {display:inline-flex; justify-content:center; align-items:center; margin-bottom:var(--space-30); width:clamp(40px, calc(60 / var(--inner) * 100vw), 60px); height:clamp(24px, calc(30 / var(--inner) * 100vw), 30px); background:var(--color-primary); border-radius:30px; color:#fff; font-size:var(--font-size-16); font-weight:500; line-height:1em; letter-spacing:-.01em; text-align:center;}
.gray-box .text {color:#454545; line-height:1.5em;}
.gray-box .text p {margin-bottom:var(--space-24);}
.gray-box .text p:last-child {margin-bottom:0;}
.gray-box .text .check {position:relative; padding-left:30px;}
.gray-box .text .check:before {content:''; position:absolute; top:.2em; left:0; width:16px; aspect-ratio:1/1; background:url('/images/sub/icon-check.svg') 0 0/contain no-repeat;}
.gray-box .text .check strong {font-weight:600;}
.gray-box .text .indent {display:flex; flex-direction:column; gap:var(--space-12); margin-left:30px;}

.round-box {border:1px solid #ddd; border-radius:var(--space-20); padding:var(--space-40);}
.round-box .text {color:#454545; line-height:1.5em;}

.note-text {line-height:1.5em; color:#454545;}

.img-cnt-wrap {display:flex; align-items:center; gap:var(--space-50);}
.img-cnt-wrap .img {width:38%; max-width:420px;}
.img-cnt-wrap .img img {border-radius:var(--space-20);}
.img-cnt-wrap .cnt {flex:1 1 auto; min-width:0; width:1%;}
.img-cnt-wrap .cnt .text {color:#454545; line-height:1.5em;}
.img-cnt-wrap .cnt .text p {margin-bottom:var(--space-24);}
.img-cnt-wrap .cnt .text p:last-child {margin-bottom:0;}
.img-cnt-wrap .cnt .text .check {position:relative; padding-left:30px;}
.img-cnt-wrap .cnt .text .check:before {content:''; position:absolute; top:.2em; left:0; width:16px; aspect-ratio:1/1; background:url('/images/sub/icon-check.svg') 0 0/contain no-repeat;}
.img-cnt-wrap .cnt .text .check strong {font-weight:600;}
.img-cnt-wrap .cnt .text .indent {display:flex; flex-direction:column; gap:var(--space-12); margin-left:30px;}

/* 회사소개 */
.greetings {display:flex; gap:var(--space-100); overflow:hidden;}
.greetings .image {width:40%; max-width:500px;}
.greetings .image img {border-radius:var(--space-20);}
.greetings .content {flex:1 1 auto; min-width:0; width:1%; display:flex; flex-direction:column; justify-content:center;}
.greetings .content .tit {margin-bottom:var(--space-40); font-size:var(--font-size-36); font-weight:600; line-height:1.5em; }
.greetings .content .txt {margin-bottom:var(--space-30); line-height:1.5em; color:#454545;}
.greetings .content .sign {font-weight:700; line-height:1.5em; text-align:right;}

.history {display:flex; justify-content:center;}
.history-item {display:flex;}
.history-item:last-child .history-list {padding-bottom:0;}
.history-item:last-child .history-list:before {height:0;}
.history-year {min-width:165px; font-size:var(--font-size-36); font-weight:600; line-height:1em;}
.history-list {width:100%; flex:1; padding-left:65px; padding-bottom:var(--space-100); padding-top:6px; position:relative;}
.history-list:before {content:''; position:absolute; top:4px; left:0; width:2px; height:100%; background:#ddd; z-index:1;}
.history-list:after {content:''; position:absolute; top:4px; left:-15px; width:31px; aspect-ratio:1/1; background:#fff; border:10px solid var(--color-primary); border-radius:50%; z-index:2;}
.history-list .list-item {display:flex; margin-bottom:var(--space-40);}
.history-list .list-item:last-child {margin-bottom:0;}
.history-list .list-item .month {min-width:60px; font-size:var(--font-size-20); font-weight:700; line-height:1.2em; color:#BDBDBD;}
.history-list .list-item .content {flex:1 1 auto; min-width:0; width:1%;}
.history-list .list-item .content .tt {font-weight:600; line-height:1.5em; color:#242424;}
.history-list .list-item .content ul {display:flex; flex-direction:column; gap:4px; margin-top:var(--space-20); padding-left:var(--space-24); list-style:disc; color:#454545; line-height:1.5em;}

.certification {display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-50) var(--space-40); text-align:center;}
.certification .label {margin-top:var(--space-20); line-height:1.62em;}

.root_daum_roughmap {width:100% !important;}
.root_daum_roughmap .wrap_map {height:clamp(240px, calc(440 / var(--inner) * 100vw), 440px) !important;}
.root_daum_roughmap .cont {display:none !important;}

.directions-info {margin-top:var(--space-50); text-align:center;}
.directions-info img {vertical-align:middle; margin:-.2em 8px 0 0;}
.directions-info .address-item {margin-bottom:var(--space-50);}
.directions-info .address-item .main {margin-bottom:var(--space-20); font-size:var(--font-size-22); font-weight:600; line-height:1.3em;}
.directions-info .address-item .sub {font-size:var(--font-size-17); line-height:1.5em; color:#454545;}
.directions-info .contact-item {display:flex; justify-content:center;}
.directions-info .contact-item .item {border-right:1px solid #ddd; padding:var(--space-50) var(--space-120); line-height:1.5em; font-weight:600;}
.directions-info .contact-item .item:last-child {border-right:0;}
.directions-info .contact-item .item img {margin-right:var(--space-24);}

/* 기계설비 */
.mechanical-list > ul {display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--space-50) var(--space-40); text-align:center; font-weight:600; line-height:1.5em; color:#242424;}
.mechanical-list > ul > li {display:flex; flex-direction:column; align-items:center; gap:var(--space-20);}
.mechanical-list > ul > li img {border-radius:var(--space-20);}

.mechanical-process {display:grid; grid-template-columns:repeat(2, 1fr); gap:0 var(--space-40); margin-top:var(--space-40); text-align:center;}
.mechanical-process .grid-full {grid-column:1/-1;}
.mechanical-process .round-box .icon {margin-bottom:var(--space-24);}
.mechanical-process .round-box .sb-tt {margin-bottom:0;}
.mechanical-process .round-box .txt {margin-top:var(--space-12); font-size:var(--font-size-16); line-height:1.5em; color:#454545;}
.mechanical-process .arrow {padding:var(--space-20) 0; line-height:0;}

/* 정보통신설비 */
.ict-biz-step {display:flex; flex-direction:column; align-items:center; gap:var(--space-24); max-width:430px; margin:0 auto; padding:var(--space-10) 0; text-align:center;}
.ict-biz-step .step {display:flex; justify-content:center; align-items:center; width:100%; height:clamp(40px, calc(56 / var(--inner) * 100vw), 56px); border:1px solid var(--color-primary); border-radius:100px; font-weight:600; color:var(--color-primary);}
.ict-biz-step .step.last {color:#fff; background:var(--color-primary);}
.ict-biz-step .arrow {line-height:0;}

.ict-biz-step-content {display:flex; gap:var(--space-24); padding:var(--space-20); text-align:left;}
.ict-biz-step-content .tit {color:#242424; width:42%;}
.ict-biz-step-content .tit strong {font-weight:600;}
.ict-biz-step-content .list {flex:1 1 auto; min-width:0; width:1%;}

.maintenance-method {display:flex; gap:var(--space-40); text-align:center;}
.maintenance-method .item {overflow:hidden; border-radius:var(--space-20); border:1px solid #ddd;}
.maintenance-method .item .img {border-radius:var(--space-20);}
.maintenance-method .item .cnt {padding:var(--space-36);}
.maintenance-method .item .label {display:inline-block; padding:5px 23px; background:var(--color-primary); border-radius:100px; font-weight:600; line-height:1.5em; letter-spacing:-.01em; color:#fff;}

/* 보유기술 */
.manpower {display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-40); padding:var(--space-60) var(--space-30); background:#e3eaff; border-radius:var(--space-20); text-align:center;}
.manpower .item {display:flex; flex-direction:column; align-items:center; gap:var(--space-30); padding:42px 10px 30px; background:#fff; border-radius:var(--space-20);}
.manpower .item .cnt {font-weight:600; line-height:1.5em; color:#242424;}
.manpower .item .label {display:inline-block; padding:5px 23px; background:var(--color-primary); border-radius:18px; font-size:var(--font-size-18); font-weight:600; line-height:1.5em; letter-spacing:-.01em; color:#fff;}

.content-list {display:flex; flex-direction:column; gap:var(--space-100);}
.content-item {position:relative; padding-left:clamp(42px, calc(72 / var(--inner) * 100vw), 72px);}
.content-item .item-num {position:absolute; top:0; left:0; display:flex; justify-content:center; align-items:center; width:clamp(32px, calc(48 / var(--inner) * 100vw), 48px); aspect-ratio:1/1; background:var(--color-primary); border-radius:50%; color:#fff; font-size:var(--font-size-16); font-weight:600; line-height:1em; letter-spacing:-.01em;}
.content-item .item-content {display:flex; gap:var(--space-60); align-items:flex-start;}
.content-item .item-image {flex:0 0 auto; width:clamp(200px, calc(400 / var(--inner) * 100vw), 400px); border-radius:var(--space-20); overflow:hidden;}
.content-item .item-image img {width:100%; height:100%; object-fit:cover;}
.content-item .item-text {flex:1 1 auto; min-width:0; width:1%;}
.content-item .item-title {margin-bottom:var(--space-30); font-size:var(--font-size-30); font-weight:600; line-height:1.3em; letter-spacing:-.03em; color:#242424;}
.content-item .item-text .dot-list {display:flex; flex-direction:column; gap:var(--space-20); color:#454545; line-height:1.5em;}