@font-face {
	font-family: 'UniDream-LED';
	src: url('../font/UnidreamLED.ttf') format('truetype');
}
html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

body {
	background: url(../img1/bg.png) no-repeat center center;
	background-size: 100% 100%;
}


/* 顶部title */
.header {
	width: 100%;
	height: 6.296vh;
	background: url(../img1/header.png) no-repeat center center;
	background-size: 100% 100%;
}

.header .svgBox {
	width: 100%;
	height: 6.296vh;
	position: absolute;
	top: 0;
	left: 0;
}

.header .gradient-text-three {
	fill: url(#SVGID_1_);
	font-size: 3.2vh;
	font-weight: bold;
	font-stretch: normal;
	line-height: 6.212vh;
	letter-spacing: 0.093vh;
	text-align: center;
}

.header .time {
	font-family: MicrosoftYaHei-Bold;
	font-size: 2.222vh;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0vh;
	line-height: 3.88vh;
	color: #39d6fe;
	margin-right: 1.719vw;
}

.header .date {
	margin-right: 1.51vw;
}

.header .date p:first-of-type {
	font-family: MicrosoftYaHei;
	font-size: 1.111vh;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0vh;
	color: #39d6fe;
}

.header .date p:last-of-type {
	font-family: MicrosoftYaHei;
	font-size: 1.111vh;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0vh;
	color: #39d6fe;
	text-align: right;
}

/* 顶部菜单 */
.topTabs {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: -2.778vh;
	position: absolute;
	left: 0;
	top: 6.2vh;
	z-index: 999;
}

.topTabs .leftTab,
.topTabs .rightTab{
	width: 24vw;
	display: flex;
	justify-content: stretch;
	align-items: center;
	text-align: center;
}

.topTabs>ul>li {
	flex: 1;
	height: 2.778vh;
	line-height: 2.778vh;
	position: relative;
}
.topTabs>ul>li p{
	font-family: MicrosoftYaHei;
	font-size: 1.919vh;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0vh;
	color: #00daff;
	cursor: pointer;
}

.topTabs>ul>li::before {
	content: "";
	margin: auto;
	position: absolute;
	top: 0;
	left: -15px;
	right: -15px;
	bottom: 0;
	z-index: -1;
}
.topTabs>ul>li::after {
	content: "";
	margin: auto;
	position: absolute;
	top: -1px;
	left: -17px;
	right: -17px;
	bottom: -1px;
	z-index: -2;
}

.topTabs .indexTab::before{
	border-bottom: 2.775vh solid #030F74;
	border-left: 4.25vh solid #030F74;
	border-right: 4.25vh solid transparent;
}
.topTabs .indexTab.active::before{
	border-bottom: 2.775vh solid #2845fb;
	border-left: 4.25vh solid #2845fb;
}
.topTabs .indexTab::after{
	border-bottom: 3vh solid #2845fb;
	border-left: 4.25vh solid #2845fb;
	border-right: 4.25vh solid transparent;
}

.topTabs .theElderlyTab::before{
	border-top: 2.775vh solid #030F74;
	border-left: 4.25vh solid transparent;
	border-right: 4.25vh solid transparent;
}
.topTabs .theElderlyTab.active::before{
	border-top: 2.775vh solid #2845fb;
}
.topTabs .theElderlyTab::after{
	border-top: 3vh solid #2845fb;
	border-left: 4.25vh solid transparent;
	border-right: 4.25vh solid transparent;
}
.topTabs .mechanismTab::before{
	right: -5px;
	border-bottom: 2.775vh solid #030F74;
	border-left: 4.25vh solid transparent;
	border-right: 4.25vh solid transparent;
}
.topTabs .mechanismTab.active::before{
	border-bottom: 2.775vh solid #2845fb;
}
.topTabs .mechanismTab::after{
	right: -6px;
	border-bottom: 3vh solid #2845fb;
	border-left: 4.25vh solid transparent;
	border-right: 4.25vh solid transparent;
}
.topTabs .serviceTab::before{
	left: -6px;
	border-bottom: 2.775vh solid #030F74;
	border-left: 4.25vh solid transparent;
	border-right: 4.25vh solid transparent;
}
.topTabs .serviceTab.active::before{
	border-bottom: 2.775vh solid #2845fb;
}
.topTabs .serviceTab::after{
	left: -8px;
	border-bottom: 3vh solid #2845fb;
	border-left: 4.25vh solid transparent;
	border-right: 4.25vh solid transparent;
}
.topTabs .monitorTab::before{
	border-top: 2.775vh solid #030F74;
	border-left: 4.25vh solid transparent;
	border-right: 4.25vh solid transparent;
}
.topTabs .monitorTab.active::before{
	border-top: 2.775vh solid #2845fb;
}
.topTabs .monitorTab::after{
	border-top: 3vh solid #2845fb;
	border-left: 4.25vh solid transparent;
	border-right: 4.25vh solid transparent;
}
.topTabs .mapTab::before{
	border-bottom: 2.775vh solid #030F74;
	border-left: 4.25vh solid transparent;
	border-right: 4.25vh solid #030F74;
}
.topTabs .mapTab.active::before{
	border-bottom: 2.775vh solid #2845fb;
	border-right: 4.25vh solid #2845fb;
}
.topTabs .mapTab::after{
	border-bottom: 3vh solid #2845fb;
	border-left: 4.25vh solid transparent;
	border-right: 4.25vh solid #2845fb;
}

.topTabs .serviceTab .serviceTabItem{
	margin: auto;
	position: absolute;
	top: 2.778vh;
	left: -8px;
	right: -16px;
	z-index: 99;
	background-color: rgba(1,7,125,0.8);
	height: 0;
	overflow: hidden;
	transition: all 600ms;
}
.topTabs .serviceTab:hover .serviceTabItem{
	height: 20vh;
}
.serviceTab .serviceTabItem ul{
	position: relative;
}
.serviceTab .serviceTabItem ul::before{
	content: '';
	margin: auto;
	width: 1px;
	position: absolute;
	top: 0;
	left: 50%;
	bottom: 0;
	background-color: #0a16cc;
}
.serviceTab .serviceTabItem ul li{
	width: 50%;
	float: left;
	text-align: center;
}
.serviceTab .serviceTabItem ul li p{
	font-family: MicrosoftYaHei;
	font-size: 1.519vh;
	font-weight: normal;
	font-stretch: normal;
	line-height: 3.358vh;
	letter-spacing: 0vh;
	color: #00daff;
}
.serviceTab .serviceTabItem ul li.active{
	background-color: #0a16cc;
}






.topTabs .monitorTab .monitorTabItem{
	margin: auto;
	position: absolute;
	top: 2.778vh;
	left: 20px;
	right: 20px;
	z-index: 99;
	background-color: rgba(1,7,125,0.8);
	height: 0;
	overflow: hidden;
	transition: all 600ms;
}
.topTabs .monitorTab:hover .monitorTabItem{
	height: 14vh;
}

.monitorTab .monitorTabItem ul li p{
	text-align: center;
	font-family: MicrosoftYaHei;
	font-size: 1.519vh;
	font-weight: normal;
	font-stretch: normal;
	line-height: 3.358vh;
	letter-spacing: 0vh;
	color: #00daff;
}
.monitorTab .monitorTabItem ul li.active{
	background-color: #0a16cc;
}


.contBox{
	overflow: hidden;
}

/* 公共文字渐变标题 */
.cardBox{
	position: relative;
	border: solid 1px rgba(55, 85, 218, 0.3);
	box-shadow: 0px 0px 21px rgba(0, 5, 202, 0.31) inset;
}
.cardBox .title {
	position: relative;
	text-align: center;
	z-index: 99;
}

.cardBox .title span {
	background: url(../img1/title-bg.png) no-repeat center center;
	background-size: 100% 100%;
	display: inline-block;
	width: 17.865vw;
	height: 3.796vh;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.cardBox .title .svgBox {
	width: 17.865vw;
	height: 3.796vh;
}
.cardBox .title .gradient-text-three {
	font-size: 2.778vh;
	font-weight: bold;
	font-stretch: normal;
	line-height: 6.812vh;
	letter-spacing: 0.093vh;
	text-align: center;
}


/* 公共四角边线 */
.lineLeftTop {
	position: absolute;
	width: 2.552vw;
	height: 4.537vh;
	left: 0;
	top: 0;
	border-top: 2px solid #00a2ff;
	border-left: 2px solid #00a2ff;
}

.lineLeftBottom {
	position: absolute;
	width: 2.552vw;
	height: 4.537vh;
	left: 0;
	bottom: 0;
	border-bottom: 2px solid #00a2ff;
	border-left: 2px solid #00a2ff;
}

.lineRightTop {
	position: absolute;
	width: 2.552vw;
	height: 4.537vh;
	right: 0;
	top: 0;
	border-top: 2px solid #00a2ff;
	border-right: 2px solid #00a2ff;
}

.lineRightBottom {
	position: absolute;
	width: 2.552vw;
	height: 4.537vh;
	right: 0;
	bottom: 0;
	border-bottom: 2px solid #00a2ff;
	border-right: 2px solid #00a2ff;
}
#bgParticle {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}