@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url('w3css-v4/w3-mui-color.css');
@import url('w3css-v4/w3color.css');
@import url('w3css-v4/w3-fix.css');

/*  */
html, body { font-size: 16px; font-weight: 400; line-height: 1.5; }
html, body, h1, h2, h3, h4, h5, h6, p, i::after { font-family: 'Roboto', 'Verdana', 'Noto Sans TC', 'Microsoft JhengHei', 'Microsoft YaHei', 'PMingLiU', 'simhei', 'sans-serif'; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
a { cursor: pointer; text-decoration: none; }
a:hover { cursor: pointer; text-decoration: none; }
input:focus, button:focus { outline: none; }
figure, figcaption { margin: 0; padding: 0; }
i { line-height: 1; vertical-align: middle; }
body { background-color: #d2d7df; }

/**/
.modal-backdrop.show { opacity: .9; }
.modal-dialog { padding-top: 16px; }
.modal-body h5 { display: inline-block; }
.modal-body b { font-weight: 400; color: #999; }
.modal-button { position: relative; z-index: 10; color: #999; background: transparent; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; line-height: 1.5; width: 30px; height: 30px; }
.modal-button i { font-size: 16px; }

/* Main */
body.MainBg { background-image: url(img/main-bg.jpg); background-repeat: no-repeat; }
.MainSection { width: initial; }
.MainAsideBig { min-height: calc(100vh - 24px); background: #e8eaf6; border-radius: 8px 8px 0 0; box-shadow: 0 0 8px 0 rgba(50, 50, 50, .3); }
.MainTopBar { height: 60px; padding: 0 16px 0 24px; background: #c1daf2; background: linear-gradient(to right, #c1daf2 0%, #bfe7f6 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c1daf2', endColorstr='#bfe7f6', GradientType=1); border-bottom: 1px solid #e5e6e8; border-radius: 8px 8px 0 0; vertical-align: middle; vertical-align: middle; }
.MainNav { padding: 0 16px; }
div.MainMiddle { padding: 0 16px; }
div.MainMiddle > div { min-height: calc(100vh - 60px - 60px - 24px); background: #fff; }
.MainPath { font-weight: normal; line-height: 1; display: block; margin-top: -6px; }
.MainPath a { font-size: 15px; color: #999; }
.MainPath a:hover { color: #0f4c8d; }
@media (min-width:992px) {
	.MainTopBar-Logo {  height: 40px; width: auto;vertical-align: middle; }
	.MainTopBar-Title { font-family: 'Noto Sans TC', sans-serif; font-size: 24px; font-weight: bold; display: inline-block; margin-left: 4px; color: #0f4c8d; vertical-align: middle; }
	.MainUserInfo-xl { display: inline-block; }
	.MainUserInfo span { float: left; vertical-align: middle; }
	.MainUserInfo span.MainUserInfo-Name { line-height: 40px; padding-right: 16px; }
	.MainUserInfo span.MainUserInfo-Name h5 { display: inline-block; }
	.MainUserInfo span.MainUserInfo-Select { width: initial; }
	.MainUserInfo span.MainUserInfo-Out { font-size: 20px; line-height: 40px; padding-left: 16px; }
	.MainUserInfo span.MainUserInfo-Out a { color: #0f4c8d; }
	.MainUserInfo span.MainUserInfo-Out a:hover { color: #1976d2; }
	.MainUserInfo-lg { display: none; }
}
@media (min-width:0) and (max-width:991px) {
	.MainTopBar-InBar { position: relative; left: 32px; }
	.MainTopBar-Logo { height: 20px; width: auto; vertical-align: left; }
	.MainTopBar-Title { font-family: 'Noto Sans TC', sans-serif; font-size: 16px; font-weight: 600; line-height: 1.2; display: block; margin-top: -3px; margin-bottom: 3px; color: #0f4c8d; vertical-align: middle; }
	.MainNav { padding: 0; }
	.MainUserInfo-xl { display: none; }
	.MainUserInfo-lg { display: inline-block; }
	.MainUserInfo-lg .dropdown-toggle::after { display: none; }
	.MainUser-Modal { width: initial; }
	.MainUser-Modal .modal-header { color: #0f4c8d; }
	.MainUser-Modal .modal-footer { width: initial; }
	.MainUser-Modal span.MainUserInfo-Out a { line-height: 1; color: #1976d2; }
	.MainUser-Modal span.MainUserInfo-Out a:hover { color: #0f4c8d; }
	.MainUser-Modal span.MainUserInfo-Out i { font-size: 20px; }
	.MainUserInfo-Select { width: initial; }
}
@media (min-width:0) and (max-width:360px) {
	.MainTopBar-Title { font-size: 15px; margin-top: 0; margin-bottom: 0; }
}
.LoginCard { width: initial; position: relative; }
.LoginCard a { color: #999; }
.LoginCard a:hover { color: #0f4c8d; }
.LoginHeader { width: initial; background-image: url(img/login-bg.jpg); background-repeat: no-repeat; background-position: center bottom; border-radius: 4px 4px 0 0; padding: 80px 16px 8px 16px }
.LoginHeader-Logo { width: 130px; height: auto; }
.LoginHeader-Title { display: block; font-family: 'Noto Sans TC', sans-serif; font-size: 20px; color: #fff; font-weight: bold; }
.LoginHr { margin-left: -20px; margin-right: -20px; }
.LoginBut { background: #0f4c8d; color: #fff; }
.LoginBut:hover { background: #1976d2; color: #fff; }
.LoginCardOut { position: relative; }
.LoginLang { position: absolute; right: 0px; top: -24px; z-index: 10; color: #999; background: transparent; border: 0; border-radius: 4px; cursor: pointer; line-height: 1.3; font-size: 14px; }
.LoginLang:hover { color: #333; }
.LoginLang::after { position: relative; top: 3px; left: -1px; }
@media (min-width:992px) and (max-width:1200px) {
	.LoginCardOut { padding-top: 80px; }
	.LoginCard-Robe { position: absolute; left: 48%; z-index: -1; opacity: 0.8; }
}
@media (min-width:1201px) {
	.LoginCardOut { padding-top: 80px; }
	.LoginCard-Robe { position: absolute; left: 44%; z-index: -1; opacity: 0.8; }
}
@media (min-width:992px) and (max-width:1200px) and (min-height:820px) {
	.LoginCardOut { padding-top: 160px; }
	.LoginCard-Robe { position: absolute; left: 48%; z-index: -1; opacity: 0.8; }
}
@media (min-width:1201px) and (min-height:820px) {
	.LoginCardOut { padding-top: 160px; }
	.LoginCard-Robe { position: absolute; left: 44%; z-index: -1; opacity: 0.8; }
}
@media (min-width:0) and (max-width:991px) {
	.LoginCardOut { padding-top: 40px; }
	.LoginCard-Robe { position: absolute; left: 38%; z-index: -1; opacity: 0.8; }
	.LoginHeader-Title { font-size: 20px; }
}
/* FromStyle */
.FromStyle-Inline { border: 1px solid #ced4da; border-radius: 3px; padding: 7px 0 2px 0; margin: 0 0 0 5px; line-height: 1.2; white-space: nowrap; height: 38px; }
.FromStyle-Inline b { background: #e9ecef; display: inline; padding: 8px 12px 9px 12px; border-right: 1px solid #ced4da; border-radius: 3px 0 0 3px; margin-left: -5px; margin-right: 5px; }
.FromStyle-Inline label { display: inline; }
.FromStyle-Inline input { display: inline; }
.FromStyle-InlinFile { border: 1px solid #ced4da; border-radius: 3px; padding: 7px 8px 2px 0 !important; margin: 0 0 0 5px; line-height: 1.2; white-space: nowrap; height: 38px; }
.FromStyle-InlinFile b { background: #e9ecef; display: inline; padding: 8px 12px 9px 12px; border-right: 1px solid #ced4da; border-radius: 3px 0 0 3px; position: relative; top: 1px; margin-right: 4px; }
.FromStyle-InlinFile label { display: inline-block; margin-right: 8px; }
.FromStyle-InlinFile input { display: inline-block; font-size: 14px; width: 100% !important }


.Style-Table{  }
.Style-Table th{ vertical-align: middle!important; list-style: 1;}
.Style-Table td{ vertical-align: middle!important; list-style: 1;}