/*****************************
디자인편집 > 단구성관련 CSS
****************************/

/* 단들 */
.blockss {
	box-sizing: border-box;
	list-style: none;
	margin: 0;
	padding: 0;
	width:100%;
}
/* 1개의 단 */
.block {
	padding: 0px;
	margin: 0 0 0px;
	position: relative;
	display:block;
}

.block-placeholder {
	background: #DADADA;
	position: relative;
}

.block-placeholder:after {
	content: " ";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 15px;
	background-color: #FFF;
}


.blocks_menu {
	list-style: none;
	margin: 0;
	padding: 0;
	width:300px;
}


.block .contents_block .block_setting_bar {
	width:50px;
	background:#f6f6f8;
	text-align:center;
	position:absolute;
	top:0;
	bottom:0;
	left:0px;
	right:100%;
	z-index:1000;
}


/* 단 상하 구분선 */
.block .block_divide_bar{
	display:none;
	z-index:1;
	position:absolute;
	width:calc(100% - 50px);
	height:0px;
	left:0px;
	margin-left:0px;
	background-color:rgba(0,0,0,1);
	text-align:center;
	z-index:2999;
	font-size:0px;
}
.block .block_divide_bar_top{
	margin-top:-1px;
}
.block .block_divide_bar_bottom{
	margin-top:0px;
}

.block .new_block_plus{
	position:absolute;
	font-size:0px;
	top:-20px;
	left: 50%;
	margin-left:-22px;
	width:41px;
	padding:10px 0 9px 1px;
	background-color:rgba(255,255,255,1);
	border:1px solid #999999;
	cursor: pointer;
	display: inline-block;
	border-radius:50%;
	color:#999999;
	box-shadow:2px 3px 3px 0px rgba(0,0,0,0.1);
	transition: 0.4s ease-in-out;
	transition-duration: .2s;
	transition-property: border, color;
}

.block .new_block_plus_left, .block .new_block_plus_right{
	color:#ff0000;
	border:1px solid #ff0000;
}

.block .new_block_plus_left{
	margin-left:-67px;
}

.block .new_block_plus_right{
	margin-left:23px;
}

.block .new_block_plus:hover{
	color:var( --main-color-10 );
	border:1px solid var( --main-color-10 );
	transition: 0.4s ease-in-out;
	transition-duration: .2s;
	transition-property: border, color;
}

/* 단 좌우 경계선 */
.block .block_guide_bar{
	display:none;
	left:50%;
	z-index:4;
	position:absolute;
	width:0px;
	font-size:0px;
	box-sizing: border-box;
	border-left:1px dotted #ff0000;
}


.widget_setting_bar_view {
	display:block;
}

/* 위젯 영역의 최소, 최대 크기 지정 */
.widget_basic_size {
	min-width:20px;
	min-height:20px;
	max-width:3000px;
	max-height:50000px;
}
/* 위젯 영역의 최소, 최대 크기 지정(슬라이드배너용) */
.widget_basic_size_slidebanner {
	min-width:20px;
	min-height:20px;
	max-width:3000px;
	max-height:3000px;
}


.widget_basic_size_slidebanner .widget_hidden_wrap,
.widget_basic_size .widget_hidden_wrap {
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
}



/* 위젯 영역 */
.widget_area {
	position:relative;
	width:100%;
	height:100%;
	z-index:1;
}

.widget_base{
	padding:0px;
}

div[widget_use_type="middle_module"].widget_contents{
	position:relative !important;
	top:initial !important;
	bottom:initial !important;
	width:initial !important;
}

div[widget_use_type="editor"].widget_contents{
	position:relative !important;
	top:initial !important;
	bottom:initial !important;
	width:initial !important;
}

div[widget_use_type="footer_siteinfo"].widget_contents{
	position:relative !important;
	top:initial !important;
	bottom:initial !important;
	width:initial !important;
}


.widget_area:hover {
	z-index:2 !important;
}

.widget_area_border_view {
	background:rgba(56,153,236,0.05) !important;
	outline:1px solid rgba(56,153,236,0.2);
	outline-offset:-1px;
}

.widget_area_border_view_select {
	background:transparent !important;
	outline:1px solid rgba(56,153,236,1);
	outline-offset:-1px;
}


/*dalgo 모듈일 경우 위젯영역 선 및 배경색
.widget_area_border_view.module_area_border_view {
	background:rgba(168,56,236,0.05) !important;
	outline:1px solid rgba(210,56,236,0.2);
}

.widget_area_border_view_select.module_area_border_view_select {
	outline:1px solid rgba(210,56,236,1);
}


.widget_area_border_view.module_area_border_view .ui-resizable-handle.ui-resizable-s:after,
.widget_area_border_view.module_area_border_view .ui-resizable-handle.ui-resizable-e:after{
	border: 1px solid rgba(210,56,236,0.2);
}

.widget_area_border_view_select.module_area_border_view_select .ui-resizable-handle.ui-resizable-e:after,
.widget_area_border_view_select.module_area_border_view_select .ui-resizable-handle.ui-resizable-s:after {
	border: 1px solid rgba(210,56,236,1);
}
dalgo*/


.widget_area_border_view_select .widget_area_size{
	top:1px !important;
	left:1px !important;
	right:1px !important;
	bottom:1px !important;
}

.widget_border_view {
	background:rgba(255,0,0,0.05) !important;
}

/*dalgo*/
.widget_border_view.module_border_view {
	background:rgba(21,215,0,0.05) !important;
}
/*dalgo*/

.widget_border_view_select {
	background:transparent !important;
}



.widget_border_view .size_line_wrap,
.widget_border_view_select .size_line_wrap{
	position:absolute;
	left: 0px;
	right: 0px;
	top:0px;
	bottom:0px;
	z-index: 4;
}

.widget_border_view[widget_use_type="editor"] img,
.widget_border_view[widget_use_type="footer_siteinfo"] img,
.widget_border_view_select[widget_use_type="editor"] img,
.widget_border_view_select[widget_use_type="footer_siteinfo"] img
{
	max-width:100% !important;
	height:auto !important;
}

.widget_border_view[widget_use_type="header_menu"] .size_line_wrap,
.widget_border_view_select[widget_use_type="header_menu"] .size_line_wrap,
.widget_border_view[widget_use_type="header_editor"] .size_line_wrap,
.widget_border_view_select[widget_use_type="header_editor"] .size_line_wrap,
.widget_border_view[widget_use_type="middle_module"] .size_line_wrap,
.widget_border_view_select[widget_use_type="middle_module"] .size_line_wrap,
.widget_border_view[widget_use_type="middle_editor"] .size_line_wrap,
.widget_border_view_select[widget_use_type="middle_editor"] .size_line_wrap,
.widget_border_view[widget_use_type="middle_slidebanner"] .size_line_wrap,
.widget_border_view_select[widget_use_type="middle_slidebanner"] .size_line_wrap,
.widget_border_view[widget_use_type="middle_wsb"] .size_line_wrap,
.widget_border_view_select[widget_use_type="middle_wsb"] .size_line_wrap,
.widget_border_view[widget_use_type="middle_sub_menu"] .size_line_wrap,
.widget_border_view_select[widget_use_type="middle_sub_menu"] .size_line_wrap,
.widget_border_view[widget_use_type="editor"] .size_line_wrap,
.widget_border_view_select[widget_use_type="editor"] .size_line_wrap,
.widget_border_view[widget_use_type="footer_editor"] .size_line_wrap,
.widget_border_view_select[widget_use_type="footer_editor"] .size_line_wrap,
.widget_border_view[widget_use_type="footer_siteinfo"] .size_line_wrap,
.widget_border_view_select[widget_use_type="footer_siteinfo"] .size_line_wrap {
	display:none;
}

.widget_border_view .size_line_top,
.widget_border_view_select .size_line_top {
	position:absolute;
	height:1px;
	left: 0px;
	right: 0px;
	top:0px;
	z-index:4;
}

.widget_border_view .size_line_left,
.widget_border_view_select .size_line_left {
	position:absolute;
	width:1px;
	left: 0px;
	bottom: 0px;
	top:0px;
	z-index:4;
}

.widget_border_view .size_line_right,
.widget_border_view_select .size_line_right {
	position:absolute;
	width:1px;
	right: 0px;
	bottom: 0px;
	top:0px;
	z-index:4;
}

.widget_border_view .size_line_bottom,
.widget_border_view_select .size_line_bottom {
	position:absolute;
	height:1px;
	left: 0px;
	right: 0px;
	bottom:0px;
	z-index:4;
}

.widget_border_view .size_line_top,
.widget_border_view .size_line_left,
.widget_border_view .size_line_right,
.widget_border_view .size_line_bottom {
	background:rgba(255,190,190,1) !important;
}

.widget_border_view_select .size_line_top,
.widget_border_view_select .size_line_left,
.widget_border_view_select .size_line_right,
.widget_border_view_select .size_line_bottom {
	background:rgba(255,0,0,1) !important;
}




/*dalgo*/
.widget_border_view.module_border_view .size_line_top,
.widget_border_view.module_border_view .size_line_left,
.widget_border_view.module_border_view .size_line_right,
.widget_border_view.module_border_view .size_line_bottom {
	background:rgba(162,255,133,1) !important;
}

.widget_border_view_select.module_border_view_select .size_line_top,
.widget_border_view_select.module_border_view_select .size_line_left,
.widget_border_view_select.module_border_view_select .size_line_right,
.widget_border_view_select.module_border_view_select .size_line_bottom {
	background:rgba(33,139,0,1) !important;
}


.widget_border_view.module_border_view .ui-resizable-handle.ui-resizable-sw:after,
.widget_border_view.module_border_view .ui-resizable-handle.ui-resizable-se:after,
.widget_border_view.module_border_view .ui-resizable-handle.ui-resizable-nw:after,
.widget_border_view.module_border_view .ui-resizable-handle.ui-resizable-ne:after{
	border:1px solid rgba(162,255,133,1);
}

.widget_border_view_select.module_border_view_select .ui-resizable-handle.ui-resizable-sw:after,
.widget_border_view_select.module_border_view_select .ui-resizable-handle.ui-resizable-se:after,
.widget_border_view_select.module_border_view_select .ui-resizable-handle.ui-resizable-nw:after,
.widget_border_view_select.module_border_view_select .ui-resizable-handle.ui-resizable-ne:after {
	border:1px solid rgba(33,139,0,1);
}
/*dalgo*/







/* 위젯 스타일 편집 레이어의 위젯 스킨 선택 부분 */
.grid-item {
	text-align:left;
	background: #ffffff;
	cursor:pointer;
	box-shadow:0 2px 5px 0 rgba(0,0,0,0.1);
	margin-top:20px;
	position: relative;
}

.grid-item:first-child {
	margin-top:0px;
}

.grid-item .select_block_st:before {
	content:"";
	display:inline-block;
	border:1px solid #dadada;
	width: 100%;
	top:0;
	bottom:0px;
	position: absolute;
}

.select_inven_wrap:hover .select_block_st:before,
.grid-item:hover .select_block_st:before {
	content:"";
	display:inline-block;
	background-color: rgba(0,0,0,0.4);
	border:3px solid #686868;
	width:100%;
	top:0;
	bottom:0px;
	position: absolute;
}

.grid-item-selected .select_block_st:before {
	content:"";
	display:inline-block;
	background-color: rgba(0,0,0,0.4);
	border:3px solid var( --main-color-10 );
	width:100%;
	top:0;
	bottom:0px;
	position: absolute;
}

.grid-item-selected:hover .select_block_st:before {
	border:3px solid var( --main-color-10 );
}

.grid-item .select_block_st .select_block_icon {
	display:none;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -10px;
	margin-top: -10px;
	color:#ffffff;
	line-height:0;
}

.select_inven_wrap:hover .select_block_st .select_block_icon,
.grid-item:hover .select_block_st .select_block_icon,
.grid-item.grid-item-selected .select_block_st .select_block_icon
{
	display:block;
}

.grid-item--width2 { width: 400px; }


/* 내 단 디자인 선택/변경 보관함 */
.grid .select_inven_wrap{
	margin-top:25px;
	padding-top:25px;
	border-top:1px solid #e9e9e9;
	cursor:pointer;
}

.grid .select_inven_wrap:first-child{
	margin-top:0px;
	padding-top:0px;
	border-top:none;
}


.grid .select_inven_wrap .select_inven_info{
	display:flex;
	margin-top:10px;
}

.grid .select_inven_wrap .select_inven_info .title{
	flex:1;
	word-wrap:break-word;
	word-break:break-all;
	font-size:18px;
	color:#000000;
	line-height:1.3;
}

.grid .select_inven_wrap .select_inven_info .btn_st{
	width:60px;
	text-align:right;
}

.grid .select_inven_wrap .select_inven_date{
	margin-top:5px;
	font-size:14px;
	color:#999999;
}
/* 내 단 디자인 선택/변경 보관함 */




/* 단 선택시 작은 그림 */
.grid-block-img-small {
	max-width:100%;
	display:block;
	margin:0 auto;
}

/* 위젯 스타일 설정시 작은 그림 */
.grid-widget-img-small {
	max-width:100%;
	display:block;
	margin:0 auto;
}

/* 위젯 미리보기 레이어 */
.widget_preview_div_center {
	position: fixed; /* */
	background: #ffffff;
	left: 50%;
	top: 100px;
	transform: translate(-50%, 0%);
	width: 49%;
}

.div_border1px {
	border: 1px solid #dadada;
}


.mask, 
.mask2,
.mask3 {
	position:fixed;
	top:0px;
	bottom:0px;
	width:100%;
	background:rgba(0,0,0,0.5);/*dalgo배경*/
	z-index:3005;
	display:none;
}

/* 단 스타일편집, 단 속성편집 버튼 */
.block_setting_bar_position{
	position:absolute;
	top:100%;
	left:50%;
	margin-top:-10px;
}

/* 슬라이드 가로 크기 */
.slide_width {
	width:80%;
}

/* 단의 여백 크기중 마진에 대한 스타일 */
.custom-handle-margin
.custom-handle-margin-top
.custom-handle-margin-left
.custom-handle-margin-right
.custom-handle-margin-bottom {
	width: 3em;
	height: 1.6em;
	top: 50%;
	margin-top: -.8em;
	text-align: center;
	line-height: 1.6em;
}

/* 단의 여백 크기중 패딩에 대한 스타일 */
.custom-handle-padding
.custom-handle-padding-top
.custom-handle-padding-left
.custom-handle-padding-right
.custom-handle-padding-bottom {
	width: 3em;
	height: 1.6em;
	top: 50%;
	margin-top: -.8em;
	text-align: center;
	line-height: 1.6em;
}

.slider-range-color {
	background-color: #007fff;
}

/* 날짜 선택하는 아이콘 */
.inputbox_date_form {
	width: 80px;
	height: 28px;
	border : 1px solid #bdbdc0;
	background: #f3f3f3;
	line-height:27px;
	margin:2px 0;
	padding-left:5px;
}

/* 컬러피커용 */
.colorpicker_span1 {
	display: inline-block;
	border-radius: 12px;
	border: 1px solid #cacaca;
	cursor: pointer;
	width:18px;
	height:18px;
	margin-bottom: -6px;
}

/* 단 관리자모드 단 스타일 편집시 현재 선택된 단 카테고리 표시 */
.block_category_selected_ok {
	border:3px solid #ff0000;
}
.block_category_selected_no {
}


.sub_area_hover_st:hover{
	background:rgba(0,180,255,0.1) !important;
	outline: 1px solid #bde2ef;
	outline-offset: -1px;
	position:relative;
}

/* 위젯영역 가로,세로 크기표시 */
.wasi {
	display:none;
	background:rgba(0,0,0,0.5);
	padding:3px 7px;
	border-radius:5px;
	color:rgba(255,255,255,1);
	z-index:4001;
	width: max-content;
	font-size:14px;
}
/* 상단인 위젯영역 가로,세로 크기표시 포지션 */
.wasi_header {
	 position:absolute;
	 bottom:-35px;
	 left:0px;
}
/* 중단인 위젯영역 가로,세로 크기표시 포지션 */
.wasi_middle {
	position:absolute;
	top:-35px;
	left:0px;
}
/* 하단인 위젯영역 가로,세로 크기표시 포지션 */
.wasi_footer {
	position:absolute;
	top:-35px;
	left:0px;
}
/* 퀵메뉴인 위젯영역 가로,세로 크기표시 포지션 */
.wasi_quick {
	position:absolute;
	top:0px;
	/* right:calc(100px + 10px); */
}


/* 위젯 가로, 세로 크기표시 */
.wsi {
	display:none;
	background:rgba(0,0,0,0.5);
	padding:3px 7px;
	border-radius:5px;
	color:rgba(255,255,255,1);
	z-index:4001;
	width:max-content;
	font-size:14px;
}
/* 상단인 위젯 가로, 세로 크기표시 포지션 */
.wsi_header {
	position:absolute;
	bottom:-35px;
	left:0px;
}
/* 중단인 위젯 가로, 세로 크기표시 포지션 */
.wsi_middle {
	position:absolute;
	top:-35px;
	left:0px;
}
/* 하단인 위젯 가로, 세로 크기표시 포지션 */
.wsi_footer {
	position:absolute;
	top:-35px;
	left:0px;
}
/* 퀵메뉴인 위젯 크기표시 포지션 */
.wsi_quick {
	position:absolute;
	top:0px;
	/* right:calc(위젯크기px + 10px); */
}