@charset "utf-8";
/* --------------------  font */
/* Pretendard */
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 100;
    src: url(/humanframe/global/assets/css/font/Pretendard/Pretendard-Thin.woff2) format('woff2'),
        url(/humanframe/global/assets/css/font/Pretendard/Pretendard-Thin.woff) format('woff'),
        url(/humanframe/global/assets/css/font/Pretendard/Pretendard-Thin.otf) format('opentype');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 200;
    src: url(/humanframe/global/assets/css/font/Pretendard/Pretendard-Light.woff2) format('woff2'),
        url(/humanframe/global/assets/css/font/Pretendard/Pretendard-Light.woff) format('woff'),
        url(/humanframe/global/assets/css/font/Pretendard/Pretendard-Light.otf) format('opentype');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    src: url(/humanframe/global/assets/css/font/Pretendard/Pretendard-Regular.woff2) format('woff2'),
        url(/humanframe/global/assets/css/font/Pretendard/Pretendard-Regular.woff) format('woff'),
        url(/humanframe/global/assets/css/font/Pretendard/Pretendard-Regular.otf) format('opentype');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    src: url(/humanframe/global/assets/css/font/Pretendard/Pretendard-Medium.woff2) format('woff2'),
        url(/humanframe/global/assets/css/font/Pretendard/Pretendard-Medium.woff) format('woff'),
        url(/humanframe/global/assets/css/font/Pretendard/Pretendard-Medium.otf) format('opentype');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 600;
    src: url(/humanframe/global/assets/css/font/Pretendard/ExtraBold.woff2) format('woff2'),
        url(/humanframe/global/assets/css/font/Pretendard/ExtraBold.woff) format('woff'),
        url(/humanframe/global/assets/css/font/Pretendard/ExtraBold.otf) format('opentype');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 800;
    src: url(/humanframe/global/assets/css/font/Pretendard/Pretendard-Bold.woff2) format('woff2'),
        url(/humanframe/global/assets/css/font/Pretendard/Pretendard-Bold.woff) format('woff'),
        url(/humanframe/global/assets/css/font/Pretendard/Pretendard-Bold.otf) format('opentype');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 900;
    src: url(/humanframe/global/assets/css/font/Pretendard/Pretendard-Black.woff2) format('woff2'),
        url(/humanframe/global/assets/css/font/Pretendard/Pretendard-Black.woff) format('woff'),
        url(/humanframe/global/assets/css/font/Pretendard/Pretendard-Black.otf) format('opentype');
}
/* Noto Sans KR */
@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');
}
/* KOHINanum */
@font-face {
    font-family: 'KOHINanum';
    font-weight: 700;
    src: url('/humanframe/global/assets/css/font/KOHINanumBold.woff') format('woff2'),
        url('/humanframe/global/assets/css/font/KOHINanumBold.woff2') format('woff'),
        url('/humanframe/global/assets/css/font/KOHINanumBold.otf') format('opentype');
}
/* BusanFont */
@font-face {
	font-family: 'Busan';
	font-weight: normal;
	src: url('/humanframe/global/assets/css/font/BusanFont_Provisional.ttf') format('truetype'),
		url('/humanframe/global/assets/css/font/BusanFont_Provisional.woff') format('woff'),
}
/* NanumMyeongjo */
@font-face {
	font-family: 'NanumMyeongjo';
	font-weight: normal;
	src: url('/humanframe/global/assets/css/font/NanumMyeongjo.woff') format('woff'),
	url('/humanframe/global/assets/css/font/NanumMyeongjo.otf') format('opentype'),
}
@font-face {
	font-family: 'NanumMyeongjo';
	font-weight: 600;
	src: url('/humanframe/global/assets/css/font/NanumMyeongjoBold.woff') format('woff'),
}
/* --------------------  공통영역 */
* {box-sizing:border-box;}
body {font-family: "Pretendard"; font-weight: 500; color: #000; line-height: 1;}
a, a:hover, a:focus {text-decoration:none;}
[class*='-inner'] {max-width:170rem; margin:0 auto; height:100%; position:relative;}
.pc {display: block;}
.tab, .mo {display: none;}

@media screen and (max-width: 1024px) {
	.tab {display: block;}
	.pc {display: none;}
}

@media screen and (max-width: 480px) {
	.tab {display: none;}
	.mo {display: block;}
}


/* --------------------  header */
#header {position:fixed; z-index:9999; top:0; left:0; right:0; /* border-bottom:1px solid rgba(220,220,220,0.45); */  transition:all 0.3s;}
.header_wrap{display:flex; justify-content: space-between; align-items: center; width: 100%; max-width: 170rem; margin: 0 auto; padding-top: 1.5rem;}
.header_wrap.active:after{
	display:block;
	content:'';
	width:100vw;
	height:100%;
	position:absolute;
	background:#fff;
	top:0;
	left:0;
	z-index:-1;
	transition:all 0.3s;
}
.header-top { background:none;}
.header-body {background:none;}
.header-top.active,
.header-body.active{
	background:#fff;
	transition:all 0.3s;
}
.header-left{
	display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: auto;
}
.header-logo .mayor_link {display:block; font-size: 3.6rem; font-weight:800; color: #fff; letter-spacing: -0.02em; /* width: 386px; background:url(/humanframe/theme/mayor24/assets/img/main/mayor_sign.png)no-repeat right center / auto 57px; */}
/* .header_wrap.active .header-logo .mayor_link {background:url(/humanframe/theme/mayor24/assets/img/main/mayor_sign_bk.png)no-repeat right center / auto 57px;} */

.header_wrap.active .header-logo .mayor_link {
	color: #333;
	transition:all 0.3s;
}

.header-logo .logo{display:flex; gap: 1.7rem;}
.header-logo .logo > .busan_link{display:block; width: 12.1rem; height: 3.1rem; text-indent:9999px; background:url(/humanframe/theme/mayor26/assets/img/common/logo.png)no-repeat center center / contain;}
.header_wrap.active .header-logo .logo > .busan_link{background:url(/humanframe/global/assets/img/common/logo.svg)no-repeat center center / contain; transition:all 0.3s;}
.header-right{
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:flex-end;	
}
.header-right .utils {
	display:block;
}
.header-right > .utils > .header_sns_list{
	display:flex;
	flex-direction:row;
	justify-content:flex-end;
	align-items:center;
}
.header-right > .utils > .header_sns_list > li{
	margin-left:16px;
}
.header-right > .utils > .header_sns_list > li > a{
	display:block;
	width:100%;
	height:100%;
}
.header-right > .utils > .header_sns_list > li > a > img{display: block; width: 3.3rem;}
.sub-menu{display:none; width:100vw; position:absolute; left:0; top:12.6rem; background:#fff; border-top:1px solid #dbdbdb; padding-top:0; padding-bottom: 3.6rem; transition:all 0.3s;}
.sub-menu.active{
	display:block;
	transition:all 0.3s;
}
.sub-menu > .sub_wrap{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:stretch;
	width:100%;
	max-width:1600px;
	margin:0 auto;
	padding-top:55px;
}
.sub-menu > .sub_wrap > .sub{
	display:block;
	width:25%;
	border-right:1px solid #dbdbdb;
	padding:13px 35px 42px;
}
.sub-menu > .sub_wrap > .sub > .depth_01{
	font-size:2.4rem;
	font-family:'KOHINanum';
	font-weight:700;
	margin-bottom:50px;
}
.sub-menu > .sub_wrap > .sub:hover > .depth_01{
	color:#004098;
}
.sub-menu > .sub_wrap > .sub:first-child{
	border-left:1px solid #dbdbdb;
}
.sub-menu > .sub_wrap > .sub > ul > li{
	font-size:1.7rem;
	font-family:'KOHINanum';
	font-weight:700;
	margin-bottom:20px;
}
.sub-menu > .sub_wrap > .sub > ul > li > a{
	color:#555;
}
.sub-menu > .sub_wrap > .sub > ul > li:hover > a{
    text-decoration: underline;
    color:#000;
}
.header-nav-btn {width:60px; height:60px;}
.header-nav-btn:after,
.header-nav-btn:before {
	content:""; 
	display:block; 
	position:absolute; 
	width:28px; 
	height:3px; 
	background:#fff;
	left:50%; 
	transform:translateX(-50%);
	transition: all 0.3s;
	}
#header.active .header-nav-btn{
	background:#000;
	
}
.header_wrap.active .header-nav-btn:after,
.header_wrap.active .header-nav-btn:before{
	background:#fff;
}
.header-nav-btn:after {bottom:16px;}
.header-nav-btn:before {top:20px;}
.header-nav-btn > span {
	/*
	display:block; 
	text-indent:-9999px; 
	overflow:hidden; 
	position:absolute; 
	width:28px; 
	height:3px; 
	background:#fff; 
	top:50%; 
	left:27%;
	transition: all 0.3s;
	*/
	display:block; 
	text-indent:-9999px; 
	position:absolute; 
	width:28px; 
	height:3px; 
	background:#fff;
	left:50%; 
	transform:translateX(-50%);
	transition: all 0.3s;
}
.header_wrap.active .header-nav-btn > span{
	background:#333;
}
.header_wrap.active .header-nav-btn:after,
.header_wrap.active .header-nav-btn:before {background:#333; transition:all 0.3s;}
#header.active .header-nav-btn:after,
#header.active .header-nav-btn:before {top:50%; background:#fff; height:3px;}
#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:#000; height:3px;}

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

@media all and (min-width:1025px){
	.header-top {border-bottom: none;}
	.header-util { padding: 16px 0 8px;}
	.header-body .header-body-inner {
	display:flex; 
	justify-content: space-between; 
	align-items: center; 
	position:static;}
	.header-body .search {display:none;}
	.header-body .search-btn {display:none;}
	.header-nav-btn {display:none;}
	.header-nav .header-memu {display:flex;}
	.header-nav .header-memu .btn-menudrop {display:none;}
	.header-nav .header-memu > li > a {
		position:relative;
		display:block;
		padding: 2.4rem 3rem 3rem 3rem;
		color:#fff;
		font-size: 2.4rem;
		font-weight: 800;
		white-space:nowrap;
		}
		.header-nav .header-memu .sub-menu>.sub>ul {flex-direction: column; padding: 0; min-width: auto;}
	.header-nav .header-memu .sub-menu > .sub > ul > li > a {font-size: 2rem; padding: 0;}
	.header_wrap.active .header-nav .header-memu > li > a{
	color:#333; transition:all 0.3s;}
	.header-nav .header-memu > li > a:before{
	content:'';
	width:1px;
	height:12px;
	background:#fff;
	position:absolute;
	top:50%;
	left:0px;
	transform:translateY(-50%);
	}
	.header_wrap.active .header-nav .header-memu > li > a:before{
	background:#333;
	}
	.header-nav .header-memu > li {position: relative;}
	.header-nav .header-memu > li:first-child > a:before{
	display:none;
	}
	.header-nav .header-memu > li:last-child > a {padding-right: 0;}
	.header-nav .header-memu .sub-menu {width: auto; min-width: 21.6rem; position:absolute; top: 7rem; left: 50%; transform: translateX(-50%); border-radius: 2rem; border: 1px solid #dbdbdb; padding: 3.5rem 0 2.5rem 3rem;}
	.header-nav .header-memu > li > a.hover ~ .sub-menu {display:flex;}
	.header-nav .header-memu .sub-menu-tit {flex:2;/*background: #e9028d;*/ background: linear-gradient(90deg, #ec008d 0%, #ba1c8e 35%, #a4238f 55%, #6b2d91 100%); position:relative;min-height: 155px;}
	.header-nav .header-memu .sub-menu-tit h2 {position:absolute;top:50%;right: 2em;color:#fff;font-size: 2.6em;font-weight: 800;transform:translateY(-50%);}
	
	.header-nav .header-memu .sub-menu > .sub > ul {display:flex; flex-direction: column; max-width: 559px;}
	/* .header-nav .header-memu .sub-menu > .sub > ul > li {width:50%; } */
	.header-nav .header-memu .sub-menu > .sub > ul > li:not(:last-child) {margin-bottom:1em;}
	.header-nav .header-memu .sub-menu > .sub > ul > li > a {font-size: 2rem; font-weight: 600; line-height:1.2; color: #555555;}
	/* .header-nav .header-memu .sub-menu > .sub > ul > li > a:before {content:""; display:block; width:3px; height:3px; background:#aaa; position:absolute; top:calc(0.5em * 1.2); left:0.25em; transform:translateY(-50%);} */
	.header-nav .header-memu .sub-menu > .sub > ul > li > a:hover,
	.header-nav .header-memu .sub-menu > .sub > ul > li > a:focus {color:#0086cd; text-decoration: underline;}
	.header-nav .header-memu .sub-menu > .sub > ul > li > .sub {display:none;}
	
	#nav-back {display:none;}
	
    #sideNav {border-left:1px solid #ccc; border-right: 1px solid #ccc;}
}

@media all and (max-width:1700px){
	.header_wrap,
	[class*='-inner']{
	max-width: calc(100% - 8rem);
	}
}

@media all and (max-width:1400px){
	.header_wrap,
	[class*='-inner']{
	max-width: calc(100% - 6rem);
	}
}

@media all and (max-width:1024px){
	.header_wrap,
	[class*='-inner']{
	max-width: calc(100% - 4rem);
	}

	.header_wrap{
	padding:10px 0;
	align-items:center;
	}
	.header-logo .logo {align-items: center; gap: 1rem;}
	.header-logo .logo > .busan_link,
	.header_wrap.active .header-logo .logo > .busan_link {background: url('/humanframe/theme/mayor26/assets/img/common/logo_tab.png')no-repeat center center / contain; width: 2.5rem; height: 2.5rem;}
	.header-logo .mayor_link{
	font-size:25px;
	line-height:40px;
	/* width:250px; */
	background-size:auto 36px;
	}
	.header_wrap.active .header-logo .mayor_link{
	background-size:auto 36px;
	}
	.header-right .utils{
	display:none;
	width:50%;
	position:fixed;
	padding:16px 16px 30px 0;
	background:#fff;
	bottom:0;
	z-index:9;
    opacity: 0;
	right:0;
	transition:0s;
	}
	.header-right .utils.active{
	opacity:1;
	transition: all 0.3s 0.2s;}
	
	.header-util {height:3em; justify-content:space-between;}
	.header-right > .utils > .header_sns_list > li{
	margin-left:27px;
	}
	.nav_back_pc.on{
	display:none;}
	.header-util .language {padding-right:0;}
	.header-util .language select {height:2em;}
	.header-util .language button {height:2em;}
	.header-util .search {display:none;}
	.header-util .search input {height:2em;}
	.header-util .search button {height:2em;}
	.header-util .auth {display:none;}
	.header-body {height:4em;}
	.header-body .logo {position:absolute; left:50%; bottom:0.25em; transform:translateX(-50%);}
	.header-body .logo img {height:3em;}
	.header-body .search-btn {position:absolute; top:50%; left:1em; transform:translateY(-50%); width:3em; height:3em; background:url(../../assets/img/common/ico_search.png) no-repeat center center; text-indent:-9999px; overflow:hidden;}
	.header-body .search {position:absolute; background:#fff; left:0; right:0; height:4em; align-items:center; flex-flow: row-reverse; justify-content: flex-end; padding-right:5em; display:none;}
	.header-body .search.active {display:flex;}
	.header-body .search {margin-left:0.5em;}
	.header-body .search fieldset > div {display:flex;}
	.header-body .search fieldset input  {max-width:300px; width:calc(100% - 2.5em); height:2.5em; border-radius:0; border:1px solid #ccc; vertical-align:middle;}
	.header-body .search fieldset button {height:2.5em; width:2.5em; border:1px solid #ccc; vertical-align:middle; border-left:0; overflow:hidden; text-indent:-9999px; background:url(../../assets/img/common/ico_search.png) no-repeat center center / 50%;}
	.header-body .search form {margin-left:0.5em; width:100%;}
	.header-body .search-close-btn {width:3em; height:3em; text-indent:-9999px; overflow:hidden; background:url(../../assets/img/common/ico_close.png) no-repeat center center;}
	.header-nav-btn {position:absolute; top:50%; right:0px; transform:translateY(-50%);}
	.header-nav {
	position:fixed; 
	top:60px; 
	bottom:0; 
	width:50%; 
	background:#fff; 
	border-top:1px solid #ccc; 
	visibility:hidden; 
	opacity:0; 
	right:-300px; 
	transition: all 0.3s ease; 
	overflow:auto;
	}
	.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-memu {
		padding:20px 30px;
	}
	.header-nav .header-memu li {
	position:relative;
	border-bottom:1px solid #000;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
	}
	.header-nav .header-memu > li > a {
	display:block; 
	display:flex; 
	flex-direction:row;
	justify-content:space-between;
	align-items:center; 
	font-size:2.2rem; 
	padding: 24px 20px;
	font-family:'KOHINanum';
	font-weight:700;
	transition: 0.3s;
	}
	.header-nav .header-memu > li > a.active{
	color:#004098;
	transition: 0.3s;
	}
	.header-nav .header-memu .btn-menudrop {
	position:relative; font-size:1.4em; width:3em; height:3em; overflow:hidden; text-indent:-9999px;}
	.header-nav .header-memu .btn-menudrop:before,
	.header-nav .header-memu .btn-menudrop:after {
	content:"";
	display:block; width:24px; height:3px; position:absolute; top:50%; left:50%; background:#777; margin-top:-0.5px; margin-left:-0.5em;}
	.header-nav .header-memu li.active .btn-menudrop:before{
	background:#004098;
	transition: 0.3s;
	}
	.header-nav .header-memu .btn-menudrop:after {transform: rotate(90deg); transition: all 0.5s ease;}
	.header-nav .header-memu li.active .btn-menudrop:after {top:100%; opacity:0;}
	.header-nav .header-memu li.active .btn-menudrop + .sub-menu {
	display:block;
	position:static;
	border:0;
	border-top:1px solid #000;
	padding-top:5px;
	padding-bottom:5px;
	}
	
	.header-nav .header-memu .sub-menu-tit {display:none;}
	.sub-menu.active{
	display:none;
	}
	.header-nav .header-memu .sub-menu {
	z-index:0;}
	
	.header-nav .header-memu > li.active > .sub-menu{
		display: block;
	    position: static;
	    border: 0;
	    border-top: 1px solid #000;
	    padding-top: 5px;
	    padding-bottom: 5px;
	}
		
	.header-nav .header-memu .sub-menu > .sub > ul > li{
		border:0;
		background:#f3f3f3;
		width:100%;
		margin-bottom:8px;
	}
	.header-nav .header-memu .sub-menu > .sub > ul > li > a { 
		font-size:1.8rem; 
		font-weight:600;
		padding:18px 35px 14px; 
		transition: 0.6s;
		margin-bottom:5px;
		border:0;
		width: 100%;
	}
	.header-nav .header-memu .sub-menu > .sub > ul > li .btn-menudrop {display:block}
	.header-nav .header-memu .sub-menu > .sub > ul > li .btn-menudrop:after {
	    display: block;
	    content: '';
	    width: 12px;
	    height: 1px;
    	transform: rotate(-45deg) translateY(-50%);
	    left: calc(50% + 5.5px);
	    top: calc(50%);
	    background: #333;
	    opacity: 1;
	}
	.header-nav .header-memu .sub-menu > .sub > ul > li .btn-menudrop:before {
	    display: block;
	    content: '';
	    width: 12px;
	    height: 1px;
    	transform: rotate(45deg) translateY(-50%);
	    left: calc(50% + -3px);
	    top: calc(50%);
	    background: #333;
	    opacity: 1;
	}
	.header-nav .header-memu .sub-menu > .sub > ul > li.active > a {color:#004098; font-weight:bold;}
	.header-nav .header-memu .sub-menu > .sub > ul > li > .btn-menudrop{
		transform:rotate(0deg);
		transition:.3s;
	}
	.header-nav .header-memu .sub-menu > .sub > ul > li.active > .btn-menudrop{
		transform:rotate(180deg);
		transition:.3s;
	}
	.header-nav .header-memu .sub-menu > .sub > ul > li.active > .btn-menudrop:before,
	.header-nav .header-memu .sub-menu > .sub > ul > li.active > .btn-menudrop:after{
		background:#004098;
	}
	.header-nav .header-memu .sub-menu > .sub > ul > li > .sub {
	display:none;
	background:#f3f3f3;
	width:100%;
	}
	.header-nav .header-memu .sub-menu > .sub > ul > li.active > .sub{
	display:block;
	}
	.header-nav .header-memu .sub-menu > .sub > ul > li > .sub  > ul > li{
	border-bottom:none;}
	.header-nav .header-memu .sub-menu > .sub > ul > li > .sub  > ul > li:first-child{
	padding-top:10px;
	}
	.header-nav .header-memu .sub-menu > .sub > ul > li > .sub  > ul > li:last-child{
	padding-bottom:10px;
	}
	.header-nav .header-memu .sub-menu > .sub > ul > li > .sub > ul > li > a {
	display: flex;
    align-items: center;
    padding: 0.5em 36px;
    transition: 0.6s;
    width: 100%;
    font-size: 1.3em;}
	.header-nav .header-memu .sub-menu > .sub > ul > li > .sub > ul > li > a:before {content:"-"; margin-right:0.5em;}
	.header-nav .header-memu .sub-menu > .sub > ul > li > .sub > ul > li.active > a {color:#004098; font-weight:bold;}
	
	#nav-back {position:fixed; top:60px; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); z-index:11; visibility:hidden; opacity:0; transition: all 1s ease;}
	
	#header.active .header-nav {
	visibility:visible; 
	opacity:1; 
	right:0;
	border-top:2px solid #000;
	padding-bottom:160px;}
	#header.active + #nav-back {visibility:visible; opacity:1;}
	
	#sideNav {display: none;}
}

@media all and (max-width:768px){
	.header-util .logo img {max-height:1.5em;}
	.header-body .logo {font-size:1.8em; bottom:0.4em;}
	.header-nav {width:100%;}
}

@media all and (max-width:480px){
	.header_wrap{
	width:calc(100% - 32px);
	}
	.header-nav .header-memu > li > a{
	font-size:1.9rem;
	padding:19px 16px;}
	.header-nav .header-memu .btn-menudrop:before, .header-nav .header-memu .btn-menudrop:after{
	width:20px;}
	.header-nav .header-memu .sub-menu > .sub > ul > li > a{
	padding:17px 0 13px 17px;
	font-size:1.6rem;
    }
}

@media all and (max-width:340px){
	.header-logo .mayor_link{
	background-size: auto 30px;
	width:210px;
	}
	.header_wrap.active .header-logo .mayor_link {
    background-size: auto 30px;}
}
/* header-sns-group */
.header-sns-group {display: none;}
@media all and (min-width:1400px){
	.header-nav {letter-spacing: -0.05em;}
	.header-sns-group {display: block;position: absolute;width: 115px;height: 36px;bottom: 16px;right: calc(50% - 695px);}
	.header-sns-group .sns-btn {display: block;width: 100%;height:100%;padding-left: 24px;background: url(../img/common/ico-chat-red.png) no-repeat 0 0/24px;line-height: 34px;text-align: center;font-weight: 800;font-size: 1.56em;}
    .header-sns-group .sns-btn:hover, .header-sns-group .sns-btn:active, .header-sns-group .sns-btn:focus {color: #004098;}
    .header-nav .header-memu .sub-menu > .sub > ul {position: relative; overflow: hidden; /* min-height: 160px; */}
    /* .header-nav .header-memu .sub-menu > .sub > ul:before {content: ""; position: absolute; top:0; left:270px; width: 1px; height: 100%; background: #ddd;} */
    /* .header-nav .header-memu .sub-menu > .sub > ul:after {content: ""; position: absolute; top:0; left:540px; width: 1px; height: 100%; background: #ddd;} */
}

/* --------------------  footer */
footer {padding: 5.3rem 0 6.5rem 0; background: #242534;}
footer .in_footer {display: flex; flex-direction: column; align-items: center; gap: 2.9rem;}
footer .footer_sns_list {display: none;}
footer .bt_bx {display: flex; align-items: flex-end; gap: 2.4rem;}
footer .text_bx {text-align: center;}
footer .tit {font-size: 1.7rem; color: #fff; margin-bottom: 1rem;}
footer .txt {font-size: 1.6rem; font-weight: 400; color: #ffffff; opacity: 0.4;}

@media screen and (max-width: 1024px) {
	footer {padding: 4rem;}
	footer .footer_sns_list {display: flex; gap: 1.4rem;}
}

@media screen and (max-width: 768px) {
	footer {padding: 3rem;}
	footer .in_footer {gap: 1.9rem;}
	footer .bt_bx {flex-direction: column; align-items: center; gap: 2.1rem;}
	footer .bt_bx img {width: 3.4rem;}
	footer .tit {font-size: 1.4rem; margin-bottom: 1.1rem;}
	footer .txt {font-size: 1.4rem;}
}

/* --------------------  sub layout */
#container .container-inner {background:#fff;}

#contents {margin-bottom:5em; font-size: 1.8rem; letter-spacing:-0.1px;}
#contents .content{
	padding-bottom:0;
}
#contents:after {content:""; clear:both; display:block;}
#contents .titPage {font-family: "NotoSans", sans-serif; line-height: 1; font-weight: bold; color:#333;}

#sideNav {position:relative; width:220px; padding-bottom:100px;}
#sideNav .sideNavTit {position:relative; text-align:center; padding:1.5em 1em 1.5em; color:#fff; font-size:1.6em; word-break:keep-all; line-height: 1.2; margin-bottom: 40px; background:linear-gradient(90deg, #ec008d 0%, #ba1c8e 35%, #a4238f 55%, #6b2d91 100%);}
/*
#sideNav .sideNavTit:before {content:""; display:block; position:absolute; top:calc(100% - 20px); left:0; right:0; height:40px; background:#004098; transform:skewY(-10deg); z-index:-1;}
*/
#sideNav .sideNavMenu .btnMenuDropDown {display:none !important;}
#sideNav .sideNavMenu > ul > li {position: relative;}
#sideNav .sideNavMenu > ul > li .btnMenuDropDown {display:block; position:absolute; top:0; right:0; overflow:hidden; text-indent:-9999px;}
#sideNav .sideNavMenu > ul > li .btnMenuDropDown:before {content:''; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:url('../../assets/img/common/bg_arrow_sidenav_depth1.png');}
#sideNav .sideNavMenu > ul > li > .btnMenuDropDown {top:0; right:0; width:30px; height:45px;}
#sideNav .sideNavMenu > ul > li > .btnMenuDropDown:before {width:13px; height:13px; background-position:0 0;}
#sideNav .sideNavMenu > ul > li > a {display:block; padding: 0.5em 1em 0.5em 2em; font-size: 1.2em; letter-spacing:-0.5px; line-height: 1.2; border-bottom: 1px solid #ccc; position: relative;}
#sideNav .sideNavMenu > ul > li > a:before {content:""; display:none; width:3px; height:3px; background:#004098; position:absolute; top:1em; left:1.25em;}
#sideNav .sideNavMenu > ul > li > a > span {font-weight:bold;}
#sideNav .sideNavMenu > ul > li > a:hover {color:#f52089;}
#sideNav .sideNavMenu > ul > li.active > a {color:#f52089;}
#sideNav .sideNavMenu > ul > li.active > a:before {display:block;}
#sideNav .sideNavMenu > ul > li.active > .btnMenuDropDown:before, #sideNav .sideNavMenu > ul > li > .btnMenuDropDown:hover:before, #sideNav .sideNavMenu > ul > li > .btnMenuDropDown:focus:before {background-position:-20px 0;}
#sideNav .sideNavMenu > ul > li.active > ul {display:block;}
#sideNav .sideNavMenu > ul > li > ul {display:block; padding:4px 18px 10px; background:#f7f7f7; border-bottom:1px solid #ccc;}
#sideNav .sideNavMenu > ul > li > ul > li {position:relative;}
#sideNav .sideNavMenu > ul > li > ul > li > a {display:block; padding:5px 20px; font-size:110%; border-bottom:1px solid #ccc;}
#sideNav .sideNavMenu > ul > li > ul > li:last-child > a {border-bottom:0;}
#sideNav .sideNavMenu > ul > li > ul > li > .btnMenuDropDown {top:6px; right:0; width:20px; height:20px;}
#sideNav .sideNavMenu > ul > li > ul > li > .btnMenuDropDown:before {width:9px; height:9px; background-position:-40px 0;}
#sideNav .sideNavMenu > ul > li > ul > li.active > a {font-weight:bold; color:#004098;}
#sideNav .sideNavMenu > ul > li > ul > li.active > .btnMenuDropDown:before, #sideNav .sideNavMenu > ul > li > ul > li > .btnMenuDropDown:hover:before, #sideNav .sideNavMenu > ul > li > ul > li > .btnMenuDropDown:focus:before {background-position:-60px 0;}
#sideNav .sideNavMenu > ul > li > ul > li.active > ul {display:block;}
#sideNav .sideNavMenu > ul > li > ul > li > ul {display:block; padding:10px 16px; margin-bottom:5px; background:#eee; border-radius:3px;padding:6px 3px 6px 21px !important;}
#sideNav .sideNavMenu > ul > li > ul > li > ul > li {position:relative;}
#sideNav .sideNavMenu > ul > li > ul > li > ul > li > a {display:block; padding:2px 0; color:#666;}
#sideNav .sideNavMenu > ul > li > ul > li > ul > li.active > a {color:#333; font-weight:bold; text-decoration:underline;}
#sideNav .sideNavMenu > ul > li > ul > li > ul > li > .btnMenuDropDown { width:25px; height:25px; right:0; }
#sideNav .sideNavMenu > ul > li > ul > li > ul > li .btnMenuDropDown:before {margin:-4.5px 0 0 -4.5px; width:9px; height:9px; background-position:-40px 0;}
#sideNav .sideNavMenu > ul > li > ul > li > ul > li.active > .btnMenuDropDown:before, #sideNav .sideNavMenu > ul > li > ul > li > ul > li.btnMenuDropDown:hover:before, #sideNav .sideNavMenu > ul > li > ul > li >  ul > li .btnMenuDropDown:focus:before {background-position:-60px 0;}
#sideNav .sideNavMenu > ul > li > ul > li > ul > li > ul > li { padding:3px 8px 2px 10px; position:relative;background: #e2e2e2; margin-right: 10px;}
#sideNav .sideNavMenu > ul > li > ul > li > ul > li > ul > li a:before { content:""; width:3px; height:3px; position:absolute; top:47% !important; left:5% !important; background:#c7c7c7; }
#sideNav .sideNavMenu > ul > li > ul > li > ul > li > ul > li a { padding-left:4px; color:#666; }
#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;}
#sideNav .sideNavMenu > ul > li > ul > li > ul > li > ul > li.active > a {color:#686868; font-weight:bold; text-decoration:none;}

#location.mo{
	display:block;
}

#location.pc{
	display:none;
}
#location .lineMap{
	padding:0 46px;
	display:flex;	
	flex-direction:row;
	justify-content:flex-start;
	align-items:center;
}

#location .lineMap .home {
position:relative;
padding:23px 32px 20px 0;
}
#location .lineMap .home:after{
	content: '';
    display: block;
    width: 1px;
    height: 12px;
    background: #979797;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

#location .lineMap span{
	padding:0 16px;
	display:block;
	width:auto;
	position:relative;
	white-space:nowrap;
}
#location .lineMap span:after{
	display:block;
	content:'';
	width:1px;
	height:12px;
	background:#979797;
	position:absolute;
	right:0;
	top:6px;
}
#location .lineMap span:last-child:after{
	display:none;
}
.location_list{
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:flex-start;
}
.location_list > li{
	display:block;
	position:relative;
}
.location_list > li > span{
	padding:23px 32px 28px 48px;
	display:block;
	width:260px;
	position:relative;
	cursor:pointer
}
.location_list > li > span:after{
	content:'';
	display:block;
	width:1px;
	height:12px;
	background:#979797;
	position:absolute;
	top:30px;
	right:0;
}
.location_list > li > span > img{
	position:absolute;
	top:33px;
	right:32px;
	transition:all 0.3s;
}
.location_list > li > span.on > img{
	transform:rotate(180deg);
	transition:all 0.3s;
}
.location_list > li > ul{
	display:none;
	width:100%;
	position:absolute;
	top:100%;
	left:0;
	border:1px solid #000;
	background:#fff;
	padding:0 23px;
	z-index:2;
}
.location_list > li > ul.on{
	display:block
}
.location_list > li > ul > li{
	display:block;
	width:100%;
}
.location_list > li > ul > li > a{
	display:block;
	width:100%;
	padding:15px 0;
	border-bottom:1px solid #dbdbdb;
	color:#555;
	position:relative;
}
.location_list > li > ul > li:last-child > a{
	border-bottom:0;
}
.location_list > li > ul > li > a[target="_blank"]:after{
	position: absolute;
    top: 50%;
    right: 0;
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    padding: 0 5px;
    background: url(/humanframe/global/assets/img/old/icon_button_b.png) no-repeat center -434px;
}

#location ul.shareArea {float: right;}
#location ul.shareArea > li {float: left; position: relative;}
#location ul.shareArea > li > a {position:relative; display:block; width:30px; height:30px; overflow:hidden; text-indent:-9999px;}
#location ul.shareArea > li > a:before {content:''; position:absolute; top:50%; left:50%; background:url('../../assets/img/common/sp_ico_layout.png') no-repeat 0 9999px;}
#location ul.shareArea > li.share > a:before {margin:-8px 0 0 -8px; width:16px; height:16px; background-position:0 -26px;}
#location ul.shareArea > li.print > a:before {margin:-8.5px 0 0 -9px; width:18px; height:17px; background-position:0 -54px;}
#location ul.shareArea > li.on > a:before {display:block; content:''; position:absolute; top:50%; left:50%; width:7px; height:12px; margin:-6px 0 0 -3px; background:url('../../assets/img/common/sp_ico_snsArrow.png') no-repeat 0 0;}
#location ul.shareArea > li .shareBox {display:none; position:absolute; top:0; right:30px;}
#location ul.shareArea > li.on .shareBox {display:block;}
#location .shareBox ul.shareList {width:150px;}
#location .shareBox ul.shareList:after {display:block; content:''; clear:left;}
#location .shareBox ul.shareList > li {float:left; width:20%;}
#location .shareBox ul.shareList > li > a {display:block; width:30px; height:28px; overflow:hidden; text-indent:-9999px;}
#location .shareBox ul.shareList > li > a:before {display:block; content:''; width:29px; height:27px; background:url('../../assets/img/common/sp_ico_sns.png') no-repeat 0 9999px}
#location .shareBox ul.shareList > li.naverband a:before {background-position:0 0;}
#location .shareBox ul.shareList > li.bookmark a:before {background-position:-29px 0;}
#location .shareBox ul.shareList > li.kakaostory a:before {background-position:-58px 0;}
#location .shareBox ul.shareList > li.twitter a:before {background-position:-87px 0;}
#location .shareBox ul.shareList > li.facebook a:before {background-position:-116px 0;}
#location .shareBox ul.shareList > li.naverband a:hover:before,
#location .shareBox ul.shareList > li.naverband a:focus:before {background-position:0 -37px;}
#location .shareBox ul.shareList > li.bookmark a:hover:before,
#location .shareBox ul.shareList > li.bookmark a:focus:before {background-position:-29px -37px;}
#location .shareBox ul.shareList > li.kakaostory a:hover:before,
#location .shareBox ul.shareList > li.kakaostory a:focus:before {background-position:-58px -37px;}
#location .shareBox ul.shareList > li.twitter a:hover:before,
#location .shareBox ul.shareList > li.twitter a:focus:before {background-position:-87px -37px;}
#location .shareBox ul.shareList > li.facebook a:hover:before,
#location .shareBox ul.shareList > li.facebook a:focus:before {background-position:-116px -37px;}

.nav_back_pc{
	display:none;
	background:rgba(0,0,0,0.6);
	position:fixed;
	bottom:0;
	left:0;
	width:100vw;
	height:calc(100vh - 127px);
	z-index:-2;
}
.nav_back_pc.on{
	display:block;
}

@media all and (min-width: 1025px) {
	#contents {
	width:100%;
	padding:72px 0px;
	}
	
	#contents .titPage {
    border-top: 1px solid #dcdcdc;
    padding-top: 36px;
    font-size: 6.0rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 120px;
    position:relative;
    }
	#contents .titPage:before{
	content:'';
	display:block;
	width:67px;
	height:2px;
	background:#000;
	left:50%;
	top:0;
	transform:translate(-50%);
	position:absolute;
	}
	
	#sideNav {border-left:1px solid #ccc; border-right: 1px solid #ccc;}
}

@media all and (max-width: 1024px) {
	#contents { 
		font-size:1.5rem; 
	}
	
	#location .lineMap{
	padding:0;
	}
	#contents .titPage{
	font-size: 25px;
    font-weight: 800;
    text-align: center;
    padding: 37px 0 27px;
    margin-bottom: 72px;
    border-bottom: 1px solid #dcdcdc;
    width: calc(100% - 60px);
    margin: 0 auto 72px;
    position:relative
	}
	#contents .titPage:after{
	content:'';
	display:block;
	width:67px;
	height:2px;
	background:#000;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
	position:absolute;
	}
	#contents .content{
		padding: 0 0 40px;
	}
	#location{
	position:static;}
	.location_list > li > span{
	font-size:15px;
    padding: 15px 32px 20px 48px;
	}
	#location .lineMap .home{
	padding:19px 20px 19px 0;
	}
	.location_list > li > span > img{
	top:24px;
	}
}

@media all and (max-width: 768px) {
	#contents .content{
		width:100%;
		margin:0 auto;
	}
}

@media all and (min-width:768px){
	#location.pc{
		display:block;
		width: 100%;
		background: #fff;
		position: static;
	}

	#location .lineMap span{
		width: 260px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;	
	}
	.location_list > li > span > img{
		position: static;
	}
	#location.mo{
		display:none;
	}
		
		.inner-content > .pc{
		display:block;}
	}

	@media all and (min-width:1025px){
		#location.pc{
			display:block;
			width: 100%;
			background: #fff;
			position: absolute;
			top: -57px;
			left: 0;
		}	
}

@media all and (max-width:632px){
	#location .lineMap{
	padding:0;}
	#location .lineMap .home{
	padding:23px 0 23px;
	width:44px;}
	#location .lineMap .home > img{
	display:block;
	margin:0;}
	.location_list{
	width:calc(100% - 50px);
	}
	.location_list > li{
	display:none;
	}
	.location_list > li:last-child{
	width:100%;
	display:block;
	}

	.location_list > li > ul > li > a{font-size:2.5rem;}
	


	.location_list > li > span{
	width:100%;}
}

@media all and (max-width: 480px) {
	#location .lineMap .home {
	padding:16px 0 16px;
	width:50px;
	}
	.location_list > li > span{
	padding:13px 8px 16px 11px;
	}
	.location_list > li > span > img{right:10px;}
	.location_list > li > button{
	right:16px;}
	#contents .content{
	padding:0 0 40px;}
	#contents .titPage{
	width:calc(100% - 32px);
	padding:27px 0 20px;
	margin:0 auto 40px;
	}
}

@media all and (max-width:360px){
	#location .lineMap .home{
		width:30px;
	}
	#location .lineMap span{
		padding:0 8px;
	}
}

.boardList tbody td {font-size: 1.65rem;}

@media screen and (max-width: 1025px) {
	.boardList tbody td {font-size: 1.5rem;}
}

iframe > .layout.in-between {
	max-width: 100% !important;
	padding: 0 !important;
}