* {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

.slider-container {
  width: 50%;
  position: relative;
  margin: 0 auto;
}

.slider,
.slider-item {
  padding-bottom: 40%;
}

.slider-item {
  position: absolute;
  /* 父辈.slider默认继承了.slide-container的宽度 */
  width: 100%;
  /* 相当于background-size: 100% auto */
  background-size: 100%;
  animation: fade 20s linear;
  animation-iteration-count: infinite;
}

/* 设置背景图片 */
.slider-item1 {
  background: center center;
  background-image: url(../images/showcase_bg1.webp);
  background-size: cover;
  width: 100%;
  height: 450px;
}

.slider-item2 {
  background: center center;
  background-image: url(../images/showcase_bg2.webp);
  background-size: cover;
  width: 100%;
  height: 450px;
}

.slider-item3 {
  background: center center;
  background-image: url(../images/showcase_bg3.webp);
  background-size: cover;
  width: 100%;
  height: 450px;
}

.slider-item4 {
  background: center center;
  background-image: url(../images/showcase_bg4.webp);
  background-size: cover;
  width: 100%;
  height: 450px;
}

.slider-item5 {
  background: center center;
  background-image: url(../images/showcase_bg5.webp);
  background-size: cover;
  width: 100%;
  height: 450px;
}

/* 设置动画 */
@keyframes fade {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  20% {
    opacity: 1;
  }

  25% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.slider-item {
  opacity: 0;
}

.slider-item1 {
  animation-delay: -1s;
}

.slider-item2 {
  animation-delay: 3s;
}

.slider-item3 {
  animation-delay: 7s;
}

.slider-item4 {
  animation-delay: 11s;
}

.slider-item5 {
  animation-delay: 15s;
}

.focus-container {
  position: absolute;
  bottom: 2%;
  z-index: 7;
  left: 50%;
  margin-left: -45px;
}

.focus-container li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  float: left;
  margin-right: 10px;
  background: #fff;
}

.focus-item {
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0;
  background: #51B1D9;
  border-radius: inherit;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-name: fade;
  animation-iteration-count: infinite;
}

.focus-item1 {
  animation-delay: -1s;
}

.focus-item2 {
  animation-delay: 3s;
}

.focus-item3 {
  animation-delay: 7s;
}

.focus-item4 {
  animation-delay: 11s;
}

.focus-item5 {
  animation-delay: 15s;
}