@charset "utf-8";

a,img {
	outline:none; /* for Firefox */
    hlbr:expression(this.onFocus=this.blur()); /* for IE */	
	}
html {font-size:75%;}
body {
	font-size:1rem;
	word-wrap: break-word;
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
	}
.border-box {
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari */
	}
#bg {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: 50% 0%;
	background-size: cover;
	}
#main{
	position: absolute;
	width: 100%;
	top:0;
	left:0;
	z-index: 1;
	overflow: hidden;
	}
.content {
	position:relative;
	width:1000px;
	margin:0 auto;
	}

/* nav menu */	
#menu-box{/*position:absolute;*/ }
#menu {
	position:fixed;
	width:100%;
	min-width:1000px;
	height:59px;
	z-index:3;
	left:0;
	top:0;
	background-image: url(../images/pc-menu-background.png);
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position: 50% 0%;
	}
#menu .content {
	padding-left:135px;
	}
#menu .content li a{
	float: left;
	height: 59px;
	display: block;
	cursor: pointer;
	background-position: 50% 0px;
	background-repeat: repeat;	
	}
#menu .content li a:hover{
	background-position: 50% 59px;
	}
.menu-home {
	width:96px;
	background-image: url(../images/menu_home.png);
	}
.menu-story {
	width:124px;
	background-image: url(../images/menu_story.png);
	}
.menu-character {
	width:149px;
	background-image: url(../images/menu_character.png);
	}
.menu-system {
	width:150px;
	background-image: url(../images/menu_system.png);
	}
.menu-cast {
	width:226px;
	background-image: url(../images/menu_cast.png);
	}	
	
/*sp  menu switch */
#sp-menu-switch {
	position:fixed;
	width:66px;
	height:66px;
	z-index:5;
	top:4px;
	right:6px;
	background-image:url(../images/sp-menu-list.png);
	background-size:contain;
	display:block;
	cursor: pointer;
	display:none;
}
	
/* Copyright & Game rating */
footer {background-color:#262320;}
#copyright {background-color:#262320;color:#FFF;}
#copyright .content {
	padding:25px 45px 23px 45px; 
	overflow:auto;
	}
.rating {float:right;width:5%;}
.rating img {width:100%;}
.content-text {
	float:left;
	width:78.8%;
	font-size:1.1rem;
	line-height:1.5rem;
	color:#ccc7c2;
	margin-left: 15px;
	}
.ateam-logo {float:left;width:16%;}
.ateam-logo img {width:100%;}
.ateam-link {width: 40%;margin:0 auto;}
.cy-link-line {
	text-align:center;
	padding:20px 8px 20px 8px;
	background-attachment: scroll;
	background-image: url(../images/cy_line.gif);
	background-repeat: repeat-x;
	background-position: 0% 100%;
	margin-bottom:10px;
	}
.ateam-link li{
	width:30%;
	display:inline-block;
	font-size:1.2rem;
	line-height:1.2rem;
	text-align:center;
	margin:-4px;
	}
.ateam-link li span{color:#FFF;text-decoration:none;cursor: pointer;display:iblock;}
.ateam-link li span:hover{color:#ff8000;text-decoration:none;}
.interval-line{
	border-width:0 1px 0 1px ;
	border-style:none solid none solid;
	border-color: #67615a;
	}
.cy-box {
	background-attachment: scroll;
	background-image: url(../images/cy_line.gif);
	background-repeat:repeat-x;
	background-position: 0% 100%;
	padding:3px 3px 20px 3px ;
	}
.cy-download {
	width:55%;
	display:inline-block;
	text-align:left;
	margin:-4px;
	}
.cy-download span{width:32%;margin:1px;display:inline-block;cursor:pointer;}
.cy-download img{width:100%;}
.cy-directions {
	width:44%;
	padding-left:15px;
	display:inline-block;
	font-size:1.2rem;
	line-height:2rem;
	text-align:left;
	margin:-4px;
	}

/* sp */

@media only screen and (max-width:640px){
	.content {width:100%;}
	
	/* nav menu */	
	#menu {
		height:100%;
		min-width:inherit;
		background-image: url(../images/black-background.png);
		background-repeat:repeat;
		display:none;
		}
	#menu .content {padding-top:70px;padding-left:0px;text-align:center;}
	#menu .content li{
		background-image: url(../images/sp_menu_bg.png);
		background-repeat:repeat-x;
		background-position:0% 100%;
		padding-top:5px;
		padding-bottom:5px;
		}
	#menu .content li:hover{background-color:rgba(0, 0, 0, 0.3);}
	#menu .content li a{
		float:none;
		display:inline-block;
		}
	/*sp  menu switch */
	#sp-menu-switch {display:block;}
	.menu-home {
		width:100%;
		background-image: url(../images/sp_menu_home.png);
		}
	.menu-story {
		width:100%;
		background-image: url(../images/sp_menu_story.png);
		}
	.menu-character {
		width:100%;
		background-image: url(../images/sp_menu_character.png);
		}
	.menu-system {
		width:100%;
		background-image: url(../images/sp_menu_system.png);
		}
	.menu-cast {
		width:100%;
		background-image: url(../images/sp_menu_cast.png);
		}
	
	/* Copyright & Game rating */
	
	#copyright .content {
		padding-left:15px;
		padding-right:15px;
		}
	.rating {width:10%;}
	.content-text {
		width:64%;
		line-height:1.5rem;
		}
	.ateam-logo {width:25%;}
	.ateam-link {width:100%;}
	.cy-download {width:100%;text-align:center;}
	.cy-directions {width:100%;padding:15px 10px 0 5px;}
	}
@media only screen and (max-width:480px){
	
	/* Copyright & Game rating */
	.rating {width:15%;}
	.content-text {width:84%;}
	.ateam-logo {float:inherit;height:38px;}
	.ateam-logo img{width:auto;height:100%; }	
	.cy-download span{width:85%;}
	}
@media only screen and (max-width:330px){
	
	/*sp  menu switch */
	#sp-menu-switch {
		width:50px;
		height:50px;
		right:3px;
		}
	
	}