@import url("reset.css");

*{
	margin:0;
	padding:0;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
a{color: #FFFFFF;}
html{ 
	font-family:Arial, Verdana, "微軟正黑體";
	-webkit-text-size-adjust:none;
}
img{border: 0;}
body{
/*background-image:url(images/Bodybg.png);*/
	background-repeat:repeat;
	background-color:#fff;
	background-position:center top;
	
	
}
#wrapper{
	width:100%;
	min-height:100%;
/*	background: url(images/bg.png) no-repeat center top;*/
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	}
#TOP-MENU{
		display:block;
		width:100%;
		height:60px;
		position:relative; /* 外層相對 */
		background-color:#000;
	}
	
	#TOP-MENU #BTN{  /* 製作手機版 右上角的按鈕 */
		display:block;
		width:60px;
		height:40px;
		background-image:url(images/btn.png);
		
		position:absolute;  /* 子層絕對 */
		right:5px;
		top:10px;
		text-indent:-9999px;
	}
	
	#NAV{
		width:100%;
		height:auto; /* 高度自動 */
		background-color:#5cc2d0;		
		display:none;  /* 把主選單先關掉 */
	}
	
	#NAV ul{
		width:100%;
		height:auto; /* 高度自動 */
	}
	
	#NAV li{
		width:100%;
		float:none; /* 取消 float */
	}
	
	#NAV li a{
		display:block;
		width:100%;
		height:50px;
		line-height:50px;
		text-align:center;
		text-decoration:none;
		background-color:#ff9900;
		border:1px solid #FFF;
		color:#fff;
	}
	
	#NAV li a:hover{
		background-color:#ccc;
		border:1px solid #FFF;
	}
	.NAV-LOGO{
	display:block;
	float:left;
	width:80px;
	height:40px;
	line-height:50px;
	top:8px;left:10px;
	text-align:center; }
.NAV-LOGO img{
	
		margin:12%;
		line-height:40px;
		}
#logor{
	display:none;
	float:left;
	}
#logor img{
	width:80%;
	margin:3%;}	
.Mbn{
	width:100%;
	height:auto;
	margin:0 auto;	
	}
.bn{	
	width: 96%;
	height: auto;
	margin:0 auto;
	padding-bottom:0;
	position:static;
	}
.g1{display: none;}
.cont{
	width:100%;	
	margin:0 auto;
	position:relative;/*疊BN*/	
	background-image:url(images/contbgM.png);
	background-size:cover;
	background-position:center bottom;
	background-repeat:no-repeat;
	background-color: #fff;
	padding-bottom: 12%;	
	}
.cont:after{content: '';display: block;clear: both;}

.box{width:100%;height: auto;margin:0 auto;	font-size:1.1em;line-height:1.7em;	font-weight:bold;text-align: justify;}
.box:after{content: '';display: block;clear: both;}	/*偽元素*/
.boxtitle1{padding-left:2%;}

.boxtitle1-2{display: none;}
.titleword{display:block;padding-bottom: 6px; font-size:1em;line-height:1.5em;font-weight:bold;font-family:Arial, Verdana, "標楷體";color: #009999; }
.box-text{width:94%;height: auto; padding: 10px;margin:0 auto;clear:both;}
.cont2{
	width:100%;	
	height: auto;
	margin:0 auto;		
	background-image:url(images/cont2bgM.png);
	background-position:center bottom;
	background-repeat:no-repeat;
	background-size: cover;
	background-color: #e1dddd;	
	padding-bottom: 19%;
	}
.cont2:after{content: '';display: block;clear: both;}
.box2{width:100%;margin:0 auto;font-size:1.1em;line-height:1.7em;	font-weight:bold;padding-top: 20px;text-align: justify;}
.boxtitle2{padding-left:2%;}
.box2-row{width:100%;overflow:hidden}
.box2img{width: 100%;float: none;padding:5px;}
.box2-left{	width:100%;float:none;padding:0 10px 4px 10px;}
.box2-right{width:100%;	float:none;	padding:0 10px 4px 10px;}
.box2imgleft{width:100%;float:none;	padding:0 10px 4px 10px;}

.cont3{
	width:100%;	
	height:auto;
	margin:0 auto;
	background-image:url(images/cont3bg.png);
	background-position:center top;
	background-repeat:no-repeat;
	background-size: cover;
	background-color: #000000;
	padding-bottom: 1%;
	}
.cont3:after{content: '';display: block;clear: both;}
.box3{width:100%;padding-top: 5%; margin:0 auto;font-size:1.1em;line-height:1.7em;	font-weight:bold;}
.boxtitle3{padding-left:2%;padding-bottom: 10px;}
.box3-row{width:94%;margin: 0 auto;overflow:hidden;}
.box3img{width: 100%;float: none;padding:5px;}
.box3-left{	width: 100%;float: none;padding:5px;}

.cont4{
	width:100%;	
	height: auto;
	margin:0 auto;
background-image:url(images/cont4bgM.png);
	background-position:center top;
	background-repeat:no-repeat;
	background-size: cover;
	background-color: #000000;
	padding-bottom: 14%;
	}
.cont4:after{content: '';display: block;clear: both;}
.box4{width:100%;padding-top: 0px; margin:0 auto;font-size:1.1em;line-height:1.7em;	font-weight:bold;text-align: justify;}
.boxtitle4{padding-left:2%;}
.box4-row{width:100%;overflow:hidden;}
.box4-left{width: 94%;float: none;margin: 0 auto;}
.box4-right{width: 94%;float: none;margin: 0 auto;}
.bookg1,.bookg2{width: 100%;float: none;padding:0px;}

.box4imgright{width: 100%;float: none;padding:5px;}


.box5{width:100%; margin:0 auto;font-size:1.1em;line-height:1.7em;font-weight:bold;text-align: justify;}
.boxtitle5{padding-left:2%;}
.box5-out{
	width:94%;
	height:auto;
	margin:4px auto;
	padding:4px;	
	position:relative;
	border:1px solid #009999;
	box-shadow:3px 3px 2px 2px rgba(223,206,171,.4);
	overflow:hidden;
	}	
.box5-in{
	width:100%;
	height:auto;
	margin:0 auto;
	padding:10px;
	font-size:1em;
	line-height:1.5em;	
	position:relative;
	border:5px solid #009999;
	overflow:hidden;
	}
.box5-row{width:100%;overflow:hidden;}
.box5-book{width:100%;float:none;padding:4px;text-align: center;margin: 0 auto;}
.box5-text{width:94%;margin: 0 auto;padding: 20px 0; clear: both;}
.box5imgleft{width:94%;margin: 0 auto;float: none; padding:4px;}
.box5right{width:100%;float: none;padding: 10px;font-size:1em;line-height:1.7em;font-weight:bold;}

.cont6{
	width:100%;
	height: auto;
	margin:0 auto;
	background-image:url(images/cont6bg.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-color: #cfcdcd;
	background-size: cover;
	padding-bottom: 5%;
	}
.cont6:after{content: '';display: block;clear: both;}
.box6{width:100%;padding-top: 15%; margin:0 auto;font-size:1.1em;line-height:1.7em;	font-weight:bold;}

.page{
	  width:95%;
	  height:auto;
	  margin:0 auto;
	  text-align:center;}
.box-booktext{
	width:100%;	
	margin:0 auto;
	text-align:center;
	font-size:1em;
	line-height:1.2em;
	font-weight:bold;
	}
.box-booktext img{
	width:100%;	
	margin:0 auto;
	padding-bottom:20px;}
	
.carbg{width: 100%;margin: 10px auto;}
.car{
	font-size:1.2em;
	color:#FFF;
	width:180px;
	height:40px;
	line-height:20px;
	text-decoration:none;
	background-color:#000;
	padding:10px;margin:20px;
	text-align: center;
	border-radius:30px;
	margin: 0 auto;
	}			
.car a:link{
	color:#FFF;
	display:block;
	text-decoration: none;
	}
.car a:actived{color:#FFF;	
	text-decoration: none;}
.car a:hover{
	color:#FFF;
	display:block;
	text-decoration: none;
	font-size:1.1em;
	}
.car2bg{width: 100%;margin: 10px auto;}
.car2{
	font-size:1em;
	color:#FFF;
	width:120px;
	height:40px;	
	line-height:20px;
	text-decoration:none;
	background-color:#000;
	/*border-radius:8px;*/
	padding:10px;margin:10px;
	text-align: center;
	border-radius:20px;
	margin: 0 auto;
	}			
.car2 a:link{
	color:#FFF;
	display:block;
	text-decoration: none;
	}
.car2 a:actived{color:#FFF;
	
	text-decoration: none;}
.car2 a:hover{
	color:#FFF;
	display:block;
	text-decoration: none;
	font-size:0.9em;
	}
h3{color: #FFFFFF;}
h4{
	color:#3333cc;
	font-size:1.4em;
	line-height:1.5em;} 
h5{
	font-size:1.2em;
	line-height:1.4em;
	color:#166785;	}	
h6{color: #009999;font-size:1.1em;	font-weight:bold;padding-top: 10px;}
.white{color:#fff;}
.red{
	color:#009999;
	font-size:1.8em;
	line-height: 2em;
	}
.greenb{
	color:#005C5C;
	font-size:1.5em;
	line-height:1.8em;
	font-weight:bold;
	}

.green{
	color:#005C5C;}	
.bold{
	font-weight:bolder;
	}
footer{
	clear:both;
	width: 100%;
	overflow:hidden;	
	background-color: #ccc;
	padding-bottom:20px;
}
footer h5{
	padding-top:10px;
	font-size: 1.1em;
	color: #333;
	text-align: center;
	line-height: 1.5em;
	width: 100%;
}
footer h5 a:link{
	color: #333;
	text-decoration:none;
}
footer h5 a:visited{
	color: #333;
	text-decoration:none;
}
footer h5 a::hover{
	color: #333;
	text-decoration:none;	
}

footer h5 img{
	padding-top:10px;
}
#backtotop{
	display:scroll;
	position: fixed;
   top:8%;
   right: 17%;
   width: 5px;
   height: 5px;
   opacity: 0.8;
   z-index: 10;
   cursor: pointer;
   transition: all .5s
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
	}
#backtotop:hover {
opacity: 1;
width: 6px;
height: 6px;
}