.container {
  width: 1400px;
  margin: 0 auto;
  position: relative;
}
.slide {
  width: 100%;
  height: 718px;
  overflow: hidden;
  position: relative;
}
.slide .img {
  overflow: hidden;
  position: absolute;
  transition: width 0.4s, height 0.4s, top 0.4s, left 0.4s, z-index 0.4s;
}
.slide .img img {
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  margin: 7px;
}
.slide .img1 {
  width: 40%;
  height: 40%;
  top: 30%;
  left: -50%;
  z-index: 1;
}
.slide .img2 {
  width: 60%;
  height: 60%;
  top: 20%;
  left: -20%;
  z-index: 2;
}
.slide .img3 {
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  z-index: 3;
}
.slide .img4 {
  width: 60%;
  height: 60%;
  top: 20%;
  left: 60%;
  z-index: 2;
}
.slide .img5 {
  width: 40%;
  height: 40%;
  top: 30%;
  left: 110%;
  z-index: 1;
}
.slide-bt {
  position: absolute;
  left: 50%;
  bottom: 13%;
  z-index: 10;
  top: 760px;
}
.slide-bt span {
  width: 44px;
  height: 4px;
  background: #1890ff;
  float: left;
  margin: 5px;
  border-radius: 4px;
  opacity: 0.5;
}
.slide .slide-bt .on {
  background: #1890ff;
  opacity: 1;
}
button {
  width: 50px;
  margin: 20px;
}
.previous {
  box-sizing: border-box;
  padding: 12px 10px 6px 10px;
  background: url(../images/home/previous-hover.png) no-repeat center;
  position: absolute;
  top: 380px;
  left: -80px;
  width: 40px;
  height: 40px;
  background-color: #f5f5f5;
  border-radius: 20px;
}
.previous:hover {
  background: url(../images/home/previous.png) no-repeat center;
  background-color: #f5f5f5;
}
.next-page {
  box-sizing: border-box;
  padding: 12px 10px 10px 10px;
  background: url(../images/home/next-page-hover.png) no-repeat center;
  position: absolute;
  top: 380px;
  right: -80px;
  width: 40px;
  height: 40px;
  background-color: #f5f5f5;
  border-radius: 20px;
}
.next-page:hover {
  background: url(../images/home/next-page.png) no-repeat center;
  background-color: #f5f5f5;
}