@charset "utf-8";
/* Universal Styles
--------------------------------------- */
body, html { overflow-x: hidden; }
body {
	font-size: 0.9em;
	line-height: 1.1;
	font-family: "微軟正黑體", Arial, Geneva, sans-serif;
	font-style: normal;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
}

h1 {
	color: #F90;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1em;
}
h3 { color: #FF6; padding: 10px 0 0 0; font-size: 16px; font-weight: bold; }

.blue {
	color: #00F;
	width: 99%;
	float: left;
	text-align: center;
	vertical-align: middle;
}
.red {
	color: #FFF;
	background-color: #900;
	width: 800px;
	text-align: center;
	font-weight: bold;
	height: 100%;
	
}

div#header{
	width: 100%;
	height: 100%;
	background-color: #660000;
	color: #FFF;
	text-align: center;
	padding: 0px 0px 8px;
}

ul#menu	{
	padding: 20px;
	text-align: center;
	
}

ul#menu li{
	display: inline;
	font-size: 16px;
	color: white;
}

ul#menu li a{
	color: white;
	text-align: center;
	text-decoration: none;
	border-radius: 0 0 0 0;
	padding: 10px;	
}

ul#menu li a:hover{
	background-color: #033954;
}


p{
	font-size:1.2em;
	letter-spacing:1.1em;
	line-height:2em;
}

/* flexslider */

.flexslider{
	position:relative;
	overflow:hidden;
	text-align: center;
	width: auto;
	border: thin solid #1A641E;
	list-style-type: none;
	white-space: nowrap;
	padding: 0px;
}

.slides{
	position:relative;
	z-index:1;	
	list-style-type: none;
}
.slides ul{
	list-style-type: none;
}
.slides li img{
	list-style-type: none;
	-moz-user-select: none;
	margin-top:0px;
	margin-left:0px;
	width:100%;
	max-width:600px;
	height:auto;	
}
.slides li a{ display:block; width:100%; height:100%; text-align:left; text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;}
.flex-control-nav{position:absolute;bottom:-20px;z-index:3;width:100%;text-align:center;}
.flex-control-nav li{
	display:inline-block;
	width:13px;
	height:13px;
	margin:5px;
    *display:inline;
	zoom:1.5;
	font-size: 8px;
	color: #FFF;
}
.flex-control-nav a{
	color: #FFF;
	display:block;
	width:13px;
	height:13px;
	line-height:13px;
	overflow:hidden;
	cursor:pointer;
	background-image: url(image/dot.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	text-decoration: none;
}
.flex-control-nav .flex-active{background-position:0 0;}

.flex-direction-nav{position:absolute;z-index:3; left:0;width:100%;top:45%;list-style-type: none;}
.flex-direction-nav li a{display:block;width:50px;height:50px;overflow:hidden;cursor:pointer;position:absolute;}
.flex-direction-nav li a.flex-prev{
	left:0px;
	background-image: url(image/previous.png);
	background-repeat: no-repeat;
	background-position: left top;
	z-index:10;
}
.flex-direction-nav li a.flex-next{
	right:25px;
	background-image: url(image/next.png);
	background-repeat: no-repeat;
	background-position: center center;
	z-index:99;
}


/* 3. menu Style the tab
-------------------------------------------- */
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 15px;
  border: 1px solid #ccc;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

 
/* 3. Home (nav) Styles
-------------------------------------------- */
.nav {
	font-size: 0.9em;
	width:auto;
	border-top: solid 1px #ffffff;
	background-color: #FC0;
}

.nav ul	{
	font-weight: bold;
}

.nav li	{
	list-style-type: none;
	float: left;}

.nav li a	{
	display: block;
	border-right-width: 2px;
	border-right-style: solid;
	border-right-color: #CCCCCC;
	background-color: #F90;
	text-decoration: none;
	text-align: center;
}

.nav li a:hover	{
	background-color: #FFCC00
}	

/* Media Queries
***********************/
@media screen and (max-width: 960px) {
  #container {padding: 35px;}
  header {width: 380px;}
  #main {margin-left: 380px;}
  aside h3  {
  	float: none;
  	font-size: 20px;
  }
  .toggle  {
  	margin-left: 0;
  	float: none;
  }
}
@media screen and (max-width: 768px) {
  #container {padding: 20px 30px;}
  header {width: 100%; float: none; text-align: center;margin: 0;}
  header img  {width:120px;}
  header h1  { margin: 0 auto 10px; font-size: 32px; }
  header h2  { font-size: 16px; }
  header .button  { margin-bottom: 28px; }    

  #flexslider {margin-left: 0;}
   .flexslider{
	margin-left: 0;
	width: 100%;	
    }
	.slides ul{
	margin-left: 0;	
	width:100%;	
	 }
  	.slides li img{
	margin-left: 0;
	width:100%;	
	 }
 	
	.flex-direction-nav li a.flex-prev{
	left:0px;
	background-image: url(image/previous.png);
	background-repeat: no-repeat;
	background-position:center center;
		}
	.flex-direction-nav li a.flex-next{
	right:25px;
	background-image: url(image/next.png);
	background-repeat: no-repeat;
	background-position: center center;
}
.nav ul {
	padding: 0px;
}		
.nav li a{
	width: 50%;
	border-right-width: 1px;
	font-size: 0.8em;
	margin: 0px;
	padding: 0px;
}
}