.container{
  max-width: 1288px;
  margin: 0 auto;
  height: 400px;
}
.slide{
  width: 100%;
  min-height: 180px;
  overflow: hidden;
  position: relative;

}
.slide .img{
  overflow: hidden;
  position: absolute;
  transition: width 0.6s,height 0.6s,top 0.6s,left 0.6s,z-index 0.1s;
}
.slide .img img{
  width: 100%;
  height: 100%;
}
.slide .img1{
  width: 40%;
  height: 40%;
  top: 30%;
  left: -50%;
  z-index: 1;
}
.slide .img2{
  width: 427px;
  height: 296px;
  top: 20%;
  left: -7px;
  z-index: 2;
}
.slide .img3{
  width: 570px;
  height: 398px;
  top: 10%;
  left: 27.5%;
  z-index: 4;
}
.slide .img4{
  width: 427px;
  height: 296px;
  top: 20%;
  left: 67%;
  z-index: 3;
}
.slide .img5{
  width: 40%;
  height: 40%;
  top: 30%;
  left: 110%;
  z-index: 1;
}
.slide-bt{
  position: absolute;
  left: 50%;
  bottom: 13%;
  z-index: 10;
}
.slide-bt span{
  width: 24px;
  height: 8px;
  background: #c9caca;
  float: left;
  margin: 5px;
  border-radius: 4px;
}
.slide .slide-bt .on{
  background: #ffd200;
}
.slide {
  position: relative;
}
.slide .slider-btn {
  display: inline-block;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  z-index: 10;
  margin-top: -18px;
}
.slide .slider-btn.prevBtn {
  background: url("../../static/images/skill/zuobian.png") rgba(0, 0, 0, 0.3) no-repeat center;
  left: 0;
}
.slide .slider-btn.nextBtn {
  background: url("../../static/images/skill/youbian.png") rgba(0, 0, 0, 0.3) no-repeat center;
  right: 0;
}