@charset "utf-8";

/*移动端排行榜
 * ModifyTime:2018-12-14 09:52:28
 * Modify:调整为前4个横版显示
 * */

body {
  background-color: #F5F5F5;
}
.category {
  background-color: #fff;
  font-size: 0;
  border-bottom: 1px solid #E6E6E6;
}
.category:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}
.category-item {
  float: left;
  width: 50%;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
  font-size: 1.3rem;
}
.category-item.active {
  color: #FE6600;
}
.category-item:active {
  opacity: 0.6;
}
.category-children {
  background-color: #fff;
  height: 0.36rem;
  line-height: 0.36rem;
  overflow: hidden;
}
.category-children .swiper-container {
  padding: 0 0.16rem;
  display: none;
}
.category-children .swiper-container.active {
  display: block;
}
.category-children .swiper-slide {
  display: inline-block;
  width: auto;
  font-size: 0.1rem;
  color: #777;
  margin: 0 0.16rem;
}
.category-children .swiper-slide>a {
  color: inherit;
}
.category-children .swiper-slide.active {
  color: #232323;
  font-weight: bold;
}
.main {
  margin-top: 0.08rem;
}
section.main {
  background-color: transparent;
}

/*Product*/

.product {
  margin: 0 0.08rem;
  display: none;
}
.product.active {
  display: block;
}
.product-list {
  width: 100%;
  padding-bottom: 0.16rem;
  counter-reset: ranktop;
  display: none;
}
.product-list:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}
.product-list.active {
  display: block;
}
.product-list.flower .product-item2 .product-item-ranking:after,.product-list.flower .product-item:first-child .product-item-ranking:after, .product-list.flower .product-item:nth-child(2) .product-item-ranking:after, .product-list.flower .product-item:nth-child(3) .product-item-ranking:after, .product-list.flower .product-item:nth-child(4) .product-item-ranking:after {
  content: "排行第" counters(ranktop, "") "名";
}
.product-list.ysh .product-item:first-child .product-item-ranking:after, .product-list.ysh .product-item:nth-child(2) .product-item-ranking:after, .product-list.ysh .product-item:nth-child(3) .product-item-ranking:after, .product-list.ysh .product-item:nth-child(4) .product-item-ranking:after {
  content: "排行第" counters(ranktop, "") "名";
}
.product-list.gift .product-item:first-child .product-item-ranking:after, .product-list.gift .product-item:nth-child(2) .product-item-ranking:after, .product-list.gift .product-item:nth-child(3) .product-item-ranking:after, .product-list.gift .product-item:nth-child(4) .product-item-ranking:after {
  content: "排行第" counters(ranktop, "") "名";
}
.product-item {
  float: left;
  width: 41%;
  color: #232323;
  font-size: 0.12rem;
  padding: 1rem 4%;
  margin-top: 8px;
  background-color: #fff;
  position: relative;
  counter-increment: ranktop;
  /*max-height: 2.53rem;*/
}
.product-item:nth-of-type(odd){margin-right:1.6%;}
.product-item2 .product-item-ranking {
  background-image: url(../images/m_ranklist_top4.png);
  color: #686868;
  -webkit-filter: saturate(50%);
  filter: saturate(50%);
}

.product-item:first-child .product-item-ranking {
  background-image: url(../images/m_ranklist_top1.png);
  color: #FE6600;
}
.product-item:nth-child(2) .product-item-ranking {
  background-image: url(../images/m_ranklist_top2.png);
  color: #F88D2B;
}
.product-item:nth-child(3) .product-item-ranking {
  background-image: url(../images/m_ranklist_top3.png);
  color: #F1C50D;
}
.product-item:nth-child(4) .product-item-ranking {
  background-image: url(../images/m_ranklist_top3.png);
  color: #F1C50D;
  -webkit-filter: saturate(50%);
  filter: saturate(50%);
}

.product-item:nth-child(2n) {
  margin-left: 0.08rem;
}
.product-item2,.product-item:first-child, .product-item:nth-child(2), .product-item:nth-child(3), .product-item:nth-child(4) {
  float: left;
  width: 98%;
  max-width: 98%;
  font-size: 0.14rem;
  display: flex;
  margin: 8px 0 0;
  align-items:flex-start;
  /*align-items: center;*/
  /*padding: 0.4rem 0.16rem 0.24rem;*/
  padding:4rem 1rem 1.24rem;
}
.product-item2 .product-item-ranking,.product-item:first-child .product-item-ranking, .product-item:nth-child(2) .product-item-ranking, .product-item:nth-child(3) .product-item-ranking, .product-item:nth-child(4) .product-item-ranking {
  width: 40%;
  /*padding-left: 0.34rem;*/
  font-size: 1.2rem;
  line-height: 2.6rem;
}
.product-item2 .product-item-ranking:after,.product-item:first-child .product-item-ranking:after, .product-item:nth-child(2) .product-item-ranking:after, .product-item:nth-child(3) .product-item-ranking:after, .product-item:nth-child(4) .product-item-ranking:after {
  content: "";
  width: 1.05rem;
  height: 4rem;
  line-height: 2.2rem;
  font-size: 1.2rem;
}
.product-item2 .product-item-info,.product-item:first-child .product-item-info, .product-item:nth-child(2) .product-item-info, .product-item:nth-child(3) .product-item-info, .product-item:nth-child(4) .product-item-info {
  flex: 1;
  min-width: 0;
  margin-left: 1rem;
}
.product-item2 .product-item-info__light,.product-item:first-child .product-item-info__light, .product-item:nth-child(2) .product-item-info__light, .product-item:nth-child(3) .product-item-info__light, .product-item:nth-child(4) .product-item-info__light {
  display: block;
  color: #FE6600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;font-size:1.2rem;
}
.product-item2 .product-item-info__hr,.product-item:first-child .product-item-info__hr, .product-item:nth-child(2) .product-item-info__hr, .product-item:nth-child(3) .product-item-info__hr, .product-item:nth-child(4) .product-item-info__hr {
  margin: 0.8rem 0;
  opacity: 0.2;
}
.product-item2 .product-item-info__price,.product-item:first-child .product-item-info__price, .product-item:nth-child(2) .product-item-info__price, .product-item:nth-child(3) .product-item-info__price, .product-item:nth-child(4) .product-item-info__price {
  font-size: 1.6rem;
}
.product-item2 .product-item-info__btn,.product-item:first-child .product-item-info__btn, .product-item:nth-child(2) .product-item-info__btn, .product-item:nth-child(3) .product-item-info__btn, .product-item:nth-child(4) .product-item-info__btn {
  margin-top: 0.5rem;
  display: inline-block;
  padding: 0.5rem 2rem;
  text-align: center;
  border: 1px solid #232323;
  color: #232323;
  transition: 0.25s;
  border-radius:10px;
}
.product-item2 .product-item-info__btn:active,.product-item:first-child .product-item-info__btn:active, .product-item:nth-child(2) .product-item-info__btn:active, .product-item:nth-child(3) .product-item-info__btn:active, .product-item:nth-child(4) .product-item-info__btn:active {
  background-color: #232323;
  color: #fff;
}
.product-item2 .product-item-pic,.product-item:first-child .product-item-pic, .product-item:nth-child(2) .product-item-pic, .product-item:nth-child(3) .product-item-pic, .product-item:nth-child(4) .product-item-pic {
  width: 50%;
  height: auto;
  max-height: initial;
}
.product-item2 .product-item-pic img,.product-item:first-child .product-item-pic img, .product-item:nth-child(2) .product-item-pic img, .product-item:nth-child(3) .product-item-pic img, .product-item:nth-child(4) .product-item-pic img {
  vertical-align: top;
  width: 100%;
}
.product-item-ranking {
    text-indent:3rem;
  position: absolute;
  top: 0.5rem;
  left: -0.05rem;
  width: 3rem;
  height: 3rem;
  font-size: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(//img02.hua.com/res/rankinglist/m_ranklist_topnormal.png);
}
.product-item-ranking:before {
  content: counters(ranktop, "");
  position: absolute;
  top: 0;
  left: 0;
  width: 2.6rem;
  height: 100%;
  line-height: 2.4rem;
  text-align: center;
  color: #fff;
  font-family: "微软雅黑";
  font-size: 1.4rem;
  font-weight: bold;
  text-indent:0px;
}
.product-item-info__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 2.4rem;font-size:1.2rem
}
.product-item-info__light {
  display: none;
}
.product-item-info__price {
  font-size: 1.6rem;
}
.product-item-info__hr {
  margin: 0.06rem 0;
  opacity: 0.2;
}
.product-item-info__num {
  color: #FE6600;
}
.product-item-info__btn {
  display: none;
}
.product-item-pic {
  /*max-height: 1.57rem;
  overflow: hidden;*/
}
.product-item-pic img{width:100%;height:auto;}
.more-tips {
  text-align: center;
  color: #777;
}
.more-tips .tips {
  margin-left: 5px;
}
.more-tips img {
  width: 20%;
  height: auto;
  vertical-align: middle;
}
.more-tips .more {
  margin: 10px 0;
}
.more-tips .more img {
  width: 20px;
}
.copyright {
  font-size: 10px;
  text-align: center;
  color: #ccc;
  padding: 16px 0;
  background: #fff;
}