html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	float: left;
	display: flex;
	justify-content: space-between;
}

.left{
	float: left;
	height: 99.6%;
	width: 24.9%;
}
.center{
	float: left;
	height: 99.6%;
	width: 46.2%;
}
.right{
	float: left;
	height: 99.6%;
	width: 24.9%;
}
.video{
	height: 32%;
}
.video>.title{
	width: 100%;
	height: 15%;
	background-image: url(../../img/moduleTitle.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
}
.video>.title>span{
	align-self: center;
	color: #FFFFFF;
	font-size: 16px;
	text-indent: 45px;
}


.wisdom{
	margin-top: 4%;
	height: 65.4%;
}
.wisdom>.title{
	width: 100%;
	height: 7.4%;
	background-image: url(../../img/moduleTitle.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
}
.wisdom>.title>span{
	align-self: center;
	color: #FFFFFF;
	font-size: 16px;
	text-indent: 45px;
}
.wisdom>#chart{
	width: 100%;
	height: 38.2%;
}
.wisdom>.table{
	margin-top: 4%;
	width: 100%;
	height: 50.2%;
}
.wisdom>.table>div:nth-child(n + 2){
	width: 100%;
	margin-top: 1%;
    background: url("../../img/index/standardColumn.png") no-repeat;
    background-size: 100% 100%;
    height: 12.3%;
    display: flex;
    justify-content: space-around;
}
.wisdom>.table>div:nth-child(n + 2):hover{
    background: url("../../img/index/standardColumnHover.png") no-repeat;
    background-size: 100% 100%;
}
.wisdom>.table>div:nth-child(n + 2)>span{
    color: rgba(255,255,255,0.8);
    align-self: center;
    width: 33.3%;
    text-align: center;
}

.wisdom>.table>.tableList{
	width: 100%;
    background: url("../../img/index/title.png") no-repeat;
    background-size: 100% 100%;
    margin: 0 auto; /* 设置左右外边距为自动 */
    height: 15%;
    display: flex;
    justify-content: space-around;
}
.wisdom>.table>.tableList>span{
    color: rgba(255,255,255,0.8);
    align-self: center;
    width: 33.3%;
    text-align: center;
}


#map{
	width: 100%;
	height: 65%;
	overflow: hidden;
}
#earlyWarn{
	width: 100%;
	height: 34.5%;
}
#earlyWarn>.title{
	width: 100%;
	height: 14.4%;
	background-image: url(../../img/moduleTitle.png);
	background-repeat: no-repeat;
	background-size: 56% 100%;
	display: flex;
}
#earlyWarn>.title>span{
	align-self: center;
	color: #FFFFFF;
	font-size: 16px;
	text-indent: 45px;
}
#earlyWarnContent{
	width: 100%;
	height: 85%;
}

.interfaceState{
	width: 100%;
	height: 10%;
}
.right>.interfaceState{
	display: flex;
	justify-content: space-between;
}
.right>.interfaceState>div{
	height: 100%;
	display: flex;
}
.right>.interfaceState>div>span{
	align-self: center;
}
.right>.interfaceState>div>span:nth-child(1){
	color: white;
}
.right>.interfaceState>.title{
	background-image: url(../../img/index/interfaceState.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 16%;
	cursor: pointer;
}
.request{
	width: 30%;
}
.success{
	width: 18%;
}
.error{
	width: 18%;
}

.airQuality{
	width: 100%;
	height: 25.5%;
}
.airQuality>.title{
	width: 100%;
	height: 19%;
	background-image: url(../../img/moduleTitle.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
}
.airQuality>.title>span{
	align-self: center;
	color: #FFFFFF;
	font-size: 16px;
	text-indent: 45px;
}

.airQuality>.content{
	width: 100%;
	height: 81%;
	display: flex;
	justify-content: space-around;
}

.airQuality>.content>.total{
	width: 50%;
	height: 100%;
}

.airQuality>.content>.warn{
	width: 50%;
	height: 100%;
}

.warn-top{
	margin-top: 3%;
	color: #FFFFFF;
	font-size: 9px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.warn-top-commonality{
	display: flex;
	width: 19%;
	border: 1px solid #6ab0da;
	border-radius: 7px;
	justify-content: space-around;
	cursor: pointer;
}

.fireAlarm{
	width: 100%;
	height: 20.5%;
}
.fireAlarm>.title{
	width: 100%;
	height: 23%;
	background-image: url(../../img/moduleTitle.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
}
.fireAlarm>.title>span{
	align-self: center;
	color: #ffffff;
	font-size: 16px;
	text-indent: 45px;
}

.fireAlarm>.content{
	width: 100%;
	height: 75%;
	display: flex;
	justify-content: space-around;
}
.fireAlarm>.content>.total{
	width: 26%;
	background-image: url(../../img/index/total.png);
	background-repeat: no-repeat;
	background-size: 100% 85%;
	background-position: 0 100%;
}
.fireAlarm>.content>.open{
	width: 20%;
	background-image: url(../../img/index/open.png);
	background-repeat: no-repeat;
	background-size: 100% 60%;
	background-position: 0 100%;
	display: flex;
}
.fireAlarm>.content>.close{
	width: 20%;
	background-image: url(../../img/index/close.png);
	background-repeat: no-repeat;
	background-size: 100% 60%;
	background-position: 0 100%;
	display: flex;
}
.fireAlarm>.content>.warn{
	width: 20%;
	background-image: url(../../img/index/warn.png);
	background-repeat: no-repeat;
	background-size: 100% 60%;
	background-position: 0 100%;
	display: flex;
}
.fireAlarm>.content div{
	color: #FFFFFF;
	text-align: center;
}
.fireAlarm>.content .totalNum{
	margin-top: 18%;
}
.fireAlarm>.content .openNum{
	width: 100%;
	text-align: center;
	align-self: center;
}
.fireAlarm>.content .closeNum{
	width: 100%;
	text-align: center;
	align-self: center;
}
.fireAlarm>.content .warnNum{
	width: 100%;
	text-align: center;
	align-self: center;
}



.safeguard{
	width: 100%;
	height: 20.5%;
	margin-top: 4%;
}
.safeguard>.title{
	width: 100%;
	height: 23%;
	background-image: url(../../img/moduleTitle.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
}
.safeguard>.title>span{
	align-self: center;
	color: #FFFFFF;
	font-size: 16px;
	text-indent: 45px;
}

.safeguard>.content{
	width: 100%;
	height: 75%;
	display: flex;
	justify-content: space-around;
}
.safeguard>.content>.total{
	width: 26%;
	background-image: url(../../img/index/total.png);
	background-repeat: no-repeat;
	background-size: 100% 85%;
	background-position: 0 100%;
}
.safeguard>.content>.open{
	width: 20%;
	background-image: url(../../img/index/open.png);
	background-repeat: no-repeat;
	background-size: 100% 60%;
	background-position: 0 100%;
	display: flex;
}
.safeguard>.content>.close{
	width: 20%;
	background-image: url(../../img/index/close.png);
	background-repeat: no-repeat;
	background-size: 100% 60%;
	background-position: 0 100%;
	display: flex;
}
.safeguard>.content>.warn{
	width: 20%;
	background-image: url(../../img/index/warn.png);
	background-repeat: no-repeat;
	background-size: 100% 60%;
	background-position: 0 100%;
	display: flex;
}
.safeguard>.content div{
	color: #FFFFFF;
	text-align: center;
}
.safeguard>.content .totalNum{
	margin-top: 18%;
}
.safeguard>.content .openNum{
	width: 100%;
	text-align: center;
	align-self: center;
}
.safeguard>.content .closeNum{
	width: 100%;
	text-align: center;
	align-self: center;
}
.safeguard>.content .warnNum{
	width: 100%;
	text-align: center;
	align-self: center;
}

.barrierGate{
	width: 99.5%;
	height: 23%;
	margin-top: 4%;
}
.barrierGate>.title{
	width: 100%;
	height: 21.5%;
	background-image: url(../../img/moduleTitle.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
}
.barrierGate>.title>span{
	align-self: center;
	color: #FFFFFF;
	font-size: 16px;
	text-indent: 45px;
}
.barrierGate>.title>div{
	background-image: url(../../img/details.png);
	background-repeat: no-repeat;
	background-size: 85% 100%;
	width: 5%;
	height: 58%;
	margin-left: 1%;
	margin-top: 2%;
	cursor: pointer;
}
.barrierGate>#chart{
	width: 100%;
	height: 38.2%;
}
.barrierGate>.table{
	margin-top: 2%;
	width: 100%;
	height: 93%;
	overflow: auto;
}
.barrierGate>.table>div:nth-child(n + 2){
	width: 100%;
	margin-top: 1%;
    background: url("../../img/index/standardColumn.png") no-repeat;
    background-size: 100% 100%;
    height: 23.5%;
    display: flex;
    justify-content: space-around;
}
.barrierGate>.table>div:nth-child(n + 2):hover{
    background: url("../../img/index/standardColumnHover.png") no-repeat;
    background-size: 100% 100%;
}
.barrierGate>.table>div:nth-child(n + 2)>span{
    color: rgba(255,255,255,0.8);
    align-self: center;
    width: 33.3%;
    text-align: center;
}

.barrierGate>.table>.tableList{
	width: 100%;
    background: url("../../img/index/title.png") no-repeat;
    background-size: 100% 100%;
    margin: 0 auto; /* 设置左右外边距为自动 */
    height: 21.5%;
    display: flex;
    justify-content: space-around;
}
.barrierGate>.table>.tableList>span{
    color: rgba(255,255,255,0.8);
    align-self: center;
    width: 33.3%;
    text-align: center;
}



::-webkit-scrollbar {
	width: 10px;
	/*对垂直流动条有效*/
	height: 10px;
	/*对水平流动条有效*/
}