ul {list-style-type: none;}
li {width:192px;list-style-type: none;}

.off {margin:0;}
.on {position:relative;}

/* 01 */
.view_w{
	width:195px;
	height:auto;
	font-size:14px;
	position:absolute;
	top:110px;
	list-style-type: none;
}
#whats {
	width:195px;
	height:45px;
    list-style:none;
	z-index:1;
    float:left;
	background-color:#FFF;
}

div#whats a{
    display:block;
    height:36px;
    text-indent:100px;
	background-image:url(../img/menu/01_whats.jpg);
    overflow:hidden;
}
a.whats{
    background-position:0px 0px;
}
a:hover.whats{
    background-position:0px -36px;
}


/* 02 */
.view_c{
	width:211px;
	height:auto;
	font-size:14px;
	position:absolute;
	top:155px;
	list-style-type: none;
}
.hdc {display: none; position:absolute; top:1px; left:145px; z-index:100; }
.hdc a {display: block; width: 100%; height:100%; }
.hdc a:hovr {background-color: #dfffff}
.on .hdc{display: block;}
#character {
	width:185px;
	height:45px;
    list-style:none;
	z-index:1;
    float:left;
	background-color:#FFF;
}
div#character a{
    display:block;
    height:36px;
    text-indent:100px;
	background-image:url(../img/menu/02_character.jpg);
    overflow:hidden;
}
a.character{
    background-position:0px 0px;
}
a:hover.character{
    background-position:0px -36px;
}


/* 03 */
.view_s {
	width:211px;
	height:auto;
	font-size:14px;
	position:absolute;
	top:200px;
	list-style-type: none;
}
.hds { display: none; position:absolute; top:3px; left:92px; z-index:100; }
.hds a {display: block; width: 100%; height:100%;}
.hds a:hovr {background-color: #dfffff}
.on .hds{display: block}
#system {
	width:132px;
	height:45px;
    list-style:none;
	z-index:1;
    float:left;
	background-color:#FFF;
}

div#system a{
    display:block;
    height:36px;
    text-indent:100px;
	background-image:url(../img/menu/03_system.jpg);
    overflow:hidden;
}
a.system{
    background-position:0px 0px;
}
a:hover.system{
    background-position:0px -36px;
}


/* 05 */
.view_d{
	width:211px;
	height:auto;
	font-size:14px;
	position:absolute;
	top:245px;
	list-style-type: none;
}
.hdd {display: none; position:absolute; top:0px; left:145px; z-index:100; }
.hdd a {display: block; width: 100%; height:100%; }
.hdd a:hovr {background-color: #dfffff}
.on .hdd{display: block}
#download {
	width:184px;
	height:45px;
    list-style:none;
	z-index:1;
    float:left;
	background-color:#FFF;
}

div#download a{
    display:block;
    height:36px;
    text-indent:100px;
	background-image:url(../img/menu/05_download.jpg);
    overflow:hidden;
}
a.download{
    background-position:0px 0px;
}
a:hover.download{
    background-position:0px -36px;
}


/* 06 */
.view_p{
	width:211px;
	height:auto;
	font-size:14px;
	position:absolute;
	top:290px;
	list-style-type: none;
}
.hdp {display: none; position:absolute; top:1px; left:189px; z-index:100; }
.hdp a {display: block; width: 100%; height:100%; }
.hdp a:hovr {background-color: #dfffff}
.on .hdp{display: block}
#package {
	width:228px;
	height:45px;
    list-style:none;
	z-index:1;
    float:left;
	background-color:#FFF;
}

div#package a{
    display:block;
    height:36px;
    text-indent:100px;
	background-image:url(../img/menu/06_package.jpg);
    overflow:hidden;
}
a.package{
    background-position:0px 0px;
}
a:hover.package{
    background-position:0px -36px;
}


/* 07 */
.view_q{
	width:100px;
	height:auto;
	font-size:14px;
	position:absolute;
	top:335px;
	list-style-type: none;
}
#qa {
	width:100px;
	height:45px;
    list-style:none;
	z-index:1;
    float:left;
	background-color:#FFF;
}

div#qa a{
    display:block;
    height:36px;
    text-indent:100px;
	background-image:url(../img/menu/07_qa.jpg);
    overflow:hidden;
}
a.qa{
    background-position:0px 0px;
}
a:hover.qa{
    background-position:0px -36px;
}

/* 08 */
.view_v{
	width:100px;
	height:auto;
	font-size:14px;
	position:absolute;
	top:400px;
	list-style-type: none;
}

/* 04 */
.view_h{
	width:132px;
	height:auto;
	font-size:14px;
	position:absolute;
	top:380px;
	list-style-type: none;
}
.hdh {display: none; position:absolute; top:1px; left:93px; z-index:100; }
.hdh a {display: block; width: 100%; height:100%; }
.hdh a:hovr {background-color: #dfffff}
.on .hdh{display: block}
#h {
	width:132px;
	height:45px;
    list-style:none;
	z-index:1;
    float:left;
	background-color:#FFF;
}

div#h a{
    display:block;
    height:36px;
    text-indent:100px;
	background-image:url(../img/menu/04_h.jpg);
    overflow:hidden;
}
a.h{
    background-position:0px 0px;
}
a:hover.h{
    background-position:0px -36px;
}