@charset "utf-8";
/*CSS 코딩작업시 발생되는 문자의 다국어 지원코드 설정*/
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Roboto&display=swap');
/*상대방 컴퓨터에 지원되지 않는 폰트가 발생될 경우 출력될 수 있도록 웹폰트 설정*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dt,dd,li,hr,button,table,tr,td,form,input,select,option,textarea{margin:0; padding:0; }
/*html본문에서 발생되는 태그중 CSS적용 이전부터 공백을 가지고있는 태그들을
   선택자로 지정하여 공백 제거: 바깥쪽 4방향 모두 0, 안쪽 여백 4방향 모두 0*/
li{ list-style:none; }
/*리스트 항목에 적용된 블릿기호 비표시*/
a{ text-decoration:none; }
/*하이퍼링크 적용 대상 텍스트의 밑줄 제거*/
img{ border:0; }
/*하이퍼링크 적용 이미지는 일반 이미지정보와 다른 기능을 포함하고 있으며,
   파란색 외곽선 테두리를 포함 합니다.
    (인터넷 익스플로러를 제외한 나머지 브라우저에서는 파란색 테두리가
    표기되지않습니다.*/
body{ font-family: Nanum Gothic, Roboto, sans-serif; font-size:16px; }
/*최상위 부모 body태그를 선택자로 지정하여 body태그내에 자식,자손 모든태그에
   글꼴 및 서체 크기 설정*/


/*(1)#header*/
#header{ 
	width:100%; height:80px;  /*아이디 헤더 태그의 너비100%,높이 80px설정*/
	position:absolute; /*아이디 헤더 태그의 높낮이를 일반태그보다 상위에 배치*/
	left:0; top:0; /*아이디 헤더태그의 위치 시작을 브라우저 좌측,상단으로부터 시작하겠다.*/
	
	overflow: hidden; 
	/*1.명령어해석:  아이디 헤더태그의 면적보다 큰 자식태그의 면적을 감춰두겠다.  
	   2.명령어의 용도: 헤더의 높이값을 차후 제이쿼리를 통해 줄였다,늘렸다 하는 애니메이션을
	       적용함으로써 하위메뉴를 보여주는 슬라이드 애니메이션 적용
	*/
	
	border-bottom: 1px solid #0c4da2; 
	/*아이디 선택자 하단 영역에 외곽선을 추가( 두께1픽셀, 형태는 단선, 색상은 KCC주조컬러 적용)*/
	
	box-sizing: border-box;
	/*선택자에 지정된 외곽선의 바깥쪽 두께값을 선택자의 면적 안쪽으로 포함
		헤더의 높이값은 클라이언트의 요구사항에 맞춰 80px 설정
	    헤더의 높이값에 추가되는 외곽선의 두께를 헤더의 면적 안쪽으로 적용해서 80px높이 유지.
	*/
	background: #fff;	
	/*헤더영역 배경색상 화이트 적용.*/
}
.header_wrap{ width:1200px; height:80px; margin:0 auto; }
/*확장구조 아이디 헤더영역내에 웹접근성을 준수할 수 있도록 추가된 헤더랩영역의
   너비값1200px 좌우 마진 auto설정(화면의 정중앙에 배치)*/

/*
    -----------------------------------------------(#header)
                    -----------------------------(.header_wrap)
                    ㅁ       ㅁㅁㅁㅁ                   ㅁㅁ
					(h1)    ( nav )                      (util_menu)
                    -----------------------------
    -------------------------------------------------
*/
h1{ float:left; margin: 13px 120px 0 0;} /*top  right  bottom  left*/
/* 제1제목 높이(54px)를기준으로

       --------------------------------
            ▲(13px)
		0 ㅁ▶▶▶▶▶▶▶(120px)
            0
        ------------------------------
*/
nav{ float:left; }
nav a{ display:block; } 
/* 
    네비게이션 내에 포함된 a태그(자식,자손 모두포함)의 출력형태를 block으로 변경
	a태그의 반응면적 확장 및 hover효과 고려
*/
.gnb>li{ float:left; text-align:center;}
.gnb h2 a{ 
	width:100px; height:80px; 
	line-height:80px;
	font-size:18px; color: #0c4da2; }
.gnb h2 a:hover{  
	border-bottom: 5px solid #0c4da2; 
	box-sizing: border-box; }
.gnb>li ul a{  
	height:40px;  
	line-height:40px;
	color:#333;
	border-bottom:1px solid #d9d9d9; }
.gnb>li ul a:hover{background: #0c4da2; color:#fff;}

.util_menu{ float:right; }
.util_menu li{ float:left; margin-left:15px; line-height:80px; }
.util_menu a{ color:#666; }
.util_menu a:hover{ opacity:0.3; }



/*(2)#container*/
#container{ 
	width:1200px; height:1130px; margin:80px auto 100px auto; }

#container h2{ display:none; }
/*  
	명령어해석: 아이디 컨테이너 영역내에 포함된 h2(자식,자손 모두 포함) 비표시
    명령어 적용 의미:
    시안작업에서 표시 되지 않은 h2는 html코딩 작업시 
	웹표준,웹접근성 준수 사항에 포함된 요소로써
	코딩에는 포함, 실제 출력화면에는 비표시 될 수있도록 처리.
*/

/*
      ----.visual(overflow:hidden;)
		ㅁㅁㅁㅁ .visual ul:nth-of-type(1) <-- 제이쿼리 적용,좌우 슬라이드 애니메이션 처리
      ----
*/
.visual{ width:1200px; height:580px;  overflow: hidden; }
.visual ul:nth-of-type(1){width:3600px; height:580px; }
.visual ul:nth-of-type(1) li{width:1200px; height:580px; float:left;}

.v1{
	/*background:  url()   repeat   position/size  (background-color)*/
	background: url(../images/visual_img1.jpg) no-repeat right top;}
.v2{
	background: url(../images/visual_img2.jpg) no-repeat right top; }
.v3{
	background: url(../images/visual_img3.jpg) no-repeat right top; }


/*2020.06.17 -CSS 시작*/

/*
		유사구조
		<div>
            <p> 문단1</p> - 첫째      div p:first-child{   }   :css2
			<p> 문단2</p> - 둘째
			<p> 문단3</p> - 셋째
			<p> 문단4</p> - 넷째      div p:last-child{  }  :css3
		</div>
	*/

.visual ul:nth-of-type(1)  p:first-child{ 
	margin: 200px 0 20px 20px;
	font-size:30px; color:#8d6728;
	font-weight:bold; }
/* 
	.visual
    클래스명 .visual 내에 

	ul:nth-of-type(1)
    같은 타입 첫번째 ul(자식,자손 모두 포함)내에

 	p:first-child
    첫번째 p(자식,자손 모두 포함)태그
*/


.visual ul:nth-of-type(1) p:last-child{ margin-left:20px;}
.visual ul:nth-of-type(2){
	position: absolute;
	margin: -250px 0 0 20px; }
.visual ul:nth-of-type(2) li{ float:left; margin-right:1px;}
.visual button{
	width:50px; height:30px;
	border:0; 
	background: #0c4da2; color:#fff; 
	cursor: pointer;
	/*
		기능요소 버튼의 취약점
		a태그처럼 사용자가 마우스를 해당 태그에 
		오버 했을시 커서 모양이 핸드 모양 변경 되지 않는다.
	     [해결방법]  cursor:pointer;
	*/
}
.visual button:hover{ 
	border:3px solid #0c4da2; 
	background: #fff; color: #0c4da2; }

/*
  newest
	1. div 면적( w:300, h:275),  - 예외(첫번째 div)
	2. h3 글자크기, 간격
	3. a태그 글자 색상

   외곽선 적용 설계
   
    (1)(2)(3)(4)
		 (5)(6)(7)

    1~7: top,left
    5,6,7: bottom
	4,7 : right
*/
.newest{ clear:both;  width:1200px; height:550px; margin-bottom:100px;}

.newest div{  /*명시도 11점*/
	width:300px; height:275px;	
	border-top:1px solid #d9d9d9;  border-left:1px solid #d9d9d9;
	box-sizing: border-box;
	float:left; }
.newest div:nth-of-type(1){ /*명시도11점*/
	height:550px;	border-bottom:1px solid #d9d9d9; } 

/*
 ★유사구조의 태그를 범위지정 선택.(css3)

.newest div:nth-child(4)~div{          }
 
.newest div:nth-child(4)      ~      div {           }
 유사구조 태그 기준               ~     나머지 유사구조 태그

[주의] 유사구조 태그 기준은 선택자에 포함되지 않습니다.
*/
.newest div:nth-of-type(4)~div{ border-bottom:1px solid #d9d9d9; }
.newest div:nth-of-type(4), .newest div:nth-of-type(7){
	border-right:1px solid #d9d9d9; }
.newest a{ color:#000; }

.newest h3{ margin:20px 0; }
.newest div>*{  padding: 0 20px;  }/*11*/
.newest div>p{ margin-bottom:20px; }

.newest div:nth-of-type(5) h3{ position: absolute; color:#fff;}
.newest div:nth-of-type(5) p{ padding:0; }/*12*/
.newest div:nth-of-type(even){ background: #efefef; }

.newest div:nth-of-type(6){
	/*
	   여섯번째 div구역은 (1)배경 색상과 (2)이미지가 둘다 적용되어야 합니다. 
			선택자{
					background: #efefef; 
					background: url(../images/kcc_social.png) no-repeat right 140px;
			}
			---------------------------------x------------------------------------
	
				선택자{
						background: url(../images/kcc_social.png) no-repeat right 140px  #efefef; ;
			}
	*/
	background: url(../images/kcc_social.png) no-repeat right 140px #efefef; }

.newest div:nth-of-type(7){ background: url(../images/kcc_color.jpg); }
.newest div:nth-of-type(7) *{ color:#fff; }
.newest  tr:not(:last-child)  td, .newest  li:not(:last-child){ border-bottom:1px dotted #999; }

/* 
		:first-child 
		:last-child 
		~
		부정유사 선택자 :not
		: 유사구조의 태그 내에서 제외 대상을 제외한 나머지 유사구조 대상 선택

    	<div>
			<p>내용1</p>
			<p>내용1</p>
			<p>내용1</p>
		</div>

        div p:not(:first-child){  }

        div p          :not(    :first-child   ){  }
        -----
		유사구조 :not (유사구조 제외대상)
*/
.newest div:nth-of-type(1) td{  padding-bottom:20px;}
.newest div:nth-of-type(1) tr:not(:first-child) td{ padding-top:20px; }
.newest div:nth-of-type(1) tr:first-child p:first-child{ margin-bottom:20px; }

.newest div:nth-of-type(2) li, .newest div:nth-of-type(3) td{ 
	height:40px; line-height:40px;
}
.newest div:nth-of-type(2) p:nth-of-type(2){
	position:absolute; margin: -100px 0 0 160px;
}


/*footer*/
#footer{ clear:both; height:40px; background:#333; }
.footer_wrap{ 
	width:1200px; height:80px;
	margin: 0 auto; }

.footer_wrap ul{ height:40px; }

.footer_wrap li{ 
	float:left; 
	margin-top:12px; 	
	margin-right:20px;
	padding-right:20px;
}

.footer_wrap li:not(:last-child){ border-right:1px solid #fff; }

.footer_wrap a{ color:#fff;}

.footer_wrap a:hover{ opacity:0.3; }
.footer_wrap address{  float:left; line-height:40px; font-style:normal;  }
.footer_wrap p{ float:right; line-height: 40px; }