/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }
    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }
    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce
}

@-webkit-keyframes flash {
    0%, 50%, to {
        opacity: 1
    }
    25%, 75% {
        opacity: 0
    }
}

@keyframes flash {
    0%, 50%, to {
        opacity: 1
    }
    25%, 75% {
        opacity: 0
    }
}

.flash {
    -webkit-animation-name: flash;
    animation-name: flash
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse
}

@-webkit-keyframes shake {
    0%, to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px)
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px)
    }
}

@keyframes shake {
    0%, to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px)
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px)
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }
    40% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }
    60% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }
    80% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }
    40% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }
    60% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }
    80% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

.swing {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing
}

@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    10%, 20% {
        -webkit-transform: scale(.9) rotate(-3deg);
        transform: scale(.9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
        -webkit-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }
    40%, 60%, 80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }
    to {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

@keyframes tada {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    10%, 20% {
        -webkit-transform: scale(.9) rotate(-3deg);
        transform: scale(.9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
        -webkit-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }
    40%, 60%, 80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }
    to {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

.tada {
    -webkit-animation-name: tada;
    animation-name: tada
}

@-webkit-keyframes wobble {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    15% {
        -webkit-transform: translateX(-25%) rotate(-5deg);
        transform: translateX(-25%) rotate(-5deg)
    }
    30% {
        -webkit-transform: translateX(20%) rotate(3deg);
        transform: translateX(20%) rotate(3deg)
    }
    45% {
        -webkit-transform: translateX(-15%) rotate(-3deg);
        transform: translateX(-15%) rotate(-3deg)
    }
    60% {
        -webkit-transform: translateX(10%) rotate(2deg);
        transform: translateX(10%) rotate(2deg)
    }
    75% {
        -webkit-transform: translateX(-5%) rotate(-1deg);
        transform: translateX(-5%) rotate(-1deg)
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes wobble {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    15% {
        -webkit-transform: translateX(-25%) rotate(-5deg);
        transform: translateX(-25%) rotate(-5deg)
    }
    30% {
        -webkit-transform: translateX(20%) rotate(3deg);
        transform: translateX(20%) rotate(3deg)
    }
    45% {
        -webkit-transform: translateX(-15%) rotate(-3deg);
        transform: translateX(-15%) rotate(-3deg)
    }
    60% {
        -webkit-transform: translateX(10%) rotate(2deg);
        transform: translateX(10%) rotate(2deg)
    }
    75% {
        -webkit-transform: translateX(-5%) rotate(-1deg);
        transform: translateX(-5%) rotate(-1deg)
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble
}

@-webkit-keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    70% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    70% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn
}

@-webkit-keyframes bounceInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }
    80% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes bounceInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }
    80% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown
}

@-webkit-keyframes bounceInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(30px);
        transform: translateX(30px)
    }
    80% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px)
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes bounceInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(30px);
        transform: translateX(30px)
    }
    80% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px)
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft
}

@-webkit-keyframes bounceInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(-30px);
        transform: translateX(-30px)
    }
    80% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px)
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes bounceInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(-30px);
        transform: translateX(-30px)
    }
    80% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px)
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight
}

@-webkit-keyframes bounceInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }
    80% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes bounceInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }
    80% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp
}

@-webkit-keyframes bounceOut {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    25% {
        -webkit-transform: scale(.95);
        transform: scale(.95)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    to {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3)
    }
}

@keyframes bounceOut {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    25% {
        -webkit-transform: scale(.95);
        transform: scale(.95)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    to {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3)
    }
}

.bounceOut {
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut
}

@-webkit-keyframes bounceOutDown {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px)
    }
}

@keyframes bounceOutDown {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px)
    }
}

.bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown
}

@-webkit-keyframes bounceOutLeft {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(20px);
        transform: translateX(20px)
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
}

@keyframes bounceOutLeft {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(20px);
        transform: translateX(20px)
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
}

.bounceOutLeft {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft
}

@-webkit-keyframes bounceOutRight {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px)
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px)
    }
}

@keyframes bounceOutRight {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px)
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px)
    }
}

.bounceOutRight {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight
}

@-webkit-keyframes bounceOutUp {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
}

@keyframes bounceOutUp {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
}

.bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp
}

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

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

@-webkit-keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}

@-webkit-keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        transform: translateX(20px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        transform: translateX(20px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}

@-webkit-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown
}

@-webkit-keyframes fadeOutDownBig {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px)
    }
}

@keyframes fadeOutDownBig {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px)
    }
}

.fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig
}

@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px)
    }
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px)
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft
}

@-webkit-keyframes fadeOutLeftBig {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
}

@keyframes fadeOutLeftBig {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
}

.fadeOutLeftBig {
    -webkit-animation-name: fadeOutLeftBig;
    animation-name: fadeOutLeftBig
}

@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(20px);
        transform: translateX(20px)
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(20px);
        transform: translateX(20px)
    }
}

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight
}

@-webkit-keyframes fadeOutRightBig {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px)
    }
}

@keyframes fadeOutRightBig {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px)
    }
}

.fadeOutRightBig {
    -webkit-animation-name: fadeOutRightBig;
    animation-name: fadeOutRightBig
}

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
}

@keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp
}

@-webkit-keyframes fadeOutUpBig {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
}

@keyframes fadeOutUpBig {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
}

.fadeOutUpBig {
    -webkit-animation-name: fadeOutUpBig;
    animation-name: fadeOutUpBig
}

@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    40% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    80% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(1turn) scale(.95);
        transform: perspective(400px) translateZ(0) rotateY(1turn) scale(.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    to {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(1turn) scale(1);
        transform: perspective(400px) translateZ(0) rotateY(1turn) scale(1);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

@keyframes flip {
    0% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    40% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    80% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(1turn) scale(.95);
        transform: perspective(400px) translateZ(0) rotateY(1turn) scale(.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    to {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(1turn) scale(1);
        transform: perspective(400px) translateZ(0) rotateY(1turn) scale(1);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

.animated.flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
        transform: perspective(400px) rotateX(-10deg)
    }
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg)
    }
    to {
        -webkit-transform: perspective(400px) rotateX(0deg);
        transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }
}

@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
        transform: perspective(400px) rotateX(-10deg)
    }
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg)
    }
    to {
        -webkit-transform: perspective(400px) rotateX(0deg);
        transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX
}

@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
        transform: perspective(400px) rotateY(-10deg)
    }
    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        transform: perspective(400px) rotateY(10deg)
    }
    to {
        -webkit-transform: perspective(400px) rotateY(0deg);
        transform: perspective(400px) rotateY(0deg);
        opacity: 1
    }
}

@keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
        transform: perspective(400px) rotateY(-10deg)
    }
    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        transform: perspective(400px) rotateY(10deg)
    }
    to {
        -webkit-transform: perspective(400px) rotateY(0deg);
        transform: perspective(400px) rotateY(0deg);
        opacity: 1
    }
}

.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY
}

@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }
    to {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

@keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }
    to {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

.flipOutX {
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important
}

@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        transform: perspective(400px) rotateY(0deg);
        opacity: 1
    }
    to {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
}

@keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        transform: perspective(400px) rotateY(0deg);
        opacity: 1
    }
    to {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
}

.flipOutY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY
}

@-webkit-keyframes lightSpeedIn {
    0% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);
        opacity: 0
    }
    60% {
        -webkit-transform: translateX(-20%) skewX(30deg);
        transform: translateX(-20%) skewX(30deg);
        opacity: 1
    }
    80% {
        -webkit-transform: translateX(0) skewX(-15deg);
        transform: translateX(0) skewX(-15deg);
        opacity: 1
    }
    to {
        -webkit-transform: translateX(0) skewX(0deg);
        transform: translateX(0) skewX(0deg);
        opacity: 1
    }
}

@keyframes lightSpeedIn {
    0% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);
        opacity: 0
    }
    60% {
        -webkit-transform: translateX(-20%) skewX(30deg);
        transform: translateX(-20%) skewX(30deg);
        opacity: 1
    }
    80% {
        -webkit-transform: translateX(0) skewX(-15deg);
        transform: translateX(0) skewX(-15deg);
        opacity: 1
    }
    to {
        -webkit-transform: translateX(0) skewX(0deg);
        transform: translateX(0) skewX(0deg);
        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% {
        -webkit-transform: translateX(0) skewX(0deg);
        transform: translateX(0) skewX(0deg);
        opacity: 1
    }
    to {
        -webkit-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);
        opacity: 0
    }
}

@keyframes lightSpeedOut {
    0% {
        -webkit-transform: translateX(0) skewX(0deg);
        transform: translateX(0) skewX(0deg);
        opacity: 1
    }
    to {
        -webkit-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) 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 center;
        transform-origin: center center;
        -webkit-transform: rotate(-200deg);
        transform: rotate(-200deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

@keyframes rotateIn {
    0% {
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(-200deg);
        transform: rotate(-200deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        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: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

@keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        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: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

@keyframes rotateInDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        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: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

@keyframes rotateInUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        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: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

@keyframes rotateInUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

.rotateInUpRight {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight
}

@-webkit-keyframes rotateOut {
    0% {
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    to {
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(200deg);
        transform: rotate(200deg);
        opacity: 0
    }
}

@keyframes rotateOut {
    0% {
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    to {
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(200deg);
        transform: rotate(200deg);
        opacity: 0
    }
}

.rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut
}

@-webkit-keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
}

@keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
}

.rotateOutDownLeft {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft
}

@-webkit-keyframes rotateOutDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }
}

@keyframes rotateOutDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }
}

.rotateOutDownRight {
    -webkit-animation-name: rotateOutDownRight;
    animation-name: rotateOutDownRight
}

@-webkit-keyframes rotateOutUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }
}

@keyframes rotateOutUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }
}

.rotateOutUpLeft {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft
}

@-webkit-keyframes rotateOutUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
}

@keyframes rotateOutUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
}

.rotateOutUpRight {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight
}

@-webkit-keyframes slideInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes slideInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown
}

@-webkit-keyframes slideInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft
}

@-webkit-keyframes slideInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px)
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px)
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight
}

@-webkit-keyframes slideOutLeft {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
}

@keyframes slideOutLeft {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
}

.slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft
}

@-webkit-keyframes slideOutRight {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px)
    }
}

@keyframes slideOutRight {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px)
    }
}

.slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight
}

@-webkit-keyframes slideOutUp {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
}

@keyframes slideOutUp {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
}

.slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp
}

@-webkit-keyframes hinge {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(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: rotate(80deg);
        transform: rotate(80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    40% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    80% {
        -webkit-transform: rotate(60deg) translateY(0);
        transform: rotate(60deg) translateY(0);
        opacity: 1;
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    to {
        -webkit-transform: translateY(700px);
        transform: translateY(700px);
        opacity: 0
    }
}

@keyframes hinge {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(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: rotate(80deg);
        transform: rotate(80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    40% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    80% {
        -webkit-transform: rotate(60deg) translateY(0);
        transform: rotate(60deg) translateY(0);
        opacity: 1;
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    to {
        -webkit-transform: translateY(700px);
        transform: translateY(700px);
        opacity: 0
    }
}

.hinge {
    -webkit-animation-name: hinge;
    animation-name: hinge
}

@-webkit-keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%) rotate(-120deg);
        transform: translateX(-100%) rotate(-120deg)
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0deg);
        transform: translateX(0) rotate(0deg)
    }
}

@keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%) rotate(-120deg);
        transform: translateX(-100%) rotate(-120deg)
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0deg);
        transform: translateX(0) rotate(0deg)
    }
}

.rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn
}

@-webkit-keyframes rollOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0deg);
        transform: translateX(0) rotate(0deg)
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(100%) rotate(120deg);
        transform: translateX(100%) rotate(120deg)
    }
}

@keyframes rollOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0deg);
        transform: translateX(0) rotate(0deg)
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(100%) rotate(120deg);
        transform: translateX(100%) rotate(120deg)
    }
}

.rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut
}

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden], template {
    display: none
}

a {
    background-color: transparent
}

a:active, a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b, strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code, kbd, pre, samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button, select {
    text-transform: none
}

button, html input[type=button], input[type=reset], input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled], html input[disabled] {
    cursor: default
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    height: auto
}

input[type=search] {
    -webkit-appearance: textfield;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: 700
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td, th {
    padding: 0
}

.fp-enabled body, html.fp-enabled {
    margin: 0;
    padding: 0;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent
}

#superContainer {
    height: 100%;
    position: relative;
    -ms-touch-action: none;
    touch-action: none
}

.fp-section {
    position: relative;
    box-sizing: border-box
}

.fp-slide {
    float: left
}

.fp-slide, .fp-slidesContainer {
    height: 100%;
    display: block
}

.fp-slides {
    z-index: 1;
    height: 100%;
    overflow: hidden;
    position: relative;
    transition: all .3s ease-out
}

.fp-section.fp-table, .fp-slide.fp-table {
    display: table;
    table-layout: fixed;
    width: 100%
}

.fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%
}

.fp-slidesContainer {
    float: left;
    position: relative
}

.fp-controlArrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    cursor: pointer;
    width: 0;
    height: 0;
    border-style: solid;
    margin-top: -38px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.fp-controlArrow.fp-prev {
    left: 15px;
    width: 0;
    border-width: 38.5px 34px 38.5px 0;
    border-color: transparent #fff transparent transparent
}

.fp-controlArrow.fp-next {
    right: 15px;
    border-width: 38.5px 0 38.5px 34px;
    border-color: transparent transparent transparent #fff
}

.fp-scrollable {
    overflow: scroll
}

.fp-notransition {
    transition: none !important
}

#fp-nav {
    position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
    opacity: 1;
    -webkit-transform: translateZ(0)
}

#fp-nav.right {
    right: 17px
}

#fp-nav.left {
    left: 17px
}

.fp-slidesNav {
    position: absolute;
    z-index: 4;
    left: 50%;
    opacity: 1
}

.fp-slidesNav.bottom {
    bottom: 17px
}

.fp-slidesNav.top {
    top: 17px
}

#fp-nav ul, .fp-slidesNav ul {
    margin: 0;
    padding: 0
}

#fp-nav ul li, .fp-slidesNav ul li {
    display: block;
    width: 14px;
    height: 13px;
    margin: 7px;
    position: relative
}

.fp-slidesNav ul li {
    display: inline-block
}

#fp-nav ul li a, .fp-slidesNav ul li a {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none
}

#fp-nav ul li:hover a.active span, #fp-nav ul li a.active span, .fp-slidesNav ul li:hover a.active span, .fp-slidesNav ul li a.active span {
    height: 12px;
    width: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 100%
}

#fp-nav ul li a span, .fp-slidesNav ul li a span {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    height: 4px;
    width: 4px;
    border: 0;
    background: #333;
    left: 50%;
    top: 50%;
    margin: -2px 0 0 -2px;
    transition: all .1s ease-in-out
}

#fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span {
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px
}

#fp-nav ul li .fp-tooltip {
    position: absolute;
    top: -2px;
    color: #fff;
    font-size: 14px;
    font-family: arial, helvetica, sans-serif;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    display: block;
    opacity: 0;
    width: 0
}

#fp-nav.fp-show-active a.active + .fp-tooltip, #fp-nav ul li:hover .fp-tooltip {
    transition: opacity .2s ease-in;
    width: auto;
    opacity: 1
}

#fp-nav ul li .fp-tooltip.right {
    right: 20px
}

#fp-nav ul li .fp-tooltip.left {
    left: 20px
}

.fp-auto-height.fp-section, .fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell {
    height: auto !important
}

@media print {
    .fp-enabled body, html.fp-enabled {
        overflow: visible !important;
        height: auto !important
    }

    body, html {
        background: #fff;
        width: auto;
        height: auto;
        overflow: visible
    }

    body {
        font-size: 20pt;
        border: 0;
        margin: 0 5%;
        padding: 0;
        float: none !important
    }

    #fp-nav, .fp-controlArrow, .fp-slidesNav {
        display: none !important
    }

    h1 {
        font-size: 28pt !important
    }

    h2 {
        font-size: 24pt !important
    }

    h3, h4 {
        font-size: 22pt !important
    }

    h4 {
        font-variant: small-caps
    }

    h5 {
        font-size: 21pt !important
    }

    h6 {
        font-size: 20pt !important;
        font-style: italic
    }

    .fp-scrollable, .fp-section, .fp-tableCell, .slimScrollDiv {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        position: relative;
        float: none !important
    }

    .fp-slidesContainer {
        -webkit-transform: none !important;
        transform: none !important;
        transition: none !important
    }

    .fp-slides, .fp-slidesContainer {
        height: auto !important;
        width: 100% !important;
        float: none !important;
        overflow: hidden !important
    }

    .fp-slides {
        height: 800px !important;
        width: 800px !important
    }

    .fp-slide {
        width: 100% !important
    }

    .fp-slide, .fullpage-wrapper {
        float: none !important;
        position: static !important
    }

    .fullpage-wrapper {
        -webkit-transform: none !important;
        transform: none !important;
        transition: none !important;
        width: auto !important;
        height: auto !important;
        left: 0 !important;
        top: 0 !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
        zoom: 1 !important;
        overflow: visible !important;
        display: block !important;
        text-align: left !important
    }

    .fp-section, .fp-slide {
        page-break-after: always !important
    }
}

@-webkit-keyframes animatedBackground {
    0% {
        background-position: 0 0
    }
    to {
        background-position: 100% 0
    }
}

@keyframes animatedBackground {
    0% {
        background-position: 0 0
    }
    to {
        background-position: 100% 0
    }
}

body {
    font-family: Hiragino Sans GB, Helvetica Neue, Microsoft Yahei, Arial, \5b8b\4f53, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.7;
    background-color: #0694e9
}

a, a:active, a:hover, a:link {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent
}

.btn-download {
    width: 113px;
    border-radius: 14px;
    border: 1px solid hsla(0, 0%, 100%, .8);
    text-align: center;
    font-size: 10px;
    line-height: 15px;
    padding: 6px 0;
    color: #fff;
    position: relative
}

.btn-download i.icon {
    width: 12px;
    height: 15px;
    background-size: 12px 15px;
    display: inline-block;
    vertical-align: top;
    margin-right: 6px;
    background-position: 100% 50%;
    background-repeat: no-repeat
}

.btn-download i.icon.apple {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAqCAMAAADlP6mgAAAAilBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////2N2iNAAAALXRSTlMA/HgeDAb59vG1ilQ5A+2wq35aQyXSx7+opJhuYzIg27qelGowFxWgTkw9NBoTQakHAAABAElEQVQYGZ3BBVLEQAAEwIm759wVnf9/j90chxQZiqIb/+KlkwZa4YZkA6lY0MggpTTCK5QNrQWkmka8hRJEJJ0W0gvJuIX2zHjpYYzXnX0A/msB+F227nx80R9jkmGSBUCQVRGNMNngznX4rqyqknfOMoBVLKgkBYyG2iOA3KG0hpFQWsHoKU1huZQ2sGoqUwx2VFIMSiorDCIqKwwiKikGOyp7DGZUnAusJaUjrJaS08HYUotzGBNqoRsALn/jAp7DX3gA5tQqGGdqOawHKjUGl5LjIg83LcedcHfgmAQfghl/mvj45M9pTU/5Nl/PaO2v+Cab102Pm949pE/4ozcoHIg3pHWMdQAAAABJRU5ErkJggg==)
}

.btn-download i.icon.android {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAqCAMAAADhynmdAAAAilBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////2N2iNAAAALXRSTlMA2GwrBMOZ62EH+cySHuiQYz86KBUL4tqkd0UZEbCgf1Ml8t7Tx7eHWvCzSTRz+GWsAAABC0lEQVQ4y8XU2XKCMABG4V+KolCtsrrUrW7dzvu/XiW5ECRMx5lWvzuGQ8gkBN3gtTipYjOKG0kaMr9cLT7OVw0z8kwapCp9slSTH3FcBhDuVvMxwUIOayre1TSYUrV2vGZJ3UsjOQGjjR1pNna9KgmBnraUpRQBQaYa83gxtDP++g7NYPW5vtEUqSr1XPzLYpdzSZKna1vJT832RRwyH4eOtjlTszXgtSQrIJZ65TK1JF2gf+fk+d+T8b2SvuQBnpyJeXwiZQe6WUsy3LGyR1VyJ/ae1Z7or5PfP29tohwIO0ZhxujGujIBAhlDzgbSw5LYHHhjwZkv1++Qo6wR7OXQD/aJrHlexLrFD5WNdwjXbqC+AAAAAElFTkSuQmCC)
}

.btn-download i.icon.qr-code {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAiCAMAAAAAh4u3AAABDlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8v3yHCAAAAWXRSTlMAAQQGCwwNDxATFRkdICMmJygrLjIzNjc4PD4/Q0lLTU9QUVJYX2NlaWpucnN7fICDhoeIjJGWn6Klpqeoqa60u7y9vr/AwcTFzc7Q2OLo6u7x8vX29/n8/n040JkAAAF1SURBVDjLjZRbV4JAFIU3YkbmrcIblVpqCuUlNdOyMDPKNC0tc/7/H+kBhjiga/k9zdrrexjmbA4QuScUgAJNIgBSjNACWjRJAUjQqAE0aJIwpXHGos2lNk/GttSHRYlLJZ70bWnAI5VLKk8GTiltGBUqVQwj7ZLyjPWo1GMs75Jyq1WHSp3VKueSJFkOUyksy5JLMilzqey9+FC00Lik8WRoS4uJxZRLU54sbMlJE2h6xxKfE2pAjSZxAGKIIAESTURsiS9I8AN+fhaB3WDQB0CeEapAlZ9PgcfZTAaQ3Px1WeCZsaT5BD8fFp+0mReh0Jv9Ti8Bi0sqfc/nv7b05Jndmo4PgJ1YbN/Rgulk8uWVssvlrUPSRLHrlc5pM8vAHZeStnQ8GtVp6eoji8P/0gmCQCWBg03/neqaXYKx9xOLG4d0oCh7wJGiBDbtAhXoMnYGDM2Lr90qGvDAWB54NbdKVCcUgaKuZ4ArXU8B17oe3a5yf+Nv0E+9oyR9AAAAAElFTkSuQmCC);
    background-size: 18px 17px
}

.btn-download i.download-code {
    width: 114px;
    height: 114px;
    background-image: url(images/weixin_qrcode.png);
    background-size: 114px 114px;
    position: absolute;
    bottom: -120px;
    left: 3px;
    opacity: 0;
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    transition: all .3s
}

.btn-download.active .download-code {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0)
}

.section h2 {
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    margin: 0 auto;
    padding: 0;
    top: 22%
}

.section h2, .section p.info {
    color: #fff;
    text-align: center;
    position: absolute;
    left: 0;
    width: 100%
}

.section p.info {
    top: 25%;
    font-size: 13px;
    line-height: 16px;
    margin: 15px auto 0
}

.section.section1 .btn-download {
    float: none
}

.logo {
    width: 61px;
    height: 30px;
    background: transparent url(https://jd1.1058s.cn/cdn/images/logo/001.png);
    background-size: 61px 30px;
    margin: 0 0 0 12px
}

.head {
    display: none;
    padding-top: 16px;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1
}

.head .btn-download {
    float: right;
    margin: 0 12px 0 0
}

@-webkit-keyframes sectionTransition {
    0% {
        opacity: 1
    }
    30% {
        opacity: 0
    }
    to {
        opacity: 0
    }
}

@keyframes sectionTransition {
    0% {
        opacity: 1
    }
    30% {
        opacity: 0
    }
    to {
        opacity: 0
    }
}

@-webkit-keyframes sectionTransitionReverse {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes sectionTransitionReverse {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.section-transition {
    -webkit-animation: sectionTransition 1s;
    animation: sectionTransition 1s
}

.section-transition-reverse {
    -webkit-animation: sectionTransition 1s;
    animation: sectionTransitionReverse 1s
}

.section1 {
    background: transparent url(images/background1.jpg) 50% 80% repeat-x;
    background-size: cover;
    -webkit-animation: animatedBackground 80s linear infinite;
    animation: animatedBackground 80s linear infinite
}

.section1 h2 {
    font-size: 36px
}

.section1 p.info {
    font-size: 17px;
    top: 30%
}

.section1 .btn-close-video, .section1 .btn-play, .section1 .sample, .section1 .tip-1, .section1 .tip-2 {
    display: none
}

.section1 h1 {
    line-height: 48px;
    font-size: 32px;
    color: #fff;
    text-align: center;
    display: block;
    margin: 0;
    padding: 0;
    font-weight: 400;
    position: absolute;
    top: 24%;
    width: 100%
}

.section1 .btn-download {
    top: 50%;
    left: 50%;
    position: absolute;
    margin: 0 0 0 -72px;
    width: 144px;
    padding: 8px 0;
    display: block;
    font-size: 12px;
    line-height: 20px;
    border-radius: 18px
}

.section1 .btn-download i.icon {
    width: 16px;
    height: 20px;
    background-size: 16px 20px;
    margin-right: 8px
}

.section1 .btn-download[data-role=qr-code] {
    display: none
}

#page-menu {
    position: fixed;
    top: 50%;
    right: 0;
    padding: 0;
    margin: 0;
    width: 18px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%)
}

#page-menu li {
    width: 6px;
    height: 6px;
    font-size: 0;
    border-radius: 4px;
    border: 1px solid #fff;
    background: transparent;
    display: block
}

#page-menu li.active {
    background: #fff
}

#page-menu li + li {
    margin-top: 10px
}

.animation-segment {
    position: absolute;
    left: 50%;
    bottom: 0
}

.section2 .fade-in-from-left {
    width: 250px;
    height: 368px;
    background: transparent url(images/1youxie_s.png) 0 0 no-repeat;
    background-size: 250px 368px;
    margin-left: -125px
}

.section2 .fade-in-from-right {
    bottom: 90px;
    width: 138px;
    height: 138px;
    background: transparent url(data:image/png;base64,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) 0 0 no-repeat;
    background-size: 138px 138px;
    margin-left: 43px
}

.section3 .left-1 {
    background: transparent url(https://jd1.1058s.cn/cdn/images/pic1.jpg) 0 0 no-repeat;
    background-size: contain;
    bottom: 144px
}

.section3 .left-1, .section3 .left-2 {
    width: 193px;
    height: 62px;
    margin-left: -144px
}

.section3 .left-2 {
    background: transparent url(https://jd1.1058s.cn/cdn/images/pic2.jpg) 0 0 no-repeat;
    background-size: contain;
    bottom: 76px
}

.section3 .left-3 {
    width: 193px;
    height: 62px;
    background: transparent url(https://jd1.1058s.cn/cdn/images/pic3.jpg) 0 0 no-repeat;
    background-size: contain;
    bottom: 7px;
    margin-left: -144px
}

.section3 .right-big-phone {
    margin-left: 1px;
    width: 166px;
    height: 311px;
    background: transparent url(images/1zuoxie_s.png) 0 0 no-repeat;
    background-size: contain;
    bottom: -10px
}

@-webkit-keyframes switchTabInSection4 {
    0% {
        opacity: 0
    }
    16.6% {
        opacity: 1
    }
    33.2% {
        opacity: 1
    }
    49.8% {
        opacity: 0
    }
    to {
        opacity: 0
    }
}

@keyframes switchTabInSection4 {
    0% {
        opacity: 0
    }
    16.6% {
        opacity: 1
    }
    33.2% {
        opacity: 1
    }
    49.8% {
        opacity: 0
    }
    to {
        opacity: 0
    }
}

.section4-switchable {
    -webkit-animation-name: switchTabInSection4;
    animation-name: switchTabInSection4;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.section4 .center-image {
    width: 260px;
    height: 349px;
    background: transparent url(images/1zheng_s.png) 0 0 no-repeat;
    background-size: contain;
    margin-left: -130px
}

.section4 .switchable-images {
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    width: 234px;
    height: 246px;
    background: transparent url(https://jd1.1058s.cn/cdn/images/pic3.jpg) 0 0 no-repeat;
    background-size: contain;
    position: absolute;
    top: 102px;
    left: 12px;
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.section4 .switchable-images.third-tab {
    background-image: url(https://jd1.1058s.cn/cdn/images/pic2.jpg);
    -webkit-animation-delay: 3s;
    animation-delay: 3s
}

.section5 .center-image {
    width: 321px;
    height: 299px;
    background: transparent url(https://jd1.1058s.cn/cdn/images/pic1.jpg) 0 0 no-repeat;
    background-size: contain;
    margin-left: -160px
}

.animated {
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s
}

.animated-main-btn-download, .animated-slogon, .section2 .fade-in-from-left, .section2 .fade-in-from-right {
    opacity: 0
}

@-webkit-keyframes fadeInSection3 {
    0% {
        opacity: 0;
        -webkit-transform: scale(.01) translateX(340px);
        transform: scale(.01) translateX(340px)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1) translateX(0);
        transform: scale(1) translateX(0)
    }
}

@keyframes fadeInSection3 {
    0% {
        opacity: 0;
        -webkit-transform: scale(.01) translateX(340px);
        transform: scale(.01) translateX(340px)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1) translateX(0);
        transform: scale(1) translateX(0)
    }
}

.section3-fadeInLeft {
    -webkit-animation-name: fadeInSection3;
    animation-name: fadeInSection3;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

.section3 .left-1, .section3 .left-2, .section3 .left-3 {
    opacity: 0
}

.section3 .left-1 {
    -webkit-animation-delay: 0;
    animation-delay: 0
}

.section3 .left-2 {
    -webkit-animation-delay: .2s;
    animation-delay: .2s
}

.section3 .left-3 {
    -webkit-animation-delay: .4s;
    animation-delay: .4s
}

.section3 .right-big-phone, .section4 .center-image, .section5 .center-image, h2, p.info {
    opacity: 0
}

.logo-link {
    display: none;
    width: 145px;
    height: 78px;
    line-height: 78px;
    background: transparent url(https://jd1.1058s.cn/cdn/images/logo/001.png) 40px 50% no-repeat;
    background-size: 74px 36px;
    text-indent: -100%;
    font-size: 0
}

.social {
    display: none;
    float: right
}

.social .social-site {
    vertical-align: top;
    height: 78px;
    width: 68px;
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAAwCAMAAABzC0lBAAAAk1BMVEUAAADL0dSsxsbHzNDL0dTCysrL0NTL0dTK0dPL0dTL0dTL0dTK0dTL0NPK0NPK0NOvr6/L0dTL0dTL0dTK0dTK0NTJz9PK0NDIztDL0dTL0dTK0dTK0NPKz9PKz9TGzs/Ey8u5y8vK0dPI0NDK0NTJ0NPL0NTK0NPK0NPL0NPJz9PIzdHG0NDK0dTH0dHK0dPL0dQZ3iDMAAAAMHRSTlMA+gQX9A6W5+TZ0q2lZV5YBu/euLJ/Si0o7MOdd0Q0HBMJbiGGUMmMcmo/ODbAN8v/1DbFAAAB7UlEQVQYGa3BB4KaAABFwUeVJmLvXbdv8u9/uoiiqBTNJjP8R9bwY/C5dfgbyUd/YuikM21aPGfVb+iGEc55bP1qq2gy5IGFr1LGq0mdN0NVug7V3lTDt6iyUa2XNeW+9EBEKTNQphP5ujDCrs4GlJkpM0lIusoYXxAr45uU8JRpAXtlvjloK9OiaK6zDdBUJgDWhjI9iqY6a3yy8HTWT5xIZ4ZDQaCcrSuGUu3eLB4stiYFbVXzZkOqOKoUxCap5WIw+Nqa3LJUZWcCTjMc68jubVZcSVSuPQCsXVtXbHdJbqwy9i9gP9Ydu8lFV2ViwFWJKCEzU4kp4Opg7IbKdF1PB6HJiWWowFhCXwf2FmIdzWDl6cAlE6rAhaGhgx5gGkpZgKvUBydzFYxgolQALHX0CfSU8slEuuPBUCev1miio2CxmulkzonT0a0IdqoxJbMwdGMDL6rhcTZv61oLGqphmJyNfF2ZY6rWkgvHV+4X2KqzJtdWbg+BajTIDZXq2Eq9Q6Qa3+TeJPktGA1azXgIe9VokgvVeDfJJWNVsh1ynf6aG01V6pNbr7g3UYXApNayo1KNEQ9sPZVojHjI6qoo5hnvDd2b8pSk+VsXL11JHZ61au2mvZ7bjy1ojaURP2GF2vAzrYgfcvgnfwCZevQs0+g4ZQAAAABJRU5ErkJggg==) 50% 50% no-repeat;
    background-size: 28px 24px;
    display: inline-block;
    font-size: 0;
    text-indent: -100%;
    opacity: .7;
    transition: all .5s
}

.social .social-site.active {
    opacity: 1
}

.social .social-site.weibo {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAAwCAMAAABzC0lBAAAAk1BMVEUAAADL0dTL0dTGy83L0dStvb3L0dTL0NPL0dTK0dTJz9LIztHL0dTK0NTGzM/L0dTL0dPK0NTJz9LJ0NK9w8PL0dTL0dTK0dTK0NPK0NTK0NPJz9HJztG7zMzL0dTL0dTL0dTK0NPKz9LL0dTK0NPExsbL0dPL0dTKz9LK0NPL0dTL0NTI0NTK0dTL0NTJztHL0dSDWeeRAAAAMHRSTlMA+t0U7ATxZPWdNiHirRvYjoBPOwjDsoZ5dFwrJg/TzslsQuhKDL2SWVS4lkWmiTEi5FzZAAACmUlEQVQYGbXBB3LjOAAEwAFzzlTOOdme/79uKQCUKFl7sqtuu/GPfR2Gg+ExxG+dqESDKX4j4I3zaeLnJuwwJvi5oWWl9dyjZK3wW5PMYUNs8GtTnw1ngteqwl9EMz/EC0M2arySZA4lL0DLPkeeEa/QyNkY4ZttJthaoHWg1JsC9pzkDM+OETum0Aoq8woI2CjxoPL5IERrcKoNNjIAKck+usI5H5noWgpSmEBOskZHYPHRGldmcBguVxWAPUkX2JCMcHdx+CQGvvoGpfUBGJPsAyVJDzcbwWdpZvBugzHJDBiTdNAKPL6xQ0lyCRQkU2jhmu+skXgUEyAnGUMxU75lAEG/BBCTdKHs+F4MzSeFCWnAB0bvc7B0l31/IXg3ghYurD6kseCN5Rdb3FSXvUPtC9/s2EpdG0+2S4uSk4V4VFCzRnjF/KAWm+haUDklkMLBbu1ZdR6ilVNbr3AXUPEh2bmgIvo2tD41b4ybPSUf0njGu54NxZ5Rm1VoGbxKK1xN1uzKoV3YcqGZlEpINR94Uyi2Qy2GVvJqDqngkxG0E7U5tIJXQ0gxSec8/GArh9ajtoO24VUBySCNBIBLbQCtppZBG/NqBckiN2jY1A5QKofaAZrtsDGCNCNNNEwqYgrlSC2y0Tqz4UPKyA0aeyqfUOw5NRc3iSBpmbgKPVqjpPygkm6h5NQWNu72bJwhuewwQihHQSVK0LFdsDGC5HpsxSaUkaDiBXhgpmy4kMK9xYbzUULZ+tSiAE+SGRuxCWWyWk1saEeD2iLBN1XGhtVP8GjqGtTEZ4VXLikbojf8grYNljvBVm+CvznOKQmjjnunOuKd6F3wX1bniC8YgwRvBXkvYsfMd8f4qWlZjJaDoVuU4yn+d38AzhTEFMQu7LoAAAAASUVORK5CYII=)
}

.social .social-site .user-link-code, nav {
    display: none
}

nav, nav a.product {
    line-height: 78px
}

nav a.product {
    vertical-align: top;
    color: #6c6c6c;
    padding: 0 30px;
    height: 78px;
    font-size: 16px;
    display: inline-block
}

nav a.product.active, nav a.product:active, nav a.product:hover {
    color: #0794e9
}

footer {
    font-family: Helvetica Neue, Arial, Hiragino Sans GB, Microsoft Yahei, \5b8b\4f53, sans-serif;
    display: none;
    height: 78px;
    text-align: center;
    line-height: 78px;
    font-size: 16px;
    color: #6c6c6c;
    background: #fcfcfc
}

.non-mobile .animation-segment {
    left: auto
}

.non-mobile #page-menu {
    display: none
}

.non-mobile .head {
    background-color: #fafafa;
    position: static;
    display: block;
    height: 78px;
    padding: 0
}

.non-mobile .head .btn-download {
    display: none
}

.non-mobile .social {
    display: block
}

.non-mobile nav {
    vertical-align: top;
    display: inline-block
}

.non-mobile footer {
    display: block
}

.non-mobile .logo-link {
    vertical-align: top;
    display: inline-block
}

.non-mobile .section {
    position: relative;
    top: 0;
    left: 0;
    height: 400px
}

.non-mobile .section.section1 {
    position: relative
}

.non-mobile .section.section1 .tip-1, .non-mobile .section.section1 .tip-2 {
    display: block
}

.non-mobile .section.section1 .sample {
    display: block;
    z-index: 1;
    width: 442px;
    height: 458px;
    background: transparent url(images/2zheng_s.png) 0 0 no-repeat;
    background-size: 362px auto;
    position: absolute;
    right: 0;
    top: 33px
}

.non-mobile .section.section1 .sample .demo-video {
    width: 163px;
    height: 290px;
    position: absolute;
    top: 74px;
    left: 14px;
    display: none
}

.non-mobile .section.section1 .sample .btn-close-video {
    position: absolute;
    top: 75px;
    right: 217px;
    width: 40px;
    height: 40px;
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABAlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAwMgICAnJyc/Pz9BQUFHR0dgYGBqampra2tycnJ4eHh+fn6zs7O6urrHx8fKysrd3d3f39/h4eHj4+P5+fn7+/v8/Pz///9/cOa9AAAAVnRSTlMAAQIDBAUGBwgJCw0PEBMUFRYYGh0fICEiJCcoKistMDI0Njc4PD0+P0BBQkVHSUpMTU5PUFJTVFVWV1hZWlpgYWZmaG9xcnR1d4mNk5Wen6Gir7Cxs+2bX1kAAAE+SURBVDjLlZPZQsJADEVTBHdBUKiiQBXEYlEQtS4YccENFwTs//+KU5opky4P3qdMzm0naRqAf2her1mt82PTyCWicOaoi1KXe0tBvFxHpuvyHONZG4NqLiq80MWwzlZmz0dxxHZK3m9jtBpkOMA4FaY8LY9PGIw601YadPqYvFA0+H2laFvwFFX4MHbIMXCc4Z2XtIQhL9/bJ4fgox7luqKRfeQOlSNuzEogxxfjbhEnyBycYxmgozb+KQzvasIAaCpHcb/j+N262gWoMz56GzOHDlBhvOd36ykjRsk5MoetAWg0y8eJrF84fuhL1txZGOR+/pb99Yf3FGVdw8JV7LjphyjF8ds1z6BZMYaivzGnkbyqbEUriqv7lTwM3V8MrNZmm3FzNbSbCd28IXpRXY9e72Ruq1TZyac1JfcHuG2zmjpapw8AAAAASUVORK5CYII=) 50% 50% no-repeat;
    background-size: 22px 22px
}

.non-mobile .section.section1 .sample .btn-play {
    display: block;
    width: 163px;
    height: 290px;
    position: absolute;
    top: 74px;
    left: 14px;
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGwAAABsCAMAAAC4uKf/AAAAllBMVEUAAAAAAABvb28AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8/Pz4+Pjy8vLe3t6/v7+WlpZISEgxMTEcHBwNDQ0AAAAAAAAAAAAAAAAAAAB8fHzp6elhYWEAAAAAAADR0dHQ0NCrq6utra2rq6tubm6tra1/f3/////ZP/QXAAAAMXRSTlOAAKMUDgZ9dlYdcGpfT0M2GHoiQFv8+PLizLSUjYeDUUw7Lymp655jR9fXv8DAosGpArBVrwAAAnRJREFUaN6001lSwkAURuE/3u7Mc8BZmVQoLa3K/jdni4CAEPredM4GvqcDj51WVJaktMeOg9Fili0DH9uC5aRZkOc5x6gIA5wsCIvSJVauYnQWTCM3mJolsChuqDdGmQ/bwrIXVoZgNYrEmArBLiUZNqsgyM81H4sSCIsXXCxHjzLNwVSKXiVkj9UBelbNbbECDsrtsAZOymywKRwV6otYCGel+gI2hcNG3VgDp2VdWAHH5eexGs6bn8NUAOdVdAZLMUCJPok1GKTsFBZhoBYnsAQDFet/WIHBWh1jqkJnX3dPkObTETZBd1ftzQukpYcY4SLWtu+PEFYfYBMbrL2+h6x0HyPfBjPdPkBUtIdNYYm1449nCBr9Ycq3xUyvbxBEO6yAPWaSXJDvsCUPk1wQbzECDxNdUG+wnImJLphssISJiS6ofjEFJia7IFpjcy4mu2C2xjIuJrsgXWMxF5NdUP1gClxMeEFksJqNCS+YG6xgY8ILcoOt2JjwgtBgIzYmvCAxWMzGhBf4BgvYmPQCDc9nY9ILlOHYmPQCguJj0gtKkFusHX+evaD+rtZMbgCEYSD44sGfJiwFQf/VUQFKbDbDpoII5MR7jP6w6/WwHf2N6IBIRz86o6+81HfvUpPPFfoQq1ZMG1kx6PJEZYFA8ERC8HBSDhWpuPyuG4uWMxakZULNYN3mRt7mkgYejSbQ0KUUJ521OAkNysgIMB9uRj3cJGNbNJAmo3a0RCDrEbL4+b/SmlTWOdSQMwpWl+pYXYo71f3Cbzs2M0RDBZ84YjUKYMgVhfoIeXnja2UwbwXkMA9TroSJDgOwa6K9KmgZxbEfANP5PhHfIN4AAAAASUVORK5CYII=) 50% 50% no-repeat;
    background-size: 54px 54px;
    opacity: .8
}

.non-mobile .section.section1 .sample .btn-play:hover {
    opacity: 1
}

.non-mobile .section.section1 h1 {
    display: none
}

.non-mobile .section.section1 .downloading {
    margin-right: 400px;
    position: relative
}

.non-mobile .section.section1 .downloading .inner {
    position: absolute;
    left: 50%;
    top: 105px;
    width: 330px;
    margin-left: -165px
}

.non-mobile .section.section1 .downloading .tip-1 {
    line-height: 1;
    color: #fff;
    font-size: 36px;
    margin-bottom: 8px
}

.non-mobile .section.section1 .downloading .tip-2 {
    line-height: 1;
    color: #fff;
    font-size: 20px;
    padding-bottom: 12px
}

.non-mobile .section.section1 .downloading .btn-download {
    display: inline-block;
    width: 118px;
    line-height: 20px;
    font-size: 12px;
    position: relative;
    margin: 16px 16px 0 0;
    opacity: 1;
    left: 0;
    top: 0
}

.non-mobile .section.section1 .downloading .btn-download i.icon {
    width: 18px;
    height: 20px
}

.non-mobile .section.section1 .downloading .btn-download i.icon.android, .non-mobile .section.section1 .downloading .btn-download i.icon.apple {
    background-size: 16px 20px
}

.non-mobile .section.section1 .downloading .btn-download i.icon.qr-code {
    background-size: 18px 17px
}

.non-mobile .section h2 {
    top: 152px;
    font-size: 32px
}

.non-mobile .section h2, .non-mobile .section p.info {
    right: 0;
    color: #464646;
    width: 44%;
    min-width: 355px;
    left: auto;
    opacity: 1;
    text-align: left
}

.non-mobile .section p.info {
    top: 200px;
    font-size: 16px;
    line-height: 26px;
    margin: 0
}

.non-mobile .section .animated-wrap {
    width: 62%;
    position: relative;
    height: 400px
}

.non-mobile .section.section2, .non-mobile .section.section4 {
    background: #f7f7f7
}

.non-mobile .section3 .animated-wrap, .non-mobile .section5 .animated-wrap {
    margin-left: 38%
}

.non-mobile .section3 h2, .non-mobile .section3 p.info, .non-mobile .section5 h2, .non-mobile .section5 p.info {
    width: 390px;
    left: 80px;
    right: auto
}

.non-mobile .section4 .center-image {
    margin-left: 0
}

.non-mobile .section2 .fade-in-from-left {
    opacity: 1;
    bottom: 0;
    width: 263px;
    height: 368px;
    background-size: 263px auto
}

.non-mobile .section2 .fade-in-from-right {
    opacity: 0
}

.non-mobile .section3 .right-big-phone {
    opacity: 1;
    width: 206px;
    height: 373px;
    bottom: 0;
    margin-left: 0;
    left: auto
}

.non-mobile .section3 .left-1 {
    opacity: 1;
    width: 193px;
    height: 62px;
    bottom: 161px
}

.non-mobile .section3 .left-2 {
    opacity: 1;
    width: 193px;
    height: 62px;
    bottom: 85px
}

.non-mobile .section3 .left-3 {
    opacity: 1;
    width: 193px;
    height: 62px;
    bottom: 9px
}

.non-mobile .section4 .center-image {
    width: 260px;
    height: 348px;
    opacity: 1
}

.non-mobile .section4 .switchable-images {
    top: 100px;
    left: 11px;
    width: 235px;
    height: 248px;
    background-size: 235px 248px
}

.non-mobile .section5 .center-image {
    width: 379px;
    height: 354px;
    opacity: 1
}

@media (max-width: 384px) {
    .section2 .fade-in-from-left {
        width: 200px;
        height: 295px;
        background-size: contain;
        margin-left: -100px
    }

    .section2 .fade-in-from-right {
        bottom: 72px;
        width: 110px;
        height: 110px;
        background-size: contain;
        margin-left: 33px
    }

    .section3 .right-big-phone {
        margin-left: 1px;
        width: 133px;
        height: 249px;
        background-size: contain;
        bottom: -8px
    }

    .section3 .left-1 {
        bottom: 115px
    }

    .section3 .left-1, .section3 .left-2 {
        width: 154px;
        height: 50px;
        margin-left: -115px
    }

    .section3 .left-2 {
        bottom: 61px
    }

    .section3 .left-3 {
        width: 154px;
        height: 50px;
        bottom: 5px;
        margin-left: -115px
    }

    .section4 .center-image {
        width: 208px;
        height: 279px;
        margin-left: -104px
    }

    .section4 .switchable-images {
        width: 187px;
        height: 197px;
        top: 82px;
        left: 10px
    }

    .section5 .center-image {
        width: 256px;
        height: 240px;
        margin-left: -128px
    }
}

.non-mobile {
    min-width: 768px;
    background-color: #fafafa
}

.non-mobile .section2 .fade-in-from-left {
    margin-left: 0
}

@media (max-width: 1023px) {
    .non-mobile .section.section1 .sample {
        width: 398px
    }

    .non-mobile .section3 .right-big-phone {
        right: 40px
    }

    .non-mobile .section3 .left-1, .non-mobile .section3 .left-2, .non-mobile .section3 .left-3 {
        right: 200px
    }

    .non-mobile .section4 .center-image {
        left: 50px
    }

    .non-mobile .section2 .fade-in-from-right {
        left: 218px
    }

    .non-mobile .section2 .fade-in-from-left {
        left: 38px
    }

    .non-mobile .section3 h2, .non-mobile .section3 p.info, .non-mobile .section5 h2, .non-mobile .section5 p.info {
        left: 20px;
        margin-left: 0
    }

    .non-mobile .section5 .center-image {
        right: 23px;
        width: 321px;
        height: 300px
    }
}

@media (min-width: 1024px) {
    .non-mobile .section2 .fade-in-from-right {
        left: 314px
    }

    .non-mobile .section2 .fade-in-from-left {
        left: 135px
    }

    .non-mobile .section3 .left-1, .non-mobile .section3 .left-2, .non-mobile .section3 .left-3 {
        right: 240px
    }

    .non-mobile .section4 .center-image {
        left: 152px
    }

    .non-mobile .section5 .center-image {
        right: 90px
    }

    .non-mobile .section.section1 .downloading .inner {
        width: auto
    }

    .non-mobile .section.section1 .downloading .tip-2 {
        font-size: 24px
    }
}

@media (min-width: 769px) {
    .non-mobile .section.section1 {
        -webkit-animation: none;
        animation: none;
        background-size: cover
    }
}

.no-touch .social-site:hover {
    opacity: 1
}

.no-touch .social-site:hover .user-link-code {
    opacity: 1 !important;
    transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important
}

.no-touch .btn-download:hover .download-code {
    opacity: 1;
    transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important
}

.non-mobile .section {
    background-color: #fff
}

.non-mobile .head .logo, .non-mobile .section1 h2, .non-mobile .section1 p.info {
    display: none
}

.non-mobile .head .content-wrap {
    position: relative;
    z-index: 10
}

.non-mobile .section2 .fade-in-from-right {
    width: 138px;
    height: 138px;
    bottom: 81px;
    margin-left: 0
}

.non-mobile .social .social-site {
    position: relative
}

.non-mobile .social .weixin .user-link-code {
    display: block;
    position: absolute;
    bottom: -126px;
    left: -38px;
    opacity: 0;
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    transition: all .5s;
    width: 141px;
    height: 144px;
    background: transparent url(images/weixin_qrcode.png) 0 0 no-repeat;
    background-size: 141px 144px
}

.non-mobile .social .weixin.active .user-link-code {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0)
}

@media (min-width: 939px) {
    .non-mobile .content-wrap {
        margin: 0 auto;
        width: 1024px;
        position: relative
    }

    .non-mobile .section.section1 .downloading .inner {
        left: 79px;
        margin-left: 0
    }

    .non-mobile .section h2, .non-mobile .section p.info {
        width: 403px
    }
}

@media (min-width: 1024px) {
    .non-mobile .section3 .right-big-phone {
        right: 80px
    }

    .non-mobile .section.section1 .sample .btn-close-video {
        right: 267px
    }
}

@media (min-width: 1440px) {
    .non-mobile .section2 .fade-in-from-right {
        left: 441px;
        margin-left: 0
    }

    .non-mobile .content-wrap {
        width: 1440px;
        max-width: 1440px;
        margin: 0 auto
    }

    .non-mobile .section, .non-mobile .section .animated-wrap {
        height: 563px
    }

    .non-mobile .section h2 {
        top: 211px;
        font-size: 44px;
        width: 560px
    }

    .non-mobile .section p.info {
        width: 560px;
        top: 280px;
        font-size: 24px
    }

    .non-mobile .section.section1 .sample .btn-close-video {
        top: 106px;
        right: 296px
    }

    .non-mobile .section2 .fade-in-from-left {
        width: 370px;
        height: 517px;
        background-image: url(images/1youxie.png);
        background-size: 370px auto;
        margin-left: 0;
        left: 190px
    }

    .non-mobile .section2 .fade-in-from-right {
        bottom: 118px;
        width: 194px;
        height: 194px;
        background-image: url(https://jd1.1058s.cn/cdn/images/pic1.jpg);
        background-size: 194px 194px
    }

    .non-mobile .section3 h2, .non-mobile .section3 p.info, .non-mobile .section5 h2, .non-mobile .section5 p.info {
        left: 113px;
        width: 550px;
        margin-left: 0
    }

    .non-mobile .section3 .left-1, .non-mobile .section3 .left-2, .non-mobile .section3 .left-3 {
        right: 336px
    }

    .non-mobile .section.section1 .sample {
        right: 112px;
        top: 37px;
        width: 510px;
        height: 621px;
        background-image: url(images/2zheng.png);
        background-size: 510px auto
    }

    .non-mobile .section.section1 .sample .btn-play, .non-mobile .section.section1 .sample .demo-video {
        width: 230px;
        height: 408px;
        top: 103px;
        left: 19px
    }

    .non-mobile .section.section1 .sample .btn-close-video {
        right: 266px
    }

    .non-mobile .section.section1 .downloading .inner {
        top: 150px;
        left: 100px
    }

    .non-mobile .section.section1 .downloading .tip-1 {
        font-size: 50px;
        margin-bottom: 12px
    }

    .non-mobile .section.section1 .downloading .tip-2 {
        font-size: 32px
    }

    .non-mobile .section3 .right-big-phone {
        width: 289px;
        height: 524px;
        background-image: url(images/1zuoxie.png);
        background-size: 289px 524px;
        right: 112px
    }

    .non-mobile .section3 .left-1 {
        width: 271px;
        height: 87px;
        background-image: url(https://jd1.1058s.cn/cdn/images/pic1.jpg);
        background-size: 271px 87px;
        bottom: 226px
    }

    .non-mobile .section3 .left-2 {
        width: 271px;
        height: 87px;
        background-image: url(https://jd1.1058s.cn/cdn/images/pic2.jpg);
        background-size: 271px 87px;
        bottom: 118px
    }

    .non-mobile .section3 .left-3 {
        width: 271px;
        height: 87px;
        background-image: url(https://jd1.1058s.cn/cdn/images/pic3.jpg);
        background-size: 271px 87px;
        bottom: 14px
    }

    .non-mobile .section4 .center-image {
        width: 366px;
        height: 490px;
        background-image: url(images/1zheng.png);
        background-size: 366px 490px;
        left: 213px
    }

    .non-mobile .section4 .switchable-images {
        top: 141px;
        left: 17px;
        width: 331px;
        height: 348px;
        background-size: 331px 348px;
        background-image: url(https://jd1.1058s.cn/cdn/images/pic3.jpg)
    }

    .non-mobile .section4 .switchable-images.third-tab {
        background-image: url(https://jd1.1058s.cn/cdn/images/pic2.jpg);
        background-size: 331px 348px
    }

    .non-mobile .section5 .center-image {
        width: 533px;
        height: 497px;
        background-image: url(https://jd1.1058s.cn/cdn/images/pic1.jpg);
        background-size: 533px 497px;
        right: 127px
    }
}

.ref1 {
    position: fixed;
    top: 50%;
    height: 0;
    border-top: 1px solid #0f0;
    width: 100%
}

.non-mobile .DownloadGuide {
    display: none
}

.DownloadGuide {
    background: #fff;
    background-image: linear-gradient(hsla(0, 0%, 100%, .09) 74%, rgba(0, 156, 238, .3));
    font-family: -apple-system, \.SFNSText-Regular, San Francisco, Roboto, Segoe UI, Helvetica Neue, Lucida Grande, sans-serif;
    height: 100%;
    left: 0;
    opacity: 1;
    position: fixed;
    text-align: center;
    top: 0;
    transition: opacity .6s;
    width: 100%;
    z-index: 4
}

.DownloadGuide.is-hidden {
    opacity: 0
}

.DownloadGuide-header {
    position: absolute;
    top: 19%;
    width: 100%
}

.DownloadGuide-headerLogo {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALgAAABUCAMAAAAGaw0MAAAAS1BMVEUAAAAAZv8AZ/8AaP8AZ/8AZv8AZf8AaP8AZf8AZP8AZv8AYP8AZf8AcP8AZv8AZv8AZf8AZf8AZv8AZv8AZf8AZ/8AZ/8AZv8AZv/9oSEhAAAAGHRSTlMA378gn4DvQGBArxAwEM9wUJB/3m9fkI+unBWOAAAEDElEQVRo3u2a7XajIBCGBwYRUNBkTTv3f6WbpmvGKAZjpdFz9vnbM80T8jrIB/zn7ZQfQis4HEbQlRIOhnf0hYB9UhslBEKEQDd2lxSPbaeCvsmdYMqZvqlhH1x9TaGc0DRAwgQkentSPNalMcWHckGwbEK8oG9O8Jtgr6qkEJQgnuO+DCEb/kuzvXreRAObLqeBMZa+CZAHqWkLShij+CtlQdIWiPmkaBFFXuCGFCkURCkoyaqIt5TizN/vKRKiVJtEBSNJSVL+SBwaeg1OQJBOqaIwpq1XjUfxgvj6sGip1MfN0taIHhIYyi8OVo5HUqqvoeyMsbbl8ldwOcUZtKa1FhEjf1oljpRPPM16cU6KvNHbBTnEDMXllHeI9x/qHh+jcrbdC5iA+cTTSbnkF/elKf1r4r5zUnYIMN/EMbe4P9/6rsIXyjvNM+AjleAJNas4f5KoF5d31NPOPpqYW5x/W1EtLOeG5+ZkqIDc4jzkJJeV+3uBwLkBD5BfHCwvCRaVK+rBORflc4nH37V0vaD8zNPfzBjoBiCnOCM55slyDriK/iMtWw+/JY66l/lMleOTgAN2pmbrXOLxNUs5U54OOJNfnDndY45PyzngDexCPNYTuTwa8H2IQ81DOS2PBNzvRXyw/qxny90g4LsR554YJuWRX+Vlccwkzj1RYjIqCpaj8orztHd6Vl4pDvhCXE5x7onCJsob7phzlF0xQPQ7zsWAC24qXgXnk+UomufakhYg6i3Fwa8tZ860DFHta7FsaCn1WnGVpn+utEpTcdtZRrlWXNOmIA94ZnGZQ9z9grjNIR4yiGce8iox4zew2QSEgrZDpCbOdjtxQEWb0aZe3eoNxBmrpHjC08OzP4xwFph48wLY+25tfH0Sjiber8Ld0cT7x6g4mnjou/bBxHHY5mtXHUZ8uHl7JnKHEZf3CzflzbI5iPg9Keaz3yc7hrjpxR39Qx5D/H4Cy/cSmiOIG7ZteVP1AOJi8LLOYdm/+H3Aw8N2cLN7cfFwOG45LDsXN6Nl3YnD8iiu5ZXPf0XyRnijOIrhGUA0LGK8hEL5xvsq8cOiaFjEaNHaaXq/eBk5NuewRMTrWhK9XxxZqowcNFVT8fD2q02joKjYXo6BHd7JGu3ZYuxUssgr3q4tv9CdU/RUsni4W6tpgBjiYA0oVorXAw2MbvyZub1pYWEVVjFSc0xfotZPNopOkSUo8u/jYR2WYnSrvYuZI+wKhlR9Y7EbXykv13qHmbEJsbcaXcAPqGnKH3iBy9Dbz5ztnSI7oxLhRzQ04bKun5D0c/cdysl30Q38lIJGhFX9+4mKFTDCOA+wtXnwa7x1gTALQh5QEQuc4RVs9+GkU52F9+DbQsmrwNl6+M9u+QuVDYsTmSCplAAAAABJRU5ErkJggg==);
    background-size: cover;
    display: inline-block;
    height: 42px;
    vertical-align: top;
    width: 90px
}

.DownloadGuide-headerText {
    display: inline-block;
    font-size: 24px;
    margin-left: 13px;
    line-height: 1;
    vertical-align: bottom
}

.DownloadGuide-headerHint {
    font-size: 16px;
    font-weight: 300;
    line-height: 28px;
    margin-top: 22px
}

.DownloadGuide-body {
    left: 50%;
    margin-left: -120px;
    position: absolute;
    top: 48%;
    width: 240px
}

.DownloadGuide-downloadButton, .DownloadGuide-resumeButton {
    background: none;
    border: none;
    padding: 0
}

.DownloadGuide-downloadButton {
    color: #fff;
    background: #0f88eb;
    border-radius: 5px;
    box-shadow: 0 5px 15px 0 rgba(15, 136, 235, .1);
    font-size: 18px;
    font-weight: 700;
    line-height: 42px;
    margin-bottom: 8px;
    width: 245px
}

.DownloadGuide-resumeButton {
    color: #9cb7ce;
    font-size: 14px;
    padding: 7px 0
}

.DownloadGuide-footer {
    background-image: url(https://www.zhihu.com/app/8f6bcb9d6c8ce269599206c90d4594f0.png);
    background-size: cover;
    bottom: -44px;
    height: 192px;
    left: 50%;
    margin-left: -145px;
    position: absolute;
    width: 290px
}