/* CSS Document */
/******************************************公共样式**************************************/
body {
    font-family: '微软雅黑','Franklin Gothic Medium', 'Arial Narrow', 'Arial', 'sans-serif';
    font-size: 12px;
    color: #aeaeae;
}
}


a{ text-decoration:none; color:#ffffff;}
a:hover{text-decoration:none; color:#ffea00;}
       #tab{width:250px; padding:5px;height:150px;margin-top:-37px;margin-right:20px; }
       #tab ul{list-style:none;height:30px;line-height:30px; }
       #tab ul li{background:#1c1d1d;cursor:pointer;float:left;list-style:none height:29px; line-height:29px;padding:0px 10px; margin:0px 0px; border:1px solid #ffea00; ; border-bottom:1px solid #c541ed;}
       #tab ul li.on{border-top:1px solid #c541ed; border-bottom:1px solid #FFF;}
       #tab div{height:130px;width:230px; line-height:24px;border-top:none;  padding:1px; padding:10px;}
       .hide{display:none;}
	   

.h1{
	
	 color: #009ed8;
	
	            }
				            
.h2 {
				    color: #ffea00;
					font-size: 14px;
					font-weight: bolder;
				}
 .h3 {
	               color: #c541ed;
	             	font-size: 12px;
	           }
.h4 {
			  		color: #7f7d7d;
			  	    font-size: 12px;
			  			 }
						 
.h5{
					color: #009ed8;
				    font-size: 14px;
						   	 }  
.h6{
					
					 color: #009ed8;
					 font-size: 16px;
				     margin-left: 30px;;
}


.h6_1{
					
					 color: #009ed8;
					 font-size: 16px;
				     margin-right: 30px;;
}
.h7{
					
					 color: #c541ed;
					 font-size: 16px;
				     margin-left: 30px;
}
.h8{
					
					 color: #bfb9b9;
					 font-size: 14px;
				     margin-left: 30px;
}
.h9{
					
					 color: #bfb9b9;
					 font-size: 15px;
				     margin-left: 30px;
}
.ul_blue{
		background-image:url(../images/icon-blue.png) ;		
			background-repeat:no-repeat;
}
.ul_yellow{
		background-image:url(../images/icon-yellow.png) ;		
			background-repeat:no-repeat;
}
.ul_red{
		background-image:url(../images/icon-red.png) ;		
			background-repeat:no-repeat;
}
/*边框公共样式*/
.border:before{
    content: '';
    position: absolute;
    width: 80%;
    height: 100%;
    bottom: -1px;
    top:-1px;
    left:10%;
    border-bottom: 1px solid #007297;
    border-top: 1px solid #007297;
    transition: all 0.5s;
}
.border:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 80%;
    left: -1px;
    right:-1px;
    top:10%;
    border-left: 1px solid  #007297;
    border-right: 1px solid  #007297;
    transition: all 0.5s;
}
.border:hover::before{
    width: 0%;
}
.border:hover::after{
    height: 0%;
}
.border:hover{
    box-shadow:-5px 0px 2px rgba(255,255,255,0.1),   /*左边阴影*/  0px -5px 2px rgba(255,255,255,0.1),  /*上边阴影*/ 5px 0px 2px rgba(255,255,255,0.1),  /*右边阴影*/ 0px 5px 2px rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.1);
}
.border h4{
    margin: 15px 0 5px 20px;
    color: #8adeff;
    line-height: 35px;
    font-size: 18px;
    font-weight: 500;
}
/* 鼠标特效 */
*{
    cursor: url(../images/pointer.png) 8 3, auto !important;
}


/* 总数样式 */

.total01{
	background-image:url(../images/border_bg01.png);
	width:189px;
	height:60px;
	}
}





/* 总数样式 */

.bar{background:rgba(101,132,226,.1); padding: .15rem;}
.barbox li,.barbox2 li{ width:50%; text-align: center; position: relative;}
.barbox:before,
.barbox:after{ position:absolute; width: .3rem; height: .1rem; content: ""; }
.barbox:before{border-left: 2px solid #02a6b5;left: 0;border-top: 2px solid #02a6b5; }
.barbox:after{border-right: 2px solid #02a6b5; right: 0; bottom: 0;border-bottom: 2px solid #02a6b5; }

.barbox li:first-child:before{ position:absolute; content: ""; height:50%; width: 1px; background: rgba(255,255,255,.2); right: 0; top: 25%;}

.barbox{  border: 1px solid rgba(25,186,139,.17); position: relative;}
.barbox li{ font-size: .3rem; color: #ffeb7b; padding: .05rem 0;  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-weight: bold;}
.barbox2 li{ font-size: .19rem; color: #637c9f; padding-top: .1rem;}
.clearfix:after, .clearfix:before {
	display: table;
	content: " "
}
 .clearfix:after {
	clear: both
}


.pulll_left{float:left;}


/*右侧总数样式*/
.left-top {
    width: 100%;
    height: 20.4%;
    position: relative;
}

.left-top>.current-num {
    width: 4.9rem;
    height: 1.8rem;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url(../images/border_bg01.png) top left no-repeat;
    background-size: 100% 100%;
}

.current-num>div {
    width: 100%;
    height: 1.8rem;
    line-height: 1.8rem;
    text-align: center;
    background: url(../images/title_bg01.png) center center no-repeat;
    font-size: 0.2rem;
    color: #0e94ea;
    background-size: 1.8rem 0.25rem;
    font-weight: 900;
}

.current-num>p {
    font-size: 0.46rem;
    text-align: center;
    color: white;
}


/*仪表盘样式*/

.clockBoard {
	width: 550px;
	height: 180px;
	margin: 0px auto;
	margin-bottom: 0px;
}

.pointer {
	position: relative;
	top: -560px;
}


/*TAB切换样式*/
.title-box {
    width: 4.9rem;
    height: 0.42rem;
    background: url(../images/box_title.png) top left no-repeat;
    background-size: 100% 100%;
    margin: auto;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    position: relative;
}

.title-box>h6,
.title-box>p {
    font-size: 0.2rem;
    color: white;
    height: 0.42rem;
    line-height: 0.42rem;
    margin-left: 0.4rem;
}

.title-box>p>span {
    cursor: pointer;
    color: rgba(255, 255, 255, .6);
}

.title-box>p>span.active {
    color: rgba(255, 255, 255, 1);
}
.line-img {
    width: 1px;
    height: 0.2rem;
    margin: 0 10px;
}
.title-box>.line-img {
    position: absolute;
    right: 1.3rem;
}
.title-box>button {
    font-size: 0.18rem;
    border: none;
    background: transparent;
    color: #cdddf7;
    height: 0.42rem;
    position: absolute;
    right: 0.6rem;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    cursor: pointer;
}

.title-box>button:hover {
    color: white;
}

.title-box>button>img {
    width: 0.2rem;
    height: 0.2rem;
    margin-right: 5px;
}

/*******************************************wrapper**************************************/
.wrapper{
   display:grid;
   background-image:url(../images/bg.jpg);
   width:1920px;
    
}



/*******************************************头部样式**************************************/

.wrapper-header{
   display:grid;
   grid-template-columns:repeat(2,200px);
   background-image:url(../images/header.jpg);
   width:1920px;
   height:100px;

}

/*时间样式*/
.time-box {
    width: 380px;
    height: 70px;
    border: 1px solid #b0afaf;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
	margin-left:100px;
	margin-top:14px;
}

.time-box>.data {
    width: 400px;
    height: 100px;
	margin-left:20px;
	margin-top:30px;
    
}

.data>p {
    font-size: 2rem;
    margin: 0 10px;
    color: #ffffff;
    text-align: center;
    margin: 10px;
	margin-right: 20px;
	text-shadow:0 0 5px #ffea00;
}

.data>p>span {
    margin: 0 10px;
	
}

.data>p.time {
    font-size: 1.32rem;
    height: 0.42rem;
    line-height: 0.42rem;
	    margin-top: 10px;
		 margin-right: 6px;
			text-shadow:0 0 5px #ffea00;
}
.time-box>.weather {
    width: 1.8rem;
    height: 0.65rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    margin-left: 10px;
}





.item{
  text-align:center;
  font-size:200%;
  color:#fff;

}


/*******************************************上部数据图表样式**************************************/



.wrapper-up{

   display:grid;
     grid-template-columns:100px 814px  90px 814px  40px;
}

.left{
width:60px;

}
/********************************同步图表样式--inner-grid-tongbu *********************************/
.inner-grid-tongbu{
   display:grid;
   width:808px;
   height:600px;
   grid-template-columns:repeat(3,auto);
  


}


/*********************up-inner样式*********************/
.up-inner{
   display:grid;
   grid-area:up-inner;
   margin-top:50px;
   width:808px;
   height:185px;
   background-color: #0c0b0b;
   border:1px solid #565454; padding:2px; /*css3阴影*/ 
   grid-template-columns:246px 188px  188px 188px;
   grid-template-rows:80px 200px;   
}

.up-inner-01{
	
}
.up-inner-02{
margin-left:90px;
}
.up-inner-03{
    margin-left:160px; 
}
.up-inner-04{
	width:188px;
	height:80px;
	
}
.up-inner-05{

}
.up-inner-06{
	
}
.up-inner-07{
 
}
.up-inner-08{
	   
}

.title-up{
background-image:url(../images/title-up.png);
width:205px;
height:43px;
}


/*********************down-inner样式*********************/

.down-inner{
   grid-area:down-inner;
   background-image:url(../images/bg-tongbu-down.jpg);
  width:808px;
   height:210px; 
  
}

.title-up-01{
background-image:url(../images/title-tongbu-01.png);
width:205px;
height:43px;
}
.title-up-02{
background-image:url(../images/title-tongbu-02.png);
width:205px;
height:43px;
}

.title-up-03{
background-image:url(../images/title-jiance-01.png);
width:205px;
height:43px;
}
.title-up-04{
background-image:url(../images/title-jiance-02.png);
width:205px;
height:43px;
}

.table{
    display:grid;
	width:260px;
	height:150px;
	margin-top:10px;
    margin-bottom:20px;
	margin-right:50px;
	background-color:343434;
	border:1px solid #8a868b;
    border-radius:20px;
}


.table tr.h20{
    height: 20%;
    font-size: 15px;
	
}
.table tr.title{

	border-radius:20px;
	
}
.table tr.list{
    background-color: #343434;
	
}
.table tr.title,#install tr.list{
    height: 16%;
}
.table td{
    border: 1px solid #2a515d;

    text-align: center;
	
}
.table td.t40{
     
}
.table td.t20{
   font-size: 15px;
}

.table td.lt{
    border-left: 0;
    border-top: 0;
}
.table td.ltr{
    border-left: 0;
    border-top: 0;
    border-right: 0;
}
.table td .bar{
    width: 60%;
    height: 35%;
    background-image: url(../images/netratio_bg.png);
    display: inline-block;
    text-align: left;
    line-height: 0;
}
.table td p{
    height: 100%;
    border-radius: 7px;
    background-image: url(../images/netratio_strip.png);
}
.table td .bartext{
    color: #ffae00;
    display: inline-block;
}
.table td.bd0{
    border: 0;
}
.upright{
  
}


.item{
  text-align:center;
  font-size:16px;
  color:#fff;

}


/*********************middle*********************/

.middle{

	 width:20px;
}


/********************************监测图表样式--inner-grid-jiance *********************************/
.up-grid-jiance{
   display:grid;
   width:808px;
   height:635px;
   grid-template-columns:repeat(3,auto);
  


}


.title-up{
background-image:url(../images/title-up.png);
width:205px;
height:43px;
}


/*********************up-jiance-inner样式*********************/
.up-jiance-inner{
   display:grid;
   grid-area:up-jiance-inner;
   margin-top:50px;
   width:808px;
   height:185px;
   background-color: #0c0b0b;
   border:1px solid #565454; padding:2px; /*css3阴影*/ 
   grid-template-columns:246px 188px  188px 188px;
   grid-template-rows:80px 200px;   
}

.up-jiance-inner-01{
	
}
.up-jiance-inner-02{
margin-left:90px;
}
.up-jiance-inner-03{
    margin-left:160px;  margin-top:20px; 
}
.up-jiance-inner-04{
	width:188px;
	height:80px;
	
}
.up-jiance-inner-05{

}
.up-jiance-inner-06{
	
}
.up-jiance-inner-07{
    margin-left:160px;  margin-top:20px; 
}
.up-jiance-inner-08{
	   
}

.title-up{
background-image:url(../images/title-up.png);
width:205px;
height:43px;
}


/*********************down-inner-jiance 样式*********************/

.down-inner-jiance{
display:grid;
   grid-area:down-inner-inner;
   background-image:url(../images/bg-tongbu-down.jpg);
  width:808px;
   height:180px; 
   grid-template-columns:271px 271px  271px;
   grid-template-rows:43px 137px;   
}


.down-inner-jiance-01{
	
}
.down-inner-jiane-02{
	
}
.down-inner-jiane-03{
	 
}
.down-inner-jiane-04{
	
}
.down-inner-jiane-05{
	
}
.down-inner-jiane-06{
	
}
.title-up-01{
background-image:url(../images/title-tongbu-01.png);
width:205px;
height:43px;
}
.title-up-02{
background-image:url(../images/title-tongbu-02.png);
width:205px;
height:43px;
}

.title-up-03{
background-image:url(../images/title-jiance-01.png);
width:205px;
height:43px;
}
.title-up-04{
background-image:url(../images/title-jiance-02.png);
width:205px;
height:43px;
}

.table{
    display:grid;
	width:260px;
	height:150px;
	margin-top:10px;
    margin-bottom:20px;
	margin-right:50px;
	background-color:343434;
	border:1px solid #8a868b;
    border-radius:20px;
}



.upright{
  
}




.item{
  text-align:center;
  font-size:16px;
  color:#fff;

}


/*********************right*********************/


.right{
 
	 width:20px;
	 
}

.item{
  text-align:center;
  font-size:200%;


}


/*******************************************中央按钮样式**************************************/

.wrapper-middle{
   display:grid;
   margin-top:15px;
   grid-template-columns:102px 102px  102px 102px  102px 102px 102px 102px   139px 139px 102px 102px  102px 102px  102px 102px 102px 102px  ;
   width:100%;
   align-items: center;
   justify-items: center;  
        /* justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。 */
}


 .one{
     
         display: grid;
         justify-content: center;
         align-content: center;
 
 		height:126px;
 }
  .pic,.bac {
            width: 109px;
            height:130px;
            position: absolute;
        }

.bac {
 background: #FFEA00;
    opacity: 0.3;
    display: none;
}

        .img {
            width: 109px;
            height:130px;
        }
        .one:hover .bac{
           display: block;
        }
        .one:hover .txt{
            display: block;
        }
		


.nine{
  background-image:url(../images/button-big-tongbu.png) ;
   width:139px;
   height:130px;
}
.ten{
     background-image:url(../images/button-big-jiance.png) ;
   width:139px;
   height:130px;
}

.item{
  text-align:center;
  font-size:200%;
  color:#fff;

}

/*******************************************下部数据图表--wrapper-down**************************************/

.wrapper-down{
   display:grid;
   grid-template-columns:100px 814px  90px 814px  40px;
}
.upleft{

  width:60px;
}
.map{
    background-image:url(../images/down_map.jpg);
    margin-top:30px;
    margin-bottom:20px;
    display:grid;
	background-color:343434;
	border:1px solid #b0afaf;
    border-radius:20px;
}
	
.upmiddle{
  
}
	
.updown{


    display:grid;
	margin-right:50px;
	background-color:343434;

}

.table{
    display:grid;
	width:814px;
	height:280px;
	margin-top:30px;
    margin-bottom:20px;
	margin-right:50px;
	background-color:343434;
	border:1px solid #b0afaf;
    border-radius:20px;
	
}

.upright{
  
}




.item{
  text-align:center;
  font-size:16px;
  color:#fff;

}
/*******************************************wrapper-title-down**********************************/

.wrapper-title-down{
   display:grid;
   grid-template-columns:160px 667px  80px 925px  40px;
 
  
}
.title-left{
     height:50px;

}
.title-map{
  background-image:url(../images/title-down.png);
  background-repeat: no-repeat;
}
.title-middle{

}
.title-table{
   background-image:url(../images/down_map.png);
    background-repeat: no-repeat;
}
.title-right{

  width:30px;
}


/******************************************尾部--*wrapper-footer**************************************/

.wrapper-footer{
   display:grid;
   grid-template-columns:repeat(2,200px);
   background-image:url(../images/nav-footer.jpg);
   width:1920px;
   height:33px;
}

.item{
  text-align:center;
  font-size:200%;
  color:#fff;
  width:100%;
}


/* -------------------- 窗口适配：界面窗口最小为1200px -------------------- */