﻿:root {
    /*全局颜色定义 -------*/
    /*BLUE蓝色*/
    --blue70: #0170CA;
    --blue50: #0A8FEA;
    --blue20: #8BC6F4;
    --blue10: #E2F1FC;
    /*RED红色*/
    --red60: #E62229;
    --red40: #F04545;
    /*Green绿色*/
    --green80: #008000;
    --green60: #2CA31F;
    /*黄色*/
    --yellow1: #FFE8A3;
    --yellow2: #ffefdd;
    --yellow3: #F2D8B1;
    --yellow4: #fffaef;
    --yellow60: #F9AF06;
    /*GRAY灰色*/
    --gray10: #f0f0f0;
    --gray20: #e5e5e5;
    --gray30: #d1d1d1;
    --gray40: #aaa;
    --gray50: #999;
    --gray60: #666;
    --gray70: #444;
    --gray80: #333;
    --gray90: #111;
    --steelgray1: #475C85;
    --steelgray2: #666971;
    --steelgray3: #999EAC;
    --steelgray4: #A9ABB1;
    --steelgray5: #F6F8FA;
    --white80: rgba(255, 255, 255, .8);
    --white60: rgba(255, 255, 255, .6);
    --white40: rgba(255, 255, 255, .4);
    --black50: rgba(0, 0, 0, .5);
    --black30: rgba(0, 0, 0, .3);
    --black20: rgba(0, 0, 0, .2);
    --black: #000;
    --white: #FFF;
    /*全局颜色定义 -------*/
    --primary-color: var(--blue70);
    --second-color: var(--blue50);
    --body-bg: var(--gray10);
    /*背景色*/
    --bg-color-1: var(--white);
    --bg-color-2: var(--gray10);
    --bg-color-3: var(--gray20);
    --bg-color-4: #f0f5f8;
    --bg-hightlight-1: var(--yellow2);
    --bg-hightlight-2: var(--steelgray5);
    --bg-hightlight-3: var(--yellow60);
    --bg-hightlight-4: var(--blue50);
    --bg-hightlight-5: var(--red40);
    --bg-hightlight-6: var(--blue70);
    --bg-hightlight-7: var(--green60);
    --bg-hightlight-8: var(--yellow4);
    --bg-hightlight-9: var(--blue10);
    --bg-hightlight-10: #E4EBF3;
    --white-bg: var(--white);
    /*文字*/
    --text-color-1: var(--gray80);
    --text-color-2: var(--steelgray2);
    --text-color-3: var(--steelgray3);
    --text-color-4: var(--gray40);
    --text-hightlight-1: var(--blue50);
    --text-hightlight-2: var(--green80);
    --text-hightlight-3: var(--red60);
    --text-hightlight-4: #9A5F4B;
    --text-hightlight-5: var(--yellow60);
    --text-white: var(--white);
    --score-color: #ffc341;
    /*边框*/
    --border-1: var(--gray10);
    --border-2: var(--gray30);
    --border-3: var(--gray20);
    --border-4: rgba(0, 0, 0, .07);
    --border-hightlight-1: var(--blue20);
    --border-hightlight-2: var(--yellow3);
    --odds-up: #ffe5cb;
    --odds-down: #ebfdaf;
    --score-bg: #ffe077;
    --theme-icon: url(/images/light.svg);
    --hight-score-bg: #fde7a7;
    /* #ffcd3f; */
}

/*夜间模式CSS定义------------------theme_dark*/
.theme--dark {
    --blue70: #003662;
    --blue20: #1a66a4;
    --blue10: #1e242b;
    --red60: #B53535;
    --yellow1: #4D4634;
    --yellow2: #31200b;
    --yellow60: #ab7908;
    --steelgray1: var(--gray50);
    /*primary品牌色&BODY*/
    --primary-color: var(--blue70);
    --second-color: var(--blue50);
    --body-bg: var(--gray90);
    /*dark背景色*/
    --bg-color-1: #191919;
    --bg-color-2: var(--gray80);
    --bg-color-3: var(--gray70);
    --bg-color-4: var(--gray80);
    --bg-hightlight-1: var(--yellow2);
    --bg-hightlight-2: #212325;
    --bg-hightlight-3: var(--yellow60);
    --bg-hightlight-4: var(--blue70);
    --bg-hightlight-5: var(--red60);
    --bg-hightlight-6: var(--blue70);
    --bg-hightlight-7: var(--green80);
    --bg-hightlight-8: var(--yellow2);
    --bg-hightlight-9: var(--blue10);
    --bg-hightlight-10: #000;
    --white-bg: var(--gray90);
    --text-color-1: var(--gray20);
    --text-color-2: var(--gray40);
    --text-color-3: var(--gray60);
    --text-color-4: var(--gray50);
    --text-hightlight-1: var(--blue50);
    --text-hightlight-2: var(--green80);
    --text-hightlight-3: var(--red60);
    --text-hightlight-4: #BCA78F;
    --text-hightlight-5: var(--yellow60);
    --text-white: var(--white);
    --score-color: #ff777c;
    --border-1: #252525;
    --border-2: var(--gray80);
    --border-3: var(--gray80);
    --border-4: rgba(255, 255, 255, .1);
    --border-hightlight-1: var(--blue70);
    --border-hightlight-2: var(--yellow1);
    --odds-up: #3D230A;
    --odds-down: #262E0D;
    --score-bg: #383324;
    --theme-icon: url(/images/dark.svg);
    --hight-score-bg: #c96b00;
}


body {
    background-color: var(--body-bg);color: var(--text-color-1);font-size: 12px;
    line-height: 20px;font-weight: normal;
    font-family: "微软雅黑", "黑体", Arial;
    -webkit-user-select: none;
    -webkit-text-size-adjust: none;
}
body, p, input, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, form {
    margin: 0;
    padding: 0;
    list-style: none;
    vertical-align: middle;
}
a, a:hover, a:active, a:visited, a:link, a:focus {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    outline: none;
    background: none;
    text-decoration: none;
}

.header {
    background: #d20515 url(/images/worldcup/matchbg-LIGA.png) no-repeat center;
    background-size: 100%;
    color: var(--text-white);
    font-size: 20px;
    text-align: center !important;
    font-weight: 600;
    line-height: 44px;
}
.header .back {    
    width: 14px;
    height: 14px;
    border-left: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    margin-left: 15px;
    left: 3px;
    top: 15px;
    position: absolute;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    display: inline-block;
    z-index:1 !important;
}
.subtit {font-size: 16px;}
.subtit span {background: var(--black20);padding: 2px 15px 4px 15px;border-radius: 20px;}

.subMenu {
    overflow: hidden;
    position: relative;
}

    .subMenu a {
        color: #ffe15c;
        width: 20%;
        float: left;
        line-height: 40px;
        text-align: center;
        font-size: 16px;
        font-weight: normal;
    }

        .subMenu a.on {
            color: var(--text-white);
            background: none;
            font-weight: 600;
            position: relative;
        }

            .subMenu a.on::after {
                content: "";
                width: 10px;
                height: 10px;
                background: var(--body-bg);
                transform: translateX(-50%) rotate(45deg);
                position: absolute;
                bottom: -5px;
                left: 50%;
            }

    .subMenu i {
        background: #d52b1e;
        color: #fff;
        width: 16px;
        height: 16px;
        border-radius: 10px;
        font-style: normal;
        font-size: 12px;
        line-height: 16px;
        position: absolute;
        right: 1px;
        top: 1px;
    }

.leagueItems {
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}

    .leagueItems ul {
        background: var(--bg-color-1);
        border-bottom: solid 1px var(--border-1);
        display: flex;
        ;
        overflow: hidden;
    }

        .leagueItems ul li {
            flex: 1;
            float: left;
            text-align: center;
            line-height: 35px;
            display: block;
            color: var(--text-color-2);
        }
            /*.leagueItems ul li span {background: #f2f4ff;color: #7c89bb;font-size: 14px;line-height: 20px;width: 90%;padding: 2px 10px;border-radius: 20px;display: inline-block;}*/
            .leagueItems ul li span {
                background: #e4e4e4;
                color: #8c7606;
                font-size: 14px;
                line-height: 20px;
                width: 90%;
                padding: 2px 0;
                border-radius: 20px;
                display: inline-block;
            }

* {
    box-sizing: border-box;
}
/*.leagueItems ul li.on span { background-color:#143cdb;color:#FFF;font-weight: 600;}*/
.leagueItems ul li.on span {
    background-color: #f5a044;
    color: #FFF;
    font-weight: 600;
}

.leagueItems ul li.line {
    display: block;
    width: 100%;
    border-bottom: solid 1px #ccc;
}

#championOdds .leagueItems {
    margin: 8px 8px 0 8px;
}

#championOdds * {
    box-sizing: border-box;
}

#championOdds .subMenu a {
    width: 25%;
}
/* #championOdds {background: #fff;}
#championOdds .leagueItems ul {background: var(--bg-color-1);font-size: 16px;}
#championOdds .leagueItems ul li.on {border-bottom: 2px solid #143cdb; line-height: 32px;color: #143cdb;font-weight: 600;} */

.more a.worldcup {
    background-size: auto 50px;
}

.worldcup img {
    height: 25px;
}

.red {
    color: #e8641a;
}

.green {
    color: #0ba52d;
}

.blue {
    color: #0993d3;
}

table {
    background: var(--bg-color-1);
}

    table tr th, table tr td {
        border-bottom: solid 1px var(--border-1);
    }

    table tr th {
        color: var(--text-color-4);
        font-size: 12px;
        line-height: 22px;
        font-weight: 400;
    }

    table tr td {
        text-align: center;
        line-height: 30px;
    }

#content .match {
    padding: 5px 0px 10px 0;
    overflow: hidden;
    line-height: 26px;
}

    #content .match .team {
        display: flex;
        align-items: center;
        padding: 0 4px;
    }
    /*#content .match .home .team {justify-content: flex-end;height: 26px;overflow: hidden;}*/
    #content .match .home .team {
        justify-content: flex-end;
    }

    #content .match .data {
        font-size: 12px;
    }

        #content .match .data .halfScore {
            padding: 0px 3px;
            display: inline;
        }

        #content .match .data .time {
            padding: 0px 5px;
        }

        #content .match .data .conner {
            float: right;
            padding: 0px 0px 0px 15px;
            background: url("/images/flag.png") left 5px no-repeat;
            background-size: 13px 13px;
        }

.rc, .yc {
    font-size: 11px;
    float: none !important;
    vertical-align: middle;
    text-align: center;
    font-style: normal;
    border-radius: 2px;
    color: #fff;
    margin: 0 2px;
    padding: 0 2px;
    position: relative;
    min-width: 11px;
}

.topicBtn {
    width: 112px;
    line-height: 36px;
    height: auto;
    margin: 0 auto;
    display: block;
    overflow: hidden;
}

.yc {
    background: var(--bg-hightlight-3);
}

.rc {
    background: var(--bg-hightlight-5);
}

.name.green {
    color: var(--text-hightlight-2) !important;
    font-weight: 600;
}

.name.red {
    color: var(--text-hightlight-3) !important;
    font-weight: 600;
}

#content .match .settop {
    margin-top: 12px;
    width: 10%;
    float: left;
    background: url("/images/staroff_s.png?v=1") right center no-repeat;
    height: 36px;
}

    #content .match .settop.on {
        background: url("/images/staron_s.png?v=1") right center no-repeat;
    }

#content .match i {
    width: 16px;
    height: 16px;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, .05);
    line-height: normal;
    box-sizing: content-box;
    margin-top: 0;
    border-radius: 50%;
    overflow: hidden;
}

    #content .match i img {
        width: 100%;
        height: 100%;
        vertical-align: baseline;
    }

#content .match .home {
    float: left;
    width: 43%;
    text-align: right;
}

    #content .match .home i {
        float: right;
    }

#content .match .vs {
    float: left;
    width: 14%;
    text-align: center;
}

#content .match .guest {
    float: left;
    width: 43%;
    text-align: left;
}

    #content .match .guest .data {
        padding-right: 10px;
    }

    #content .match .guest i {
        float: left;
    }

#content .match .msg {
    font-size: 12px;
    position: relative;
    padding: 4px 10px;
    display: block;
    width: 100%;
    float: right;
    line-height: 22px;
    color: var(--text-hightlight-2);
    background-color: var(--bg-color-4);
}

    #content .match .msg::before {
        content: "";
        display: block;
        position: absolute;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid var(--bg-color-4);
        top: -5px;
        left: 50%;
        transform: translate(-50%, 0);
    }

#content .match .vs .name {
    font-size: 16px;
    color: var(--text-color-3);
}

.popupwin {
    background: transparent;
    box-shadow: none;
}

    .popupwin > div {
        background: linear-gradient(100.17deg, #FFF8B7 -2.39%, #FFEBAA 52.9%, #FFF6BC 95.9%);
        font-size: 14px;
        font-weight: bold;
        border: 1px solid #FFE696;
        box-shadow: 0px 0px 6px #FFE2AA;
        border-radius: 4px;
        margin-bottom: 20px;
        padding: 10px 0;
    }

    .popupwin table {
        border: none;
        background: transparent;
    }

        .popupwin table tr td {
            border: none;
            background: transparent;
        }

ul#type_0 li span {
    width: 25%;
}

    ul#type_0 li span.upOdds {
        width: 25%;
    }

ul#type_0 li .name {
    width: 50%;
}

#groupfirst ul li span {
    width: 25%;
}

    #groupfirst ul li span:first-child {
        width: 25%;
    }

    #groupfirst ul li span:last-child {
        width: 50%;
    }

#group {
    margin-top: 0;
}

    #group.contectItems ul {
        border-radius: 0 0 6px 6px;
    }

.contectItems {
    margin: 8px;
    padding-bottom: 100px;
    overflow: hidden;
}

    .contectItems ul {
        background: var(--bg-color-1);
        border-radius: 6px;
        overflow: hidden;
    }

        .contectItems ul li {
            width: 50%;
            float: left;
            line-height: 30px;
            border-bottom: solid 1px var(--border-1);
            font-size: 14px;
        }

            .contectItems ul li span:first-child {
                font-weight: bold;
                width: 30%;
            }

            .contectItems ul li .name {
                text-align: left;
                width: 70%;
                height: 30px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            /* .contectItems ul li:nth-child(even) {border-left: solid 1px var(--border-1);} */
            .contectItems ul li span {
                width: 33%;
                float: left;
                text-align: center;
            }

                .contectItems ul li span:first-child {
                    background-color: #f8f9f9;
                    border-left: 1px solid var(--border-1);
                    border-right: 1px solid var(--border-1);
                }

                .contectItems ul li span:last-child {
                    padding-left: 10px;
                }

.groud-t {
    width: 100% !important;
}

    .groud-t::before {
        display: block;
        width: 100%;
        height: 6px;
        background-color: var(--body-bg);
        content: "";
    }

    .groud-t:first-child:before {
        height: 0;
    }

    .groud-t p {
        color: #7c89bb;
        padding: 0 0 0 10px;
        font-weight: 600;
        font-size: 14px;
    }

.downOdds::before, .upOdds::before {
    content: "";
    background: url("/images/worldcup/down.svg") no-repeat center;
    background-size: 100%;
    width: 10px;
    height: 10px;
    margin-right: 2px;
    display: inline-block;
}

.upOdds::before {
    background: url("/images/worldcup/up.svg") no-repeat center;
    background-size: 100%;
}

.downOdds {
    color: #368d00;
}

.upOdds {
    color: #ff2b06;
}

.on {
    color: red;
}

.tabs {
    margin: 12px auto;
    overflow: hidden;
    padding: 1px !important;
}

    .tabs ul {
        overflow: hidden;
        width: 60%;
        margin: 0 auto;
        border-radius: 20px;
        background: var(--bg-color-2);
        padding: 2px;
    }

        .tabs ul li {
            width: 25%;
            float: left;
            text-align: center;
            line-height: 30px;
            color: var(--text-color-2);
            font-size: 14px;
        }

            .tabs ul li:hover {
                color: #F00;
            }

            .tabs ul li.on {
                background: var(--bg-color-1);
                color: var(--text-color-1);
                font-weight: 600;
                border-radius: 20px;
                box-shadow: 0 0 3px rgb(0 0 0 / 12%);
            }

.out span {
    color: #999;
}

#content .match .team .name {
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    line-height: 26px;
    text-overflow: ellipsis;
    margin: 0 4px;
    max-width: calc(100% - 56px);
}
/* @media screen and (min-width:700px) { #content .match .team .name {max-width: 80%;}}
@media screen and (max-width:414px) { #content .match .team .name {max-width: 55%;}}
@media screen and (max-width:375px) { #content .match .team .name {max-width: 55%;}}
@media screen and (max-width:320px) { #content .match .team .name {max-width: 46%;}} */

.spacing {
    height: 6px;
    background-color: var(--body-bg);
    display: block;
    clear: both;
}

.information {
    display: inline-block;
    color: var(--text-hightlight-4);
    padding: 0 14px 0 26px;
    line-height: 21px;
    border-radius: 20px;
    background: #fbf1d2 url(/images/worldcup/star.png) no-repeat 10px 4px;
    background-size: 13px;
    margin: 6px 0 0 0;
    display: block;
    margin: 6px auto 0 auto;
    width: 120px;
    clear: both;
}


/*对阵图*/
.vs-title {
    line-height: 60px;
    font-size: 20px;
    font-weight: bold;
    color: #ffd68c;
    background: linear-gradient(90deg, #FFD875 3.57%, #FFB054 50.48%, #FFD028 96.43%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

    .vs-title .close {
        width: 62px;
        height: 22px;
        border-radius: 50%;
        margin: 9px 10px 0 0;
        float: right;
        position: relative;
        cursor: pointer;
    }

        .vs-title .close::before, .vs-title .close::after {
            content: "";
            background: #fff;
            width: 18px;
            height: 1px;
            position: absolute;
            top: 20px;
            right: 0;
            transform: rotate(45deg);
        }

        .vs-title .close::after {
            transform: rotate(-45deg);
        }

/*.againstEchart{*/ /*background: var(--bg-color-1);*/ /*background: linear-gradient(0deg,transparent,#0e2583);width:100%;height:100vh;padding:5% 8px;margin-bottom: 55px;border-radius: 6px;pointer-events:all;overflow-y:hidden;box-sizing:border-box;}*/
.againstEchart {
    /* background: var(--bg-color-1); */
    background: linear-gradient(0deg, transparent, #2b2b21);
    width: 100%;
    height: 100vh;
    padding: 5% 8px;
    margin-bottom: 55px;
    border-radius: 6px;
    pointer-events: all;
    overflow-y: hidden;
    box-sizing: border-box;
}

    .againstEchart p {
        padding-left: 0 !important;
        padding-bottom: 0 !important;
        padding-top: 1px;
    }

    .againstEchart .double-round, .againstEchart .single-round, .againstEchart .top-round {
        display: flex;
        justify-content: space-between;
    }

        .againstEchart .double-round .ranks-son, .againstEchart .single-round .ranks-son, .againstEchart .top-round .ranks-son {
            width: 23.2vw;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
        }

            .againstEchart .double-round .ranks-son .logo-box, .againstEchart .single-round .ranks-son .logo-box, .againstEchart .top-round .ranks-son .logo-box {
                width: 100%;
                min-height: 8.533vw;
                /* background: #fff9e3; */
                background: var(--white);
                display: flex;
                padding: 1.067vw;
                box-sizing: border-box;
                justify-content: space-between;
                border-radius: 10.533vw;
                align-items: center;
                font-size: 11px;
                line-height: 14px;
                text-align: center;
                word-break: break-word;
            }

                .againstEchart .double-round .ranks-son .logo-box .son-img, .againstEchart .single-round .ranks-son .logo-box .son-img, .againstEchart .top-round .ranks-son .logo-box .son-img {
                    width: 6.4vw;
                    height: 6.4vw;
                    background-size: cover;
                    background-position: 50%;
                    background-repeat: no-repeat;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 1px solid #efefef;
                }

        .againstEchart .double-round.MS .ranks-son .logo-box {
            min-height: 13.533vw;
        }

    .againstEchart .scorebox {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

        .againstEchart .scorebox .mscore {
            color: var(--text-color-3);
            font-size: 2.8vw;
        }

    .againstEchart .double-round .ranks-son .logo-box .score, .againstEchart .single-round .ranks-son .logo-box .score, .againstEchart .top-round .ranks-son .logo-box .score {
        display: flex;
        align-items: center;
        padding: 0 !important;
    }

        .againstEchart .double-round .ranks-son .logo-box .score span, .againstEchart .single-round .ranks-son .logo-box .score span, .againstEchart .top-round .ranks-son .logo-box .score span {
            font-size: 3.5vw;
            color: var(--gray80);
        }

        .againstEchart .double-round .ranks-son .logo-box .score .defeat, .againstEchart .single-round .ranks-son .logo-box .score .defeat, .againstEchart .top-round .ranks-son .logo-box .score .defeat {
            color: var(--text-color-3);
        }

    .againstEchart .double-round .ranks-son .name-box p:first-child, .againstEchart .single-round .ranks-son .name-box p:first-child, .againstEchart .top-round .ranks-son .name-box p:first-child {
        text-align: left;
    }

    .againstEchart .double-round .ranks-son .name-box p, .againstEchart .single-round .ranks-son .name-box p, .againstEchart .top-round .ranks-son .name-box p {
        color: var(--text-white);
        font-size: 3.2vw;
        text-align: center;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        padding-right: 0;
        box-sizing: border-box;
        line-height: 22px;
    }

    .againstEchart .double-round .ranks-son .name-box, .againstEchart .single-round .ranks-son .name-box, .againstEchart .top-round .ranks-son .name-box {
        width: 100%;
        margin: 0 0.58vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
    }

    .againstEchart .double-round .ranks-son .line-box, .againstEchart .single-round .ranks-son .line-box, .againstEchart .top-round .ranks-son .line-box {
        width: 23vw;
        display: flex;
        height: 4.267vw;
    }

    .againstEchart .top-round .ranks-son .line-box {
        width: 14.933vw;
    }

        .againstEchart .double-round .ranks-son .line-box .son-ling:first-child.blue-won, .againstEchart .single-round .ranks-son .line-box .son-ling:first-child.blue-won, .againstEchart .top-round .ranks-son .line-box .son-ling:first-child.blue-won {
            border-left: 1px solid #00c4ff;
            border-bottom: 1px solid #00c4ff;
        }

        .againstEchart .double-round .ranks-son .line-box .son-ling:first-child, .againstEchart .single-round .ranks-son .line-box .son-ling:first-child, .againstEchart .top-round .ranks-son .line-box .son-ling:first-child {
            border-left: 1px solid var(--steelgray1);
            border-bottom: 1px solid var(--steelgray1);
        }

        .againstEchart .double-round .ranks-son .line-box .son-ling:last-child, .againstEchart .single-round .ranks-son .line-box .son-ling:last-child, .againstEchart .top-round .ranks-son .line-box .son-ling:last-child {
            border-right: 1px solid var(--steelgray1);
            border-bottom: 1px solid var(--steelgray1);
        }

    .againstEchart .finals-round .line-box {
        width: 26vw;
        display: flex;
        height: 5vw;
        margin: 0 auto;
    }

        .againstEchart .finals-round .line-box:first-child .son-ling:first-child {
            border-left: 1px solid #00c4ff;
            border-top: 1px solid #00c4ff;
        }

        .againstEchart .finals-round .line-box:first-child .son-ling:last-child {
            border-right: 1px solid transparent;
            border-top: 1px solid transparent;
        }

        .againstEchart .finals-round .line-box:last-child .son-ling:last-child {
            border-right: 1px solid #f4e100;
            border-bottom: 1px solid #f4e100;
        }

        .againstEchart .finals-round .line-box:last-child .son-ling:first-child {
            border-left: 1px solid transparent;
            border-bottom: 1px solid transparent;
        }
    /* .againstEchart .finals-round .line-box .son-ling:first-child.blue-won,.againstEchart .finals-round .line-box .son-ling:last-child.blue-won {border-color: #0077ff;}
.againstEchart .single-round .ranks-son .name-box:after {background: #0077ff !important;}
.againstEchart .finals-round .line-box .son-ling:first-child.red-won,.againstEchart .finals-round .line-box .son-ling:last-child.red-won {border-color: #ff6100;}
.againstEchart .single-round .ranks-son .middle-red:after {background: #ff6100 !important;} */

    .againstEchart .double-round .ranks-son .line-box .son-ling:last-child.blue-won, .againstEchart .single-round .ranks-son .line-box .son-ling:last-child.blue-won, .againstEchart .top-round .ranks-son .line-box .son-ling:last-child.blue-won {
        border-right: 1px solid #00c4ff;
        border-bottom: 1px solid #00c4ff;
    }

    .againstEchart .double-round .ranks-son .middle-blue, .againstEchart .single-round .ranks-son .middle-blue, .againstEchart .top-round .ranks-son .middle-blue {
        width: 10.667vw;
        height: 4.267vw;
    }

        .againstEchart .double-round .ranks-son .middle-blue:after, .againstEchart .single-round .ranks-son .middle-blue:after, .againstEchart .top-round .ranks-son .middle-blue:after {
            content: "";
            height: 4.267vw;
            width: 1px;
            background: #00c4ff;
            display: block;
            margin: 0 auto;
        }

    .againstEchart .double-round .ranks-son .line-box .son-ling, .againstEchart .single-round .ranks-son .line-box .son-ling, .againstEchart .top-round .ranks-son .line-box .son-ling, .finals-round .line-box .son-ling {
        flex: 1;
        box-sizing: border-box;
    }

    .againstEchart .single-round .left-line {
        border-left: 1px solid #00c4ff;
    }

    .againstEchart .single-round .right-line {
        border-right: 1px solid #00c4ff;
    }

    .againstEchart .single-round .line-son {
        width: 5.933vw;
        height: auto;
        margin-bottom: 13.87vw;
        border-bottom: 1px solid #00c4ff;
        box-sizing: border-box;
    }

    .againstEchart .single-round {
        justify-content: center;
    }

    .againstEchart .double-round .double-son {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        align-content: center;
    }

    .againstEchart .finals-round .finals {
        min-height: 14vw;
        width: 42vw;
        position: relative;
        /* background: linear-gradient(100.17deg, #FFFBD7 -2.39%, #FFEBAA 52.9%, #FFF9D2 95.9%); */
        background: #fff2c1;
        padding: 1vw 0;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 10vw;
        box-shadow: 0px 0px 15px 4px #977c10;
    }

        .againstEchart .finals-round .finals .finals-son {
            display: flex;
            justify-content: center;
            margin: 0 5px;
            position: relative;
        }

        .againstEchart .finals-round .finals .score-state {
            color: #333;
            width: 12vw;
            font-size: 14px;
            line-height: 14px;
            text-align: center;
            flex: 1;
        }

    .againstEchart .finals-round .final-box {
        display: flex;
    }

    .againstEchart .finals-round .finals.thi {
        /* background: linear-gradient(100.17deg, #ffead7 -2.39%, #ffd5aa 52.9%, #ffead7 95.9%); */
        background: #ffe7ce;
        box-shadow: none;
    }
        /* .againstEchart .finals-round .finals::before,.againstEchart .finals-round .finals.thi::after {
    content:"冠军赛";background: #f4a500;color: #fff;font-size: 3vw;line-height: 4.2vw;text-align: center;width: 18px;height: 100%;position: absolute;left: -16px;border-radius: 4px 0 0 4px;box-shadow: -2px 0px 10px 4px rgba(255,233,65,0.20);
} */
        .againstEchart .finals-round .finals.thi::before {
            content: "";
            display: none;
        }

        .againstEchart .finals-round .finals.thi::after {
            content: "季军赛";
            background: #c38f71;
            color: #774325;
            left: auto;
            right: -16px;
            border-radius: 0 4px 4px 0;
            box-shadow: none;
        }

    .againstEchart .score-state p {
        padding: 0 !important;
    }

    .againstEchart .lower-round .line-son {
        margin: 13.067vw 0 0 0;
        /* height: 10.4vw; */
        border: none;
        border-top: 1px solid #f4e100;
    }

    .againstEchart .lower-round .right-line {
        border-right: 1px solid #f4e100;
    }

    .againstEchart .lower-round .left-line {
        border-left: 1px solid #f4e100;
    }

    .againstEchart .back-line .line-box .son-ling:last-child.blue-won {
        border-right: 1px solid #f4e100 !important;
        border-top: 1px solid #f4e100 !important;
    }

    .againstEchart .back-line .line-box .son-ling:first-child.blue-won {
        border-left: 1px solid #f4e100 !important;
        border-top: 1px solid #f4e100 !important;
    }

    .againstEchart .back-line .line-box .son-ling:last-child {
        border-right: 1px solid var(--steelgray1);
        border-top: 1px solid var(--steelgray1);
        border-bottom: none !important;
    }

    .againstEchart .back-line .line-box .son-ling:first-child {
        border-left: 1px solid var(--steelgray1);
        border-top: 1px solid var(--steelgray1);
        border-bottom: none !important;
    }

    .againstEchart .lower-round .middle-red {
        width: 100%;
        height: 8.4vw !important;
    }

        .againstEchart .lower-round .middle-red:after {
            height: 8.533vw !important;
        }

    .againstEchart .lower-round .logo-box {
        margin-top: 0 !important;
    }

    .againstEchart .single-round .ranks-son .name-box:after {
        content: "";
        width: 1px;
        height: 100%;
        position: absolute;
        background: #3383dd;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 0;
    }

    .againstEchart .finals-round {
        margin: 0;
    }

    .againstEchart .single-round .ranks-son .logo-box {
        margin-top: 4vw;
    }

    .againstEchart .single-round .ranks-son {
        width: 34.133vw;
    }

    .againstEchart .double-round .double-son .ranks-son {
        width: 35.533vw;
    }

    .againstEchart .single-round .ranks-son .name-box {
        position: relative;
        padding-bottom: 15px;
    }

        .againstEchart .double-round .ranks-son .name-box p:first-child, .againstEchart .single-round .ranks-son .name-box p:first-child, .againstEchart .top-round .ranks-son .name-box p:first-child {
            text-align: left;
        }

        .againstEchart .double-round .ranks-son .name-box p :last-child, .againstEchart .single-round .ranks-son .name-box p :last-child, .againstEchart .top-round .ranks-son .name-box p:last-child {
            text-align: right;
        }

    .againstEchart .double-round .ranks-son .middle-red:after, .againstEchart .single-round .ranks-son .middle-red:after, .againstEchart .top-round .ranks-son .middle-red:after {
        background: #f4e100;
    }

.no-line::after {
    display: none;
}

.againstEchart .finals-round .finals .finals-son .logo-box {
    width: 9vw;
    height: 9vw;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    border: 2px solid #efefef;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.againstEchart .finals-round .finals .finals-son .won-team {
    position: absolute;
    width: 5.333vw;
    height: 4.267vw;
    background: url(/images/worldcup/winer.png) no-repeat;
    background-size: 100%;
    left: 50%;
    margin-left: -2.667vw;
    top: -3.5vw;
}

.againstEchart .finals-round .finals .finals-son .logo-box.win {
    border-color: #ffbf03;
}

.againstEchart .double-round .ranks-son .name-box p:last-child, .againstEchart .single-round .ranks-son .name-box p:last-child, .againstEchart .top-round .ranks-son .name-box p:last-child {
    text-align: right;
}

.defaultName {
    color: var(--white80) !important;
}
/*对阵图*/

.lleft {text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100px;display:block;}

.jfhit {color:var(--text-hightlight-3);font-weight:600;}


.worldcup-top-title { /*background: #f4f4f7;*/
    clear: both;
    line-height: 30px;
    height: 30px;
    padding: 0 2px;
}

    .worldcup-top-title h2 {
        font-size: 16px;
        font-weight: 600;
        float: left;
    }

        .worldcup-top-title h2::before {
            content: "";
            display: inline-block;
            width: 3px;
            height: 12px;
            background-color: #143cdb;
            margin-right: 8px;
            border-radius: 4px;
            vertical-align: 0;
        }

    .worldcup-top-title span {
        float: left;
        display: inline-block;
        padding: 0 10px 0 24px;
        line-height: 26px;
        margin-left: 8px;
        border-radius: 3px;
        background-size: 12px 13px;
    }

.worldcup-top-menu {
    float: right;
    padding-top: 4px;
}

.du {
    color: #4d6be1;
    background: #d9e0ff url(/images/worldcup/du.png) no-repeat 8px;
}

.zz {
    color: #4d6be1;
    background: #d9e0ff url(/images/worldcup/zz.png) no-repeat 8px;
}

.topImg {
    padding: 10px 10px 5px 10px;
    position: relative;
}

.bigImg {
    position: relative;
    height: 160px;
    overflow: hidden;
}

.picTitle {
    height: 160px;
    position: relative;
    overflow: hidden;
}

    .picTitle .img img {
        width: 100%;
    }

    .picTitle .bg {
        background: #000000;
        bottom: 0;
        height: 30px;
        left: 0;
        opacity: 0.6;
        filter: alpha(opacity=60);
        position: absolute;
        width: 100%;
        z-index: 10;
    }

    .picTitle .name {
        bottom: 0;
        color: #FFFFFF;
        height: 30px;
        left: 0;
        line-height: 30px;
        overflow: hidden;
        position: absolute;
        width: 100%;
        z-index: 11;
        font-size: 12px;
    }

        .picTitle .name span {
            font-size: 14px;
            width: 46px;
            height: 30px;
            background: #143cdb;
            float: left;
            display: block;
            text-align: center;
            margin-right: 10px;
        }

        .picTitle .name a {
            color: #FFF;
            font-size: 14px;
        }

/* #GroupContainer {padding: 10px;background-color:#e1dedd;} */
#GroupContainer {border-radius:6px;overflow:hidden;}

.g-tr {border-radius:0 0 4px 4px;overflow:hidden;/* box-shadow:1px 1px 0 rgb(0 0 0 / 4%);*/}
/* .g-tr tr:nth-child(odd) td { background: rgba(0,0,0,0.017);} */
/* .g-tr tr:last-child td{border-bottom:none;} */
.g-tr .rank {color:#bbb;font-size:12px;font-style:italic;font-weight:bold;font-family:"Sofascore Sans Condensed",sans-serif;}

.bigImg li {height:160px;position:absolute;}

.nodata {
    padding: 90px 20px 20px 20px;
    background: url(/images/worldcup/nodata.png) no-repeat center 16px;
    background-size: 20%;
    font-size: 16px;
    color: var(--text-color-3);
}

.matchList {border-radius:6px;}
/*.matchList {padding: 0 10px;background-color:#e1dedd;}
.matchList .match {margin-bottom: 10px;border-radius: 4px;}*/

.idx {
    height: 5px;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
    padding: 0;
    width: 40px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    bottom: 17px;
    right: 16px;
    z-index: 99;
}

    .idx li {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        border-radius: 6px;
        height: 4px;
        background: #fff;
        margin: 0 2px;
        display: block;
        line-height: 0;
        opacity: 0.5;
    }

        .idx li.on {
            opacity: 1;
        }

#content .match .qbBtn {
    line-height: 36px;
    display: block;
    float: left;
    width: 100%;
    clear: both;
}

/* 底部导航 */
#content.eurocontent {
    background: var(--body-bg);
    padding: 8px;
}
    /*#content.eurocontent.diagram {background: #133bdd url(/images/worldcup/oubg.png)no-repeat center bottom;background-size: 100%;padding: 0 8px;}*/
    #content.eurocontent.diagram {
        background: #746024;
        background-size: 100%;
        padding: 0 8px;
    }

.insafe {
    width: 90%;
    position: fixed;
    bottom: 15px;
    left: 50%;
    transform: translate(-50%,0);
    z-index: 10;
    padding-bottom: env(safe-area-inset-bottom);
}

.navbar {
    background: rgba(0,13,65,0.85);
    padding: 5px;
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(0,13,65,0.7);
    display: flex;
    align-items: center;
}

    .navbar .nbtn {
        color: var(--text-white);
        font-size: 14px;
        text-align: center;
        padding: 3px 0;
        border-radius: 20px;
        display: inline-block;
        flex: 1;
    }

        .navbar .nbtn.on {
            background: #f9bf4b;
            color: #000d41;
            font-weight: bold;
        }


.closeBtn:before,.closeBtn:after {content:"";background:var(--gray40);width:60%;height:1px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg);}
.closeBtn:after {transform:translate(-50%,-50%) rotate(45deg);}
.mask-layer {background: var(--black50);width: 100%;height: 100%;top: 0;left: 0;position: fixed;z-index: 99;}

#content {background: var(--body-bg);padding-bottom: env(safe-area-inset-bottom, 40px);padding-bottom: 20px;}
.lastline {color: var(--text-color-4);font-size: 12px;text-align: center;line-height: 20px;margin-top: 10px;position: relative;}
.lastline::before,.lastline::after {content:"";background: linear-gradient(90deg,transparent,var(--border-2));width: 32%;height: 1px;transform: translateY(-50%);top: 50%;left: 0;position: absolute;}
.lastline::after {transform: translateY(-50%) scaleX(-1);left: auto;right: 0;}
.itemtitle {color: var(--text-color-1);font-size: 14px;font-weight: bold;padding: 8px 10px;}
.itemtitle::before {content:"";background: #e2202e;width: 3px;height: 12px;border-radius: 10px;margin-right: 8px;vertical-align: -1px;display: inline-block;}
.itemtitle span {background: var(--bg-color-1);color: var(--text-color-2);font-size: 12px;font-weight: normal;padding: 0 8px;border-radius: 20px;float: right;cursor: pointer;}
.itemtitle .roundbtn {background: #e2202e;color: var(--text-white);font-size: 12px;font-weight: normal;text-align: center;padding: 0 6px 0 8px;border-radius: 20px;float: right;cursor: pointer;}
.itemtitle .roundbtn i,.morebtn i {margin-left: 4px;vertical-align: -2px;border-width: 4px;border-style: solid;border-color: var(--text-white) transparent transparent transparent;display: inline-block;}
.popbox {background: var(--bg-color-1);width: 100%;padding-bottom: env(safe-area-inset-bottom, 40px);padding: 10px;border-radius: 20px 20px 0 0;bottom: 0;left: 0;position: fixed;box-shadow: 0 -3px 20px var(--black30);z-index: 100;}
.popbox .poptit {font-size: 18px;font-weight: bold;text-align: center;padding-bottom: 10px;border-bottom: 1px solid var(--border-1);position: relative;}
.popbox .poptit .closeBtn {width: 30px;height: 30px;top: -4px;right: 0;position: absolute;}
.roundbox {padding: 10px 0;display: flex;flex-wrap: wrap;}
.roundbox .roundlis {background: var(--bg-color-2);color: var(--text-color-1);text-align: center;flex: 0 0 calc(25% - 4px);padding: 5px;margin: 2px;border-radius: 5px;}
.roundbox .roundlis.on {background: #ffe5e5;color: var(--red60);}
.itembox {background: var(--bg-color-1);margin: 0 10px;border-radius: 8px;overflow: hidden;}
.itembox .match {border-bottom: 1px solid var(--border-1);}
.itembox .match:last-child {border: none;}
.morebtn {color: var(--text-color-3);text-align: center;padding: 5px;}
.morebtn i {border-color: var(--text-color-4) transparent transparent transparent;}
.fold-up i {transform: scaleY(-1);vertical-align: 2px;}


/* 集锦 */
.brilgoal {padding: 6px;}
.brilgoalis {width: calc(50% - 12px);margin: 6px;display: inline-block;}
.brilgoalis .infoimg {width: 100%;height: 80px;margin: 0;display: block;}
.brilgoalis .infotit {color:var(--text-color-1);font-size:12px;line-height:20px;text-align: center;margin:5px 2px 0 2px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;}


/* 资讯 */
.liveicon {background:var(--black30);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;}
.realinfoitem {background:var(--bg-color-1);padding:10px 12px;border-bottom:1px solid var(--border-1);display:block;}
.realinfoitem:last-child {border: none;}
.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;
}
.infoimg img {width:100%;height:100%;object-fit:cover;}
.realinfo {width:calc(100% - 140px);margin:0;float:left;}
.realinfo.nopic {width:100%;float:none;margin-bottom:10px;}
.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 .infos {-webkit-line-clamp:2 !important;height:auto;}
.infoitem::after {content:"";clear: both;display: block;}
.infoitem .userN {color:#5690d2;margin-right:2px;}
.infoitem .type {/*background:#F6F7F9;border-radius:20px;*/line-height:14px;border-left:1px solid var(--border-4);padding:0 5px;display:inline-block;}
.infoitem .type::before {content:"";background-size:100%;width:12px;height:12px;vertical-align:-1px;margin:0 4px 0 0;display:inline-block;}
.infoitem .counts {color:var(--text-color-3);font-size:12px;float:right;}
.infoitem .counts span {margin:0 5px 0 2px;}
.infoitem .counts font {margin-left:2px;}
.infoitem .counts .icon {height:13px;margin-left:5px;vertical-align:-2px !important;}
.infoitem .time {color:var(--text-color-3);font-size:12px;margin: 0 !important;float:right;}
.infoitem .time::before {content:"";background: var(--bg-color-3);width: 1px;height: 12px;vertical-align: -2px;margin-right: 5px;display: inline-block;}

.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:-6px;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% - 220px);}
.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:-6px;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);}
