[data-v-43e32ab1]:export {
  menubg: #304156;
  menutext: #bfcbd9;
  menuactivetext: #409eff;
}
.clearfix[data-v-43e32ab1]:after {
  content: "";
  display: table;
  clear: both;
}
.warp[data-v-43e32ab1] {
  width: 468px;
  height: 468px;
  margin: 109px auto 126px auto;
  position: relative;
}
.warp .bg[data-v-43e32ab1] {
  width: 100%;
  height: 100%;
}
.warp .item[data-v-43e32ab1] {
  position: absolute;
}
.warp .item1[data-v-43e32ab1] {
    top: -15px;
    left: -260px;
  width: 440px;
  height: 166px;
}
.warp .item2[data-v-43e32ab1] {
  top: -53px;
  left: -215px;
  width: 443px;
  height: 166px;
  transition-delay: 0.5s;
}
.warp .item3[data-v-43e32ab1] {
    top: -16px;
    right: -222px;
  width: 403px;
  height: 166px;
  transition-delay: 1s;
}
.warp .item4[data-v-43e32ab1] {
    top: 166px;
    right: -356px;
  width: 435px;
  height: 166px;
  transition-delay: 1.5s;
}
.warp .item5[data-v-43e32ab1] {
    bottom: -80px;
    right: -228px;
  width: 403px;
  height: 166px;
  transition-delay: 2s;
}
.warp .item6[data-v-43e32ab1] {
    bottom: -127px;
    left: -36px;
  width: 272px;
  height: 212px;
  transition-delay: 2.5s;
}
.warp .item7[data-v-43e32ab1] {
    bottom: 132px;
    left: -224px;
  width: 291px;
  height: 166px;
  transition-delay: 3s;
}
.base-teature[data-v-43e32ab1] {
  position: absolute;
  opacity: 0;
  transform: translateY(100px);
  background-size: contain;
  background-repeat: no-repeat;
  transition-property: none;
  transition-duration: 1s;
}
.anim-box[data-animationed] .base-teature[data-v-43e32ab1] {
  transform: translateY(0);
  opacity: 1;
  transition-property: all;
}