@charset "UTF-8";

@font-face {
	font-family:'Pretendard'; font-style:normal; font-weight:300;
	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/Pretendard-SemiBold.woff2) format('woff2'), 
	url(/humanframe/global/assets/css/font/Pretendard/Pretendard-SemiBold.woff) format('woff'),
	url(/humanframe/global/assets/css/font/Pretendard/Pretendard-SemiBold.otf) format('opentype');
}
@font-face {
	font-family:'Pretendard'; font-style:normal; font-weight:700;
	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:800;
	src:url(/humanframe/global/assets/css/font/Pretendard/Pretendard-ExtraBold.woff2) format('woff2'), 
	url(/humanframe/global/assets/css/font/Pretendard/Pretendard-ExtraBold.woff) format('woff'),
	url(/humanframe/global/assets/css/font/Pretendard/Pretendard-ExtraBold.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: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');
}
@font-face {
	font-family:'BusanSans'; font-style:normal; font-weight:400;
	src:url(/humanframe/global/assets/css/font/Busan/BusanSans-Light.otf) format('opentype');
}
@font-face {
	font-family:'BusanSans'; font-style:normal; font-weight:500;
	src:url(/humanframe/global/assets/css/font/Busan/BusanSans-Medium.otf) format('opentype');
}
@font-face {
	font-family:'BusanSans'; font-style:normal; font-weight:600;
	src:url(/humanframe/global/assets/css/font/Busan/BusanSans-Bold.otf) format('opentype');
}

:root {
  --mainColor: #1e4da4;
  --lightColor: #ebf0fa;
  --darkColor: #1b3e7f;
  --lineColor:#dcdcdc;
  --darkLine:#3c3b40;
}



* {
    box-sizing:border-box;
}
html {
	font-size:62.5%; scroll-behavior: smooth;
}
body {
	font-family: "Pretendard", sans-serif; line-height:1.4; font-weight:500; overflow-x: hidden; min-width:340px; margin:0 auto; color:#222; letter-spacing:-0.05em; word-break:keep-all; font-size: 1.8rem; position: relative;
}
select, input, textarea, button {
	font-family:inherit;
}
img {
	vertical-align: top; image-rendering: -webkit-optimize-contrast;
}
a, a:hover, a:focus {
	text-decoration:none;
}

.mo360 {
    display: none;
}
.mo {
    display: none;
}
.tab1024{
    display: none;
}
.pc {
    display: block;
}
.blindTxt{
	position:absolute; clip:rect(0 0 0 0); width:1px; height:1px; margin:-1px; left:-9999em;
}


/* reset */
a:active, a:hover, a:focus {
    text-decoration: none;
}

/* 공통영역 */
header, section, footer {
    width: 100%; position: relative;
}


/* header */
header{
    display: block; width:100%; margin:0 auto; /*background:linear-gradient(to bottom, #0e327a, #1e4da4 70%);*/ position: fixed; top:0; left:50%; transform: translateX(-50%); z-index: 1000; perspective: 1000px;  background:#1e4da4;
}
header a, header p, header button{
    color:#fff;
}
.headerBottom,
.headerTop{
    display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding:0 60px; margin:0 auto;
}

.headerTop {
    height:40px; opacity: 1;transform: translateY(0) scale(1); transform-origin: top center; transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; z-index:10;
    /* background:linear-gradient(to bottom, #0e327a, #1e4da4); */
}
.headerTop.hide{
    transform: translateY(-30px) scale(0.9); height: 0; opacity: 0; transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.headerTop > .headerTxt{
    padding-left:37px; font-size: 1.4rem; line-height:1em; background-image: url(/humanframe/theme/busan22/assets/img/newCommon/iconNoori.png); background-repeat: no-repeat; background-position: left center; background-size: auto;
}
.headerTopUtil{
    display: flex; flex-direction: row;justify-content: flex-end; align-items: stretch;
}
.headerTopUtil > li{
    position: relative; padding:13px 16px; font-size: 1.4rem; transition: ease 0.3s;
}
.headerTopUtil > li > a,
.headerTopUtil > li > button{
    display: block; line-height:1em;
}
.headerTopUtil > li.global-sel,
.global-sel{
    position: relative; transition: ease 0.3s;
}
.global-sel > button > span{
    padding-right:16px; position: relative;
}
.headerTopUtil > li:hover,
.global-sel.active{
    background:#1b3e7f; transition: ease 0.3s;
}
.global-sel > button > span::after{
    display: block; position: absolute; content:''; width:10px; height: 4px; background-image: url(/humanframe/theme/busan22/assets/img/newCommon/iconGlbArrow.png); background-size: auto; background-position: center; background-repeat: no-repeat; top:50%; right:0; margin-top:-2px; transition: ease 0.3s;
}
.global-sel.active > button > span::after{
    transform: rotate(180deg); transition: ease 0.3s;
}
.global-ul{
    position: absolute; top:100%; right:0; height:0; overflow: hidden; opacity: 0; transition: ease 0.3s; padding:0px 14px; border: 1px solid var(--darkColor); background:#fff; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap:12px; z-index: 2;
}
.global-sel.active > .global-ul{
    height:auto; opacity: 1; padding:20px 14px; transition: ease 0.3s;
}
.global-ul a{
	font-family:'Noto Sans KR'; letter-spacing:-0.02em; color:#222; display: block; line-height:1em; font-size: 1.3rem; transition: 0.2s;
}
.global-ul a:hover{
    color:var(--mainColor); transition: 0.2s;
}

.headerBottom{
    position: relative;
    /* background:#1e4da4; */
}
.logo{
    display: block; width:157px; height: 41px;
}
.logo > a{
    display: block; width:100%; height:100%; background-image: url(/humanframe/theme/busan22/assets/img/newCommon/logo.png); background-repeat: no-repeat; background-position: center; background-size: auto;
}
.headerBottom > .menuWrap{
    display: block;
}
.headerBottom > .menuWrap::after{
    display: block; content:''; width:100vw; height:0; background:#fff;overflow: hidden; opacity: 0; position: absolute; top:100%; left:0; z-index: 9; transition:0.3s;
}
.headerBottom > .menuWrap.on::after{
    height: var(--menuAfterHeight); opacity: 1; border-bottom:2px solid var(--mainColor); transition:0.3s;
}
.headerBottom > .menuWrap > .menuList{
    display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start;
}
.headerBottom > .menuWrap > .menuList > li{
    position: relative; width:209px;
}
.headerBottom > .menuWrap > .menuList > li > .depth01{
    padding:25px 0 30px; font-size: 2.2rem; font-weight: 600;display: block;
}
.headerBottom > .menuWrap > .menuList > li > .depth01 > p{
    position: relative; text-align: center;
}
.headerBottom > .menuWrap > .menuList > li > .depth01 > p::after{
    display: block; content:''; width:0px;height:0px; background:#fff; opacity: 0; position: absolute; top:-10px; left:50%; margin-left:0; border-radius:7px; transition: 0.3s;
}
.headerBottom > .menuWrap > .menuList > li:hover > .depth01 > p::after{
    opacity: 1; width:7px; height:7px; top:-20px;margin-left:-3.5px; transition: ease-out 0.3s;
}
.headerBottom > .menuWrap > .menuList > li > .depth02{
    display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap:24px; position: absolute; top:100%; left:0; z-index: 10; padding:0px 30px; width:100%; height:0; overflow: hidden; opacity: 0; transition: 0.3s; border-left:1px solid var(--lineColor);
}
.headerBottom > .menuWrap > .menuList > li:nth-child(1) > .depth02{
    gap:33px;
}
.headerBottom > .menuWrap > .menuList > li:last-child > .depth02{
    border-right:1px solid var(--lineColor);
}
.headerBottom > .menuWrap.on > .menuList > li > .depth02{
    height: var(--menuAfterHeight); opacity: 1; padding:38px 30px; transition: 0.3s;
}
.headerBottom > .menuWrap > .menuList > li > .depth02 a{
    color:#000; line-height: 1em; display: block; white-space: nowrap;
}
.headerBottom > .menuWrap > .menuList > li:hover > .depth02{
    background:#ebf0fa;
}
.headerBottom > .menuWrap > .menuList > li > .depth02 a:hover{
    font-weight: 700; color:var(--mainColor);
}
.headerBottom > .menuWrap > .menuList > li > .depth02.depart a > span{
    padding-left:30px; position: relative;
}
.headerBottom > .menuWrap > .menuList > li > .depth02.depart a > span::before{
    display: block; content:''; width:20px; height:20px; background-repeat: no-repeat; background-size: 120% auto; background-position: center;position: absolute; left:0; top:50%; margin-top:-10px;
}
.headerBottom > .menuWrap > .menuList > li > .depth02.depart li:nth-child(1) a > span::before{
    background-image: url(/humanframe/theme/busan22/assets/img/newMain/iconDepart01.png);
}
.headerBottom > .menuWrap > .menuList > li > .depth02.depart li:nth-child(2) a > span::before{
    background-image: url(/humanframe/theme/busan22/assets/img/newMain/iconDepart02.png);
}
.headerBottom > .menuWrap > .menuList > li > .depth02.depart li:nth-child(3) a > span::before{
    background-image: url(/humanframe/theme/busan22/assets/img/newMain/iconDepart03.png);
}
.headerBottom > .menuWrap > .menuList > li > .depth02.depart li:nth-child(4) a > span::before{
    background-image: url(/humanframe/theme/busan22/assets/img/newMain/iconDepart04.png);
}
.headerBottom > .menuWrap > .menuList > li > .depth02.depart li:nth-child(5) a > span::before{
    background-image: url(/humanframe/theme/busan22/assets/img/newMain/iconDepart05.png);
}
.headerBottom > .menuWrap > .menuList > li > .depth02.depart li:nth-child(6) a > span::before{
    background-image: url(/humanframe/theme/busan22/assets/img/newMain/iconDepart06.png);
}
.headerBottom > .menuWrap > .menuList > li > .depth02.depart li:nth-child(7) a > span::before{
    background-image: url(/humanframe/theme/busan22/assets/img/newMain/iconDepart07.png);
}
.headerBottom > .menuWrap > .menuList > li > .depth02.depart li:nth-child(8) a > span::before{
    background-image: url(/humanframe/theme/busan22/assets/img/newMain/iconDepart08.png);
}
.headerBottom > .menuWrap > .menuList > li > .depth02.depart li:nth-child(9) a > span::before{
    background-image: url(/humanframe/theme/busan22/assets/img/newMain/iconDepart09.png);
}
.headerBottom > .menuWrap > .menuList > li > .depth02.depart li:nth-child(10) a > span::before{
    background-image: url(/humanframe/theme/busan22/assets/img/newMain/iconDepart10.png);
}
.headerBottom > .menuWrap > .menuList > li > .depth02.depart li:nth-child(11) a > span::before{
    background-image: url(/humanframe/theme/busan22/assets/img/newMain/iconDepart11.png);
}
.headerBottom > .menuWrap > .menuList > li > .depth02.depart li:nth-child(12) a > span::before{
    background-image: url(/humanframe/theme/busan22/assets/img/newMain/iconDepart12.png);
}
.depth02 .menuMore{
    display: none;
}
.depth03{
    display: none;
}
.headerBottom > .headerBottomUtil{
    display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap:20px;
}
.headerBottom > .headerBottomUtil a,
.headerBottom > .headerBottomUtil .menuBtn{
    display: block; width:24px; height:24px; background-position: center; background-repeat: no-repeat; background-size: auto;
}
.headerBottom > .headerBottomUtil .searchBtn{
    background-image: url(/humanframe/theme/busan22/assets/img/newCommon/iconSearch.png);
}
.headerBottom > .headerBottomUtil .menuBtn{
    background-image: url(/humanframe/theme/busan22/assets/img/newCommon/iconMenu.png);
}
/*모바일 메뉴*/
.mobileMenuBck,
.mobileMenuBottom,
.mobileMenuTop{
    display: none;
}

/* Content */
main{
    padding-top:125px; width:100%;
}
/* Footer */
footer{
    display: block; width:100%; margin:0 auto; background:#242534; color:#fff;
}
.footerInner{
    width:100%;padding:0 160px; margin:0 auto; font-size: 1.7rem;
}
.footerTop{
    display: flex; flex-direction: row; justify-content: space-between; align-items: center; width:100%; border-bottom: 1px solid #585965;  padding:20px 0 17px;
}
.footerTopUtil{
    display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
}
.footerTopUtil > li:not(:last-of-type) {
    padding-right:15px;margin-right:18px; position: relative;
}
.footerTopUtil > li:not(:last-of-type)::after{
    display: block; content:''; width:1px; height:12px; background:#7f7481; position: absolute; top:50%; margin-top:-6px; right:0;
}
.footerTopUtil > li > a{
    color:#fff;
}
.familySite{
    display: flex; flex-direction: row; justify-content: flex-end; align-items: flex-end; gap:20px;
}
.familySite > .cell{
    background:#1c1d2a;
}
.familySite > .cell > ul > li{
    position: relative;
}
.familySite > .cell > ul > li > a{
    display:block; color:#aaabb6; width:255px; padding:13px 20px 14px 32px; position: relative; border:1px solid #1c1d2a; transition: ease 0.3s;
}
.familySite > .cell > ul > li > a.open{
    color:#fff; border:1px solid #0f1019; transition: ease 0.3s;
}
.familySite > .cell > ul > li > a::after{
    display: block; position: absolute; content:''; width:10px; height: 4px; background-image: url(/humanframe/theme/busan22/assets/img/newCommon/iconGlbArrow.png); background-size: auto; background-position: center; background-repeat: no-repeat; top:50%; right:20px; margin-top:-2px; transition: ease 0.3s;transform:rotate(180deg);
}
.familySite > .cell > ul > li > a.open::after{
    transform:rotate(0deg);transition: ease 0.3s;
}
.familySite > .cell > ul > li > ul{
    display: block !important; position: absolute; height:0px; bottom: 100%; overflow-y: scroll; width:100%;background:#1c1d2a;border:1px solid #0f1019; opacity: 0; -ms-overflow-style: none; scrollbar-width: none; transition: ease 0.3s;
}
.familySite > .cell > ul > li > a.open ~ ul {
    height:300px; opacity:1; transition: ease 0.3s;
}
.familySite > .cell > ul > li > ul::-webkit-scrollbar{
    display: none;
}
.familySite > .cell > ul > li > ul > li > a{
    display:block; font-size: 1.7rem; font-weight: 600; color:#aaabb6; padding:19px 25px; transition: 0.2s; line-height:1em;
}
.familySite > .cell > ul > li > ul > li > a:hover{
    color:#fff; background:#585965; transition: 0.2s;
}
.footerBottom{
    display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; width:100%; padding:27px 0 43px;
}
.footerBottom a{
    color:#fff;
}
.footerInfoWrap > .cthInfo{
    padding-left:93px; background-image: url(/humanframe/theme/busan22/assets/img/newCommon/footerLogo.png); background-size: auto; background-repeat: no-repeat; background-position: top 2px left 4px;margin-bottom:32px;
}
.footerInfoWrap > .cthInfo > .address{
    display: block; line-height: 1em; margin-bottom:14px;
}
.footerInfoWrap > .cthInfo > .mobileCall{
    display: none;
}
.footerInfoWrap > .cthInfo > .cthInfoLink{
    display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap:20px; flex-wrap: wrap;
}
.footerInfoWrap > .cthInfo > .cthInfoLink > li > a{
    line-height:1em; display: block; position: relative;
}
.footerInfoWrap > .cthInfo > .cthInfoLink > li > a::after{
    display: block; content:''; width:100%; height:2px; background:#d7d7d9; left:0; bottom:-4px;
}
.copyRight{
    font-size: 1.6rem; color:#95959a; padding-left:93px; line-height:1em;
}
.footerLinkWrap{
    display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end;
}
.footerSnsList{
    display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap:16px; margin-bottom:30px;
}
.footerSnsList > li{
    height:24px;
}
.footerSnsList > li > a{
    display: block;height:100%; background-size: auto; background-position: center; background-repeat: no-repeat; 
}
.footerSnsList > li:nth-child(1) > a{
    width:21px; background-image: url(/humanframe/theme/busan22/assets/img/newCommon/iconFooter01.png);
}
.footerSnsList > li:nth-child(2) > a{
    width:18px; background-image: url(/humanframe/theme/busan22/assets/img/newCommon/iconFooter02.png);
}
.footerSnsList > li:nth-child(3) > a{
    width:23px; background-image: url(/humanframe/theme/busan22/assets/img/newCommon/iconFooter03.png);
}
.footerSnsList > li:nth-child(4) > a{
    width:17px; background-image: url(/humanframe/theme/busan22/assets/img/newCommon/iconFooter04.png);
}
.footerSnsList > li:nth-child(5) > a{
    width:13px; background-image: url(/humanframe/theme/busan22/assets/img/newCommon/iconFooter05.png);
}
.footerSnsList > li:nth-child(6) > a{
    width:28px; background-image: url(/humanframe/theme/busan22/assets/img/newCommon/iconFooter06.png);
}
.footerSnsList > li:nth-child(7) > a{
    width:63px; background-image: url(/humanframe/theme/busan22/assets/img/newCommon/iconFooter07.png);
}
.footerCtct{
    display: flex; flex-direction: row; justify-content: flex-end; align-items: flex-start; gap:40px;
}
.CertList{
    display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap:24px;
}
.CertList > li{}
.CertList > li > a{
    display: block; background-repeat: no-repeat; background-position: center; background-size: auto;
}
.CertList > li:nth-child(1) > a{
    background-image: url(/humanframe/theme/busan22/assets/img/newCommon/footerWA.png); width:96px; height:72px;
}
.CertList > li:nth-child(2) > a{
    background-image: url(/humanframe/theme/busan22/assets/img/newCommon/footerKorea.png); width:81px; height:74px;
}
.CtctBx{
    display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; gap:10px; font-size: 1.6rem; font-weight: 400;
}
.callcenter{
    display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap:20px;
}
.callcenter > .txt{
    white-space: pre-line;
}
.callcenter > .num{
    font-size: 3.5rem; font-weight: 600; line-height: 1em;
}


@media (max-width: 1726px) {
    
    .footerInner{
        padding:0 80px;
    }
}
@media (max-width: 1600px) {
    .headerBottom, .headerTop{
        padding:0 30px;
    }
    .footerInner{
        padding:0;
    }
    .footerTop{
        padding:20px 30px 17px;
    }
    .footerBottom{
        padding:36px 30px 43px;
    }
}
@media (max-width: 1480px) {
    .headerBottom, .headerTop{
        padding:0 20px;
    }
    .headerBottom > .menuWrap > .menuList > li{
        width:160px;
    }
    .headerBottom > .menuWrap > .menuList > li > .depth02{
        padding:0px 15px; gap:20px;
    }
    .headerBottom > .menuWrap.on > .menuList > li > .depth02{
        padding:20px 15px;
    }
    .headerBottom > .menuWrap > .menuList > li:nth-child(1) > .depth02{
        gap:28px;
    }
    .headerBottom > .menuWrap > .menuList > li > .depth02 a{
        font-size: 1.6rem; line-height:1em;
    }
    .footerInner{
        padding:0;
    }
    .footerTop{
        flex-direction: column-reverse; align-items: flex-end; gap:24px;
    }
    .footerBottom {
        padding: 36px 30px 30px;
    }
    
}
@media (max-width: 1280px) {
    .headerBottom > .menuWrap > .menuList > li{
        width:140px;
    }
    .headerBottom > .menuWrap.on > .menuList > li > .depth02{
        padding:20px 10px;
    }
    .headerBottom > .menuWrap > .menuList > li > .depth02.depart a > span{
        padding-left:24px;
    }
    .footerSnsList{
        display: none;
    }
    .footerCtct{
        gap:20px;
    }
    .callcenter{
        gap:10px;
    }
}
@media (max-width: 1024px) {

    /*hover reset*/
    .headerBottom > .menuWrap > .menuList > li:hover > .depth02{
        background:inherit;
    }
    .headerTop{
        display: none;
    }
    .logo{
        margin:26px 0 35px;
    }
    .headerBottom > .menuWrap{
        display: flex; position:absolute; top:0; right:0; transform: translateX(100%); width:0; overflow: hidden; max-width:570px; transition:0.3s;  flex-direction: column; justify-content: flex-start; align-items: flex-start; z-index: 9; 
    }
    .menuWrap > .mobileMenuBck{
        display:block; width:0; height:100vh; position: fixed; top:0; right:0; background:rgba(0,0,0,0.8); opacity: 0; transition:0.1s;
    }
    .menuWrap.on > .mobileMenuBck{
        width:100vw; opacity: 1; transition:0.1s;
    }
    .mobileMenuBottom, .mobileMenuTop{
        display: flex; position: relative; flex-direction: row; width:100%;z-index: 10;  
    }
    .mobileMenuTop{
        justify-content: space-between; align-items: center; padding:0 100px 0 40px;border-bottom:1px solid #5778b5;background:#0e327a;
    }
    .mobileMenuBottom{
       background:#1e4da4;
    }
    .mobileMenuTop .global-sel{
        z-index: 11;
    }
    .mobileMenuTop .global-ul{
        z-index: 11;
    }
    .headerBottom{
        z-index: 9;
    }
    .headerBottom > .menuWrap{
        height:100vh;
    }
    .headerBottom > .menuWrap.on{
        transform: translateX(0); width:100%; transition:0.3s; overflow: visible;
    }
    .headerBottom > .headerBottomUtil .menuBtn.on{
        background-image: url(/humanframe/theme/busan22/assets/img/newCommon/iconMenuClose.png); position: relative; z-index: 10;
    }
    .headerTopUtil{
        display: grid; grid-template-columns: repeat(4, 1fr); width:100%;
    }
    .headerTopUtil > li{
        text-align: center; font-size: 1.8rem;
    }
    .headerTopUtil > li:first-child{
        border-left:0;
    }
    .headerBottom > .menuWrap.on::after{
        display: none;
    }
    .headerBottom > .menuWrap > .menuList{
        flex-direction: column; width:100%; position: relative; flex:1 1 0; background:#eaeff8; z-index: 1;
    }
    .headerBottom > .menuWrap > .menuList > li{
        width:100%; display: flex; flex-direction: row; justify-content: flex-start; align-items:flex-start; position:static;
    }
    .headerBottom > .menuWrap > .menuList > li > .depth01{
        width:210px; background:#eaeff8; padding:20px 0 20px 30px; border-bottom:1px solid #fff; font-size: 2rem;transition: 0.3s;
    }
    .headerBottom > .menuWrap > .menuList > li.on > .depth01{
        background:#294476; font-weight:500; padding-left:38px; transition: 0.3s;
    }
    .headerBottom > .menuWrap > .menuList > li > .depth01 > p{
        color:#000; text-align: left; font-weight: 500;
    }
    .headerBottom > .menuWrap > .menuList > li.on > .depth01 > p{
        color:#fff;
    }
    .headerBottom > .menuWrap > .menuList > li > .depth01 > p::after{
        display: none;
    }
    .headerBottom > .menuWrap > .menuList > li > .depth02{
        position: absolute; top:0; left:inherit; right:0; background:#fff !important; height:0 !important;  display: flex; flex-direction: column; justify-content: flex-start;align-items: center;width:calc(100% - 210px); padding:0 26px !important; height:0; transition: 0.3s;
    }
    .headerBottom > .menuWrap > .menuList > li.on > .depth02{
      height:100% !important; padding:10px 26px !important; transition: 0.3s; overflow-y: scroll;
    }
    .headerBottom > .menuWrap > .menuList > li > .depth02,
    .headerBottom > .menuWrap > .menuList > li:nth-child(1) > .depth02{
        gap:0;
    }
    .headerBottom > .menuWrap.on > .menuList > li > .depth02 > li{
        display: flex; flex-direction: row;justify-content: flex-start; align-items: stretch; width:100%; border-bottom:1px solid var(--lineColor);flex-wrap: wrap;
    }
    .headerBottom > .menuWrap.on > .menuList > li > .depth02 > li > a{
        display: block; width:auto; padding:20px 0; font-size: 1.8rem;
    }
    .depth02 .menuMore{
        display: flex; flex:1 1 0; width:100%; flex-direction: row; justify-content: flex-end; align-items: center;
    }
    .depth03{
        display: flex; flex-direction:column;justify-content: flex-start; align-items: flex-start; gap:24px; padding:0 12px; background:#f8f8f8; height:0; width:100%; overflow: hidden; transition:0.3s;
    }
    .depth03.on{
        padding:14px 12px; height:auto; transition:0.3s;
    }
    .depth03 > li > a{
        padding-left:16px; position: relative; display: block; line-height:1em; color:#222;
    }
    .depth03 > li > a::before{
        display:block; content:''; width:4px; height:4px; border-radius: 4px; background:#a3a3a3; position: absolute; left:0; top:50%; margin-top:-2px;
    }

    .ico{
        margin-left:0; width:16px; height:16px;
    }
    .ico.ico-plus:before, .ico.ico-plus:after{
        width:100%; transition:0.3s;
    }
    .depth02 > li.on .ico.ico-plus::before{
        opacity: 0; transition:0.3s;
    }
    .depth02 > li.on .ico.ico-plus:after{
        transform: translate(-50%, -50%) rotate(180deg); transition:0.3s;
    }



    main{
        padding-top:102px;
    }

    .footerTop{
        padding:22px 20px;
    }
    .footerBottom{
        padding:36px 20px 30px;
    }
    .footerTopUtil{
        align-self: center; flex-wrap: wrap;
    }
    .footerInfoWrap > .cthInfo{
        margin-bottom:26px;
    }
    .CtctBx{
        display: none;
    }
}
@media (max-width: 768px) {
    
    .headerTopUtil > li,
    body{
        font-size: 1.6rem;
    }
    .mobileMenuTop{
        padding:0 60px 0 20px;
    }
    .footerInner{
        font-size: 1.5rem;
    }
    .logo{
        width:108px; height:28px; margin:15px 0;
    }
    .logo > a{
        background-size: 100% auto;
    }
    .headerBottom > .menuWrap > .menuList > li > .depth01{
        font-size:1.8rem;
    }
    .headerBottom > .menuWrap.on > .menuList > li > .depth02 > li > a{
        font-size: 1.6rem;
    }
    .headerBottom > .menuWrap > .menuList > li > .depth02 ul,
    .headerBottom > .menuWrap > .menuList > li > .depth02 a{
        font-size: 1.4rem;
    }
    .depth03{
        gap:16px;
    }
    
    main{
        padding-top:58px;
    }
    .familySite > .cell > ul > li > ul > li > a{
        font-size: 1.5rem;
    }
}
@media (max-width: 600px) {
    .footerTop{
        padding:0; gap:0;
    }
    .footerTopUtil{
        padding:20px;
    }
    .footerCtct{
        display: none;
    }
    .familySite{
        display: grid; grid-template-columns: repeat(2, 1fr); width:100%; gap:0;
    }
    .familySite > .cell{
        border-bottom:1px solid #0f1019;
    }
    .familySite > .cell:first-child{
        border-right:1px solid #0f1019;
    }
    .familySite > .cell > ul > li > a{
        width:100%;
    }
    .footerBottom{
        flex-direction: column; padding:20px 20px 30px;
    }
    .footerInfoWrap > .cthInfo{
        background:none; padding:0;
    }
    .footerInfoWrap > .cthInfo > .mobileCall{
        display: block; margin-bottom:22px;
    }
    .copyRight{
        padding:0;
    }

}
@media (max-width: 570px) {
    .headerBottom > .menuWrap > .menuList > li > .depth01{
        width:40%;
    }
    
    .headerBottom > .menuWrap > .menuList > li > .depth02{
        width:60%;
    }
    .headerTopUtil > li{
        padding:13px 0; text-align: center;
    }
    .headerTopUtil > li:nth-child(3){
        padding:13px 8px;
    }
    
}