﻿.tabbox{background:var(--bg-color-4);line-height:26px;padding:1px;margin:0 12px 5px 12px;border-radius:20px;display: flex;align-items: center;overflow: hidden;}
.tabbox span{color:var(--text-color-3);font-size:12px;font-weight:normal;text-align: center;padding:0 10px;border-radius:20px;flex: 1;display:inline-block;cursor:pointer;}
.tabbox .on{background:var(--bg-color-1);color:var(--text-color-1);font-weight:bold;box-shadow:0 0 4px var(--black20);}

.recom {
    border-bottom: 1px solid var(--border-1);
    padding: 10px 10px 10px 12px;
    position: relative;
}

    .recom:last-child {
        border: none;
    }

    .recom.exten {
        border-color: #f9f1dd;
        position: relative;
        background: linear-gradient(-90deg,transparent,#fff9ec);
    }

.exten .saleicon {
    background: url(/Images/Weiqiu/sale.png) no-repeat left top;
    height: 48px;
    width: 48px;
    left: 0;
    top: 0;
    display: block;
    position: absolute;
    border-radius: 5px;
    z-index: 899;
}

.topicList .recom .icon {
    background: #F3F3F3;
    width: 36px;
    height: 36px;
    text-align: center;
    margin: 0 10px 0 0;
    border-width: 2px;
    border-radius: 50%;
    top: auto;left: auto;
    position: relative;
    float: left;
}
.recom .icon > a {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: block;
}

.icon .headpic {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.popup_user {
    top: -140px;
    background: rgba(255,255,255,0.97);
    border: 1px solid #e3ebf1;
    border-radius: 5px;
    box-shadow: 0 0px 6px #ddd;
}

.recom .title {
    width: 100%;
    font-size: 14px;
    display: table;
    float: left;
}
.title .userinfo {
    width: 100%;
    padding-left: 10px;
    display: table-cell;
    vertical-align: middle;
}
.title .ident span{float:left;}

.viewlog .recom .rematch {margin: 0;}
.rematch {
    float: left;
    width: calc(100% - 8px);
    background: linear-gradient(-90deg,transparent,rgba(0,127,228,0.1));
    color: var(--text-color-2);
    border: none;
    padding: 3px 0 3px 8px;
    margin: 5px 0 0 0;
    border-radius: 4px;
    cursor: pointer;
}

.rematch i {
    float: left;
    margin-right: 5px;
    opacity: 0.5;
}

.recom .ext {
    background: #e0f2ff;
    border-color: #d5e8fd;
}

.rematch.ext:hover {
    background: #fafdff;
}


.reguess .mark, .reguess .noPassButton, .reguess .inPassButton {
    margin: 0 5px 0 0;

}
.rematch .type {
    background: rgba(255 255 255 / 65%);
    width: 30px;
    text-align: center;
    font-size: 12px;
    line-height: 17px;
    border: 1px solid #c8c1c1;
    border-radius: 3px;
    padding: 0 5px;
    margin-top: 2px;
    display: inline-block;
    float: left;
}

.rematch .league {color:var(--text-color-1);font-size:14px;margin:0;float:left;display:inline-block;position:relative;}
/*.rematch .league:after {content: "";position: absolute; background: #ddd;width: 1px; height: 12px;right: 0;top: 6px;}*/
.rematch .league span{margin-left:0;}
.rematch .league span.red{margin-right:4px;}
.rematch .mark~.league {width: calc(100% - 35px);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.rematch i {
    float: right;
    width: 16px;
    height: 16px;
    background: url(/images/into.png)no-repeat center;
    margin-top: 4px;
}
.recom .infotitle {
    width: 100%;
    float: left;
    font-size: 16px;
    line-height: 30px;
    margin-top: 5px;
    text-align: justify;
    cursor: pointer;
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏溢出的内容 */
    text-overflow: ellipsis; /* 显示省略号 */
}

.check-info {color:var(--text-color-2);font-size:12px;float:left;width:100%;display:inline-block;margin:0;position:relative;}
.check-info span {margin-right:5px;}
.check-info .gree,.check-info .fans-red {background:var(--bg-hightlight-9);color:var(--text-hightlight-1);padding:1px 5px;border-radius:5px;}
.check-info .fans-red {background:var(--bg-hightlight-11);color:var(--red40);}
.check-info .numfrom {float: left;}

.clear {clear:both;}

.recom .title a{color:var(--text-color-1);font-size:15px;display:inline-block;}
.recom .title a:hover,.infotitle:hover{color:#FF7D00;transition:all 0.2s linear;}

.recom .title .win-rate {color: var(--red40);font-size: 14px;text-align: right;font-weight: bold;width: 60px;float: right;}
.recom .title .win-rate span {color: var(--text-color-3);font-size: 11px;font-weight: normal;display: block;}

.viewlog {background:var(--bg-color-1);border-radius:4px;padding-top:12px;/*box-shadow:0 1px 1px 0 rgb(0 0 0 / 8%);*/}

.noPassButton {
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    padding-left: 6px;
    background-color: #aaa;
    color: #fff;
    padding: 1px 2px;
    border-radius: 3px;
    vertical-align: 0px;
}
.hiticon {
    background: url(/Images/hit_seal.svg)no-repeat center;
    background-size: 100%;
    width: 36px;
    height: 40px;
    opacity: 0.8;
    top: 5px;
    right: 8px;
    position: absolute;
}
.viewlog .recom .top {
    background: var(--bg-color-2);
    font-size: 14px;
    line-height: 14px;
    padding: 2px;
    margin: 0;
    border-radius: 2px;
    cursor: pointer;
    right: 50px;
}

.viewlog .recom .top.on {
    background: var(--bg-hightlight-1);
    color: var(--yellow60);
}
.recom .icon {
    background: #F3F3F3;
    width: 36px;
    height: 36px;
    text-align: center;
    margin-right: 10px;
    border-radius: 50%;
    position: relative;
    float: left;
}

.rc_fbk .tittwo2 .number, .recom .ident .number {
    background: var(--bg-hightlight-5);
    color: var(--text-white);
    padding: 3px 8px !important;
    display: inline-block;
    border-radius: 20px;
    font-size: 12px;
    margin-right: 4px;
    cursor: pointer;
    line-height: 18px;
}

    .rc_fbk .tittwo2 .number i, .recom .ident .number i {
        background: url(../../Images/Users/lock.svg) no-repeat center center;
        background-size: 12px;
        display: inline-block;
        width: 12px;
        height: 12px;
        margin: 0 4px 0 0;
        vertical-align: -1px;
    }

.recom .ident > span {
    display: inline-block;
}

/* 快讯 */
.news h2 {font-size: 18px;line-height: 20px;font-weight: bold;margin: 0 0 12px 0;position: relative;z-index: 1;}
.news h2::before {content:"";background:linear-gradient(45deg,rgba(19,130,255,0.45) 30%,transparent);width:50px;height:8px;border-radius:2px;left:0;bottom:-2px;position:absolute;z-index:-1;}
.news-header {font-size:12px;line-height:20px;margin-bottom:10px;}
.news-header::before {content:"";width: 6px;height: 6px;border: 1px solid var(--text-color-3);border-radius: 50%;margin-right: 3px;vertical-align: 0;display: inline-block;}
.news-header .impticon {background: var(--yelowbg);color: var(--yellow60);font-size: 12px;line-height: 16px;font-style: normal;padding: 0 5px;margin-right: 3px;border-radius: 4px;display: inline-block;}
.news-header .source {color:var(--text-color-2);}
.news-header .icon {width: 16px;height: 16px;margin: 2px 0;float: right;cursor: pointer;transition: all 0.2s linear;}
.news-tit {font-size:15px;font-weight:bold;line-height:20px;margin:0 0 6px 15px;}
.news-tit a {color: var(--text-color-1);}
.news-info {font-size:14px;line-height:22px;text-align: justify;margin: 0 15px;overflow: hidden;text-overflow: ellipsis;word-break: break-word;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;position:relative;max-height: 88px;transition: max-height 1s ease;}
.news-info::after {content:"";background:linear-gradient(to left,var(--bg-color-1),transparent);width:60px;height:24px;right:0;bottom:0;position:absolute;}
.news-info.open {overflow: initial;-webkit-line-clamp:unset;max-height: 400px;}
.news-info.open::after {background: none;}
.news-info a:link,.news-info a:visited {color:var(--blue50);text-decoration: underline !important;}
.expand-btn {background: var(--bluebg);color:var(--second-color);font-size:12px;line-height:28px;text-align:center;padding: 0;margin:10px 15px;border-radius: 20px;display:block;cursor:pointer;transition:all 0.2s linear;}
.expand-btn i {background: url(../images/open-off.svg)no-repeat left center/cover;width: 12px;height: 12px;margin-left:3px;vertical-align: -1px;transition: all 0.2s linear;display: inline-block;cursor:pointer;}
.expand-btn.on i,.expand-btn:hover i {transform: rotate(180deg);}
.expand-btn:hover {opacity: 0.7;}
.news .infoitem {margin: 10px 0 0 0;}
.news .counts {cursor:pointer;}
.news .counts font {margin-left:4px;}
.likeicon {background: url(../images/like.svg)no-repeat left center/cover;width: 16px;height: 16px;vertical-align: -3px;display: inline-block;}
.on .likeicon {background: url(../images/like-on.svg)no-repeat left center/cover;}
.label {background:var(--bg-hightlight-9);color:#5690d2 !important;font-size:12px;padding:0 5px;margin:0 2px 0 0;border-radius:20px;vertical-align:-4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;cursor:pointer;transition:all 0.2s linear;}
.label::before {content:"#";font-size:12px;margin-right:4px;display:inline-block;}
/* .label:hover,.linkmatch:hover {color: var(--thirdly-color);} */
.label.whilst {max-width:70px;}
.label + .linkmatch {max-width:calc(100% - 240px);}
.infoitem {line-height: 20px;margin-top: 5px;}
.infoitem::after {content:"";clear: both;display: block;}
.infoitem .counts {color:var(--text-color-3);font-size:12px;float:right;}
.infoitem .counts.on {color:var(--red40);}
.infoitem .counts span {margin:0 5px 0 2px;}
.infoitem .counts font {margin-left:2px;}
.infoitem .counts .icon {height:13px;/* margin-left:2px;*/vertical-align:-2px !important;}
.realinfoitem{background:var(--bg-color-1);padding:10px 12px;border-bottom:1px solid var(--border-1);display:block;}
.infoimg{background:var(--bg-color-2);width:130px;height:66px;text-align:center;margin-left:10px;border-radius:6px;display:inline-block;cursor:pointer;overflow:hidden;position:relative;}
.liveicon{background:var(--black20);width:45px;height:45px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;cursor:pointer;}
.liveicon::before{content:"";width:0;height:0;border-left:15px solid var(--white);border-right:0 none;border-bottom:10px solid transparent;border-top:10px solid transparent;border-radius:3px;top:50%;left:55%;transform:translate(-50%,-50%);position:absolute;display:inline-block;}

.realinfo{width:calc(100% - 140px);margin:0;float:left;}
.realinfo .infos{color:var(--text-color-1);font-size:14px;letter-spacing:1px;line-height:22px;margin:0;overflow:hidden;text-overflow:ellipsis;word-break:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;-webkit-box-pack:center;}
.realinfo.nopic{width:100%;float:none;margin-bottom:10px;}
.realinfo.nopic .infos{-webkit-line-clamp:2 !important;height:auto;}
.linkmatch{background:var(--bg-color-4);color:var(--text-color-2) !important;font-size:12px;text-decoration:none;padding:0 6px;border-radius:20px;vertical-align:-4px;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;cursor:pointer;transition:all 0.2s linear;}
.linkmatch span{margin-right:5px;}
.linkmatch i{display:inline-block;width:0;height:0;border-top:4px solid var(--gray30);border-bottom:0 none;border-left:4px solid transparent;border-right:4px solid transparent;margin:2px;transform:rotate(-90deg);}

.FTdiscount {background: var(--bg-color-1);color: var(--red40);font-size: 10px;line-height: 14px;font-style: normal;width: max-content;padding-right: 2px;border: 1px solid var(--border-hightlight-3);border-radius: 3px;vertical-align: -4px;overflow: hidden;display: inline-block;}
.FTdiscount i {background: var(--red40);color: var(--text-white);font-style: normal;padding: 0 2px;margin-right: 2px;}
.infoimg img {width:100%;height:100%;object-fit:cover;vertical-align:middle;}

.GM_Q {outline-color:#ff8816 !important;}
.subGM_Q {outline-color:#5db310 !important;}
.GM_Q::before {content:"资深";background:linear-gradient(90deg,#ffc117,#ff5d0f);}
.subGM_Q::before {content:"高级";background:linear-gradient(90deg,#b9e600,#119f3c);}
.GM_Q::before,.subGM_Q::before{position:absolute;top:auto;bottom:-4px;left:50%;width:24px;color:#fff;outline:1px solid #f0f0f0;font-size:9px;line-height:14px;text-align:center;padding:0 4px;border-radius:10px;transform:translate(-50%,0) rotate(0);display:block;z-index:2;}
.recom .icon, .hotwrapul .headicon, a.Username .icon {width:36px !important;height:36px !important;margin:2px auto !important;border:2px solid #fff;outline:2px solid #f0f0f0;border-radius:50%;position:relative;}
