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

/* character.css */

#contents{
	text-align:center;
	position:relative;
}

.hgroup{
	width:980px;
	height:155px;
	text-align:center;
	margin-top:33px;
}

.hgroup h1{
	margin-bottom:45px;
}

.hgroup #snav ul{
	margin-left:2px;
}

.hgroup #snav li{
	float:left;
	margin-right:57px;
}
.hgroup #snav li.last{
	float:left;
	margin-right:0px;
}


/* ----- characterArea ----- */

#characterArea{
	width:980px;
	position:relative;
}

#characterArea.high{
	height:830px;
}

#profileArea.short{
	height:590px !important;
}

#profileArea{
	width:380px;
	height:auto;
	float:left;
	position:relative;
}

#profileArea h2 img{
	position:absolute;
	top:15px;
	left:50px;
	z-index:5;
}

.description{
	width:322px;
	height:auto;
	text-align:left;
	margin:125px 0 15px 57px;
}

.description p{
	font-size:12px;
	color:#5f5f5f;
	line-height:1.8;
}


/* ----- organizationArea ----- */

#organizationArea{
	width:980px;
	position:relative;
}

#organizationArea .section{
	width:620px;
	margin:20px 160px 40px 160px;
}

#organizationArea #symbol{
	width:170px;
	height:auto;
	float:left;
}

#organizationArea #symbolGuide{
	width:450px;
	height:auto;
	float:right;
	text-align:left;
}

#organizationArea #symbolGuide h3{
	margin-bottom:15px;
}

#organizationArea #symbolGuide p{
	font-size:12px;
	color:#5f5f5f;
	margin-bottom:15px;
	line-height:1.6;
}


#organizationArea ul.chara4{
	width:720px;
	margin:0 130px;
}

#organizationArea ul.chara3{
	width:535px;
	margin:0 222px;
}

#organizationArea ul.chara2{
	width:350px;
	margin:0 315px;
}

#organizationArea .section.section3 ul.chara2{
	width:350px;
	margin:0;
}

#organizationArea ul li{
	float:left;
	margin-right:23px;
	margin-bottom:23px;
	display:inline;
}

#organizationArea ul li a{
	display:block;
	height:162px;
	width:162px;
}

#organizationArea ul li.last{
	float:left;
	margin-right:0px;
}

#organizationArea ul li img{
	border:1px #CCC solid;
}


#organizationArea .section.section2, #organizationArea .section.section3{
	width:470px;
	height:400px;
	float:left;
	margin:20px 40px 40px 0;
	position:relative;
}
#organizationArea .section.section2.last, #organizationArea .section.section3.last{
	margin:20px 0 40px 0;
}

#organizationArea #symbol{
	width:170px;
	height:auto;
	float:left;
}

#organizationArea .section2 #symbolGuide, #organizationArea .section3 #symbolGuide{
	width:300px;
	height:auto;
	float:right;
	text-align:left;
}

#organizationArea .section.section2 .clearfix, #organizationArea .section.section3 .clearfix{
	height:220px;
}

#organizationArea .section.section2 .charaThum{
	position:absolute;
	width:162px;
	height:162px;
	top:210px;
	left:200px;
}

#organizationArea .section.section3 .charaThum{
	position:absolute;
	width:162px;
	height:162px;
	top:210px;
	left:70px;
}

#organizationArea .section.section2 img.chara{
	border:1px #CCC solid;
}


/* ----- characterImage & copy ----- */

.thumList{
	width:322px;
	height:auto;
	text-align:left;
	margin-left:57px;
}
.thumList li{
	float:left;
	margin-right:4px;
}
.thumList li.last{
	margin-right:0px;
}


.thumList li img{
	border:1px #d9d9d9 solid;
	filter:alpha(opacity=60);
	-ms-filter:"alpha(opacity=60)"; 
	-moz-opacity:0.6;
	opacity:0.6;
	zoom: 1;
}

.thumList li img:hover{
	border:1px #9f9f9f solid;
	filter:alpha(opacity=80);
	-ms-filter:"alpha(opacity=80)"; 
	-moz-opacity:0.8;
	opacity:0.8;
	zoom: 1;
}
.thumList li a.selected img{
	border:1px #000 solid;
	filter:alpha(opacity=100);
	-ms-filter:"alpha(opacity=100)"; 
	-moz-opacity:1;
	opacity:1;
	zoom: 1;
}


#comingSoon{
	margin:20px 0 0 54px;
}

img#word{
	position:absolute;
	top:0px;
	left:400px;
	z-index:4;
}

#charaImage{
	width:598px;
	height:auto;
	position:absolute;
	right:-600px;
	top:0;
	z-index:2;
}
#charaImage{
	text-align:right;
}



/* ----- slideNav & popUp ----- */

#slideNavL{
	width:44px;
	height:41px;
	position:absolute;
	top:250px;
	left:-20px;
	z-index:5;
}
#slideNavR{
	width:44px;
	height:41px;
	position:absolute;
	top:250px;
	right:-20px;
	z-index:5;
}

.popup em { position:absolute; top:-70px; left:-65px; text-align:center; text-indent:-9999px; z-index:2; display:none; }
.popup.popup1 em{ background:url("../img/tool_1.png") no-repeat; width:189px; height:71px;}
.popup.popup1_1 em{ background:url("../img/tool_lloyd.png") no-repeat; width:189px; height:71px;}
.popup.popup1_2 em{ background:url("../img/tool_elie.png") no-repeat; width:189px; height:71px;}
.popup.popup1_3 em{ background:url("../img/tool_tio.png") no-repeat; width:189px; height:71px;}
.popup.popup1_4 em{ background:url("../img/tool_randy.png") no-repeat; width:189px; height:71px;}
.popup.popup1_5 em{ background:url("../img/tool_kea.png") no-repeat; width:189px; height:71px;}
.popup.popup1_6 em{ background:url("../img/tool_sergei.png") no-repeat; width:189px; height:71px;}
.popup.popup1_7 em{ background:url("../img/tool_zeit.png") no-repeat; width:189px; height:71px;}

.popup.popup2 em{ background:url("../img/tool_2.png") no-repeat; width:189px; height:71px;}
.popup.popup2_1 em{ background:url("../img/tool_dudley.png") no-repeat; width:189px; height:71px;}
.popup.popup2_2 em{ background:url("../img/tool_fran.png") no-repeat; width:189px; height:71px;}
.popup.popup2_3 em{ background:url("../img/tool_noel.png") no-repeat; width:189px; height:71px;}
.popup.popup2_4 em{ background:url("../img/tool_sonya.png") no-repeat; width:189px; height:71px;}

.popup.popup3 em{ background:url("../img/tool_3.png") no-repeat; width:189px; height:71px;}
.popup.popup3_1 em{ background:url("../img/tool_arios.png") no-repeat; width:189px; height:71px;}
.popup.popup3_2 em{ background:url("../img/tool_estelle.png") no-repeat; width:189px; height:71px;}
.popup.popup3_3 em{ background:url("../img/tool_joshua.png") no-repeat; width:189px; height:71px;}

.popup.popup4 em{ background:url("../img/tool_4.png") no-repeat; width:189px; height:71px;}
.popup.popup4_1 em{ background:url("../img/tool_ilya.png") no-repeat; width:189px; height:71px;}
.popup.popup4_2 em{ background:url("../img/tool_rixia.png") no-repeat; width:189px; height:71px;}

.popup.popup5 em{ background:url("../img/tool_5.png") no-repeat; width:189px; height:71px;}
.popup.popup5_1 em{ background:url("../img/tool_lazy.png") no-repeat; width:189px; height:71px;}
.popup.popup5_2 em{ background:url("../img/tool_wald.png") no-repeat; width:189px; height:71px;}

.popup.popup6 em{ background:url("../img/tool_6.png") no-repeat; width:189px; height:71px;}
.popup.popup6_1 em{ background:url("../img/tool_marconi.png") no-repeat; width:189px; height:71px;}
.popup.popup6_2 em{ background:url("../img/tool_garcia.png") no-repeat; width:189px; height:71px;}
.popup.popup6_3 em{ background:url("../img/tool_cao.png") no-repeat; width:189px; height:71px;}
.popup.popup6_4 em{ background:url("../img/tool_yin.png") no-repeat; width:189px; height:71px;}

.popup.popup7 em{ background:url("../img/tool_7.png") no-repeat; width:189px; height:71px;}
.popup.popup7_1 em{ background:url("../img/tool_cecil.png") no-repeat; width:189px; height:71px;}
.popup.popup7_2 em{ background:url("../img/tool_joachim.png") no-repeat; width:189px; height:71px;}




/* ----- footer ----- */

#footer{
	margin-top:40px;
}