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

body { background: #fff;}
header .left { float: left; padding: 5px 0 0 50px;}
header a { color:#000000;}
header h1 { float: left; padding: 0 90px 0 0;}
header h1 a { display: block; width: 270px; height: 50px; background: url("../images/layout.png") no-repeat -0px -60px; color:transparent;}
header nav a { display: block; position: relative; height: 50px; line-height: 50px; font-size: 14px; font-family: 'Nanum Gothic', sans-serif;}
header nav a:before { content: ""; position: absolute; left: 0; bottom: 10px; width: 0; height: 1px; background: #333333; transition: width 0.5s;}
header nav a:hover:before {width: 100%;}
header .close,
header .all,
header .left > div > div,
header h2 { display: none;}
header .left > div { float: left;}
header .left > div nav li { float: left; padding: 4px 40px 0 0;}
header > ul { float: right; padding: 18px 40px 0 0;}
header > ul li { float: left; margin-left: -1px;}
header > ul li a { display: block; width: 35px; height: 35px; line-height: 38px; text-align: center; font-size: 11px; border:0px solid rgba(0,0,0,0.5); border-radius: 3px;}
header > ul li:first-child a{ border-radius:3px 0 0 3px; }
header > ul li:nth-last-of-type(2) a { border-radius: 0 3px 3px 0;}
header > ul li.join { padding: 4px 0 0 0px;}
header > ul li.join a { background: rgba(0,0,0,0);}
header > ul li.join1 { padding: 4px 0 0 0px;}
header > ul li.join1 a { background: rgba(0,0,0,0);}
header > ul li.join2 { padding: 4px 0 0 0px;}
header > ul li.join2 a { background: rgba(0,0,0,0);}