@charset "UTF-8";


/********************************************************
■ Slide Menu : PC & 모바일 슬라이드 메뉴
********************************************************/


/* =====================================================
   메뉴 OPEN 시 BODY
===================================================== */

body.m-menu-on {
    height:100vh;
    overflow:hidden;
}


/* =====================================================
   SLIDE MENU 기본
===================================================== */

#m-menu {
    position:fixed;

    top:0;
    left:0;
    right:0;

    bottom:100%;

    z-index:180;

    overflow:hidden;

    background:var(--main-color3);

    transition:
        bottom .7s ease;
}


/* 메뉴 OPEN */

body.m-menu-on #m-menu {
    bottom:0;
}



/* =====================================================
   MENU CONTAINER
===================================================== */

#m-menu .m-menu-container {

    position:absolute;

    left:0;
    top:0;
    right:0;
    bottom:0;

    display:flex;

    align-items:center;

    z-index:2;

    transition:
        left .7s ease,
        right .7s ease;
}



/* =====================================================
   ITEMS
===================================================== */

#m-menu .items {

    position:relative;

    display:flex;

    width:100%;

    padding-top:var(--top-height);

    max-height:
        calc(
            100% - var(--top-height)
        );

    overflow-y:auto;
    overflow-x:hidden;
}


/* SITE MAP */

#m-menu .items:before {

    content:"SITE MAP";

    position:absolute;

    left:
        calc(
            var(--c-padding) + 20px
        );

    top:0;

    font-size:3rem;

    color:#fff;

    opacity:0;

    transition:
        opacity .4s ease;
}


body.m-menu-on
#m-menu .items:before {

    opacity:1;

    transition-delay:.3s;
}



/* =====================================================
   1차 메뉴
===================================================== */

#m-menu .item {

    flex:1;

    display:flex;

    flex-direction:column;

    margin:20px;

    color:#fff;
}


#m-menu .item .is_sub,
#m-menu .item .depth2 > li > .sub-a {

    font-size:1.125rem;
}


#m-menu .item .is_sub {

    display:block;

    width:100%;

    margin-bottom:30px;

    color:#fff;

    font-size:2rem;

    font-weight:600;
}


#m-menu .item.on .is_sub {

    color:var(--main-color1);
}



/* =====================================================
   SUB MENU
===================================================== */

#m-menu .item .sub .sub-a {

    position:relative;

    z-index:1;

    color:
        rgba(
            255,
            255,
            255,
            .5
        );
}


#m-menu .item .sub li:hover > .sub-a {

    color:#fff;
}


#m-menu .item .sub li.on > .sub-a {

    color:var(--main-color1);
}



/* =====================================================
   DEPTH 2
===================================================== */

#m-menu .item .depth2 .is_back {

    display:none;
}


#m-menu .item .depth2 > li {

    padding:10px 0;
}


#m-menu .item
.depth2 > li > .sub-a:after {

    content:"";

    position:absolute;

    left:0;

    top:
        calc(
            100% + 2px
        );

    width:100%;

    height:2px;

    background:#fff;

    transform:
        scaleX(0);

    transform-origin:
        right bottom;

    transition:
        transform .4s
        cubic-bezier(1,0,0,1);
}


#m-menu .item
.depth2 > li:hover
> .sub-a:after,

#m-menu .item
.depth2 > li.on
> .sub-a:after {

    transform:
        scaleX(1);

    transform-origin:
        left bottom;
}


#m-menu .item
.depth2 > li.on
> .sub-a:after {

    background:
        var(--main-color1);
}



/* =====================================================
   DEPTH 3
===================================================== */

#m-menu .item .depth3 {

    margin-top:10px;
}


#m-menu .item .depth3 li {

    padding:5px 0;
}



/********************************************************
■ TABLET + MOBILE
********************************************************/

@media screen and (max-width:1024px) {


    /* =================================================
       상단 헤더 아래에서 모바일 메뉴 시작
    ================================================= */

    #m-menu {

        top:var(--top-height);

        height:
            calc(
                100dvh - var(--top-height)
            );

        bottom:auto;

        visibility:hidden;

        opacity:0;

        pointer-events:none;

        background:
            var(--main-color3);

        transition:
            opacity .35s ease,
            visibility .35s ease;

    }


    /* 메뉴 OPEN */

    body.m-menu-on #m-menu {

        bottom:auto;

        visibility:visible;

        opacity:1;

        pointer-events:auto;

    }


    /*
    상단 #top 보다 아래에 위치

    top.css
    #top z-index : 190

    m-menu
    z-index : 180
    */

    #m-menu {

        z-index:180;

    }



    /* =================================================
       CONTAINER
    ================================================= */

    #m-menu .m-menu-container {

        position:absolute;

        left:0;
        right:0;

        top:0;
        bottom:0;

        display:block;

        width:100%;

        height:100%;

        overflow:hidden;

        background:
            var(--main-color3);

        transform:
            translateX(100%);

        transition:
            transform .45s ease;

    }


    body.m-menu-on
    #m-menu
    .m-menu-container {

        transform:
            translateX(0);

    }



    /*
    기존

    left:-50%
    right:50%

    이동방식 대신
    내부 ITEMS / DEPTH2 이동방식 적용
    */

    #m-menu
    .m-menu-container.on {

        left:0;
        right:0;

    }



    /* =================================================
       ITEMS
    ================================================= */

    #m-menu .items {

        position:relative;

        display:flex;

        flex-direction:column;

        width:100%;

        height:100%;

        max-height:none;

        margin:0;

        padding:
            25px
            20px
            50px;

        box-sizing:border-box;

        overflow-x:hidden;

        overflow-y:auto;

        transition:
            transform .45s ease;

        -webkit-overflow-scrolling:
            touch;

    }


    #m-menu .items:before {

        display:none;

    }



    /* =================================================
       1차 메뉴
    ================================================= */

    #m-menu .item {

        flex:none;

        display:block;

        width:100%;

        height:auto;

        margin:0;

    }


    #m-menu .item .is_sub {

        position:relative;

        display:flex;

        align-items:center;

        justify-content:
            space-between;

        width:100%;

        min-height:62px;

        margin:0;

        padding:
            10px
            40px
            10px
            0;

        box-sizing:border-box;

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                .28
            );

        background:none;

        color:#fff;

        font-size:1.5rem;

        font-weight:600;

        opacity:1;

        visibility:visible;

    }



    /* =================================================
       PLUS
    ================================================= */

    #m-menu
    .item
    .is_sub.plus {

        position:relative;

    }


    #m-menu
    .item
    .is_sub.plus:before,

    #m-menu
    .item
    .is_sub.plus:after {

        content:"";

        position:absolute;

        right:5px;

        top:50%;

        width:18px;

        height:2px;

        margin:0;

        border-radius:3px;

        background:#fff;

        transform:
            translateY(-50%);

        transition:
            transform .3s ease;

    }


    #m-menu
    .item
    .is_sub.plus:after {

        transform:
            translateY(-50%)
            rotate(90deg);

    }


    /* 선택 시 + → - */

    #m-menu
    .item
    .is_sub.plus.on:after {

        transform:
            translateY(-50%)
            rotate(0deg);

    }



    /* =================================================
       DEPTH 2
    ================================================= */

    #m-menu
    .item
    .depth2 {

        position:fixed;

        left:100%;

        top:var(--top-height);

        width:100%;

        height:
            calc(
                100dvh - var(--top-height)
            );

        padding:
            25px
            25px
            50px;

        box-sizing:border-box;

        display:block;

        background:
            var(--main-color3);

        opacity:1;

        visibility:hidden;

        overflow-x:hidden;

        overflow-y:auto;

        transform:
            translateX(0);

        transition:
            left .45s ease,
            visibility .45s ease;

        z-index:5;

        -webkit-overflow-scrolling:
            touch;

    }


    /*
    1차 메뉴 선택
    */

    #m-menu
    .item
    .is_sub.on
    + .depth2 {

        left:0;

        visibility:visible;

    }



    /* =================================================
       BACK
    ================================================= */

    #m-menu
    .item
    .depth2
    .is_back {

        display:block;

        padding:
            0
            0
            20px;

    }


    #m-menu
    .item
    .depth2
    .is_back a,

    #m-menu
    .item
    .depth2
    .is_back button {

        display:flex;

        align-items:center;

        justify-content:center;

        width:42px;

        height:42px;

        padding:0;

        border:0;

        border-radius:50%;

        background:#fff;

        color:
            var(--main-color1);

        cursor:pointer;

    }



    /* =================================================
       2차 메뉴
    ================================================= */

    #m-menu
    .item
    .depth2 > li {

        padding:0;

    }


    #m-menu
    .item
    .depth2 > li
    > .sub-a {

        position:relative;

        display:flex;

        align-items:center;

        justify-content:
            space-between;

        width:100%;

        min-height:56px;

        padding:
            10px
            5px;

        box-sizing:border-box;

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                .2
            );

        color:
            rgba(
                255,
                255,
                255,
                .85
            );

        font-size:1.15rem;

    }


    #m-menu
    .item
    .depth2
    > li.on
    > .sub-a {

        color:
            var(--main-color1);

    }



    /* 데스크톱 underline 제거 */

    #m-menu
    .item
    .depth2
    > li
    > .sub-a:after {

        display:none;

    }



    /* =================================================
       DEPTH 3
    ================================================= */

    #m-menu
    .item
    .depth3 {

        display:none;

        width:100%;

        margin:0;

        padding:
            10px
            15px;

        box-sizing:border-box;

        background:
            rgba(
                0,
                0,
                0,
                .12
            );

    }


    /*
    새로운 m-menu.php에서
    depth3-on 클래스 사용
    */

    #m-menu
    .item
    .depth2
    > li.depth3-on
    > .depth3 {

        display:block;

    }


    #m-menu
    .item
    .depth3 li {

        padding:0;

    }


    #m-menu
    .item
    .depth3
    .sub-a {

        display:block;

        width:100%;

        padding:
            10px
            5px;

        box-sizing:border-box;

        color:
            rgba(
                255,
                255,
                255,
                .65
            );

        font-size:.95rem;

    }


    #m-menu
    .item
    .depth3
    li.on
    .sub-a {

        color:
            var(--main-color1);

    }



    /* =================================================
       3차 화살표
    ================================================= */

    #m-menu
    .depth2-open
    i {

        transition:
            transform .3s ease;

    }


    #m-menu
    .depth2-open.on
    i {

        transform:
            rotate(180deg);

    }

}



/********************************************************
■ MOBILE
********************************************************/

@media screen and (max-width:767px) {


    #m-menu .items {

        padding:
            20px
            18px
            40px;

    }


    #m-menu
    .item
    .is_sub {

        min-height:58px;

        font-size:1.3rem;

    }


    #m-menu
    .item
    .depth2 {

        padding:
            20px
            20px
            40px;

    }


    #m-menu
    .item
    .depth2 > li
    > .sub-a {

        min-height:52px;

        font-size:1.05rem;

    }


    #m-menu
    .item
    .depth3
    .sub-a {

        font-size:.9rem;

    }

}



/********************************************************
■ PC
********************************************************/

@media screen and (min-width:1025px) {


    /*
    PC에서는 기존 SITE MAP 방식
    */

    #m-menu {

        top:0;

        height:auto;

        bottom:100%;

        visibility:visible;

        opacity:1;

        pointer-events:auto;

    }


    body.m-menu-on #m-menu {

        bottom:0;

    }

}