/*-----------------------------layout-------------------------------------*/
html{
	overflow-x:hidden;}
.bg{/*背景用*/
	width:100%;float:left;
	background-image: url(../images/index_01.jpg);
	background-position: center top ;
	background-repeat: no-repeat;
	
}


.WRAP {/*全部內容*/
	width: 1000px;
	margin: 0 auto;

}


.HEADER {/*刊頭*/
	width:100%;
	margin: 0 auto;
	position:relative;
	display:block;
	background:url(../images/index_01.jpg) no-repeat  top center;
	height:765px;/*底下內文距離頂端*/
}



.CONTENT {/*內容區_01   內頁:550~1450px*/
	width:100%;
	margin: 0 auto;
	position:relative;
	/*height:474px;*/
	/*background-color:#F96;*/
}


.FOOTER {/*頁尾*/
	width:100%;
	background:url(../images/footer.jpg) no-repeat  bottom center;
	height:70px;
	margin: 0 auto;
	bottom:0;
}


.BOX {	outline: none; /* for Firefox 清虛線*/
 	hlbr:expression(this.onFocus=this.blur()); /* for IE 清虛線*/
	margin: 0 auto;
	overflow-x:hidden;
	padding: 0px 8% 0 8%;/*與外面的距離-左右*/

	height:650px;
	/*background-color: #FF79BC;*/
	
}
/*下雪範圍設定*/
.snowfall{
	float:left;
	width: 90%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

/*------------------滑下來燈箱-------------------*/

	.reveal-modal-bg { 
		position: fixed; 
		height: 100%;
		width: 100%;
		background: #000;
		background: rgba(0,0,0,.8);/*黑背景透明度*/
		z-index: 900;
		display: none;
		top: 0;
		left: 0; 
		}
	
	.reveal-modal {
		padding: 60px 40px 0 0;/*內頁與外部的距離-上*//*卷軸與右側距儀離*/
		margin:0 0 0 5%;
		visibility: hidden;
		top: 0px; 
		width: 823px;/*內文寬*/
		height:801px;
		overflow:hidden;
		background:url(../images/boxbg.png) no-repeat  top center;
		position: absolute;
		z-index: 902;

		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
		/*-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);*/
		-box-shadow: 0 0 10px rgba(0,0,0,.4);

		}
		
	.reveal-modal.small 		{ width: 200px; margin-left: -140px;}
	.reveal-modal.medium 		{ width: 400px; margin-left: -240px;}
	.reveal-modal.large 		{ width: 600px; margin-left: -340px;}
	.reveal-modal.xlarge 		{ width: 800px; margin-left: -440px;}
	
	.reveal-modal .close-reveal-modal {
		
		position: absolute;
		top: 60px;
		right: 50px;
		background:url(../images/X.png) no-repeat  top center;
		background-repeat:no-repeat;
		width:43px;
		height:43px;
		cursor: pointer;
		z-index:903;
		} 

/*-----------------------------float---------------------------------*/	
.ball_bg{/*遊戲球P0-連到獎勵列表*/
		padding:0px 0%  0 0% ;/*對裡面的寬*/
		width:710px;
		height:322px;
		background:url(../images/ball_bg.png)  no-repeat   top center ;
	}
.ball_bg2{/*遊戲球P1-連到活動頁*/
		padding:0px 1%  0 1% ;/*對裡面的寬*/
		width:710px;
		height:322px;
		background:url(../images/ball_bg2.png)  no-repeat   top center ;
	}
.ball_bg3{/*遊戲球P5-VIP封館趴優惠商品*/
		padding:0px 1%  0 1% ;/*對裡面的寬*/
		width:710px;
		height:322px;
		background:url(../images/ball_bg3.png)  no-repeat   top center ;
	}
.ball1{
	width:80%;
	padding: 65px 0px 65px 120px;
		margin:0 0  0 0% ;/*對裡面的寬*/
	}
	
.ball2{
	width:80%;
	padding-left:120px;
		margin:-55px 0%  0 0% ;/*對裡面的寬*/
	}	
.ball3{/*遊戲logo*/
	width:80%;
	padding-top:5%;
		margin: 0 5%  0 10% ;/*對裡面的寬*/
	}
	

.light {
	display:block;
	position: absolute;
	z-index: 1;
	left: 19.5%;
	top: 94px;
/*	width:620px;
	height:459px;*/
	
/*	background-color:#0F0;*/
	/*	text-indent:-9999px;*/
}


.BB{
	display:block;
	position: absolute;
	z-index: 10;
	left: 39.5%;
	top: 178px;

		animation: show  .3s 1 alternate;
	-webkit-animation: show  .3s 1 alternate;
		}

@keyframes show {
	0% {
		opacity:0;
		transform:scale(20);
	}
	10% {
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
@-webkit-keyframes show {
	0% {
		opacity:0;
-webkit-transform:scale(20);
	}
	10% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
	}
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(200px) rotate3d(0, 1, 0, -360deg);
            transform: perspective(200px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
            transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
            transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(200px) scale3d(.95, .95, .95);
            transform: perspective(200px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(200px);
            transform: perspective(200px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
}
/*-----------------------------text---------------------------------*/	
td, th,p, .BOX,.bf,.bf2,.bf3{/*font-weight:600;*/
	color: #000000;
	font-size: 1em;
	line-height: 1.7;
	letter-spacing: 0.02em;
	text-align: justify;
	font-family: "微軟正黑體", "新細明體", "Verdana";
	margin-top: 0.6em;
}


h1 {/*標題-文字*/
font-size:1.25em;
	display: block;
	padding-top: 1.2em;
	color: #990000;	font-weight: bold;
	/*	text-shadow: 0px 0px 1px rgba(0,0,0,0.3);*/
}

h2 {/*小標*/
	display: block;
	font-size: 1em;
	color: #6633CC;
	margin:  0 0 30px 0;
}

h3{
/*	color: #F96;*/
	font-size: 1.2em;
	text-shadow: 0px 0px 1px rgba(0,0,0,0.5);
	/*font-weight: bold;*/
	}
.color_01 {/*變紅色*/
	color: #FFFF00;
	font-size: 1em;
}

.color_02 {/*變藍色*/
	color: #0F2433;
	font-weight: bold;
	font-size: 1.2em;
}

.color_03 {/*變紅色*/
	font-size: 1.15em;
	letter-spacing: 0.02em;
	font-weight: bold;
	color: #FF3300;	/*font-size: 0.9em;*/
}






/*-----------------------------link---------------------------------*/	
	
a {border:0;
	font-size: 1em;
	text-decoration: none;
	color: #06F;
	outline: none; /* for Firefox 清虛線*/
 	hlbr:expression(this.onFocus=this.blur()); /* for IE 清虛線*/
}
ol{border:0;
	margin-top:-4px;
	
	}





/*------------------------------兌換台+懶人包+跑馬燈-------------------------------------*/
.light_bg {/*放射光背景*/border:0;
	display:block;
	position: absolute;
	z-index:6;
	left: -45%;
	top: -2px;
	width:1920px;
	height:900px;
	background:url(../images/light_bg.png)  no-repeat   top center ;
/*	background-color:#0F0;*/
	/*	text-indent:-9999px;*/
}

.eag{	/*扭蛋台*/border:0;
	position:absolute;
	top:383px;
	left:19%;
	z-index:10;
	height:385px;
	width:617px;
	cursor:pointer;
	outline: none; /* for Firefox 清虛線*/
 	hlbr:expression(this.onFocus=this.blur()); /* for IE 清虛線*/
}

.M0{	/*兌換台*/border:0;
	outline: none; /* for Firefox 清虛線*/
 	hlbr:expression(this.onFocus=this.blur()); /* for IE 清虛線*/
	display:block;
	position:absolute;
	top:560px;
	left:23%;
	z-index:90;
	
	height:130px;
	width:550px;
	/*background-image:url(../images/btn_top_01.png);*/
/*	background-color:#3F0;*/
	background-repeat:no-repeat;
	text-indent:-9999px;
}


.M8{/*懶人包*/
/*border:0;
	display:block;
	position:absolute;
	top:530px;
	left:80%;
	z-index:90;
	cursor:pointer;
	
	height:217px;
	width:217px;
	background-image:url(../images/bag.png);
	background-repeat:no-repeat;text-indent:-9999px;*/
	animation: bounce  2s 100 alternate;
	 -webkit-animation: bounce  2s 100 alternate;
}

.ad-1{/*上-驚嘆*/

	border:0;
	display:block;
	position:absolute;
/*	top:160px;
	left:847px;*/
	top:-500px;
	left:1200px;
	z-index:90;
	cursor:pointer;}
	
	
.ad-2{/*下-驚嘆*/
width:94px;
height:96px;

	border:0;
	display:block;
	position:absolute;
/*	top:543px;
	left:827px;*/
	
		top:1500px;
	left:200px;
	
	z-index:90;
	cursor:pointer;}
	


/*------------------------選單特效------------------------*/
.flip-container {
	perspective: 1000;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
		 -webkit-transform: rotateY(180deg);
	}

.flip-container, .front, .back {/*按鈕大小*/
	width: 94px;
	height: 96px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	-webkit-transition: 0.6s;
	
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;

	position: relative;
	
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
-webkit-backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}


/*---------------------/選單特效-----------------------*/

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
            transform: translate3d(0,-4px,0);
  }
}



.M9{/*跑馬燈*/border:0;
	display:block;
	position:absolute;
	top:705px;
	left:36%;
	z-index:90;
	
	height:50px;
	width:300px;
	/*background-color:	#FCF;*/
	background-repeat:no-repeat;
	
		outline: none; /* for Firefox 清虛線*/
 	hlbr:expression(this.onFocus=this.blur()); /* for IE 清虛線*/

	font-size: 1.5em;
	color: #FFF;	font-weight: bold;
	letter-spacing: 0.02em;
	text-align: justify;
	font-family: "微軟正黑體", "新細明體", "Arial";
}
	

/*------------------------------浮水印-------------------------------------*/
#menu2 {
	position:absolute;
	width:175px;
	height:361px;
	margin:10px 0 0 0;
	
	background:url(../images/menu_bg.png) no-repeat top center ;
	z-index:500;	
}
#menu2 ul {padding:96px  0 0 0;
	list-style:none;
	margin:0 auto;
/*	background-image:url(images/btn0.png);*/
	
}
#menu2 li {
	width:175px;
/*	background-color:#3F0;*/
	cursor:pointer;
	display:block;
	height:35px;
/*	float:left;	*/
	text-indent:-9999px;
		
}
/*#menu2 li a {
	display:block;
	text-align:center;
	line-height:113px;
	color:#000000;
	text-decoration:none;
	position:absolute;
}*/

.M1{	
	background-image:url(../images/left_01.png);
	background-repeat:no-repeat;

}

.M2{	
	background-image:url(../images/left_02.png);
	background-repeat:no-repeat;
}
	
.M3{	
	background-image:url(../images/left_03.png);
	background-repeat:no-repeat;
}
.M4{	
	background-image:url(../images/left_04.png);
	background-repeat:no-repeat;
}

.M5{	
	background-image:url(../images/left_05.png);
	background-repeat:no-repeat;
}
	
.M6{	
	background-image:url(../images/left_06.png);
	background-repeat:no-repeat;
}
	
.M7{	
	background-image:url(../images/left_07.png);
	background-repeat:no-repeat;
}

.M1:hover{		
	background-image:url(../images/left_011.png);
}

.M2:hover{	
	background-image:url(../images/left_021.png);
}
.M3:hover{
	background-image:url(../images/left_031.png);
}
.M4:hover{	
	background-image:url(../images/left_041.png);
}
.M5:hover{	
	background-image:url(../images/left_051.png);
}
.M6:hover{
	background-image:url(../images/left_061.png);
}	
.M7:hover{
	background-image:url(../images/left_071.png);	
}


/*-----------------------------浮水印-------------------------------------*/


.menu3 {/*天堂免服*/
	position:absolute;
	width:180px;
	height:432px;	
	background-image:url(../images/got.png);	
}
.game1,/*新楓之谷*/
.game2,/*新瑪奇*/
.game3,/*跑跑卡丁車*/
.game4,/*爆爆王*/
.game5,/*泡泡大亂鬥*/
.game6,/*天堂-月服*/
.game7,/*天堂-免服*/
.game8,/*絕對武力*/
.game9,/*艾爾之光*/
.game10{/*夢幻之星2*/
	display:none;
	z-index: 20;/*定位選單*/
	position: relative;
	top:100px;
	left: -8%;
	width:180px;
	height:432px;	
	}


.game9{/*夢幻之星2*/
	display:block;
	z-index: 20;/*定位選單*/
	position: relative;
	top:100px;
	left: -8%;
	width:180px;
	height:432px;	
	}
		
.logos{
	position:absolute;
	top:0px;
	left:5%;		
}

/*-----------------------------內頁用表格P4-------------------------------------*/
.th_bg{
	margin:0 auto;
	width:90%;
	margin-bottom:-5px;}
	
	
.table1 {
	font-size:0.9em;
	width: 90%;
	margin: 0px 5% 10px 5%; /*表格與外部的間距*/	
	border-collapse: collapse; /*允許框線重疊*/
	/*border: 1px #FFF  solid; 框線顏色,樣式*/
}



.table1 td {
	text-align: center;	   /*文字置中*/
	/*border-radius: 0 4px  4px 0;*/color: #000;
	line-height:1.7;/*列_高度*/
	padding:1% 2% 1% 2%;/*列_文字與框的距離*/
	
	border-right: 1px #FFF  solid; 
	border-bottom: 1px   solid; 
	border-color: rgba(250,250,250,1);/*框線透明度*/
	
	background-color: #2e6d96;
	background-color: rgba(51,153,255,0.3);
}

.table1 td:last-child  {/*右邊沒有框線*/
	border-right: 0px #FFF  solid;
}

.center {
	text-align: center;	   /*文字置中*/
	margin:0 auto;
	
}


.table1 th {
	line-height: 3em;/*列_高度*/
	color: #FFF;/*第1列_文字顏色*/
	text-align: center;/*第1列_文字置中*/
	font-weight: bold;/*第1列_粗體*/
	letter-spacing: 2px;
	border-right: 1px #FFF  solid;
	background-color: #2FACFF;/*第1列_底色*/
	border-color: rgba(250,250,250,1);/*框線透明度*/
}


.table1 th:first-child {/*圓角- 左上*/
    border-radius: 6px 0 0 0;
}
 
.table1 th:last-child  {/*圓角- 右上*/
    border-radius: 0 6px 0 0;
	border-right: 0px #FFF  solid;
}
 
.table1 th:only-child{/*圓角- 一般*/
    border-radius: 6px 6px 0 0;
}



.table1 tr:hover {   /*滑鼠滑過*/
	border-radius: 4px;
	background-color: #640000;
	background-color: rgba(51,153,255,0.6);

}
.left {
	text-align: left;	   /*文字置中*/

}
/*-----------------------------浮水印表格-------------------------------------*/

.table {

	font-size: 0.75em;
	width: 100%;
	margin: 116px 5% 10px 15%; /*表格與外部的間距*/	
	border-collapse: collapse; /*允許框線重疊*/
}


.table td {
	/*text-align: center;	   文字置中*/
	/*border-radius: 0 4px  4px 0;*/color: #FFF;
	height: 25px;
	line-height: 25px;/*列_高度*/
	padding: 0%;/*列_文字與框的距離*/

	
	


}


.table th {border-radius: 4px  0 0 4px ;
	color: #FFF;/*第1列_文字顏色*/
	text-align: center;/*第1列_文字置中*/
	font-weight: bold;/*第1列_粗體*/
	letter-spacing: 2px;
	background-color: #53BAFF;/*第1列_底色*/
	border: 0px #53BAFF  solid; /*框線顏色,樣式*/
}
.table tr:hover {   /*滑鼠滑過*/
	/*border-radius: 4px;
	background-color: #640000;
	background-color: rgba(51,153,255,0.3);*/

}