.wrap-service {
  display: flex;
  background: #dedede;
  flex-direction: column;
  padding:30px 0;
}
.wrap-service > div {
  max-width: 1440px;
  width: 90%;
  margin: 30px auto;
  float:left;
}

.wrap-service > div:nth-child(2n+1) {
  display: flex;
  flex-flow: row-reverse;
}

.wrap-service > div span {
  height: 400px;
  width: 50%;
  float:left;
  padding: 30px 100px;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}

.wrap-service > div span:nth-child(1):after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-image: linear-gradient(to right, #0f3b97 , #1db4c6);
  transition: .6s all ease;
}

.wrap-service > div:nth-child(2n+1) span:nth-child(1):after{
  transform: translate(-100% ,-100%);
}

.wrap-service > div:nth-child(2n) span:nth-child(1):after{
  transform: translate(100% ,-100%);
}

.wrap-service > div span:nth-child(1):hover:after {
  transform: translate(0)!important;
  transition: .6s all ease;
}

.wrap-service > div span:nth-child(1):hover b,
.wrap-service > div span:nth-child(1):hover p {
  color:#fff;
  transition: .6s all ease;
}

.wrap-service > div span b{
  font-size: 30px;
  margin-bottom: 15px;
  display: inline-block;
  position: relative;
  z-index: 2;
  transition: .6s all ease;
}

.wrap-service > div span p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  overflow: hidden;
  line-height: 25px;
  position: relative;
  z-index: 2;
  transition: .6s all ease;
}

.wrap-join {
  background:#dedede;
  padding: 30px 0;
  overflow: hidden; 
}
.wrap-join .join-l{
  max-width: 1440px;
  width: 90%;
  margin: 30px auto;
  overflow: hidden;
}



.wrap-join .join-l .join-i {
  width: calc(33.33% - 60px);
  float:left;
  margin: 30px;
}

.wrap-join .join-l b,
.wrap-join .join-l p {
  font-size: 25px;
  line-height: 30px;
}
.wrap-join .join-l .join-i span {
  position: relative;
  overflow:hidden;
}
.wrap-join .join-l .join-i span h3 {
  width: 100%;
  height: 100%;
  display: inline-block;
  transition: all .6s ease;
}

.wrap-join .join-l .join-i span:hover h3 {
  transform: scale(1.2);
  transition: all .6s ease;
}

.wrap-join .join-l .join-i span:first-child {
  height: 245px;
  overflow:hidden;
  float: left;
  width: 100%;
}

.wrap-join .join-l .join-i span:last-child{
  background:#fff;
  padding: 30px 15px;
  float: left;
}
.wrap-join .join-l .join-i span:last-child b {
  text-transform: uppercase;
  margin-bottom: 10px;
  display: inline-block;
  position:relative;
  z-index: 2;
}
.wrap-join .join-l .join-i span:last-child p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  position:relative;
  z-index: 2;
}

.wrap-join .join-l .join-i span:last-child:after{
  transform: translate(100% ,-100%);
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-image: linear-gradient(to right, #0f3b97 , #1db4c6);
  transition: .6s all ease;
}

.wrap-join .join-l .join-i span:last-child:hover::after {
  transform: translate(0)!important;
  transition: .6s all ease;
  color:#fff;
}

.wrap-join .join-l .join-i span:last-child:hover p,
.wrap-join .join-l .join-i span:last-child:hover b {
  color:#fff;
  transition: .6s all ease;
}

.wrap-join .join-l .join-left {
  float:left;
  width: 50%;
  padding:30px 100px;
  background:#fff;
}

.wrap-join .join-l .join-left b {
  text-transform: uppercase;
  margin-bottom: 10px;
  line-height: 25px;
  display: inline-block;
}

.wrap-join .join-l .join-right {
  width: 50%;
  float:left;
}

.wrap-join .join-l .join-right img {
  width: 100%;
}

.wrap-join .join-l .join-l-box {
  background:#fff;
  margin: 0 30px;
  overflow:hidden;
}

.wrap-contact .contact-box {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: right;
  padding:60px 15px;
}

.wrap-contact .contact-box p {
  display: none;
  float:left;
  width:calc(100% - 500px);
  text-align: left;
  font-size: 16px;
  line-height: 30px;
}

.wrap-contact .contact-box p._show {
  display: inline-block;
}

.wrap-contact img {
  width: 500px;
  margin: 0 auto;
}
@media (max-width: 991px) {
  .wrap-service > div span {
    width: 100%;
    padding: 10px;
  }
  
  .wrap-service > div:nth-child(2n+1) {
    display: flex;
    flex-flow: column;
  }

  .wrap-service > div span:first-child {
    height: auto;
  }

  .wrap-service > div span p {
    -webkit-line-clamp: inherit;
  }

  .wrap-join .join-l .join-i,
  .wrap-join .join-l .join-left,
  .wrap-join .join-l .join-l-box{
    width: 100%;
    margin:0;
  }

  .wrap-join .join-l .join-l-box .join-left,
  .wrap-join .join-l .join-l-box .join-right {
    width: 100%;
  }

  .wrap-join .join-l .join-l-box .join-left {
    padding: 15px 10px;
  }

  .wrap-join .join-l .join-i b,
  .wrap-join .join-l .join-i p,
  .wrap-join .join-l .join-left b,
  .wrap-join .join-l .join-left p{
    font-size: 16px;
    padding: 10px;
  }
}