/* mobile type header */
.sideNavBox {
    user-select: none;
    z-index: 1000;
}
/* button */
div.sideNavBox.box {
    display: flex !important;
    align-items: center !important;
}
#main_container .header-side-nav-button {
    padding: 10px;
    border: 0px solid transparent;
    font-size: 0;
    cursor: pointer;

    display: flex;
    flex-direction: column;
    justify-content: center;
}
#main_container .header-side-nav-button > div.line-1,
#main_container .header-side-nav-button > div.line-2,
#main_container .header-side-nav-button > div.line-3 {
    height: 4px;
    width: 35px;
    background-color: #000;
    border-radius: 5px;
    margin: 5px auto;
    /*transition: 0.25s ease-out all;*/
}
#main_container  .header-side-nav-button > div.line-1 {
    margin-top: 0 !important;
}
#main_container  .header-side-nav-button > div.line-3 {
    margin-bottom: 0 !important;
}

/* list */
#main_container .header-side-nav .logo-text {
    margin: 0 auto;
}
#main_container .header-side-nav .logo_container {
    display: none;
    height: auto;
}
#main_container .header-side-nav #header-mobile-ml-area {
    /*position: absolute;*/
    /*bottom: 50px;*/
    /*width: 100%;*/
    position: relative;
    width: 100%;
    padding-top: 50px;
}
#main_container .header-side-nav .login-before,
#main_container .header-side-nav .login-after {
    display: none;
}
#main_container .header-side-nav .use .login-before.active,
#main_container .header-side-nav .use .login-after.active {
    display: block;
}
#main_container .header-side-nav .login-before > div,
#main_container .header-side-nav .login-after > div {
    width: 140px;
    padding: 10px 20px;
    margin: 10px 5px;
    font-size: 13px;
    font-family: noto sans kr;
    background: transparent;
    border: 1px solid #494949;
    letter-spacing: 2px;
}
#main_container .header-side-nav .login-before > div > a,
#main_container .header-side-nav .login-after > div > a {
    color: #494949;
}
#main_container .header-side-nav .mn-ul-container {
    padding-top: 50px;
    height: 100vh;
    /*overflow-x: hidden;*/
    /*overflow-y: auto;*/

    /* hide scroll bar - IE */
    /*-ms-overflow-style: none;*/
    /* hide scroll bar - Firefox */
    /*overflow: -moz-scrollbars-none;*/
}
#main_container .header-side-nav .mn-ul-container::-webkit-scrollbar {
    /* hide scroll bar - Chrome, etc */
    width: 0 !important
}

#main_container .header-side-nav {
    display: block;
    width: 400px;
    max-width: 100vw;
    position: relative;
    margin: 0 auto;

    background: #fff;
    margin-top: 20px;
    margin-bottom: 20px;
    /*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);*/

    transform: translate3d(-100%, 0px, 0px);
    float: none;
    transition: 0.3s ease all;
    position: fixed;
    background-color: #fff;
    top: 0;
    left: 0;
    margin: 0;
    z-index: 1060;
    overflow-y: auto;
    height: 100%;

    /* hide scroll bar - IE */
    -ms-overflow-style: none;
    /* hide scroll bar - Firefox */
    overflow: -moz-scrollbars-none;
}
/* hide scroll bar - Chrome, etc */
#main_container .header-side-nav::-webkit-scrollbar {
    width: 0 !important
}
#main_container .header-side-nav[data-direction*="left-to-right"] {
    left: 0;
    right: auto;
    transform: translate3d(-100%, 0px, 0px);
}
#main_container .header-side-nav[data-direction*="right-to-left"] {
    left: auto;
    right: 0;
    transform: translate3d(100%, 0px, 0px);
}
#main_container .header-side-nav.active {
    transform: translate3d(0px, 0px, 0px) !important;
}
#main_container .header-side-nav > .mn-ul-container > ul,
#main_container .header-side-nav ul.sub-mn {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    margin: 0;
}
#main_container .header-side-nav > .mn-ul-container > ul {
    height: 100% !important;
    line-height: initial !important;
}
#main_container .header-side-nav > .mn-ul-container > ul > li,
#main_container .header-side-nav ul.sub-mn > li {
    width: 100%;
    padding: 0 10px;
    text-align: left;
    font-weight: 300;
    line-height: 1;
    height: auto;
    float: none;
    /*display: table; */
    position: relative;
    list-style-type: none;
    cursor: pointer;

    background: transparent;
    color: #435061;

    transition: 0.2s ease all;

    /* 2019.10.15 메뉴 글자 영역의 넓이가 길면 하위메뉴 아이콘이 옆으로 밀려나는 현상이 있어서 block으로 변경 -> 영역 넘어가는 부분 ...으로 표시됨 */
    display: block;

    /* 2020.03.18 재헌
     * 모바일 헤더 매뉴 클릭 시 깜빡이는 문제 수정. Android 환경에서 주로 발생
     */
    -webkit-tap-highlight-color: transparent;
}
#main_container .header-side-nav ul.sub-mn > li {
    height: auto;
}
#main_container .header-side-nav ul.sub-mn > li a {
    font-size: 18px;
    padding: 15px 15px 15px 30px;
}
#main_container .header-side-nav .mn-ul > li.mn-item > a.mn-link {
    display: inline-block;
    font-weight: 300;
    font-family: noto sans kr;
    font-size: 28px;
    text-align: left;
    width: auto;
    height: auto; /* kakao browser 에서 해당 부분 없으면 display 속성이 무시되는 문제때문에 추가 */
    padding: 25px;

    /* 2019.10.15 메뉴 글자 영역의 넓이가 길면 하위메뉴 아이콘이 옆으로 밀려나는 현상이 있어서 block으로 변경 -> 영역 넘어가는 부분 ...으로 표시됨 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#main_container .header-side-nav-close {
    font-size: 45px;
    position: absolute;
    color: #494949;
    top: 5px;
    right: 20px;
    z-index: 100;
    cursor: pointer;
    font-family: Sans-Serif;
}
#main_container .header-mobile .header-side-nav-close {
    font-size: 40px;
    font-weight: 100;
}
#main_container .header .header-side-nav .header-side-nav-close {
    font-size: 50px;
    top: -10px;
    right: 15px;
    font-weight: 100;
    padding-top: 5px;
}
#main_container .header-side-nav > .mn-ul-container > ul > li > .mn-dropdown {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 30%;
    z-index: 2;
}
#main_container .header-side-nav > .mn-ul-container > ul > li > .mn-dropdown:after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border-right: 2px solid #494949;
    border-top: 2px solid #494949;
    transform: rotate(135deg);
    position: absolute;
    top: 5px;
    right: 30px;
}
#main_container .header-side-nav > .mn-ul-container > ul > li.active > .mn-dropdown:after {
    transform: rotate(-45deg);
}
#main_container .header-side-nav ul.sub-mn {
    width: 100%;
    top: 0 !important;
    opacity: 0;
    visibility: hidden;
    height: 0;
    transition: 0.2s ease-out all;
    transform: translate3d(-5%, 0, 0);
}
#main_container .header-side-nav li.active ul.sub-mn {
    opacity: 1;
    visibility: visible;
    height: 100%;
    transform: translate3d(0, 0, 0);
}
/*#main_container .fullpage .carousel-inner > .item.right > .frm {*/
/*transform: translate3d(0, 20px, 0) !important;*/
/*transition: 0.2s cubic-bezier(0.45, 0.01, 0.20, 1) transform !important;*/
/*}*/

/*#main_container .fullpage .carousel-inner > .item.left > .frm {*/
/*transform: translate3d(0, -20px, 0) !important;*/
/*transition: 0.2s cubic-bezier(0.45, 0.01, 0.20, 1) transform !important;*/
/*}*/

/* logo, menu가 없을 때 높이지정이 정상적으로 안되는 부분 커버 */
.header .header-contents > div,
.header .header-contents .column {
    height: 100% !important;
}


/* mobile header */
.header-mobile-config {
    display: none;
}
.header-mobile .column > ul.mn-ul {
    display: flex !important;
}
.header-mobile .column > ul.mn-ul .sub-mn {
    display: none;
}
.header-mobile {
    position: absolute;
    background: transparent;
    border-bottom: none;
}
.header-mobile > .header1 {
    z-index: 10;
    transition: 0s ease top !important;
}
.header-mobile > .header2 {
    z-index: 9;
    transition: 0s !important;
}


.header-mobile .header-contents > div {
    height: 100% !important;
}

/* mobile header menu */
.header-mobile .column > ul.mn-ul li.mn-item {
    min-width: 50px;
    line-height: initial;
}
.header-mobile .header-contents .logoBox .logo_container {
    height: auto;
}


/* merge */
#main_container .header-mobile.mobileHeaderSectionMerge:not(.scroll) .qv-text p,
#main_container .header-mobile.mobileHeaderSectionMerge:not(.scroll) .qv-text span,
/* 2022.01.21 재헌
 * 헤더 합쳤을때 로고는 지정 색상 유지하도록 주석처리
 */
/*#main_container .header-mobile.mobileHeaderSectionMerge:not(.scroll) .column > .logoBox .logo-text > a,*/
#main_container .header-mobile.mobileHeaderSectionMerge:not(.scroll) .column > .mn-ul > li.mn-item > a.mn-link,
#main_container .header-mobile.mobileHeaderSectionMerge:not(.scroll) .column .header-mobile-nav-btn {
    color: #fff !important;
}
#main_container .header-mobile.mobileHeaderSectionMerge:not(.scroll) > div > .header-contents {
    background: transparent !important;
    border-color: #fff !important;
}
#main_container .header-mobile.mobileHeaderSectionMerge:not(.scroll) .header-side-nav-button {
    border-width: 0px !important;
    border-radius: 0px !important;
    background: transparent !important;
    border-color: #ffffff !important;
}
#main_container .header-mobile.mobileHeaderSectionMerge:not(.scroll) .header-side-nav-button > div {
    /*background: #fff !important;*/
}
.z-index-9999 {
    z-index: 9999 !important;
}