@charset "utf-8";

/* 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: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-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:700; 
	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');
}

* {margin: 0; padding: 0; list-style-type: none; box-sizing: border-box; letter-spacing: -0.05em}
a {text-decoration: none; color: #121212;}
html {position: relative; width:100%; height:100%; font-family: "Noto Sans KR", sans-serif; font-size: 0.625em; font-weight:400; max-width:1920px; min-width:320px; margin:0 auto;}
body {position: relative; width:100%; height:100%; font-size: 1.9rem; line-height:1.4; color:#121212; overflow-x: hidden; transition: 0.4s;}

select, input, textarea, button {font-family:inherit;}
/* input, textarea {font-weight:100;} */
img {vertical-align: top; image-rendering: -webkit-optimize-contrast;}
img.logo_w {width: 146px;}
a, a:hover, a:focus {text-decoration:none;}
br {color:transparent; opacity:0;}

.pc{display:block;}
.tab{display:none;}
.mobile-768{display:none;}
.mobile-480{display:none;}
.mobile-340{display:none;}

#header {position:fixed; z-index:100; top:0; left:0; right:0;}
#header.active {background:#fff; border-bottom:1px solid #ccc;}
#header.hide{background:#fff;}


.header-body{display: block; width:100%; margin:0 auto;}
.header-body .header-body-inner{ display:flex; flex-direction: row; justify-content: space-between; align-items:stretch; width:100%; max-width:1600px; margin:0 auto; position: relative;}

#header h1.logo{display: flex; flex-direction: row; justify-content: flex-start; align-items: center; }
#header h1.logo a{display: block; width: 253px; height: 81px; background-image: url(/humanframe/theme/hahacampus/assets/img/common/logoHhc.png); background-size: 100%; background-repeat: no-repeat; background-position: center;}

.buttonBx{display:none;}
.header-nav-btn {display:none;}


.header-nav {width:100%;}
.header-nav .header-menu {display:flex; flex-direction:row; justify-content:flex-end; align-items:center;}
.header-nav .header-menu .btn-menudrop {display:none;}
.header-nav .header-menu > li {position:relative; width:16.6666%;}
.header-nav .header-menu > li > a {display:block; font-size:2.5rem; line-height:1em; padding:45px 0.5em; font-weight:600; white-space:nowrap; position:relative; text-align:center;}
.header-nav .header-menu > li > .sub-menu > ul:before {content:""; display:block; position:absolute; top:0; left:50%; width:0; height:5px; background:#df3c6e; transition: all 0.5s ease;}
.header-nav .header-menu > li:hover > .sub-menu > ul:before,
.header-nav .header-menu > li.current > a:before {width:100%; left:0;}
header .header-nav .header-menu > li > .sub-menu {position:absolute; transition: all 0.5s ease; top:100%; left:0; right:0; border-right:1px solid #ccc; overflow:hidden; height:0;}
header.active .header-nav .header-menu > li > .sub-menu {visibility:visible; height:auto;  transition: all 0.5s ease; }
.header-nav .header-menu > li:first-child > .sub-menu{border-left:1px solid #ccc;}
.header-nav .header-menu > li > .sub-menu a {display:block; word-break:keep-all; line-height:1.2;}
.header-nav .header-menu > li > .sub-menu a:hover,
.header-nav .header-menu > li > .sub-menu a:focus,
.header-nav .header-menu > li > .sub-menu li.active > a {color:#e56089;}

.header-nav .header-menu > li.hover >  a > span{color:#df3c6e;}
.header-nav .header-menu > li > .sub-menu > ul {padding: 44px 16px 44px 39px; height:100%; display:flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap:30px 0;}
.header-nav .header-menu > li:hover > .sub-menu > ul{background:#fbf2f5;}
.header-nav .header-menu > li > .sub-menu > ul > li > a {font-size:2rem; font-weight:500; line-height:1em;}
.header-nav .header-menu > li > .sub-menu > ul > li > ul {display:none; width:100%;}
.header-nav .header-menu > li > .sub-menu > ul > li > ul > li {padding-top:0.5em;}
.header-nav .header-menu > li > .sub-menu > ul > li > ul > li > a {	font-size:1.6rem; color:#666;	position:relative;padding-left:12px;}
.header-nav .header-menu > li > .sub-menu > ul > li > ul > li > a::before{display:block; content:'-'; position:absolute; top:0; left:0;}
.header-nav .header-menu > li > .sub-menu > ul > li > ul > li > ul {display:none;}

#nav-back {visibility:hidden; height:0; overflow:hidden; position:fixed; top:115px; left:0;	right:0;	border-bottom:1px solid #ccc; background:#fff; z-index:12; transition: all 0.5s ease;}

#container .container-inner {background:#fff;}


#footer {background: #f2f2f2; padding: 0; color: #222; display:block; width:100%; margin:0 auto;}
.footer-inner{display:flex; flex-direction: row; justify-content: space-between; align-items:stretch; width:100%; max-width:1600px; margin:0 auto; padding:43px 0 57px; line-height:1em;}
.footerLeft{display:block;}
.footerLeft .address{margin-bottom: 13px;}
.footerLeft .contact{display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 0 17px; margin-bottom:26px;}
.footerLeft .contact > li{display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 8px; padding-right: 16px; position: relative;}
.footerLeft .contact > li:first-child::after{display:block; content:''; width:1px; height:17px; background:#8d8d8d; position:absolute; top:2px; right:0;}
.footerLeft .contact > li > .tit{font-weight: 600;}
.footerLeft .contact > li > .info{font-weight: 500;}
.footerLeft .copyright{font-size:1.6rem; font-weight:600;}
.footerRight{display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end;}
.footerRight .logoBx{margin-bottom: 26px;}
.footerRight .logoList{display: flex; flex-direction: row; justify-content: flex-end; align-items: flex-end; gap: 17px;}

@media all and (max-width:1728px){
	.header-body .header-body-inner{
		max-width:inherit;
		padding:0 64px;
	}
	.footer-inner{
		padding:43px 64px 57px;
	}
}
@media all and (max-width:1280px){
	.header-body .header-body-inner{
		padding:0 32px;
	}
	#header h1.logo a{width:160px; height:51px;}

	
	.header-nav .header-menu > li > a {font-size:2rem;}
	.header-nav .header-menu > li > .sub-menu > ul > li > a {font-size:1.8rem;}
	
	.footer-inner{
		padding:24px 32px 27px;
	}

}
@media all and (max-width:1200px){

	
	/* #container {margin-top:calc(7em + 1px);} */
	
	#footer .footer-logo {margin-bottom:40px;}
}


@media all and (max-width:1024px){
	
	.pc{display:none;}
	.tab{display:block;}
	#header{
		background:#fff;
	}
	#header.active{border-bottom:0;}

	.header-body {height:auto; border-bottom:1px solid #dbdbdb;}
	
	#header h1.logo{padding:19px 0 13px 0; margin-left:0; }
	#header h1.logo a{ width:143px;height:46px}
	
	.buttonBx{display:block;}
	.buttonBx::after{display:block; content:''; opacity: 0; width:100%; max-width:430px; height:100%;  background-color: #df3c6e; background-image: url(/humanframe/theme/hahacampus/assets/img/common/logoHhcWh.png); background-position: left 16px center; background-size: auto; background-repeat: no-repeat; transition: all 1s ease;  position:absolute; top:0; right:-430px; z-index: 1;}
	#header.active .buttonBx::after{opacity:1; right:0; transition: all 1s ease; }

	.header-nav-btn {position:absolute; top:50%; right:32px; transform:translateY(-50%); display:block;width:20px; height:19px; z-index: 2;}
	
	.header-nav {position:fixed; top:78px; bottom:0; width:100%; max-width:430px; background:#fff; visibility:hidden; opacity:0; right:-430px; transition: all 1s ease; overflow:auto; z-index:20;}
	.header-nav::before{display:block; content:''; width:100vw; height:100vh; position: fixed; top:0;right:-100vw;}
	.header-nav .header-auth {display:flex; text-align:center; justify-content:space-around;}
	.header-nav .header-auth > a {display:block; flex:1; height:3em; display:flex; align-items:center; justify-content:center; border-left:1px solid #ccc; border-bottom:1px solid #ccc; background:#f3f3f3;}
	.header-nav .header-auth > a:first-child {border-left:0;}
	

	.header-nav .header-menu{ flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%;}
	#header .header-menu li {position:relative; width:100%; display:flex;  align-items:center; justify-content:flex-start; padding: 0; border-bottom:1px solid #ccc; flex-wrap: wrap;}
	#header .header-menu li.active .btn-menudrop + ul,
	#header .header-menu li.active .btn-menudrop + .sub-menu > ul {visibility:visible; height:auto;}
	#header .header-menu li > .btn-menudrop { display:block; overflow: hidden; text-indent: -9999px; width: 30px; height: 30px; background-color: #858182; background-image: url(/humanframe/theme/hahacampus/assets/img/common/mMenuArrow.png); background-repeat: no-repeat; background-size: auto; background-position: center; border-radius: 30px; transition:0.2s; margin-right:30px;}
	#header .header-menu li.active > .btn-menudrop {transform: rotate(450deg); background-color: #df3c6e; transition:0.2s;}
	#header .header-menu li.current > a {font-weight:bold;}
	#header .header-menu > li > a {flex:1 1 0;  padding: 24px 0 24px 35px; text-align: left; font-size: 2.4rem;}
	#header .header-menu > li > a:before {margin:0 1em 0 0;}
	#header .header-menu > li > a > span {font-size:2.6rem;}
	#header .header-menu > li > .sub-menu {
		position: static; width: 100%; background:#f4f4f4; transition: all 0.5s ease; border:0; height:0;}
	#header .header-menu > li.active > .sub-menu{height:auto;transition: all 0.5s ease-in;}
	#header .header-menu .sub-menu ul {visibility:hidden; overflow:hidden; height:0px; transition: height 0.5s ease, visibility 0.5s ease; padding:0;}
	#header .header-menu .sub-menu a {display:block;}
	#header .header-menu .sub-menu > ul > li{border-bottom:2px solid #fff;}
	#header .header-menu .sub-menu > ul > li:last-child{border-bottom:0;}
	.header-nav .header-menu > li > .sub-menu > ul{gap:0;}
	.header-nav .header-menu > li > .sub-menu > ul:before{display:none;}
	.header-nav .header-menu > li:hover > .sub-menu > ul{background:#f6f5f5;}
	#header .header-menu .sub-menu > ul > li > a {padding:22px 38px;flex: 1 1 0;}
	#header .header-menu .sub-menu > ul > li.active{background:#dc82a0;}
	#header .header-menu .sub-menu > ul > li.active > a > span{color:#fff;}
	#header .header-menu .sub-menu > ul > li > a > span {
		font-size:2.2rem;
		line-height: 1em;
		font-weight:500;
		position:relative;
		display:inline-block;
		width:auto;
	}
	#header .header-menu .sub-menu > ul > li > a > span:before{
		display:block;
		position:absolute;
		content:'';
		width:0;
		height:1px;
		background:#121212;
		bottom:-2px;
		left:0;
		transition:.2s;
	}
	#header .header-menu .sub-menu > ul > li.current > a > span:before,
	#header .header-menu .sub-menu > ul > li > a:hover > span:before{
		width:100%;
	}

	#header .header-menu .sub-menu > ul > li > ul > li.current > a{
		font-weight:600;
	}
	#header .header-menu .sub-menu > ul > li > ul > li > a:before {
		content:"-";
		display:inline-block;
		margin-right:4px;
	}
	#header .header-menu .sub-menu > ul > li > .btn-menudrop{width:16px; height:23px; position: relative; background:none;}
	#header .header-menu .sub-menu > ul > li > .btn-menudrop::before,
	#header .header-menu .sub-menu > ul > li > .btn-menudrop::after{display: block; content:''; width:12px; height:1px; position:absolute; bottom:5px; right:0; background:#918d8e; transform: rotate(-45deg);}
	#header .header-menu .sub-menu > ul > li > .btn-menudrop::after{top:8px; bottom:inherit; transform:rotate(45deg);}
	#header .header-menu .sub-menu > ul > li.active > .btn-menudrop::before,
	#header .header-menu .sub-menu > ul > li.active > .btn-menudrop::after{background:#fff;}
	#header .header-nav .header-menu > li > .sub-menu > ul > li > ul {display:none; width:100%;}
	#header .header-nav .header-menu > li > .sub-menu > ul > li.active > ul{display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; background:#fbf2f5; padding:22px 40px; gap:20px;}
	#header .header-nav .header-menu > li > .sub-menu > ul > li > ul > li{border-bottom:0;}
	#header .header-nav .header-menu > li > .sub-menu > ul > li > ul > li > a{padding:0 0 0 16px; font-size: 1.9rem; color:#444; font-weight:500; line-height:1em;}

	#header .header-menu .sub-menu > ul > li > ul > li > .btn-menudrop {background-size:50%;}
	#header .header-menu .sub-menu > ul > li > ul > li > ul > li {padding-left:2em;}
	#header .header-menu .sub-menu > ul > li > ul > li > ul > li li {padding-left:1em;}
	#header .header-menu .sub-menu > ul > li > ul > li > ul > li a {padding-right:3em; color:#777;}
	#header .header-menu .sub-menu > ul > li > ul > li > ul > li a:before {content:""; display:inline-block; width:0.3em; height:1px; background:#121212; vertical-align:middle; margin-right:0.75em;}
	#header .header-menu .sub-menu > ul > li > ul > li > ul > li.active a {color:#121212;}
	#header .header-menu .sub-menu > ul > li > ul > li > ul > li .btn-menudrop {width:1.5em; height:1.5em; top:0; right:1.25em; background-size:50%;}
	
	#nav-back {position:fixed; top:70px; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); z-index:10; visibility:hidden; opacity:0; transition: all 1s ease;}
	#nav-back .sub-menu-tit {display:none;}
	
	#header.active .header-nav {
	visibility:visible; opacity:1; right:0;}
	#header.active + #nav-back {visibility:visible; opacity:1;}




	.header-nav-btn:after,
	.header-nav-btn:before {content:"";	display:block;	position:absolute; width:100%; height:2px;	background:#121212; left:50%; transform: translateX(-50%);	transition: all 0.5s ease-in-out;}
	.header-nav-btn:after {top:100%;}
	.header-nav-btn:before {top:0%;}
	.header-nav-btn > span {display:block; text-indent:-9999px; overflow:hidden; position:absolute; width:100%; height:2px; background:#121212; top:50%; left:0; transition: all 0.5s ease-in-out;}

	#header.active .header-nav-btn:after,
	#header.active .header-nav-btn:before { top:50%; background:#fff; height:2px;}
	#header.active .header-nav-btn:after {transform: translate(-50%, -50%) rotate(45deg);}
	#header.active .header-nav-btn:before {transform: translate(-50%, -50%) rotate(-45deg);}
	#header.active .header-nav-btn > span {right:-100%; opacity:0; background:#121212; height:1px;}

	.header-nav .header-auth {display:none;}
	.header-nav .header-menu > li > a {font-weight:600;}
	.header-nav .header-menu > li.active > a {color:#df3c6e;}
	.header-nav .header-menu li a[target='_blank']:after {content:""; display:inline-block; width:9px; height:9px; vertical-align:top; background:url(/humanframe/global/assets/img/ico_jump.png) no-repeat center center / cover; margin-left:5px;}


	.header-nav .header-menu > li > .sub-menu a:hover, .header-nav .header-menu > li > .sub-menu a:focus, .header-nav .header-menu > li > .sub-menu li.active > a{
		color:inherit;
	}
	#container{
		padding-top:79px;
	}
	.footerLeft .copyright{
		font-size:1.5rem;
	}
}

@media all and (max-width:768px){
	.tab{display:none;}
	.mobile-768{display:block;}
	#header{
		background:#fff;
	}
	#nav-back{
		top:60px;
	}
	.footer-inner{
		flex-direction: column-reverse; align-items: flex-start; gap: 28px 0;
	}
	.footerRight{
		flex-direction: row; align-items: center; justify-content: space-between; width:100%;
	}
	.footerRight .logoBx{
		margin:0; max-width:118px;
	}
	.footerRight .logoBx > img{
		display:block; width:100%;
	}
	.footerRight .logoList > li:first-child{
		max-width:79px;
	}
	.footerRight .logoList > li:last-child{
		max-width:131px;
	}
	.footerRight .logoList > li > img{
		display:block; width:100%;
	}
	.footerLeft .copyright{
		font-size:1.4rem;
	}
	.footerLeft .contact{
		flex-direction: column; align-items: flex-start; gap:8px;
	}
	.footerLeft .contact > li:first-child::after{
		display:none;
	}
	
}
@media all and (max-width:480px){
	.header-body .header-body-inner{
		padding:0 15px;
	}
	.mobile-768{display:none;}
	.mobile-480{display:block;}
	#header h1.logo{
		padding:19px 0 13px 0;
	}
	.header-nav-btn{
		right:15px;
	}
	.footer-inner{
		padding:24px 15px 19px;
	}
	.footerLeft .copyright{
		font-size:1.2rem;
	}
}
@media all and (max-width:410px){
	.footer-inner{
		gap:16px;
	}
	.footerLeft .contact{
		flex-direction: column; align-items:flex-start; gap:4px;
	}
	.footerLeft .address{
		margin-bottom:8px; line-height:1.2em;
	}
	.footerLeft .contact > li:first-child::after{
		display:none;
	}
	.footerRight{
        flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 8px;
	}
}

@media all and (max-width:340px){
	.mobile-480{display:none;}
	.mobile-340{display:block;}
}


.hideTxt{
	overflow:hidden;
	position:absolute;
	width:1px;
	height:1px;
	font-size:1px;
	line-height:0;
	clip:rect(0 0 0 0);
	white-space:nowrap;
	margin:-1px;
	padding:0;
	border:0;
}
/*텍스트 한줄만 나오게*/
.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;
	}
}