/*淡入*/
@-webkit-keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/*淡入0.3*/
@-webkit-keyframes fade_3 {
    from {
        opacity: 0;
    }
    to {
        opacity: .3;
    }
}
@keyframes fade_3 {
    from {
        opacity: 0;
    }
    to {
        opacity: .3;
    }
}

/*右邊快速進入*/
@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(20%, 0, 0);
        transform: translate3d(20%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(20%, 0, 0);
        transform: translate3d(20%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

/*左邊進入*/
@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-20%, 0, 0);
        transform: translate3d(-20%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-20%, 0, 0);
        transform: translate3d(-20%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
  
/*上方進入*/
@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -20%, 0);
        transform: translate3d(0, -20%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -20%, 0);
        transform: translate3d(0, -20%, 0);
    }

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

/*下方進入*/
@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0);
    }

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

/*線條打開*/
@-webkit-keyframes line {
    from {
        transform: scaleX(0);
        opacity: 0;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}
@keyframes line {
    from {
        transform: scaleX(0);
        opacity: 0;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

/*bottom進入*/
@-webkit-keyframes bottom {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0px);
        opacity: 1;
    }
}
  
@keyframes bottom {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
  
    to {
        transform: translateY(0px) ;
        opacity: 1;
    }
}

/*特製左邊進入*/
@-webkit-keyframes fadeInLeft_r {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-20%, 0, 0) rotateY(180deg);
        transform: translate3d(-20%, 0, 0) rotateY(180deg);
    }

    to {
        opacity: 1;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}
@keyframes fadeInLeft_r {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-20%, 0, 0) rotateY(180deg);
        transform: translate3d(-20%, 0, 0) rotateY(180deg);
    }

    to {
        opacity: 1;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}
/*特製左邊進入*/
@-webkit-keyframes fadeInRight_r {
    from {
        opacity: 0;
        -webkit-transform: translate3d(20%, 0, 0) rotateY(180deg);
        transform: translate3d(20%, 0, 0) rotateY(180deg);
    }

    to {
        opacity: 1;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}
@keyframes fadeInRight_r {
    from {
        opacity: 0;
        -webkit-transform: translate3d(20%, 0, 0) rotateY(180deg);
        transform: translate3d(20%, 0, 0) rotateY(180deg);
    }

    to {
        opacity: 1;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}
/*放大進*/
@-webkit-keyframes fadeInScale {
    from {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes fadeInScale {
    from {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
/*放大進Max*/
@-webkit-keyframes InScaleMAX {
    from {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes InScaleMAX {
    from {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
/*放大進Max*/
@-webkit-keyframes leftInMax {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0%, 20%, 0);
        transform: translate3d(0%, 20%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
    }
}
@keyframes leftInMax {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0%, 20%, 0);
        transform: translate3d(0%, 20%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
    }
}


/*往右*/
@-webkit-keyframes goUp {
    from {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-2px);
    }
    50% {
        transform: translateY(0px);
    }
    75% {
        transform: translateY(2px);
    }
    to {
        transform: translateY(0px);
    }
}
@keyframes goUp {
    from {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-2px);
    }
    50% {
        transform: translateY(0px);
    }
    75% {
        transform: translateY(2px);
    }
    to {
        transform: translateY(0px);
    }
}
/*banner動畫群*/


@-webkit-keyframes jump_1 {
    from {
        transform: translateY(0px);
    }
    10% {
        transform: translateY(-10px);
    }
    20% {
        transform: translateY(0px);
    }
    to {
        transform: translateY(0);
    }
}
@keyframes jump_1 {
    from {
        transform: translateY(0);
    }
    10% {
        transform: translateY(-10px);
    }
    20% {
        transform: translateY(0px);
    }
    to {
        transform: translateY(0);
    }
}
@-webkit-keyframes jump_2 {
    from {
        transform: translateY(0px);
    }
    10% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(-10px);
    }
    30% {
        transform: translateY(0px);
    }
    to {
        transform: translateY(0);
    }
}
@keyframes jump_2 {
    from {
        transform: translateY(0px);
    }
    10% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(-10px);
    }
    30% {
        transform: translateY(0px);
    }
    to {
        transform: translateY(0);
    }
}
@-webkit-keyframes jump_3 {
    from {
        transform: translateY(0px);
    }
    20% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-10px);
    }
    40% {
        transform: translateY(0px);
    }
    to {
        transform: translateY(0);
    }
}
@keyframes jump_3 {
    from {
        transform: translateY(0px);
    }
    20% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-10px);
    }
    40% {
        transform: translateY(0px);
    }
    to {
        transform: translateY(0);
    }
}
@-webkit-keyframes jump_4 {
    from {
        transform: translateY(0px);
    }
    30% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    50% {
        transform: translateY(0px);
    }
    to {
        transform: translateY(0);
    }
}
@keyframes jump_4 {
    from {
        transform: translateY(0px);
    }
    30% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    50% {
        transform: translateY(0px);
    }
    to {
        transform: translateY(0);
    }
}
@-webkit-keyframes jump_5 {
    from {
        transform: translateY(0px);
    }
    40% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(0px);
    }
    to {
        transform: translateY(0);
    }
}
@keyframes jump_5 {
    from {
        transform: translateY(0px);
    }
    40% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(0px);
    }
    to {
        transform: translateY(0);
    }
}
@-webkit-keyframes jump_6 {
    from {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(0);
    }
    60% {
        transform: translateY(-10px);
    }
    70% {
        transform: translateY(0px);
    }
    to {
        transform: translateY(0);
    }
}
@keyframes jump_6 {
    from {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(0);
    }
    60% {
        transform: translateY(-10px);
    }
    70% {
        transform: translateY(0px);
    }
    to {
        transform: translateY(0);
    }
}
@-webkit-keyframes jump_7 {
    from {
        transform: translateY(0px);
    }
    60% {
        transform: translateY(0);
    }
    70% {
        transform: translateY(-10px);
    }
    80% {
        transform: translateY(0px);
    }
    to {
        transform: translateY(0);
    }
}
@keyframes jump_7 {
    from {
        transform: translateY(0px);
    }
    60% {
        transform: translateY(0);
    }
    70% {
        transform: translateY(-10px);
    }
    80% {
        transform: translateY(0px);
    }
    to {
        transform: translateY(0);
    }
}
@-webkit-keyframes lgor_rotate {
    from {
        transform: rotateZ(0);
    }
    20% {
        transform: rotateZ(-10deg);
    }
    35% {
        transform: rotateZ(5deg);
    }
    45% {
        transform: rotateZ(-2deg);
    }
    50% {
        transform: rotateZ(0);
    }
    to {
        transform: rotateZ(0);
    }
    
}
@keyframes lgor_rotate {
    from {
        transform: rotateZ(0);
    }
    20% {
        transform: rotateZ(-10deg);
    }
    35% {
        transform: rotateZ(5deg);
    }
    45% {
        transform: rotateZ(-2deg);
    }
    50% {
        transform: rotateZ(0);
    }
    to {
        transform: rotateZ(0);
    }
}
@-webkit-keyframes rgol_rotate {
    from {
        transform: rotateZ(0);
    }
    20% {
        transform: rotateZ(10deg);
    }
    35% {
        transform: rotateZ(-5deg);
    }
    45% {
        transform: rotateZ(2deg);
    }
    50% {
        transform: rotateZ(0);
    }
    to {
        transform: rotateZ(0);
    }
    
}
@keyframes rgol_rotate {
    from {
        transform: rotateZ(0);
    }
    20% {
        transform: rotateZ(10deg);
    }
    35% {
        transform: rotateZ(-5deg);
    }
    45% {
        transform: rotateZ(2deg);
    }
    50% {
        transform: rotateZ(0);
    }
    to {
        transform: rotateZ(0);
    }
}
@-webkit-keyframes tgob {
    from {
        transform: translateY(0);
    }
    20% {
        transform: translateY(-15px);
    }
    50% {
        transform: translateY(0px);
    }
    80% {
        transform: translateY(15px);
    }
    to {
        transform: translateY(0);
    }
}
@keyframes tgob{
    from {
        transform: translateY(0);
    }
    20% {
        transform: translateY(-10px);
    }
    50% {
        transform: translateY(0px);
    }
    80% {
        transform: translateY(15px);
    }
    to {
        transform: translateY(0);
    }
}
@-webkit-keyframes swing_ani {
    from {
        transform: rotateZ(0);
    }
    25% {
        transform: rotateZ(-10deg);
    }
    50% {
        transform: rotateZ(0);
    }
    75% {
        transform: rotateZ(10deg);
    }
    to {
        transform: rotateZ(0);
    }
}
@keyframes swing_ani{
    from {
        transform: rotateZ(0);
    }
    25% {
        transform: rotateZ(-10deg);
    }
    50% {
        transform: rotateZ(0);
    }
    75% {
        transform: rotateZ(10deg);
    }
    to {
        transform: rotateZ(0);
    }
}

@-webkit-keyframes lr_ani {
    from {
        transform: translate3D( 0, 0, 0);
    }
    20% {
        transform: translate3D( -10px, 5px, 0);
    }
    50% {
        transform: translate3D( 0, -0, 0);
    }
    80% {
        transform: translate3D( -10px, -5px, 0);
    }
    to {
        transform: translate3D( 0, 0, 0);
    }
}
@keyframes lr_ani{
    from {
        transform: translate3D( 0, 0, 0);
    }
    20% {
        transform: translate3D( -10px, 5px, 0);
    }
    50% {
        transform: translate3D( 0, -0, 0);
    }
    80% {
        transform: translate3D( -10px, -5px, 0);
    }
    to {
        transform: translate3D( 0, 0, 0);
    }
}
@-webkit-keyframes rl_ani {
    from {
        transform: translate3D( 0, 0, 0) rotateY(180deg);
    }
    20% {
        transform: translate3D( 10px, 5px, 0) rotateY(180deg);
    }
    50% {
        transform: translate3D( 0, -0, 0) rotateY(180deg);
    }
    80% {
        transform: translate3D( 10px, -5px, 0) rotateY(180deg);
    }
    to {
        transform: translate3D( 0, 0, 0) rotateY(180deg);
    }
}
@keyframes rl_ani{
    from {
        transform: translate3D( 0, 0, 0) rotateY(180deg);
    }
    20% {
        transform: translate3D( 10px, 5px, 0) rotateY(180deg);
    }
    50% {
        transform: translate3D( 0, -0, 0) rotateY(180deg);
    }
    80% {
        transform: translate3D( 10px, -5px, 0) rotateY(180deg);
    }
    to {
        transform: translate3D( 0, 0, 0) rotateY(180deg);
    }
}
@-webkit-keyframes sun_ani_1 {
    from {
        transform: rotateZ(40deg);
    }
    50% {
        transform: translate3D( -10px, -10px, 0) rotateZ(40deg);
    }
    to {
        transform: rotateZ(40deg);
    }
}
@keyframes sun_ani_1{
    from {
        transform: rotateZ(40deg);
    }
    50% {
        transform: translate3D( -10px, -10px, 0) rotateZ(40deg);
    }
    to {
        transform: rotateZ(40deg);
    }
}
@-webkit-keyframes sun_ani_2 {
    from {
        transform: rotateZ(140deg);
    }
    50% {
        transform: translate3D( 10px, -10px, 0) rotateZ(140deg);
    }
    to {
        transform: rotateZ(140deg);
    }
}
@keyframes sun_ani_2{
    from {
        transform: rotateZ(140deg);
    }
    50% {
        transform: translate3D( 10px, -10px, 0) rotateZ(140deg);
    }
    to {
        transform: rotateZ(140deg);
    }
}
@-webkit-keyframes sun_ani_3 {
    from {
        transform: rotateZ(-40deg);
    }
    50% {
        transform: translate3D( -10px, 10px, 0) rotateZ(-40deg);
    }
    to {
        transform: rotateZ(-40deg);
    }
}
@keyframes sun_ani_3{
    from {
        transform: rotateZ(-40deg);
    }
    50% {
        transform: translate3D( -10px, 10px, 0) rotateZ(-40deg);
    }
    to {
        transform: rotateZ(-40deg);
    }
}
@-webkit-keyframes sun_ani_4 {
    from {
        transform: rotateZ(-140deg);
    }
    50% {
        transform: translate3D( 10px, 10px, 0) rotateZ(-140deg);
    }
    to {
        transform: rotateZ(-140deg);
    }
}
@keyframes sun_ani_4{
    from {
        transform: rotateZ(-140deg);
    }
    50% {
        transform: translate3D( 10px, 10px, 0) rotateZ(-140deg);
    }
    to {
        transform: rotateZ(-140deg);
    }
}