@charset "utf-8";
/* basic */
html{width:100%; height:100%; margin:0; padding:0;}
body {
	width:100%; height:100%;
	margin: 0; padding: 0;
	font-size: 12px; line-height: 22px; letter-spacing:1.5px; color: #fff; 
	font-family: "新細明體", Myriad, Tahoma, Arial, Helvetica, sans-serif;
	background-color:#2b85be;
}
img{border:solid 0px;}
.clear{clear:both;} .left{float:left;} .right{float:right;}
.font11px {font-size:11px;} .font12px {font-size:12px;} .font13px {font-size:13px;} .font14px {font-size:14px;} .font15px {font-size:15px;}


/* bar */
#bar_top{
	width:100%;
	height:17px;
	background-image:url(../images/index_bar_top.jpg);
	background-repeat:repeat-x;
	position:fixed;
	top:0;
	z-index:100;
	display:block;
}
#bar_bottom{
	width:100%;
	height:84px;
	background-image:url(../images/index_bar_bottom.png);
	background-repeat:repeat-x;
	position:fixed;
	bottom:0;
	z-index:100;
	display:block;
}
/* wrapper */
#wrapper{
	width:100%; height:100%;
	position:relative;
	display:block;
	background-image:url(../images/index_bg.jpg);
	background-position:center top;
	background-repeat:repeat-y;
}
/* menu */
#menu{
	width:760px;
	height:50px;
	margin:0 auto;
	position:relative;
	padding-top:30px;
	padding-left:30px;
}
	#menu .btn{
		float:left;
		margin-left:20px;
	}
/* content */
#main{
	width:950px;
	margin:0 auto;
	position:relative;
	background-color:#33C;
}
	#main .title{
		width: 564px;
		height: 547px;
		position: absolute;
		z-index: 3;
		left: 236px;
		top: 4px;
	}
	#main .boy{
		width: 413px;
		height: 495px;
		position: absolute;
		z-index: 2;
		left: -20px;
		top: 37px;
	}
	#main .girl{
		width: 391px;
		height: 481px;
		position: absolute;
		z-index: 2;
		left: 599px;
		top: 45px;
	}
	#main .btn{
		width: 263px;
		height: 79px;
		position: absolute;
		z-index: 4;
		left: 346px;
		top: 402px;
	}
#mobile_wrapper{
	display:none;
}
/*黑色popup按鈕列*/
#blackmenu{
	display:none;
}
#blackmenu .main{
	width:90%; 
	position:absolute;
	margin:0 auto;
	margin-top:11px;
	z-index:9999;
}
	#blackmenu .main .sidemenu_outside{
		width:100%; height:220px;
		position:absolute;
		background-color:#000;
		opacity:0.9;
		overflow:hidden;
	}
	#blackmenu .main .sidemenu{
		
	}
		#blackmenu .main .sidemenu .btn1 , #blackmenu .main .sidemenu .btn2 , #blackmenu .main .sidemenu .btn3 , #blackmenu .main .sidemenu .btn4{
			width:100%; height:35px;
			margin:0px 0px 20px 0px;
		}
			#blackmenu .main .sidemenu .btn1 a , #blackmenu .main .sidemenu .btn2 a , #blackmenu .main .sidemenu .btn3 a , 
			#blackmenu .main .sidemenu .btn4 a{
				border-bottom:1px solid #323232;
			}
			
			#blackmenu .main .sidemenu .btn1 a{
				width:100%; height:35px; display:block;
				font-size: 15px; line-height: 22px; letter-spacing:1px; color: #fff; 
				font-family: \5FAE\8EDF\6B63\9ED1\9AD4, "Myriad Pro", Myriad, Tahoma, Arial, Helvetica, sans-serif;
				border-left:3px solid #ede337;
				padding:3% 5% 1% 20px;
			}
			#blackmenu .main .sidemenu .btn2 a{
				width:100%; height:35px; display:block;
				font-size: 15px; line-height: 22px; letter-spacing:1px; color: #fff; 
				font-family: \5FAE\8EDF\6B63\9ED1\9AD4, "Myriad Pro", Myriad, Tahoma, Arial, Helvetica, sans-serif;
				border-left:3px solid #ede337;
				padding:3% 5% 1% 20px;
			}
			#blackmenu .main .sidemenu .btn3 a{
				width:100%; height:35px; display:block;
				font-size: 15px; line-height: 22px; letter-spacing:1px; color: #fff; 
				font-family: \5FAE\8EDF\6B63\9ED1\9AD4, "Myriad Pro", Myriad, Tahoma, Arial, Helvetica, sans-serif;
				border-left:3px solid #ede337;
				padding:3% 5% 1% 20px;
			}
			#blackmenu .main .sidemenu .btn4 a{
				width:100%; height:35px; display:block;
				font-size: 15px; line-height: 22px; letter-spacing:1px; color: #fff; 
				font-family: \5FAE\8EDF\6B63\9ED1\9AD4, "Myriad Pro", Myriad, Tahoma, Arial, Helvetica, sans-serif;
				border-left:3px solid #ede337;
				padding:3% 5% 1% 20px;
			}
			#blackmenu .main .sidemenu .btn1 a:hover , #blackmenu .main .sidemenu .btn2 a:hover , #blackmenu .main .sidemenu .btn3 a:hover , #blackmenu .main .sidemenu .btn4 a:hover{
				color: #ffe729;
			}
@media only screen and (max-width: 750px) {
	#wrapper{
		background-image: none;
		background-position:center top;
		background-repeat:repeat-y;
	}
}
@media only screen and (max-width: 480px) {
	#blackmenu{
		display:block;
	}
	#bar_top{
		display:none;
	}
	#bar_bottom{
		display:none;
	}
	/* wrapper */
	#wrapper{
		display:none;
	}
	/* mobile wrapper */
	#mobile_wrapper{
		width:100%; height:100%;
		overflow:auto;
		position:relative;
		background-image:url(../images/mobile_bg.jpg);
		background-position:center top;
		background-repeat:repeat-y;
		display:block;
	}
		#mobile_wrapper .layout_img{
			display: inline-block;
			width:100%; height:auto;
			position:relative;
		}
		#mobile_wrapper .layout_img img , #mobile_wrapper .menu_img1 img , #mobile_wrapper .menu_img2 img , #mobile_wrapper .menu_img3 img{
			width:100%; height:auto;
		}
		#mobile_wrapper .menu_img1{
			width:10%; height:auto;
			float:right;
		}
		#mobile_wrapper .menu_img2{
			width:10%; height:auto;
			float:right;
		}
		#mobile_wrapper .menu_img3{
			width:10%; height:auto;
			float:right;
		}
			.layout_img .main_bg{
				width:100%; height:auto; margin-top:8%;
				position:absolute;
			}
			.layout_img .main_boy{
				width:31%; height:auto;
				position:absolute;
				right:0;
				margin-top:90px;
			}
			.layout_img .main_girl{
				width:31%; height:auto;
				position:absolute;
				left:0;
				top:-15px;
			}
			.layout_img .main_btn{
				width:55%; height:auto;
				position:absolute;
				bottom:0;
				margin-left:25%;
				z-index:100;
			}
		#mobile_wrapper .layout_bottom{
			display:block;
			width:100%; height:auto;
			position: absolute;
			bottom:-30px;
		}
			.layout_bottom .menu_btn{
				width:25%; height:auto;
				float:left;
			}
			.layout_bottom .menu_btn img{
				width:100%; height:auto;
				float:left;
			}
}