@charset "UTF-8";

/********************************************************
■ Slide Menu : PC&모바일 슬라이드 메뉴 부분
********************************************************/
body.m-menu-on { overflow:hidden; }
body.m-menu-on #m-menu { opacity:1; visibility:visible; z-index: 1100; }
body.m-menu-on .is-subpage { height:100vh; overflow:hidden; }

#m-menu { position: fixed; top:0; left:0; right:0; bottom:0; max-width:100%; z-index: 1; overflow:hidden; opacity:0; visibility:hidden; transition-duration:400ms; --bg-w:30%; --btns-h:100px; }

#m-menu .bg { position:absolute; left:0; top:0; bottom:0; width:var(--bg-w); background:url('../img/site_left.jpg') no-repeat center/cover; z-index:2; }
#m-menu .bg:before,
#m-menu .bg:after { content:""; position:absolute; z-index:-1; }
#m-menu .bg:before { left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.6); }
#m-menu .bg:after { left:5vw; top:0; right:5vw; height:var(--top-height); background:url('../img/logo-white.png') no-repeat left center; }

#m-menu .m-menu-btns { position:absolute; left:5vw; bottom:30px; right:5vw; display:flex; justify-content:space-between; align-items:center; z-index:9; }

#m-menu .m-menu-login { display:flex; }
#m-menu .m-menu-login a { position:relative; font-size:.875em; color:rgba(255,255,255,.5); height:25px; line-height:25px; padding-right:10px; margin-right:10px; }
#m-menu .m-menu-login a:hover { color:rgba(255,255,255,.85); }
#m-menu .m-menu-login a:before { content:""; position:absolute; top:50%; right:0; width:2px; height:10px; background:rgba(255,255,255,.1); margin-top:-6px; }
#m-menu .m-menu-login a:last-child:before { display:none; }

#m-menu .family-box { position:relative; font-size:.875rem; color:rgba(255,255,255,.7); --family-padding:10px 15px; }
#m-menu .family-box .family-btn { padding:var(--family-padding); border:1px solid rgba(255,255,255,.5); }
#m-menu .family-box .family-btn i { margin-left:20px; font-size:.75rem; transition-duration:400ms; }
#m-menu .family-box.on .family-btn i { transform:rotate(180deg); }
#m-menu .family-box .sub { position:absolute; left:0; right:0; bottom:calc(100% - 1px); opacity:0; border:1px solid rgba(255,255,255,.5); visibility:hidden; max-height:0; z-index:-1; transition-duration:400ms; }
#m-menu .family-box.on .sub { max-height:300px; opacity:1; visibility:visible; z-index:1; }
#m-menu .family-box .sub a { display:block; color:inherit; padding:var(--family-padding); border-bottom:1px solid rgba(255,255,255,.5); }
#m-menu .family-box .sub a:last-child { border:none; }
#m-menu .family-box .sub a:hover { background:#fff; color:#333; }


#m-menu .m-menu-container { position:relative; left:var(--bg-w); right:0; height:100%; width:calc(100% - var(--bg-w)); padding:var(--btns-h) 5%; z-index:2; display:flex; align-items:center; }
#m-menu .m-menu-container:before { content:""; position:absolute; left:-30vw; top:0; right:0; bottom:0; z-index:-1; transition:left 1000ms ease-in-out 0ms; }
body.m-menu-on #m-menu .m-menu-container:before { left:0; transition:left 1.2s ease-in-out 300ms; }


#m-menu .btns { position:absolute; left:0; top:0; right:0; height:var(--btns-h); display:flex; align-items:center; justify-content:flex-end; }
#m-menu .btns a { display:inline-block; padding:7px 25px; border:1px solid rgba(255,255,255,.6); color:#fff; margin:0 5px; font-size:.875rem; transition-duration:400ms; }
#m-menu .btns a:hover { background:#fff; color:#000; }

#m-menu .btn-close { position:relative; width:var(--btns-h); height:100%; background:#222; color:#eee; margin-left:20px; }
#m-menu .btn-close:before,
#m-menu .btn-close:after { content:""; position:absolute; top:50%; left:50%; height:40px; width:4px; background:#fff; border-radius:4px; margin:-20px 0 0 -2px; }
#m-menu .btn-close:before { transform: rotate(45deg); }
#m-menu .btn-close:after { transform: rotate(-45deg); }
#m-menu .btn-close:hover { background-color: var(--main-color1, #444) !important; color:#fff; }


#m-menu .items { width:100%; height:100%; padding:0 35px; overflow-y:auto; overflow-x:hidden; }
#m-menu .item { position:relative; display:flex; align-items:center; padding:35px 0px; border-bottom:1px solid rgba(255,255,255,.3); }
#m-menu .item:before { content:""; position:absolute; left:0; bottom:0; right:0; width:0; height:1px; background:#fff; transition-duration:400ms; }
#m-menu .item:hover:before { width:100%; }

#m-menu .item .is_sub { position:relative; width:200px; color: #fff; display: block; font-size:1.875rem; font-weight:700; }
#m-menu .item .sub li { padding:0 20px; }
#m-menu .item .sub li .sub-a { color: rgba(255,255,255,.5); }
#m-menu .item .sub li:hover > .sub-a,
#m-menu .item .sub li.on > .sub-a { color:#fff; }

#m-menu .item .depth2 { width:calc(100% - 200px); display:flex; align-items:center; flex-wrap:wrap; }
#m-menu .item .depth2 > li > .sub-a { text-align:center; font-size:1.25rem; max-width:100px; }

#m-menu .item .depth3 { display:none; }


@media (max-width: 1500px) {
    #m-menu { --bg-w:25%; }
    #m-menu .m-menu-container { padding:var(--btns-h) 50px; }
}

@media (max-width: 1400px) {
    #m-menu .item { display:block; padding:25px 0; }
    #m-menu .item .is_sub { font-size:1.375rem; margin-bottom:10px; width:100%; }

	#m-menu .item .sub li { padding:5px 0; }
	#m-menu .item .depth2 { width:100%; }
    #m-menu .item .depth2 > li { margin-right:30px; }
}

@media (max-width: 1200px) {
    #m-menu { --bg-w:0; }
	#m-menu .bg { position:static; }
	#m-menu .m-menu-btns { left:65px; right:65px; bottom:20px; }
    #m-menu .m-menu-container { padding:var(--btns-h) 30px; }
}

@media (max-width: 1024px) {
	body.m-menu-on { overflow:hidden !important; height:100vh !important; }
}

@media (max-width: 767px) {
    #m-menu { --btns-h:60px; }

	#m-menu .m-menu-btns { left:15px; right:15px; }
    #m-menu .m-menu-container { display:block; padding:calc(var(--btns-h) + 30px) 15px 80px; }

    #m-menu .btns:before { content:""; position:absolute; left:15px; top:10px; bottom:10px; width:30%; background:url('../img/logo-white.png') no-repeat left center/contain; }
    #m-menu .btns a { padding:3px 10px; margin:0 2.5px; font-size:.75rem; }

    #m-menu .btn-close { margin-left:5px; margin-right:12px; width:calc(var(--btns-h)*0.6); height:60%; }
    #m-menu .btn-close:before,
    #m-menu .btn-close:after { height:20px; margin-top:-10px; width:2px; margin-left:-1px; }

	#m-menu .items { padding:0; }
    #m-menu .item { padding:5px 0; border:none; }
    #m-menu .item:before { display:none; }

    #m-menu .item .is_sub { padding:0 15px; }
    #m-menu .item .is_sub.more:before,
    #m-menu .item .is_sub.more:after { content:""; position:absolute; top:50%; right:15px; background:#fff; width:10px; height:2px; border-radius:99px; }
    #m-menu .item .is_sub.more:before { transform: rotate(42deg); margin-right:6px; }
    #m-menu .item .is_sub.more:after { transform: rotate(-42deg); }

    #m-menu .item .depth2 { width:100%; padding:0 25px; background:rgba(0,0,0,.7); display:block; text-align:left; overflow:hidden; }
	#m-menu .item .depth2 > li { margin-right:0; }
	#m-menu .item .depth2 > li:first-child { margin-top:20px; }
	#m-menu .item .depth2 > li:last-child { margin-bottom:20px; }

	#m-menu .item .depth3 { display:block; margin-top:5px; padding-left:5px; }
	#m-menu .item .depth3 .sub-a:before { content:"- "; }

}