/* BASIC css start */
/*====================================================================*/
/******************************* header *******************************/
/*====================================================================*/

header{position:fixed; left:0; top:0; width:100%; height:42px; background:rgba(253,253,255,0.0); z-index:101; -webkit-transition:0.35s ease-in-out; -moz-transition:0.35s ease-in-out; -o-transition:0.35s ease-in-out; transition:0.35s ease-in-out;}

/* 삼선메뉴 */
header #menu{position:absolute; left:0; top:7px; padding:16px; cursor:pointer;}
header #menu a{display:block; position:relative; width:14px; height:10px;}
header #menu a span{display:block; width:100%; height:1px; opacity:1; position:absolute; right:0; background:#333; text-indent:-9999px; z-index:9999;}

/* 위치 */
header #menu a span:nth-child(1){width:100%; top:0px;}
header #menu a span:nth-child(2){width:100%; top:4px;}
header #menu a span:nth-child(3){width:100%; top:8px;}

/* 로고 */
header .logo{text-align:center;}
header .logo a{display:inline-block; font-size:18px; height:42px; line-height:42px;  color:#000; padding:0 30px; font-family: 'Poppins', 'Lato', 'Gothic', Arial; font-weight: 700; }

/* 장바구니 */
header .cart{position:absolute; right:0; top:3px; padding:11px 18px 14px; cursor:pointer;}
header .cart a{display:block; position:relative;}
header .cart a img{width:13px; height:auto;}
header .cart a > span{position:absolute; bottom:-6px; left:-6px; width:10px; height:10px; line-height:10px; text-align:center; background:#a00000; color:#fff; border-radius:50%;}
header .cart a > span strong{display:block; font-weight:300; font-size:10px; transform:scale(0.8); padding-top:1px;}


/* 카테고리박스 */
#one_cate {width:100%; padding-top:56px;}
#one_cate ul{font-size:0; line-height:0; letter-spacing:0; border-bottom:1px solid #f3f3f3; box-sizing:border-box;}
#one_cate ul li{display:inline-block; vertical-align:top; border-top:1px solid #f3f3f3; border-bottom:0; width:33.33%; box-sizing:border-box; position:relative;}
#one_cate ul li:before{content:""; position:absolute; top:11px; left:0px; width:1px; height:12px; background:#f0f0f0;}
#one_cate ul li:nth-child(3n+1):before{background:transparent;}
#one_cate ul li a{display:block; text-align:center; padding:7px 0; font-size:10px; line-height:16px; text-transform:uppercase; letter-spacing:0.3px; color:#8a7c7c}


/* 확장 */
html.expand body{position:fixed; top:0; left:0; width:100%;}
html.expand #container{}
html.expand #btnFoldLayout{}
html.expand aside{overflow-x:hidden;visibility:visible;opacity:1;left:0;top:0;}
#mask{opacity:0;visibility:hidden;position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); z-index:9999;}
html.expand #mask {opacity:0.35;visibility:visible;}

/* 트랜지션 */

html.expand aside,
html aside,
#mask,
html.expand #mask{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;transition-delay:.13s}


/* 메뉴 */
.mask{display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); z-index: 102;}
#all_menu{ position: fixed; top: 0; left: -100%; width: 84%; height: 100%; z-index: 1001; background: #fff; overflow-y: auto;}
#all_menu .in_logo{ position: relative; padding: 35px 25px 9px; }
#all_menu .in_logo a{display:block}
#all_menu .in_logo a p{font-size:18px;color:#222;font-weight: 700;font-family: 'Poppins', 'Lato', 'Gothic', Arial;}
#all_menu .in_logo a img{ width: 220px;}
#all_menu .closeArea{ position: absolute; top: 70%; transform: translateY(-50%); right: 18px;}
#all_menu .closeArea img{ width: 18px;}
#all_menu .all_menu_join{}

/* 햄버거메뉴 안 분류 */
.headerGnb{ border-top: 1px solid #000;}
.headerGnb .gnbInner .menu-list > li{line-height: 48px;letter-spacing: 1px;position: relative;-webkit-tap-highlight-color: rgba(0,0,0,0);border-bottom: 1px solid #d9d9d9;}
.manuinba{position: absolute; bottom: 140px;  left: 120px;}
.menu_list_in a, .menu-container .menu-list li.toggle > a{padding: 0 20px;color: #000;font-size: .8rem;position: relative;top: 1px;}
.toggle, .menu-submenu { cursor: pointer; font-size: 14px; position: relative; letter-spacing: 1px;}
.menu-submenu { display: none; padding: 0 0 10px; }
.menu-submenu >li a{display: block; padding: 12px 26px; color: #808080;  font-size: .8rem; line-height: 17px;}
.menu-submenu .depth3{ display: none; padding: 5px 40px;}
.menu-submenu .depth3 li a{padding: 5px 0;}

/* 햄버거메뉴 안 분류 더보기 */
.ddBtn {position: absolute; top: 15px; right: 12px; padding:9px 20px;}
.ddBtn:before{ -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 1; z-index: 2;}
.ddBtn:before, .ddBtn:after {content: ''; display: block; position: absolute; top: 50%; right: 12px; width: 10px; height: 1px; margin-top: -1px; background-color: #808080; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: all 0.3s; transition: all 0.3s ease-out;}
.ddBtnActive {padding:15px 20px;}
.ddBtnActive:before{ -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); background: #cccccc !important;}
.ddBtnActive:after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); background: #cccccc !important; opacity: 0;}

/* 아이콘 */
#all_menu .nalog{padding: 25px 10px;/* display:none; */}
#all_menu .nalog ul{ font-size: 0;}
#all_menu .nalog ul li{ display: inline-block; width: 20%; text-align: center;}
#all_menu .nalog ul li a{font-size: 13px; color: #4c4c4c;  font-weight: bold; text-transform: lowercase;}
#all_menu .nalog ul li a i {
    display: block;
    margin: 0 auto 5px;
    font-size: 22px;
}
#all_menu .snsBox{ padding: 25px 20px; background: #f0f0f0;}
#all_menu .snsBox a{ margin: 0 20px 0 0; color: #4c4c4c; font-weight: bold;}
/* //카테고리 */

/*햄버거메뉴 검색*/
.searchArea{padding: 15px 25px 20px;}

.searchArea .search{position: relative;}
.searchArea input.MS_search_word{
    width: 100%;
    height: 40px;
    border-radius: 0 !important;
    border: 0;
    border-bottom: 1px solid #000;
    font-size: 13px;
    color: #000000; 
    background: #fff;
    }
    
.searchArea a{
    position: absolute;
    right: 5px;
    bottom: 9px;}

.searchArea a img{    width: 18px;}


/* BASIC css end */