@charset "UTF-8";
*, *:before, *:after {
	box-sizing: border-box;
}
div, a {
	/*border: .5px solid rgba(255,0,0,.9);*/
}
html {
	height: 100%;
	font-size: 100%;
}
body {
	height: 100%;
	font-family: Arial,"Heiti TC","微軟正黑體","Microsoft JhengHei","新細明體","PMingLiU",sans-serif;
	letter-spacing: 1px;
	/*background: #600;*/
}
a {
	color: #fff;
	text-decoration: none;
}
/* page 背景設定 */
#index, #main {
	background: url('../images/bg_index.jpg') scroll no-repeat top center;
	background-size: contain;
}
#invoice {
	background: url('../images/bg_invoice.jpg') scroll no-repeat top center;
	background-size: contain;	
}
#playFront {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url('../images/bg_play1.jpg') scroll no-repeat top center;
	background-size: contain;	
}
#play {
	background: url('../images/bg_play2.jpg') scroll no-repeat top center;
	background-size: contain;	
}
#rule {
	background: #3e0c0f url('../images/bg_rule.jpg') scroll no-repeat top center;
	background-size: contain;
}
#prod {
	background: #3e0c0f url('../images/bg_products.jpg') scroll no-repeat top center;
	background-size: contain;
}
#winner {
	background: url('../images/bg_sendform.jpg') scroll no-repeat top center;
	background-size: contain;
}
#game {
	background: #000;
}
.page {
	width: 100%;
	min-width: 320px;
	max-width: 480px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

/*.bg {
	display: block;
	width: 100%;
	visibility: hidden;
}*/
header {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 60px;
	z-index: 910;
}
.logo {
	position: absolute;
	left: 25px;
	top: 22px;
	width: 110px;
}
.logo img {
	width: 100%;
}
/* nav Icon */
#navIcon {
	position: absolute;
	top: 5px;
	right: 10px;
	width: 48px;
	height: 48px;
	cursor: pointer;
}
#navIcon span {
	display: block;
	position: absolute;
	height: 3px;
	width: 24px;
	background: #fff;
	opacity: 1;
	left: 12px;
	-webkit-transform: rotate(0deg);
	        transform: rotate(0deg);
	transition: .25s ease-in-out;
}
#navIcon span:nth-child(1) {
	top: 16px;
}
#navIcon span:nth-child(2),#navIcon span:nth-child(3) {
	top: 22px;
}
#navIcon span:nth-child(4) {
	top: 28px;
}
#navIcon.open span:nth-child(1) {
	top: 22px;
	width: 0%;
	left: 50%;
}
#navIcon.open span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
}
#navIcon.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}
#navIcon.open span:nth-child(4) {
	top: 22px;
	width: 0%;
	left: 50%;
}
/*navi*/
nav {
	display: none;
	position: absolute;
	left: 0;
	top: 40px;
	width: 100%;
	z-index: 900;
}
#mask {
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	height: 2000%;
	background: rgba(0,0,0,.5);
}
#navTop, #navBottom {
	display: block;
	width: 100%;
}
nav ul {
	background: #fff;
}
nav a {
	display: block;
	padding: 14px 0;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	color: #a72432;
}
/*index*/
#yushanDaqu {
	position: absolute;
	left: 50%;
	top: 9%;
	width: 80%;
	margin-left: -40%;
	z-index: 10;
}
#yushanDaqu img {
	display: block;
	width: 100%;
}
#ask {
	position: absolute;
	left: 0;
	top: 35%;
	width: 100%;
	text-align: center;
	color: #fff;
	font-size: 20px;
}
#askBtn {
	position: absolute;
	left: 0;
	top: 43%;
	width: 100%;
	text-align: center;
	color: #fff;
	font-size: 20px;
}
#askBtn a {
	position: absolute;
	top: 0;
	font-size: 24px;
}
#btnYes {
	right: 57%;
}
#btnNo {
	left: 57%;
}
/*main*/
#mainball {
	position: absolute;
	left: 50%;
	top: 49%;
	width: 60%;
	margin-left: -30%;
	z-index: 10;
}
#mainball img {
	display: block;
	width: 100%;
}
.select-box {
	position: absolute;
	top: 30%;
	width: 45%;
	height: 110px;
	color: #fff;
	font-weight: bold;
	z-index: 20;
}
#selectBoxL {
	left: 0;
}
#selectBoxR {
	right: 0;
}
#txt {
	text-align: center;
	line-height: 1.2;
	margin: 0 0 5px;
}
#txt b {
	color: #dfb677;
}
.select-box a {
	display: block;
	width: 170px;
	height: 44px;
	padding: 15px 30px 0 0;
	margin: 0 auto;
	text-align: center;
	background: url('../images/bg_btn.png') scroll no-repeat 0 0;
	background-size: 194px 44px;
}
#btnForm {
	transform: translateX(5%);
}
#mainwine {
	position: absolute;
	left: 50%;
	top: 28%;
	width: 20%;
	margin-left: -10%;
	z-index: 30;
}
#mainwine img {
	display: block;
	width: 100%;
}
#invoiceForm {
	position: absolute;
	left: 50%;
	top: 35%;
	width: 320px;
	height: 290px;
	margin-left: -160px;
	background: url('../images/invoice-form.png') scroll no-repeat 0 0;
	background-size: contain;
}
#invoiceForm .inputs {

}
#invoiceForm .inputs input {
	position: absolute;
	left: 105px;
	width: 190px;
	height: 25px;
	padding: 0 10px;
	border: 1px solid #cfcfcf;
	color: #ababab;
	font-size: 15px;
}
#invoiceForm .inputs input:focus {
	border: 1px solid #d92626;
	color: #ad333e;
}
#invoiceForm .inum {
	top: 7px;
}
#invoiceForm .inam {
	top: 52px;
}
#invoiceForm .ipho {
	top: 97px;
}
#invoiceForm .iema {
	top: 142px;
}
#invoiceForm .read {
	position: absolute;
	left: 30px;
	top: 180px;
	width: 23px;
	height: 23px;
	background: url('../images/sp-check.png') scroll no-repeat top center;
	background-size: 23px;
	cursor: pointer;
}
#invoiceForm .read.checked {
	background-position: bottom center;
}
#invoiceForm #btnSend {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 290px;
	height: 51px;
	padding: 15px 0 0;
	margin-left: -145px;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	background: url('../images/bg_btn2.png') scroll no-repeat 0 0;
	background-size: contain;
	cursor: pointer;
}
/*play*/
#btnPlay {
	display: none;
	position: absolute;
	right: -20%;
	top: 52%;
	width: 290px;
	height: 51px;
	padding: 4px 0 0;
	/*margin-left: -145px;*/
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	background: url('../images/bg_btn2.png') scroll no-repeat 0 0;
	background-size: contain;
	cursor: pointer;
	line-height: 1.2;
}
#btnPlay b {
	font-size: 12px;
	color: #ffeacb;
}
/*rule*/
#anchorBox {
	padding-top: 63%;
	text-align: center;
}
#anchorBox a {
	display: inline-block;
	width: 104px;
	height: 51px;
	margin: 0 -2px;
	padding: 20px 0 0;
	color: #000;
	background: url('../images/bg_btn3.png') scroll no-repeat 0 0;
	background-size: contain;
	font-size: 12px;
	letter-spacing: 0;
	vertical-align: top;
}
.ruleBody {
	margin: 0 0 100px;
	padding: 20px;
	line-height: 20px;
}
.eachMarker {
	color: #eec380;
	font-size: 13px;
}
.ruleT1 {
	font-size: 20px;
	color: #fff;
	padding: 0 0 15px;
	line-height: 1.2;
}
.ruleLi1 {
	color: #eec380;
}
.ruleLi1 li {
    padding: 5px 0 5px 30px;
    position: relative;
}
.ruleLi1 li::before {
    content: attr(li);
    display: inline-block;
    position: absolute;
    left: 0;
    top: 5px;
}
.ccw {
	color: #fff;
}
.ruleWin {
	margin: 10px 0;
}
.ruleWin .each {
	margin:  0 0 10px;
	color: #fff;
}
.ruleWin .img {
	width: 150px;
	height: 105px;
}
.ruleWin img {
	display: block;
	width: 100%;
}
.ruleWin .each span{
	color: #ffcaca;
}
/*prod*/
.link-select {
	padding: 87% 0 0 8%;
}
.link-select a {
	display: block;
	width: 182px;
	height: 41px;
	padding: 14px 50px 0 0;
	text-align: center;
	background: url('../images/bg_btn4.png') scroll no-repeat 0 0;
	background-size: 182px 41px;
	color: #000;
	font-size: 13px;
	font-weight: bold;
	margin: 0 0 5px;
}
/*game*/
#popup {
	position: absolute;
	left: 50%;
	top: 8%;
	width: 90%;
	min-height: 20%;
	margin-left: -45%;
	padding: 20px;
	z-index: 990;
	background: rgba(0,0,0,.7);
	border-radius: 10px;
}
.popup-inner {
	display: none;
}
#c {
	display: block;
	width: 100%;
	background: url('../images/bg-game-810.jpg') no-repeat scroll top center;
	background-size: cover;
}
#gameTitle {
	width: 91px;
	margin: 0 auto 10px;
}
#gameTitle img {
	display: block;
	width: 100%;
}
#popGuide .txt {
	color: #fff;
	line-height: 1.2;
	margin: 0 0 10px;
	text-align: center;
}
#popGuide .red {
	color: #f00;
	font-size: 20px;
}
#popGuide .yellow {
	color: #fe0;
	font-size: 20px;
}
#gameScoreRule {
	width: 240px;
	margin: 0 auto 10px;
}
#gameScoreRule img {
	display: block;
	width: 100%;
}
#gameGuideGif {
	display: none;
	width: 175px;
	margin: 0 auto 10px;
}
#gameGuideGif img {
	display: block;
	width: 100%;
}
#btnPlayGame {
	display: block;
	width: 240px;
	margin: 0 auto;
}
#btnPlayGame img {
	display: block;
	width: 100%;
}
#gameUI {
	pointer-events: none;
	position: absolute;
	top: 10%;
	left: 2%;
	width: 150px;
	height: 54px;
	background: url('../images/game-ui-score.png') no-repeat scroll top center;
	background-size: contain;
}
#gameUITime {
	position: absolute;
	top: 12px;
	left: 10px;
	width: 40px;
	text-align: center;
	font-size: 24px;
	color: #fff;
} 
#gameUIScore {
	position: absolute;
	top: 24px;
	left: 55px;
	width: 60px;
	text-align: right;
	font-size: 13px;
}
#popTimeEnd .txt {
	color: #fff;
	line-height: 1.2;
	margin: 0 0 10px;
	text-align: center;
}
#TimeEndScore {
	font-size: 30px;
}
#btnLogin {
	display: block;
	width: 240px;
	margin: 0 auto 10px;
}
#btnLogin img {
	display: block;
	width: 100%;
}
#btnPlayAgain {
	display: block;
	width: 150px;
	margin: 0 auto 10px;
}
#btnPlayAgain img {
	display: block;
	width: 100%;
}
#btnGetDraw {
	display: block;
	width: 150px;
	margin: 0 auto 10px;
}
#btnGetDraw img {
	display: block;
	width: 100%;
}
#btnDrawResult {
	display: block;
	width: 240px;
	margin: 0 auto 10px;
}
#btnDrawResult img {
	display: block;
	width: 100%;
}
.UIrank li {
    color: white;
    font-size: 13px;
    height: 18px;
    padding: 0 0 0 40px;
    position: relative;
}
.UIrank li::before {
    content: attr(data-num);
    display: block;
    left: 0;
    position: absolute;
    text-align: right;
    top: 0;
    width: 30px;
}
.UIrank i {
	display: inline-block;
	position: absolute;
	right: 0;
	top: 0;
	width: 60px;
	text-align: right;
}

#fbCanvas {
	display: none;
}

/*winner*/
#winnerForm {
	position: absolute;
	left: 50%;
	top: 30%;
	width: 320px;
	height: 365px;
	margin-left: -160px;
	background: url('../images/winner-form.png') scroll no-repeat 0 0;
	background-size: contain;
}
#winnerForm .inputs input {
	position: absolute;
	left: 105px;
	width: 190px;
	height: 25px;
	padding: 0 10px;
	border: 1px solid #cfcfcf;
	color: #ababab;
	font-size: 15px;
}
#winnerForm .inputs input:focus {
	border: 1px solid #d92626;
	color: #ad333e;
}
#winnerForm .inam {
	top: 47px;
}
#winnerForm .ipho {
	top: 92px;
}
#winnerForm .iema {
	top: 137px;
}
#winnerForm #btnSendWinner {
	position: absolute;
	left: 50%;
	bottom: -40px;
	width: 290px;
	height: 51px;
	padding: 15px 0 0;
	margin-left: -145px;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	background: url('../images/bg_btn2.png') scroll no-repeat 0 0;
	background-size: contain;
	cursor: pointer;
}
/*得獎名單*/
.award {
	padding: 63% 20px 20px;
	color: #eec380;
	line-height: 1.6;
}
.award-head {
	font-size: 18px;
	color: #fff;
	text-align: center;
	margin: 0 0 20px;
}
.award-t1 {
	font-size: 15px;
	color: #fff;
	margin: 20px 0 10px;
}
.award-note {
	font-size: 15px;
	color: #fff;
	margin: 20px 0 100px;
}






#pageMask {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
	z-index: 990;
}

#goTop {
	display: none;
	position: fixed;
	right: 5%;
	bottom: 15%;
	width: 40px;
	height: 40px;
}
#goTop img {
	display: block;
	width: 100%;
}
footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 10%;
	background: #000 url('../images/warn.png') scroll no-repeat center center;
	background-size: contain;
	z-index: 990;
}
#loading {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0.7;
	background: #fff url('../images/loading.gif') no-repeat scroll center center;
	z-index: 9998;
}
.clear {
	clear: both;
}
.uuidDiv,.fbidDiv{
position:absolute;
color:white;
width:100%;
left:0;
text-align:center;}
.uuidDiv{
top:10px;}
.fbidDiv{
bottom:10px;}
#winnerForm .uuidDiv,#winnerForm .fbidDiv{
top:auto;
color:black;}
#winnerForm .uuidDiv{
bottom:39px;}
#winnerForm .fbidDiv{
bottom:16px;}