#screen {
	opacity: 0;
}

.screen {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	width: 100%;
	height: 100%;
}

#app {
	width: 1920px;
	height: 1080px;
	position: relative;
	flex-shrink: 0;
}

* {
	font-family: "微软雅黑";
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

.flex {
	display: flex;
	align-items: center;
}

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

}

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

body,
html {
	height: 100%;
	background: linear-gradient(135deg, #a7d8ff, #cee7fb);
	overflow: hidden;
}

.top {
	width: 100%;
	position: relative;
	z-index: 9;
	text-align: center;
}

.top .logo1,
.top .logo2 {
	position: absolute;
	top: 15px;
	cursor: pointer;
}

.top .logo1 {
	left: 20px;
}

.top .logo2 {
	top: 30px;
	right: 20px;
}

.top .h1,
.top .h2 {
	left: 0;
	position: absolute;
	width: 100%;
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-size: 25px;
	text-shadow: 0 3px 5px #2573ed;
}

.top .h1 .b,
.top .h2 .b {
	font-size: 35px;
}

.top .h1 {
	top: 5px;
	font-size: 30px;
	letter-spacing: 15px;
}

.top .h2 {
	top: 64px;
	font-size: 26px;
	letter-spacing: 2px;
}

.nav-left {
	display: flex;
	position: absolute;
	left: 20px;
	top: 65px;
	z-index: 10;
}

.nav-left .item {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: bold;
	padding-bottom: 5px;
	font-size: 17px;
	background-image: url("../image/bg/nav-left-bg.png");
	background-repeat: no-repeat;
	width: 172px;
	height: 40px;
	flex-shrink: 0;
	margin-right: 17px;
	position: relative;
}

.nav-left .item:hover .arc {
	transform: translateY(-8px) rotateZ(180deg);
}

.nav-left .item:hover .child-nav {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 100%, 0);
}

.nav-left .item .arc {
	border-width: 7px;
	border-style: solid;
	position: relative;
	top: 5px;
	left: 8px;
	border-color: #fff transparent transparent transparent;
	transition: .3s ease;
}

.nav-left .item .child-nav {
	opacity: 0;
	transition: .3s ease;
	background-color: #fff;
	position: absolute;
	color: #014EFF;
	box-shadow: 0 0 8px #00FFFB;
	width: 100%;
	left: 0;
	bottom: 0;
	transform: translateY(110%);
	text-align: center;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	height: auto;
	font-size: 16px;
	visibility: hidden;
}

.nav-left .item .child-nav .c-item {
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 20px 0;
}

.nav-left .item .child-nav .c-item:last-child:before {
	display: none;
}

.nav-left .item .child-nav .c-item:before {
	position: absolute;
	bottom: -10px;
	height: 20px;
	width: 100%;
	content: "";
	background-image: url("../image/bg/line2.png");
	background-size: 100px 10px;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 10;
}

.jcc {
	justify-content: space-around;
}

.nav-right {
	z-index: 10;
	position: absolute;
	right: 20px;
	top: 60px;
}

.nav-right .datetime {
	width: 190px;
	text-align: center;
	color: #3470FF;
	font-size: 16px;
	font-weight: bold;
	font-style: italic;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
}

.project-section {
	width: 450px;
	height: 940px;
	border-radius: 5px;
	background-color: #D3ECFF;
	padding: 18px;
	display: flex;
	flex-direction: column;
	position: absolute;
	left: 20px;
	top: 130px;
	z-index: 9;
}

.project-section .active {
	border: 3px solid #fff !important;
	box-shadow: 0 0 8px #195ffe !important;
}

.project-section .project-item-parent {
	border: 3px solid transparent;
	margin-bottom: 15px;
	border-radius: 5px;
}

.project-section .list {
	/* padding-right: 10px; */
}

.project-section .list .item {
	box-shadow: 0 0 8px #00FFFB;
	background: linear-gradient(to bottom, #77d4fd, #4d7bff);
	padding: 10px 15px;
	cursor: pointer;
	height: 130px;
	border-radius: 5px;
}

.project-section .list .item .h1 {
	color: #fff;
	margin-bottom: 4px;
	font-size: 16px;
	height: 40px;
	overflow: hidden;
}

.project-section .list .item .time {
	font-size: 14px;
	color: #fff;
}

.project-section .list .item .tag {
	background-color: #E0EFFF;
	font-size: 12px;
	padding: 5px 10px;
	border-radius: 5px;
	margin-left: 18px;
}

.project-section .list .item .tag img {
	margin-right: 5px;
}

.project-section .list .item .tag1 {
	color: #ff7d00;
}

.project-section .list .item .tag2 {
	color: #f53f3f;
}

.project-section .list .item .process {
	display: flex;
	justify-content: space-between;
}

.project-section .list .item .process-item {
	margin-top: 10px;
	flex: 1;
	height: 29px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #2F3A4C;
	font-size: 14px;
}

.project-section .list .item .p1s,
.project-section .list .item .p2s,
.project-section .list .item .p3s {
	color: #014EFF !important;
}

.project-section .list .item .p1 {
	background-image: url("../image/bg/p1.png");
}

.project-section .list .item .p2 {
	margin-left: -10px;
}

.project-section .list .item .p3 {
	margin-left: -10px;
}

.project-section .list .item .p1s {
	background-image: url("../image/bg/p1s.png") !important;
}

.project-section .list .item .p2s {
	background-image: url("../image/bg/p2s.png") !important;
}

.project-section .list .item .p3s {
	background-image: url("../image/bg/p3s.png") !important;
}

.project-section .list .item .p2 {
	background-image: url("../image/bg/p2.png");
}

.project-section .list .item .p3 {
	background-image: url("../image/bg/p3.png");
}

.project-section .section-title {
	width: 415px;
	height: 45px;
	margin-bottom: 20px;
	background-image: url("../image/bg/project-section-title.png");
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;

}

.section-user-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/user-section-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-monitor-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/monitor-section-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-scheme-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/scheme.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.test-record-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/test-record-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.blackness-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/blackness-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.center-project-title {
	text-align: center;
	width: 95%;
	padding-left: 100px;
}

.section-close {
	width: 5%;
	margin-top: 3px;
	cursor: pointer;
}

.section-biaoqi-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/biaoqi.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-device-check-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/section-device-check.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-online-data-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/section-online-data-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-lab-dis-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/section-lab-dis-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.search-list-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/search-list-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-handover-data-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/handover.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.project-solu-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/project-solu-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.project-curve-source-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/project-curve-source-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.project-experimental-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/project-experimental-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.std-out-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/std-out-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.project-record-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/project-record-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.monitor-type-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/monitor-type-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.experimental-procedure-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/experimental-procedure-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.project-calibrated-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/project-calibrated-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.project-record-file-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/project-record-file-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.project-lab-factor-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/project-lab-factor-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.project-labpre-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/project-labpre-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-reagent-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/section-reagent-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-sample-mov-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/section-sample-mov-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-analysis-data-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/analysis.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-dianwei-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/dianwei-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-add-project-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/add_project.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-add-standard-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/add_standard.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-up-standard-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/up_standard.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-add-gas-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/add-gas.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-up-gas-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/up-gas.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-add-user-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/add_user.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-up-user-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/up_user.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-up-reagent-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/section-up-reagent-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.record-save-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/record-save-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-add-solu-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/section-add-solu-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-add-solu-num-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/section-add-solu-num-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-pub-project-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/pub_project.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-sam-record-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/sam-record-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-add-device-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/add_device.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-up-device-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/up_device.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-car-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/car-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-device-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/project-device.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-online-device-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/section-online-device-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-instrument-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/project-instrument.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-equipment-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/project-equipment.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-company-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/section-company.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-institution-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/section-institution.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-project-title {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/project-section-long-title.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-company-doc {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/company-doc.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-institution-doc {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/institution-doc.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.section-task-cr {
	width: 100%;
	height: 45px;
	background-image: url("../image/bg/task-cr.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
	flex-shrink: 0;
}

.filter {
	margin-bottom: 10px;
}

.filter .select {
	width: 105px;
	height: 40px;
	box-shadow: 0 0 5px #00FFFB;
	border: 0;
	border-radius: 5px;
	color: #165DFF;
	flex-shrink: 0;
	text-align: center;
	font-size: 14px;
	outline: none;
}

.filter .search-form {
	margin-left: 8px;
	height: 40px;
	width: 100%;
	display: flex;
	font-size: 14px;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 0 5px #00FFFB;
}

.filter .button-search {
	margin-left: 8px;
	height: 40px;
	width: 100%;
	display: flex;
	font-size: 14px;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 0 0 #D3ECFF;
}

.filter .search-form input {
	width: 100%;
	border: 0;
	padding-left: 16px;
	outline: none;
	height: 100%;
	font-size: 16px;
}

.filter .search-form input::placeholder {
	color: #A6B9FF;
}

.filter .search-form .search {
	height: 100%;
	flex-shrink: 0;
	width: 88px;
	background: linear-gradient(to right, #12c1ff, #0583ff);
	display: flex;
	align-items: center;
	color: #fff;
	font-size: 14px;
	justify-content: center;
	border-radius: 5px;
}

.page {
	color: #81A7FE;
	font-size: 14px;
}

.page img {
	cursor: pointer;
}

.page-item {
	width: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.page-active {
	color: #165DFF !important;
	font-weight: bold;
	font-size: 23px;
	margin-top: -5px;
}

.lock {
	flex-shrink: 0;

}

::-webkit-scrollbar {
	/*滚动条样式*/
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	/*滑道样式*/
	background: #f1f1f1;
	border-radius: 4px;
}

::-webkit-scrollbar-thumb {
	/*滑块样式*/
	background: #76D3FD;
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	/*滑块悬停*/
	background: #0583ff;
	cursor: pointer;
}

::-webkit-scrollbar-corner {
	/*滚动条交汇处样式*/
	background: #f1f1f1;
}

.pointer {
	cursor: pointer;
}

.index-primary-bg {
	position: absolute;
	top: -320px;
	left: 50%;
	transform: translate3d(-50%, 0, 0);
	z-index: 1;
}

.center-nav {
	width: 800px;
	display: flex;
	position: absolute;
	flex-wrap: wrap;
	z-index: 10;
	left: 50%;
	top: 190px;
	transform: translateX(-50%);
	margin-left: 20px;

}

.center-nav .item {
	width: 173px;
	height: 48px;
	margin-bottom: 20px;
	margin-right: 20px;
	display: flex;
	align-items: center;
	background-image: url("../image/bg/state-1.png");
	background-size: 100% 100%;
	color: #fff;
	padding-left: 20px;
	font-size: 14px;
}

.center-nav .item img {
	margin-right: 6px;
}

.center-nav .state2 {
	background-image: url("../image/bg/state-2.png") !important;
}

.center-nav .state3 {
	background-image: url("../image/bg/state-3.png") !important;
}

.five-control {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 640px;
	background-color: #D3ECFF;
	width: 950px;
	height: 430px;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 30px;
}

.five-control .menu-container {
	position: relative;
	top: -20px;
}

.five-control .menu-container .btn-left,
.five-control .menu-container .btn-right {
	position: absolute;
	top: 10px;
	cursor: pointer;
	z-index: 2;
	transition: 0.3s ease;
}

.five-control .menu-container .btn-left {
	left: -30px;
}

.five-control .menu-container .btn-right {
	right: -30px;
}

.five-control .menu {
	color: #165DFF;
	width: 870px;
	height: 126px;
	background-image: url("../image/bg/line.png");
	background-position-y: 15px;
	background-repeat: no-repeat;
	display: flex;
	padding: 0 16px;
	overflow: hidden;
	padding-top: 16px !important;
}

.five-control .menu .item {
	cursor: pointer;
	width: 168px;
	background-size: 100% 100%;
	height: 126px;
	flex-direction: column;
	font-size: 14px;
	margin-top: -18px;
	word-break: break-all;
	display: flex;
	justify-content: center;
	align-items: center;
}

.five-control .menu .item .h1 {
	max-width: 38%;
}

.five-control .menu .item span {
	width: 35%;
	text-align: center;
}

.five-control .menu .state-1 {
	background-image: url("../image/bg/s-state-1.png");
}

.five-control .menu .state-2 {
	background-image: url("../image/bg/s-state-2.png");
}

.five-control .menu .state-3 {
	background-image: url("../image/bg/s-state-3.png");
}

.five-control .menu .state-4 {
	background-image: url("../image/bg/s-state-4.png");
}

.five-control .menu .state-4 .h1 {
	color: #fff !important;
}

.process-menu {
	width: 100%;
	position: relative;
	height: 50px;
	overflow: hidden;
}

.process-type-list .start,
.process-type-list .end {
	position: absolute;
	cursor: pointer;
	top: 35px;
}

.process-type-list .start:active,
.process-type-list .end:active {
	transform: scale(0.8);
}

.process-menu .waitLine {
	background-color: #13F6F1 !important;
}

.process-menu .textBlue {
	color: #0F58FF !important;
}

.process-menu .start-line {
	width: 15px;
	height: 1px;
	background-color: #2E69FF;
	position: absolute;
	top: 40px;
	left: 55px;
}

.process-menu .end-line {
	width: 50%;
	height: 1px;
	background-color: #2E69FF;
	position: absolute;
	top: 40px;
	right: 0px;
}

.process-menu .line {
	width: 50%;
	height: 1px;
	background-color: #2E69FF;
	position: absolute;
	top: 40px;
	left: 0;
}

.process-menu .right-line {
	width: 50%;
	height: 1px;
	background-color: #2E69FF;
	position: absolute;
	top: 40px;
	left: auto;
	right: 0;
}

.process-type-list img {
	/* position: relative; */
	z-index: 9;
}

.process-type-list .start {
	left: 25px;
}

.process-type-list .end {
	right: 25px;
}

.process-menu .item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #1F2122;
	position: relative;
	min-width: 179px;
}

.process-menu .processCurrent {
	color: #15B0FD;
}

.process-menu .item img {
	margin-top: 13px;
}

.process-type-list {
	padding: 10px 25px;
	width: 100%;
	position: absolute;
	top: 136px;
}

.process-list {
	padding: 0 25px;
	width: 100%;
	position: absolute;
	top: 200px;
}

.event-list-container {
	width: 100%;
	margin-top: 30px;
	overflow: hidden;
	height: 190px;
}

.event-list-container .event-list {
	width: 100%;
	overflow: auto;
	display: flex;
	height: 220px;
	user-select: none;
}

.event-list-container .item2 {
	background: #5D96DC !important;
	box-shadow: none !important;
	border: 1px solid #165DFF !important;
	color: #fff;
}

.event-list-container .item {
	cursor: pointer;
	width: 164px;
	height: 179px;
	background: linear-gradient(to bottom, #77d4fd, #4d7bff);
	box-shadow: 0 0 8px #00FFFB;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 13px;
	margin: 5px 7.5px;
	flex-shrink: 0;
}

.event-list-container .item .h1 {
	color: #fff;
	font-size: 14px;
	text-align: center;
	margin-top: 5px;
}

.event-list-container .item .h2 {
	margin-top: 10px;
	background-color: #fff;
	border-radius: 10px;
	color: #4174FF;
	font-size: 12px;
	width: 145px;
	height: 90px;
	display: flex;
	align-items: center;
	padding: 0 20px;
	text-align: center;
}

.table-data {
	width: 450px;
	height: 520px;
	border-radius: 5px;
	background-color: #D3ECFF;
	padding: 18px;
	display: flex;
	flex-direction: column;
	position: absolute;
	right: 20px;
	top: 130px;
	z-index: 9;
}

.table-data .section-title {
	width: 415px;
	height: 45px;
	margin-bottom: 20px;
	background-image: url("../image/bg/project-section-title2.png");
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
}

.table-data .t1 {
	background-color: #4076FF;
	font-size: 12px;
	color: #fff;
	border-collapse: collapse;
	width: 100%;
}

.table-data .t1 th,
.table-data .t1 td {
	border: 1px solid #13F6F1;
	height: 27px;
	text-align: center;
}

.table-data .t1 td {
	background-color: #608bfc;
}

.table-data .tbody tr:first-child td {
	border-top: 0 !important;
}

.blue-2 {
	background-color: #4076FF !important;
}

.watch-data {
	width: 450px;
	height: 390px;
	border-radius: 5px;
	background-color: #D3ECFF;
	padding: 18px;
	display: flex;
	flex-direction: column;
	position: absolute;
	right: 20px;
	top: 680px;
	z-index: 9;
}

.watch-data .data-container {
	height: 300px;
	overflow: hidden;
	margin-top: 0px;
}

.watch-data .move-container {
	padding: 5px;
}

.watch-data .section-title {
	width: 415px;
	height: 45px;
	margin-bottom: 10px;
	background-image: url("../image/bg/project-section-title3.png");
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px;
	color: #165DFF;
	font-size: 16px;
}

.watch-data .section-title2 {
	width: 415px;
	height: 45px;
	margin-bottom: 10px;
	background-image: url("../image/bg/project-section-title4.png");
	display: flex;
	align-items: center;
	justify-content: flex-start;
	color: #fff;
	font-style: italic;
	color: #fff !important;
	font-weight: bold;
	padding-right: 50px;
	font-size: 16px;
	padding-left: 35px;
}

.watch-data .section-title2 span {
	background: -webkit-linear-gradient(top, #ffffff, #c3ecfe);
	/* Safari 5.1 到 13.1 */
	background: -o-linear-gradient(bottom, #ffffff, #c3ecfe);
	/* Opera 11.1 到 12 */
	background: -moz-linear-gradient(bottom, #ffffff, #c3ecfe);
	/* Firefox 3.6 到 15 */
	background: linear-gradient(to bottom, #ffffff, #c3ecfe);
	/* 标准语法 */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	/* 避免在某些浏览器中出现文字 */
	font-size: 23px;
}

.watch-data .list .item {
	cursor: pointer;
	background: linear-gradient(to bottom, #77d4fd, #4d7bff);
	box-shadow: 0 0 4px #00FFFB;
	padding: 5px 21px 5px 0;
	border-radius: 5px;
	margin-bottom: 11px;
}

.watch-data .list .item .time img {
	margin-right: 5px;
}

.watch-data .list .item .info {
	color: #fff;
	margin-top: 5px;
}

.watch-data .list .item .info .flex {
	margin-right: 10px;
	font-size: 14px;
}

.watch-data .list .item .info img {
	margin-right: 5px;
}

.watch-data .list .item .tag {
	background-color: #E0EFFF;
	font-size: 12px;
	padding: 3px 5px;
	border-radius: 5px;
	margin-left: 18px;
	margin: 5px 0;
}

.watch-data .list .item .tag1 {
	color: #ff7d00;
}

.watch-data .list .item .tag2 {
	color: #f53f3f;
}

.watch-data .list .item .state {
	width: 7px;
	height: 40px;
	margin-left: -4px;
	margin-top: -3px;
	margin-right: 20px;
}

.section-title {
	padding-top: 3px;
}

.op {
	opacity: 0.5;
	cursor: not-allowed !important;
}

.round-nav {
	width: 950px;
	height: 270px;
	position: absolute;
	left: 50%;
	margin-left: -475px;
	z-index: 2;
	top: 380px;
}

.round-nav .icon {
	left: 50%;
	z-index: 3;
	top: 54px;
	transform: translateX(-50%);
}

.round-nav .item {
	width: 177px;
	height: 186px;
	position: absolute;
	cursor: pointer;
	transition: .8s ease;
	z-index: 1;
}

.round-nav .item img {
	transition: .8s ease;
}

.round-nav .top {
	z-index: 2;
}

.round-nav .title {
	position: absolute;
	color: #165DFF;
	font-weight: bold;
	text-align: center;
	width: 100%;
	z-index: 2;
	bottom: 0;
	transition: .8s ease;
}

.optionsShow {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translate3d(0, 100%, 0) !important;
}

.c-select {
	width: 105px;
	height: 40px;
	box-shadow: 0 0 5px #00FFFB;
	border: 0;
	border-radius: 5px;
	color: #165DFF;
	flex-shrink: 0;
	text-align: center;
	font-size: 14px;
	outline: none;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
}

.c-select .icon {
	transition: .3s ease;
}

.c-select .arcDown {
	transform: rotateZ(180deg) !important;
}

.c-select .child-nav {
	opacity: 0;
	transition: .3s ease;
	background-color: #fff;
	position: absolute;
	color: #014EFF;
	box-shadow: 0 0 8px #00FFFB;
	width: 100%;
	left: 0;
	bottom: 0;
	transform: translateY(110%);
	text-align: center;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	height: auto;
	font-size: 16px;
	visibility: hidden;
	max-height: 60vh;
	overflow: auto;
	z-index: 999;
}

.c-select .child-nav .c-item {
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 20px 0;
}

.c-select .child-nav .c-item:last-child:before {
	display: none;
}

.c-select .child-nav .c-item:before {
	position: absolute;
	bottom: -10px;
	height: 20px;
	width: 100%;
	content: "";
	background-image: url("../image/bg/line2.png");
	background-size: 90% 60%;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 10;
}

.ctitle {
	text-align: center;
	font-size: 14px;
	color: #fff;
	width: 192px;
	height: 24px;
	background-image: url("../image/bg/ctitlebg.png");
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding: 3px 10px;
}

.ov {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.map {
	width: 100%;
	height: 100%;
}

.center-body {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 130px;
	background-color: #D3ECFF;
	width: 950px;
	height: 940px;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 18px;
	overflow: auto;
}

.user-filter {
	margin-top: 20px;
	width: 100%;
	z-index: 5;
}

.w-5 {
	width: 5% !important;
}

.w-10 {
	width: 10% !important;
}

.w-35 {
	width: 35% !important;
}

.w-40 {
	width: 40% !important;
}

.w-45 {
	width: 45% !important;
}

.w-50 {
	width: 50% !important;
}

.w-30 {
	width: 30% !important;
}

.w-15 {
	width: 15% !important;
}

.w-20 {
	width: 20% !important;
}

.w-25 {
	width: 25% !important;
}

.w-100 {
	width: 100% !important;
}

.w-12 {
	width: 12% !important;
}

.w-80 {
	width: 80% !important;
}

.user-data {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin-top: 8px;
	overflow: auto;
	max-height: 782px;

}

.user-list {
	display: flex;
	box-shadow: 0 0 5px #00FFFB;
	background: linear-gradient(180deg, #79D6FD, #2E69FF);
	width: 48%;
	padding: 14px;
	border-radius: 5px;
	color: #FFF;
	margin: 1%;
	align-items: center;
	position: relative;
	overflow: hidden;
	line-height: 28px;

}

.user-headimg {
	box-shadow: 0 0 5px #00FFFB;
	border-radius: 50%;
	width: 70px;
	height: 70px;
	margin-right: 16px;
}

.user-work {
	position: absolute;
	right: 0;
	top: 0;
	background: #FFF;
	padding: 4px 16px 4px 16px;
	z-index: 2;
	color: #185CFF;
	border-bottom-left-radius: 12px;
}

.user-list-info {
	width: 50%;
}

.user-list-info span {
	border-bottom: 1px solid #FFF;
	cursor: pointer;
}

.user-action {
	margin-left: 20px;
	width: 35%;
	display: flex;
	justify-items: flex-end;
	align-items: flex-end;
	height: 100%;
}

.user-action-btn {
	padding: 4px 12px 4px 12px;
	border-radius: 4px;
	cursor: pointer;

}

.user-action-edit {
	margin-right: 12px;
	border: 1px solid #FFF;
	background: linear-gradient(to right, #12c1ff, #0583ff);
	color: #FFF;
}

.user-action-del {
	box-shadow: 0 0 5px #00FFFB;
	border: 1px solid #FFF;
	color: #185CFF;
}

.company-info {
	position: relative;
}

.company-info-data {
	position: absolute;
	display: flex;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.company-info-data-left {
	width: 30%;
}

.company-info-data-left .company-info-list-item {
	text-align: right;
}

.company-info-data-left .company-icon {
	margin-left: 24px;
}

.company-info-data-right .company-icon {
	margin-right: 24px;
}

.company-info-data-right .company-info-list {
	justify-content: flex-start;
	margin-left: 75px;
}

.company-info-data-left .company-info-list {
	justify-content: flex-end;
	margin-right: 75px;
}

.company-info-list-key {
	color: #175CFF;
	font-weight: 700;
	margin-bottom: 6px;
}

.company-info-list {
	margin-top: 12px;
	height: 115px;
	display: flex;
	margin-bottom: 14px;
	align-items: center;

}

.company-info-list .company-icon {
	width: 40px;
	height: 40px;

}

.company-info-data-center {
	width: 40%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: #FFF;
}

.company-info-data-right {
	width: 30%;
}

.company-info-data-center-title {
	margin-bottom: 12px;
	width: 120px;
	display: inline-block;
	text-align: center;
}

.company-info-data-center-address {
	margin-bottom: 12px;
	text-align: center;
	display: flex;
	flex-direction: column;
}

.company-info-data-center-address .center-address-title {
	display: inline-block;
	background: #114dce;
	padding: 2px 8px 2px 8px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	margin-top: 2px;
	text-align: center;
}

.center-address-address {
	border-radius: 10px !important;
	padding: 2px 16px 2px 16px;
	color: #2ACAFF;
}

.ads-title {
	color: #000;
	text-align: center;
}

.ads-content {
	display: flex;
	justify-content: center;
}

.ads-address {
	max-width: 60%;
	text-align: center;
}

.company-doc {
	width: 100%;
	background: #F3F9FF;
	padding: 16px;
	border-radius: 5px;
	margin-top: 30px;
	overflow: hidden;
	padding-top: 40px;
}

.company-footer {
	width: 100%;
	margin-top: -120px;
}

.company-doc-lists {
	display: flex;
	width: 100%;
	z-index: 9;
	position: relative;
}

.company-doc-list {
	width: 25%;
	display: flex;
	justify-content: center;
	position: relative;
	cursor: pointer;
}

.company-doc-list .bgs {
	width: 140%;
}

.company-doc-info {
	display: flex;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.company-doc-title {
	text-align: center;
}

.company-doc-show {
	text-align: center;
	color: #437AFE;
	margin-top: 2px;
}

.company-doc-icon {
	width: 50%;
	margin-top: -10px;
	margin-bottom: 50px;
}

.task-body {
	margin-top: 16px;
	width: 100%;
}

.task-data {
	background: #C2E1FE;
	border: 1px solid #00FFFB;
	display: flex;
	width: 100%;
}

.task-data-key {
	color: #FFF;
	height: 100%;
	width: 130px;
	padding: 2px 8px 2px 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: linear-gradient(180deg, #77D5FD, #4F7CFE);
}

.task-data-value {
	width: 100%;
	padding: 4px 8px 4px 8px;
	background: #C2E1FE;
	display: flex;
	align-items: center;
}

.task-data-content {
	width: 100%;
}

.task-data-storm {
	display: flex;
}

.task-data-storm-data-key {
	background: #3F76FF;
	color: #FFF;
	width: 150px;
	flex-shrink: 0;
	border: 1px solid #00FFFB;
	display: flex;
	align-items: center;
	justify-content: center;
}

.task-data-storm-data-value {
	width: 50%;
	border: 1px solid #00FFFB;
	text-align: center;
	padding-top: 4px;
	padding-bottom: 4px;
}

.task-data-content {
	display: flex;
	flex-direction: column;
}

.task-data-storm-data {
	display: flex;
}

.monitoring {
	margin-top: 16px;
	width: 100%;
}

.monitoring-title {
	background: linear-gradient(180deg, #77D5FD, #4F7CFE);
	color: #FFF;
	width: 100%;
	padding: 4px;
	text-align: center;
}

.monitoring-content {
	border: 1px solid #00FFFB;
	padding: 12px;
	background: #C2E1FE;

}

.monitoring-data-bg {
	width: 100%;
}

.monitoring-data-list {
	position: relative;
	overflow: hidden;
}

.monitoring-top-label {
	position: absolute;
	top: 6px;
	color: #FFF;
	width: 160px;
	text-align: center;
	left: 32px;
}

.monitoring-top-title {
	position: absolute;
	top: 40px;
	width: 160px;
	left: 32px;
	text-align: center;
	cursor: pointer;
}

.monitoring-content-label-item {
	cursor: pointer;
}

.monitoring-content-jiance {
	position: absolute;
	top: 6px;
	left: 195px;
	width: 105px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 65px;
}

.jiance-ce {
	color: #0D91FD;
}

.monitoring-content-label {
	position: absolute;
	top: 5px;
	left: 320px;
	height: 65px;
	width: 482px;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.monitoring-labels {
	display: flex;
}

.monitoring-labels div {
	margin-right: 12px;
}

.project-data {
	width: 100%;
}

.project-table {
	margin-top: 16px;
	background: #D9EBFC;
	width: 100%;
	border-collapse: collapse;
}

.project-table td {
	border: 1px solid #00FFFB;
	text-align: center;
	line-height: 36px;
}

.project-table-header td {
	background: linear-gradient(180deg, #77D5FD, #4F7CFE);
	color: #FFF;
}

.w-5 {
	width: 5% !important;
}

/* .project-action>:first-child {
	color: #3F76FF;
	background: #FFF;
	border: 1px solid #3F76FF;
	padding: 2px 12px 2px 12px;
	border-radius: 4px;
	cursor: pointer;
}

.project-action>:last-child {
	color: #000;
	background: #FFF;
	border: 1px solid #00FFFB;
	padding: 2px 12px 2px 12px;
	border-radius: 4px;
	cursor: pointer;
} */

.project-action {
	display: flex;
	justify-content: space-around;
}

.project-action img {
	width: 60%;
	height: auto;
}

.flip {
	background: #000;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 99;
	opacity: .6;
}

.modal-content {
	position: absolute;
	left: 20%;
	right: 20%;
	border: 1px solid #00FFFB;
	top: 10%;
	bottom: 10%;
	z-index: 999;
	border-radius: 5px;
	background: #DDF0FF;
	width: 60%;
	height: 80%;
	overflow: hidden;
}

.screen-content {
	position: absolute;
	border: 1px solid #00FFFB;
	left: 20px;
	right: 20px;
	top: 36px;
	bottom: 20px;
	width: 98%;
	height: 90%;
	z-index: 999;
	border-radius: 5px;
	background: #DDF0FF;
	overflow: auto;
}

.modal-content-body {
	text-align: center;
	width: 100%;
	height: 100%;
	overflow: auto;
}

.modal-content-title {
	color: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	text-shadow: 3px 5px 5px #367CFE;
	background: linear-gradient(to right, #367CFE, #A0C5FD, #367CFE);
	font-weight: 800;
	padding: 12px;
	position: relative;
}

.modal-close {
	width: 42px;
	position: absolute;
	right: 12px;
	cursor: pointer;
}

/* .modal-content-body img{
  width: 80%;
  height: auto;
  margin-top: 30px;
} */
.empty-modal {
	padding: 125px;
	font-size: 24px;
	color: #367CFE;
	text-align: center;
}

.dianwei-bg {
	width: 100%;
}

.dianwei-content {
	margin-top: 24px;
	position: relative;
}

.dianwei-title {
	position: absolute;
	top: 75px;
	left: 350px;
	right: 350px;
	height: 206px;

	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.dianwei-title-title {
	color: #FFF;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
}

.dianwei-title-desc {
	/* background: #1B225B; */
	background: #114dce;
	color: #2ACAFF;
	padding: 2px 12px 2px 12px;
	margin-top: 8px;
	border-radius: 4px;
}

.dianwei-left {
	position: absolute;
	left: -52px;
	top: 200px;
}

.dianwei-center {
	position: absolute;
	top: 400px;
	left: 34%;
}

.dianwei-right {
	position: absolute;
	right: -52px;
	top: 200px;
}

.dianwei-list {
	position: relative;
	display: flex;
	justify-content: center;
	width: 300px;
	margin-bottom: 24px;
}

.dianwei-list-info {
	position: absolute;
	padding: 12px;
	text-align: center;
	cursor: pointer;
}

.dianwei-list-bg {
	width: 120%;
}

.color-blue {
	color: #175CFF;
}

.up-storm {
	display: flex;
}

.up-input {
	display: flex;
	margin-bottom: 16px;
	border: 1px solid #00FFFB;
	border-radius: 4px;
	align-items: center;
	width: 100%;
	position: relative;
}

.up-input-key {
	background: #5D8BFB;
	color: #FFF;
	flex-shrink: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 130px;
	text-align: center;
	border-radius: 4px;
}

.history-point {
	background: #a0a6fb;
	color: #FFF;
	flex-shrink: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 130px;
	text-align: center;
	border-radius: 4px;
}

.up-input-value {
	background: #FFF;
	width: 100%;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.up-input-value [readonly] {
	cursor: pointer;
}

.up-input-right {
	padding-right: 32px;
}

.up-input-icon {
	width: 36px;
	position: absolute;
	right: 6px;
}

.up-input-value .input-data {
	border: none;
	width: 100%;
	background: none;
	height: 100%;
	padding: 8px;
	z-index: 9;
	font-size: 18px;
}

.up-form {
	width: 100%;
	height: 865px;
	overflow: auto;
	margin-top: 65px;
}

.up-btn {
	display: flex;
	margin-top: 24px;
}

.up-btn button {
	background: linear-gradient(to right, #12C2FF, #0781FF);
	color: #FFF;
	width: 50%;
	padding: 8px;
	border: none;
	box-shadow: 0 0 8px #00FFFB;
	border-radius: 8px;
	font-size: 18px;
	cursor: pointer;
}

.up-btn>:last-child {
	background: #FFF;
	color: #165DFF;
	margin-left: 50px;
}

.car-list {
	display: flex;
	width: 100%;
	margin-top: 12px;
}

.car-list-item {
	width: 25%;
	margin: 1%;
	background: #ABC8FF;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	border-radius: 5px;
	/* border: 1px solid #00FFFB;
	box-shadow: 0 0 8px #00FFFB; */
}

.car-list-item.active {
	border: 1px solid #00FFFB;
	box-shadow: 0 0 8px #00FFFB;
}

.car-list>:first-child {
	margin-left: 0;
}

.car-list>:last-child {
	margin-right: 0;
}

.car-list-title {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.car-list-title-bg {
	width: 100%;
}

.car-list-title-info {
	position: absolute;
	display: flex;
	width: 100%;
}

.car-number {
	width: 50%;
	text-align: center;
	color: #FFF;
	font-weight: 500;
	font-size: 15px;
}

.car-status {
	width: 50%;
	justify-content: center;
	display: flex;
	align-items: center;
}

.car-status-span {
	border: 1px solid #1CD66C;
	color: #1CD66C;
	font-size: 11px;
	padding: 0 4px 0 4px;
	border-radius: 2px;
	font-weight: 500;
}

.car-status-span-red {
	border: 1px solid #FF0000;
	color: #FF0000;
}

.car-car {
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center;
	margin-top: 20px;
}

.car-car-car {
	width: 60%;
	position: relative;
	z-index: 9;
}

.car-car-footer {
	width: 80%;
	margin-top: -142px;
}

.car-data {
	display: flex;
	justify-content: center;
	background: #2E69FF;
	padding: 2px;
	color: #FFF;
	font-size: 12px;
	width: 100%;
}

.car-data span {
	margin-right: 8px;
	margin-left: 8px;
}

.car-info {
	background: linear-gradient(to bottom, #57C4FC, #5995F5);
	color: #FFF;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 6px;
	font-size: 12px;
	border: 1px solid #00FFFB;
	border-radius: 5px;
	margin: 8px;
	box-shadow: 0 0 8px #00FFFB;
	line-height: 20px;
	width: 90%;
}

.car-storm {
	display: flex;
	width: 100%;
	margin-top: 50px;
}

.car-storm-list {
	width: 50%;
	border: 1px solid #00FFFB;
	border-radius: 5px;
	display: flex;
	align-items: center;
	background: #FFF;
	flex-direction: column;

}

.car-storm>:first-child {
	margin-right: 12px;
}

.car-storm-list-title {
	margin-top: -22px;
}

.maps-data {
	border: 1px solid #00FFFB;
	height: 300px;
	width: 95%;
	border-radius: 5px;
}

.car-table {
	width: 95%;
	background: #D9EBFC;
	border-collapse: collapse;
	margin-bottom: 30px;
}

.car-table .th {
	background: linear-gradient(to bottom, #77D5FD, #4F7CFE);
	color: #FFF;
}

.car-table td {
	border: 1px solid #00FFFB;
	text-align: center;
	padding: 4px;
}

input,
textarea {
	border: none;
	outline: none;
}

textarea::placeholder,
input::placeholder {
	color: #A6B9FF;
}

.modal-storm {
	margin-top: 12px;
}

.moadl-record-num {
	color: #165DFF;
	flex-shrink: 0;
	margin-left: 6px;
}

.absolute {
	position: absolute !important;
	z-index: 99;
}

.project-checkbox {
	width: 20px !important;
	height: 20px !important;
	border: 1px solid #165DFF;
	border-radius: 2px;
	position: relative;
	display: inline-block;
	margin-top: 4px;
}

.modal-tables {
	overflow: auto;
	height: 730px;
}

.modal-tables tr {
	cursor: pointer;
}

.project-checked::after {
	position: absolute;
	left: 10%;
	right: 10%;
	top: 10%;
	bottom: 10%;
	background: #165DFF;
	content: ' ';
}

.modal-title {
	color: #165DFF;
	text-align: center;
	font-size: 20px;
	margin-top: 16px;
}

.modal-contents {
	background: #FFF;
	margin: 20px;
	border-radius: 8px;
	font-size: 23px;
	height: 20vh;
	border: 2px solid #55ffff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-contents img {
	width: 100%;
}

.modal-image {
	margin-top: 20px;
	width: 100%;
	height: 730px;
	overflow: auto;
	text-align: center;
}

.modal-image img {
	width: 80%;
	height: auto;
	text-align: center;
}

.project-up-btn {
	display: flex;
	margin-top: 24px;
}

.project-up-btn button {
	background: linear-gradient(to right, #12C2FF, #0781FF);
	color: #FFF;
	width: 30%;
	padding: 8px;
	border: none;
	box-shadow: 0 0 8px #00FFFB;
	border-radius: 8px;
	font-size: 18px;
	cursor: pointer;
	margin: 0 20px;
}

.project-up-btn>:last-child {
	background: #FFF;
	color: #165DFF;
}

.project-pub-btn {
	display: flex;
	margin-top: 24px;
}

.project-pub-btn button {
	background: linear-gradient(to right, #12C2FF, #0781FF);
	color: #FFF;
	width: 50%;
	padding: 8px;
	border: none;
	box-shadow: 0 0 8px #00FFFB;
	border-radius: 8px;
	font-size: 18px;
	cursor: pointer;
}

.project-pub-btn>:last-child {
	background: #FFF;
	color: #165DFF;
	margin-left: 24px;
}

.monitor-content {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	margin-top: 20px;
	overflow-y: hidden;
}

.monitor-list {
	width: 23.75%;
	margin-left: 1%;
	margin-bottom: 15px;
	box-sizing: border-box;
	padding: 15px;
	background-color: #ffffff;
	border-radius: 6px;
	height: 420px;
	overflow: hidden;
	position: relative;
}

.monitor-company {
	color: #4076FF;
	text-align: center;
	font-size: 15px;
	padding-bottom: 10px;
}

.monitor-title {
	color: #ffffff;
	background-color: #4076FF;
	border-radius: 6px;
	text-align: center;
	font-size: 15px;
	padding: 5px;
	margin-bottom: 10px;
}

.monitor-list .t1 {
	background-color: #4076FF;
	font-size: 12px;
	color: #fff;
	border-collapse: collapse;
	width: 100%;
}

.monitor-list .t1 th,
.monitor-list .t1 td {
	border: 1px solid #13F6F1;
	height: 27px;
	text-align: center;
}

.monitor-list .t1 td {
	background-color: #608bfc;
}

.monitor-list .tbody tr:first-child td {
	border-top: 0 !important;
}

.show-all {
	color: #608bfc;
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 30px;
	font-size: 16px;
	background-color: rgba(255, 255, 255, 0.8);
}

.warning-content {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	margin-top: 50px;
	overflow-y: hidden;
}

.warning-list {
	width: 32%;
	margin-left: 1%;
	margin-bottom: 15px;
	box-sizing: border-box;
	position: relative;
	background: linear-gradient(to bottom, #77d4fd, #4d7bff);
	box-shadow: 0 0 4px #00FFFB;
	padding: 5px 21px 5px 0;
	border-radius: 5px;
	color: white;
	display: flex;
	align-items: center;
	font-size: 16px;
}

.warning-left {
	width: 16px;
	height: 52px;
	margin-left: -4px;
	margin-top: -3px;
	margin-right: 10px;
}

.warning-left image {
	width: 20px;
	height: auto;
}

.warning-center {
	margin-top: 5px;
}

.warning-leftright {
	display: flex;
}

.warning-updown {
	display: flex;
	flex-direction: column;
}

.warning-date-up {
	display: flex;
}

.warning-date {
	color: #ff7d00;
	background-color: #E0EFFF;
	padding: 3px 6px;
	border-radius: 5px;
	margin-top: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.warning-date img {
	margin-right: 5px;
}

.warning-type {
	margin-right: 20px;
	display: flex;
	align-items: center;
	margin-top: 10px;
}

.warning-type img {
	margin-right: 10px;
}

.warning-company {
	background-color: #E0EFFF;
	color: #4d7bff;
	border-radius: 5px;
	margin: 10px 0;
	padding: 3px;
}

.warning-right {
	position: absolute;
	right: 21px;
	top: 30%;
	background-color: #E0EFFF;
	border-radius: 5px;
	padding: 3px 6px;
}

.warning-num {
	position: absolute;
	right: 2%;
	font-size: 20px;
	color: #009DF5;
	padding: 10px;
}

.separation-line {
	margin-bottom: 10px;
}

.standard_link {
	color: #000;
	text-decoration: none;
}

.standard_link:hover {
	color: #009DF5;
	text-decoration: none;
}

.project_title {
	width: 800px;
	position: absolute;
	left: 50%;
	top: 160px;
	transform: translateX(-50%);
	z-index: 3;
	text-align: center;
	color: #ffffff;
	font-size: 16px;
}

.point_around {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.point-process {
	width: 100%;
	height: 100%;
	padding: 0 20px;
}

.point-process-title {
	text-align: center;
	font-size: 20px;
	color: #009DF5;
	margin: 20px;
}

.point-process-list {
	display: flex;
	align-items: center;
	width: 100%;
	height: 150px;
	border: 1px solid #009DF5;
	background-color: #FFFFFF;
	border-radius: 8px;
	padding: 10px;
	margin: 30px 0;
	position: relative;
}

.point-process-type {
	position: absolute;
	left: 0;
	top: -10px;
	background-color: #009DF5;
	padding: 10px;
	border-radius: 8px;
	font-size: 20px;
	font-weight: 500;
	color: #FFF;
}

.point-process-img {
	border-radius: 50%;
	width: 80px;
	height: 80px;
	margin: 10px;
}

.point-process-content {
	width: 50%;
}

.lab-step-content {
	width: 100%;
}

.point-process-name {
	font-size: 20px;
	color: #5b5b5b;
	line-height: 35px;
}

.lab-step-name {
	font-size: 20px;
	color: #5b5b5b;
	line-height: 30px;
	max-height: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.point-process-date {
	font-size: 18px;
	color: #b3b3b3;
	line-height: 35px;
}

.point-process-detail {
	font-size: 20px;
	color: #009DF5;
	line-height: 35px;
	font-weight: 500;
	cursor: pointer;
}

.point-process-picture {
	width: 100px;
	height: 100px;
	border-radius: 10px;
}

.point-confirm-list {
	width: 100%;
	padding: 10px;
	border-radius: 8px;
}

.point-confirm {
	width: 100%;
	border: 1px solid #009DF5;
	border-radius: 8px;
	background: #D9EBFC;
}

.point-confirm-name {
	padding: 10px;
	font-size: 20px;
	color: #414141;
	border: 1px solid #009DF5;
}

.point-confirm-value {
	padding: 10px;
	font-size: 16px;
	color: #636363;
	border: 1px solid #009DF5;
}

.gofile {
	color: #009DF5;
	cursor: pointer;
}

.go-file {
	cursor: pointer;
	color: #16f5f5;
}

.sam-center-body {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 130px;
	background-color: #D3ECFF;
	width: 950px;
	height: 940px;
	border-radius: 5px;
	flex-direction: column;
	align-items: center;
	padding: 18px;
	overflow: auto;
}

.sam-record-list {
	margin-top: 10px;
	margin-right: 10px;
	width: 20%;
	border-radius: 5px;
	float: left;
}

.sam-record-detail {
	width: 100%;
	background-color: #009DF5;
	color: #FFF;
	font-size: 18px;
	padding: 10px;
	text-align: center;
	border: 1px solid #009DF5;
	border-radius: 5px;
	margin-bottom: 10px;
	cursor: pointer;
}

.frequency-list {
	margin-top: 10px;
	margin-right: 10px;
	width: 30%;
	float: left;
}

.frequency-detail {
	width: 100%;
	background-color: #009DF5;
	color: #FFF;
	font-size: 16px;
	padding: 10px;
	text-align: left;
	border-radius: 5px;
	line-height: 30px;
	margin-bottom: 10px;
	cursor: pointer;
}

.field-sampling {
	margin-top: 10px;
	width: 45%;
	float: left;
	background-color: #009DF5;
	color: #FFF;
	border-radius: 5px;
	font-size: 16px;
	padding: 10px;
	line-height: 30px;
}

.field-sampling-title {
	font-size: 17px;
	font-weight: 600;
	text-align: center;
	color: #ffffff;
}

.sampling-file {
	display: flex;
	justify-content: space-around;
}

.field-flex {
	display: flex;
}

.field-flex1 {
	width: 25%;
}

.field-flex2 {
	width: 75%;
}

.device-bottom {
	margin-bottom: 5px;
}

.sampling-titles {
	background-color: #009DF5;
	color: #FFF;
	font-size: 20px;
	text-align: center;
	margin: 10px 10px 0 0;
	padding: 10px;
	border-radius: 5px;
}

.sampling-title1 {
	width: 20%;
}

.sampling-title2 {
	width: 30%;
}

.sampling-title3 {
	width: 45%;
}

.samplingcheck {
	border: 3px solid #00ffff;
	box-shadow: 0 0 8px #195ffe;
}

.cursor {
	cursor: pointer;
}

.fill-title {
	width: 100%;
	height: 40px;
	background-color: #4d7bff;
	margin: 10px 0;
	align-items: center;
	border-radius: 3px;
}

.fill-title p {
	padding: 8px;
	color: #f4f4f4;
	font-size: 20px;
}

.monitor-img {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 500px;
	margin-top: 100px;
}

.monitor-img img {
	width: 839px;
	height: 316px;
}

.monitor-piece {
	position: absolute;
	width: 120px;
	height: 150px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: transform 0.3s ease;
}

.monitor-piece:hover {
	transform: scale(1.1);
}

.monitor-piece .icon {
	position: relative;
	top: 30px;
}

.monitor-piece .buttons {
	display: flex;
	justify-content: space-between;
	width: 100%;
	position: relative;
	top: -20px;
}

.monitor-piece .btn {
	width: 60px;
	height: 30px;
	background-color: #E6F7FF;
	border: 2px solid #00BFFF;
	border-radius: 5px;
	color: #00BFFF;
	font-size: 15px;
	cursor: pointer;
}

#waste-water {
	top: 200px;
	left: 150px;
}

#rainwater {
	top: 150px;
}

#groundwater {
	top: 200px;
	right: 150px;
}

#soil {
	top: 350px;
	right: 50px;
}

#industrial-noise {
	top: 350px;
	left: 50px;
}

#organized-emission {
	top: 450px;
	left: 250px;
}

#unorganized-emission {
	top: 450px;
	right: 250px;
}

.color-qualified {
	color: #55aaff;
}

.color-unqualified {
	color: red;
}

.table-title {
	background: linear-gradient(180deg, #77D5FD, #4F7CFE);
	color: #FFF;
	border: 1px solid #00FFFB;
	text-align: center;
	line-height: 36px;
	width: 100%;
	margin-top: 10px;
}

.procedure-classify {
	width: 100%;
	margin: 20px 0;
	position: relative;
}

.scroll-left {
	left: 0;
}

.scroll-right {
	right: 0;
}

.scroll-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: white;
	border: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	transition: all 0.3s ease;
	opacity: 1;
}

.tab-btn {
	white-space: nowrap;
	padding: 12px 24px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	border: none;
	outline: none;
	background-color: #2e85ff;
	color: white;
}

.labflowactive {
	box-shadow: 0 0 5px #00FFFB;
	background: linear-gradient(180deg, #79D6FD, #2E69FF);
}

.tabs-container {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 10px 40px;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
	justify-content: space-around;
}

.tabs-container::-webkit-scrollbar {
	display: none;
}

.procedure-list {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	overflow: auto;
}

.procedure-step {
	background: linear-gradient(to bottom, #77d4fd, #4d7bff);
	box-shadow: 0 0 8px #00FFFB;
	width: 31%;
	padding: 14px;
	border-radius: 5px;
	color: #FFF;
	margin: 1%;
	align-items: center;
	position: relative;
	overflow: hidden;
	line-height: 30px;
	height: 270px;
}

.procedure-title {
	display: flex;
	text-align: center;
	align-items: center;
	font-size: 18px;
	line-height: 40px;
}

.procedure-num {
	display: flex;
	align-items: center;
	border-radius: 50%;
	font-weight: 600;
	color: #ffffff;
	background-color: #2e90ff;
	width: 25px;
	height: 25px;
	justify-content: center;
	margin-left: 6px;
}

.procedure-content {
	display: flex;
	text-align: center;
	align-items: center;
	font-size: 16px;
}

.procedure-content img {
	margin-right: 10px;
	margin-left: 5px;
}

.procedure-detail {
	margin-top: 10px;
	background-color: #fff;
	border-radius: 10px;
	color: #4174FF;
	font-size: 16px;
	width: 100%;
	height: 120px;
	display: flex;
	align-items: center;
	padding: 0 20px;
	text-align: center;
}

.procedure-detail div {
	margin: auto;
}