.feedback-number .f-n-icon {
  width: 87px;
  height: 15px;
  background: url(../images/details-icon.jpg) no-repeat;
  margin: auto;
}
.feedback-number .f-n-icon02 {
  background-position: 0 -14px;
}
.feedback-number .f-n-icon03 {
  background-position: 0 -28px;
}
.feedback-number .f-n-icon04 {
  background-position: 0 -42px;
}
.feedback-number .f-n-icon05 {
  background-position: 0 -56px;
}

#homeContainer {
  max-width: 1920px;
  width: 100%;
  padding: 0;
}
#homeContainer .home-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  width: 100%;
  height: auto;
  overflow: hidden;
}
#homeContainer .home-banner .banner_img {
  width: 1920px;
  margin-left: calc((100% - 1920px) / 2);
}

.main-content {
  max-width: 1600px;
  margin: auto;
  text-align: center;
}

.title-content {
  position: relative;
  font-size: 0.8rem;
  margin-top: 1rem;
}
.title-content .sub-title {
  color: #EEEEEE;
}
.title-content .main-title {
  color: #111;
  text-transform: uppercase;
}
.title-content .cntext {
  font-size: 1.6rem;
}
.title-content .entext {
  font-size: 0.9rem;
}

.bottom-line {
  position: absolute;
  left: 50%;
  width: 0.8rem;
  bottom: 0;
  border-bottom: 2px solid #EEEEEE;
}

.carousel .carousel-inner .carousel-item {
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.carousel .carousel-inner picture {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.carousel-indicators li {
  border: 1px solid #C9C9C9;
  background-color: #C9C9C9;
}

.features {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: #F9F9F9;
}

.feature {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin: 0 15px;
}
.feature img {
  width: 45px;
  height: 0;
  padding-top: 45px;
  margin-right: 5px;
  position: relative;
  background-image: url(../images/icon/feature-icon.webp?v1);
  display: inline-block;
  background-size: 400%;
  text-align: center;
}
.feature img.f1 {
  background-position-x: 0%;
}
.feature img.f2 {
  background-position-x: 33.3%;
}
.feature img.f3 {
  background-position-x: 66.6%;
}
.feature img.f4 {
  background-position-x: 100%;
}
.feature span {
  white-space: nowrap;
}

.separator {
  margin: 0 10px;
  border-left: 1px solid #ccc;
  height: 20px;
}

.classification .item-list {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.classification .item {
  width: 16%;
  padding: 10px 15px;
  margin: 0 5px;
  white-space: nowrap;
  justify-content: center;
  flex-wrap: wrap;
}
.classification .item span {
  text-align: center;
  font-size: 0.8rem;
  text-transform: uppercase;
  margin-top: 10px;
  display: block;
}
.classification .item img {
  width: 100%;
  height: 0;
  padding-top: 100%;
  background-image: url(../images/icon/glassbtn.webp);
  display: block;
  background-size: 600%;
  text-align: center;
  border-radius: 50%;
}
.classification .item img.f1 {
  background-position-x: 0%;
}
.classification .item img.f2 {
  background-position-x: 20%;
}
.classification .item img.f3 {
  background-position-x: 40%;
}
.classification .item img.f4 {
  background-position-x: 60%;
}
.classification .item img.f5 {
  background-position-x: 80%;
}
.classification .item img.f6 {
  background-position-y: 100%;
  background-position-x: 20%;
}
.classification .item img.f7 {
  background-position-y: 100%;
}

.fashionstyle .item-list {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.fashionstyle .item {
  width: 16%;
  padding: 10px 15px;
  margin: 0 5px;
  white-space: nowrap;
  justify-content: center;
  flex-wrap: wrap;
}
.fashionstyle .item span {
  text-align: center;
  font-size: 0.8rem;
  text-transform: uppercase;
  margin-top: 10px;
  display: block;
}
.fashionstyle .item img {
  width: 100%;
  height: 0;
  padding-top: 100%;
  background-image: url(../images/icon/style-btn.webp);
  display: block;
  background-size: 800%;
  text-align: center;
  border-radius: 50%;
}
.fashionstyle .item img.f1 {
  background-position-x: 0%;
}
.fashionstyle .item img.f2 {
  background-position-x: 14.25%;
}
.fashionstyle .item img.f3 {
  background-position-x: 28.54%;
}
.fashionstyle .item img.f4 {
  background-position-x: 42.84%;
}
.fashionstyle .item img.f5 {
  background-position-x: 57.12%;
}
.fashionstyle .item img.f6 {
  background-position-x: 71.4%;
}
.fashionstyle .item img.f7 {
  background-position-x: 85.68%;
}
.fashionstyle .item img.f8 {
  background-position-x: 100%;
}

.home-recommend-list {
  margin: 2rem auto;
}

.products-list {
  display: flex;
}
.products-list .item {
  width: 25%;
  padding-top: 1rem;
  padding: 0.5rem 0.5rem;
}
.products-list .item .item-inner-content {
  margin: 0.5rem 0;
  position: relative;
}
.products-list .item .item-image img {
  width: 98%;
  margin: 0 auto;
  max-height: 300px;
  overflow: hidden;
}
.products-list .item .item-image .p_loading {
  width: 25px;
  position: absolute;
  top: 25%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 90;
  display: none;
}
.products-list .item .item-colors-sizes {
  margin-top: 0;
}
.products-list .item .item-colors-sizes a {
  display: inline-block;
  padding: 3px;
  margin: 0 0.25rem;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 50%;
  font-size: 0px;
}
.products-list .item .item-colors-sizes a img {
  width: 100%;
  border-radius: 50%;
}
.products-list .item .item-colors-sizes a.active {
  border: 1px solid #535353;
  font-size: 0px;
}
.products-list .item .item-info-content .item-name {
  width: 100%;
  color: #484848;
  font-size: 0.8rem;
}
.products-list .item .item-info-content .item-price {
  float: left;
  display: inline-block;
  width: 45%;
  line-height: 1rem;
}
.products-list .item .item-info-content .item-price .real-price-tag {
  font-size: 1rem;
  font-weight: 700;
  color: #333333;
}
.products-list .item .item-info-content .item-price .sale-price-tag {
  text-decoration: line-through;
  font-size: 0.7rem;
  color: #C6C6C6;
  margin-left: 0.5rem;
  font-weight: 100;
}
.products-list .item .item-like-action {
  line-height: 1.5rem;
  color: #22B3E6;
  font-size: 1.5rem;
  -webkit-text-stroke: 1px #FFF;
}

.products-list-container .view-more {
  font-size: 0.9rem;
  color: #FFF;
  padding: 0.4rem 2rem;
  background-color: #22B3E6;
  border-radius: 1rem;
  display: block;
  clear: both;
  width: 12rem;
  margin: 1rem auto;
}

.home_promo_list {
  margin: 2rem auto;
}
.home_promo_list .recommend_promo_list {
  display: inline-flex;
  justify-content: space-between;
}
.home_promo_list .recommend_promo_list a {
  display: inline-block;
  width: 49%;
}

.home-guarantee {
  margin: 2rem auto;
}
.home-guarantee .step-all {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  flex-wrap: nowrap;
}
.home-guarantee .shop-step {
  display: inline-block;
  width: 30%;
  position: relative;
  margin: 0.5rem;
}
.home-guarantee .shop-step .step-num {
  display: block;
  width: 4rem;
  height: 4rem;
  line-height: 3.8rem;
  color: #22B3E6;
  font-weight: 700;
  font-family: "arial black";
  font-size: 2rem;
  border: 1px solid #22B3E6;
  border-radius: 50%;
  margin: auto;
}
.home-guarantee .shop-step .step-title {
  position: relative;
  left: 0;
  top: 0.5rem;
  margin: auto;
  display: block;
  font-size: 1rem;
}
.home-guarantee .shop-step .step-line {
  display: none;
  position: absolute;
  left: 5rem;
  top: 2rem;
  border-bottom: 2px solid #22B3E6;
  width: 1rem;
}
.home-guarantee .shop-step .step-content {
  position: relative;
  left: 0rem;
  top: 1rem;
  font-size: 0.7rem;
  color: #7a7a7a;
}
.home-guarantee .home-guarantee .shop-step .step-num {
  margin: initial;
}
.home-guarantee .home-guarantee .shop-step .step-title {
  position: absolute;
  left: 5rem;
  top: 0rem;
}
.home-guarantee .home-guarantee .shop-step .step-line {
  display: block;
}
.home-guarantee .home-guarantee .shop-step .step-content {
  display: block;
  position: absolute;
  left: 5rem;
  top: 2.5rem;
}

@media (max-width: 1200px) {
  .title-content .cntext {
    font-size: 1.2rem;
  }
  .products-list {
    display: flex;
    flex-wrap: wrap;
  }
  .products-list .item {
    width: 30%;
    padding: 20px;
  }
  .products-list .item .item-info-content .item-name,
  .products-list .item .item-info-content .item-price {
    float: none;
    width: 100%;
  }
  .carousel-inner > .active {
    text-align: center;
  }
}
@media (max-width: 1024px) {
  #homeContainer > .home-banner .banner_img {
    width: 100%;
    margin: 0;
  }
  #homeContainer > .home-banner .feature {
    flex-direction: column;
  }
  .classification .item-list,
  .fashionstyle .item-list {
    flex-wrap: wrap;
  }
  .classification .item,
  .fashionstyle .item {
    width: 30%;
  }
  .classification .item-list .item span {
    font-size: 0.8rem;
  }
  .title-content .cntext {
    font-size: 1.2rem;
  }
  .home-guarantee .step-all {
    flex-wrap: wrap;
  }
  .home-guarantee .shop-step {
    width: 60%;
  }
}
@media (max-width: 768px) {
  #homeContainer > .home-banner .banner_img {
    width: 100%;
    margin: 0;
  }
  #homeContainer > .home-banner .features {
    flex-wrap: wrap;
  }
  #homeContainer > .home-banner .features .feature {
    width: 50%;
    margin: 10px 0;
  }
  #homeContainer > .home-banner .separator {
    display: none;
  }
  #homeContainer > .home-banner .carousel-inner .item img {
    width: 100%;
  }
  .classification .item-list,
  .fashionstyle .item-list {
    padding: 0px;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .classification .item,
  .fashionstyle .item {
    width: 40%;
  }
  .products-list {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
  }
  .products-list .item {
    width: 50%;
    padding: 10px;
  }
  .products-list .item .item-info-content .item-name,
  .products-list .item .item-info-content .item-price {
    float: none;
    width: 100%;
  }
  .home-guarantee .shop-step {
    text-align: center;
    width: 90%;
  }
}

/*# sourceMappingURL=index.css.map */