@charset "utf-8";

:root{
	--main: #000000;
	--mainP7: rgba(0,0,0,0.7);
	--mainP5: rgba(0,0,0,0.5);
	--mainP3: rgba(0,0,0,0.3);
	--sub: #ffffff;
	--subP7: rgba(255,255,255,0.7);
	--subP5: rgba(255,255,255,0.5);
	--subP3: rgba(255,255,255,0.3);
	--subP2: rgba(255,255,255,0.2);
	--subP1: rgba(255,255,255,0.1);
	--text: #ffffff;
	--textP7: rgba(255,255,255,0.7);
	--textP5: rgba(255,255,255,0.5);
	--textP2: rgba(255,255,255,0.2);
	--theme: #58a7ff;
	--themeP4: rgba(0,74,213,0.4);
	--themeP2: rgba(0,74,213,0.2);
}



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

}

body {
	font-family: "Microsoft YaHei", 微软雅黑, serif;
	overflow: hidden;
	height:100%;
	margin:0;
	padding:0;
	background: #1d262f;
}

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

select{
	border: var(--textP5) solid 1px;
	background: var(--mainP7);
	color: var(--text);
	font-size: 1.25vh;
	padding: 0.25vh 0.25vw;
}

@keyframes rotating{
	from{transform: rotate(0deg)}
	to{transform: rotate(360deg)}
}

@keyframes radar-beam {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}


::-webkit-scrollbar {
	width: 0.4vw;
	height: 0.1vh;
}
::-webkit-scrollbar-thumb {
	-webkit-box-shadow: inset 0 0 0.5vh rgba(0,0,0,0.2);
	background: rgba(255,255,255,0.3);
}
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 0.5vh rgba(0,0,0,0.2);
	background: rgba(0,0,0,0.1);
}

.svgGrad{
	width: 0;
	height: 0;
	position: absolute;
}

#container{
	position:absolute;
	top:0;
	left:0;
	height:100vh;
	width:100vw;
	overflow:hidden;
	z-index: 1;
	background-image: url("../images/loading.png");
	background-position: center;
	background-repeat: no-repeat;
}


.floatPanel{
	position: absolute;
	background: rgba(0,0,0,0.6);
	border: rgba(255,255,255,1) solid 1px;
	margin-top: -20px;
	padding: 1px 4px 3px 4px;
	z-index: 888;
	user-select: none;
	pointer-events: none;
	text-align: center;
}

.floatPanel .title{
	font-size: 12px;
	color: #ffffff;
	border-bottom: rgba(255,255,255,0.3);
}

.floatPanel .content{
	font-size: 12px;
	color: #FFFFFF;
}

.buildingLabel{
	width: 40px;
	height: 40px;
	background: radial-gradient(ellipse 100% 100% at 0 0, rgba(20,100,255,0.9), rgba(20,50,115,0.7));
	border-radius: 50%;
	border: var(--sub) solid 2px;
	cursor: pointer;
}

.buildingLabel::before{
	content: "";
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	border-radius: 50%;
	left: -2px;
	top: -2px;
	border: var(--sub) solid 2px;
	transition: opacity .5s, transform .5s;
	opacity: 1;
	-webkit-animation:zoomBuildingLabel 2s infinite ease-out;
}

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

.buildingLabel::after{
	content: "";
	display: block;
	width: 34px;
	height: 34px;
	position: absolute;
	border-radius: 50%;
	left: 2px;
	top: 2px;
	border: var(--sub) solid 1px;
}

.buildingLabel:hover{
	background: linear-gradient(var(--theme), var(--sub));
}


.buildingLabel a{
	width: 40px;
	height: 40px;
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	line-height: 38px;
	color: var(--text);
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}

.buildingLabel:hover a{
	color: #000000;
}

.buildingLabel span{
	width: 100px;
	height: 23px;
	background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,0));
	display: none;
	position: absolute;
	left: -30px;
	top: -30px;
	text-align: center;
	color: var(--text);
	font-size: 13px;
	line-height: 23px;
}

.buildingLabel:hover span{
	display: block;
}









.topBar{
	width: 100%;
	height: 50px;
	left: 0;
	top: -70px;
	position: absolute;
	z-index: 6;
	border-collapse: collapse;
	border: 0;
	background: linear-gradient(to bottom, var(--mainP7), rgba(0,0,0,0));
	transition: transform .5s;
}

.topBar.show{
	transform: translateY(70px);
}

.topBar .side{
	width: 50%;
	position: relative;
}

.topBar .side::before{
	content: "";
	display: block;
	width: 3px;
	height: 3px;
	border: var(--sub) solid 1px;
	background: var(--subP7);
	transform:rotate(45deg);
	position: absolute;
	bottom: 20px;
}

.topBar .side.left::before{
	right: 23px;
}

.topBar .side.right::before{
	left: 23px;
}

.topBar .side::after{
	content: "";
	display: block;
	width: calc( 100% - 32px );
	height: 2px;
	position: absolute;
	bottom: 22px;
}

.topBar .side.left::after{
	left: 0;
	background-image: linear-gradient(to left, var(--subP7) 0%, rgba(0,0,0,0) 90%);
}

.topBar .side.right::after{
	right: 0;
	background-image: linear-gradient(to right, var(--subP7) 0%, rgba(0,0,0,0) 90%);
}

.topBar .side span{
	display: inline-block;
	color: var(--subP7);
	font-size: 12px;
	font-family: "Microsoft YaHei", 微软雅黑, serif;
	z-index: 1;
	margin-bottom: 30px;
}

.topBar .side span a{
	margin-right: 4px;
}

.topBar .side span.hideForChart{
	font-family: thinnumber,serif;
	user-select: none;
	pointer-events: none;
	opacity: 0;
}

.topBar .side.left{
	font-weight: bold;
}

.topBar .side.right{
	text-align: right;
}

.topBar .side.left span{
	margin-left: 10px;
}

.topBar .side.right span{
	margin-right: 10px;
}

.topBar .title{
	width: 0;
	position: relative;
	padding: 0;
}

.topBar .title .text{
	font-family: "Microsoft YaHei", 微软雅黑, serif;
	background-image:-webkit-linear-gradient(top,var(--sub),var(--sub),var(--theme));
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	display: block;
	white-space: nowrap;
	font-size: 28px;
	letter-spacing: 3px;
	text-align: center;
	padding-left: 10px;
	font-weight: bold;
	margin: -8px 0 0 0;
}

.topBar .title .lowerLine{
	width: 33.3%;
	height: 0;
	position: absolute;
	left: 33.3%;
	bottom: 2px;
	border-bottom: var(--subP7) dotted 2px;
}

.topBar .title .lowerLine::before,.topBar .title .lowerLine::after{
	content: "";
	display: block;
	width: 100%;
	height: 0;
	position: absolute;
	bottom: -2px;
	border-bottom: var(--subP7) solid 2px;
}

.topBar .title .lowerLine::before{
	left: calc( -100% - 5px );
}

.topBar .title .lowerLine::after{
	right: calc( -100% - 6px );
}

.topBar .title::before, .topBar .title::after{
	content: "";
	display: block;
	height: 23px;
	width: 23px;
	border-bottom: var(--subP7) solid 2px;
	position: absolute;
	bottom: 7px;
}

.topBar .title::before{
	transform:rotate(45deg);
	left: -16px;
}

.topBar .title::after{
	transform:rotate(-45deg);
	right: -16px;
}

.topBar .title .bottomLine{
	width: calc( 100% + 16px );
	height: 3px;
	position: absolute;
	bottom: -3px;
}

.topBar .title .bottomLine .line{
	width: 20%;
	height: 1px;
	background: var(--subP7);
	position: absolute;
	bottom: 0;
}

.topBar .title .bottomLine .line::before{
	content: "";
	display: block;
	position: absolute;
	width: 15px;
	height: 1px;
	background: var(--sub);
}

.topBar .title .bottomLine .line.left{
	left: -8px;
}

.topBar .title .bottomLine .line.right{
	right:8px;
}


.topBar .title .bottomLine .line.left::before{
	right: -10px;
}

.topBar .title .bottomLine .line.right::before{
	left: -10px;
}

.topBar .title .bottomLine .line::after{
	content: "";
	display: block;
	position: absolute;
	width: 28px;
	height: 1px;
	background: var(--subP7);
	bottom: 10px;
}

.topBar .title .bottomLine .line.left::after{
	transform:rotate(45deg);
	left: -24px;
}

.topBar .title .bottomLine .line.right::after{
	transform:rotate(-45deg);
	right: -24px;
}

.topBar .title .bottomLine .line .exLine{
	position: absolute;
	width: 10vw;
	height: 1px;
	background: var(--subP7);
	top: -20px;
}

.topBar .title .bottomLine .line.right .exLine{
	right: calc( -10vw - 20px );
}

.topBar .title .bottomLine .line.left .exLine{
	left: calc( -10vw - 20px );
}

.topBar .title .bottomLine .line .exLine::before{
	content: "";
	display: block;
	width: 2px;
	height: 2px;
	transform:rotate(45deg);
	border: var(--sub) solid 1px;
	background: var(--main);
	opacity: 0.4;
	position: absolute;
	top: -1px;
}

.topBar .title .bottomLine .line.left .exLine::before{
	left: -4px;
}

.topBar .title .bottomLine .line.right .exLine::before{
	right: -4px;
}

.topBar .title .gradBlock{
	position: absolute;
	white-space: nowrap;
	top: 5px;
	display: flex;
}

.topBar .title .gradBlock span{
	display: inline-block;
	height: 17px;
	width: 18px;
	background: var(--subP7);
}

.topBar .title .gradBlock span:nth-child(1){
	opacity: 0.7;
}
.topBar .title .gradBlock span:nth-child(2){
	opacity: 0.6;
}
.topBar .title .gradBlock span:nth-child(3){
	opacity: 0.5;
}
.topBar .title .gradBlock span:nth-child(4){
	opacity: 0.4;
}
.topBar .title .gradBlock span:nth-child(5){
	opacity: 0.3;
}
.topBar .title .gradBlock span:nth-child(6){
	opacity: 0.2;
}

.topBar .title .gradBlock.left{
	left: -192px;
	flex-direction: row-reverse;
}

.topBar .title .gradBlock.right{
	right: -192px;
	flex-direction: row;
}

.topBar .title .gradBlock.left span{
	margin-right: 8px;
	transform: skew(45deg);
}

.topBar .title .gradBlock.right span{
	margin-left: 8px;
	transform: skew(-45deg);
}



.subTitle{
	width: 100%;
	height: 40px;
	left: 0;
	top: -50px;
	position: absolute;
	z-index: 6;
	border-collapse: collapse;
	border: 0;
	background: linear-gradient(to bottom, var(--mainP7), rgba(0,0,0,0));
	transition: transform .5s;
}

.subTitle.show{
	transform: translateY(50px);
}

.subTitle::after{
	display: block;
	content: "";
	position: absolute;
	width: 5px;
	height: 5px;
	background: var(--subP7);
	transform: rotate(45deg);
	bottom: 1px;
	left: calc( 50% - 2px );
}

.subTitle .side{
	width: 50%;
	position: relative;
}

.subTitle .side::before{
	display: block;
	position: absolute;
	content: "";
	height: 1px;
	width: calc( 100% - 40px );
	bottom: 24px;
}

.subTitle .side.left::before{
	right: 20px;
	background: linear-gradient(to left, var(--subP7), rgba(0,0,0,0));
}

.subTitle .side.right::before{
	left: 20px;
	background: linear-gradient(to right, var(--subP7), rgba(0,0,0,0));
}

.subTitle .side::after{
	display: block;
	position: absolute;
	content: "";
	height: 8px;
	width: 100px;
	background: var(--sub);
	opacity: 0.4;
}

.subTitle .side.left::after{
	right: 18px;
	transform: skew(45deg);

}

.subTitle .side.right::after{
	left: 18px;
	transform: skew(-45deg);
}


.subTitle .title{
	font-family: "Microsoft YaHei", 微软雅黑, serif;
	color: var(--text);
	display: block;
	white-space: nowrap;
	font-size: 21px;
	letter-spacing: 4px;
	text-align: center;
	padding: 0 7px 0 10px;
	font-weight: bold;
	line-height: 34px;
	height: 36px;
	border-bottom: var(--subP7) solid 1px;
	position: relative;
}

.subTitle .title::before, .subTitle .title::after{
	content: "";
	display: block;
	height: 30px;
	width: 30px;
	border-bottom: var(--subP7) solid 1px;
	position: absolute;
	bottom: 5px;
}

.subTitle .title::before{
	transform:rotate(45deg);
	left: -14px;
}

.subTitle .title::after{
	transform:rotate(-45deg);
	right: -14px;
}

.GRBtn{
	display: inline-block;
	color: var(--text);
	font-size: 17px;
	font-weight: bold;
	padding: 6px 15px 10px 15px;
	border-radius: 5px;
	letter-spacing: 2px;
	position: relative;
	cursor: pointer;
	border: #649fe1 solid 1px;
}

.GRBtn::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border-radius: 5px;
	position: absolute;
	background: rgba(0,51,127,0.6);
	z-index: -2;
}

.GRBtn::after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border-radius: 5px;
	position: absolute;
	background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(69,231,255,1), rgba(0,0,0,0));
	z-index: -1;
}


.GRBtn:hover::before{
	background: linear-gradient(to bottom, #00156e, #006eea);
}

.GRBtn:hover::after{
	display: none;
}














.mainNav{
	position:absolute;
	width: 50%;
	left:25%;
	bottom:-74px;
	z-index: 6;
	height: 70px;
	text-align: center;
	transition: transform .5s;
	font-size: 0;
	pointer-events: none;
}

.mainNav.show{
	transform: translateY(-100px);
}

.mainNav .warp{
	display: inline-block;
	position: relative;
}


.mainNav .warp::before, .mainNav .warp::after{
	content: "";
	display: block;
	position: absolute;
	width: 4px;
	height: 4px;
	border: var(--sub) solid 1px;
	background: var(--subP7);
	transform:rotate(45deg);
	top: 30px;
}

.mainNav .warp::before{
	left: -12px;
}

.mainNav .warp::after{
	right: -12px;
}

.mainNav span{
	display: inline-block;
	height: 100%;
	text-align: center;
	padding: 0 20px;
	margin: 0 2px;
	color: var(--text);
	background: linear-gradient(to bottom, rgba(0,0,0,0), var(--main));
	user-select: none;
	cursor: pointer;
	pointer-events: auto;
}

.mainNav span svg{
	width: 32px;
	height: 32px;
	fill: currentColor;
	margin: 13px 0 0 0;
}

.mainNav span a{
	display: block;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 2px;
}

.mainNav span.active{
	background: linear-gradient(to bottom, rgba(0,0,0,0), var(--sub));
	color: var(--main);
}

.mainNav span:hover{
	background: linear-gradient(to bottom, rgba(0,0,0,0), var(--subP3));
	color: var(--sub);
}

.mainNav .warp .dc{
	width: 200px;
	height: 2px;
	position: absolute;
	bottom: 3px;
}

.mainNav .warp .dc::before{
	content: "";
	display: block;
	width: 33px;
	height: 2px;
	background: var(--subP3);
	position: absolute;
	bottom: 11px;
}

.mainNav .warp .dc.left{
	background: linear-gradient(to left, var(--subP3), rgba(0,0,0,0));
	left: -237px;
}

.mainNav .warp .dc.left::before{
	transform:rotate(-45deg);
	right: -28px;
}


.mainNav .warp .dc.right{
	background: linear-gradient(to right, var(--subP3), rgba(0,0,0,0));
	right: -237px;
}

.mainNav .warp .dc.right::before{
	transform:rotate(45deg);
	left: -28px;
}


.mainNav .warp .dc::after{
	display: block;
	content: "";
	width: 0;
	height: 0;
	border-bottom: 20px solid var(--subP7);
	opacity: 0.6;
	position: absolute;
	bottom: 0;
}

.mainNav .warp .dc.left::after{
	right: -36px;
	border-left: 20px solid transparent;
}

.mainNav .warp .dc.right::after{
	left: -36px;
	border-right: 20px solid transparent;
}

.mainNav .warp .dc b{
	display: block;
	width: 12px;
	height: 10px;
	background: var(--subP7);
	position: absolute;
	opacity: 0.8;
	bottom: 6px;
}

.mainNav .warp .dc.left b{
	transform: skew(-45deg);
	right: -2px;
}

.mainNav .warp .dc.right b{
	transform: skew(45deg);
	left: -2px;
}

.mainNav .warp .dc b::before, .mainNav .warp .dc b::after{
	content: "";
	display: block;
	width: 12px;
	height: 10px;
	position: absolute;
	background: var(--subP7);
	top: 0;
}

.mainNav .warp .dc b::before{
	opacity: 0.5;
}

.mainNav .warp .dc b::after{
	opacity: 0.2;
}


.mainNav .warp .dc.left b::before{
	right: 20px;
}

.mainNav .warp .dc.left b::after{
	right: 40px;
}

.mainNav .warp .dc.right b::before{
	left: 20px;
}

.mainNav .warp .dc.right b::after{
	left: 40px;
}




.ctrlBtn{
	position:absolute;
	z-index: 6;
	width: 50%;
	left: 25%;
	bottom: -32px;
	height: 30px;
	background: linear-gradient(to right, rgba(0,0,0,0), var(--mainP7), var(--mainP7), rgba(0,0,0,0));
	text-align: center;
	transition: transform .5s;
	font-size: 0;
}

.ctrlBtn.show{
	transform: translateY(-32px);
}

.ctrlBtn::before{
	display: block;
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	left: 0;
	top: -2px;
	background: linear-gradient(to right, rgba(0,0,0,0), var(--subP7), var(--subP7), rgba(0,0,0,0));
}

.ctrlBtn span{
	display: inline-block;
	position: relative;
	height: 100%;
	padding: 0 20px;
	color: var(--textP7);
	font-size: 12px;
	line-height: 29px;
	user-select: none;
	cursor: pointer;
}

.ctrlBtn span svg{
	width: 20px;
	height: 20px;
	fill: #FFFFFF;
	margin: 0 0 -5px 0;
}

.ctrlBtn span:hover{
	color: var(--text);
	font-weight: bold;
	text-shadow: 0 0 4px var(--textP7);
}

.ctrlBtn span.active{
	color: var(--main);
	font-weight: bold;
	background: linear-gradient(to bottom, var(--subP7), var(--sub));
}

.ctrlBtn span.active svg{
	fill: var(--main);
}


.returnBar{
	position:absolute;
	z-index: 6;
	width: 40%;
	left:30%;
	bottom:-45px;
	height: 40px;
	background: linear-gradient(to right, rgba(0,0,0,0), var(--mainP7), var(--mainP7), rgba(0,0,0,0));
	text-align: center;
	transition: transform .5s;
	font-size: 0;
}

.returnBar.show{
	transform: translateY(-45px);
}

.returnBar::before{
	display: block;
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	left: 0;
	top: -2px;
	background: linear-gradient(to right, rgba(0,0,0,0), var(--subP7), var(--subP7), rgba(0,0,0,0));
}

.returnBar span{
	display: inline-block;
	position: relative;
	height: 100%;
	padding: 0 20px;
	color: var(--text);
	font-size: 15px;
	font-weight: bold;
	line-height: 38px;
	user-select: none;
	cursor: pointer;
}

.returnBar span svg{
	width: 24px;
	height: 24px;
	fill: currentColor;
	margin: 0 0 -5px 0;
}

.returnBar span:hover{
	color: var(--text);
	font-weight: bold;
	text-shadow: 0 0 7px var(--textP7);
}

.pathBarWarp{
	pointer-events: none;
	width: 100%;
	height: 26px;
	position: absolute;
	left: 0;
	bottom: 40px;
	text-align: center;
	z-index: 7;
	overflow: hidden;
}

.pathBar{
	display: inline-block;
	padding: 3px 30px;
	color: var(--text);
	text-shadow: 0 0 5px #000000;
	background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.8), rgba(0,0,0,0.8), rgba(0,0,0,0));
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 2px;
	transition: transform .5s;
	transform: translateY(70px);
}

.pathBar.show{
	transform: translateY(0);
}

.pathBar svg{
	width: 12px;
	height: 12px;
	fill: var(--textP7);
	margin: 0 6px -2px 6px;
}

.panel{
	position: absolute;
	width: 30%;
	height: 100%;
	z-index: 5;
	top: 0;
	pointer-events: none;
	transition: transform .7s;
	padding-top: 50px;
}

.panel.left{
	left: -32vw;
	background: linear-gradient(to right, rgba(0,0,0,0.9), rgba(0,0,0,0.6), rgba(0,0,0,0));
}

.panel.right{
	right: -32vw;
	background: linear-gradient(to left, rgba(0,0,0,0.9), rgba(0,0,0,0.6), rgba(0,0,0,0));
}

.panel.left.show{
	transform:translateX(32vw);
}

.panel.right.show{
	transform:translateX(-32vw);
}

.panel .block{
	position: relative;
	width: 76%;
	margin-bottom: 30px;
}

.panel .block.subPanel{
	display: none;
}

.block .title{
	border-collapse: collapse;
	border: 0;
}

.block .title th{
	width: 1%;
	background: linear-gradient(to bottom, var(--subP1),var(--subP1), rgba(0,0,0,0));
	padding: 3px 4px 5px 10px;
	border-top: var(--subP3) solid 2px;
	position: relative;
}

.block .title th::before{
	display: block;
	content: "";
	width: 2px;
	height: calc( 100% + 4px );
	position: absolute;
	left: -2px;
	top: -2px;
	background: linear-gradient(to bottom, var(--subP3), rgba(0,0,0,0));
}

.block .title th::after{
	display: block;
	content: "";
	width: 0;
	height: 0;
	border-bottom: 14px solid var(--subP1);
	border-right: 14px solid transparent;
	position: absolute;
	right: -14px;
	top: 0;
}

.block .title th span{
	font-weight: bold;
	white-space: nowrap;
	font-size: 15px;
	background:-webkit-linear-gradient(top,var(--sub) 40%,var(--theme) 80%);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	position: relative;
	display: block;
}

.block .title th span::before{
	display: block;
	content: "";
	width: 21px;
	height: 2px;
	position: absolute;
	top: 2px;
	right: -22px;
	background: var(--subP3);
	transform: rotate(45deg);
}

.block .title th span::after{
	display: block;
	content: "";
	width: 200px;
	height: 1px;
	position: absolute;
	top: 15px;
	right: -220px;
	background: linear-gradient(to right, var(--subP3), rgba(0,0,0,0));
}

.block .title td{
	width: 99%;
	position: relative;
}

.block .title td::after{
	display: block;
	content: "";
	position: absolute;
	left: 15px;
	width: 100%;
	height: 2px;
	top: 14px;
	background: linear-gradient(to right, var(--subP3), rgba(0,0,0,0));
}

.block .title td::before{
	display: block;
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 50%;
	background: radial-gradient(ellipse 110% 30px at 0 -50%, var(--subP1), rgba(0,0,0,0));
}

.block .title td b{
	width: 10px;
	height: 9px;
	position: absolute;
	left: 14px;
	top: 2px;
	background: var(--subP7);
	transform: skew(45deg);
	opacity: 0.7;
}

.block .title td b::before, .block .title td b::after{
	content: "";
	display: block;
	position: absolute;
	width: 10px;
	height: 9px;
	background: var(--subP7);
}

.block .title td b::before{
	right: -16px;
	opacity: 0.7;
}

.block .title td b::after{
	right: -32px;
	opacity: 0.3;
}

.block .optionBtn{
	position: absolute;
	right: 0;
	top: 0;
}

.block .optionBtn .part{
	display: inline-block;
	color: var(--text);
	border: #58a7ff solid 1px;
	background: rgba(0,51,127,0.6);
	padding: 3px 6px;
	font-size: 1.25vh;
	border-radius: 5px;
	position: relative;
	cursor: pointer;
	pointer-events: auto;
}

.block .optionBtn .part::after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border-radius: 5px;
	position: absolute;
	background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(69,231,255,1), rgba(0,0,0,0));
	z-index: -1;
}

.block .optionBtn .part:hover{
	background: linear-gradient(to bottom, #00156e, #006eea);
}

.block .optionBtn .part:hover::after{
	display: none;
}




.panel.left .block{
	margin-left: 20px;
}

.panel.right .block{
	margin-left: calc( 24% - 20px );
}

.panel.right .block .title{
	transform: scaleX(-1);
}

.panel.right .block .title th span{
	transform: scaleX(-1);
}

.panel.right .block .title th span::before{
	left: -22px;
	transform: rotate(-45deg);
}

.panel.right .block .title th span::after{
	left: -220px;
	background: linear-gradient(to left, var(--subP3), rgba(0,0,0,0));
}


.block .content{
	width: 100%;
	position: relative;
	margin-top: 5px;
	pointer-events: auto;
	font-size: 0;
}


.block .content .box{
	display: inline-block;
	font-size: 0;
	position: relative;
	vertical-align: top;
}

.block .content .box.loading::before{
	content: "数据加载中";
	display: block;
	position: absolute;
	width: 100%;
	height: 2vh;
	left: 0;
	top: calc( 50% - 1vh );
	font-size: 1.7vh;
	color: var(--subP3);
	text-align: center;
	font-weight: bold;
	letter-spacing: 0.2vh;
}

.block .content .box.ctrlEmpty::before{
	content: "此设备无控制点";
	display: block;
	position: absolute;
	width: 100%;
	height: 2vh;
	left: 0;
	top: calc( 50% - 1vh );
	font-size: 1.7vh;
	color: var(--subP3);
	text-align: center;
	font-weight: bold;
	letter-spacing: 0.2vh;
}


.block .content .box.chartRotatingCircle::after{
	content: "";
	display: block;
	position: absolute;
	width: 16vh;
	height: 16vh;
	left: calc( 50% - 8vh - 16px );
	top: calc( 45% - 8vh - 16px );
	border-radius: 50%;
	border: var(--subP1) dashed 16px;
	animation: rotating 15s linear infinite;
}

.block .content .decorateBox{
	position: absolute;
	font-size: 0;
	left: 0;
	top: 0;
}




.block .content .blockRotatingCircle{
	display: inline-block;
	width: 50%;
	height: 100%;
	position: relative;
}

.block .content .blockRotatingCircle::before{
	content: "";
	display: block;
	position: absolute;
	width: 8vh;
	height: 8vh;
	border: var(--subP2) solid 3px;
	border-radius: 50%;
	left: calc( 50% - 4vh - 3px );
	top: calc( 50% - 4vh - 3px );
}


.block .content .blockRotatingCircle::after{
	content: "";
	display: block;
	position: absolute;
	width: 10vh;
	height: 10vh;
	left: calc( 50% - 5vh - 12px );
	top: calc( 50% - 5vh - 12px );
	border-radius: 50%;
	border: var(--subP1) dashed 12px;
	animation: rotating 15s linear infinite;
}





.scrollY{
	overflow-x: hidden;
	overflow-y: auto;
}

.block .w100p{
	width: 100%;
}

.block .w60p{
	width: 60%;
}

.block .w50p{
	width: 50%;
}

.block .w40p{
	width: 40%;
}

.block .h90v{
	height: 90vh;
}

.block .h64v{
	height: 64vh;
}

.block .h58v{
	height: 58vh;
}

.block .h47v{
	height: 47vh;
}

.block .h45v{
	height: 45vh;
}

.block .h37v{
	height: 37vh;
}

.block .h35v{
	height: 35vh;
}

.block .h34v{
	height: 34vh;
}

.block .h33v{
	height: 33vh;
}

.block .h32v{
	height: 32vh;
}

.block .h31v{
	height: 31vh;
}

.block .h30v{
	height: 30vh;
}

.block .h29v{
	height: 29vh;
}

.block .h28v{
	height: 28vh;
}

.block .h27v{
	height: 27vh;
}

.block .h26v{
	height: 26vh;
}

.block .h25v{
	height: 25vh;
}

.block .h24v{
	height: 24vh;
}

.block .h23v{
	height: 23vh;
}

.block .h22v{
	height: 22vh;
}

.block .h21v{
	height: 21vh;
}

.block .h20v{
	height: 20vh;
}

.block .h19v{
	height: 19vh;
}

.block .h18v{
	height: 18vh;
}

.block .h17v{
	height: 17vh;
}

.block .h16v{
	height: 16vh;
}

.block .h11v{
	height: 11vh;
}

.block .mt1vh{
	margin-top: 1vh;
}

.block .mt-2vh{
	margin-top: -2vh;
}

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



.block .filterBox ul{
	list-style: none;
	white-space: nowrap;
	padding: 0;
	pointer-events: auto;
}

.block .filterBox ul li{
	display: inline-block;
	font-size: 1.25vh;
	padding: 0.5vh 0.5vw;
	border: var(--textP5) solid 1px;
	background: var(--mainP7);
	color: var(--textP5);
	margin: 0 0 0 -1px;
	cursor: pointer;
}

.block .filterBox ul li:first-child{
	border-radius: 6px 0 0 6px;
}

.block .filterBox ul li:last-child{
	border-radius: 0  6px 6px 0;
}


.block .filterBox ul li:hover{
	background: #58a7ff;
	color: var(--text);
}

.block .filterBox ul li.active{
	color: var(--text);
	font-weight: bold;
	background: rgba(0,50,150,.6);
	cursor: default;
}


.iconBlock .part{
	display: inline-block;
	width: calc( 50% - 13px );
	height: 7vh;
	margin: 0 5px 1vh 5px;
	background: radial-gradient(ellipse 100% 100% at 0 -50%, rgba(255,255,255,0.7), rgba(0,0,0,0.3));
	position: relative;
	border-radius: 20px 0 20px 0;
	border: rgba(255,255,255,0.2) solid 1px;
}

.iconBlock .part svg{
	width: 4vh;
	height: 4vh;
	fill: url(#themeWB);
	position: absolute;
	left: 0.75vw;
	top: 1.5vh;
}

.iconBlock .part .name{
	font-size: 1.25vh;
	position: absolute;
	left: calc( 4vh + 1.5vw );
	top: 1vh;
	color: var(--subP7);
}

.iconBlock .part .line{
	position: absolute;
	left: calc( 4vh + 1.5vw );
	top: 3vh;
	height: 2px;
	width: calc( 100% - 5vh - 1.5vw );
	background: linear-gradient(to right, var(--subP3), rgba(0,0,0,0));
}

.iconBlock .part .info{
	position: absolute;
	font-size: 1.25vh;
	left: calc( 4vh + 1.5vw );
	top: 3.25vh;
	color: var(--subP7);
}

.iconBlock .part .info span{
	font-family: thinnumber, serif;
	color: var(--sub);
	font-size: 3vh;
	margin: 0 3px 0 0;
}

.iconBlock .part .info b{
	font-weight: normal;
}

.iconBlock .part .info strong{
	font-size: 1.8vh;
	margin-top: 12px;
	color: var(--sub);
	font-weight: bold;
	letter-spacing: 2px;
}







.shortBlock .part{
	display: inline-block;
	width: calc( 33% - 13px );
	height: 7vh;
	margin: 0 5px 1vh 5px;
	background: radial-gradient(ellipse 100% 100% at 0 -50%, rgba(255,255,255,0.7), rgba(0,0,0,0.3));
	position: relative;
	border-radius: 20px 0 20px 0;
	border: rgba(255,255,255,0.2) solid 1px;
}

.shortBlock .part .name{
	font-size: 1.25vh;
	position: absolute;
	left: 0.5vw;
	top: 1vh;
	color: var(--subP7);
}

.shortBlock .part .line{
	position: absolute;
	left: 0.5vw;
	top: 3vh;
	height: 2px;
	width: calc( 100% - 0.5vw );
	background: linear-gradient(to right, var(--subP3), rgba(0,0,0,0));
}

.shortBlock .part .info{
	position: absolute;
	font-size: 1.25vh;
	left: 0.5vw;
	top: 3.25vh;
	color: var(--subP7);
}

.shortBlock .part .info span{
	font-family: thinnumber, serif;
	color: var(--sub);
	font-size: 3vh;
	margin: 0 3px 0 0;
}

.shortBlock .part .info b{
	font-weight: normal;
}

.shortBlock .part .info strong{
	font-size: 1.8vh;
	margin-top: 12px;
	color: var(--sub);
	font-weight: bold;
	letter-spacing: 2px;
}

.shortBlock .part .more{
	width: 1.5vh;
	height: 1.5vh;
	position: absolute;
	right: 1vh;
	bottom: 0.75vh;
	cursor: pointer;
}

.shortBlock .part .more::before{
	content: "...";
	display: block;
	color: #FFFFFF;
	font-size: 2vh;
	position: absolute;
	left: 0;
	top: 0;
	line-height: 0;
}

.shortBlock .part .more ul{
	margin: 0;
	padding: 0.75vh 1.5vh 0.5vh 3vh;
	background: rgba(0,0,0,0.7);
	color: #FFFFFF;
	font-size: 1.5vh;
	position: absolute;
	top: 2vh;
	left: 0;
	border: rgba(255,255,255,0.7) solid 1px;
	z-index: 99;
	display: none;
}

.shortBlock .part .more:hover ul{
	display: block;
}

.shortBlock .part .more ul li{
	white-space: nowrap;
	margin-bottom: 0.5vh;
}


.iconNoBorderBlock .part{
	width: 100%;
	height: 7vh;
	background: radial-gradient(ellipse 100% 100% at 0 -50%, rgba(255,255,255,0.7), rgba(0,0,0,0.3));
	border-radius: 2vh 0 0 0;
	position: relative;
}

.iconNoBorderBlock .part svg{
	width: 4vh;
	height: 4vh;
	fill: url(#themeWB);
	position: absolute;
	left: 0.75vw;
	top: 1.25vh;
}


.iconNoBorderBlock .part .name{
	font-size: 1.25vh;
	color: var(--textP7);
	position: absolute;
	left: calc( 5vh + 1vw );
	top: 0.75vh;
}


.iconNoBorderBlock .part .line{
	height: 2px;
	width: calc( 100% - 5vh - 1vw );
	background: linear-gradient(to right, var(--subP3), rgba(0,0,0,0));
	position: absolute;
	left: calc( 5vh + 1vw );
	top: 2.75vh;
}

.iconNoBorderBlock .part .info{
	position: absolute;
	left: calc( 5vh + 1vw );
	top: 3.15vh;
}

.iconNoBorderBlock .part .info span{
	font-family: thinnumber, serif;
	font-size: 2.5vh;
	color: var(--text);
	margin-right: 0.25vw;
}

.iconNoBorderBlock .part .info b{
	font-size: 1.25vh;
	color: var(--textP5);
	font-weight: normal;
}


.rateBlock .part{
	width: 100%;
	height: 13vh;
	position: relative;
	margin-bottom: 1vh;
	background: radial-gradient(ellipse 110% 100% at 100% 100%, var(--themeP2), rgba(0,0,0,0));
}

.rateBlock .part::before{
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: linear-gradient(to right, rgba(110,165,39,0), rgba(110,165,39,0.5));
}

.rateBlock .part .icon{
	position: absolute;
	left: 1vw;
	top: 2.5vh;
	width: 8vh;
	height: 8vh;
	border-radius: 50%;
	background: var(--mainP3);
	box-shadow: 0 0 10px rgba(0,0,0,0.8);
}

.rateBlock .part .icon::before{
	content: "";
	display: block;
	left: -1px;
	top: -1px;
	width: 8vh;
	height: 8vh;
	border-radius: 50%;
	background: radial-gradient(ellipse 120% 120% at -20% -50%, rgba(255,255,255,0.9), rgba(0,0,0,0));
	border: var(--subP2) solid 1px;
}

.rateBlock .part .icon svg{
	width: 5vh;
	height: 5vh;
	fill: url(#themeWB);
	position: absolute;
	left: 1.5vh;
	top: 1.5vh;
}

.rateBlock .part .icon.rotatingCircle::after{
	content: "";
	display: block;
	position: absolute;
	width: 7vh;
	height: 7vh;
	left: calc( 0.5vh - 7px );
	top: calc( 0.5vh - 7px );
	border-radius: 50%;
	border: var(--subP1) dashed 8px;
	animation: rotating 15s linear infinite;
}




.rateBlock .part .name{
	font-size: 1.3vh;
	color: var(--textP5);
	position: absolute;
}

.rateBlock .part .name b{
	font-family: thinnumber, serif;
	font-size: 2.5vh;
	color: var(--text);
	margin: 0 0.25vw 0 0.5vw;
}


.rateBlockSelect1{
	position: absolute;
	left: calc( 8vh + 2vw );
	top: 0.5vh;
	pointer-events: auto;
	z-index: 66;
}

.rateBlockSelect2{
	position: absolute;
	left: calc( 8vh + 2vw );
	top: 14.5vh;
	pointer-events: auto;
	z-index: 66;
}


.rateBlock .part .name.pos1{
	left: calc( 8vh + 2vw + 100px );
	top: 0;
}

.rateBlock .part .name.pos2{
	left: calc( 8vh + 2vw );
	top: 5vh;
}

.rateBlock .part .name.pos3{
	left: calc( 8vh + 10vw );
	top: 5vh;
}

.rateBlock .part .rate{
	font-size: 1.3vh;
	color: var(--textP5);
	position: absolute;
	top: 2.5vh;
}

.rateBlock .part .rate.pos2{
	left: calc( 8vh + 2vw );
	top: 8.5vh;
}

.rateBlock .part .rate.pos3{
	left: calc( 8vh + 10vw );
	top: 8.5vh;
}

.rateBlock .part .rate strong{
	font-family: thinnumber, serif;
	color: var(--text);
	font-size: 2.5vh;
	margin-right: 0.2vw;
	font-weight: normal;
}

.rateBlock .part .rate .udArrow.up{
	position: absolute;
	display: inline-block;
	top: 1.75vh;
	margin-left: 0.25vw;
	width: 2vh;
	height: 2vh;
	transform: rotate(-60deg) skewX(-30deg);
	border-radius: 0.25vh;
	background: linear-gradient(41deg, rgba(202,61,88,0) 60%, rgba(202,61,88,1) 100%);
}

.rateBlock .part .rate .udArrow.down{
	position: absolute;
	display: inline-block;
	margin: 0.25vw;
	top: -1.25vh;
	width: 2vh;
	height: 2vh;
	transform: rotate(-60deg) skewX(-30deg);
	border-radius: 0.25vh;
	background: linear-gradient(41deg, rgba(76,163,107,1) 0%, rgba(76,163,107,0) 40%);
}


.rateBlock .part .rate .udArrow.none{
	position: absolute;
	display: inline-block;
	margin: 0.25vw;
	top: -0.5vh;
	width: 2vh;
	height: 2vh;

}


.rateBlock .part .rate .udArrow.none::before{
	content: "--";
	display: block;
	font-size: 2vh;
	color: var(--textP5);
}







.sysBlock .part{
	width: 100%;
	height: 8vh;
	position: relative;
	margin-bottom: 1vh;
}

.sysBlock .icon{
	position: absolute;
	left: 0;
	top: 0;
	width: 8vh;
	height: 8vh;
	border-radius: 50%;
	background: var(--mainP3);
	box-shadow: 0 0 10px rgba(0,0,0,0.8);
	overflow: hidden;
}

.sysBlock .icon::before{
	content: "";
	display: block;
	left: -1px;
	top: -1px;
	width: 8vh;
	height: 8vh;
	border-radius: 50%;
	background: radial-gradient(ellipse 120% 120% at -20% -50%, rgba(255,255,255,0.9), rgba(0,0,0,0));
	border: var(--subP2) solid 1px;
}

.sysBlock .icon svg{
	width: 4vh;
	height: 4vh;
	fill: url(#themeWB);
	position: absolute;
	left: 2vh;
	top: 2vh;
}

.sysBlock .icon::after{
	content: "";
	display: block;
	background-image: linear-gradient(45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.4) 100%);
	width: 50%;
	height: 50%;
	position: absolute;
	top: 0;
	left: 0;
	animation: radar-beam 5s infinite;
	animation-timing-function: linear;
	transform-origin: bottom right;
	border-radius: 100% 0 0 0;
}

.sysBlock .icon .circle{
	width: 6vh;
	height: 6vh;
	position: absolute;
	left: calc( 1vh - 5px );
	top: calc( 1vh - 5px );
	border-radius: 50%;
	border: var(--subP2) solid 5px;
}

.sysBlock .info{
	width: calc( 96% - 8vh );
	height: 7vh;
	position: absolute;
	right: 0;
	top: 1vh;
	background: radial-gradient(ellipse 110% 100% at 100% 100%, var(--themeP2), rgba(0,0,0,0));
}

.sysBlock .info::before{
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: linear-gradient(to right, rgba(60,156,255,0), rgba(60,156,255,0.5));
}


.sysBlock .info .sys{
	font-size: 1.6vh;
	color: var(--text);
	font-weight: bold;
	position: absolute;
	top: 0.5vh;
	left: 0;
}

.sysBlock .info .status{
	font-size: 1.25vh;
	color: #3abc8c;
	position: absolute;
	top: 3vh;
	left: 0;
	font-weight: bold;
	padding: 0 3px 1px 3px;
	border-radius: 4px;
	background: rgba(58,188,140,0.2);
	border: #3abc8c solid 1px;
}

.sysBlock .info .status.alert{
	color: #e34967;
	background: rgba(227,73,103,0.2);
	border: #e34967 solid 1px;
}

.sysBlock .info .name1{
	font-size: 1.3vh;
	color: var(--textP5);
	position: absolute;
	top: 0.5vh;
	left: 7vw;
}

.sysBlock .info .total{
	font-family: thinnumber, serif;
	font-size: 2.5vh;
	color: var(--text);
	position: absolute;
	top: 2.5vh;
	left: 7vw;
}


.sysBlock .info .name2{
	font-size: 1.3vh;
	color: var(--textP5);
	position: absolute;
	top: 0.5vh;
	left: 12vw;
}

.sysBlock .info .value{
	font-family: thinnumber, serif;
	font-size: 2.5vh;
	color: var(--textP5);
	position: absolute;
	top: 2.5vh;
	left: 12vw;
}

.sysBlock .info .value.alert{
	color: rgba(202,61,88,1);
}




.alertBlock .part{
	background: radial-gradient(ellipse 110% 4vh at 100% 80%, var(--themeP2), rgba(0,0,0,0));
	height: 5vh;
	position: relative;
	user-select: none;
	cursor: pointer;
	margin-top: 1vh;
	overflow: hidden;
}


.alertBlock.empty::before{
	content: "无告警记录";
	display: block;
	position: absolute;
	width: 100%;
	height: 2vh;
	left: 0;
	top: calc( 50% - 1vh );
	font-size: 1.7vh;
	color: var(--subP3);
	text-align: center;
	font-weight: bold;
	letter-spacing: 0.2vh;
}


.alertBlock .part:hover{
	background: linear-gradient(to bottom, var(--themeP2), var(--theme));
}

.alertBlock .part::before{
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: linear-gradient(to right, rgba(226,82,82,0), rgba(226,82,82,0.5));
}

.alertBlock .part .icon{
	position: absolute;
	left: 0;
	top: 2.5vh;
}

.alertBlock .part .icon::before{
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	width: 5vh;
	height: 5vh;
	transform: rotate(-60deg) skewX(-30deg);
	border-radius: 0.4vh;
	top: 0;
	left: 0;
	background: linear-gradient(41deg, rgba(226,82,82,0) 65%, rgba(226,82,82,0.8) 100%);
	box-shadow: 5px -5px 4px rgba(0,0,0,0.2);
}

.alertBlock .part .icon::after{
	content: "!";
	display: block;
	position: absolute;
	font-size: 1.75vh;
	color: var(--subP5);
	font-weight: bold;
	top: -1vh;
	left: 2vh;
}

.alertBlock .part .time{
	font-size: 1vh;
	color: var(--textP5);
	position: absolute;
	left: calc( 5vh + 1vw );
	top: 0;
}

.alertBlock .part .value{
	font-size: 1.25vh;
	color: var(--textP7);
	position: absolute;
	left: calc( 5vh + 1vw );
	top: 1.75vh;
}

.alertBlock .part .status{
	font-size: 1.25vh;
	color: var(--text);
	position: absolute;
	right: 1vw;
	top: 1vh;
	font-weight: bold;
}

.alertBlock .part .status.normal{
	color: #5bafe9;
}

.alertBlock .part .status.alert1{
	color: #ff8d13;
}

.alertBlock .part .status.alert2{
	color: #ff0000;
}






.alertLogBlock .part{
	background: radial-gradient(ellipse 110% 4vh at 100% 80%, var(--themeP2), rgba(0,0,0,0));
	height: 5vh;
	position: relative;
	user-select: none;
	cursor: pointer;
	margin-top: 1vh;
	overflow: hidden;
}


.alertLogBlock .part::before{
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: linear-gradient(to right, rgba(226,82,82,0), rgba(226,82,82,0.5));
}

.alertLogBlock .part .icon{
	position: absolute;
	left: 0;
	top: 2.5vh;
}

.alertLogBlock .part .icon::before{
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	width: 5vh;
	height: 5vh;
	transform: rotate(-60deg) skewX(-30deg);
	border-radius: 0.4vh;
	top: 0;
	left: 0;
	background: linear-gradient(41deg, rgba(226,82,82,0) 65%, rgba(226,82,82,0.8) 100%);
	box-shadow: 5px -5px 4px rgba(0,0,0,0.2);
}

.alertLogBlock .part .icon::after{
	content: "!";
	display: block;
	position: absolute;
	font-size: 1.75vh;
	color: var(--subP5);
	font-weight: bold;
	top: -1vh;
	left: 2vh;
}

.alertLogBlock .part .time{
	font-size: 1.25vh;
	color: var(--textP5);
	position: absolute;
	left: calc( 5vh + 1vw );
	top: 1vh;
}

.alertLogBlock .part .value{
	font-size: 1.25vh;
	color: var(--textP7);
	position: absolute;
	right:1vw;
	top: 1vh;
}








.VIconBlock .part{
	margin: 1vh 0 0 10%;
	width: 80%;
	height: 13vh;
	background: radial-gradient(ellipse 100% 100% at 0 -50%, rgba(255,255,255,0.7), rgba(0,0,0,0.3));
	border-radius: 1.5vh 1.5vh 0 0;
	position: relative;
}

.VIconBlock .part .name{
	color: var(--textP7);
	font-size: 1.25vh;
	position: absolute;
	width: 100%;
	text-align: center;
	left: 0;
	top: 6.75vh;
}

.VIconBlock .part svg{
	width: 5vh;
	height: 5vh;
	fill: url(#themeWB);
	position: absolute;
	left: calc( 50% - 2.5vh );
	top: 1.25vh;
}

.VIconBlock .part .line{
	width: 100%;
	height: 2px;
	top: 9vh;
	background: linear-gradient(to right, rgba(255,255,255,0), var(--subP3), rgba(0,0,0,0));
	left: 0;
	position: absolute;
}

.VIconBlock .part .info{
	position: absolute;
	width: 100%;
	text-align: center;
	left: 0;
	top: 9.5vh;
}

.VIconBlock .part .info span{
	font-family: thinnumber, serif;
	font-size: 3vh;
	color: var(--text);
	margin-right: 0.25vh;
}

.VIconBlock .part .info b{
	font-size: 1vh;
	color: var(--textP5);
	font-weight: normal;
}


.EQBlock .part{
	width: 100%;
	height: 7.5vh;
	position: relative;
	margin-bottom: 1vh;
	background: radial-gradient(ellipse 110% 100% at 100% 100%, var(--themeP2), rgba(0,0,0,0));
}

.EQBlock .part::before{
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: linear-gradient(to right, rgba(60,156,255,0), rgba(60,156,255,0.5));
}


.EQBlock .part .icon{
	position: absolute;
	left: 0;
	top: 0;
	width: 7vh;
	height: 7vh;
	border-radius: 50%;
	background: var(--mainP3);
	box-shadow: 0 0 10px rgba(0,0,0,0.8);
	overflow: hidden;
}

.EQBlock .part .icon::before{
	content: "";
	display: block;
	left: -1px;
	top: -1px;
	width: 7vh;
	height: 7vh;
	border-radius: 50%;
	background: radial-gradient(ellipse 120% 120% at -20% -50%, rgba(255,255,255,0.9), rgba(0,0,0,0));
	border: var(--subP2) solid 1px;
}

.EQBlock .part .icon svg{
	width: 4vh;
	height: 4vh;
	fill: url(#themeWB);
	position: absolute;
	left: 1.5vh;
	top: 1.5vh;
}

.EQBlock .part .icon::after{
	content: "";
	display: block;
	background-image: linear-gradient(45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.4) 100%);
	width: 50%;
	height: 50%;
	position: absolute;
	top: 0;
	left: 0;
	animation: radar-beam 5s infinite;
	animation-timing-function: linear;
	transform-origin: bottom right;
	border-radius: 100% 0 0 0;
}

.EQBlock .part .icon .circle{
	width: 5vh;
	height: 5vh;
	position: absolute;
	left: calc( 1vh - 4px );
	top: calc( 1vh - 4px );
	border-radius: 50%;
	border: var(--subP2) solid 4px;
}


.EQBlock .part .sys{
	position: absolute;
	font-weight: bold;
	font-size: 1.75vh;
	color: var(--text);
	left: calc( 6vh + 1.5vw );
	top: 1vh;
}

.EQBlock .part .count{
	position: absolute;
	font-size: 1.25vh;
	color: var(--textP5);
	left: calc( 6vh + 1.5vw );
	top: 4vh;
}

.EQBlock .part .count span{
	font-weight: bold;
	color: var(--text);
	margin-left: 3px;
}

.EQBlock .part .onlineName{
	font-size: 1.25vh;
	color: var(--textP5);
	position: absolute;
	top: 1vh;
	left: 11vw;
}

.EQBlock .part .onlineName svg{
	width: 2vh;
	height: 2vh;
	fill: #41c991;
	margin: 0 0.25vw -0.5vh 0;
}

.EQBlock .part .onlineValue{
	font-size: 1.25vh;
	color: var(--textP7);
	position: absolute;
	top: 3vh;
	left: 11vw;
}

.EQBlock .part .onlineValue span{
	font-family: thinnumber, serif;
	font-size: 2.5vh;
	color: #41c991;
	margin: 0 0.25vw 0 0;
}

.EQBlock .part .alertName{
	font-size: 1.25vh;
	color: var(--textP5);
	position: absolute;
	top: 1vh;
	left: 18vw;
}

.EQBlock .part .alertName svg{
	width: 2vh;
	height: 2vh;
	fill: #f36b6b;
	margin: 0 0.25vw -0.5vh 0;
}

.EQBlock .part .alertValue{
	font-size: 1.25vh;
	color: var(--textP7);
	position: absolute;
	top: 3vh;
	left: 18vw;
}

.EQBlock .part .alertValue span{
	font-family: thinnumber, serif;
	font-size: 2.5vh;
	color: #f36b6b;
	margin: 0 0.25vw 0 0;
}


.childList{
	border-collapse: collapse;
	border: 0;
	font-size: 1.35vh;
}

.childList thead{
	display: block;
	width: 100%;
	background: linear-gradient(to right, var(--themeP4), rgba(0,0,0,0));
	color: var(--textP7);
}

.childList tbody{
	display: block;
	height: calc( 100% - 4vh );
	overflow: auto;
	width: 100%;
}

.childList td,.childList th{
	width: 400px;
	text-align: center;
	padding: 10px 0;

}

.childList tr{
	margin-bottom: 5px;
	display: block;
}


.childList td{
	word-wrap:break-word;
	word-break:break-all;
}


.childList thead tr{
	background: var(--themeP2);
	color: var(--textP7);
}

.childList tbody tr{
	color: var(--text);
	background: radial-gradient(ellipse 110% 110% at 0% 100%, var(--themeP2), rgba(0,0,0,0));
	position: relative;
	cursor: pointer;
}

.childList tbody tr::before{
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: linear-gradient(to right, rgba(110,165,39,0.5), rgba(110,165,39,0));
}

.childList tbody tr:hover{
	background: linear-gradient(var(--theme), var(--themeP2));
}


.childList tbody tr td span.elevatorStatus{
	font-weight: bold;

}

.childList tbody tr td span.elevatorStatus.stop{
	color: #ffffff;
}
.childList tbody tr td span.elevatorStatus.stop::after{
	content: "--";
	font-size: 1.25vh;
}

.childList tbody tr td span.elevatorStatus.moveUp{
	color: #ffc528;
}
.childList tbody tr td span.elevatorStatus.moveUp::after{
	content: "↑";
	font-size: 1.25vh;
}

.childList tbody tr td span.elevatorStatus.moveDown{
	color: #45c028;
}
.childList tbody tr td span.elevatorStatus.moveDown::after{
	content: "↓";
	font-size: 1.25vh;
}

.ZTList{
	width: 100%;
	font-size:0;
}

.ZTList div{
	margin-bottom: 12px;
}

.ZTList div span{
	color: var(--textP7);
	display: block;
	width: 100%;
	font-size: 1.25vh;
	font-weight: bold;
	text-align: center;
	margin-bottom: 2px;
	padding: 2px 0;
	background: linear-gradient(to right, rgba(0,0,0,0), var(--themeP4), rgba(0,0,0,0));
	position: relative;
}

.ZTList div span::before{
	content: "";
	display: block;
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(to right, rgba(0,0,0,0), var(--theme), rgba(0,0,0,0));
}

.ZTList div a{
	color: var(--textP2);
	display: inline-block;
	border-radius: 6px 0 6px 0;
	border: var(--subP1) solid 1px;
	padding: 4px 8px;
	margin: 8px 4px 0 4px;
	font-size: 1.25vh;
	font-weight: bold;
	user-select: none;
}


.ZTList div a.available{
	color: var(--text);
	background: radial-gradient(ellipse 100% 100% at 0% 0%, var(--subP5), rgba(0,0,0,0));
	box-shadow: 0 0 1px var(--sub);
	cursor: pointer;
}


.ZTList div a.available:hover{
	background: linear-gradient(var(--theme), var(--themeP2));
}



.narrowBlock .part{
	display: block;
	width: 100%;
	height: 5vh;
	margin-bottom: 1vh;
	background: radial-gradient(ellipse 110% 100% at 100% 100%, var(--themeP2), rgba(0,0,0,0));
	position: relative;
}

.narrowBlock .part::before{
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: linear-gradient(to right, rgba(60,156,255,0), rgba(60,156,255,0.5));
}

.narrowBlock .part .icon{
	width: 4vh;
	height: 4vh;
	position: absolute;
	border-radius: 50%;
	left: 0;
	top: 0.25vh;
}

.narrowBlock .part .icon svg{
	width: 2.5vh;
	height: 2.5vh;
	fill: var(--subP7);
	position: absolute;
	left: 0.75vh;
	top: 0.75vh;
}

.narrowBlock .part .icon::after{
	content: "";
	display: block;
	background: radial-gradient(ellipse 100% 100% at 0% 0%, var(--subP5), rgba(0,0,0,0));
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: absolute;

}

.narrowBlock .part .name{
	position: absolute;
	left: calc( 4vh + 1vw );
	font-size: 1.75vh;
	color: var(--text);
	font-weight: bold;
	letter-spacing: 0.1vw;
	top: 1vh;
}

.narrowBlock .part .count{
	position: absolute;
	right: 1vw;
	font-size: 3vh;
	font-family: thinnumber, serif;
	color: var(--text);
	top: 0.75vh;
}

.narrowBlock .part .value{
	position: absolute;
	right: 1vw;
	font-size: 1.75vh;
	font-weight: bold;
	color: var(--text);
	top: 1vh;
}

.JXT{
	width: 100%;
	height: 100%;
	background-image: url("../images/JXTBackground.png");
	background-repeat: no-repeat;
	background-size: auto 250%;
	background-position: center;
	text-align: center;
}

.JXT .GRBtn{
	margin-top: 3vh;
}

.videoZone{
	width: 100%;
	margin-top: 1vh;
}

.noVideo{
	width: 100%;
	position: absolute;
	left: 0;
	top: calc( 50% - 2vh );
	text-align: center;
	font-weight: bold;
	color: rgba(255,255,255,0.4);
	font-size: 2vh;
	letter-spacing: 2px;
}




.btnBlock .part{
	display: inline-block;
	width: calc( 50% - 13px );
	height: 6vh;
	margin: 0 5px 1vh 5px;
	background: radial-gradient(ellipse 100% 100% at 0 -50%, rgba(255,255,255,0.7), rgba(0,0,0,0.3));
	position: relative;
	border-radius: 20px 0 20px 0;
	border: rgba(255,255,255,0.2) solid 1px;

}


.btnBlock .part .name{
	font-size: 1.25vh;
	position: absolute;
	left: 0.5vw;
	top: 0.75vh;
	color: var(--textP7);
}

.btnBlock .part .line{
	position: absolute;
	left: 0.5vw;
	top: 2.75vh;
	height: 2px;
	width: calc( 100% - 1vw - 4vh );
	background: linear-gradient(to right, var(--subP3), rgba(0,0,0,0));
}

.btnBlock .part .value{
	font-size: 1.75vh;
	font-weight: bold;
	position: absolute;
	left: 0.5vw;
	top: 3.25vh;
	color: var(--text);
}

.btnBlock .part .value span{
	font-size: 1.25vh;
	margin: 0 0 0 2px;
	color: var(--textP5);
}

.btnBlock .part .btn{
	width: 4vh;
	height: 4vh;
	border-radius: 50%;
	background: #112266;
	position: absolute;
	right: 0.5vw;
	top: 1vh;
	cursor: pointer;
}

.btnBlock .part .btn svg{
	width: 2.6vh;
	height: 2.6vh;
	position: absolute;
	left: 0.7vh;
	top: 0.7vh;
	fill: url(#themeWB);
}

.btnBlock .part .btn::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 0;
	background: radial-gradient(ellipse 90% 90% at 0% 0%, rgba(73,197,255,1), rgba(73,129,255,0));
}

.btnBlock .part .btn:hover{
	background: linear-gradient(to bottom, #00156e, #006eea);
	box-shadow: 0 0 20px rgba(73,197,255,0.5);
}

.btnBlock .part .btn:hover svg{
	fill: var(--sub);
}

.btnBlock .part .btn:hover::before{
	display: none;
}
















.popWindow{
	z-index: 999;
	width: 100vw;
	height: 100vh;
	position: absolute;
	left: 0;
	top: 0;
	background: rgba(50,50,50,0.9);
	display: block;
}

.popWindow.hide{
	display: none;
}

.popWindow .window{
	position: absolute;
	transition: transform .5s;
}

.popWindow .window.hide{
	transform: scaleY(0);
}

.popWindow .window.iframe{
	width: 80%;
	height: 90%;
	left: 10%;
	top: 5%;
}

.popWindow .window .popTitle{
	width: 100%;
	height: 4vh;
	background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(2,59,145,0.6), rgba(0,0,0,0.5));
	position: absolute;
	left: 0;
	top: 0;
}

.popWindow .window .popTitle::before{
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(110,165,39,0.6), rgba(0,0,0,0.5));
	position: absolute;
	left: 0;
	top: 0;
}

.popWindow .window .popTitle .close{
	width: 2vh;
	height: 2vh;
	fill: var(--subP5);
	position: absolute;
	right: 0.5vw;
	top: 1vh;
	cursor: pointer;
}

.popWindow .window .popTitle .close:hover{
	fill: var(--sub);
}

.popWindow .window .popContent{
	width: 100%;
	height: calc( 100% - 4vh );
	background: rgba(0,0,0,0.5);
	position: absolute;
	left: 0;
	top: 4vh;
}

.popWindow .window.iframe iframe{
	border: 0;
	width: calc( 100% - 10px );
	height: calc( 100% - 10px );
	position: absolute;
	left: 5px;
	top: 5px;
}


.popTitleBar{
	border-collapse: collapse;
	width: 100%;
	height: 100%;
}


.popTitleBar td{
	width: 50%;
	position: relative;
}

.popTitleBar th{
	white-space: nowrap;
	font-size: 2vh;
	color: var(--text);
	font-weight: bold;
	padding: 0 1vw;
}


.popTitleBar td::before{
	content: "";
	display: block;
	position: absolute;
	width: calc( 100% - 1vh );
	height: 2px;
	bottom: 0;
}

.popTitleBar td::after{
	content: "";
	display: block;
	position: absolute;
	width: 2vh;
	height: 2vh;
	background: var(--subP3);
	bottom: 0;
}


.popTitleBar td:nth-child(1)::before{
	background: linear-gradient(to left, var(--subP3), rgba(0,0,0,0));
	right: 1vh;
}

.popTitleBar td:nth-child(1)::after{
	transform: skew(-45deg);
	right: 0;
}

.popTitleBar td:nth-child(3)::before{
	background: linear-gradient(to right, var(--subP3), rgba(0,0,0,0));
	left: 1vh;
}

.popTitleBar td:nth-child(3)::after{
	transform: skew(45deg);
	left: 0;
}


.centerTips{
	position: absolute;
	z-index: 99;
	width: 100%;
	pointer-events: none;
	text-align: center;
	left: 0;
	user-select: none;
	top: 36%;
	color: rgba(255,255,255,0.4);
	font-size: 3vh;
	font-weight: bold;
	letter-spacing: 3px;
	display: none;
}

.centerTips.show{
	display: block;
}