.save {
            margin-top: 15px;
        }
		.text{
			font-size: 1.7vw;
            background-color: #5BC0DE;
            margin-top: 2.2vw;
            color: white;
            border-radius: 0.4vw;
            border: white;
            padding: 10px 10px;
		}
        
		.toggleModal{
			padding: 10px 20px;
			color: white;
			background: #409EFF;
			border:none;
			box-shadow: 2px 3px 20px rgba(0,0,0,0.2);
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
		}
		.mask{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.4);
			z-index: 100;
			display: none;
		}
		#passW{
			/* width: 80px; */
			height: 22px;
            margin-left: 15%;
            margin-top: 22%;
}
		
		.modal{
			position: absolute;
			top: 50%;
			left: 50%;
			width: 310px;
			transform: translate(-50%,-50%);
			border-radius: 5px;
			background: #fff;
			box-shadow: 2px 3px 20px rgba(0,0,0,0.2);
			z-index: 120;
			display: none;
		}
		.modal .modal-header{
			/* height: 50px; */
			border-bottom: 1px solid #f5f5f5;
			padding: 0 15px;
		}
		.modal .modal-header p {
			line-height: 50px;
			/* display: inline-block; */
		}
		.modal .modal-header .title{	
			font-size: 16px;
            margin-left: 10%;
            margin-top: 0%;
            color: #333;
		}
		#close1{
			float: right;
			font-size: 26px;
			margin-top: -2px;
			color: #9C9FA4;
			cursor: default;
		}
		.modal .modal-content{
			min-height: 30px;
		}
		#close2{
			padding: -2px 25px;
			height: 28px;
			width: 46px;
			line-height: 30px;
			color: white;
			background: #409EFF;
			border: none;
			margin-top: 3%;
		}
		.modal .modal-footer{
			border-top: 1px solid #f5f5f5;
			padding: 8px;
			text-align: right;
		}
		.container::after{
			content:"";
			display: block;
			clear: both;
		}



		/* 这是匹配横屏的状态，横屏时的css代码　*/
		@media all and (orientation : landscape) {
			body {
				background-image: url("../img/seven.jpg");
				background-size: 100% 100%;
				background-attachment: fixed;
				-webkit-text-size-adjust: 100% !important;
			}

			/* 主体div */
			.container {
				min-width: 100vw;
				/* min-height: 0vw; */
			}

			@font-face {
				font-family: microsoft yahei;
				src: url("../css/digital-7-1.ttf");
			}

			.biaoti {
				position: relative;
				height: 30px;
			}

			/* 主标题 */
			.title {
				color: white;
				font-weight: bolder;
				font-size: 25px;
				position: absolute;
				margin-left: 50%;
				transform: translate(-50%, 0);
			}


			/* 时间 */
			.data {
				font-family: "微软雅黑";
				color: yellow;
				margin-left: 1vw;
				font-weight: bold;
				font-size: 2vw;
			}

			.time {
				font-family: "微软雅黑";
				color: yellow;
				font-weight: bold;
				font-size: 2vw;
				padding-top: 0vh;
				font-size: 18px;
				margin-top: -6px;
				position: absolute;
				left: 30px;
				top: 10px;
			}

			.time1 {
				font-family: "微软雅黑";
				color: yellow;
				font-weight: bold;
				font-size: 2vw;
				padding-top: 0vh;
				font-size: 18px;
				margin-top: -6px;
				position: absolute;
				right: 50px;
				top: 17.5px
			}

			.name {
				position: relative;
			}

			h1 {
				font-size: 2.5vw;
				color: white;
				position: absolute;
				top: -1.5vw;
				left: 5vw;
			}

			/* 包含4个大框的最外层div 即总体第二行 row */
			._div {
				padding-top: 1vh;
			}

			/* 4个div框 */
			/* .div_4{
        height: 41vh;
    } */

			/*几龄蚕室 title 字样*/
			.age-home-title {
				display: flex;
				color: white;
				font-weight: bolder;
				font-size: 3.6vw;
				height: 36px;
			}

			/*几龄蚕室 title 右边的蚕龄：多少天 字样*/
			.age-home-title span {
				font-family: "微软雅黑";
				color: yellow;
				font-weight: bolder;
				font-size: 22px;
			}

			/*几龄蚕室 title 右边的蚕龄：多少天 距离左边标题的距离*/
			.age-home-title span:nth-child(1) {
				margin-left: 1vw;
			}

			.wendu {
				color: #FF69B4;
				/* flex: 20%; */
				padding-left: 82px;
				width: 54px;
				height: 30px;
				margin-left: 9%;
			}

			.canlin {
				/* flex: 20%; */
				width: 113px;
				height: 30px;
				margin-left: 11%;
			}

			.can-age{
				margin-left: 0%;
			}

			.shidu {
				color: #00FFFF;
				/* flex: 20%; */
				width: 54px;
				height: 30px;
				margin-left: 14%;
			}

			.btn1 {
				/* flex: 4%; */
				width: 51px;
				height: 40px;
				margin-left: 28px;
				font-size: 5vw;
				background-color: #5CB85C;
				color: white;
				border-radius: 0.8vw;
				border: white;
				padding: 5px 5px;!important;
			}

			.shuzi {
				display: flex;
				height: 70px;
				align-items: center;
			}

			.btn2 {
				font-size: 2vw;
				background-color: #5BC0DE;
				margin-top: 2.2vw;
				color: white;
				border-radius: 0.4vw;
				border: white;
				padding: 10px 10px;
			}
      .btn3 {
				font-size: 2vw;
				background-color: #5BC0DE;
				margin-top: 2.2vw;
				color: white;
				border-radius: 0.4vw;
				border: white;
				padding: 10px 10px;
			}
			.number {
				font-family: microsoft yahei;
				font-size: 10vw;
				font-weight: bolder;
				color: red;
			}

			.wd1 {
				display: felx !important;
				width: 200px;
				display: flex;
				flex-direction: column;
				flex: 50%;
			}

			.sd1 {
				display: flex;
				flex-direction: column;
				flex: 50%;
			}

			.shu-left {
				flex: 1;
				margin-top: 24px;
			}

			.shu-right {
				flex: 1;
				margin-top: 24px;
			}

			#wdnum1 {
				color: #FF69B4;
			}

			#sdnum1 {
				color: #00FFFF;
			}

			.fuhao {
				display: flex;
				flex-direction: row;
			}

			.fuhao1 {
				flex: 1;
				margin-top: 15px;
			}

			.fuhao2 {
				flex: 1;
				margin-top: 15px;
			}

			.fuhao3 {
				flex: 1;
				margin-top: 15px;
			}

			.fuhao4 {
				flex: 1;
				margin-top: 15px;
			}

			.save {
				margin-top: 15px;
			}

			.jia1 {
				display: inline-block;
				margin-bottom: 20px;
			}

			.jia2 {
				display: inline-block;
				margin-bottom: 20px;
			}

			.jia3 {
				display: inline-block;
				margin-bottom: 20px;
			}

			.jia4 {
				display: inline-block;
				margin-bottom: 20px;
			}

			.jian1 {
				display: inline-block;
				margin-top: 20px;

			}

			.jian2 {
				display: inline-block;
				margin-top: 20px;

			}

			.jian3 {
				display: inline-block;
				margin-top: 20px;

			}

			.jian4 {
				display: inline-block;
				margin-top: 20px;

			}

			.pull-right {
				width: 6vh;
				height: 6vh;
			}

			.pull-left {
				width: 6vh;
				height: 6vh;
			}
			/*.yu{*/
			/*	display: flex;*/
			/*	align-items: center;*/
			/*}*/
			/*.ys{*/
			/*	display: felx !important;*/
			/*	display: flex;*/
			/*	flex-direction: row;*/
			/*	flex: 50%;*/
			/*}*/
			.num1 {
				margin-top: 20px;
				font-family: microsoft yahei;
				font-size: 3vw;
				font-weight: bolder;
				color: red;
				display: inline-block;
				vertical-align: top;
			}

			.num2 {
				margin-top: 20px;
				font-family: microsoft yahei;
				font-size: 3vw;
				font-weight: bolder;
				color: red;
				display: inline-block;
				vertical-align: top;
			}

			.num3 {
				margin-top: 20px;
				font-family: microsoft yahei;
				font-size: 3vw;
				font-weight: bolder;
				color: red;
				display: inline-block;
				vertical-align: top;
			}

			.num4 {
				margin-top: 20px;
				font-family: microsoft yahei;
				font-size: 3vw;
				font-weight: bolder;
				color: red;
				display: inline-block;
				vertical-align: top;
			}

			.right {
				margin-left: 16vw;
				display: inline-block;
				margin-top: -1vw;
			}

			.left {
				float: right;
				margin-right: 10vw;
				margin-top: -1vw;
			}

			.yushe1 {
				font-family: microsoft yahei;
				src: url("../css/digital-7-1.ttf");
				font-size: 3vw;
				display: inline-block;
				margin-top: 1vw;
				color: #FF69B4;
				margin-top: 35px;

			}
			.yushe2{
				font-family: microsoft yahei;
				src: url("../css/digital-7-1.ttf");
				font-size: 3vw;
				display: inline-block;
				margin-top: 1vw;
				color: #00FFFF;
				margin-top: 35px;

			}
			/*温度：  湿度： 字体*/
			.wd-font,
			.sd-font {
				color: white;
				font-weight: bolder;
				font-size: 2vw;
			}

			/*温度：  湿度： 单位符号字体*/
			.wsd-font-dw {
				display: inline-block;
				font-family: "微软雅黑";
				color: white;
				font-size: 4vw;
				flex: 1;
			}

			/*显示温湿度 下面的显示4个继电器状态的div 加温、加湿、照明、排气 那一行div*/
			.jdq-row {
				margin-top: -4vh;
			}

			/*温湿度那一行*/
			.wsd-row {
				margin-top: 2.4vh;
			}

			/*温湿度那一行  最左边的温度二字 距离左边边框距离*/
			.wd-font-left {
				padding-left: 1vw
			}

			/*加温、加湿、照明、排气*/
			.btn-status {
				color: #00FF00;
				font-weight: bolder;
				font-size: 1.4vw;
			}

			/*加温、加湿、照明、排气 里面的div 这里是紧贴着的这几个汉子的div*/
			.btn-status div {
				margin-top: 4.5vh;
			}

			/* 蓝色半透明img外围div */
			.blue_div {
				height: 80vh;
				/*background-image: url(../img/div_bgfb.png);*/
				background-size: 100%;
				padding: 12px 12px 12px 12px;
				text-align: center;
			}

			/* 第3、4龄蚕室外围div */
			.row2 {
				padding-top: 2vh;
			}

			/* foot div */
			.foot_div {
				color: white;
				padding-top: 1.5vh;
			}

			.ys-wsd-zh {
				color: white;
				font-size: 1.4vw;
				font-weight: bolder;
				padding-top: 3vh;
			}

			.wd-ys,
			.sd-ys {
				font-size: 3vw;
				color: #00FF00;
				padding-left: 0vw;
				line-height: 8vh;
				height: 8vh;

			}

			.shangxian {
				font-size: 18px;
			}

			.btn-row {
				margin-top: 0vh;
			}

			.queding {
				margin-top: 2.5vh;
			}

			.tiao {
				display: flex;
				height: 5px;
				align-items: center;
			}

			.tiao1 {
				display: flex;
				flex-direction: column;
				flex: 25%;
			}

			.tiao2 {
				display: flex;
				flex-direction: column;
				flex: 25%;
			}

			.tiao3 {
				display: flex;
				flex-direction: column;
				flex: 25%;
			}

			.tiao4 {
				display: flex;
				flex-direction: column;
				flex: 25%;
			}

			.tiao1-xia {
				flex: 1;
				margin-top: 5px;
				padding-right: 40px;
			}

			.tiao2-shang {
				flex: 1;
				margin-top: 5px;
			}

			.tiao3-xia {
				flex: 1;
				margin-top: 5px;
			}

			.tiao4-shang {
				flex: 1;
				margin-top: 5px;
				padding-left: 35px;
			}

			.xian {
				color: white;
				width: 49px;
				height: 28px;
				writing-mode: tb-rl;
				margin-left: 2%;
				margin-top: 8%;
			}

			.btns {
				margin-top: 35px;
				display: flex;
				padding: 0;
			}

			.bt1 {
				flex: 1;
				border-radius: 1.4vw;
				margin-top: -3%;
				width: 40px;
				padding: 24px;
				padding: 24px 30px;
				height: 29px;
			}

			.btns button:nth-child(1) {
				margin-left: 20px !important;
			}

			.btns button:nth-child(4) {
				margin-right: 20px !important;
			}

			.btns button {
				border: 0;
				outline: none;
				margin-left: 80px;
				margin-top: -12px;
				height: 35px;
				width: 30px;
				color: white;
				background-color: rgba(255, 255, 255, 0.512);
				font-size: 15px;
			}

			.wenzi {
				display: none;
			}

		}

		/*　这是匹配竖屏的状态，竖屏时的css代码　*/
		@media all and (orientation : portrait) {
			body {
				background-image: url("../img/four.jpg");
				background-size: 100% 100%;
				background-attachment: fixed;
				background-repeat: no-repeat;
				-webkit-text-size-adjust: 100% !important;
			}

			.jia1 {
				margin-bottom: 20px;
			}

			.jia2 {
				margin-bottom: 20px;
			}

			.jia3 {
				margin-bottom: 20px;
			}

			.jia4 {
				margin-bottom: 20px;
			}

			.jian1 {
				margin-top: 20px;

			}

			.jian2 {
				margin-top: 20px;

			}

			.jian3 {
				margin-top: 20px;

			}

			.jian4 {
				margin-top: 20px;

			}

			/* 主体div */
			.container {
				/*min-width: 100vw;*/
				/* min-height: 0vw; */
			}

			@font-face {
				font-family: microsoft yahei;
				src: url("../css/digital-7-1.ttf");
			}

			.biaoti {
				position: relative;
				height: 30px;
			}

			/* 主标题 */
			.title {
				color: white;
				font-weight: bolder;
				font-size: 32.5px;
				position: absolute;
				margin-left: 50%;
				margin-top: 15px;
				transform: translate(-50%, 0);
			}


			/* 时间 */
			.data {
				font-family: "微软雅黑";
				color: yellow;
				margin-left: 1vw;
				font-weight: bold;
				font-size: 2vw;
			}

			.time {
				font-family: "微软雅黑";
				color: yellow;
				font-weight: bold;
				font-size: 2vw;
				padding-top: 0vh;
				font-size: 17px;
				position: absolute;
				top: 10px;
				margin-left: 23%;
				margin-top: 65px;
				transform: translate(-50%, 0);
			}

			.time1 {
				font-family: "微软雅黑";
				color: yellow;
				font-weight: bold;
				font-size: 2vw;
				padding-top: 0vh;
				font-size: 17px;
				margin-top: 85px;
				position: absolute;
				margin-left: 63%;
				margin-top: 74px;
				/*transform: translate(-50%, 0);*/
			}

			.name {
				position: relative;
			}

			h1 {
				font-size: 2.5vw;
				color: white;
				position: absolute;
				top: -1.5vw;
				left: 5vw;
			}

			/* 包含4个大框的最外层div 即总体第二行 row */
			._div {
				padding-top: 1vh;
			}

			/* 4个div框 */
			/* .div_4{
        height: 41vh;
    } */

			/*几龄蚕室 title 字样*/
			.age-home-title {
				/*display: flex;*/
				color: white;
				font-weight: bolder;
				font-size: 3.6vw;
				height: 52px;
				padding-top: 10vh;
			}

			/*几龄蚕室 title 右边的蚕龄：多少天 字样*/
			.age-home-title span {
				font-family: "微软雅黑";
				color: yellow;
				font-weight: bolder;
				font-size: 20px;
				margin-top: 33%;
				margin-left: -12%;
			}

			/*几龄蚕室 title 右边的蚕龄：多少天 距离左边标题的距离*/
			.age-home-title span:nth-child(1) {
				margin-left: 0vw;
			}

			.wendu {
				color: #FF69B4;
				/* flex: 20%; */
				margin-top: 25%;
				width: 46px;
				height: 26px;
				margin-left: 15%;
			}

			.canlin {
				/* flex: 20%; */
				margin-top: 25%;
				width: 83px;
				height: 26px;
				margin-left: 8%;
			}

			.can-age{

				margin-top: 25%;
			}

			.shidu {
				color: #00FFFF;
				margin-top: 25%;
				/* flex: 20%; */
				width: 46px;
				height: 26px;
				margin-left: 16%;
			}

			.btn1 {
				/* flex: 4%; */
				margin-top: 25%;
				/*margin-right: 25%;*/
				/*right: 20%;*/
				/*padding-right: 20%;*/
				width: 54px;
				height: 40px;
				margin-left: 62px;
				font-size: 4vw;
				background-color: #5CB85C;
				color: white;
				border-radius: 0.8vw;
				border: white;
			}


			.shuzi {
				display: flex;
				height: 165px;
				align-items: center;
			}
            /*.yu{*/
	        /*   display: flex;*/
	        /*   align-items: center;*/
			/*}*/
			/*.ys{*/
			/*	display: felx !important;*/
			/*	display: flex;*/
			/*	flex-direction: row;*/
			/*	flex: 50%;*/
			/*}*/
			.btn2 {
				font-size: 5vw;
				background-color: #5BC0DE;
				margin-top: 11vw;
				color: white;
				border-radius: 0.4vw;
				border: white;
				padding: 10px 10px;
			}

			.number {
				font-family: microsoft yahei;
				font-weight: bolder;
				color: red;

			}

			.wd1 {
				display: felx !important;
				width: 200px;
				display: flex;
				flex-direction: column;
				flex: 50%;
			}

			.sd1 {
				display: flex;
				flex-direction: column;
				flex: 50%;
			}

			.shu-left {
				flex: 1;
				margin-top: 24px;
			}

			.shu-right {
				flex: 1;
				margin-top: 24px;
			}

			#wdnum1 {
				color: #FF69B4;
				font-size: 15vw;
			}

			#sdnum1 {
				color: #00FFFF;
				font-size: 15vw;
			}

			.fuhao {
				display: flex;
				flex-direction: row;
				margin-top: 2vh;
			}

			.fuhao1 {
				flex: 1;
				margin-top: 15px;
				margin-left: 0%;
				text-align: center;
			}

			.fuhao2 {
				flex: 1;
				margin-top: 15px;
				margin-left: 0%;
				text-align: center;
			}

			.fuhao3 {
				flex: 1;
				margin-top: 15px;
				text-align: center;
				/*margin-left: 10%;*/
			}

			.fuhao4 {
				flex: 1;
				margin-top: 15px;
				text-align: center;
				/*margin-left: 5%;*/
			}

			.save {
				margin-top: 15px;
			}

			.jia {
				display: inline-block;
				margin-bottom: 20px;
			}

			.jian {
				display: inline-block;
				margin-top: 20px;

			}

			.pull-right {
				width: 4vh;
				height: 4vh;
			}

			.pull-left {
				width: 4vh;
				height: 4vh;
			}

			.num1 {
				margin-top: 0px;
				font-family: microsoft yahei;
				font-size: 6vw;
				font-weight: bolder;
				color: red;
				display: inline-block;
				vertical-align: top;
			}

			.num2 {
				margin-top: 0px;
				font-family: microsoft yahei;
				font-size: 6vw;
				font-weight: bolder;
				color: red;
				display: inline-block;
				vertical-align: top;
			}

			.num3 {
				margin-top: 0px;
				font-family: microsoft yahei;
				font-size: 6vw;
				font-weight: bolder;
				color: red;
				display: inline-block;
				vertical-align: top;
			}

			.num4 {
				margin-top: 0px;
				font-family: microsoft yahei;
				font-size: 6vw;
				font-weight: bolder;
				color: red;
				display: inline-block;
				vertical-align: top;
			}

			.right {
				margin-left: 16vw;
				display: inline-block;
				margin-top: -1vw;
			}

			.left {
				float: right;
				margin-right: 10vw;
				margin-top: -1vw;
			}

			.yushe1 {
				font-family: microsoft yahei;
				font-size: 6vw;
				position: absolute;
				left: 7%;
				display: inline-block;
				margin-top: 1vw;
				color: #FF69B4;
				/* display: none; */
				margin-top: -5%;
			}
			.yushe2 {
				font-family: microsoft yahei;
				font-size: 6vw;
				position: absolute;
				right: 4%;
				display: inline-block;
				margin-top: 1vw;
				color: #00FFFF;
				/* display: none; */
				margin-top: -5%;

			}
			/*温度：  湿度： 字体*/
			.wd-font,
			.sd-font {
				color: white;
				font-weight: bolder;
				font-size: 2vw;
			}

			/*温度：  湿度： 单位符号字体*/
			.wsd-font-dw {
				display: inline-block;
				font-family: "微软雅黑";
				color: white;
				font-size: 4vw;
				flex: 1;
				/* font-size: 25px; */
			}

			/*显示温湿度 下面的显示4个继电器状态的div 加温、加湿、照明、排气 那一行div*/
			.jdq-row {
				margin-top: -4vh;
			}

			/*温湿度那一行*/
			.wsd-row {
				margin-top: 2.4vh;
			}

			/*温湿度那一行  最左边的温度二字 距离左边边框距离*/
			.wd-font-left {
				padding-left: 1vw
			}

			/*加温、加湿、照明、排气*/
			.btn-status {
				color: #00FF00;
				font-weight: bolder;
				font-size: 1.4vw;
			}

			/*加温、加湿、照明、排气 里面的div 这里是紧贴着的这几个汉子的div*/
			.btn-status div {
				margin-top: 4.5vh;
			}

			 蓝色半透明img外围div
			.blue_div {
				height: 79vh;
				width: 94vw;
				background-image: url(../img/div_bgfb.png);
				background-repeat: no-repeat;
				background-size: 420%;
				padding: 12px 12px 12px 12px;
				text-align: center;
			}

			/* 第3、4龄蚕室外围div */
			.row2 {
				padding-top: 2vh;
			}

			/* foot div */
			.foot_div {
				color: white;
				padding-top: 1.5vh;
			}

			.ys-wsd-zh {
				color: white;
				font-size: 1.4vw;
				font-weight: bolder;
				padding-top: 3vh;
			}

			.wd-ys,
			.sd-ys {
				font-size: 3vw;
				color: #00FF00;
				padding-left: 0vw;
				line-height: 8vh;
				height: 8vh;

			}

			.shangxian {
				font-size: 18px;
			}

			.btn-row {
				margin-top: 0vh;
			}

			.queding {
				margin-top: 2.5vh;
			}

			.tiao {
				display: flex;
				height: 80px;
				align-items: center;
				margin-top: -20px;
			}

			.tiao1 {
				display: flex;
				flex-direction: column;
				flex: 25%;
			}

			.tiao2 {
				display: flex;
				flex-direction: column;
				flex: 25%;
			}

			.tiao3 {
				display: flex;
				flex-direction: column;
				flex: 25%;
			}

			.tiao4 {
				display: flex;
				flex-direction: column;
				flex: 25%;
			}

			.tiao1-xia {
				flex: 1;
				margin-top: 35px;
				padding-right: 12px;
			}

			.tiao2-shang {
				flex: 1;
				margin-top: 35px;
				padding-right: 33px;
			}

			.tiao3-xia {
				flex: 1;
				margin-top: 35px;
				padding-left: 27px;
			}

			.tiao4-shang {
				flex: 1;
				margin-top: 35px;
			}

			.xian {
				color: white;
				width: 42px;
				height: 27px;
				writing-mode: tb-rl;
			}

			.btns {
				margin-top: 7vh;
				display: flex;
				padding: 0;
			}

			.bt1 {
				flex: 1;
				border-radius: 1.4vw;
				width: 22px;
				padding: 10px;
				height: 31px;
				margin-top: -5%;
			}

			.btns button:nth-child(1) {
				margin-left: 5px !important;
			}

			.btns button:nth-child(4) {
				margin-right: 5px !important;
			}

			.btns button {
				border: 0;
				outline: none;
				margin-left: 30px;
				margin-top: 11px;
				height: 40px;
				width: 60px;
				color: white;
				background-color: rgba(255, 255, 255, 0.512);
				font-size: 15px;
			}

			.wenzi {
				/*font-size: 18px;*/
				font-family: microsoft yahei;
				color: yellow;
				font-weight: bolder;
				margin-top: 4vh;

				width: 235px;

			}

		}