@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,li,dl,dd,dt,table,tr,td,button,hr,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단계*/
	/*
	1. 명령어 해석:아이디 헤더태그의 면적보다 큰 자식 태그의 면적을 감춰두겠다
	2. 명령어 용도:헤더의 높이값을 차후 제이쿼리를 통해 줄였다, 늘렸다 하는 애니메이션을 적용함으로써 하위메뉴를 보여주는 슬라이드 애니메이션 적용*/	
	border-bottom:1px solid #0c4da2;
	/*아이디 선택자 하단 영역에 외곽선을 추가(두께1px,단선,KCC주조컬러)*/
	box-sizing:border-box;
	/*선택자에 지정된 외곽선의 바깥쪽 두께값을 선택자의 면적 안쪽으로 포함
	  헤더의 높이값은 클라이언트의 요구사항에 맞춰 80px 설정
	  헤더의 높이값에 추가되는 외곽선의 두께를 헤더의 면적 안쪽으로 적용해서 80px 높이 유지*/
	background:#fff;
	/*헤더영역 배경색상 화이트 적용*/}
/*선택자에 css속성 적용은 블럭 속성 먼저, 인라인 속성 나중에*/

.header_wrap{
	width:1200px; height:80px;
	margin:0 auto;}
/*확장구조 아이디 헤더영역내에 웹접근성을 준수할 수 있도록 추가된 헤더랩영역의 너비값 1200px, 높이값 80px, 좌우 마진 auto설정(화면의 정중앙에 배치)*/

h1{float:left; margin:13px 120px 0 0;}
/* 제1제목 왼쪽 정렬
제 1제목 높이(54px)를 기준으로 위쪽 여백 13px, 오른쪽 여백 120px 적용*/

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:#0c4ab2;}
.gnb h2 a:hover{
	border-bottom:5px solid #0c4ab2;
	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:#0c4ab2;	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{
	width:1200px; height:580px;
	overflow:hidden;
	/*이미지슬라이드 ul이 .visual의 크기를 넘어서 클리핑 마스크 처리*/}
.visual ul:nth-of-type(1){
	width:3600px; height:580px;}
.visual ul:nth-of-type(1) li{
	width:1200px; height:580px;
	float:left;}
.visual ul:nth-of-type(1) li:nth-child(1){
	background:url(../images/visual_img1.JPG) no-repeat right top;}
.visual ul:nth-of-type(1) li:nth-child(2){
	background:url(../images/visual_img2.JPG) no-repeat right top;}
.visual ul:nth-of-type(1) li:nth-child(3){
	background:url(../images/visual_img3.JPG) no-repeat right top;}
/*	background:url(	) repeat position/size (background-color); */

/*2020.06.17 2일차 CSS 시작*/

.visual ul:nth-of-type(1) p:first-child{
	margin:200px 0 20px 20px;
	font-size:40px; font-weight:bold;
	color:#8d6728;}
/*.visual 내의 같은 타입 ul(자식, 자손 모두 포함)의 첫번째 p(자식, 자손 모두 포함)*/
.visual ul:nth-of-type(1) p:last-child{margin-left:20px;}

.visual ul:nth-of-type(2){
	position:absolute;
	margin:-220px 0 0 20px;}
.visual ul:nth-of-type(2) li{
	float:left;
	margin-right:5px;}

/* 기능요소 버튼의 취약점
	: a 태그처럼 사용자가 마우스를 해당 태그에 오버했을 시 커서 모양이 변경되지 않음(pointer)
*/
.visual button{
	width:40px; height:40px;
	border:0;
	background:#0c4da2; color:#fff;
	cursor:pointer;}
.visual button:hover{
	border:3px solid #0c4da2;
	background:#fff; color:#0c4da2;}

/*
newest
1. div 면적(width:300; height:275px;) - 예외 (KCC News)
2. h3 글자크기, 간격
3. 외곽선
	(1)(2)(3)(4)
	   (5)(7)(7)
	1~7 : top, left
	1,5,6,7 : bottom
	4,7 : right
4. a태그 글자 색상
*/

.newest{
	clear:both; 
	width:1200px; height:550px;
	margin-bottom:100px;}
.newest div{
	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){
	height:550px;
	border-bottom:1px solid #d9d9d9;}

/*
★ 유사구조의 태그를 범위지정 선택(css3)
.newest div:nth-of-type(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;}
.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;}

.newest div:nth-of-type(even){background:#efefef;}

/*
여섯번째 div 구역은 (1)배경 색상과 (2)이미지가 둘다 적용되어야 함
선택자{background:#efefef;}
선택자{background:url(../images/kcc_social.png)}
는 각각 넣는 것이고

선택자{background:url(../images/kcc_social.png) no-repeat right 150px #efefef;}
*/
.newest div:nth-of-type(6){
	background:url(../images/kcc_social.png) no-repeat right 150px #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: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;}