/*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:300,400,500,600,800');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700');
html {min-height: 100%; font-size: 15px} /*16px x 93.75% = 15px 網站字型大小預設值*/
body {
	height: 100%;
	font-size: 1rem;
	font-weight: 400;
	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: #1e3c98; text-decoration: none}
a:hover {color: #f7a11a; text-decoration: none}
img {
	width: 100%;
	max-width: 100%;
	height: auto!important;
	border: none
}
button {border: none; padding: .25rem 1rem; cursor: pointer}
a:hover, a:focus, button:hover, button:focus, li:hover, li:focus {
	-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
}
button {background: none; border: #224099 1px solid; font-weight: 500; color: #224099}
button:hover {background: #224099; color: #fff; border: #224099 1px solid}

/*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}

/*header*/
header {border-bottom: #e7e7e7 3px solid; margin-bottom: 3rem}

/*nav*/
.bg-faded {max-width: 1170px; background: none; padding-top: 1.25rem}

.navbar-brand>img {width: 125%; max-width: 125%}

ul.navbar-nav {
	background: #1e3c98;
	border-radius: 2rem
}
ul.navbar-nav>li.nav-item {
	background: url(../images/nav-line.gif) right 1.1rem no-repeat;
	font-size: 1.25rem;
	font-weight: 500;
	padding: 1rem 1.5rem
}
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, .25) 1px 1px 2px; padding: 0}
.navbar-light .navbar-nav .active>.nav-link {
	color: #fff;
	border-bottom: #f90 2px solid;
	padding: 0
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {color: #fff}
.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: #f90}

/*language*/
nav.language {
	position: absolute;
	top: .75rem;
	right: 3rem
}
nav.language>dl {margin: 0}
nav.language>dl>dd {
	background: url(../images/nav-line.gif) right 50% no-repeat;
	display: inline-block;
	margin: 0;
	padding: 0 .75rem 0 .5rem
}
nav.language>dl>dd:last-child {background: none; padding-right: 0}
nav.language>dl>dd>a {color: #000}


/*moblie nav*/
div.slidebars {
	background: rgba(255, 255, 255, .9);
	box-shadow: rgba(0, 0, 0, .15) 1px 0 5px;
	padding: 1rem
}
div.slidebars>dl.m_language {}
div.slidebars>dl.m_language>dd {
	width: 48%;
	border-right: #c8c8c8 1px solid;
	font-size: 1.25rem;
	text-align: center;
	display: inline-block
}
div.slidebars>dl.m_language>dd:last-child {border-right: none}
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;
	margin-bottom: .5rem;
	padding-bottom: .5rem
}
div.slidebars>dl.m_nav>dd:last-child {border-bottom: none}
div.slidebars>dl.m_contact {}
div.slidebars>dl.m_contact>dd>iframe {width: 100%; height: 300px}

div.columns {background: #fff; margin: 1.5rem 0 0; padding: 1.5rem 0}
div.owl-carousel {}
div.item img {width: auto !important}

/*footer*/
footer {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#323081+0,14126e+100 */
	background: rgb(50,48,129); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(50,48,129,1) 0%, rgba(20,18,110,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(50,48,129,1) 0%,rgba(20,18,110,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(50,48,129,1) 0%,rgba(20,18,110,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#323081', endColorstr='#14126e',GradientType=0 ); /* IE6-9 */
	padding-top: 1.5rem
}
div.footer {max-width: 1170px; margin: 0; padding: 0 0 1.5rem}
div.footer>div {color: #fff}
div.footer>div:nth-child(2) {text-align: right}
div.footer>div:nth-child(2)>p {
	display: inline-block;
	margin-right: .5rem
}

/*copyright*/
div.footer:nth-child(1) {font-size: .85rem; color: #fff}

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