/******************************************************* header *******************************************************/ #header{position: relative; z-index: 1000;} #header .max-width{max-width: 1680rem; align-items: center; height: 100%; padding: 0; text-align: left;} #header .area-header-navigation{height: 107rem; position: relative; } #header .area-header-navigation.active .backBg::after{opacity: 1;} #header .area-header-navigation .positionWrap{align-items: center; position: relative; z-index: 2; background-color: #fff; height: 100%;} #header .area-header-navigation .area-header-logo {margin-right: 96rem; display: inline-flex; align-items: center;} #header .area-header-navigation .area-header-logo img { display:block; height: 35rem; } #header .area-header-navigation .rightWrap{align-items: center; margin: 0 0 0 auto;} #header .area-header-navigation .program-search {background-color: #E2E2E5; border-radius: var(--edm-radiusFull); isolation: isolate; padding: 8rem 24rem; display: flex; align-items: center; font: var(--edm-f-body1); letter-spacing: var(--edm-f-body1-ls); font-weight: 400;} #header .area-header-navigation .program-search a {position:relative; letter-spacing: inherit;} #header .area-header-navigation .program-search a + a{position: relative; margin-left: 25rem;} #header .area-header-navigation .program-search a + a::before{content: ''; position: absolute; left: -11rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 10rem; z-index: 4; background-color: var(--edm-color-text-1);} #header .area-header-navigation .program-search .icon-box{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/main/common/header_search_icon_new.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; width: 24rem; height: 24rem; display: inline-block; margin-right: 12rem;} #header .gnb{height: 100%;} /* 로그인 */ #header .area-header-utility {margin: 0 20rem; } #header .area-header-utility .pc{display: flex;} #header .area-header-utility .mobile{display: none;} #header .area-header-utility a{display: inline-flex; align-items: center; } /* 패밀리 사이트 */ #header .mo-family-site{display: none;} /************************************ 전체 메뉴 ************************************/ /* 버튼 */ #header .allMenuBtn {display:block; width: 23rem; height: 18rem; box-sizing:border-box; overflow:hidden; z-index: 99999; position: relative;} #header .siteMapIcon{position: relative; z-index: -1;} #header .allMenuBtn .bar{width: 100%; height: 2rem; background-color: var(--edm-color-text-1); position: absolute; left: 0; transform-origin: left; transition: all 0.3s ease; border-radius: var(--edm-radiusFull); isolation: isolate;} #header .allMenuBtn .bar:nth-child(1){top: 0;} #header .allMenuBtn .bar:nth-child(2){top: 50%; transform: translateY(-50%);} #header .allMenuBtn .bar:nth-child(3){bottom: 0;} #header .allMenuBtn.close{height: 20rem; width: 20rem; position: absolute; top: 50%; right: 0; transform: translateY(-50%);} #header .allMenuBtn.close .bar:nth-child(1){transform: rotate(45deg);} #header .allMenuBtn.close .bar:nth-child(2){width: 0;} #header .allMenuBtn.close .bar:nth-child(3){transform: rotate(-45deg);} #header .allMenuBtn.close .bar{width: 26rem;} /* 전체 메뉴 */ #header .allMenuWrap{visibility: hidden; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100dvh; height: ca lc(var(--vh, 1vh) * 100); background-color: #fff; transition: all 0.5s ease; z-index: 99998; color: var(--edm-color-text-2); touch-action: none; pointer-events: none; padding-bottom: 40rem;} #header .allMenuWrap.open{visibility: visible; opacity: 1; touch-action: auto; pointer-events: auto; } #header .allMenuWrap .textWrap{color: var(--edm-color-text-1); padding: 40rem 0 60rem; font: var(--edm-f-h3); letter-spacing: var(--edm-f-h3-ls); background-color: #fff; text-align: left; position: sticky; top: 0; z-index: 3; height: 220rem;} #header .allMenuWrap .textWrap .max-width{position: relative; } #header .allMenuWrap .textWrap .allMenuBtn{position: relative; transform: none; top: auto; right: auto;} #header .allMenuWrap .textWrap .tabMenu-circle{margin-top: 32rem;} #header .allMenuWrap .textWrap .tabMenu-circle .tab.icon i{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/header/icon-header-shortcut-20.svg'); background-repeat: no-repeat; background-position: right center; background-size: contain; margin-left: 2rem; width: 20rem; height: 20rem;} #header .allMenuWrap .all-menu-wrap{display: flex; height: calc(100dvh - 260rem); height: calc(var(--vh, 1vh) * 100 - 260rem);} #header .allMenuWrap .all-menu-list{overflow: hidden; height: 100%; overflow-y: auto; position: relative; z-index: 2; } #header .allMenuWrap .all-menu-list::after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: -1;} #header .allMenuWrap .all-menu-list a.disabled{background-color: transparent !important; border: none !important; color: var(--edm-color-text-1) !important;} #header .allMenuWrap .all-menu-list .depth3 a.disabled{color: var(--edm-color-text-2) !important;} #header .allMenuWrap .all-menu-list > ul > li > a{color: var(--edm-brand-blue); font: var(--edm-f-h3); letter-spacing: var(--edm-f-h3-ls);} #header .allMenuWrap .all-menu-list > ul > li > .childrenWrap > ul{font: var(--edm-f-h2); letter-spacing: var(--edm-f-h2-ls); font-weight: 400; display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 32rem; column-gap: 24rem; row-gap: 24rem;} #header .allMenuWrap .all-menu-list .depth2 > a{margin-bottom: 12rem; display: block; transition: color 0.5s ease; color: var(--edm-color-text-1); font: var(--edm-f-h5); letter-spacing: var(--edm-f-h5-ls); font-weight: 600;} #header .allMenuWrap .all-menu-list .depth2 > .childrenWrap > ul{color: var(--edm-color-text-2); font: var(--edm-f-body2); letter-spacing: var(--edm-f-body2-ls); font-weight: 400;} #header .allMenuWrap .all-menu-list .depth2 > .childrenWrap > ul > li{padding-right: 24rem;} #header .allMenuWrap .all-menu-list .depth2 > .childrenWrap > ul > li + li{margin-top: 4rem;} #header .allMenuWrap .all-menu-list > ul > li + li{position: relative; margin-top: 40rem; padding-top: 40rem;} #header .allMenuWrap .all-menu-list > ul > li + li::before{content: ''; width: 100%; height: 1rem; position: absolute; top: 0; left: 0; background-color: #c5c5c5;} #header .allMenuWrap .all-menu-list .depth3.has-child > a{position: relative; padding-right: 20rem;} #header .allMenuWrap .all-menu-list .depth3.has-child > a::before, #header .allMenuWrap .all-menu-list .depth3.has-child > a::after{content: ''; position: absolute; background-color: var(--edm-color-text-1); top: 50%; transform: translateY(-50%); transition: all 0.3s ease; border-radius: var(--edm-radiusFull); isolation: isolate;} #header .allMenuWrap .all-menu-list .depth3.has-child > a::before{width: 10rem; height: 2rem; right: 0;} #header .allMenuWrap .all-menu-list .depth3.has-child > a::after{height: 10rem; width: 2rem; right: 4rem; } #header .allMenuWrap .all-menu-list .depth3.has-child.open > a::before{transform: rotate(180deg); } #header .allMenuWrap .all-menu-list .depth3.has-child.open > a::after{transform: rotate(90deg); opacity: 0;} #header .allMenuWrap .all-menu-list .depth3.has-child > .childrenWrap > ul{background-color: var(--edm-bg-neutral); border-radius: var(--edm-radius2); isolation: isolate; padding: 8rem 4rem; font: var(--edm-f-detail); letter-spacing: var(--edm-f-detail-ls); margin-top: 4rem; position: relative; display: none;} #header .allMenuWrap .all-menu-list .depth3.has-child > .childrenWrap > ul > li{padding-left: 14rem; position: relative; color: var(--edm-color-text-3);} #header .allMenuWrap .all-menu-list .depth3.has-child > .childrenWrap > ul > li::before{content: ''; position: absolute; left: 7rem; top: 10rem; width: 2rem; height: 2rem; border-radius: 50%; isolation: isolate; background-color: var(--edm-color-text-3);} /************************************************************** breadcrumb **************************************************************/ #breadcrumb-wrap .max-width{max-width: 1280rem; padding: 0 16rem;} #breadcrumb-wrap{font: var(--edm-f-detail); letter-spacing: var(--edm-f-detail-ls); font-weight: 400; color: var(--edm-color-text-3); background-color: var(--edm-bg-neutral); box-shadow: 0 1px 0 var(--edm-bg-neutral); white-space: nowrap;} #breadcrumb-wrap #breadcrumb{display: flex; align-items: center; height: 45rem; column-gap: 12rem;} #breadcrumb-wrap #breadcrumb .breadcrumb-con{cursor: pointer; position: relative; height: 100%;} #breadcrumb-wrap #breadcrumb .breadcrumb-con .breadcrumb-title{display: flex; align-items: center; height: 100%;} #breadcrumb-wrap #breadcrumb .breadcrumb-con .breadcrumb-title a{display: flex; align-items: center;} #breadcrumb-wrap #breadcrumb .breadcrumb-con .breadcrumb-title a[href="#"]{cursor: default;} #breadcrumb-wrap #breadcrumb .breadcrumb-con .breadcrumb-title i{width: 16rem; height: 16rem; margin-left: 4rem; transition: all 0.3s ease;} #breadcrumb-wrap #breadcrumb .breadcrumb-con .breadcrumb-title .breadcrumb-arrow{ display: inline-block; margin-left: 4rem; transition: all 0.3s ease;} #breadcrumb-wrap #breadcrumb .breadcrumb-con .breadcrumb-title .breadcrumb-arrow{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/header/breadcrumb-right.svg');} #breadcrumb-wrap #breadcrumb .breadcrumb-con.active.has-alternatives .breadcrumb-title .breadcrumb-arrow{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/header/breadcrumb-down-active.svg');} #breadcrumb-wrap #breadcrumb .breadcrumb-con.has-alternatives .breadcrumb-title .breadcrumb-arrow{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/header/breadcrumb-down.svg');} #breadcrumb-wrap #breadcrumb .breadcrumb-con .breadcrumb-list{position: absolute; padding: 14rem 8rem 10rem; top: 45rem; left: 0; display: none; z-index: 50;} #breadcrumb-wrap #breadcrumb .breadcrumb-con .breadcrumb-list::before{content: ''; position: absolute; left: 0; width: 100%; height: calc(100% - 4rem); bottom: 0; background-color: #fff; border-radius: var(--edm-radius2); isolation: isolate; box-shadow: var(--edm-sd-neutral-1); z-index: -1;} #breadcrumb-wrap #breadcrumb .breadcrumb-con .breadcrumb-list a{padding: 0 4rem; margin: 2rem 0; display: block; white-space: nowrap;} #breadcrumb-wrap #breadcrumb .breadcrumb-con .breadcrumb-list .current{padding: 0 4rem; margin: 2rem 0; display: block; white-space: nowrap; font-weight: 600; color: var(--edm-color-text-1);} #breadcrumb-wrap #breadcrumb .breadcrumb-con.active .breadcrumb-title{color: var(--edm-color-text-2); font-weight: 600;} #breadcrumb-wrap #breadcrumb .breadcrumb-con.active.has-alternatives .breadcrumb-title{cursor: pointer;} #breadcrumb-wrap #breadcrumb .breadcrumb-con.click .breadcrumb-title .breadcrumb-arrow{transform: rotate(180deg);} #breadcrumb-wrap #breadcrumb .breadcrumb-con.click .breadcrumb-title i{transform: rotate(-180deg);} #breadcrumb-wrap #breadcrumb .breadcrumb-con:last-child{flex: 1;} #breadcrumb-wrap #breadcrumb .breadcrumb-con:last-child .breadcrumb-title .breadcrumb-arrow.no-page{display: none;} /* only pc */ @media screen and (min-width: 1500px) { #header .gnb{display: flex;} #header .gnb .top-wrap{display: none;} #header .gnb .menu a.disabled{background-color: transparent !important; color: var(--edm-color-text-1) !important; border-color: transparent !important;} #header .gnb .menu .childrenWrap .depth3 a.disabled{color: var(--edm-color-text-3) !important;} #header .area-header-navigation .dim{position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; height: calc(var(--vh, 1vh) * 100); background-color: rgba(0,0,0,0.2); display: none;} #header .gnb .menu {display: flex; font: var(--edm-f-h5); letter-spacing: var(--edm-f-h5-ls); color: var(--edm-color-text-1); height: 100%;} #header .gnb .menu li.depth1 > a {position:relative;display:flex; align-items: center; width:100%; padding: 0 20rem; height: 100%; font: var(--edm-f-h5); letter-spacing: var(--edm-f-h5-ls); white-space:nowrap; font-weight: 500;} #header .gnb .menu li.depth1 > a::after{content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3rem; background-color: var(--edm-brand-primary); z-index: 1; transition: width 0.3s ease;} /* 바로가기 아이콘 추가 */ #header .gnb .menu li.depth1.icon > a i{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/header/icon-header-shortcut-20.svg'); background-repeat: no-repeat; background-position: right center; background-size: contain; margin-left: 2rem; width: 20rem; height: 20rem; } #header .gnb .menu li.depth1.icon:hover > a::after{display: none;} #header .gnb .menu li.depth1.icon:hover > a i{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/header/icon-header-shortcut-20-hover.svg')} #header .gnb .menu li.depth1:first-child > a{padding-left: 0;} #header .gnb .menu li.depth1:first-child > a::after{left: calc(50% - 10rem);} #header .gnb .menu li.depth1 > .childrenWrap{visibility: hidden; position:absolute; top: 107rem; left: 50%; transform: translateX(-50%); width: 100%; background-color: #fff; line-height: 150%; z-index: 10; touch-action: none; pointer-events: none;} #header .gnb .menu li.depth1 > .childrenWrap > ul {height: auto; max-width: 1680rem; margin: 0 auto; position: relative; opacity: 0; transition: opacity 1s ease; padding: 48rem 0 48rem; display: grid; grid-template-columns: repeat(6,1fr); column-gap: 24rem;} #header .gnb .menu li.depth1:hover > .childrenWrap > ul{opacity: 1;} #header .gnb .menu li.depth1:hover > .childrenWrap{visibility: visible; touch-action: auto; pointer-events: visible; border-top: 1rem solid var(--edm-color-border-neutral); box-shadow: 0 10rem 10rem rgba(0,0,0,0.1);} #header .gnb .menu li .depth2{padding-right: 32rem; margin-bottom: 60rem;} #header .gnb .menu li .depth2:nth-last-of-type(1), #header .gnb .menu li .depth2:nth-last-of-type(2), #header .gnb .menu li .depth2:nth-last-of-type(3), #header .gnb .menu li .depth2:nth-last-of-type(4), #header .gnb .menu li .depth2:nth-last-of-type(5){margin-bottom: 0;} #header .gnb .menu li .depth2.sub-main-menu{grid-row: 1/span 10; max-width: 260rem; padding: 0;} #header .gnb .menu li.depth2 > a{font-weight: 500; margin-bottom: 12rem; display: block; } #header .gnb .menu li.depth2.has-child > a:before {display: none;} #header .gnb .menu li.depth2.has-child > a:after {display: none;} #header .gnb .menu li.depth2 > .childrenWrap > ul {display: block !important; font: var(--edm-f-body1); letter-spacing: var(--edm-f-body1-ls); font-weight: 400; color: var(--edm-color-text-3);} #header .gnb .menu li.depth3{font-weight: 400;} #header .gnb .menu li.depth3 + .depth3{margin-top: 8rem;} #header .gnb .menu li.depth3.has-child > a {position:relative;display:block;} #header .gnb .menu li.depth3.has-child > a:before {display:block;content:'';position:absolute; right: 0; top: 50%; width: 10rem; height:2rem; background:var(--edm-color-text-1); transition: transform 0.3s ease; border-radius: var(--edm-radiusFull); isolation: isolate;} #header .gnb .menu li.depth3.has-child > a:after {display:block;content:'';position:absolute; right: 0; top: 50%; transform: rotate(90deg); width: 10rem; height: 2rem; background: var(--edm-color-text-1); transition: transform 0.3s ease; border-radius: var(--edm-radiusFull); isolation: isolate;} #header .gnb .menu li.depth3.has-child.open > a::before{transform: rotate(90deg); width: 0;} #header .gnb .menu li.depth3.has-child.open > a::after{transform: rotate(180deg);} #header .gnb .menu li.depth3 > .childrenWrap > ul {display:none; margin-top: 12rem; padding: 12rem; background: var(--edm-bg-neutral); border-radius: var(--edm-radius2); isolation: isolate; font: var(--edm-f-body2); letter-spacing: var(--edm-f-body2-ls); color: var(--edm-color-text-3); font-weight: 400;} #header .gnb .menu li.depth4 {position:relative; padding-left: 8rem;} #header .gnb .menu li.depth4:before {content:'';position:absolute;top:50%;left:0;width:2rem;height:2rem;border-radius:50%; isolation: isolate;background:var(--edm-color-text-3); transform: translateY(-50%);} #header .area-header-utility{font: var(--edm-f-body2); letter-spacing: var(--edm-f-body2-ls); font-weight: 400;} #header .area-header-utility .member-util{display: flex; align-items: center; column-gap: 20rem;} #header .area-header-utility .member-util form{width: 32rem; height: 32rem;} #header .area-header-utility .member-util [class^='btn-']{width: 32rem; height: 32rem;} #header .area-header-utility .member-util [class^='btn-'] span{display: none;} #header .area-header-utility .member-util [class^='btn-'] i{background-repeat: no-repeat; background-position: center; background-size: contain; width: 32rem; height: 32rem; display: inline-block; } #header .area-header-utility .member-util .btn-mypage i{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/header/icon-person-32.svg');} #header .area-header-utility .member-util .btn-login i{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/header/icon-person-32.svg'); } #header .area-header-utility .member-util .btn-logout i{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/header/icon-logout-32.svg');} /******************************************************* 아트유학 링크로 바로 연결 (오픈 전까지 임시) *******************************************************/ #header .gnb .menu li.depth1.icon:hover .childrenWrap{visibility: hidden;} /************************************************************* hover effect *************************************************************/ @media (hover: hover) and (pointer: fine) { #header .gnb .menu li.depth1:hover > a::after{width: calc(100% - 40rem);} #header .gnb .menu li.depth1:first-child:hover > a::after{width: calc(100% - 20rem);} #header .gnb .menu li.depth1:hover > a{color: var(--edm-brand-primary); font-weight: 700;} #header .gnb .menu li.depth2:hover > a{color: var(--edm-brand-primary);} #header .gnb .menu li.depth3:hover > a{color: var(--edm-brand-primary);} #header .gnb .menu li.depth4 > a:hover{color: var(--edm-brand-primary);} } } @media screen and (max-width: 1712px) { #header .max-width{padding: 0 16rem;} #header .menu li.depth1 > .childrenWrap{padding-left: 16rem; padding-right: 16rem;} #header .allMenuWrap .textWrap .allMenuBtn{right: 16rem;} } /* tablet, mobile*/ @media screen and (max-width: 1499.98px) { #header {display:block; width:100%; position: fixed; top: 0; transform: translateY(0); transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);} #header.show{transform: translateY(0);} #header.hide{transform: translateY(-100%);} #header .area-header-navigation .dim{display: none;} /* 전체 메뉴 버튼 */ #header .area-header-navigation .allMenuBtn {display:none;} #header .allMenuWrap{display: none;} /* 모바일 메뉴 버튼 */ #header .area-header-navigation{border-bottom: none; position:relative;width:100%; height: 76rem;} #header .area-header-navigation .allMenuBtn{display: none;} #header .area-header-navigation .flex-wrap {position:relative;width:100%;height:100%;z-index:1;} #header .toggle-gnb {display: block; width: 24rem; height: 24rem; overflow: hidden; position: relative; margin-left: 8rem; cursor: pointer; background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/header/icon-toggle-gnb.svg'); background-repeat: no-repeat; background-size: contain; background-position: center;} /* 검색 영역 */ #header .area-header-navigation .program-search{margin: 0; padding: 4rem 8rem; font: var(--edm-f-detail); letter-spacing: var(--edm-f-detail-ls);} #header .area-header-navigation .program-search a + a{margin-left: 17rem;} #header .area-header-navigation .program-search a + a::before{left: -8rem; height: 8rem;} #header .area-header-navigation .program-search .icon-box{width: 16rem; height: 16rem; margin-right: 8rem;} /* 로고 */ #header .area-header-navigation .area-header-logo {position: relative; margin-right: 0; height: auto; } #header .area-header-navigation .area-header-logo img{height: 22rem;} /* 상단 영역 */ #header .mobile-nav-wrap.gnb{white-space: nowrap;} #header .mobile-nav-wrap.gnb .top-wrap{background-color: #fff; position: relative; z-index: 1; padding: 0 16rem; height: 172rem; display: block;} #header .mobile-nav-wrap.gnb .top-wrap::after{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1rem; background-color: #E2E2E5;} #header .mobile-nav-wrap.gnb .top-wrap .login-wrap{font: var(--edm-f-h4); letter-spacing: var(--edm-f-h4-ls); font-weight: 600;} #header .mobile-nav-wrap.gnb .top-wrap .login-wrap a{display: flex; align-items: center; gap: 4rem;} #header .mobile-nav-wrap.gnb .top-wrap .login-wrap a svg{width: 16rem; height: 16rem;} #header .mobile-nav-wrap.gnb .top-wrap .login-wrap a i{width: 24rem; height: 24rem; background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/header/icon-person-24.svg'); background-repeat: no-repeat; background-size: contain; background-position: center;} #header .mobile-nav-wrap.gnb .top-wrap .login-wrap .btn-logout{font: var(--edm-f-body2); letter-spacing: var(--edm-f-body2-ls); font-weight: 400; color: var(--edm-color-text-2); height: 27rem; line-height: 27rem; padding: 0 12rem; border-radius: var(--edm-radiusFull); isolation: isolate; background-color: var(--edm-bg-neutral); display: inline-block; text-align: center;} #header .mobile-nav-wrap.gnb .top-wrap .shortcut-wrap{font: var(--edm-f-body2); letter-spacing: var(--edm-f-body2-ls); justify-content: space-between; padding-top: 24rem; font-weight: 400; overflow: hidden; flex-wrap: nowrap; max-width: 328rem;} #header .mobile-nav-wrap.gnb .top-wrap .shortcut-wrap a{text-align: center;} #header .mobile-nav-wrap.gnb .top-wrap .shortcut-wrap a i{width: 60rem; height: 60rem; background-repeat: no-repeat; background-size: contain; background-position: center; background-color: var(--edm-bg-neutral); border-radius: 50%; isolation: isolate; overflow: hidden; margin-bottom: 4rem;} #header .mobile-nav-wrap.gnb .top-wrap .shortcut-wrap a i.program{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/header/icon-shortcut-program.svg');} #header .mobile-nav-wrap.gnb .top-wrap .shortcut-wrap a i.school{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/header/icon-shortcut-school.svg');} #header .mobile-nav-wrap.gnb .top-wrap .shortcut-wrap a i.kakao{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/header/icon-shortcut-kakao.svg');} #header .mobile-nav-wrap.gnb .top-wrap .shortcut-wrap a i.consultation{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/header/icon-shortcut-consultation.svg');} /* 메뉴 */ #header .mobile-nav-wrap.gnb #main-nav{height: calc(100% - 172rem); position: relative;} #header .mobile-nav-wrap.gnb .menu a.disabled{background-color: transparent !important; border: none; color: var(--edm-color-text-1) !important;} #header .mobile-nav-wrap.gnb .menu .depth3 > a.disabled{color: var(--edm-color-text-2) !important;} #header .mobile-nav-wrap.gnb{top: 76rem; height: calc(100dvh - 76rem); height: calc(var(--vh, 1vh) * 100 - 76rem); position: absolute; width: 100%; background-color: #fff; z-index: 10; right: 0; transform: translateX(100%); background-color: var(--edm-bg-neutral); transition: transform 0.65s cubic-bezier(0.165, 0.84, 0.44, 1); overflow: hidden;} #header .mobile-nav-wrap.gnb .menu{position: relative; height: 100%; overflow-x: hidden; overflow-y: auto; font: var(--edm-f-h5); letter-spacing: var(--edm-f-h5-ls); font-weight: 400; } #header .mobile-nav-wrap.gnb .menu::-webkit-scrollbar{display: none;} #header .mobile-nav-wrap.gnb .menu .depth1 > .childrenWrap{position: fixed; left: 120rem; bottom: 0; width: calc(100% - 120rem); overflow-y: auto; overflow-x: hidden; padding: 0; height: calc(100% - 172rem); -webkit-overflow-scrolling: touch; min-height: 0;} #header .mobile-nav-wrap.gnb .menu .depth1 > .childrenWrap > ul{display: none;} #header .mobile-nav-wrap.gnb .menu .depth1 > .childrenWrap > ul.sub-open{display: block;} #header .mobile-nav-wrap.gnb .menu .depth1 > .childrenWrap > ul > li{position: relative; border-bottom: 1rem solid var(--edm-color-border-neutral);} #header .mobile-nav-wrap.gnb .menu .depth1.active > .childrenWrap{z-index: 5; background-color: #fff;} #header .mobile-nav-wrap.gnb .menu .depth1.active > .childrenWrap > ul{display: block; padding-bottom: 10rem; padding: 0 16rem 0 8rem; font: var(--edm-f-body1); letter-spacing: var(--edm-f-body1-ls); font-weight: 400;} #header .mobile-nav-wrap.gnb .menu .depth2.has-child{position: relative; z-index: 0;} #header .mobile-nav-wrap.gnb .menu .depth2.has-child.open{position: relative; z-index: 1;} #header .mobile-nav-wrap.gnb .menu .depth2.has-child::after{content: ''; position: absolute; right: 12rem; top: 20rem; background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/common/gnb-menu-mobile-close.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 16rem; height: 16rem; transition: transform 0.3s ease;} #header .mobile-nav-wrap.gnb .menu .depth2.has-child.open::after{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/common/gnb-menu-mobile-open.svg'); transform: rotate(90deg);} #header .mobile-nav-wrap.gnb .menu .depth2.has-child.open > a{color: var(--edm-brand-primary);} #header .mobile-nav-wrap.gnb .menu .depth2 > a{padding: 0 0 0 12rem; min-height: 56rem; display: flex; align-items: center; } #header .mobile-nav-wrap.gnb .menu .depth2 > .childrenWrap > ul{padding: 0 0 0 24rem; display: none;} #header .mobile-nav-wrap.gnb .menu .depth3{font: var(--edm-f-body2); letter-spacing: var(--edm-f-body2-ls); font-weight: 400; color: var(--edm-color-text-2);} #header .mobile-nav-wrap.gnb .menu .depth3 > a{min-height: 37rem; display: flex; align-items: center;} #header .mobile-nav-wrap.gnb .menu .depth3 > .childrenWrap > ul{display: block !important;} #header .mobile-nav-wrap.gnb .menu .depth4{position: relative; min-height: 37rem; display: flex; align-items: center; color: var(--edm-color-text-3); padding-left: 18rem;} #header .mobile-nav-wrap.gnb .menu .depth4::before{content: '-'; position: absolute; left: 8rem;} #header .mobile-nav-wrap.gnb .menu .depth1 > a{width: 120rem; min-height: 56rem; padding: 0 12rem; display: flex; align-items: center;} #header .mobile-nav-wrap.gnb .menu .depth1.icon a i{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/header/icon-header-shortcut-20.svg'); width: 20rem; height: 20rem; margin-left: 2rem;} #header .mobile-nav-wrap.gnb .menu .depth1.active > a{background-color: #fff;} /* 현재 페이지 활성화 */ #header .mobile-nav-wrap.gnb .menu li.depth2 > a.current{color: var(--edm-brand-primary);} #header .mobile-nav-wrap.gnb .menu li.depth3 > a.current{color: var(--edm-brand-primary);} #header .mobile-nav-wrap.gnb .menu li.depth4 > a.current{color: var(--edm-brand-primary);} /* 로그인 */ #header .area-header-utility{z-index: 11; width: 100%; height: 38rem; background-color: #fff; color: var(--edm-color-text-1); border-bottom: 1rem solid var(--edm-color-border-neutral); display: none; position: absolute; top: 76rem; left: 0; padding: 0 16rem; margin: 0;} #header .area-header-utility .pc{display: none;} #header .area-header-utility .mobile{display: flex; align-items: center; column-gap: 12rem;} #header .area-header-utility > .flex{display: block;} #header .area-header-utility .member-util {width:100%; font: var(--edm-f-body1); letter-spacing: var(--edm-f-body1-ls); font-weight: 400; display: flex; align-items: center; column-gap: 12rem;} #header .area-header-utility .member-util i{width: 16rem; height: 16rem; background-repeat: no-repeat; background-position: center; background-size: contain; margin-right: 4rem;} #header .area-header-utility .member-util [class^='btn-']{display: flex; align-items: center;} #header .area-header-utility .member-util [class^='btn-'] span{display: inline-block;} #header .area-header-utility .member-util .btn-join i, #header .area-header-utility .member-util .btn-mypage i{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/header/icon-person-16.svg');} #header .area-header-utility .member-util .btn-login i{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/header/icon-logout-16.svg');} #header .area-header-utility .member-util .btn-logout i{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/header/icon-logout-16.svg');} /* 모바일 메뉴 open */ #header.open, #header.open-breadcrumb{height: 100dvh; height: calc(var(--vh, 1vh) * 100);} #header.open .mobile-nav-wrap.gnb, #header.open-breadcrumb .mobile-nav-wrap.gnb{transform: translateX(0);} #header.open .toggle-gnb{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/header/icon-toggle-gnb-close.svg');} #header.open .area-header-utility{display: block;} #header.open .area-header-navigation .rightWrap{visibility: hidden;} #header.open #breadcrumb-wrap{display: none;} #header.open .mobile-nav-wrap.gnb .top-wrap{display: block;} #header.open .mobile-nav-wrap.gnb{top: 76rem;} /************************************ breadcrumb ************************************/ #header.open-breadcrumb .area-header-utility{display: none;} #breadcrumb-wrap{white-space: initial;} #breadcrumb-wrap #breadcrumb{column-gap: 4rem; width: 100%; justify-content: flex-start; /*background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/header/breadcrumb-down-mo.svg'); background-repeat: no-repeat; background-size: 20rem; background-position: right center;*/} #breadcrumb-wrap #breadcrumb .breadcrumb-con .breadcrumb-list{display: none !important;} #breadcrumb-wrap #breadcrumb .breadcrumb-con{touch-action: none; pointer-events: none; overflow: hidden; width: auto;} #breadcrumb-wrap #breadcrumb .breadcrumb-con .breadcrumb-title{position: relative;} #breadcrumb-wrap #breadcrumb .breadcrumb-con .breadcrumb-title i{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/header/breadcrumb-right.svg'); transition: none;} #breadcrumb-wrap #breadcrumb .breadcrumb-con .breadcrumb-title .breadcrumb-arrow, #breadcrumb-wrap #breadcrumb .breadcrumb-con.has-alternatives .breadcrumb-title .breadcrumb-arrow{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/header/breadcrumb-right.svg');} #breadcrumb-wrap #breadcrumb .breadcrumb-con .breadcrumb-title span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width: 100%;} #breadcrumb-wrap #breadcrumb .breadcrumb-con:last-child{flex: 1; padding-right: 0;} #breadcrumb-wrap #breadcrumb .breadcrumb-con:last-child .breadcrumb-title span{max-width: 100%; padding-right: 24rem;} #breadcrumb-wrap #breadcrumb .breadcrumb-con:last-child .breadcrumb-title i{position: absolute; right: 0; top: 50%; transform: translateY(-50%); background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/header/breadcrumb-down-mo.svg') !important; width: 20rem; height: 20rem; cursor: pointer; pointer-events: auto; touch-action: auto; background-repeat: no-repeat; background-size: 20rem; background-position: center; border: none; margin: 0; transition: none;} #breadcrumb-wrap #breadcrumb .breadcrumb-con:last-child .breadcrumb-title .breadcrumb-arrow.no-page{display: block;} /* breadcrumb open */ #header.open-breadcrumb .mobile-nav-wrap.gnb #main-nav{height: 100%;} #header.open-breadcrumb .mobile-nav-wrap.gnb{top: 121rem; height: calc(100dvh - 121rem); height: calc(var(--vh, 1vh) * 100 - 121rem);} #header.open-breadcrumb .mobile-nav-wrap.gnb .top-wrap{display: none;} #header.open-breadcrumb .mobile-nav-wrap.gnb .menu .depth1 > .childrenWrap{height: 100%; } #header.open-breadcrumb #breadcrumb-wrap #breadcrumb .breadcrumb-con:last-child .breadcrumb-title i{transform: translateY(-50%) rotate(180deg);} #header.open-breadcrumb #breadcrumb-wrap{display: block;} /* breadcrumb open + gnb open */ #header.open-breadcrumb.open .mobile-nav-wrap.gnb .top-wrap{display: block;} #header.open-breadcrumb.open .mobile-nav-wrap.gnb{top: 76rem; height: calc(100dvh - 76rem); height: calc(var(--vh, 1vh) * 100 - 76rem);} #header.open-breadcrumb.open .mobile-nav-wrap.gnb #main-nav{height: calc(100% - 172rem);} #header.open-breadcrumb.open .mobile-nav-wrap.gnb .menu .depth1 > .childrenWrap{height: calc(100% - 172rem);} #header.open-breadcrumb.open #breadcrumb-wrap{display: none;} #header .mobile-nav-wrap.gnb.default{top: 121rem;} #header .mobile-nav-wrap.gnb.default .top-wrap{display: none;} } @media screen and (max-width: 1220px) { #header .gnb .menu li.depth1 > a{padding: 0 15rem;} } @media screen and (min-width: 992px) and (max-width: 1499.98px) { #header .mobile-nav-wrap.gnb .menu .depth1 > a{width: 150rem;} #header .mobile-nav-wrap.gnb .menu .depth1 > .childrenWrap{width: calc(100% - 150rem); left: 150rem;} } @media screen and (max-width: 991px) { /* 3번째 요소 숨김 */ #breadcrumb-wrap #breadcrumb .breadcrumb-con:nth-child(3):not(:last-child) .breadcrumb-title span{color: transparent; width: 9rem;} #breadcrumb-wrap #breadcrumb .breadcrumb-con:nth-child(3):not(:last-child) .breadcrumb-title span::before{content: '...'; color: var(--edm-color-text-3); display: inline-block;} } /************************************************************* hover effect *************************************************************/ @media (hover: hover) and (pointer: fine) { .allMenuWrap .all-menu-list .depth2 > a:hover{color: #1ec95b;} #header .area-header-navigation .program-search a:hover{color: var(--edm-brand-primary); transition: color 0.3s ease;} #breadcrumb-wrap #breadcrumb .breadcrumb-con .breadcrumb-list a:hover{color: var(--edm-brand-primary);} }