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

/** base **/
html,
body{
	height:100%;	
	overflow:hidden;
}
body{
	position:relative;
	min-width:1200px;
	font-family:"Dotum", "Arial", sans-serif;	
	font-size:12px;
	color:#333;
}



.posNum{
	position:fixed;
	left:50%;
	top:50%;
	width:300px;
	height:50px;
	margin:-25px 0 0 -150px;
	background:#111;
	color:#fff;
	font-size:20px;
	font-weight:bold;
	text-align:center;
	line-height:50px;
	z-index:9999;
	display:none;
}



h1{
	position:absolute;
	left:45px;
	top:33px;
	z-index:99;	
}


/** gnb **/

.gnb .open{
	position:absolute;
	right:56px;
	top:45px;
	z-index:99;
}

.gnb .innerGnb{
	position:absolute;
	right:-320px;
	top:0;
	width:320px;
	height:100%;
	background:url(../images/common/pt.png);	
	z-index:98;
}
.gnb .innerGnb .close{
	position:absolute;
	right:56px;
	top:45px;
	z-index:99;
}



.gnb .innerGnb .title{
	height:45%;
	position:relative;
	min-height:200px;
}
.gnb .innerGnb .title > img{
	position:absolute;
	left:40px;
	bottom:60px;	
}


.gnb .innerGnb .menuScroll{
	height:50%;
	padding-left:40px;
	position:relative;
	overflow:hidden;
}
.gnb .innerGnb .menuScroll .naviJs{
	
}
.gnb .innerGnb .menuScroll .naviJs li{
	width:32px;
	border-bottom:solid 1px #8c7b5a;
	height:30px;
	padding-top:40px;
	overflow:visible !important;
}
.gnb .innerGnb .menuScroll .naviJs li a{	
	width:120px;
	display:block;
	height:11px;
	text-indent:-9999px;
}
.gnb .innerGnb .menuScroll .naviJs .menu01{
	padding-top:0;	
}
.gnb .innerGnb .menuScroll .naviJs .menu01 a{
	width:48px;
	background:url(../images/common/menu01.png) no-repeat left top;
}

.gnb .innerGnb .menuScroll .naviJs .menu02 a{
	width:106px;
	background:url(../images/common/menu02.png) no-repeat left top;
}

.gnb .innerGnb .menuScroll .naviJs .menu03 a{
	width:100px;
	background:url(../images/common/menu03.png) no-repeat left top;
}

.gnb .innerGnb .menuScroll .naviJs .menu04 a{
	width:68px;
	background:url(../images/common/menu04.png) no-repeat left top;
}

.gnb .innerGnb .menuScroll .naviJs .menu05 a{
	width:92px;
	background:url(../images/common/menu05.png) no-repeat left top;
}

.gnb .innerGnb .menuScroll .naviJs .menu06 a{
	width:59px;
	background:url(../images/common/menu06.png) no-repeat left top;
}

.gnb .innerGnb .menuScroll .naviJs .menu07 a{
	height:44px;
	background:url(../images/common/menu07.png) no-repeat left top;
}



/** scrollBox **/
.scrollBox{
	min-width:1200px;
	height:100%;
	position:relative;
}

.scrollBox .wrap{
	min-width:1200px;
	position:relative;
	overflow:hidden;	
}

.scrollBox .wrap > div{
	height:1080px;
	position:relative;
	overflow:hidden;
	
}

.scrollBox .wrap .objs > li{
	position:absolute;
	left:50%;	/* 브라우저 창의 크기에 따라 반응을 해야 해서 가운데 기준을 잡는다 */
}

/*-----마우스 위치값 영역------------------------------------*/
#text {
	position: absolute;
	left: 50%;
	top: 412px;
	margin-left: 500px;
}
#go {
	position: absolute;
	left: 50%;
	top: 465px;
	margin-left: 623px;
}


/*-----마우스 위치값 영역------------------------------------*/



/** Scene01 **/
#scene01{
	background:url(../images/scene01/bg.jpg) no-repeat center top;
}
#scene01 .obj01{
	top:160px;
	margin-left:-520px;
	z-index:2;
}
#scene01 .obj02{
	left:0;
	top:718px;
	width:100%;
	overflow:hidden;
	height:200px;
}
#scene01 .obj02 .colaList{
	position:absolute;
	left:50%;
	width:2400px;
	margin-left:-1186px;
}
#scene01 .obj02 .colaList > li{
	float:left;
	margin:0 35px;
}
#scene01 .obj03{
    margin-left: -591px;
    top: 581px;
}
#scene01 .obj03 .hand{
	width:304px;
	height:370px;
	background:url(../images/scene01/left_hand.png) no-repeat left top;
}
#scene01 .obj03 .spark{
	position:absolute;
	right:0;
	top:97px;
	width:131px;
	height:130px;
	background:url(../images/scene01/spark.png) no-repeat left top;
	display:none;
}
#scene01 .obj04{
    margin-left: 174px;
    top: 541px;
}
#scene01 .obj04 .hand{
	width:462px;
	height:450px;
	background:url(../images/scene01/right_hand.png) no-repeat left top;
}
#scene01 .obj04 .spark{
	position:absolute;
	left:66px;
	top:164px;
	width:131px;
	height:130px;
	background:url(../images/scene01/spark.png) no-repeat left top;
	display:none;
}
#scene01 .obj05{
	top:918px;
	margin-left:-86px;
}
#scene01 .obj06{
	top:180px;
	margin-left:-848px;
}
#scene01 .obj07{
	top:176px;
	margin-left:-545px;
}
#scene01 .obj08{
	left:0;
	top:auto;
	bottom:0;
}
#scene01 .obj09{
	top:690px;
	margin-left:-790px;
}
#scene01 .obj10{
	top: 553px;
    margin-left: -430px;
}
#scene01 .obj11{
	top: 521px;
    margin-left: -228px;
}



/** Scene02 **/
#scene02{
	height:7560px;
}
#scene02 .innerBox{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:1080px;	
	background:url(../images/scene02/bg.jpg) no-repeat center top;
}

#scene02.bottom .innerBox{
	top:auto;
	bottom:0;
}

#scene02.fixed .innerBox{
	position:fixed;
}
#scene02.fixed .innerBox .objs > li{
	position:fixed;
}
#scene02 .obj01{
	top:266px;
	margin-left:-470px;
}
#scene02 .obj01 p{
	margin-bottom:40px;
}
#scene02 .obj02{
	top:180px;
	margin-left:-760px;
}
#scene02 .obj02 .opaList li{
	position:absolute;
	left:0;
	top:0;	
}
#scene02 .obj03{
	margin-left:370px;
	top:390px;
	width:106px;
	height:327px;
	background:url(../images/scene02/lv_bg01.png) no-repeat left top;
}
#scene02 .obj03 > div{
	position:absolute;
	left:3px;
	bottom:21px;
	width:20px;
	background:url(../images/scene02/them.png) no-repeat left bottom;
	height:274px;
}
#scene02 .obj03 > div p{
	margin-top:-2px;
	width:20px;
	height:5px;
	background:url(../images/scene02/them.png) no-repeat left top;
}

#scene02 .obj03 > .best{
	position:absolute;
	left:0;
	top:200px;
	padding:20px 0 0 56px;
	background:url(../images/scene02/star.png) no-repeat left top;	
	display:none;
}

#scene02 .obj03 .lv02{
	background-position:-20px bottom;
}
#scene02 .obj03 .lv02 p{
	background-position:-20px top;
}

#scene02 .obj03 .lv03{
	background-position:-40px bottom;
}
#scene02 .obj03 .lv03 p{
	background-position:-40px top;
}

#scene02 .obj03 .lv04{
	background-position:-60px bottom;
}
#scene02 .obj03 .lv04 p{
	background-position:-60px top;
}





/** Scene03 **/
#scene03{
	background:url(../images/scene03/bg.jpg) no-repeat center top;
}
#scene03 .content{
	padding:104px 0 0 0;
	text-align:center;	
}
#scene03 .content p{
	margin-bottom:56px;	
}

/** Scene04 **/
#scene04{
	background:url(../images/scene04/bg.jpg) no-repeat center top;
	height:2160px;
}
#scene04 .content{
	padding:52px 0 0 0;
	text-align:center;	
}
#scene04 .content .c01{
	margin-bottom:95px;	
}
#scene04 .content .c02{
	margin-bottom:122px;
}

/** Scene05 **/
#scene05{
	background:url(../images/scene05/bg.jpg) no-repeat center top;
}
#scene05 .obj01{
	top:84px;
	margin-left:-410px;	
}
#scene05 .obj02{
	top:355px;
	margin-left:-134px;	
	text-align:center;
	width:268px;
	height:650px;
	text-align:center;
	background:url(../images/scene05/can.png) no-repeat center 100px;
}
#scene05 .obj03{
	top:588px;
	margin-left:170px;	
}
#scene05 .obj04{
	top:588px;
	margin-left:-405px;	
}
#scene05 .obj05{
	top:684px;
	margin-left:74px;	
}
#scene05 .obj06{
	top:696px;
	margin-left:-416px;	
}
#scene05 .obj07{
	top:810px;
	margin-left:-410px;	
}
#scene05 .obj08{
	top:806px;
	margin-left:68px;	
}
#scene05 .obj09{
	top:990px;
	margin-left:-100px;	
}

/** Scene06 **/
#scene06{
	background:url(../images/scene06/bg.jpg) no-repeat center top;
}
#scene06 .content{
	padding-top:86px;
}
#scene06 .content p{
	margin-bottom:75px;
	text-align:center;	
}
#scene06 .content .slides{
	position:absolute;
	width:2000px;
	height:780px;
	left:50%;
	top:270px;
	margin-left:-1000px;
	text-align:center;
}
#scene06 .content .slidesjs-previous{
	position:absolute;
	left:50%;
	top:466px;
	margin-left:-530px;
	z-index:60;
	width:19px;
	height:37px;
	background:url(../images/scene06/prev.png) no-repeat left top;
	text-indent:-9999px;
}
#scene06 .content .slidesjs-next{
	position:absolute;
	left:50%;
	top:466px;
	margin-left:513px;
	z-index:60;
	width:19px;
	height:37px;
	background:url(../images/scene06/next.png) no-repeat left top;
	text-indent:-9999px;
}

#scene06 .content .slidesjs-pagination{
	position:absolute;
	left:50%;
	top:475px;
	width:978px;
	height:195px;
	margin-left:-489px;
	z-index:60;	
	background:url(../images/scene06/line.png) no-repeat center 119px;
	font-size:0;
}
#scene06 .content .slidesjs-pagination > li{
	display:inline-block;
	margin:0 30px;
	position:relative;
}
#scene06 .content .slidesjs-pagination > li  a{
	font-size:12px;
	display:block;
	width:54px;
	height:195px;
	text-indent:-9999px;
}
#scene06 .content .slidesjs-pagination > li a span{
	width:17px;
	height:17px;
	background:url(../images/scene06/on.png) no-repeat left top;
	position:absolute;
	left:50%;
	margin-left:-8px;
	top:112px;
	display:none;
}
#scene06 .content .slidesjs-pagination > li .active span{
	display:block;
}
#scene06 .content .slidesjs-pagination > .list1 a{
	background:url(../images/scene06/page01.png) no-repeat left top;
}
#scene06 .content .slidesjs-pagination > .list2 a{
	background:url(../images/scene06/page02.png) no-repeat left top;
}
#scene06 .content .slidesjs-pagination > .list3 a{
	background:url(../images/scene06/page03.png) no-repeat left top;
}
#scene06 .content .slidesjs-pagination > .list4 a{
	background:url(../images/scene06/page04.png) no-repeat left top;
}
#scene06 .content .slidesjs-pagination > .list5 a{
	background:url(../images/scene06/page05.png) no-repeat left top;
}
#scene06 .content .slidesjs-pagination > .list6 a{
	background:url(../images/scene06/page06.png) no-repeat left top;
}
#scene06 .content .slidesjs-pagination > .list7 a{
	background:url(../images/scene06/page07.png) no-repeat left top;
}

/** Scene07 **/
#scene07{
	background:url(../images/scene07/bg.jpg) no-repeat center top;
}
#scene07 .content{
	padding-top:66px;
	text-align:center;
}
#scene07 .obj01{
	top:352px;
	margin-left:-522px;	
}
#scene07 .obj02{
	top:564px;
	margin-left:-392px;	
}

#scene07 .obj03{
	top:437px;
	margin-left:-177px;	
}
#scene07 .obj04{
	top:406px;
	margin-left:87px;	
}
#scene07 .obj05{
	top:522px;
	margin-left:318px;	
}
#scene07 .obj06{
	top:332px;
	margin-left:428px;	
}
#scene07 .obj07{
	top:auto;
	bottom:-20px;
	margin-left:-888px;	
}
#scene07 .obj08{
	top:auto;
	bottom:0;
	margin-left:-308px;	
}
#scene07 .obj09{
	top:auto;
	left:auto;
	right:0;
	bottom:0;
}
#scene07 .obj10{
	top:auto;
	left:0;
	bottom:0;
}













