@charset "utf-8";
@import "reset.css";
@import "base.css";
@import "bottom.css";

#intro{
	background: transparent url("/images/bg-intro.gif") no-repeat 50% 0;
	height: 312px; /* 340px */
	overflow: hidden;
	padding: 28px 0 0 0;
	text-align: center;
}
#intro h1{
	margin: 0 0 14px 0;
}
#intro ul{
	margin: 0 auto;
	text-align: left;
	width: 532px;
}
#intro li{
	background: transparent no-repeat 0 0;
	height: 46px;
	margin: 0 0 7px 0;
}
#intro li a{
	background: transparent no-repeat 0 0;
	display: block;
	height: 46px;
	overflow: hidden;
	text-indent: -999em;
	width: 532px;
}
#intro li.hpoint1, #intro li.hpoint1 a{ background: url("/images/point1.png"); }
#intro li.hpoint2, #intro li.hpoint2 a{ background: url("/images/point2.png"); }
#intro li.hpoint3, #intro li.hpoint3 a{ background: url("/images/point3.png"); }
#intro li a:hover{ background-position: 0 -46px; }

/* screenshot */
#screenshots{
	margin: 0 0 42px 0;
	padding: 14px 56px 0 56px;
	width: 798px;
}
#screenshots .screenshot{
	background: transparent url("/images/screenshot-desc.gif") no-repeat 0 100%;
	float: left;
	font-size: 12px;
	line-height: 18px;
	height: 182px;
	margin: 0 42px 0 0;
	overflow: hidden;
	text-align: center;
	width: 238px;
}
#screenshots .screenshot:last-child{
	margin: 0;
}
.screenshot img{
	display: block;
	position: relative;
	margin: 6px 0 4px 6px;
	z-index: 1;
}
.screenshot img.frame{
	position: absolute;
	margin: 0;
	z-index: 10;
}
.screenshot a{
	color: #000;
	text-decoration: none;
}
.screenshot strong{
	color: #e50012;
	display: block;
	font-size: 18px;
	font-weight: bold;
}


/* point */
.point{
	margin: 0 0 42px 0;
}
.point p{
	font-size: 14px;
	line-height: 20px;
	margin: 0 0 14px 0;
}
.point h3{
	color: #666600;
	font-size: 14px;
	font-weight: bold;
	line-height: 20px;
	margin: 0 0 14px 0;
}
#point1{ background: transparent url("/images/bg-point1.gif") no-repeat 100% 0; }
#point3{ background: transparent url("/images/bg-point3.gif") no-repeat 100% 24px; }
#point1 p, 
#point1 h3,
#point1 ul.webtech, 
#point3 p, 
#point3 h3{
	padding: 0 0 0 56px;
	width: 574px;
}
#point1 ul.webtech li{
	display: inline;
	margin: 0 14px 0 0;
}
#point2{ background: transparent url("/images/bg-point2.gif") no-repeat 0 62px; }
#point2 p, 
#point2 h3{
	padding: 0 0 0 280px;
	width: 574px;
}
.point-footer{
	padding: 14px 56px 0 56px;
	width: 798px;
}
#point1 .point-footer p, 
#point2 .point-footer p, 
#point3 .point-footer p{
	float: left;
	padding: 0;
	width: 200px;
}
.controller{
	float: right;
	padding: 14px 0 0 0;
	width: 168px;
}
.controller li{
	background: transparent url("/images/controller.gif") no-repeat;
	display: block;
	float: left;
	height: 28px;
	margin: 0;
	overflow: hidden;
	text-indent: -999em;
	width: 56px;
}
.controller li a{
	background: transparent url("/images/controller.gif") no-repeat;
	display: block;
	height: 28px;
	width: 56px;
}
.controller li.totop a{ background-position: 0 0; }
.controller li.prev a{ background-position: -56px 0; }
.controller li.next a{ background-position: -112px 0; }
/* hover */
.controller li.totop a:hover{ background-position: 0 -28px; }
.controller li.prev a:hover{ background-position: -56px -28px; }
.controller li.next a:hover{ background-position: -112px -28px; }
/* disabled */
.controller li.totop{ background-position: 0 -56px; }
.controller li.prev{ background-position: -56px -56px; }
.controller li.next{ background-position: -112px -56px; }