/*
	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;  */
	/*background: #462C2D url(../images/bg2.png) repeat-x left top;
	color: #000305;*/
	font-size: 87.5%;  /* Base font size: 14px */
	font-family: "rem Helvetica", "Microsoft JhengHei", "微軟正黑體", "微软正黑体", "Hiragino Sans GB", sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;   /* link with no underline*/
	letter-spacing: 0.1em; 
	line-height: 1.429;
	text-align: justify;
    text-justify:inter-ideograph;
	text-align: left;
 	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-text-size-adjust: 100%;
	overflow-y:auto; /* ?必須 */

	}
.body {
	clear: both; 
	margin: 0 auto; 
	width: 98%;
	}
img{
	max-width:100%;
	height:auto;
	
	}	

#wrapper{
	width:100%;
  	box-shadow: inset 1em 0 1em gold, 0 0 1em red;  
	
}
#container {
	background-image: url(../images/wrapper.jpg); /*底圖 */
	width: 100%;
	margin:5px auto ;
	padding:0px 0px 0px 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;
}

/* ===========================
   ======= 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 {
/*	background-color:#F00;*/	
/*	background-color: #CF5C3F;*/
/*	color: #fff;
*/	
/*	text-decoration: none;
*/
}

li .active{
		background-color: #CF5C3F;
	}

/*==========class===============*/
.red{
	color: #F00;}
.red2{
	color: #F00;
	font-size:90%;
	}
.red110{
	font-size:110%;
	color: #F00;}
	
.fluid{
	max-width:100%;
	height:auto;
	}

.max{
	max-width:320px;
	}
.max395{
	max-width:395px;
		}
.align{
	vertical-align:middle;
	}
.em115{
	font-size:1.15em;
	
	}

/* ====display=========== */
#banner{
	display: block;
	}
#banner-phone{
	display: none;
	}

.menu-trigger {
	display: none;
}
.menu-trigger2 {
	display: none;
}

.FT-L-img {
	margin-top: 20px;
	display: block;
	float:left;
	}
.FT-R-img {
	margin-top: 20px;
	display:block;
	float:right;
	}
	
#mnleft{
	display:none;
		}
.L{
	display:block;
	}	
.S{ 
   display:none;
}	

.btnwraper{ 
	display:none;
}	
		
/* ======= mainHeader ==============   */	
.mainHeader{
	margin-bottom:3px;
	margin-right: 0.6%;
	}
	
/* =======banner img==============   */	
.mainHeader img {
	width:97%;
	height:auto;
	margin: 0% 0% 0% 1.5%;
}

/* ===========================
   ===== Main Navigation ===== 
   =========================== */
  /*  */ 
div.nav-menu {
	/*		
	設高度後無法容納下推
	height:35px;
	*/

	text-align: center;
	margin-left: 12px;
	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-menu3 {
   
}
	
div.nav-menu3 ul {
	list-style: none; 
	margin: 0 auto;
}

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

div.nav-menu3 a:hover, div.nav-menu3 a:active,
div.nav-menu2 .active a:link, div.nav-menu2.active a:visited {
/*	background: #CF5C3F;
*/	
	color: #333;
	text-shadow: none !important;
}
	
div.nav-menu3 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.5%;  /* 右邊界  */
	width: 76%; /* 右欄寬度 */
	float: right;
/*	border: 1px solid red;  */
	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% 3% 3%;
	margin-left:1%;
	margin-bottom: 2%;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
}
.topcontent h1 {
	color: #C30;
	font-size:1.37em;
	margin-bottom:0;
}

.topcontent h2 {
	color: #C30;
	font-size:1.37em;
}

.post	{
	width:90%;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 15px;
	padding-right:3%;
	font-size: 1.15em;
    letter-spacing: 0.03em; 
	line-height:25px;
	text-align: justify;
	text-justify:inter-ideograph;
}

.post h1 {
	color:#0000FF;
	font-size: 1.2em;
	line-height:38px;
    padding-left:50px;
	background-image: url(../images/h1bgempty.png);
	background-repeat: no-repeat;
	
}

.post h2 {
	line-height:30px;
	margin-left:45px;
	margin-top:0px;
	margin-bottom:0px;
	font-size: 1.2em;
	font-weight: bolder;
}
.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: 1.1em;
	color: #00F;
	height:42px;
	line-height:38px;
    padding-left:50px;

}

.post p {             /* 內文 */
	line-height:30px; /* 行距   */
	font-size: 1.15em;
    letter-spacing: 0.03em; 
	padding-left:15px;
	padding-right:15px;
	margin-top: -8px;
}
.post ol{
	line-height:30px; /* 行距   */
	font-size: 1.15em;
	letter-spacing:1px;

	}
.post ul {
	line-height:30px; /* 行距   */
	font-size: 1.15em;
	letter-spacing:1px;
	

	}

.post img {
	margin-top:0px;
	margin-left:0px;	
 }
.post table {
	font-size:120%;
}
.post-info {
  font-size:0.8em;
  filter: alpha(opacity=50);
  /* IE */
  -moz-opacity: 0.5;
  /* Mozilla */
  opacity: 0.5;
  /* CSS3 */
  margin-top:0;
  margin-bottom:2px;
	}
.post div ,.post h1, .post h5, .post p ,.post ul , .post ol ,.post img{
	margin-top:0;
	margin-bottom:2px;
/*	border:1px solid #F00; 	 */	
}
	
    /*----------------------------------  */
	@media only screen and (min-width : 150px) and (max-width : 780px)
	  {
		  .post .smleft{
				  margin-left: 0px; /* to the left */
				  font-size: 1.0em;
				}  
		  .post h2 {
				margin-left: 0px;
				font-size: 1.1em;
				font-weight: bolder;
			}
	
	  }

/*--//----------------------------------- 	*/	

/*
.post .healthnews{
	background-color:snow;
	padding: 10px 0px 10px 5px;
	border:1px solid pink;
	border-radius: 10px;
	margin-bottom: 10px;
	}	
.post .healthnews:hover{
	color: red;
	border:2px solid red;
	background-color: #FAFAD2;
	}	
*/

/*  ---newspannel: picture and text--------------------  */        
.newslinks ul li a{
	color:blue;
		
	}	
.newslinks ul li a:hover{
	color:red;
		text-decoration: underline;
		
	}	
.indext40{
	text-indent: 40px;
	}
.margintop{
	margin-top:5px;
	}
/* ===========================
   ======== Sidebar ========== 
   =========================== */
.sidebartop{
		width: 102%;
	}
.sidebar {
    background-image:url(../images/texbg5.png);
	border:1px solid #CCC;
	width:  20%;
	float: left;
	margin-left:1.0%;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
	background-color: #FFF;	
	padding: 2% 0%;
	margin-bottom: 2%;
}

 .sidebar .menu	{
	width: auto;
	font-size: 1.0em;
	}
 .menu ul	{
	margin: 0;
	padding-left:0%;
	padding-top: 8px;
    }
.sidebar .menu li	{
	text-align:left;
	padding-bottom:0px; /*上下間距  */
	margin-bottom:0px; /* 上下間距 */
	margin-left:3%; /*左間際  */
	padding-left:3%;
	line-height:25px;
	list-style-type: none;
	font-size: 1.35em;
	color: #CCC;
	text-decoration:none;
     }
	 
.sidebar .menu li a {
	color: #000000;
	text-decoration: none;
	display: block;
    background-repeat:no-repeat;

    }

.sidebar .menu li a:hover	{
	color:red;
    }
.sidebar .menu ul .active {
	background-color:#FF9966;
}
	
.sidebar img {
	max-width:96.5%;
	margin-right:1%;
	padding-right:1%;
	
	}
	
.sidebar .menu img {
	margin-top: 5px;
	margin-left: 1px;
     }
.sidebarphoto{
	margin-top:15px;
	margin-left:20px;}	 
	 
/*==========================  */ 
	
#announce{
  position: relative;
  width: 72%;
  height:45px;
  margin-left:25%;
}
#block {
  background: #CCC;
  filter: alpha(opacity=50);
  /* IE */
  -moz-opacity: 0.5;
  /* Mozilla */
  opacity: 0.5;
  /* CSS3 */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #666;
}

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

.mainFooter {
	display: block;
	width: 93.85%;
	float: left;
	margin-top: 0%;
	margin-bottom: 0px;
	padding:0.5% 2% 0.5% 4%;
	background-image: url(../images/texbg5.png);
	background-color: #FFF;	
	border-top:1px solid #CCC;
 	/*background-color: #600;*/  /* #666; */
    /*	
    border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
	*/
	color: #333;
	text-align:center;	
     }

.mainFooter p {       /*未使用   */
	    width: 91%;
	    margin: 2% auto;
   }
.FT-D-txt{
	   margin-left:23%;
	margin-bottom:0px;
	}


/* ==================== footup ==================== */
#footup {
	background-image:url(../images/texbg5.png);
	clear: both;
	display:block;
/*	background-color:#CCFF00;	
*/    width:100%;
	height:43px;
	line-height:30px;
	text-align:center;
	text-decoration:none;
}
#footup a {
		line-height: 42px;

	text-decoration:none;
}
#footup a:hover{
	color:red;
	background-color:# F00;
}

/* ---------------------------------  */
.footdown{
	background-image: url(../images/wrapper.jpg); /*底圖 */
}


/*=========================================================================================*/

                  /* ============ 100~780 ============================================ */

				  @media only screen and (min-width : 100px) and (max-width : 780px)
					  {
						  
					/*========= menu  ====================== */  
						div.nav-menu {
							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;
						}

					/*   -------menu3------------  */	

						div.nav-menu3 {

							display: none;

								}
						div.nav-expanded {
							display: block;
								}

						div.nav-menu3 ul li {

							float: none;
							border-bottom: 2px solid #d5dce4;
						}

						div.nav-menu3 ul li:last-child {
							border-bottom: none;
						}
						  		  
					 /*  -----menu bar--------------  */	
						 #mnright{
							  display:block;
							  width:98.3%;
					          /* background:#C93; */	    
							  float:right;
							  margin-right:0.5%;
								  }
							  
						  /*-----手機版--單一trigger-----------------------*/
						 .menu-trigger {
							  position: relative;
							  display:block;
							  color:#305782;
						   /*   background-image: url(../images/wrapper.jpg);
							  background-color:lavender; 
						  */

							  background-color: red; /* For browsers that do not support gradients */
							  background-image: linear-gradient(#ff99c2,pink,pink,pink,yellow); /* Standard syntax (must be last) */

							  border-bottom: 2px  ridge  #F0C3C4;
							  padding:8px;
							  text-align:center;
							  font-size: 1.2em;
							  cursor:pointer;

							  }
							  
						 .menu-trigger:hover{
							 color: red;
							    }
							 
						 /* ----手機版-----單一menu  下板-----  */	
						  div.nav-menu3 {
							  position: absolute;
							  width: 95.5%;
							/*  background-image:url( ../images/bg-c1.jpg );*/

						   	  background-color:lightyellow;/* !!! #666  /#F96F*/
							  text-align: center;
							  font-size: 1.3em;
							  height: 270px;  /*下底板總長度 *//* !!!333px; /320px */
							  line-height:30px; /* ??? li全體上下  *//* !!! 28px /56px */
							  margin:0 ;
							  border-bottom-right-radius:5px;
							  border-bottom-left-radius:5px;
							  border-bottom: 5px lightblue solid;
                              outline: 1px solid blue;
							  }
								  
						   div.nav-menu3 ul {
							  display:block;
							  list-style: none; 
							  margin: 0 auto;
							  padding: 0;
							  }
							  
						   div.nav-menu3 li {
							  display:block; /* ====多加==== ! 呈現分隔 ====(注意 784 和 797) =====    */
							/*  border-bottom: 1px lightgray solid; /*  加分隔線 */
							  width: 100%;
							  padding-bottom: 12px;
							   height: 20px;
							  }
						
						   div.nav-menu3 a:link, div.nav-menu2 a:visited {
							  color:blue;
							  display: block;
							  padding: 0;
							  text-decoration: none;
							  }
							  
						   div.nav-menu3 a:active,
						   div.nav-menu3.active a:link, div.nav-menu3 .active a:visited {  
							  /* ===== 但未加====	height: 21px; li 的間距 =========  */
							  background: #CF5C3F;
							  color: #fff;
							  text-shadow: none !important;
							  }
								  
						   div.nav-menu3 li a:hover {
							  color:red;

						  /*		
								  border-radius: 5px;
								  -moz-border-radius: 5px;
								  -webkit-border-radius: 5px;
						  */		
							  }
							  
						   #menu-wrapper{
								width: 98%;	
								height:;
							
								}	

						
							#menu-wrapper .m-r {
							  width: 50%;
							  float:left;
							  background:lightyellow;
							  height:100%;
							}


							#menu-wrapper .m-l {
								width: 50%;
								text-align: center;
								float:left;
								background: lightblue;
								height: 100%;

							}
						  
  
					/*==============================================  */
						.body {
							  clear: both; 
							  margin: 0 auto; 
							  width: 100%;
							  font-size: 90%;
							  }
						  #wrapper{
							  margin-left: 7px;
							  width:97%;
							}

						#container {
							  margin:0x auto ;
							  padding:0.5% 0px 10px 0px; /* banner圖片  清除banner ing 上緣間隙    */
						  }
							  
					 /* -------------------  */	
						.mainHeader img {
							  width: 98.5%;  /* banner圖片  寬度縮減.可增加邊界   */
							  height: auto;
							  margin-bottom: 0%;
							  }
								  
					 /*  -------banner------------  */	
						 #banner{
							  display:none;
							  }
						 #banner-phone{
							  display: block;
							  margin-left:1%;       /* banner圖片 左邊界 */
							  }
						
					 /* ----------------------------*/	
						 .sidebar{
							  display:none;
								  }
				
						  /*  ------content-------------  */	
						  .mainContent {
							  overflow: hidden;
							  line-height: 25px;
							  }
						  .content {
							  width: 100%;
							  float: left;
							  }	
							  
						  .topcontent {
							  background-color: #FFF;
							  padding: 2% 5%;
							  margin-bottom: 0%;
							  border:none;  /* 不加 border */
						  }
						  .post	{
							  width:97%;
							  margin-top: 0px;
							  font-size: 1.15em;
							  margin-left: 0px;
							  margin-right: 15px;
							  padding-right:3%;
							  text-align: justify;
							  text-justify:inter-ideograph;
						     }
							  
						   #openbtn{
							  width: 22px;
								}
						  /*   -------bottom button------------  */	
						  .btnwraper{ 
							  display:block;
								}	
						  
						  /*   -------footer------------  */	
						  .mainFooter {
							  width: 93.5%;
							  float: left;
							  margin: 0% 2% 8% 0%; /* 左設1%會漏出底色  */
							  padding-left: 3%;
							  padding-right:3%;
							  padding-bottom:3.5%;
							  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-L-img {
							  display:none;
							  }
						  .FT-R-img {
							  display:none;
							  }
						  .FT-D-txt{
							  margin-left:0%;
							  
							  }
						  #writer{
							  display:none;
								  }
						  #announce{
							  display:none;
							  }
						  #footup{
							  display:none;
							  }
							  
					     .txt-12pt-red{
							  display: none;
							  }
						 .foottext{
							  display: none;
							  }
							  
					     /*  ---------------------- */
						 .footdown{
						      height:10%;
						}

  
							  
							  
				 /* //media qury ============================= */		  
				 }


/* ============ 1200以上 ============================================ */
@media only screen and (min-width : 1200px) {
   #wrapper{
	/* width: 1150px;  */
	/*  margin: 0 auto;	*/
}
	
}

 /* ============ 320以下 ============================================ */
@media only screen and (max-width : 315px) {
   #wrapper{
	width: 320px;
	}
	
}

 /* ============ 電流波 ============================================ */
@media only screen and (max-width : 350px) {
	#img-ewave{
		display: none;
	}

}