body,html {
    height: 100%;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent
}

body {
    font-family: Sans-serif;
    background-color: #061825
}

body,dd,dl,h2,h3,p,ul {
    margin: 0
}

dd,dl,ul {
    padding: 0
}

li {
    list-style: none
}

a {
    text-decoration: none
}

img {
    border: none
}

.loading .con,.loading .con .line {
    position: absolute;
    border-radius: 2.5px
}

video {
    object-fit: cover
}

.loading {
    background: url(../i/loadBg.png) 50% 50%/cover;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10
}

.loading .con {
    font-size: 20px;
    color: #fff;
    bottom: 5%;
    left: 50%;
    margin-left: -25%;
    width: 50%;
    height: 5px;
    background-color: #000
}

.loading .con .line {
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #fff
}

.load_1,.load_2,.loading .txt {
    left: 50%;
    position: absolute
}

.loading .txt {
    font-size: 20px;
    color: #fff;
    top: 70%;
    transform: translate(-50%,-50%)
}

.load_1 {
    width: 60%;
    margin-left: -30%;
    top: 15%
}

.load_2 {
    width: 50px;
    margin-left: -25px;
    top: 35%;
    animation: rota_o 1s ease infinite
}

.load_3 {
    position: absolute;
    width: 60px;
    right: -20px;
    bottom: 0
}

.myVideo_play{
    position: absolute;
    width: 50px;
    height: 50px; 
    right: 10px;
    bottom: 10px;
    display: none;
    z-index: 1000
}

.myVideo_play_box {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    /* right: 0; */
    /* bottom: 0; */
    left: 0;
    z-index: 10;
    background-image: url(../i/daoshi3.jpg);
    background-size: cover;
    background-position: top center;
    display: none
}

.myVideo_play_box #androidPlay {
    position: absolute;
    width: 50px;
    height: 50px; 
    right: 10px;
    bottom: 10px;
    background-image: url(../i/play.png);
    background-size: cover
}

.videoBox,.videoBox .myVideo {
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 1
}

.mask{
    position: absolute;
    z-index: 3;
    left:0;
    top:0;    
    width: 100%;
    height: 100%;     
}

.other{
    position: absolute;
    z-index: 2;
    left:0;
    top:0;    
    width: 100%;
    height: 100%;     
}
.othermask{
    position: absolute;
    left:0;
    top:0;    
    width: 100%;
    height: 100%;     
}

.videoclose {
    position: absolute;
    right: 40px;
    top: 30px;
    width: 20px;
    z-index: 10;
    display: none;
}

.videoback {
    position: absolute;
    left: 20px;
    top: 50%;
    margin-top:-20px;
    width: 34px;
    z-index: 10;
    display: none;
}

.end .re {
    position: absolute;
    width: 140px;
    left: 50%;
    margin-left: -183px;
    top: 77%;
    filter: brightness(0.1);
}

.end .sh {
    position: absolute;
    width: 140px;
    left: 50%;
    margin-left: 59px;
    top: 77%;
    filter: brightness(0.1);
}
.end .pop {
    top: 0;
    right: 0;
    left: 0;
    display: none;
    position: absolute;
    bottom: 0;
    background: url(../i/icon.png) top left/20% no-repeat rgba(0,0,0,.7);
}

@media only screen and (device-width:375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
    body {
        font-family: Sans-serif
    }
}

@media only screen and (device-width:812px) and (device-height:375px) and (-webkit-device-pixel-ratio:3) {
    body {
        font-family: Sans-serif
    }
}

@media only screen and (device-width:414px) and (device-height:896px) and (-webkit-device-pixel-ratio:3) {
    body {
        font-family: Sans-serif
    }
}

@media only screen and (device-width:896px) and (device-height:414px) and (-webkit-device-pixel-ratio:3) {
    body {
        font-family: Sans-serif
    }
}

@-moz-keyframes rota_o {
    0%,100% {
        transform: none
    }

    70% {
        transform: rotate(30deg)
    }
}

@-webkit-keyframes rota_o {
    0%,100% {
        transform: none
    }

    70% {
        transform: rotate(30deg)
    }
}

@-o-keyframes rota_o {
    0%,100% {
        transform: none
    }

    70% {
        transform: rotate(30deg)
    }
}

@keyframes rota_o {
    0%,100% {
        transform: none
    }

    70% {
        transform: rotate(30deg)
    }
}

@-moz-keyframes fingerHandle {
    0%,100% {
        transform: none
    }

    70% {
        transform: scale3d(.8,.8,.8) translate(-10px)
    }
}

@-webkit-keyframes fingerHandle {
    0%,100% {
        transform: none
    }

    70% {
        transform: scale3d(.8,.8,.8) translate(-10px)
    }
}

@-o-keyframes fingerHandle {
    0%,100% {
        transform: none
    }

    70% {
        transform: scale3d(.8,.8,.8) translate(-10px)
    }
}

@keyframes fingerHandle {
    0%,100% {
        transform: none
    }

    70% {
        transform: scale3d(.8,.8,.8) translate(-10px)
    }
}