/******************************************************* header :: 프로그램 페이지에서만 기존 css와 함께 사용해야해서 rem이 쓰인 부분만 programs > asset > programs-header.css 에 px로 또 작성됨. *******************************************************/ #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 .area-header-logo .toggle-fsl{display: none;} #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); padding: 8rem 24rem; display: flex; align-items: center; font: var(--edm-f-body1); 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 .area-header-utility .person{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/common/icon-person-32.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; width: 32rem; height: 32rem; display: inline-block; } #header .area-header-utility .login{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/common/icon-login-32.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; width: 32rem; height: 32rem; display: inline-block; } /* 드롭다운 메뉴 */ #header .area-header-utility .member-dropdown-wrap{position: relative;} #header .area-header-utility .member-dropdown-toggle{background: none; border: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center;} #header .area-header-utility .member-dropdown-menu{position: absolute; top: calc(100% + 10rem); right: 0; min-width: 160rem; background-color: #fff; border-radius: var(--edm-radius2); box-shadow: var(--edm-sd-neutral-1); opacity: 0; visibility: hidden; transform: translateY(-10rem); transition: all 0.3s ease; z-index: 1000;} #header .area-header-utility .member-dropdown-wrap.active .member-dropdown-menu{opacity: 1; visibility: visible; transform: translateY(0);} #header .area-header-utility .member-dropdown-menu::before{content: ''; position: absolute; top: -6rem; right: 10rem; width: 0; height: 0; border-left: 6rem solid transparent; border-right: 6rem solid transparent; border-bottom: 6rem solid #fff;} #header .area-header-utility .member-dropdown-menu ul{list-style: none; margin: 0; padding: 8rem 0;} #header .area-header-utility .member-dropdown-menu ul li{border-bottom: 1rem solid var(--edm-color-border-neutral);} #header .area-header-utility .member-dropdown-menu ul li:last-child{border-bottom: none;} #header .area-header-utility .member-dropdown-menu ul li a, #header .area-header-utility .member-dropdown-menu ul li button{display: block; width: 100%; padding: 12rem 16rem; font: var(--edm-f-body1); font-weight: 400; color: var(--edm-color-text-1); text-align: left; background: none; border: none; cursor: pointer; transition: all 0.2s ease;} #header .area-header-utility .member-dropdown-menu ul li a:hover, #header .area-header-utility .member-dropdown-menu ul li button:hover{background-color: var(--edm-bg-neutral); color: var(--edm-brand-primary);} #header .area-header-utility .logout-form{margin: 0; padding: 0;} #header .area-header-utility .logout-form button{width: 100%; text-align: left;} /* 패밀리 사이트 */ #header .mo-family-site{display: none;} #header .site-list{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);} #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: 0; background-color: #fff; transition: all 0.5s ease; z-index: 99998; color: var(--edm-color-text-2); touch-action: none; pointer-events: none; } #header .allMenuWrap.open{visibility: visible; opacity: 1; height: auto; touch-action: auto; pointer-events: auto; } #header .allMenuWrap .dim{position: fixed; top: 2.25rem; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); z-index: -1; cursor: pointer;} #header .allMenuWrap .textWrap{text-align: center; background-color: #F8FAEC; color: var(--edm-color-text-1); padding: 24rem 0; font: var(--edm-f-h2);} #header .allMenuWrap .textWrap .max-width{position: relative; text-align: center;} #header .allMenuWrap .textWrap .allMenuBtn{position: absolute; top: 50%; right: 0; transform: translateY(-50%);} #header .allMenuWrap .all-menu-list{padding: 40rem 0; 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 > ul > li > a{color: var(--edm-brand-red); font: var(--edm-f-h3);} #header .allMenuWrap .all-menu-list > ul > li > .childrenWrap > ul{font: var(--edm-f-h2); 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);} #header .allMenuWrap .all-menu-list .depth2 > .childrenWrap > ul{color: var(--edm-color-text-2); font: var(--edm-f-body2); 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);} #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); padding: 8rem 4rem; font: var(--edm-f-detail); 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%; background-color: var(--edm-color-text-3);} /************************************************************** breadcrumb (수정시 programs > asset > common.css 동시 수정) **************************************************************/ #breadcrumb-wrap .max-width{max-width: 1280rem; padding: 0 16rem;} #breadcrumb-wrap{font: var(--edm-f-detail); font-weight: 400; color: var(--edm-color-text-3); background-color: var(--edm-bg-neutral);} #breadcrumb-wrap #breadcrumb{display: flex; align-items: center; height: 45rem;} #breadcrumb-wrap #breadcrumb .breadcrumb-con{margin-right: 12rem; 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 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; width: 0; height: 0; margin-left: 4rem; border-left: 4rem solid transparent; border-right: 4rem solid transparent; border-top: 4rem solid var(--edm-color-text-3); transition: all 0.3s ease; } #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); 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.active .breadcrumb-title i{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/breadcrumb-down-active.svg');} #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);} /* only pc */ @media screen and (min-width: 1400px) { #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); 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); 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: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);} #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); 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);} #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);} #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); font: var(--edm-f-body2); 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%;background:var(--edm-color-text-3); transform: translateY(-50%);} /************************************************************* 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: 1399px) { #header {display:block; width: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: 18rem; height: 18rem; overflow: hidden; position: relative; margin-left: 11rem; cursor: pointer;} #header .toggle-gnb span {position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: block; width: 100%; height: 2rem; background-color: var(--edm-color-text-1); border-radius: var(--edm-radiusFull); } #header .toggle-gnb span:before {content: ''; position: absolute; top: -6rem; left: 0; display: block; width: 100%; height: 100%; background-color: var(--edm-color-text-1);} #header .toggle-gnb span:after {content: ''; position: absolute; bottom: -6rem; left: 0; display: block; width: 100%; height: 100%; background-color: var(--edm-color-text-1);} /* 검색 영역 */ #header .area-header-navigation .program-search{margin: 0; padding: 4rem 8rem; font: var(--edm-f-detail);} #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; padding-right: 26rem;} #header .area-header-navigation .area-header-logo img{height: 22rem;} /* 패밀리 사이트 */ #header .area-header-navigation .area-header-logo .toggle-fsl {position: absolute; bottom: 0; right: 0; display: block; width: 18rem; height: 18rem; padding:0; background: #fff; border-radius: 50%; border: 1rem solid var(--edm-color-border-neutral);} #header .area-header-navigation .area-header-logo .toggle-fsl:before {content:''; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width: 10rem; height: 10rem; display:block; border-radius:50%; background:url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/common/chevron-down_new.svg') no-repeat; background-size: cover; background-position: center; transition: all 0.3s ease;} #header .area-header-navigation .area-header-logo .toggle-fsl.open:before {transform:translate(-50%,-50%) rotate(-180deg);} #header .site-list {display:none; width: 100%; background-color: #fff; text-align:center; position: absolute; left: 0; top: 76rem; padding: 0; border-top: 1rem solid var(--edm-color-border-neutral); z-index: 20;} #header .site-list li{padding: 10rem 0; border-bottom: 1rem solid var(--edm-color-border-neutral);} #header .site-list li a {display:inline-block; width:auto; display: flex; justify-content: center; align-items: center; background: none;} #header .site-list li:last-child{border-bottom: none;} #header .site-list img {height: 17rem; width: auto;} #header .site-list.open{display: block;} /* 메뉴 */ #header .mobile-nav-wrap.gnb{top: 114rem; height: calc(100dvh - 114rem); height: calc(var(--vh, 1vh) * 100 - 114rem); display: none; position: absolute; width: 100%; background-color: #fff; z-index: 10; left: 0; background-color: var(--edm-bg-neutral);} #header .mobile-nav-wrap.gnb::before{content: ''; position: absolute; left: 0; top: 0; width: 120rem; height: 100%; background-color: var(--c-background-neutral); } #header .mobile-nav-wrap.gnb .menu{position: relative; height: 100%; overflow: hidden; font: var(--edm-f-h5); font-weight: 400; } #header .mobile-nav-wrap.gnb .menu .depth1 > .childrenWrap{position: absolute; left: 120rem; top: 0; width: calc(100% - 120rem); height: 100%; overflow-y: auto; padding: 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); font-weight: 400;} #header .mobile-nav-wrap.gnb .menu .depth2.has-child{position: relative;} #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: all 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); 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 .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 .depth4{} #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.active > a{background-color: #fff;} /* 로그인 */ #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;} #header .area-header-utility i{margin-right: 3.5rem;} #header .area-header-utility .person{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/common/icon-person-16.svg'); width: 16rem; height: 16rem;} #header .area-header-utility .login{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/common/icon-login-16.svg'); width: 16rem; height: 16rem;} #header .area-header-utility > .flex{display: block;} #header .area-header-utility .member-util {width:100%; } #header .area-header-utility .member-util a {display: flex; align-items: center; font: var(--edm-f-body1); font-weight: 400;} #header .area-header-utility .member-util a + a {margin-left: 12rem;} /* 모바일 드롭다운 메뉴 */ #header .area-header-utility .member-dropdown-wrap{position: static;} #header .area-header-utility .member-dropdown-toggle .person{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/common/icon-person-16.svg'); width: 16rem; height: 16rem;} #header .area-header-utility .member-dropdown-menu{position: static; transform: none; box-shadow: none; background-color: transparent; opacity: 1; visibility: visible; min-width: auto; padding: 0; margin-top: 8rem; display: none;} #header .area-header-utility .member-dropdown-wrap.active .member-dropdown-menu{display: block;} #header .area-header-utility .member-dropdown-menu::before{display: none;} #header .area-header-utility .member-dropdown-menu ul{padding: 0;} #header .area-header-utility .member-dropdown-menu ul li{border-bottom: none; margin-bottom: 4rem;} #header .area-header-utility .member-dropdown-menu ul li:last-child{margin-bottom: 0;} #header .area-header-utility .member-dropdown-menu ul li a, #header .area-header-utility .member-dropdown-menu ul li button{padding: 8rem 0; font: var(--edm-f-body2); color: var(--edm-color-text-2);} #header .area-header-utility .member-dropdown-menu ul li a:hover, #header .area-header-utility .member-dropdown-menu ul li button:hover{background-color: transparent;} /* 모바일 메뉴 open */ #header.open{height: 100dvh; height: calc(var(--vh, 1vh) * 100);} #header.open .mobile-nav-wrap.gnb{display: block;} #header.open .toggle-gnb span {height:1rem;transform:rotate(45deg);} #header.open .toggle-gnb span:before {top:50%;transform:rotate(90deg);height:1rem} #header.open .toggle-gnb span:after {display:none;} #header.open .area-header-utility{display: block;} /************************************ breadcrumb ************************************/ #header.open-breadcrumb .area-header-utility{display: none;} #breadcrumb-wrap #breadcrumb .breadcrumb-con .breadcrumb-list{display: none !important;} #breadcrumb-wrap #breadcrumb .breadcrumb-con{margin-right: 4rem; touch-action: none; pointer-events: none;} #breadcrumb-wrap #breadcrumb .breadcrumb-con .breadcrumb-title i{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/breadcrumb-right.svg'); transition: none;} #breadcrumb-wrap #breadcrumb .breadcrumb-con.active{width: 100%;} #breadcrumb-wrap #breadcrumb .breadcrumb-con.active .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/breadcrumb-down-mo.svg'); width: 20rem; height: 20rem; cursor: pointer; pointer-events: auto; touch-action: auto; } #breadcrumb-wrap #breadcrumb .breadcrumb-con.click-mo .breadcrumb-title i{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/breadcrumb-down-active-mo.svg');} } @media screen and (max-width: 1220px) { #header .gnb .menu li.depth1 > a{padding: 0 15rem;} } /************************************************************* 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);} }