* {
    padding: 0;
    margin: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    touch-action:none;
    -webkit-touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

body,
html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: PingFangSC-Light, 'helvetica neue', arial, 'hiragino sans gb', 'microsoft yahei ui', 'microsoft yahei', simsun, sans-serif;
    background-color: #000;

}

ul,
li {
    list-style: none;
    margin: 0px;
}

video {
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 914px;
    z-index: 1;
    display: block;
    transform: translate3d(-50%,-50%,0);
    -webkit-transform: translate3d(-50%,-50%,0);
}


.IIV::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button {
    opacity: 0;
    pointer-events: none;
    width: 5px;
}

img {
    width: 100%;
}

.page-loading{position: absolute;width: 100%;height: 100%;z-index: 9999999;top: 0;background-size: cover;}

@keyframes up {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 0;
        transform: translate3d(0, -50%, 0);
    }
}

@-webkit-keyframes up {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 0;
        transform: translate3d(0, -50%, 0);
    }
}

@keyframes down {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 0;
        transform: translate3d(0, 50%, 0);
    }
}

@-webkit-keyframes down {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 0;
        transform: translate3d(0, 50%, 0);
    }
}

.wrap_person {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.video_box {
    position: absolute;
    width: 94%;
    height: 90%;
    left: 50%;
    margin-left: -47%;
    top: 1%;
}

.video_frame {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2;
    pointer-events: none;
}

.item.pre {
    z-index: 888;
}

.item:not(:nth-child(1)).active {
    position: absolute;
    left: 0;
    z-index: 999;
    -webkit-animation: sup 1s both;
    -o-animation: sup 1s both;
    animation: sup 1s both;
}

.item:first-child.active {
    position: absolute;
    left: 0;
    z-index: 999;
}

@-webkit-keyframes sup {
    from {
        top: 100%;
    }
    to {
        top: 0;
    }
}

.item:not(:last-child).down {
    position: absolute;
    left: 0;
    z-index: 999;
    -webkit-animation: tdown .6s both;
    -o-animation: tdown .6s both;
    animation: tdown .6s both;
}

.item,
.wrap {
    width: 100%;
    height: 100%;
    position: relative;
}

.item {
}

@-webkit-keyframes tdown {
    from {
        top: -100%;
    }
    to {
        top: 0;
    }
}
.dk_box{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9999;
    top: 0;
    display: none;
}
.fx{
    position: absolute;
    z-index: 999999999999999;
    left:0;
    top:0;
    width:100%;
    height: 100%;

    background-size: 100% 100%;
    display: none;
   
    background-position: 50% 5%;
}

.scales{
    transform-origin:50% 50%;
    -webkit-transform-origin:50% 50%;
    animation: scales 1.5s linear 0s infinite alternate;
    -webkit-animation: scales 1.5s linear 0s infinite alternate;
}
@-webkit-keyframes scales {
    from {
        transform: scale(1,1);
        -webkit-transform: scale(1,1);
    }
    to {
        transform: scale(1.1,1.1);
        -webkit-transform: scale(1.1,1.1);
    }
}
@-webkit-keyframes scales2 {
    from {
        transform: scale(0.8,0.8);
        -webkit-transform: scale(0.8,0.8);
    }
    to {
        transform: scale(1,1);
        -webkit-transform: scale(1,1);
    }
}

.video_img{    position: absolute;
    z-index: 999;
    width: 100%;
    height: 100%;}
canvas{
    position: absolute;
    width: 35%;

    top: 0%;
    z-index: 1;
    transform: translate3d(-50%,0%,0);
    -webkit-transform: translate3d(-50%,0%,0);
    left: 50%;
}
.load{
    position: absolute;
    width:100%;
    height: 100%;
    left:0;
    top:0;

}
.load img{
    width: 100%;
    height: 100%;
}
.session1{
    background: white;
    background-size: 100% 100%;
}
.index{
    position: absolute;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
    z-index:2;
}
.index img{
    height: 100%;
}

.play_btn{
    position: absolute;
    width: 180px;
    height: 180px;
    background-size: contain;
    background: url("../images/play_btn.png") no-repeat;
    background-position: 50% 50%;

    left: 50%;
    margin-left: -11%;
    top: 84%;
    z-index: 2;
    opacity: 0.8;
    transform-origin:50% 50%;
    -webkit-transform-origin:50% 50%;
    transform: scale(0.9,0.9);
    -webkit-transform: scale(0.9,0.9);
    z-index: 99999999;

}
.play_btn img{
    pointer-events: none;
}
.replay{
    position: absolute;
    width: 30%;
    left: 15%;
    top: 88%;
    z-index:9999999999999999;
    display: none;

}
.share{
    position: absolute;
    width: 30%;
    top: 88%;
    right: 15%;
    z-index: 99999999999999999;
    display: none;
}
.play_btn.active{
    animation: scales2 1.5s linear 0s infinite alternate;
    -webkit-animation: scales2 1.5s linear 0s infinite alternate;
}
.replay.active{
    animation: fadeInUp 0.8s linear 0s 1 normal forwards;
    -webkit-animation: fadeInUp 0.8s linear 0s 1 normal forwards;
}
.share.active{
    animation: fadeInUp 0.8s linear 0s 1 normal forwards;
    -webkit-animation: fadeInUp 0.8s linear 0s 1 normal forwards;
}
.tip{
    position: absolute;
    width: 10%;
    right: 4%;
    top: 4%;
}
.end{
    position: absolute;
    width:100%;
    height: 100%;
    left: 0;
    top:0;
    z-index: 999;
    display: none;
}
.end img{
    height: 100%;
}