/* ================================================================== */
/*                                                                    */
/* ! Beauty Q&A - Summer */
/*                                                                    */
/* ------------------------------------------------------------------
*
*    2. Main
*       2.1. Big Banner
*       2.2. Tab
*       2.3. Common
*            2.3.1. Recommend Table
*            2.3.2. PointList
*       2.4. Page 1
*       2.5. Page 2
*       2.6. Page 3
*       2.7. Page 4
*
* =================================================================== */


/* ================================================================== */
/*                                                                    */
/* ! 2. Main */
/*                                                                    */
/* ================================================================== */

.contentHeader {
	padding: 24px 16px 24px 16px;
	background: transparent;
}

ol.pointList {
	width: 632px;
	background: #FAFCFD;
}

.pointList li.point {
	width: 632px;
	margin: 0;
	padding: 0 0 0 0;
	border-top: #CCCCCC 1px solid;
	list-style: none;
}

.pointCont {
	width: 600px;
	padding: 0 16px;
}

.pointCont p {
	margin-bottom: 8px;
}

.intro {
	width: 466px;
	margin: 24px 16px 0 auto;
	padding: 27px 0 0 0;
	background: url(/qa/summer/images/point1_bdr.gif) repeat-x;
}

.intro .item {
	clear: both;
}

.intro .thumb {
	float: left;
	margin-bottom: 10px;
}

.intro .itemBox {
	float: right;
	width: 300px;
	padding: 0 0 32px 0;
}

.itmeBox dl {
	width: 300px;
}

.itemBox dt {
	margin: 24px 0 16px 0;
	font-weight: bold;
	line-height: 160%;
}

.price {
	line-height: 160%;
	color: #666666;
}

.note {
	color: #999999;
}


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 2.4. Point 1 */
/*                                                                    */
/* ------------------------------------------------------------------ */

.contentHeader h3 span {
	height: 23px
}

#point1 .contentHeader h3 span {
	width: 511px;
	background: url(/qa/summer/images/point1_ttl.gif);
}


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 2.4. Point 2 */
/*                                                                    */
/* ------------------------------------------------------------------ */

#point2 .contentHeader h3 span {
	width: 313px;
	background: url(/qa/summer/images/point2_ttl.gif);
}

.figure {
	width: 578px;
	margin: 16px 16px 0 38px;
}

.thumbBox {
	float: left;
	width: 214px;
	margin: 0 0 0 0;
}

.figureBox {
	float: right;
	width: 300px;
	margin: 0 0 24px 0;
	padding: 27px 0 0 0;
	background: url(/qa/summer/images/point1_bdr.gif) repeat-x; 
}

.figureBox li {
	position: relative;
	width: 300px;
	padding: 0 0 0 24px;
	margin: 0 0 8px -24px;
	list-style: none;
}

	#fig1 { background: url(/qa/summer/images/point2_li_mark1.gif) 0 0 no-repeat; }
	#fig2 { background: url(/qa/summer/images/point2_li_mark2.gif) 0 0 no-repeat; }

.figureBox li p {
	margin-bottom: 8px;
}

.figureBox li strong {
	color: #379ED9;
	font-weight: bold;
}


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 2.4. Point 3 */
/*                                                                    */
/* ------------------------------------------------------------------ */

#point3 .contentHeader h3 span {
	width: 360px;
	background: url(/qa/summer/images/point3_ttl.gif);
}

#point3 .pic {
	padding: 16px 0 0 0;
	text-align: center;
}

#point3 .catch {
	margin: 0 0 16px 0;
}

#point3 .ttlBox {
	margin: 0 0 16px 0;
}

#point3 .ttlBox h4 {
	float: left;
	margin: 0 16px 0 0;
	font-weight: bold;
}

#point3 .price {
	float: left;
}


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 2.4. Make */
/*                                                                    */
/* ------------------------------------------------------------------ */

#make .contentHeader h3 span {
	width: 340px;
	background: url(/qa/summer/images/make_ttl.gif);
}

#make .intro {
	background: url(/qa/summer/images/make_bdr.gif) repeat-x;
}


/* ---------------------------------
*    Huge Banner    */

.hugeBanner {
	margin-top: 24px;
}


/* ---------------------------------
*    Big Banner    */

aside .bigbnr {
	padding-top: 23px;
}


/* ---------------------------------
*    Step Tree    */

ul.stepTree {
	position: relative;
	z-index: 100;
	width: 272px;
	margin: -24px 27px 0 16px;
	padding: 25px 0 19px 0;
	border-bottom: #444444 3px solid;
	background: url(/common/images/bdr_666666_dot_1px.gif) left top repeat-x;
}

.stepTree a:link    { color: #CCCCCC !important; text-decoration: none; }
.stepTree a:visited { color: #CCCCCC !important; text-decoration: none; }
.stepTree a:hover   { color: #FBFBFB !important; text-decoration: underline; }
.stepTree a:active  { color: #FBFBFB !important; text-decoration: underline; }

.stepTree li h5 {
	padding-bottom: 4px;
}

.stepTree li h5 img { padding-right: 6px; } 

.stepTree li.active h5 {
	padding-bottom: 16px;
	font-weight: bold;
	color: #FBFBFB;
}

.stepTree li.active h5 img { padding-right: 6px; } 

.stepTree ul.secondlayer li {
	width: 256px;
	padding-left: 16px;
	padding-bottom: 8px;
	background: url(/common/images/li_arrow.gif) 2px 0 no-repeat;
	line-height: 150%;
	color: #999999;
}