@charset "utf-8";

/* file Status
=========================================
	Author:				Tifana.com
	FileName:			top.css
	LastModified:		2008/9/29
========================================= */

/* safari + Chrome + Opera
----------------------------------------- */
.safari body{
	background:url(/material/img/top/bg_header.jpg) center top no-repeat;
}

.opera body{
	background:url(/material/img/top/bg_header.jpg) center top no-repeat;
}

/* noscript
---------------------- */
div#noscriptMainimage{
	width:100%;
	height:246px;
	z-index:1;
	top:0;
	left:0;
	position:absolute;
	background:url(/material/img/top/bg_header.jpg) top no-repeat;
}

div#noscriptHeader{
	width:765px;
	height:90px;
	text-align:left;
	background:url(/material/img/common/spacer.gif);
	margin:0 0 0 -383px;
	z-index:1;
	position:absolute;
	left:50%;
}

div#noscriptHeader .logo a{
	width:125px;
	height:40px;
	display:block;
	margin:0 0 0 -383px;
	position:absolute;
	top:50px;
	left:50%;
}

div#noscriptHeader #headerNavi{
	height:18px;
	display:block;
	margin:0 0 0 214px;
	position:absolute;
	top:72px;
	left:50%;
}

div#noscriptHeader #headerNavi li{
	float:left;
}

div#noscriptHeader #headerNavi li.headerNavi01{
	width:34px;
	height:18px;
}

div#noscriptHeader #headerNavi li.headerNavi02{
	width:72px;
	height:18px;
}

div#noscriptHeader #headerNavi li.headerNavi03{
	width:61px;
	height:18px;
}

div#noscriptHeader #headerNavi a{
	height:18px;
	display:block;
}

/* catch
----------------------------------------- */
div#catch{
	margin:25px 0 40px 50px;
}

div.topContact{
	width:330px;
	height:37px;
	float:right;
	margin:0 0 20px 0;
	background:url(/material/img/top/bg_topContact.gif) repeat-x;
}

* html div.topContact{
	margin:0 -20px 15px 0;
}

div.topContact:after{
	clear:both;
	display:block;
	content:"";
	height:1px;
	overflow:hidden;
}

div.topTelcontact{
	width:177px;
	height:37px;
	float:left;
	margin:0;
	padding:0;
}

div.topFormcontact{
	width:153px;
	height:37px;
	float:right;
	margin:0;
	padding:0;
}

div.topFormcontact a{
	display:block; 
	width:153px;
	height:37px;
	background:url(/material/img/common/btn_contact02.gif) no-repeat left top;
}

div.topFormcontact a:hover{
	visibility:visible;
}

div.topFormcontact a:hover img{
	visibility:hidden;
}

div.topContactTOP{
	width:330px;
	height:37px;
	float:right;
	margin:0 0 20px 0;
	background:url(/material/img/top/bg_topContact.gif) repeat-x;
}

* html div.topContactTOP{
	margin:0 -20px 20px 0;
}

div.topContact:after{
	clear:both;
	display:block;
	content:"";
	height:1px;
	overflow:hidden;
}
/* sabcatch
----------------------------------------- */
h1{
	font-size:12px;
	color:#999;
	position:absolute;
	top:180px;
	left:50%;
	z-index:2;
	margin:0 0 0 -313px;
}
*html h1{
	font-size:10px;
	color:#999;
	position:absolute;
	top:180px;
	left:50%;
	z-index:2;
	margin:0 0 0 -313px;
}

p#SubCatch{
	font-size:12px;
	font-weight:bold;
	color:#999999;
	position:absolute;
	top:180px;
	left:50%;
	z-index:2;
	margin:0 0 0 -98px;
}

/* h2
----------------------------------------- */
h2{
	width:547px;
	height:24px;
	font-size:14px;
	position:absolute;
	top:1910px;
	left:50%;
	z-index:2;
	margin:0 0 0 -360px;
	padding:5px 0 0 10px;
	text-align:left;
	background:url(/material/img/common/bg_imgtitle.gif);	
}

p.h2Text{
	width:547px;
	font-size:12px;
	position:absolute;
	top:1950px;
	left:50%;
	z-index:2;
	line-height:120%;
	margin:0 0 0 -360px;
	padding:0 0 0 10px;
	text-align:left;
}

/* h3
----------------------------------------- */
h3{
	width:547px;
	height:24px;
	font-size:14px;
	position:absolute;
	top:2000px;
	left:50%;
	z-index:2;
	margin:0 0 0 -360px;
	padding:5px 0 0 10px;
	text-align:left;
	background:url(/material/img/common/bg_imgtitle.gif);
}

p.h3Text{
	width:547px;
	font-size:12px;
	position:absolute;
	top:2040px;
	left:50%;
	z-index:2;
	line-height:120%;
	margin:0 0 0 -360px;
	padding:0 0 0 10px;
	text-align:left;
}

/* h2
----------------------------------------- */
*html h2{
	width:547px;
	height:24px;
	font-size:14px;
	position:absolute;
	top:2000px;
	left:50%;
	z-index:2;
	margin:0 0 0 -360px;
	padding:5px 0 0 10px;
	text-align:left;
	background:url(/material/img/common/bg_imgtitle.gif);	
}

*html p.h2Text{
	width:547px;
	font-size:12px;
	position:absolute;
	top:2040px;
	left:50%;
	z-index:2;
	line-height:120%;
	margin:0 0 0 -360px;
	padding:0 0 0 10px;
	text-align:left;
}

/* h3
----------------------------------------- */
*html h3{
	width:547px;
	height:24px;
	font-size:14px;
	position:absolute;
	top:2090px;
	left:50%;
	z-index:2;
	margin:0 0 0 -360px;
	padding:5px 0 0 10px;
	text-align:left;
	background:url(/material/img/common/bg_imgtitle.gif);
}

*html p.h3Text{
	width:547px;
	font-size:12px;
	position:absolute;
	top:2130px;
	left:50%;
	z-index:2;
	line-height:120%;
	margin:0 0 0 -360px;
	padding:0 0 0 10px;
	text-align:left;
}

/* rightNavi
----------------------------------------- */
div#rightNavi .caseBtn{
	width:160px;
	height:44px;
	margin:10px auto 0 auto;
	text-align:left;
	letter-spacing:-1.0px;
	line-height:110%;
}

div#rightNavi .caseBtn a{
	width:160px;
	height:44px;
	display:block;
	background:url(/material/img/top/bg_rightnavibtn.gif) no-repeat left top;
	text-decoration:none;
}

div#rightNavi .caseBtn a:hover{
	text-decoration:none;
	background:url(/material/img/top/bg_rightnavibtn.gif) no-repeat left -44px;
}

div#rightNavi .caseBtn .caseTitle{
	font-weight:bold;
	color:#cf0616;
	display:block;
	padding:6px 0 0 14px;
	margin:0;
	text-decoration:underline;
}

div#rightNavi .caseBtn .caseName{
	float:right;
	font-weight:bold;
	color:#4a4a4a;
	display:block;
	margin:0 10px 0 0;
	text-decoration:none;
}

div#rightNavi .caseText{
	width:167px;
	font-size:11px;
	line-height:110%;
	margin:5px 0;
	text-align:center;
}

div#rightNavi .caseText strong{
	font-weight:normal;
}

/* information
----------------------------------------- */
div#information{
	width:543px;
	height:80px;
	clear:both;
	overflow:auto;
	padding:0 15px 0 0;
	margin:15px 0 25px 0;
}

div#information ul li{
	width:510px;
	margin:0 0 10px 0;
	padding:0 0 0 15px;
	list-style-position:outside;
	line-height:110%;
	background:url(/material/img/common/arrow01.gif) no-repeat left 4px;
}

div#information strong{
	font-weight:normal;
}

/* works
----------------------------------------- */
div#works{
	width:558px;
	clear:both;
}

*:first-child+html div#works{ 
	width:558px;
	clear:both;
	margin:0 0 -10px 0;
}


div.worksBoxleft{
	width:105px;
	margin:0 9px 10px 0;
	float:left;
}

div.worksBox{
	width:105px;
	margin:0 8px 10px 0;
	float:left;
}

div.worksBoxright{
	width:105px;
	margin:0 0 10px 0;
	float:left;
}

div#works p.caption{
	width:105px;
	font-size:90%;
	text-align:center;
	line-height:13px;
}

div#moreWorks{
	width:558px;
	clear:both;
}

div#moreWorks p{
	margin-left:10px;
	width:95px;
	font-size:90%;
	float:left;
	color:#4a7861;
}

div#moreWorks p.others{
	margin-left:10px;
	width:50px;
	font-size:90%;
	float:left;
}

/* practice
----------------------------------------- */
div#practice{
	width:558px;
	margin:15px 0 36px 0;
	clear:both;
}

div#practice:after{
	clear:both;
	display:block;
	content:"";
	height:1px;
	overflow:hidden;
}

div#practice img{
	float:left;
	margin:0 10px 10px 0;
}

div#practice a{
	font-size:100%;
}

div#practice p{
	margin:0 0 5px 0;
	line-height:135%;
}

div#practice p span{
	color:#cc0000;
	font-weight:bold;
	margin:5px 0 0 0;
	display:block;
}

div#practice .practice01{
	width:265px;
	height:90px;
	margin:0 4px 8px 0;
	padding:10px 6px;
	background:#ecf0f2;
	float:left;
}

* html div#practice .practice01{
	width:265px;
	height:110px;
}

div#practice .practice02{
	width:265px;
	height:90px;
	margin:0 0 8px 0;
	padding:10px 6px;
	background:#ecf0f2;
	float:right;
}

* html div#practice .practice02{
	width:265px;
	height:110px;
}

div#practice .practice03{
	width:265px;
	height:90px;
	margin:0 4px 8px 0;
	padding:10px 6px;
	background:#ecf0f2;
	float:left;
}

* html div#practice .practice03{
	width:265px;
	height:110px;
}

div#practice .practice04{
	width:265px;
	height:90px;
	margin:0 0 8px 0;
	padding:10px 6px;
	background:#ecf0f2;
	float:right;
}

* html div#practice .practice04{
	width:265px;
	height:110px;
}

/* advantage
----------------------------------------- */
div#advantage{
	width:558px;
	margin:15px 0 36px 0;
	clear:both;
}

div#advantage dl{
	height:64px;
}

div#advantage dt{
	font-size:1px;
	line-height:1px;
	text-indent:-9999px;
}

div#advantage dd{
	color:#666666;
	font-size:15px;
	font-weight:bold;
	margin:8px 0 0 0;
}

div#advantage dd.more{
	padding:0 15px 0 0;
	font-size:10px;
	font-weight:normal;
	text-align:right;
}

div#advantage dd.more a{
	padding:0 0 0 10px;
	background:url(/material/img/common/arrow01.gif) no-repeat left 4px;
}

div#advantage .point01{
	width:558px;
	height:64px;
	padding:15px 0 0 15px;
	background:url(/material/img/top/bg_advantage01.gif) no-repeat left top;
}

div#advantage .point02{
	width:558px;
	height:64px;
	padding:15px 0 0 15px;
	background:url(/material/img/top/bg_advantage02.gif) no-repeat left top;
}

div#advantage .point03{
	width:558px;
	height:64px;
	padding:15px 0 0 15px;
	background:url(/material/img/top/bg_advantage03.gif) no-repeat left top;
}

div#important{
	width:558px;
	margin:15px 0 36px 0;
	padding:0 0 170px 0;
	clear:both;
}

div#important p{
	padding:0 0 0 15px;
}

p.moreBtn{
	margin:-32px 0 0 0;
	float:right;
}

h4{
	width:557px;
	height:29px;
	clear:both;
	margin:0 0 10px 0;
	line-height:100%;
	background:url(/material/img/common/bg_imgtitle.gif);
}

* html h4{
	width:557px;
	height:29px;
	clear:both;
	margin:5px 0 10px 0;
	line-height:100%;
	background:url(/material/img/common/bg_imgtitle.gif);
}

h4 .titleName{
	float:left;
}

h4 .lastModified{
	margin:10px 0 0 0;
	font-size:11px;
	float:right;
}

h4 .moreBtn{
	margin:8px 0 0 0;
	float:right;
}

h5{
	width:557px;
	height:29px;
	clear:both;
	margin:0 0 10px 0;
	line-height:100%;
	background:url(/material/img/common/bg_imgtitle.gif);
}

* html h5{
	width:557px;
	height:29px;
	clear:both;
	margin:5px 0 10px 0;
	line-height:100%;
	background:url(/material/img/common/bg_imgtitle.gif);
}

h5 .titleName{
	float:left;
}

h5 .lastModified{
	margin:10px 0 0 0;
	font-size:11px;
	float:right;
}

h5 .moreBtn{
	margin:8px 0 0 0;
	float:right;
}

#package{
	width:160px;
	margin:10px auto 0 auto;
}

#package .package_list{
	width:148px;
	padding:5px;
	background:#f5fce0;
	border-left:solid 1px #0b6b20;
	border-right:solid 1px #0b6b20;
	border-bottom:solid 1px #0b6b20;
}

#package .package_list li{
	width:138px;
	font-size:11px;
	padding:0 0 0 12px;
	background:url(/material/img/top/ico_package.gif) no-repeat;
}