@charset "utf-8";


@font-face {
	font-family:'NotoSans'; font-style:normal; font-weight:100; font-display: swap;
	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/NoNotoSansKR-Thin.otf) format('opentype');
}
@font-face {
	font-family:'NotoSans'; font-style:normal; font-weight:200; font-display: swap;
	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:'NotoSans'; font-style:normal; font-weight:400; font-display: swap;
	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:'NotoSans'; font-style:normal; font-weight:500; font-display: swap;
	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:'NotoSans'; font-style:normal; font-weight:600; font-display: swap;
	src:url(/humanframe/global/assets/css/font/NotoSansKR-SemiBold.ttf) format('truetype');
}
@font-face {
	font-family:'NotoSans'; font-style:normal; font-weight:700; font-display: swap;
	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:'NotoSans'; font-style:normal; font-weight:800; font-display: swap;
	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:'NotoSans'; font-style:normal; font-weight:900; font-display: swap;
	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');
}
@font-face {
	font-family:'HSBombaram21'; font-style:normal; font-weight:900; font-display: swap;
	src:url(/humanframe/global/assets/css/font/HSBombaram21.ttf) format('truetype');
}
@font-face {
	font-family:'KOHIBaeum'; font-style:normal; font-weight:900; font-display: swap;
	src:url(/humanframe/global/assets/css/font/KOHIBaeum.woff2) format('woff2'),
	url(/humanframe/global/assets/css/font/KOHIBaeum.woff) format('woff'),
	url(/humanframe/global/assets/css/font/KOHIBaeum.otf) format('opentype');
}

@font-face {
	font-family:'MaruBuri'; font-style:normal; font-weight:400; font-display: swap;
	src:url(/humanframe/global/assets/css/font/Maruburi/MaruBuri-Regular.otf) format('opentype');
}
:root {
  --main-color: #268c33;
  --dark-color: #69a218;
  --light-color:#76c900; font-display: swap;
  --menuHeight: 0px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
	overflow-x: hidden;
	font-size:62.5%;
}
.cursor-circle {
	position: fixed;
	width: 24px;
	height: 24px;
	background:transparent;
	border: 1px solid var(--main-color);
	border-radius: 50%;
	pointer-events: none;
	z-index: 9999;
	transition: 0.4s ease-in-out;
}
.cursor-circle.hover {
	transform: scale(1.3);
	border-color: rgba(255, 100, 100, 0.8);
}
.cursor-circle.click {
	transform: scale(0.8);
	border-color: rgba(100, 255, 100, 0.8);
}
.cursor-circle.selecting {
	transform: scale(1.1);
	border-color: rgba(255, 255, 100, 0.8);
}
@media (max-width: 768px) {
	.cursor-circle {
		display: none;
	}
}
body {
	font-family: "NotoSans", sans-serif;
	line-height:1.4;
	font-size:1.8rem;
	font-weight:400; 
	overflow: hidden;
	min-width:280px;
	max-width:1920px;
	width:100%;
	margin:0 auto;
	color:#222;
	letter-spacing:-0.05em;
	word-break:keep-all;
	position:absolute;
}
ol, ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

select, input, textarea, button {
	font-family:inherit;
}
img {
	vertical-align: top; 
	image-rendering: -webkit-optimize-contrast;
}
a, a:hover, a:focus {
	text-decoration:none;
}
.mo {display: block;}
.pc {display: none;}


/*---------------------------header*/
header{
	display:block;
	width:100%;
	margin:0 auto;
}
.header_wrap{
	display:block;
	width:100%;
	margin:0 auto;
    position:fixed;
    top:0;
	left:0;
	z-index:2;
}
.header_wrap::after{
	display:block;
	content:'';
	width:100%;
	height:1px;
	/* background:#fff; */
	opacity:0.3;
	position:absolute;
	bottom:0;
	left:0;
	z-index:2;
}
.header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    max-width: 1440px;
    color:#fff;
}
.logo_area{
	display:block;
}
.logo{
	display:flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0 9px;
    height:120px;
}
.logo_busan{
    display: block;
    width:30px;
}
.logo_parks{
    font-size: 3rem;
    line-height: 1em;
	/* font-family:'HSBombaram21';	
	font-family:'MaruBuri'; */
    white-space: nowrap;
    font-size:2.8rem;
}
.nav{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    flex: 1 1 0;
}
.menu_wrap{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
}
.depth01{
	display:block;
	width:auto;
	position:relative;
}
.depth01::before{
	display:block;
	content:'';
	width:0;
	height:3px;
	position:absolute;
	bottom:-1.5px;
	left:0;
	background:transparent;
	transition:ease-in 0.3s;
}
.depth01 > a{
	display:flex;
	height:120px;
	flex-direction:row;
	justify-content:flex-start;
	align-items:center;
	font-size:2.1rem;
	font-weight:700; 
	font-display: swap;
	padding-right:40px;
	transition:ease-in 0.3s;
}
/* .depth01:first-child > a{
	padding-right:50px;
} */
.mMenu3thopen,
.mMenu2thopen{
	display:none;
}
.depth02{
	display:flex;
	position:absolute;
    width: 100%;
    text-align: center;
    padding: 24px 8px;
    border-right: 1px solid #dbdbdb;
    font-size: 1.6rem;
    flex-direction: column;
    gap: 24px;
    justify-content: flex-start;
    align-items: center;
    overflow:hidden;
    height:0;
    visibility: hidden;
    opacity: 0;
	color:#555;
	font-weight:600; font-display: swap;
	transition:0.2s;    
	white-space:nowrap;
}
.depth01:last-child .depth02{
	border-right:0;
}
.depth02 > li > a{
	color:#555;
    /* white-space: nowrap; */
}
.m_menu_toggle{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	width:28px;
	height:26px;
	position:relative;
    z-index: 3;
}
.menu_btn{
	display:block;
	width:28px;
	height:4px;
	background:#fff;
}
.menu_btn::after,
.menu_btn::before{
	display:block;
	content:'';
	width:100%;
	height:4px;
	background:#fff;
	position:absolute;
	left:0;
	top:0;
}
.menu_btn::before{
	top:inherit;
	bottom:0;
}
.nav_bg{
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    z-index: -1;
    height:0;
    visibility: hidden;
    opacity: 0;
	transition:ease-in 0.3s;
	border-bottom:1px solid #dbdbdb;
}

#header.bgWh .nav_bg{
    visibility: visible;
	opacity:1;
    height: 120px;
}
#header.bgWh .header{
	color:#222;
}
#header.bgWh .menu_btn::after,
#header.bgWh .menu_btn::before,
#header.bgWh .menu_btn{
	background:#222;
}

#header.on .header{
	color:#222;
}
#header.on .header_wrap::after{
	background:#dbdbdb;
	opacity:1;
}
#header.on .menu_btn::after,
#header.on .menu_btn::before,
#header.on .menu_btn{
	background:#222;
}
#header.on .depth01 > a{
	padding-left:40px;
	transition:ease-in 0.3s;
}

#header.on .depth01:first-child > a{
	padding-left:40px;
	padding-right:40px;
}
#header.on .depth01:nth-child(2) > a{
	padding-left:60px;
    padding-right: 60px;
}
#header.on .depth01:nth-child(4) > a{
	padding-left:40px;
	padding-right:40px;
}
#header.on .depth01:nth-child(7) > a,
#header.on .depth01:nth-child(6) > a{
	padding-left:60px;
	padding-right:60px;
}
#header.on .depth02{
    visibility: visible;
    opacity: 1;
    height: var(--menuHeight);
	transition:1s;
}
#header.on .nav_bg{
    height: calc(100% + var(--menuHeight, 440px));
    visibility: visible;
    opacity: 1;
	transition:ease-in 0.3s;
}
.depth01:focus > a,
.depth01:hover > a{
	color:var(--main-color);
}
.depth01:focus::before,
.depth01:hover::before{
	display:block;
	content:'';
	width:100%;
	height:3px;
	background:var(--main-color);
	transition:ease-in 0.3s;
}
.depth02 > li > a:focus,
.depth02 > li > a:hover{
	color:#222;
}
.depth03{
	display:none;
}

/*----------------------------footer*/
footer{
    background: #353b45;
    display: block;
    width: 100%;
    margin: 0 auto;
	padding: 50px 0 36px;
}
footer > .container{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.6rem;
    line-height: 1em;
	color: #fff;
}
footer > .container > .copyBox{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: 1440px;
}
footer > .container > .copyBox > .logo{
    height: 33px;
	margin-bottom: 32px;
}
footer > .container > .copyBox > .txt.adress{
	margin-bottom: 12px;
}
footer > .container > .callBox{
	display: none;
}

@media screen and (max-width: 789px){ 
	footer{ padding: 20px; 	 }
	footer > .container > .copyBox > p{font-size:1.5rem; line-height:1.15em; text-align:center}
	footer > .container > .copyBox > .logo{height:27px; margin-bottom:15px;}
}




@media screen and (max-width: 1560px){
	.header{
		max-width:inherit;
		padding:0 60px;
	}
	.depth01 > a{
		padding-right:50px;
	}
	#header.on .depth01 > a{
		padding-left:50px;
	}
	#header.on .depth01:nth-child(2) > a{
		padding-left:60px;
		padding-right:50px;
	}
}

@media screen and (max-width: 1386px){
	.depth01 > a{
		padding-right:40px;
	}
	#header.on .depth01:first-child > a,
	#header.on .depth01 > a{
		padding-left:40px;
	}
}
@media screen and (max-width: 1284px){
	.header{
		max-width:inherit;
		padding:0 32px;
	}
	.depth01:nth-child(3) > a,
	.depth01:last-child > a,
	.depth01:first-child > a{
		padding-right:24px;
	}
	#header.on .depth01:nth-child(3) > a,
	#header.on .depth01:last-child > a,
	#header.on .depth01:first-child > a{
		padding-left:24px;
	}
}
@media screen and (max-width: 1120px){
	.logo{
		height:80px;
	}
	#header.bgWh .header{
		background:#fff;
	}
	.menu_wrap{
		visibility:hidden;
		opacity:0;
		width:0;
		height:100vh;
		position:fixed;
		top:0;
		right:0;
    	z-index: 5;
		transition:0.3s;
		background:#fff;
		flex-direction:column;
	    justify-content: flex-start;
	    align-items: flex-start;
	    padding: 60px 24px;
	}
	#header.on .menu_wrap{
		visibility:visible;
		width:100%;
		max-width:374px;
		opacity:1;
    	overflow: scroll;
    	-webkit-overflow-scrolling: touch;
		  scrollbar-width: none;
		  -ms-overflow-style: none;
		transition:0.3s;
	}
	#header.on .menu_wrap::-webkit-scrollbar{
		display:none;
	}
	.menu_wrap::before{
		display:block;
		content:'';
		width:0%;
    	max-width: 374px;
		height:60px;
		background:#fff;
	    position: fixed;
		visibility:hidden;
		opacity:0;
	    top: 0;
	    right: 0;
	    z-index: 4;
		transition:0.3s;
	}
	#header.on .menu_wrap::before{
		visibility:visible;
		opacity:1;
		width:100%;
		transition:0.3s;
	}
	.nav_bg{
	    width: 0%;
	    height:100vh;
	    right: 0;
	    left: inherit;
		background:rgba(0,0,0,0.42);
	    z-index: 4;
	    position: fixed;
    }
	#header.on .nav_bg{
		width:100vw;
		transition:ease-in 0.2s;
	}
	.m_menu_toggle{
		z-index:6;
	}
	.depth01{
		width:100%;
		display:flex;
		flex-direction:row;
		justify-content:space-between;
		align-items:center;
		padding-right:18px;
    	flex-wrap: wrap;
    	position:relative;
	}
	.depth01::after{
		display:block;
		content:'';
		width:100%;
		height:1px;
		background:#dbdbdb;
		position:absolute;
		top:80px;
		left:0;
	}
	#header.on .depth01:nth-child(2) > a,
	#header.on .depth01 > a,
	#header.on .depth01:nth-child(3) > a,
	#header.on .depth01:last-child > a,
	#header.on .depth01:first-child > a{
		height:auto;
		padding:27px 0 25px 18px;
		width:auto;
	}
	.mMenu2thopen{
		display:block;
		position:relative;
		height:16px;
    	flex: 1 1 0;		
	}
	.mMenu2thopen::after,
	.mMenu2thopen::before{
		display:block;
		content:'';
		width:16px;
		height:2px;
		background:#909090;
		position:absolute;
		top:50%;
		margin-top:-1px;
		right:0;
		opacity:1;
		transition:0.3s;
	}
	.mMenu2thopen::before{
		transform:rotate(90deg);
	}
	.mMenu2thopen.on::after{
		opacity:0;
		transform:rotate(270deg);
		transition:0.3s;
	}
	.mMenu2thopen.on::before{
		transform:rotate(360deg);
		background:var(--main-color);
		transition:0.3s;
	}
	#header.on .depth02{
    	position: static;
    	gap:20px 0px;
    	visibility: hidden;
    	padding:0;
    	height:0;
    	border-bottom:0;
    	opacity:0;
    	text-align:left;
		transition:0.5s;
		border-right:0;
		
	}
	#header.on .depth02.on{
    	padding:22px 0 32px 0;
		visibility: visible;
		height:auto;
		border-bottom:1px solid #dbdbdb;
		opacity:1;
		transition:0.5s;
	}
	#header.on .depth02 > li{
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between;
	    align-items: center;
    	flex-wrap: wrap;
	    width: 100%;
	    padding:0 13px;
	}
	#header.on .depth02 > li > a{
		line-height:1em;
	}
	
	.menu_btn.on{
		width:0;
	}
	.menu_btn.on::after,
	.menu_btn.on::before{
		top:10px;
		transform:rotate(45deg);
	}
	.menu_btn.on::before{
		transform:rotate(-45deg);
	}
	
	.mMenu3thopen{
		display:block;
		position:relative;
		height:12px;
    	flex: 1 1 0;		
	}
	.mMenu3thopen::after,
	.mMenu3thopen::before{
		display:block;
		content:'';
		width:10px;
		height:2px;
		background:#7d7d7d;
		position:absolute;
		top:1px;
		margin-top:0;
		transform:rotate(45deg);
		right:0;
		opacity:1;
	}
	.mMenu3thopen::before{
		transform:rotate(-45deg);
    	top: calc(50% + 1.5px);
	}
	.mMenu3thopen.on::after{
		transform:rotate(135deg);
		background:#171717;
	    top: inherit;
	    bottom: 2px;
	    right: 0;
	}
	.mMenu3thopen.on::before{
		transform:rotate(45deg);
		background:#171717;
    	right: 6px;
	}
	.depth03{
		display:flex;
		flex-direction:column;
		justify-content:flex-start;
		align-items:flex-start;
		gap:14px 0;
		width:100%;
		visibility:hidden;
		opacity:0;
		height:0;
		overflow:hidden;
		background:#efefef;
		padding:0 20px;
		transition:0.3s;
	}
	.depth03.on{
		visibility:visible;
		opacity:1;
		height:auto;
		margin-top:20px;
		padding:22px 20px;
		transition:0.3s;
	}
	.depth03 > li{
		padding:0 17px;
		font-size:1.6rem;
		line-height:1em;
		position:relative;
	}
	.depth03 > li::before{
		display:block;
		content:'';
		width:6px;
		height:3px;
		background:#444;
		position:absolute;
		top:50%;
		left:0;
		transform:translate(0, -50%);
	}
		
	
	/*hover삭제*/
	
	.depth01:focus > a,
	.depth01:hover > a{
		color:#222;
	}
	.depth01:focus::before,
	.depth01:hover::before{
		width:0;
	}
}

@media screen and (max-width: 768px){
	.header{
		padding:0 20px;
	}
	
}


/*sub layout*/
#container{
	width:100%;
}
#sideNav,
.sideTitleWrap{
    display: block;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}
.sideTitleWrap{
	margin-top:67px;
}
.locationInner{
	overflow:hidden;
}
.lineMap{	
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
	align-items: center;
	width:100%;
	margin-bottom:24px;
	opacity:0;
	transform:translateY(-50px);
}
.lineMap > a{
	position: relative;
    padding-right: 17px;
	margin-right: 13px;
	font-size:1.6rem;
	line-height:1em;
	color:#666;
	font-weight:500; font-display: swap;
}
.lineMap > a::after{
	display: block;
	content:'';
	width:4px;
	height:4px;
	background:#dbdbdb;
	position: absolute;
	right:0;
	top:50%;
	margin-top:-2px;
}
.lineMap > a:last-child{
	margin-right:0;
	padding-right:0;
}
.lineMap > a:last-child::after{
	display:none;
}
.lineMap > .home{
    text-indent: -9999px;
    display: block;
    width: 29px;
    height: 12px;
    background-image: url(/humanframe/theme/parksbusan/assets/img/content/iconHome.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100%;
}
.titPage{
	font-size: 4.5rem;
	font-family:'HSBombaram21';
	font-family:'MaruBuri';
	line-height:1em;
	margin-bottom:20px;
	overflow:hidden;
}
.titPage > p{
	opacity:0;
	transform: translateY(50px);
}
.sideNavMenu{
    display: block;
	width: 100%;
}
.sideNavMenu > ul{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
	gap: 0 32px;
	width: 100%;
	overflow:hidden;
}
.sideNavMenu > ul.gap_0_26{
	gap:0 26px;
}
.sideNavMenu > ul > li {
	opacity:0;
	transform:translateY(50px);
	}
.sideNavMenu > ul > li > a{
    display: block;
    padding-bottom: 20px;
    font-size: 1.8rem;
	font-weight: 500; font-display: swap;
	position: relative;
	white-space:nowrap;
}
.sideNavMenu > ul > li.active > a{
	font-weight: 800; font-display: swap;
	color:var(--main-color);
}
.sideNavMenu > ul > li > a::after{
	display: block;
	content:'';
	width:0;
	height:4px;
	position: absolute;
	background:var(--main-color);
	bottom:0;
	left:-5px;
	
}
.sideNavMenu > ul > li.active > a::after{
	width:calc(100% + 18px);
}
.breadCrumbBg{
	display: block;
	width:100%;
	aspect-ratio: 1920 / 325;
	overflow: hidden;
}
.breadCrumbBg > img{
	display: block;
	width:100%;
	object-fit: cover;
	transform:scale(1.05);
	opacity:0.5;
}
#contents{
	width:100%;
	max-width:1440px;
	margin:80px auto 0;
}
#pageSatisfy *{
	font-size:98%;
}
#pageSatisfy{
	margin-top:50px;
}
#pageSatisfy .manager h3{
	width:180px;
}
#sideNav .sideNavMenu > ul > li a[target='_blank']{
	padding-right:32px;
	position: relative;
}
#sideNav .sideNavMenu > ul > li a[target='_blank']:after{
	display: block;
	content:'';
	width:20px;
	height:17px;
	margin:0;
	position: absolute;
	background-image: url(/humanframe/theme/parksbusan/assets/img/common/iconJumpBk.png);
	background-repeat: no-repeat;
	background-size: auto;
	background-position: center;
	vertical-align: unset;
	left:inherit;
	bottom:inherit;
	top:4px;
	right:0;
}
@media screen and (max-width: 1560px){
	
	#contents,
	#sideNav, .sideTitleWrap{
		max-width: inherit;
		padding:0 60px;
	}
}

@media screen and (max-width: 1554px){
	.sideNavMenu {
		width: 100%;
		overflow-x: scroll;
    	-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		transition:0.3s;
	}
	#sideNavMenu::-webkit-scrollbar{
		display:none;
	}
}

@media screen and (max-width: 1284px){
	
	#contents,
	#sideNav, .sideTitleWrap{
		padding:0 32px;
	}
	#pageSatisfy .manager h3{
		padding: 16px;
		line-height:1em;
	}
	
}
@media screen and (max-width: 768px){
	#contents,.sideTitleWrap{
		padding:0 20px;
		margin-top:30px;
	}
	
	.titPage{
		font-size:2.7rem;
		margin-bottom:19px;
	}
	.lineMap > a{
		font-size:1.5rem;
	}
	.breadCrumbBg{ 
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 300px;
	    aspect-ratio: unset;
	}
	.breadCrumbBg > img{
		display:block;
		width:100%;
		height:100%;
		object-fit:cover;
		object-position:top center;
	}
	#sideNav{
		display: none;
	}
	.lineMap{
		margin-bottom:0;
		flex-wrap: wrap;
		gap: 8px 0;
	}
	
	#pageSatisfy {
		margin-top: 0px;
	}
}

.text_hidden{
	overflow: hidden;
  	position: absolute;
  	clip: rect(0, 0, 0, 0);
  	clip-path: polygon(0 0, 0 0, 0 0);
  	width: 1px;
  	height: 1px;
  	margin: -1px;
}