@charset "euc-kr";

#gnb {position:fixed; top:0; left:-100%; width:100%; height:100%; background:#fff; overflow:auto; z-index:1000; -webkit-overflow-scrolling:touch; opacity:0;}
#gnb .top-menu{/* background:#4a4a4a; */ background:#55aaba;}
#gnb .top-menu .util{height:3.063rem;}
#gnb .top-menu .util ul{padding-right:3.648rem;}
#gnb .top-menu .util ul:after{content:''; display:block; clear:both;}
#gnb .top-menu .util ul li{float:left;}
#gnb .top-menu .util ul li a{position:relative; display:block; padding:0 1rem; font-size:0.813rem; font-weight:300; line-height:3.063rem; color:#fff;}
#gnb .top-menu .util ul li.join a:after{content:''; position:absolute; left:0; top:50%; margin-top:-5px; display:block; width:1px; height:10px; background:#777;}
#gnb .top-menu .util ul li.logout{float:right;}
#gnb .top-menu .util ul li.logout a{padding:0 0.313rem; color:#fff;}
#gnb .top-menu .link ul{border-top:1px solid #fff;}
#gnb .top-menu .link ul:after{content:''; display:block; clear:both;}
#gnb .top-menu .link ul li{float:left; width:25%; border-left:1px solid #fff; box-sizing:border-box;}
#gnb .top-menu .link ul li:first-child{border-left:0;}
#gnb .top-menu .link ul li .tb{display:table; width:100%;}
#gnb .top-menu .link ul li a{display:table-cell; vertical-align:middle; height:5rem; text-align:center; box-sizing:border-box;}
#gnb .top-menu .link ul li .icon{margin-bottom:0.813rem;}
#gnb .top-menu .link ul .l1 .icon img{width:auto; height:1.250rem;margin:auto;}
#gnb .top-menu .link ul .l2 .icon img{width:auto; height:1.250rem;margin:auto;}
#gnb .top-menu .link ul .l3 .icon img{width:auto; height:1.250rem;margin:auto;}
#gnb .top-menu .link ul .l4 .icon img{width:auto; height:1.250rem;margin:auto;}
#gnb .top-menu .link ul li p{font-size:0.750rem; font-weight:300; line-height:1; color:#fff;}
#gnb .nav-menu > ul > li > a{position:relative; display:block; padding:0.938rem 2.188rem 0.875rem 1.250rem; border-bottom:1px solid #f5f5f5; font-size:0.875rem; font-weight:500; line-height:1.250rem; color:#111;}
#gnb .nav-menu > ul > li > a .arr{position:absolute; right:1rem; top:50%; margin-top:-0.313rem; display:block; width:0.688rem; height:0.563rem; -webkit-transition:.3s ease; transition:.3s ease; box-sizing:border-box;}
#gnb .nav-menu > ul > li > a .arr:after,
#gnb .nav-menu > ul > li > a .arr:before{content:''; display:block; width:calc(50% + 0.078rem); height:0.063rem; background-color:#a5a5a5; -webkit-transition:.3s ease; transition:.3s ease;}
#gnb .nav-menu > ul > li > a .arr:after{position:absolute; left:0; top:0.250rem; -webkit-transform:rotate(45deg); transform:rotate(45deg);}
#gnb .nav-menu > ul > li > a .arr:before{position:absolute; right:0; top:0.250rem; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
#gnb .nav-menu > ul > li.active > a .arr{-webkit-transform:rotate(180deg); transform:rotate(180deg);}
#gnb .nav-menu > ul > li.active > a .arr:after,
#gnb .nav-menu > ul > li.active > a .arr:before{background-color:#55aaba;}
#gnb .nav-menu .submenu {display:none;}
#gnb .nav-menu .submenu ul{padding-left:1.875rem;}
#gnb .nav-menu .submenu ul li a{display:block; padding:0.938rem 2.188rem 0.875rem 0; border-bottom:1px solid #f5f5f5; font-size:0.813rem; font-weight:300; line-height:1.250rem; color:#666;}
#gnb .nav-menu .submenu ul li.active a{}
#gnb .close {position:absolute; top:0; right:0; display:block; width:3.648rem; height:3.063rem;}
#gnb .close span{position:absolute; right:1rem; top:calc(50% - 1px); display:block; width:1.648rem; height:1px; background:#fff;}
#gnb .close span:nth-child(1){transform:rotate(45deg);}
#gnb .close span:nth-child(2){transform:rotate(-45deg);}