@charset "UTF-8";

/********************************************************
■ Mobile Header : 모바일 헤더 부분
********************************************************/
#m-top { background: #fff; left: 0; position: fixed; right: 0; top: 0; transition-duration: 200ms; z-index: 10; font-weight:600; }
body.scrolled #m-top { top:-80px; }
#m-top .top { position:relative; height: 80px; padding: 0 10px; }

#m-top .top .sns { position:absolute; left:5px; top:50%; transform:translateY(-50%); font-size:0; }
#m-top .top .sns a { position:relative; display:inline-block; width:26px; height:26px; border-radius:99px; background:none no-repeat center/20px; opacity:.5; overflow:hidden; }
#m-top .top .sns a:hover { opacity:1; background-color:#333; }
#m-top .top .sns .kakao { background-image:url('../img/sns_icon_kakao_gray.png'); background-color:#ffe800; }
#m-top .top .sns .kakao:hover { background-color:#ffe800; }
#m-top .top .sns .instagram { background-image:url('../img/sns_icon_instagram_gray.png'); transition-duration:0ms; }
#m-top .top .sns .instagram:hover { background:linear-gradient(to bottom, #8452a1, #ea2d87, #ef4c3e, #efcb6b); }
#m-top .top .sns .instagram:hover: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-top .top .sns .naver {background-image:url('../img/sns_icon_naver_white.png'); background-color:#06be34; }
#m-top .top .sns .naver:hover { background-image:url('../img/sns_icon_naver_white.png'); background-color:#06be34; }
#m-top .top .sns .facebook { background-image:url('../img/sns_icon_facebook_gray.png'); }
#m-top .top .sns .facebook:hover { background-image:url('../img/sns_icon_facebook_white.png'); background-color:#435e99; }
#m-top .top .sns .youtube { background-image:url('../img/sns_icon_youtube_gray.png'); }
#m-top .top .sns .youtube:hover { background-image:url('../img/sns_icon_youtube_white.png'); background-color:#d4262c; }
#m-top .top .sns .twiter { background-image:url('../img/sns_icon_twiter_gray.png'); }
#m-top .top .sns .twiter:hover { background-image:url('../img/sns_icon_twiter_white.png'); background-color:#27a9e0; }

#m-top .top .logo { position:absolute; display: block; top:50%; left:50%; transform:translate(-50%, -50%); background: url("../img/logo.png") center/contain no-repeat; height: 60px; width: 150px; }

#m-top .top .bg_controls { position:absolute; right:50px; top:50%; transform:translateY(-50%); }
/* 상단 우측 메뉴버튼 */
#m-top .top-menu-btn { position:absolute; right:10px; top:50%; margin-top:-12.5px; width:25px; height:25px; display:flex; justify-content:center; align-items: flex-end; flex-direction: column; }
#m-top .top-menu-btn div { background:#333; width:100%; height:2px; border-radius:2px; transition-duration:400ms; margin:3px 0; }
#m-top .top-menu-btn div:nth-child(2) { width:70%; }

#m-top .top-menu-btn:hover div { width:70%; }
#m-top .top-menu-btn:hover div:nth-child(2) { width:100%; }


/* 모바일 메뉴바 */
#m-menubar { position:absolute; left:0; top:100%; right:0; background-color: rgba(150,150,150,.8); transition-duration: 300ms; }
#m-menubar .swiper-slide { width:auto !important; }
#m-menubar a { display: block; height: 40px; line-height: 40px; text-align: center; padding:0 10px; margin:0 5px; color:#fff; }

body.m-menu-on { left: 0; right: 0; }

@media (max-width: 1024px) {
	#m-top { display:block !important; }
}
/*
@media (max-width: 768px) {
	body.m-menu-on,
	body.m-menu-on #m-top { left: -350px; right: 350px; }
}*/