@charset "utf-8";

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

/*google web fonts*/
@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: .9375rem} /*16px x 93.75% = 15px 網站字型大小預設值*/
body {
	height: 100%;
	background: #DDE1DD;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 1px;
	color: #000
}
.place_title{
	font-family: Microsoft JhengHei;
}

.text_justify{
	text-align: justify;
}
.text-right{
	text-align: right;
}
.line_height_1_5{
	line-height: 1.5rem;
}

@media (max-width: 2000px)
{
	.br_640{
		display: none;
	}
	.max_footer{
		display: block;
	}
	.min_footer{
		display: none;
	}
	.mt-15_640{
		margin-top: 15px;
		margin-bottom: -25px;
		display:none;
	}
	.br_1368{
		display: none;
	}

}

@media (max-width: 1370px)
{
	.br_1368{
		display: block;
	}
	.dis_1368{
		display: none;
	}

}

@media (max-width: 640px)
{
	.br_640{
		display: block;
	}
	.max_footer{
		display: none;
	}
	.min_footer{
		display: block;
	}
	.mt-15_640{
		margin-top: 15px;
		margin-bottom: -25px;
		display: block;
	}
	.br_1368{
		display: none;
	}

}




* { /*使用邊框不影響 div or table 本身寬度設定*/
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box
}
*[onclick] {cursor: pointer}
a:link, a:visited {color: #000; text-decoration: none}
a:hover {color: #53aca7; text-decoration: none}
img {
	max-width: 100%;
	max-height: 100%;
	height: auto !important;
	display: inline-block;
	vertical-align: middle;
	line-height: 1
}
a:hover, a:focus, button:hover, button:focus, li:hover, li:focus, input:hover, input: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 setting*/
button {
	background: none;
	border: none;
	border-radius: .3rem;
	box-shadow: rgba(0, 0, 0, .25) 1px 1px 2px;
	color: #fff;
	text-shadow: rgba(0, 0, 0, .5) 1px 1px 1px;
	cursor: pointer;
	padding: .75rem 3rem
}

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

/*todo: header*/
header {
	background: url(../images/layout/bg-header.png) left bottom repeat-x;
	border-bottom: #ccc 1px solid;
	padding-bottom: .25rem
}

/*todo: nav*/
.js-toggle-right-slidebar {
	display: none;
	box-shadow: none;
	top: .75rem;
	right: 0.5rem
}
.navbar-toggler-icon {
	width: 40px;
	height: 40px;
	background-image: url(../images/layout/nav-bar.svg);
	background-size: 100%;
	background-color: #ffffffb5;
    padding: 15px;
    border-radius: 5px
}

.bg-faded {
background: #306680;
}
.navbar-light .navbar-toggler {border: none; box-shadow: none}
.navbar-nav>li.nav-item {
	font-size: 1.1rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: uppercase;
	padding: 0
}
.navbar-light .navbar-nav .nav-link {color: #fff; text-shadow: rgba(0, 0, 0, 0.75) 1px 1px 2px; padding: .87rem 1rem}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
	background: #2f1a21;
	color: #fff;
	text-shadow: rgba(0, 0, 0, 0.75) 1px 1px 2px
}

.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: #306680;}

/*todo: moblie nav*/
div.slidebars {
	background: url(../images/layout/bg-m-nav.jpg) right top repeat;
	padding: 1.5rem
}
div.slidebars>dl {}
div.slidebars>dl>dd {
	font-size: 1.5rem;
	margin-bottom: 0;
	padding: 1rem .5rem
}
div.slidebars>dl>dd a {padding: 1rem .5rem}
div.slidebars>dl>dd a:focus, div.slidebars>dl>dd a:hover {
	background: #306680;
	color: #fff
}
div.slidebars>dl>dd>button.btn_close {
	background: none;
	box-shadow: none;
	padding: 0;
	position: absolute;
	right: 1rem
}

/*note: footer*/
footer {
background: #306680;
	color: #fff;
	text-align: center;
	padding: 3rem 1rem 1.5rem
}
footer>h4 {font-size: 1.05rem; font-weight: 500; margin-bottom: 1rem}
footer>p {font-weight: 300; margin-bottom: .5rem}
footer>p:nth-child(2) {margin-bottom: 1.5rem}

dl.department {}
dl.department>dd {text-align: left}
dl.department>dd.wTitle {padding-left: 0}

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

.svg_max_1{
	max-width: 202px;
}
.svg_max_2{
	max-width: 252px;
}