@charset "utf-8";

/*-------------------------
		Loading font 
-------------------------*/

@font-face{
  font-family: 'Open Sans';
    	  src: url('../fonts/OpenSans-Regular.woff') format('woff'), /* Pretty Modern Browsers */
      		   url('../fonts/OpenSans-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
  font-weight: normal;
}

@font-face{
  font-family: 'Open Sans';
    	  src: url('../fonts/OpenSans-Light.woff') format('woff'),
      		   url('../fonts/OpenSans-Light.ttf') format('truetype');
  font-weight: lighter;
}

@font-face{
  font-family: 'Open Sans';
    	  src: url('../fonts/OpenSans-Bold.woff') format('woff'),
      		   url('../fonts/OpenSans-Bold.ttf') format('truetype');
  font-weight: bold;
}

@font-face{
  font-family: 'Century Gothic';
    	  src: url('../fonts/Gothic.woff') format('woff'),
      		   url('../fonts/Gothic.ttf') format('truetype');
  font-weight: normal;
}

/*-------------------------
		Initialize 
-------------------------*/

html, body{
  margin: 0;
  padding: 0; 
  border: 0;
  height:100vh;
}

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

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;}*/

/*-------------------------
		 版面配置
-------------------------*/
img { display:block;}
.en { font-family: 'Open Sans', sans-serif;}
.tw { font-family: "微軟正黑體", sans-serif;}
.left	{ float:left;}
.right	{ float:right;}
.newline{display:inline-block;}

#wrapper{ position:relative;}

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

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

/*-------------- Header設定 --------------*/

#logo{
	position:fixed;
	top:5%;
	left:5%;
	z-index:100;
	/*border:#336 1px solid;*/
}

#burgerWrap{
	position:fixed;
	top:0;
	right:0;
	width:100px;
	height:60px;
	z-index:99;
	overflow:hidden;
	display:none;
}

.burger-bg{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 100px 60px 0;
	border-color: transparent #BC262A transparent transparent;
}

#burgerWrap > p{
	position:absolute;
	top:4px;
	right:7px;
	font-size:13px;
	font-weight:lighter;
	letter-spacing:2px;
	color:#fff;
	opacity:0.5;
}

.burger{
	position:absolute;
	top:25px;
	right:7px;
	width:35px;
	overflow:hidden;
	cursor:pointer;
}

.burger-line{
	height:2px;
	margin:2px 0;
	background:#fff;
	float:right;
	clear:right;
	
	-webkit-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
}
.burger-line:nth-child(1){ width:35px; }
.burger-line:nth-child(2){ width:25px; }
.burger-line:nth-child(3){ width:15px; }

.on .burger-line{ width:15px;  }
	
/*-------------- 導覽列設定 --------------*/

.nav-bg{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:150px;	
	overflow:hidden;
	z-index:9;
	background:rgba(255,255,255,1);
	/*border-bottom:#999 1px solid;*/
}

#navigation{
	position:fixed;
	top:90px;
	right:0;
	padding:0 40px 0 10px;
	border-bottom:#7DC8BE 2px solid;
	overflow:hidden;
	z-index:10;
}

#navigation > li{
	float:left;
	position:relative;
	height:35px;
	line-height:35px;
	text-align:center;
	font-size:15px;
	margin-right:60px;
	overflow:hidden;
}
#navigation > li a{	
	display:block;
	-webkit-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
}
#navigation > li a:hover{ margin-top:-35px;}

#navigation p{
	font-weight:bold;
	color:#000;
	letter-spacing:1.5px;
}

/*------------------------------------------
              Mobile 、tablet
------------------------------------------*/

@media only screen and (max-width : 900px){

	#navigation{ padding:0 0 0 10px; }
	#navigation > li{ margin-right:45px;}
}

@media only screen and (max-width : 780px){	
	
	#burgerWrap{ display:block;}	
	#logo img{ width:160px;	}	
	.nav-bg{ height:100%; }
	
	#navigation{
	 /* position:fixed;*/
	  top:50%;
	  right:50%;
	  width:180px;
	  height:170px;
	  margin-top:-85px;
	  margin-right:-90px;
	  padding:0;
	  border:none;
	  background:none;
	  display:none;
	  /*border:#9F0 1px solid;*/
	}
	
	#navigation > li{
		float:none;
		margin:0;	
		border-bottom:#7DC8BE 2px solid;
		padding:2.5px 0;
	}
}

@media only screen and (max-width : 520px){	
	#navigation{ margin-top:-45px; }
}