.container{
    width:100%;
    height:100px;
    position:fixed;
    z-index: 1;
    bottom:0;
    left: 0;
    background-color: #66CCFF;
}

#blogTitle{
  background:none
}



.donghua{
  width: 668px;
  height: 500px;
  position: absolute;
  top: 18%;
    left: 10%;
  margin: -250px 0 0 -334px;
  overflow: hidden;
}

.fuhao{
  width: 100%;
  height: 100%;
  position: absolute;
}
.fuhao div:nth-child(odd){
  animation: hua 0.6s ease-in-out 0s , fudong 4s linear 0.6s infinite;
}
.fuhao div:nth-child(even){
  animation:hua2 0.6s ease-in-out 0s , fudong 6s linear 0.6s infinite
}
@keyframes hua {
  0%{transform: translateY(500px);}
  100%{transform: translateY(0px);}
}
@keyframes hua2 {
  0%{transform: translateY(-500px);}
  100%{transform: translateY(0px);}
}
@keyframes fudong {
  0%{transform: translateY(0px);}
  50%{transform: translateY(9px);}
  100%{transform: translateY(0px);}
}

.o{
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50px;
}
.o1{
  left: 145px;
  top: 320px;
  border: 5px #fff solid;
}
.o2{
  left: 223px;
  top: 273px;
  border: 5px #fcc010 solid;
}
.o3{
  left: 476px;
  top: 216px;
  border: 5px #3cfaf7 solid;
}
.o4{
  left: 430px;
  top: 350px;
  border: 5px #fff solid;
}
.x{
  position: absolute;
  width: 20px;
  height: 6px;
  border-radius: 50px;
}
.x::before{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  transform: rotate(90deg);
}
.x1{
  left: 178px;
  top: 169px;
  background-color: #3cfaf7;
}
.x1::before{
  background-color: #3cfaf7;
}
.x2{
  left: 395px;
  top: 140px;
  background-color: #ffbf02;
}
.x2::before{
  background-color: #ffbf02;
}
.x3{
  left: 230px;
  top: 368px;
  background-color: #ffbf02;
}
.x3::before{
  background-color: #ffbf02;
}
.d{
  width: 5px;
  height: 5px;
  position: absolute;
  border-radius: 5px;
  background-color: #fae527;
}
.d1{
  left: 290px;
  top: 101px;
  transform-origin:left 30px;
}

.d2{
  left: 495px;
  top: 150px;
}
.d3{
  left: 166px;
  top: 226px;
}
.d4{
  left: 540px;
  top: 280px;
}
.d5{
  left: 295px;
  top: 417px;
  background-color: #3cfaf7;
}
.d6{
  left: 405px;
  top: 400px;
}


.yueliang{
  width: 100%;
  height: 100%;
  position: absolute;
}
.yue{
  width: 160px;
  height: 160px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -80px 0 0 -80px;
  background-color: #fcc000;
  border-radius: 100px;
  transform: scale(0,0);
  animation: da 0.3s ease-out 0.6s forwards;
}
@keyframes da {
  0%{transform: scale(0,0);}
  100%{transform:  scale(1,1);}
}
.yue::before{
  content: "";
  display: block;
  position: absolute;
  top: 8px;
  left: 10px;
  width: 130px;
  height: 135px;
  background-color: #fae62d;
  border-radius: 60% 40% 60% 40%;
}
.yan{
  width: 12px;
  height: 12px;
  position: absolute;
  top: 66px;
  left: 50px;
  background-color: #411641;
  border-radius: 20px;
  animation: zhayan 4s linear 1s infinite;
}
.yan::before{
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  position: absolute;
  left: 38px;
  background-color: #411641;
  border-radius: 20px;
}
@keyframes zhayan {
  0%{transform: scale(1,1)}
  5%{transform: scale(1,0)}
  10%{transform: scale(1,1)}
  15%{transform: scale(1,1)}
  20%{transform: scale(1,0)}
  25%{transform: scale(1,1)}
  100%{transform: scale(1,1)}
}

.zui{
  width: 10px;
  height: 8px;
  position: absolute;
  top: 70px;
  left: 65px;
  border: 5px solid #411641;
  border-radius: 50px;
  border-top-color: transparent;
}
.hong{
  width: 12px;
  height: 9px;
  position: absolute;
  top: 82px;
  left: 45px;
  background-color: #fd7e34;
  border-radius: 20px;
  opacity: 0;
  animation: saihong 2s linear 1.8s forwards;
}
.hong::before{
  content: "";
  display: block;
  width: 12px;
  height: 9px;
  position: absolute;
  left: 48px;
  background-color: #fd7e34;
  border-radius: 20px;
}
@keyframes saihong {
  0%{opacity: 0}
  100%{opacity: 1}
}
.guangying{
  width: 100%;
  height: 100%;
  position: absolute;
}
.guang{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #62332d;
  border-radius: 200px;
}
.g1{
  width: 200px;
  height: 200px;
  opacity: 1;
  transform: scale(0,0);
  animation:g-da 0.2s ease-out 0.7s forwards , guan1 2s linear 1.5s infinite;
}
.g2{
  width: 240px;
  height: 240px;
  opacity: 0.6;
  transform: scale(0,0);
  animation:g-da 0.2s ease-out 0.7s forwards , guan2 3s linear 1.5s infinite;
}
.g3{
  width: 290px;
  height: 290px;
  opacity: 0.3;
  transform: scale(0,0);
  animation:g-da 0.3s ease-out 0.7s forwards , guan1 2s linear 1.5s infinite;
}
.g4{
  width: 330px;
  height: 330px;
  opacity: 0.2;
  transform: scale(0,0);
  animation:g-da 0.4s ease-out 0.7s forwards , guan2 2s linear 1.5s infinite;
}
.g5{
  width: 370px;
  height: 370px;
  opacity: 0.1;
  transform: scale(0,0);
  animation:g-da 0.5s ease-out 0.7s forwards , guan1 2s linear 1.5s infinite;
}
@keyframes g-da {
0%{transform: translate(-50%,-50%) scale(0,0);}
100%{transform: translate(-50%,-50%) scale(1,1);}
}


@keyframes guan1 {
  0%{border-radius: 200px;transform:translate(-50%,-50%) scale(1,1) ;}
  35%{border-radius: 200px 150px 200px 150px;transform:translate(-50%,-50%)scale(0.95,0.95)}
  70%{border-radius: 150px 200px 150px 200px;transform:translate(-50%,-50%)scale(0.95,0.95)}
  100%{border-radius: 200px;transform: translate(-50%,-50%)scale(1,1)}
}
@keyframes guan2 {
  0%{border-radius: 200px;transform:translate(-50%,-50%)scale(1,1) ;}
  35%{border-radius: 150px 200px 150px 200px;transform:translate(-50%,-50%)scale(0.95,0.95)}
  70%{border-radius: 200px 150px 200px 150px;transform:translate(-50%,-50%)scale(0.95,0.95)}
  /*50%{border-radius: 120px 180px 120px 180px;transform:translate(-50%,-50%)scale(0.95,0.95)}*/
  100%{border-radius: 200px;transform: translate(-50%,-50%)scale(1,1)}
}



/*svg colors */

.cls-1 {
  fill: rgba(255,255,255,0);
}

.cls-2 {
  fill: #faf4a8;
}

.cls-3 {
  fill: #cac277;
}

.cls-4 {
  fill: #f3ca76;
}

.cls-5 {
  fill: #fdf387;
}

.cls-6 {
  fill: #c2e4d8;
}

.cls-7 {
  fill: #aedccd;
}

.cls-8 {
  opacity: 0.5;
}

.cls-10,
.cls-16,
.cls-17,
.cls-22,
.cls-32,
.cls-38,
.cls-39,
.cls-48,
.cls-50,
.cls-56,
.cls-9 {
  fill: none;
}

.cls-16,
.cls-17,
.cls-9 {
  stroke: #dab6c4;
}

.cls-10,
.cls-18,
.cls-19,
.cls-32,
.cls-38,
.cls-39,
.cls-48,
.cls-50,
.cls-56,
.cls-9 {
  stroke-miterlimit: 10;
}

.cls-10 {
  stroke: #e6d0d8;
}

.cls-11 {
  fill: #e7d0d8;
}

.cls-12 {
  fill: #dab6c4;
}

.cls-13,
.cls-18 {
  fill: #b5d780;
}

.cls-14 {
  fill: #9cb17e;
}

.cls-15 {
  fill: #f16a83;
}

.cls-16,
.cls-17 {
  stroke-linejoin: bevel;
  stroke-width: 2px;
}

.cls-17 {
  stroke-dasharray: 14.92 4.97;
}

.cls-18 {
  stroke: #b5d780;
}

.cls-18,
.cls-19 {
  stroke-width: 0.25px;
}

.cls-19,
.cls-21 {
  fill: #aec58b;
}

.cls-19 {
  stroke: #aec58b;
}

.cls-20 {
  fill: #7d8a71;
}

.cls-23 {
  fill: #f69eac;
}

.cls-24 {
  fill: #c38f98;
}

.cls-25 {
  fill: #816872;
}

.cls-26 {
  fill: #6d6066;
}

.cls-27 {
  fill: #806871;
}

.cls-28 {
  fill: #dbbf53;
}

.cls-29 {
  fill: #bfcf30;
}

.cls-30 {
  fill: #b29ea7;
}

.cls-31 {
  fill: #8d6876;
}

.cls-32,
.cls-48 {
  stroke: #8d6876;
}

.cls-32 {
  opacity: 0.6;
}

.cls-33 {
  fill: #d2a849;
}

.cls-34 {
  fill: #e0b24d;
}

.cls-35 {
  fill: #bf6872;
}

.cls-36 {
  fill: #f0bf53;
}

.cls-37 {
  fill: #c6c49e;
}

.cls-38 {
  stroke: #f69eac;
}

.cls-39 {
  stroke: #c38f98;
}

.cls-40 {
  fill: #c5c072;
}

.cls-41 {
  fill: #fdf164;
}

.cls-42 {
  fill: #dbedd1;
}

.cls-43 {
  fill: #b2beaf;
}

.cls-44 {
  fill: #feeb19;
}

.cls-45 {
  fill: #9998c8;
}

.cls-46 {
  fill: #fef5b1;
}

.cls-47 {
  fill: #fac1c4;
}

.cls-49 {
  fill: #bfa264;
}

.cls-50 {
  stroke: #806871;
}

.cls-51 {
  fill: #ce9d2b;
}

.cls-52 {
  fill: #c06975;
}

.cls-53 {
  fill: #e0efd3;
}

.cls-54 {
  fill: #b9e1d2;
}

.cls-55 {
  fill: #fff;
}

.cls-56 {
  stroke: #231f20;
}

.cls-57 {
  fill: #ffefb8;
}

.cls-58 {
  fill: #dfedc9;
}

.cls-59 {
  fill: #f6d695;
}

.cls-60 {
  fill: #fcd6d9;
}

.cls-61 {
  fill: #a48691;
}

.cls-62 {
  fill: #eddee3;
}

.cls-63 {
  fill: #fcf8ca;
}

.cls-64 {
  fill: #b8b2d8;
}

.cls-65 {
  fill: #eff7ea;
}

.cls-66 {
  fill: #fef7b7;
}

.cls-67 {
  fill: #fee9a0;
}

.cls-99 {
  fill: #ddd162;
}



#needles {
  -webkit-animation: rotate 5s linear infinite;
          animation: rotate 5s linear infinite;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  transform-box: fill-box;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
  }
  100% {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg)
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
  }
  100% {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg)
  }
}

#arms {
  -webkit-animation: rotate-out 5s linear infinite;
          animation: rotate-out 5s linear infinite;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  transform-box: fill-box;
}

@-webkit-keyframes rotate-out {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg)
  }
}

@keyframes rotate-out {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg)
  }
}

#cabins {
  -webkit-animation: cabin-transit 5s linear infinite;
          animation: cabin-transit 5s linear infinite;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  transform-box: fill-box;
}

@-webkit-keyframes cabin-transit {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg)
  }
}

@keyframes cabin-transit {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg)
  }
}

.cabin {
  -webkit-animation: cabin-transform 5s linear infinite;
          animation: cabin-transform 5s linear infinite;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  transform-box: fill-box;
}

@-webkit-keyframes cabin-transform {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg)
  }
}

@keyframes cabin-transform {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg)
  }
}

#balloon,
#bunch_of_balloons1,
#bunch_of_balloons {
  -webkit-animation: balloon-anim 5s linear infinite;
          animation: balloon-anim 5s linear infinite;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  transform-box: fill-box;
}

@-webkit-keyframes balloon-anim {
  0% {
    -webkit-transform: rotate(0deg) translate(0);
            transform: rotate(0deg) translate(0)
  }
  25% {
    -webkit-transform: rotate(2deg) translateY(5px);
            transform: rotate(2deg) translateY(5px)
  }
  50% {
    -webkit-transform: rotate(-2deg) translateY(-5px);
            transform: rotate(-2deg) translateY(-5px)
  }
  75% {
    -webkit-transform: rotate(-2deg) translateY(5px);
            transform: rotate(-2deg) translateY(5px)
  }
  100% {
    -webkit-transform: rotate(0deg) translate(0);
            transform: rotate(0deg) translate(0)
  }
}

@keyframes balloon-anim {
  0% {
    -webkit-transform: rotate(0deg) translate(0);
            transform: rotate(0deg) translate(0)
  }
  25% {
    -webkit-transform: rotate(2deg) translateY(5px);
            transform: rotate(2deg) translateY(5px)
  }
  50% {
    -webkit-transform: rotate(-2deg) translateY(-5px);
            transform: rotate(-2deg) translateY(-5px)
  }
  75% {
    -webkit-transform: rotate(-2deg) translateY(5px);
            transform: rotate(-2deg) translateY(5px)
  }
  100% {
    -webkit-transform: rotate(0deg) translate(0);
            transform: rotate(0deg) translate(0)
  }
}

#clouds-front {
  -webkit-animation: cloud-transit infinite ease-in-out 5s;
          animation: cloud-transit infinite ease-in-out 5s;
}

#clouds-back {
  -webkit-animation: cloud-transit-2 infinite ease-out 5s;
          animation: cloud-transit-2 infinite ease-out 5s;
}

@-webkit-keyframes cloud-transit {
  0% {
    opacity: 0
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-5%);
            transform: translateX(-5%);
    opacity: 0;
  }
}

@keyframes cloud-transit {
  0% {
    opacity: 0
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-5%);
            transform: translateX(-5%);
    opacity: 0;
  }
}

@-webkit-keyframes cloud-transit-2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(5%);
            transform: translateX(5%);
  }
}

@keyframes cloud-transit-2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(5%);
            transform: translateX(5%);
  }
}