@charset "utf-8";
/* 
	*Filename : style_layout_hmode.css
	*Function : Common Layout (Hmode)
	*Comment  : CARNIX Layout Style sheet - Layout Style (Hmode)
	*History  : 2014-08-21, Leen created.
				2015-02-10, Mobile ver. updated.  - style_layout_vmode.css, style_layout_hmode.css
	*Author   : Copyrightⓒ Miral Auto Camp. All Rights Reserved. 
*/ 

* { -webkit-text-size-adjust:auto; max-width:100%; }

img {
		border: none;
}

body {
		height: 			100%; /* body와 html의 높이를 100% 로 지정 */ 		
		font-family: 		'Ubuntu','Arial', 'Dotum','sans-serif';
        font-size: 			13px;	/*hmode, vmode*/	
		color:				#666;
		margin:				0px; 
		/*background:			url(../img/com/bg.gif) top repeat-x; /*hmode, vmode*/				
}

#main { 
		width:				100%;  /*hmode, vmode*/		
		position:			relative; 
		left:				50%; /* 화면의 중앙에 위치 */ 
		margin-left:		-50%; /*hmode, vmode /높이의 절반과 너비의 절반 만큼 margin 을 이용하여 조절해 줍니다. */
		margin-top:			0;
		border:				none; 	
		background:			url(../img/com/main_bg.gif) top repeat-x;		
} 

/* ------ Header (only hmode) ------ */

#toputil {
		line-height: 	150%;
		background:		url(../img/inx/bg_toputil.gif) top repeat-x;
		padding:		5px 0;
}

#toputil_left {
		margin:			0 10px;
}

#toputil_right {
		margin:			0 10px;
		display:		inline-block;
}

/* ------ Header (All) ------ */

#toputil_left {
		float:			left;
		font-size:		11px;
		color:			#cbcbcb;
		text-transform: uppercase;		
}

#toputil_left a {
		color:			#cbcbcb;
		text-decoration:none;
}

#toputil_left a:hover {
		color:			#ffffff;
}


#toputil_right {
		text-transform: uppercase;
}

/* ------ Navigation (only hmode) ------ */

#navi {		
		float:			left;
		border-bottom:	1px solid #dcdcdc;	
		width:			100%;	/*hmode, vmode*/
}

#navi p{float:left;margin:12px 0 0 10px}
#navi_con{float:right;margin:21px 0 0 0;}

/* ------ Navigation (All) ------ */

#navi {
		font-family: 	'Jura','Ubuntu','Arial', 'Dotum','sans-serif';		
}

/* ------ Title ------ */

#title01, #title02, #title03, #title04, #title05, #title06, #title07, #title08 {
		height:			70px;	/*hmode, vmode*/ 
		margin:			1px 0;
		text-transform: uppercase;
		font-family: 	'Jura','Ubuntu','Arial', 'Dotum','sans-serif';	
		padding-left:	1%;	/*hmode, vmode*/
		color:			#d5d5d5;
		float:			left;	/*hmode, vmode*/
		width:			99%;	/*hmode, vmode*/
		border-bottom:	1px solid #dcdcdc;	/*hmode, vmode*/
		background-color:	#efefef;	/*hmode, vmode*/
}

#title01 h1, #title02 h1, #title03 h1, #title04 h1, #title05 h1, #title06 h1, #title07 h1, #title08 h1 {
		color:			#ed1c24;
		font-size:		40px;
		float:			left;
		margin-top:		20px;	/*hmode, vmode*/
		background:		url(../img/com/title_slash.png) right no-repeat;
		padding-right:	35px;
		font-weight:	normal;
}

#title01 h2, #title02 h2, #title03 h2, #title04 h2, #title05 h2, #title06 h2, #title07 h2, #title08 h2 { 
		color:			#000;
		font-size:		30px;
		float:			left;
		margin-top:		30px;	/*hmode, vmode*/
		margin-left:	10px;	
		font-weight:	normal;	
}

#content {
		width: 			100%;	/*hmode, vmode*/		
		float:			left;	/*hmode, vmode*/		
		margin:			30px 0 40px 0;	/*hmode, vmode*/	
		line-height:	150%;
		float:			left;
}

#content h1	{
		line-height:	130%;	
}

#content h2	{
		line-height:	140%;	
}

/* ------ Footer (only hmode) ------ */

.footer1_con {		
		width: 			100%; 		
		margin-left: 	-50%; /* 높이의 절반과 너비의 절반 만큼 margin 을 이용하여 조절해 줍니다. */
}

.footer1_con li {
		padding:		2px 0 0 12px; /*hmode, vmode*/
		font-size:		13px; /*hmode*/
}

#footer2 {
		line-height:	140%; /*hmode, vmode*/
}

/* ------ Footer (All) ------ */

#footer1 {
		width: 			100%;
		background-color:#9f9f9f;	
		float:			left;
}

.footer1_con {		
		position:		relative;
		color:			#ffffff;		
		left: 			50%; /* 화면의 중앙에 위치 */ 
		padding: 		17px 0;
}

.footer1_con ul {
		list-style:		none;
		line-height:	140%;
		margin:			10px 0 15px 0;
		padding:		0;
		width:			25%;
		float:			left; 
}

.footer1_con li {
		background:		url(../img/com/blt01.gif) no-repeat top left;
		text-transform: capitalize;
		margin:			2px 0;
}

.footer1_con a {
      	display:		block;      	      	
      	text-decoration:none;
      	font-weight:	normal; 
      	color:			#444444;
}

.footer1_con a:hover {
		color:			#ffffff;
}

#footer2 {
		width: 			100%;
		line-height:	180%;
		background-color:#000000;
		color:			#cbcbcb;
		text-align:     center;		
		text-transform: uppercase;
		clear:			both;
		font-size:		11px;
		padding:		17px 0; 
}

#footer2 a {
		color:			#cbcbcb;
		text-decoration:none;
}

#footer2 a:hover {
		color:			#ffffff;
}

#footer3 {
		width: 			100%;
		line-height:	180%;
		background-color:#c40000;
		color:			#ffffff;
		text-align:     center;		
		text-transform: uppercase;
		clear:			both;
		font-size:		11px;
		padding:		11px 0 9px 0; 
}

#footer3 a {
		color:			#ffffff;
		text-decoration:none;
}

#footer3 a:hover {		
		text-decoration:underline;
}



/* -------------------------hmode style.css : all and (min-width:568px) and (max-width:1000px) ---------------------------------*/

.top_desc {
		font-size:		105%;
}

.category {
		font-size:		120%;
}

.list_table, .list_table2, .red {
		font-size:		13px;
		font-weight:	normal;
}

.tit_b_black, {
		font-size:		18px;		
}

.company_es_date, .company_es	{
		font-size:		24px;		
}

dl.feature dt img {
		float: 			left;	
		max-width:		42% ;  /*img 개체의 최대 width를 42% 로 제한*/
		width:			expression(this.width > 378 ? 378: true) ; /*width가 378 보다 클 때에는 ? 378로 설정*/
		height:			auto ;
}

dl.feature dd {
		margin-left: 	44%;
}

#content_person {
		width: 			100%;	/*basic*/
		margin:			40px 0 80px 0;
		height:			560px;
		background:url(../img/contact/02_bg_h.gif) left no-repeat; 
}

.person01 {margin-left:10px}
.person02 {margin-left:10px; margin-top:22px}

/* Search */
.con_box_search	{width:98%;}
.con_box_search_ul01 {margin:10px; padding: 0;}
.con_box_search_ul02 {margin:35px 10px 10px 10px; padding: 0;}
.con_box_search_ul03 {float:right; border-left:none; padding:0; margin-top:40px; height:auto;}

/* Sitemap */
.sitemap {width:100%; left:0; margin-left:0;}
.sitemap ul {margin:10px;}

/* My page */
.con_mypage01	{width:98%; }
.con_mypage02	{margin-top: 10px; width:98%; float:left }

/* Smart ----------- */

@media (min-width:736px) {  

	.con_mypage01	{width:48%; }
	.con_mypage02	{margin-top: 0; width:48%; float:right }

}

@media (max-width:822px) {  

	#content_coop {width:100%; margin:20px 0 30px 0; background-size:40%; padding:20px 0;}
	#content_coop ol {margin:0 0 0 43%;padding:10px 0}
}

@media (max-width:920px) { 

	#content_terms {width:100%;	margin:40px 0 50px 0;}
}

@media (max-width:670px) { 

	.con_660, con_password	{width:97%; left: 0px; margin-left: 0px; }	
	
	.con_signin01 {width:97%; left:0; margin-left:0; margin-bottom:30px; padding:0;}
	.con_signin01 ul {float:left; clear:both; margin:10px; padding:0;}
	.con_signin01 li {list-style:none; font-size:24px; padding:5px 0;}
	.con_signin01_btn	{float:right; height:auto; border-left:none; margin-top:30px; text-align:center; padding:0;}
	.con_signin01_add {padding:0; margin:0 0 0 70px; float:left; clear:both;}

	.btn_join {float:left; margin-left:10px;}

	.con_signin02 {width:97%; left:0; margin: 30px 0 80px 0; padding:0;}
	.con_signin02_btn {float:right; height:50px; border-left:none; margin-top:10px; text-align:center; padding:0;}

	.con_660_con {background:none; padding-left:10px; padding-bottom:15px; height:auto; float:left; clear:both;	width:auto; margin: 10px;}

	.con_password_btn{ float:right; height:auto; width:auto; border-left:none; }

}