/* 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:6rem;
      margin-left: 1.5rem;
      padding-bottom:0.4rem;
      border-bottom: solid 0.1rem black;
      display:flex;
      justify-content: space-between;
      align-items:flex-end;
      position:relative;
      z-index: 100;
     }

     .logo{
      width:6rem;
      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:absolute;
    width:100%;
    height:auto;
    top:3rem;
   }

   .recruit_image_wrapper video{
    position:relative;
    width:100%;
    height:auto;
   }



     .background{
      width:100%;
      height:100%;
      position:absolute;
      background: var(--color-kizumi);
      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_bg{
      width:100%;
      height:100%;
      position:absolute;
      backdrop-filter:blur(1rem);
      -webkit-backdrop-filter:blur(1rem);
    }

    .recruit_content_table_container{
      width:100%;
      padding:3.6rem 1.5rem 5.6rem;
      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;
  }
    


}