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 {
	margin:0;
}
	
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{
	width:100%;
	height:100%;
}

body {
	line-height: 1.3;

	font-family:"Microsoft JhengHei", "微軟正黑體", "Apple LiGothic Medium", "蘋果儷中黑", "Lucida Grande", "Lucida Sans Unicode", Helvetica;
	font-size:10pt;

	width:100%;
	height:100%;
}
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

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

.wrapper {
	width:100%;
	background-color: #cccccc;
}

/* Header
-----------------------------------------------------------------------------*/
.header {
	width:100%;
	min-width: 960px;
	overflow: hidden;
	position: absolute;
	z-index: 2;
}
	.headerBar{
		width:100%;
		height:15px;
		background-color:#FFF;
		-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);
		-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);
		box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);
	}
	.logoBar{
		width:450px;
		height:80px;
		background: url(../images/logoBar.png) no-repeat center center;
	}

	.langMenu{
		position: absolute;
		top:24px;
		right:10px;
		z-index: 2;

		width:88px;
		height:30px;
		padding-top:4px;
		text-align:center;
		background-color: rgba(256,256,256,1);
		border: 1px solid #4c4c4c;
		line-height: 1.5;
		font-size: 10.2pt;
		font-family:"Microsoft JhengHei", "微軟正黑體", "Apple LiGothic Medium", "蘋果儷中黑", "Lucida Grande", "Lucida Sans Unicode", Helvetica;
	}
		.langBtn_1{
			float:left;
			margin:0 5px 0 11px;
		}
		.langBtn_2{
			float:left;
			margin:0 5px;
		}
		.langBtn_3{
			float:left;
			margin:0 5px;
		}

/* Middle
-----------------------------------------------------------------------------*/

.middle{
	position: relative;
	width:960px;
	margin:0 auto;
	background-color: #FFF;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
}
	.topImage{
		width:100%;
		height:480px;
		background: url(../images/topimage_zh.jpg) no-repeat center center;
	}
		.topImage:lang(en){
			background: url(../images/topimage_en.jpg) no-repeat center center;
		}
	.topbar{
		width:100%;
		height:12px;
		background:#e5e5e5;
	}

	.navBar{
		margin:0 auto;
		margin-top:50px;
		height:70px;
		display: -webkit-flex;
	 	display: flex;
	 	-webkit-align-items: center;
		align-items: center;
		-webkit-justify-content: center;
		justify-content: center;
	}
		.navBtn{
			width:160px;
			height:70px;
			margin:0 20px;
		}
		.navBtn:hover{
			cursor:pointer;
		}
			#nav_play{
				background: url(../images/nav_play_a.png) no-repeat center center;
			}
				#nav_play:lang(en){
					background: url(../images/nav_play_a_en.png) no-repeat center center;
				}
			#nav_play:hover{
				margin-top:-15px;
				background: url(../images/nav_play_b.png) no-repeat center center !important;
			}
				#nav_play:hover:lang(en){
					background: url(../images/nav_play_b_en.png) no-repeat center center !important;
				}
			#nav_eat{
				background: url(../images/nav_eat_a.png) no-repeat center center;
			}
				#nav_eat:lang(en){
					background: url(../images/nav_eat_a_en.png) no-repeat center center;
				}
			#nav_eat:hover{
				margin-top:-15px;
				background: url(../images/nav_eat_b.png) no-repeat center center !important;
			}
				#nav_eat:hover:lang(en){
					background: url(../images/nav_eat_b_en.png) no-repeat center center !important;
				}
			#nav_see{
				background: url(../images/nav_see_a.png) no-repeat center center;
			}
				#nav_see:lang(en){
					background: url(../images/nav_see_a_en.png) no-repeat center center;
				}
			#nav_see:hover{
				margin-top:-15px;
				background: url(../images/nav_see_b.png) no-repeat center center !important;
			}
				#nav_see:hover:lang(en){
					background: url(../images/nav_see_b_en.png) no-repeat center center !important;
				}


	/* call for action*/
	.call_for_action{
		padding:40px;
	}
		.call_for_action_title{
			margin-bottom: 15px;
			font-size: 28pt;
			text-align: center;
			color:#009b85;
			font-weight:bold;
		}
			.call_for_action_title:lang(en){
				font-size: 22pt;
			}
		.call_for_action_col{
			display: -webkit-flex;
			display: flex;
			-webkit-align-items: center;
			align-items: center;
			-webkit-justify-content: center;
			justify-content: center;

		}
			.call_for_action_box{
				width:280px;
				height:355px;
				margin:10px;
				padding:15px;
				padding-top:12px;
				background-color:#f7f7f7;
				position:relative;
			}
				.call_for_action_box:lang(en){
					height:390px;
				}
			.boxTitle{
				margin-bottom:8px;
				font-size: 14px;
			}
			.promoInfo{
				margin:12px 0 4px 0;
				line-height: 1.25;
			}
			.promoInfo ul li{
				list-style-type:disc;
				margin:0;
				margin-left:-20px;
			}
			.priceBox{
				position: absolute;
				bottom:52px;
			}
				.priceBox:lang(en){
					bottom:54px;
				}
			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:130px;
				height:35px;
				margin-top:4px;
				text-align: center;
				background: #009b85;
				color:#FFF;
				cursor: pointer;
				-webkit-transition: 0.2s; /* Safari */
	   			transition: 0.2s;
			}
			.actionBtn:hover{
				background: #006655;
			}

	/* content Page */	
	.content{
		width:100%;
		padding:40px;
	}
		.content_page{
		}
			.contentCol{
				margin-bottom: 10px;
				-webkit-transition: none; /* Safari */
	   			transition: none;
			}
				.content_image{
					float:left;
					width:220px;
					height:220px;
				}
				.content_text{
					float:left;
					width:620px;
					margin-left: 40px;
					margin-top: 35px;
				}
				#col2 .content_text{
					margin-left: 0px;
					margin-right: 40px;
				}
				.title1{
					font-size: 14pt;
					margin-bottom: 5px;
				}
					.title1:lang(en){
						font-size: 12pt;
						margin-bottom: 2px;
					}
				.title2{
					font-size: 18pt;
					margin-bottom: 10px;
					font-weight:bold;
				}
					.title2:lang(en){
						font-size: 16pt;
						margin-bottom: 8px;
						font-weight:bold;
					}
				.detail_text{
					text-align: justify;
					font-size: 11pt;
				}
					.detail_text:lang(en){
						font-size: 9.6pt;
					}

				#play_page .title2{
					color:#1ccaae;
				}
				#eat_page .title2{
					color:#ff5f99;
				}
				#see_page .title2{
					color:#ffc336;
				}

				#play_img_1{
					background: url(../images/play_image_01.png) no-repeat center center;
				}
				#play_img_2{
					background: url(../images/play_image_02.png) no-repeat center center;
				}
				#play_img_3{
					background: url(../images/play_image_03.png) no-repeat center center;
				}
				#eat_img_1{
					background: url(../images/eat_image_01.png) no-repeat center center;
				}
				#eat_img_2{
					background: url(../images/eat_image_02.png) no-repeat center center;
				}
				#eat_img_3{
					background: url(../images/eat_image_03.png) no-repeat center center;
				}
				#see_img_1{
					background: url(../images/see_image_01.png) no-repeat center center;
				}
				#see_img_2{
					background: url(../images/see_image_02.png) no-repeat center center;
				}
				#see_img_3{
					background: url(../images/see_image_03.png) no-repeat center center;
				}

	/* Vote Page */
	.linkToChinese{
		width:300px;
		height: 50px;
		margin:0 auto;
		margin-top: 30px;

		font-size:14pt;
		color:#FFF;
		background-color: #017bb8;

		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		-webkit-justify-content: center;
		justify-content: center;
	}
	.linkToChinese:hover{
		background-color: #11556d;
		cursor: pointer;
	}

	.votePage{
		position: relative;
		width:100%;
		padding:40px;
		padding-bottom:0px;
	}
		.voteContent{
			margin:0 auto;
			max-width: 960px;
			width: 100%;

		}
			.votedItem{
				
				text-align: center;
			}
				.voteTitle{
					margin-bottom: 15px;
					font-size: 28pt;
					color:#017bb8;
					font-weight:bold;
				}
					.voteTitle:lang(en){
						font-size: 22pt;
					}
				.voteSubtitle{
					font-size: 12pt;
					line-height: 1.4;
					margin:10px 20px;
				}
					

		/* ----- Form ----- */
			.fontTitle{
				font-size: 16pt;
			}
			.sharing_form{
				width:100%;
				max-width:700px;
				margin:0 auto;

				padding:20px 30px;
				text-align: center;
			}
				.formInfo{
					width:100%;
					margin-bottom: 10px;
				}
				.formField{
					margin:20px auto;
					height:20px;
					max-width:700px;

					display: -webkit-flex;
		 			display: flex;
		 			font-size:12pt;
				}
				.fieldTitle{
					text-align: left;
					-webkit-flex: 1;
		          	flex: 1;
				}
				.textField{
					-webkit-flex: 4;
		          	flex: 4;
		          	max-height:70px;
				}

				.submitBtnOuter{
					margin:0 auto;
					width:150px;
					height:50px;
				}
					.submitBtn{
						width:150px;
						height:50px;
						background-image:url("../images/submitBtn.png");
						-webkit-transition: 0.2s; /* Safari */
				    	transition: 0.2s;
				    	cursor: pointer;
					}
					.submitBtn:hover{
						background-image:url("../images/submitBtn_b.png");
					}

			.terms{
				margin-top:10px;
				width:100%;
				padding:20px 30px;
				background-color:#FFF;
			}
				.termsTitle{
					border-top:2px dotted #999999;
					padding-top: 30px;
					color:#02488f;
					font-size: 11pt;
					font-weight:bold;
				}
			ol{
				list-style-type: decimal;
			}
			li{
				margin-bottom: 6px;
			}


/* Footer
-----------------------------------------------------------------------------*/
.footer{
    width:100%;

	min-height: 80px;
	padding:20px;
	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;
	}
	
	.footerText{
		float:left;
		color:#629fbe;
	}
	.footerLogo{
		float:right;
		
		width: 220px;
		height:28px;
		margin:12px 0 0 0;
	}
	.footerLogo:lang(en){
		margin:16px 0 0 0;
	}
	@media screen and (max-width:599px) {
		.footerLogo{
			margin-bottom:0;
		}
	}