@charset "utf-8";
/* CSS Document */
/* kv按鈕放大縮小*/
/*
.kv_box2 a{-webkit-animation:opacity21 2s infinite ;
	animation:opacity21 2s infinite ;
	 -webkit-animation-delay: 3s;
    animation-delay:3s;}
@-webkit-keyframes opacity21{
0%{-webkit-transform:scale(1)}
50%{-webkit-transform:scale(1.1)}
100%{-webkit-transform:scale(1)}
}
@keyframes opacity21{
0%{transform:scale(1)}
50%{transform:scale(1.1)}
100%{transform:scale(1)}
}*/

.kv_box2 a{-webkit-animation:opacity21 2s infinite ;
	animation:opacity21 2s infinite ;
	 -webkit-animation-delay: 3s;
    animation-delay:3s;}
@-webkit-keyframes opacity21{
0%{bottom: 21%;}
50%{bottom: 20%;}
100%{bottom: 21%;}
}
@keyframes opacity21{
0%{bottom: 21%;}
50%{bottom: 20%;}
100%{bottom: 21%;}
}
/*////////////////////////////////////////////*/

.op1,.op1_2,.op1_3,.op1_4,.op1_5{-webkit-animation:op1 4s .2s ease both;
animation:op1 4s .2s ease both; }
@-webkit-keyframes op1{
0%{opacity:0;}
30%{opacity:1;}
100%{opacity:1;}
}
@keyframes op1{
0%{opacity:0;}
30%{opacity:1;}
100%{opacity:1;}
}
.op2,.op2_2,.op2_3,.op2_4{-webkit-animation:op2 4s .2s ease both;
animation:op2 4s .2s ease both; }
@-webkit-keyframes op2{
0%{opacity:0}
30%{opacity:0}
60%{opacity:1}
100%{opacity:1}
}
@keyframes op2{
0%{opacity:0}
30%{opacity:0}
60%{opacity:1}
100%{opacity:1}
}


.op{-webkit-animation:op0 .5s .2s ease both;
animation:op0 .5s .2s ease both; }
@-webkit-keyframes op0{
0%{opacity:1;z-index: 1000;}
100%{opacity:0;z-index:-1;}
}
@keyframes op0{
0%{opacity:1;z-index: 1000;}
100%{opacity:0;z-index:-1;}
}

.all{-webkit-animation:all .5s .2s ease both;
animation:all .5s .2s ease both; }
@-webkit-keyframes all{
0%{opacity:0}
100%{opacity:1}
}
@keyframes all{
0%{opacity:0}
100%{opacity:1}
}
/*////////////////////////////////////////////*/
/*kv動態*/

.kv1{
-webkit-animation:kv1 1s .2s ease both;
animation:kv1 1s .2s ease both;-webkit-animation-delay:1s; 
    animation-delay:1s;}
@-webkit-keyframes kv1{
0%{opacity:0;
-webkit-transform:scale(.3)}

100%{-webkit-transform:scale(1)}
}
@keyframes kv1{
0%{opacity:0;
transform:scale(.3)}
100%{transform:scale(1)}
}

.kv2,.kv3{

-webkit-animation:kv2 2s ease both;
animation:kv2 2s ease both;
 -webkit-animation-delay:1.5s; 
    animation-delay:1.5s;}
@-webkit-keyframes kv2{
0%{opacity:0;
-webkit-transform:translateY(20px)}
100%{opacity:1;
-webkit-transform:translateY(0)}
}
@keyframes kv2{
0%{opacity:0;
transform:translateY(20px)}
100%{opacity:1;
transform:translateY(0)}
}

.kv4{
-webkit-animation:fadeIn 1s .2s ease both;
animation:fadeIn 1s .2s ease both; -webkit-animation-delay:.5s; 
    animation-delay:.5s;}
@-webkit-keyframes fadeIn{
0%{opacity:0}
100%{opacity:1}
}
@keyframes fadeIn{
0%{opacity:0}
100%{opacity:1}
}

/*////////////////////////////////////////////*/

.Act6_2{
-webkit-animation:Act62 .5s .2s ease both;
animation:Act62 .5s .2s ease both;}
@-webkit-keyframes Act62{
0%{opacity:0;
-webkit-transform:translateX(-20px)}
100%{opacity:1;
-webkit-transform:translateX(0)}
}
@keyframes Act62{
0%{opacity:0;
transform:translateX(-20px)}
100%{opacity:1;
transform:translateX(0)}
}
.Act6_3{
-webkit-animation:Act63 .5s .2s ease both;
animation:Act63 .5s .2s ease both;
 -webkit-animation-delay:.5s; 
    animation-delay:.5s;}
}
@-webkit-keyframes Act63{
0%{opacity:0;
-webkit-transform:translateX(-20px)}
100%{opacity:1;
-webkit-transform:translateX(0)}
}
@keyframes Act63{
0%{opacity:0;
transform:translateX(-20px)}
100%{opacity:1;
transform:translateX(0)}
}
.Act6_4{
-webkit-animation:Act64 .5s .2s ease both;
animation:Act64 .5s .2s ease both;
 -webkit-animation-delay:1s; 
    animation-delay:1s;}
}
@-webkit-keyframes Act64{
0%{opacity:0;
-webkit-transform:translateX(-20px)}
100%{opacity:1;
-webkit-transform:translateX(0)}
}
@keyframes Act64{
0%{opacity:0;
transform:translateX(-20px)}
100%{opacity:1;
transform:translateX(0)}
}
.Act6_5{
-webkit-animation:Act65 .5s .2s ease both;
animation:Act65 .5s .2s ease both;-webkit-animation-delay:1.5s; 
    animation-delay:1.5s;}
@-webkit-keyframes Act65{
0%{opacity:0;
-webkit-transform:translateY(-20px)}
100%{opacity:1;
-webkit-transform:translateY(0)}
}
@keyframes Act65{
0%{opacity:0;
transform:translateY(-20px)}
100%{opacity:1;
transform:translateY(0)}
}

/*////////////////////////////////////////////*/

#Animation3,#Animation4,#Animation5{
-webkit-animation:flipInX 1s .2s ease both;
animation:flipInX 1s .2s ease both;}
@-webkit-keyframes flipInX{
0%{-webkit-transform:perspective(400px) rotateX(90deg);
opacity:0}
100%{-webkit-transform:perspective(400px) rotateX(0deg);
opacity:1}
}
@keyframes flipInX{
0%{transform:perspective(400px) rotateX(90deg);
opacity:0}
100%{transform:perspective(400px) rotateX(0deg);
opacity:1}
}

/*////////////////////////////////////////////*/
.Act4 h1{
-webkit-animation:Act41 1s .2s ease both;
animation:Act41 1s .2s ease both;}
@-webkit-keyframes Act41{
0%{opacity:0;
-webkit-transform:translateY(-20px)}
100%{opacity:1;
-webkit-transform:translateY(0)}
}
@keyframes Act41{
0%{opacity:0;
transform:translateY(-20px)}
100%{opacity:1;
transform:translateY(0)}
}

.Act4 ul{
-webkit-animation:Act42 1s .2s ease both;
animation:Act42 1s .2s ease both;
 -webkit-animation-delay:1s; 
    animation-delay:1s;}
@-webkit-keyframes Act42{
0%{-webkit-transform:perspective(400px) rotateX(90deg);
opacity:0}
100%{-webkit-transform:perspective(400px) rotateX(0deg);
opacity:1}
}
@keyframes Act42{
0%{transform:perspective(400px) rotateX(90deg);
opacity:0}
100%{transform:perspective(400px) rotateX(0deg);
opacity:1}
}

.Act4 p{
-webkit-animation:Act43 1s .2s ease both;
animation:Act43 1s .2s ease both;
 -webkit-animation-delay:2s; 
    animation-delay:2s;}
@-webkit-keyframes Act43{
0%{opacity:0;
-webkit-transform:translateY(-20px)}
100%{opacity:1;
-webkit-transform:translateY(0)}
}
@keyframes Act43{
0%{opacity:0;
transform:translateY(-20px)}
100%{opacity:1;
transform:translateY(0)}
}


/*////////////////////////////////////////////*/
#Animation7,#Animation10{
-webkit-animation:fadeInLeft 1s .2s ease both;
animation:fadeInLeft 1s .2s ease both;}
@-webkit-keyframes fadeInLeft{
0%{opacity:0;
-webkit-transform:translateX(-20px)}
100%{opacity:1;
-webkit-transform:translateX(0)}
}
@keyframes fadeInLeft{
0%{opacity:0;
transform:translateX(-20px)}
100%{opacity:1;
transform:translateX(0)}
}




#Animation13,#Animation14,#Animation12,#Animation9{
-webkit-animation:fadeInDown 1s .2s ease both;
animation:fadeInDown 1s .2s ease both;}
@-webkit-keyframes fadeInDown{
0%{opacity:0;
-webkit-transform:translateY(-20px)}
100%{opacity:1;
-webkit-transform:translateY(0)}
}
@keyframes fadeInDown{
0%{opacity:0;
transform:translateY(-20px)}
100%{opacity:1;
transform:translateY(0)}
}