@charset "utf-8";

/*-------------------------
		Initialize 
-------------------------*/
html, body{
  margin: 0;
  padding: 0; 
  border: 0;
  height:100%; /*for footer can be at least at the bottom of the browser window*/
}

body {
  font-family:"微軟正黑體", Arial, Helvetica, sans-serif;	
  font-size:14px;
  background:#000;
  color: #fff;
}

ul,li{  
  padding:0;
  margin:0;
  list-style-type:none;
}

h1, h2, h3, h4, h5, h6, p{ 
  margin: 0;
  padding: 0;
  font-weight: normal;
}

table { width:auto; border-collapse: collapse; border-spacing: 0; }
a {	text-decoration:none;}
a img{ border:none;}
:focus { outline:none; }
/*:lang(en){ font-family:"Myriad Web", Arial, Helvetica, sans-serif;}*/

/*-------------------------
		 主要版面
-------------------------*/

#loading{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1000;
	background:#000 url(../images/loading.gif) center center no-repeat;
}

#wrapper{ 
	position:relative;  
	min-height:100%; /*force footer all the way to the bottom*/
	overflow:hidden; /*prevent top-margin collapse*/
}

header{
	position:absolute;
	width:auto;
	left:18%;
	bottom:0;
	padding:0;
	height:160px;
	z-index:101;
}

#logo{
	height:45px;
}

#logo img{
	width:auto;
	height:100%;
}

footer{
	position:absolute;
	bottom:5px;
	right:20px;
	color:rgba(255,255,255,0.3);
	font-size:10px;
	letter-spacing:0.5px;
	z-index:99;
}

footer a{ color:rgba(255,255,255,0.3);}

#lang{
	position:absolute;
	bottom:10px;
	left:20px;
	width:40px;
	height:16px;
	background:rgba(0,0,0,0.3);
	z-index:999;
	cursor:pointer;
	
	color:#bbb;
	line-height:16px;	
	font-size:10px;
	letter-spacing:0.5px;
	text-align:center;
}

#lang:hover{
	color:#fff;
	background:rgba(0,0,0,0.8);	
}

/*.en{ display:none;}
.tw{ display:block;}*/

#size{
	position:fixed;
	bottom:0;
	left:50px;
	z-index:9999;
	border:#C90 2px solid;
	color:#F00;
}

/*---------------導覽列設定--------------*/

#colorBK{
	position:absolute;
	top:0;
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, 0.7);
	display:none;
}

#menu{ 
	position:absolute;
	top:40px;
	right:40px;
	cursor:pointer;
	display:none;
}

.menubar{
	width:30px;
	height:3px;
	margin:5px 0;
	background:#fff;	
}

#navigation{
	position:absolute;
	left:100px;
	top:-5px;
	padding:0;
}

#navigation > li,
#subNav > li{
	position:relative;
	margin:0;
	width:100px;
	height:25px;
	line-height:25px;
}

#navigation li a,
#subNav li a{
	color:#fff;
}

#navigation > li:hover a,
#subNav li:hover a{
	color:#ccc;
}

#navigation li.at a,
#subNav li.at a{
	color:#999;	
}

#navigation > li:hover .en,
#subNav > li:hover .en{
	opacity:0;
}

#navigation > li:hover .tw,
#subNav > li:hover .tw{
	opacity:1;
}

.tw{ 
	position:absolute; 
	top:0;
	opacity:0;
	width:75px;
}

/*.en, .tw{
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;	
}*/

/*次選單*/

#subMask{
	position:absolute;
	left:200px;
	top:-5px;
	padding:0;
	width:auto;
	height:auto;
	/*overflow:hidden;*/
}

#subNav{ position:relative;}

/*---------------內容設定--------------*/

#bg{ 
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:-1;
}

main{
	position:relative;
	display:block;
	overflow:hidden;
	padding-bottom:60px;/* Height of the footer element */
}


/*------------------------------------------
              Mobile 、Tablet
------------------------------------------*/

@media only screen and (max-width : 768px) {
	
	header{
		padding:40px 40px 50px;
		left:0;
		top:0;
		bottom:auto;
		width:100%;
		/*height:100%;*/
		height:auto;
		box-sizing:border-box;
	}
	
	#colorBK{ background:rgba(0, 0, 0, 0.8);}
	
	#menu{ display:block;}

	#navigation{
		position:fixed;
		width:270px;
		padding:20px 0;
		border:#FFF 1px solid;
		
		top:50%;
		margin-top:-76px;		
		left:50%;
		margin-left:-135px;
	}
	
	#navigation > li{
		height:30px;
		line-height:30px;
		width:100%;		
		text-align:center;
	}
	
	#navigation > li:hover .en{ opacity:0;}
	#navigation > li:hover .tw{ opacity:1; width:100%;}
	
	#subMask{
	  left:0px;
	  top:auto;
	  bottom:10px;
	  width:100%;
	  height:25px;	  
	}
	
	#subNav{
		position:absolute;
		
	}
	
	#subNav > li{
		float:left;
		width:auto;
		margin:0 0 0 40px;
	}
	
}

@media only screen and (max-width : 599px) {
	
	header{ padding:20px 20px 50px;}
	#colorBK{ background:rgba(0, 0, 0, 0.7);}
	#menu{ 
		top:20px;
		right:20px;
	}
	
	#subNav > li{ margin:0 20px; }
	
	footer{
	  right:auto;
	  left:20PX;
	}
	
}