@charset "UTF-8";

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


.m-menu-bg { position:fixed; left:100%; top:0; right:-100%; bottom:0; opacity:0; transition-duration:1000ms; z-index:1099; }
body.m-menu-on .m-menu-bg { left:0; right:0; opacity:1; }


#m-menu { position: fixed; top:0; left:0; right:0; bottom:0; z-index: 1100; overflow:hidden; opacity:0; visibility:hidden; }

#m-menu .m-menu-container { position:absolute; left:0; top:0; right:0; padding:30px calc(50% - 700px); overflow:hidden; transition-duration: 500ms; }

#m-menu a.btn-close { position:relative; display:block; margin-left:auto; margin-bottom:25px; width:40px; height:40px; border-radius:99px; background:#fff; opacity:0; }
#m-menu a.btn-close:before, #m-menu a.btn-close:after { content:""; position:absolute; top:50%; left:50%; height:20px; width:2px; background:var(--main-bc1); border-radius:2px; margin:-10px 0 0 -1px; }
#m-menu a.btn-close:before { transform: rotate(45deg); }
#m-menu a.btn-close:after { transform: rotate(-45deg); }

body.m-menu-on #m-menu a.btn-close { opacity:1; transition:opacity 300ms 800ms; }

#m-menu .head { position:relative; font-weight:900; font-size:3rem; color:#fff; margin-bottom:50px; overflow:hidden; }
#m-menu .head span { display:inline-block; transform:translateY(100%); transition:800ms 500ms; }
body.m-menu-on #m-menu .head span { transform:translateY(0); }

#m-menu .items { display:flex; flex-wrap:wrap; margin-bottom:20px; transition-duration: 600ms; }
#m-menu .item { width:20%; }
#m-menu .item .is_sub { color:#fff; display: block; padding:10px 0; font-size:1.6rem; font-weight:600; animation-duration:500ms; }

#m-menu .item .sub li { margin:10px 0; }
#m-menu .item .sub .depth2-a { display:inline-block; color: rgba(255,255,255,.5); margin:5px 0; position: relative; transition: all 0.3s ease; font-size:1.25rem; }
#m-menu .item .sub .depth2-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 .sub .depth2-a:hover:before,
#m-menu .item.on .sub .depth2-a.on:before { width:100%; }
#m-menu .item .sub li:hover .depth2-a,
#m-menu .item .sub .depth2-a:hover, 
#m-menu .item .sub .depth2-a.on { color:rgba(255,255,255,.9); }

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


#m-menu .item .depth3 { }
#m-menu .item .depth3 .depth3-a { display:block; color:rgba(255,255,255,.5); padding:5px; animation-duration:500ms; }
#m-menu .item .depth3 .depth3-a:before { content:"·"; }
#m-menu .item .depth3 .depth3-a:hover { color:rgba(255,255,255,.9); margin-left:5px; }


@media (max-width: 1500px) {
    #m-menu .m-menu-container { padding:30px 5%; }
}

@media (max-width: 1200px) {
    #m-menu .item { width:25%; }
}

@media (max-width: 1024px) {
    #m-menu .head { font-size:2rem; margin-bottom:30px; }

    #m-menu .item { width:33.33%; }
    #m-menu .item .is_sub { font-size:1.4rem; padding:5px 0; }

    #m-menu .item .sub li { margin:5px 0; }
    #m-menu .item .sub .depth2-a { font-size:1.125rem; margin:2.5px 0; }

}

@media (max-width: 767px) {
    #m-menu { -ms-overflow-style: none; scrollbar-width: none; }
    #m-menu::-webkit-scrollbar { display: none; }
    
    #m-menu .m-menu-container { padding:20px; }
    

	#m-menu a.btn-close { margin-bottom:20px; }

}

@media (max-width: 500px) {
    #m-menu .item { width:50%; }
}