body {
  min-width: 320px;
  max-width: 750px;
  margin: 0px auto;
}
body .root {
  width: 100%;
  height: 100%;
  padding: 0px 0.533333rem;
}
body .root .titlebar {
  width: 100%;
  text-align: center;
  padding-top: 2.373333rem;
}
body .root .titlebar > p {
  font-size: 0.666667rem;
  color: black;
}
body .root .navbar {
  width: 100%;
  height: 1.466667rem;
  margin-top: 0.8rem;
  color: black;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body .root .navbar > div {
  width: 33%;
  height: 100%;
  margin-right: 0.133333rem;
  text-align: center;
  background-color: #ededed;
  border-radius: 0.4rem;
  display: table;
}
body .root .navbar > div > a {
  display: table-cell;
  vertical-align: middle;
}
body .root .navbar > div:nth-child(3) {
  margin-right: 0px;
}
body .root .navbar .active {
  background-color: red;
  color: white;
}
body .root .navbar .active > a {
  color: white;
}
body .root .goodsbar {
  width: 100%;
}
body .root .goodsbar .goodsTitle {
  width: 100%;
  height: 0.666667rem;
  display: flex;
  margin-top: 0.666667rem;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-around;
}
body .root .goodsbar .goodsTitle .text {
  height: 100%;
  flex: 1;
  padding: 0px 5px;
  font-size: 0.32rem;
  text-align: center;
  line-height: 0.666667rem;
  border-radius: 0.333333rem;
}
body .root .goodsbar .goodsTitle .text > a {
  color: black;
  display: inline-block;
  width: 100%;
  height: 100%;
}
body .root .goodsbar .goodsTitle .active {
  background-color: red;
  color: white;
}
body .root .goodsbar .goodsTitle .active > a {
  color: white;
}
body .root .goodsbar .goodslist {
  display: flex;
  flex-flow: column wrap;
  margin-top: 0.533333rem;
  align-items: center;
  /* Safari and Chrome */
  /* Firefox */
}
body .root .goodsbar .goodslist > div {
  width: 49%;
  margin-bottom: 0.133333rem;
  background-color: #ededed;
  border-radius: 0.4rem;
  break-inside: avoid;
  margin-right: 10px;
}
body .root .goodsbar .goodslist .goodstiny {
  height: 5.333333rem;
  padding: 0.4rem 0.266667rem 0.4rem 0.413333rem;
}
body .root .goodsbar .goodslist .goodstiny .shell {
  overflow-y: auto;
  overflow-x: none;
  position: relative;
  width: 100%;
  height: 100%;
}
body .root .goodsbar .goodslist .goodstiny .shell .goodstiny-box {
  z-index: 100;
}
body .root .goodsbar .goodslist .goodstiny .shell .goodstiny-box > .title {
  font-size: 14px;
  color: black;
}
body .root .goodsbar .goodslist .goodstiny .shell .goodstiny-box > .text {
  font-size: 14px;
  line-height: 0.6rem;
}
body .root .goodsbar .goodslist .goodstiny .shell::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  border-radius: 30px;
}
body .root .goodsbar .goodslist .goodstiny .shell::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 30px;
  background-color: #868686;
}
body .root .goodsbar .goodslist .goodstiny .shell::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  background-color: #f1f1f1;
  border-radius: 30px;
}
body .root .goodsbar .goodslist .goodsbig {
  height: 7.2rem;
}
body .root .goodsbar .goodslist .goodsbig .top {
  width: 100%;
  height: 75%;
}
body .root .goodsbar .goodslist .goodsbig .top > img {
  width: auto;
  height: 100%;
  max-width: auto;
  min-width: auto;
}
body .root .goodsbar .goodslist .goodsbig .bottom {
  width: 100%;
  height: 25%;
  position: relative;
}
body .root .goodsbar .goodslist .goodsbig .bottom > p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0.667rem;
  color: black;
  font-size: 0.32rem;
  text-align: left;
}
body .root .goodsbar .goodslist .goodsbig .bottom > div {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.4rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: red;
}
body .root .goodsbar .goodslist .goodsbig .bottom > div > i {
  color: white;
  font-size: 0.4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
@media screen and (min-width: 320px) and (max-width: 374px) {
  .goodsbig .bottom > div {
    width: 26px !important;
    height: 26px !important;
  }
}
@media screen and (max-height: 568px) {
  .root .goodsbar .goodsTitle .text {
    padding: 0px 7px !important;
  }
}