body {
    background-color: #282828;
    font-family: '微软雅黑', 'Microsoft YaHei', 'Microsoft JhengHei', 'Helvetica', "DroidFont", 'Avenir', 'Segoe UI';
    color: #000;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    font-weight: normal;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, textarea, p, blockquote, th, td {
    padding: 0;
    margin: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset, img {
    border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
    font-weight: normal;
    font-style: normal;
}

ol, ul {
    list-style: none;
}

caption, th {
    text-align: left;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-size: 100%;
}

q:before, q:after {
    content: '';
}

abbr, acronym {
    border: 0;
}

a {
    text-decoration: none;
    color: #333;
}
.clearfix:after {
    content: " ";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden; }

.show {
    display: block;
}

.hidden {
    display: none;
}

.content-box {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    position: relative;
    margin: auto;
    -ms-overflow-style: none;
    padding-bottom: 1.5rem;
}

.content-box .main-box {
    background-color: #0a0a0a;
    width: 100%;
    position: relative;
}

.content-box .main-box img {
    width: 100%;
    display: block;
    margin: auto;
}

.content-box .main-box .comment {
    color: #fff;
    font-size: .3rem;
    padding: .08rem;
    line-height: 1.5;
    position: absolute;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
}

.content-box .main-box .user_plane {
    width: 100%;
    color: #fff;
    font-size: .41rem;
    padding: .2rem;
    position: absolute;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
}

.content-box .main-box .user_plane .avaer {
    display: inline-block;
    width: .93rem;
    height: .93rem;
    margin-right: .5rem;
    vertical-align: middle;
}

.btn-box {
    width: 100%;
    height: 0;
    padding-bottom: 1rem;
    padding-top: .5rem;
    background-color: #282828;
    text-align: center;
}

.btn-box .input_btn {
    margin-top: .5rem;
    margin: auto;
    width: 3.77rem;
    background-color: #fdc340;
    cursor: pointer;
    height: 0;
    padding-top: .24rem;
    padding-bottom: .68rem;
    font-size: .37rem;
    text-align: left;
    color: #e16b34;
    position: relative;
    border-radius: .15rem;
}

.btn-box .input_btn .btn_icon {
    display: block;
    width: .53rem;
    float: left;
    margin-left: .67rem;
    margin-right: .3rem;
    position: relative;
}

.btn-box .input_btn span {
    position: relative;
    margin-top: -.08rem;
    display: inline-block;
}

.btn-box .input_btn input.xb_image_file {
    cursor: pointer;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    opacity: 0;
    color: transparent;
    filter: alpha(opacity=0);
}

.btn-box .btn-only {
    width: 3.2rem;
    display: inline-block;
}

.btn-box .btn-only.hidden {
    display: none;
}

.btn-box .btn-only.duijiang {
    margin-top: .5rem !important;
    left: -1.7rem;
}

.btn-box .wechat_id {
    color: #fdc340;
    padding-top: .3rem;
    font-size: .242rem;
    text-align: center;
    clear: both;
}

/*图片加载中效果*/
#xb_loading_cover {
    position: fixed;
    width: 100%;
    height: 1000px;
    background: rgba(0, 0, 0, 0.65);
    display: none;
    top: 0;
    left: 0;
    z-index: 2;
}

#xb_loading_cover img {
    width: 20%;
    display: block;
    margin: auto;
}

/*游戏规则*/
.gamerules {
    color: #ffffff;
}

.gametule-tilte {
    font-size: .35rem;
    padding-top: .5rem;
    text-align: center;
}

.gamerules ul {
    margin: 0;
    padding: .5rem .3rem;
    overflow: auto;
}

.gamerules li {
    display: block;
    text-align: left;
    background: url("tuoyuan.png") no-repeat 0 .1rem;
    background-size: .17rem .17rem;
    font-size: .24rem;
    line-height: 1.5;
    padding-left: .32rem;
    list-style-type: none;
}

/*错误信息*/
.popup_wrapper {
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 70%;
    width: 100%;
}

.popup_content {
    font-size: .3rem;
    color: rgb(248, 244, 182);
    background-color: rgba(231, 115, 25, 0.85);
    padding: 3% 3%;
    text-align: center;
    margin: auto;
    max-width: 61.8%;
}

/*分数显示*/
.showscore {
    position: absolute;
    left: 50%;
    top: 0;
    margin-top: 20%;
    margin-left: -.83rem;
}

.showscore .showscore-con {
    font-size: .74rem;
    color: #fec000;
    background-color: rgba(231, 115, 25, 0.85);
    padding: .05rem .15rem;
    text-align: center;
    margin: auto;
    width: auto;
}

/*动画*/
#xb_canvas {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

/*分享面*/
.share-plane {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 2;
}

.share-plane .shareword {
    display: block;
    width: 4.82rem;
    margin: .5rem auto;
}

/*排名榜*/
.ranklist-box {
    background: #fff;

}
.listbox{
   overflow: hidden;
    width: 100%;
    height: auto;
    position: relative;
    margin: auto;
    -ms-overflow-style: none;

}

.ranklist .item {
    padding:0 .3rem;
    border-bottom: .02rem solid #dfdfdf;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height:1.02rem;
    line-height:1.02rem;
}

.ranklist .item .lf {
    flex: 1;
    text-align: left;
}
.ranklist .item .lf p{
    display: block;
    float: left;
    height:1.02rem;
    line-height:1.02rem;

}
.ranklist .item .rt span{
    display: inline-block;
}

.ranklist .item .rt {
    text-align: right;
    font-size: .47rem;
    color: #e9983e;
}

.ranklist .item .ranknum {
    font-size: .31rem;
    color: #3f3f3f;
    margin-right:.3rem;
}

.ranklist .item .pic {
    display: inline-block;
    width: .72rem;
    height:.72rem;
    margin-right:.3rem;
}

.ranklist .item .name {
    font-size: .28rem;
    color: #3f3f3f;
}


/*弹窗*/
.modal-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10600;
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms; }
.modal-overlay.modal-overlay-visible {
    opacity: 1;
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
    visibility: visible; }
.modal {
    width: 3.98rem;
    position: absolute;
    z-index: 11000;
    left: 50%;
    margin-left: -1.99rem;
    margin-top: 0;
    top: 15%;
    border-radius: 0.5rem;
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0) scale(1.185);
    transform: translate3d(0, 0, 0) scale(1.185);
    -webkit-transition-property: -webkit-transform, opacity;
    transition-property: transform, opacity;
    color: #020100;
    display: none;
}

.modal.modal-in {
    opacity: 1;
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
    display: block;
}

.modal .close {
    position: absolute;
    z-index: 100;
    top: -.3rem;
    right: -.15rem;
    width: .55rem;
    height: .55rem;
}

.modal .close img {
    width: 100%;
    height: 100%;
}

.modal .modal-inner {
    padding:.2rem .2rem .4rem;
    border-radius: 0.05rem;
    position: relative;
    background: #fff;
}
.modal .modal-inner .modal-text {
    margin-top: .23rem;
    color:#bd0707;
}
.modal .modal-inner .modal-text .modal-til{
    text-align: center;
    font-size:.38rem;
}
.modal .modal-inner .modal-text .madal-con{
    text-align:left;
    font-size:.20rem;
    line-height: .35rem;
    margin-top:.25rem;
}
.modal .modal-inner .madal-btn .btn{
    display: inline-block;
    width: 1.7rem;height:.5rem;line-height: .5rem;
    background-color: #fdc340;text-align: center;color:#e16b34;
    font-size:.24rem;border-radius: .15rem;
}