/*==========================================================================
  normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
 ===========================================================================*/
* {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
html, body {
    font-family: PingFang SC, Microsoft YaHei, Arial;
    *font-family: Microsoft YaHei;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}
header,
main,
footer,
nav,
section,
article,
aside,
details {
    display: block;
}
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}
pre {
    font-size: 1em;
}
a {
    background-color: transparent;
    text-decoration: none;
    outline: none;
}
abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}
b,
strong {
    font-weight: bolder;
}
code,
kbd,
samp {
    font-family: monospace;
    font-size: 1em;
}
small {
    font-size: 80%;
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sub {
    bottom: -0.25em;
}
sup {
    top: -0.5em;
}
abbr,
acronym,
fieldset,
img {
    border-style: none;
}
ol,
ul {
    list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
summary {
    display: list-item;
}
template {
    display: none;
}
[hidden] {
    display: none;
}
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}
button,
input {
    overflow: visible;
}
button,
button:focus {
    outline: none;
}
button,
select {
    text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: none;
}
fieldset {
    padding: 0.35em 0.75em 0.625em;
}
legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}
progress {
    vertical-align: baseline;
}
textarea {
    overflow: auto;
}
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}
[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}
input[type=text],
textarea {
    -webkit-appearance: none;
    outline: none;
}
input:focus,
textarea:focus {
    outline: none;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #f3f3f3 inset;
}
::-webkit-input-placeholder {
    color: #ccc; /* WebKit browsers */
}
:-moz-placeholder {
    color: #ccc; /* Mozilla Firefox 4 to 18 */
}
::-moz-placeholder {
    color: #ccc; /* Mozilla Firefox 19+ */
}
:-ms-input-placeholder {
    color: #ccc; /* Internet Explorer 10+ */
}
input::-ms-clear {
    display: none; /* 去掉IE清除图标*/
}
input::-ms-reveal {
    display: none; /*去掉IE眼睛图标*/
}
/*===================================================
  common style
 =====================================================*/
/* display */
.db {
    display: block !important;
}
.dn {
    display: none !important;
}
.hidden {
    visibility: hidden;
}
/* text-align */
.tl {
    text-align: left !important;
}
.tc {
    text-align: center !important;
}
.tr {
    text-align: right !important;
}
/* float */
.fl {
    float: left;
    *display: inline;
}
.fr {
    float: right;
    *display: inline;
}
.clearfix, 
.container,
.section {
    *zoom: 1;
}
.clearfix:after, 
.container:after,
.section:after {
    content: "";
    display: table;
    line-height: 0;
    font-size: 0;
    clear: both;
}
ul.clearfix > li, 
ol.clearfix > li {
    float: left;
}
html, body, .fullpage, .section {
	height: 100%;
}
.section {
	position: relative;
	min-width: 1200px;
	margin: 0 auto;
	overflow: hidden;
}
.p1 {
	background: #070808 url(../images/p1-bg.jpg) no-repeat center center;
}
.p2, .p4 {
	background: #fff;
}
.p3 {
	background: #070808 url(../images/p3-bg.jpg) no-repeat center center;
}
.p5 {
	background: #070808 url(../images/p5-bg.jpg) no-repeat center center;
}
/* 切换锚点样式 */
#fp-nav.right {
    right: 44px;
}
#fp-nav ul li {
    width: 8px;
    height: auto;
    margin: 0 0 20px;
}
#fp-nav ul li a {
    height: 8px;
}
#fp-nav ul li a span {
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    background-color: #e4e2e2;
    border-radius: 50%;
}
#fp-nav ul li a.active {
    height: 20px;
}
#fp-nav ul li a.active span {
    width: 8px;
    height: 20px;
    margin: -10px 0 0 -4px;
    background: #fe3a3b;
    border-radius: 4px;
}
.fp-tableCell {
	vertical-align: top;
	overflow: hidden;
}
/*标题文案*/
.section .title {
	padding-top: 140px;
	line-height: 1;
    text-align: center;
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 60px;
    color: #333;
}
.section .intro {
	margin-top: 26px;
    line-height: 1;
    text-align: center;
    letter-spacing: 8px;
    font-size: 30px;
    color: #333;
}
.section.p3 .title,
.section.p5 .title,
.section.p3 .intro,
.section.p5 .intro {
	color: #fff;
}
.qrcode .code {
	display: block;
	width: 211px;
	height: auto;
}
.qrcode p {
    position: relative;
	margin-top: 20px;
	line-height: 1;
	font-size: 26px;
	color: #fff;
    white-space: nowrap;
}
.qrcode p img {
    margin-right: 14px;
    vertical-align: middle;
}
/*首屏*/
.p1 .logo {
    position: absolute;
    top: 60px;
    left: 65px;
    z-index: 2;
    width: auto;
    height: 51px;
}
.p1 .bg {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 53.2%;
	z-index: 1;
	background: #fe3a3b;
}
.p1 .text {
	position: absolute;
    top: 250px;
	right: 50%;
	z-index: 2;
	margin-right: -80px;
	color: #fff;
}
.p1 .h2 {
	line-height: 1.2;
	font-family: Verdana;
	font-weight: 400;
	font-size: 80px;
	text-transform: uppercase;
}
.p1 .p {
	margin-top: 15px;
	line-height: 1;
	font-size: 40px;
}
.p1 .qrcode {
	margin-top: 58px;
}
.p1 .mobile {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 3;
	width: 702px;
	height: 845px;
	margin-left: 160px;
	overflow: hidden;
}
.p1 .mobile img,
.p2 img, .p4 img {
	display: block;
	width: 100%;
	height: auto;
}
.p2 .images,
.p4 .images {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 1200px;
	margin-left: -600px;
}
.p2 li {
	position: absolute;
	bottom: 0;
	z-index: 1;
	width: 500px;
	overflow: hidden;
	box-shadow: 0 0 46px rgba(7, 0, 2, .23);
}
.p2 .li1 {
	z-index: 2;
	left: 50%;
	margin-left: -250px;
	height: 708px;
}
.p2 .li2 {
	right: 50%;
    margin-right: 96px;
	height: 640px;
}
.p2 .li3 {
	left: 50%;
    margin-left: 96px;
	height: 640px;
}
.p3 .cont {
	position: relative;
	width: 1200px;
	margin: 100px auto 0;
}
.p3 .bg {
    position: absolute;
    top: 80px;
    left: 50%;
    z-index: 1;
    display: block;
    width: 831px;
    height: 536px;
    margin-left: -415px;
}
.p3 .bg img {
    display: block;
    width: 100%;
    height: 100%;
}
.p3 .prev,.p3 .next {
	position: absolute;
	top: 45%;
    z-index: 5;
	display: block;
	width: 50px;
	height: 40px;
	font-size: 0;
}
.p3 .prev {
	left: 0;
	background: url(../images/icon-prev.png) no-repeat center left;
}
.p3 .next {
	right: 0;
	background: url(../images/icon-next.png) no-repeat center right;
}
.p3 .swiper-container {
	width: 664px;
	height: 514px;
}
.p3 .pagination {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	text-align: center;
}
.p3 .pagination .swiper-pagination-switch {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: #d2d1d1;
	border-radius: 50%;
	margin: 0 5px;
}
.p3 .pagination .swiper-active-switch {
	background: #fe3a3b;
}
.p3 .avatar {
	display: block;
	width: 112px;
	height: 112px;
	padding: 6px;
	margin: 0 auto;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 0 24px rgba(36, 36, 36, 0.29);
}
.p3 .avatar img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.p3 .name {
	display: block;
	margin-top: 30px;
	line-height: 1;
	text-align: center;
	font-size: 30px;
	color: #333;
}
.p3 .words {
	margin-top: 55px;
	line-height: 1.8;
	font-size: 20px;
	color: #333;
}
.p4 .text {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.p4 .title,
.p4 .intro {
    margin-left: 0;
	text-align: left;
}
.p4 .li1 {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 2;
	width: 600px;
	height: 876px;
	overflow: hidden;
	box-shadow: 0 0 54px rgba(36, 37, 37, .16);
}
.p4 .li2 {
	position: absolute;
	right: 50%;
	bottom: 180px;
	z-index: 1;
	width: 666px;
	height: 454px;
    margin-right: -66px;
	box-shadow: 0 0 46px rgba(41, 41, 41, .24);
}
.p5 .qrcode {
	margin: 160px auto 0;
    text-align: center;
}
.p5 .qrcode .code {
    margin: 0 auto;
}
.copyright {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	min-width: 1200px;
	height: 90px;
	background: #181c1f;
}
.copyright .w1200 {
	width: 1200px;
	padding: 24px 0 15px;
	margin: 0 auto;
	line-height: 22px;
	font-size: 14px;
	color: #424d58;
}
.copyright .mt5 {
	margin-top: 5px;
}
.copyright .text a {
	position: relative;
	display: inline-block;
    height: 22px;
    line-height: 22px;
    padding: 0 0 0 42px;
    color: #424d58;
    overflow: visible;
}
.copyright .ico-gongan {
    position: absolute;
    left: 15px;
    top: 0;
    display: block;
    width: 20px;
    height: 22px;
    background: url(../images/header-footer.png) no-repeat -315px -198px;
    cursor: pointer;
}
.copyright .text a:hover {
	color: #cfcfcf;
}
.copyright .text a:hover .ico-gongan {
	background-position: -315px -168px;
}
.copyright .share li {
    position: relative;
    width: 40px;
    height: 40px;
    margin-left: 15px;
    background: url(../images/header-footer.png) no-repeat 0 -245px;
    cursor: pointer;
}
.copyright .share li > a {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    background: url(../images/header-footer.png) no-repeat;
    z-index: 1;
}
.copyright .share li > a.weixin {
	width: 25px;
	height: 21px;
	margin: -10px 0 0 -12px;
	background-position: 0 0;
}
.copyright .share li > a.sina {
	width: 26px;
	height: 21px;
	margin: -10px 0 0 -13px;
	background-position: -58px 0;
}
.copyright .share li > a.fankui {
	width: 19px;
	height: 15px;
	margin: -7px 0 0 -9px;
	background-position: -113px 0;
}
.copyright .share li:hover {
	background-position: -58px -245px;
}
.copyright .share li:hover>a.weixin {
	background-position: -169px 0;
}
.copyright .share li:hover>a.sina {
	background-position: -223px 0;
}
.copyright .share li:hover>a.fankui {
	background-position: -280px 0;
}
.copyright .share li span {
    display: none;
    position: absolute;
    bottom: -20px;
    left: 0px;
    width: 170px;
    font-size: 12px;
    color: #cfcfcf;
}
.copyright .share li.por-open span {
	display: block;
}
/*分辨率适配1920x1080*/
@media screen and (max-height: 960px) {
    .p1 .logo{
        top: 50px;
    }
    .p1 .text {
        top: 200px;
        margin-right: -74px;
    }
    .p1 .h2 {
        font-size: 75px;
    }
    .p1 .p {
        font-size: 36px;
    }
    .p1 .qrcode {
        font-size: 25px;
    }
    .p1 .mobile {
        width: 625px;
        height: 755px;
    }
    .section .title {
        padding-top: 120px;
        font-size: 54px;
    }
    .section .intro {
        font-size: 28px;
    }
    .p2 .li1 {
        width: 446px;
        height: 630px;
        margin-left: -223px;
    }
    .p2 .li2,.p2 .li3 {
        width: 446px;
        height: 566px;
    } 
    .p2 .li2 {
        margin-right: 92px;
    }
    .p2 .li3 {
        margin-left: 92px;
    }
    .p3 .cont {
        margin-top: 85px;
    }
    .p3 .bg {
        height: 496px;
    }
    .p3 .swiper-container {
        height: 450px;
    }
    .p4 .title, .p4 .intro {
        margin-left: 68px;
    }
    .p4 .li1 {
        width: 510px;
        height: 760px;
    }
    .p4 .li2 {
        width: 590px;
        height: 400px;
        margin-right: -58px;
        bottom: 170px;
    }
}
/*分辨率适配1600x900*/
@media screen and (max-height: 820px) {
    .p1 .logo{
        top: 44px;
        height: 45px;
    }
    .p1 .text {
        top: 160px;
        margin-right: -70px;
    }
    .p1 .h2 {
        font-size: 62px;
    }
    .p1 .p {
        font-size: 30px;
    }
    .p1 .qrcode {
        margin-top: 30px;
        font-size: 14px;
    }
    .p1 .qrcode .code {
        width: 180px;
    }
    .p1 .qrcode .icon {
        width: 20px;
    }
    .p1 .mobile {
        width: 530px;
        height: 646px;
    }
    .section .title {
        padding-top: 100px;
        font-size: 48px;
    }
    .section .intro {
        margin-top: 18px;
        font-size: 24px;
    }
    .p2 .li1 {
        width: 320px;
        height: 520px;
        margin-left: -160px;
    }
    .p2 .li2,.p2 .li3 {
        width: 320px;
        height: 460px;
    } 
    .p2 .li2 {
        margin-right: 70px;
    }
    .p2 .li3 {
        margin-left: 70px;
    }
    .p3 .cont {
        margin-top: 50px;
    }
    .p3 .bg {
        height: 426px;
    }
    .p3 .swiper-container {
        height: 400px;
    }
    .p4 .title, .p4 .intro {
        margin-left: 225px;
    }
    .p4 .li1 {
        width: 380px;
        height: 555px;
    }
    .p4 .li2 {
        width: 410px;
        height: 275px;
        margin-right: -35px;
        bottom: 120px;
    }
    .p5 .qrcode {
        margin-top: 100px;
    }
}
/*分辨率适配1366x768*/
@media screen and (max-height: 700px) {
    .p1 .logo{
        top: 30px;
        height: 40px;
    }
    .p1 .text {
        top: 100px;
        margin-right: -50px;
    }
    .p1 .h2 {
        font-size: 50px;
    }
    .p1 .p {
        font-size: 26px;
    }
    .p1 .qrcode {
        margin-top: 30px;
        font-size: 18px;
    }
    .p1 .qrcode .icon {
        width: 22px;
    }
    .p1 .mobile {
        width: 480px;
        height: 542px;
    }
    .section .title {
        padding-top: 60px;
        font-size: 40px;
    }
    .section .intro {
        margin-top: 15px;
        font-size: 20px;
    }
    .p2 .li1 {
        width: 280px;
        height: 395px;
        margin-left: -140px;
    }
    .p2 .li2,.p2 .li3 {
        width: 280px;
        height: 355px;
    } 
    .p2 .li2 {
        margin-right: 60px;
    }
    .p2 .li3 {
        margin-left: 60px;
    }
    .p3 .cont {
        margin-top: 50px;
    }
    .p3 .bg {
        top: 44px;
        height: 370px;
    }
    .p3 .swiper-container {
        height: 350px;
    }
    .p3 .avatar {
        width: 90px;
        height: 90px;
        padding: 4px;
    }
    .p3 .name {
        font-size: 26px;
    }
    .p3 .words {
        margin-top: 40px;
        font-size: 16px;
    }
    .p4 .title, .p4 .intro {
        margin-left: 281px;
    }
    .p4 .li1 {
        width: 310px;
        height: 455px;
    }
    .p4 .li2 {
        width: 354px;
        height: 240px;
        margin-right: -35px;
        bottom: 80px;
    }
    .p5 .qrcode {
        margin-top: 80px;
    }
}
/*运动轨迹*/
.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;
}
@-moz-keyframes slideDown {
    0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0) }
    50% { -webkit-transform: translateY(20px); -moz-transform: translateY(20px); transform: translateY(20px) }
    100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0) }
}
@-webkit-keyframes slideDown {
    0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0) }
    50% { -webkit-transform: translateY(20px); -moz-transform: translateY(20px); transform: translateY(20px) }
    100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0) }
}
@-o-keyframes slideDown {
    0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0) }
    50% { -webkit-transform: translateY(20px); -moz-transform: translateY(20px); transform: translateY(20px) }
    100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0) }
}
@keyframes slideDown {
    0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0) }
    50% { -webkit-transform: translateY(20px); -moz-transform: translateY(20px); transform: translateY(20px) }
    100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0) }
}
@-moz-keyframes slideRight {
    0% { transform: translateX(0) }
    20% { transform: translateX(10px) }
    40% { transform: translateX(0) }
    60% { transform: translateX(-10px) }
    100% { transform: translateX(0) }
}
@-webkit-keyframes slideRight {
    0% { transform: translateX(0) }
    20% { transform: translateX(10px) }
    40% { transform: translateX(0) }
    60% { transform: translateX(-10px) }
    100% { transform: translateX(0) }
}
@-o-keyframes slideRight {
    0% { transform: translateX(0) }
    20% { transform: translateX(10px) }
    40% { transform: translateX(0) }
    60% { transform: translateX(-10px) }
    100% { transform: translateX(0) }
}
@keyframes slideRight {
    0% { transform: translateX(0) }
    20% { transform: translateX(10px) }
    40% { transform: translateX(0) }
    60% { transform: translateX(-10px) }
    100% { transform: translateX(0) }
}
@-webkit-keyframes slideAngle {
    0% { -webkit-transform: translate3d(0, 0, 0) }
    20% { -webkit-transform: translate3d(10px, -10px, 0) }
    40% { -webkit-transform: translate3d(0, 0, 0) }
    60% { -webkit-transform: translate3d(-10px, 10px, 0) }
    100% { -webkit-transform: translate3d(0, 0, 0) }
}
@keyframes slideAngle {
    0% { transform: translate3d(0, 0, 0) }
    20% { transform: translate3d(10px, -10px, 0) }
    40% { transform: translate3d(0, 0, 0) }
    60% { transform: translate3d(-10px, 10px, 0) }
    100% { transform: translate3d(0, 0, 0) }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

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

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

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

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

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

@-webkit-keyframes fadeOutUp {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}
@keyframes fadeOutUp {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}
.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutRight {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}
@keyframes fadeOutRight {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}
.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutDown {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}
@keyframes fadeOutDown {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}
.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutLeft {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}
@keyframes fadeOutLeft {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}
.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}

@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}
@keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}
.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

@-webkit-keyframes zoomOut {
    from {
        opacity: 1;
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    to {
        opacity: 0;
    }
}
@keyframes zoomOut {
    from {
        opacity: 1;
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    to {
        opacity: 0;
    }
}
.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut;
}