body.skin.is-league-hub,
body.is-league-hub{
    background:#212326;
    color:rgba(255,255,255,.88);
}
.league-hub{
    background:transparent;
    color:rgba(255,255,255,.88);
    padding:32px 0 56px;
    margin-top:0;
}
.league-hub a{
    color:rgba(255,255,255,.88);
}
.league-hub a:hover{
    color:#fff;
    text-decoration:none;
}
.league-hub-inner{
    width:1280px;
    max-width:calc(100% - 24px);
    margin:0 auto;
}
.league-hub-crumbs{
    display:none;
}
.league-hero-row{
    display:flex;
    justify-content:space-between;
    gap:24px;
    margin-bottom:32px;
}
.league-hero{
    flex:1;
    width:628px;
    max-width:calc(50% - 12px);
    min-height:144px;
    height:auto;
    border-radius:12px;
    padding:40px 36px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    overflow:hidden;
    position:relative;
    cursor:pointer;
    background-color:rgba(255,255,255,.04);
    background-image:
        radial-gradient(circle at 88% 18%, rgba(255,255,255,.16), transparent 42%),
        linear-gradient(115deg, rgba(255,255,255,.04), rgba(0,0,0,.18));
    transition:background-color .2s ease, box-shadow .2s ease;
}
.league-hero.is-on,
.league-hero.is-football.is-on{
    background-color:rgba(0,128,255,.88);
    background-image:
        radial-gradient(circle at 88% 18%, rgba(255,255,255,.22), transparent 42%),
        linear-gradient(115deg, rgba(0,128,255,.0), rgba(0,40,90,.18));
    box-shadow:0 8px 24px rgba(0,128,255,.18);
}
.league-hero.is-basketball.is-on{
    background-color:rgba(0,128,255,.88);
}
.league-hero strong{
    display:block;
    font-size:28px;
    line-height:40px;
    font-weight:700;
    color:#fff;
    margin-bottom:8px;
}
.league-hero span{
    display:block;
    font-size:15px;
    line-height:24px;
    color:rgba(255,255,255,.7);
}
.league-hero:hover{
    color:#fff;
}
.league-sport-pane{
    display:none;
    align-items:flex-start;
}
.league-sport-pane.is-on{
    display:flex;
}
.league-hub-body{
    display:flex;
    gap:40px;
    align-items:flex-start;
}
.league-hub-side{
    width:180px;
    flex-shrink:0;
    margin-right:40px;
    background:rgba(255,255,255,.04);
    border-radius:4px;
    overflow:hidden;
    position:sticky;
    top:80px;
}
.league-side-hd{
    height:48px;
    padding:0 12px 0 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    font-size:16px;
    color:rgba(255,255,255,.88);
}
.league-side-hd i{
    width:8px;
    height:8px;
    border-right:2px solid rgba(255,255,255,.45);
    border-bottom:2px solid rgba(255,255,255,.45);
    transform:rotate(-45deg);
    transition:transform .2s ease;
}
.league-side-group.is-open .league-side-hd i{
    transform:rotate(45deg);
    margin-top:-4px;
}
.league-side-bd{
    display:none;
}
.league-side-group.is-open .league-side-bd{
    display:block;
}
.league-side-bd a{
    display:flex;
    align-items:center;
    height:48px;
    padding:0 12px 0 36px;
    font-size:16px;
    color:rgba(255,255,255,.5);
}
.league-side-bd a:hover{
    color:rgba(255,255,255,.88);
    background:rgba(255,255,255,.04);
}
.league-hub-main{
    flex:1;
    min-width:0;
    width:1060px;
}
.league-section{
    margin-bottom:8px;
}
.league-section-hd{
    display:flex;
    align-items:center;
    height:54px;
    padding:0 0 24px 20px;
    background-image:linear-gradient(90deg, #4aa8ff 0, #4aa8ff 3px, transparent 3px);
    background-repeat:no-repeat;
    background-position:left 6px;
    background-size:3px 18px;
}
.league-section-title{
    font-size:20px;
    line-height:34px;
    color:rgba(255,255,255,.88);
    margin:0;
    padding:0;
    font-weight:500;
    position:relative;
}
.league-section-title:before{
    display:none;
}
.league-recent-wrap{
    position:relative;
    padding:0 40px;
}
.league-recent-swiper{
    overflow:hidden;
}
.league-recent-swiper .swiper-slide{
    width:124px;
}
.league-recent-card{
    width:124px;
    height:162px;
    background:rgba(255,255,255,.04);
    border-radius:4px;
    padding:16px 12px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    border:0;
}
.league-recent-card img{
    width:64px;
    height:64px;
    object-fit:contain;
    margin:0 auto 12px;
    display:block;
}
.league-recent-card em{
    display:block;
    font-size:16px;
    font-style:normal;
    color:rgba(255,255,255,.88);
    height:24px;
    line-height:24px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:100%;
}
.league-recent-card span{
    display:inline-block;
    margin-top:auto;
    background:rgba(0,128,255,.12);
    color:rgba(0,128,255,.88);
    border-radius:4px;
    font-size:12px;
    line-height:26px;
    padding:0 12px;
}
.league-recent-prev,
.league-recent-next{
    position:absolute;
    top:50%;
    width:28px;
    height:28px;
    margin-top:-14px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    border:0;
    cursor:pointer;
    z-index:2;
}
.league-recent-prev{left:0}
.league-recent-next{right:0}
.league-recent-prev:after,
.league-recent-next:after{
    content:"";
    position:absolute;
    top:9px;
    left:11px;
    width:7px;
    height:7px;
    border-top:2px solid rgba(255,255,255,.7);
    border-right:2px solid rgba(255,255,255,.7);
}
.league-recent-prev:after{transform:rotate(-135deg);left:10px}
.league-recent-next:after{transform:rotate(45deg);left:7px}
.league-hot-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(200px, 1fr));
    gap:24px 12px;
}
.league-hub-card{
    position:relative;
    background:transparent;
    border:0;
    border-radius:0;
    padding:0 16px 16px 76px;
    min-height:80px;
    display:flex;
    align-items:center;
    gap:0;
}
.league-hub-card:hover{
    border:0;
    box-shadow:none;
}
.league-hub-card-logo{
    position:absolute;
    left:0;
    top:0;
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.league-hub-card-logo img,
.league-recent-card img{
    max-width:64px;
    max-height:64px;
    object-fit:contain;
}
.league-logo-fallback{
    width:64px;
    height:64px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:700;
    font-style:normal;
    color:#fff;
    background:linear-gradient(135deg, rgba(0,128,255,.85), rgba(0,80,180,.95));
    margin:0 auto 12px;
}
.league-hub-card-logo .league-logo-fallback{
    margin:0;
}
.league-hub-card-name{
    display:block;
    font-size:16px;
    font-weight:400;
    line-height:24px;
    color:rgba(255,255,255,.88);
    margin-bottom:8px;
}
.league-hub-card-info{
    min-width:0;
}
.league-hub-card-info p{
    margin:0;
    font-size:14px;
    line-height:18px;
    display:flex;
    flex-wrap:nowrap;
    white-space:nowrap;
}
.league-hub-card-info p a{
    color:rgba(255,255,255,.7);
    margin-right:16px;
    flex-shrink:0;
    white-space:nowrap;
}
.league-hub-card-info p a:hover{
    color:#4aa8ff;
}
.league-list-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
    margin-top:16px;
}
.league-page{
    margin-top:24px;
    text-align:center;
}
.league-page a,
.league-page span{
    display:inline-block;
    min-width:32px;
    padding:4px 10px;
    margin:0 3px 8px;
    border-radius:6px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    color:rgba(255,255,255,.58);
}
.league-page .active,
.league-page span.current{
    background:#4aa8ff;
    border-color:transparent;
    color:#fff;
}

@media (max-width: 1000px){
    body.skin.is-league-hub{min-width:0}
    .league-hub-inner{width:auto}
    .league-hero-row,
    .league-sport-pane.is-on{flex-direction:column}
    .league-hero{
        width:100%;
        max-width:none;
        height:auto;
        padding:28px 24px;
    }
    .league-hero strong{font-size:22px;line-height:32px}
    .league-hub-side{
        width:100%;
        margin:0 0 20px;
    }
    .league-hub-main{width:auto}
    .league-hot-grid{grid-template-columns:repeat(2, 1fr);gap:20px}
    .league-recent-wrap{padding:0 28px}
}