@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:#01091e
}

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

select{
	background: rgba(0,0,0,0.2);
	color: rgba(255,255,255,0.7);
	border: rgba(0,134,234,0.4) solid 1px;
	font-size: 12px;
}

::-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;
	left:0;
	height:100%;
	width:100%;
	overflow:hidden;
	z-index: 1;
}


.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 svg{
	fill: currentColor;
	width: 0.7em;
	height: 0.7em;
	margin-top: 0.05em;
}

.loadingCircle .mask span{
	font-size: 12px;
	text-align: center;
	font-weight: bold;
	display: block;
	margin-top: 1.8em;

}

@-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;
}


.topBar{
	position: absolute;
	z-index: 4;
	width: 100%;
	left: 0;
	top: 0;
	height: 6vh;
	pointer-events: 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: #034d7a;
	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;
}

.topBar .runTime{
	pointer-events: none;
	user-select: none;
	color: rgba(255,255,255,0.4);
	font-size: 1.3vh;
	width: 100%;
	height: 1.5vh;
	position: absolute;
	left: 0;
	top: 6.5vh;
	text-align: center;
}

.topBar .runTime span{
	color: rgba(255,255,255,0.7);
	margin: 0 2px;
}



.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 1.5vh 0 1.5vh;
	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: #444444;
	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;
}



.leftBar, .slideBar.left{
	position: absolute;
	z-index: 3;
	width: 30vw;
	height: 100%;
	left: 0;
	top: 0;
	background: linear-gradient(to right, rgba(11,19,31,0.9) 60%,rgba(11,19,31,0));
	pointer-events: none;
	transition: transform .75s;
}

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

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


.rightBar, .slideBar.right{
	position: absolute;
	z-index: 3;
	height: 100%;
	right: 0;
	top: 0;
	background: linear-gradient(to left, rgba(11,19,31,0.9) 60%,rgba(11,19,31,0));
	pointer-events: none;
	transition: transform .75s;
}

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

.rightBar{
	width: 30vw;
}

.slideBar{
	width: 25vw;
}


.popWindow{
	position: absolute;
	z-index: 4;
	transition: transform .5s;
	pointer-events: none;
	transform: scaleY(0);
	display: none;
}

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


.popWindow.popBuilding, .popWindow.popPD, .popWindow.popBF, .popWindow.popZM{
	width: 76vw;
	height: 76vh;
	left: 12vw;
	top: 10vh;
}
.popWindow.popCamera{
	width: 50vw;
	height: 60vh;
	left: 25vw;
	top: 20vh;
	background: rgba(11,19,31,0.9);
	pointer-events: auto;
}



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

.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;
}



.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;
}

.popWindow .videoZone{
	position: absolute;
	width: calc( 100% - 230px );
	height: calc( 100% - 8vh );
	left: 20px;
	top: 6vh;
	background-image: url("../images/video.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 100%;
}
.popWindow .cameraUI{
	position: absolute;
	width: 210px;
	height: calc( 100% - 8vh );
	right: 0;
	top: 6vh;
	background-image: url("../images/cameraUI.png");
	background-repeat: no-repeat;
	background-position: top;
	opacity: 0.5;
}
.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;
}





.floatInfo{
	font-family: thinnumber, serif;
	position: absolute;
	z-index: 5;
	width: 80px;
	height: 25px;
	background: rgba(0,0,0,0.6);
	color: #9e9e9e;
	font-size: 12px;
	font-style: italic;
	margin-top: -50px;
}

.floatInfo.blueBack{
	background: rgba(0,80,210,0.8);
}

.floatInfo.greenBack{
	background: rgba(10,104,0,0.7);
}

.floatInfo svg{
	width: 18px;
	height: 18px;
	fill: currentColor;
	margin: 3px 0 -4px 3px;
}

.floatInfo span{
	font-size: 16px;
	color: #ffffff;
	margin: 0 3px;
	line-height: 24px;
}
.floatInfo b{
	font-weight: normal;
}


.floatInfo::before{
	content: "";
	display: block;
	position: absolute;
	left: 37px;
	bottom: -5px;
	width: 1px;
	height: 0;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
}
.floatInfo::after{
	content: "";
	display: block;
	position: absolute;
	left: 40px;
	bottom: -55px;
	width: 0;
	height: 52px;
}
.floatInfo div{
	position: absolute;
	left: 0;
	bottom: 1px;
	height: 3px;
	transform: scaleX(0);
	transition: transform 1.3s;
	transform-origin: 0 0;
}

.floatInfo div.show{
	transform: scaleX(1);
}


.floatInfo.normal{
	border-bottom: #038cda solid 1px;
}
.floatInfo.normal::before{
	border-top: #038cda solid 4px;
}
.floatInfo.normal::after{
	border-left: #038cda dotted 1px;
}
.floatInfo.normal div{
	background: #038cda;
}

.floatInfo.max{
	border-bottom: #ff5936 solid 1px;
}
.floatInfo.max::before{
	border-top: #ff5936 solid 4px;
}
.floatInfo.max::after{
	border-left: #ff5936 dotted 1px;
}
.floatInfo.max div{
	background: #ff5936;
}

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

.rightBar .dataBlock, .slideBar.right .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: 16vh;
}
.dataBlock.building.mid{
	height: 22vh;
}
.dataBlock.main.short{
	height: 18vh;
}
.dataBlock.pd{
	width: 100%;
	height: 29vh;
	margin-bottom: 2vh;
}

.dataBlock.bf{
	width: 100%;
	height: 29vh;
	margin-bottom: 2vh;
}



.dataBlock.pd.short{
	width: 100%;
	height: 22vh;
	margin-bottom: 10px;
}

.dataBlock.bf.short{
	width: 100%;
	height: 22vh;
	margin-bottom: 10px;
}

.dataBlock.pd.veryShort{
	width: 100%;
	height: 15vh;
}


.dataBlock.bf.veryShort{
	width: 100%;
	height: 15vh;
	margin: 2vh 0 0 0;
}

.dataBlock.bf.long{
	height: 40vh;
	margin-top: 1vh;
}

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

.dataBlock.long{
	height: 50vh;
}

.dataBlock.veryLong{
	height: 59vh;
}

.dataBlock.full{
	height: 85vh;
}

.dataBlock.half{
	height: 40vh;
}

.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 .chart.C{
	width: 30%;
	position: absolute;
	top: 3vh;
	left: 35%;
	height: calc( 100% - 5vh );
}
.dataBlock .chart.D{
	width: 85%;
	height: calc( 100% - 4vh );
	top: 4vh;
}

.dataBlock .chart.E{
	width: 15vw;
	height: 24vh;
	top: 3vh;
}

.dataBlock .chart.F{
	margin-top: 2vh;
}

.dataBlock .chart.G{
	margin-top: 2vh;
	width: 12vw;
}


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

.dataBlock .blockGrid .bgUnit{
	display: inline-block;
	font-size: 1.3vh;
	width: 50%;
	height: 30%;
	margin: 3% 0 0 0;
	position: relative;
}

.dataBlock .blockGrid .bgUnit svg{
	fill:#ffffff;
	width: 4.5vh;
	height: 4.5vh;
	position: absolute;
	left: 0;
	top: 2vh;
}

.dataBlock .blockGrid .bgUnit .bgTitle{
	color: rgba(255,255,255,0.5);
	position: absolute;
	left: 5vh;
	top: 1vh;

}

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

}

.dataBlock .blockGrid .bgUnit .bgContent span{
	font-size: 3.5vh;
}
.dataBlock .blockGrid .bgUnit .bgContent small{
	font-size: 2vh;
	margin-left: 0.5vh;
	color: brown;
}
.dataBlock .deviceInfo{
	width: 100%;
	height: 40%;
	top: 28%;
	left: 0;
	position: absolute;
	font-size: 0;
}

.dataBlock .deviceInfo .bigInfo{
	display: inline-block;
	width: 40%;
	height: 100%;
}

.dataBlock .deviceInfo .bigInfo span{
	display: block;
	font-size: 1.3vh;
	text-align: center;
	color: rgba(255,255,255,0.3);
}
.dataBlock .deviceInfo .bigInfo b{
	display: block;
	font-family: thinnumber, serif;
	font-size: 3vh;
	font-weight: normal;
	text-align: center;
}
.dataBlock .deviceInfo .graphic{
	display: inline-block;
	width: 20%;
	height: 100%;
	color: #ffffff;
}
.dataBlock .deviceInfo .graphic svg{
	width: 70%;
	height: 70%;
	fill: currentColor;
	margin: 20% 0 0 15%;
}



.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_B_text{
	font-size: 1.3vh;
	width: 100%;
	text-align: center;
	left: 0;
	margin-top: -3vh;
}

.dataBlock .chart_B_text span{
	color: rgba(255,255,255,0.4);
	margin: 0 1vh;
}

.dataBlock .chart_B_text span b{
	color: #ffffff;
	margin:0 0.5vh;
}

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

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


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


.dataBlock .listWarp.rudw{
	height: calc( 100% - 7vh );
	top: 7vh;
	width: 90%;
}


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

.dataBlock .normalList tr th{
	background: rgba(255,255,255,0.05);
	height: 3.5vh;
	color: rgba(255,255,255,0.7);
	border-bottom: rgba(0,0,0,0.3) solid 1px;
}

.dataBlock .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;
}

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

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

.dataBlock .dbSelect{
	position: absolute;
	right: 10px;
	top: 2px;
}


.dataBlock .normalList tr td span{
	color: #ffffff;
	margin: 0 0.6vw 0 0;
	font-size: 1.3vh;
}




.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.full{
	width: 100%;
}

.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: 12px;
	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;
	transition: opacity .3s;
	opacity: 0;
	text-align: center;
}

.floatName p{
	display: block;
	margin: 3px 0 ;
}

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

.floatName.show{
	opacity: 1;
}


.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;
}

.gWarp{
	background: rgba(0,0,0,0.4);
	width: 100%;
	height: 100%;
	margin: 0 0 0 -1.5vw;

}

.gWarp .treeListImage{
	margin: 2vh 0 0 2vh;
}

.ACWarp{
	text-align: center;
	width: 100%;
}

.ACWarp img{
	margin-left: -50px;
}

.sxIMG{
	width: 22vh;
	height: 18vh;
	margin: 3vh auto 0 auto;
}

.sxData{
	font-size: 15px;
	color: #ffffff;
	text-align: center;
	width: 80%;
	margin-top: 10px;

}

.sxData span{
	font-family: thinnumber,serif;
	font-size: 22px;
	margin-left: 5px;

}

.ACU{
	width: 100%;
	font-size: 0;
	margin-bottom: 3vh;
	background: rgba(0,0,0,0.5);
	border-bottom: rgba(35,175,255,0.6) solid 1px;
	border-top: rgba(35,175,255,0.6) solid 1px;
	padding: 1vh 0 2vh 0;
	pointer-events: auto;
}

.ACU span{
	display: block;
	width: 100%;
	font-size: 1.3vh;
	font-weight: bold;
	color: rgba(255,255,255,1);
	text-align: center;
}

.ACU div{
	font-size: 1.1vh;
	color: rgba(255,255,255,0.6);
	display: inline-block;
	width: 33%;
	text-align: center;
	margin-top: 1vh;
	cursor: pointer;
}

.ACU div svg{
	fill: currentColor;
	width: 4vh;
	height: 4vh;
}

.ACU div b{
	display: block;
	width: 100%;
	font-weight: normal;
}

.ACU div.active svg, .ACU div:hover svg{
	fill: #53a8ff;
}
.ACU div.active b, .ACU div:hover b{
	color: #53a8ff;
}

.SJA{
	width: 6vw;
	height: 4vh;
	background: #4d9a1f;
	margin: 3vh auto 0 auto;
	color: #ffffff;
	font-size: 1.6vh;
	line-height: 3.8vh;
	text-align: center;
	border-radius: 3px;
}

.slideBarTabWarp{
	width: 100%;
	text-align: right;
	pointer-events: auto;
}

.sTab{
	font-size: 0;
	position: absolute;
	right: 2.25vw;
	top: 0;
	z-index: 88;
	user-select: none;
}

.sTab.styleB{
	right: -1vw;
	position: relative;
	margin: 7vh 4vw 1vh 0;
}

.sTab span{
	font-size: 12px;
	display: inline-block;
	padding: 1px 6px;
	background: rgba(0,0,0,0.4);
	border: #25a6ef solid 1px;
	margin-left: -1px;
	color: rgba(255,255,255,0.7);
	cursor: pointer;
}

.sTab.styleB span{
	font-size: 16px;
	font-weight: bold;

	text-align: center;
	width: 5vw;
	height: 3vh;
	line-height: 3vh;


	margin-left: -1px;


}

.sTab span:hover, .sTab span.active{
	background: #0086ea;
	color: #ffffff;
}


.typeIcon{
	width: 6vw;
	height: 6vw;
	border-radius: 50%;
	background: rgba(0,0,0,0.3);
	position: absolute;
	left: 0;
	top: calc( 50% - 4vw );
}

.typeIcon.power{
	color: #fdd930;
}

.typeIcon.water{
	color: #25a6ef;
}

.typeIcon svg{
	fill: currentColor;
	width: 4vw;
	height: 4vw;
	margin: 1vw;
}

.typeText{
	width: 6vw;
	text-align: center;
	position: absolute;
	left: 0;
	top: calc( 50% + 2vw + 10px );
	font-size: 2vh;
	color: #ffffff;
	font-weight: bold;
}

.typeText select{
	margin-left: 10px;
	font-size: 1.5vh;
}

.typeContent{
	position: absolute;
	left: 7.5vw;
	top: calc( 50% - 4vw );
}

.typeContent span{
	font-size: 1.2vh;
	display: block;
	color: rgba(255,255,255,0.7);
	margin-bottom: 1vh;
}

.typeContent span b{
	font-family: thinnumber, serif;
	font-weight: normal;
	font-size: 3vh;
	color: #ffffff;
	margin: 0 0.5vh 0 0;
}

.typeContent span svg{
	width: 1.5vh;
	height: 1.5vh;
	margin: 0 0 -0.3vh 0;
}

.typeContent span svg.up{
	fill:#ff4343
}

.typeContent span svg.down{
	fill:#49c489
}

.sTabContent{
	visibility: visible;
	position: absolute;
	width: 100%;
	height: 100%;


}

.sTabContent.hide{
	visibility: hidden;
}

.videoBox{
	position: absolute;
	width: 32vw;
	height: 36vh;
	background: rgba(0,0,0,0.8);
	left: calc( 50% - 16vw );
	bottom: 1vh;
	z-index: 66;
}

.videoBox .cameraTitle{
	width: 100%;
	text-align: center;
	height: 3vh;
}

.videoBox .cameraTitle select{
	font-size: 16px;
	margin-top: 5px;
	pointer-events: auto;
}

.videoBox .video{
	width: 96%;
	margin: 1vh 2% 0 2%;
	height: 31vh;
	background-image: url("../images/video.jpg");
	background-position: center;
	background-size: cover;
}

.HJunit{
	display: inline-block;
	width: 45%;
	color: #ffffff;
	font-size: 1.5vh;
	margin: 2.5vh 0 0 0;
}

.HJunit small{
	display: block;
}

.HJunit span{
	display: block;
}

.HJunit span b{
	font-family: thinnumber,serif;
	font-weight: normal;
	font-size: 4vh;
	margin-right: 5px;
}