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


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

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

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

.zap-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;
}

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

.zap-content {
  display: flex;
  transition: transform 0.2s ease-in-out;
}

.zap-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;
}

.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;
}

.prdList {
  counter-reset: rank 1;
}




@media (max-width: 768px) {


.zap-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;
}


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




}