@charset "utf-8";
/* CSS Document */


body{
	margin: 0;
	padding: 0;
	font-family: '微軟正黑體';}

img{border: 0;}

	/* Header */

.header{background-image:url("../images/header.png");}

.LogoArea{
	height: 70px;
	line-height: 70px;
	margin: 0 auto;
	width: 100%;
}
 .logo{
	display:inline-block;
	vertical-align: baseline;
	padding-right: 20px;}



	/* 主標 */

.container{
	position: relative;
	text-align:center;
	margin: 0 auto;}

.forPaddingSpace{padding:0 2%;}

.mainTitle{
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 640px;
	background: url("../images/BG.png") no-repeat center;}

.plant{
	position: inherit;
	top:66px;	
	margin: 0 auto;
	background: url("../images/plant.png") no-repeat center;
	background-size: contain;
	width: 90%;
	min-height: 380px;}
  
.title{
	position: absolute;
	top:60px;
	background: url("../images/title.png") no-repeat center;
	background-size: contain;
	width: 100%;
	height: 274px;
	animation-delay: 0.5s;}


.fork_knief{
	position: absolute;
	top:60px;
	background: url("../images/fork_knief.png") no-repeat center;
	background-size: contain;
	width: 100%;
	height: 383px;}

.time{
	position: relative;
	margin: 0 auto;
	top: 330px;
	background: url("../images/time.png") no-repeat center;
	background-size: contain;
	width: 100%;
	height: 143px;
	animation-delay: 1.5s;}

.subtitle{
	position: absolute;
	top: 300px;
	background: url("../images/subtitle.png") no-repeat center;
	background-size: contain;
	width: 100%;
	height: 110px;
	transition: 400ms;
	animation-delay: 1s;}

	/*獎品區*/

.prizesArea, .stepsArea, .howToJoinArea, .notice{
	margin: 0 auto;
	padding: 1%;
	width: 97%;
	border-radius: 20px;
	background-color: #fff8d8;
	margin-bottom: 30px;}


.prizesHere{
	position: relative;
	margin: 0 auto;
	top:-50px;
	background: url("../images/prizeHere.gif") no-repeat center;
	background-size: contain;
	height: 102px;
	animation-delay: 0.5s;}

.prizes1, .prizes2{
	position: relative;
	top:-50px;
	display: inline-block;
	width: 48%;
	min-height:304px;
	transition: 500ms;}

.prizes1{background:url("../images/afternoon.png") no-repeat center;background-size: contain;animation-delay: 0.8s; }
.prizes2{background:url("../images/breakfast.png") no-repeat center;background-size: contain;animation-delay: 1s; }

	/*步驟區*/

.stepsArea{overflow: hidden;}
.stepsImg{margin:0 10px 20px 0;}

.steps{
	position: relative;
	display: inline-block;
	margin:30px 30px 30px 0;
	background-size: contain;
	width: 173px;
	height: 142px;
	z-index: 1;
}

.steps::before{
	content: '';
	position: absolute;
	width: 71px;
	height: 51px;
	background:url("../images/arrows.png") no-repeat center;
	background-size: 70%;
    right: -44px;
    top: 50px;
	transition: 500ms;}

.steps1{background:url("../images/step1.png") no-repeat center;background-size: contain;animation-delay: 0.3s;}
.steps2{background:url("../images/step2.png") no-repeat center;background-size: contain;animation-delay: 0.4s;}
.steps3{background:url("../images/step3.png") no-repeat center;background-size: contain;animation-delay: 0.5s;}
.steps4{background:url("../images/getChance.png") no-repeat center;background-size: contain;animation-delay: 0.6s;}

	/*移除第4步驟箭頭*/
.steps4::before{
	content: '';
	background:url("") no-repeat center;}

.screenshot{
	position: absolute;
	width: 164px;
	height: 83px;
	background:url("../images/screenshot.png") no-repeat center;background-size: contain;
	top: -40px;
    left: 45px;
    z-index: 1;
	cursor: pointer;}

	/*按鈕下間距*/
.joinNow{padding-bottom: 30px;}


	/*活動說明*/

h1{
	font-size: 1.6em;
	padding-left: 5%;
	letter-spacing: -1px;
	color: #44a18e;	
	font-weight: 700px;
	text-align: left;
}

ul li, ol li{
	line-height: 1.7em;
	text-align: left;
	font-weight: 600;
	font-size: 1em;}

.rules{padding: 0 5%;}

footer{
	font-family: '微軟正黑體';
	font-size: 1.1em;	
	text-align: center;
	font-weight: 600;
	padding: 20px;
	/*border-top: solid 20px #007C7C;*/}


/* 操作畫面彈跳窗*/

.popUp1{
		display: none;
		position: fixed;
		width: 100%;
		top: 10%;
		left: 0;
		z-index: 9999;
		text-align: center;}

.popUpPic{
		margin: 0 auto;
		text-align: center;
		width: 65%;
		border-radius: 20px;
		position: relative;
		background: #fff;
		padding: 20px 50px;
		-webkit-box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
		box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);	}

.closeBtn{
		width: 70px;
		margin: 10px auto;
		display: inline-block;
		color: #fff;
		background: #45a19a;
		padding: 5px 20px;
		cursor: pointer;
		font-family: '微軟正黑體';
		font-size: 1.1em;
		line-height: 2em;
		border-radius: 34px;
		-webkit-box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.2);
		box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.2);
		transition: 250ms;}

.closeBtn:hover{
		-webkit-box-shadow:  0px 1px 2px 1px rgba(0, 0, 0, 0.0);
		box-shadow:  0px 1px 2px 1px rgba(0, 0, 0, 0);}


.screenshot1{
	width: 100%;
	margin-top: 25px;
	min-height: 65vh;
	background:url("../images/screenshotPC.png") no-repeat center;
	background-size: contain;
	transition: 400ms;}

	/* TO TOP */

.btnTop{
	background-color: rgba(0,193,140,1.00);
	width:60px;
	height: 60px;
	position: fixed;
	bottom: 5%;
	text-align: center;
	padding: 0 auto;
	right: 5%;
	border-radius: 50%;
	z-index: 9999999;
	-webkit-box-shadow:  0px 4px 4px 1px rgba(138, 125, 125, 0.5);
	box-shadow:  0px 4px 4px 1px rgba(138, 125, 125, 0.5);
	transition: 400ms;
}

.btnTop::after{
	content: '︿';
    position: absolute;
    display: inline-block;
    left: 0;
    width: 60px;
    height: 60px;
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
    font-size: 2em;
    font-weight: 600;
    color: #fff;}

.btnTop:hover{
	background-color: rgb(255, 203, 0);
	-webkit-box-shadow:  0px 0px 0px 0px rgba(138, 125, 125, 0);
	box-shadow:  0px 0px 0px 0px rgba(138, 125, 125, 0);	
}

.cno{
	text-align: center;
	width: 100%;
	color: #fff;
	display: block;	
	background: #007C7C;
	font-family: '微軟正黑體';
	font-size: 1em;	
	line-height: 30px;
	letter-spacing: 1px;
	right: 0px;
}



@media screen and (min-device-width: 1000px){
	.container, .LogoArea{width: 1000px;}	
	footer{padding: 0px;line-height: 50px;}}

@media screen and (max-device-width: 460px){
	.title{background-size: 70%;}}

@media screen and (max-device-width: 600px){
	.subtitle{
		background: url("../images/subtitleM.png") no-repeat center;
		background-size: contain;}
	
	.time{width: 90%;}
	.prizes1, .prizes2{width: 90%;}
	
	.stepsImg{width: 70%;}
	
	.steps{display: block; margin: 0 auto;margin-bottom: 40px;margin-top: 20px;}
	.steps::before{
		background:url("../images/arrows.png") no-repeat center;
		transform:rotate(90deg);
		background-size: 70%;
		right: 49px;
		top: 135px;}
	
	.steps4::before{background:url("") no-repeat center;}	
	.screenshot{
		width: 135px;
		height: 85px;
		background-size: contain;
		top: -25px;
		left: 100px;}
	
	.screenshot1{background:url("../images/screenshotM.png") no-repeat center;
	background-size: contain;}
	.prizes1, .prizes2{animation-delay: 0s;}
	
	footer{line-height: normal;padding: 3%;}
	
	.btnTop{
		bottom: 3%;
		background-color: rgba(0,193,140,1.00);
		width: 50px;
		height: 50px;}
	
	.btnTop::after{
		width: 50px;
		height: 50px;
		font-size: 32px;
		top:-5px;
	}
}
	
@media screen and (max-device-width: 360px){
	.ebuy{width:120px; }
	.menuCell ul li {font-size: 1.2em;}
}