@import url("../../css/_reset.css");
@import url("jquery.fancybox.css");
@import url(http://fonts.googleapis.com/css?family=Fjalla+One);/* font-family: 'Fjalla One', sans-serif; */
body { background-color: #FFF;margin:0;padding:0; }
#container {}
#xlegend_head { z-index:44; position:relative;}
#nav a,#footer a,#btn a { text-indent: -99999px; display:inline-block;}
h1,h2,h3 {text-indent: -999999px;height:0px;overflow:hidden; position:absolute;}
#logo,#slogan,#subject {position:absolute;}
#logo {background:url('logo.png') left top no-repeat;width:275px;height:169px;left:50%;margin-left:-480px;z-index:4;top:55px;}
#slogan {background:url('slogan.png') left top no-repeat;width:454px;height:227px;left:50%;margin-left:-480px;top:390px;z-index:4;}
#subject {background:url(subject.png) left top no-repeat;width:410px;height:164px;z-index:4;left:50%;margin-left:-210px;top:630px;}
ul li {list-style-type:none;}
#pattern {background:url('pattern.gif'); position:absolute;width:100%;height:100%;top:0px;z-index:2;}
#bg {position: relative;z-index:1;height:690px;overflow:hidden;}
#crossSlide {height:690px;}
#indexchar { position:absolute;background: url('char.png') left top no-repeat;width:826px;height:713px;top:45px;z-index:3;left:50%;margin-left:-300px;}
/*-------------------------------------------------------------------------------------------------------------------------------------
nav
-------------------------------------------------------------------------------------------------------------------------------------*/
#nav {background:url('menu_bg.png') top repeat-x;height:106px;overflow:hidden; position:absolute;width:100%;z-index:3;top:640px;padding:20px 0 0;}
#nav ul {width:773px;height:85px;position:relative;left:50%;margin-left:-430px;}
#nav li {position:absolute;}
#nav a {background:url('menu.png') left top no-repeat;display:block;height:25px;}
#nav .nav_1 {left:0px;top:0px;}
#nav .nav_1 a {width:217px;}
#nav .nav_1 a:hover {background-position:0px -85px;}

#nav .nav_2 {right:0px;top:0px;}
#nav .nav_2 a {width:137px;background-position:-636px 0px;}
#nav .nav_2 a:hover {background-position:-636px -85px;}

#nav .nav_3 {left:0px;bottom:0px;}
#nav .nav_3 a {width:217px;background-position:0px -60px;}
#nav .nav_3 a:hover {background-position:0px -145px;}


#nav .nav_4 {right:0px;bottom:0px;}
#nav .nav_4 a {width:136px;background-position:-636px -60px;}
#nav .nav_4 a:hover {background-position:-636px -145px;}

/*-------------------------------------------------------------------------------------------------------------------------------------
btn
-------------------------------------------------------------------------------------------------------------------------------------*/
#btn { position:relative;z-index:3;padding:60px 0 200px;width:1010px;margin:0 auto;}
#btn li {float:left;}
#btn a {background:url('btn.gif') left top no-repeat;width:186px;height:76px;margin:0 8px;display:block;}

#btn .btn_1 a {background-position:0px 0px;}
#btn .btn_1 a:hover {background-position:0px -76px;}

#btn .btn_2 a {background-position:-202px 0px;}
#btn .btn_2 a:hover {background-position:-202px -76px;}


#btn .btn_4 a {background-position:-606px 0px;}
#btn .btn_4 a:hover {background-position:-606px -76px;}

#btn .btn_5 a {background-position:-808px 0px;}
#btn .btn_5 a:hover {background-position:-808px -76px;}

#btn .btn_3 a { text-indent:0px;background:none;}
/*-------------------------------------------------------------------------------------------------------------------------------------
footer
-------------------------------------------------------------------------------------------------------------------------------------*/
#footer { position: fixed; _position: absolute; z-index: 12; bottom: 0; width: 100%; min-width: 695px; height: 60px; background:url('/images/intro_121219/bg_footer.gif') repeat-x #fff; }
#copyright { max-width: 950px; min-width: 695px; margin: 0 auto; padding-top: 10px;z-index:4; position:relative;}
#copyright .icon { float: left; margin: 0 20px; width: 43px; height: 43px; background:url('/images/intro_121219/icon_15.gif') no-repeat; text-indent: -99999px; }
#copyright #center { margin: 8px auto 0; width: 500px; padding-right: 32px}
#center li.logo { float: left; display: block; width: 104px; height: 25px; margin-right: 10px; background:url('/images/intro_121219/icon_logo.gif') no-repeat; }
#center li.txt { float: left; margin-top: 8px; font-size: 11px; color: #000; font-family: Arial; }
#copyright .share { float: right; margin: 6px 17px 0; width: 120px; }
#copyright .share li a { float: left; display: block; width: 24px; height: 38px; margin: 0 3px; background:url('/images/intro_121219/icon_share.png') no-repeat; }
#copyright .share li.fb a { background-position: 0 0; }
#copyright .share li.plurk a { background-position: -24px 0; }
#copyright .share li.youtube a { background-position: -48px 0; }
#copyright .share li.vip a { background-position: -72px 0; }

/*-------------------------------------------------------------------------------------------------------------------------------------
page
-------------------------------------------------------------------------------------------------------------------------------------*/
#pages {position:absolute; z-index:20;width:100%;height:100%;background:#000;top:0px;left:0px;overflow:hidden;}
#close {position:absolute;background:url('clsoe.png') left top no-repeat;width:93px;height:32px; z-index:22; right:0px;top:50px;}
.content {width:1000px;margin:90px auto 0px;color:#fff; position:relative;z-index:22;}

.content:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .content                { zoom: 1;height:1%; } /* IE6 */
*:first-child+html .content    { zoom: 1;min-height:1%; } /* IE7 */


.tabContent:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .tabContent             { zoom: 1;height:1%; } /* IE6 */
*:first-child+html .tabContent { zoom: 1;min-height:1%; } /* IE7 */
.bg {position:absolute;width:100%;height:100%;left:0px;top:0px; z-index:21;}
*:first-child+html .pages_box {padding-top:45px;}
/*scene*/
#scene h3 {background:url('title_1.png') left top no-repeat;width:541px;height:41px;}
#scene .boxTop {height:78px;}
.tabNav {float:right;height:35px;}
.tabNav li {float:left;}
.tabNav li a {display:block; text-indent:-99999px;background:url('scene_nav.png') left top no-repeat;height:35px;width:139px;margin:0 3px;}
.tabNav .tabnav1 a {}
.tabNav .tabnav1 a:hover,.tabNav .tabnav1.active a {background-position:0px -35px;}

.tabNav .tabnav2 a {background-position:-146px 0px;}
.tabNav .tabnav2 a:hover,.tabNav .tabnav2.active a {background-position:-146px -35px;}

.tabNav .tabnav3 a {background-position:-292px 0px;}
.tabNav .tabnav3 a:hover,.tabNav .tabnav3.active a {background-position:-292px -35px;}

#scene .imgContainer {float:left; }
#scene .textContent {float:right;}

.imgContainer {position:relative;border:2px solid #000;}
.imgSlide img {float:left;}
.imgContainer .prev,.imgContainer .next { position:absolute;top:70%;background:url('img_arrow.png') left top no-repeat; text-indent:-99999px;height:35px;width:38px;}
.imgContainer .prev {left:0px;}
.imgContainer .next {right:0px;background-position:right top;}

/*copy*/
#copy h3 {background:url('title_2.png') left top no-repeat;height:41px;position:relative;margin-bottom:15px;}

#copy .txt {margin-bottom:15px;}
#copy .master {float:left;}
#copy .imgContainer {float:right;}

/*char*/
#char h3 {background:url('title_3.png') left top no-repeat;height:41px;width:541px;margin-bottom:15px;}
#char .imgContainer {float:right;}
#char .tabNav {margin-bottom:15px;}
#char .text {clear:both;margin-bottom:10px; position:relative; z-index:32;}
#char .textContent{position: relative;width:500px;margin:-30px 0 0 50px;z-index:31;}

#char .tabNav li a {display:block; text-indent:-99999px;background:url('char_nav.png') left top no-repeat;height:35px;width:119px;margin:0 3px;}
#char .tabNav .tabnav1 a {}
#char .tabNav .tabnav1 a:hover,#char .tabNav .tabnav1.active a {background-position:0px -35px;}

#char .tabNav .tabnav2 a {background-position:-126px 0px;}
#char .tabNav .tabnav2 a:hover,#char .tabNav .tabnav2.active a {background-position:-126px -35px;}

#char .tabNav .tabnav3 a {background-position:-252px 0px;}
#char .tabNav .tabnav3 a:hover,#char .tabNav .tabnav3.active a {background-position:-252px -35px;}