.anim {
  position: absolute;
  top: 60%;
  right: 0;
  transform: translateY(-50%);
  width: 1163px;
  height: 609px;
  background-image: url(../img/kuang.png);
  background-position: center;
  background-size: cover;
  z-index: 8;
}
.anim .xing {
  position: absolute;
  z-index: -1;
}
.anim .xing.xing1 {
  bottom: -8%;
  left: 22.8%;
}
.anim .xing.xing2 {
  top: 0;
  left: 22%;
}
.anim .xing.xing3 {
  top: -12%;
  right: 3%;
}
.anim .gang {
  position: absolute;
  z-index: -1;
}
.anim .gang.gang1 {
  top: 23.5%;
  right: 26.1%;
}
.anim .gang.gang2 {
  top: 8%;
  right: 25%;
}
.anim .di {
  position: absolute;
  width: 212px;
  height: 235px;
  background-position: center;
  background-size: cover;
}
.anim .di a {
  display: block;
  width: 100%;
  height: 100%;
}
.anim .di .t {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  bottom: 35px;
  left: 32px;
  z-index: 4;
  transform: skewY(30deg);
}
.anim .di .icon {
  position: absolute;
  bottom: 94px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
.anim .di .priss {
  width: 72px;
  height: 133px;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  overflow: hidden;
}
.anim .di .priss .pris {
  height: 42px;
  position: absolute;
}
.anim .di .priss .pris .sq {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  -webkit-transform: translateX(-50%) rotate(45deg);
}
.anim .di .priss .pris img {
  display: block;
  width: 100%;
}
.anim .di .priss .pris1 {
  top: 52px;
  left: 52px;
  width: 12px;
}
.anim .di .priss .pris1 .sq1 {
  width: 9px;
  height: 9px;
}
.anim .di .priss .pris2 {
  top: 60px;
  left: 35px;
  width: 5px;
}
.anim .di .priss .pris2 .sq2 {
  left: 50%;
  width: 4px;
  height: 4px;
}
.anim .di .priss .pris3 {
  top: 36px;
  left: 45px;
  width: 5px;
}
.anim .di .priss .pris3 .sq3 {
  left: 50%;
  width: 4px;
  height: 4px;
}
.anim .di .priss .pris4 {
  top: 28px;
  left: 12px;
  width: 7px;
}
.anim .di .priss .pris4 .sq4 {
  left: 50%;
  width: 5px;
  height: 5px;
}
.anim .di .priss .pris5 {
  top: 18px;
  left: 36px;
}
.anim .di .priss .pris5 .sq5 {
  left: 50%;
  width: 3px;
  height: 3px;
}
.anim .di .txt {
  display: none;
  width: 140px;
  height: 38px;
  position: absolute;
  top: -15px;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  border-radius: 3px;
}
.anim .di .txt p {
  color: #fff;
  font-size: 20px;
  text-align: center;
  line-height: 38px;
}
.anim .di .txt:after,
.anim .di .txt:before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
.anim .di .txt:after {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  bottom: -3px;
}
.anim .di .txt:before {
  width: 1px;
  height: 30px;
  bottom: -30px;
}
.anim .di1 .pris1 {
  animation: mymove 2.4s infinite;
}
.anim .di1 .pris2 {
  animation: mymove 2s infinite;
}
.anim .di1 .pris3 {
  animation: mymove 1.5s infinite;
}
.anim .di1 .pris4 {
  animation: mymove 1.8s infinite;
}
.anim .di1 .pris5 {
  animation: mymove 1.2s infinite;
}

.anim .di2 .pris1 {
  animation: mymove 2s infinite;
}
.anim .di2 .pris2 {
  animation: mymove 2.6s infinite;
}
.anim .di2 .pris3 {
  animation: mymove 1.8s infinite;
}
.anim .di2 .pris4 {
  animation: mymove 1.2s infinite;
}
.anim .di2 .pris5 {
  animation: mymove .8s infinite;
}

.anim .di3 .pris1 {
  animation: mymove 1.2s infinite;
}
.anim .di3 .pris2 {
  animation: mymove 2s infinite;
}
.anim .di3 .pris3 {
  animation: mymove 2.3s infinite;
}
.anim .di3 .pris4 {
  animation: mymove 1.9s infinite;
}
.anim .di3 .pris5 {
  animation: mymove 1.6s infinite;
}

.anim .di4 .pris1 {
  animation: mymove .8s infinite;
}
.anim .di4 .pris2 {
  animation: mymove 1.5s infinite;
}
.anim .di4 .pris3 {
  animation: mymove 1.6s infinite;
}
.anim .di4 .pris4 {
  animation: mymove 1.2s infinite;
}
.anim .di4 .pris5 {
  animation: mymove 1s infinite;
}

.anim .di5 .pris1 {
  animation: mymove 2.2s infinite;
}
.anim .di5 .pris2 {
  animation: mymove 1.2s infinite;
}
.anim .di5 .pris3 {
  animation: mymove 3.2s infinite;
}
.anim .di5 .pris4 {
  animation: mymove 1.8s infinite;
}
.anim .di5 .pris5 {
  animation: mymove .6s infinite;
}

.anim .di6 .pris1 {
  animation: mymove 1.2s infinite;
}
.anim .di6 .pris2 {
  animation: mymove 1.8s infinite;
}
.anim .di6 .pris3 {
  animation: mymove 1s infinite;
}
.anim .di6 .pris4 {
  animation: mymove 1.2s infinite;
}
.anim .di6 .pris5 {
  animation: mymove 2.2s infinite;
}

.anim .di7 .pris1 {
  animation: mymove 1.2s infinite;
}
.anim .di7 .pris2 {
  animation: mymove 1.8s infinite;
}
.anim .di7 .pris3 {
  animation: mymove 1s infinite;
}
.anim .di7 .pris4 {
  animation: mymove 1.2s infinite;
}
.anim .di7 .pris5 {
  animation: mymove 2.2s infinite;
}

.anim .di8 .pris1 {
  animation: mymove 1.9s infinite;
}
.anim .di8 .pris2 {
  animation: mymove .9s infinite;
}
.anim .di8 .pris3 {
  animation: mymove 1.6s infinite;
}
.anim .di8 .pris4 {
  animation: mymove 2.6s infinite;
}
.anim .di8 .pris5 {
  animation: mymove 1.4s infinite;
}

.anim .di1 {
  top: 34.2%;
  left: 11.6%;
}
.anim .di2 {
  top: 48.7%;
  left: 24.6%;
}
.anim .di1,
.anim .di2 {
  background-image: url(../img/di1.png);
}
.anim .di1 .priss .pris1 .sq1,
.anim .di2 .priss .pris1 .sq1 {
  background-color: #e67ba6;
}
.anim .di1 .priss .pris2 .sq2,
.anim .di2 .priss .pris2 .sq2 {
  background-color: #e67ba6;
}
.anim .di1 .priss .pris3 .sq3,
.anim .di2 .priss .pris3 .sq3 {
  background-color: #e6af7b;
}
.anim .di1 .priss .pris4 .sq4,
.anim .di2 .priss .pris4 .sq4 {
  background-color: #d27be6;
}
.anim .di1 .priss .pris5 .sq5,
.anim .di2 .priss .pris5 .sq5 {
  background-color: #d27be6;
}
.anim .di1 .txt,
.anim .di2 .txt {
  border: 1px solid #b0778a;
  box-shadow: 0 0 13px rgba(225, 95, 103, 0.8) inset;
}
.anim .di1 .txt:after,
.anim .di2 .txt:after {
  background-color: #fcbbd2;
  box-shadow: 0 0 7px rgba(225, 118, 124, 0.76);
}
.anim .di1 .txt:before,
.anim .di2 .txt:before {
  border-right: 0.5px dashed rgba(252, 187, 210, 0.5);
  border-left: 0.5px dashed rgba(252, 187, 210, 0.5);
}
.anim .di3 {
  top: 9.5%;
  left: 26.6%;
}
.anim .di4 {
  top: 24%;
  left: 39.2%;
}
.anim .di5 {
  top: 38.4%;
  left: 51.6%;
}
.anim .di3,
.anim .di4,
.anim .di5 {
  background-image: url(../img/di2.png);
}
.anim .di3 .priss .pris1 .sq1,
.anim .di4 .priss .pris1 .sq1,
.anim .di5 .priss .pris1 .sq1 {
  background-color: #756cf5;
}
.anim .di3 .priss .pris2 .sq2,
.anim .di4 .priss .pris2 .sq2,
.anim .di5 .priss .pris2 .sq2 {
  background-color: #756cf5;
}
.anim .di3 .priss .pris3 .sq3,
.anim .di4 .priss .pris3 .sq3,
.anim .di5 .priss .pris3 .sq3 {
  background-color: #a758c1;
}
.anim .di3 .priss .pris4 .sq4,
.anim .di4 .priss .pris4 .sq4,
.anim .di5 .priss .pris4 .sq4 {
  background-color: #6cc9f5;
}
.anim .di3 .priss .pris5 .sq5,
.anim .di4 .priss .pris5 .sq5,
.anim .di5 .priss .pris5 .sq5 {
  background-color: #6cc9f5;
}
.anim .di3 .txt,
.anim .di4 .txt,
.anim .di5 .txt {
  border: 1px solid #7c7dc0;
  box-shadow: 0 0 13px rgba(149, 141, 240, 0.8) inset;
}
.anim .di3 .txt:after,
.anim .di4 .txt:after,
.anim .di5 .txt:after {
  background-color: #b6b0fb;
  box-shadow: 0 0 7px rgba(209, 205, 255, 0.76);
}
.anim .di3 .txt:before,
.anim .di4 .txt:before,
.anim .di5 .txt:before {
  border-right: 0.5px dashed rgba(114, 103, 226, 0.5);
  border-left: 0.5px dashed rgba(114, 103, 226, 0.5);
}
.anim .di6 {
  top: 4.8%;
  left: 56.6%;
}
.anim .di7 {
  top: -24.6%;
  left: 56%;
}
.anim .di8 {
  top: -9.6%;
  left: 69.4%;
}
.anim .di6,
.anim .di7,
.anim .di8 {
  background-image: url(../img/di3.png);
}
.anim .di6 .priss .pris1 .sq1,
.anim .di7 .priss .pris1 .sq1,
.anim .di8 .priss .pris1 .sq1 {
  background-color: #6ce1f5;
}
.anim .di6 .priss .pris2 .sq2,
.anim .di7 .priss .pris2 .sq2,
.anim .di8 .priss .pris2 .sq2 {
  background-color: #6ce1f5;
}
.anim .di6 .priss .pris3 .sq3,
.anim .di7 .priss .pris3 .sq3,
.anim .di8 .priss .pris3 .sq3 {
  background-color: #716cf5;
}
.anim .di6 .priss .pris4 .sq4,
.anim .di7 .priss .pris4 .sq4,
.anim .di8 .priss .pris4 .sq4 {
  background-color: #6cf59e;
}
.anim .di6 .priss .pris5 .sq5,
.anim .di7 .priss .pris5 .sq5,
.anim .di8 .priss .pris5 .sq5 {
  background-color: #6cf59e;
}
.anim .di6 .txt,
.anim .di7 .txt,
.anim .di8 .txt {
  border: 1px solid #609ac7;
  box-shadow: 0 0 13px rgba(148, 203, 255, 0.8) inset;
}
.anim .di6 .txt:after,
.anim .di7 .txt:after,
.anim .di8 .txt:after {
  background-color: #7bc9ff;
  box-shadow: 0 0 7px rgba(166, 243, 255, 0.76);
}
.anim .di6 .txt:before,
.anim .di7 .txt:before,
.anim .di8 .txt:before {
  border-right: 0.5px dashed rgba(123, 201, 255, 0.5);
  border-left: 0.5px dashed rgba(123, 201, 255, 0.5);
}
@keyframes mymove {
  from {
    top: 133px;
  }
  to {
    top: -42px;
  }
}
@-webkit-keyframes mymove {
  from {
    top: 133px;
  }
  to {
    top: -42px;
  }
}

@media screen and (max-width: 1560px) {
  .anim {
    width: 740px;
    height: 490px;
  }
  .anim .di {
    width: 130px;
    height: 144px;
  }
  .anim .di2 {
    top: 58.8%;
    left: 24.6%;
  }
  .anim .di1 {
    top: 47.4%;
    left: 13%;
  }
  .anim .di3 {
    top: 21.5%;
    left: 25.4%;
  }
  .anim .di4 {
    top: 34%;
    left: 39.2%;
  }
  .anim .di5 {
    top: 46.4%;
  }
  .anim .di6 {
    top: 15.8%;
    left: 59.6%;
  }
  .anim .di7 {
    top: -8.6%;
  }
  .anim .di8 {
    top: 4.4%;
    left: 69.4%;
  }
  .anim .di .t {
    font-size: 14px;
    bottom: 15px;
    left: 20px;
  }
  .anim .di .txt {
    top: -40px;
    width: 100px;
    height: 30px;
  }
  .anim .di .txt p {
    line-height: 32px;
    font-size: 15px;
  }
  .anim .di .priss {
    height: 80px;
  }
  .anim .di .icon {
    width: 48%;
    bottom: 60px;
  }
  .anim .xing.xing1 {
    bottom: -13.8%;
    left: 18.1%;
  }
  .anim .xing.xing2 {
    top: 9.5%;
    left: 11.4%;
  }
  .anim .xing.xing3 {
    top: -7.2%;
    right: -5%;
  }
  .anim .gang.gang1 {
    top: 29.5%;
    right: 26.9%;
  }
  .anim .gang.gang2 {
    top: 16%;
    right: 27.2%;
  }
}
@media screen and (max-width: 960px) {
  .anim {
    display: none;
  }
}