@charset "utf-8";

/* CSS Information *************************************
File name: layout_sec.css
Description: layout second tree
Created date: 2009/11/02
Last created date: 2009/11/10
Created by: Elephant Communications
***************************************************** */


/* Table Of Contents
----------------------------------------

* #container
* #header
* #wrapper
* #primary
* #topicpath
* #title
* #contents
* #contentsList
* .titleArea
* .tableLayout
* .frame
* #secondary

* form setting
* form confirm
* form thanks

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


/* #container
-------------------------------------------------------------------------------------------------------*/
#container {
	width: 950px;
	margin: 0 auto;
}



/* #header
-------------------------------------------------------------------------------------------------------*/
#header {
	position: relative;
	height: 120px;
	margin-bottom: 1px;
	background: url(../img/common/bg_header.gif) left bottom no-repeat;
}

#header li {
	float: left;
	margin-right: 1px;
}


/* postion setting
----------------------------------------------------------------------------------------*/
#header h1, #header ul {
	position: absolute;
}

#header h1 {
	top: 40px;
	left: 14px;
}

#header ul {
	top: 64px;
	left: 734px;
}



/* #wrapper
-------------------------------------------------------------------------------------------------------*/
#wrapper {
	margin-bottom: 40px;
}



/* #primary
-------------------------------------------------------------------------------------------------------*/
#primary {
	width: 735px;
	float: right;
}

#primaryContent {
	width: 685px;
	margin: 0 auto;
}


/* #topicpath
----------------------------------------------------------------------------------------*/
#topicpath {
	height: 33px;
	background: url(../img/common/bg_topicpath.jpg) left top no-repeat;
}

#topicpath li {
	float: left;
	padding: 11px 20px 10px;
}

#topicpath .active {
	color: #9d7c3d;
}

#topicpath li a {
	color: #828282;
}

#topicpath .first {background: #DFDCD5;}
#topicpath .second {background: #E9E7E2;}


/* #title
----------------------------------------------------------------------------------------*/
#title {
	height: 65px;
	margin-bottom: 30px;
	background: url(../img/common/bg_title.jpg) left top no-repeat;
}

#title h2 {
	padding: 26px 0 0 22px;
}


/* #contents
----------------------------------------------------------------------------------------*/
#contents {
	margin-bottom: 200px;
}



/* #contentsList
----------------------------------------------------------------------------------------*/
#contentsList {
	margin-bottom: 30px;
	background: url(../img/common/bg_border08.gif) left bottom repeat-x;
}

#contentsList ul {
	padding-bottom: 30px;
	background: url(../img/common/bg_border09.gif) left bottom repeat-x;
}

#contentsList li {
	float: left;
	margin-right: 2px;
}



/* .titleArea
----------------------------------------------------------------------------------------*/
.titleArea {
	margin-bottom: 35px;
	background: url(../img/common/bg_border08.gif) left bottom repeat-x;	
}

.titleArea h3 {
	padding-bottom: 20px;
	background: url(../img/common/bg_border09.gif) left bottom repeat-x;
}



/* .tableLayout
----------------------------------------------------------------------------------------*/
/* .tableLayout01
-------------------------------------------------------------------------*/
.tableLayout01 .even {
	background: #FCFCFB;
}



/* .frame
----------------------------------------------------------------------------------------*/
/* .frame01
-------------------------------------------------------------------------*/
.frame01 {
	width: 685px;
	background: url(../img/common/bg_frame02.gif) left bottom no-repeat;
}

.frame01Content {
	background: url(../img/common/bg_frame02Content.gif) left top no-repeat;
}


/* .frame02
-------------------------------------------------------------------------*/
.frame02 {
	width: 685px;
	background: url(../img/common/bg_frame03.gif) left bottom no-repeat;
}

.frame02Content {
	background: url(../img/common/bg_frame03Content.gif) left top no-repeat;
}


/* .frame03
-------------------------------------------------------------------------*/
.frame03 {
	width: 420px;
	background: url(../img/common/bg_frame04.gif) left bottom no-repeat;
}

.frame03Content {
	background: url(../img/common/bg_frame04Content.gif) left top no-repeat;
}



/* #secondary
-------------------------------------------------------------------------------------------------------*/
#secondary {
	width: 190px;
	float: left;
}


/* #mtContent (For CMS)
----------------------------------------------------------------------------------------*/
#mtContent {
	margin-bottom: 20px;
}


/* .section (For CMS)
-------------------------------------------------------------------------*/
#secondary .section {
	margin-bottom: 15px;
	background: url(../img/common/bg_section.gif) left bottom no-repeat;
}

#secondary .section dl, #secondary .section ul {
	width: 165px;
	padding: 15px 12px 0 12px;
}

#secondary .section dt, #secondary .section dd, #secondary .section li {
	padding-left: 15px;
}

#secondary .section dt, #secondary .section li {
	background: url(../img/common/icn_arrow01.gif) left 3px no-repeat;
}

#secondary .section dd, #secondary .section li {
	padding-bottom: 15px;
	line-height: 1.2;
}

#secondary .section dt {
	margin-bottom: 10px;
	color: #5b3f20;
}

#secondary .section dd {
	font-weight: bold;
}

#secondary .section .last-child {
	margin-bottom: 0;
}



/* form setting
-------------------------------------------------------------------------------------------------------*/
/* .textField
----------------------------------------------------------------------------------------*/
.textField {
	height: 20px;
	padding-top: 4px;
	background: #F2F0F0;
	line-height: 1.5;
	border: none;
	font-size: 12px;
	color: #646464;
}


/* textarea
----------------------------------------------------------------------------------------*/
#contents textarea {
	width: 685px;
	height: 155px;
}


/* width setting
----------------------------------------------------------------------------------------*/
.short01{ width: 80px;}
.short02{ width: 100px;}
.medium{ width: 205px;}
.long01{ width: 360px;}
.long02{ width: 455px;}



/* form confirm
-------------------------------------------------------------------------------------------------------*/
/* #confirm
----------------------------------------------------------------------------------------*/
#confirm h3 {
	margin-bottom: 30px;
}


/* #confirmContent
-------------------------------------------------------------------------*/
#confirmContent {
	margin-bottom: 25px;
	padding-bottom: 30px;
	background: url(../img/common/bg_border05.gif) left bottom repeat-x;
}

#confirmContent table {
	width: 685px;
}

#confirmContent th, #confirmContent td {
	padding: 10px;
	line-height: 1.3;
	border-bottom: 1px solid #fff;
}

#confirmContent th {
	background: #F4F1EC;
	font-weight: bold;
	color: #684200;
}


#confirmContent td {
	background: #FAF9F7;
}


/* th width setting
----------------------------------------------------------*/
#trial #confirmContent th, #form #confirmContent th {
	width: 230px;
}

#member #confirmContent th {
	width: 305px;
}

#recruit #confirmContent th {
	width: 115px;
}



/* #sending
-------------------------------------------------------------------------*/
#confirm #sending {
	width: 450px;
	margin: 0 auto;
}


#confirm #sending li {
	float: left;
	margin-right: 70px;
}

#confirm #sending .last-child {
	margin-right: 0;
}


/* .leed
----------------------------------------------------------*/
#confirm #sending .leed {
	margin-bottom: 20px;
	line-height: 1.5;
}



/* form thanks
-------------------------------------------------------------------------------------------------------*/
/* #thanks
----------------------------------------------------------------------------------------*/
#thanks h3 {
	margin-bottom: 30px;
}

#thanks ul {
	margin-bottom: 30px;
}

#thanks li {
	margin-bottom: 20px;
	line-height: 1.5;
}

#thanks .first-child {
	font-size: 13px;
	font-weight: bold;
	color: #684200;
}

#thanks li span {
	color: #684200;
}

#thanks p {
	text-align: right;
}