@charset "UTF-8";

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

#m-menu { position:fixed; right:-100%; width:500px; max-width:95%; opacity: 1; top:0; bottom:0; height:100%; background: #111; transition:all 400ms 400ms; z-index:1100; }

/* 스크롤바 안보이게 */
#m-menu { overflow-y:auto; -ms-overflow-style: none; scrollbar-width: none; }
#m-menu::-webkit-scrollbar { display: none; }

#m-menu .m-menu-top { position:relative; height:130px; padding:25px; background: url("../img/logo-gold.png") no-repeat center/235px; }

#m-menu a.btn-close { position: absolute; right:10px; top:10px; width:40px; height:40px; }
#m-menu a.btn-close:before, #m-menu a.btn-close:after { content:""; position:absolute; left:50%; top:50%; background:#aaa; border-radius:2px; height:2px; width: 30px; }
#m-menu a.btn-close:before { transform: translate(-50%, -50%) rotate(45deg); }
#m-menu a.btn-close:after { transform: translate(-50%, -50%) rotate(-45deg); }

#m-menu .items { position:relative; padding:0 30px; }
#m-menu .item { display:flex; justify-content: space-between; border-top:1px solid rgba(255,255,255,.3); padding:20px 0; }
#m-menu .item a { height:35px; line-height:20px; }
#m-menu .item .is_sub { color:#888; display: inline-block; position: relative; padding:5px 0; font-size:1.125rem; }
#m-menu .item .is_sub:hover, #m-menu .item .is_sub.on { color: #fff; }
#m-menu .item .is_sub.on:before { content:""; position:absolute; right:-5px; top:5px; border-radius:100%; width:5px; height:5px; background:#fff; }

#m-menu .item .sub { width:calc(100% - 160px); }
#m-menu .item .sub.on { color:#fff; }

#m-menu .item .sub .depth2-a { position: relative; color: #888; display: inline-block; padding:5px 0; }
#m-menu .item .sub .depth2-a:hover, #m-menu .item .sub .depth2-a.on { color:#fff; }
#m-menu .item .sub .depth2-a:before { content:""; position:absolute; left:0; bottom:5px; right:0; width:0; height:1px; background:#fff; transition-duration:400ms; }
#m-menu .item .sub .depth2-a:hover:before, #m-menu .item .sub .depth2-a.on:before { width:100%; }

#m-menu .item .depth3 { margin-top:-10px; }
#m-menu .item .depth3 .depth3-a { display:block; color:#aaa; padding:5px; }
#m-menu .item .depth3 .depth3-a:before { content:"·"; }
#m-menu .item .depth3 .depth3-a:hover { text-decoration:underline; }

#m-menu .m-menu-bottom { background:#ddd; margin-top:30px; padding:30px; font-size:.875rem; }
#m-menu .m-menu-bottom .sns { margin-bottom:20px; }
#m-menu .m-menu-bottom .sns a { position:relative; display:inline-block; width:30px; height:30px; border-radius:99px; background:none no-repeat center/22px; overflow:hidden; }
#m-menu .m-menu-bottom .sns .kakao { background-image:url('../img/sns_icon_kakao_gray.png'); background-color:#ffe800; }
#m-menu .m-menu-bottom .sns .instagram { background:linear-gradient(to bottom, #8452a1, #ea2d87, #ef4c3e, #efcb6b); }
#m-menu .m-menu-bottom .sns .instagram:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background:url('../img/sns_icon_instagram_white.png') no-repeat center/22px; }
#m-menu .m-menu-bottom .sns .naver { background-image:url('../img/sns_icon_naver_white.png'); background-color:#06be34; }
#m-menu .m-menu-bottom .sns .facebook { background-image:url('../img/sns_icon_facebook_white.png'); background-color:#435e99; }
#m-menu .m-menu-bottom .sns .youtube { background-image:url('../img/sns_icon_youtube_white.png'); background-color:#d4262c; }
#m-menu .m-menu-bottom .sns .twiter { background-image:url('../img/sns_icon_twiter_white.png'); background-color:#27a9e0; }

#m-menu .m-menu-bottom ul li { position:relative; margin:10px 0; padding-left:10px; }
#m-menu .m-menu-bottom ul li:before { content:""; position:absolute; left:0; top:50%; border-radius:100%; background:#444; width:5px; height:5px; margin-top:-2.5px; }

#m-menu .m-menu-bottom .login { display:flex; margin-top:30px; }
#m-menu .m-menu-bottom .login a { flex:1; margin:0 1px; background:#ccc; text-align:center; padding:10px; font-size:.75rem; font-family: 'NanumSquareNeo-Variable'; }

#m-menu-overlay { position:fixed; left:0; top:0; z-index:1050; width:100%; height:100%; background:rgba(0,0,0,.6); opacity:0; visibility:hidden; transition-duration:400ms; }
body.m-menu-on #m-menu-overlay {  opacity:1; visibility:visible; }