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

/* 공통 */


/* 인사말 */
.greetings section {margin-bottom:var(--space-120);}
.greetings section:last-child {margin-bottom:0;}
.greetings .sec1 {display:flex; align-items:center; justify-content:space-between; gap:var(--space-50);}
.greetings .sec1 .txt-wrap {flex:1; min-width:0;}
.greetings .sec1 .tit {margin-bottom: var(--space-50);}
.greetings .sec1 .lead {font-size:var(--font-size-24); font-weight:400; line-height:1.25; color:#121212; margin-bottom: var(--space-10);}
.greetings .sec1 .headline {font-size:var(--font-size-32); font-weight:600; line-height:1.25; color:#121212;}
.greetings .sec1 .point {color:var(--color-primary);}
.greetings .sec1 .txt {font-size:var(--font-size-18); line-height:1.67; letter-spacing:-0.03em;}
.greetings .sec1 .txt p {margin-bottom: var(--space-20);}
.greetings .sec1 .txt p:last-child {margin-bottom: 0;}
.greetings .sec1 .sign-wrap {margin-top: var(--space-50); display: flex; align-items: center; gap: var(--space-20);}
.greetings .sec1 .sign-wrap .role {font-size:var(--font-size-18); font-weight:600; line-height:1.25; letter-spacing:-0.03em; color:#121212;}
.greetings .sec1 .sign {display:flex; align-items: center; gap: 5px;}
.greetings .sec1 .sign .name {font-family: 'NanumSonPyeonJiCe', sans-serif; font-size:var(--font-size-40); line-height:1; letter-spacing:-0.03em; color:#121212;}
.greetings .sec1 .sign .stamp {width: clamp(40px, calc(49 / var(--inner) * 100vw), 49px); aspect-ratio: 49/70; user-select: none;}
.greetings .sec1 .sign .stamp img {width: 100%; height: 100%; object-fit: contain;}
.greetings .sec1 .img-wrap {flex:0 0 clamp(200px, calc(430 / var(--inner) * 100vw), 430px); width:clamp(200px, calc(430 / var(--inner) * 100vw), 430px); max-width:100%; }
.greetings .sec1 .img-wrap .img {background:#fff; box-shadow:2px 2px 20px rgba(0,0,0,0.18); position: relative; margin-right: var(--space-16);}
.greetings .sec1 .img-wrap .img img {display:block; width:100%; aspect-ratio:413/555; object-fit:cover;}
.greetings .sec1 .img-wrap .img::after {content:''; position:absolute; right: calc(var(--space-16) * -1); bottom: calc(var(--space-16) * -1); width: clamp(160px, calc(260 / var(--inner) * 100vw), 260px); height:clamp(160px, calc(260 / var(--inner) * 100vw), 260px); background: var(--color-primary); z-index:-1;}
.greetings .sec2 .cont-tit {margin-bottom:var(--space-30);}
.greetings .sec2 .cont-tit h3 {font-size:var(--font-size-32); font-weight:700; line-height:1; letter-spacing:-0.03em; color:#121212; position: relative; padding-left: 15px;}
.greetings .sec2 .cont-tit h3::before {content:''; position:absolute; left:0; top:0; width:5px; height:100%; background:var(--color-primary);}
.greetings .sec2 .vision {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-30);}
.greetings .sec2 .vision .item {min-width:0; padding:var(--space-30); border-radius:var(--radius-16); background:#fff; box-shadow:6px 6px 30px rgba(0,0,0,0.1); display: flex; flex-direction: column; aspect-ratio: 380 / 328;}
.greetings .sec2 .vision .item .num {display:inline-block; margin-bottom:var(--space-20); padding:var(--space-6) var(--space-16); border-radius: 24px; background:var(--color-primary); font-size:var(--font-size-14); font-weight:600; line-height:1; color:#fff;}
.greetings .sec2 .vision .item .tit {margin-bottom:var(--space-30); font-size:var(--font-size-24); font-weight:600; line-height:1.25; color:#121212;}
.greetings .sec2 .vision .item .desc {font-size:var(--font-size-18); line-height:1.67; color:#505050;}
.greetings .sec2 .vision .item .icon {margin-top: auto; margin-left: auto; width:48px; height:48px; user-select: none;}
.greetings .sec2 .vision .item .icon img {width:100%; height:100%; object-fit:contain;}

/* 면허 및 자격 */
.license .list {display:grid; grid-template-columns:repeat(4, 1fr); gap: var(--space-60) var(--space-40);}
.license .list li {width:100%; aspect-ratio: 270 / 360; overflow:hidden; position: relative;}
.license .list li::after {content:''; position:absolute; left:0; top:0; width:100%; height:100%; border: 1px solid #ddd; z-index:1;}
.license .list li img {width:100%; height:100%; object-fit:cover;}

/* 공사분야 */
.field > section {padding:var(--space-60) 0;}
.field > section:last-child {padding-bottom:0;}
.field .point {color:var(--color-primary);}
.field .sec1 {text-align:center; padding-top: 0;}
.field .sec1 .intro {font-size:var(--font-size-18); line-height:1.67;}
.field header.tit {margin-bottom:var(--space-30);}
.field header.tit h3 {position:relative; margin:0; padding-left: 15px; font-size:var(--font-size-32); font-weight:700; line-height:1; color:#121212;}
.field header.tit h3::before {content:''; position:absolute; left:0; top:0; width:5px; height:100%; background:var(--color-primary);}
.field .feat-grid {display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-24);}
.field .feat-grid .box {padding: var(--space-30); border:1px solid #ddd; border-radius:var(--radius-16); text-align:center;}
.field .feat-grid .icon {width:56px; height:56px; margin:0 auto var(--space-30) auto; user-select: none;}
.field .feat-grid .icon img {display:block; width:100%; height:100%; object-fit:contain;}
.field .feat-grid .txt {font-size:var(--font-size-18); line-height:1.67;}
.field .time-grid {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-30);}
.field .time-grid .box {padding:var(--space-50) var(--space-30); border:1px solid #ddd; border-radius:var(--radius-16); background:#fafafa; display: flex; flex-direction: column;}
.field .time-grid .txt {font-size:var(--font-size-18); line-height:1.67;}
.field .time-grid .point {font-weight:600;}
.field .time-grid .icon {margin-left:auto; margin-top: var(--space-60); width:64px; height:64px; user-select: none;}
.field .time-grid .icon img {display:block; width:100%; height:100%; object-fit:contain;}
.field .sec4 {padding-bottom: var(--space-100);}
.field .maintain {border-top:2px solid var(--color-primary);}
.field .maintain li {display:flex; align-items:center; gap:var(--space-50); padding:var(--space-50) var(--space-30); border-bottom: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, repeating-linear-gradient(-45deg, #ddd 0 10px, #0000 0 calc(10px * 2)) border-box;}
.field .maintain li:last-child {border-bottom:none;}
.field .maintain .num {font-size:var(--font-size-32); font-weight:700; line-height:1; color:#878787;}
.field .maintain .txt {font-size:var(--font-size-18); line-height:1.67;}
.field .sec5 {padding: var(--space-100) 0;}
.painting .sec5 {background: url('/images/sub/painting-major.jpg') no-repeat center / cover;}
.waterproof .sec5 {background: url('/images/sub/waterproof-major.jpg') no-repeat center / cover;}
.paving .sec5 {background: url('/images/sub/paving-major.jpg') no-repeat center / cover;}
.field .sec5 header.tit h3 {padding-left: 0; color: #fff;}
.field .sec5 header.tit h3::before {content:none;}
.field .major-grid {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-20);}
.field .major-grid .box {padding:var(--space-30); border:1px solid #ddd; border-radius:var(--radius-16); background:#fff; text-align: center;}
.field .major-grid .tit {margin-bottom:var(--space-20); font-size:var(--font-size-24); font-weight:600; line-height:1; color:var(--color-primary);}
.field .major-grid .desc {font-size:var(--font-size-18); line-height:1.67;}
.field .major-grid.type2 {display:grid; grid-template-columns:repeat(1, 1fr);}
.field .major-grid.type2 .box {display: flex; align-items: center; gap: var(--space-50);}
.field .major-grid.type2 .tit {margin-bottom: 0; text-align: left; flex: 0 0 132px;}
.field .major-grid .dot-list li {position: relative; font-size: var(--font-size-18); line-height:1.3; margin-bottom: var(--space-10); text-align: left; padding-left: 15px;}
.field .major-grid .dot-list li:last-child {margin-bottom: 0;}
.field .major-grid .dot-list li::before {content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; background: var(--color-primary); border-radius: 50%;}
.field .sec6 {padding-top: var(--space-120);}
.field .cont .step {margin-bottom:var(--space-80);}
.field .cont .step:last-child {margin-bottom:0;}
.field .cont .step .step-tit {margin-bottom: var(--space-30); font-size:var(--font-size-24); font-weight:600; line-height:1; color:#121212;}
.field .step-list {display:flex; flex-wrap:wrap; gap:var(--space-30);}
.field .step-list li {width: calc(33.33% - (var(--space-30) * 2 / 3));}
.field .step-list li .img {overflow:hidden; border-radius:var(--radius-16) var(--radius-16) 0 0; border: 1px solid #ddd; border-bottom: 0; aspect-ratio:380/223; width: 100%;}
.field .step-list li .img img {display:block; width:100%; height: 100%; object-fit:cover;}
.field .step-list li .info {padding:var(--space-30) var(--space-50); text-align:center; border: 1px solid #ddd; border-radius: 0 0 var(--radius-16) var(--radius-16);}
.field .step-list li .num {display:inline-block; margin-bottom: 6px; padding: 8px 14px; border:1px solid var(--color-primary); border-radius: 24px; font-size:var(--font-size-12); font-weight:600; line-height:1; color:var(--color-primary);}
.field .step-list li .tit {font-size:var(--font-size-18); font-weight:600; line-height:1.55; color:#121212;}

/* 시공사례 */
.prj-tab-wrap {position:relative; text-align:center; margin-bottom:var(--space-80); display: flex; justify-content: center;}
.prj-tab {position:relative; overflow:hidden;}
.prj-tab ul {display:flex; margin: 0 auto;}
.prj-tab ul li {flex: initial; width: auto; margin: 0 var(--space-10);}
.prj-tab ul li a {display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; padding: var(--space-20) var(--space-30); color:#999; font-weight:500; font-size:var(--font-size-20); line-height:1.2em; letter-spacing:-.03em; background: #f1f1f1; border-radius: 54px; white-space: nowrap;}
.prj-tab ul li.active a {color:#fff; background: var(--color-primary);}

/* 협력사 */
.partner {display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-60) var(--space-20);}
.partner .item {border: 1px solid #ddd; border-radius: var(--radius-8); aspect-ratio: 224 / 80; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.partner .item img {max-width: 100%; max-height: 100%;}