@charset "utf-8";

.board-notice	{ width: 264px; padding: 10px; margin: 0 auto; text-align: center; box-sizing: border-box; }

.avocado-list	{
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
}

.avocado-list li	{
	display: block;
	position: relative; 
	padding: 5px 0; 
	margin-bottom:1px;
} 
.avocado-list li.bo_notice	{  }
.avocado-list li.no-data	{ 
	text-align: center;
	line-height: 200px;
}
.avocado-list li .td_chk { position:absolute; padding-left:5px;line-height: 35px;z-index:10;}
.avocado-list li a	{
	display: block;
	position: relative;
	padding: 0px 200px 0px 120px;
	line-height: 35px;
}
.avocado-list li strong	{
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.avocado-list li strong .highlight {font-weight:normal;}
.avocado-list li strong .cnt_cmt:before	{ content: "( "; }
.avocado-list li strong .cnt_cmt:after	{ content: " )"; }

.avocado-list li .ico-cate	{
	display: block;
	position: absolute;
	top: 0; 
	left: 20px;
	width: 100px;
	text-align: center;
}
.avocado-list li .name	{
	display: block;
	position: absolute;
	top: 0;
	right: 100px;
	width: 100px;
	text-align: center;
	opacity: .6;
	font-size: 11px;
}
.avocado-list li .date	{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 100px;
	text-align: center;
	opacity: .6;
	font-size: 11px;
}
.avocado-list li .hit	{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	text-align: center;
	opacity: .6;
	font-size: 11px;
}



.bo_fx {position:relative;padding:20px 0;}
.bo_fx .chk_all{ position:absolute;left:5px;top:20px;}



.board-category	{
	display: block;
	position: relative;
	margin-bottom: 10px; 
	
}
.board-category select	{

}

@media all and (max-width: 640px) {
#bo_v_con * {max-width:100%;}

	.board-category	{
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 0 10px;
	}
	.board-category select	{
		width: 100%;
	}

	.bo_fx	{
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 20px 10px !important;
	}
	.bo_fx a	{
		display: block;
		width: 100%;
	}
}



.board-write	{  padding: 0 10px; }

.board-write h3	{
	font-size: 26px;
	text-align: center;
	padding: 30px 0 20px;
} 
.board-write .write-notice	{
	padding: 10px;
	font-size: 11px;
}
.board-write > dl {position:relative;}
.board-write > dl > dt { width:70px;position:absolute;line-height:32px;text-align:center; }
.board-write > dl > dd { width:100%;margin-left:0;padding-left:80px;box-sizing:border-box;line-height:32px;}
.board-write input.frm_input.full	{ width: 100%; display:block;margin:1px 0;}




.board-viewer.theme-box	{
	display: block;
	position: relative;
	padding: 20px;
}

.board-viewer .subject	{
	text-align: center;
}
.board-viewer .subject em	{
	display: block;
	position: relative;
	font-size: 14px;
	line-height: 1.2em;
	padding-bottom: 10px;
}
.board-viewer .subject strong	{
	display: block;
	position: relative;
	font-size: 22px;
	line-height: 1.2em;
}

.board-viewer .info	{
	margin-top: 20px;
	padding: 8px 10px;
	text-align: center;
}
.board-viewer .info span	{ display: inline-block; opacity: .8; }
.board-viewer .info span + span:before	{
	content: "";
	display: inline-block;
	width: 1px;
	height: 8px;
	vertical-align: middle;
	margin: 0 10px;
}

.board-viewer .contents	{
	display: block;
	position: relative;
	margin: 50px 0;
	border-left-width: 0;
	border-right-width: 0;
}






#bo_v_bot	{ padding: 20px 0; overflow: hidden; }
.bo_v_nb	{ float: left; }
.bo_v_com	{ float: right; }


.board-comment-list			{ position: relative; }
.board-comment-list .co-line	{
	display: block;
	position: relative;
	clear: both;
	width: 100%;
	height: 1px;
	margin: 0;
	padding: 0;
	border: none;
}
.board-comment-list .item	{
	position: relative;
	padding: 10px 10px 10px 100px;
}
.board-comment-list .co-name	{
	position: absolute;
	top: 0px;
	left: 0;
	bottom: 0;
	width: 90px;
	padding: 10px 10px;
	box-sizing: border-box;
}
.board-comment-list .co-info {
	display: block;
	text-align: right;
	padding-top: 15px;
	font-size: 11px;
	opacity: .7;
}
.board-comment-list .co-info span	{ display: inline-block; opacity: .8; }
.board-comment-list .co-info span + span:before	{
	content: "";
	display: inline-block;
	width: 1px;
	height: 8px;
	vertical-align: middle;
	margin: 0 10px;
}

.board-comment-list .item.reply	{ border-left: 5px solid rgba(255, 255, 255, .1); }
.board-comment-list .item.reply .co-name	{
	background: none;
}


.board-comment-list + .board-comment-write	{
	margin-top: 20px;
}

.board-comment-form	{ 
	position: relative;
	padding-right: 80px;
}
.board-comment-form .btn_confirm	{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 29px;
	width: 80px;
}
.board-comment-form .btn_confirm .ui-btn	{
	width: 100%;
	height: 100%;
}
.board-comment-form p	{
	margin: 0;
	padding: 5px 10px;
}
.board-comment-form textarea	{ display: block; height: 100px; resize: none; border: none; }


@media all and (max-width: 640px) {

	.avocado-list li a	{
		line-height: 1.2em;
		padding: 15px 15px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.avocado-list li .ico-cate,
	.avocado-list li .name,
	.avocado-list li .date,
	.avocado-list li .hit	{
		position: relative;
		width: auto;
		left: auto;
		right: auto;
		bottom: auto;
		line-height: 1.2em;
	}

	.avocado-list li .info	{
		display: block;
		text-align: right;
		line-height: 1.0em;
		padding-top: 10px;
	}

	.avocado-list li .ico-cate	{ display: inline; }
	.avocado-list li .ico-cate:before	{ content: "[ "; }
	.avocado-list li .ico-cate:after	{ content: " ]"; }

	.avocado-list li strong	{ display: inline; line-height: 1.2em; }

	.avocado-list li .name,
	.avocado-list li .date,
	.avocado-list li .hit	{ display: inline; padding: 0 5px; }

	.board-comment-list .item	{ padding: 0; }
	.board-comment-list .co-name	{ position: relative; width: auto; padding: 5px 10px; }
	.board-comment-list .co-content	{ padding: 10px; word-break:break-all;}

    
    .board-viewer .contents {
        padding: 0;
    }
    .board-viewer.theme-box {
        padding: 0;
    }
}


/* 게시판 목록 */
.board-category	{
	float:left;height:30px;
	display: block;
	position: relative;margin: 10px 0; 
	
} 
#navi_category {padding-top: 30px;}
#navi_category ul {text-align:center;}
#navi_category li {display:inline-block; padding:5px 0;}
#navi_category li:before {display:inline-block; content:"";padding:0 15px;opacity:.6;}
#navi_category li:first-child:before {display:none;content:"";}
#navi_category #bo_cate_on {font-weight:bold;}
/* 갤러리 목록 */
#bo_gall {margin:0 auto;}
#bo_gall h2 {margin:0;padding:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#bo_gall #gall_ul {margin:10px 0;padding:0;list-style:none;}
#bo_gall #gall_ul:after {display:block;visibility:hidden;clear:both;content:""}
#bo_gall .gall_box {position:relative; padding:0;overflow:hidden;opacity:0.8;}
#bo_gall .gall_box:hover {opacity:1; transition: all ease .4s;}

#bo_gall .gall_li .gall_chk{position:absolute;bottom:0;left:0;right:0;}
#bo_gall .gall_li .gall_chk label{display:block;width:100%;padding:10px;box-sizing:border-box;}

.gall_row .col-gn-0,.gall_row .col-gn-1,.gall_row .col-gn-2,.gall_row .col-gn-3,.gall_row .col-gn-4,.gall_row .col-gn-5,.gall_row .col-gn-6,.gall_row .col-gn-7,.gall_row .col-gn-8,.gall_row .col-gn-9,.gall_row .col-gn-10{position:relative;min-height:1px;padding:5px;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-left:0;}
.gall_row .col-gn-0,.latest_row .col-gn-1{width:100%}
.gall_row .col-gn-2{width:50%}
.gall_row .col-gn-3{width:33.33333333%}
.gall_row .col-gn-4{width:25%}
.gall_row .col-gn-5{width:20%}
.gall_row .col-gn-6{width:16.66666667%}
.gall_row .col-gn-7{width:14.28571428%}
.gall_row .col-gn-8{width:12.5%}
.gall_row .col-gn-9{width:11.11111111%}
.gall_row .col-gn-10{width:10%}

.gall_row .box_clear{clear:both} 

#bo_gall .gall_con {width:100%;height:100%; }  
#bo_gall .bo_tit{display:block;font-weight:bold; width:100%;height:100%;padding:0 10px;box-sizing:border-box;text-align:center;} 
/* 게시판 목록 공통 */
#bo_btn_top{margin: 10px 0}
#bo_btn_top:after {display:block;visibility:hidden;clear:both;content:""}
.bo_fx {margin-bottom:5px;float:right; }
.bo_fx:after {display:block;visibility:hidden;clear:both;content:""}
.bo_fx ul {margin:0;padding:0;list-style:none} 
.bo_fx #chkall {display:inline-block;width:0;height:0;overflow:hidden;}
.bo_fx #chkall + label span {display:inline-block;font-size:12px;line-height:26px;} 
.bo_fx #chkall + label span:after {content:"선택";}
.bo_fx #chkall + label span.on:after{ content:"해제";}
.bo_fx ul {margin:0;padding:0;list-style:none} 

.btn_bo_user {float:right;margin:0;padding:0;list-style:none}
.btn_bo_user li {float:left;margin-left:5px}
.btn_bo_adm {float:left}
.btn_bo_adm li {float:left;margin-right:5px}
.btn_bo_adm input {padding:0 8px;border:0; text-decoration:none;vertical-align:middle}  
 
#bo_sch {float:left;}
#bo_sch:after {display:block;visibility:hidden;clear:both;content:""}
#bo_sch legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
#bo_sch select{border:0;height:28px;float:left;}
#bo_sch .sch_input{height:28px;border:0;padding:0 10px;float:left}
#bo_sch .sch_btn{ float:left; margin-top:-1px; }

#bo_gall li.empty_list {padding:85px 0;text-align:center} 
  
#bo_gall li.gall_li.bo_notice .gall_name,#bo_gall li.gall_li.bo_notice .gall_date{display:none;} 
#bo_gall li.gall_li.bo_notice,#bo_gall li.gall_li.bo_notice .gall_box ,#bo_gall li.gall_li.bo_notice .gall_con{display:block;width:100%;clear:both;}  
#bo_gall li.gall_li.bo_notice .bo_tit{padding:10px;height:auto;}
#bo_gall li.gall_li.bo_notice .gall_chk{left:auto;right:0;top:0;bottom:0;}  
#bo_gall li.gall_li.bo_notice .gall_box {opacity:1;}
#bo_gall .bo_notice .notice_icon{display:inline-block; width:20px;height:20px;line-height:18px;padding:0;margin-right:5px;font-style:normal;text-align:center;font-weight:bold;}
 
.pg_wrap{clear:both;}

/* 갤러리 뷰 */
#password_box {max-width:300px;margin:20px auto;position:relative;z-index:9999;}
#password_box p{padding:5px;}
#view_box{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.7);z-index:999;}
#view_box.on {display:block;}
#view_box .fix-layout {margin:0 auto;height:100%;}
#view_box #close_area{display:block;position:fixed;width:100%;height:100%;top:0;right:0;bottom:0;left:0;z-index:10;}
#view_area{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:90;}

#bo_v {position:relative;padding:20px 30px;box-sizing:border-box; overflow:auto;} 

#bo_v_top{position:absolute;width:100%;left:0;z-index:999;}
#bo_v_top:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_top h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_v_top ul {padding-right:20px;list-style:none;word-break:break-all}

#bo_v_info {padding:0 10px;}
#bo_v_info:after {display:block;visibility:hidden;clear:both;content:""} 
#bo_v_info h2 {font-size:15px;padding-bottom:5px;}
#bo_v_info strong {display:inline-block;margin:0 10px 0 0;font-weight:normal} 
#bo_v_info .if_date{margin:0;opacity:0.8;}

.bo_v_com { float:right; }
.bo_v_com li {float:left;margin-right:8px}

.bo_v_left { float:left}
.bo_v_left li {float:left;margin-right:5px}
 
#bo_v .bo_block {position:absolute;top:0;right:0;left:0;bottom:0;z-index:100;}

#bo_v_atc {min-height:100px;padding:30px 10px 10px; }  

#bo_v_con { width:100%; overflow:hidden} 
#bo_v_con img {max-width:100%;height:auto}
 
/* 툴팁 */


/* START TOOLTIP STYLES */
[tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: 12px; /* opinion 3 */
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */
  
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: 15px;
  box-shadow: 0 0.3em 1em -0.2em rgba(0, 0, 0, 0.8);
  background: #000;
    color: #fff;
  z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #000;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

/* FX All The Things */ 
[tooltip]:hover::before,
[tooltip]:hover::after{
  animation: tooltips-vert 300ms ease-out forwards;
}

#bo_v_img img {display: inline-block;}
#bo_v_img {
    text-align: center;
}