:root {
  --vi: #d21014;
  --el-color-primary: var(--vi);
  --el-color-primary-light-3: #ff9c38;
}

.el-button--primary {
  --el-button-hover-bg-color: var(--vi);
  --el-button-hover-border-color: var(--vi);
  --el-button-active-bg-color: var(--vi);
  --el-button-active-border-color: var(--vi);
}

.el-checkbox {
  --el-checkbox-input-width: 16px;
  --el-checkbox-input-height: 16px;
}

.el-checkbox .el-checkbox__inner::after {
  width: 4px;
  height: 9px;
}

.main-close {
  position: absolute;
  top: -1.3rem;
  right: -1.1rem;
  width: 2.5rem;
  height: 3rem;
  transform: rotate(-45deg);
  border-radius: 50%;
  background-color: rgba(255, 154, 58, 0.2);
  cursor: pointer;
}

.main-close img {
  position: absolute;
  bottom: 1.2rem;
  left: 0.3rem;
  transform: rotate(45deg);
}

.main-price {
  display: flex;
  align-items: baseline;
}

.main-price .ing {
  color: var(--vi);
}

.main-price .ing span {
  margin-left: 2px;
}

.main-price .before {
  margin-left: 0.3rem;
  position: relative;
  color: #333;
}

.main-price .before::after {
  content: "";
  position: absolute;
  top: 55%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  background-color: #333;
}

.main-noLogin .ing {
  display: flex;
  align-items: baseline;
  color: var(--vi);
  line-height: 1.2;
}

.main-noLogin .ing .tag {
  padding: 2px 4px;
  background-color: #FFEDEB;
  color: var(--vi);
  margin-right: 0.25rem;
}

.main-noLogin .ing .t {
  margin-left: 2px;
}

.main-noLogin .tip {
  margin-top: 6px;
  line-height: 1.4;
  color: #ff9c38;
}

.main-sup {
  display: block;
  line-height: 1;
  font-size: 85%;
  position: absolute;
  top: 2px;
  right: -0.5rem;
  padding: 1px 7px;
  background-color: rgba(236, 236, 236, 0.7);
  border-radius: 0.25rem;
}

.main-discount .ing {
  display: flex;
  align-items: baseline;
  color: #333;
  line-height: 1.4;
}

.main-discount .ing p {
  color: var(--vi);
}

.main-discount .before {
  margin-top: 2px;
  line-height: 1.4;
  color: #333;
}

.main-discount .before span {
  position: relative;
}

.main-discount .before span::after {
  content: "";
  position: absolute;
  top: 55%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #999;
}

.main-tit {
  color: #000;
  padding-left: 0.35rem;
  font-size: 0.75rem;
  line-height: 1;
  border-left: 4px solid var(--vi);
  font-family: HarmonyOS_Sans_SC_Regular;
}

.main-tit.white {
  color: #fff;
}

.ser-ban {
  margin-top: calc(-.2rem - 1px);
}

.ser-ban .intro {
  width: 65%;
  top: 47.5%;
}

.page-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-box .go {
  display: flex;
  margin-left: 0.25rem;
}

.page-box .go input {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: none;
  border: 1px solid rgba(210, 16, 20, 0.5);
  text-align: center;
}

.page-box .go .btn {
  margin-left: 0.25rem;
  width: 1.75rem;
  height: 1rem;
  border-radius: 0.5rem;
  text-align: center;
  line-height: 1rem;
  box-shadow: 0 0 0 1px #bdbdbd;
  cursor: pointer;
}

.page-box .go .btn:hover {
  color: var(--vi);
}

.noCont {
  margin-top: 0.25rem;
  background-color: #fff;
  padding: 3rem 0;
  text-align: center;
}

.noCont div {
  width: 2rem;
  margin: auto;
}

.noCont div img {
  width: 100%;
}

.noCont p {
  margin-top: 0.8rem;
  color: #000;
}

.el-pagination {
  justify-content: center;
}

.el-pagination button {
  width: 2rem;
  height: 1rem;
  border-radius: 0.5rem;
  background-color: #ffffff;
  box-shadow: 0 0 0 1px #bdbdbd;
}

.el-pagination .btn-prev {
  margin-right: 0.25rem;
}

.el-pagination .btn-next {
  margin-left: 0.25rem;
}

.el-pagination .el-pager li {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 0 0 1px #bdbdbd;
  margin-right: 0.25rem;
  font-family: "HarmonyOS_Sans_SC_Regular";
  color: #000;
}

.el-pagination .el-pager li:last-child {
  margin-right: 0;
  display: none;
}

.el-pagination .el-pager li:hover,
.el-pagination .el-pager li.is-active {
  background: linear-gradient(158deg, rgba(254, 161, 173, 0.6) -31.26%, #d21014 72.49%);
  color: #fff;
  font-family: "HarmonyOS_Sans_SC_Regular";
  box-shadow: none;
}

.el-breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: #fff;
}

.el-breadcrumb .el-breadcrumb__item .el-breadcrumb__inner {
  color: #fff;
}
.el-breadcrumb .el-breadcrumb__item .el-breadcrumb__inner a {
  color: #fff;
  font-weight: 500;
}

.el-breadcrumb.grey .el-breadcrumb__item .el-breadcrumb__inner {
  color: #666666;
}

.el-breadcrumb.grey .el-breadcrumb__item .el-breadcrumb__inner a {
  color: #666;
  font-weight: 500;
}

.el-breadcrumb .el-breadcrumb__item .el-breadcrumb__separator {
  color: #fff;
  font-size: 0;
}

.el-breadcrumb.grey .el-breadcrumb__item .el-breadcrumb__separator {
  color: #666666;
}

.el-breadcrumb .el-breadcrumb__item .el-breadcrumb__separator::after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(-45deg);
}

.el-breadcrumb.grey .el-breadcrumb__item .el-breadcrumb__separator::after {
  border-color: #666;
}

.index {
  margin-top: 0.2rem;
  background-color: #fbfbfb;
}

.index .hot {
  margin-top: 1rem;
}

.index .hot .item-box {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
}

.index .hot .item {
  width: 32.5%;
  height: 3.85rem;
  margin-right: 1.25%;
  display: flex;
  background-color: #f4f8fc;
  border-radius: 0.25rem;
  overflow: hidden;
  transition: all 0.4s;
}

.index .hot .item:nth-child(3n) {
  margin-right: 0;
}

.index .hot .item:nth-child(n+4) {
  margin-top: 0.45rem;
}

.index .hot .item .pic {
  position: relative;
  width: 4.35rem;
  height: 100%;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: #fff;
}

.index .hot .item .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.index .hot .item .pic p {
  position: absolute;
  bottom: 0.25rem;
  left: 50%;
  margin-left: -1.25rem;
  width: 2.5rem;
  height: 0.8rem;
  border-radius: 0.4rem;
  text-align: center;
  line-height: 0.8rem;
  background-color: var(--vi);
  color: #fff;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: all 0.4s;
}

.index .hot .item .intro {
  width: calc(100% - 4.35rem);
  padding: 0.55rem 0.6rem;
  position: relative;
}

.index .hot .item .intro .h {
  color: #3a3838;
  line-height: 1.5;
  height: 3em;
  overflow: hidden;
}

.index .hot .item .intro .price {
  margin-top: 0.4rem;
}

.index .hot .item .intro .icon {
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background-color: #ffedeb;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: all 0.4s;
}

.index .hot .item .intro .icon img {
  max-width: 70%;
  max-height: 70%;
  -o-object-fit: contain;
  object-fit: contain;
}

.index .hot .item:hover {
  background-color: #fff;
  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.08);
}

.index .hot .item:hover .pic p {
  opacity: 1;
  transform: translateY(0);
}

.index .hot .item:hover .intro .icon {
  opacity: 1;
}

.index .hot .other {
  position: relative;
  border-radius: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.index .hot .other::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(49, 49, 49, 0.5);
}

.index .hot .other .more {
  position: relative;
  z-index: 5;
}

.index .hot .other .more span {
  margin-left: 0.45rem;
}

.index .package {
  margin-top: 1.2rem;
}

.index .package .bar {
  margin-top: 0.75rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid #e1d4d3;
}

.index .package .bar .tab {
  font-family: "HarmonyOS_Sans_SC_Regular";
  display: flex;
}

.index .package .bar .tab span {
  position: relative;
  color: #606060;
  line-height: 1.2;
  cursor: pointer;
  padding-bottom: 0.3rem;
  margin-right: 1.5rem;
  transition: all 0.4s;
}

.index .package .bar .tab span:last-child {
  margin-right: 0;
}

.index .package .bar .tab span::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--vi);
  transition: all 0.4s;
}

.index .package .bar .tab span:hover {
  color: var(--vi);
}

.index .package .bar .tab span.active {
  color: var(--vi);
}

.index .package .bar .tab span.active::after {
  width: 100%;
}

.index .package .bar .more {
  display: flex;
  align-items: center;
  line-height: 1.2;
  color: #000;
  transition: all 0.4s;
}

.index .package .bar .more p {
  margin-right: 0.3rem;
}

.index .package .bar .more:hover {
  color: var(--vi);
}

.index .package .swiper-box {
  margin-top: 0.5rem;
  position: relative;
}

.index .package .swiper-box .swiper-button-prev,
.index .package .swiper-box .swiper-button-next {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: rgba(51, 51, 51, 0.2);
  color: #fff;
}

.index .package .swiper-box .swiper-button-prev::after,
.index .package .swiper-box .swiper-button-next::after {
  font-size: 0.4rem;
}

.index .package .swiper-box .swiper-button-prev {
  left: -0.5rem;
}

.index .package .swiper-box .swiper-button-next {
  right: -0.5rem;
}

.index .package .swiper-box .package-swiper .swiper-slide {
  width: 19%;
  margin-right: 1.25%;
  background-color: #f4f8fc;
  border-radius: 0.25rem;
  padding: 0.5rem;
  transition: all 0.4s;
}

.index .package .swiper-box .package-swiper .swiper-slide:last-child {
  margin-right: 0;
}

.index .package .swiper-box .package-swiper .swiper-slide .pic {
  width: 100%;
  height: 3.2rem;
  text-align: center;
}

.index .package .swiper-box .package-swiper .swiper-slide .pic img {
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.index .package .swiper-box .package-swiper .swiper-slide .h {
  margin-top: 0.55rem;
  color: #000;
  line-height: 1.5;
  font-family: "HarmonyOS_Sans_SC_Regular";
}

.index .package .swiper-box .package-swiper .swiper-slide .price {
  margin-top: 0.15rem;
}

.index .package .swiper-box .package-swiper .swiper-slide:hover {
  background-color: #fff;
  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.05);
}

.index .single {
  margin-top: 1rem;
}

.index .single .item-box {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
}

.index .single .item-box .item {
  width: 49.5%;
  margin-right: 1%;
}

.index .single .item-box .item:nth-child(2n) {
  margin-right: 0;
}

.index .single .item-box .item:nth-child(n+3) {
  margin-top: 0.75rem;
}

.index .single .item-box .item .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 1.15rem;
  padding: 0 0.2rem 0 0.5rem;
  background-color: #ffedeb;
}

.index .single .item-box .item .bar .h {
  font-family: "HarmonyOS_Sans_SC_Regular";
  color: #000;
  line-height: 1.4;
}

.index .single .item-box .item .bar .tab {
  display: flex;
  height: 100%;
}

.index .single .item-box .item .bar .tab span {
  height: 100%;
  line-height: 1.15rem;
  padding: 0 0.3rem;
  position: relative;
  color: #606060;
  cursor: pointer;
  transition: all 0.4s;
}

.index .single .item-box .item .bar .tab span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 0.3rem;
  background-color: var(--vi);
}

.index .single .item-box .item .bar .tab span:last-child::after {
  display: none;
}

.index .single .item-box .item .bar .tab span:hover {
  color: var(--vi);
}

.index .single .item-box .item .bar .tab span.active {
  background-color: var(--vi);
  color: #fff;
}

.index .single .item-box .item .li-box {
  display: none;
  flex-wrap: wrap;
  border: 1px solid #efefef;
}

.index .single .item-box .item .li-box.show {
  display: flex;
}

.index .single .item-box .item .li-box .li {
  width: 33.33%;
  height: 6.8rem;
  background-color: #fff;
  padding: 0.9rem 0.75rem 0.5rem 1rem;
  border-right: 1px solid #efefef;
  transition: all 0.4s;
}

.index .single .item-box .item .li-box .li:nth-child(3n) {
  border-right: none;
}

.index .single .item-box .item .li-box .li:nth-child(n+4) {
  border-top: 1px solid #efefef;
}

.index .single .item-box .item .li-box .li .pic {
  width: 100%;
  height: 2.3rem;
}

.index .single .item-box .item .li-box .li .pic img {
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.index .single .item-box .item .li-box .li .h {
  font-family: "HarmonyOS_Sans_SC_Regular";
  margin-top: 0.4rem;
  color: #000;
  line-height: 1.4;
}

.index .single .item-box .item .li-box .li .price {
  margin-top: 0.2rem;
}

.index .single .item-box .item .li-box .li:hover {
  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.05);
}

.index .solution {
  margin-top: 1rem;
}

.index .solution .swiper-box {
  margin-top: 0.7rem;
}

.index .solution .swiper-box .swiper-button-prev,
.index .solution .swiper-box .swiper-button-next {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: rgba(51, 51, 51, 0.2);
  color: #fff;
}

.index .solution .swiper-box .swiper-button-prev::after,
.index .solution .swiper-box .swiper-button-next::after {
  font-size: 0.4rem;
}

.index .solution .swiper-box .swiper-button-prev {
  left: -0.5rem;
}

.index .solution .swiper-box .swiper-button-next {
  right: -0.5rem;
}

.index .solution .swiper-box .solution-swiper .swiper-slide {
  width: 32%;
  height: 7rem;
  margin-right: 2%;
  color: #fff;
  padding: 0.9rem 0.6rem;
  display: flex;
  align-items: center;
}

.index .solution .swiper-box .solution-swiper .swiper-slide::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .2);
}

.index .solution .swiper-box .solution-swiper .swiper-slide:last-child {
  margin-right: 0;
}

.index .solution .swiper-box .solution-swiper .swiper-slide .h {
  font-family: "HarmonyOS_Sans_SC_Medium";
  z-index: 3;
  text-align: center;
  transition: all 0.4s;
}

.index .solution .swiper-box .solution-swiper .swiper-slide .cont {
  position: relative;
  z-index: 2;
  line-height: 1.4;
  height: auto;
  width: 100%;
  /*text-align: center;*/
  overflow-y: auto;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: all 0.4s;
}

.index .solution .swiper-box .solution-swiper .swiper-slide .cont::-webkit-scrollbar {
  width: 3px;
}

.index .solution .swiper-box .solution-swiper .swiper-slide .cont::-webkit-scrollbar-thumb {
  background: #fff;
}

.index .solution .swiper-box .solution-swiper .swiper-slide:hover .h {
  opacity: 0;
  z-index: -1;
}

.index .solution .swiper-box .solution-swiper .swiper-slide:hover .cont {
  opacity: 1;
  transform: translateY(0);
}

.header {
  position: relative;
  z-index: 15;
  background-color: rgba(255, 255, 255, 0.57);
}

.header .top {
  background-color: #f3f3f3;
  height: 1.1rem;
}

.header .top .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header .top .tel {
  color: #000000;
}

.header .top .info {
  display: flex;
  align-items: center;
  height: 100%;
}

.header .top .tips {
  color: var(--vi);
  margin-right: 0.5rem;
}

.header .top .item {
  display: flex;
  color: #000000;
  margin-right: 0.5rem;
}

.header .top .item span {
  color: var(--vi);
}

.header .top .name {
  display: flex;
  align-items: center;
  color: #000000;
  margin-right: 1.25rem;
}

.header .top .name span {
  width: -moz-max-content;
  width: max-content;
  height: 20px;
  padding: 0 0.2rem;
  border-radius: 10px;
  background-color: rgba(255, 154, 58, 0.2);
  margin-right: 0.2rem;
}

.header .top .name span img {
  width: auto;
}

.header .top .name.vip span {
  background-color: rgba(255, 65, 58, 0.2);
}

.header .top .out {
  color: #000000;
  margin-right: 1rem;
  cursor: pointer;
}

.header .top .link {
  display: flex;
  margin-right: 2.55rem;
}

.header .top .link .login {
  color: #000000;
}

.header .top .link .register {
  color: var(--vi);
  margin-left: 0.4rem;
}

.header .top .user {
  position: relative;
  height: 100%;
  color: #666;
  display: flex;
  align-items: center;
  z-index: 5;
}

.header .top .user p {
  margin-right: 0.15rem;
}

.header .top .user .sli-cont {
  position: absolute;
  top: 100%;
  left: 0;
  width: -moz-max-content;
  width: max-content;
  background-color: #fff;
  box-shadow: 0 0.1rem 0.2rem rgba(222, 222, 222, 0.2);
  transform: translateY(0.5rem);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s;
}

.header .top .user .sli-cont a {
  display: block;
  height: 0.8rem;
  padding: 0 0.5rem 0 0.3rem;
  line-height: 0.8rem;
  border-bottom: 1px solid #ededed;
  color: #333;
  transition: all 0.4s;
}

.header .top .user .sli-cont a:last-child {
  border-bottom: none;
}

.header .top .user .sli-cont a:hover {
  color: var(--vi);
}

.header .top .user:hover .sli-cont {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header .btm {
  padding: 0.6rem 0 0.9rem;
  position: sticky;
  top: 0;
}

.header .btm .wrap {
  display: flex;
  justify-content: space-between;
}

.header .btm .logo {
  width: 8.8rem;
}

.header .btm .logo img {
  width: 100%;
}

.header .btm .search {
  width: 48%;
  padding-top: 0.2rem;
}

.header .btm .search .form {
  display: flex;
  width: 100%;
  height: 1rem;
  border: 1px solid rgba(210, 16, 20, 0.5);
  border-radius: 0.5rem;
  padding: 0.1rem;
}

.header .btm .search .form input {
  width: calc(100% - 2rem);
  height: 100%;
  padding: 0 0.4rem;
  background: none;
}

.header .btm .search .form button {
  width: 2rem;
  height: 100%;
  background-color: var(--vi);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.header .btm .search .form button span {
  display: flex;
  width: 0.3rem;
  margin-right: 0.3rem;
}

.header .btm .search .keys {
  margin-top: 0.25rem;
  padding: 0 0.5rem;
  display: flex;
}

.header .btm .search .keys p {
  color: #000;
}

.header .btm .search .keys a {
  color: #333;
  margin-right: 0.4rem;
  transition: all 0.4s;
}

.header .btm .search .keys a:last-child {
  margin-right: 0;
}

.header .btm .search .keys a:hover {
  color: var(--vi);
}

.header .btm .contact {
  display: flex;
  padding-top: 0.2rem;
}

.header .btm .contact .li {
  position: relative;
  z-index: 4;
  width: 3.35rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #bbbbbb;
  color: #000;
  border-radius: 0.5rem;
  margin-right: 0.45rem;
}

.header .btm .contact .li:last-child {
  margin-right: 0;
}

.header .btm .contact .li .icon {
  width: 0.4rem;
  margin-right: 0.4rem;
}

.header .btm .contact .li .icon img {
  width: 100%;
}

.header .btm .contact .li .code {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0.2rem;
  padding: 0.25rem 0.4rem;
  background-color: #fff;
  text-align: center;
  border: 1px solid #eeeeee;
  opacity: 0;
  transform: translateY(0.5rem);
  visibility: hidden;
  transition: all 0.4s;
}

.header .btm .contact .li .code::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0.4rem;
  border-bottom: 5px solid #eeeeee;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.header .btm .contact .li .code::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: calc(0.4rem + 1px);
  border-bottom: 4px solid #fff;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.header .btm .contact .li .code div {
  width: 1.85rem;
  margin: 0 auto;
}

.header .btm .contact .li .code div img {
  width: 100%;
}

.header .btm .contact .li .code p {
  margin-top: 0.2rem;
  color: #000;
}

.header .btm .contact .li:hover .code {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.footer {
  background-color: #f9f9f9;
  z-index: 10;
}

.footer .box {
  padding: 1.15rem 0 0;
  display: flex;
  justify-content: space-between;
}

.footer .box .logo {
  width: 4.85rem;
}

.footer .box .tel {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  color: var(--vi);
}

.footer .box .tel span {
  width: 0.55rem;
  margin-right: 0.4rem;
}

.footer .box .tel span img {
  width: 100%;
}

.footer .box .online {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  width: -moz-max-content;
  width: max-content;
  height: 0.75rem;
  background-color: var(--vi);
  color: #fff;
  border-radius: 0.4rem;
  font-size: 0.4rem;
}

.footer .box .online span {
  width: 14px;
  margin-right: 0.35rem;
}

.footer .mid {
  display: flex;
  padding-top: 0.5rem;
}

.footer .mid .nav {
  line-height: 1.6;
  margin-right: 3rem;
}

.footer .mid .nav:last-child {
  margin-right: 0;
}

.footer .mid .nav p {
  color: #000;
  margin-bottom: 0.5rem;
  font-family: "HarmonyOS_Sans_SC_Regular";
  font-size: 0.45rem;
}

.footer .mid .nav a {
  display: block;
  margin-block: 0.25rem;
  color: #333;
  transition: all 0.4s;
  font-size: 0.4rem;
}

.footer .mid .nav a:last-child {
  margin-bottom: 0;
}

.footer .mid .nav a:hover {
  color: var(--vi);
}

.footer .code {
  text-align: center;
  color: #000;
}

.footer .code div {
  width: 2.5rem;
}

.footer .code div img {
  width: 100%;
}

.footer .code p {
  margin-top: 0.25rem;
  font-size: 0.4rem;
}

.footer .tips {
  margin-top: 0.65rem;
  font-size: 0.4rem;
}

.footer .btm {
  margin-top: 0.75rem;
  border-top: 1px solid rgba(169, 169, 170, 0.25);
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: 0.4rem;
}

.footer .btm .link {
  display: flex;
}

.footer .btm .link a {
  position: relative;
  color: #000000;
  padding-right: 0.3rem;
  margin-right: 0.3rem;
  transition: all 0.4s;
}

.footer .btm .link a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 0.2rem;
  background-color: #717171;
}

.footer .btm .link a:last-child {
  padding-right: 0;
  margin-right: 0;
}

.footer .btm .link a:last-child::after {
  display: none;
}

.footer .btm .link a:hover {
  color: var(--vi);
}

.footer .btm .copyright a {
  color: #666;
}

.bar .container {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.bar .lf {
  position: relative;
  width: 7.35rem;
  background-color: #fff;
}

.bar .lf .tit {
  display: flex;
  align-items: center;
  padding: 0 0.6rem;
  width: 100%;
  height: 1.25rem;
  color: #fff;
  background-color: var(--vi);
}

.bar .lf .tit span {
  width: 0.45rem;
  margin-right: 0.15rem;
}

.bar .lf .tit img {
  width: 100%;
}

.bar .lf .item-box {
  width: 100%;
  line-height: 1.6;
}

.bar .lf .item {
  /*padding: 0.15rem 0.75rem 0.15rem 1rem;*/
  /*display: flex;*/
  /*flex-wrap: wrap;*/
  /*position: relative;*/
  /*gap: calc((100% - 12em) / 2);*/
  /*transition: all 0.4s;*/
  padding: 0.3rem 0.2rem 0.3rem 0.6rem;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  gap: 0rem 0.4rem;
  transition: all 0.4s;
  border-bottom: 1px solid #99999953;
}

.bar .lf .item::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.3rem;
  width: 0.2rem;
  height: 0.2rem;
  border-top: 1px solid var(--vi);
  border-right: 1px solid var(--vi);
  transform: translateY(-50%) rotate(45deg);
  opacity: 0;
  transition: all 0.4s;
}

.bar .lf .item a {
  /*min-width: 4em;*/
  color: #000;
  transition: all 0.4s;
  line-height: 2;
}

.bar .lf .item:hover {
  background-color: #ffedeb;
}

.bar .lf .item:hover::after {
  opacity: 1;
}

.bar .lf .item:hover a {
  color: var(--vi);
}

.bar .lf .pos-box :hover .item {
  background-color: #ffedeb;
}

.bar .lf .pos-box :hover .item::after {
  opacity: 1;
}

.bar .lf .pos-box :hover .item a {
  color: var(--vi);
}

.bar .mid {
  width: 18.65rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bar .mid .mid-swiper {
  width: 100%;
  height: 10.2rem;
}

.bar .mid .mid-swiper .button-prev,
.bar .mid .mid-swiper .button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0.8rem;
  z-index: 5;
  cursor: pointer;
  height: 0.8rem;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: all 0.5s;
}

.bar .mid .mid-swiper .button-prev img,
.bar .mid .mid-swiper .button-next img {
  width: 50%;
}

.bar .mid .mid-swiper .button-prev {
  left: 0.2rem;
}

.bar .mid .mid-swiper .button-next {
  right: 0.2rem;
}

.bar .mid .mid-swiper:hover .button-prev {
  left: 0.6rem;
  opacity: 1
}

.bar .mid .mid-swiper:hover .button-next {
  right: 0.6rem;
  opacity: 1
}

.bar .mid .mid-swiper .swiper-pagination {
  bottom: 0.35rem;
  line-height: 1;
}

.bar .mid .mid-swiper .swiper-pagination .swiper-pagination-bullet {
  width: 0.75rem;
  height: 2px;
  margin: 0 0.1rem;
  background-color: #d9d9d9;
}

.bar .mid .mid-swiper .swiper-slide {
  width: 100%;
  height: 100%;
  margin-right: 1rem;
}

.bar .mid .mid-swiper .swiper-slide:last-child {
  margin-right: 0;
}

.bar .mid .mid-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.bar .mid .img-box {
  margin-top: 0.25rem;
  display: flex;
  justify-content: space-between;
}

.bar .mid .img-box .item {
  width: 49%;
  height: 2.4rem;
  border-radius: 0.15rem;
  position: relative;
  overflow: hidden;
}

.bar .mid .img-box .item .info {
  position: relative;
  z-index: 3;
  padding: 0.4rem 0.8rem;
}

.bar .mid .img-box .item .h {
  width: -moz-max-content;
  width: max-content;
  font-family: "youshe";
  background: linear-gradient(109deg, #e79a71 6.93%, #c55923 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bar .mid .img-box .item .more {
  display: block;
  margin-top: 0.25rem;
  width: 1.7rem;
  height: 0.55rem;
  text-align: center;
  line-height: 0.55rem;
  color: #fff;
  border-radius: 0.1rem;
  background-color: #f38955;
}

.bar .mid .img-box .item:nth-child(2) .h {
  background: linear-gradient(107deg, #fa932c -10.96%, #fb5d3b 101.47%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bar .mid .img-box .item:nth-child(2) .more {
  background-color: #f36855;
}

.bar .rg {
  width: calc(100% - 7.35rem - 18.65rem - 0.4rem);
  background-image: url("../img/4.png");
  padding: 0.65rem 0.4rem 0.4rem;
}

.bar .rg .top {
  border-radius: 0.25rem;
  padding-bottom: 1.25rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 21%, rgba(255, 255, 255, 0.7) 100%);
}

.bar .rg .info {
  display: flex;
  align-items: center;
  padding-left: 4px;
  margin-bottom: 0.75rem;
}

.bar .rg .info .pic {
  width: 1.5rem;
  height: 1.5rem;
  position: relative;
}

.bar .rg .info .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.bar .rg .info .pic p {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1.325rem;
  width: 60px;
  height: 0.35rem;
  height: 18px;
  border-radius: 0.2rem;
  background-color: rgba(255, 255, 255, 0.76);
  font-size: 9px;
  color: #606060;
  text-align: center;
}

.bar .rg .info .con {
  width: calc(100% - 1.5rem);
  padding-left: 0.3rem;
}

.bar .rg .info .con .not-login .h {
  font-family: "HarmonyOS_Sans_SC_Regular";
  color: #000;
  line-height: 1.2;
  font-size: 0.45rem;
}

.bar .rg .info .con .not-login .btn {
  margin-top: 0.2rem;
  position: relative;
  display: flex;
  width: -moz-max-content;
  width: max-content;
}

.bar .rg .info .con .not-login .btn a {
  color: #606060;
  padding-right: 0.15rem;
  margin-right: 0.15rem;
  border-right: 1px solid #606060;
  transition: all 0.4s;
  font-size: 0.4rem;
}

.bar .rg .info .con .not-login .btn a:last-child {
  padding-right: 0;
  margin-right: 0;
  border-right: none;
}

.bar .rg .info .con .not-login .btn a:hover {
  color: var(--vi);
}

.bar .rg .info .con .not-login .tips {
  position: absolute;
  bottom: 4px;
  left: 100%;
  margin-left: 0.2rem;
  color: #fff;
  padding: 3px;
  border-radius: 1px;
  font-size: 10px;
  background-color: #ff9c38;
  width: -moz-max-content;
  width: max-content;
  line-height: 1;
}

.bar .rg .info .con .not-login .tips::after {
  content: "";
  position: absolute;
  top: 10%;
  right: 100%;
  border-right: 3px solid #ff9c38;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
}

.bar .rg .info .con .login {
  line-height: 1.2;
}

.bar .rg .info .con .login .h {
  color: var(--vi);
}

.bar .rg .info .con .login .name {
  margin-top: 6px;
  color: #000;
}

.bar .rg .info .con .login .id {
  margin-top: 6px;
  color: #333;
}

.bar .rg .discount {
  background-image: url("../img/15.png");
  width: 100%;
  border-radius: 0.25rem;
  padding: 0.45rem 0.55rem;
  color: #fff;
}

.bar .rg .discount .txt {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
}

.bar .rg .discount .txt span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(314deg, #ce4800 -7.68%, rgba(252, 248, 211, 0.47) 81.46%);
  margin-right: 3px;
  position: relative;
}

.bar .rg .discount .txt span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 5px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

.bar .rg .discount .el-progress {
  margin-top: 0.4rem;
}

.bar .rg .discount .el-progress__text {
  display: none;
}

.bar .rg .discount .el-progress-bar__outer {
  background: rgba(234, 248, 255, 0.8);
}

.bar .rg .discount .el-progress-bar__inner {
  background: linear-gradient(90deg, #ffe0c0 0%, #f99939 100%);
}

.bar .rg .intro {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px dashed rgba(153, 153, 153, 0.3);
  padding-top: 1.1rem;
}

.bar .rg .intro .item {
  width: 33.33%;
  text-align: center;
}

.bar .rg .intro .item:nth-child(n+4) {
  margin-top: 0.45rem;
}

.bar .rg .intro .item span {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  background: linear-gradient(158deg, rgba(254, 161, 173, 0.6) -31.26%, #d21014 72.49%);
}

.bar .rg .intro .item span img {
  max-width: 70%;
  max-height: 70%;
  -o-object-fit: contain;
  object-fit: contain;
}

.bar .rg .intro .item p {
  margin-top: 4px;
  color: #000;
  font-size: 0.4rem;
}

.bar .rg .btm {
  margin-top: 0.3rem;
  display: flex;
  justify-content: space-between;
}

.bar .rg .btm .item {
  position: relative;
  width: calc((100% - 0.2rem) / 2);
  height: 3.25rem;
  background-color: #fff;
  border-radius: 0.25rem;
  padding: 0.45rem 0.4rem;
}

.bar .rg .btm .item .h {
  font-family: "HarmonyOS_Sans_SC_Regular";
  color: #000;
  font-size: 0.4rem;
  line-height: 1.2;
}

.bar .rg .btm .item .txt {
  margin-top: 4px;
  color: #000000;
  font-size: 11px;
  line-height: 1;
}

.bar .rg .btm .item .arr {
  /*margin-top: 0.95rem;*/
  position: absolute;
  bottom: .4rem;
  left: .4rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: rgba(255, 91, 95, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bar .rg .btm .item .icon {
  position: absolute;
  bottom: 0.4rem;
  right: 0.5rem;
  width: 1.4rem;
  height: 1.05rem;
  text-align: center;
}

.bar .rg .btm .item .icon img {
    max-height: 100%;
    object-fit: contain;
}

.bar .rg .btm .item .icon::after {
  content: "";
  position: absolute;
  top: 6%;
  left: 50%;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  /*background: linear-gradient(180deg, rgba(255, 91, 95, 0) 0%, rgba(255, 91, 95, 0.11) 28.57%, rgba(255, 91, 95, 0.6) 100%);*/
  transform: translateX(-50%) rotateX(70deg);
  background: linear-gradient(180deg, rgba(255, 222, 91, 0.00) 0%, rgba(255, 91, 95, 0.11) 28.57%, rgba(255, 222, 91, 0.60) 100%);
}

.bar .rg .btm .item:nth-child(2) .icon::after {
    background: linear-gradient(180deg, rgba(91, 239, 255, 0.00) 0%, rgba(91, 176, 255, 0.11) 28.57%, rgba(91, 239, 255, 0.60) 100%);
}

.bar .rg.contract .info {
  margin-bottom: 0.15rem;
}

.bar .rg.contract .info .con .login .h {
  color: #b25624;
}

.bar .rg.contract .rg .intro {
  padding-top: 0.5rem;
  border-top: none;
}

.bar .dialog {
  position: absolute;
  top: 0;
  left: calc(100% + 0.2rem);
  width: 18.65rem;
  padding: 0.5rem 0;
  background-color: #fff;
  box-shadow: 0 0 0.55rem rgba(31, 31, 31, 0.06);
  z-index: 20;
}

.bar .dialog .el-scrollbar {
  height: 10.75rem;
  padding: 0 0.75rem 0 0.6rem;
}

.bar .dialog .el-scrollbar__bar.is-vertical {
  width: 2px;
}

.bar .dialog .el-scrollbar__thumb {
  background: var(--vi);
  opacity: 1;
}

.bar .dialog .list {
  margin-bottom: 0.5rem;
}

.bar .dialog .list:last-child {
  margin-bottom: 0;
}

.bar .dialog .list .h {
  color: #000;
}

.bar .dialog .list .box {
  margin-top: 0.1rem;
  border-top: 1px solid rgba(210, 16, 20, 0.25);
  padding-top: 0.2rem;
  display: flex;
  flex-wrap: wrap;
}

.bar .dialog .list .li {
  position: relative;
  color: #606060;
  margin-right: 0.6rem;
  transition: all 0.4s;
  line-height: 1.8;
}

.bar .dialog .list .li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 0.15rem;
  height: 0.15rem;
  border-top: 1px solid #d21014;
  border-right: 1px solid #d21014;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0;
  transition: all 0.4s;
}

.bar .dialog .list .li:last-child {
  margin-right: 0;
}

.bar .dialog .list .li:hover {
  color: var(--vi);
  padding-right: 0.25rem;
}

.bar .dialog .list .li:hover::after {
  opacity: 1;
}

.bar .carousel-swiper {
  margin-top: 0.35rem;
  width: 100%;
  height: 1rem;
  background-color: #eb9b7d;
  padding: 0 0.5rem;
}

.bar .carousel-swiper .swiper-wrapper {
  transition-timing-function: linear;
}

.bar .carousel-swiper .swiper-slide {
  width: -moz-max-content;
  width: max-content;
  margin: 0 1.1rem;
  color: #fff;
  line-height: 1rem;
}

.partner {
  margin-top: 1rem;
  position: relative;
  padding: 1.3rem 0 1.7rem;
}

.partner .wrap {
  position: relative;
  z-index: 3;
  padding: 0 1rem;
}

.partner .wrap .tit {
  font-family: HarmonyOS_Sans_SC_Regular;
}

.partner .logo-swiper {
  margin-top: 0.75rem;
}

.partner .logo-swiper2 {
  margin-top: 0.35rem;
}

.partner .logo-arr .swiper-wrapper {
  transition-timing-function: linear;
}

.partner .logo-arr .swiper-slide {
  width: 13%;
  width: 8.1rem;
  height: 2.3rem;
  height: 3.55rem;
  margin-right: 1.5%;
  border-radius: 0.2rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner .logo-arr .swiper-slide:last-child {
  margin-right: 0;
}

.partner .logo-arr .swiper-slide img {
  max-width: 70%;
  max-height: 70%;
  -o-object-fit: contain;
  object-fit: contain;
}

.indexBtmBar {
  padding: 1.2rem 0;
}

.indexBtmBar .wrap {
  display: flex;
}

.indexBtmBar .link {
  font-family: "HarmonyOS_Sans_SC_Medium";
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  border-right: 1px solid rgba(102, 102, 102, 0.4);
}

.indexBtmBar .link:last-child {
  border-right: none;
}

.indexBtmBar .link .icon {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background-color: var(--vi);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.4rem;
}

.indexBtmBar .link .icon img {
  max-width: 70%;
  max-height: 70%;
  -o-object-fit: contain;
  object-fit: contain;
}

.tab-bar {
  background-color: rgba(255, 255, 255, 0.57);
  padding: 0 0.5rem 0.2rem 0.4rem;
  font-family: HarmonyOS_Sans_SC_Regular;
}

.tab-bar .wrap {
  display: flex;
  /*gap: .93rem;*/
  justify-content: space-between;
  border-bottom: 1px solid #e1d4d3;
}

.tab-bar .item {
  position: relative;
  z-index: 10;
}

.tab-bar .link {
  display: block;
  color: #000;
  padding-bottom: 0.4rem;
  position: relative;
  transition: all 0.4s;
}

.tab-bar .link img {
    width: 3rem;
}

.tab-bar .item::after {
  content: "";
  position: absolute;
  /*bottom: -1px;*/
  /*left: 0;*/
  /*width: 0;*/
  /*height: 2px;*/
  /*background-color: var(--vi);*/
  transition: all 0.4s;
  top: 0;
  left: 0;
  width: 0;
  height: calc(100% - .4rem);
  background-color: var(--vi);
  z-index: -1;
}

.tab-bar .link:last-child {
  margin-right: 0;
}

.tab-bar .link:hover {
  color: var(--vi);
}

.tab-bar .item.active a {
  /*color: var(--vi);*/
  color: #fff;
  padding: 0 .3rem;
}

.tab-bar .item.active::after {
  width: 100%;
}

.tab-bar .drop-down {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -1.65rem;
  width: 3.3rem;
  background: #fff;
  padding: 0 4px;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(222, 222, 222, .2);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(.5rem);
  transition: all .4s;
}

.tab-bar .drop-down a {
  display: block;
  position: relative;
  width: 100%;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  color: #999999;
  position: relative;
  border-bottom: 1px solid #EDEDED;
  z-index: 1;
  transition: all .4s;
}

.tab-bar .drop-down a::after {
  content: "";
  position: absolute;
  top: 0;
  left: -4px;
  width: calc(100% + 8px);
  height: 50%;
  background: linear-gradient(to bottom, rgba(226, 105, 107, .65), #fff);
  opacity: 0;
  z-index: -1;
  transition: all .4s;
}

.tab-bar .drop-down a span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  transition: all .4s;
}

.tab-bar .drop-down a span::before,
.tab-bar .drop-down a span::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: .45rem;
  height: .25rem;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.tab-bar .drop-down a span::before {
  left: .2rem;
  background-image: url(../img/137.png);
  
}

.tab-bar .drop-down a span::after {
  right: .2rem;
  background-image: url(../img/138.png);
}

.tab-bar .drop-down a:hover {
  color: var(--vi);
}

.tab-bar .drop-down a:hover span {
  opacity: 1;
}

.tab-bar .drop-down a:last-child {
  border-bottom: none;
}

.tab-bar .item:hover .drop-down {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.brand-page {
  padding: 1.05rem 0 1.5rem;
  background-color: #fbfbfb;
}

.brand-page .li-box {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
}

.brand-page .li-box .li {
  width: 23.5%;
  margin-bottom: 1rem;
}

.brand-page .li-box .li .pic {
  width: 100%;
  height: 4rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s;
}

.brand-page .li-box .li .pic img {
  max-width: 70%;
  max-height: 70%;
  -o-object-fit: contain;
  object-fit: contain;
}

.brand-page .li-box .li .h {
  font-family: "HarmonyOS_Sans_SC_Regular";
  margin-top: 0.5rem;
  color: #000;
  line-height: 1.2;
}

.brand-page .li-box .li:hover .pic {
  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.08);
}

.brand-info {
  padding: 0.25rem 0 1.5rem;
  background-color: #fbfbfb;
  position: relative;
}

.brand-info .pos-cont {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.brand-info .pos-cont img {
  width: 100%;
}

.brand-info .wrap {
  position: relative;
  z-index: 3;
}

.brand-info .top-name {
  margin-top: 0.6rem;
  display: flex;
  align-items: center;
  color: #fff;
}

.brand-info .top-name .pic {
  width: 5.25rem;
  height: 3.2rem;
  background-color: #fff;
  box-shadow: 0 0 0.15rem rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.75rem;
}

.brand-info .top-name .pic img {
  max-width: 70%;
  max-height: 70%;
  -o-object-fit: contain;
  object-fit: contain;
}

.brand-info .tab {
  margin-top: calc(0.6rem + 1px);
  display: flex;
  width: 100%;
  height: 1.25rem;
  background-color: #fff;
  padding: 0 2px;
  font-family: "HarmonyOS_Sans_SC_Regular";
}

.brand-info .tab span {
  position: relative;
  width: -moz-max-content;
  width: max-content;
  line-height: 1.25rem;
  padding: 0 0.3rem;
  margin-right: 0.3rem;
  color: #000;
  cursor: pointer;
  transition: all 0.4s;
}

.brand-info .tab span:last-child {
  margin-right: 0;
}

.brand-info .tab span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: var(--vi);
  transition: all 0.4s;
}

.brand-info .tab span:hover {
  color: var(--vi);
}

.brand-info .tab span.active {
  color: var(--vi);
}

.brand-info .tab span.active::after {
  width: 100%;
}

.brand-info .intro {
  margin-top: 0.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.35rem;
  background-color: #fff;
}

.brand-info .intro .content {
  color: #000000;
  line-height: 1.5;
  width: calc(100% - 2.05rem);
  max-height: 4.5em;
  overflow: hidden;
}

.brand-info .intro .content.show {
  max-height: fit-content;
}

.brand-info .intro .more {
  display: flex;
  align-items: center;
  color: #000;
  cursor: pointer;
}

.brand-info .intro .more p {
  margin-right: 0.25rem;
}

.brand-info .intro .more.active span {
  transform: rotate(180deg);
}

.brand-info .leading {
  margin-top: 0.5rem;
  position: relative;
  padding: 0.35rem;
  background-color: #fff;
  line-height: 1.5;
}

.brand-info .leading .h {
  color: #000;
}

.brand-info .leading .txt {
  margin-top: 0.15rem;
  color: #000000;
  line-height: 1.5;
  max-height: 4.5em;
  overflow: hidden;
}

.brand-info .leading .txt.show {
  max-height: fit-content;
}

.brand-info .leading .more {
  position: absolute;
  right: 0.35rem;
  top: 0.35rem;
  display: flex;
  align-items: center;
  color: #000;
  cursor: pointer;
}

.brand-info .leading .more p {
  margin-right: 0.25rem;
}

.brand-info .leading .more.active span {
  transform: rotate(180deg);
}

.brand-info .container {
  margin-top: 0.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.brand-info .container .left {
  width: 21.5%;
  position: sticky;
  top: 1rem;
}

.brand-info .container .left .h {
  width: 100%;
  height: 1.15rem;
  background-color: var(--vi);
  color: #fff;
  text-align: center;
  line-height: 1.15rem;
}

.brand-info .container .left .handle-box {
  background-color: #fff;
}

.brand-info .container .left .handle-box .item {
  width: 100%;
  height: 1.15rem;
  position: relative;
  padding: 0 1rem;
  line-height: 1.15rem;
  color: #000;
  cursor: pointer;
  transition: all 0.4s;
}

.brand-info .container .left .handle-box .item::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  width: 2px;
  height: 0;
  border-radius: 2px;
  background-color: var(--vi);
  transition: all 0.4s;
}

.brand-info .container .left .handle-box .item:hover {
  color: var(--vi);
}

.brand-info .container .left .handle-box .item.active {
  color: var(--vi);
  background-color: #ffedeb;
}

.brand-info .container .left .handle-box .item.active::after {
  height: 0.75rem;
}

.brand-info .container .right {
  width: calc(78.5% - 0.4rem);
}

.brand-info .container .right .info {
  height: 1.15rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-info .container .right .info .sort {
  height: 100%;
  display: flex;
}

.brand-info .container .right .info .sort .item {
  width: 1.75rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  cursor: pointer;
  transition: all 0.4s;
}

.brand-info .container .right .info .sort .item svg {
  margin-left: 0.25rem;
  fill: #333;
  width: 7px;
  height: 12px;
  transform: rotate(180deg);
}

.brand-info .container .right .info .sort .item:hover {
  color: var(--vi);
}

.brand-info .container .right .info .sort .item.active {
  background-color: #ffedeb;
  color: var(--vi);
}

.brand-info .container .right .info .sort .item.active svg {
  transform: rotate(0);
  fill: var(--vi);
}

.brand-info .container .right .info .num {
  padding-right: 0.5rem;
  color: #333;
}

.brand-info .container .right .info .num .total {
  color: #444;
}

.brand-info .container .right .info .num .current {
  color: var(--vi);
}

.brand-info .container .right .title {
  margin-top: 0.25rem;
  height: 1.15rem;
  padding: 0 0.35rem;
  display: flex;
  align-items: center;
  color: #000;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
}

.brand-info .container .right .title p {
  width: 12.4%;
}

.brand-info .container .right .title p:nth-child(1) {
  width: 38%;
}

.brand-info .container .right .list-box {
  margin-top: 0.25rem;
  position: relative;
  z-index: 2;
}

.brand-info .container .right .list-box .list {
  display: flex;
  padding: 0.35rem;
  background-color: #fff;
  margin-bottom: 0.25rem;
}

.brand-info .container .right .list-box .list:last-child {
  margin-bottom: 0;
}

.brand-info .container .right .list-box .list .con {
  width: 38%;
  padding-right: 0.75rem;
  display: flex;
  align-items: flex-start;
}

.brand-info .container .right .list-box .list .con .pic {
  width: 3.8rem;
  height: 3.8rem;
}

.brand-info .container .right .list-box .list .con .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.brand-info .container .right .list-box .list .con .txt {
  width: calc(100% - 3.8rem);
  padding-left: 0.55rem;
  padding-top: 0.25rem;
  line-height: 1.5;
}

.brand-info .container .right .list-box .list .con .txt .h {
  color: #3a3838;
}

.brand-info .container .right .list-box .list .con .txt .h2 {
  margin-top: 0.25rem;
  color: #333;
}

.brand-info .container .right .list-box .list .item {
  width: 12.4%;
  padding-top: 0.25rem;
}

.brand-info .container .right .list-box .list .guide .box {
  position: relative;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  cursor: pointer;
}

.brand-info .container .right .list-box .list .guide .detail {
  width: 2.35rem;
  height: 0.6rem;
  border: 1px solid #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #000000;
  padding: 0 0.2rem;
}

.brand-info .container .right .list-box .list .guide .detail p {
  margin-right: 0.2rem;
  line-height: 1.5;
}

.brand-info .container .right .list-box .list .guide .view {
  margin-top: 0.3rem;
  color: #107bd2;
}

.brand-info .container .right .list-box .list .guide .pos-cont {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  margin-left: -12rem;
  width: 24rem;
  border-radius: 0.5rem;
  background-color: #fff;
  box-shadow: 0 0.1rem 0.25rem rgba(84, 84, 84, 0.2);
  padding: 0 0.8rem 4px 0.65rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
}

.brand-info .container .right .list-box .list .guide .pos-cont.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  z-index: 10;
}

.brand-info .container .right .list-box .list .guide .pos-cont .thead {
  display: flex;
  align-items: center;
  height: 1.2rem;
}

.brand-info .container .right .list-box .list .guide .pos-cont .thead p {
  width: 2.1rem;
  color: #000000;
}

.brand-info .container .right .list-box .list .guide .pos-cont .thead p:nth-child(1) {
  width: 30%;
}

.brand-info .container .right .list-box .list .guide .pos-cont .thead p:nth-child(2) {
  width: 24.7%;
}

.brand-info .container .right .list-box .list .guide .pos-cont .thead p:nth-child(3) {
  width: calc(45.3% - 2.1rem);
}

.brand-info .container .right .list-box .list .guide .pos-cont .thead p:nth-child(4) {
  text-align: center;
}

.brand-info .container .right .list-box .list .guide .pos-cont .tbody .li {
  display: flex;
  align-items: center;
  height: 1.25rem;
  border-bottom: 1px solid #e8e8e8;
  color: #000;
}

.brand-info .container .right .list-box .list .guide .pos-cont .tbody .li:first-child {
  border-top: 1px solid #e8e8e8;
}

.brand-info .container .right .list-box .list .guide .pos-cont .tbody .li .num {
  width: 30%;
}

.brand-info .container .right .list-box .list .guide .pos-cont .tbody .li .time {
  width: 24.7%;
}

.brand-info .container .right .list-box .list .guide .pos-cont .tbody .li .price2 {
  width: calc(45.3% - 2.1rem);
  display: flex;
  align-items: baseline;
}

.brand-info .container .right .list-box .list .guide .pos-cont .tbody .li .price2 p {
  color: var(--vi);
}

.brand-info .container .right .list-box .list .guide .pos-cont .tbody .li .price2 span {
  color: #ff9c38;
  margin-left: 0.2rem;
}

.brand-info .container .right .list-box .list .guide .pos-cont .tbody .li .operate2 {
  width: 2.1rem;
  display: flex;
  justify-content: center;
}

.brand-info .container .right .list-box .list .guide .pos-cont .tbody .li .operate2 span {
  width: 0.5rem;
  margin-right: 0.2rem;
}

.brand-info .container .right .list-box .list .guide .pos-cont .tbody .li .operate2 span:last-child {
  margin-right: 0;
}

.brand-info .container .right .list-box .list .guide .pos-cont .close {
  width: 2.1rem;
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  border-radius: 0.4rem;
  background-color: var(--vi);
  color: #fff;
  margin-top: 4px;
  margin-left: calc(100% - 2.1rem);
  cursor: pointer;
}

.brand-info .container .right .list-box .list .brand {
  color: #3a3838;
  line-height: 1.5;
}

.brand-info .container .right .list-box .list .date {
  color: #3a3838;
}

.brand-info .container .right .list-box .list .price {
  width: 13.5%;
  line-height: 1;
}

.brand-info .container .right .list-box .list .price .h1 {
  color: var(--vi);
}

.brand-info .container .right .list-box .list .price .h2 {
  margin-top: 0.25rem;
  color: #ff9c38;
}

.brand-info .container .right .list-box .list .operate {
  display: flex;
}

.brand-info .container .right .list-box .list .operate div {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.4s;
}

.brand-info .container .right .list-box .list .operate div:hover {
  background-color: var(--vi);
}

.brand-info .container .right .list-box .list .operate div:hover img {
  filter: brightness(100);
}

.brand-info .container .right .list-box .list .operate div img {
  max-width: 50%;
  max-height: 50%;
  -o-object-fit: contain;
  object-fit: contain;
}

.brand-info .container .right .list-box .list .operate .add {
  background-color: #ffedeb;
  margin-right: 0.5rem;
}

.brand-info .container .right .list-box .list .operate .collect {
  background-color: rgba(255, 154, 58, 0.2);
}

.brand-info .container .right .page-box {
  margin-top: 1rem;
}

.cart {
  background-color: #fbfbfb;
  padding: 3px 0 0;
}

.cart .wrap {
  margin-bottom: 1.9rem;
}

.cart .top {
  width: 100%;
  height: 1.25rem;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}

.cart .top .left {
  display: flex;
}

.cart .top .left .item {
  position: relative;
  width: -moz-max-content;
  width: max-content;
  text-align: center;
  padding: 0 0.5rem;
  line-height: 1.25rem;
  margin-right: 0.45rem;
  color: #000;
  cursor: pointer;
  transition: all 0.4s;
}

.cart .top .left .item:last-child {
  margin-right: 0;
}

.cart .top .left .item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: var(--vi);
  transition: all 0.4s;
}

.cart .top .left .item sup {
  display: block;
  line-height: 1;
  font-size: 85%;
  position: absolute;
  top: 2px;
  right: -0.5rem;
  padding: 1px 7px;
  background-color: rgba(236, 236, 236, 0.7);
  border-radius: 0.25rem;
}

.cart .top .left .item:hover {
  color: var(--vi);
}

.cart .top .left .item.active {
  color: var(--vi);
}

.cart .top .left .item.active sup {
  background-color: #ffe8e8;
  color: var(--vi);
}

.cart .top .left .item.active::after {
  width: 100%;
}

.cart .top .right {
  display: flex;
  align-items: center;
}

.cart .top .right .h {
  color: #000;
  margin-right: 0.6rem;
}

.cart .top .right .el-cascader {
  width: 6.6rem;
}

.cart .title-box {
  margin-top: 1rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  padding: 0 0.4rem;
  color: #000;
  border-bottom: 1px solid #e8e8e8;
  background-color: #fff;
}

.cart .title-box .check {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  box-shadow: 0 0 0 1px #d9d9d9;
  margin-right: 0.2rem;
  cursor: pointer;
  transition: all 0.4s;
}

.cart .title-box .check::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 5px;
  height: 10px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  opacity: 0;
  transition: all 0.4s;
}

.cart .title-box .check.active {
  background-color: var(--vi);
  box-shadow: none;
}

.cart .title-box .check.active::after {
  opacity: 1;
}

.cart .title-box .info {
  width: 32.5%;
}

.cart .title-box .guide {
  width: 11.8%;
}

.cart .title-box .price {
  width: 10%;
}

.cart .title-box .num {
  width: 11%;
}

.cart .title-box .discount {
  width: 14%;
}

.cart .title-box .total {
  width: 11%;
}

.cart .title-box .operate {
  width: calc(9.7% - 0.7rem);
}

.cart .list-box {
  margin-top: 0.25rem;
}

.cart .list-box .list {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid #e8e8e8;
  background-color: #fff;
  padding: 0.4rem;
  margin-bottom: 0.25rem;
}

.cart .list-box .list:last-child {
  margin-bottom: 0;
}

.cart .list-box .list .check {
  place-self: anchor-center;
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  box-shadow: 0 0 0 1px #d9d9d9;
  margin-right: 0.2rem;
  cursor: pointer;
  transition: all 0.4s;
}

.cart .list-box .list .check::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 5px;
  height: 10px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  opacity: 0;
  transition: all 0.4s;
}

.cart .list-box .list .check.active {
  background-color: var(--vi);
  box-shadow: none;
}

.cart .list-box .list .check.active::after {
  opacity: 1;
}

.cart .list-box .list .info {
  width: 32.5%;
  height: 100%;
  display: flex;
  align-items: center;
  padding-right: 1.2rem;
}

.cart .list-box .list .info .pic {
  width: 3.6rem;
  height: 2.9rem;
}

.cart .list-box .list .info .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.cart .list-box .list .info .cont {
  width: calc(100% - 3.6rem);
  line-height: 1.5;
  padding-left: 0.5rem;
}

.cart .list-box .list .info .cont .h {
  color: #3a3838;
}

.cart .list-box .list .info .cont .h2 {
  margin-top: 0.25rem;
  color: #333;
}

.cart .list-box .list .guide {
  width: 11.8%;
  height: 100%;
  padding-top: 0.3rem;
}

.cart .list-box .list .guide .detail {
  position: relative;
  width: 2.4rem;
  height: 0.6rem;
  border: 1px solid #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #000000;
  padding: 0 0.2rem;
  cursor: pointer;
}

.cart .list-box .list .guide .detail p {
  margin-right: 0.2rem;
  line-height: 1.5;
}

.cart .list-box .list .guide .detail .pos-cont {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  margin-left: -12rem;
  width: 24rem;
  border-radius: 0.5rem;
  background-color: #fff;
  box-shadow: 0 0.1rem 0.25rem rgba(84, 84, 84, 0.2);
  padding: 0 0.8rem 4px 0.65rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  z-index: 10;
}

.cart .list-box .list .guide .detail .pos-cont.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cart .list-box .list .guide .detail .pos-cont .thead {
  display: flex;
  align-items: center;
  height: 1.2rem;
}

.cart .list-box .list .guide .detail .pos-cont .thead p {
  width: 2.1rem;
  color: #000000;
}

.cart .list-box .list .guide .detail .pos-cont .thead p:nth-child(1) {
  width: 30%;
}

.cart .list-box .list .guide .detail .pos-cont .thead p:nth-child(2) {
  width: 24.7%;
}

.cart .list-box .list .guide .detail .pos-cont .thead p:nth-child(3) {
  width: calc(45.3% - 2.1rem);
}

.cart .list-box .list .guide .detail .pos-cont .thead p:nth-child(4) {
  text-align: center;
}

.cart .list-box .list .guide .detail .pos-cont .tbody .li {
  display: flex;
  align-items: center;
  height: 1.25rem;
  border-bottom: 1px solid #e8e8e8;
  color: #000;
}

.cart .list-box .list .guide .detail .pos-cont .tbody .li:first-child {
  border-top: 1px solid #e8e8e8;
}

.cart .list-box .list .guide .detail .pos-cont .tbody .li .num {
  width: 30%;
}

.cart .list-box .list .guide .detail .pos-cont .tbody .li .time {
  width: 24.7%;
}

.cart .list-box .list .guide .detail .pos-cont .tbody .li .price2 {
  width: calc(45.3% - 2.1rem);
  display: flex;
  align-items: baseline;
}

.cart .list-box .list .guide .detail .pos-cont .tbody .li .price2 p {
  color: var(--vi);
}

.cart .list-box .list .guide .detail .pos-cont .tbody .li .price2 span {
  color: #ff9c38;
  margin-left: 0.2rem;
}

.cart .list-box .list .guide .detail .pos-cont .tbody .li .operate2 {
  width: 2.1rem;
  display: flex;
  justify-content: center;
}

.cart .list-box .list .guide .detail .pos-cont .tbody .li .operate2 span {
  width: 0.5rem;
  margin-right: 0.2rem;
}

.cart .list-box .list .guide .detail .pos-cont .tbody .li .operate2 span:last-child {
  margin-right: 0;
}

.cart .list-box .list .guide .detail .pos-cont .close {
  width: 2.1rem;
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  border-radius: 0.4rem;
  background-color: var(--vi);
  color: #fff;
  margin-top: 4px;
  margin-left: calc(100% - 2.1rem);
  cursor: pointer;
}

.cart .list-box .list .price {
  width: 10%;
  padding-top: 0.3rem;
  color: #3a3838;
}

.cart .list-box .list .num {
  width: 11%;
  padding-top: 0.3rem;
}

.cart .list-box .list .num .el-input-number {
  width: 2rem;
  line-height: 0.6rem;
  justify-content: center;
  border: 1px solid #cccccc;
}

.cart .list-box .list .num .el-input-number .el-input-number__decrease,
.cart .list-box .list .num .el-input-number .el-input-number__increase {
  width: 0.6rem;
  height: 0.6rem;
  background: none;
}

.cart .list-box .list .num .el-input-number .el-input {
  width: 0.8rem;
  padding: 0;
}

.cart .list-box .list .num .el-input-number .el-input__wrapper {
  padding: 0;
  box-shadow: none;
}

.cart .list-box .list .num .el-input-number .el-input__inner {
  height: 0.6rem;
}

.cart .list-box .list .discount {
  width: 14%;
  padding-top: 0.3rem;
  color: #000;
}

.cart .list-box .list .discount span {
  color: var(--vi);
}

.cart .list-box .list .total {
  width: 11%;
  padding-top: 0.3rem;
  color: var(--vi);
}

.cart .list-box .list .operate {
  width: calc(9.7% - 0.7rem);
  display: flex;
}

.cart .list-box .list .operate .delete {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  text-align: center;
  line-height: 0.95rem;
  background-color: #ebf1ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.5rem;
  cursor: pointer;
}

.cart .list-box .list .operate .delete svg {
  width: 0.5rem;
  height: 0.5rem;
  fill: #2467b2;
}

.cart .list-box .list .operate .collect {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  text-align: center;
  line-height: 0.95rem;
  background-color: rgba(255, 154, 58, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .4s;
}

.cart .list-box .list .operate .collect svg {
  width: 0.45rem;
  height: 0.45rem;
  fill: #ff9a3a;
  transition: all .4s;
}

.cart .list-box .list .operate .collect.active {
  background-color: #FF9A3A;
}

.cart .list-box .list .operate .collect.active svg {
  fill: #fff;
}

.cart .page-box {
  margin-top: 1.25rem;
}

.cart-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2.25rem;
  background-color: #fff;
  z-index: 100;
}

.cart-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.cart-bar .left {
  height: 100%;
  display: flex;
  align-items: center;
}

.cart-bar .left .check {
  display: flex;
  align-items: center;
  color: #000;
  margin-right: 4.9rem;
  cursor: pointer;
}

.cart-bar .left .check div {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.4rem;
  box-shadow: 0 0 0 1px #d9d9d9;
}

.cart-bar .left .check div::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 5px;
  height: 10px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.cart-bar .left .check.active div {
  background-color: var(--vi);
  box-shadow: none;
}

.cart-bar .left .delete {
  color: #000;
  margin-right: 1.5rem;
  cursor: pointer;
  transition: all 0.4s;
}

.cart-bar .left .delete:hover {
  color: var(--vi);
}

.cart-bar .left .addCollect {
  color: #000;
  cursor: pointer;
  transition: all 0.4s;
}

.cart-bar .left .addCollect:hover {
  color: var(--vi);
}

.cart-bar .right {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-start;
  padding-top: 0.6rem;
  padding-right: 3.75rem;
}

.cart-bar .right .item {
  color: #000000;
  margin-right: 0.5rem;
}

.cart-bar .right .item span {
  color: var(--vi);
}

.cart-bar .right .discount {
  margin-bottom: 0.3rem;
}

.cart-bar .right .pay {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 3.5rem;
  height: 2.25rem;
  background-color: var(--vi);
  color: #fff;
  text-align: center;
  line-height: 2.25rem;
  cursor: pointer;
}

.order {
  background-color: #fbfbfb;
}

.order .sure {
  width: 100%;
  height: 1.75rem;
  background-color: #fff;
  padding: 0 0.45rem;
  line-height: 1.75rem;
  color: #000;
}

.order .warn {
  width: 100%;
  height: 1.25rem;
  background-color: #ffe9e9;
  line-height: 1.25rem;
  padding: 0 0.45rem;
  color: var(--vi);
}

.order .info-box {
  margin-top: 0.25rem;
  background-color: #fff;
}

.order .info-box .info {
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.45rem;
  background-color: #fff;
}

.order .info-box .info .h {
  color: #000;
}

.order .info-box .info .add {
  color: #3181c2;
  cursor: pointer;
}

.order .info-box .address-box .li {
  display: flex;
  align-items: center;
  position: relative;
  height: 1.65rem;
  padding: 0 0.45rem;
  background-color: #fff;
}

.order .info-box .address-box .li .name {
  position: relative;
  width: 4rem;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  margin-right: 0.75rem;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #eeeeee;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s;
}

.order .info-box .address-box .li .name::before {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 2px;
  width: 5px;
  height: 10px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(45deg);
  z-index: 1;
  opacity: 0;
  transition: all 0.4s;
}

.order .info-box .address-box .li .name::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 0.9rem;
  height: 0.45rem;
  background: var(--vi);
  -webkit-clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0% 100%);
  opacity: 0;
  transition: all 0.4s;
}

.order .info-box .address-box .li p {
  color: #000;
  margin-right: 0.35rem;
}

.order .info-box .address-box .li .edit {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  color: #3181c2;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
}

.order .info-box .address-box .li.active {
  background-color: rgba(244, 244, 244, 0.7);
}

.order .info-box .address-box .li.active .name {
  box-shadow: 0 0 0 1px var(--vi);
}

.order .info-box .address-box .li.active .name::before,
.order .info-box .address-box .li.active .name::after {
  opacity: 1;
}

.order .info-box .address-box .li.active .edit {
  opacity: 1;
  visibility: visible;
}

.order .info-box .sli-address {
  margin-top: 0.25rem;
  margin-left: 0.45rem;
  width: -moz-max-content;
  width: max-content;
  display: flex;
  align-items: center;
  color: #000;
  cursor: pointer;
}

.order .info-box .sli-address p {
  margin-right: 0.2rem;
}

.order .info-box .company {
  margin-top: 0.55rem;
  border-top: 1px solid #e8e8e8;
  position: relative;
  padding: 0.45rem 0.45rem 0.55rem;
}

.order .info-box .company .h {
  color: #000;
}

.order .info-box .company .name {
  margin-top: 0.35rem;
  color: #000;
}

.order .info-box .company .edit {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  color: #3181c2;
  cursor: pointer;
}

.order .payment {
  margin-top: 0.25rem;
  background-color: #fff;
  padding: 0.55rem 0.45rem;
}

.order .payment .type-box {
  margin-top: 0.4rem;
  display: flex;
}

.order .payment .item {
  position: relative;
  width: 4.5rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center;
  line-height: 1rem;
  box-shadow: 0 0 0 1px #eeeeee;
  margin-right: 0.75rem;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s;
}

.order .payment .item:last-child {
  margin-right: 0;
}

.order .payment .item::before {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 2px;
  width: 5px;
  height: 10px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(45deg);
  z-index: 1;
  opacity: 0;
  transition: all 0.4s;
}

.order .payment .item::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 0.9rem;
  height: 0.45rem;
  background: var(--vi);
  -webkit-clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0% 100%);
  opacity: 0;
  transition: all 0.4s;
}

.order .payment .item span {
  width: .5rem;
}

.order .payment .item span img {
  width: 100%;
}

.order .payment .item:hover {
  color: var(--vi);
}

.order .payment .item.active {
  color: #000;
  box-shadow: 0 0 0 1px var(--vi);
}

.order .payment .item.active::before,
.order .payment .item.active::after {
  opacity: 1;
}

.order .top-title {
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  height: 1.5rem;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 0.45rem;
  color: #000;
}

.order .top-title p {
  width: 13%;
  text-align: center;
}

.order .top-title .sp {
  width: 48%;
  text-align: left;
}

.order .li-box {
  background-color: #fff;
  padding-bottom: 0.75rem;
}

.order .li-box .li {
  display: flex;
  align-items: center;
  padding: 0.4rem;
  border-bottom: 1px solid #e8e8e8;
}

.order .li-box .info {
  width: 48%;
  display: flex;
  align-items: flex-start;
}

.order .li-box .info .pic {
  width: 3rem;
  height: 3rem;
}

.order .li-box .info .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.order .li-box .info .cont {
  margin-left: 0.45rem;
  width: 5.15rem;
  color: #3a3838;
  line-height: 1.5;
}

.order .li-box .info .model {
  margin-left: 0.7rem;
  width: 5.7rem;
}

.order .li-box .info .model .list {
  color: #333;
  margin-bottom: 0.15rem;
  line-height: 1.5;
}

.order .li-box .info .model .list:last-child {
  margin-bottom: 0;
}

.order .li-box .info .model .list span {
  color: #000;
}

.order .li-box .item {
  width: 13%;
  text-align: center;
}

.order .li-box .price {
  color: #3a3838;
}

.order .li-box .num {
  color: #3a3838;
}

.order .li-box .discount {
  color: #000;
}

.order .li-box .discount span {
  color: var(--vi);
}

.order .li-box .total {
  color: var(--vi);
}

.order .require {
  height: 1.6rem;
  margin-top: 0.25rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 0.45rem;
}

.order .require .item {
  display: flex;
  align-items: center;
  margin-right: 1.25rem;
}

.order .require .item:last-child {
  margin-right: 0;
}

.order .require .item .h {
  color: #000;
  margin-right: 0.5rem;
}

.order .require .item .el-radio-group {
  display: flex;
}

.order .require .item .el-radio-group .el-radio__inner {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 0;
}

.order .require .item .el-radio-group .el-radio__inner::after {
  width: 4px;
  height: 9px;
  border-radius: 0;
  transform: translate(-50%, -50%) rotate(45deg);
  background: none;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.order .require .item .el-radio-group .el-radio__label {
  font-size: 0.4rem;
  padding-left: 0.1rem;
}

.order .remark {
  margin-top: 0.25rem;
  padding: 0.6rem 0.45rem 1rem;
  background-color: #fff;
}

.order .remark .h {
  color: #000;
}

.order .remark .el-textarea {
  margin-top: 0.6rem;
}

.order .remark .el-textarea .el-textarea__inner {
  height: 2.25rem;
  padding: 0.35rem 0.25rem;
  box-shadow: 0 0 0 1px #eeeeee;
  border-radius: 0;
}

.order .tips {
  margin-top: 0.25rem;
}

.order .tips .h {
  padding: 0 0.45rem;
  height: 1.5rem;
  line-height: 1.5rem;
  color: #000;
}

.order .tips .text {
  border-top: 1px solid #e8e8e8;
  padding: 0.4rem 0.45rem;
  color: #000;
  line-height: 1.1;
}

.order .tips .text p {
  margin-bottom: 0.3rem;
}

.order .tips .text p:last-child {
  margin-bottom: 0;
}

.order .account {
  margin-top: 0.25rem;
  background-color: #fff;
}

.order .account .h {
  padding: 0 0.45rem;
  height: 1.5rem;
  line-height: 1.5rem;
  color: #000;
}

.order .account .box {
  border-top: 1px solid #e8e8e8;
  padding: 0.5rem 0.45rem;
  display: flex;
  justify-content: flex-end;
}

.order .account .item-box {
  width: 10.8rem;
}

.order .account .item-box .item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.order .account .item-box .item:last-child {
  margin-bottom: 0;
}

.order .account .item-box .item p {
  color: #000;
}

.order .account .item-box .item span {
  color: var(--vi);
}

.order-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2.25rem;
  background-color: #fff;
  box-shadow: 0 -0.25rem 0.25rem rgba(89, 89, 89, 0.09);
  z-index: 100;
}

.order-bar .wrap {
  height: 100%;
  display: flex;
  justify-content: flex-end;
}

.order-bar .back {
  width: -moz-max-content;
  width: max-content;
  height: 100%;
  line-height: 2.25rem;
  padding: 0 1.15rem;
  color: #000;
}

.order-bar .pay {
  width: -moz-max-content;
  width: max-content;
  height: 100%;
  line-height: 2.25rem;
  padding: 0 1.15rem;
  background-color: var(--vi);
  color: #fff;
  cursor: pointer;
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.dialog-sure {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 199;
  background-color: rgba(0, 0, 0, 0.6);
}

.dialog-sure .container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16.3rem;
  padding: 1.75rem 2.75rem;
  background-color: #fff;
  box-shadow: 0 4px 0.95rem rgba(210, 210, 210, 0.25);
  border-radius: 1rem;
  overflow: hidden;
}

.dialog-sure .container .h {
  margin-top: 1.25rem;
}

.dialog-sure .container .text {
  margin-top: 0.5rem;
}

.dialog-sure .container .box {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
}

.dialog-sure .container .box .ipt {
  position: relative;
}

.dialog-sure .container .box .ipt input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.dialog-sure .container .box .ipt .item-box {
  display: flex;
  position: relative;
  z-index: 2;
}

.dialog-sure .container .box .ipt .item {
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 5px;
  border: 1px solid #d9d9d9;
  margin-right: 0.5rem;
  text-align: center;
  line-height: 1.1rem;
  cursor: text;
}

.dialog-sure .container .box .ipt .item:last-child {
  margin-right: 0;
}

.dialog-sure .container .box .ipt .item.active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 0.7rem;
  background-color: #000;
  animation: blink 1s infinite;
}

.dialog-sure .container .box .getCode {
  width: 3.8rem;
  height: 1.1rem;
  border-radius: 5px;
  border: 1px solid #d9d9d9;
  text-align: center;
  line-height: 1.1rem;
  cursor: pointer;
  transition: all 0.4s;
}

.dialog-sure .container .box .getCode:hover {
  background-color: var(--vi);
  color: #fff;
  border-color: var(--vi);
}

.dialog-sure .container .btn {
  margin: 1.75rem auto 0;
  width: 3.75rem;
  height: 1rem;
  border-radius: 0.5rem;
  background-color: var(--vi);
  text-align: center;
  line-height: 1rem;
  color: #fff;
}

.dialog-pay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 199;
  background-color: rgba(0, 0, 0, 0.6);
}

.dialog-pay .container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16.3rem;
  padding: 1.75rem 3.05rem;
  background-color: #fff;
  box-shadow: 0 4px 0.95rem rgba(210, 210, 210, 0.25);
  border-radius: 1rem;
  overflow: hidden;
}

.dialog-pay .container .tit {
  margin-top: 1.25rem;
}

.dialog-pay .container .text {
  margin-top: 1rem;
  color: #333;
}

.dialog-pay .container .pay-img {
  margin: 0.5rem auto 0;
  position: relative;
  width: 5.25rem;
  height: 5.25rem;
  border: 1px solid var(--vi);
  padding: 6px;
}

.dialog-pay .container .pay-img::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1px;
  transform: translateY(-50%);
  width: calc(100% + 2px);
  height: 1.75rem;
  background-color: #fff;
}

.dialog-pay .container .pay-img::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 1.75rem;
  height: calc(100% + 4px);
  background-color: #fff;
}

.dialog-pay .container .pay-img img {
  position: relative;
  z-index: 3;
  width: 100%;
}

.dialog-pay .container .price {
  margin-top: 0.75rem;
  color: #000;
}

.dialog-pay .container .price span {
  color: var(--vi);
}

.dialog-pay .container .changeCard {
  display: block;
  margin: 0.55rem auto 0;
  width: -moz-max-content;
  width: max-content;
  color: #378eff;
  cursor: pointer;
}

.dialog-pay .container .item-box {
  margin-top: 1.25rem;
}

.dialog-pay .container .item-box .item {
  color: #000;
  margin-bottom: 0.35rem;
  line-height: 1.2;
}

.dialog-pay .container .item-box .item:last-child {
  margin-bottom: 0;
}

.dialog-pay .container .item-box .item span {
  font-weight: bold;
  margin-right: 0.25rem;
}

.dialog-card {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 199;
  background-color: rgba(0, 0, 0, 0.6);
}

.dialog-card .container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16.3rem;
  padding: 1.75rem 2.5rem;
  background-color: #fff;
  box-shadow: 0 4px 0.95rem rgba(210, 210, 210, 0.25);
  border-radius: 1rem;
  overflow: hidden;
}

.dialog-card .container .tit {
  margin-top: 1.25rem;
}

.dialog-card .container .text {
  margin-top: 1rem;
  color: #999;
}

.dialog-card .container .text span {
  color: var(--vi);
}

.dialog-card .container .item-box {
  margin: 1rem auto 0;
  width: -moz-max-content;
  width: max-content;
  display: flex;
  flex-direction: column;
}

.dialog-card .container .item-box .item {
  color: #000000;
  margin-bottom: 0.3rem;
}

.dialog-card .container .item-box .item:last-child {
  margin-bottom: 0;
}

.dialog-card .container .item-box .item span {
  color: #000;
}

.forget {
  padding: 1.5rem 0 2.5rem;
  background-color: #f9f9f9;
}

.forget .el-form .el-form-item {
  flex-direction: column;
  margin-bottom: 0.55rem;
}

.forget .el-form .el-form-item:last-child {
  margin-bottom: 0;
}

.forget .el-form .el-form-item__label {
  align-items: center;
  justify-content: flex-start;
  height: auto;
  line-height: 1;
  color: #000;
}

.forget .el-form .el-form-item__label::before {
  display: none;
}

.forget .el-form .el-form-item__label div {
  width: 15px;
  margin-right: 0.2rem;
}

.forget .el-form .el-form-item__content {
  margin-top: 0.3rem;
}

.forget .el-form .el-input__wrapper {
  padding: 0 0.5rem;
}

.forget .el-form .el-input__inner {
  height: 1.25rem;
}

.forget .el-form .el-input-group__append {
  width: 3.2rem;
  box-shadow: 0 1px 0 0 var(--vi) inset, 0 -1px 0 0 var(--vi) inset, -1px 0 0 0 var(--vi) inset;
  background-color: var(--vi);
  color: #fff;
}

.forget .box {
  margin: 0.9rem auto 0;
  width: 14.9rem;
  background-color: #fff;
  padding: 1.9rem 1.45rem 4.55rem;
}

.forget .getCode {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.forget .btn {
  width: 100%;
  height: 1.5rem;
  color: #fff;
  font-size: 0.45rem;
}

.login-head {
  width: 100%;
  height: 3rem;
  background-color: #fff;
}

.login-head .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.login-head .lf {
  display: flex;
  align-items: center;
}

.login-head .lf .logo {
  width: 8.8rem;
}

.login-head .lf .logo img {
  width: 100%;
}

.login-head .lf p {
  color: #000000;
  margin-left: 6px;
}

.login-head .rg {
  display: flex;
  align-items: center;
}

.login-head .rg .li {
  display: flex;
  align-items: center;
  margin-right: 1.5rem;
}

.login-head .rg .li:last-child {
  margin-right: 0;
}

.login-head .rg .li .h {
  color: #333;
}

.login-head .rg .li .link {
  display: flex;
  align-items: center;
  color: var(--vi);
  margin-left: 0.75rem;
}

.login-head .rg .li .link span {
  width: 0.5rem;
  margin-right: 0.25rem;
  display: flex;
}

.antibody .top {
  display: flex;
  justify-content: space-between;
}

.antibody .top .bar {
  width: 21.5%;
  background-color: #fff;
}

.antibody .top .bar .tit {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--vi);
  color: #fff;
  height: 1.25rem;
}

.antibody .top .bar .tit span {
  width: 0.45rem;
  margin-right: 6px;
}

.antibody .top .bar .tab-li .li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 1.3rem;
  padding: 0 0.3rem 0 1rem;
  color: #000;
  cursor: pointer;
  transition: all 0.4s;
}

.antibody .top .bar .tab-li .li span {
  opacity: 0;
  transition: all 0.4s;
}

.antibody .top .bar .tab-li .li:hover {
  color: var(--vi);
}

.antibody .top .bar .tab-li .li.active {
  color: var(--vi);
  background-color: #ffedeb;
}

.antibody .top .bar .tab-li .li.active span {
  opacity: 1;
}

.antibody .top .con {
  position: relative;
  width: calc(78.5% - 0.25rem);
}

.antibody .top .con .box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 0 0.6rem;
  box-shadow: 0 0 0.55rem rgba(31, 31, 31, 0.06);
  z-index: 10;
  opacity: 0;
}

.antibody .top .con .box.show {
  opacity: 1;
}

.antibody .top .con .h {
  height: 1.15rem;
  display: flex;
  align-items: center;
  color: #000;
  border-bottom: 1px solid rgba(119, 119, 119, 0.25);
}

.antibody .top .con .h span {
  display: flex;
  margin-left: 0.25rem;
  color: var(--vi);
}

.antibody .top .con .tab-con {
  display: flex;
  align-items: center;
  padding: 0.25rem 0 0.6rem;
}

.antibody .top .con .tab-con a {
  color: #606060;
  margin-right: 0.6rem;
  transition: all 0.4s;
}

.antibody .top .con .tab-con a:last-child {
  margin-right: 0;
}

.antibody .top .con .tab-con a:hover {
  color: var(--vi);
}

.antibody .top .con .swiper-box {
  position: relative;
  width: 100%;
}

.antibody .top .con .swiper-box .swiper-pagination {
  bottom: 0.3rem;
  line-height: 1;
}

.antibody .top .con .swiper-box .swiper-pagination .swiper-pagination-bullet {
  width: 0.75rem;
  height: 2px;
  margin: 0 0.1rem;
  background-color: #efefef;
  opacity: 0.8;
  border-radius: 0;
}

.antibody .top .con .swiper-box .swiper-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--vi);
}

.antibody .top .con .swiper-box .swiper-button-next,
.antibody .top .con .swiper-box .swiper-button-prev {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background-color: rgba(51, 51, 51, 0.36);
  color: #fff;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

.antibody .top .con .swiper-box .swiper-button-next::after,
.antibody .top .con .swiper-box .swiper-button-prev::after {
  font-size: 0.3rem;
}

.antibody .top .con .swiper-box .swiper-button-prev {
  left: -0.45rem;
}

.antibody .top .con .swiper-box .swiper-button-next {
  right: -0.45rem;
}

.antibody .top .con .tab-swiper {
  width: 100%;
}

.antibody .top .con .tab-swiper .swiper-slide {
  width: 100%;
  height: 11.25rem;
  margin-right: 1rem;
}

.antibody .top .con .tab-swiper .swiper-slide:last-child {
  margin-right: 0;
}

.antibody .top .con .tab-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.antibody .container {
  margin-top: 1rem;
  padding-bottom: 0.5rem;
}

.antibody .container .item {
  margin-bottom: 1rem;
}

.antibody .container .item .swiper-box {
  position: relative;
}

.antibody .container .item .swiper-box .swiper-button-next,
.antibody .container .item .swiper-box .swiper-button-prev {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background-color: rgba(51, 51, 51, 0.36);
  color: #fff;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

.antibody .container .item .swiper-box .swiper-button-next::after,
.antibody .container .item .swiper-box .swiper-button-prev::after {
  font-size: 0.3rem;
}

.antibody .container .item .swiper-box .swiper-button-prev {
  left: -0.45rem;
}

.antibody .container .item .swiper-box .swiper-button-next {
  right: -0.45rem;
}

.antibody .container .item .item-swiper {
  margin-top: 0.7rem;
}

.antibody .container .item .item-swiper .swiper-slide {
  width: 23.5%;
  margin-right: 2%;
}

.antibody .container .item .item-swiper .swiper-slide:last-child {
  margin-right: 0;
}

.antibody .container .item .item-swiper .swiper-slide .pic {
  width: 100%;
  height: 5rem;
  overflow: hidden;
}

.antibody .container .item .item-swiper .swiper-slide .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.antibody .container .item .item-swiper .swiper-slide .h {
  margin-top: 0.5rem;
  color: #000;
  line-height: 1.2;
  text-align: center;
}

.antibody .selected {
  position: relative;
  padding-bottom: 0.5rem;
}

.antibody .selected .li-box {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
}

.antibody .selected .li-box .li {
  width: 23.5%;
  padding: 0.6rem;
  background-color: #fff;
  margin-bottom: 0.5rem;
  transition: all 0.4s;
}

.antibody .selected .li-box .li .pic {
  position: relative;
  width: 100%;
  height: 6rem;
}

.antibody .selected .li-box .li .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: all 0.4s;
}

.antibody .selected .li-box .li .pic .link {
  position: absolute;
  bottom: -0.4rem;
  left: 50%;
  margin-left: -1.25rem;
  width: 2.5rem;
  height: 0.8rem;
  border-radius: 0.4rem;
  line-height: 0.8rem;
  text-align: center;
  color: #fff;
  background-color: var(--vi);
  transform: translateY(1rem);
  opacity: 0;
  transition: all 0.4s;
}

.antibody .selected .li-box .li .intro {
  margin-top: 0.5rem;
  position: relative;
  padding-bottom: 0.2rem;
}

.antibody .selected .li-box .li .intro .h {
  color: #000;
  line-height: 1.6;
}

.antibody .selected .li-box .li .intro .num {
  margin-top: 0.2rem;
  color: #333;
  line-height: 1.2;
}

.antibody .selected .li-box .li .intro .price {
  margin-top: 0.2rem;
  color: #333;
  line-height: 1.2;
}

.antibody .selected .li-box .li .intro .price span {
  position: relative;
}

.antibody .selected .li-box .li .intro .price span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #333;
}

.antibody .selected .li-box .li .intro .ing {
  margin-top: 0.35rem;
  display: flex;
  align-items: baseline;
  color: #333;
}

.antibody .selected .li-box .li .intro .ing p {
  color: var(--vi);
}

.antibody .selected .li-box .li .intro .add {
  position: absolute;
  bottom: 0.1rem;
  right: 0.1rem;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background-color: #ffedeb;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s;
}

.antibody .selected .li-box .li .intro .add svg {
  fill: var(--vi);
  width: 0.5rem;
  height: 0.5rem;
}

.antibody .selected .li-box .li:hover {
  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.08);
}

.antibody .selected .li-box .li:hover .pic .link {
  opacity: 1;
  transform: translateY(0);
}

.antibody .selected .li-box .li:hover .intro .add {
  opacity: 1;
  visibility: visible;
}

.antibody .selected .more {
  position: absolute;
  right: 0;
  top: 0.1rem;
  display: flex;
  align-items: center;
  color: #000;
  line-height: 1.2;
}

.antibody .selected .more span {
  margin-left: 0.25rem;
}

.an-list {
  padding: 0.25rem 0 1rem;
  position: relative;
}

.an-list .pos-cont {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.an-list .pos-cont img {
  width: 100%;
}

.an-list .wrap {
  position: relative;
  z-index: 3;
}

.an-list .top-name {
  margin-top: 0.6rem;
  display: flex;
  align-items: center;
  color: #fff;
  height: 3.2rem;
}

.an-list .tab {
  margin-top: calc(0.6rem + 1px);
  display: flex;
  width: 100%;
  height: 1.25rem;
  background-color: #fff;
  padding: 0 2px;
}

.an-list .tab span {
  position: relative;
  width: -moz-max-content;
  width: max-content;
  line-height: 1.25rem;
  padding: 0 0.3rem;
  margin-right: 0.3rem;
  color: #000;
  cursor: pointer;
  transition: all 0.4s;
}

.an-list .tab span:last-child {
  margin-right: 0;
}

.an-list .tab span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: var(--vi);
  transition: all 0.4s;
}

.an-list .tab span:hover {
  color: var(--vi);
}

.an-list .tab span.active {
  color: var(--vi);
}

.an-list .tab span.active::after {
  width: 100%;
}

.an-list .information {
  margin-top: 1.8rem;
  position: relative;
}

.an-list .information .li-box {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2%;
}

.an-list .information .li-box .li {
  width: 49%;
  display: flex;
  align-items: flex-end;
  padding: 0.6rem;
  background-color: #fff;
}

.an-list .information .li-box .li .pic {
  width: 5.85rem;
  height: 3.85rem;
  position: relative;
}

.an-list .information .li-box .li .pic::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
}

.an-list .information .li-box .li .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.an-list .information .li-box .li .txt {
  width: calc(100% - 5.85rem);
  padding-left: 0.5rem;
}

.an-list .information .li-box .li .txt .h {
  color: #000;
  line-height: 1.2;
  max-height: 2.4em;
  overflow: hidden;
}

.an-list .information .li-box .li .txt .p {
  margin-top: 0.4rem;
  color: #000000;
  line-height: 1.5;
  max-height: 3em;
  overflow: hidden;
}

.an-list .information .li-box .li .txt .tags {
  margin-top: 1.1rem;
  display: flex;
}

.an-list .information .li-box .li .txt .tags p {
  padding: 2px 0.2rem;
  background-color: #fce5e7;
  border-radius: 1rem;
  color: var(--vi);
}

.an-list .video {
  margin-top: 1rem;
  position: relative;
}

.an-list .video .li-box {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 2%;
}

.an-list .video .li-box .li {
  width: 23.5%;
}

.an-list .video .li-box .li .pic {
  width: 100%;
  height: 4.5rem;
  position: relative;
}

.an-list .video .li-box .li .pic::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(32, 32, 32, 0.5);
}

.an-list .video .li-box .li .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.an-list .video .li-box .li .pic .play {
  width: 1.25rem;
  z-index: 3;
  cursor: pointer;
}

.an-list .video .li-box .li .txt {
  margin-top: 0.25rem;
  line-height: 1.2;
  color: #000;
  text-align: center;
}

.an-list .tips {
  margin-top: 1.5rem;
  position: relative;
}

.an-list .tips .li-box {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2%;
}

.an-list .tips .li-box .li {
  width: 49%;
  height: 3.5rem;
  background-color: #fff;
  padding: 0.5rem;
  line-height: 1.2;
}

.an-list .tips .li-box .li .h {
  color: #000000;
}

.an-list .tips .li-box .li .p {
  margin-top: 0.35rem;
  color: #333;
}

.an-list .tips .li-box .li .time {
  margin-top: 0.9rem;
  color: #333;
}

.an-list .selected {
  position: relative;
  margin-top: 1rem;
}

.an-list .selected .li-box {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
}

.an-list .selected .li-box .li {
  width: 23.5%;
  padding: 0.6rem;
  background-color: #fff;
  margin-bottom: 0.5rem;
  transition: all 0.4s;
}

.an-list .selected .li-box .li .pic {
  position: relative;
  width: 100%;
  height: 3.95rem;
}

.an-list .selected .li-box .li .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: all 0.4s;
}

.an-list .selected .li-box .li .pic .link {
  position: absolute;
  bottom: -0.4rem;
  left: 50%;
  margin-left: -1.25rem;
  width: 2.5rem;
  height: 0.8rem;
  border-radius: 0.4rem;
  line-height: 0.8rem;
  text-align: center;
  color: #fff;
  background-color: var(--vi);
  transform: translateY(1rem);
  opacity: 0;
  transition: all 0.4s;
}

.an-list .selected .li-box .li .intro {
  margin-top: 0.5rem;
  position: relative;
  padding-bottom: 0.2rem;
}

.an-list .selected .li-box .li .intro .h {
  color: #000;
  line-height: 1.6;
}

.an-list .selected .li-box .li .intro .num {
  margin-top: 0.2rem;
  color: #333;
  line-height: 1.2;
}

.an-list .selected .li-box .li .intro .price {
  margin-top: 0.2rem;
  color: #333;
  line-height: 1.2;
}

.an-list .selected .li-box .li .intro .price span {
  position: relative;
}

.an-list .selected .li-box .li .intro .price span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #333;
}

.an-list .selected .li-box .li .intro .ing {
  margin-top: 0.35rem;
  display: flex;
  align-items: baseline;
  color: #333;
}

.an-list .selected .li-box .li .intro .ing p {
  color: var(--vi);
}

.an-list .selected .li-box .li .intro .add {
  position: absolute;
  bottom: 0.1rem;
  right: 0.1rem;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background-color: #ffedeb;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s;
}

.an-list .selected .li-box .li .intro .add svg {
  fill: var(--vi);
  width: 0.5rem;
  height: 0.5rem;
}

.an-list .selected .li-box .li:hover {
  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.08);
}

.an-list .selected .li-box .li:hover .pic .link {
  opacity: 1;
  transform: translateY(0);
}

.an-list .selected .li-box .li:hover .intro .add {
  opacity: 1;
  visibility: visible;
}

.an-list .title {
  display: flex;
  align-items: center;
  color: #000;
  line-height: 1;
}

.an-list .title span {
  width: 0.6rem;
  margin-right: 0.3rem;
}

.an-list .more {
  position: absolute;
  right: 0;
  top: 0.1rem;
  display: flex;
  align-items: center;
  color: #000;
  line-height: 1.2;
}

.an-list .more p {
  margin-right: 0.25rem;
}

.an-info {
  padding: 0 0 1.75rem;
}

.an-info .container {
  margin-top: 0.75rem;
  background-color: #fff;
  padding: 0.75rem 0.75rem 0.75rem;
  /*overflow: hidden;*/
}

.an-info .container .tit {
  line-height: 1.2;
  color: #393737;
}

.an-info .container .info {
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  color: #333;
  line-height: 1.2;
}

.an-info .container .info .share {
  margin-left: 0.5rem;
  display: flex;
  align-items: center;
}

.an-info .container .info .share .link {
  display: flex;
  margin-left: 0.4rem;
  gap: 0.4rem;
}

/*.an-info .container .info .share .link a {*/
/*  width: 0.75rem;*/
/*  height: 0.75rem;*/
/*  border-radius: 50%;*/
/*  background-color: #e3e3e3;*/
/*  text-align: center;*/
/*  line-height: 0.75rem;*/
/*}*/

/*.an-info .container .info .share .link a img {*/
/*  max-width: 50%;*/
/*  max-height: 50%;*/
/*  -o-object-fit: contain;*/
/*  object-fit: contain;*/
/*}*/

.an-info .container .cont {
  margin-top: 0.75rem;
  color: #000000;
  padding-top: 0.75rem;
  position: relative;
  line-height: 2;
}

.an-info .container .cont::after {
  content: "";
  position: absolute;
  top: 0;
  left: -.75rem;
  width: calc(100% + 1.5rem);
  height: 1px;
  background-color: #ececec;
}

.an-info .container .cont table {
  margin: auto;
}

.an-info .container .back {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  float: right;
  width: 3.25rem;
  height: 0.8rem;
  border-radius: 0.4rem;
  background-color: var(--vi);
  color: #fff;
}

.an-info .container .back span {
  width: 0.35rem;
  margin-right: 0.25rem;
  display: flex;
}

.an-info .container .back span img {
  width: 100%;
}

.article {
  padding-bottom: 1.75rem;
}

.article .box {
  margin-top: 0.75rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.article .box .left {
  width: 21.5%;
  position: sticky;
  top: 1rem;
  background-color: #fff;
}

.article .box .left .tit {
  width: 100%;
  height: 1.15rem;
  background-color: var(--vi);
  color: #fff;
  text-align: center;
  line-height: 1.15rem;
}

.article .box .left .li-box .li {
  position: relative;
  width: 100%;
  height: 1.15rem;
  line-height: 1.15rem;
  padding: 0 1rem;
  color: #000;
  cursor: pointer;
  transition: all 0.4s;
}

.article .box .left .li-box .li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  width: 2px;
  height: 0;
  background-color: var(--vi);
  border-radius: 4px;
  transition: all 0.4s;
}

.article .box .left .li-box .li:hover {
  color: var(--vi);
}

.article .box .left .li-box .li.active {
  background-color: #ffedeb;
  color: var(--vi);
}

.article .box .left .li-box .li.active::after {
  height: 0.75rem;
}

.article .box .right {
  width: calc(78.5% - 0.25rem);
  background-color: #fff;
  padding-bottom: 1.75rem;
}

.article .box .right .search {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  gap: 0.5rem;
  border-bottom: 1px solid #ececec;
}

.article .box .right .li-box {
  margin-top: 0.6rem;
  padding: 0 1rem;
}

.article .box .right .li-box .li {
  display: block;
  line-height: 1.2;
  border-bottom: 1px solid #ececec;
  padding-bottom: 0.6rem;
  margin-bottom: 0.6rem;
}

.article .box .right .li-box .li:last-child {
  margin-bottom: 0;
}

.article .box .right .li-box .li .h {
  font-family: "HarmonyOS_Sans_SC_Regular";
  color: #000;
  transition: all 0.4s;
}

.article .box .right .li-box .li .time {
  margin-top: 0.25rem;
  color: #333;
}

.article .box .right .li-box .li:hover .h {
  color: var(--vi);
}

.article .box .right .page-box {
  margin-top: 1rem;
}

.article .el-input {
  width: 8.1rem;
}

.article .el-input__wrapper {
  border-radius: 0.5rem;
  padding: 0 0.35rem;
}

.article .el-input__inner {
  height: 0.95rem;
}

.article .el-button {
  width: 2rem;
  height: 0.95rem;
  border-radius: 0.5rem;
}

.sideBan {
  position: relative;
}

.sideBan .swiper-button-prev,
.sideBan .swiper-button-next {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background-color: rgba(51, 51, 51, 0.2);
  color: #fff;
}

.sideBan .swiper-button-prev::after,
.sideBan .swiper-button-next::after {
  font-size: 0.3rem;
}

.sideBan .swiper-button-prev {
  left: -0.45rem;
}

.sideBan .swiper-button-next {
  right: -0.45rem;
}

.sideBan .swiper-pagination {
  bottom: 0.5rem;
  width: 100%;
}

.sideBan .swiper-pagination-bullet {
  width: 0.75rem;
  height: 2px;
  border-radius: 0;
  margin: 0 0.1rem;
  background-color: #fff;
  line-height: 1;
  opacity: 1;
}

.sideBan .swiper-pagination-bullet-active {
  background-color: var(--vi);
}

.sideBan .ban-swiper {
  width: 100%;
  height: 7.3rem;
}

.sideBan .ban-swiper .swiper-slide {
  width: 100%;
  height: 100%;
  margin-right: 1rem;
}

.sideBan .ban-swiper .swiper-slide:last-child {
  margin-right: 0;
}

.sideBan .ban-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.sideBan .ban-swiper .swiper-slide .pos-cont {
  position: absolute;
  top: 29.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
}

.sideBan .ban-swiper .swiper-slide .pos-cont .h {
  width: -moz-max-content;
  width: max-content;
  margin: auto;
  font-family: "youshe";
  line-height: 1.3;
  background: linear-gradient(93deg, #ff5c5c 36.54%, #d31115 108.1%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sideBan .ban-swiper .swiper-slide .pos-cont .txt {
  margin-top: 0.6rem;
  color: #000000;
}

.choice {
  background-color: #fbfbfb;
  padding-bottom: 2.75rem;
}

.choice .el-breadcrumb {
  margin-bottom: 0.25rem;
}

.choice .tab {
  font-family: "HarmonyOS_Sans_SC_Regular";
  height: 1.25rem;
  background-color: #fff;
  display: flex;
}

.choice .tab span {
  width: -moz-max-content;
  width: max-content;
  height: 100%;
  line-height: 1.25rem;
  padding: 0 0.3rem;
  position: relative;
  margin-right: 0.25rem;
  color: #000;
  cursor: pointer;
  transition: all 0.4s;
}

.choice .tab span:last-child {
  margin-right: 0;
}

.choice .tab span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: var(--vi);
  transition: all 0.4s;
}

.choice .tab span:hover {
  color: var(--vi);
}

.choice .tab span.active {
  color: var(--vi);
}

.choice .tab span.active::after {
  width: 100%;
}

.choice .item-box {
  margin-top: 1rem;
}

.choice .item-box .item {
  margin-bottom: 0.75rem;
}

.choice .item-box .item:last-child {
  margin-bottom: 0;
}

.choice .item-box .item .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.choice .item-box .item .top .h {
  font-family: "HarmonyOS_Sans_SC_Regular";
  color: #000;
  line-height: 1.2;
}

.choice .item-box .item .top .more {
  display: flex;
  align-items: center;
  color: #000;
  cursor: pointer;
}

.choice .item-box .item .top .more p {
  margin-right: 0.25rem;
}

.choice .item-box .li-box {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
}

.choice .item-box .li-box .li {
  width: 19%;
  aspect-ratio: 1/1;
  margin-right: 1.25%;
  background-color: #f4f8fc;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  margin-bottom: 0.25rem;
  transition: all 0.4s;
}

.choice .item-box .li-box .li:nth-child(5n) {
  margin-right: 0;
}

.choice .item-box .li-box .li .pic {
  width: 100%;
  height: 3.2rem;
}

.choice .item-box .li-box .li .pic img {
  max-height: 100%;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.choice .item-box .li-box .li .intro {
  margin-top: 0.5rem;
  line-height: 1.4;
}

.choice .item-box .li-box .li .intro .h {
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.choice .item-box .li-box .li .intro .price {
  margin-top: 6px;
}

.choice .item-box .li-box .li:hover {
  background-color: #fff;
  box-shadow: 0 4px 0.4rem rgba(0, 0, 0, 0.05);
}

.buy-page {
  background-color: #fbfbfb;
  padding-bottom: 1.75rem;
}

.buy-page .intro {
  margin-top: 0.75rem;
  background-color: #fff;
  padding: 0.65rem 0.35rem 1rem;
}

.buy-page .intro .tit {
  font-family: "HarmonyOS_Sans_SC_Regular";
}

.buy-page .intro .txt {
  margin-top: 0.5rem;
  color: #000;
  line-height: 1.5;
}

.buy-page .cont {
  background-color: #fff;
}

.buy-page .cont .tit {
  font-family: "HarmonyOS_Sans_SC_Regular";
  height: 1.75rem;
  line-height: 1.75rem;
  padding: 0 0.35rem;
  color: #000;
  border-bottom: 1px solid #e8e8e8;
}

.buy-page .cont .box {
  height: 1.25rem;
  padding: 0 0.35rem;
  border-bottom: 1px solid #e8e8e8;
  background-color: #fff;
  display: flex;
  align-items: center;
}

.buy-page .cont .tab {
  margin-left: 0.8rem;
  display: flex;
  height: 100%;
}

.buy-page .cont .tab .li {
  position: relative;
  height: 100%;
  line-height: 1.25rem;
  margin-right: 1.05rem;
  color: #000;
  cursor: pointer;
  transition: all 0.4s;
}

.buy-page .cont .tab .li:last-child {
  margin-right: 0;
}

.buy-page .cont .tab .li::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background-color: var(--vi);
  transition: all 0.4s;
}

.buy-page .cont .tab .li sup {
  background-color: rgba(210, 16, 20, 0.7);
  color: #fff;
}

.buy-page .cont .tab .li:hover {
  color: var(--vi);
}

.buy-page .cont .tab .li.active {
  color: var(--vi);
}

.buy-page .cont .tab .li.active::after {
  width: 100%;
}

.buy-page .item-box {
  background-color: #fff;
  padding-bottom: 1rem;
}

.buy-page .item-box .item .tit {
  width: 100%;
  height: 1.75rem;
  line-height: 1.75rem;
  padding: 0 0.35rem;
}

.buy-page .item-box .item .top-tit {
  background-color: #f7f7f7;
  display: flex;
  align-items: center;
  height: 1.25rem;
  padding: 0 0.4rem;
}

.buy-page .item-box .item .top-tit .el-checkbox__label {
  display: none;
}

.buy-page .item-box .item .top-tit .box {
  margin-left: 0.5rem;
  width: calc(100% - 16px - 0.5rem);
  display: flex;
  align-items: center;
  color: #000;
}

.buy-page .item-box .item .top-tit .box p {
  width: 16.6666666667%;
}

.buy-page .item-box .item .li {
  height: 1.25rem;
  padding: 0 0.4rem;
  display: flex;
  align-items: center;
}

.buy-page .item-box .item .li .el-checkbox__label {
  display: none;
}

.buy-page .item-box .item .li .box {
  margin-left: 0.5rem;
  width: calc(100% - 16px - 0.5rem);
  display: flex;
  align-items: center;
}

.buy-page .item-box .item .li .box .list {
  width: 16.6666666667%;
}

.buy-page .item-box .item .li .box .list span {
  color: var(--vi);
}

.buy-page .el-checkbox {
  --el-checkbox-input-width: 16px;
  --el-checkbox-input-height: 16px;
}

.buy-page .el-checkbox__inner::after {
  top: 2px;
  left: 5px;
}

.buy-page .el-input-number {
  width: 2rem;
  line-height: 0.6rem;
  justify-content: center;
  border: 1px solid #cccccc;
}

.buy-page .el-input-number .el-input-number__decrease,
.buy-page .el-input-number .el-input-number__increase {
  width: 0.6rem;
  height: 0.6rem;
  background: none;
}

.buy-page .el-input-number .el-input {
  width: 0.8rem;
  padding: 0;
}

.buy-page .el-input-number .el-input__wrapper {
  padding: 0;
  box-shadow: none !important;
}

.buy-page .el-input-number .el-input__inner {
  height: 0.6rem;
}

.buy-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2.25rem;
  background-color: #fff;
  box-shadow: 0 -0.25rem 0.25rem rgba(89, 89, 89, 0.09);
  z-index: 100;
}

.buy-bar .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.buy-bar .left {
  color: #000;
}

.buy-bar .left span {
  color: var(--vi);
}

.buy-bar .right {
  display: flex;
  align-items: center;
}

.buy-bar .right .total {
  color: #000;
}

.buy-bar .right .total span {
  color: var(--vi);
}

.buy-bar .right .add {
  margin-left: 0.75rem;
  width: 4rem;
  height: 2.25rem;
  text-align: center;
  line-height: 2.25rem;
  background-color: var(--vi);
  color: #fff;
  cursor: pointer;
}

.market {
  background-color: #fbfbfb;
}

.market .wrap {
  padding-bottom: 1.8rem;
}

.market .el-breadcrumb {
  margin-top: 0.25rem;
}

.market .handle {
  margin-top: 0.75rem;
  background-color: #fff;
}

.market .handle .tit {
  width: 100%;
  height: 1.25rem;
  background-color: #fff;
  color: #000;
  padding: 0 0.35rem;
  line-height: 1.25rem;
  border-bottom: 1px solid #e8e8e8;
}

.market .handle .li {
  display: flex;
  align-items: baseline;
  border-bottom: 1px solid #e8e8e8;
  min-height: 1.25rem;
  padding: 10px 0.4rem;
}

.market .handle .li .h {
  width: 4em;
  color: #000;
  padding: 6px 0;
  margin-right: 0.75rem;
}

.market .handle .li .item-box {
  display: flex;
  flex-wrap: wrap;
}

.market .handle .li .item-box .item {
  position: relative;
  display: flex;
  padding: 0.25rem 0.3rem;
  padding-right: 0.7rem;
  color: var(--vi);
  border: 1px solid var(--vi);
  margin-right: 0.4rem;
}

.market .handle .li .item-box .item:last-child {
  margin-right: 0;
}

.market .handle .li .item-box .item span {
  position: absolute;
  top: 2px;
  right: 0.15rem;
  width: 12px;
  cursor: pointer;
}

.market .handle .li .item-box .item span img {
  width: 100%;
}

.market .handle .li .arr {
  width: calc(100% - 4em - 0.75rem - 1.25rem);
  display: flex;
  flex-wrap: wrap;
  padding-right: 1.25rem;
}

.market .handle .li .arr .child {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 2em - 0.8rem - 12px);
}

.market .handle .li .arr span {
  color: #000;
  padding: 6px;
  margin-right: 0.8rem;
  cursor: pointer;
  transition: all 0.4s;
}

.market .handle .li .arr span:last-child {
  margin-right: 0;
}

.market .handle .li .arr span:hover {
  color: var(--vi);
}

.market .handle .li .arr span.active {
  background-color: #ffe8e8;
  color: var(--vi);
}

.market .handle .li .all {
  padding: 6px;
  color: #000;
  margin-right: 0.8rem;
  cursor: pointer;
  transition: all 0.4s;
}

.market .handle .li .all:hover {
  color: var(--vi);
}

.market .handle .li .all.active {
  background-color: #ffe8e8;
  color: var(--vi);
}

.market .handle .li .clear {
  margin-left: 0.4rem;
  color: #000;
  cursor: pointer;
}

.market .handle .li .more {
  display: flex;
  align-items: center;
  color: #000;
  padding: 6px 0;
  cursor: pointer;
}

.market .handle .li .more span {
  margin-left: 0.25rem;
  transition: all 0.4s;
}

.market .li-box {
  margin-top: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.market .li-box .li {
  width: 24%;
  height: 8.85rem;
  /*margin-right: 1.333%;*/
  background-color: #fff;
  padding: 0.65rem 0.55rem;
  line-height: 1.5;
  margin-bottom: 0.4rem;
  transition: all 0.4s;
}

.market .li-box .li:nth-child(4n) {
  margin-right: 0;
}

.market .li-box .li .info {
  display: flex;
}

.market .li-box .li .info .pic {
  width: 1.85rem;
  height: 1.85rem;
}

.market .li-box .li .info .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.market .li-box .li .info .cont {
  width: calc(100% - 1.85rem);
  padding-left: 0.4rem;
  color: #000;
}

.market .li-box .li .link-box {
  margin-top: 0.25rem;
  position: relative;
  padding-bottom: 0.4rem;
}

.market .li-box .li .link-box .link {
  position: absolute;
  left: 2.3rem;
  bottom: 0.3rem;
  width: 2.5rem;
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  border-radius: 0.4rem;
  background-color: var(--vi);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s;
}

.market .li-box .li .item-box .item {
  color: #333;
  margin-bottom: 0.2rem;
}

.market .li-box .li .item-box .item:last-child {
  margin-bottom: 0;
}

.market .li-box .li .item-box .item span {
  color: #000;
}

.market .li-box .li .discount {
  position: relative;
  border-top: 1px solid #d2d2d2;
  padding-top: 0.45rem;
}

.market .li-box .li .discount .price {
  margin-top: 0.1rem;
}

.market .li-box .li .discount .add {
  position: absolute;
  top: 0.5rem;
  right: 0;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background-color: #ffedeb;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s;
}

.market .li-box .li .discount .add svg {
  width: 0.5rem;
  height: 0.5rem;
  fill: #d21014;
  transition: all 0.4s;
}

.market .li-box .li .discount .add:hover {
  background-color: var(--vi);
}

.market .li-box .li .discount .add:hover svg {
  fill: #fff;
}

.market .li-box .li .date {
  margin-top: 0.55rem;
  width: -moz-max-content;
  width: max-content;
  height: 20px;
  background-color: #f9eee6;
  box-shadow: 0 0 0 1px #f98c3c;
  color: #f98c3c;
  padding: 0 4px;
}

.market .li-box .li:hover {
  box-shadow: 0 1rem 0.6rem rgba(222, 222, 222, 0.05);
}

.market .li-box .li:hover .link-box .link {
  opacity: 1;
  visibility: visible;
}

.market .li-box .li:hover .discount .add {
  opacity: 1;
  visibility: visible;
}

.market .page-box {
  margin-top: 0.85rem;
}

.login-page {
  background-color: #f9f9f9;
}

.login-page .container {
  position: relative;
  padding: 1.3rem 0;
}

.login-page .wrap {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
}

.login-page .box {
  width: 14.9rem;
  padding: 1.05rem 1.45rem 1.75rem;
  background-color: #fff;
}

.login-page .submit {
  margin-top: 1.3rem;
  width: 100%;
  height: 1.5rem;
  text-align: center;
  line-height: 1.5rem;
  background-color: var(--vi);
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.login-page .btm {
  margin-top: 0.65rem;
  display: flex;
  justify-content: space-between;
}

.login-page .btm .agree {
  color: #333;
}

.login-page .btm .agree a {
  color: #ff9c38;
}

.login-page .btm .toRegister {
  color: #000;
}

.login-page .btm .toRegister a {
  color: var(--vi);
}

.login-page .getCode {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.login-page .time {
  width: 3.2rem;
  height: 100%;
  background-color: var(--vi);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.login-page .el-tabs .el-tabs__header {
  margin-bottom: 1.2rem;
}

.login-page .el-tabs .el-tabs__nav-wrap::after {
  height: 1px;
}

.login-page .el-tabs .el-tabs__item {
  padding: 0;
  height: auto;
  line-height: 1;
  padding-bottom: 0.4rem;
  font-size: 0.4rem;
  color: #999;
  margin-right: 1.5rem;
  transition: all 0.4s;
}

.login-page .el-tabs .el-tabs__item:last-child {
  margin-right: 0;
}

.login-page .el-tabs .el-tabs__item.is-active {
  color: var(--vi);
}

.login-page .el-form .el-form-item {
  flex-direction: column;
  margin-bottom: 0.55rem;
}

.login-page .el-form .el-form-item:last-child {
  margin-bottom: 0;
}

.login-page .el-form .el-form-item__label {
  align-items: center;
  justify-content: flex-start;
  height: auto;
  line-height: 1;
  color: #000;
}

.login-page .el-form .el-form-item__label::before {
  display: none;
}

.login-page .el-form .el-form-item__label div {
  width: 15px;
  margin-right: 0.2rem;
}

.login-page .el-form .el-form-item__content {
  margin-top: 0.3rem;
}

.login-page .el-form .el-input__wrapper {
  padding: 0.05rem 0.5rem;
}

.login-page .el-form .el-input__inner {
  height: 1.25rem;
}

.login-page .el-form .el-input-group__append {
  width: 3.2rem;
  box-shadow: 0 1px 0 0 var(--vi) inset, 0 -1px 0 0 var(--vi) inset, -1px 0 0 0 var(--vi) inset;
  background-color: var(--vi);
  color: #fff;
}

.login-page .remember {
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.login-page .remember .check {
  display: flex;
  align-items: center;
  color: #333;
  cursor: pointer;
}

.login-page .remember .check span {
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid #eee;
  position: relative;
  margin-right: 0.25rem;
  transition: all 0.4s;
}

.login-page .remember .check span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 4px;
  height: 10px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  opacity: 0;
  transition: all 0.4s;
}

.login-page .remember .check.active span {
  background-color: var(--vi);
  border-color: var(--vi);
}

.login-page .remember .check.active span::after {
  opacity: 1;
}

.login-page .remember .forget1 {
  color: #000;
  transition: all 0.4s;
}

.login-page .remember .forget1:hover {
  color: var(--vi);
}

.product {
  padding: 0.1rem 0 0.75rem;
  background-color: #fbfbfb;
}

.product .handle {
  margin-top: 0.75rem;
  background-color: #fff;
}

.product .handle .li {
  display: flex;
  align-items: baseline;
  border-bottom: 1px solid #e8e8e8;
  min-height: 1.25rem;
  padding: 10px 0.4rem;
}

.product .handle .li:last-child {
  border-bottom: none;
}

.product .handle .li .h {
  width: 4em;
  color: #000;
  padding: 6px 0;
  margin-right: 0.75rem;
}

.product .handle .li .item-box {
  display: flex;
  flex-wrap: wrap;
  max-width: calc(100% - 4em - 0.75rem - 1.25rem);
  gap: .4rem .7rem;
}

.product .handle .li .item-box .item {
  position: relative;
  display: flex;
  padding: 0.25rem 0.3rem;
  padding-right: 0.7rem;
  color: var(--vi);
  border: 1px solid var(--vi);
  /*margin-right: 0.4rem;*/
}

.product .handle .li .item-box .item:last-child {
  margin-right: 0;
}

.product .handle .li .item-box .item .con-box {
  display: flex;
}

.product .handle .li .item-box .item .con-box p::after {
  content: ",";
  display: inline-block;
}

.product .handle .li .item-box .item .con-box p:last-child::after {
  display: none;
}

.product .handle .li .item-box .item span {
  position: absolute;
  top: 2px;
  right: 0.15rem;
  width: 12px;
  cursor: pointer;
}

.product .handle .li .item-box .item span img {
  width: 100%;
}

.product .handle .li .arr {
  width: calc(100% - 4em - 0.75rem - 1.5rem);
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.65rem 0.8rem;
  padding-right: 1.25rem;
  height: 26px;
  overflow: hidden;
}

.product .handle .li .arr.show {
  height: auto;
}

.product .handle .li .arr .child {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 2em - 0.8rem - 12px);
  gap: 0.65rem 0.8rem;
}

.product .handle .li .arr span {
  color: #000;
  padding: 6px;
  cursor: pointer;
  transition: all 0.4s;
}

.product .handle .li .arr span:hover {
  color: var(--vi);
}

.product .handle .li .arr span.active {
  background-color: #ffe8e8;
  color: var(--vi);
}

.product .handle .li .all {
  padding: 6px;
  color: #000;
  margin-right: 0.8rem;
  cursor: pointer;
  transition: all 0.4s;
}

.product .handle .li .all:hover {
  color: var(--vi);
}

.product .handle .li .all.active {
  background-color: #ffe8e8;
  color: var(--vi);
}

.product .handle .li .clear {
  margin-left: 0.4rem;
  color: #000;
  cursor: pointer;
}

.product .handle .li .more {
  display: flex;
  align-items: center;
  color: #000;
  padding: 6px 0;
  cursor: pointer;
}

.product .handle .li .more span {
  margin-left: 0.25rem;
  transition: all 0.4s;
}

.product .handle .li .more.active span {
  transform: rotate(180deg);
}

.product .handle .select {
  display: flex;
  padding: 0.15rem 0.4rem;
  border-bottom: 1px solid #e8e8e8;
}

.product .handle .select .h {
  margin-right: 0.8rem;
  color: #000;
  height: 0.95rem;
  line-height: 0.95rem;
}

.product .handle .select .el-select {
  width: 2.5rem;
  margin-right: 0.4rem;
}

.product .handle .select .el-select:last-child {
  margin-right: 0;
}

.product .handle .select .el-select__wrapper {
  min-height: 0.95rem;
  border-radius: 0;
}

.product .handle .other .el-select__wrapper {
  padding: 4px;
}

.product .con {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e8e8e8;
  padding-right: 0.65rem;
}

.product .con .sort {
  display: flex;
}

.product .con .sort .item {
  width: 1.75rem;
  height: 1.25rem;
  padding-left: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #333;
  cursor: pointer;
  transition: all 0.4s;
}

.product .con .sort .item .arr {
  margin-left: 0.2rem;
  width: 6px;
  display: flex;
}

.product .con .sort .item.active {
  background-color: var(--vi);
  color: #fff;
}

.product .con .sort .item.active .arr {
  transform: rotate(180deg);
  filter: brightness(100);
}

.product .con .num {
  display: flex;
  color: #333;
}

.product .con .num .total {
  color: #444444;
  margin: 0 2px;
}

.product .con .num .current {
  color: var(--vi);
  margin-left: 4px;
}

.product .top-tit {
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  padding: 0 0.4rem;
  height: 1.25rem;
  background-color: #fff;
  color: #000;
  font-weight: bold;
}

.product .top-tit p {
  width: 7.5%;
  padding-right: 0.5rem;
}

.product .top-tit p:nth-child(1) {
  width: 28%;
}

.product .top-tit p:nth-child(2) {
  width: 22%;
}

.product .top-tit p:nth-child(3) {
  width: 11%;
}

.product .top-tit p:nth-child(4) {
  width: 8%;
}

.product .top-tit p:nth-child(5) {
  width: 10%;
}

.product .top-tit p:nth-child(6) {
  width: 13.5%;
}

.product .list-box {
  margin-top: 0.25rem;
}

.product .list-box .list {
  display: flex;
  padding: 0.4rem;
  background-color: #fff;
  margin-bottom: 0.25rem;
}

.product .list-box .list:last-child {
  margin-bottom: 0;
}

.product .list-box .list .info {
  display: flex;
  width: 28%;
}

.product .list-box .list .info .pic {
  width: 3.8rem;
  height: 3.8rem;
}

.product .list-box .list .info .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.product .list-box .list .info .intro {
  width: calc(100% - 3.8rem);
  padding-left: 0.5rem;
  padding-top: 0.25rem;
  line-height: 1.5;
}

.product .list-box .list .info .intro .h {
  color: #3a3838;
}
.product .list-box .list .info .intro .h span{
    padding: 2px 4px;
    background-color: #FFEDEB;
    color: var(--vi);
    margin-left: 0.12rem;
}

.product .list-box .list .info .intro .txt {
  margin-top: 0.2rem;
  color: #999;
}

.product .list-box .list .info .intro .txt span {
  color: #000;
}

.product .list-box .list .params {
  width: 22%;
  padding-top: 0.25rem;
}

.product .list-box .list .params .li {
  color: #333;
  margin-bottom: 0.35rem;
  line-height: 1.5;
}

.product .list-box .list .params .li:last-child {
  margin-bottom: 0;
}

.product .list-box .list .params .li span {
  color: #000;
  word-break: break-all;
}

.product .list-box .list .guide {
  width: 11%;
}

.product .list-box .list .guide .box {
  position: relative;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  cursor: pointer;
}

.product .list-box .list .guide .detail {
  width: 2.35rem;
  height: 0.6rem;
  border: 1px solid #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #000000;
  padding: 0 0.2rem;
}

.product .list-box .list .guide .detail p {
  margin-right: 0.2rem;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product .list-box .list .guide .view {
  margin-top: 0.3rem;
  color: #107bd2;
}

.product .list-box .list .guide .pos-cont {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  margin-left: -12rem;
  width: 24rem;
  border-radius: 0.5rem;
  background-color: #fff;
  box-shadow: 0 0.1rem 0.25rem rgba(84, 84, 84, 0.2);
  padding: 0 0.8rem 4px 0.65rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: all 0.4s;
}

.product .list-box .list .guide .pos-cont.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  z-index: 10;
}

.product .list-box .list .guide .pos-cont .thead {
  display: flex;
  align-items: center;
  height: 1.2rem;
}

.product .list-box .list .guide .pos-cont .thead p {
  width: 2.1rem;
  color: #000000;
}

.product .list-box .list .guide .pos-cont .thead p:nth-child(1) {
  width: 30%;
}

.product .list-box .list .guide .pos-cont .thead p:nth-child(2) {
  width: 24.7%;
}

.product .list-box .list .guide .pos-cont .thead p:nth-child(3) {
  width: calc(45.3% - 2.1rem);
}

.product .list-box .list .guide .pos-cont .thead p:nth-child(4) {
  text-align: center;
}

.product .list-box .list .guide .pos-cont .tbody .li {
  display: flex;
  align-items: center;
  height: 1.25rem;
  border-bottom: 1px solid #e8e8e8;
  color: #000;
}

.product .list-box .list .guide .pos-cont .tbody .li:first-child {
  border-top: 1px solid #e8e8e8;
}

.product .list-box .list .guide .pos-cont .tbody .li .num {
  width: 30%;
}

.product .list-box .list .guide .pos-cont .tbody .li .time {
  width: 24.7%;
}

.product .list-box .list .guide .pos-cont .tbody .li .price2 {
  width: calc(45.3% - 2.1rem);
  display: flex;
  align-items: baseline;
}

.product .list-box .list .guide .pos-cont .tbody .li .price2 p {
  color: var(--vi);
}

.product .list-box .list .guide .pos-cont .tbody .li .price2 span {
  color: #ff9c38;
  margin-left: 0.2rem;
}

.product .list-box .list .guide .pos-cont .tbody .li .operate2 {
  width: 2.1rem;
  display: flex;
  justify-content: center;
}

.product .list-box .list .guide .pos-cont .tbody .li .operate2 span {
  width: 0.5rem;
  margin-right: 0.2rem;
}

.product .list-box .list .guide .pos-cont .tbody .li .operate2 span:last-child {
  margin-right: 0;
}

.product .list-box .list .guide .pos-cont .close {
  width: 2.1rem;
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  border-radius: 0.4rem;
  background-color: var(--vi);
  color: #fff;
  margin-top: 4px;
  margin-left: calc(100% - 2.1rem);
  cursor: pointer;
}

.product .list-box .list .brand {
  width: 8%;
  color: #3a3838;
  line-height: 1.5;
}

.product .list-box .list .date {
  width: 10%;
  color: #3a3838;
  padding-right: .5rem;
}

.product .list-box .list .price {
  width: 13.5%;
  line-height: 1;
}

.product .list-box .list .price .h1 {
  color: var(--vi);
}

.product .list-box .list .price .h2 {
  margin-top: 0.5rem;
  color: #ff9c38;
}

.product .list-box .list .operate {
  width: 7.5%;
}

.product .list-box .list .operate .fl-box {
  display: flex;
}

.product .list-box .list .operate .fl-box div {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.4s;
}

.product .list-box .list .operate .fl-box div:hover {
  background-color: var(--vi);
}

.product .list-box .list .operate .fl-box div:hover img {
  filter: brightness(100);
}

.product .list-box .list .operate .fl-box div img {
  max-width: 50%;
  max-height: 50%;
  -o-object-fit: contain;
  object-fit: contain;
}

.product .list-box .list .operate .fl-box .add {
  background-color: #ffedeb;
  margin-right: 0.5rem;
}

.product .list-box .list .operate .fl-box .collect {
  background-color: rgba(255, 154, 58, 0.2);
}

.product .list-box .list .operate .fl-box .collect.active {
  background-color: #FF9A3A;
}

.product .list-box .list .operate .fl-box .collect.active img {
  filter: brightness(100);
}

.product .list-box .list .operate .copy {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  color: #000;
  width: -moz-max-content;
  width: max-content;
  position: relative;
  left: -2em;
  cursor: pointer;
}

.product .list-box .list .operate .copy span {
  width: 16px;
  margin-right: 6px;
}

.product .page-box {
  margin-top: 1.75rem;
}

.padRg {
  padding-right: 0.5rem;
}

.pro-info-page {
  padding: 0.1rem 0 1.75rem;
  background-color: #fbfbfb;
}

.pro-info-page .wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.pro-info-page .lf {
  width: 77.5%;
}

.pro-info-page .lf .intro {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  padding: 0.5rem;
  background-color: #fff;
}

.pro-info-page .lf .swiper-box {
  position: relative;
  width: 4.55rem;
  aspect-ratio: 1/1;
}

.pro-info-page .lf .swiper-box .swiper-pagination {
  width: -moz-max-content;
  width: max-content;
  left: auto;
  bottom: 0.25rem;
  right: 0.25rem;
  padding: 2px 5px;
  color: #fff;
  background-color: rgba(62, 62, 62, 0.39);
  border-radius: 0.5rem;
}

.pro-info-page .lf .swiper-box .swiper-button-prev,
.pro-info-page .lf .swiper-box .swiper-button-next {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: rgba(51, 51, 51, 0.16);
  color: #fff;
  margin: 0;
  transform: translateY(-50%);
}

.pro-info-page .lf .swiper-box .swiper-button-prev::after,
.pro-info-page .lf .swiper-box .swiper-button-next::after {
  font-size: 0.2rem;
}

.pro-info-page .lf .swiper-box .swiper-button-prev {
  left: -0.3rem;
}

.pro-info-page .lf .swiper-box .swiper-button-next {
  right: -0.3rem;
}

.pro-info-page .lf .info-swiper {
  width: 100%;
  height: 100%;
}

.pro-info-page .lf .info-swiper .swiper-slide {
  width: 100%;
  height: 100%;
  margin-right: 1rem;
}

.pro-info-page .lf .info-swiper .swiper-slide:last-child {
  margin-right: 0;
}

.pro-info-page .lf .info-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.pro-info-page .lf .box {
  width: calc(100% - 4.55rem);
  padding-left: 0.4rem;
}

.pro-info-page .lf .box .title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.pro-info-page .lf .box .title .h1 {
  font-weight: 600;
  color: #000;
  line-height: 1.2;
}

.pro-info-page .lf .box .title .brand {
  margin-top: 0.2rem;
  color: #000;
  line-height: 1.2;
}

.pro-info-page .lf .box .title .brand a {
  color: #107bd2;
}

.pro-info-page .lf .box .title .share {
  display: flex;
  align-items: center;
  color: #107bd2;
  line-height: 1.2;
  cursor: pointer;
}

.pro-info-page .lf .box .title .share span {
  width: 13px;
  margin-right: 0.2rem;
}

.pro-info-page .lf .box .mid {
  margin-top: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pro-info-page .lf .box .mid .down {
  display: flex;
  align-items: center;
  color: #000;
}

.pro-info-page .lf .box .mid .down span {
  width: 16px;
  margin-right: 6px;
}

.pro-info-page .lf .box .mid .view {
  display: flex;
  align-items: center;
}

.pro-info-page .lf .box .mid .scan {
  position: relative;
  display: flex;
  align-items: center;
  background-color: rgba(255, 154, 58, 0.2);
  padding: 0.1rem 0.2rem;
  margin-right: 2.95rem;
  color: #ff800a;
}

.pro-info-page .lf .box .mid .scan .cir {
  border-radius: 50%;
  background-color: #fff;
}

.pro-info-page .lf .box .mid .scan span {
  width: 0.35rem;
  height: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pro-info-page .lf .box .mid .scan p {
  margin: 0 2px 0 5px;
}

.pro-info-page .lf .box .mid .scan .pos-code {
  position: absolute;
  top: 0;
  left: calc(100% + 0.25rem);
  width: 2.15rem;
  opacity: 0;
  visibility: hidden;
  transform: translateX(0.5rem);
  transition: all 0.4s;
}

.pro-info-page .lf .box .mid .scan .pos-code img {
  width: 100%;
}

.pro-info-page .lf .box .mid .scan:hover .pos-code {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.pro-info-page .lf .box .mid .type {
  display: flex;
  align-items: center;
}

.pro-info-page .lf .box .mid .type .li {
  display: flex;
  align-items: center;
  margin-right: 0.5rem;
  cursor: pointer;
}

.pro-info-page .lf .box .mid .type .li:last-child {
  margin-right: 0;
}

.pro-info-page .lf .box .mid .type .li span {
  width: 16px;
  margin-right: 4px;
  color: #000000;
}

.pro-info-page .lf .box .bot {
  margin-top: 0.4rem;
  display: flex;
  align-items: flex-start;
  padding: 0.35rem;
  background-color: #f7f7f7;
}

.pro-info-page .lf .box .bot .h {
  color: #000;
  width: 1.65rem;
}

.pro-info-page .lf .box .bot .item-box {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 1.65rem - 3.5em);
  padding-right: 1rem;
  height: 1.6em;
  overflow: hidden;
}

.pro-info-page .lf .box .bot .item-box .item {
  color: #000;
  width: 50%;
  padding-right: 0.5rem;
}

.pro-info-page .lf .box .bot .item-box.show {
  height: auto;
}

.pro-info-page .lf .box .bot .clk {
  width: 3.5em;
  color: #107bd2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.pro-info-page .lf .tab {
  display: flex;
  align-items: center;
  height: 1.6rem;
  line-height: 1.6rem;
  background-color: #fff;
  border: 2px solid #F6F3F3;
}

.pro-info-page .lf .tab a {
  position: relative;
  flex: 1;
  white-space: nowrap;
  padding: 0 0.3rem;
  /*margin-right: 0.3rem;*/
  color: #000;
  border-right: 2px solid #F6F3F3;
  text-align: center;
  cursor: pointer;
  transition: all 0.4s;
}

.pro-info-page .lf .tab a:last-child {
  margin-right: 0;
  border-right: none;
}

.pro-info-page .lf .tab a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: #F0B4B5;
  transition: all 0.4s;
}

.pro-info-page .lf .tab a:hover {
  color: var(--vi);
}

.pro-info-page .lf .tab a.active {
  color: var(--vi);
  background: #FFEEEE;
}

.pro-info-page .lf .tab a.active::after {
  width: 100%;
}

.pro-info-page .lf .item-con {
  padding: 0.85rem 0 1.75rem;
  background-color: #fff;
}

.embed-icon-pcIcon4 {
  opacity: 0;
}

.pro-info-page .lf .item-con .h {
  color: #000;
  padding: 0 0.35rem;
  line-height: 1.1;
  font-family: 'HarmonyOS_Sans_SC_Medium';
}

.pro-info-page .lf .item-con .item {
  margin-bottom: 0.85rem;
}

.pro-info-page .lf .item-con .item:last-child {
  margin-bottom: 0;
}

.pro-info-page .lf .item-con .item .li-box {
  margin-top: 0.5rem;
  padding: 0 0.5rem;
}

.pro-info-page .lf .item-con .item .li-box table {
  width: 100%;
}

.pro-info-page .lf .item-con .item .li-box tr {
  width: 100%;
  height: 1.25rem;
  background-color: #fff;
}

.pro-info-page .lf .item-con .item .li-box tr:nth-child(2n) {
  background-color: #f7f7f7;
}

.pro-info-page .lf .item-con .item .li-box tr td {
  width: 16%;
  padding: 0 0.35rem;
}

.pro-info-page .lf .item-con .item .li-box tr td:nth-child(2) {
  width: 60%;
}

.pro-info-page .lf .item-con .item .li-box .li {
  width: 100%;
  height: 1.25rem;
  background-color: #fff;
  padding: 0 0.35rem;
  display: flex;
  align-items: center;
}

.pro-info-page .lf .item-con .item .li-box .li:nth-child(2n) {
  background-color: #f7f7f7;
}

.pro-info-page .lf .item-con .item .li-box .li p {
  width: 16%;
}

.pro-info-page .lf .item-con .item .li-box .li span {
  width: 60%;
}

.pro-info-page .lf .item-con .describe .txt {
  margin-top: 0.9rem;
  line-height: 1.5;
  padding: 0 0.85rem;
}

.pro-info-page .lf .item-con .img {
  margin-top: 1.25rem;
}

.pro-info-page .lf .item-con .img .li-box {
  margin-top: 0.9rem;
  padding: 0 0.85rem;
}

.pro-info-page .lf .item-con .img .li-box .li {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.pro-info-page .lf .item-con .img .li-box .li:last-child {
  margin-bottom: 0;
}

.pro-info-page .lf .item-con .img .li-box .li .pic {
  width: 4.15rem;
  height: 4.15rem;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #cccccc60;
}

.pro-info-page .lf .item-con .img .li-box .li .pic img {
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.pro-info-page .lf .item-con .img .li-box .li .txt {
  width: calc(100% - 4.15rem);
  padding-top: 0.5rem;
  padding-left: 0.5rem;
}

.pro-info-page .lf .item-con .references {
  margin-top: 1rem;
}

.pro-info-page .lf .item-con .references .li-box {
  margin-top: 0.95rem;
  padding: 0 1.3rem 0 0.5rem;
}

.pro-info-page .lf .item-con .references .li-box .li {
  line-height: 1.5;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #dfdfdf;
}

.pro-info-page .lf .item-con .references .li-box .li:last-child {
  margin-bottom: 0;
}

.pro-info-page .lf .item-con .references .li-box .li .txt {
  color: #000;
}

.pro-info-page .lf .item-con .references .li-box .li .id {
  margin-top: 6px;
  color: #999;
}

.pro-info-page .lf .item-con .references .li-box .li .more {
  display: block;
  margin-top: 0.35rem;
  width: -moz-max-content;
  width: max-content;
  background-color: #fce5e7;
  padding: 2px 0.2rem;
  color: var(--vi);
  border-radius: 0.3rem;
}

.pro-info-page .lf .item-con .comment {
  margin-top: 1rem;
  position: relative;
}

.pro-info-page .lf .item-con .comment .publish {
  position: absolute;
  top: 0;
  right: 0.5rem;
  display: flex;
  align-items: center;
  color: #000;
  cursor: pointer;
}

.pro-info-page .lf .item-con .comment .publish span {
  width: 0.55rem;
  margin-right: 3px;
}

.pro-info-page .lf .item-con .comment .li-box {
  margin-top: 0.75rem;
  padding: 0 0.5rem;
}

.pro-info-page .lf .item-con .comment .li-box .li {
  padding-bottom: 0.95rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #dfdfdf;
}

.pro-info-page .lf .item-con .comment .li-box .li:last-child {
  margin-bottom: 0;
}

.pro-info-page .lf .item-con .comment .li-box .li .user {
  display: flex;
  align-items: center;
  color: #000;
}

.pro-info-page .lf .item-con .comment .li-box .li .user div {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  margin-right: 0.2rem;
}

.pro-info-page .lf .item-con .comment .li-box .li .user img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.pro-info-page .lf .item-con .comment .li-box .li .con {
  margin-top: 0.45rem;
  display: flex;
}

.pro-info-page .lf .item-con .comment .li-box .li .con .pic {
  width: 4.15rem;
  height: 4.15rem;
  position: relative;
  overflow: hidden;
}

.pro-info-page .lf .item-con .comment .li-box .li .con .pic img {
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.pro-info-page .lf .item-con .comment .li-box .li .con .box {
  width: calc(100% - 4.15rem);
  line-height: 1.5;
}

.pro-info-page .lf .item-con .comment .li-box .li .con .box .txt {
  color: #000;
}

.pro-info-page .lf .item-con .comment .li-box .li .con .box .time {
  margin-top: 0.3rem;
  color: #999;
}

.pro-info-page .lf .item-con .comment .li-box .li .con .box .rate {
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
}

.pro-info-page .lf .item-con .comment .li-box .li .con .box .likes {
  display: flex;
  margin-left: 0.45rem;
  color: #000000;
}

.pro-info-page .lf .item-con .comment .li-box .li .con .box .likes span {
  width: 0.55rem;
  margin-right: 6px;
  cursor: pointer;
}

.pro-info-page .lf .item-con .comment .li-box .li .con .box .likes svg {
  fill: #000;
  width: 100%;
}

.pro-info-page .lf .item-con .comment .li-box .li .con .box .likes.liked svg {
  fill: var(--vi);
}

.pro-info-page .lf .item-con .comment .noComment {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}

.pro-info-page .lf .item-con .comment .noComment .pic {
  width: 4.5rem;
  margin-right: 0.7rem;
}

.pro-info-page .lf .item-con .comment .noComment .pic img {
  width: 100%;
}

.pro-info-page .lf .item-con .comment .page-box {
  margin-top: 1rem;
}

.pro-info-page .rg {
  position: sticky;
  top: 0.5rem;
  width: calc(22.5% - 0.25rem);
  background-color: #fff;
}

.pro-info-page .rg .num {
  display: flex;
  height: 1rem;
  line-height: 1rem;
  color: #fff;
}

.pro-info-page .rg .num p {
  width: calc(100% - 1.85rem);
  height: 100%;
  background: linear-gradient(to right, rgba(254, 21, 21, 0.88), #f55419 60%);
  padding: 0 0.4rem;
}

.pro-info-page .rg .num .copy {
  width: 1.85rem;
  height: 100%;
  text-align: center;
  background: #ff8b1e;
  cursor: pointer;
}

.pro-info-page .rg .intro {
  padding: 0.7rem 0.4rem 0;
}

.pro-info-page .rg .intro .agree-price {
  display: flex;
  align-items: baseline;
  color: #b25624;
}

.pro-info-page .rg .intro .agree-price span {
  color: var(--vi);
}

.pro-info-page .rg .intro .list-price {
  margin-top: 0.2rem;
  display: flex;
  color: #000;
}

.pro-info-page .rg .intro .guide {
  margin-top: 0.45rem;
  display: flex;
}

.pro-info-page .rg .intro .guide p {
  min-width: 1.45rem;
  width: auto;
  padding: 5px 0.3rem;
  text-align: center;
  line-height: 0.6rem;
  border: 1px solid #cccccc;
  margin-right: 0.25rem;
  cursor: pointer;
  transition: all 0.4s;
}

.pro-info-page .rg .intro .guide p:last-child {
  margin-right: 0;
}

.pro-info-page .rg .intro .guide p.active {
  background-color: #fce5e7;
  border-color: var(--vi);
  color: var(--vi);
}

.pro-info-page .rg .intro .count {
  margin-top: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pro-info-page .rg .intro .count .h {
  color: #000;
}

.pro-info-page .rg .intro .count .computed {
  display: flex;
  border: 1px solid #cccccc;
}

.pro-info-page .rg .intro .count .computed button {
  width: 0.6rem;
  height: 0.6rem;
  line-height: 0.6rem;
  font-size: 0.6rem;
  background: none;
}

.pro-info-page .rg .intro .count .computed button[disabled] {
  opacity: 0.3;
}

.pro-info-page .rg .intro .count .computed input {
  width: 0.75rem;
  height: 0.6rem;
  text-align: center;
  background: none;
  border-left: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
}

.pro-info-page .rg .intro .tips {
  margin-top: 0.8rem;
}

.pro-info-page .rg .intro .tips .start {
  color: #000;
}

.pro-info-page .rg .intro .tips .time {
  margin-top: 0.25rem;
  color: #000000;
}

.pro-info-page .rg .intro .contact {
  margin-top: 0.85rem;
}

.pro-info-page .rg .intro .contact .tel {
  display: flex;
  align-items: center;
  color: #000;
}

.pro-info-page .rg .intro .contact .tel span {
  color: #f55419;
}

.pro-info-page .rg .intro .contact .other {
  margin-top: 0.2rem;
  color: #666;
}

.pro-info-page .rg .intro .contact .other a {
  color: #ff9c38;
}

.pro-info-page .rg .intro .btn-box {
  margin-top: 1rem;
  display: flex;
}

.pro-info-page .rg .intro .btn-box .btn {
  width: 50%;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  border-top: 1px solid #575757;
  cursor: pointer;
}

.pro-info-page .rg .intro .btn-box .add {
  background-color: rgba(255, 154, 58, 0.2);
  color: #f67b00;
  border-top: none;
}

.pro-info-page .rg .intro .btn-box .buy {
  background-color: var(--vi);
  color: #fff;
  border-top: none;
}

.pro-info-page .el-rate__text {
  display: none;
}

.pro-info-page .el-form {
  margin-top: 1.05rem;
  display: flex;
  flex-wrap: wrap;
}

.pro-info-page .el-form .el-form-item {
  align-items: center;
  margin-left: 0.9rem;
  margin-bottom: 0;
}

.pro-info-page .el-form .el-form-item:first-child {
  margin-left: 0;
}

.pro-info-page .el-form .el-form-item:last-child {
  margin-left: 0;
}

.pro-info-page .el-form .el-form-item__label {
  font-size: 16px;
  color: #000;
}

.pro-info-page .el-form .el-input {
  width: 6.5rem;
  line-height: 1.1rem;
}

.pro-info-page .el-form .el-input__inner {
  height: 1.1rem;
  line-height: 1.1rem;
  font-size: 16px;
}

.pro-info-page .el-form .el-radio__inner {
  width: 16px;
  height: 16px;
  border-radius: 0;
}

.pro-info-page .el-form .el-radio__inner::after {
  top: 45%;
  width: 4px;
  height: 9px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-radius: 0;
  background-color: transparent;
  transform: translate(-50%, -50%) rotate(45deg);
}

.pro-info-page .el-form .el-radio__label {
  font-size: 16px;
}

.pro-info-page .el-form .submit {
  width: 100%;
  margin-top: 1.15rem;
}

.pro-info-page .el-form .el-button {
  margin: 0 auto;
  width: 3.75rem;
  height: 1rem;
  border-radius: 0.5rem;
  transition: all 0.4s;
}

.pro-info-page .el-form .el-button:hover,
.pro-info-page .el-form .el-button:focus {
  background-color: var(--vi);
  border-color: var(--vi);
}

.pro-info-page .el-upload--picture-card {
  width: 3.05rem;
  height: 3.05rem;
  background-color: #f7f7f7;
  border: none;
  border-radius: 0;
}

.pro-info-page .el-rate .el-rate__icon {
  margin-right: 0;
}

.dialog-rate {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
}

.dialog-rate .wrap {
  position: absolute;
  bottom: 2.1rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 1.5rem 1.95rem 1.85rem;
  background-color: #fff;
  box-shadow: 0 4px 0.95rem rgba(210, 210, 210, 0.25);
  border-radius: 1rem;
  overflow: hidden;
  max-height: 90%;
  bottom: 1rem;
  overflow-y: auto;
}

.dialog-rate .wrap::-webkit-scrollbar {
  display: none;
}

.dialog-rate .close {
  position: absolute;
  top: -1.3rem;
  right: -1.1rem;
  width: 2.5rem;
  height: 3rem;
  transform: rotate(-45deg);
  border-radius: 50%;
  background-color: rgba(255, 154, 58, 0.2);
  cursor: pointer;
}

.dialog-rate .close img {
  position: absolute;
  bottom: 1.2rem;
  left: 0.3rem;
  transform: rotate(45deg);
}

.dialog-rate .txt {
  margin-top: 0.75rem;
  line-height: 1.1;
  color: #000;
}

.dialog-rate .rate {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  color: #000;
}

.dialog-rate .rate .el-rate__text {
  margin-left: 0.4rem;
}

.dialog-rate .message {
  margin-top: 0.75rem;
  width: 100%;
  height: 4rem;
}

.dialog-rate .message textarea {
  width: 100%;
  height: 100%;
  resize: none;
  border: 1px solid #d9d9d9;
  border-radius: 0.25rem;
  padding: 0.4rem 0.35rem;
}

.dialog-rate .gift {
  margin-top: 0.75rem;
  line-height: 1.5;
  color: var(--vi);
}

.dialog-rate .upload {
  margin-top: 0.75rem;
  display: flex;
}

.dialog-rate .upload .h {
  width: 3em;
}

.dialog-rate .upload .box {
  max-width: calc(100% - 3em);
}

.dialog-rate .upload .tips {
  margin-top: 0.2rem;
  color: #ff1f24;
}

.dialog-rate .upload .el-icon {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background-color: #ffca00;
  color: #fff;
  font-size: 18px;
}

.dialog-share {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 199;
  background-color: rgba(0, 0, 0, 0.6);
}

.dialog-share .container {
  position: absolute;
  top: 21%;
  left: 50%;
  transform: translateX(-50%);
  width: 8.5rem;
}

.dialog-share .close {
  position: absolute;
  top: -1.5rem;
  right: -1.35rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.dialog-share .close img {
  max-width: 40%;
  max-height: 40%;
  -o-object-fit: contain;
  object-fit: contain;
}

.dialog-share .top-con {
  position: relative;
  width: 100%;
  padding: 3.25rem 0.65rem 0.65rem;
  background-color: #f8e7d6;
  background-image: url(@/assets/img/53.png);
  border-radius: 0.5rem;
}

.dialog-share .top-con .pic {
  position: absolute;
  top: -3.1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 6.7rem;
}

.dialog-share .top-con .pic img {
  width: 100%;
}

.dialog-share .top-con .intro {
  position: relative;
  border-radius: 0.2rem;
  background-color: #fff;
  padding: 0.5rem;
}

.dialog-share .top-con .intro .code {
  position: absolute;
  top: 1.65rem;
  right: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

.dialog-share .top-con .intro .code div {
  width: 1.75rem;
}

.dialog-share .top-con .intro .code div img {
  width: 100%;
}

.dialog-share .top-con .intro .code p {
  margin-top: 6px;
  padding: 1px 6px;
  background-color: rgba(255, 154, 58, 0.2);
  color: #ff9a3a;
  font-size: 10px;
  border-radius: 4px;
}

.dialog-share .top-con .intro .h {
  color: #000;
  line-height: 1.5;
}

.dialog-share .top-con .intro .price {
  margin-top: 0.6rem;
  display: flex;
  align-items: baseline;
  color: #333;
  margin-bottom: 0.6rem;
}

.dialog-share .top-con .intro .price span {
  color: #ff0000;
}

.dialog-share .top-con .intro .price p {
  color: #ff0000;
}

.dialog-share .top-con .intro .item {
  color: #999;
  line-height: 1.5;
  margin-bottom: 0.2rem;
}

.dialog-share .top-con .intro .item:last-child {
  margin-bottom: 0;
}

.dialog-share .top-con .intro .item span {
  color: #666;
}

.dialog-share .btn {
  margin-top: 0.55rem;
  width: 100%;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  color: #fff;
  border-radius: 0.2rem;
  background: linear-gradient(90deg, rgba(251, 227, 181, 0.6) -24.71%, rgba(255, 109, 109, 0.6) 22.03%, rgba(255, 125, 181, 0.6) 55.18%, rgba(249, 164, 104, 0.6) 129.44%);
  cursor: pointer;
}

.dialog-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 199;
  background-color: rgba(0, 0, 0, 0.6);
}

.dialog-preview .container {
  position: absolute;
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
  width: 22.75rem;
  padding: 0.75rem 1.5rem 1.05rem;
  background-color: #fff;
  box-shadow: 0 4px 0.95rem rgba(210, 210, 210, 0.25);
  border-radius: 1rem;
  overflow: hidden;
}

.dialog-preview .close {
  position: absolute;
  top: -1.3rem;
  right: -1.1rem;
  width: 2.5rem;
  height: 3rem;
  transform: rotate(-45deg);
  border-radius: 50%;
  background-color: rgba(255, 154, 58, 0.2);
  cursor: pointer;
}

.dialog-preview .close img {
  position: absolute;
  bottom: 1.2rem;
  left: 0.3rem;
  transform: rotate(45deg);
}

.dialog-preview .swiper-box {
  position: relative;
  width: 10.1rem;
  margin: 0 auto;
  aspect-ratio: 1/1;
}

.dialog-preview .swiper-box .swiper-button-prev,
.dialog-preview .swiper-box .swiper-button-next {
  color: #333;
}

.dialog-preview .swiper-box .swiper-button-prev::after,
.dialog-preview .swiper-box .swiper-button-next::after {
  font-size: 0.5rem;
}

.dialog-preview .swiper-box .swiper-button-prev {
  right: calc(100% + 0.6rem);
}

.dialog-preview .swiper-box .swiper-button-next {
  left: calc(100% + 0.6rem);
}

.dialog-preview .dialog-swiper {
  height: 100%;
}

.dialog-preview .dialog-swiper .swiper-slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog-preview .dialog-swiper .swiper-slide img {
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.dialog-preview .tab {
  margin-top: 0.3rem;
  display: flex;
  justify-content: center;
}

.dialog-preview .tab div {
  width: 2.3rem;
  aspect-ratio: 1/1;
  margin-right: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.4s;
}

.dialog-preview .tab div:last-child {
  margin-right: 0;
}

.dialog-preview .tab div img {
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.dialog-preview .tab div.active {
  box-shadow: 0 0 0 2px #e50012;
}

.dialog-preview .txt {
  margin-top: 0.75rem;
  color: #000;
  line-height: 1.6;
}

.dialog-balance {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 199;
  background-color: rgba(0, 0, 0, 0.6);
}

.dialog-balance .container {
  position: absolute;
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
  width: 13.15rem;
  padding: 1.85rem 1rem;
  background-color: #fff;
  box-shadow: 0 4px 0.95rem rgba(210, 210, 210, 0.25);
  text-align: center;
  border-radius: 1rem;
  overflow: hidden;
}

.dialog-balance .close {
  position: absolute;
  top: -1.3rem;
  right: -1.1rem;
  width: 2.5rem;
  height: 3rem;
  transform: rotate(-45deg);
  border-radius: 50%;
  background-color: rgba(255, 154, 58, 0.2);
  cursor: pointer;
}

.dialog-balance .close img {
  position: absolute;
  bottom: 1.2rem;
  left: 0.3rem;
  transform: rotate(45deg);
}

.dialog-balance .tit {
  color: #000;
  line-height: 1.5;
}

.dialog-balance .txt {
  margin-top: 0.5rem;
  color: #000;
  line-height: 1.5;
}

.dialog-balance .to {
  margin: 1.25rem auto 0;
  display: block;
  width: 3.75rem;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  border-radius: 0.5rem;
  background-color: var(--vi);
  color: #fff;
}

.register-page {
  padding: 1.5rem 0 2.5rem;
  background-color: #f9f9f9;
}

.register-page .el-steps--horizontal {
  width: 17rem;
  margin: 0 auto;
}

.register-page .el-steps--horizontal .el-step__head.is-success,
.register-page .el-steps--horizontal .el-step__head.is-process {
  color: #fff;
}

.register-page .el-steps--horizontal .el-step__head.is-success .el-step__icon,
.register-page .el-steps--horizontal .el-step__head.is-process .el-step__icon {
  background-color: var(--vi);
}

.register-page .el-steps--horizontal .el-step__head.is-success .el-step__icon::after,
.register-page .el-steps--horizontal .el-step__head.is-process .el-step__icon::after {
  transform: scale(1);
  opacity: 1;
}

.register-page .el-steps--horizontal .el-step__main {
  margin-top: 0.5rem;
}

.register-page .el-steps--horizontal .el-step__title {
  line-height: 1;
}

.register-page .el-steps--horizontal .el-step__title.is-success,
.register-page .el-steps--horizontal .el-step__title.is-process {
  color: var(--vi);
}

.register-page .el-steps--horizontal .el-step__icon {
  width: 0.9rem;
  height: 0.9rem;
  border-width: 1px;
  border-color: #e9e9e9;
  background: #f9f9f9;
  font-size: 0.45rem;
  position: relative;
}

.register-page .el-steps--horizontal .el-step__icon::after {
  content: "";
  position: absolute;
  top: -25%;
  left: -25%;
  width: 150%;
  height: 150%;
  border-radius: 50%;
  background-color: rgba(210, 16, 20, 0.1);
  z-index: -1;
  transform: scale(0);
  opacity: 0;
  transition: all 0.4s;
}

.register-page .el-steps--horizontal .el-step__icon-inner {
  font-family: "HarmonyOS_Sans_SC_Regular";
}

.register-page .el-steps--horizontal .el-step__line {
  top: 15px;
  height: 5px;
  width: 80%;
  left: 60%;
  background-color: rgba(0, 0, 0, 0.1);
}

.register-page .container {
  margin-top: 1.5rem;
  padding: 1.55rem 1.45rem 2.5rem;
  background-color: #fff;
}

.register-page .container .el-form {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  --el-font-size-base: 0.4rem;
}

.register-page .container .el-form .captcha .el-input {
  justify-content: space-between;
}

.register-page .container .el-form .captcha .el-input__wrapper {
  width: 4.5rem;
  margin-right: 6px;
  box-sizing: border-box;
}

.register-page .container .el-form .captcha .code {
  display: flex;
  width: 4rem;
  height: 1.25rem;
}

.register-page .container .el-form .captcha .code img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.register-page .container .el-form .phone .el-input-group__append {
  display: none;
}

.register-page .container .el-form .verified .el-input {
  justify-content: space-between;
}

.register-page .container .el-form .verified .el-input__wrapper {
  width: 6.2rem;
  flex-grow: initial;
}

.register-page .container .el-form .verified .el-input-group__append {
  display: block;
}

.register-page .container .el-form .city .city-list {
  width: 32%;
  margin-right: 2%;
  margin-bottom: 0;
}

.register-page .container .el-form .city .city-list:last-child {
  margin-right: 0;
}

.register-page .container .el-form .el-form-item {
  width: 30%;
  margin-right: 5%;
  flex-direction: column;
  --font-size: 0.4rem;
  margin-bottom: 1.35rem;
}

.register-page .container .el-form .el-form-item .el-form-item__label {
  width: 100%;
  height: auto;
  line-height: 1;
  margin-bottom: 0.3rem;
  padding: 0;
  align-items: center;
  justify-content: flex-start;
  font-size: 0.4rem;
  color: #000;
}

.register-page .container .change-type {
  width: max-content;
  padding: 0 .4rem;
  height: 24px;
  text-align: center;
  line-height: 24px;
  box-shadow: 0 0 0 1px #D9D9D9;
  transform: skew(-30deg);
  border-radius: 2px;
  margin-left: 10px;
  cursor: pointer;
}

.register-page .container .change-type span {
  transform: skew(30deg);
  display: inline-block;
}

.register-page .container .el-form .el-form-item .el-form-item__content {
  width: 100%;
  line-height: 1.25rem;
}

.register-page .container .el-form .el-form-item .el-input {
  --el-component-size: 1.25rem;
}

.register-page .container .el-form .el-form-item .el-input-group__append {
  box-shadow: none;
  background: none;
  padding: 0;
}

.register-page .container .el-form .el-form-item .el-select__wrapper {
  height: 1.25rem;
  font-size: 0.4rem;
}

.register-page .container .el-form .el-form-item .el-radio-group {
  flex-wrap: nowrap;
}

.register-page .container .el-form .el-form-item .el-radio-button {
  width: 4.25rem;
  margin-right: 0.35rem;
}

.register-page .container .el-form .el-form-item .el-radio-button:last-child {
  margin-right: 0;
}

.register-page .container .el-form .el-form-item .el-radio-button.is-active .el-radio-button__inner {
  background: none;
  border-color: var(--vi);
}

.register-page .container .el-form .el-form-item .el-radio-button.is-active .el-radio-button__inner::before,
.register-page .container .el-form .el-form-item .el-radio-button.is-active .el-radio-button__inner::after {
  opacity: 1;
}

.register-page .container .el-form .el-form-item .el-radio-button__inner {
  width: 100%;
  height: 1.25rem;
  line-height: 1.25rem;
  padding: 0;
  text-align: center;
  border-left: var(--el-border);
  border-radius: 0.1rem;
  color: #000;
  box-shadow: none;
}

.register-page .container .el-form .el-form-item .el-radio-button__inner::before {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 2px;
  width: 5px;
  height: 10px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(45deg);
  z-index: 1;
  opacity: 0;
  transition: all 0.4s;
}

.register-page .container .el-form .el-form-item .el-radio-button__inner::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 0.9rem;
  height: 0.45rem;
  background: var(--vi);
  -webkit-clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0% 100%);
  opacity: 0;
  transition: all 0.4s;
}

.register-page .container .el-form .el-form-item .getCode {
  width: 3.2rem;
  height: 100%;
  background-color: var(--vi);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.register-page .container .el-form .el-form-item .time {
  width: 3.2rem;
  height: 100%;
  background-color: var(--vi);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.register-page .container .el-form .el-form-item .success {
  display: flex;
  align-items: center;
  color: #03b403;
}

.register-page .container .el-form .el-form-item .success span {
  position: relative;
  background-color: #03b403;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  margin-right: 0.2rem;
}

.register-page .container .el-form .el-form-item .success span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 3px;
  height: 7px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.register-page .container .el-form .el-form-item .btn {
  margin: 0.65rem auto 0;
  width: 11.5rem;
  height: 1.5rem;
  border-radius: 4px;
}

.register-page .container .el-form .el-form-item.wid2 {
  width: 48%;
  margin-right: 4%;
}

.register-page .container .el-form .el-form-item.wid1 {
  width: 100%;
  margin-right: 0;
}

.register-page .container .el-form .el-form-item.wid2-1 {
  width: 38%;
  margin-right: 5%;
}

.register-page .container .el-form .el-form-item.wid2-2 {
  width: 57%;
  margin-right: 0;
}

.register-page .container .el-form .el-form-item.noMar {
  margin-right: 0;
}

.register-page .container .el-form .sub-box {
  margin-bottom: 0;
}

.register-page .container .agree {
  width: -moz-max-content;
  width: max-content;
  margin: 0.5rem auto 0;
  display: flex;
  align-items: center;
  color: #333;
  cursor: pointer;
}

.register-page .container .agree span {
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid #eeeeee;
  margin-right: 0.25rem;
  position: relative;
  transition: all 0.4s;
}

.register-page .container .agree span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 4px;
  height: 10px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  opacity: 0;
  transition: all 0.4s;
}

.register-page .container .agree a {
  color: #ff9c38;
}

.register-page .container .agree.active span {
  border-color: var(--vi);
  background-color: var(--vi);
}

.register-page .container .agree.active span::after {
  opacity: 1;
}

.register-page .container .skip {
  margin: 0.5rem auto 0;
  color: #333;
  cursor: pointer;
  transition: all 0.4s;
}

.register-page .container .skip:hover {
  color: var(--vi);
}

.dialog-register {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 199;
  background-color: rgba(0, 0, 0, 0.6);
}

.dialog-register .container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 19.4rem;
  background: linear-gradient(180deg, #eed8c8 0%, #fff 65.16%, #fff 103.42%);
  overflow: hidden;
}

.dialog-register .container .close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 0.5rem;
  filter: brightness(0.1);
  cursor: pointer;
}

.dialog-register .container .close img {
  width: 100%;
}

.dialog-register .container .pic {
  width: 100%;
}

.dialog-register .container .pic img {
  width: 100%;
}

.dialog-register .container .cloud {
  position: absolute;
  bottom: -0.3rem;
  left: 0;
  width: 100%;
}

.dialog-register .container .cloud img {
  width: 100%;
}

.dialog-register .container .btn-box {
  position: absolute;
  bottom: 1rem;
  left: 0;
  width: 100%;
  padding: 0 2.25rem 0 1.85rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.dialog-register .container .btn-box .item {
  display: block;
  width: 5.9rem;
  height: 1.5rem;
  text-align: center;
  line-height: 1.5rem;
  border: 1px solid #dddddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.4s;
}

.dialog-register .container .btn-box .item:hover {
  background-color: var(--vi);
  border-color: var(--vi);
  color: #fff;
}

.dialog-register .container .btn-box .improve {
  text-align: center;
}

.dialog-register .container .btn-box .improve p {
  margin-top: 0.35rem;
  color: #333;
}

.dialog-improve {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 199;
  background-color: rgba(0, 0, 0, 0.6);
}

.dialog-improve .container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 19.8rem;
  background: linear-gradient(180deg, #eed8c8 0%, #fff 63%, #fff 100%);
  overflow: hidden;
}

.dialog-improve .container .pic {
  width: 100%;
}

.dialog-improve .container .pic img {
  width: 100%;
}

.dialog-improve .container .cloud {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.dialog-improve .container .cloud img {
  width: 100%;
}

.dialog-improve .container .cont-box {
  position: absolute;
  bottom: 2.15rem;
  left: 0;
  width: 100%;
  text-align: center;
}

.dialog-improve .container .cont-box .h {
  color: #000;
  line-height: 1.2;
}

.dialog-improve .container .cont-box .sure {
  display: block;
  margin: 1rem auto 0;
  width: 5.9rem;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  border-radius: 4px;
  background-color: var(--vi);
  color: #fff;
  cursor: pointer;
}

.service .top {
  display: flex;
  justify-content: space-between;
}

.service .top .bar {
  width: 21.5%;
  background-color: #fff;
}

.service .top .bar .tit {
  display: flex;
  align-items: center;
  /*justify-content: center;*/
  padding-left: 1rem;
  background-color: var(--vi);
  color: #fff;
  height: 1.25rem;
}

.service .top .bar .tit span {
  width: 0.45rem;
  margin-right: 6px;
}

.service .top .bar .tab-li .li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 1.3rem;
  padding: 0 0.3rem 0 1rem;
  color: #000;
  cursor: pointer;
  transition: all 0.4s;
}

.service .top .bar .tab-li .li a {
  width: calc(100% - 15px);
  height: 100%;
  display: flex;
  align-items: center;
}

.service .top .bar .tab-li .li span {
  opacity: 1;
  transition: all 0.4s;
}

.service .top .bar .tab-li .li:hover {
  color: var(--vi);
}

.service .top .bar .tab-li .li.active {
  color: var(--vi);
  background-color: #ffedeb;
}

.service .top .bar .tab-li .li.active span {
  opacity: 1;
}

.service .top .con {
  position: relative;
  width: calc(78.5% - 0.25rem);
}

.service .top .con .box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 0 0.6rem;
  box-shadow: 0 0 0.55rem rgba(31, 31, 31, 0.06);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
}

.service .top .con .box.active {
  opacity: 1;
  pointer-events: all;
}

.service .top .con .h {
  height: 1.15rem;
  display: flex;
  align-items: center;
  color: #000;
  border-bottom: 1px solid rgba(119, 119, 119, 0.25);
}

.service .top .con .h a {
  color: #000;
}

.service .top .con .h a:hover {
  color: var(--vi);
}

.service .top .con .h span {
  display: flex;
  margin-left: 0.25rem;
  color: var(--vi);
}

.service .top .con .tab-con {
  display: flex;
  align-items: center;
  padding: 0.25rem 0 0.6rem;
}

.service .top .con .tab-con a {
  color: #606060;
  margin-right: 0.6rem;
  transition: all 0.4s;
}

.service .top .con .tab-con a:last-child {
  margin-right: 0;
}

.service .top .con .tab-con a:hover {
  color: var(--vi);
}

.service .top .con .swiper-box {
  position: relative;
  width: 100%;
}

.service .top .con .swiper-box .swiper-pagination {
  bottom: 0.3rem;
  line-height: 1;
}

.service .top .con .swiper-box .swiper-pagination .swiper-pagination-bullet {
  width: 0.75rem;
  height: 2px;
  margin: 0 0.1rem;
  background-color: #efefef;
  opacity: 0.8;
  border-radius: 0;
}

.service .top .con .swiper-box .swiper-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--vi);
}

.service .top .con .swiper-box .swiper-button-next,
.service .top .con .swiper-box .swiper-button-prev {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background-color: rgba(51, 51, 51, 0.36);
  color: #fff;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

.service .top .con .swiper-box .swiper-button-next::after,
.service .top .con .swiper-box .swiper-button-prev::after {
  font-size: 0.3rem;
}

.service .top .con .swiper-box .swiper-button-prev {
  left: 0;
}

.service .top .con .swiper-box .swiper-button-next {
  right: 0;
}

.service .top .con .tab-swiper {
  width: 100%;
}

.service .top .con .tab-swiper .swiper-slide {
  width: 100%;
  height: 11.25rem;
  margin-right: 1rem;
}

.service .top .con .tab-swiper .swiper-slide:last-child {
  margin-right: 0;
}

.service .top .con .tab-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.service .recommend {
  margin-top: 1rem;
  position: relative;
}

.service .recommend .li-box {
  margin-top: 0.95rem;
  margin-bottom: 1.85rem;
}

.service .recommend .li {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #e1e1e1;
}

.service .recommend .li:last-child {
  margin-bottom: 0;
}

.service .recommend .li::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--vi);
  transition: all 0.4s;
}

.service .recommend .li .pic {
  width: 8.25rem;
  height: 5rem;
  position: relative;
}

/*.service .recommend .li .pic::after {*/
/*  content: "";*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  background-color: rgba(32, 32, 32, 0.5);*/
/*}*/

.service .recommend .li .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.service .recommend .li .intro {
  width: calc(100% - 8.25rem);
  padding-left: 0.75rem;
}

.service .recommend .li .intro .time {
  color: #333;
}

.service .recommend .li .intro .h {
  margin-top: 0.5rem;
  color: #000;
  line-height: 1.2;
}

.service .recommend .li .intro .txt {
  margin-top: 0.4rem;
  color: #000000;
  line-height: 1.5;
  max-height: 3em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /*text-overflow: ellipsis;*/
}

.service .recommend .li .intro .link {
  margin-top: 0.8rem;
  display: block;
  width: 2.5rem;
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  border-radius: 0.4rem;
  border: 1px solid #999;
  color: #666;
  transition: all 0.4s;
}

.service .recommend .li:hover::after {
  width: 100%;
}

.service .recommend .li:hover .intro .link {
  background-color: var(--vi);
  border-color: var(--vi);
  color: #fff;
}

.service .recommend .more {
  position: absolute;
  top: 0.2rem;
  right: 0;
  display: flex;
  align-items: center;
  color: #000;
}

.service .recommend .more span {
  margin-left: 0.3rem;
}

.ser-list .title {
  margin-top: 0.75rem;
}

.ser-list .li-box {
  margin-top: 0.95rem;
  margin-bottom: 1.5rem;
}

.ser-list .li {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #e1e1e1;
}

.ser-list .li:last-child {
  margin-bottom: 0;
}

.ser-list .li::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--vi);
  transition: all 0.4s;
}

.ser-list .li .pic {
  width: 8.25rem;
  height: 5rem;
  position: relative;
}

.ser-list .li .pic::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(32, 32, 32, 0.5);
}

.ser-list .li .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.ser-list .li .intro {
  width: calc(100% - 8.25rem);
  padding-left: 0.75rem;
}

.ser-list .li .intro .time {
  color: #333;
}

.ser-list .li .intro .h {
  margin-top: 0.5rem;
  color: #000;
  line-height: 1.2;
}

.ser-list .li .intro .txt {
  margin-top: 0.4rem;
  color: #000000;
  line-height: 1.5;
}

.ser-list .li .intro .link {
  margin-top: 0.8rem;
  display: block;
  width: 2.5rem;
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  border-radius: 0.4rem;
  border: 1px solid #999;
  color: #666;
  transition: all 0.4s;
}

.ser-list .li:hover::after {
  width: 100%;
}

.ser-list .li:hover .intro .link {
  background-color: var(--vi);
  border-color: var(--vi);
  color: #fff;
}

.search .tab {
  display: flex;
  height: 1.65rem;
  background-color: #fff;
}

.search .tab .li {
  position: relative;
  width: 3.25rem;
  height: 100%;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #f1f1f1;
  cursor: pointer;
  transition: all 0.4s;
}

.search .tab .li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: var(--vi);
  transition: all 0.4s;
}

.search .tab .li span {
  margin-left: 2px;
  padding: 0 7px;
  height: 14px;
  line-height: 14px;
  border-radius: 7px;
  background-color: rgba(236, 236, 236, 0.7);
  color: #000000;
  font-size: 12px;
  transition: all 0.4s;
}

.search .tab .li:hover {
  color: var(--vi);
}

.search .tab .li.active {
  color: var(--vi);
}

.search .tab .li.active::after {
  width: 100%;
}

.search .tab .li.active span {
  background-color: #ffe8e8;
  color: var(--vi);
}

.search .search-result {
  height: 1.25rem;
  line-height: 1.25rem;
  color: #000;
  padding: 0 0.35rem;
  background-color: #fff;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
}

.search .search-result span {
  color: var(--vi);
}

.pro-box {
  margin-top: 0.25rem;
}

.pro-box .handle {
  background-color: #fff;
}

.pro-box .handle .li {
  display: flex;
  align-items: baseline;
  border-bottom: 1px solid #e8e8e8;
  min-height: 1.25rem;
  padding: 10px 0.4rem;
}

.pro-box .handle .li:last-child {
  border-bottom: none;
}

.pro-box .handle .li .h {
  width: 4em;
  color: #000;
  padding: 6px 0;
  margin-right: 0.75rem;
}

.pro-box .handle .li .item-box {
  display: flex;
  flex-wrap: wrap;
}

.pro-box .handle .li .item-box .item {
  position: relative;
  display: flex;
  padding: 0.25rem 0.3rem;
  padding-right: 0.7rem;
  color: var(--vi);
  border: 1px solid var(--vi);
  margin-right: 0.4rem;
}

.pro-box .handle .li .item-box .item:last-child {
  margin-right: 0;
}

.pro-box .handle .li .item-box .item span {
  position: absolute;
  top: 2px;
  right: 0.15rem;
  width: 12px;
  cursor: pointer;
}

.pro-box .handle .li .item-box .item span img {
  width: 100%;
}

.pro-box .handle .li .arr {
  width: calc(100% - 4em - 0.75rem - 1.25rem);
  display: flex;
  flex-wrap: wrap;
  padding-right: 1.25rem;
}

.pro-box .handle .li .arr .child {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 2em - 0.8rem - 12px);
}

.pro-box .handle .li .arr span {
  color: #000;
  padding: 6px;
  margin-right: 0.8rem;
  cursor: pointer;
  transition: all 0.4s;
}

.pro-box .handle .li .arr span:last-child {
  margin-right: 0;
}

.pro-box .handle .li .arr span:hover {
  color: var(--vi);
}

.pro-box .handle .li .arr span.active {
  background-color: #ffe8e8;
  color: var(--vi);
}

.pro-box .handle .li .all {
  padding: 6px;
  color: #000;
  margin-right: 0.8rem;
  cursor: pointer;
  transition: all 0.4s;
}

.pro-box .handle .li .all:hover {
  color: var(--vi);
}

.pro-box .handle .li .all.active {
  background-color: #ffe8e8;
  color: var(--vi);
}

.pro-box .handle .li .clear {
  margin-left: 0.4rem;
  color: #000;
  cursor: pointer;
}

.pro-box .handle .li .more {
  display: flex;
  align-items: center;
  color: #000;
  padding: 6px 0;
  cursor: pointer;
}

.pro-box .handle .li .more span {
  margin-left: 0.25rem;
  transition: all 0.4s;
}

.pro-box .handle .select {
  display: flex;
  padding: 0.15rem 0.4rem;
  border-bottom: 1px solid #e8e8e8;
}

.pro-box .handle .select .h {
  margin-right: 0.8rem;
  color: #000;
  height: 0.95rem;
  line-height: 0.95rem;
}

.pro-box .handle .select .el-select {
  width: 2.5rem;
  margin-right: 0.4rem;
}

.pro-box .handle .select .el-select:last-child {
  margin-right: 0;
}

.pro-box .handle .select :deep(.el-select__wrapper) {
  min-height: 0.95rem;
  border-radius: 0;
}

.pro-box .handle .other :deep(.el-select__wrapper) {
  padding: 4px;
}

.pro-box .con {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e8e8e8;
}

.pro-box .con .sort {
  display: flex;
}

.pro-box .con .sort .item {
  width: 1.75rem;
  height: 1.25rem;
  padding-left: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #333;
  cursor: pointer;
  transition: all 0.4s;
}

.pro-box .con .sort .item .arr {
  margin-left: 0.2rem;
  width: 6px;
}

.pro-box .con .num {
  display: flex;
  color: #333;
}

.pro-box .con .num .total {
  color: #444444;
  margin: 0 2px;
}

.pro-box .con .num .current {
  color: var(--vi);
  margin-left: 4px;
}

.pro-box .top-tit {
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  padding: 0 0.4rem;
  height: 1.25rem;
  background-color: #fff;
  color: #000;
  font-weight: bold;
}

.pro-box .top-tit p {
  width: 7.5%;
  padding-right: 0.5rem;
}

.pro-box .top-tit p:nth-child(1) {
  width: 28%;
}

.pro-box .top-tit p:nth-child(2) {
  width: 22%;
}

.pro-box .top-tit p:nth-child(3) {
  width: 11%;
}

.pro-box .top-tit p:nth-child(4) {
  width: 8%;
}

.pro-box .top-tit p:nth-child(5) {
  width: 10%;
}

.pro-box .top-tit p:nth-child(6) {
  width: 13.5%;
}

.pro-box .item-box {
  margin-top: 0.25rem;
}

.pro-box .item-box .item {
  display: flex;
  padding: 0.4rem;
  background-color: #fff;
  margin-bottom: 0.25rem;
}

.pro-box .item-box .item:last-child {
  margin-bottom: 0;
}

.pro-box .item-box .item .info {
  display: flex;
  width: 28%;
}

.pro-box .item-box .item .info .pic {
  width: 3.8rem;
  height: 3.8rem;
}

.pro-box .item-box .item .info .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.pro-box .item-box .item .info .intro {
  width: calc(100% - 3.8rem);
  padding-left: 0.5rem;
  padding-top: 0.25rem;
  line-height: 1.5;
}

.pro-box .item-box .item .info .intro .h {
  color: #3a3838;
}

.pro-box .item-box .item .info .intro .txt {
  margin-top: 0.2rem;
  color: #999;
}

.pro-box .item-box .item .info .intro .txt span {
  color: #000;
}

.pro-box .item-box .item .params {
  width: 22%;
  padding-top: 0.25rem;
}

.pro-box .item-box .item .params .li {
  color: #333;
  margin-bottom: 0.35rem;
  line-height: 1.5;
}

.pro-box .item-box .item .params .li:last-child {
  margin-bottom: 0;
}

.pro-box .item-box .item .params .li span {
  color: #000;
}

.pro-box .item-box .item .guide {
  width: 11%;
}

.pro-box .item-box .item .guide .box {
  position: relative;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  cursor: pointer;
}

.pro-box .item-box .item .guide .detail {
  width: 2.35rem;
  height: 0.6rem;
  border: 1px solid #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #000000;
  padding: 0 0.2rem;
}

.pro-box .item-box .item .guide .detail p {
  margin-right: 0.2rem;
  line-height: 1.5;
}

.pro-box .item-box .item .guide .view {
  margin-top: 0.3rem;
  color: #107bd2;
}

.pro-box .item-box .item .guide .pos-cont {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  margin-left: -12rem;
  width: 24rem;
  border-radius: 0.5rem;
  background-color: #fff;
  box-shadow: 0 0.1rem 0.25rem rgba(84, 84, 84, 0.2);
  padding: 0 0.8rem 4px 0.65rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
}

.pro-box .item-box .item .guide .pos-cont.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pro-box .item-box .item .guide .pos-cont .thead {
  display: flex;
  align-items: center;
  height: 1.2rem;
}

.pro-box .item-box .item .guide .pos-cont .thead p {
  width: 2.1rem;
  color: #000000;
}

.pro-box .item-box .item .guide .pos-cont .thead p:nth-child(1) {
  width: 30%;
}

.pro-box .item-box .item .guide .pos-cont .thead p:nth-child(2) {
  width: 24.7%;
}

.pro-box .item-box .item .guide .pos-cont .thead p:nth-child(3) {
  width: calc(45.3% - 2.1rem);
}

.pro-box .item-box .item .guide .pos-cont .thead p:nth-child(4) {
  text-align: center;
}

.pro-box .item-box .item .guide .pos-cont .tbody .li {
  display: flex;
  align-items: center;
  height: 1.25rem;
  border-bottom: 1px solid #e8e8e8;
  color: #000;
}

.pro-box .item-box .item .guide .pos-cont .tbody .li:first-child {
  border-top: 1px solid #e8e8e8;
}

.pro-box .item-box .item .guide .pos-cont .tbody .li .num {
  width: 30%;
}

.pro-box .item-box .item .guide .pos-cont .tbody .li .time {
  width: 24.7%;
}

.pro-box .item-box .item .guide .pos-cont .tbody .li .price2 {
  width: calc(45.3% - 2.1rem);
  display: flex;
  align-items: baseline;
}

.pro-box .item-box .item .guide .pos-cont .tbody .li .price2 p {
  color: var(--vi);
}

.pro-box .item-box .item .guide .pos-cont .tbody .li .price2 span {
  color: #ff9c38;
  margin-left: 0.2rem;
}

.pro-box .item-box .item .guide .pos-cont .tbody .li .operate2 {
  width: 2.1rem;
  display: flex;
  justify-content: center;
}

.pro-box .item-box .item .guide .pos-cont .tbody .li .operate2 span {
  width: 0.5rem;
  margin-right: 0.2rem;
}

.pro-box .item-box .item .guide .pos-cont .tbody .li .operate2 span:last-child {
  margin-right: 0;
}

.pro-box .item-box .item .guide .pos-cont .close {
  width: 2.1rem;
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  border-radius: 0.4rem;
  background-color: var(--vi);
  color: #fff;
  margin-top: 4px;
  margin-left: calc(100% - 2.1rem);
  cursor: pointer;
}

.pro-box .item-box .item .brand {
  width: 8%;
  color: #3a3838;
  line-height: 1.5;
}

.pro-box .item-box .item .date {
  width: 10%;
  color: #3a3838;
}

.pro-box .item-box .item .price {
  width: 13.5%;
  line-height: 1;
}

.pro-box .item-box .item .price .h1 {
  color: var(--vi);
}

.pro-box .item-box .item .price .h2 {
  margin-top: 0.5rem;
  color: #ff9c38;
}

.pro-box .item-box .item .operate {
  width: 7.5%;
}

.pro-box .item-box .item .operate .fl-box {
  display: flex;
}

.pro-box .item-box .item .operate .fl-box div {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.4s;
}

.pro-box .item-box .item .operate .fl-box div:hover {
  background-color: var(--vi);
}

.pro-box .item-box .item .operate .fl-box div:hover img {
  filter: brightness(100);
}

.pro-box .item-box .item .operate .fl-box div img {
  max-width: 50%;
  max-height: 50%;
  -o-object-fit: contain;
  object-fit: contain;
}

.pro-box .item-box .item .operate .fl-box .add {
  background-color: #ffedeb;
  margin-right: 0.5rem;
}

.pro-box .item-box .item .operate .fl-box .collect {
  background-color: rgba(255, 154, 58, 0.2);
}

.pro-box .item-box .item .operate .copy {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  color: #000;
  width: -moz-max-content;
  width: max-content;
  position: relative;
  left: -2em;
  cursor: pointer;
}

.pro-box .item-box .item .operate .copy span {
  width: 16px;
  margin-right: 6px;
}

.pro-box .page-box {
  margin-top: 1.75rem;
}

.source-box .sort {
  display: flex;
  background-color: #fff;
  width: 100%;
  height: 1.25rem;
  line-height: 1.25rem;
  padding: 0 0.35rem;
  gap: 0.9rem;
}

.source-box .sort p {
  position: relative;
  padding: 0 0.35rem;
  height: 100%;
  color: #000;
  cursor: pointer;
  transition: all 0.4s;
}

.source-box .sort p::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: var(--vi);
  transition: all 0.4s;
}

.source-box .sort p:hover {
  color: var(--vi);
}

.source-box .sort p.active {
  color: var(--vi);
}

.source-box .sort p.active::after {
  width: 100%;
}

.source-box .container {
  margin-top: 0.25rem;
  padding-bottom: 2.25rem;
  background-color: #fff;
}

.source-box .li-box {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #ececec;
}

.source-box .li-box .li {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 0.5rem 0.5rem 0.75rem;
  border-bottom: 1px solid #ececec;
}

.source-box .li-box .li::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--vi);
  transition: all 0.4s;
}

.source-box .li-box .li .pic {
  width: 3.8rem;
  height: 3.6rem;
}

.source-box .li-box .li .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.source-box .li-box .li .intro {
  width: calc(100% - 3.8rem);
  padding-left: 0.5rem;
}

.source-box .li-box .li .intro .h {
  color: #000;
  line-height: 1.2;
}

.source-box .li-box .li .intro .txt {
  margin-top: 0.2rem;
  line-height: 1.5;
  color: #000;
}

.source-box .li-box .li .intro .info {
  margin-top: 0.9rem;
  display: flex;
  align-items: center;
}

.source-box .li-box .li .intro .info .tag {
  padding: 3px 0.4rem;
  border: 1px solid rgba(16, 94, 210, 0.6);
  border-radius: 2px;
  line-height: 1.4;
  color: #105ed2;
}

.source-box .li-box .li .intro .info .tag.play {
  border-color: rgba(210, 16, 20, 0.6);
  color: var(--vi);
  cursor: pointer;
}

.source-box .li-box .li .intro .info .time {
  margin-left: 1rem;
  display: flex;
  align-items: center;
  color: #000;
}

.source-box .li-box .li .intro .info .time span {
  margin-right: 6px;
}

.source-box .li-box .li .intro .info .read {
  margin-left: 1rem;
  display: flex;
  align-items: center;
  color: #000;
}

.source-box .li-box .li .intro .info .read span {
  margin-right: 6px;
}

.source-box .li-box .li:hover::after {
  width: 100%;
}

.source-box .page-box {
  margin-top: 0.5rem;
}

.user-bar {
  width: 7.4rem;
  position: sticky;
  top: 0;
}

.user-bar .el-menu {
  border-right: none;
  --el-menu-item-height: 1.15rem;
  --el-menu-sub-item-height: 1.15rem;
  --el-menu-base-level-padding: 1rem;
  --el-menu-hover-bg-color: #fff;
}

.user-bar .el-menu .el-sub-menu.is-opened .el-sub-menu__title {
  background-color: var(--vi);
  color: #fff;
}

.user-bar .el-menu .el-sub-menu__title {
  font-family: "HarmonyOS_Sans_SC_Regular";
}

.user-bar .el-menu .el-sub-menu__icon-arrow {
  right: 0.25rem;
  font-size: 18px;
  margin-top: -9px;
}

.user-bar .el-menu .el-sub-menu__title:hover {
  color: var(--vi);
}

.user-bar .el-menu .el-menu-item {
  color: #666;
}
.user-bar .el-menu .el-menu-item.active a {
    color: var(--vi);
}

.user-bar .el-menu .el-menu-item a {
  width: 100%;
}

.user-bar .el-menu .el-menu-item:hover {
  color: var(--vi);
}

.user-bar .el-menu .el-menu-item.is-active {
  color: var(--vi);
  background-color: #ffedeb;
}

.user-page {
  padding-bottom: 1.75rem;
}

.user-page .el-breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: #606266;
}

.user-page .el-breadcrumb .el-breadcrumb__item .el-breadcrumb__inner {
  color: #606266;
}

.user-page .el-breadcrumb .el-breadcrumb__item .el-breadcrumb__inner a {
  color: #606266;
  font-weight: 500;
}

.user-page .el-breadcrumb .el-breadcrumb__item .el-breadcrumb__separator {
  color: #606266;
}

.user-page .el-breadcrumb .el-breadcrumb__item .el-breadcrumb__separator::after {
  border-color: #606266;
}

.user-page .box {
  margin-top: 0.75rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.user-page .box .container {
  width: calc(100% - 7.65rem);
}

.user-page .box .title {
  height: 1.85rem;
  line-height: 1.85rem;
  padding: 0 0.35rem;
  color: #000;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
}

.user-page .main {
  background-color: #fff;
  padding-bottom: 1.75rem;
  position: relative;
}

.credit .tab {
  display: flex;
  align-items: center;
  width: 100%;
  height: 1.75rem;
  padding: 0 0.35rem;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
  gap: 1.05rem;
}

.credit .tab .item {
  width: -moz-max-content;
  width: max-content;
  height: 100%;
  line-height: 1.75rem;
  position: relative;
  color: #000;
  cursor: pointer;
  transition: all 0.4s;
}

.credit .tab .item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: var(--vi);
  transition: all 0.4s;
}

.credit .tab .item:hover {
  color: var(--vi);
}

.credit .tab .item.active {
  color: var(--vi);
}

.credit .tab .item.active::after {
  width: 100%;
}

.credit .handle {
  background-color: #fff;
  padding: 0.5rem 0.6rem 0.75rem 0.35rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.credit .handle .h {
  margin-right: 0.5rem;
  color: #000000;
}

.credit .handle .time {
  display: flex;
  align-items: center;
}

.credit .handle .time .el-input__wrapper {
  width: 11.2rem;
  height: 0.95rem;
  padding: 0 0.45rem;
  border-radius: 0.5rem;
  flex-grow: initial;
}

.credit .handle .info {
  display: flex;
  align-items: center;
}

.credit .handle .info .el-input {
  width: 8.9rem;
}

.credit .handle .info .el-input__wrapper {
  padding: 0 0.35rem;
  border-radius: 0.5rem;
}

.credit .handle .info .el-input__inner {
  width: 100%;
  height: 0.95rem;
}

.credit .handle .number {
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
}

.credit .handle .number .el-input {
  width: 7.95rem;
}

.credit .handle .number .el-input__wrapper {
  padding: 0 0.35rem;
  border-radius: 0.5rem;
}

.credit .handle .number .el-input__inner {
  width: 100%;
  height: 0.95rem;
}

.credit .handle .btn-box {
  margin-top: 0.35rem;
  display: flex;
}

.credit .handle .btn-box .btn {
  width: -moz-max-content;
  width: max-content;
  height: 0.95rem;
  line-height: 0.95rem;
  padding: 0 0.6rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 0 1px #d9d9d9;
  margin-right: 0.5rem;
  color: #000000;
  cursor: pointer;
  transition: all 0.4s;
}

.credit .handle .btn-box .btn:last-child {
  margin-right: 0;
}

.credit .handle .btn-box .btn:hover {
  background-color: var(--vi);
  color: #fff;
  box-shadow: none;
}

.credit .top-tit {
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  height: 1.7rem;
  background-color: #fff;
  text-align: center;
  color: #000;
}

.credit .top-tit .info {
  text-align: left;
  width: 34%;
  padding-left: 0.35rem;
}

.credit .top-tit .num {
  width: 9%;
}

.credit .top-tit .total {
  width: 22%;
}

.credit .top-tit .addr {
  width: 10%;
}

.credit .top-tit .status {
  width: 8%;
}

.credit .top-tit .opt {
  width: 17%;
}

.credit .li-box .li {
  margin-bottom: 0.25rem;
  border-bottom: 1px solid #f3f3f3;
  background-color: #fff;
}

.credit .li-box .li:last-child {
  margin-bottom: 0;
}

.credit .li-box .li .info {
  display: flex;
  align-items: center;
  height: 1.25rem;
  padding: 0 0.35rem;
  background-color: #fffbf6;
  color: #000;
}

.credit .li-box .li .info .el-checkbox {
  margin-right: 0.2rem;
}

.credit .li-box .li .info p {
  margin-right: 0.75rem;
}

.credit .li-box .li .info p:last-child {
  margin-right: 0;
}

.credit .li-box .li .price {
  display: flex;
  align-items: center;
  height: 1.25rem;
  padding: 0 0.95rem;
  border-bottom: 1px solid #f3f3f3;
  color: #000;
}

.credit .li-box .li .price p {
  margin-left: 0.35rem;
  color: #333;
}

.credit .li-box .li .price span {
  color: var(--vi);
}

.credit .li-box .li .intro {
  display: flex;
}

.credit .li-box .li .intro .item-box {
  width: 65%;
}

.credit .li-box .li .intro .item-box .item {
  display: flex;
  border-bottom: 1px solid #f3f3f3;
}

.credit .li-box .li .intro .item-box .item:last-child {
  border-bottom: none;
}

.credit .li-box .li .intro .pro-info {
  display: flex;
  align-items: center;
  width: 52%;
  padding: 0.85rem 0.5rem 0.85rem 0.35rem;
  border-right: 1px solid #f3f3f3;
}

.credit .li-box .li .intro .pro-info .pic {
  width: 2.5rem;
  height: 1.95rem;
}

.credit .li-box .li .intro .pro-info .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.credit .li-box .li .intro .pro-info .con {
  width: calc(100% - 2.5rem);
  padding-left: 0.35rem;
  line-height: 1.4;
}

.credit .li-box .li .intro .pro-info .con .h {
  color: #000;
}

.credit .li-box .li .intro .pro-info .con .txt {
  margin-top: 0.3rem;
  color: #333;
  display: flex;
  gap: 0.3rem;
}

.credit .li-box .li .intro .num {
  width: 14%;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #000;
  border-right: 1px solid #f3f3f3;
}

.credit .li-box .li .intro .num span {
  color: #333;
}

.credit .li-box .li .intro .num .old {
  margin: 0.3rem 0 0.5rem;
  position: relative;
}

.credit .li-box .li .intro .num .old::after {
  content: "";
  position: absolute;
  top: 48%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #999;
}

.credit .li-box .li .intro .total {
  width: 34%;
  border-right: 1px solid #f3f3f3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.credit .li-box .li .intro .addr {
  width: 10%;
  border-right: 1px solid #f3f3f3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #000;
  line-height: 1.2;
}

.credit .li-box .li .intro .status {
  width: 8%;
  border-right: 1px solid #f3f3f3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.credit .li-box .li .intro .opt {
  width: 17%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  text-align: center;
}

.credit .li-box .li .intro .opt .btn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.credit .li-box .li .intro .opt .btn {
  width: -moz-max-content;
  width: max-content;
  height: 24px;
  line-height: 24px;
  padding: 0 6px;
  border: 1px solid #ccc;
  margin-bottom: 6px;
  color: #000;
  cursor: pointer;
  transition: all 0.4s;
}

.credit .li-box .li .intro .opt .btn:last-child {
  margin-bottom: 0;
}

.credit .li-box .li .intro .opt .btn:hover {
  border-color: #ff5b5f;
  background-color: rgba(255, 91, 95, 0.07);
  color: #ff5b5f;
}

.credit .li-box .li .intro .opt .countdown {
  line-height: 1.5;
  color: #ff6200;
}

.credit .page-box {
  margin-top: 1.75rem;
}

.credit .fix-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2.25rem;
  background-color: #fff;
  box-shadow: 0 -0.25rem 0.25rem rgba(89, 89, 89, 0.09);
  z-index: 100;
}

.credit .fix-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.credit .fix-bar .lf {
  display: flex;
}

.credit .fix-bar .el-checkbox {
  --el-checkbox-input-width: 20px;
  --el-checkbox-input-height: 20px;
}

.credit .fix-bar .el-checkbox .el-checkbox__inner::after {
  width: 6px;
  height: 12px;
  left: 5px;
}

.credit .fix-bar .el-checkbox .el-checkbox__label {
  padding-left: 0.4rem;
}

.credit .fix-bar .txt {
  margin-left: 2.9rem;
  color: #000;
}

.credit .fix-bar .txt span {
  color: var(--vi);
}

.credit .fix-bar .delete {
  width: 3.3rem;
  height: 2.25rem;
  background-color: var(--vi);
  color: #fff;
  text-align: center;
  line-height: 2.25rem;
  cursor: pointer;
}

.contract .top-tit {
  margin-top: 0.25rem;
  height: 1.25rem;
  background-color: #ffe9e9;
  color: #000;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
}

.contract .top-tit .name {
  width: 30.1%;
}

.contract .top-tit .price {
  width: 13.3%;
}

.contract .top-tit .cycle {
  width: 20.1%;
}

.contract .top-tit .time {
  width: 19.4%;
}

.contract .top-tit .opt {
  width: 17.1%;
  text-align: center;
}

.contract .li-box {
  background-color: #fff;
}

.contract .li-box .li {
  height: 2rem;
  padding: 0 0.75rem;
  display: flex;
  align-items: center;
  color: #000;
  transition: all 0.4s;
}

.contract .li-box .li .info {
  width: 30.1%;
  padding-right: 0.8rem;
  display: flex;
  align-items: center;
}

.contract .li-box .li .info span {
  width: 1.5rem;
  height: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.35rem;
}

.contract .li-box .li .info span img {
  max-width: 60%;
  max-height: 60%;
  -o-object-fit: contain;
  object-fit: contain;
}

.contract .li-box .li .info p {
  width: calc(100% - 1.85rem);
}

.contract .li-box .li .price {
  width: 13.3%;
}

.contract .li-box .li .cycle {
  width: 20.1%;
}

.contract .li-box .li .time {
  width: 19.4%;
}

.contract .li-box .li .opt {
  width: 17.1%;
  display: flex;
  justify-content: center;
  gap: 5px;
}

.contract .li-box .li .opt .btn {
  width: 1.3rem;
  height: 0.6rem;
  text-align: center;
  line-height: 0.6rem;
  box-shadow: 0 0 0 1px #ccc;
  cursor: pointer;
  transition: all 0.4s;
}

.contract .li-box .li .opt .btn:hover {
  background-color: var(--vi);
  color: #fff;
  box-shadow: none;
}

.contract .li-box .li:hover {
  background-color: rgba(255, 220, 220, 0.18);
  color: var(--vi);
}

.contract .page-box {
  margin-top: 1.15rem;
}

.settlement .title {
  width: 100%;
  height: 1.85rem;
  line-height: 1.85rem;
  padding: 0 0.35rem;
  color: #000;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
}

.settlement .li {
  margin-top: 0.25rem;
  background-color: #fff;
  padding: 0.7rem 0.35rem;
  line-height: 1.1;
}

.settlement .li .h {
  color: #000;
  font-weight: bold;
}

.settlement .li .con {
  margin-top: 0.65rem;
  padding: 0 0.3rem;
  display: flex;
  gap: 2.4rem;
}

.settlement .li .con .item {
  color: #000;
}

.settlement .li .con .item span {
  color: #ff0000;
}

.settlement .li .con .item a {
  margin-left: 0.35rem;
  color: #107bd2;
}

.settlement .li .pay {
  margin-top: 0.55rem;
  color: #000;
}

.settlement .li .pay span {
  color: #ff0000;
}

.settlement .li .type {
  margin-top: 0.35rem;
  display: flex;
  gap: 0.75rem;
}

.settlement .li .type .item {
  padding: 0 0.5rem;
  min-width: 4rem;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #eee;
  color: #000;
  cursor: pointer;
  transition: all 0.4s;
}

.settlement .li .type .item:hover {
  color: var(--vi);
}

.settlement .li .type .item.active {
  background-color: var(--vi);
  color: #fff;
  box-shadow: none;
}

.settlement .li .tips {
  margin-top: 0.45rem;
  color: #999;
}

.settlement .details {
  margin-top: 0.25rem;
  background-color: #fff;
  height: 1.9rem;
  display: flex;
  align-items: center;
  padding: 0 0.35rem;
  color: #000;
  border-bottom: 1px solid #e8e8e8;
}

.settlement .details span {
  color: #333;
}

.settlement .name {
  height: 2.05rem;
  display: flex;
  align-items: center;
  text-align: center;
  background-color: #fff;
}

.settlement .name .intro {
  width: 46%;
  text-align: left;
  padding: 0 0.35rem;
}

.settlement .name .price {
  width: 27%;
}

.settlement .name .total {
  width: 27%;
}

.settlement .item-box {
  margin-top: 0.25rem;
}

.settlement .item-box .item {
  margin-bottom: 0.25rem;
  border-bottom: 1px solid #f3f3f3;
  background-color: #fff;
}

.settlement .item-box .item:last-child {
  margin-bottom: 0;
}

.settlement .item-box .item .infor {
  display: flex;
  align-items: center;
  height: 1.25rem;
  padding: 0 0.35rem;
  background-color: #fffbf6;
  color: #000;
}

.settlement .item-box .item .infor .el-checkbox {
  margin-right: 0.2rem;
}

.settlement .item-box .item .infor p {
  margin-right: 0.75rem;
}

.settlement .item-box .item .infor p:last-child {
  margin-right: 0;
}

.settlement .item-box .item .price {
  display: flex;
  align-items: center;
  height: 1.25rem;
  padding: 0 0.95rem;
  border-bottom: 1px solid #f3f3f3;
  color: #000;
}

.settlement .item-box .item .price p {
  margin-left: 0.35rem;
  color: #333;
}

.settlement .item-box .item .price span {
  color: var(--vi);
}

.settlement .item-box .item .list {
  display: flex;
}

.settlement .item-box .item .pro-info {
  width: 46%;
  display: flex;
  align-items: center;
  padding: 0.85rem 0.5rem 0.85rem 0.35rem;
  border-right: 1px solid #f3f3f3;
}

.settlement .item-box .item .pro-info .pic {
  width: 2.5rem;
  height: 1.95rem;
}

.settlement .item-box .item .pro-info .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.settlement .item-box .item .pro-info .con {
  width: calc(100% - 2.5rem);
  padding-left: 0.35rem;
  line-height: 1.4;
}

.settlement .item-box .item .pro-info .con .h {
  color: #000;
}

.settlement .item-box .item .pro-info .con .txt {
  margin-top: 0.3rem;
  color: #333;
  display: flex;
  gap: 0.3rem;
}

.settlement .item-box .item .num {
  width: 27%;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #000;
  border-right: 1px solid #f3f3f3;
}

.settlement .item-box .item .num span {
  color: #333;
}

.settlement .item-box .item .num .old {
  margin: 0.3rem 0 0.5rem;
  position: relative;
}

.settlement .item-box .item .num .old::after {
  content: "";
  position: absolute;
  top: 48%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #999;
}

.settlement .item-box .item .total {
  width: 27%;
  border-right: 1px solid #f3f3f3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.settlement .settlement {
  margin-top: 0.25rem;
  background-color: #fff;
}

.settlement .settlement .h {
  padding: 0 0.45rem;
  height: 1.5rem;
  line-height: 1.5rem;
  color: #000;
}

.settlement .settlement .box {
  border-top: 1px solid #e8e8e8;
  padding: 0.5rem 0.45rem;
  display: flex;
  justify-content: flex-end;
}

.settlement .settlement .list-box {
  width: 10.8rem;
}

.settlement .settlement .list-box .list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.settlement .settlement .list-box .list:last-child {
  margin-bottom: 0;
}

.settlement .settlement .list-box .list p {
  color: #000;
}

.settlement .settlement .list-box .list span {
  color: var(--vi);
}

.settlement .fix-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2.25rem;
  background-color: #fff;
  box-shadow: 0 -0.25rem 0.25rem rgba(89, 89, 89, 0.09);
  z-index: 100;
}

.settlement .fix-bar .wrap {
  height: 100%;
  display: flex;
  justify-content: flex-end;
}

.settlement .fix-bar .pay {
  width: 3.3rem;
  height: 100%;
  background-color: var(--vi);
  color: #fff;
  text-align: center;
  line-height: 2.25rem;
  cursor: pointer;
}

.invoice .top-tit {
  height: 1.25rem;
  background-color: #ffe9e9;
  color: #000;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
}

.invoice .top-tit .name {
  width: 30.1%;
}

.invoice .top-tit .price {
  width: 13.3%;
}

.invoice .top-tit .cycle {
  width: 20.1%;
}

.invoice .top-tit .time {
  width: 19.4%;
}

.invoice .top-tit .opt {
  width: 17.1%;
  text-align: center;
}

.invoice .top-tit2 {
  height: 1.25rem;
  background-color: #ffe9e9;
  color: #000;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
}

.invoice .top-tit2 .name {
  width: 20.5%;
}

.invoice .top-tit2 .price {
  width: 22%;
}

.invoice .top-tit2 .cycle {
  width: 18.5%;
}

.invoice .top-tit2 .time {
  width: 21%;
}

.invoice .top-tit2 .opt {
  width: 18%;
  text-align: center;
}

.invoice .li-box {
  background-color: #fff;
}

.invoice .li-box .li {
  height: 2rem;
  padding: 0 0.75rem;
  display: flex;
  align-items: center;
  color: #000;
  transition: all 0.4s;
}

.invoice .li-box .li .info {
  width: 30.1%;
  padding-right: 0.8rem;
  display: flex;
  align-items: center;
}

.invoice .li-box .li .info span {
  width: 1.5rem;
  height: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.35rem;
}

.invoice .li-box .li .info span img {
  max-width: 60%;
  max-height: 60%;
  -o-object-fit: contain;
  object-fit: contain;
}

.invoice .li-box .li .info p {
  width: calc(100% - 1.85rem);
}

.invoice .li-box .li .price {
  width: 13.3%;
}

.invoice .li-box .li .cycle {
  width: 20.1%;
}

.invoice .li-box .li .time {
  width: 19.4%;
}

.invoice .li-box .li .opt {
  width: 17.1%;
  display: flex;
  justify-content: center;
  gap: 5px;
}

.invoice .li-box .li .opt .btn {
  width: 1.3rem;
  height: 0.6rem;
  text-align: center;
  line-height: 0.6rem;
  box-shadow: 0 0 0 1px #ccc;
  cursor: pointer;
  transition: all 0.4s;
}

.invoice .li-box .li .opt .btn:hover {
  background-color: var(--vi);
  color: #fff;
  box-shadow: none;
}

.invoice .li-box .li:hover {
  background-color: rgba(255, 220, 220, 0.18);
  color: var(--vi);
}

.invoice .li-box2 {
  background-color: #fff;
}

.invoice .li-box2 .li {
  height: 1.25rem;
  padding: 0 0.75rem;
  display: flex;
  align-items: center;
  color: #000;
  transition: all 0.4s;
}

.invoice .li-box2 .li .info {
  width: 20.5%;
}

.invoice .li-box2 .li .price {
  width: 22%;
}

.invoice .li-box2 .li .cycle {
  width: 18.5%;
}

.invoice .li-box2 .li .time {
  width: 21%;
}

.invoice .li-box2 .li .opt {
  width: 18%;
  display: flex;
  justify-content: center;
  gap: 5px;
}

.invoice .li-box2 .li .opt .btn {
  width: 1.3rem;
  height: 0.6rem;
  text-align: center;
  line-height: 0.6rem;
  box-shadow: 0 0 0 1px #ccc;
  cursor: pointer;
  transition: all 0.4s;
}

.invoice .li-box2 .li .opt .btn:nth-child(1) {
  width: 1.5rem;
}

.invoice .li-box2 .li .opt .btn:hover {
  background-color: var(--vi);
  color: #fff;
  box-shadow: none;
}

.invoice .li-box2 .li .opt .btn.active {
  background-color: var(--vi);
  color: #fff;
  box-shadow: none;
}

.invoice .li-box2 .li:hover {
  background-color: rgba(255, 220, 220, 0.18);
  color: var(--vi);
}

.invoice .page-box {
  margin-top: 1.5rem;
}

.invoice .dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
}

.invoice .dialog .container {
  width: 19rem;
  padding: 1.75rem 2.75rem;
  border-radius: 1rem;
  background-color: #fff;
  box-shadow: 0 4px 0.95rem rgba(210, 210, 210, 0.25);
  overflow: hidden;
}

.invoice .dialog .tit {
  color: #000;
  line-height: 1.2;
}

.invoice .dialog .item {
  position: relative;
  width: 4.25rem;
  height: 1.1rem;
  text-align: center;
  line-height: 1rem;
  box-shadow: 0 0 0 1px #eeeeee;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s;
}

.invoice .dialog .item::before {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 2px;
  width: 5px;
  height: 10px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(45deg);
  z-index: 1;
  opacity: 0;
  transition: all 0.4s;
}

.invoice .dialog .item::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 0.9rem;
  height: 0.45rem;
  background: var(--vi);
  -webkit-clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0% 100%);
  opacity: 0;
  transition: all 0.4s;
}

.invoice .dialog .item:hover {
  color: var(--vi);
}

.invoice .dialog .item.active {
  color: #000;
  box-shadow: 0 0 0 1px var(--vi);
}

.invoice .dialog .item.active::before,
.invoice .dialog .item.active::after {
  opacity: 1;
}

.invoice .dialog .sli {
  margin: 0 auto 0.85rem;
  width: -moz-max-content;
  width: max-content;
  display: flex;
  align-items: center;
  color: #333;
  cursor: pointer;
}

.invoice .dialog .sli span {
  margin-left: 0.2rem;
  transition: all 0.4s;
}

.invoice .dialog .sli.active span {
  transform: rotate(180deg);
}

.invoice .el-tabs {
  --el-text-color-primary: #000;
}

.invoice .el-tabs__header {
  margin-bottom: 0.7rem;
  background-color: #fff;
}

.invoice .el-tabs__header .el-tabs__nav-scroll {
  padding: 0 0.35rem;
}

.invoice .el-tabs__header .el-tabs__active-bar {
  height: 1px;
}

.invoice .el-tabs__header .el-tabs__nav-wrap::after {
  height: 1px;
}

.invoice .el-tabs__header .el-tabs__item {
  padding: 0;
  height: 1.75rem;
  margin-right: 1.25rem;
}

.invoice .el-tabs__header .el-tabs__item:last-child {
  margin-right: 0;
}

.invoice .el-tabs__content {
  background-color: #fff;
  padding-bottom: 1.75rem;
}

.invoice .el-form {
  --el-form-label-font-size: 16px;
  --el-text-color-regular: #000;
  --el-component-size: 1.1rem;
  --el-input-border-color: #d9d9d9;
  margin-top: 1.25rem;
}

.invoice .el-form .el-form-item {
  margin-bottom: 0.5rem;
}

.invoice .el-form .el-form-item:last-child {
  margin-bottom: 0;
}

.invoice .el-form .el-form-item__label {
  padding-right: 14px;
  height: 1.1rem;
  line-height: 1.1rem;
}

.invoice .el-form .el-form-item__content {
  line-height: 1.1rem;
  justify-content: space-between;
}

.invoice .el-form .el-input__wrapper {
  padding: 0 0.4rem;
}

.invoice .el-form .el-button {
  width: 3.75rem;
  height: 1rem;
  border-radius: 0.5rem;
  margin: auto;
}

.invoice .add {
  position: absolute;
  top: 0.65rem;
  right: 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  color: #000;
  z-index: 10;
  cursor: pointer;
}

.invoice .add span {
  width: 0.5rem;
}

.invoice .add span img {
  width: 100%;
}

.order-info .intro {
  margin-top: 0.75rem;
  background-color: #fff;
}

.order-info .intro .num {
  padding: 0 0.5rem;
  height: 1.2rem;
  line-height: 1.2rem;
  border-bottom: 1px solid #e0e0e0;
}

.order-info .intro .box {
  display: flex;
}

.order-info .intro .box .info {
  width: 50%;
  padding: 0.5rem 0.5rem 0.75rem;
  position: relative;
  border-right: 1px solid #e0e0e0;
}

.order-info .intro .box .info .status {
  line-height: 1.2;
  color: var(--vi);
}

.order-info .intro .box .info .con {
  margin-top: 0.6rem;
  color: #000;
  line-height: 1.5;
}

.order-info .intro .box .info .apply {
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
  width: 2.25rem;
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  color: #000000;
  box-shadow: 0 0 0 1px #d9d9d9;
  cursor: pointer;
  transition: all 0.4s;
}

.order-info .intro .box .info .apply:hover {
  background-color: var(--vi);
  color: #fff;
  box-shadow: none;
}

.order-info .intro .box .process {
  width: 50%;
  padding: 0.5rem 0;
}

.order-info .intro .box .process .tips {
  margin-left: 0.5rem;
  display: flex;
  align-items: center;
  color: #ff6800;
  width: 10.05rem;
  height: 0.8rem;
  background-color: #ffefe5;
  padding: 0 0.35rem;
}

.order-info .intro .box .process .tips span {
  width: 0.4rem;
  display: flex;
  margin-right: 0.2rem;
}

.order-info .intro .box .process .tips span img {
  width: 100%;
}

.order-info .inventory {
  margin-top: 0.25rem;
  background-color: #fff;
  height: 1.6rem;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  color: #000;
}

.order-info .inventory .h {
  margin-left: 0.3rem;
}

.order-info .inventory span {
  color: var(--vi);
}

.order-info .top-tit {
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  padding: 0 0.4rem;
  height: 1.5rem;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
}

.order-info .top-tit .info {
  width: 35%;
}

.order-info .top-tit .price {
  width: 13.8%;
}

.order-info .top-tit .num {
  width: 9.6%;
}

.order-info .top-tit .discount {
  width: 19.8%;
}

.order-info .top-tit .total {
  width: 13%;
}

.order-info .top-tit .status {
  width: 8.8%;
}

.order-info .li-box .li {
  display: flex;
  align-items: center;
  padding: 0.4rem;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
}

.order-info .li-box .li .info {
  width: 35%;
  display: flex;
  align-items: center;
}

.order-info .li-box .li .info .img {
  width: 3rem;
  height: 3rem;
}

.order-info .li-box .li .info .img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.order-info .li-box .li .info .con {
  width: calc(100% - 3rem);
  padding-left: 0.45rem;
  padding-right: 2.25rem;
}

.order-info .li-box .li .info .con .h {
  color: #3a3838;
  line-height: 1.3;
  margin-bottom: 0.2rem;
}

.order-info .li-box .li .info .con .item {
  color: #333;
  margin-bottom: 2px;
  line-height: 1.5;
}

.order-info .li-box .li .info .con .item:last-child {
  margin-bottom: 0;
}

.order-info .li-box .li .info .con .item span {
  color: #000;
}

.order-info .li-box .li .price {
  width: 13.8%;
  line-height: 1.5;
}

.order-info .li-box .li .price p {
  color: #000;
}

.order-info .li-box .li .price span {
  margin-top: 0.25rem;
  color: #333;
  position: relative;
}

.order-info .li-box .li .price span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  background-color: #333;
}

.order-info .li-box .li .num {
  width: 9.6%;
  color: #3a3838;
}

.order-info .li-box .li .discount {
  width: 19.8%;
  color: #000;
}

.order-info .li-box .li .discount span {
  color: var(--vi);
}

.order-info .li-box .li .total {
  width: 13%;
  color: var(--vi);
}

.order-info .li-box .li .status {
  width: 8.8%;
  color: #000;
}

.order-info .li-box .li .status span {
  color: var(--vi);
}

.order-info .details {
  margin-top: 0.25rem;
  padding: 0.75rem 0.5rem;
  background-color: #fff;
}

.order-info .details .sub {
  margin-top: 0.35rem;
}

.order-info .details .cont {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.order-info .details .item {
  width: 6.9rem;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.35rem;
  color: #000;
}

.order-info .details .item:last-child {
  margin-bottom: 0;
}

.order-info .details .item span {
  color: var(--vi);
}

.order-info .additional {
  margin-top: 0.25rem;
  padding: 0.5rem 0.45rem;
  display: flex;
  background-color: #fff;
  gap: 1.75rem;
}

.order-info .additional .item {
  display: flex;
  align-items: center;
  color: #000;
  line-height: 1;
}

.order-info .tips {
  margin-top: 0.25rem;
  background-color: #fff;
}

.order-info .tips .h {
  padding: 0.5rem 0.45rem;
  color: #000;
}

.order-info .tips .cont {
  color: #000;
  padding: 0.4rem 0.45rem 0.7rem;
}

.order-info .tips .cont p {
  margin-bottom: 0.3rem;
}

.order-info .tips .cont p:last-child {
  margin-bottom: 0;
}

.order-info .el-breadcrumb {
  margin-top: 0.25rem;
}

.order-info .el-steps {
  margin-top: 0.35rem;
  --el-text-color-placeholder: #e4e4e4;
}

.order-info .el-steps .el-step__icon {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background-color: #e4e4e4;
}

.order-info .el-steps .el-step__icon-inner {
  display: inline-flex;
}

.order-info .el-steps .el-step.is-horizontal .el-step__line {
  top: 0.55rem;
}

.order-info .el-steps .el-step__head.is-finish .el-step__icon {
  background-color: var(--vi);
}

.order-info .el-steps .el-step__title {
  margin-top: 0.3rem;
  line-height: 1.2;
  font-size: 14px;
  color: #000;
}

.order-info .el-steps .el-step__title.is-process {
  font-family: "HarmonyOS_Sans_SC_Regular";
}

.order-info .el-steps img {
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.member-bar {
  padding-bottom: 1.75rem;
}

.member-bar .container {
  background-color: #fff;
  padding-bottom: 1.75rem;
}

.member-bar .el-breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: #606266;
}

.member-bar .el-breadcrumb .el-breadcrumb__item .el-breadcrumb__inner {
  color: #606266;
}

.member-bar .el-breadcrumb .el-breadcrumb__item .el-breadcrumb__inner a {
  color: #606266;
  font-weight: 500;
}

.member-bar .el-breadcrumb .el-breadcrumb__item .el-breadcrumb__separator {
  color: #606266;
}

.member-bar .el-breadcrumb .el-breadcrumb__item .el-breadcrumb__separator::after {
  border-color: #606266;
}

.member-bar .box {
  margin-top: 0.75rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.member-bar .box .container {
  width: calc(100% - 7.65rem);
}

.member .top {
  height: 1.85rem;
  padding: 0 0.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
}

.member .top .edit {
  display: flex;
  align-items: center;
  color: #000;
  cursor: pointer;
}

.member .top .edit span {
  width: 16px;
  margin-right: 4px;
}

.member .top .edit span img {
  width: 100%;
}

.member .info {
  padding: 0.7rem 0.85rem 2rem;
  background-color: #fff;
}

.member .info .item {
  display: flex;
  align-items: center;
  color: #000;
  margin-bottom: 0.75rem;
}

.member .info .item:last-child {
  margin-bottom: 0;
}

.member .info .item .pic {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  overflow: hidden;
  margin-left: 0.35rem;
}

.member .info .item .pic img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.member .info .item span {
  color: #ff0000;
}

.member .info .item .more {
  color: #107bd2;
  margin-left: 0.3rem;
}

.member .form {
  padding: 0.7rem 3.45rem 2rem 0.85rem;
  background-color: #fff;
}

.member .el-form {
  display: flex;
  flex-wrap: wrap;
  --el-text-color-regular: #000;
  --el-font-size-base: 16px;
  --el-component-size: 1rem;
}

.member .el-form .el-form-item {
  align-items: center;
  width: 50%;
  margin-bottom: 0.75rem;
}

.member .el-form .el-form-item.wid100 {
  width: 100%;
}

.member .el-form .el-form-item.bd .el-input__inner {
  width: 100%;
}

.member .el-form .el-form-item__label::before {
  display: none;
}

.member .el-form .el-form-item__content {
  line-height: 1;
}

.member .el-form .el-input__wrapper {
  box-shadow: none;
  justify-content: flex-start;
  padding: 0;
}

.member .el-form .el-input__inner {
  color: #000;
  border-bottom: 1px solid #d4d4d4;
  min-width: 5.35rem;
  width: -moz-max-content;
  width: max-content;
  flex-grow: initial;
}

.member .el-form .el-input__inner::-moz-placeholder {
  color: #000;
}

.member .el-form .el-input__inner::placeholder {
  color: #000;
}

.member .el-form .el-upload {
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  overflow: hidden;
}

.member .el-form .el-upload-list {
  display: none;
}

.member .el-form .icon {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20px;
  text-align: center;
  line-height: 20px;
  background-color: rgba(0, 0, 0, 0.26);
}

.member .el-form .el-radio {
  margin-right: 0.5rem;
}

.member .el-form .el-radio__inner {
  width: 16px;
  height: 16px;
  border-radius: 0;
}

.member .el-form .el-radio__inner::after {
  top: 1px;
  left: 4px;
  width: 5px;
  height: 9px;
  border-radius: 0;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  background-color: transparent;
  transform: rotate(45deg);
}

.member .el-form .el-button {
  width: 2.65rem;
  height: 0.95rem;
  border-radius: 0.5rem;
  font-size: 14px;
}

.address-page .top {
  height: 1.85rem;
  padding: 0 0.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
}

.address-page .top .edit {
  display: flex;
  align-items: center;
  color: #000;
  cursor: pointer;
}

.address-page .top .edit span {
  width: 16px;
  margin-right: 0.25rem;
}

.address-page .top .edit span img {
  width: 100%;
}

.address-page .top-tit {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  height: 1.25rem;
  background-color: #ffe9e9;
  color: #000;
}

.address-page .top-tit .name {
  width: 12.4%;
}

.address-page .top-tit .phone {
  width: 19.2%;
}

.address-page .top-tit .area {
  width: 26%;
}

.address-page .top-tit .address {
  width: 24.5%;
}

.address-page .top-tit .edit {
  width: 17.9%;
  text-align: center;
}

.address-page .li-box .li {
  height: 1.25rem;
  padding: 0 0.75rem;
  display: flex;
  align-items: center;
  background-color: #fff;
  color: #000;
  transition: all 0.4s;
}

.address-page .li-box .li .name {
  width: 12.4%;
}

.address-page .li-box .li .phone {
  width: 19.2%;
}

.address-page .li-box .li .area {
  width: 26%;
}

.address-page .li-box .li .address {
  width: 24.5%;
}

.address-page .li-box .li .edit {
  width: 17.9%;
  display: flex;
  justify-content: center;
  gap: 5px;
}

.address-page .li-box .li .edit .btn {
  min-width: 1.3rem;
  width: fit-content;
  white-space: nowrap;
  height: 0.6rem;
  text-align: center;
  line-height: 0.6rem;
  padding: 0 0.15rem;
  color: #000;
  box-shadow: 0 0 0 1px #cccccc;
  cursor: pointer;
  transition: all 0.4s;
}

.address-page .li-box .li .edit .btn .default {
  width: 1.5rem;
}

.address-page .li-box .li .edit .btn:hover {
  background-color: var(--vi);
  color: #fff;
  box-shadow: none;
}

.address-page .li-box .li .edit .btn.active {
  background-color: var(--vi);
  color: #fff;
  box-shadow: none;
}

.address-page .li-box .li:hover {
  background-color: rgba(255, 220, 220, 0.18);
  color: var(--vi);
}

.address-page .li-box .li:hover .btn {
  color: var(--vi);
}

.address-page .page-box {
  margin-top: 1.5rem;
}

.address-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
}

.address-dialog .container {
  width: 28.85rem;
  padding: 1.75rem 2.5rem 2rem;
  border-radius: 1rem;
  background-color: #fff;
  box-shadow: 0 4px 0.95rem rgba(210, 210, 210, 0.25);
  overflow: hidden;
}

.address-dialog .el-form {
  margin-top: 1.25rem;
  padding: 0 1.5rem 0 1.2rem;
  --el-component-size: 1.1rem;
  --el-border-color: #d9d9d9;
  --el-text-color-regular: #000;
  --el-font-size-base: 16px;
}

.address-dialog .el-form .el-form-item {
  width: 100%;
  margin-bottom: 1rem;
  align-items: center;
}

.address-dialog .el-form .el-form-item.wid3 {
  width: 40%;
}

.address-dialog .el-form .el-input__wrapper {
  height: 1.1rem;
}

.address-dialog .el-form .el-form-item__content {
  justify-content: space-between;
}

.address-dialog .el-form .country {
  width: 1.65rem;
  height: 1.1rem;
  text-align: center;
  line-height: 1.1rem;
  border-radius: 5px;
  background-color: #fafafa;
  border: 1px solid #d9d9d9;
}

.address-dialog .el-form .city-list {
  width: 5.25rem;
  margin-bottom: 0;
}

.address-dialog .el-form .el-select {
  height: 1.1rem;
}

.address-dialog .el-form .el-select__wrapper {
  height: 100%;
  font-size: 0.4rem;
}

.address-dialog .el-form .el-button {
  display: flex;
  width: 3.75rem;
  height: 1rem;
  border-radius: 0.5rem;
  font-size: 14px;
  margin: 1.5rem auto 0;
}

.password .el-form {
  padding: 0.5rem 0.35rem 4.25rem;
  background-color: #fff;
  --el-component-size: 0.6rem;
  --el-font-size-base: 0.4rem;
  --el-text-color-regular: #000;
}

.password .el-form .el-form-item {
  margin-bottom: 0.55rem;
}

.password .el-form .el-form-item:last-child {
  margin-bottom: 0;
}

.password .el-form .el-form-item__label {
  height: auto;
  line-height: 1;
  padding-right: 0.2rem;
  font-family: "HarmonyOS_Sans_SC_Regular";
}

.password .el-form .el-form-item__label::before {
  display: none;
}

.password .el-form .el-input {
  width: 6.1rem;
}

.password .el-form .el-input__wrapper {
  box-shadow: none;
  padding: 0;
  border-bottom: 1px solid #eeeeee;
}

.password .el-form .el-input__wrapper.is-focus {
  box-shadow: none;
}

.password .el-form .el-input__wrapper:hover {
  box-shadow: none;
}

.password .el-form .el-button {
  margin-top: 0.45rem;
  margin-left: 2.6rem;
  width: 2.65rem;
  height: 0.95rem;
  border-radius: 0.5rem;
  font-size: 14px;
  font-family: "HarmonyOS_Sans_SC_Regular";
}

.phone-page .main {
  background-color: #fff;
  padding: 0.5rem 0.35rem 2rem;
}

.phone-page .main .verify {
  display: flex;
  align-items: center;
  line-height: 1.2;
  color: #03b403;
}

.phone-page .main .verify span {
  width: 18px;
  margin-right: 6px;
  display: flex;
}

.phone-page .main .verify span img {
  width: 100%;
}

.phone-page .el-form {
  --el-component-size: 0.7rem;
  --el-font-size-base: 0.4rem;
  --el-text-color-regular: #000;
}

.phone-page .el-form .el-form-item {
  margin-bottom: 0.55rem;
}

.phone-page .el-form .el-form-item__label {
  padding-right: 0.2rem;
  height: auto;
  line-height: 1;
}

.phone-page .el-form .el-form-item__label::before {
  display: none;
}

.phone-page .el-form .el-input {
  width: -moz-max-content;
  width: max-content;
}

.phone-page .el-form .el-input__wrapper {
  width: 6.1rem;
  flex-grow: initial;
  box-shadow: none;
  border-bottom: 1px solid #eeeeee;
  padding: 0;
}

.phone-page .el-form .el-input__wrapper:hover,
.phone-page .el-form .el-input__wrapper.is-focus {
  box-shadow: none;
}

.phone-page .el-form .el-input-group__append {
  position: absolute;
  right: 0.8rem;
  bottom: 6px;
  color: #333;
  box-shadow: none;
  padding: 0;
  background-color: transparent;
  line-height: 1.4;
  min-height: initial;
  border-radius: 0;
  cursor: pointer;
}

.phone-page .el-form .el-input-group__prepend {
  position: absolute;
  left: calc(100% + 0.2rem);
  top: 50%;
  transform: translateY(-50%);
  box-shadow: none;
  padding: 0;
  background-color: transparent;
  min-height: initial;
  border-radius: 0;
}

.phone-page .el-form .el-button {
  margin-left: 2.65rem;
  margin-top: 0.95rem;
  width: 2.65rem;
  height: 0.95rem;
  font-size: 0.35rem;
  border-radius: 0.5rem;
}

.message-page .main {
  padding-bottom: 2rem;
  background-color: #fff;
}

.message-page .main .top {
  height: 1.85rem;
  padding: 0 0.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
}

.message-page .main .top .search {
  display: flex;
  gap: 0.5rem;
}

.message-page .main .li-box {
  margin-top: 0.25rem;
}

.message-page .main .li-box .li {
  position: relative;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.55rem 0.6rem;
  border-bottom: 1px solid #e6e6e6;
  line-height: 1.2;
}

.message-page .main .li-box .li:last-child {
  margin-bottom: 0;
}

.message-page .main .li-box .li .tag {
  position: absolute;
  right: 0;
  top: 0;
  min-width: 1.75rem;
  width: -moz-max-content;
  width: max-content;
  height: 0.65rem;
  text-align: center;
  line-height: 0.65rem;
  padding: 0 0.2rem;
  color: #fff;
  background-color: #f1cf45;
}

.message-page .main .li-box .li .tag.shipped {
  background-color: #5ad210;
}

.message-page .main .li-box .li .tag.pending {
  background-color: var(--vi);
}

.message-page .main .li-box .li .h {
  color: #000;
  font-family: "HarmonyOS_Sans_SC_Regular";
}

.message-page .main .li-box .li .txt {
  margin-top: 0.3rem;
  color: #000;
}

.message-page .main .li-box .li .time {
  position: absolute;
  bottom: 0.5rem;
  right: 0.45rem;
  color: #333;
}

.message-page .main .no-message {
  padding: 2.3rem 0 1.75rem;
}

.message-page .main .no-message div {
  width: 2.25rem;
  margin: auto;
}

.message-page .main .no-message div img {
  width: 100%;
}

.message-page .main .no-message p {
  margin-top: 0.9rem;
  text-align: center;
  line-height: 1.2;
}

.message-page .main .page-box {
  margin-top: 1.75rem;
}

.message-page .el-input {
  width: 8.1rem;
  height: 0.95rem;
  --el-border-color: #d9d9d9;
}

.message-page .el-input .el-input__wrapper {
  border-radius: 0.5rem;
  padding: 0 0.35rem;
}

.message-page .el-button {
  width: 1.95rem;
  height: 0.95rem;
  border-radius: 0.5rem;
  font-family: "HarmonyOS_Sans_SC_Regular";
}

.collect .top {
  height: 1.85rem;
  padding: 0 0.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
}

.collect .top .search {
  display: flex;
  gap: 0.5rem;
}

.collect .top-tit {
  margin: 0.4rem auto 0;
  width: calc(100% - 0.8rem);
  display: flex;
  align-items: center;
  height: 1.25rem;
  background-color: #ffe9e9;
  padding: 0 0.75rem;
  color: #000;
}

.collect .top-tit .num {
  width: 22.5%;
}

.collect .top-tit .name {
  width: 39.5%;
}

.collect .top-tit .brand {
  width: 17.5%;
}

.collect .top-tit .opt {
  width: 20.5%;
  text-align: center;
}

.collect .li-box {
  padding: 0 0.4rem;
}

.collect .li-box .li {
  display: flex;
  align-items: center;
  height: 1.25rem;
  padding: 0 0.75rem;
  color: #000;
  background-color: #fff;
  border: 1px solid #eeeeee;
  border-top: none;
}

.collect .li-box .li .num {
  width: 22.5%;
}

.collect .li-box .li .name {
  width: 39.5%;
}

.collect .li-box .li .brand {
  width: 17.5%;
}

.collect .li-box .li .opt {
  width: 20.5%;
  text-align: center;
}

.collect .li-box .li .opt .btn {
  margin: auto;
  width: 1.9rem;
  height: 0.6rem;
  text-align: center;
  line-height: 0.6rem;
  box-shadow: 0 0 0 1px #cccccc;
  cursor: pointer;
  transition: all 0.4s;
}

.collect .li-box .li .opt .btn:hover {
  background-color: var(--vi);
  color: #fff;
  box-shadow: none;
}

.collect .page-box {
  margin-top: 1.5rem;
}

.collect .el-input {
  width: 8.1rem;
  height: 0.95rem;
  --el-border-color: #d9d9d9;
}

.collect .el-input .el-input__wrapper {
  border-radius: 0.5rem;
  padding: 0 0.35rem;
}

.collect .el-button {
  width: 1.95rem;
  height: 0.95rem;
  border-radius: 0.5rem;
  font-family: "HarmonyOS_Sans_SC_Regular";
}

.comment .main {
  padding-bottom: 2.25rem;
  background-color: #fff;
}

.comment .main .tit {
  width: -moz-max-content;
  width: max-content;
  height: 1.75rem;
  line-height: 1.75rem;
  color: var(--vi);
  margin-left: 0.35rem;
  position: relative;
}

.comment .main .tit::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--vi);
}

.comment .main .li-box {
  border-top: 1px solid #e8e8e8;
  padding: 0.5rem 0.35rem 0;
}

.comment .main .li-box .li {
  position: relative;
  padding-bottom: 0.6rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #eeeeee;
}

.comment .main .li-box .li:last-child {
  margin-bottom: 0;
}

.comment .main .li-box .li.other .user {
  top: 0;
}

.comment .main .li-box .li .user {
  position: absolute;
  right: 0;
  top: 0.4rem;
}

.comment .main .li-box .li .user .nick {
  display: flex;
  align-items: center;
  color: #000;
}

.comment .main .li-box .li .user .nick div {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 0.2rem;
}

.comment .main .li-box .li .user .nick div img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.comment .main .li-box .li .user .anonymous {
  margin-top: 0.4rem;
  color: #000;
  line-height: 1.5;
  text-align: right;
}

.comment .main .li-box .li .box {
  display: flex;
  width: 80%;
}

.comment .main .li-box .li .box .pic {
  width: 1.7rem;
  height: 1.7rem;
  overflow: hidden;
}

.comment .main .li-box .li .box .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.comment .main .li-box .li .box .intro {
  width: calc(100% - 1.7rem);
  padding-left: 0.35rem;
}

.comment .main .li-box .li .box .intro .h {
  color: #000;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.comment .main .li-box .li .box .intro .info {
  margin-top: 0.3rem;
  display: flex;
  align-items: center;
}

.comment .main .li-box .li .box .intro .info .time {
  color: #333;
  line-height: 1.5;
}

.comment .main .li-box .li .box .intro .info .star {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
  color: #000;
}

.comment .main .li-box .li .box .intro .info .star p {
  margin-left: 0.2rem;
  line-height: 1.5;
}

.comment .main .li-box .li .box .intro .info .likes {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
  color: #000000;
}

.comment .main .li-box .li .box .intro .info .likes span {
  width: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comment .main .li-box .li .box .intro .info .likes span img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.comment .main .li-box .li .box .intro .info .likes p {
  margin-left: 0.15rem;
  line-height: 1.5;
}

.comment .main .page-box {
  margin-top: 1.25rem;
}

.comment .el-rate {
  height: auto;
  --el-rate-icon-margin: 0;
}

.feedback .main {
  padding: 0.4rem 0.4rem 1.5rem;
  background-color: #fff;
}

.feedback .el-textarea__inner {
  height: 4rem;
  border-radius: 0;
  padding: 0.25rem 0.35rem;
}

.feedback .el-button {
  margin-top: 1.25rem;
  width: 2.65rem;
  height: 0.95rem;
  border-radius: 0.5rem;
}

.sidebar {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 99;
  padding-right: 4px;
  width: 1.95rem;
  background-color: #fff;
  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.08);
  border-radius: .5rem 0 0 .5rem;
}

.sidebar .li {
  position: relative;
  width: 100%;
  height: 2.05rem;
  border-top: 1px solid #d8d8d8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #333;
  transition: all 0.4s;
}

/*.sidebar .li:fisrt-child {*/
/*  border-left-top-ri*/
/*}*/

.sidebar .li:first-child {
  border-top: none;
}

.sidebar .li sup {
    display: block;
    line-height: 1;
    font-size: 85%;
    position: absolute;
    top: 2px;
    left: 1rem;
    padding: 1px 7px;
    background-color: #ffe8e8;
    color: var(--vi);
    border-radius: 0.25rem;
}

.sidebar .li .icon {
  width: 0.6rem;
  height: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: brightness(0.1);
  opacity: 0.5;
  transition: all 0.4s;
}

.sidebar .li .icon img {
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.sidebar .li p {
  margin-top: 4px;
  font-size: 0.4rem;
}

.sidebar .li .pos-code {
  position: absolute;
  top: 0.55rem;
  right: calc(100% + 0.35rem);
  width: fit-content;
  white-space: nowrap;
  padding: 0.3rem 0.45rem 0.3rem;
  background-color: #fff;
  border: 1px solid #e7e7e7;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-0.5rem);
  transition: all 0.4s;
}

.sidebar .li .pos-code::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0.35rem;
  border-left: 5px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.sidebar .li .pos-code div {
  width: 100%;
  margin-bottom: 0.2rem;
}

.sidebar .li .pos-code div img {
  width: 100%;
}

.sidebar .li .pos-code span {

  display: block;
  color: #000;
}

.sidebar .li:hover {
  color: var(--vi);
}

.sidebar .li:hover .icon {
  filter: brightness(1);
  opacity: 1;
}

.sidebar .li:hover .pos-code {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.order-page .tab {
  display: flex;
  align-items: center;
  width: 100%;
  height: 1.75rem;
  padding: 0 0.35rem;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
  gap: 1.05rem;
}

.order-page .tab .item {
  width: -moz-max-content;
  width: max-content;
  height: 100%;
  line-height: 1.75rem;
  position: relative;
  color: #000;
  cursor: pointer;
  transition: all 0.4s;
}

.order-page .tab .item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: var(--vi);
  transition: all 0.4s;
}

.order-page .tab .item:hover {
  color: var(--vi);
}

.order-page .tab .item.active {
  color: var(--vi);
}

.order-page .tab .item.active::after {
  width: 100%;
}

.order-page .handle {
  background-color: #fff;
  padding: 0.5rem 0.6rem 0.75rem 0.35rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.order-page .handle .h {
  margin-right: 0.5rem;
  color: #000000;
}

.order-page .handle .time {
  display: flex;
  align-items: center;
}

.order-page .handle .time :deep(.el-input__wrapper) {
  width: 11.2rem;
  height: 0.95rem;
  padding: 0 0.45rem;
  border-radius: 0.5rem;
  flex-grow: initial;
}

.order-page .handle .info {
  display: flex;
  align-items: center;
}

.order-page .handle .info .el-input {
  width: 8.9rem;
}

.order-page .handle .info :deep(.el-input__wrapper) {
  padding: 0 0.35rem;
  border-radius: 0.5rem;
}

.order-page .handle .info :deep(.el-input__inner) {
  width: 100%;
  height: 0.95rem;
}

.order-page .handle .number {
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
}

.order-page .handle .number .el-input {
  width: 7.95rem;
}

.order-page .handle .number :deep(.el-input__wrapper) {
  padding: 0 0.35rem;
  border-radius: 0.5rem;
}

.order-page .handle .number :deep(.el-input__inner) {
  width: 100%;
  height: 0.95rem;
}

.order-page .handle .btn-box {
  margin-top: 0.35rem;
  display: flex;
}

.order-page .handle .btn-box .btn {
  width: -moz-max-content;
  width: max-content;
  height: 0.95rem;
  line-height: 0.95rem;
  padding: 0 0.6rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 0 1px #d9d9d9;
  margin-right: 0.5rem;
  color: #000000;
  cursor: pointer;
  transition: all 0.4s;
}

.order-page .handle .btn-box .btn:last-child {
  margin-right: 0;
}

.order-page .handle .btn-box .btn:hover {
  background-color: var(--vi);
  color: #fff;
  box-shadow: none;
}

.order-page .top-tit {
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  height: 1.7rem;
  background-color: #fff;
  text-align: center;
  color: #000;
}

.order-page .top-tit .info {
  text-align: left;
  width: 34%;
  padding-left: 0.35rem;
}

.order-page .top-tit .num {
  width: 9%;
}

.order-page .top-tit .total {
  width: 22%;
}

.order-page .top-tit .addr {
  width: 10%;
}

.order-page .top-tit .status {
  width: 8%;
}

.order-page .top-tit .opt {
  width: 17%;
}

.order-page .li-box .li {
  margin-bottom: 0.25rem;
  border-bottom: 1px solid #f3f3f3;
  background-color: #fff;
}

.order-page .li-box .li:last-child {
  margin-bottom: 0;
}

.order-page .li-box .li .info {
  display: flex;
  align-items: center;
  height: 1.25rem;
  padding: 0 0.35rem;
  background-color: #fffbf6;
  color: #000;
}

.order-page .li-box .li .info .el-checkbox {
  margin-right: 0.2rem;
}

.order-page .li-box .li .info p {
  margin-right: 0.75rem;
}

.order-page .li-box .li .info p:last-child {
  margin-right: 0;
}

.order-page .li-box .li .price {
  display: flex;
  align-items: center;
  height: 1.25rem;
  padding: 0 0.95rem;
  border-bottom: 1px solid #f3f3f3;
  color: #000;
}

.order-page .li-box .li .price p {
  margin-left: 0.35rem;
  color: #333;
}

.order-page .li-box .li .price span {
  color: var(--vi);
}

.order-page .li-box .li .intro {
  display: flex;
}

.order-page .li-box .li .intro .item-box {
  width: 65%;
}

.order-page .li-box .li .intro .item-box .item {
  display: flex;
  border-bottom: 1px solid #f3f3f3;
}

.order-page .li-box .li .intro .item-box .item:last-child {
  border-bottom: none;
}

.order-page .li-box .li .intro .pro-info {
  display: flex;
  align-items: center;
  width: 52%;
  padding: 0.85rem 0.5rem 0.85rem 0.35rem;
  border-right: 1px solid #f3f3f3;
}

.order-page .li-box .li .intro .pro-info .pic {
  width: 2.5rem;
  height: 1.95rem;
}

.order-page .li-box .li .intro .pro-info .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.order-page .li-box .li .intro .pro-info .con {
  width: calc(100% - 2.5rem);
  padding-left: 0.35rem;
  line-height: 1.4;
}

.order-page .li-box .li .intro .pro-info .con .h {
  color: #000;
}

.order-page .li-box .li .intro .pro-info .con .txt {
  margin-top: 0.3rem;
  color: #333;
  display: flex;
  gap: 0.3rem;
}

.order-page .li-box .li .intro .num {
  width: 14%;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #000;
  border-right: 1px solid #f3f3f3;
}

.order-page .li-box .li .intro .num span {
  color: #333;
}

.order-page .li-box .li .intro .num .old {
  margin: 0.3rem 0 0.5rem;
  position: relative;
}

.order-page .li-box .li .intro .num .old::after {
  content: "";
  position: absolute;
  top: 48%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #999;
}

.order-page .li-box .li .intro .total {
  width: 34%;
  border-right: 1px solid #f3f3f3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.order-page .li-box .li .intro .addr {
  width: 10%;
  border-right: 1px solid #f3f3f3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #000;
  line-height: 1.2;
}

.order-page .li-box .li .intro .status {
  width: 8%;
  border-right: 1px solid #f3f3f3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.order-page .li-box .li .intro .opt {
  width: 17%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  text-align: center;
}

.order-page .li-box .li .intro .opt .btn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.order-page .li-box .li .intro .opt .btn {
  width: -moz-max-content;
  width: max-content;
  height: 24px;
  line-height: 24px;
  padding: 0 6px;
  border: 1px solid #ccc;
  margin-bottom: 6px;
  color: #000;
  cursor: pointer;
  transition: all 0.4s;
}

.order-page .li-box .li .intro .opt .btn:last-child {
  margin-bottom: 0;
}

.order-page .li-box .li .intro .opt .btn:hover {
  border-color: #ff5b5f;
  background-color: rgba(255, 91, 95, 0.07);
  color: #ff5b5f;
}

.order-page .li-box .li .intro .opt .countdown {
  line-height: 1.5;
  color: #ff6200;
}

.order-page .fix-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2.25rem;
  background-color: #fff;
  box-shadow: 0 -0.25rem 0.25rem rgba(89, 89, 89, 0.09);
  z-index: 100;
}

.order-page .fix-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.order-page .fix-bar .lf {
  display: flex;
}

.order-page .fix-bar .el-checkbox {
  --el-checkbox-input-width: 20px;
  --el-checkbox-input-height: 20px;
}

.order-page .fix-bar .el-checkbox :deep(.el-checkbox__inner::after) {
  width: 6px;
  height: 12px;
  left: 5px;
}

.order-page .fix-bar .el-checkbox :deep(.el-checkbox__label) {
  padding-left: 0.4rem;
}

.order-page .fix-bar .txt {
  margin-left: 2.9rem;
  color: #000;
}

.order-page .fix-bar .txt span {
  color: var(--vi);
}

.order-page .fix-bar .delete {
  width: 3.3rem;
  height: 2.25rem;
  background-color: var(--vi);
  color: #fff;
  text-align: center;
  line-height: 2.25rem;
  cursor: pointer;
}

.log {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
  display: none;
}

.log .container {
  width: 19rem;
  padding: 1.75rem 2rem;
  border-radius: 1rem;
  background-color: #fff;
  box-shadow: 0 4px 0.95rem rgba(210, 210, 210, 0.25);
  overflow: hidden;
}

.log .tit {
  color: #000;
}

.log .tab {
  margin-top: 1.25rem;
  display: flex;
  gap: 1rem;
  border-bottom: 1px solid #eaeaea;
}

.log .tab span {
  position: relative;
  width: -moz-max-content;
  width: max-content;
  padding-bottom: 0.6rem;
  color: #000;
  cursor: pointer;
  transition: all 0.4s;
}

.log .tab span::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background-color: var(--vi);
  transition: all 0.4s;
}

.log .tab span:hover {
  color: var(--vi);
}

.log .tab span.active {
  color: var(--vi);
}

.log .tab span.active::after {
  width: 100%;
}

.log .info {
  margin-top: 0.4rem;
  display: flex;
  gap: 1.5rem;
}

.log .info .li {
  color: #000;
}

.log .info .li span {
  margin-left: 0.35rem;
  color: #333;
}

.log .el-scrollbar {
  margin-top: 1.25rem;
}

.log .el-timeline {
  padding-left: 1px;
  --el-font-size-small: 14px;
  --el-border-color-light: #d7d7d7;
}

.log .el-timeline .el-timeline-item__wrapper {
  top: 0;
  display: flex;
  flex-direction: column-reverse;
}

.log .el-timeline .el-timeline-item__node.is-hollow {
  border-color: var(--vi);
  border-width: 1px;
}

.log .el-timeline .el-timeline-item__node.is-hollow+.el-timeline-item__wrapper .el-timeline-item__timestamp {
  color: var(--vi);
}

.log .el-timeline .el-timeline-item__node.is-hollow+.el-timeline-item__wrapper .el-timeline-item__content {
  color: var(--vi);
}

.log .el-timeline .el-timeline-item__timestamp {
  margin-top: 0;
  color: #000;
  line-height: 1.1;
}

.log .el-timeline .el-timeline-item__content {
  margin-top: 0.25rem;
  color: #999;
  line-height: 1.5;
}

.refund {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
  display: none;
}

.refund .container {
  width: 27.3rem;
  padding: 1.75rem 2.75rem;
  border-radius: 1rem;
  background-color: #fff;
  box-shadow: 0 4px 0.95rem rgba(210, 210, 210, 0.25);
  overflow: hidden;
}

.refund .table {
  margin-top: 1.25rem;
}

.refund table {
  border: 1px solid #dbdbdb;
  text-align: center;
}

.refund table tr {
  height: 1.1rem;
}

.refund table td {
  border: 1px solid #dbdbdb;
  width: 22%;
  padding: 0.25rem 0.6rem;
  line-height: 1.5;
  color: #000;
}

.refund table td:nth-child(1) {
  width: 27%;
}

.refund table td:nth-child(2) {
  width: 51%;
}

.refund .price {
  margin-top: 0.75rem;
  display: flex;
  align-items: baseline;
  color: #333;
}

.refund .price p {
  color: #000;
  line-height: 1.2;
}

.refund .price span {
  margin-left: 3px;
  margin-right: 0.45rem;
  color: var(--vi);
}

.refund .reason {
  margin-top: 1.05rem;
  display: flex;
  justify-content: space-between;
}

.refund .reason .h {
  color: #000;
}

.refund .reason .select {
  display: flex;
  align-items: flex-start;
}

.refund .reason .remark {
  width: 10.4rem;
}

.refund .btn-box {
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.refund .btn-box .btn {
  width: 3.75rem;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 0 1px #c7c7c7;
  cursor: pointer;
  transition: all 0.4s;
}

.refund .btn-box .btn:hover {
  background-color: var(--vi);
  color: #fff;
  box-shadow: none;
}

.refund .el-radio-group {
  width: 6.25rem;
  gap: 0.4rem;
}

.refund .el-radio-group .el-radio {
  width: 100%;
  height: auto;
  line-height: 1.8;
  margin-right: 0;
  flex-direction: row-reverse;
  justify-content: space-between;
  --el-radio-input-width: 16px;
  --el-radio-input-height: 16px;
}

.refund .el-radio-group .el-radio__label {
  padding-left: 0;
}

.refund .el-radio-group .el-radio__inner {
  border-radius: 0;
}

.refund .el-radio-group .el-radio__inner::after {
  width: 4px;
  height: 9px;
  top: 1px;
  left: 5px;
  border-radius: 0;
  background-color: transparent;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(45deg);
}

.refund .el-textarea {
  margin-top: 0.25rem;
  width: 100%;
  height: 2.25rem;
}

.refund .el-textarea .el-textarea__inner {
  border-radius: 0;
  padding: 0.35rem 0.25rem;
  height: 100%;
}

.ab1 {
  padding: 1.2rem 0 1.1rem 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.ab1 .left {
  width: 19.05rem;
}

.ab1 .left .tit {
  margin-bottom: 1rem;
}

.ab1 .left .h {
  color: #D21014;
  line-height: 2;
  font-family: "HarmonyOS_Sans_SC_Regular";
  margin-bottom: 0.75rem;
}

.ab1 .left .p {
  line-height: 2;
  color: #000;
  font-weight: 400;
}

.ab1 .right {
  width: calc(100% - 19rem);
  position: relative;
}

.ab1 .right .bj {
  width: 100%;
}

.ab1 .right .bj img {
  mix-blend-mode: multiply;
}

.ab1 .right .list {
  position: absolute;
  left: 0;
  bottom: 0.4rem;
  padding: 0 0rem 0 4.1rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.ab1 .right .list .item {
  position: relative;
  width: 1.9rem;
  height: 1.9rem;
  background: #ffffff;
  border-radius: 50%;
  transition: all 0.5s;
  cursor: pointer;
}

.ab1 .right .list .item.on {
  background-color: #F7E4E4;
}

/*.ab1 .right .list .item:hover{background-color:#F7E4E4;}*/
.ab1 .right .list .item .icon {
  width: 100%;
  height: 100%;
}

.ab1 .right .list .item .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ab1 .right .list .item .txt {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  width: 5.4rem;
  height: 2.25rem;
  background: url(../img/ab1_kuang.png);
  background-size: 100% 100%;
  text-align: center;
  line-height: 1.6rem;
  color: #636363;
  pointer-events: none;
  opacity: 0;
  transition: all 0.5s;
}

.ab1 .right .list .item.on .txt {
  opacity: 1;
}

.ab2 .tit {
  margin-bottom: 1rem;
}

.ab2 .list {
  display: flex;
}

.ab2 .list .item {
  display: block;
  width: 8.1rem;
  background: #fff;
  margin-right: 0.55rem;
  margin-bottom: 0.55rem;
  flex-wrap: wrap;
  transition: all 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ab2 .list .item:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.08);
}

.ab2 .list .item:nth-child(4n) {
  margin-right: 0;
}

.ab3 {
  padding: 0.95rem 0 0 0;
}

.ab3 .tit {
  margin-bottom: 1rem;
}

.ab3 .list {
  /*padding-left: 10rem;*/
  padding-bottom: 2.5rem;
  position: relative;
  overflow: hidden;
}

.ab3 .list .swiper-slide {
  width: 6.55rem;
  margin-right: 0.35rem;
  height: 7rem;
  padding: 0.9rem 0 0 0;
  background-color: #fff;
  border: 1px solid rgba(225, 225, 225, 0.76);
  border-radius: 0.55rem;
}

.ab3 .list .swiper-slide:last-child {
  margin-right: 0;
}

.ab3 .list .swiper-slide .icon {
  width: 2.15rem;
  height: 2.15rem;
  margin: 0 auto;
  margin-bottom: 0.6rem;
}

.ab3 .list .swiper-slide .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: all .4s;
}

.ab3 .list .swiper-slide .icon img.img2 {
  display: none;
}

.ab3 .list .swiper-slide:hover img {
  transform: scale(1.04);
}

.ab3 .list .swiper-slide:hover .icon img.img2 {
  display: block;
}

.ab3 .list .swiper-slide:hover .icon img.img1 {
  display: none;
}

.ab3 .list .swiper-slide .solid {
  width: 1px;
  height: 1.5rem;
  background-color: #C2C2C2;
  margin: 0 auto;
  margin-bottom: 0.6rem;
}

.ab3 .list .swiper-slide:hover .solid {
  background-color: #D21317;
}

.ab3 .list .swiper-slide .h {
  text-align: center;
  color: #000;
  font-weight: 400;
}

.ab3 .list .swiper-slide:hover .h {
  color: #D21317;
}

.ab3 .list .btns {
  position: absolute;
  /*left: 10rem;*/
  bottom: 0;
  width: 2.6rem;
  height: 1.1rem;
  display: flex;
  justify-content: space-between;
}

.ab3 .list .btns>div {
  width: 1.1rem;
  height: 1.1rem;
  cursor: pointer;
}

.ab3 .list .btns>div img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ab3 .list .btns>div img.img2 {
  display: none;
}

.ab3 .list .btns>div:hover img.img2 {
  display: block;
}

.ab3 .list .btns>div:hover img.img1 {
  display: none;
}

.ab3 .list .swiper-pagination {
  left: 5rem;
  top: auto;
  bottom: 0.55rem;
  width: calc(100% - 5rem);
  height: 1px;
}

.ab3 .list .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background-color: #D21317;
}

.ab4 {
  padding: 1.5rem 0 2.25rem 0;
  z-index: 2;
  position: relative;
}

.ab4:before {
  content: "";
  position: absolute;
  top: 0.5rem;
  right: 7rem;
  height: 6.6rem;
  width: 13.77rem;
  background: url(../img/ab4_bj1.png);
  background-size: 100% 100%;
  z-index: -1;
}

.ab4:after {
  content: "";
  position: absolute;
  bottom: -4.55rem;
  left: 12.35rem;
  height: 7rem;
  width: 7.62rem;
  background: url(../img/ab4_bj2.png);
  background-size: 100% 100%;
  z-index: -1;
}

.ab4 .tit {
  margin-bottom: 1rem;
}

.ab4 .ht {
  text-align: center;
  color: #000;
  line-height: 1.5;
  margin-bottom: 2rem;
}

.ab4 .list {
  width: 100%;
  display: flex;
  margin-bottom: 1.5rem;
}

.ab4 .list .item {
  width: 5.25rem;
  margin-right: 1.9375rem;
  text-align: center;
}

.ab4 .list .item:last-child {
  margin-right: 0;
}

.ab4 .list .item .icon img {
  height: 1.5rem;
  display: block;
  margin: 0 auto;
  margin-bottom: 1rem;
}

.ab4 .list .item .h {
  color: #000;
  line-height: 1.5;
  font-weight: 400;
  margin-bottom: 0.4rem;
}

.ab4 .list .item .p {
  color: #000;
  line-height: 1.5;
  font-weight: 400;
}

.ab4 .bottom {
  width: fit-content;
  margin: 0 auto;
  display: flex;
  padding: 0.2rem 0.8rem;
  background-color: #fff;
  height: 1.05rem;
  border-radius: 0.52rem;
  box-shadow: 0 4px 11.8px rgba(0, 0, 0, 0.07);
}

.ab4 .bottom .item {
  display: flex;
  align-items: center;
  color: #000;
  line-height: 1.5;
  margin-right: 1rem;
}

.ab4 .bottom .item img {
  display: block;
  width: 0.475rem;
  height: 0.375rem;
  object-fit: contain;
  margin-right: 0.375rem;
}

.ab5 {
  background: url(../img/ab5_bj2.png)no-repeat right bottom;
  background-size: 41rem 13.75rem;
}

.ab5 .tit {
  margin-bottom: 2.25rem;
}

.ab5 .con {
  display: flex;
  position: relative;
}

.ab5 .con .left {
  padding-bottom: 3.75rem;
}

.ab5 .con .left .h {
  color: #000;
  line-height: 1.3;
  font-family: "HarmonyOS_Sans_SC_Regular";
  margin-bottom: 1.5rem;
}

.ab5 .con .left .ab_btn {
  width: fit-content;
  padding: 0.25rem 0.5rem;
  background-color: #D21014;
  border-radius: 0.6rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.ab5 .con .left .ab_btn img {
  display: block;
  width: 0.475rem;
  margin-right: 0.2rem;
}

.ab5 .con .left .num {
  color: #D21014;
  font-weight: 700;
  width: fit-content;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #D5D5D5;
  margin-bottom: 0.5rem;
}

.ab5 .con .left .li {
  display: flex;
  margin-bottom: 0.25rem;
  color: #111;
  line-height: 1.6;
  font-weight: 400;
}

.ab5 .con .left .li span {
  color: rgba(17, 17, 17, 0.40);
}

.ab5 .con .right .item {
  position: absolute;
  bottom: 4.25rem;
  right: -3.5rem;
}

.ab5 .con .right .item .dian {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background-color: #D21014;
  position: absolute;
  right: 16.2rem;
  bottom: 1.5rem;
}

.ab5 .con .right .item .dian:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: rgba(255, 141, 141, 0.40);
}

.ab5 .con .right .item .dian:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: rgba(255, 202, 202, 0.40);
}

.ab5 .con .right .item .box {
  width: 13.5rem;
  height: 4rem;
  background: url(../img/ab5_kuang.png);
  background-size: 100% 100%;
  display: flex;
  padding: 0.7rem 0.6rem 0.6rem 1.15rem;
  justify-content: space-between;
}

.ab5 .con .right .item .box .txt {
  width: 8.2rem;
}

.ab5 .con .right .item .box .code {
  width: fit-content;
  width: 2.4rem;
  text-align: center;
}

.ab5 .con .right .item .box .code img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  margin-bottom: 0.25rem;
}

.ab5 .con .right .item .box .solid {
  width: 1px;
  height: 2.625rem;
  background-color: #E6E6E6;
  opacity: 0.8;
}

.join-page {
  padding: 1.2rem 0 2.25rem 0;
}

.join-page .tit {
  margin-bottom: 1rem;
}

.join-page .list {
  padding-bottom: 1rem;
}

.join-page .item {
  margin-bottom: 0.5rem;
  background-color: #ffffff;
}

.join-page .item .top {
  display: flex;
  cursor: pointer;
  transition: all 0.5s;
}

.join-page .item.on .top {
  background-color: #D21014;
}

.join-page .item .top .t_left {
  width: calc(100% - 2.75rem);
  padding: 0.75rem 0.75rem 0.55rem 0.75rem;
}

.join-page .item .top .t_left .h {
  color: #D21014;
  font-weight: 400;
  margin-bottom: 0.25rem;
}

.join-page .item.on .top .t_left .h {
  color: #fff;
}

.join-page .item .top .t_left .ps {
  display: flex;
}

.join-page .item .top .t_left .p {
  color: #000;
  padding-right: 1.75rem;
  margin-right: 1.75rem;
  border-right: 1px solid #C9C9C9;
  transition: all 0.5s
}

.join-page .item.on .top .t_left .p {
  color: #fff;
  border-color: #ddd;
}

.join-page .item .top .t_left .p:last-child {
  padding-right: 0;
  margin-right: 0;
  border-right: none;
}

.join-page .item .top .t_right {
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid #C9C9C9;
  transition: all 0.5s;
}

.join-page .item.on .top .t_right {
  border-color: #fff;
}

.join-page .item .top .t_right img {
  width: 0.75rem;
  height: 0.75rem;
  object-fit: contain;
}

.join-page .item .top .t_right img.img1 {
  display: none;
}

.join-page .item.on .top .t_right img.img1 {
  display: block;
}

.join-page .item.on .top .t_right img.img2 {
  display: none;
}

.join-page .item .bottom {
  padding: 0.75rem 3.25rem 5px 0.75rem;
  display: none;
}

.join-page .item .bottom .item1 {
  margin-bottom: 0.75rem;
}

.join-page .item .bottom .item1 .h {
  color: #D21014;
  font-family: "HarmonyOS_Sans_SC_Regular";
  margin-bottom: 0.5rem;
}

.join-page .item .bottom .item1 .p {
  color: #000;
  line-height: 1.6;
  font-weight: 400;
}

.back-top {
  cursor: pointer;
}

.noData {
  width: 100%;
  margin-top: .45rem;
}

.noData .wrap {
  padding: 1.05rem 0 3rem;
  background: #fff;
  text-align: center;
  color: #333;
}

.noData .wrap div {
  width: 5rem;
  margin: 0 auto .6rem;
}

.noData .wrap div img {
  width: 100%;
}

.embed-icon {
  display: none;
}

.banner {
  width: 100%;
  position: relative;
}
.banner img {
  width: 100%;
}
.banner .intro {
  position: absolute;
  top: 27.5%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  /*top: 47.5%;*/
}
.banner .intro .more {
  margin-top: 0.75rem;
  display: block;
  width: 2.5rem;
  height: 0.85rem;
  border-radius: 1rem;
  text-align: center;
  line-height: 0.85rem;
  background-color: var(--vi);
  color: #fff;
}

.service-info {
  margin-top: .25rem;
  padding-bottom: 1.9rem;
}
.service-info .box {
  margin-top: 0.35rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.service-info .box .left {
  width: 21.5%;
  background-color: #fff;
  position: sticky;
  top: 1rem;
}
.service-info .box .left .tit {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--vi);
  color: #fff;
  height: 1.25rem;
}
.service-info .box .left .tit span {
  width: 0.45rem;
  margin-right: 6px;
}
.service-info .box .left .link {
  display: block;
  color: #666;
  position: relative;
  line-height: 1.5;
  margin-bottom: 0.5rem;
  transition: all 0.4s;
}
.service-info .box .left .link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + .25rem);
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vi);
  opacity: 0;
}
.service-info .box .left .link:last-child {
  margin-bottom: 0;
}
.service-info .box .left .link:hover {
  color: var(--vi);
}
.service-info .box .left .link.active {
  color: var(--vi);
}
.service-info .box .left .link.active::after {
  opacity: 1;
}
.service-info .box .right {
  width: calc(78.5% - 0.2rem);
  background-color: #fff;
  padding: 0.6rem .25rem 2.2rem 0.8rem;
}
.service-info .box .right .h {
  display: flex;
  align-items: center;
  padding-bottom: 0.75rem;
  /*border-bottom: 3px solid var(--vi);*/
  gap: 0.3rem;
  position: relative;
  width: max-content;
}
.service-info .box .right .h::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% + .5rem);
  height: 3px;
  background: var(--vi);
}
.service-info .box .right .h span {
  width: 0.75rem;
  height: 0.75rem;
  display: flex;
  align-items: center;
}
.service-info .box .right .h span img {
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.service-info .box .right .h p {
  color: transparent;
  background-image: linear-gradient(to right, #2f4670, var(--vi));
  -webkit-background-clip: text;
          background-clip: text;
}
.service-info .box .right .list {
  margin-bottom: 1.5rem;
}
.service-info .box .right .list:last-child {
  margin-bottom: 0;
}
.service-info .box .right .box1 .txt {
  margin-top: 0.8rem;
  color: #000;
  line-height: 2;
}
.service-info .box .right .box2 .li-box {
  margin-top: 1.25rem;
  display: flex;
  padding-right: 1.2rem;
  gap: 6.66%;
}
.service-info .box .right .box2 .li-box .li {
  width: 20%;
  text-align: center;
}
.service-info .box .right .box2 .li-box .li .icon {
  width: 1.5rem;
  height: 1.5rem;
  margin: auto;
}
.service-info .box .right .box2 .li-box .li .h1 {
  margin-top: 0.5rem;
  color: #333333;
  line-height: 1.2;
  font-weight: bold;
}
.service-info .box .right .box2 .li-box .li .txt {
  margin-top: 0.15rem;
  color: #666;
  line-height: 1.6;
}
.service-info .box .right .box3 .li-box {
  margin-top: 0.95rem;
  width: calc(100% - 1rem);
  border: 2px dashed #ffb3b4;
  border-radius: 0.3rem;
  padding: 1rem 0;
}
.service-info .box .right .box3 .li-box .item-box {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.service-info .box .right .box3 .li-box .item-box:last-child {
  margin-bottom: 0;
}
.service-info .box .right .box3 .li-box .item-box:nth-child(2n) {
  flex-direction: row-reverse;
}
.service-info .box .right .box3 .li-box .item-box:nth-child(2n) .li::after {
  left: auto;
  right: calc(100% - 0.625rem);
  transform: rotate(180deg);
}
.service-info .box .right .box3 .li-box .li {
  width: 25%;
  position: relative;
}
.service-info .box .right .box3 .li-box .li::after {
  content: "";
  position: absolute;
  top: 0.375rem;
  left: calc(100% - 0.625rem);
  width: 1.25rem;
  height: 0.95rem;
  background-image: url(../img/121.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.service-info .box .right .box3 .li-box .li:nth-child(4n)::after {
  display: none;
}
.service-info .box .right .box3 .li-box .li:last-child::after {
  display: none;
}
.service-info .box .right .box3 .li-box .li .icon {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  margin: auto;
  /*background-color: var(--vi);*/
  border: 3px solid #fff;
  box-shadow: 0 3px 0.75rem rgba(239, 33, 33, 0.27);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-info .box .right .box3 .li-box .li .icon img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.service-info .box .right .box3 .li-box .li p {
  text-align: center;
  padding: 0 1rem;
  color: #333333;
  margin-top: 0.4rem;
}
.service-info .box .right .box3 .pic {
  width: 100%;
}
.service-info .box .right .box3 .pic img {
  width: 100%;
}
.service-info .box .right .box4 .table {
  margin-top: 0.95rem;
  border: 1px solid #b81c2b;
  border-radius: 0.3rem;
  box-shadow: 0 0.1rem 0.8rem rgba(239, 33, 33, 0.06);
  padding: 0.2rem 0.2rem 0;
  width: calc(100% - 0.5rem);
}
.service-info .box .right .box4 .table table {
  width: 100%;
  border-radius: 0.3rem;
  overflow: hidden;
}
.service-info .box .right .box4 .table tr {
  min-height: 1.25rem;
  border-bottom: 1px solid #ffb3b4;
}
.service-info .box .right .box4 .table tr:first-child {
  background-color: #b81c2b;
  color: #fff;
}
.service-info .box .right .box4 .table tr:last-child {
  border-bottom: none;
}
.service-info .box .right .box4 .table tr td {
  width: 22.5%;
  /*text-align: center;*/
  padding: 0.4rem;
  border-right: 1px solid #ffb3b4;
}
.service-info .box .right .box4 .table tr td:nth-child(5) {
  width: 10%;
}
.service-info .box .right .box4 .table tr td:last-child {
  border-right: none;
}
.service-info .box .right .box4 .table tr p::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #b81c2b;
  margin-right: 0.15rem;
  display: none;
}
.service-info .box .right .box5 .container {
  margin-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 0.75rem;
  padding-right: 0.5rem;
}
.service-info .box .right .box5 .container .item {
  width: 100%;
}
.service-info .box .right .box5 .container .item .top-intro {
  display: flex;
  align-items: center;
}
.service-info .box .right .box5 .container .item .top-intro .tag {
  width: 2.65rem;
  height: 1.1rem;
  text-align: center;
  line-height: 1.1rem;
  color: #fff;
  border-radius: 0.1rem;
  background-color: var(--vi);
}
.service-info .box .right .box5 .container .item .top-intro .txt {
  width: calc(100% - 2.65rem);
  padding-left: 0.65rem;
  color: #333333;
  line-height: 1.6;
  max-height: 3.2em;
  padding-right: 5px;
  overflow-y: auto;
}
.service-info .box .right .box5 .container .item .top-intro .txt::-webkit-scrollbar {
  width: 2px;
}
.service-info .box .right .box5 .container .item .pic {
  margin-top: 0.5rem;
  width: 100%;
}
.service-info .box .right .box5 .container .item .pic img {
  width: 100%;
}
.service-info .box .right .box5 .container .item .img-box {
  margin-top: 0.5rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.1rem;
}
.service-info .box .right .box5 .container .item .img-box .img {
  width: calc((100% - 1.1rem) / 2);
  min-height: 6rem;
  padding: 0.6rem 0.4rem;
  border-radius: 0.3rem;
  border: 2px solid #e8e8e8;
  transition: all 0.4s;
}
.service-info .box .right .box5 .container .item .img-box .img img {
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.service-info .box .right .box5 .container .item .img-box .img div {
  width: 100%;
  height: 4.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-info .box .right .box5 .container .item .img-box .img p {
  margin-top: 0.5rem;
  line-height: 1.4;
  max-height: 4.2em;
  text-align: center;
  color: #333333;
  overflow-y: auto;
  transition: all 0.4s;
}
.service-info .box .right .box5 .container .item .img-box .img p::-webkit-scrollbar {
  width: 2px;
}
.service-info .box .right .box5 .container .item .img-box .img:hover {
  box-shadow: 0 0.1rem 0.8rem rgba(239, 33, 33, 0.06);
  border-style: dashed;
  border-color: var(--vi);
}
.service-info .box .right .box5 .container .item .img-box .img:hover p {
  color: var(--vi);
}
.service-info .box .right .box5 .container .item .img-box .img.wid1 {
  width: 100%;
}
.service-info .box .right .box5 .container .item .img-box .img.wid3 {
  width: calc((100% - 2.2rem) / 3);
}
.service-info .box .right .box5 .container .item.wid2 {
  width: calc((100% - 0.75rem) / 2);
}
.service-info .box .right .box6 .box6-swiper {
  margin: 1.1rem 0 0;
  width: calc(100% - 0.4rem);
}
.service-info .box .right .box6 .box6-swiper .swiper-slide {
  width: 24%;
  height: 4.3rem;
  margin-right: 1.333%;
  background-color: #fff;
  border-radius: 0.3rem;
  box-shadow: 0 0.1rem 0.8rem rgba(239, 33, 33, 0.04);
  padding: 0.75rem 0.5rem 0.5rem;
}
.service-info .box .right .box6 .box6-swiper .swiper-slide:last-child {
  margin-right: 0;
}
.service-info .box .right .box6 .box6-swiper .swiper-slide .icon {
  width: 1.55rem;
  height: 1.55rem;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-info .box .right .box6 .box6-swiper .swiper-slide .icon img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.service-info .box .right .box6 .box6-swiper .swiper-slide .h2 {
  margin-top: 0.45rem;
  padding-top: 0.5rem;
  color: #2f4670;
  text-align: center;
  position: relative;
}
.service-info .box .right .box6 .box6-swiper .swiper-slide .h2::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2.75rem;
  height: 3px;
  background-color: var(--vi);
}
.service-info .box .right .box7 .li-box {
  margin-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding-right: 0.5rem;
}
.service-info .box .right .box7 .li-box .li {
  width: calc((100% - 0.6rem) / 3);
  display: flex;
  align-items: center;
  padding: 0.55rem;
  background-color: #fafafa;
  border-radius: 0.3rem;
}
.service-info .box .right .box7 .li-box .li .icon {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(221, 221, 221, 0.6);
}
.service-info .box .right .box7 .li-box .li .icon img {
  max-width: 60%;
  max-height: 60%;
  -o-object-fit: contain;
     object-fit: contain;
}
.service-info .box .right .box7 .li-box .li .intro {
  width: calc(100% - 2.9rem);
  padding-left: 0.55rem;
}
.service-info .box .right .box7 .li-box .li .intro .h1 {
  color: #333;
  line-height: 1.6;
}
.service-info .box .right .box7 .li-box .li .intro .txt {
  margin-top: 0.4rem;
  color: #666;
  line-height: 1.8;
}
.service-info .box .right .box8 .sub {
  margin-top: .85rem;
}
.service-info .box .right .box8 .li-box {
  margin-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.3rem;
  padding-right: 0.5rem;
}
.service-info .box .right .box8 .li-box .li {
  width: calc((100% - 0.6rem) / 3);
  min-height: 4.6rem;
  background-color: #fafafa;
  display: flex;
  align-items: center;
  padding: 0.55rem;
  border-radius: 0.3rem;
}
.service-info .box .right .box8 .li-box .li .pic {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  overflow: hidden;
}
.service-info .box .right .box8 .li-box .li .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.service-info .box .right .box8 .li-box .li .intro {
  width: calc(100% - 2.9rem);
  padding-left: 0.55rem;
}
.service-info .box .right .box8 .li-box .li .intro .h1 {
  color: #333;
  line-height: 1.6;
}
.service-info .box .right .box8 .li-box .li .intro .txt {
  margin-top: 0.15rem;
  color: #666666;
  line-height: 1.3;
}
.service-info .box .right .box9 .li-box {
  margin-top: 1.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  padding: 0 1.2rem;
}
.service-info .box .right .box9 .li-box .li {
  width: calc((100% - 1.25rem) / 2);
  height: 5.25rem;
  background-color: rgba(255, 238, 239, 0.6);
  border-radius: 0.5rem 0 0.5rem 0;
  position: relative;
  padding: 1.8rem 1.9rem 0.5rem;
  text-align: center;
}
.service-info .box .right .box9 .li-box .li .num {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: linear-gradient(123deg, #b81c2b 7.71%, #e6494c 99.75%);
  color: #fff;
  line-height: 1.5rem;
}
.service-info .box .right .box9 .li-box .li .h1 {
  color: var(--vi);
  font-weight: bold;
  line-height: 1.3;
}
.service-info .box .right .box9 .li-box .li .txt {
  margin-top: 0.3rem;
  color: #656060;
  line-height: 1.3;
}
.service-info .box .right .contact .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.05rem;
  padding-right: 0.45rem;
}
.service-info .box .right .contact .lf {
  width: 38.2%;
  background-color: rgba(255, 198, 174, 0.1);
  padding: 1rem 1.15rem;
}
.service-info .box .right .contact .lf div {
  width: 100%;
}
.service-info .box .right .contact .lf div img {
  width: 100%;
}
.service-info .box .right .contact .lf p {
  margin-top: 0.7rem;
  color: #333333;
  line-height: 1.6;
  text-align: center;
}
.service-info .el-collapse .el-collapse-item {
  margin-bottom: .25rem;
}
.service-info .el-collapse .el-collapse-item:last-child {
  margin-bottom: 0;
}
.service-info .el-collapse .el-collapse-item__header {
  height: 1rem;
  line-height: 1rem;
  padding: 0 0.3rem 0 1rem;
  font-size: 14px;
  color: #333;
  justify-content: space-between;
  border-bottom: none;
  transition: all 0.4s;
}
.service-info .el-collapse .el-collapse-item.is_active .el-collapse-item__header {
  background-color: var(--vi);
  color: #fff;
}
.service-info .el-collapse .el-collapse-item .el-collapse-item__header a {
  /*color: #fff;*/
  flex: initial;
  transition: all .4s;
}
.service-info .el-collapse .el-collapse-item.is_active .el-collapse-item__header a {
  color: #fff;
}
.service-info .el-collapse .el-collapse-item__header.is-active {
  background-color: #ffedeb;
  color: var(--vi);
}
.service-info .el-collapse .el-collapse-item__wrap {
  border-bottom: none;
  display: none;
}
.service-info .el-collapse .el-collapse-item.is_active .el-collapse-item__wrap {
  display: block;
}
.service-info .el-collapse .el-collapse-item__content {
  padding-bottom: 0;
  font-size: 14px;
  padding: 0.25rem 1.5rem;
  line-height: 1.2;
}
.service-info .el-collapse .el-icon svg {
  transform: rotate(90deg);
}
.service-info .el-collapse .el-collapse-item__arrow.is-active {
  transform: rotate(180deg);
}
.service-info .el-form {
  width: calc(61.8% - 0.6rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.service-info .el-form .el-form-item {
  width: 47%;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #d9d9d9;
}
.service-info .el-form .el-form-item:last-child {
  margin-bottom: 0;
}
.service-info .el-form .el-form-item:nth-child(2n) {
  margin-right: 0;
}
.service-info .el-form .el-form-item.wid100 {
  width: 100%;
  margin-right: 0;
}
.service-info .el-form .el-form-item__label {
  height: auto;
  line-height: 1rem;
  color: #333;
  padding-right: 0.3rem;
}
.service-info .el-form .el-form-item.textarea {
    flex-wrap: wrap;
}
.service-info .el-form .el-form-item.textarea .el-form-item__content {
    width: 100%;
    flex: auto;
}
.service-info .el-form .el-input__wrapper,
.service-info .el-form .el-input__wrapper:hover {
  box-shadow: none !important;
  background: none;
}
.service-info .el-form .el-input__inner {
  height: 1rem;
}
.service-info .el-form .el-textarea__inner {
  height: 1.75rem;
  box-shadow: none !important;
}
.service-info .el-form .el-button {
  margin: 0.75rem 0 0;
  width: 3.75rem;
  height: 1rem;
  border-radius: 0.5rem;
}


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