@charset "utf-8";

@font-face {
    font-family: 'PuradakGentleGothicR';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.1/PuradakGentleGothicR.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
	src: local('Material Icons'),
	  local('MaterialIcons-Regular'),
	  url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
	  url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
	  url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
  }

/* 갤러리 목록 */

#bo_gall {
	margin:0 auto;
}
 #gall_ul {
	display:grid;
	grid-template-columns:repeat(auto-fit, 200px);
	 justify-content:center;
	 align-items:center;
	gap: 10px;
	box-sizing:border-box;
	margin:0 auto;
	list-style:none;
	box-sizing:border-box;
	width:100%;
}

.gall_li{
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: start;
	width:auto;
	height:auto;
}

.gall_li .gall_box {
	position:relative; 
	padding:0;
	overflow:hidden;
	border-radius:3px;
	/*background-color:lightgrey;*/
}

.gall_li .gall_box .gall_content{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:0.8;
	display:flex;
	justify-content: center;
	align-items: center;
	font-size:40px;
	/*color:white;*/
	font-family: 'Material Icons'!important;
	cursor:default;
}

.gall_li .gall_box .gall_content:hover {
	opacity:1;
}
.gall_li .gall_box .gall_content a{
	width:80%;
	height:80%;
}
.gall_li .gall_chk{
	position:absolute;
	top:0;
	right:0;
}

.gall_li .gall_chk label{
	display:block;
	width:100%;
	padding:3px;
	box-sizing:border-box;
}

.gall_li .gall_con {
	width:100%;
}  

.bo_tit{
	font-family: 'PuradakGentleGothicR';
    box-sizing: border-box;
	display:block;
	height: 30px;
    padding: 7px 5px;
    text-align: center;
    font-size: 18px;
    /*color: white;*/
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
} 

@media all and (max-width : 450px){
	
	.gall_li{
		margin: 5px 4.5px;
	}
	
}

/* 갤러리 뷰 */
#view_area{
	width:100%;
	height:auto;
	min-height:100vh;
	position:relative;
}

.back{
	position:absolute;
	z-index:999;
	left:20px;
	top:10px;
	font-size:14px;
}

#bo_v {
	position:relative;
	box-sizing:border-box;
	/* min-height:90vh; */
	width:90%;
	margin:0px auto;
	padding-bottom: 100px!important;
	border-radius:5px;
	} 

#bo_v_top .bgm-player{
	text-align:center; 
	left:50%;
	transform:translateX(-50%); 
	display:block!important;
	position:absolute;

}

#bo_v_top .bgm-player ul{
	display:flex;
}

#bo_v_top .bgm-player ul li{
	width:auto;
	margin:0 2px;
}

.line{
	background-color: var(--point-color);
}

#gal_bgm_box{
	width: 0px;
    height: 0px;
    overflow: hidden;
}

#password_box {
	max-width:300px;
	margin:20px auto;
	position:relative;
	z-index:9999;
}

#password_box p{
	padding:5px;
}

.box-pw{
	display:flex;
	justify-content: center;
	align-items: center;
}

/* 갤러리 내부 글정보와 내비게이션
해당 부분은 대하님의 배포 게시판을 기반으로 수정했습니다.
https://extrashot.tistory.com/29?category=1074684
*/

#bo_v_top{position:relative; width:100%; left:0;}

#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 {position:absolute; bottom:5px; left:0px; padding:0 10px; width:98%; left:50%; transform:translateX(-50%); box-sizing: border-box;}
#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_nb {position:absolute;width:100%;top:50%;left:50%;height:50px;transform:translate(-50%, -50%);z-index:999;} 
.bo_v_nb .prev, .bo_v_nb .next{position:relative;display:block;width:50px;height:50px;line-height:50px;}
.bo_v_nb .prev {float:left}
.bo_v_nb .next {float:right;}
.bo_v_nb .prev:after {content:"<";}
.bo_v_nb .next:after {content:">";}
.bo_v_nb .prev:after, .bo_v_nb .next:after{position:absolute;top:0;display:block;width:100%;height:100%;font-size:35px;text-align:center;}
.bo_v_nb .prev span, .bo_v_nb .next span{display:inline-block;width:0;height:0;white-space:nowrap;overflow:hidden;}

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

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


/* 게시판 목록 공통
해당 부분은 아보카도 기본 배포 게시판의 것을 사용했습니다.
*/
#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;margin-bottom:2px;}
.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_gall li.empty_list {padding:30px 0;text-align:center; width:100%; box-sizing:border-box;} 
  
#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;}

/* 게시판 목록 공통
해당 부분은 아보카도 기본 배포 게시판의 것을 사용했습니다.
*/

#bo_w .write_div{margin:10px 0;position:relative}
#bo_w .bo_w_info:after {display:block;visibility:hidden;clear:both;content:""}
#bo_w .bo_w_info .frm_input{float:left;width:33%}
#bo_w #wr_password{margin:0 0.5%  }
#bo_w .wr_content.smarteditor2 iframe{background:#fff}
#bo_w .bo_w_tit{position:relative}
#bo_w .bo_w_tit .frm_input{padding-right:120px;}
#bo_w .bo_w_tit #btn_autosave{position:absolute;top:0;right:0;line-height:30px;height:30px;}
#bo_w .bo_w_link label,#bo_w .bo_w_flie label{display:inline-block;height:28px;line-height:28px;width:60px;background: #eee;text-align:center;color:#888} 
#bo_w .bo_w_link .frm_input,#bo_w .bo_w_flie .frm_file{padding-left:65px}  
#bo_w .bo_w_flie .frm_input{margin:10px 0 0 } 

.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;}