@font-face {
	font-family: NotoSansTC-Light;
	src: url(../fonts/NotoSansTC-Light.otf);
	src: url(../fonts/TaipeiSansTCBeta-Bold.otf);
	src: url(../fonts/TaipeiSansTCBeta-Regular.otf);
	src: url(../fonts/TaipeiSansTCBeta-Light.otf);
}
body {
	font-family: '微軟正黑體', 'NotoSansTC-Light', 'Noto Sans TC', sans-serif, Arial, Helvetica, Microsoft JhengHei, Apple LiGothic, 'Roboto Condensed';
	font-size: 16px;
	color: #333;
	margin: 0;
}
   html, body {
   	height: 100%;
   	padding: 0;
   }
   .bg_cover {
   	width: 1920px;
   	background: linear-gradient(to bottom, #c4a98b 1%, #ce9651 100%);
   	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   	position: relative;
   	top: 50%;
   	left: 50%;
   	transform: translate(-50%, -50%);
   }
   .bg_logo_fa {
   	position: absolute;
   	width: 150px;
   	height: 150px;
   	display: block;
   	top: 280px;
   	left: 46%;
   	background: url("../img/bosses-logo1.png");
   	background-repeat: no-repeat;
   	background-size: 100% auto;
	animation: houseDoorOpen 2s ease-in-out forwards;  /* 門打開的動畫 */
   }
  
    /* 房子門打開的動畫 */
	@keyframes houseDoorOpen {
		0% {
			transform: rotateY(0deg);  /* 初始狀態 */
		}
		50% {
			transform: rotateY(90deg);  /* 門打開的中間狀態 */
		}
		100% {
			transform: rotateY(0deg);  /* 恢復為原來的顯示，避免翻轉 */
		}
	}
	
   @keyframes myfirst {
   	100% {
   		transform: rotate(1turn);
   		/* 使用 1turn 代表 360 度 */
   	}
   }
   @import url(http://fonts.googleapis.com/css?family=Lato:100,300,700);
   #loading {
   	width: 400px;
   	margin: 0 auto;
   	padding-top: 395px;
	text-align: center;   
   }
   #loading h1 {
   	font-family: 'Lato';
   	color: white;
   	text-transform: uppercase;
   	font-size: 1em;
   	letter-spacing: 2px;
   	text-align: center;
   	margin-top: 12px;
   	-webkit-animation: fade 2s infinite;
   	-moz-animation: fade 2s infinite;
   }
   .stick {
   	width: 15px;
   	height: 2px;
   	background: white;
   	display: inline-block;
   	margin-left:8px;
   }
   .stick:nth-child(n) {
   	transform: rotate(30deg);
   	-ms-transform: rotate(30deg);
   	/* IE 9 */
   	-webkit-transform: rotate(30deg);
   	/* Safari and Chrome */
   	-moz-transform: rotate(30deg);
   	-webkit-animation: fall 2s infinite;
   	-moz-animation: fall 2s infinite;
   }
   .stick:nth-child(2n) {
   	transform: rotate(-30deg);
   	-ms-transform: rotate(-30deg);
   	/* IE 9 */
   	-webkit-transform: rotate(-30deg);
   	/* Safari and Chrome */
   	-moz-transform: rotate(-30deg);
   	-webkit-animation: rise 2s infinite;
   	-moz-animation: rise 2s infinite;
   }
   @-webkit-keyframes rise {
   	50% {
   		transform: rotate(30deg);
   		-ms-transform: rotate(30deg);
   		/* IE 9 */
   		-webkit-transform: rotate(30deg);
   		-moz-transform: rotate(30deg);
   	}
   }
   @-moz-keyframes rise {
   	50% {
   		transform: rotate(30deg);
   		-ms-transform: rotate(30deg);
   		/* IE 9 */
   		-webkit-transform: rotate(30deg);
   		-moz-transform: rotate(30deg);
   	}
   }
   @-o-keyframes rise {
   	50% {
   		transform: rotate(30deg);
   		-ms-transform: rotate(30deg);
   		/* IE 9 */
   		-webkit-transform: rotate(30deg);
   		-moz-transform: rotate(30deg);
   	}
   	@keyframes rise {
   		50% {
   			transform: rotate(30deg);
   			-ms-transform: rotate(30deg);
   			/* IE 9 */
   			-webkit-transform: rotate(30deg);
   			-moz-transform: rotate(30deg);
   		}
   	}
   }
   @-webkit-keyframes fall {
   	50% {
   		transform: rotate(-30deg);
   		-ms-transform: rotate(-30deg);
   		/* IE 9 */
   		-webkit-transform: rotate(-30deg);
   		-moz-transform: rotate(30deg);
   	}
   }
   @-moz-keyframes fall {
   	50% {
   		transform: rotate(-30deg);
   		-ms-transform: rotate(-30deg);
   		/* IE 9 */
   		-webkit-transform: rotate(-30deg);
   		-moz-transform: rotate(-30deg);
   	}
   }
   @-o-keyframes fall {
   	50% {
   		transform: rotate(-30deg);
   		-ms-transform: rotate(-30deg);
   		/* IE 9 */
   		-webkit-transform: rotate(-30deg);
   		-moz-transform: rotate(30deg);
   	}
   	@keyframes fall {
   		50% {
   			transform: rotate(-30deg);
   			-ms-transform: rotate(-30deg);
   			/* IE 9 */
   			-webkit-transform: rotate(-30deg);
   			-moz-transform: rotate(30deg);
   		}
   	}
   }

   @-webkit-keyframes fade {
   	50% {
   		opacity: 0.5;
   	}
   	100% {
   		opacity: 1;
   	}
   }
   @-moz-keyframes fade {
   	50% {
   		opacity: 0.5;
   	}
   	100% {
   		opacity: 1;
   	}
   }
   @-o-keyframes fade {
   	50% {
   		opacity: 0.5;
   	}
   	100% {
   		opacity: 1;
   	}
   	@keyframes fade {
   		50% {
   			opacity: 0.5;
   		}
   		100% {
   			opacity: 1;
   		}
   	}
   }