@charset "gbk";* {
    padding: 0;
    margin: 0
}

html {
    overflow: hidden
}

body {
    overflow: hidden;
    font-size: 100%;
    background-color: #2f2318;
    font-family: 'Microsoft Yahei';
    color: #fff
}

img {
    border: 0 none
}

.pop-download .close,.download-type-nav li .d-type-icon,.download-type-content .d-download-area .d-btn .d-b-icon,.download-type-content .d-other-download .o-btn i,.startup-helper .pBtn .d-btn .d-b-icon {
    background: url("../img/pop-download-sprites.png") no-repeat
}

.sub-title,.summary,#page6-text .title {
    font-style: normal;
    font-weight: 100
}

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

    90% {
        opacity: 1
    }

    100% {
        opacity: 1
    }
}

@keyframes animateBaseIn {
    0% {
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        opacity: 1
    }
}

.animateBaseIn {
    -webkit-animation: animateBaseIn 0.6s;
    animation: animateBaseIn 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes animateBaseOut {
    0% {
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

@keyframes animateBaseOut {
    0% {
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

.animateBaseOut {
    -webkit-animation: animateBaseOut 0.4s;
    animation: animateBaseOut 0.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes animateTextTitleIn {
    0% {
        -webkit-transform: translateX(-50px) translateZ(0);
        transform: translateX(-50px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(0px) translateZ(0);
        transform: translateX(0px) translateZ(0);
        opacity: 1
    }
}

@keyframes animateTextTitleIn {
    0% {
        -webkit-transform: translateX(-50px) translateZ(0);
        transform: translateX(-50px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(0px) translateZ(0);
        transform: translateX(0px) translateZ(0);
        opacity: 1
    }
}

.animateTextTitleIn {
    -webkit-animation: animateTextTitleIn 0.6s;
    animation: animateTextTitleIn 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animateTextSubIn {
    0% {
        -webkit-transform: translateX(-50px) translateZ(0);
        transform: translateX(-50px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(0px) translateZ(0);
        transform: translateX(0px) translateZ(0);
        opacity: 1
    }
}

@keyframes animateTextSubIn {
    0% {
        -webkit-transform: translateX(-50px) translateZ(0);
        transform: translateX(-50px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(0px) translateZ(0);
        transform: translateX(0px) translateZ(0);
        opacity: 1
    }
}

.animateTextSubIn {
    -webkit-animation: animateTextSubIn 0.6s;
    animation: animateTextSubIn 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animateTextTitleOut {
    0% {
        -webkit-transform: translateX(0px) translateZ(0);
        transform: translateX(0px) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(-50px) translateZ(0);
        transform: translateX(-50px) translateZ(0);
        opacity: 0
    }
}

@keyframes animateTextTitleOut {
    0% {
        -webkit-transform: translateX(0px) translateZ(0);
        transform: translateX(0px) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(-50px) translateZ(0);
        transform: translateX(-50px) translateZ(0);
        opacity: 0
    }
}

.animateTextTitleOut {
    -webkit-animation: animateTextTitleOut 0.4s;
    animation: animateTextTitleOut 0.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animateTextSubOut {
    0% {
        -webkit-transform: translateX(0px) translateZ(0);
        transform: translateX(0px) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(-50px) translateZ(0);
        transform: translateX(-50px) translateZ(0);
        opacity: 0
    }
}

@keyframes animateTextSubOut {
    0% {
        -webkit-transform: translateX(0px) translateZ(0);
        transform: translateX(0px) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(-50px) translateZ(0);
        transform: translateX(-50px) translateZ(0);
        opacity: 0
    }
}

.animateTextSubOut {
    -webkit-animation: animateTextSubOut 0.4s;
    animation: animateTextSubOut 0.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animateMobileTextIn {
    0% {
        -webkit-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
        opacity: 0
    }

    90% {
        opacity: 1
    }

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

@keyframes animateMobileTextIn {
    0% {
        -webkit-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
        opacity: 0
    }

    90% {
        opacity: 1
    }

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

.animateMobileTextIn {
    -webkit-animation: animateMobileTextIn 0.4s;
    animation: animateMobileTextIn 0.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animateMobileTextOut {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
        opacity: 0
    }
}

@keyframes animateMobileTextOut {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
        opacity: 0
    }
}

.animateMobileTextOut {
    -webkit-animation: animateMobileTextOut 0.4s;
    animation: animateMobileTextOut 0.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animateBackgroundTo0 {
    to {
        -webkit-transform: translateX(0%) translateZ(0);
        transform: translateX(0%) translateZ(0)
    }
}

@keyframes animateBackgroundTo0 {
    to {
        -webkit-transform: translateX(0%) translateZ(0);
        transform: translateX(0%) translateZ(0)
    }
}

.animateBackgroundTo0 {
    -webkit-animation: animateBackgroundTo0 0.6s;
    animation: animateBackgroundTo0 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes animateBackgroundTo1 {
    to {
        -webkit-transform: translateX(-16.66666%) translateZ(0);
        transform: translateX(-16.66666%) translateZ(0)
    }
}

@keyframes animateBackgroundTo1 {
    to {
        -webkit-transform: translateX(-16.66666%) translateZ(0);
        transform: translateX(-16.66666%) translateZ(0)
    }
}

.animateBackgroundTo1 {
    -webkit-animation: animateBackgroundTo1 0.6s;
    animation: animateBackgroundTo1 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes animateBackgroundTo2 {
    to {
        -webkit-transform: translateX(-33.33332%) translateZ(0);
        transform: translateX(-33.33332%) translateZ(0)
    }
}

@keyframes animateBackgroundTo2 {
    to {
        -webkit-transform: translateX(-33.33332%) translateZ(0);
        transform: translateX(-33.33332%) translateZ(0)
    }
}

.animateBackgroundTo2 {
    -webkit-animation: animateBackgroundTo2 0.6s;
    animation: animateBackgroundTo2 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes animateBackgroundTo3 {
    to {
        -webkit-transform: translateX(-49.99998%) translateZ(0);
        transform: translateX(-49.99998%) translateZ(0)
    }
}

@keyframes animateBackgroundTo3 {
    to {
        -webkit-transform: translateX(-49.99998%) translateZ(0);
        transform: translateX(-49.99998%) translateZ(0)
    }
}

.animateBackgroundTo3 {
    -webkit-animation: animateBackgroundTo3 0.6s;
    animation: animateBackgroundTo3 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes animateBackgroundTo4 {
    to {
        -webkit-transform: translateX(-66.66664%) translateZ(0);
        transform: translateX(-66.66664%) translateZ(0)
    }
}

@keyframes animateBackgroundTo4 {
    to {
        -webkit-transform: translateX(-66.66664%) translateZ(0);
        transform: translateX(-66.66664%) translateZ(0)
    }
}

.animateBackgroundTo4 {
    -webkit-animation: animateBackgroundTo4 0.6s;
    animation: animateBackgroundTo4 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes animateBackgroundTo5 {
    to {
        -webkit-transform: translateX(-83.3333%) translateZ(0);
        transform: translateX(-83.3333%) translateZ(0)
    }
}

@keyframes animateBackgroundTo5 {
    to {
        -webkit-transform: translateX(-83.3333%) translateZ(0);
        transform: translateX(-83.3333%) translateZ(0)
    }
}

.animateBackgroundTo5 {
    -webkit-animation: animateBackgroundTo5 0.6s;
    animation: animateBackgroundTo5 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes animateMobileBackgroundTo0 {
    to {
        -webkit-transform: translateY(0%) translateZ(0);
        transform: translateY(0%) translateZ(0)
    }
}

@keyframes animateMobileBackgroundTo0 {
    to {
        -webkit-transform: translateY(0%) translateZ(0);
        transform: translateY(0%) translateZ(0)
    }
}

.animateMobileBackgroundTo0 {
    -webkit-animation: animateMobileBackgroundTo0 0.6s;
    animation: animateMobileBackgroundTo0 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes animateMobileBackgroundTo1 {
    to {
        -webkit-transform: translateY(-16.66666%) translateZ(0);
        transform: translateY(-16.66666%) translateZ(0)
    }
}

@keyframes animateMobileBackgroundTo1 {
    to {
        -webkit-transform: translateY(-16.66666%) translateZ(0);
        transform: translateY(-16.66666%) translateZ(0)
    }
}

.animateMobileBackgroundTo1 {
    -webkit-animation: animateMobileBackgroundTo1 0.6s;
    animation: animateMobileBackgroundTo1 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes animateMobileBackgroundTo2 {
    to {
        -webkit-transform: translateY(-33.33332%) translateZ(0);
        transform: translateY(-33.33332%) translateZ(0)
    }
}

@keyframes animateMobileBackgroundTo2 {
    to {
        -webkit-transform: translateY(-33.33332%) translateZ(0);
        transform: translateY(-33.33332%) translateZ(0)
    }
}

.animateMobileBackgroundTo2 {
    -webkit-animation: animateMobileBackgroundTo2 0.6s;
    animation: animateMobileBackgroundTo2 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes animateMobileBackgroundTo3 {
    to {
        -webkit-transform: translateY(-49.99998%) translateZ(0);
        transform: translateY(-49.99998%) translateZ(0)
    }
}

@keyframes animateMobileBackgroundTo3 {
    to {
        -webkit-transform: translateY(-49.99998%) translateZ(0);
        transform: translateY(-49.99998%) translateZ(0)
    }
}

.animateMobileBackgroundTo3 {
    -webkit-animation: animateMobileBackgroundTo3 0.6s;
    animation: animateMobileBackgroundTo3 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes animateMobileBackgroundTo4 {
    to {
        -webkit-transform: translateY(-66.66664%) translateZ(0);
        transform: translateY(-66.66664%) translateZ(0)
    }
}

@keyframes animateMobileBackgroundTo4 {
    to {
        -webkit-transform: translateY(-66.66664%) translateZ(0);
        transform: translateY(-66.66664%) translateZ(0)
    }
}

.animateMobileBackgroundTo4 {
    -webkit-animation: animateMobileBackgroundTo4 0.6s;
    animation: animateMobileBackgroundTo4 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes animateMobileBackgroundTo5 {
    to {
        -webkit-transform: translateY(-83.3333%) translateZ(0);
        transform: translateY(-83.3333%) translateZ(0)
    }
}

@keyframes animateMobileBackgroundTo5 {
    to {
        -webkit-transform: translateY(-83.3333%) translateZ(0);
        transform: translateY(-83.3333%) translateZ(0)
    }
}

.animateMobileBackgroundTo5 {
    -webkit-animation: animateMobileBackgroundTo5 0.6s;
    animation: animateMobileBackgroundTo5 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes animateControlFocus {
    0% {
        opacity: 0.4;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }

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

@keyframes animateControlFocus {
    0% {
        opacity: 0.4;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }

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

.animateControlFocus {
    -webkit-animation: animateControlFocus 0.4s;
    animation: animateControlFocus 0.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes animateControlFocusOut {
    0% {
        opacity: 1;
        -webkit-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2)
    }

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

@keyframes animateControlFocusOut {
    0% {
        opacity: 1;
        -webkit-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2)
    }

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

.animateControlFocusOut {
    -webkit-animation: animateControlFocusOut 0.4s;
    animation: animateControlFocusOut 0.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes animatePageControlIn {
    0% {
        -webkit-transform: translateY(20px) translateZ(0);
        transform: translateY(20px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0);
        opacity: 1
    }
}

@keyframes animatePageControlIn {
    0% {
        -webkit-transform: translateY(20px) translateZ(0);
        transform: translateY(20px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0);
        opacity: 1
    }
}

.animatePageControlIn {
    -webkit-animation: animatePageControlIn 0.6s;
    animation: animatePageControlIn 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animateArrowDown {
    0% {
        opacity: 0.5;
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0)
    }

    33% {
        opacity: 0.5;
        -webkit-transform: translateY(-5px) translateZ(0);
        transform: translateY(-5px) translateZ(0)
    }

    100% {
        opacity: 0.5;
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0)
    }
}

@keyframes animateArrowDown {
    0% {
        opacity: 0.5;
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0)
    }

    33% {
        opacity: 0.5;
        -webkit-transform: translateY(-5px) translateZ(0);
        transform: translateY(-5px) translateZ(0)
    }

    100% {
        opacity: 0.5;
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0)
    }
}

.animateArrowDown {
    -webkit-animation: animateArrowDown 1.5s;
    animation: animateArrowDown 1.5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@-webkit-keyframes animateArrowRight {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0) translateZ(0);
        transform: translateX(0) translateZ(0)
    }

    66% {
        -webkit-transform: translateX(-5px) translateZ(0);
        transform: translateX(-5px) translateZ(0)
    }

    100% {
        -webkit-transform: translateX(0) translateZ(0);
        transform: translateX(0) translateZ(0)
    }
}

@keyframes animateArrowRight {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0) translateZ(0);
        transform: translateX(0) translateZ(0)
    }

    66% {
        -webkit-transform: translateX(-5px) translateZ(0);
        transform: translateX(-5px) translateZ(0)
    }

    100% {
        -webkit-transform: translateX(0) translateZ(0);
        transform: translateX(0) translateZ(0)
    }
}

.animateArrowRight {
    -webkit-animation: animateArrowRight 1.5s;
    animation: animateArrowRight 1.5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@-webkit-keyframes animateDownloadHandIn {
    0% {
        -webkit-transform: translateX(100px) translateZ(0);
        transform: translateX(100px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(0px) translateZ(0);
        transform: translateX(0px) translateZ(0);
        opacity: 1
    }
}

@keyframes animateDownloadHandIn {
    0% {
        -webkit-transform: translateX(100px) translateZ(0);
        transform: translateX(100px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(0px) translateZ(0);
        transform: translateX(0px) translateZ(0);
        opacity: 1
    }
}

.animateDownloadHandIn {
    -webkit-animation: animateDownloadHandIn 0.6s;
    animation: animateDownloadHandIn 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animateDownloadTextIn {
    0% {
        -webkit-transform: translateX(-100px) translateZ(0);
        transform: translateX(-100px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(0px) translateZ(0);
        transform: translateX(0px) translateZ(0);
        opacity: 1
    }
}

@keyframes animateDownloadTextIn {
    0% {
        -webkit-transform: translateX(-100px) translateZ(0);
        transform: translateX(-100px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(0px) translateZ(0);
        transform: translateX(0px) translateZ(0);
        opacity: 1
    }
}

.animateDownloadTextIn {
    -webkit-animation: animateDownloadTextIn 0.6s;
    animation: animateDownloadTextIn 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animateMobileDownloadButtonIn {
    0% {
        -webkit-transform: translateY(20px) translateZ(0);
        transform: translateY(20px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(0px) translateZ(0);
        transform: translateX(0px) translateZ(0);
        opacity: 1
    }
}

@keyframes animateMobileDownloadButtonIn {
    0% {
        -webkit-transform: translateY(20px) translateZ(0);
        transform: translateY(20px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(0px) translateZ(0);
        transform: translateX(0px) translateZ(0);
        opacity: 1
    }
}

.animateMobileDownloadButtonIn {
    -webkit-animation: animateMobileDownloadButtonIn 0.6s;
    animation: animateMobileDownloadButtonIn 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animateDownloadHandOut {
    0% {
        -webkit-transform: translateX(0px) translateZ(0);
        transform: translateX(0px) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(100px) translateZ(0);
        transform: translateX(100px) translateZ(0);
        opacity: 0
    }
}

@keyframes animateDownloadHandOut {
    0% {
        -webkit-transform: translateX(0px) translateZ(0);
        transform: translateX(0px) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(100px) translateZ(0);
        transform: translateX(100px) translateZ(0);
        opacity: 0
    }
}

.animateDownloadHandOut {
    -webkit-animation: animateDownloadHandOut 0.4s;
    animation: animateDownloadHandOut 0.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animateDownloadTextOut {
    0% {
        -webkit-transform: translateX(0px) translateZ(0);
        transform: translateX(0px) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(-100px) translateZ(0);
        transform: translateX(-100px) translateZ(0);
        opacity: 0
    }
}

@keyframes animateDownloadTextOut {
    0% {
        -webkit-transform: translateX(0px) translateZ(0);
        transform: translateX(0px) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(-100px) translateZ(0);
        transform: translateX(-100px) translateZ(0);
        opacity: 0
    }
}

.animateDownloadTextOut {
    -webkit-animation: animateDownloadTextOut 0.4s;
    animation: animateDownloadTextOut 0.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animateMobileDownloadButtonOut {
    0% {
        -webkit-transform: translateY(0px) translateZ(0);
        transform: translateY(0px) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(20px) translateZ(0);
        transform: translateY(20px) translateZ(0);
        opacity: 0
    }
}

@keyframes animateMobileDownloadButtonOut {
    0% {
        -webkit-transform: translateY(0px) translateZ(0);
        transform: translateY(0px) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(20px) translateZ(0);
        transform: translateY(20px) translateZ(0);
        opacity: 0
    }
}

.animateMobileDownloadButtonOut {
    -webkit-animation: animateMobileDownloadButtonOut 0.4s;
    animation: animateMobileDownloadButtonOut 0.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animatepage2PhoneIn {
    0% {
        -webkit-transform: translateY(-200px) translateZ(0);
        transform: translateY(-200px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(0px) translateZ(0);
        transform: translateY(0px) translateZ(0);
        opacity: 1
    }
}

@keyframes animatepage2PhoneIn {
    0% {
        -webkit-transform: translateY(-200px) translateZ(0);
        transform: translateY(-200px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(0px) translateZ(0);
        transform: translateY(0px) translateZ(0);
        opacity: 1
    }
}

.animatepage2PhoneIn {
    -webkit-animation: animatepage2PhoneIn 0.6s;
    animation: animatepage2PhoneIn 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animatePhoneFlipZoomIn {
    0% {
        -webkit-transform: scale(0.2, 0.2);
        transform: scale(0.2, 0.2);
        opacity: 0
    }

    90% {
        opacity: 1
    }

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

@keyframes animatePhoneFlipZoomIn {
    0% {
        -webkit-transform: scale(0.2, 0.2);
        transform: scale(0.2, 0.2);
        opacity: 0
    }

    90% {
        opacity: 1
    }

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

.animatePhoneFlipZoomIn {
    -webkit-animation: animatePhoneFlipZoomIn 0.4s;
    animation: animatePhoneFlipZoomIn 0.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animatePhoneFlipZoomOut {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: scale(0.2, 0.2);
        transform: scale(0.2, 0.2);
        opacity: 0
    }
}

@keyframes animatePhoneFlipZoomOut {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: scale(0.2, 0.2);
        transform: scale(0.2, 0.2);
        opacity: 0
    }
}

.animatePhoneFlipZoomOut {
    -webkit-animation: animatePhoneFlipZoomOut 0.4s;
    animation: animatePhoneFlipZoomOut 0.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animatepage2ScreenIn {
    0% {
        -webkit-transform: translateX(-100px) translateZ(0);
        transform: translateX(-100px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(0px) translateZ(0);
        transform: translateX(0px) translateZ(0);
        opacity: 1
    }
}

@keyframes animatepage2ScreenIn {
    0% {
        -webkit-transform: translateX(-100px) translateZ(0);
        transform: translateX(-100px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(0px) translateZ(0);
        transform: translateX(0px) translateZ(0);
        opacity: 1
    }
}

.animatepage2ScreenIn {
    -webkit-animation: animatepage2ScreenIn 0.8s;
    animation: animatepage2ScreenIn 0.8s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animatepage2ScreenOut {
    0% {
        -webkit-transform: translateX(0) translateZ(0);
        transform: translateX(0) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(-100px) translateZ(0);
        transform: translateX(-100px) translateZ(0);
        opacity: 0
    }
}

@keyframes animatepage2ScreenOut {
    0% {
        -webkit-transform: translateX(0) translateZ(0);
        transform: translateX(0) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(-100px) translateZ(0);
        transform: translateX(-100px) translateZ(0);
        opacity: 0
    }
}

.animatepage2ScreenOut {
    -webkit-animation: animatepage2ScreenOut 0.2s;
    animation: animatepage2ScreenOut 0.2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animatepage2PhoneOut {
    0% {
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(-200px) translateZ(0);
        transform: translateY(-200px) translateZ(0);
        opacity: 0
    }
}

@keyframes animatepage2PhoneOut {
    0% {
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(-200px) translateZ(0);
        transform: translateY(-200px) translateZ(0);
        opacity: 0
    }
}

.animatepage2PhoneOut {
    -webkit-animation: animatepage2PhoneOut 0.6s;
    animation: animatepage2PhoneOut 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animatepage3PhoneIn {
    0% {
        -webkit-transform: translateY(400px) translateZ(0);
        transform: translateY(400px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(0px) translateZ(0);
        transform: translateY(0px) translateZ(0);
        opacity: 1
    }
}

@keyframes animatepage3PhoneIn {
    0% {
        -webkit-transform: translateY(400px) translateZ(0);
        transform: translateY(400px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(0px) translateZ(0);
        transform: translateY(0px) translateZ(0);
        opacity: 1
    }
}

.animatepage3PhoneIn {
    -webkit-animation: animatepage3PhoneIn 0.6s;
    animation: animatepage3PhoneIn 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animatepage3MobilePhoneIn {
    0% {
        -webkit-transform: translateY(-200px) translateZ(0);
        transform: translateY(-200px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(0px) translateZ(0);
        transform: translateY(0px) translateZ(0);
        opacity: 1
    }
}

@keyframes animatepage3MobilePhoneIn {
    0% {
        -webkit-transform: translateY(-200px) translateZ(0);
        transform: translateY(-200px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(0px) translateZ(0);
        transform: translateY(0px) translateZ(0);
        opacity: 1
    }
}

.animatepage3MobilePhoneIn {
    -webkit-animation: animatepage3MobilePhoneIn 0.6s;
    animation: animatepage3MobilePhoneIn 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animatepage3PhoneOut {
    0% {
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(400px) translateZ(0);
        transform: translateY(400px) translateZ(0);
        opacity: 0
    }
}

@keyframes animatepage3PhoneOut {
    0% {
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(400px) translateZ(0);
        transform: translateY(400px) translateZ(0);
        opacity: 0
    }
}

.animatepage3PhoneOut {
    -webkit-animation: animatepage3PhoneOut 0.6s;
    animation: animatepage3PhoneOut 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animatepage3MobilePhoneOut {
    0% {
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(-200px) translateZ(0);
        transform: translateY(-200px) translateZ(0);
        opacity: 0
    }
}

@keyframes animatepage3MobilePhoneOut {
    0% {
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(-200px) translateZ(0);
        transform: translateY(-200px) translateZ(0);
        opacity: 0
    }
}

.animatepage3MobilePhoneOut {
    -webkit-animation: animatepage3MobilePhoneOut 0.6s;
    animation: animatepage3MobilePhoneOut 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animatepage4PhoneIn {
    0% {
        -webkit-transform: translateY(-400px) translateZ(0);
        transform: translateY(-400px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(0px) translateZ(0);
        transform: translateY(0px) translateZ(0);
        opacity: 1
    }
}

@keyframes animatepage4PhoneIn {
    0% {
        -webkit-transform: translateY(-400px) translateZ(0);
        transform: translateY(-400px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(0px) translateZ(0);
        transform: translateY(0px) translateZ(0);
        opacity: 1
    }
}

.animatepage4PhoneIn {
    -webkit-animation: animatepage4PhoneIn 0.6s;
    animation: animatepage4PhoneIn 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animatepage4PhoneOut {
    0% {
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(-400px) translateZ(0);
        transform: translateY(-400px) translateZ(0);
        opacity: 0
    }
}

@keyframes animatepage4PhoneOut {
    0% {
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(-400px) translateZ(0);
        transform: translateY(-400px) translateZ(0);
        opacity: 0
    }
}

.animatepage4PhoneOut {
    -webkit-animation: animatepage4PhoneOut 0.6s;
    animation: animatepage4PhoneOut 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

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

    90% {
        opacity: 1
    }

    100% {
        opacity: 1
    }
}

@keyframes animatepage4ScreenExpandIn {
    0% {
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        opacity: 1
    }
}

.animatepage4ScreenExpandIn {
    -webkit-animation: animatepage4ScreenExpandIn 0.6s;
    animation: animatepage4ScreenExpandIn 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animatepage5PhoneIn {
    0% {
        -webkit-transform: scale(1.3, 1.3);
        transform: scale(1.3, 1.3);
        opacity: 0
    }

    90% {
        opacity: 1
    }

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

@keyframes animatepage5PhoneIn {
    0% {
        -webkit-transform: scale(1.3, 1.3);
        transform: scale(1.3, 1.3);
        opacity: 0
    }

    90% {
        opacity: 1
    }

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

.animatepage5PhoneIn {
    -webkit-animation: animatepage5PhoneIn 0.6s;
    animation: animatepage5PhoneIn 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animatepage5AndroidIn {
    0% {
        -webkit-transform: translateX(200px) translateZ(0);
        transform: translateX(200px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(0px) translateZ(0);
        transform: translateX(0px) translateZ(0);
        opacity: 1
    }
}

@keyframes animatepage5AndroidIn {
    0% {
        -webkit-transform: translateX(200px) translateZ(0);
        transform: translateX(200px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(0px) translateZ(0);
        transform: translateX(0px) translateZ(0);
        opacity: 1
    }
}

.animatepage5AndroidIn {
    -webkit-animation: animatepage5AndroidIn 0.6s;
    animation: animatepage5AndroidIn 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animatepage5MacIn {
    0% {
        -webkit-transform: translateY(-200px) translateZ(0);
        transform: translateY(-200px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(0px) translateZ(0);
        transform: translateY(0px) translateZ(0);
        opacity: 1
    }
}

@keyframes animatepage5MacIn {
    0% {
        -webkit-transform: translateY(-200px) translateZ(0);
        transform: translateY(-200px) translateZ(0);
        opacity: 0
    }

    90% {
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(0px) translateZ(0);
        transform: translateY(0px) translateZ(0);
        opacity: 1
    }
}

.animatepage5MacIn {
    -webkit-animation: animatepage5MacIn 0.6s;
    animation: animatepage5MacIn 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animatepage5PhoneOut {
    0% {
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(-200px) translateZ(0);
        transform: translateY(-200px) translateZ(0);
        opacity: 0
    }
}

@keyframes animatepage5PhoneOut {
    0% {
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(-200px) translateZ(0);
        transform: translateY(-200px) translateZ(0);
        opacity: 0
    }
}

.animatepage5PhoneOut {
    -webkit-animation: animatepage5PhoneOut 0.4s;
    animation: animatepage5PhoneOut 0.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animatepage5AndroidOut {
    0% {
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(-200px) translateZ(0);
        transform: translateY(-200px) translateZ(0);
        opacity: 0
    }
}

@keyframes animatepage5AndroidOut {
    0% {
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(-200px) translateZ(0);
        transform: translateY(-200px) translateZ(0);
        opacity: 0
    }
}

.animatepage5AndroidOut {
    -webkit-animation: animatepage5AndroidOut 0.4s;
    animation: animatepage5AndroidOut 0.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes animatepage5MacOut {
    0% {
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(-200px) translateZ(0);
        transform: translateY(-200px) translateZ(0);
        opacity: 0
    }
}

@keyframes animatepage5MacOut {
    0% {
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0);
        opacity: 1
    }

    90% {
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(-200px) translateZ(0);
        transform: translateY(-200px) translateZ(0);
        opacity: 0
    }
}

.animatepage5MacOut {
    -webkit-animation: animatepage5MacOut 0.4s;
    animation: animatepage5MacOut 0.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

#background {
    background-image: url("../img/background.jpg");
    background-size: cover;
    background-repeat: no-repeat
}

.logo-in {
    background-image: url("../img/logo.png");
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.page-download-mobile-iPhone,.pc-iPhone {
    background-image: url("../img/m-spr.png");
    background-repeat: no-repeat;
    background-size: 100% 305.13%
}

.page-download-mobile-android,.pc-android {
    background-image: url("../img/m-spr.png");
    background-repeat: no-repeat;
    background-size: 100% 305.13%;
    background-position: 0 57%
}

#view {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    top: 0
}

#logo {
    position: fixed;
    z-index: 1000;
    display: block;
    left: 14.06%;
    width: 12.4%;
    top: 2.04%;
    cursor: pointer
}

#logo .logo-in {
    width: 100%;
    position: absolute;
    padding-bottom: 22.69%
}

#arrow-left,#arrow-right {
    position: fixed;
    z-index: 1000;
    width: 2%;
    top: 50%;
    margin-top: -3.3%;
    cursor: pointer;
    opacity: 0;
    display: none
}

#arrow-left {
    left: 1.56%
}

#arrow-left-height {
    padding-bottom: 193.7%;
    background: url("../img/arrow-left.png") no-repeat;
    background-size: 100% auto
}

#arrow-right {
    right: 1.56%;
    display: block
}

#arrow-right-height {
    padding-bottom: 193.7%;
    background: url("../img/arrow-right.png") no-repeat;
    background-size: 100% auto
}

#arrow-down {
    display: none
}

#background {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 600%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform
}

#page-control {
    position: fixed;
    width: 160px;
    height: 10px;
    bottom: 5%;
    left: 50%;
    z-index: 1500;
    opacity: 0;
    margin-left: -80px
}

#pageControl-btn1 {
    margin-left: 0px
}

.pageControl {
    float: left;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: white;
    opacity: 0.4;
    margin-left: 20px;
    cursor: pointer
}

#page-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%
}

.page {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none
}

.page-text {
    position: absolute;
    left: 14.06%;
    height: 48.15%
}

.sub-title {
    font-size: 125%
}

.summary {
    font-size: 100%
}

.page-download {
    position: relative;
    *zoom:1}

.page-download .qrcode {
    width: 29.84%
}

.page-download .qrcode-in {
    width: 100%;
    padding-bottom: 100%;
    background: url("../img/qrcode.png") no-repeat;
    background-size: 100% 100%
}

.btn-android,.btn-ios {
    width: 43.55%;
    background-color: #6be373;
    padding-bottom: 11.29%;
    padding-top: 1px;
    border-radius: 5px;
    display: inline-block;
    text-align: center;
    *zoom:1}

.btn-android img,.btn-ios img {
    width: 62.59%;
    display: block;
    position: absolute;
    top: 25.71%;
    left: 50%;
    margin-left: -31.3%
}

.btn-android:hover,.btn-ios:hover {
    background-color: #5bc262
}

.btn-ios {
    background-color: #64bef2
}

.btn-ios img {
    width: 68.89%
}

.btn-ios:hover {
    background-color: #57a6d4
}




.iphone .in {
    width: 170%;
    padding-bottom: 240%;
    background: url("../img/guide_1.png") no-repeat;
    background-size: 100% auto;
    margin-left: -30%;
	margin-top: -70%;
}

.iphone2 .in2 {
    width: 77%;
    padding-bottom: 240%;
    background: url("../img/guide_2.png") no-repeat;
    background-size: 100% auto;
    margin-left: -15%;
	margin-top: -30%;
}


.iphone3 .in3 {
    width: 77%;
    padding-bottom: 240%;
    background: url("../img/guide_3.png") no-repeat;
    background-size: 100% auto;
    margin-left: -15%;
	margin-top: -30%;
}

.iphone-screen {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% auto;
    left: 3.57%;
    top: 11.38%;
    width: 92.88%;
    padding-bottom: 165.32%
}

#page-download-button {
    display: none
}

#page1 {
    left: 0%;
    display: block
}

#page1 .page-text {
    width: 32.29%;
    top: 13.15%;
    opacity: 0
}

#page1 .title {
    font-size: 231.82%
}

#page1 .sub-title {
    margin-bottom: 1.92%
}

#page1 .summary {
    font-size: 100%;
    line-height: 1.5;
    margin-bottom: 3.85%
}

.beian {
    font-size: 40%;
    color: #eee;
    line-height: 1.5;
    margin-left: -120%;
    margin-right: -120%
}

#page1 .btn-android,#page1 .btn-ios {
    position: absolute;
    left: 33.06%;
    top: 6.05%
}

#page1 .btn-ios {
    top: 52.56%
}

#page1 .hand {
    position: absolute;
    right: -0.78%;
    bottom: -30.56%;
    height: 100%;
    width: 39.64%;
    opacity: 0
}

#page1 .hand-in {
    position: absolute;
    top: 0;
    width: 100%;
    padding-bottom: 128.52%
}

#page1 .hand-img {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    z-index: 2
}

#page1 .iphone {
    width: 46.31%;
    left: 6.33%;
    bottom: 48.26%
}

#page1 .iphone-screen {
    background-image: url("../img/iphone-screen-cover.png")
}




#page2 {
    left: 0%;
    display: block
}

#page2 .page-text {
    width: 32.29%;
    top: 13.15%;
    opacity: 0
}

#page2 .title {
    font-size: 231.82%
}

#page2 .sub-title {
    font-size: 225%
    margin-bottom: 1.92%
}

#page2 .summary {
    font-size: 100%;
    line-height: 1.5;
    margin-bottom: 3.85%
}



#page2 .btn-android,#page2 .btn-ios {
    position: absolute;
    left: 33.06%;
    top: 6.05%
}

#page2 .btn-ios {
    top: 52.56%
}

#page2 .hand2 {
    position: absolute;
    right: -0.78%;
    bottom: -30.56%;
    height: 100%;
    width: 39.64%;
    opacity: 0
}

#page2 .hand-in {
    position: absolute;
    top: 0;
    width: 100%;
    padding-bottom: 128.52%
}

#page2 .hand-img {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("../img/hand.png") no-repeat right bottom;
    background-size: 100% auto;
    z-index: 2
}

#page2 .iphone {
    width: 46.31%;
    left: 6.33%;
    bottom: 48.26%
}

#page2 .iphone-screen {
    background-image: url("../img/iphone-screen-cover.png")
}




#page3 {
    left: 0%;
    display: block
}

#page3 .page-text {
    width: 32.29%;
    top: 13.15%;
    opacity: 0
}

#page3 .title {
    font-size: 231.82%
}

#page3 .sub-title {
    font-size: 225%
    margin-bottom: 1.92%
}

#page3 .summary {
    font-size: 100%;
    line-height: 1.5;
    margin-bottom: 3.85%
}



#page3 .btn-android,#page3 .btn-ios {
    position: absolute;
    left: 33.06%;
    top: 6.05%
}

#page3 .btn-ios {
    top: 52.56%
}

#page3 .hand3 {
    position: absolute;
    right: -0.78%;
    bottom: -30.56%;
    height: 100%;
    width: 39.64%;
    opacity: 0
}

#page3 .hand-in {
    position: absolute;
    top: 0;
    width: 100%;
    padding-bottom: 128.52%
}

#page3 .hand-img {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("../img/hand.png") no-repeat right bottom;
    background-size: 100% auto;
    z-index: 2
}

#page3 .iphone {
    width: 46.31%;
    left: 6.33%;
    bottom: 48.26%
}

#page3 .iphone-screen {
    background-image: url("../img/iphone-screen-cover.png")
}









#page4 .page-text {
    width: 32.29%
}

#page4-iphone {
    width: 24.79%;
    right: 16.35%;
    top: -10.19%;
    opacity: 0
}

#page4-iphone .iphone-screen {
    background-image: url("../img/iphone-screen-hy1.jpg")
}

#page4-iphone .screen-expand {
    background-image: url("../img/iphone-screen-hy2.jpg");
    opacity: 0
}

#page4-iphone .iphone-flip-zoom {
    position: absolute;
    width: 59.03%;
    left: 10.71%;
    top: 76.94%;
    -webkit-box-shadow: 0 8px 15px rgba(0,0,0,0.45);
    -moz-box-shadow: 0 8px 15px rgba(0,0,0,0.45);
    -o-box-shadow: 0 8px 15px rgba(0,0,0,0.45);
    box-shadow: 0 8px 15px rgba(0,0,0,0.45);
    border-radius: 50%;
    opacity: 0;
    -moz-transform: scale(0.2, 0.2);
    -webkit-transform: scale(0.2, 0.2);
    transform: scale(0.2, 0.2)
}

#page4-iphone .iphone-flip-zoom .zoom-in {
    width: 100%;
    padding-bottom: 100%;
    background-image: url("../img/flip-zoom-3.png");
    background-repeat: no-repeat;
    background-size: 100% auto
}

#page5 .page-text {
    width: 24.48%
}

#page5-devices-demo {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 55.57%
}

#page5-android {
    position: absolute;
    width: 34.21%;
    right: 7.69%;
    top: 34.91%;
    opacity: 0;
    z-index: 2
}

#page5-android .in {
    width: 100%;
    padding-bottom: 156%;
    background: url("../img/android.png") no-repeat;
    background-size: 100% auto
}

#page5-mac {
    position: absolute;
    width: 92.22%;
    right: 17.43%;
    top: 17.04%;
    opacity: 0
}

#page5-mac .in {
    width: 100%;
    padding-bottom: 73.47%;
    background: url("../img/mac.png") no-repeat;
    background-size: 100% auto
}

#page5-iphone {
    width: 28.02%;
    right: 92.17%;
    top: 30.46%;
    opacity: 0
}

#page5-iphone .iphone-screen {
    background-image: url("../img/iphone-screen-read.png")
}

#page6-wrap {
    position: absolute;
    width: 31.88%;
    height: 57.41%;
    left: 48%;
    margin-left: -10.94%;
    top: 15.74%;
    text-align: center
}

#page6-text {
    position: relative;
    left: 0;
    color: #FFF;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 3.55%;
    height: auto;
    width: auto;
    margin-bottom: 6.45%;
    *zoom:1}

#page6-text .title {
    font-size: 180%;
    margin-bottom: 1.61%;
    opacity: 0;
    *zoom:1}

#page6-text .sub-title {
    font-size: 120%;
    letter-spacing: .2em;
    opacity: 0;
    *zoom:1}

#page6-text .line {
    width: 30.95%;
    height: 2px;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    display: block;
    position: absolute;
    background-color: rgba(0,0,0,0.5);
    bottom: -1px;
    left: 50%;
    margin-left: -15.48%;
    *zoom:1}

#page6-download {
    text-align: center;
    *zoom:1;font-size: 0
}

#page6-download .qrcode {
    width: 44.05%;
    margin: 0 auto 9.52%;
    *zoom:1}

#page6-download .btn-android,#page6-download .btn-ios {
    position: relative;
    padding-bottom: 16.67%;
    width: 64.29%;
    overflow: hidden;
    vertical-align: top;
    line-height: 100%;
    *zoom:1}

#page6-download .btn-ios {
    margin-top: 4.32%
}

.pop-download {
    position: fixed;
    display: none;
    left: 50%;
    top: 79%;
    background-color: #fff;
    width: 740px;
    height: 220px;
    margin: -221.5px 0 0 -370px;
    box-shadow: 0 0 10px rgba(0,0,0,0.75)
}

.pop-download .close {
    position: absolute;
    right: -39px;
    top: -32px;
    width: 80px;
    height: 80px;
    background-position: 0 0;
    overflow: hidden;
    display: block;
    cursor: pointer
}

.download-type-nav {
    border-bottom: 1px solid #dbdbdb;
    padding: 39px 0;
    height: 120px
}

.download-type-nav li {
    border-right: 1px dashed #d8d8d8;
    width: 246px;
    float: left;
    *display: inline;
    height: 120px;
    text-align: center;
    position: relative;
    cursor: pointer
}

.download-type-nav li.last {
    border-right: 0 none
}

.download-type-nav li .arrow {
    position: absolute;
    display: none;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    border-left: 5px dashed transparent;
    border-right: 5px dashed transparent;
    border-bottom: 5px solid #dbdbdb;
    left: 50%;
    margin-left: -2px;
    bottom: -39px
}

.download-type-nav li .d-type-icon {
    display: inline-block;
    overflow: hidden;
    margin-top: 18px;
    height: 83px;
    line-height: 9999em;
    background-position: 0 0
}

.download-type-nav li .d-android {
    width: 52px;
    background-position: 0 -151px
}

.download-type-nav li .d-iphone {
    width: 48px;
    background-position: -57px -151px
}

.download-type-nav li .d-ipad {
    width: 48px;
    background-position: -110px -151px
}

.download-type-nav li.current .arrow {
    display: block
}

.download-type-nav li.current .d-android {
    background-position: 0 -239px
}

.download-type-nav li.current .d-iphone {
    background-position: -57px -239px
}

.download-type-nav li.current .d-ipad {
    background-position: -110px -239px
}

.download-type-content {
    height: 209px;
    background-color: #f4f4f4;
    padding: 35px 45px 0;
    color: #666
}

.download-type-content .d-qrcode {
    float: left;
    width: 147px
}

.download-type-content .d-qrcode img {
    vertical-align: top
}

.download-type-content .d-qrcode span {
    display: block;
    text-align: center;
    font-size: 12px;
    height: 30px;
    line-height: 30px
}

.download-type-content .d-download-area {
    float: left;
    *display: inline;
    width: 352px;
    margin: 0 18px 0 46px
}

.download-type-content .d-download-area h3 {
    font-size: 14px;
    padding: 12px 0;
    font-weight: normal
}

.download-type-content .d-download-area .d-btn {
    display: block;
    width: 220px;
    height: 58px;
    line-height: 58px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #64bef2;
    color: #fff;
    box-shadow: 0 4px 0 0 #4da7db;
    text-align: center;
    font-size: 14px;
    text-decoration: none;
    margin-bottom: 29px;
    cursor: pointer
}

.download-type-content .d-download-area .d-btn:active {
    background-color: #4da7db
}

.download-type-content .d-download-area .d-btn .d-b-icon {
    display: inline-block;
    overflow: hidden;
    width: 38px;
    height: 33px;
    vertical-align: middle;
    margin-right: 10px;
    background-position: 0 -80px
}

.download-type-content .d-download-area .d-btn .d-b-apple {
    width: 28px;
    height: 34px;
    background-position: -48px -80px
}

.download-type-content .d-download-area .d-btn span {
    vertical-align: middle;
    display: inline-block
}

.download-type-content .d-download-area .tip {
    border-top: 1px dashed #d8d8d8;
    padding-top: 22px;
    font-size: 18px
}

.download-type-content .d-download-area .tip a {
    color: #fd5151;
    text-decoration: none
}

.download-type-content .d-download-area .tip a:hover {
    text-decoration: underline
}

.download-type-content .d-other-download {
    float: left;
    width: 186px
}

.download-type-content .d-other-download .o-btn {
    display: block;
    width: 184px;
    height: 38px;
    line-height: 38px;
    font-size: 12px;
    text-decoration: none;
    background: url(#);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f2f2f2));
    background-image: -webkit-linear-gradient(top, #f9f9f9, #f2f2f2);
    background-image: -moz-linear-gradient(top, #f9f9f9, #f2f2f2);
    background-image: -o-linear-gradient(top, #f9f9f9, #f2f2f2);
    background-image: linear-gradient(top, #f9f9f9, #f2f2f2);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr="#FFF9F9F9", EndColorStr="#FFF2F2F2");
    border: 1px solid #dbdbdb;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    color: #666;
    margin-bottom: 14px;
    cursor: pointer
}

.download-type-content .d-other-download .o-btn i {
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    margin: 0 10px 0 15px;
    background-position: 0 0
}

.download-type-content .d-other-download .o-btn .yyb {
    background-position: 0 -120px
}

.download-type-content .d-other-download .o-btn .zs360 {
    background-position: -35px -120px
}

.download-type-content .d-other-download .o-btn .qq {
    background-position: -68px -120px
}

.download-type-content .d-other-download .o-btn span {
    display: inline-block;
    vertical-align: middle
}

#J_pop_startup {
    height: 294px;
    margin-top: -147px;
    color: #333
}

.startup-helper {
    padding: 0 45px 60px
}

.startup-helper .sTit {
    font-size: 22px;
    font-weight: normal;
    text-align: center;
    border-bottom: 1px solid #ebebeb;
    padding: 30px 0
}

.startup-helper .sDes {
    margin: 40px 0;
    font-size: 14px;
    color: #666;
    text-align: center
}

.startup-helper .pBtn {
    text-align: center
}

.startup-helper .pBtn a {
    display: inline-block;
    margin: 0 14px;
    overflow: hidden;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    vertical-align: top
}

.startup-helper .pBtn .d-btn {
    width: 220px;
    height: 40px;
    line-height: 40px;
    background-color: #6be373;
    color: #fff;
    box-shadow: 0 3px 0 0 #5bc262
}

.startup-helper .pBtn .d-btn:active {
    background-color: #5bc262
}

.startup-helper .pBtn .d-btn .d-b-icon {
    display: inline-block;
    overflow: hidden;
    width: 26px;
    height: 30px;
    vertical-align: middle;
    margin-right: 10px;
    background-position: -85px -80px
}

.startup-helper .pBtn .d-btn span {
    vertical-align: middle;
    display: inline-block
}

.startup-helper .pBtn .y-btn {
    width: 218px;
    height: 41px;
    line-height: 41px;
    border: 1px solid #dbdbdb;
    color: #333
}

@media (min-width: 480px) and (max-width: 600px) {
    body {
        font-size:55%
    }
}

@media (min-width: 600px) and (max-width: 1024px) {
    body {
        font-size:55%
    }
}

@media (min-width: 800px) and (max-width: 1024px) {
    body {
        font-size:68%
    }
}

@media (min-width: 1024px) and (max-width: 1280px) {
    body {
        font-size:86%
    }
}

@media (min-width: 1280px) and (max-width: 1366px) {
    body {
        font-size:87.5%
    }
}

@media (min-width: 1366px) and (max-width: 1440px) {
    body {
        font-size:100%
    }
}

@media (min-width: 1440px) and (max-width: 1680px) {
    body {
        font-size:112.5%
    }
}

@media (min-width: 1680px) and (max-width: 1921px) {
    body {
        font-size:137.5%
    }
}

@media (min-width: 1921px) and (max-width: 2560px) {
    body {
        font-size:150%
    }
}

@media (min-width: 2560px) {
    body {
        font-size:180%
    }
}

@media (min-aspect-ratio: 16 / 5) {
    body {
        font-size:85%
    }

    #page1 .page-text {
        width: 25%
    }

    .hand {
        width: 20% !important
    }

	 .hand2 {
        width: 20% !important
    }

	.hand3 {
        width: 20% !important
    }

	#page2 .page-text {
        width: 25%
    }


	#page3 .page-text {
        width: 25%
    }

    #page4-iphone {
        width: 14.01%
    }

    #page5-devices-demo {
        width: 31.56%
    }

    #page6-wrap {
        width: 13.54%;
        margin-left: -6.77%
    }
}

@media (min-aspect-ratio: 16 / 6) and (max-aspect-ratio: 16 / 5) {
    body {
        font-size:112.5%
    }

    #page1 .page-text {
        width: 28%
    }

    .hand {
        width: 22% !important
    }

    #page2 .page-text {
        width: 28%
    }

    .hand2 {
        width: 22% !important
    }

    #page3 .page-text {
        width: 28%
    }

    .hand3 {
        width: 22% !important
    }

    #page4-iphone {
        width: 15.52%
    }

    #page5-devices-demo {
        width: 33.96%
    }

    #page6-wrap {
        width: 15.63%;
        margin-left: -7.81%
    }
}

@media (min-aspect-ratio: 16 / 7) and (max-aspect-ratio: 16 / 6) {
    .hand {
        width:26% !important
    }

    .hand2 {
        width:26% !important
    }

    .hand3 {
        width:26% !important
    }

    #page4-iphone {
        width: 18.49%
    }

    #page5-devices-demo {
        width: 42.5%
    }

    #page6-wrap {
        width: 18.49%;
        margin-left: -9.24%
    }
}

@media (min-aspect-ratio: 16 / 8) and (max-aspect-ratio: 16 / 7) {
    .hand {
        width:31% !important
    }

    .hand2 {
        width:31% !important
    }

    .hand3 {
        width:31% !important
    }

    #page4-iphone {
        width: 21.2%
    }

    #page5-devices-demo {
        width: 48.54%
    }

    #page6-wrap {
        width: 20.83%;
        margin-left: -10.42%
    }
}
