@charset "UTF-8";
@import url("common.css");
#graphic{
	background-image: url(../img_index/flash_end.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	width: 760px;
	padding-bottom: 28px;
}
.scroll{
	overflow: auto;
	height: 63px;
	width: 342px;
	border: 1px solid #C0C0C0;
	background-color: #FFFFFF;
	margin-left: 6px;
}
.scroll ul{
	padding: 5px;
}
.scroll li{
	margin-bottom: 10px;
}
.scroll span{
	font-weight: bold;
}
/*------------------*/
#topics{
	background-image: url(../img_index/topics_bg.gif);
	background-repeat: repeat-y;
	width: 760px;
}
#topics-end{
	background-image: url(../img_index/topics_end.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	width: 760px;
	height: 10px;
	overflow: hidden;
	clear: both;
	margin-bottom: 20px;
}
#news {
	width: 360px;
	float: left;
	padding-left: 12px;
}
#propia-faq {
	width: 360px;
	float: right;
	padding-right: 9px;
}
#news h2{
	background-image: url(../img_index/news_tit.gif);
	background-repeat: no-repeat;
	background-position: left top;
	height: 26px;
	width: 360px;
	overflow: hidden;
	text-indent: -9999px;
}
#propia-faq h2{
	background-image: url(../img_index/propia_faq_tit.gif);
	background-repeat: no-repeat;
	background-position: left top;
	height: 26px;
	width: 360px;
	overflow: hidden;
	text-indent: -9999px;
}
/*------------------*/

#category{
	background-image: url(../img_index/category_bg.gif);
	background-repeat: repeat-y;
	width: 760px;
	clear: both;
}
#store{
	padding-left: 24px;
	width: 205px;
	float: left;
}
#service{
	padding-left: 50px;
	width: 200px;
	float: left;
}
#propia{
	padding-left: 50px;
	width: 200px;
	float: left;
}
#category-in{
	background-image: url(../img_index/category_title.gif);
	background-repeat: no-repeat;
	background-position: left top;
	width: 760px;
}
#category-end{
	background-image: url(../img_index/category_end.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	width: 760px;
	height: 30px;
	overflow: hidden;
	margin-bottom: 20px;
	clear: both;
}
/*------------------*/
#category h2{
	height: 32px;
	margin-bottom: 10px;
	overflow: hidden;
	width: 200px;
	text-indent: -9999px;
}
#category a{
	text-indent: -9999px;
	display: block;
	height: 20px;
	width: 160px;
	overflow: hidden;
}
#category ul{
	margin-top: 20px;
}
#category li{
	margin-bottom: 1px;
	height: 20px;
	width: 160px;
}
/*------------------*/
#store li,
#store li a:hover{
	background-image: url(../img_index/top_store.gif);
	background-repeat: no-repeat;
}
#top-hang-up{
	background-position: 0px 0px;
}
#top-hang-up a:hover{
	background-position: -160px 0px;
}
#top-staff{
	background-position: 0px -20px;
}
#top-staff a:hover{
	background-position: -160px -20px;
}
#top-news{
	background-position: 0px -40px;
}
#top-news a:hover{
	background-position: -160px -40px;
}

/*------------------*/
#service li,
#service li a:hover{
	background-image: url(../img_index/top_service.gif);
	background-repeat: no-repeat;
}
#top-push{
	background-position: 0px -40px;
}

#top-push a:hover{
	background-position: -160px -40px;
}

#top-course{
	background-position: 0px 0px;
}
#top-course a:hover{
	background-position: -160px 0px;
}
#top-single{
	background-position: 0px -20px;
}
#top-single a:hover{
	background-position: -160px -20px;
}

/*------------------*/
#propia li,
#propia li a:hover{
	background-image: url(../img_index/top_propia.gif);
	background-repeat: no-repeat;
}
#top-about-propia{
	background-position: 0px 0px;
}
#top-about-propia a:hover{
	background-position: -160px 0px;
}
#top-try{
	background-position: 0px -20px;
}
#top-try a:hover{
	background-position: -160px -20px;
}
#top-faq{
	background-position: 0px -40px;
}
#top-faq a:hover{
	background-position: -160px -40px;
}

/*------------------*/

#top-banner{
	padding-left: 15px;
	position: relative;
	margin-bottom: 20px;
	height: 90px;
	width: 730px;
}
#top-banner ul,
#top-banner li{
	position: absolute;
}
#ban-claypack{
	left: 0px;
	top: 0px;
}
#ban-roller{
	left: 380px;
	top: 0px;
}

