* {font-family: "微軟正黑體";}
/* --- remove radius & shadow -------------------------------------------------------------- */
body {padding-top: 30px; padding-bottom: 20px;}
body,
.form-control {
	font-family: 'RobotoDraft','Roboto',sans-serif;
	color: #666;
}
body,
.form-control,
.dropdown-menu {font-size: 13px;}
a {color: #666;}
input:focus,
input.active {outline: 0;}
.container {padding-left: 0; padding-right: 0;}
/* --- Middle Header ----------------------------------------------------------------------- */
.header-body {margin-bottom: 10px; padding-left: 20px; padding-right: 20px; text-align: center;}
.header-body img {max-width: 460px;}

#brand-item {margin-top: 10px; margin-bottom: 10px;}
#brand-item .col {padding: 0; border-left: 1px solid #a3a3a3;}
#brand-item .col:nth-child(1) {border-left: 0px solid transparent;}
#brand-item .col img {width: 100%; max-width: 180px;}
#brand-item .col a {padding: 8px 25px; display: inline-block; width: 100%; height: auto;}
#brand-item .col a:hover {background: #808080;}
#brand-item .col.active a {background: #bdbec1;}
#brand-item .col.active img {filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(143deg) brightness(300%) contrast(99%);}

header .col {text-align: center;}
@media (max-width: 575.98px) {
	.header-body img {width: 100%;}
	#brand-item .row {padding-left: 10px; padding-right: 10px;}
	#brand-item .col img {max-width: 120px;}
	#brand-item .col a {padding: 20px 25px;}
	#brand-item .row .col {padding-left: 0; padding-right: 0; min-width: 120px;}
}
/* --- Article -------------------------------------------------------------- */
/* --------- End of Article ------------------------------------------------- */
/* --- Section -------------------------------------------------------------- */
section #message-box [class*='col-sm-'] {padding: 15px 10px; text-align: center; font-size: 16px; line-height: 1.4rem;}
section #message-box img {height: 30px;}
section #message-box a {color: #fff;}
section #message-box p {margin-top: 10px; margin-bottom: 0;}

section #message-box .youtube-box img:nth-child(1) {height: 50px; margin: 15px 10px;}
section #message-box .youtube-box img:nth-child(2) {height: 80px;}
@media (max-width: 575.98px) {
	section #message-box .youtube-box img:nth-child(1) {height: 35px; margin: 10px 10px;}
	section #message-box .youtube-box img:nth-child(2) {height: 60px;}
}
@media (min-width: 576px) and (max-width: 991.98px) {
	section #message-box .youtube-box img:nth-child(1) {height: 30px; margin: 15px 5px;}
	section #message-box .youtube-box img:nth-child(2) {height: 60px;}
}
@media (min-width: 576px) and (max-width: 767.98px) {
	section #message-box .youtube-box img:nth-child(1) {margin-top: 0; margin-bottom: 10px;}
}
@media (min-width: 768px) and (max-width: 991.98px) {
	section #message-box .youtube-box {padding-top: 28px;}
}
.item-info {padding: 10px 10px;}
.item-info h1,.item-info a h1 {color: #000!important; font-weight: 700;}
.item-info h3,.item-info a h3 {color: #fff!important;}
.info-body {margin: 20px 0; font-size: 1rem;}
/* --------- End of Section ------------------------------------------------------------ */
/* --- .Footer ------------------------------------------------------------------------- */
.footer .share {
	margin: 10px 0;
}
.footer .share a {
	display: inline-block; margin: 0 5px;
}
.footer .share img {
	width: 40px;
}
.footer .copyright {
	/*margin-top: 20px;*/
	padding-left: 0;
	font-size: 12px;
}
/* --------- End of Footer -------------------------------------------------------------- */

/* --- Back to Top ---------------------------------------------------------------------- */
a.back-top {text-decoration:none;}
.back-top {
	position: fixed; z-index: 999;
	padding-top: 5px; border-radius: 50%;
	display: none;
	width:45px; height: 45px;
	bottom:10px; right: 10px;
	color: #000; line-height: 14px; font-size: 16px;
	background: #9d8567;
}
.back-top:hover,
.back-top:focus,
.back-top:active {color: #fff;}
.back-top:hover {
	-webkit-transition: all 100ms ease-in-out 0s;
		 -o-transition: all 100ms ease-in-out 0s;
			transition: all 100ms ease-in-out 0s;
	background: #b37428;
}
@media only screen and (max-width: 767.9px){
	.back-top {background: #9d8567;}
	.back-top:hover {background: #b37428}
}
/* --------- End Back to Top ------------------------------------------------------------ */