/* 헤더 영역 */
.header-area {
    height: 8rem;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
}

.header-area.active {
    background-color: #fff;
}

.header-area.active .menu-btn {
    filter: brightness(0);
}

.header-area .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 148rem;
}

.header-area .logo {
    width: 16.5rem;
    /* filter: brightness(100); */
}

.header-area.active .logo {
    filter: none;
}

.header-area ul {
    gap: 4rem;
}

.header-area ul li a {
    font-weight: 500;
    font-size: 1.8rem;
    line-height: 1.2;
    color: #333;
}
/* .header-area ul li:nth-child(3) a,
.side-area ul li:nth-child(3) a {
    pointer-events: none;
} */

.header-area ul li a.active {
    font-weight: 700;
}

.header-area ul li a.apply {
    background-color: #014B43;
    color: #fff;
    padding: .8rem 2.4rem;
    text-align: center;
    line-height: 1.2;
    border-radius: 5rem;
    font-weight: 700;
    font-size: 1.7rem;
}

.header-area ul li a.apply:hover {
    background: linear-gradient(to right, #0A6F64, #014B43);
    /* color: #014B43; */
}

.header-area .menu-btn {
    display: none;
    width: 2.4rem;
    height: 2.4rem;
    background: url(../img/ico_menu.svg)no-repeat center/cover;
    cursor: pointer;
}

.header-area .close-btn {
    width: 2.2rem;
    height: 2.2rem;
    background: url(../img/ico_close.svg)no-repeat center/cover;
    cursor: pointer;
}
.open-txt {
    padding: .6rem 1.2rem;
    border-radius: 4rem;
    white-space: nowrap;
    top: calc(100% + 1.8rem);
}
.open-txt::before {
    position: absolute;
    content: '';
    background: url(../img/open-txt.svg)no-repeat center/cover;
    width: .8rem;
    height: .6rem;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
}
.side-area .open-txt {
    left: calc(100% + 1.2rem);
    top: 50%;
    transform: translateY(-40%);
}
.side-area .open-txt::before {
    top: 50%;
    left: -.6rem;
    transform: translateX(0) translateY(-50%) rotate(-90deg);
}

/* 사이드바 */
.side-area {
    z-index: 1000;
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    transition: 0.3s;
}

.side-area.active {
    right: 0;
}

.side-area .header-area .wrap {
    justify-content: space-between;
}

.side-area .logo-box {
    padding: 4.8rem 4rem 4.4rem;
}

.side-area .logo-box a {
    width: 17.7rem;
}

.side-area .middle-box {
    margin-top: 10vh;
    height: 100%;
}

.side-area .middle-box ul {
    gap: 3.2rem;
}

.side-area .middle-box ul li a {
    font-size: 1.8rem;
    font-weight: 500;
    display: block;
    color: #333;
    text-align: center;
    margin-top: 1.2rem;
}

.side-area .middle-box ul li a.active {
    color: #000;
    font-weight: 700;
}

.side-area .middle-box ul li .apply {
    font-size: 1.8rem;
    color: #fff;
    background-color: #014B43;
    padding: 1.2rem 2rem;
    width: 16rem;
    border-radius: 4rem;
    font-weight: 600;
}

.side-area .obj-1 {
    bottom: 1.5rem;
    height: 20%;
    right: 0;
}

/* 플로팅 버튼 */
.floating {
    width: 16rem;
    height: 16rem;
    visibility: hidden;
    opacity: 0;
    transition: .3s;
    background: rgba(218, 233, 224, 1);
    box-shadow: 0px 4px 20px 0px rgba(106, 194, 142, 0.2);
    border-radius: 50%;
    gap: .5rem;
    right: 4rem;
    bottom: 4rem;
    cursor: default;
}
.floating:hover {
    background: rgba(171, 216, 169, 1);

}
.floating.active {
    visibility: visible;
    opacity: 1;
}
.floating p {
    font-size: inherit;
    text-align: center;
}
.floating img {
    width: 6rem;
}

/* 플로팅 버튼 링크 */
.floating-btn {
    height: 6rem;
    visibility: hidden;
    opacity: 0;
    transition: .3s;
    
}

@media (max-width: 1279px) {

    .header-area {
        height: 6rem;
    }

    .header-area .logo {
        width: 10rem;
    }

    .header-area ul {
        display: none;
    }

    .header-area .menu-btn {
        display: block;
    }

    .floating {
        width: 12rem;
        height: 12rem;
    }
    .floating img {
        width: 4rem;
    }
    .floating.active {
        visibility: visible;
        opacity: 1;
    }
    .floating-btn {
        visibility: visible;
        opacity: 1;
    }
    .floating-btn.active {
        height: 5.6rem;
    }
}

@media (max-width: 768px) {

    .header-area .close-btn,
    .header-area .menu-btn {
        width: 2rem;
        height: 2rem;
    }
        .floating {
        width: 8rem;
        height: 8rem;
        right: 2rem;
        bottom: 2rem;
        gap: .2rem;
    }
    .floating p {
        font-size: 1.6rem;
    }
        .floating img {
        width: 2.4rem;
    }
    .floating-btn.active {
        height: 4.8rem;
    }
}

/* //헤더 영역 */


/* ------------------------------------------------------------------------------- */


/* 메인 비주얼 영역 */
.main-visual-area {
    overflow: hidden;
    height: 86dvh;
    border-bottom: .6rem solid #319D6F;
}
.main-visual-area .wrap {
    max-width: 140rem;
    height: 100%;
    padding-top: 20rem;
}
.main-visual-area .title-text2 {
    margin: 2rem 0 6rem 0;
}
.main-visual-area .timer {
    margin: 2rem 0 4rem 0;
    color: #014B43;
    gap: 3rem;
}
.main-visual-area .timer * {
    font-family: 'JalnanGothic';
    line-height: 1.2;
}
.main-visual-area .timer div .box div {
    width: 11.1rem;
}
.main-visual-area a {
    padding: 1.2rem 4rem;
    border-radius: 4rem;
}
.main-visual-area a:hover {
    background: linear-gradient(to right, #0A6F64, #014B43);
}
.visual {
    width: 1203px;
    height: 740px;
    left: 48.2rem;
    bottom: 0;
}
.kv-1 {
    width: 100%;
    top: 0;
    left: 0;
}
.kv-2 {
    top: 18%;
    right: 7%;
    width: 83%;
}
.kv-3 {
    top: 31%;
    right: 18%;
    width: 62%;
}
.kv-4 {
    width: 67%;
    bottom: -2.0%;
    right: 16%;
}
.kv-5 {
    width: 19%;
    top: 22%;
    left: 4%;
}
.kv-6 {
    width: 22%;
    top: 9%;
    right: 16%;
}
.kv-6 img {
    animation-delay: .3s;
}
.kv-7 {
    width: 21%;
    top: 41.2%;
    right: 39.5%;
}
.kv-8 {
    bottom: 0;
    width: 7.5%;
    left: 36.5%;
}
.kv-9 {
    bottom: 0;
    width: 6.5%;
    right: 36%;
}
.kv-door1 {
    width: 0.33%;
    bottom: 0.3%;
    left: 52%;
}
.kv-door2 {
    width: 0.33%;
    bottom: 0.3%;
    left: 52.25%;
}
.kv-door1 img {
    position: relative;
    left: 0;
    animation-duration: 2s !important;
}
.kv-door2 img {
    position: relative;
    right: 0;
    animation-duration: 2s !important;
}
.main-visual-area .timer .box .days,
.main-visual-area .timer .box .days-txt {
    font-size: 7.2rem;
}

@keyframes aniLeft {
    0% {
        left: 0;
    }
    30%,90% {
        left: -950%;
    }
    100% {
        left: 0;
    }
}
.aniLeft {
    animation: aniLeft 3s linear;
}

@keyframes aniRight {
    0% {
        right: 0;
    }
    30%,90% {
        right: -920%;
    }
    100% {
        right: 0;
    }
}
.aniRight {
    animation: aniRight 3s linear;
}

@keyframes aniRight2 {
    0% {
        transform: translateX(-130%) translateY(20%) scale(0.5);
    }
    100% {
        transform: translateX(0) translateY(0) scale(1);
    }
}
.aniRight2 {
    animation: aniRight2 1s linear;
}

@media (max-width: 1440px) {
    .main-visual-area .wrap {
        padding-top: 14rem;
    }
    .main-visual-area .title-text1 {
        font-size: 3.6rem;
    }
    .main-visual-area .title-text2 {
        font-size: 5.6rem;
        margin: 1.6rem 0 4rem 0;
    }
    .main-visual-area .title-text2 p {
        font-size: 2.8rem;
    }
    .main-visual-area .title-text3 {
        font-size: 2rem;
    }
    .main-visual-area .timer {
        margin: 1.6rem 0 3.2rem 0;
        gap: 2rem;
    }
    .main-visual-area .timer .box div,
    .main-visual-area .timer .time-circle {
        font-size: 5.6rem;
    }
    .main-visual-area .timer div .box div {
        width: 7.8rem;
    }
    .main-visual-area a {
        font-size: 2rem;
        padding: 1.1rem 3.2rem;
    }
    .visual {
        left: 42rem;
        width: 1000px;
        height: 616px;
    }
    .main-visual-area .timer .box .days {
        font-size: 5rem;
    }
    .main-visual-area .timer .box .days-txt {
        font-size: 5rem;
    }
}

@media (max-width: 1279px) {
    .main-visual-area .wrap {
        max-width: 100%;
        padding: 14rem 4rem 6rem;
    }
    .visual {
        width: 80rem;
        height: 49.067rem;
        left: auto;
        right: -4rem;
        bottom: 0;
    }
}

@media (max-width: 768px) {
    .main-visual-area .wrap {
        padding: 10rem 2rem 4rem;
    }
    .main-visual-area .title {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .main-visual-area .title-text1 {
        font-size: 2.4rem;
        text-align: center;
    }
    .main-visual-area .title-text2 {
        font-size: 3.6rem;
        line-height: 1.3;
        margin: 1.2rem 0 3rem 0;
        word-break: keep-all;
        text-align: center;
    }
    .main-visual-area .title-text2 p {
        font-size: 2.2rem;
    }
    .main-visual-area .title-text3 {
        font-size: 1.6rem;
        text-align: center;
    }
    .main-visual-area .timer {
        margin: 1.2rem 0 2.4rem 0;
        justify-content: center;
        flex-direction: column;
        gap: 0;
    }
    .main-visual-area .timer .box div,
    .main-visual-area .timer .time-circle {
        font-size: 3.2rem;
    }
    .main-visual-area .timer div .box div {
        width: 4.4rem;
    }
    .main-visual-area a {
        font-size: 1.6rem;
        padding: 1rem 2.8rem;
    }
    .visual {
        width: 60rem;
        height: 36.8rem;
        left: 50%;
        transform: translateX(-50%);
    }
    .main-visual-area .timer > .box {
        justify-content: center;
    }
    .main-visual-area .timer > .box > div {
        text-align: center;
    }
     .main-visual-area .timer .box .days,
     .main-visual-area .timer .box .days-txt {
        font-size: 2.4rem;
        line-height: 1.4;
        margin-top: 0;
        margin-bottom: .2rem;
    }
}

@media (max-width: 540px) {
    .main-visual-area .wrap {
        padding: 9rem 2rem 0 2rem;
    }
    .main-visual-area .title-text1 {
        font-size: 2.2rem;
    }
    .main-visual-area .title-text2 {
        font-size: 3.2rem;
        margin: .4rem 0 2.4rem 0
    }
    .main-visual-area .title-text2 p {
        font-size: 1.8rem;
    }
    .main-visual-area .title-text3 {
        font-size: 1.4rem;
    }
    .visual {
        width: 50rem;
        height: 30.67rem;
    }
}



/* ------------------------------------------------------------------------------- */


/* 메인 비주얼 바닥 영역 */
.main-btm-area {
    background: linear-gradient(#6CA26F 20%, #39744C 60%, #195736 92%);
}
.main-btm-area .obj-1 {
    top: 0;
    right: 0;
}
.main-btm-area .obj-2 {
    position: absolute;
    content: '';
    background: url(../img/kv-bottom-02.svg) no-repeat top / cover;
    width: 100%;
    height: 100%;
    top: 0;
}

@media (max-width: 1279px) {
    .main-btm-area p {
        font-size: 3.2rem;
    }
}

@media (max-width: 768px) {
    .main-btm-area p {
        font-size: 2.4rem;
    }
}


/* ------------------------------------------------------------------------------- */


/* 회사소개 영역 */
.work-area .wrap {
    max-width: 110rem;
}
.work-area .title-area p {
    margin-top: 3rem;
}
.work-area .card-list {
    gap: 7rem;
}
.work-area .card-row {
    z-index: 1;
}
.work-area .card-row:last-child {
    margin-left: auto;
}
.work-area .card {
    max-width: 80rem;
    padding: 4rem;
    border-radius: 2rem;
    border: .2rem solid #000;
    border-bottom-width: .4rem;
    gap: 4rem;
}
.work-area .icon {
    min-width: 12rem;
}
.work-area .obj-1 {
    top: 15.1rem;
    right: 14.4rem;
}
.work-area .obj-2 {
    bottom: 3.3rem;
    left: -6rem;
}
.work-area .img-1 {
    width: 3.8rem;
    right: 1rem;
    top: 17rem;
}
.work-area .img-2 {
    top: 11.2rem;
}
.work-area .img-3 {
    top: 89rem;
    right: 1rem;
}



.road-1 {
    top: 9rem;
    left: 3.7rem;
    /* transform: translateX(-50%); */
    width: 100%;
    max-width: 1035px;
    overflow: hidden;
}

@keyframes road1 {
    0% {
        height: 0;
        opacity: 1;
    }

    100% {
        height: 1129px;
        opacity: 1;
    }
}

.road1 {
    -webkit-animation-name: road1;
    animation-name: road1;
}

@media (max-width: 1279px) {
    .work-area .wrap {
        max-width: 82rem;
    }
    .work-area .title-area p {
        margin-top: 2.4rem;
        font-size: 1.7rem;
    }

    .work-area .card-list {
        gap: 4rem;
    }
    .work-area .card {
        max-width: 60rem;
        padding: 3rem;
        gap: 2.4rem;
        border-radius: 1.6rem;
    }
    .work-area .icon {
        min-width: 8rem;
        width: 8rem;
    }
    .work-area .card h3 {
        font-size: 2.2rem;
    }
    .work-area .card p {
        font-size: 1.6rem;
    }

    /* 배경 오브젝트는 텍스트와 겹치지 않도록 축소 */
    .work-area .obj-1 {
        top: 8rem;
        right: 2rem;
        width: 12rem;
    }
    .work-area .obj-2 {
        bottom: 0;
        left: -8rem;
        width: 20rem;
    }
    .work-area .img-1 {
        width: 3rem;
        top: 15rem;
    }
    .work-area .img-2 {
        width: 5rem;
    }
    .work-area .img-3 {
        top: 72rem;
        width: 8rem;
    }
}

@media (max-width: 768px) {
    .work-area .card-row:last-child {
        margin-left: 0;
    }
    .work-area .title-area p {
        margin-top: 2rem;
        font-size: 1.4rem;
    }

    /* 지그재그 정렬 해제 → 전부 중앙 정렬 1열 */
    .work-area .card-list {
        gap: 1.4rem;
    }
    .work-area .card-row,
    .work-area .card-row.flex-center {
        display: flex;
        justify-content: center;
    }
    .work-area .card {
        max-width: 100%;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        padding: 2.4rem;
        gap: 1.6rem;
        border-radius: 1.2rem;
        border-width: .15rem;
        border-bottom-width: .3rem;
    }
    .work-area .icon {
        min-width: 6rem;
        width: 6rem;
    }
    .work-area .card h3 {
        font-size: 1.9rem;
    }
    .work-area .card p {
        font-size: 1.4rem;
        margin-top: .8rem;
    }

    /* 배경 장식(로드, 지구, 캐릭터)은 모바일에서 시각적 혼란 방지를 위해 숨김 */
    .work-area .obj-1,
    .work-area .img-1,
    .work-area .img-2,
    .work-area .img-3,
    .work-area .road-1 {
        display: none;
    }
}


/* ------------------------------------------------------------------------------- */


/* 영상 영역 */
.video-area .ytb-box {
    border-radius: 20px;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    position: relative;
    padding-bottom: 57.25%;
}
.video-area .ytb-box iframe {
    z-index: 1;
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}
.video-area .obj {
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    left: 50%;
    transform: translateX(-50%);
}
.video-area .obj-1 {
    width: 1708px;
    height: 1708px;
    bottom: -750px;
}
.video-area .obj-2 {
    width: 1369px;
    height: 1369px;
    bottom: -580px;
}
.video-area .obj-3 {
    width: 12.1rem;
    bottom: -3.7rem;
    right: -10.6rem;
}

@media (max-width: 1279px) {
    .video-area .obj-3 {
        width: 8.1rem;
        bottom: -1.7rem;
        right: -6.6rem;
    }
    .video-area .obj-1 {
        width: 1508px;
        height: 1508px;
        bottom: -750px;
    }
    .video-area .obj-2 {
        width: 1169px;
        height: 1169px;
        bottom: -580px;
    }
}

@media (max-width: 768px) {
    .video-area .obj-3 {
        width: 4rem;
        bottom: auto;
        right: 3rem;
        top: -2rem;
    }
    .video-area .obj-1 {
        width: 1208px;
        height: 1208px;
        bottom: -650px;
    }
    .video-area .obj-2 {
        width: 869px;
        height: 869px;
        bottom: -480px;
    }
}

@media (max-width: 540px) {
    .video-area .obj-1 {
        width: 808px;
        height: 808px;
        bottom: -450px;
    }
    .video-area .obj-2 {
        width: 469px;
        height: 469px;
        bottom: -200px;
    }
}


/* ------------------------------------------------------------------------------- */


/* 온라인 채용설명회 영역 */
.online-area .title-area .sub-text {
    margin-top: 0;
    margin-bottom: .4rem;
}
.online-area .banner {
    justify-content: center;
    align-items: flex-end;
}
.online-area .info {
    gap: 2rem;
    margin-bottom: 4rem;
}
.online-area .obj-1 {
    margin-right: 6rem;
}
.online-area .info-row {
    gap: 2rem;
}
.online-area .badge {
    padding: .8rem 2rem;
    border-radius: .6rem;
    white-space: nowrap;
}
.online-area .info-content {
    padding-top: 1rem;
}
.online-area .info-note {
    /* padding-top: 1.8rem; */
}
.online-area .divider {
    background-color: #018F43;
    height: .6rem;
    width: 100%;
    margin-bottom: 4rem;
}
.online-area .obj-1 {
    top: 8rem;
    left: -11.4rem;
}
.online-area .box-cont {
    gap: 2rem;
    /* margin-bottom: 4rem; */
}
.online-area .box {
    aspect-ratio: 1/1;
    width: 16rem;
    border-radius: 1.2rem;
    background-color: #DAE9E0;
    gap: .9rem;
}
.online-area .img-event {
    width: 11rem;
}
.online-area .numb {
    right:  -.6rem;
    top: -.7rem;
    width: 5.2rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
}
.online-area .banner .building {
    margin-right: 6rem;
    /* margin-bottom: 11.6rem; */
    width: 19rem;
}

@media (max-width: 1279px) {
    .online-area .banner {
        gap: 3rem;
        padding: 0;
        justify-content: center;
    }
    .online-area .banner .building {
        width: 16rem;
        margin-right: 3rem;
        /* margin-bottom: 8.6rem; */
    }
    .online-area .img-event {
        width: 8rem;
    }
    .online-area .info {
        gap: 1.6rem;
        margin-bottom: 3rem;
    }
    .online-area .info-row {
        gap: 1.6rem;
    }
    .online-area .badge {
        font-size: 1.8rem;
        padding: .7rem 1.6rem;
        white-space: nowrap;
    }
    .online-area .info-content p {
        font-size: 1.7rem;
    }
    .online-area .info-content .event-txt {
        font-size: 1.5rem;
    }
    .online-area .numb {
        width: 4.2rem;
        font-size: 1.4rem;
    }
    .online-area .info-content {
        padding-top: .6rem;
    }
    .online-area .info-note {
        font-size: 1.4rem;
        /* padding-top: 1.2rem; */
    }
    .online-area .divider {
        height: .4rem;
        margin-bottom: 3rem;
    }
    .online-area .btn-style-1 {
        font-size: 2.2rem;
        padding: 1.6rem 0;
    }
    .online-area .box-cont {
        gap: 1.6rem;
        margin-bottom: 3rem;
    }
    .online-area .box {
        width: 12rem;
    }

    /* 배경 지구본: 축소해서 유지 */
    .online-area > .obj-1 {
        width: 30rem;
        top: 4rem;
        left: -8rem;
    }
}

@media (max-width: 768px) {

    .online-area > .obj-1 {
        width: 18rem;
        top: -2rem;
        left: -6rem;
    }
    .online-area .wrap {
        display: flex;
        flex-direction: column;
    }
    .online-area .banner {
        flex-direction: column;
        align-items: center;
        padding: 0;
        gap: 2.4rem;
    }
    .online-area .box-cont {
        gap: 1.6rem;
        margin-bottom: 2rem;
    }
    .online-area .banner .building {
        width: 8rem;
        margin-right: 0;
        order: 1;
        margin-bottom: 0;
    }
    .online-area .info {
        width: 100%;
        gap: 1.6rem;
        margin-bottom: 0;
    }
    .online-area .info-row {
        align-items: flex-start;
    }
    .online-area .badge {
        font-size: 1.5rem;
        padding: .6rem 1.4rem;
        border-radius: .5rem;
    }
    .online-area .info-content p {
        font-size: 1.5rem;
        line-height: 1.5;
    }
    .online-area .info-note {
        font-size: 1.2rem;
        /* padding-top: .8rem; */
        line-height: 1.4;
    }
    .online-area .divider {
        height: .3rem;
        margin-bottom: 2.4rem;
    }
    .online-area .btn-style-1 {
        font-size: 1.8rem;
        padding: 1.4rem 0;
        border-radius: .8rem;
    }
    .btn-style-1.pd {
        padding: 1.4rem;
    }
}

@media (max-width: 540px) {
    .online-area .info-row {
        flex-direction: column;
        gap: .8rem;
    }
    .online-area .box-cont {
        gap: 1rem;
        margin-bottom: 1rem;
    }
    .online-area .box {
        width: 10rem;
        gap: .5rem;
    }
    .online-area .img-event {
        width: 6rem;
    }
    .online-area .info-content .event-txt {
        font-size: 1.3rem;
    }
    .online-area .numb {
        width: 3.6rem;
        font-size: 1.2rem;
    }
}


/* ------------------------------------------------------------------------------- */


/* 주요 직무 영역 */
.job-area .title-area .title {
    color: #fff;
}
.job-area .grid-box {
    grid-template-columns: repeat(4,1fr);
    gap: 2rem;
}
.job-area .grid-box li {
    height: 16rem;
    border-radius: 1.2rem;
    border: .2rem solid #000;
    border-bottom: .4rem;
}
.job-area .grid-box li::after {
    position: absolute;
    content: '';
    background: url(../img/ico_plus.svg)no-repeat center/cover;
    width: 2.4rem;
    height: 2.4rem;
    bottom: 2rem;
    right: 2rem;
}
.job-area .grid-box li:hover {
    background-color: #DAE9E0;
}
.job-area .obj-bg {
    position: absolute;
    background: url(../img/kv-bottom-02.svg) no-repeat top / cover;
    width: 100%;
    height: 508px;
    bottom: -160px;
}
.job-area .obj-1 {
    opacity: .5;
    left: 10%;
    top: 21.5rem;
}
.job-area .obj-2 {
    opacity: .5;
    right: 10%;
    top: 11.2rem;
}
.job-area .obj-2 img {
    animation-delay: .3s;
}

@media (max-width: 1279px) {
    .job-area .title-area .title {
        font-size: 3.2rem;
    }

    .job-area .grid-box {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.6rem;
    }
    .job-area .grid-box li {
        height: 13rem;
        font-size: 2.2rem;
        border-radius: 1rem;
    }
    .job-area .grid-box li::after {
        width: 2rem;
        height: 2rem;
        bottom: 1.6rem;
        right: 1.6rem;
    }

    .job-area .obj-1 {
        width: 12rem;
        left: 2%;
        top: 16rem;
    }
    .job-area .obj-2 {
        width: 12rem;
        right: 2%;
        top: 8rem;
    }
    .job-area .obj-bg {
        height: 36rem;
        bottom: -10rem;
    }
}

@media (max-width: 768px) {
    .job-area .title-area .title {
        font-size: 2.4rem;
        word-break: keep-all;
    }
    .job-area .grid-box {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
    .job-area .grid-box li {
        height: 10rem;
        font-size: 1.7rem;
        border-radius: .8rem;
        border-width: .15rem;
        padding: 0 1rem;
    }
    .job-area .grid-box li::after {
        width: 1.6rem;
        height: 1.6rem;
        bottom: 1.2rem;
        right: 1.2rem;
    }

    .job-area .obj-1,
    .job-area .obj-2 {
        width: 7rem;
        top: 2rem;
    }
    .job-area .obj-1 {
        left: 1rem;
    }
    .job-area .obj-2 {
        right: 1rem;
    }
    .job-area .obj-bg {
        height: 20rem;
        bottom: -4rem;
    }
}


/* ------------------------------------------------------------------------------- */


/* 모집안내 영역 */
.recruit-area .wrap {
    max-width: 144rem;
}
.recruit-area .container {
    padding: 10rem 8rem;
    border-radius: 3.2rem;
    gap: 8rem;
}
.recruit-area h2 {
    padding-left: 1.7rem;
    border-left: .3rem solid #000;
    margin-bottom: 4rem;
}
.recruit-area .box > p {
    margin: 4rem 0;
}
.recruit-area table {
    table-layout: fixed;
}
.recruit-area table td,
.recruit-area table th {
    border: .1rem solid #000;
    padding: 1rem;
}
.recruit-area table td:first-child,
.recruit-area table th:first-child {
    border-left: none;
}
.recruit-area table td:last-child,
.recruit-area table th:last-child {
    border-right: none;
}
.recruit-area .box picture {
    display: block;
}
.recruit-area .info {
    gap: 2rem;
}
.recruit-area .info-row {
    gap: 2rem;
}
.recruit-area .badge {
    white-space: nowrap;
}
.recruit-area .box-4 h2 {
    margin-bottom: 0;
}
.recruit-area .box-4 > p {
    margin-bottom: 4rem;
}
.recruit-area .box-wrap {
    background-color: #F9F9F9;
    border-radius: 2rem;
    padding: 4rem;
    gap: 5rem;
}
.recruit-area .box-wrap .tag {
    white-space: nowrap;
    min-width: 20rem;
    height: 5.2rem;
    border-radius: 10rem;
}
.recruit-area .box-4 .info-row {
    gap: 4rem;
}
.recruit-area .info-wrap {
    gap: 2.8rem 0;
}
.recruit-area .info-wrap .line {
    height: 1px;
    background-color: #ddd;
}
.recruit-area .info-txt {
    gap: 4rem;
}
.recruit-area .info-txt-2 {
    gap: 1.2rem;
}
.recruit-area .badge-box {
    gap: 2rem;
}
.recruit-area .badge {
    padding: 1rem 2.4rem;
    border-radius: 10rem;
}

@media (max-width: 1279px) {
    .recruit-area .wrap {
        max-width: 100%;
    }
    .recruit-area .container {
        padding: 6rem 4rem;
        border-radius: 2.4rem;
        gap: 6rem;
    }
    .recruit-area h2 {
        font-size: 2.4rem;
        padding-left: 1.4rem;
        margin-bottom: 3.2rem;
    }
    .recruit-area .box-4 > p {
        margin-bottom: 3.2rem;
    }
    .recruit-area table td,
    .recruit-area table th {
        font-size: 1.6rem;
        padding: .8rem;
    }
    .recruit-area .box > p {
        font-size: 1.8rem;
        margin: 2.8rem 0;
    }
    .recruit-area .btn-style-1 {
        font-size: 2.2rem;
        padding: 1.6rem 0;
        margin-top: -2rem;
    }
    .recruit-area .box picture {
        max-width: 54rem;
        margin: 0 auto;
    }
    .recruit-area ul li,
    .recruit-area h3,
    .recruit-area .info-txt .txt,
    .recruit-area .badge,
    .recruit-area .box-wrap .tag {
        font-size: 1.6rem;
    }
    .recruit-area .badge1 {
        font-size: 1.8rem;
    }
    .recruit-area .box-wrap {
        gap: 4rem;
        border-radius: 1.6rem;
        padding: 3.2rem;
    }
    .recruit-area .box-4 .info-row {
        flex-direction: column;
        gap: 2rem;
    }
    .recruit-area .info-wrap {
        gap: 2rem 0;
    }
    .recruit-area .box-wrap .tag {
        min-width: 18rem;
        height: 4.2rem;
    }
    .recruit-area .badge-box {
        gap: 1rem;
    }
    .recruit-area .badge {
        padding: .8rem 2rem;
    }
    .recruit-area .info-txt {
        gap: 1.2rem;
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .recruit-area .container {
        padding: 3.2rem 2rem;
        border-radius: 1.6rem;
        gap: 5rem;
    }
    .recruit-area h2 {
        font-size: 2rem;
        padding-left: 1.2rem;
        margin-bottom: 2rem;
        border-left-width: .25rem;
    }
    .recruit-area .box-4 > p {
        margin-bottom: 2rem;
    }

    /* 표는 컬럼이 7개라 좁은 화면에서 가로 스크롤 처리 */
     .recruit-area table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .3rem;
    }
    .recruit-area table::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
    .recruit-area table::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background: #319D6F;
    }
    .recruit-area table::-webkit-scrollbar-track {
        border-radius: 4px;
        background: #dbe8e2;
    }
    .recruit-area table tr {
        display: table;
        width: 100%;
        min-width: 48rem;
        table-layout: fixed;
    }
    .recruit-area .box-4 table {
        overflow-x: visible;
        padding-bottom: 0;
    }
    .recruit-area .box-4 table tr {
        min-width: auto;
    }
    .recruit-area table td,
    .recruit-area table th {
        font-size: 1.4rem;
        padding: .8rem .6rem;
        /* white-space: nowrap; */
    }
    .recruit-area .box > p {
        font-size: 1.6rem;
        margin: 2rem 0;
    }
    .recruit-area .btn-style-1 {
        font-size: 1.8rem;
        padding: 1.4rem 0;
        border-radius: .8rem;
        margin-top: -2.6rem;
    }

    /* 전형일정 스텝 이미지: HTML의 <source>가 이미 768px 이하에서 step-m.svg로 교체됨 */
    .recruit-area .box picture {
        width: 100%;
        max-width: 30rem;
    }
    .recruit-area .badge1 {
        font-size: 1.5rem;
    }
    .recruit-area ul li,
    .recruit-area h3,
    .recruit-area .info-txt .txt,
    .recruit-area .badge,
    .recruit-area .box-wrap .tag {
        font-size: 1.4rem;
    }
    
    .recruit-area .info-row {
        gap: .8rem;
        flex-direction: column;
        align-items: flex-start;
    }
    .recruit-area .box-wrap {
        padding: 2.2rem;
    }
    .recruit-area .box-wrap .tag {
        min-width: 14rem;
        height: 3.2rem;
    }
    .recruit-area .badge-box {
        flex-direction: column;
        gap: .8rem;
    }
    .recruit-area .badge-box img {
        width: 2rem;
    }
    .recruit-area .badge {
        padding: .6rem 1.6rem;
        flex-direction: column;
    }
    .recruit-area .box-4 .info-row {
        align-items: center;
    }
    .recruit-area .info-txt {
        align-items: center;
    }
    .recruit-area .info-txt .txt {
        text-align: center;
    }
    .recruit-area .dot-list li {
        word-break: break-all;
    }
    .recruit-area .dot-list li::before {
        min-width: .3rem;
        height: .3rem;
        margin-right: .6rem;
    }
}


/* ------------------------------------------------------------------------------- */


/* 시상 혜택 영역 */
.itv-area {
    border-bottom: .3rem solid #319D6F;
}
.itv-area  .wrap {
    max-width: 144rem;
}
.itv-area .story-swiper {
    overflow: visible;
  }

.itv-area .story-swiper .swiper-wrapper {
    overflow: visible;
    cursor: pointer !important;
  }

 .itv-area .story-swiper .swiper-slide {
    width: 280px;
    cursor: pointer;
  }

 .itv-area .story-swiper .swiper-slide:active {
    cursor: grabbing;
  }

 .itv-area .card {
    position: relative;
    width: 100%;
    height: 380px;
    border-radius: 12px;
    background: #E7EBE9;
    overflow: hidden;
    user-select: none;
    padding: 3.2rem;
  }
   .itv-area .card:hover {
    background: #DAE9E0;
   }

 .itv-area .card-label {
    /* background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.4)); */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3.2rem;
    display: flex;
    overflow: hidden;
    /* height: 11.4rem; */
  }

 .itv-area .card-label-track {
    display: flex;
    flex-direction: column;
    transform: translateY(0%);
    transition: transform 0.35s ease;
    /* position: absolute; */
    top: 0;
  }

 .itv-area .card-label-track span {
    display: flex;
    /* align-items: center; */
    font-size: 2.8rem;
    font-weight: 700;
    color: #16241f;
    white-space: nowrap;
    /* padding-top:3rem; */

  }
 .itv-area .card-label-track .sub {
    color: #014b43;
    padding-top: 0;
    font-weight: 500;
    font-size: 2rem;
    padding-top: .8rem;
    white-space: wrap;
    text-align: left;
  }

  /* Custom scrollbar track/drag styling */
 .itv-area .story-swiper .swiper-scrollbar {
    position: relative;
    margin-top: 50px;
    width: auto;
    height: 6px;
    background: #dbe8e2;
    border-radius: 10px;
  }
  .swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
    left: 0;
    top: auto;
    bottom: auto;
  }

 .itv-area .story-swiper .swiper-scrollbar-drag {
    background: #1e7a5f;
    border-radius: 2px;
    cursor: pointer;
  }

 .itv-area .story-swiper .swiper-scrollbar-drag:active {
    cursor: grabbing;
  }

  @media (max-width: 720px) {
   .itv-area .story-swiper .swiper-scrollbar { margin-top: 24px }
   .itv-area .story-swiper .swiper-slide { width: 190px; }
   .itv-area .card { 
        height: 270px; 
        padding: 1.8rem;
    }
   .itv-area .card-label-track span {
        font-size: 2rem;
   }
   .itv-area .card-label {
        /* height: 8.4rem; */
        padding: 1.8rem;
   }
   .itv-area .card-label-track .sub {
    font-size: 1.6rem;
   }
  }


/* ------------------------------------------------------------------------------- */


/* FAQ 영역 */
.tab-menu-box {
    gap: .8rem;
    align-items: stretch;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
        padding-bottom: .4rem;
        touch-action: pan-x;
}
.tab-menu-box::-webkit-scrollbar {
    height: .6rem;
    background-color: transparent;
}
.tab-menu-box::-webkit-scrollbar-track {
    background-color: transparent;
}
.tab-menu-box::-webkit-scrollbar-thumb {
    background-color: #319D6F;
    border-radius: 1rem;
    cursor: pointer;
}
.tab-menu-box>li {
    display: flex;
}
.tab-menu-box>li a {
    padding: 2rem;
    color: #014B43;
    border: .1rem solid #014B43;
    border-radius: .6rem;
    background-color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-user-drag: none;
    user-select: none;
    white-space: nowrap;
}
.tab-menu-box>li a:hover {
    background-color: #E6F4E6;
}
.tab-menu-box>li.active a {
    color: #fff;
    font-weight: 700;
    background-color: #319D6F;
    border: .1rem solid #319D6F;
}

.tab-cnt-box-1 {
    margin-top: 5rem;
    gap: 1.6rem;
}

.tab-cnt-box-1 .list-box {
    gap: 1.6rem;
    display: flex;
    flex-direction: column;
}

.tab-cnt-box-1 .list-box li {
    overflow: hidden;
    border-radius: 1.6rem;
    border: .2rem solid #000;
}

.tab-cnt-box-1 .list-box li .area-1 {
    background-color: #fff;
    padding: 3.2rem 6.8rem 3.2rem 2.8rem;
    font-size: 2.2rem;
    font-weight: 700;
    position: relative;
    color: #1A1A1A;
    display: flex;
    line-height: 1.6;
}

.tab-cnt-box-1 .list-box li .area-1 div {
    font-size: inherit;
    font-weight: inherit;
    color: #319D6F;
    padding-right: .8rem;
    margin-top: .6rem;
}

.tab-cnt-box-1 .list-box li .area-1::after {
    position: absolute;
    content: '';
    background: url(../img/ico_plus.svg)no-repeat center/cover;
    width: 2.7rem;
    height: 2.7rem;
    top: 50%;
    transform: translateY(-50%);
    right: 2.8rem;
}

.tab-cnt-box-1 .list-box li .area-2 {
    background-color: #EFF4EA;
    border-top: .2rem solid #000;
    display: none;
    padding: 2.8rem 2.7rem 3.2rem 5.5rem;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.6;
    color: #020202;
}

.tab-cnt-box-1 .list-box li .area-2 div,
.tab-cnt-box-1 .list-box li .area-2 a {
    line-height: inherit;
    font-size: inherit;
}
.tab-cnt-box-1 .list-box li .area-2 a:hover {
    text-decoration: underline;
}

.tab-cnt-box-1 .list-box li.active .area-1::after {
    background-image: url(../img/ico_minus.svg);
}

@media (max-width: 1279px) {
    .tab-menu-box>li a {
        font-size: 1.6rem;
        padding: 1.6rem;
    }

    .tab-cnt-box-1 {
        margin-top: 3.2rem;
        gap: 1.2rem;
    }

    .tab-cnt-box-1 .list-box {
        gap: 1.2rem;
    }

    .tab-cnt-box-1 .list-box li {
        border-radius: 1.2rem;
    }

    .tab-cnt-box-1 .list-box li .area-1 {
        padding: 2.2rem 4.8rem 2.2rem 1.8rem;
        font-size: 1.6rem;
    }

    .tab-cnt-box-1 .list-box li .area-1 div {
        font-size: 1.7rem;
        padding-right: .4rem;
        margin-top: .4rem;
    }

    .tab-cnt-box-1 .list-box li .area-2 {
        padding: 2.2rem 2.4rem 2.4rem 4rem;
        font-size: 1.4rem;
    }

    .tab-cnt-box-1 .list-box li .area-1::after {
        width: 2.4rem;
        height: 2.4rem;
        right: 2.2rem;
    }
}

@media (max-width: 768px) {
    .tab-cnt-box-1 .list-box li {
        border-radius: .8rem;
    }

    .tab-cnt-box-1 .list-box li .area-1 {
        padding: 1.5rem 4rem 1.5rem 1.5rem;
        font-size: 1.4rem;
    }

    .tab-cnt-box-1 .list-box li .area-1::after {
        width: 2.2rem;
        height: 2.2rem;
        right: 1.5rem;
    }

    .tab-cnt-box-1 .list-box li .area-1 div {
        font-size: 1.5rem;
    }

    .tab-cnt-box-1 .list-box li .area-2 {
        padding: 1.5rem;
        padding-left: 3.4rem;
        font-size: 1.3rem;
    }

    .tab-menu-box {
        width: 100%;
        border-radius: 0;
        flex-direction: row;
        /* padding: 0 2rem; */
        padding-bottom: .1rem;
        overflow-x: auto;
        /* margin-left: -2rem; */
        /* width: calc(100% + 4rem); */
    }

    .tab-menu-box>li a {
        border-bottom: .1rem solid #666;
        position: relative;
        text-align: center;
        font-size: 1.6rem;
        padding: 1.3rem;
        color: #707070;
    }
}


/* ------------------------------------------------------------------------------- */


/* 응원 영역 */
.cheer-area .wrap {
    max-width: 124rem;
    padding: 10rem 4rem;
}
.cheer-area .title-area .title {
    text-align: left;
}
.cheer-area .visual {
    width: 972px;
    height: 598px;
    left: 456px;
}

@media (max-width: 1279px) {
    .cheer-area .wrap {
        padding: 10rem 4rem;
    }
    .cheer-area .visual {
        width: 60rem;
        height: 36.8rem;
        left: auto;
        right: -4rem;
        bottom: 0;
    }
    .cheer-area .title-area img {
        width: 14rem;
     }
}

@media (max-width: 768px) {
    .cheer-area .wrap {
        padding: 6rem 2rem 20rem 2rem;
    }
    .cheer-area .visual {
        width: 40rem;
        height: 24rem;
        left: 50%;
        transform: translateX(-50%);
    }
    .cheer-area .title-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
    }
    .cheer-area .title-area .title {
        text-align: center;
    }
     /* .cheer-area .title-area br {
        display: none;
     } */
     .cheer-area .title-area img {
        width: 10rem;
     }
}


/* ------------------------------------------------------------------------------- */


/* footer 영역 */
footer {
    padding: 4rem 0;
    border-top: .6rem solid #319D6F;
}

@media (max-width: 1279px) {
    footer {
        padding: 2.4rem 0 8.8rem 0;
    }

    footer img {
        width: 8rem;
    }
}

@media (max-width: 768px) {
    footer img {
        width: 8rem;
    }
}

/* //footer 영역 */


/* ------------------------------------------------------------------------------- */


/* 모달 공통 */
.modal {
    width: 100%;
    max-width: 80rem;
    border-radius: 3rem;
    overflow: hidden;
    max-height: 80vh;
    border: .3rem solid #000;
}
.modal .close-btn {
    top: 4rem;
    right: 4rem;
}
.modal .top-bg {
    background: url(../img/kv-bottom-02.svg) no-repeat top / cover;
    width: 100%;
    height: 21.5rem;
    top: 0;
    left: 0;
    opacity: .3;
}
.modal .top-box {
    padding: 4.4rem 4rem;
}
.modal .top-box .label-g {
    z-index: 1;
    position: relative;
}
.modal .top-box .label-g >div:nth-child(2) {
    margin-top: 1rem;
    gap: 1rem;
    align-items: flex-start;
}
.modal .cont {
    padding: 6rem 4rem 12rem 4rem;
    max-height: calc(80vh - 13.6rem);
}
.modal .tab-menu {
    margin-bottom: 4rem;
}
.modal .tab-cnt li > div {
    gap: 6rem;
}
.modal .tab-cnt li {
    display: none;
}
.modal .tab-cnt li.active {
    display: flex;
}
.modal .text-g {
    gap: 1.6rem;
}
.modal .text-2 b {
    /* display: none; */
    font-weight: 400!important;
    font-size: inherit;
}
.modal .img-bg {
    opacity: .3;
    width: 95%;
    bottom: -2rem;
}

/* 직무 모달 */
.job-modal .text-2 span {
    text-decoration: underline;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* 인터뷰 모달 */
.itv-modal .cont ul li {
    /* gap: 6rem; */
    gap: 3rem;
}
.itv-modal .cont ul li .text-g:not(:last-child) {
    border-bottom: .1rem solid #319D6F;
    padding-bottom: 3rem;
}
.itv-modal .section-label {
    gap: 1rem;
}
/* .itv-modal .section-label.has-icon::before {
    position: relative;
    content: '';
    background: url(../img/ico_building.svg) no-repeat center/cover;
    width: 3.6rem;
    aspect-ratio: 1/1;
    display: block;
} */

/* ===================== */
/* Tablet: max-width 1279px */
/* ===================== */
@media (max-width: 1279px) {
    .modal {
        border-radius: 1.6rem;
        max-height: 84vh;
    }
    .modal .close-btn {
        top: 2.8rem;
        right: 2.8rem;
        width: 2.4rem;
    }
    .modal .top-bg {
        height: 16rem;
    }
    .modal .top-box {
        padding: 3.2rem 2.8rem;
    }
    .modal .section-label {
        font-size: 3rem;
        gap: .8rem;
    }
    .itv-modal .section-label.has-icon::before {
        width: 2.8rem;
    }
    .modal .cont {
        padding: 4rem 2.8rem 8rem 2.8rem;
        max-height: calc(84vh - 10.4rem);
    }
    .modal .tab-menu {
        margin-bottom: 2.8rem;
    }
    .modal .tab-cnt li > div {
        gap: 3.2rem;
    }
    .modal .text-g {
        gap: 1.2rem;
    }
    .modal .img-bg {
        width: 80%;
        bottom: -1.6rem;
    }
}

@media (max-width: 768px) {
    .modal {
        border-radius: 1.2rem;
        max-height: 95vh;
        width: 90%;
        border-width: .2rem;
    }
    .modal .close-btn {
        top: 2rem;
        right: 2rem;
        width: 2rem;
    }
    .modal .top-bg {
        height: 12rem;
    }
    .modal .top-box {
        padding: 2.4rem 2rem;
    }
    .modal .top-box .label-g p {
        font-size: 1.6rem;
    }
    .modal .section-label {
        font-size: 2.2rem;
        gap: .4rem;
    }
    .itv-modal .section-label.has-icon::before {
        width: 2rem;
    }
    .modal .cont {
        padding: 3.2rem 2rem 6rem 2rem;
        max-height: calc(95vh - 7.6rem);
    }
    .modal .tab-menu {
        margin-bottom: 2rem;
        /* flex-wrap: wrap; */
        gap: .8rem;
    }
    .modal .tab-cnt li > div {
        flex-direction: column;
        gap: 2rem;
    }
    .modal .text-g {
        gap: 1rem;
    }
    .modal .text-g .text-1 {
        font-size: 1.6rem;
    }
    .modal .text-g .text-2 {
        font-size: 1.4rem;
    }
    .modal .img-bg {
        width: 70%;
        bottom: -1rem;
    }
    .itv-modal .cont ul li {
        /* gap: 4rem; */
        gap: 2rem;
    }
    .itv-modal .cont ul li .text-g:not(:last-child) {
        padding-bottom: 2rem;
    }
}


/* =============================================================================== */
/* Event Closed Cover Page (마감 페이지) */
/* =============================================================================== */
.coverPage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #17BDFF 0%, #0C6EAC 50%, #032135 100%);
    background-size: 400% 400%;
    animation: coverPageGradient 12s ease infinite;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

@keyframes coverPageGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.coverPage .closing-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    animation: coverPageFadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.coverPage .closing-logo {
    width: 28rem;
    max-width: 80vw;
    height: auto;
    filter: brightness(0) invert(1);
    animation: coverPageFloat 4s ease-in-out infinite;
}

@keyframes coverPageFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

@keyframes coverPageFadeInUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}