/* @Date: 2016-06-17 00:36:15 * @Last Modified by: wei jundong * @Last Modified time: 2017-05-11 00:05:09 */

@charset "utf-8";



/* reset */

* {

    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

}



html {

    -webkit-text-size-adjust: none;

    -ms-text-size-adjust: none;

    -moz-text-size-adjust: none;

    -o-text-size-adjust: none;

    text-size-adjust: none;

    overflow: hidden;



}



html,

body {

    height: 100%;

    width: 100%;

    overflow: hidden;

}



body {

    font: 12px/1.5;

}



body,

div,

p,

ul,

ol,

li,

h1,

h2,

h3,

h4,

h5,

h6,

input,

textarea,

select,

canvas,

button,

dl,

dd,

dt {

    margin: 0;

    padding: 0;

    border: 0;

    font-size: inherit;

}



header,

nav,

section,

article,

aside,

footer {

    display: block;

}



table {

    border-collapse: collapse;

    border-spacing: 0;

}



fieldset,

img {

    border: 0;

}



address,

caption,

cite,

code,

dfn,

em,

strong,

th,

var {

    font-style: normal;

    font-weight: normal;

}



ul,

ol,

li {

    list-style: none;

}



caption,

th {

    text-align: left;

}



/*h1, h2, h3, h4, h5, h6 {font-size:100%;font-weight:normal;}*/

abbr {

    border: 0;

    font-variant: normal;

}



input,

textarea,

select {

    font-family: inherit;

    font-size: inherit;

    font-weight: inherit;

}



legend {

    color: #000;

}



img {

    vertical-align: top;

}



a,

a:link,

a:visited {

    text-decoration: none;

}



/*清理浮动*/

.clearfix {

    content: "";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden;

}



/*用户不能选中*/

/*body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}*/



/*Swiper 3.4.2 css*/

.swiper-container {

    margin: 0 auto;

    position: relative;

    overflow: hidden;

    z-index: 1;

}



.swiper-container-no-flexbox .swiper-slide {

    float: left

}



.swiper-container-vertical>.swiper-wrapper {

    -webkit-box-orient: vertical;

    -moz-box-orient: vertical;

    -ms-flex-direction: column;

    -webkit-flex-direction: column;

    flex-direction: column

}



.swiper-wrapper {

    position: relative;

    width: 100%;

    height: 100%;

    z-index: 1;

    display: -webkit-box;

    display: -moz-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-transition-property: -webkit-transform;

    -moz-transition-property: -moz-transform;

    -o-transition-property: -o-transform;

    -ms-transition-property: -ms-transform;

    transition-property: transform;

    -webkit-box-sizing: content-box;

    -moz-box-sizing: content-box;

    box-sizing: content-box

}



.swiper-container-android .swiper-slide,

.swiper-wrapper {

    -webkit-transform: translate3d(0, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -o-transform: translate(0, 0);

    -ms-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0)

}



.swiper-container-multirow>.swiper-wrapper {

    -webkit-box-lines: multiple;

    -moz-box-lines: multiple;

    -ms-flex-wrap: wrap;

    -webkit-flex-wrap: wrap;

    flex-wrap: wrap

}



.swiper-container-free-mode>.swiper-wrapper {

    -webkit-transition-timing-function: ease-out;

    -moz-transition-timing-function: ease-out;

    -ms-transition-timing-function: ease-out;

    -o-transition-timing-function: ease-out;

    transition-timing-function: ease-out;

    margin: 0 auto

}



.swiper-slide {

    -webkit-flex-shrink: 0;

    -ms-flex: 0 0 auto;

    flex-shrink: 0;

    width: 100%;

    height: 100%;

    position: relative

}



.swiper-container-autoheight,

.swiper-container-autoheight .swiper-slide {

    height: auto

}



.swiper-container-autoheight .swiper-wrapper {

    -webkit-box-align: start;

    -ms-flex-align: start;

    -webkit-align-items: flex-start;

    align-items: flex-start;

    -webkit-transition-property: -webkit-transform, height;

    -moz-transition-property: -moz-transform;

    -o-transition-property: -o-transform;

    -ms-transition-property: -ms-transform;

    transition-property: transform, height

}



.swiper-container .swiper-notification {

    position: absolute;

    left: 0;

    top: 0;

    pointer-events: none;

    opacity: 0;

    z-index: -1000

}



.swiper-wp8-horizontal {

    -ms-touch-action: pan-y;

    touch-action: pan-y

}



.swiper-wp8-vertical {

    -ms-touch-action: pan-x;

    touch-action: pan-x

}



.swiper-button-next,

.swiper-button-prev {

    position: absolute;

    top: 50%;

    width: 27px;

    height: 44px;

    margin-top: -22px;

    z-index: 10;

    cursor: pointer;

    -moz-background-size: 27px 44px;

    -webkit-background-size: 27px 44px;

    background-size: 27px 44px;

    background-position: center;

    background-repeat: no-repeat

}



.swiper-button-next.swiper-button-disabled,

.swiper-button-prev.swiper-button-disabled {

    opacity: .35;

    cursor: auto;

    pointer-events: none

}



.swiper-button-prev,

.swiper-container-rtl .swiper-button-next {

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");

    left: 10px;

    right: auto

}



.swiper-button-prev.swiper-button-black,

.swiper-container-rtl .swiper-button-next.swiper-button-black {

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")

}



.swiper-button-prev.swiper-button-white,

.swiper-container-rtl .swiper-button-next.swiper-button-white {

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")

}



.swiper-button-next,

.swiper-container-rtl .swiper-button-prev {

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");

    right: 10px;

    left: auto

}



.swiper-button-next.swiper-button-black,

.swiper-container-rtl .swiper-button-prev.swiper-button-black {

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")

}



.swiper-button-next.swiper-button-white,

.swiper-container-rtl .swiper-button-prev.swiper-button-white {

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")

}



.swiper-pagination {

    position: absolute;

    text-align: center;

    -webkit-transition: .3s;

    -moz-transition: .3s;

    -o-transition: .3s;

    transition: .3s;

    -webkit-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    z-index: 10

}



.swiper-pagination.swiper-pagination-hidden {

    opacity: 0

}



.swiper-container-horizontal>.swiper-pagination-bullets,

.swiper-pagination-custom,

.swiper-pagination-fraction {

    bottom: 10px;

    left: 0;

    width: 100%

}



.swiper-pagination-bullet {

    width: 8px;

    height: 8px;

    display: inline-block;

    border-radius: 100%;

    background: #000;

    opacity: .2

}



button.swiper-pagination-bullet {

    border: none;

    margin: 0;

    padding: 0;

    box-shadow: none;

    -moz-appearance: none;

    -ms-appearance: none;

    -webkit-appearance: none;

    appearance: none

}



.swiper-pagination-clickable .swiper-pagination-bullet {

    cursor: pointer

}



.swiper-pagination-white .swiper-pagination-bullet {

    background: #fff

}



.swiper-pagination-bullet-active {

    opacity: 1;

    background: #007aff

}



.swiper-pagination-white .swiper-pagination-bullet-active {

    background: #fff

}



.swiper-pagination-black .swiper-pagination-bullet-active {

    background: #000

}



.swiper-container-vertical>.swiper-pagination-bullets {

    right: 10px;

    top: 50%;

    -webkit-transform: translate3d(0, -50%, 0);

    -moz-transform: translate3d(0, -50%, 0);

    -o-transform: translate(0, -50%);

    -ms-transform: translate3d(0, -50%, 0);

    transform: translate3d(0, -50%, 0)

}



.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {

    margin: 5px 0;

    display: block

}



.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {

    margin: 0 5px

}



.swiper-pagination-progress {

    background: rgba(0, 0, 0, .25);

    position: absolute

}



.swiper-pagination-progress .swiper-pagination-progressbar {

    background: #007aff;

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    -webkit-transform: scale(0);

    -ms-transform: scale(0);

    -o-transform: scale(0);

    transform: scale(0);

    -webkit-transform-origin: left top;

    -moz-transform-origin: left top;

    -ms-transform-origin: left top;

    -o-transform-origin: left top;

    transform-origin: left top

}



.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {

    -webkit-transform-origin: right top;

    -moz-transform-origin: right top;

    -ms-transform-origin: right top;

    -o-transform-origin: right top;

    transform-origin: right top

}



.swiper-container-horizontal>.swiper-pagination-progress {

    width: 100%;

    height: 4px;

    left: 0;

    top: 0

}



.swiper-container-vertical>.swiper-pagination-progress {

    width: 4px;

    height: 100%;

    left: 0;

    top: 0

}



.swiper-pagination-progress.swiper-pagination-white {

    background: rgba(255, 255, 255, .5)

}



.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {

    background: #fff

}



.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {

    background: #000

}



.swiper-container-3d {

    -webkit-perspective: 1200px;

    -moz-perspective: 1200px;

    -o-perspective: 1200px;

    perspective: 1200px

}



.swiper-container-3d .swiper-cube-shadow,

.swiper-container-3d .swiper-slide,

.swiper-container-3d .swiper-slide-shadow-bottom,

.swiper-container-3d .swiper-slide-shadow-left,

.swiper-container-3d .swiper-slide-shadow-right,

.swiper-container-3d .swiper-slide-shadow-top,

.swiper-container-3d .swiper-wrapper {

    -webkit-transform-style: preserve-3d;

    -moz-transform-style: preserve-3d;

    -ms-transform-style: preserve-3d;

    transform-style: preserve-3d

}



.swiper-container-3d .swiper-slide-shadow-bottom,

.swiper-container-3d .swiper-slide-shadow-left,

.swiper-container-3d .swiper-slide-shadow-right,

.swiper-container-3d .swiper-slide-shadow-top {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    z-index: 10

}



.swiper-container-3d .swiper-slide-shadow-left {

    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));

    background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));

    background-image: -moz-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));

    background-image: -o-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));

    background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))

}



.swiper-container-3d .swiper-slide-shadow-right {

    background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));

    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));

    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));

    background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));

    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))

}



.swiper-container-3d .swiper-slide-shadow-top {

    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));

    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));

    background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));

    background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));

    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))

}



.swiper-container-3d .swiper-slide-shadow-bottom {

    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));

    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));

    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));

    background-image: -o-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));

    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))

}



.swiper-container-coverflow .swiper-wrapper,

.swiper-container-flip .swiper-wrapper {

    -ms-perspective: 1200px

}



.swiper-container-cube,

.swiper-container-flip {

    overflow: visible

}



.swiper-container-cube .swiper-slide,

.swiper-container-flip .swiper-slide {

    pointer-events: none;

    -webkit-backface-visibility: hidden;

    -moz-backface-visibility: hidden;

    -ms-backface-visibility: hidden;

    backface-visibility: hidden;

    z-index: 1

}



.swiper-container-cube .swiper-slide .swiper-slide,

.swiper-container-flip .swiper-slide .swiper-slide {

    pointer-events: none

}



.swiper-container-cube .swiper-slide-active,

.swiper-container-cube .swiper-slide-active .swiper-slide-active,

.swiper-container-flip .swiper-slide-active,

.swiper-container-flip .swiper-slide-active .swiper-slide-active {

    pointer-events: auto

}



.swiper-container-cube .swiper-slide-shadow-bottom,

.swiper-container-cube .swiper-slide-shadow-left,

.swiper-container-cube .swiper-slide-shadow-right,

.swiper-container-cube .swiper-slide-shadow-top,

.swiper-container-flip .swiper-slide-shadow-bottom,

.swiper-container-flip .swiper-slide-shadow-left,

.swiper-container-flip .swiper-slide-shadow-right,

.swiper-container-flip .swiper-slide-shadow-top {

    z-index: 0;

    -webkit-backface-visibility: hidden;

    -moz-backface-visibility: hidden;

    -ms-backface-visibility: hidden;

    backface-visibility: hidden

}



.swiper-container-cube .swiper-slide {

    visibility: hidden;

    -webkit-transform-origin: 0 0;

    -moz-transform-origin: 0 0;

    -ms-transform-origin: 0 0;

    transform-origin: 0 0;

    width: 100%;

    height: 100%

}



.swiper-container-cube.swiper-container-rtl .swiper-slide {

    -webkit-transform-origin: 100% 0;

    -moz-transform-origin: 100% 0;

    -ms-transform-origin: 100% 0;

    transform-origin: 100% 0

}



.swiper-container-cube .swiper-slide-active,

.swiper-container-cube .swiper-slide-next,

.swiper-container-cube .swiper-slide-next+.swiper-slide,

.swiper-container-cube .swiper-slide-prev {

    pointer-events: auto;

    visibility: visible

}



.swiper-container-cube .swiper-cube-shadow {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 100%;

    background: #000;

    opacity: .6;

    -webkit-filter: blur(50px);

    filter: blur(50px);

    z-index: 0

}



.swiper-container-fade.swiper-container-free-mode .swiper-slide {

    -webkit-transition-timing-function: ease-out;

    -moz-transition-timing-function: ease-out;

    -ms-transition-timing-function: ease-out;

    -o-transition-timing-function: ease-out;

    transition-timing-function: ease-out

}



.swiper-container-fade .swiper-slide {

    pointer-events: none;

    -webkit-transition-property: opacity;

    -moz-transition-property: opacity;

    -o-transition-property: opacity;

    transition-property: opacity

}



.swiper-container-fade .swiper-slide .swiper-slide {

    pointer-events: none

}



.swiper-container-fade .swiper-slide-active,

.swiper-container-fade .swiper-slide-active .swiper-slide-active {

    pointer-events: auto

}



.swiper-zoom-container {

    width: 100%;

    height: 100%;

    display: -webkit-box;

    display: -moz-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-box-pack: center;

    -moz-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center;

    -webkit-box-align: center;

    -moz-box-align: center;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

    text-align: center

}



.swiper-zoom-container>canvas,

.swiper-zoom-container>img,

.swiper-zoom-container>svg {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain

}



.swiper-scrollbar {

    border-radius: 10px;

    position: relative;

    -ms-touch-action: none;

    background: rgba(0, 0, 0, .1)

}



.swiper-container-horizontal>.swiper-scrollbar {

    position: absolute;

    left: 1%;

    bottom: 3px;

    z-index: 50;

    height: 5px;

    width: 98%

}



.swiper-container-vertical>.swiper-scrollbar {

    position: absolute;

    right: 3px;

    top: 1%;

    z-index: 50;

    width: 5px;

    height: 98%

}



.swiper-scrollbar-drag {

    height: 100%;

    width: 100%;

    position: relative;

    background: rgba(0, 0, 0, .5);

    border-radius: 10px;

    left: 0;

    top: 0

}



.swiper-scrollbar-cursor-drag {

    cursor: move

}



.swiper-lazy-preloader {

    width: 42px;

    height: 42px;

    position: absolute;

    left: 50%;

    top: 50%;

    margin-left: -21px;

    margin-top: -21px;

    z-index: 10;

    -webkit-transform-origin: 50%;

    -moz-transform-origin: 50%;

    transform-origin: 50%;

    -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;

    -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;

    animation: swiper-preloader-spin 1s steps(12, end) infinite

}



.swiper-lazy-preloader:after {

    display: block;

    content: "";

    width: 100%;

    height: 100%;

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

    background-position: 50%;

    -webkit-background-size: 100%;

    background-size: 100%;

    background-repeat: no-repeat

}



.swiper-lazy-preloader-white:after {

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")

}



@-webkit-keyframes swiper-preloader-spin {

    100% {

        -webkit-transform: rotate(360deg)

    }

}



@keyframes swiper-preloader-spin {

    100% {

        transform: rotate(360deg)

    }

}



/*动画*/

.animated {

    -webkit-animation-duration: 1s;

    animation-duration: 1s;

    -webkit-animation-fill-mode: both;

    animation-fill-mode: both;

}



.animated.infinite {

    -webkit-animation-iteration-count: infinite;

    animation-iteration-count: infinite

}



.animated.hinge {

    -webkit-animation-duration: 2s;

    animation-duration: 2s

}



@-webkit-keyframes bounce {



    0%,

    100%,

    20%,

    53%,

    80% {

        -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);

        transition-timing-function: cubic-bezier(0.215, .61, .355, 1);

        -webkit-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0)

    }



    40%,

    43% {

        -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);

        transition-timing-function: cubic-bezier(0.755, .050, .855, .060);

        -webkit-transform: translate3d(0, -30px, 0);

        transform: translate3d(0, -30px, 0)

    }



    70% {

        -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);

        transition-timing-function: cubic-bezier(0.755, .050, .855, .060);

        -webkit-transform: translate3d(0, -15px, 0);

        transform: translate3d(0, -15px, 0)

    }



    90% {

        -webkit-transform: translate3d(0, -4px, 0);

        transform: translate3d(0, -4px, 0)

    }

}



@keyframes bounce {



    0%,

    100%,

    20%,

    53%,

    80% {

        -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);

        transition-timing-function: cubic-bezier(0.215, .61, .355, 1);

        -webkit-transform: translate3d(0, 0, 0);

        -ms-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0)

    }



    40%,

    43% {

        -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);

        transition-timing-function: cubic-bezier(0.755, .050, .855, .060);

        -webkit-transform: translate3d(0, -30px, 0);

        -ms-transform: translate3d(0, -30px, 0);

        transform: translate3d(0, -30px, 0)

    }



    70% {

        -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);

        transition-timing-function: cubic-bezier(0.755, .050, .855, .060);

        -webkit-transform: translate3d(0, -15px, 0);

        -ms-transform: translate3d(0, -15px, 0);

        transform: translate3d(0, -15px, 0)

    }



    90% {

        -webkit-transform: translate3d(0, -4px, 0);

        -ms-transform: translate3d(0, -4px, 0);

        transform: translate3d(0, -4px, 0)

    }

}



.bounce {

    -webkit-animation-name: bounce;

    animation-name: bounce;

    -webkit-transform-origin: center bottom;

    -ms-transform-origin: center bottom;

    transform-origin: center bottom

}



@-webkit-keyframes flash {



    0%,

    100%,

    50% {

        opacity: 1

    }



    25%,

    75% {

        opacity: 0

    }

}



@keyframes flash {



    0%,

    100%,

    50% {

        opacity: 1

    }



    25%,

    75% {

        opacity: 0

    }

}



.flash {

    -webkit-animation-name: flash;

    animation-name: flash

}



@-webkit-keyframes pulse {

    0% {

        -webkit-transform: scale3d(1, 1, 1);

        transform: scale3d(1, 1, 1)

    }



    50% {

        -webkit-transform: scale3d(1.05, 1.05, 1.05);

        transform: scale3d(1.05, 1.05, 1.05)

    }



    100% {

        -webkit-transform: scale3d(1, 1, 1);

        transform: scale3d(1, 1, 1)

    }

}



@keyframes pulse {

    0% {

        -webkit-transform: scale3d(1, 1, 1);

        -ms-transform: scale3d(1, 1, 1);

        transform: scale3d(1, 1, 1)

    }



    50% {

        -webkit-transform: scale3d(1.05, 1.05, 1.05);

        -ms-transform: scale3d(1.05, 1.05, 1.05);

        transform: scale3d(1.05, 1.05, 1.05)

    }



    100% {

        -webkit-transform: scale3d(1, 1, 1);

        -ms-transform: scale3d(1, 1, 1);

        transform: scale3d(1, 1, 1)

    }

}



.pulse {

    -webkit-animation-name: pulse;

    animation-name: pulse

}



@-webkit-keyframes rubberBand {

    0% {

        -webkit-transform: scale3d(1, 1, 1);

        transform: scale3d(1, 1, 1)

    }



    30% {

        -webkit-transform: scale3d(1.25, .75, 1);

        transform: scale3d(1.25, .75, 1)

    }



    40% {

        -webkit-transform: scale3d(0.75, 1.25, 1);

        transform: scale3d(0.75, 1.25, 1)

    }



    50% {

        -webkit-transform: scale3d(1.15, .85, 1);

        transform: scale3d(1.15, .85, 1)

    }



    65% {

        -webkit-transform: scale3d(.95, 1.05, 1);

        transform: scale3d(.95, 1.05, 1)

    }



    75% {

        -webkit-transform: scale3d(1.05, .95, 1);

        transform: scale3d(1.05, .95, 1)

    }



    100% {

        -webkit-transform: scale3d(1, 1, 1);

        transform: scale3d(1, 1, 1)

    }

}



@keyframes rubberBand {

    0% {

        -webkit-transform: scale3d(1, 1, 1);

        -ms-transform: scale3d(1, 1, 1);

        transform: scale3d(1, 1, 1)

    }



    30% {

        -webkit-transform: scale3d(1.25, .75, 1);

        -ms-transform: scale3d(1.25, .75, 1);

        transform: scale3d(1.25, .75, 1)

    }



    40% {

        -webkit-transform: scale3d(0.75, 1.25, 1);

        -ms-transform: scale3d(0.75, 1.25, 1);

        transform: scale3d(0.75, 1.25, 1)

    }



    50% {

        -webkit-transform: scale3d(1.15, .85, 1);

        -ms-transform: scale3d(1.15, .85, 1);

        transform: scale3d(1.15, .85, 1)

    }



    65% {

        -webkit-transform: scale3d(.95, 1.05, 1);

        -ms-transform: scale3d(.95, 1.05, 1);

        transform: scale3d(.95, 1.05, 1)

    }



    75% {

        -webkit-transform: scale3d(1.05, .95, 1);

        -ms-transform: scale3d(1.05, .95, 1);

        transform: scale3d(1.05, .95, 1)

    }



    100% {

        -webkit-transform: scale3d(1, 1, 1);

        -ms-transform: scale3d(1, 1, 1);

        transform: scale3d(1, 1, 1)

    }

}



.rubberBand {

    -webkit-animation-name: rubberBand;

    animation-name: rubberBand

}



@-webkit-keyframes shake {



    0%,

    100% {

        -webkit-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0)

    }



    10%,

    30%,

    50%,

    70%,

    90% {

        -webkit-transform: translate3d(-10px, 0, 0);

        transform: translate3d(-10px, 0, 0)

    }



    20%,

    40%,

    60%,

    80% {

        -webkit-transform: translate3d(10px, 0, 0);

        transform: translate3d(10px, 0, 0)

    }

}



@keyframes shake {



    0%,

    100% {

        -webkit-transform: translate3d(0, 0, 0);

        -ms-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0)

    }



    10%,

    30%,

    50%,

    70%,

    90% {

        -webkit-transform: translate3d(-10px, 0, 0);

        -ms-transform: translate3d(-10px, 0, 0);

        transform: translate3d(-10px, 0, 0)

    }



    20%,

    40%,

    60%,

    80% {

        -webkit-transform: translate3d(10px, 0, 0);

        -ms-transform: translate3d(10px, 0, 0);

        transform: translate3d(10px, 0, 0)

    }

}



.shake {

    -webkit-animation-name: shake;

    animation-name: shake

}



@-webkit-keyframes swing {

    20% {

        -webkit-transform: rotate3d(0, 0, 1, 15deg);

        transform: rotate3d(0, 0, 1, 15deg)

    }



    40% {

        -webkit-transform: rotate3d(0, 0, 1, -10deg);

        transform: rotate3d(0, 0, 1, -10deg)

    }



    60% {

        -webkit-transform: rotate3d(0, 0, 1, 5deg);

        transform: rotate3d(0, 0, 1, 5deg)

    }



    80% {

        -webkit-transform: rotate3d(0, 0, 1, -5deg);

        transform: rotate3d(0, 0, 1, -5deg)

    }



    100% {

        -webkit-transform: rotate3d(0, 0, 1, 0deg);

        transform: rotate3d(0, 0, 1, 0deg)

    }

}



@keyframes swing {

    20% {

        -webkit-transform: rotate3d(0, 0, 1, 15deg);

        -ms-transform: rotate3d(0, 0, 1, 15deg);

        transform: rotate3d(0, 0, 1, 15deg)

    }



    40% {

        -webkit-transform: rotate3d(0, 0, 1, -10deg);

        -ms-transform: rotate3d(0, 0, 1, -10deg);

        transform: rotate3d(0, 0, 1, -10deg)

    }



    60% {

        -webkit-transform: rotate3d(0, 0, 1, 5deg);

        -ms-transform: rotate3d(0, 0, 1, 5deg);

        transform: rotate3d(0, 0, 1, 5deg)

    }



    80% {

        -webkit-transform: rotate3d(0, 0, 1, -5deg);

        -ms-transform: rotate3d(0, 0, 1, -5deg);

        transform: rotate3d(0, 0, 1, -5deg)

    }



    100% {

        -webkit-transform: rotate3d(0, 0, 1, 0deg);

        -ms-transform: rotate3d(0, 0, 1, 0deg);

        transform: rotate3d(0, 0, 1, 0deg)

    }

}



.swing {

    -webkit-transform-origin: top center;

    -ms-transform-origin: top center;

    transform-origin: top center;

    -webkit-animation-name: swing;

    animation-name: swing

}



@-webkit-keyframes tada {

    0% {

        -webkit-transform: scale3d(1, 1, 1);

        transform: scale3d(1, 1, 1)

    }



    10%,

    20% {

        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);

        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)

    }



    30%,

    50%,

    70%,

    90% {

        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);

        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)

    }



    40%,

    60%,

    80% {

        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);

        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)

    }



    100% {

        -webkit-transform: scale3d(1, 1, 1);

        transform: scale3d(1, 1, 1)

    }

}



@keyframes tada {

    0% {

        -webkit-transform: scale3d(1, 1, 1);

        -ms-transform: scale3d(1, 1, 1);

        transform: scale3d(1, 1, 1)

    }



    10%,

    20% {

        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);

        -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);

        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)

    }



    30%,

    50%,

    70%,

    90% {

        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);

        -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);

        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)

    }



    40%,

    60%,

    80% {

        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);

        -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);

        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)

    }



    100% {

        -webkit-transform: scale3d(1, 1, 1);

        -ms-transform: scale3d(1, 1, 1);

        transform: scale3d(1, 1, 1)

    }

}



.tada {

    -webkit-animation-name: tada;

    animation-name: tada

}



@-webkit-keyframes wobble {

    0% {

        -webkit-transform: none;

        transform: none

    }



    15% {

        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);

        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)

    }



    30% {

        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);

        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)

    }



    45% {

        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);

        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)

    }



    60% {

        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);

        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)

    }



    75% {

        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);

        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)

    }



    100% {

        -webkit-transform: none;

        transform: none

    }

}



@keyframes wobble {

    0% {

        -webkit-transform: none;

        -ms-transform: none;

        transform: none

    }



    15% {

        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);

        -ms-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);

        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)

    }



    30% {

        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);

        -ms-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);

        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)

    }



    45% {

        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);

        -ms-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);

        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)

    }



    60% {

        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);

        -ms-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);

        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)

    }



    75% {

        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);

        -ms-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);

        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)

    }



    100% {

        -webkit-transform: none;

        -ms-transform: none;

        transform: none

    }

}



.wobble {

    -webkit-animation-name: wobble;

    animation-name: wobble

}



@-webkit-keyframes bounceIn {



    0%,

    100%,

    20%,

    40%,

    60%,

    80% {

        -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);

        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)

    }



    0% {

        opacity: 0;

        -webkit-transform: scale3d(.3, .3, .3);

        transform: scale3d(.3, .3, .3)

    }



    20% {

        -webkit-transform: scale3d(1.1, 1.1, 1.1);

        transform: scale3d(1.1, 1.1, 1.1)

    }



    40% {

        -webkit-transform: scale3d(.9, .9, .9);

        transform: scale3d(.9, .9, .9)

    }



    60% {

        opacity: 1;

        -webkit-transform: scale3d(1.03, 1.03, 1.03);

        transform: scale3d(1.03, 1.03, 1.03)

    }



    80% {

        -webkit-transform: scale3d(.97, .97, .97);

        transform: scale3d(.97, .97, .97)

    }



    100% {

        opacity: 1;

        -webkit-transform: scale3d(1, 1, 1);

        transform: scale3d(1, 1, 1)

    }

}



@keyframes bounceIn {



    0%,

    100%,

    20%,

    40%,

    60%,

    80% {

        -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);

        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)

    }



    0% {

        opacity: 0;

        -webkit-transform: scale3d(.3, .3, .3);

        -ms-transform: scale3d(.3, .3, .3);

        transform: scale3d(.3, .3, .3)

    }



    20% {

        -webkit-transform: scale3d(1.1, 1.1, 1.1);

        -ms-transform: scale3d(1.1, 1.1, 1.1);

        transform: scale3d(1.1, 1.1, 1.1)

    }



    40% {

        -webkit-transform: scale3d(.9, .9, .9);

        -ms-transform: scale3d(.9, .9, .9);

        transform: scale3d(.9, .9, .9)

    }



    60% {

        opacity: 1;

        -webkit-transform: scale3d(1.03, 1.03, 1.03);

        -ms-transform: scale3d(1.03, 1.03, 1.03);

        transform: scale3d(1.03, 1.03, 1.03)

    }



    80% {

        -webkit-transform: scale3d(.97, .97, .97);

        -ms-transform: scale3d(.97, .97, .97);

        transform: scale3d(.97, .97, .97)

    }



    100% {

        opacity: 1;

        -webkit-transform: scale3d(1, 1, 1);

        -ms-transform: scale3d(1, 1, 1);

        transform: scale3d(1, 1, 1)

    }

}



.bounceIn {

    -webkit-animation-name: bounceIn;

    animation-name: bounceIn;

    -webkit-animation-duration: .75s;

    animation-duration: .75s

}



@-webkit-keyframes bounceInDown {



    0%,

    100%,

    60%,

    75%,

    90% {

        -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);

        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)

    }



    0% {

        opacity: 0;

        -webkit-transform: translate3d(0, -3000px, 0);

        transform: translate3d(0, -3000px, 0)

    }



    60% {

        opacity: 1;

        -webkit-transform: translate3d(0, 25px, 0);

        transform: translate3d(0, 25px, 0)

    }



    75% {

        -webkit-transform: translate3d(0, -10px, 0);

        transform: translate3d(0, -10px, 0)

    }



    90% {

        -webkit-transform: translate3d(0, 5px, 0);

        transform: translate3d(0, 5px, 0)

    }



    100% {

        -webkit-transform: none;

        transform: none

    }

}



@keyframes bounceInDown {



    0%,

    100%,

    60%,

    75%,

    90% {

        -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);

        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)

    }



    0% {

        opacity: 0;

        -webkit-transform: translate3d(0, -3000px, 0);

        -ms-transform: translate3d(0, -3000px, 0);

        transform: translate3d(0, -3000px, 0)

    }



    60% {

        opacity: 1;

        -webkit-transform: translate3d(0, 25px, 0);

        -ms-transform: translate3d(0, 25px, 0);

        transform: translate3d(0, 25px, 0)

    }



    75% {

        -webkit-transform: translate3d(0, -10px, 0);

        -ms-transform: translate3d(0, -10px, 0);

        transform: translate3d(0, -10px, 0)

    }



    90% {

        -webkit-transform: translate3d(0, 5px, 0);

        -ms-transform: translate3d(0, 5px, 0);

        transform: translate3d(0, 5px, 0)

    }



    100% {

        -webkit-transform: none;

        -ms-transform: none;

        transform: none

    }

}



.bounceInDown {

    -webkit-animation-name: bounceInDown;

    animation-name: bounceInDown

}



@-webkit-keyframes bounceInLeft {



    0%,

    100%,

    60%,

    75%,

    90% {

        -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);

        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)

    }



    0% {

        opacity: 0;

        -webkit-transform: translate3d(-3000px, 0, 0);

        transform: translate3d(-3000px, 0, 0)

    }



    60% {

        opacity: 1;

        -webkit-transform: translate3d(25px, 0, 0);

        transform: translate3d(25px, 0, 0)

    }



    75% {

        -webkit-transform: translate3d(-10px, 0, 0);

        transform: translate3d(-10px, 0, 0)

    }



    90% {

        -webkit-transform: translate3d(5px, 0, 0);

        transform: translate3d(5px, 0, 0)

    }



    100% {

        -webkit-transform: none;

        transform: none

    }

}



@keyframes bounceInLeft {



    0%,

    100%,

    60%,

    75%,

    90% {

        -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);

        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)

    }



    0% {

        opacity: 0;

        -webkit-transform: translate3d(-3000px, 0, 0);

        -ms-transform: translate3d(-3000px, 0, 0);

        transform: translate3d(-3000px, 0, 0)

    }



    60% {

        opacity: 1;

        -webkit-transform: translate3d(25px, 0, 0);

        -ms-transform: translate3d(25px, 0, 0);

        transform: translate3d(25px, 0, 0)

    }



    75% {

        -webkit-transform: translate3d(-10px, 0, 0);

        -ms-transform: translate3d(-10px, 0, 0);

        transform: translate3d(-10px, 0, 0)

    }



    90% {

        -webkit-transform: translate3d(5px, 0, 0);

        -ms-transform: translate3d(5px, 0, 0);

        transform: translate3d(5px, 0, 0)

    }



    100% {

        -webkit-transform: none;

        -ms-transform: none;

        transform: none

    }

}



.bounceInLeft {

    -webkit-animation-name: bounceInLeft;

    animation-name: bounceInLeft

}



@-webkit-keyframes bounceInRight {



    0%,

    100%,

    60%,

    75%,

    90% {

        -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);

        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)

    }



    0% {

        opacity: 0;

        -webkit-transform: translate3d(3000px, 0, 0);

        transform: translate3d(3000px, 0, 0)

    }



    60% {

        opacity: 1;

        -webkit-transform: translate3d(-25px, 0, 0);

        transform: translate3d(-25px, 0, 0)

    }



    75% {

        -webkit-transform: translate3d(10px, 0, 0);

        transform: translate3d(10px, 0, 0)

    }



    90% {

        -webkit-transform: translate3d(-5px, 0, 0);

        transform: translate3d(-5px, 0, 0)

    }



    100% {

        -webkit-transform: none;

        transform: none

    }

}



@keyframes bounceInRight {



    0%,

    100%,

    60%,

    75%,

    90% {

        -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);

        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)

    }



    0% {

        opacity: 0;

        -webkit-transform: translate3d(3000px, 0, 0);

        -ms-transform: translate3d(3000px, 0, 0);

        transform: translate3d(3000px, 0, 0)

    }



    60% {

        opacity: 1;

        -webkit-transform: translate3d(-25px, 0, 0);

        -ms-transform: translate3d(-25px, 0, 0);

        transform: translate3d(-25px, 0, 0)

    }



    75% {

        -webkit-transform: translate3d(10px, 0, 0);

        -ms-transform: translate3d(10px, 0, 0);

        transform: translate3d(10px, 0, 0)

    }



    90% {

        -webkit-transform: translate3d(-5px, 0, 0);

        -ms-transform: translate3d(-5px, 0, 0);

        transform: translate3d(-5px, 0, 0)

    }



    100% {

        -webkit-transform: none;

        -ms-transform: none;

        transform: none

    }

}



.bounceInRight {

    -webkit-animation-name: bounceInRight;

    animation-name: bounceInRight

}



@-webkit-keyframes bounceInUp {



    0%,

    100%,

    60%,

    75%,

    90% {

        -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);

        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)

    }



    0% {

        opacity: 0;

        -webkit-transform: translate3d(0, 3000px, 0);

        transform: translate3d(0, 3000px, 0)

    }



    60% {

        opacity: 1;

        -webkit-transform: translate3d(0, -20px, 0);

        transform: translate3d(0, -20px, 0)

    }



    75% {

        -webkit-transform: translate3d(0, 10px, 0);

        transform: translate3d(0, 10px, 0)

    }



    90% {

        -webkit-transform: translate3d(0, -5px, 0);

        transform: translate3d(0, -5px, 0)

    }



    100% {

        -webkit-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0)

    }

}



@keyframes bounceInUp {



    0%,

    100%,

    60%,

    75%,

    90% {

        -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);

        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)

    }



    0% {

        opacity: 0;

        -webkit-transform: translate3d(0, 3000px, 0);

        -ms-transform: translate3d(0, 3000px, 0);

        transform: translate3d(0, 3000px, 0)

    }



    60% {

        opacity: 1;

        -webkit-transform: translate3d(0, -20px, 0);

        -ms-transform: translate3d(0, -20px, 0);

        transform: translate3d(0, -20px, 0)

    }



    75% {

        -webkit-transform: translate3d(0, 10px, 0);

        -ms-transform: translate3d(0, 10px, 0);

        transform: translate3d(0, 10px, 0)

    }



    90% {

        -webkit-transform: translate3d(0, -5px, 0);

        -ms-transform: translate3d(0, -5px, 0);

        transform: translate3d(0, -5px, 0)

    }



    100% {

        -webkit-transform: translate3d(0, 0, 0);

        -ms-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0)

    }

}



.bounceInUp {

    -webkit-animation-name: bounceInUp;

    animation-name: bounceInUp

}



@-webkit-keyframes bounceOut {

    20% {

        -webkit-transform: scale3d(.9, .9, .9);

        transform: scale3d(.9, .9, .9)

    }



    50%,

    55% {

        opacity: 1;

        -webkit-transform: scale3d(1.1, 1.1, 1.1);

        transform: scale3d(1.1, 1.1, 1.1)

    }



    100% {

        opacity: 0;

        -webkit-transform: scale3d(.3, .3, .3);

        transform: scale3d(.3, .3, .3)

    }

}



@keyframes bounceOut {

    20% {

        -webkit-transform: scale3d(.9, .9, .9);

        -ms-transform: scale3d(.9, .9, .9);

        transform: scale3d(.9, .9, .9)

    }



    50%,

    55% {

        opacity: 1;

        -webkit-transform: scale3d(1.1, 1.1, 1.1);

        -ms-transform: scale3d(1.1, 1.1, 1.1);

        transform: scale3d(1.1, 1.1, 1.1)

    }



    100% {

        opacity: 0;

        -webkit-transform: scale3d(.3, .3, .3);

        -ms-transform: scale3d(.3, .3, .3);

        transform: scale3d(.3, .3, .3)

    }

}



.bounceOut {

    -webkit-animation-name: bounceOut;

    animation-name: bounceOut;

    -webkit-animation-duration: .75s;

    animation-duration: .75s

}



@-webkit-keyframes bounceOutDown {

    20% {

        -webkit-transform: translate3d(0, 10px, 0);

        transform: translate3d(0, 10px, 0)

    }



    40%,

    45% {

        opacity: 1;

        -webkit-transform: translate3d(0, -20px, 0);

        transform: translate3d(0, -20px, 0)

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(0, 2000px, 0);

        transform: translate3d(0, 2000px, 0)

    }

}



@keyframes bounceOutDown {

    20% {

        -webkit-transform: translate3d(0, 10px, 0);

        -ms-transform: translate3d(0, 10px, 0);

        transform: translate3d(0, 10px, 0)

    }



    40%,

    45% {

        opacity: 1;

        -webkit-transform: translate3d(0, -20px, 0);

        -ms-transform: translate3d(0, -20px, 0);

        transform: translate3d(0, -20px, 0)

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(0, 2000px, 0);

        -ms-transform: translate3d(0, 2000px, 0);

        transform: translate3d(0, 2000px, 0)

    }

}



.bounceOutDown {

    -webkit-animation-name: bounceOutDown;

    animation-name: bounceOutDown

}



@-webkit-keyframes bounceOutLeft {

    20% {

        opacity: 1;

        -webkit-transform: translate3d(20px, 0, 0);

        transform: translate3d(20px, 0, 0)

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(-2000px, 0, 0);

        transform: translate3d(-2000px, 0, 0)

    }

}



@keyframes bounceOutLeft {

    20% {

        opacity: 1;

        -webkit-transform: translate3d(20px, 0, 0);

        -ms-transform: translate3d(20px, 0, 0);

        transform: translate3d(20px, 0, 0)

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(-2000px, 0, 0);

        -ms-transform: translate3d(-2000px, 0, 0);

        transform: translate3d(-2000px, 0, 0)

    }

}



.bounceOutLeft {

    -webkit-animation-name: bounceOutLeft;

    animation-name: bounceOutLeft

}



@-webkit-keyframes bounceOutRight {

    20% {

        opacity: 1;

        -webkit-transform: translate3d(-20px, 0, 0);

        transform: translate3d(-20px, 0, 0)

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(2000px, 0, 0);

        transform: translate3d(2000px, 0, 0)

    }

}



@keyframes bounceOutRight {

    20% {

        opacity: 1;

        -webkit-transform: translate3d(-20px, 0, 0);

        -ms-transform: translate3d(-20px, 0, 0);

        transform: translate3d(-20px, 0, 0)

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(2000px, 0, 0);

        -ms-transform: translate3d(2000px, 0, 0);

        transform: translate3d(2000px, 0, 0)

    }

}



.bounceOutRight {

    -webkit-animation-name: bounceOutRight;

    animation-name: bounceOutRight

}



@-webkit-keyframes bounceOutUp {

    20% {

        -webkit-transform: translate3d(0, -10px, 0);

        transform: translate3d(0, -10px, 0)

    }



    40%,

    45% {

        opacity: 1;

        -webkit-transform: translate3d(0, 20px, 0);

        transform: translate3d(0, 20px, 0)

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(0, -2000px, 0);

        transform: translate3d(0, -2000px, 0)

    }

}



@keyframes bounceOutUp {

    20% {

        -webkit-transform: translate3d(0, -10px, 0);

        -ms-transform: translate3d(0, -10px, 0);

        transform: translate3d(0, -10px, 0)

    }



    40%,

    45% {

        opacity: 1;

        -webkit-transform: translate3d(0, 20px, 0);

        -ms-transform: translate3d(0, 20px, 0);

        transform: translate3d(0, 20px, 0)

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(0, -2000px, 0);

        -ms-transform: translate3d(0, -2000px, 0);

        transform: translate3d(0, -2000px, 0)

    }

}



.bounceOutUp {

    -webkit-animation-name: bounceOutUp;

    animation-name: bounceOutUp

}



@-webkit-keyframes fadeIn {

    0% {

        opacity: 0

    }



    100% {

        opacity: 1

    }

}



@keyframes fadeIn {

    0% {

        opacity: 0

    }



    100% {

        opacity: 1

    }

}



.fadeIn {

    -webkit-animation-name: fadeIn;

    animation-name: fadeIn

}



@-webkit-keyframes fadeInDown {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(0, -100%, 0);

        transform: translate3d(0, -100%, 0)

    }



    100% {

        opacity: 1;

        -webkit-transform: none;

        transform: none

    }

}



@keyframes fadeInDown {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(0, -100%, 0);

        -ms-transform: translate3d(0, -100%, 0);

        transform: translate3d(0, -100%, 0)

    }



    100% {

        opacity: 1;

        -webkit-transform: none;

        -ms-transform: none;

        transform: none

    }

}



.fadeInDown {

    -webkit-animation-name: fadeInDown;

    animation-name: fadeInDown

}



@-webkit-keyframes fadeInDownBig {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(0, -2000px, 0);

        transform: translate3d(0, -2000px, 0)

    }



    100% {

        opacity: 1;

        -webkit-transform: none;

        transform: none

    }

}



@keyframes fadeInDownBig {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(0, -2000px, 0);

        -ms-transform: translate3d(0, -2000px, 0);

        transform: translate3d(0, -2000px, 0)

    }



    100% {

        opacity: 1;

        -webkit-transform: none;

        -ms-transform: none;

        transform: none

    }

}



.fadeInDownBig {

    -webkit-animation-name: fadeInDownBig;

    animation-name: fadeInDownBig

}



@-webkit-keyframes fadeInLeft {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(-100%, 0, 0);

        transform: translate3d(-100%, 0, 0)

    }



    100% {

        opacity: 1;

        -webkit-transform: none;

        transform: none

    }

}



@keyframes fadeInLeft {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(-100%, 0, 0);

        -ms-transform: translate3d(-100%, 0, 0);

        transform: translate3d(-100%, 0, 0)

    }



    100% {

        opacity: 1;

        -webkit-transform: none;

        -ms-transform: none;

        transform: none

    }

}



.fadeInLeft {

    -webkit-animation-name: fadeInLeft;

    animation-name: fadeInLeft

}



@-webkit-keyframes fadeInLeftBig {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(-2000px, 0, 0);

        transform: translate3d(-2000px, 0, 0)

    }



    100% {

        opacity: 1;

        -webkit-transform: none;

        transform: none

    }

}



@keyframes fadeInLeftBig {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(-2000px, 0, 0);

        -ms-transform: translate3d(-2000px, 0, 0);

        transform: translate3d(-2000px, 0, 0)

    }



    100% {

        opacity: 1;

        -webkit-transform: none;

        -ms-transform: none;

        transform: none

    }

}



.fadeInLeftBig {

    -webkit-animation-name: fadeInLeftBig;

    animation-name: fadeInLeftBig

}



@-webkit-keyframes fadeInRight {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(100%, 0, 0);

        transform: translate3d(100%, 0, 0)

    }



    100% {

        opacity: 1;

        -webkit-transform: none;

        transform: none

    }

}



@keyframes fadeInRight {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(100%, 0, 0);

        -ms-transform: translate3d(100%, 0, 0);

        transform: translate3d(100%, 0, 0)

    }



    100% {

        opacity: 1;

        -webkit-transform: none;

        -ms-transform: none;

        transform: none

    }

}



.fadeInRight {

    -webkit-animation-name: fadeInRight;

    animation-name: fadeInRight

}



@-webkit-keyframes fadeInRightBig {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(2000px, 0, 0);

        transform: translate3d(2000px, 0, 0)

    }



    100% {

        opacity: 1;

        -webkit-transform: none;

        transform: none

    }

}



@keyframes fadeInRightBig {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(2000px, 0, 0);

        -ms-transform: translate3d(2000px, 0, 0);

        transform: translate3d(2000px, 0, 0)

    }



    100% {

        opacity: 1;

        -webkit-transform: none;

        -ms-transform: none;

        transform: none

    }

}



.fadeInRightBig {

    -webkit-animation-name: fadeInRightBig;

    animation-name: fadeInRightBig

}



@-webkit-keyframes fadeInUp {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(0, 100%, 0);

        transform: translate3d(0, 100%, 0)

    }



    100% {

        opacity: 1;

        -webkit-transform: none;

        transform: none

    }

}



@keyframes fadeInUp {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(0, 100%, 0);

        -ms-transform: translate3d(0, 100%, 0);

        transform: translate3d(0, 100%, 0)

    }



    100% {

        opacity: 1;

        -webkit-transform: none;

        -ms-transform: none;

        transform: none

    }

}



.fadeInUp {

    -webkit-animation-name: fadeInUp;

    animation-name: fadeInUp

}



@-webkit-keyframes fadeInUpBig {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(0, 2000px, 0);

        transform: translate3d(0, 2000px, 0)

    }



    100% {

        opacity: 1;

        -webkit-transform: none;

        transform: none

    }

}



@keyframes fadeInUpBig {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(0, 2000px, 0);

        -ms-transform: translate3d(0, 2000px, 0);

        transform: translate3d(0, 2000px, 0)

    }



    100% {

        opacity: 1;

        -webkit-transform: none;

        -ms-transform: none;

        transform: none

    }

}



.fadeInUpBig {

    -webkit-animation-name: fadeInUpBig;

    animation-name: fadeInUpBig

}



@-webkit-keyframes fadeOut {

    0% {

        opacity: 1

    }



    100% {

        opacity: 0

    }

}



@keyframes fadeOut {

    0% {

        opacity: 1

    }



    100% {

        opacity: 0

    }

}



.fadeOut {

    -webkit-animation-name: fadeOut;

    animation-name: fadeOut

}



@-webkit-keyframes fadeOutDown {

    0% {

        opacity: 1

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(0, 100%, 0);

        transform: translate3d(0, 100%, 0)

    }

}



@keyframes fadeOutDown {

    0% {

        opacity: 1

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(0, 100%, 0);

        -ms-transform: translate3d(0, 100%, 0);

        transform: translate3d(0, 100%, 0)

    }

}



.fadeOutDown {

    -webkit-animation-name: fadeOutDown;

    animation-name: fadeOutDown

}



@-webkit-keyframes fadeOutDownBig {

    0% {

        opacity: 1

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(0, 2000px, 0);

        transform: translate3d(0, 2000px, 0)

    }

}



@keyframes fadeOutDownBig {

    0% {

        opacity: 1

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(0, 2000px, 0);

        -ms-transform: translate3d(0, 2000px, 0);

        transform: translate3d(0, 2000px, 0)

    }

}



.fadeOutDownBig {

    -webkit-animation-name: fadeOutDownBig;

    animation-name: fadeOutDownBig

}



@-webkit-keyframes fadeOutLeft {

    0% {

        opacity: 1

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(-100%, 0, 0);

        transform: translate3d(-100%, 0, 0)

    }

}



@keyframes fadeOutLeft {

    0% {

        opacity: 1

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(-100%, 0, 0);

        -ms-transform: translate3d(-100%, 0, 0);

        transform: translate3d(-100%, 0, 0)

    }

}



.fadeOutLeft {

    -webkit-animation-name: fadeOutLeft;

    animation-name: fadeOutLeft

}



@-webkit-keyframes fadeOutLeftBig {

    0% {

        opacity: 1

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(-2000px, 0, 0);

        transform: translate3d(-2000px, 0, 0)

    }

}



@keyframes fadeOutLeftBig {

    0% {

        opacity: 1

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(-2000px, 0, 0);

        -ms-transform: translate3d(-2000px, 0, 0);

        transform: translate3d(-2000px, 0, 0)

    }

}



.fadeOutLeftBig {

    -webkit-animation-name: fadeOutLeftBig;

    animation-name: fadeOutLeftBig

}



@-webkit-keyframes fadeOutRight {

    0% {

        opacity: 1

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(100%, 0, 0);

        transform: translate3d(100%, 0, 0)

    }

}



@keyframes fadeOutRight {

    0% {

        opacity: 1

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(100%, 0, 0);

        -ms-transform: translate3d(100%, 0, 0);

        transform: translate3d(100%, 0, 0)

    }

}



.fadeOutRight {

    -webkit-animation-name: fadeOutRight;

    animation-name: fadeOutRight

}



@-webkit-keyframes fadeOutRightBig {

    0% {

        opacity: 1

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(2000px, 0, 0);

        transform: translate3d(2000px, 0, 0)

    }

}



@keyframes fadeOutRightBig {

    0% {

        opacity: 1

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(2000px, 0, 0);

        -ms-transform: translate3d(2000px, 0, 0);

        transform: translate3d(2000px, 0, 0)

    }

}



.fadeOutRightBig {

    -webkit-animation-name: fadeOutRightBig;

    animation-name: fadeOutRightBig

}



@-webkit-keyframes fadeOutUp {

    0% {

        opacity: 1

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(0, -100%, 0);

        transform: translate3d(0, -100%, 0)

    }

}



@keyframes fadeOutUp {

    0% {

        opacity: 1

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(0, -100%, 0);

        -ms-transform: translate3d(0, -100%, 0);

        transform: translate3d(0, -100%, 0)

    }

}



.fadeOutUp {

    -webkit-animation-name: fadeOutUp;

    animation-name: fadeOutUp

}



@-webkit-keyframes fadeOutUpBig {

    0% {

        opacity: 1

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(0, -2000px, 0);

        transform: translate3d(0, -2000px, 0)

    }

}



@keyframes fadeOutUpBig {

    0% {

        opacity: 1

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(0, -2000px, 0);

        -ms-transform: translate3d(0, -2000px, 0);

        transform: translate3d(0, -2000px, 0)

    }

}



.fadeOutUpBig {

    -webkit-animation-name: fadeOutUpBig;

    animation-name: fadeOutUpBig

}



@-webkit-keyframes flip {

    0% {

        -webkit-transform: perspective() rotate3d(0, 1, 0, -360deg);

        transform: perspective() rotate3d(0, 1, 0, -360deg);

        -webkit-animation-timing-function: ease-out;

        animation-timing-function: ease-out

    }



    40% {

        -webkit-transform: perspective(0px) translate3d(0, 0, 50px) rotate3d(0, 1, 0, -190deg);

        transform: perspective(0px) translate3d(0, 0, 50px) rotate3d(0, 1, 0, -190deg);

        -webkit-animation-timing-function: ease-out;

        animation-timing-function: ease-out

    }



    50% {

        -webkit-transform: perspective(0px) translate3d(0, 0, 50px) rotate3d(0, 1, 0, -170deg);

        transform: perspective(0px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);

        -webkit-animation-timing-function: ease-in;

        animation-timing-function: ease-in

    }



    80% {

        -webkit-transform: perspective(0px) scale3d(.95, .95, .95);

        transform: perspective(0px) scale3d(.95, .95, .95);

        -webkit-animation-timing-function: ease-in;

        animation-timing-function: ease-in

    }



    100% {

        -webkit-transform: perspective(0px);

        transform: perspective(0px);

        -webkit-animation-timing-function: ease-in;

        animation-timing-function: ease-in

    }

}



@keyframes flip {

    0% {

        -webkit-transform: perspective(0px) rotate3d(0, 1, 0, -360deg);

        -ms-transform: perspective(0px) rotate3d(0, 1, 0, -360deg);

        transform: perspective(0px) rotate3d(0, 1, 0, -360deg);

        -webkit-animation-timing-function: ease-out;

        animation-timing-function: ease-out

    }



    40% {

        -webkit-transform: perspective(0px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);

        -ms-transform: perspective(0px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);

        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);

        -webkit-animation-timing-function: ease-out;

        animation-timing-function: ease-out

    }



    50% {

        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);

        -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);

        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);

        -webkit-animation-timing-function: ease-in;

        animation-timing-function: ease-in

    }



    80% {

        -webkit-transform: perspective(400px) scale3d(.95, .95, .95);

        -ms-transform: perspective(400px) scale3d(.95, .95, .95);

        transform: perspective(400px) scale3d(.95, .95, .95);

        -webkit-animation-timing-function: ease-in;

        animation-timing-function: ease-in

    }



    100% {

        -webkit-transform: perspective(400px);

        -ms-transform: perspective(400px);

        transform: perspective(400px);

        -webkit-animation-timing-function: ease-in;

        animation-timing-function: ease-in

    }

}



.animated.flip {

    -webkit-backface-visibility: visible;

    -ms-backface-visibility: visible;

    backface-visibility: visible;

    -webkit-animation-name: flip;

    animation-name: flip

}



@-webkit-keyframes flipInX {

    0% {

        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);

        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);

        -webkit-transition-timing-function: ease-in;

        transition-timing-function: ease-in;

        opacity: 0

    }



    40% {

        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);

        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);

        -webkit-transition-timing-function: ease-in;

        transition-timing-function: ease-in

    }



    60% {

        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);

        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);

        opacity: 1

    }



    80% {

        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);

        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)

    }



    100% {

        -webkit-transform: perspective(400px);

        transform: perspective(400px)

    }

}



@keyframes flipInX {

    0% {

        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);

        -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);

        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);

        -webkit-transition-timing-function: ease-in;

        transition-timing-function: ease-in;

        opacity: 0

    }



    40% {

        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);

        -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);

        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);

        -webkit-transition-timing-function: ease-in;

        transition-timing-function: ease-in

    }



    60% {

        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);

        -ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);

        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);

        opacity: 1

    }



    80% {

        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);

        -ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);

        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)

    }



    100% {

        -webkit-transform: perspective(400px);

        -ms-transform: perspective(400px);

        transform: perspective(400px)

    }

}



.flipInX {

    -webkit-backface-visibility: visible !important;

    -ms-backface-visibility: visible !important;

    backface-visibility: visible !important;

    -webkit-animation-name: flipInX;

    animation-name: flipInX

}



@-webkit-keyframes flipInY {

    0% {

        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

        -webkit-transition-timing-function: ease-in;

        transition-timing-function: ease-in;

        opacity: 0

    }



    40% {

        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);

        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);

        -webkit-transition-timing-function: ease-in;

        transition-timing-function: ease-in

    }



    60% {

        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);

        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);

        opacity: 1

    }



    80% {

        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);

        transform: perspective(400px) rotate3d(0, 1, 0, -5deg)

    }



    100% {

        -webkit-transform: perspective(400px);

        transform: perspective(400px)

    }

}



@keyframes flipInY {

    0% {

        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

        -ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

        -webkit-transition-timing-function: ease-in;

        transition-timing-function: ease-in;

        opacity: 0

    }



    40% {

        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);

        -ms-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);

        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);

        -webkit-transition-timing-function: ease-in;

        transition-timing-function: ease-in

    }



    60% {

        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);

        -ms-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);

        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);

        opacity: 1

    }



    80% {

        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);

        -ms-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);

        transform: perspective(400px) rotate3d(0, 1, 0, -5deg)

    }



    100% {

        -webkit-transform: perspective(400px);

        -ms-transform: perspective(400px);

        transform: perspective(400px)

    }

}



.flipInY {

    -webkit-backface-visibility: visible !important;

    -ms-backface-visibility: visible !important;

    backface-visibility: visible !important;

    -webkit-animation-name: flipInY;

    animation-name: flipInY

}



@-webkit-keyframes flipOutX {

    0% {

        -webkit-transform: perspective(400px);

        transform: perspective(400px)

    }



    30% {

        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);

        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);

        opacity: 1

    }



    100% {

        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);

        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);

        opacity: 0

    }

}



@keyframes flipOutX {

    0% {

        -webkit-transform: perspective(400px);

        -ms-transform: perspective(400px);

        transform: perspective(400px)

    }



    30% {

        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);

        -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);

        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);

        opacity: 1

    }



    100% {

        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);

        -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);

        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);

        opacity: 0

    }

}



.flipOutX {

    -webkit-animation-name: flipOutX;

    animation-name: flipOutX;

    -webkit-animation-duration: .75s;

    animation-duration: .75s;

    -webkit-backface-visibility: visible !important;

    -ms-backface-visibility: visible !important;

    backface-visibility: visible !important

}



@-webkit-keyframes flipOutY {

    0% {

        -webkit-transform: perspective(400px);

        transform: perspective(400px)

    }



    30% {

        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);

        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);

        opacity: 1

    }



    100% {

        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

        opacity: 0

    }

}



@keyframes flipOutY {

    0% {

        -webkit-transform: perspective(400px);

        -ms-transform: perspective(400px);

        transform: perspective(400px)

    }



    30% {

        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);

        -ms-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);

        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);

        opacity: 1

    }



    100% {

        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

        -ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

        opacity: 0

    }

}



.flipOutY {

    -webkit-backface-visibility: visible !important;

    -ms-backface-visibility: visible !important;

    backface-visibility: visible !important;

    -webkit-animation-name: flipOutY;

    animation-name: flipOutY;

    -webkit-animation-duration: .75s;

    animation-duration: .75s

}



@-webkit-keyframes lightSpeedIn {

    0% {

        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);

        transform: translate3d(100%, 0, 0) skewX(-30deg);

        opacity: 0

    }



    60% {

        -webkit-transform: skewX(20deg);

        transform: skewX(20deg);

        opacity: 1

    }



    80% {

        -webkit-transform: skewX(-5deg);

        transform: skewX(-5deg);

        opacity: 1

    }



    100% {

        -webkit-transform: none;

        transform: none;

        opacity: 1

    }

}



@keyframes lightSpeedIn {

    0% {

        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);

        -ms-transform: translate3d(100%, 0, 0) skewX(-30deg);

        transform: translate3d(100%, 0, 0) skewX(-30deg);

        opacity: 0

    }



    60% {

        -webkit-transform: skewX(20deg);

        -ms-transform: skewX(20deg);

        transform: skewX(20deg);

        opacity: 1

    }



    80% {

        -webkit-transform: skewX(-5deg);

        -ms-transform: skewX(-5deg);

        transform: skewX(-5deg);

        opacity: 1

    }



    100% {

        -webkit-transform: none;

        -ms-transform: none;

        transform: none;

        opacity: 1

    }

}



.lightSpeedIn {

    -webkit-animation-name: lightSpeedIn;

    animation-name: lightSpeedIn;

    -webkit-animation-timing-function: ease-out;

    animation-timing-function: ease-out

}



@-webkit-keyframes lightSpeedOut {

    0% {

        opacity: 1

    }



    100% {

        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);

        transform: translate3d(100%, 0, 0) skewX(30deg);

        opacity: 0

    }

}



@keyframes lightSpeedOut {

    0% {

        opacity: 1

    }



    100% {

        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);

        -ms-transform: translate3d(100%, 0, 0) skewX(30deg);

        transform: translate3d(100%, 0, 0) skewX(30deg);

        opacity: 0

    }

}



.lightSpeedOut {

    -webkit-animation-name: lightSpeedOut;

    animation-name: lightSpeedOut;

    -webkit-animation-timing-function: ease-in;

    animation-timing-function: ease-in

}



@-webkit-keyframes rotateIn {

    0% {

        -webkit-transform-origin: center;

        transform-origin: center;

        -webkit-transform: rotate3d(0, 0, 1, -200deg);

        transform: rotate3d(0, 0, 1, -200deg);

        opacity: 0

    }



    100% {

        -webkit-transform-origin: center;

        transform-origin: center;

        -webkit-transform: none;

        transform: none;

        opacity: 1

    }

}



@keyframes rotateIn {

    0% {

        -webkit-transform-origin: center;

        -ms-transform-origin: center;

        transform-origin: center;

        -webkit-transform: rotate3d(0, 0, 1, -200deg);

        -ms-transform: rotate3d(0, 0, 1, -200deg);

        transform: rotate3d(0, 0, 1, -200deg);

        opacity: 0

    }



    100% {

        -webkit-transform-origin: center;

        -ms-transform-origin: center;

        transform-origin: center;

        -webkit-transform: none;

        -ms-transform: none;

        transform: none;

        opacity: 1

    }

}



.rotateIn {

    -webkit-animation-name: rotateIn;

    animation-name: rotateIn

}



@-webkit-keyframes rotateInDownLeft {

    0% {

        -webkit-transform-origin: left bottom;

        transform-origin: left bottom;

        -webkit-transform: rotate3d(0, 0, 1, -45deg);

        transform: rotate3d(0, 0, 1, -45deg);

        opacity: 0

    }



    100% {

        -webkit-transform-origin: left bottom;

        transform-origin: left bottom;

        -webkit-transform: none;

        transform: none;

        opacity: 1

    }

}



@keyframes rotateInDownLeft {

    0% {

        -webkit-transform-origin: left bottom;

        -ms-transform-origin: left bottom;

        transform-origin: left bottom;

        -webkit-transform: rotate3d(0, 0, 1, -45deg);

        -ms-transform: rotate3d(0, 0, 1, -45deg);

        transform: rotate3d(0, 0, 1, -45deg);

        opacity: 0

    }



    100% {

        -webkit-transform-origin: left bottom;

        -ms-transform-origin: left bottom;

        transform-origin: left bottom;

        -webkit-transform: none;

        -ms-transform: none;

        transform: none;

        opacity: 1

    }

}



.rotateInDownLeft {

    -webkit-animation-name: rotateInDownLeft;

    animation-name: rotateInDownLeft

}



@-webkit-keyframes rotateInDownRight {

    0% {

        -webkit-transform-origin: right bottom;

        transform-origin: right bottom;

        -webkit-transform: rotate3d(0, 0, 1, 45deg);

        transform: rotate3d(0, 0, 1, 45deg);

        opacity: 0

    }



    100% {

        -webkit-transform-origin: right bottom;

        transform-origin: right bottom;

        -webkit-transform: none;

        transform: none;

        opacity: 1

    }

}



@keyframes rotateInDownRight {

    0% {

        -webkit-transform-origin: right bottom;

        -ms-transform-origin: right bottom;

        transform-origin: right bottom;

        -webkit-transform: rotate3d(0, 0, 1, 45deg);

        -ms-transform: rotate3d(0, 0, 1, 45deg);

        transform: rotate3d(0, 0, 1, 45deg);

        opacity: 0

    }



    100% {

        -webkit-transform-origin: right bottom;

        -ms-transform-origin: right bottom;

        transform-origin: right bottom;

        -webkit-transform: none;

        -ms-transform: none;

        transform: none;

        opacity: 1

    }

}



.rotateInDownRight {

    -webkit-animation-name: rotateInDownRight;

    animation-name: rotateInDownRight

}



@-webkit-keyframes rotateInUpLeft {

    0% {

        -webkit-transform-origin: left bottom;

        transform-origin: left bottom;

        -webkit-transform: rotate3d(0, 0, 1, 45deg);

        transform: rotate3d(0, 0, 1, 45deg);

        opacity: 0

    }



    100% {

        -webkit-transform-origin: left bottom;

        transform-origin: left bottom;

        -webkit-transform: none;

        transform: none;

        opacity: 1

    }

}



@keyframes rotateInUpLeft {

    0% {

        -webkit-transform-origin: left bottom;

        -ms-transform-origin: left bottom;

        transform-origin: left bottom;

        -webkit-transform: rotate3d(0, 0, 1, 45deg);

        -ms-transform: rotate3d(0, 0, 1, 45deg);

        transform: rotate3d(0, 0, 1, 45deg);

        opacity: 0

    }



    100% {

        -webkit-transform-origin: left bottom;

        -ms-transform-origin: left bottom;

        transform-origin: left bottom;

        -webkit-transform: none;

        -ms-transform: none;

        transform: none;

        opacity: 1

    }

}



.rotateInUpLeft {

    -webkit-animation-name: rotateInUpLeft;

    animation-name: rotateInUpLeft

}



@-webkit-keyframes rotateInUpRight {

    0% {

        -webkit-transform-origin: right bottom;

        transform-origin: right bottom;

        -webkit-transform: rotate3d(0, 0, 1, -90deg);

        transform: rotate3d(0, 0, 1, -90deg);

        opacity: 0

    }



    100% {

        -webkit-transform-origin: right bottom;

        transform-origin: right bottom;

        -webkit-transform: none;

        transform: none;

        opacity: 1

    }

}



@keyframes rotateInUpRight {

    0% {

        -webkit-transform-origin: right bottom;

        -ms-transform-origin: right bottom;

        transform-origin: right bottom;

        -webkit-transform: rotate3d(0, 0, 1, -90deg);

        -ms-transform: rotate3d(0, 0, 1, -90deg);

        transform: rotate3d(0, 0, 1, -90deg);

        opacity: 0

    }



    100% {

        -webkit-transform-origin: right bottom;

        -ms-transform-origin: right bottom;

        transform-origin: right bottom;

        -webkit-transform: none;

        -ms-transform: none;

        transform: none;

        opacity: 1

    }

}



.rotateInUpRight {

    -webkit-animation-name: rotateInUpRight;

    animation-name: rotateInUpRight

}



@-webkit-keyframes rotateOut {

    0% {

        -webkit-transform-origin: center;

        transform-origin: center;

        opacity: 1

    }



    100% {

        -webkit-transform-origin: center;

        transform-origin: center;

        -webkit-transform: rotate3d(0, 0, 1, 200deg);

        transform: rotate3d(0, 0, 1, 200deg);

        opacity: 0

    }

}



@keyframes rotateOut {

    0% {

        -webkit-transform-origin: center;

        -ms-transform-origin: center;

        transform-origin: center;

        opacity: 1

    }



    100% {

        -webkit-transform-origin: center;

        -ms-transform-origin: center;

        transform-origin: center;

        -webkit-transform: rotate3d(0, 0, 1, 200deg);

        -ms-transform: rotate3d(0, 0, 1, 200deg);

        transform: rotate3d(0, 0, 1, 200deg);

        opacity: 0

    }

}



.rotateOut {

    -webkit-animation-name: rotateOut;

    animation-name: rotateOut

}



@-webkit-keyframes rotateOutDownLeft {

    0% {

        -webkit-transform-origin: left bottom;

        transform-origin: left bottom;

        opacity: 1

    }



    100% {

        -webkit-transform-origin: left bottom;

        transform-origin: left bottom;

        -webkit-transform: rotate3d(0, 0, 1, 45deg);

        transform: rotate3d(0, 0, 1, 45deg);

        opacity: 0

    }

}



@keyframes rotateOutDownLeft {

    0% {

        -webkit-transform-origin: left bottom;

        -ms-transform-origin: left bottom;

        transform-origin: left bottom;

        opacity: 1

    }



    100% {

        -webkit-transform-origin: left bottom;

        -ms-transform-origin: left bottom;

        transform-origin: left bottom;

        -webkit-transform: rotate3d(0, 0, 1, 45deg);

        -ms-transform: rotate3d(0, 0, 1, 45deg);

        transform: rotate3d(0, 0, 1, 45deg);

        opacity: 0

    }

}



.rotateOutDownLeft {

    -webkit-animation-name: rotateOutDownLeft;

    animation-name: rotateOutDownLeft

}



@-webkit-keyframes rotateOutDownRight {

    0% {

        -webkit-transform-origin: right bottom;

        transform-origin: right bottom;

        opacity: 1

    }



    100% {

        -webkit-transform-origin: right bottom;

        transform-origin: right bottom;

        -webkit-transform: rotate3d(0, 0, 1, -45deg);

        transform: rotate3d(0, 0, 1, -45deg);

        opacity: 0

    }

}



@keyframes rotateOutDownRight {

    0% {

        -webkit-transform-origin: right bottom;

        -ms-transform-origin: right bottom;

        transform-origin: right bottom;

        opacity: 1

    }



    100% {

        -webkit-transform-origin: right bottom;

        -ms-transform-origin: right bottom;

        transform-origin: right bottom;

        -webkit-transform: rotate3d(0, 0, 1, -45deg);

        -ms-transform: rotate3d(0, 0, 1, -45deg);

        transform: rotate3d(0, 0, 1, -45deg);

        opacity: 0

    }

}



.rotateOutDownRight {

    -webkit-animation-name: rotateOutDownRight;

    animation-name: rotateOutDownRight

}



@-webkit-keyframes rotateOutUpLeft {

    0% {

        -webkit-transform-origin: left bottom;

        transform-origin: left bottom;

        opacity: 1

    }



    100% {

        -webkit-transform-origin: left bottom;

        transform-origin: left bottom;

        -webkit-transform: rotate3d(0, 0, 1, -45deg);

        transform: rotate3d(0, 0, 1, -45deg);

        opacity: 0

    }

}



@keyframes rotateOutUpLeft {

    0% {

        -webkit-transform-origin: left bottom;

        -ms-transform-origin: left bottom;

        transform-origin: left bottom;

        opacity: 1

    }



    100% {

        -webkit-transform-origin: left bottom;

        -ms-transform-origin: left bottom;

        transform-origin: left bottom;

        -webkit-transform: rotate3d(0, 0, 1, -45deg);

        -ms-transform: rotate3d(0, 0, 1, -45deg);

        transform: rotate3d(0, 0, 1, -45deg);

        opacity: 0

    }

}



.rotateOutUpLeft {

    -webkit-animation-name: rotateOutUpLeft;

    animation-name: rotateOutUpLeft

}



@-webkit-keyframes rotateOutUpRight {

    0% {

        -webkit-transform-origin: right bottom;

        transform-origin: right bottom;

        opacity: 1

    }



    100% {

        -webkit-transform-origin: right bottom;

        transform-origin: right bottom;

        -webkit-transform: rotate3d(0, 0, 1, 90deg);

        transform: rotate3d(0, 0, 1, 90deg);

        opacity: 0

    }

}



@keyframes rotateOutUpRight {

    0% {

        -webkit-transform-origin: right bottom;

        -ms-transform-origin: right bottom;

        transform-origin: right bottom;

        opacity: 1

    }



    100% {

        -webkit-transform-origin: right bottom;

        -ms-transform-origin: right bottom;

        transform-origin: right bottom;

        -webkit-transform: rotate3d(0, 0, 1, 90deg);

        -ms-transform: rotate3d(0, 0, 1, 90deg);

        transform: rotate3d(0, 0, 1, 90deg);

        opacity: 0

    }

}



.rotateOutUpRight {

    -webkit-animation-name: rotateOutUpRight;

    animation-name: rotateOutUpRight

}



@-webkit-keyframes hinge {

    0% {

        -webkit-transform-origin: top left;

        transform-origin: top left;

        -webkit-animation-timing-function: ease-in-out;

        animation-timing-function: ease-in-out

    }



    20%,

    60% {

        -webkit-transform: rotate3d(0, 0, 1, 80deg);

        transform: rotate3d(0, 0, 1, 80deg);

        -webkit-transform-origin: top left;

        transform-origin: top left;

        -webkit-animation-timing-function: ease-in-out;

        animation-timing-function: ease-in-out

    }



    40%,

    80% {

        -webkit-transform: rotate3d(0, 0, 1, 60deg);

        transform: rotate3d(0, 0, 1, 60deg);

        -webkit-transform-origin: top left;

        transform-origin: top left;

        -webkit-animation-timing-function: ease-in-out;

        animation-timing-function: ease-in-out;

        opacity: 1

    }



    100% {

        -webkit-transform: translate3d(0, 700px, 0);

        transform: translate3d(0, 700px, 0);

        opacity: 0

    }

}



@keyframes hinge {

    0% {

        -webkit-transform-origin: top left;

        -ms-transform-origin: top left;

        transform-origin: top left;

        -webkit-animation-timing-function: ease-in-out;

        animation-timing-function: ease-in-out

    }



    20%,

    60% {

        -webkit-transform: rotate3d(0, 0, 1, 80deg);

        -ms-transform: rotate3d(0, 0, 1, 80deg);

        transform: rotate3d(0, 0, 1, 80deg);

        -webkit-transform-origin: top left;

        -ms-transform-origin: top left;

        transform-origin: top left;

        -webkit-animation-timing-function: ease-in-out;

        animation-timing-function: ease-in-out

    }



    40%,

    80% {

        -webkit-transform: rotate3d(0, 0, 1, 60deg);

        -ms-transform: rotate3d(0, 0, 1, 60deg);

        transform: rotate3d(0, 0, 1, 60deg);

        -webkit-transform-origin: top left;

        -ms-transform-origin: top left;

        transform-origin: top left;

        -webkit-animation-timing-function: ease-in-out;

        animation-timing-function: ease-in-out;

        opacity: 1

    }



    100% {

        -webkit-transform: translate3d(0, 700px, 0);

        -ms-transform: translate3d(0, 700px, 0);

        transform: translate3d(0, 700px, 0);

        opacity: 0

    }

}



.hinge {

    -webkit-animation-name: hinge;

    animation-name: hinge

}



@-webkit-keyframes rollIn {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);

        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)

    }



    100% {

        opacity: 1;

        -webkit-transform: none;

        transform: none

    }

}



@keyframes rollIn {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);

        -ms-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);

        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)

    }



    100% {

        opacity: 1;

        -webkit-transform: none;

        -ms-transform: none;

        transform: none

    }

}



.rollIn {

    -webkit-animation-name: rollIn;

    animation-name: rollIn

}



@-webkit-keyframes rollOut {

    0% {

        opacity: 1

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);

        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)

    }

}



@keyframes rollOut {

    0% {

        opacity: 1

    }



    100% {

        opacity: 0;

        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);

        -ms-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);

        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)

    }

}



.rollOut {

    -webkit-animation-name: rollOut;

    animation-name: rollOut

}



@-webkit-keyframes zoomIn {

    0% {

        opacity: 0;

        -webkit-transform: scale3d(.3, .3, .3);

        transform: scale3d(.3, .3, .3)

    }



    50% {

        opacity: 1

    }

}



@keyframes zoomIn {

    0% {

        opacity: 0;

        -webkit-transform: scale3d(.3, .3, .3);

        -ms-transform: scale3d(.3, .3, .3);

        transform: scale3d(.3, .3, .3)

    }



    50% {

        opacity: 1

    }

}



.zoomIn {

    -webkit-animation-name: zoomIn;

    animation-name: zoomIn

}



@-webkit-keyframes zoomInDown {

    0% {

        opacity: 0;

        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);

        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);

        -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);

        animation-timing-function: cubic-bezier(0.55, .055, .675, .19)

    }



    60% {

        opacity: 1;

        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);

        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);

        -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);

        animation-timing-function: cubic-bezier(0.175, .885, .32, 1)

    }

}



@keyframes zoomInDown {

    0% {

        opacity: 0;

        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);

        -ms-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);

        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);

        -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);

        animation-timing-function: cubic-bezier(0.55, .055, .675, .19)

    }



    60% {

        opacity: 1;

        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);

        -ms-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);

        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);

        -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);

        animation-timing-function: cubic-bezier(0.175, .885, .32, 1)

    }

}



.zoomInDown {

    -webkit-animation-name: zoomInDown;

    animation-name: zoomInDown

}



@-webkit-keyframes zoomInLeft {

    0% {

        opacity: 0;

        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);

        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);

        -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);

        animation-timing-function: cubic-bezier(0.55, .055, .675, .19)

    }



    60% {

        opacity: 1;

        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);

        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);

        -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);

        animation-timing-function: cubic-bezier(0.175, .885, .32, 1)

    }

}



@keyframes zoomInLeft {

    0% {

        opacity: 0;

        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);

        -ms-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);

        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);

        -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);

        animation-timing-function: cubic-bezier(0.55, .055, .675, .19)

    }



    60% {

        opacity: 1;

        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);

        -ms-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);

        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);

        -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);

        animation-timing-function: cubic-bezier(0.175, .885, .32, 1)

    }

}



.zoomInLeft {

    -webkit-animation-name: zoomInLeft;

    animation-name: zoomInLeft

}



@-webkit-keyframes zoomInRight {

    0% {

        opacity: 0;

        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);

        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);

        -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);

        animation-timing-function: cubic-bezier(0.55, .055, .675, .19)

    }



    60% {

        opacity: 1;

        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);

        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);

        -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);

        animation-timing-function: cubic-bezier(0.175, .885, .32, 1)

    }

}



@keyframes zoomInRight {

    0% {

        opacity: 0;

        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);

        -ms-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);

        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);

        -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);

        animation-timing-function: cubic-bezier(0.55, .055, .675, .19)

    }



    60% {

        opacity: 1;

        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);

        -ms-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);

        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);

        -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);

        animation-timing-function: cubic-bezier(0.175, .885, .32, 1)

    }

}



.zoomInRight {

    -webkit-animation-name: zoomInRight;

    animation-name: zoomInRight

}



@-webkit-keyframes zoomInUp {

    0% {

        opacity: 0;

        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);

        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);

        -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);

        animation-timing-function: cubic-bezier(0.55, .055, .675, .19)

    }



    60% {

        opacity: 1;

        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);

        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);

        -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);

        animation-timing-function: cubic-bezier(0.175, .885, .32, 1)

    }

}



@keyframes zoomInUp {

    0% {

        opacity: 0;

        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);

        -ms-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);

        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);

        -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);

        animation-timing-function: cubic-bezier(0.55, .055, .675, .19)

    }



    60% {

        opacity: 1;

        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);

        -ms-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);

        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);

        -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);

        animation-timing-function: cubic-bezier(0.175, .885, .32, 1)

    }

}



.zoomInUp {

    -webkit-animation-name: zoomInUp;

    animation-name: zoomInUp

}



@-webkit-keyframes zoomOut {

    0% {

        opacity: 1

    }



    50% {

        opacity: 0;

        -webkit-transform: scale3d(.3, .3, .3);

        transform: scale3d(.3, .3, .3)

    }



    100% {

        opacity: 0

    }

}



@keyframes zoomOut {

    0% {

        opacity: 1

    }



    50% {

        opacity: 0;

        -webkit-transform: scale3d(.3, .3, .3);

        -ms-transform: scale3d(.3, .3, .3);

        transform: scale3d(.3, .3, .3)

    }



    100% {

        opacity: 0

    }

}



.zoomOut {

    -webkit-animation-name: zoomOut;

    animation-name: zoomOut

}



@-webkit-keyframes zoomOutDown {

    40% {

        opacity: 1;

        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);

        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);

        -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);

        animation-timing-function: cubic-bezier(0.55, .055, .675, .19)

    }



    100% {

        opacity: 0;

        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);

        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);

        -webkit-transform-origin: center bottom;

        transform-origin: center bottom;

        -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);

        animation-timing-function: cubic-bezier(0.175, .885, .32, 1)

    }

}



@keyframes zoomOutDown {

    40% {

        opacity: 1;

        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);

        -ms-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);

        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);

        -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);

        animation-timing-function: cubic-bezier(0.55, .055, .675, .19)

    }



    100% {

        opacity: 0;

        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);

        -ms-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);

        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);

        -webkit-transform-origin: center bottom;

        -ms-transform-origin: center bottom;

        transform-origin: center bottom;

        -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);

        animation-timing-function: cubic-bezier(0.175, .885, .32, 1)

    }

}



.zoomOutDown {

    -webkit-animation-name: zoomOutDown;

    animation-name: zoomOutDown

}



@-webkit-keyframes zoomOutLeft {

    40% {

        opacity: 1;

        -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);

        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)

    }



    100% {

        opacity: 0;

        -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);

        transform: scale(.1) translate3d(-2000px, 0, 0);

        -webkit-transform-origin: left center;

        transform-origin: left center

    }

}



@keyframes zoomOutLeft {

    40% {

        opacity: 1;

        -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);

        -ms-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);

        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)

    }



    100% {

        opacity: 0;

        -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);

        -ms-transform: scale(.1) translate3d(-2000px, 0, 0);

        transform: scale(.1) translate3d(-2000px, 0, 0);

        -webkit-transform-origin: left center;

        -ms-transform-origin: left center;

        transform-origin: left center

    }

}



.zoomOutLeft {

    -webkit-animation-name: zoomOutLeft;

    animation-name: zoomOutLeft

}



@-webkit-keyframes zoomOutRight {

    40% {

        opacity: 1;

        -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);

        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)

    }



    100% {

        opacity: 0;

        -webkit-transform: scale(.1) translate3d(2000px, 0, 0);

        transform: scale(.1) translate3d(2000px, 0, 0);

        -webkit-transform-origin: right center;

        transform-origin: right center

    }

}



@keyframes zoomOutRight {

    40% {

        opacity: 1;

        -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);

        -ms-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);

        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)

    }



    100% {

        opacity: 0;

        -webkit-transform: scale(.1) translate3d(2000px, 0, 0);

        -ms-transform: scale(.1) translate3d(2000px, 0, 0);

        transform: scale(.1) translate3d(2000px, 0, 0);

        -webkit-transform-origin: right center;

        -ms-transform-origin: right center;

        transform-origin: right center

    }

}



.zoomOutRight {

    -webkit-animation-name: zoomOutRight;

    animation-name: zoomOutRight

}



@-webkit-keyframes zoomOutUp {

    40% {

        opacity: 1;

        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);

        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);

        -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);

        animation-timing-function: cubic-bezier(0.55, .055, .675, .19)

    }



    100% {

        opacity: 0;

        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);

        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);

        -webkit-transform-origin: center bottom;

        transform-origin: center bottom;

        -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);

        animation-timing-function: cubic-bezier(0.175, .885, .32, 1)

    }

}



@keyframes zoomOutUp {

    40% {

        opacity: 1;

        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);

        -ms-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);

        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);

        -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);

        animation-timing-function: cubic-bezier(0.55, .055, .675, .19)

    }



    100% {

        opacity: 0;

        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);

        -ms-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);

        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);

        -webkit-transform-origin: center bottom;

        -ms-transform-origin: center bottom;

        transform-origin: center bottom;

        -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);

        animation-timing-function: cubic-bezier(0.175, .885, .32, 1)

    }

}



.zoomOutUp {

    -webkit-animation-name: zoomOutUp;

    animation-name: zoomOutUp

}



@-webkit-keyframes slideInDown {

    0% {

        -webkit-transform: translateY(-100%);

        transform: translateY(-100%);

        visibility: visible

    }



    100% {

        -webkit-transform: translateY(0);

        transform: translateY(0)

    }

}



@keyframes slideInDown {

    0% {

        -webkit-transform: translateY(-100%);

        -ms-transform: translateY(-100%);

        transform: translateY(-100%);

        visibility: visible

    }



    100% {

        -webkit-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }

}



.slideInDown {

    -webkit-animation-name: slideInDown;

    animation-name: slideInDown

}



@-webkit-keyframes slideInLeft {

    0% {

        -webkit-transform: translateX(-100%);

        transform: translateX(-100%);

        visibility: visible

    }



    100% {

        -webkit-transform: translateX(0);

        transform: translateX(0)

    }

}



@keyframes slideInLeft {

    0% {

        -webkit-transform: translateX(-100%);

        -ms-transform: translateX(-100%);

        transform: translateX(-100%);

        visibility: visible

    }



    100% {

        -webkit-transform: translateX(0);

        -ms-transform: translateX(0);

        transform: translateX(0)

    }

}



.slideInLeft {

    -webkit-animation-name: slideInLeft;

    animation-name: slideInLeft

}



@-webkit-keyframes slideInRight {

    0% {

        -webkit-transform: translateX(100%);

        transform: translateX(100%);

        visibility: visible

    }



    100% {

        -webkit-transform: translateX(0);

        transform: translateX(0)

    }

}



@keyframes slideInRight {

    0% {

        -webkit-transform: translateX(100%);

        -ms-transform: translateX(100%);

        transform: translateX(100%);

        visibility: visible

    }



    100% {

        -webkit-transform: translateX(0);

        -ms-transform: translateX(0);

        transform: translateX(0)

    }

}



.slideInRight {

    -webkit-animation-name: slideInRight;

    animation-name: slideInRight

}



@-webkit-keyframes slideInUp {

    0% {

        -webkit-transform: translateY(100%);

        transform: translateY(100%);

        visibility: visible

    }



    100% {

        -webkit-transform: translateY(0);

        transform: translateY(0)

    }

}



@keyframes slideInUp {

    0% {

        -webkit-transform: translateY(100%);

        -ms-transform: translateY(100%);

        transform: translateY(100%);

        visibility: visible

    }



    100% {

        -webkit-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }

}



.slideInUp {

    -webkit-animation-name: slideInUp;

    animation-name: slideInUp

}



@-webkit-keyframes slideOutDown {

    0% {

        -webkit-transform: translateY(0);

        transform: translateY(0)

    }



    100% {

        visibility: hidden;

        -webkit-transform: translateY(100%);

        transform: translateY(100%)

    }

}



@keyframes slideOutDown {

    0% {

        -webkit-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }



    100% {

        visibility: hidden;

        -webkit-transform: translateY(100%);

        -ms-transform: translateY(100%);

        transform: translateY(100%)

    }

}



.slideOutDown {

    -webkit-animation-name: slideOutDown;

    animation-name: slideOutDown

}



@-webkit-keyframes slideOutLeft {

    0% {

        -webkit-transform: translateX(0);

        transform: translateX(0)

    }



    100% {

        visibility: hidden;

        -webkit-transform: translateX(-100%);

        transform: translateX(-100%)

    }

}



@keyframes slideOutLeft {

    0% {

        -webkit-transform: translateX(0);

        -ms-transform: translateX(0);

        transform: translateX(0)

    }



    100% {

        visibility: hidden;

        -webkit-transform: translateX(-100%);

        -ms-transform: translateX(-100%);

        transform: translateX(-100%)

    }

}



.slideOutLeft {

    -webkit-animation-name: slideOutLeft;

    animation-name: slideOutLeft

}



@-webkit-keyframes slideOutRight {

    0% {

        -webkit-transform: translateX(0);

        transform: translateX(0)

    }



    100% {

        visibility: hidden;

        -webkit-transform: translateX(100%);

        transform: translateX(100%)

    }

}



@keyframes slideOutRight {

    0% {

        -webkit-transform: translateX(0);

        -ms-transform: translateX(0);

        transform: translateX(0)

    }



    100% {

        visibility: hidden;

        -webkit-transform: translateX(100%);

        -ms-transform: translateX(100%);

        transform: translateX(100%)

    }

}



.slideOutRight {

    -webkit-animation-name: slideOutRight;

    animation-name: slideOutRight

}



@-webkit-keyframes slideOutUp {

    0% {

        -webkit-transform: translateY(0);

        transform: translateY(0)

    }



    100% {

        visibility: hidden;

        -webkit-transform: translateY(-100%);

        transform: translateY(-100%)

    }

}



@keyframes slideOutUp {

    0% {

        -webkit-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }



    100% {

        visibility: hidden;

        -webkit-transform: translateY(-100%);

        -ms-transform: translateY(-100%);

        transform: translateY(-100%)

    }

}



.slideOutUp {

    -webkit-animation-name: slideOutUp;

    animation-name: slideOutUp

}



/*add animate*/

@-webkit-keyframes rotating {

    from {

        -webkit-transform: rotate(0deg);

        -moz-transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        -o-transform: rotate(0deg);

        transform: rotate(0deg);

    }



    to {

        -webkit-transform: rotate(-360deg);

        -moz-transform: rotate(-360deg);

        -ms-transform: rotate(-360deg);

        -o-transform: rotate(-360deg);

        transform: rotate(-360deg);

    }

}



@keyframes rotating {

    from {

        -webkit-transform: rotate(0deg);

        -moz-transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        -o-transform: rotate(0deg);

        transform: rotate(0deg);

    }



    to {

        -webkit-transform: rotate(-360deg);

        -moz-transform: rotate(-360deg);

        -ms-transform: rotate(-360deg);

        -o-transform: rotate(-360deg);

        transform: rotate(-360deg);

    }

}



@-webkit-keyframes ltr {

    0% {

        opacity: 0;

        -webkit-transform: translateX(15px);

        transform: translateX(15px)

    }



    50% {

        opacity: 1;

        -webkit-transform: translateX(0);

        transform: translateX(0)

    }



    100% {

        opacity: 0;

        -webkit-transform: translateX(-15px);

        transform: translateX(-15px);

    }

}



@keyframes ltr {

    0% {

        opacity: 0;

        -webkit-transform: translateX(15px);

        -ms-transform: translateX(15px);

        transform: translateX(15px)

    }



    50% {

        opacity: 1;

        -webkit-transform: translateX(0);

        -ms-transform: translateX(0);

        transform: translateX(0)

    }



    100% {

        opacity: 0;

        -webkit-transform: translateX(-15px);

        -ms-transform: translateX(-15px);

        transform: translateX(-15px);

    }

}



@-webkit-keyframes upDownBtn {

    0% {

        opacity: 0;

        -webkit-transform: translateY(15px);

        transform: translateY(15px)

    }



    50% {

        opacity: 1;

        -webkit-transform: translateY(0);

        transform: translateY(0)

    }



    100% {

        opacity: 0;

        -webkit-transform: translateY(-15px);

        transform: translateY(-15px);

    }

}



@keyframes upDownBtn {

    0% {

        opacity: 0;

        -webkit-transform: translateY(15px);

        -ms-transform: translateY(15px);

        transform: translateY(15px)

    }



    50% {

        opacity: 1;

        -webkit-transform: translateY(0);

        -ms-transform: translateY(0);

        transform: translateY(0)

    }



    100% {

        opacity: 0;

        -webkit-transform: translateY(-15px);

        -ms-transform: translateY(-15px);

        transform: translateY(-15px);

    }

}



@-webkit-keyframes scaleIn {

    0% {

        opacity: 0;

        -webkit-transform: scale3d(3, 3, 3);

        transform: scale3d(3, 3, 3);

    }



    100% {

        opacity: 1;

    }

}



@-webkit-keyframes smalltobig {

    0% {

        -webkit-transform: scale3d(1, 1, 1);

    }



    100% {

        -webkit-transform: scale3d(1.2, 1.2, 1);

    }

}



@-webkit-keyframes smalltobig {

    0% {

        -webkit-transform: scale3d(0, 0, 1);

        -ms-transform: scale3d(0, 0, 1);

        opacity: 0;

    }



    100% {

        -webkit-transform: scale3d(1.2, 1.2, 1);

        opacity: 1;

    }

}



@keyframes bigtosmall {

    0% {

        -webkit-transform: scale3d(0, 0, 1);

        -ms-transform: scale3d(0, 0, 1);

        opacity: 0;

    }



    100% {

        -webkit-transform: scale3d(1.2, 1.2, 1);

        opacity: 1;

    }

}



/*loading*/

.x {

	position: absolute;

	left: 50%;

	-webkit-transform: translateX(-50%);

}

.y {

	position: absolute;

	top: 50%;

	-webkit-transform: translateY(-50%);

}

.xy {

	position: absolute;

	top: 50%;

	left: 50%;

	-webkit-transform: translate(-50%, -50%);

}

.posa {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

}

.loading {

	height: 100%;

	color: #fff;

	background-color: #005082;

	z-index: 999;

}

.loading .load-content {

	width: 3.3rem;

	height: 0.3rem;

}

.loading .cell {

	width: 100%;

	height: 100%;

	border: 1px solid #fff;

	background-color: #005082;

	box-sizing: border-box;

	border-radius: 0.1rem;

	overflow: hidden;

	-webkit-transform: translateZ(0);

}

.loading .progress {

	width: 100%;

	height: 100%;

	background-color: #fff;

	-webkit-transform: scaleX(0);

	-webkit-transform-origin: 0 0;

}

.loading .ideal {

	position: absolute;

	left: 50%;

	width: 3rem;

	height: 2rem;

	top: -1.7rem;

	overflow: hidden;

	-webkit-transform: translate(-50%, 0) scale(0.7);

	z-index: -1;

}

.loading .ideal:before, .loading .ideal:after, .loading .head:before, .loading .head, .loading .head:after, .loading .hat {

	background-color: #fff;

}

.loading .head {

	border: 1px solid #a6a6a6;

}

.loading .ideal:before, .loading .ideal:after {

	content: '';

    position: absolute;

    bottom: -0.2rem;

    width: 0.4rem;

    height: 0.4rem;

    border-radius: 50%;

	-webkit-animation: hand-ani 4s ease-in 0s infinite;

}

.loading .ideal:before {

	left: 0.2rem;

}

.loading .ideal:after {

	right: 0.2rem;

}

.loading .head-wrap {

	width: 1.6rem;

	height: 1.5rem;

	position: absolute;

	bottom: -0.25rem;

	left: 50%;

	margin-left: -0.8rem;

	-webkit-animation: head-ani 4s ease-out 0s infinite;

}

.loading .head {

	width: 100%;

	height: 100%;

	padding: 0.1rem;

	box-sizing: border-box;

	border-radius: 50%;

	background-color: #fff;

}

.loading .head:before, .loading .head:after {

	content: '';

	position: absolute;

	bottom: 0.38rem;

	width: 0.8rem;

	height: 0.8rem;

	z-index: -1;

	border-radius: 50%;

	-webkit-transform: translateY(-0rem);

}

.loading .head:before {

	left: -0.1rem;

	-webkit-animation: left-ear-ani 4s 0s infinite;

}

.loading .head:after {

	right: -0.1rem;

	-webkit-animation: right-ear-ani 4s 0s infinite;

}

.loading .face {

	width: 100%;

	height: 100%;

	position: relative;

	background-color: #005082;

	border-radius: 50%;

	-webkit-animation: face-ani 4s 0s infinite;

}

.loading .face:before, .loading .face:after {

	content: '';

	position: absolute;

	bottom: 0.5rem;

	width: 0.2rem;

	height: 0.2rem;

	background-color: #fff;

	border-radius: 50%;

	-webkit-animation: eye-ani 4s 0s infinite;

}

.loading .face:before {

	left: 25%;

}

.loading .face:after {

	right: 25%;

}

.loading .hat {

	position: absolute;

	top: -0.06rem;

	left: 50%;

	width: 0.44rem;

	height: 0.44rem;

	border-radius: 50%;

	margin-left: -0.22rem;

	z-index: -1;

}



@-webkit-keyframes head-ani {

	0%, 20% {

		-webkit-transform: translateY(110%);

	}

	25%, 35% {

		-webkit-transform: translateY(60%);

	}

	40%, 90% {

		-webkit-transform: translateY(0);

	}

	92%, 100% {

		-webkit-transform: translateY(110%);

	}

}

@-webkit-keyframes hand-ani {

	0%, 1% {

		-webkit-transform: translate(0, 110%);

	}

	10%, 12% {

		-webkit-transform: translate(0, -4%);

	}

	15%, 93% {

		-webkit-transform: translate(0, 0);

	}

	96%, 100% {

		-webkit-transform: translate(0, 110%);

	}

}

@-webkit-keyframes eye-ani {

	0%, 45% {

		-webkit-transform: scaleY(1);

	}

	47%, 48% {

		-webkit-transform: scaleY(0.1);

	}

	50%, 65% {

		-webkit-transform: scaleY(1);

	}

	67%, 68% {

		-webkit-transform: scaleY(0.1);

	}

	70%, 82% {

		-webkit-transform: scaleY(1);

	}

	84%, 85% {

		-webkit-transform: scaleY(0.1);

	}

	86%, 100% {

		-webkit-transform: scaleY(1);

	}

}

@-webkit-keyframes face-ani {

	0%, 50% {

		-webkit-transform: translate(0, 0);

	}

	57%, 64% {

		-webkit-transform: translate(-5%, 0);

	}

	71%, 78% {

		-webkit-transform: translate(5%, 0);

	}

	85%, 100% {

		-webkit-transform: translate(0, 0);

	}

}

@-webkit-keyframes left-ear-ani {

	0%, 50% {

		-webkit-transform: translate(0, 0);

	}

	57%, 64% {

		-webkit-transform: translate(6%, 0);

	}

	71%, 78% {

		-webkit-transform: translate(-2%, 0);

	}

	85%, 100% {

		-webkit-transform: translate(0, 0);

	}

}

@-webkit-keyframes right-ear-ani {

	0%, 50% {

		-webkit-transform: translate(0, 0);

	}

	57%, 64% {

		-webkit-transform: translate(2%, 0);

	}

	71%, 78% {

		-webkit-transform: translate(-6%, 0);

	}

	85%, 100% {

		-webkit-transform: translate(0, 0);

	}

}

@-webkit-keyframes lightLoop {

	0% {

		-webkit-transform: scale(1, 1);

	}

	100% {

		-webkit-transform: scale(1.2, 3);;

	}

}

.loading .progress-num {

	position: absolute;

	top: 0;

	left: 104%;

	height: 100%;

	line-height: 0.3rem;

	font-size: 0.2rem;

}

.loading p {

	text-align: center;

	position: absolute;

	top: 0.5rem;

	left: 0;

	width: 100%;

	font-size: 0.24rem;

}

/*loading*/

/*cover*/

.cover {

    height: 100%;

    background-color: #005286;

    z-index: 998;

    display: none;

}



.cover .iphone {

    width: 2.9rem;

    height: 4.36rem;

    position: absolute;

    left: 50%;

    top: 40%;

    margin-top: -2.18rem;

    margin-left: -1.45rem;

    background: url(../images/phone.png) no-repeat;

    background-size: 100% 100%;

    animation: zhuan 1.5s 0.3s infinite;

    -webkit-animation: zhuan 1.5s 0.3s infinite

}



.cover p {

    position: absolute;

    top: 65%;

    left: 0;

    text-align: center;

    width: 100%;

    color: #fff;

    font-size: .5rem;

    line-height: 1.5;

}



@keyframes zhuan {

    0% {

        transform: rotate(-90deg)

    }



    50% {

        transform: rotate(0deg)

    }



    100% {

        transform: rotate(-90deg)

    }

}



@-webkit-keyframes zhuan {

    0% {

        -webkit-transform: rotate(-90deg)

    }



    50% {

        -webkit-transform: rotate(0deg)

    }



    100% {

        -webkit-transform: rotate(-90deg)

    }

}



@media screen and (orientation:landscape) {

    .cover {

        display: block

    }

}



/*swiper css 重置*/

.swiper-container {

    width: 100%;

    height: 100%;

}



.swiper-slide {

    width: 100%;

    height: 100%;

    font-size: 30px;

    background: #fff;

    overflow: hidden;

    -webkit-touch-callout: none;

    -webkit-user-select: none;

}







/*-webkit-transform: rotate(0deg);*/

/*-webkit-transform: scale(.7,.6)*/

/*.p1t1x{-webkit-animation:p1t1x 5s 2.5s both;}

@keyframes p1t1x{

	0%{opacity: 0;}

	0.1% {    opacity: 1; -webkit-transform: translate(0px,-900px); }

	7%,15.5%{opacity: 1; -webkit-transform: translate(0px,80px);}

	19%,100%{ -webkit-transform: translate(0,0); }

}*/





/*-webkit-animation: run 2s linear infinite;



@-webkit-keyframes run {

 0% { opacity:0;}

 50% { opacity:1;}

 100% { opacity:0;}

}*/