body{
  font-family: "PingFang TC","PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica", "Arial";
  font-weight: 300;
}
.H1 {
  font-size: 5.8125rem;
  font-weight: 900;
  line-height: 134px;
  letter-spacing: -1.5px;
}
.H2 {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 80px;
  letter-spacing: -0.5px;
}
.H3 {
  font-size: 2.875rem;
  font-weight: 900;
  line-height: 66px;
}
.H4 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 45px;
  letter-spacing: 0.25px;
}
.H5 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 28px;
}
.H6 {
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 27px;
  letter-spacing: 0.25px;
}
@media all and (max-width: 767px) {
  .H1 {
    font-size: 2.25em;
    line-height: 45px;
  }
  .H2 {
    font-size: 1.875em;
    line-height: 42px;
  }
  .H3 {
    font-size: 1.5em;
    line-height: 34px;
  }
  .H4 {
    font-size: 1.25em;
    line-height: 28px;
  }
}

.Button1 {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 1.25px;
}
.Button2 {
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 18px;
  letter-spacing: 1.25px;
}
.Button3 {
  font-size: 1rem;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 1.25px;
}
.Button4 {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 1.25px;
}

.Body1 {
  font-size: 1rem;
  line-height: 1.875rem;
  letter-spacing: 0.5px;
}
.Body2 {
  font-size: 0.8125rem;
  line-height: 1.125rem;
  letter-spacing: 0.25px;
}
.Body3 {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.25px;
}
.Body4 {
  font-size: 1.5rem;
  line-height: 2.125rem;
  letter-spacing: 0.5px;
}
.Body5 {
  font-size: 2.25rem;
  line-height: 3.25rem;
  letter-spacing: 0.5px;
}
@media all and (max-width: 767px) {
  .Body5 {
    font-size: 1.625em;
    line-height: 36px;
  }
}
.f-bold{
  font-weight:600;
}

.f-fff{
  color:#fff;
}
.f-000{
  color:#000;
}

.f-block{
  color:#1E1E1E;
}
.f-grey{
  color:#696969;
}
.f-silver{
  color:#8E8E8E;
}
.f-lightgrey{
  color:#E5E5E5;
}
.f-gainsbor{
  color:#F5F5F5;
}
.f-pearl{
  color:#F8F8F8;
}

.f-lightcoral{
  color:#E27463;
}
.f-chromeyellow{
  color:#B49455;
}
.f-crimson{
  color:#BE4949;
}

.button{
  cursor: pointer;
}




.fixed-bar{
  position: fixed;
  height: 70px;
  width: 100%;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 3;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);
}
.fixed-bar .bar-dot{
  width: 4px;
  height: 4px;
  background: #FFFFFF;
}
.fixed-bar .bar-btn{
  width: 162px;
  height: 50px;
}

.animate-bar-btn{
  background-image: url('https://assets.niusnews.com/mall/milktea/bar-btn.png?1');
  background-size: 648px 50px;
  animation-name: sprite-bar-btn;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-timing-function: step-start;
}
@keyframes sprite-bar-btn{
    0%{
      background-position: 0px 0px;
    }
    25%{
      background-position: 162px 0px;
    }
    50%{
      background-position: 324px 0px;
    }
    75%{
      background-position: 486px 0px;
    }
}


.product-cover.small {
  height: 180px;
  justify-content: flex-end;
  padding-bottom: 25px;
}