@charset "utf-8";
/*   
    index.html 문서 전체 스타일 
	웹폰트,공통스타일   #header               #container               #footer
			▲  						          ▲                               ▲                            ▲ 
	 style.css				    style.css                  style.css               style.css 
----------------------------------------------------------------------------
																	#sub_container
																				 ▲
																	   sub_style.css

------------------------------------------------------------------------------


CSS의  기본은   블럭: width, height,  border, margin(padding) ,float
						    인라인: font-family, font-size, color, line-height, text-align

							배경이미지 처리: background: url()  repeat   position/size

*/
/*
	1.전체 서브 공통스타일
	#sub_container, aside, .lnb, .sub_content 
*/
#sub_container{ width:1200px; margin:80px auto 0 auto; }
#sub_container aside{width:180px; margin-right:20px; float:left; }
#sub_container aside h2{ 
	height:180px;
	color:#fff; background: #0c4da2; 
	font-size:30px;
	text-align: center;
	line-height:180px; }
/*
.lnb(ul)
.lnb li
.lnb a
*/
.lnb a{ 
	display:block;
	height:40px;
	border-bottom: 1px solid #d9d9d9;
	line-height:40px;
	text-indent: 20px;
	color:#333;
}
.lnb a:hover{ background:#0c4da2; color:#fff; }
/* 서브콘텐츠와 푸터영역 사이의 공통 간격80px 설정*/
.sub_content{ width:1000px;	float:left;  margin-bottom:80px;}
.sub_content h3{
	font-size:40px;
	margin: 68px 0 80px 0;
}
/*각서브페이지의 키워드는 20px공통 크기 적용*/
.sub_content strong{ font-size:20px; }
/*각서브페이지의 공통 행간 설정(명시도 11)*/
.sub_content p{ line-height:25px; }


/*sub1개별스타일*/
.business li{ width:490px; height:145px; float:left; margin-bottom:20px;}
.business li:nth-child(odd){ margin-right:20px; }
/*background: url()   repeat   position/size */
.business li:nth-child(1){ background: url(../images/business_cont_01.jpg);  }
.business li:nth-child(2){ background: url(../images/business_cont_02.jpg);  }
.business li:nth-child(3){ background: url(../images/business_cont_03.jpg);  }
.business li:nth-child(4){ background: url(../images/business_cont_04.jpg);  }
.business li:nth-child(5){ background: url(../images/business_cont_05.jpg);  }
.business li:nth-child(6){ background: url(../images/business_cont_06.jpg);  }
.business p:first-child{ margin:20px 0 10px 20px; /* top   right   bottom  left*/}
.business p:last-child{ margin-left:20px; }

.ceo_message>p:first-child{
	border-bottom: 1px solid #d9d9d9;
	padding-bottom:40px; margin-bottom:40px;
}
.ceo_message>p:nth-of-type(2){
	width:355px; height: 350px; float:left;
	margin-right:40px;
	
	font-size:25px;
	line-height:35px;
	background: url(../images/bg_ceo_logo.jpg) no-repeat center bottom; }
.ceo_message span{ font-weight: bold; color: #0c4da2; }
.ceo_message div{ float:right; width: 605px;  /*1000 -395 = 605px */}
.ceo_message div p{ margin-bottom:20px; }
.ceo_message mark{  background: none; font-weight: bold; font-size:18px;}
.history>li { margin-bottom: 40px;}

.history p strong{
	display:block;
	font-size:40px;
	margin-bottom:40px; }

.history ol{ margin-left:40px; }

/*
	float속성을 적용한 자식태그를 둔 부모 태그는
	자식들이 포기한 문단의 높이를 인지하지 못하고 
	별도의 높이값을 지정해주지 않았을시 높이값이 제거가 됩니다.

	이때!!~ float속성을 적용한 자식태그를 둔 부모 태그에게
	overflow:hidden 속성을 적용할 경우
	선택자로 지정된 부모 태그에게, 자식태그의 높이값을 확인 시켜줄수
	있게됩니다.

     -------        -------  overflow:hidden;
      ㅁ   ㅁ   ▶    ㅁ   ㅁ
                          -------
*/
.history ol li{  
   clear:both;
   /*★*/overflow: hidden;
	margin-bottom:20px; }
	
.history ol p{ float:left;}

.history ol p:first-child{	margin-right:40px;}
.history ol p:nth-child(2)~p{
	clear:both;
	margin-left:62px; }
/*sub2개별스타일*/
.product p{ margin-bottom:20px; }
.product p:last-child{
	border-top:1px solid #d9d9d9;
	border-bottom:1px solid #d9d9d9;
	padding:20px 0; }

/*sub3개별스타일*/

.rnd p{ margin-bottom:20px; }
.rnd div:nth-of-type(1){ margin-bottom:40px; }
.rnd div:nth-of-type(1) p:last-child{ position: absolute;	margin: -190px 0 0 695px; }
.rnd div:nth-of-type(2)>ul>li{	width:320px; float:left; }
.rnd div:nth-of-type(2)>ul>li:nth-child(2){ margin:0 20px; }
.rnd li p:nth-of-type(1){ position: absolute; margin-top: 220px; }
.rnd li p:nth-of-type(2){ margin-bottom:60px; }
.rnd div:nth-of-type(2) img{ width:320px; }
.rnd li li{ margin-left:20px; line-height:30px; list-style-image: url(../images/rnd_list_icon.gif); }

/*sub4개별스타일*/

.media *{ border:0; width:1000px; height:570px; }


/*sub5개별스타일*/

/*sub6개별스타일*/

.find iframe{
	border:0;
	width:1000px; height:500px;
	margin-bottom:20px; }

.find address{ font-style:normal; }

.find>div{ padding:20px; }
.find_info1{background: #f9f9f9;}
.find_info2{	overflow: hidden;	background:#eff6fc;	}
.find_info2 div{ float:left; margin-right:40px; }



/*
	login,join개별스타일

	★인라인 요소중 면적 설정 및 마진(상하좌우) 적용 가능태그
	: img, form태그내에 input, select,option, textarea

	★폼태그와 관련된 요소는 기본 마진,패딩 발생 대상 태그로써 초기 CSS공통 스타일 항목에
       추가및 margin:0;  padding:0;을 제거해 줍니다
.
    ★폼태그와 관련된 요소는 기본 외곽선을 포함하고 있으며,box-sizing: border-box;를 적용하고
        사용하는것을 권장.
*/

.login table{ width: 700px; margin:0 auto;}
.login input{ 
	width:700px; height:30px; 	margin:10px 0;
	border-radius: 20px; border:1px solid #999; 
	box-sizing: border-box; }

.login tr:not(:last-child) input{ text-indent:20px;}
.login tr:last-child input{	background: #0c4da2; color:#fff; }


.join table{ width:700px; margin:0 auto; }

.join td{ 
	padding:10px 0;
	border-bottom:1px solid #d9d9d9; 
}

.join tr:not(:last-child) p:first-child{
	color:#0c4da2; 	margin:10px 0; 
}

/* 1,2,3,4,(5:생년월일),6,7,(8:휴대전화),(9:문자수신),(10:기타)*/
.join tr p>*{
	width:700px; height:40px; 
	border:1px solid #999;
	box-sizing: border-box; 
	text-indent:10px; }

.join tr:nth-child(5) p>*{ width:230px; }/*5.생년월일*/

.join tr:nth-child(8) p:nth-child(2){ margin: 10px 0; }/*8.휴대전화*/
.join tr:nth-child(8) p:nth-child(3) input{ margin:10px 0; width:550px;  }

.join tr:nth-child(8) p:nth-child(3) a{ 
	display:inline-block;  
	width:145px; height:42px;	
	border: 0;
	
	color:#fff; 
	background: #0c4da2;  
	line-height:42px;
	text-align:center;
	text-indent:0;	 }

.join tr:nth-child(9) input{  /*9.문자수신*/
	width:16px; height:16px; margin: 5px 15px 0 0; } 

.join tr:nth-child(10) textarea{  /*10.기타*/
	height:150px; }

.join tr:nth-child(11) input{  /*11.회원가입*/
	background: #0c4da2; color:#fff; }