@charset "utf-8";

ul,
li {
	list-style: none;
	padding: 0;
	margin: 0;
}



html,
body,
#container {
	height: 100%;
	width: 100%;
}

@media screen and (min-width: 1280px) {
	.amap-icon img{
	    width: 26px;
	    height: 26px;
	}
		
	.sys-title {
		position: absolute;
		left: 0;
		top: 16px;
		width: 50%;
		height: 30px;
		z-index: 999;
	}
	
	.sys-title-left {
		position: relative;
		float: left;
		font-size: 2rem;
		font-weight: bold;
		color: #000000;
		line-height: 3rem;
		margin-left: 2.6rem;
		z-index: 999;
	}
	
	.sys-title-right {
		position: relative;
		float: left;
		font-size: 1.2rem;
		font-weight: bold;
		color: #000000;
		line-height: 3.6rem;
		margin-left: .6rem;
		letter-spacing: .2rem;
	}
	
	.sys-title-english {
		position: absolute;
		left: 0;
		top: 54px;
		color: #000000;
		font-size: .8rem;
		margin-left: 2.8rem;
		font-weight: 600;
		line-height: 0.2rem;
				z-index: 999;
	}
	
	.sys-logo {
		position: absolute;
		right: 2.6rem;
		top: 16px;
		height: 30px;
		font-family: "微软雅黑";
		font-weight: bold;
		font-size: 2rem;
		color: #000000;
		line-height: 2.6rem;
	}
	
	.mui-left-mid-content {
		position: absolute;
		left: 38px;
		top: 120px;
		width: 14%;
		height: 50%;
	
	}
	
	.mui-left-child {
		position: relative;
		width: 100%;
		height: 20%;
	}
	
	.mui-left-child-img {
		position: relative;
		float: left;
		width: 30px;
		height: 30px;
		margin-left: 14px;
		margin-top: 14px;
	}
	
	.school {
		position: relative;
		background: url(../img/time_icon.png);
		background-size: 100% 100%;
	}
	
	.video {
		position: relative;
		background: url(../img/4.png);
		background-size: 100% 100%;
	}
	
	.student {
		position: relative;
		background: url(../img/1.png);
		background-size: 100% 100%;
	}
	
	.sensor {
		position: relative;
		background: url(../img/4.png);
		background-size: 100% 100%;
	}
	
	.article {
		position: relative;
		background: url(../img/3.png);
		background-size: 100% 100%;
	}
	
	.mui-left-child-div {
		position: relative;
		float: left;
		height: 100%;
		width: 50%;
		margin-left: 6px;
	}
	
	.mui-left-child-name {
		position: relative;
		width: 100%;
		height: 50%;
		text-align: center;
		font-size: .72rem;
		color: #FFFFFF;
		line-height: 3.6rem;
		font-weight: 400;
		letter-spacing: .1rem;
	}
	
	.mui-left-child-data {
		position: relative;
		width: 100%;
		height: 50%;
		text-align: center;
		font-size: 1rem;
		color: #FFFFFF;
		line-height: 1.6rem;
		font-weight: 500;
	}
	
	
	.left-mark-content {
		position: absolute;
		left: 38px;
		bottom: 20px;
		height: 8rem;
		width: 30%;
	}
	
	.left-mark-content-child {
		position: relative;
		width: 6rem;
		height: 5.4rem;
		margin-top: 2.2rem;
		float: left;
		animation: move 2.5s infinite;
	}
	
	.left-mark-other {
		margin-left: .8rem;
	}
	
	.left-mark-text {
		text-align: center;
		font-size: 1rem;
		color: #00DBFE;
		font-weight: 500;
	}
	
	.left-mark-icon {
		position: relative;
		width: 2.6rem;
		height: 2.6rem;
		background: url(../img/littleblue.png);
		background-size: 100% 100%;
		margin-left: 1.7rem;
		margin-top: .2rem;
	}
	
	.c-room {
		background: url(../img/location_bg.png);
		background-size: 100% 100%;
	}
	
	.c-room-text {
		color: #07F8AA;
	}
	
	.future-room {
		background: url(../img/orange.png);
		background-size: 100% 100%;
	}
	
	.future-room-text {
		color: #FDBC02;
	}
	
	
	.alerm-room-text {
		color: #FA0101;
	}
	
	.alerm-room {
		background: url(../img/alerm_bg.png);
		background-size: 100% 100%;
	}
	
	.all-room-text{
		color:#0089F1;
	}
	
	
	.all-room {
		background: url(../img/bule.png);
		background-size: 100% 100%;
	}
	
	.right-video {
		position: absolute;
		right: 38px;
		top: 60px;
		width: 24%;
		height: 62%;
	}
	
	.right-video-title-content {
		position: relative;
		width: 100%;
		height: 10%;
	}
	
	.right-video-title {
		position: relative;
		font-size: 1.2rem;
		color: #FFFFFF;
		font-weight: 400;
		padding-top: .4rem;
		letter-spacing: .1rem;
		padding-left: .8rem;
		line-height: 1rem;
	}
	
	.right-video-title-english {
		position: relative;
		font-size: .8rem;
		color: #FFFFFF;
		padding-left: .8rem;
	}
	
	.right-video-croom {
		position: relative;
		width: 100%;
		height: 45%;
	}
	
	.right-video-growth {
		position: relative;
		width: 100%;
		height: 45%;
	}
	
	
	.video-content {
		position: relative;
		width: 50%;
		height: 100%;
		float: left;
	}
	
	.video-content-code {
		position: relative;
		width: 100%;
		height: 12%;
		color: #FFFFFF;
		font-size: .68rem;
		padding-left: .8rem;
		font-weight: 600;

	}
	
	.video-content-monitor {
		position: relative;
		width: 96%;
		height: 76%;
		margin-left: 2%;
		background: #222222;
	}
	
	.video-content-title-icon {
		position: relative;
		width: 100%;
		height: 12%;
	}
	
	.video-content-icon {
		position: relative;
		float: left;
		width: .8rem;
		height: .8rem;
		background: url(../img/normal.png);
		background-size: 100% 100%;
		margin-top: .6rem;
		margin-left: .8rem;
	}
	
	.video-content-title {
		position: relative;
		float: left;
		margin-left: .6rem;
		color: #FFFFFF;
		font-size: .68rem;
		font-weight: 500;
		margin-top: .2rem;
	}
	
	.video-one {
		position: relative;
		float: left;
		width: 49%;
		height: 100%;
		background: #00FFFF;
		margin-left: .5%;
	}
	
	.video-two {
		position: relative;
		float: left;
		width: 49%;
		height: 100%;
		background: #00FFFF;
		margin-left: 1%;
	}
	
	.right-alerm {
		position: absolute;
		right: 38px;
		bottom: 20px;
		height: 22%;
		width: 24%;
	}
	
	.right-alerm .right-alerm-title-content {
		position: relative;
		height: 25%;
		width: 100%;
	}
	
	.right-alerm-title {
		position: relative;
		font-size: 1.2rem;
		color: #FFFFFF;
		font-weight: 400;
		letter-spacing: .2rem;
		padding-left: .8rem;
	}
	
	.right-alerm-title-english {
		position: relative;
		font-size: .6rem;
		color: #FFFFFF;
		padding-left: .8rem;
		line-height: 1rem;
	}
	
	.right-alerm-content {
		position: relative;
		height: 75%;
		width: 100%;
		overflow: hidden;
	}
	
	.mui-bottom-content {
		position: absolute;
		left: 0%;
		right: 0%;
		top: 4%;
		bottom: 4%;
	}
	
	.js-slide-list li {
		position: relative;
		width: 100%;
		height: 2.4rem;
	}
	
	.mui-bottom-num {
		position: relative;
		float: left;
		width: .8rem;
		height: .8rem;
		background: url(../img/normal.png);
		background-size: 100% 100%;
		margin-top: .8rem;
		margin-left: 1rem;      
	}
	
	.mui-bottom-name {
		position: relative;
		float: left;
		height: 30px;
		width: 76%;
		font-size: .8rem;
		text-align: center;
		line-height: 2.4rem;
		color: #F5FD0A;
		font-weight: 500;
	}
	
	.mui-bottom-station {
		position: relative;
		float: left;
		height: 30px;
		width: 14%;
		font-size: .8rem;
		text-align: center;
		line-height: 2.4rem;
		color: #12DFFD;
		font-weight: 500;
	}
}

@media screen and (min-width: 1500px) {
	.amap-icon img{
	    width: 30px;
	    height: 30px;
	}
		
	.sys-title {
		position: absolute;
		left: 0;
		top: 16px;
		width: 50%;
		height: 60px;
	}
	
	.sys-title-left {
		position: relative;
		float: left;
		font-size: 3rem;
		font-weight: bold;
		color: #000000;
		line-height: 4.6rem;
		margin-left: 2.6rem;
	}
	
	.sys-title-right {
		position: relative;
		float: left;
		font-size: 1.8rem;
		font-weight: bold;
		color: #000000;
		line-height: 5.2rem;
		margin-left: .6rem;
		letter-spacing: .2rem;
	}
	
	.sys-title-english {
		position: absolute;
		left: 0;
		top: 76px;
		color: #000000;
		font-size: 1.2rem;
		margin-left: 2.8rem;
		font-weight: 600;
		line-height: 0.2rem;
				z-index: 999;
	}
	
	.sys-logo {
		position: absolute;
		right: 2.6rem;
		top: 16px;
		height: 60px;
		font-family: "微软雅黑";
		font-weight: bold;
		font-size: 3rem;
		color: #000000;
		line-height: 4.4rem;
	}
	
	.mui-left-mid-content {
		position: absolute;
		left: 68px;
		top: 180px;
		width: 14%;
		height: 50%;
	}
	
	.mui-left-child {
		position: relative;
		width: 100%;
		height: 20%;
	}
	
	.mui-left-child-img {
		position: relative;
		float: left;
		width: 46px;
		height: 46px;
		margin-left: 24px;
		margin-top: 20px;
	}
	
	.school {
		position: relative;
		background: url(../img/time_icon.png);
		background-size: 100% 100%;
	}
	
	.video {
		position: relative;
		background: url(../img/4.png);
		background-size: 100% 100%;
	}
	
	.student {
		position: relative;
		background: url(../img/1.png);
		background-size: 100% 100%;
	}
	
	.sensor {
		position: relative;
		background: url(../img/4.png);
		background-size: 100% 100%;
	}
	
	.article {
		position: relative;
		background: url(../img/3.png);
		background-size: 100% 100%;
	}
	
	.mui-left-child-div {
		position: relative;
		float: left;
		height: 100%;
		width: 50%;
		margin-left: 16px;
	}
	
	.mui-left-child-name {
		position: relative;
		width: 100%;
		height: 50%;
		text-align: center;
		font-size: .86rem;
		color: #FFFFFF;
		line-height: 5.6rem;
		font-weight: 400;
	}
	
	.mui-left-child-data {
		position: relative;
		width: 100%;
		height: 50%;
		text-align: center;
		font-size: 1.4rem;
		color: #FFFFFF;
		line-height: 2rem;
		font-weight: 500;
	}
	
	
	.left-mark-content {
		position: absolute;
		left: 68px;
		bottom: 40px;
		height: 10rem;
		width: 50%;
	}
	
	.left-mark-content-child {
		position: relative;
		width: 10rem;
		height: 6.4rem;
		margin-top: 2.2rem;
		float: left;
		animation: move 2.5s infinite;
	}
	
	.left-mark-other {
		margin-left: 2rem;
	}
	
	.left-mark-text {
		text-align: center;
		font-size: 1.26rem;
		color: #00DBFE;
		font-weight: 500;
	}
	
	.left-mark-icon {
		position: relative;
		width: 4rem;
		height: 4rem;
		background: url(../img/littleblue.png);
		background-size: 100% 100%;
		margin-left: 3rem;
		margin-top: .4rem;
	}
	
	.c-room {
		background: url(../img/location_bg.png);
		background-size: 100% 100%;
	}
	
	.c-room-text {
		color: #07F8AA;
	}
	
	.future-room {
		background: url(../img/orange.png);
		background-size: 100% 100%;
	}
	
	.future-room-text {
		color: #FDBC02;
	}
	
	
	.alerm-room-text {
		color: #FA0101;
	}
	
	.alerm-room {
		background: url(../img/alerm_bg.png);
		background-size: 100% 100%;
	}
	
	.all-room-text{
		color:#0089F1;
	}
	
	.all-room {
		background: url(../img/bule.png);
		background-size: 100% 100%;
	}
	
	
	.right-video {
		position: absolute;
		right: 68px;
		top: 90px;
		width: 24%;
		height: 62%;
	}
	
	.right-video-title-content {
		position: relative;
		width: 100%;
		height: 12%;
	
	}
	
	.right-video-title {
		position: relative;
		font-size: 1.6rem;
		color: #FFFFFF;
		font-weight: 400;
		padding-top: .46rem;
		letter-spacing: .2rem;
		padding-left: .8rem;
	}
	
	.right-video-title-english {
		position: relative;
		font-size: 1.2rem;
		color: #FFFFFF;
		padding-left: .8rem;
	}
	
	.right-video-croom {
		position: relative;
		width: 100%;
		height: 44%;
	}
	
	.right-video-growth {
		position: relative;
		width: 100%;
		height: 44%;
	}
	
	
	.video-content {
		position: relative;
		width: 50%;
		height: 100%;
		float: left;
	}
	
	.video-content-code {
		position: relative;
		width: 100%;
		height: 13%;
		color: #FFFFFF;
		font-size: 1rem;
		padding-left: .8rem;
		padding-top: .24rem;
		font-weight: 600;
	}
	
	.video-content-monitor {
		position: relative;
		width: 96%;
		height: 74%;
		margin-left: 2%;
		background: #222222;
	}
	
	.video-content-title-icon {
		position: relative;
		width: 100%;
		height: 13%;
	}
	
	.video-content-icon {
		position: relative;
		float: left;
		width: .8rem;
		height: .8rem;
		background: url(../img/normal.png);
		background-size: 100% 100%;
		margin-top: .6rem;
		margin-left: .8rem;
	}
	
	.video-content-title {
		position: relative;
		float: left;
		margin-left: .6rem;
		color: #FFFFFF;
		font-size: 1rem;
		font-weight: 500;
	}
	
	.video-one {
		position: relative;
		float: left;
		width: 49%;
		height: 100%;
		background: #00FFFF;
		margin-left: .5%;
	}
	
	.video-two {
		position: relative;
		float: left;
		width: 49%;
		height: 100%;
		background: #00FFFF;
		margin-left: 1%;
	}
	
	.right-alerm {
		position: absolute;
		right: 68px;
		bottom: 20px;
		height: 22%;
		width: 24%;
	}
	
	.right-alerm .right-alerm-title-content {
		position: relative;
		height: 25%;
		width: 100%;
	}
	
	.right-alerm-title {
		position: relative;
		font-size: 1.6rem;
		color: #FFFFFF;
		font-weight: 400;
		padding-top: .2rem;
		letter-spacing: .2rem;
		padding-left: .8rem;
	}
	
	.right-alerm-title-english {
		position: relative;
		font-size: 1.2rem;
		color: #FFFFFF;
		padding-left: .8rem;
	}
	
	.right-alerm-content {
		position: relative;
		height: 75%;
		width: 100%;
		overflow: hidden;
	}
	
	.mui-bottom-content {
		position: absolute;
		left: 2%;
		right: 2%;
		top: 4%;
		bottom: 4%;
	}
	
	.js-slide-list li {
		position: relative;
		width: 100%;
		height: 3rem;
	}
	
	.mui-bottom-num {
		position: relative;
		float: left;
		width: 1rem;
		height: 1rem;
		background: url(../img/normal.png);
		background-size: 100% 100%;
		margin-top: 1rem;
		margin-left: 1rem;
	}
	
	.mui-bottom-name {
		position: relative;
		float: left;
		height: 30px;
		width: 76%;
		font-size: 1rem;
		text-align: center;
		line-height: 3rem;
		color: #F5FD0A;
		font-weight: 500;
	}
	
	.mui-bottom-station {
		position: relative;
		float: left;
		height: 30px;
		width: 14%;
		font-size: 1rem;
		text-align: center;
		line-height: 3rem;
		color: #12DFFD;
		font-weight: 500;
	}
}

@media screen and (min-width: 1700px) {

        .amap-icon img{
            width: 40px;
            height: 40px;
        }
		

	.sys-title {
		position: absolute;
		left: 0;
		top: 30px;
		width: 50%;
		height: 60px;
	}

	.sys-title-left {
		position: relative;
		float: left;
		font-size: 3.6rem;
		font-weight: bold;
		color: #000000;
		line-height: 4.6rem;
		margin-left: 2.6rem;
	}

	.sys-title-right {
		position: relative;
		float: left;
		font-size: 2rem;
		font-weight: bold;
		color: #000000;
		line-height: 5.5rem;
		margin-left: .6rem;
		letter-spacing: .2rem;
	}

	.sys-title-english {
		position: absolute;
		left: 0;
		top: 90px;
		color: #000000;
		font-size: 1.2rem;
		margin-left: 2.8rem;
		font-weight: 600;
		line-height: 0.2rem;
		z-index: 999;
	}

	.sys-logo {
		position: absolute;
		right: 2.6rem;
		top: 30px;
		height: 60px;
		font-family: "微软雅黑";
		font-weight: bold;
		font-size: 3rem;
		color: #000000;
		line-height: 4.4rem;
	}

	.mui-left-mid-content {
		position: absolute;
		left: 68px;
		top: 220px;
		width: 14%;
		height: 50%;
	}

	.mui-left-child {
		position: relative;
		width: 100%;
		height: 20%;
	}

	.mui-left-child-img {
		position: relative;
		float: left;
		width: 46px;
		height: 46px;
		margin-left: 24px;
		margin-top: 20px;
	}

	.school {
		position: relative;
		background: url(../img/time_icon.png);
		background-size: 100% 100%;
	}

	.video {
		position: relative;
		background: url(../img/4.png);
		background-size: 100% 100%;
	}

	.student {
		position: relative;
		background: url(../img/1.png);
		background-size: 100% 100%;
	}

	.sensor {
		position: relative;
		background: url(../img/4.png);
		background-size: 100% 100%;
	}

	.article {
		position: relative;
		background: url(../img/3.png);
		background-size: 100% 100%;
	}

	.mui-left-child-div {
		position: relative;
		float: left;
		height: 100%;
		width: 50%;
		margin-left: 16px;
	}

	.mui-left-child-name {
		position: relative;
		width: 100%;
		height: 50%;
		text-align: center;
		font-size: 1.2rem;
		color: #FFFFFF;
		line-height: 5rem;
		font-weight: 200;
	}

	.mui-left-child-data {
		position: relative;
		width: 100%;
		height: 50%;
		text-align: center;
		font-size: 1.6rem;
		color: #FFFFFF;
		line-height: 1.6rem;
		font-weight: 600;
	}


	.left-mark-content {
		position: absolute;
		left: 68px;
		bottom: 40px;
		height: 10rem;
		width: 50%;
	}

	.left-mark-content-child {
		position: relative;
		width: 10rem;
		height: 6.4rem;
		margin-top: 2.2rem;
		float: left;
		animation: move 2.5s infinite;
		cursor: pointer;
	}

	.left-mark-other {
		margin-left: 2rem;
	}

	.left-mark-text {
		text-align: center;
		font-size: 1.26rem;
		color: #00DBFE;
		font-weight: 500;
	}

	.left-mark-icon {
		position: relative;
		width: 4rem;
		height: 4rem;
		background: url(../img/littleblue.png);
		background-size: 100% 100%;
		margin-left: 3rem;
		margin-top: .4rem;
	}

	.c-room {
		background: url(../img/location_bg.png);
		background-size: 100% 100%;
	}

	.c-room-text {
		color: #07F8AA;
	}

	.future-room {
		background: url(../img/orange.png);
		background-size: 100% 100%;
	}

	.future-room-text {
		color: #FDBC02;
	}


	.alerm-room-text {
		color: #FA0101;
	}

	.alerm-room {
		background: url(../img/alerm_bg.png);
		background-size: 100% 100%;
	}

	.all-room-text{
		color:#0089F1;
	}
	
	.all-room {
		background: url(../img/bule.png);
		background-size: 100% 100%;
	}
	

	.right-video {
		position: absolute;
		right: 68px;
		top: 120px;
		width: 24%;
		height: 59%;
	}

	.right-video-title-content {
		position: relative;
		width: 100%;
		height: 12%;
	}

	.right-video-title {
		position: relative;
		font-size: 2rem;
		color: #FFFFFF;
		font-weight: 400;
		padding-top: .8rem;
		letter-spacing: .2rem;
		padding-left: .8rem;
	}

	.right-video-title-english {
		position: relative;
		font-size: 1.2rem;
		color: #FFFFFF;
		padding-left: .8rem;
		line-height: 3rem;
	}

	.right-video-croom {
		position: relative;
		width: 100%;
		height: 44%;
	}

	.right-video-growth {
		position: relative;
		width: 100%;
		height: 44%;
	}


	.video-content {
		position: relative;
		width: 50%;
		height: 100%;
		float: left;
	}

	.video-content-code {
		position: relative;
		width: 100%;
		height: 14%;
		color: #FFFFFF;
		font-size: 1.2rem;
		padding-left: .8rem;
		padding-top: .8rem;
		font-weight: 600;
	}

	.video-content-monitor {
		position: relative;
		width: 96%;
		height: 74%;
		margin-left: 2%;
		background: #222222;
	}

	.video-content-title-icon {
		position: relative;
		width: 100%;
		height: 12%;
	}

	.video-content-icon {
		position: relative;
		float: left;
		width: 1rem;
		height: 1rem;
		background: url(../img/normal.png);
		background-size: 100% 100%;
		margin-top: .5rem;
		margin-left: .8rem;
	}

	.video-content-title {
		position: relative;
		float: left;
		margin-left: .6rem;
		color: #FFFFFF;
		font-size: 1.2rem;
		font-weight: 500;
	}

	.video-one {
		position: relative;
		float: left;
		width: 49%;
		height: 100%;
		background: #00FFFF;
		margin-left: .5%;
	}

	.video-two {
		position: relative;
		float: left;
		width: 49%;
		height: 100%;
		background: #00FFFF;
		margin-left: 1%;
	}

	.right-alerm {
		position: absolute;
		right: 68px;
		bottom: 40px;
		height: 24%;
		width: 24%;
	}

	.right-alerm .right-alerm-title-content {
		position: relative;
		height: 25%;
		width: 100%;
	}

	.right-alerm-title {
		position: relative;
		font-size: 2rem;
		color: #FFFFFF;
		font-weight: 400;
		padding-top: .4rem;
		letter-spacing: .2rem;
		padding-left: .8rem;
	}

	.right-alerm-title-english {
		position: relative;
		font-size: 1.2rem;
		color: #FFFFFF;
		padding-left: .8rem;
	}

	.right-alerm-content {
		position: relative;
		height: 75%;
		width: 100%;
		overflow: hidden;
	}

	.mui-bottom-content {
		position: absolute;
		left: 2%;
		right: 2%;
		top: 4%;
		bottom: 4%;
	}

	.js-slide-list li {
		position: relative;
		width: 100%;
		height: 4rem;
	}

	.mui-bottom-num {
		position: relative;
		float: left;
		width: 1.4rem;
		height: 1.4rem;
		background: url(../img/normal.png);
		background-size: 100% 100%;
		margin-top: 1.3rem;
		margin-left: 1rem;
	}

	.mui-bottom-name {
		position: relative;
		float: left;
		height: 30px;
		width: 76%;
		font-size: 1.2rem;
		text-align: center;
		line-height: 4rem;
		color: #F5FD0A;
		font-weight: 500;
	}

	.mui-bottom-station {
		position: relative;
		float: left;
		height: 30px;
		width: 14%;
		font-size: 1.4rem;
		text-align: center;
		line-height: 4rem;
		color: #12DFFD;
		font-weight: 500;
	}

}

@keyframes move {
	0% {
		transform: translateY(0);
		-ms-transform: translateY(0);
		-webkit-transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
		-ms-transform: translateY(-10px);
		-webkit-transform: translateY(-10px);
	}

	100% {
		transform: translateY(0);
		-ms-transform: translateY(0);
		-webkit-transform: translateY(0);
	}

}