#rec { scroll-margin-top: 130px;}


.rec-container {
  width: 100%;
  overflow: hidden;
  margin-top:15px;
}

.rec-header {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.rec-header::-webkit-scrollbar {
  display: none;
}

.rec-tab {
  flex: 1 1 auto;
  padding: 12px 22px;
  margin:10px 5px;
  cursor: pointer;
  font-size:15px;
  color:#444;
  text-align: center;
  background: #f5f5f5;
  transition: background 0.3s;
  border-radius: 100px;
}

.rec-tab.active {
  background: #444;
  color:#fff;
  font-weight: 700;
}

.rec-content {
  display: flex;
  align-items: flex-start;
  transition: transform 0.2s ease-in-out, 
              height 0.2s ease-in-out; 
}

.rec-item {
  flex: 0 0 100%;
  padding: 20px;
  box-sizing: border-box;
}




.prdList .rank-1::before {
  content: "1";
  position: absolute;
  top: 22px;
  left: 22px;
  font-size: 18px;
  font-weight: 700 !important;
  color: #FF2C00;
  z-index: 2;
  display: none;
}

.prdList .rank::before {
  content: counter(rank) "";
  counter-increment: rank;
  position: absolute;
  top: 22px;
  left: 22px;
  font-size: 14px;
  font-weight: 500 !important;
  font-weight: normal;
  color: #ccc;
  mix-blend-mode: difference;
  z-index: 2;
  display: none;

}

.prdList {
  counter-reset: rank 1;
}




@media (max-width: 768px) {


.rec-tab {
  padding: 10px 20px;
  margin:0 3px;
  font-size:14px;
  color:#444;
}



.prdList .rank-1::before {
  top: 18px;
  left: 10px;
  font-size: 16px;
}

.prdList .rank::before {
  top: 15px;
  left: 10px;
  font-size: 14px;
}

.rec-all .prdList li:last-child{display: none;}


}