@charset "UTF-8";
/* CSS Document */
body {background-color:#FFEECA; font-family:'Titillium Web', "Microsoft JhengHei", "微軟正黑體", "apple LiGothic Medium",  Lucida Grande, Verdana, Geneva, sans-serif;}
.textarea { 
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

/* This parent can be any width and height */
.block {
  text-align: center;
}
 
/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
/*  background: #808080; width: 5px;*/
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
/*  width: 100%;*/
}

h1 {color:#8A3F0D; font-size:2em; font-weight: 800;  line-height:1.4em;}
FL { float:left;}
body, #contentwrapper, #wrapper, .contentbox, .stepbox, .details, .comingsoon  { margin:0 auto;}
#contentwrapper { font-size:1em;}
#contentwrapper, #game {width:100%;}
#game { 
    margin:0 auto;
    width:75%; 
    background-color:#FFF; 
    padding:5% 5% 10% 5%; 
    -webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.5);
    -moz-box-shadow:    2px 2px 5px 0px rgba(50, 50, 50, 0.5);
    box-shadow:         2px 2px 5px 0px rgba(50, 50, 50, 0.5); 
    border-radius: 10px;
}
#wrapper { min-width:760px; max-width:1250px;}
.KV {margin-left:-9%; padding:20px 0 3em 0;}
.KV img {max-width: 1223px;}

.contentbox { width:75%; letter-spacing:1px; line-height:1.5em; font-size:1.6em; color:#5e5e5e; padding-bottom:3em; text-align: center;}
.contentbox p { font-size: 1em; font-weight: 400; line-height: 1.6em}

.stepbox {width:100%; font-size:2.2em; font-weight:900; }
.step1BG, .step2BG, .step3BG, .step4BG, .prizeBG { position:relative; z-index:-1; }
.step1BG { margin-top:-5.2em;}
.step2BG { margin-top:-5em;}
.step3BG { margin-top:-6.1em;}
.step4BG { margin-top:-2.3em;}
.QR {position: absolute; left:50%; margin:-3.5em 0 0 5em;}
.QR img {width: 117px;}
.btn_app { position: relative; z-index:100; width: 100%; margin-top:0.5em;}
.btn_app img {height:1.5em; padding:0.1em;}
.details { width:420px; font-size:0.7em; color:#363636;  font-weight: 200; line-height: 1.5em; padding:0.5em;}
.step1, .step2, .step3 {text-align: center;  color:#000; font-weight:900;  width:100%;  max-width:700px; border-radius: 10px; margin-bottom:10px;}
 .step2, .step3 { padding:10px 100px; }
.step1 { height: 370px; background: url(../images/iphone-graphic.jpg) no-repeat; background-position: center center; background-size: 100% auto;}
.download { padding-top:100px; text-align: center;}
.step2 {background-color:#F6921E;}
.step3 {background-color:#DE5321;}
.stepbox h3 { font-size: 1em; line-height: 1.3em;}
.snap-prize {  width:80%; background: url(../images/bookBG.jpg) repeat-y; background-size: 100% auto;  margin: 0 auto;  }


.snap-prize p { margin:0 !important; width:500px; font-size: 1.8em; line-height:1.5em; color:#666666; padding:20px;}

.H-prize { margin-top:50px; width:500px; padding:10px; font-size:3em; font-weight:900; color:#FFF }

#OR_FOOT span span img {height:80px;}

@media only screen and (max-width : 768px) {
	#contentwrapper { font-size:0.8em;}
	#OR_FOOT {bottom:0;}
	#OR_FOOT span span img {height:1px;}

}

@media only screen and (min-width : 768px) and (max-width : 900px) {
	#contentwrapper { font-size:0.8em;}
}

@media only screen and (min-width : 900px) and (max-width : 1100px) {
	#contentwrapper { font-size:0.9em;}
}