@charset "utf-8";

/* ----------------------------------------
  page Style Seet
	2- 0.index
---------------------------------------- */

/* ----------------------------------------
  2-0. index
---------------------------------------- */

#bgMovie{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	min-width:1100px;
	padding:0;
}

#bgMovie img{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
}

#topOverlay{
	background:url(../images/index/overlay.png) repeat left top;
	width:100%;
	min-width:990px;
	min-height:780px;
	position:absolute;
	left:0px;
	top:0px;
	display:block !important;
}

.noVideoBg{
	background:url(../images/index/bg_novideo.jpg) repeat left top !important;
}

#topOverlay #topCharacter .bgchara{
	width:100%;
	display:none;
	z-index:2;
	position:relative;
}
#topOverlay #topCharacter .bgchara img{
	position:absolute;
	top:0px;
}

#topOverlay #topCharacter .bgchara img.left{left:0px;}
#topOverlay #topCharacter .bgchara img.right{right:0px;}

#topOverlay #coverMovie{
	position:absolute;
	left:0px;
	top:544px;
	height:240px;
	width:100%;
	background: url(../images/index/cover_movie.png) repeat-x left bottom;
	z-index:5;
}

#topOverlay #coverMovie img{
	position:absolute;
	bottom:0px;
}

#topOverlay #coverMovie img.left{left:0px;}
#topOverlay #coverMovie img.right{right:0px;}

#topBnr{
	position:relative;
	z-index:3;
	text-align:center;
	padding:12px 0;
	min-width:1010px;
	background:url(../images/index/bg_topbnr.png) repeat-x left top;
}

#topBnr ul{overflow:hidden;}
#topBnr ul li{
	display:inline-block;
	margin:0 5px;
}

#topLogo{
	padding:180px 0 40px 0;
	text-align:center;
}

#topInfo{
	width:980px;
	height:220px;
	position:relative;
}

#topInfo ul{
	padding:65px 0 0 114px;
}

#topInfo ul li{
	font-size:13px;
	line-height:1.5;
}
#topInfo ul li .date{
	color:#65D6FD;
	display:block;
}

#topInfo ul li a{color:#fff;}

#topInfo .btnMore{
	position:absolute;
	left:530px;
	bottom:22px;
	width:78px;
	height:24px;
}

#topMovie{
	position:absolute;
	right:-10px;
	top:-17px;
}

#topMovie a{
	display:block;
	width:337px;
	height:215px;
	overflow:hidden;
}

#topMovie a:hover{background-position:left bottom;}


/* ----------------------------------------
  2-1. system
---------------------------------------- */

#pageSystem{
	background: #E0DDE6;
	background-size:100%;
}

#sideNav nav.systemNav{}
#sideNav nav.systemNav ul{}
#sideNav nav.systemNav ul li{}
#sideNav nav.systemNav ul li a{}

#sideNav nav.systemNav ul li a.current img{opacity:1 !important;}

#system01,#system02,#system03,#system04,#system05{
	width:724px;
	margin-bottom:10px;
	position:relative;
}

#system01{
	background: url(../images/system/bg_system1.png) no-repeat left top;
	height:556px;
}
#system02{
	background: url(../images/system/bg_system2.png) no-repeat left top;
	height:690px;
}
#system03{
	background: url(../images/system/bg_system3.png) no-repeat left top;
	height:576px;
}
#system04{
	background: url(../images/system/bg_system4.png) no-repeat left top;
	height:605px;
}
#system05{
	background: url(../images/system/bg_system5.png) no-repeat left top;
	height:700px;
}

#system01 p,
#system02 p,
#system03 p,
#system04 p,
#system05 p{
	padding:475px 35px 0;
	color:#fff;
}
#system05 p{padding-top:515px;}
#system02 ul{padding:510px 0 0 69px;}
#system02 ul li{
	float:left;
	margin:0 0 5px 0;
}
#system02 ul li a{}
#system02 ul li a.current img{opacity:1 !important;}

#system02 .sytem02Picture{
	position:absolute;
	width:661px;
	height:403px;
	left:30px;
	top:75px;
}
#system02 .sytem02Picture #pict0{padding-top:3px;}

#system02 .sytem02Picture .pict{display:none;}

#system02 .sytem02Picture #pictBack{
	padding-top:10px;
	text-align:center;
	display:none;
}

#system05 .mainSlide{
	position:absolute;
	left:33px;
	top:94px;
	width:658px;
}

#system05 .bx-pager{
	text-align:center;
	padding:10px 0;
}
#system05 .bx-pager-item{
	display:inline-block;
	width:20px;
	margin:0 5px;

}
#system05 .bx-pager-item a{
	display:block;
	overflow:hidden;
	text-indent:-99em;
	width:20px;
	height:20px;
	background: url(../images/system/slider_off.png) no-repeat left top;
}
#system05 .bx-pager-item a.active{
	background: url(../images/system/slider_on.png) no-repeat left top;
}

#system05 .bx-controls-direction{
	position:absolute;
	left:0px;
	top:150px;
	width:100%;
}

#system05 .bx-controls-direction a{
	display:block;
	position:absolute;
	top:0px;
	width:43px;
	height:75px;
	overflow:hidden;
	text-indent:-99em;
}

#system05 .bx-controls-direction .bx-prev{
	left:-20px;
	background:url(../images/common/btn_back.png) no-repeat left top;
}

#system05 .bx-controls-direction .bx-next{
	right:-20px;
	background:url(../images/common/btn_next.png) no-repeat left top;
}

/* ----------------------------------------
  2-2. movie
---------------------------------------- */

#pageMovie{
	background: url(../images/movie/bg.png) no-repeat center top #E8E7EC;
	background-size:100%;
}

#pageMovie .container{
	overflow: visible;
	position:relative;
}

#pageMovie .container .pageLogo{
	bottom:10px;
}

#movieList{
	padding:50px 0 110px 0;
}
#movieList ul{
	margin:0 auto;
	width:1250px;
	overflow:hidden;
	text-align:center;
	margin-left:-140px;
}
/*
#movieList ul li:first-child{
	display:block;
	margin:0 auto;
	float:none;
}
*/
#movieList ul li{
	display:inline-block;
	margin-bottom:10px;
	position:relative;
	width:376px;
	height:242px;
}
#movieList ul li a{
	display:block;
	width:376px;
	height:242px;
}


/* ----------------------------------------
  2-3. location
---------------------------------------- */

#pageLocation{
	background: #E0DDE6;
	background-size:100%;
	padding-top:120px;
}

#sideNav nav.locationNav{}
#sideNav nav.locationNav ul{}
#sideNav nav.locationNav ul li{
	width:259px;
	height:91px;
	position:relative;
}
#sideNav nav.locationNav ul li .bgLocationNav{
	position:absolute;
	left:0px;
	top:0px;
	z-index:3;
	opacity:1;
}
#sideNav nav.locationNav ul li a{
	position:absolute;
	left:0px;
	top:0px;
	z-index:5;
	width:199px;
	height:73px;
	display:block;
	padding:18px 20px 0 40px;
	color:#fff;
	text-decoration: none;
	line-height:1.6;
	font-size:12px;
}
#sideNav nav.locationNav ul li a.current{background:url(../images/location/sidenavi_on.png) no-repeat left top;}


.locationBox{
	width:725px;
	position:relative;
	padding:0px 0 0px 0;
	margin-bottom:90px;
}

.locationBoxTop{
	width:723px;
	padding-top:16px;
	height:65px;
	background: url(../images/location/bg_location_top.png) no-repeat left top;
	background-size:723px;
}

.locationBoxMid{
	width:723px;
	background: url(../images/location/bg_location.png) repeat-y left top;
	background-size:723px;
}

.locationBoxTop h3{
	background: url(../images/location/bg_title.png) no-repeat left top;
	width:675px;
	height:40px;
	line-height:40px;
	color:#fff;
	padding:0 0 0 40px;
	margin-left:6px;
	font-size:17px;
	font-weight:normal;
	z-index:2;
	position:relative;
}
.locationBox:after{
	content:' ';
	width:723px;
	height:90px;
	position:absolute;
	left:0px;
	bottom:-90px;
	background: url(../images/location/bg_location_bottom.png) no-repeat left bottom;
	background-size:723px;
}



.locationBox h4{
	background: url(../images/location/bg_area.png) no-repeat left top;
	width:151px;
	height:30px;
	line-height:30px;
	color:#fff;
	padding:0 0 0 26px;
	margin:0 0 5px 16px;
	font-size:13px;
	z-index:2;
	position:relative;
}

.locationBox .locationDate{
	background: url(../images/location/bg_date.png) no-repeat left top;
	width:263px;
	height:48px;
	color:#fff;
	line-height:48px;
	padding:0 0 0 100px;
	margin:0 0 13px 12px;
}

.locationBox .locationAddress{
	padding:0 30px 0px 40px;
	position:relative;
	color:#fff;
	margin-bottom:10px;
}
.locationBox .locationAddress p{
	margin-bottom:20px;
}


.locationBox .locationAddress .locationBtn{
	display:block;
	overflow:hidden;
	width:276px;
	height:46px;
	position:absolute;
	right:20px;
	bottom:5px;
}

.locationBox .locationAddress .locationBtn a{display:block;}

.locationBox .locationMap{
	width:650px;
	height:230px;
	margin:0 0 25px 40px;
}

.locationBox .aligncenter{
	color:#fff;
	text-align:center;
}

.locationBox .aligncenter p{padding-top:10px;}


/* ----------------------------------------
  2-4. character
---------------------------------------- */

#pageCharacter{
	background: url(../images/character/bg.png) no-repeat center top #F4F3F6;
	background-size:100%;
	padding-top:80px;
}

#pageCharacter .container,
#characterDetail .container{
	overflow: visible;
	position:relative;
}

#characterList{padding:0px 0 0 0;}
#characterList ul{
	position:relative;
	width:100%;
	height: 680px;
}
#characterList ul li{
	position:absolute;
}
#characterList ul li a{
	display:block;
	overflow:hidden;
}

#characterList ul li.character1{left:-10px;top:148px;}
#characterList ul li.character2{left:160px;top:-23px;}
#characterList ul li.character3{left:320px;top:185px;}
#characterList ul li.character4{left:480px;top:-30px;}
#characterList ul li.character5{left:640px;top:136px;}
#characterList ul li.character6{left:800px;top:-30px;}

#characterList ul li.character1 a{height:391px;}
#characterList ul li.character2 a{height:395px;}
#characterList ul li.character3 a{height:385px;}
#characterList ul li.character4 a{height:395px;}
#characterList ul li.character5 a{height:383px;}
#characterList ul li.character6 a{height:395px;}

#characterList ul li a:hover{background-position: left bottom;}

#characterDetail{}
.characterDetailBox{
	position:relative;
	height:747px;
}
.characterDetailBox p{
	position:absolute;
	left:72px;
	top:297px;
	line-height:1.8;
	color:#fff;
	width:410px;
}

.characterDetailBox ul{
	position:absolute;
	left:18px;
	top:510px;
	width:400px;
	line-height: 1.0;
}

.characterDetailBox ul li{
	float:left;
}

.characterDetailBox ul li a{
	display:block;
	overflow:hidden;
	line-height: 1.0;
}

.pageLogo{
	position:absolute;
	right:-100px;
	bottom:30px;
	width:277px;
	text-align:center;
}

.pageLogo .btnBack{
	position:relative;
	top:5px;
	display:block;
	margin-left:0px;
}


/* chara1 */

#pageCharacter1{
	background: url(../images/character/01/bg.png) no-repeat center top #E0DDE6;
	background-size:100%;
	padding:0px;
}
#pageCharacter1 #characterDetail{
	background: url(../images/character/01/bg_chara.png) no-repeat center top;
	height:747px;
}
#pageCharacter .container{overflow: visible;}

/* chara2 */

#pageCharacter2{
	background: url(../images/character/02/bg.png) no-repeat center top #E0DDE6;
	background-size:100%;
	padding:0px;
}
#pageCharacter2 #characterDetail{
	background: url(../images/character/02/bg_chara.png) no-repeat center top;
	height:747px;
}


/* chara3 */

#pageCharacter3{
	background: url(../images/character/03/bg.png) no-repeat center top #E0DDE6;
	background-size:100%;
	padding:0px;
}
#pageCharacter3 #characterDetail{
	background: url(../images/character/03/bg_chara.png) no-repeat center top;
	height:747px;
}


/* chara4 */

#pageCharacter4{
	background: url(../images/character/04/bg.png) no-repeat center top #E0DDE6;
	background-size:100%;
	padding:0px;
}
#pageCharacter4 #characterDetail{
	background: url(../images/character/04/bg_chara.png) no-repeat center top;
	height:747px;
}


/* chara5 */

#pageCharacter5{
	background: url(../images/character/05/bg.png) no-repeat center top #E0DDE6;
	background-size:100%;
	padding:0px;
}
#pageCharacter5 #characterDetail{
	background: url(../images/character/05/bg_chara.png) no-repeat center top;
	height:747px;
}


/* chara6 */

#pageCharacter6{
	background: url(../images/character/06/bg.png) no-repeat center top #E0DDE6;
	background-size:100%;
	padding:0px;
}
#pageCharacter6 #characterDetail{
	background: url(../images/character/06/bg_chara.png) no-repeat center top;
	height:747px;
}


/* ----------------------------------------
  2-5. portal
---------------------------------------- */

#portalMovie{
	position:absolute;
	left:-10%;
	top:0px;
	width:120%;
	padding:0;
	z-index:1;
}

#portalMovie img{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
}

#portalOverlay{
	background:url(../images/portal/overlay.png) repeat left top;
	width:100%;
	min-width:990px;
	min-height:710px;
	position:absolute;
	left:0px;
	top:0px;
	display:block !important;
	z-index:3;
}

.noVideoBgPortal{background:url(../images/portal/bg_novideo.jpg) repeat left top !important;}

#portal{
	position:relative;
	width:650px;
	margin:0 auto;
	padding:70px 0 90px;
	z-index:5;
}

#portal h1{
	text-align:center;
	margin:0;
	padding:0;
}

#portal #portalBtnArea{
	height:75px;
}

#portal #portalBtnArea a{
	display:block;
	width:305px;
	height:55px;
	overflow:hidden;
	float:left;
	margin:0 0 0 160px;
}

#portalNews{
	background: url(../images/portal/bg_news.png) no-repeat left top;
	width:374px;
	height:163px;
	padding:65px 35px 40px 35px;
	margin:0 0 0 80px;
}

#portalNewsBody{
	width:374px;
	height:163px;
	overflow-y:scroll;
}

#portalNewsBody ul{}
#portalNewsBody ul li{
	padding:25px 0 0 0;
	position:relative;
	margin-bottom:7px;
	font-size:12px;
}

#portalNewsBody ul li.forum{background: url(../images/portal/icon_forum.png) no-repeat left top;}
#portalNewsBody ul li.official{background: url(../images/portal/icon_offiicial.png) no-repeat left top;}


#portalNewsBody ul li .date{
	display:block;
	background: url(../images/portal/bg_date.png) no-repeat left top;
	width:100px;
	height:23px;
	position:absolute;
	left:70px;
	top:0px;
	color:#ACAEC4;
	font-size:12px;
	line-height:23px;
	text-align:center;
}

#portalNewsBody ul li a{
	color:#EBECEE;
}

.jspContainer{
	overflow: hidden;
	position: relative;
}

.jspPane{position: absolute;}

.jspVerticalBar{
	position: absolute;
	top: 0;
	right: 0;
	width: 16px;
	height: 100%;
	background:;
}

.jspHorizontalBar{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 12px;
	background: red;
}

.jspCap{display: none;}
.jspHorizontalBar .jspCap{float: left;}

.jspTrack{
	background: url(../images/portal/bg_bar.png) no-repeat;
	position: relative;
}

.jspDrag{
	background: url(../images/portal/bar.png) repeat-y left top;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
}

.jspDragTop,
.jspDragBottom{
	position:absolute;
	left:0px;
	width:12px;
	height:6px;
}
.jspDragTop{
	top:0px;
	background: url(../images/portal/bar_top.png) no-repeat left top;
}
.jspDragBottom{
	bottom:0px;
	background: url(../images/portal/bar_bottom.png) no-repeat left top;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag{
	float: left;
	height: 100%;
}

.jspArrow{
	background: #50506d;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
	padding: 0;
	margin: 0;
}

.jspArrow.jspDisabled{
	cursor: default;
	background: #80808d;
}

.jspVerticalBar .jspArrow{height: 16px;}

.jspHorizontalBar .jspArrow{
	width: 16px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus{outline: none;}

.jspCorner{
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}


/* ----------------------------------------
  2-6. command
---------------------------------------- */

#pageCommand{
	background: #F4F3F6;
	background-size:100%;
	padding-top:120px;
}

#pageCommand #mainColumn{
	width:680px;
}

#pageCommand #sideNav{width:305px;}

#sideNav nav.commandNav{width:319px;}
#sideNav nav.commandNav ul{}
#sideNav nav.commandNav ul li{
	float:left;
	width:159px;
}
#sideNav nav.commandNav ul li:first-child{
	width:319px;
}
#sideNav nav.commandNav ul li.adjust{
	position:relative;
	left:-12px;
}

#sideNav nav.commandNav ul li a{display:block;}

#sideNav nav.commandNav ul li a.current img{opacity:1 !important;}

.commandWrapper{
	margin-bottom:10px;
}
.commandWrapper:after{
	content:".";
	height:0;
	clear:both;
	display:block;
	visibility:hidden;
}
.commandWrapper img{
	float:left;
	position:relative;
}