@charset "utf-8";


/* 버튼 공통 디자인 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.bbs_btn {width:auto; display:inline-flex; justify-content:center; align-items:center; gap:10px; color:#333; margin:1px; border-radius:3px; border:1px solid #aaa; background:#fff;}
.bbs_btn:hover {color:#111; border-color:#9b9b9b;}
.bbs_btn i {font-size:12px; margin-top:2px;}

/* 사이즈별 */
.bbs_btn.small {height:25px; font-size:14px; padding:3px 8px;}
.bbs_btn.medium {height:35px; font-size:15px; padding:3px 14px;}
.bbs_btn.large {min-width:80px; height:48px; font-size:15px; padding:3px 22px;}

/* 색상별 */
.bbs_btn.gray {color:#555; border-color:#aaa; background:#eee;}
.bbs_btn.gray:hover {border-color:#999; color:#111;} 
.bbs_btn.dark {color:#eee; border-color:#333; background:#313847;}
.bbs_btn.dark:hover {color:#fff; border-color:#222;}
.bbs_btn.blue {color:#125cc1; border-color:#639ff7; background:#eaf2ff;}
.bbs_btn.blue:hover {color:#074291; border-color:#3b72c0;}
.bbs_btn.red {color:#e06599; border-color:#f8b2cf; background: #fef0f6;}
.bbs_btn.red:hover {color:#da005b; border-color:#dc7da5;}
.bbs_btn.green {color:#187eb2; border:1px solid #9bbbcb; background:#f4fbff;}
.bbs_btn.green:hover {color:#126c99; border:1px solid #9bbbcb;}

/* 강조 */
.bbs_btn.primary {color:#fff; border-color:#4876ef; background:#4876ef;}
.bbs_btn.primary:hover {color:#fff;}
.bbs_btn.secondary {color:#fff; border-color:#2b3d73; background:#2b3d73;}
.bbs_btn.secondary:hover {color:#fff;}
.bbs_btn.alert {color:#fff; border-color:#ea3d2f; background:#ea3d2f;}
.bbs_btn.alert:hover {color:#fff;}
.bbs_btn.attention {color:#fff; border-color:#eba30c; background:#eba30c;}
.bbs_btn.attention:hover {color:#fff;}

/* 추가-삭제 */
.bbs_add {display:inline-flex; justify-content:center; align-items:center; text-align:center; width:35px; height:35px; font-size:12px; color:#fff; border-radius:3px; background:#033885;}
.bbs_add:hover {color:#fff;}
.bbs_del {display:inline-flex; justify-content:center; align-items:center; text-align:center; width:35px; height:35px; font-size:12px; color:#fff; border-radius:3px; background:#da005b;}
.bbs_del:hover {color:#fff;}

/* 하단버튼그룹 */
.button_group {width:100%; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:5px; text-align:center; margin:50px auto 30px;}
.button_group i {font-size:14px; margin-left:5px; opacity:0.5;}


/* 다운로드버튼 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 파일 개별 버튼 */
.file_down {display:inline-flex; height:35px; justify-content:space-between; align-items:center; gap:18px; font-size:15px; color:#555; padding:0 14px; border-radius:3px; border:2px solid #ddd; background:#fff;}
.file_down ~ .file_down {margin-left:3px;}
.file_down.large {min-width:80px; height:48px; font-size:16px; padding:3px 20px; border-width:1px; border-color:#aaa;} /* 하단버튼그룹에 위치하는 경우 */
.file_down:hover {color:#333; box-shadow:0 0 5px rgba(0,0,0,0.1);}
.file_down em {position:relative;}
.file_down em::after {font-family:"Font Awesome 6 Free"; position:absolute; top:50%; display:block; font-size:13px; font-weight:900; line-height:0; transform:translateY(-52%);}

.file_down.info em::after {content:"\f05a"; font-size:14px; color:#db0e2c;} /* 안내 */
.file_down.setting em::after {content:"\f013"; font-size:14px; color:#999;} /* 설정관련 */
.file_down.download em::after {content:"\f019"; color:#2177ce;} /* 다운로드 */
.file_down.excel em::after {content:"\f1c3"; color:#1f8b25;} /* 엑셀다운로드 */
.file_down.upload em::after {content:"\f093"; color:#6b70b3;} /* 업로드 */


/* 버튼그룹_다운로드, 인쇄 */
.button_files_group {min-width:150px; position:relative; display:inline-block; margin:0 0 0 3px;}
.button_files_group > button {width:100%; height:35px; position:relative; display:flex; justify-content:space-between; align-items:center; font-size:15px; color:#fff; padding:0 10px; border-radius:3px;}
.button_files_group > button::after {content:"\f107"; position:absolute; font-family:"Font Awesome 6 Free"; position:absolute; display:block; right:10px; top:50%; font-size:10px; font-weight:900; color:#fff; transform:translateY(-50%); opacity:0.8;}
.button_files_group > button span {display:flex; align-items:center; gap:8px;}
.button_files_group > button em {width:22px; height:22px; position:relative; display:flex; justify-content:center; align-items:center; text-align:center; border-radius:50%; background:rgba(255,255,255,0.2);}
.button_files_group > button em::after {font-family:"Font Awesome 6 Free"; position:absolute; display:block; left:50%; top:50%; font-size:10px; font-weight:900; color:#fff; transform:translate(-50%, -50%);}
.button_files_group > div {display:none; position:absolute; top:40px; left:0; z-index:5; width:100%; border:1px solid #ddd; background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.1);}
.button_files_group > div button {width:100%; display:block; font-size:14px; color:#5c667b; text-align:left; word-break:keep-all; padding:10px;}
.button_files_group > div button ~ button {border-top:1px dashed #bbb;}

.button_files_group > button.download {background:#1f8b25;} /* 다운로드 */
.button_files_group > button.download em:after {content:"\f019";}
.button_files_group.files_down > div button:hover {background:rgba(31,139,37,0.08);}

.button_files_group > button.print {background:#999;} /* 인쇄 */
.button_files_group > button.print em:after {content:"\f02f";}
.button_files_group.files_print > div button:hover {background:rgba(153,153,153,0.15);}