/* BASIC css start */
/* 오른쪽퀵버튼 */
#fix_pagescroll {position:fixed;right:-50px;bottom:80px;z-index:99999;  -webkit-transition:all 1s;moz-transition:all 1s;-o-transition:all 1s;transition:all 1s;}
#fix_pagescroll.active {right:10px;bottom:80px;}
.updown > div {margin-top:5px;opacity:1;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s;  transition: all 0.3s;}
.updown > div:hover {opacity:0.8;}
.updown div.r_icon { cursor:pointer; position:relative; width:38px;height:38px; line-height:38px; background-color:#fff; border:1px solid #ddd; border-radius:50%;-webkit-border-radius:50%; -moz-border-radius:50%; text-align:center; box-sizing:border-box;}
.updown div.r_icon i {font-size:14px;color:#999;}
.updown img { width:38px;height:38px; }
.mask {	display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.5; filter:alpha(opacity=50); z-index:990 }






/* 로그인 메뉴 */
.loginBox { clear:both; margin:10px 10px 20px 10px ; padding-bottom:10px; text-align:center; border-bottom:1px solid #666; margin-bottom:10px; }
.loginBox ul { margin-top:15px; }
.loginBox li { clear:both; display:inline-block; height:35px; text-align:center;  padding: 0 2%  }
.loginBox li a { display:block; font-size:11px; color:#fff; letter-spacing:0; line-height:35px;      font-weight: 700;  }



/* ============= 사이드 메뉴 ============= */



/* 기존 #asideMenu 스타일에서 z-index를 수정합니다 */
#asideMenu {
    display: none;
    width: 100%;
    position: fixed; 
    top: 49px;
    left: 0;
    height: calc(100vh - 49px);
    overflow-y: auto;
    background: #fff;
    border-right: 1px solid #606060;
    /* z-index를 검색 레이어(999999)보다 높게 설정합니다 */
    z-index: 1000000 !important; 
    padding-bottom: 50px;
}



/* 카테고리메뉴 */
aside .asideTop { text-align:center; font-size: 0.875em;  overflow:hidden; padding: 0px 0px 10px; margin:0 10px;}
aside .asideTop a:first-child { border-left: 0px solid #eee;}
aside .asideTop a { width:100%; height:35px; line-height: 35px;  font-size:11px;  font-weight:700;  position:relative; font-weight:normal; border-left: 1px solid #666; -webkit-box-sizing:border-box; border-left: 0px; background:#fff; color:#000; display:inline-block; box-sizing: border-box;}
aside .asideTop a .fa {margin-top:10px;}
aside .asideTop a.act { background:#fff; color:#000; font-weight:700; }
aside .asideTop a.act em { position:absolute; left:44%; bottom:-6px; border-top:6px solid #fff; border-left:4px solid transparent; border-right:4px solid transparent;}


aside .list { color: #000;  display: block;  font-size: 1.2em; padding: 9px 4%; font-weight:bold; }
aside .mm1 { border-bottom: 1px solid #e6e6e6; display: block;  position: relative; padding: 9px 4%;  }
aside .mm1 a {  font-size:11px; color:#1E1E1E;  }

aside .navCategory { margin:0 0px; border:0px solid #666;  /* background:rgba(0,0,0,0.7); */ }
aside nav li { border-bottom:1px solid #e6e6e6; position:relative; }
aside nav li a { display: block;  font-size:11px; color:#1E1E1E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight:normal;  padding: 12px 4%; }
aside nav li .fa {position: absolute; top:0; right: 0; width: 40px; text-align: center; height: 35px; line-height:35px; color:#1E1E1E; }
aside nav li > ul { display:none; border-top:1px solid #e6e6e6;}
aside nav li > ul > li {  border-top:1px solid #e6e6e6; background: #f4f4f4; padding: 9px 8%;}
aside nav li > ul > li:first-child {border-top:0px none;}
aside nav li > ul > li a {padding:0; margin: 0;}
aside nav li > ul > li > ul {border-top:0px none; border-top:1px solid #e6e6e6;}
aside nav li > ul > li > ul > li {border-bottom:0px none;}
aside nav li > ul > li > ul > li a {padding:0 0 0 40px; margin: 0; }



.h_layerTitle { height:30px; line-height:30px; padding:0 20px; margin-bottom:0px;  border-bottom:0px solid #333;   }
.h_layerTitle h3 { font-weight:900; color:#fff; }
.h_layerTitle .fa-times {float:right; margin-top: 5px;}




#ww {z-index:100;width:100%;background: rgba(255,255,255,1) }
#ww.headerFix #header { position:fixed;top:0;left:0;right:0;background:rgba(255,255,255,1);z-index:90; }
#ww .hd_bnWrap {position:relative; min-width:100%; background-color:#2c2c2c; }
#ww .hd_bn { width:100%; height:40px; margin:0 auto; position: relative; overflow:hidden; text-align:center; }
#ww .hd_bn a { color:#fff;line-height:40px;letter-spacing:1.8s; }
#ww .hd_bn .btn_bancls {position:absolute; right: 16px; top: 14px;font-size:13px;color:#fff;}

#header {position:relative;z-index:51;width:100%;background:white;-webkit-font-smoothing:antialiased}



#header { /* position:fixed; left:0; top:0; */ border-bottom:0px solid #ddd; z-index:5;  width:100%; text-align:center;  background:rgba(255,255,255,0.95);  } 
#header .header-top { position:relative; width:100%; height:50px; text-align:center;  }
#header .header-top:hover  { background:rgba(255,255,255,0.95);  }

.sub_list_title {  border-top: 1px #ddd solid; border-bottom: 1px #ddd solid; }


#header .header-top h1 a {  display:inline-block; font-family: Montserrat,"Roboto"; font-weight:700; font-size: 20px; height:50px; line-height:50px; color:#222; letter-spacing:1px }
#header .header-top .logo img { width:88px;  margin-top:15px;  } /* 로고이미지로사용시 */



#header .header-top p.category { position:absolute; top:10px; left:10px; }
#header .header-top p.category .line:after { display:block; height:1px;   }
#header .header-top p.category a { display:block; position:relative; width:20px; height:30px;   } 
#header .header-top p.category span { display:block; position:absolute; top:50%; width:100%;  height:1px; background: rgba(0,0,0,1); transform:translate(0,-50%); color:transparent; }
#header .header-top p.category span:before,
#header .header-top p.category span:after { content: ""; position:absolute; left:0; top:0; width:100%; height:1px;  background: rgba(0,0,0,1); }
#header .header-top p.category span:before { top:-6px;   }
#header .header-top p.category span:after { top:6px;  }
#header .header-top p.category i { display:block; font-size: 24px;  color:#000; cursor:pointer   }

#header .header-top p.category.active span { display:block; position:absolute; top:50%; width:100%;  height:0px; background: rgba(0,0,0,1); transform:translate(0,-50%); color:transparent; }
#header .header-top p.category.active span:before,
#header .header-top p.category.active span:after { content: ""; position:absolute; left:0; top:0; width:100%; height:1px;  background: rgba(0,0,0,1);    }
#header .header-top p.category.active span:before { top:-0px;  transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg); }
#header .header-top p.category.active span:after { top:0px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg); }









#header .header-top p.cart { position:absolute; top:15px; right:45px; }
#header .header-top p.cart span {  display:block; position:relative; color:transparent;  } 
#header .header-top p.cart img {width:20px; height:20px;position:relative;}

#header .header-top p.cart a .count { position: absolute; top: 0; left: -6px; font-size: 12px; border-radius: 50%; border: 1px solid black; text-align:center; width: 14px; height: 14px; color: black;  background: white; line-height: 14px; }


/* 검색 */
#header .header-top p.searchToggle { position:absolute; top:14px; right:10px;  }
#header .header-top p.searchToggle span {  width:18px; height:18px; display:block; position:relative; color:transparent; transition:all 0.6s;  } 
#header .header-top p.searchToggle .css-ser:before { content:''; height:12px; display:block; position:absolute; top:0; left:0; width:12px; border:1px #333 solid; border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;}
#header .header-top p.searchToggle .css-ser:after{ content:''; height:8px; display:block; position:absolute; top:0; left:0; width:1px; background:#333; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg); top:10px; left:13px;}




#header .header-top .searchLy { display:none; position:absolute; top:50px; left:0; padding:5px 0;  background:#fff; border:1px solid #000; z-index:100; width:100% ; box-sizing: border-box;}
#header .header-top .searchLy .search { position:relative; text-align:center; }
#header .header-top .searchLy .search input { width:100%; height:30px; border:none; border-radius:5px; outline:none }
#header .header-top .searchLy .search .btn_search { position:absolute; right:0px; top:0px; border:0; border-radius:5px; background:#fff; padding:6px 8px 5px; }
#header .header-top .searchLy .search .btn_search i{width:18px; height:18px; line-height:18px; font-size:15px;  border-radius:20px;text-align:center; background:#eee;}
#header .header-top .searchLy .search .delete_btn { position:absolute; top:0px; right:40px; width:30px; height:24px; font-size:18px; color:#adadad; line-height:24px; z-index:10 } /* 검색어삭제 */
#header .header-top .searchLy .clearTag { height:200px ; }



@media screen and (min-width:768px) {
    #header #menu {width:85px;}
    #header .headerTop {padding-right:85px;}
    #header .search {padding-right:85px;}
    #header .search .searchBox input {width:95%;}
    #header .search .btn_search {width:85px;}
}


.usp-bar { text-transform: uppercase; min-height: 44px; -webkit-font-smoothing: antialiased;   margin-bottom: 5px; display: block; border:0px solid #000; margin-top:0px;  }
.usp-bar ul{ width: 100%;  max-width: 850px; margin: 0 auto;  padding: 0;  overflow: hidden;  clear: both;}
.usp-bar ul li{ width: 100%; text-align:center}
.usp-bar ul li a{ padding: 15px 0px 10px;display: block;font-weight: normal;letter-spacing: 0.15em; color: #949494; font-size:12px;  }


.top-cart {position:absolute;top:14px; left:81%;}



/* 1. 돋보기 레이어: 마스크나 다른 요소보다 무조건 위에 오도록 설정 */
.searchLy {
    display: none;
    position: absolute !important;
    top: 50px !important;
    left: 50% !important; /* 1. 화면 가로 중앙 위치 */
    width: 80% !important; /* 2. 너비를 80%로 설정 */
    transform: translateX(-50%) !important; /* 3. 중앙 정렬 */
    z-index: 999999 !important; /* 최고 층수 */
    background: #fff !important;
    border-bottom: 1px solid #000 !important;
}


/* 1. 헤더(X버튼, 로고, 장바구니 등)를 최상단으로 고정 */
#header {
    z-index: 1000002 !important; /* 가장 높은 점수 부여 */
}

/* 2. 사이드 메뉴(펼침메뉴)의 층수 조정 */
#asideMenu {
    /* 헤더보다는 낮지만 검색창보다는 높게 설정 */
    z-index: 1000001 !important; 
}

/* 3. 검색 레이어의 층수 조정 */
.searchLy {
    /* 메뉴보다 아래에 위치하도록 설정 */
    z-index: 1000000 !important;
}

/* 추가 팁: 상단 배너가 있을 때 X 버튼 위치가 틀어지지 않게 보정 */
.header-top {
    position: relative;
    z-index: 1000003 !important; /* 버튼이 포함된 내부 영역도 확실히 위로 */
}
/* BASIC css end */