@font-face {
	font-family: 'icomoon';
	src: url('../fonts/icomoon.eot?rretjt');
	src: url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'), url('../fonts/icomoon.woff?rretjt') format('woff'), url('../fonts/icomoon.ttf?rretjt') format('truetype'), url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
 [class^="icon-"], [class*=" icon-"] {
 font-family: 'icomoon';
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
body, html {
	font-size: 100%;
	padding: 0;
	margin: 0;
}
/* Reset */
*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}
body {
	color: #404d5b;
	font-weight: bold;
	font-size: 1.05em;
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif, "新細明體", "FontAwesome", sans-serif;
}
a {
	color: #014099;
	text-decoration: none;
	outline: none;
}
a:hover, a:focus {
	color: #014099;
}
.htmleaf-container {
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
}
.htmleaf-content {
	font-size: 150%;
	padding: 1em 0;
}
.htmleaf-content p {
	margin: 1em 0;
	padding: 5em 0 0 0;
	font-size: 0.65em;
}
.bgcolor-1 {
	background: #f0efee;
}
.bgcolor-2 {
	background: #f9f9f9;
}
.bgcolor-3 {
	background: #e8e8e8;
}/*light grey*/
.bgcolor-4 {
	background: #2f3238;
	color: #fff;
}/*Dark grey*/
.bgcolor-5 {
	background: #df6659;
	color: #521e18;
}/*pink1*/
.bgcolor-6 {
	background: #2fa8ec;
}/*sky blue*/
.bgcolor-7 {
	background: #d0d6d6;
}/*White tea*/
.bgcolor-8 {
	background: #3d4444;
	color: #fff;
}/*Dark grey2*/
.bgcolor-9 {
	background: #ef3f52;
	color: #fff;
}/*pink2*/
.bgcolor-10 {
	background: #64448f;
	color: #fff;
}/*Violet*/
.bgcolor-11 {
	background: #3755ad;
	color: #fff;
}/*dark blue*/
.bgcolor-12 {
	background: #3498DB;
	color: #fff;
}/*light blue*/
.bgcolor-13 {
	background: #F5F9FA;
}
/* Header */
.htmleaf-header {
	padding: 0.1em 14% 0.2em 14%;
	text-align: center;
	background-image: url(../images/top_bg.gif);
	background-repeat: repeat-x;/*background: #b6d450;c6ebf4*66677c*/
	margin: 0em 0.1% 1.8em 0.1%;
	-moz-box-shadow: -3px 3px 8px rgba(0,0,0,0.1);
	-webkit-box-shadow: -3px 3px 8px rgba(0,0,0,0.1);
	box-shadow: -3px 3px 8px rgba(0,0,0,0.1);
	border-top: 12px solid #66ccff;/*014099*/
	-webkit-border-bottom-left-radius: 20px;
	-webkit-border-bottom-right-radius: 20px;
	-moz-border-bottom-right-radius: 20px;
	-moz-border-bottom-left-radius: 20px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}
.htmleaf-header h1 {
	color: #0099ff;/*2e71bf*/
	letter-spacing: -1px;
	font-weight: normal;/* bold*/
	font-size: 1.5em;
	line-height: 0.7em;
	margin-bottom: 0;
	text-align: center;
	margin: 0.6em 0.5em 0em 0.5em;
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif, "新細明體", "FontAwesome", sans-serif;/*text-shadow: rgb(0, 153, 255) 0px 0px 5px, rgb(0, 153, 255) 0px 0px 5px, rgb(0, 153, 255) 0px 0px 5px, rgb(0, 153, 255) 0px 0px 5px, rgb(0, 153, 255) 0px 0px 5px, rgb(0, 153, 255) 0px 0px 5px, rgb(0, 153, 255) 0px 0px 5px, rgb(0, 153, 255) 0px 0px 5px, rgb(0, 153, 255) 0px 0px 5px, rgb(0, 153, 255) 0px 0px 5px, rgb(0, 153, 255) 0px 0px 5px, rgb(0, 153, 255) 0px 0px 5px, rgb(0, 153, 255) 0px 0px 5px, rgb(0, 153, 255) 0px 0px 5px, rgb(0, 153, 255) 0px 0px 5px, rgb(0, 153, 255) 0px 0px 5px, rgb(0, 153, 255) 0px 0px 5px, rgb(0, 153, 255) 0px 0px 5px;opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
.htmleaf-header h1 .tname {
	display: none;
}
.htmleaf-header h1 span {
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif, "新細明體", "FontAwesome", sans-serif;
	display: block;
	letter-spacing: 1px;
	position: relative;
	padding: 0.5em 0.5em 0.5em 0.5em;
	font-weight: bold;
	text-align: center;
	color: #ffffff;/*c2edf6*/
	/*background-color: rgba(255,255,255,0.3);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;*/
	-webkit-animation: 2s fade;
	animation: 2s fade;
	margin: 0.5em auto 0em auto;
	font-size: 1.25em;
	line-height: 1.25em;
	/*border-bottom: 2px solid #ececec;solid*/
	text-shadow: rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 4px;
	opacity: 1;
	filter: alpha(opacity=100); /* For IE8 and earlier */
}
.htmleaf-header h1 span:before {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	/*width: 100%;
  border-top: 1px solid #c2edf6;*/
	-webkit-animation: 1.5s draw;
	animation: 1.5s draw;
}
.htmleaf-header h1 span:after {
	display: block;
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	/*width: 100%;
  border-bottom: 1px solid #c2edf6;*/
	-webkit-animation: 1.5s draw-bottom;
	animation: 1.5s draw-bottom;
}
/*nav*/
.htmleaf-demo a {
	color: #fff;
	text-decoration: none;
}
.htmleaf-demo {
	width: 100%;
	padding-bottom: 1.2em;
}
.htmleaf-demo a {
	display: inline-block;
	margin: 0.5em;
	padding: 0.6em 1em;
	border: 3px solid #fff;
	font-weight: 700;
}
.htmleaf-demo a:hover {
	opacity: 0.6;
}
.htmleaf-demo a.current {
	background: #1d7db1;
	color: #fff;
}
/* Top Navigation Style */
.htmleaf-links {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	font-size: 1.5em;
	text-align: center;
}
.htmleaf-links::after {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -1px;
	width: 2px;
	height: 100%;
	background: #dbdbdb;
	content: '';
	-webkit-transform: rotate3d(0, 0, 1, 22.5deg);
	transform: rotate3d(0, 0, 1, 22.5deg);
}
.htmleaf-icon {
	display: inline-block;
	margin: 0.5em;
	padding: 0em 0;
	width: 1.5em;
	text-decoration: none;
}
.htmleaf-icon span {
	display: none;
}
.htmleaf-icon:before {
	margin: 0 5px;
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-family: 'icomoon';
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased;
}
/* footer */
.htmleaf-footer {
	width: 100%;
	text-align: center;
	color: #000000;
	font-size: 0.95em;
	line-height: 1.5em;
	background-image: url(../images/index_footer.jpg);
	background-repeat: x-repeat;
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif, "新細明體", "FontAwesome", sans-serif;
	padding: 1.5em 1em 1.5em 1em;
	margin: 2em 0em 0em 0em;/*background-color: #152836;*/
}
.htmleaf-small {
	font-size: 0.8em;
}
.center {
	text-align: center;
}
/****/
.related {
	color: #fff;
	background: #333;
	text-align: center;
	font-size: 1.25em;
	padding: 0.5em 0;
	overflow: hidden;
}
.related > a {
	vertical-align: top;
	width: calc(100% - 20px);
	max-width: 340px;
	display: inline-block;
	text-align: center;
	margin: 20px 10px;
	padding: 25px;
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif, "新細明體", "FontAwesome", sans-serif;
}
.related a {
	display: inline-block;
	text-align: left;
	margin: 20px auto;
	padding: 10px 20px;
	opacity: 0.8;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	-webkit-backface-visibility: hidden;
}
.related a:hover, .related a:active {
	opacity: 1;
}
.related a img {
	max-width: 100%;
	opacity: 0.8;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.related a:hover img, .related a:active img {
	opacity: 1;
}
.related h3 {
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif, "新細明體", "FontAwesome", sans-serif;
}
.related a h3 {
	font-weight: 300;
	margin-top: 0.15em;
	color: #fff;
}
/* icomoon */
.icon-htmleaf-home-outline:before {
	content: "\e5000";
}
.icon-htmleaf-arrow-forward-outline:before {
	content: "\e5001";
}
 @media screen and (max-width: 50em) {
.htmleaf-header {
	padding: 0.1em 14% 0.2em 14%;
}
.htmleaf-header h1 {
	font-size: 2em;
	margin: 2.5em 0.2em 0.2em 0.2em;
}
.htmleaf-header h1 .tname {
	display: none;
}
.htmleaf-header h1 span {
	padding: 0.4em 0.4em 0.4em 0.4em;
}
}
 @media screen and (max-width: 40em) {
.htmleaf-header h1 {
	font-size: 1.5em;
	margin: 4em 0.2em 0.2em 0.2em;
}
.htmleaf-header h1 .tname {
	display: none;
}
.htmleaf-header h1 span {
	padding: 0.4em 0em 0.4em 0em;
}
}
 @media screen and (max-width: 30em) {
.htmleaf-header h1 {
	font-size: 1.2em;
	margin: 4.2em 0.2em 0.2em 0.2em;
}
.htmleaf-header h1 .tname {
	display: none;
}
.htmleaf-header h1 span {
	padding: 0.8em 0em 0.4em 0em;
}
}
@media (max-width: 500px) {
.logo {
	width: 100%
}
.logo:nth-child(even) {
	margin-right: 0%;
}
}
#left-logo {
	display: inline-block;
	position: absolute;
	width: auto;
	line-height: 1em;
	padding: 5px 5px 5px 10px;
	margin: 0px 0px 0px 0px;
	/*background: #0099ff;*/
	left: 18px;
	top: 0px;
	color: #ffffff;
	/* border-bottom: 1px dashed #ffffff;*/
	z-index: 2;
	-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;
}
#left-logo:hover {
	top: -20px;
}
#left-logo.show {
	top: -100px;
}
#left-logo.show a.controller {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg)
}
#left-logo img {
	width: 84%;
}
#left-logo:after {
	position: absolute;
	content: "";
	display: block;
	width: 0;
	height: 0;
	top: 91px;
	border-left: 132px solid transparent;
	border-right: 132px solid transparent;
	border-top: 14px solid #0099ff;/*left:*/
}
#left-logo span {
	position: relative;
	display: inline-block;
	text-align: center;
	background: #0099ff;
	font-size: 14px;
	line-height: 1;
	padding: 17px 5px 3px 5px;
	border-top-right-radius: 15px;
	width: 100%;
	-moz-box-shadow: -3px 5px 6px rgba(0,0,0,0.3);
	-webkit-box-shadow: -3px 5px 6px rgba(0,0,0,0.3);
	box-shadow: -3px 5px 6px rgba(0,0,0,0.3);
}
#left-logo span:before, #left-logo span:after {
	position: absolute;
	content: "";
	display: block;
}
#left-logo span:before {
	background: #004996;
	height: 8px;
	width: 6px;
	left: -6px;
	top: 0;
}
#left-logo span:after {
	background: #004996;
	height: 8px;
	width: 8px;
	-webkit-border-radius: 8px 8px 0 0;
	-moz-border-radius: 8px 8px 0 0;
	border-radius: 8px 8px 0 0;
	left: -8px;
	top: 0;
}