/* ---reset.css--- */


/* --電腦版型------------------------------------- */
@media screen and (min-width: 1025px) {
.g-recaptcha{
	margin: 0 0 0 0px;
	float: left;
	transform:scale(0.8); -webkit-transform:scale(0.8); transform-origin:0 0; -webkit-transform-origin:0 0; } 
	
#WRAPPER{
	width:1020px;
	margin:0 auto;
	background-image:url(images/bg.png);
}

#TOP-MENU{
	display:none;
}

#TOP-MENU h4{display:none;}


#BANNER h2{
	font-size:14px;
	text-align:center;
	color:#EEE;
	padding-top:20px;
	letter-spacing:2px;
}

#NAV{
	width: 640px;
	height: 60px;
	margin: 0 auto;
	background-color: #FFF;
}

#NAV #XX{
	display:none;
}

#NAV ul{
	margin: 0;
	padding: 0;
	width: 640px;
	height: 60px;
	list-style: none;
}

#NAV li{
	margin: 0;
	padding: 0;
	float: left;
	width: 104px;
}

#NAV li a{
	display:block;
	width:104px;
	line-height:50px;
	text-align:center;
	text-decoration:none;
	color:#222;	
}

#NAV li a:hover{
	border-bottom:4px solid #c9e1a3;
}

#CONTENT-1{
	width:1020px;
	margin:0 auto;
	overflow:hidden;
	background-color:rgba(255,255,255,0.5);
}

#CONTENT-1 img{
	float:left;
	margin-left:50px;
}

#CONTENT-1 .WORD{
	width:460px;
	float:right;
	padding:80px;
}

#CONTENT-1 .WORD p{
	font-size:15px;
	line-height:1.7;
	color:#333;
}

#CONTENT-2{
	clear:both;
	width:1020px;
	margin:0 auto;
	overflow:hidden;
	background-color:#FFF;
	padding:40px 0px;
}

#CONTENT-2 .BOX{
	float:left;
	width:280px;
	margin-left:45px;
}

#CONTENT-2 .BOX h3{
	font-size:2em;
	line-height:2;
	border-bottom:2px solid #0CC;
	color:#0CC;
	text-align:center;
}

#CONTENT-2 .BOX p{
	font-size:13px;
	line-height:1.8;
	padding:20px;
	color:#333;
}

#DOWN{
	clear:both;
	width:1020px;
	margin:20px auto;
	background-color:#AAA;
	padding:20px 0px;
}

#DOWN p{
	font-size:13px;
	text-align:center;
	line-height:1.8;
	color:#FFF;
}
}
@media screen and (min-width: 768px) and (max-width:1024px){
	
		.g-recaptcha{
	margin: 0 0 -15px 14px;
	float: left;
	transform:scale(0.8); -webkit-transform:scale(0.8); transform-origin:0 0; -webkit-transform-origin:0 0; } 
	
	#WRAPPER{
	width:1020px;
	margin:0 auto;
	background-image:url(images/bg.png);
}

#TOP-MENU{
	display:none;
}

#TOP-MENU h4{display:none;}


#BANNER h2{
	font-size:14px;
	text-align:center;
	color:#EEE;
	padding-top:20px;
	letter-spacing:2px;
}

#NAV{
	width: 520px;
	height: 60px;
	margin: 0 auto;
	background-color: #FFF;
}

#NAV #XX{
	display:none;
}

#NAV ul{
	margin:0;
	padding:0;
	width:520px;
	height:60px;
	list-style:none;
}

#NAV li{
	margin: 0;
	padding: 0;
	float: left;
	width: 84px;
}

#NAV li a{
	display:block;
	width:104px;
	line-height:50px;
	text-align:center;
	text-decoration:none;
	color:#222;	
}

#NAV li a:hover{
	border-bottom:4px solid #c9e1a3;
}

#CONTENT-1{
	width:1020px;
	margin:0 auto;
	overflow:hidden;
	background-color:rgba(255,255,255,0.5);
}

#CONTENT-1 img{
	float:left;
	margin-left:50px;
}

#CONTENT-1 .WORD{
	width:460px;
	float:right;
	padding:80px;
}

#CONTENT-1 .WORD p{
	font-size:15px;
	line-height:1.7;
	color:#333;
}

#CONTENT-2{
	clear:both;
	width:1020px;
	margin:0 auto;
	overflow:hidden;
	background-color:#FFF;
	padding:40px 0px;
}

#CONTENT-2 .BOX{
	float:left;
	width:280px;
	margin-left:45px;
}

#CONTENT-2 .BOX h3{
	font-size:2em;
	line-height:2;
	border-bottom:2px solid #0CC;
	color:#0CC;
	text-align:center;
}

#CONTENT-2 .BOX p{
	font-size:13px;
	line-height:1.8;
	padding:20px;
	color:#333;
}

#DOWN{
	clear:both;
	width:1020px;
	margin:20px auto;
	background-color:#AAA;
	padding:20px 0px;
}

#DOWN p{
	font-size:13px;
	text-align:center;
	line-height:1.8;
	color:#FFF;
}
}
/* --手機版型------------------------------------- */

@media screen and (max-width: 767px) {
	
.g-recaptcha{
		width:60%;
		transform:scale(0.77); -webkit-transform:scale(0.77); transform-origin:0 0; -webkit-transform-origin:0 0; 
	margin: 0 0 0 12px;
	float: left;
	 } 
	
*{
	box-sizing:border-box; /* 讓 padding 與 width 解除關係 */
}

html,body{
	-webkit-text-size-adjust:none; /* iPhone 旋轉後 文字不要放大 */
}

#WRAPPER{
	width:100%;
	background-image:url(images/bg.png);
	min-width:320px; /* 限定最小寬度 */
}
	
#TOP-MENU{
	display:block;
	width:100%;
	height:40px;
	top:-20px;
	position:relative;
	background-color:none;
}

#TOP-MENU #BTN{ /* 製作手機版 右上角的按鈕 */
	display:block;
	width:60px;
	height:35px;
	background-image:url(images/btn.jpg);
	position:absolute;
	right:5px;
	top:0px;
	text-indent:-9999px;
}

#NAV{
	position:fixed; /* position 可以讓 div 跳脫原本在 HTML 內的位置 */
	top:0;
	left:0;
	z-index:888;	
	width:100%; /* 寬高 100% 整個蓋住 */
	height:100%;
	background-color:rgba(0,0,0,0.7);	
	display:none; /* 把主選單先關掉 */
}

#NAV ul{
	list-style:none;
	margin:auto;
	width:260px;
	height:260px;	
	position:absolute; /* 把 ul 選單 上下左右都置中 */
	top:-40px;
	bottom:0;
	left:-10%;
	right:0;
}

#NAV li{
	width:100%;
	float:none;
}

#NAV li a{
	display:block;
	width:100%;
	line-height:50px;
	text-align:center;
	text-decoration:none;
	background-color:#000;
	border:1px solid #333;
	color:#FFF;	
}

#NAV li a:hover{
	border:1px solid #CCC;
}

#NAV #XX{ 			/*選單之內右上角的 X 按鈕*/
	display:block;
	width:30px;
	height:30px;
	background-color:#FFF;
	border-radius:50%;
	text-align:center;
	line-height:30px;
	
	position:absolute;
	right:-10px; /* 凸出去 */
	top:-30px;
}


#CONTENT-1{
	width:100%;
	margin:0 auto;
	overflow:hidden;
	background-color:rgba(255,255,255,0.5);
}

#CONTENT-1 img{
	float:none;
	margin:0;
	width:100%; /* 插圖自動伸縮 */
	height:auto;
}

#CONTENT-1 .WORD{
	width:100%;
	float:none;
	padding:30px;
}

#CONTENT-1 .WORD p{
	font-size:18px;
	line-height:1.6;
	color:#333;
}

#CONTENT-2{
	clear:both;
	width:100%;
	margin:0 auto;
	overflow:hidden;
	background-color:#FFF;
	padding:20px 0px;
}

#CONTENT-2 .BOX{
	float:none;
	width:100%;
	margin:0;
	padding:10px 20px;
}

#CONTENT-2 .BOX h3{
	font-size:2em;
	line-height:2;
	border-bottom:2px solid #0CC;
	color:#0CC;
	text-align:center;
}

#CONTENT-2 .BOX p{
	font-size:18px;
	line-height:1.8;
	padding:20px;
	color:#333;
}

#DOWN{
	clear:both;
	width:100%;
	margin:20px auto;
	background-color:#AAA;
	padding:20px 0px;
}

#DOWN p{
	font-size:13px;
	text-align:center;
	line-height:1.8;
	color:#FFF;
}