@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/main1.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-btns > a { position:relative; font-size:.875em; color:#fff; height:22px; line-height:22px; padding-left:24px; background:url('../img/m-menu-icon-login.png') no-repeat left center/22px; opacity:.5; }
#m-menu .m-menu-btns > a:hover { opacity:1; }

#m-menu .sns { display:flex; }
#m-menu .sns a { position:relative; width:25px; height:25px; border-radius:5px; margin-left:3px; }
#m-menu .sns span { display:none; }
#m-menu .sns .inquiry { background:var(--main-color1); }
#m-menu .sns .kakao { background:var(--kakao-color); }
#m-menu .sns .naver { background:var(--naver-color); }
#m-menu .sns .youtube { background:var(--youtube-color); }
#m-menu .sns .instagram { background:var(--instagram-color); }
#m-menu .sns .facebook { background:var(--facebook-color); }
#m-menu .sns .twitter { background:var(--twiter-color); }

#m-menu .sns a:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background:none no-repeat center/contain; filter: brightness(100); }
#m-menu .sns .inquiry:before { background-image:url('../img/m-menu-icon-inquiry.png'); }
#m-menu .sns .kakao:before { background-image:url('../img/sns_icon_kakao.png'); filter: none; }
#m-menu .sns .naver:before { background-image:url('../img/sns_icon_naver.png'); }
#m-menu .sns .youtube:before { background-image:url('../img/sns_icon_youtube.png'); }
#m-menu .sns .instagram:before { background-image:url('../img/sns_icon_instagram.png'); }
#m-menu .sns .facebook:before { background-image:url('../img/sns_icon_facebook.png'); }
#m-menu .sns .twitter:before { background-image:url('../img/sns_icon_twitter.png'); }


#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:100%; color: #fff; display: block; font-size:1.875rem; font-weight:700; }
#m-menu .item .sub li { padding:0 20px; }
#m-menu .item .sub .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:0; top:0; right:0; bottom:auto; display:block; }
    #m-menu .m-menu-btns > a { display:block; height:var(--btns-h); line-height:var(--btns-h); padding:0 20px; background-color:var(--main-color2); padding-left:44px; background-position:20px center; opacity:1; }

    #m-menu .sns a { flex:1; margin:0; border-radius:0; padding:10px 5px; height:auto; text-align:center; }
    #m-menu .sns a:before { position:relative; display:block; width:25px; height:25px; margin:0 auto 5px; }
    #m-menu .sns span { display:block; font-size:10px; color:#fff; line-height: 1;}
    #m-menu .sns .kakao span { color:#222; }

    #m-menu .m-menu-container { position:static; display:block; padding:calc(var(--btns-h)*2 + 30px) 10vw 80px; }

    #m-menu .btns { left:auto; z-index:10; }
    #m-menu .btns > a { display:none; }

    #m-menu .btn-close { margin-left:5px; background-color:transparent; }
    #m-menu .btn-close:hover { background-color:transparent !important; }
    #m-menu .btn-close:before,
    #m-menu .btn-close:after { width:2px; margin-left:-1px; }

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

    #m-menu .item .is_sub { padding:10px 15px; margin-bottom:0; font-size:1.875rem; border-bottom:1px solid rgba(255,255,255,.4); }
    #m-menu .item .is_sub.more:before,
    #m-menu .item .is_sub.more:after { content:""; position:absolute; top:50%; right:15px; background:#fff; width:16px; height:1px; border-radius:99px; }
    #m-menu .item .is_sub.more:before { transform: rotate(90deg); transition-duration: 300ms; }
    #m-menu .item .is_sub.more:after { }

    #m-menu .item .is_sub:hover,
    #m-menu .item .is_sub.on { color:var(--main-color1); }

    #m-menu .item .is_sub.on:before { transform: rotate(0deg); }


    #m-menu .item .depth2 { width:100%; padding:0 15px; 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 .depth2 > li > .sub-a { font-size:1.375rem; }

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

}