@charset "utf-8";

#renew-wrap {width:100%;}

body {
	padding-top: 80px;
}

/* GNB 메인 스타일 */
#renew-wrap {
	position: fixed;
	width: 100%;
	background: #fff;
	top: 0;
	left: 0;
	z-index: 1000;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
#renew-top {
	position: relative;
	width: 100%;
}
.renew-inner {
	position: relative;
	width: 1000px;
	margin: 0 auto;
	height: 80px;
	border-bottom: 1px solid #BFC448;
}

/* 로고 */
#renew-logo {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

/* 메인메뉴 */
#renew-gnb {
	position: absolute;
	right: 0;
	display: flex;
	height: 100%;
}

#renew-gnb > li {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 140px;
}

#renew-gnb > li > a {
	font-size: 18px;
	color: #333;
	font-weight: 500;
}

/* 하위메뉴 배경 */
.header-bg {
	position: absolute;
	left: 0;
	top: 80px;
	width: 100%;
	height: 0;
	background: rgba(59, 59, 59, 0.8);
	transition: height 0.3s;
	border-bottom: 1px solid #BFC448;
	z-index: 100;
	box-sizing: border-box;
}

/* 하위메뉴 */
.depth02 {
	position: absolute;
	top: 80px;
	left: 50%;
	transform: translateX(-50%);
	padding: 20px 0;
	text-align: center;
	z-index: 101;
	width: 100%;
	height: 0;
	overflow: hidden;
	opacity: 0;
	transition: all 0.3s;
	box-sizing: border-box;
}

.depth02 li {
	padding: 8px 0;
	transition: background-color 0.3s;
}

.depth02 li a {
	font-size: 15px;
	color: #fff;
	white-space: nowrap;
	display: inline-block;
	width: 100%;
}

/* 호버 효과 */
#renew-gnb > li:hover > a {
	color: #BFC448;
	font-weight: bold;
}
.depth02 li:hover {
	background-color: #EBEAD6;
}
.depth02 li:hover a {
	color: #000;
}

/* GNB 호버 시 하위메뉴 표시 */
#renew-gnb:hover ~ .header-bg,
#renew-top:hover .header-bg {
	height: 440px;
}

#renew-gnb:hover .depth02,
#renew-top:hover .depth02 {
	height: 440px;
	opacity: 1;
}

/* 활성화된 메뉴 스타일 */
#renew-gnb > li.active > a {
	color: #BFC448;
}

/* 각 메뉴별 하위메뉴 호버 효과 */
#renew-gnb1:hover .depth02 {
	background-color: rgba(111, 111, 111, 0.7);
}

#renew-gnb2:hover .depth02 {
	background-color: rgba(111, 111, 111, 0.7);
}

#renew-gnb4:hover .depth02 {
	background-color: rgba(111, 111, 111, 0.7);
}

/* 상단 버튼 */
.top-btn {
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(191, 196, 72, 0.8);
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border: none;
	cursor: pointer;
	box-sizing: border-box;
	border-radius: 11px;
	position: fixed;
	right: 50px;
	bottom: 50px;
	transition: all 0.3s ease;
}
.top-btn:hover {
	background: rgba(191, 196, 72, 1);
}
.top-btn i {
	font-size: 26px;
	color: #fff;
}







/* 모바일 메뉴 버튼 */
#mobile-menu-btn {
	display: none;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	font-size: 16px;
	font-weight: 500;
	color: #3C3C3D;
}

/* bar 클래스 숨김 처리 */
#mobile-menu-btn .bar {
	display: none;
}

/* 버튼 텍스트 설정 */
#mobile-menu-btn::after {
	content: '메뉴';
}

#mobile-menu-btn.active::after {
	content: '닫기';
}

/* 모바일 메뉴 패널 */
#mobile-menu {
	position: fixed;
	top: 70px; /* GNB 높이만큼 띄움 */
	right: -280px;
	width: 280px;
	height: calc(100% - 70px); /* GNB 높이 제외 */
	background: #5E5E5E;
	z-index: 9999;
	transition: 0.3s;
	box-shadow: -2px 0 5px rgba(0,0,0,0.1);
	overflow-y: auto; /* 스크롤 활성화 */
	-webkit-overflow-scrolling: touch; /* iOS 스크롤 부드럽게 */
}

#mobile-menu.active {
	right: 0;
}

.mobile-nav {
	padding: 20px 0;
}

.mobile-nav-link {
	display: block;
	padding: 15px 30px;
	color: #fff;
	font-size: 18px;
	position: relative;
	text-align: end;
}

.mobile-nav-link.active {
	color: #BFC448;
	font-weight: bold;
}

.mobile-sub-nav {
	display: none;
	background: #EBEAD6;
	max-height: none; /* 높이 제한 제거 */
}

.mobile-sub-nav a {
	display: block;
	padding: 12px 30px;
	color: #000;
	font-size: 18px;
	border-bottom: 1px solid #D9D9D9;
	text-align: end;
}

/* 반응형 스타일 */
@media (max-width: 767px) {
	body {
    padding-top: 70px;
	}
	#renew-gnb {
			display: none;
	}
	.header-bg {
		display: none;
	}
	#renew-logo {
    left: 20px;
	}

	#renew-logo img{
    width: 41.67vw;
		max-width: 200px;
	}
	
	#mobile-menu-btn {
			display: block;
	}
	
	.renew-inner {
			width: 100%;
			height: 70px;
			padding: 0 20px;
			box-sizing: border-box;
	}
	.top-btn {
		right: 20px;
    bottom: 20px;
	}
}

/* 메뉴 오픈 시 body 스타일 */
body.menu-open {
	overflow: hidden; /* 배경 스크롤 방지 */
	position: fixed; /* iOS에서 배경 스크롤 방지 */
	width: 100%;
	height: 100%;
}








/* 푸터 */
#hnn-foot_renew {clear:both; width:100%; height:175px; background:#3C3C3D;display: flex;align-items: center;justify-content: center;position: relative;}
#hnn-foot_renew .hnn-inner_renew {width:1000px; margin:0 auto;}
#hnn-foot_renew .hnn-inner_renew .hnn-inner_renew_content_wrap {width: 70%;display: flex;flex-flow: column;gap: 10px;}
#hnn-foot_renew .hnn-inner_renew .hnn-inner_renew_content {display: flex;gap: 10px; justify-content: space-between;}
#hnn-foot_renew .hnn-inner_renew .hnn-inner_renew_content p{color: #B3B3B3;font-size: 12px;font-weight: normal;white-space: nowrap;}




/* PC 푸터 */
.pc-footer {
	display: block;
}

.mobile-footer {
	display: none;
}

/* 모바일 푸터 */
@media (max-width: 767px) {
	.pc-footer {
			display: none;
	}

	.mobile-footer {
			display: block;
			padding: 0 20px;
	}
	#hnn-foot_renew{
		height: unset;
		padding: 24px 0;
		box-sizing: border-box;
	}
	.company-name {
			font-size: 14px;
			line-height: 25px;
			color: #B3B3B3;
	}

	.company-info {
			font-size: 14px;
			line-height: 25px;
			color: #B3B3B3;
			margin-bottom: 35px;
	}

	.copyright {
			font-size: 14px;
			color: #B3B3B3;
			text-align: center;
	}
}









#hnn-vis {z-index:0; }
#hnn-vis,
#hnn-vis .hnn-vis {width:100%;height:530px;position:relative;display: flex; align-items: center; justify-content: center;flex-flow: column; gap: 37px;}
#hnn-vis .hnn-vis p {text-align: center;font-size:40px; color:#FFFFFF; font-weight: 900; z-index: 2; width: auto; margin: 0;}
#hnn-vis .hnn-vis p span {font-size:25px; color:#FFFFFF; display:block; margin-top: 30px; font-weight: 400;line-height: normal;}
#hnn-vis .hnn-vis1 {background:url(../images/vis1.jpg) no-repeat 50% 0;}
#hnn-vis .hnn-vis .shadow {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(60, 60, 61, 0.1); z-index:1;}
#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 .hnn-vis button {
	border: 2px solid #BFC448;
	border-radius: 50px;
	padding: 8px 45px;
	box-sizing: border-box;
	color: #BFC448;
	font-size: 23px;
	font-weight: bold;
	text-align: center;
	z-index: 2;
	cursor: pointer;
	background-color: transparent;
}
#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-vis .bx-wrapper .bx-controls-direction a {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9999;
}
#hnn-vis .bx-wrapper .bx-prev{
	left:50px;
	background: url(../images/btn_prev.png) no-repeat;
	opacity: 0.5;
	text-indent: -9999px;
	width:54px;
	height: 100px;
}
#hnn-vis .bx-wrapper .bx-prev:hover{
	opacity: 1;
}
#hnn-vis .bx-wrapper .bx-next{
	right:50px;
	background: url(../images/btn_next.png) no-repeat;
	opacity: 0.5;
	text-indent: -9999px;
	width:54px;
	height: 100px;
}   
#hnn-vis .bx-wrapper .bx-next:hover{
	opacity: 1;
}
#hnn-vis #custom-pager{
	position: absolute;
	bottom: 20px;
	width: 100%;
	text-align: center;
	z-index: 100;
}
#custom-pager a {
	display: inline-block;
	width: 10px;
	height: 10px;
	cursor: pointer;
	margin: 0 10px;
	border-radius: 50%;
	background: #fff;
	text-indent: -9999px;
	transition: all 0.3s ease;
}
#custom-pager a.active {
	width: 44px;
	border-radius: 50px;
	background: #BFC448;
}



#hnn-simulation {
	width: 100%;
	height: 426px;
}
#hnn-simulation .hnn-inner {
	width: 1000px;
	height: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
}
#hnn-simulation .simulation-content {
	min-width: 37%;
}
#hnn-simulation .simulation-content .simulation-header {
	margin-bottom: 26px;
}
#hnn-simulation .simulation-content .simulation-header h3{
	font-size: 40px;
	color: #3C3C3D;
	font-weight: 900;
}
#hnn-simulation .simulation-content .simulation-header p{
	font-size: 30px;
	color: #3C3C3D;
	font-weight: lighter;
}
#hnn-simulation .simulation-content .simulation-desc {
	font-size: 25px;
	color: #3C3C3D;
	font-weight: normal;
	margin-bottom: 23px;
}
#hnn-simulation .simulation-content .simulation-btn {
	background-color: #FF921B;
	padding: 9px 68px;
	border-radius: 50px; 
	color: #fff;
	font-size: 23px;
	font-weight: bold;
	cursor: pointer;
}

@media (max-width: 767px) {
	.bx-has-controls-direction{
		display: none;
	}
	#hnn-vis .hnn-vis p {
		font-size: 28px; 
	}
	#hnn-vis .hnn-vis p span {
		font-size:20px; 
	}
	#hnn-vis .hnn-vis button {
    padding: 8px 20px;
    font-size: 18px;
    font-weight: bold;
	}
	#hnn-simulation {
		height: unset;
		padding-top: 90px;
	}
	#hnn-simulation .hnn-inner{
		width: 100%;
		flex-flow: column;
		gap: 14px;
	}
	#hnn-simulation .simulation-content {
    min-width: unset;
	}
	#hnn-simulation .simulation-content .simulation-header {
    margin-bottom: 16px;
	}
	#hnn-simulation .simulation-content .simulation-header h3 {
    font-size: 28px;
		text-align: center;
	}
	#hnn-simulation .simulation-content .simulation-header p {
    font-size: 23px;
		text-align: center;
	}
	#hnn-simulation .simulation-content .simulation-desc {
    font-size: 20px;
    margin-bottom: 30px;
		text-align: center;
	}
	#hnn-simulation .simulation-content .simulation-btn {
    padding: 7px 40px;
    font-size: 18px;
		margin: 0 auto;
		display: block;
	}
	.hnn-inner img{
		object-position: center;
	}
}



#hnn-contact {
	width: 100%;
	padding: 47px 0;
	background: #EBEAD6;
}
#hnn-contact .hnn-inner {
	width: 1000px;
	margin: 0 auto;
}
#hnn-contact .contact-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
}
#hnn-contact .contact-link {
	display: flex;
	width: 295px;
	align-items: center;
	justify-content: center;
	padding: 32px 47px;
	box-sizing: border-box;
	border-radius: 5px;
	gap: 6px;
}
#hnn-contact .contact-link i {
	font-size: 21px;
}
#hnn-contact .contact-link span {
	font-size: 23px;
	font-weight: bold;
}
#hnn-contact .phone-link {
	background: #BFC448;
	color: #fff;
}
#hnn-contact .cs-link {
	background: #fff;
	color: #BFC448;
}

@media (max-width: 767px) {
	#hnn-contact {
    padding: 33px 20px;
		box-sizing: border-box;
	}
	#hnn-contact .hnn-inner {
    width: 100%;
	}
	#hnn-contact .contact-wrapper {
    gap: 12px;
	}
	#hnn-contact .contact-link {
		flex: 1;
    display: flex;
    width: unset;
		height: 58px;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 5px;
    gap: 6px;
	}
	#hnn-contact .contact-link i {
    font-size: 15px;
	}
	#hnn-contact .contact-link span {
    font-size: 16px;
	}

}







#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; background-size: 90%; /*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;}



@media (max-width: 767px) {
	#hnn-layer {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow-y: auto; /* 스크롤 허용 */
    -webkit-overflow-scrolling: touch; /* iOS 스크롤 부드럽게 */
    left: 0;
    top: 0;
    z-index: 9999;
    background: url(../images/layer-bg.png);
	}
	#hnn-layer .hnn-inner {
    width: 90%;
    padding: 0;
    margin: 0;
    transform: translate(-50%, -50%);
		position: relative;
	}
	#hnn-layer .hnn-close {
    right: 0;
		z-index: 1;
	}
	#hnn-layer .hnn-close img {
    width: 8.33vw;
	}
	#hnn-layer .hnn-tit p {
		display: none;
	}
	#hnn-layer .hnn-tit img {
		width: 33.33vw;
		max-width: 300px;
	}
	#hnn-layer .hnn-tit {
		display: flex;
		align-items: center;
		height: 8.33vw;
	}
	#hnn-layer .hnn-tit h2 {
		position: unset;
    left: 6px;
    bottom: 13px;
	}
	#hnn-layer .hnn-con {
    padding: 20px 10px 20px;
	}
	#hnn-par-lef {
    width: 100%;
		float: unset;
	}
	#hnn-par-lef h3, #hnn-par-rig h3 {
    font-size: 16px;
	}
	#hnn-par-lef h3 span, #hnn-par-rig h3 span {
    width: 100%;
	}
	#hnn-par-lef .hnn-par-tab {
    width: 100%;
		display: flex;
	}
	#hnn-par-lef .hnn-par-tab li a {
    width: 100% !important;
    line-height: 42px;
    text-indent: 0px;
		background: unset !important;
	}
	#hnn-par-lef .hnn-par-tab li a.active {
    background: #fff !important;
	}
	#hnn-par-lef .hnn-par-tab li {
    float: unset;
    flex: 1;
	}
	#hnn-par-lef .hnn-box {
		width: 100%;
		height: 170px;
	}
	#hnn-par-lef .hnn-box div {
		height: 100%;
	}
	#hnn-par-lef .hnn-box .v-bg1-1,
	#hnn-par-lef .hnn-box .v-bg1-2,
	#hnn-par-lef .hnn-box .v-bg1-3{
    background-size: 130px;
	}
	#hnn-par-lef .hnn-box .v-bg2-1,
	#hnn-par-lef .hnn-box .v-bg2-2,
	#hnn-par-lef .hnn-box .v-bg2-3{
		background-size: 110px;
	}
	#hnn-par-lef .hnn-box .v-bg3-1,
	#hnn-par-lef .hnn-box .v-bg3-2,
	#hnn-par-lef .hnn-box .v-bg3-3{
		background-size: 95px;
	}
	#hnn-par-lef .hnn-box div div{
		transform: translateX(-50%);
		margin-left: 0;

	}
	#hnn-par-lef .hnn-box div .glass{
		background-size: contain;
	}
	#hnn-par-lef .hnn-box #l-view1 .hnn-l-2 {
    height: 30px;
    top: 10px;
    width: 125px;
	}
	#hnn-par-lef .hnn-box #l-view1 .hnn-l-1 {
    height: 101px;
    top: 43px;
    width: 125px;
	}
	#hnn-par-lef .hnn-box #l-view2 .hnn-l-3 {
    height: 25px;
    top: 8px;
		width: 105px;
	}
	#hnn-par-lef .hnn-box #l-view2 .hnn-l-2 {
		height: 25px;
    top: 36px;
		width: 105px;
	}
	#hnn-par-lef .hnn-box #l-view2 .hnn-l-1 {
    height: 85px;
    top: 63.5px;
		width: 105px;
	}
	#hnn-par-lef .hnn-box #l-view3 .hnn-l-4 {
    height: 21px;
    top: 7px;
		width: 90px;
	}
	#hnn-par-lef .hnn-box #l-view3 .hnn-l-3 {
    height: 21px;
    top: 31px;
		width: 90px;
	}
	#hnn-par-lef .hnn-box #l-view3 .hnn-l-2 {
    height: 20px;
    top: 55px;
		width: 90px;
	}
	#hnn-par-lef .hnn-box #l-view3 .hnn-l-1 {
    height: 74px;
    top: 77.5px;
		width: 90px;
	}
	#hnn-par-lef .hnn-frame {
		height: unset;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 5px;
		white-space: nowrap;
	}
	#hnn-par-lef .hnn-frame p {
    font-size: 14px;
    position: unset;
    left: unset;
    top: unset;
	}
	#hnn-par-lef .hnn-frame ul {
    font-size: 14px;
    position: unset;
    left: unset;
    top: unset;
		display: flex;
		flex-wrap: wrap;
		align-items: start;
		gap: 3px;
	}
	#hnn-par-lef .hnn-frame ul li span{
    text-indent: -9999px;
		padding: 0;
		width: 20px;
		height: 20px;
	}
	#hnn-par-rig {
    width: 100%;
    float: unset;
	}
	#hnn-par-rig .hnn-par-tab {
    width: 100%;
		display: flex;
	}
	#hnn-par-rig .hnn-par-tab li {
    float: unset;
		flex: 1;
	}
	#hnn-par-rig .hnn-par-tab li a {
    width: 100% !important;
    line-height: 30px;
	}
	#hnn-par-rig .hnn-box {
    width: 100%;
    height: 136px;
	}
	#hnn-par-rig .hnn-box div {
    margin: 10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		gap: 5px;
	}
	#hnn-par-rig .hnn-box div .hnn-v-con {
		width: 55px;
    float: unset;
    margin-right: 0px;
    margin-bottom: 0px;
		box-sizing: border-box;
	}
	#hnn-par-rig .hnn-box div .hnn-v-con dt {
    height: 55px;
    box-sizing: border-box;
	}
	#hnn-par-rig .hnn-box div .hnn-v-con dt img{
		width: 100%;
	}
	#hnn-par-rig .hnn-box div .hnn-v-con dd {
    height: 13px;
		font-size: 10px;
	}


	#hnn-par-rig{
		/* display: none; */
	}
}