html, body {
        height: 100%;
        margin: 0px;
	FONT-SIZE: 20px;
    color: white;
    font-family: Microsoft JhengHei;
    line-height: 26px;
    }

body {
	background-color: #7f1f0e;
	BACKGROUND-POSITION: center top;
	}

a {
	text-decoration: none;
	color : white;
}


.title1 {
	FONT-SIZE: 36px;
	line-height: 42px;
}

.title2 {
	FONT-SIZE: 28px;
	line-height: 34px;
}

#lightarea { 
  
  
}

#main_top {
	width :1000px;
	height : 500px;
	background-image: url("images/top_bg.png");
	margin : 0 auto;
}

#logo {
	width :630px;
	height : 231px;
	top: 20px;
	left : 180px;
	position: relative;
}

#main_bg {
	width :1000px;
	
	background-image: url("images/main_bg.png");
	margin : 0 auto;
	background-color: #000;
	background-repeat: repeat-x;
	position: relative;
}

#main_area
{
	width :1000px;
	margin : 0 auto;
	position: relative;
}

#in_bg {
	width :901px;
	background-image: url("images/in_bg.png");
	background-repeat: repeat-y;
	position: relative;
	margin : 0 auto;
    
	
}

#pic_m {
	  width: 927px;
  height: 592px;
	position: relative;
	margin : 0 auto;
	background-image: url("images/in_bg.png");
	background-repeat: no-repeat;
	background-position: center bottom;
}

#txt_a {
	width: 840px;
	position: relative;
	margin : 0 auto;
}




@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}


.buttom {
background-color:#000000;
height:69px;
	position: relative;

}

.btn1 {
	position: absolute;
  width: 233px;
  height: 92px;
  left: 30px;
  top : 380px;
}

.btn2 {
	position: absolute;
  width: 233px;
  height: 92px;
  left: 300px;
  top : 380px;
}

.start_btn, .main1, .main2, .main3, .sb1, .sb2, .in1, .sb3, .sb4, .sb5, .sb6, .sb7, .sb8, .sb9, .sb10 {
  
  cursor: pointer;
}

.start_btn:hover .start_btn_bg {
  background: url("images/btn_bg1.png") no-repeat;
}
.start_btn:hover .start_btn_uplight {
  -moz-animation: rotating 0.3s linear;
  -webkit-animation: rotating 0.3s linear;
  animation: rotating 0.3s linear;
}
.start_btn:hover .start_btn_word {
  background-position: bottom center;
}
.start_btn:hover .start_btn_game:before {
  height: 55px;
}
.start_btn:hover .start_btn_start:before {
  height: 55px;
}

.start_btn_bg {
  
  width: 233px;
  height: 92px;
 
  background: url("images/btn_bg.png") no-repeat;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -moz-animation: light 1.5s infinite alternate;
  -webkit-animation: light 1.5s infinite alternate;
  animation: light 1.5s infinite alternate;
}

.start_btn_game {
  position: absolute;
  width: 186px;
  height: 57px;
  left: 25px;
  top: 15px;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background: url("images/btn_n1.png") no-repeat bottom right;
}
.start_btn_game:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 186px;
  height: 0px;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background: url("images/btn_n2.png") no-repeat bottom center;
}

.start_btn_start {
  position: absolute;
  width: 141px;
  height: 55px;
  left: 48px;
  top: 15px;
  background: url("images/btn_n3.png") no-repeat top center;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.start_btn_start:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 141px;
  height: 0px;
  background: url("images/btn_n4.png") no-repeat top center;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.heartBeat {
  -moz-animation: heartBeat 1s infinite linear;
  -webkit-animation: heartBeat 1s infinite linear;
  animation: heartBeat 1s infinite linear;
}

.main_p {
	position: relative;
  width: 927px;
  height: 592px;
  margin: 0 auto;
	margin-bottom: 10px;
}



.main1:hover .main1_bg {
  background: url("images/m_p2.png") no-repeat;
}

.main1_bg {
  
  width: 927px;
  height: 592px;
 
  background: url("images/m_p1.png") no-repeat;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -moz-animation: light 1.5s infinite alternate;
  -webkit-animation: light 1.5s infinite alternate;
  animation: light 1.5s infinite alternate;
}

.main2:hover .main2_bg {
  background: url("images/m_p4.png") no-repeat;
}

.main2_bg {
  
  width: 927px;
  height: 592px;
 
  background: url("images/m_p3.png") no-repeat;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -moz-animation: light 1.5s infinite alternate;
  -webkit-animation: light 1.5s infinite alternate;
  animation: light 1.5s infinite alternate;
}

.main3:hover .main3_bg {
  background: url("images/m_p6.png") no-repeat;
}

.main3_bg {
  
  width: 927px;
  height: 592px;
 
  background: url("images/m_p5.png") no-repeat;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -moz-animation: light 1.5s infinite alternate;
  -webkit-animation: light 1.5s infinite alternate;
  animation: light 1.5s infinite alternate;
}

.sb_p {
	position: relative;
  width: 416px;
  height: 73px;
  
}

.sb_p1 {
	position: relative;
  width: 416px;
  height: 73px;
  top : -73px;
	left : 440px;
	
}

.sb1:hover .sb1_bg {
  background: url("images/sbtn1a.png") no-repeat;
}

.sb1_bg {
  
  width: 416px;
  height: 73px;
 
  background: url("images/sbtn1.png") no-repeat;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -moz-animation: light 1.5s infinite alternate;
  -webkit-animation: light 1.5s infinite alternate;
  animation: light 1.5s infinite alternate;
}

.sb2:hover .sb2_bg {
  background: url("images/sbtn2a.png") no-repeat;
}

.sb2_bg {
  
  width: 416px;
  height: 73px;
 
  background: url("images/sbtn2.png") no-repeat;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -moz-animation: light 1.5s infinite alternate;
  -webkit-animation: light 1.5s infinite alternate;
  animation: light 1.5s infinite alternate;
}

.in1 {
	position: relative;
		top:-32px;
	left:250px;
	width: 141px;
  height: 35px;
	

  
}

.in1:hover .in1_bg {
  background: url("images/in_a.png") no-repeat;
}

.in1_bg {
  
  width: 141px;
  height: 35px;
 
  background: url("images/in.png") no-repeat;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -moz-animation: light 1.5s infinite alternate;
  -webkit-animation: light 1.5s infinite alternate;
  animation: light 1.5s infinite alternate;
}

.sb3_p {
	position: relative;
  width: 199px;
  height: 73px;
	top: 5px;
	left:5px;
  
}

.sb3:hover .sb3_bg {
  background: url("images/sbtn3a.png") no-repeat;
}

.sb3_bg {
  
  width: 199px;
  height: 73px;
 
  background: url("images/sbtn3.png") no-repeat;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -moz-animation: light 1.5s infinite alternate;
  -webkit-animation: light 1.5s infinite alternate;
  animation: light 1.5s infinite alternate;
}

.sb4_p {
	position: relative;
  width: 199px;
  height: 73px;
	top: -68px;
	left:210px;
  
}

.sb4:hover .sb4_bg {
  background: url("images/sbtn4a.png") no-repeat;
}

.sb4_bg {
  
  width: 199px;
  height: 73px;
 
  background: url("images/sbtn4.png") no-repeat;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -moz-animation: light 1.5s infinite alternate;
  -webkit-animation: light 1.5s infinite alternate;
  animation: light 1.5s infinite alternate;
}

.sb5_p {
	position: relative;
  width: 199px;
  height: 73px;
	top: -141px;
	left:418px;
  
}

.sb5:hover .sb5_bg {
  background: url("images/sbtn5a.png") no-repeat;
}

.sb5_bg {
  
  width: 199px;
  height: 73px;
 
  background: url("images/sbtn5.png") no-repeat;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -moz-animation: light 1.5s infinite alternate;
  -webkit-animation: light 1.5s infinite alternate;
  animation: light 1.5s infinite alternate;
}

.sb6_p {
	position: relative;
  width: 199px;
  height: 73px;
	top: -214px;
	left:626px;
  
}

.sb6:hover .sb6_bg {
  background: url("images/sbtn6a.png") no-repeat;
}

.sb6_bg {
  
  width: 199px;
  height: 73px;
 
  background: url("images/sbtn6.png") no-repeat;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -moz-animation: light 1.5s infinite alternate;
  -webkit-animation: light 1.5s infinite alternate;
  animation: light 1.5s infinite alternate;
}

.sb7_p {
	position: relative;
  width: 199px;
  height: 73px;
	top: -208px;
	left:5px;
  
}

.sb7:hover .sb7_bg {
  background: url("images/sbtn7a.png") no-repeat;
}

.sb7_bg {
  
  width: 199px;
  height: 73px;
 
  background: url("images/sbtn7.png") no-repeat;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -moz-animation: light 1.5s infinite alternate;
  -webkit-animation: light 1.5s infinite alternate;
  animation: light 1.5s infinite alternate;
}

.sb8_p {
	position: relative;
  width: 199px;
  height: 73px;
	top: -281px;
	left:210px;
  
}

.sb8:hover .sb8_bg {
  background: url("images/sbtn8a.png") no-repeat;
}

.sb8_bg {
  
  width: 199px;
  height: 73px;
 
  background: url("images/sbtn8.png") no-repeat;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -moz-animation: light 1.5s infinite alternate;
  -webkit-animation: light 1.5s infinite alternate;
  animation: light 1.5s infinite alternate;
}

.sb9_p {
	position: relative;
  width: 199px;
  height: 73px;
	top: -354px;
	left:418px;
  
}

.sb9:hover .sb9_bg {
  background: url("images/sbtn9a.png") no-repeat;
}

.sb9_bg {
  
  width: 199px;
  height: 73px;
 
  background: url("images/sbtn9.png") no-repeat;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -moz-animation: light 1.5s infinite alternate;
  -webkit-animation: light 1.5s infinite alternate;
  animation: light 1.5s infinite alternate;
}

.sb10_p {
	position: relative;
  width: 199px;
  height: 73px;
	top: -427px;
	left:626px;
  
}

.sb10:hover .sb10_bg {
  background: url("images/sbtn10a.png") no-repeat;
}

.sb10_bg {
  
  width: 199px;
  height: 73px;
 
  background: url("images/sbtn10.png") no-repeat;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -moz-animation: light 1.5s infinite alternate;
  -webkit-animation: light 1.5s infinite alternate;
  animation: light 1.5s infinite alternate;
}

.in2 {
	position: relative;
		top:-32px;
	left:300px;
	width: 141px;
  height: 35px;
 
}

.in2:hover .in2_bg {
  background: url("images/in_a.png") no-repeat;
}

.in2_bg {
  
  width: 141px;
  height: 35px;
 
  background: url("images/in.png") no-repeat;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -moz-animation: light 1.5s infinite alternate;
  -webkit-animation: light 1.5s infinite alternate;
  animation: light 1.5s infinite alternate;
}

.in3 {
	position: relative;
		top:-32px;
	left:350px;
	width: 141px;
  height: 35px;
 
}

.in3:hover .in1_bg {
  background: url("images/in_a.png") no-repeat;
}





#txt_box1 {
	width:750px;
	height : 600px;
	position:relative;
	margin:0px auto;
	top:-50px;

}


#txt_box2 {
	width:750px;
	height : 2050px;
	position:relative;
	margin:0px auto;
	display: none;
	top:-50px;
}

#txt_box1a {
	width:750px;
	height : 10px;
	position:relative;
	margin:0px auto;
	top:-400px;

}

#txt_box2a,#txt_box3a,#txt_box4a,#txt_box5a,#txt_box6a,#txt_box7a,#txt_box8a {
	width:750px;
	height : 10px;
	position:relative;
	margin:0px auto;
	top:-400px;
display: none;
}



@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes light {
  0% {
    -webkit-filter: brightness(1);
  }
  100% {
    -webkit-filter: brightness(1.1);
  }
}



@keyframes light_move {
  0% {
    -moz-transform: translateX(-200px);
    -ms-transform: translateX(-200px);
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
  }
  100% {
    -moz-transform: translateX(300px);
    -ms-transform: translateX(300px);
    -webkit-transform: translateX(300px);
    transform: translateX(300px);
  }
}