html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: 'Alibaba PuHuiTi R';
}

.layout {
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-box {
    width: 100%;
    height: 100%;
    justify-content: space-evenly;
	flex-direction: column;
}

.top-box {
    width: 100%;
    height: 47%;
	display: flex;
	justify-content: space-around;
}

.bot-box {
    width: 100%;
    height: 47%;
    display: flex;
	justify-content: space-around;
}

.top-box-left{
	margin-top: 2%;
	margin-left: 1%;
	width: 49%;
	height: 80%;
}

.top-box-left-top{
	width: 100%;
	height: 48%;
	display: flex;
}

.top-box-left-top-left{
	width: 20%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.today-font{
	color: #01E8DB;
	letter-spacing:1px;
	font-size: 16px;
	font-weight: 500;
	height: 5%;
	width: 100%;
}

.direction{
	display: flex;
	flex-direction: row;
	height: 30%;
	width: 100%;
	margin-top: 6%;
}

.imgs{
	width: 60%;
	height: 70%;
	margin: 5% 5%;
	text-align: center;
}

.today-img{
	padding: 5% 2% 2% 2%;
	background: url("../../img/accessMge/today.png") no-repeat 0 0 / 100% 100%;
	display: flex;
	justify-content: center;
	align-items:center;
}

.font-style{
	font-family: 'zcoolqingkehuangyouti';
	color: #fff;
	font-size: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.span-style{
	color: #fff;
	display: flex;
	flex-direction: column-reverse;
}

.top-box-left-top-center{
	margin-left: 5%;
	width: 35%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.cumulative-font{
	color: #01E7BE;
	letter-spacing:1px;
	font-size: 16px;
	font-weight: 500;
	height: 5%;
	width: 100%;
}

.cumulative-img{
	padding: 0.5% 0% 0% 0%;
	width: 12%;
	height: 100%;
	margin: 5.5% 3% 5% 3%;
	text-align: center;
	background: url("../../img/accessMge/cumulative.png") no-repeat 0 0 / 100% 100%;
	display: flex;
	justify-content: center;
}


.top-box-left-top-bot{
	width: 40%;
	height: 100%;
}

.abnormalAlarm{
	height: 90%;
	width: 100%;
	display: flex;
	flex-direction: row;
}

.abnormalAlarmImg{
	width: 20%;
	height: 100%;
	margin-left: 1%;
}


.top-box-left-bot{
	margin-top: 2%;
	width: 100%;
	height: 48%;
}


.top-box-right{
	margin-top: 2%;
	margin-left: 1%;
	width: 49%;
	height: 80%;
}

.bot-box-left{
	margin-left: 1%;
	width: 38.5%;
	height: 100%;
}

.bot-box-right{
	margin-right: 1%;
	width: 58.5%;
	height: 100%;
}

.img-style{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background-position: center center !important;
}

.vehicle {
    background: url("../../img/accessMge/vehicle.png") no-repeat 0 0 / 100% 100%;
	display: flex;
}

.personnel {
    background: url("../../img/accessMge/personnel.png") no-repeat 0 0 / 100% 100%;
	display: flex;
}

.layui-form-item .layui-inline{
	margin-right: 0px
}

.layui-form-label{
	padding-left: 1px;
	padding-right: 1px
}

.layui-form-item .layui-input-inline{
	width: 150px;
}

.layui-table-cell {
    height: auto;
    white-space: normal;
}