/*
개발공사 2018 레이아웃
*/

@import url(font.css);

/* 요소(element) 여백 초기화  */
html, body,
div, span,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
blockquote, p, address, pre, cite,
form, fieldset, input, textarea, select,
table, th, td {
 	margin:0;
	padding:0;
	}

/* 제목요소 */
h1, h2, h3, h4, h5, h6 {  
	font-weight:normal; 
	font-size:1em; 
	} 

/* 테두리 없애기 */
fieldset, img, abbr,acronym { border:0 none; } 

/* 목록 */
ol, ul { list-style:none; }

/* 테이블 - 마크업에 'cellspacing="0"' 지정 함께 필요 */
table {
	border-collapse: separate;
	border-spacing:0;
	border:0 none;
	}
caption, th, td {
	font-weight: normal;
}
caption, legend {position:absolute;  width:0; height:0; overflow:hidden; font-size:0;line-height:0px; }
/* 텍스트 관련 요소 초기화 */
address, caption, strong, em, cite {	font-weight:normal;	font-style:normal;	}
ins { text-decoration:none; }
del { text-decoration:line-through; }

/* 인용문 */
blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote,q { quotes:"" ""; }

/* 수평선*/
hr { display:none; }




body { font-family: 'Noto Sans KR';  font-size:14px;  min-width: 320px; overflow-x: hidden; width:100%; }
h1,h2,h3,h4,h5,h6 {margin: 0; font-weight: bold;}
p, dl, ol, ul {margin: 0;}


.clear { clear:both;  }
.clearfix:after { clear:both; display: table;  content: " ";}
.ellipsis {     text-overflow: ellipsis;  -o-text-overflow: ellipsis;  overflow: hidden;   white-space: nowrap;   word-wrap: normal !important;   display: block; }
img { max-width:100% ;  }

.map img {max-width: inherit !important;}
.show { display:block !important;  }
.hide { display:none !important;  }

i span { text-indent:-99999px;display:block;   font-size:0px; line-height:0px; }






a[target="_blank"]:not([title]), form[target="_blank"]:not([title]), form[target="_blank"][title=""] {
    display: inline-block;
    border: none;
}
a[target="_blank"]:not([title]):after, form[target="_blank"]:not([title]):after, form[target="_blank"][title=""]:after {

    content: "";
}



a[target="_blank"]:not([title]), form[target="_blank"]:not([title]), form[target="_blank"][title=""] { border:0px;  }
a[href^=javascript]:not([role=button]):after {    content: "";}
a[href^=javascript]:not([role=button]) {  border: 0px; }
area:not([alt]), area[alt=" "], img:not([alt]), img[alt=" "], input[type=image]:not([alt]), input[type=image][alt=" "] { border:0px;  }
area:not([alt]):after, area[alt=" "]:after, img:not([alt]):after, img[alt=" "]:after, input[type=image]:not([alt]):after, input[type=image][alt=" "]:after { content:'';  }


@media (min-width: 992px) {

.back { display:none; position:fixed; left:0px; top:0px; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:500;  }
	.pc-true { display:block !important; }
	.m-true { display:none !important; }
	.pc-false { display:none !important;  }

	.header { height:100px; position:relative; z-index:100; height:100px; background:rgba(255,255,255,0.8);  }

	.header h1  {padding-top:25px; float:left;  position:relative; z-index:101; }

	.gnb {   position:absolute; top:50px; left:0px; width:100%; }
	.gnb .container { padding-left:335px; }
	.gnb .menu { float:left;  padding-right:80px; }
	.gnb .menu h3 { height:50px;   }
	.gnb .menu h3 a { color:#000; display:inline-block; height:40px;   font-family: 'NanumSquare'; font-size:18px;  }
	.gnb .menu h3 a:hover ,.gnb .menu h3 a.active { text-decoration:none;  color:#0066cc;  border-bottom:3px solid #0066cc;  }
	#gnb .menu h3 a i { display:none !important;  }
	.gnb .menu .depth-menu  {   display:none;   width:100%; position:absolute; top:50px; left:0px;   padding-top:30px; padding-bottom:30px;min-height:150px; background:url(../images/common/s_menu_bg_long.jpg) no-repeat center 0px ;}
	.gnb .menu .depth-menu>ul  {   position:relative; padding-left:305px; margin:0 auto; width:1200px; }
	.gnb .menu .depth-menu>ul  li  {float:left; width:223px; padding-left:30px;   margin-bottom:25px; letter-spacing:-1.5px;  }
	.gnb .menu .depth-menu>ul  li:nth-of-type(6) {clear:both; }
	.gnb .menu ul li i { display:none !important;  }
	.gnb .menu .depth-menu>ul .title-img { padding-left:0px;    width:auto; position:absolute; top:0px; padding-top:20px; left:10px;    font-weight:bold;  color:#000; font-size:38px;  }
	.gnb .menu .depth-menu>ul .title-img:before { content:''; display:block; width:35px; border-top:8px solid #1557dc; position:absolute; top:0px; left:0px;  }

	.gnb .menu .depth-menu>ul  li a { color:#000; font-size:16px;   }
	.gnb .menu .depth-menu>ul  li a:hover , .gnb .menu ul li a:active { color:#0066cc;  }
	.gnb .menu .depth-menu>ul li  ul { display:block; padding-top:10px; padding-bottom:5px;  }
	.gnb .menu .depth-menu>ul  li ul li  {float:none; position:relative;  padding-left:7px;  width:auto;  background:url(/pub/site/jpdc/images/common/dot.jpg) no-repeat left 9px; margin-bottom:5px;   font-size:13px; }
	.gnb .menu .depth-menu>ul  li ul li a { font-size:16px; color:#666; padding-left:5px;   }
	.gnb .menu .depth-menu>ul  li ul li:before { content:'-'; display:inline-block;  color:#666;  position:absolute; left:0px; top:0px;  }
	.gnb .menu .depth-menu>ul  li ul li a:hover , .gnb .menu ul li ul li a:active { color:#000;  }
	.gnb .menu .depth-menu>ul  li i {  }

	.header .all-menu-open { position:absolute; top:50px; right:50%;  margin-right:-600px;  z-index:100; }



	.all-menu {padding-top:50px;  position:absolute; top:0px;  left:0px; width:100%; padding-bottom:50px; overflow-y:auto; z-index:200; background:#1959d4;  }

	.all-menu .menu { margin-bottom:50px;    float:left; width:16.666%;padding-right:30px;  }
	.all-menu h3 { font-size:20px; letter-spacing:-1.5px;  margin-bottom:20px;padding-bottom:20px; border-bottom:3px solid #fff;  }
	.all-menu h3 a { color:#fff; font-weight:bold;   }
	.all-menu ul { }
	.all-menu .menu .depth-menu>ul .title-img { display:none !important;  }
	.all-menu ul > li { padding-bottom:13px; font-size:16px;  }
	.all-menu ul > li  i { display:none;  }
	.all-menu ul > li a { ;  color:#fff; }
	.all-menu ul li ul {  padding-top:10px;  display:block !important;}
	.all-menu ul li ul li {  width:100%; padding-bottom:6px; font-size:14px;  }
	.all-menu ul li ul li:before { content:'-';    padding-right:5px; color:#fff;  }
	.all-menu ul li ul li a {  font-weight:normal;  }

	/*.all-menu .menu { margin-bottom:50px;  }
	.all-menu h3 { font-size:24px; margin-bottom:20px;  }
	.all-menu h3 a { color:#fff; font-weight:bold;   }
	.all-menu ul { background:url(../images/common/all_bg.jpg) repeat-y left top;  padding-top:30px; padding-bottom:5px;}
	.all-menu ul:after { content:''; display:table; clear:both;  }
	.all-menu ul > li { float:left; width:25%;  padding-bottom:25px; padding-left:10px; padding-right:10px;  }
	.all-menu ul > li:nth-of-type(5), .all-menu ul > li:nth-of-type(9) { clear:both;  }
	.all-menu ul > li a { font-size:18px; color:#000; font-weight:bold; padding-left:25px; }
	.all-menu ul li ul {display:none;  padding-top:10px;  }
	.all-menu ul li ul li { float:left; width:100%; padding-bottom:5px; padding-left:0px; padding-right:0px;  }
	.all-menu ul li ul li a { font-size:16px; color:#555; font-weight:normal;  }
*/
	.all-menu-close { display:none;  bottom:30px; ; right:50%; position:absolute; margin-right:-610px;  } 
	.all-menu-close a  {color:#fff; font-size:40px;  } 



.quick-menu-wrap { position:fixed; bottom:0px; right:0px; min-width:60px; min-height:60px; background:url(../images/common/box_bg.jpg) repeat left top; z-index:200;  padding:20px 20px 0 ; }
.quick-menu-wrap .quick-menu {color:#fff; }
.quick-menu-wrap .quick-menu h3 { font-size:28px; margin-bottom:20px;  }
.quick-menu-wrap .quick-menu dl dt { font-size:18px; margin-bottom:8px; background:rgba(0,55,162,0.3); padding:5px 20px; display:inline-block;  border-radius:20px;   }
.quick-menu-wrap .quick-menu dl dd {font-size:14px; letter-spacing:-1px;  margin-bottom:20px;  }
.quick-menu-wrap .quick-menu a { color:#fff;  }
.quick-menu-wrap .quick-btn {  }
.quick-menu-wrap .quick-btn a { display:block; position:absolute; top:10px; right:10px;  width: 60px;      height: 60px;      text-align: center;        font-size: 40px;     color:#fff;  }
.quick-menu-wrap .quick-btn a.btn-up { display:none; top:0px; right:0px;    }

	.footer {  width:100%;   background:#efefef; z-index:99; position:relative; }
	.footer .container {  position:relative;padding-top:40px;padding-bottom:60px;  }
	.footer .foot-util { margin-bottom:40px; }  
	.footer .foot-util li { float:left; padding-left:15px; font-size:16px;  padding-right:12px; background:url(../images/common/b_icon.png) no-repeat left 8px;  }  
	.footer .foot-util li:first-child {padding-left:0px; background:none; } 
	.footer .foot-util li a { color:#000;  }
	.footer .foot-site-link { position:absolute; top:30px; right:0px;  }
	.footer .foot-site-link dt {border:1px solid #c7c7c7; color:#666;    }
	.footer .foot-site-link dt i { float:right; display:inline-block; font-size:20px; margin-top:-5px;   }
	.footer .foot-site-link dt a { display:block; color:#666;width:220px; height:40px; padding:10px 20px; }
	.footer .foot-site-link dd {display:none; position:absolute;width:100%;  bottom:40px; left:0px; background:#fff; border:1px solid #999;  padding:10px;   }
	.footer .foot-site-link dd a {display:block; color:#333;padding:3px 0px;   }

	.footer address { color:#666;  }

	.footer .footer-link { position:absolute; top:80px; right:0px;  }
	.footer .footer-link a { float:left; display:block; margin-left:10px; }


  #backtotop {
      position: fixed;
      bottom: 0;
      right: 0;
      z-index: 9999;
      width: 60px;
      height: 60px;
      text-align: center;

      background: rgba(0,0,0,0.3);
      font-size: 40px;
      color: #fff;
      cursor: pointer;
      text-decoration: none;
      /*transition: opacity 0.2s ease-out;*/
      opacity: 0;
  }
  #backtotop.show {
    opacity: 1;
  }
  #backtotop:hover.show {
    background: rgba(0,0,0,0.6);
  }



}




@media (min-width: 992px) and (max-width: 1199px) {

	.pc-false { display:block !important;  }
	.gnb .container { padding-left:295px; }
	.gnb .menu {  width:108px;}
	.header .all-menu-open i {   margin-right:-455px;  }
	.header .search-btn i { margin-right:-480px;}
	.header .search-btn a.search-close i {   margin-right:-485px;  }

	.gnb .menu { display:none !important;  }
		.all-menu .menu { padding-right:20px;  }
		.all-menu h3 { font-size:18px;  padding-bottom:15px; margin-bottom:15px; }
		.all-menu ul li  { font-size:14px;  padding-bottom:10px; }
		.all-menu ul li  ul {padding-top:6px; }
		.all-menu ul li ul li  { font-size:12px;  padding-bottom:5px; }

		.header .all-menu-open { margin-right:-490px;  }
	/*.all-menu .menu { width:33.333%;}
	.all-menu .menu04 { clear:both;  } 
	.all-menu ul { background:url(../images/common/t_all_bg.jpg) repeat-y left top; }
	.all-menu ul > li a { padding-left:15px; }
*/

	.all-menu-close {  margin-right:-490px;  } 

	.quick-menu-wrap { display:none !important;  }

}


@media (max-width: 991px) {

	.back { display:none; position:fixed; left:0px; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:55;  }

	.pc-true { display:none !important; }
	.m-true { display:block !important; }
	.pc-false { display:block !important;  }

	.header {  position:relative;   height: 2.77272727rem; background:rgba(255,255,255,0.8);  word-break: keep-all;	text-align:center; 	padding:0 15px;    z-index:100; }
	.header h1 {float:left;  padding-top:0.6rem;  }
	.header h1 img { width:130px;  }

	.all-menu-open {    position: absolute;    top: 0.3rem;   right: 15px;    font-size: 1.10909091rem;  }
	.m-menu { display:none;   z-index: 1000;    position: absolute;    top:2.77272727rem;    left: 0;	width:100%;    background: #0967c7;    letter-spacing: -1px;    text-align: left;   }
	.all-menu-close {    position: absolute;     top: -1.87272727rem;    right:15px;  }
	.all-menu-close img { width:22px;  }



  
	#gnb .menu { font-family: 'NanumSquare';   }
	#gnb h3 { font-size: 0.750909091rem;    }
	#gnb h3 a { color:#fff; font-weight:bold; display:block; padding:0.6rem 15px; border-bottom:1px solid #487add;   }
	#gnb h3 a i { float:right;  }
	#gnb ul { background:url(../images/common/m_all_bg.jpg) repeat-y center top; }
	#gnb .depth-menu { display:none;  padding:0.6rem 15px 0.1rem; border-bottom:1px solid #487add;  }
	#gnb ul > li { width:100%;  padding-bottom:0.5rem; padding-left:10px; padding-right:10px;  }
	#gnb ul > li a { font-size:0.65rem; color:#fff; font-weight:bold;  }
	#gnb ul li ul {  padding-top:0.3rem;  }
	#gnb ul li ul:after { clear:both; display:table; content:'';  }
	#gnb ul li ul li { float:left;  width:50%;position:relative; padding-bottom:0.2rem; padding-left:10px; padding-right:10px;  }
	#gnb ul li ul li a { font-size:0.580909091rem; font-weight:normal;  }
	#gnb .menu .depth-menu ul  li ul li:before { content:'-'; display:inline-block;  color:#fff;  position:absolute; left:0px; top:0px;  }

	

	.footer {padding-left:15px;   width:100%; padding-right:15px;  background:#efefef;  padding-top:1rem;  padding-bottom:1rem; position:relative;    font-size: 0.5rem;    color: #555;  }

	.footer .foot-util { margin-bottom:15px; width:70%; }  
	.footer .foot-util li { float:left; padding-left:15px; padding-right:12px; margin-bottom:0.3rem;  background:url(../images/common/b_icon.png) no-repeat left 8px;   }  
	.footer .foot-util li:first-child {padding-left:0px; background:none; } 
	.footer .foot-util li a { color:#000;  }
	.footer .foot-site-link { position:absolute; top:20px; right:15px;  }
	.footer .foot-site-link dt {border:1px solid #c7c7c7; color:#666;   }
	.footer .foot-site-link dt i { float:right; display:inline-block; font-size:20px;  margin-top:-5px; }
	.footer .foot-site-link dt a { display:block; color:#666;width:5rem; padding:0.3rem 0.4rem  ; }
	.footer .foot-site-link dd {display:none; position:absolute;width:100%;  bottom:40px; left:0px; background:#fff; border:1px solid #999;  padding:10px;   }
	.footer .foot-site-link dd a {display:block; color:#333;padding:3px 0px;   }

	.footer address { color:#666; margin-bottom: 0.68181818rem; }

	.footer .footer-link {  }
	.footer .footer-link a { float:left; display:block; margin-right:0.7rem; }














  #backtotop {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 9999;
    width: 1.81818182rem;
    height: 1.81818182rem;
    text-align: center;
    line-height: 1.81818182rem;
    background: rgba(0, 0, 0, 0.3);
    font-size: 1.18181818rem;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
 transition: opacity 0.2s ease-out;
    opacity: 0;
  }
  #backtotop.show {
    opacity: 1;
  }
  #backtotop:hover.show {
    background: rgba(0, 0, 0, 0.6);
  }
}




@media (min-width: 1200px) {

}
@media (min-width: 992px) {

}
@media (min-width: 768px) {

}