html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}figure{margin:0}img{vertical-align:middle;max-width: 100%; height: auto;}.img-responsive{display:block;max-width:100%;height:auto}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.hide{display:none !important}.show{display:block !important}.invisible{visibility:hidden}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}
* {-webkit-tap-highlight-color: transparent; -webkit-appearance:none;}
*:not(input,textarea) { -webkit-touch-callout: none; -webkit-user-select: none;}
button,textarea,input[type=button],input[type=text],input[type=password]{-webkit-appearance:none;outline:none}
button:focus,input:focus,textarea:focus {outline: none;}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.42857143;color:#445469;background:url("../images/bg.jpg") no-repeat; background-size: 100% 100%;}

/*html,body {width: 100%; height: 100%;}*/
a{color:#337ab7;text-decoration:none}
a:hover,a:focus{text-decoration:none}
a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}

/* clearfix */
.clearfix:after,.clearfix:before,.row:after,.row:before {display: table; content: " "}
.clearfix:after,.classlist:after,.row:after,.row:after {clear: both;}

.btn {border-radius: 0.5rem; background-color: #eabf4d; border: none; padding: 0.3rem 1rem; color: #701660; display: inline-block;}

.stage {position: relative; width:100%; overflow: hidden;}

.lanren {
    width: 9rem;
    height: 9rem;
    position: absolute;
    bottom: 18%;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    animation: a 1000s linear;
    -webkit-animation: a 1000s linear;
}
.winBox {position: absolute; bottom: 18%; left: 0; right: 0; margin: auto; width: 18rem;}

.agg {
    width: 5rem; height: 7rem;
    transform-origin:center;
    -webkit-transform-origin:center;

    background: url("../images/agg.png") no-repeat center;
    background-size: cover;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

    border-radius: 100%;
}
.agg:nth-child(1){
    margin-top: 45%;
    animation: b 1000s linear,zindex 10000ms 0ms infinite linear;
    -webkit-animation: b 1000s linear,zindex 10000ms 0ms infinite linear;

}
.agg:nth-child(2){
    margin-top: -5%;
    margin-left: -5%;
    animation: b 1000s linear,zindex 10000ms -2500ms infinite linear;
    -webkit-animation: b 1000s linear,zindex 10000ms -2500ms infinite linear;
}
.agg:nth-child(3){
    margin-top: -5%;
    margin-right: -5%;
    animation: b 1000s linear,zindex 10000ms -5500ms infinite linear;
    -webkit-animation: b 1000s linear,zindex 10000ms -5500ms infinite linear;
}

.lanren.paused,.paused .agg {-webkit-animation-play-state:paused; animation-play-state:paused;}

@keyframes a{
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    to{
        transform: rotate(36000deg);
        -webkit-transform: rotate(36000deg);
    }
}
@-webkit-keyframes a{
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    to{
        transform: rotate(36000deg);
        -webkit-transform: rotate(36000deg);
    }
}
@keyframes b{
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    to{
        transform: rotate(-36000deg);
        -webkit-transform: rotate(-36000deg);
    }
}
@-webkit-keyframes b{
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    to{
        transform: rotate(-36000deg);
        -webkit-transform: rotate(-36000deg);
    }
}

@keyframes zindex {
    0% {
        z-index: 1;
    }
    25% {
        z-index: -1;
    }
    55% {
        z-index: -1;
    }
    75% {
        z-index: 1;
    }
}
@-webkit-keyframes zindex {
    0% {
        z-index: 1;
    }
    25% {
        z-index: -1;
    }
    55% {
        z-index: -1;
    }
    75% {
        z-index: 1;
    }
}


.hammer {
    position: absolute;
    z-index: 10;
    left: -60%;
    top: -30%;
    width: 6.5rem;
    display: block;
    max-width: none;

    -webkit-animation: hammer 0.5s alternate;
    animation: hammer 0.5s alternate;
    transform-origin: bottom left;
    -webkit-transform-origin: bottom left;

}
.agg-puo {
    position: absolute;
    left: -40%;
    right: 0;
    bottom: 18%;
    width: 10rem;
    display: block;
    max-width: none;
    display: none;
}
@keyframes hammer
{

    50%
    {
        transform: rotate(15deg);
    }

}
@-webkit-keyframes hammer
{
    50%
    {
        -webkit-transform: rotate(15deg);
    }
}


.acePack {position: absolute; top: 2%; right: 0; width: 5rem;}

.footer > p {margin: 0 0 2%; text-align: center; color: #fff; font-size: 90%;}
.footer > p span {color: #eabf4d;}
.footer img.logo {display: block; width:9rem; margin: auto;}


.jn-box {position: fixed; z-index: 99; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.85);}

.tabs {border-bottom: solid 1px #9d9d9d; padding: 5% 5% 0; margin: 0 5%;}
.tabs strong {display: inline-block; /*float: left;*/ width: 42%; text-align: center;  color: #fff; font-size: 90%;}
.tabs strong:first-child {/*border-right: solid 1px #9d9d9d;*/}
.tabs strong span {display: inline-block; padding: 0.5rem 0 0.8rem; }

.tabs strong.current span {border-bottom: solid 2px #fff;position: relative;}
.tabs strong.current span:after { content: " "; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width:0;
    height:0;
    border-left:0.4rem solid transparent;
    border-right:0.4rem solid transparent;
    border-bottom:0.4rem solid #fff;}

.btn-close { position: absolute; top: 2%; right: 5%;  font-size: 3rem; color: #9d9d9d; line-height: 3rem; }

.tabsbox {font-size: 80%; color: #fff; overflow: auto; -webkit-overflow-scrolling:touch;}
.tabsbox > div {padding: 5% 10% 10%;}
.tabsbox h4 {display: inline-block; background-color: #c5a144; color: #680d61; padding: 0.1rem 0.5rem; border-radius: 0.2rem;}
.tabsbox p {margin: 0; line-height: 160%;}

.Prize {border: solid 1px #fff; border-radius: 0.5rem; padding: 1.5rem 0.5rem 0 1.4rem; position: relative; margin-bottom: 1rem;}
.Prize > div {margin: 0.8rem -0.5rem 0 -1.4rem; padding: 1rem 1.4rem 0.8rem; border-top: dotted 1px #fff; color: #c09735;}
.Prize > img {position: absolute; top: -2px; left: -2px; width: 3.5rem; display: block;}

.footer-btn {position: fixed; bottom: 0; left: 0; width: 100%; text-align: center;  padding-bottom: 1rem;}

.qrcodeBox {position: fixed; z-index: 99; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8);}
.qrcodeBox > div {width: 80%; border-radius: 0.5rem; padding: 12%;     background-color: rgba(255, 255, 255, 0.8); position: absolute; left:50%; top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);}
.qr-close { position: absolute; top: 2%; right: 2%; padding: 0 0.5rem; font-size: 2.5rem; height: 2.5rem; line-height: 2.5rem; }

.sorryBox {position: fixed; top: 0; left: 0; z-index: 99; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8);}
.sorryBox > div {position: absolute; left:50%; top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%); width: 80%; text-align: center;}
.sorryBox .btn {width: 80%; margin-bottom:5%; padding: 0.5rem;}

.fromBox {position: fixed; top: 0; left: 0; z-index: 99; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: table}
.fromBox > div {padding: 10%; display: table-cell; vertical-align: middle;}
.from {padding: 10% 5% 0;}
.from input {width: 100%; border: none; background-color: #fff; border-radius: 0.5rem; padding: 0.5rem 1rem; margin-bottom: 5%;}
.from > div input {width: 48%; float: left;}
.from > div button {width: 48%; float: right;  padding: 0.5rem;}

#btn-lq {display: block; margin: auto; padding: 0.5rem 3rem; font-weight: 700; margin-top: 15%;}

.backbtn {display: block; position: absolute; top: 3%; right: 5%; z-index: 99; width: 1.5rem;}
.code-header {background-color: #56a3d9; color: #fff; padding: 15% 5% 10%; text-align: center; position: relative;}
.code-header h3 {font-size: 1.5rem; margin: 0 0 3%;}
.code-header p {margin: 0;}
.code-header > img {display: block; position: absolute; left: 0; bottom: 0; width: 100%;}
.code-content {padding: 10%; text-align: center; font-size: 80%; line-height: 160%;}
.code-content .btn {display: block; width: 10rem; margin: auto; padding: 0.5rem; font-size: 1rem;}

.collect {position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); top: 0; left: 0; z-index: 999; text-align: center;}

.landscape {position: fixed; width: 100%; height: 100%; background-color: #000; top: 0; left: 0; z-index: 999; text-align: center;}
.landscape > div {position: absolute; left:50%; top:50%; transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);}
.landscape > div img {width: 5rem;}

.music {position: fixed; z-index: 99; top: 5%; left: 5%; width: 2rem; -webkit-animation: music 2s linear infinite;}
.Musicpaused {-webkit-animation-play-state:paused; animation-play-state:paused;}
@-webkit-keyframes music {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    to{
        transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
    }
}