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

/* Reset CSS */
*{margin: 0; padding:0; font-size: 1em;}
body{font-family: 'Nanum Gothic', sans-serif;}
img{border: 0;}
a{text-decoration: none; outline: 0; color: #888888; font-family: 'Nanum Gothic', sans-serif;}
ol, ul, li{list-style: none;}
@keyframes scale{ 0%{transform:scale(0);} 100%{transform:scale(1);}}

#menu {width: 100%; height: 59px; position: fixed; top:0; left: 0; background: #FFFFFF; z-index: 1000; float: left; border-bottom: 1px solid #cccccc; min-width: 480px; font-family: 'Nanum Gothic', sans-serif;}
#menu #logo{position: absolute; top: 0; left: 0; height: 59px; width: 130px;}
#menu #logo h1{margin-left: 5px;}

#menu ul.menu {position: absolute; top: 0; left: 170px; }
#menu li {position: relative; z-index: 9; display: block;  float: left; font-family: 'Nanum Gothic', sans-serif; word-spacing: -1px;}
/* #menu li:hover>ul {left: -2px;} */
#menu li div { float: left; position: absolute; top: 60px; left: 0; z-index: 11; background: #FFFFFF; visibility: hidden; border: 1px solid #EEEEEE; box-sizing: border-box; border-top: none;}
#menu li:hover>div {visibility: visible;}

/* menu::level1 */
#menu a {position: relative; z-index: 10; height: 59px; display: block; float: left;	padding: 0 13px; line-height: 60px; text-decoration: none; font-family: 'Nanum Gothic', sans-serif; }
#menu span { font-family: 'Nanum Gothic', sans-serif; line-height: 60px; font-size: 1em; color: #a09e9d; word-spacing: =1px; text-transform:uppercase; display: block; cursor: pointer;}
#menu ul a:hover span {color: #48768D; font-family: 'Nanum Gothic', sans-serif;} 
#menu li {line-height: 60px; text-align: left; font-size: .85em; font-family: 'Nanum Gothic', sans-serif; color: #AAAAAA;}
#menu li.last span{font-family: 'Nanum Gothic', sans-serif; color: #AAAAAA; line-height: 60px; }

/* menu::level2 */
#menu ul ul {z-index: 12; margin: 0 5px 0 4px; }
#menu ul ul li {width: 100%; z-index: 9; height: 35px; line-height: 35px;}
#menu ul ul a { width: 100px; height: auto; clear: both; display: block; background:none; z-index: -1; font-family: 'Nanum Gothic', sans-serif; word-spacing: -1px; }
#menu ul ul a span {line-height: 20px; color: #888888; padding-top: 5px;font-family: 'Nanum Gothic', sans-serif; background:none;}
#menu ul ul a span:hover{border-bottom:1px solid #EEEEEE; box-sizing: border-box; color: #46748B;}

/* menu::level3 */
#menu ul ul div { width: 70px;  border: 1px solid #EEEEEE; box-sizing: border-box; border-top: none; border-left: none; margin: -60px 0 0 120px !important; height: auto; _padding: 0 0 9px 3px;}
#menu ul ul ul {_padding-right:1px; background: #FFFFFF; }
#menu ul ul ul a {width: 45px; text-align: center;}


/* menuRight */
#menu ul#menuRight{position: absolute; width: auto; top: 0;right:0; overflow: hidden;}
#menu ul#menuRight li{float: left; padding-left:5px; font-size: 0.95em; word-spacing: -1px; letter-spacing: -1px; color:#999999;}
#menu ul#menuRight li a.bl{color:#48768d; font-weight: bold; font-size: 0.95em; word-spacing: -1px; letter-spacing: -1px;}


@media screen and (min-width:640px) and (max-width:779px) {
#menu  ul#menuRight li.dn{display: none;}
}

@media screen and (min-width:480px) and (max-width:639px) {
#menu{min-width: 480px; height: 120px; }
#menu #logo{position: absolute; top: 0; left: 50%; margin-left: -67.5555px; }
#menu ul.menu {position: absolute; top: 60px; left: 50%; margin-left: -220px; min-width: 480px;}
#menu #logo h1{margin-left: 0;}
#menu li{width: 25%;}
#menu  ul#menuRight {display: none;}
}


@media screen and (max-width:479px) {
#menu{min-width: 480px; height: 120px; }
#menu #logo{position: absolute; top: 0; left: 50%; margin-left: -80px;}
#menu #logo h1{margin-left: 0; margin-top: 3px;}
#menu ul.menu {position: absolute; top: 60px; left: 50%; margin-left: -220px; min-width: 479px;}
#menu li{width: 25%;}
#menu  ul#menuRight {display: none;}

}