@charset "utf-8";
.root_daum_roughmap .wrap_map, .root_daum_roughmap, .direction-map iframe {width: 100% !important; height: 100% !important;}

.page-title .tag {margin-bottom: var(--space-30); font-family: 'Play', sans-serif; font-size: var(--font-size-18); font-weight: 700; line-height: 1.5556em; color: var(--dark-color);}
.page-title h3 {font-size: var(--font-size-40); font-weight: 700; line-height: 1.4em; color: var(--dark-color);}
.page-title p {margin-top: var(--space-20); font-size: var(--font-size-18); line-height: 1.7778em;}
.sec-tit {margin: 0 0 var(--space-100); font-size: clamp(30px, calc(44 / var(--inner) * 100vw), 44px); font-weight: 700; line-height: 1.2727em; text-align: center; color: #fff;}
.bg-gray {background: #FAFAFA;}
.dot-list li {text-indent: -1em; padding-left: 1em;}
.dot-list li:not(:last-child) {margin-bottom: var(--space-8);}
.dot-list li:before {content: '•'; margin-right: 10px; color: var(--primary-color);}

.greeting-photo {border-radius: 500px; overflow: hidden;}
.greeting-sign {display: flex; align-items: flex-end; gap: 25px; line-height: 1em;}
.greeting-cnt {display: flex; justify-content: space-around; gap: 20px 35px; line-height: 1.777em;}

.history-timeline {position: relative; display: flex; flex-direction: column; gap: var(--space-150);}
.history-timeline:before {content: ''; position: absolute; left: 50%; top: 15px; bottom: 0; width: 1px; background: #ddd;}
.history-era {position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 35px;}
.history-era-left {flex: 1; display: flex; flex-direction: column; gap: var(--space-60);}
.history-era-head {display: flex; flex-direction: column; gap: 8px;}
.history-era-period {margin: 0; font-size: var(--font-size-64); font-weight: 700; line-height: 1; letter-spacing: -0.02em; background: var(--gradient-color); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: 'Play', sans-serif;}
.history-era-period .history-era-current {font-size: .8125em;}
.history-era-img {overflow: hidden; width: 100%; max-width: 500px; aspect-ratio: 500 / 261; border-radius: 500px; background: #fff;}
.history-era-img img {width: 100%; height: 100%; object-fit: cover;}
.history-era-right {width: 50%; max-width: 700px; display: flex; flex-direction: column; gap: var(--space-120); padding-top: 0;}
.history-year {display: flex; align-items: flex-start; gap: 15px var(--space-60); height: fit-content; padding-left: var(--space-60);}
.history-year-tit:before {content: ''; position: absolute; left: calc(var(--space-60) * -1); top: 50%; width: clamp(12px, calc(18 / var(--inner) * 100vw), 18px); height: clamp(12px, calc(18 / var(--inner) * 100vw), 18px); background: #fff; border: 3px solid var(--secondary-color); border-radius: 100%; transform: translate(-50%, -50%);}
.history-year-tit {position: relative; flex: 0 0 90px; max-width: 90px; margin: 0;}
.history-year-list {flex: 1; min-width: 0; margin-top: .3em; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-20);}
.history-year-list li {position: relative; padding-left: 1.15em;}
.history-year-list li:before {content: '•'; position: absolute; left: 0; top: 0; font-size: var(--font-size-18); font-weight: 600; line-height: 1.6667em; color: var(--primary-color);}

@media (max-width: 640px) {
	.history-era-img {max-width: 100%; border-radius: var(--radius-40);}
	.history-year {flex-wrap: wrap; gap: var(--space-15) 20px;}
	.history-year-marker {order: 1;}
	.history-year-tit {flex: 0 0 100%; max-width: none; order: 2;}
	.history-year-list {flex: 0 0 100%; order: 3;}
}

.cert-list {display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-60) var(--space-30); font-weight: 500; text-align: center;}
.cert-item .img {position: relative; margin-bottom: var(--space-24); aspect-ratio: 256 / 341;}
.cert-item .img:before {content: ''; z-index: -1; position: absolute; top: calc(clamp(3px, calc( 6 / var(--inner) * 100vw ), 6px) * -1); right: calc(clamp(3px, calc( 6 / var(--inner) * 100vw ), 6px) * -1); bottom: calc(clamp(3px, calc( 6 / var(--inner) * 100vw ), 6px) * -1); left: calc(clamp(3px, calc( 6 / var(--inner) * 100vw ), 6px) * -1); background: linear-gradient(105deg, var(--primary-color), var(--secondary-color));}

.sec-portfolio-list {padding-bottom: var(--space-100);}
.sec-contractor-performance {padding: var(--space-150) 0; background: #F8F8F8;}
.sec-contractor-performance .table-wrap {background: #fff;}
.contractor-performance-table {width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed;}

.contractor-performance-table th,.contractor-performance-table  td {padding: var(--space-20) 12px; border-bottom: 1px solid #ddd; text-align: center;}
.contractor-performance-table th {font-size: var(--font-size-18); line-height: 1.4444em; font-weight: 500; color: var(--dark-color);}
.contractor-performance-table thead th {font-weight: 600; color: #fff; background: var(--primary-color);}
.contractor-performance-table tbody td.col-total {font-size: var(--font-size-18); font-weight: 600; color: var(--primary-color); background: rgba(59, 68, 172, 0.05);}
.supply-region-table thead th {font-weight: 600; color: var(--dark-color); background: #f8f8f8; border-top: 1px solid #ddd;}
.supply-region-table thead th:last-child {color: #fff; background: var(--primary-color);}
.supply-region-table tbody th {font-weight: 600; background: rgba(0, 0, 0, 0.03);}
.supply-region-table tbody td {line-height: 1.5em;}

.page-business section {padding: var(--space-150) 0;}
.page-business section:first-child {padding-top: 0;}
.page-business.page-research .sec-business-welcome {padding-bottom: var(--space-80);}
.sec-business-welcome .contain {display: flex; justify-content: space-between; gap: 25px 35px;}
.business-welcome-txt {display: flex; flex-direction:column; justify-content: center; max-width: 700px; width: 50%;}
.page-construction .business-welcome-img, .page-research .business-welcome-img {padding: var(--space-30) 0; border: 1px solid #ddd; border-radius: var(--radius-32); overflow: hidden;}
.page-research .business-welcome-img {padding: 0;}

.sec-why-value {position: relative; color: #fff; overflow: hidden;}
.sec-why-value .why-value-bg {position: absolute; inset: 0; z-index: 0;}
.sec-why-value .why-value-bg:before {content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); z-index: 1;}
.sec-why-value .why-value-bg img {width: 100%; height: 100%; object-fit: cover; opacity: 0.8;}
.sec-why-value .contain {position: relative; z-index: 1;}

.why-value-list {display: flex; flex-direction: column; gap: var(--space-150);}
.why-value-item {display: flex; align-items: center; justify-content: center; gap: clamp(40px, calc(80 / var(--inner) * 100vw), 80px);}
.why-value-item--reverse {flex-direction: row-reverse;}
.why-value-visual {flex: 1; display: flex; gap: var(--space-20); min-width: 0; max-height: 360px;}
.why-value-visual-col {flex: 1; display: flex; flex-direction: column; gap: var(--space-20); min-width: 0;}
.why-value-img {flex: 1; overflow: hidden; border-radius: 16px; aspect-ratio: 440 / 256; min-height: 0;}
.why-value-img img {width: 100%; height: 100%; object-fit: cover;}
.why-value-img--tall {flex: 1; align-self: stretch; aspect-ratio: auto;}
.why-value-cnt {width: 50%; max-width: 700px; display: flex; flex-direction: column; gap: 12px;}
.why-value-eyebrow {display: flex; align-items: center; gap: 10px; font-family: 'Play', sans-serif; font-size: var(--font-size-16); font-weight: 700; line-height: 1.5em; color: rgba(255, 255, 255, 0.6);}
.why-value-eyebrow .label {flex: 0 0 111px;}
.why-value-eyebrow .line {flex: 0 0 16px; height: 1px; background: rgba(255, 255, 255, 0.6);}
.why-value-tit {margin: 0; font-size: var(--font-size-32); font-weight: 700; line-height: 1.25em; color: #fff;}
.why-value-txt {display: flex; flex-direction: column; gap: var(--space-15); font-size: var(--font-size-18); font-weight: 400; line-height: 1.7778em; color: rgba(255, 255, 255, 0.9);}


@media (max-width: 640px) {
	.why-value-visual {flex-direction: column; max-height: none;}
	.why-value-visual-col {flex-direction: row;}
	.why-value-img--tall {min-height: 200px;}
}

.business-num-cards {display: flex; gap:var(--space-30);}
.business-num-card {display: flex; flex:1; flex-direction: column; gap: var(--space-30); padding: var(--space-30); border-radius: var(--radius-24); background: #FFF; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);}
.business-num-card .num {font-size: clamp(24px, calc(54 / var(--inner) * 100vw), 54px); font-weight: 700; line-height: 1.185em; color: var(--primary-color); font-family: 'Play', sans-serif;}
.business-num-card:nth-child(even) .num {color: var(--secondary-color);}
.business-num-card .wrap {flex: 1}
.business-num-card h4 small {font-size: var(--font-size-16); color: #686868; font-weight: 500;}
.round-txt {padding: var(--space-15); border-radius: 100px; background: rgba(59, 68, 172, 0.05); font-size: var(--font-size-18); font-weight: 600; line-height: 1.7778em; color: var(--primary-color); text-align: center;}
.business-num-card:nth-child(even) .round-txt {background: rgba(68, 178, 232, 0.05); color: var(--secondary-color);}
.round-tag {width:fit-content; padding: 4px 16px; border-radius: 100px; background: rgba(68, 178, 232, 0.10); color: var(--secondary-color); font-size: var(--font-size-14); font-weight: 700; line-height: 1.5714em;}
.business-num-card:nth-child(2) .round-tag {background: rgba(69, 69, 69, 0.05); color: #454545;}
.business-num-card:nth-child(3) .round-tag {background: rgba(59, 68, 172, 0.05); color: var(--primary-color);}

.environment-partner-info {padding-top: var(--space-30); border-top: 1px dashed #ddd;}
.environment-partner-info li {display: flex; justify-content: space-between; gap: 4px 20px; flex-wrap: wrap;}
.environment-partner-info li:not(:last-child) {margin-bottom: 10px;}
.environment-partner-info li strong {font-weight: 600; font-size: var(--font-size-18); color: var(--dark-color);}

.page-supply .sec-business-banner {padding: var(--space-100) 0; background: url('/images/sub/supply-banner-bg.jpg') no-repeat center center / cover;}
.page-supply .sec-business-banner .page-title .tag {color: rgba(255, 255, 255, 0.4);}
.page-supply .sec-business-banner .page-title h3 {color: #fff;}

.business-branch-cnt {display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(35px, calc(80 / var(--inner) * 100vw), 80px);}
.business-branch-box {display: flex; flex-direction: column; align-items: center; gap: var(--space-30); height: fit-content; padding: var(--space-40); border-radius: var(--radius-24); background: #fff; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);}
.branch-box-head {display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px; border-radius: 50px; background: var(--gradient-color); font-size: var(--font-size-20); font-weight: 500; line-height: 1.5em; color: #fff; text-align: center;}
.branch-box-head strong {font-weight: 700;}
.branch-box-quote {flex: 0 0 32px; width: 32px; height: 32px;}
.branch-box-quote img {display: block; width: 100%; height: 100%;}
.branch-box-stats {display: flex; align-items: center; width: 100%;}
.branch-stat {flex: 1; display: flex; align-items: center; justify-content: center; gap: 16px; padding: var(--space-30); white-space: nowrap;}
.branch-stat .stat-num {font-family: 'Play', sans-serif; font-size: clamp(36px, calc(54 / var(--inner) * 100vw), 54px); font-weight: 700; line-height: 1.185em; color: var(--primary-color);}
.branch-stat .stat-num--sub {color: var(--secondary-color);}
.branch-stat .stat-num--grad {background: var(--gradient-color); -webkit-background-clip: text; background-clip: text; color: transparent;}
.branch-stat .stat-label {font-size: var(--font-size-20); font-weight: 600; line-height: 1.5em; color: var(--dark-color);}
.branch-stat-divider {flex: 0 0 1px; align-self: center; width: 1px; height: 75px; border-left: 1px dashed #ddd;}
.branch-box-arrow {display: flex; justify-content: center; width: 100%;}
.branch-box-arrow img {display: block; width: 6px; height: 30px;}
.branch-box-desc {font-size: var(--font-size-18); line-height: 1.7778em; text-align: center;}
.branch-box-desc strong {font-weight: 600; color: var(--dark-color);}
.sec-business-flex .contain  {gap: 25px 35px;}
.business-flex-photo {width: 50%; max-width: 700px;}
.business-flex-photo .imgs {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-30);}
.business-flex-photo .img {border-radius: var(--radius-24); overflow: hidden;}

.sec-business-mou {background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.87) 54.39%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(94deg, #44B2E8 0%, #3B44AC 100%);}
.sec-business-mou .page-title:after {content: ''; display: block; width: 1px; height: var(--space-80);background: linear-gradient(90deg, #44B2E8 0%, #FFF 144.5%);; margin: var(--space-60) auto;}
.business-mou-cards {display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-40); margin-top: var(--space-100);}
.business-mou-card {flex: 0 1 31.4%; width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: var(--space-24); padding: var(--space-40); border-radius: var(--radius-24); background: #fff; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.12);}
.mou-card-head {display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;}
.mou-chip {display: inline-flex; padding: 4px 16px; border-radius: 50px; background: rgba(68, 178, 232, 0.1); font-size: var(--font-size-14); font-weight: 700; line-height: 1.5714em; color: var(--secondary-color);}
.mou-card-head h4 {margin: 0; font-size: var(--font-size-24); font-weight: 700; line-height: 1.4167em; color: var(--dark-color);}
.mou-card-desc {color: #686868; text-align: center;}
.mou-card-photos {position: relative; width: 100%; max-width: 360px; height: 199px;}
.mou-photo--main {position: absolute; left: 0; top: 0; overflow: hidden; border-radius: 8px;}
.mou-photo--sub {position: absolute; right: 0; bottom: -1px; overflow: hidden; border: 1px solid #ddd; border-radius: 4px;}

.construction-network-gallery {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-80) var(--space-40);}
.construction-network-gallery .img {border-radius: var(--radius-24); overflow: hidden;}
.business-research-gallery {display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-20);}
.business-research-gallery .img {border-radius: var(--radius-16); overflow: hidden;}