@charset "utf-8";
#quickMenu{display: none;}

.search_component{}
.search_component .component_inner{width: 100%;max-width: 1128px;margin: 0 auto;padding: 0 24px;}


.search_wrap{}
.search_wrap .srh_wrap_hd{display: none;}
.search_wrap .srh_wrap_bd{}

.search_wrap .srh_list_box{}

.search_wrap .srh_list_hd{}
.search_wrap .srh_inp_box{width: 100%;margin: 24px 0;position: relative;}
.search_wrap .srh_inp_box .srh_inp{width: 100%;height: 48px;padding: 0 16px 0 42px;font-size: 16px;font-weight: 400;line-height: 20px;color: #333;letter-spacing: -0.54px;border: 0;border-bottom: 2px solid var(--color-blue-main);}
.search_wrap .srh_inp_box .srh_btns_box{background-color: transparent;border: 0;line-height: 0;position: absolute;top: 50%;left: 10px;transform: translateY(-50%);}
.search_wrap .srh_inp_box .btns_srh_submit{display: inline-block;width: 24px;height: 24px;line-height: 0;pointer-events: none;}
.search_wrap .srh_inp_box .btns_srh_submit .icon_srh_btn svg{width: 100%;height: 100%;pointer-events: none;}
.search_wrap .srh_inp_box .btns_srh_submit .icon_srh_btn svg path{fill: var(--color-blue-main);}

.search_wrap .srh_tit_box{padding: 48px 0 32px;}
.search_wrap .srh_tit_box .srh_tit{font-size: var(--fs-28);font-weight: 500;line-height: var(--lh-36);color: var(--color-black);text-align: center;}
.search_wrap .srh_tit_box .srh_tit .srh_keyword{display: inline-block;font-size: var(--fs-28);font-weight: 500;line-height: var(--lh-36);color: var(--color-blue-main);text-align: center;}

.search_wrap .srh_list_bd{}
.search_wrap .srh_list_hd + .srh_list_bd{margin-top: 32px;}

.search_wrap .srh_sort_box{width: 100%;padding: 16px 0;display: flex;align-items: center;justify-content: space-between;flex-wrap: nowrap;column-gap: 16px;}
#sortCount{flex: 0 0 auto;}
#sortCount .srh_result{display: block;font-size: var(--fs-16);font-weight: 500;line-height: var(--lh-24);color: var(--color-black);}
#sortCount .srh_result .srh_keyword{display: inline-block;font-size: var(--fs-16);font-weight: 500;line-height: var(--lh-24);color: var(--color-blue-main);}
#sortCount .srh_count{display: inline-block;font-size: var(--fs-16);font-weight: 500;line-height: var(--lh-24);color: var(--color-black);}

.search_wrap .sort_list_wrap{flex: 0 0 auto;}
.search_wrap .sort_list_wrap .sort_toggle_button{display: none;}
#sortList{display: flex;align-items: center;justify-content: flex-end;flex-wrap: nowrap;column-gap: 14px;}
#sortList .sort_item{}
#sortList .sort_item + .sort_item{padding-left: 7px;position: relative;}
#sortList .sort_item + .sort_item::before{content: '';display: block;width: 1px;height: 14px;background-color: var(--color-gray7);position: absolute;left: -4px;top: 50%;transform: translateY(-50%);}
#sortList .sort_item .sort_link{display: inline-flex;align-items: center;flex-wrap: nowrap;column-gap: 2px;}
#sortList .sort_item .sort_name{display: inline-block;font-size: var(--fs-14);font-weight: 400;line-height: var(--lh-24);color: var(--color-gray7);letter-spacing: -0.03em;transition: color .2s;}
#sortList .sort_item:hover .sort_name{color: var(--color-black);}
#sortList .sort_item.active .sort_name{color: var(--color-black);}
#sortList .sort_item .tooltip_box{display: inline-block;line-height: 0;position: relative;}
#sortList .sort_item .tooltip_box .icon_tooltip_question{display: inline-block;width: 14px;height: 20px;}
#sortList .sort_item .tooltip_box .icon_tooltip_question svg{width: 100%;height: 100%;pointer-events: none;}
#sortList .sort_item .tooltip_box .tooltip_desc{display: none;position: absolute;left: 0;top: 100%;z-index: 10;min-width: 272px;padding: 8px;background-color: var(--color-white);border: 1px solid var(--color-black);border-radius: 4px;font-size: var(--fs-12);font-weight: 400;line-height: var(--lh-18);color: var(--color-gray5);letter-spacing: -0.02em;word-break: keep-all;}
#sortList .sort_item .tooltip_box:hover .tooltip_desc{display: block;}



.prd_list_box{margin-top: 32px;}
#prdList{display: flex;align-items: stretch;flex-wrap: wrap;column-gap: 24px;row-gap: 32px;}
/* #prdList.sct_40{display: flex;align-items: stretch;flex-wrap: wrap;column-gap: 0;row-gap: 32px;flex-direction: column;} */
#prdList .prd_item{width: calc(25% - (72px/4));background-color: var(--color-white);}
#prdList .prd_item .item_inner{height: 100%;}
#prdList .prd_item .item_thumb_box{width: 100%;height: 0;padding-top: 100%;background-color: var(--color-white);position: relative;overflow: hidden;}
#prdList .prd_item .item_thumb_box .item_thumb{width: 100%;height: 100%;position: absolute;left: 0;top: 0;right: 0;bottom: 0;z-index: 1;}
#prdList .prd_item .item_thumb_box .item_thumb img{width: 100%;height: 100%;object-fit: cover;object-position: center;transition: 0.3s ease-in-out;padding:14px}

#prdList .prd_item .item_thumb_box:hover .item_thumb img{transform: scale(1.02);}

#prdList .prd_item .item_thumb_box .btn_wish{position: absolute;top: 10px;right: 10px;z-index: 2;cursor: pointer;line-height: 0;}
#prdList .prd_item .item_thumb_box .btn_wish .icon_wish_heart{display: inline-block;width: 24px;height: 24px;background-image: url('../img/icon/icon_wish_heart.svg');background-repeat: no-repeat;background-size: cover;background-position: center center;pointer-events: none;}
#prdList .prd_item .item_thumb_box .btn_wish.wished .icon_wish_heart{background-image: url('../img/icon/icon_wish_heart_fill.svg');}

#prdList .prd_item .item_thumb_box .item_soldout{width: 100%;height: 100%;position: absolute;left: 0;top: 0;right: 0;bottom: 0;z-index: 3;display: flex;align-items: center;justify-content: center;background-color: rgba(0, 0, 0, .45);}
#prdList .prd_item .item_thumb_box .item_soldout .soldout_txt{display: inline-block;font-size: var(--fs-18);font-weight: 700;line-height: var(--lh-24);color: var(--color-white);}
/* #prdList .prd_item .item_thumb_box .btn_wish .icon_wish_heart svg{width: 100%;height: 100%;pointer-events: none;} */

#prdList .prd_item .item_info_box{}
#prdList .prd_item .item_thumb_box + .item_info_box{margin-top: 16px;}
#prdList .prd_item .item_cate_box{display: flex;align-items: flex-start;justify-content: space-between;column-gap: 8px;flex-wrap: nowrap;line-height: 0;}
#prdList .prd_item .item_cate_box .item_cate{flex: 1;font-size: var(--fs-12);font-weight: 500;line-height: var(--lh-20);color: var(--color-gray1);letter-spacing: -0.02em;}

#prdList .prd_item .item_cate_box .btn_wish{flex: 0 0 auto;cursor: pointer;line-height: 0;}
#prdList .prd_item .item_cate_box .btn_wish .icon_wish_heart{display: inline-block;width: 20px;height: 20px;background-image: url('../img/icon/icon_wish_heart.svg');background-repeat: no-repeat;background-size: cover;background-position: center center;pointer-events: none;}
#prdList .prd_item .item_cate_box .btn_wish.wished .icon_wish_heart{background-image: url('../img/icon/icon_wish_heart_fill.svg');}

#prdList .prd_item .item_subject_box{line-height: 0;}
#prdList .prd_item .item_cate_box + .item_subject_box{margin-top: 8px;}
#prdList .prd_item .item_cate_box .prod_tag{display: inline-block;padding: 2px 6px;border-radius: 4px;font-size: var(--fs-12);font-weight: 500;line-height: var(--lh-16)}
#prdList .prd_item .item_cate_box .prod_tag.direct{background-color:#f4f4f4;color:#5f0080;}
#prdList .prd_item .item_cate_box .prod_tag.domestic{background-color:#f4f4f4;color:var(--color-blue-main);}

#prdList .prd_item .item_btns_box + .item_cate_box{}
#prdList .prd_item .item_btns_box + .cart-layer + .item_cate_box{margin-top:6px}

#prdList .prd_item .item_subject_box .item_subject{display: inilne-block;font-size: var(--fs-16);font-weight: 400;line-height: var(--lh-20);color: var(--color-black);letter-spacing: -0.01em;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-break: keep-all;overflow: hidden;white-space: normal;text-overflow: ellipsis;}

#prdList .prd_item .item_price_box{display:flex;align-items:flex-start;flex-wrap:nowrap;column-gap:4px;flex-direction:column}
#prdList .prd_item .item_price_box .price_box{display:flex;align-items: center;gap:6px}

#prdList .prd_item .item_subject_box + .item_price_box{margin-top: 6px;}
#prdList .prd_item .item_price_box .item_price{font-size: var(--fs-16);font-weight: 600;line-height: var(--lh-20);color: var(--color-black);letter-spacing: 0.02em;letter-spacing: -0.8px;}
#prdList .prd_item .item_price_box .item_cust_price{font-size: var(--fs-16);font-weight: 400;line-height: var(--lh-20);color: var(--color-gray1);letter-spacing: 0.02em;text-decoration: line-through;}
#prdList .prd_item .item_price_box .item_sale_per{font-size: var(--fs-16);font-weight: 600;line-height: var(--lh-20);color: var(--color-orange-main);letter-spacing: 0.02em;}

#prdList .prd_item .review_count{margin-top: 8px;display: flex;/* align-items: center; */gap:4px;color:#777}
#prdList .prd_item .icon_box.icon_review svg path{fill: var(--color-black);transition: fill .25s;}
#prdList .prd_item .icon_box.icon_review{}
#prdList .prd_item .icon_box.icon_review svg{width: 16px;height: 16px;}
#prdList .prd_item .icon_box.icon_review svg path{stroke: #898989;fill: unset;transition: stroke .25s;}

#prdList .prd_item .item_btns_box{}
#prdList .prd_item .item_info_box + .item_btns_box{margin-top: 12px;}
#prdList .prd_item .item_btns_box .item_btns{display: flex;align-items: center;justify-content: center;width: 100%;height: 36px;background-color: var(--color-white);border-radius: 4px;box-sizing: border-box;}
#prdList .prd_item .item_btns_box .item_btns .btns_name{display: inline-block;font-size: var(--fs-14);font-weight: 400;line-height: var(--lh-20);color: var(--color-black);letter-spacing: 0.02em;display: flex;gap: 4px;align-items: center;}
#prdList .prd_item .item_btns_box .item_btns .btns_name .icon_cart{display: inline-block;width: 20px;height: 20px;pointer-events: none;}
#prdList .prd_item .item_btns_box .item_btns .btns_name .icon_cart svg{width: 100%;height: 100%;}
#prdList .prd_item .item_btns_box .btns_cart{}
#prdList .prd_item .item_btns_box .btns_cart .btns_name{}

#prdList .prd_item .cart-layer{display: none !important;}

.gradient,
.rainbow{position:relative;z-index:0;border-radius:8px;overflow:hidden}
.rainbow::before{content:'';position:absolute;z-index:-2;left:50%;top:50%;width:640px;height:640px;background-color:#399953;background-repeat:no-repeat;background-size:50% 50%,50% 50%;background-position:0 0,100% 0,100% 100%,0 100%;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);margin-left:-320px;margin-top:-320px;transition:.3s}
.rainbow::after{content:'';position:absolute;z-index:-1;left:1px;top:1px;width:calc(100% - 2px);height:calc(100% - 2px);background:#fff;border-radius:3px;animation:opacityChange 3s infinite alternate}
.gradient::before{content:'';position:absolute;z-index:-2;left:50%;top:50%;width:640px;height:640px;background-color:#399953;background-repeat:no-repeat;background-size:50% 50%,50% 50%;background-position:0 0,100% 0,100% 100%,0 100%;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);margin-left:-320px;margin-top:-320px;transition:.3s}
.gradient::after{content:'';position:absolute;z-index:-1;left:1px;top:1px;width:calc(100% - 2px);height:calc(100% - 2px);background:#fff;border-radius:3px;animation:opacityChange 3s infinite alternate}

.rainbow:hover::before{content:'';position:absolute;z-index:-2;left:50%;top:50%;width:640px;height:640px;background-color:#399953;background-repeat:no-repeat;background-size:50% 50%,50% 50%;background-position:0 0,100% 0,100% 100%,0 100%;background-image:linear-gradient(#f66,#f66),linear-gradient(#a8327d,#a8327d),linear-gradient(#57157e,#57157e),linear-gradient(#132140,#132140);animation:rotate 4s linear infinite;margin-left:-320px;margin-top:-320px}
.rainbow:hover::after{content:'';position:absolute;z-index:-1;left:1px;top:1px;width:calc(100% - 2px);height:calc(100% - 2px);background:#fff;border-radius:3px;animation:opacityChange 3s infinite alternate}
.gradient:hover::before{content:'';position:absolute;z-index:-2;left:50%;top:50%;width:640px;height:640px;background-color:#399953;background-repeat:no-repeat;background-size:50% 50%,50% 50%;background-position:0 0,100% 0,100% 100%,0 100%;background-image: linear-gradient(#0048ff, #003bff), linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc);animation:rotate 4s linear infinite;margin-left:-320px;margin-top:-320px}
.gradient:hover::after{content:'';position:absolute;z-index:-1;left:1px;top:1px;width:calc(100% - 2px);height:calc(100% - 2px);background:#fff;border-radius:3px;animation:opacityChange 3s infinite alternate}

@keyframes rotate {
  100% {transform: rotate(1turn);}
}

@keyframes opacityChange {
  50% {opacity:1;}
  100% {opacity: 1;}
}



.pc_only { display: block; }
.mobile_only { display: none; }

.srh_noitem_box{padding: 128px 0;}
.srh_noitem_box .srh_noitem{font-size: var(--fs-24);font-weight: 500;line-height: var(--lh-32);color: var(--color-black);text-align: center;}
.srh_noitem_box .srh_noitem .srh_keyword{display: inline-block;font-size: var(--fs-24);font-weight: 500;line-height: var(--lh-32);color: var(--color-blue-main);text-align: center;}

@media (max-width: 1080px){
  .pc_only { display: none; }
  .mobile_only { display: block; }

  .search_wrap .srh_tit_box{padding: 32px 0;}
  .search_wrap .srh_tit_box .srh_tit{font-size: var(--fs-24);line-height: var(--lh-32);}
  .search_wrap .srh_tit_box .srh_tit .srh_keyword{font-size: var(--fs-24);line-height: var(--lh-32);}

  .search_wrap .sort_list_wrap{position: relative;}
  .search_wrap .sort_list_wrap .sort_toggle_button{display: inline-flex;align-items: center;justify-content: center;flex-wrap: nowrap;background: transparent;cursor: pointer;}
  .search_wrap .sort_list_wrap .sort_toggle_button .btns_name{display: inline-block;font-size: var(--fs-14);font-weight: 400;line-height: var(--lh-20);color: var(--color-black);}
  .search_wrap .sort_list_wrap .sort_toggle_button .icon_acc_arr{display: inline-block;width: 20px;height: 20px;line-height: 0;pointer-events: none;transform: rotate(0);transition: transform .2s;}
  .search_wrap .sort_list_wrap .sort_toggle_button.opened .icon_acc_arr{transform: rotate(-180deg);}
  .search_wrap .sort_list_wrap .sort_toggle_button .icon_acc_arr svg{width: 100%;height: 100%;pointer-events: none;}
  .search_wrap .sort_list_wrap .sort_toggle_button .icon_acc_arr svg path{stroke: var(--color-black);stroke-opacity: 1;}

  .search_wrap #sortList {display: none;position: absolute;top: 100%;right: 0;z-index: 100;background-color: var(--color-white);border-radius: 4px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);flex-direction: column;align-items: flex-start;padding: 4px 0;}
  .search_wrap #sortList.active {display: flex;}
  .search_wrap #sortList .sort_item {width: 100%;padding: 4px 16px;box-sizing: border-box;}
  .search_wrap #sortList .sort_item + .sort_item{padding-left: 16px;}
  .search_wrap #sortList .sort_item + .sort_item::before {display: none;}
  .search_wrap #sortList .sort_item .sort_link {width: 100%;justify-content: flex-start;}
  .search_wrap #sortList .sort_item .sort_name{white-space: nowrap;}
  .search_wrap #sortList .sort_item .sort_link .tooltip_box{display: none;}

  .search_wrap .srh_list_hd + .srh_list_bd{margin-top: 24px;}
  #prdList{column-gap: 16px;row-gap: 24px;}
  #prdList .prd_item{width: calc(33.3334% - (32px/3));}

  .srh_noitem_box{padding: 64px 0;}
  .srh_noitem_box .srh_noitem{font-size: var(--fs-20);line-height: var(--lh-30);}
  .srh_noitem_box .srh_noitem .srh_keyword{font-size: var(--fs-20);line-height: var(--lh-30);}
}
@media (max-width: 768px){
  .search_wrap .srh_tit_box{padding: 24px 0;}
  .search_wrap .srh_tit_box .srh_tit{font-size: var(--fs-20);line-height: var(--lh-32);}
  .search_wrap .srh_tit_box .srh_tit .srh_keyword{font-size: var(--fs-20);line-height: var(--lh-32);}

  #prdList .prd_item{width: calc(50% - (16px/2));}
  #prdList .prd_item .item_thumb_box .btn_wish{top: 0;right: 0;}
  #prdList .prd_item .item_thumb_box .btn_wish .icon_wish_heart{width: 20px;height: 20px;}

  .srh_noitem_box{padding: 56px 0;}
  .srh_noitem_box .srh_noitem{font-size: var(--fs-18);line-height: var(--lh-26);}
  .srh_noitem_box .srh_noitem .srh_keyword{font-size: var(--fs-18);line-height: var(--lh-26);}
}
@media (max-width: 600px){
  #prdList{column-gap: 16px;row-gap: 24px;}
  #prdList .prd_item{width: calc(50% - (16px/2));}
  #prdList .prd_item .item_subject_box + .item_price_box{margin-top: 2px;}
  #prdList .prd_item .item_price_box .item_cust_price{font-size: var(--fs-14);line-height: var(--lh-20);}
  #prdList .prd_item .item_price_box .item_price{font-size: var(--fs-14);line-height: var(--lh-20);}
  #prdList .prd_item .item_price_box .item_sale_per{font-size: var(--fs-14);line-height: var(--lh-20);}
  #prdList .prd_item .item_cate_box .item_cate .btn_wish{right: 0;}
}