@charset "utf-8";

/* 공정간 바노드 표현 height:calc(100vh - 125px); */
.lotArea {list-style:none; overflow-y:auto;}
	.lotArea ul {list-style:none; margin:0px;}
	.lotArea ul:after {content:'';display:block;clear:both;}
	.lotArea li {list-style:none; float:left;box-sizing:border-box;margin:2px 5px 2px 0px;cursor:pointer;}
	.lotArea li:hover {color:#447af9;}
	.lotArea li strong {padding: 2px 0px 0px 0px;display:inline-block;border:1px solid #d3d5db;box-sizing:border-box;}
	.lotArea dt {font-weight:bold;position:relative;padding-left:8px;box-sizing:border-box;margin:5px 0;}
	.lotArea dt:after {content:'';position:absolute;left:0;top:7px;width:3px;height:3px;background-color:#999;border-radius:50%;}
	.lotArea li strong {height:20px;min-width:80px;text-align:center;}
	.lotArea li span {vertical-align: bottom;display:inline-block;width:8px;height:20px;border:1px solid #d3d5db;}
	.lotArea li span:first-child {/* margin-right:-5px; */border-right:0;}
	.lotArea li span:last-child {/* margin-left:-5px; */border-left:0;}
	.lotArea li span.on {background:#447af9;}
	.lotArea li span.link {background:rgb(255,140,145) !important; }
	.lotArea li span.self {background:rgb(255,40,40) !important;
        animation-name: beat;
        animation-duration: 1s;
        animation-iteration-count:infinite;
    }
	.lotArea dt strong:after {content:':';margin-right:3px;padding-left:2px;}
	.lotArea dd {width:100%;}
	.lotArea .lot2Area {position:relative;width:100%;border:1px solid #f0f0f0;margin-bottom:10px;box-sizing:border-box;}
	.lotArea .lot2Area  div:not(.tr) {position:absolute;border:1px solid #d3d5db;background:#f0f0f0;
		display:flex;justify-content:center;align-items:center;
		background-repeat:no-repeat;background-size:cover;	}
	.lotArea .lot2Area  div img {width:100%;height:auto;}
	.lotArea .lot2Area  div.bgColor01 {background-color:#edf8ff;}
	.lotArea .lot2Area  div.bgColor02 {background-color:#def2ff;}
.lotArea .tr {position:absolute;top:-1px;right:-1px;background-color:rgb(255,255,255);
border:0px;width:10px;height:10px;cursor:pointer;
    border-bottom: 20px solid rgba(200,200,200,.8) !important;
    border-right: 20px solid white !important;
}

	
	
@keyframes beat {
    0% {
      transform: scale(1);/* rotate(0deg);*/
      /*background-color:rgb(255,80,90);*/
    }
    50% {
      transform: scale(0.7);/* rotate(-15deg);*/
      /*background-color:rgb(255,255,0);*/
    }
    100% {
      transform: scale(1);/* rotate(0deg);*/
      /*background-color:rgb(255,80,90);*/
    }
  }
/* 바노드 표현 */

.blk-area { display:flex; flex-wrap: wrap;}
.blk-area .blk {position:relative;border:1px solid red;width:100px;height:60px; margin:4px;cursor:pointer;
    box-shadow: 4px 4px 2px 0px rgba(164,88,88,.5);padding:22px 0px 0px 0px;text-align:center;border-radius: 10px;}
    
.blk-area .blk.self { box-shadow: 0px 0px 2px 5px rgba(255,255,88,.5); }

.blk-area .lt { position:absolute;top:0px;left:0px;background-color:rgba(255,255,255,.9);border:1px solid silver;width:50px;height:20px;cursor:pointer; }
.blk-area .rt { position:absolute;top:0px;right:0px;background-color:rgba(255,255,255,.9);border:1px solid silver;width:50px;height:20px;cursor:pointer; }
.blk-area .lb { position:absolute;bottom:0px;left:0px;background-color:rgba(255,255,255,.9);border:1px solid silver;width:50px;height:20px;cursor:pointer; }
.blk-area .rb { position:absolute;bottom:0px;right:0px;background-color:rgba(255,255,255,.9);border:1px solid silver;width:50px;height:20px;cursor:pointer; }

.blk-area .txt-input { width:100%;height:100%;border:0px; }

/*
*, *:before, *:after {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html,
body {
  width: 100%;
  height: 100%;
}
*/
.svg-project {
    /*width: 100%;
    height:100%;*/
  background-color: #f6f6f6;
  background-image:
    linear-gradient(90deg, #cdcccc 0px, #cdcccc 1px, transparent 1px, transparent 99px,  transparent 100px),
    linear-gradient(#cdcccc 0px, #cdcccc 1px, transparent 1px, transparent 99px,  transparent 100px),
    linear-gradient(#e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px,  transparent 100px),
    linear-gradient(90deg, #e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px,  transparent 100px),
    linear-gradient(transparent 0px, transparent 5px, #f6f6f6 5px, #f6f6f6 95px, transparent 95px, transparent 100px),
    linear-gradient(90deg, #e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, #e0e0e0 99px, #e0e0e0 100px),
    linear-gradient(90deg, transparent 0px, transparent 5px, #f6f6f6 5px, #f6f6f6 95px, transparent 95px, transparent 100px),
    linear-gradient(transparent 0px, transparent 1px, #f6f6f6 1px, #f6f6f6 99px, transparent 99px, transparent 100px),
    linear-gradient(#cdcccc, #cdcccc);
  background-size:100px 100%, 100% 100px, 100% 10px, 10px 100%, 100% 100px, 100px 100%, 100px 100%, 100px 100px, 100px 100px;
}