@charset "utf-8";

/* ——————————————————————————
 * m_icoMenu
/* —————————————————————————— */
@keyframes burger-open-top{
	50%{transform:translate3d(0,7px,0)}
	100%{transform:translate3d(0,7px,0) rotate(45deg)}
}
@keyframes burger-open-bot{
	50%{transform:translate3d(0,-7px,0)}
	100%{transform:translate3d(0,-7px,0) rotate(-45deg)}
}
@keyframes burger-close-top{
	0%{transform:translate3d(0,7px,0) rotate(45deg)}
	50%{transform:translate3d(0,7px,0) rotate(0deg)}
	100%{transform:translate3d(0,0,0)}
}
@keyframes burger-close-bot{
	0%{transform:translate3d(0,-7px,0) rotate(-45deg)}
	50%{transform:translate3d(0,-7px,0) rotate(0deg)}
	100%{transform:translate3d(0,0,0)}
}

#header .m_icoMenu{}

/* btn_gnb */
#header .m_icoMenu .btn_gnb{height:16px;width:20px;display:block;position:absolute;top:50%;right:0;margin-top:-8px;z-index:10}
#header .m_icoMenu .btn_gnb span{display:block;position:absolute;width:100%;border-top:2px solid #222;transform-origin:50% 50%;-webkit-transition:transform 400ms ease-out;transition:transform 400ms ease-out}
#header .m_icoMenu .btn_gnb span.slice1{top:0}
#header .m_icoMenu .btn_gnb span.slice2{top:50%;margin-top:-1px;opacity:1;-webkit-transition:transform 400ms ease-out,opacity 0 linear 200ms;transition:transform 400ms ease-out,opacity 0ms linear 200ms}
#header .m_icoMenu .btn_gnb span.slice3{bottom:0}
#header .m_icoMenu .btn_gnb.active span.slice1{animation:burger-open-top 400ms ease-out forwards}
#header .m_icoMenu .btn_gnb.active span.slice2{opacity:0;transition:transform 400ms ease-out,opacity 0ms linear 200ms}
#header .m_icoMenu .btn_gnb.active span.slice3{animation:burger-open-bot 400ms ease-out forwards}
#header .m_icoMenu .btn_gnb.closing span.slice1{animation:burger-close-top 400ms ease-out forwards}
#header .m_icoMenu .btn_gnb.closing span.slice3{animation:burger-close-bot 400ms ease-out forwards}

/* btn_call */
#header .m_icoMenu .btn_call{line-height:0;position:absolute;top:50%;left:0;margin-top:-11px}
#header .m_icoMenu .btn_call:before{content:'';width:22px;height:22px;display:inline-block;background:url("../img/ico_call.png") no-repeat 0 -22px;-webkit-background-size:22px 44px;background-size:22px 44px;background-position:0 0}

/* header - scrolled, menuPanel_open */
.menuPanel_open #header:before,
.scrolled .menuPanel_open #header:before{background:#000;opacity:0.08;filter: alpha(opacity=8);-moz-opacity:0.08;display: block !important;}
.menuPanel_open #header .header_bg{background: #fff;}

.scrolled #header .m_icoMenu .btn_gnb span,
.menuPanel_open #header .m_icoMenu .btn_gnb span{border-color:#222}
.scrolled #header .m_icoMenu .btn_call:before,
.menuPanel_open #header .m_icoMenu .btn_call:before{}
.menuPanel_open #header .logo a img.ori{display:block}
.menuPanel_open #header .logo a img.wht{display:none}


/* ——————————————————————————
 * menuPanel
/* —————————————————————————— */
#menuPanel {
	-webkit-transition: all 0.3s cubic-bezier(0.770,0.000,0.175,1.000);
	-moz-transition: all 0.3s cubic-bezier(0.770,0.000,0.175,1.000);
	-o-transition: all 0.3s cubic-bezier(0.770,0.000,0.175,1.000);
	transition: all 0.3s cubic-bezier(0.770,0.000,0.175,1.000);
}
body.menuPanel_open #menuPanel nav li,
body.menuPanel_open #menuPanel .menuBottom {
	-webkit-transition: all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-moz-transition: all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	-o-transition: all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);
	transition: all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
body.menuPanel_open #menuPanel {
	visibility: visible;
	z-index: 9998;
	opacity: 1;
}
body.menuPanel_open #menuPanel nav li, body.menuPanel_open #menuPanel .menuBottom {
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}
#menuPanel nav li, #menuPanel .menuBottom {
	opacity: 0;
	-webkit-transform: translateY(3.125rem);
	-moz-transform: translateY(3.125rem);
	-o-transform: translateY(3.125rem);
	transform: translateY(3.125rem);
}

#menuPanel{width:100%;height:100%;position:fixed;top:0;left:0;bottom:0;right:0;background:#fff;padding:0 11.11111111111vw;z-index:-9998;visibility:hidden;opacity:0;display:table}
#menuPanel nav{display:table-cell;vertical-align:middle}

/* m_gnb */
#menuPanel nav .m_gnb li a{position:relative;display:inline-block;font-size:24px;line-height:54px;font-weight:500;color:#222}
#menuPanel nav .m_gnb li a.active{color:#877200}
#menuPanel nav .m_gnb li a.active:before{content:'';height:1px;width:7.111111vw;background:#0a4cd4;position:absolute;top:50%;left:-11.11111111111vw;z-index:-1}

/* m_util */
#menuPanel nav .m_util{position:relative;padding-top:12px;margin-top:8px}
#menuPanel nav .m_util:before{content:'';width:30px;height:1px;display:inline-block;background:#ddd;position:absolute;top:0;left:0}
#menuPanel nav .m_util li a{position:relative;display:inline-block;font-size:18px;line-height:38px;font-weight:400;color:#888}

/* m_copy */
#menuPanel .m_copy{position:absolute;left:11.11111111111vw;bottom:20px;font-size:11px;text-transform:uppercase;letter-spacing:0;font-weight:700;color:#999}