/* CSS Document */

a { 
    text-decoration: none;
}

a:hover { 
    text-decoration: underline;
}

html, body { 
	display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body { 
	font-family: "Microsoft JhengHei", Verdana, Arial;
}

/*------------system_box------------*/
.system_box {
	display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/*------menu_box------*/
.menu_box {
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	width: 270px;
	height: 100%;
	background: #e4e3d0;
	border-right: solid #333333 1px;
	z-index: 13;
}

.w_40 {
	width: 40px;
}

.sys_title {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	min-height: 260px;
	background: #dffaff url("../images/web_bgd_4.svg") center bottom no-repeat;
	background-size: 200%;
	text-align: center;
}

.sys_logo {
	display: block;
	width: 100%;
	margin: 0;
	padding: 10px 0.5em 0 0.5em;
}

.sys_logo img {
	display: inline-block;
    height: 60px;
    width: auto;
	margin: 0 auto;
}

.logo_s img {
    height: 34px;
}

.sys_title h2 {
	display: block;
	margin: 0;
	padding: 0 0.5em 0.3em 0.5em;
	color: #0054a9;
	font-size: xx-large;
	font-weight: bold;
}

.sys_title h2 span {
	display: inline-block;
}

.menu_btn {
	float: right;
	display: inline-block;
	margin: 10px -22px 0 0;
	padding: 0;
	border-radius: 0 4px 4px 0;
	text-align: center;
	background: #003c3e;
}

.menu_btn a {
	display: block;
	width: 20px;
	height: 24px;
	margin: 0;
	padding: 0 2px;
}

.main_menu {
	display: block;
	margin: -1em 0 0 0;
	padding: 0 0.3em 0.3em 0.3em;
	font-size: medium;
	height: calc(100% - 260px);
	overflow-y: auto;
}

.main_menu .m_btn_group {
	display: block;
	position: relative;
	border-bottom: solid 1px #ccc;
}

.main_menu .m_menu_btn {
	position: relative;
	padding-top: 0.5em;
}

.main_menu .m_menu_btn a {
	display: block;
	margin: 0;
	padding: 0.5em 0.8em;
	color: #666;
}

.main_menu .m_menu_btn.active {
	font-weight: bold;
	background: #fff3cd;
}

.main_menu .m_menu_btn.active a {
	color: #856404;
}

.main_menu .m_menu_btn a:hover {
	text-decoration: none;
	font-weight: bold;
}

.main_menu .m_menu_btn a i {
	width: 20px;
	text-align: center;
}

.m_menu_list1 {
	margin: 0.3em;
	padding: 0.3em 0.5em;
	background: #fff;
	border-radius: 0.5em;
}

.m_menu_list1 li {
	list-style: none;
	display: block;
	margin: 0.2em 0;
	padding: 0.3em;
	text-align: center;
}

.m_menu_list1 .active {
	border-radius: 1em;
	background: #c35412;
}

.m_menu_list1 .active a {
	color: #fff;
	font-weight: bold;
}

.m_menu_list1 li a {
	color: #000000;
}

/*------con_box------*/
.con_box {
	position: relative;
	display: block;
	margin: 0 0 0 270px;/*--menu_box_寬度--*/
	padding: 0 0 2em 0;
	min-height: 100%;
	background: #fff;
}

.web_m_t {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.2em 2em;
	background: #f9f8df;
	color: #0054a9;
	font-size: large;
	font-weight: bold;
	text-align: center;
}

.top_box {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 50px;
	background: #666666;
}

.top_box .breadcrumb {
	background-color: #666666;
}

.top_box .breadcrumb-item {
    color: #ffffff;
}

.top_box .breadcrumb-item.active {
    color: #ffffff;
	font-weight: bold;
}

.ml_40 {
	margin-left: 40px;	
}

.alert-title {
	background: #2961aa;
	color: #ffffff;
	font-size: large;
	font-weight: bold;
}

.img_list {
	display: inline-block;
	border: #000000 1px solid;
	border-radius: 0.3em;
	margin: 0 0.3em;
	padding: 0.2em;
}

.img_list img {
	height: 100px;
	width: auto;
}

/*----------公告事項列表----------*/
.news_list li {
	font-size: medium;
	line-height: 1.5em;
	border-bottom: dashed 1px #666666;
	margin: 05.em;
	padding: 0.5em 0;
}

.news_list li a {
	color: #333333;
}

.link_list img {
	width: auto;
	height: 200px;	
}

.link_list span {
	display: block;
	text-align: center;
	font-size: large;
	font-weight: bold;
}

/*------footer_box------*/
.footer_box {
	position: fixed;
	bottom: 0;
	right: 0;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.5em;
	background: #333333;
	text-align: right;
	color: #ffffff;
	z-index: 9;
}

.footer_box p {
	font-size: small;
	margin: 0;
	padding: 0;
}

/*------web_style------*/

.text-purple {
    color: #8400ff!important;
}

.text-purple2 {
    color: #c280ff!important;
}

.text-purple3 {
    color: #6d000e!important;
}

.text-warning2 {
    color: #b8741a!important;
}

.text-pink {
    color: #ec808d!important;
}

.text-lime {
    color: #bfbf00!important;
}

.bg-purple {
	background-color: #8400ff!important;
}

.bg-purple2 {
    background-color: #c280ff!important;
}

.bg-purple3 {
    background-color: #6d000e!important;
}

.bg-warning2 {
    background-color: #b8741a!important;
}

.bg-warning3 {
    background-color: #e7ded3!important;
}

.bg-pink {
    background-color: #ec808d!important;
}

.bg-lime {
    background-color: #bfbf00!important;
}

.bg-lime2 {
    background-color: #f5feeb!important;
}

.bg-danger2 {
    background-color: #f7ced4!important;
}

.bg-danger3 {
    background-color: #c8c1c9!important;
}

.bg-danger4 {
    background-color: #7b4d12!important;
}

.bg-info2 {
    background-color: #d4f0f7!important;
}

.bg-egger {
    background-color: #b7b79e!important;
}

.bg-secondary2 {
	background: #90a2b0;
}

.bg-secondary3 {
	background: #ccd7df;
}

.bg-lightyellow {
    background-color: #fffadf!important;
}

.btn-darkblue {
    color: #fff;
    background-color: #074c60;
}

.btn-darkblue:hover {
  color: #fff;
  background-color: #043c4c;
}

.btn-darkblue:focus, .btn-darkblue.focus {
  box-shadow: 0 0 0 0.2rem rgba(16, 118, 147, 0.5);
}

.btn-darkblue.disabled, .btn-darkblue:disabled {
  color: #fff;
  background-color: #66848d;
  border-color: #66848d;
}

.btn-danger2 {
    color: #fff;
    background-color: #b3736c;
    border-color: #b3736c;
}

.btn-danger2:hover {
    color: #fff;
    background-color: #a65c54;
    border-color: #a65c54;
}

.btn-danger2:focus, .btn-danger2.focus {
  box-shadow: 0 0 0 0.2rem rgba(211, 114, 103, 0.5);
}

.btn-danger2.disabled, .btn-danger2:disabled {
  color: #fff;
  background-color: #b99e9b;
  border-color: #b99e9b;
}

.btn-success2 {
    color: #fff;
    background-color: #7fa184;
    border-color: #7fa184;
}

.btn-success2:hover {
    color: #fff;
    background-color: #5b7f60;
    border-color: #5b7f60;
}

.btn-success2:focus, .btn-success2.focus {
  box-shadow: 0 0 0 0.2rem rgba(148, 195, 155, 0.5);
}

.btn-success2.disabled, .btn-success2:disabled {
  color: #fff;
  background-color: #adc1b0;
  border-color: #adc1b0;
}

.btn-secondary2 {
    color: #fff;
    background-color: #90a2b0;
    border-color: #90a2b0;
}

.btn-secondary2:hover {
    color: #fff;
    background-color: #7c8891;
    border-color: #737c83;
}

.btn-secondary2:focus, .btn-secondary2.focus {
  box-shadow: 0 0 0 0.2rem rgba(163, 180, 193, 0.5);
}

.btn-secondary2.disabled, .btn-secondary2:disabled {
  color: #fff;
  background-color: #afbeca;
  border-color: #afbeca;
}

.btn-warning2 {
    color: #fff;
    background-color: #948c75;
    border-color: #948c75;
}

.btn-warning2:hover {
    color: #fff;
    background-color: #7e755a;
    border-color: #7e755a;
}

.btn-warning2:focus, .btn-warning2.focus {
  box-shadow: 0 0 0 0.2rem rgba(195, 178, 128, 0.5);
}

.btn-warning2.disabled, .btn-warning2:disabled {
  color: #fff;
  background-color: #c7c1b1;
  border-color: #c7c1b1;
}

.btn-warning3 {
    color: #fff;
    background-color: #d5a04f;
    border-color: #d5a04f;
}

.btn-warning3:hover {
    color: #fff;
    background-color: #bc883a;
    border-color: #bc883a;
}

.btn-warning3:focus, .btn-warning3.focus {
  box-shadow: 0 0 0 0.2rem rgba(223, 174, 99, 0.5);
}

.btn-warning3.disabled, .btn-warning3:disabled {
  color: #fff;
  background-color: #bbaa8f;
  border-color: #bbaa8f;
}

.pull-right {
    float: right!important;
}

.pull-left {
    float: left!important;
}

.modal-xxl {
	max-width: 95%;	
}

.min_w_12 {
	min-width: 12em;	
}

.min_w_20 {
	min-width: 20em;	
}

.list_title {
	border-left: solid 4px #208ad7;
	font-weight: bold;
	padding: 0.3em 0.5em;
	margin-bottom: 0.5em;
}

.list_title2 {
	border-left: solid 4px #828270;
	font-weight: bold;
	padding: 0.3em 0.5em;
	margin-bottom: 0.5em;
}

.list_pic {
	display: block;
	margin: 0 auto;
	width: 100%;
	height: auto;
	max-width: 240px;
}

/*--------------thead-dark-------------*/

.table .thead-dark th{
	color: #fff;
	background-color: #6e92ad;
	border-color: #d7d7d7;
}

.list_table thead th, .list_table thead td {
	border-top: none;
	border-bottom: none;
	vertical-align: middle;
}

.list_table tbody td, .list_table tbody th {
    vertical-align: middle;
}

/*--------------nav-pills_nav_black-------------*/

.nav-pills.nav_black .nav-link.active, .nav-pills.nav_black .show>.nav-link {
    color: #fff;
    background-color: #333333;
}

.nav-pills.nav_black .nav-link {
	color: #333333;
    background-color: #e7edf2;
	margin-right: 0.2em;
}

/*--------------nav-pills_nav_gray-------------*/

.nav-pills.nav_gray .nav-link.active, .nav-pills.nav_gray .show>.nav-link {
    color: #fff;
    background-color: #828270;
}

.nav-pills.nav_gray .nav-link {
	color: #999999;
    background-color: #e2e2da;
	margin-right: 0.2em;
}

/*--------------rwd_table-------------*/
.rwd-table td:before {
	display: none;
}

.rwd-table th, .rwd-table td {
	display: table-cell;
	padding: 0.25em 0.5em;
}

.rwd-table th:first-child, .rwd-table td:first-child {
	padding-left: 0;
	padding-right: 0;
}

.rwd-table th, .rwd-table td {
	padding: 0.5em !important;
}

/*------table_點擊底色------*/

.table_active_bg {
	background: #fdffe3;
	font-weight: bold;
}

.table_active_bg td:first-child {
	border-left: 4px solid #70cfd3;
}

.table_td_l td {
	padding: 0.5em 0;
	line-height: 1.3em;
}

#pull, .web_m_t {
	display: none;
}

/*-----------------800_web-------------------*/

/*Styles for screen 800px and lower*/
@media screen and (max-width: 800px) {
	
	.menu_box {
		width: auto;
		min-height: auto;
		border-right: none;
		background: none;
	}
	
	/*------sys_logo------*/
	.sys_title {
		display: none;
	}
	
	.menu_box #pull {
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		white-space: nowrap;
		border-radius: 0 0 0.5em 0;
		padding: 0.2em 0.3em;
	}

	.main_menu {
		display: none;
		position: absolute;
		top: 40px;
		left: 0;
		width: 100vw;
		height: auto;
		max-height: 80vh;
		background: #e4e3d0;
    	padding: 5px 15px;
		border-radius: 5px;
	}
	
	.m_btn_group {
		display: block;
		margin: 0;
		width: auto;
	}
	
	.main_menu .m_menu_btn a {
		padding: 0.7em 0.3em 0.5em 0.3em;
		font-size: medium;
	}
	
	.web_m_t {
		display: block;
	}
	
	/*------con_box------*/
	.con_box {
		margin-left: 0;
	}
	
}


/*-----------------640_web-------------------*/

/*Styles for screen 640px and lower*/
@media screen and (max-width: 640px) {

	.rwd-table {
		background: #fff;
		min-width: 100%;
	}

	.rwd-table th {
		display: none;
	}

	.rwd-table td {
		display: block;
		width: 100%;
	}

	.rwd-table td:before {
		content: attr(data-th) " : ";
		font-weight: bold;
		display: inline-block;
		margin-right: 0.5em;
	}

	.rwd-table th, .rwd-table td {
		text-align: left;
	}

	.rwd-table th, .rwd-table td:before {
		font-weight: bold;
	}
	
}