@charset "utf-8";
@import url("reset.css");
body,html { height:100%; font-family:"微軟正黑體", Verdana, Arial, sans-serif; -webkit-text-size-adjust:none;}
body{ background:#aeb7cc;}
/*Block元素擴展至內容高度*/
body:after,div:after{
    content:".";
    display:block;
    clear:both;
    height:0;
    font-size:0;
    line-height:0;
}
#wrapper{ width:100%; height:100%;}
header{ width:100%; height:40px; background:url(../images/head_bg.gif) repeat-x; background-size:contain; position:relative; z-index:9999;}
.topmenu{ position:absolute;}
.topmenu img{ width:43.5px; height:auto;}
.logo{ position:absolute; left:50%; margin-left:-53.5px;}
.logo img{ width:107px; height:auto;}
.home{ position:absolute; right:38.5px;}
.home img{ width:34.5px; height:auto;}
.fb{ position:absolute; right:0;}
.fb img{ width:38.5px; height:auto;}
.mainmenu{ position:absolute; top:40px; width:100%; display:none;}
.mainmenu li{ width:100%; height:44px; background:#f1df8c; border-bottom:1px solid #fff; position:relative;}
.mainmenu li a{ display:block; width:100%; height:100%; text-indent:20px; text-decoration:none; color:#765f00; line-height:44px; font-size:20px; font-weight:bold;}
.mainmenu li:last-child{ border-bottom:none;}
.mainmenu li span{ position:absolute;top:0; right:5%; line-height:44px; font-size:30px; color:#765f00;}

#main_idx{position:relative; width:100%; height:0; background:url(../images/main_idx.jpg) no-repeat; background-size:contain; padding-bottom:133.4%; z-index:999;}
#main{position:relative; width:100%; height:0; background:url(../images/main.jpg) no-repeat; background-size: contain; padding-bottom:133.4%; z-index:999;}
#main_bu{position:relative; width:100%; height:autos; background:url(../images/main.jpg) no-repeat; background-size:100%; /*padding-bottom:133.4%;*/ z-index:999;}
.idx_btn{ display:block; position:absolute; bottom:8.2%; right:1%;	background: url(../images/idx_bt.png) no-repeat;background-size: contain;width:53.1%;height:0;padding-bottom:11.84%;}
.idx_btn a{ display:block; width:100%; height:100%;}

.step01{}
.step01 .tit{ font-size:16px; line-height:1.2em; color:#000; text-align:center; margin:29% 0 3% 0;}
.step01 img{ display:block; width:48.4%; height:auto; margin:0 auto;}
.step01 .inputform{ width:83%; height:44px; margin:-2% auto 0 auto; display:block; font-size:18px; box-sizing:border-box; padding:5px; border:2px solid #f6d23d; border-radius:6px;}
.step01 .btn{ width:83%; margin:2% auto 0 auto;}
.step01 .btn ul{}
.step01 .btn li{ float:left; width:49%; height:40px;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #EBD57E),color-stop(1, #C0A123)); }
.step01 .btn li:first-child{ margin-right:2%; }
.step01 .btn li a{ display:block; text-align:center; line-height:32px; font-size:20px; color:#5e4c01; font-weight:bold; text-decoration:none;}

.step02{ width:100%; min-height:100%;margin:32% auto 0 auto; position:relative;}
.step02 .tit{ font-size:23px; line-height:1.3em; color:#000; text-align:center; margin:65% 0 5% 0;}
.step02 .hightlight{ font-size:50px; color:#e62963; }
.step02 .dice{ display:block; width:23.4%; height:auto; position:absolute; top:28%;left:38%; }
.step02 .hand{ position:absolute; top:50%;left:43%; display:block; width:22%; height:auto;}
.step02 .light img{display:block; width:100%; height:60%; position:absolute; left:5%; top:-10%;}
.step02 .dicebg{ width:100%; height:0; padding-bottom:27.6%; background: url(../images/dicebg.png); background-size:contain; position:absolute; top:50%; }

.step04{ width:90.6%; margin:32% auto 0 auto;}
.step04 .bublock{ width:100%; min-height:70px; box-sizing:border-box; margin:0 0 2% 0; }
.step04 .on{padding:5px;
	background-image: -webkit-gradient(
	linear,
	left top,
	right top,
	color-stop(0.43, rgb(220, 189, 63)),
	color-stop(0.7, rgb(255, 253, 209)),
	color-stop(1, rgb(220, 189, 63)),
	color-stop(1, rgb(255, 233, 111))
);}
.step04 .off{ padding:1px;xbackground:#b3b3b3; }
.step04 .bublock .buContainer{ width:100%; height:100%; background:#fff; position:relative;}
.step04 #roulette_viewport{width: 90.6%;height:100%;overflow:hidden;position:absolute;top: 24%;}
.step04 #roulette_slide{width:100%;position:absolute;top: 0;}
.step04 .buimg{ width:100%; float:left;}
.step04 .buimg img{ width:100%; height:auto;}
.step04 .buinfo{ width:39%; float:left; margin:2% 0 0 0; font-size:20px; line-height:1.3em; color:#535353;}
.step04 .bupup{ z-index:9999;position:absolute; top:26.6%; right:1%; background:url(../images/bupup.png) no-repeat; background-size:contain; width:17.8%; height:0; padding-bottom:19%; box-sizing:border-box;}
.step04 .bupup img{ width:74.6%; height:auto; margin:10% 0 0 17%;}
.step04 .buframe{ position:absolute; top:24%; right:4.8%; width:90.6%; height:0;}
.step04 .buframe img{ width:100%; height:auto;}

.step05{ width:84%; margin:32% auto 0 auto;}
.step05 .info{ width:100%; box-sizing:border-box; padding:8px; margin:0 0 3% 0;
	background-image: -webkit-gradient(
	linear,
	left top,
	right top,
	color-stop(0.43, rgb(220, 189, 63)),
	color-stop(0.7, rgb(255, 253, 209)),
	color-stop(1, rgb(220, 189, 63)),
	color-stop(1, rgb(255, 233, 111))
);}
.step05 .info .infoContainer{ background:#fff;}
.step05 .info .maininfo{ text-align:center; font-size:20px; color:#535353; padding:0 0 3% 0; box-sizing:border-box;}
.step05 .info .maininfo .tit{ color:#e62761;}
.step05 .info img{ width:100%; height:auto;}
.step05 .inputform{ width:100%; height:44px; margin:0 auto 3% auto; display:block; font-size:18px; box-sizing:border-box; padding:5px; border:2px solid #f6d23d; border-radius:6px;}
.step05 .btn li:first-child {
    margin-right: 2%;
    width:30%;
}

.step05 .btn li{ width:68%; height:40px;float:left;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.43, #EBD57E),color-stop(1, #C0A123)); }
.step05 .btn li a{ display:block; text-align:center; line-height:32px; font-size:20px; color:#5e4c01; font-weight:bold; text-decoration:none;}

.step06{ width:84%; margin:32% auto 0 auto;}
.step06 .tit{ font-size:23px; line-height:1.3em; color:#000; text-align:center; margin:0 0 5% 0;}
.step06 .inputContainer{ margin: 0 0 3% 0;}
.step06 .inputContainer p{ display:block; width:30%; font-size:19px; color:#5c5c5c; line-height:44px; float:left; margin-right:2%; text-align:center;}
.step06 .inputContainer .inputform{ width:68%; height:44px; margin:1% auto 0 auto; display:block; font-size:18px; box-sizing:border-box; padding:5px; border:2px solid #f6d23d; float:left; }
.step06 .inputContainer .checkblock{ display:block; float:left; border:1px solid #f6d23d;}
.step06 .inputContainer p.check{ font-size:14px; color:#252525; margin:0 0 0 3%; text-align:left; width:auto;line-height:normal;}
.step06 .btn{ margin-top:6%;}
.step06 .btn li{ width:100%; height:40px;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.43, #EBD57E),color-stop(1, #C0A123)); }
.step06 .btn li a{ display:block; text-align:center; line-height:32px; font-size:20px; color:#5e4c01; font-weight:bold; text-decoration:none;}

.step07{ width:90.3%; margin:32% auto 0 auto;}
.step07 .tab{ width:100%; font-size:16px;  }
.step07 .tab ul{ display:block;width:100%;}
.step07 .tab li{ float:left; height:44px; }
.step07 .tab li.tab1{ width:40%;}
.step07 .tab li.tab2{ width:60%;}
.step07 .tab li a{ display:block; background:#fff; width:100%; height:34px; line-height:34px; padding:0 2% 0 2%; text-align:center;  text-decoration:none; color:#000; margin:10px 0 0 0; box-sizing:border-box;}
.step07 .tab li.tabon,.step07 .tab li.tabon a{background:#f1df8c; }
.step07 .recContainer{ width:100%; height:auto; background:#f1df8c; box-sizing:border-box; padding:4% 3% 1% 3%; margin-bottom:3%;}
.step07 .recContainer .info{ font-size:16px; color:#e62761; margin:0 0 5% 0; padding:0 3%; box-sizing:border-box;}
.step07 .recContainer .recblock{ padding:2%; box-sizing:border-box; min-height:60px; margin:0 0 2% 0;}
.step07 .recContainer .on{color:#535353;background-image: -webkit-gradient(
	linear,
	left top,
	right top,
	color-stop(0.43, rgb(220, 189, 63)),
	color-stop(0.7, rgb(255, 253, 209)),
	color-stop(1, rgb(220, 189, 63)),
	color-stop(1, rgb(255, 233, 111))
);}
.step07 .recContainer .off{background: #dfdfdf; color:#bababa	;}
.step07 .recContainer .mainrec{ width:100%; height:100%; background:#fff; position:relative; box-sizing:border-box;}
.step07 .recimg{ float:left; width:40%; height:auto;}
.step07 .recimg img{ width:100%; height:auto;}
.step07 .recinfo{ float:left;  font-size:16px; line-height:1.3em;}
.step07 .recinfo p{margin:4% 0 0 0;}
.step07 .recinfo .one{ margin:12% 0 0 0;}
.step07 .mainrec .recnum{ width:12.6%; height:0; padding-bottom:12.6%; position:absolute; text-indent:1.6%;font-size:16px;}
.step07 .mainrec .numon{background:url(../images/numbg.jpg) no-repeat;background-size:contain;  color:#000;}
.step07 .mainrec .numoff{background:url(../images/numbg_off.png) no-repeat;background-size:contain;  color:#b3b3b3;}
.step07 .ibonblock{ width:100%; min-height:65px; font-size:18px; line-height:1.3em; text-indent:10%; color:#535353; box-sizing:border-box; padding:3% 0 0 0; margin:0 0 3% 0;
background-image: -webkit-gradient(
	linear,
	left top,
	right top,
	color-stop(0, rgb(246, 246, 247)),
	color-stop(0.48, rgb(255, 255, 255))
);}
.step07 .ibonblock .hightlight{ font-size:20px; line-height:1.3em; color:#e62761;}
.step07 .btn li{ width:100%; height:40px;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.43, #EBD57E),color-stop(1, #C0A123)); }
.step07 .btn li a{ display:block; text-align:center; line-height:32px; font-size:20px; color:#5e4c01; font-weight:bold; text-decoration:none;}
.step07 .highttit{ font-size:30px; text-align:center; color:#e62963;}
.step07 .listinfo{ font-size:18px; text-align:center; color:#9b9167;}
.step07 .tablelist p{ padding:0 5px 0 3px; box-sizing:border-box;}
.step07 .infolist{ list-style:decimal; margin:0 0 5% 0; line-height:1.5em;}
.step07 .infolist li{ margin-left:20px;}
.step07 .infolist a{ text-decoration:none; color:#e62963;}
.step07 .infolist .imgshow{ width:80%;}
.step07 .infolist .imgshow img{ width:80%; height:auto; margin:0 0 3% 0;}
.step07 .infolist .imgshow p{ color:#553e00; font-size:16px; line-height:1.5em;}
.step07 .infotit{ font-size:20px; line-height:1.5em; color:#e62963; margin:0 0 1% 0;}
.step07 .step{ width:80%; }
.step07 .step img{ display:block; width:80%; height:auto; margin:0 0 5% 0;}
.step07 .step p{color:#553e00; font-size:16px; line-height:1.5em; margin:0 0 1% 0;}

.on{padding:5px;
	background-image: -webkit-gradient(
	linear,
	left top,
	right top,
	color-stop(0.43, rgb(220, 189, 63)),
	color-stop(0.7, rgb(255, 253, 209)),
	color-stop(1, rgb(220, 189, 63)),
	color-stop(1, rgb(255, 233, 111))
);}

footer{ font-size:9px; color:#1d1d1d; height:20px; margin:5% 0 0 0;}
.copyright{ float: left; margin:1% 0 0 5%; font-size:7px;}
footer ul{ float:right; margin-right:5%;}
footer li{ float:left;}
footer li a{ display:block; text-decoration:none; color:#1d1d1d; padding:0 10px; border-right:1px solid #1d1d1d;}
footer li:first-child a{ border-left:1px solid #1d1d1d;}

.pupbg{ position:fixed; width:100%; height:100%;background:#000; z-index:99998; opacity:0.9;}
.pupbg{ position:fixed; width:100%; height:100%;background:#000; z-index:99998; opacity:0.9;}
.pupinfo{ position:fixed; width:100%; height:100%; color:#fff; box-sizing:border-box; padding:15% 5px 10% 5px;  z-index:99999;}
.paddingtop30{padding:38% 5px 10% 5px;}
.pupinfo p{ font-size:18px; line-height:1.3em; color:#e62963; text-align:center;}
.pupinfo .puptit{ font-size:26px; line-height:1.5em; text-align:center; color:#fff; margin:0 0 3% 0;}
.pupinfo .pupbanner{ width:86%; margin:3% auto 0 auto;position:absolute;left:7%;}
.pupinfo .pupbanner img{ width:100%; height:auto;}
.pupinfo .btn{ width:60%; margin:3% auto 0 auto;}
.pupinfo .btn ul{}
.pupinfo .btn li{ float:left; width:100%; height:40px;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #EBD57E),color-stop(1, #C0A123)); }
.pupinfo .btn li:first-child{ margin-right:2%; }
.pupinfo .btn li a{ display:block; text-align:center; line-height:32px; font-size:20px; color:#5e4c01; font-weight:bold; text-decoration:none;}

.mtop10{ margin-top:10%; }


@media screen and (orientation:landscape){ 

/*橫的版型的c*/
footer{ font-size:16px; color:#1d1d1d; height:30px;}
.copyright{ float: left; margin:0.5% 0 0 5%; font-size:14px;}
footer ul{ float:right; margin-right:5%;}
footer li{ float:left;}
footer li a{ display:block; text-decoration:none; color:#1d1d1d; padding:0 10px; border-right:1px solid #1d1d1d;}
footer li:first-child a{ border-left:1px solid #1d1d1d;}

}



/*================================其他CSS範本=====================================*/
/*----css 清除浮動技巧------*/
.clearfix:before,.clearfix:after { content: " "; display: table;}
.clearfix:after { clear: both;}
.clearfix { *zoom: 1;}
/*-------css 清除浮動技巧----*/

/* 解決ul在position設置為absolute時不會隨著內容展開高度(div可)*/
ul:after { content:"."; display:block; clear:both; height:0; font-size:0; line-height:0;}