@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; outline: none; }
html, body{
	background-color: #ffb74f !important;
	color:#000;
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
	position: relative;
	font-size: 16px;
}
.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;
	max-width: 100%;
	margin: 0 auto;
	position: relative;
	box-sizing: border-box;
}
.top_KV {
	position: relative;
	margin-bottom: -3px;
}
.absolute {
	position: absolute;
	top: 0;
	left: 50%;
	right: 50%;	
}
.game_info {
	z-index: 5;
	width: 22%;
    margin: 106.5% 0 0 26%;
}
.in_01 {
	z-index: 1;
	width: 81%;
	margin: 4% 0 0 -43.5%;
}
.in_02 {
	z-index: 2;
	width: 45.5%;
	margin: 115% 0 0 -22.75%;
	cursor: pointer;
}

.ani {
	z-index: 2;
	width: 75.2%;
	margin: 30% 0 0 -39%;
}
.ani img {
	-webkit-transform: rotate(0deg);
	-webkit-transform-origin: 50% 100%;
	animation: boxman_swing 1.0s ease-in-out;
	animation-iteration-count: 3;
	animation-delay: 1s;
}
	@keyframes boxman_swing {
		0%, 90% {
			-webkit-transform: rotate(0deg);
		}
		22.5% {
			-webkit-transform: rotate(-8deg);
		}
		45% {
			-webkit-transform: rotate(0deg);
		}
		67.5% {
			-webkit-transform: rotate(8deg);
		}


	}
.win_01 {
	width: 100%;
	z-index: 2;
	margin: 3% 0 0 -50%;
}
.win_02 {
	width: 100%;
	z-index: 1;
	margin: 13% 0 0 -50%;
}
.win_03 {
	width: 100%;
	z-index: 3;
	margin: 69% 0 0 -50%;
}
.win_btn {
	width: 69%;
    z-index: 3;
    margin: 114.5% 0 0 -34%;
}
.win_btn li {
	width: 40%;
	display: inline-block;
	cursor: pointer;
}
.win_btn li:nth-child(1) {
	margin-right: 10px;
}
.win_text {
	width: 100%;
	z-index: 3;
	margin: 83% 0 0 -50%;
	text-align: center;
	color: #502b1f;
}
.win_text p {
	font-size: 24px;
}
.win_text h3 {
	font-size: 36px;
	margin: 10px 0 15px;
    line-height: 40px;
}
.win_text h4 {
	font-size: 28px;
    width: 30%;
    margin: auto;
    background: #ffb74f;
    padding: 8px 0;
    border-radius: 8px;
}
.win_text h4 span {
    color: #cc0410;
}
.lose_01 {
	width: 100%;
	z-index: 1;
	margin: 27% 0 0 -50%;
}
.lose_02 {
	width: 100%;
	z-index: 2;
	margin: 84% 0 0 -50%;
}
.hide_ani {
	animation-name: fadeOut;
	animation-delay: 4.1s;
}
.show_ani {
	animation-name: fadeIn;
	animation-delay: 1s;
}
.ani, .win, .lose {
	display: none;
}

/*--- 商品 ---*/
.section {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.section img {
	width: 100%;
}
.subtitle {
    text-align: center;
}
.subtitle h3 {
	z-index: 1;
	margin: 0 0 0 -50%;
	width: 100%;
	color: #fff;
    font-size: 3em;
    line-height: 1.9em;
}
.section ul {
	padding: 7px;
}
.section ul li {
	background-color: #fff;
	width: calc(100% / 2 - 3px);
	float: left;
	margin-bottom: 5px;
	padding: 8px;
}
.section ul li:nth-child(even) {
	float: right;
}
.section ul li img {
	display: block;
	width: 100%;
}
.section .hot {
	text-align: center;
	color: #fff;
	background-color: #ff1c02;
    padding: 5px 3px;
    font-size: 1.1em;
}
.section .pd_title, .section h4 {
	text-align: center;
	padding: 5px 3px;
	font-size: 1.1em;
	color: #515151;
}
.section h4 {
	padding-bottom: 0;
}
.section span.hot_price {
	color: #d00;
    font-size: 1.8em;
    font-weight: 800;
}
.section span.hot_price small {
	font-weight: normal;
	font-size: 80%;
}
.section span.buy {
	background-color: #d00;
    color: #fffa1e;
    font-size: 1em;
    padding: 3px 5px;
    vertical-align: 3px !important;
    border-radius: 4px;
}
.anchor {
	top: 62%;
    color: #fff;
    z-index: 999;
    width: 1px;
}




/*--- 燈箱 活動辦法 ---*/
#game-popup {
	position: relative;
	background: #fff8ee;
	color: #262626;
	padding: 20px;
	width: auto;
	max-width: 95%;
	margin: 20px auto;
	border-radius: 20px;
}
#game-popup h2 {
	width: 100%;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 15px;
    color: #262626;
    border-bottom: 1px solid #c4c4c4;
    border-top: 1px solid #c4c4c4;
    padding: 10px 0;
}
#game-popup h2:nth-child(1) {
	border-top: 0;
	padding-top: 0;
	line-height: 1.2em;
}
#game-popup ul {
    list-style-type: decimal;
    margin: 10px 0 20px 20px;
}
#game-popup ul li {
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 8px;
}
#game-popup .mfp-close {
	color: #262626;
}

/* 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; }
.hide 	   { display: none !important; }
.top_KV img {
	width: 100%;
	display: block;
}
@media only screen and (max-width: 767px) {
	.win_text 		{ margin-top: 82%; }
	.win_text p 	{ font-size: 3.5vmin; }
	.win_text h3 	{ font-size: 5vmin; line-height: 6vmin; margin: 1.3vmin 0 1.0vmin; }
	.win_text h4 	{ font-size: 4vmin; padding: 5px 0 3px; width: 32%; }
	.subtitle h3 	{ font-size: 6.5vmin; line-height: 10.8vmin; }
	.section .pd_title 				{ padding-bottom: 3px; }
	.section .hot, .section .pd_title, .section h4 	{ font-size: 3.5vmin; }
	.section span.hot_price 		{ font-size: 6vmin; }
	.section span.hot_price small 	{ font-size: 4vmin; }
	.section span.buy 				{ font-size: 12px; }
}
@media only screen and (max-width: 480px) {
	.subtitle h3 	{ font-size: 1.9em; line-height: 1.8em; }


}
@media only screen and (max-width: 450px) {
	.subtitle h3 	{ font-size: 1.5em; line-height: 1.8em; }


}

@media only screen and (max-width: 350px) {
	.subtitle h3 	{ font-size: 1.2em; line-height: 2em; }
}