.page .index-wrap{display: block;}
.index-top{width: 100%;position: relative;box-sizing: border-box;padding-right: 45%;}

.swiper-container{width:100%;background: #999;position: relative;padding:46% 0 0 0;overflow: hidden;touch-action:pan-y;}
.swiper-wrapper{position: absolute;width: 100%;height: 100%;left:0; top:0;display: flex;transition-property: transform;}
.swiper-wrapper a{float:left;width: 100%;height: 100%;flex-shrink: 0;pointer-events: none;}
.swiper-wrapper .swiper-slide-active {pointer-events: auto;}
.swiper-wrapper img{width: 100%;height: 100%;object-fit: cover;}
.swiper-container .swiper-notification {position: absolute;left: 0;top: 0;pointer-events: none;opacity: 0;z-index: -1000;}
.swiper-pagination {position: absolute;width: 100%;bottom:0;text-align: center;line-height:0;pointer-events: none;white-space: nowrap;}
.swiper-pagination-bullet{display: inline-block;width:24px;height:14px;margin:0 2px;cursor: pointer;position: relative;pointer-events: auto;}
.swiper-pagination-bullet::after{content: "";position: absolute;width:100%;height:4px;border-radius:4px;top:0;left:0;background:rgba(255,255,255,.5);}
.swiper-pagination-bullet-active::after{background: #f5ce1d;}

.vdolist{width:100%;margin-top:20px;}
.vdo-subtit{width: 100%;border-bottom:2px solid #f5ce1d;display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;white-space: nowrap;overflow: hidden;}
.vdo-subtit h4{font-size: 1.375em;line-height: 1;margin: 0;padding:10px;font-weight: normal;background: #f5ce1d;}
.vdo-subtit .fr{padding-top:.25em;display: flex;}
.vdo-subtit a{float: left;font-size:.875em;height: 1em;line-height: 1em;color: #616161;border-left: 1px solid #eee;padding: 0 10px;}
.vdo-subtit a:hover{color:#0C82FB;}
.vdo-subtit a:first-child{border-left: 0;}
.vdolist .list-video{padding-bottom: 0;}
.vdolist .list-video li{width:32.2%;margin-bottom: 26px;}

.artlist{width:45%;height: 100%; box-sizing: border-box;padding-left:18px;padding-bottom:1em;position: absolute;top:0;right: 0;}
.artlist-inner{width: 100%;height: 100%;box-sizing: border-box;padding:10px 15px;box-shadow:0 0 1px rgb(0 0 0 / 20%);background: #fbfbfb;}
.artlist-inner ul{width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: space-between;}
.artlist-inner li{display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: #b1b1b1;line-height: 2em;font-size: .9375em;}
.artlist-inner a{white-space: nowrap;color: #5a5951;}
.artlist-inner a:hover{text-decoration: underline;color: #0C82FB;}
.artlist-inner .big{line-height: 2.875em;margin-top:15px;}
.artlist-inner .big a{font-size: 1.125em;font-weight: bold;color:#82753d}
.artlist-inner .big:first-child{margin-top:0;}

/*dates*/
.index-dates{width: 100%;box-sizing: border-box;display: flex;align-items: stretch;white-space: nowrap;}
.index-dates h4{font-size: 1em;margin:0;padding: 0 15px;background: #0C82FB;color: #fff;display: flex;align-items: center;}
.index-dates .fr{flex:1;display: flex;justify-content:space-between;box-sizing: border-box; overflow-y: auto;border: 1px solid #eee;border-left: 0;padding:0 10px}
.index-dates a{display:block; padding:15px;}
.index-dates a:hover{background: #f5f5f5;}

/*match*/
.index-match{width: 100%; margin-top:20px;padding-bottom:40px;display: flex;}
.matchwrap{flex:1;}
.match-today{box-sizing: border-box;background: #fbfbfb;box-shadow: 0 0 2px rgb(0 0 0 / 20%);}
.match-today a:hover{color: #0C82FB;text-decoration: underline;}

/*match-tit*/
.match-tit{width: 100%;height: 50px;box-sizing: border-box;padding: 0 10px;display: flex;align-items: center;justify-content: space-between;;}
.match-tit h4{font-size:1.375em;color:#666;margin:0;}
.match-tit a{color:#ccac19;font-size: .875em;}
.match-tit a:hover{color: #0C82FB;text-decoration: underline;}

/*match-sub*/
.match-item{width: 100%;box-sizing: border-box;height:2.8em; padding:0 10px;display: flex;justify-content: space-between;align-items: center;border-top: 1px solid #efefef;color:#444;}
.match-item a{color: #615f57;}
.match-item-sub *{font-size: .75em !important; color:#999 !important;font-weight: normal !important;}
.match-item-sub .league{border:0 !important;}
.match-item-sub .score{width:8em !important;}

/*match-list*/
.match-showup{width: 100%;}
.match-load{width: 100%;height:200px;background: #fff;color:#ccc;display: flex;align-items: center;justify-content: center;}
.match-list .match-item:nth-child(2n+1){background: #fff;}
.match-item > div{display: flex;align-items:center;justify-content: center;}

.match-type{width:100%;height:3em;background: #fff;border-top: 1px solid #efefef;display: flex;justify-content:center;align-items: center;font-size:1.125em;color: #82753d;}
.match-type svg{width: 1.25em;height: 1.25em;margin-right:.5em;fill: currentColor;}

.match-item .ft{width:24%;justify-content: space-between;}
.match-item .league{flex:1;display:flex;align-items:center;justify-content:flex-start;font-size:.875em;border-left:4px solid red;}
.match-item .league img{margin-left:5px;height:2em;}
.match-item .league a{margin-left:5px;}

.match-item .time{text-align: center;padding-right:8%;}
.match-item .time b{font-weight: normal;color:#c7a403;}
.match-item .time p{margin:0;font-size: .75em;line-height: 1;color:#888}

.match-item .state{justify-content:flex-start;width:8%;padding-left:2%;}
.match-item .state b{color:#d43b3b;font-weight:normal;}
.match-item .state b::after{content: "'";animation:show_hide 500ms ease 0s infinite alternate;}
@keyframes show_hide { from { opacity: 1; } to { opacity: 0; }  }
.match-item .state span{font-size: .875em;color: #999;}
.match-item .state .half{color:#3b7ed4}

.match-item .fm{flex:1;}
.match-item .score{width:3em;font-weight: bold;margin:0 6px;text-align: center;color:#f60;}
.match-item .team{flex:1;display: flex;align-items: center;justify-content:flex-start;font-size:.875em;}
.match-item .team img{height: 1.5em;margin:0 4px;}
.match-item .teama{justify-content: flex-end;}
.match-item .teama a{text-align: right;}

.match-item .fr{width:16%;}
.match-item .bscore{flex:1;text-align:center;font-size:.875em;color:#888;}
.match-item .play{width:46%;display: flex;align-items:center;justify-content:flex-end;font-size:.875em;}
.match-item .play a{margin-left:.5em;color:#888;}


/*rank*/
.rankwrap{
    margin-left:20px;
    width: 290px;
}
.ranlist{width: 100%;margin-top: 25px;}
.ranlist:nth-of-type(1){margin-top:0;}
.ranlist .top{display: flex;align-items: center;border-bottom:2px solid #f5ce1d;}
.ranlist .top h4{margin:0;color: #82753d;font-size: 1.125em;}
.ranlist .top ol{flex:1;list-style: none;margin:0;padding:4px 0 0 0;display: flex;justify-content: flex-end;}
.ranlist .top li{padding:4px 7px 3px 7px;border-radius:2px 2px 0 0;cursor: pointer;color:#929292;font-size: .9375em;text-align: center;}
.ranlist .top li.active{background: #f5ce1d;color:#333}

.ranlist .list{width: 100%;font-size: .875em;display: none;}
.ranlist .list.active{display: block;}
.ranlist .rankitem{width: 100%;display: flex;align-items: center;text-align: center;padding:.5em 0;color:#67655e;border-radius: 2px;}
.ranlist .rankitem:hover{background: #efede6;}
.ranlist .rankitem img{height: 1.25em;margin-right:4px;}
.ranlist .rankitem .a{width:12%;text-align: center;}
.ranlist .rankitem .b{flex:1;align-items: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: left;}
.ranlist .rankitem .c{width:22%;font-size: .875em;}
.ranlist .rankitem .d{width:12%;font-size: .875em;font-weight: bold;color:#d43b3b;}
.ranlist .ranksub,.ranlist .ranksub:hover{font-size: 12px !important;background: #f9f9f9;color: #999}
.ranlist .ranksub .b{text-indent: 1.5em;}
.ranlist .ranksub .d{color: #999;font-weight: normal;}

@media screen and (max-width: 1000px){
    .index-top{padding-right:48%}
    .artlist{width:48%;}
    .artlist-inner{padding:10px;}
    .artlist-inner li{font-size: .875em;}
    .artlist-inner .big{line-height: 2em;margin-top:10px;}

    .index-dates{font-size: .875em;}
    .index-match{font-size: .875em;}
    .rankwrap{width: 29%;min-width:250px;}
}
@media screen and (max-width:960px){
    .artlist-inner li{font-size: .8125em;}
    .matchwrap img{display: none;}
}

@media screen and (max-width: 768px){
    .page .index-wrap{margin-top:15px}
    .index-top{padding-right:0;}
    .vdolist .list-video li{width:49%;}
    .artlist{
        position: static;
        width: 100%;
        padding:0;
        margin-top: 18px;
    }
    .artlist-inner{
        padding:12px 10px 16px 10px;
    }
    .artlist-inner li{
        font-size: 1em;
    }
    .artlist-inner a:hover{text-decoration:none}
    .artlist-inner .big{
        border-top:1px solid #efeeed;
        padding-top:1em;
        margin-top:1em;
    }
    .artlist-inner .big:first-child{
        border-top:0;
        padding-top:0;
    }
    .index-match{display: block;font-size: 1em;}
    .rankwrap{width:100%;margin:20px 0 0 0;}
    .ranlist .top li{padding:5px 1em 3px 1em;}
    .ranlist .list{font-size:1em;}
}

@media screen and (max-width: 600px){
    .match-today{background:none;box-shadow:none;}
    .match-tit{background: #fbfbfb;border-bottom: 2px solid #f5ce1d;}
    .match-item-sub{display: none;}
    .match-type{border-top:0;padding-top:10px;height:2em;}
    .match-item{position: relative;height:auto;padding-bottom: 3em;padding-top:10px;background: #fbfbfb;margin-top: 10px;border-top: 0;box-shadow: 0 0 2px rgb(0 0 0 / 20%);border-radius:4px;}
    .match-list .match-item:nth-child(2n+1){background: #fbfbfb;}
    .match-item .ft,.match-item .fr{font-size: .75em;white-space: nowrap;}
    .match-item .ft{width: 45%;justify-content: flex-start;}
    .match-item .fr{width:auto;flex:1;justify-content:flex-end;}
    .match-item .league{flex:0}
    .match-item .time{padding:0 0 0 .5em;}
    .match-item .time p{display: inline-block;}
    .match-item .time b{margin-right: 4px;}
    .match-item .bscore{flex:0;}
    .match-item .bscore::before{content: '半: ';}
    .match-item .play{width:auto}
    .match-item .play a{font-size:.875em;color: #1f1f1f;background: #f5ce1d;padding:1px 6px;border-radius: 4px;}
    .match-item .state{width: 10%;color:#d43b3b;}
    .match-item .state b{font-weight: normal;font-size: .875em;}

    .match-item .fm{position: absolute;width: 100%;left:0;top:2.7em;}
    .match-item .fm img{display: block;}
    .match-item .score{margin: 0;}

    .ranlist .top h4{margin-right:1em}
    .ranlist .top li{padding:5px .85em 3px .85em;}
}

@media screen and (max-width: 480px){
    .vdolist .list-video li{width:100%;}
}

@media screen and (max-width:360px){
    .match-item .time p{display:none;}
}