@charset "utf-8";

#hnn-wrap {width:100%;}

#hnn-top {width:100%; margin:0 auto; height:87px; border-bottom:3px solid #bfc448; position:relative;z-index:5;}
#hnn-top .hnn-inner {width:1000px;margin:0 auto;}
#hnn-top .hnn-inner:after {content:"";display:block;clear:both;font-size:0;}
#hnn-top #hnn-logo {float:left; position:relative; top:25px;}
#hnn-top .hnn-par {
	background:url(../images/top-icon.gif) no-repeat;
	font-size:18px; font-weight:600; color:#ed8a37; text-indent:20px;
	position:absolute; right:50%; margin-right:-500px; top:46px; line-height:21px;}

#hnn-top #hnn-gnb {float:left; margin-top:45px; margin-left:55px;}
#hnn-top #hnn-gnb > li {float:left; padding:0 24px; background:url(../images/gnb-bar1.gif) no-repeat 0 5px;}
#hnn-top #hnn-gnb > li:first-child {background:none;}
#hnn-top #hnn-gnb > li > a {
	font-size:18px;
	font-weight:600;
	float:left;
	height:42px;
	color:#3c3c3d;
	letter-spacing:-0.5px; word-spacing:-0.5px;
}
#hnn-top #hnn-gnb > li.active > a,
#hnn-top #hnn-gnb > li:hover > a {background:url(../images/gnb-on.gif) no-repeat 50% 100%; color:#bfc448;}
#hnn-top #hnn-gnb div {
	position:absolute;
	top:91px;
	width:100%;
	left:0;
	height:37px;
	background:url(../images/gnb-bg.gif) repeat-x;
	display:none;
	z-index:99;
	color:#b8b8b8;
}
#hnn-top #hnn-gnb div ul {width:1000px; margin:0 auto; padding-top:9px;text-align:right;}
#hnn-top #hnn-gnb div ul li {
	float:left;
	font-size:14px;
	letter-spacing:-0.5px;
	word-spacing:-0.5px;
	padding:0 20px;
	background:url(../images/gnb-bar2.gif) no-repeat 0 6px;
}
#hnn-top #hnn-gnb div ul li a {color:#b8b8b8; font-weight:bold;}
#hnn-top #hnn-gnb div ul li.active a,
#hnn-top #hnn-gnb div ul li:hover a {color:#bfc448; font-weight:bold;}
#hnn-top #hnn-gnb div ul li:first-child {background:none;padding-left:none;}
#hnn-top #hnn-gnb #hnn-gnb1 ul li:first-child {margin-left:310px;}
#hnn-top #hnn-gnb #hnn-gnb2 ul li:first-child {margin-left:425px;}
#hnn-top #hnn-gnb #hnn-gnb4 ul li:first-child {margin-left:640px;}
#hnn-top #hnn-gnb #hnn-gnb5 ul li:first-child {margin-left:715px;}


#hnn-foot {clear:both; width:100%; height:88px; background:#3c3c3d;}
#hnn-foot .hnn-inner {width:1000px; margin:0 auto; position:relative;}
#hnn-foot .hnn-copy {color:#9e9e9e; font-size:11px; position:absolute; left:0; top:35px;}
#hnn-foot .hnn-copy span {font-size:10px; display:block; margin-top:5px;}
#hnn-foot .hnn-tell {position:absolute; right:0; top:29px; width:222px; height:40px; text-indent:-9999px; background:url(../images/foot-tell.png) no-repeat;}



#hnn-vis {z-index:0; }
#hnn-vis,
#hnn-vis .hnn-vis {width:100%;height:530px;position:relative;}
#hnn-vis .hnn-vis p {width:1000px; margin:30px auto 0; font-size:35px; color:#0b0b0b;}
#hnn-vis .hnn-vis p span {font-size:16px; color:#6e6d6d; line-height:20px; display:block; letter-spacing:-1px; word-spacing:-1px;}
#hnn-vis .hnn-vis1 {background:url(../images/vis1.jpg) no-repeat 50% 0;}
#hnn-vis .hnn-vis2 {background:url(../images/vis2.jpg) no-repeat 50% 0;}
#hnn-vis .hnn-vis3 {background:url(../images/vis3.jpg) no-repeat 50% 0;}
#hnn-vis .bx-pager {position:absolute;top:500px;left:50%; z-index:100;}
#hnn-vis .bx-pager .bx-pager-item {float:left;margin-right:10px;}
#hnn-vis .bx-pager .bx-pager-item a {float:left;display:block;width:16px;height:15px;background:url(../images/vis-off.png) no-repeat;text-indent:-9999px;}
#hnn-vis .bx-pager .bx-pager-item a.active {background:url(../images/vis-on.png) no-repeat;}



#hnn-box {width:100%; height:292px; margin:0 auto; position:relative; background:url(../images/box-bg.jpg);}
#hnn-box .hnn-inner {width:1000px; margin:0 auto;}

#hnn-box .hnn-box {border:1px solid #cdcccc; width:175px; height:217px; float:left; box-shadow:3px 3px #d4d3d3; margin-right:11px; margin-top:39px; position:relative;}
#hnn-box .hnn-box div {background:#fff; width:175px; height:78px; position:relative;}
#hnn-box .hnn-box .hnn-box-txt {font-size:28px; color:#232e34; letter-spacing:-3px; word-spacing:-3px; position:absolute; top:8px; left:20px;}
#hnn-box .hnn-box .hnn-box-stxt {font-size:12px; color:#a0a0a0; line-height:17px; letter-spacing:-1px; word-spacing:-1px; position:absolute; top:32px; left:20px;}
#hnn-box .hnn-box1 div a,
#hnn-box .hnn-box2 div a,
#hnn-box .hnn-box3 div a {position:absolute; right:10px; top:10px;}

#hnn-box .hnn-box4 {background:url(../images/box4.jpg) no-repeat 0 50%; position:relative;}
#hnn-box .hnn-box4 p {font-size:18px; color:#fff; font-weight:600; position:absolute; left:15px; top:20px; letter-spacing:-1px; word-spacing:-1px;}
#hnn-box .hnn-box4 span {font-size:14px; color:#fafdb3; position:absolute; left:15px; top:42px;}
#hnn-box .hnn-box4 strong {font-size:12px; color:#292828; font-weight:normal; position:absolute; left:15px; top:68px; line-height:17px; letter-spacing:-0.5px; word-spacing:-0.5px;}
#hnn-box .hnn-box4 a {width:100%; height:100%; display:block; position:absolute; left:0; top:0;}

#hnn-box .hnn-box5 {width:246px; margin-right:0; background:#fff;}
#hnn-box .hnn-box5 .hnn-com {width:249px; height:139px; background:url(../images/box5-bg.jpg) no-repeat 136px 50px; position:relative;}
#hnn-box .hnn-box5 .hnn-com p {font-size:18px; color:#232e34; font-weight:600; position:absolute; left:15px; top:20px;}
#hnn-box .hnn-box5 .hnn-com span {font-size:12px; color:#a0a0a0; position:absolute; left:15px; top:47px; line-height:17px; letter-spacing:-0.5px; word-spacing:-0.5px;}
#hnn-box .hnn-box5 .hnn-com a {position:absolute; left:15px; top:109px;}
#hnn-box .hnn-box5 .hnn-quick {width:246px; background:#828a8d;}
#hnn-box .hnn-box5 .hnn-quick a {width:122px; height:78px; float:left;}
#hnn-box .hnn-box5 .hnn-quick a p {margin-top:50px; font-size:14px; color:#fff; text-align:center;}
#hnn-box .hnn-box5 .hnn-q {background:url(../images/box5-icon1.gif) no-repeat 50% 14px; border-right:1px solid #8d9598;}
#hnn-box .hnn-box5 .hnn-d {background:url(../images/box5-icon2.gif) no-repeat 50% 13px; border-left:1px solid #747c7f;}








/*팝업레이어*/
body {overflow-y: auto; overflow-x: hidden;color:#666;}
#hnn-layer {position:fixed;width:100%;height:100%;overflow:hidden;left:0;top:0;z-index:9999;background:url(../images/layer-bg.png);}
#hnn-layer .hnn-inner {width:861px; padding:0 0 5px; position:absolute; top:50%; left:50%; margin:-351px 0 0 -430px;background:#000000;}
#hnn-layer.hnn-findpass .hnn-inner {top:25%;}
#hnn-layer .hnn-close {position:absolute;display:block;top:0;right:-45px;}

#hnn-layer .hnn-tit {height:74px; color:#fff; position:relative; margin:0 5px;}
#hnn-layer .hnn-tit h2 {display:block;position:absolute; left:6px; bottom:13px;}
#hnn-layer .hnn-tit p {position:absolute; right:7px; bottom:10px;}

#hnn-layer .hnn-con {background:#fff; margin:0 5px; padding:28px 10px 20px; position:relative;}
#hnn-layer .hnn-con:after {content:"";display:block;clear:both;}


/*왼쪽/오른쪽 위치값*/
#hnn-par-lef h3,
#hnn-par-rig h3 {font-size:18px; color:#333;font-weight:600; margin-bottom:10px;}
#hnn-par-lef h3 span,
#hnn-par-rig h3 span {width:405px; border-bottom:1px solid #cccccc; display:block; padding-top:5px;}


/*왼쪽*/
#hnn-par-lef {clear:both; width:403px;float:left;;}
#hnn-par-lef:after {content:"";display:block;clear:both;}

/*왼쪽-파티션종류 탭메뉴*/
#hnn-par-lef .hnn-par-tab {border:1px solid #e2e3e7; border-bottom:0; width:401px;}
#hnn-par-lef .hnn-par-tab:after {content:"";display:block;clear:both;}
#hnn-par-lef .hnn-par-tab li {float:left; background:#f9dbc7;}
#hnn-par-lef .hnn-par-tab li a {display:block; width:134px; line-height:48px; text-align:center; font-size:12px; color:#333; text-indent:20px;}

#hnn-par-lef .hnn-par-tab li.hnn-tab1 a{width:134px; background:url(../images/par-icon1.gif) no-repeat 0 0;}
#hnn-par-lef .hnn-par-tab li.hnn-tab2 a{width:134px; background:url(../images/par-icon2.gif) no-repeat 0 0;}
#hnn-par-lef .hnn-par-tab li.hnn-tab3 a{width:133px; background:url(../images/par-icon3.gif) no-repeat 0 0;}
#hnn-par-lef .hnn-par-tab li a.active {background-position:0 -48px; color:#f48830; font-weight:bold;}
/*2단*/
#hnn-par-lef .hnn-box {width:401px;height:433px; text-align:center; border:1px solid #e2e3e7; border-top:0;}
#hnn-par-lef .hnn-box div {height:433px;}
#hnn-par-lef .hnn-box .v-bg1-1 {background:url(../images/par-wht2.jpg) no-repeat 50% 50%; position:relative;}
#hnn-par-lef .hnn-box .v-bg1-2 {background:url(../images/par-silver2.jpg) no-repeat 50% 50%; position:relative;}
#hnn-par-lef .hnn-box .v-bg1-3 {background:url(../images/par-dg2.jpg) no-repeat 50% 50%; position:relative;}
/*3단*/
#hnn-par-lef .hnn-box .v-bg2-1 {background:url(../images/par-wht3.jpg) no-repeat 50% 50%; position:relative;}
#hnn-par-lef .hnn-box .v-bg2-2 {background:url(../images/par-gray3.jpg) no-repeat 50% 50%; position:relative;}
#hnn-par-lef .hnn-box .v-bg2-3 {background:url(../images/par-dg3.jpg) no-repeat 50% 50%; position:relative;}
/*4단*/
#hnn-par-lef .hnn-box .v-bg3-1 {background:url(../images/par-wht4.jpg) no-repeat 50% 50%; position:relative;}
#hnn-par-lef .hnn-box .v-bg3-2 {background:url(../images/par-gray4.jpg) no-repeat 50% 50%; position:relative;}
#hnn-par-lef .hnn-box .v-bg3-3 {background:url(../images/par-dg4.jpg) no-repeat 50% 50%; position:relative;}

#hnn-par-lef .hnn-box div div {width:231px;  left:50%; margin-left:-116px; position:absolute; cursor:pointer; /*border:1px solid #888;*/ }
#hnn-par-lef .hnn-box div div { outline:#333 solid thin; }

#hnn-par-lef .hnn-box #l-view1 .hnn-l-1 {height:188px; top:139px;}
#hnn-par-lef .hnn-box #l-view1 .hnn-l-2 {height:56px; top:78px;}

#hnn-par-lef .hnn-box #l-view2 .hnn-l-1 {height:188px; top:169px;}
#hnn-par-lef .hnn-box #l-view2 .hnn-l-2 {height:56px; top:109px;}
#hnn-par-lef .hnn-box #l-view2 .hnn-l-3 {height:57px; top:48px;}

#hnn-par-lef .hnn-box #l-view3 .hnn-l-1 {height:187px; top:199px;}
#hnn-par-lef .hnn-box #l-view3 .hnn-l-2 {height:57px;  top:138px;}
#hnn-par-lef .hnn-box #l-view3 .hnn-l-3 {height:57px; top:77px;}
#hnn-par-lef .hnn-box #l-view3 .hnn-l-4 {height:57px;  top:16px; }

#hnn-par-lef .hnn-frame {height:42px; background:#343434; display:block; margin-top:10px; position:relative;}
#hnn-par-lef .hnn-frame p {font-size:14px; position:absolute; left:10px; top:12px; color:#fff; font-weight:600;}
#hnn-par-lef .hnn-frame ul {font-size:14px; position:absolute; left:150px; top:10px;}
#hnn-par-lef .hnn-frame ul li {float:left; text-align:center; margin-right:10px; display:block;}
#hnn-par-lef .hnn-frame ul:after {content:"";display:block;clear:both;}
#hnn-par-lef .hnn-frame ul li span {display:inline-block; padding:0 5px; height:22px; font-size:11px; line-height:21px; border:1px solid #858585; margin-left:5px;}
#hnn-par-lef .hnn-frame ul li.hnn-f1 span {background:#fff;}
#hnn-par-lef .hnn-frame ul li.hnn-f2 span {background:#c2c3c1;}
#hnn-par-lef .hnn-frame ul li.hnn-f3 span {background:#5f5f5c; color:#fff}

/*오른쪽-재질색상*/
#hnn-par-rig {width:401px; float:right;}
#hnn-par-rig:after {content:"";display:block;clear:both;}

/*오른쪽-재질색상 탭메뉴*/
#hnn-par-rig .hnn-par-tab {border:1px solid #e2e3e7; border-bottom:0;width:401px;}
#hnn-par-rig .hnn-par-tab:after {content:"";display:block;clear:both;}
#hnn-par-rig .hnn-par-tab li {float:left;}
#hnn-par-rig .hnn-par-tab li a {display:block; width:99px; line-height:48px; text-align:center; font-size:12px; color:#333; background:#eff2aa;}
#hnn-par-rig .hnn-par-tab li a.active {background:#fff; color:#abb202; font-weight:bold;}

#hnn-par-rig  .hnn-par-tab li.hnn-tab1 a{width:100px; border-right:1px solid #fff; }
#hnn-par-rig  .hnn-par-tab li.hnn-tab2 a{width:100px;border-right:1px solid #fff;}
#hnn-par-rig  .hnn-par-tab li.hnn-tab3 a{border-right:1px solid #fff;}

#hnn-par-rig .hnn-box {width:401px;height:485px;  border:1px solid #e2e3e7; border-top:0; overflow-y:scroll; overflow-x:hidden;}
#hnn-par-rig .hnn-box div {margin:23px 0 0 20px;}
#hnn-par-rig .hnn-box div .hnn-v-con {width:60px; float:left; margin-right:10px; margin-bottom:10px;}
#hnn-par-rig .hnn-box div .hnn-v-con:nth(5n+1) {margin-right:0;}
#hnn-par-rig .hnn-box div .hnn-v-con dt {height:58px; border:1px solid #737373;}
#hnn-par-rig .hnn-box div .hnn-v-con dd {height:19px; border:1px solid #737373; border-top:0; text-align:center;}
#hnn-par-rig .hnn-box div .hnn-v-con2 {width:168px; float:left; margin-right:10px; margin-bottom:10px;}
#hnn-par-rig .hnn-box div .hnn-v-con:nth(2n+1) {margin-right:0;}
#hnn-par-rig .hnn-box div .hnn-v-con2 dt {height:58px; border:1px solid #737373;}
#hnn-par-rig .hnn-box div .hnn-v-con2 dd {height:19px; border:1px solid #737373; border-top:0; text-align:center;}