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;

	color:#333333;

	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;
    color:#629fbe;
}
a:hover{
	color:#73cde5;
}

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

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

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

.middle{
	position: relative;
	width:100%;
	max-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);
}

	.topBtn{
		position: fixed;
		z-index: 99;
		top:50px;
		right:30px;
		width:96px;
		height:212px;
		background: url(../images/topBtn.png) no-repeat center center;
		animation-name: topBtnAni;
		animation-iteration-count: infinite;
    	animation-duration: 3s;
	}
		.topBtn:hover{
			cursor:pointer;
			-ms-transform: rotate(5deg); /* IE 9 */
		    -webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
		    transform: rotate(5deg);
		}
		@keyframes topBtnAni {
		    0%   {top: 50px}
		    50%  {top: 75px}
		    100% {top: 50px}
		}

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

		width:100%;
		max-width:440px;
		height:250px;
		background: url(../images/topImage.png) no-repeat center center;
	}
	.topImageBg{
		position: absolute;
		width:100%;
		height:400px;
		background: url(../images/topImageBg.png) no-repeat center 100%;
	}

	.title{
		font-size: 14pt;
		text-align: center;
		font-weight: bold;
		padding:0 5%;
		margin-bottom:6px;
	}
	.text{
		padding:0 5%;
		text-align: center;
	}

	.graphic_01{
		position: absolute;
		top:-15px;
		left:180px;
		width:100px;
		height:90px;
		background: url(../images/graphic_01.png) no-repeat center center;
	}
	.graphic_02{
		position: absolute;
		top:-25px;
		left:200px;
		width:100px;
		height:90px;
		background: url(../images/graphic_02.png) no-repeat center center;
	}
	.graphic_03{
		position: absolute;
		top:-15px;
		left:200px;
		width:136px;
		height:80px;
		background: url(../images/graphic_03.png) no-repeat center center;
	}
	.graphic_04{
		position: absolute;
		top:-35px;
		left:195px;
		width:120px;
		height:112px;
		background: url(../images/graphic_04.png) no-repeat center center;
	}
	.graphic_05{
		position: absolute;
		top:-28px;
		left:200px;
		width:100px;
		height:110px;
		background: url(../images/graphic_05.png) no-repeat center center;
	}
	.graphic_06{
		position: absolute;
		top:-28px;
		left:230px;
		width:134px;
		height:100px;
		background: url(../images/graphic_06.png) no-repeat center center;
	}

	.navBar{
		margin-top:40px;
		margin-bottom:40px;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		-webkit-justify-content: center;
		justify-content: center;
	}
		.navBtn{
			width:140px;
			height:120px;	
		}
		.btn_01{
			background: url(../images/navBtn_01.png) no-repeat center center;
			-webkit-transition: 0s;
  			transition: 0s;
		}
		.btn_01:hover{
			cursor: pointer;
			background: url(../images/navBtn_01b.png) no-repeat center center;
		}
		.btn_01:active{
			cursor: pointer;
			background: url(../images/navBtn_01c.png) no-repeat center center;
		}
		.btn_02{
			background: url(../images/navBtn_02.png) no-repeat center center;
			-webkit-transition: 0s;
  			transition: 0s;
		}
		.btn_02:hover{
			cursor: pointer;
			background: url(../images/navBtn_02b.png) no-repeat center center;
		}
		.btn_02:active{
			cursor: pointer;
			background: url(../images/navBtn_02c.png) no-repeat center center;
		}
		.activeStyle_01{
			background: url(../images/navBtn_01c.png) no-repeat center center;
		}
		.activeStyle_02{
			background: url(../images/navBtn_02c.png) no-repeat center center;
		}

	.placeBox{
		width:100%;
		padding:20px 50px;
		display: -webkit-flex;
		display: flex;
	}
		#place_01 .photoBox .photoImg{
			background-image: url(../images/photo_01.jpg);
		}
		#place_02 .photoBox .photoImg{
			background-image: url(../images/photo_02.jpg);
		}
		#place_03 .photoBox .photoImg{
			background-image: url(../images/photo_03.jpg);
		}
		#place_04 .photoBox .photoImg{
			background-image: url(../images/photo_04.jpg);
		}
		#place_05 .photoBox .photoImg{
			background-image: url(../images/photo_05.jpg);
		}
		#place_06 .photoBox .photoImg{
			background-image: url(../images/photo_06.jpg);
		}
		#place_01 .placeInfo .placeName{
			background-image: url(../images/placeName_01.png);
		}
		#place_02 .placeInfo .placeName{
			background-image: url(../images/placeName_02.png);
		}
		#place_03 .placeInfo .placeName{
			background-image: url(../images/placeName_03.png);
		}
		#place_04 .placeInfo .placeName{
			background-image: url(../images/placeName_04.png);
		}
		#place_05 .placeInfo .placeName{
			background-image: url(../images/placeName_05.png);
		}
		#place_06 .placeInfo .placeName{
			background-image: url(../images/placeName_06.png);
		}
		.photoBox{
			position: relative;
			width:320px;
			height:320px;
			min-width:320px;
			min-height:320px;

			-webkit-flex: initial;
          	flex: initial;
			margin-right: 20px;
			-webkit-transition: 0s; /* Safari */
   			transition: 0s;
		}
			.photoImg{
				position: absolute;
				width:100%;
				height:100%;
				background: url(../images/photo_01.jpg) no-repeat center center;
				background-size: 95% 95%;
			}
			.photoFrame{
				position: absolute;
				width:100%;
				height:100%;
				background: url(../images/photoFrame.png) no-repeat center center;
				background-size: contain;
			}
			.leftBox{
				display: none;
			}
			.rightBox{
				margin-left:24px;
				margin-right:0;
				display: block;
			}
		.placeInfo{
			-webkit-flex: initial;
          	flex: initial;
          	margin-top: 30px;
			min-width:200px;
		}
			.placeName{
				position: relative;
				width:175px;
				height:70px;
			}
			.placeText{
				margin-top:20px;
				width:100%;
				padding-left: 4px;
				text-align: justify;
			}
			@media screen and (max-width:799px) {
				.topBtn{
					right:-100px;
				}
				.topImage{
					margin-top:60px;
					width:100%;
					height:300px;
					background: url(../images/topImage.png) no-repeat center 100%;
					background-size:contain;
				}
				.placeBox{
					padding:20px;
					padding-bottom:40px;

					display: block;
				}
					.photoBox{
						margin: 0 auto;
						width: 320px;
						height: 320px;
						min-width: 260px;
						min-height: 260px;
					}
						.leftBox{
							display: block;
						}
						.rightBox{
							display: none;
						}
					.placeInfo{
						float: none;
					}
					.placeName{
						position: static;
						height:70px;
						margin: 0 auto;
					}
					.graphicImg{
						display: none;
					}
			}
			@media screen and (max-width:359px) {
				.photoBox{
					margin: 0 auto;
					width: 100%;
					height: auto;
					min-width: 300px;
					min-height: 300px;
					/*background: #CC0;*/
				}
			}

	.photoSubmit{
		margin-top: 40px;
	}
		.uploadPhotoBtn{
			position: relative;
			display: -webkit-flex;
			display: flex;
			-webkit-align-items: center;
			align-items: center;
			-webkit-justify-content: center;
			justify-content: center;
			cursor: pointer;

	        margin:20px auto;
		}
		.messageBtn{
			height: 50px;
			min-width: 160px;
			box-shadow:0px 5px #c93c51;
    		border-radius: 10px;
    		padding: 6px 6px 6px 0;
    		padding-left: 34px;
    		text-decoration: none;
    		text-shadow: none;
    		margin: 0;
    		display: block;
    		color: #575757;
    		line-height: 24px;
    		font-size: 14pt;
    		font-weight: normal;
    		background: url('../images/facebook-message-button-icon-white2x.png') no-repeat 15px center;
    		background-color: #ef626c;
    		color: white;
    		border-color: #3691da;
    		background-size: 25px 25px;

    		display: -webkit-flex;
			display: flex;
			-webkit-align-items: center;
			align-items: center;
			-webkit-justify-content: center;
			justify-content: center;
			cursor: pointer;
			
		}
			.messageBtn:hover{
				color:#FFF;
				background-color:#ff8d9b;
				box-shadow:0px 5px #ef626c;
			}

		.photoUpload{
			width:190px;
			height:110px;
			background: url(../images/photoUpload.png) no-repeat;
			margin:0 auto;
			margin-top: 20px;
		}

	.enterBtn{
        margin: 0 auto;
        width:160px;
        height:50px;
        background:#bc887e;
        font-size:14pt;
        color:#FFF;
		border: none;
        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 #8e6359;

        overflow: hidden;
    }
        .enterBtn:hover{
        	color:#FFF;
            background:#d89e93;
            box-shadow:0px 5px #b7857b;
            cursor:pointer;
        }
        .enterBtn:active{
            background:#9e6d64;
            box-shadow:0px 5px #7a4841;
        }

    /* ----- Form ----- */
	.sharing_form{
		position: relative;
		width:90%;
		max-width:800px;
		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:90%;
		max-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;
	}

/* 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:100%;
		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:20px;
	}
		.call_for_action_title{
			margin-bottom: 15px;
			font-size: 18pt;
			text-align: center;
			color:#7b5347;
			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:#f3f3f3;
			}
			.col_1_box{ /* Adjust the box height*/
				width:440px;
				height:350px;
			}
			.boxTitle{
				margin-bottom:8px;
				font-size: 14px;
				text-align: center;
			}
			.imageBox{
				width:100%;
				height:180px;
				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: #aa7a6d;
				color:#FFF;
				cursor: pointer;
				-webkit-transition: 0.2s; /* Safari */
	   			transition: 0.2s;
			}
				.actionBtn:hover{
					color:#FFF;
					background: #7b5347;
				}
	@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;
				padding:15px;
				padding-top:8px;
				background-color:#f7f7f7;
			}
	}