/* 首页 */
.main {
  width: 100%;
  position: relative;
  overflow: hidden;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

/* 单元 */
.units {
  width: 70%;
  height: 60%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.units a {
  display: block;
  position: absolute;
}
.units a:hover img{
  animation: rubberBand 1s linear;
}
.units a:nth-child(1) {
  width: 10%;
  left: 5%;
  top: 22%;
}
.units a:nth-child(2) {
  width: 13%;
  left: 25%;
  top: 10%;
}
.units a:nth-child(3) {
  width: 12%;
  left: 58.5%;
  top: 1%;
}
.units a:nth-child(4) {
  width: 12%;
  left: 77%;
  top: 18%;
}
.units a:nth-child(5) {
  width: 16%;
  left: 5%;
  top: 59%;
}
.units a:nth-child(6) {
  width: 19%;
  left: 24%;
  top: 78%;
}
.units a:nth-child(7) {
  width: 18%;
  left: 53%;
  top: 67%;
}
.units a:nth-child(8) {
  width: 17%;
  left: 80%;
  top: 63%;
}

/* 光点 */
.lights {
  width: 70%;
  height: 60%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.magic-light {
  width: 10%;
  position: absolute;
  left: 34%;
  top: 64%;
  opacity: 0;
  animation: largen 1s 0.5s forwards;
}
.lights-centre {
  width: 30%;
  height: 100%;
  position: absolute;
  left: 20%;
  top: 0;
}
@keyframes largen {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/* 随机光点 */
.random-lights {
  position: absolute;
  animation: lightsUp 3s linear forwards;
  transition: all 1s;
}
@keyframes lightsUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  25% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
    transform: translate3d(0, -150%, 0);
  }
  75% {
    opacity: 0.5;
  }
  95% {
    opacity: 1;
    transform: translate3d(0, -300%, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -300%, 0);
  }
}
/* 光点end */
/* 蝴蝶 */
.butterfly {
  width: 5%;
  position: absolute;
  left: 10%;
  top: 20%;
  transition-property: left,top;
  transition-duration: 7s;
  transition-timing-function: linear;
}

.butterfly-box {
  width: 5%;
  position: absolute;
  top: 0;
  left: 0;
  animation: flyY 30s infinite;
}
@keyframes flyY {
  0% {
    top: 20%;
  }
  50% {
    top: 80%;
  }
  100% {
    top: 20%;
  }
}
.butterfly2 {
  width: 100%;
  position: absolute;
  left: 30%;
  top: 60%;
  /* transition-property: left,top;
  transition-duration: 7s;
  transition-timing-function: linear; */
  animation: flyX 60s infinite;
}
@keyframes flyX {
  0% {
    left: 0vw;
    transform: rotateY(180deg);
  }
  50% {
    left: 90vw;
    transform: rotateY(180deg);
  }
  50.1% {
    left: 90vw;
    transform: rotateY(0deg);
  }
  100% {
    left: 0vw;
    transform: rotateY(0deg);
  }
}

.butterfly-box2 {
  width: 5%;
  position: absolute;
  top: 0;
  left: 0;
  animation: flyY2 30s 5s infinite linear;
}
@keyframes flyY2 {
  0% {
    top: 10%;
  }
  40% {
    top: 70%
  }
  50% {
    top: 60%
  }
  60% {
    top: 70%;
  }
  100% {
    top: 10%;
  }
}
.butterfly3 {
  width: 100%;
  position: absolute;
  left: 30%;
  top: 60%;
  animation: flyX2 60s 5s infinite linear;
}
@keyframes flyX2 {
  0% {
    left: -5vw;
    transform: rotateY(180deg);
  }
  40% {
    left: 60vw;
    transform: rotateY(180deg);
  }
  40.1% {
    transform: rotateY(0deg);
  }
  50% {
    left: 50vw;
    transform: rotateY(0deg);
  }
  60% {
    left: 40vw;
    transform: rotateY(0deg);
  }
  60.1% {
    transform: rotateY(180deg);
  }
  100% {
    left: 105vw;
    transform: rotateY(180deg);
  }
}

/* 蝴蝶end */
/* 出版与说明 */
.publish {
  width: 7%;
  position: absolute;
  top: 12%;
  right: 15%;
  z-index: 2;
  cursor: pointer;
}
.publish img {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.publish img:last-child {
  transform: scale(1);
  animation: shine 3s 1s infinite;
  margin-top: 18%;
}
.explain {
  width: 7%;
  position: absolute;
  top: 17%;
  right: 5%;
  z-index: 2;
  cursor: pointer;
}
.explain img {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.explain img:last-child {
  transform: scale(1);
  animation: shine 2s infinite;
}
@keyframes shine {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.7);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
}
.jstc {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  display: none;
}
.page {
  width: 5%;
  position: absolute;
  left: 65%;
  top: 65%;
  cursor: pointer;
}
.close {
  width: 7%;
  position: absolute;
  top: 20%;
  right: 20%;
  cursor: pointer;
}
/* 出版与说明end*/