/*google web fonts*/

/* @TODO: This is a todo */
/* @NOTE: This is a note */
/* @FIXME: This is a fixme */
/* @CHANGES: This is a chages */
/* @FUTURE: This is a future */

@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.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: 93.75%} /*16px x 93.75% = 15px 網站字型大小預設值*/
body {
	height: 100%;
	background: url(../images/bg-body.png) left top repeat;
	font-size: 1rem;
	font-weight: 400;
	color: hsl(0, 0%, 0%);
	letter-spacing: 0
}
* { /*使用邊框不影響 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: #ff5400; text-decoration: none}

a, button, ul, li, dl, dt, dd, div, p, img, figure, figcaption {
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	outline: none
}
.slide-left-right {
	text-decoration:none;
	display: inline-block
}
/* add a empty string after the elment with class .slide-left-right */
.slide-left-right:after {
	content: '';
	display: block;
	height: 2px;
	width: 0;
	background: transparent;
	transition: width .5s ease, background-color .5s ease; /* .5 seonds for changes to the width and background-color */
	-webkit-transition: width .5s ease, background-color .5s ease; /* Chrome and Safari */
	-moz-transition: width .5s ease, background-color .5s ease; /* FireFox */
}
/* Change the width and background on hover, aka sliding out */
.slide-left-right:hover:after {width: 100%; background: #fff}

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

button {
	background: #000;
	border: none;
	color: #fff;
	padding: .25rem 1rem;
	cursor: pointer
}
button:hover {
	background: #f00;
	font-weight: 500;
	color: #000
}

/*font setting*/
h1, h2, h3, h4, p, ul, li, dl, dt, dd, button, input, textarea, select, option {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 use only*/
.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(240, 100%, 33%, 0.57) /*改變按鈕顏色*/ 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;
	z-index: 9999
}
.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: hsla(240, 100%, 33%, 1) /*改變按鈕顏色*/ url(../images/layout/cd-top-arrow.svg) no-repeat center 50%} /*改變按鈕顏色*/
@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: 1.5rem; bottom: 1.5rem}
}

header {font-family: 'Roboto', sans-serif; font-size: 3rem; font-weight: 500; text-align: center}
header>img {width: 98px !important}

/*banner*/
div.banner {border-top: #f00 10px solid}

/*nav*/
.bg-faded {background: url(../images/bg-nav.png) left top repeat-x; padding: 0 2rem}

.navbar-light .navbar-brand {
	font-family: 'Raleway';
	font-size: 2rem;
	font-weight: bold;
	color: #000;
	letter-spacing: 0;
	text-align: center;
}
.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover {color: #000}

ul.navbar-nav {}
ul.navbar-nav>li.nav-item {
	font-size: 1.2rem;
	font-weight: 700;
	text-transform: uppercase;
	padding: 1rem 2rem
}
ul.navbar-nav>li.nav-item:last-child {background: none}
ul.navbar-nav>li.active {padding-top: 1rem}
ul.navbar-nav>li.nav-item>a.nav-link {color: #fff; text-shadow: rgba(0, 0, 0, 0.63) 1px 1px 3px; padding: 0}
.navbar-light .navbar-nav .active>.nav-link {
	color: #000;
	border-bottom: #fff 2px solid;
	padding: 0
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {color: #fff}
*[onclick] {cursor: pointer}


/*moblie nav*/
div.slidebars {
	background: rgba(255, 255, 255, .9);
	padding: 1rem
}
div.slidebars>dl.m_nav {padding-top: 1rem}
div.slidebars>dl.m_nav>dd {
	border-bottom: #f7a11a 1px solid;
	font-size: 1.25rem;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: .5rem;
	padding-bottom: .5rem
}
div.slidebars>dl.m_nav>dd:last-child {border-bottom: none}
div.slidebars>dl.m_contact {}

/*footer*/
div.goTop {max-width: 1110px; background: #fff}
footer {
	background: #000;
	font-size: 1.066666666666667rem;
	color: #fff;
	padding: 1rem 0
}
footer>div {max-width: 1110px; margin: 0}
div.logo {padding-top: .5rem}
div.logo>img {max-width: 103px}
/*copyright*/
div.copyright {font-size: 2rem}
div.contactus {}
div.contactus p {font-size: .75rem; margin-bottom: 0}
div.contactus a {color: #fff}
div.contactus a:hover {color: #f90}
/*section content*/
section.container {max-width: 1110px; padding: 0}
div.copy {font-size: .9rem; text-align: right; padding-bottom: 1rem}
div.pageTitle {}
h1.title {
	font-size: 4rem;
	font-weight: 300;
	text-align: center;
	margin: 2rem
}
div.homeBtn {
	max-width: 1110px;
	font-size: .85rem;
    padding: .5rem 1rem
}
i.fa-angle-right {color: #666}
/*slide*/
.flexslider {margin-bottom: 0 !important}
.flex-control-nav {display: none}