body,img,p,h1,h2,h3,h4,h5,h6,form,table,td,ul,ol,li,fieldset,div {margin:0; padding:0; border:0;}
body,html {height:100%}
body {
	margin:0px;
	background-color:#000;
}
a,img{
	outline: none; /* for Firefox */
    hlbr:expression(this.onFocus=this.blur()); /* for IE */	
	border: 0;
	}		
	
/* 區塊 */

#logo {
	position: absolute;
	left: 600px;
	top: 13px;
	width: 439px;
	height: 300px;
	z-index: 1;
	display: block;
	cursor: pointer;
	
}
#tvcf {
	position: absolute;
	left: 79px;
	top: 274px;
	width: 336px;
	height: 172px;
	z-index: 1;
	display: block;
	cursor: pointer;
}
#account {
	position: absolute;
	left:677px;
	top: 387px;
	width: 171px;
	height: 86px;
	z-index: 1;
	display: block;
	cursor: pointer;
}
.teach01 {
	position: absolute;
	left: 799px;
	top: 444px;
	width: 57px;
	height: 28px;
	z-index: 2;
	display: block;
	cursor: pointer;
}
.teach02 {
	position: absolute;
	left: 804px;
	top: 494px;
	width: 37px;
	height: 28px;
	z-index: 2;
	display: block;
	cursor: pointer;
}
#download {
	position: absolute;
	left:848px;
	top: 387px;
	width: 166px;
	height: 86px;
	z-index: 1;
	display: block;
	cursor: pointer;
}
#billing {
	position: absolute;
	left: 677px;
	top: 478px;
	width: 169px;
	height: 54px;
	z-index: 1;
	display: block;
	cursor: pointer;
}
#gift {
	position: absolute;
	left: 848px;
	top: 477px;
	width: 164px;
	height: 55px;
	z-index: 1;
	display: block;
	cursor: pointer;
}
#guide {
	position: absolute;
	left:677px;
	top: 535px;
	width: 170px;
	height: 50px;
	z-index: 1;
	display: block;
	cursor: pointer;
}
#clan{
	position: absolute;
	left: 848px;
	top: 538px;
	width: 167px;
	height: 47px;
	z-index: 1;
	display: block;
	cursor: pointer;
}
#lg{
	position: absolute;
	left:852px;
	top: 591px;
	width: 152px;
	height: 77px;
	z-index: 1;
	display: block;
	cursor: pointer;
	}
#gamer{
	position: absolute;
	left: 701px;
	top: 616px;
	width: 44px;
	height: 44px;
	z-index: 1;
	display: block;
	cursor: pointer;
}
#gamebase{
	position: absolute;
	left: 662px;
	top: 616px;
	width: 44px;
	height: 44px;
	z-index: 1;
	display: block;
	cursor: pointer;
}
#fb-1{
	position: absolute;
	left: 751px;
	top: 616px;
	width: 44px;
	height: 44px;
	z-index: 1;
	display: block;
	cursor: pointer;
}
#fb{
	position: absolute;
	left: 802px;
	top: 616px;
	width: 44px;
	height: 44px;
	z-index: 1;
	display: block;
	cursor: pointer;
}
#cy {
	width:100%;
	height:63px;
	background-attachment: scroll;
	background-image: url(../images/cy.gif);
	background-repeat: no-repeat;
	background-position: 50% 100%;
	position:relative;	
	cursor: pointer;
	position: fixed;
	z-index: 1;
	bottom:-55px;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
}
#ba{
	position:absolute;
	width:100%;
	height:100%;
	background-attachment: scroll;
	background-image: url(../images/index.jpg);
	background-repeat: no-repeat;
	background-position: 50% 0%;
}
#content {
	position:relative;
	margin: 0px auto;
	width:1000px;
	height:100%;
	min-height:720px;
	background-attachment: scroll;
	background-image: url(../images/index.jpg);
	background-repeat: no-repeat;
	background-position: 50% 0%;
}
#particles-js {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#gai {
	position:absolute;
	/* top: 0; */
    left: 0;
    right: 0;
    bottom: 1%;
    width: 169px;
    height: 244px;    
	z-index: 10;
	animation: shake-bottom 2s both linear infinite;
	pointer-events: none;
}

#mai {
	position:absolute;
	/* top: 0; */
    /* left: 0; */
    right: 35%;
    bottom: 1%;
    width: 169px;
    height: 244px;    
	z-index: 10;
	animation: shake-bottom 2s both linear infinite;
	pointer-events: none;
}

#wu {
	position:absolute;
	top: 1%; 
    left: 0;
    right: 0;
    /* bottom: 20%; */
    width: 169px;
    height: 244px;    
	z-index: 10;
	animation: vibrate-1 1s both linear infinite;
	pointer-events: none;
}

#su {
	position:absolute;
	top: 1%; 
    /*  left: 0; */
    right: 10%;
    /* bottom: 20%; */
    width: 169px;
    height: 244px;    
	z-index: 10;
	animation: shake-horizontal 5s both linear infinite;
	pointer-events: none;
}

#lin {
	position:absolute;
	top: 35%; 
    /*  left: 0; */
    right: 1%;
    /* bottom: 20%; */
    width: 169px;
    height: 244px;    
	z-index: 10;
	animation: vibrate-1 1s both linear infinite;
	pointer-events: none;
}


.con {
	position:relative;
	margin: 0px auto;
	width:1000px;
	
}
.cct{
	position:absolute;
	width:35px;
	height:23px;
	background-attachment: scroll;
	background-image: url(../images/cc.png);
	background-repeat: no-repeat;
	background-position: 50% 0%;
	top:-22px;
	right:0;
	}
@media screen and (min-height:700px)
{
 /* #cy
  {
	position: fixed;
	z-index: 1;
	bottom:0;
  }*/
}

@-webkit-keyframes shake-bottom {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }
  10% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
}
@keyframes shake-bottom {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }
  10% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
}

@-webkit-keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px);
  }
}
@keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px);
  }
}

@-webkit-keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-5px, 5px);
    transform: translate(-5px, 5px);
  }
  40% {
    -webkit-transform: translate(-5px, -5px);
    transform: translate(-5px, -5px);
  }
  60% {
    -webkit-transform: translate(5px, 5px);
    transform: translate(5px, 5px);
  }
  80% {
    -webkit-transform: translate(5px, -5px);
    transform: translate(5px, -5px);
  }
  100% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}
@keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-5px, 5px);
    transform: translate(-5px, 5px);
  }
  40% {
    -webkit-transform: translate(-5px, -5px);
    transform: translate(-5px, -5px);
  }
  60% {
    -webkit-transform: translate(5px, 5px);
    transform: translate(5px, 5px);
  }
  80% {
    -webkit-transform: translate(5px, -5px);
    transform: translate(5px, -5px);
  }
  100% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}