@font-face
{
    font-family: JerseyM54;
    src: url('../font/JERSEY%20M54_0.TTF')
}
body{
    background-color: #2B2B2D;
}
.damionArea{
    position: relative;
    width: 100%;
    height:4.1rem ;
    margin-top: 0.8rem;
}
/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
.row_com {
    display: flex;
    flex-direction: row;
    justify-content: center;
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    -moz-box-pack: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
}
.qurater_btn{
    width: 5rem;
    height: 0.8rem;
    justify-content: space-around!important;
    position: absolute;
    left:1.25rem ;
    top: -0.8rem;
}
.qurater_btn>div{
    width:0.4rem;
    height:0.4rem;
    background:#827f7f;
    font-size:12px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    color:rgba(0,0,0,0.8);
}
.qurater_btn_color{
    background:rgba(255,255,255,0.85) !important;
}
.lineChart{
    height: 0.76rem;
    width: 100%;
        background-color: #000;
    position: relative;
}
.dash_{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 0.76rem;
}
.dash_area{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 0.76rem;
    position:absolute;
    left:0px;
    top:0px;
}
.dash_area>div{
	height: 100%;
}
.dash_>div{
    width: 25%;
    height: 100%;
    border-right:1px dashed #626262;
}
.dash_>div:last-child{
    border-right: none;
}
.chartLine_{
	width:7.5rem;
    height: 0.76rem;
    position: absolute;
    left: 0px;
    top: 0px;
}
#lineC>div{
	width:50% !important;
}
#lineC>div>canvas{
	width:100% !important;
}
.chartLine{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.chartLine>div{
    width: 100%;
    height: 1px;
    background-color: #626262;
}

.diamond{
    width:100%;
    height:3.12rem;
    background:linear-gradient(180deg,rgba(43,43,45,1) 0%,rgba(34,34,34,1) 100%);
    padding-top: 0.22rem;
}
.court{
    width: 7.08rem;
    height: 1.79rem;
    background: url("../images/court.png");
    background-size: 100% 100%;
    margin-left: 0.2rem;
    padding-top: 0.11rem;
}
.beiTaiLogo{
    width: 4.94rem;
    height: 0.31rem;
    margin: 0 auto;
    
    display: block;
}
.court_content{
    width:5.74rem;
    height:1.36rem;
    margin: 0 auto;
    position: relative;
    margin-top: 0.1rem;
}
.baskt_l,.baskt_r{
    position: absolute;
    top: 1.09rem;
    width: 1.2rem;
    height: 1.1rem;
    z-index: 6;
}
.baskt_l{
    position: absolute;
    left: 0.5rem;
}
.baskt_r{
    position: absolute;
    right: 0.5rem;
}
.court_btn{
    height: 0.84rem;
    width: 5rem;
    position: relative;
    z-index: 30;
    justify-content: space-around!important;
    -webkit-justify-content: space-around!important;
    margin:0 auto;
}
/* .court_btn>img{
    margin-right: 0.58rem;
} */
.court_btn>img:last-child{
    margin-right: 0 !important;
}
.court_btn .shootBtn{
    width: 0.32rem;
    height: auto;
}
.court_btn .playerBtn{
    width: 0.4rem;
    height: auto;
}
.court_btn .animateBtn{
    width: 0.24rem;
    height: auto;
}
.court_btn .eventBtn{
    width: 0.34rem;
    height: auto;
}
.court_btn .battleArrayBtn{
    width: 0.26rem;
    height: auto;
}
.court_content>div{
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: 0px;

}
.court_content>div:nth-child(1),.court_content>div:nth-child(2),.court_content>div:nth-child(4){
    height: 100%;
}
/*投篮点*/
.shootContent{
    z-index: 5;
    overflow:hidden;
}
.shootContent>div{
	position:absolute;
	z-index:6;
}
.shootContent>div:nth-child(1),.shootContent>div:nth-child(2){
	width:100%;
	height:100%;
	left:0px;
	top:0px;
}
.shootContent>div:nth-child(2)>div{
	width:50%;
	height:100%;
	float:left;
	z-index:9;
}

.shootContent>div>img{
    width: 0.14rem;
    height: 0.09rem;
    position: absolute;
    left: 1rem;
}
 .clothes_shoot{
 	z-index:7!important;
 	left: 0.87rem;
    top: 1.56rem;
    opacity:0;
 }
 
/*文字直播*/
.eventContent{
    width: 7.5rem!important;
    height: 5.41rem;
    left: -0.88rem!important;
    bottom: -0.23rem!important;
    position: absolute;
    background:linear-gradient(180deg,rgba(69,69,72,0.56) 0%,rgba(32,31,31,0.86) 100%);
    background:-webkit-linear-gradient(180deg,rgba(69,69,72,0.56) 0%,rgba(32,31,31,0.86) 100%);
    background:-o-linear-gradient(180deg,rgba(69,69,72,0.56) 0%,rgba(32,31,31,0.86) 100%);
    background:-moz-linear-gradient(180deg,rgba(69,69,72,0.56) 0%,rgba(32,31,31,0.86) 100%);
    z-index: 9999;
    overflow: hidden;
    
}
.eventLiveBtn{
    height: 0.6rem;
    font-size: 10px;
    color: #fff;
    width: 5.88rem;
    justify-content: space-around!important;
    margin: 0 auto;
    display:none;
}
.eventContent>div:nth-child(1){
    width: 5.88rem;
    height: 4.6rem;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0 auto;
    margin-bottom: 1.2rem;
    margin-top:0.5rem
}
.eventContent>div ul li{
    line-height: 0.3rem;
    color: rgba(255,255,255,0.6);
    min-height: 0.3rem;
    margin-bottom: 0.1rem;
    overflow:hidden;
}
.eventContent>div ul li>span{
    float: left;
    min-height:0.3rem;
    font-size: 10px;
}
.eventContent>div ul li>span:nth-child(1){
    width: 13%;
}
.eventContent>div ul li>span:nth-child(2){
    width: 12%;
}
.eventContent>div ul li>span:nth-child(3){
    width: 16%;
    text-align: center;
}
.eventContent>div ul li>span:nth-child(4){
    width: 45%;
}
.eventContent>div ul li>span:nth-child(5){
    width: 14%;
    text-align: right;
}
.add_fff {
    color: #FF4B4B !important;
}
/*阵容*/
.battleArrayBtn>div{
    width: 37%;
    height: 100%;
    float: left;
    font-family: JerseyM54;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: -0.08rem;
}
.homeBattle{
    margin-left: 10.3%;
}
.awayBattle{
    margin-left: 0.03rem;
}
.battleArrayBtn>div>div{
    height: 94.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width:0.6rem;
    justify-content: space-around;
}
.playerClothes{
    width: 0.47rem;
    height: 0.6rem;
    text-align: center;
    color: #fff;
    font-size: 13px;
    position: relative;
    margin-left: 0.3rem;
}
.playerClothes>img{
    width: 100%;
    height: 100%;
}
.playerClothes>span{
    width: 100%;
    position: absolute;
    left: 0px;
    text-align: center;
    height: 0.3rem;
    top: 0.2rem;
    font-family: JerseyM54;
}
/*动画*/
/*事件动画*/
.clothes_{
	width: 4rem;
    height: 0.7rem;
    position: absolute;
    left: 0.87rem;
    top: 0.3rem;
    opacity: 0;
}
.clothes_shoot{
	width: 4rem;
    height: 0.7rem;
}

.clothes_ .playerLogoA,.clothes_shoot .playerLogoA{
    width: 0.88rem;
    height: 0.88rem;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    background:rgba(152,152,152,1);
    border:1px solid rgba(98,98,98,1);
    position: absolute;
    left: 0px;
    top: -0.1rem;
}
.clothes_ .playerLogoA>img,.clothes_shoot .playerLogoA>img{
    width: 100%;
    height: 100%;
    float:left;
}
.clothes_ .eventPlayer,.clothes_shoot .eventPlayer{
    width:2.55rem;
    height:100%;
    background:rgba(0,0,0,0.86);
    right: 0.66rem;
    font-size: 10px;
    line-height: 0.3rem;
    padding-left:0.2rem;
}
.clothes_ .timeEvent,.clothes_shoot .timeEvent{
    width: 0.66rem;
    height: 100%;
    background:rgba(255,75,75,0.86);
    border-radius:0px 0.05rem 0.05rem 0px;
    right: 0px;
    font-size: 9px;
}
.clothes_ .timeEvent,.clothes_ .eventPlayer,.clothes_shoot .timeEvent,.clothes_shoot .eventPlayer{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.87);
}
 .eventScore{
    width: 3.6rem;
    height: 0.8rem;
    position: absolute;
    left: 1.07rem;
    top: -0.55rem;
    opacity: 0;
     overflow: hidden;
}
 .eventScore>div{
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0px;
     top: 0.8rem;
 }
.eventScore>div>p{
    font-size:0.5rem;
    font-weight:700;
    font-family: Arial blod,Arial;
    margin-left: 0.5rem;
    color:rgba(255,75,75,1);
    text-shadow:1px 1px 5px #000;
    -moz-text-shadow:1px 1px 10px #000;
}
.eventOver {
  width: 1.86rem;
  height: 0.6rem;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 0.06rem;
  position: absolute;
  left: 1.94rem;
  top: 0.26rem;
  font-size: 10px; /* no */
  color: rgba(255, 255, 255, 0.85);
}

.dash_orange{
	background:rgba(235,95,15,0.3)
}
.dash_red{
    background:rgba(244,45,67,0.3);
}
        .attack{
            width: 5rem;
            height: 1.36rem;
            position: absolute;
            top:0px;
            overflow:hidden;
            margin-top:-0.02rem
        }
        .animate_left {
            animation: left_ 1.5s;
            -webkit-animation: left_ 1.5s;
            animation-fill-mode: forwards;
            left: -3rem;
            position: absolute;
        }
        .animate_right {
            animation: right_ 1.5s;
            -webkit-animation: right_ 1.5s;
            animation-fill-mode: forwards;
            right: -3rem;
            position: absolute;
        }
        .attack>div{
        	width: 3rem;
            height: 1.36rem;
            opacity:0;
        }
      
        .attack>div>img{
            width: 3rem;
            height: 1.36rem;
            
           
        }
        .attack_r{
        	right: 0.47rem;
        	transform: skew(30deg);
            -webkit-transform: skew(30deg);
        
        }
        .attack_txt{
        	position:absolute;
        	top:0.35rem;
        	font-size:12px;
        	color:#000;
        	line-height:16px;
        }
        .attack_txt_r{
        	left:1rem;
        }
        .attack_txt_l{
        	right:1rem;
        }
        .attack_l>div{
        transform: skew(30deg);
            -webkit-transform: skew(30deg);
        }
        .attack_r>div{
        
        	transform: skew(-30deg);
            -webkit-transform: skew(-30deg);
        	
        }
        .attack_l{
        	left: 0.47rem;
        	transform: skew(-30deg);
            -webkit-transform: skew(-30deg);
        	
        }
        @keyframes left_ {
            0% {
                left: -3rem;
                opacity:1;

            }
            100% {
                left: 0.2rem;
                opacity:1;
            }
        }
        @keyframes right_ {
            0% {
                right: -3rem;
                opacity:1;

            }
            100% {
                right: 0.2rem;
                opacity:1;
            }
        }
        .animateContent{
        	position:relative;
        
        }
        .animate_right_c{
        	opacity:0;
        	right:-3rem;
        }