@charset "utf-8";


/* Reset & Basics
==================================================*/
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline; }
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block; }
	body {
		line-height: 1; }
	ol, ul {
		list-style: none; }
	blockquote, q {
		quotes: none; }
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none; }
	table {
		border-collapse: collapse;
		border-spacing: 0; }


/*body
==================================================*/
	body{
		font-family: Arial, Verdana, Helvetica, "微軟正黑體", sans-serif;}

/*共用
==================================================*/
	nav {
		top: 0px; 
		right: 20px;
		position:fixed;
		z-index: 99;}
	.nav1{
		position: absolute;
		top: -25px; right: 180px;}
	.nav1:hover{
		top: -10px;}
	.nav2{
		position: absolute;
		top: -25px; right: 90px;}
	.nav2:hover{
		top: -10px;}
	.nav3{
		position: absolute;
		top: -25px; right: 0px;}
	.nav3:hover{
		top: -10px;}
	.copy_rigth{
		font-size: 12px;
		color:#404040;
		text-align: bottom;
		width: 100%;
		position: fixed;
		left: 5px;
		bottom: 10px;}
	.popup{
		background: #d51c1c;
		width: 100%;
		opacity: 0.95;
		position: absolute;
		overflow: auto;}
	.popup .contain{
		max-width: 1280px;
		margin: 0 auto;}
	.inner{
		text-align: center;}
	.popup_title{
		font-size: 31px;
		color: #fff;
		letter-spacing: 1px;
		width: 477px;
		padding-top:69px ;
		margin: 0 auto;
		text-align: center;}
	.popup_line{
		background: #fff;
		width: 476px;
		height: 3px;
		margin: 11px auto;}


/*loading
==================================================*/
	#loading{
		background: url(../images/loading_Bg.png) no-repeat;
		background-size:cover; 
		width: 100%;
		height: 100%;
		position:fixed;
		top: 0px;
		left: 0px;
		z-index: 999; }
	.loading_icon{ 
		background: url(../images/loading_icon.png) no-repeat;
		width: 233px;
		height: 218px;
		margin: 170px auto;}
/*index
==================================================*/
	.wrap{
		position: relative;
		width: 100%;
		overflow: hidden;}
	.new_width{
		min-width: 1200px;}	
	.index{
		background: url(../images/index_bg.png) no-repeat top center;
		background-size: cover;
		width: 100%;
		height: 980px;
		z-index: -1;}
	.contain{
		width: 1280px;
		margin: 0 auto;
		position: relative;}
	.cloud1{
		position: absolute;
		top: 304px;
		left: -194px;}
	.cloud2{
		position: absolute;
		top: 184px;
		left: 1238px;}
	.cloud3{
		position: absolute;
		top: 389px;
		left: 1481px;}
	.cloud4{
		position: absolute;
		top: 510px;
		left: -363px;}
	.gost1{
		position: absolute;
		top: 68px;
		left: -239px;}
	.gost2{
		position: absolute;
		top: 88px;
		left: 1288px;}
	.gost3{
		position: absolute;
		top: 452px;
		left: 805px;}
	.index_temple{
		position: absolute;
		top: 95px;
		left: 250px;}
	.index_light{
		position: absolute;
		left: 211px;}
	.index_title{
		position: absolute;
		top: 43px;
		left: 407px;}
	.table{
		position: absolute;
		top: 550px;
		left: 297px;}		
	.index_btn{
		position: absolute;
		top: 439px;
		left: 497px;
		transition: 0.5s}
	.index_btn:hover{
		transform: scale(1.050);}
	.index_left{
		position: absolute;
		top: 143px;
		left: -60px;}
	.index_right{
		position: absolute;
		top: 148px;
		left: 946px;}
	.peole_left{
		position: absolute;
		top: 608px;

		left: -24px;}
	.peole_right{
		position: absolute;
		top: 599px;
		left: 950px;}
	

/*test
==================================================*/
	#test{
		position: relative;
		width: 100%;}
	.building101, .studio, .game{
		z-index: 2;}	
	.left{
		background: #bf0d0e;
		width: 50%;
		position: relative;
		float: left;}
	.right{
		background: #fdc24d;
		position: relative;
		float: right;
		width: 50%;}
	/*test_STAR_說明*/
	.explain{
		background: #d51c1c;
		position: fixed;
		width: 100%;
		opacity: 0.95;
		z-index: 999;
		top: 0px;
		left: 0px;
		display: none;}
	.explain >img{
		position:relative;
		top: 50%;
		left:50%;
		margin: -300px 0 0 -275px;}
	/*==/test_STAR_說明===*/
	/*步驟*/
	#step{
		width: 100%;
		position: absolute;
		z-index:1;
		left: 50%;
		margin-left:-15px; }	
	.step1, .step2, .step3, .step4, .step5{
		top: 40%;
		margin-top:-142px; 
		position: absolute;}

	.step2, .step3, .step4, .step5{display: none;}
	/*/==步驟結束==*/
	.building101{
		position: absolute;
		top:80px;
		text-align: center;
		cursor: pointer;}
	.studio{
		position: absolute;
		top:80px;
		text-align: center;
		cursor: pointer;}

	.family, .globalization, .ontime, .night, .bento, .restaurant, .airplane, .foreign{
		position: absolute;
		top:80px;
		text-align: center;
		display: none;
		cursor: pointer;
		z-index: 10;}
/*	.tv, .train{
		position: absolute;
		text-align: center;
		top: 200px;
		display: none;
		cursor: pointer;
		z-index: 10;}
	.shower{
		position: absolute;
		text-align: center;
		top: 100px;
		display: none;
		cursor: pointer;}
	.bathtub{
		position: absolute;
		text-align: center;
		top: 200px;
		display: none;
		cursor: pointer;
		z-index: 10;}
	.phone{
		position: absolute;
		text-align: center;
		top: 100px;
		display: none;
		cursor: pointer;}
	.computer{
		position: absolute;
		text-align: center;
		top: 100px;
		display: none;
		cursor: pointer;
		z-index: 10;}
*/


/*info
==================================================*/
	.info_page{
		background: #e49e17;
		width: 100%;
		position: absolute;
		overflow: auto;}
	.info_page .contain{
		max-width: 1024px;
		margin: 0 auto;}
	.inner{
		text-align: center;}
	.info_title{
		font-size: 31px;
		color: #fff;
		letter-spacing: 1px;
		width: 477px;
		padding-top:69px ;
		margin: 0 auto;
		text-align: center;
		line-height: 40px;}
	.info_line{
		background: #fff;
		width: 476px;
		height: 3px;
		margin: 11px auto;}
	.info{
		width: 478px;
		margin: 0 auto;
		text-align:right;
		color: #fff;
		letter-spacing: 1px;
		font-size: 20px;
		padding-right:150px ;}
	.info input{
		width: 269px;
		height: 29px;
		border: 1px #fff solid;
		outline: none;
		background-color: transparent;
		margin: 12px 0px 0 12px;
		display: inline-block;
		color: #fff;}
	.info_right{
		font-size: 17px;
		color: #fff;
		margin-top: 22px;}
	/*.info_right input[text]{
		width: 15px;
		height: 15px;
		padding: 0;
		margin-right: 10px;}*/
	.select_style{
		background:url(../images/select.png) #e49e17;
		color:#fff;
		width:130px; height:35px;
		padding-left:10px;
		margin-top:18px;
		border:none;
		outline: none;
		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;}
	.info_right a{
		display: inline-block;
		color: #fff;}
	.info_right a:hover{
		color: #faed3f;}
	.info_btn{
		transition:0.2s;
		margin:20px 0 0 400px;}
	.info_btn a{
		display: block;
		width: 144px;
		height: 55px;}
	.class_all{
		margin:10px 0 50px 0;}
	.class_all img{
		position: relative;
		z-index: 2;}
	.class_click{
		border:5px #faed3f solid;
		background: #faed3f;
		position: absolute;
		top: -5px;
		left: -5px;
		width: 270px;
		height: 270px;
		z-index: 0;
		display: none;}
	.class_all a{
		display: inline-block;
		margin: 10px;}
	.class_all_hover{
		width: 270px; 
		height: 271px;
		position: absolute;
		top: 0px;
		left: 0px;
		opacity: 0;
		transition:0.5s;
		z-index: 3;}
	.class_all_hover:hover{
		opacity: 1;}
	.class_1_hover{
		background: url(../images/class_1_hover.png)no-repeat;}
	.class_2_hover{
		background: url(../images/class_2_hover.png)no-repeat;}
	.class_3_hover{
		background: url(../images/class_3_hover.png)no-repeat;}
	.class_4_hover{
		background: url(../images/class_4_hover.png)no-repeat;}
	.class_5_hover{
		background: url(../images/class_5_hover.png)no-repeat;}
	.class_6_hover{
		background: url(../images/class_6_hover.png)no-repeat;}
	.class_7_hover{
		background: url(../images/class_7_hover.png)no-repeat;}
	.class_8_hover{
		background: url(../images/class_8_hover.png)no-repeat;}
	.class_9_hover{
		background: url(../images/class_9_hover.png)no-repeat;}
	.class{
		display: inline-block;
		position: relative;
		cursor: pointer;
		margin:0 10px 10px 0; }
	.class_onclick{
		background: url(../images/class_1_onclick.png) no-repeat;
		width: 270px;
		height: 170px;
		z-index: 5;
		position: absolute;
		top: 0px; left: 0px;
		display: none;
		font-size: 20px;
		color: #fff;
		letter-spacing: 1px;
		padding-top:142px;
		text-align: center;
		cursor: pointer;}
	.class_onclick p{
		font-size: 18px;
		position: absolute;
		top: 200px;
		left: 20px;
		text-align: center;}
	.info_right input{
		width: 20px;
		height: 20px;
	}


/*result_loading
====================================================*/
	.result_loading{
		background: url(../images/loading_Bg.png) no-repeat;
		background-size: cover;
		width: 100%;
		height: 100vh;
		position: absolute;}
	.result_loading .loading_icon{
		background: url(../images/result_loading.png) no-repeat;
		width: 345px;
		height: 509px;
		margin: 0 auto;}


/*result
====================================================*/
	.popup_bg{
		background: #e49e17;
		opacity: 0.7;
		background-size: cover;
		width: 100%;
		position: absolute;}
	.popup_x{
		position: absolute;
		top: 15px;
		left: 700px;
		transition: 1s}
	.popup_x:hover{
		-webkit-animation: popupx 1s infinite;
		 -o-animation: popupx 1s infinite;
		 animation: popupx 1s infinite; }
	@keyframes popupx{
		0%{transform: rotate(0deg) }
		100%{transform: rotate(360deg)}
	}
	.result{
		position: absolute;
		background: url(../images/result_bg.png) no-repeat;
		width: 637px;
		height: 747px;
		top: 46px;}
	.result_light{
		position: absolute;
		top: 187px;
		left: 571px;}
	.result_text{
		position: absolute;
		top: 250px;
		left: 94px;}
	.result_food{
		position: absolute;
		top: 194px;
		left: 388px;}
	.result_banner{
		position: absolute;
		top: 542px;
		left: 392px;}		
	.share_btn{
		position: absolute;
		top: 677px;
		left: 98px;}
	.friend_btn{
		position: absolute;
		top: 677px;
		left: 325px;}