/*google web fonts*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);/*繁中*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanssc.css);/*簡中*/
@import url('https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900');

html {min-height: 100%; font-size: 16px} /*16px x 93.75% = 15px 網站字型大小預設值*/
body {
	height: 100%;
	background: url(../images/layout/bg-body.svg) 50% bottom no-repeat #fff;
	background-size: 100% auto;
	font-family: 'Roboto', 'Noto Sans TC', MS UI Gothic, MS Gothic, 'Font Awesome\ 5 Free', 'Font Awesome\ 5 Brands',  sans-serif;
	font-size: 1rem;
	font-weight: 400;
	color: #262626;
	letter-spacing: 0
}
* { /*使用邊框不影響 div or table 本身寬度設定*/
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box
}

/*font awesome setting*/
::before, ::after {margin-right: .5rem; margin-left: .5rem}

input, select, textarea {
	width: 100%;
	background: #e0e0e0;
	border: 1px solid #e0e0e0;
	border-radius: .25rem;
	color: #262626;
	padding: .5rem .75rem
}
select {padding-bottom: .75rem}
input:hover, select:hover, textarea:hover {
	border: #2a69b0 1px solid;
	outline: none
}
input:focus, select:focus, textarea:focus {
	border: #2a69b0 1px solid;
	outline: none
}
input::placeholder, textarea::placeholder {font-weight: 300; color: #666}
textarea {resize:none}
input[type="checkbox"], input[type="radio"] {width: auto !important}

button {
	background: #2a69b0;
	border: 1px solid #2a69b0;
	border-radius: .5rem;
	font-weight: 400;
	color: #fff;
	padding: .5rem .75rem
}
button:hover {
	background: #1f4c7e;
	border: 1px solid #2a69b0;
	font-weight: 400;
	color: #fff
}
button[type="submit"] {}
button[type="reset"] {background: #afafaf; border-color: #afafaf; color: #414040}
button[type="reset"]:hover {background: #525252; color: #fff}

a:link, a:visited {color: #1e1e1e; text-decoration: none; padding: 1px}
a:hover {background: none; color: #999; text-decoration: none}
a, button {
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	outline: none
}

img {
	width: 100%;
	max-width: 100%;
	height: auto!important;
	border: none
}

*[onclick], button {cursor: pointer}

h1 {font-size: 1.73rem}
h2 {font-size: 1.5rem}
p, li {font-size: 1rem}
li {list-style: none}

div.clearfix {clear: both}

/*goTOP use only*/
.cd-top {
	width: 2rem;
	height: 2rem;
	background: url(../images/layout/cd-top-arrow.svg) no-repeat center 50% #5273a6;
	border-radius: .5rem;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	text-indent: 100%;
	white-space: nowrap;
	visibility: hidden;
	display: inline-block;
	position: fixed;
	bottom: 40px;
	right: 10px;
	z-index: 9999;
	/* image replacement properties */
	overflow: hidden;
	opacity: 0;
	-webkit-transition: opacity .3s 0s, visibility 0s .3s;
	-moz-transition: opacity .3s 0s, visibility 0s .3s;
	transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
	-webkit-transition: opacity .3s 0s, visibility 0s 0s;
	-moz-transition: opacity .3s 0s, visibility 0s 0s;
	transition: opacity .3s 0s, visibility 0s 0s
}
.cd-top.cd-is-visible {visibility: visible; opacity: .75}
/* the button becomes visible */
/* .cd-top.cd-fade-out {opacity: .25} */
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
.cd-top:hover {background: url(../images/layout/cd-top-arrow.svg) no-repeat center 50% #5273a6; opacity: 1} /*改變按鈕顏色*/
@media only screen and (min-width: 1024px) {
	.cd-top {right: 30px; bottom: 30px}
}
@media only screen and (min-width: 768px) {
	.cd-top {right: 1.5rem; bottom: 6.5rem}
}

/*header*/
header {
	background: rgba(255, 255, 255, 1);
	padding-top: 1rem;
	padding-bottom: .5rem
}

a.navbar-brand>img {width: 28vw}
/*for the fxxking internet explorer*/
@media all and (-ms-high-contrast:none) {a.navbar-brand>img {width: 100%}}

/*language*/
.language {position: relative}
.language select {
	display: none; /*hide original SELECT element:*/
}
.select-selected {
	border: 1px solid #221e1f;
	border-radius: .25rem;
	font-size: .85rem;
	display: inline-block
}
/*style the arrow inside the select element:*/
.select-selected:after {content: "\f107"}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
	border-color: transparent transparent #fff transparent;
	top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
	padding: .25rem .25rem .25rem .5rem;
	cursor: pointer;
	user-select: none;
}
/*style items (options):*/
.select-items {
	background: rgba(255, 255, 255, 0.9);
	padding: .5rem;
	position: absolute;
	top: 53%;
	left: 0;
	right: 0;
	z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {display: none}
.select-items div:hover, .same-as-selected {}

div.social {
	font-size: 2.05rem;
	margin: -9px 0 0;
	padding: 0;
	float: right
}
div.social>a, div.social>a:hover {color: #395195}


/*nav*/
.bg-light {background: #383838 !important}

/*選單設定*/
li.nav-item {
	border-right: 1px solid #fff;
	padding: 0 1rem
}
li.nav-item:last-of-type {border-right: none}

.navbar-light .navbar-nav .nav-link {font-size: 1.05rem; color: #fff; text-align: center}
/*選單設定滑鼠滑過效果*/
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {color: #ccc}
/*下拉*/
.dropdown-toggle::after {display: none}
.dropdown:hover>.dropdown-menu {display: block}
.dropdown-menu {
	background: rgba(0, 0, 0, 0.85) !important;
	border: none;
	border-radius: 0;
	text-align: center;
	padding: 1rem;
	top: 3rem;
	left: -2.3rem
}
a.dropdown-item {
	border-bottom: #fff 1px solid;
	color: #fff;
	margin-bottom: .5rem;
	padding-bottom: .5rem
}
.dropdown-item:focus, .dropdown-item:hover {background: none; color: #fff}
a.dropdown-item:last-of-type {border-bottom: none; margin-bottom: 0; padding-bottom: 0}

/*moblie nav*/
.navbar-light .navbar-toggler {border: #fff 1px solid !important}
button.navbar-toggler>i {color: #fff}
.custom-toggler.navbar-toggler {
	border-color: rgb(255,102,203);
}
div.slidebars {
	width: 100vw;
	background: rgba(0, 0, 0, 0.9);
	box-shadow: rgba(0, 0, 0, .15) 1px 0 5px;
	padding: 1rem
}
div.closeBtn {text-align: right}
div.closeBtn>button {background: none; border: none; color: #fff}
dl.slidebarNav {text-align: center; margin-bottom: 0}
dl.slidebarNav>dd {
	border-bottom: #ccc 1px solid;
	margin-bottom: 2rem;
	padding-bottom: 2rem
}
dl.slidebarNav>dd>a {
	font-size: 2rem;
	font-weight: 300;
	color: #fff;
	line-height: 1.15rem;
}
dl.slidebarNav>dd>a>span {font-size: 1rem}
dl.slidebarNav>dd:last-of-type {border: none; margin-bottom: 0; padding-bottom: 0}


/*footer*/
footer {background: #383838}

div.fNav {background: #e4e4e4; text-align: center}
div.fNav>a::after {content: "|"; margin-left: .75rem}
div.fNav>a:last-of-type::after {content: none}

section.comInfo>h2 {
	font-size: 1.25rem;
	font-weight: 300;
	color: #fff;
	text-align: center;
	margin-bottom: 1rem
}
section.comInfo>dl {margin-bottom: 0}
section.comInfo>dl>dd {
	color: #fff;
	text-align: center;
	margin-bottom: 0
}

section.copyright {border-top: 1px solid rgba(255, 255, 255, 0.2); color: #fff; text-align: center}

/*section content*/
section.container {padding-top: .5rem}

.green{color: green !important;}
.red{color: red !important;}
.orange{color: orange !important;}
.white{color: white !important;}