.join-banner {
  margin-top: 1rem;
  background: url(../images/join/join.png);
  background-size: cover;
  height: 8.36rem;
  padding-top: 3.7rem;
  box-sizing: border-box;
}

.join-banner h3 {
  font-size: .32rem;
  font-weight: 500;
  text-align: center;
  color: #4C91F8;
}

.join-banner p {
  padding-top: .56rem;
  line-height: .48rem;
  font-size: .24rem;
  margin: 0 .3rem;
}

.join-reason {
  padding: .32rem;
  box-sizing: border-box;
}

.join-reason h3 {
  font-size: .32rem;
  font-weight: 500;
  text-align: center;
  color: #4C91F8;
}

.join-reason .join-reason-detail {
  padding-top: .2rem;
}

.join-reason .join-reason-detail ul li h4 {
  font-size: .28rem;
  font-weight: 500;
  line-height: .9rem;
}

.join-reason .join-reason-detail ul li p {
  font-size: .24rem;
  text-indent: 2em;
  color: #333;
  line-height: .48rem;
}

.join-reason .join-reason-detail img {
  margin-top: .4rem;
}

.join-welfare {
  padding: .4rem;
  box-sizing: border-box;
}

.join-welfare .join-welfare-detail {
  margin-bottom: .3rem;
}

.join-welfare .join-welfare-detail h3 {
  font-size: .28rem;
  text-align: center;
  font-weight: 500;
  color: #333;
}

.join-welfare .join-welfare-detail h4 {
  margin: .48rem 0;
  width: 6.9rem;
  height: .64rem;
  line-height: .64rem;
  background: #619efa;
  box-shadow: 0.04rem 0.08rem 0.18rem 0rem rgba(166, 173, 227, 0.32);
  font-size: .24rem;
  font-weight: 300;
  color: #fff;
  text-align: center;
}

.join-welfare .join-welfare-detail p {
  font-size: .24rem;
  color: #333;
  line-height: .48rem;
}

.join-hope {
  background: url(../images/join/need.png);
  background-size: cover;
  height: 3.4rem;
}

.join-need {
  padding: .3rem 0;
}

.join-need h3 {
  font-size: .32rem;
  font-weight: 500;
  color: #333;
  text-align: center;
  line-height: .52rem;
}

.join-need .join-job {
  width: 5.72rem;
  margin-top: .4rem;
  margin-left: 1.5rem;
  padding: .4rem .38rem .4rem 1.3rem;
  box-sizing: border-box;
  border: 0.04rem dashed #afcbf4;
  box-shadow: 0.1rem 0.16rem 0.34rem 0.02rem rgba(166, 173, 227, 0.32);
  border-radius: .4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.join-need .join-job ul {
  position: absolute;
  left: -1.2rem;
}

.join-need .join-job ul li {
  margin-bottom: .2rem;
  width: 2.06rem;
  height: .6rem;
  line-height: .6rem;
  text-align: center;
  box-shadow: 0.04rem 0.08rem 0.18rem 0rem rgba(166, 173, 227, 0.32);
  border-radius: .1rem;
  font-size: .24rem;
  color: #fff;
}

.join-need .join-job ul li:nth-child(3n+1) {
  background: #4C91F8;
}

.join-need .join-job ul li:nth-child(3n+2) {
  background: #6776E8;
}

.join-need .join-job ul li:nth-child(3n) {
  background: #49C1EE;
}

.join-need .join-job ul .active {
  transform: translateX(0.3rem);
}

.join-need .join-job .join-job-detail {
  width: 4.06rem;
}

.join-need .join-job .join-job-detail h4 {
  font-size: .28rem;
  color: #4c91f8;
  line-height: .24rem;
  text-align: center;
  padding-bottom: .4rem;
}

.join-need .join-job .join-job-detail h5 {
  font-size: .24rem;
  font-weight: 500;
  color: #333;
  line-height: .4rem;
}

.join-need .join-job .join-job-detail p {
  font-family: "PingFangSC-Light";
  font-size: .24rem;
  font-weight: 300;
  color: #333;
  line-height: .4rem;
}