/*蝴蝶飛*/

.banner-butterfly{
  left: -9%;
  top: 0;
  animation: butterfly 6s ease 0s infinite alternate;
}

.butterfly{
	position: absolute;
    top: -55px;
    left: -180px;
    animation: butterfly 6s ease 0s infinite alternate;
}

@keyframes butterfly
{
    0%{
   
    transform: translateX(0)translateY(0);
     -webkit-transform: translateX(0)translateY(0);
  }

  	33% {
  	transform:translateX(-30px) translateY(15px);
    -webkit-transform: translateX(-30px)translateY(15px);

  }

  	66% {
  	transform:translateX(-10px) translateY(0);
    -webkit-transform: translateX(-10px)translateY(0);

  }
  	100%{
  	transform: translateX(0)translateY(0);
  	-webkit-transform: translateX(0)translateY(0);
    
  }

}

@-webkit-keyframes butterfly
{ 
	0%{
	transform: translateX(0)translateY(0);
    -webkit-transform: translateX(0)translateY(0);
    
  }

  	33% {
  	transform:translateX(-30px) translateY(15px);
    -webkit-transform: translateX(-30px)translateY(15px);
   
  }

  	66% {
  	 transform:translateX(-10px) translateY(0);
    -webkit-transform: translateX(-10px)translateY(0);
   
  }
  	100%{
  	-webkit-transform: translateX(0)translateY(0);
    transform: translateX(0)translateY(0);
  }
}


.butterfly img, .banner-butterfly img{
	position: absolute;
	animation: butterfly-skew 3s ease 0s infinite;
}


@keyframes butterfly-skew
{
 	0% {
    -webkit-transform: skewX(0);
    transform: skewX(0);
  }
  	50% {
   
    transform:skewX(10deg);
     -webkit-transform: skewX(10deg);
  }
  	100%{
  	
    transform: skewX(0);
    -webkit-transform: skewX(0);
  }
}

@-webkit-keyframes butterfly-skew
{  
	0% {
	transform: skewX(0);
    -webkit-transform: skewX(0);

  }
  	50% {
  	transform:skewX(10deg);
    -webkit-transform: skewX(10deg);
 
  }
  	100%{
  	transform: skewX(0);
  	-webkit-transform: skewX(0);

  }
}
.banner-butterfly2{
    top: -12%;
    left: 3%;
    animation: butterfly2 5s ease 0s infinite alternate;
}
.butterfly2{
	position: absolute;
    top: -230px;
    left: 40px;
    animation: butterfly2 5s ease 0s infinite alternate;
}


@keyframes butterfly2 {
 	0%{
  	transform: translateX(0)translateY(0);
    -webkit-transform: translateX(0)translateY(0);
    -ms-transform:translateX(0) translateY(0);

  }

  	33% {
  	transform: translateX(15px)translateY(-35px);
    -webkit-transform: translateX(15px)translateY(-35px);
    -ms-transform: translateX(15px)translateY(-35px);
    
  }

  	66% {
  	 transform: translateX(5px) translateY(-3px);
    -webkit-transform: translateX(5px) translateY(-3px);
    -ms-transform: translateX(5px) translateY(-3px);
   
  }
  	100%{
  	
    transform: translateX(0)translateY(0);
  }
}

@-webkit-keyframes butterfly2{
	 0%{
  	transform: translateX(0)translateY(0);
    -webkit-transform: translateX(0)translateY(0);
    -ms-transform:translateX(0) translateY(0);

  }

  33% {
  	transform: translateX(15px)translateY(-35px);
    -webkit-transform: translateX(15px)translateY(-35px);
    -ms-transform: translateX(15px)translateY(-35px);
    
  }

  66% {
  	 transform: translateX(5px) translateY(-3px);
    -webkit-transform: translateX(5px) translateY(-3px);
    -ms-transform: translateX(5px) translateY(-3px);
   
  }
  100%{
  	
    transform: translateX(0)translateY(0);
  }
}


.butterfly2 img, .banner-butterfly2 img{
	position: absolute;
	animation: butterfly2-skew 3s ease 0s infinite;
}

@keyframes butterfly2-skew{
	0% {
    -webkit-transform: skewY(0);
    transform: skewY(0);
  }
  	33% {
    -webkit-transform: skewY(3deg);
    transform:skewY(3deg);
  }
  	66% {
    -webkit-transform: skewY(6deg);
    transform:skewY(6deg);
  }
  	100% {
    -webkit-transform: skewY(0);
    transform: skewY(0);
  }
}
@-webkit-keyframes butterfly2-skew{
  0% {
    -webkit-transform: skewY(0);
    transform: skewY(0);
  }
    33% {
    -webkit-transform: skewY(3deg);
    transform:skewY(3deg);
  }
    66% {
    -webkit-transform: skewY(6deg);
    transform:skewY(6deg);
  }
    100% {
    -webkit-transform: skewY(0);
    transform: skewY(0);
  }
}
.banner-butterfly3{
    top: -27%;
    left: 20%;
   animation: butterfly3 5s ease 0s infinite alternate;
}
.butterfly3{
    top: -295px;
    right: 450px;
   animation: butterfly3 5s ease 0s infinite alternate;
}

@keyframes butterfly3 {
    0%{
    transform: translateX(0)translateY(0);
    -webkit-transform: translateX(0)translateY(0);
    -ms-transform:translateX(0) translateY(0);
  }

    33% {
    transform: translateX(-30px)translateY(35px);
    -webkit-transform: translateX(-30px)translateY(35px);
    -ms-transform: translateX(-30px)translateY(35px);
    
  }

    66% {
     transform: translateX(-15px) translateY(-3px);
    -webkit-transform: translateX(-15px) translateY(-3px);
    -ms-transform: translateX(-15px) translateY(-3px);
   
  }
    100%{
    transform: translateX(0)translateY(0);
  }
}

@-webkit-keyframes butterfly3{
   0%{
    transform: translateX(0)translateY(0);
    -webkit-transform: translateX(0)translateY(0);
    -ms-transform:translateX(0) translateY(0);
  }

    33% {
    transform: translateX(-30px)translateY(35px);
    -webkit-transform: translateX(-30px)translateY(35px);
    -ms-transform: translateX(-30px)translateY(35px);
    
  }

    66% {
     transform: translateX(-15px) translateY(-3px);
    -webkit-transform: translateX(-15px) translateY(-3px);
    -ms-transform: translateX(-15px) translateY(-3px);
   
  }
    100%{
    transform: translateX(0)translateY(0);
  }
}


.butterfly3 img, .banner-butterfly3 img{
    position: absolute;
    animation: butterfly3-skew 3s ease 0s infinite;
}

@keyframes butterfly3-skew{
    0% {
    -webkit-transform: skew(0);
    transform: skewX(0);
  }
    33% {
    -webkit-transform: skew(5deg, 5deg);
    transform:skew(5deg, 5deg);
  }
    66% {
    -webkit-transform: skew(10deg, 3deg);
    transform:skew(10deg, 3deg);
  }
    100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}
@-webkit-keyframes butterfly3-skew{
   0% {
    -webkit-transform: skew(0);
    transform: skewX(0);
  }
    33% {
    -webkit-transform: skew(5deg, 5deg);
    transform:skew(5deg, 5deg);
  }
    66% {
    -webkit-transform: skew(10deg, 3deg);
    transform:skew(10deg, 3deg);
  }
    100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}
/*花動*/
.flower-a1{
    animation: flower 20s linear 0s infinite;
}


@keyframes flower{
    0%{
    -moz-transform: translate(250px,50px) rotate(30deg) ;
    -ms-transform: translate(250px,50px) rotate(30deg) ;
    -webkit-transform: translate(250px,50px) rotate(30deg) ;
    transform: translate(250px,50px) rotate(30deg) ;
    opacity: 0;
    }
    20%{
    -moz-transform: translate(380px,150px) rotate(45deg) ;
    -ms-transform:  translate(380px,150px) rotate(45deg) ;
    -webkit-transform:  translate(380px,150px) rotate(45deg) ;
    transform: translate(380px,150px) rotate(45deg) ;
    opacity: 1;
    }
    40%{
    -moz-transform: translate(500px,300px) rotate(180deg) ;
    -ms-transform:  translate(500px,300px) rotate(180deg) ;
    -webkit-transform:  translate(500px,300px) rotate(180deg) ;
    transform: translate(500px,300px) rotate(180deg) ;
    }
    60%{
    -moz-transform: translate(650px,350px) rotate(40deg) ;
    -ms-transform: translate(650px,350px) rotate(40deg) ;
    -webkit-transform: translate(650px,350px) rotate(40deg) ;
    transform: translate(650px,350px) rotate(40deg) ;
    }
    80%{
    -moz-transform: translate(770px,380px) rotate(270deg) ;
    -ms-transform:translate(770px,380px) rotate(270deg) ;
    -webkit-transform: translate(770px,380px) rotate(270deg) ;
    transform: translate(770px,380px) rotate(270deg) ;
    opacity: 1;
    }

    100%{
    -moz-transform: translate(900px,450px) rotate(-180deg) ;
    -ms-transform: translate(900px,450px) rotate(-180deg) ;
    -webkit-transform: translate(900px,450px) rotate(-180deg) ;
    transform: translate(900px,450px) rotate(-180deg) ;
    opacity: 0;
    }
  
}
@-webkit-keyframes flower{
    0%{
    -moz-transform: translate(250px,50px) rotate(30deg) ;
    -ms-transform: translate(250px,50px) rotate(30deg) ;
    -webkit-transform: translate(250px,50px) rotate(30deg) ;
    transform: translate(250px,50px) rotate(30deg) ;
    opacity: 0;
    }
    20%{
    -moz-transform: translate(380px,150px) rotate(45deg) ;
    -ms-transform:  translate(380px,150px) rotate(45deg) ;
    -webkit-transform:  translate(380px,150px) rotate(45deg) ;
    transform: translate(380px,150px) rotate(45deg) ;
    opacity: 1;
    }
    40%{
    -moz-transform: translate(500px,300px) rotate(180deg) ;
    -ms-transform:  translate(500px,300px) rotate(180deg) ;
    -webkit-transform:  translate(500px,300px) rotate(180deg) ;
    transform: translate(500px,300px) rotate(180deg) ;
    }
    60%{
    -moz-transform: translate(650px,350px) rotate(40deg) ;
    -ms-transform: translate(650px,350px) rotate(40deg) ;
    -webkit-transform: translate(650px,350px) rotate(40deg) ;
    transform: translate(650px,350px) rotate(40deg) ;
    }
    80%{
    -moz-transform: translate(770px,380px) rotate(270deg) ;
    -ms-transform:translate(770px,380px) rotate(270deg) ;
    -webkit-transform: translate(770px,380px) rotate(270deg) ;
    transform: translate(770px,380px) rotate(270deg) ;
    opacity: 1;
    }

    100%{
    -moz-transform: translate(900px,450px) rotate(-180deg) ;
    -ms-transform: translate(900px,450px) rotate(-180deg) ;
    -webkit-transform: translate(900px,450px) rotate(-180deg) ;
    transform: translate(900px,450px) rotate(-180deg) ;
    opacity: 0;
    }
}
.flower-a2{
    animation: flower2 23s linear 0s infinite;
}


@keyframes flower2{
    0%{
    -moz-transform: translate(-150px,-50px) rotate(30deg) ;
    -ms-transform: translate(-150px,-50px) rotate(30deg) ;
    -webkit-transform: translate(-150px,-50px) rotate(30deg) ;
    transform: translate(-150px,-50px) rotate(30deg) ;
    opacity: 1;
    }
    20%{
    -moz-transform: translate(-380px,-150px) rotate(180deg) ;
    -ms-transform:  translate(-380px,-150px) rotate(180deg) ;
    -webkit-transform:  translate(-380px,-150px) rotate(180deg) ;
    transform: translate(-380px,-150px) rotate(180deg) ;
    opacity: 1;
    }
    40%{
    -moz-transform: translate(-500px,-300px) rotate(-180deg) ;
    -ms-transform:  translate(-500px,-300px) rotate(-180deg) ;
    -webkit-transform:  translate(-500px,-300px) rotate(-180deg) ;
    transform: translate(-500px,-300px) rotate(-180deg) ;
    }
    60%{
    -moz-transform: translate(-650px,-350px) rotate(40deg) ;
    -ms-transform: translate(-650px,-350px) rotate(40deg) ;
    -webkit-transform: translate(-650px,-350px) rotate(40deg) ;
    transform: translate(-650px,-350px) rotate(40deg) ;
    }
    80%{
    -moz-transform: translate(-770px,-380px) rotate(270deg) ;
    -ms-transform:translate(-770px,-380px) rotate(270deg) ;
    -webkit-transform: translate(-770px,-380px) rotate(270deg) ;
    transform: translate(-770px,-380px) rotate(270deg) ;
    opacity: 1;
    }

    100%{
    -moz-transform: translate(-900px,-450px) rotate(-180deg) ;
    -ms-transform: translate(-900px,-450px) rotate(-180deg) ;
    -webkit-transform: translate(-900px,-450px) rotate(-180deg) ;
    transform: translate(-900px,-450px) rotate(-180deg) ;
    opacity: 0;
    }
  
}
@-webkit-keyframes flower2{
    0%{
    -moz-transform: translate(-150px,-50px) rotate(30deg) ;
    -ms-transform: translate(-150px,-50px) rotate(30deg) ;
    -webkit-transform: translate(-150px,-50px) rotate(30deg) ;
    transform: translate(-150px,-50px) rotate(30deg) ;
    opacity: 1;
    }
    20%{
    -moz-transform: translate(-380px,-150px) rotate(180deg) ;
    -ms-transform:  translate(-380px,-150px) rotate(180deg) ;
    -webkit-transform:  translate(-380px,-150px) rotate(180deg) ;
    transform: translate(-380px,-150px) rotate(180deg) ;
    opacity: 1;
    }
    40%{
    -moz-transform: translate(-500px,-300px) rotate(-180deg) ;
    -ms-transform:  translate(-500px,-300px) rotate(-180deg) ;
    -webkit-transform:  translate(-500px,-300px) rotate(-180deg) ;
    transform: translate(-500px,-300px) rotate(-180deg) ;
    }
    60%{
    -moz-transform: translate(-650px,-350px) rotate(40deg) ;
    -ms-transform: translate(-650px,-350px) rotate(40deg) ;
    -webkit-transform: translate(-650px,-350px) rotate(40deg) ;
    transform: translate(-650px,-350px) rotate(40deg) ;
    }
    80%{
    -moz-transform: translate(-770px,-380px) rotate(270deg) ;
    -ms-transform:translate(-770px,-380px) rotate(270deg) ;
    -webkit-transform: translate(-770px,-380px) rotate(270deg) ;
    transform: translate(-770px,-380px) rotate(270deg) ;
    opacity: 1;
    }

    100%{
    -moz-transform: translate(-900px,-450px) rotate(-180deg) ;
    -ms-transform: translate(-900px,-450px) rotate(-180deg) ;
    -webkit-transform: translate(-900px,-450px) rotate(-180deg) ;
    transform: translate(-900px,-450px) rotate(-180deg) ;
    opacity: 0;
    }
  
}


.flower-a3{
    animation: flower3 25s linear 0s infinite;
}


@keyframes flower3{
    0%{
    -moz-transform: translate(-150px,0px) rotate(30deg) ;
    -ms-transform: translate(-150px,0px) rotate(30deg) ;
    -webkit-transform: translate(-150px,0px) rotate(30deg) ;
    transform: translate(-150px,0px) rotate(30deg) ;
    opacity: 1;
    }
    20%{
    -moz-transform: translate(-300px,30px) rotate(-180deg) ;
    -ms-transform:  translate(-300px,30px) rotate(-180deg) ;
    -webkit-transform:  translate(-300px,30px) rotate(-180deg) ;
    transform: translate(-300px,30px) rotate(-180deg) ;
    opacity: 1;
    }
    40%{
    -moz-transform: translate(-430px,50px) rotate(90deg) ;
    -ms-transform:  translate(-430px,50px) rotate(90deg) ;
    -webkit-transform:  translate(-430px,50px) rotate(90deg) ;
    transform: translate(-430px,50px) rotate(90deg) ;
    }
    60%{
    -moz-transform: translate(-550px,100px) rotate(240deg) ;
    -ms-transform: translate(-550px,100px) rotate(240deg) ;
    -webkit-transform: translate(-550px,100px) rotate(240deg) ;
    transform: translate(-550px,100px) rotate(240deg) ;
    }
    80%{
    -moz-transform: translate(-650px,150px) rotate(-10deg) ;
    -ms-transform:translate(-650px,150px) rotate(-10deg) ;
    -webkit-transform: translate(-650px,150px) rotate(-10deg) ;
    transform: translate(-650px,150px) rotate(-10deg) ;
    opacity: 1;
    }

    100%{
    -moz-transform: translate(-700px,250px) rotate(150deg) ;
    -ms-transform: translate(-700px,250px) rotate(150deg) ;
    -webkit-transform: translate(-700px,250px) rotate(150deg) ;
    transform: translate(-700px,250px) rotate(150deg) ;
    opacity: 0;
    }
  
}
@-webkit-keyframes flower3{
    0%{
    -moz-transform: translate(-150px,0px) rotate(30deg) ;
    -ms-transform: translate(-150px,0px) rotate(30deg) ;
    -webkit-transform: translate(-150px,0px) rotate(30deg) ;
    transform: translate(-150px,0px) rotate(30deg) ;
    opacity: 1;
    }
    20%{
    -moz-transform: translate(-300px,30px) rotate(-180deg) ;
    -ms-transform:  translate(-300px,30px) rotate(-180deg) ;
    -webkit-transform:  translate(-300px,30px) rotate(-180deg) ;
    transform: translate(-300px,30px) rotate(-180deg) ;
    opacity: 1;
    }
    40%{
    -moz-transform: translate(-430px,50px) rotate(90deg) ;
    -ms-transform:  translate(-430px,50px) rotate(90deg) ;
    -webkit-transform:  translate(-430px,50px) rotate(90deg) ;
    transform: translate(-430px,50px) rotate(90deg) ;
    }
    60%{
    -moz-transform: translate(-550px,100px) rotate(240deg) ;
    -ms-transform: translate(-550px,100px) rotate(240deg) ;
    -webkit-transform: translate(-550px,100px) rotate(240deg) ;
    transform: translate(-550px,100px) rotate(240deg) ;
    }
    80%{
    -moz-transform: translate(-650px,150px) rotate(-10deg) ;
    -ms-transform:translate(-650px,150px) rotate(-10deg) ;
    -webkit-transform: translate(-650px,150px) rotate(-10deg) ;
    transform: translate(-650px,150px) rotate(-10deg) ;
    opacity: 1;
    }

    100%{
    -moz-transform: translate(-700px,250px) rotate(150deg) ;
    -ms-transform: translate(-700px,250px) rotate(150deg) ;
    -webkit-transform: translate(-700px,250px) rotate(150deg) ;
    transform: translate(-700px,250px) rotate(150deg) ;
    opacity: 0;
    }
}


.flower-a4{
    animation: flower4 18s linear 0s infinite;
}
@keyframes flower4{
    0%{
    transform: translate(-190px,0px) rotate(30deg) ;
    opacity: 1;
    }
    20%{
    transform: translate(-280px,10px) rotate(360deg) ;
    opacity: 1;
    }
    40%{

    transform: translate(-380px,60px) rotate(90deg) ;
    }
    60%{

    transform: translate(-450px,150px) rotate(240deg) ;
    }
    80%{

    transform: translate(-560px,280px) rotate(-10deg) ;
    opacity: 1;
    }

    100%{
    transform: translate(-700px,350px) rotate(150deg) ;
    opacity: 0;
    }
  
}
@-webkit-keyframes flower4{
    0%{
    -moz-transform: translate(-190px,0px) rotate(30deg)  ;
    -ms-transform: translate(-190px,0px) rotate(30deg) ;
    -webkit-transform: translate(-190px,0px) rotate(30deg)  ;
    transform: translate(-190px,0px) rotate(30deg)  ;
    opacity: 1;
    }
    20%{
    -moz-transform:translate(-280px,10px) rotate(360deg) ;
    -ms-transform: translate(-280px,10px) rotate(360deg) ;
    -webkit-transform: translate(-280px,10px) rotate(360deg) ;
    transform:translate(-280px,10px) rotate(360deg);
    opacity: 1;
    }
    40%{
    -moz-transform: translate(-380px,60px) rotate(90deg);
    -ms-transform: translate(-380px,60px) rotate(90deg) ;
    -webkit-transform:  translate(-380px,60px) rotate(90deg) ;
    transform:translate(-380px,60px) rotate(90deg) ;
    }
    60%{
    -moz-transform: translate(-450px,150px) rotate(240deg) ;
    -ms-transform: translate(-450px,150px) rotate(240deg);
    -webkit-transform: translate(-450px,150px) rotate(240deg) ;
    transform:translate(-450px,150px) rotate(240deg) ;
    }
    80%{
    -moz-transform: translate(-560px,280px) rotate(-10deg) ;
    -ms-transform:translate(-560px,280px) rotate(-10deg);
    -webkit-transform:translate(-560px,280px) rotate(-10deg);
    transform:translate(-560px,280px) rotate(-10deg) ;
    opacity: 1;
    }

    100%{
    -moz-transform: translate(-700px,350px) rotate(150deg);
    -ms-transform: translate(-700px,350px) rotate(150deg) ;
    -webkit-transform: translate(-700px,350px) rotate(150deg) ;
    transform: translate(-700px,350px) rotate(150deg) ;
    opacity: 0;
    }
}

.flower-a5{
    animation: flower5 21s linear 0s infinite;
}
@keyframes flower5{
    0%{
    transform: translate(0px,0px) rotate(30deg) ;
    opacity: 1;
    }
    20%{
    transform: translate(300px,-180px) rotate(180deg) ;
    opacity: 1;
    }
    40%{

    transform: translate(400px,-260px) rotate(90deg) ;
    }
    60%{

    transform: translate(500px,-350px) rotate(240deg) ;
    }
    80%{

    transform: translate(600px,-450px) rotate(-10deg) ;
    opacity: 1;
    }

    100%{
    transform: translate(700px,-650px) rotate(-300deg) ;
    opacity: 0;
    }
  
}
@-webkit-keyframes flower4{
    0%{
    -moz-transform: translate(-190px,0px) rotate(30deg)  ;
    -ms-transform: translate(-190px,0px) rotate(30deg) ;
    -webkit-transform: translate(-190px,0px) rotate(30deg)  ;
    transform: translate(-190px,0px) rotate(30deg)  ;
    opacity: 1;
    }
    20%{
    -moz-transform:translate(-280px,10px) rotate(360deg) ;
    -ms-transform: translate(-280px,10px) rotate(360deg) ;
    -webkit-transform: translate(-280px,10px) rotate(360deg) ;
    transform:translate(-280px,10px) rotate(360deg);
    opacity: 1;
    }
    40%{
    -moz-transform: translate(-380px,60px) rotate(90deg);
    -ms-transform: translate(-380px,60px) rotate(90deg) ;
    -webkit-transform:  translate(-380px,60px) rotate(90deg) ;
    transform:translate(-380px,60px) rotate(90deg) ;
    }
    60%{
    -moz-transform: translate(-450px,150px) rotate(240deg) ;
    -ms-transform: translate(-450px,150px) rotate(240deg);
    -webkit-transform: translate(-450px,150px) rotate(240deg) ;
    transform:translate(-450px,150px) rotate(240deg) ;
    }
    80%{
    -moz-transform: translate(-560px,280px) rotate(-10deg) ;
    -ms-transform:translate(-560px,280px) rotate(-10deg);
    -webkit-transform:translate(-560px,280px) rotate(-10deg);
    transform:translate(-560px,280px) rotate(-10deg) ;
    opacity: 1;
    }

    100%{
    -moz-transform: translate(-700px,350px) rotate(150deg);
    -ms-transform: translate(-700px,350px) rotate(150deg) ;
    -webkit-transform: translate(-700px,350px) rotate(150deg) ;
    transform: translate(-700px,350px) rotate(150deg) ;
    opacity: 0;
    }
}

.flower-a6{
    animation: flower6 18s linear 0s infinite;
}
@keyframes flower6{
    0%{
    transform: translate(150px,0px) rotate(30deg) ;
    opacity: 1;
    }
    20%{
    transform: translate(300px,-300px) rotate(180deg) ;
    opacity: 1;
    }
    40%{

    transform: translate(400px,-350px) rotate(90deg) ;
    }
    60%{

    transform: translate(500px,-430px) rotate(240deg) ;
    }
    80%{

    transform: translate(600px,-560px) rotate(-10deg) ;
    opacity: 1;
    }

    100%{
    transform: translate(700px,-660px) rotate(-300deg) ;
    opacity: 0;
    }
  
}
@-webkit-keyframes flower4{
    0%{
    -moz-transform: translate(-190px,0px) rotate(30deg)  ;
    -ms-transform: translate(-190px,0px) rotate(30deg) ;
    -webkit-transform: translate(-190px,0px) rotate(30deg)  ;
    transform: translate(-190px,0px) rotate(30deg)  ;
    opacity: 1;
    }
    20%{
    -moz-transform:translate(-280px,10px) rotate(360deg) ;
    -ms-transform: translate(-280px,10px) rotate(360deg) ;
    -webkit-transform: translate(-280px,10px) rotate(360deg) ;
    transform:translate(-280px,10px) rotate(360deg);
    opacity: 1;
    }
    40%{
    -moz-transform: translate(-380px,60px) rotate(90deg);
    -ms-transform: translate(-380px,60px) rotate(90deg) ;
    -webkit-transform:  translate(-380px,60px) rotate(90deg) ;
    transform:translate(-380px,60px) rotate(90deg) ;
    }
    60%{
    -moz-transform: translate(-450px,150px) rotate(240deg) ;
    -ms-transform: translate(-450px,150px) rotate(240deg);
    -webkit-transform: translate(-450px,150px) rotate(240deg) ;
    transform:translate(-450px,150px) rotate(240deg) ;
    }
    80%{
    -moz-transform: translate(-560px,280px) rotate(-10deg) ;
    -ms-transform:translate(-560px,280px) rotate(-10deg);
    -webkit-transform:translate(-560px,280px) rotate(-10deg);
    transform:translate(-560px,280px) rotate(-10deg) ;
    opacity: 1;
    }

    100%{
    -moz-transform: translate(-700px,350px) rotate(150deg);
    -ms-transform: translate(-700px,350px) rotate(150deg) ;
    -webkit-transform: translate(-700px,350px) rotate(150deg) ;
    transform: translate(-700px,350px) rotate(150deg) ;
    opacity: 0;
    }
}

.flower-a7{
    animation: flower7 15s linear 0s infinite;
}
@keyframes flower7{
    0%{
    transform: translate(380px,100px) rotate(30deg) ;
    opacity: 1;
    }
    20%{
    transform: translate(480px,100px) rotate(180deg) ;
    opacity: 1;
    }
    40%{

    transform: translate(580px,200px) rotate(-90deg) ;
    }
    60%{

    transform: translate(680px,280px) rotate(360deg) ;
    }
    80%{

    transform: translate(780px,350px) rotate(-10deg) ;
    opacity: 1;
    }

    100%{
    transform: translate(880px,400px) rotate(-300deg) ;
    opacity: 0;
    }
}

.flower-a8{
    animation: flower8 17s linear 0s infinite;
}
@keyframes flower8{
    0%{
    transform: translate(0px,200px) rotate(30deg) ;
    opacity: 1;
    }
    20%{
    transform: translate(30px,300px) rotate(180deg) ;
    opacity: 1;
    }
    40%{

    transform: translate(-20px,400px) rotate(-90deg) ;
    }
    60%{

    transform: translate(-50px,580px) rotate(360deg) ;
    }
    80%{

    transform: translate(0px,650px) rotate(-10deg) ;
    opacity: 1;
    }

    100%{
    transform: translate(50px,700px) rotate(-300deg) ;
    opacity: 0;
    }
}
    
.flower-a9{
    animation: flower9 20s linear 0s infinite;
}
@keyframes flower9{
    0%{
    transform: translate(0px,200px) rotate(30deg) ;
    opacity: 1;
    }
    20%{
    transform: translate(100px,300px) rotate(180deg) ;
    opacity: 1;
    }
    40%{

    transform: translate(80px,400px) rotate(-90deg) ;
    }
    60%{

    transform: translate(60px,580px) rotate(360deg) ;
    }
    80%{

    transform: translate(120px,650px) rotate(-10deg) ;
    opacity: 1;
    }

    100%{
    transform: translate(250px,700px) rotate(-300deg) ;
    opacity: 0;
    }
}
.flower-a10{
    animation: flower10 24s linear 0s infinite;
}
@keyframes flower10{
    0%{
    transform: translate(-100px,200px) rotate(30deg) ;
    opacity: 1;
    }
    20%{
    transform: translate(-200px,300px) rotate(180deg) ;
    opacity: 1;
    }
    40%{

    transform: translate(-280px,400px) rotate(-90deg) ;
    }
    60%{

    transform: translate(-360px,580px) rotate(360deg) ;
    }
    80%{

    transform: translate(-420px,650px) rotate(-10deg) ;
    opacity: 1;
    }

    100%{
    transform: translate(-550px,700px) rotate(-300deg) ;
    opacity: 0;
    }
}
.flower-a11{
    animation: flower11 17s linear 0s infinite;
}
@keyframes flower11{
    0%{
    transform: translate(-200px,200px) rotate(30deg) ;
    opacity: 1;
    }
    20%{
    transform: translate(-400px,300px) rotate(180deg) ;
    opacity: 1;
    }
    40%{

    transform: translate(-580px,400px) rotate(-90deg) ;
    }
    60%{

    transform: translate(-660px,580px) rotate(360deg) ;
    }
    80%{

    transform: translate(-720px,650px) rotate(-10deg) ;
    opacity: 1;
    }

    100%{
    transform: translate(-850px,700px) rotate(-300deg) ;
    opacity: 0;
    }
}
.flower-a12{
    animation: flower12 12s linear 0s infinite;
}
@keyframes flower12{
    0%{
    transform: translate(200px,200px) rotate(30deg) ;
    opacity: 1;
    }
    20%{
    transform: translate(400px,300px) rotate(180deg) ;
    opacity: 1;
    }
    40%{

    transform: translate(580px,400px) rotate(-90deg) ;
    }
    60%{

    transform: translate(660px,580px) rotate(360deg) ;
    }
    80%{

    transform: translate(720px,650px) rotate(-10deg) ;
    opacity: 1;
    }

    100%{
    transform: translate(850px,700px) rotate(-300deg) ;
    opacity: 0;
    }
}
.flower-a13{
    animation: flower13 10s linear 0s infinite;
}
@keyframes flower13{
    0%{
    transform: translate(400px,20px) rotate(30deg) ;
    opacity: 1;
    }
    20%{
    transform: translate(500px,30px) rotate(-180deg) ;
    opacity: 1;
    }
    40%{

    transform: translate(680px,35px) rotate(-90deg) ;
    }
    60%{

    transform: translate(760px,32px) rotate(-360deg) ;
    }
    80%{

    transform: translate(820px,28px) rotate(-500deg) ;
    opacity: 1;
    }

    100%{
    transform: translate(950px,25px) rotate(-300deg) ;
    opacity: 0;
    }
}
.flower-a14{
    animation: flower14 8s linear 0s infinite;
}
@keyframes flower14{
    0%{
    transform: translate(300px,250px) rotate(30deg) ;
    opacity: 1;
    }
    20%{
    transform: translate(320px,380px) rotate(-180deg) ;
    opacity: 1;
    }
    40%{

    transform: translate(280px,490px) rotate(-90deg) ;
    }
    60%{

    transform: translate(300px,570px) rotate(-360deg) ;
    }
    80%{

    transform: translate(290px,630px) rotate(-500deg) ;
    opacity: 1;
    }

    100%{
    transform: translate(310px,780px) rotate(-300deg) ;
    opacity: 0;
    }
}

.flower-a15{
    animation: flower15 8s linear 0s infinite;
}
@keyframes flower15{
    0%{
    transform: translate(300px,0px) rotate(30deg) ;
    opacity: 1;
    }
    20%{
    transform: translate(420px,-100px) rotate(-180deg) ;
    opacity: 1;
    }
    40%{

    transform: translate(550px,-120px) rotate(-90deg) ;
    }
    60%{

    transform: translate(680px,-160px) rotate(-360deg) ;
    }
    80%{

    transform: translate(800px,-250px) rotate(-500deg) ;
    opacity: 1;
    }

    100%{
    transform: translate(900px,-300px) rotate(-300deg) ;
    opacity: 0;
    }
}

.flower-a16{
    animation: flower16 11s linear 0s infinite;
}
@keyframes flower16{
    0%{
    transform: translate(-21px,-100px) rotate(180deg) ;
    opacity: 1;
    }
    20%{
    transform: translate(-30px,-120px) rotate(0deg) ;
    opacity: 1;
    }
    40%{

    transform: translate(-60px,-180px) rotate(200deg) ;
    }
    60%{

    transform: translate(-90px,-250px) rotate(-160deg) ;
    }
    80%{

    transform: translate(-110px,-320px) rotate(160deg) ;
    opacity: 1;
    }

    100%{
    transform: translate(-90px,-360px) rotate(-180deg) ;
    opacity: 0;
    }
}
.flower-a17{
    animation: flower17 10s linear 0s infinite;
}
@keyframes flower17{
    0%{
    transform: translate(-100px,-10px) rotate(180deg) ;
    opacity: 1;
    }
    20%{
    transform: translate(-150px,-30px) rotate(0deg) ;
    opacity: 1;
    }
    40%{

    transform: translate(-200px,-50px) rotate(200deg) ;
    }
    60%{

    transform: translate(-280px,-150px) rotate(-160deg) ;
    }
    80%{

    transform: translate(-350px,-250px) rotate(160deg) ;
    opacity: 1;
    }

    100%{
    transform: translate(-430px,-360px) rotate(-180deg) ;
    opacity: 0;
    }
}

.flower-a18{
    animation: flower18 10s linear 0s infinite;
}
@keyframes flower18{
    0%{
    transform: translate(55px,10px) rotate(180deg) ;
    opacity: 1;
    }
    20%{
    transform: translate(70px,100px) rotate(0deg) ;
    opacity: 1;
    }
    40%{

    transform: translate(100px,120px) rotate(200deg) ;
    }
    60%{

    transform: translate(180px,140px) rotate(-160deg) ;
    }
    80%{

    transform: translate(260px,110px) rotate(160deg) ;
    opacity: 1;
    }

    100%{
    transform: translate(380px,150px) rotate(-180deg) ;
    opacity: 0;
    }
}
/* 
.flower2 img{

    animation: flower-img 5s ease 0s infinite alternate;
} */
 @keyframes flower-img{ 
    0%,100%{
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    }
    50%{
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    }
}

@-webkit-keyframes flower-img{ 
    0%,100%{
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    }
    50%{
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    }
}
/*進入頁*/
 .activity, .traffic-box{
     animation: fadeIn 3s ease 0s 1 alternate;
 }
.title, .more, .news-list li, .attractions-box, .link, .introduction-box, .navigate{
    animation: fadeIn 2s ease 0s 1 alternate;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/* 
.news-list li{
     animation: fadeInUp 3s ease 0s 1 alternate;
}
 */


@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}