#app {
  background: #f2f2f2;
}
#app header {
  padding-top: 0.56rem;
}
#app header .crumb-wrap {
  height: 0.56rem;
  line-height: 0.56rem;
  color: #2b2b2b;
  font-size: 0.144rem;
  background: #fff;
  border-radius: 0.08rem;
  padding-left: 0.272rem;
  margin: 0.16rem 0;
}
#app header .crumb-wrap a,
#app header .crumb-wrap span {
  color: #2b2b2b;
}
#app main {
  margin-bottom: 0.32rem;
}
#app main .fl-fr .fl-box {
  width: 10.56rem;
  background: #fff;
  border-radius: 0.08rem;
  padding: 0 0.448rem 0.4rem 0.448rem;
}
#app main .fl-fr .fl-box h1 {
  line-height: 1.04rem;
  height: 1.04rem;
  text-align: center;
  font-size: 0.24rem;
  color: #1d2736;
}
#app main .fl-fr .fl-box #table_box {
  width: 8.564rem;
  margin: 0 auto;
}
#app main .fl-fr .fl-box #table_box table {
  width: 100%;
  display: block;
  padding-top: 20px;
  border-bottom: 0.008rem solid #ededed;
  overflow: hidden;
  border-radius: 0 0 5px 5px;
}
#app main .fl-fr .fl-box #table_box table tbody {
  display: block;
}
#app main .fl-fr .fl-box #table_box table tbody tr {
  display: flex;
  transition: all 0.5s;
}
#app main .fl-fr .fl-box #table_box table tbody tr:nth-child(n+4):hover td {
  transition: all 0.5s;
  background: rgba(153, 107, 61, 0.6) !important;
  color: #fff !important;
}
#app main .fl-fr .fl-box #table_box table tbody tr:nth-child(1) td {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0.56rem;
  line-height: 0.56rem;
  border-top: 0.008rem solid #ededed;
  font-size: 0.16rem;
}
#app main .fl-fr .fl-box #table_box table tbody tr:nth-child(1) td:nth-child(2),
#app main .fl-fr .fl-box #table_box table tbody tr:nth-child(1) td:nth-child(3),
#app main .fl-fr .fl-box #table_box table tbody tr:nth-child(1) td:nth-child(4) {
  flex: 1;
}
#app main .fl-fr .fl-box #table_box table tbody tr:nth-child(1) td:nth-child(1) {
  border-radius: 0.04rem 0 0 0;
  background: #efefef;
  color: #333333;
  font-weight: 500;
  font-size: 0.16rem;
}
#app main .fl-fr .fl-box #table_box table tbody tr:nth-child(1) td:nth-child(2) {
  background: #efefef;
  color: #512f00;
}
#app main .fl-fr .fl-box #table_box table tbody tr:nth-child(1) td:nth-child(3) {
  background: #dde8ff;
  color: #2a45b7;
  position: relative;
}
#app main .fl-fr .fl-box #table_box table tbody tr:nth-child(1) td:nth-child(3):after {
  content: '人气';
  display: inline-block;
  position: absolute;
  right: 0;
  top: -0.08rem;
  background: linear-gradient(to right, #ff5651, #fe781c);
  color: #fff;
  font-size: 0.096rem;
  border-radius: 0 0.04rem 0 0.04rem;
  width: 0.48rem;
  height: 0.2rem;
  line-height: 0.2rem;
  text-align: center;
}
#app main .fl-fr .fl-box #table_box table tbody tr:nth-child(1) td:nth-child(4) {
  background: #fcf3dd;
  color: #fe700a;
}
#app main .fl-fr .fl-box #table_box table tbody tr:nth-child(1) td:last-child {
  border-radius: 0 0.04rem 0 0;
}
#app main .fl-fr .fl-box #table_box table tbody tr td {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0.528rem;
  font-size: 0.144rem;
  font-weight: bold;
}
#app main .fl-fr .fl-box #table_box table tbody tr td .iconduigou {
  font-size: 0.2rem;
}
#app main .fl-fr .fl-box #table_box table tbody tr td:nth-child(2),
#app main .fl-fr .fl-box #table_box table tbody tr td:nth-child(3),
#app main .fl-fr .fl-box #table_box table tbody tr td:nth-child(4) {
  flex: 1;
}
#app main .fl-fr .fl-box #table_box table tbody tr td:nth-child(1) {
  flex: 1;
  background: #fbfbfb;
  color: #595959;
  border-left: 0.008rem solid #ededed;
  font-weight: normal;
}
#app main .fl-fr .fl-box #table_box table tbody tr td:nth-child(2) {
  background: #fbfbfb;
  color: #583800;
}
#app main .fl-fr .fl-box #table_box table tbody tr td:nth-child(3) {
  background: #f5f9ff;
  color: #1965FE;
}
#app main .fl-fr .fl-box #table_box table tbody tr td:nth-child(4) {
  background: #fffcf4;
  color: #fe700a;
}
#app main .fl-fr .fl-box #table_box table tbody tr td:last-child {
  border-right: 0.008rem solid #ededed;
}
#app main .fl-fr .fl-box #table_box table tbody tr td .buy-btn {
  width: 1.92rem;
  height: 0.416rem;
  background: #ff6400;
  color: #fff;
  border-radius: 0.08rem;
  font-size: 0.16rem;
}
#app main .fl-fr .fl-box .more-btn .box {
  font-size: 0.16rem;
  color: #ababab;
  line-height: 0.56rem;
}
#app main .fl-fr .fl-box .more-btn .box .iconshangjiantou {
  display: inline-block;
  transform: rotate(180deg);
  width: 0.16rem;
  height: 0.16rem;
  background: #f9f9f9;
  border-radius: 50%;
  font-size: 0.096rem;
  position: relative;
  left: 0.08rem;
}
#app main .fl-fr .fl-box .more-btn .box .iconshangjiantou:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#app main .fl-fr .fl-box .dashed-line {
  margin: 0.528rem 0 0.096rem;
  border: 0;
  border-bottom: 0.008rem dashed #e3e3e3;
}
#app main .fl-fr .fl-box h3 {
  line-height: 0.76rem;
  font-size: 0.176rem;
  color: #171c22;
}
#app main .fl-fr .fl-box h3 i {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 0.08rem;
  box-shadow: 0 0 0.08rem rgba(0, 0, 0, 0.2);
  margin-right: 0.12rem;
  font-size: 0.2rem;
}
#app main .fl-fr .fl-box p {
  line-height: 0.28rem;
  font-size: 0.144rem;
  color: #454545;
  text-indent: 0.288rem;
}
#app main .fl-fr .fr-box {
  width: 3.6rem;
}
#app main .fl-fr .fr-box .box {
  width: 3.6rem;
  background: #fafafa;
  padding: 0 0.24rem;
  padding-top: 0.24rem;
  padding-bottom: 0.32rem;
  border-radius: 0.08rem;
}
#app main .fl-fr .fr-box .box.contact-us {
  width: 3.6rem;
  padding: 0.08rem 0.224rem 0.16rem 0.224rem;
}
#app main .fl-fr .fr-box .box.contact-us h2 {
  font-size: 0.224rem;
  color: #000;
  margin-bottom: 0.096rem;
  line-height: 0.56rem;
  border-bottom: 0.008rem solid #f0f0f0;
}
#app main .fl-fr .fr-box .box.contact-us strong {
  font-size: 0.176rem;
  line-height: 0.4rem;
  color: #323232;
  display: block;
}
#app main .fl-fr .fr-box .box.contact-us p,
#app main .fl-fr .fr-box .box.contact-us a {
  color: #8d8d8d;
  font-size: 0.16rem;
  line-height: 0.288rem;
}
