@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

* { padding:0; margin:0;}
a { text-decoration:none;}
li { list-style:none;}
img { border:0;}
html, body { margin:0; position:relative;width:100%}
@font-face {
  font-family: SDSwagger;
  src: local(SDSwagger),
       local(SDSwagger),
       url(/fonts/SDSwagger.woff) format('woff'),
       url(SDSwaggerTTF.ttf) format('truetype');
  font-style: normal;
  font-weight: bold;
  unicode-range: U+0-10FFFF;
}

@media screen and (min-width:768px){
.m_logo_img { display:none;}
#ham { display:none !important;}
.mobile_lnb { display:none !important;}
}
#main_header { width:100%; height:140px; background:#e9e9e9}
.logo_img { float:left; margin:2% 0 0 5%;}

/* mobile toggle menu*/

#ham { position:fixed; top:2%; right:5%; z-index:999}
#ham > a > .xi-bars { display:bolock; padding:0px; border:1px solid #f1f1f1; color:#f1f1f1; border-radius:2px; font-size:3em; text-shadow:2px 2px 2px rgba(0,0,0,0.3);} 

.mobile_lnb{ display:none; position: fixed;right:0;top:0; width:100%; height:100%;background:rgba(0,0,0,0.7); z-index:9999;  box-shadow:0px 3px 3px #999;}
.mobile_lnb { padding:0; box-sizing:border-box}
.mobile_lnb ul { padding:80px 10px 30px; background:#fff;border-bottom:1px solid #d1d1d1; margin-top:0 !important;}
.mobile_lnb ul li {  padding:12px 0; border-bottom:1px solid #d1d1d1;}
.mobile_lnb ul li a { display:block;font:700 25px 'SDSwagger'; color:#666; font-weight:700; transform:translate(0,0); transition:all 0.3s}
.mobile_lnb ul li a:hover { color:#F60; transform:translate(5px,0);}

.mobile_lnb > .img1{ position: absolute;left:40%; top:2%; cursor: pointer; display:block; width:20%;}
.mobile_lnb > .img2{ position: absolute;right:5%;top:3%; cursor: pointer; width:5%;}

/* top 메뉴 */
.main_menu {float:right; margin:30px 100px 0 0;}
.main_menu ul { overflow:hidden}
.main_menu ul li { float:left; margin-right:20px;}
.main_menu ul li a { display:block; font:700 30px 'SDSwagger'; color:#000; padding:10px; width:100%; text-align:center}
.main_menu ul li a > div.bar { width:1%; height:3px; background:#54bdb9; opacity:0; transition:all 0.3s; z-index:999; position:relative; margin:0 auto; position:relative; top:-15px}
.main_menu ul li a:hover > div.bar { opacity:1; width:100%}

#typing { font:500 21px 'NanumSquare', sans-serif; text-align:center; color:#b5b5b6}

.portfolio_board { width:95% !important; margin:30px auto !important;}

@media screen and (max-width:767px){
.main_menu { display:none;}
#main_header { width:100%; height:90px !important; background:#e9e9e9}
.logo_img { float:left; margin:2% 0 0 5%; }
.logo_img a img {display:block; width:70% !important;} 

}