@charset "utf-8";
@font-face {
    font-family: 'DungGeunMo';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/DungGeunMo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@import url('https://fastly.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');

:root {
/*목록*/
--font-ca: 'DungGeunMo'; /*카테고리*/
--font-sub: 'galmuri11'; /*게시물 제목*/
--col-ca: #fff; /*카테고리 폰트색*/
--col-sub: #333; /*게시물 제목 폰트색*/
--col-back: #ffffffe8; /*윈도우 박스 색*/
--col-thumb: rgba(0,0,0,0.1); /*썸네일 라인*/
--mac-radius: 2px; /*모서리 둥글기*/
--outline-color: #303030;

/*게시물 팝업*/
--bo-width: 70%; /*팝업창 너비*/
--font-title: 'DungGeunMo'; /*타이틀*/
--font-etc: 'galmuri11'; /*날짜, 수정삭제, 분류, 출처*/
--font-load: 'galmuri11'; /*본문*/
--txt-point: #fff; /*출처*/
--txt-point2: rgba(247, 237, 242, 0.925); /*분류, 날짜*/

}
#view_area {width: var(--bo-width);}
#view_area .theme-box {width: 100%; margin: auto;} 
 
/* 갤러리 목록 */
#bo_gall { margin:0 auto; }
.gall_row { padding:0px 0;display:block; } /*카테고리 포함한 목록*/ 
.gall_row h2 { padding: 0 10px;line-height:150%; } /*카테고리 제목*/ 
.gall_row .gall_con { /*썸네일 목록*/
    max-height:420px; /* 원하는 최대 높이 설정 */
    overflow-y: auto; /* 수직 스크롤 활성화 */
    line-height:0; padding: 10px; outline : solid 1px var(--outline-color);}
    ::-webkit-scrollbar {display: none;} /*스크롤바 비활성화*/
    
/** 썸네일 **/
.gall_row .gall_box {
    position:relative; 
    display:inline-block;  
    background-position:center; 
    background-repeat:no-repeat;
    background-size:cover;
    padding:0;
    margin: 12px 7px 28px;
    outline : solid 1px var(--outline-color);
    /*text-align: center;*/
    opacity:1; } /* 썸네일간 간격 margin 조정 */

.gall_row .gall_box:hover {
    box-shadow: 0 0 5px rgba(1,1,1,0.45);
    border: 1px solid rgba(1,1,1,0.35);  
    
    -webkit-transition: box-shadow 0.5s, border 0.5s;
}
.gall_row .gall_box a{
    display:block;
    width:100%; height:100%; 
    border: 1px solid var(--col-thumb); 
    box-shadow: 2px 2px 2px rgba(0,0,0,0.1);}


.gall_row .gall_box a:before,
.gall_row .gall_box a:after {
    position: absolute;
    bottom: -10px;
    right: -20px;
    content: "";
    height: 20px;
    width: 40px;
    background: var(--col-back); 
    box-shadow: 0 -6px 9px -8px #333;
    transform: rotate(-45deg);
    display:none; /* 기존의 mac형 파일목록 디자인을 유지하고 싶다면 이 라인을 제거*/

}

.gall_row .gall_box a:after {
    top: -10px;
    left: -20px;
    box-shadow: 0 6px 9px -8px #333;
}

/* 게시판 목록 공통 */
#bo_gall .gall_con .gall_chk{position:absolute;bottom:0;left:0;right:0;text-align:left;}
#bo_gall .gall_con .gall_chk label{display:block;width:100%;padding:10px;box-sizing:border-box;}

#bo_btn_top{margin: 10px 0}
#bo_btn_top:after {display:block;visibility:hidden;clear:both;content:""}
.bo_fx {margin-bottom:5px;float:right;padding-top:25px; }
.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}  
  
.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:25px;list-style:none;word-break:break-all}

#bo_v_info {padding:0 0px;}
#bo_v_info:after {display:block;visibility:hidden;clear:both;content:""} 
#bo_v_info h2 { letter-spacing: 0.05em; }
#bo_v_info span {display:inline-block;margin:0 10px 0 0;font-weight:normal; line-height: 20px;} 
.if_date { /*날짜*/
    margin:0 5px; 
    font-family: var(--font-etc); 
    font-size: 12px; 
    color: var(--txt-point2);}

.if_copy { /*출처*/
    display: block; 
    height: 20px;
    width: 100%;
    background-color: var(--point-color); 
    text-align: right;
    } 
.if_copy span {
    font-family: var(--font-etc); 
    font-size: 12px; 
    color: var(--txt-point); 
    line-height: 20px;
    margin:0 5px;
}

.bo_v_com { float:right; }
.bo_v_com li {float:left;margin-right:8px;}
.bo_v_com li a { /*수정삭제*/ 
    opacity: 0.8;
    font-family: var(--font-etc); font-size: 10px;}

#bo_v_info .bo_v_tit { /*제목*/
    font-family: var(--font-title); font-size: 16px;} 

.bo_v_cate { /*분류*/
    font-family: var(--font-etc); font-size: 12px; 
    margin:0 5px;
    color: var(--txt-point2);
} 

.bo_v_cont {/*본문 내용*/
    text-align: left; font-family: var(--font-load); margin-top: 10px; letter-spacing: -0.03em;} 

#bo_v_title { /*아보카도 설정 덮어쓰기*/
    font-size: 16px;
    text-align: center;
    margin-bottom: 5px !important;
    padding: 0px 0 !important;
    border-bottom: 0px solid !important;
}


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

.bo_v_nb {
    position:absolute;
    width:100%; 
    margin-left:auto; margin-right: auto; 
    top:50%;left:50%;height:50px;
    transform:translateY(-50%);
    transform:translateX(-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; font-family: var(--font-etc); opacity: 0.8;}
.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;}



/* 게시판 댓글 (현재 사용안함) */ 
#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:""}

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

/*게시판 목록*/
.gall_body {width: 100%; 
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.thumb_tit { 
    display: inline-block;
    height: 20px;
    line-height: 20px;
    text-align: left;
    color: var(--col-sub); 
    font-family: var(--font-sub); 
    font-size: 12px; 
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: absolute;
    left:1px;
    bottom: -25px;
    z-index: 2;
    letter-spacing: -0.03em;
    text-align: center; /*정렬 좌측으로 돌리고 싶으면 이 라인 제거*/
}

.gall_catet {
    color: #ffffff;
    display: inline-block;
    width: 100%;
    height: 25px;
}
.gall_catet .text, .gall_catet .icon { 
    height: 25px;
    line-height: 26px;
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    font-family: var(--font-ca);
}

.gall_catet .icon i {
    padding: 0px 3px;
    position: relative;
    font-size: 12px;
    color: var(--col-ca);
  }

.macos {
    background: var(--col-back);
    backdrop-filter: blur(10px); /*블러효과 지우고 싶으면 이 라인 제거*/
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
    margin: 10px;
    border-radius: var(--mac-radius);
  }

  .macos .header {
  display: flex;
  border-radius: 2px 2px 0px 0px;
  padding: 0px 3px 0px 8px;
  background: var(--point-color); /*linear-gradient(rgba(246, 246, 246, 1), rgba(224, 222, 224, 1));*/
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.01);
  position: relative;
  z-index: 1;
  height: 25px;
  line-height: 26px;
  outline : solid 1px var(--outline-color);
}
.macos .header .buttons {
  width: 75px;
  display: flex;
}
.macos .header .buttons:hover {
    cursor: default;
}
.macos .header .buttons i {
  border: 0px solid rgba(0, 0, 0, 0.15)!important;
}
.macos .header .buttons .close i {
  /*background: var(--first);
  color: var(--first);*/
  background-image: url(./img/1.png) !important;
}
.macos .header .buttons .minus i {
  /*background: var(--second);
  color: var(--second);*/
  background-image: url(./img/2.png) !important;
}
.macos .header .buttons .expand i {
  /*background: var(--third);
  color: var(--third);
  transform: rotateZ(-45deg);*/
  background-image: url(./img/3.png) !important;
}
.macos .header .buttons .btn {
  display: inline-block;
  flex: 1;
}
.macos .header .buttons .btn i {
  font-size: 10px;
  /*border-radius: 100%;*/
  color: #ffffff00; /*마테리얼 아이콘만 삭제하려니 자꾸 버튼이 통으로 지워지길래,, 그냥 냅다 투명하게 만들어버렸어요*/
  border: 1px solid #bbb;
  width: 16px;
  height: 16px;
  line-height: 12px;
  text-align: center;
}