* {
  margin: 0;
  padding: 0;
}
body {
  min-width: 320px;
}
body .wire {
  height: 0px;
  width: 0px;
  border-bottom: 2px solid red;
  position: absolute;
  bottom: 0px;
  left: 0px;
  transition: width 1s;
  -moz-transition: width 0.5s;
  /* Firefox 4 */
  -webkit-transition: width 0.5s;
  /* Safari 和 Chrome */
  -o-transition: width 0.5s;
  /* Opera */
}
body .wire2 {
  height: 0px;
  width: 0px;
  border-bottom: 2px solid red;
  position: absolute;
  display: none;
  bottom: 0px;
  left: 0px;
  transition: width 1s;
  -moz-transition: width 0.5s;
  /* Firefox 4 */
  -webkit-transition: width 0.5s;
  /* Safari 和 Chrome */
  -o-transition: width 0.5s;
  /* Opera */
}
body .banner {
  width: 100%;
  height: 100%;
  position: relative;
}
body .banner .vip {
  width: 8.907rem;
  height: 1.6rem;
  border: 1px solid white;
  border-radius: 0.533rem;
  padding: 0px 0.533rem;
  position: absolute;
  bottom: 1.066667rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  font-size: 12px;
  z-index: 10;
}
body .banner .vip .vip-btn {
  width: 2rem;
  height: 0.667rem;
  background-color: red;
  color: white;
  border-radius: 0.333rem;
  text-align: center;
  line-height: 0.667rem;
}
body .banner .vip .vip-text {
  flex: 1;
  margin-left: 0.533333rem;
  font-size: 14px;
  color: white;
}
body .banner .downBox {
  width: 100%;
  height: 2rem;
  position: absolute;
  left: 0px;
  bottom: 4rem;
  z-index: 10;
}
body .banner .downBox .down {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  background-color: red;
  color: white;
  border-radius: 50%;
  animation: toggleMove 1s infinite;
  -webkit-animation: toggleMove 1s infinite;
}
body .banner .downBox .down > i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  font-size: 0.5625rem;
}
@keyframes toggleMove {
  0% {
    bottom: 15.5%;
    opacity: 0.5;
  }
  50% {
    bottom: 6.5%;
    opacity: 1;
  }
  100% {
    bottom: 15.5%;
    opacity: 0.5;
  }
}
body .banner .banner-img {
  width: 100%;
  height: 100%;
  position: relative;
}
body .banner .banner-img > .bgimg {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  -moz-background-size: cover;
}
body .banner .banner-img .img-text {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 3;
  padding-top: 3rem;
  overflow: hidden;
}
body .banner .banner-img .img-text .banner-text {
  width: 100%;
  text-align: center;
  color: white;
  position: relative;
}
body .banner .banner-img .img-text .banner-text > .p1 {
  width: 100%;
  font-size: 30px;
  line-height: 1.2rem;
  margin-bottom: 0.533333rem;
  color: white;
  position: relative;
  right: -400px;
  opacity: 0;
  font-weight: 800;
}
body .banner .banner-img .img-text .banner-text > .p2 {
  width: 100%;
  overflow: hidden;
  font-size: 18px;
  line-height: 27px;
  margin: 0.466667rem 0px;
  position: relative;
  right: -400px;
  opacity: 0;
}
body .goods {
  background-color: white;
  width: 100%;
  padding: 1.8rem 0px 1rem;
}
body .goods .goods-text {
  color: black;
  text-align: center;
  font-size: 30px;
  width: 50%;
  margin: 0.4rem auto;
  font-weight: 800;
}
body .goods .slide {
  width: 100%;
}
body .goods .slide .slide-top {
  width: 100%;
  height: 0.72rem;
  padding: 0px 0.533rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body .goods .slide .slide-top .text {
  width: 33%;
  height: 100%;
  font-size: 0.32rem;
  text-align: center;
  line-height: 0.72rem;
  color: black;
  border-radius: 0.36rem;
  overflow: hidden;
}
body .goods .slide .slide-top .active {
  background-color: red;
  color: white;
}
body .goods .slide .swiper-container1 {
  margin-top: 0.5rem;
  max-width: 414px;
  /* position: absolute; */
  /* left: 0px;
  right: 0px; */
}
body .goods .slide .swiper-container1 .swiper-wrapper1 {
  width: 1520px !important;
  height: 100%;
  left: 0px !important;
}
body .goods .slide .swiper-container1 .swiper-wrapper1 .beverage {
  display: block;
}
body .goods .slide .swiper-container1 .swiper-wrapper1 .personal {
  display: none;
}
body .goods .slide .swiper-container1 .swiper-wrapper1 .supplement {
  display: none;
}
body .goods .slide .swiper-container1 .swiper-wrapper1 .swiper-slide {
  width: auto !important;
}
body .goods .slide .goodsList {
  width: 4.4rem;
  height: 7.2rem;
  background-color: #ededed;
  border-radius: 0.4rem;
  overflow: hidden;
}
body .goods .slide .goodsList > a {
  display: inline-block;
  width: 100%;
  height: 100%;
}
body .goods .slide .goodsList > a .top {
  width: 100%;
  height: 75%;
}
body .goods .slide .goodsList > a .top > img {
  max-width: auto;
  max-height: auto;
}
body .goods .slide .goodsList > a .bottom {
  width: 100%;
  height: 25%;
  position: relative;
}
body .goods .slide .goodsList > a .bottom > p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0.667rem;
  color: black;
  font-size: 0.32rem;
  text-align: 0.32rem;
}
body .goods .slide .goodsList > a .bottom > div {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.4rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: red;
}
body .goods .slide .goodsList > a .bottom > div > i {
  color: white;
  font-size: 0.4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
body .goods .hot-bar1 {
  margin-top: 8.8rem;
  width: 100%;
}
body .goods .hot-bar1 > p {
  height: 0.4rem;
  text-align: left;
  line-height: 0.4rem;
  font-size: 0.4rem;
}
body .goods .hot-bar1 > p > i {
  font-size: 12px;
}
body .goods .hot-bar1 .hot1 {
  width: 100%;
  margin-top: 0.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body .goods .hot-bar1 .hot1 .hot-content {
  flex: 1;
  text-align: center;
}
body .goods .hot-bar1 .hot1 .hot-content > div {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  margin: 0px auto;
  background-color: #eeeeee;
  overflow: hidden;
}
body .goods .hot-bar1 .hot1 .hot-content > div > img {
  width: 100%;
  height: 100%;
}
body .goods .hot-bar1 .hot1 .hot-content .ranking {
  color: red;
  margin-bottom: 0.107rem;
}
body .goods .hot-bar1 .hot1 .hot-content .text {
  color: black;
  margin-top: 0.16rem;
  height: 40px;
}
body .goods .hot-bar2 {
  margin-top: 1.133333rem;
  width: 100%;
}
body .goods .hot-bar2 > p {
  height: 0.4rem;
  text-align: left;
  line-height: 0.4rem;
  font-size: 0.4rem;
}
body .goods .hot-bar2 > p > i {
  font-size: 12px;
}
body .goods .hot-bar2 .hot2 {
  width: 100%;
  display: flex;
  margin-top: 0.333rem;
  justify-content: space-between;
  align-items: center;
}
body .goods .hot-bar2 .hot2 .hot-content {
  flex: 1;
  text-align: center;
}
body .goods .hot-bar2 .hot2 .hot-content .hot-img {
  width: 1.6rem;
  height: 1.2rem;
  margin: 0.133rem auto;
  background-color: #eeeeee;
  border-radius: 10px;
}
body .goods .hot-bar2 .hot2 .hot-content .hot-img > img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
body .goods .hot-bar2 .hot2 .hot-content .hot-btn {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border: 1px solid #868686;
  border-radius: 50%;
  background-color: #868686;
  vertical-align: middle;
}
body .goods .hot-bar2 .hot2 .hot-content > span {
  display: inline-block;
  height: 0.4rem;
  padding-bottom: 0.053333rem;
  font-size: 0.32rem;
  color: black;
  vertical-align: middle;
}
body .introduce {
  position: relative;
  width: 100%;
  height: 812px;
  overflow: hidden;
}
body .introduce .swiper-wrapper5 {
  width: 100%;
  height: 100%;
}
body .introduce .swiper-wrapper5 .swiper-slide {
  width: 100%;
  height: 100%;
  position: relative;
}
body .introduce .bgimg {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  -moz-background-size: cover;
}
body .introduce .bgtext {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  padding-top: 2rem;
  text-align: center;
  color: white;
  overflow: hidden;
}
body .introduce .bgtext > .p1 {
  font-size: 30px;
  line-height: 1.2rem;
  margin: 0 auto;
  margin-bottom: 0.533333rem;
  position: relative;
  font-weight: 800;
  right: -400px;
}
body .introduce .bgtext > .p2 {
  font-size: 18px;
  line-height: 27px;
  position: relative;
  right: -400px;
}
body .introduce .iconBox {
  position: absolute;
  display: flex;
  align-items: center;
  z-index: 20;
  opacity: 0;
}
body .introduce .iconBox > div {
  width: 50px;
  height: 50px;
}
body .introduce .iconBox > div > img {
  width: 100%;
  height: 100%;
}
body .introduce .iconBox > p {
  color: #ffffff;
  font-size: 12px;
}
body .introduce .iconBox9 {
  bottom: -200px;
  left: 1.5rem;
}
body .introduce .iconBox9 > p {
  margin-left: 0.333333rem;
}
body .introduce .iconBox8 {
  left: 3rem;
  bottom: -200px;
}
body .introduce .iconBox8 > p {
  margin-left: 0.333333rem;
}
body .introduce .iconBox7 {
  left: 1rem;
  bottom: -200px;
}
body .introduce .iconBox7 > p {
  margin-left: 0.333333rem;
}
body .introduce .iconBox4 {
  flex-direction: column;
  bottom: -200px;
  left: 2rem;
}
body .introduce .iconBox4 > p {
  margin-top: 5px;
}
body .introduce .iconBox3 {
  flex-direction: column;
  bottom: -200px;
  right: 2rem;
}
body .introduce .iconBox3 > p {
  margin-top: 5px;
}
body .introduce .iconBox1 {
  flex-direction: column;
  bottom: -200px;
  right: 2rem;
}
body .introduce .iconBox1 > p {
  margin-top: 5px;
}
body .introduce .iconBox2 {
  flex-direction: column;
  bottom: -200px;
  left: 2rem;
}
body .introduce .iconBox2 > p {
  margin-top: 5px;
}
body .introduce .introduce-video {
  width: 4.453333rem;
  height: 2.346667rem;
  background: url('../assetss/video.jpg') no-repeat center;
  background-size: 100% 100%;
  background-color: #eeeeee;
  border-radius: 0.4rem;
  overflow: hidden;
  position: relative;
  z-index: 10;
  left: 50%;
  bottom: 8rem;
  transform: translateX(-50%);
}
body .introduce .introduce-video > img {
  width: 0.9rem;
  height: 0.9crem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
body .introduce .introduce-btn {
  width: 7.027rem;
  height: 0.853rem;
  background-color: red;
  color: white;
  font-size: 12px;
  line-height: 0.853rem;
  border-radius: 0.427rem;
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
body .introduce .introduce-btn > a {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
}
body .introduce .introduce-btn > a > img {
  width: 1.506667rem;
  height: 0.226667rem;
  margin-bottom: 0.133rem;
  margin-left: 0.266667rem;
  display: inline-block !important;
}
body .abstract {
  width: 100%;
  padding: 1rem 0.533rem 1rem;
}
body .abstract .text1 {
  text-align: center;
  font-size: 30px;
  color: black;
  margin: 0 auto;
  margin-bottom: 0.3rem;
  font-weight: 800;
}
body .abstract .start-bar {
  height: 0.8rem;
  width: 100%;
  margin-bottom: 0.4rem;
  overflow: hidden;
  position: absolute;
  left: 0px;
  right: 0px;
  z-index: 100;
  float: left;
}
body .abstract .start-bar > ul {
  height: 100%;
  width: 1135px;
  padding: 0px 0.533rem;
  position: absolute;
}
body .abstract .start-bar > ul .bar {
  padding: 0px 15px;
  height: 100%;
  border-radius: 0.4rem;
  color: black;
  text-align: center;
  line-height: 0.8rem;
  font-size: 14px;
  float: left;
}
body .abstract .start-bar .active {
  background-color: red;
  color: white !important;
}
body .abstract .swiper-pagination {
  width: 100%;
  position: static;
  text-align: center;
  margin-top: 7.2rem;
}
body .abstract .swiper-pagination > span {
  margin: 0.133333rem;
}
body .abstract .swiper-container3 {
  max-width: 414px;
  width: 100%;
  height: 5.333333rem;
  margin-top: 1.2rem;
  position: absolute;
  left: 0px;
  right: 0px;
}
body .abstract .swiper-container3 .swiper-wrapper3 .swiper-slide3 {
  width: 100%;
  height: 100%;
  display: none;
}
body .abstract .swiper-container3 .swiper-wrapper3 .swiper-slide3 .imgBox {
  width: 100%;
  padding: 0px 0.533rem;
  height: 100%;
  overflow: hidden;
}
body .abstract .swiper-container3 .swiper-wrapper3 .swiper-slide3 .imgBox > img {
  display: block;
  margin: 0px auto;
  width: 100%;
  height: 100%;
  border-radius: 0.533rem;
}
body .abstract .text2 {
  width: 100%;
  font-size: 0.4rem;
  text-align: left;
  color: black;
  margin-top: 0.4rem;
}
body .abstract .text3 {
  width: 100%;
  font-size: 10px;
  margin-top: 0.373333rem;
  text-align: left;
  color: black;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
body .abstract .text4 {
  margin-top: 0.3rem;
  font-size: 0.32rem;
  width: 100%;
  text-align: left;
  color: red;
  display: inline-block;
}
body .abstract .text4 > i {
  font-size: 0.32rem;
}
body .abstract .text5 {
  width: 100%;
  font-size: 0.4rem;
  text-align: center;
  color: black;
  margin: 1.2rem 0px 0.4rem;
  font-weight: 800;
}
body .abstract .textBox {
  display: none;
}
body .abstract .textBoxActive {
  display: block;
}
body .abstract .chart {
  width: 100%;
  height: 5rem;
  background-color: #ededed;
  padding: 0.4rem 0.4rem;
  display: flex;
  justify-content: left;
  align-items: center;
  flex-wrap: wrap;
  border-radius: 0.533rem;
}
body .abstract .chart > div {
  width: 33%;
  text-align: center;
}
body .abstract .chart > div > p {
  color: #222222;
  font-size: 0.4rem;
  font-weight: 800;
}
body .abstract .chart > div > p:nth-child(2) {
  color: #838383;
  min-height: 0.5rem;
  font-size: 10px;
}
body .abstract .abstract-btn {
  width: 6rem;
  height: 0.827rem;
  background-color: #ededed;
  border-radius: 0.413rem;
  margin: 0.7rem auto 0px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}
body .abstract .abstract-btn > div {
  width: 30%;
  height: 100%;
  background-color: red;
  border-radius: 0.413rem;
  color: white;
  text-align: center;
  line-height: 0.827rem;
}
body .abstract .abstract-btn > input {
  width: 70%;
  height: 100%;
  background-color: #ededed;
  color: #6c6c6c;
  padding-left: 0.667rem;
}
body .abstract .hint {
  width: 100%;
  color: red;
  text-align: center;
  margin-top: 10px;
}
body .base {
  width: 100%;
  background-color: red;
  padding: 1.6rem 0.533rem;
  color: white;
}
body .base .base-img {
  width: 4rem;
  height: 2rem;
  margin: 1rem auto 0.5rem;
}
body .base .base-img > img {
  width: 100%;
  height: 100%;
}
body .base > ul {
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
body .base > ul > li {
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  text-align: center;
  font-size: 16px;
}
body .base > ul > li > div {
  height: 0px;
  width: 100%;
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;
}
body .base > ul .base-text {
  height: 1.146667rem;
  width: 100%;
  text-align: center;
  line-height: 1.2rem;
  position: relative;
  display: block;
  color: white;
  font-weight: 800;
}
body .base > ul .base-text > i {
  display: inline-block;
  position: absolute;
  right: 0.267rem;
  font-size: 0.48rem;
}
body .base > ul .base-text .iactivedown {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transition: -webkit-transform 0.3s linear;
  transition: transform 0.3s linear;
}
body .base > ul .base-text .iactiveup {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: -webkit-transform 0.3s linear;
  transition: transform 0.3s linear;
}
body .base .navigation {
  width: 100%;
  height: 38px;
  display: flex;
  justify-content: space-evenly;
  margin-top: 1.333333rem;
}
body .base .navigation > a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: red;
  overflow: hidden;
}
body .base .navigation > a > img {
  width: 100%;
  height: 100%;
}
body .base > p {
  margin-top: 1.6rem;
  width: 100%;
  text-align: center;
  font-size: 12px;
}
body .mbg {
  display: block;
  position: fixed;
  max-width: 414px;
  top: 0;
  left: 50%;
  width: 100%;
  height: 0;
  background-color: #383838;
  z-index: 200;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 1;
  transform: translateX(-50%);
}
body .mbg.active {
  height: 99.8%;
  border-bottom: 1px solid #ff0000;
}
body .msg {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background-color: black;
  z-index: 998;
  display: none;
}
body .msg .video {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 999;
  object-fit: contain;
}
body .close {
  position: fixed;
  top: 0px;
  right: 10px;
  color: white;
  font-size: 0.8rem;
  display: none;
  z-index: 999;
}
body .shadeActive {
  height: 100%;
  opacity: 1;
  transition: all 1s;
}
@media screen and (min-width: 320px) and (max-width: 374px) {
  /*!*iPhone < 5 Portrait*!*/
  .twonav .twonav-img {
    margin: 1.5rem auto 0px !important;
  }
  .twonav .vip {
    margin: 1.5rem auto 0.5rem !important;
  }
  .iconBox4 {
    left: 1.5rem !important;
  }
  .iconBox3 {
    right: 1.5rem !important;
  }
  .iconBox2 {
    left: 1.5rem !important;
  }
  .iconBox1 {
    right: 1.5rem !important;
  }
  .shade .language-switch {
    padding: 0.4rem 0.533333rem 0.4rem !important;
  }
  .shade .language-switch .title {
    font-size: 25px !important;
    line-height: 1rem !important;
    margin-top: 20px !important;
  }
  .shade .language-switch > p {
    font-size: 12px !important;
  }
}
@media screen and (min-height: 667px) and (max-height: 811px) {
  /*!*iPhone 6*!*/
  .shade .language-switch {
    padding: 0.4rem 0.533333rem 0.4rem !important;
  }
  .shade .language-switch .title {
    font-size: 25px !important;
    line-height: 1rem !important;
    margin-top: 20px !important;
  }
  .shade .language-switch > p {
    font-size: 12px !important;
  }
  .twonav .twonav-img {
    margin: 1.5rem auto 0px !important;
  }
  .twonav .vip {
    margin: 1.5rem auto 0.5rem !important;
  }
  .shade .language-switch {
    padding: 0.8rem 0.533333rem 0.4rem !important;
  }
}
@media screen and (min-width: 415px) and (max-width: 768px) {
  /*!*iPhone 6+ Portrait*!*/
  .twonav .vip {
    margin: 2rem auto 0.5rem !important;
  }
}
@media screen and (max-height: 530px) {
  .twonav .vip {
    margin: 0.5rem auto 0.5rem !important;
  }
  .shade .language-switch .title {
    font-size: 25px !important;
    line-height: 1rem !important;
    margin-top: 20px !important;
  }
  .shade .language-switch .text2 {
    display: none;
  }
}