@charset "utf-8";

.jump_2 { animation: jump_2 1.5s ease-in-out infinite alternate;}
.rotate { animation: rotate 2.3s linear infinite; transform-origin: right bottom;}
.rotate_A04 { animation: rotate_A04 7s linear infinite; transform-origin: bottom center;}

@media screen and (min-width:768px){
  .float { animation: float 1.8s ease-in-out infinite alternate;}
  .jump { animation: jump 1.5s ease-in-out infinite alternate;}
}

@media screen and (max-width:767px){
  .float_m { animation: float_m 1.8s ease-in-out infinite alternate;}
  .jump_m { animation: jump_m 1.5s ease-in-out infinite alternate;}
  .drop_1 { animation: drop_1 1.5s ease-in-out infinite alternate; transform-origin: right top;}
  .drop_2 { animation: drop_2 1.5s ease-in-out infinite alternate; transform-origin: left bottom;}
  .drop_3 { animation: drop_3 1.5s ease-in-out infinite alternate; transform-origin: left top;}
}

/*飄*/
@keyframes float {
  from { transform: translate(0,-2px);}
  to { transform: translate(0,5px);} /*下浮高度*/
}
@keyframes float_m {
  from { transform: translate(0,-.5vw);}
  to { transform: translate(0,.5vw);} /*下浮高度*/
}

/*轉*/
@keyframes rotate {
  0% { transform: rotate(-2deg);}
  50% { transform: rotate(2deg);}
  100% { transform: rotate(-2deg);}
}
@keyframes rotate_A04 {
  0% { transform: rotate(0deg);}
  50% { transform: rotate(150deg);}
  100% { transform: rotate(0deg);}
}

/*跳*/
@keyframes jump {
  from { transform: translate(0,-20px);}
  to { transform: translate(0,25px);}
}
@keyframes jump_2 {
  from { transform: scale(.6);}
  to { transform: scale(1);}
}
@keyframes jump_m {
  from { transform: translate(0,-2vw);}
  to { transform: translate(0,2.5vw);}
}

/*水滴*/
@keyframes drop_1 {
  from { transform: translate(.5vw,-1vw) scale(.9);}
  to   { transform: translate(0,0) scale(1);}
}
@keyframes drop_2 {
  from { transform: translate(0,0) scale(.9);}
  to   { transform: translate(.5vw,-1vw) scale(1);}
}
@keyframes drop_3 {
  from { transform: translate(-.5vw,-1vw) scale(.9);}
  to   { transform: translate(0,0) scale(1);}
}


/*閃光*/
.lightSweep { position: absolute; bottom: 0;  background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); overflow: hidden; z-index: 30; pointer-events: none;
  -webkit-filter: brightness(1.5);
  -webkit-mask-size: 300% 200%;
  -webkit-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
  -webkit-transition: -webkit-mask-position;
  -webkit-animation-timing-function: linear;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-filter: brightness(1.5);
  -moz-mask-size: 300% 200%;
  -moz-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
  -moz-transition: -webkit-mask-position;
  -moz-animation-timing-function: linear;
  -moz-transform: translate3d(0, 0, 0);
  -o-filter: brightness(1.5);
  -o-mask-size: 300% 200%;
  -o-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
  -o-transition: -webkit-mask-position;
  -o-animation-timing-function: linear;
  -o-transform: translate3d(0, 0, 0);
  filter: brightness(1.5);
  mask-size: 300% 200%;
  mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
  transition: -webkit-mask-position;
  animation-timing-function: linear;
  transform: translate3d(0, 0, 0);
  transition-duration: 2s;
  animation: move 2s ease-out infinite;
}

.animated.infinite {
  animation-iteration-count: infinite;
}