@charset "utf-8";

html {
	height:100%;
	margin:0;
	padding:0
}

body {
	font-family: "Microsoft YaHei", 微软雅黑, serif;
	font-size:12px;
	color: #fff;
	overflow: hidden;
	height:100%;
	margin:0;
	padding:0;
	background:#101522
}

@font-face {
	font-family: thinnumber;
	src: url("fonts/PF.eot"), url("fonts/PF.otf"), url("fonts/PF.ttf"), url("fonts/PF.woff");
}

::-webkit-scrollbar {
	width: 6px;
	height: 1px;
}
::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	background: #444444;
}
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	border-radius: 10px;
	background: rgba(0,0,0,0.7);
}


#container{
	position:absolute;
	top:0;
	height:100%;
	width: 100%;
	left: 0;
	overflow:hidden;
	z-index: 0;
}



.loadingMask{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 1000;
	background:#01091e;
	transition: opacity .5s, transform .5s;
}

.loadingMask.hide{
	transform:scale(2);
	opacity: 0;
}


.loadingCircle{
	font-size:80px;
	width: 1em;
	height: 1em;
	position: fixed;
	left: calc( 50% - 0.5em );
	top: calc( 50% - 0.5em );
	opacity: 1;
}

.loadingCircle::before{
	content: "";
	display: block;
	position: absolute;
	background-color: rgba(0,134,234,0.4);
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border-radius: 50%;
	transition: opacity .4s, transform .4s;
	opacity: 1;
	-webkit-animation:zoom_a 2s infinite ease-out;
}

.loadingCircle::after{
	content: "";
	display: block;
	position: absolute;
	width: calc( 130% - 4px );
	height: calc( 130% - 4px );
	left: calc( -15% - 2px );
	top: calc( -15% - 2px );
	border-radius: 50%;
	border: #0086ea solid 4px;
	transition: opacity .4s, transform .4s;
	opacity: 1;
	-webkit-animation:zoom_b 2s infinite ease-out;
}

.loadingCircle .mask{
	width: 0.8em;
	height: 0.8em;
	background-color: #0c0e1b;
	text-align: center;
	line-height: 0.2em;
	color:#0086ea;
	position: absolute;
	border-radius: 50%;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
}
.loadingCircle .mask .logo{
	width: 0.5em;
	height: 0.5em;
	margin: 0.15em 0 0 0.15em;
	background-image: url("../images/logo.png");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}

@-webkit-keyframes zoom_a {
	0%{
		opacity: 1;
	}
	50%{
		transform:scale(1.5,1.5);
		opacity: 0.1;
	}
	100%{
		opacity: 1;
	}
}

@-webkit-keyframes zoom_b {
	0%{
		opacity: 0.1;
	}
	50%{
		transform:scale(0.62,0.62);
		opacity: 0.6;
	}
	100%{
		opacity: 0.1;
	}
}

.tempBack{
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-image: url("../images/back.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.maskTop, .maskBottom{
	position: absolute;
	z-index: 2;
	left: 0;
	width: 100vw;
	pointer-events: none;
}
.maskTop{
	top: 0;
	height: 24vh;
	background: linear-gradient(rgba(12,29,54,1),rgba(12,29,54,0));
}
.maskBottom{
	bottom: 0;
	height: 18vh;
	background: linear-gradient(rgba(8,13,22,0),rgba(8,13,22,0.7));
}

.maskLeft,.maskRight{
	position: absolute;
	z-index: 3;
	width: 40vw;
	height: 100%;
	top: 0;
	pointer-events: none;
}
.maskLeft{
	left: 0;
	background: linear-gradient(to right, rgba(11,19,31,1) 37.5%,rgba(11,19,31,0));
}
.maskRight{
	right: 0;
	background: linear-gradient(to left, rgba(11,19,31,1) 40%,rgba(11,19,31,0.8) 70%,rgba(11,19,31,0) 100%);
}


.topBar{
	position: absolute;
	z-index: 4;
	width: 100%;
	left: 0%;
	top: 0;
	height: 6vh;
	pointer-events: none;
	user-select: none;
}

.topBar table{
	border: 0;
	border-collapse: collapse;
	height: 6vh;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.topBar table tr .leftCorner, .topBar table tr .rightCorner{
	position: relative;
	color: #25a6ef;
	background-repeat: no-repeat;
	white-space: nowrap;
}
.topBar table tr .leftCorner{
	width: 30vh;
	background-image: url("../images/topBar_left_corner.png");
	background-position: right bottom;
}
.topBar table tr .rightCorner{
	width: 22vh;
	background-image: url("../images/topBar_right_corner.png");
	background-position: left bottom;
}

.topBar table tr .leftFill, .topBar table tr .rightFill{
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100% 200px;
}
.topBar table tr .leftFill{
	background-image: url("../images/topBar_left_fill.png");
}
.topBar table tr .rightFill{
	background-image: url("../images/topBar_right_fill.png");
}

.topBar table tr .leftDecorate, .topBar table tr .rightDecorate{
	width: 219px;
	background-repeat: no-repeat;
	background-position: left bottom;
}
.topBar table tr .leftDecorate{
	background-image: url("../images/topBar_left_decorate.png");
}
.topBar table tr .rightDecorate{
	background-image: url("../images/topBar_right_decorate.png");
}

.topBar table tr .title{
	background-image: url("../images/topBar_title.png");
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100% 200px;
	white-space: nowrap;
	font-size: 2.6vh;
	font-weight: bold;
	color: #25a6ef;
	text-align: center;
	letter-spacing: 1vh;
	line-height: 5.6vh;
	vertical-align: top;
	padding: 0 2.5vh 0 3.5vh;
	width: 1px;
}

.topBar .weather{
	fill:currentColor;
	width: 4vh;
	height: 4vh;
	position: absolute;
	left: 1vh;
	top: 0.3vh;
}

.topBar .envData{
	font-size: 1.3vh;
	position: absolute;
	left: 6vh;
	top: 0.5vh;
}

.topBar .envData span{
	margin-right: 1vh;

}

.topBar .envData span b{
	font-family: thinnumber, serif;
	font-size: 3.4vh;
	font-weight: normal;

}


.topBar .temperature b{
	margin-left: 0.4vh;
}

.topBar .temperature span{
	margin-left: 0.5vh;
}

.topBar .date{
	font-size: 1.7vh;
	font-weight: bold;
	position: absolute;
	right: 8.6vh;
	top: 1.2vh;
}

.topBar .time{
	font-family: thinnumber, serif;
	font-size: 3.4vh;
	position: absolute;
	right: 1vh;
	top: 0.4vh;
}

.bottomBar{
	position: absolute;
	z-index: 4;
	width: 100%;
	left: 0;
	bottom: 0;
	height: 9vh;
	pointer-events: none;
}


.bottomBar table{
	border: 0;
	border-collapse: collapse;
	height: 9vh;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
}

.bottomBar table tr .leftFill, .bottomBar table tr .rightFill{
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 400px;
}
.bottomBar table tr .leftFill{
	background-image: url("../images/bottomBar_left_fill.png");
}
.bottomBar table tr .rightFill{
	background-image: url("../images/bottomBar_right_fill.png");
}

.bottomBar table tr .leftDecorate, .bottomBar table tr .rightDecorate{
	width: 252px;
	background-repeat: no-repeat;
	background-position: left top;
}
.bottomBar table tr .leftDecorate{
	background-image: url("../images/bottomBar_left_decorate.png");
}
.bottomBar table tr .rightDecorate{
	background-image: url("../images/bottomBar_right_decorate.png");
}

.bottomBar table tr .content{
	background-image: url("../images/bottomBar_content.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 400px;
	white-space: nowrap;
	font-weight: bold;
	text-align: center;
	width: 1px;
	position: relative;
	pointer-events: auto;
}

.mainMenu{
	list-style: none;
	margin: 0 2vh 0 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-size: 0;
	user-select: none;
}

.mainMenu li{
	display: inline-block;
	font-size: 1.7vh;
	font-weight: bold;
	color: #a7b6be;
	line-height: 3.2vh;
	margin: 1.5vh 2vh 0 2vh;
	padding: 0 3vh;
	position: relative;
	cursor: pointer;
}


.mainMenu li::before, .mainMenu li::after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	height: 100%;
	width: 3px;
	border-top: #40464a solid 1px;
	border-bottom: #40464a solid 1px;
}
.mainMenu li::before{
	left: 0;
	border-left: #40464a solid 2px;
}
.mainMenu li::after{
	right: 0;
	border-right: #40464a solid 2px;
}

.mainMenu li span{
	display: block;
	width: 80%;
	height: 30%;
	left: 10%;
	top: 37%;
	background: #6d7a82;
	position: absolute;
	z-index: -1;
	transition: all 0.3s;
}

.mainMenu li:hover span{
	transform: scale(1,2.5);
}

.mainMenu li.active{
	color: #51c0ff;
}

.mainMenu li.active::before, .mainMenu li.active::after{
	border-top: #076aa5 solid 1px;
	border-bottom: #076aa5 solid 1px;
}
.mainMenu li.active::before{
	border-left: #076aa5 solid 2px;
}
.mainMenu li.active::after{
	border-right: #076aa5 solid 2px;
}
.mainMenu li.active span{
	background: #005fc7;
	transform: scale(1,2.5);
}

.viewTool{
	position: absolute;
	bottom: 1vh;
	width: 100%;
	left: 0;
	font-size: 0;
	user-select: none;
}

.viewTool div{
	display: inline-block;
	font-size: 1.3vh;
	color: #a7b6be;
	line-height: 1.2vh;
	margin: 0 1vh;
	padding: 0 0.8vh;
	position: relative;
	cursor: pointer;
}

.viewTool div::before, .viewTool div::after{
	content: "";
	display: block;
	position: absolute;
	top: -1px;
	height: 100%;
	width: 3px;
	border-top: #40464a solid 1px;
	border-bottom: #40464a solid 1px;
}
.viewTool div::before{
	left: 0;
	border-left: #40464a solid 2px;
}
.viewTool div::after{
	right: 0;
	border-right: #40464a solid 2px;
}

.viewTool div:hover{
	background: #2a2a2a;
	color: #ffffff;
}

.viewTool div.active{
	color: #25a6ef;
}
.viewTool div.active::before, .viewTool div.active::after{
	border-top: #076aa5 solid 1px;
	border-bottom: #076aa5 solid 1px;
}
.viewTool div.active::before{
	border-left: #076aa5 solid 2px;
}
.viewTool div.active::after{
	border-right: #076aa5 solid 2px;
}
.viewTool div.active:hover{
	background: #083260;
	color: #ffffff;
}

.popWindow{
	width: 80vw;
	left: 10vw;
	height: 76vh;
	position: absolute;
	top: 10vh;
	z-index: 4;
	transition: transform .5s;
	pointer-events: none;
	transform: scaleY(0);
	display: none;
	background: transparent;
}

.popWindow.show{
	transform: scaleY(1);
}


.popWindow::before, .popWindow::after{
	content: "";
	display: block;
	position: absolute;
	width: 40%;
	height: 100%;
	top: 0;
	z-index: 1;
}
.popWindow::before{
	background: linear-gradient(to right, rgba(11,19,31,0.9) 60%,rgba(11,19,31,0));
	left: 0;
}
.popWindow::after{
	background: linear-gradient(to left, rgba(11,19,31,0.9) 60%,rgba(11,19,31,0));
	right: 0;
}


.popWindow.popCamera{
	width: 60vw;
	left: 20vw;
	height: 54vh;
	top: 20vh;
	background: rgba(11,19,31,0.7);
}

.popWindow.popMJ{
	background: rgba(11,19,31,0.8);
}

.popWindow.popCamera::before, .popWindow.popCamera::after,
.popWindow.popMJ::before, .popWindow.popMJ::after,
.popWindow.popACDiagram::before, .popWindow.popACDiagram::after,
.popWindow.popGL::before, .popWindow.popGL::after{
	display: none;
}

.popWindow.popACDiagram, .popWindow.popGL{
	width: 90vw;
	left: 5vw;
	height: 86vh;
	top: 5vh;
	background: rgba(11,19,31,0.9);
}

.popWindow.popACDiagram iframe, .popWindow.popGL iframe{
	position: absolute;
	width: 88vw;
	left: 1vw;
	height: 78vh;
	bottom: 1vh;
	border: 0;
	pointer-events: auto;
}


.popWindow .cameraList{
	position: absolute;
	width: 24%;
	height: 85%;
	left: 2%;
	top: 5%;
	background-image: url("../images/tree.png");
	background-repeat: no-repeat;
	background-position: left top;
}

.popWindow .videoZone{
	position: absolute;
	width: 53%;
	height: 85%;
	left: 24%;
	top: 10%;
	background-image: url("../images/video.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 100%;
}
.popWindow .cameraUI{
	position: absolute;
	width: 25%;
	height: 85%;
	right: 0;
	top: 5%;
	background-image: url("../images/cameraUI.png");
	background-size: auto 80%;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 1;
}


.popWindow .title{
	border: 0;
	border-collapse: collapse;
	width: 100%;
	position: absolute;
	left: 0;
	top: 5px;
	z-index: 3;
}

.popWindow .title::before{
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: -1px;
	width: 100%;
	height: 1px;
	background-image: url("../images/popBar_top.png");
	background-repeat: no-repeat;
	background-position: top;
	background-size: 100% 1px;
}

.popWindow .title tr .leftDecorate, .popWindow .title tr .rightDecorate{
	width: 164px;
}
.popWindow .title tr .leftDecorate{
	background-image: url("../images/popBar_left_decorate.png");
	background-position: left bottom;
}
.popWindow .title tr .rightDecorate{
	background-image: url("../images/popBar_right_decorate.png");
	background-position: right bottom;
}

.popWindow .title tr .content{
	background-image: url("../images/popBar_title.png");
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100% 300px;
	white-space: nowrap;
	font-size: 2.2vh;
	font-weight: bold;
	color: #25a6ef;
	text-align: center;
	letter-spacing: 1.5vh;
	line-height: 3.3vh;
	vertical-align: top;
	padding: 0 2.5vh 0.5vh 3.5vh;
	width: 1px;
	user-select: none;
}

.popWindow .title tr .rightFill .gButton{
	position: absolute;
	right: 1vh;
	top: 1vh;
}


.gButton{
	display: inline-block;
	color: rgba(255,255,255,0.7);
	padding: 0 1vh 0.1vh 1vh;
	font-size: 1.5vh;
	font-weight: bold;
	user-select: none;
	pointer-events: auto;
	cursor: pointer;
}

.gButton::before, .gButton::after{
	content: "";
	display: block;
	position: absolute;
	top: -1px;
	height: 100%;
	width: 3px;
	border-top: #40464a solid 1px;
	border-bottom: #40464a solid 1px;
}
.gButton::before{
	left: 0;
	border-left: #40464a solid 2px;
}
.gButton::after{
	right: 0;
	border-right: #40464a solid 2px;
}

.gButton svg{
	width: 2vh;
	height: 2vh;
	fill: currentColor;
	margin: 0.3vh 0 0 0;
}
.gButton:hover{
	background: #005fc7;
	color: #ffffff;
}

.gButton:hover::before, .gButton:hover::after{
	border-top: #0d94ff solid 1px;
	border-bottom: #0d94ff solid 1px;
}
.gButton:hover::before{
	left: 0;
	border-left: #0d94ff solid 2px;
}
.gButton:hover::after{
	right: 0;
	border-right: #0d94ff solid 2px;
}

.gButton.forAC{
	position: absolute;
	width: 100px;
	height: 20px;
	left: calc( 50% - 40px );
	top: 30px;
	text-align: center;
	line-height: 19px;
}

.popWindow .switchButton{
	position: absolute;
	height: 6vh;
	width: 4vh;
	z-index: 4;
	top: calc( 50% - 3vh );
	cursor: pointer;
	color: #008fe2;
	pointer-events: auto;
}

.popWindow .switchButton:hover{
	color: #ffffff;
}


.popWindow .switchButton::before{
	content: "";
	display: block;
	position: absolute;
	width: 22px;
	height: 363px;
	top: calc( 50% - 181px );
}

.popWindow .switchButton.left::before{
	background-image: url("../images/switchButton_left.png");
	left: -4px;
}
.popWindow .switchButton.right::before{
	background-image: url("../images/switchButton_right.png");
	right: -4px;
}

.popWindow .switchButton svg{
	fill:currentColor;
	width: 4vh;
	height: 4vh;
	position: absolute;
	left: 0;
	top: 1vh;
}

.popWindow .switchButton.left{
	left: -11px;
}
.popWindow .switchButton.right{
	right: -11px;
}

.popWindow .popLeft, .popWindow .popRight{
	position: absolute;
	width: 21%;
	height: calc( 100% - 30px );
	top: 17px;
	z-index: 2;
}
.popWindow .popLeft{
	left: 40px;
}
.popWindow .popRight{
	right: 40px;
}



.floatInfo{
	font-family: "Microsoft YaHei", 微软雅黑, serif;
	position: absolute;
	z-index: 5;
	width: 10vh;
	height: 2.3vh;
	background: rgba(0,0,0,0.6);
	color: #9e9e9e;
	font-size: 1.1vh;
	font-style: italic;
	border-bottom: #038cda solid 1px;
	margin: -2.5vh 0 0 0;
	text-align: center;
	user-select: none;
	pointer-events: none;
}

.floatInfo span{
	font-size: 1.1vh;
	font-weight: bold;
	letter-spacing: 0.1vh;
	color: #ffffff;
	margin: 0 0.2vh;
	line-height: 2.3vh;
}
.floatInfo b{
	font-weight: normal;
}

.floatInfo::before{
	content: "";
	display: block;
	position: absolute;
	left: 3.7vh;
	bottom: -0.5vh;
	width: 1px;
	height: 0;
	border-left: 0.3vh solid transparent;
	border-right: 0.3vh solid transparent;
	border-top: #038cda solid 0.5vh;
}

.floatInfo div{
	background: #038cda;
	position: absolute;
	left: 0;
	bottom: 1px;
	height: 3px;
}




.leftBar .dataBlock{
	margin-left: 5%;
}

.rightBar .dataBlock{
	margin-left: 35%;
}

.dataBlock{
	position: relative;
	pointer-events: auto;
	font-size: 0;
}

.dataBlock.main{
	width: 60%;
	height: 27vh;
	margin-top: 2vh;
}
.dataBlock.building{
	width: 100%;
	height: 26vh;
	margin-top: 2vh;
}
.dataBlock.building.short{
	height: 15.5vh;
}


.dataBlock.top{
	margin-top: 8vh;
}

.dataBlock .title{
	font-size: 1.3vh;
	font-weight: bold;
	color: #ffffff;
	position: relative;
	letter-spacing: 0.3vh;
	height: 2vh;
}

.dataBlock .title::before{
	content: "";
	display: block;
	position: absolute;
	width: 1vh;
	height: 1vh;
	border-top: #25a6ef solid 2px;
	border-left: #25a6ef solid 2px;
	left: -0.7vh;
	top: -0.5vh;
}

.dataBlock .chart{
	width: 100%;
	height: calc( 100% - 2vh );
}

.dataBlock .chart.A{
	width: 60%;
}
.dataBlock .chart.B{
	width: 40%;
	right: 0;
	position: absolute;
	top: 0;
}

.dataBlock .itemList{
	border: 0;
	border-collapse: collapse;
	position: absolute;
	height: calc( 100% - 4vh );
	top: 3vh;
}

.dataBlock .itemList.right{
	width: 40%;
	right: 0;
}

.dataBlock .itemList tr td{
	font-size: 1.3vh;
	color: rgba(255,255,255,0.5);
}

.dataBlock .itemList tr td svg{
	fill: #ffffff;
	width: 2.4vh;
	height: 2.4vh;
	margin: 0 0.5vh -0.1vh 0;
}

.dataBlock .itemList tr td span{
	font-family: thinnumber, serif;
	font-size: 2.6vh;
	margin-right: 0.4vh;
	color: #ffffff;
}

.dataBlock .chart_D_text{
	font-size: 1.3vh;
	color: rgba(255,255,255,0.4);
	width: 60%;
	text-align: center;
	left: 0;
	bottom: 6%;
	position: absolute;
}

.dataBlock .chart_D_text span{
	color: #ffffff;
	margin:0 1vh 0 0.2vh;
}

.dataBlock .listWarp{
	position: absolute;
	height: calc( 100% - 3vh );
	top: 3vh;
	width: 100%;
	overflow-y: auto;
}

.normalList{
	border: 0;
	border-collapse: collapse;
	width: 100%;
	font-size: 1.3vh;
}

.normalList tr th{
	background: rgba(255,255,255,0.05);
	height: 4vh;
	color: rgba(255,255,255,0.7);
}

.normalList tr td{
	color: rgba(255,255,255,0.5);
	height: 3.5vh;
	text-align: center;
	border-bottom: rgba(255,255,255,0.05) solid 1px;
}

.normalList tr td.color_green{
	color: #29edab;
}

.normalList.alignLeft tr th, .dataBlock .normalList.alignLeft tr td{
	text-align: left;
	padding-left: 1vh;
}






.loadingData{
	width: 60px;
	height: 60px;
	position: absolute;
	left: calc( 50% - 30px );
	top: calc( 50% - 35px );
	z-index: 666;
}

.loadingData::before{
	content: "";
	display: block;
	position: absolute;
	width: calc( 100% - 12px );
	height: calc( 100% - 12px );
	left: 0;
	top: 0;
	border: rgba(255,255,255,0.1) solid 6px;
	border-radius: 50%;
	clip-path: inset(0 50% 0 0);
	animation: rotateZ 2s linear infinite
}

.loadingData::after{
	content: "";
	display: block;
	position: absolute;
	width: calc( 100% - 32px );
	height: calc( 100% - 32px );
	left: 10px;
	top: 10px;
	border: rgba(255,255,255,0.4) solid 6px;
	border-radius: 50%;
	clip-path: inset(0 0 0 50%);
	animation: rotateF 2s linear infinite
}

@keyframes rotateZ{from{transform: rotate(0deg)}
	to{transform: rotate(359deg)}
}

@keyframes rotateF{from{transform: rotate(360deg)}
	to{transform: rotate(1deg)}
}

.dataBlock .dataItem{
	color: rgba(255,255,255,0.4);
	font-size: 1.3vh;
	display: inline-block;
	width: 50%;
	margin-bottom: 1.4vh;
}

.dataBlock .dataItem span{
	display: block;
	color: #ffffff;
	font-family: thinnumber, serif;
	font-size: 3.3vh;
	font-style: italic;
	letter-spacing: 0.2vh;
}

.dataBlock .dataItem span.cn{
	font-family: "Microsoft YaHei", 微软雅黑, serif;
	font-size: 2.5vh;
	font-weight: bold;
	line-height: 4.2vh;
}


.floatName{
	position: absolute;
	background: rgba(0,0,0,0.5);
	color: #ffffff;
	font-size: 1.1vh;
	font-weight: bold;
	padding: 2px 8px 2px 8px;
	border-bottom: #25a6ef solid 1px;
	border-top: #25a6ef solid 1px;
	z-index: 999;
	user-select: none;
	pointer-events: none;
	text-align: center;
}

.floatName small{
	font-weight: normal;
	color: rgba(255,255,255,0.6);
}

.floatData{
	font-family: thinnumber, serif;
	position: absolute;
	background: rgba(0,0,0,0.5);
	color: #ffffff;
	font-size: 1.5vh;
	font-style: italic;
	padding: 2px 8px 2px 6px;
	z-index: 999;
	user-select: none;
	pointer-events: none;
	text-align: center;
}
.floatData.colorPower{
	color: #ffa53a;
}
.floatData.colorWater{
	color: #28caff;
}


.leftBar, .rightBar{
	position: absolute;
	z-index: 3;
	width: 30vw;
	height: 98vh;
	top: 4vh;
	transition: transform .75s;
	font-size: 0;
}

.leftBar{
	left: 0;
}
.leftBar.hide{
	transform: translateX(-40vw);
}

.pScreen{
	position: absolute;
	width: calc( 100% - 20px );
	height: 100%;
	left: 10px;
	top: 0;
	background: #213964;
	font-size: 0;
}


.rightBar{
	right: 0;
}

.rightBar.hide{
	transform: translateX(40vw);
}


.dataUnit{
	display: inline-block;
	width: 33%;
	height: 33%;
	position: relative;
}

.dataUnit.w50{
	width: 50%;
}

.dataUnit.w66{
	width: 66%;
}

.dataUnit.w100{
	width: 100%;
}

.dataUnit .title{
	border: 0;
	border-collapse: collapse;
	font-size: 1.6vh;
	width: calc( 100% - 0.4vw);
	left: 0.2vw;
	height: calc( 4vh - 1px );
	top: 0;
	border-bottom: rgba(0,162,255,0.5) solid 1px;
	position: absolute;
	text-align: center;
	font-weight: bold;
	color: #2db1fc;
}

.dataUnit .title .leftDecorate, .dataUnit .title .rightDecorate{
	position: relative;

}

.dataUnit .title .leftDecorate::before, .dataUnit .title .rightDecorate::before{
	display: block;
	content: "";
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(0,162,255,0.6);
}
.dataUnit .title .leftDecorate::before{
	right: 0.3vw;
}
.dataUnit .title .rightDecorate::before{
	left: 0.3vw;
}
.dataUnit .title .leftDecorate::after, .dataUnit .title .rightDecorate::after{
	display: block;
	content: "";
	position: absolute;
	width: 60%;
	height: 1px;
	margin: 1px 0 0 0;
}
.dataUnit .title .leftDecorate::after{
	background: linear-gradient(to left, rgba(0,162,255,0.5),rgba(0,162,255,0));
	right: calc( 0.3vw + 3px );
}
.dataUnit .title .rightDecorate::after{
	background: linear-gradient(to right, rgba(0,162,255,0.5),rgba(0,162,255,0));
	left: calc( 0.3vw + 3px );
}

.dataUnit .title .text{
	white-space: nowrap;
	width: 1px;
}


.dataUnit .content{
	font-size: 1vh;
	background: linear-gradient(rgba(0,0,1,0.4) 0%, rgba(0,0,1,0.3) 50%, rgba(0,0,1,0) 100%);
	position: absolute;
	width: calc( 100% - 0.4vw);
	left: 0.2vw;
	height: calc( 100% - 6vh );
	top: 4vh;
}

.dataUnit .content .chart{
	position: absolute;
	width: 100%;
	height: calc( 100% - 2vh );
	left: 0;
	top: 2vh;
}

.dataUnit .content .chart.forList{
	width: 65%;
}

.dataUnit .content .chart.forFilter{
	height: calc( 100% - 3vh );
	top: 3vh;
}


.dataUnit .content .listWarp{
	position: absolute;
	height: 90%;
	top: 2%;
	width: 96%;
	left: 2%;
	overflow-y: auto;
}




.dataUnit .itemList{
	border: 0;
	border-collapse: collapse;
	position: absolute;
	height: calc( 100% - 4vh );
	top: 3vh;
	width: 35%;
	right: 0;
}


.dataUnit .itemList tr td{
	font-size: 1.3vh;
	color: rgba(255,255,255,0.5);
}

.dataUnit .itemList tr .leftBorder{
	padding: 0 0 0 1vh;
}

.dataUnit .itemList tr td svg{
	fill: #ffffff;
	width: 2.4vh;
	height: 2.4vh;
	margin: 0 0.5vh -0.1vh 0;
}

.dataUnit .itemList tr td span{
	font-family: thinnumber, serif;
	font-size: 2.6vh;
	margin-right: 0.4vh;
	color: #ffffff;
}

.dataUnit .itemList tr td b{
	font-weight: normal;
}

.dataUnit .itemList tr td b.name{
	color: #ffffff;
	font-size: 1.4vh;
}

.dataUnit .itemList tr td b.data{
	margin: 0 0 0 0.5vh;
	color: #ffffff;
}

.dataUnit .itemList tr td b.des{
	color: rgba(255,255,255,0.6);
	font-size: 1.2vh;
}

.dataUnit .itemList tr td b small{
	font-size: 11px;
	color: #ffffff;
	display: inline-block;
	background: #0d94ff;
	padding: 0.1vh 0.2vh;
	transform: scale(0.7);
	font-weight: bold;
}

.dataUnit .itemList tr:nth-child(1) td .leftBorder{
	border-left: #187ce3 solid 4px;
}

.dataUnit .itemList tr:nth-child(2) td .leftBorder{
	border-left: #29edab solid 4px;
}

.dataUnit .itemList tr:nth-child(3) td .leftBorder{
	border-left: #fa6a23 solid 4px;
}

.dataUnit .itemList tr:nth-child(4) td .leftBorder{
	border-left: #5e49c7 solid 4px;
}



.dataUnit .filterWarp{
	width: 100%;
	text-align: center;
	margin: 1vh 0 0 0;
}


.filter{
	height: 2vh;
	list-style: none;
	margin: 0;
	padding: 0;
}

.filter li{
	display: inline-block;
	font-size: 1.4vh;
	font-weight: bold;
	padding: 0.3vh 2vh 0.4vh 2vh;
	border: rgba(255,255,255,0.4) solid 1px;
	margin: 0 0 0 -1px;
	user-select: none;
	background: rgba(0,0,0,0.4);
	cursor: pointer;
}

.filter li:hover, .filter li.active{
	background: rgba(0,162,255,0.6);
}



.dataUnit .blockGrid{
	width: 100%;
	height: calc( 100% - 2vh );
	font-size: 0;
	margin: 2vh 0 0 0;
}

.dataUnit .blockGrid .bgUnit{
	display: inline-block;
	font-size: 1.3vh;
	width: calc( 50% - 3vh );
	height: 33.3%;
	position: relative;
	margin: 0 0 0 3vh;
}

.dataUnit .blockGrid .bgUnit svg{
	fill:#ffffff;
	width: 6vh;
	height: 6vh;
	position: absolute;
	left: 0.5vh;
	top: 0.7vh;
}

.dataUnit .blockGrid .bgUnit .bgTitle{
	color: rgba(255,255,255,0.7);
	position: absolute;
	left: 8vh;
	top: 1vh;
	font-size: 1.3vh;

}

.dataUnit .blockGrid .bgUnit .bgContent{
	font-family: thinnumber,serif;
	position: absolute;
	left: 8vh;
	top: 3vh;

}

.dataUnit .blockGrid .bgUnit .bgContent span{
	font-size: 3vh;
}
.dataUnit .blockGrid .bgUnit .bgContent small{
	font-size: 1.8vh;
	margin-left: 0.2vh;
	color: brown;
}

.dataBlock.env{
	width: 100%;
	height: 36vh;
}

.dataBlock .bigList{
	width: 100%;
	height: 100%;
	font-size: 0;
}

.dataBlock .bigList div{
	color: rgba(255,255,255,0.5);
	position: relative;
	width: 50%;
	height: 50%;
	display: inline-block;
}

.dataBlock .bigList div svg{
	fill: #ffffff;
	width: 6vh;
	height: 6vh;
	position: absolute;
	top: calc( 50% - 3vh );
}

.dataBlock .bigList div b{
	position: absolute;
	left: 6vh;
	top: calc( 50% - 3vh );;
	font-size: 1.5vh;
}

.dataBlock .bigList div small{
	position: absolute;
	left: 6vh;
	top: calc( 50% - 1vh );
	font-size: 1.5vh;
}


.dataBlock .bigList div span{
	font-family: thinnumber, serif;
	font-size: 3vh;
	color: #ffffff;
}


.dataBlock .des{
	margin: 2vh 0 0 0;
	font-size: 1.4vh;
	line-height: 2.1vh;
	color: #ffffff;
}

.popWindow .PDJ{
	position: absolute;
	width: 100%;
	height: calc( 100% - 8vh );
	right: 0;
	top: 6vh;
}

.popWindow .PDJ .unit{
	width: 100%;
	font-size: 0;
	padding: 1vh 0;
	border-top: rgba(255,255,255,0.1) solid 1px;
}

.popWindow .PDJ .unit span.unitName{
	font-size: 1.6vh;
	color: #ffffff;
	font-weight: bold;
	width: 100%;
	text-align: left;
	margin-bottom: 1vh;
	display: inline-block;
}


.popWindow .PDJ .unit span{
	display: inline-block;
	font-size: 1.2vh;
	color: rgba(255,255,255,0.6);
	text-align: center;
	margin-left: 2vw;
}

.switch{
	width: 40px;
	height: 20px;
	position: relative;
	border-radius: 20px;
}

.switch::before{
	content: "";
	display: block;
	position: absolute;
	width: 16px;
	height: 16px;
	background: #ffffff;
	border-radius: 18px;
	top: 2px;
	box-shadow: 0 1px 6px rgba(0,0,0,0.4);;
}

.switch.on{
	background: #4d9a1f;
}
.switch.on::before{
	left: 2px;
}
.switch.off{
	background: #7e7e7e;
}
.switch.off::before{
	right: 2px;
}

.popWindow .ACF{
	position: absolute;
	width: 100%;
	height: calc( 100% - 8vh );
	right: 0;
	top: 6vh;
	background-image: url("../images/ACF.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 80%;
}

.mjTop{
	width: 96%;
	font-size: 0;
	position: absolute;
	left: 2%;
	top: 7vh;
}

.mjTop div{
	display: inline-block;
	height: 9vh;
	width: calc( 25% - 20px );
	margin: 0 8px ;
	border: #315585 solid 1px;
	background: rgba(0,0,0,0.6);
	position: relative;
}

.mjTop div svg{
	width: 6vh;
	height: 6vh;
	fill:rgba(255,255,255,0.6);
	position: absolute;
	left: 2vh;
	top: 1.5vh;
}

.mjTop div span{
	font-size: 1.6vh;
	color: rgba(255,255,255,0.6);
	position: absolute;
	top: 1vh;
	left: 10vh;
}

.mjTop div b{
	font-family: thinnumber, serif;
	font-weight: normal;
	font-size: 4vh;
	color: #ffffff;
	position: absolute;
	top: 3vh;
	left: 10vh;
}

.mjTop div b small{
	font-family: "Microsoft YaHei", 微软雅黑, serif;
	font-weight: normal;
	font-size: 1.2vh;
	color: rgba(255,255,255,0.6);
	margin: 0 3px 4px 0;
}

.mjList{
	position: absolute;
	height: calc( 100% - 20vh );
	top: 18vh;
	overflow-y: auto;
	background: rgba(61,97,148,0.2);
}

.mjList.left{
	width: 20vw;
	left: calc( 2% + 10px );
}

.mjList.right{
	width: 55vw;
	right: calc( 2% + 15px );
}

.mjList .title{
	font-size: 1.3vh;
	font-weight: bold;
	color: #ffffff;
	position: relative;
	letter-spacing: 0.3vh;
	height: 2vh;
	margin: 0 0 10px 8px;
}

.mjList .title::before{
	content: "";
	display: block;
	position: absolute;
	width: 1vh;
	height: 1vh;
	border-top: #25a6ef solid 2px;
	border-left: #25a6ef solid 2px;
	left: -0.7vh;
	top: -0.5vh;
}

.mjTX{
	height: 50px;
	width: auto;
}

.mjZP{
	height: 80px;
	width: auto;
	margin: 10px 0 5px 0;
}

.SBZ{
	font-size: 10px;
	position: absolute;
	-webkit-text-size-adjust:none;
}

.SSB{
	color: #ffffff;
	font-size: 1.3vh;
	font-weight: bold;
	padding: 3px;
	background: rgba(0,0,0,0.6);
	position: absolute;
	-webkit-text-size-adjust:none;
}


#pipes{
	background: rgba(0,0,0,0.6);
	list-style: none;
	margin: 0;
	padding: 10px;
	position: absolute;
	z-index: 1;
	left: 1.5vw;
	top: 7vh;
	color: rgba(255,255,255,0.8);
	font-size: 1.5vh;
	display: none;
}


#pipes li{
	margin: 5px 0;
}

#pipes li span{
	display: inline-block;
	height: 3px;
	width: 20px;
	margin: 0 3px 4px 1px;
}

#pipes li:nth-child(1) span{
	background: #54c531;
}
#pipes li:nth-child(2) span{
	background: #a21111;
}
#pipes li:nth-child(3) span{
	background: #0d94ff;
}
#pipes li:nth-child(4) span{
	background: #ddd000;
}
#pipes li:nth-child(5) span{
	background: #90552e;
}
#pipes li:nth-child(6) span{
	background: #bb4ac8;
}
#pipes li img{
	margin: 0 2px -6px 2px;
}