/* =========================================================
   인사말
========================================================= */

.greeting-page {
    --greet-blue: #007dc3;
    --greet-blue-dark: #00669f;
    --greet-green: #c1d72e;

    --greet-text: #333;
    --greet-sub: #69737b;
    --greet-line: #e5eaee;

    max-width: 1440px;
    margin: 0 auto;
    padding: 0px 30px 110px;

    color: var(--greet-text);

    font-family:
        "Pretendard",
        "Noto Sans KR",
        "맑은 고딕",
        sans-serif;

    font-size: 18px;
    line-height: 1.9;

    word-break: keep-all;
}


/* =========================================================
   전체 레이아웃
========================================================= */

.greeting-wrap {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);

    gap: 80px;

    align-items: start;
}


/* =========================================================
   LEFT VISUAL
========================================================= */

.greeting-visual {
    position: sticky;
    top: 120px;
}

.greeting-photo {
    position: relative;

    min-height: 470px;

    overflow: hidden;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(0,125,195,.08),
            rgba(193,215,46,.12)
        );
}

.greeting-photo::before {
    content: "";

    position: absolute;

    left: -55px;
    bottom: -55px;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background: rgba(193,215,46,.20);
}

.greeting-photo::after {
    content: "";

    position: absolute;

    right: -45px;
    top: -45px;

    width: 145px;
    height: 145px;

    border-radius: 50%;

    background: rgba(0,125,195,.09);
}

.greeting-photo img {
    position: relative;
    z-index: 2;

    display: block;

    width: 100%;
    height: 100%;

    min-height: 470px;

    object-fit: contain;

    padding: 35px;
}


/* =========================================================
   CONTENT
========================================================= */

.greeting-content {
    min-width: 0;
}

.greeting-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 13px;

    color: var(--greet-blue);

    font-size: 14px;
    font-weight: 800;
    letter-spacing: .05em;
}

.greeting-kicker::before {
    content: "";

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--greet-green);
}

.greeting-title {
    margin: 0 0 38px;

    color: #1d2428;

    font-size: 38px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -.045em;
}

.greeting-title strong {
    color: var(--greet-blue);
}

.greeting-title .line {
    display: block;
}


/* =========================================================
   INTRO
========================================================= */

.greeting-lead {
    position: relative;

    margin-bottom: 42px;
    padding: 28px 30px 28px 34px;

    overflow: hidden;

    border: 1px solid #d9eaf2;
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(0,125,195,.05),
            rgba(193,215,46,.065)
        );
}

.greeting-lead::before {
    content: "";

    position: absolute;

    left: 0;
    top: 22px;
    bottom: 22px;

    width: 4px;

    border-radius: 0 4px 4px 0;

    background: var(--greet-blue);
}

.greeting-lead p {
    margin: 0;

    color: #465159;

    font-size: 20px;
    font-weight: 700;
    line-height: 1.75;
}


/* =========================================================
   BODY
========================================================= */

.greeting-body p {
    margin: 0 0 26px;
}

.greeting-body p:last-child {
    margin-bottom: 0;
}

.greeting-body strong {
    color: #20272c;
    font-weight: 800;
}


/* =========================================================
   SIGN
========================================================= */

.greeting-sign {
    margin-top: 50px;
    padding-top: 30px;

    border-top: 1px solid var(--greet-line);
}

.greeting-sign span {
    display: block;

    margin-bottom: 6px;

    color: #788087;

    font-size: 15px;
}

.greeting-sign strong {
    display: block;

    color: #222;

    font-size: 22px;
    font-weight: 800;
}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 1100px) {

    .greeting-page {
        padding: 60px 24px 90px;

        font-size: 17px;
    }

    .greeting-wrap {
        grid-template-columns: 300px minmax(0, 1fr);

        gap: 45px;
    }

    .greeting-photo,
    .greeting-photo img {
        min-height: 400px;
    }

}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 768px) {

    .greeting-page {
        padding: 40px 18px 70px;

        font-size: 16px;
        line-height: 1.85;
    }

    .greeting-wrap {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .greeting-visual {
        position: static;
    }

    .greeting-photo {
        min-height: 0;

        border-radius: 20px;
    }

    .greeting-photo img {
        min-height: 0;

        max-height: 360px;

        padding: 25px;
    }

    .greeting-title {
        margin-bottom: 28px;

        font-size: 28px;
    }

    .greeting-lead {
        margin-bottom: 30px;

        padding: 22px 20px 22px 25px;

        border-radius: 14px;
    }

    .greeting-lead p {
        font-size: 17px;
    }

    .greeting-body p {
        margin-bottom: 21px;
    }

    .greeting-sign {
        margin-top: 38px;
        padding-top: 24px;
    }

    .greeting-sign strong {
        font-size: 19px;
    }

}
/* =========================================================
   사회공헌 소개
========================================================= */

.csr-page {
    --csr-blue: #007dc3;
    --csr-blue-dark: #00649d;
    --csr-green: #c1d72e;

    --csr-text: #333;
    --csr-sub: #66717a;
    --csr-line: #e7ebee;
    --csr-soft: #f6f9fb;

    max-width: 1440px;
    margin: 0 auto;
    padding: 0px 30px 110px;

    color: var(--csr-text);

    font-family:
        "Pretendard",
        "Noto Sans KR",
        "맑은 고딕",
        sans-serif;

    font-size: 18px;
    line-height: 1.85;

    word-break: keep-all;
}


/* =========================================================
   공통 타이틀
========================================================= */

.csr-section {
    margin-bottom: 90px;
}

.csr-section:last-child {
    margin-bottom: 0;
}

.csr-title-wrap {
    margin-bottom: 35px;
}

.csr-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 10px;

    color: var(--csr-blue);

    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
}

.csr-kicker::before {
    content: "";

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--csr-green);
}

.csr-title {
    margin: 0;

    color: #181d21;

    font-size: 34px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.045em;
}

.csr-title span {
    color: var(--csr-blue);
}


/* =========================================================
   사회공헌이란 - INTRO
========================================================= */

.csr-intro {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);

    gap: 70px;

    align-items: center;
}

.csr-intro-text {
    min-width: 0;
}

.csr-lead {
    margin: 0 0 30px;

    color: #1c252b;

    font-size: 28px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -.035em;
}

.csr-lead strong {
    color: var(--csr-blue);
}

.csr-description p {
    margin: 0 0 23px;
}

.csr-description p:last-child {
    margin-bottom: 0;
}

.csr-description strong {
    color: #20272c;
    font-weight: 750;
}


/* CSR 설명박스 */

.csr-definition {
    margin: 28px 0;

    padding: 25px 28px;

    border: 1px solid #d8e9f2;
    border-radius: 16px;

    background: #f7fbfd;
}

.csr-definition strong {
    display: block;

    margin-bottom: 7px;

    color: var(--csr-blue);

    font-size: 18px;
}

.csr-definition p {
    margin: 0;

    color: #56616a;
}


/* =========================================================
   이미지
========================================================= */

.csr-visual {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 430px;

    border-radius: 30px;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(193,215,46,.12),
            transparent 58%
        ),
        linear-gradient(
            145deg,
            #f7fbfd,
            #fff
        );
}

.csr-visual::before {
    content: "";

    position: absolute;

    width: 210px;
    height: 210px;

    right: 8%;
    top: 7%;

    border-radius: 50%;

    background: rgba(0,125,195,.045);
}

.csr-visual img {
    position: relative;
    z-index: 2;

    display: block;

    width: min(100%, 470px);
    height: auto;

    padding: 35px;
}


/* =========================================================
   인용문
========================================================= */

.csr-quote {
    position: relative;

    margin-top: 55px;
    padding: 34px 42px 34px 48px;

    overflow: hidden;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(0,125,195,.07),
            rgba(193,215,46,.08)
        );
}

.csr-quote::before {
    content: "“";

    position: absolute;

    left: 18px;
    top: -15px;

    color: rgba(0,125,195,.13);

    font-family: Georgia, serif;
    font-size: 110px;
    line-height: 1;
}

.csr-quote p {
    position: relative;
    z-index: 1;

    margin: 0;

    color: #39434a;

    font-size: 18px;
    font-style: normal;
    line-height: 1.9;
}

.csr-quote strong {
    color: var(--csr-blue-dark);
}


/* =========================================================
   사회공헌 영역
========================================================= */

.csr-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}

.csr-field {
    position: relative;

    min-height: 235px;

    padding: 32px 28px;

    overflow: hidden;

    border: 1px solid var(--csr-line);
    border-radius: 20px;

    background: #fff;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.csr-field:hover {
    transform: translateY(-5px);

    border-color: #b5d9eb;

    box-shadow:
        0 18px 40px rgba(0, 68, 105, .08);
}

.csr-field::after {
    content: "";

    position: absolute;

    right: -40px;
    bottom: -55px;

    width: 130px;
    height: 130px;

    border-radius: 50%;

    background: rgba(193,215,46,.08);

    transition: .25s ease;
}

.csr-field:hover::after {
    transform: scale(1.15);
}


/* 아이콘 */

.csr-field-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 76px;
    height: 76px;

    margin-bottom: 24px;

    border-radius: 20px;

    background: #f5fafc;
}

.csr-field-icon img {
    display: block;

    max-width: 58px;
    max-height: 58px;

    width: auto;
    height: auto;
}


/* 텍스트 */

.csr-field h5 {
    margin: 0 0 10px;

    color: #1d252b;

    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.csr-field p {
    margin: 0;

    color: #68737b;

    font-size: 16px;
    line-height: 1.7;
}


/* 5개일 때 두 번째 줄 정리 */

.csr-field:nth-child(4) {
    grid-column: 1 / 2;
}

.csr-field:nth-child(5) {
    grid-column: 2 / 3;
}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 1100px) {

    .csr-page {
        padding: 60px 24px 90px;
        font-size: 17px;
    }

    .csr-intro {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .csr-visual {
        min-height: auto;
        padding: 25px;
    }

    .csr-visual img {
        width: min(100%, 420px);
        padding: 20px;
    }

    .csr-fields {
        grid-template-columns: repeat(2, 1fr);
    }

    .csr-field:nth-child(4),
    .csr-field:nth-child(5) {
        grid-column: auto;
    }

}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 768px) {

    .csr-page {
        padding: 42px 18px 70px;

        font-size: 16px;
        line-height: 1.8;
    }

    .csr-section {
        margin-bottom: 60px;
    }

    .csr-title-wrap {
        margin-bottom: 25px;
    }

    .csr-title {
        font-size: 27px;
    }

    .csr-lead {
        margin-bottom: 22px;

        font-size: 21px;
        line-height: 1.55;
    }

    .csr-definition {
        padding: 20px;

        border-radius: 13px;
    }

    .csr-visual {
        border-radius: 20px;
    }

    .csr-quote {
        margin-top: 35px;

        padding: 26px 22px 26px 28px;

        border-radius: 14px;
    }

    .csr-quote::before {
        left: 8px;
        top: -5px;

        font-size: 75px;
    }

    .csr-quote p {
        font-size: 16px;
    }

    .csr-fields {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .csr-field {
        min-height: auto;

        padding: 23px 21px;

        border-radius: 15px;
    }

    .csr-field-icon {
        width: 65px;
        height: 65px;

        margin-bottom: 17px;

        border-radius: 16px;
    }

    .csr-field-icon img {
        max-width: 50px;
        max-height: 50px;
    }

    .csr-field h5 {
        font-size: 19px;
    }

    .csr-field p {
        font-size: 15px;
    }

}

/* =========================================================
   사회공헌지원센터 소개
========================================================= */

.center-page {
    --center-blue: #007dc3;
    --center-blue-dark: #0068a3;
    --center-green: #c1d72e;

    --center-text: #333;
    --center-sub: #68717a;
    --center-line: #e5eaee;
    --center-bg: #f6f9fb;

    max-width: 1440px;
    margin: 0 auto;
    padding: 0px 30px 110px;

    color: var(--center-text);

    font-family:
        "Pretendard",
        "Noto Sans KR",
        "맑은 고딕",
        sans-serif;

    font-size: 18px;
    line-height: 1.85;

    word-break: keep-all;
}


/* =========================================================
   TAB
========================================================= */

.center-tabs {
    display: flex;

    margin-bottom: 70px;

    border: 1px solid #dce2e6;
    border-radius: 14px;

    background: #fff;

    overflow: hidden;
}

.center-tabs li {
    flex: 1;
}

.center-tabs button {
    width: 100%;

    padding: 18px 20px;

    border: 0;

    background: transparent;

    color: #555;

    font-size: 17px;
    font-weight: 700;

    cursor: pointer;

    transition: .2s ease;
}

.center-tabs li.active button {
    background: var(--center-blue);
    color: #fff;
}

.center-tabs button:hover {
    background: #f4f9fc;
}

.center-tabs li.active button:hover {
    background: var(--center-blue);
}


/* =========================================================
   공통
========================================================= */

.center-tab-panel {
    display: none;
}

.center-tab-panel.active {
    display: block;
}

.center-section {
    margin-bottom: 80px;
}

.center-section:last-child {
    margin-bottom: 0;
}

.center-head {
    margin-bottom: 30px;
}

.center-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 10px;

    color: var(--center-blue);

    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
}

.center-kicker::before {
    content: "";

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--center-green);
}

.center-title {
    margin: 0;

    color: #1d2226;

    font-size: 30px;
    font-weight: 800;

    line-height: 1.35;
    letter-spacing: -.04em;
}

.center-title span {
    color: var(--center-blue);
}

.center-desc {
    margin-top: 10px;

    color: var(--center-sub);

    font-size: 16px;
}


/* =========================================================
   설립근거
========================================================= */

.foundation-box {
    position: relative;

    padding: 30px 34px;

    overflow: hidden;

    border: 1px solid #d9eaf3;
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(0,125,195,.055),
            rgba(193,215,46,.07)
        );
}

.foundation-box::before {
    content: "";

    position: absolute;
    left: 0;
    top: 22px;
    bottom: 22px;

    width: 4px;

    background: var(--center-blue);

    border-radius: 0 4px 4px 0;
}

.foundation-box strong {
    display: block;

    margin-bottom: 8px;

    color: var(--center-blue);

    font-size: 20px;
    font-weight: 800;
}

.foundation-box p {
    margin: 0;
}


/* =========================================================
   핵심 정보 카드
========================================================= */

.center-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}

.center-summary {
    padding: 28px;

    border: 1px solid var(--center-line);
    border-radius: 18px;

    background: #fff;
}

.center-summary .label {
    display: block;

    margin-bottom: 10px;

    color: var(--center-blue);

    font-size: 14px;
    font-weight: 800;
}

.center-summary strong {
    display: block;

    color: #222;

    font-size: 21px;
    font-weight: 800;

    line-height: 1.5;
}

.center-summary p {
    margin: 6px 0 0;

    color: var(--center-sub);

    font-size: 15px;
}


/* =========================================================
   기본 현황 테이블
========================================================= */

.center-table-wrap {
    overflow-x: auto;

    border-top: 2px solid var(--center-blue);
}

.center-table {
    width: 100%;

    border-collapse: collapse;
}

.center-table th,
.center-table td {
    padding: 20px 22px;

    border-bottom: 1px solid var(--center-line);

    text-align: left;
    vertical-align: middle;
}

.center-table th {
    width: 180px;

    background: #f6f9fb;

    color: #333;

    font-weight: 800;
}

.center-table td {
    background: #fff;
}


/* =========================================================
   연혁 TIMELINE
========================================================= */

.history-wrap {
    position: relative;

    margin-top: 10px;
}

.history-year {
    display: grid;
    grid-template-columns: 130px 1fr;

    gap: 35px;

    margin-bottom: 45px;
}

.history-year:last-child {
    margin-bottom: 0;
}

.history-year-title {
    position: relative;

    color: var(--center-blue);

    font-size: 32px;
    font-weight: 800;

    letter-spacing: -.04em;
}
/*
.history-year-title::after {
    content: "";

    position: absolute;
    right: -22px;
    top: 11px;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: var(--center-green);

    box-shadow: 0 0 0 6px rgba(193,215,46,.15);
}
*/
.history-list {
    position: relative;

    padding-left: 35px;

    border-left: 1px solid #d6dde2;
}

.history-list::before {
    content: "";

    position: absolute;

    left: -6px;
    top: 12px;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: var(--center-green);

    box-shadow:
        0 0 0 6px rgba(193,215,46,.18);

    z-index: 2;
}

.history-item {
    display: grid;
    grid-template-columns: 90px 1fr;

    gap: 20px;

    padding: 0 0 24px;
}

.history-item:last-child {
    padding-bottom: 0;
}

.history-date {
    color: var(--center-blue-dark);

    font-weight: 800;
}

.history-text {
    color: #444;
}


/* =========================================================
   주요 기능
========================================================= */

.function-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}

.function-card {
    position: relative;

    min-height: 170px;

    padding: 28px 26px;

    overflow: hidden;

    border: 1px solid var(--center-line);
    border-radius: 18px;

    background: #fff;
}

.function-card::after {
    content: "";

    position: absolute;

    right: -35px;
    bottom: -45px;

    width: 110px;
    height: 110px;

    border-radius: 50%;

    background: rgba(193,215,46,.08);
}

.function-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 18px;

    border-radius: 11px;

    background: var(--center-blue);

    color: #fff;

    font-size: 13px;
    font-weight: 800;
}

.function-card p {
    position: relative;
    z-index: 1;

    margin: 0;

    color: #40484e;

    font-weight: 700;
    line-height: 1.7;
}


/* =========================================================
   조직도
========================================================= */

.org-card {
    padding: 35px;

    border: 1px solid var(--center-line);
    border-radius: 20px;

    background: #fff;

    text-align: center;
}

.org-card img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0 auto;
}

.org-card.organization img {
    max-width: 1200px;
}

.org-card.staff img {
    max-width: 1050px;
}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 1024px) {

    .center-page {
        padding: 60px 24px 90px;

        font-size: 17px;
    }

    .center-summary-grid,
    .function-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 768px) {

    .center-page {
        padding: 40px 18px 70px;

        font-size: 16px;
    }

    .center-tabs {
        margin-bottom: 45px;

        border-radius: 10px;
    }

    .center-tabs button {
        padding: 15px 10px;

        font-size: 15px;
    }

    .center-section {
        margin-bottom: 55px;
    }

    .center-title {
        font-size: 25px;
    }

    .foundation-box {
        padding: 22px 22px 22px 26px;

        border-radius: 14px;
    }

    .foundation-box strong {
        font-size: 18px;
    }

    .center-summary-grid,
    .function-grid {
        grid-template-columns: 1fr;
    }

    .center-summary,
    .function-card {
        padding: 22px;
    }

    .center-table th,
    .center-table td {
        padding: 15px 14px;

        font-size: 15px;
    }

    .center-table th {
        width: 120px;
    }

    .history-year {
        grid-template-columns: 1fr;

        gap: 10px;

        margin-bottom: 35px;
    }

    .history-year-title {
        font-size: 26px;
    }

    .history-year-title::after {
        display: none;
    }

    .history-list {
        padding-left: 18px;
    }

    .history-item {
        grid-template-columns: 72px 1fr;

        gap: 10px;

        padding-bottom: 18px;
    }

    .org-card {
        padding: 16px;

        border-radius: 14px;
    }

}

/* =========================================================
   사업안내
========================================================= */

.business-page {
    --biz-blue: #007dc3;
    --biz-blue-dark: #00669f;
    --biz-green: #c1d72e;

    --biz-text: #333;
    --biz-sub: #68727a;
    --biz-line: #e5eaee;
    --biz-soft: #f6f9fb;

    max-width: 1440px;
    margin: 0 auto;
    padding: 0px 30px 110px;

    color: var(--biz-text);

    font-family:
        "Pretendard",
        "Noto Sans KR",
        "맑은 고딕",
        sans-serif;

    font-size: 18px;
    line-height: 1.85;

    word-break: keep-all;
}


/* =========================================================
   TAB
========================================================= */

.business-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    margin: 0 0 70px;
    padding: 0;

    overflow: hidden;

    border: 1px solid #dce2e6;
    border-radius: 14px;

    background: #fff;

    list-style: none;
}

.business-tabs li {
    position: relative;
}

.business-tabs li + li {
    border-left: 1px solid #e5e9ec;
}

.business-tabs button {
    width: 100%;

    padding: 19px 20px;

    border: 0;

    background: transparent;

    color: #4e555b;

    font-size: 17px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease;
}

.business-tabs li.active button {
    background: var(--biz-blue);
    color: #fff;
}

.business-tabs li:not(.active) button:hover {
    background: #f3f8fb;
    color: var(--biz-blue);
}


/* =========================================================
   PANEL
========================================================= */

.business-panel {
    display: none;
}

.business-panel.active {
    display: block;
}


/* =========================================================
   HEAD
========================================================= */

.business-head {
    margin-bottom: 38px;
}

.business-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 10px;

    color: var(--biz-blue);

    font-size: 14px;
    font-weight: 800;
    letter-spacing: .05em;
}

.business-kicker::before {
    content: "";

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--biz-green);
}

.business-title {
    margin: 0 0 18px;

    color: #1e2428;

    font-size: 32px;
    font-weight: 800;
    line-height: 1.35;

    letter-spacing: -.045em;
}

.business-title span {
    color: var(--biz-blue);
}

.business-lead {
    max-width: 1050px;

    margin: 0;

    color: #5f6971;

    font-size: 18px;
    line-height: 1.85;
}


/* =========================================================
   INTRO BOX
========================================================= */

.business-intro {
    position: relative;

    margin-bottom: 40px;
    padding: 28px 32px 28px 36px;

    overflow: hidden;

    border: 1px solid #d9eaf2;
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(0,125,195,.045),
            rgba(193,215,46,.06)
        );
}

.business-intro::before {
    content: "";

    position: absolute;

    left: 0;
    top: 22px;
    bottom: 22px;

    width: 4px;

    border-radius: 0 4px 4px 0;

    background: var(--biz-blue);
}

.business-intro p {
    margin: 0;

    color: #505a61;

    font-size: 18px;
}


/* =========================================================
   CARD GRID
========================================================= */

.business-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 22px;
}

.business-card {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 24px;

    min-height: 190px;

    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--biz-line);
    border-radius: 20px;

    background: #fff;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.business-card:hover {
    transform: translateY(-4px);

    border-color: #b7dbea;

    box-shadow:
        0 18px 40px rgba(0, 75, 115, .07);
}

.business-card::after {
    content: "";

    position: absolute;

    right: -45px;
    bottom: -55px;

    width: 140px;
    height: 140px;

    border-radius: 50%;

    background: rgba(193,215,46,.07);
}


/* ICON */

.business-icon {
    position: relative;
    z-index: 1;

    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 86px;
    height: 86px;

    border-radius: 22px;

    background: #f4f9fb;
}

.business-icon img {
    display: block;

    max-width: 66px;
    max-height: 66px;

    width: auto;
    height: auto;
}


/* CONTENT */

.business-content {
    position: relative;
    z-index: 1;

    flex: 1;

    min-width: 0;
}

.business-content h3 {
    margin: 2px 0 11px;

    color: #20272c;

    font-size: 22px;
    font-weight: 800;

    line-height: 1.45;
    letter-spacing: -.03em;
}

.business-content p {
    margin: 0;

    color: #667179;

    font-size: 16px;
    line-height: 1.75;
}


/* SUB LIST */

.business-sub-list {
    margin: 8px 0 0;
    padding: 0;

    list-style: none;
}

.business-sub-list li {
    position: relative;

    margin-bottom: 5px;
    padding-left: 16px;

    color: #667179;

    font-size: 16px;
    line-height: 1.7;
}

.business-sub-list li:last-child {
    margin-bottom: 0;
}

.business-sub-list li::before {
    content: "";

    position: absolute;

    left: 0;
    top: .75em;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--biz-green);
}


/* =========================================================
   3개일 때 폭 정리
========================================================= */

.business-grid.three .business-card:last-child {
    grid-column: span 2;
}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 1024px) {

    .business-page {
        padding: 60px 24px 90px;

        font-size: 17px;
    }

    .business-grid {
        grid-template-columns: 1fr;
    }

    .business-grid.three .business-card:last-child {
        grid-column: auto;
    }

}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 768px) {

    .business-page {
        padding: 40px 18px 70px;

        font-size: 16px;
        line-height: 1.8;
    }

    .business-tabs {
        grid-template-columns: 1fr;

        margin-bottom: 45px;

        border-radius: 10px;
    }

    .business-tabs li + li {
        border-left: 0;
        border-top: 1px solid #e5e9ec;
    }

    .business-tabs button {
        padding: 15px 12px;

        font-size: 15px;
    }

    .business-head {
        margin-bottom: 28px;
    }

    .business-title {
        font-size: 27px;
    }

    .business-lead,
    .business-intro p {
        font-size: 16px;
    }

    .business-intro {
        margin-bottom: 30px;

        padding: 22px 20px 22px 25px;

        border-radius: 14px;
    }

    .business-grid {
        gap: 14px;
    }

    .business-card {
        gap: 18px;

        min-height: 0;

        padding: 22px 20px;

        border-radius: 16px;
    }

    .business-icon {
        width: 68px;
        height: 68px;

        border-radius: 17px;
    }

    .business-icon img {
        max-width: 52px;
        max-height: 52px;
    }

    .business-content h3 {
        margin-top: 0;

        font-size: 19px;
    }

    .business-content p,
    .business-sub-list li {
        font-size: 15px;
    }

}


/* =========================================================
   Small Mobile
========================================================= */

@media (max-width: 480px) {

    .business-card {
        display: block;
    }

    .business-icon {
        margin-bottom: 17px;
    }

}

/* =========================================================
   찾아오시는길
========================================================= */

.location-page {
    --loc-blue: #007dc3;
    --loc-blue-dark: #00679f;
    --loc-green: #c1d72e;

    --loc-text: #333;
    --loc-sub: #68727a;
    --loc-line: #e5eaee;
    --loc-soft: #f6f9fb;

    max-width: 1440px;
    margin: 0 auto;
    padding: 0px 30px 110px;

    color: var(--loc-text);

    font-family:
        "Pretendard",
        "Noto Sans KR",
        "맑은 고딕",
        sans-serif;

    font-size: 18px;
    line-height: 1.85;

    word-break: keep-all;
}

.section_address {
    display: none;
}


/* =========================================================
   상단 제목
========================================================= */

.location-head {
    margin-bottom: 36px;
}

.location-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 10px;

    color: var(--loc-blue);

    font-size: 14px;
    font-weight: 800;
    letter-spacing: .05em;
}

.location-kicker::before {
    content: "";

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--loc-green);
}

.location-title {
    margin: 0 0 14px;

    color: #1e2428;

    font-size: 32px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.045em;
}

.location-title span {
    color: var(--loc-blue);
}

.location-desc {
    margin: 0;

    color: var(--loc-sub);

    font-size: 18px;
}


/* =========================================================
   지도
========================================================= */

.location-map-wrap {
    overflow: hidden;

    margin-bottom: 34px;

    border: 1px solid var(--loc-line);
    border-radius: 22px;

    background: #fff;

    box-shadow:
        0 12px 35px rgba(0, 63, 95, .06);
}

.location-map {
    width: 100%;
}

.location-map .root_daum_roughmap {
    width: 100% !important;
}


/* =========================================================
   주소 강조
========================================================= */

.location-address {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 28px;
    padding: 28px 30px;

    border: 1px solid #d9eaf2;
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(0,125,195,.05),
            rgba(193,215,46,.07)
        );
}

.location-address-left {
    display: flex;
    align-items: center;

    gap: 20px;
}

.location-address-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 68px;
    height: 68px;

    border-radius: 18px;

    background: var(--loc-blue);

    color: #fff;

    font-size: 31px;
}

.location-address .label {
    display: block;

    margin-bottom: 4px;

    color: var(--loc-blue);

    font-size: 14px;
    font-weight: 800;
}

.location-address strong {
    display: block;

    color: #1e252a;

    font-size: 22px;
    font-weight: 800;
}


/* =========================================================
   교통 카드
========================================================= */

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

    gap: 20px;
}

.location-card {
    position: relative;

    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--loc-line);
    border-radius: 20px;

    background: #fff;
}

.location-card::after {
    content: "";

    position: absolute;

    right: -40px;
    bottom: -50px;

    width: 130px;
    height: 130px;

    border-radius: 50%;

    background: rgba(193,215,46,.07);
}

.location-card-head {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 24px;
}

.location-card-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    border-radius: 16px;

    background: #f1f8fb;

    color: var(--loc-blue);

    font-size: 28px;
}

.location-card h3 {
    margin: 0;

    color: #20272c;

    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.location-card-body {
    position: relative;
    z-index: 1;
}


/* =========================================================
   자가용
========================================================= */

.route-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.route-list li {
    margin-bottom: 24px;
}

.route-list li:last-child {
    margin-bottom: 0;
}

.route-list strong {
    display: block;

    margin-bottom: 7px;

    color: var(--loc-blue-dark);

    font-size: 17px;
    font-weight: 800;
}

.route-list p {
    margin: 0;

    color: #5f6970;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   버스
========================================================= */

.bus-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.bus-list li {
    position: relative;

    margin-bottom: 16px;
    padding-left: 18px;
}

.bus-list li:last-child {
    margin-bottom: 0;
}

.bus-list li::before {
    content: "";

    position: absolute;

    left: 0;
    top: .75em;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--loc-green);
}

.bus-stop {
    display: block;

    margin-bottom: 3px;

    color: #2f373d;

    font-weight: 800;
}

.bus-no {
    color: #69737a;

    font-size: 16px;
}


/* =========================================================
   안내문
========================================================= */

.location-note {
    margin-top: 24px;
    padding: 18px 22px;

    border-radius: 12px;

    background: #f7f9fa;

    color: #737c82;

    font-size: 14px;
}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 1024px) {

    .location-page {
        padding: 60px 24px 90px;

        font-size: 17px;
    }

    .location-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 768px) {

    .location-page {
        padding: 40px 18px 70px;

        font-size: 16px;
    }

    .location-title {
        font-size: 27px;
    }

    .location-desc {
        font-size: 16px;
    }

    .location-map-wrap {
        margin-bottom: 24px;

        border-radius: 15px;
    }

    .location-address {
        display: block;

        padding: 22px 20px;

        border-radius: 14px;
    }

    .location-address-left {
        align-items: flex-start;
    }

    .location-address-icon {
        width: 56px;
        height: 56px;

        border-radius: 14px;

        font-size: 25px;
    }

    .location-address strong {
        font-size: 18px;
    }

    .location-card {
        padding: 22px 20px;

        border-radius: 16px;
    }

    .location-card-head {
        margin-bottom: 19px;
    }

    .location-card-icon {
        width: 50px;
        height: 50px;

        border-radius: 14px;

        font-size: 24px;
    }

    .location-card h3 {
        font-size: 19px;
    }

    .route-list strong {
        font-size: 16px;
    }

    .route-list p,
    .bus-no {
        font-size: 15px;
    }

}