.banner{
  width: 100%; height: 650px; background: url('../img/logistics/banner.jpg') no-repeat center top; background-size: cover;
}
.banner-m{
  display: none;
}

/* 头程物流简介 */
.introduction-container{
  display: flex; justify-content: space-between; flex-wrap: wrap;
}
.introduction-left, .introduction-right{
  width: 48.6%; position: relative;
}
.introduction-left img,
.introduction-right img{
  display: block; width: 100%;
}
.introduction-right{
  display: flex; flex-direction: column; justify-content: space-between;
}
.introduction-right li{
  position: relative;
}
.intro-mask{
  width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; padding: 40px 40px 30px;
}
.intro-mask strong{
  display: flex; justify-content: center; align-items: center; width: 120px; height: 40px; border-radius: 40px; background: #2513d1; color: #fff; font-size: 24px; font-weight: bold; line-height: 1;
}
.intro-mask h3{
  font-size: 24px; color: #fff; line-height: 1.5; font-weight: bold;
}
.intro-mask h3 span{
  font-size: 12px; color: rgba(255,255,255,.7); line-height: 1.5; margin-top: 5px; display: block; text-transform: uppercase; font-weight: normal;
}

/* 头程物流优势 */
.advantage-list{
  display: flex; justify-content: space-between; flex-wrap: wrap;
}
.advantage-list li{
  width: 24%; overflow: hidden; box-shadow: 0 2px 10px rgba(150,150,150,.2); border-radius: 6px;
}
.advantage-img{
  position: relative;
}
.advantage-img::after{
  content: ''; display: block; width: 100%; height: 100%; background: rgba(0,0,0,.4); position: absolute; left: 0; top: 0; z-index: 0; transition: 0.5s; opacity: 1;
}
.advantage-img>img{
  display: block; width: 100%;
}
.advantage-img h6{
  width: 90px; height: 30px; border-radius: 4px; display: flex; justify-content: center; align-items: center; transition: 0.5s; background: rgba(0,0,0,.5); position: absolute; left: 30px; top: 30px; z-index: 1;
}
.advantage-img h6>img{
  display: block; width: auto; height: 50%;
}
.advantage-list li p{
  background: #fff; font-size: 12px; color: #000; line-height: 2; box-sizing: border-box; height: 100px; padding: 10px 30px; display: flex; align-items: center; transition: 0.5s;
}
.advantage-list li:hover .advantage-img::after{
  opacity: 0;
}
.advantage-list li:hover h6{
  background: #2513d1;
}
.advantage-list li:hover p{
  background: #2513d1; color: #fff;
}

/* 头程物流服务宗旨 */
.service{
  background: url("../img/logistics/service-bg.jpg") no-repeat center center/cover;
}
.service .title,
.service .sub-title{
  color: #fff;
}
.service-list{
  display: flex; justify-content: space-between; flex-wrap: wrap;
}
.service-list li{
  width: 24%; background: rgba(255,255,255,.3); box-sizing: border-box; padding: 30px 36px 20px; transition: 0.5s; position: relative;
}
.service-list li::after{
  content: ''; display: block; width: 0; height: 100%; background: #2513d1; position: absolute; left: 0; top: 0; z-index: 0; transition: 0.5s;
}
.service-list li h3,
.service-list li img,
.service-list li p{
  position: relative; z-index: 1;
}
.service-list li h3{
  font-size: 36px; font-weight: bold; color: #fff; line-height: 1;
}
.service-list li img{
  display: block; width: auto; height: 90px; margin: 35px auto 30px;
}
.service-list li p{
  font-size: 22px; color: #fff; line-height: 1.6; text-align: center;
}
.service-list li:hover::after{
  width: 100%;
}
.service-wrapper{
  background: rgba(255,255,255,.3); box-sizing: border-box; padding: 26px; margin-top: 50px; overflow: hidden;
}
.service-content{
  background: #2513d1; padding: 60px 80px; display: flex; justify-content: center; align-items: center; position: relative;
}
.service-content::after{
  content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; transition: 0.5s; background: #2513d1;
}
.service-wrapper:hover .service-content::after{
  transform: scale(1.3);
}
.service-content h3,
.service-content p{
  position: relative; z-index: 1;
}
.service-content h3{
  font-size: 36px; color: #fff; font-weight: bold; white-space: nowrap;
}
.service-content h3 span{
  font-size: 12px; color: #fff; font-weight: normal; margin-top: 10px; text-transform: uppercase; display: block;
}
.service-content p{
  margin-left: 50px; padding-left: 50px; border-left: 1px solid #fff; font-size: 24px; color: #fff; line-height: 2;
}

@media (max-width: 1536px) {
  .banner{
    height: 570px;
  }
}
@media (max-width: 1024px) {
  .banner{
    height: 380px;
  }
  .intro-mask{
    padding: 20px;
  }
  .intro-mask strong{
    font-size: 20px;
  }
  .intro-mask h3{
    font-size: 18px;
  }
  .advantage-img h6{
    left: 15px; top: 15px;
  }
  .advantage-list li p{
    padding: 10px; line-height: 1.6;
  }
  .service-list li{
    padding: 20px;
  }
  .service-list li h3{
    font-size: 26px;
  }
  .service-list li img{
    height: 80px; margin: 30px auto 20px;
  }
  .service-list li p{
    font-size: 16px;
  }
  .service-wrapper{
    margin-top: 20px;
  }
  .service-content{
    flex-wrap: wrap; padding: 30px;
  }
  .service-content h3{
    width: 100%; margin-bottom: 20px; font-size: 32px;
  }
  .service-content p{
    margin-left: 0; padding-left: 0; border-left: none; line-height: 1.6; font-size: 20px;
  }
}
@media (max-width: 768px) {
  .banner{
    height: 360px;
  }
}
@media (max-width: 767px) {
  .banner{
    height: auto; background: none;
  }
  .banner-m{
    display: block; width: 100%;
  }
  .introduction-left, .introduction-right{
    width: 100%;
  }
  .introduction-right li{
    margin-top: .3rem;
  }
  .intro-mask{
    padding: .3rem;
  }
  .intro-mask>div{
    display: flex;
  }
  .intro-mask strong{
    font-size: .32rem; padding: .15rem .24rem; width: 2rem; height: .6rem;
  }
  .intro-mask h3{
    font-size: .3rem; line-height: 1.3;
  }
  .intro-mask h3 span{
    font-size: .24rem; line-height: 1.3; margin-top: .1rem;
  }
  .advantage-list li{
    width: 48%;
  }
  .advantage-img h6{
    left: .3rem; top: .3rem; width: 1.8rem; height: .6rem;
  }
  .advantage-list li p{
    padding: .2rem .25rem; font-size: .24rem; height: 2rem;
  }
  .advantage-list li:nth-child(3),
  .advantage-list li:nth-child(4){
    margin-top: .3rem;
  }
  .service-list li{
    width: 48%; padding: .3rem;
  }
  .service-list li h3{
    font-size: .42rem;
  }
  .service-list li img{
    height: 1.5rem; margin: .6rem auto .5rem;
  }
  .service-list li p{
    font-size: .26rem;
  }
  .service-list li{
    margin-bottom: .26rem;
  }
  .service-wrapper{
    margin-top: 0; padding: .3rem;
  }
  .service-content{
    padding: .3rem;
  }
  .service-content h3{
    white-space: normal; font-size: .42rem; margin-bottom: .5rem;
  }
  .service-content h3 span{
    margin-top: .2rem; font-size: .24rem;
  }
  .service-content p{
    font-size: .26rem;
  }
}