/*@@@@@@@@@@@@@   가로 881이상 공 통 사 항   @@@@@@@@@@@@@@*/
@media all and ( min-width: 881px ) and (orientation: landscape){

	section{
		display: inline-block;
		width: calc(100% - 220px);;
		vertical-align: top;
		padding: 20px;
	}
	
	#border_form{
		/* color: black;  */
		font-size: 14px; 
		height: 615px;
		border:1px solid rgba(209,209,209,1.0);
		border-radius: 12px;
	}
	
	#tree_border{
		display: inline-block; 
		vertical-align: top; 
		padding: 10px;
		width: 10%;
		border-right: 1px solid #E5E5E5;
		height: 99%;
		overflow-y: auto;
		box-sizing: border-box;
		-moz-box-sizing: border-box; 
		-webkit-box-sizing: border-box;
	}
	
	#monitoring_border{
		/* color: black;  */
		padding: 10px;
		display: inline-block;
		font-size: 14px; 
		/* border-right: 1px solid #E5E5E5; */
		width: 89%;
		height: 99%;
		box-sizing: border-box;
		-moz-box-sizing: border-box; 
		-webkit-box-sizing: border-box;
	}
	
	#monitoring_form{
		/* color: black;  */
		margin-top: 5px;
		margin-bottom: 10px;
		height: 580px;
		padding: 5px;
		overflow-y:auto;
		box-sizing: border-box;
		-moz-box-sizing: border-box; 
		-webkit-box-sizing: border-box;
	}
	
	#function_border{
		display: inline-block; 
		vertical-align: top; 
		width: 0%;
		height: 96%;
	}
	
	#function_form1{
		/* color: black;  */
		margin-top: 5px;
		padding: 5px;
		font-size: 14px; 
		width: 100%;
		height: 58%;
		border-bottom: 1px solid #E5E5E5;
	}
	
	#function_form2{
		/* color: black;  */
		margin-top: 5px;
		padding: 5px;
		font-size: 14px; 
		width: 100%;
		height: 40%;
	}
	
	#menu2_sub1{
		width: 90%;
		background: #FFFFFF 0% 0% no-repeat padding-box;
		border-radius: 0px 20px 20px 0px;
		opacity: 1;
		color: black;
	}
	
	#menu2_text1{
		color: #000000;
	}
	
	.button1{
		border: 1px solid #008CFF;
		border-radius: 20px;
		text-align: center;
		opacity: 1;
		margin: 10px;
	}
	
	.button1 :hover{
		color:  black;
		background-color: rgba(0,140,255,0.15);
		border-radius: 20px;
		/* opacity: 0.15; */
		height: 100%;
		cursor: pointer;
	}
	
	.button1_small{
		width: 70px;
		border: 1px solid #008CFF;
		border-radius: 20px;
		margin-top: 5px;
		text-align: center;
		opacity: 1;
		display: inline-block;
	}
	
	.button1_small :hover{
		color:  black;
		background-color: rgba(0,140,255,0.15);
		border-radius: 20px;
		/* opacity: 0.15; */
		height: 100%;
		cursor: pointer;
	}
	
	#button_txt1{
		padding: 6px;
		font-size:14px;
	}
	
	#mask {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 999;
		background-color: #000000;
		display: none; }
	
	.layerpop {
		display: none;
		z-index: 1000;
		border: 2px solid #ccc;
		background: #fff;
		/* cursor: move;  */
	}
	
	.layerpop_area .popup_title {
		padding: 10px 10px 10px 10px;
		border: 0px solid #aaaaaa;
		background: #f1f1f1;
		color: #3eb0ce;
		font-size: 1.3em;
		font-weight: bold;
		line-height: 24px; }
	
	.layerpop_area .layerpop_close {
		width: 25px;
		height: 25px;
		display: block;
		position: absolute;
		top: 10px;
		right: 10px;
		/* background: transparent url('btn_exit_off.png') no-repeat; } */
	}
	.layerpop_area .layerpop_close:hover {
		/* background: transparent url('btn_exit_on.png') no-repeat; */
		cursor: pointer; }
	
	.layerpop_area .content {
		width: 96%;    
		margin: 2%;
		color: #828282; }
	
	}
	
	#title_txt{
		font-size: 16px;
		color: #000000;
		font-weight: bold;
		margin: 30px 10px 10px 10px;
	}
	
	#insert_title{
		font-size: 16px;
		color: #008CFF;
		font-weight: bold;
		margin-bottom: 5px;
	}
	
	.container_item{
		border:1px solid rgba(185, 185, 185, 1.0);
		border-radius: 3px;
		border-collapse: separate;
		width: 180px;
		height: 55px;
		text-align: center;
		margin: 5px;
		display: inline-block;
	}
	
	.title_item{
		/* opacity: 0.15; */
		/* cursor: pointer; */
		font-weight: bolder;
		text-align: center;
		padding: 5px;
		width: 50%;
		display: inline-block;
		overflow: hidden;
	}
	
	.select_custom{
		border: 1px solid #B9B9B9;
		color:#B9B9B9;
		border-radius: 3px;
		width: 13%;
		height: 100%;
		vertical-align: top;
	}
	
	.border_icon{
		width: 100px;
		height: 40px;
		border: 2px solid #008CFF;
		border-radius: 12px;
		position: relative;
		display: flex;
		padding: 5px;
		justify-content: space-around;
		align-items: center;
	}
	.border_icon img{
		width: 20%;
	}
	.border_icon span{
		font: 400 16px "Noto Sans KR";
	}
	
	.border_icon_txt{
		width: 25px;
		height: 25px;
		border: 1px solid #DF1212;
		border-radius: 50%; 
		background-color: #DF1212; 
		color: #FFFFFF;  
		right: 15px;
		top: -14px;
		text-align: center;
		font-size: 14px;
		padding: 4px;
		font-weight: bolder;
		position: relative;
		display: inline-block;
	}
	
	#total_border{
		border: 2px solid #008CFF;
		border-radius: 12px;
		vertical-align: bottom;
		background-color: #008CFF;
		display: inline-block;
		padding: 1px;
		margin-right: 20px;
	}
	
	#total_img {
		display: inline-block; 
		display: table-cell; 
		vertical-align: middle; 
		background-color: #FFFFFF;
		border-radius: 12px;
	}
	
	#total_txt{
		display: inline-block; 
		color: white; 
		font-size: 15px; 
		display: table-cell; 
		vertical-align: middle;
		padding-left: 5px;
		padding-right: 10px;
	}
	
	#total_device{
		border-radius: 12px;
		display: inline-block; 
		text-align: right;
		background-color: #FFFFFF; 
		color: #000; 
		font-size: 15px;
		width: 80px;
		padding-right: 3px;
		display: table-cell; 
		vertical-align: middle;
	}
	
	.status_gray{
		border: 1px solid #B9B9B9;
		border-radius: 20px;
		margin-top: 5px;
		text-align: center;
		color:#B9B9B9;
		opacity: 1;
	}
	
	.status_blue{
		border: 1px solid #008CFF;
		border-radius: 20px;
		margin-top: 5px;
		text-align: center;
		color: #008CFF;
		opacity: 1;
	}
	
	.status_red{
		border: 1px solid #D63F3F;
		border-radius: 20px;
		margin-top: 5px;
		text-align: center;
		color: #D63F3F;
		opacity: 1;
	}
	
	.container_item.active{
		/* background-color : #008CFF; */
		border: 2px solid black;
		opacity:0.5
	}
	
	#monitoring_form::-webkit-scrollbar {
		width: 10px;
	}
	#monitoring_form::-webkit-scrollbar-thumb {
	background-color: rgba(90,164,219);;
	border-radius: 10px;
	background-clip: padding-box;
	border: 2px solid transparent;
	/* opacity: 0.3; */
	}

	.right-contents-area {
		width: 1900px;
	}
	.device-list {
		width:100%;
		height: 100%;
	}
	.device-list li {
		width: 100%;
		height: 40px;
		font-size: 20px;
		background: rgb(228, 228, 228);
		margin-bottom: 6px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		border-radius: 5px;
		font:500 16px "Noto Sans KR";
	}
	.listActive {
		background: #01114c !important;
		color: white;
		border: none;
	}
	#monitoring_border {
		position: relative;
		/* overflow-y: auto; */
	}
	.map-wrap {
		width: 100%;
		height: 590px;
		/* position: absolute; left: 0px; top: 0px; */
	}

	.floor-device {
		display: grid;
		margin-bottom: 10px;
		grid-template-columns: 100px 1fr 1fr 1fr 1fr;
	}
	.item {
		height: 80px;
		border: solid 1px #dedede;
		border-collapse: collapse;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-left: 0px;
		font: 400 16px "Noto Sans KR";
		position: relative;
	}
	.item label{
		position: absolute;
		left: 0px;
		top: 0px;
		width: 100% ;
		height: 78px;
	}
	.item label input {
		width: 20px;
		height: 20px;
		margin-top: 28px;
		margin-left: 10px;
	}
	.item:nth-child(1){
		background: #dedede;
		border-radius: 5px 0px 0px 5px;
	}
	.item:nth-child(5), .item:nth-child(9){
		border-radius: 0px 5px 5px 0px;
	}
	.item:nth-child(6), .item:nth-child(7),.item:nth-child(8),.item:nth-child(9){
		border-top: 0px;
	}
	.item ul {
		width: 100%;
		height: 100%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.item img {
		width: 30%;
	}
	.item ul li {
		width: 33%;
		float: left; 
		text-align: center;
	}
	.item-row {
		height: 160px;
		grid-row: 1/3;
	}
	.map-point-list {
		width: 100%;
		height: 600px;
		position: relative;
	}
	.map-point-list li {
		width: 190px;
		height: 60px;
		background: rgb(255, 255, 255);
		border: solid 2px rgb(0, 245, 29);
		border-radius: 5px;
		position: absolute;
		
	}
	.map-point-list li label{
		position: absolute;
		width: 100%;
		height: 60px;
	}
	.map-device-checkbox {
		width: 10%;
		height: 100%;
		display: inline-block;
		margin-top: 0px;
	}
	.map-device-icon {
		width: 25%;
		vertical-align: top;
		display: inline-block;
		margin-left: 30px;
		margin-top: 10px;
	}
	.map-device-icon img {
		width: 60%;
	}
	.map-device-title-wrap {
		width: 50%;
		display: inline-block;
		vertical-align: top;
		font: bold 12px "Noto Sans KR";
		color: black;
		padding-top: 5px;
		text-align: center;
	}
	.map-device-title{
		width: 95px;
		height: 17px;
	}
	.map-device-status {
		width: 100%;
		height: 24px;
		background: white;
		border: solid 2px rgb(0, 245, 29);
		border-radius: 20px;
		margin-top: 5px;
	}
	.status-red {
		border: solid 2px rgb(255, 0, 0) !important;
	}
	.status-blue {
		border: solid 2px #008CFF !important;
	}
	.status-gray {
		border: solid 2px #808080 !important;
	}
	.status-green {
		border: solid 2px rgb(11, 223, 0) !important;
	}



	/*1층*/
	.floor1Map li:nth-child(1) {
		top: 160px; left: 110px;
	}
	

	.floor2Map li:nth-child(1) {
		top: 155px; left: 360px;
	}
	.floor2Map li:nth-child(2) {
		top: 365px; left: 800px;
	}

	.floor3Map li:nth-child(1) {
		top: 155px; left: 360px;
	}
	.floor3Map li:nth-child(2) {
		top: 130px; left: 630px;
	}
	.floor3Map li:nth-child(3) {
		top: 155px; left: 830px;
	}
	.floor3Map li:nth-child(4) {
		top: 250px; left: 400px;
	}
	.floor3Map li:nth-child(5) {
		top: 397px; left: 550px;
	}
	.floor3Map li:nth-child(6) {
		top: 275px; left: 800px;
	}
	.floor3Map li:nth-child(7) {
		top: 365px; left: 800px;
	}
	.floor3Map li:nth-child(8) {
		top: 255px; left: 1130px;
	}

	.floor4Map li:nth-child(1) {
		top: 155px; left: 360px;
	}
	.floor4Map li:nth-child(2) {
		top: 155px; left: 580px;
	}
	.floor4Map li:nth-child(3) {
		top: 365px; left: 580px;
	}
	.floor4Map li:nth-child(4) {
		top: 365px; left: 800px;
	}
	
	.floor5Map li:nth-child(1) {
		top: 155px; left: 360px;
	}
	.floor5Map li:nth-child(2) {
		top: 155px; left: 580px;
	}
	.floor5Map li:nth-child(3) {
		top: 365px; left: 580px;
	}
	.floor5Map li:nth-child(4) {
		top: 365px; left: 800px;
	}
	.floor5Map li:nth-child(5) {
		top: 365px; left: 1130px;
	}

	.floor6Map li:nth-child(1) {
		top: 155px; left: 360px;
	}
	.floor6Map li:nth-child(2) {
		top: 155px; left: 580px;
	}
	.floor6Map li:nth-child(3) {
		top: 365px; left: 580px;
	}
	.floor6Map li:nth-child(4) {
		top: 365px; left: 800px;
	}

	.floor7Map li:nth-child(1) {
		top: 155px; left: 360px;
	}
	.floor7Map li:nth-child(2) {
		top: 155px; left: 580px;
	}
	.floor7Map li:nth-child(3) {
		top: 365px; left: 580px;
	}
	.floor7Map li:nth-child(4) {
		top: 365px; left: 800px;
	}

	.floor8Map li:nth-child(1) {
		top: 155px; left: 360px;
	}
	.floor8Map li:nth-child(2) {
		top: 155px; left: 580px;
	}
	.floor8Map li:nth-child(3) {
		top: 365px; left: 580px;
	}
	.floor8Map li:nth-child(4) {
		top: 365px; left: 800px;
	}

	.floor9Map li:nth-child(1) {
		top: 170px; left: 170px;
	}
	.floor9Map li:nth-child(2) {
		top: 155px; left: 380px;
	}
	.floor9Map li:nth-child(3) {
		top: 365px; left: 800px;
	}

	
	.floor17Map li:nth-child(1) {
		top: 155px; left: 360px;
	}
	.floor17Map li:nth-child(2) {
		top: 155px; left: 560px;
	}
	.floor17Map li:nth-child(3) {
		top: 90px; left: 660px;
	}
	.floor17Map li:nth-child(4) {
		top: 155px; left: 760px;
	}
	.floor17Map li:nth-child(5) {
		top: 250px; left: 400px;
	}
	.floor17Map li:nth-child(6) {
		top: 365px; left: 550px;
	}
	.floor17Map li:nth-child(7) {
		top: 365px; left: 750px;
	}
	.floor17Map li:nth-child(8) {
		top: 365px; left: 950px;
	}

	.floor23Map li:nth-child(1) {
		top: 160px; left: 380px;
	}
	.floor23Map li:nth-child(2) {
		top: 250px; left: 400px;
	}
	.floor23Map li:nth-child(3) {
		top: 330px; left: 320px;
	}
	.floor23Map li:nth-child(4) {
		top: 365px; left: 640px;
	}
	.floor23Map li:nth-child(5) {
		top: 365px; left: 840px;
	}
	.floor23Map li:nth-child(6) {
		top:0px; left: 1000px;
	}
	.floor23Map li:nth-child(7) {
		top: 440px; left: 1070px;
	}
	
	


	/*B1층*/
	.floorB1Map li:nth-child(1) {
		top: 72px; left: 545px;
	}

	/*B3층*/
	#deviceFloor_1003 li:nth-child(1) {
		top: 65px; left: 250px;
	}
	#deviceFloor_1003 li:nth-child(2) {
		top: 140px; left: 235px;
	}
	#deviceFloor_1003 li:nth-child(3) {
		top: 260px; left: 940px;
	}

	/*B4층*/
	#deviceFloor_1004 li:nth-child(1) {
		top: 160px; left: 390px;
	}
	#deviceFloor_1004 li:nth-child(2) {
		top: 240px; left: 420px;
	}
	#deviceFloor_1004 li:nth-child(3) {
		top: 200px; left: 770px;
	}
	






	.contents-header-wrap {
		width: 100%;
		height: 49px;
		position: relative;
	}
	.header-icon {
		width: 400px;
		position: absolute;
		left: 0px;
		top: 0px;
		display: flex;
	}
	.header-icon>div {
		margin-right: 10px;
	}
	.header-state {
		width: 450px;
		position: absolute;
		right: 0px;
		top: -10px;
	}
	.header-state-list li {
		float: left;
		font: normal 16px "Noto Sans KR";
		color: black;
		margin-top: 10px;
		margin-right: 50px;
	}
	.header-state-list li:last-child {
		margin-right: 0px;
	}
	.header-state-list li div {
		width: 15px;
		height: 15px;
		float: left;
		margin-right: 15px;
		margin-top: 5px;
	}
	.header-btn {
		/* width: 850px; */
		position: absolute;
		right: 0px;
		top: -5px;     
			 
	}
	.header-btn-list li{
		float:left;
		
	}
	.door-btn {
		width: 150px;
		height: 30px;
		border: solid 1px #01114c;
		color: #01114c;
		font-weight: 600;
		background: white;
		border-radius: 20px;
		cursor: pointer;
		margin-top: 10px;
		margin-left:20px ;
	}
	.door-btn:hover {
		background: #01114c;
		color: white;
	}
	.log-div {
		height: 150px;
		border: 1px solid rgba(209,209,209,1.0);
		border-radius: 12px;
	}