@charset "utf-8";

/* FAMILYEXTERIOR WORKS.CSS  */


/*---------------------------------------
*	
*	00.WORKS  
*		00_01.WORKS_INDEX
 *		00_02.WORKS_DETAIL
*
*	MODULES
*		MO_01.CLEARFIX
*		MO_02.TEXT
*		MO_03.LIST
*
*--------------------------------------*/



/**--------------------------------------
	00_01.WORKS_INDEX
---------------------------------------**/

div.worksListBox
{
	position: relative;
	float: left;
	margin: 0 15px 25px 0;
	width: 220px;
	height: 19em;
	background: #FFF url(../images/works_index_boxbar.gif) no-repeat 10px 120px;
	cursor: pointer;
}

div.worksListBox p.thum
{
	position: relative;
	margin: 0 0 10px 10px;
	padding: 10px 0 0 0;
}

div.worksListBox p.thum span.new
{
	position: absolute;
	left:0;
	z-index: 3;
}

div.worksListBox h3
{
	margin: 0 10px 0 24px;
	font-weight: bold;
}

div.worksListBox ul
{
	position: absolute;
	
	top: 18.5em;
	margin: 0 0 0 24px;
	font-size: 77%;
}

div.worksListBox ul a
{
	color: #999900;
}

div.right
{
	float: right;
	margin: 0;
}

ul#FEPager
{
	clear: both;
}

ul#FEPager li
{
	display: block;
	float: left;
	margin: 0 5px 0 0;
	padding: 3px;
	width: 15px;
	background: #141414;
	color: #FFFFFF;
	text-align: center;
	border: 1px solid #333333;
}

ul#FEPager li a
{
	text-decoration: none;
}

/**--------------------------------------
	00_02.WORKS_DETAIL
---------------------------------------**/

div.worksDetail
{
	padding: 25px 0;
	width: 690px;
	background: #FFF;
}

#worksDetailBox
{
	margin: 0 0 0 25px;
	width: 640px;
}

#worksDetailBox p.mainPic
{
	margin: 0 0 20px 0;
	width: 640px;
	height: 300px;
}

#worksDetailBox p.mainPic img
{
	display: block;
	margin: 0 0 0 1px;
	border: 1px solid #DDDDDD;
}

#worksDetailBox h3
{
	margin: 0 0 7px 0;
	padding: 0 0 3px 0;
	font-size: 136%;
	background: url(../../common/images/cmn_double_line_devider.gif) repeat-x left bottom;
}

#worksDetailBox h4
{
	margin: 0 0 10px 0;
}

#worksDetailBox ul
{
	margin: 0 0 30px 0;
	font-size: 77%;
}

#worksDetailBox ul a
{
	color: #999900;
}

div.detailConcept
{
	margin: 0 0 30px 0;
}

div.detailPoint
{
	margin: 0 0 30px 0;
	width: 640px;
}

#worksDetailBox div.pointBox
{
	float: left;
	margin: 0 0 30px 0;
	width: 305px;
}

#worksDetailBox div.right
{
	float: right;
}


div.pointBox p
{
	width: 305px;
	height: 120px;
	border: 1px solid #DDDDDD;
}

div.detailPoint p.pointPic
{
	position: relative;
	margin: 0 0 10px 0;
}

div.detailPoint p.pointPic img
{
	display: block;
	padding: 2px 0 0 2px;
}

div.detailPoint p.pointPic a span
{
	position: absolute;
	left: 260px;
	top: 105px;
	display: block;
	z-index: 3;
}

div.pointBox dl
{
	padding: 0 0 0 15px;
	width: 290px;
	background: url(../images/works_detail_point_line.gif) no-repeat 0 10px;
}

div.pointBox dl dt
{
	display: block;
	margin: 0 0 5px 0;
	font-weight: bold;
}

div.pointBox dl dd
{
	font-size: 77%;
}

ul.inNav
{
	margin: 0 0 20px 25px;
	width: 640px;
}

ul.inNav li
{
	float: left;
	width: 104px;
}

ul.inNav li.next
{
	float: right;
}

p.contactBtn
{
	padding: 20px 0 0 0;
	width: 690px;
	background: url(../../common/images/cmn_dot_hdevider.gif) repeat-x left top;
	text-align: center;
}

p.contactBtn a
{
	display: block;
	margin: 0 auto;
	width: 412px;
	height: 46px;
}


/*LB*/
#lightbox-image-details-caption
{
	font-size: 14px;
}

/*BT*/
div.bigHover
{
	background-color: #EFEFEF;
}

/*---------------------------------------

	MODULES
	
---------------------------------------**/


/*---------------------------------------
	MO_01.CLEARFIX
---------------------------------------**/

.clearfix:after,
div.detailPoint:after,
ul.inNav:after
{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

.clearfix,
div.detailPoint,
ul.inNav
{
	display:inline-block;
}

/* \*/
* html .clearfix,
* html div.detailPoint,
* html ul.inNav
{ 
	height:1%;
}
/* */