html,body{
	margin:0;
	padding:0;
	overflow-x:hidden;
}
body{
	background:url('../images/bg.jpg') no-repeat center 0;
	font-family: "微軟正黑體", arial;
}
.pr0.messageContainer{
	padding-right:0;
}
.mobile{
	display:none;
}
.logo{
	position:absolute;
	top:10px;
	left:10px;
	width:36%;
	z-index:10;
}
.righttab{
	position:absolute;
	top:10px;
	right:0;
	text-align:right;
	z-index:6;
}
.righttab .bottom{
	margin-top:-5px;
	padding-right:7px;
}
.righttab .bottom img{
	width:54px;
}
.FrameContainer{
	max-width:1200px;
	margin:0 auto;
	padding-top: 20px;
}
.mainContainer{
	position:relative;
	padding-top:40px;
}
.messageContainer {
	margin:0;
	padding:0 15px 0 0;
}

.emojiContainer {
	margin:0;
	padding:15px 0 0 0;
	border-top:1px solid #94D9F8;
}

a.emoji {
	margin:0 2.2% 0 0;
	padding:0;
}

a.emoji img {
	margin-top:20px;
	width:4.23%;
	-webkit-user-select: none;  
	-moz-user-select: none;    
	-ms-user-select: none;      
	user-select: none;
	cursor:pointer;  
}
a.emoji img:hover {
	background-color:#f5e0bb;
}
.emojimsg {
	width:36px;
}
.middletab{
	padding:0 12px;
}
.editorBorder {
	background:#ffffff;
	margin:0 auto;
	padding: 30px 3%;
	/*border:1px solid #888;*/
	border-radius: 25px;
	-webkit-box-shadow: 3px 3px 8px 0px rgba(148,148,148,1);
	-moz-box-shadow: 3px 3px 8px 0px rgba(148,148,148,1);
	box-shadow: 3px 3px 8px 0px rgba(148,148,148,1);
	max-width:1200px;
	position:relative;
}
.editorBorder img.msg_arrow {
	position:absolute;
	bottom:25px;
	right:-35px;
}

#editor, #preview {
	margin:0;
	padding:0;
	width:100%;
	height:120px;
	overflow-y:auto;
	outline:0;
	font-size:24px;
}
#preview{
	border-right:1px solid #94D9F8;
}

.previewContainer {
	margin:0 auto;
	padding:10px 15px 0 20px;
	position:relative;
	max-width: 1200px;
	z-index:10;
}
.previewContainer.finished{
	min-height: auto;
	margin-bottom:20px;
	margin-top:50px;
}

.previewRow {
	margin:0;
	padding:0;
}
.previewRow:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.previewColLeft {
	margin:0;
	padding:0;
	float:left;
	width:80%;
}
.previewColRight {
	margin:0;
	padding:0;
	float:left;
	width:20%;
	text-align:center;
	min-height:100px;
}
.previewColRight p {
	margin:0;
	padding:0;
}
.previewColRight p a {
	margin:0;
	padding:23px 0 0 0;
	text-decoration:none;
	color:#000;
	
}

a.thumb {
	margin:0 2.2% 0 0;
	padding:0;
}

a.thumb img {
	margin-top:20px;
	width: 4.23%;
	-webkit-user-select: none;  
	-moz-user-select: none;    
	-ms-user-select: none;      
	user-select: none;
	cursor:pointer;  
}
a.thumb img:hover {
	background-color:#f5e0bb;
}

.thumbnailSelector {
	margin:20px 0 0 0;
	padding:20px 15px 30px 15px;
	position:relative;
	/*position:absolute;
	right:40px;
	bottom: 0;*/
	max-width: 1110px;
	z-index:3;
	border-radius: 25px;
	-webkit-box-shadow: 3px 3px 8px 0px rgba(148,148,148,1);
	-moz-box-shadow: 3px 3px 8px 0px rgba(148,148,148,1);
	box-shadow: 3px 3px 8px 0px rgba(148,148,148,1);
	background-color:#fff;
}
.thumbnailImg {
	margin:0;
	padding:10px 0 0 0;
	max-width:100px;
	width:100%;
}
.info_message{
	width:600px;
	margin:0 auto;
	z-index:4;
}
.info_message .icon{
	vertical-align:middle;
	padding:0 2px;
}
.info_message p{
	color:#EE7D00;
	font-size:22px;
}
.content{
	position:relative;
	margin-top:60px;
	min-height:486px;
}
.bottom_content2{
	position: relative;
	margin-top: -63px;
	min-height: 644px;
}
.startbutton{
	position:absolute;
	top: 10px;
	right:40px;
	z-index:5;
	transition: all .2s ease-in-out;
}
.startbutton:hover { transform: scale(1.05); }
.startbutton img{
	width:243px;
}
.home_msg{
	position:absolute;
	top: -45px;
	left:0;
	z-index:3;
}
.bubble_con{
	position:absolute;
	top: 200px;
	left: 0;
	width:300px;
}
.bubble_msg{
	position:absolute;
	bottom: 0;
	left: 0;
}
.graphic_content{
	text-align:right;
}
.temple_msg{
	position:absolute;
	top: 340px;
	right: 0;
}
.farmer_con{
	position:absolute;
	top: 123px;
	left: 5px;
	width:510px;
}
.farmer{
	position:absolute;
	top: 110px;
	left: 35px;
}
.align-right{
	text-align:right;
}
.pr{
	position:relative;
}
.student_con{
	position:absolute;
	top: 64px;
	left: 536px;
	width:299px;
}
.student{
	position:absolute;
	top: 120px;
	left: 0px;
}
.donate_con{
	position: absolute;
	top: 86px;
	right: 77px;
	width: 370px;
}
.donate{
	position:absolute;
	top: 120px;
	left: 0px;
}
.doctor_con{
	position: absolute;
	bottom: 36px;
	right: 0;
	width: 280px;
}
.doctor_msg{
	position:absolute;
	top: -73px;
	left: 45px;
}
.align-center{
	text-align:center;
}
.final_button{
	display:none;
}
.final_button #btnSubmit{
	padding-right:1%;
}
.final_button #btnBack{
	padding-left:1%;
}
.title_con{
	position:relative;
	margin-top:80px;
	padding-left:30px;
}

.title_con.title_con2{
	margin-top:115px;
}
.bubble2_con{
	position:absolute;
	top: 55px;
	right: 45px;
	width:310px;
}
.bubble2_msg{
	position:absolute;
	bottom: 0;
	left: 0;
}
.zindex2{
	z-index:2;
}
.bottom_content{
	background:url('../images/footer_bg.png') no-repeat center 0;
}
.bottom_content .mainContainer{
	position:relative;
	min-height:680px;
	padding-top:0;
}
.msg_left{
	position:absolute;
	top: -160px;
	left: 0;
}
.msg_right{
	position:absolute;
	top: -120px;
	right: -28px;
}
.top_arrow{
	top: -74px;
	position: absolute;
	right: 64px;
}
.boxtable{
	display:table;
	height:105px;
	width: 100%;
}
.boxcell{
	display: table-cell;
	vertical-align: middle;
}
.share_two{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width:560px;
}
.popwidth{
	width:551px;
	margin:0 auto;
	z-index:5;
}
.thankyouContainer .popwidth{
	width:921px;
}

.thankyouContainer .share_two p{
	margin-bottom:0;
}
#shareFb{
	padding-right:1%;
}
#shareWhatsapp{
	padding-left:1%;
}
.button_area, .final_button, .shareContainer{
	margin-top:20px;
}

.float{
	transform: translatey(0px);
	animation: float 4s infinite linear;
}
.float2{
	transform: translate(0,0);
	animation: float2 5s infinite linear;
}
.updown{
	transform: translate(0,0);
	animation: updown 6s infinite ease-in;
}
.leftright{
	transform: translate(0,0);
	animation: leftright 4s infinite ease-in;
}
.rightleft{
	transform: translate(0,0);
	animation: rightleft 4s infinite ease-in;
}
.thankyou_content, .step_con{
	text-align:center;
}

.sharemsg{
	width: 100%;
	max-width:253px;
}
.sharemsg2 {
	width: 100%;
	max-width:544px;
}
.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 350px;
  margin: 20px auto;
  border-radius: 15px;
	-webkit-box-shadow: 3px 3px 8px 0px rgba(148,148,148,1);
	-moz-box-shadow: 3px 3px 8px 0px rgba(148,148,148,1);
	box-shadow: 3px 3px 8px 0px rgba(148,148,148,1);
}
.white-popup p {
	word-wrap: break-word;
}
.input-group {
	display:table;
}
.copyLink {
	margin:0;
	padding:5px;
	display:table-cell;
	position:relative;
	width:100%;
	min-height:34px;
}
.copy {
	width:1%;
	display:table-cell;
	vertical-align:middle;
}
.imgCopy {
	margin:0;
	padding:0;
	width:28px;
	
}
.copied {
	margin:0;
	padding:5px 0 0 0;
	text-align:center;
	display:none;
}

/*Animation*/
@keyframes float {
	0%{
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-5px);
		-moz-transform: translateY(-5px) rotate(0.02deg);
	}
	100% {
		transform: translatey(0px);
	}
}
@keyframes float2 {
	0%{
		transform: translate(0,0);
		
	}
	50% {
		transform: translate(7px,-7px);
		-moz-transform: translate(7px,-7px) rotate(0.02deg);
	}
	100% {
		transform: translate(0,0);
	}
}
@keyframes updown {
	0%{
		transform: translateY(0);	
	}
	50% {
		transform: translateY(-7px);
		-moz-transform: translateY(-7px) rotate(0.02deg);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes leftright {
	0%{
		transform: translateX(0);
		-moz-transform: translateX(0) rotate(0.02deg);
		
	}
	50% {
		transform: translateX(-7px);
		-moz-transform: translateX(-7px) rotate(0.02deg);
	}
	100% {
		transform: translateX(0);
		-moz-transform: translateX(0) rotate(0.02deg);
	}
}
@keyframes rightleft {
	0%{
		transform: translateX(0);
	}
	50% {
		transform: translateX(7px);
		-moz-transform: translateX(7px) rotate(0.02deg);
	}
	100% {
		transform: translateX(0);
	}
}
@media (min-width:1200px) {
	.previewContainer{
		min-height: 640px;
	}
}
@media (max-width:1199px) {
	.top_arrow{
		width: 50px;
		top: -35px;
	}
	.top_arrow img{
		width: 100%;
	}
	.righttab .top{
		display:none;
	}
	.logo img, .righttab img, .step_con img, .thankyou_content img{
		width:100%;
	}
	.title_con img, .footer_mobile img{
		width:100%;
	}
	.righttab{
		width: 50%;
	}
	.FrameContainer{
		padding:25px;
	}
	.info_message{
		width: 70%;
		margin: 0 0 0 30%;
	}
	.startbutton img{
		width:352px;
	}
	.startbutton{
		text-align: right;
		position:unset;
	}
	.desktop{
		display:none;
	}
	.bubble_con{
		top:300px;
	}
	.mobile{
		display:block;
	}
}

@media (max-width:960px) {
	.popimg, .thankyouContainer .popwidth{
		width:100.8%;
	}
	.share_two{
		width: 50%;
	}
	.button_small{
		width:100px;
	}
	.previewColLeft{
		width:62%;
	}
	.previewColRight{
		padding:0 5%;
		width: 28%;
	}
	.top_arrow{
		right:14%;
	}
}
@media (max-width:768px) {
	.previewContainer.finished{
		margin-top:20px;
	}
	.logo{
		width:47%;
	}
	a.emoji img {
		width:8%;
	}
	a.thumb img {
		width:8%;
	}
	.righttab{
		width: 50%;
	}
	.righttab .bottom{
		padding-right:0;
	}
	.title_con.title_con2{
		margin-top:70px;
	}
	.middletab{
		padding:0 7px;
	}
	#btnSubmit img, #btnBack img{
		width: 45%;
	}
}

@media (max-width:550px) {
	.messageContainer{
		padding: 0 20px 0 0;
	}
	.middletab{
		padding:0 5px;
	}
	.sharemsg{
		width: 50%;
	}
	.share_two{
		width:100%;
	}
	.mainContainer .title_con{
		margin-top:50px;
	}
	a.thumb , a.emoji{
		margin: 0 2.3% 0 0;
		padding: 0;
	}
	#btnPreview img{
		width:50%;
	}
	.previewContainer.done{
		min-height: auto;
	}
	.button_small{
		width:52px;
	}
	.final_button{
		padding:0;
	}
	.top_arrow img{
		width:40px;
	}
	.top_arrow {
		top: -28px;
		right: 35px;
	}
	.previewContainer{
		padding: 10px 20px 0 0px;
	}
	.previewColRight p a{
		font-size:13px;
	}
	.startbutton{
		padding: 0 14% 0 20%;
	}
	.bubble_msg{
		position:unset;
	}
	.startbutton img, .bubble_con img, .final_button img, .popimg img{
		width:100%;
	}
	.popwidth{
		width:106%;
	}
	.bubble_con{
		width:20%;
	}
	.info_message p{
		font-size:18px;
	}
	.info_message{
		width: 100%;
		margin: 0;
	}
	.content{
		margin-top:20px;
	}
	.home_msg{
		display:none;
	}
	.logo{
		width: 55%;
		left:0;
	}
	.righttab{
		right:0;
	}
	.title_con, .righttab .bottom{
		margin-top:0;
		padding:0;
	}
	.FrameContainer{
		padding:10px 15px 15px 15px;
	}
	.righttab .bottom img{
		width:32px;
	}
	.editorBorder {
		padding:10px 5%;
	}
	a.emoji img {
		width:21%;
	}
	a.thumb img {
		width:21%;
	}
	.sharemsg2 {
		width:60%;
	}
}

@media (max-width:340px) {
	.bubble_con {
		top:410px;
	}
}