body,
canvas,
html {
    margin: 0;
    padding: 0
}

body,
html {
    height: 100%;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #000
}

body {
    position: relative;
    width: 100%;
    height: 100%
}

.hiden {
    display: none
}

.h5-sound {
    position: absolute;
    right: 2%;
    top: 1%;
    background-size: auto 60%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-image: url(static/css/i/sound_on.png);
    width: 18%;
    height: 9%;
    z-index: 1
}

.h5-sound.off {
    background-image: url(static/css/i/sound_off.png)
}

#video,
.p0 {
    width: 100%;
    height: 100%
}

.p0 {
    background-color: #222;
    position: absolute;
    z-index: 100;
    color: #fff
}

.p0 .loading-ico {
    width: 100%;
    height: 40%;
    background-image: url(static/css/i/loading.gif);
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: 50%;
    margin-top: 30%
}

.p0 .loading-txt {
    text-align: center;
    position: absolute;
    width: 100%;
    top: 45%
}

.p1 {
    width: 100%;
    height: 100%;
    background-color: #000;
    background-image: url(static/css/i/p1_bg.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: relative;
    background-position-y: 70%
}

.p1 .logo {
    position: absolute;
    width: 20%;
    height: 20%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    right: 5%;
    top: 3%
}

.p1 .btn {
    height: 55%;
    top: 15%
}

.p1 .bottom,
.p1 .btn {
    width: 100%;
    position: absolute
}

.p1 .bottom {
    bottom: 0;
    height: 30%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(static/css/i/p1_bottom.png)
}

.p1_1 {
    width: 100%;
    height: 100%;
    background-color: #000;
    position: absolute
}

.p1_1 .jump {
    position: absolute;
    z-index: 1;
    right: 7%;
    color: #fff;
    top: 4%
}

.p2 {
    width: 100%;
    height: 100%;
    background-color: #000;
    background-image: url(static/css/i/p2_bg.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: relative
}

.p2 .panel {
    background-image: url(static/css/i/p2_panel.png);
    background-size: 100% 100%;
    left: 4%;
    width: 92%;
    height: 80%
}

.p2 .panel,
.p2 .panel .txt {
    position: absolute;
    background-repeat: no-repeat
}

.p2 .panel .txt {
    width: 74%;
    height: 54%;
    top: 34%;
    left: 13%;
    overflow-y: scroll;
    background-image: url(static/css/i/img_txt.png);
    background-size: 100% auto;
    background-position-y: 10%
}

.p2 .panel .txt p {
    text-indent: 1em;
    color: #fff;
    font-size: .9em
}

.p2 .btn {
    position: absolute;
    width: 100%;
    height: 24%;
    background-image: url(static/css/i/p2_btn.png);
    background-repeat: no-repeat;
    background-size: 100%;
    bottom: 0
}

.p2_1 {
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: relative
}

.p2_1,
.p2_1 .game-again-mask {
    width: 100%;
    height: 100%;
    background-color: #000
}

.p2_1 .game-again-mask {
    position: absolute;
    z-index: 10
}

.p2_1 .game-again-mask .txt {
    position: absolute;
    font-size: 1.2em;
    text-align: center;
    color: #fff;
    width: 100%;
    top: 45%
}

.p2_1 .game-again {
    width: 100%;
    height: 47%;
    position: absolute;
    z-index: 10;
    background-image: url(static/css/i/game_again.png);
    top: 22%;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.p2_1 .game-again .btn {
    bottom: 54%
}

.p2_1 .game-again .btn,
.p2_1 .game-again .cancel {
    position: absolute;
    width: 51%;
    height: 18%;
    background-repeat: no-repeat;
    background-size: 100%;
    margin-left: 25%
}

.p2_1 .game-again .cancel {
    bottom: 27%
}

.p2_1 .portrait_tip {
    position: absolute;
    background: #000;
    color: #fff;
    text-align: center;
    width: 100%;
    top: 50%
}

.p2_1 iframe,
.p3 {
    width: 100%;
    height: 100%
}

.p3 {
    background-color: #000;
    background-image: url(static/css/i/p3_bg.png);
    background-size: 100% auto;
    position: relative;
    font-family: PingFangSC-Regular
}

.p3,
.p3 .panel-top {
    background-repeat: no-repeat
}

.p3 .panel-top {
    position: absolute;
    background-image: url(static/css/i/p2_panel1.png);
    background-size: 100% 100%;
    top: 1%;
    width: 100%;
    height: 40%
}

.p3 .panel-top .title {
    width: 74%;
    position: absolute;
    height: 20%;
    left: 13%;
    top: 16%;
    text-align: center;
    font-size: 2em;
    color: #4cb3ff;
    font-weight: bolder;
    -webkit-text-stroke: 1px #246dab;
    text-shadow: 4px 5px 14px #154d7d
}

.p3 .panel-top .question {
    width: 68%;
    position: absolute;
    height: 44%;
    left: 17%;
    top: 41%;
    color: #c1c1c1;
    line-height: 1.5em;
    font-size: 1.1em
}

.p3 .answer {
    height: 9%;
    width: 82%;
    margin-left: 9%;
    background-size: 100% 100%;
    width: 84%;
    color: #9aa7ac
}

.p3 .answer,
.p3 .answer .duigou {
    position: absolute;
    background-repeat: no-repeat
}

.p3 .answer .duigou {
    background-image: url(static/css/i/dui.png)
}

.p3 .answer .cha,
.p3 .answer .duigou {
    right: 11%;
    width: 14%;
    height: 100%;
    margin-top: 4%;
    background-size: 100%
}

.p3 .answer .cha {
    position: absolute;
    background-image: url(static/css/i/cuo.png);
    background-repeat: no-repeat
}

.p3 .answer .a-txt {
    position: absolute;
    width: 70%;
    height: 66%;
    top: 14%;
    left: 24%;
    line-height: 240%
}

.p3 .answer-1 {
    top: 42%;
    background-image: url(static/css/i/a1.png)
}

.p3 .answer-2 {
    top: 52%;
    background-image: url(static/css/i/a2.png)
}

.p3 .answer-3 {
    top: 62%;
    background-image: url(static/css/i/a3.png)
}

.p3 .answer-4 {
    top: 72%;
    background-image: url(static/css/i/a4.png)
}

.p3 .btn {
    width: 50%;
    height: 13%;
    margin-left: 25%;
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(static/css/i/p3_btn.png);
    bottom: 3%
}

.p4 {
    width: 100%;
    background-color: #000;
    background-image: url(static/css/i/p3_bg.png);
    background-size: 100% auto;
    background-repeat: no-repeat
}

.p4,
.p4 .cell {
    height: 100%;
    position: relative
}

.p4 .cell {
    width: 16%;
    background-color: #fff;
    border-radius: 1em;
    text-align: center;
    float: left;
    margin: .1em
}

.p4 .cell .mask {
    width: 100%;
    height: 50%;
    opacity: .07;
    background-color: #000;
    position: absolute;
    top: 0
}

.p4 .time-bar {
    position: absolute;
    width: 100%;
    height: 10%;
    padding-left: 24%;
    margin-top: 8%
}

.p4 .time-bar .cell {
    font-weight: bolder;
    width: 11%;
    background-color: #fff;
    border-radius: 10%;
    text-align: center;
    float: left;
    margin: .5%;
    font-size: 2.5em;
    line-height: 180%
}

.p4 .time-bar .sec {
    width: 3%;
    height: 100%;
    position: relative;
    background-image: url(static/css/i/sec.png);
    float: left;
    margin: 0 .3em
}

.p4 .ball-poll,
.p4 .time-bar .sec {
    background-repeat: no-repeat;
    background-size: auto 100%
}

.p4 .ball-poll {
    width: 100%;
    height: 50%;
    top: 17%;
    background-image: url(static/css/i/p4_1.png)
}

.p4 .ball-poll,
.p4 .ball-poll .ball {
    position: absolute;
    background-position: 50%
}

.p4 .ball-poll .ball {
    top: 75%;
    left: 43%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    width: 15%;
    height: 20%;
    background-image: url(static/css/i/ball.png);
    background-repeat: no-repeat;
    background-size: auto 100%
}

.p4 .ball-poll .ball.move {
    -webkit-animation: ballmove 0s linear forwards;
    animation: ballmove 0s linear forwards
}

.p4 .ball-poll .cover {
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: 50%;
    background-image: url(static/css/i/p4_2.png);
    background-repeat: no-repeat;
    background-size: auto 100%
}

.p4 .points-bar {
    position: absolute;
    width: 100%;
    height: 8%;
    top: 68%;
    padding-left: 24%
}

.p4 .points-bar .cell {
    width: 8%;
    background-color: #fff;
    border-radius: 10%;
    text-align: center;
    float: left;
    margin: .5%;
    font-size: 2em;
    line-height: 180%
}

.p4 .txt {
    width: 40%;
    height: 6%;
    margin-left: 30%;
    background-size: 100%;
    background-image: url(static/css/i/p4_txt.png);
    top: 79%
}

.p4 .btn,
.p4 .txt {
    position: absolute;
    background-repeat: no-repeat
}

.p4 .btn {
    width: 50%;
    height: 10%;
    margin-left: 25%;
    background-size: 100% 100%;
    background-image: url(static/css/i/p4_btn.png);
    bottom: 3%
}

.p5 {
    width: 100%;
    height: 100%;
    background-color: #000;
    background-image: url(static/css/i/p5_bg.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: relative
}

.p5 .title {
    width: 75%;
    height: 12.5%;
    margin-left: 14%;
    background-image: url(static/css/i/p5_txt.png);
    top: 6%
}

.p5 .panel,
.p5 .title {
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat
}

.p5 .panel {
    width: 86%;
    height: 55.5%;
    margin-left: 8%;
    background-image: url(static/css/i/p5_panel.png);
    top: 23%
}

.p5 .panel .mark {
    width: 100%;
    height: 52%;
    top: 23%;
    font-size: 9em;
    text-align: center;
    font-family: sans-serif
}

.p5 .panel .fen,
.p5 .panel .mark {
    color: #fff;
    text-shadow: 4px 4px 4px #000;
    position: absolute
}

.p5 .panel .fen {
    text-align: right;
    top: 56%;
    width: 88%;
    font-size: 1.5em
}

.p5 .btn {
    width: 60%;
    height: 15%;
    margin-left: 20%;
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(static/css/i/p5_btn.png);
    bottom: 8%
}

.p6 {
    height: 100%;
    background-color: #000;
    position: relative
}

.p6,
.p6 .result_bar {
    width: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.p6 .result_bar {
    height: 8%;
    position: absolute;
    bottom: 5%;
    background-image: url(static/css/i/result_bottom_bar.png);
    pointer-events: none
}

.p6 .share {
    width: 50%;
    height: 6%;
    position: absolute;
    bottom: 1%;
    margin-left: 25%
}

.p6 .share .s {
    float: left;
    width: 33%;
    height: 90%;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 50%;
    margin-left: 13%
}

.p6 .share .qzone {
    background-image: url(static/css/i/result/qz.png)
}

.p6 .share .wc {
    background-image: url(static/css/i/result/wc.png)
}

.p6.t0 {
    background-image: url(static/css/i/result/0.jpg)
}

.p6.t1 {
    background-image: url(static/css/i/result/1.jpg)
}

.p6.t2 {
    background-image: url(static/css/i/result/2.jpg)
}

.p6.t3 {
    background-image: url(static/css/i/result/3.jpg)
}

.p6.t4 {
    background-image: url(static/css/i/result/4.jpg)
}

.p6.t5 {
    background-image: url(static/css/i/result/5.jpg)
}

#p6_img {
    width: 100%
}

.share-mask {
    top: 0;
    left: 0;
    z-index: 10;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8)
}

.share-mask .share-ico {
    position: absolute;
    width: 100%;
    height: 20%;
    background-image: url(static/css/i/share_mask.png);
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: auto 100%
}

@-webkit-keyframes ballmove {
    0% {
        top: 75%;
        left: 43%;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    33.333% {
        top: 33%;
        left: 12%;
        -webkit-transform: rotate(-120deg);
        transform: rotate(-120deg)
    }

    66.6666% {
        top: 33%;
        left: 72%;
        -webkit-transform: rotate(-240deg);
        transform: rotate(-240deg)
    }

    to {
        top: 75%;
        left: 43%;
        -webkit-transform: rotate(-1turn);
        transform: rotate(-1turn)
    }
}

@keyframes ballmove {
    0% {
        top: 75%;
        left: 43%;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    33.333% {
        top: 33%;
        left: 12%;
        -webkit-transform: rotate(-120deg);
        transform: rotate(-120deg)
    }

    66.6666% {
        top: 33%;
        left: 72%;
        -webkit-transform: rotate(-240deg);
        transform: rotate(-240deg)
    }

    to {
        top: 75%;
        left: 43%;
        -webkit-transform: rotate(-1turn);
        transform: rotate(-1turn)
    }
}

/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJhcHAuY3NzIiwic291cmNlUm9vdCI6IiJ9*/