* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            margin: 50px;
            background-color: #000;
        }

        .modal {
            margin: 20px;
        }

        .modal>.header {
            position: relative;
            height: 40px;
            margin: 0 190px;
        }

        .modal>.header::before {
            content: '';
            position: absolute;
            width: 190px;
            height: 100%;
            left: -190px;
            top: 0;
        }

        .modal>.header::after {
            content: '';
            position: absolute;
            width: 190px;
            height: 100%;
            right: -190px;
            top: 0;
        }

        .modal>.footer {
            position: relative;
            height: 40px;
            margin: 0 40px;
        }

        .modal>.footer::before {
            content: '';
            position: absolute;
            width: 40px;
            height: 100%;
            left: -40px;
            top: 0;
        }

        .modal>.footer::after {
            content: '';
            position: absolute;
            width: 40px;
            height: 100%;
            right: -40px;
            top: 0;
        }

        .modal>.content {
            position: relative;
			width:100%;
			padding:20px;
			height:100%;
        }
		.modal>.content1 {
		    position: relative;
			width:100%;
			padding:20px;
			height:100%;
		}
		.modal>.content2 {
		    position: relative;
			width:100%;
			padding:20px;
			height:100%;
		}
		.modal>.content3 {
		    position: relative;
			width:100%;
			padding:20px;
			height:100%;
		}
		.modal>.content4 {
		    position: relative;
			width:100%;
			padding:20px;
			height:100%;
		}
		/*地下一层状态*/

        /*  Ƥ�� */
        .modal>.header {
            background: url(./img/default/3.png) repeat-x 0 0
        }

        .modal>.header::before {
            background: url(./img/default/1.png) no-repeat 0 0
        }

        .modal>.header::after {
            background: url(./img/default/2.png) no-repeat 0 0
        }

        .modal>.footer {
            background: url(./img/default/8.png) repeat-x 0 0
        }

        .modal>.footer::before {
            background: url(./img/default/4.png) no-repeat 0 0
        }

        .modal>.footer::after {
            background: url(./img/default/5.png) no-repeat 0 0
        }

        .modal>.content {
            background: url(./img/new/bj.png) no-repeat;
            background-size: 100% 100%;
        }
		.modal>.content3 {
		    background: url(./img/new/bj3.png) no-repeat;
		    background-size: 100% 100%;
		}
		.modal>.content4 {
		    background: url(./img/new/bj4.png) no-repeat;
		    background-size: 100% 100%;
		}
		.modal>.content1 {
		    background: url(./img/new/bj1.png) no-repeat;
		    background-size: 100% 100%;
		}
		.modal>.content2 {
		    background: url(./img/new/bj2.png) no-repeat;
		    background-size: 100% 100%;
		}
        /* .modal>.content::before {
            background: url(./img/default/6.png) repeat-y 0 0
        }

        .modal>.content::after {
            background: url(./img/default/7.png) repeat-y 0 0
        } */

        .modal.modal-error>.header {
            background: url(./img/error/3.png) repeat-x 0 0
        }

        .modal.modal-error>.header::before {
            background: url(./img/error/1.png) no-repeat 0 0
        }

        .modal.modal-error>.header::after {
            background: url(./img/error/2.png) no-repeat 0 0
        }

        .modal.modal-error>.footer {
            background: url(./img/error/8.png) repeat-x 0 0
        }

        .modal.modal-error>.footer::before {
            background: url(./img/error/4.png) no-repeat 0 0
        }

        .modal.modal-error>.footer::after {
            background: url(./img/error/5.png) no-repeat 0 0
        }

        .modal.modal-error>.content {
            background: url(./img/error/9.png) repeat 0 0
        }

        .modal.modal-error>.content::before {
            background: url(./img/error/6.png) repeat-y 0 0
        }

        .modal.modal-error>.content::after {
            background: url(./img/error/7.png) repeat-y 0 0
        }


        .modal.modal-warning>.header {
            background: url(./img/error/3.png) repeat-x 0 0
        }

        .modal.modal-warning>.header::before {
            background: url(./img/error/1.png) no-repeat 0 0
        }

        .modal.modal-warning>.header::after {
            background: url(./img/error/2.png) no-repeat 0 0
        }

        .modal.modal-warning>.footer {
            background: url(./img/error/8.png) repeat-x 0 0
        }

        .modal.modal-warning>.footer::before {
            background: url(./img/error/4.png) no-repeat 0 0
        }

        .modal.modal-warning>.footer::after {
            background: url(./img/error/5.png) no-repeat 0 0
        }

        .modal.modal-warning>.content {
            background: url(./img/error/9.png) repeat 0 0
        }

        .modal.modal-warning>.content::before {
            background: url(./img/error/6.png) repeat-y 0 0
        }

        .modal.modal-warning>.content::after {
            background: url(./img/error/7.png) repeat-y 0 0
        }


        .tips {
            position: relative;
        }

        .tips>.header {
            position: relative;
            height: 30px;
            margin: 0 30px 0 80px;
        }

        .tips>.header::before {
            content: '';
            position: absolute;
            width: 80px;
            height: 100%;
            left: -80px;
            top: 0;
        }

        .tips>.header::after {
            content: '';
            position: absolute;
            width: 30px;
            height: 100%;
            right: -30px;
            top: 0;
        }

        .tips>.footer {
            position: relative;
            height: 30px;
            margin: 0 30px;
        }

        .tips>.footer::before {
            content: '';
            position: absolute;
            width: 30px;
            height: 100%;
            left: -30px;
            top: 0;
        }

        .tips>.footer::after {
            content: '';
            position: absolute;
            width: 30px;
            height: 100%;
            right: -30px;
            top: 0;
        }

        .tips>.content {
            position: relative;
            margin: 0 30px;
            font-size: 30px;
            color: #00f6ff;
            font-size: 36px;
        }

        .tips>.content::before {
            content: '';
            position: absolute;
            width: 30px;
            height: 100%;
            left: -30px;
            top: 0;
        }

        .tips>.content::after {
            content: '';
            position: absolute;
            width: 30px;
            height: 100%;
            right: -30px;
            top: 0;
        }

        /*  Ƥ�� */
        .tips>.header {
            background: url(./img/tips/3.png) repeat-x 0 0
        }

        .tips>.header::before {
            background: url(./img/tips/1.png) no-repeat 0 0
        }

        .tips>.header::after {
            background: url(./img/tips/2.png) no-repeat 0 0
        }

        .tips>.footer {
            background: url(./img/tips/8.png) repeat-x 0 0
        }

        .tips>.footer::before {
            background: url(./img/tips/4.png) no-repeat 0 0
        }

        .tips>.footer::after {
            background: url(./img/tips/5.png) no-repeat 0 0
        }

        .tips>.content {
            background: url(./img/tips/9.png) repeat 0 0
        }

        .tips>.content::before {
            background: url(./img/tips/6.png) repeat-y 0 0
        }

        .tips>.content::after {
            background: url(./img/tips/7.png) repeat-y 0 0
        }

        .info-header {
            position: relative;
            font-size: 36px;
            color: #fff;
            padding-bottom: 20px;
        }

        .info-header::after {
            content: '';
            display: block;
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 1px;
            background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, .5));
            box-shadow: 0 0 2px #fff;
        }

        .info-header .iconfont {
            font-size: 40px;
            margin-right: 10px;
        }

        .info-content ul {
            font-size: 30px;
            padding: 20px 0;
            color: #fff;
            line-height: 2;
        }

        .info-content span:nth-child(2) {
            color: #fff;
        }

        .info-footer {
            position: relative;
            padding: 20px 0 20px 0;
        }


        .info-footer::after {
            content: '';
            display: block;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            height: 1px;
            background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, .5));
            box-shadow: 0 0 2px #fff;
        }

        .info-error .info-header {
            color: #d21b1d;
        }

        .info-error .info-header::after,
        .info-error .info-footer::after {
            background: linear-gradient(to right, rgba(210, 27, 29, 1), rgba(210, 27, 29, .5));
            box-shadow: 0 0 2px #d21b1d;
        }

        .info-error .info-content ul {
            color: #d21b1d;
        }

        .info-warning .info-header {
            color: #fb7d22;
        }

        .info-warning .info-header::after,
        .info-warning .info-footer::after {
            background: linear-gradient(to right, rgba(251, 125, 34, 1), rgba(210, 27, 29, .5));
            box-shadow: 0 0 2px #fb7d22;
        }

        .info-warning .info-content ul {
            color: #fb7d22;
        }



        .btn {
            width: 185px;
            height: 50px;
            background: url(./img/btn.png) no-repeat 0 -53px;
            display: block;
            text-decoration: none;
            font-size: 30px;
            text-align: center;
            color: #fff;
            line-height: 50px;
            margin:0 auto;
        }

        .btn-info {
            background-position: 0 -108px;
        }

        .btn-warning {
            background-position: 0 -165px;
        }

        .btn-error {
            background-position: 0 0;
        }

        .modal-line {
            position: relative;
            padding-bottom: 53px;
        }

        .modal-line::before {
            position: absolute;
            content: '';
            display: block;
            width: 100px;
            height: 53px;
            /* background: url(./img/arrow.gif) no-repeat 0 0; */
            left: 50%;
            margin-left: -50px;
            bottom: 0;
        }

        .close {
            width: 53px;
            height: 50px;
            background: url(./img/close.png) no-repeat 0 0;
            display: block;
            position: absolute;
            top: -10px;
            right: -212px;
            z-index: 1;
        }

        .card {
            display: flex;
			font-size: 17px;
			color: #fff;
        }
		/* 整个滚动条 */
		::-webkit-scrollbar {
		  width: 5px;
		  position:relative;
		  top:5px;
		}
		::-webkit-scrollbar {
		  width: 5px;
		  height: 5px;
		  margin-top:5px;
		  position:relative;
		  top:5px;
		}
		/* 滚动条轨道 */
		::-webkit-scrollbar-track {
		  background-color: #f5f5f5;
		  border-radius: 10px;
		}
		.clear {
			clear: both;
		}
		
		.fontweight {
			font-weight: bold;
		}
		
		.content-top {
			width: 100%;
			line-height: 25px;
			color: #00c6ff;
			font-size: 19px;
		}
		
		.content-img {
			width: 25px;
			height: 25px;
			float: left;
			margin-right: 5px;
		}
		
		.content-top {
			width: 100%;
			line-height: 25px;
			color: #00c6ff;
			font-size: 19px;
		}
		
		.content-h {
			background: #00c6ff;
			height: 2px;
			width: 100%;
			margin: 15px auto;
		}
		
		.content-cent {
			height: 280px;
			width: 550px;
			margin-top: 15px;
			overflow: hidden;
			overflow-y: auto;
			font-size: 17px;
			position: relative
		}
		
		.content-over {
		}
		
		.content-li {
			background: url(/img/new/li-bj.png);
			background-size: 100% 100%;
			height: 180px;
			width: 250px;
			border-radius: 5px;
			float: left;
			margin-right: 15px;
			margin-bottom:15px;
		}
		
		.content-div {
			margin-top: 25px;
			margin-left: 15px;
			position: absolute;
			width: 250px;
		}
		
		.content-div-top {
			width: 60px;
			height: 60px;
			overflow: hidden;
			border-radius: 50%;
			margin-right: 5px;
			float: left;
		}
		
		.content-div-top-img {
			width: 60px;
			height: 60px;
			z-index: 10;
			float: left;
		}
		
		.content-div-top-div {
			background: #00eaff;
			height: 20px;
			width: 60px;
			z-index: 100;
			position: relative;
			top: -20px;
			text-align: center;
			color: #fff;
			line-height: 20px;
			font-size: 12px;
			float: left;
		}
		
		.content-div-top-div1 {
			background: #d27c00;
			height: 20px;
			width: 60px;
			z-index: 100;
			position: relative;
			top: -20px;
			text-align: center;
			color: #fff;
			line-height: 20px;
			font-size: 12px;
			float: left;
		}
		.zhongdianrenqun{
			background:url(/img/new/zhongdian.png);background-size:100% 100%;width:60px;color:#fff;text-align:center;font-size:10px;line-height:20px;height:22px;z-index:100000;padding-bottom:5px;
		}
		.content-div-top-div2 {
			background: #908f87;
			height: 20px;
			width: 60px;
			z-index: 100;
			position: relative;
			top: -20px;
			text-align: center;
			color: #fff;
			line-height: 20px;
			font-size: 12px;
			float: left;
		}
		
		.content-div-content {
			float: left;
			margin-left: 10px;
			color: #fff;
			line-height: 30px;
		}
		
		.content-div-content {
			float: left;
			margin-left: 10px;
			color: #fff;
			line-height: 30px;
		}
		
		.content-div-content-img {
			width:20px;height:20px;margin-left:5px;margin-top:6px;
		}
		.float-left{
			float:left;
		}
		.fontsize13{
			font-size:13px;
		}
		.content-div-content-p {
			margin-left:10px;color:#fff;font-size:14px;padding-top:15px;
		}
		.content-div-content-p1 {
			margin-left:10px;color:#fff;font-size:14px;padding-top:5px;
		}
		/* 滚动条滑块 */
		::-webkit-scrollbar-thumb {
		  background-color: #888;
		  border-radius: 10px;
		}
		
		/* 滚动条滑块悬停状态 */
		::-webkit-scrollbar-thumb:hover {
		  background-color: #555;
		}
		                        
        .card>div:nth-child(2) {
            font-size: 22px;
            color: #fff;
            margin-left: 20px;
            line-height: 1.8;
        }

        .card>div:nth-child(2) .title {
            color: #64a6f7;
        }
        #labelcontainer {
        	position:absolute;
			top: 11%;
			width: 20%;
			height: 1%;
			left:39%;
			z-index:1000;
		}
		#labelcontainer1 {
        	position:absolute;
			top: 25%;
			width: 580px;
			height: 1%;
			left:35%;
			z-index:1000;
		}
		/* #labelcontainer {
			position:absolute;
			top: 10px;
			width: 20%;
			height: 100%;
			right:0px;
			z-index:100;
		} */
		body {
			margin: 0;
			overflow: hidden;
		}

		#topmenu {
			position: absolute;
			top: 50px;
			width: 100%;
			padding: 10px;
			box-sizing: border-box;
			text-align: center;
			z-index: 201;
		}

		.label {
			position: absolute;
			padding: 4px;
			background: rgb(10, 145, 255);
			line-height: 1;
			border-radius: 6px;
			opacity: 0.5;
		}

		button {
			color: rgb(255, 255, 255);
			background: rgb(255, 255, 255, 0.1);
			border: 0px;
			padding: 10px 20px;
			margin: 2px;
			font-size: 24px;
			cursor: pointer;
		}

		button:hover {
			background-color: rgba(0, 255, 255, 0.5);
		}

		button:active {
			color: #000000;
			background-color: rgba(0, 255, 255, 1);
		}

		.bond {
			width: 5px;
			height: 10px;
			background: #eee;
			display: block;
		}