@charset "UTF-8";

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

#m-menu-overlay { position:fixed; left:0; top:0; right:80px; bottom:0; background:rgba(255,255,255,.7); opacity:0; visibility: hidden; z-index:-9; }
body.m-menu-on #m-menu-overlay { opacity:1; visibility: visible; z-index:99; }

#m-menu { position: fixed; right:80px; top:0; bottom:0; opacity:1; z-index:1100; transition-duration:600ms; }


#m-menu .btn-close { position:absolute; top:0; right:var(--c-padding); width:22px; height:var(--top-height); overflow:hidden; z-index:9; display:none; }
#m-menu .btn-close:before,
#m-menu .btn-close:after { content:""; position:absolute; width:100%; height:2px; left:50%; top:50%; border-radius:2px; background:#ddd; }
#m-menu .btn-close:before { transform: translate(-50%, -50%) rotate(45deg) scaleX(1.2); }
#m-menu .btn-close:after { transform: translate(-50%, -50%) rotate(-45deg) scaleX(1.2); }


#m-menu .m-menu-container { display:flex; height:100%; }
#m-menu .m-menu-container .slide-box { width:0; box-shadow:-10px 0px 15px rgba(0,0,0,.2); overflow:hidden; transition-duration: 600ms; }
#m-menu .m-menu-container .slide-box > div { display:flex; flex-direction: column; justify-content: space-between; height:100%; }
#m-menu .m-menu-container .slide-box > div > * { opacity:0; white-space: nowrap; transition-duration:100ms; }

body.m-menu-on #m-menu .m-menu-container .slide-box { width:400px; }
body.m-menu-on #m-menu .m-menu-container .slide-box > div > * { opacity:1; }

#m-menu .info { position:relative; padding:350px 40px 50px; }

#m-menu .info .logo { position:absolute; left:0; top:0; right:0; height:300px; background:#fff url('../img/logo.png') no-repeat center/160px; box-shadow:0 0 30px #ddd inset; }

#m-menu .info .sns { display:flex; }
#m-menu .info .sns li { margin-right:10px; }
#m-menu .info .sns a { display:block; width:30px; height:30px; background:none no-repeat center/contain; }
#m-menu .info .sns a.kakao { background-image:url('../img/sns_icon_kakao_white.png'); }
#m-menu .info .sns a.naver { background-image:url('../img/sns_icon_naver_white.png'); }
#m-menu .info .sns a.youtube { background-image:url('../img/sns_icon_youtube_white.png'); }
#m-menu .info .sns a.instagram { background-image:url('../img/sns_icon_instagram_white.png'); }
#m-menu .info .sns a.facebook { background-image:url('../img/sns_icon_facebook_white.png'); }
#m-menu .info .sns a.twiter { background-image:url('../img/sns_icon_twiter_white.png'); }


#m-menu .info .detail { font-size:.813rem; line-height:1.6; }
#m-menu .info .detail .call { margin-bottom:60px; }
#m-menu .info .detail .copyright { color:rgba(255,255,255,.5); margin:20px 0 0; }

#m-menu .m-menu-wrap { background:#444; height:100%; padding:50px; overflow-y:auto; z-index:2; }

#m-menu .items { display:flex; flex-wrap: wrap; margin:0 -10px; }
#m-menu .items .item { width:50%; padding:0 10px; }
#m-menu .items .item .is_sub { display: block; position: relative; width: 100%; padding:10px 0; color: #fff; font-size: 1.25rem; }

#m-menu .items .item .sub { margin-bottom:40px; }
#m-menu .items .item .sub li { }
#m-menu .items .item .sub li > a { position: relative; display:block; padding:10px 0; color:#aaa; transition: all .3s ease; }
#m-menu .items .item .sub li:hover > a, #m-menu .item .sub li > a.on { color: #ddd; }
#m-menu .items .item .sub li > a span { position:relative; display:inline-block; }
#m-menu .items .item .sub li > a span:before { content:""; position:absolute; left:0; top:100%; right:0; width:0; height:1px; background:#ddd; transition-duration:400ms; }
#m-menu .items .item .sub li > a:hover span:before { width:100%; }

#m-menu .items .item .depth3 { padding:0 5px; }
#m-menu .items .item .depth3 a { display:block; padding:0 15px 5px; color:#aaa; }
#m-menu .items .item .depth3 a:before { content:"- "; }
#m-menu .items .item .depth3 a:hover, #m-menu .item .depth3 a.on { text-decoration:underline; }


#m-menu .m-menu-wrap .links { display:flex; align-items:center; font-size:.813rem; margin:30px 0 0; }
#m-menu .m-menu-wrap .links li { position:relative; color:#888; padding-right:10px; margin-right:10px; }
#m-menu .m-menu-wrap .links li:after { content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); height:10px; width:1px; background:#666; }
#m-menu .m-menu-wrap .links li:last-child:after { display:none; }
#m-menu .m-menu-wrap .links li a { color:#888; }
#m-menu .m-menu-wrap .links li a:hover { color:#aaa; }



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

	#m-menu { right:0; }
	#m-menu .btn-close.on { display:block; }

	#m-menu .info { opacity:0; visibility:hidden; }
	#m-menu .m-menu-container .slide-box:first-child { display:none !important; }
}

@media (max-width: 767px) {
    #m-menu { right:0; }

    #m-menu .m-menu-wrap { padding:50px 30px 20px; }

    /* #m-menu .m-menu-container { position:absolute; top:0; right:-100vw; bottom:0; width:100vw; transition-duration: 600ms; }
    body.m-menu-on #m-menu .m-menu-container { right:0; } */
	body.m-menu-on #m-menu .m-menu-container .slide-box { width:100vw; }

    #m-menu .items .item .sub { margin-bottom:30px; }
    #m-menu .items .item .sub li > a { padding:5px 0;}
}


.m-menu-on .modal-backdrop { z-index:1110; }
.m-menu-on #modal-siteinfo { z-index:1120; }