@charset "UTF-8";

/********************************************************
■ Mobile Header : 모바일 헤더 부분
********************************************************/
#m-top { position: fixed; left: 0; right: 0; top: 0; z-index: 10; height: 90px; background: #fff; transition-duration: 200ms; }
#m-top .top { display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 10px; }
#m-top .top > a { display: block; }
#m-top .top .logo { width: 250px; height: 40px; background: url("../img/logo-white.png") left center/contain no-repeat; }

/* 모바일 메뉴바 */
#m-menubar { position: relative; margin-top: 0; background-color: white; border: 1px solid #ccc; border-left: 0; border-right: 0; transition-duration: 300ms; }
#m-menubar a { display: block; height: 40px; line-height: 40px; text-align: center; }
#m-menubar a.on { font-weight: 700; }

/* 상단 우측 메뉴버튼 */
#m-top .top-menu-btn { transition-duration: 300ms; position: relative; width: 40px; height: 40px; }
#m-top .top-menu-btn div { background-color: #fff; position: absolute; left: 50%; top: 50%; width: 25px; height: 4px; border-radius: 2px; transform: translate(-50%, -50%); transition: all .5s; }
#m-top .top-menu-btn div:nth-child(1) { margin-top: -7px; }
#m-top .top-menu-btn div:nth-child(3) { margin-top: 7px; }

body.m-menu-on #m-top .top-menu-btn div { margin-top: 0; }
body.m-menu-on #m-top .top-menu-btn div:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg) scaleX(1.3); }
body.m-menu-on #m-top .top-menu-btn div:nth-child(2) { opacity: 0; }
body.m-menu-on #m-top .top-menu-btn div:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg) scaleX(1.3); }

@media (max-width: 767px) { 
	#m-top .top-menu-btn { right: 10px; } 
}