.animated {
    -webkit-animation-fill-mode: backwards;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    opacity: 1
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-30px,0);
        transform: translate3d(0,-30px,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-30px,0);
        transform: translate3d(0,-30px,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    -webkit-animation-delay: 0;
    animation-delay: 0
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-30px,0,0);
        transform: translate3d(-30px,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-30px,0,0);
        transform: translate3d(-30px,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    -webkit-animation-delay: 0;
    animation-delay: 0
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(50rem,0,0);
        transform: translate3d(50rem,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(50rem,0,0);
        transform: translate3d(50rem,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    -webkit-animation-delay: 0;
    animation-delay: 0
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,60px,0);
        transform: translate3d(0,60px,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,60px,0);
        transform: translate3d(0,60px,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

/*.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    -webkit-animation-delay: 0;
    animation-delay: 0
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,60px,0);
        transform: translate3d(0,60px,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}*/

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

@-webkit-keyframes zoomIn {
    0%,100% {
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.9,.9,.9);
        transform: scale3d(.9,.9,.9)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }
}

@keyframes zoomIn {
    0%,100% {
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        -o-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.5,.5,.5);
        transform: scale3d(.5,.5,.5)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }
}


.opacityAdd {
    -webkit-animation-name: opacityAdd;
    animation-name: opacityAdd;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 0;
    animation-delay: 0
}

@keyframes opacityAdd {
    0% {
        opacity: 0.8;
    }

    100% {
        opacity: 1;
    }
}

.opacitySub {
    -webkit-animation-name: opacitySub;
    animation-name: opacitySub;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 0;
    animation-delay: 0
}

@keyframes opacitySub {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.8;
    }
}


.EnLarge {
    -webkit-animation-name: EnLarge;
    animation-name: EnLarge;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 0;
    animation-delay: 0
}

@keyframes EnLarge {
    0% {
        opacity: 0.8;
        width: 0rem;
        height: 0rem;
    }

    100% {
        opacity: 1;
        width: 100%;
        height: 100%;
    }
}

.TouchStart {
    -webkit-animation-name: TouchStart;
    animation-name: TouchStart;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    animation-duration: .5s;
    -webkit-animation-duration: .5s;
}

@keyframes TouchStart {
    0% {
        /*margin: 2vw 1vw;*/
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }

    100% {
        /*margin:2vw 2vw;*/
        -webkit-transform: scale3d(.95,.95,.95);
        transform: scale3d(.95,.95,.95)
    }
}
.TouchEnd {
    -webkit-animation-name: TouchEnd;
    animation-name: TouchEnd;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    animation-duration: .5s;
    -webkit-animation-duration: .5s;
}

@keyframes TouchEnd {
    0% {
        /*margin: 2vw 1vw;*/
        -webkit-transform: scale3d(.95,.95,.95);
        transform: scale3d(.95,.95,.95)
    }

    100% {
        /*margin:2vw 2vw;*/
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }
}

.Sousuo {
    -webkit-animation-name: Sousuo;
    animation-name: Sousuo;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    animation-duration: .5s;
    -webkit-animation-duration: .5s;
}

@keyframes Sousuo {
    0% {
       height:100%
    }

    100% {
        height:200px
    }
}