@charset "utf-8";
@font-face {
    font-family: 'PyeongChangPeace-Light';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Bold.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

:root {
	--font-etc : 'PyeongChangPeace-Light'; /*날짜, 분류, 출처, 수정삭제*/
	--font-title: var(--fontF); /*타이틀*/
	--font-load: ""; /*본문 폰트*/

	--copy-col: #ffffff; /*출처 색*/

--gal-base: var(--base); /*출처 색*/
--gal-border: var(--box-border); /*출처 색*/
--gal-point: var(--point); /*출처 색*/
--gal-text: var(--text);/*출처 색*/

--header-width:22px;
	/*게시물 팝업*/
	--bo-width: 70%; /*팝업창 너비*/


--swiper-pagination-bullet-width:24px;
--swiper-pagination-bullet-height:24px;
--swiper-pagination-bullet-horizontal-gap:2px;
--swiper-navigation-color:white;
--swiper-pagination-color:var(--point);
--swiper-pagination-bullet-border-radius:2px;
--swiper-pagination-bottom:0px;
--swiper-pagination-bullet-inactive-opacity:1;
--swiper-pagination-bullet-inactive-color:var(--base);

}

/* 게시판 목록 */
#view_area {width: var(--bo-width);}
#view_area .theme-box {width: 100%; margin: auto;}
#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; display:flex; flex-direction:row; gap:10px;}

#bo_gall #bo_cate{    width: 160px;
    border-radius: var(--radius);
    background-color: var(--gal-base);
    border: 1px solid var(--gal-border);
    padding: 10px;
position:relative;    overflow: hidden;
box-shadow:var(--box-shadow);
}
#bo_gall #bo_cate:before{
    content: 'Gallery';
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc(100% - 16px);
	padding:4px 8px;
     height: var(--header-width);
    color: var(--gal-base);
    background-color: var(--gal-point);
border-bottom:1px solid var(--gal-border);
    }

#bo_gall #bo_cate #bo_cate_ul{
margin-top:calc(var(--header-width) + 10px);
}
#bo_gall #bo_cate a{    display: flex;
    align-items: center;
    padding: 4px 7px;
    margin: 2px 0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
color:var(--gal-text);
}


#bo_gall #bo_cate a:hover{
background-color:var(--point-05);
}

#bo_gall #bo_cate a.active{
background-color:var(--gal-point);
color:var(--gal-base);
}
#bo_gall #bo_cate a i{
width: 16px;
    height: 16px;
    margin-right: 8px;
    opacity: 0.8;
}

#bo_gall #fboardlist{
flex:1;
    border-radius: var(--radius);
    background-color: var(--gal-base);
    border: 1px solid var(--gal-border);
overflow: hidden;
box-shadow:var(--box-shadow);
}

#bo_gall #fboardlist .gall_header{display: flex;
    justify-content: space-between;
    background-color: var(--gal-point);
    height: var(--header-width);
    border-bottom: 1px solid var(--gal-border);
padding:4px 8px;
}

#bo_gall #fboardlist .gall_header .icon_wrapper{display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

#bo_gall #fboardlist .gall_header .icon_wrapper i{
    border: 1px solid var(--gal-border);
    font-size: 12px;
    background-color: var(--gal-base);
    padding: 4px;
color:var(--text);
}

#bo_gall h2 {margin:0;padding:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#bo_gall #gall_ul {margin:12px;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;
border-radius:var(--radius);
border-color:var(--gal-border);
	transition:0.2s ease-in-out;
border:1px solid var(--box-border);
}
#bo_gall .gall_box:hover {transform:translateY(-10px);}
#bo_gall .gall_box .info {
	color: #fff;
	position: absolute; left: 0; bottom: 0;
	background: rgba(0,0,0,0.5);
	width: 100%;
	padding: 15px;
	box-sizing: border-box;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
  }

#bo_gall .gall_box .info p{
white-space: nowrap;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
color:rgba(255,255,255,.5);
}
#bo_gall .gall_box:hover .info {  opacity: 1;  }
#bo_gall .gall_box .info h3 {
	font-size: 16px;
	padding-bottom: 0.4em;
	overflow:hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-transform: uppercase;
	color: #fff;
	font-family: var(--font-title); /*리스트에서 보이는 글제목*/
  }

#bo_gall .gall_box .info_c {
	color: var(--copy-col);
	position: absolute; left: 5px; top: 3px;
	opacity: 0;
	transition: opacity 0.35s ease-in-out;
  }  
#bo_gall .gall_box:hover .info_c {  opacity: 1;  }
#bo_gall .gall_box .info_c p {
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-transform: uppercase; 
	font-family: var(--font-etc); /*리스트에서 보이는 출처*/
  }

#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:10px 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:10px;float:right;margin-right:17px; }
.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.6);z-index:999; backdrop-filter:blur(4px);}
#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:20%;right: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:18px;padding-bottom:5px; }
#bo_v_title .bo_v_tit {font-family: var(--font-title); font-size:1.6em; font-weight: bold;}
#bo_v_title .bo_v_cate {font-size:1em; opacity:.6; margin-left:8px;}
.bo_v_footer .if_copy{
border-top: 1px solid var(--point-05);
margin-top: 10px;
    padding-top: 4px;
}
/*▲본문 제목*/

#bo_v_info strong {display:inline-block;margin:0 10px 0 0;font-weight:normal; font-family: var(--font-etc); font-size: 12px;} 
#bo_v_info .if_date{margin:0;opacity:0.8; font-family: var(--font-etc); font-size: 10px;}
/*▲본문 날짜*/
#bo_v_info .if_copy {margin:0;opacity:0.8; font-family: var(--font-etc); font-size: 10px;}
/*▲본문 출처*/

.bo_v_com { float:right; }
.bo_v_com li {float:left;margin-right:8px; }
.bo_v_com li a {font-family: var(--font-etc); font-size: 12px;} /*본문 수정삭제버튼*/

.bo_v_left { float:left}
.bo_v_left li {float:left;margin-right:5px}

.bo_v_nb { width:100%; height:50px; display: flex;
    justify-content: space-between;} 
.bo_v_nb a i{     display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
} 
.bo_v_nb .prev, .bo_v_nb .next{    position: relative;
    display: flex;
    width: 50px !important;
    height: 50px;
    line-height: 50px;
    justify-content: center;
    padding: 0px !important;
    margin: 0px !important;
background-color:var(--base);
border:1px solid var(--theme-box-border);
}
.bo_v_nb .prev {float:left}
.bo_v_nb .next {float:right;}
.bo_v_nb .prev span, .bo_v_nb .next span{display:inline-block;width:0;height:0;white-space:nowrap;overflow:hidden;}
 
#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}
 


/*글쓰기*/ 
#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;}

  #post-image-swiper { margin: 2rem auto; display: none; aspect-ratio:16/9; width:100%;}
  #post-image-swiper img { width: 100%; height: 100%;  object-fit:contain; display: block; }
#post-image-swiper .single-image {
  text-align: center;
    width: 100%;
}

.swiper-pagination-bullet{
border: 1px solid var(--point);
}

/* 게시판 댓글 (현재 사용안함) */ 
#bo_vc h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_vc article {margin:20px 10px;position:relative} 
#bo_vc header {line-height:23px;}
#bo_vc header:after {display:block;visibility:hidden;clear:both;content:""}
#bo_vc header .icon_reply {position:absolute;top:15px;left:-20px}
#bo_vc .member, #bo_vc .guest, #bo_vc .sv_member, #bo_vc .sv_guest {font-weight:bold} 
#bo_vc h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_vc .cmt_contents {padding:10px;margin:5px 0 0;}
#bo_vc #bo_vc_winfo {float:left} 

.bo_vc_w {position:relative;margin:10px 0;display:block;}
.bo_vc_w:after {display:block;visibility:hidden;clear:both;content:""}
.bo_vc_w h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.bo_vc_w #char_cnt {display:block;margin:0 0 5px}
.bo_vc_w_info{margin:10px 0;float:left}
.bo_vc_w_info:after {display:block;visibility:hidden;clear:both;content:""}
.bo_vc_w_info .frm_input{float:left;margin-right:5px}
.bo_vc_w .btn_confirm{float:right;margin-top:5px}
.bo_vc_w .btn_confirm label{display:inline-block;margin-right:10px; text-align:center;}
.bo_vc_w .btn_submit{height:30px;padding:0 20px; font-weight:bold; }
.bo_vc_w_wr:after {display:block;visibility:hidden;clear:both;content:""}

.bo_v_cate {text-align: left; font-family: var(--font-load);} /*본문 내용*/

@media (min-width:481px) and (max-width:720px){
    #view_area {width:95%;}
    #view_area .theme-box {
        width:95%;
        margin: auto;
    }

#bo_gall {
    flex-direction: column;}

#bo_gall #bo_cate{
width: calc(100% - 22px);
}

#bo_gall #bo_cate #bo_cate_ul {
    display: flex;  flex-wrap: wrap; gap:4px;
}

#post-image-swiper{
    aspect-ratio: 3 / 4;
}

.gall_li{
width: 33% !important;
}
}

@media only screen and (max-width:480px){
    #view_area {width:95%;}
    #view_area .theme-box {
        width:95%;
        margin: auto;
    }

#bo_gall {
    flex-direction: column;}

#bo_gall #bo_cate{
width: calc(100% - 22px);
}

#bo_gall #bo_cate #bo_cate_ul {
    display: flex;         flex-wrap: wrap;
gap:4px;
}

#post-image-swiper{
    aspect-ratio: 3 / 4;
}

.gall_li{
width: 50% !important;
}
}