.about_img_animDown{
    -webkit-animation:bounceInDown 1s .2s ease both;
    -moz-animation:bounceInDown 1s .2s ease both;}
@-webkit-keyframes bounceInDown{
    0%{opacity:0;
       -webkit-transform:translateY(-2000px)}
    60%{opacity:1;
        -webkit-transform:translateY(30px)}
    80%{-webkit-transform:translateY(-10px)}
    100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes bounceInDown{
    0%{opacity:0;
       -moz-transform:translateY(-2000px)}
    60%{opacity:1;
        -moz-transform:translateY(30px)}
    80%{-moz-transform:translateY(-10px)}
    100%{-moz-transform:translateY(0)}
}

.about_img_animUp{
    -webkit-animation:bounceInUp 1s .2s ease both;
    -moz-animation:bounceInUp 1s .2s ease both;}
@-webkit-keyframes bounceInUp{
    0%{opacity:0;
       -webkit-transform:translateY(2000px)}
    60%{opacity:1;
        -webkit-transform:translateY(-30px)}
    80%{-webkit-transform:translateY(10px)}
    100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes bounceInUp{
    0%{opacity:0;
       -moz-transform:translateY(2000px)}
    60%{opacity:1;
        -moz-transform:translateY(-30px)}
    80%{-moz-transform:translateY(10px)}
    100%{-moz-transform:translateY(0)}
}

.about_img_animBounce1{
    -webkit-animation:bounce 1s .2s ease both;
    -moz-animation:bounce 1s .2s ease both;}

.about_img_animBounce2{
    -webkit-animation:bounce 1s .4s ease both;
    -moz-animation:bounce 1s .2s ease both;
}
.about_img_animBounce3{
    -webkit-animation:bounce 1s .6s ease both;
    -moz-animation:bounce 1s .2s ease both;
}

.about_img_animBounce4{
    -webkit-animation:bounce 1s .8s ease both;
    -moz-animation:bounce 1s .2s ease both;
}

@-webkit-keyframes bounce{
    0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}
    40%{-webkit-transform:translateY(-30px)}
    60%{-webkit-transform:translateY(-15px)}
}
@-moz-keyframes bounce{
    0%,20%,50%,80%,100%{-moz-transform:translateY(0)}
    40%{-moz-transform:translateY(-30px)}
    60%{-moz-transform:translateY(-15px)}
}

/*千秋*/
.about_img_animTada{
    -webkit-animation:tada 1s .2s ease both;
    -moz-animation:tada 1s .2s ease both;}
@-webkit-keyframes tada{
    0%{-webkit-transform:scale(1)}
    10%,20%{-webkit-transform:scale(0.9) rotate(-3deg)}
    30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg)}
    40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg)}
    100%{-webkit-transform:scale(1) rotate(0)}
}
@-moz-keyframes tada{
    0%{-moz-transform:scale(1)}
    10%,20%{-moz-transform:scale(0.9) rotate(-3deg)}
    30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg)}
    40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg)}
    100%{-moz-transform:scale(1) rotate(0)}
}

/*rotateY轉*/
.index_logo img:hover , .index_logo02 img:hover{
    transform: rotateY(360deg);
    transition: all 0.5s ease 0s;
    transform-origin: 50% 50% 0px;
}

/*修正覆蓋*/
.left02 {
    z-index: 1000;
}

/*向左淡出*/
.left_fade_out{
    -webkit-animation:fadeOutLeft 1s .2s ease both;
    -moz-animation:fadeOutLeft 1s .2s ease both;}
@-webkit-keyframes fadeOutLeft{
    0%{opacity:1;
       -webkit-transform:translateX(0)}
    100%{opacity:0;
         -webkit-transform:translateX(-20px)}
}
@-moz-keyframes fadeOutLeft{
    0%{opacity:1;
       -moz-transform:translateX(0)}
    100%{opacity:0;
         -moz-transform:translateX(-20px)}
}

/*向右淡入*/
.right_fade_in{
    -webkit-animation:fadeInRight 1s .2s ease both;
    -moz-animation:fadeInRight 1s .2s ease both;}
@-webkit-keyframes fadeInRight{
    0%{opacity:0;
       -webkit-transform:translateX(20px)}
    100%{opacity:1;
         -webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInRight{
    0%{opacity:0;
       -moz-transform:translateX(20px)}
    100%{opacity:1;
         -moz-transform:translateX(0)}
}

/*下方淡入*/
.up_fade_in{
-webkit-animation:fadeInUp 1s .2s ease both;
-moz-animation:fadeInUp 1s .2s ease both;}
@-webkit-keyframes fadeInUp{
0%{opacity:0;
-webkit-transform:translateY(20px)}
100%{opacity:1;
-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInUp{
0%{opacity:0;
-moz-transform:translateY(20px)}
100%{opacity:1;
-moz-transform:translateY(0)}
}

/*Top淡入*/
.topFadeIn{
    -webkit-animation:fadeInDown 1s .2s ease both;
    -moz-animation:fadeInDown 1s .2s ease both;}
@-webkit-keyframes fadeInDown{
    0%{opacity:0;
       -webkit-transform:translateY(-20px)}
    100%{opacity:1;
         -webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInDown{
    0%{opacity:0;
       -moz-transform:translateY(-20px)}
    100%{opacity:1;
         -moz-transform:translateY(0)}
}

/*左右<-->*/
.horizontal {
  animation: horizontal-wait4 4.72s ease infinite;
}
@keyframes horizontal-wait4 {
  0% { transform:translate(0,0) }
  2.54237% { transform:translate(5px,0) }
  5.08475% { transform:translate(0,0) }
  7.62712% { transform:translate(5px,0) }
  10.16949% { transform:translate(0,0) }
  12.71186% { transform:translate(5px,0) }
  15.25424% { transform:translate(0,0) }
  100% { transform:translate(0,0) }
}

/*-圖片黑白--------------------*/
figure {
    -webkit-transition-duration: .35s;
    transition-duration: .35s;
    position: absolute;
}
/*
figure:focus, figure:hover {
    -webkit-filter: none!important;
    filter: none!important;
}
figure:after {
    -webkit-transition-duration: .35s;
    transition-duration: .35s;
}
figure:focus:after, figure:hover:after {
    opacity: 0!important;
}
*/

.works-iten-all:hover .inkwell , .works-iten-all:focus .inkwell {
    -webkit-filter: sepia(0) contrast(1) brightness(1) grayscale(1);
    filter: sepia(0) contrast(1) brightness(1) grayscale(1);
}

/*------------------------------*/