@charset "utf-8";
/* Font Awesome 5 Pro - regular */
@font-face{font-family:"Font Awesome 5 Pro";font-style:normal;font-weight:400;font-display:auto;src:url(../fonts/fa-regular-400.eot);src:url(../fonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(../fonts/fa-regular-400.woff2) format("woff2"),url(../fonts/fa-regular-400.woff) format("woff"),url(../fonts/fa-regular-400.ttf) format("truetype"),url(../fonts/fa-regular-400.svg#fontawesome) format("svg")}.far{font-family:"Font Awesome 5 Pro";font-weight:400}
/* Font Awesome 5 Pro - solid */
@font-face{font-family:"Font Awesome 5 Pro";font-style:normal;font-weight:900;font-display:auto;src:url(../fonts/fa-solid-900.eot);src:url(../fonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(../fonts/fa-solid-900.woff2) format("woff2"),url(../fonts/fa-solid-900.woff) format("woff"),url(../fonts/fa-solid-900.ttf) format("truetype"),url(../fonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.fas{font-family:"Font Awesome 5 Pro";font-weight:900}
/* Montserrat font-family: 'Montserrat', sans-serif; Regular 400 SemiBold 600 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

/* CSS Reset */
html, body, div, span, applet, object, iframe, form,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 
em, img, q, strong, sub, sup,
dl, dt, dd, ol, ul, li { margin:0; padding:0; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, input, button, header, footer, section, nav, main, figcaption, figure { box-sizing:border-box; }
header, footer, section, nav, main { width:100%; display:block; }
img { border:0; }
ul, ol { list-style:none; }
table { border-collapse:collapse; border-spacing:0; }

select, input, textarea, button { font-size:1rem; }
input[type="checkbox"], input[type="radio"] { margin-right:5px; margin-left:0; }
input[type="button"], input[type="submit"], input[type="reset"], .FormElmt input[type="file"], select, button { cursor:pointer;	-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition:all 0.3s ease; }
input:not([type="checkbox"]), input:not([type="radio"]), input:not([type="file"]) { padding:0;}
button { padding:0; }
p { line-height: 1.5em; }

/* 基本設定 */
body, select, input, textarea, button {  
	color:#333; font-family: 'Montserrat', 'Heiti TC', '黑體-繁', 'Microsoft JhengHei', '微軟正黑體', sans-serif;
	}
body {  
	background:#f2f2f2; -webkit-overflow-scrolling:touch;	/*momentum-based scrolling*/
	}
#Wrap { height:100%; max-width:1920px; margin:0 auto; position:relative; overflow:hidden; }
body.fixed { overflow:hidden; }
/*@media (prefers-reduced-motion: no-preference) {
:root { scroll-behavior:smooth; }
}*/

:root {
	--main_color: #144199;
	--hover_color: #0790db;
	--font_hover: #ef570f;
}

/* 連結 */
a { 
	text-decoration:underline; color:var(--main_color); 
	-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;
}
a:hover, a:focus { text-decoration:none; color:var(--main_color); }
a:focus, :focus { outline:none; }
.font_red { color: #e60000; }
.mt_20 { margin-top: 20px; }
.mb_20 { margin-bottom: 20px; }

/* 反選 */
::selection{ background-color:var(--main_color); color:#fff; }

/*----------------------------------------------------------------------*/
/* Header */
#Header { position:relative; z-index:999; }
#Header .top_bar { background-color: #fff; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding:10px; }

/* logo */
#Header .logo { flex:0 1 auto; height:52px; margin-right: 40px; }
#Header .logo h1 { height:inherit; }
#Header .logo a { 
	height:inherit; text-decoration:none;
	display:flex; align-items:center; -ms-display:flex; -ms-align-items:center;
	}
#Header .logo a:hover { opacity: .7; }
#Header .logo a img { display:block; max-width:100%; max-height:100%; }
#Header .logo a img + img { margin-left: 3.5%; }

/* col_right */
#Header .col_right, #Header .user { display: flex; flex-wrap: wrap; align-items: center; }
#Header .user { line-height: 1.5em; font-size: 1.125em; padding: 0 5px; font-weight: bold; }
#Header .user > li { padding-top: 6px; padding-bottom: 6px; }
.user_name::before { content: '\f2bd'; font-family:"Font Awesome 5 Pro"; font-weight:900; margin-right:5px; font-size: 1.5rem; vertical-align: bottom; }
.user_name .role::before { content: '-'; }
.logout { border-left: 1px solid #ccc; padding-left: 12px; margin-left: 12px; }
.logout a { color: #333; text-decoration: none; }
.logout a::before { content: '\f2f5'; font-family:"Font Awesome 5 Pro"; font-weight:900; font-size: 1.375rem; margin-right:5px; }
.logout a:hover { color:var(--hover_color); }

@media screen and (max-width: 767px) {
    #Header .logo { width: 100%; margin-right: 0; height: 35px; }
    #Header .logo a { justify-content: center; }
    #Header .col_right { position: absolute; right: 5px; top: 63px; z-index: 99; font-size: .75em; color: #fff; }
    .logout { border-left-color: rgba(255,255,255,.5); }
    .logout a, .logout a:hover { color: #fff; }
}

/* 廠商編輯頁 */
.company .MenuBar { display: flex; align-items: center; justify-content: space-between; padding: 0 15px; }
.company .MenuBar h1 { color: #fff; font-size: 1.5rem; white-space: nowrap; }
.company .MenuBar .col_right .menu_style > li:last-child { padding-right: 0; }
.company .MenuBar .menu_switch { left: auto; right: 15px; }
@media screen and (min-width: 1024px) {
	.company .MenuBar nav { display: flex; justify-content: space-between; }
}

/*----------------------------------------------------------------------*/
/* Menu */
.MenuBar {
    background: linear-gradient(to bottom, #144199 0%,#00a7f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#144199', endColorstr='#00a7f4',GradientType=0 );
    position: relative; padding: 10px 0;
}
.menu_style a { text-decoration: none; display: block; }

/* 選單開關 */
.menu_switch { position: absolute; cursor: pointer; }
.menu_icon { position: relative; }
.menu_icon::before, .menu_icon::after { content: ''; }
.menu_icon .line, .menu_icon::before, .menu_icon::after { position: absolute; width: 100%; background: #fff; border-radius: 1px; transition: 0.25s ease; }
.menu_icon::before { top: 0; }
.menu_icon::after { bottom: 0; }

.menu_switch.active .menu_icon::before { transform: rotate(45deg); top: 42%; }
.menu_switch.active .menu_icon::after { transform: rotate(-45deg); top: 42%; }
.menu_switch.active .menu_icon .line { opacity: 0; }

.menu_switch { top: 14px; left: 15px; }
.menu_icon { width: 30px; height: 22px; }
.menu_icon .line { transform: translateY(-50%); top: 50%; }
.menu_icon .line, .menu_icon::before, .menu_icon::after { height: 2px; }

@media screen and (max-width: 1023px) {
    .MenuBar { height: 50px; }

	#MenuBox { visibility: hidden; opacity: 0; position: fixed; left: 0; right: 0; bottom: 0; background-color: #ffffff; z-index: 9999; height: calc(100vh - 122px); overflow-y: auto; }
	#MenuBox.show { visibility: visible; opacity: 1; transition: opacity 0.3s, visibility 0.3s; }
	.menu_style > li { padding: 12px; text-align: center; }
	.menu_style a { font-weight: bold; font-size: 1.375em; }

	.company #MenuBox { height: calc(100vh - 50px); }
}
@media screen and (max-width: 767px) {
	#MenuBox { height: calc(100vh - 105px); }
	.menu_style a { font-size: 1.125em; }
}
@media screen and (min-width: 1024px) {
	.menu_switch { display: none; }
	#Menu { max-width: 1340px; margin: 0 auto; padding: 0 30px; }
	.menu_style { display: flex; justify-content: center; }
	.menu_style:after { content: ""; clear: both; display: block; }
	.menu_style li { position: relative; }
	
	.menu_style > li { flex-shrink: 0; padding: 0 25px; }
	.menu_style > li::before { content: '/'; position: absolute; top: 50%; left: -1px; transform: translateY(-50%); font-family: 'Arial'; font-size: 15px; color: rgba(255,255,255,.4); }
	.menu_style > li:first-child::before { display: none; }
	.menu_style > li > a { line-height: 40px; padding: 5px 0; font-size: 1.125em; letter-spacing: .1em; color: #fff; font-weight: bold; display: inline-block; vertical-align: middle; }
	.menu_style > li:hover > a, .menu_style li.active a { color:#fffa68; }

	/* 隱藏顯示 */
	.menu_style li ul { visibility:hidden; }
	.menu_style li:hover ul li { visibility:visible; }
	.menu_style li ul li ul { visibility:hidden; transition:all 0.3s; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s; }
	.menu_style li ul li:hover ul { visibility:visible; }
	.menu_style li ul li:hover ul li ul { visibility:hidden; }
	.menu_style li ul li ul li:hover ul { visibility:visible; }

	/*第二層底下共用*/
	.menu_style > li > ul { display:none; position:absolute; top:50px; left:50%; width:140px; margin-left: -70px; z-index:999; opacity:0; background-color:#ffffff; }
	.menu_style > li:hover > ul { display:block; visibility:visible; opacity:1; z-index:9999; }
	.menu_style > li ul {
		background-color:#fff;
		-webkit-box-shadow:0 0 6px rgba(0,0,0,0.2);
		-moz-box-shadow:0 0 6px rgba(0,0,0,0.2);
		box-shadow:0 0 6px rgba(0,0,0,0.2);
		-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
	}
	.menu_style > li > ul::after { 
		content:''; display:block; position:absolute; top:-4px; left: 50%; width:8px; height:8px; margin-left: -4px; 
		background-color:#fff; z-index:5; 
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.menu_style ul::before { content:''; display:block; width: 100%; height: 8px; position: absolute; top: 0; left: 0; }
	.menu_style ul li { border-top:1px solid #ddd; }
	.menu_style ul li:first-child { border:none; }
	.menu_style ul li a { line-height:1.5em; padding:8px 12px; text-decoration:none; font-size: 0.9375em; color: #333; }
	.menu_style ul li a:hover { color: #2282b4; }

	.menu_style li.with > a::after { 
		content:''; position:absolute; top:50%; right:10px; width:5px; height:5px; margin-top: -2.5px;
		border-top:1px solid #555; border-right:1px solid #555;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
		}

	/*最後一個往左長*/
	.menu_style > li:last-child > ul > li > ul { right:140px; left:auto; }
	.menu_style > li:last-child > ul > li > ul li > ul { right:140px; left:auto; }
	.menu_style > li:last-child li.with > a::after {
		left:10px; right:auto; 
		-webkit-transform: rotate(-135deg);
		-moz-transform: rotate(-135deg);
		transform: rotate(-135deg);
	}
}

/*----------------------------------------------------------------------*/
/* Center */
#Center { position:relative; margin: 0 auto; padding: 30px 0 40px; }
.inner { max-width: 1340px; margin: 0 auto; padding: 0 30px; }
#Content > *:first-child { margin-top:0; }
#Content > *:last-child { margin-bottom:0; }

/* 內頁區塊 */
#MainBar { padding-bottom: 15px; }
#MainBar .mode { font-size: 1.25em; font-weight: bold; }
#MainBar .btnBox { padding-bottom: 0; }
.BlockItem { margin-top: 60px; }
.BlockItem .ListTable { margin-bottom: 0; }
.BlockItem + .btnBox { margin-top: 60px; }
.ListTable + .FormGroup { margin-top: 30px; }
.modal_cont .BlockItem { margin-top: 40px; }
.FormGroup + .btnBox { margin-top: 40px; }

@media screen and (max-width: 1023px) {
	.BlockItem { margin-top: 40px; }
	.BlockItem + .btnBox { margin-top: 40px; }
	.inner { padding: 0 15px; }
}
@media screen and (min-width: 640px) {
	#MainBar { display: flex; justify-content: space-between; align-items: center; }
}

/* 導覽列(麵包屑) */
#Breadcrumbs ul { overflow:hidden; padding:10px 0; display: inline-block; }
#Breadcrumbs ul li { float:left; padding-right:18px; font-size:0.875em; color:#777; line-height:1.25em; position:relative; }
#Breadcrumbs ul li:last-child { padding-right:0; }
#Breadcrumbs ul li a { display:block; color:#777; text-decoration:none; }
	#Breadcrumbs ul li:after { content:'/'; font-size: 1.125rem; position:absolute; top:0; right:5px; color:#ccc; }
	#Breadcrumbs ul li a:hover { text-decoration:underline; }
#Breadcrumbs ul li:last-child, #Breadcrumbs ul li:last-child a { color:var(--main_color); font-weight: bold; }
	#Breadcrumbs ul li:last-child:after { content:''; }

/* 紀錄 */
.post_info { margin-top:30px; padding:5px 0; text-align:right; }
.post_info span { display:inline-block; line-height:1em; color:#555; }
.post_info span:not(:first-child) { border-left:1px solid #dedede; padding-left:14px; margin-left:12px; }
.post_info.below { margin-bottom: 30px; }

/* 狀態切換 */
.check_btn_items { display: flex; flex-wrap: wrap; }
.check_btn_items.tr li { margin: 0 0 10px 10px; }
.check_btn_items li { position: relative; margin: 0 10px 10px 0; z-index: 1; }
input[type="radio"].check_btn_input { position: absolute; left: 0; top: 0; z-index: 2; visibility: visible; width: 100%; height: 100%; cursor: pointer; opacity: 0; margin: 0; }
.check_btn_label {
    border: 2px solid rgba(170,170,170,.7); color: #777; font-weight: normal;
    cursor: pointer; padding: 8px 20px; display: block; background-color: #fff;
    -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px;
    -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;
}
.check_btn_label .number { background-color: #aaa; color: #fff; padding: 0 5px; border-radius: 10px; margin-left: 2px; transition: all 0.3s ease; font-size: .875em; }
.check_btn_items li:hover .check_btn_label { border: 2px solid rgba(20,65,153,.7); color: var(--main_color); }
.check_btn_items li:hover .number { background-color: var(--main_color); }
.check_btn_input:checked + .check_btn_label .number { background-color: var(--main_color); }
.check_btn_input:checked + .check_btn_label { border: 2px solid rgba(20,65,153,.7); color: var(--main_color); }

/* 頁碼 */
#Pagination { margin-top:40px; clear:both; text-align:center; font-size:0.875rem; color:#555; }
#Pagination .pages { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
#Pagination a { margin:0 5px; position:relative; text-align:center; text-decoration:none; padding-left: .1em; }
	
#Pagination .setting { padding-top:15px; line-height:32px; }
#Pagination .setting select, #Pagination .dev-script-oper input[type="number"], #Pagination .setting input[type="button"], #Pagination .setting input[type="submit"] { 
	font-size:0.875rem;
	-webkit-transition: all ease .2s;
	-moz-transition: all ease .2s;
	transition: all ease .2s;
}
#Pagination .setting select { padding:0 5px; }
#Pagination .dev-script-oper input[type="number"] { width:50px; padding:0 5px; }
#Pagination .setting select, #Pagination .dev-script-oper input[type="number"] {
	background-color:#fff; border: 1px solid #ddd; height:32px;
	-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
}
#Pagination .setting select:focus, #Pagination .dev-script-oper input[type="number"]:focus {
	background-color:#fffdf3;
}
#Pagination .setting input[type="button"], #Pagination .setting input[type="submit"] {
	padding:0 12px; margin-left:3px; background-color:#555; height:32px; line-height:32px; color:#fff; font-weight: bold; border: none; vertical-align: top;
	-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
}
#Pagination .setting input[type="button"]:hover, #Pagination .setting input[type="button"]:focus,
#Pagination .setting input[type="submit"]:hover, #Pagination .setting input[type="submit"]:focus { background-color:var(--main_color); }

@media screen and (max-width: 1023px) {
	#Pagination a { 
		display:none; line-height:32px; color:#fff; background-color:#777; 
		-webkit-border-radius:20px;
		-moz-border-radius:20px;
		border-radius:20px;
	}
	#Pagination a.first, #Pagination a.last, #Pagination a.prev, #Pagination a.next { width:auto; padding:0 10px; }
	#Pagination .setting { padding-top:10px; line-height:24px; }
	#Pagination .dev-script-oper { display:none; }
}
@media screen and (max-width: 399px) {
	#Pagination a.prev, #Pagination a.next { display:inline-block; }
}
@media screen and (min-width: 400px) and (max-width: 1023px) {
	#Pagination a.first, #Pagination a.prev, #Pagination a.next, #Pagination a.last { display:inline-block; }
}
@media screen and (min-width: 1024px) {
	#Pagination a { 
		width:32px; line-height:32px; color:#555; 
		-webkit-border-radius:16px;
		-moz-border-radius:16px;
		border-radius:16px;
	}
	#Pagination a:hover, #Pagination a:focus, #Pagination a.focuz { background-color:var(--main_color); color: #fff; }
	#Pagination a.first, #Pagination a.last, #Pagination a.prev, #Pagination a.next { text-indent:-99px; overflow:hidden; }
	#Pagination a.first::before, #Pagination a.first::after, 
	#Pagination a.last::before, #Pagination a.last::after, 
	#Pagination a.prev::before, #Pagination a.next::before { 
		content:''; position:absolute; top:50%; margin-top:-3px; width:6px; height:6px; border-top:1px solid #555; border-left:1px solid #555; 
	}
	#Pagination a.first:hover::before, #Pagination a.first:hover::after, 
	#Pagination a.last:hover::before, #Pagination a.last:hover::after, 
	#Pagination a.prev:hover::before, #Pagination a.next:hover::before { 
		border-color: #fff; 
	}
	#Pagination a.first::before, #Pagination a.first::after, #Pagination a.prev::before { 
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	#Pagination a.last::before, #Pagination a.last::after, #Pagination a.next::before { 
		-webkit-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	#Pagination a.first::before { left:12px; }
	#Pagination a.first::after { left:16px; }
	#Pagination a.prev::before { left:14px; }
	#Pagination a.last::before { right:12px; }
	#Pagination a.last::after { right:16px; }
	#Pagination a.next::before { right:14px; }
}

/*----------------------------------------------------------------------*/
/* Btn Top */
.BtnTop { text-align:center; z-index:10001; position:fixed; bottom:10px; right:10px; display:none; }
	.MenuFix .BtnTop { display:block; }
.BtnTop a { 
	display:block; background-color:var(--main_color); color:#fff; text-align:center; text-decoration:none; 
	overflow:hidden; position:relative; z-index:10000; 
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	}
.BtnTop a::after {
	content:''; position:absolute; top:14px; left:24px; width:7px; height:7px; border-top:2px solid #fff; border-left:2px solid #fff;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	}
.BtnTop a:hover, .BtnTop a:focus { 
	background-color:var(--font_hover); 
	-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,0.4);
    box-shadow: 0 0 15px rgba(0,0,0,0.4);
	}
@media screen and (max-width: 1023px) {
.BtnTop a { width:40px; padding-top:10px; line-height:30px; font-size:0.875rem; }
.BtnTop a::after { top:10px; left:16px; width:6px; height:6px; }
}
@media screen and (min-width: 1024px) {
.BtnTop a { width:60px; padding-top:10px; line-height:50px; }
.BtnTop a::after { top:14px; left:24px; width:7px; height:7px; }
}	

/*----------------------------------------------------------------------*/
/* Footer */
.copyright { text-align: center; font-size: .875em; padding: 10px; background-color: #333; color: #fff; }

/*----------------------------------------------------------------------*/
/* popup box */
.popup_box { 
	display:none; position:fixed; top:0; left:0; width:100%; height:100vh; background-color:rgba(0,0,0,0.75); box-sizing:border-box; z-index:100006; 
	}
	.popup_box.show { display:block; }
.popup_box .box_wrap { 
	position:absolute; top:50%; left:50%; width:96vw; height:96vh; margin:-48vh 0 0 -48vw; box-sizing:border-box; 
	}
.popup_box .box_wrap > div { 
	width:100%; max-width:1600px; height:100%; margin:0 auto; position:relative; 
	background-color:#fff; box-sizing:border-box; 
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	}
.popup_box .scrollable_cont { 
	overflow-y:auto; overflow-x:hidden; height:100%; box-sizing:border-box; position:relative; 
	-webkit-overflow-scrolling:touch; 
	}
	/*添加IOS下卷軸*/
	.popup_box .scrollable_cont::-webkit-scrollbar { -webkit-appearance:none; width:14px; height:14px; }
	.popup_box .scrollable_cont::-webkit-scrollbar-thumb { border-radius:8px; border:3px solid #fff; background-color:rgba(0, 0, 0, .3); }
	.popup_box .scrollable_cont::-webkit-scrollbar-thumb:hover { background-color:#c0321d; }
.popup_box .scrollable_cont > *:first-child { margin-top:0; }
.popup_box .scrollable_cont > *:last-child { margin-bottom:0; }

.popup_box .close { 
	position:absolute; width:32px; height:32px; background-color:#424242; text-indent:-10000px; cursor:pointer; z-index:10000;
	}
.popup_box .close::before, .popup_box .close::after { 
	display:block; content:''; position:absolute; top:50%; left:50%; width:2px; height:16px; margin:-8px 0 0 -1px; background-color:#fff; 
	}
.popup_box .close::before {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
	}
.popup_box .close::after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
	}
.popup_box .close:hover { background-color:#005496; }
	@media screen and (max-width: 1023px) {
	.popup_box .close { top:-5px; right:-5px; }
	.popup_box .box_wrap > div { padding:20px 10px; }
	}
	@media screen and (min-width: 1024px) {
	.popup_box .close { top:10px; right:10px; }
	.popup_box .box_wrap > div { padding:40px; }
	}

/*----------------------------------------------------------------------*/
/* modal */
.modal_box {
	z-index:9999; display:none; background-color:rgba(0,0,0,0.4);
	position:fixed; left:0; top:0; width:100%; height:100%; overflow:auto;
	animation:opac 0.8s
}
.modal_box .modal_wrap { 
	background-color:#fff; box-sizing:border-box; max-height: calc(100vh - 80px);
    position:absolute; left:50%; top:50%;
	-webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;
	-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 0 20px rgba(0,0,0,0.2);
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
	}
.modal_box .modal_wrap .modal_cont { overflow-y:auto; overflow-x:hidden; height:100%; padding: 5px; position:relative; }
.modal_box .modal_wrap .modal_cont::-webkit-scrollbar { -webkit-appearance:none; width:14px; height:14px; }
.modal_box .modal_wrap .modal_cont::-webkit-scrollbar-thumb { border-radius:8px; border:3px solid #fff; background-color:rgba(0, 0, 0, .3); }
.modal_box .modal_wrap .modal_cont::-webkit-scrollbar-thumb:hover { background-color:#000; }

.modal_box .close { 
	position:absolute; cursor:pointer; z-index:10000; text-align: center; top:0; right:0;
	display: flex; justify-content: center; align-items: center; width: 40px; height: 40px;
	-webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;
}
.modal_box .close::before { content:'\f00d'; font-family: 'Font Awesome 5 Pro'; font-weight: 900; font-size: 1.375rem; color: #333; }
.modal_box .close:hover { opacity: .7; }

.modal_title { border-bottom: 1px solid #eee; padding-bottom: 5px; font-size: 1.375em; font-weight: bold; }
.modal_body { padding: 8px 0; }

.alert_box .icon_box { text-align: center; margin-bottom: 10px; }
.alert_box .icon_box .title { font-weight: bold; font-size: 1.25em; margin-top: 5px; }
.alert_box .icon { position: relative; }
.alert_box .icon::before { content: '\f06a'; font-family: "Font Awesome 5 Pro"; font-weight: 400; font-size: 5em; color: #ca0909; }
.alert_box .desc { line-height: 1.5em; }
.alert_box .btnBox { margin-top: 10px; }
.modal_box.alert_box .modal_wrap .modal_cont { display: flex; flex-direction: column; justify-content: center; }
.modal_box.alert_box .modal_wrap { width:400px; padding: 30px 35px; height: 40vh; margin:-20vh 0 0 -200px; }
.modal_box .btnBox button { background-color: #fff; }

.modal_body .SearchBox { margin-top: 0; border-bottom: 1px solid #eee; }
.modal_body .SearchItems { padding: 10px 0; box-shadow: none; }

@media screen and (max-width: 499px) {
	.modal_box.alert_box .modal_wrap { width: 80vw; height: 80vh; margin: -40vh 0 0 -40vw; padding: 25px 30px; }
}
@media screen and (max-width: 1023px) {
	.modal_box .modal_wrap { width: 80vw; height: 80vh; margin: -40vh 0 0 -40vw; padding: 25px 30px; }
    .modal_body .SearchItems { padding: 0 0 10px 0; }
    .modal_body .SearchItems .item { display: block; }
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
	.modal_box .modal_wrap { width: 800px; height: 70vh; margin: -35vh 0 0 -400px; padding: 25px 30px; }
}
@media screen and (min-width: 1280px) {
	.modal_box .modal_wrap { width:1040px; padding: 30px 35px; height: 70vh; margin:-35vh 0 0 -520px; }
}
	
/*----------------------------------------------------------------------*/
/* 表單 */
.FormGroupWarp { margin:40px 0; }
.FormGroup { 
	border:none; background-color:#fff; padding:12px 20px; position:relative; 
	-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;
	-webkit-box-shadow:0 0 10px rgba(0,0,0,.1);
	-moz-box-shadow:0 0 10px rgba(0,0,0,.1);
	box-shadow:0 0 10px rgba(0,0,0,.1);
	}
 	fieldset.FormGroup { max-width:100%; box-sizing:border-box; margin: 0; }
.FormGroup .FormGroupTitle {
    background-color:#454545;
    -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;
}
.FormGroup .FormGroupTitle span { 
	padding:0 1em 0 1.025em; display:inline-block;
	color:#fff; font-size:1.125em; letter-spacing:0.025em; line-height:2.25em;
	}
	/*.FormGroup legend.FormGroupTitle { margin:0; padding:0; display:block; }*/
    .FormGroup.FormElmt .FormGroupTitle select { background-color: transparent; border: none; margin-bottom: 0; padding: 0; height: 40px; line-height: 40px; }
/*.FormGroup > *:last-child { margin-bottom:0; }*/
.FormGroup + .FormGroup { margin-top:50px; }

/* 表單內的小群組 */
.group { border: 1px solid #ddd; border-radius: 8px; position: relative; margin: 5px 0 15px; }
.groupTitle span { background-color: #454545; color: #fff; border-radius: 8px 0 8px 0; padding: 4px 1em; display: inline-block; }
.groupCont { padding: 0 1em; }

div.FormTable { display: flex; flex-wrap: wrap; }
div.FormTable > .item { width:25%; padding:5px 10px; box-sizing:border-box; }
	.BasicInfo div.FormTable > .item { width:33.3333%; }
div.FormTable > .item::after { content:''; display:block; clear:both; }
div.FormTable > .item.two { width:50%; }
div.FormTable > .item.threeQuarters { width:75%; }
div.FormTable > .item.fullwidth { width:100%; }
div.FormTable > .item select, 
div.FormTable > .item input:not([type="radio"]):not([type="checkbox"]):not([type="file"]) { 
	width:100%; margin-bottom: 0; vertical-align: top;
	}
div.FormTable .label { height:30px; line-height:30px; font-weight: bold; }
div.FormTable .label .red { color: #d00; }
div.FormTable > .item .cont { min-height:40px; line-height:40px; font-size:0.9375em; box-sizing:border-box; }
.has_text { display: flex; align-items: baseline; white-space: nowrap; }
.has_text .text { margin-left: 5px; }
.has_text .text + input { margin-left: 5px; }
.ListTable .has_text { justify-content: center; }
div.FormTable.FormElmt textarea { margin-bottom: 0; line-height: 1.5em; }

@media screen and (max-width: 1279px) {
	div.FormTable > .item:not(.fullwidth) { width:33.3333%; }
	div.FormTable > .item.deadline.has_inline_btn { width:66.6666%; }
}
@media screen and (max-width: 767px) {
	div.FormTable > .item:not(.fullwidth) { width:50%; }
}
@media screen and (max-width: 579px) {
	div.FormTable > .item:not(.fullwidth) { width:100%; }
	.FormGroup { padding: 12px 10px; }
	.FormGroup .FormGroupTitle span { font-size: 1em; }
}

.FormTitle { font-size: 1.125em; font-weight: bold; padding: 5px 10px; color: var(--main_color); border-bottom: 1px solid #f2f2f2; margin-bottom: 5px; }
.FormTable + .FormTitle { margin-top: 20px; }

.FormTextBox { padding: 10px; line-height: 2em; }
.FormTextBox > div + div { margin-top: 5px; }
.FormTextBox.inline .item > div { display: inline; }
.FormTextBox.inline .item .cont { display: inline-block; }
.FormElmt .FormTextBox input[type="text"] { margin-bottom: 0; }
.FormTextBox .Tips { margin: 5px 0; }
.FormTextBox .Tips ol li { padding-bottom: 0.5em; }
.FormTextBox .cont.inward { padding-left: 1.25em; }

.TextBox ul { list-style: disc; margin-block-start: 1em; margin-block-end: 1em; padding-inline-start: 40px; }
.TextBox ul li { margin: .5em 0; }

/* table.FormTable */
table.FormTable { width:100%; margin-bottom:20px; }
table.FormTable > tbody > tr > th { line-height:30px; position:relative; color:#000; }
table.FormTable > tbody > tr > th span { color:#e50000; }
table.FormTable > tbody > tr > td { line-height:36px; }

table.FormTable { border-collapse: separate; border-spacing:3px; }
table.FormTable > tbody > tr > th, .FormTable > tbody > tr > td { vertical-align:top; }
table.FormTable > tbody > tr > th { width:185px; padding:15px 12px; text-align:right; background: #eee; }
table.FormTable > tbody > tr > th:empty::after { display:none; }
table.FormTable > tbody > tr > td { padding:12px 12px 4px; background: #fff; }

/* 表單內按鈕 */
.FormElmt .inline_btn { display:inline-block; margin-right:6px; vertical-align:top; }
.FormElmt .inline_btn span { margin-right:6px; margin-bottom:6px; display:inline-block; }
.FormElmt .inline_btn span > * { 
	display:block; padding-left:15px; padding-right:15px; background-color:#b6ac9e; 
	color:#fff; height:40px; line-height:40px; box-sizing:border-box; 
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	}
	.FormElmt .inline_btn span > a { text-decoration:none; }
	.FormElmt .inline_btn span > input { margin:0; border:0; font-size:100%; }
.FormElmt .inline_btn span[class] > * { background-image:url("../images/icon_inline_btn.png"); background-repeat:no-repeat; padding-left:35px; }
	.FormElmt .inline_btn span.search > * { background-position:15px 0; }
.FormElmt .inline_btn span > *:hover, .FormElmt .inline_btn span > *:focus { background-color:#c9161d; }
.FormElmt .inline_btn.block { display:block; margin-left:0; margin-right:0; }

/* 表單警告/提示 */
.FormElmt .form_alert span { color: #e60000; font-size: .875rem; }

/* 表單元件 */
.FormElmt input[type="text"], .FormElmt input[type="password"], .FormElmt input[type="file"], 
.FormElmt input[type="number"], .FormElmt input[type="date"], .FormElmt input[type="month"],
.FormElmt input[type="week"], .FormElmt input[type="time"], .FormElmt input[type="datetime-local"],
.FormElmt input[type="email"], .FormElmt input[type="search"], .FormElmt input[type="tel"], .FormElmt input[type="url"],
.FormElmt input[type="color"], .FormElmt input[type="hidden"], .FormElmt input[type="range"] { 
	line-height:40px; height:40px; 
	}
.FormElmt input[type="text"], .FormElmt input[type="password"], .FormElmt input[type="file"], 
.FormElmt input[type="number"], .FormElmt input[type="date"], .FormElmt input[type="month"],
.FormElmt input[type="week"], .FormElmt input[type="time"], .FormElmt input[type="datetime-local"],
.FormElmt input[type="email"], .FormElmt input[type="search"], .FormElmt input[type="tel"], .FormElmt input[type="url"],
.FormElmt input[type="color"], .FormElmt input[type="hidden"], .FormElmt input[type="range"],
.FormElmt select, .FormElmt textarea { 
	max-width:100%; margin-bottom:5px; vertical-align:middle; font-size:1em; color:#333;
	}
	.FormElmt input::placeholder { color:#666; }
.FormElmt input[type="text"], .FormElmt input[type="password"], 
.FormElmt input[type="number"], .FormElmt input[type="date"], .FormElmt input[type="month"],
.FormElmt input[type="week"], .FormElmt input[type="time"], .FormElmt input[type="datetime-local"],
.FormElmt input[type="email"], .FormElmt input[type="search"], .FormElmt input[type="tel"], .FormElmt input[type="url"], 
.FormElmt input[type="color"], .FormElmt input[type="hidden"], .FormElmt input[type="range"],
.FormElmt select, .FormElmt textarea {
	border:1px solid #ccc; background-color:#fff; box-sizing:border-box; 
	-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;
	}
.FormElmt input[type="text"], .FormElmt input[type="password"], 
.FormElmt input[type="number"], .FormElmt input[type="date"], .FormElmt input[type="month"],
.FormElmt input[type="week"], .FormElmt input[type="time"], .FormElmt input[type="datetime-local"],
.FormElmt input[type="email"], .FormElmt input[type="search"], .FormElmt input[type="tel"], .FormElmt input[type="url"],
.FormElmt input[type="color"], .FormElmt input[type="hidden"], .FormElmt input[type="range"] { 
	padding:0 10px; 
	}
.FormElmt textarea { padding:10px; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; }
.FormElmt select { padding-left:10px; padding-right:10px; height:40px; max-width:100%; }
.FormElmt input[type="radio"] + label, .FormElmt input[type="checkbox"] + label { margin-right:4px; }

.FormElmt input[type="text"]:focus, .FormElmt input[type="password"]:focus, .FormElmt input[type="file"]:focus, 
.FormElmt input[type="number"]:focus, .FormElmt input[type="date"]:focus, .FormElmt input[type="month"]:focus,
.FormElmt input[type="week"]:focus, .FormElmt input[type="time"]:focus, .FormElmt input[type="datetime-local"]:focus,
.FormElmt input[type="email"]:focus, .FormElmt input[type="search"]:focus, .FormElmt input[type="tel"]:focus, .FormElmt input[type="url"]:focus,
.FormElmt input[type="color"]:focus, .FormElmt input[type="hidden"]:focus, .FormElmt input[type="range"]:focus,
.FormElmt textarea:focus, .FormElmt select:focus {
	background-color:#fffdf3;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.3);
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
	-webkit-transition: all ease-in-out .15s;
	-moz-transition: all ease-in-out .15s;
	transition: all ease-in-out .15s;
	}
.FormElmt input[disabled], .FormElmt textarea[disabled], .FormElmt select[disabled] { 
	background-color:#eee; border: 1px solid #eee; opacity:1; line-height: inherit;
	}
	.FormElmt select[disabled] { cursor:default; }
	.FormElmt input[type="file"][disabled] { border:0; background:none; }
	.FormElmt input[type="radio"][disabled] + label, .FormElmt input[type="checkbox"][disabled] + label { color:#b3b3b3; }

@media screen and (max-width: 639px) {
	.FormElmt input[type="text"], .FormElmt input[type="password"], .FormElmt input[type="file"], 
	.FormElmt input[type="number"], .FormElmt input[type="date"], .FormElmt input[type="month"],
	.FormElmt input[type="week"], .FormElmt input[type="time"], .FormElmt input[type="datetime-local"],
	.FormElmt input[type="email"], .FormElmt input[type="search"], .FormElmt input[type="tel"], .FormElmt input[type="url"],
	.FormElmt input[type="color"], .FormElmt input[type="hidden"], .FormElmt input[type="range"],
	.FormElmt select, .FormElmt textarea { 
		font-size:0.9375rem;
		}
	.FormElmt input[type="file"] { width:100%; }
	.FormElmt input[type="text"], .FormElmt input[type="password"], .FormElmt input[type="number"], .FormElmt input[type="date"], .FormElmt input[type="month"], .FormElmt input[type="week"], .FormElmt input[type="time"], .FormElmt input[type="datetime-local"], .FormElmt input[type="email"], .FormElmt input[type="search"], .FormElmt input[type="tel"], .FormElmt input[type="url"], .FormElmt input[type="color"], .FormElmt input[type="hidden"], .FormElmt input[type="range"] {
		padding: 0 10px;
	}
	.FormElmt select { padding-left: 5px; }
}

@media screen and (max-width: 767px) {
	table.FormTable, table.FormTable tbody, table.FormTable tr, table.FormTable th, table.FormTable td { display:block; }
	table.FormTable > tbody > tr > th { width: 100%; text-align: left; padding: 10px; }
	table.FormTable > tbody > tr > td { padding: 10px 0; }
}
	
.FormElmt hr { margin:15px 0 5px; }
.FormElmt .w40 { width:40px; }
.FormElmt .w60 { width:60px; }
.FormElmt .w80 { width:80px; }
.FormElmt .w100 { width:100px; }
.FormElmt .w150 { width:150px; }
.FormElmt .w200 { width:200px; }
.FormElmt .w250 { width:250px; }
.FormElmt .w300 { width:300px; }
.FormElmt .w350 { width:350px; }
.FormElmt .w400 { width:400px; }
.FormElmt .w500 { width:500px; }
.FormElmt .fullwidth { width:100%; }
.FormElmt .date, .FormElmt .datepicker { width:120px; }
.FormElmt .note { display:block; color:#e60000; }
.FormElmt .FormTable .note { font-size:0.875rem; }
.FormElmt .FormTable span.note { display:inline-block; margin-left:5px; }
.FormElmt .FormTable br + .note { display:block; margin-left:0; }
.FormElmt input[type="text"] + .text { margin-left: 5px; }
.FormElmt .front_text { margin-right: 5px; }

/* checkbox/radio群組 */
.FormElmt .input_group { line-height: 2em; }
.FormElmt .input_group.inline { display:flex; flex-wrap: wrap; }
.FormElmt .input_group.inline > div { margin-right: 12px; }
.FormElmt .input_group.inline > div.with_input { margin-top: 2px; margin-bottom: 0; }
.FormElmt .input_group > div { margin-top: 10px; margin-bottom: 10px; }
.FormElmt .FormTable .input_group > div { margin-top: 5px; margin-bottom: 5px; }
.FormElmt .input_group input[type="text"] { margin-left: 8px; }
.FormElmt .input_group .with_input input[type="text"] { margin-left: 0; margin-bottom: 0; }

/* 驗證碼 */
.FormElmt .randomcode { 
	display:flex; align-items:center; align-content:center; flex-wrap:wrap;
	-ms-display:flex; -ms-align-items:center; -ms-align-content:center; -ms-flex-wrap:wrap;
	}
.FormElmt .randomcode > div { flex:0 1 auto; margin-right:10px; line-height:normal; }
.FormElmt .randomcode .input input[type="text"] { width:160px; }
.FormElmt .randomcode .img img { display:inline-block; }
.FormElmt .randomcode .btns { margin-left:10px; }
.FormElmt .randomcode .btns > * { 
	display:inline-block; border:0; padding:0; margin-right:10px; height:32px; position:relative; 
	font-size:0.875rem; line-height:32px; color:#555; text-decoration:none;
	}
.FormElmt .randomcode .btns > *:last-child { margin-right:0; }
.FormElmt .randomcode .btns > *:hover, .FormElmt .randomcode .btns > *:focus { color:#ff6a18; }
.FormElmt .randomcode .btns > *::before { 
	display:inline-block; content:''; width:16px; height:16px; vertical-align:middle; margin-right:5px; 
	background:url("../images/icon_random_code.png") no-repeat; background-size:200%; 
	}
	.FormElmt .randomcode .refresh::before { background-position:0 0; }
	.FormElmt .randomcode .play::before { background-position:0 100%; }
	.FormElmt .randomcode .refresh:hover::before, .FormElmt .randomcode .refresh:focus::before { background-position:right 0; }
	.FormElmt .randomcode .play:hover::before, .FormElmt .randomcode .play:focus::before { background-position:right 100%; }
.FormElmt .randomcode .btns > *::after { display:block; content:'';position:absolute; bottom:4px; left:0; width:100%; height:1px; background-color:#d4d4d4; }
.FormElmt .randomcode .btns > *:hover::after, .FormElmt .randomcode .btns > *:focus::after { background-color:#ff6a18; }


/*----------------------------------------------------------------------*/
/* 客製checkbox/radio */
.control { cursor: pointer; position: relative; padding-left: 1.5em; font-size: 1.125em; }
.control_indicator { position: absolute; top: 0; left: 0; height: 20px; width: 20px; border: 2px solid #c1c1c1; border-radius: 4px; }
.control:hover input ~ .control_indicator { border: 2px solid #333; }
.control input:focus ~ .control_indicator { border: 2px solid var(--main_color); }
.control input:disabled ~ .control_indicator { background: #fff; border: 1px solid #ccc; opacity: 0.5; pointer-events: none; }
.control_indicator:after { content: ''; position: absolute; display: none; }
.control input:checked ~ .control_indicator:after { display: block; }

/* checkbox */
.control.control_checkbox input[type="checkbox"] { position: absolute; z-index: -1; opacity: 0; width: 0; height: 0; }
.control_checkbox input[type="checkbox"]:checked ~ .control_indicator {
    background: var(--main_color); border: 2px solid var(--main_color);
}
.control_checkbox:hover input:not([disabled]):checked ~ .control_indicator,
.control_checkbox input:checked:focus ~ .control_indicator {
    background: var(--main_color);
}
.control_checkbox .control_indicator:after {
    left: 5px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.control_checkbox input:disabled ~ .control_indicator:after {
    border-color: #fff;
}

/* radio */
.control.control_radio input[type="radio"] { position: absolute; z-index: -1; opacity: 0; width: 0; height: 0; }
.control_radio .control_indicator { border-radius: 50%; }
.control_radio:hover input:not([disabled]):checked ~ .control_indicator,
.control_radio input:checked:focus ~ .control_indicator {
    background: #fff;
}
.control_radio input:checked ~ .control_indicator {
    background: #fff; border: 2px solid var(--main_color);
}
.control_radio .control_indicator:after {
    left: 3px; top: 3px; height: 14px; width: 14px; border-radius: 50%; background: var(--main_color);
}
.control_radio input:disabled ~ .control_indicator:after {
    background: var(--main_color);
}

/* 客製file */
.control_file label { background: #777; color: #fff; border-radius: 8px; padding: 0 .75em; transition: all 0.3s ease; cursor: pointer; display: inline-block; height: 36px; line-height: 36px; }
.control_file label:hover { background: var(--hover_color); }

/*----------------------------------------------------------------------*/
/*Tips*/
.Tips { line-height: 1.5em; margin: 30px 0; }
.Tips ol { list-style-type: decimal; }
.Tips ol li { margin-left: 1.5em; padding-bottom: .75em; }
.Tips ol li:last-child { padding-bottom: 0; }
.Tips .label { flex-shrink: 0; }
.Tips .label::before { content: '\f05a'; font-family:"Font Awesome 5 Pro"; font-weight:900; color: #ca0909; margin-right: 5px; font-size: 1.125rem; }

@media screen and (min-width: 580px) {
	.Tips { display: flex; }
}
@media screen and (max-width: 579px) {
	.Tips .label { padding-bottom: .5em; }
}

/*----------------------------------------------------------------------*/
/* 按鈕們 */
.btnBox { display: flex; flex-wrap: wrap; padding-bottom: 10px; }
.btnBox.tr { justify-content: flex-end; }
.btnBox.tc { justify-content: center; }
.btnBox > div { margin-bottom: 10px; }
.btnBox.tc > div { margin: 0 10px 10px 10px; }
.btnBox.tr > div { margin-left: 10px; }
.btnBox.tl > div { margin-right: 10px; }
.btnBox.tr > div:first-child, .btnBox.tl > div:first-child { margin-left: 0; }
.btnBox a, .btnBox input, .btnBox button {
	display:block; border:2px solid #555; padding:8px 20px;
	color:#333; font-size:1rem; letter-spacing:0.5px; text-align:center;
	-webkit-border-radius:20px; -moz-border-radius:20px; -o-border-radius:20px; border-radius:20px; background-color: transparent;
}
.btnBox a { text-decoration:none; }
.btnBox a:hover { text-decoration:none; background:var(--hover_color); border:2px solid var(--hover_color); color:#fff; }
.btnBox input { line-height:34px; position:relative; }
.btnBox input:hover, .btnBox button:hover { background:var(--hover_color); border:2px solid var(--hover_color); color:#fff; }
.btnBox button { position:relative; }

.btnBox a::before, .btnBox button::before { font-family:"Font Awesome 5 Pro"; font-weight:900; margin-right:5px; }
.btnBox .add a::before { content:"\f067"; }
.btnBox .edit a::before { content:"\f044"; }
.btnBox .del a::before { content:"\f2ed"; }
.btnBox .save a::before, .btnBox .save button::before { content:"\f0c7"; }
.btnBox .cancel a::before, .btnBox .cancel button::before { content:"\f00d"; }
.btnBox .check a::before, .btnBox .check button::before { content:"\f00c"; }
.btnBox .back a::before { content:"\f053"; }
.btnBox .search a::before, .btnBox .search button::before { content:"\f002"; }
.btnBox .sync a::before { content:"\f2f1"; }
.btnBox .eye a::before { content:"\f06e"; }
.btnBox .send a::before { content:"\f0e0"; }
.btnBox .change a::before, .btnBox .change button::before { content:"\f0ec"; }
.btnBox .export a::before, .btnBox .export button::before { content:"\f56e"; }
.btnBox .stop a::before { content:"\f28d"; }
.btnBox .print a::before { content:"\f02f"; }
.btnBox .upload a::before { content:"\f0ee"; }
.btnBox .download a::before { content:"\f019"; }

/* 通用按鈕樣式 */
a.btn_style { text-decoration:none; color:#fff; }
button.btn_style { border: none; }
.btn_style { 
	display:block; background:#777; color:#fff; text-align:center; font-size: 1rem;
	-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition:all 0.3s ease;
	}
	.btn_style + .btn_style { margin-left:10px; }
	input[type="text"] + a.btn_style { margin-left:5px; }
	.btn_reset::before { font-family:"Font Awesome 5 Pro"; font-weight:900; content:"\f2f1"; }
	.btn_download::before { font-family:"Font Awesome 5 Pro"; font-weight:900; content:"\f019"; }
	.btn_upload::before { font-family:"Font Awesome 5 Pro"; font-weight:900; content:"\f0ee"; }
	.btn_money::before { font-family:"Font Awesome 5 Pro"; font-weight:900; content:"\f155"; }
	.btn_add::before { font-family:"Font Awesome 5 Pro"; font-weight:900; content:"\f067"; }
	.btn_search::before { font-family:"Font Awesome 5 Pro"; font-weight:900; content: "\f002"; }
	.btn_del::before { font-family:"Font Awesome 5 Pro"; font-weight:900; content: "\f2ed"; }
	.btn_check::before { font-family:"Font Awesome 5 Pro"; font-weight:900; content:"\f00c"; }
	.btn_cancel::before { font-family:"Font Awesome 5 Pro"; font-weight:900; content: "\f00d"; }
	.btn_list::before { font-family:"Font Awesome 5 Pro"; font-weight:900; content: "\f03a"; }
	.btn_calendar::before { font-family:"Font Awesome 5 Pro"; font-weight:900; content: "\f073"; }
	.btn_edit::before { font-family:"Font Awesome 5 Pro"; font-weight:900; content: "\f044"; }
	.btn_move::before { font-family:"Font Awesome 5 Pro"; font-weight:900; content: "\f0b2"; }
	.btn_copy::before { font-family:"Font Awesome 5 Pro"; font-weight:900; content: "\f0c5"; }
	.btn_cut::before { font-family:"Font Awesome 5 Pro"; font-weight:900; content: "\f0c4"; }
	.btn_export::before { font-family:"Font Awesome 5 Pro"; font-weight:900; content: "\f56e"; }
	.btn_arrow_up::before { font-family:"Font Awesome 5 Pro"; font-weight:900; content: "\f148"; }
	.btn_arrow_down::before { font-family:"Font Awesome 5 Pro"; font-weight:900; content: "\f149"; }
.btn_style:hover { background: var(--hover_color); }
span.name + .btn_style { margin-left: 8px; }

a.btn_style_t { display:block; color:#333; text-decoration:none; font-size: 1.375rem; padding: 0 8px; }
a.btn_style_t:hover { color: var(--font_hover); }

/* 符號加文字 */
a.btn_style_text { display:block; color:#333; text-decoration:none; padding: 0 8px; }
a.btn_style_text::before { margin-right: 5px; }
a.btn_style_text:hover { color: var(--font_hover); }

.ListTable .btn_style { 
	display:inline-block; height:36px; line-height:36px; width: 36px; text-align:center; 
	-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; 
}
.input_group .btn_style { 
	display:inline-block; height:36px; line-height:36px; width: 36px; text-align:center; 
	-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; 
}

/* 通用按鈕 */
.BtnCommon { clear:both; display: flex; justify-content: center; align-items: center; padding-top: 10px; margin-bottom:10px; text-align: center; }
	.BtnCommon.tl { justify-content: flex-start; }
	.BtnCommon.tr { justify-content: flex-end; }
.BtnCommon a, .BtnCommon input { display:block; }
	.BtnCommon.large a, .BtnCommon.large input { height:48px; line-height:48px; }
	.BtnCommon.mid a, .BtnCommon.mid input { height:40px; line-height:40px; }
	.BtnCommon.small a, .BtnCommon.small input { height:36px; line-height:36px; }

.BtnCommon > div { position: relative; margin: 10px; }
.BtnCommon div[class]:before { 
	display:block; position:absolute; top:50%; width:20px; height:20px; margin-top:-10px; z-index: 3; pointer-events: none;
    content:'';  font-family:"Font Awesome 5 Pro"; font-weight:900; color: #fff; line-height: 20px;
	}
	.BtnCommon.large div[class]:before { left:20px; }
	.BtnCommon.mid div[class]:before { left:20px; }
	.BtnCommon.small div[class]:before { left:15px; }
	.BtnCommon div.submit::before { content: "\f00c"; }
	.BtnCommon div.cancel::before { content: "\f00d"; }
	.BtnCommon div.search::before { content: "\f002"; }

.BtnCommon a, .BtnCommon input { box-sizing:border-box; position:relative; z-index:2; background-color: var(--main_color); color: #fff; border: 0; border-radius: 25px; font-size: 1.125em; font-weight: bold; height: 40px; line-height: 40px; padding: 0 20px 0 40px; }
    .BtnCommon div.cancel input { background-color: #666; }
.BtnCommon a:hover, .BtnCommon div input:hover { background-color: var(--hover_color); }
	.BtnCommon.large a, .BtnCommon.large input { padding:0 30px; font-size:1.25em; }
	.BtnCommon.mid a, .BtnCommon.mid input { padding:0 25px; font-size:1em; }
	.BtnCommon.small a, .BtnCommon.small input { padding:0 15px; font-size:0.9375em; }
	.BtnCommon.large div[class] a, .BtnCommon.large div[class] input { padding-left:45px; }
	.BtnCommon.mid div[class] a, .BtnCommon.mid div[class] input { padding-left:45px; }
	.BtnCommon.small div[class] a, .BtnCommon.small div[class] input { padding-left:40px; }

.SearchBox .BtnCommon > div { margin: 0 10px; }

/*----------------------------------------------------------------------*/
/* datepicker共通設定 */
.ui-datepicker { 
	background-color:#fff; padding:15px 8px 7px 8px; margin-top:5px; position:relative; display:none;
	-webkit-box-shadow: 0 0 5px #b2b2b2;
	-moz-box-shadow: 0 0 5px #b2b2b2;
	box-shadow: 0 0 5px #b2b2b2;
    -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;
	}
.ui-datepicker-prev, .ui-datepicker-next { 
	display:block; position:absolute; top:24px; width:14px; height:14px;
	text-indent:-10000px; cursor:pointer; 
	}
	.ui-datepicker-prev { left:12px; }
	.ui-datepicker-next { right:12px; }

.ui-datepicker-prev::before, .ui-datepicker-next::before { content:''; position:absolute; top:2px; width:8px; height:8px; border-top:2px solid #333; border-left:2px solid #333; }
.ui-datepicker-prev:hover::before, .ui-datepicker-next:hover::before { border-top:2px solid var(--font_hover); border-left:2px solid var(--font_hover); }
.ui-datepicker-prev::before { 
	-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); left:4px; 
	}
.ui-datepicker-next::before { 
	-webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); transform: rotate(135deg); right:4px; 
	}

.ui-datepicker-title { text-align:center; font-size:0.75rem; font-weight:bold; line-height:30px; }
.ui-datepicker-title select { 
	height:30px; padding:5px; border:1px solid #ccc; font-size: 1em;
	-webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; 
	}
.ui-datepicker-title select:focus { outline:none; }
.ui-datepicker-title select.ui-datepicker-year { margin-right:6px; }
.ui-datepicker-title select.ui-datepicker-month { margin-left:6px; }
.ui-datepicker-calendar { margin-top:5px; }
.ui-datepicker-calendar th, .ui-datepicker-calendar td { 
	width:27px; padding:0; font-family:Arial, Helvetica, "微軟正黑體", sans-serif; text-align:center; 
	}
.ui-datepicker-calendar th { font-size:.75em; font-weight:bold; }
.ui-datepicker-calendar td { font-size:.875em; }
	.ui-datepicker-calendar th span, .ui-datepicker-calendar td span, .ui-datepicker-calendar td a { 
		display:block; padding:5px 0 5px; 
		}
	.ui-datepicker-calendar td a { text-decoration:none; color:#333; }
	.ui-datepicker-unselectable { color:#cfcfcf; }
	.ui-datepicker-today { background-color: var(--main_color); }
		.ui-datepicker-calendar td.ui-datepicker-today a { color:#fff !important; }
		.ui-datepicker-unselectable.ui-datepicker-today { background-color:#f0f0f0; }
	.ui-datepicker-calendar td a.ui-state-default:hover { color:#e60012 }
	.ui-datepicker-current-day a { border:1px solid #333; }


/*----------------------------------------------------------------------*/
/* 搜尋框 */
.SearchBox { margin: 10px 0 30px; }
.SearchItems { background: #fff; padding: 30px 40px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; box-shadow: 0 0 10px rgba(0,0,0,.1); }
.SearchItems .item { padding: 10px 0; }
.SearchItems .label { line-height: 2em; font-weight: bold; font-size: 1.25em; flex: 120px; flex-shrink:0; flex-grow:0; }
.SearchBox.FormElmt select { margin-right: 14px; }
.SearchBox.FormElmt .keyword input[type="text"] { width: 100%; }
.SearchBox.FormElmt .btn button { background-color: var(--main_color); color: #fff; border: 0; border-radius: 25px; font-size: 1.125em; font-weight: bold; padding: 0 1em; height: 40px; line-height: 40px; }
.SearchBox.FormElmt .btn button::before { content: '\f002'; font-family:"Font Awesome 5 Pro"; font-weight:900; margin-right: 5px; font-size: 1rem; vertical-align: bottom; }
.SearchBox.FormElmt .btn button:hover { background-color: #126637; }
.SearchBox .deadline .dash { margin: 0 5px; }

.search_btn { position: relative;  border-radius: 25px; color: #fff; }
.search_btn::before { content: '\f002'; font-family:"Font Awesome 5 Pro"; font-weight:900; font-size: 1rem; vertical-align: middle; pointer-events: none; position: absolute; left: 20px; top: 12px; }
.search_btn input { background-color: var(--main_color); color: #fff; border: 0; border-radius: 25px; font-size: 1.125em; font-weight: bold; height: 40px; padding: 0 20px 0 40px; }
.search_btn input:hover { background-color: var(--hover_color); }

@media screen and (max-width: 1023px) {
	.SearchBox { margin-bottom: 20px; }
	.SearchItems { padding: 10px 20px; }
	.SearchItems .label { font-size: 1.25em; }
	.SearchItems .cont { font-size: 1em; }
	.SearchBox.FormElmt .btn button { font-size: 1em; }
	.check_btn_label, .btnBox a, .btnBox input { font-size: .875em; }
}

@media screen and (min-width: 640px) {
	.SearchItems .item { display: flex; }
	.SearchItems .cont { display: flex; flex: 1; }
	.SearchItems .keyword { display: flex; width: 100%; }
	.SearchBox .btn { margin-left: 20px; flex-shrink:0; flex-grow:0; }
}
@media screen and (max-width: 639px) {
	.SearchItems .label { font-size: 1.125em; }
	.SearchItems .item { padding: 5px 0; }
	.SearchItems .keyword select, .SearchItems .keyword input[type="text"] { margin-bottom: 10px; }
}

/*----------------------------------------------------------------------*/
/* 檔案下載圖示 */
.file_ext { display:inline-block; position:relative; border-radius:4px; overflow:hidden; vertical-align:middle; }
.file_ext::before { 
	content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; 
	}
	.file_csv::before { background-color:#589c00; }
	.file_doc::before { background-color:#2372ba; }
	.file_img::before { background-color:#5b2d8d; }
	.file_mov::before { background-color:#c51700; }
	.file_other::before { background-color:#919191; }
	.file_pdf::before { background-color:#ea4c3a; }
	.file_ppt::before { background-color:#dd5b26; }
	.file_txt::before { background-color:#919191; }
	.file_xls::before { background-color:#08743b; }
	.file_xml::before { background-color:#157efb; }
	.file_zip::before { background-color:#e67e22; }
	.file_odt::before { background-color:#2372ba; }
	.file_ods::before { background-color:#08743b; }
	.file_odp::before { background-color:#dd5b26; }
	.file_wmf::before { background-color:#2f5483; }
	.file_dwg::before { background-color:#2f5483; }
.file_ext::after { 
	content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%;
	background-repeat:no-repeat; background-position:center center; background-size:cover; 
	}
	.file_csv::after { background-image:url("../images/file_ext/csv.png"); }
	.file_doc::after { background-image:url("../images/file_ext/doc.png"); }
	.file_img::after { background-image:url("../images/file_ext/img.png"); }
	.file_mov::after { background-image:url("../images/file_ext/mov.png"); }
	.file_other::after { background-image:url("../images/file_ext/other.png"); }
	.file_pdf::after { background-image:url("../images/file_ext/pdf.png"); }
	.file_ppt::after { background-image:url("../images/file_ext/ppt.png"); }
	.file_txt::after { background-image:url("../images/file_ext/txt.png"); }
	.file_xls::after { background-image:url("../images/file_ext/xls.png"); }
	.file_xml::after { background-image:url("../images/file_ext/xml.png"); }
	.file_zip::after { background-image:url("../images/file_ext/zip.png"); }
	.file_odt::after { background-image:url("../images/file_ext/odt.png"); }
	.file_ods::after { background-image:url("../images/file_ext/ods.png"); }
	.file_odp::after { background-image:url("../images/file_ext/odp.png"); }
	.file_wmf::after { background-image:url("../images/file_ext/wmf.png"); }
	.file_dwg::after { background-image:url("../images/file_ext/dwg.png"); }

/*----------------------------------------------------------------------*/
/* 文字列表 */
.ListTable { margin-bottom: 20px; position:relative; }
.ListTable ~ .ListTable::before { content: ''; display: block; width: 100%; height: 1px; background: #ccc; margin-bottom: 40px; }
.ListTable ~ .ListTable { margin-top: 40px; }
.ListTable caption { text-align: left; padding: 15px 0; font-size: 1.375em; letter-spacing: .025em; font-weight: bold; color: #304fb0; }
.ListTable .title a:hover, .ListTable .title a:focus { color: #ef570f; }
.ListTable .unread .title a { color: #304fb0; font-weight: bold; }
.ListTable .abnormal { color: #e10000; }
.ListTable .abnormal .title a { color: #e10000; }
.ListTable tr.cancel td { color: #aaa; }
.ListTable span.prefix { margin-right: 5px; }

.ListTable td.no { white-space:nowrap; }
.ListTable td.tl { text-align:left; }
.ListTable td.desc { max-width: 12em; text-align:left; }
.ListTable td.num { text-align:right; }

.FormGroup + .ListTable { margin-top: 40px; }

.edit-btns { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.edit-btns > * { margin: 5px; }
.edit-btns a { text-decoration: none; }
.edit-btns button { border: none; }
.edit-btns a, .edit-btns button { background-color: #777; color: #fff; border-radius: 8px; padding: .25em .5em; }
.edit-btns a:hover, .edit-btns button:hover { background-color: var(--hover_color); }

/* 表格前文字 */
.table_title { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.table_title h3, .table_title .title { font-size: 1.375em; margin-bottom: 10px; font-weight: bold; }
.table_title .btnBox { padding-bottom: 0; }

.table_title + .BlockItem { margin-top: 30px; }
.SearchBox + .table_title { align-items: flex-start; }
.SearchBox + .table_title > * { padding-top: 10px; }

@media screen and (max-width: 767px) {
	.rwdTable a.btn_style_t { display: inline-block; }
	.ListTable .rwdTable td.download ul { justify-content: flex-start; }
	.ListTable .rwdTable td.download.desc ul li { margin: 5px 0; }
	.ListTable { background-color:#fff; border-radius:8px; overflow: hidden; }
    
	table.rwdTable tr:first-child { position:absolute; left:-10000px; top:-10000px; }
	table.rwdTable, table.rwdTable tbody, table.rwdTable tr, table.rwdTable th, table.rwdTable td { display:block; }
	table.rwdTable tr { padding:10px; }
	table.rwdTable tr:not(:last-child) { border-bottom:1px solid #d4d4d4; }
	table.rwdTable tr:nth-child(odd) { background-color:#fafafa; }

	table.rwdTable td { margin:5px 0; text-align:left; }
	.rwdTable td.no { display:none; }
	.rwdTable td:before { font-weight:bold; content: attr(data-th) '：';  }
	.rwdTable td.edit:before, .rwdTable td.checkbox:before { content: ''; }
    .edit-btns { display: inline-block; }
}
@media screen and (min-width: 768px) {
	.ListTable table {
		width:100%; background-color:#fff; overflow: hidden;
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
		-moz-box-shadow: 0 0 10px rgba(0,0,0,0.1);
		box-shadow: 0 0 10px rgba(0,0,0,0.1);
		border-collapse: separate;
		border-spacing: 0px;
		-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;
	}
	.ListTable tr:first-child th:first-child {-webkit-border-radius:8px 0 0 0; -moz-border-radius:8px 0 0 0; border-radius:8px 0 0 0; }
	.ListTable tr:first-child th:last-child {-webkit-border-radius:0 8px 0 0; -moz-border-radius:0 8px 0 0; border-radius:0 8px 0 0; }
	.ListTable tr th:first-child, .ListTable tr td:first-child { padding-left: 15px; }
	.ListTable tr th:last-child, .ListTable tr td:last-child { padding-right: 15px; }
	.ListTable.FormElmt input[type="text"], .ListTable.FormElmt select { margin-bottom: 0; }
	.ListTable.FormElmt input[type="text"] { height: 36px; line-height: 36px; }
	.ListTable.FormElmt select { height: 36px; line-height: 27px; padding: 4px .5em; }
	
	.ListTable th, .ListTable td { vertical-align:middle; }
	.ListTable th { padding:12px 10px; color:#fff; line-height:1.5em; background: var(--main_color); white-space: nowrap; }
	.ListTable td { padding:10px; text-align:center; line-height:1.5em; }
	.ListTable tr:nth-child(2n+3) { background-color:#eee; }
	.ListTable tr:hover { background-color:#fefaee; }
	
	.ListTable th.checkbox { width:1.5em; }
	.ListTable td.checkbox { width:1.5em; }
	.ListTable th.date { width:7em; }
	.ListTable td.date { width:7em; }

	.itemTable { overflow: hidden; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; background-color: #f2f2f2; margin: 10px 0; }
	.itemTable table { width: 100%; }
	.itemTable th, .itemTable td { padding:10px 5px; text-align:center; line-height:1.5em; }
	.itemTable tr:first-child th:first-child {-webkit-border-radius:8px 0 0 0; -moz-border-radius:8px 0 0 0; border-radius:8px 0 0 0; }
	.itemTable tr:first-child th:last-child {-webkit-border-radius:0 8px 0 0; -moz-border-radius:0 8px 0 0; border-radius:0 8px 0 0; }
	.itemTable tr th:first-child, .itemTable tr td:first-child { padding-left: 10px; }
	.itemTable tr th:last-child, .itemTable tr td:last-child { padding-right: 10px; }
	.itemTable.FormElmt input[type="text"], .itemTable.FormElmt select { margin-bottom: 0; }
	.itemTable tr:not(:first-child) { border-top: 1px solid #ddd; }
}

@media screen and (min-width: 1400px) {
	.ListTable { font-size: 1.125em; }
	.ListTable th, .ListTable td { line-height: 1.445em; }
	.SearchItems .cont { font-size: 1.125em; }
	.SearchItems .label { font-size: 1.375em; flex: 130px; flex-shrink: 0; flex-grow: 0; }
}

/*----------------------------------------------------------------------*/
/* 頁籤 */
.tab { overflow: hidden; padding: 5px; }
.tab button { background-color: #eee; float: left; border: none; outline: none; cursor: pointer; padding: 8px 16px; transition: 0.3s; border-radius: 10px; margin: 5px; }
.tab button:hover { background-color: #ddd; }
.tab button.active { background-color: var(--main_color); color: #fff; }
.tabcontent { display: none; padding: 6px 0; }

/*----------------------------------------------------------------------*/
/*測試用menu*/
.ifun_text_menu { position:fixed; top:0; left:0; z-index:10006; }
.ifun_text_menu ul { box-sizing: content-box; }
.ifun_text_menu a { display:block; text-decoration:none; }
.ifun_text_menu li:hover > a { color:red; }
.ifun_text_menu > ul > li > a { text-indent:-10000px; width:20px; height:20px; }

.ifun_text_menu > ul ul { display:none; position:absolute; width:150px; border:1px solid #ccc; }
	.ifun_text_menu ul ul ul ul { width:200px; }
.ifun_text_menu li.with::before { 
	content:''; display:block; position:absolute; top:12px; right:6px; width:5px; height:5px;
	border-left:1px solid #999; border-top:1px solid #999;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	transform: rotate(135deg);
	}
	.ifun_text_menu li:hover::before { border-color:red; }
.ifun_text_menu > ul > li > ul { top:20px; left:0; }
.ifun_text_menu > ul > li > ul ul { top:-1px; left:150px; }
.ifun_text_menu > ul li:hover > ul { display:block; } 
.ifun_text_menu > ul ul li { background-color:rgba(255,255,255,0.85); position:relative; }
.ifun_text_menu > ul ul a { padding:6px 10px; line-height:125%; font-size:14px; color:#333; }