/* icon */
.i-check::before{
  content: "";
  width: 24px;
  height: 28px;
  mask: url(../../img/common/icon/check.svg) no-repeat center center / contain;
  -webkit-mask: url(../../img/common/icon/check.svg) no-repeat center center / contain;
  background: #ffd739;
  background-size: contain;
  position: absolute;
}
.i-star::before{
  content: "";
  width: 26px;
  height: 28px;
  mask: url(../../img/common/icon/star.svg) no-repeat center center / contain;
  -webkit-mask: url(../../img/common/icon/star.svg) no-repeat center center / contain;
  background: #ffcd46;
  background-size: contain;
  position: absolute;
}
.i-sparkle::before{
  content: "";
  width: 26px;
  height: 28px;
  background: url(../../img/common/icon/sparkle.svg) no-repeat;
  background-size: contain;
  position: absolute;
}
.i-search::before{
  content: "";
  width: 38px;
  height: 47px;
  background: url(../../img/common/icon/search.svg) no-repeat;
  background-size: contain;
  position: absolute;
}
.i-crown::after{
  content: "";
  width: 39px;
  height: 46px;
  position: absolute;
  mask: url(../../img/common/icon/crown.svg) no-repeat center center / contain;
  -webkit-mask: url(../../img/common/icon/crown.svg) no-repeat center center / contain;
  background: #ffa42d;
  background-size: contain;
}
.i-fav{
  width: 38px;
  height: 38px;
  background: #fff;
  border-radius: 100%;
  border-width: 0;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 15;
  cursor: pointer;
}
.c-ranking .i-fav{
  right: 24px;
}
.i-fav:hover::after{
  opacity: 0.7;
}
.i-fav::after{
  content: "";
  width: 17px;
  height: 15px;
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: var(--transition);
}
.i-fav[data-fav="on"]::after{
  background-color: #ff7145;
  mask: url(../../img/common/icon/heart.svg) no-repeat center center / contain;
  -webkit-mask: url(../../img/common/icon/heart.svg) no-repeat center center / contain;
}
.i-fav[data-fav="off"]::after{
  background-color: #ff7145;
  mask: url(../../img/common/icon/heart-line.svg) no-repeat center center / contain;
  -webkit-mask: url(../../img/common/icon/heart-line.svg) no-repeat center center / contain;
}
.i-light::before{
  content: "";
  width: 47px;
  height: 29px;
  mask: url(../../img/common/icon/light.svg) no-repeat center center / contain;
  -webkit-mask: url(../../img/common/icon/light.svg) no-repeat center center / contain;
  background: #ffcd46;
  background-size: contain;
  position: absolute;
}
.i-accent::before{
  content: "";
  width: 24px;
  height: 28px;
  background: url(../../img/common/icon/shine.svg) no-repeat top;
  background-size: contain;
  position: absolute;
  top: -40px;
  right: -20px;
}
.i-category::before{
  content: "";
  width: 63px;
  height: 23px;
  background: url(../../img/common/label/category-cursive.svg) no-repeat top;
  background-size: contain;
  position: absolute;
  top: -46px;
  left: -36px;
}
.i-brand::before{
  content: "";
  width: 50px;
  height: 30px;
  background: url(../../img/common/label/itemBrand.svg) no-repeat top;
  background-size: contain;
  position: absolute;
  top: -30px;
  left: -36px;
}
.i-menu::before{
  content: "";
  width: 52px;
  height: 22px;
  background: url(../../img/common/label/menu-cursive.svg) no-repeat top;
  background-size: contain;
  position: absolute;
  top: -38px;
  left: -34px;
}
@media all and (max-width:960px) {
  .i-star::before{
    width: 15px;
    height: 15px;
  }
  .i-sparkle::before{
    width: 15px;
    height: 15px;
  }
  .i-check::before{
    width: 15px;
    height: 16.5px;
  }
  .i-fav{
    width: 21px;
    height: 21px;
    top: 3px;
    right: 3px;
  }
  .i-fav::after{
    width: 13px;
    height: 10px;
  }
  .i-fav[data-fav="on"]::after,.i-fav[data-fav="off"]::after{
    mask-size: 13px 10px;
  }
  .i-search::before{
    width: 23px;
    height: 28px;
  }
  .i-light::before{
    width: 22.5px;
    height: 13.5px;
  }
  .i-crown::after{
    width: 20px;
    height: 23px;
  }
  .i-menu::before{
    width: 26.5px;
    height: 12.5px;
  }
  .i-accent::before{
    width: 12px;
    height: 14px;
  }
  .i-category::before{
    width: 30px;
    height: 12px;
  }
  .i-brand::before{
    width: 28px;
    height: 16px;
  }
}
@media all and (max-width:960px) and (min-width:640px) {
  .i-star::before{
    width: 19.5px;
    height: 19.5px;
  }
  .i-sparkle::before{
    width: 19.5px;
    height: 19.5px;
  }
  .i-check::before{
    width: 19.5px;
    height: 21.5px;
  }
  .i-search::before{
    width: 30px;
    height: 36.4px;
  }
  .i-light::before{
    width: 29.2px;
    height: 17.5px;
  }
  .i-crown::after{
    width: 26px;
    height: 30px;
  }
  .i-menu::before{
    width: 34.5px;
    height: 16.3px;
  }
  .i-accent::before{
    width: 15.6px;
    height: 18.2px;
  }
  .i-category::before{
    width: 39px;
    height: 15.6px;
  }
  .i-brand::before{
    width: 36.4px;
    height: 20.8px;
  }
}