@charset "UTF-8";

@font-face {
	font-family: 'NotoSansJP';
	font-style: normal;
	font-weight: 200;
	src: url(/humanframe/global/assets/css/font/NotoSansJP/NotoSansJP-Light.otf) format('opentype');
}

@font-face {
	font-family: 'NotoSansJP';
	font-style: normal;
	font-weight: 300;
	src: url(/humanframe/global/assets/css/font/NotoSansJP/NotoSansJP-Light.otf) format('opentype');
}

@font-face {
	font-family: 'NotoSansJP';
	font-style: normal;
	font-weight: 400;
	src: url(/humanframe/global/assets/css/font/NotoSansJP/NotoSansJP-Regular.otf) format('opentype');
}

@font-face {
	font-family: 'NotoSansJP';
	font-style: normal;
	font-weight: 500;
	src: url(/humanframe/global/assets/css/font/NotoSansJP/NotoSansJP-Medium.otf) format('opentype');
}

@font-face {
	font-family: 'NotoSansJP';
	font-style: normal;
	font-weight: 700;
	src: url(/humanframe/global/assets/css/font/NotoSansJP/NotoSansJP-Bold.otf) format('opentype');
}

@font-face {
	font-family: 'NotoSansJP';
	font-style: normal;
	font-weight: 900;
	src: url(/humanframe/global/assets/css/font/NotoSansJP/NotoSansJP-black.otf) format('opentype');
}

*{
	box-sizing:border-box;}
html{
	overflow-x: hidden;
	font-size:62.5%;
}
body{
	font-family: 'NotoSansJP', sans-serif;
	font-weight:400;
	line-height:1.2;
	font-size:1.6rem;
	min-width:280px;
	margin:0 auto;
    min-height: 100vh;
    letter-spacing:-0.5px;
    overflow:hidden;
    color:#000;
    word-break:keep-all;
}

select, input, textarea, button{
	font-family:inherit;
}
img{
	vertical-align: top;
	image-rendering: -webkit-optimize-contrast;
}
a, a:hover, a:focus{
	text-decoration:none;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.mo{display: block;}
.pc{display: none;}
button:focus{
	border:none;
	outline:none;
}

/*----------------Header*/
header{
    display: block;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    position: fixed;
    top: 0;
    left: 50%;
    background: #fff;
    z-index: 10;
    box-shadow: none;
    transform: translateX(-50%);
}
header > .header_wrap{
    display: block;
    width: calc(100% - 200px);
    margin: 0 auto;
}
header > .header_wrap > .header_bx{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position:relative;
    padding: 0;
}
.logo > h1 > a{
    display: block;
    width: 228px;
    aspect-ratio: 228 / 71;
    background-image: url(/humanframe/theme/domoheon/assets/img/common/logo.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    position: relative;
    z-index: 2;
    margin: 17px 0;
}
.nav_wrap{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
.nav{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    position:relative;
    right:48px;
}
.nav.off{
	display:none;
}
.nav > .depth_1{
	display:block;
	width:auto;
	padding:43px 0 40px 70px;
}
.nav > .depth_1:first-child{
	padding-left:0;
}
.nav > .depth_1 > a{
	font-size:1.25em;
	font-weight:500;
	line-height:1em;
}
.nav > .depth_1 > .depth_2{
    display: none;
    position: absolute;
    top: 100%;
    left: -170px;
    width: auto;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 0;
    background: none;
    z-index: 2;
    white-space: nowrap;
}
.nav > .depth_1:last-child > .depth_2{
    justify-content: flex-end;
    right: -185px;
    left: inherit;
}
.nav > .depth_1 > .depth_2.on{
	display:flex;
}
.nav > .depth_1 > .depth_2 > li{
	padding:0 18px;
	position:relative;
}
.nav > .depth_1 > .depth_2 > li:first-child{
	padding-left:0;
}
.nav > .depth_1 > .depth_2 > li:last-child{
	padding-right:0;
}
.nav > .depth_1 > .depth_2 > li::before{
	display:block;
	content:'';
	width:2px;
	height:13px;
	background:#000;
	position:absolute;
	top:50%;
	right:0;
	transform:translateY(-50%);
}
.nav > .depth_1 > .depth_2 > li:last-child::before{
	display:none;
}
.nav > .depth_1 > .depth_2 > li > a{
	font-size: 1.125em;
    font-weight: 400;
    color: #000;
    line-height: 1em;
}
.lnk_eng{
	font-size: 0.75em;
    padding: 4px 8px;
    border: 1px solid #080808;
    font-weight: 600;
    border-radius: 40px;
    color: #080808;
    margin:0 50px;
}

/* 2025-06-24 언어선택 추가 */
.globalBtn a {
	display: block;
	width: 72px;
	font-size: 16px;
	padding: 5px 0;
	border: 1px solid #080808;
	font-weight: 400;
	border-radius: 20px;
	color: #080808;
	margin-right: 50px;
	position: relative;
	background: #fff;
	text-align: center;
}

.globalBtn .list {
	display: none;
	position: absolute;
	bottom: -68px;
	flex-direction: column;
	gap: 3px;
	z-index: 10;
}

.globalBtn .list.on {
	display: flex;
}

.globalBtn .list>li a:hover {
	background: #080808;
	color: #fff;
}


.sitemap_btn {
	display: flex;
	width: auto;
	height: 32px;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.sitemap_btn>span {
	width: 38px;
	background: #080808;
	height: 2px;
	transition: 0.3s;
}

.sitemap_btn>span:nth-child(2) {
	width: 18px;
	margin: 6px 0;
}

.sitemap_btn>span:nth-child(3) {
	width: 28px;
}

.sitemap_btn.on>span:first-child,
.sitemap_btn.on>span:last-child {
	height: 2px;
	top: 0;
	transform: rotate(45deg) translateY(-1.5px);
	padding: 0;
	left: 0;
	width: 38px;
	transition: 0.3s;
}

.sitemap_btn.on>span:nth-child(2) {
	display: none;
}

.sitemap_btn.on>span:last-child {
	transform: rotate(-45deg) translate(2px, -1px);
	bottom: inherit;
	top: 0;
}

.nav_depth2_bg {
	display: none;
	position: absolute;
	bottom: 100%;
	background: #f8f8f8;
	border-top: 2px solid #d6d6d6;
	top: 100%;
	width: 100%;
	left: 0;
	height: 60px;
}

.nav_wrap.on .nav_depth2_bg {
	display: block;
}

.sitemap_wrap {
	display: none;
	width: 100vw;
	position: absolute;
	top: 100%;
	left: -100px;
	padding: 40px;
	background-color: #fff;
	z-index: 5;
	opacity: 0;
	height: 0;
	animation-duration: 0.3s;
	animation-name: close_map;
	animation-fill-mode: forwards;
	overflow-y: scroll;
}

@keyframes close_map {
	from {
		opacity: 1;
		height: calc(100vh - 99px);
	}

	to {
		opacity: 0;
		height: 0;

	}
}

.sitemap_wrap.on {
	display: block;
	animation-duration: 0.3s;
	animation-name: show_map;
	animation-fill-mode: forwards;
}

@keyframes show_map {
	from {
		opacity: 0;
		height: 0;
	}

	to {
		opacity: 1;
		height: calc(100vh - 81px);

	}
}

.sitemap_bx {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	border-top: 2px solid #262626;
	border-bottom: 2px solid #262626;
	width: 100%;
	max-width: 1047px;
	margin: 0 auto;
}

.sitemap {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	padding: 28px 16px;
	width: 100%;
	border-bottom: 1px solid #262626;
}

.sitemap>.st_depth_1 {
	text-align: right;
	margin-right: 62px;
	width: 200px;
	flex-shrink: 0;
}

.sitemap>.st_depth_1>a {
	font-weight: 700;
	font-size: 1.5em;
	line-height: 1em;
}

.sitemap>ul {
	display: flex;
	flex-wrap: wrap;
	row-gap: 16px;
}

.sitemap .st_depth_2 {
	position: relative;
	padding-right: 22px;
	margin-right: 22px;
}

.sitemap .st_depth_2:last-child {
	padding-right: 0;
	margin-right: 0;
}

.sitemap .st_depth_2::after {
	display: block;
	content: '';
	width: 3px;
	height: 16px;
	position: absolute;
	background: #000;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}

.sitemap .st_depth_2:last-child::after {
	display: none;
}

.sitemap .st_depth_2 > a {
	font-size: 1.375em;
	font-weight: 500;
	line-height: 1em;
	white-space: nowrap;
}

.nav>.menu_wrap>.depth01>.depth02.on {
	display: flex;
	animation-duration: 0.3s;
	animation-name: show_dep2;
	animation-fill-mode: forwards;
}

@keyframes show_dep2 {
	from {
		opacity: 0;
		height: 0;
	}

	to {
		opacity: 1;
		height: auto;

	}
}
.nav > .menu_wrap > .depth01:hover > .depth02::before{
	display:block;
	content:'';
	width:8px;
	height:8px;
	background:#e5007e;
	border-radius:4px;
	position:absolute;
	left:50%;
	top:-18px;
	margin-left:-4px;
	opacity:1;
	transition:0.3s ease-in;
}
.nav > .menu_wrap > .depth01 > .depth02 > li{
	display:block;
	width:100%;
	margin:12px 0;
}
.nav > .menu_wrap > .depth01 > .depth02 > li > a{
	display:inline-block;
	font-size:1.6rem;
	line-height:1em;
	margin:0 auto;
	font-weight:600;
	transition:0.3s ease-in;
}
.nav > .menu_wrap > .depth01 > .depth02 > li:hover > a{
	color:#000;
	text-decoration:underline;
	transition:0.3s ease-in;
}
.nav_bg{
    display: none;
    width: 100vw;
    height:0;
    position: absolute;
    top: 108px;
    box-shadow: 0px 7px 10px rgba(0,0,0,0.21);
    border-top: 1px solid #efefef;
	transition:0.3s all;
	background:#fff;
}
.nav_bg.on{
	display:flex;
    height: 323px;
	animation-duration: 0.3s;
	animation-name: show;
  	animation-fill-mode: forwards;
}

@keyframes show {
  from {
    opacity:0;
    height:0;
  }

  to {
    opacity:1;
    height: 323px;
    
  }
}
.header_item{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
.mobile_menu{
	display:none;
}


/*----------------Header*/
#container{
    margin: 104px auto 0;
	display:block;
	width:100%;
	max-width:1920px;
}
@media all and (max-width:1280px){
	#container{
		margin-top:81px;
	}
}
@media all and (max-width:576px){
	#container{
		margin-top:57px;
	}
}

/*----------------Footer*/

footer {
	display: block;
	width: 100%;
	background: #545454;
	color: #fff;
	letter-spacing: 0 !important;
}

footer .footer_wrap {
	width: calc(100% - 320px);
	max-width: 1600px;
	margin: 0 auto;
	padding: 24px 0 29px;
}

footer .footer_top {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	position: relative;
	margin: 0 auto;
}

footer .footer_top>.link_bx {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%);
}

footer .footer_top>.link_bx>li {
	text-decoration: underline;
	font-weight: 700;
}

footer .footer_top>.link_bx>li:nth-child(2) {
	margin: 0 46px;
}
.slt_link_site{
	position:relative;
}
.btn_link_site{
    width: 218px;
    text-align: left;
    padding: 10px 15px;
    font-weight: 700;
    position:relative;
    background-color:#fff;
    position:relative;
    font-size:1em;
}
.btn_link_site::after{
	display:block;
	content:'';
	width:36px;
	height:36px;
	position:absolute;
	right:0;
	top:5px;
    background-image: url(/humanframe/theme/domoheon/assets/img/common/btn_slide_arrow_down.png);
    background-repeat: no-repeat;
    background-size: 10px auto;
    background-position: right 16px center;
	transition:0.3s;
}
.btn_link_site.on::after{
	transform:rotate(180deg);
	transition:0.3s;
	right: 6px;
}
.link_site_list{
    display: none;
    opacity:0;
    background: #fff;
    color: #333;
    padding: 16px 0;
    border: 1px solid #dedede;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(calc(-100% - 8px));
    max-height: calc(32px + 10em);
    overflow-y: scroll;
    font-size: 0.875em;
    line-height: 2em;
    z-index:20;
}
.link_site_list.on{
	display:block;
	animation-duration: 0.3s;
	animation-name: siteshow;
  	animation-fill-mode: forwards;
}

@keyframes siteshow {
  from {
    opacity:0;
  }

  to {
    opacity:1;
    
  }
}
.link_site_list > li{
	display:block;
	width:100%;
}
.link_site_list > li > a{
    padding: 0 16px;
}
.footer_bottom{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.copyright_bx{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 40px;
    font-size: 0.875em;
    font-weight: 400;
	row-gap: 10px;
	flex-wrap: wrap;
}
.copyright_bx>.add,
.copyright_bx .call,
.copyright_bx>.copy {
	margin-right: 35px;
}

.copyright_bx>.add {
	margin-right: 26px;
}

.copyright_bx>.call_area {
	display: flex;
}

.copyright_bx .call {
	position: relative;
	margin-right: 18px;
}

.copyright_bx .call::before {
	content: '';
	position: absolute;
	top: 4px;
	right: -10px;
	width: 1px;
	height: 10px;
	background: #fff;
	opacity: 0.3;
}


@media all and (max-width:1600px){
	header > .header_wrap{
	width:calc(100% - 160px);
	}
	.sitemap_wrap{
		left:-80px;
	}
	footer .footer_wrap{
	    width: calc(100% - 160px);
	}
	
}
@media all and (max-width:1280px){
	header > .header_wrap{
		width:calc(100% - 64px);
	}
	.logo > h1 > a{
		width:160px;
		margin:16px 0;
	}
	.sitemap_wrap{
		left:-32px;	
	}
	.globalBtn .list {
		bottom: -80px;
	}
	.globalBtn a {
		margin-right: 30px;
	}
	.nav{
		display:none;
	}
	footer .footer_wrap{
	    width: calc(100% - 64px);
	}
}
@media all and (max-width:1080px){
	.sitemap > .st_depth_1{
		margin-right:32px;
	}
}
@media all and (max-width:1040px){
	.sitemap > .st_depth_1{
		width:162px;
		margin-right: 40px;
	}
	.sitemap > .st_depth_1 > a {
    	font-size: 1.25em;
    	word-break:keep-all;
	}
	.sitemap .st_depth_2 > a {
    	font-size: 1.125em;
	}
	.sitemap > ul {
		row-gap: 10px;
	}
}
@media all and (max-width:800px){
	body{
		font-size:1.5rem;
	}
	.lnk_eng{
	margin:0 16px;
	}
	.sitemap_wrap{
		left:-32px;
	}
	.sitemap{
		flex-wrap:wrap;
	}
	.sitemap > .st_depth_1{
	    width: 100%;
	    margin: 0;
	    text-align: left;
	    margin-bottom: 30px;
	    font-size: 1em;
	    line-height:1em;
	}
	.sitemap > .st_depth_1 > a{
		font-size:2em;
	}
	.sitemap > .st_depth_2{
		width:50%;
		margin-right:0;
		padding-right:0;
	}
	.sitemap .st_depth_2 > a{
	    font-size: 1.5em;
	    line-height:1em;
	    text-align: left;
    }
    .sitemap > .st_depth_2::after{
    	display:none;
    }
	.sitemap > ul {
		row-gap: 20px;
	}
	footer .footer_wrap{
		padding:43px 0 53px;
	}
	footer .footer_top{
	    justify-content: space-between;
	    margin-bottom: 40px;
	    align-items: flex-start;
	}
	footer .footer_top > .link_bx{
	    position: static;
	    transform: inherit;
	    flex-direction: column;
	    justify-content: flex-start;
	}
	footer .footer_top > .link_bx > li:nth-child(2){
		margin: 16px 0;
	}
	.btn_link_site{
		font-size:1.2em;
	}
	.btn_link_site::after {
		top: 7px;
	}
	.copyright_bx{
		row-gap: 0;
		margin-top:28px;
		flex-direction:column;
	}
	.copyright_bx > .add,
	.copyright_bx > .copy{
		margin-right:0;
		margin-bottom:9px;
	}
	
}
@media all and (max-width:576px){
	header > .header_wrap{
		width:calc(100% - 32px);
	}
	.logo > h1 > a{
		width:134px;
		margin:8px 0;
	}
	.sitemap_wrap{
		left:-16px;
	}
	.sitemap{
		padding:14px 14px 0;
	}
	.sitemap > .st_depth_1 {
		margin-bottom: 16px;	
	}
	.sitemap > ul {
		row-gap: 10px;
		margin-bottom: 14px;
	}
	.sitemap > .st_depth_1 > a{
	    font-size: 1.2em;
	}
	.sitemap .st_depth_2 > a{
	    font-size: 1em;
    }
	.globalBtn .list {
		gap: 2px;
		bottom: -65px;
	}
	.globalBtn a {
		width: 55px;
		font-size: 14px;
		padding: 4px 0 2px 0;
		margin-right: 21px;
	}
    
	@keyframes close_map {
	  from {
	    opacity:1;
	    height: calc(100vh - 95px);
	  }
	
	  to {
	    opacity:0;
	    height:0;
	    
	  }
	}
	@keyframes show_map {
	  from {
	    opacity:0;
	    height:0;
	  }
	
	  to {
	    opacity:1;
	    height: calc(100vh - 57px);
	    
	  }
	}
	footer .footer_wrap{
		padding:16px 0 20px;
	    width: calc(100% - 32px);
	}
	footer .footer_top{
		margin-bottom:40px;
	}
	footer .footer_top > .link_bx{
		font-size:0.9em;
	}
	footer .footer_top > .link_bx > li:nth-child(2){
		margin:16px 0;
	}
	.btn_link_site{
		font-size:1em;
		width:160px;
		padding-right: 17px;
	}
	.btn_link_site::after {
		top: 4px;
		right: 8px;
	}
	.btn_link_site.on::after {
		right: 5px;
	}
	.link_site_list {
		line-height: 1em;
	}
	.link_site_list > li {
		margin-bottom: 8px;
	}
	.link_site_list > li:last-child {
		margin-bottom: 0;
	}
	.copyright_bx{
		margin-top:10px;
		font-size:0.9em;
	}
	
}
@media all and (max-width:480px) {
	.sitemap .st_depth_2 {
		width: 100%;
	}
	.sitemap .st_depth_2::after {display: none;}
}
/*----------------Footer*/


#container .container-inner {
	background:#fff;
}
/*----------------Preset*/
.text_hidden{
	display:block;
	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;
}
.mb23{
	margin-bottom:23px !important;
}
.mb112{
	margin-bottom:112px !important;
}

.textline-1{
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.textline-2{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.textline-3{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
/*---------------------ㅡSideMenu*/
.sideNavMenu > ul > li > button,
.sideNavMenu > ul > li > ul{
	display:none;
}