body,button,h1,h2,ol,p,ul {
    padding: 0;
    margin: 0
}

a,button {
    color: inherit
}

.footer .container .declare,.page_game .game_infos .game .time {
    line-height: .2rem
}

:root {
    --root-font-size: 100px;
    --page-max-width: 100vw;
    --page-header-height: 0.5rem;
    --gap-size: 0.1rem;
    --schedule-summary-height: 0.4rem;
    --font-size-main: 0.14rem;
    --font-size-header: 0.16rem;
    --font-size-h1: 0.18rem;
    --font-size-h2: 0.16rem;
    --font-size-box-caption: 0.15rem;
    --color-bg-main: #F7F8FA;
    --color-bg-bar: #2C42AB;
    --color-bg-nav: #FFF;
    --color-bg-box: #FFF;
    --color-font-main: #333;
    --color-font-gray: rgba(0, 0, 0, 0.54);
    --color-font-header: #FFF;
    --color-font-footer: rgba(255, 255, 255, 0.8);
    --color-font-hover: #0054e6;
    --color-font-hover-header: #FFF;
    --color-white: #FFF;
    --color-red: #CC0200;
    --color-orange: #FF5A00;
    --color-blue: #2C42AB;
    --color-live: #f15b5b;
    --color-bg-li-hover: #F7F8FA;
    --color-bg-logo-team: #EEE;
    --color-bg-button-more: #ededed;
    --color-bg-playback: #F7F8FA;
    --color-bg-backtop: rgba(255, 255, 255, 0.8);
    --border-color: #F7F7F7;
    --border-radius: 0.06rem;
    --gradient-game: linear-gradient(to bottom, #2569df 0%, #203e82);
    --icon-logo: url(/fonts/logo.svg);
    --icon-more: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 12L31 24L19 36' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --icon-live: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23fff' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='m24 44c11.0457 0 20-8.9543 20-20s-8.9543-20-20-20-20 8.9543-20 20 8.9543 20 20 20z'/%3E%3Cpath d='m20 24v-6.9282l6 3.4641 6 3.4641-6 3.4641-6 3.4641z'/%3E%3C/g%3E%3C/svg%3E");
    --icon-video: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23fff' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='m4 10h32v28h-32z' fill='none'/%3E%3Cg stroke-linecap='round'%3E%3Cpath clip-rule='evenodd' d='m44 14-8 6.75v6.5l8 6.75z' fill-rule='evenodd'/%3E%3Cpath d='m17 19 6 5-6 5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --icon-recap: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23fff' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='m4 11c0-1.10457.89543-2 2-2h36c1.1046 0 2 .89543 2 2v24c0 1.1046-.8954 2-2 2h-36c-1.10457 0-2-.8954-2-2z' fill='none'/%3E%3Cpath d='m28 17h-8v12h8z' fill='none'/%3E%3Cg stroke-linecap='round'%3E%3Cpath d='m44 17h-8v12h8'/%3E%3Cpath d='m4 17h8v12h-8'/%3E%3Cpath d='m4 13v20'/%3E%3Cpath d='m44 13v20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --icon-brain: url("data:image/svg+xml,%3Csvg fill='none' height='24' viewBox='0 0 48 48' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23fff' stroke-width='3'%3E%3Cpath d='m19.036 44.0002c-.9799-3.1956-2.4582-5.5779-4.4349-7.1469-2.9651-2.3535-7.67627-.8908-9.41652-3.3183-1.74025-2.4276 1.21924-6.8918 2.25776-9.5259 1.03852-2.634-3.98055-3.5654-3.39458-4.3132.39066-.4985 2.92695-1.9371 7.60894-4.3157 1.3303-7.58664 6.2441-11.37996 14.7415-11.37996 12.7459 0 17.6018 10.80596 17.6018 17.67886 0 6.873-5.8799 14.2773-14.2559 15.8738-.749 1.0908.3313 3.2399 3.2407 6.4473' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath clip-rule='evenodd' d='m19.4997 14.5001c-.6533 2.5343-.4589 4.3138.5832 5.3385 1.0421 1.0248 2.8182 1.6949 5.3283 2.0104-.5695 3.2687.1249 4.8022 2.083 4.6004 1.9582-.2018 3.1347-1.0154 3.5297-2.441 3.0603.8601 4.7189.1403 4.9758-2.1594.3855-3.4496-1.4747-6.2014-2.2373-6.2014-.7627 0-2.7385-.0928-2.7385-1.1475 0-1.0548-2.308-1.6507-4.391-1.6507s-.8294-1.4041-3.6897-.8493c-1.9069.3698-3.0547 1.2031-3.4435 2.5z' fill='none' stroke-linejoin='round'/%3E%3Cpath d='m30.5002 25.5002c-1.0169.6311-2.4124 1.6803-3 2.5-1.4689 2.0495-2.6604 3.2974-2.9211 4.6081' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
    --icon-football: url("data:image/svg+xml,%3Csvg fill='none' height='24' viewBox='0 0 48 48' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='2' stroke-width='3'%3E%3Cpath d='m17.8172 4.97973c-10.50815 3.40948-16.24713 14.69777-12.83773 25.19607 3.40939 10.4984 14.69743 16.2475 25.19553 12.8381 10.5081-3.4095 16.2471-14.6978 12.8377-25.1961-3.4094-10.50843-14.6974-16.24754-25.1955-12.83807z'/%3E%3Cpath d='m34 21-10-8-10 8 4 12h12z' fill='none'/%3E%3Cpath d='m34 21 9-3'/%3E%3Cpath d='m36 40-6-7'/%3E%3Cpath d='m18 33-6 7'/%3E%3Cpath d='m14 21-9-3'/%3E%3Cpath d='m24 13v-9'/%3E%3C/g%3E%3C/svg%3E");
    --icon-basketball: url("data:image/svg+xml,%3Csvg fill='none' height='24' viewBox='0 0 48 48' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath d='m24 44c11.0457 0 20-8.9543 20-20s-8.9543-20-20-20-20 8.9543-20 20 8.9543 20 20 20z'/%3E%3Cpath d='m8.5459 11.2727c4.2424 3.6364 6.3636 7.8788 6.3636 12.7273s-2.1212 9.0909-6.3636 12.7272'/%3E%3Cpath d='m39.4545 36.7272c-4.2425-3.6363-6.3637-7.8787-6.3637-12.7272s2.1212-9.0909 6.3637-12.7273'/%3E%3Cpath d='m4 24h40'/%3E%3Cpath d='m24 4v40'/%3E%3C/g%3E%3C/svg%3E");
    --icon-home: url("data:image/svg+xml,%3Csvg fill='none' height='24' viewBox='0 0 48 48' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23fff' stroke-width='3'%3E%3Cpath d='m9 18v24h30v-24l-15-12z' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='m19 29v13h10v-13z' fill='none' stroke-linejoin='round'/%3E%3Cpath d='m9 42h30' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E")
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg-main:#060522;
        --color-bg-box: #061434;
        --color-bg-bar: #0E1945;
        --color-bg-nav: #061434;
        --color-font-main: rgba(255, 255, 255, 0.8);
        --color-font-gray: rgba(255, 255, 255, 0.5);
        --color-font-header: #FFF;
        --color-font-footer: rgba(255, 255, 255, 0.4);
        --border-color: rgba(100, 100, 100, 0.1);
        --color-white: rgba(255, 255, 255, 0.8);
        --color-red: #B42B51;
        --color-orange: #D89216;
        --color-blue: #7d9ddf;
        --color-live: #B42B51;
        --color-bg-li-hover: rgba(255, 255, 255, 0.1);
        --color-font-hover: #58a6ff;
        --color-bg-logo-team: rgba(238, 238, 238, 0.5);
        --color-bg-button-more: rgba(21, 40, 85, 0.8);
        --color-bg-playback: rgba(255, 255, 255, 0.04);
        --color-bg-backtop: rgba(255, 255, 255, 0.2);
        --gradient-game: linear-gradient(to bottom, #002971 0%, #012159)
    }

    .header a,img {
        opacity: .8
    }
}

@media screen and (min-width: 540px) {
    :root {
        --root-font-size:120px
    }
}

@media screen and (min-width: 768px) {
    :root {
        --root-font-size:150px
    }
}

html {
    font-size: var(--root-font-size);
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth
}

ol,ul {
    list-style: none
}

a {
    text-decoration: none
}

a:hover,button:hover {
    color: var(--color-font-hover)
}

h1 {
    font-size: var(--font-size-h1)
}

h2 {
    font-size: var(--font-size-h2)
}

button {
    border: 0;
    background-color: transparent;
    font-size: 100%;
    cursor: pointer
}

body {
    user-select: none;
    -webkit-user-select: none;
    font-size: var(--font-size-main);
    background-color: var(--color-bg-main);
    color: var(--color-font-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "PingFang SC",miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif
}

.footer,.header,.main,.nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.header {
    color: var(--color-font-header);
    background-color: var(--color-bg-bar);
    height: var(--page-header-height);
    position: sticky;
    top: 0;
    z-index: 666
}

.header .logo {
    width: .8rem;
    margin-right: var(--gap-size);
    background: center no-repeat var(--icon-logo);
    background-size: contain;
    position: relative
}

.header .logo::after {
    content: "\5b98\65b9";
    display: block;
    padding: .02rem .04rem;
    border-radius: .03rem;
    color: var(--color-white);
    background-color: rgba(204,2,0,.8);
    position: absolute;
    font-size: .12rem;
    transform: scale(.66);
    top: -.02rem;
    right: -.22rem
}

.box,.page article img,.page_playback article ul.playback {
    border-radius: var(--border-radius)
}

.header nav .active,.header nav a:hover {
    color: var(--color-font-hover-header);
    font-weight: 700
}

.header .logo img {
    position: absolute;
    left: 0;
    display: none
}

.header nav {
    flex: 1;
    font-size: var(--font-size-header)
}

.header nav ul {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly
}

.header nav a:not(.home) {
    font-size: 0
}

.header nav a::after {
    font-size: var(--font-size-header)
}

.header nav a.football::after {
    content: '\8db3\7403'
}

.header nav a.basketball::after {
    content: '\7bee\7403'
}

.header nav a.playback::after {
    content: '\56de\653e'
}

.header nav a.prediction::after {
    content: '\9884\6d4b'
}

.header nav .active {
    display: flex;
    justify-content: center
}

.header nav .active::before {
    position: absolute;
    display: block;
    bottom: 0;
    content: '';
    width: 0;
    border-left: .05rem solid transparent;
    border-right: .05rem solid transparent;
    border-bottom: .05rem solid var(--color-white)
}

.box .head,.schedule details summary {
    border-bottom: 1px solid var(--border-color)
}

.nav {
    background-color: var(--color-bg-nav)
}

.nav .container {
    position: relative
}

.nav .container::after {
    pointer-events: none;
    position: absolute;
    right: 0;
    display: inline-block;
    content: "";
    width: .3rem;
    height: 100%;
    background-image: linear-gradient(to right,rgba(255,255,255,0),var(--color-bg-nav))
}

.nav ul {
    column-gap: var(--gap-size);
    row-gap: .1rem;
    display: flex;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none
}
li::marker {
    content: none; /* 去除列表项前的标记 */
}
.nav ul::-webkit-scrollbar {
    display: none
}

.nav li {
    flex-shrink: 0;
    margin-left: 10px;
}

.nav li .active {
    color: var(--color-blue);
    font-weight: 700
}

.main {
    flex: 1
}

.main .container {
    gap: var(--gap-size);
    flex-direction: column
}

.footer {
    color: var(--color-font-footer);
    background-color: var(--color-bg-bar)
}

.footer .container {
    flex-direction: column;
    font-size: calc(var(--font-size-main) - .02rem);
    gap: var(--gap-size)
}

.footer .container a:hover {
    color: #58a6ff
}

.footer .container .links a {
    word-break: break-all;
    margin-right: var(--gap-size)
}

.container {
    flex: 1;
    width: calc(100% - .2rem);
    max-width: var(--page-max-width);
    display: flex;
    margin: var(--gap-size)
}



/*电脑显示*/
@media screen and (min-width: 992px){
.container img{
    height: 50px;
}
}


/* 平板屏幕 */
@media screen and (max-width: 992px) and (min-width: 768px) {
    /* 设备 大于768px但小于992px加载样式 */
.container img{
    display: none;
}
}


/* 手机屏幕 */
@media screen and (max-width: 768px){
    /* 设备小于768px加载样式 */
    .container img{
    display: none;
}
}


.box .head .datetime,.box .head .more {
    margin-left: auto
}

.box {
    padding: var(--gap-size);
    background-color: var(--color-bg-box)
}

.box .head {
    overflow: hidden;
    color: var(--color-font-gray);
    padding-bottom: var(--gap-size);
    display: flex;
    align-items: center;
    gap: var(--gap-size)
}

.box .head>a {
    flex-shrink: 0;
    flex-grow: 0
}

.box .head .caption {
    font-size: var(--font-size-box-caption);
    display: flex;
    align-items: center;
    font-weight: 700;
    color: var(--color-blue);
    white-space: nowrap
}

.box .head .datetime,.schedule .infos .league {
    font-size: calc(var(--font-size-main) - .02rem)
}

.box .head .caption::before {
    content: '';
    display: inline-block;
    width: .04rem;
    height: .15rem;
    border-radius: .04rem;
    margin-right: .04rem;
    background: var(--color-blue)
}

.box .head .more {
    -webkit-mask: var(--icon-more) no-repeat center;
    mask: var(--icon-more) no-repeat center;
    -webkit-mask-size: cover;
    mask-size: cover;
    display: inline-block;
    content: "";
    width: .18rem;
    height: .18rem;
    margin-right: 0;
    background-color: currentColor;
    margin-top: -.01rem;
    -webkit-mask-position: .02rem;
    mask-position: .02rem
}

.navigation {
    margin-bottom: 0;
    flex: 0
}

.navigation li,.widgets .box {
    flex-shrink: 0
}

.navigation ol {
    width: 100%;
    display: flex;
    color: var(--color-font-gray)
}

.navigation li:last-child {
    flex-shrink: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.navigation li+li::before {
    content: "/";
    margin: 0 .04rem
}

.back-top {
    position: fixed;
    right: .2rem;
    bottom: .6rem;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg fill='none' height='24' viewBox='0 0 48 48' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23999' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='m12 33 12-12 12 12'/%3E%3Cpath d='m12 13h24'/%3E%3C/g%3E%3C/svg%3E") center no-repeat;
    background-size: 50%;
    background-color: var(--color-bg-backtop);
    backdrop-filter: blur(.04rem);
    box-shadow: 0 2px 15px 0 rgba(0,0,0,.1);
    z-index: 666666;
    cursor: pointer
}

@media screen and (min-width: 1024px) {
    :root {
        --root-font-size:100px;
        --page-max-width: 1200px;
        --page-header-height: 0.7rem;
        --gap-size: 0.2rem;
        --schedule-summary-height: 0.44rem;
        --font-size-main: 0.16rem;
        --font-size-header: 0.18rem;
        --font-size-h1: 0.24rem;
        --font-size-h2: 0.2rem;
        --font-size-box-caption: 0.17rem;
        --border-radius: 0.1rem
    }

    .header .logo {
        width: 1.2rem;
        background-size: cover
    }

    .header .logo::after {
        padding: .02rem .06rem;
        font-size: .12rem;
        top: -.1rem;
        right: -.3rem
    }

    .header nav a {
        padding-left: .3rem
    }

    .header nav a:not(.home) {
        font-size: inherit
    }

    .header nav a::after {
        display: none
    }

    .header nav a.home {
        background: no-repeat var(--icon-home);
        background-size: .24rem
    }

    .header nav a.football {
        background: no-repeat var(--icon-football);
        background-size: .24rem
    }

    .header nav a.basketball {
        background: no-repeat var(--icon-basketball);
        background-size: .24rem
    }

    .header nav a.playback {
        background: no-repeat var(--icon-video);
        background-size: .24rem
    }

    .header nav a.prediction {
        background: no-repeat var(--icon-brain);
        background-size: .24rem
    }

    .nav .container::after {
        display: none
    }

    .nav ul {
        flex-wrap: wrap
    }

    .main .container {
        flex-direction: row-reverse
    }

    .footer .container {
        align-items: center;
        gap: calc(var(--gap-size)/ 2)
    }

    .footer .container .declare {
        line-height: .26rem
    }

    .footer .container .links a {
        margin-right: calc(var(--gap-size)/ 2)
    }

    .box .head .datetime::before {
        content: '\66f4\65b0\65f6\95f4\ff1a'
    }

    .body li,.list li {
        position: relative;
        z-index: 0
    }

    .body li::after,.list li::after {
        content: "";
        position: absolute;
        left: calc(var(--gap-size)/ -2);
        right: calc(var(--gap-size)/ -2);
        top: -.01rem;
        bottom: -.01rem;
        background-color: var(--color-bg-li-hover);
        border-radius: .06rem;
        z-index: -1;
        opacity: 0;
        transition: .3s
    }

    .body li:hover::after,.list li:hover::after {
        opacity: 1
    }
}

.widgets {
    width: 100%;
    display: flex;
    gap: var(--gap-size);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .04rem
}

.widgets::-webkit-scrollbar {
    height: .04rem
}

.widgets::-webkit-scrollbar-track {
    background: var(--color-bg-button-more);
    margin: 0 1.6rem;
    border-radius: .02rem
}

.widgets::-webkit-scrollbar-thumb {
    background-color: #4169e1;
    border-radius: .02rem
}

.widgets .box {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    scroll-snap-align: start
}

.widgets .body {
    margin-top: .06rem;
    max-height: 2.1rem;
    overflow: auto
}

.widgets .body::after {
    content: '';
    pointer-events: none;
    height: .5rem;
    width: 100%;
    background-image: linear-gradient(rgba(255,255,255,0),var(--color-bg-box));
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    position: absolute;
    left: 0;
    bottom: 0
}

.widgets li {
    line-height: .3rem;
    display: flex;
    gap: .1rem
}

.widgets .league {
    flex-shrink: 0;
    color: var(--color-font-gray)
}

.widgets .league:hover {
    color: var(--color-font-hover)
}

.widgets .title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

@media screen and (min-width: 1024px) {
    .widgets {
        flex:1;
        max-width: 4rem;
        flex-direction: column;
        padding-bottom: 0
    }

    .widgets .box {
        scroll-snap-align: none;
        max-height: none
    }

    .widgets .body {
        max-height: none;
        overflow: visible
    }

    .widgets .body::after {
        display: none
    }

    .widgets li {
        line-height: .4rem
    }
}

.schedule {
    flex: 1
}

.schedule details summary {
    height: var(--schedule-summary-height);
    font-weight: 700;
    color: var(--color-blue);
    list-style: none;
    cursor: pointer;
    background-color: var(--color-bg-box);
    position: sticky;
    top: var(--page-header-height);
    z-index: 1;
    display: flex;
    align-items: center
}

.schedule details summary::-webkit-details-marker {
    display: none
}

.schedule details summary::after {
    color: var(--color-font-gray);
    -webkit-mask: var(--icon-more) no-repeat center;
    mask: var(--icon-more) no-repeat center;
    -webkit-mask-size: cover;
    mask-size: cover;
    display: inline-block;
    content: "";
    width: .18rem;
    height: .18rem;
    margin-right: 0;
    background-color: currentColor;
    margin-top: -.01rem;
    margin-left: auto;
    transform: rotate(0)
}

.schedule details:last-child li:last-child {
    border-bottom: 0
}

.page article header,.schedule li {
    gap: var(--gap-size);
    border-bottom: 1px solid var(--border-color)
}

.schedule details[open] summary::after {
    transform: rotate(90deg)
}

.schedule li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .1rem 0;
    scroll-margin-top: calc(var(--page-header-height) + var(--schedule-summary-height));
    content-visibility: auto;
    contain-intrinsic-height: .73rem
}

.schedule .playing .status {
    color: var(--color-red)
}

.schedule .empty {
    padding: .2rem 0;
    color: var(--color-font-gray);
    justify-content: center
}

.schedule .infos {
    flex: 1;
    row-gap: .04rem;
    display: flex;
    flex-direction: column
}

.schedule .infos>span {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.schedule .infos .league {
    color: var(--color-font-gray)
}

.schedule .teams {
    flex: 2;
    display: flex
}

.schedule .teams a {
    flex: 1
}

.schedule .teams .team {
    height: .26rem;
    display: flex;
    flex-direction: row;
    align-items: center
}

.schedule .teams .team .logo {
    flex-shrink: 0;
    width: .2rem;
    height: .2rem;
    border-radius: 50%;
    background-color: var(--color-bg-logo-team)
}

.schedule .teams .team .name {
    padding: 0 .06rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}

.schedule .teams .team:last-child .logo {
    order: -1
}

.schedule .teams .vs {
    font-size: 0;
    display: block
}

.schedule .teams .scores {
    line-height: .26rem;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

.schedule .teams .scores .spliter {
    display: none
}

.schedule .teams .scores .win {
    color: var(--color-font-main)
}

.schedule .status,.schedule .teams .scores .lose {
    color: var(--color-font-gray)
}

.schedule .status {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: calc(var(--font-size-main) - .02rem);
    align-items: flex-end;
    row-gap: .04rem
}

.schedule .status a {
    display: flex;
    align-items: center
}

.schedule .status .video {
    color: var(--color-orange)
}

.schedule .status .video a::before {
    -webkit-mask: var(--icon-video) no-repeat center;
    mask: var(--icon-video) no-repeat center;
    -webkit-mask-size: cover;
    mask-size: cover;
    display: inline-block;
    content: "";
    width: .14rem;
    height: .14rem;
    margin-right: .02rem;
    background-color: currentColor;
    margin-top: -.01rem
}

.schedule .status .live {
    color: var(--color-red)
}

.schedule .status .live a::before {
    -webkit-mask: var(--icon-live) no-repeat center;
    mask: var(--icon-live) no-repeat center;
    -webkit-mask-size: cover;
    mask-size: cover;
    display: inline-block;
    content: "";
    width: .14rem;
    height: .14rem;
    margin-right: .02rem;
    background-color: currentColor;
    margin-top: -.01rem;
    animation: living 2s linear 0s infinite
}

@keyframes living {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.schedule .status .brain {
    color: var(--color-blue)
}

.schedule .status .brain a::before {
    -webkit-mask: var(--icon-brain) no-repeat center;
    mask: var(--icon-brain) no-repeat center;
    -webkit-mask-size: cover;
    mask-size: cover;
    display: inline-block;
    content: "";
    width: .14rem;
    height: .14rem;
    margin-right: .02rem;
    background-color: currentColor;
    margin-top: -.01rem
}

@media screen and (min-width: 1024px) {
    .schedule details summary:hover {
        color:var(--color-font-hover)
    }

    .schedule details summary:hover::after {
        color: var(--color-font-hover)
    }

    .schedule li {
        content-visibility: visible;
        contain-intrinsic-height: none
    }

    .schedule .teams .team {
        height: .3rem
    }

    .schedule .teams .scores {
        line-height: .3rem
    }

    .schedule .status .live a::before,.schedule .status .video a::before {
        width: .16rem;
        height: .16rem
    }
}

.index_article .box {
    flex: 1;
    overflow: hidden
}

.index_article .list li {
    line-height: .3rem;
    display: flex;
    gap: .1rem
}

.index_article .list .league {
    flex-shrink: 0;
    color: var(--color-font-gray)
}

.index_article .list .league:hover {
    color: var(--color-font-hover)
}

.index_article .list .title {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.index_article .pagination ul {
    margin-top: var(--gap-size);
    padding-top: var(--gap-size);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: center
}

.index_article .pagination li {
    padding: 0 .04rem
}

.index_article .pagination li .active {
    font-weight: 700;
    color: var(--color-blue)
}

.index_article .pagination li a {
    display: block;
    min-width: .2rem;
    text-align: center
}

@media screen and (min-width: 1024px) {
    .index_article .list {
        display:flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

    .index_article .list li {
        width: 49%;
        line-height: .4rem
    }

    .index_article .pagination li a {
        min-width: .3rem
    }

    .index_schedule .schedule li {
        padding: .15rem 0
    }

    .index_schedule .schedule li>div {
        flex-direction: row;
        align-items: center
    }

    .index_schedule .schedule .infos>span {
        flex: 1
    }

    .index_schedule .schedule .teams {
        flex: 3;
        justify-content: center
    }

    .index_schedule .schedule .teams a {
        display: flex
    }

    .index_schedule .schedule .teams .team {
        flex: 1
    }

    .index_schedule .schedule .teams .team:first-child {
        justify-content: flex-end
    }

    .index_schedule .schedule .teams .team:first-child .logo {
        order: 1
    }

    .index_schedule .schedule .teams .vs {
        line-height: .3rem;
        width: .6rem;
        font-size: inherit;
        font-weight: 700;
        text-align: center;
        color: var(--color-font-gray)
    }

    .index_schedule .schedule .teams .scores {
        width: .8rem;
        flex-direction: row
    }

    .index_schedule .schedule .teams .scores span {
        flex: 1;
        text-align: center
    }

    .index_schedule .schedule .teams .scores .spliter {
        flex: .5;
        display: block
    }

    .index_schedule .schedule .status {
        flex-direction: row-reverse!important
    }

    .index_schedule .schedule .status>span {
        flex: 1;
        display: flex;
        justify-content: flex-end
    }
}

.index_league .profile {
    flex: 0;
    margin-bottom: 0
}

.index_league .profile .box {
    flex: 1;
    position: relative
}

.index_league .profile .logo {
    padding: var(--gap-size);
    margin: 0 var(--gap-size) 0 0;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    object-fit: contain;
    background-color: var(--color-bg-logo-team);
    float: left
}

.index_league .profile article {
    word-break: break-all;
    line-height: .24rem;
    max-height: .7rem;
    overflow: hidden
}

.index_league .profile article h1 {
    font-size: var(--font-size-h2)
}

.index_league .profile article p {
    text-indent: 2em
}

.index_league .profile label[class=show-more] {
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: pointer;
    padding: .04rem .1rem;
    width: .2rem;
    text-align: center;
    color: var(--color-font-gray);
    border-radius: var(--border-radius) 0;
    background-color: var(--color-bg-button-more);
    opacity: .9;
    line-height: normal
}

.index_league .profile label[class=show-more]::before {
    content: '+'
}

.index_league .profile input[id=show-more]:checked~article {
    max-height: fit-content;
    overflow: visible
}

.index_league .profile input[id=show-more]:checked~label[class=show-more]::before {
    content: '-'
}

@media screen and (min-width: 1024px) {
    .index_league .profile article {
        line-height:.3rem;
        max-height: 1.2rem
    }

    .index_league .profile .logo {
        width: .7rem;
        height: .7rem
    }
}

.page article {
    word-break: break-all;
    flex: 1;
    font-size: calc(var(--font-size-main) + .01rem);
    line-height: .27rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: var(--gap-size)
}

.page article header {
    display: flex;
    flex-direction: column;
    padding-bottom: var(--gap-size)
}

.page article header .info {
    font-size: var(--font-size-main);
    color: var(--color-font-gray);
    display: flex;
    justify-content: space-between
}

.page article header .info .time {
    flex-shrink: 0
}

.page article header .info .author {
    margin-left: .2rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.page article img {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1.77777778;
    object-fit: cover
}

.page article .content p {
    margin: .1rem 0
}

.page article table {
    margin: var(--gap-size) 0;
    width: 100%;
    border-collapse: collapse;
    border-style: hidden;
    font-size: calc(var(--font-size-main) - .01rem);
    table-layout: fixed
}

.page article tr {
    line-height: .35rem;
    border-bottom: 1px dashed var(--border-color)
}

.page article td {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.page article td:nth-child(1) {
    width: 25%;
    color: var(--color-font-gray)
}

.page article td:nth-child(2) {
    width: 40%
}

.page article td:nth-child(3) {
    width: 15%;
    text-align: center
}

.page article td:last-child {
    width: 15%;
    text-align: right;
    color: var(--color-font-gray)
}

.page .widgets {
    flex-direction: column
}

.page .widgets .body {
    max-height: none;
    overflow: visible
}

.page .widgets .body::after {
    display: none
}

@media screen and (min-width: 1024px) {
    .page .container {
        flex-direction:row
    }

    .page article {
        line-height: .3rem
    }

    .page article tr {
        line-height: .4rem
    }
}

.page_playback article ul.playback {
    background-color: var(--color-bg-playback);
    font-size: var(--font-size-main);
    padding: calc(var(--gap-size)/ 2) var(--gap-size);
    color: var(--color-blue)
}

.page_playback article ul.playback li {
    display: flex;
    line-height: .4rem;
    gap: .1rem
}

.page_playback article ul.playback li+li {
    border-top: 1px dashed var(--border-color)
}

.page_playback article ul.playback span {
    flex-shrink: 0;
    display: flex;
    align-items: center
}

.page_playback article ul.playback a {
    color: var(--color-blue);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    direction: rtl
}

.page_playback article ul.playback .recap,.page_playback article ul.playback .video {
    color: var(--color-orange)
}

.page_playback article ul.playback .video::before {
    -webkit-mask: var(--icon-video) no-repeat center;
    mask: var(--icon-video) no-repeat center;
    -webkit-mask-size: cover;
    mask-size: cover;
    display: inline-block;
    content: "";
    width: .16rem;
    height: .16rem;
    margin-right: .02rem;
    background-color: currentColor;
    margin-top: -.01rem
}

.page_playback article ul.playback .recap::before {
    -webkit-mask: var(--icon-recap) no-repeat center;
    mask: var(--icon-recap) no-repeat center;
    -webkit-mask-size: cover;
    mask-size: cover;
    display: inline-block;
    content: "";
    width: .16rem;
    height: .16rem;
    margin-right: .02rem;
    background-color: currentColor;
    margin-top: -.01rem
}

.page_playback article ul.playback .source {
    color: var(--color-font-gray);
    margin-left: auto
}

@media screen and (min-width: 1024px) {
    .page_playback article ul.playback li {
        line-height:.5rem
    }
}

.page_game .game_infos {
    flex: 0;
    margin-bottom: 0
}

.page_game .game_infos .box {
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-white);
    background-image: var(--gradient-game);
    overflow: hidden
}

.page_game .game_infos .game {
    box-sizing: border-box;
    padding: var(--gap-size) calc(var(--gap-size) * 2);
    width: 100%;
    display: flex
}

.page_game .game_infos .game>div {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center
}

.page_game .game_infos .game .logo {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    padding: .05rem;
    background-color: var(--color-bg-logo-team);
    margin: .2rem 0 .1rem
}

.page_game .game_infos .game .logo img {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    object-fit: contain
}

.page_game .game_infos .game .league,.page_game .game_infos .game .name {
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.page_game .game_infos .game .score {
    font-size: .2rem;
    font-weight: 700;
    justify-content: center
}

.page_game .game_infos .game .score.live {
    color: var(--color-live)
}

.page_game .game_infos .game .status {
    min-height: 1.3rem;
    min-width: .8rem;
    font-size: calc(var(--font-size-main) - .02rem);
    justify-content: center
}

.page_game .game_infos .game .state {
    width: 100%;
    height: .26rem;
    line-height: .26rem;
    border-radius: .2rem;
    text-align: center;
    background-color: rgba(255,255,255,.3);
    margin: var(--gap-size) 0
}

.page_game .game_infos .game .state.live {
    background-color: var(--color-live);
    position: relative;
    z-index: 0
}

.page_game .game_infos .game .state.live::after {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    content: '';
    display: block;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background-color: inherit;
    animation: live-wave 4s linear 1s infinite
}

@keyframes live-wave {
    0% {
        opacity: .9
    }

    100%,50% {
        opacity: 0;
        transform: scale(1.2,1.55)
    }
}

.page_game .game_infos .game .state.final {
    background-color: var(--color-font-gray)
}

.page_game .game_infos .live-src {
    box-sizing: border-box;
    padding: var(--gap-size);
    width: 100%;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    background-color: rgba(255,255,255,.1)
}

.page_game .game_infos .live-src.live a {
    color: #0ff
}

.page_game .game_infos .live-src.live a::before {
    -webkit-mask: var(--icon-live) no-repeat center;
    mask: var(--icon-live) no-repeat center;
    -webkit-mask-size: cover;
    mask-size: cover;
    display: inline-block;
    content: "";
    width: .16rem;
    height: .16rem;
    margin-right: .02rem;
    background-color: currentColor;
    margin-top: -.01rem
}

.page_game .game_infos .live-src.playback a {
    color: #ff8c00
}

.page_game .game_infos .live-src.playback a::before {
    -webkit-mask: var(--icon-video) no-repeat center;
    mask: var(--icon-video) no-repeat center;
    -webkit-mask-size: cover;
    mask-size: cover;
    display: inline-block;
    content: "";
    width: .16rem;
    height: .16rem;
    margin-right: .02rem;
    background-color: currentColor;
    margin-top: -.01rem
}

.page_game .game_infos .live-src ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: var(--gap-size);
    row-gap: calc(var(--gap-size)/ 2 + .03rem)
}

.page_game .game_infos .live-src a {
    color: var(--color-white);
    display: flex;
    align-items: center
}

@media screen and (min-width: 1024px) {
    .page_game .game_infos .game .team {
        flex:2
    }

    .page_game .game_infos .game .logo {
        width: .8rem;
        height: .8rem;
        padding: .1rem
    }

    .page_game .game_infos .game .logo img {
        width: .8rem;
        height: .8rem
    }

    .page_game .game_infos .game .score {
        font-size: .4rem
    }

    .page_game .game_infos .game .status {
        min-height: 1.6rem
    }

    @keyframes live-wave {
        0% {
            opacity: .6
        }

        100%,50% {
            opacity: 0;
            transform: scale(1.2,1.75)
        }
    }

    .page_game .game_infos .game .state {
        font-size: var(--font-size-main);
        height: .4rem;
        line-height: .4rem;
        border-radius: .2rem
    }

    .page_game .game_infos .live-src.live a::before,.page_game .game_infos .live-src.playback a::before {
        margin-right: .04rem;
        width: .18rem;
        height: .18rem
    }
}