@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:5;
	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:1000px;
	margin:0 auto;
	position:relative;
}
	#main .game_board{
		width: 1000px;
		height: 554px;
		background-image:url(../images/game_board.png);
		background-repeat:no-repeat;
		z-index: 10;
		display:block;
		position:relative;
	}
		#main .game_board .question_all{
			width:930px; height:350px;
			display:block;
			position:relative;
			margin:0 auto;
			padding-top:165px;
		}
		#main .game_board .question_all .question{
			width:305px; height:175px;
			display:block;
			float:left;
			margin-left:5px;
			margin-top:2px;
		}
			#main .game_board .question_all .question .yellow{
				width:140px; height:106px;
				display:block;
				float:left;
				margin-left:5px;
				margin-top:60px;
				z-index:1;
			}
			#main .game_board .question_all .question .blue{
				width:140px; height:106px;
				display:block;
				float:left;
				margin-left:5px;
				margin-top:60px;
				z-index:1;
			}
			.XX{
				width:56px; height:58px;
				position:absolute;
				z-index:2;
				margin-left:220px;
				margin-top:-5px;
			}
			.XX1{
				position:absolute;
				z-index:2;
				margin-left:220px;
				margin-top:-5px;
			}
			#main .game_board .question_all .question .blue .XX{
				width:56px; height:58px;
				position:absolute;
				z-index:2;
				margin-left:70px;
				margin-top:-60px;
			}
			#main .game_board .question_all .question .yellow .XX{
				width:56px; height:58px;
				position:absolute;
				z-index:2;
				margin-left:215px;
				margin-top:-60px;
			}
			#main .game_board .question_all .question .result{
				width:287px; height:159px;
				display:block;
				margin-left:5px;
				margin-top:7px;
				z-index:2;
				position:absolute;
			}
			#main .game_board .question_all .question .black{
				width:306px; height:174px;
				display:block;
				margin-left:0px;
				margin-top:0px;
				z-index:3;
				position:absolute;
			}
			#main .game_board .question_all .question .red{
				width:271px; height:62px;
				margin-left:15px;
				margin-top:100px;
				z-index:1;
				float:left;
			}
		#main .choice_board{
			width: 1000px;
			height: 554px;
			background-image:url(../images/choice_board.png);
			background-repeat:no-repeat;
			z-index: 10;
			display:block;
			position:relative;
		}
			#main .choice_board .question_all{
				width:930px; height:350px;
				display:block;
				position:absolute;
				margin:0 auto;
				padding-top:165px;
				padding-left:32px;
			}
			#main .choice_board .question_all .bigbtn{
				width:460px; height:244px;
				display:block;
				float:left;
				margin-left:5px;
				margin-top:40px;
			}
			#main .choice_board .question_all .gray{
				width:922px; height:60px;
				display:block;
				margin-left:5px;
				margin-top:10px;
			}
			#main .choice_board .question_all_popup{
				width:930px; height:350px;
				display:block;
				position:absolute;
				margin:0 auto;
				padding-top:200px;
				padding-left:32px;
			}
				#main .choice_board .question_all_popup .bg{
					width:926px; height:327px;
					display:block;
					position:absolute;
					z-index:2;
					right:0;
				}
				#main .choice_board .question_all_popup .close{
					width:51px; height:51px;
					display:block;
					position:absolute;
					z-index:4;
					right:0;
				}
				#main .choice_board .question_all_popup .popup_input1{
					width: 300px;
					height: 30px;
					display: block;
					position: absolute;
					z-index: 5;
					left: 156px;
					top: 279px;
				}
				#main .choice_board .question_all_popup .popup_input2{
					width: 300px;
					height: 30px;
					display: block;
					position: absolute;
					z-index: 5;
					left: 502px;
					top: 279px;
				}
				#main .choice_board .question_all_popup .popup_input3{
					width: 300px;
					height: 30px;
					display: block;
					position: absolute;
					z-index: 5;
					left: 329px;
					top: 391px;
				}
				#main .choice_board .question_all_popup .popup_input4{
					width: 300px;
					height: 30px;
					display: block;
					position: absolute;
					z-index: 5;
					left: 215px;
					top: 395px;
				}
				#main .choice_board .question_all_popup .popup_input5{
					width: 300px;
					height: 30px;
					display: block;
					position: absolute;
					z-index: 5;
					left: 240px;
					top: 420px;
				}
				#main .choice_board .question_all_popup .popup_input6{
					width: 300px;
					height: 30px;
					display: block;
					position: absolute;
					z-index: 5;
					left: 240px;
					top: 460px;
				}
				#main .choice_board .question_all_popup .popup_input1 select , #main .choice_board .question_all_popup .popup_input2 select
				 , #main .choice_board .question_all_popup .popup_input3 input{
					width:300px; height:30px;
				}
				#main .choice_board .question_all_popup .popup_input4 input{
					width:300px; height:30px;
					background-color:#2b85be;
					border:0px solid;
					color:#fff;
					font-size:15px;
					padding:5px;
				}
				#main .choice_board .question_all_popup .popup_input5 input{
					width:300px; height:30px;
					background-color:#ede337;
					border:0px solid;
					color:#0a4062;
					font-size:15px;
					padding:5px;
				}
				#main .choice_board .question_all_popup .popup_input6 input{
					width:300px; height:30px;
					background-color:#fff;
					border:0px solid;
					color:#0a4062;
					font-size:15px;
					padding:5px;
				}
				#main .choice_board .question_all_popup .popup_iframe{
					width: 860px;
					height: 180px;
					display: block;
					position: absolute;
					z-index: 5;
					left: 65px;
					top: 324px;
					background-color: #fff;
					overflow:auto;
				}
				#main .choice_board .question_all_popup .popup_btn1{
					width: 98px;
					height: 51px;
					display: block;
					position: absolute;
					z-index: 5;
					left: 640px;
					top: 380px;
				}
				#main .choice_board .question_all_popup .popup_btn2 , #main .choice_board .question_all_popup .popup_btn4{
					width: 224px;
					height: 45px;
					display: block;
					position: absolute;
					z-index: 5;
					left: 680px;
					top: 380px;
				}
				#main .choice_board .question_all_popup .popup_btn3{
					width: 98px;
					height: 46px;
					display: block;
					position: absolute;
					z-index: 5;
					left: 680px;
					top: 435px;
				}
				#main .choice_board .question_all_popup .popup_btn5{
					width: 82px;
					height: 37px;
					display: block;
					position: absolute;
					z-index: 5;
					left: 450px;
					top: 365px;
				}
				#main .choice_board .question_all_popup .popup_btn6{
					width: 158px;
					height: 65px;
					display: block;
					position: absolute;
					z-index: 6;
					left: 420px;
					top: 400px;
				}
	#main .rule_board{
			width: 1000px;
			height: 554px;
			background-image:url(../images/rule_board.png);
			background-repeat:no-repeat;
			z-index: 1;
			display:block;
			position:relative;
		}
		#main .award_board{width: 1000px;height: 554px;background:url(../images/award_board.png) no-repeat;z-index: 1;display:block;position:relative;}
		#main .award_board .question_all .rule_iframe{
	width: 856px;
    height: 332px;
    display: block;
    position: absolute;
    z-index: 5;
    left: 105px;
    top: 182px;
    border: 0px solid;
    overflow: auto;
}
		#main .rule_board .question_all,#main .award_board .question_all{
			width:930px; height:350px;
			display:block;
			position:absolute;
			margin:0 auto;
			padding-top:165px;
			padding-left:32px;
		}
			#main .rule_board .question_all .rule_iframe{
				width: 900px;
				height: 340px;
				display: block;
				position: absolute;
				z-index: 5;
				left: 55px;
				top: 170px;
				background-color: #fff;
				border:0px solid;
				overflow:auto;
			}
		#main .product_board{
			width: 1000px;
			height: 554px;
			z-index: 1;
			display:block;
			position:relative;
		}
			#main .product_board .question_all{
				width:930px; height:350px;
				display:block;
				position:absolute;
				margin:0 auto;
				text-align:center;
			}
			#main .product_board .question_all .title{
				width: 667px;
				height: 164px;
				position: absolute;
				left: 162px;
				top: 4px;
			}
			#main .product_board .question_all .bluebtn{
				width: 535px;
				height: 458px;
				position: absolute;
				left: -38px;
				top: 119px;
			}
			#main .product_board .question_all .yellowbtn{
				width: 536px;
				height: 483px;
				position: absolute;
				left: 496px;
				top: 100px;
			}
			#main .product_board .question_all .board{
				width: 1057px;
				height: 427px;
				position: absolute;
				top: 128px;
				left: -54px;
			}
			#main .product_board .question_all .close1{
				width: 51px;
				height: 51px;
				display: block;
				position: absolute;
				z-index: 4;
				right: -50px;
				top: 192px;
			}
			#main .product_board .question_all .close2{
	width: 51px;
	height: 51px;
	display: block;
	position: absolute;
	z-index: 4;
	right: 882px;
	top: 212px;
			}
				

#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;
			}
			.search_text{ height:30px;}
			.search_text td{border-bottom-style:dotted; border-bottom-width: 1px;}
@media only screen and (max-width: 750px) {
	#wrapper{
		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_title{
				width:100%; height:auto;
				position:relative;
			}
			.layout_img .game_inside{
				width:100%; height:auto;
				position:relative; display:inline-block;
			}
			.layout_img .game_inside .game_question{
				width:100%; height:auto;display: inline-block;
				position: relative;
			}
				.layout_img .game_inside .top{
					width:100%; height:auto;
				}
				.layout_img .game_inside .yellow{
					width:50%; height:auto;
					float:left;
				}
				.layout_img .game_inside .blue{
					width:50%; height:auto;
					float:left;
				}
		#mobile_wrapper .layout_bottom{
			display:block;
			width:100%; height:auto;
			position: relative;
			bottom:0; margin-top:15px;
		}
			.layout_bottom .menu_btn{
				width:25%; height:auto;
				float:left;
			}
			.layout_bottom .menu_btn img{
				width:100%; height:auto;
				float:left;
			}
		.mobile_select{
			background-image:url(../images/mobile_popup_search_bg.jpg);	
			background-repeat:repeat-y;
			width:100%;
		}
		.mobile_text{
			width:100%;
			color:#333;
		}
		.text{
			width:80%;
			position: absolute;
			margin-left:15%;
			margin-top:2%;
			letter-spacing:0;
		}
		.mobile_input1{
			width: 80%;
			height: 30px;
			display: block;
			position: absolute;
			z-index: 5;
			margin-left:18%;
		}
		.mobile_input2{
			width: 80%;
			height: 30px;
			display: block;
			position: absolute;
			z-index: 5;
			margin-top:10%;
			margin-left:18%;
		}
		.mobile_input3{
			width: 80%;
			height: 30px;
			display: block;
			position: absolute;
			z-index: 5;
			margin-top:25%;
			margin-left:40%;
		}
		.mobile_input4{
			width: 80%;
			height: 30px;
			display: block;
			position: absolute;
			z-index: 5;
			margin-top:28.5%;
			margin-left:30%;
		}
		.mobile_input5{
			width: 80%;
			height: 30px;
			display: block;
			position: absolute;
			z-index: 5;
			margin-top:2%;
			margin-left:33%;
		}
		.mobile_input1 select , .mobile_input2 select{
			width:80%; height:30px;
		}
		.mobile_input3 input{
			width:50%; height:25px;
		}
		.mobile_input4 input{
			width:50%; height:25px;
			background-color:#2b85be;
			border:0px solid;
			color:#fff;
		}
		.mobile_input5 input{
			width:45%; height:25px;
			background-color:#ede337;
			border:0px solid;
			color:#0a4062;
			padding-left: 5px;
		}
}