#hnn-wrap {width:100%;}
.hnn-inner {width:980px; margin:0 auto; position:relative;}

#hnn-header {width:100%; height:44px; border-top: 3px solid #f15a24; border-bottom: 1px solid #e5e5e5; }
#hnn-tnb {position:absolute; height:44px;top:0; right:0; letter-spacing:-0.05em;}
#hnn-tnb li {float:left; line-height:44px; margin-left:10px;}
#hnn-tnb li a {display:block; width:100%; height:100%; color:#9a9999; font-size:12px;}
#hnn-tnb li a img {position:relative; top:-2px; margin-right:5px;}

.hnn-lang {position:absolute;height:44px;top:0;left:0;letter-spacing:-0.05em;}
.hnn-lang li {float:left;line-height:44px;margin-right:10px;}
.hnn-lang a {display:inline-block;font-size:12px;color:#9a9999;}
.hnn-lang li.active a {color:#f15a24;}

#hnn-gnb {position: relative; height: 86px;}
#hnn-gnb:after {content: ""; display: block; clear: both;}

#hnn-logo {float: left;}
#hnn-logo img {position: relative; top: 15px; left: 0;}

#hnn-gnb .hnn-gnb {float: right;}
#hnn-gnb .hnn-gnb:after {content:"";display:block;clear:both; height:0;}
#hnn-gnb .hnn-gnb > li {float:left;position:relative;}
#hnn-gnb .hnn-gnb > li:first-child {border-left:none;}
#hnn-gnb .hnn-gnb > li > a {
	color:#000;
	font-size:16px;
	padding:0 22px;
	line-height:85px;
	font-family:nm;
	z-index:10;
	display:block;
	letter-spacing:-0.05em;
	cursor:pointer;
}
#hnn-gnb .hnn-gnb > li:hover > a,
#hnn-gnb .hnn-gnb > li.active > a {color:#f15a24;}
#hnn-gnb .hnn-gnb > li:hover > a:after {content: "";display: block; position: absolute; top: 0; left: 50%; margin-left: -22px; width: 44px; height: 3px; background: #f15a24;}
#hnn-gnb .hnn-gnb li div {
	display:none;
	background:#fff;
	width:150px;
	position:absolute;
	top:85px;
	left: 50%; margin-left: -75px;
	letter-spacing:-0.1em;
	z-index:9999;
	padding-top: 2px;
}
#hnn-gnb .hnn-gnb li li:first-child:after {content: ""; display: block; width: 100%; height: 3px; position: absolute; top: 1px; left: 0; background: #f15a24;}


#hnn-gnb .hnn-gnb li div ul {text-indent:15px; border:1px solid #f4f2f8; border-bottom:0;}
#hnn-gnb .hnn-gnb li ul li {border-bottom:1px solid #f4f2f8;}
#hnn-gnb .hnn-gnb li ul li a {display:block;font-size:14px;color:#6d6d6d;padding:12px 0;transition:0.2s; background:#fff;}
#hnn-gnb .hnn-gnb li ul li.active a,
#hnn-gnb .hnn-gnb li ul li a:hover {background:#f2efef; color: #f15a24;}




#hnn-vis {position:relative;width:100%;z-index:0;height:548px;border-top: 1px solid #e5e5e5;}
#hnn-vis .hnn-vis {width:100%;height:571px;overflow:hidden;}
#hnn-vis .hnn-vis img {position:relative;display:block;left:50%;margin-left:-1000px;}


/*#hnn-vis .bx-controls-direction a {position:absolute; z-index:100;display:block;width:64px;height:64px;text-indent:-9999px;}
#hnn-vis .bx-controls-direction .bx-prev {background:url(../images/vis-arrow.png) no-repeat 0 0; top:250px; left:50%; margin-left:-632px;}
#hnn-vis .bx-controls-direction .bx-next {background:url(../images/vis-arrow.png) no-repeat -64px 0; top:250px; right:50%; margin-right:-632px;}*/

#hnn-vis .bx-pager {position:absolute;z-index:100;bottom:75px;left:50%;margin-left:-100px;width:200px;text-align:center;}
#hnn-vis .bx-pager .bx-pager-item {display:inline;}
#hnn-vis .bx-pager .bx-pager-item a {
	display:inline-block;
	margin:0 3px;
	width:16px;
	height:16px;
	background:url(../images/sp.png) -16px 0;
	text-indent:18px;
	overflow:hidden;
	border-radius:50%;
}
#hnn-vis .bx-pager .bx-pager-item a.active {background:url(../images/sp.png) 0 0;}





/*============================
/*컨텐츠
=============================*/
.sp {display: block; background: url(../images/sp.png) no-repeat; }
#hnn-element {position: relative; top: -55px;}

/*자세히보기*/
.more-wrap:after {content:""; display: block; clear: both;}
.more-wrap .more {display: block; width: 245px; height: 233px; float: left; position: relative;}
.more-wrap .more1 {background: #007d39 url(../images/el-icon1.png) 50% 68px no-repeat;}
.more-wrap .more3 {background: #007d39 url(../images/el-icon3.png) 50% 68px no-repeat;}
.more-wrap .more2 {background:#019a91 url(../images/el-icon2.png) 50% 68px no-repeat; }
.more-wrap .more4 {background:#019a91 url(../images/el-icon4.png) 50% 68px no-repeat; }
.more-wrap .more1:after,
.more-wrap .more2:after,
.more-wrap .more3:after {content: ""; display: block; width: 1px; height: 233px; background: #fff; position: absolute; top: 0; right: 0;}
.more-wrap .more:hover {background-color: #f15a24;}
.more-wrap .more strong {display: block; color: #fff; font-weight: normal; font-size: 17px; letter-spacing: -0.075em; position: absolute; top: 25px; left: 25px;}
.more-wrap .more span {display: block; width: 82px; height: 22px; line-height: 22px;border: 1px solid #80be9c; position: absolute; bottom: 12px; right: 12px; text-align: center; font-size: 12px; letter-spacing: -0.075em;}
.more-wrap .more span,
.more-wrap .more span a {color: #fff;}
.more-wrap .more2 span,
.more-wrap .more4 span {border-color: #80cdc8;}
.more-wrap .more:hover span {border-color: #f8ad92}

/*컨텐츠뷰*/
.cont-wrap {margin-top: 50px;}
.cont-wrap:after {content: ""; display: block; clear: both;}
.cont-tit {display: block; padding-bottom: 17px; font-size: 17px; font-family: nm; color: #383838; border-bottom: 1px solid #ddd; position: relative; margin-bottom: 15px;}
.cont-tit:after {content: ""; display: block; width: 145px; height: 3px; position: absolute; left: 0; bottom: -2px; background: #f15a24;}

.cont-lef {float: left; width: 470px; position: relative;}
/*공지사항&뉴스*/
.board {min-height:150px;}
.board .cont-tit {letter-spacing: 0;}
.board .btn-more {background-position:0 -16px; width: 27px; height: 27px; position: absolute; right: 0; top: 0;}
.board-list {padding-top: 5px;}
.board-list li {margin-bottom: 10px; position: relative;}
.board-list li a {font-size: 14px; color: #6e6e6e; }
.board-list li span {display: block; position: absolute; right: 0; top:0; font-size: 13px; letter-spacing: 0; color: #ababab;}

.cont-box {margin-top: 40px;}
.cont-box:after {content: ""; display: block; clear: both;}
/*온라인문의*/
.online {position: relative; float: left; width: 240px; background: url(../images/ico-online.gif) 0 0 no-repeat; height: 91px; }
.online strong {position: absolute; left: 122px; top: 15px;font-weight: normal; font-family: nm; font-size: 17px; color: #f15a24;}
.online a {position: absolute; left: 122px; top: 46px;	display: block; width: 110px; height: 25px; border-radius: 25px; text-align: center; background: #f15a24; font-size: 12px; color: #fff; line-height: 25px;}
/*퀵메뉴*/
.quick {float: right; margin-top: 10px;}
.quick:after {content: ""; display: block; clear: both;}
.quick li {float: left; text-align: center; margin-left: 20px;}
.quick li a {font-size: 14px; color: #6e6e6e; letter-spacing: -0.075em;}
.quick span {display: block; width: 48px; height: 48px; margin: 0 auto; margin-bottom: 6px; }
.ico-quick1 {background:url(../images/ico-quick1.gif) 0 0;}
.ico-quick2 {background:url(../images/ico-quick2.gif) 0 0;}
.ico-quick3 {background:url(../images/ico-quick3.gif) 0 0;}


.cont-rig {float: right; width: 470px;}
.cont-rig .cont-tit {letter-spacing: -0.075em; position: relative;}
/*공사실적*/
.result-list {position: relative;}
.result-list li {float: left;}
.result-list li span {display: block; width: 100%; text-align: center; margin-top: 15px;}
.result-list .bx-controls-direction a {position:absolute;  z-index:100;display:block;text-indent:-9999px; top: -50px;}
.result-list .bx-controls-direction .bx-prev {width: 27px; height: 27px;background:url(../images/sp.png) no-repeat -27px -16px; right: 26px;}
.result-list .bx-controls-direction .bx-next {width: 26px; height: 27px;  background:url(../images/sp.png) no-repeat -54px -16px;  right: 0;}

/*주거래업체현황*/
.business-wrap {width: 100%; border-top: 1px solid #d8d8d8;}
.business-tit {position: absolute; left: 0; top: 0; line-height: 67px; font-weight: normal; font-family: nm; font-size: 18px; letter-spacing: -0.025em; color: #222;}
.business-list {padding-left: 100px;}
.business-list .roll:after {content: ""; display: block; clear: both;}
.business-list li {width: 150px; text-align: center; line-height: 67px;}
.business-list .bx-controls-direction a {position:absolute;  z-index:100;display:block;text-indent:-9999px; right: 0;}
.business-list .bx-controls-direction .bx-prev {width: 35px; height: 33px;background:url(../images/sp.png) no-repeat 0 -77px; bottom: 0;}
.business-list .bx-controls-direction .bx-next {width: 35px; height: 34px;  background:url(../images/sp.png) no-repeat 0 -43px;  top: 0;}



/*============================
/*FOOTER
=============================*/

#hnn-foot {width:100%; border-top: 1px solid #d8d8d8;  padding:40px 0 80px;}
.foot-logo {position: absolute; left: 0; top: 8px; width: 141px; height: 27px; background: url(../images/foot-logo.gif) 0 0 no-repeat;}
.foot-info {position: absolute; top: 0; left: 160px; color:#a6a5a5; font-size:14px; letter-spacing:-0.03em; line-height:22px;}
.foot-info em {display:inline-block; /*width:1px; height:13px; background:#999998;*/ font-size:0; margin:0 8px; position:relative; top:2px;}
.foot-cs {position: absolute; right: 0; top: 0;width: 184px; height: 31px; background: url(../images/foot-cs.gif) 0 0 no-repeat;}