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

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

.doc-tit {text-align:center; margin-bottom:var(--space-50);}
.doc-tit .en {margin-bottom:var(--space-20); font-size:var(--font-size-16); font-weight:600; line-height:1.3; letter-spacing:-0.03em; color:var(--color-primary);}
.doc-tit h3 {font-size:var(--font-size-32); line-height:1.3em; color:#2c2c2c;}

.subtitle {margin-bottom:var(--space-16); font-size:var(--font-size-22); font-weight:600; line-height:1.3; letter-spacing:-0.03em; color:#2c2c2c;}

.table-style table {width:100%; border-collapse:collapse; border-spacing:0px; font-size:var(--font-size-18); line-height:1.66em; letter-spacing:-.03em;}
.table-style table th {padding:var(--space-15); border:1px solid #ddd; background: rgba(221, 35, 25, 0.04);font-weight:600; color:#2c2c2c;}
.table-style table td {padding:var(--space-15); border:1px solid #ddd; color:#454545; text-align:center;}
.table-style table td strong {font-weight: 600;}
.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;}

/* 인사말 */
.greetings .image {margin-bottom:var(--space-50); border-radius:var(--radius-40); overflow:hidden;}
.greetings .content {background:url('/images/sub/logo-text.png') 100% 0 no-repeat; background-size:auto 18px;}
.greetings .content h3 {margin-bottom:var(--space-36); font-size:var(--font-size-34); line-height:1.35em; letter-spacing:-0.03em; color:#2c2c2c;}
.greetings .content p {max-width:1100px; font-size:var(--font-size-18); line-height:1.5em; letter-spacing:-0.03em; color:#454545;}
.greetings .content .sign {margin-top:var(--space-36); font-size:var(--font-size-22); font-weight:600;}

/* 회사연혁 */
.history-top {border-radius:var(--radius-40); overflow:hidden;}
.history {position:relative; display:flex; flex-direction:column; gap:var(--space-100); padding-top:var(--space-100);}
.history:before {content:''; position:absolute; left:50%; top:0; bottom:16px; width:1px; background:#ddd;}
.history:after {content:''; position:absolute; left:50%; top:0; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); width:32px; aspect-ratio:1/1; background:url('/images/sub/history-point.svg') no-repeat center center / contain;}
.history .history-list {list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-80);}
.history .history-item {position:relative; display:flex; align-items:flex-start; min-height:32px;}
.history .item {position:relative; display:flex;}
.history .item:before {content:''; position:absolute; left:0; top:0; -webkit-transform:translate(-50%,0); transform:translate(-50%,0); width:32px; aspect-ratio:1/1; background:url('/images/sub/history-point.svg') no-repeat center center / contain;}
.history .item .year {width:clamp(90px, calc(120 / var(--inner) * 100vw), 120px); flex-shrink:0; font-size:var(--font-size-32); font-weight:700; line-height:1; letter-spacing:-0.03em; color:var(--color-primary);}
.history .item .list {display:flex; flex-direction:column; gap:var(--space-20); padding-top:.12em; font-size:var(--font-size-18); line-height:1.5; letter-spacing:-0.03em;}
.history .item .list li {display:flex; align-items:center;}
.history .item .list li .month {flex:0 0 87px; flex-shrink:0; font-weight:600; color:#2c2c2c;}
.history .item .list li .text {color:#454545;}
.history .item:nth-child(odd) {flex-direction:row; margin-left:50%; padding-left:clamp(60px, calc(75 / var(--inner) * 100vw), 75px);}
.history .item:nth-child(even) {flex-direction:row-reverse; margin-right:50%; padding-right:clamp(60px, calc(75 / var(--inner) * 100vw), 75px); text-align:right;}
.history .item:nth-child(even)::before {left:auto; right:0; -webkit-transform:translate(50%,0); transform:translate(50%,0);}
.history .item:nth-child(even) .list li {flex-direction:row-reverse;}

/* 찾아오시는 길 */
.directions {margin-bottom:var(--space-110); font-size:var(--font-size-18); line-height:1.5; letter-spacing:-0.03em;}
.directions:last-child {margin-bottom:0;}
.directions h3 {margin-bottom:var(--space-16); font-size:var(--font-size-30); font-weight:600; line-height:1.2; letter-spacing:-0.03em; color:#2c2c2c;}
.directions h3 img {vertical-align:middle; margin:-.2em 6px 0 0;}
.directions .wrap {display:flex; align-items:center; padding:var(--space-40) 0; gap:var(--space-80) var(--space-80); border-top:2px solid #2c2c2c; border-bottom:2px solid #ddd;}
.directions .cnt-area {flex:1; min-width:0;}
.directions .info {margin:0; display:flex; flex-direction:column; gap:var(--space-20);}
.directions .info dl {display:flex;}
.directions .info dt {flex:0 0 clamp(60px, calc(110 / var(--inner) * 100vw), 110px); flex-shrink:0; font-weight:600; color:#2c2c2c;}
.directions .info dd {flex:1; min-width:0; color:#454545;}
.directions .map-area {width:63%;}
.directions .root_daum_roughmap {width:100% !important;}
.directions .root_daum_roughmap .wrap_map {height:clamp(240px, calc(400 / var(--inner) * 100vw), 400px) !important;}
.directions .root_daum_roughmap .cont {display:none !important;}
.directions .info-2 {border-top:2px solid #2c2c2c; }
.directions .info-2 .row {display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-20) var(--space-30); padding:var(--space-24) 0; border-bottom:1px solid #ddd;}
.directions .info-2 .row:last-child {border-bottom:none;}
.directions .info-2 .row dl {display:flex; gap:var(--space-40);}
.directions .info-2 .row dt {flex-shrink:0; font-weight:600; color:#2c2c2c;}
.directions .info-2 .row dd {color:#454545;}
.directions .info-2 .row .vline {width:1px; height:13px; background:#ddd;}

/* 사업분야 */
.biz-philosophy {display:flex; width:100%;}
.biz-philosophy .item {position:relative; flex:1; height:clamp(220px, calc(446 / var(--inner) * 100vw), 446px); background-position:50% 50%; background-size:cover; background-repeat:no-repeat; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--space-30); color:#fff; text-align:center;}
.biz-philosophy .item .num {margin-bottom:var(--space-20); font-size:var(--font-size-18); font-weight:400; line-height:1.22; letter-spacing:-0.03em;}
.biz-philosophy .item .tit {font-size:var(--font-size-22); font-weight:600; line-height:1.45; letter-spacing:-0.03em;}
.biz-philosophy .item:nth-child(1) {background-image:url('/images/sub/biz1-img1.jpg');}
.biz-philosophy .item:nth-child(2) {background-image:url('/images/sub/biz1-img2.jpg');}
.biz-philosophy .item:nth-child(3) {background-image:url('/images/sub/biz1-img3.jpg');}

.biz-advantages {display:flex; flex-wrap:wrap; justify-content:center; margin:calc(var(--space-20) * -1);}
.biz-advantages .item {width:33.33333333%; padding:var(--space-20);}
.biz-advantages .item .box {display:flex; align-items:center; gap:var(--space-30); width:100%; height:100%; border:1px solid #ddd; border-radius:var(--radius-16); padding:var(--space-40);}
.biz-advantages .item .icon {display:block; width:40px; height:40px;}
.biz-advantages .item .icon img {display:block; width:100%; height:100%; object-fit:contain;}
.biz-advantages .item .text {font-size:var(--font-size-22); font-weight:600; line-height:1.5; letter-spacing:-0.03em; color:#454545;}
.biz-advantages .item .text h4 {font-size:var(--font-size-22); font-weight:600; line-height:1.5; letter-spacing:-0.03em;}
.biz-advantages .item .text h4 + p {margin-top:var(--space-10); font-size:var(--font-size-18); font-weight:400; line-height:1.33; letter-spacing:-0.03em;}

.biz-policy {padding:var(--space-100) 0; background:rgba(221, 35, 25, 0.04);}
.biz-policy .items {display:flex; flex-wrap:wrap; justify-content:center; margin:calc(var(--space-10) * -1);}
.biz-policy .item {width:20%; padding:var(--space-10);}
.biz-policy .item .box {display:flex; flex-direction:column; align-items:center; gap:var(--space-20); width:100%; height:100%; background:#fff; border-radius:var(--radius-16); padding:var(--space-30); text-align:center;}
.biz-policy .item .num {font-size:var(--font-size-18); line-height:1.4; letter-spacing:-0.01em; color:var(--color-primary);}
.biz-policy .item .icon {display:block; width:40px; height:40px;}
.biz-policy .item .icon img {display:block; width:100%; height:100%; object-fit:contain;}
.biz-policy .item .text {font-size:var(--font-size-18); line-height:1.44; letter-spacing:-0.03em; color:#454545;}

.biz-service {display:flex; flex-direction:column; align-items:center; justify-content:center; height:350px; gap:var(--space-40); border-radius:var(--radius-24); padding:var(--space-40); background:url('/images/sub/biz1-img4.jpg') 50% 50% / cover no-repeat; color:#fff; font-size:var(--font-size-22); line-height:1.45; letter-spacing:-0.03em; text-align:center;}
.biz-service strong {font-weight:600;}
.biz-service .line {width:100px; height:1px; background:#fff;}

.biz-types {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-60);}
.biz-types .item {display:flex; flex-direction:column; text-align:center;}
.biz-types .item .title {flex-shrink:0; padding:var(--space-20) var(--space-30); border-radius:var(--radius-16) var(--radius-16) 0 0;  background:rgba(221, 35, 25, 0.08);}
.biz-types .item .title h4 {font-size:var(--font-size-22); font-weight:600; line-height:1.45; letter-spacing:-0.03em; color:#2c2c2c;}
.biz-types .item .text {flex:1; min-height:0; padding:var(--space-60) var(--space-30); display:flex; flex-direction:column; justify-content:center; align-items:center; border:1px solid #ddd; border-top:0; border-radius:0 0 var(--radius-16) var(--radius-16); font-size:var(--font-size-18); line-height:1.55; letter-spacing:-0.03em; color:#454545;}

.insurance {padding:var(--space-100) 0; background:url('/images/sub/insurance-bg.jpg') 50% 50% / cover no-repeat;}
.insurance .wrap {display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:var(--space-60); width:100%;}
.insurance .title h4 {font-size:var(--font-size-32); font-weight:400; line-height:1.5em; color:#2c2c2c;}
.insurance .title h4 strong {font-weight:600;}
.insurance .content {width:100%; max-width:720px; display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-20);}
.insurance .content .item {border-radius:var(--radius-16); padding:var(--space-50) var(--space-30); text-align:center;}
.insurance .content .item .icon {display:block; width:64px; aspect-ratio:1/1; margin:0 auto var(--space-30) auto;}
.insurance .content .item .icon img {display:block; width:100%; height:100%; object-fit:contain;}
.insurance .content .item .tit {margin-bottom:var(--space-20); font-size:var(--font-size-22); font-weight:600; line-height:1.45; letter-spacing:-0.03em;}
.insurance .content .item .txt {font-size:var(--font-size-18); line-height:1.33; letter-spacing:-0.03em;}
.insurance .content .item:nth-child(1) {background:#fff;}
.insurance .content .item:nth-child(1) .tit {color:#2c2c2c;}
.insurance .content .item:nth-child(1) .txt {color:#454545;}
.insurance .content .item:nth-child(2) {background: rgba(221, 35, 25, 0.60); color:#fff;}

.remodeling {padding:var(--space-50); text-align:center; border-radius:var(--radius-24); background:url('/images/sub/remodeling.jpg') 50% 50% / cover no-repeat;}
.remodeling .inner {width:80%; max-width:790px; margin:0 auto; padding:var(--space-40); border-radius:var(--radius-24); background:#FEF6F6;}
.remodeling .icon {margin-bottom:var(--space-20);}
.remodeling h3 {margin-bottom:var(--space-20); font-size:var(--font-size-22); font-weight:600; line-height:1.4; letter-spacing:-0.03em; color:#2c2c2c;}
.remodeling p {font-size:var(--font-size-18); line-height:1.44; letter-spacing:-0.03em; color:#454545;}

/* 제품소개 */
.prd-list {margin-bottom:var(--space-80);}
.prd-list ul {display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-30);}
.prd-list ul li {margin:0;}
.prd-list ul li a {display:block; padding:0 0 var(--space-18); font-size:var(--font-size-18); line-height:1.5; letter-spacing:-0.03em; color:#888; text-decoration:none;}
.prd-list ul li a:hover {color:var(--color-primary);}
.prd-list ul li.active a {border-bottom:2px solid var(--color-primary); font-weight:600; color:var(--color-primary);}

.prd-wrap {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-60);}
.prd-wrap .col {display:flex; flex-direction:column; justify-content:center;}
.prd-wrap .image {width:100%; aspect-ratio:670/550; overflow:hidden;}
.prd-wrap .image img {width:100%; height:100%; object-fit:cover;}

.prd-wrap .cat {margin-bottom:var(--space-10); font-size:var(--font-size-18); line-height:1.3; letter-spacing:-0.03em; color:#454545;}
.prd-wrap .tit {margin-bottom:var(--space-30); font-size:var(--font-size-32); font-weight:600; line-height:1.3; letter-spacing:-0.03em; color:#2c2c2c;}
.prd-wrap .spec {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid var(--color-primary); font-size:var(--font-size-18); line-height:1.5; letter-spacing:-0.03em; color:#454545;}
.prd-wrap .spec th {padding:var(--space-20); border:1px solid #ddd; background:#FEF6F6; text-align:center; font-weight:400;}
.prd-wrap .spec td {padding:var(--space-20); border:1px solid #ddd; text-align:center;}
.prd-wrap .spec tr th:first-child,
.prd-wrap .spec tr td:first-child {border-left:0;}
.prd-wrap .spec tr th:last-child,
.prd-wrap .spec tr td:last-child {border-right:0;}