@charset "UTF-8";

/********************************************************
■ Slide Menu : PC&모바일 슬라이드 메뉴 부분
********************************************************/
body.m-menu-on #m-menu { left:0; }
body.m-menu-on.fix { overflow:hidden; }

#m-menu { position: fixed; top:0; left:100%; right:0; bottom:0; z-index: 1100; overflow:hidden; transition:left 600ms 700ms cubic-bezier(0.83, 0, 0.87, 0.45); background:#111; font-family: 'Paperlogy-8ExtraBold';}
#m-menu .m-menu-container { position:relative; height:100%; display:flex; }
body.m-menu-on #m-menu { transition-duration: 400ms; transition-delay: 0ms; }

#m-menu .m-menu-container > div { transition:opacity var(--opacity-tran), background var(--bg-tran); transition-timing-function:ease-in-out; opacity:0; --opacity-tran:800ms 400ms; --bg-tran:200ms 400ms; }

#m-menu .btn-close { position:absolute; top:40px; right:30px; width:50px; height:50px; z-index:9; }
#m-menu .btn-close:before,
#m-menu .btn-close:after { content:""; position:absolute; top:50%; left:50%; height:40px; width:2px; background:#fff; border-radius:2px; margin:-20px 0 0 -1px; }
#m-menu .btn-close:before { transform: rotate(45deg); }
#m-menu .btn-close:after { transform: rotate(-45deg); }

#m-menu .bg { flex:1; background:var(--m-menu-bg) no-repeat center/cover; opacity:0; --m-menu-bg:url('../img/sub-visual-01.jpg'); --opacity-tran:1s 200ms; }
body.m-menu-on #m-menu .bg { opacity:.5; --opacity-tran:800ms 400ms; }

/* 클래스 숫자에 맞춰서 비주얼이미지 업로드 후 숫자도 변경 */
#m-menu.bg1 .bg { --m-menu-bg:url('../img/sub-visual-01.jpg'); }
#m-menu.bg2 .bg { --m-menu-bg:url('../img/sub-visual-02.jpg'); }
#m-menu.bg3 .bg { --m-menu-bg:url('../img/sub-visual-03.jpg'); }
#m-menu.bg4 .bg { --m-menu-bg:url('../img/sub-visual-04.jpg'); }
#m-menu.bg5 .bg { --m-menu-bg:url('../img/sub-visual-05.jpg'); }

#m-menu .items { width:60%; overflow-y:auto; height:100%; padding:100px 50px; display: flex; flex-direction: column; justify-content: center; }
body.m-menu-on  #m-menu .items { opacity:1; }
#m-menu .item .is_sub { position:relative; color: #fff; display: block; padding:10px; font-size:4rem; font-weight:600; -webkit-text-stroke:1px #fff; color: transparent; }
#m-menu .item .is_sub:before,
#m-menu .item .is_sub:after { content:""; position: absolute; top:50%; right:0; background:#fff; opacity:.5; }

#m-menu .item:hover .is_sub,
#m-menu .item.on .is_sub { color:#fff; }

#m-menu .item:hover .is_sub:before,
#m-menu .item:hover .is_sub:after,
#m-menu .item.on .is_sub:before,
#m-menu .item.on .is_sub:after { opacity:1; }

#m-menu .item .is_sub.plus:before { width:3px; height:20px; margin:-10px 8.5px 0 0; }
#m-menu .item .is_sub.minus:after { width:20px; height:3px; margin-top:-1.5px; }

#m-menu .item .is_sub span { position: relative; display: inline-block; line-height:1; }
#m-menu .item .is_sub span:after { content: ""; position: absolute; bottom:100%; left:100%; width:10px; height:10px; background:var(--main-color3); opacity:0; }

#m-menu .item:hover .is_sub span:after,
#m-menu .item.on .is_sub span:after { color:#fff; animation: shape 1s linear infinite; opacity:1; }

@keyframes shape {
    0% { transform: rotate(0deg); border-radius: 0; }
    50% { transform: rotate(180deg); border-radius: 10px; }
    100% { transform: rotate(360deg); border-radius: 0; }
}


#m-menu .item .is_sub.plus + .sub { height:0; opacity:0; }
#m-menu .item .sub { height:auto; opacity:1; overflow:hidden; }

#m-menu .item .sub li { display:flex; flex-direction: column; align-items: baseline; padding:0 10px; }
#m-menu .item .sub li:last-child { margin-bottom:10px; }
#m-menu .item .sub li .sub-a { color: rgba(255,255,255,.5); position: relative; transition: all 0.3s ease; }
#m-menu .item .sub li:hover > .sub-a,
#m-menu .item .sub li.on > .sub-a { color:rgba(255,255,255,.85); }


#m-menu .item .depth2 > li > .sub-a { margin:7px 0; font-size:1.25rem; }
#m-menu .item .depth2 > li > .sub-a:before { content:""; position:absolute; left:0; top:100%; right:0; width:0; height:1px; background:rgba(255,255,255,.85); transition-duration: 400ms; }
#m-menu .item .depth2 > li:hover > .sub-a:before,
#m-menu .item .depth2 > li.on > .sub-a:before { width:100%; }

#m-menu .item .depth3 .sub-a { margin:4px 0; }
#m-menu .item .depth3 .sub-a:before { content:"- "; }
#m-menu .item .depth3 li:hover .sub-a { margin-left:10px; }

body.m-menu-on #m-menu .m-menu-list { opacity:1; }




@media (max-width: 1024px) {
    #m-menu .bg { display:none; }
    #m-menu .items { width:100%; }
}

@media (max-width: 767px) {
    #m-menu .logo { height:40px; }

    #m-menu .btn-close { top:30px; right:20px; width:30px; height:30px; }
    #m-menu .btn-close:before,
    #m-menu .btn-close:after { height:30px; margin:-15px 0 0 -1px; }

    #m-menu .items { padding:60px 30px; }
    #m-menu .item .is_sub { font-size:2.5rem; }
    #m-menu .item .is_sub.plus:before { width:2px; height:16px; margin:-8px 7px 0 0; }
    #m-menu .item .is_sub.minus:after { width:16px; height:2px; margin-top:-1px; }

    #m-menu .item .is_sub span:after { width:8px; height:8px; }

	#m-menu .item .sub li:last-child .sub-a { margin-bottom:25px; }
}