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%;
	/*overflow: hidden;*/
}

body {
	line-height: 1.4;

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

	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;
	background: url(../images/bg.jpg);
}

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

/* 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:460px;
		background: url(../images/topimage.jpg) no-repeat center center;
	}

	.title{
		font-size: 14pt;
		text-align: center;
	}
	.text{
		text-align: center;
	}

	.schedule_table{
		margin:0 auto;
		margin-bottom: 30px;
		width:820px;
		padding:10px 10px;
	}
		.line{
			width:100%;
			height:10px;
			background: url(../images/line_bg.png) repeat-x ;
		}
		.table_col{
			width:100%;
			height:160px;
			margin:10px 0;
			display: -webkit-flex;
  			display: flex;
		}
			.table_col:hover{
				cursor:pointer;
				-webkit-filter: brightness(1.02) contrast(1.12);
				filter: brightness(1.02) contrast(1.12);
			}
		.box_day{
			width:140px;
			height:100%;
			margin-right:10px;
			-webkit-flex: none;
          	flex: none;
		}
			#col_day_1 > .box_day{
				background: url(../images/day_01.png) no-repeat center center;
			}
			#col_day_2 > .box_day{
				background: url(../images/day_02.png) no-repeat center center;
			}
			#col_day_3 > .box_day{
				background: url(../images/day_03.png) no-repeat center center;
			}
		.activity_box{
			position: relative;
			height:100%;
			width:210px;
			margin-right:10px;
			-webkit-flex: 1;
          	flex: 1;
          	background: #ffead6;
          	background-position: center center;
          	background-size: cover;
		}
			.box_frame{
				position: absolute;
				z-index: 3;

				display: -webkit-flex;
  				display: flex;
  				-webkit-align-items: center;
	            align-items: center;
	  			-webkit-justify-content: center;
	            justify-content: center;
				
				width:100%;
				height:100%;
				color:#cdb1a3;
				background: url(../images/box_frame.png) no-repeat center center;
			}
			.box_name{
				width: 100%;
				height:50px;

				position: absolute;
				bottom: 0;
				padding-top: 16px;
				color:#FFF;
				text-align: center;

				opacity: 0;

				background: #000; /* For browsers that do not support gradients */
			    background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.7)); /* For Safari 5.1 to 6.0 */
			    background: -o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.7)); /* For Opera 11.1 to 12.0 */
			    background: -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.7)); /* For Firefox 3.6 to 15 */
			    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.7)); /* Standard syntax */
			}

	.enterBtn{
        margin: 0 auto;
        width:160px;
        height:50px;
        background:#ef626c;
        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: 10px;
        box-shadow:0px 5px #c93c51;

        overflow: hidden;
    }
        .enterBtn:hover{
            background:#ff8d9b;
            box-shadow:0px 5px #ef626c;
            cursor:pointer;
        }
        .enterBtn:active{
            background:#c93c51;
            box-shadow:0px 5px #a6263f;
        }

        .share_box{
        	width:100px;
        	height:0px;
        	margin: 0 auto;
        	margin-top: 10px;
        	overflow: hidden;

        	opacity:0;

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

	        -webkit-transition: 0s; /* Safari */
    		transition: 0s;
    		-webkit-transition: opacity 0.5s; /* Safari */
    		transition: opacity 0.5s;
        }
        	.facebook_share_btn{
        		width:40px;
        		height:40px;
        		background: url(../images/facebook_share_btn.png) no-repeat center center; 
        		-webkit-flex: 1;
          		flex: 1;
        	}
        		.facebook_share_btn:hover{
        			cursor: pointer;
        			opacity: 0.7;
        		}
        	.download_btn{
        		width:40px;
        		height:40px;
        		background: url(../images/download_btn.png) no-repeat center center; 
        		-webkit-flex: 1;
          		flex: 1;
        	}
        		.download_btn:hover{
        			cursor: pointer;
        			opacity: 0.7;
        		}


    /* ----- Form ----- */
	.sharing_form{
		position: relative;
		width:800px;
		max-width:960px;
		margin:0 auto;
		margin-top:20px;

		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:800px;
		font-size: 11pt;
	}
		@media screen and (max-width:500px) {
			.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;
	}

	/*----- lightBox ----- */
	.lightBox{
		width:100%;
		height: 100%;
		position:fixed;
		z-index:3;
		overflow-y: scroll;

		left:0;
		top:0;
		background:rgba(0,0,0,0.7);

		color: #FFF;
		display:none;
		/*opacity: 0;
		pointer-events: none;*/

		-webkit-transition: 0.2s; /* Safari */
    	transition: 0.2s;
	}
		.lightBoxContent{
			position:relative;
			margin:0 auto;
			width: 960px;
			padding:15px;

			left:10px;
		}
		.lightbox_title{
			font-size: 18pt;
			font-weight: bold;
			text-align: center;
			margin-top:70px;
			margin-bottom: 30px;
		}
		.place_list{
			width:100%;
		}
			.place_item{
				position: relative;
				float:left;
				width:290px;
				height:250px;
				margin:10px;
				padding:4px;
				background: #ffead6;
			}
				.placeImage{
					position: absolute;
					z-index: 0;
					width:282px;
					height:202px;
				}
					#place_1 > .placeImage{
						background: url(../images/place_1.jpg) no-repeat center center;
					}
					#place_2 > .placeImage{
						background: url(../images/place_2.jpg) no-repeat center center;
					}
					#place_3 > .placeImage{
						background: url(../images/place_3.jpg) no-repeat center center;
					}
					#place_4 > .placeImage{
						background: url(../images/place_4.jpg) no-repeat center center;
					}
					#place_5 > .placeImage{
						background: url(../images/place_5.jpg) no-repeat center center;
					}
					#place_6 > .placeImage{
						background: url(../images/place_6.jpg) no-repeat center center;
					}
					#place_7 > .placeImage{
						background: url(../images/place_7.jpg) no-repeat center center;
					}
					#place_8 > .placeImage{
						background: url(../images/place_8.jpg) no-repeat center center;
					}
					#place_9 > .placeImage{
						background: url(../images/place_9.jpg) no-repeat center center;
					}
					#place_10 > .placeImage{
						background: url(../images/place_10.jpg) no-repeat center center;
					}
					#place_11 > .placeImage{
						background: url(../images/place_11.jpg) no-repeat center center;
					}
					#place_12 > .placeImage{
						background: url(../images/place_12.jpg) no-repeat center center;
					}
					#place_13 > .placeImage{
						background: url(../images/place_13.jpg) no-repeat center center;
					}
					#place_14 > .placeImage{
						background: url(../images/place_14.jpg) no-repeat center center;
					}
					#place_15 > .placeImage{
						background: url(../images/place_15.jpg) no-repeat center center;
					}

				.place_frame_1{
					position: absolute;
				}
					.placeImageFrame{
						width:282px;
						height:202px;
					}
					.placeTitle{
						height:36px;
						margin-top: 4px;
						padding-top: 2px;
						text-align: center;
						color:#333333;
						font-weight: bold;
						font-size: 16pt;
					}
				.place_frame_2{
					position: absolute;
					opacity: 0;
					z-index: 2;
				}
					.place_frame_2:hover{
						opacity: 1;
					}
					.placeInfo{
						width:282px;
						height:202px;
						padding:14px;
						background:rgba(255,255,255,0.8);
					}
						.placeName{
							color:#333333;
							font-weight: bold;
							font-size: 16pt;
						}
						.placeSubName{
							color:#333333;
							font-weight: bold;
							font-size: 13pt;
							margin-top:5px;
						}
						.placeText{
							font-size:14px;
							color:#000;
						}
						.add_btn{
							width:282px;
							height:36px;
							background-color:#ef626c;
							box-shadow:0px 4px #c93c51;

							font-weight: bold;
							font-size: 14pt;

							display: -webkit-flex;
							display: flex;
							-webkit-align-items: center;
							align-items: center;
							-webkit-justify-content: center;
							justify-content: center;
						}
							.add_btn:hover{
								cursor: pointer;
								background-color:#ff8d9b;
								box-shadow:0px 4px #ef626c;
							}
							.add_btn:active{
								background-color:#c93c51;
								box-shadow:0px 4px #a6263f;
							}

		.closeBtn{
			width:45px;
			height:45px;
			top:30px;
			right:30px;
			position:absolute;
			background: url(../images/closeBtn.png) no-repeat 50% center;
			cursor: pointer;
			-webkit-transition: 0.3s;
  			transition: 0.3s;
		}
			.closeBtn:hover{
				background: url(../images/closeBtn_b.png) no-repeat 50% center;
			}

		#select_btn{
			margin-top:20px;	
			margin-bottom:30px;	
		}
/* Footer
-----------------------------------------------------------------------------*/
.footer{
    width:100%;
    min-width: 960px;

	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;
		}
	}












/* for thank you page*/
/* call for action*/
	.call_for_action{
		padding:40px;
	}
		.call_for_action_title{
			margin-bottom: 15px;
			font-size: 22pt;
			text-align: center;
			color:#ef626c;
			font-weight:bold;
		}
		.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:330px;
				margin:10px;
				padding:15px;
				padding-top:8px;
				background-color:#f7f7f7;
				position:relative;
			}
			.col_1_box{
				width:430px;
				height:290px;
			}
			.col_2_box{
				width:430px;
				height:330px;
			}
			.col_3_box{
				height:380px;
			}
			.boxTitle{
				margin-bottom:8px;
				font-size: 14px;
				text-align: 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:250px;
				height:35px;
				margin-top:4px;
				text-align: center;
				background: #ef626c;
				color:#FFF;
				cursor: pointer;
				-webkit-transition: 0.2s; /* Safari */
	   			transition: 0.2s;
			}
				.actionBtn:hover{
					background: #a6263f;
				}	
			.greenBtn{
				background: #006a6e;
			}
				.greenBtn:hover{
					background: #004f4f;
				}
			.yellowBtn{
				background: #fcb130;
			}
				.yellowBtn:hover{
					background: #d88b1a;
				}
			.bigBtn{
				width:390px;
			}