@keyframes recruit_detail_text_on{
    from{
        opacity:0;
        transform:translateY(-2.4rem);
        padding-bottom:0;
    }
    to{
        opacity:1;
        transform:translateY(0);
        padding-bottom:0.6rem;
    }
}

@keyframes recruit_detail_text_off{
    from{
        opacity:1;
        transform:translateY(0);
        padding-bottom:0.6rem;
    }
    to{
        opacity:0;
        transform:translateY(-2.4rem);
        padding-bottom:0;
    }
}


@keyframes recruit_detail_text_on_tablet{
    from{
        opacity:0;
        transform:translateY(-2.4rem);
        padding-bottom:0;
    }
    to{
        opacity:1;
        transform:translateY(0);
        padding-bottom:0.8rem;
    }
}

@keyframes recruit_detail_text_off_tablet{
    from{
        opacity:1;
        transform:translateY(0);
        padding-bottom:0.8rem;
    }
    to{
        opacity:0;
        transform:translateY(-2.4rem);
        padding-bottom:0;
    }
}



@keyframes arrow_open_animation{
    from{
        opacity:0;
        transform:translateY(-30%) scaleY(0.5);
    }
    to{
        opacity:1;
        transform:translateY(0) scaleY(1);
    }  
}

@keyframes arrow_close_animation{
    from{
        opacity:0;
        transform:translateY(50%) scaleY(0.5);
    }
    to{
        opacity:1;
        transform:translateY(0) scaleY(1);
    }
}









/* 마우스호버, 클릭 애니메이션 */





@keyframes text_trans{
    from{
        transform:translateX(0);
    }
    50%{
        transform:translateX(1rem);
    }
    to{
        transform:translateX(0);
    }
}

@keyframes text_trans02{
    from{
        transform:translateX(0);
    }
    50%{
        transform:translateX(1.2rem);
    }
    to{
        transform:translateX(0);
    }
}


.contact_document_text_roll{
    animation:text_trans 0.4s ease-out;
  }

  .contact_document_text_roll02{
    animation:text_trans02 0.3s ease-out;
  }  




@keyframes opacity_on{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

.background_on{
    animation:opacity_on 0.3s ease-in-out both;
}

.background_on_mo{
    animation:opacity_on 0.24s ease-out both;
}






.mail_arrow_on{
    animation :opacity_on 0.24s ease-in-out both;
}

@keyframes opacity_off{
    from{
        opacity:1;
    }
    to{
        opacity:0;
    }
}

.background_off{
    animation:opacity_off 0.2s ease-in-out both;
}



@keyframes translateArrow{
    from{
        transform:translateX(0);
    }
    50%{
        transform:translateX(-1rem);
    }
    to{
        transform:translateX(0);
    }
}

@keyframes translateArrow02{
    from{
        transform:translateX(0);
    }
    50%{
        transform:translateX(-1.2rem);
    }
    to{
        transform:translateX(0);
    }
}



.arrow_transform{
    animation:translateArrow 0.4s ease-out;
}

.arrow_transform02{
    animation:translateArrow02 0.3s ease-out;
}










/* 로고 클릭 애니메이션 */

@keyframes text_bounce{
    from{
        transform:translateY(-0.6rem);
    }
    50%{
        transform:translateY(-1.5rem);
    }
    to{
        transform:translateY(0);
    }
}



.text_bounce{
    animation:text_bounce 0.4s ease-out both;
}



 @keyframes text_bounce_mo{
    from{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-1rem);
    }
    to{
        transform:translateY(0);
    }
 }

 .text_bounce_mo{
    animation:text_bounce_mo 0.4s ease-out both;
 }


 @keyframes bounce_s{
    from{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-0.6rem);
    }
    to{
        transform:translateY(0);
    }
 }

 .bounce_s{
    animation:bounce_s 0.4s ease-out both;
 }

 @keyframes bounce_ss{
    from{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-0.3rem);
    }
    to{
        transform:translateY(0);
    }
 }

 .bounce_ss{
    animation:bounce_ss 0.4s ease-out both;
 }

/* langpage */


@keyframes trans_opa{
    from{
        opacity:0;
        transform:translateY(100%);
    }
    to{
        opacity:1;
        transform:translateY(80%);
    }
}

.lang_back{
    animation:trans_opa 0.3s ease-out both;
}


@keyframes trans_opa_re{
    from{
        opacity:1;
        transform:translateY(80%);
    }
    to{
        opacity:0;
        transform:translateY(100%);
    }
}

.lang_back_off{
    animation:trans_opa_re 0.3s ease-out both;
}


@keyframes lang_click{
    from{
        transform:translateY(-0.6rem);
        color:var(--color-black);
    }
    50%{
        transform:translateY(-1.8rem);
        color:var(--color-black);
    }
    to{
        transform:translateY(0);
        color:var(--color-base);
    }
}

.lang_click{
    animation:lang_click 0.4s ease-out both;
}



@keyframes click_back{
    from{
        opacity:1;
        transform:translateY(80%);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}


.click_back{
    animation:click_back 0.3s ease-out 0.1s both;
}



/* 오픈애니메이션 */

@keyframes popup{
    from{
        opacity:0;
        transform:translateY(12rem);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes popup5rem{
    from{
        transform:translateY(5rem);
        opacity:0;
    }
    to{
        transform:translateY(0);
        opacity:1;
    }
}

.popup{
    animation:popup 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

.popup5rem{
    animation:popup5rem 0.3s ease-out 0.3s both;
}

@keyframes wave{
    from{
        opacity:1;
        transform:translateY(0);
    }
    50%{
        opacity:1;
        transform:translateY(2rem);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.wave{
    animation:wave 1.8s ease-in-out infinite;
}

@keyframes scaleY{
    from{
        transform:scaleY(0);
        transform-origin:bottom;
    }
    to{
        transform:scaleY(1);
        transform-origin:bottom;
    }
}

.scaleY{
    animation:scaleY 0.4s ease-in 0.3s both;
}

@keyframes scaleY04{
    from{
        transform:scaleY(0);
        opacity:0;
    }
    to{
        transform:scaleY(1);
        opacity:1;
    }
}

@keyframes scaleY02{
    from{
        transform:scaleY(0.7);
        transform-origin:bottom;
        opacity:0;
    }
    to{
        transform:scaleY(1);
        transform-origin:bottom;
        opacity:1;
    }
}

@keyframes scaleY03{
    from{
        transform:translateX(5%)scaleY(0.8);
        opacity:0;
        transform-origin:bottom;
    }
    to{
        transform:translateX(5%)scaleY(1);
        opacity:1;
        transform-origin:bottom;
    }
}
@keyframes borderOn{
    from{
        border-bottom: 0.2rem solid rgba(0,0,0,0);
    }
    to{
        border-bottom:0.2rem solid var(--color-black);
    }
}

@keyframes border01{
    form{
        border-bottom:0.1rem solid rgba(0,0,0,0);
    }
    to{
        border-bottom:0.1rem solid var(--color-black);
    }
}

.borderOn{
    animation:borderOn 0.4s ease-in-out 0.2s both;
}

@keyframes popup300{
    from{
        transform:translateY(300%);
        opacity:0;
    }
    to{
        transform:translateY(0);
        opacity:1;
    }
}

.popup300{
    animation:popup300 0.4s ease-in both;
}


@keyframes popup02{
    from{
        transform:translateY(300%)translateX(0.6rem);
        opacity:0;
    }
    to{
        transform:translateY(0)translateX(0.6rem);
        opacity:1;
    }
}

.popup02{
    animation:popup02 0.4s ease-in both;
}

@keyframes popupbase{
    from{
        transform:translateY(100%);
        opacity:0;
    }
    to{
        transform:translateY(0);
        opacity:1;
    }
}

.popupbase{
    animation:popupbase 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s both;
}

@keyframes scaleOn{
    from{
        transform:scaleY(0.9);
        opacity:0;
        transform-origin:bottom;
    }
    to{
        transform:scale(1);
        opacity:1;
        transform-origin:bottom;
    }
}

@keyframes scaleY05{
    from{
        transform:scaleY(0.5);
        opacity:0;
    }
    to{
        transform:scaleY(1);
        opacity:1;
    }
}

@keyframes scaleY06{
    from{
        transform:translateY(5rem) scaleY(0.7);
        opacity:0
    }
    to{
        transform:translateY(0) scaleY(1);
        opacity:1;
    }
}


/* @keyframes scaleY07{
    from{
        transform:translateY(50%) scaleY(0.7);
        opacity:0;
    }
    to{
        transform:translateY(0) scaleY(1);
        opacity:1;
    }
} */

@keyframes translate{
    from{
        transform:translateY(120%);
    }
    to{
        transform:translateY(0);
    }
}

@keyframes translate110{
    from{
        transform:translateY(130%);
    }
    to{
        transform:translateY(0);
    }
}

@keyframes translate-100{
    from{
        transform:translateY(0);
        opacity:0;
    }
    to{
        transform:translateY(-100%);
        opacity:1;
    }
}

@keyframes translate50{
    from{
        transform:translateY(50%);
        opacity:0;
    }
    to{
        transform:translateY(0);
        opacity:1;
    }
}

@keyframes scalereverse{
    from{
        transform:scaleY(1);
        opacity:1;
        transform-origin:top;
    }
    to{
        transform:scaleY(0);
        opacity:0;
        transform-origin:top;
    }
}

@keyframes translatereverse{
    from{
        transform:translateY(0);
        opacity:1;
    }
    to{
        transform:translateY(-5rem);
        opacity:0;
    }
}



@keyframes recruit_main{
    from{
        transform:translateY(7rem) scaleY(0.6);
        opacity:0;
    }
    to{
        transform:translateY(0) scaleY(1);
        opacity:1;
    }
}

@keyframes fx_line_ani{
    from{
        transform:translateY(6rem) scaleX(0);
    }
    to{
        transform:translateY(0) scaleX(1);
    }
}