@charset "utf-8";
body,div,span,h1,p,a,img,dl,dt,dd {margin:0;padding:0;border:0;vertical-align:baseline;background:transparent;}
img, object, embed, video {
	max-width: 100%;
}
.ie6 img { width:100%; }
/* div, *	 { transition: 0.3s; box-sizing: border-box; } */
html, body{
	background-color: #f896c6 !important;
	color:#000;
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
	position: relative;
}
.loading_mask {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	z-index: 99999;
	background-color: #0a0907;
}
[data-loader=rectangle]{
	width: 10px;
    height: 30px;
    margin: 40vh auto 0;
}
.wrap {
	width: 768px;
	/* min-height: 1800px; */
	max-width: 100%;
	margin: 0 auto;
	position: relative;
	box-sizing: border-box;
	background: url('../img/KV_bg.png') top center no-repeat #f896c6;
	background-size: 100%; 
	overflow: hidden;
}

.turnplate {
    display: block;
    width: 86.2%;
    position: relative;
    margin: 32.2% auto 0;
}
.turnplate canvas.item {
	width:100%;
}
.turnplate img.pointer {
	position: absolute;
	z-index: 9;
    width: 46%;
    left: 27%;
    top: 18%;
}
.game_note {
	width: 90%;
    margin: 18% auto 0;
	color: #201e4f;
}
.game_note h4 {
	width: 100%;
	border-radius: 50px;
	background-color: #ff7cbc;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	padding: 8px 0;
}
.game_note p {
	text-align: center;
	padding: 15px 0 25px;
	font-size: 18px;
}
.game_note ul {
    list-style-type: decimal;
    padding: 15px 15px 20px 35px;
}
.game_note ul li {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 8px;
}

/*--- 燈箱 遊戲結果 ---*/
#youGetit {
	width: 700px;
	max-width: 91%;
	text-align: center;
	position: relative;
	margin: auto;
	background-color: rgba(0,0,0,.5);
    border: 8px solid #f896c6;
    border-radius: 30px;
    color: #fff;
	padding: 20px 5px;
	box-shadow: 2px 2px 15px #000;
}
#youGetit img {
	width: 90%;
}
#youGetit h2 {
	font-size: 1.6em;
    line-height: 1.2em;
    font-weight: 900;
    color: #f3c82e;
    margin-bottom: 10px;
}
#youGetit h5 {
	font-size: 1.5em;
	margin-bottom: 10px;
}
#youGetit h3 {
	font-size: 1.5em;
	margin: 10px 0;
	line-height: 1.2em;
}
#youGetit h4 {
	font-size: 1.5em;
}
#youGetit h4 span {
	color: #f995c6;
}
.btn_box {
	margin: 15px 0 5px;
}
.btn_box .btn, .next-btn {
	display: inline-block;
	padding: 12px 15px 15px;
	border-radius: 10px;
	background-color: #e32432;
	color: #f3c82e;
	font-weight: 700;
	font-size: 1.5em;
	box-shadow: inset 0px 3px 0 rgb(220, 95, 104), inset 0px -5px 0 rgb(201, 14, 28);
	cursor: pointer;
}
#youGetit .mfp-close {
	display: none;
}
.next-btn {
	width: 200px;
	max-width: 80%;
	display: none;
	margin: 20px auto 0;
}
.lose {
	 border: 8px solid #4dca6d !important;
}
.lose h2 {
	color: #4dca6d !important;
}


/* animate in */
.my-mfp-zoom-in .zoom-anim-dialog {
	opacity: 0;
	-webkit-transition: all 0.2s ease-in-out; 
	-moz-transition: all 0.2s ease-in-out; 
	-o-transition: all 0.2s ease-in-out; 
	transition: all 0.2s ease-in-out;
	-webkit-transform: scale(0.8); 
	-moz-transform: scale(0.8); 
	-ms-transform: scale(0.8); 
	-o-transform: scale(0.8); 
	transform: scale(0.8); 
}
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
	opacity: 1;
	-webkit-transform: scale(1); 
	-moz-transform: scale(1); 
	-ms-transform: scale(1); 
	-o-transform: scale(1); 
	transform: scale(1); 
}
 /* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
	-webkit-transform: scale(0.8); 
	-moz-transform: scale(0.8); 
	-ms-transform: scale(0.8); 
	-o-transform: scale(0.8); 
	transform: scale(0.8);
	opacity: 0;
}
/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
	opacity: 0;
	-webkit-transition: opacity 0.3s ease-out; 
	-moz-transition: opacity 0.3s ease-out; 
	-o-transition: opacity 0.3s ease-out; 
	transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
	opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
	opacity: 0;
}

/*--- 共用 ---*/
.over-hide { overflow: hidden; }
.nomargin  { margin: 0 !important; }

.photo_wrap img, .step-wrap img, .step-3point img, .recipe-wrap img, ul.buy-A-pd img, ul.buy-B-pd img {
	width: 100%;
}

@media only screen and (max-width: 480px) {
	.game_note h4 	{ font-size: 1.5rem; }
	.game_note p 	{ padding: 10px 0 15px; }
	.game_note p, .game_note ul li	{ font-size: 16px; line-height: 22px; }
	/* .btn_box .btn 	{ font-size: 1rem; } */
}

@media only screen and (max-width: 320px) {

}