* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.page-wrap {
    width: 100%;
    height: 100%;
}

.page {
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

.page {
    background-color: #fff;
}

.title {
    width: 100%;
    text-align: center;
    color: #000;
    font-size: 18px;
    opacity: 0;
}

.subtitle {
    width: 100%;
    text-align: center;
    color: #000;
    font-size: 16px;
    opacity: 0;
}

.arrow{
    position: absolute;
    left: 50%;
    bottom: 15px;
    width: 3rem;
    height: 1.2rem;
    margin-left: -25px;
    background: url(../img/arrow.png) no-repeat;
    background-size: 50px auto;
    opacity: 1;
}

.arrow-h{
    position: absolute;
    right: 10px;
    top: 50%;
    width: 33px;
    height: 18px;
    margin-top: -9px;
    opacity: 0;
}

.arrow-h i{
    display: block;
    width: 33px;
    height: 18px;
    background: url(../img/arrow.png) no-repeat;
    background-size: 33px auto;
    -webkit-transform: rotate(-90deg);
}

.current .arrow {
    -webkit-animation: swipeMoveTop 1.5s 1s ease infinite;
}

.current .arrow-h {
    -webkit-animation: swipeMoveLeft 1.5s 1s ease infinite;
}

/*上滑提示*/
@-webkit-keyframes swipeMoveTop {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 10px, 0);
    }
    70% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -10px, 0);
    }
}

/*左滑提示*/
@-webkit-keyframes swipeMoveLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(10px, 0, 0);
    }
    70% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(-10px, 0, 0);
    }
}

@-webkit-keyframes slideToTop {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100px, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
    }
}
.page{
    background-size:contain;
    background-repeat:no-repeat;
    background-position: center center;
}
.soundIcon{width:2.2rem;height:2.2rem;background:url('../img/musicOn.png?v=201605161742') no-repeat;background-size:100%;position:absolute;top:20px;right: 10px;}
.soundIconHide{display:none!important}
.soundIconPlay{animation:bgRotate 1.2s infinite linear;-o-animation:bgRotate 1.2s infinite linear;-moz-animation:bgRotate 1.2s infinite linear;-webkit-animation:bgRotate 1.2s infinite linear}
.soundIconOff{background-image:url('../img/musicOff.png?v=201605161742');animation:initial;-o-animation:initial;-moz-animation:initial;-webkit-animation:initial}
@keyframes bgRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@-webkit-keyframes bgRotate{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}
@-moz-keyframes bgRotate{from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}}@-o-keyframes bgRotate{from{-o-transform:rotate(0deg)}to{-o-transform:rotate(360deg)}}