* {
    margin: 0;
    padding: 0;
}

html, body ,#app{
    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:first-child {
    /* background-color: #7B68EE; */
    background: radial-gradient(circle at 50% 50%,rgba(61, 63, 66, 1),rgba(45, 48, 51, 1),rgba(20, 23, 27, 1));
}

.page:nth-child(2) {
    /* background-color: #00BFFF; */
    background: radial-gradient(circle at 50% 50%,rgba(61, 63, 66, 1),rgba(45, 48, 51, 1),rgba(20, 23, 27, 1));
}

.page:nth-child(3) {
    /* background-color: #ff8c81; */
    background: radial-gradient(circle at 50% 50%,rgba(61, 63, 66, 1),rgba(45, 48, 51, 1),rgba(20, 23, 27, 1));
}

.page:last-child {
    background-color: #40E0D0;
}

.title {
    width: 100%;
    text-align: center;
    opacity: 0;
    color: white;
    font-size: 28px;
    font-weight: bold;
}
.subtitle {
    width: 100%;
    padding-top: 20px;
    color: rgba(255, 255, 255, 0.8);
    opacity: 0;
}

.arrow{
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 33px;
    height: 18px;
    margin-left: -16px;
    background: url(../img/arrow.png) no-repeat;
    background-size: 33px auto;
    opacity: 0;
}

.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);
    }
}

.current .title{
    -webkit-animation: slideToTop .8s ease both;
}

.current .subtitle{
    -webkit-animation: slideToTop .8s 0.3s ease both;
}

/* 自定义样式 */
.sub-w{
    width: 80%;
    margin: auto;
}
.sub-tit{
    color: white;
    font-size: 20px;
    font-weight: 600;
    margin-top: 0px!important;
    margin-bottom: 0px!important;
}
.sub-txt{
    font-size: 14px;
    line-height: 30px;
}
.pd-40{
    padding-top: 40px;
    padding-bottom: 20px;
}

.pd-b-50{
    padding-bottom: 50px;
}
.pd-b-80{
    padding-bottom: 80px;
}