@charset "UTF-8";

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

#m-top .top .left { position:absolute; height:100%; left:15px; transition-duration: 200ms; z-index:9; }
#m-top .top .left .lang { position:relative; top:20px; border: 1px solid #ccc; border-radius: 20px; transition-duration: 300ms; padding:5px 10px; font-size:.875rem; }
#m-top .top .left .lang.on { background: #fff; color: #555; }
#m-top .top .left .lang .item .fa { margin:0 5px; }
#m-top .top .left .lang .sub { display: none; padding:5px 10px; }
#m-top .top .left .lang .sub a { display: block; padding: 5px 0; color: #fff; }
#m-top .top .left .lang.on .sub a { color: #555; }
#m-top .top .left .lang .sub img { max-width: 16px; }

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

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


@media (max-width: 1024px) {
	#m-top .top-menu-btn { right: 10px; top:50%; transform:translateY(-50%); position:absolute; }
}

@media (min-width: 768px) {
	body.top-hover #m-top .top-menu-btn div { background-color: #333; }
}

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 .top-menu-btn .title { bottom: 0; font-size: 14px; font-weight: 700; left: 0; letter-spacing: 2px; opacity: 1; position: absolute; right: 0; text-align: center; transition-duration: 200ms; }
body.scrolled #m-top .top-menu-btn .title { opacity: 0; }


/* 모바일 메뉴바 */
#m-menubar { background-color: #fff; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding:0 20px; transition-duration: 300ms; }
#m-menubar a { display: block; height: 40px; line-height: 40px; text-align: center; }
#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; }

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