@charset "utf-8";
.about-hero-section {background-image: url(/img/sub/about-hero-bg.webp);}
/* 인사말 */
.greeting-section .greeting-top {display: flex; align-items: flex-start; column-gap: var(--space-100);}
.greeting-section .ceo-img {width: 33%; flex-shrink: 0; height: fit-content; padding-right: var(--fs-20); position: relative;}
.greeting-section .ceo-img img {width: 100%;}
.greeting-section .ceo-img::after {content: ''; width: 3px; height: var(--space-80); background-color: var(--color-static3); position: absolute; top: 0; right: 0;}
.greeting-section .sub-tit-wrap .body-medium {color: var(--color-font1);}
.greeting-section .greeting-bot {margin-top: var(--space-120); display: flex; flex-direction: column; align-items: center; row-gap: var(--fs-40);}
.greeting-section .quot-txt {width: 100%; max-width: 614px; margin-inline: auto;}
.greeting-section .quot-txt .section-sub {text-align: center; margin-block: var(--fs-14);}
.greeting-section .quotes-box {display: flex; column-gap: 8px;}
.greeting-section .quotes-box span {width: var(--fs-14); height: var(--fs-34); background-color: var(--color-font6);}
.greeting-section .quotes-box:last-child {justify-content: flex-end;}
.greeting-section .ceo-sign {width: 100%; max-width: 300px; margin-inline: auto;}
.greeting-section .ceo-sign img {width: 100%;}
.greeting-section .ceo-sign .txt-wrap {margin-top: var(--fs-16); display: flex; flex-direction: column; align-items: center;}
.greeting-section .ceo-sign .txt-wrap .body-small {color: var(--color-font3);}
.greeting-section .ceo-sign .txt-wrap .body-large {color: var(--color-font1);}
/* 안전환경 */
/* .safety-section .inner {display: flex; align-items: flex-start; column-gap: var(--space-60);} */
.safety-section .inner {display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--space-60);}
/* .safety-section .safety-list {border: 1px solid var(--color-border1); border-bottom: 0; width: 65%; max-width: 804px; flex-shrink: 0; display: flex; flex-direction: column;} */
.safety-section .safety-list {width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, auto); grid-auto-flow: column;}
.safety-section .safety-item {transition: background-color 0.2s, border-color 0.2s; border-left: 2px solid transparent; padding: var(--fs-40) var(--fs-50); display: flex; align-items: center; justify-content: space-between;}
.safety-section .safety-item .ico-wrap {width: 120px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;}
.safety-section .safety-item .ico-wrap .num {color: var(--color-static2);}
.safety-section .safety-item .ico-wrap .ico-box {background-color: var(--color-static3); width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.safety-section .safety-item .ico-wrap .ico-box::after {display: none;}
.safety-section .safety-item p {flex: 1; text-align: right;}
.safety-section .safety-item:hover {background-color: var(--color-bg1); border-left: 2px solid var(--color-static1);}

/* 안전환경 - 인증 및 수상 실적 */
.achiev-section .achiev-list {margin-top: var(--space-60); display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--fs-40); row-gap: var(--space-60);}
.achiev-section .achiev-item {max-width: 300px; display: flex; flex-direction: column; row-gap: var(--space-60);}
.achiev-section .achiev-item .img-wrap {width: 100%; aspect-ratio: 300/420; box-shadow: var(--box-shadow);}
.achiev-section .achiev-item .img-wrap img {width: auto; max-width: 100%; height: 100%; object-fit: contain; transition: transform 0.3s;}
.achiev-section .achiev-item:hover .img-wrap img {transform: scale(1.04);}
.achiev-section .achiev-item .txt-wrap {display: flex; flex-direction: column; align-items: flex-start; row-gap: 6px;}
.achiev-section .achiev-item .card-tit {color: var(--color-font1); word-break: keep-all;}
.achiev-section .achiev-item .txt-wrap .body-medium {color: var(--color-static1);}
.achiev-section .achiev-item .txt-wrap .body-small {color: var(--color-font2); word-break: keep-all;}

/* 안전환경 - 성과 요약 */
.record-section .record-list {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--fs-30);}
.record-section .record-item {display: flex; flex-direction: column; align-items: center; row-gap: 8px;}
.record-section .record-item .ico-box {width: var(--space-80); height: var(--space-80); padding: 0; border-radius: var(--fs-20); background-color: var(--color-static1); display: flex; align-items: center; justify-content: center;}
.record-section .record-item .ico-box::after {content: none;}
.record-section .record-item .num {color: var(--color-static2);}
.record-section .record-item .record-num {color: var(--color-white);}
.record-section .record-item .body-medium {color: var(--color-font4);}

/* 안전환경 - 안전문화 프로그램 */
.program-section .program-list {margin-top: var(--fs-20); display: flex; flex-direction: column;}
.program-section .program-item {display: flex; align-items: center; column-gap: var(--space-60); padding-block: var(--fs-40);}
.program-section .program-item + .program-item {border-top: 1px solid var(--color-border1);}
.program-section .program-item.reverse {flex-direction: row-reverse;}
.program-section .program-visual {width: 33%; max-width: 420px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--fs-16);}
.program-section .program-item.reverse .program-visual {align-items: flex-end;}
.program-section .program-num {color: var(--color-static1);}
.program-section .visual-desc {display: flex; align-items: center; column-gap: 8px; color: var(--color-font1);}
.program-section .program-visual.img-wrap {width: 50%; max-width: 600px;}
.program-section .program-visual.img-wrap img {width: 100%; height: auto; aspect-ratio: 600/360; object-fit: cover;}
.program-section .program-txt {flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; row-gap: 10px;}
.program-section .program-txt .section-sub {color: var(--color-font1); word-break: keep-all;}
.program-section .program-txt > .body-medium {color: var(--color-font2); word-break: keep-all;}
.program-section .step-list {margin-top: var(--fs-20); display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--fs-14);}
.program-section .step-item {display: flex; align-items: center; column-gap: var(--fs-20); color: var(--color-static2);}
.program-section .step-item::after {content: ''; flex-shrink: 0; width: var(--fs-40); height: 8px; margin-right: var(--fs-20); background-image: url(/img/sub/step-arrow.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;}
.program-section .step-item:last-child::after {content: none;}
.program-section .abbr-list {display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; column-gap: var(--fs-40);}
.program-section .abbr-list div {display: flex; align-items: center;}
.program-section .abbr-list dt {color: var(--color-font1);}
.program-section .abbr-list dd::before {content: '·'; margin-inline: 6px; color: var(--color-font1);}
.program-section .abbr-list dd + dt {margin-left: var(--fs-20);}
.program-section .abbr-list dd{color: var(--color-font3);}


/* 오시는길 */
.location-section .access-area {margin-top: var(--fs-40); display: flex; align-items: stretch; column-gap: var(--space-60);}
.location-section .access-area .map-box {border-radius: 10px; overflow: hidden; flex: 1; height: 560px; flex-shrink: 0;}
.location-section .access-area .map-box iframe {max-width: 100%;}
.location-section .access-area .info-box {width: 360px; padding: var(--fs-38) var(--fs-26); border-radius: 10px; border: 1px solid var(--color-border1); display: flex; flex-direction: column; justify-content: space-between;}
.location-section .access-area .info-box .info-txt {color: var(--color-font3); padding-top: var(--fs-30); border-top: 1px solid var(--color-border1);}
.location-section .access-area .info-box .info-txt b {color: var(--color-font1);}
.location-section .access-area .info-item {display: flex; align-items: flex-start; column-gap: var(--fs-24);}
.location-section .access-area .info-item + .info-item {margin-top: var(--fs-40);}
.location-section .access-area .info-item .txt-wrap {display: flex; flex-direction: column;}
.location-section .access-area .info-item .body-large {color: var(--color-font1);}
.location-section .access-area .info-item .body-medium {color: var(--color-font2);}
.location-section .access-grid {margin-top: var(--fs-40); display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--fs-30); row-gap: var(--fs-40);}
.location-section .access-grid .card {display: flex; flex-direction: column; row-gap: var(--fs-20); padding: var(--fs-30); background-color: var(--color-white);}
.location-section .access-grid .card .tit-wrap {display: flex; flex-direction: column; gap: var(--fs-20);}
.location-section .access-grid .card .body-medium {color: var(--color-font2);}
.location-section .access-grid .card:last-child {grid-column: 1 / -1; align-items: center;}
.location-section .access-grid .card:last-child .tit-wrap {flex-direction: row;}
.location-section .access-grid .card:last-child p {text-align: center;}
/* 경영이념 */
.philosophy-section {margin-block: var(--space-80);}
.philosophy-section .philosophy-list {margin-top: var(--space-60); display: flex; align-items: stretch; column-gap: var(--fs-40);}
.philosophy-section .philosophy-card {flex: 1; padding: var(--fs-30); background-color: var(--color-white); display: flex; flex-direction: column; row-gap: var(--fs-40); justify-content: space-between;}
.philosophy-section .philosophy-card .card-top {display: flex; align-items: center; justify-content: space-between;}
.philosophy-section .philosophy-card .card-top .num {font-size: var(--fs-60); font-weight: 800; color: var(--color-font6); line-height: 1.1;}
.philosophy-section .philosophy-card .txt-wrap {display: flex; flex-direction: column; row-gap: 10px;}
.philosophy-section .philosophy-card .txt-wrap .eyebrow {color: var(--color-static1);}
.philosophy-section .philosophy-card .txt-wrap .body-medium {color: var(--color-font2);}
/* 품질경영 */
.quality-section .quality-block {padding-block: 0; margin-top: var(--space-80); display: flex; align-items: flex-start; column-gap: var(--space-100); justify-content: space-between;}
.quality-section .quality-block .area-tit-wrap {flex-shrink: 0;}
.quality-section .policy-box {padding: var(--fs-50); background-color: var(--color-bg1); display: flex; flex-direction: column; row-gap: 10px;}
.quality-section .policy-box .tit-wrap {display: flex; align-items: center; column-gap: var(--fs-20);}
.quality-section .policy-box .body-medium {color: var(--color-font2);}
.quality-section .commit-list {flex: 1; max-width: 1010px; border: 1px solid var(--color-border1); border-bottom: 0;}
.quality-section .commit-item {display: flex; align-items: center; column-gap: var(--fs-40); padding: var(--fs-20) var(--fs-50); width: 100%; border-bottom: 1px solid var(--color-border1); border-left: 2px solid transparent; transition: background-color 0.2s, border 0.2s;}
.quality-section .commit-item .num {color: var(--color-static2);}
.quality-section .commit-item .body-large {color: var(--color-font1);}
.quality-section .commit-item:hover {background-color: var(--color-bg1); border-left: 2px solid var(--color-static1);}
.quality-section .system-block img {width: 50%; max-width: 700px; height: auto; aspect-ratio: 700/406; border-radius: 10px; overflow: hidden; object-fit: cover;}

/* 회사연혁 */
/* --hs-year-col + --hs-gap 이 세로선의 x 좌표를 만든다. 둘 중 하나만 바꾸면 선과 점이 어긋난다 */
.history-section {--hs-year-col: var(--space-80); --hs-gap: var(--space-100); --hs-dot: 16px; --hs-mark-top: 14px;}
.history-section .history-list {margin-top: var(--space-80); display: flex; flex-direction: column;}
.history-section .history-group + .history-group {margin-top: var(--space-100); padding-top: var(--space-100); border-top: 1px solid var(--color-border1);}
.history-section .item-month,
.history-section .year-num {font-variant-numeric: tabular-nums;}

/* 시기 구분 띠 */
.history-section .history-period {display: flex; align-items: baseline; column-gap: var(--fs-40); padding: var(--fs-16) var(--fs-20); background-color: var(--color-bg1);}
.history-section .history-period .period-year {font-family: 'SansSerifFLF', 'Pretendard', sans-serif; font-size: var(--fs-60); font-weight: 500; color: var(--color-static1); background-image: linear-gradient(90deg, var(--color-static1) 0%, #2F6BFF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.history-section .history-period .period-name {color: var(--color-static2);}

/* 연도 목록. 세로선은 각 블록의 border 가 아니라 목록 전체에 깔린 가상요소라 연도 사이 여백이 벌어져도 끊기지 않는다 */
.history-section .history-year-list {position: relative; margin-top: var(--space-60); display: flex; flex-direction: column; row-gap: var(--fs-24);}
.history-section .history-year-list::before {content: ''; position: absolute; top: var(--hs-mark-top); bottom: var(--hs-mark-top); left: calc(var(--hs-year-col) + var(--hs-gap)); width: 1px; background-color: var(--color-border1);}
.history-section .history-year {display: grid; grid-template-columns: var(--hs-year-col) minmax(0, 1fr); column-gap: var(--hs-gap);}
.history-section .history-year .year-num {align-self: start; white-space: nowrap; color: var(--color-font1);}
.history-section .year-item-list {display: flex; flex-direction: column; row-gap: var(--fs-24);}

/* 항목. 좌표 기준은 그리드 2번 칼럼의 시작점(=세로선)이라 padding 을 줘도 점 위치가 흔들리지 않는다 */
.history-section .year-item {position: relative; padding-left: var(--fs-48); display: grid; grid-template-columns: var(--fs-30) minmax(0, 1fr); column-gap: var(--fs-30); align-items: start;}
.history-section .year-item::before {content: ''; position: absolute; top: var(--hs-mark-top); left: 0; width: var(--hs-dot); height: var(--hs-dot); background-image: url(/img/sub/history-dot.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; transform: translate(-50%, -50%);}
/* 연도와 첫 항목을 잇는 가로선 */
.history-section .year-item:first-child::after {content: ''; position: absolute; top: var(--hs-mark-top); right: calc(100% + var(--hs-dot) / 2); width: calc(var(--hs-gap) - var(--hs-dot)); height: 1px; background-color: var(--color-border1); transform: translateY(-50%);}
.history-section .year-item .item-month {color: var(--color-font4);}
.history-section .year-item .item-txt {color: var(--color-font1); word-break: keep-all;}

@media (max-width: 1280px) {
    .safety-section .safety-list {grid-template-columns: 1fr; grid-template-rows: auto; grid-auto-flow: row; border: 1px solid var(--color-border1); border-bottom: 0;}
    .safety-section .safety-item {border-bottom: 1px solid var(--color-border1);}
    /* 안전환경 - 안전문화 프로그램 */
    .history-section {--hs-gap: var(--space-60);}
    .program-section .program-visual {width: 38%;}
    .program-section .program-visual.img-wrap {width: 45%;}
}

@media (max-width: 1024px) {
    .history-section {--hs-gap: var(--fs-40);}
    .greeting-section .greeting-top {column-gap: 40px;}
    .greeting-section .ceo-img {width: 40%;}

    .location-section .access-area {column-gap: 24px;}
    .location-section .access-area .map-box {height: 460px;}
    .location-section .access-area .info-box {width: 310px; flex-shrink: 0; padding: 20px 16px;}
    .location-section .access-area .info-item {column-gap: 10px;}

    .safety-section .inner {display: flex; flex-direction: column; row-gap: 40px;}
    .achiev-item {row-gap: 24px;}
    /* 안전환경 - 성과 요약 */
    .record-section .record-list {column-gap: 20px;}
    /* 안전환경 - 안전문화 프로그램 */
    .program-section .program-item,
    .program-section .program-item.reverse {flex-direction: column; align-items: flex-start; row-gap: 24px; padding-block: 30px;}
    .program-section .program-visual,
    .program-section .program-item.reverse .program-visual {width: 100%; max-width: unset; align-items: flex-start;}
    .program-section .program-visual.img-wrap {width: 100%; max-width: 600px;}

    .philosophy-section .philosophy-list {flex-direction: column; row-gap: 24px;}

    .quality-section .quality-block {flex-direction: column; row-gap: 40px;}
    .quality-section .commit-list {max-width: unset; width: 100%;}
    .quality-section .system-block img {width: 100%;}
    .quality-section .policy-box {padding: 30px;}
    .quality-section .commit-item {padding: 24px 30px; column-gap: 20px;}

    .location-section .access-grid {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 768px) {
    .history-section {--hs-gap: var(--fs-30);}
    .history-section .history-period {flex-direction: column; align-items: flex-start; row-gap: 6px; padding: var(--fs-20) var(--fs-24);}
    .history-section .year-item {padding-left: var(--fs-24); grid-template-columns: var(--fs-30) minmax(0, 1fr); column-gap: var(--fs-20);}
    .greeting-section .greeting-top {flex-direction: column-reverse; row-gap: 40px;}
    .greeting-section .ceo-img {width: 100%; max-width: 430px;}

    .location-section .access-area {flex-direction: column; row-gap: 30px;}
    .location-section .access-area .map-box {max-width: unset; width: 100%; height: auto; aspect-ratio: 900/560;}
    .location-section .access-area .info-box {width: 100%; padding: 24px 20px;}
    .location-section .access-area .info-box .info-txt {margin-top: var(--fs-30);}
    .safety-section .safety-item {flex-direction: column; align-items: flex-start; row-gap: 20px; position: relative; padding: 24px 30px; padding-right: 110px;}
    .safety-section .safety-item .ico-wrap .ico-box {position: absolute; right: 30px; top: 50%; transform: translateY(-50%);}
    .safety-section .safety-item p {text-align: left;}
    /* 안전환경 - 인증 및 수상 실적 */
    .achiev-section .sub-tit-wrap.left {align-items: center;}
    .achiev-section .sub-tit-wrap.left .section-sub {align-items: center;}
    .achiev-section .achiev-list {grid-template-columns: repeat(1, 1fr);}
    .achiev-section .achiev-item {margin-inline: auto;}
    .achiev-section .achiev-item .txt-wrap {align-items: center; text-align: center;}
    /* 안전환경 - 성과 요약 */
    .record-section .record-list {grid-template-columns: 1fr; row-gap: 30px;}
    /* 안전환경 - 안전문화 프로그램 */
    .program-section .step-list {margin-top: 16px;}
    .program-section .step-item {column-gap: 10px;}
    .program-section .step-item::after {width: 24px; margin-right: 10px;}

    .quality-section .policy-box .tit-wrap {flex-direction: column-reverse; align-items: flex-start; row-gap: 10px;}
    .quality-section .policy-box .tit-wrap .section-sub {word-break: keep-all;}
    .quality-section .policy-box {padding: 24px;}
    .quality-section .commit-item {padding: 20px 24px; column-gap: 16px;}
}

@media (max-width: 480px) {
    /* 연도 칼럼이 좁아져 가로선은 빼고 점만 남긴다 */
    .history-section {--hs-gap: var(--fs-20); --hs-dot: 12px;}
    .history-section .year-item:first-child::after {content: none;}
    .history-section .year-item {padding-left: var(--fs-20); column-gap: var(--fs-16);}
    .greeting-section .quot-txt .section-sub {font-size: clamp(17px, 6vw, 26px);}

    .safety-section .safety-item {padding: 20px 24px; padding-right: 100px;}
    .safety-section .safety-item .ico-wrap .ico-box {right: 24px;}
    /* 안전환경 - 인증 및 수상 실적 */
    .achiev-section .achiev-list {grid-template-columns: 1fr; row-gap: 40px;}
    /* 안전환경 - 성과 요약 */
    .record-section .record-item .ico-box {width: 60px; height: 60px; border-radius: 14px;}

    .quality-section .commit-item {flex-direction: column; align-items: flex-start;}

    .location-section .access-grid {grid-template-columns: repeat(1, 1fr);}
}

@media (max-width: 375px) {
    .history-section .year-item {display: flex; flex-direction: column; align-items: flex-start;}
    .location-section .access-area .info-item + .info-item {margin-top: var(--fs-30);}
    /* 안전환경 - 안전문화 프로그램 */
    .program-section .step-item {column-gap: 8px;}
    .program-section .step-item::after {width: 18px; margin-right: 8px;}
}