<div id="hd_wr">
        <div id="logo"><a href="<?php echo G5_SHOP_URL; ?>/"><img src="<?php echo G5_DATA_URL; ?>/common/mobile_logo_img" alt="<?php echo $config['cf_title']; ?> 메인"></a></div>
        <?php include_once(G5_THEME_MSHOP_PATH.'/category.php'); // 분류 ?>

로고이미지와 카테고리 메뉴 사이를 좀 넓히고 싶습니다. 

즉 카테고리 메뉴가 왼쪽으로 정렬되어서  로고이미지쪽으로 쏠림현상이 있는데

카테고리 메뉴를 중앙정렬를 할려고 합니다.  어디를 수정 해야 될지 조언좀 구합니다. 

아래는 카테고리  css입니다.

.menu_wr h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}

 @media (max-width: 969px){
    .menu {display:none;overflow-y:auto;position:fixed;top:0;left:0;height:100%;width:300px;background:#f3f3f3;z-index:99999;text-align:left;
    -webkit-box-shadow:0 2px 15px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 2px 15px rgba(0,0,0,0.2);
    box-shadow: 0 2px 15px rgba(0,0,0,0.2)}

    #btn_user{display:none}
    .btn_login{background:#fff;padding:0 10px}
    .btn_login .btn_ol{line-height:55px;height:55px;border:0;background:none;color:#717989;padding:0 10px;position:relative}
    .btn_login a:before{position:absolute;top:50%;left:0;content:'';background:#e3e3e3;width:1px;height:15px;margin-top:-7px}

    .menu .menu_close {position:absolute;top:0;right:0;width:55px;height:55px;background:none;color:#aaa;font-size:16px;border:0;z-index:199999}
    .menu .menu_close:hover{color:#000}
    .menu_wr{padding:0px 0;background:#fff;margin:5px 0;border-top:1px solid #eee; font-size:17px;font-weight:bold}
    .menu_wr a {display:block;padding: 0 20px;color:#727280}
    .menu_wr li{position:relative;z-index:99999;line-height:45px;}
    .menu_wr li:hover {background:#f3f3f3; }
    .menu_wr li button{position:absolute;top:0;right:0;background:url;border:0;width:45px;height:45px;overflow:hidden;border:0;background:url(../img/mobile/gnb_bg.png) no-repeat 50% 50%;text-indent:-9999px}
    .menu_wr li button.ct_cl{background:url(../img/mobile/gnb_bg2.png) no-repeat 50% 50%}

    .sub_cate{display:none;background:#fff;font-size:15px}
    .sub_cate a{padding-left:30px}
    .sub_cate1{}
    .sub_cate li:hover{position:relative;}
    .sub_cate2 a{padding-left:40px;background-position:31px 17px}
    .sub_cate3 a{padding-left:50px;background-position:41px 17px}
    .sub_cate4 a{padding-left:60px;background-position:51px 17px}
 
 .banner{display:none}
 

 }
  @media (min-width: 970px){

    #btn_cate{display:none}
    .menu{display:block !important}
    .menu:after {display:block;visibility:hidden;clear:both;content:""}
    .menu_wr{float:left; position : relative;}

    .btn_login .btn_ol{width:auto;vertical-align:middle;margin-top:17px}
    .btn_login .btn_ol .txt{color:#717989;display:inline-block;margin-left:5px}
    .btn_login{float:right;line-height:45px;vertical-align:middle}
    .btn_login a{padding:0 10px;display:inline-block;position:relative;color:#717583;}
    .btn_login a:before{position:absolute;top:50%;left:0;content:'';background:#e3e3e3;width:1px;height:15px;margin-top:-7px;vertical-align:middle}
    .btn_login button{background:0;padding:0 10px;border:0;color:#717583;outline:none;height:45px;line-height: 45px;}
    .btn_login img{ width:30px;height:30px;border-radius:50px;margin-right:5px;margin-top:7px;vertical-align:top}
    .menu .menu_close{display:none}
    
   
    
    .menu_wr li{float:left;line-height:90px;font-size:20px;font-weight:500; width : 158px; text-align:center; color:#64646c; font-weight:bold; vertical-align:middle} 
    .menu_wr li button{border:0;width:25px;height:450px;overflow:hidden;border:0;background:url(../img/mobile/btn_menu.png) no-repeat 50% 50%;text-indent:-9999px;opacity:0.5}
    .menu_wr li:hover{font-weight:bold;font-size:25px;text-decoration: underline} 
    
    .sub_cate{display:none}
    .sub_cate a{display:block }

    /* .menu_wr li:hover .sub_cate1{display: block;position:absolute; padding:10px 0 ;  background:#fff;min-width:100px;     -webkit-box-shadow: 0 2px 15px rgba(0,0,0,0.2);    -moz-box-shadow: 0 2px 15px rgba(0,0,0,0.2);    box-shadow: 0 2px 15px rgba(0,0,0,0.2)} */
    .menu_wr:hover .sub_cate1{display: block; padding:10px 0; width : 150px;}
    
    .menu_wr .banner img{position : absolute;  width : 80%px; height : 80%px; display:none; right : -210px; top : 100px;border-radius:30px}
    .menu_wr:hover .banner img {display:block;}
    
    .sub_cate1 li{display:block;font-size:15px;font-weight:300;line-height:40px; padding : 0px; width : 100%;}
    .sub_cate1 li:hover{color:#fff;background:#cdd2d4;border-radius:20px;font-weight:bold;font-size:18px;text-decoration: none;} 
    .sub_cate button{display:none}
    .sub_ct_toggle{display:none;}

 }