@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);


/* 기본 CSS */
* { box-sizing:border-box; }
button, input { border:none; outline:none; box-shadow:none; -webkit-appearance:none; } 
button:focus, input:focus { outline:none; }

.wrap { width:100%; max-width:1024px; margin:0 auto; }
header nav { display:none; }

/* header layout */
header { width:100%; height:90px; padding:20px; background:#fff; font-family:'Lato', 'Raleway', sans-serif; transition:all 0.3s linear; }
header #logo { float:left; width:62px; }
header #logo img { width:70%; }
header #site-name { float:left; font-size:12px; line-height:12px; margin-top:5px; }
header .menu-icon { float:right; background-image:url(../images/menu-icon.svg); background-repeat:no-repeat; width:20px; height:20px; margin-top:10px; cursor:pointer; text-indent:-999999px; transition:background-image 0.3s ease; }

#header.opened { background:#f9f9f9; height:2000px; }
#header .menu-icon.opened { background-image:url(../images/close-icon.svg); width:20px; }
#header #logo.opened, #header #site-name.opened { display:none; }

/* toggle-menu */
#toggle-menu { display:none; width:100%; height:calc(100% - 90px); position:fixed; top:90px; left:0; z-index:3; background:#f9f9f9; font-family:'Lato', 'Raleway', sans-serif; transition:all 0.3s linear; }
#toggle-menu a { color:#444; }
#toggle-menu a:hover { color:#8c8c8c; }
#toggle-menu .nav { float:left; padding:10px 40px; font-size:0.8rem; font-weight:600; letter-spacing:0.1rem; width:100%; }
#toggle-menu .nav li { padding:5px; }
#toggle-menu .toggle-login-menu { float:left; margin-top:20px; padding:23px 42px; font-size:0.7rem; letter-spacing:0.1rem; width:100%; }
#toggle-menu .toggle-login-menu li { padding:3px; }

html.opened, body.opened { overflow:hidden; height:100%; }
#toggle-menu.opened { display:block; }


/* footer */
footer { width:100%; height:120px; margin-bottom:30px; padding:20px 15px; font:11px 'Noto Sans CJK KR', 'Nanum Gothic', sans-serif; color:#7f7f7f; border-top:1px solid #efefef; }
footer a { color:#7f7f7f; font-weight:600; }
footer .company-info { margin-bottom:5px; }


/* tablet */
@media all and (min-width:768px) {
/* toggle-menu */
#toggle-menu .nav { font-size:1.3rem; font-weight:600; letter-spacing:0.3rem; }
#toggle-menu .toggle-login-menu { font-size:1rem; }
}


/* PC */
@media all and (min-width:1024px) {
header nav { display:block; }
header .menu-icon, #toggle-menu { display:none; }

/* header */
header { margin:10px 0px; }
header a { color:#444; }
header a:hover { color:#8c8c8c; }
header ul li { display:inline-block; }
header .main-nav { float:left; padding:3px; padding-left:80px; }
header .main-nav li { margin-right:40px; letter-spacing:1.5px; font-size:14px; font-weight:600; }
header .login-menu { float:right; padding:8px 2px 0 0; font-weight:500; font-size:11px; }
header .login-menu li { margin-left:15px; }

/* footer */
footer { margin-top:2rem; }
footer .company-info { float:left; }
footer .privacy { float:right; }
}