/**
 * index css
 *
 * @author chensiren <245017279@qq.com>
 * 
 * @since  2018-01-26
 *
**/
body{ background: url(/uploads/image/sdimg/index-body-bg.png) no-repeat center 126px;}
.focus-con{ padding: 10px 12px; background: #fff;margin-top: 23px;}
.focus-news{ width: 386px; margin-left:12px;}

.focus-news h2{ font-size: 20px;}
.focus-news h2,.red-dl li{ margin-bottom: 14px;}
.focus-news h2 a{ height: 26px; line-height: 26px;}
.focus-news h2 a,.red-dl li a{ display: block; word-break: break-all; overflow: hidden; -o-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -ms-text-overflow: ellipsis; text-overflow: ellipsis; -moz-text-overflow: ellipsis;   overflow: hidden; white-space: nowrap; -moz-white-space: nowrap; -ms-white-space: nowrap; -o-white-space: nowrap; -webkit-white-space: nowrap;}
.focus-news h2 span{ top: -3px; display: inline-block; margin-right: 5px; line-height: 20px; font-size: 10px; color: #fff; padding: 0 4px; border-radius: 2px; font-weight: normal; position: relative;} 
.focus-news h2 span.red-tip{background: #de0000;}
.focus-news h2 span.blue-tip{background: #1a8ad9;}
.red-dl li{ font-size: 16px;}
.focus-news h2{ font-size: 20px; font-weight: bold;}

.focus-banner{ width: 370px;}
.focus-banner .carousel-inner .item img{ width: 100%; height: 230px;}
.focus-banner .carousel-inner img{-webkit-transform: scale(1) translatez(0); -webkit-transition: -webkit-transform .75s; transform: scale(1) translatez(0); transition: transform .75s;}
.focus-banner .carousel-inner img:hover{-webkit-transform: scale(1.2) translatez(0); -webkit-transition: -webkit-transform .75s cubic-bezier(0,1,.75,1); transform: scale(1.2) translatez(0); transition: transform .75s cubic-bezier(0,1,.75,1);}
.focus-banner .carousel-control { display: block; height: 90px; width: 34px; background: #000; opacity: 0.3; filter: alpha(opacity=30); top: 50%; margin-top: -45px;}
.focus-con .focus-banner .carousel-control:hover{opacity: 0.75; filter: alpha(opacity=75);}
.focus-banner .carousel span{ display: block; width: 100%; height: 100%; overflow: hidden; }
.focus-banner .carousel .left span{ background: url(/uploads/image/sdimg/prev-arrow.png) no-repeat center center;}
.focus-banner .carousel .right span{ background: url(/uploads/image/sdimg/next-arrow.png) no-repeat center center;}
.focus-banner .carousel-indicators{ margin-bottom: 0; left: 98%!important;  bottom: 10px!important;text-align: right; z-index: 999; width: 30%;}
.carousel-indicators li { border: none; background-color: #fff; margin: 0 2px;}
.carousel-indicators .active { width: 10px; height: 10px; background-color: #1078c0; border: 1px solid #1078c0; box-shadow: none; margin: 0 2px;}
.fbanner-title{position: absolute;bottom: 0; left: 0; z-index: 99; background: rgba(0,0,0,0.6); height: 45px; line-height: 45px; width: 100%; color: #fff; padding-left: 10px; font-size: 16px;}

.video-con{ margin-top: 20px;}
.rb-title{ width: 117px; height: 32px; line-height: 32px; font-size: 16px; color: #fff; padding-left: 30px; background: url(/uploads/image/sdimg/rb-titile.png) no-repeat 0 center; position: absolute; left: 0;}
.video-con .title{ margin-bottom: 10px; position: relative;}
.video-con .titlenav{ height: 32px; line-height: 28px; width: 322px; text-align: right; border-bottom: 4px solid #1a8ad9;}
.video-con .titlenav li{ float: right;}
.video-con .titlenav a{ padding: 0 4px; font-size: 12px;}
.video-con .titlenav span{ color: #e1e1e1; margin: 0 2px;}
.video-list-ul{ margin-left: -5.5px; margin-right: -5.5px; margin-bottom: 10px;}
.video-list-ul .video-list{ margin: 3px;}
.video-list-ul .video-list a{ display: block; position: relative; color: #ffffff; overflow: hidden;}
.video-list-ul .video-list p{ position: absolute; left: 0; bottom: 0; width: 100%; padding: 3px 8px; background: rgba(0,0,0,0.5);}
.video-list-ul .video-list .trapezoid{ position: absolute; left: 0; top: 0;  height: 18px; line-height: 18px; padding: 0 10px; background: #e82929; font-size: 10px;}
.video-list-ul .video-list .trapezoid::after{ content:""; position: absolute; right: -8px; top: 0; width: 0; height: 0; border-top: 18px solid #e82929; border-right: 8px solid transparent;}
.video-list-ul .video-list a img { -webkit-transform: scale(1) translatez(0); -webkit-transition: -webkit-transform .75s; transform: scale(1) translatez(0); transition: transform .75s;}
.video-list-ul .video-list a:hover img {-webkit-transform: scale(1.2) translatez(0); -webkit-transition: -webkit-transform .75s cubic-bezier(0,1,.75,1); transform: scale(1.2) translatez(0); transition: transform .75s cubic-bezier(0,1,.75,1);}
.video-list-ul .video-list .playbtn { filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(.7); -webkit-transition-property: opacity,-webkit-transform;-webkit-transition-duration: .5s; transform: scale(.7); transition-property: opacity,transform; transition-duration: .5s; zoom: 1;}
.video-list-ul .video-list a:hover .playbtn{background: 0 0\9; filter: progid:dximagetransform.microsoft.alphaimageloader(, sizingmethod="crop") alpha(opacity=90); opacity: .9; -webkit-transform: scale(1); -webkit-transition-property: opacity,-webkit-transform; -webkit-transition-duration: .5s; transform: scale(1); transition-property: opacity,transform; transition-duration: .5s; cursor: pointer;}
.video-list-ul .video-list .covermask {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity .5s; transition: opacity .5s;}
.video-list-ul .video-list a:hover .covermask{opacity: .2; filter: alpha(opacity=20); -webkit-transition: opacity .5s; transition: opacity .5s;}
.video-item-ul .video-item{ margin-bottom: 10px;}
.video-item-ul .video-item a{ font-size: 16px; color: #666;}
.video-item-ul .video-item a:hover{ color: #e82929;}
.video-item-ul .video-item .video-icon{ display: inline-block; width: 14px; height: 14px; color: #e82929; top: 2px; margin-right: 4px; background: url(/uploads/image/sdimg/red-video-icon.png) no-repeat 0 0; position: relative;}


.focus-live{ width: 340px;}


.topicleft{ width: 1140px;}
.balltopic .lefttitle span{ display: block; height: 100%; line-height: 36px; font-size: 16px; color: #ffffff; padding: 0 10px 0 42px; position: relative; font-weight: 700;}
.balltopic{ height: 36px; margin-bottom: 20px;}
.balltopic .lefttitle span::after{ content:""; position: absolute; right: -10px; top: 0; width: 0; height: 0; border-top: 36px solid #209dda; border-right: 10px solid transparent;}
.balltopic .rightnav{ line-height: 36px;}
.balltopic .rightnav li{ float: left;}
.balltopic .rightnav a{ display: inline-block; margin: 0 10px; color: #fff;}
.balltopic .rightnav a.cur,.balltopic .rightnav a:hover{ color: #fff600;}

.football.balltopic{ background: #1089c4  no-repeat 0 0;;}
.basketball.balltopic{ background: #905728  no-repeat 0 0;;}
.comsports.balltopic{ background: #1089c4  no-repeat 0 0;}
.game.balltopic{ background: #061a24  no-repeat 0 0;}
.football.balltopic .lefttitle{ background: #209dda;}
.basketball.balltopic .lefttitle{ background: #c06f2c;}
.comsports.balltopic .lefttitle{ background: #069de3;}
.game.balltopic .lefttitle{ background: #d9a300;}
.basketball.balltopic .lefttitle span::after{ border-top: 36px solid #c06f2c;}
.comsports.balltopic .lefttitle span::after{ border-top: 36px solid #069de3;}
.game.balltopic .lefttitle span::after{ border-top: 36px solid #d9a300;}
.football.balltopic .lefttitle span{ padding-left: 12px; background:  no-repeat 10px center;}
.basketball.balltopic .lefttitle span{ padding-left: 12px; background:  no-repeat 10px center;}
.comsports.balltopic .lefttitle span{ padding-left: 12px; background:  no-repeat 10px center;}
.game.balltopic .lefttitle span{ padding-left: 12px; background:  no-repeat 10px center;}

.typenav{ height: 32px; border-bottom: 2px solid #389fd1; background:  no-repeat 0 0; position: relative;}
.typenav .typetitle h2{ font-size: 16px; line-height: 30px; font-weight: 700; text-transform: uppercase;}
.typenav .typenavlist{ line-height: 30px; margin-left: 20px;}
.typenav .typenavlist a{ margin: 0 2px;}
.typenav .typenavlist a:hover,.typenav .typenavlist a.on{ color: #209dda;}

.titandm{ margin-bottom: 5px; padding-right: 20px;}

.typeartleft{ width: 370px;}
.typeartleft .typeartnav a{ color: #999999; display: inline-block; margin-right: 10px;}
.typeartleft .typeartnav span{color: #209dda;font-weight: 700; margin-right: 10px; font-size: 16px; display: inline-block;}
.typeartleft .typeartnav li{ float: left;}
.typeartnav a.on, .typeartnav a.on:hover{ color: #209dda; font-weight: 700;}
.typeartnav a:hover{ color: #de0000;}
.typeartul{ padding-top: 12px; margin-bottom: 15px; }
.nbatype .typeartul{ margin-bottom: 20px; padding-top: 20px;}
.nbatype .typeartul li:nth-child(6){ margin-bottom: 35px;}
.typeartul li{ margin-bottom: 11px;}
.typeartul li a{ display: block; padding-left: 10px; padding-right: 8px; position: relative;}
.typeartul li a i{ content:""; position: absolute; left: 0; top: 50%; margin-top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #209dda;}
.h-15{ height: 15px;}


.typeartright{ padding-left: 2px; width: 393px;}

.recul,.videoboxul{ margin-bottom: 18px;}
.recul{ border-bottom: 1px dashed #dbdbdb;}
.nodashed{ border-bottom: 0 none;}
.recul li{ margin-bottom: 26px;}
.recul .lastrecli{ margin-bottom: 30px;}
.recul .recimg img{ width: 100px; height: 72px;}
.recul .recart{ width: 260px; padding-left: 10px;}
.recul .recart h3{ margin-bottom: 2px; font-size: 16px; font-weight: 700;}
.recul .recart p{ font-size: 14px; color: #999;}
.recul .recart p a{ color: #00a2de;}
.recul li a:hover a{ color: #de0000;}

.titandm span{ font-size: 16px; color: #209dda; margin-bottom: 10px; font-weight: 700;}
.videoboxul{ margin-left: -5px; margin-right: -5px; border-bottom: 1px dashed #dbdbdb; padding-bottom: 21px;}
.videoboxul li{ margin-left:8px;}
.videoboxul li a{ display: block; width: 104px; position: relative;}
.videoboxul li a.videoimg{ width: 116px; height: 72px; margin-bottom: 6px; overflow: hidden; position: relative;}
.videoboxul li a img{width: 116px; height: 72px;}
.videoboxul li a img,.videodayul li .playbtn{-webkit-transform: scale(1) translatez(0); -webkit-transition: -webkit-transform .75s; transform: scale(1) translatez(0); transition: transform .75s;}
.videoboxul li p.row-2{ display: block; height: 40px; overflow: hidden; word-wrap: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;-moz-box-orient: vertical; word-break: break-all;}
.videoboxul li a:hover img{webkit-transform: scale(1.2) translatez(0); -webkit-transition: -webkit-transform .75s cubic-bezier(0,1,.75,1); transform: scale(1.2) translatez(0); transition: transform .75s cubic-bezier(0,1,.75,1);}
.videoboxul li .playbtn,.video-list-ul .video-list .playbtn{ position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -15px; width: 30px; height: 30px; background: url(/uploads/image/sdimg/play-btn.png) no-repeat 0 0;}
.videoboxul li .covermask{ opacity: .2;}


.picboxul{ margin-left: -8px; margin-right: -8px; padding-bottom: 15px;}
.picboxul li{ margin-left:8px; margin-bottom: 20px;}
.picboxul li:nth-child(3),.picboxul li:nth-child(4){ margin-bottom: 0;}
.picboxul li a{ display: block; width: 158px;}
.picboxul .picimg{ width: 180px; height: 124px; margin-bottom: 10px; overflow: hidden; position: relative;}

.homeartbox .typeartul{ padding-top: 0;}
.homeartbox .typeartul li a i{ background: #397894;}
.homevideobox h3{ color: #209dda;}

/* nbatype and cbatype */
.nbatype .titandm span,.cbatype .titandm span{ color: #905728;}
.nbatype .recul .recart h3 a,.cbatype .recul .recart h3 a{ color: #905728;}
.cbatype .typeartnav a.on, .cbatype .typeartnav a:hover,.nbatype .typeartnav a.on, .nbatype .typeartnav a:hover{ color: #905728;}
.cbatype .typeartul li a i,.nbatype .typeartul li a i{ background: #905728;}

/* comstype */
.comstype .typeartnav a.on, .comstype .typeartnav a:hover{ color: #2183b1;}
.comstype h3{color: #2183b1;}
.comstype .typeartul li a i{ background: #2183b1;}
.comstype .picboxul li{ margin-bottom: 30px;}

/* mymtype */
.mymtype .titandm span{ color: #d9a300;}
.mymtype .typeartnav a.on, .mymtype .typeartnav a:hover{ color: #d9a300;}
.mymtype h3 a{color: #d9a300;}
.mymtype .typeartul li a i{ background: #d9a300;}
.mymtype li{ margin-bottom: 8px;}
.nodashed{ border-bottom: 0 none;}
.nomarbot{ margin-bottom: 0;}
.nopadtop{ padding-top: 0;}
.nopadbot{ padding-bottom: 0;}


.topicright{ width: 326px;}
.fbtable,.bstable{ border: 1px solid #dbdbdb;}
.fbtable .ladyscroll,.bstable .ladyscroll{background: #fafafa; position: relative;    width: 338px;
    height: 36px;}
.fbtable .ladyscroll .prev,.fbtable .ladyscroll .next,.bstable .ladyscroll .prev, .ladyscroll .next .ladyscroll .prev,.bstable .ladyscroll .next{ display: block; height: 32px; line-height: 32px; width: 20px; text-align: center; font-size: 16px; background: #209dda; color: #fff;}
.fbtable .ladyscroll .prev,.fbtable .ladyscroll .next{ position: absolute; top: 0;}
.fbtable .ladyscroll .prev{ left: 0;}
.fbtable .ladyscroll .next{ right: 0;}
.fbtable .ladyscroll ul,.bstable .ladyscroll ul{ margin-bottom: 0; position: relative; list-style: none;}
.fbtable .ladyscroll ul li,.bstable .ladyscroll ul li{ float: left; padding: 0 11px; line-height: 32px; word-break: break-all; position: relative;}
.fbtable .ladyscroll ul li a.active,.fbtable .ladyscroll ul li a.active:hover,.bstable .ladyscroll ul li a.active,.bstable .ladyscroll ul li a.active:hover{ color: #209dda;}
.fbtable .scrollwrap,.bstable .scrollwrap{ width: 284px; height: 32px; background: #fafafa; overflow: hidden; position: relative;}
.bstable .scrollwrap{ width: 100%;}
.fbtabnva{ border-bottom: 1px solid #dbdbdb;}
.fbtabnva ul li{ width: 50%; text-align: center;}
.fbtabnva ul li a{ display: block; padding: 10px 0; background: #fafafa; border-left: 1px solid #dbdbdb; position: relative; margin-left: -1px; font-weight: 700;}
.fbtabnva ul li a.on,.fbtabnva ul li a:hover{ background: #ffffff; color: #209dda;}

.bstabnva{ border-bottom: 1px solid #dbdbdb;}
.bstabnva ul { background: #fafafa;}
.bstabnva ul li a{ display: inline-block; padding: 6px 10px; color: #666; font-weight: 700;}
.bstabnva ul li a.on,.bstabnva ul li a:hover{ background: #ffffff; color: #209dda;}

.fbtable,.bstable{ margin-bottom: 30px; min-height: 400px;}
.fbtable .table > thead > tr > th,.bstable .table > thead > tr > th{ color: #666666; padding: 10px 8px;}
.fbtable .matchlogo,.fbtable .playerlogo,.bstable .matchlogo{ margin: 0 auto; width: 48px; height: 48px; overflow: hidden; border-radius: 50%;}
.fbtable .matchlogo img,.fbtable .playerlogo img,.bstable .matchlogo img{ width: 100%; height: 100%; border-radius: 50%;}
.fbtable .norank,.bstable .norank{ display: inline-block; width: 18px; height: 18px; line-height: 18px; color: #fff;}
.fbtable .noone,.bstable .noone{ background: #de0000;}
.fbtable .notwo,.bstable .notwo{ background: #de6800;}
.fbtable .nothree,.bstable .nothree{ background: #de9700;}
.fbtable .nofour,.bstable .nofour{ background: #decc00;}
.fbtable .playername,.bstable .playername{ width: 84px;}
.fbtable .teamname,.bstable .teamname{ width: 84px;}
.fbtable .teamname,.bstable .teamname{ display: block; overflow: hidden; -o-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; -moz-white-space: nowrap; -ms-white-space: nowrap; -o-white-space: nowrap; -webkit-white-space: nowrap;}
.fbtable  .table > tbody > tr > td,.bstable  .table > tbody > tr > td{ border-top: none;}
.grouplist{ background: #fafafa; padding: 10px 15px; border-bottom: 1px solid #dbdbdb;}
.grouplist a{ font-size: 18px; display: inline-block; margin: 0 7px;}

.grouplist a.on,.grouplist a:hover{ text-decoration: underline !important; color: #0a2476;}
.grouplist a.on,.grouplist a:hover{ text-decoration: underline !important; color: #78bbe6;}
.norank{ display: inline-block; width: 18px; height: 18px; line-height: 18px;}
.redrank{ background: #bf000c; color: #fff;}
.grayrank{ background: #999999; color: #fff;}
.ogredrank{ background: #d53039; color: #fff;}
.ogbluerank{ background: #0a2476; color: #fff;}
.ygredrank{ background: #d83c0c; color: #fff;}


.poitable,.shotable{ border: 1px solid #dbdbdb; margin-bottom: 20px;}
.poitable .poititle,.shotable .shotitle{ padding: 10px 0; border-bottom: 1px solid #dbdbdb;}
.poitable .poititle strong{ padding-left: 12px; font-size: 20px; position: relative;}
.poitable .poititle strong i{ position: absolute; left: 0; top: 5px; width: 6px; height: 18px;}

.acttitle{ height: 34px; line-height: 32px; border: 1px solid #dbdbdb; border-left: 4px solid #209dda; padding: 0 10px; margin-bottom: 10px; background: #fafafa;}
.acttitle a{font-size: 12px; color: #666666;}
.acttitle .righticon{ padding: 0; font-size: 8px; background: #fff; border: 1px solid #dbdbdb; margin-left: 8px; color: #315669;}
.actad{ display: block; width: 100%; margin-bottom: 10px;}
.actlist{ margin-bottom: 30px;}
.actlist ul li{ margin-bottom: 8px;}
.actlist ul li a.on,.actlist ul li a.on:hover{ color: #209dda;}
.actlist ul li a:hover{ color: #de0000;}

.spolist{ margin-bottom: 20px;}
.spolist a{ padding: 10px 0; border-bottom: 1px solid #dbdbdb;}
.spolist .spoimg{ width: 52px; height: 52px; overflow: hidden;}
.spolist .spoimg img{ width: 52px; height: 52px;}
.spolist .spoart{ width: 244px; padding-left: 10px;}
.spolist .spoart article{ color: #999; font-size: 12px;}
.spolist .row-2{ overflow: hidden;word-wrap: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;-moz-box-orient: vertical; word-break: break-all;}

.offiweblink{ margin-bottom: 20px;}
.offiweblink .acttitle{ margin-bottom: 0;}
.offiweblink .weblink{ border: 1px solid #dbdbdb; border-top: 0 none; padding: 10px;}
.offiweblink .weblink ul li{ margin-bottom: 10px;}
.offiweblink .weblink ul li span{ color: #209dda;}
.offiweblink .weblink ul li:hover span{ color: #eb0000;}

.spocomm .acttitle{ margin-bottom: 0;}
.commlist{border: 1px solid #dbdbdb; border-top: 0 none; }
.commlist .listtitle{ padding: 10px 0;}
.commlist .listtitle .trapezoid{height: 26px; line-height: 26px; color: #fff; padding: 0 10px; background: #e82929; position: relative;}
.commlist .listtitle .bstrapezoid{ background: #209dda;}
.commlist .listtitle .ottrapezoid{ background: #1bac55;}
.commlist .listtitle .trapezoid::after{content: ""; position: absolute; right: -10px;top: 0; width: 0; height: 0; border-top: 26px solid #e82929; border-right: 10px solid transparent;}
.commlist .listtitle .bstrapezoid::after{ border-top-color: #209dda;}
.commlist .listtitle .ottrapezoid::after{ border-top-color: #1bac55;}
.commlist .listcom{ padding: 0 10px;}
.commlist .toplist{ margin-bottom: 10px;}
.commlist .toplist a{padding-bottom: 15px; border-bottom: 1px dashed #dbdbdb;}
.commlist .toplistimg{ width: 120px; height: 80px; overflow: hidden;}
.commlist .toplistart{ width: 154px; padding-left: 8px;}
.commlist .toplistart p{ margin-bottom: 15px;}
.commlist .toplistart article{font-size: 12px; color: #999;}
.commlist .replyicon{ padding-left: 15px;  font-size: 12px; color: #999; background:  no-repeat 0 center;}
.commlist .bottomlist li{ margin-bottom: 8px;}
.commlist .bottomlist li a{display: block; padding-left: 10px; position: relative;}
.commlist .bottomlist li a i{content: ""; position: absolute; left: 0; top: 50%; margin-top: -2px; width: 4px;  height: 4px; border-radius: 50%; background: #209dda;}

.top-menu .top-menu-list a.active {
	color: #f85959
}

.top-menu .menu-more {
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	background-color: #f4f5f6
}

.top-menu .menu-more .list-shadow {
	position: absolute;
	left: -10px;
	width: 10px;
	height: 36px;
	background:  no-repeat 100%;background-color: rgba(244,245,246,.3);
	background-size: contain
}

.top-menu .menu-more .more-btn {
	display: block;
	width: 40px;
	height: 36px;
	background-size: 20px;
	background:  no-repeat 50%;background-size: 50%
}

.top-menu {
	position: relative;
	height: 36px;
	width:338px;
	background-color: #f4f5f6
}

.top-menu:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-image: -webkit-linear-gradient(top,transparent,transparent 40%,#ddd 0);
	background-size: 100% 1px;
	background-position: bottom;
	background-repeat: no-repeat
}

.top-menu .top-menu-list {
	overflow: hidden;
	overflow-x: scroll;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch
}

.top-menu .top-menu-list::-webkit-scrollbar {
	display: none
}

.top-menu .top-menu-list a {
	font-size: 17px;
	line-height: 36px;
	display: inline-block;
	height: 36px;
	margin-left:16px;
	white-space: nowrap;
	color: #505050
}