@charset "UTF-8";

/********************************************************
■ Mobile Header : 모바일 헤더 부분
********************************************************/
#m-top { position: fixed; left: 0; right: 0; top: 0; height: 60px; transition-duration: 200ms; z-index:9999; }
body.scrolled .is-subpage #m-top { background:#fff; border-bottom:1px solid #ddd; }
#m-top.bg { background:#fff; }
#m-top .top { display: flex; align-items: center; justify-content: space-between; height: 60px; 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-top.bg .top .logo, body.scrolled .is-subpage #m-top .top .logo { background-image: url("../img/logo.png"); }

/* 상단 우측 메뉴버튼 */
#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: 30px; height: 2px; border-radius: 2px; transform: translate(-50%, -50%); transition: all .5s; }
#m-top .top-menu-btn div:nth-child(1) { margin-top: -8px; }
#m-top .top-menu-btn div:nth-child(3) { margin-top: 8px; }

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); }

#m-top.bg .top-menu-btn div, body.scrolled .is-subpage #m-top .top-menu-btn div { background:#000; }


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


@media (max-width: 768px) { 
	body.m-menu-on, 
	body.m-menu-on #m-top { left: -80%; right: 80%; }
}