@charset "utf-8"; /* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:440px !important;} 
.root_daum_roughmap .wrap_map {width:100% !important; height:440px !important;} 
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;} 
.roughmap_lebel_text:after {content:"㈜CH Labs"; font-size:12px; line-height:15px;} 

.doc-tit {margin-bottom:var(--space-50); font-weight:700; font-size: var(--font-size-40); line-height:1em; color: var(--color-dark);} 

.doc-cnt {padding-top:var(--space-100);} 

.table-style table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:1px solid #1f1f1f; line-height:1.5em;} 
.table-style table th {padding:13px; border:1px solid #ddd; border-top:0; font-weight:600; background:#fafafa;} 
.table-style table td {padding:13px; text-align:center; border:1px solid #ddd; border-top:0; color: #454545;} 
.table-style tr th:first-child,
.table-style tr td:first-child {border-left:0;} 
.table-style tr th:last-child,
.table-style tr td:last-child {border-right:0;} 
.table-style span {display:inline-block;} 
.table-style .normal {font-weight:400;} 

.flex-wrap {display:flex;} 
.flex-wrap.ai-center {align-items:center;} 
.flex-wrap .flex {flex: 1 1 auto; width:1%; min-width:0;} 

.dot-list > li {position:relative; padding-left:10px;} 
.dot-list > li:before {content:"·"; position:absolute; top:-2px; left:0; font-weight:700; font-size:20px; color:#242424;} 
.dot-list > li strong {font-weight:600;} 

.dash-list > li {position:relative; padding-left:10px;} 
.dash-list > li:before {content:"-"; position:absolute; top:-2px; left:0; font-weight:700; font-size:20px; color:#242424;} 
.dash-list > li strong {font-weight:600;} 
.dash-list.none > li {padding-left:0;} 
.dash-list.none > li::before {display: none;} 

.mt70 {margin-top:var(--space-70) !important;} 

.mb60 {margin-bottom:var(--space-60) !important;} 
.mb0 {margin-bottom:0 !important;} 

.pt0 {padding-top:0 !important;} 
.pb0 {padding-bottom:0 !important;} 
.pb100 {padding-bottom:var(--space-100) !important;} 

.txt-primary {color: var(--color-primary) !important;} 
.txt-second {color: var(--color-secondary) !important;} 
.txt-grey {color: #888888 !important;} 
.txt-wht {color: #fff !important;} 

.highlight {display: inline; box-shadow: inset 0 -14px 0 #f7f5fa; border-radius: 3px;} 

.tag {padding:7px 16px; font-weight:500; font-size: var(--font-size-18); letter-spacing: 0; line-height:1em; background-color: var(--color-second); border-radius: 50vh; color: #fff; width:fit-content;} 

.bg-grey {background-color: #f8f8f8;} 

#sub .sub-head {padding-bottom:var(--space-90); text-align:center; font-weight:600; font-size: var(--font-size-30); line-height:1.6em; color: var(--color-dark);} 

/* 인사말 */
.greeting {position:relative;} 
.greeting::after {content: ""; position: absolute; right:0; bottom:var(--space-60); width:14.5%; height:253px; background: url(/images/sub/bg-logo.png) no-repeat; background-position: right bottom; background-size: contain;} 
.greeting .contain {display:flex; align-items: center; gap:0 var(--space-130);} 
.greeting .col-l {width:39%;} 
.greeting .col-r {flex:1;} 
.greeting .col-r .top {margin-bottom:35px;} 
.greeting .col-r .top p {font-size:var(--font-size-40); line-height:normal; font-weight:700; color:var(--color-dark);} 
.greeting .col-r .mid p {margin-bottom:var(--space-30);} 
.greeting .col-r .mid p:last-child {margin-bottom:0;} 
.greeting .col-r .bot {margin-top:var(--space-50);} 
.greeting .col-r .bot p {color:#000000;} 
.greeting .col-r .bot p img {margin:-15px 0 0 27px; vertical-align:middle;} 

/* 개요 */
.summary {display:grid; grid-template-columns: repeat(3, 2fr); gap: var(--space-40);} 
.summary .box {text-align: center; padding: var(--space-50); border-radius: var(--space-20); background-color: rgb(244, 245, 252); font-weight: 700; color: #242424;} 
.summary .box:nth-child(even) {background-color: #fafafa;} 
.summary .box .icon {margin: 0 auto var(--space-40);} 
.summary .box .icon img {width:clamp(44px, calc( 74 / var(--inner) * 100vw ), 74px);;} 
.summary .box .num {font-size: var(--font-size-20); line-height: 2em; margin-bottom: var(--space-10);} 
.summary .box .num strong {font-size: var(--font-size-40);} 
.summary .box .tx {font-size: var(--font-size-20); line-height: 1.5em;} 

/* 면허 및 자격 */
.certificate {padding:var(--space-60) 0;} 
.certificate .contain {display:grid; grid-template-columns:repeat(4, 1fr); gap: 0 var(--space-40); text-align:center;} 
.certificate .img {margin-bottom:var(--space-20);} 
.certificate .txt {font-weight:500; font-size: var(--font-size-16); color: var(--color-dark); letter-spacing: -0.02em; line-height:normal;} 

#sub .client-slide.left {margin:0 0 var(--space-30);} 

.partner-list.grid-5 {display:grid; grid-template-columns: repeat(5, 5fr); gap:var(--space-30);} 
.partner-list.first {display:grid; grid-template-columns: repeat(4, 1fr); gap:var(--space-30);} 

/* 공사분야 */
.sub-cnt {display:flex; align-items: center;} 
.sub-cnt .img {width:37%;} 
.sub-cnt .info {flex:1 1 auto; min-width:0; width:1%; display:flex; flex-direction: column; justify-content: space-between; padding-left:var(--space-60);} 
.sub-cnt .tit {position:relative; padding-top:15px; padding-right:15px; width:fit-content;     margin: var(--space-30) 0 var(--space-15);font-weight:700; font-size: var(--font-size-30); color: var(--color-dark); line-height:1em;} 
.sub-cnt .tit::after {content: ""; position: absolute; top:0; right:0; width: 8px; height: 8px; border-radius: 100%; background-color: rgb(37, 42, 109);} 
.sub-cnt .txt p {margin-bottom:var(--space-30); font-weight:500;} 
.sub-cnt .txt p:last-child {margin-bottom:0;} 

.method .item {margin-bottom:var(--space-40); padding:var(--space-50) var(--space-60); border-radius: var(--space-20); background-color: rgb(250, 250, 250);} 
.method .item:last-child {margin-bottom:0;} 
.method .tit {width:18%;} 
.method .tit .num {display:block; font-weight:700; color: var(--color-primary);} 
.method .tit p {padding-top:10px; font-size:var(--font-size-30); line-height:normal; color: var(--color-dark); font-weight:700;} 
.method .info-list {flex: 1 1 auto; width:1%; min-width:0;} 
.method .info-list dl {display:flex; margin-bottom:var(--space-50);} 
.method .info-list dl:last-child {margin-bottom:0;} 
.method .info-list dl dt {width:70px; font-weight:700; font-size: var(--font-size-20); color: var(--color-dark);} 
.method .info-list dl dd {flex: 1 1 auto; width:1%; min-width:0;} 
.method .tag-list {display:flex; align-items: center; gap: 0 var(--space-20);} 
.method .tag-list li {display:flex; align-items: center; justify-content: center; width: auto !important; height: 58px; padding:0 var(--space-30); color: var(--color-primary); border-radius: 50vh; border: 1px solid var(--color-primary); background-color: var(--color-secondary);} 
.method .tag-list.type2 li {background-color: #ffff;} 

.step-list {display:grid; grid-template-columns: repeat(3, 2fr); gap: var(--space-40);} 
.step-list li {border-radius: var(--space-20); background-color: var(--color-secondary);} 
.step-list li .img img {border-radius: var(--space-20);} 
.step-list li .txt-wrap {display:flex; align-items: center; justify-content: center; flex-direction: column; padding:var(--space-20) 10px var(--space-40);} 
.step-list li .step {padding:var(--space-15) var(--space-25); color: #fff; text-align:center; line-height:1em; font-weight:700; background-color: rgb(37, 42, 109); border-radius: 50vh; width:fit-content;} 
.step-list li .tx {padding-top:var(--space-40); font-size: var(--font-size-24); line-height:1em; font-weight:700; color: #242424;} 

.border-top {border-top:1px solid var(--color-primary);} 
 
.video-list {display:grid; grid-template-columns: repeat(3, 2fr); gap: var(--space-40);} 
.video-list li {border-radius: var(--space-20);} 
.video-list li .video-container {position:relative; padding-bottom:56.25%; height:0; overflow:hidden; background:#000; border-radius: var(--space-20); } 
.video-list li iframe,
.video-list li video,
.video-list li img {border-radius: var(--space-20); width:100% !important;height:100% !important;} 



/* 진행절차 */
.proceed-list {display:flex; justify-content: center; gap: 0 75px;} 
.proceed-list li {position:relative; width: 220px; height: 220px; display: flex; justify-content: center; align-items: center; flex-direction: column; border-radius: 100%; background-color: rgb(250, 250, 250);} 
.proceed-list li:nth-child(even) {background-color: var(--color-secondary);} 
.proceed-list li::after {content: ""; position: absolute; top:50%; right: -48px; transform: translateY(-50%); width:21px; height:15px; background: url(/images/sub/arrow.png) no-repeat center/contain;} 
.proceed-list li:last-child::after {display:none;} 
.proceed-list li .step {color:#252a6d; line-height: 1em; font-weight:700;} 
.proceed-list li .name {margin-top: var(--space-20); line-height: normal; color: var(--color-dark); font-weight: 700; font-size: var(--font-size-24); text-align: center;} 

.procedure {padding-top:var(--space-90);} 
.procedure > li {margin-bottom:var(--space-40); padding:var(--space-50) var(--space-60); border-radius: var(--space-20); background-color: #fafafa;} 
.procedure > li:nth-child(even) {background-color: var(--color-secondary);} 
.procedure > li:last-child {margin-bottom:0;} 
.procedure .dot-list {margin-top:var(--space-20);}
.procedure .ico {width: clamp(54px, calc( 104 / var(--inner) * 100vw ), 104px );   ; margin-right:var(--space-130);} 
.procedure .ico img {width: 100%;} 
.procedure .txt-wrap {flex: 1 1 auto; min-width:0; width:1%;} 
.procedure .step {font-weight:700; color: var(--color-primary); line-height:1em;} 
.procedure .tit {padding-top:var(--space-20); font-weight:700; font-size: var(--font-size-30); color: var(--color-dark); line-height:1em;} 
.procedure .desc {margin-top:var(--space-30);} 

/* 채용정보 */
.procedure.type2 li {background-color: var(--color-secondary);} 
.procedure.type2 li:nth-child(even) {background-color:#fafafa;} 
.procedure.type2 strong {margin-top:10px; display:block; font-weight:600; color: var(--color-primary);}