@media screen and (max-width: 800px) {
    body {
        margin: auto;
        width: 100%;
        height: 100%;
        font-size: 16px;
        /* color: #000; */
        line-height: 24px;
        /* background-color: #000; */
        min-height: 100%;
        font-family: 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
        /* overflow-x: hidden;
        overflow-y: auto; */
        cursor: pointer;
    }

    .letterPic {
        width: 100%;
    }

    .music {
        width: 8vw;
        height: 8.1vw;
        position: fixed;
        top: 9.2vw;
        right: 6.2vw;
        /* background-position: -75.9vw 0; */
        display: none;
        z-index: 99999999;
        transform: rotate(0deg);
        /* background-image: url(../images/musicon.png); */
        background-repeat: no-repeat;
        background-size: 100%;
    }

}

@media screen and (min-width: 900px) {
    body {
        margin: auto;
        width: 20%;
        height: 78%;
        font-size: 16px;
        /* color: #000; */
        line-height: 24px;
        /* background-color: #000; */
        /* min-height: 100%; */
        font-family: 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
        cursor: pointer;
    }

    .letterPic {
        width: 20%;
    }

    .couldL {
        width: 20%;
    }

    .couldR {
        width: 20%;
    }

    .music {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 50px;
        right: 50px;
        /* background-position: -75.9vw 0; */
        display: none;
        z-index: 99999999;
        transform: rotate(0deg);
        background-image: url(../images/musicon.png);
        background-repeat: no-repeat;
        background-size: 100%;
    }
}

html {
    width: 100%;
    -webkit-text-size-adjust: none;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

/* 图片预加载 */
.loading {
    display: none;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.loading_bg {
    position: absolute;
    background-image: url(../images/loading.jpg);
    height: 100%;
    width: 100%;
    background-size: 100% 100%;
    background-position: center;
}

.loading_logo {
    position: absolute;
    background-image: url(../images/loading-logo.png);
    height: 100%;
    width: 100%;
    background-size: 100% 100%;
    background-position: center;
}

.loading_progress {
    position: absolute;
    width: 100px;
    height: 30px;
    top: -9%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: emoji;
    font-size: 18px;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

}

/* 快进按钮 */


/* 滚动条显示 */
.longpic {
    width: 100%;
    margin: auto;
    height: 100%;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    overflow-x: hidden;
    /* display: none; */
}

/* 过渡元素平移动画 */
.couldL {
    display: none;
}

.couldR {
    display: none;
}

/* 左一 */
@keyframes couldL {
    0% {
        transform: translate(-390px, 0px);
    }

    100% {
        transform: translate(0px, 0px);
    }

}

@-webkit-keyframes couldL {
    0% {
        transform: translate(-390px, 0px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@-moz-keyframes couldL {
    0% {
        transform: translate(-390px, 0px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

/* 左二 */
@keyframes couldLA {
    0% {
        transform: translate(0px, 0px);
    }

    100% {
        transform: translate(-390px, 0px);
    }

}

@-webkit-keyframes couldLA {
    0% {
        transform: translate(0px, 0px);
    }

    100% {
        transform: translate(-390px, 0px);
    }

}


@-moz-keyframes couldLA {
    0% {
        transform: translate(0px, 0px);
    }

    100% {
        transform: translate(-390px, 0px);
    }

}


/* 右一 */
@keyframes couldR {
    0% {
        transform: translate(390px, 0px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@-webkit-keyframes couldR {
    0% {
        transform: translate(390px, 0px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@-moz-keyframes couldR {
    0% {
        transform: translate(390px, 0px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

/* 右二 */
@keyframes couldRA {
    0% {
        transform: translate(0px, 0px);
    }

    100% {
        transform: translate(390px, 0px);
    }
}

@-webkit-keyframes couldRA {
    0% {
        transform: translate(0px, 0px);
    }

    100% {
        transform: translate(390px, 0px);
    }
}

@-moz-keyframes couldRA {
    0% {
        transform: translate(0px, 0px);
    }

    100% {
        transform: translate(390px, 0px);
    }
}




/* 元素隐藏 */
.Next1 {
    display: none;
}

.Next2 {
    display: none;
}

.Next3 {
    display: none;
}

.Next4 {
    display: none;
}

.text-01 {
    display: none;
}

.text-02 {
    display: none;
}

.text-03 {
    display: none;
}

.text-04 {
    display: none;
}

.text-05 {
    display: none;
}

.text-06 {
    display: none;
}

.text-07 {
    display: none;
}

.text-08 {
    display: none;
}

.text-09 {
    display: none;
}

.text-10 {
    display: none;
}

.text-11 {
    display: none;
}

.text-12 {
    display: none;
}

.text-13 {
    display: none;
}

.text-14 {
    display: none;
}

.text-15 {
    display: none;
}

.text-16 {
    display: none;
}

.text-17 {
    display: none;
}

.text-18 {
    display: none;
}

.text-19 {
    display: none;
}

.text-20 {
    display: none;
}

.text-23 {
    display: none;
}

.text-24 {
    display: none;
}

.text-25 {
    display: none;
}

.text-26 {
    display: none;
}

.text-27 {
    display: none;
}

.text-28 {
    display: none;
}

.text-29 {
    display: none;
}

@keyframes opacity {
    0% {
        opacity: 0;
    }


    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 1;
    }
}

@-moz-keyframes opacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}



/* 人物进场 */
/* 一屏 */
@keyframes mymove1 {
    0% {
        transform: translate(-33%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@-webkit-keyframes mymove1 {
    0% {
        transform: translate(-33%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@-moz-keyframes mymove1 {
    0% {
        transform: translate(-33%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes mymove2 {
    0% {
        transform: translate(40%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@-webkit-keyframes mymove2 {
    0% {
        transform: translate(40%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@-moz-keyframes mymove2 {
    0% {
        transform: translate(40%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes mymove3 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-33%, 0);
    }
}

@-webkit-keyframes mymove3 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-33%, 0);
    }
}

@-moz-keyframes mymove3 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-33%, 0);
    }
}

@keyframes mymove4 {
    0% {
        transform: translate(0%, 0);
    }

    100% {
        transform: translate(40%, 0);
    }
}

@-webkit-keyframes mymove4 {
    0% {
        transform: translate(0%, 0);
    }

    100% {
        transform: translate(40%, 0);
    }
}

@-moz-keyframes mymove4 {
    0% {
        transform: translate(0%, 0);
    }

    100% {
        transform: translate(40%, 0);
    }
}

/* 二屏 */
@keyframes mymove5 {
    0% {
        transform: translate(24%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@-webkit-keyframes mymove5 {
    0% {
        transform: translate(24%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@-moz-keyframes mymove5 {
    0% {
        transform: translate(24%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes mymove6 {
    0% {
        transform: translate(-77%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@-webkit-keyframes mymove6 {
    0% {
        transform: translate(-77%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@-moz-keyframes mymove6 {
    0% {
        transform: translate(-77%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes mymove7 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(40%, 0);
    }
}

@-webkit-keyframes mymove7 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(40%, 0);
    }
}

@-moz-keyframes mymove7 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(40%, 0);
    }
}

@keyframes mymove8 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-77%, 0);
    }
}

@-webkit-keyframes mymove8 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-77%, 0);
    }
}

@-moz-keyframes mymove8 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-77%, 0);
    }
}

/* 三屏 */
@keyframes mymove9 {
    0% {
        transform: translate(-43%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@-webkit-keyframes mymove9 {
    0% {
        transform: translate(-43%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@-moz-keyframes mymove9 {
    0% {
        transform: translate(-43%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes mymove10 {
    0% {
        transform: translate(-77%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@-webkit-keyframes mymove10 {
    0% {
        transform: translate(-77%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@-moz-keyframes mymove10 {
    0% {
        transform: translate(-77%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes mymove11 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-43%, 0);
    }
}

@-webkit-keyframes mymove11 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-43%, 0);
    }
}

@-moz-keyframes mymove11 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-43%, 0);
    }
}

@keyframes mymove12 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-77%, 0);
    }
}

@-webkit-keyframes mymove12 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-77%, 0);
    }
}

@-moz-keyframes mymove12 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-77%, 0);
    }
}

/* 四屏 */
@keyframes mymove13 {
    0% {
        transform: translate(36%, 0);
    }

    100% {
        transform: translate(0%, 0);
    }
}

@-webkit-keyframes mymove13 {
    0% {
        transform: translate(36%, 0);
    }

    100% {
        transform: translate(0%, 0);
    }
}

@-moz-keyframes mymove13 {
    0% {
        transform: translate(36%, 0);
    }

    100% {
        transform: translate(0%, 0);
    }
}

@keyframes mymove14 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(36%, 0);
    }
}

@-webkit-keyframes mymove14 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(36%, 0);
    }
}

@-moz-keyframes mymove14 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(36%, 0);
    }
}

/* 五屏 */
@keyframes mymove15 {
    0% {
        transform: translate(0, 100%);
    }

    100% {
        transform: translate(0, 0);
    }
}

@-webkit-keyframes mymove15 {
    0% {
        transform: translate(0, 100%);
    }

    100% {
        transform: translate(0, 0);
    }
}

@-moz-keyframes mymove15 {
    0% {
        transform: translate(0, 100%);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes mymove16 {
    0% {
        transform: translate(0, -100%);
    }

    100% {
        transform: translate(0, 0);
    }
}

@-webkit-keyframes mymove16 {
    0% {
        transform: translate(0, -100%);
    }

    100% {
        transform: translate(0, 0);
    }
}

@-moz-keyframes mymove16 {
    0% {
        transform: translate(0, -100%);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes mymove17 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(0, 100%);
    }
}

@-webkit-keyframes mymove17 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(0, 100%);
    }
}

@-moz-keyframes mymove17 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(0, 100%);
    }
}

@keyframes mymove18 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(0, -100%);
    }
}

@-webkit-keyframes mymove18 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(0, -100%);
    }
}

@-moz-keyframes mymove18 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(0, -100%);
    }
}




.longpic img {
    /* height: 100%; */
    width: 100%;
    margin-bottom: -10px;
}

.longpic .long {
    /* height: 100%; */
    width: 100%;
    overflow: hidden;
    position: relative;
}

.longpic .long img {
    width: 100%;
}

.front {
    top: 0%;
    left: 0%;
}

.picaction {
    position: absolute;
    cursor: pointer;
}


/* 渐显效果 */



/* @keyframes opacity2 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: .2;
    }

    40% {
        opacity: .4;
    }

    60% {
        opacity: .6;
    }

    80% {
        opacity: .8;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes opacity2 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: .2;
    }

    40% {
        opacity: .4;
    }

    60% {
        opacity: .6;
    }

    80% {
        opacity: .8;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes opacity2 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: .2;
    }

    40% {
        opacity: .4;
    }

    60% {
        opacity: .6;
    }

    80% {
        opacity: .8;
    }

    100% {
        opacity: 1;
    }
} */