@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic');
*{
	margin:0;
	padding: 0;
}

html{
	overflow-y:scroll;
}

body{
	font-family: 'Nanum Gothic', '나눔 고딕';
}

ul,li{
	list-style: none;
}

img{
	border: 0;
	vertical-align: top;
}

.cf:after{
	content:"";
	display: block;
	clear: both;
}

.fl{
	float: left;
}

a{
	text-decoration: none;
	color: #333;
}

/* wrap / width: 100%; 설정을 해줘야한다 */
#wrap{
	width: 100%;
	min-width: 1500px;
}

/* position: fixed; 상단에 고정 */
#header{
	width: 100%;
	height: auto;
	position: fixed;
	z-index: 999999;
}

/* position: relative; 고정 좌표 선언 */
#menu{
	width: 100%;
	height: 105px;
	position: relative;
	z-index: 10;
	background: #ffffff;
	background: rgba(255,255,255,0.8);
}

#gnb{
	width: 96%;
	padding: 0 2%;
	margin: 0 auto;
	height: 105px;
	max-width: 1280px;
}

/* 좌측 상단 k water 로고 위치 */
#gnb>a>img{
	margin-left: -40px;
	margin-top: 25px;
	position: absolute;
	z-index: 1;
}

/* 네비 메뉴 패딩을 줘서 위치 지정 */
#nav{
	padding: 20px 80px 0 25%;
}

#nav>.bg_menu>ul>li{
	width: 20%;
	text-align: center;
}

#nav>.bg_menu>ul>li>a{
	display: block;
	font-size: 25px;
	line-height: 32px;
	padding: 23px 0;
	height: 39px;
	font-weight: bold;
	color: #1e1e1e;
	text-decoration: none;
	letter-spacing: -2px;
}

/* 서브 메뉴 폰트 출력 css 선언*/
/* 세로 85px 제외한 나머지는 보이지 말아라 */
/* transition 선언 */
#nav > .bg_menu{
	position: relative;
	z-index: 2;
	height: 85px;
	overflow: hidden;
	transition-property: height;
	transition-duration: 0.5s;
}

/* 마우스 오버시 서브메뉴가 311px 만큼 내려져라*/
#nav:hover .bg_menu{
	height: 311px;
}

/* #menu position: relative; 위치를 기준으로 좌표를 설정 */
/* 서브 메뉴 bg컬러 / height: 0px; 메뉴 오버 전까지 보이지 않게 크기를 줄이고 액션을 선언*/
.bg_blue{
	position: absolute;
	width: 100%;
	height: 0px;
	left: 0;
	top: 105px;
	background: #0b8dda;
	opacity:0.9;
	z-index: 1;
	transition-property: height;
	transition-duration: 0.5s;
}

/* 오버시 위에 숨긴 세로값을 길어지게 선언을 해서 보이게 한다.*/
#nav:hover .bg_blue{
	height: 226px;
}

/* 서브 메뉴 좌측 물방울 이미지 보이지 않게 크기를 줄이고 액션을 선언 */
.bg_blue span{
	width: 1280px;
	height: 0px;
	display: block;
	background: url(../images/gnb_blind_bg.png) no-repeat 100px bottom; 
	opacity:0.5;
	overflow: hidden;
	transition-property: height;
	transition-duration: 0.5s;
}

/* 오버시 서브 메뉴 좌측 물방울 이미지가 보이게 한다.*/
#nav:hover .bg_blue span{
	height: 200px;
}

#nav > .bg_menu>ul>li>ul{
	padding: 20px 0 20px 20px;
	text-align: left;
	width: auto;
	height: 206px;
}

#nav > .bg_menu>ul>li>ul a{
	display: block;
	color: #fff;
	height: auto;
	font-size: 15px;
	line-height: 21px;
	font-weight: 500;
	padding: 5px 0;
	letter-spacing: -1px;
}

#nav>.bg_menu>ul>li:hover>ul{
	background: rgba(0,086,150,0.5);
}

#search{
	width: 96%;
	max-width: 1280px;
	height: 105px;
	position: absolute;
	top: 0;
	margin: 0 auto;
}

#search_img{
	width: auto;
	height: 32px;
	background: #0b8dda;
	border-radius: 18px;
	position: absolute;
	right: 10px;
	top: 35px;
	padding: 2px 10px;
}

#search_img a{
	display: block;
	background: url(../images/totalsearch_ico.png) no-repeat center;
	width: 33px;
	height: 32px;
}


#main_content{
	position: relative;
	top: 110px;
	left: 0;
	width: 100%;
	height: 700px;
	background: url(../images/bg4.jpg) no-repeat center;
	background-size: cover;
}