body,html{
  padding: 0;
  margin: 0;
}

.img-item{
  position: relative;
}
.img-item img{
  width: 100%;
}

.top{
  display: block;
  width: 93.6%;
  margin: 12px auto 0;
}

.top-text{
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 30px;
  color: #E02F2F;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 15px;
}

.dj1{
  width: 82%;
  height: 9%;
  position: absolute;
  top: 46%;
  left: 9%;
  /* background: rgba(0,0,0,0.1); */
}

.dj2{
  width: 82%;
  height: 15%;
  position: absolute;
  top: 57%;
  left: 9%;
  /* background: rgba(0,0,0,0.1); */
}

.dj3{
  width: 82%;
  height: 15%;
  position: absolute;
  top: 74%;
  left: 9%;
  /* background: rgba(0,0,0,0.1); */
}

.dj4{
  width: 82%;
  height: 13%;
  position: absolute;
  top: 57%;
  left: 9%;
  /* background: rgba(0,0,0,0.1); */
}

.dj5{
  width: 82%;
  height: 13%;
  position: absolute;
  top: 72%;
  left: 9%;
  /* background: rgba(0,0,0,0.1); */
}

.dj6{
  width: 82%;
  height: 15%;
  position: absolute;
  top: 43%;
  left: 9%;
  /* background: rgba(0,0,0,0.1); */
}

.dj7{
  width: 82%;
  height: 14%;
  position: absolute;
  top: 60%;
  left: 9%;
  /* background: rgba(0,0,0,0.1); */
}

.dj8{
  width: 82%;
  height: 14%;
  position: absolute;
  top: 76%;
  left: 9%;
  /* background: rgba(0,0,0,0.1); */
}

.dj9{
  width: 82%;
  height: 10%;
  position: absolute;
  top: 48%;
  left: 9%;
  /* background: rgba(0,0,0,0.1); */
}

.dj10{
  width: 82%;
  height: 11%;
  position: absolute;
  top: 60%;
  left: 9%;
  /* background: rgba(0,0,0,0.1); */
}

.dj11{
  width: 82%;
  height: 15%;
  position: absolute;
  top: 73%;
  left: 9%;
  /* background: rgba(0,0,0,0.1); */
}

.dj12{
  width: 82%;
  height: 13%;
  position: absolute;
  top: 43%;
  left: 9%;
  /* background: rgba(0,0,0,0.1); */
}

.dj13{
  width: 82%;
  height: 13%;
  position: absolute;
  top: 58%;
  left: 9%;
  /* background: rgba(0,0,0,0.1); */
}

.dj14{
  width: 82%;
  height: 14%;
  position: absolute;
  top: 73%;
  left: 9%;
  /* background: rgba(0,0,0,0.1); */
}

.dj15{
  width: 82%;
  height: 18%;
  position: absolute;
  top: 45%;
  left: 9%;
  /* background: rgba(0,0,0,0.1); */
}

.dj16{
  width: 82%;
  height: 23%;
  position: absolute;
  top: 65%;
  left: 9%;
  /* background: rgba(0,0,0,0.1); */
}

.dj17{
  width: 82%;
  height: 16%;
  position: absolute;
  top: 40%;
  left: 9%;
  /* background: rgba(0,0,0,0.1); */
}

.dj18{
  width: 82%;
  height: 15%;
  position: absolute;
  top: 58%;
  left: 9%;
  /* background: rgba(0,0,0,0.1); */
}

.dj19{
  width: 82%;
  height: 15%;
  position: absolute;
  top: 75%;
  left: 9%;
  /* background: rgba(0,0,0,0.1); */
}

.dj20{
  width: 82%;
  height: 12%;
  position: absolute;
  top: 47%;
  left: 9%;
  /* background: rgba(0,0,0,0.1); */
}

.dj21{
  width: 82%;
  height: 12%;
  position: absolute;
  top: 61%;
  left: 9%;
  /* background: rgba(0,0,0,0.1); */
}

.dj22{
  width: 82%;
  height: 12%;
  position: absolute;
  top: 75%;
  left: 9%;
  /* background: rgba(0,0,0,0.1); */
}



@media (min-width:500px) {
  .img-item{
    width: 500px;
    margin: 0 auto;
  }
  .top{
    width: 500px;
  }
}