/* @charset "utf-8"; */

#hnn-wrap {width:100%;}

* {padding:0;margin:0;}
ul {list-style:none;}
button {outline:none;border:0;cursor:pointer;}


/*팝업레이어*/
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:relative; margin:0 auto; bottom:-10%; 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;}