body, html {
    margin:0;
    padding:0;
    overflow:hidden;
    height:100%;
}
div {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}
.position {
    width: 0;
    height: 0;
    overflow: visible;
}
.center {
    left:0;right:0;top:0;bottom:0;
    margin:auto;
}
.left-top {
    left:0;top:0;
    -webkit-transform-origin:left top;
    transform-origin:left top;
}
.right-top {
    right: 0;
    top: 0;
    -webkit-transform-origin: right top;
    transform-origin: right top;
}
.left-bottom {
    left: 0;
    bottom: 0;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
}

.right-bottom {
    right: 0;
    bottom: 0;
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
}
#show {
    width:100%;
    height:100%;
}

#bg1 {
    width: 100%;
    height: 100%;
    background-image: url('../image/bg1.jpg');
    top:0;
}
#bg2 {
    width: 100%;
    height: 100%;
    background-color:#000;
    top: 0;
    opacity: 0;
    -webkit-transition: all 1s;
    transition: all 1s;
}

#bg2.in {
    opacity: 1;
}
#bg3 {
    width: 100%;
    height: 100%;
    background-image: url('../image/bg5.jpg');
    top: 0;
    opacity: 0;
    -webkit-transition: all 1s;
    transition: all 1s;
}
    #bg3.in {
        opacity:1;
    }
#loading {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: all .5s;
    transition: all .5s;
    opacity: 1;
    z-index:999;
    top:0;
}
    #loading.out {
        opacity:0;
        pointer-events:none;
    }
    #loading .pic {
        width: 125px;
        height: 124.5px;
        background-image: url('../image/loading.png');
        left: -62.5px;
        top: -100px;
        -webkit-animation: r 8s linear infinite;
        animation: r 8s linear infinite;
    }
    #loading.out .pic {
        -webkit-animation: none;
        animation: none;
    }
@keyframes r {
    0% {
        transform: rotateZ(0deg) scale(1);
    }
    50% {
        transform: rotateZ(180deg) scale(1.2);
    }
    100% {
        transform: rotateZ(360deg) scale(1);
    }
}
@-webkit-keyframes r {
    0% {
        -webkit-transform: rotateZ(0deg) scale(1);
    }
    50% {
        -webkit-transform: rotateZ(180deg) scale(1.2);
    }
    100% {
        -webkit-transform: rotateZ(360deg) scale(1);
    }
}
#loading .text {
    width: 125px;
    height: 125px;
    line-height: 125px;
    font-size: 30px;
    text-align: center;
    color: #5aa8cd;
    text-shadow: 0 0 10px #5aa8cd;
    left: -62.5px;
    top: -72px;
}
    #loading .text2 {
        width:200px;
        height: 50px;
        line-height:20px;
        font-size: 13px;
        text-align: center;
        color: #5aa8cd;
        text-shadow: 0 0 5px #5aa8cd;
        left:-100px;
        top:30px;
    }
#logo {
    width: 67.5px;
    height: 29px;
    background-image: url('../image/logo.png');
    left:20px;
    top:20px;
}
#bgm_btn {
    width: 30px;
    height: 30px;
    right: 10px;
    top: 10px;
}
    #bgm_btn.on {
        background-image: url('../image/on.png');
    }
    #bgm_btn.off {
        background-image: url('../image/off.png');
    }
#p1 {
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all .5s;
    transition: all .5s;
}

    #p1.in {
        opacity: 1;
        pointer-events: all;
        -webkit-transition: all .5s .5s;
        transition: all .5s .5s;
    }
    #p1 .kv {
        width: 375px;
        height: 381px;
        background-image: url('../image/kv.jpg');
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0,-170px,0);
        transform: translate3d(-50%,-50%,0) translate3d(0,-170px,0);
    }

    #p1 .signs {
        top: 0;
        width: 375px;
        height: 603px;
        pointer-events: none;
        background-image: url('../image/sign99.png');
        -webkit-transform: translate3d(-50%,-50%,0);
        transform: translate3d(-50%,-50%,0);
    }
    #p1 #view {
        width: 400px;
        height: 400px;
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0,-170px,0);
        transform: translate3d(-50%,-50%,0) translate3d(0,-170px,0);
    }
    #p1 .box {
        -webkit-transform: scale(.95);
        transform: scale(.95);
        -webkit-transition: all .5s;
        transition: all .5s;
    }

    #p1.in .box {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: all 1s .5s;
        transition: all 1s .5s;
    }
    #p1 .pic {
        top: 0;
        width: 353px;
        height: 351.5px;
        background-image: url('../image/sign6.png');
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0,85px,0);
        transform: translate3d(-50%,-50%,0) translate3d(0,85px,0);
    }
    #p1 .title {
        width: 194px;
        height: 28px;
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0,-48px,0);
        transform: translate3d(-50%,-50%,0) translate3d(0,-48px,0);
        background-image: url('../image/text1.png');
    }
    #p1 .title2 {
        width: 257.5px;
        height: 37.5px;
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0,-14px,0);
        transform: translate3d(-50%,-50%,0) translate3d(0,-14px,0);
        background-image: url('../image/text2.png');
    }
    #p1 .text1 {
        width: 65px;
        height: 64px;
        background-image: url('../image/text_halo.png');
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(-105px,65px,0);
        transform: translate3d(-50%,-50%,0) translate3d(-105px,65px,0);
        overflow: visible;
    }
    #p1 .text2 {
        width: 65px;
        height: 64px;
        background-image: url('../image/text_halo.png');
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,65px,0);
        transform: translate3d(-50%,-50%,0) translate3d(0px,65px,0);
        overflow: visible;
    }
    #p1 .text3 {
        width: 65px;
        height: 64px;
        background-image: url('../image/text_halo.png');
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(105px,65px,0);
        transform: translate3d(-50%,-50%,0) translate3d(105px,65px,0);
        overflow: visible;
    }

    #p1 .halo {
        width: 65px;
        height: 64px;
        background-image: url('../image/text33.png');
    }
    #p1 .text1 .halo::after, #p1 .text2 .halo::after, #p1 .text3 .halo::after {
        content: "";
        position: absolute;
        width: 65px;
        height: 64px;
        background-image: url('../image/text33.png');
        background-size: cover;
    }
    #p1 .text1 .halo {
        background-image: url('../image/text3.png');
    }
    #p1 .text2 .halo {
        background-image: url('../image/text5.png');
    }
    #p1 .text3 .halo {
        background-image: url('../image/text7.png');
    }
    #p1.in .text1 .halo {
        -webkit-animation: halo 2.4s cubic-bezier(1,1,1,1) infinite;
        animation: halo 2.4s cubic-bezier(1,1,1,1) infinite;
    }
    #p1.in .text2 .halo {
        background-image: url('../image/text5.png');
        -webkit-animation: halo 2.4s cubic-bezier(1,1,1,1) .8s infinite;
        animation: halo 2.4s cubic-bezier(1,1,1,1) .8s infinite;
    }
    #p1.in .text3 .halo {
        background-image: url('../image/text7.png');
        -webkit-animation: halo 2.4s cubic-bezier(1,1,1,1) 1.6s infinite;
        animation: halo 2.4s cubic-bezier(1,1,1,1) 1.6s infinite;
    }

@keyframes halo {
    0% {
        transform: scale(1);
    }

    10% {
        transform: scale(1.3);
    }

    30% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes halo {
    0% {
        -webkit-transform: scale(1);
    }

    10% {
        -webkit-transform: scale(1.3);
    }
    30% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
#p1 .text4 {
    width: 100px;
    height: 100px;
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(-105px,130px,0) scale(.9);
    transform: translate3d(-50%,-50%,0) translate3d(-105px,130px,0) scale(.9);
    color: #5aa8cd;
    font-size: 10px;
    text-align: center;
    line-height: 1.5em;
}

#p1 .text5 {
    width: 120px;
    height: 100px;
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,130px,0) scale(.9);
    transform: translate3d(-50%,-50%,0) translate3d(0px,130px,0) scale(.9);
    color: #5aa8cd;
    font-size: 10px;
    text-align: center;
    line-height: 1.5em;
}

#p1 .text6 {
    width: 120px;
    height: 100px;
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(105px,130px,0) scale(.9);
    transform: translate3d(-50%,-50%,0) translate3d(105px,130px,0) scale(.9);
    color: #5aa8cd;
    font-size: 10px;
    text-align: center;
    line-height: 1.5em;
}

#p1 #next1 {
    width: 266.5px;
    height: 54px;
    background-image: url('../image/text9.png');
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,145px,0);
    transform: translate3d(-50%,-50%,0) translate3d(0px,145px,0);
}
    #p1 #next1 .halo {
        width: 266.5px;
        height: 54px;
        background-image: url('../image/text9_halo.png');
    }
#p1.in #next1 .halo {
    -webkit-animation: btn_halo 1s infinite;
    animation: btn_halo 1s infinite;
}
@keyframes btn_halo {
    0% {
        opacity:.5;
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:.5;
    }
}
@-webkit-keyframes btn_halo {
    0% {
        opacity: .5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .5;
    }
}

#p1 .text7 {
    width: 239px;
    height: 27px;
    background-image: url('../image/text10.png');
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,200px,0);
    transform: translate3d(-50%,-50%,0) translate3d(0px,200px,0);
}

#p1 .text8 {
    top: 0;
    width: 155px;
    height: 15px;
    background-image: url('../image/text11.png');
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,235px,0);
    transform: translate3d(-50%,-50%,0) translate3d(0px,235px,0);
}
#p1 .text9 {
    top: 0;
    width: 235px;
    height: 10px;
    background-image: url('../image/text12.png');
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,255px,0);
    transform: translate3d(-50%,-50%,0) translate3d(0px,255px,0);
}

#p1 .text10 {
    top: 0;
    width: 187.5px;
    height: 17.5px;
    background-image: url('../image/logos.png');
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(80px,285px,0);
    transform: translate3d(-50%,-50%,0) translate3d(80px,285px,0);
}

#p2 {
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all .5s;
    transition: all .5s;
}

    #p2.in {
        opacity: 1;
        pointer-events: all;
        -webkit-transition: all .5s .5s;
        transition: all .5s .5s;
    }

    #p2 .box {
        -webkit-transform: scale(.95);
        transform: scale(.95);
        -webkit-transition: all .5s;
        transition: all .5s;
    }
    #p2.in .box {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: all 1s .5s;
        transition: all 1s .5s;
    }
    #p2 .title {
        width: 123.5px;
        height: 30.5px;
        background-image: url('../image/text13.png');
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,-225px,0);
        transform: translate3d(-50%,-50%,0) translate3d(0px,-225px,0);
    }

    #p2 .title2 {
        width: 271px;
        height: 14.5px;
        background-image: url('../image/text14.png');
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,-195px,0);
        transform: translate3d(-50%,-50%,0) translate3d(0px,-195px,0);
    }

    #p2 .text1 {
        width: 267.5px;
        height: 12px;
        background-image: url('../image/text15.png');
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,-172px,0);
        transform: translate3d(-50%,-50%,0) translate3d(0px,-172px,0);
    }
    #p2 .slider {
        width: 341.5px;
        height: 184px;
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,-60px,0);
        transform: translate3d(-50%,-50%,0) translate3d(0px,-60px,0);
        /* display: none; */
    }
#p2 .bg1 {
    width: 341.5px;
    height: 184px;
    background-image: url('../image/bg2.png');
    opacity: 0;
    -webkit-transition: all opacity .5s;
    transition: all opacity .5s;
}
#p2 .bg2 {
    width: 341.5px;
    height: 184px;
    opacity: 0;
    background-image: url('../image/bg3.png');
    -webkit-transition: all opacity .5s;
    transition: all opacity .5s;
}
#p2 .bg1.in,#p2 .bg2.in{
    opacity: 1;
}
        #p2 .slider .item_2 {
            background-image: url('../image/p4.png');
        }

        #p2 .slider .item_1 {
            background-image: url('../image/p5.png');
        }

        #p2 .slider .item1 {
            background-image: url('../image/p1.png');
        }

        #p2 .slider .item2 {
            background-image: url('../image/p2.png');
        }

        #p2 .slider .item3 {
            background-image: url('../image/p3.png');
        }

        #p2 .slider .item_1, #p2 .slider .item_2, #p2 .slider .item1, #p2 .slider .item2, #p2 .slider .item3 {
            width: 341.5px;
            height: 184px;
            top: 0px;
            opacity:0;
        }

        #p2 .slider .item1 {
            opacity:1;
        }


    /* #p2 .slider2 {
        width: 341.5px;
        height: 184px;
        background-image: url('../image/bg2.png');
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,-60px,0);
        transform: translate3d(-50%,-50%,0) translate3d(0px,-60px,0);
    }

    #p2 .slider2 .item1 {
        background-image: url('../image/p4.png');
    }

    #p2 .slider2 .item2 {
        background-image: url('../image/p5.png');
    }

    #p2 .slider2 .item1, #p2 .slider2 .item2 {
        width: 341.5px;
        height: 184px;
        top: 0px;
        opacity: 0;
    }

        #p2 .slider2 .item1 {
            opacity: 1;
        } */


            #p2 .cover {
                width: 341.5px;
                height: 184px;
                background-image: url('../image/cover.png');
            }
    #p2 .slider .change1 {
        width: 107px;
        height: 31px;
        left: 64px;
    }
    #p2 .slider .change2 {
        width: 107px;
        height: 31px;
        left: 170px;
    }
    #p2 .next {
        width: 15px;
        height: 70px;
        right: 1px;
        top: 65px;
        background-image: url('../image/slide_arrow.png');
        background-size:9px 10px;
        background-position: center center;
    }
    #p2 .prev {
        width: 15px;
        height: 70px;
        left: 2px;
        top: 65px;
        background-image: url('../image/slide_arrow2.png');
        background-size: 9px 9px;
        background-position: center center;
    }
    #p2.in .next {
        -webkit-animation: sa .8s infinite;
        animation: sa .8s infinite;
    }
@keyframes sa {
    0% {
        transform:translate3d(-8px,0,0) scale(1);
        opacity:.5;
    }
    100% {
        transform:translate3d(1px,0,0) scale(1.2);
        opacity:1;
    }
}
@-webkit-keyframes sa {
    0% {
        transform: translate3d(-8px,0,0) scale(1);
        opacity:.5;
    }

    100% {
        transform: translate3d(1px,0,0) scale(1.2);
        opacity:1;
    }
}
#p2.in .prev {
    -webkit-animation: sa2 .8s infinite;
    animation: sa2 .8s infinite;
}

@keyframes sa2 {
    0% {
        transform: translate3d(8px,0,0) scale(1);
        opacity:.5;
    }

    100% {
        transform: translate3d(-1px,0,0) scale(1.2);
        opacity:1;
    }
}

@-webkit-keyframes sa2 {
    0% {
        transform: translate3d(8px,0,0) scale(1);
        opacity:.5;
    }

    100% {
        transform: translate3d(-1px,0,0) scale(1.2);
        opacity:1;
    }
}
    #p2 .vote {
        width: 336px;
        height: 170px;
        background-image: url('../image/bg4.png');
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,125px,0);
        transform: translate3d(-50%,-50%,0) translate3d(0px,125px,0);
    }
        #p2 .vote .text1 {
            width: 200px;
            height: 15px;
            background-image: url('../image/vote_text.png');
            -webkit-transform: translate3d(0,-40px,0);
            transform: translate3d(0,-40px,0);
            display: none;
        }

        #p2 .vote .yes {
            width: 88px;
            height: 86.5px;
            -webkit-transform: translate3d(-60px,24px,0);
            transform: translate3d(-60px,24px,0);
            display: none;
            overflow:visible;
        }
            #p2 .vote .yes .halo {
                width: 88px;
                height: 86.5px;
                background-image: url('../image/yes.png');
            }

        #p2 .vote .no {
            width: 88px;
            height: 86.5px;
            -webkit-transform: translate3d(60px,24px,0);
            transform: translate3d(60px,24px,0);
            display: none;
            overflow: visible;
        }
            #p2 .vote .no .halo {
                width: 88px;
                height: 86.5px;
                background-image: url('../image/no.png');
            }
#p2.in .vote .yes .halo {
    animation: halo 2.4s infinite;
}

#p2.in .vote .no .halo {
    animation: halo 2.4s .8s infinite;
}
#p2 .vote .yes_votes {
    width: 88px;
    height: 118.5px;
    line-height: 24px;
    text-align: center;
    color: #5aa8cd;
    font-size: 12px;
    -webkit-transform: translate3d(-60px,8px,0);
    transform: translate3d(-60px,8px,0);
    display: none;
    background-image: url('../image/vote1.png');
    box-sizing: border-box;
    padding-top: 55px;
}

#p2 .vote .no_votes {
    width: 88px;
    height: 118.5px;
    text-align: center;
    line-height: 24px;
    color: #eb0133;
    font-size: 12px;
    -webkit-transform: translate3d(60px,8px,0);
    transform: translate3d(60px,8px,0);
    display: none;
    background-image: url('../image/vote2.png');
    box-sizing: border-box;
    padding-top: 55px;
}
#p2 .vote span {
    font-size:18px;
}

.back {
    width: 141px;
    height: 39px;
    background-image: url('../image/back.png');
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(-80px,240px,0);
    transform: translate3d(-50%,-50%,0) translate3d(-80px,240px,0);
}

.go {
    width: 141px;
    height: 39px;
    background-image: url('../image/go.png');
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(80px,240px,0);
    transform: translate3d(-50%,-50%,0) translate3d(80px,240px,0);
}

#p3 {
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all .5s;
    transition: all .5s;
}

    #p3.in {
        opacity: 1;
        pointer-events: all;
        -webkit-transition: all .5s .5s;
        transition: all .5s .5s;
    }

    #p3 .box {
        -webkit-transform: scale(.95);
        transform: scale(.95);
        -webkit-transition: all .5s;
        transition: all .5s;
    }

    #p3.in .box {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: all 1s .5s;
        transition: all 1s .5s;
    }

    #p3 .title {
        width: 168px;
        height: 30px;
        background-image: url('../image/text16.png');
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,-225px,0);
        transform: translate3d(-50%,-50%,0) translate3d(0px,-225px,0);
    }

    #p3 .title2 {
        width: 286.5px;
        height: 14.5px;
        background-image: url('../image/text17.png');
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,-195px,0);
        transform: translate3d(-50%,-50%,0) translate3d(0px,-195px,0);
    }

    #p3 .text1 {
        width:271px;
        height: 12.5px;
        background-image: url('../image/text18.png');
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,-172px,0);
        transform: translate3d(-50%,-50%,0) translate3d(0px,-172px,0);
    }

    #p3 .questions {
        width: 340px;
        height: 221.5px;
        background-image: url('../image/bg6.png');
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,-40px,0);
        transform: translate3d(-50%,-50%,0) translate3d(0px,-40px,0);
    }
    #p3 .question1 {
        width: 165px;
        height: 12.5px;
        background-image: url('../image/q1.png');
        background-position: center bottom;
        bottom: 50px;
        left: 18px;
        opacity: 0;
        overflow: visible;
    }
        #p3 .question1 .text {
            width: 165px;
            height: 48.5px;
            background-image: url('../image/q1.png');
            background-position: center top;
            top: 0;
            right: 0;
            opacity: 0;
            -webkit-transform: translate3d(0,-48.5px,0);
            transform: translate3d(0,-48.5px,0);
        }
    #p3.in .question1 {
        height: 76.5px;
        opacity: 1;
        -webkit-transition: opacity .5s linear 1s,height 2s 1.5s;
        transition: opacity .5s linear 1s,height 2s 1.5s;
    }
        #p3.in .question1 .text {
            opacity: 1;
            -webkit-transition:opacity 1s 3.5s;
            transition:opacity 1s 3.5s;
        }
    #p3 .question2 {
        width: 12.5px;
        height: 94.5px;
        background-image: url('../image/q2.png');
        background-position: left center;
        bottom: 45px;
        left: 122px;
        opacity: 0;
        overflow: visible;
    }
        #p3 .question2 .text {
            width: 117px;
            height: 94.5px;
            background-image: url('../image/q2.png');
            background-position: right center;
            top: 0;
            right: 0;
            opacity: 0;
            -webkit-transform: translate3d(117px,0,0);
            transform: translate3d(117px,0,0);
        }
    #p3.in .question2 {
        width: 83.5px;
        opacity: 1;
        -webkit-transition: opacity .5s linear 1s,width 2s 1.5s;
        transition: opacity .5s linear 1s,width 2s 1.5s;
    }
    #p3.in .question2 .text {
        opacity: 1;
        -webkit-transition: opacity 1s 3.5s;
        transition: opacity 1s 3.5s;
    }
    #p3 .question3 {
        width: 12.5px;
        height: 51.5px;
        background-image: url('../image/q3.png');
        background-position: left bottom;
        background-size: 236px 51.5px;
        left: 86px;
        bottom: 30px;
        opacity: 0;
        overflow: visible;
    }
        #p3 .question3 .text {
            width: 154px;
            height: 51.5px;
            background-image: url(../image/q3.png);
            background-position: right top;
            background-size: 236px 51.5px;
            left: 0;
            top: 0;
            opacity: 0;
            -webkit-transform: translate3d(82px,0px,0);
            transform: translate3d(82px,0px,0);
        }
    #p3.in .question3 {
        width: 82px;
        opacity: 1;
        -webkit-transition: opacity .5s linear 1s,height 2s 1.5s,width 2s 1.5s;
        transition: opacity .5s linear 1s,height 2s 1.5s,width 2s 1.5s;
    }
    #p3.in .question3 .text {
        opacity: 1;
        -webkit-transition: opacity 1s 3.5s;
        transition: opacity 1s 3.5s;
    }

    #p3.in .text2 {
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,-20px,0) scale(1);
        transform: translate3d(-50%,-50%,0) translate3d(0px,-20px,0) scale(1);
        -webkit-transition: all .5s .75s;
        transition: all .5s .75s;
    }
    #p3 .added {
        width: 340px;
        height: 152px;
        background-image: url('../image/added.png');
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,135px,0);
        transform: translate3d(-50%,-50%,0) translate3d(0px,135px,0);
    }
#p4 {
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all .5s;
    transition: all .5s;
}

    #p4.in {
        opacity: 1;
        pointer-events: all;
        -webkit-transition: all .5s .5s;
    }

    #p4 .box {
        -webkit-transform: scale(.95);
        transform: scale(.95);
        -webkit-transition: all .5s;
        transition: all .5s;
    }

    #p4.in .box {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: all 1s .5s;
        transition: all 1s .5s;
    }

    #p4 .title {
        width: 123.5px;
        height: 30.5px;
        background-image: url('../image/text22.png');
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,-225px,0);
        transform: translate3d(-50%,-50%,0) translate3d(0px,-225px,0);
    }

    #p4 .title2 {
        width: 225px;
        height: 15px;
        background-image: url('../image/text23.png');
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,-195px,0);
        transform: translate3d(-50%,-50%,0) translate3d(0px,-195px,0);
    }

    #p4 .text1 {
        width: 271px;
        height: 12.5px;
        background-image: url('../image/text24.png');
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,-172px,0);
        transform: translate3d(-50%,-50%,0) translate3d(0px,-172px,0);
    }
    #p4 .tabs {
        width: 375px;
        height: 441px;
        top: -162px;
        left: -187.5px;
        overflow: auto;
    }

    #p4 .tab1 {
        position:relative;
        -webkit-transform: translate3d(0,145px,0);
        transform: translate3d(0,145px,0);
    }
        /*#p4 .tab1.in {
            opacity: 1;
        }*/
    #p4 .tab2 {
        position: relative;
        -webkit-transform: translate3d(0,585px,0);
        transform: translate3d(0,419px,0);
    }

        /*#p4 .tab2.in {
            opacity: 1;
        }*/
    #p4 .arrow {
        width: 22px;
        height: 30.5px;
        background-image: url('../image/arrow.png');
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,265px,0);
        transform: translate3d(-50%,-50%,0) translate3d(0px,265px,0);
    }
    #p4.in .arrow {
        animation: arrow 1s infinite;
        -webkit-animation: arrow 1s infinite;
    }
@keyframes arrow {
    0% {
        transform: translate3d(-50%,-50%,0) translate3d(0px,265px,0);
    }
    100% {
        transform: translate3d(-50%,-50%,0) translate3d(0px,275px,0);
    }
}
@-webkit-keyframes arrow {
    0% {
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,265px,0);
    }

    100% {
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,275px,0);
    }
}
    #p4 .title3 {
        width: 344px;
        height: 30.5px;
        background-image: url('../image/text25.png');
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,-130px,0);
        transform: translate3d(-50%,-50%,0) translate3d(0px,-130px,0);
    }
#p4 .title4 {
    width: 343px;
    height: 28px;
    background-image: url('../image/text26.png');
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,-130px,0);
    transform: translate3d(-50%,-50%,0) translate3d(0px,-130px,0);
}


    #p4 .x1 {
        width: 66px;
        height: 76.5px;
        background-image: url('../image/x5.png');
        -webkit-transform: translate3d(-50%,-50%,0) translate3d(-65px,-10px,0);
        transform: translate3d(-50%,-50%,0) translate3d(-65px,-10px,0);
        -webkit-transition: all .5s;
        transition: all .5s;
    }

#p4.in .x1 {
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(-97px,-60px,0);
    transform: translate3d(-50%,-50%,0) translate3d(-97px,-60px,0);
    -webkit-transition: all 1s 1s;
    transition: all 1s 1s;
}

#p4 .x2 {
    width: 66.5px;
    height: 76.5px;
    background-image: url('../image/x2.png');
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,-10px,0);
    transform: translate3d(-50%,-50%,0) translate3d(0px,-10px,0);
    -webkit-transition: all .5s;
    transition: all .5s;
}

#p4.in .x2 {
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,50px,0);
    transform: translate3d(-50%,-50%,0) translate3d(0px,50px,0);
    -webkit-transition: all 1s 1s;
    transition: all 1s 1s;
}
#p4 .x3 {
    width: 66.5px;
    height: 76.5px;
    background-image: url('../image/x3.png');
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(65px,-10px,0);
    transform: translate3d(-50%,-50%,0) translate3d(65px,-10px,0);
    -webkit-transition: all .5s;
    transition: all .5s;
}

#p4.in .x3 {
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(100px,-60px,0);
    transform: translate3d(-50%,-50%,0) translate3d(100px,-60px,0);
    -webkit-transition: all 1s 1s;
    transition: all 1s 1s;
}

#p4 .x4 {
    width: 66.5px;
    height: 76.5px;
    background-image: url('../image/x4.png');
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(-32px,46px,0);
    transform: translate3d(-50%,-50%,0) translate3d(-32px,46px,0);
    -webkit-transition: all .5s;
    transition: all .5s;
}

#p4.in .x4 {
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(-97px,154px,0);
    transform: translate3d(-50%,-50%,0) translate3d(-97px,154px,0);
    -webkit-transition: all 1s 1s;
    transition: all 1s 1s;
}
    /**/
#p4 .x5 {
    width: 66.5px;
    height: 76.5px;
    background-image: url('../image/x1.png');
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(32px,46px,0);
    transform: translate3d(-50%,-50%,0) translate3d(32px,46px,0);
    -webkit-transition: all .5s;
    transition: all .5s;
}

#p4.in .x5 {
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(100px,154px,0);
    transform: translate3d(-50%,-50%,0) translate3d(100px,154px,0);
    -webkit-transition: all 1s 1s;
    transition: all 1s 1s;
}
#p4 .x6 {
    width: 326.5px;
    height: 259px;
    background-image: url('../image/x6.png');
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(-11px,115px,0);
    transform: translate3d(-50%,-50%,0) translate3d(-11px,115px,0);
    opacity: 0;
    -webkit-transition: all .5s;
    transition: all .5s;
}

    #p4.in .x6 {
        opacity: 1;
        -webkit-transition: all 1s 2s;
        transition: all 1s 2s;
    }
#p4 .h {
    width: 324px;
    height: 547px;
    background-image: url(../image/h.png);
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(0px,160px,0);
    transform: translate3d(-50%,-50%,0) translate3d(0px,160px,0);
    -webkit-transition: all .5s;
    transition: all .5s;
    background-position: 0 0;
}

#p4 .tab2.step2 .h {
    background-position: 0 -260px;
}
#p4 .tab2 .back {
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(-80px,460px,0);
    transform: translate3d(-50%,-50%,0) translate3d(-80px,0,0);
}
#p4 .tab2 .go {
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(80px,460px,0);
    transform: translate3d(-50%,-50%,0) translate3d(80px,0,0);
}

.s_item1 {
    width: 53px;
    height: 52.5px;
    background-image: url('../image/sign5.png');
    top: 65px;
    left: -20px;
    pointer-events: none;
}

.s_item2 {
    width: 92.5px;
    height: 92px;
    background-image: url('../image/sign1.png');
    top: -25px;
    left: -75px;
    pointer-events: none;
}
.s_item3 {
    width: 22.5px;
    height: 22px;
    background-image: url('../image/s8.png');
    top: 5px;
    left: -125px;
    pointer-events: none;
}
.s_item4 {
    width: 13.5px;
    height: 13.5px;
    background-image: url('../image/s10.png');
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    top: 65px;
    left: -85px;
    pointer-events: none;
}
.s_item5 {
    width: 22.5px;
    height: 22px;
    background-image: url('../image/s8.png');
    -webkit-transform: scale(.4);
    transform: scale(.4);
    top: 70px;
    left: -75px;
    pointer-events: none;
}
.s_item6 {
    width: 22.5px;
    height: 22px;
    background-image: url('../image/s8.png');
    -webkit-transform: scale(.4);
    transform: scale(.4);
    top: 68px;
    left: -50px;
    pointer-events: none;
}

.s_item7 {
    width: 29.5px;
    height: 35.5px;
    background-image: url('../image/s2.png');
    top: -220px;
    left: -5px;
    pointer-events: none;
}
.s_item8 {
    width: 41px;
    height: 33.5px;
    background-image: url('../image/s1.png');
    top: -195px;
    left: 20px;
    pointer-events: none;
}
.s_item9 {
    width: 18.5px;
    height: 19px;
    background-image: url('../image/s4.png');
    top: -115px;
    left: 107px;
    pointer-events: none;
}
.s_item10 {
    width: 17px;
    height: 17.5px;
    background-image: url('../image/s12.png');
    top: -185px;
    left: -85px;
    pointer-events:none;
}

.ss2 .right-top{
    -webkit-transform: translate3d(20px,-20px,0) rotateZ(-20deg);
    transform: translate3d(20px,-20px,0) rotateZ(-20deg);
    opacity: 0;
    -webkit-transition: all .5s;
    transition: all .5s;
}

.in .ss2 .right-top {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
    -webkit-transition: all 1s .5s;
    transition: all 1s .5s;
}

.ss3 .left-bottom {
    opacity: 0;
    -webkit-transform: translate3d(-20px,0px,0);
    transform: translate3d(-20px,0px,0);
    -webkit-transition: all 1s .5s;
    transition: all 1s .5s;
}

.in .ss3 .left-bottom {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    -webkit-transition: all .5s .5s;
    transition: all .5s .5s;
}

.ss4 .right-bottom {
    -webkit-transform: translate3d(20px,20px,0);
    transform: translate3d(20px,20px,0);
    opacity: 0;
    -webkit-transition: all .5s;
    transition: all .5s;
}
.in .ss4 .right-bottom {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
    -webkit-transition: all .5s .5s;
    transition: all .5s .5s;
}
.s_item11 {
    width: 13.5px;
    height: 13.5px;
    background-image: url('../image/s10.png');
    -webkit-transform: scale(.5);
    transform: scale(.5);
    top: -155px;
    left: -35px;
    pointer-events: none;
}