/* global */
* {
    margin: 0;
    padding: 0;
}

html, body {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
    -webkit-overflow-scrolling: touch;
}

[full] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

[bz100] {
    background-size: 100% 100%;
}

[abs] {
    position: absolute;
    background-size: 100% 100%;
}

[none] {
    display: none
}

[block] {
    display: block !important;
}

[op0] {
    opacity: 0
}

.icon-music {
    position: fixed;
    z-index: 10;
    width: 25px;
    height: 25px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAABYCAMAAAC56eXkAAAAyVBMVEUAAAD///////////////////////////////////////////////////////////////9mZmb////JyclqamqwsLD5+Pj/AADg4OCqqqqYmJiUlJR+fn7l5eWJiYlxcXF2dnbAwMD3BQW4uLidnZ2LTU3d29t+Vlb/+fn08/Pt6+vW1tZxX194WlrgLCzBKSl7e3uFUVH5JSXZGhrhExPpDw/wDg7Q0NDOvLyEeXn/RESeQEDIJSX/5ub/1dXKmpqkh4frOjr/FRXXEkcDAAAAEXRSTlMA9YZI+u3Xu7KpWFIjC9HQlkVYV/IAAAIcSURBVEjH7JXLjoIwFIa5yM17P4GAgEA0JurG3bz/m80QmWlpweB+/h3k6+npuVqaNq4T+t5i4fmh426sd3IjG0V25E6iqx2GdqtRdB0AkCVFWcdxXRZJBkCwNtmlDaRJIxQ1SQrYS511APJYaIpzAGfI7oHqJEZ0qoC9bvcgJnQY2l4CrZhUC/z5vbZ1u6Zt+zcmAVS6sfSoflYQ9LkA9Ld9cR28EnhlZwe5cbH2L4dtx7qQxiMwhRrvFLo6iSARJqz5lkD0U5M2NCPw4z64sAF703mRjQWrjKtB7LPODweSMfgoahj64VghFOOwuKpwAaHlQzkBJypcgm95UE/A7U1I1eBZC4gn4PNFjTQs3sGx0OFpNzppbkw/sJfywLHQPYunhNXQmUm5VEAqYSUpRrpbXpKwTLdeSBd6ybDJQtJL9Eav0vAiMoqfXg/JqcVvbdUWOgNAJo/LtjIb9nxP00we1hrWHAWmKgg+HjLzx9f8wfjpyJ0/zOeviQ8XkKnVdtZqm78056/j/9393V6d4zAMw0AUPcb0AhyqkC1YcgRvWe9/qNBdyp82MOsPYrr373bbD3ZnbdjurNBRu3dvod1x8JbavSqM0O6l6v2Adh8b7tDueVUzaHcqaj20O00qT2h3f1W5Qbu9nWZo99EmaLc11QTttqC6QLvHoOEC7fb2FaHdnf+N0G5vd2q3txnbvXnL7bbT7tPur/sATOTe1FoIROoAAAAASUVORK5CYII=") no-repeat 0 -25px;
    background-size: 25px 50px;
    -webkit-transform: scale(2, 2);
    display: none
}

.icon-music.top {
    top: 40px
}

.icon-music.bottom {
    bottom: 40px
}

.icon-music.left {
    left: 40px
}

.icon-music.right {
    right: 40px
}

.icon-music.on {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAABYCAMAAAC56eXkAAAAyVBMVEUAAAD///////////////////////////////////////////////////////////////9mZmb////JyclqamqwsLD5+Pj/AADg4OCqqqqYmJiUlJR+fn7l5eWJiYlxcXF2dnbAwMD3BQW4uLidnZ2LTU3d29t+Vlb/+fn08/Pt6+vW1tZxX194WlrgLCzBKSl7e3uFUVH5JSXZGhrhExPpDw/wDg7Q0NDOvLyEeXn/RESeQEDIJSX/5ub/1dXKmpqkh4frOjr/FRXXEkcDAAAAEXRSTlMA9YZI+u3Xu7KpWFIjC9HQlkVYV/IAAAIcSURBVEjH7JXLjoIwFIa5yM17P4GAgEA0JurG3bz/m80QmWlpweB+/h3k6+npuVqaNq4T+t5i4fmh426sd3IjG0V25E6iqx2GdqtRdB0AkCVFWcdxXRZJBkCwNtmlDaRJIxQ1SQrYS511APJYaIpzAGfI7oHqJEZ0qoC9bvcgJnQY2l4CrZhUC/z5vbZ1u6Zt+zcmAVS6sfSoflYQ9LkA9Ld9cR28EnhlZwe5cbH2L4dtx7qQxiMwhRrvFLo6iSARJqz5lkD0U5M2NCPw4z64sAF703mRjQWrjKtB7LPODweSMfgoahj64VghFOOwuKpwAaHlQzkBJypcgm95UE/A7U1I1eBZC4gn4PNFjTQs3sGx0OFpNzppbkw/sJfywLHQPYunhNXQmUm5VEAqYSUpRrpbXpKwTLdeSBd6ybDJQtJL9Eav0vAiMoqfXg/JqcVvbdUWOgNAJo/LtjIb9nxP00we1hrWHAWmKgg+HjLzx9f8wfjpyJ0/zOeviQ8XkKnVdtZqm78056/j/9393V6d4zAMw0AUPcb0AhyqkC1YcgRvWe9/qNBdyp82MOsPYrr373bbD3ZnbdjurNBRu3dvod1x8JbavSqM0O6l6v2Adh8b7tDueVUzaHcqaj20O00qT2h3f1W5Qbu9nWZo99EmaLc11QTttqC6QLvHoOEC7fb2FaHdnf+N0G5vd2q3txnbvXnL7bbT7tPur/sATOTe1FoIROoAAAAASUVORK5CYII=") 0 0;
    background-size: 100%;
    -webkit-animation: music linear 3s infinite
}

.icon-arrow {
    position: fixed;
    bottom: 40px;
    left: 50%;
    opacity: 0;
    z-index: 10;
    margin: 0 0 0 -25px;
    display: none;
    width: 50px;
    height: 35px;
    background: url(../images/sprites_common.png) no-repeat;
    background-size: 100%
}

.icon-arrow.animate {
    -webkit-animation: arrow 3000ms ease infinite
}

.icon-arrow:after {
    content: "";
    position: absolute;
    left: -10px;
    right: -10px;
    top: -10px;
    bottom: -10px;
    z-index: 10
}

.pop-loading{position:fixed;z-index:999;left:0;right:0;top:0;bottom:0;width:100%;height:100%;background-color:#000;text-align:center}

.pop-loading-cnt{ position:fixed;left:42%;top:46%;display:block;width:128px;height:15px;background:#000000 url(../images/load5.gif) no-repeat center center;background-size:100%; }
.pop-loading-logo{position: fixed;left:44%;top:34%;margin: 0px 0 0 0px;display: block;width:100px;height:100px;background: url(../images/load.png);background-size: 100% 100%;z-index:5;}
.pop-loading-word{position: fixed;left:45%;top:800px;margin: 0px 0 0 0px;display:block;width:100px;height:100px;font-size:20px;color:#fff;z-index:5;}
.copy{position:fixed;width:100%;text-align:center;bottom:30px;color: #000;font-size:22px;text-decoration:none;z-index:999}

.tips_icon {
    position: absolute;
    left: 330px;
    top: 500px;
    width: 122px;
    height: 101px;
    -webkit-animation: shake ease 6s infinite;
}

.tips_txt {
    position: absolute;
    left: 218px;
    width: 311px;
    top: 674px;
    height: 32px;
}

.pop-loading-cnt {
    top: 49%;
}
@-webkit-keyframes arrow {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0)
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -25px, 0)
    }
}

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

@keyframes arrow {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0)
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -25px, 0)
    }
}

@keyframes music {
    from {
        -webkit-transform: scale(2, 2) rotate(0deg);
    }
    to {
        -webkit-transform: scale(2, 2) rotate(360deg);
    }
}

/* Animate Hack */

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}

@keyframes flipInX {
    from {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 1;
    }

    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        animation-timing-function: ease-in;
    }

    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        opacity: 1;
        transform: perspective(400px);
    }
}

@-webkit-keyframes fadeInDownBig {
    from {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

@keyframes run {
    0% {
        transform: translate(300px,-1500px) rotate(30deg);
    }
    99% {
        transform: translate(0, 0px) rotate(30deg);
    }
    100%{
        opacity: 0;
        transform: translate(0, 0px) rotate(30deg);
    }
}
@keyframes piao {
    0%{
        -webkit-transform: translate(0,0);
    }
    50%{
        -webkit-transform: translate(0,50px);
    }
    100%{
        -webkit-transform: translate(0,0);
    }
}
@-webkit-keyframes yu1 {
    0%{
        -webkit-transform: translate(0,0) rotate(35deg);
    }
    99%{
        -webkit-transform: translate(-400px,1500px) rotate(35deg);
    }
    100%{
        opacity: 0;
        -webkit-transform: translate(-400px,1500px) rotate(35deg);
    }
}
.long-page {
    background-image: url("../images/bg.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 750px;
    height: 19822px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}
.flash{
    -webkit-animation: fadeInLeft 2s .1s forwards, flash 2s 2s infinite;
}
.flash2{
    -webkit-animation:  flash 3s 0s infinite;
}
.fadeInDown {
    -webkit-animation: fadeInDown 2s .1s forwards;
}
.fadeInDown2 {
    -webkit-animation: fadeInDown 2s .1s forwards,piao 5s 2s infinite;
}
.fadeInRight {
    -webkit-animation: fadeInRight 2s .0s forwards;
}

.fadeInLeft {
    -webkit-animation: fadeInLeft 2s .0s forwards;
}
.fadeIn2{
    -webkit-animation: fadeIn 2s .5s forwards;
}
.fadeInUp {
    -webkit-animation: fadeInUp 2s .0s forwards;
}

.flipInX {
    -webkit-animation: flipInX 2s .1s forwards;
}

.zoomIn {
    -webkit-animation: zoomIn 2s .1s forwards;
}

.fadeIn {
    -webkit-animation: fadeIn 2s .1s forwards;
}

.fadeInDownBig {
    -webkit-animation: fadeInDownBig 5s linear infinite;
}
.piao{
    -webkit-animation: piao 5s linear infinite;
}
.long-page div {
    /*display: block;*/
    /*opacity: 0;*/
}
/*.mask{
    overflow-x: hidden;
    width:787px;
    height:1266px;
    background: url("../images1/mask.png") no-repeat;
    background-size: 100%;
}*/


.m_1 {
    background-image: url("../images/m_1.png");
    position: absolute;
    left: 183px;
    top: 159px;
    width: 377px;
    height: 118px;
    z-index: 10;
}
.m_2 {
    background-image: url("../images/m_2.png");
    position: absolute;
    left: 207px;
    top: 456px;
    width: 316px;
    height: 285px;
    z-index: 9;
}
.m_3 {
    background-image: url("../images/m_3.png");
    position: absolute;
    left: -35px;
    top: 665px;
    width: 405px;
    height: 361px;
    z-index: 6;
}
.m_4 {
    background-image: url("../images/m_4.png");
    position: absolute;
    left: 281px;
    top: 983px;
    width: 241px;
    height: 177px;
    z-index: 7;
}
.m_5 {
    background-image: url("../images/m_5.png");
    position: absolute;
    left: 376px;
    top: 956px;
    width: 136px;
    height: 102px;
    z-index: 1;
}
.lvse{
    mix-blend-mode: screen;
}
.multiply{
    mix-blend-mode: multiply;
}

.fei{
    -webkit-animation: fei 10s linear infinite;
}
@keyframes fei {
    0%{
        opacity: 1;
        transform: translate(200px,100px);
    }
    100%{
        opacity: 1;
        transform: translate(-600px,-200px);
    }
}