@charset "utf-8";
.career-hero-section {background-image: url(/img/sub/career-hero-bg.webp);}
.benefits-section .benefits-list {margin-top: var(--space-60); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fs-30);}
.benefits-section .benefits-card {border-radius: 10px; padding: var(--fs-30); border: 1px solid var(--color-border2); background-color: var(--color-white); display: flex; flex-direction: column; align-items: flex-start; row-gap: 4px; position: relative;}
.benefits-section .benefits-card .ico-box {position: absolute; top: var(--fs-30); right: var(--fs-30);}
.benefits-section .benefits-card .num {color: var(--color-font6);}
.benefits-section .benefits-card .benefits-card-tit {color: var(--color-font1);}
.benefits-section .benefits-card .benefits-card-subtit {color: var(--color-static2);}
.benefits-section .benefits-card .benefits-card-desc {color: var(--color-font2);}
.process-section .process-top {display: flex; align-items: flex-start; column-gap: var(--space-100); justify-content: space-between;}
.process-section .info-box {max-width: 790px; flex: 1; display: flex; flex-direction: column; row-gap: var(--fs-30);}
.process-section .info-box .info-list {display: flex; width: 100%; max-width: 636px;}
.process-section .info-box .info-item {display: flex; align-items: flex-start; column-gap: var(--fs-30);}
.process-section .info-box .info-item .txt-wrap {display: flex; flex-direction: column;}
.process-section .info-box .info-item .txt-wrap .body-medium {color: var(--color-font2);}
.process-section .info-box .info-item + .info-item {padding-left: var(--fs-20); margin-left: var(--fs-20); border-left: 1px solid var(--color-border1);}
.process-section .info-box .img-wrap {width: 100%; height: auto; aspect-ratio: 790/510; border-radius: 10px; overflow: hidden;}
.process-section .info-box .img-wrap img {width: 100%; height: 100%; object-fit: cover;}

/* 채용절차 - 채용 절차 플로우 */
.process-flow-section {--flow-col-gap: var(--space-60); --flow-row-gap: var(--space-100); --flow-inset: 8px; --flow-head: 8px; background-image: url(/img/sub/process-flow-bg.webp); background-repeat: no-repeat; background-position: left center; background-size: auto 100%;}
.process-flow-section .process-flow-list {margin-top: var(--space-80); display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--flow-col-gap); row-gap: var(--flow-row-gap);}
.process-flow-section .process-flow-item {position: relative;}
.process-flow-section .process-flow-item:nth-child(4) {grid-row: 2; grid-column: 3;}
.process-flow-section .process-flow-item:nth-child(5) {grid-row: 2; grid-column: 2;}
.process-flow-section .process-flow-item:nth-child(6) {grid-row: 2; grid-column: 1;}
.process-flow-section .process-flow-card {position: relative; height: 100%; padding: var(--fs-30) var(--fs-24); border-radius: var(--fs-20); background-color: var(--color-white); box-shadow: var(--box-shadow); display: flex; flex-direction: column; align-items: center; row-gap: 6px;}
.process-flow-section .step-ico {flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: var(--fs-60); height: var(--fs-60); border-radius: 50%; background-color: var(--color-bg1);}
.process-flow-section .process-flow-tit {color: var(--color-font1); text-align: center; word-break: keep-all;}
.process-flow-section .process-flow-desc {color: var(--color-font3); text-align: center; word-break: keep-all;}
.process-flow-section .step-badge {z-index: 2; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 8px var(--fs-14); border-radius: 99px; white-space: nowrap; background-color: var(--step-color); color: var(--color-font6);}
.process-flow-section .process-flow-item:nth-child(1) {--step-color: #719EFF;}
.process-flow-section .process-flow-item:nth-child(2) {--step-color: #4B84FF;}
.process-flow-section .process-flow-item:nth-child(3) {--step-color: #246AFF;}
.process-flow-section .process-flow-item:nth-child(4) {--step-color: #0045D8;}
.process-flow-section .process-flow-item:nth-child(5) {--step-color: #01339F;}
.process-flow-section .process-flow-item:nth-child(6) {--step-color: #022368;}
.process-flow-section .process-flow-item::before,
.process-flow-section .process-flow-item::after {content: ''; display: none; position: absolute; z-index: 1;}
.process-flow-section .process-flow-item:nth-child(-n+2)::before {display: block; top: 50%; left: calc(100% + var(--flow-inset)); right: auto; width: calc(var(--flow-col-gap) - var(--flow-inset) * 2); height: 1px; background-color: var(--color-static2); transform: translateY(-50%);}
.process-flow-section .process-flow-item:nth-child(-n+2)::after {display: block; top: 50%; left: calc(100% + var(--flow-col-gap) - var(--flow-inset)); right: auto; width: var(--flow-head); height: var(--flow-head); border: 0; border-top: 1px solid var(--color-static2); border-right: 1px solid var(--color-static2); transform: translate(-100%, -50%) rotate(45deg);}
.process-flow-section .process-flow-item:nth-child(3)::before {display: block; top: 100%; left: 50%; right: auto; width: 1px; height: var(--flow-row-gap); background-color: var(--color-static1); transform: translateX(-50%);}
.process-flow-section .process-flow-item:nth-child(4)::before,
.process-flow-section .process-flow-item:nth-child(5)::before {display: block; top: 50%; left: auto; right: calc(100% + var(--flow-inset)); width: calc(var(--flow-col-gap) - var(--flow-inset) * 2); height: 1px; background-color: var(--color-static1); transform: translateY(-50%);}
.process-flow-section .process-flow-item:nth-child(4)::after,
.process-flow-section .process-flow-item:nth-child(5)::after {display: block; top: 50%; left: auto; right: calc(100% + var(--flow-col-gap) - var(--flow-inset)); width: var(--flow-head); height: var(--flow-head); border: 0; border-bottom: 1px solid var(--color-static1); border-left: 1px solid var(--color-static1); transform: translate(100%, -50%) rotate(45deg);}

@media screen and (max-width: 1024px) {
    .benefits-section .benefits-list.employee {grid-template-columns: repeat(1, 1fr);}
    .benefits-section .benefits-list.benefits {grid-template-columns: repeat(2, 1fr);}
    .process-section .process-top {flex-direction: column; row-gap: 40px;}
    
    .process-flow-section {--flow-col-gap: var(--fs-40); --flow-row-gap: var(--space-100);}
    .process-flow-section .process-flow-list {grid-template-columns: repeat(2, 1fr);}
    .process-flow-section .process-flow-item:nth-child(1) {grid-row: 1; grid-column: 1;}
    .process-flow-section .process-flow-item:nth-child(2) {grid-row: 1; grid-column: 2;}
    .process-flow-section .process-flow-item:nth-child(3) {grid-row: 2; grid-column: 2;}
    .process-flow-section .process-flow-item:nth-child(4) {grid-row: 2; grid-column: 1;}
    .process-flow-section .process-flow-item:nth-child(5) {grid-row: 3; grid-column: 1;}
    .process-flow-section .process-flow-item:nth-child(6) {grid-row: 3; grid-column: 2;}
    .process-flow-section .process-flow-item:nth-child(n)::before,
    .process-flow-section .process-flow-item:nth-child(n)::after {display: none;}
    .process-flow-section .process-flow-item:nth-child(1)::before,
    .process-flow-section .process-flow-item:nth-child(5)::before {display: block; top: 50%; left: calc(100% + var(--flow-inset)); right: auto; width: calc(var(--flow-col-gap) - var(--flow-inset) * 2); height: 1px; background-color: var(--color-static2); transform: translateY(-50%);}
    .process-flow-section .process-flow-item:nth-child(1)::after,
    .process-flow-section .process-flow-item:nth-child(5)::after {display: block; top: 50%; left: calc(100% + var(--flow-col-gap) - var(--flow-inset)); right: auto; width: var(--flow-head); height: var(--flow-head); border: 0; border-top: 1px solid var(--color-static2); border-right: 1px solid var(--color-static2); transform: translate(-100%, -50%) rotate(45deg);}
    .process-flow-section .process-flow-item:nth-child(2)::before,
    .process-flow-section .process-flow-item:nth-child(4)::before {display: block; top: 100%; left: 50%; right: auto; width: 1px; height: var(--flow-row-gap); background-color: var(--color-static1); transform: translateX(-50%);}
    .process-flow-section .process-flow-item:nth-child(3)::before {display: block; top: 50%; left: auto; right: calc(100% + var(--flow-inset)); width: calc(var(--flow-col-gap) - var(--flow-inset) * 2); height: 1px; background-color: var(--color-static1); transform: translateY(-50%);}
    .process-flow-section .process-flow-item:nth-child(3)::after {display: block; top: 50%; left: auto; right: calc(100% + var(--flow-col-gap) - var(--flow-inset)); width: var(--flow-head); height: var(--flow-head); border: 0; border-bottom: 1px solid var(--color-static1); border-left: 1px solid var(--color-static1); transform: translate(100%, -50%) rotate(45deg);}
}

@media screen and (max-width: 768px) {
    .benefits-section .benefits-list.benefits {grid-template-columns: repeat(1, 1fr);}
    
    .process-flow-section {--flow-row-gap: var(--space-80);}
    .process-flow-section .process-flow-list {grid-template-columns: repeat(1, 1fr);}
    .process-flow-section .process-flow-item:nth-child(n) {grid-row: auto; grid-column: auto;}
    .process-flow-section .process-flow-item:nth-child(n)::before,
    .process-flow-section .process-flow-item:nth-child(n)::after {display: none;}
    .process-flow-section .process-flow-item:nth-child(-n+5)::before {display: block; top: 100%; left: 50%; right: auto; width: 1px; height: calc(var(--flow-row-gap) - var(--flow-inset)); background-color: var(--color-static1); transform: translateX(-50%);}
    .process-flow-section .process-flow-item:nth-child(-n+5)::after {display: block; top: calc(100% + var(--flow-row-gap) - var(--flow-inset)); left: 50%; right: auto; width: var(--flow-head); height: var(--flow-head); border: 0; border-bottom: 1px solid var(--color-static1); border-right: 1px solid var(--color-static1); transform: translate(-50%, -100%) rotate(45deg);}
}

@media screen and (max-width: 600px) {
    .process-section .info-box .info-list {flex-direction: column;}
    .process-section .info-box .info-item + .info-item {margin-left: 0; padding-left: 0; margin-top: 20px; padding-top: 20px; border-left: 0; border-top: 1px solid var(--color-border1);}
}