@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-top .lang ul li{float: left; color: #fff;  }
#m-top .lang ul li a{color: #fff;}

/* 모바일 메뉴바 */
#m-menubar { background-color: #fff; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding:0 0px; transition-duration: 300ms; }
#m-menubar a { display: block; height: 40px; line-height: 40px; text-align: center; font-size:13px;}

#m-menubar .swiper-nav { position:absolute; top:0; height:100%; width:20px; z-index:2; cursor:pointer; display:flex; justify-content:center; align-items:center; }

#m-menubar .swiper-nav.swiper-button-disabled { opacity:0.3; }
#m-menubar .swiper-nav.swiper-prev { left:0; }
#m-menubar .swiper-nav.swiper-next { right:0; }


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