/*
	Theme Name: 1stwebdesigner HTML5/CSS3 Layout
	Date: March 2013
	Description: Basic HTML5/CSS3 layout built on a responsive framework
	Version: 1.0
	Author: Christian Vasile
	Author URL: http://christianvasile.com
*/

/* ===========================
   ======= Body style ======== 
   =========================== */
   
body {
/*	background-image:url(images/texbg5.png); */	
   	background-color:#600;
	color: #000305;
	font-size: 87.5%;  /* Base font size: 14px */
	font-family: "rem Helvetica", "Microsoft JhengHei", "微軟正黑體", "微软正黑体", "Hiragino Sans GB", sans-serif;
	line-height: 1.429;
	margin: 0;
	padding: 0;
	text-align: left;
 	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-text-size-adjust: 100%;
    letter-spacing: 0.1em; 
	overflow-y:auto;/* 必須 */

	}
	
.body {
	clear: both; 
	margin: 0 auto; 
	width: 98%;
}
#container {
	background-image: url(../images/wrapper.jpg); /*底圖 */
	width: 100%;
	margin:5px auto ;
	padding:0px 0px 10px 0px;
	text-align:left;
}


/* ===========================
   ========= Headings ======== 
   =========================== */
h2 {font-size: 1.571em}	/* 22px */
h3 {font-size: 1.429em}	/* 20px */
h4 {font-size: 1.286em}	/* 18px */
h5 {font-size: 1.143em}	/* 16px */
h6 {font-size: 1em}		/* 14px */

h2, h3, h4, h5, h6 {
	font-weight: 400;
	line-height: 1.1;
	margin-bottom: .8em;
}

h10{
	width:100%;
	border:3px solid #CCC;
	border-radius:10px;
	-moz-border-radius: 10px;
	-webkit-border-radius:10px;	
	font-size:18px;
	background-color: #FF9;
	padding:2px;
	
	}

/* ===========================
   ======= Anchor style ====== 
   =========================== */
a {
	outline: 0;
	}

a img {
	border: 0px; 
	text-decoration: none;
}

a:link, a:visited {
	color: #CF5C3F;
	padding: 0 1px;
	text-decoration: none;
}

a:hover, a:active {
	background-color: #CF5C3F;
	color: #fff;
	text-decoration: none;
}
.reds{
	font-size:60%;
	color: #F00;}
.red{
	color: #F00;}

.red{
	color: #F00;}
.red2{
	color: #F00;
	font-size:90%;
	
	}
	
.fluid{
	width:100%;
	
	}
.max{
	
	max-width:320px;}
.align{
	vertical-align:middle;
	
	}
#reg table a {
	text-decoration: none;
	font-size: 14px;
}
	
hr{
	text-align:left;
	width:88%;
	height:2px;
	margin-left:0px;
	
	}	

/* ==大==display=========== */
#banner{
	display: block;
		}
#banner-phone{
	display: none;
	}
.menu-trigger1 {
	display: none;
}
.menu-trigger2 {
	display: none;
}
div.nav-menu1 {
	display:none;
}

div.nav-menu2 {
	display:none;
}


.FT-L-img {
	display: block;
	float:left;
	
	}
.FT-R-img {
	display:block;
	float:right;
	}

#opbtn{
	display:none;
	}
	
/* =======banner img==============   */	

.mainHeader img {
	width:100%;
	height:242px;
	margin: 0 0 0 0;
}
/* */
#header{
	width:98%;
	margin-top:1%;
	border:2px solid #CC0;
	padding:0 0 0 3%;
}
.header{
	width:98%;
	margin-top:1%;
	border:2px solid #CC0;
	padding:3% 0 0 3%;
	
}
#header h5{
	margin-top:2%;
	margin-bottom:2%;
	
	}
/* ===========================
   ===== Main Navigation ===== 
   =========================== */
  /*  */ 
  /*  */ 
div.nav-menu {
/*		
設高度後無法容納下推
height:35px;
*/
	   background-image:url(../images/bg13.jpg);
	text-align: center;
	margin-left: 15px;
	margin-top:-3px;
	margin-bottom: 10px;
}
	
div.nav-menu ul {
	list-style: none; 
	overflow: hidden;
	border-left:#CC0 5px solid;
	
	margin-top: 0px;
	margin-bottom: 0px;
	padding-left: 0px;
	margin-left: 0px;
	
}

div.nav-menu ul li {
	float: left; 
	display: inline; 
	list-style-type: none; 

}
	
div.nav-menu a:link, div.nav-menu a:visited {
	color: #FFF;  /* 字體顏色  */
	display:block;
	height: 30px; /* 底圖高 */
	padding: 5px 10px 0px 10px;  /*   */
}

div.nav-menu li a {
	background-image:url(../images/bg_grad.gif);
	display: block;
	width:90px;  /* 不能改為% */
	color: #333; /*#6600CC;*/
	font-weight: bold;
	text-align: center;
	line-height: 25px;
	border-right: #CC0 5px solid;
	font-size:1.155em;
}


.nav-menu li a:hover{
	background-image: url('s.png'); /*底色：紅  /style 81行  */
	color: red;
	padding: 5px 10px 0px 10px;  /*   */

}
 /*------------------------------*/
div.nav-menu1 {
   background-image:url( ../images/bg-c1.jpg );	font-size: 1.143em;
	height:40px;
	line-height: 30px;
	margin: 0 auto 15px auto; /* 下距   */
	text-align: center;
/*	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
*/	
}
	
div.nav-menu1 ul {
	list-style: none; 
	margin: 0 auto;
}

div.nav-menu1 li {
	display: inline; 
}


	
div.nav-menu1 a:link, div.nav-menu3 a:visited {
	color:#333;
	display: inline-block;
	height: 30px;
	padding: 5px 10px;
	text-decoration: none;
}

div.nav-menu1 a:hover, div.nav-menu1 a:active,
div.nav-menu1 .active a:link, div.nav-menu1.active a:visited {
/*	background: #CF5C3F;
*/	
	color: #333;
	text-shadow: none !important;
}
	
div.nav-menu1 li a {
	
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	
}

/*------------------------------*/
div.nav-menu2 {
   background-image:url( ../images/bg-c1.jpg);	font-size: 1.143em;
	height:40px;
	line-height: 30px;
	margin: 0 auto 15px auto; /* 下距   */
	text-align: center;
/*	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
*/	
}
	
div.nav-menu2 ul {
	list-style: none; 
	margin: 0 auto;
}

div.nav-menu2 li {
	display: inline; 
}


	
div.nav-menu2 a:link, div.nav-menu2 a:visited {
	color:#333;
	display: inline-block;
	height: 30px;
	padding: 5px 10px;
	text-decoration: none;
}

div.nav-menu2 a:hover, div.nav-menu2 a:active,
div.nav-menu2 .active a:link, div.nav-menu2.active a:visited {
/*	background: #CF5C3F;
*/	
	color: #333;
	text-shadow: none !important;
}
	
div.nav-menu2 li a {
	
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	
}





/* ===========================
   ======= Content Area ====== 
   =========================== */

.mainContent {
	overflow: hidden;
	line-height: 25px;
/*	 menu 之上圓角
    border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
*/
}
.content {
	margin-left:0%;
	padding-right:1.7%;  /* 右邊界  */
	width: 65%; /* 右欄寬度 */
	float: right;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.topcontent {
/*	background-color: #FFF;*/	
	background-image:url(../images/texbg5.png);
	background-color: #FFF;	
	border:2px solid #CCC;
	padding:1% 3% 1.5% 1.5%;
	margin-left:1%;
	margin-bottom: 2%;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
}

.post-info {
	font-style: italic;
	color:#999;
	font-size: 85%; /*  14*85%  太小*/
}
/* =======ADD IN==============================  */  

.post	{
	border:2px solid #CC0;
	width:99%;
	margin-top: 1%;
	font-size: 18px;
	margin-left: 0px;
	margin-right: 5px;
	padding:1%;
	text-align: justify;
	text-justify:inter-ideograph;
}

.post h1 {
	background-image: url(images/h1bgstep.png);
	background-repeat: no-repeat;
	font-size: 1.2em;
	color: #333;
	height:50px;
	line-height:38px;
    padding-left:50px;
	margin-left:15px;
	margin-bottom:0px;
}
.post h2 {
	font-size: 1.1em;
	height:50px;
	line-height:38px;
	padding-left:10px;
	margin-left:45px;
	margin-top:0px;
	margin-bottom:0px;
	background-repeat: no-repeat;
	background-image: url(images/h-bg2.png);
}
.post h3 {
	font-size: 1.1em;
	color: #F00;
	height:50px;
	line-height:38px;
	padding-left:50px;
	margin-left:15px;
	margin-top:0px;
	margin-bottom:-5px;
}
.post h5 {
	font-size: 0.8em;
	color: #F00;
	height:50px;
	line-height:30px;
	padding-left:10px;

	padding-right:10px
	margin-left:0px;
	margin-top:0px;
	margin-bottom: 0px;
}


.post p {             /* 內文 */
	line-height: 2.0em; /* 行距   */
	text-indent: 40px;
	font-size: 16px;
	padding-left:15px;
	padding-right:15px;
	margin-top: -8px;
}
.post img {
	margin-top:0px;
	margin-left:0px;	
 }
.post table {
	margin-top: 8px;
}


form {
    margin: 10px 0px 0 0;
}

form legend {
	margin-left:100px;
    font-size: 1.125em;
    font-weight: bold;
}

form fieldset {
    margin: 0 0 0px 0;
    padding: 8px;
	border:hidden;
	
}

form label {
    float: left;
    width: 98px;

}

form label, form input {
    margin: 0px 0px 0px 0px;
}

form input {
margin-bottom:3px;
margin-top:3px;
width:50%;
padding:8px;
border-radius:5px;
border:1px solid #7ac9b7;
}


form textarea {
margin-bottom:3px;
margin-top:3px;
width:47.5%;
padding: 15px;
border-radius:5px;
border:1px solid #7ac9b7;
}
form Select {
padding: 10px;
border-radius:5px;
border:1px solid #7ac9b7;
width:52%;
	}

form span {
    overflow: hidden;
    padding: 0 0 0 0;
}
.button{
	width:100%;
	}
.button:hover{
	background-color: #FC9;
	}

input[type=radio]{
  width     : 2em;
  margin    : 0;
  padding   : 0;
  font-size : 1em;
  opacity   :100;
}
form .required:after {
  content:" * ";
  color:red;
  font-weight: bold;
}  


/* ===========================
   ======== Sidebar ========== 
   =========================== */

.top-sidebar {
    background-image:url(../images/texbg5.png);
	border:2px solid #CCC;
	width:  30%;
	float: left;
	margin-left:1.5%;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
	background-color: #FFF;	
	padding: 0% 0%;
	margin-bottom: 2%;
}



/*====ADD in===    */

.menu	{
	width: auto;
	font-size: 0.75em;}
.menu ul	{
	margin: 0;
	padding: 15px;
	padding-top: 8px;
}
.menu li	{
	width:50%;
	float:left;
	padding-bottom: 8px;
	margin-bottom: 8px;
	margin-left:2px;
	line-height:25px;
	list-style-type: none;
	font-size: 16px;
	color: #CCC;
	text-decoration:none;
}
.menu li a	{
	color: #000000;
	text-decoration: none;
	display: block;
	background-image: url(images/lipng-hov.png);
    background-repeat:no-repeat;

}

.menu li a:hover	{
	color: #FFF;
}
/* ------------*/
.s-liimg {
	background-image: url(images/lipng.png);
    background-repeat:no-repeat;
	float: left;
	height: 23px;
	width: 22px;
}
.s-liimg a:hover{
	background-image: url(images/lipng-hov.png);
    background-repeat:no-repeat;
	}
#sidebar .menu img {
	margin-top: 5px;
	margin-left: 1px;
}


/*  =====*/

.middle-sidebar {
	width: 20%;
	float: left;
	margin-left: 0%;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
	background-color: #FFF;	
	padding: 2% 3%;
	margin-bottom: 2%;
}

.bottom-sidebar {
	width: 20%;
	float: left;
	margin-left: 0%;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
	background-color: #FFF;	
	padding: 2% 3%;
}

/* ===========================
   ========= Footer ========== 
   =========================== */

.mainFooter {
	width: 93.85%;
	float: left;
	margin-top: 0%;
	margin-bottom: 1%;
	padding:2% 2% 2% 4%;
	background-image:url(../images/texbg5.png);
	background-color: #FFF;	
	border:1px solid #CCC;

	/*background-color: #600;*/  /* #666; */
	
/*	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
	*/
	color: #333;
	text-align:center;	
	
	
}
.FT-D-txt{
	margin-left:23%;
	
	}
.mainFooter p {       /*未使用   */
	width: 91%;
	margin: 2% auto;
}
/*  ===================================================================================================== */
/* ===================================== 原設 max-width:480px =========================================== */
@media screen and (max-width: 779px) {
	
	/*   --------menu-----------  */	
		
		div.nav-menu {
			display: none;
		}
	
		div.nav-menu1 {
			display:none;
		}

		div.nav-menu2 {
			display:none;
		}

		div.nav-expanded {
			display: block;
		}
		
		div.nav-menu ul li {
			float: none;
			border-bottom: 2px solid #d5dce4;
		}
		
		div.nav-menu ul li:last-child {
			border-bottom: none;
		}
		
	/*   -------menu2------------  */	
		
		div.nav-menu2 {
			display: none;
		}
		
		div.nav-expanded {
			display: block;
		}
		
		div.nav-menu2 ul li {
			float: none;
			border-bottom: 2px solid #d5dce4;
		}
		
		div.nav-menu2 ul li:last-child {
			border-bottom: none;
		}
	
	}


/*   -------menu1------------  */	

		div.nav-menu1 {
					display: none;
				}
		div.nav-expanded {
					display: block;
				}
		
		div.nav-menu1 ul li {
			float: none;
			border-bottom: 2px solid #d5dce4;
		}
		
		div.nav-menu1 ul li:last-child {
			border-bottom: none;
		}
/*======================================================================================================================*/

									/* ================================================================================================================================================================
									   ====== Media Queries ====== 
									   ================================================================================================================================================================ */
									
							@media only screen and (min-width : 150px) and (max-width : 780px)
									{
									.body {
											clear: both; 
											margin: 0 auto; 
											width: 100%;
											font-size: 90%;
										}
										
									#container {
										margin:0x auto ;
										padding:0% 0px 10px 0px; /*  banner 圖片 清除banner ing 上緣間隙    */
									}
									.mainHeader img {
										width:98.5%;  /* banner圖片  寬度縮減.可增加邊界   */
										height: auto;
										margin: 0 0 0 0;
									}
										
									#banner{
										display:none;
										}
									#banner-phone{
										margin-top:0;
										display: block;
									
									
										}
									
									#opbtn{
										display: block;
										margin-top:2%;
										}
									
									
									/*    */
									#header h5{
										margin-bottom:0%; /* 相異  */
										line-height:30px;
										
										}
								/*---------------------------   */		
										
									
									
									/*  -----menu bar--------------  */	
										
									#mnright{
											display:block;
											width:49%;
									/*	    background:#C93; */	    
											float:right;
											margin-right:1%;
											}
									#mnleft{
											display:block;
											width:49%;
									/*	    background: #9C0; */	    
											float:left;
											margin-left:1%;
											}
									/*----------trigger-----------------------*/
									.menu-trigger1 {
										position: relative;
											display:block;
											color: #305782;
											background-color:#d5dce4;
											padding:10px;
											text-align:center;
											font-size: 83%;
											cursor:pointer;
											border-top-right-radius:5px;
											-moz-border-top-right-radius: 5px;
											-webkit-border-top-right-radius: 5px;
									
										}
									.menu-trigger2 {
										position: relative;
											display:block;
											color:#305782;
											background-color: #CCF;
											padding: 10px;
											text-align:center;
											font-size:83%;
											cursor: pointer;
											
											border-top-left-radius:5px;
											-moz-border-top-left-radius: 5px;
											-webkit-border-top-left-radius: 5px;
											
									/*		border-bottom-left-radius:5px;
											-moz-border-bottom-left-radius: 5px;
											-webkit-border-bottom-left-radius: 5px;
									*/
									
										}
										
								/* ----------menu-------------------- */
									
										
									div.nav-menu1 {
										   position: absolute;
										    width: 49%;
								            background-color:#96F;
											font-size: 1.143em;
											height: 320px;  /* ch */
											line-height: 30px;
											margin-bottom: 0;
										/*	border-top-left-radius:1em;*/
										  /*border-top-right-radius:2em;*/
											border-bottom-right-radius:5px;
											border-bottom-left-radius:5px;
									 /*		border-radius: 5px;
											-moz-border-radius: 5px;
											-webkit-border-radius: 5px;
									*/		
											
										}
											
									div.nav-menu1 ul {
											display:block;
											list-style: none; 
											margin: 0 auto;
											padding-left: 0;
										}
										
									div.nav-menu1 li {
											margin-left: 0 auto;
											width: 100%;
										}
										
									div.nav-menu1 a:link, div.nav-menu1 a:visited {
											color: #FFF;
											display: block;
											height: 30px;
											padding: 5px 0;
											text-decoration: none;
										}
										
									div.nav-menu1 a:active,
									div.nav-menu1 .active a:link, div.nav-menu1 .active a:visited {
											background: #CF5C3F;
											color: #fff;
											text-shadow: none !important;
										}
											
									.div.nav-menu1 li a {
											
									/*		border-radius: 5px;
									*//*	-moz-border-radius: 5px;
											-webkit-border-radius: 5px;
												
											border-radius: 5px;
											-moz-border-radius: 5px;
											-webkit-border-radius: 5px;
									*/		
										}
									
						  /* --------menu2------左側(解秘)  下板-----  */	
						  
						  div.nav-menu2 {
							      position: absolute;
							  	  width: 49%;
								  background-color:#96F;
								  font-size: 1.143em;
								  height: 320px;  /*下板總高度 */
								  line-height:28px; /*??? li 全體上下  */  
								  margin:0;
								  border-bottom-right-radius:5px;
								  border-bottom-left-radius:5px;
								  
						  /*	  border-radius: 5px;
								  -moz-border-radius: 5px;
								  -webkit-border-radius: 5px;
						  */		
							  }
								  
						  div.nav-menu2 ul {
								  display:block;
								  list-style: none; 
								  margin: 0 auto;
								  padding: 0;
							  }
							  
						  div.nav-menu2 li {
								  margin-left: 0 auto;
								  width: 100%;
							  }
							  
						  div.nav-menu2 a:link, div.nav-menu2 a:visited {
							  	  height: 29px; /*li 的間距  */
								  color: #FFF;
								  display: block;
								  padding: 0;
								  text-decoration: none;
							  }
							  
						  div.nav-menu2 a:active,
						  div.nav-menu2.active a:link, div.nav-menu2 .active a:visited {
								  background: #CF5C3F;
								  color: #fff;
								  text-shadow: none !important;
							  }
								  
						  .div.nav-menu2 li a {
						  /*		
								  border-radius: 5px;
								  -moz-border-radius: 5px;
								  -webkit-border-radius: 5px;
						  */		
							  }
						  
									
									/* ---------------------  */
									.mainContent {     
											overflow: hidden;
											line-height: 25px;
											margin-bottom:0;/*清除banner ing 下緣間隙    */
										}
									.content {
											width: 100%;
											float: left;
											width: 99%; /* 右欄寬度 */
											border-radius: 0px;
											-moz-border-radius: 0px;
											-webkit-border-radius: 0px;	
										}	
										
									.topcontent {
											background-color: #FFF;
											padding: 0.5% 4% 2% 2%;  /* 內欄  */		
											margin-bottom: 0%;
											
											border-radius: 0px;
											-moz-border-radius: 0px;
											-webkit-border-radius: 0px;	
									
										}
										
									/*
									.bottomcontent {
											background-color: #FFF;	
											border-radius: 5px;
											-moz-border-radius: 5px;
											-webkit-border-radius: 5px;	
											padding: 2% 5%;
										}
									*/	
									.post	{
										border:2px solid #CC0;
										width:99%;
									
									}
									.post-info {
											display: none;
										}
								
										
									/*----sidebar----*/	
									.top-sidebar {
											display:none;
											width: 86%;
											float: left;
											border-radius: 5px;
											-moz-border-radius: 5px;
											-webkit-border-radius: 5px;	
											background-color: #FFF;	
											margin-top: 4%;
											margin-left: 0;
											padding: 0 7%;
											margin-bottom: 0;		
										}
										
									.top-sidebar p {
											width: 90%;
										}
									
									.middle-sidebar {
											width: 86%;
											float: left;
											border-radius: 5px;
											-moz-border-radius: 5px;
											-webkit-border-radius: 5px;	
											background-color: #FFF;	
											margin-top: 4%;
											margin-left: 0;
											padding: 0 7%;
											margin-bottom: 0;	
										}
										
									.middle-sidebar p {
											width: 90%;
										}
										
									.bottom-sidebar {
											width: 86%;
											float: left;
											border-radius: 5px;
											-moz-border-radius: 5px;
											-webkit-border-radius: 5px;	
											background-color: #FFF;	
											margin-top: 4%;
											margin-left: 0%;
											padding: 0 7%;
											margin-bottom: 1%;
										}
										
									.bottom-sidebar p {
											width: 90%;
										}
									/*---------------------*/
										
									.mainFooter {
											width: 94%;
											float: left;
											margin: 0% 2% 0 0;
											padding-left: 3%;
											padding-right:3%;
											background-image:url(images/texbg5.png);
											background-color: #FFF;	
											border:1px solid #CCC;
											/*border-radius: 5px;
											-moz-border-radius: 5px;
											-webkit-border-radius: 5px;	
											*/
											color: #333;	
										}
										
									.mainFooter p {
											width: 86%;
											margin: 2% auto;
										}
									.FT-D-txt{
										margin-left:1%;
										
										}
									
									.FT-L-img {
										display: none;
										}
									.FT-R-img {
										display: none;
										}
									
									/*   --------form-----------  */	
									
									form label {
										margin-left:0px;
										font-size:90%;
										letter-spacing:0px; 
										float: left;
										width: 26%;
									
									}
									
										
									form input {
										width:90%;
									}
									form textarea {
										width:70%;
									}
									form Select {
										
										}
									.button{
										width:100;
										}

}