@charset "utf-8";

header h1 { float:none; position: absolute; left: 50%; top:15px; transform: translateX(-50%) scale(0.6); padding:0;}
header .left { padding: 33px 0 0 14px;}
header .all { display: block; position: relative; width:32px; height: 14px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; color:transparent; transform: scale(0.8);}
header .all:before { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background: #fff; margin-top: -1px;}
header .left > div { float:none; }
header > ul { padding: 33px 17px 0 0;}
header > ul li {display: none;}
header > ul li.join { display: block;}
header > ul li.join a { overflow: hidden; width:17px; height: 16px;  background: url("../images/layout_m.png") no-repeat -63px -35px / 300px auto; border: none; color:transparent;}
header > ul li a {width: 70px;}

/* 모바일메뉴 */
header .close,
header .all,
header .left > div > div,
header h2 { display: block;}
header .nav {  position: absolute; left:-120%; top: 0; z-index: 101; transition: left 0.7s; padding: 15px 24px 15px 22px; width:calc(100% - 32px); height: 100%; background: #fff; box-sizing: border-box;}
header .nav.on { left: 0;}
header .nav.on nav { padding: 0 0 24px; border-top: 1px solid #0091d0;}
header .nav.on nav a { height: 40px; line-height: 40px; color:#111;}
header .nav.on nav a:before { display: none;}
header .nav.on nav li { float: none; border-bottom: 1px solid #eee;}
header .nav.on div { display: flex; border:1px solid #eee;}
header .nav.on div a:first-child { border: none;}
header .nav.on div a { flex:1; height: 38px; border-left: 1px solid #eee; line-height: 38px; text-align: center; color:#666; font-size: 13px; font-weight: bold;}
header .nav.on .close { position: absolute; right: 24px; top: 24px; width: 12px; height: 12px; color:transparent;}
header .nav.on .close:before { content: ""; position: absolute; left:46%; top: 0; width: 1px; height: 100%; background: #5a5a5a; transform: rotate(45deg);}
header .nav.on .close:after { content: ""; position: absolute; right:45%; top: 0; width: 1px; height: 100%; background: #5a5a5a; transform: rotate(-45deg);}
header h2 { margin: 0 0 75px 0; width: 132px; height: 50px; background: url("../images/layout.png") no-repeat 0 -70px; color:transparent;}
.dim { display: none;position: fixed; left: 0; top: 0; z-index: 100; width: 100%; height: 100%; background: rgba(0,0,0,0.5);}