@charset "UTF-8";
/**
 * SelectArea
 * @description : HTML 에서 영역을 선택하는 툴
 * @제한 : MIT 라이센스 + "공대여자는 예쁘다"를 나태낼 수 있어야만 사용할 수 있습니다.
 * @author : 공대여자
 * @site : www.mins01.com
 * @date :2018-11-12~
 */
.selectArea{
	line-height: 1em;padding:0;margin:0;
	width:403px; height: 300px;
	box-sizing: content-box;
	position: absolute; z-index: 10;
	left: 100px; top:100px;
}
.selectArea-box{
	padding:0;margin:0;
	width:403px; height: 300px;
	box-sizing: border-box;
	position: absolute; z-index: 20;
	left: 100px; top:100px;
}
.selectArea-box::before{
	content: "";
	position: absolute;
	z-index: 10;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	border: 1px dotted rgba(0,0,0,0.5);
	pointer-events: none;
}
.selectArea-info{
	position: absolute;z-index: 5;
	top:0px;left:0px;right:0px;bottom:0px;
	pointer-events: none;
}
.selectArea-move{
	position: absolute;z-index: 7;
	top:0px;left:0px;right:0px;bottom:0px;
	cursor: move;
}

.selectArea-info::before ,
.selectArea-info::after{
	position: absolute;
	top:0.5em;left:0.5em;
	content: "xy: " attr(data-x) "x" attr(data-y);
	white-space: nowrap;;
	pointer-events: none;
	background-color: rgba(0,0,0,0.5);color:#fff;
	display: block;
	border-radius: 4px; padding:0 0.2em;
}
.selectArea-info::after{
	top:auto;left:auto;right: 0.5em;bottom:0.5em;
	content: "size: "attr(data-w) "x" attr(data-h) ;
	white-space: nowrap;;
}

.selectArea-no-info .selectArea-info{
	display: none;
}
.selectArea-info-outer .selectArea-info::before{
	top:-1.5em;left:0.5em;
	z-index: -1;
}
.selectArea-info-outer .selectArea-info::after{
	bottom:-1.5em;right:0.5em;
	z-index: -1;
}
.selectArea-layout::before{
	content: "";
	position: absolute;z-index: 10;
	top:0px;left:0px;right:0px;bottom:0px;
	border:1px dashed rgba(0,0,0,0.5);
	pointer-events: none;

}
.selectArea-layout{
	position: absolute;z-index: 10;
	top:0px;left:0px;right:0px;bottom:0px;
}
@keyframes border-animation {
	0% {border-color: rgba(0,0,0,0.5);}
	50% {border-color: rgba(255,255,255,0.5);}
	100% {border-color: rgba(0,0,0,0.5);}
}
.selectArea-layout > *{
	position: absolute;
	top:0px;left:0px;right:0px;bottom:0px;
	width: 100%;
  height: 100%;
}
.selectArea-bg{
	/* width:800px;
	height: 600px; */
	box-sizing: border-box;
	background-color: transparent;
	position: absolute;z-index: 5;
	top:0;right:0;left:0;bottom:0;
	border:0px solid rgba(0,0,0,0.3);
	border-top-width:100px;
	border-left-width:100px;
	border-right-width:calc(800px - 100px - 403px);
	border-bottom-width:calc(600px - 100px - 300px);
}
.selectArea-no-bg > .selectArea-bg{
	display: none;
}
.selectArea-pointer{
	font-size: 1em;
	box-sizing: border-box;
	position:absolute;z-index: 20;
	width:1em;height:1em;
	border:1px solid rgba(0,0,0,0.5);
	background-color: #fff;
	margin: 0;padding: 0;
}
.selectArea-pointer:hover{
	background-color: #ccc;
}
.selectArea-pointer:focus{
	outline-width: 0;
}
.selectArea-pointer::before{
	position: absolute;
	top:0;left:0;right:0;bottom: 0;
	/* content: attr(data-index); */
	content: "";
	justify-content: center;  /* 가로 중앙 */
	align-items: center; /* 세로 중앙 */
	display: flex;
}

/*news*/
.selectArea-pointer[data-index="0"]{
	top:-0.5em;left:-0.5em;cursor: nw-resize;
	z-index: 25;
}
.selectArea-pointer[data-index="1"]{
	top:-0.5em;left:calc(50% - 0.5em);cursor: n-resize;
}
.selectArea-pointer[data-index="2"]{
	top:-0.5em;right:-0.5em;cursor: ne-resize;
}
.selectArea-pointer[data-index="3"]{
	top:calc(50% - 0.5em);right:-0.5em;cursor: e-resize;
	z-index: 23;
}
.selectArea-pointer[data-index="4"]{
	bottom:-0.5em;right:-0.5em;cursor: nw-resize;
	z-index: 30;
}
.selectArea-pointer[data-index="5"]{
	bottom:-0.5em;right:calc(50% - 0.5em);cursor: n-resize;
}
.selectArea-pointer[data-index="6"]{
	bottom:-0.5em;left:-0.5em;cursor: ne-resize;
}
.selectArea-pointer[data-index="7"]{
	top:calc(50% - 0.5em);left:-0.5em;cursor: e-resize;
}

.selectArea-no-pointers .selectArea-pointer{
	display: none;
}


.selectArea-pointer-lg .selectArea-pointer ,
.selectArea-pointer-lg .selectArea-info{
	font-size: 20px;
}
.selectArea-pointer-md .selectArea-pointer , 
.selectArea-pointer-md .selectArea-info{
	font-size: 14px;
}
.selectArea-pointer-sm .selectArea-pointer ,
.selectArea-pointer-sm .selectArea-info{
	font-size: 12px;
}
.selectArea-pointer-xs .selectArea-pointer , 
.selectArea-pointer-xs .selectArea-info{
	font-size: 8px;
}