@keyframes flower
{
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}
@keyframes lantern
{
  0% {
    transform: rotateZ(-5deg);
  }
  25% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(5deg);
  }
  75% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-5deg);
  }
}
@keyframes cow
{
  from {
    transform: translateY(-30px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes fireworks
{
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1.5);
  }
}
.new_year_animation_mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.new_year_animation_mask:before {
  content: '';
  display: block;
  position: absolute;
  z-index: 999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #333;
  opacity: 0.6;
}
.new_year_img_list {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 624px;
  height: 515px;
  margin-top: -257px;
  margin-left: -312px;
  z-index: 1000;
}
.new_year_img_main {
  width: 100%;
  height: 100%;
  background: url(./images/main.png) no-repeat;
  background-size: cover;
}
.new_year_img_flower {
  position: absolute;
  z-index: 10;
  /* width: 314px;
  height: 306px; */
  width: 160px;
  height: 156px;
  background: url(./images/flower.png) no-repeat;
  background-size: cover;
  bottom: 90px;
  left: 60px;
  transform-origin: 80px 60px;
  animation:flower 5s linear infinite;
}
.new_year_img_flower_big {
  position: absolute;
  z-index: 10;
  /* width: 376px;
  height: 363px; */
  width: 180px;
  height: 173px;
  background: url(./images/flower_big.png) no-repeat;
  background-size: cover;
  top: 30px;
  right: 90px;
  transform-origin: 90px 68px;
  animation:flower 5s linear infinite;
}
.new_year_img_lantern {
  position: absolute;
  z-index: 20;
  /* width: 234px;
  height: 477px; */
  width: 120px;
  height: 244px;
  background: url(./images/lantern.png) no-repeat;
  background-size: cover;
  top: 100px;
  left: 20px;
  transform-origin: 88px 16px;
  animation:lantern 2s linear infinite;
}
.new_year_img_cow {
  position: absolute;
  z-index: 20;
  /* width: 1325px;
  height: 1133px; */
  width: 660px;
  height: 564px;
  background: url(./images/cow.png) no-repeat;
  background-size: cover;
  bottom: 10px;
  left: 0;
  animation:cow 0.7s ease-in 1s 2;
}
.new_year_img_cloud {
  position: absolute;
  z-index: 19;
  /* width: 362px;
  height: 161px; */
  width: 200px;
  height: 88px;
  background: url(./images/cloud.png) no-repeat;
  background-size: cover;
  bottom: 180px;
  right: 16px;
}
.new_year_img_fireworks {
  position: absolute;
  z-index: 20;
  /* width: 112px;
  height: 75px; */
  width: 60px;
  height: 40px;
  background: url(./images/fireworks.png) no-repeat;
  background-size: cover;
  top: 0;
  left: 150px;
  transform: scale(0);
  animation:fireworks 1s ease-out infinite;
}
.new_year_img_fireworks_big {
  position: absolute;
  z-index: 20;
  /* width: 147px;
  height: 129px; */
  width: 70px;
  height: 61px;
  background: url(./images/fireworks_big.png) no-repeat;
  background-size: cover;
  top: 10px;
  right: 80px;
  transform: scale(0);
  animation:fireworks 1s ease-out 0.8s infinite;
}
.new_year_img_fireworks_big.bottom {
  animation:fireworks 1s ease-out 1.2s infinite;  
  top: unset;
  right: unset;
  left: 30px;
  bottom: 100px;
}
.new_year_img_fireworks.bottom {
  animation:fireworks 1s ease-out 0.5s infinite; 
  top: unset;
  left: unset;
  right: 120px;
  bottom: 100px;  
}