﻿/* 对阵详细头开始 */
#content .gameBox .gameName {
    margin: 0 auto;
    height: auto;
    opacity: 1;
    max-width: 70%;
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    position: absolute;
    width: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 40px;
    line-height: 15px;
    margin-top: 5px;
}

#content .gameBox a div { width: fit-content; margin: auto; }
/* 对阵详细头结束 */
.hideContent { line-height: 24px; padding: 20px 10px;font-size: 14px; white-space: pre-line; word-break: break-word; }
.hideContent img,.recommendContent>img {margin: 5px 0;}
/* #guessDetail {margin-top: 10px;} */

#guessDetail .col-8 {padding-right: 10px;}
#guessDetail h2 .more {float: right;font-weight: normal;color: #00975a;}
#guessDetail .guessList .info {background: #fff;padding: 0px;}
#guessDetail .linkNav {text-align: left;padding: 4px 2px;overflow: hidden;-o-text-overflow: ellipsis;text-overflow: ellipsis;width: 100%;white-space: nowrap;font-size: 11px;}
#guessDetail .linkNav a {color: #00975a;font-size: 13px;}
#guessDetail .linkNav h1 {color: #333;}
#guessDetail .linkNav a::after {content: ">";padding: 0px 4px;}
#guessDetail .linkNav a:last-child::after {content: "";}
#guessDetail .linkNav h1 {background: none;font-weight: 500;margin: 0px;padding: 0px;line-height: unset;}
#guessDetail .match {width: 100%;margin: 5px 0;max-width: 1000px;text-align: center;color: #333}
#guessDetail .match a {font-weight: 500;}
#guessDetail .gameBox * {font-size: 11px;color: #6e6e6e;transition: all .4s ease-in-out;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);-webkit-transition: all .4s ease-in-out;-moz-transition: all .4s ease-in-out;-o-transition: all .4s ease-in-out}
#guessDetail .gameBox {width: 100%;height: 100%;background: #fff;padding: 5px 0;text-align: center;position: relative;}
#guessDetail .gameBox .gameName {margin: 0 auto;line-height: 16px;opacity: 1;max-width: 50%;overflow: hidden;white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;color: #333;}
#guessDetail .gameBox .date {line-height: 16px;}
#guessDetail .gameBox .name {font-size: 12px;width: 100%;overflow: hidden;opacity: 1;line-height: 20px;display: block;height: 20px;white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis}
#guessDetail .gameBox .name a {font-weight: bold;color: #333;}
#guessDetail .gameBox table tr td {background: transparent;border: none;padding: 0;line-height: normal;height: auto}
#guessDetail .gameBox .icon {width: 35px;height: 35px;display: inline-block;}
#guessDetail .gameBox .icon i {position: absolute;left: 30px;bottom: 0;background: #b3b3b3;border-radius: 4px;color: #fff;padding: 0 3px;font-size: 12px;line-height: 13px;font-style: normal;font-weight: normal;min-width: 16px;height: 13px;white-space: nowrap;}
#guessDetail .gameBox .icon img {max-width: 100%;max-height: 100%;}
#guessDetail .gameBox .gameInfo {overflow: hidden;width: 100%;height: 70px}
#guessDetail .gameBox .gameInfo>div {float: left}
#guessDetail .gameBox .home {width: 40%;position: absolute;left: 10px;top: 10px;}
#guessDetail .gameBox .vs {width: 20%;font-weight: 500;margin: 0 auto;}
#guessDetail .gameBox .back {z-index: 2;top: 20px;width: 40px;height: 40px;position: absolute;top: 0;left: 0;margin: 0}
#guessDetail .gameBox .guest {width: 40%;position: absolute;right: 10px;top: 10px;}
#guessDetail .gameBox .gameInfo .HT {font-size: 11px}
#guessDetail .gameBox .status {color: #ff0000;line-height: 14px;}
#guessDetail .gameBox .gameInfo .def {color: #333;font-size: 22px;width: 100%;line-height: 30px}
#guessDetail .gameBox .FT {color: #ff0000;font-size: 16px;width: 100%;line-height: 16px;font-weight: bold;}
#guessDetail .wk .gameBox .gameInfo .FT {margin-top: 20px;}
#guessDetail .wk .gameBox .gameInfo .HT,#guessDetail .wk .gameBox .gameInfo .status {display: none;}
/* #guessDetail  */

/* .content {overflow: hidden;} */
/* .queryList h2 { border: none; } */
.queryList ul li {padding: 5px 0;}
.queryList ul li .Q {font-weight: 500;}
.queryList ul li .A {white-space: nowrap;float: left;width: 100%;margin: 5px 0;}
.queryList ul li .A span {cursor: pointer;width: 60px;border: solid 1px #cccccc;border-radius: 2px;white-space: nowrap;display: block;float: left;text-align: center;margin: 0 5px;line-height: 30px;}
.queryList ul li .A span:hover {color: #008c54;border-color: #008c54;}
.queryList ul li .A.off span.off {background: #4CAF50;color: #fff;border: 1px solid #4CAF50;-webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1);border-radius: 4px;}
.queryList ul li .A.off span {background: #f5f5f5;border: dashed 1px #ccc;}
/* .queryList ul li .A.off span:hover {color: #9a5b00;border-color: #bb6f00;} */

.queryList ul li .A .Result {width: -webkit-calc(100% - 140px);width: calc(100% - 140px);margin: 0 auto;display: inline-block;float: left;}
.queryList ul li .A .Result .tit {font-size: 12px;line-height: 16px;padding: 0 5px;text-align: center;position: relative;}
.queryList ul li .A .Result .tit .userCount {float: right;background: url(/images/users.png) no-repeat -2px bottom;padding-left: 20px;text-align: left;font-size: 12px;background-size: 18px;}
.queryList ul li .A .Result .seleted {color: #008c54;font-weight: 500;}
.queryList ul li .A .Result .barBg {background: #2196F3;font-size: 11px;border-radius: 2px;line-height: 15px;position: relative;height: 12px;margin: 2px 0;}
.queryList ul li .A .Result .barBg.off {background: #e4e4e4;}
.queryList ul li .A .Result .bar {position: absolute;left: 0;top: 0;text-align: center;background: #8BC34A;color: #fff;height: 12px;}
.queryList ul li .A .Result .bar.def {background: transparent;padding: 0 5px;color: #333;}
.queryList ul li .A .Result .tit .per {position: absolute;left: 0;top: 0;}
.queryList ul li .A .Result .tit .per2 {position: absolute;right: 0;top: 0;}
/* .guessList{padding:5px;} */

/* .plane .detail {padding: 5px 0 0 0;} */
/* .guessList{padding:0 !important;} */
.guessItem {border-bottom: dotted 1px #cccccc;padding: 5px 0;overflow: hidden;}
.guessItem:last-child {border: none;}
/* 
.guessItem.col-4 {width: calc(33.333% - 30px);margin: 0 15px;} */

/* .guessItem:last-child {border: none;} */
.guessItem .mBar {line-height: 20px;font-size: 12px;}
.guessItem .mBar .LName {width: -webkit-calc(100% - 136px);width: calc(100% - 136px);-o-text-overflow: ellipsis;text-overflow: ellipsis;white-space: nowrap;display: inline-block;overflow: hidden;line-height: 10px;vertical-align: middle;margin-top: -5px;;}
.guessItem .mBar .userCount,.userCount {float: right;background: url(/images/users.png) no-repeat -4px bottom;padding-left: 20px;text-align: left;font-size: 12px;width: 50px;color: #979797;}
.guessItem .mBar .userCount.on,.userCount.on {background: url(/images/users_on.png) no-repeat -4px bottom;}
.userCount {width: auto;}
.guessItem .home>*,.guessItem .guest>* {float: left;text-align: center;font-size: 12px;}
.guessItem .home .icon,.guessItem .guest .icon {display: none;}
.guessItem .guest .odds,.guessItem .home .odds {min-width: 90px;float: left;}
.guessItem .guest .odds>div,.guessItem .home .odds>div {width: 33.3%;float: left;line-height: 22px;height: 22px;font-size: 11px;}
.guessItem .guest,.guessItem .home {float: left;padding: 0;width: 100%;line-height: 22px;}
.guessList li .icon {width: 22px;height: 22px;font-size: 22px;color: #999;}
.guessItem .name {font-weight: 500;width: -webkit-calc(100% - 130px);width: calc(100% - 130px);text-align: left;word-break:break-word;overflow: hidden;-o-text-overflow: ellipsis;text-overflow: ellipsis;white-space: nowrap;}
/* .guessList .info * {white-space: nowrap !important;} */

.guessItem .score {min-width: 30px;font-size: 16px;display: inline-block;height: 22px;font-weight: bold;}
.guessItem .handicap {width: 40px;color: #2196F3;}
/* .guessList .guessPercent {padding-left: 18px;text-align: left;
    float: right;width: 60px;background: url(/images/linke.png) no-repeat 2px;background-size: 14px auto;} */

.guessItem .odd {color: #999;/* min-width: 22px;line-height: 22px; */
    height: 22px;display: block;float: left;}
/* 竞猜数开始 */

.guessItem .guessPercent {display: none;text-align: left;float: right;width: 50px;border: solid 1px #e1e1e1;line-height: 16px;margin-right: 10px;overflow: hidden;}
.guessItem .guessPercent i {background: #f1f1f1;font-style: normal;width: 15px;display: block;text-align: center;margin-right: 2px;color: #707070;border-radius: 2px;float: left;}
.guessItem .guessPercent span {width: 29px;text-align: center;display: block;float: left;}
.guessItem .guessPercent i.like {background: #f1f1f1 url(/images/linke.png) no-repeat 1px 2px;background-size: 13px auto;height: 16px;float: left;}
/* 竞猜数结束 */

/* list star  */
.guessList .tab {border: none;border-radius: 0;position: relative;text-align: center;/* bottom: -1px; */

    border-bottom: solid 1px #f1f1f1;}
.tabItem.tabMenu,.tabItem.tabMenu--on {display: block;float: left;padding: 0 10px;line-height: 40px;font-weight: normal;background: transparent;color: #333;}
.tabItem.tabMenu a {color: #333;}
.tabItem.tabMenu:hover,.tabItem.tabMenu a:hover {color: red;}
.tabItem.tabMenu--on {font-weight: bold;color: #008c54;background: #fff;display: inline;border-radius: 0;border-bottom: solid 2px #008c54;}
.tabItem.tabMenu--on a {color: #008c54;}
/* list end */

/* userPlane star */
.userPlane {border-radius: 4px;padding: 10px;background: #ffffff;margin-bottom: 10px;}
.userPlane .button {background: #fff;}
.userPlane .button:first-child {margin-right: 5px;}
.userPlane .button:last-child {margin-left: 5px;}
.userPlane .icon {width: 100px;height: 100px;margin: 0 auto;border-radius: 50%;background: #fff;padding: 5px;}
.userPlane .icon img {border-radius: 50%;width: 90px;height: 90px;}
.userPlane .name {text-align: center;line-height: 30px;font-size: 18px;}
/* userPlane end */

/* userRank star */
.sort {line-height: normal;padding: 10px 0;border-bottom: solid 1px #f1f1f1;}
.sort a {display: block;float: left;border-right: solid 1px #e1e1e1;padding: 0 20px;}
.sort a.on {color: #fff;}
.sort a:last-child {border: none;}
/* .userRank {margin-top: 10px;} */

.userRank .myguessBG {background: #faeecf;}
.userRank .myguessBG .focus .icon-ok,.userRank .myguessBG .focus .icon-close {background: #faeecf;}
.userRank li {background: #FFF;overflow: hidden;font-size: 12px;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;border-bottom: solid 1px #f1f1f1;position: relative;}
.userRank li.header,.userRank li.header>div {color: #333;white-space: nowrap;background: #f1f1f1;padding: 0;font-weight: bold;}
.userRank li>div:last-child {width: 100px;margin: 0;}
.userRank li .userData {-webkit-box-flex: 0;-webkit-flex-grow: 0;-ms-flex-positive: 0;flex-grow: 0;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;width: 200px;text-align: left;}
.userRank li .userIcon {-webkit-box-flex: 0;-webkit-flex-grow: 0;-ms-flex-positive: 0;flex-grow: 0;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;width: 60px;}
.userRank li .point {position: absolute;height: 30px;width: 30px;top: 0px;right: 0px;background: url(../Images/pointicon.gif) no-repeat right bottom;background-size: 30px 30px;}
.userRank li .moreIcon {position: absolute;z-index: 3;right: 0px;height: 44px;text-align: right;top: 50%;margin-top: -22px;background: url("../Images/right_icon_black.png") no-repeat center center;width: 20px;background-size: 10px auto;}
.userRank li .more_C {position: absolute;z-index: 3;right: 0px;text-align: right;top: 50%;margin: -10px 10px 0 0;}
.userRank li .more_RT {position: absolute;z-index: 3;right: 0px;text-align: right;top: 0px;}
.userRank li>a {width: 100%;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}
.userRank li>div,.userRank li>a>div {overflow: hidden;width: 10.11%;line-height: 40px;text-align: center;}
.userRank li .rankIcon {background: #f1f1f1;border-radius: 50%;width: 25px;height: 25px;line-height: 25px;margin: 0 auto;margin-top: 7px;font-weight: bold;color: #666;}
.userRank li .rankIcon.on {background: url(/images/rank_on.png) no-repeat top center;padding: 0;background-size: auto 100%;line-height: 23px;height: auto;width: 44px;height: 30px;color: #fff;font-weight: bold;}
.userRank li .logo {font-size: 0;display: block;line-height: 44px;height: 38px;width: 38px;margin: 3px auto;}
.userRank li .logo img {width: 100%;border-radius: 50%;overflow: hidden;}
.userRank li .num {float: left;font-weight: bold;color: #666;line-height: 44px;padding-right: 5px;padding-left: 5px;width: 25px;height: 44px;}
.userRank li .row {line-height: 22px;text-align: left;}
.userRank li .row .num {width: 20px;display: inline-block;}
.userRank li .row .userName {/* width: 100px; */

    display: inline-block;font-weight: bold;}
.userRank li .row img {margin-left: 5px;vertical-align: middle;margin-top: -3px;}
.userRank li .row .readCount {margin-left: 5px;}
.userRank li .row .r {float: right;}
.userRank li .row2 {padding-left: 10px;font-size: 14px;}
.userRank li .bottom_box {overflow: hidden;border-top: 1px solid #EEE;width: 100%;}
.userRank.pc li:hover {cursor: pointer;background: #faeecf;}
.userRank.pc li .rankIcon {background: #f1f1f1;text-align: center;border-radius: 50%;width: 25px;height: 25px;line-height: 25px;margin: 0 auto;margin-top: 10px;font-weight: bold;color: #666;}
.userRank.pc li .rankIcon.on {color: #fff;height: 29px;background: url(/images/rank_on.png) no-repeat center center;background-size: auto 100%;margin-top: 7px;line-height: 21px;}
.userRank.pc li a {display: block;width: 100%;}
.userRank.pc li .userData {text-align: left;}
.userRank.pc li a>div,.userRank.pc li>div {float: left;text-align: center;}
.userRank.pc li a>div:nth-child(1),.userRank.pc li>div:nth-child(1) {width: 40px;}
.userRank.pc li a>div:nth-child(2),.userRank.pc li>div:nth-child(2) {width: 54px;}
.userRank.pc li a>div:nth-child(3),.userRank.pc li>div:nth-child(3) {width: -webkit-calc(100% - 174px);width: calc(100% - 174px);}
.userRank.pc li a>div:nth-child(4),.userRank.pc li>div:nth-child(4) {width: 40px;}
.userRank.pc li a>div:nth-child(5),.userRank.pc li>div:nth-child(5) {width: 40px;display: block;}
.userRank.pc li .logo {margin: 6px;width: 32px;height: 32px;}
.toolBar {padding: 10px 0 10px 0;float: left;}
.toolBar label {color: #9c9c9c}
/* userRank end */

/* moblie  */
@media screen and (max-width:640px) {.guessItem .guest .odds>div,.guessItem .home .odds>div {line-height: 22px;}
.toolBar {float: left;padding: 10px 5px;margin: 0;}
.sort {float: left;background: #fff;border: solid 1px #e1e1e1;padding: 0;border-radius: 4px;margin: 0px 10px;width: 100%;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}
.sort a {-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;text-align: center;padding: 10px 5px;line-height: 13px;font-size: 12px;}
.sort a.on {background: #226204;border-color: #226204;color: #fff;}
.userRank {margin-top: 0;}
.userRank li .rankIcon.on {width: auto;}
/* .guessList {padding: 0px 5px !important;} */

    /* weekRank reset start*/
    .userRank li .logo {margin: 3px auto;float: none;}
.userRank li>div,.userRank li>a>div {display: none;width: 25%;}
.userRank li>div:nth-child(1),.userRank li.header>div:nth-child(2),.userRank li>div:nth-child(3),.userRank li>div:nth-child(4),.userRank li>div:nth-child(8),.userRank li>a>div:nth-child(1),.userRank li>a>div:nth-child(2),.userRank li>a>div:nth-child(3),.userRank li>a>div:nth-child(4),.userRank li>a>div:nth-child(8) {display: block;}
.userRank li .userData {width: 110px;}
/* weekRank reset end*/

    .guessItem {width: 100%;padding: 5px 0;}
.guessItem.col-4 {width: 100%;margin: 0;}
#guessDetail {margin: 0;}
/* #guessDetail .col-8 {width: 100%;padding: 0;}
#guessDetail .col-4 {width: 100%;} */
.guessItem .vs {display: none;}
}
/* @media screen and (max-width:320px) {
    .userBox .tit .name {width: 80px;}
} */

/* pc */
@media screen and (min-width: 640px) {.guessItem {padding: 10px;line-height: 26px;}
.guessItem .vs {width: 6px;float: left;text-align: center;}
.guessItem .name {width: -webkit-calc(100% - 30px);width: calc(100% - 30px);}
.guessItem .home {float: left;}
.guessItem .home .name {text-align: right;}
.guessItem .home .score {float: right;}
.guessItem .home .odds,.guessItem .guest .odds {position: absolute;right: 60px;top: 5px;}
.guessItem .score {line-height: 26px;height: 26px;}
.guessItem .guest {float: left;}
.guessItem .guest .name {float: right;}
.guessItem .guest,.guessItem .home {width: -webkit-calc(50% - 3px);width: calc(50% - 3px);line-height: 26px;}
.guessItem .guest .odds {top: 18px;}
.guessItem .mBar span {padding: 0;line-height: 26px;}
.guessItem .mBar .LName {/* border: solid 1px #ccc;
    border-top: none;
    border-bottom: none; */

        min-width: 50px;text-align: center;overflow: hidden;-o-text-overflow: ellipsis;text-overflow: ellipsis;}
.guessItem .mBar {float: left;width: 125px;}
.guessItem .mBar .userCount {position: absolute;right: 0;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}
/* .guessItem #clist-vote {margin: 0 -15px;} */

    .guessItem {width: 100%;position: relative;padding: 5px 0;}
.guessItem .centre {width: -webkit-calc(100% - 290px);width: calc(100% - 290px);margin: 0 auto;float: left;}
.userBox .tit {width: 65%;border: none;padding: 0;}
.userBox .tit .name {width: 380px;}
/* .userBox .tit .wdl,.userBox .play {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;line-height: 40px;margin: 0;float: left;} */

    .userBox .tit .wdl .sf,.userBox .tit .wdl span {-webkit-box-flex: 0;-webkit-flex: 0 0 100px;-ms-flex: 0 0 100px;flex: 0 0 100px;}
/* .userBox .play {width: 35%;display: block;text-align: left;} */
    /* .userBox .play .pinfo {margin: 0 20px 0 0;float: right;} */
    /* .userBox .play .btn {margin: 10px 20px 0 0;float: right;} */
}