﻿


/*───────────────────────────────────────────────────────────

	 HEADER

───────────────────────────────────────────────────────────*/

#header {}
#header header { width:100%; min-width:320px; background:#FFFFFF; z-index:300;}
#header header.h_on {position:fixed; top:0; left:0;}
#header header .header_box {border-bottom:none;}
#header header .header_box .h_logo {width:110px; padding:15px 0 15px 0; margin:0 auto; line-height:0; text-align:center;}
#header header .header_box .h_logo a {font-size:0; line-height:0; }
#header header .header_box .h_logo img {width:100%;}
#header header .header_box .left_menu {position:absolute; top:0; left:5px; display:table;}
#header header .header_box .left_menu li {display:table-cell; vertical-align:top;}
#header header .header_box .right_menu {position:absolute; top:0; right:5px; display:table;}
#header header .header_box .right_menu li {position:relative; display:table-cell; vertical-align:top;}

/* 좌측 메뉴 */
/*#header header .header_box .side_menu {display:inline-block; padding:16px 7px 15px 7px; vertical-align:top;}
#header header .header_box .side_menu span {display:inline-block; width:20px; height:15px; font-size:0; background:url('../img/icon/icon_menu.png') no-repeat center; background-size:100%; vertical-align:top;}*/
/*좌측 메뉴 */
#header .btn_togglearea { display:inline-block; position:absolute; left:0; top:0;  width:60px; height:60px; cursor: pointer; z-index:1; }
#header .btn_togglearea{ }

#header #btn_toggle{ display:block; position:relative; width:30px; margin:0; padding:22.5px 15px; cursor: pointer; vertical-align:middle;}
#header #btn_toggle span { display:block; width: 100%; height: 1px; line-height:0; background: #000000; 
										-webkit-transition: all .8s ease; -moz-transition: all .8s ease; -o-transition: all .8s ease; transition: all .8s ease; }
#header #btn_toggle span.a{width: 20px; }
#header #btn_toggle span.b{width: 20px; }
#header #btn_toggle span.c{width: 20px; }
#header #btn_toggle .b { margin: 6px 0; }

#header #btn_toggle:hover span{}
#header #btn_toggle:hover .a {	-webkit-transform:translateX(5px); -moz-transform:translateX(5px); -o-transform:translateX(5px); -ms-transform:translateX(5px); transform:translateX(5px); }
#header #btn_toggle:hover .b { -webkit-transform:translateX(-5px); -moz-transform:translateX(-5px); -o-transform:translateX(-5px); -ms-transform:translateX(-5px); transform:translateX(-5px); }
#header #btn_toggle:hover .c { -webkit-transform:translateX(5px); -moz-transform:translateX(5px); -o-transform:translateX(5px); -ms-transform:translateX(5px); transform:translateX(5px);  }
/*좌측 메뉴 */


/* 검색 */
#header header .header_box .top_search {display:inline-block; padding:15px 7px 15px 7px; margin-left:5px; vertical-align:top; background:none; border:none;}
#header header .header_box .top_search span {display:inline-block; width:25px; height:25px;  font-size:0; background:url(../../_msc/images/common/ibtn_search.png) no-repeat center; background-size:100%; vertical-align:top;}
/* 마이페이지 */
#header header .header_box .mypage {display:inline-block;  padding:14px 7px 14px 7px;}
#header header .header_box .mypage span {display:inline-block; width:20px; height:21px; font-size:0; background:url('../img/icon/icon_mypage.png') no-repeat center; background-size:100%; vertical-align:top;}
/* 장바구니 */
#header header .header_box .cart {display:inline-block;  padding:15px 7px 14px 7px;}
#header header .header_box .cart span {display:inline-block; width:23px; height:25px;  font-size:0; background:url('../../_msc/images/common/ibtn_shopbag.png') no-repeat center; background-size:100%; vertical-align:top;}
#header header .header_box .cart_count {position:absolute; top:8px; right:-4px; display:block; padding:3px 6px 1px 6px; line-height:15px; border-radius:100%; color:#fff; background:#222222;  vertical-align:middle; font-size:12px;}

<!--{ ? gCurrentPageName == 'main/index' }-->
#header .headerbg { display:none; position:fixed; width:100%; height:60px; background:#000000; text-align:center; z-index:1; }
<!--{ / }-->
#header .gnb { display:block; position:relative; width:100%; height:60px; background:#FFFFFF;  text-align:center; z-index:2;  }
#header .gnb .inner_wrap{display:block; width:100%; height:60px; background:#FFFFFF; text-align:center; z-index:2; }
#header .gnb .inner_wrap.headerfixed { position:fixed !important; top:0; background:#FFFFFF; z-index:2; }


#navi { display: block; position:relative; width: 100%; text-align: center; z-index:0; }
#navi:after, #navi li:after, #navi li a:after {content:''; display:block; clear:both;}

#navi ul.category_side { display:block; position:relative; float:left; width:100%; padding-top:1px; text-align:center; background:#080059; overflow:hidden; display:none; }
#navi ul.category_side li { display: inline-block; float: left; position:relative; width: 33.33%; padding: 0; margin: -1px -1px 0 0;  border: 1px solid #FFFFFF;  border-left-width:0;   border-top-width:0;}
#navi ul.category_side > li a.go{ display:block !important; position:absolute; left:0; right:0; top:0; bottom:0; z-index:1;}
#navi ul.category_side li a { display:block; height: 35px; line-height: 35px; padding:0; color: #fff; font-size:0.8em; font-weight:normal; white-space:nowrap;  margin:0 0px;}
#navi ul.category_side li button.gnb-arr{display:block; position:absolute; left:0; top:0; width:100%; height:100%;}
#navi ul.category_side li button.gnb-arr span.icon-arr-b-white{display:none; width:100%; height:100%; padding:0;}

#navi ul.category_side li a .sprite-ico{display:none; width:100%; height:100%; padding:0;}
#navi ul.category_side li a span.icon_plus{display:none !important;}
#navi ul.category_side li ul{ display:none !important;}


