@charset "UTF-8";

body,html{
	margin:0 0;
	background:#fff;
	color:#fff;
	height:100%;
	font-family:Helvetica, Arial, "LiHei Pro", "SimHei", "微軟正黑體", "黑體", "黑体", "Microsoft YaHei", "Microsoft JengHei", sans-serif;
	font-size:16px;
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	-ms-text-size-adjust:none;
	/*overflow:scroll;
	-webkit-overflow-scrolling:touch;
	overflow-x:hidden;
	*/
	overflow:visible;
}

iframe{ width:66px; margin:auto auto; height:20px; overflow:hidden; }

img{ border:none; }
a{ text-decoration:none; color:inherit; }
a.a_red{ text-decoration:underline; color:#414142; }
a.a_red.txt_red{ text-decoration:underline; color:#ef4251; }

ul, li{ margin:0; padding:0; list-style-type:none; margin-left:10px; }
ul{ margin-left:20px; }
li{ list-style-type:decimal; }
textarea{ resize: none; padding:0; border:none; margin:0; }

input, textarea{
	-moz-appearance:none; -webkit-appearance:none;
	-webkit-border-radius:4px;
 	border-radius:4px;
	/*-moz-border-radius:4px; */
	background-color:#fff;
	border:2px solid #414142;
	color:#000;
	padding:2px 10px;
	font-size:16px;
	line-height:120%;
	outline:none;
	height:26px; 
}

textarea{
	height:auto;
	padding:5px;
	width:300px;
}

input.error{ background-color:#fce1e3; }
input:focus, select:focus, textarea:focus, textarea:focus{  outline:none; background-color:#fff; border-color:#414142; }
/*:-webkit-input-placeholder  { text-align: center; }
:-moz-input-placeholder     { text-align: center; }
::-webkit-input-placeholder { text-align: center; }
::-moz-input-placeholder    { text-align: center; }
*/
input.input_form_field{ width:100%; }
input.input_form_field.short{ width:50%; }
input.input_form_field.error{ background:#fabfc4; }
@media only screen and (min-width: 0px) and (max-width: 479px) {
	input{ height:22px;  }
}

.clear{ clear:both; }

h1{ font-size:inherit; line-height:inherit; font-weight:inherit; margin:0;  }
h2{ font-size:80%; line-height:inherit; font-weight:inherit; margin:0;  }

.txt_black{ color:#414142; }
.txt_white{ color:#fff; }
.txt_grey{ color:#595559; }
.txt_red{ color:#ef4251; }

.txt_mini{ font-size:11px; }
.txt_small, .txt_tiny{ font-size:14px; line-height:20px; }
.txt_regular{ font-size:16px; line-height:150%; }
.txt_label{ font-size:20px; }
.txt_medium{ font-size:30px; line-height:140%; }
.txt_xlarge{ font-size:45px; }
.txt_giant{ font-size:100px; }

.txt_regular.gold{ color:#a37d34; }

.form_label_remark{ float:right; font-size:12px; margin-top:4px; }

@media only screen and (min-width: 480px) and (max-width: 550px) {
	.txt_label{ font-size:18px; }
}

@media only screen and (min-width: 0px) and (max-width: 479px) {
	.txt_small{ font-size:12px; line-height:17px; }
	.txt_tiny{ font-size:11px; line-height:16px; }
	.txt_regular{ font-size:13px; line-height:140%; }
	.txt_medium{ font-size:20px; }
	.txt_label{ font-size:16px; }
	.txt_xlarge{ font-size:36px; }
	.txt_giant{ font-size:80px; }
	
	.form_label_remark{ float:right; font-size:10px; margin-top:4px; }
}


#all_container{
	opacity:1;
	margin:0 auto 0 auto;
	width:100%;
	max-width:810px;
	max-height:800px;
	background-color:#fff;
	position:relative;
	overflow:hidden;
}

.toldi_button{ position:absolute; cursor:pointer; display:block; width:210px; height:56px; }
.toldi_button.show{ display:block; }
.toldi_button.static{ position:relative; padding-bottom:0px; margin-top:5px; display:inline-block; }
.toldi_button.menu{ position:relative; margin:10px auto; text-align:center; }
.toldi_button_back{ 
	background-color:#414142; width:100%; height:100%; top:0px; position:absolute;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	border-bottom-right-radius:7px;
	border-bottom-left-radius:10px;
}
.toldi_button_back.red{ background-color:#ef4251; }
.toldi_button_front{ background-color:#414142; background-color:#fff; top:0px; position:absolute; border-radius:7px; border:3px solid #414042; }
.toldi_button_front.red{ border:3px solid #ef4251; }
.toldi_button_label{ text-align:center; margin:0 auto; }

.toldi_button.small{ width:160px; height:46px; }
.toldi_button.menu{ width:210px; height:56px; }
.toldi_button.back{ width:160px; height:46px; }


@media only screen and (min-width: 640px) and (max-width: 768px) {
	.toldi_button.menu{ width:160px; height:46px; }
	.toldi_button.back{ width:140px; height:42px; }
}
@media only screen and (min-width: 480px) and (max-width: 639px) {
	.toldi_button.menu{ width:140px; height:41px; }
	.toldi_button.back{ width:130px; height:38px; }
}
@media only screen and (min-width: 0px) and (max-width: 479px) {
	.toldi_button{ width:140px; height:41px; }
	.toldi_button.small{ width:120px; height:38px; }
	.toldi_button.menu{ width:130px; height:38px; }
	.toldi_button.back{ width:110px; height:32px; }
}


#frame_container{ background-color:#ed5169; position:absolute; top:0; left:0; width:inherit; height:100%; }
#logo_container{ margin:10px auto; text-align:center; }

.license_container{ margin:0px auto; text-align:center; position:absolute; bottom:5px; width:100%; }

#pages_container{ border:4px solid #414142; background-color:#fff; overflow:hidden; position:absolute; top:60px; left:10px; }

#light_container{ position:absolute; width:1255px; height:1258px; opacity:0.3; }
#light_bottom_container{ position:absolute; top:75%; width:100%; height:25%; background-color:#fff; }
#landscape_container{ position:absolute; left:0px; }

.loader_container{ position:absolute; top:0; left:0; width:100%; height:100%; background-image:url(../img/loader_bg.png); }
.loader_container_inner{ position:absolute; display:none; }


.page_container{ position:absolute; top:0px; left:0; width:inherit; height:100%; display:none; }
.page_container.form, .page_container.hints, .page_container.gametime{ overflow:scroll; -webkit-overflow-scrolling:touch; overflow-x:hidden; }

.page_container.form, .page_container.thanks, .page_container.hints, .page_container.result, .page_container.gametime{ 
	top:0px;
	display:none;
	transition:top .5s;
	-o-transition:top .5s;
	-moz-transition:top .5s;
	-webkit-transition:top .5s;
}

.subpages_container{ position:absolute; top:0px; overflow:hidden; display:none;  }
.subpage_container{ position:absolute; width:inherit; height:inherit; display:none; }
.subpage_container.tnc{ 	}
.subpage_title_container{ width:inherit; text-align:center; } 

.subpage_cnt_container{ 
	position:absolute; left:0px;
	transition:left .4s;
	-o-transition:left .4s;
	-moz-transition:left .4s;
	-webkit-transition:left .4s;
} 
.subpage_cnt_inner_container{ float:left; position:relative; }
.subpage_cnt_inner_container.tnc{ float:none; text-align:left; overflow:hidden; -webkit-overflow-scrolling:touch; overflow-x:hidden; position:relative; }

.subpage_cnt_inner_container_inner{ 
	position:absolute; top:0; 
	transition:top .4s;
	-o-transition:top .4s;
	-moz-transition:top .4s;
	-webkit-transition:top .4s;
}

.scrollbar.steps{ width:5px; height:100px; position:absolute; left:0px; top:0; border:1px solid #9d9b9d; background-color:#fff; }
.scrollbar.tnc{ width:5px; height:100px; position:absolute; right:-10px; top:0; border:1px solid #9d9b9d; background-color:#fff; }
.scrollbar_bar{ width:5px; position:absolute; background-color:#9d9b9d; cursor:pointer; }

.subpage_arrow{ position:absolute; opacity:0.2; cursor:pointer; }
.subpage_arrow.prev{ left:0px; }
.subpage_arrow.next{ right:0px; }
.subpage_arrow:hover{ opacity:0.5; }
.subpage_indication_container{ height:10px; position:absolute; display:none; }
.subpage_indication_circle{ float:left; width:10px; height:10px; border-radius:10px; background-color:#414142; opacity:0.2; } 
.subpage_indication_circle.active{ opacity:1; } 
.subpage_indication_line{ float:left; width:16px; height:2px; border-radius:10px; margin-top:4px; background-color:#414142; opacity:0.2; }
@media only screen and (min-width: 0px) and (max-width: 480px) {
	.subpage_indication_container{ height:8px; }
	.subpage_indication_circle{ float:left; width:8px; height:8px; border-radius:8px;  } 
	.subpage_indication_line{ float:left; width:12px; height:2px; border-radius:10px; margin-top:3px; }
}
#guide_link{ position:absolute; top:0; left:0; width:100px; height:50px; }
.guide_kv_container{ width:inherit; position:relative; }
.guide_desc_container{} 
.guide_scroll_container{ width:inherit; overflow:hidden; margin:5px auto; -webkit-overflow-scrolling:touch; overflow-x:hidden; position:relative; }
.guide_scroll_container_inner{ position:absolute;
	transition:top .4s;
	-o-transition:top .4s;
	-moz-transition:top .4s;
	-webkit-transition:top .4s;
}

.menu_hidden_close_container{ 
position:absolute; width:100%; height:100%; top:0; left:0; display:none;
}
.menu_container{ 
	position:absolute; overflow-x:visible; top:100%;
	transition:top .4s;
	-o-transition:top .4s;
	-moz-transition:top .4s;
	-webkit-transition:top .4s;
}
.menu_container.open{ top:0; }
.menu_bg_container{ position:absolute; top:0; text-align:center; }
.menu_bg_kv_container{ position:absolute; }

.menu_icon{ position:absolute; text-align:center; width:40%; cursor:pointer; left:30%; }
.menu_icon.inactive{ display:none; }

.menu_btn_container{ position:absolute; top:0; width:100%; text-align:center; background:#000; }
.menu_bg_margin_container{ width:100%; }
.menu_bg_btn_container{ width:100%; height:100px; position:absolute; cursor:pointer; background-image:url(../img/blank.gif); background-color:transparent; }

.home_kv_container{ 
	position:absolute; right:-90%; top:100%;
	transition:bottom .4s, right .4s, top .4s;
	-o-transition:bottom .4s, right .4s, top .4s;
	-moz-transition:bottom .4s, right .4s, top .4s;
	-webkit-transition:bottom .4s, right .4s, top .4s;
}
.home_kv_container_inner{ position:absolute; overflow:hidden; top:0; left:0; }

.home_telescope_container{ 
	position:absolute; top:26%; left:70%; 
	transition:all .9s;
	-o-transition:all .9s;
	-moz-transition:all .9s;
	-webkit-transition:all .9s;
}

#home_star_container, .page_star_container{ position:absolute; opacity:0; }
.home_star{ position:absolute; }

.home_subhead_container{ position:absolute; width:100%; text-align:center; }
.home_subhead_container > img{ 
	transition:all .3s;
	-o-transition:all .3s;
	-moz-transition:all .3s;
	-webkit-transition:all .3s;
}

.home_head_container{ 
	position:absolute; top:0; opacity:0; 
	transition:top .4s, opacity .4s;
	-o-transition:top .4s, opacity .4s;
	-moz-transition:top .4s, opacity .4s;
	-webkit-transition:top .4s, opacity .4s;
}
.home_hat_container{ 
	position:absolute; top:18%; left:26%;
}
.home_hat_container.active{ top:13%; left:30%; }

.home_bubble_container{ position:absolute; }
.home_bubble_container > img{ 
	transition:all .3s;
	-o-transition:all .3s;
	-moz-transition:all .3s;
	-webkit-transition:all .3s;
}

.home_intro_container{ position:absolute; text-align:center; width:100%; display:block; }
.home_hints_container{ position:absolute; text-align:center; width:96%; left:2%; display:block; }

.form_headtop_container{ margin:10px auto 0px auto; position:absolute; }
.form_head_container{ margin:10px auto 0px auto; position:absolute; }
.form_subhead_container{ margin:0px auto 20px auto; text-align:center; position:absolute;  }

.form_options_container.float{ float:left; margin-left:20px; margin-top:6px; }
.form_fields_container{ margin:0 auto; width:80%; max-width:430px; margin-top:10px; }
.form_label{  }
.form_field{ width:100%; margin:5px 0 0 0; }
.form_error{ 
	text-align:right; opacity:0; margin-top:3px;
	transition:opacity .4s;
	-o-transition:opacity .4s;
	-moz-transition:opacity .4s;
	-webkit-transition:opacity .4s;
}

.form_field_short_container{ width:60%; float:left; }
.form_option_container{ float:left; margin-bottom:5px; cursor:pointer; }
.form_option_icon{ float:left; border:2px solid #414142; background:#fff; border-radius:12px; width:12px; height:12px; position:relative; margin-top:2px; }
.form_option_icon_inner{ position:absolute; background:#414142; border-radius:8px; width:8px; height:8px; top:2px; left:2px; display:none; }
.form_option_label{ float:left; margin-left:5px; width:85px; }

.form_option_container.short > .form_option_label{ width:auto; }

@media only screen and (min-width: 480px) and (max-width: 550px) {
}
@media only screen and (min-width: 0px) and (max-width: 479px) {
	.form_option_container{ width:50%; }
	.form_option_icon{ margin-top:0px; }
}
@media only screen and (min-width: 0px) and (max-width: 440px) {
	.form_field_short_container{ width:100%; margin-bottom:15px; }
	.form_options_container.float{ margin-left:0px; margin-top:0px; }
}

.form_checkbox_container{ text-align:left; margin:auto auto 20px 0;  }
.form_checkbox_box{ width:16px; height:16px; border-radius:4px; border:2px solid #414142; background-color:#fff; float:left; margin-right:4px; position:relative; cursor:pointer; }
.form_checkbox_box.error{ background-color:#fce1e3;  }

.form_checkbox_label{ display:inline-block;  }
.form_checkbox_tick{ position:absolute; width:22px; height:28px; display:none; top:-10px; }
.form_checkbox_tick.active{ display:block; }
@media only screen and (min-width: 0px) and (max-width: 479px) {
	.form_checkbox_box{ width:14px; height:14px; }
	.form_checkbox_tick{ position:absolute; width:18px; height:23px; display:none; top:-8px; }
}

.form_hints_container{ text-align:center; }

.thanks_kv_container{ position:absolute; text-align:center; width:100%; overflow:hidden; }
.thanks_kv_container_inner{ position:absolute; }
.thanks_cnt_container{ position:absolute; text-align:center; width:100%; }

.gametime_cnt_container{ margin:0 auto; text-align:center; width:90%; max-width:400px; }


.hints_container{ width:90%; max-width:440px; min-height:100px; margin:auto auto; }
.hints_sep_container{ width:100%; height:2px; background:#000; margin:20px 0; }
.hints_ele_label{ float:left; width:20%; margin-right:4%; margin-top:3px; }
.hints_ele_cnt{ float:left; width:76%; }
@media only screen and (min-width: 480px) and (max-width: 639px) {
	.hints_sep_container{ margin:10px 0; }
}
@media only screen and (min-width: 0px) and (max-width: 479px) {
	.hints_sep_container{ margin:6px 0; }
}

.lightbox_bg_container, .menu_lightbox_bg_container{ display:none; position:absolute; width:100%; height:100%; background:#ccc; opacity:0.8; top:0px; left:0px; }
.lightbox_container{ display:none; position:absolute; width:90%; max-width:500px; height:90%; top:0px; left:0px; }
.lightbox_kv_container{ text-align:center; position:absolute; }
.lightbox_result_container{ position:absolute; }
.lightbox_result_ele{ float:left; }
.lightbox_result_captions{ text-align:center; position:absolute; width:100%; }


.page_result_ele{ text-align:right; margin:0 2px; }
.page_subhead_container{ margin:20px auto 0px auto; text-align:center; }
.result_kv_container{ position:absolute; overflow:hidden;}
.result_kv_container_inner{ position:absolute;  }
.result_kv_others_container{ position:absolute; }
.result_kv_others_container_inner{ position:absolute; overflow:hidden; }

#result_paper_container, #result_paperkv_container{ position:absolute; width:90%; max-width:420px; min-width:270px; height:500px; }
@media only screen and (min-width: 0px) and (max-width: 440px) {
#result_paper_container, #result_paperkv_container{ width:75%; max-width:420px; min-width:230px;  }
}

#result_paper_container{ overflow:hidden; -webkit-overflow-scrolling:touch; overflow-x:hidden;  }
.result_period_container{ margin:10px auto 3px auto; width:80%; max-width:320px; }
.result_period_ele{ margin:15px auto; color:#808184; height:18px; font-weight:bold; font-size:18px; }

tr.result_period_tr{  }
.result_period_ele_left{ margin-left:15px; width:100px; padding-top:2px; }
.result_period_ele_left.small{ width:50px;  }
.result_period_ele_middle{ text-align:right; }
.result_period_ele_right{ text-align:right; width:30px; padding-top:2px; }

.page_result_line{ width:80%; max-width:320px; height:3px; margin:7px auto; background-image:url(../img/result_line.png); background-repeat:repeat-x; }

.result_total_container{ margin:0px auto 25px auto; width:80%; max-width:320px; height:65px; }
tr.result_total_tr{ vertical-align:baseline; height:65px; }
.page_result_total{ text-align:left; }

.result_button_container{ width:80%; max-width:340px; margin:10px auto; position:relative; height:85px; }

.result_num{ height:50px; margin:15px 0; }
.result_num_s{ height:60px; margin:10px 0; }
.num_img{ margin:0 4px; }

@media only screen and (min-width: 0px) and (max-width: 440px) {
	.page_subhead_container{ margin:10px auto 0px auto;  }
	.result_num{ height:40px; margin:10px 0; }
	.result_num_s{ height:70px; margin:5px 0; }
	.num_img{ margin:0 2px; }
	.result_total_container{ height:60px; }
	tr.result_total_tr{ height:60px; }
	.result_period_ele{ margin:11px auto; height:14px; font-size:14px;  }
	.result_period_ele_right{ width:20px; }
	
	.page_result_line{ margin:5px auto;  }
	.result_button_container{ margin:0 auto 5px auto;  }
}