body { height:auto; }

#BrandTop10ProductList .listview { padding:0; }
#BrandTop10ProductList .listview .ly-top-num { background-color: #000; position: absolute; top: 0; color: #fff; padding: 2px 7px; text-transform: uppercase;}
.wrap-sort .all , .wrap-sort .sort, .wrap-sort .search {border: 1px solid #e8e8e8; border-right: transparent; background-color: #f5f5f5;}


.wrap_filter{position: relative;height: 10.222vw; padding: 0 4vw; padding: 0 4vw;}
.wrap_filter .search:after {background:url("/images/ico/ico_arrow_r3.png")no-repeat center; background-size:12px auto; content:''; display:block; position:absolute; right:2.4vw; top:50%; transform:translateY(-50%);}
.wrap_filter .sort:after{background: url("/images/ico/ico_arrow_d4.png")no-repeat center; background-size: 8px auto; content:''; display:block; position:absolute; right:18vw; top:50%; transform:translateY(-50%);}
.wrap_filter>div:after{  width:23px; height:22px; }
.wrap_filter>div>button{text-align: left; font-size: 13px; font-weight: 700; vertical-align: middle; line-height: 10.2vw;}
.wrap_filter .all:after {background:url("/images/ico/ico_arrow_d4.png")no-repeat center; background-size:8px auto; content:''; display:block; position:absolute; right:39vw; top:50%; transform:translateY(-50%);}
.wrap_filter .all>button{margin-right: 9vw;}


#smartsearchPop .full {width: 82%; top: 0; right:0; left: auto;}
.area-pop .tit-pop{position: absolute; width: 100%; height: 58px; z-index: 99; border-bottom:1px solid #282828; }
.area-pop .tit-pop .tit{text-align: left; font-weight: 700; margin : 0 22px; font-size: 17px; line-height: 58px; border-bottom: 0;}
.area-pop .full .btns {height: 45px; bottom: 0; position: absolute; width: 100%; left: 0;}
/*아코디언메뉴*/
.area-pop .container-pop .contents {padding: 0; margin-bottom: 0;}
.smart-search .area-pop #CategoryList .cate-tit-pop {
    position: relative;
    width: 100%;
    height: 54px;
    z-index: 99;
}

.smart-search .area-pop #CategoryList .cate-tit-pop .tit {
    height: 54px;
    line-height: 54px;
    background-color: #fff;
    padding: 0 26px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    text-align: left !important;
}

.smart-search .area-pop .btn-hide-pop {
    top: 50%;
    right: 20px;
    width: 15px;
    height: 15px;
    transform: translateY(-50%);
}

.smart-search .category-tab_con1 .category1-list>ul>li>a {
    display: block;
    border-bottom: 1px solid #F0F0F0;
}

.smart-search .category-tab_con1 .f_accordion a {
    font-weight: 650;
    font-size: 14px;
    padding: 0 20px;
    line-height: 50px;
    width: 100%;
}
 
.smart-search .category-tab_con1 .f_accordion .spread .brandList_all a:before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    position: absolute;
    right: 20px;
    top: 50%;
    border: 1px solid #4f4f4f;
    border-color: #4f4f4f #4f4f4f transparent transparent;
    transform: translateX(-10px) translateY(-50%) rotate(230deg);
} 
.smart-search .category-tab_con1 .f_accordion .spread a:before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    position: absolute;
    right: 20px;
    top: 26px;
    border: 1px solid #282828;
    border-color: #282828 #282828 transparent transparent;
    transform: translateY(-7px) rotate(135deg);
} 

.smart-search .category-tab_con1 .f_accordion>li.active>a {font-weight: 700;color: #282828;}

.smart-search .category-tab-btn li.active a {
    color: #d8231e;
    font-weight: 700;
}

.smart-search .category-menu {
    width: 100%;
    position: relative;
    height: auto;
    padding: 0 24px;
    display: flex;
    padding-bottom: 8%;
}

.smart-search .category-menu ul>li {
    width: 50%;
    float: left;
    display: block;
    padding: 1%;
}

.smart-search .category-tab_con1 .category1-list>ul {
    padding-bottom: 35px;
    padding-top: 0px !important;
}

.smart-search .category-fbtn {
    width: 100%;
    padding: 0 26px;
    position: relative;
    padding-bottom: 10%;
}

.smart-search .category-fbtn ul {
    justify-content: end;
    width: 100%;
    display: inline-flex;
}

.smart-search .category-fbtn li {
    position: relative;
    line-height: 18px;
    font-size: 13px;
    color: #282828;
    font-weight: 600;
    display: inline;
    text-decoration: none;
    padding-left: 12px;
    margin-left: 8px;
}

.smart-search .category-fbtn li:before {
    position: absolute;
    top: 3px;
    left: 0;
    content: "";
    display: block;
    width: 1px;
    height: 10px;
    background: #DBDBDB;
}

.smart-search .category-fbtn li:first-child {
    margin-left: 0;
    padding-left: 0;
    display: contents;
}

.smart-search  .area-pop #Category1Cont {
    height: calc(100%) !important;
}

.smart-search .area-pop #CategoryList .container-pop .cate-contents {
    height: 100%;
}

.smart-search .category-tab_con1 {
    height: auto !important;
}


.smart-search .f_accordion {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

  .smart-search .f_accordion ul {
        margin: 0;
        width: 100%;
        max-height: 66vw;
        overflow-y: auto;
    }

.smart-search .f_accordion li {
    position: relative;
    cursor: pointer;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/*.f_accordion li.active > a { background: url('/data/201012/IJ12931425972804/minus.gif') no-repeat 10px 10px; }*/
.f_accordion ul li ul {
    padding-left: 5%;
}

/*.f_accordion li div { width: 100%;}*/

.smart-search  .f_accordion a {
    font-size: 15px;
    padding: 0 20px;
    line-height: 40px;
    display: block;
    width: 100%;
}

.smart-search  .f_accordion>li.active>a,
.smart-search .f_accordion>li>ul>li.active>a {
    color: #d8231e;
}

.smart-search  .f_accordion .spread a:before,
.smart-search  .f_accordion .spread>ul>li a:before {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    position: absolute;
    right: 20px;
    top: 25px;
    border: 1px solid #8e8e8e;
    border-color: #8e8e8e #8e8e8e transparent transparent;
    -webkit-transform: translateY(-7px) rotate(135deg);
    -ms-transform: translateY(-7px) rotate(135deg);
    transform: translateY(-7px) rotate(135deg);
}
.smart-search .f_accordion .spread.active>a:before,
.smart-search .f_accordion .spread>ul>li.active>a:before {
    -webkit-transform: translateY(-1px) rotate(-45deg);
    -ms-transform: translateY(-1px) rotate(-45deg);
    transform: translateY(-1px) rotate(-45deg);
}

.smart-search .f_accordion>li>ul>li:first-child a:before {
    display: none;
}

.smart-search .f_accordion>li>ul>li>ul>li a:before {
    display: none;
}*/

.smart-search  .f_accordion li ul li a {
    font-size: 14px;
}

.smart-search  .f_accordion li ul li ul li a {
    padding-left: 30px;
    line-height: 40px;
}

.smart-search  .category-tab_con1 .category1-list {
    width: 100%;
    background-color: #fff;
}
.smart-search .f_accordion .spread .filter_title_num {display: inline; float: right; margin-right: 6vw; line-height: 50px; color:#d8231e; font-weight:700; font-size:12px; }

/*브랜드검색*/
.smart-search .brandSearch{position: relative; padding:16px 20px 0 20px; float:none;   }
.smart-search .brandSearch .brandSearch__input{width: 66%; height: 10.4445vw; padding:0 20.66667vw 0 5.33333vw; border:0; border-radius:5.33333vw; background:#F0F0F0; font-size:14px;  color:#000; outline:0; vertical-align:middle; line-height:1.15; }
.smart-search .brandSearch .brandSearch_btn{position: absolute; z-index: 3; top: 66%; right: 7vw; width:32px; height:24px; background: url(/Upload/shoemarker/sample/BOGI_grey.png) no-repeat center; transform:translateY(-50%); background-size: 18px auto;}
.brandSearch .out{font-size: 0;}
.smart-search .brandList {overflow-y: auto; max-height: 66vw; padding: 0 20px;}
.smart-search .brandList_all {position: relative; height: 12vw; border-bottom:0.26667vw solid #F0F0F0; line-height:11.7333vw; /*padding:0 20px 0 20px;*/ float:none; }
.smart-search .brandList_all a{position: relative; display: inline-block; padding-left: 3.7333vw; font-size: 12px; color: #666; letter-spacing: -0.05em; text-decoration: none; background-color: transparent;}
.smart-search .brandList_all a:before{content: ''; display: block; top: calc(50% - 2px); left: 12px; width: 2vw; height: 2vw; border-top:0.26667vw solid #666; border-left:0.26667vw solid #666; transform:rotate(-45deg) translate3d(0px, -50%, 0px); box-sizing:border-box; }
.smart-search .list{padding: 3.7333vw 0 4vw; border-top: 1px solid #f0f0f0; display: flex;}
.smart-search .list:first-child{border-top: 0;}
.smart-search .list_checkbox{display: inline-flex; position: relative; min-width: 5.333vw; min-height: 5.333vw; /*margin-left: 26px;*/}
.smart-search .list_checkbox .name_txt{margin-left: 1.2vw; display: flex; line-height: 24px;}
.smart-search .list_checkbox .name_txt .eng{padding: 0 8px 0 0; font-weight: 700;}
.smart-search .list_checkbox .name_txt .kor{content: #777;}


/* checkbox settings  */
.b-checkbox {
  --primary-color: #d8231e;
  --secondary-color: #fff;
  --primary-hover-color: #d8231e;
  /* checkbox */
  --checkbox-diameter: 20px;
  --checkbox-border-radius: 5px;
  --checkbox-border-color: #d9d9d9;
  --checkbox-border-width: 1px;
  --checkbox-border-style: solid;
  /* checkmark */
  --checkmark-size: 1.2;
}

.b-checkbox, 
.b-checkbox *, 
.b-checkbox *::before, 
.b-checkbox *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.b-checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: var(--checkbox-diameter);
  height: var(--checkbox-diameter);
  border-radius: var(--checkbox-border-radius);
  background: var(--secondary-color);
  border: var(--checkbox-border-width) var(--checkbox-border-style) var(--checkbox-border-color);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
}

.b-checkbox::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
  box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
  border-radius: inherit;
  opacity: 0;
  -webkit-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
  -o-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
  transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
}

.b-checkbox::before {
  top: 40%;
  left: 50%;
  content: "";
  position: absolute;
  width: 4px;
  height: 7px;
  border-right: 2px solid var(--secondary-color);
  border-bottom: 2px solid var(--secondary-color);
  -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0);
  -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  opacity: 0;
  -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
  -o-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
  transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
}

/* actions */

.b-checkbox:hover {
  border-color: var(--primary-color);
}

.b-checkbox:checked {
  background: var(--primary-color);
  border-color: transparent;
}

.b-checkbox:checked::before {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  -ms-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  -o-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
}

.b-checkbox:active:not(:checked)::after {
  -webkit-transition: none;
  -o-transition: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  transition: none;
  opacity: 1;
}
/*사이즈 옵션*/
.size-option{display: flex; flex-wrap: wrap; gap:2.2vw; list-style: none; padding:20px; margin:0; overflow: hidden;}
.filter-option{width:calc(24.2% - 1.1vw); float: left; line-height: 2.6;}
.filter-option1{width: calc(32.8% - 1.1vw);float: left;line-height: 2.6;}
.chk-line{display: block;}
.size-label {display: flex; align-items: center; justify-content: center; border: 1px solid #ddd; cursor: pointer;}
.size-checkbox {display: none;}
.size-checkbox:checked + .size-label {color: red; border-color: red;}

/*가격범위*/
.price-filter {padding: 20px;width: 100%;}

.price-range-container {
  position: relative;
  width: 100%;
  height: 50px;
}

.slider-track {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  height: 4px;
  background: #e0e0e0;
  border-radius: 2px;
}

.range-input {
  position: absolute;
  top: 2vw;
  left: 0;
  width: 100%;
  -webkit-appearance: none;
  pointer-events: none;
  background: none;
  z-index: 1;
}

/* Range Track 스타일링 */
.range-input::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  background: none;
  border-radius: 2px;
}

.range-input::-moz-range-track {
  width: 100%;
  height: 4px;
  background: none;
  border-radius: 2px;
}

/* Range Thumb (컨트롤러) 스타일링 */
.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border: 2px solid #d8231e;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -8px;
  pointer-events: auto;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.range-input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #ffffff;
  border: 2px solid #d8231e;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 가격 라벨 컨테이너 스타일링 */
.price-label-container {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.price-label {
  background: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
  color: #666;
  text-align: center; font-weight: 700;
}

/* 선택된 영역 표시 */
.selected-range {
  position: absolute;
  top: 8px;
  height: 4px;
  background: #d8231e;
  border-radius: 2px;
}

/*색상 라벨*/
.color-filter {padding: 20px; display: flex; flex-wrap: wrap; gap:3.8vw; justify-content: flex-start;}

.color-option {
  position: relative;
  width: 40px;
  height: 40px;
}

.color-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.color-label {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #ddd;
  cursor: pointer;
  position: relative;
}

/* 체크 아이콘 스타일 */
.color-label::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ebebeb;
  font-size: 1.6em;
  opacity: 0;
}

/* 체크박스가 선택되었을 때 스타일 */
.color-option input[type="checkbox"]:checked + .color-label {
  border : 1px solid #d8231e;
}

.color-option input[type="checkbox"]:checked + .color-label::after {
  opacity: 1;
}

/* 각 색상별 배경색 지정 */
.color-black { background-color: #000; }
.color-white { background-color: #fff; }
.color-yellow { background-color: #FFD700; }
.color-red { background-color: #FF0000; }
.color-beige { background-color: #F5F5DC; }
.color-grey { background-color: #808080; }
.color-blue { background-color: #0000FF; }
.color-green { background-color: #008000; }
.color-brown { background-color: #8B4513; }
.color-navy { background-color: #000080; }
.color-pink { background-color: #FFC0CB; }
.color-purple { background-color: #800080; }
.color-rainbow { 
  background: linear-gradient(to right, 
    red, orange, yellow, green, blue, indigo, violet
  );
}

/* 밝은 색상의 체크 아이콘은 어둡게 표시 */
.color-white + .color-label::after,
.color-yellow + .color-label::after,
.color-beige + .color-label::after,
.color-pink + .color-label::after {
  color: #333;
}

.area-dim{position: fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:99; }
/*기타메뉴*/
.container-pop .pop-etc .etc-menu {display: inline-block; width:50%; float:left; font-size:0; }