html, body {
            background: #000000;
            padding: 0;
            border: 0;
            margin: 0;
            position: relative;
            -ms-touch-action: none;            
            moz-user-select: -moz-none;
            -moz-user-select: none;
            -o-user-select:none;
            -khtml-user-select:none;
            -webkit-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        body{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .m-loading,.m-video,.share{
            position:absolute;
            left: 50%;
            top: 50%;
            width: 1624px;
            height: 750px;
            z-index: 3;
            margin: -375px 0 0 -812px;
            color: #ffffff;
            transition:opacity .5s ease;     
            -webkit-transform:rotateZ(90deg);
            transform:rotateZ(90deg);   
            background-color: #000000; 
        }
        .share {
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden; /* Chrome 和 Safari */
            -moz-backface-visibility: hidden; /* Firefox */
            -ms-backface-visibility: hidden; /* Internet Explorer */
            -webkit-perspective: 0;
            visibility: visible;
            z-index: 10;
        }
        .m-loading{
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden; /* Chrome 和 Safari */
            -moz-backface-visibility: hidden; /* Firefox */
            -ms-backface-visibility: hidden; /* Internet Explorer */
            -webkit-perspective: 0;
            visibility: visible;
        }
        .m-loading.hide{
            opacity: 0;
        }
        canvas{
            z-index: 0;
        }
        .m-loading.horizontal{
            -webkit-transform:rotateZ(0deg);
            transform:rotateZ(0deg);  
        }
        .m-video.horizontal{
            top:auto;
            bottom:0;
            -webkit-transform:rotateZ(0deg);
            transform:rotateZ(0deg);  
        }
        .m-video{
            z-index: 2;
        }
        .u-progress-number{
            position: absolute;
            width: 100px;
            height: auto;
            left: 50%;
            top: 50%;
            margin-top: 100px;
            margin-left: -50px;
            text-align: center;  
            font-size: 30px;          
        }
        .u-progress-number.anim{
            animation: numberflash 2s .5s infinite;
        }
        @keyframes numberflash{
            0%,20%,40%,100%{
                background-color: #000000;
                color: #ffffff
            }
            10%,30%{
                background-color: #ffffff;
                color: #000000
            }
        }
        .u-progress-p{
            position: absolute;
            width: 100%;
            height: auto;
            left: 0;
            top: 50%;
            margin-top: 160px;
            text-align: center;            
            font-size: 20px;
            opacity: 0;
            transition:opacity .3s ease;
        }
        .u-progress-p.show{
            opacity: 1;
        }
        @keyframes animRight{
            0%{
                background-position-x: 0;
            }
            100%{
                background-position-x: 100%;
            }
        }
        @-webkit-keyframes animRight{
            0%{
                background-position-x: 0;
            }
            100%{
                background-position-x: 100%;
            }
        }
        .loading-icon{
            display: block;
            position: absolute;
            width: 188px;
            height: 188px;
            left: 50%;
            top:50%;
            margin: -104px 0 0 -94px;
            animation: animRight 1s steps(7,end) infinite;
            background-image: url(http://game.gtimg.cn/images/mt4/cp/a20180606mt4role/loading_icon.jpg);
            filter: brightness(.9);
            -webkit-filter: brightness(.9);
            transition: transform .2s linear, filter .5s ease-in-out;
            animation: float 3s ease-in-out infinite,animRight 1s steps(11,end) infinite;
            will-change: margin;
        }
        @keyframes float{
            0%,100%{
                margin-top: -104px;
            }
            50%{
                margin-top: -110px;
            }
        }
        .m-info {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
        }

        .spr {
            background-image: url('http://game.gtimg.cn/images/mt4/cp/a20180606mt4role/spr.png');
            background-repeat: no-repeat;
            background-size: 1024px 1024px;
        }

        .logo {
            width: 218px;
            height: 152px;
            display: block;
            background-position: -699px -2px;
            position: absolute;
            left: 20px;
            top: 28px;
        }

        .qrcode-p {
            width: 125px;
            height: 60px;
            font-size: 22px;
            color: #ffffff;
            text-align: center;
            position: absolute;
            left: 40px;
            bottom: 160px;
        }

        .qecode-img {
            background: url(http://game.gtimg.cn/images/mt4/cp/a20180606mt4role/resource/qrcode.jpg);
            width: 101px;
            height: 101px;
            transform: scale(1.2346);
            position: absolute;
            left: 50px;
            bottom: 50px;
        }

        .music-btn {
            display: block;
            position: absolute;
            right: 40px;
            top: 40px;
            width: 90px;
            height: 90px;
        }

        .music-off, .music-on {
            display: block;
            width: 90px;
            height: 90px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .music-off {
            background-position: -623px -358px;
        }

        .music-on {
            background-position: -921px -2px;
        }

        .picchange-btn {
            display: block;
            width: 104px;
            height: 220px;
            position: absolute;
            right: 34px;
            top: 150px;
            z-index: 5;
        }

        .picchange-xs, .picchange-mb {
            display: block;
            width: 104px;
            height: 220px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .picchange-xs {
            background-position: -508px -487px;
        }

        .picchange-mb {
            background-position: -616px -487px;
        }

        .p1 {
            position: absolute;
            width: auto;
            color: #d68a38;
            font-size: 24px;
            font-weight: bold;
            top: 50%;
            left: 50%;
            margin-top: -261px;
        }

        .role-pic {
            display: block;
            position: absolute;
            left: 50%;
            margin-left: -10px;
            top: 50%;
            margin-top: -222px;
        }

        .role-fs {
            background-position: -371px -352px;
            width: 248px;
            height: 131px
        }

        .role-ms {
            background-position: -373px -217px;
            width: 250px;
            height: 131px
        }

        .role-wy {
            background-position: -2px -756px;
            width: 249px;
            height: 123px
        }

        .role-yx {
            background-position: -254px -487px;
            width: 250px;
            height: 129px
        }

        .role-zs {
            background-position: -2px -622px;
            width: 246px;
            height: 130px
        }

        .role-zss {
            background-position: -:2px -352px;
            width: 365px;
            height: 131px
        }

        .role-ck {
            background-position: -2px -487px;
            width: 248px;
            height: 131px
        }

        .role-dly {
            background-position: -:2px -217px;
            width: 367px;
            height: 131px
        }
        .p2{
            position: absolute;
            width: 693px;
            height: 211px;
            background-position: -2px -2px;
            left: 50%;
            top: 50%;
            margin-top: -74px;
            font-size: 24px;
            color: #fffbdd;
            text-align: justify;
            box-sizing: border-box;
            padding-right: 223px;
            padding-top: 10px;
            line-height: 1.35;
        }
        .btn-atd{
            display: block;
            width: 301px;
            height: 95px;
            background-position: -2px -883px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: 180px;
        }
        .pic-in{
            opacity: 0;
            animation: picIn .3s ease;
            animation-fill-mode: forwards;
        }
        .pic-out{
            opacity: 1;
            animation: picOut .3s ease;
            animation-fill-mode: forwards;
        }
        @keyframes picIn {
            0%{
                opacity: 0;
                transform: scale(1.2);
            }
            100%{
                opacity: 1;
                transform: scale(1);
            }
        }
        @keyframes picOut {
            0%{
                opacity: 1;
                transform: scale(1);
            }
            100%{
                opacity: 0;
                transform: scale(.8);
            }
        }