/*
개발공사 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' , 'Arial'; font-size:14px; line-height:1.4; position:relative;  min-width: 320px; overflow-x: hidden; }
h1,h2,h3,h4,h5,h6 {margin: 0; font-weight: bold;}
p, dl, ol, ul {margin: 0;}



i { line-height:1;  }

.img-line  { position:absolute;  display:inline-block;  }
.img-line:before { content:''; position:absolute; top:10px; left:10px; width:calc(100% - 20px) ; height:calc(100% - 20px) ;     display:inline-block; border:1px solid rgba(255,255,255,0.3);   }


@media (min-width: 1550px) {

.wrap { padding-left:230px;  }
.left-layout { position:absolute; left:0px; top:0px;  width:230px; height:100%;  background:#353336; z-index:100;  }
.left-layout .header {  }
.left-layout .header h1 { text-align:center;   padding-top:10px;  height:100px; }
.left-layout .header h1 .logo { display:block; }
.left-layout .header h1 .class { display:block; padding-left:23px; margin-top:-5px; color:#fff; font-size:16px;  font-weight:100;  }
.left-layout .header .m-menu { display:block !important;   margin-left:0px !important; }
.left-layout .header .header-util { border-bottom:1px solid #4c4b4d; }
.left-layout .header .header-util li  { float:left; margin-left:-1px; width:50%; text-align:center; border-top:1px solid #4c4b4d; border-left:1px solid #4c4b4d;  letter-spacing:-1.5;  }
.left-layout .header .header-util li a { display:block; padding:5px 0 ; width:100%; color:#777;   font-size:13px; }

.gnb .menu {font-weight:100;   letter-spacing:-1.5px; }
.gnb .menu h3 {  border-bottom:1px solid #4c4b4d;   }
.gnb .menu h3 a {display:block;  padding:20px 0 20px 30px; font-weight:100;  font-size:20px; color:#fff; background:#353336;  }
.gnb .menu h3 a.active { background:#000; text-decoration:underline;  }

.gnb .menu ul { display:none;   }
.gnb .menu ul.active { display:block;  }
.gnb .menu ul li { border-bottom:1px solid #4c4b4d;   }

.gnb .menu ul li a {display:block; font-size:15px; color:#959595; padding:10px 0 10px 33px;  background:url(../images/common/2menu_blit.gif) no-repeat 25px center #000;  }
.gnb .menu ul li a.active { text-decoration:underline;  }
.header .department-office { padding-top:37px; padding-left:30px;  width:100%; height:300px; background:url(../images/main/illu_cs.png) no-repeat right bottom #6574c7 ;   }
.header .department-office h3 { font-size:20px; font-weight:100; margin-bottom:30px; text-decoration:underline;  color:#fff;   letter-spacing:-1.5px;  }
.header .department-office .tel { font-size:15px; color:#fff;  font-weight:100;  }
.header .department-office .time { font-size:25px; color:#fff;  margin-top:15px; }

.header .all-menu-open { display:none !important;  }
.header .all-menu-close { display:none !important;  }
.header .top-search-wrap { display:none;  }
.header .search-btn a { display:block; position:absolute; left:230px; top:0px; width:54px; height:54px; background:rgba(0,0,0,0.6); color:#fff; font-size:20px; text-align:center; padding-top:12px;  }
.header .search-btn i {color:#fff; }

.top-search-wrap {display:none; height:54px; z-index:100;    width:700px; position:absolute; top:0px;left:230px;    background:rgba(0,0,0,0.6);  }
	.top-search-wrap form { float:left;   }
	.top-search-wrap form input[type="text"] { float:left; font-size:18px; border:0px; height:54px; color:#fff;  padding:4px 10px 0px; width:588px; background:rgba(0,0,0,0.6); }
	.top-search-wrap form input[type="text"]::placeholder {color:#fff; }
	.top-search-wrap form button { float:left;background:#000; border:0px; height:auto; width:54px; height:54px;  }
	.top-search-wrap form button i { font-size:25px; color:#fff;  }
	.top-search-wrap a { float:left; width:54px;  height:54px; display:block; text-align:center; padding-top:20px;  }

.right-layout { width:100%; }






.footer {border-top:1px solid #e1e1e1;  padding:30px;   }
.footer .container { width:100% !important;  }
.footer .footer-link-menu {margin-bottom:35px;}
.footer .footer-link-menu dl { float:left; width:23.5%; margin-left:2%; position:relative;   }
.footer .footer-link-menu dl:first-child {  margin-left:0px;  }
.footer .footer-link-menu dl dt a { display:inline-block; color:#4f4f4f;  padding:7px 25px 0px; height:35px; width:100%; border:1px solid #8a8a8a;  font-size:15px; font-weight:normal;    }
.footer .footer-link-menu dl dt a span { float:right; font-size:12px; }
.footer .footer-link-menu dl dd { display:none; z-index:100;  background:#fff; padding:10px 25px; position:absolute; bottom:34px; overflow-y:auto; max-height:350px;  width:100%; border:1px solid #8a8a8a;  }
.footer .footer-link-menu dl dd a { font-size:15px; display:block; margin:5px 0;color:#4f4f4f;    }
.footer .foot-logo {margin-bottom:20px;   }
.footer .foot-logo .logo {float:left; margin-right:10px;   }
.footer .foot-logo .class {float:left; color:#4f4f4f; font-size:14px;  font-weight:bold; display:block; margin-top:12px;  }
.footer address { color:#8a8a8a; font-size:15px; line-height:1.6;margin-bottom:5px;   }
.footer .comment { color:#8a8a8a; font-size:14px;  }


  #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);
  }

.back {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    display: none;
    width: 100%;
    height: 100%;
    z-index: 10;
}


}




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




}


@media (max-width: 1549px) {



	.header { background:#353336; position:relative;     height: 2.27272727rem;    word-break: keep-all;	text-align:center; 	padding:0 15px;    }

	.header .link-menu  { position:absolute; top:-1.5rem; z-index:100; width:100%; left:0px;   } 
	.header .link-menu li  { float:left; margin-top:0.4rem;  } 
	.header .link-menu li a { font-size:14px; color:#c9c9c9; }
	.header .link-menu li:before { content:''; display:block; float:left;  border-left:1px solid #49433b;margin-left:10px; margin-right:10px; height:10px; margin-top:6px;  }
	.header .link-menu li:first-child:before { margin-left:0px; border:0px;  }

	.header h1 {text-align:center; position:relative; z-index:50; display:inline-block;  }
	.header h1 a.logo {   display:table-cell; padding-right:10px; padding-top:0.3rem;   }
	.header h1 a.logo img { width: 4.5rem;}
	.header h1 a.class {display:table-cell; height: 2.27272727rem;  padding:0 5px;  background:rgba(0,0,0,0.25); color:#fff; font-size:16px; font-weight:normal;  vertical-align:middle; text-align:center;  }

	.all-menu-open {    position: absolute;    top: 0.7rem;    left: 15px;    }




	.header .search-btn i {    z-index: 10;    position: absolute;   top: 0.75rem; color:#fff;    right: 15px;    font-size: 0.80909091rem;  }
	.header .search-btn a.search-close  {display:none;  }
	.header .search-btn a.search-close i { top: 0.7rem; right: 10px; font-size:1.10909091rem; }


	.m-menu { display:none;   z-index: 1000; overflow-y:auto;  -ms-overflow-style: none;    position: fixed;    top: 0px;    left: 0; width: 230px; margin-left:-230px;   height: 100%;    background: #353336;    letter-spacing: -1px;    text-align: left;   }
	.m-menu::-webkit-scrollbar {display:none;}


.left-layout .header .header-util { border-bottom:1px solid #4c4b4d; }
.left-layout .header .header-util li  { float:left; margin-left:-1px; width:50%; text-align:center; border-top:1px solid #4c4b4d; border-left:1px solid #4c4b4d;  letter-spacing:-1.5;  }
.left-layout .header .header-util li a { display:block; padding:5px 0 ; width:100%; color:#777;   font-size:13px; }

.gnb .menu {font-weight:100;   letter-spacing:-1.5px; }
.gnb .menu h3 {  border-bottom:1px solid #4c4b4d;   }
.gnb .menu h3 a {display:block;  padding:20px 0 20px 30px; font-weight:100;  font-size:20px; color:#fff; background:#353336;  }
.gnb .menu h3 a.active { background:#000; text-decoration:underline;  }
.gnb .menu ul { display:none;   }
.gnb .menu ul li { border-bottom:1px solid #4c4b4d;   }

.gnb .menu ul li a {display:block; font-size:15px; color:#959595; padding:10px 0 10px 33px;  background:url(../images/common/2menu_blit.gif) no-repeat 25px center #000;  }
.gnb .menu ul li a.active { text-decoration:underline;  }
.header .department-office { padding-top:37px; padding-left:30px;  width:100%; height:300px; background:url(../images/main/illu_cs.png) no-repeat right bottom #6574c7 ;   }
.header .department-office h3 { font-size:20px; font-weight:100; margin-bottom:30px; text-decoration:underline;  color:#fff;   letter-spacing:-1.5px;  }
.header .department-office .tel { font-size:15px; color:#fff;  font-weight:100;  }
.header .department-office .time { font-size:25px; color:#fff;  margin-top:15px; }



	.header .all-menu-close {  display:none;  position: fixed;   margin-left:-230px;  top: 0px; z-index:100;    left:230px; background:#000; width:50px; height:50px;padding-top:10px;   }
	.header .all-menu-close img { width:1rem;  }


 


	
	.top-search-wrap {display:none; height:2rem; z-index:100;    width:100%; position:absolute; top:2.27272727rem; left:0px;  background:rgba(0,0,0,0.6);  }
	.top-search-wrap form { float:left; width:calc(100% - 2rem);  }
	.top-search-wrap form input[type="text"] { float:left; font-size:16px; border:0px; height:2rem; color:#fff;  padding:4px 10px 0px; width:calc(100% - 2rem); background:rgba(0,0,0,0.6); }
	.top-search-wrap form input[type="text"]::placeholder {color:#fff; }
	.top-search-wrap form button { float:left;background:#000; border:0px; width:2rem; height:2rem;  }
	.top-search-wrap form button i { font-size:20px; color:#fff;  }
	.top-search-wrap a { float:left; width:2rem; height:2rem; display:block; text-align:center; padding-top:0.6rem;  }

	







.footer {border-top:1px solid #e1e1e1; padding:30px 15px;   }
.footer .footer-link-menu {margin-bottom:0.6rem; margin-left:-2%; }
.footer .footer-link-menu dl { float:left; width:49%; margin-left:1%; position:relative;  margin-bottom:1%;  }
.footer .footer-link-menu dl dt a { display:inline-block; color:#4f4f4f;  padding:7px 25px 0px; height:35px; width:100%; border:1px solid #8a8a8a;  font-size:0.55rem; font-weight:normal;    }
.footer .footer-link-menu dl dt a span { float:right; font-size:0.45rem; }
.footer .footer-link-menu dl dd { display:none; background:#fff; padding:10px 25px; position:absolute; bottom:34px; overflow-y:auto; max-height:350px; border:1px solid #8a8a8a;  width:100%;  }
.footer .footer-link-menu dl dd a {font-size:0.55rem; display:block; margin:5px 0;color:#4f4f4f;    }
.footer .foot-logo {display:none;   }
.footer .foot-logo .logo {float:left; margin-right:10px;   }
.footer .foot-logo .class {float:left; color:#4f4f4f;font-size:0.53rem  font-weight:bold; display:block; margin-top:12px;  }
.footer address { color:#8a8a8a; font-size:0.53rem ;  line-height:1.6;margin-bottom:5px;  }
.footer address p { margin-bottom:0.4rem;  }
.footer address p:after { clear:both; display:table; content:'';  }
.footer address p.address strong {  float:left; width:80px;   }
.footer address p.address span { float:right;  width:calc(100% - 80px);  }
.footer .comment { color:#8a8a8a;font-size:0.51rem  }







  #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);
  }



.back {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    display: none;
    width: 100%;
    height: 100%;
    z-index: 10;
}


}




@media (min-width: 1200px) {

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

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

}