@charset "utf-8";
/*******************************
* CSS : board.card.css
* Author: NXWEB beop07
********************************/

/* List */
#board-list-card .bl_header{padding-bottom:60px}
#board-list-card .bl_search{display:flex;justify-content:center;flex-wrap:nowrap;}
#board-list-card .bl_search .select_area{flex:0 0 120px;}
#board-list-card .bl_search .input_area{max-width:444px;width:100%;padding:0 10px;}
#board-list-card .bl_search .btn_area{flex:0 0 80px;}
#board-list-card .bl_search select{width:100%;height:50px;border:1px solid #ccc;font-size:15px;color:#666;padding-left:10px;}
#board-list-card .bl_search input[type=text]{width:100%;max-width:424px;height:50px;border:1px solid #ccc;text-indent:9px;font-size:15px}
#board-list-card .bl_search input[type=submit]{width:100%;height:50px;border:0;background:#515151;color:#fff;font-size:15px;}
#board-list-card .bl_list{margin:0 -25px;}
#board-list-card .bl_list > li{float:left;width:33.333%;padding:25px;}
#board-list-card .bl_list > li:nth-child(3n+1){clear:both;}
#board-list-card .bl_list .wrapper{display:block;position:relative;width:100%;height:300px;padding:30px;border:1px solid #d7d7d7;}
#board-list-card .bl_list .wrapper::after{content:"";display:block;position:absolute;top:-1px;bottom:-1px;right:-1px;left:-1px;visibility:hidden;opacity:0;border:3px solid #f67404;transition:opacity .2s, visibility .2s;}
#board-list-card .bl_list .cate{display:inline-block;min-width:65px;padding:0 10px;font-size:12px;color:#fff;text-align:center;background-color:#f67404;margin-bottom:7px}
#board-list-card .bl_list .tt{display:-webkit-box;margin-bottom:20px;font-size:20px;font-weight:500;line-height:1.5em;height:3em;color:#222;font-weight:500;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;}
#board-list-card .bl_list .txt{display:-webkit-box;font-size:15px;line-height:1.5em;height:3em;color:#777;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;}
#board-list-card .bl_list .date{position:absolute;left:25px;bottom:40px;font-size:14px;color:#888;}
#board-list-card .bl_list .ic-ar{position:absolute;right:25px;bottom:40px;font-size:26px;color:#f67404}
#board-list-card .bl_list .wrapper:hover::after{visibility:visible;opacity:1;}


/* Write */
#board-write-card .bw_subject{padding-bottom:15px}
#board-write-card .bw_subject input[type=text]{width:100%;height:48px;border-radius:4px;border:1px solid #c9c9c9;padding:4px 8px;text-indent:5px;outline:none}
#board-write-card .bw_subject input[type=text]:focus{border-color:#aaa}
#board-write-card .bw_contents textarea{width:100%;height:350px}
#board-write-card .tbl_bw{width:100%}
#board-write-card .tbl_bw th{width:120px;font-weight:500}
#board-write-card .tbl_bw th, #board-write-card .tbl_bw td{height:48px;font-size:14px;color:#434343;border-bottom:1px solid #dcdcdc;padding:8px 10px;vertical-align:middle}
#board-write-card .tbl_bw select{width:160px;height:32px;border:1px solid #ccc;vertical-align:top;font-size:13px;border-radius:3px}
#board-write-card .tbl_bw input[type=checkbox]{width:16px;height:16px}

/* View */
.bw_header h3{font-size:22px;font-weight:500;color:#333;border-bottom:2px solid #666;padding-bottom:10px}
.bw_header .cate_name{display:inline-block;min-width:65px;padding:0 10px;font-size:14px;color:#fff;text-align:center;background-color:#f67404;vertical-align:middle;margin-right:15px;margin-bottom:4px}
.bw_header .bw_info{padding:15px 0}
.bw_header .bw_info > li{float:left;color:#888;font-size:14px;margin-right:20px}
.bw_header .bw_info > li:last-child{margin-right:0}
.bw_header .bw_info > li > span{display:inline-block;vertical-align:middle}
.bw_header .bw_info > li > .dt{margin-right:5px}
.bw_header .bw_action{padding:10px 0;margin-right:-10px}
.bw_header .bw_action > li{float:left;position:relative;padding:0 10px;line-height:1}
.bw_header .bw_action > li > a{color:#666;font-size:13px;}
.bw_header .bw_action > li:after{content:"";width:1px;height:10px;display:block;position:absolute;right:0;top:4px;background:#ddd;}
.bw_header .bw_action > li:last-child:after{display:none}

.bw_contents{padding:35px 0;min-height:270px;border-bottom:1px solid #ccc;font-size:14px;line-height:1.75em;word-break: break-all;}
.bw_contents p{font-size:14.5px;line-height:1.75em;word-break: break-all;}
.bw_contents span[lang="JA"]{word-break:break-all}
.bw_contents a{color:#0782C1;text-decoration:underline;}
.bw_files{border:1px solid #ddd;box-shadow:1px 1px 2px rgba(0,0,0,0.03)}
.bw_files h4{font-size:13px;color:#444;font-weight:400;background:#f1f1f1;padding:8px 12px;border-bottom:1px solid #ddd}
.files_list{padding:8px 12px}
.files_list > li{font-size:13px;color:#555;padding:5px 0;border-bottom: 1px dotted #e9e9e9}
.files_list > li:last-child{border-bottom:0}
.files_list > li > a{display:inline-block;vertical-align:middle;color:#404040}
.files_list > li > a:hover{text-decoration:underline}
.files_list .volume{display:inline-block;font-size:12px;color:#888;vertical-align:middle;margin-left:10px}
.down_icon{display:inline-block;width:13px;height:13px;background:url('img/ic_down.png') no-repeat;vertical-align:middle;margin-right:2px}

.bw_footer{padding-top: 20px;overflow:hidden}
.bw_footer > div{float:left;width:40%}
.bw_footer > div.center_con{width:20%}
.bw_footer .ar_btn{float:left;display:block;position:relative}
.bw_footer > .left_con .ar_btn{padding-left:25px}
.bw_footer > .left_con .ar_btn:before{content:"";position:absolute;left:3px;top:12px;display:block;width:15px;height:15px;border:2px solid #ccc;border-top:0;border-right:0;transform:rotate(45deg);-ms-transform: rotate(45deg)}
.bw_footer > .right_con .ar_btn{float:right;padding-right:25px}
.bw_footer > .right_con .ar_btn:before{content:"";position:absolute;right:3px;top:12px;display:block;width:15px;height:15px;border:2px solid #ccc;border-top:0;border-right:0;transform:rotate(225deg);-ms-transform: rotate(225deg)}
.bw_footer .ar_btn > span.label{color:#777;font-weight:500}
.bw_footer .ar_btn > span{display:block;font-size:14px;color:#777;}
.bw_footer .ar_btn:hover > span{color:#333 !important}
.bw_footer .ar_btn:hover:before{border-color:#aaa}
.bw_footer .btnList{display:inline-block;width:50px;font-size:16px;line-height:1;color:#444;padding-top:4px;padding-bottom:3px;text-align:center}
.bw_footer .btnList > span{display:inline-block;font-size:13px;color:#888}
.bw_footer .icList{display:inline-block;width:20px;height:20px;background:url('img/ic_list.png') no-repeat;opacity:0.9}
.bw_footer .btnList:hover > span{color:#333}
.bw_footer .btnList:hover > .icList{opacity:1}

/* Btn */
#board-card .btn-brd-list{display:inline-block;border:0;padding:7px 18px;background:#999;color:#fff;font-size:14px}
#board-card .btn-brd-save, #board-card .btn-brd-write{display:inline-block;border:0;padding:7px 18px;background:#222;color:#fff;font-size:14px}

/* File Upload */
#board-card #drop{background:#e6e6e6;border:7px dotted #bbb;padding:22px 30px;width:100%;color:#7f858a;text-align:center;}
#board-card #drop a{background-color:#007a96;padding:8px 20px;color:#fff;font-size:13px;border-radius:2px;cursor:pointer;display:inline-block;margin-top:12px;line-height:1}
#board-card #drop a:hover{background-color:#0986a3}
#board-card #drop input{display:none}
#board-card .dropList{margin-top:15px}
#board-card .dropList li{position:relative;height:auto;padding:6px 0;border-bottom:1px dotted #ccc}
#board-card .dropList li:last-child{border-bottom:0}
#board-card .dropList li input{display:none}
#board-card .dropList li p{display:inline-block;font-size:14px;color:#444;margin-left:7px;vertical-align:middle}
#board-card .dropList li i{position:absolute;right:72px;top:7px;font-size:13px;font-weight:normal;font-style:normal;color:#7f7f7f}
#board-card .dropList li canvas{vertical-align:middle}
#board-card .dropList li span.nt{width:15px;height:12px;background:url("img/icons.png") no-repeat;position:absolute;top:50%;margin-top:-7px;right:50px}
#board-card .dropList li span.erMsg{display:inline-block;vertical-align:middle;color:red;margin-left:25px;position:absolute;right:130px;top:9px;font-size:13px}
#board-card .dropList li span.brdFileDel{position:absolute;display:inline-block;top:50%;right:0;margin-top:-10px;width:30px;height:20px;font-size:12px;line-height:20px;color:#fff;text-align:center;background:#fb4545;border-radius:3px;cursor:pointer}
#board-card .dropList li.error span.nt{background-position-y:-13px;margin-top:-6px}
#board-card .dropList li.working span.nt{height:16px;background-position:0 -12px}
#board-card .dropList li.error p{color:red}

/* pagination */
#board-card .board_pagination{text-align:center;overflow:hidden;padding:20px 20px}
#board-card .board_pagination strong{vertical-align:top;display:inline-block;width:33px;height:33px;background-color:#444;color:#fff;font-size:12px;line-height:34px;text-align:center;margin:0 3px}
#board-card .board_pagination a{vertical-align:top;display:inline-block;width:34px;height:34px;border:1px solid #e5e5e5;background-color:#fff;color:#6c6c6c;font-size:12px;line-height:34px;text-align:center;margin:0 3px}
#board-card .board_pagination .ic_pg_first{width:26px;height:30px;background:url('img/ar_first.jpg') no-repeat center center}
#board-card .board_pagination .ic_pg_last{width:26px;height:30px;background:url('img/ar_last.jpg') no-repeat center center}
#board-card .board_pagination .ic_pg_prev{width:26px;height:30px;background:url('img/ar_prev.jpg') no-repeat 10px 9px}
#board-card .board_pagination .ic_pg_next{width:26px;height:30px;background:url('img/ar_next.jpg') no-repeat 10px 9px}
#board-card .board_pagination .pull-left p{font-size:13px;color:#777;line-height:33px;font-family:'Montserrat','notokr',sans-serif}
#board-card .board_pagination a.disabled{cursor:default}
#board-card .board_pagination a.disabled > i{opacity:0.2}

@media (max-width:1280px){
  #board-list-card .bl_list{margin:0 -15px;}
  #board-list-card .bl_list > li{padding:15px;}
}
@media (max-width:970px){
  #board-list-card .bl_list{margin:0 -10px;}
  #board-list-card .bl_list > li{padding:10px;}
  #board-list-card .bl_list .wrapper{height:260px;padding:22px;}
  #board-list-card .bl_list .tt{margin-top:10px;font-size:17px;}
  #board-list-card .bl_list .txt{font-size:14.5px}
  #board-list-card .bl_list .date,
  #board-list-card .bl_list .ic-ar{bottom:30px;}
}
@media (max-width:768px){
  #board-list-card .bl_list > li{width:50%;}
  #board-list-card .bl_list > li:nth-child(2n+1){clear:both;}
  #board-list-card .bl_list > li:nth-child(3n+1){clear:none;}
	.bw_header h3{font-size:22px;}

}
@media (max-width:640px){
  #board-list-card .bl_search select{height:40px;font-size:14px;}
  #board-list-card .bl_search input[type=text]{height:40px;font-size:14px}
  #board-list-card .bl_search input[type=submit]{height:40px;font-size:14px;}
  #board-list-card .bl_header{padding-bottom:50px;}
	#board-list-card .bl_header > .pull-right{width:100% !important}
	#board-list-card .bl_list tbody tr:first-child{border-top:1px solid #333}
	#board-list-card .bl_list tbody tr{border-bottom:1px solid #ddd}
	#board-list-card .bl_list th, #board-list-card .bl_list td.td-num{display:none}
	#board-list-card .bl_list td{float:left;border-bottom:0 !important;padding:0 5px 8px 5px !important}
	#board-list-card .bl_list td > a{color:#333;font-size:13px}
	#board-list-card .bl_list td.td-subject{width:100%;color:#333;padding:10px 5px 3px 5px !important}
	#board-list-card .bl_list td.td-writer{color:#999;position:relative}
	#board-list-card .bl_list td.td-writer:after{content:'';width:1px;height:11px;background:#999;position:absolute;right:0;top:4px}
	#board-list-card .bl_list td.td-date{color:#999}
}
@media (max-width:480px){
  #board-list-card .bl_list > li{width:100%;}
  #board-list-card .bl_list .wrapper{height:240px;}
  #board-list-card .bl_list .date,
  #board-list-card .bl_list .ic-ar{bottom:18px;}
  #board-list-card .bl_header{padding-bottom:35px;}
	#board-list-card .bl_search .select_area{flex:0 0 80px;}
  #board-list-card .bl_search .btn_area{flex:0 0 70px;}
  #board-list-card .bl_search .input_area{padding:0 6px;}

	.bw_contents{padding:25px 0 !important;font-size:13px !important}
	.bw_header h3{font-size:18px;padding-bottom:7px !important;word-break:break-all;}
	.bw_contents p{font-size:13.5px !important;word-break:break-all;}
}