* {
    margin: 0;
    padding: 0;
    font-family: PingFang SC-Medium, PingFang SC;
}

a {
    text-decoration: none;
    color: #4C4C4C;
    cursor: pointer;
 }

 ol, ul, li {
    list-style: none;
 }
body {
    background-color: #F8FAFF;
    color: #333333;
}

/*------------- 首页header------- */
.home_header {
    background: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.home_header .logo{
    padding: .16rem .2667rem .1067rem .5333rem;
    width: .64rem;
    height: .5867rem;
}

.home_header .home_search input{
    width: 4.6933rem;
    height: .7467rem;
    color: #989EAD;
    background: #F8FAFF;
    border-radius: .3733rem;
    outline: none;
    border: none;
    background: url(../images/search.png) no-repeat #F8FAFF;
    background-position: .3733rem;
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    padding-left: .9067rem;
    margin: .1067rem 0;
}

.home_header .toApp {
    margin: .2133rem 0 .2133rem 0;
    width: 1.76rem;
    height: .5867rem;
    border-radius: .3467rem;
    border: .0533rem solid #333333;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    text-align: center;
    line-height: .5867rem;
}

.home_header .user_account {
    padding: .2133rem .5333rem .2133rem .2667rem;
    width: .5867rem;
    height: .5867rem;
    vertical-align: middle;
}

/* --------   资讯页的header   ---------- */
.home_header>div {
     text-align: end;
     width: 4.6933rem;
     height: .7467rem;
     line-height: .7467rem;
     padding-left: .9067rem;
     margin-right: .2667rem;
}

.home_header>div a {
    display: inline-block;
    width: .96rem;
    height: .7467rem;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}

/* ---------------  搜索页header   ------------ */

.search_head {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #F3F3F3;
	box-sizing: border-box;
    height: 1.0667rem;
    background: #FFFFFF;
}

.search_head div {
    display: inline-block;
    position: relative;
}

.search_head div input {
    width: 6.4rem;
    height: .7467rem;
    border-radius: .3733rem;
    background: url(../images/search.png) no-repeat #F8FAFF;
    background-position: .3733rem;
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    padding-left: 1.0667rem;
    outline: none;
    border:none;
}


.search_head div .clear {
    position: absolute;
    top: .2133rem;
    right: .4267rem;
    display: none;
}


.search_head div .input_close {
    width: .32rem;
    height: .32rem;
}

.search_head a .back {
    width: .8533rem;
    height: .5867rem;
    vertical-align: middle;
}

.search_head .cancel {
    padding: .2667rem;
    color: #666666;
}

.search_head .toApp {
    background: #FFCD00;
    border-radius: .1067rem;
    font-size: 14px;
    color: #FFFFFF;
    width:1.8667rem;
    text-align: center;
    line-height: .5333rem;
    height: .5333rem;
}

/* ---------- footer部分的导航  --------------- */
footer {
    position:-webkit-sticky;
    position:sticky;
    bottom: 0;
    background: #FFFFFF;
}

footer ul {
    display: flex;
    height: 1.3333rem;
    justify-content: space-evenly;
    align-items: center;
}

footer ul li a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #9CA0AC;
}

footer ul li a img {
    width: .5333rem;
    height: .5333rem;
}

footer ul li .active {
    color: #21356A;
}

/* --------  导航栏及其内容   ---------- */

.search_nav {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.0667rem;
    background: #FFFFFF;
}

.search_nav a {
    width: 1.2267rem;
    height: .5333rem;
    gap: .5333rem;
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    color:  #989EAD;
    text-align: center;
    letter-spacing: .04rem;
}

.search_nav_active {
    color: #21356A !important;
    background: #E8EAF0;
    border-radius: .2933rem;
}

/* ----------- 历史搜索  ------------- */
.history_search>div {
    display: flex;
    justify-content: space-between;
}

.history_search ul li {
    width: 1.2267rem;
    height: .64rem;
    background: #F8FAFF;
    border-radius: .1067rem;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    text-align: center;
    line-height: .64rem;
}

/* ------------- 热门搜索 -------------- */
.hot_search,.history_search {
    margin: .3733rem;
}
.hot_search div, .history_search>div>span {
    font-size: 14px;
    font-weight: 600;
}

.hot_search ul, .history_search ul {
    display: flex;
    gap: .2667rem;
    margin: .3733rem 0;
}

.hot_search ul li {
    width: 1.6rem;
    height: .64rem;
    background: #FFF7F2;
    border-radius: .1067rem;
    text-align: center;
    line-height: .64rem;
}

.hot_search ul li img {
    vertical-align: middle;
    margin-right: .1333rem;
}

.hot_search ul li span {
    color: #FF5200;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    height: .4267rem;
}

/* --------  赛程 ------------ */
#schedule .schedule_header, #live .live_header, .hot_race .hot_header {
    height: .8533rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: .32rem 0;
    padding: 0 .5333rem;
    box-sizing: border-box;
    font-size: 16px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: bold;
    letter-spacing: .0533rem;
}

#schedule .schedule_header a, #live .live_header a, .hot_race .hot_header a {
    color: #989EAD;
    font-size: 12px;
    font-weight: 400;
}

.hot_header a img{
    width: .2667rem;
    height: .2667rem;
}

#schedule ul li {
    background: #FFFFFF;
    font-size: 12px;
    position: relative;
}

#schedule ul li .border_left::before {
    content: '';
    background: url(../images/border_left_green.svg) no-repeat;
    position: absolute;
    width: .1333rem;
    height: 2.32rem;
    left: 0;
    top: .5333rem;
}

#schedule ul li .border_left_red::before{
    content: '';
    background: url(../images/border_left_red.svg) no-repeat;
    position: absolute;
    width: .1333rem;
    height: 2.32rem;
    left: 0;
    top: .5333rem;
}

#schedule ul li .border_left_orange::before{
    content: '';
    background: url(../images/border_left_orange.svg) no-repeat;
    position: absolute;
    width: .1333rem;
    height: 2.32rem;
    left: 0;
    top: .5333rem;
}

#schedule ul li .border_left_olive::before{
    content: '';
    background: url(../images/border_left_olive.svg) no-repeat;
    position: absolute;
    width: .1333rem;
    height: 2.32rem;
    left: 0;
    top: .5333rem;
}

#schedule ul li .title {
    width: 80%;
    display: flex;
    align-items: center;
    height: .48rem;
    padding: 0 .32rem;
}

#schedule ul li .title span:nth-child(1) {
    color: #35BE9B;
}

#schedule ul li .title span:nth-child(2) {
    font-size: 10px;
    color: #D60F0E;
    flex: 1;
    text-align: center;
}


#schedule ul li .schedule_detail {
    height: .7467rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: .2667rem 0;
    font-size: 14px;
}

#schedule ul li .schedule_detail .home, #schedule ul li .schedule_detail .away{
   display: flex;
   align-items: center;
}

#schedule ul li .schedule_detail img{
    width: .6933rem;
    height: .6933rem;
    margin: 0 .2667rem;
}

#schedule ul li .schedule_detail .state{
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #D60F0E;
    margin: 0 .1067rem;
}

#schedule ul li .avatars {
    padding: .1333rem .4267rem;
    margin: .32rem;
    display: flex;
    align-items: center;
    gap: .2667rem;
    overflow-x: auto;
    height: 1.3333rem;
    background: linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
    box-shadow: -0.08rem 0 .1067rem 0 rgba(0,0,0,0.06);
}

#schedule ul li .avatars .avatar_header {
   width: .32rem;
   font-size: 12px;
}

#schedule ul li .avatars div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#schedule ul li .avatars div>img {
    width: .5867rem;
    height: .5867rem;
    margin-bottom: .0533rem;
}

#schedule ul li .avatars div>span {
    width: 1.0667rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 10px;
    color: #989EAD;
}

.add_red {
    color: #DC5454 !important;
}

.add_orange {
    color: #DCAA54 !important;
}

.add_olive {
    color: #BBBE35 !important;
}

.add_green {
    color: #35BE9B !important;
}

.add_grey {
    color: #989EAD !important;
}

/* -----------  搜索页视频推荐, 首页热门直播，足球， 篮球等   ------------- */

#live ul, .hot_race ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .32rem;
    padding: 0 .4267rem;
}

#live ul li, .hot_race ul li {
    width: 4.2667rem;
    height: 3.84rem;
    background: #FFFFFF;
    font-size: 12px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    position: relative;
}

#live ul li .live_cover, .hot_race ul li .live_cover  {
    width: 4.2667rem;
    height: 2.9333rem;
    border-radius: .16rem;
}

#live ul li p, .hot_race ul li p {
    width: 90%;
    padding: .2133rem .16rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
}

#live ul li .live_tag, .hot_race ul li .live_tag {
    position: absolute;
    top: .16rem;
    right: .16rem;
}

#live ul li .live_detail, .hot_race ul li .live_detail {
    position: absolute;
    bottom: .8rem;
    left: 0;
    color: #FFFFFF;
    font-size: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 4.2667rem;
    height: .8rem;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 100%);
    box-shadow: 0 .0533rem .1067rem 0 rgba(0,0,0,0.05);
    border-radius: 0 0 .16rem .16rem;
}

#live ul li .live_detail div, .hot_race ul li .live_detail div{
    display: flex;
    align-items: center;
    margin: .16rem;
}

#live ul li .live_detail div:nth-child(1) span, .hot_race ul li .live_detail div:nth-child(1) span {
    width: 1.0667rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#live ul li .live_detail .live_avatars, .hot_race ul li .live_detail .live_avatars {
    width: .3733rem;
    height: .3733rem;
    margin-right: .16rem;
    border-radius: 50%;
}

#live ul li .live_detail div:nth-child(2) span, .hot_race ul li .live_detail div:nth-child(2) span {
    padding-left: .08rem;
}

.no_result {
    display: flex;
    flex-direction: column;
   align-items: center;
   display: none;
}

.no_result img {
    width: 1.7067rem;
    height: 2.8267rem;
}

.no_result span {
    text-align: center;
    font-size: 16px;
    font-family: PingFang SC-Regular, PingFang SC;
    color: rgba(0,0,0,0.4);
    margin-top: .32rem;
}

/* ---------- 主页main的部分 -------------- */
main nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 9;
}
main nav .home_nav {
    background: #FFFFFF;
    display: flex;
    height: 1.0667rem;
    align-items: center;
    justify-content: space-around;
    box-shadow: 0 .0533rem .0533rem .0267rem rgba(217,196,196,0.25);
    border: .0267rem solid rgba(0,0,0,0);
}

main nav .home_nav li a {
    display: block;
    color: #989EAD;
    font-size: 14px;
    height: .6933rem;
    line-height: .6933rem;
}

main nav ul li .nav_active {
    display: block;
    width: 1.4933rem;
    height: .6933rem;
    color: #21356A;;
    background: #E8EAF0;
    border-radius: .3467rem;
    text-align: center;
    line-height: .6933rem;
}

/* -----------  主页轮播图    ------------ */
.swiper-container  {
    position: relative;
    width: 100%;
    height: auto;
    padding: .32rem 0;
    overflow: hidden;
}
.slide-content {
    display: flex;
}

.swiper-slide {
    width: 88% !important;
    transform: scale(0.9) !important;
    transform-style: preserve-3d;
    transition-duration: 0.5s;
}
.swiper-slide-active {
    transform: scale(1) !important;
    transition-duration: 0s;
}

.swiper-slide img {
    display: block;
    width: 8.9333rem;
    height: 100%;
    border-radius: .2667rem;
    position: relative;
    -o-object-fit: cover;
       object-fit: cover;
}

.slide-content p{
    position: absolute;
    width: 8.9333rem;
    bottom: .32rem;
    left: 0;
    right: 0;
    padding: 0 .2667rem;
    color: #fff;
    font-size: 12px;
    height: .5333rem;
    line-height: .5333rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.swiper-pagination-bullets {
    bottom: .32rem !important;
}

.swiper-pagination-bullet {
    width: .16rem;
    height: .16rem;
    background: #fff;
    opacity: 0.4;
    transition: all .5s ease 0s;
}

.swiper-pagination-bullet-active {
    width: .32rem;
    height: .16rem;
    background: #fff;
}

/* -----------  赛程页的nav   ------------ */

main nav .schedule_nav {
    display: flex;
    gap: .5333rem;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #666666;
    background: #FFFFFF;
    height: .7467rem;
    line-height: .7467rem;
}

main nav .schedule_nav .schedule_active_nav, .current_list {
    font-size: 18px !important;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333 !important;
    position: relative;
}

main nav .schedule_nav .schedule_active_nav::after , .current_list::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: .16rem;
    width: .6933rem;
    height: .0533rem;
    background: linear-gradient(90deg, #3364E5 0%, #21356A 100%);
    box-shadow: 0 .0267rem .1067rem 0 rgba(33,54,110,0.44);
    border-radius: .0267rem;
}

main .filter_dates {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    padding: .2667rem .5333rem;
    height: 1.44rem;
}

main .filter_dates .today {
    width: 1.0133rem;
    height: .9067rem;
    line-height: .9067rem;
    color: #989EAD;
}

main .filter_dates .active_dates {
     font-size: 12px;
     color: #21356A !important;
     background: #E8EAF0;
     border-radius: .1067rem;
     text-align: center;
}

main .filter_dates .dates_after {
    display: flex;
    gap: .2667rem;
}

main .filter_dates .dates_after li {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 10px;
    color: #989EAD;
    width: 1.0133rem;
    height: .9067rem;
    line-height: .9067rem;
}

main .filter_dates .dates_after li span {
    height: .4267rem;
    line-height: .4267rem;
}

/* ----------------    首页热门比赛（轮播图下面的）   ----------------- */
 .hot_header {
    font-size: 16px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: bold;
    letter-spacing: .0533rem;
    padding: .32rem .5333rem;
}

main #hot_race ul {
    display: flex;
    gap: .2667rem;
    overflow: hidden;
    overflow-x: auto;
    padding: 0 .5333rem;
    height: 2.9333rem;
}

main #hot_race ul::-webkit-scrollbar {
    display: none;
}

main #hot_race ul li {
    width: 4.2667rem;
    height: 2.8267rem;
    background: #FFFFFF;
    box-shadow: 0px 2px 2px 1px rgba(217,196,196,0.25);
    border-radius: .2667rem;
    border: 1px solid rgba(0,0,0,0);
    flex: none;
}

main #hot_race ul li .hot_race_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .16rem .32rem;
    height: .8rem;
    background: linear-gradient(95deg, #3364E5 0%, #21356A 100%);
    border-radius: .2667rem .2667rem 0 0;
    color: #FFFFFF;
}

main #hot_race ul li div {
    display: flex;
    justify-content: space-between;
    height: .5333rem;
    line-height: .5333rem;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    margin-bottom: .2667rem;
}

main #hot_race ul li div img {
    width: .5333rem;
    height: .5333rem;
    margin-right: .16rem;
    vertical-align: middle;
    border-radius: 50%;
}

main #hot_race ul li div:nth-child(2), main #hot_race ul li div:nth-child(3) {
    padding: 0 .32rem;
}

main #hot_race ul li .team_rank {
    color: #FF6B56;
}

/* -------------   热门主播   ---------------- */
main .hot_streamer ul  {
    display: flex;
    gap: .2667rem;
    padding: 0 .5333rem;
    overflow: hidden;
    overflow-x: auto;
}

main .hot_streamer ul li a {
    display: block;
    width: 2.6667rem;
    height: 3.36rem;
    background: #FFFFFF;
    border-radius: .2667rem;
    border: 1px solid rgba(91,137,255,0.4);
    position: relative;
    text-align: center;
    flex: none;
}

main .hot_streamer ul li a .streamer_avatar {
    padding-top: .48rem;
    width: 1.6rem;
    height: 1.6rem;
    vertical-align: middle;
    border-radius: 50%;
}

main .hot_streamer ul li a .crown {
    position: absolute;
    top: 0;
    right: .2667rem;
}

main .hot_streamer ul li a .alive_tag {
   position: absolute;
   top: 1.8667rem;
   right: .8rem;
   width: 1.0133rem;
   height: .4267rem;
   background: linear-gradient(90deg, #569BFF 0%, #AB66FF 100%); 
   border-radius: .3467rem;
   color: #FFFFFF;
   font-size: 10px;
}

main .hot_streamer ul li a .streamer {
    height: .48rem;
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(51,51,51,0.99);
    padding-top: .3733rem;
}