.layout{
  padding: 75px 0 0;
}

.l-introduce{
  padding-top: 55px;
  background: #f6f6f6;
}

.join-l{
  width: 100%;
}
.jl-left{
  width: 40%;
  padding-left: 20%;
}

.jl-right{
  width: 70%;
  padding-left: 45%;
}

.join-r{
  position: relative;
}

.join-r .jr-left{
  padding-left: 15%;
  display: inline-block;
}

.join-r .jr-right{
  width: 40%;
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  padding: 180px 0;
}

.join-r .jr-right .imgcon{
  width: 20vw;
  height: 15vw;
  box-sizing: border-box;
}

.join-r .jr-right .imgcon img{
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.join-r .jr-right .imgcon:hover img {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}


.join-l,.join-r{
  padding: 200px 0;
}

.one{
  background: url('~@/assets/images/img_join_01.jpg') top right no-repeat;
  background-size: 30vw;
}


.two{
  background: url('~@/assets/images/img_join_02.jpg') top left -80px no-repeat;
  background-size: 30vw;
}

.two .jr-right{
  background: url('~@/assets/images/img_join_03.jpg') top right no-repeat;
  background-size: 24vw;
}

.three{
  background: url('~@/assets/images/img_join_04.jpg') top left no-repeat;
  background-size: 20vw;
}

.recruit{
  width: 80%;
  margin: 0 auto;
}

@media screen and (max-width: 1400px) {
  .join-l,.join-r{
    padding: 100px 0;
  }
  .join-r .jr-left{
    padding-left: 10%;
  }
}

@media screen and (max-width: 1400px) {
  .join-r .jr-right{
    right: 0;
  }
}

@media screen and (max-width: 770px) {
  .join-r .jr-left{
    padding-left: 0;
  }
  .jl-left{
    padding-left: 10%;
  }
  .jl-right{
    padding-left: 35%;
  }
  .join-r .jr-right{
    width: 34%;
  }
  .layout{
    padding: 50px 0 0;
  }
  .recruit{
    width: 96%;
    margin: 0 auto;
  }
}