@charset "utf-8";
.page-title span {display: block; margin-bottom: var(--space-20); font-size: var(--font-size-20); font-weight: 600; line-height: 1.7em; color: var(--secondary-color);}
.page-title span.fz48 {font-size: var(--font-size-48);}
.page-title h3 {font-size: var(--font-size-40); font-weight: 600; line-height: 1.35em; color: var(--dark-color);}
.page-title p {margin-top: var(--space-30); font-size: var(--font-size-20); line-height: 1.7em;;}
.dot-list li {text-indent: -.9em; padding-left: .9em;}
.dot-list li:before {content: "•"; margin-right: 8px; color: var(--secondary-color);}
.root_daum_roughmap .wrap_map, .root_daum_roughmap, .direction-map iframe {width: 100% !important; height: 100% !important;}

.page-about {overflow: hidden;}
.page-about section:not(:last-child){margin-bottom: clamp(50px, calc(200 / var(--inner) * 100vw), 200px);}
.page-about-company .contain {display: flex; gap: 25px 35px;}
.about-company-img {max-width: 480px; width: 30%;}
.greeting-photo {max-width: 680px; width: 42.5%; height: fit-content; border-radius: 0 var(--radius-96) 0 0; overflow: hidden;}
.page-greetings .contain{gap: 25px clamp(35px, calc(60 / var(--inner) * 100vw), 120px);}
.page-history {overflow: hidden; border-top: 1px solid #EEE; border-bottom: 1px solid #EEE;}
.page-history .contain {flex-wrap: nowrap; align-items: flex-start; gap: 0;}
.history-title {flex: 0 0 clamp(160px, calc(440 / var(--inner) * 100vw), 440px); padding-top: clamp(40px, calc(100 / var(--inner) * 100vw), 100px);}
.history-list {--history-pad: clamp(30px, calc(90 / var(--inner) * 100vw), 90px); display: flex; flex-direction: column; gap: var(--space-30); margin: 0; padding: clamp(40px, calc(80 / var(--inner) * 100vw), 80px) 0; padding-left: var(--history-pad); border-left: 1px solid #EEE;}
.history-list-item {gap: clamp(16px, calc(40 / var(--inner) * 100vw), 40px);}
.history-list-item .txt {flex: 1; min-width: 0; border-top: 0; padding: 0;}
.history-list-item .thumb {flex-shrink: 0; margin: 0; padding: 0;}
.history-list-item .thumb img {width: clamp(220px, calc(500 / var(--inner) * 100vw), 500px); aspect-ratio: 500 / 320; object-fit: cover; border-radius: var(--radius-16); border: 1px solid #DDD; display: block;}
.history-date {position: relative; margin-bottom: var(--space-20); font-size: var(--font-size-28); font-weight: 600; line-height: 1.0714em; text-align: left; color: var(--dark-color); transition: color .3s;}
.history-date.secondary-color {color: var(--secondary-color);}
.history-date:before {content: ''; position: absolute; left: calc(var(--history-pad) * -1 - 9px); top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 100%; border: 5px solid #ADD5EB; background: var(--secondary-color); box-sizing: border-box;}
.history-list-item .dot-list {width: auto; margin: 0;}
@media (max-width:960px) {
.page-history .contain {flex-direction: column; flex-wrap: wrap;}
.history-title {flex: none; width: 100%; padding-top: var(--space-40);}
.history-list {--history-pad: var(--space-40); width: 100%; padding: var(--space-40) 0 var(--space-40) var(--history-pad);}
.history-list-item .thumb {max-width: 500px; width: 50%;}
.history-list-item .thumb img {width: auto;}

}
@media (max-width:640px) {
.history-list-item {flex-direction: column; align-items: flex-start;}
.history-list-item .thumb{width: 100%;}
}
.partner-full-photo {display: block; position: relative; margin: var(--space-40) 0;}
.partner-full-photo:after {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid #EEE; transition: .2s}
.partner-full-photo:hover:after {border-color: var(--secondary-color);}
.partnership-photo {max-width: 680px; width: 50%;}

.sec-partnership {gap: 25px clamp(35px, calc(60 / var(--inner) * 100vw), 120px); margin: var(--space-140) 0;}
.page-team h4 {margin-bottom: var(--space-34); font-size: var(--font-size-40); line-height: 1em; font-weight: 600; color: var(--dark-color)}
.page-team section {margin-top: var(--space-100);}
.team-cards {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-24);}
.team-card {position: relative; cursor: pointer;}
.team-card .txt {display: flex; flex-direction: column; position: absolute; left: var(--space-16); right: var(--space-16); bottom: var(--space-16); height: 6.125em; padding: var(--space-16) var(--space-24); background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(12px); color: #fff; transition: .5s;}
.team-card.active .txt {background: rgba(0, 124, 195, 0.50); height: calc(100% - var(--space-16) * 2);}
.team-card .cnt {display: flex; flex-direction: column; flex: 1; display: none; padding-top: var(--space-20); margin-top: var(--space-20); border-top: 1px solid rgba(255, 255, 255, 0.08);}
.team-card strong {display: block; margin-bottom: var(--space-16); font-size: var(--font-size-14); line-height: 1.4286em;}
.team-card .dot-list {flex: 1;}
.team-card .dot-list li, .team-card .dot-list li:before {color: rgba(255, 255, 255, 0.6);}
.team-card .dot-list li:not(:last-child) {margin-bottom: clamp(5px, calc(12 / var(--inner) * 100vw), 12px);}
.team-title p {color: rgba(187,214,239);}
.team-title-wrap {display: flex; align-items: center; gap: 14px; font-size: var(--font-size-28); line-height: 1.5em; font-weight: 600;}
.team-title small {font-size: var(--font-size-18); font-weight: 500; line-height: 1.7778em; color: rgba(255, 255, 255, 0.7);}
.btn-team-more {display: flex; align-items: center; justify-content: center; gap: 10px; margin: var(--space-100) auto 0; background: var(--secondary-color); border-color: var(--secondary-color); outline: auto; color: #fff; padding: 14px var(--space-24); font-size: var(--font-size-18); font-weight: 500; line-height: 1.5556em;}
.btn-team-more:after {content: ''; display: block; width: 16px; height: 16px; background: url('/images/sub/btn-plus.svg') no-repeat center center / contain;}
.team-banner {opacity: 0; margin: var(--space-24) calc( var(--space-24) * -1) calc(var(--space-16) * -1);padding: var(--space-20); background: rgba(255, 255, 255, 0.08); font-size: var(--font-size-18); line-height: 1.5556em; color: rgba(255, 255, 255, 0.80); text-align: center; transition: .3s;}
.banner-on .team-banner {opacity: 1;}

.page-business {overflow: hidden;}
.business-overview-portfolio {background:#fff; color:var(--dark-color);}
.portfolio-heading {padding:var(--space-140) 0 var(--space-80); text-align:center;}
.portfolio-heading p {margin-bottom:var(--space-20); color:var(--secondary-color); font-size:48px; font-weight:600; line-height:1.7em; letter-spacing:-.02em;}
.portfolio-heading h3 {font-size:var(--font-size-40); font-weight:600; line-height:1.35em; letter-spacing:-.02em;}
.portfolio-content {background:#e7ebf5;}
.portfolio-content>.contain {display:flex;}
.portfolio-summary {flex:0 0 520px; border-right:1px solid #eee; border-left:1px solid #eee; background:#fff;}
.portfolio-summary li {display:flex; align-items:stretch; justify-content:space-between; height:20%; padding:var(--space-30) var(--space-40); border-top:1px solid #eee;}
.portfolio-summary-title {display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; padding:var(--space-16) 0;}
.portfolio-summary-title img {width:48px; height:48px; object-fit:contain; object-position:left center;}
.portfolio-summary-title strong {font-size:var(--font-size-26); font-weight:500; line-height:1.4286em; letter-spacing:-.04em; white-space:nowrap;}
.portfolio-summary li>p {display:flex; flex:0 0 130px; flex-direction:column; align-items:center; justify-content:center; gap:2px; border-radius:12px; background:#f8f9fd;}
.portfolio-summary li>p strong {font-size:var(--font-size-32); font-weight:600; line-height:1.3125em; letter-spacing:-.04em;}
.portfolio-summary li>p span {color:#878787; font-size:var(--font-size-18); font-weight:500; line-height:1.3333em; letter-spacing:-.04em;}
.portfolio-map-area {position:relative; display:flex; flex:1; align-items:center; justify-content:center; min-width:0; padding: var(--space-60) 20px; overflow:hidden;}
.portfolio-map {position:relative; width:570px; height:834px;}
.portfolio-map-image {display:block; width:100%; height:100%; object-fit:contain;}
.portfolio-marker {position:absolute; top:var(--marker-y); left:var(--marker-x); z-index:2; width:17px; height:17px; padding:0; border:1px solid #fff; border-radius:50%; transform:translate(-50%,-50%); transition:.2s;}
.portfolio-marker span {display:block; width:100%; height:100%; border-radius:inherit;}
.portfolio-marker.solar {background:#ff833c;}
.portfolio-marker.bess {background:var(--primary-color);}
.portfolio-marker.wind {background:var(--secondary-color);}
.portfolio-marker.is-hidden {visibility:hidden; opacity:0;}
.portfolio-map-popup {position:absolute; top:110px; right:-110px; z-index:4; display:none; width:260px; padding:var(--space-16); border:1px solid #eee; background:#fff; box-shadow:0 0 12px rgba(0,0,0,.08); pointer-events:none;}
.portfolio-map-popup-title {display:flex; align-items:center; gap:8px; margin-bottom:var(--space-16); color:#878787; font-size:var(--font-size-14); font-weight:500; line-height:1.1429em;}
.portfolio-map-popup-title span {width:8px; height:8px; border-radius:50%; background:#ff833c;}
.portfolio-map-popup>strong {display:block; font-size:var(--font-size-20); font-weight:600; line-height:1.7em; letter-spacing:-.02em;}
.portfolio-map-popup>p {margin-bottom:var(--space-20); color:#878787; font-size:var(--font-size-18); font-weight:500; line-height:1.3333em; letter-spacing:-.02em;}
.portfolio-map-popup>img {display:block; width:100%; height:160px; object-fit:cover;}
.portfolio-filter {position:absolute; right:var(--space-40); bottom:var(--space-40); z-index:5; display:flex; flex-direction:column; gap:var(--space-30); padding:var(--space-24) var(--space-34) var(--space-24) var(--space-24); background:#fff; box-shadow:0 0 12px rgba(0,0,0,.02);}
.portfolio-filter fieldset {display:flex; flex-direction:column; gap:10px; border:0;}
.portfolio-filter legend {margin-bottom:var(--space-16); color:#a8a8a8; font-size:var(--font-size-16); font-weight:700; line-height:1.5em; letter-spacing:-.02em;}
.portfolio-toggle {display:flex; align-items:center; gap:var(--space-16); padding:0; border:0; background:transparent; color:#878787; font-size:var(--font-size-16); font-weight:500; line-height:1.5em; letter-spacing:-.02em;}
.portfolio-toggle span {position:relative; width:50px; height:32px; border-radius:50px; background:#bbb; transition:.2s;}
.portfolio-toggle span:after {content:""; position:absolute; top:6px; left:6px; width:20px; height:20px; border-radius:50%; background:#fff; transition:.2s;}
.portfolio-toggle.active {color:var(--dark-color);}
.portfolio-toggle.active span:after {left:24px;}
.portfolio-toggle.status-filter.active span {background:var(--dark-color);}
.portfolio-toggle.solar-filter.active span {background:#ff833c;}
.portfolio-toggle.wind-filter.active span {background:var(--secondary-color);}
.portfolio-toggle.bess-filter.active span {background:var(--primary-color);}
@media (max-width:1280px) {
.portfolio-summary {flex-basis:370px;}
.portfolio-map {transform:scale(.82);}
.portfolio-filter {right:var(--space-20); bottom:var(--space-20);}
}
@media (max-width:960px) {
.portfolio-content>.contain {display:block;}
.portfolio-summary {display:grid; grid-template-columns:repeat(5,1fr); width:100%; height:auto;}
.portfolio-summary li {height: auto; flex-direction: column;}
.portfolio-map-area {height:820px;}
.portfolio-summary-title {gap: 10px;}
.portfolio-summary-title img {width: 33px; height: 33px;}
.portfolio-summary li>p {flex: 0 0 90px;}
}
@media (max-width:640px) {
.portfolio-heading h3 {word-break:keep-all;}
.portfolio-summary {grid-template-columns: 1fr;}
.portfolio-summary li {flex-direction: row;}
.portfolio-summary li>p {flex-basis:105px;}
.portfolio-map-area {display:block; height:auto; padding-bottom: 170px; padding-left: 0; padding-right: 0;}
.portfolio-map {width: 100%; height: auto; max-width: max-content; transform: none;}
.portfolio-map-popup {top:var(--space-80); right:var(--container-space); width:210px;}
.portfolio-map-popup>img {height:120px;}
.portfolio-marker {width: 15px; height: 15px;}
.portfolio-filter {right:var(--container-space); bottom:var(--container-space); left:var(--container-space); flex-direction: row; justify-content: space-between; gap:var(--space-16); padding:var(--space-20);}
.portfolio-toggle {gap:8px;}
.portfolio-toggle span {flex:0 0 42px; width:42px; height:26px;}
.portfolio-toggle span:after {top:5px; left:5px; width:16px; height:16px;}
.portfolio-toggle.active span:after {left:21px;}
}
.business-overview-txt {display: flex;align-items: center; min-height:calc(100vh - var(--header-height)); padding: clamp(50px, calc(230 / var(--inner) * 100vw), 230px) 0; background: url('/images/sub/bg-business-overview01.jpg') no-repeat center center / cover;}
.business-overview-txt p {opacity: 0.8;}
.business-overview-areas {padding: var(--space-140) 0; background: url('/images/sub/bg-business-overview02.jpg') no-repeat center center / cover;}
.business-overview-areas .page-title {margin-bottom: clamp(30px, calc(80 / var(--inner) * 100vw), 80px);}
.business-overview-areas .page-title h3 {color: #fff;}
.business-overview-cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16);}
.business-overview-card {display: block; position: relative;}
.business-overview-card:before {content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(0deg, rgba(0, 124, 195, 0.72) 0%, rgba(0, 124, 195, 0.72) 100%); transition: .3s;}
.business-overview-card:hover:before {height: 100%;}
.business-overview-card:after {content: ''; position: absolute; top: 0; right: 0; width: clamp(44px, calc(80 / var(--inner) * 100vw), 80px); height: clamp(44px, calc(80 / var(--inner) * 100vw), 80px); background: url('/images/sub/arrow-business-overview.svg') no-repeat center center / contain; opacity: 0; transition: .4s;}
.business-overview-card:hover:after {opacity: 1; top: 14px; right: 14px;}
.business-overview-card .txt {position: absolute; left: 0; bottom: 0; width: 100%; padding: var(--space-30); color: #fff;}
.business-overview-card p {margin-bottom: 10px; font-size: var(--font-size-18); line-height: 1.7778em; font-weight: 500; opacity: .7;}
.business-overview-card h4 {font-size: var(--font-size-32); font-weight: 600; line-height: 1.4375em;}

.business-detail-intro {padding: 0 0 var(--space-100);}
.business-detail-head {display: flex; gap: 25px 35px; margin-bottom: clamp(30px, calc(80 / var(--inner) * 100vw), 80px);}
.business-detail-tit {width:  34%; max-width: 580px; font-size: var(--font-size-40); font-weight: 600; line-height: 1.35em; letter-spacing: -0.02em; color: var(--dark-color);}
.business-detail-desc {flex: 1; min-width: 0;}
.business-detail-desc .lead {margin-bottom: var(--space-20); font-size: var(--font-size-24); font-weight: 500; line-height: 1.6667em; letter-spacing: -0.02em; color: var(--secondary-color);}
.business-detail-desc .desc {font-size: var(--font-size-20); font-weight: 500; line-height: 1.7em; letter-spacing: -0.02em; color: #505050;}
.business-detail-desc .desc p:not(:last-child) {margin-bottom: 0;}
.business-detail-visual {display: flex; flex-direction: column; gap: var(--space-16);}
.business-detail-hero {height: clamp(250px, calc(480 / var(--inner) * 100vw), 480px); overflow: hidden;}
.business-detail-hero img {width: 100%; height: 100%; object-fit: cover;}
.business-detail-stats {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16);}
.business-detail-stat {display: flex; flex-direction: column; gap: var(--space-20); padding: var(--space-24); border: 1px solid #eee; background: #fff;}
.business-detail-stat .label {display: flex; align-items: center; gap: 6px; font-size: var(--font-size-18); font-weight: 600; line-height: 1.3333em; letter-spacing: -0.02em; color: #676767;}
.business-detail-stat .label:after {content: ''; flex-shrink: 0; width: 4px; height: 4px; border-radius: 100%; background: var(--secondary-color);}
.business-detail-stat .value {display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px; margin-top: auto;}
.business-detail-stat .value strong {font-size: var(--font-size-48); font-weight: 600; line-height: 1.2917em; letter-spacing: -0.02em; color: var(--dark-color);}
.business-detail-stat .value .unit {font-size: var(--font-size-20); font-weight: 500; line-height: 2.2em; letter-spacing: -0.02em; color: #a8a8a8;}
.business-detail-features {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-16);}
.business-detail-feature {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-20); padding: var(--space-34) var(--space-24); border: 1px solid #eee; text-align: center;}
.business-detail-feature:nth-child(odd) {background: #fff;}
.business-detail-feature .icon {display: flex; align-items: center; justify-content: center; width: 60px; height: 60px;}
.business-detail-feature .icon img {max-width: 100%; max-height: clamp(38px, calc(56 / var(--inner) * 100vw), 56px); object-fit: contain;}
.business-detail-feature .txt {display: flex; flex-direction: column; gap: 4px; width: 100%;}
.business-detail-feature .tit {font-size: var(--font-size-20); font-weight: 600; line-height: 1.7em; letter-spacing: -0.02em; color: var(--dark-color);}
.business-detail-feature .sub {font-size: var(--font-size-16); line-height: 1.5em; letter-spacing: -0.02em; color: #a8a8a8;}
.business-detail-portfolio {padding: var(--space-100) 0 var(--space-140); border-top: 1px solid #EEE; background: #fff;}
.business-detail-portfolio-list {display: flex; flex-direction: column; gap: clamp(60px, calc(140 / var(--inner) * 100vw), 140px);}
.business-detail-portfolio-item {display: flex; align-items: stretch; padding-right: clamp(30px, calc(160 / var(--inner) * 100vw), 160px);}
.business-detail-portfolio-item:nth-child(even) {flex-direction: row-reverse; padding-right: 0; padding-left: clamp(30px, calc(160 / var(--inner) * 100vw), 160px);}
.business-detail-portfolio-item .thumb {flex: 0 0 clamp(50%, calc(1180 / var(--inner) * 100vw), 1180px); max-width: 61.458%; height: clamp(280px, calc(620 / var(--inner) * 100vw), 620px); overflow: hidden;}
.business-detail-portfolio-item .thumb img {width: 100%; height: 100%; object-fit: cover;}
.business-detail-portfolio-item .txt {flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--space-50); min-width: 0; padding-left: clamp(30px, calc(100 / var(--inner) * 100vw), 100px); background: #fff;}
.business-detail-portfolio-item:nth-child(even) .txt {padding-left: 0; padding-right: clamp(30px, calc(100 / var(--inner) * 100vw), 100px);}
.business-detail-portfolio-item .capacity {font-size: var(--font-size-32); font-weight: 700; line-height: 1.4375em; letter-spacing: -0.02em; color: var(--secondary-color);}
.business-detail-portfolio-item .info {display: flex; flex-direction: column; gap: 8px;}
.business-detail-portfolio-item h4 {font-size: var(--font-size-48); font-weight: 700; line-height: 1.5em; letter-spacing: -0.02em; color: var(--dark-color);}
.business-detail-portfolio-item .place {font-size: var(--font-size-24); font-weight: 600; line-height: 1.6667em; letter-spacing: -0.02em; color: #676767;}
.business-detail-portfolio-item .meta {display: flex; flex-direction: column; gap: 4px; font-size: var(--font-size-20); letter-spacing: -0.02em;}
.business-detail-portfolio-item .meta strong {font-weight: 600; line-height: 1.7em; color: var(--dark-color);}
.business-detail-portfolio-item .meta p {font-weight: 400; line-height: 1.5em; color: #505050;}
@media (max-width:960px) {
.business-detail-portfolio-item, .business-detail-portfolio-item:nth-child(even) {flex-direction: column; padding-left: var(--container-space); padding-right: var(--container-space);}
.business-detail-portfolio-item .thumb {flex: none; width: 100%; max-width: none; height: clamp(220px, calc(400 / var(--inner) * 100vw), 400px);}
.business-detail-portfolio-item .txt, .business-detail-portfolio-item:nth-child(even) .txt {padding: var(--space-30) 0 0;}
}

.page-sustainability {padding: var(--space-140) 0 0;}
.sustainability-top {margin-bottom: clamp(60px, calc(120 / var(--inner) * 100vw), 120px);}
.sustainability-hero {position: relative; display: flex; align-items: center; justify-content: center; height: clamp(250px, calc(480 / var(--inner) * 100vw), 480px); margin-bottom: var(--space-20); overflow: hidden;}
.sustainability-hero .bg {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
.sustainability-hero .bg img {width: 100%; height: 100%; object-fit: cover;}
.sustainability-esg-card .dot-list li:before {color: #CCC;}
.sustainability-hero-txt {position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-30); padding: var(--space-30); align-items: center; text-align: center; color: #fff;}
.sustainability-hero-txt .page-title span {color: rgba(255, 255, 255, 0.5);}
.sustainability-hero-txt .page-title h3 {color: #fff;}
.sustainability-hero-txt .gradient-txt-white {background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.7) 25%, #fff 50%, rgba(255, 255, 255, 0.7) 75%, #fff 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.sustainability-hero-txt p {color: rgba(255, 255, 255, 0.8); line-height: 1.7em;}
.sustainability-esg-cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-20);}
.sustainability-esg-card {display: flex; flex-direction: column; gap: var(--space-20); padding: var(--space-30); border: 1px solid #eee; background: #fff;}
.sustainability-esg-card .card-head {display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-20); border-bottom: 1px solid #eee;}
.sustainability-esg-card .card-tit {font-size: var(--font-size-28); font-weight: 600; line-height: 1.5em; letter-spacing: -0.02em; color: var(--dark-color);}
.sustainability-esg-card .card-tit .point {color: var(--secondary-color);}
.sustainability-esg-card .icon {width: 24px; height: 24px;}
.sustainability-esg-card .icon img {width: 100%; height: 100%; object-fit: contain;}
.sustainability-esg-card .card-lead {font-size: var(--font-size-20); font-weight: 500; line-height: 1.7em; letter-spacing: -0.02em; color: var(--dark-color);}
.sustainability-esg-card .dot-list {font-size: var(--font-size-16); line-height: 1.5em; color: #505050;}
.sustainability-esg-card .dot-list li:not(:last-child) {margin-bottom: 10px;}
.sustainability-process {margin-bottom: clamp(60px, calc(120 / var(--inner) * 100vw), 120px);}
.sustainability-sec-head {gap: 15px 24px; margin-bottom: clamp(30px, calc(60 / var(--inner) * 100vw), 60px);}
.sustainability-sec-head .sec-tit {font-size: var(--font-size-40); font-weight: 600; line-height: 1em; letter-spacing: -0.02em; color: var(--dark-color);}
.sustainability-sec-head .sec-tit .dot {display: inline-block; width: 8px; height: 8px; margin-left: 4px; border-radius: 100%; background: var(--secondary-color); vertical-align: top;}
.sustainability-sec-head .sec-desc {color: #505050; line-height: 1.7em;}
.sustainability-process-box {padding: clamp(24px, calc(48 / var(--inner) * 100vw), 48px); border: 1px solid #eee; background: linear-gradient(270deg, #fafafa 0%, #fff 100%);}
.sustainability-process-inner {gap: clamp(30px, calc(50 / var(--inner) * 100vw), 80px); align-items: stretch;}
.sustainability-process-img {max-width: 704px; width: 50%; flex-shrink: 0;}
.sustainability-process-cnt {display: flex; flex-direction: column; justify-content: space-between; flex: 1; min-width: 0;}
.sustainability-process-tabs {display: flex; margin-bottom: clamp(24px, calc(36 / var(--inner) * 100vw), 36px); border-bottom: 1px solid #ddd;}
.sustainability-process-tabs .swiper {width: 100%;}
.sustainability-process-tabs li {flex: 1;}
.sustainability-process-tabs a {display: block; padding: 0 10px; padding-bottom: var(--space-20); font-size: var(--font-size-16); font-weight: 500; line-height: 1.5em; letter-spacing: -0.02em; color: #a8a8a8; text-align: center;}
.sustainability-process-tabs li.active a {border-bottom: 1px solid var(--secondary-color); color: var(--secondary-color);}
.sustainability-process-cnt .process-tit h4 {font-size: var(--font-size-40); font-weight: 600; line-height: 1.35em; letter-spacing: -0.02em; color: var(--dark-color);}
.sustainability-process-cnt .process-list {min-height: calc(1.7em * 5 + 40px); margin-top: clamp(24px, calc(36 / var(--inner) * 100vw), 36px); font-size: var(--font-size-20); line-height: 1.7em; color: #505050;}
.sustainability-process-cnt .process-list li:not(:last-child) {margin-bottom: 10px;}
.sustainability-framework {margin-bottom: var(--space-140);}
.sustainability-framework-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-20);}
.sustainability-framework-item .thumb {aspect-ratio: 640 / 480; overflow: hidden;}
.sustainability-framework-item .thumb img {width: 100%; height: 100%; object-fit: cover;}
.sustainability-framework-item .tit {margin: var(--space-30) 0 var(--space-30);}
.sustainability-framework-item .tit .sub {margin-bottom: 8px; font-size: var(--font-size-18); font-weight: 500; line-height: 1.7778em; letter-spacing: -0.02em; color: #a8a8a8;}
.sustainability-framework-item .tit h4 {font-size: var(--font-size-28); font-weight: 600; line-height: 1.5em; letter-spacing: -0.02em; color: var(--dark-color);}
.sustainability-framework-item .cnt {padding-left: var(--space-24); border-left: 2px solid #6dbb5a;}
.sustainability-framework-item .cnt > p {margin-bottom: var(--space-24); font-size: var(--font-size-18); font-weight: 500; line-height: 1.7778em; letter-spacing: -0.02em; color: #505050;}
.sustainability-framework-item .dot-list {font-size: var(--font-size-16); line-height: 1.5em; color: #676767;}
.sustainability-framework-item .dot-list li:not(:last-child) {margin-bottom: 10px;}
.sustainability-process-img {position:relative;}
.sustainability-process-img img {position: absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0 0 var(--radius-96) 0; opacity:0; visibility:hidden; transition:opacity 0.4s ease, visibility 0.4s ease;}
.sustainability-process-img img.active { opacity:1; visibility:visible;}
.sustainability-resource {padding: var(--space-80) 0; background: #f6f9fe;}
.sustainability-resource .contain {display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-60);}
.sustainability-resource-head {display: flex; align-items: flex-start; gap: 4px;}
.sustainability-resource-head h3 {font-size: var(--font-size-40); font-weight: 600; line-height: 1.35em; letter-spacing: -.02em; color: var(--dark-color);}
.sustainability-resource-head img {flex-shrink: 0; width: 8px; height: 18px;}
.sustainability-resource-content {flex: 0 0 520px;}
.sustainability-resource-content h4 {margin-bottom: var(--space-40); font-size: var(--font-size-16); font-weight: 600; line-height: 1.5em; letter-spacing: -.02em; color: var(--secondary-color);}
.sustainability-resource-list {display: flex; flex-direction: column; gap: var(--space-24);}
.sustainability-resource-list a {display: flex; gap: 15px; align-items: center; justify-content: space-between; min-height: 64px; padding-bottom: var(--space-24); font-size: var(--font-size-24); line-height: 1.6667em; letter-spacing: -.02em; color: var(--dark-color);}
.sustainability-resource-list a:after {content: ''; display: block; width: 32px; height: 32px; background: url('/images/sub/sustainability-arrow.svg') no-repeat center center / contain; opacity: 0; transition: .2s;}
.sustainability-resource-list a:hover:after {opacity: 1;}
.sustainability-resource-list a span {flex: 1; min-width: 0;}
.sustainability-resource-list .is-link {border-bottom: 1px solid var(--dark-color);}
@media (max-width: 960px) {
    .sustainability-resource .contain {flex-direction: column;}
    .sustainability-resource-content {flex-basis: auto; width: 100%;}
}
@media (max-width: 640px) {
    .sustainability-resource {padding: var(--space-60) 0;}
    .sustainability-resource-head h3 {font-size: var(--font-size-32);}
    .sustainability-resource-content h4 {margin-bottom: var(--space-30);}
    .sustainability-resource-list > * {font-size: var(--font-size-20);}
}

.direction-map {height: clamp(270px, calc(540 / var(--inner) * 100vw), 540px);}
.direction-info {display: flex; gap: 15px 30px; flex-wrap: wrap;}
.direction-info .item {display: flex; gap: var(--space-20);}
.direction-info .item:first-child {flex: 1;}
.direction-info .icon {height: fit-content; padding: clamp(12px, calc(28 / var(--inner) * 100vw), 28px); border-radius: 100%; background: #fafafa;}
.direction-info .txt {display: flex; flex-direction: column; justify-content: center;}

.career-keyword-boxes {display: grid; gap: var(--space-24); grid-template-columns: repeat(2, 1fr); }
.career-keyword-box {display: flex; align-items: center; gap: 15px 25px; padding: var(--space-30); border: 1px solid #eee;}
.career-keyword-txt {flex: 1; min-width: 0;}
.career-keyword-txt p {margin: var(--space-20) 0 10px; font-size: var(--font-size-24); line-height: 1.6667em; font-weight: 600; color: var(--dark-color);}
.sec-career-banner {display: block; padding: var(--space-140); background: url('/images/sub/bg-career-banner.jpg') no-repeat center center / cover;}
.sec-career-banner .contain {display: flex; flex-direction: column; align-items: center;}

/* 앵커 이동 시 고정 헤더에 가리지 않도록 상단 여백 확보 */
[id] {scroll-margin-top: calc(var(--header-height) + 70px);}