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


/* -------------------------- All - 모든 해상도 공용 스타일 --------------------------- */

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

img {border: none;}

body {
		height: 			100%; /* body와 html의 높이를 100% 로 지정 */ 		
		font-family: 		'Ubuntu','Arial', 'Dotum','sans-serif';
		color:				#666;
		margin:				0px;	
        font-size: 			14px;		
}  

#main { 			
		position:relative; 		
		border: none; 
} 

/* ------ Header ------ */

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

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

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


#toputil_right {
		text-transform: uppercase;
}

/* ------ Navigation ------ */

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

/* ------ Content ------ */

#content {
		background-color: #fff;
		float:			left;
		line-height:	150%;
}

#content .sub1, .sub2, .sub3	{		
		float:			left;
		display:		block;			
}

#content .sub1 a, .sub2 a, .sub3 a {
		color:	#666;
		text-decoration:none;
		line-height:	180%;
}

#content .sub1 a:hover, .sub2 a:hover, .sub3 a:hover  {
		color:			#000;
		text-decoration:underline;
}

.tit_news {
		font-family: 	'Jura','Ubuntu','Arial', 'Dotum','sans-serif';	
		font-weight:	bold;
		color:			#000;
		border-bottom:	1px solid #ccc;
		text-transform:	uppercase;	
		font-size:		20px;
		padding:		25px 0 25px 50px;
}

/* ------ Contact ------ */

dl.contact {
		margin:			10px 0 0 5px; 		
		width:			100%;
}

dl.contact dt {									
		margin-bottom:	4px; /*hmode*/
		font-size:		10px;
		line-height:	140%;
		text-transform:	uppercase;
}

dl.contact dd {
		margin:			7px 0 20px 10px; /*세로모드 */
		text-transform:	uppercase;
		color:			#aaa;
		font-size:		20px;
		font-weight:	bold;
}

/* ------ New Currency Converter ------ */

dl.cur_con {
		padding:		0;
		margin:			10px 0 0 5px; 		
}

dl.cur_con dt {					
		color:			#555;
		font-family:	Arial,Tahoma,sans-serif;
		float:			left;
		margin-bottom:	4px;
		font-size:		10px;
}

dl.cur_con dd {margin-bottom:4px;}	
.cur_input{color:#444; font-size:11px; font-weight:bold; font-family:Arial,Tahoma,sans-serif; background-color:#ccc; border:1px solid #ccc; text-align:right; display:inline; }

/* ------ Footer ------ */

#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;
}

/* ------ Slide Image (SlidesJS Required) ------ */

#slides {
  display:	none;
  float:	left; 
  width:	1028px;
  background: url(../img/inx/bg_slides.gif) top repeat-x;	 /* 세로모드만 */
}

#slides .slidesjs-navigation {
  margin-top:9px;
  margin-left:14px;
}

a.slidesjs-next,
a.slidesjs-previous,
a.slidesjs-play,
a.slidesjs-stop {
  background-image: url(../img/inx/btn_next_prev.png);
  background-repeat: no-repeat;
  display:block;
  width:17px;
  height:17px;
  overflow: hidden;
  text-indent: -9999px;
  float: left;
  margin-right:0px;
}

a.slidesjs-next {
  margin-right:0px;
  background-position: -23px 0;
}

a:hover.slidesjs-next {
  background-position: -23px -17px;
}

a.slidesjs-previous {
  background-position: 0 0;
}

a:hover.slidesjs-previous {
  background-position: 0 -17px;
}

a.slidesjs-play {
  width:17px;
  background-position: -46px 0;
}

a:hover.slidesjs-play {
  background-position: -46px -17px;
}

a.slidesjs-stop {
  width:17px;
  background-position: -69px 0;
}

a:hover.slidesjs-stop {
  background-position: -69px -17px;
}

.slidesjs-pagination {
  margin: 21px 14px 0 0;
  float: right;
  list-style: none;
  height:	5px;
}

.slidesjs-pagination li {
  float: left;
  margin: 0 0 0 14px;
  list-style: none;
  padding:0;
  background:none;		 
}

.slidesjs-pagination li a {
  display: block;
  width: 47px;
  height: 0;  	  /* 47px ie8 */
  padding-top: 47px;
  background-image: url(../img/inx/pagination.png);
  background-position: 0 0;
  float: left;
  overflow: hidden;
  list-style: none;	  
}

.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
  background-position: 0 -5px;
  list-style: none;	  
}

.slidesjs-pagination li a:hover {
  background-position: 0 -10px;
  list-style: none;	  
}	

#container {
  margin-bottom: 22px;
  width:1028px;	 
}	


/* ------------------------- all and (min-width:568px) and (max-width:1000px) ---------------------------------*/

body {		
		margin:	0;
}

#main { 
		width: 100%; 		
		left: 50%; /* 화면의 중앙에 위치 */ 
		margin-left: -50%; /* 높이의 절반과 너비의 절반 만큼 margin 을 이용하여 조절해 줍니다. */		
}

/* ------ Header ------ */

#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;
}

/* ------ Navigation ------ */

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

/* ------ Content ------ */

#content {
		width: 			100%;
		margin:			10px 0 30px 0;
}

#content .sub1 a:hover, .sub2 a:hover, .sub3 a:hover  {
		font-size:		95%;
}

#content .sub1 {width:95%; margin-left:10px}
#content .sub2 {width:43%; margin-left:10px} /*hmode*/
#content .sub3 {width:50%; margin-left:20px} /*hmode*/

/* ------ New Currency Converter ------ */

dl.cur_con {
		width:			100%;
}

dl.cur_con dt {					
		width:			150px;
}

.cur_input{width:90px; padding:2px 0; margin:2px 0 3px 0; }

/* ------ Footer ------ */

.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*/
}