@charset "utf-8";


/* 버튼 공통 레이아웃 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.bbs_btn {width:auto; display:inline-flex; justify-content:center; align-items:center; gap:0 8px; color:var(--fontcolor1); margin:1px; border-radius:3px; border:1px solid #aaa; background:var(--white);}
.bbs_btn:hover {color:var(--black); border-color:#888;}
.bbs_btn i {font-size:16px; margin-top:2px; opacity:0.8;}
.bbs_btn i[class*="fa-solid"] {font-size:12px;} /* fontAwesome */

/* 사이즈별 */
.bbs_btn.small {height:28px; font-size:14px; padding:4px 8px;}
.bbs_btn.medium {min-width:60px; height:36px; font-size:15px; padding:4px 14px;}
.bbs_btn.large {min-width:80px; height:48px; font-size:16px; padding:4px 20px;}

/* 라인형 */
.bbs_btn.gray {color:#555; border-color:#aaa; background:#eee;}
.bbs_btn.gray:hover {border-color:#999; color:#111;} 
.bbs_btn.red {color:#d84885; border-color:#eea4c3; background:#fef0f6;}
.bbs_btn.red:hover {color:#dc0d64; border-color:#dc7da5;}
.bbs_btn.orange {color:#d67a0b; border-color:#e9af69; background:#fff3e4;}
.bbs_btn.orange:hover {color:#c26c03; border-color:#d0954e;}
.bbs_btn.green {color:#2f855a; border-color:#9cb8aa; background:#f0f9f4;}
.bbs_btn.green:hover {color:#256b48; border-color:#789988;}
.bbs_btn.cyan {color:#1482bb; border-color:#91b0bf; background:#f0faff;}
.bbs_btn.cyan:hover {color:#106794; border-color:#8898a0;}
.bbs_btn.blue {color:#0d57bd; border-color:#76a4e8; background:#eef4ff;}
.bbs_btn.blue:hover {color:#074291; border-color:#5a82bd;}
.bbs_btn.purple {color:#653fc2; border-color:#b0a4cc; background:#f3eeff;}
.bbs_btn.purple:hover {color:#4d27a7; border-color:#988bb7;}

/* 강조 */
.bbs_btn.primary {color:#f0f0f0; border-color:#456fdf; background:#456fdf;}
.bbs_btn.primary:hover {color:#fff;}
.bbs_btn.secondary {color:#f0f0f0; border-color:#2b3d73; background:#2b3d73;}
.bbs_btn.secondary:hover {color:#fff;}
.bbs_btn.dark {color:#eee; border-color:#3f454c; background:#41464c;}
.bbs_btn.dark:hover {color:#f0f0f0; border-color:#2f353b; background:#343a40;}
.bbs_btn.alert {color:#f0f0f0; border-color:#df3679; background:#df3679;}
.bbs_btn.alert:hover {color:#fff;}
.bbs_btn.attention {color:#fff; border-color:#f08f00; background:#f08f00;}
.bbs_btn.attention:hover {color:#fff;}
.bbs_btn.positive {color:#f0f0f0; border-color:#1e8d55; background:#1e8d55;}
.bbs_btn.positive:hover {color:#fff;}

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

/* 하단버튼그룹 */
.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;}

.button_group.between {justify-content:space-between; gap:10px 20px; margin:30px auto;} /* 좌우버튼영역 */
.button_group.between > * {display:flex; flex-wrap:wrap; align-items:center; gap:3px;}

@media (max-width :769px) {
	.button_group.between {justify-content:center;}
}


/* 다운로드버튼 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 파일 개별 버튼 */
.file_down {display:inline-flex; height:36px; justify-content:space-between; align-items:center; gap:20px; font-size:15px; color:var(--fontcolor2); padding:4px 14px; border-radius:3px; border:2px solid #ddd; background:var(--white);}
.file_down ~ .file_down {margin-left:3px;}
.file_down:hover {box-shadow:2px 2px 2px rgba(0,0,0,0.1);}
.file_down i {position:relative; margin-top:2px;}
.file_down i::after {content:"\f019"; position:absolute; top:50%; font-family:"Font Awesome 7 Free"; font-size:12px; font-weight:900; line-height:0; color:#2177ce; transform:translateY(-52%);}

.file_down.small {height:28px; font-size:14px; padding:4px 8px;}
.file_down.large {min-width:80px; height:48px; font-size:16px; padding:4px 20px; border-width:1px; border-color:#aaa;} /* 하단버튼그룹에 위치하는 경우 */

.file_down.info i::after {content:"\f05a"; font-size:13px; color:#d02258;} /* 안내 */
.file_down.setting i::after {content:"\f013"; color:#8d9ba8;} /* 설정 */
.file_down.excel i::after {content:"\f1c3"; color:#1f8b25;} /* 엑셀다운로드 */
.file_down.upload i::after {content:"\f093"; color:#6b70b3;} /* 업로드 */
.file_down.print i::after {content:"\f02f"; color:#5a6773;} /* 인쇄 */

/* 버튼그룹_다운로드, 인쇄 */
.files_group {min-width:150px; position:relative; display:inline-block;}
.files_group > button {width:100%; height:36px; position:relative; display:flex; justify-content:space-between; align-items:center; font-size:15px; color:#e1e1e1; padding:4px 28px 4px 12px; border-radius:3px;}
.files_group > button::after {content:"\f107"; position:absolute; right:12px; top:50%; font-family:"Font Awesome 7 Free"; font-size:10px; font-weight:900; color:var(--white); transform:translateY(-50%); opacity:0.8;}
.files_group > div {display:none; position:absolute; top:40px; left:0; z-index:5; width:100%; border:1px solid #ccc; background:var(--white); box-shadow:0 0 10px rgba(0,0,0,0.1);}
.files_group > div button {width:100%; display:block; font-size:14px; color:#5c667b; text-align:left; word-break:keep-all; padding:10px;}
.files_group > div button ~ button {border-top:1px dashed #aaa;}

.files_group.files > button {background:#005383;} /* 파일다운 */
.files_group.files > div button:hover {background:#eef4ff;}
.files_group.print > button {background:#41464c;} /* 인쇄 */
.files_group.print > div button:hover {background:#f2f3f8;}