/* ==========================================
상단 이미지, 페이지네비게이션
========================================== */
.sub-common-top.idealTalent {
    background: url("/static/kor/images/customer/idealTalent-visual.jpg") no-repeat center/cover;
}

.page-recruit .parallax-top {
    border-bottom: unset;
}

.page-recruit .sub-common-navigator li a {
    font-weight: 700;
    color: #fff;
    background: #0065BD;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    width: 30rem;
    line-height: 5.6rem;
    font-size: var(--font-16);
    border-radius: 50px;
}

.page-recruit .sub-common-navigator li a::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(/static/kor/images/icon/arrow-deg-r-icon.png) no-repeat;
}

/* ==========================================
비전 체계도 공통 레이아웃
========================================== */
.sec-vision-system {
    padding: var(--mg-200) 0 0;
}

/* 1. 비전 헤더 */
.vision-header {
    text-align: center;
    margin-bottom: 2.4rem;
}

.vision-header .sub-title {
    display: block;
    font-size: var(--font-18);
    font-weight: 700;
    color: #8F9294;
}

.vision-header .main-title {
    font-size: var(--font-48);
    font-weight: 700;
    word-break: keep-all;
}

.vision-header .main-title .text-blue {
    color: #0065BD;
}

/* 🔥 핵심: CSS로 그린 하단 점선 화살표 */
.arrow-down-divider {
    margin: 0 auto 4.8rem;
    text-align: center;
}

.arrow-down-divider img {
    display: unset;
}

/* 2. 경영이념 & 경영철학 그리드 */
.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    margin-bottom: 3rem;
}

.phil-card {
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: 1.5rem;
    background-color: #ffffff;
    overflow: hidden;
}

.phil-card .card-head {
    padding-left: 2.4rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    line-height: 8.8rem;
    border: 0;
    border-bottom: 1px solid var(--color-border, #e5e5e5);
}

.phil-card .card-head .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.6rem;
    height: 3.6rem;
    background: #F5F5F5;
    border-radius: 50%;
}

.phil-card .card-head .icon+h3 {
    color: #17181A;
}

.phil-card .card-head h3 {
    font-size: var(--font-32);
    font-weight: 700;
}

.phil-card .card-body {
    padding: 2.4rem 3.2rem;
    border: 0;
}

.dot-list li {
    position: relative;
    margin-bottom: .4rem;
    padding-left: 1.2rem;
    line-height: 1.5;
    font-size: var(--font-18);
    font-weight: 300;
    color: #2F3133;
}

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

/* 리스트 앞 점(Bullet) 가상요소 처리 */
.dot-list li::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 4px;
    height: 4px;
    background-color: #CBCCCA;
    border-radius: 50%;
}

/* 3. 동원정신 & 행동규범 (통합 박스) */
.core-value-box {
    border: 1px solid #E5E5E3;
    border-radius: 8px;
}

.core-row {
    display: flex;
    align-items: center;
    padding: 5rem 6rem;
}

.core-row .row-title {
    font-size: var(--font-32);
    font-weight: 700;
    flex-shrink: 0;
}

.core-row .row-title.text-blue {
    color: #0065BD;
}

/* 상단 회색 배경 */
.core-row.row-top {
    padding: 0 4.8rem;
    justify-content: space-between;
    height: 16rem;
    background: #F5F5F5;
    border-bottom: 1px solid #e5e5e5;
}

/* 파란색 뱃지 버튼 스타일 */
.spirit-list {
    display: flex;
    width: 79.2rem;
    gap: 2rem;
    padding: 0 2rem;
}

.badge-blue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex: 1;
    font-size: var(--font-20);
    font-weight: 700;
    height: 9.6rem;
    border-radius: 9999px;
    background-color: #0065BD;
    color: #fff;
}

.badge-blue img {
    width: 3.2rem;
}

/* 하단 행동규범 리스트 */
.core-row.row-bottom {
    padding: 0 4.8rem;
    height: 16rem;
    justify-content: space-between;
}

.conduct-list {
    display: flex;
    justify-content: space-between;
    width: 79.2rem;
}

.conduct-list li {
    position: relative;
    font-size: var(--font-18);
    font-weight: 600;
    color: #0065BD;
    text-align: center;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.conduct-list li:first-child::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background-color: #CBCCCA;
}

.conduct-list li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background-color: #CBCCCA;
}

.ideal-talent .flex-box,
.sec-vision-system .flex-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4rem;
}

.ideal-talent .flex-box .business-areas,
.sec-vision-system .flex-box .vision-box {
    flex: 1;
}

.ideal-talent .title-box-sub,
.sec-vision-system .title-box-sub {
    position: sticky;
    top: 16rem;
    width: 100%;
    max-width: 35rem;
}

.ideal-talent .r-card {
    height: 30rem;
}

.ideal-talent .r-card .txt-box {
    padding: 0 4.8rem;
}

.ideal-talent .r-card .img-box {
    width: 35rem;
}

.ideal-talent .r-card .num-title {
    margin-bottom: 1.2rem;
    font-size: var(--font-32);
}

.ideal-talent .r-card .txt-box p {
    padding-left: 3.6rem;
    font-size: var(--font-16);
    font-weight: 300;
    color: #2F3133;
}

.ideal-talent {
    margin: var(--mg-200) 0;
}

.num-title span {
    padding-top: 0.6rem;
    font-size: var(--font-18);
}

.r-card .txt-box.recruit {
    padding: 0 4.8rem;
}

@media (max-width: 1280px) {

    .ideal-talent .flex-box,
    .sec-vision-system .flex-box {
        flex-direction: column;
    }

    .ideal-talent .flex-box .business-areas,
    .sec-vision-system .flex-box .vision-box {
        width: 100%;
    }

    .ideal-talent .title-box-sub,
    .sec-vision-system .title-box-sub {
        position: static;
    }
}

@media (max-width: 1023px) {

    .r-card .txt-box.recruit,
    .ideal-talent .r-card .txt-box {
        padding: 2rem;
    }

    .core-row.row-top,
    .core-row.row-bottom {
        flex-direction: column;
        align-items: flex-start;
        padding: 4rem 3rem;
        height: auto;
    }

    .core-row .row-title {
        margin-bottom: 3rem;
        width: 100%;
        text-align: center;
    }

    .spirit-list,
    .conduct-list {
        width: 100%;
        gap: 1.5rem;
        padding: unset;
    }

    .conduct-list li {
        padding: 1rem 0;
    }

    .badge-blue {
        height: 6.4rem;
    }

    /* 모바일에서는 세로 구분선 숨김 */
    .conduct-list li:not(:last-child)::after,
    .conduct-list li:first-child::before,
    .conduct-list li::after {
        top: unset;
        right: unset;
        left: 50%;
        transform: translateX(-50%);
        width: 6px;
        height: 1px;
        bottom: -15%;
    }

    .ideal-talent .r-card {
        height: unset;
    }

    .ideal-talent .r-card .img-box {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .sub-common-top.idealTalent {
        background: url("/static/kor/images/customer/idealTalent-visual-mob.jpg") no-repeat center/cover;
    }

    .philosophy-grid {
        grid-template-columns: 1fr;
        gap: .8rem;
        margin-bottom: .8rem;
    }

    .ideal-talent .r-card .txt-box p {
        padding-left: 2rem;
    }

    .phil-card .card-head {
        line-height: 5.8rem;
        padding-left: 2rem;
    }

    .phil-card .card-body {
        padding: 1.6rem 2rem;
    }

    .core-row.row-top,
    .core-row.row-bottom {
        padding: 2.4rem 2rem;
    }

    .spirit-list,
    .conduct-list {
        gap: .8rem;
    }

    .badge-blue {
        padding: .8rem 0.4rem;
        flex-direction: column;
        height: auto;
        gap: .4rem;
        font-size: var(--font-14);
        line-height: 1.2;
        text-align: center;
        justify-content: center;
        word-break: keep-all;
    }

    .badge-blue img {
        width: 3.2rem;
        margin: 0 auto;
    }

    .conduct-list li {
        padding: unset;
    }

    .title-box-sub>span {
        padding-top: 1.6rem;
    }

    .arrow-down-divider {
        margin: 0 auto 1.6rem;
        height: 3.2rem;
    }

    .arrow-down-divider img {
        height: 100%;
    }

    .core-row .row-title {
        margin-bottom: 2.4rem;
    }

    .conduct-list {
        flex-direction: column;
        align-items: center;
    }

    .conduct-list li.middle-line {
        flex: unset;
        width: 6px;
        height: 1px;
        background: #CBCCCA;
    }

    .ideal-talent .r-card .img-box {
        height: 24.6rem;
    }

    .num-title span.employment {
        padding-top: .3rem;
    }
}

@media (max-width: 580px) {
    .vision-header {
        margin-bottom: 1.2rem;
    }
}