/* animate */


/* 浮動動畫 */
.floating{
    float: left;
    -webkit-animation-name: Floating;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: Floating;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    -ms-animation-name: Floating;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: ease-in-out;
    -o-animation-name: Floating;
    -o-animation-duration: 3s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: ease-in-out;
    animation-name: Floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;

}

@-webkit-keyframes Floating{
    0% {-webkit-transform: scale(1);}
    50% {
        -webkit-transform: scale(1.05);
        bottom: 5px;
    }
    100% {-webkit-transform: scale(1);}
}

@-moz-keyframes Floating{
    0% {-moz-transform: scale(1);}
    50% {
        -moz-transform: scale(1.05);
        bottom: 5px;
    }
    100% {-moz-transform: scale(1);}
}
@-ms-keyframes Floating{
    0% {-ms-transform: scale(1);}
    50% {
        -ms-transform: scale(1.05);
        bottom: 5px;
    }
    100% {-ms-transform: scale(1);}
}
@-o-keyframes Floating{
    0% {-o-transform: scale(1);}
    50% {
        -o-transform: scale(1.05);
        bottom: 5px;
    }
    100% {-o-transform: scale(1);}
}
@keyframes Floating{
    0% {transform: scale(1);}
    50% {
        transform: scale(1.05);
        bottom: 5px;
    }
    100% {transform: scale(1);}
}


.scaling{
    float: left;
    -webkit-animation-name: scale;
    -webkit-animation-duration:4s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:ease-in-out;
    -moz-animation-name: scale;
    -moz-animation-duration:4s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:ease-in-out;
    -ms-animation-name: scale;
    -ms-animation-duration:4s;
    -ms-animation-iteration-count:infinite;
    -ms-animation-timing-function:ease-in-out;
    -o-animation-name: scale;
    -o-animation-duration:4s;
    -o-animation-iteration-count:infinite;
    -o-animation-timing-function:ease-in-out;
    animation-name: scale;
    animation-duration:4s;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in-out;
}

@-webkit-keyframes scale{
    0% {-webkit-transform: rotate(0deg) scale(1.05);}
    65% {-webkit-transform: rotate(5deg) scale(1);}
    100% {-webkit-transform: rotate(0deg) scale(1.05);}
}
@-moz-keyframes scale{
    0% {-moz-transform: rotate(0deg) scale(1.05);}
    65% {-moz-transform: rotate(5deg) scale(1);}
    100% {-moz-transform: rotate(0deg) scale(1.05);}
}
@-ms-keyframes scale{
    0% {-ms-transform: rotate(0deg) scale(1.05);}
    65% {-ms-transform: rotate(5deg) scale(1);}
    100% {-ms-transform: rotate(0deg) scale(1.05);}
}
@-o-keyframes scale{
    0% {-o-transform: rotate(0deg) scale(1.05);}
    65% {-o-transform: rotate(5deg) scale(1);}
    100% {-o-transform: rotate(0deg) scale(1.05);}
}
@keyframes scale{
    0% {transform: rotate(0deg) scale(1.05);}
    65% {transform: rotate(5deg) scale(1);}
    100% {transform: rotate(0deg) scale(1.05);}
}

.rulering{
    float: left;
    -webkit-animation-name: rulering;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: rulering;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    -ms-animation-name: rulering;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: ease-in-out;
    -o-animation-name: rulering;
    -o-animation-duration: 3s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: ease-in-out;
    animation-name: rulering;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}

@-webkit-keyframes rulering{
    0% {-webkit-transform: scale(1.05);
        bottom: 5px;
    }
    50% {
        -webkit-transform: scale(1);
        bottom: 0px;
    }
    100% {-webkit-transform: scale(1.05);
        bottom: 5px;
    }
}

@-moz-keyframes rulering{
    0% {-moz-transform: scale(1.05);
        bottom: 5px;
    }
    50% {-moz-transform: scale(1);
        bottom: 0px;
    }
    100% {-moz-transform: scale(1.05);
        bottom: 5px;
    }
}
@-ms-keyframes rulering{
    0% {-ms-transform: scale(1.05);
        bottom: 5px;
    }
    50% {-ms-transform: scale(1);
        bottom: 0px;
    }
    100% {-ms-transform: scale(1.05);
        bottom: 5px;
    }
}
@-o-keyframes rulering{
    0% {-o-transform: scale(1.05);
        bottom: 5px;
    }
    50% {-o-transform: scale(1);
        bottom: 0px;
    }
    100% {-o-transform: scale(1.05);
        bottom: 5px;
    }
}
@keyframes rulering{
    0% {transform: scale(1.05);
        bottom: 5px;
    }
    50% {transform: scale(1);
        bottom: 0px;
    }
    100% {transform: scale(1.05);
         bottom: 5px;
    }
}

.pening{
    float: left;
    -webkit-animation-name: pening;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: pening;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    -ms-animation-name: pening;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: ease-in-out;
    -o-animation-name: pening;
    -o-animation-duration: 3s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: ease-in-out;
    animation-name: pening;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;

}

@-webkit-keyframes pening{
    0% {-webkit-transform: translateY(0px);}
    50% {-webkit-transform: translateY(10px);}
    100% {-webkit-transform: translateY(0px);}
}
@-moz-keyframes pening{
    0% {-moz-transform: translateY(0px);}
    50% {-moz-transform: translateY(10px);}
    100% {-moz-transform: translateY(0px);}
}
@-ms-keyframes pening{
    0% {-ms-transform: translateY(0px);}
    50% {-ms-transform: translateY(10px);}
    100% {-ms-transform: translateY(0px);}
}
@-o-keyframes pening{
    0% {-o-transform: translateY(0px);}
    50% {-o-transform: translateY(10px);}
    100% {-o-transform: translateY(0px);}
}
@keyframes pening{
    0% {transform: translateY(0px);}
    50% {transform: translateY(10px);}
    100% {transform: translateY(0px);}
}

.quesing{
    float: left;
    -webkit-animation-name: quesing;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: quesing;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    -ms-animation-name: quesing;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: ease-in-out;
    -o-animation-name: quesing;
    -o-animation-duration: 3s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: ease-in-out;
    animation-name: quesing;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;

}

@-webkit-keyframes quesing{
    0% {-webkit-transform: translateX(0px) scale(1.05);}
    50% {-webkit-transform: translateX(10px) scale(1);}
    100% {-webkit-transform: translateX(0px) scale(1.05);}
}
@-moz-keyframes quesing{
    0% {-moz-transform: translateX(0px) scale(1.05);}
    50% {-moz-transform: translateX(10px) scale(1);}
    100% {-moz-transform: translateX(0px) scale(1.05);}
}
@-ms-keyframes quesing{
    0% {-ms-transform: translateX(0px) scale(1.05);}
    50% {-ms-transform: translateX(10px) scale(1);}
    100% {-ms-transform: translateX(0px) scale(1.05);}
}
@-o-keyframes quesing{
    0% {-o-transform: translateX(0px) scale(1.05);}
    50% {-o-transform: translateX(10px) scale(1);}
    100% {-o-transform: translateX(0px) scale(1.05);}
}
@keyframes quesing{
    0% {transform: translateX(0px) scale(1.05);}
    50% {transform: translateX(10px) scale(1);}
    100% {transform: translateX(0px) scale(1.05);}
}

/* loading */
@-webkit-keyframes small_to_big {
    0% {-webkit-webkit-transform: scale(0);}
    100% {-webkit-transform: scale(1);}
}
@-moz-keyframes small_to_big {
    0% {-moz-webkit-transform: scale(0);}
    100% {-moz-transform: scale(1);}
}
@-ms-keyframes small_to_big {
    0% {-ms-webkit-transform: scale(0);}
    100% {-ms-transform: scale(1);}
}
@-o-keyframes small_to_big {
    0% {-o-webkit-transform: scale(0);}
    100% {-o-transform: scale(1);}
}
@keyframes small_to_big {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
}

@-webkit-keyframes qq {
    0% {-webkit-transform: scale(0) rotate(0deg);}
    50% {-webkit-transform: scale(0) rotate(40deg);}
    100% {-webkit-transform: scale(1) rotate(40deg);}
}
@-moz-keyframes qq {
    0% {-moz-transform: scale(0) rotate(0deg);}
    50% {-moz-transform: scale(0) rotate(40deg);}
    100% {-moz-transform: scale(1) rotate(40deg);}
}
@-ms-keyframes qq {
    0% {-ms-transform: scale(0) rotate(0deg);}
    50% {-ms-transform: scale(0) rotate(40deg);}
    100% {-ms-transform: scale(1) rotate(40deg);}
}
@-o-keyframes qq {
    0% {-o-transform: scale(0) rotate(0deg);}
    50% {-o-transform: scale(0) rotate(40deg);}
    100% {-o-transform: scale(1) rotate(40deg);}
}
@keyframes qq {
    0% {transform: scale(0) rotate(0deg);}
    50% {transform: scale(0) rotate(40deg);}
    100% {transform: scale(1) rotate(40deg);}
}

@-webkit-keyframes round_one {
    0% { -webkit-transform: rotate(0deg);}
    100% { -webkit-transform: rotate(180deg);}
}
@-moz-keyframes round_one {
    0% { -moz-transform: rotate(0deg);}
    100% { -moz-transform: rotate(180deg);}
}
@-ms-keyframes round_one {
    0% { -ms-transform: rotate(0deg);}
    100% { -ms-transform: rotate(180deg);}
}
@-o-keyframes round_one {
    0% { -o-transform: rotate(0deg);}
    100% { -o-transform: rotate(180deg);}
}
@keyframes round_one {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(180deg);}
}

/* end loading */

/* green_bg  */
@-webkit-keyframes enterUp {
  0% { -webkit-transform: translateY(100%);}
  100% {-webkit-transform: translateY(0%);}
}
@-moz-keyframes enterUp {
  0% { -moz-transform: translateY(100%);}
  100% {-moz-transform: translateY(0%);}
}
@-ms-keyframes enterUp {
  0% { -ms-transform: translateY(100%);}
  100% {-ms-transform: translateY(0%);}
}
@-o-keyframes enterUp {
  0% { -o-transform: translateY(100%);}
  100% {-o-transform: translateY(0%);}
}
@keyframes enterUp {
  0% {transform: translateY(100%);}
  100% {transform: translateY(0%);}
}


@-webkit-keyframes mg_bg_ani {
    0% {-webkit-transform: scaleY(0);}
    100%{-webkit-transform: scaleY(1);}
}
@-moz-keyframes mg_bg_ani {
    0% {-moz-transform: scaleY(0);}
    100%{-moz-transform: scaleY(1);}
}
@-ms-keyframes mg_bg_ani {
    0% {-ms-transform: scaleY(0);}
    100%{-ms-transform: scaleY(1);}
}
@-o-keyframes mg_bg_ani {
    0% {-o-transform: scaleY(0);}
    100%{-o-transform: scaleY(1);}
}
@keyframes mg_bg_ani {
    0% {transform: scaleY(0);}
    100%{transform: scaleY(1);}
}

@-webkit-keyframes mg_bg_ani_b {
    0% {
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
    }
    100% {
        border-left: 0px solid transparent;
        border-right: 0px solid transparent;
    }
}
@-moz-keyframes mg_bg_ani_b {
    0% {
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
    }
    100% {
        border-left: 0px solid transparent;
        border-right: 0px solid transparent;
    }
}
@-ms-keyframes mg_bg_ani_b {
    0% {
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
    }
    100% {
        border-left: 0px solid transparent;
        border-right: 0px solid transparent;
    }
}
@-o-keyframes mg_bg_ani_b {
    0% {
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
    }
    100% {
        border-left: 0px solid transparent;
        border-right: 0px solid transparent;
    }
}
@keyframes mg_bg_ani_b {
    0% {
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
    }
    100% {
        border-left: 0px solid transparent;
        border-right: 0px solid transparent;
    }
}
/*  end green_bg  */


/* header animate  */
@-webkit-keyframes header_to_top {
    0% { top: 0px;}
    100% { top: -50px;}
}
@-moz-keyframes header_to_top {
    0% { top: 0px;}
    100% { top: -50px;}
}
@-ms-keyframes header_to_top {
    0% { top: 0px;}
    100% { top: -50px;}
}
@-o-keyframes header_to_top {
    0% { top: 0px;}
    100% { top: -50px;}
}
@keyframes header_to_top {
    0% { top: 0px;height: 300px;}
    100% { top: -50px;height: 250px;}
}

/* end header animate  */

/* section animate  */
@-webkit-keyframes m_from_down {
    0% { top: 100%; }
    100% { top: 20%; }
}
@-moz-keyframes m_from_down {
    0% { top: 100%; }
    100% { top: 20%; }
}
@-ms-keyframes m_from_down {
    0% { top: 100%; }
    100% { top: 20%; }
}
@-o-keyframes m_from_down {
    0% { top: 100%; }
    100% { top: 20%; }
}
@keyframes m_from_down {
    0% { top: 100%; }
    100% { top: 20%; }
}

@-webkit-keyframes t_from_down {
    0% { top: 100%; }
    100% { top: 14%; }
}
@-moz-keyframes t_from_down {
    0% { top: 100%; }
    100% { top: 14%; }
}
@-ms-keyframes t_from_down {
    0% { top: 100%; }
    100% { top: 14%; }
}
@-o-keyframes t_from_down {
    0% { top: 100%; }
    100% { top: 14%; }
}
@keyframes t_from_down {
    0% { top: 100%; }
    100% { top: 14%; }
}

@-webkit-keyframes d_from_down {
    0% { top: 100%; }
    100% { top: 22%; }
}
@-moz-keyframes d_from_down {
    0% { top: 100%; }
    100% { top: 22%; }
}
@-ms-keyframes d_from_down {
    0% { top: 100%; }
    100% { top: 22%; }
}
@-o-keyframes d_from_down {
    0% { top: 100%; }
    100% { top: 22%; }
}
@keyframes d_from_down {
    0% { top: 100%; }
    100% { top: 22%; }
}


@-webkit-keyframes ques_show {
    0% { opacity: 0; transform: translateY(-5px); }
    100% { opacity: 1; transform: translateY(0px); }
}
@-moz-keyframes ques_show {
    0% { opacity: 0; transform: translateY(-5px); }
    100% { opacity: 1; transform: translateY(0px); }
}
@-ms-keyframes ques_show {
    0% { opacity: 0; transform: translateY(-5px); }
    100% { opacity: 1; transform: translateY(0px); }
}
@-o-keyframes ques_show {
    0% { opacity: 0; transform: translateY(-5px); }
    100% { opacity: 1; transform: translateY(0px); }
}
@keyframes ques_show {
    0% { opacity: 0; transform: translateY(-5px); }
    100% { opacity: 1; transform: translateY(0px); }
}


@-webkit-keyframes dowm_show {
    0% { -webkit-transform: translateY(-100%); }
    100% { -webkit-transform: translateY(0%);}
}
@-moz-keyframes dowm_show {
    0% { -moz-transform: translateY(-100%); }
    100% { -moz-transform: translateY(0%);}
}
@-ms-keyframes dowm_show {
    0% { -ms-transform: translateY(-100%); }
    100% { -ms-transform: translateY(0%);}
}
@-o-keyframes dowm_show {
    0% { -o-transform: translateY(-100%); }
    100% { -o-transform: translateY(0%);}
}
@keyframes dowm_show {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0%);}
}



@-webkit-keyframes left_show {
    0% { -webkit-transform: translateX(-300%); }
    100% { -webkit-transform: translateX(0%); }
}
@-moz-keyframes left_show {
    0% { -moz-transform: translateX(-300%); }
    100% { -moz-transform: translateX(0%); }
}
@-ms-keyframes left_show {
    0% { -ms-transform: translateX(-300%); }
    100% { -ms-transform: translateX(0%); }
}
@-o-keyframes left_show {
    0% { -o-transform: translateX(-300%); }
    100% { -o-transform: translateX(0%); }
}
@keyframes left_show {
    0% { transform: translateX(-300%); }
    100% { transform: translateX(0%); }
}


@-webkit-keyframes right_show {
    0% { -webkit-transform: translateX(300%); }
    100% { -webkit-transform: translateX(0%); }
}
@-moz-keyframes right_show {
    0% { -moz-transform: translateX(300%); }
    100% { -moz-transform: translateX(0%); }
}
@-ms-keyframes right_show {
    0% { -ms-transform: translateX(300%); }
    100% { -ms-transform: translateX(0%); }
}
@-o-keyframes right_show {
    0% { -o-transform: translateX(300%); }
    100% { -o-transform: translateX(0%); }
}
@keyframes right_show {
    0% { transform: translateX(300%); }
    100% { transform: translateX(0%); }
}


@-webkit-keyframes moving1{
    0% {-webkit-transform: translateX(0px);}
    50% {-webkit-transform: translateX(5px);}
    100% {-webkit-transform: translateX(0px);}
}

@-moz-keyframes moving1{
    0% {-moz-transform: translateX(0px);}
    50% {-moz-transform: translateX(5px);}
    100% {-moz-transform: translateX(0px);}
}
@-ms-keyframes moving1{
    0% {-ms-transform: translateX(0px);}
    50% {-ms-transform: translateX(5px);}
    100% {-ms-transform: translateX(0px);}
}
@-o-keyframes moving1{
    0% {-o-transform: translateX(0px);}
    50% {-o-transform: translateX(5px);}
    100% {-o-transform: translateX(0px);}
}
@keyframes moving1{
    0% {transform: translateX(0px);}
    50% {transform: translateX(5px);}
    100% {transform: translateX(0px);}
}

@-webkit-keyframes moving2{
    0% {-webkit-transform: translateX(0px);}
    50% {-webkit-transform: translateX(-5px);}
    100% {-webkit-transform: translateX(0px);}
}

@-moz-keyframes moving2{
    0% {-moz-transform: translateX(0px);}
    50% {-moz-transform: translateX(-5px);}
    100% {-moz-transform: translateX(0px);}
}
@-ms-keyframes moving2{
    0% {-ms-transform: translateX(0px);}
    50% {-ms-transform: translateX(-5px);}
    100% {-ms-transform: translateX(0px);}
}
@-o-keyframes moving2{
    0% {-o-transform: translateX(0px);}
    50% {-o-transform: translateX(-5px);}
    100% {-o-transform: translateX(0px);}
}
@keyframes moving2{
    0% {transform: translateX(0px);}
    50% {transform: translateX(-5px);}
    100% {transform: translateX(0px);}
}