@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');

header h1 { float:none; position: absolute; left: 50%; top:18px; transform: translateX(-50%) scale(0.9); padding:0;}
header .left { padding: 25px 0 0 14px;}
header .all { display: block; position: relative; width:32px; height: 14px; border-top: 2px solid #000; border-bottom: 2px solid #000; color:transparent; transform: scale(0.9);}
header .all:before { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background: #000; margin-top: -1px;}
header .left > div { float:none; }
header > ul { padding: 15px 5px 0 0;}
header > ul li {display: none;}
header > ul li.join { display: block;}
header > ul li.join a { overflow: hidden; width:29px; height: 29px;  background: url("../images/instagram.png") no-repeat 0px 0px / 300px auto; border: none; color:transparent;}
header > ul li.join1 { display: block;}
header > ul li.join1 a { overflow: hidden; width:29px; height: 29px;  background: url("../images/nblog.png") no-repeat 0px 0px / 300px auto; border: none; color:transparent;}
header > ul li.join2 { display: block;}
header > ul li.join2 a { overflow: hidden; width:29px; height: 29px;  background: url("../images/kakaotalk.png") no-repeat 0px 0px / 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.2s; padding: 30px 24px 15px 22px; width:calc(90% - 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 #333333;}
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: 12px; font-weight: bold;font-family: 'Nanum Gothic', sans-serif;}
header .nav.on .close { position: absolute; right: 24px; top: 45px; width: 12px; height: 12px; color:transparent;}
header .nav.on .close:before { content: ""; position: absolute; left:46%; top: 0; width: 1px; height: 100%; background: #000; transform: rotate(45deg);}
header .nav.on .close:after { content: ""; position: absolute; right:45%; top: 0; width: 1px; height: 100%; background: #000; transform: rotate(-45deg);}
/* 왼쪽상단로고 */
header h2 { margin: 0 0 40px 0; width: 220px; height: 60px; background: url("../images/layout.png") no-repeat 0 0px; 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);}