@charset "utf-8"; 
/* CSS Document */

  /* ──────────────────────────────────────
│                                                                                                                   │
│ * File Name: board.css                                                                                    │
│ * Description: board를 사용하는 모든 페이지의 공통 table style, button style 지정     │
│ * Update: 2021-01-04                                                                                    │
│                                                                                                                   │
  ────────────────────────────────────── */

/* float 초기화 */
.imgs_wrap:after{ content:''; display:block; clear:both; height:0; visibility:hidden; }

/* hidden 설정 */
.board-wrap legend, .board-wrap table caption{ height:0; visibility:hidden; }

/* table 공통 setup */
.table-wrap table{ table-layout:fixed; width:100%; }

/*파일 업로드*/
.filebox input[type="file"]{ width:1px; height:1px; border:none; padding:0; margin:-1px; position:absolute; overflow:hidden; clip:rect(0,0,0,0); }
.filebox label{ display:inline-block; width:80px; color:#999; text-align:center; background:#fdfdfd; border:1px solid #ebebeb; border-radius:3px; padding:8px 0; vertical-align:middle; cursor:pointer; }

/* named upload */ 
.filebox .upload-name{ display:inline-block; width:calc(100% - 110.5px); background:#f5f5f5; border:1px solid #ebebeb; border-radius:3px; padding:11px 10px; vertical-align:middle; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
.my_button{ display:none; width:200px; text-align:center; padding:10px; background-color:#006BCC; color:#fff; text-decoration:none; }
.img_container{ width:100%; border:1px solid #ddd; margin-bottom:10px; }
.img_container .imgs_wrap{ width:100%; padding:10px 5px; }
.img_container .imgs_wrap .img_form{ float:left; width:calc(25% - 10px); height:270px; border:1px solid #ddd; margin:5px; position:relative; }
.img_container .imgs_wrap .img_form > span{ width:15px; height:15px; color:transparent; background:url('../images/close.png') no-repeat center center; position:absolute; top:5px; right:5px; cursor:pointer; }
.img_container .imgs_wrap .img_form .thumbnail{ width:100%; height:190px; padding-top:31px; text-align:center; align-items: center;justify-content: center;display: flex;}
.img_container .imgs_wrap .img_form .thumbnail img{ max-width:100%; height:100%; }
.img_container .imgs_wrap .img_form .img_caption{ text-align:center; padding:0 10px; margin-top:20px; }
.img_container .imgs_wrap .img_form .img_caption span{ display:block; font-size:0.8em; }
.img_container .imgs_wrap .img_form > .remove_button{border:0; width:15px; height:15px; color:transparent; background:url('../images/close.png') no-repeat center center; position:absolute; top:5px; right:5px; cursor:pointer; }
.img_container .imgs_wrap .img_form > .remove_button2{border:0; width:15px; height:15px; color:transparent; background:url('../images/close.png') no-repeat center center; position:absolute; top:5px; right:5px; cursor:pointer; }

.img_container .imgs_wrap .img_form2{ float:left; width:calc(25% - 10px); height:270px; border:1px solid #ddd; margin:5px; position:relative; }
.img_container .imgs_wrap .img_form2 > span{ width:15px; height:15px; color:transparent; background:url('../images/close.png') no-repeat center center; position:absolute; top:5px; right:5px; cursor:pointer; }
.img_container .imgs_wrap .img_form2 .thumbnail{ width:100%; height:190px; padding-top:31px; text-align:center; align-items: center;justify-content: center;display: flex;}
.img_container .imgs_wrap .img_form2 .thumbnail img{ max-width:100%; height:100%; }
.img_container .imgs_wrap .img_form2 .img_caption{ text-align:center; padding:0 10px; margin-top:20px; }
.img_container .imgs_wrap .img_form2 .img_caption span{ display:block; font-size:0.8em; }
.img_container .imgs_wrap .img_form2 > .remove_button{border:0; width:15px; height:15px; color:transparent; background:url('../images/close.png') no-repeat center center; position:absolute; top:5px; right:5px; cursor:pointer; }


.img_div{ display:none; }
.file_container{ float:left; width:100%; height:40px; }
.file_form{ float:left; width:150px; height:40px; border:1px solid #ddd; margin-left:9px; margin-top:-18px; }
.file_form span{ float:right; padding-right:6px; }
.file_form span:hover{ cursor:pointer; }
.file_form{ text-align:center; margin-top:-10px; }

@media screen and (max-width: 978px){
	.img_container .imgs_wrap .img_form{ width:calc(33.333% - 10px); }
}

@media screen and (max-width: 768px){
	.img_container .imgs_wrap .img_form{ width:calc(50% - 10px); }
}

@media screen and (max-width: 580px){
	.img_container .imgs_wrap .img_form{ width:calc(100% - 10px); }
}