@charset "utf-8";

/* Web Font */

/* Noto Sans KR */
@font-face {
	font-family:'Noto Sans KR';
	font-weight:100; 
	src: url('/humanframe/global/assets/css/font//NotoSansKR-Thin.woff2') format('woff2'),
	url('/humanframe/global/assets/css/font/NotoSansKR-Thin.woff') format('woff'),
	url('/humanframe/global/assets/css/font/NotoSansKR-Thin.otf') format('opentype');
}

@font-face {
	font-family:'Noto Sans KR';
	font-weight:200; 
	src: url('/humanframe/global/assets/css/font/NotoSansKR-Light.woff2') format('woff2'),
	url('/humanframe/global/assets/css/font/NotoSansKR-Light.woff') format('woff'),
	url('/humanframe/global/assets/css/font/NotoSansKR-Light.otf') format('opentype');
}
@font-face {
	font-family:'Noto Sans KR';
	font-weight:300; 
	src: url('/humanframe/global/assets/css/font/NotoSansKR-DemiLight.ttf') format('truetype');
}

@font-face {
	font-family:'Noto Sans KR';
	font-weight:400;
	src: url('/humanframe/global/assets/css/font/NotoSansKR-Regular.woff2') format('woff2'),
	url('/humanframe/global/assets/css/font/NotoSansKR-Regular.woff') format('woff'),
	url('/humanframe/global/assets/css/font/NotoSansKR-Regular.otf') format('opentype');
}

@font-face {
	font-family:'Noto Sans KR';
	font-weight:500; 
	src: url('/humanframe/global/assets/css/font/NotoSansKR-Medium.woff2') format('woff2'),
	url('/humanframe/global/assets/css/font/NotoSansKR-Medium.woff') format('woff'),
	url('/humanframe/global/assets/css/font/NotoSansKR-Medium.otf') format('opentype');
}

@font-face {
	font-family:'Noto Sans KR';
	font-weight:600; 
	src: url('/humanframe/global/assets/css/font/NotoSansKR-SemiBold.ttf') format('truetype');
}
@font-face {
	font-family:'Noto Sans KR';
	font-weight:700; 
	src: url('/humanframe/global/assets/css/font/NotoSansKR-Bold.woff2') format('woff2'),
	url('/humanframe/global/assets/css/font/NotoSansKR-Bold.woff') format('woff'),
	url('/humanframe/global/assets/css/font/NotoSansKR-Bold.otf') format('opentype');
}

@font-face {
	font-family:'Noto Sans KR';
	font-weight:800; 
	src: url('/humanframe/global/assets/css/font/NotoSansKR-ExtraBold.ttf') format('truetype');
}
@font-face {
	font-family:'Noto Sans KR';
	font-weight:900; 
	src: url('/humanframe/global/assets/css/font/NotoSansKR-Black.woff2') format('woff2'),
	url('/humanframe/global/assets/css/font/NotoSansKR-Black.woff') format('woff'),
	url('/humanframe/global/assets/css/font/NotoSansKR-Black.otf') format('opentype');
}


/* Theme Settings */
* {
	box-sizing: border-box;
	word-break:keep-all;
}
body {
	font-family:'Noto Sans KR';
    letter-spacing: -0.05em;
    font-size:1.6rem;
	color:#181a1b;
}
a, a:hover, a:focus {text-decoration:none;}

/* button */
.button.color {border:1px solid #e4007f; color:#fff; background-color:#e4007f;}
.themeBgColor {background-color:#e4007f !important; color:#fff !important;}
.themeLineColor {background-color:#fff !important; color:#e4007f !important; border: 2px solid #e4007f !important;}
.tabStyle > li:after {border-color:#e4007f;}

.tabStyle > li a:hover, .tabStyle li a:focus, .tabStyle li a.active,
.tabStyle li.active a { border-color:#e4007f;  background-color:#e4007f ; font-weight:bold; color:#fff;}

#header .topNavSub li a[target='_blank']{
	padding-right:16px;
	position:relative;
}
#sideNav .navWrap > .lineMap > .depthWrap > .depthList > li > a[target='_blank']{
	padding-right:20px; position:relative;
}
#sideNav .navWrap > .lineMap > .depthWrap > .depthList > li > a[target='_blank'] > span::after,
#header .topNavSub li a[target='_blank']:after{
	display:block;
	content:'';
	background-image: url(/humanframe/theme/biz/assets/img/common/btnJumpBk.png);
	background-size:auto;
	background-position:center;
	background-repeat:no-repeat;
    width: 13px;
    height: 13px;
    position: absolute;
    top: 50%;
    right: 0;
    transition: 0.2s;
    transform: translateY(-50%);
}
#sideNav .navWrap > .lineMap > .depthWrap > .depthList > li > a[target='_blank'] > span::after{
	width:12px; height:12px; background-size:100%; right:4px;
}

#header .topNavSub li a:hover[target='_blank']:after{
	background-image: url(/humanframe/theme/biz/assets/img/common/btnJumpPp.png);
	transition:0.2s;
}
#sideNav .navWrap > .lineMap > .depthWrap > .depthList > li > a:hover[target='_blank'] > span::after{
	background-image: url(/humanframe/theme/biz/assets/img/common/btnJumpPp.png);
	transition:0.2s;
}
/*접근성 텍스트 안보이게*/

.blind_txt{
	position:absolute;
	clip:rect(0 0 0 0);
	width:1px;
	height:1px;
	margin:-1px;
	left:-9999em;
}
/*텍스트 한줄만 나오게*/
.textLine1{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.textLine2{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.textLine2-1{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.textLine3{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

@media all and (max-width:1024px) {
	.textLine2-1{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
}

/* Layout */
#header {
	position:fixed;
	top:0; left:0;
	z-index:9999;
	width:100%;
	background:#fff;
}
#header .headerBody {
	position: relative;
	height:100px;
	border-bottom: 1px solid #dddddd;
}
#header .headerBody .headerInnr{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
	height:100%;
	position:relative;
    width:calc(100% - 200px);
    margin: 0 auto;
}
#header .headerBody .headerInnr:after{
	display:none;
}
#header .headerBody .logo{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0 20px;
}
.logoBusan{
    display: block;
    width: 167px;
    height: 42px;
}
.logoBiz{
    font-size: 2.6rem;
    font-weight:800;
	position:relative;
	padding-left:20px;
}
.logoBiz::before{
	display:block;
	content:'';
	width:1px;
	height:35px;
	background:#cccccc;
	position:absolute;
	left:0;
	top:-4.5px;
}


#header .btnNav {display:none;}
#header #topNav > .btnClose {display:none;}
#header #topNav ul.topNavMenus {
    display:flex;
    flex-direction:row;
    justify-content: flex-end;
    align-items: center;
    gap: 0 70px;
}
#header #topNav ul.topNavMenus > li{
	position:relative;
}
#header #topNav ul.topNavMenus > li > a,
#header #topNav ul.topNavMenus > li > span.topMenuTitle {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
   	height:100px;
   	padding:0;
   	color:#333;
   	font-size:2rem;
   	font-weight:500;
   	letter-spacing: -1px;
   	line-height:1;
   	text-decoration:none;
   	transition: all 0.1s;
}
#header #topNav ul.topNavMenus > li > a,
#header #topNav ul.topNavMenus > li > span.topMenuTitle > span,
#header #topNav ul.topNavMenus > li > span.topMenuTitle > strong {position:relative; display:table-cell; vertical-align: middle;}
#header #topNav ul.topNavMenus > li:hover > a span,
#header #topNav ul.topNavMenus > li:focus > a span,
#header #topNav ul.topNavMenus > li.active > a span,
#header #topNav ul.topNavMenus > li:hover > span.topMenuTitle,
#header #topNav ul.topNavMenus > li:focus > span.topMenuTitle,
#header #topNav ul.topNavMenus > li.active > span.topMenuTitle,
#header #topNav ul.topNavMenus > li:hover > span.topMenuTitle span,
#header #topNav ul.topNavMenus > li:focus > span.topMenuTitle span,
#header #topNav ul.topNavMenus > li.active > span.topMenuTitle span {color:#5a359e;}
#header #topNav ul.topNavMenus > li .topNavSub {
	display:none; 
	position:absolute;
	z-index:10;
	top:100%;
	left:50%;
	transform:translate(-50%, 0);
	width:auto;
	white-space:nowrap;
	text-align:left;
padding-top:14px;
}
/* #header #topNav ul.topNavMenus > li:last-child .topNavSub{
	left:inherit;
	right:0;
} */
#header #topNav ul.topNavMenus > li .topNavSub > ul{
	display:flex;
	justify-content:flex-start;
    flex-direction: column;
    width: auto;
    background: #fff;
    padding: 30px 20px;
    border-radius: 20px;
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2);
    align-items: center;
    gap: 32px 0;
    margin: 0 auto;
}
#header #topNav ul.topNavMenus > li .btnMenuDropDown {display:none;}
#header #topNav ul.topNavMenus > li:last-child > a:after {display:none;}
#header #topNav ul.topNavMenus > li .topNavSub > ul > li {
	padding:0px 0;
	line-height:1em;
	white-space:nowrap;
}
#header #topNav ul.topNavMenus > li .topNavSub > ul > li > a,
#header #topNav ul.topNavMenus > li .topNavSub > ul > li > a > strong{
   font-size:1.8rem;
   line-height:1em;
   font-weight:500;
   position:relative;
   display:block;
}
#header #topNav ul.topNavMenus > li .topNavSub > ul > li > a:hover > strong,
#header #topNav ul.topNavMenus > li .topNavSub > ul > li > a:focus > strong{color:#5a359e;}
#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul {display:none; width:100%;}
#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul > li {font-size:0.9em; margin-bottom:4px;}
#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul > li > a:hover,
#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul > li > a:focus {font-weight:bold;}
#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul > li > ul {margin:10px 0 0 5px; display:none;}
#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul > li > ul > li {font-size: 0.9em;}
#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul > li > ul > li:before {content:""; display:inline-block; width:2px; height:2px; background:#666; vertical-align: middle; margin-right:3px;}
#header #topNav ul.topNavMenus > li .topNavSub > ul > li:nth-child(5n+1) {clear:left;}

#header .topNavBackDv {
       background: #efeaf4;
}
#header .topNavBackDv.opened{
	display:block;
}


#container {position:relative; overflow:hidden; padding-top:100px;}
#contents:after {content:''; display:block; clear:both; font-size:0; line-height:0;}


#container .containerInnr {
	position:relative;
	width:100%;
	
}
#sideNav{
	display:block;
	width:100%;
	margin:0 auto;
	background-color:#371d68;
}
.navWrap{
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:center;
	width:calc(100% - 200px);
	margin:0 auto;
	background-image:url(/humanframe/theme/biz/assets/img/common/subNavBg.png);
	background-size:auto;
	background-position: right bottom;
	background-repeat:no-repeat;
    padding: 74px 0 74px;
    gap: 30px 0;
}
.navWrap > .sideNavTit{
	display:block;
	text-align:center;
}
.navWrap > .sideNavTit > span{
    color: #fff;
    font-size: 5rem;
    font-weight: 700;
    display: block;
    line-height: 1em;
}
#sideNav .sideNavMenu {
	display:block;
	width:100%;
    background: none;
    padding: 0;
    margin:0 auto;
}
#sideNav .navWrap > .lineMap {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#sideNav .navWrap > .lineMap span{
	color:#fff;
	font-size:1.8rem;
	line-height:1em;
	display:block;
}
#sideNav .navWrap > .lineMap > .home{
    background-image: url(/humanframe/theme/biz/assets/img/common/iconNavHome.png);
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
    width: 14px;
    height: 14px;
    margin-right:20px;
    display:block;
}
#sideNav .navWrap > .lineMap > .depthWrap{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0 58px;
    position: relative;
    padding: 0 20px;
}
#sideNav .navWrap > .lineMap > .depthWrap:nth-child(4){
	padding-right:0;
}
#sideNav .navWrap > .lineMap > .depthWrap::before{
	display:block;
	content:'';
	width:1px;
	height:16px;
	background:rgba(255,255,255,0.5);
	position:absolute;
	left:0;
	top:50%;
	transform:translate(0, -50%);
}
#sideNav .navWrap > .lineMap > .depthWrap > button{
    display: block;
    width: auto;
    padding-right: 60px;
    position:relative;
}

#sideNav .navWrap > .lineMap > .depthWrap > button::after{
	display:block;
	content:'';
	width:16px;
    height: 16px;
    background-image: url(/humanframe/theme/biz/assets/img/common/btnMenuOpenWh.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
    position:absolute;
    right:0;
    top:50%;
    transform:translate(0, -50%) rotate(0deg);
	transition:0.2s;
}
#sideNav .navWrap > .lineMap > .depthWrap > button.on::after{
    transform:translate(0, -50%) rotate(540deg);
	transition:0.2s;
}
#sideNav .navWrap > .lineMap > .depthWrap > .depthList{
	display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    position: absolute;
    top: calc(100% + 13px);
    left: 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2);
    z-index: 10;
    width: 100%;
    overflow:hidden;
    height:auto;
    transform: translateY(-10px);
    max-height: 0; 
	transition:0.3s;
}
#sideNav .navWrap > .lineMap > .depthWrap > .depthList.on{
    transform: translateY(0);
	max-height: 500px;
	transition:0.3s;
	
}
#sideNav .navWrap > .lineMap > .depthWrap > .depthList > li{
	display:block;
}
#sideNav .navWrap > .lineMap > .depthWrap > .depthList > li > a{
	display:block;
	color:#222;
	transition:0.2s;
}
#sideNav .navWrap > .lineMap > .depthWrap > .depthList > li > a > span{
	padding:13px 20px 13px 11px;
	font-size:1.8rem;
	line-height:1em;
	color:#222;
	display:inline-block;
	position:relative;
	word-break:break-all;
}
#sideNav .navWrap > .lineMap > .depthWrap > .depthList > li > a:hover{
	background:#efeaf4;
	transition:0.2s;
}
#sideNav .navWrap > .lineMap > .depthWrap > .depthList > li > a:hover > span{
	color:#652d90;
	transition:0.2s;
}
#sideNav .sideNavMenu > ul > li {display:block; position:relative; margin-top:3px;}
#sideNav .sideNavMenu > ul > li:first-child {margin-top:0;}
#sideNav .sideNavMenu > ul > li li {position:relative;}
#sideNav .sideNavMenu > ul > li > a {display:block; position:relative; padding:9px 30px 9px 15px; color:#757575; font-size:1.15em; line-height:1.2; font-weight:bold; text-align:left; text-decoration:none; -webkit-box-sizing:border-box; box-sizing:border-box;}
#sideNav .sideNavMenu > ul > li:hover > a,
#sideNav .sideNavMenu > ul > li > a:focus {color:#e4007f;}
#sideNav .sideNavMenu > ul > li .btnMenuDropDown {display:block; position:absolute; top:0; right:0; width:30px; height:30px; overflow:hidden; text-indent:-9999px;}
#sideNav .sideNavMenu > ul > li .btnMenuDropDown:before {content:''; position:absolute; top:50%; left:50%; margin:-4px 0 0 -2.5px; width:5px; height:8px; text-align:center; background:url('/humanframe/global/assets/img/common/bg_arrow_sidenav_depth1.png') no-repeat 0 0;}
#sideNav .sideNavMenu > ul > li .btnMenuDropDown:hover:before,
#sideNav .sideNavMenu > ul > li .btnMenuDropDown:focus:before,
#sideNav .sideNavMenu > ul > li.active > .btnMenuDropDown:before {transform: rotate(90deg);}
#sideNav .sideNavMenu > ul > li > .btnMenuDropDown {top:5px; right:5px;}
#sideNav .sideNavMenu > ul > li.active > a {color:#e4007f;}
#sideNav .sideNavMenu > ul > li.active > ul {display:block;}
#sideNav .sideNavMenu > ul > li > ul {display:none; position:relative; padding:7px 5px 13px; overflow:hidden;}
#sideNav .sideNavMenu > ul > li > ul > li {position:relative; padding:6px 0 6px 20px;}
#sideNav .sideNavMenu > ul > li > ul > li:first-child {padding-top:0}
#sideNav .sideNavMenu > ul > li > ul > li:last-child {padding-bottom:0}
#sideNav .sideNavMenu > ul > li > ul > li > a {display:block; color:#757575;}
#sideNav .sideNavMenu > ul > li > ul > li.active > a,
#sideNav .sideNavMenu > ul > li > ul > li:hover > a,
#sideNav .sideNavMenu > ul > li > ul > li > a:focus {color:#333; font-weight:bold;}
#sideNav .sideNavMenu > ul > li > ul > li.active > .btnMenuDropDown:before {margin:-2.5px 0 0 -4px; width:8px; height:5px; background-position:-40px 0;}
#sideNav .sideNavMenu > ul > li > ul > li.active > ul {display:block;}
#sideNav .sideNavMenu > ul > li > ul > li > ul {display:none; padding:6px 14px; margin:0 0 4px 0; overflow:hidden; background:#f0f0f0; border-radius:3px; font-size:90%;}
#sideNav .sideNavMenu > ul > li > ul > li > ul > li > a {padding:3px 16px 3px 0;display:block; color:#666;}
#sideNav .sideNavMenu > ul > li > ul > li > ul > li.active > a,
#sideNav .sideNavMenu > ul > li > ul > li > ul > li:hover > a,
#sideNav .sideNavMenu > ul > li > ul > li > ul > li > a:focus {color:#333; font-weight:bold;}
#sideNav .sideNavMenu > ul > li > ul > li > ul > li > ul > li { padding:3px 8px 2px 10px; position:relative; }
#sideNav .sideNavMenu > ul > li > ul > li > ul > li > ul > li a:before { content:""; width:3px; height:3px; position:absolute;top:10px; /*top:47% !important;*/ left:5% !important; background:#c7c7c7; }
#sideNav .sideNavMenu > ul > li > ul > li > ul > li > ul > li a { padding-left:4px; color:#777; }
#sideNav .sideNavMenu > ul > li > ul > li > ul > li > ul > li.active > a,
#sideNav .sideNavMenu > ul > li > ul > li > ul > li > ul > li:hover > a,
#sideNav .sideNavMenu > ul > li > ul > li > ul > li > ul > li > a:focus {color:#333; font-weight:bold;}
#sideNav .sideNavMenu > ul > li > ul > li > ul > li > .btnMenuDropDown { width:25px; height:25px; right:0; }
#sideNav .sideNavMenu > ul > li > ul > li > ul { padding:6px 3px 6px 14px !important; }
#sideNav .sideNavMenu > ul > li > ul > li > ul > li > ul > li:first-child { margin-top:4px; }
#sideNav .sideNavMenu > ul > li > ul > li > ul > li > ul > li:last-child { margin-bottom:4px; }
#container .containerInnr #contents {
	display:block;
	width:100%;
	margin:0 auto;
	padding:100px 0 50px;
	max-width:1440px;
}

#contents .boardWrap,
#contents .content{
    display: block;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}
#contents .titPage {
	font-size:4.2rem;
	line-height:1em;
	margin-bottom:40px;
	text-align:center;
	display:block;
	width:100%;
	max-width:1440px;
	margin:0 auto;
}
#pageSatisfy{
	display:block;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}
footer {
	background:#353b45;
	color:#d1d2d3;
}
footer .footerInnr {
    padding: 40px 0 40px;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 1.6rem;
    line-height: 1em;
}
.footer_logo{
    display: block;
    width: 129px;
    height: 33px;
    text-indent: -9999px;
    background: url(/humanframe/global/assets/img/common/logo_kor_line_w.svg) no-repeat center center / contain;
}

footer .footerInnr .footerInfo{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
}
address{
	color:#fff;
	opacity:0.7;
}
.copyright{
	margin-top:10px;
	color:#fff;
	opacity:0.7;
}





@media all and (max-width:1640px){
	.navWrap,
	#header .headerBody .headerInnr{
		width:100%;
		max-width:1440px;
	}
	#header #topNav ul.topNavMenus{
		gap:0 45px;
	}
	.logoBusan{
		width: 140px;
    	height: 36px;
	}
}
@media all and (max-width:1504px){
	#header .headerBody .headerInnr{
		max-width:inherit;
		padding:0 32px;
	}
	.navWrap{
		padding:45px 32px 35px;
        background-size: auto 160px;
	}
	#container .containerInnr #contents{
		padding:100px 32px 50px;
	}
}
@media all and (max-width:1340px){
	#header #topNav ul.topNavMenus{
		gap:0 24px;
	}
}
@media all and (max-width:1280px){
	#header .headerBody .logo{
		gap:0 10px;
	}
	.logoBusan{
		width: 120px;
    	height: 30px;
	}
	.logoBiz{
	    font-size: 2.2rem;
	    padding-left: 10px;
	}
	#header #topNav ul.topNavMenus{
		gap:0 16px;
	}
	#header #topNav ul.topNavMenus > li > a{
		font-size:1.7rem;
	}
}
	

@media all and (max-width:1200px) {
	.navWrap{
        background-size: auto 140px;
	}
}
@media all and (max-width:1024px) {
	.logoBusan{
		width:100px;
		height:26px;
	}
	.logoBiz{
		font-size:1.9rem;
	}
	.logoBiz::before{
		height:22px;
		top:0;
	}
	#header .btnNav {position:relative; display:inline-block; vertical-align:top; width:60px; height:100%; text-indent:-9999px;}
	#header .btnNav > span {position: absolute;display:block; width:22px; height:22px; left:50%; top:50%; transform:translate(-50%, -50%);}
	#header .btnNav .btnBar {position: absolute; left:0; display:block; width:100%; height:2px; background:#333; opacity:1; transition: all 0.2s;}
	#header .btnNav .btnBar:nth-of-type(1) {top:0;} 
	#header .btnNav .btnBar:nth-of-type(2) {top:10px;}
	#header .btnNav .btnBar:nth-of-type(3) {top:20px;}
	#header .btnNav.opened .btnBar:nth-of-type(1){transform: rotate(45deg); top:50%}
	#header .btnNav.opened .btnBar:nth-of-type(2){left:-50px; opacity:0;}
	#header .btnNav.opened .btnBar:nth-of-type(3){transform: rotate(-45deg); top:50%}
	#header #topNav {float:right;}
	#header #topNav ul.topNavMenus > li > .btnMenuDropDown {position:relative; display:block; width:54px; height:40px; text-align:center; text-indent:-9999px;}
	#header #topNav ul.topNavMenus > li > .btnMenuDropDown:before {content:''; position:absolute; top:50%; left:50%; margin:-9px 0 0 -9px; width:18px; height:18px; background:url('/humanframe/global/assets/img/common/sp_ico_header.png') no-repeat -90px 0; background-size:150px auto;}
	
	#header #topNav > .btnClose {position:absolute; background-color:#fff;}
	#header #topNav ul.topNavMenus > li > .btnMenuDropDown + .topNavSub .btnMenuDropDown {text-indent:-99999px;}
	#header #topNav ul.topNavMenus > li > .btnMenuDropDown {transition: all 0.25s;}
	
	#header .topNavBackDv.opened {display:block;}
	
	.navWrap{
        background-size: auto 100px;
	}
	.navWrap > .sideNavTit > span{
		font-size:4.2rem;
	}
	#sideNav .navWrap > .lineMap span{
		font-size:1.6rem;
	}
	#sideNav .navWrap > .lineMap > .depthWrap > .depthList > li > a{
		font-size:1.6rem;
	}
	#container {position:relative; overflow:hidden; }
	#container .containerInnr #contents{
		padding:50px 32px 30px;
	}
	#contents .titPage {
		font-size:3.2rem;
    	margin-bottom: 30px;
	}
	footer .footerInnr{
		padding:42px 0 37px;
	}
	.footer_logo{
		margin-bottom:24px;
	}
	.copyright{
		margin-top:12px;
	}
}


@media all and (min-width:769px){ /* pc & tablet common */
	
    #contents .noAsideContainer .certifyWrap .certifyBox.nonmember {margin-left:0;}
    #contents .noAsideContainer .certifyWrap .certifyBox.member {margin-left:2%}
    
}

@media all and (max-width:1024px) {
	body.opened-topNav {overflow-y:hidden;}
    #header {background:#fff;}
    #header .headerBody {height:60px;}
    #header .btnNav {position:absolute; top:50%; right:0; transform: translateY(-50%);}
    #header #topNav {
	    display:none; 
	    position:fixed; 
	    background:#fff; 
	    top:60px; 
	    bottom:0; 
	    right:0;
	    max-width:400px; 
	    width:100%; 
	    padding:0; 
	    z-index: 999; 
	    opacity:0; 
        transform: translateX(100%);
	    transition: all 0.2s;
    }
    #header #topNav.opened {display:block;}
    #header #topNav.fadein {
    	opacity: 1; 
        transform: translateX(0);
	    transition: all 0.2s;
	}
    #header #topNav > .topNavInnr {height:100%; overflow:auto;}
    #header #topNav ul.topNavMenus {
    	width: 100%;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 0 20px;
    }
    #header #topNav ul.topNavMenus > li {
	    position:relative; 
	    border-bottom:1px solid #e5e5e5;
	    width:100%;
	    height:auto !important;
    }
    #header #topNav ul.topNavMenus > li.active{
    	border-bottom:0;
    }
    #header #topNav ul.topNavMenus > li.topNavArea {padding-bottom: 20px;}
	#header #topNav ul.topNavMenus > li > a,
    #header #topNav ul.topNavMenus > li > span.topMenuTitle {
	    display:block; 
	    position:relative;
	    padding:29px 54px 29px 10px; 
	    font-size:2.2rem; 
	    line-height:1; 
	    text-decoration:none;
	    height:auto;
    }
	#header #topNav ul.topNavMenus > li > a > strong,
    #header #topNav ul.topNavMenus > li > span.topMenuTitle > span,
    #header #topNav ul.topNavMenus > li > span.topMenuTitle > strong {padding: 5px 0;}
    #header #topNav ul.topNavMenus > li > .btnMenuDropDown {
    	position:absolute;
    	top:0;
    	right:0;
    	width:38px;
    	height:80px;
    	text-align:center;
    	display:block;
   	}
	#header #topNav ul.topNavMenus > li.hover > a,
	#header #topNav ul.topNavMenus > li.hover > span.topMenuTitle {color:#e4007f;}
    #header #topNav ul.topNavMenus > li.hover .topNavSub {display:block;}
    #header #topNav ul.topNavMenus > li .topNavSub{
    	position:static;
    }
    
    /* gnb mobile */
	#header #topNav ul.topNavMenus .btnMenuDropDown {display:block;overflow:hidden;position:absolute; top:0; right:0;text-indent:-9999px;}
	
	#header #topNav ul.topNavMenus > li > .btnMenuDropDown:before {
		content:''; 
		position:absolute; 
		top:50%; 
		left:50%; 
		margin:-9px 0 0 -9px; 
		width:18px; 
		height:18px; 
		background-image:url(/humanframe/theme/biz/assets/img/common/btnMenuOpen.png);
		background-repeat:no-repeat;
		background-size:auto;
		background-position:center;
    	transition:0.2s;
	}
    #header #topNav ul.topNavMenus > li.active.activeHover > .btnMenuDropDown:before,
    #header #topNav ul.topNavMenus > li.hover > .btnMenuDropDown:before {
    	transform:rotate(540deg);
    	transition:0.2s;
    }
	#header #topNav ul.topNavMenus > li.active.activeHover .topNavSub {
		display:block;
        position: static;
        height:auto;
        padding:0;
        transform: inherit;
	}
	#header #topNav ul.topNavMenus > li .topNavSub {
		display:none;
    	position: static;
    	height:0;
   	}
	#header #topNav ul.topNavMenus > li .topNavSub > ul{
        align-items: flex-start;
        background: #f7f7fa;
        padding: 30px;
        gap: 27px 0;
        box-shadow:inherit;
        border-radius:0;
        
	}
	#header #topNav ul.topNavMenus > li .topNavSub > ul > li {
		height:auto !important; 
		position:relative; 
		padding:0;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        flex-wrap: wrap;
	}
	#header #topNav ul.topNavMenus > li .topNavSub li {position:relative;}		
	#header #topNav ul.topNavMenus > li .topNavSub li > ul { display:none;}
	#header #topNav ul.topNavMenus > li .topNavSub li.active > ul { display:block;
        width: 100%;
        margin-bottom: 0;
        padding: 0;
        margin-top: 8px;
	}
	/* 하위메뉴보기버튼 */
	#header #topNav ul.topNavMenus > li > .btnMenuDropDown + .topNavSub .btnMenuDropDown {display: block;position: absolute;top:0;right:0;overflow: hidden; text-indent: -9999px;}
	#header #topNav ul.topNavMenus > li > .btnMenuDropDown + .topNavSub .btnMenuDropDown:before {content: "";display: block;z-index:1;position: absolute;width: 20px;height:20px;right:0;top:0;vertical-align:top;}
	#header #topNav ul.topNavMenus > li > .btnMenuDropDown + .topNavSub > ul > li > .btnMenuDropDown {
		width:20px;
		height:20px;
		background:url(/humanframe/global/assets/img/gnb_depth2_arw_up.png) no-repeat 50% 50%;
        position: static;
     }
	#header #topNav ul.topNavMenus > li > .btnMenuDropDown + .topNavSub > ul > li.active > .btnMenuDropDown {background:url(/humanframe/global/assets/img/gnb_depth2_arw_down.png) no-repeat 50% 50%;}
	#header #topNav ul.topNavMenus > li > .btnMenuDropDown + .topNavSub > ul > li > ul > li > .btnMenuDropDown {margin-top:6px;right:0;width:20px;height:20px;background:url(/humanframe/global/assets/img/gnb_depth2_arw_up.png) no-repeat 50% 50%;opacity:0.6;}	
	#header #topNav ul.topNavMenus > li > .btnMenuDropDown + .topNavSub > ul > li > ul > li.active > .btnMenuDropDown {background:url(/humanframe/global/assets/img/gnb_depth2_arw_down.png) no-repeat 50% 50%;}
	#header #topNav ul.topNavMenus > li > .btnMenuDropDown + .topNavSub > ul > li > ul > li > ul > li > .btnMenuDropDown {display:none;margin-top:6px;width:20px;height:20px;background:url(/humanframe/global/assets/img/gnb_depth4_arw_up.png) no-repeat 50% 50%;}
	/* depth02 */
	#header #topNav ul.topNavMenus > li .topNavSub > ul > li > a {
        font-size: 1.8rem;
        color: #000;
        font-weight: 400;
        flex: 1 1 0;
	}
	#header #topNav ul.topNavMenus > li .topNavSub > ul > li > a > strong{
		font-weight:400;
	}
	#header #topNav ul.topNavMenus > li .topNavSub > ul > li.active > a{
		color:#5a359e;
	}
	  
	/* depth03 */
	#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul {margin-bottom:10px;}
	#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul > li {
        padding: 0;
        margin:0;
    }
	#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul > li > a {
        padding: 8px 8px 8px 24px;
        color: #666;
        font-size: 16px;
        position:relative;
        display:block;
    }	
	#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul > li > a::before{
		display:block; 
		content:''; 
		widht:8px; 
		height:1px; 
		background:#ddd; 
		position:absolute; 
		left:0; 
		top:50%; 
		margin-top:-0.5px;
	}
	#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul > li.active > a {font-weight:700;}
	/* depth04 */
	#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul > li > ul {background:#f0f0f0; border-radius:4px; margin-bottom:4px; padding:10px 12px 10px 24px;}
	#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul > li > ul > li {padding:0 0;}
	#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul > li > ul > li > a { padding:6px 0;font-size:16px; font-weight:500;}
	/* depth05 */
	#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul > li > ul > li > ul {display:block !important;margin-bottom:10px;}
	#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul > li > ul > li > ul > li{padding:0 12px;}
	#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul > li > ul > li > ul > li > a { padding:2px 0;font-size:14px;}
	#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul > li > ul > li > ul > li.active > a { color:#333;}
	/* depth06 */
	#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul > li > ul > li > ul > li > ul {display:block !important; padding:0 8px;}
	#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul > li > ul > li > ul > li > ul > li {border-bottom:1px solid #dbdbdb;}	
	#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul > li > ul > li > ul > li > ul > li > a { padding:2px 0; font-size:13px;}
	/* depth07 */	
	#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul > li > ul > li > ul > li > ul > li > ul {display:block !important;}
	#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li { border-bottom:1px solid #dbdbdb;}
	#header #topNav ul.topNavMenus > li .topNavSub > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a { padding:2px 0; font-size:13px;}
    
    #container {padding-top: 60px;}
}

@media all and (min-width:769px) and (max-width:1024px) { /* tablet only ver */
    #header #topNav > .topNavInnr {position:relative;}
    #header #topNav.opened {display:block;}
    #header .topNavBackDv {top:120px; display:none;}
    #header .topNavBackDv .topNavTit {display:none;}
    

    
}
@media all and (max-width:768px) { /* mobile ver */
    #header .headerBody .headerInnr {
        padding: 0 20px;
    }
	#header .headerInnr {background:#fff;}
	#header .logo img {width:120px;}
    #header #topNav {border-top:1px solid #e6e6e6; background:#fff;}
    #header #topNav > .topNavInnr {padding: 0; height: calc(100% - 61px);}
	
	.navWrap{
        background-size: auto 80px;
	}
	.navWrap > .sideNavTit > span{
		font-size:3rem;
	}
	#sideNav .navWrap > .lineMap span{
		font-size:1.4rem;
	}
	#sideNav .navWrap > .lineMap > .depthWrap > .depthList > li > a > span{
		font-size:1.4rem; letter-spacing:-0.13em;
	}
	#container .containerInnr #contents{
		padding:28px 20px 30px;
	}
	#contents .titPage {
		font-size:2.8rem;
    	margin-bottom: 20px;
	}
	footer .footerInnr{
		padding:37px 20px;
		font-size:1.4rem;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
	}
	footer .footerInnr .footerInfo{
		align-items:center;
		text-align:center;
	}
	.footer_logo{
		margin-bottom:19px;
	}
	.copyright{
		margin-top:10px;
	}
	
    
}
@media all and (max-width:580px) {
    .navWrap {
        background-position: right -50px bottom;
    }
}
@media all and (max-width:480px) {
    #header .headerBody .headerInnr {
        padding: 0 16px;
    }
	#sideNav .navWrap > .lineMap > .depthWrap{
		gap:0 30px;
        padding: 0 16px;
	}
	#container .containerInnr #contents{
		padding:30px 16px 20px;
	}
	footer .footerInnr{
		padding:37px 16px;
	}
	.paginate .number{
		width:auto !important;
	}
}
@media all and (max-width:360px) {
	#sideNav .navWrap > .lineMap{
	    flex-direction: column;
	    justify-content: flex-start;
	    align-items: center;
	    gap: 12px;
    }
    #sideNav .navWrap > .lineMap > .depthWrap{
    	padding:0;
    }
    #sideNav .navWrap > .lineMap > .depthWrap::before{
    	display:none;
    }
}






.pc{
	display:block;
}
.mobile768{
	display:none;
}
@media all and (max-width:768px) {
	.pc{
		display:none;
	}
	.mobile768{
		display:block;
	}
}