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

/* 인사말 */
.greetings .top {margin-bottom:var(--space-70);}
.greetings .top .img {width:100%; overflow:hidden; border-radius:var(--radius-32);}
.greetings .top .img img {display:block; width:100%; aspect-ratio:1300 / 450; object-fit:cover;}
.greetings .intro {display:flex; justify-content: space-between; gap:var(--space-50); line-height:1.35;}
.greetings .head {font-size:var(--font-size-40); letter-spacing:-0.03em;}
.greetings .head h3 {color:#242424; font-weight:500;}
.greetings .head strong {color:#4f4f4f; font-weight:700;}
.greetings .head .primary {color:var(--color-primary);}
.greetings .txt {width:56.8%; display:flex; flex-direction:column; gap:var(--space-30); font-size:var(--font-size-16); color:#454545; line-height:1.87; letter-spacing:-0.03em;}
.greetings .txt .sign {font-weight:600; color:#242424;}

/* 찾아오시는 길 */
.directions .info {width: 100%; display:flex; align-items: center; justify-content: center; gap:var(--space-120); border: 1px solid #ddd; border-radius: var(--radius-32); padding: var(--space-40); margin-bottom: var(--space-40);}
.directions .info dl {display: flex; align-items: center; gap: 10px; line-height: 1.87;}
.directions .info dt {display: inline-flex; align-items: center; justify-content: center; position: relative; padding-right: 10px; color: var(--color-primary); font-weight: 600;}
.directions .info dt .img {margin-right: 10px; width: 24px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; user-select: none;}
.directions .info dt .img img {object-fit: contain;}
.directions .info dt::after {content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 10px; background: #ddd;}
.directions .info dd {color: #484848;}
.directions .map-area {width:63%;}
.directions .root_daum_roughmap {width:100% !important; border-radius: var(--radius-32);}
.directions .root_daum_roughmap .wrap_map {height:clamp(300px, calc(500 / var(--inner) * 100vw), 500px) !important;}
.directions .root_daum_roughmap .cont {display:none !important;}
.directions .root_daum_roughmap .border1 {display:none !important;}
.directions .root_daum_roughmap .border2 {display:none !important;}
.directions .root_daum_roughmap .border3 {display:none !important;}
.directions .root_daum_roughmap .border4 {display:none !important;}
.directions .root_daum_roughmap .wrap_controllers {display:none !important;}

/* 사업분야 */
.business .top .img img {width:100%; height:100%; object-fit:cover;}
.business .top .img {width:100%; aspect-ratio:1300 / 500; overflow:hidden; border-radius:var(--radius-32);}
.business section {padding: var(--space-70) 0; border-bottom: 1px solid #eee;}
.business section:last-child {padding-bottom:0; border-bottom:0;}
.business header.tit {margin-bottom:var(--space-40); padding-left: var(--space-30); position: relative;}
.business header.tit::before {content: ''; position: absolute; left: 0; top: 7px; width: 16px; aspect-ratio: 16 / 24; background: url('../images/sub/business-tit.svg') no-repeat center / contain;}
.business header.tit h3 {color: #242424; font-size:var(--font-size-32); font-weight:600; line-height:1.3;}
.business .cont {padding-left: var(--space-30);}
.business .bullet-list > li {color: #242424; font-size:var(--font-size-20); line-height:1.7; position: relative; padding-left: 13px; margin-bottom: var(--space-15);}
.business .bullet-list > li:last-child {margin-bottom:0;}
.business .bullet-list > li::before {content: ''; position: absolute; left: 0; top: 14px; width: 5px; height: 5px; background: var(--color-primary); transform: rotate(45deg);}
.business .bullet-list > li p {color: #454545; font-size: var(--font-size-18); margin: var(--space-10) 0;}
.business li .bullet-list2-wrap > p {color: #454545; font-size: var(--font-size-18); margin: var(--space-20) 0 var(--space-10);}
.business .bullet-list2 > li {color: #676767; font-size: var(--font-size-16); line-height: 1.5; position: relative; padding-left: 10px; margin-bottom: var(--space-10);}
.business .bullet-list2 > li::before {content: ''; position: absolute; left: 0; top: 9px; width: 4px; height: 4px; background: #b1d4ec; transform: rotate(45deg);}
.business .bullet-list2 > li:last-child {margin-bottom:0;}
.business .bullet-list2.type2 {margin: var(--space-15) 0 var(--space-20);}
.business .bullet-list2.type2 > li {color: #454545; font-size: var(--font-size-18); line-height: 1.5; margin-bottom: var(--space-10); padding-left: 12px;}
.business .bullet-list2.type2 > li::before {top: 11px;}
.business .bullet-list2.type2 > li:last-child {margin-bottom:0;}
.business .process-img {margin-bottom: var(--space-40);}

.business .flow {display: grid; grid-template-columns: repeat(4, 1fr);}
.business .flow.items5 {grid-template-columns: repeat(5, 1fr);}
.business .flow.items6 {grid-template-columns: repeat(6, 1fr);}
.business .flow .item {width: 100%;}
.business .flow .arrow-area {position: relative; margin-bottom: var(--space-35); width: 100%; height: 28px;}
.business .flow .arrow-area::before {content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: #ddd; z-index: 2;}
.business .flow .arrow-area .line {position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 4px; background: #ddd;}
.business .flow .arrow-area .arrow + .line {width: calc(100% - 10px);}
.business .flow .arrow-area .arrow {position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 24px; background: url('../images/sub/flowchart-arrow-head.svg') no-repeat center / contain; z-index: 1;}
.business .flow.items5 .arrow-area .arrow {background: url('../images/sub/flowchart-arrow-head2.svg') no-repeat center / contain;}
.business .flow.items6 .arrow-area .arrow {background: url('../images/sub/flowchart-arrow-head3.svg') no-repeat center / contain;}
.business .flow .con {padding-right: var(--space-20);}
.business .flow .con .tit {margin-bottom: var(--space-20);}
.business .flow .con .tit .num {width: 36px; height: 36px; border-radius: 50%; background: #ddd; color: #fff; font-size: var(--font-size-16); font-weight: 600; line-height: 1.5; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-20);}
.business .flow .con .tit h4 {font-size: var(--font-size-20); font-weight: 600; line-height: 1.7; letter-spacing:-0.03em; color:#242424;}
.business .flow .con .tit h4 .note {color: #878787; font-size: var(--font-size-16); font-weight: 400; line-height: 1.5; letter-spacing:-0.03em; display: block; margin-top: 5px;}

.business .flow .con .tit .num {width: 32px; height: 32px; font-size: var(--font-size-14); margin-bottom: var(--space-15);}
.business .flow.items6 .con .tit h4 {font-size: var(--font-size-18); line-height: 1.77;}

.business .flow.items4 .item1 .arrow-area::before {background: #b0d3ec;}
.business .flow.items4 .item1 .arrow-area .line {background: linear-gradient(to right, #b0d3ec, #86bde2);}
.business .flow.items4 .item1 .tit .num {background: #8bc0e3;}
.business .flow.items4 .item2 .arrow-area::before {background: #86bde2;}
.business .flow.items4 .item2 .arrow-area .line {background: linear-gradient(to right, #86bde2, #5aa5d8);}
.business .flow.items4 .item2 .tit .num {background: #55a3d7;}
.business .flow.items4 .item3 .arrow-area::before {background: #5aa5d8;}
.business .flow.items4 .item3 .arrow-area .line {background: linear-gradient(to right, #5aa5d8, #2e8dce);}
.business .flow.items4 .item3 .tit .num {background: #3591cf;}
.business .flow.items4 .item4 .arrow-area::before {background: #2e8dce;}
.business .flow.items4 .item4 .arrow-area .line {background: linear-gradient(to right, #2e8dce, #0275c3);}
.business .flow.items4 .item4 .tit .num {background: #0275c3;}

.business .flow.items5 .item1 .arrow-area::before {background: #b0d3ec;}
.business .flow.items5 .item1 .arrow-area .line {background: linear-gradient(to right, #b0d3ec, #8ebfe1);}
.business .flow.items5 .item1 .tit .num {background: #8bc0e3;}
.business .flow.items5 .item2 .arrow-area::before {background: #8ebfe1;}
.business .flow.items5 .item2 .arrow-area .line {background: linear-gradient(to right, #8ebfe1, #6baad5);}
.business .flow.items5 .item2 .tit .num {background: #55a3d7;}
.business .flow.items5 .item3 .arrow-area::before {background: #6baad5;}
.business .flow.items5 .item3 .arrow-area .line {background: linear-gradient(to right, #6baad5, #4895c9);}
.business .flow.items5 .item3 .tit .num {background: #3591cf;}
.business .flow.items5 .item4 .arrow-area::before {background: #4895c9;}
.business .flow.items5 .item4 .arrow-area .line {background: linear-gradient(to right, #4895c9, #257fbd);}
.business .flow.items5 .item4 .tit .num {background: #0275c3;}
.business .flow.items5 .item5 .arrow-area::before {background: #257fbd;}
.business .flow.items5 .item5 .arrow-area .line {background: linear-gradient(to right, #257fbd, #026ab1);}
.business .flow.items5 .item5 .tit .num {background: #026ab1;}

.business .flow.items6 .item1 .arrow-area::before {background: #b0d3ec;}
.business .flow.items6 .item1 .arrow-area .line {background: linear-gradient(to right, #b0d3ec, #94bfdc);}
.business .flow.items6 .item1 .tit .num {background: #8bc0e3;}
.business .flow.items6 .item2 .arrow-area::before {background: #94bfdc;}
.business .flow.items6 .item2 .arrow-area .line {background: linear-gradient(to right, #94bfdc, #77aacc);}
.business .flow.items6 .item2 .tit .num {background: #55a3d7;}
.business .flow.items6 .item3 .arrow-area::before {background: #77aacc;}
.business .flow.items6 .item3 .arrow-area .line {background: linear-gradient(to right, #77aacc, #5a94bc);}
.business .flow.items6 .item3 .tit .num {background: #3591cf;}
.business .flow.items6 .item4 .arrow-area::before {background: #5a94bc;}
.business .flow.items6 .item4 .arrow-area .line {background: linear-gradient(to right, #5a94bc, #3c7fab);}
.business .flow.items6 .item4 .tit .num {background: #0275c3;}
.business .flow.items6 .item5 .arrow-area::before {background: #3c7fab;}
.business .flow.items6 .item5 .arrow-area .line {background: linear-gradient(to right, #3c7fab, #1f699b);}
.business .flow.items6 .item5 .tit .num {background: #026ab1;}
.business .flow.items6 .item6 .arrow-area::before {background: #1f699b;}
.business .flow.items6 .item6 .arrow-area .line {background: linear-gradient(to right, #1f699b, #01538a);}
.business .flow.items6 .item6 .tit .num {background: #01538a;}

.business .flow + ul {margin-top: 10px;}

.business .flow-list > li {color: #454545; line-height:1.5; position: relative; padding-left: 12px; margin-bottom: var(--space-15);}
.business .flow-list > li:last-child {margin-bottom:0;}
.business .flow-list > li::before {content: ''; position: absolute; left: 0; top: 9px; width: 4px; height: 4px; background: var(--color-primary); transform: rotate(45deg);}
.business .decimal-list {margin-top: var(--space-20);}
.business .decimal-list > li {color: #454545; font-size: var(--font-size-18); line-height:1.5; margin-bottom: var(--space-15);}
.business .decimal-list > li:last-child {margin-bottom:0;}
.business .decimal-list .bullet-list2 {margin: var(--space-15) 0 0 var(--space-15);}

.business .process {display: flex; align-items: center; justify-content: center; gap: var(--space-20); margin-bottom: var(--space-40);}
.business .process .item {display: flex; align-items: center; justify-content: center; gap: var(--space-15); flex-direction: column; border-radius: 50%; border: 1px solid #ddd; padding: var(--space-20); text-align: center; aspect-ratio: 1; font-size: var(--font-size-20); font-weight: 600; line-height: 1.58; color: var(--color-primary);}
.business .process .item.result {border-color: var(--color-primary); color: #fff; background: var(--color-primary);}
.business .process.items4 .item {width: calc(25% - (((var(--space-30) * 2) + var(--space-48)) * 2) / 4);}
.business .process.items5 .item {width: calc(20% - (((var(--space-20) * 2) + var(--space-40)) * 2) / 5);}
.business .process .op {width: var(--space-40); height: var(--space-40); flex: 0 0 auto; min-width: 30px; min-height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e6f1f9; color: var(--color-primary); font-size: var(--font-size-18); font-weight: 600; line-height: 1.77;}
.business .process.type2 {gap: var(--space-30);}
.business .process.type2 .item .step {font-size: var(--font-size-18); margin-top: calc(var(--font-size-18) * -1);}
.business .process.type2 .item p {color: #242424; font-size: var(--font-size-24);}
.business .process.type2 .op {width: var(--space-48); height: var(--space-48);}

.business .flowchart-img {width: calc(100% + var(--space-30)); margin-left: calc(var(--space-30) * -1);}
.business .flowchart-img img {width: 100%;}
.business .timing {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-10);}
.business .timing .item {border: 1px solid #ddd; border-radius: var(--radius-16); padding: var(--space-15) var(--space-30) var(--space-25); text-align: center;}
.business .timing-tit {width: 100%; padding-bottom: var(--space-20); border-bottom: 1px solid #eee; margin-bottom: var(--space-20);}
.business .timing-tit .icon {width: 5px; height: 5px; background: var(--color-primary); transform: rotate(45deg); display: inline-block;}
.business .timing-tit h4 {font-size: var(--font-size-20); font-weight: 600; line-height: 1.5; color:#242424;}
.business .timing-cont {font-size: var(--font-size-18); line-height: 1.5; color:#454545;}
.business .flow-warning {display: flex; gap: var(--space-10); margin-top: var(--space-36); padding: var(--space-20) var(--space-16); border: 1px solid #ddd;}
.business .flow-warning .icon {width: 18px; height: 18px; user-select: none; margin-top: 5px; flex: 0 0 auto;}
.business .flow-warning .icon img {width: 100%; height: 100%; object-fit: contain;}
.business .flow-warning p {font-size: var(--font-size-18); line-height: 1.5; color:#454545;}

/* 견적문의 */
.required {color: var(--color-primary);}
.request-top {margin-bottom: var(--space-20); font-size: var(--font-size-18); line-height: 1.5; color:#454545;}