@charset "utf-8";



/* --------------------------------------------------------
*common
-------------------------------------------------------- */
html, body{
  	background:#000;
	position:relative;
	overflow-y:hidden;
}
#wrapper{
	overflow-x:hidden;
}





/*************************************************************

 GROBAL MODULES

*************************************************************/
#fixedlogo {
  position: fixed;
  top: 20px;
  right: 18px;
  z-index:12;
  display:none;
}


/*-------------------------------------------------------
 #fixedBar
-------------------------------------------------------*/
#fixedBar {
	position: fixed;
	height: 30px;
	width: 100%;
	bottom: 0;
	left:0px;
	background: #000;
	z-index: 100;
	box-shadow:0 3px 10px #000;
}

/**** #soundBtn ****/
#fixedBar #soundBtn {
	position: absolute;
	top: 7px;
	left: 19px;
}
#fixedBar #soundBtn p {
	width: 98px;
	height: 13px;
	overflow: hidden;
	cursor: pointer;
}
#fixedBar #soundBtn p.on {
	background: url(../img/soundBtn_img_02.png) no-repeat;
}
#fixedBar #soundBtn p.off {
	background: url(../img/soundBtn_img_01.png) no-repeat;
	display: none;
}

/**** #copyright ****/
#fixedBar #copyright {
  position: absolute;
  right: 150px;
  top: -4px;
}
#fixedBar #scroll {
  position: absolute;
  text-align: center;
  left: 50%;
  top: -4px;
  width:38px;
  margin:0 0 0 -19px;
}
#fixedBar #scroll ul li {
  height: 11px;
}

/**** #SNS btn ****/
#s_nav{
	position:absolute;
	bottom:3px;
	right:10px;
}
#s_nav li{
	float:left;
	padding:0 6px 0 0;
	
}
/**** scrollBtn ****/
#scrollBtn{
	display:none;
}
#scrollBtn a{
	background: #000 url(../img/scroll_ico_01.png?v=2) no-repeat center 10px;
	height:30px;
	width:400px;
	margin:0 auto;
	z-index:1000;
	display:block;
}

/*-------------------------------------------------------
 #fixedBar
-------------------------------------------------------*/
#fixedPageLink{
	position: fixed;
	bottom: 38px;
	right:7px;
	background: rgba(255, 255, 255, 0.4);
	z-index:100;
	padding:6px 0 6px 6px;
	display:none;
}
#fixedPageLink a{
	color:#DFDDDD;
	text-decoration:none;
}
#fixedPageLink ol li{
	margin:0 ;
	padding:0 6px 0 0;
	float:left;
	position:relative;
}
#fixedPageLink ol li a.active span{
	border:1px solid #ccc;
	position:absolute;
	z-index:10;
	top:0px;
	left:0px;
	width:39px;
	height:39px;
}



/*************************************************************

 ANIMATIONS LAYOUT

*************************************************************/

/**** scene Block ****/
.sceWrap{
	/*position:absolute;
	top:0px;
	left:0px;*/
	position:relative;
	width:100%;
	height:100%;
	box-shadow:0 5px 20px #000;
	background:#000;
}
.sceWrap .sce{
	width:100%;
	height:100%;
	overflow:hidden;
	position:relative;
	
}
.sceWrap .sce .sce_in{
	/*background: rgba(255, 173, 0, 0.25);*/
	width:960px;
	height:540px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-295px 0 0 -480px;
}


/**** scene Block ****/
.bg {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.bg img {
  width: 100%;
  height: auto;
/*  transition-property: width, height;
  transition-duration:0.6s;*/
}

/*
.bg_mask {
  width: 100%;
  height: 100%;
  background: #FFF;
  position: absolute;
  z-index:10;
  left: 0px;
  top: 0px;
}
*/








.hide{
	display:none;
}

.anim{
  display: none;
}
.debug{
	/*background: rgba(255, 255, 0, 0.25);*/
}

.textBlock{
	position:relative;
}
.winMx{
	width:100%;
	height:100%;
}






/*-------------------------------------------------------
 LOADING */ #loading { z-index:13; } /*
-------------------------------------------------------*/
#loading{
	background:#000;
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}
#loading .textBlock {
	text-align:center;
}
#loading #spin{
	position:absolute;
	top:50%;
	left:50%;
	margin:-12px 0 0 -12px;
	background:url(../img/spin.gif) no-repeat center;
	width:24px;
	height:24px;
}
#loading #scrollGuide{
	position:absolute;
	top:50%;
	left:50%;
	margin:50px 0 0 -132px;
}


/*-------------------------------------------------------
 SCENE0 */ #sce00 { z-index:12; } /*
-------------------------------------------------------*/
#sce00{
	background:#000;
	position:absolute;
	top:0px;
	left:0px;
}
#sce00 .textBlock #lia_text {
  position: absolute;
  width: 250px;
  overflow: hidden;
  left: 50%;
  top: 50%;
  margin:-13px 0 0 -125px;
}
#sce00 .textBlock #lia_text dl {
  overflow: hidden;
  *zoom: 1;
  float: left;
}
#sce00 .textBlock #lia_text dl dt,
#sce00 .textBlock #lia_text dl dd {
  float: left;
}
#sce00 .textBlock #lia_text dl.x1 {
  width: 45px;
}
#sce00 .textBlock #lia_text dl.x2 {
  width: 112px;
}
#sce00 .textBlock #lia_text dl.x3 {
  margin-right: 0;
}
#sce00 .textBlock .logo {
  position: absolute;
  left: 50%;
  top: 50%;
  margin:-16px 0 0 -94px;
}


/*-------------------------------------------------------
 SCENE1 */ #sce01 { z-index:11; } /*
-------------------------------------------------------*/
#sce01{
	background:#fff;
}
#sce01 .textBlock{
	width:145px;
	margin:0 auto 5px;
}
#sce01 .textBlock .text01{
	float:right;
	margin:10px 0 0 0;
}
#sce01 .textBlock .text02{
	float:left;
	margin:10px 0 0 0;
}
#sce01 .logo{
	text-align: center;
}


/*-------------------------------------------------------
 SCENE2 */ #sce02 { z-index:10; } /*
-------------------------------------------------------*/
#sce02{
	background:#fff;
}
#sce02 .textBlock{
	padding:45px 0 0 21px;
}
#sce02 .textBlock .text01{
	position:absolute;
	z-index:-1;
}


/*-------------------------------------------------------
 SCENE3 */ #sce03 { z-index:9; } /*
-------------------------------------------------------*/
#sce03{
	background:#000;
}
#sce03 .text01 {
  position: absolute;
  bottom: 0px;
  left:0px;
}
#sce03 .bg_mask {
  width: 100%;
  height: 100%;
  background: #FFF;
  position: absolute;
  z-index:10;
  right: 0px;
  top: 0px;
  box-shadow:0px 0px 30px #000;
}


/*-------------------------------------------------------
 SCENE4 */ #sce04 { z-index:8; } /*
-------------------------------------------------------*/
#sce04{
	background:#fff;
}
#sce04 .text01{
	position:absolute;
	bottom:0px;
	left:0px;
}


/*-------------------------------------------------------
 SCENE5 */ #sce05 { z-index:7; } /*
-------------------------------------------------------*/
#sce05{
	background:#000;
}
#sce05 .text01{
	position:absolute;
	bottom:40px;
	right:0px;
}

/*
#sce05 .bg {
  display: block;
  position: static;
  overflow: hidden;
  margin-right: 1000px;
}*/
#sce05 .bg_wrap {
  z-index: -1;
  width: 0%;
  height: 100%;
  position: absolute;
  top:0px;
  left:0px;
  overflow: hidden;
}



/*-------------------------------------------------------
 SCENE6 */ #sce06 { z-index:6; } /*
-------------------------------------------------------*/
#sce06 .textBlock{
	padding:0 0 0 115px;
}


/*-------------------------------------------------------
 SCENE7 */ #sce07 { z-index:5; } /*
-------------------------------------------------------*/
#sce07{
	background:#fff;
	position:relative;
}
#sce07 .textBlock{
	padding:20px 0 0 355px;
}
#sce07 .textBlock .anim01,
#sce07 .textBlock .anim02{
	position:relative;
	z-index:-10;
}
#sce07 .textBlock .anim03{
	position:absolute;
	top:20px;
	right:3px;
	z-index:20;
}