@charset "UTF-8";

/*::::::::::::::::::::::::::::::::::::::::::::::::

common.css

::hexaproject co., ltd.

	 1.body color
	 2.anchor color
	 3.font color
	 4.layout
	 5.header
	 6.globalNav
	 7.mainContents
	 8.breadCrumbs
	 9.side
	10.pageTop
	11.footer
 
------------------------------------------------

10px = 77%	:	16px = 123.1%	:	22px = 167%
11px = 85%	:	17px = 131%		:	23px = 174%
12px = 93%	:	18px = 138.5%	:	24px = 182%
13px = 100%	:	19px = 146.5%	:	25px = 189%
14px = 108%	:	20px = 153.9%	:	26px = 197%
15px = 116%	:	21px = 161.6%

::::::::::::::::::::::::::::::::::::::::::::::::*/

/*	1.body color
:::::::::::::::::::::::::::::::::::::::::::::::::::::*/

body {
	color: #222;
	background: #fff;
	}

/*	2.anchor color
:::::::::::::::::::::::::::::::::::::::::::::::::::::*/

a			{color: #595757}
a:link		{color: #595757}
a:visited	{color: #595757}
a:hover		{color: #595757}
a:active	{color: #595757}

/*	3.font color
:::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.fcW	{color: #fff}
.fcB	{color: #000}
.fcR	{color: #900}
.fcG	{color: #900}
.fcBl	{color: #069}
.fcGr	{color: #595757}

/*	4.layout
:::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#wrapper {
	width: 980px;
	margin: auto;
	}
#header {
	position: relative;
	}
#main {
	background: #fff;
	margin-bottom: 30px;
	line-height: 1.8;
	}
#side {
	float: left;
	width: 196px;
	margin: 0 64px 20px 0;
	}
#contents {
	float: right;
	width: 720px;
	min-height: 350px;
	}
#footer {
	width: 100%;
	margin: 10px 0 30px;
	}
.adjustable {
	font-size: 13px;
	}
.w300px {
	width: 300px;
	}

/*	5.header
:::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#header h1 {
	margin-top: 20px;
	}
	#header h1 a {
		overflow: hidden;
		height: 0;
		width: 400px;
		display: block;
		padding-top: 54px;
		background: url('/shared/images/common.gif') no-repeat 0 0;
		}
#header h2 {
	overflow: hidden;
	height: 0;
	width: 0;
	display: block;
	padding-top: 0;
	}
#header .search {
	position: absolute;
	top: 2px;
	right: 0px;
	width: 224px;
	height: 23px;
	}
	#header .search #keyword {
		position: absolute;
		width: 220px;
		height: 23px;
		border: 1px solid #ccc;
		color: #999;
		}
	#header .search #searchBtn {
		position: absolute;
		top: 4px;
		right: 5px;
		}
#header .fontsize {
	position: absolute;
	top: 40px;
	left: 755px;
	line-height: 14px;
	}
	#header .fontsize span {
		float: left;
		font-size: 12px;
		}
	#header .fontsize ul {
		float: left;
		font-size: 14px;
		margin-left: 1em;
		}
		#header .fontsize ul li {
			float: left;
			margin-right: 0.4em;
			}
		#header .fontsize .active {
			font-weight: bold;
			}

#socialLink {
	position: absolute;
	top: 35px;
	right: 0px;
	}
	#socialLink li {
		float: left;
		}
		#socialLink li a {
			overflow: hidden;
			height: 0;
			width: 22px;
			display: block;
			padding-top: 22px;
			margin-left: 5px;
			background: url('/shared/images/common.gif') no-repeat;
			}
		
		#socialLink li.s_nav01 a {background-position: -510px -10px}
		#socialLink li.s_nav02 a {background-position: -480px -10px}
		#socialLink li.s_nav03 a {background-position: -540px -10px}
		
		#socialLink li a:hover {opacity: 0.7;}
		#socialLink li.s_nav01 a:hover,
		#socialLink li.s_nav02 a:hover {opacity: 0.7;}

/*	6.globalNav
:::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#globalNav {
	position: relative;
	margin-top: 30px;
	}
	#globalNav li {
		float: left;
		}
		#globalNav li a {
			overflow: hidden;
			height: 0;
			width: 196px;
			display: block;
			padding-top: 60px;
			background: url('../images/common.gif') no-repeat;
			}
		
		#globalNav li.g_nav01 a {background-position: 0px -60px}
		#globalNav li.g_nav02 a {background-position: -196px -60px}
		#globalNav li.g_nav03 a {background-position: -392px -60px}
		#globalNav li.g_nav04 a {background-position: -588px -60px}
		#globalNav li.g_nav05 a {background-position: -784px -60px}
		
		#globalNav li.g_nav01 a:hover {background-position: 0px -120px}
		#globalNav li.g_nav02 a:hover {background-position: -196px -120px}
		#globalNav li.g_nav03 a:hover {background-position: -392px -120px}
		#globalNav li.g_nav04 a:hover {background-position: -588px -120px}
		#globalNav li.g_nav05 a:hover {background-position: -784px -120px}
	
		#globalNav li.g_nav01 a.active {background-position: 0px -120px}
		#globalNav li.g_nav02 a.active {background-position: -196px -120px}
		#globalNav li.g_nav03 a.active {background-position: -392px -120px}
		#globalNav li.g_nav04 a.active {background-position: -588px -120px}
		#globalNav li.g_nav05 a.active {background-position: -784px -120px}



/*	7.mainContents
:::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#main h2 {
	font-size: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #ccc;
	}
#main #article {
	margin-bottom: 20px;
	}
#main #article p {
	margin-bottom: 0.5em;
	}

/*	8.breadCrumbs
:::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#breadCrumbs {
	color: #333;
	margin: 2em 0;
	font-size: 100%;
	line-height: 1;
	}
	#breadCrumbs li {
		float: left;
		padding-left: 2em;
		background: url('/shared/images/ico_arrow_right2.gif') no-repeat 0.8em center;
		}
		#breadCrumbs li.home {
			padding-left: 0;
			background: none;
			}
		#breadCrumbs li a {
			color: #333;
			border: none;
			text-decoration: none;
			}


/*	9.side
:::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#side h2 {
	overflow: hidden;
	height: 0;
	width: 196px;
	display: block;
	padding: 60px 0 0;
	margin-bottom: 1.5em;
	border: 0;
	background: url('/shared/images/common.gif') no-repeat;
	}
#side ul {
	font-size: 108%;
	line-height: 1;
	}
	#side ul li {
		padding-left: 10px;
		margin-bottom: 1em;
		background: url('/shared/images/ico_arrow_right.gif') no-repeat left center;
		}
		#side ul li a {
			color: #333;
			border: none;
			}
		#side ul li a:hover {
			color: #E8506F;
			border-bottom: 1px dotted #E8506F;
			}
		#side ul li a.active {
			color: #E8506F;
			}
		#side ul li a.gray {
			cursor: default;
			color: #aaa;
			}
			#side ul li a:hover.gray {
				border: none;
				}

/*	10.pageTop
:::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#pageTop {
	float: right;
	line-height: 1;
	margin: 0 auto 25px;
	}
	#pageTop a {
		color: #333;
		padding-left: 10px;
		background:url('/shared/images/ico_arrow_upper.gif') no-repeat left center;
		}
		#pageTop a:hover{
			border-bottom: 1px dotted #333;
			}


/*	11.footer
:::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#footer .wrapper {
	width: 980px;
	margin: auto;
	}
	#footer a {color: #222;}
		#footer a:hover {border-bottom: 1px dotted #333;}
	#footer .gray {cursor: default;color: #aaa;}
		#footer a.gray:hover {border: none}
#footer .block01 {
	line-height: 1.6;
	padding: 2em 0;
	background: #eee;
	margin-bottom: 10px;
	}
	#footer .block01 .sitemapNav {
		float: left;
		margin-right: 4em;
		}
		#footer .block01 .sitemapNav dt {
			font-size: 14px;
			margin-bottom: 0.5em;
			}
		#footer .block01 .sitemapNav dd {
			font-size: 12px;
			}
	#footer .block01 #subNav {
		float: right;
		margin: 0;
		}
		#footer .block01 #subNav li {
			font-size: 12px;
			line-height: 1;
			padding-left: 10px;
			margin-bottom: 0.5em;
			background: url('/shared/images/ico_dotted.gif') no-repeat left center;
			}
#footer .name,
#footer .address,
#footer .email {
	float: left;
	margin-right: 1em;
	font-size: 12px;
	font-family: Verdana;
	}
	#footer .email a {
		border-bottom: 1px dotted #333;
		}
	#footer .email {
		font-size: 11px;
		}
#footer .copyRight {
	float: right;
	font-size: 12px;
	font-family: Verdana;
	}