@charset "utf-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
/* font-family: 'Noto Sans KR', sans-serif; */
/* Thin 250, Light 300, DemiLight 350, Regular 400, Medium 500, Bold 700, Black 900 */
/* 100, 300,400, 500,700,900 */
/* 이슈 : 2018년 01월 15일 나눔웹폰트를 시작으로 01월 24일 본고딕 웹폰트 링크 변경으로  */
/*
@font-face {
	font-family: 'Nanum Gothic';
	font-style: normal;
	font-weight: 400;
	src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot);
	src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
		url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff) format('woff'),
		url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.ttf) format('truetype');
}
@font-face {
	font-family: 'Nanum Gothic';
	font-style: normal;
	font-weight: 700;
	src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.eot);
	src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),
		url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff) format('woff'),
		url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.ttf) format('truetype');
}
@font-face {
	font-family: 'Nanum Gothic';
	font-style: normal;
	font-weight: 800;
	src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.eot);
	src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.eot?#iefix) format('embedded-opentype'),
		url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.woff) format('woff'),
		url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.ttf) format('truetype');
}
*/

@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 100;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),	
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 300;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),	
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 400;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),	
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 500;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),	
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 700;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),	
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 900;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),	
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
}
/*
# Nanum Gothic (Korean) http://www.google.com/webfonts/earlyaccess
Regular 400,
Bold 700 
800
*/

/* @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); */

/*
# Nanum Barun Gothic
UltraLight 200,
Light 300,
Regular 400,
Bold 700

@import url("https://cdn.rawgit.com/openhiun/hangul/14c0f6faa2941116bb53001d6a7dcd5e82300c3f/nanumbarungothic.css");
*/


/* Base Style Start */
html, body {position: relative; width: 100%; height: 100%; margin: 0px auto; padding: 0;}
body, div, ul, li, dl, dt, dd, ol, p, h1, h2, h3, h4, h5, h6, table, form {margin: 0; padding: 0; border: 0;}

body {
	position: relative;
	font-family: 'Noto Sans KR', 'Nanum Gothic', 'Malgun Gothic', '맑은 고딕', sans-serif; word-break: keep-all; /* word-break: break-all; */ word-wrap: break-word;
	font-size : 12px; font-weight: normal; color: #333333;
	background-color : #FFFFFF;
}
/* Base Style End */

/* Text Base Style Start */
dl, dt, dd, ul, ol, li, p {list-style : none; /* for smartEditor text-align : justify; */ vertical-align : middle; letter-spacing : 0px; line-height: 20px; }

h1 {font-weight: bold; color: #333333; font-size: 34px; line-height: 34px;}
h2 {font-weight: bold; color: #333333; font-size: 30px; line-height: 30px;}
h3 {font-weight: bold; color: #333333; font-size: 24px; line-height: 24px;}
h4 {font-weight: bold; color: #333333; font-size: 20px; line-height: 18px;}
h5 {font-weight: bold; color: #333333; font-size: 16px; line-height: 14px;}
h6 {font-weight: bold; color: #333333; font-size: 14px; line-height: 12px;}

.bold	{font-weight: bold;}
.left	{text-align: justify;}
.center	{text-align: center;}
.right	{text-align: right;}

.ciBlue {color: #0077bb;}
.ciBlueLight {color: #80d0e2;}
.ciBlueDark {color: #219eb9;}
.ciRed {color: #fe365b;}
.ciRedDark {color: #de3151;}

.ciBrown01 {color: #754b35;}
.ciBrown02 {color: #945100;}
.ciBrown03 {color: #bf8f33;}
/* Text Base Style Start */

img {border: none; margin: 0; padding: 0;}

/* form 요소 Start */
input {
	font-family: 'Nanum Gothic', 'Malgun Gothic', '맑은 고딕', sans-serif;
	display: inline-block;
	vertical-align: middle;
}
select {
	font-family: 'Nanum Gothic', 'Malgun Gothic', '맑은 고딕', sans-serif;
	display: inline-block;
	vertical-align: middle;
	border: 1px #dddddd solid;
	height: 32px;
	line-height: 20px;
	font-size : 12px;
	padding: 5px;
	color : #333333;
	background-color : #fdfdfd;
	vertical-align: middle;
	font-weight: normal;
}
select:focus {
	border: 1px #5db0c6 solid;
	background-color : #FFFFFF;
}

input[type=checkbox] {width: 20px; height: 20px;}
input[type=radio] {width: 20px; height: 20px;}

.f_field {
	display: inline-block;
	vertical-align: middle;
	border: 1px #DDDDDD solid;
	height: 20px;
	padding: 4px;
	line-height: 20px;
	font-size : 12px;
	color : #333333;
	background-color: #fdfdfd;
	vertical-align: middle;
	font-weight: normal;
}
.f_field:focus {
	border: 1px #48bbd4 solid;
	background-color: #FFFFFF;
}
/* form 요소 End */


/* a href Style Start */
a:link, a:visited, a:active {
	letter-spacing: 0px;
	margin: 0;
	text-align: justify;
	text-decoration: none;
	outline:0;
	color: #444444;
}

a:hover {
	letter-spacing: 0px;
	/* line-height: 20px; */
	margin: 0;
	text-align:	justify;
	text-decoration: underline;
	outline:0;
	color: #222222;
}
/* a href Style End */


/* btn class */
.Btn {display: inline-block; vertical-align: middle;}
.Btn>span {display: inline-block; text-align: center;}

.Btn.White {border: 1px #dddddd solid; background-color: #ffffff;}
.Btn.White>span {color: #777777; font-weight: bold;}

.Btn.Gray {border: 1px #777777 solid; background-color: #aaaaaa;}
.Btn.Gray>span {color: #FFFFFF; font-weight: bold;}

.Btn.Dark {border: 1px #333333 solid; background-color: #444444;}
.Btn.Dark>span {color: #FFFFFF; font-weight: bold;}

.Btn.Red {border: 1px #de3151 solid; background-color: #fe365b;}
.Btn.Red>span {color: #FFFFFF; font-weight: bold;}

.Btn.Blue {border: 1px #0077dd solid; background-color: #0077dd;}
.Btn.Blue>span {color: #FFFFFF; font-weight: bold;}

.Btn.BlueDark {border: 1px #15303f solid; background-color: #214a60;}
.Btn.BlueDark>span {color: #FFFFFF; font-weight: bold;}

.Btn.LightJade {border: 1px #48bbd4 solid; background-color: #48bbd4;}
.Btn.LightJade>span {color: #FFFFFF; font-weight: bold;}

.Btn.Type01 {height: 18px; padding: 5px; overflow: hidden;  margin-left: 0px; margin-right: 0px;}
.Btn.Type01>span {line-height: 18px;  padding-left: 15px; padding-right: 15px;}

.Btn.Type02 {height: 18px; padding: 10px; overflow: hidden;  margin-left: 0px; margin-right: 0px;}
.Btn.Type02>span {font-size: 14px; font-weight: bold; line-height: 18px;  padding-left: 25px; padding-right: 25px; padding-left: 20px; padding-right: 20px;}

.Btn.mc01 {float: left; width: 160px; height: 20px; padding: 19px; overflow: hidden;  margin-left: 0px; margin-right: 0px; text-align: center; border: 1px #eeeeee solid; border-radius: 5px; background-color: #fafafa;}
.Btn.mc01>span {font-size: 14px; font-weight: bold; line-height: 20px; color: #333333; }
.Btn.mc01:hover {border: 1px #00b5dc solid; border-radius: 5px; background-color: #00b5dc;}
.Btn.mc01:hover>span {color: #ffffff;}

.Btn.Small {height: 14px; padding: 3px; overflow: hidden;  margin-left: 0px; margin-right: 0px;}
.Btn.Small>span {line-height: 14px; font-size: 11px; padding-left: 5px; padding-right: 5px;}

.Btn.Wide {}
.Btn.Wide span {padding-left: 30px; padding-right: 30px;}

.BtnWrap {text-align: center; padding: 30px;}
/* btn class */


/* Space Null Start */
.null05 {width: 100%; height: 5px; border: 0; margin: 0; padding: 0; line-height: 0; font-size: 0;}
.null10 {width: 100%; height: 10px; border: 0; margin: 0; padding: 0; line-height: 0; font-size: 0;}
.null20 {width: 100%; height: 20px; border: 0; margin: 0; padding: 0; line-height: 0; font-size: 0;}
.null30 {width: 100%; height: 30px; border: 0; margin: 0; padding: 0; line-height: 0; font-size: 0;}
.null40 {width: 100%; height: 40px; border: 0; margin: 0; padding: 0; line-height: 0; font-size: 0;}
.null50 {width: 100%; height: 50px; border: 0; margin: 0; padding: 0; line-height: 0; font-size: 0;}
.null100 {width: 100%; height: 100px; border: 0; margin: 0; padding: 0; line-height: 0; font-size: 0;}
/* Space Null End */

.dummy {clear: both; width: 100%; height: 0; border: 0; margin: 0; padding: 0; line-height: 0; font-size: 0;}
.line01 {width: 100%; height: 1px; border: 0; margin: 0; padding: 0; line-height: 0; font-size: 0; background-color: #dddddd;}

.clearFix:after {content:""; display: block; clear: both;} /* 부모창에 자식창의 높이를 알려주는 권장방법 */
.clearFix {*zoom: 1;} /* IE5.5 ~ 7 브라우저 대응 핵 */

/* body Base Style Start */
table {
	width: 100%; margin: 0 auto; padding: 0;
	border-collapse: collapse;
	border-spacing: 0;
	border-top: 2px #0077bb solid;
	border-bottom: 1px #0077bb solid;
}
table th, table td {
	font-size: 12px; line-height: 20px; padding: 10px;
	border-left: 0; border-right: 0; border-top: 0; border-bottom: 1px #dddddd solid;
}
table tr:last-child {border-bottom: 1px #aaaaaa solid;}

table th {background-color: #f7f7f7;}
table caption {font-size: 12px; line-height: 30px; color: #999999; font-weight: bold; text-align: right; vertical-align: middle; padding: 5px 0;}

.td:last-child {background-image: none; border: 0;}
.tr:last-child {border-bottom: 1px #aaaaaa solid;}

.cellTop {vertical-align: top;}
.cellSection {font-weight: bold; color: #777777;}
.cellSpecial {font-weight: bold; color: #333333;}
.cellWhite {font-weight: bold; color: #FFFFFF;}

.cellColorF7 {background-color: #F7F7F7;}
.cellColorF4 {background-color: #F4F4F4;}
.cellColorF0 {background-color: #F0F0F0;}
.cellColorEE {background-color: #EEEEEE;}
.cellColorBB {background-color: #BBBBBB;}
.cellColor66 {background-color: #454545;}
.cellColor44 {background-color: #444444;}

.cellColorS1{background-color: #fe365b; color: #FFFFFF;}
.cellColorS2{background-color: #214a60; color: #FFFFFF;}
.cellColorS3{background-color: #f5f7fc;}
.cellColorS4{background-color: #00b5dc;}

.fontColorS1{color: #0077bb;}
.fontColorS2{color: #46d6cc;}
.fontColorS4{color: #214a60;}
/* body Base Style End */

/* Pop-up Window Style Start */
.popPrivacy {width: 640px; height: 500px; background-image: url('../img/bg_privacy.gif'); margin: 0 auto;}
.popPrivacy textarea {width: 580px; height: 300px; margin: 60px 20px 20px 20px; padding: 10px; text-align: justify;}
.popGuide {width: 640px; height: 500px; background-image: url('../img/bg_guide.gif'); margin: 0 auto;}
.popGuide textarea {width: 580px; height: 300px; margin: 60px 20px 20px 20px; padding: 10px; text-align: justify;}
.popEmail {width: 640px; height: 500px; background-image: url('../img/bg_email.gif');  margin: 0 auto;}
/* Pop-up Window Style End */


	/* 웹접근성을 위한 본문 바로가기 : Navigation Skip (메뉴 스킵) */
	.bind {position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; visibility: hidden; font-size: 0px; line-height: 0px;}
	/* 웹접근성을 위한 본문 바로가기 : Navigation Skip (메뉴 스킵) */

	
	/* Top Header Start */
	#header {position: relative; width: 100%; height: 100px;}
	#header .headerFix {
		position: fixed; top: 0px; width: 100%; height: 100px; margin: 0 auto; z-index: 10;
		border-bottom: 0px #dddddd solid;
		background-color: #ffffff;
		box-shadow: 0 0 5px 0px #ddd;
	}
	/*
	opacity: 0.95;
	filter: alpha(opacity=95);
	background-color: rgba(255,255,255,0.95);
	*/

	#header .headerFix .naviArea {width: 960px; height: 100px; margin: 0 auto;}
	#header .headerFix .naviArea .ci {float: left; width: 200px; height: 60px; line-height: 60px; text-align: left; padding: 20px 40px 20px 0; overflow: hidden;}

	#header .headerFix .naviArea .menuNavi {float: left; width: 720px; height: 100px;}
	#header .headerFix .naviArea .menuNavi>li {
		position: relative; 
		float: left; width: 90px; height: 100%; line-height: 100px; list-style: none; display: inline; text-align: center;
		font-size: 16px; font-weight: normal; color: #333333;
	}
	#header .headerFix .naviArea .menuNavi>li:first-child {background-image: none;}
	#header .headerFix .naviArea .menuNavi>li.fix,
	#header .headerFix .naviArea .menuNavi>li.fix a,
	#header .headerFix .naviArea .menuNavi>li.on,
	#header .headerFix .naviArea .menuNavi>li:hover,
	#header .headerFix .naviArea .menuNavi>li>a:hover,
	#header .headerFix .naviArea .menuNavi>li.on>a {color: #a28c61;} /* background: url('../img/bgMainNavi.png') no-repeat left top;  */
	#header .headerFix .naviArea .menuNavi>li>a,
	#header .headerFix .naviArea .menuNavi>li>a:hover {display: block; text-align: center; font-weight: 300; text-decoration: none;}

	#header .naviArea .menuNavi li .subMenu {
		position: absolute; display: none;
		top: 99px; left: 0; width: 158px; height: 239px; padding: 10px 0; z-index: 12; background-color: #453e36;
		border: 1px #453e36 solid;
		border-top: none;

		/* box-shadow: 0 5px 5px 5px #888; */

		opacity: 0.98;
		filter: alpha(opacity=98);
		background-color: rgba(69,62,54,0.98);
	}
	#header .headerFix .naviArea .menuNavi li>.sm01 {left: 0; height: auto;}
	#header .headerFix .naviArea .menuNavi li>.sm02 {left: 0; height: auto;}
	#header .headerFix .naviArea .menuNavi li>.sm03 {left: 0; height: auto;}
	#header .headerFix .naviArea .menuNavi li>.sm04 {left: 0; height: auto;}
	#header .headerFix .naviArea .menuNavi li>.sm05 {left: 0; height: auto;}
	#header .headerFix .naviArea .menuNavi li>.sm06 {left: 0; height: auto;}
	#header .headerFix .naviArea .menuNavi li>.sm07 {left: 0; height: auto;}
	#header .headerFix .naviArea .menuNavi li>.sm08 {left: auto; right: 0; height: auto;}
	#header .headerFix .naviArea .menuNavi li>.subMenu>li {float: left; display: block; width: 158px; font-size: 14px; font-weight: 300; color: #ffffff; line-height: 40px;}
	#header .headerFix .naviArea .menuNavi li>.subMenu>li>a {float: left; display: block; width: 138px; font-size: 14px; font-weight: 300; color: #ffffff; line-height: 40px; padding-left: 20px; background-image: none;}
	#header .headerFix .naviArea .menuNavi li>.subMenu>li>a:hover,
	#header .headerFix .naviArea .menuNavi li>.subMenu>li:hover {color: #FFFFFF; text-decoration: none; background-color: #a28c61;}

	/* Copyright Start */
	#bottom {position: relative; width: 100%; height: 280px; background-color: #222; padding: 60px 0;}
	#bottom > .bottomCI {display: block; width: 160px; height: 120px; margin: 0 auto;} 

	#bottom > ul.companyInfo {width: 100%; margin: 0 auto;}
	#bottom > ul.companyInfo > li {width: 100%; line-height: 20px;}
	#bottom > ul.companyInfo > li > ul {width: 100%; text-align: center; line-height: 20px;}
	#bottom > ul.companyInfo > li > ul > li {display: inline-block; line-height: 20px; font-size: 12px; font-weight: normal; color: #666; text-align: center; margin: 0 auto; padding: 0 5px;}

	#bottom > .url {width: 100%; height: 60px; line-height: 60px; font-size: 16px; font-weight: normal; color: #fff; text-align: center; padding: 0px;}
	#bottom > .url > a {color: #fff;}

	#bottom > .bottomLink {width: 100%; height: 40px; margin: 10px auto; text-align: center;}
	#bottom > .bottomLink > li {display: inline-block; width: 160px; height: 40px; text-align: center; margin: 0 10px;}
	#bottom > .bottomLink > li > a {display: block; width: 100%; height: 40px; line-height: 40px; font-size: 12px; font-weight: 500; color: #fff; text-align: center; background-color: #2a2f38; transition: all 0.3s;}
	#bottom > .bottomLink > li > a:hover {background-color: #000; transition: all 0.3s;}

	#bottom > .bottomLink > li > a.admin {background-color: #e24a00; transition: all 0.3s;}
	#bottom > .bottomLink > li > a.admin:hover {background-color: #000; transition: all 0.3s;}
	/* Copyright End */

	/* Up Slideanimate */
	.slideanim {visibility: hidden;}
	.slideUp {
	  animation-name: slide;
	  -webkit-animation-name: slide;
	  animation-duration: 1.0s;
	  -webkit-animation-duration: 1.0s;
	  visibility: visible;
	}
	@keyframes slide {
		0% {
		  opacity: 0;
		  transform: translateY(70%);
		} 
		100% {
		  opacity: 1;
		  transform: translateY(0%);
		}
	}
	@-webkit-keyframes slide {
		0% {
		  opacity: 0;
		  -webkit-transform: translateY(70%);
		} 
		100% {
		  opacity: 1;
		  -webkit-transform: translateY(0%);
		}
	}
	/* Up Slideanimate */
	#bottom .BtGoTop {position: absolute; display: block; top: -20px; left: 50%; width: 40px; height: 40px; margin-left: -20px; z-index: 99; background-color: #da3610;}