:root {
    /*全局颜色定义 -------*/
    /*BLUE蓝色*/
    --blue70: #0170CA;
    --blue50: #0A8FEA;
    --blue20: #8BC6F4;
    --blue10: #E2F1FC;
    /*RED红色*/
    --red60: #E62229;
    --red40: #F04C4C;
    /*Green绿色*/
    --green80: #008000;
    --green60: #2CA31F;
    /*黄色*/
    --yellow1: #FFE8A3;
    --yellow2: #ffefdd;
    --yellow3: #F2D8B1;
    --yellow4: #fffaef;
    --yellow40: #FFE53B;
    --yellow60: #f9bf4b;
    /*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);
    --black40: rgba(0, 0, 0, .4);
    --black20: rgba(0, 0, 0, .2);
    --black: #000;
    --white: #FFF;
    /*全局颜色定义 -------*/
    --primary-color: var(--blue70);
    --second-color: var(--blue50);
    --thirdly-color: #ff6600;
    --Hbody-bg: #c9dde4;
    --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);
    --border-hightlight-3: rgba(227, 183, 181, 0.6);
    --odds-up: #ffe5cb;
    --odds-down: #ebfdaf;
    --score-bg: #ffe077;
    --theme-icon: url(/images/light.svg);
    --hight-score-bg: #fde7a7;
    /* #ffcd3f; */
    --bluebg: rgba(15, 122, 255, 0.08);
}

/*夜间模式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);
    --Hbody-bg: #4a616e;
    --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);
    --border-hightlight-3: rgba(81, 38, 38, 0.6);
    --odds-up: #3D230A;
    --odds-down: #262E0D;
    --score-bg: #383324;
    --theme-icon: url(/images/dark.svg);
    --hight-score-bg: #c96b00;
}

* {
    margin:0;padding:0;box-sizing:border-box;
    font-family: "pingfang", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
ul,li {list-style: none;}
a {color:var(--text-color-1);text-decoration: none;display: block;}
body {background:var(--Hbody-bg);color:var(--text-color-1);height: 100vh;padding: 0;margin: 0;}
.red {color: var(--red40);}
.bule {color: var(--blue50);}
.green {color: var(--green60);}
#backgound{position:fixed;left:0px;top:0px;right:0px;bottom:0px;height:100%;width:100%;margin:auto;background-color:#333;z-index:9999;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;}
#subSpnLoading{background:var(--bg-color-1);/*border:solid 1px var(--border-1);*/width:80%;margin:0 auto;margin-top:5px;text-align:center;padding:10px 0;border-radius:4px;line-height:30px;}
#subSpnLoading:before,.loading:before{display:inline-block;background:url(/Images/oval.svg);width:20px;height:20px;content:"";background-size:100%;vertical-align:middle;margin-right:4px;}
#subSpnLoading img{vertical-align:middle;display:none;}


/* 顶部Banner */
.banner {
    background: url("/worldcup/Images/FIFAbg.png") top center / cover no-repeat;
    width:100%;height:auto;padding:66% 0 0 0;position: relative;
}
.banner .tool {width: 100%;background: none;color: var(--text-white);font-size: 16px;font-weight: bold;padding: 10px 10px 6px 10px;display: flex;align-items: center;justify-content: space-between;position: absolute;top: 0;left: 0;z-index: 20;transition: all 0.2s linear;}
.banner .tool span {display: none;}
.banner .tool .iconfont {background: rgba(0,0,0,0.4);font-size: 20px;line-height: 28px;font-weight: normal;text-align: center;width: 28px;height: 28px;border-radius: 50%;}
.banner .tool .iconfont.app-share {background:rgba(0,27,130,0.6);color:var(--text-white);font-size:20px;line-height:40px;text-align:center;width:40px;height:40px;border-radius:50%;box-shadow:0 0 10px rgba(0,27,130,0.6);right:10px;bottom:18%;position:fixed;z-index:100;cursor:pointer;}
.banner .tool.fixed {background: var(--primary-color);position: fixed;padding: 8px 10px;animation: appear 0.35s linear forwards;}
.banner .tool.fixed span {display: block;}
.banner .tool.fixed .iconfont {background: none;}
@keyframes appear {
    0% { opacity: 0;transform: translateY(-44px);}
    100% { opacity: 1;transform: translateY(0);}
}

/* 资讯轮播 */
.countdown{background:var(--yellow40);color:var(--gray80);font-size:12px;padding:4px 20px;border-radius:30px 0px;top:-24px;right:0;position:absolute;}
.countdown font {color: var(--red40);}

.newsbox {background:var(--bg-color-1);padding:10px;margin:-22% 10px 10px 10px;border-radius:8px;position:relative;}
.newsbox .newsitem::before {content:"";width: 4px;height: 4px;border: 1px solid var(--text-color-3);border-radius: 50%;margin-right: 2px;vertical-align: 2px;display: inline-block;}
.newsitem{font-size:14px;line-height:20px;margin:3px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.newsitem span{color:var(--thirdly-color);font-weight:500;}

/* 图片区 */
.imgsbox{background:var(--gray80);width:100%;height:150px;margin:0 0 10px 0;border-radius:6px;overflow-x:auto;}
.imgsbox::-webkit-scrollbar {display:none;}
.imgsbox .imglis {display:flex;}
.imgsbox .imglis li {width: 100%;flex: 0 0 auto;}
.imgsbox .imglis img {width: 100%;height: 100%;object-fit: cover;}
.imgsbox .lbtitle {background: var(--black40);color: var(--text-white);font-size: 13px;line-height: 20px;width: 100%;padding: 5px 8px 15px 8px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;bottom: 0;left: 0;position: absolute;z-index: 5;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: var(--swiper-pagination-bottom,2px) !important;}
.my-bullet {background:var(--white80);width:6px;height:4px;border-radius:5px;margin:0 4px;display:inline-block;cursor:pointer;}
.swiper-pagination-bullet-active {background:var(--blue50) !important;}

/* 赛事卡片 */
.content {position: relative;}
.content::after {content:"";width: 100%;height: 110px;bottom: -110px;left: 0;position: absolute;padding-bottom: env(safe-area-inset-bottom);}
.match-card {background:var(--bg-color-1);margin:10px;padding:10px;border-radius:8px;}

/* 赛事头部 */
.match-header {font-size:12px;line-height: 20px;display:flex;align-items:center;}
.collect {color: var(--text-color-3);font-size: 20px;}
.collect.on {color:var(--yellow60);}
.match-info {flex: 1;overflow: hidden;}
.match-header-top {color:var(--text-color-3);display:flex;align-items:center;justify-content: center;}
.match-item {flex: 1;}
.match-item .iconfont {font-size: 13px;}
.match-item span {margin: 0 3px;}
.match-time,.match-score {text-align:center;width:40px;}
.match-score .score {font-size: 14px;font-weight: bold;}
.match-score span {line-height: normal;display: block;}
.match-item:first-child, .match-teams .team:first-child {text-align: right;justify-content: flex-end;}
.match-teams{display:flex;align-items:center;justify-content:center;}
.match-teams .team{padding: 4px 0;display:flex;align-items:center;flex: 1;justify-content: flex-start;overflow: hidden;}
.team-name {font-size:14px;font-weight:bold;/*max-width: calc(100% - 75px);*/margin: 0 3px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.team-flag {flex: 0 0 30px;width:30px;height:20px;object-fit: contain;/*border: 1px solid var(--border-3);*/border-radius:3px;margin: 0 3px;}
.cardBox {display: flex;align-items: center;}
.rc, .yc {background: var(--bg-hightlight-5);font-size:11px;line-height: normal;float:left;vertical-align:middle;text-align:center;font-style:normal;border-radius:2px;color:var(--text-white);margin:0 2px;padding:0 2px;;min-width:11px;}
.yc {background: var(--bg-hightlight-3);}

/* 赛事资讯 */
.match-news,.news {margin:10px 0;padding-top:10px;border-top:1px dashed var(--border-3);}
.news-title {font-size: 14px;font-weight: bold;margin-bottom:5px;}
.news-title span {color:var(--text-color-3);font-size:12px;font-weight: normal;margin-left: 10px;}
.news-info {font-size:14px;line-height:20px;width: 100%;height: 40px;overflow: hidden;text-overflow: ellipsis;word-break: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;-webkit-box-pack: center;position: relative;}
.news-info .dtl {background: linear-gradient(-90deg,var(--bg-color-1) 55%,transparent);color:var(--blue50);font-size:12px;font-style: normal;text-decoration:none;margin-left: 10px;padding: 0 5px 0 30px;right: 0;bottom: 0;position: absolute;z-index: 1;}

/* 专家推荐 */
.expert-recommend {margin:10px 0;padding-top:10px;border-top:1px dashed var(--border-3);display:flex;}
.expert-item {flex:0 0 18%;text-align:center;overflow: hidden;}
.headicon {width:36px;height:36px;margin:3px auto;position: relative;}
.headicon img {background:var(--bg-color-2);width: 100%;height: 100%;border-radius:50%;object-fit: cover;display: block;}
.livicon {background: linear-gradient(90deg,#0087e4,#ff3dbf);color: var(--text-white);font-size: 11px;font-style: normal;line-height: 14px;padding: 0 2px;border-radius: 2px;top: -3px;right: -6px;position: absolute;z-index: 1;}
.expert-item .name {font-size:12px;text-align:center;margin: 3px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.expert-item .record {/*background:rgba(255,102,0,0.05);color:var(--thirdly-color);border:1px solid rgba(255,102,0,0.2);font-size:10px;*/width: max-content;padding:0 3px !important;margin:0 auto;display: block;}
.expert-item .record::before {display: none;}
.expert-more {color:var(--blue50);font-size:12px;text-align: center;flex:0 0 30px;display: inline-flex;flex-direction: column;justify-content: center;}
.expert-more .iconfont {color: var(--text-color-2);font-size: 20px;display: block;}

/* 赛事预测 */
.match-predict {margin-top:10px;padding:10px 0 5px 0;border-top:1px dashed var(--border-3);}
.predict {color:#0170ca;font-size:12px;display: flex;justify-content: space-between;align-items: center;}
.predict .iconfont {font-size:12px;margin-left: 5px;}

/* 悬浮底部导航 */
.topicon {background: var(--white80);color: var(--text-color-1);font-size: 16px;line-height: 40px;text-align: center;width: 40px;height: 40px;border-radius: 50%;box-shadow: 0 0 10px var(--black20);right: 10px;bottom: 10%;position: fixed;z-index: 20;cursor: pointer;}
.insafe{width:95%;position:fixed;bottom:15px;left:50%;transform:translate(-50%,0);z-index:10;padding-bottom:env(safe-area-inset-bottom);}
.navbar{background:var(--bg-color-1);padding:5px;border: 1px solid #C7CDF2;border-radius:50px;box-shadow:0 2px 10px var(--black20);display:flex;align-items:center;}
.navbar .nbtn{color:var(--text-color-1);font-size: 12px;line-height: 20px;text-align:center;padding:3px 0;border-radius:20px;display:inline-block;flex:1;}
.navbar .nbtn.on{background:#FF4400;color:var(--text-white);}


/* 资讯头部header */
.header {background: #182166 url(/worldcup/Images/matchbg-FIFA.png) no-repeat center;background-size: 100%;color: var(--text-white);line-height: 44px;font-weight: 600;font-size: 20px;text-align: center !important;}
.header .title .back {width:12px;height:12px;margin-left: 15px;border-left:2px solid var(--text-white);border-bottom:2px solid var(--text-white);transform:rotate(45deg);top:18px;left:6px;position:absolute;z-index:999;}
.subMenu {overflow: hidden; position: relative;display: flex;}
.subMenu a {color: var(--white60);width: 20%;float: left; line-height: 40px; text-align: center; font-size: 16px;font-weight: normal;flex: 1;}
.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(--Hbody-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;padding: 5px;border-bottom: solid 1px var(--border-1);overflow: hidden;}
.leagueItems ul {background: var(--bg-color-1);display: flex;;overflow-x: auto;}
.leagueItems ul::-webkit-scrollbar {display:none;}
.leagueItems ul li {flex: 1 0 auto; float: left; text-align: center; line-height: 30px;margin: 0 2px;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:var(--bg-color-3);color:var(--text-color-2);font-size:14px;line-height:20px;width:100%;padding:2px 10px;border-radius:20px;display:inline-block;}
/*.leagueItems ul li.on span { background-color:#143cdb;color:#FFF;font-weight: 600;}*/
.leagueItems ul li.on span{background:#FF4400;color:var(--text-white);font-weight:600;}

.FIFAcup {background:var(--bg-color-1);margin:10px;border-radius:8px;overflow:hidden;}
.realinfoitem.news {margin: 0;border-top:none;}
.noData {width:100%;height:calc(100vh - 350px);line-height:normal;display:flex;justify-content:center;align-items:center;flex-direction: column;}
.noData img {max-width: 80%;max-height: 70%;}
.btn{cursor:pointer}

/* 标识 */
.Rident,.Bident,.icon-et,.lge-log{color:#ff5107;background:#fff7f4;border:1px solid #f2cabc;border-radius:20px;font-size:11px;line-height:16px;padding:0 8px;margin:2px 0 2px 2px;display:inline-block;}
.Bident{color:#55a7eb;background:#f3f9fd;border-color:#c5d5de;}
.icon-et{background:linear-gradient(90deg,#fff1c7,#ffe28d);color:#9a5f4b;border-color:#ede2cf;}
/* .icon-et {background: url(/images/expert.png)no-repeat center;width: 46px;height: 18px;display: inline-block;vertical-align: -2px;} */
.ident{display:block;color:var(--text-color-3);font-size:12px;float:right;}
.levicon {height:16px;margin-left: 2px;vertical-align:-2px;}
.lge-log{background:linear-gradient(90deg,#ffe6e6,#fef8f8);color:#ff2980 !important;border-color:#ffb0d8;}
.red-history-log{background:#fffbf0;color:#fb8c00;font-size:12px;font-weight:normal;padding:1px 8px;border-radius:20px;margin-left:2px;border:1px solid #ffe7a3;}
.dpt,.red-log,.list_hot_lately.record{background:#fff7f4 !important;color:#ff5107 !important;font-size:11px !important;line-height:16px !important;font-weight:normal !important;padding:0 4px 0 7px !important;margin: 2px 0 2px 2px;border-radius:20px;border:1px solid #f6d1c5;display: inline-block;}
.dpt::before,.red-log::before{content:"";background:url(../Images/fb-r.svg) no-repeat center;background-size:100%;width:10px;height:10px;vertical-align:0;margin:0 2px 0 -4px;display:inline-block;}
.dpt::before{content:"";background:url(../Images/fb-o.svg) no-repeat center;background-size:100%;}
.red-log {background: #fef8f8 !important;color: #ff3030 !important;border-color: #ffadad;}

.convey{background:var(--bg-color-1);height:min-content;/*width:max-content;*/width:95%;border-radius:8px;position:fixed;top:0px;left:0px;right:0px;bottom:0px;margin:auto;z-index:100000;}
.conveytop{margin:0 auto;text-align:center;padding:8px 0;position:relative;}
.conveycen{margin:0 auto;display:inline-block;}
.conveyname{float:left;}
.conveylist{margin:0 auto;border-top:1px solid var(--border-1);padding:7px 22px 7px 8px;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.conveylist .result{position:absolute;bottom:-4px;right:-2px;width:30px;height:30px;}
.conveylist .result.mingzhong{bottom:-4px !important;right:-2px !important;top:auto !important;left:auto !important;background:url(../images/mingzhong.png)no-repeat;background-size:30px;}
.conveylist .result.go{background:url(../images/go.png)no-repeat;background-size:30px;}
.conveylist .type{background:var(--blue50);color:var(--text-white);font-size:10px;padding:0 2px;border-radius:2px;vertical-align:1px;}
.conveylist .obvious{color:var(--thirdly-color);font-weight:600;}
.conveycen span,.conveycen div{float:left;}
.conveycen a{display:contents;}

.sharelinks {background: var(--bg-color-1);width: 100%;border-radius: 20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom,20px);box-shadow: 0 -5px 15px rgba(0,0,0,0.1);left:50%;bottom:0%;transform: translate(-50%,0);position:fixed;z-index: 9999;}
.sharelinks .title {font-size: 16px;line-height: 20px;font-weight: bold;text-align: center;margin: 12px 0;position: relative;}
.sharelinks .closebtn {width: 20px;height: 20px;right: 10px;top:0;position: absolute;}
.sharelinks .closebtn::before,.sharelinks .closebtn::after {content: "";background: var(--text-color-3);width: 80%;height: 1px;left:50%;top:50%;transform: translate(-50%,-50%) rotate(45deg);position: absolute;}
.sharelinks .closebtn::after {transform: translate(-50%,-50%) rotate(-45deg);}
.sharelinks .links {width: calc(33.33% - 3px);text-align: center;margin: 12px 0;display: inline-block;}
.sharelinks .links span {font-size: 12px;line-height: 20px;display: block;}
.sharelinks .linkimg {width: 40px;height: 40px;margin: 0 auto;}