@charset "utf-8";

.head_text {height:1px; width:1px; overflow:hidden; position:absolute; left:0; top:0;}

@media screen and (min-width:1000px) {
/*피씨뷰*/

header {width:100%; height:80px; background-color:#fff; position:relative; z-index:1000;}
#gnb {display:block; margin:0 auto; height:80px; width:96%; max-width:1200px;}
#gnb .depth1 {display:table; margin:0 auto;}
#gnb .depth1 > li {float:left; position:relative;}
#gnb .depth1 > li > a {padding:0 40px; line-height:80px; font-size:18px; color:#555;}
#gnb .depth1 > li:hover > a {color:#000;}
#gnb .depth1 > li .depth2 {display:none; position:absolute; left:50%; margin-left:-100px; width:200px; background-color:#111;}
#gnb .depth1 > li:hover .depth2 {display:block;}

#gnb .depth2 > li {color:#fff; width:100%; display:block;}
#gnb .depth2 > li > a {color:#fff; width:100%; background-color:#111; display:block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left:30px; line-height:60px; font-size:16px;}
#gnb .depth2 > li:hover > a {background-color:#f1f1f1; color:#555;}
header .util_menu {position:absolute; bottom:0px; right:0px; height:100%; width:100px; background-color:#f1f1f1; display:none;}

}

@media screen and (max-width:1000px) {
/*모바일뷰*/

header {width:100%; height:60px; background-color:#f1f1f1; position:relative; z-index:1000;}
.menu_open {cursor:pointer; line-height:60px; width:60px; text-align:center;}
.menu_closed {display:none; cursor:pointer; line-height:60px; width:60px; text-align:center;}
#mgnb {position:relative; display:none; width:100%; max-width:480px; background-color:#d1d1d1; height:450px;}
#mgnb .depth1 > li {}
#mgnb .depth1 > li > a {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left:15px; line-height:50px; border-bottom:1px solid #c1c1c1; width:100%; display:block; font-size:16px;}

#mgnb .depth1 > li.active > a {background-color:#555; color:#fff; border-bottom:1px solid #555;}
#mgnb .depth1 > li.active .depth2 {display:block;}
#mgnb .depth1 > li:hover > a {background-color:#555; color:#fcff00; border-bottom:1px solid #555;}
#mgnb .depth1 > li:hover .depth2 {display:block;}
#mgnb .depth2 {display:none; position:absolute; top:0px; left:50%; width:50%; height:100%; background-color:#555;}
#mgnb .depth2 > li > a {color:#fff; width:100%; display:block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left:30px; line-height:50px; font-size:16px;}
#mgnb .depth2 > li.active > a {color:#fcff00;}
#mgnb .depth2 > li:hover > a {color:#fcff00; background-color:#333;}
header .util_menu {position:absolute; bottom:-50px; height:50px; width:100%; background-color:#f1f1f1;}

}