/* font-family: "Source Code Pro", monospace; */


/* 소형 모바일 사이즈 - 320 */
@media screen and (min-width:20em){
    
    /* .cursor{
      position:absolute;
      width:20rem;
      height:20rem;
      left:0;
      top:0;
      background:var(--color-gradation);
      pointer-events: none;
      border-radius: 50%;
      transition:0.1s;
      transform:translate(-50%,-50%);
      mix-blend-mode:difference;
      z-index: 9999;
    }
     */


     .top_bar{
      width:calc(100% - 3rem);
      height:5rem;
      margin-left: 1.5rem;
      padding-bottom:0.6rem;
      border-bottom: solid 0.1rem black;
      display:flex;
      justify-content: space-between;
      align-items:flex-end;
      position:relative;
     }

     .logo{
      width:14.2rem;
      height:auto;
      position:relative;
     }

     .logo img{
      width:100%;
      height:100%;
     }

     .menu{
      font-size: 1.9rem;
      font-weight:500;
      display:flex;
      align-items: center;
     }
     .top_center{
      display:none;
     }
     

     .recruit_logo{
      z-index: 200;
     }

     .recruit_back{
      z-index: 300;
     }





    .recruit_image_wrapper{
      position:relative;
      width:calc(100vw - 3rem);
      margin-left: 1.5rem;
      height:auto;
      margin-top:5.6rem;
      margin-bottom:32vw;
      display:flex;
      justify-content: center;
    }

    .recruit_upper{
      position:absolute;
      top:0;
      left:0;
      display:flex;
      flex-direction: column-reverse;
      align-items: flex-start;
      width:100%;
      height:auto;
    }

    .kj_glovice_text{
      width:100%;
      height:auto;
      display:flex;
      justify-content: left;
      align-items: center;
    }

    .kj_glovice_text p{
      font-size: clamp(3.2rem, 9.8vw, 3.7rem);
      font-weight: 750;
      color:var(--color-green);
      padding-right: 0.4rem;
    }

    .fx_graffiti{
      width:30.62vw;
      height:auto;
      position:relative;
    }

    .fx_graffiri img{
      width:100%;
      height:100%;
    }


    .fx_line{
      display:none;
      transform:translateY(6rem) scaleX(0);
      transform-origin:left center;
    }

    .keyword_container{
      display:flex;
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 6.8rem;
    }

    .keyword_upper{
      display:flex;
    }

    .keyword_down{
      display:flex;
      margin-top:0.4rem;
    }
    
    .keyword p{
      font-size: 1.4rem;
      color:var(--color-black);
      font-family:'AvenueX';
      font-weight: 550;
      padding:1.2rem 1.6rem 0.8rem 1.6rem;
    }

    .keyword{
      border:solid 0.1rem black;
      border-radius:2.2rem;
      margin-right: 0.4rem;
    }

    .keyword03,.keyword05{
      margin-right: 0;
      border:none;
    }

    .keyword03 p,.keyword05 p{
      color:white;
    }

    .keyword03{
      background-color: var(--color-green);
    }

    .keyword05{
      background-color: var(--color-navy);
    }


    .careers_image_wrapper{
      position:relative;
      width:clamp(34.4rem, 107vw, 39rem);
      height:clamp(10.2rem, 31vw, 11.6rem);
      display:flex;
      margin-top:17.3rem;
      margin-bottom:3.3rem;
    }

    .careers_image_container{
      position:relative;
      width:clamp(34.4rem, 107vw, 39rem);
      height:clamp(10.2rem, 31vw, 11.6rem);
    }

    .careers_touch{
      position:absolute;
      width:100%;
      z-index: 500;
      transition:all 1s ease-in-out;
    }

    .careers{
      position:absolute;
      transform:translateY(40%);
      opacity:0;
    }

    .careers img{
      width:100%;
      height:auto;
    }

    .careers01{
      width:24.92%;
      left:0;
      z-index: 100;
    }

    .careers02{
      width:25.62%;
      left:11.24%;
      z-index: 101; 
    }
    .careers03{
      width:29.56%;
      left:23.71%;
      z-index: 107;
    }
    .careers04{
      width:24.92%;
      left:39.82%;
      z-index: 106;
    }
    .careers05{
      width:24.92%;
      left:51.18%;
      z-index: 105;
    }
    .careers06{
      width:28.34%;
      left:61.97%;
      z-index: 104;
    }
    .careers07{
      width:23.3%;
      right:0;
      z-index: 103;
      top:1rem;
    }




    .recruit_down{
      position:absolute;
      display:flex;
      justify-content: flex-end;
      align-items: center;
      width:100%;
      bottom:0;
    }

    .smile_img{
      width:5.2rem;
      height:auto;
      padding-right:0.4rem;
    }

    .recruit_down_text p{
      font-size: 10.4vw;
      color: var(--color-navy);
      font-weight: 900;
    }


    .open_ani{
      transform:translateY(7rem) scaleY(0.6);
      opacity:0;
      transform-origin:center bottom;
    }





     .background{
      width:100%;
      height:100%;
      position:absolute;
      background: var(--color-gradation);
      opacity:0;
    }
   

    .recruit_title{
      width:calc(100% - 3rem);
      margin-left:1.5rem;
      height:9rem;
      font-size: clamp(5.2rem, 15.5vw, 5.6rem);
      display:flex;
      justify-content: flex-start;
      align-items: center;
      font-weight: 600;
      border-bottom:0.2rem solid rgba(0,0,0,0);
      overflow: hidden;
    }

    .recruit_title p{
      transform:translateY(100%);
      transition:all 0.6s ease-out;
    }



    .recruit_container{
      font-family: 'PretendardJP Variable';
      width:100%;
      padding:0 1.5rem 10rem;
      transition:all 0.6s ease-in-out;
    }

    .recruit_detail_content_container{
      width:100%;
      margin-top:6.8rem;
      display:grid;
      height:auto;
      transition:all 0.6s ease-in-out;
      /* transform:translateY(5rem);
      opacity:0; */
    }

    .recruit_detail_title{
      grid-row:1;
      width:100%;
      font-size:1.8rem;
      font-weight: 650;
      padding-bottom: 1rem;
    }

    .recruit_detail_table_container{
      grid-row:2;
      width:100%;
      border-top:0.3rem solid black;
      transition:all 0.6s ease-in-out;
    }

    .recruit_detail_table_li{ 
      width:100%;
      height:8rem;
      border-bottom: 0.1rem solid black;
      transition:padding 0.6s cubic-bezier(0.25, 1, 0.5, 1), height 0.4s ease-out 0.2s;
      padding-bottom:0;
      box-sizing: content-box;
    }

    .recruit_detail_table_li_title{
      width:100%;
      height:4.8rem;
      display:flex;
      justify-content:flex-start;
      align-items: center;
      padding-right: 1rem;
      font-size:1.7rem;
      font-weight: 500;
      transition:all 0.6s ease-in-out;
      position:relative;
    }


    .recruit_detail_table_li_arrow_open::before{
      content:'';
      position:absolute;
      width:calc(100% + 0.2rem);
      height:calc(100% + 0.2rem);
      top:-0.1rem;
      left:-0.1rem;
      border:0.1rem solid black; 
      border-radius:50%;
      clip-path:circle(50% at center);
    }

    .recruit_detail_table_li_arrow_open img{
      width:1.4rem;
      height:2.3rem;
    }

    .recruit_detail_table_li_arrow_open{
      width:3rem;
      height:3rem;
      display:flex;
      justify-content: center;
      align-items: center;
      position:absolute;
      right:1rem;
      transition:all 0.6s ease-in-out;
      transform-origin : center bottom;
    }

  

    .recruit_detail_table_li_arrow_close{
      width:3rem;
      height:3rem;
      border-radius:50%;
      background-color: var(--color-black);
      display:none;
      opacity:0;
      transform:translateY(-30%) scaleY(0.3);
      justify-content: center;
      align-items: center;
      transition:all 0.6s ease-in-out;
      animation:arrow_open_animation 0.8s cubic-bezier(0.25, 1, 0.5, 1) both;
      transform-origin : center top;
      position:absolute;
      right:1rem;
    }

    
    .recruit_detail_table_li_open_touch{
      width:calc(100vw - 3rem);
      height:4.8rem;
      position:absolute;
      top:-0.9rem;
      right:-1rem;
      z-index: 1400;
      transition:all 0.6s ease-in-out;
    }

    .recruit_detail_table_li_close_touch{
      width:calc(100vw - 3rem);
      height:4.8rem;
      position:absolute;
      top:-0.9rem;
      right:-1rem;
      z-index: 1500;
      transition:all 0.6s ease-in-out;
    }

    .recruit_detail_table_li_arrow_close img{
      width:1.4rem;
      height:2.3rem;
    }



    .recruit_detail_table_text_container{
      display:none;
      width:fit-content;
      height:fit-content;
      padding:3.2rem 1rem 3rem; 
      transition:all 0.6s ease-in-out;
      box-sizing: border-box;
    }

    .recruit_detail_table_text_li{
      font-size: 1.6rem;
      line-height:2.2rem;
      font-weight:450;
      padding-bottom:0.6rem;
      opacity:0;
      transition:height 0.6s ease-in-out;
    }


    .recruit_detail_table_text_li img{
      width:0.9rem;
      height:1.4rem;
      box-sizing: content-box;
      padding-right: 0.5rem;
      transition:all 0.6s ease-in-out;
    }


    .recruit_button_container{
      width:100%;
      grid-row:3;
      display:flex;
      justify-content: flex-end;
      transition:all 0.6s ease-in-out;
    }


    .recruit_button{
      width:18rem;
      height:4.8rem;
      background-color: var(--color-black);
      font-size: 2rem;
      font-weight: 550;
      color: var(--color-base);
      display:flex;
      justify-content: center;
      align-items: center;
      margin-top: 3.8rem;
      transition:all 0.6s ease-in-out;
      position:relative;
      user-select: none;
    }

    .button_back{
      position:absolute;
      width:100%;
      height:100%;
      top:0;
      left:0;
      background:var(--color-gradation);
      opacity:0;
      user-select: none;
    }

    .recruit_button p{
      z-index: 900;
    }





    /* recruit_main_page */






    .recruit_content_container{
      width:100%;
      height:fit-content;
      position:relative;
    }

    .recruit_content_table_container{
      width:100%;
      padding:0 1.5rem 7rem;
      position:relative;
      opacity:0;
      transform:translateY(5rem);
    }

    .recruit_content_table_title{
      width:100%;
      border-top:0.3rem solid black;
      border-bottom:0.3rem solid black;
      height:4rem;
      font-size: 1.8rem;
      font-weight: 900;
      display:flex;
      justify-content: flex-start;
      align-items: center;
    }
    .recruit_content_table{
      width:100%;
      height:fit-content;
      position:relative;
      font-family: 'PretendardJP Variable';
    }

    .recruit_content_table_li{
      width:100%;
      height:7.2rem;
      display:flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 0.1rem solid black;
      position:relative;
      transform:scaleY(0);
    }

    .recruit_content_table_li_text{
      font-size: 1.7rem;
      line-height: 2rem;
      font-weight: 500;
      z-index: 1500;
      display:flex;
      justify-content: flex-start;
      align-items: center;
    }

    .recruit_content_table_li_arrow{
      width:3rem;
      height:3rem;
      border-radius: 50%;
      background-color:var(--color-black);
      display: flex;
      justify-content: center;
      align-items: center;
      clip-path: circle(50% at center);
      z-index: 1400;
    }
  
    .recruit_content_table_li_arrow img{
      width:2.1rem;
      height:1.3rem;
      position:absolute;
    }

  .recruit_content_table_li_arrow img:last-child{
      opacity:0;
  }
    


}