@charset "utf-8";
/* CSS Document */
@font-face{
  font-family: 'NanumGothic';
  font-style: normal;
  font-weight: normal;
  src: url('font/NanumGothic.eot'); 
  src: local('※'), url('font/NanumGothic.woff') format('woff'), url('../font/NanumGothic.ttf') format('truetype'); 
} 

/* reset css */
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, textarea, radio, select, p, button {margin:0; padding:0}
body, h1, h2, h3, h4, th, td, input {font-family:'NanumGothic', Dotum, '돋움', Arial, sans-serif; font-size:16px; color:#404040; line-height:30px; font-weight:normal; }
select, textarea {font-family:'NanumGothic', Dotum, '돋움', Arial, sans-serif; font-size:13px; color:#404040}
html, body {height:100%}

a:link, a:visited {text-decoration:none; color:#404040;}
a:hover {text-decoration:underline}
table {border-collapse:collapse; border-spacing:0; table-layout:fixed}
caption, legend {overflow:hidden; visibility:hidden; width:0; height:0; text-indent:-9999px; line-height:0; font-size:0; position:absolute; top:-9999em}
img, fieldset, button {border:0}
input, select, textarea {vertical-align:middle}
textarea {border: solid 1px #404040;}
img {vertical-align:middle} 
ul, ol, li {list-style:none}
hr {display:none}
em, address {font-style:normal}
input {font-family:'NanumGothic', Dotum, '돋움', Arial, sans-serif; color:#404040}
select {border:1px solid #dedede; font-size:13px; vertical-align:middle; line-height:1.5em; font-family:Arial; color:#404040}
input, select {font-size:100%; vertical-align:middle}
button, label, input[type=image] {cursor:pointer}
button {background:none; padding:0; border:0 none; display:inline-block; margin:0; cursor:pointer; font-family:'NanumGothic', Dotum, '돋움', Arial, sans-serif; font-size:13px; }

/* skip */
#skip{position:relative;z-index:999}
#skip ul li{display:inline}
#skip h2{display:block;overflow:hidden;position:absolute;width:1px;height:1px;font-size:1px;line-height:0;text-indent:-9999px;white-space:nowrap}
#skip a{position:absolute;top:-100px;left:-999px;display:inline-block;border:1px solid #24242c;background:#31313b;color:white}
#skip a:focus,#skip a:active{top:0;left:0;cursor:pointer;zoom:1;display:inline-block;margin-right:9px;padding:5px 8px 4px;background:#31313B;font-weight:normal;font-size:11px;line-height:1.4em}

 /* clearfix */
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hides from IE-mac \*/
*html .clearfix {height: 1%;}
.clearfix {display: block;}



.mb5 { margin-bottom:5px !important }
.mb10 { margin-bottom:10px !important }
.mb15 { margin-bottom:15px !important }
.mb20 { margin-bottom:20px !important }
.mb30 { margin-bottom:30px !important }
.mb40 { margin-bottom:40px !important }
.mb50 { margin-bottom:50px !important }
.mb70 { margin-bottom:70px !important }
.bold { font-weight:bold !important }
.center { text-align:center !important }

#wrap { background:url(img/common/bg.gif) repeat 0 0; }
#header { margin-bottom:45px }
#header h1 { margin:0 auto; max-width:1255px; height:95px; padding:11px 0 0 14px; }
#header #gnb>div{ height:50px;background:url(img/common/bg_gnb.gif) repeat-x 0 0; position:relative  }
#header .nav { max-width:1255px; margin:0 auto; }
#header .nav:after { clear:both; content:""; display:block }
#header .nav>ul { max-width:700px;  padding:0 20px; float:left }
#header .nav>ul:after { clear:both; content:""; display:block }
#header .nav>ul>li { float:left;  }
#header .nav>ul>li>a em { display:block; padding:0 18px 0 24px; background:url(img/common/bg_gnb_line.png) no-repeat left 50%; }
#header .nav>ul>li:first-child em { padding-left:0; background:none }
#header .nav>ul>li>a { display:block; height:50px; line-height:50px; font-size:15px; color:#dcdcdc; }
#header .dep2 { display:none; position:absolute; left:0; top:50px; width:100%; height:36px; background:#fcaf17; }
#header .nav>ul>li.on .dep2 { display:block }
#header .dep2 ul { width:1230px; margin:0 auto; text-align:left; font-size:0 }
#header .dep2 ul:after { clear:both; content:""; display:block }
#header .dep2 ul li { height:36px; line-height:36px; display:inline-block; font-size:0;  padding:0 18px 0 24px; background:url(img/common/bg_gnb_dep2_line.png) no-repeat left 50%; }
#header .dep2 ul li:first-child { padding-left:10px; background:none }
#header .dep2 ul li a { display:block; font-size:16px; color:#fff; letter-spacing:-1px }

#header .srch { float:right; margin-top:13px; padding:2px 0 2px 6px; width:153px; height:20px; line-height:20px; background:#fff }
#header .srch input[type="text"] { width:120px; height:18px; background:fff; border:0; margin:0; padding:0; line-height:18px }

#container { clear:both }

#bg_footer { height:120px; padding-top:60px; background:url(img/common/bg_footer.png) repeat-x 0 top; position:relative }
#bg_footer #footer { max-width:1272px; margin:0 auto; position:relative }
#bg_footer #footer>p { display:inline-block; *zoom:1; *display:inline; vertical-align:top; font-size:12px; line-height:18px; }
#bg_footer .logo { margin-right:90px; padding-top:15px }
#bg_footer .copy { color:#404040; padding-top:15px }
#bg_footer .sns { position:absolute; right:0; top:0 }
#bg_footer .sns a { display:inline-block; *zoom:1; *display:inline; margin-left:20px }
#bg_footer .sns a:first-child { margin-left:0 }


/* Portfolio List */
.pr_list { max-width:1272px; margin:0 auto; }
.pr_list ul { overflow:hidden; margin-bottom:60px }
.pr_list li { float:left; width:294px; height:343px; padding-top:20px; background:url(img/main/bg_list.png) no-repeat 0 0; margin:0 12px; margin-bottom:22px; }
.pr_list li a { display:block; width:252px; margin:0 auto ; font-size:11px; line-height:18px  }
.pr_list li a span { display:block;  color:#666 }
.pr_list li a span:first-child { border:1px solid #000; margin-bottom:5px;}

@media only screen and (max-width:640px) {
	.pr_list ul { text-align:center }
	.pr_list li { float:none; display:inline-block }
	.pr_list li a { text-align:left }
}



@media only screen and (max-width:640px) {
	#header h1  { text-align:center }
	#header .srch { border:1px solid #ccc }
	#header #gnb>div { background-repeat:repeat; height:100px; }
	#header .nav { text-align:center }
	#header .nav>ul { margin:0 auto; float:none }
	#header .nav>ul>li {  width:33.33%; text-align:center}
	#header .nav>ul>li>a em { background:none; white-space:nowrap; padding:0; }
	#header .dep2 { top:100px }
	#header .dep2 ul { width:100%;  }
	#header .dep2 ul li { background:none; width:50%; box-sizing:border-box; float:left; padding:0 !important; margin:0; text-align:center; } 
	#header .srch { display:none }
	#header .nav>ul>li.m4 .dep2,
	#header .nav>ul>li.m1 .dep2{ height:72px }
	#header .nav>ul>li.m6 .dep2 { height:108px }
	
	#bg_footer { padding-top:30px; height:auto } 
	#bg_footer .logo { margin:0; padding:0 30px }
	#bg_footer .copy { margin-bottom:20px }
	#bg_footer .sns { position:static; margin-bottom:20px }
	#bg_footer  #footer { text-align:center }
}


@media only screen and (max-width:320px){
	
	#header h1 { text-align:center; height:52px; }
	#header h1 img { height:41px }
	#header #gnb>div { background-repeat:repeat; height:150px; }
	#header .nav>ul>li { width:50%; text-align:center; }
	#header .nav>ul>li>a em { background:none; white-space:nowrap; padding:0; }
	#header .dep2 { top:150px }
	
}