@keyframes bgLtoR{
    0%{}
    100%{background-position-x:left ;}
}


@keyframes showTop {
	0%{}
	100%{opacity:1;transform:translateY(0%);}
}


@keyframes showTop2 {
	0%{opacity:0;transform:translateY(100%);}
	100%{opacity:1;transform:translateY(0%);}
}


@keyframes showRight {
	0%{opacity:0;transform:translateX(-50%);}
	50%{opacity:.2;}
	100%{opacity:1;transform:translateY(0%);}
}

@keyframes showLeft {
	0%{opacity:0;transform:translateX(50%);}
	100%{opacity:1;transform:translateY(0%);}
}

/*去掉初始值的動畫*/
@keyframes showTop0 {
	0%{opacity:0;}
	50%{opacity:.2;}
	100%{opacity:1;transform:translateY(0%);}
}

@keyframes showRight0 {
	0%{opacity:0;}
	50%{opacity:.2;}
	100%{opacity:1;transform:translateY(0%);}
}

@keyframes showLeft0 {
	0%{opacity:0;}
	50%{opacity:.2;}
	100%{opacity:1;transform:translateY(0%);}
}


@keyframes fadeIn {
	0%{	opacity: 0;}
	100%{opacity:1;}
}

@keyframes moveBack {
  from {}
  to {transform:translate3d(0,100%,0);}
}

@keyframes turnYaround {
  from {}
  to {transform:rotateY(360deg);}
}

@keyframes scaled {
  from {transform:scale(1);}
  to {transform:scale(.9);}
}


/*animate******************************************/

/*mainHeader*/
.mainHeader h2,
.mainHeader h3,
.mainHeader p
{
    transform:translateY(80%);
    opacity: .5;
} 

.mainHeader.active h2{
    animation-name:showTop ;
    animation-fill-mode:forwards;
    animation-duration:1s;
}
.mainHeader.active h3{
    animation-name:showTop ;
    animation-fill-mode:forwards;
    animation-duration:1s;
}
.mainHeader.active p{
    animation-name:showTop ;
    animation-fill-mode:forwards;
    animation-duration:1s;
}


.intro .subTitle hr{
    width: 0;
    transition: all .7s;
}

.intro .subTitle h2
{
    transform:translateY(30px);
    opacity: .5;
} 

.intro .subTitle.active hr{
    width: 64px;
}

.intro .subTitle.active h2

{    
    animation-name:showTop ;
    animation-fill-mode:forwards;
    animation-duration:1s;
}

.intro .subTitle.active h2{
    animation-delay: .2s;
}


/*KV動態開始***********/

/*.kv aside{
    transform:scale(1.03);
}
.kv  .kv_title{
   opacity:0;
}
*/

.kv aside{   
    animation-name: kvBg; 
    animation-iteration-count: 1;
    animation-duration: 5s;
    animation-timing-function:linear;
    animation-fill-mode:forwards;   
}


.kv  .kv_title{
    animation-name: kvTitle;
    animation-iteration-count: 1;
    animation-duration: 3s;
    animation-timing-function:linear;
    animation-delay:1s;
    animation-fill-mode:both;
}


@keyframes kvTitle{
    0%{opacity:0}
    70%{opacity:1;}
    100%{opacity:1}
}

/**/
@keyframes kvBg{
    0%{transform:scale(1.03);}
    90%{transform:scale(1);}
    100%{transform:scale(1);}
}