.pc-hedaer{display:flex;}
.m-header {display:none;}

#header {
    width:100%;
    height:64px; 
    border-bottom:1px solid #ffffff33;

    position:fixed;
    top:0;
    left:0;
    transition:all .5s;
    transform:translateY(0);
    padding:0 35px;
    display:flex;
    align-items: center;
    justify-content: center;
    z-index:5;
}
#header.hide {
    transform:translateY(-100%);
}
#header.fixed{
    background-color:#101010e6;
}
#header .header-inner{
    position:relative;
    margin:0 auto;
    width:100%;
    max-width:1250px;
    height:100%;
    display:flex;
    justify-content:space-between;
    align-items: center;
}
#header .header-inner img.logo_header {
    width:168px;
}
#header .header-inner ul {
    width: max-content;
    display:flex;
    height:100%;
    align-items:center;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    
}
#header .header-inner ul li{
    margin:0 25px;
    color:#fff;
    font-size:16px;
    font-weight:bold;
    font-family: 'GmarketSans';
}
#header .header-inner .phone {
    font-size:16px;
    font-weight:bold;
    color:#fff;
}


@media (max-width: 1150px) {
    #header .header-inner.pc-header {
        display:none;
    }
    .m-header {
        display:block;
    }
    #header{ 
        height:50px;
        padding:unset;
    }
    .logo_header_m {
        width:126px;
    }
}




/* 모바일 헤더 */
.m-header .phone {
    color:#fff;
    font-size:14px;
    font-weight:bold;
    position:absolute;
    right:20px;
    top:50%;
    transform: translateY(-50%);
}
.m-header {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:50px;
    
    z-index:500;
}
.m-header.active {
    background-color:#101010e6;
}
.m-header.main {
    background-color:transparent;
    transition: background-color .3s;
}
.m-header.main > .m-menu-btn > div {
    background-color:#101010e6;
    transition: background-color .3s;
}
.m-header.main .img-box > img {
    filter:brightness(10);
    transition:filter .3s;
}
.m-header.main.active {
    background-color:#101010e6;
}
.m-header.main.active  > .m-menu-btn > div {
    background-color:#101010;
}
.m-header.main.active .img-box > img  {
    filter:unset;
}


.m-header > .logo {
    display:inline-block;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}
.m-header .img-box > img {
    filter:unset;
}
.m-header > .search {
    width:25px;
    position:absolute;
    top:50%;
    right:12px;
    transform:translatey(-50%);
}

/* 모바일 메뉴 버튼 */
.m-header > .m-menu-btn {
    position:absolute;
    top:50%;
    left:12px;
    transform:translatey(-50%);
    width:46px;
    height:46px;
    cursor:pointer;
    z-index: 2;
}

.m-header > .m-menu-btn > div {
    width:50%;
    height:2px;
    background-color:#fff;
    position:absolute;
    top:16px;
    left:50%;
    transform:translatex(-50%);
    transition:top .2s, transform .2s, opacity .2s;
}

.m-header > .m-menu-btn > div:nth-child(2) {
    top:23px;
}

.m-header > .m-menu-btn > div:nth-child(3) {
    top:30px;
}

/* 버튼 클릭 시 애니메이션 */
.m-header > .m-menu-btn.active div:nth-child(1) {
    top:50%;
    transform:translatex(-50%) translatey(-50%) rotate(45deg);
}

.m-header > .m-menu-btn.active div:nth-child(3) {
    top:50%;
    transform:translatex(-50%) translatey(-50%) rotate(-45deg);
}

.m-header > .m-menu-btn.active div:nth-child(2) {
    opacity:0;
}

/* 모바일 배경 마스크 */
.m-header > .mobile-mask {
    position:fixed;
    top:50px;
    left:0;
    width:100%;
    height:0;
    background-color:#101010e6;
    z-index:-5;
    transition:height .3s;
}

/* 모바일 메뉴 리스트 */
.m-header > .m-menu-list {
    overflow-y:auto;
    margin-top: 50px;
    pointer-events: none;
}
.m-header > .m-menu-list.active {
    pointer-events: unset;
}
.m-header > .m-menu-list > ul > li {
    border-bottom:1px solid #ccc;
    visibility:hidden;
    transform:translatey(-20px);
    opacity:0;
    position:relative;
}

.m-header > .m-menu-list.active > ul > li {
    visibility:visible;
    transform:translatey(0);
    opacity:1;
}

.m-header > .m-menu-list.active > ul > li.delay-1 {
    transition:visibility .5s, opacity .5s, transform .5s;
}

.m-header > .m-menu-list.active > ul > li.delay-2 {
    transition:visibility .5s .1s, opacity .5s .1s, transform .5s .1s;
}

.m-header > .m-menu-list.active > ul > li.delay-3 {
    transition:visibility .5s .2s, opacity .5s .2s, transform .5s .2s;
}

.m-header > .m-menu-list.active > ul > li.delay-4 {
    transition:visibility .5s .3s, opacity .5s .3s, transform .5s .3s;
}

.m-header > .m-menu-list.active > ul > li.delay-5 {
    transition:visibility .5s .4s, opacity .5s .4s, transform .5s .4s;
}

.m-header > .m-menu-list > ul > li > a {
    display:block;
    padding:30px 24px;
    text-align:left;
    font-size:17px;
    font-weight:500;
    color:#fff;
}
.m-header > .m-menu-list > ul > li > a:hover {
    color:#fff;
}

.m-header > .m-menu-list > ul > li > a > span {
    transition:transform .3s;
}

.m-header > .m-menu-list > ul > li.active > a > span {
    transform:rotate(180deg);
}

/* 2차 메뉴 관련 */

.m-header > .m-menu-list > ul > li > ul {
    padding:20px 48px;
    background-color:#f9f9f9;
    display:none;
}

.m-header > .m-menu-list > ul > li > ul > li > a {
    display:block;
    text-align:left;
    padding:10px 0;
    font-size:15px;
}

/* 3차 메뉴 */
.m-header > .m-menu-list > ul > li > ul ul {
    padding-top:10px;
    margin-top:10px;
    border-top:1px solid #ccc;
}

.m-header > .m-menu-list > ul > li > ul ul > li > a {
    display:block;
    text-align:left;
    font-size:15px;
    font-weight:300;
    padding:10px 0;
}

/* 모바일 서치 온 */
.m-header > .m-search-on {
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    visibility:hidden;
    opacity:0;
}

.m-header > .m-search-on.active {
    visibility:visible;
    opacity:1;
    transition:visibility .5s, opacity 1s;
}

.m-header > .m-search-on > .m-search-box {
    position:relative;
    border-bottom:1px solid #0c0c0c;
}

.m-header > .m-search-on > .m-search-box > input {
    width:320px;
    height:46px;
    border:none;
    padding:0 10px 0 45px;
}

.m-header > .m-search-on > .m-search-box > .img-box {
    width:24px;
    position:absolute;
    top:50%;
    left:8px;
    transform:translatey(-50%);
}

.m-header > .m-search-on > .m-recommend-word {
    padding:20px 0 0 44px;
    text-align:left;
}

.m-header > .m-search-on > .m-recommend-word > p {
    font-size:14px;
    padding-bottom:5px;
}

.m-header > .m-search-on > .m-recommend-word > ul > li > a {
    padding:10px 0;
}




@media (max-width: 500px) {
    .m-header .phone {
        display:none
    }
    .m-header > .m-menu-btn{
        left:unset;
        right:12px;
    }
    #header{
        border-bottom:unset;
    }
    .m-header{
        height:45px;
    }
    .logo_header_m{
        width:182px;
    }
 
}