@charset "utf-8";
/* CSS Document */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th {
	padding:0;
	margin:0;
	list-style-type:none;
	}
a,img{
	outline: none; /* for Firefox */
    hlbr:expression(this.onFocus=this.blur()); /* for IE */
	}
img, div{
	border:0px;
	}
td{
	padding: 5px;
	font-family: "微軟正黑體";
	font-size: 15px;
	color: #fff;
	text-shadow: 0px 0px 3px #000000;
	}
#index {
	width: 100%;
	min-width: 1200px;
	min-height: 900px;
	background-attachment: scroll;
	background-position: 50% 0%;
    background-image: url(../images/bbg.jpg);
    background-repeat: no-repeat;
	height: 920px;
	background-color: #16130d;
	}
#mask{
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 2;
	background-image: url(../images/upmk.png);
	background-repeat: repeat;
	}
#wrapper{
	width: 100%;
	min-width: 1250px;
	min-height: 920px;
	background-attachment: scroll;
	background-image: url(../images/bg_01.jpg);
	background-repeat: no-repeat;
	background-position: 50% 0%;
	height: 950px;
	position: relative;
    }  
#loo{
	position: absolute;
	width: 32px;
	height: 32px;
	left: 50%;
	top: 50%;
	margin-left: -16px;
	margin-top: -16px;
	background-image: url(../images/loading.gif);
	/*z-index: 5;*/
}
/*<---------------------------------top-----------------------------------*/
.htop{
	height: 800px;
	width: 100%;
	overflow: hidden;
}
.header{
	height: 800px;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	
}
.sky{
	width: 100%;
	text-align: center;
	background-attachment: scroll;
	background-image: url(../images/smoke.png);
	background-repeat: repeat-x;
	background-position: left 10px;
}
.logobox{
	position: relative;
	/*position: absolute;*/
	width: 350px;
	z-index: 2;
	top: 0px;
	left: 100px;
}
.logo{
	position: absolute;
	display: block;
	background-image: url(../images/lo.png);
	background-repeat: no-repeat;
	height: 140px;
	width:350px;
	background-position: 0px 0px;
}
.lobtbox{
	width: 209px;
	margin-right: auto;
	margin-left: auto;
	height: 34px;
}

.btn1{
		    position:relative;
			display:block;
			width:150px;
			height:70px;
			cursor: pointer;
			z-index:100;
			top:672px;
			left:-80px;
			}
.btn2{
		    position:relative;
			display:block;
			width:150px;
			height:70px;
			cursor: pointer;
			z-index:100;
			top:600px;
			left:90px;
			}
.btn3{
		    position:relative;
			display:block;
			width:150px;
			height:80px;
			cursor: pointer;
			z-index:100;
			top:510px;
			left:250px;
			}
.btn4{
		    position:relative;
			display:block;
			width:150px;
			height:70px;
			cursor: pointer;
			z-index:100;
			top:510px;
			left:460px;
			}
.btn5{
		    position:relative;
			display:block;
			width:150px;
			height:70px;
			cursor: pointer;
			z-index:100;
			top:360px;
			left:600px;
			}
.btn6{
		    position:relative;
			display:block;
			width:150px;
			height:80px;
			cursor: pointer;
			z-index:100;
			top:340px;
			left:760px;
			}
.btn7{
		    position:relative;
			display:block;
			width:150px;
			height:80px;
			cursor: pointer;
			z-index:100;
			top:180px;
			left:960px;
			}					


/*.lobt1 {float: left;
			position:relative;
			display:block;
			width:150px;
			height:70px;
			background:url(../images/lobt_01.png) top no-repeat;
			cursor: pointer;
			text-indent:-9999px;
		}	
.lobt1 span.hover {
			position: absolute;
			display: block;
			width:150px;
			height:70px;
			background:url(../images/lobt_01.png) bottom no-repeat;
			text-indent:-9999px;
		}
.lobt2 {float: left;
			position:relative;
			display:block;
			width:99px;
			height:34px;
			background:url(../images/lobt_02.png) top no-repeat;
			cursor: pointer;
			text-indent:-9999px;
		}	
.lobt2 span.hover {
			position: absolute;
			display: block;
			width:99px;
			height:34px;
			background:url(../images/lobt_02.png) bottom no-repeat;
			text-indent:-9999px;
		}*/
/*.slogan{
	height: 301px;
	width: 810px;
	margin: 450px auto 0 auto;
}*/
/*<------------------------------btn--------------------------------------*/
/*.trans{overflow:hidden;position:relative;display:inline-block;cursor:pointer;}
.trans:hover::before{content:" ";opacity:1;filter:alpha(opacity=100);}
.trans::before{content:" ";opacity:0;filter:alpha(opacity=0);position:absolute;left:0;top:0;right:0;bottom:0;transition: opacity 0.3s ease-in-out;-webkit-transition: opacity 0.3s ease-in-out;}
.nav{ width: 1200px; height: 70px;position: absolute; z-index: 5;margin-left: 0px; text-align:center;  left: 0;  top: 700px; background-color:#6F3233; }
.nav a{ width:150px; height: 70px;display: inline-block;margin: 0 10px; }
.nav a.trans::before{width:150px; height: 70px;}

.nav a.btn1.trans{background: url(../images/bt1.png) 0 0 no-repeat; }
.nav a.btn1.trans::before,.nav a.btn1.trans.on{background: url(../images/bt1.png) 0 -65px no-repeat; }
.nav a.btn2.trans{background: url(../images/bt2.png) 0 0 no-repeat; }
.nav a.btn2.trans::before,.nav a.btn2.trans.on{background: url(../images/bt2.png) 0px -65px no-repeat; }
.nav a.btn3.trans{background: url(../images/bt3.png) 0 0 no-repeat; }
.nav a.btn3.trans::before,.nav a.btn3.trans.on{background: url(../images/bt3.png) 0px -65px no-repeat; }*/

/*<------------------------------mid--------------------------------------*/
#content{
	z-index: 5;
	position: absolute;
	top: 770px;
	left: 0px;
	width: 100%;
	height: 200px;
	overflow: hidden;
	
	}

#rbtbox{
	display: none;
	position: absolute;
	height: 213px;
	width: 187px;
	z-index: 99;
	background-image: url(../images/tbtbg.png);
	top: 100px;	
}
.rbt1 {
	position: relative;
	display: block;
	width: 225px;
	height: 136px;
	cursor: pointer;
	text-indent: -9999px;
	background-image: url(../images/mvbg.png);
	background-repeat: no-repeat;
	background-position: 0px top;
	
	margin-right: auto;
	margin-left: auto;
		}	
.rbt1 span.hover {
	position: absolute;
	display: block;
	width: 187px;
	height: 104px;
	text-indent: -9999px;
	background-image: url(../images/rbtbbg.png);
	background-repeat: no-repeat;
	background-position: 0px -213px;
		}
.rbt2 {
	position: relative;
	display: block;
	width: 85px;
	height: 25px;
	cursor: pointer;
	
	background-image: url(../images/musicbg.png);
	background-repeat: no-repeat;

	margin-right: auto;
	margin-left: auto;
		}
#button{

color: #fff;
margin-left: 10px;

}	

.rtopbt{
	width: 36px;
	height: 36px;
	z-index: 10;
	position: absolute;
	margin-top: 160px;
	margin-left: 75px;
	cursor: pointer;
 }
.ev6box{
	float: left;
	width: 300px;
	margin:0 0 0 23px;
}
.ev61000{float: left;
	width: 1000px;
	}
.event6bt230{
	float: left;
	border: 2px solid #006666;
	border-radius: 5px;
	width: 230px;
	height: 30px;
	background-color: #003333;
	margin-top: 20px;
	margin-right: 0px;
	margin-left: 12px;
	font-family: "微軟正黑體";
	font-size: 16px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	display: block;
	cursor: pointer;
	line-height: 30px;
	text-decoration: none;
}
.event6bt230:hover{
	border: 2px solid #FFFF00;
	border-radius: 5px;
	
	background-color: #993300;
	margin-top: 20px;
	margin-right: 0px;
	margin-left: 12px;
	font-family: "微軟正黑體";
	font-size: 16px;
	font-weight: bold;
	color: #FF0;
	text-align: center;
	display: block;
	cursor: pointer;
	line-height: 30px;
}
.event6bt{
	border: 2px solid #F70055;
	border-radius: 5px;
	width: 300px;
	height: 30px;
	background-color: #D8004A;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
	font-family: "微軟正黑體";
	font-size: 16px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	display: block;
	cursor: pointer;
	line-height: 30px;
	text-decoration: none;
}
.event6bt:hover{
	border: 2px solid #FFFF00;
	border-radius: 5px;
	width: 300px;
	height: 30px;
	background-color: #993300;
	margin-right: auto;
	margin-left: auto;
	font-family: "微軟正黑體";
	font-size: 16px;
	font-weight: bold;
	color: #FF0;
	text-align: center;
	display: block;
	cursor: pointer;
	line-height: 30px;
}
/*<------------------------------copy--------------------------------------*/
#cy {
    
	width: 100%;
	height: 200px;
	min-width: 1080px;
	background-image: url(../images/cy.jpg);
	background-repeat: no-repeat;
	background-position: 50% bottom;
	position: relative;
	}
.cybb{
	position: relative;
	margin: 0px auto 0px auto;
	width: 1000px;
	height: 200px;
	}

/*<--------------------------------------------------------------------*/
canvas {
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
}
.hidden{ display: none!important; }
.fbtbox{position: absolute;width:550px;height: 27px; right: 0%;z-index: 2; }
.fbl{width: 10px;height: 27px;background-image: url(../images/fb_02.png); background-repeat: no-repeat;float: left;}
.fb1{width: 80px;height: 27px;background-image: url(../images/fb_01.png);background-repeat: no-repeat;float: left;cursor: pointer;}
.fb2{width: 80px;height: 27px;background-image: url(../images/fb_03.png);background-repeat: no-repeat;float: left;cursor: pointer;}
.fb3{width: 115px;height: 27px;background-image: url(../images/fb_05.png);background-repeat: no-repeat;float: left;cursor: pointer;}
.fb4{width: 84px;height: 27px;background-image: url(../images/fb_07.png);background-repeat: no-repeat;float: left;cursor: pointer;}

.fb1:hover{width: 80px;height: 27px;background-image: url(../images/fb_01.png);background-position: 0px -29px;}
.fb2:hover{width: 80px;height: 27px;background-image: url(../images/fb_03.png);background-position: 0px -29px;}
.fb3:hover{width: 115px;height: 27px;background-image: url(../images/fb_05.png);background-position: 0px -29px;}
.fb4:hover{width: 84px;height: 27px;background-image: url(../images/fb_07.png);background-position: 0px -29px;}