/*@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);*/

/* Eric Meyer's CSS Reset */
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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.3;
}
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;
}
/* End of Eric Meyer's CSS Reset */

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
	display: block;
}

html{
	
}

body {
	font-family:"Noto Sans TC","Microsoft JhengHei", "敺株��迤暺煾��", "Apple LiGothic Medium", "��𧢲�𨅯�瑚葉暺�", "Lucida Grande", "Lucida Sans Unicode", Helvetica;
	line-height: 1.4;
	font-size:11pt;
	height:100%;
}
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

  -webkit-transition: 0.3s; /* Safari */
  transition: 0.3s;
}
a{
	text-decoration: none;
	color:inherit;
	-webkit-transition: 0.2s; /* Safari */
    transition: 0.2s;
    cursor: pointer;
}
a:hover{
	color:#73cde5;
}


.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://sampsonresume.com/labs/pIkfp.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

.wrapper {
	width: 100%;
	height:100%;
}
	.checksize{
		position: fixed;
		z-index: 99;
		padding:5px;
		top:0px;
		right:0px;
		color:#FFF;
		background:#000;
	}

.background_image{
	width:100%;
	height:100%;
	position: fixed;
	z-index: -2;

	background: url(../images/bg_landing.jpg) no-repeat center center fixed; 

	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

	background-position:center;
}


/* Header
-----------------------------------------------------------------------------*/
.header {
	overflow: hidden;
	position: absolute;
	z-index: 9;
	width:100%;
	-webkit-transition: 0s; /* Safari */
    		transition: 0s;
}
	.headerBar{
		width:100%;
		height:15px;
		background-color:#FFF;
		-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
		box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
	}
	.logoBar{
		width:640px;
		height:80px;
		background: url(../images/logoBar.png) no-repeat right center;
	}
	.headerFrame{
		margin:0 auto;
		width:500px;
		height:90px;
		text-align: center;
		background: url(../images/headerFrame.png) no-repeat center top;
	}
	#main_header{
		display: none;
	}

/* Middle
-----------------------------------------------------------------------------*/
.container{
	width:100%;
	position: absolute;
	padding:30px;

	left:0;
	top:0;
	display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.bg_black{
	width:100%;
	height:100%;
	position: fixed;
	z-index: -1;
	background: #000;
	opacity: .4;

	-webkit-transition: 0s; /* Safari */
    transition: 0s;
}

.landingPage{
}
	.landingLogo{
		margin:0 auto;
		width:300px;
		height:360px;
		background: url(../images/landingLogo.png) no-repeat center center;
		background-size: contain;
		margin-bottom: 10px;

		-webkit-transition: 0s; /* Safari */
    	transition: 0s;
    	-webkit-transition: width 0.3s, height 0.3s; /* Safari */
    	transition: width 0.3s,height 0.3s;
	}

	@media screen and (max-width:950px) {
		.landingLogo{
			width:240px;
			height:288px;
		}
	}
	@media screen and (max-width:500px) {
		.landingLogo{
		}
	}
	.landingInfo{
		margin:0 auto;
		margin-bottom: 20px;

		width:100%;
		max-width:720px;

		font-size:12pt;
		color:#FFF;
		text-align: center;

		/*text-shadow: 0px 0px 3px rgba(0,0,0,0.4);*/
		
		-webkit-transition: opacity 0s; /* Safari */
    	transition: opacity 0s;
	}
		.highlight{
			font-weight:bold;
			color:#73cde5;
		}
	.enterBtn{
        margin: 0 auto;
        width:160px;
        height:50px;
        background:#ff5546;
        font-size:14pt;
        color:#FFF;

        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;

        border-radius: 8px;
        -webkit-box-shadow: 0px 5px #bf4035;
		-moz-box-shadow: 0px 5px #bf4035;
		box-shadow: 0px 5px #bf4035;

        -webkit-transition: 0s; /* Safari */
    	transition: 0s;
    }
        .enterBtn:hover{
            background:#ff7676;
            -webkit-box-shadow: 0px 5px #ff5546;
			-moz-box-shadow: 0px 5px #ff5546;
			box-shadow: 0px 5px #ff5546;
            cursor:pointer;
        }

/* Page 2*/
.characterWindow{
    position: absolute;
    width:100%;
    height:100%;
    top:0;
    z-index: 3;
	overflow: hidden;
}
	.titleText{
		padding-top: 5px;
		font-size: 30px;
		font-weight: bold;
		color:#003571;
	}
	.backgroundColor{
		width:100%;
		height:100%;
		position: fixed;
		z-index: -2;
	}
		#backgroundLeft{
			position: absolute;
			left:0;
			width:50%;
			background-color: #2bb8d8;
			height:100%;
		}
		#backgroundRight{
			position: absolute;
			right:0;
			width:50%;
			background-color: #ff5546;
			height:100%;
		}

	.character_element{
		display: -webkit-flex;
	    display: flex;
	    -webkit-align-items: center;
	    align-items: center;
	    -webkit-justify-content: center;
	    justify-content: center;
	    padding:30px;
	}
		.character_selector_male{
			display: -webkit-flex;
		    display: flex;
		    -webkit-align-items: center;
		    align-items: center;
		    -webkit-justify-content: center;
		    justify-content: center;
		    padding-right:5%;
		}
			.character_selector_male:hover{
				padding-right:10%;
				cursor: pointer;
			}
			.character_male{
				min-width:180px;
				height:420px;
				margin-top: 100px;
				background: url(../images/character_male.png) no-repeat center center;
				background-size:contain;
			}

		.character_selector_female{
			display: -webkit-flex;
		    display: flex;
		    -webkit-align-items: center;
		    align-items: center;
		    -webkit-justify-content: center;
		    justify-content: center;
		    padding-left:5%;
		}
			.character_selector_female:hover{
				padding-left:10%;
				cursor: pointer;
			}
			.character_female{
				min-width:180px;
				height:420px;
				margin-top: 100px;
				background: url(../images/character_female.png) no-repeat center center;
				background-size:contain;
			}
			.btn_male{
				width:150px;
				min-width:100px;
				height:150px;
				margin-right: 30px;
				background: url(../images/btn_male.png) no-repeat center center;
				background-size: contain;
			}
				.btn_male:hover{
					cursor: pointer;
				}
			.btn_female{
				width:150px;
				min-width:100px;
				height:150px;
				margin-left: 30px;
				background: url(../images/btn_female.png) no-repeat center center;
				background-size: contain;
			}
				.btn_female:hover{
					cursor: pointer;
				}

.game_window{
	top:0;
	width:100%;
	height:100%;
	position: absolute;
	z-index: 2;
	background-color: #FCB;

	display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}
	.left_screen{
		position: relative;
		width:100%;
		height:100%;
	}
		.bg_top{
			width:100%;
			height:50%;
			background:#a9edff;
		}
		.bg_bot{
			height:50%;
			width:100%;
			background:#e8e2cc;
		}
		.outer{
			position: absolute;
			left:0;
			top:0;
			width:100%;
			background:url(../images/photo_bg.png) repeat-x center center;
			background-size: contain;
			-webkit-transition: 0s; /* Safari */
 			transition: 0s;
		}
		.main_screen{
			position: absolute;
			left:0;
			top:0;
			width:1250px;
			height:790px;
			background:url(../images/photo_bg.png) repeat-x center center;
			background-size: contain;
			overflow: hidden;
			-webkit-transition: 0s; /* Safari */
 			transition: 0s;
		    transform-origin: 0% 0%;
		}
			.item_bg{
				position: absolute;
				left:0;
				top:0;
				width:100%;
				height:100%;
				background:url(../images/item_bg_00.png) no-repeat center center;
				background-size: contain;
			}
			.item_middle_01{
				position: absolute;
				left:175px;
				top:360px;
				width:300px;
				height:300px;
				background:url(../images/item_mid_00.png) no-repeat center center;
			}
			.item_middle_02{
				position: absolute;
				left:800px;
				top:360px;
				width:300px;
				height:300px;
				background:url(../images/item_mid_00.png) no-repeat center center;
			}
			.item_character{
				position: absolute;
				left:505px;
				top:180px;
				width:240px;
				height:560px;
				background:url(../images/character_male.png) no-repeat center center;
				background-size:contain;

				-webkit-transition: 0s; /* Safari */
    			transition: 0s;
			}
			.item_front_01{
				position: absolute;
				left:450px;
				top:490px;
				width:360px;
				height:285px;
				background:url(../images/item_front_01.png) no-repeat center center;
				opacity: 0;
			}
			.item_front_02{
				position: absolute;
				left:540px;
				top:490px;
				width:360px;
				height:270px;
				background:url(../images/item_front_02.png) no-repeat center center;
				opacity: 0;
			}
			.item_front_03{
				position: absolute;
				left:640px;
				top:170px;
				width:240px;
				height:560px;
				background:url(../images/item_front_03.png) no-repeat center center;
				background-size:contain;
				opacity: 0;
			}
			.item_front_04{
				position: absolute;
				left:400px;
				top:90px;
				width:190px;
				height:360px;
				background:url(../images/item_front_04.png) no-repeat center center;
				opacity: 0;
			}
		.dialog_box{
			position: absolute;
			left:0;
			bottom:60px;
			width:96%;

			margin:2%;
			padding:2%;
			background-color: rgba(0,0,0,0.7);
			border-radius: 8px;
			color:#FFF;

			opacity: 0;
		}
			.dialogTitle{
				font-size: 14pt;
				font-weight: bold;
				margin-bottom: 4px;
			}
		.nav_bar{
			position: absolute;
			left:0;
			bottom:0;
			width:100%;
			height:60px;
			padding:10px;
			background-color: #003571;
		}
			.zone_legend{
				float:left;
				width:200px;
				height:40px;
				background:url(../images/zone_legend.png) no-repeat center center;
			}
			@media screen and (max-width:600px) {
				.zone_legend{
					display: none;
				}
			}
			.redoBtn{
				float:right;
				width:40px;
				height:40px;
				margin-right:10px;
				background:url(../images/redo_icon.png) no-repeat center center;
				background-color:#0086a5;
				border-radius: 6px;

				display: -webkit-flex;
			    display: flex;
			    -webkit-align-items: center;
			    align-items: center;
			    -webkit-justify-content: center;
			    justify-content: center;
			    
			}
				.redoBtn:hover{
					cursor: pointer;
					background-color:#00a4bf;
				}
				.redoBtn:active{
					background-color:#006989;
				}
			.nextBtn{
				float:right;
				color:#FFF;
				width:120px;
				height:40px;
				background-color:#0086a5;
				border-radius: 6px;
				font-size:14pt;

				display: -webkit-flex;
			    display: flex;
			    -webkit-align-items: center;
			    align-items: center;
			    -webkit-justify-content: center;
			    justify-content: center;
			}
				.nextBtn:hover{
					cursor: pointer;
					background-color:#00a4bf;
				}
				.nextBtn:active{
					background-color:#006989;
				}

	.side_bar{
		width:30%;
		padding:10px;
        max-width:360px;
		height:100%;
		background-color: #e8e8e8;
		overflow-y:scroll;
	}
		.side_title{
			font-size: 14pt;
			font-weight: bold;
			margin-top: 20px;
			margin-bottom: 10px
		}
		.side_btn_group{
			display: -webkit-flex;
		    display: flex;
		    -webkit-align-items: center;
		    align-items: center;
		    -webkit-justify-content: center;
		    justify-content: center;
		    margin-bottom:10px;
		    cursor: pointer;
		}
			.vspace{
				width:10px;
			}
			.side_btn{
				-webkit-flex: 1;
	          	flex: 1;
	          	border-radius: 8px;
				background-color: #FFF;
			}
			.side_btn_selected{
				-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);
				-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);
				box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);
			}
				#item_1{
					background:#FFF url(../images/item_01.png) no-repeat center center;
					background-size: cover;
				}
					#item_1:hover{
						background-image:url(../images/item_pic_01.jpg);
					}
				#item_2{
					background:#FFF url(../images/item_02.png) no-repeat center center;
					background-size: cover;
				}
					#item_2:hover{
						background-image:url(../images/item_pic_02.jpg);
					}
				#item_3{
					background:#FFF url(../images/item_03.png) no-repeat center center;
					background-size: cover;
				}
					#item_3:hover{
						background-image:url(../images/item_pic_03.jpg);
					}
				#item_4{
					background:#FFF url(../images/item_04.png) no-repeat center center;
					background-size: cover;
				}
					#item_4:hover{
						background-image:url(../images/item_pic_04.jpg);
					}
				#item_5{
					background:#FFF url(../images/item_05.png) no-repeat center center;
					background-size: cover;
				}
					#item_5:hover{
						background-image:url(../images/item_pic_05.jpg);
					}
				#item_6{
					background:#FFF url(../images/item_06.png) no-repeat center center;
					background-size: cover;
				}
					#item_6:hover{
						background-image:url(../images/item_pic_06.jpg);
					}
				#item_7{
					background:#FFF url(../images/item_07.png) no-repeat center center;
					background-size: cover;
				}
					#item_7:hover{
						background-image:url(../images/item_pic_07.jpg);
					}
				#item_8{
					background:#FFF url(../images/item_08.png) no-repeat center center;
					background-size: cover;
				}
					#item_8:hover{
						background-image:url(../images/item_pic_08.jpg);
					}
				#item_9{
					background:#FFF url(../images/item_09.png) no-repeat center center;
					background-size: cover;
				}
					#item_9:hover{
						background-image:url(../images/item_pic_09.jpg);
					}
				#item_10{
					background:#FFF url(../images/item_10.png) no-repeat center center;
					background-size: cover;
				}
					#item_10:hover{
						background-image:url(../images/item_pic_10.jpg);
					}
				#item_11{
					background:#FFF url(../images/item_11.png) no-repeat center center;
					background-size: cover;
				}
					#item_11:hover{
						background-image:url(../images/item_pic_11.jpg);
					}
				#item_12{
					background:#FFF url(../images/item_12.png) no-repeat center center;
					background-size: cover;
				}
					#item_12:hover{
						background-image:url(../images/item_pic_12.jpg);
					}

	.result_page{
		width:100%;
		height:100%;
		background: #f4edd9;
		padding-top: 100px;
		display: none;
	}
		.result_image{
			position: relative;
			width:100%;
			max-width:1200px;
			height:740px;
			margin:0 auto;

			-webkit-transition: 0s; /* Safari */
	 		transition: 0s;

	 		display: -webkit-flex;
		    display: flex;
		    -webkit-align-items: center;
		    align-items: center;
		    -webkit-justify-content: center;
		    justify-content: center;
		    opacity: 0;
		}
		.result_image_frame{
			float: left;
			z-index: 1;
			width:100%;
			height:100%;
			background-image:url(../images/result_image.png);
			background-size: contain;
			-webkit-transition: 0s; /* Safari */
	 		transition: 0s;
		}
			.result_frame{
				position: absolute;
				width:70%;
				height:70%;
				background-color: #FFF;
			}
			.result_screen{
				position: absolute;
				width:1250px;
				height:790px;
				background:url(../images/photo_bg.png) repeat-x center center;
				background-size: contain;
				-webkit-transition: 0s; /* Safari */
	 			transition: 0s;
			    transform-origin: 50% 50%;
			}

		/* ----- Form ----- */
		.sharing_form{
			position: relative;
			width:90%;
			max-width:800px;
			margin:0 auto;

			padding:30px 0px;
			text-align: center;
		}
			.formInfo{
				width:100%;
				margin-bottom: 10px;
				font-size:14pt;
			}
			.formField{
				margin:20px auto;
				height:30px;
				max-width:960px;

				display: -webkit-flex;
	 			display: flex;
	 			font-size:12pt;
			}
			.textField{
				width:100%;
				height:30px;
				padding:8px;
				border-radius: 4px;
	          	max-height:100px;
	          	border: 1px solid #999;
	          	font-family:"Noto Sans TC","Microsoft JhengHei", "敺株��迤暺煾��", "Apple LiGothic Medium", "��𧢲�𨅯�瑚葉暺�", "Lucida Grande", "Lucida Sans Unicode", Helvetica;
			}
			.checkBox{
				min-width:18px;
				height:18px;
				margin:2px 10px 0 0;
			}
			#submit_btn{
			}

		.terms{
			margin:0 auto;
			margin-top:10px;
			margin-bottom:40px;
			width:90%;
			max-width:800px;
			font-size: 11pt;
		}
			@media screen and (max-width:599px) {
				.terms{
					font-size: 10pt;
				}
			}
			.termsTitle{
				border-top:2px dotted #999999;
				padding-top: 30px;
				color:#02488f;
				font-size: 10pt;
				font-weight:bold;
			}
		ol{
			list-style-type: decimal;
		}
		li{
			margin-bottom: 6px;
		}

/* Footer
-----------------------------------------------------------------------------*/
.footer{
	position:fixed;
    bottom:0px;
    width:100%;

	min-height: 80px;
	padding:12px;
	background:#003571;
	font: 12px Arial, sans-serif;

	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}

	.footerContent{
		width:960px;
		max-width:960px;
		margin:0 auto;
	}
	@media screen and (max-width:500px) {
	  .footerContent{
	    display: inline;
	  }
	}
	.footerText{
		float:left;
		color:#629fbe;
	}
	.footerLogo{
		float:right;
		-webkit-flex: none;
		flex: none;
		
		width: 220px;
		height:28px;
		margin:12px 0 0 0;
	}
	@media screen and (max-width:500px) {
		.footerLogo{
			margin-bottom:0;
		}
	}


/* for mobile */
@media screen and (max-width:500px) {
	.container{
		padding:20px;
		position:relative;
	}
	.result_page{
		padding-top:40px;
	}
	#main_header{
		display: none !important;
	}
	.footer{
		position:relative;
	}
}



/* for thank you page*/
.thankyou_page{
	width:100%;
	max-width: 960px;
	margin:0 auto;
	height:100%;
	background: #f4edd9;
	padding-top: 100px;
}

	.topImage{
		margin:0 auto;
		margin-bottom: 20px;

		width:100%;
		max-width:600px;
		height:400px;
		background: url(../images/top_image.png) no-repeat center center;
		background-size: contain;
	}
	.text{
		padding:0 5%;
		text-align: center;
	}
/* call for action*/
	.call_for_action{
		padding:20px;
	}
		.call_for_action_title{
			margin-bottom: 15px;
			font-size: 16pt;
			text-align: center;
			color:#2e2f38;
			font-weight:bold;
		}
		.call_for_action_col{
			width:100%;
			display: -webkit-flex;
			display: flex;
		}
			.call_for_action_box{
				position:relative;
				width:280px;
				min-width:250px;
				height:330px;

				-webkit-flex: initial;
	          	flex: initial;
				
				margin:10px;
				padding:15px;
				padding-top:8px;
				background-color:#FFF;
			}
			.col_1_box{ /* Adjust the box height*/
				width:440px;
				height:350px;
			}
			.boxTitle{
				margin-bottom:8px;
				font-size: 16px;
				text-align: center;
			}
			.imageBox{
				width:100%;
				height:180px;
				text-align: center;
				overflow: hidden;
				display: -webkit-flex;
				display: flex;
				-webkit-align-items: center;
				align-items: center;
				-webkit-justify-content: center;
				justify-content: center;
			}
			.promoInfo{
				margin:12px 0 4px 0;
				font-size: 10pt;
				line-height: 1.25;
			}
			.promoInfo ul li{
				list-style-type:disc;
				margin:0;
				margin-left:20px;
			}
			.priceBox{
				position: absolute;
				width:250px;
				bottom:52px;
			}
			price{
				font-size: 20px;
			}
			.actionBtn{
				position: absolute;
				bottom:15px;

				display: -webkit-flex;
				display: flex;
				-webkit-align-items: center;
				align-items: center;
				-webkit-justify-content: center;
				justify-content: center;

				width:calc(100% - 30px);
				height:35px;
				margin-top:4px;
				text-align: center;
				background: #ff5546;
				color:#FFF;
				cursor: pointer;
				-webkit-transition: 0.2s; /* Safari */
	   			transition: 0.2s;
			}
				.actionBtn:hover{
					color:#FFF;
					background: #ff7676;
				}

	@media screen and (max-width:599px) {
		.call_for_action{
			padding:20px;
		}
		.call_for_action_col{
			width:100%;
			display: block;
		}
			.call_for_action_box{
				position:relative;
				width:100%;
				
				margin:0px;
				margin-bottom: 20px;
				padding:15px;
				padding-top:8px;
				background-color:#f7f7f7;
			}
	}
	@media screen and (max-width:500px) {
		#ty_header{
			display: none !important;
		}
		.topImage{
			height:250px;
		}
		.thankyou_page{
			padding-top: 20px;
		}
	}