@charset "utf-8";

/* ----- page_image ----- */
.recruit .page_image{
  background: url('https://twinny.ai/assets/img/recruit_image.png') no-repeat center / cover;
  position: relative;
  z-index: 0;
}
.recruit .page_image::before{
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background-color: #fff;
  opacity: 0.3;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.recruit .page_image span, .recruit .page_image p,
.recruit .btn_inquire.btn_greeting{
  z-index: 2;
}
.btn_inquire.btn_greeting{
  position: absolute;
  top: 100%;
  left: 100%;
  transform: translate(-80%, -80%);
}

/* ----- welfare ----- */
.welfare{
  margin-top: -130px;
  padding-top: 130px;
  padding-bottom: 100px;
  background-color: #fff;
}
.welfare_container{
  width: 100%;
  height: 120px;
  background-color: #fff;
  border-top: 1px solid #414EAC;
  border-bottom: 1px solid #414EAC;
  overflow: hidden;
}
.welfare_wrap{
  width: calc(2000px * 3);
  height: 100%;
  display: flex;
  align-items: center;
}
.welfare_list{
  width: 2000px;
  display: flex;
  justify-content: space-around;
}
.welfare_list > div{
  width: auto;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.welfare_list > div span{
  margin-bottom: 3px;
  font-size: 1.25rem;
  font-weight: 800;
}
.welfare_list > div p{
  font-size: 1rem;
}

/* ----- ability ----- */
.ability{
  margin-bottom: 100px;
}
.ability_box{
  height: auto;
  background-color: #fff;
  border-top: 1px solid #414EAC;
  border-bottom: 1px solid #414EAC;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.ability_content{
  text-align: left;
}
.ability_content:nth-child(2){
  border-left: 1px solid #414EAC;
  border-right: 1px solid #414EAC;
}
.ability_content em{
  margin-bottom: 0.5rem;
  color: #414EAC;
  font-size: 1.8rem;
  font-weight: 600;
  font-style: normal;
  display: inline-block;
}
.ability_content p{
  line-height: 1.3;
}
@media (max-width: 1024px){
  .ability_box{
    grid-template-columns: 1fr;
  }
  .ability_content:nth-child(2){
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-top: 1px solid #414EAC;
    border-bottom: 1px solid #414EAC;
  }
  .ability_content, .ability_content em{
    text-align: center;
  }
  .ability_content p{
    width: 100%;
    margin: 0 auto;
  }
  .ability_content em{
    font-size: 1.5rem;
  }
}
@media (max-width: 768px){
  .ability .content_title {
    width: 250px;
    margin: auto;
  }
  .ability_content em{
    text-align: center;
  }
}

/* ----- quickmenu ----- */
.quickmenu{
  padding-bottom: 120px;
  background-color: #F5F6FB;
}
.content_detail{
  margin: -30px auto 10px auto;
  font-size: 1.25rem;
  text-align: center;
}
/* .recruit .btn_detail{
  margin: 0 auto 50px auto;
  text-align: center;
  display: flex;
} */

.recruit_quick_box{
  padding: 0 150px;
  display: flex;
  justify-content: space-around;
}
.btn_inquire.btn_recruit{
  background-color: #414EAC;
}
.btn_inquire.btn_recruit:hover{
  background-color: #7b86d8;
}
.btn_inquire.btn_recruit p{
  margin: 65px 0 0 0;
  line-height: 1.3;
  font-size: 1.875rem;
}



/* ----- responsive ----- */
@media (max-width: 1400px){
  /* ----- quickmenu ----- */
  .recruit .quickmenu{
    padding-bottom: 100px;
  }
}

@media (max-width: 1100px){
  /* ----- page_image ----- */
  .btn_inquire.btn_greeting p{
    margin: 50px 0 0 0;
    font-size: 1.25rem;
  }

  /* ----- quickmenu ----- */
  .content_detail{
    font-size: 1rem;
  }
  .btn_inquire.btn_recruit p{
    margin: 52px 0 0 0;
    font-size: 1.25rem;
  }
}

@media (max-width: 1000px){
  /* ----- quickmenu ----- */
  .quickmenu{
    padding-bottom: 100px;
  }
  .recruit_quick_box{
    padding: 0 100px;
  }

  /* ----- quickmenu ----- */
  .recruit_quick_box{
    padding: 0;
  }
}

@media (max-width: 700px){
  /* ----- welfare ----- */
  .welfare .content_title {
    width: 250px;
    margin: auto;
  }
}

@media (max-width: 500px){
  /* ----- page_image ----- */
  .btn_inquire.btn_greeting p{
    margin: 28px 0 0 0;
    font-size: 1.25rem;
  }

  /* ----- quickmenu ----- */
  .btn_inquire.btn_recruit p{
    margin: 27px 0 0 0;
  }
  .btn_inquire.btn_recruit{
    width: 6.5rem;
    height: 6.5rem;
  }
  .btn_inquire.btn_recruit::before{
    width: 5.7rem;
    height: 5.7rem;
  }

  .recruit_quick_box{
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .recruit_quick_box a{
    margin-bottom: 1rem;
  }
}