datiGame/public/plugins/layui/css/main.css

@charset "utf-8";
body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,p,hr,thead,tbody,tfoot,th,td{margin:0;padding:0;}
ul,ol{list-style:none;}
a{text-decoration:none;}
html{-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}
body{line-height:1.5;}
body,button,input,select,textarea{font-family:'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;}
b,strong{font-weight:bold;}
i,em{font-style:normal;}
table{border-collapse:collapse;border-spacing:0;}
table th,table td{border:1px solid #ddd;padding:5px;}
table th{font-weight:inherit;border-bottom-width:2px;border-bottom-color:#ccc;}
img{border:0 none;width:auto\9;max-width:100%;vertical-align:top;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;vertical-align:baseline;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
@media screen and (-webkit-min-device-pixel-ratio:0){input{line-height:normal!important;}}
select[size],select[multiple],select[size][multiple]{border:1px solid #AAA;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video,progress{display:inline-block;}

.loader {
    width: 20em;
    height: 20em;
    font-size: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem auto 0;
}

.loader .face {
    position: absolute;
    border-radius: 50%;
    border-style: solid;
    animation: animate 3s linear infinite;
}

.loader .face:nth-child(1) {
    width: 100%;
    height: 100%;
    color: #bbc5ff;
    /* border-color: currentColor transparent transparent currentColor; */
    /* border-width: 0.2em 0.2em 0em 0em; */
    --deg: -45deg;
    animation-direction: normal;
}

.loader .face:nth-child(2) {
    width: 70%;
    height: 70%;
    color: #bbc5ff;
    /* border-color: currentColor currentColor transparent transparent; */
    /* border-width: 0.2em 0em 0em 0.2em; */
    --deg: -135deg;
    animation-direction: reverse;
}

.loader .face .circle {
    position: absolute;
    width: 50%;
    height: 0.1em;
    top: 50%;
    left: 50%;
    background-color: transparent;
    transform: rotate(var(--deg));
    transform-origin: left;
}

.loader .face .circle::before {
    position: absolute;
    top: -0.5em;
    right: -0.5em;
    content: '';
    width: 1em;
    height: 1em;
    background-color: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 2em,
                0 0 4em,
                0 0 6em,
                0 0 8em,
                0 0 10em,
                0 0 0 0.5em rgba(255, 255, 0, 0.1);
}

@keyframes animate {
    to {
        transform: rotate(1turn);
    }
}
body{
    background: url(../img/bg2.jpg) center top;
}
.cov{ position: absolute; }
.g-inner{margin: 0 auto;width: 7.5rem;}
.cov1{left: 50%;top: 3.1rem;width: 2.4rem;margin-left: -1.3rem;border: solid #71a3fd .1rem;border-radius: 50%;}
.cov2{left: 50%;top: 10.5rem;margin-left: -1.5rem;width: 3rem;font-size: .3rem;text-align: center;}
.cov1 .userface{width: 2.4rem;height: 2.4rem;}
.cov3{left: 50%;top: 7rem;width: 1rem;height: 1rem;line-height: 1rem;margin-left: -.5rem;text-align: center;font-size: .5rem;color: #FFF;font-weight: bold;border-radius: .2rem;}
.cov4{right: 50%;top: 8.5rem;width: 2rem;margin-right: -1rem;}
 .userface{border-radius: 50%;overflow: hidden;background-color: #000;display: block;}
.cov4 .userface{width: 2.0rem;height: 2.0rem;float: right;opacity: 0;}
.doing .cov1{left: 0;margin: 0;top: 1rem;background: #32deec;border-radius: 1rem;width: 4rem;}
.num{opacity: 0;color: #FFF;FONT-SIZE: 0.6REM;position: absolute;top: .2rem;}
.doing .num{opacity: 1}
.doing .cov1 .num{
    /* color: #FFF; */
    /* FONT-SIZE: 0.5REM; */
    left: 2.3rem;
}
.doing .cov4 .num{
    left: .8rem;
}
.doing .cov4,.end .cov4{right: 50%;top: 10rem;width: 2rem;margin-left: -1rem;}
.doing .cov4{right: 0;top: 2rem;background: #fec13f;width: 4rem;border-radius: 1rem;margin-right: 0rem;}
.doing .cov1  .userface{ width: 2.0rem;height: 2.0rem; }
.doing .cov2 , .doing .loading{opacity: 0;position: absolute;left: 50%;margin-left: -2.3rem;}
.doing .cov3{top: 0rem;z-index: 9;}
.doing  .userface{
    margin-top: -.5rem;
}
.cov .name{
    color: #fff;
    font-style: normal;
    position: absolute;
    left: .8rem;
    font-size: .35rem;
    top: 1.5rem;
}
.cov4 .name{left: 2.8rem;}
.gstart .name{top: 3rem;width: 2rem;left: 50%;margin-left: -1rem;text-align: center;}
.gstart .cov4  .name{ left: 46%;  }
.doing.gstart .name{ top:inherit; }
.doing.gstart .cov4  .name{ left:inherit;  }
.doing  .qs-item{ display:block}
.doing  .cov4 .userface{opacity:1}
.qs-item{padding: 4.8rem 1rem 0;display: none;position: absolute;left: 0;top: 0;z-index: 99;}
.qs-item .tit{color: #FFF;font-size: .4rem;text-align: center;display: block;margin-bottom: .2rem;}
.qs-item li{
    width: 5.4rem;
    height: 1.15rem;
    border-radius: 1.15rem;
    color: #8400b1;
    background-color: #FFF;
    text-align: center;
    line-height: 1.15rem;
    margin-bottom: .5rem;
    overflow: hidden;
}
.qs-item li .answer {
    width: 100%;
    height: 100%;
    margin: 0;
    background: transparent;
    border: 0;
    color: #333;
}
.qs-item li.on,.qs-item .cur_answer{
     background-color:#ffb93b;
     color: #FFF;
}
.qs-item .cur_answer.cur_error{
     background-color:#E91E63;
     color: #FFF;
}
.qs-item .cur_answer.cur_true{
     background-color:#009688;
     color: #FFF;
}

.qs-item .page{text-align: center; color: #fff; font-size: .3rem;}
.end .qs-item{display: none;}
.result{width: 6.12rem;height: 9rem;margin: 4.8rem 0.7rem 0;background-color: #FFF;display: none;position: relative;}
.end .result{display: block;}
.top-icon{width: 2.52rem;height: 2.52rem;background-size: 2.52rem;display: block;position: absolute;top: -0.86rem;left: 1.78rem;}
.top-icon.success{background-image: url(../img/success.png);  }
.top-icon.faild{background-image: url(../img/fail.png) ;  }
.result .live{color:#b1afaf;text-align: center;display: block;margin-top: 2rem;float: left;width: 100%;margin-bottom: 1rem;}
.result .btn{
    display: block;
    width: 5.5rem;
    height: 1.15rem;
    margin: 0 auto .5rem;
    text-align: center;
    clear: both;
    background: #2a7bff;
    color: #FFF;
    line-height: 1.15rem;
    font-size: .45rem;
    border-radius: 1rem;
}
.amt{
        transition: all .3s;
        -webkit-transition: all .3s;
}
#start_game.layui-btn {
    display:inline-block;
    width: 2.66rem;
    height: 3.12rem;
    line-height:38px;
    padding:0 18px;
    color:#fff;
    white-space:nowrap;
    text-align:center;
    font-size:14px;
    border:none;
    border-radius:2px;
    cursor:pointer;
    background: url(../img/start.png) no-repeat center;
    background-size: 100%;
    text-indent: -33em;
    overflow: hidden;
    position: absolute;
    left: 2.46rem;
    top: 7.45rem;
}
.layui-btn:hover {
    opacity:.8;
    filter:alpha(opacity=80);
    color:#fff
}
.layui-btn:active {
    opacity:1;
    filter:alpha(opacity=100)
}
.layui-btn+.layui-btn {
    margin-left:10px
}
.welcome{background: url(../img/bg1.jpg) no-repeat center;height: 13.4rem;background-size: 7.5rem;}
.gstart{display:none}
.popwind{width:6.05rem;height:6.98rem;position: absolute;left: 0.8rem;top: 2.5rem;background: url(../img/rulebg.png);background-size: 100%;display: none;}
.popwind .art{
    padding: 1.1rem .82rem .4rem;
    height: 4rem;
    color: #c0caff;
    font-size: .32rem;
}
.popwind  .close{
    width: 2.46rem;
    height: 1rem;
    display: block;
    margin: 0 auto;
    background: url(../img/enter.png);
    background-size: 100%;
}
.welcome .rulebtn{
    display: block;
    width: 1.24rem;
    height: .72rem;
    background: url(../img/rule.png);
    background-size: 100%;
    position: absolute;
    left: 6rem;
    top: .5rem;
}
.popbg{display: none;position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.5);}
.covxlz{ width: 2.86rem;left: 50%; margin-left: -1.43rem; bottom: .5rem; height: 1rem; border-radius: .5rem; background-color: #a7a8c5;line-height: 1rem;text-align: center;color: #222e71 }