/*google web fonts*/
@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css');/*繁中*/
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,800');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700&display=swap');
html {min-height: 100%; font-size: 93.75%} /*16px x 93.75% = 15px 網站字型大小預設值*/
body {
	height: 100%;
	background: url(../images/layout/bg-body.gif) left top repeat;
	font-family: 'Roboto', 'Noto Sans TC', MS UI Gothic, MS Gothic, sans-serif;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 1px;
	color: hsl(0, 0%, 20%)
}
* { /*使用邊框不影響 div or table 本身寬度設定*/
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box
}
a:link, a:visited {color: #000; text-decoration: none}
a:hover {color: #f90}; text-decoration: none}
img {width: 100%; border: none}
button {border: none; border-radius: .25rem; padding: .25rem 1rem; cursor: pointer}

/*font setting*/
h1, h2, h3, h4, p, ul, li, dl, dt, dd, button {font-family: 'Roboto', 'Noto Sans TC', MS UI Gothic, MS Gothic, sans-serif}
h1 {font-size: 1.73rem}
h2 {font-size: 1.5rem}
p, li {font-size: 1rem}
li {list-style: none}
div.clearfix {clear: both}

/*goTOP*/
.cd-top {
	display: inline-block;
	height: 40px;
	width: 40px;
	position: fixed;
	bottom: 40px;
	right: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	/* image replacement properties */
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: hsla(0, 0%, 0%, 0.9) url(../images/layout/cd-top-arrow.svg) no-repeat center 50%; /*改變按鈕顏色*/
	border-radius: .5rem;
	visibility: 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 */
.no-touch .cd-top:hover {background-color: hsla(56, 100%, 50%, .75); opacity: 1}

/*改變按鈕顏色*/
@media only screen and (min-width: 1024px) {
	.cd-top {
		height: 60px;
		width: 60px;
		right: 30px;
		bottom: 30px
	}
}
@media only screen and (min-width: 768px) {
	.cd-top {right: 20px; bottom: 20px}
}

/*header*/
header {max-width: 1170px; background: #000688; margin: 0 auto}
/*nav*/
.bg-faded {background-color: inherit; padding: 0}
.navbar-brand {background: #f90; border-bottom: #f60 7px solid; padding: 1rem 2rem}
ul.navbar-nav {padding-right: 1rem}
ul.navbar-nav>li {background: url(../images/layout/nav-line.gif) right 50% no-repeat}
ul.navbar-nav>li:last-child {background: none}
.navbar-light .navbar-nav .nav-link {font-size: 1.05rem; font-weight: 500; color: #fff}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {background: url(../images/layout/icon-nav.png) 50% top no-repeat; color: #fc0}
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.open, .navbar-light .navbar-nav .open>.nav-link {background: url(../images/layout/icon-nav.png) 50% top no-repeat; color: #fc0}

/*for mobile*/
header.slidebars {
	display: none; /*for monitor only*/
	height: 79px;
	background: #f90;
	border-bottom: #f60 7px solid
}
header.slidebars>a {padding: 1rem 2rem}
header.slidebars>nav {float: right; padding: 1rem 1rem 1rem 0}
header.slidebars>nav>button {
	background: none;
    border: #fff 2px solid;
    padding: .5rem .5rem .6rem
}

/*menu*/
div.slidebars {background: url(../images/layout/bg-slidebars.jpg) 50% bottom no-repeat #000424}
div.slidebars>dl {padding: 1.5rem}
div.slidebars>dl>dd {
	border-bottom: #fff 1px dashed;
	text-align: center;
	margin-bottom: .75rem;
	padding-bottom: .75rem
}
div.slidebars>dl>dd:last-child {border-bottom: none}
div.slidebars>dl>dd>.navlink {
	font-size: 1.5rem;
	color: #fff;
	margin-left: -1.5rem;
	padding-left: 1.5rem
}
div.slidebars>dl>dd>.navlink:focus,
div.slidebars>dl>dd>.navlink:hover {background: url(../images/layout/icon-slidebar.png) left 50% no-repeat; color: #fc0}

/*footer*/
footer {
	max-width: 1170px;
	background: #666;
	margin: 0 auto;
	padding-top: 1rem
}

nav.footer {background: #000842; text-align: center}
nav.footer>dl {padding: .4rem 0}
nav.footer>dl>dd {
	border-right: #fff 1px solid;
	display: inline-block;
	margin-right: 1rem;
	padding-right: 1rem;
	margin-bottom: 0
}
nav.footer>dl>dd:last-child {border-right: none; margin-right: 0; padding-right: 0}
nav.footer>dl>dd>a:link, nav.footer>dl>dd>a:visited {color: #fff}
nav.footer>dl>dd>a:hover {color: #fc0}

/*copyright*/
div.copyright {max-width: 950px; color: #fff; margin: 0 auto}
div.copyright>dl {}
div.copyright>dl>dd {font-size: .99rem; font-weight: 500; float: left}
div.copyright>dl>dd:nth-child(2) {text-align: center; padding: 0}
div.copyright>dl>dd>dl {float: left; margin-bottom: 0}
div.copyright>dl>dd>dl>dd {
	border-right: #fff 1px solid;
	display: inline-block;
	margin: 0 .2rem 0 0;
	padding-right: .5rem
}
div.copyright>dl>dd>dl>dd:last-child {border-right: none; margin-right: 0; padding-top: 0}
div.copyright>dl>dd>dl>dd.declare {display: inherit; text-align: right}

/*section content*/
section.container {max-width: 1170px; width: auto; padding: 0}