/* ANIMATION presently webkit-only */
@-webkit-keyframes fade {
             from {
               opacity: 0.0;
			   /*-webkit-transform: translate(-100px,0px);*/
             }
             to {
               opacity: 1.0;
			   
             }
            }
@-webkit-keyframes page1 {
             from {
               opacity: 0.0;
			   -webkit-transform: translate(0px,0px);
			   -webkit-transform: scale(1,0.2); 
             }
             to {
               opacity: 1.0;
			   
             }
            }
			
@-webkit-keyframes page2 {
             from {
               opacity: 0.0;
			   -webkit-transform: translate(0px,0px);
			   -webkit-transform: scale(0.7,0.7); 
             }
             to {
               opacity: 1.0;
			   
             }
            }
			
*{
	/* Page reset */
}

html,
body{
	display:table-cell;
	vertical-align:middle;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader;
	font-family:Arial, Helvetica, sans-serif;
	color:#CCC;
	width:100%;
	height: 100%;
	margin:0;
	padding:0;
	overflow:hidden; /*disable Scrollbar*/
	/*height:3000px*/
	-webkit-text-size-adjust:none; /*解除CHROME的字體大小限制*/
}

html {
	display:table;
}

#body1{
	max-width:1280px;
	margin:auto;
	display:block;
	
}

#body_bg{
	position:absolute;
	z-index:10;
	width:1280px;
	margin:auto;
	display:block;
	border:1px solid red;
	height:768px;
	
}

h1,h2{
	
}

a, a:visited {
	
}

a:hover{
	
}

#preloader {
	top: 50%;
	left: 50%;
	position:absolute;
	z-index:1000;
	width: 300px;
	height: 150px;
	margin-left: -150px;
	margin-top: -75px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #DDD;
	text-align: center;
	letter-spacing: 5px;
    }

#iAmRequireFlash{
	display: none;
	background-color:#000000;
	padding:0px;
	margin: 0px auto;
	position:absolute;
	width:100%;
	height:600px;
	z-index:1000;
}

#iAmIconBar{	
	display: none;
	padding:0px;
	position:absolute;
	top:15px;
	right:20px;
	width:220px;
	z-index:80;
}

#iAmVidPv{
	/*border:1px solid lime;*/
	display: none;
	position:fixed;
	right:0px;
	bottom:124px;
	width:160px;
	height:84x;
	z-index:200;
	background-image: url(../images/vid_pv_bg.gif);
}

#iAmLogoTop{
	display: none;	
	padding:0px;
	position:absolute;
	top:15px;
	left:20px;
	width:150px;
	height:120px;
	z-index:80;
}

#iAmLogoDown{
	display: none;	
	padding:0px;
	position:absolute;
	bottom:25px;
	right:10px;
	width:70px;
	height:87px;
	z-index:80;
}

#iAmTitle{
	display: none;
	left:10px;
	padding:0px;
	position:absolute;
	top:10px;
	width:768px;
	height:60px;
	z-index:70;
}

#iAmBar{
	display: none;
	position:fixed;
	bottom:0;
	margin: 0px auto;
	width: 1920px;
	left: 50%;
	margin-left: -960px;
	height: 30px;
	z-index:11;
	background:url(../images/bar01.png);
	background-repeat:repeat-x;
}

#iAmRegion{
	display: none;	
	padding:0px;
	position:absolute;
	bottom:0px;
	left:20px;
	width:90px;
	height:30px;
	z-index:1000;
}

/*#iAmContentOP_Old{
	border:1px solid yellow;
	padding:0px;
	position: absolute;
	top:0;
	margin: 0px auto;
	width: 100%;
	height: 660px;
	overflow:hidden;
	z-index:11;
}*/

#iAmContentLoading{
	margin: 0px auto;
	position:relative;
	top:0px;
	width: 500px;
	height: 100%;
	z-index:1030;
	padding: 0px;
	vertical-align: middle;
}


/* BG Resize Solution #02 From: http://css-tricks.com */
.bg02 {
			/* Set rules to fill background */
			min-height: 100%;	min-width: 1024px;
			
			/* Set up proportionate scaling */
			width: 100%;	height: auto;
			
			/* Set up positioning */
			position: fixed;	top: 0;	left: 0;
		}
		
@media screen and (max-width: 1024px){
.bg02 {
		left: 50%;	margin-left: -512px; }
}
#bg_pages {
	position:fixed;	width:100%;	height:100%; z-index:10;}

#iAmOP_Bg_00{
	display:none;
	top: 50%;
	left: 50%;
	position: absolute;
	width: 1920px;
	height: 1080px;
	margin-left: -960px;
	margin-top: -540px;
	-webkit-animation-name: fade;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function:ease-in;
	-webkit-animation-direction:normal;
}

#iAmOP_Bg_01{
	display:none;
	top: 50%;
	left: 50%;
	position: absolute;
	width: 1600px;
	height: 960px;
	margin-left: -800px;
	margin-top: -480px;
	-webkit-animation-name: page2;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function:ease-in;
	-webkit-animation-direction:normal;
}

#iAmOP_Bg_02{
	display:none;
	top: 50%;
	left: 50%;
	position: absolute;
	width: 1600px;
	height: 960px;
	margin-left: -800px;
	margin-top: -480px;
	-webkit-animation-name: page2;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function:ease-in;
	-webkit-animation-direction:normal;
}

#iAmPage_Ani{
	display: none;
	padding:0px;
	margin: 0px auto;
	position: absolute;
	top:0px;
	width: 100%;
	height: 100%;
	z-index:1000;
}

#iAmContentOP_bg{
	display:none;
	top: 50%;
	left: 50%;
	position:absolute;
	z-index:30;
	width: 1600px;
	height: 960px;
	margin-left: -800px;
	margin-top: -480px;
}

#iAmContentOP{
	left: 50%;	position: absolute;	width: 980px;	height:320px;	margin-left: -490px;	bottom:260px;	z-index:50; 
	/*MAIN PAGE
	padding:0px;
	margin: 0px auto;
	position:relative;
	bottom:32px;
	width: 980px;
	height: 360px;
	z-index:35;*/
}

#iAmContentOP1{
	/*border:1px solid #0F0;*/
	/*CHARACTERS PAGE*/
	margin-left: -640px;
	margin-top: -360px;
	top: 50%;
	left: 50%;
	padding:0px;
	position:absolute;
	width: 1280px;
	height: 720px;
	z-index:35;
	-webkit-animation-name: page1;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function:ease-out;
	-webkit-animation-direction:normal;
}

#iAmContentOP2{
	/*NEWS */
	/*border:1px solid #0F0;*/
	margin-left: -490px;
	margin-top: -220px;
	top: 50%;
	left: 50%;
	display: none;
	padding:0px;
	position:absolute;
	width: 980px;
	height: 440px;
	z-index:30;
	-webkit-animation-name: page1;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function:ease-out;
	-webkit-animation-direction:normal;
}

#iAmContentOP3{
	/*FOR FIREFOX & CHROME*/
	/*display: none;*/
	padding:0px;
	margin: 0px auto;
	position:relative;
	top:-40px;
	width: 980px;
	height: 560px;
	z-index:30;
	-webkit-animation-name: page1;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function:ease-out;
	-webkit-animation-direction:normal;
}

#iAmContentOP4{
	/*GameGuide */
	padding:0px;
	margin: 0px auto;
	position:relative;
	top:0px;
	width: 1280px;
	height: 720px;
	z-index:35;
	-webkit-animation-name: page1;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function:ease-out;
	-webkit-animation-direction:normal;
}

#iAmContent_1280{
	/*DOWNLOAD PAGES*/
	display: none;
	margin-left: -640px;
	margin-top: -360px;
	top: 44%;
	left: 50%;
	padding:0px;
	position:absolute;
	width: 1280px;
	height: 720px;
	z-index:35;
	-webkit-animation-name: page1;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function:ease-out;
	-webkit-animation-direction:normal;
}

/*
#iAmContentOP_Inner{
	display: none;
	border:1px solid #0F0;
	padding:0px;
	margin: 0px auto;
	position:relative;
	top:0;
	width: 900px;
	height: 260px;
}*/

#iAmContentBg{
	display: none;
	padding:0px;
	margin: 0px auto;
	position:relative;
	width: 980px;
	height:660px;
	background-image: url(../images/scroll_01.gif);
	background-repeat: no-repeat;
	background-position: center top;
	z-index:30;
}

#iAmContent_Char{
	padding:0px;
	margin: 0px auto;
	position:relative;
	width: 100%;
	z-index:30;
}

#iAm_Arrow_01{	
	margin-top: -53px;
	top: 50%;
	padding:0px;
	position: absolute;
	left:-11px;
	width:130px;
	height:106px;
	z-index:1000;
}

#iAm_Arrow_02{	
	margin-top: -53px;
	top: 50%;
	padding:0px;
	position: absolute;
	right:-11px;
	width:130px;
	height:106px;
	z-index:1000;
}

#TEST2{
	background-color:#DCF4F9;
	border:1px solid white;
	padding:15px;
	position:absolute;
}
/*
#iAmMenuBar{
	border:1px solid red;
	background-color:#000000;
	padding: 0px;
	margin: 0px auto;
	position:relative;
	bottom:10px;
	width:800px; 
	height:76px;
	z-index:11;
}*/
    
#iAmBottom{
	padding: 0px;
	margin: 0px auto;
	position: absolute;
	bottom: 0px;
	width: 100%;
	height:40px;
	background-image: url(../images/bottom_bar_bg.png);
	background-repeat: repeat-x;
	z-index:1000;
}
    
#iAmCopyright{
	left: 50%;
	bottom: 0px;
	display: none;
	padding: 0px;
	position: absolute;
	width: 1920px;
	height:32px;
	margin-left: -960px;
	z-index:1000;
}
.news_date {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #FC0;
	font-weight:100;
}
.news_caption {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #AAA;
	font-weight:100;
}
.news_content {
	font-family: "微軟正黑體", Arial, Helvetica;
	font-size: 16px;
	color: #FFF;
	font-weight: bold;
	line-height: 32px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.copyright {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #CCC;
	vertical-align: middle;
	font-weight: normal;
}
.download {
	font-family: Arial, Helvetica;
	font-size: 12px;
	color: #CCC;
	font-weight:bold;
}