@charset "utf-8";

/* ******************************************************************* 
    web-font : 'Nanum Gothic'
******************************************************************* */
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);

/* *******************************************************************
	 http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
******************************************************************* */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	font-family: 'Nanum Gothic','맑은 고딕', 'Malgun Gothic', Dotum, Gulim, sans-serif;
	font-size: 62.5%;
	line-height: 1;
    letter-spacing: 0;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
    -moz-transition: color 0.25s, background-color 0.25s;
    -ms-transition: color 0.25s, background-color 0.25s;
    -o-transition: color 0.25s, background-color 0.25s;
    -webkit-transition: color 0.25s, background-color 0.25s;
    transition: color 0.25s, background-color 0.25s;
}

/* *******************************************************************
	 customize style
******************************************************************* */
html {
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
  
  overflow-y: scroll;
}

strong {
	font-weight: bold;	
}

hr {
	margin: 0;
	padding: 0;
	height: 0;
	line-height: 0;
	font-size: 0;
	border: 0;
	visibility: hidden;
}

/* clearfix class */
.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
.clearfix {
    display: block;
}

/* word ellipsis */
.ellipsis { 
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}	

/* *******************************************************************
	 layout style
******************************************************************* */
/* inner layout box */
.innerWrap {
	position: relative;
	width: 980px;
	margin: 0 auto;
	padding: 0 10px;
	line-height: 1.5;
	color: #000;
}

/* 
	1. wrap style
*/
#wrap {
	width: 100%;
}

/* 
	2. header style
*/
#header {
	position: relative;
	width: 100%;
	background: url(../images/pattern/pattern_gnb.png) left top repeat-x;
    background-color: #bf6c84;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
	z-index: 10;
}
	#header .innerWrap {
        height: 100px;
	}

/* 
	3. container style
*/
#container {
	position: relative;
	width: 100%;
	z-index: 1;
}

/*
	4. banner style
*/
.banner-area {
	width: 100%;
	background-color: #f0f0f0;
}
    .banner-area .innerWrap {
	    height: 100px;
	    margin: 0 auto;        
	    padding: 0;
	    overflow: hidden;
    }
    /* slide */
	.banner-area ul.banner-slide {
		width: 950px;
        margin: 20px 0 0 20px;
	}
		.banner-area ul.banner-slide li {
			width: 150px;
			height: 40px;
			margin: 10px 4px 0 5px;
		}
			.banner-area ul.banner-slide li a {
                width: 150px;
                height: 40px;
			}

    /* common slide */
    .banner-area ul.banner-list {

    }
        .banner-area ul.banner-list li {
            float: left;
            width: 16.66667%;
            margin: 30px 0 0;
            padding: 0;
            text-align: center;
        }
        .banner-area ul.banner-list li.b01 {
            
        }
        .banner-area ul.banner-list li.b01 {

        }
        .banner-area ul.banner-list li.b01 {

        }
        .banner-area ul.banner-list li.b01 {

        }

            
/* 
	5. footer style
*/
#footer {
	position: relative;
	width: 100%;
    background-color: #4c495a;
}
	#footer .innerWrap {
		height: 120px;
        text-align: center;
	}
	
	/* footer logo */
	#footer .footer-logo {
		display: inline-block;
        width: 240px;
        margin: 38px 0 0;
        vertical-align: top;
	}
	
	/* address */
	#footer address {
		display: inline-block;
        text-align: center;
	}
		#footer address ul {
			margin: 35px 0 0 50px;
		}
			#footer address ul li {
				font-size: 13px;
				color: #bdbdbd;
			}
				#footer address ul li span {
					margin-right: 8px;
				}
				#footer address ul li span.div-line {
					font-size: 8px;
					color: #aaa;
					line-height: 10px;
					font-weight: normal;
				}
				
			#footer address ul li.copyright {
				margin-top: 10px;
                color: #dfdfdf
			}
	
	/* etc-area : privacy, related link */
	#footer .etc-area {
		position: relative;
		float: right;
	}
		/* privacy link style */
		#footer .etc-area .privacy {
			margin: 0 80px 0 0;
		}
			#footer .etc-area .privacy li {
				margin: 0 0 5px;
			}
			#footer .etc-area .privacy li.div-line {
				font-size: 1.05em;
				line-height: 16px;
			}
				#footer .etc-area .privacy li a {
					display: block;
					width: 120px;
					padding: 4px 10px;
					font-size: 1.1em;
					font-weight: normal;
					letter-spacing: -1px;
					color: #767676;
					text-decoration: none;
					text-align: center;
					border: 1px solid #aaa;
					border-radius: 3px;
				}
				#footer .etc-area .privacy li a:hover {
					color: #204095;
					border: 1px solid #204095;
				}
			
		/* related website link */
		#footer .etc-area .btn-group {
			position: absolute;
			right: 0;
			top: 28px;
			width: 131px;
		}
			#footer .etc-area .btn,
			#footer .etc-area .dropdown-menu {
                font-size: 1.1em;
                font-weight: normal;
                letter-spacing: -1px;
			}
			#footer .etc-area .dropdown-menu {
				min-width: 131px;
				top: -97px;
			}
		
		/* Ucert Mark */
		#footer .ucert_mark {
			position: absolute;
			right: 5px;
			top: 0;	
		}
			#footer .ucert_mark img {
				cursor: pointer;
			}
	
/* *******************************************************************
	 main/sub include style
******************************************************************* */
/*
	1. logo
*/
.logo {
	position: absolute;
	left: 10px;
	top: 35px;
}
    .logo a {
        outline: none;
    }
	.logo img {
		width: 240px;
        height: 40px;
	}

/*
	2. utility
*/
.utility {
	position: absolute;
	right: 10px;
	top: 15px;
	z-index: 201;
}
	.utility ul {
		
	}
		.utility ul li {
			float: left;
			text-align: center;
		}
		.utility ul li.divdot {
			margin: 0 10px;
            line-height: 18px;
            font-weight: bold;
			color: #fff;
		}
		.utility ul li a {
			font-size: 12px;
			color: #fff;
			text-decoration: none;
		}

/*
	3. gnb
*/
.gnb {
    position: relative;
	float: right;
}
	/* depth1 menu */
	.gnb .depth1 {
		margin: 55px 0 0;
	}
		.gnb .depth1 li {
            position: relative;
			float: left;
			margin: 0;
			padding: 0;
		}
        .gnb .depth1 li.divdot {
            width: 3px;
            height: 45px;
            margin: 0 20px;
            background: url(/images/bullet/bullet_gnb.jpg) left 12px no-repeat;
        }
		.gnb .depth1 li:first-child {
		    margin: 0;
		}
			.gnb .depth1 > li > a {
				display: block;
				height: 45px;
				padding: 0;
				font-size: 16px;
				font-weight: bold;
				color: #fff;
				text-decoration: none;
                outline: none;
			}
			.gnb .depth1 li a:hover,
			.gnb .depth1 li.active > a {
				color: #222;
			}
		
	/* depth2 menu */
	.gnb .depth1 li .depth2 {
        position: absolute;
        left: 50%;
        margin-left: -65px;
        top: 45px;
		display: none;
        width: 130px;
	}
		.gnb .depth1 li .depth2 li {
            float: none;
            width: 100%;
			margin: 0;
            padding: 0;
		}
			.gnb .depth1 li .depth2 li a {
				display: block;
				padding: 10px 10px;
				font-size: 13px;
                font-weight: normal;
				color: #eee;
                letter-spacing: -0.45px;
                text-align: center;
				text-decoration: none;
                background-color: #4c495a;
                background-color: rgba(76,73,90,0.85);

                outline: none;
				
				-webkit-transition: all 0.25s;
				-moz-transition: all 0.25s;
				transition: all 0.25s;
			}
			.gnb .depth1 li .depth2 li a:hover {
				color: #fff;
                background-color: #4c495a;
			}
			
/* *******************************************************************
	common style
******************************************************************* */
/*
	color style
*/
.hl-keyword {
	color: #fd3a3a;
}

/*
	display style
*/
#wrap .dp-block { display: block }
#wrap .dp-inline { display: inline }
#wrap .dp-none { display: none }
#wrap .dp-inline-block { display: inline-block }

/*
	align style
*/
#wrap .ta-center { text-align: center }
#wrap .ta-left { text-align: left }
#wrap .ta-right { text-align: right }

#wrap .va-top { vertical-align: top }
#wrap .va-middle { vertical-align: middle }
#wrap .va-bottom { vertical-align: bottom }
#wrap .va-baseline { vertical-align: baseline }

/*
	position style
*/
#wrap .pos-static { position: static }
#wrap .pos-relative { position: relative }
#wrap .pos-absolute { position: absolute }
#wrap .pos-fixed { position: fixed }

/*
	align style
*/
#wrap .bd-0 { border-width: 0 }
#wrap .bd-l0 { border-right: 0 }
#wrap .bd-t0 { border-top: 0 }
#wrap .bd-b0 { border-bottom: 0 }
#wrap .bd-r0 { border-right: 0 }

/*
	letter-spacing style
*/
#wrap .ls-10px { letter-spacing: -1px }
#wrap .ls-11px { letter-spacing: -1.1px }

/* 
	gradient style
*/
.gradient-w {
	background: #fefefe; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmVmZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iI2ZiZmJmYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZmVmZWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #fefefe 0%, #fbfbfb 49%, #efefef 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(49%,#fbfbfb), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #fefefe 0%,#fbfbfb 49%,#efefef 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #fefefe 0%,#fbfbfb 49%,#efefef 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #fefefe 0%,#fbfbfb 49%,#efefef 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #fefefe 0%,#fbfbfb 49%,#efefef 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#efefef',GradientType=0 ); /* IE6-8 */
}

/*
	margin style
*/
#wrap .mg-0 { margin: 0 }

#wrap .mg-l0 { margin-left: 0 }
#wrap .mg-t0 { margin-top: 0 }
#wrap .mg-r0 { margin-right: 0 }
#wrap .mg-b0 { margin-bottom: 0 }

#wrap .mg-l10 { margin-left: 10px }
#wrap .mg-t10 { margin-top: 10px }
#wrap .mg-r10 { margin-right: 10px }
#wrap .mg-b10 { margin-bottom: 10px }

#wrap .mg-l20 { margin-left: 20px }
#wrap .mg-t20 { margin-top: 20px }
#wrap .mg-r20 { margin-right: 20px }
#wrap .mg-b20 { margin-bottom: 20px }

#wrap .mg-l30 { margin-left: 30px }
#wrap .mg-t30 { margin-top: 30px }
#wrap .mg-r30 { margin-right: 30px }
#wrap .mg-b30 { margin-bottom: 30px }

#wrap .mg-l30 { margin-left: 30px }
#wrap .mg-t30 { margin-top: 30px }
#wrap .mg-r30 { margin-right: 30px }
#wrap .mg-b30 { margin-bottom: 30px }

#wrap .mg-l50 { margin-left: 50px }
#wrap .mg-t50 { margin-top: 50px }
#wrap .mg-r50 { margin-right: 50px }
#wrap .mg-b50 { margin-bottom: 50px }

/*
	padding style
*/
#wrap .pd-0 { padding: 0 }

#wrap .pd-l0 { padding-left: 0 }
#wrap .pd-l0 { padding-left: 0 }
#wrap .pd-l0 { padding-left: 0 }
#wrap .pd-l0 { padding-left: 0 }

#wrap .pd-l10 { padding-left: 10px }
#wrap .pd-t10 { padding-top: 10px }
#wrap .pd-r10 { padding-right: 10px }
#wrap .pd-b10 { padding-bottom: 10px }

#wrap .pd-l20 { padding-left: 20px }
#wrap .pd-t20 { padding-top: 20px }
#wrap .pd-r20 { padding-right: 20px }
#wrap .pd-b20 { padding-bottom: 20px }

#wrap .pd-l30 { padding-left: 30px }
#wrap .pd-t30 { padding-top: 30px }
#wrap .pd-r30 { padding-right: 30px }
#wrap .pd-b30 { padding-bottom: 30px }

#wrap .pd-l40 { padding-left: 40px }
#wrap .pd-t40 { padding-top: 40px }
#wrap .pd-r40 { padding-right: 40px }
#wrap .pd-b40 { padding-bottom: 40px }

#wrap .pd-l50 { padding-left: 50px }
#wrap .pd-t50 { padding-top: 50px }
#wrap .pd-r50 { padding-right: 50px }
#wrap .pd-b50 { padding-bottom: 50px }