@font-face {
  font-family: 'HarmonyOS Sans';
  src: url('../fonts/harmonyos.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body, html, div, span, a, p, .template, .el-button, .el-input__inner, .el-textarea__inner, .el-select-dropdown__item {
  font-family: 'HarmonyOS Sans', "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
.template {
  height: 100%;
}
.main-card {
  height: 100%;
}
.main-card.mf-cloud {
  display: flex !important;
  align-items: flex-start;
  gap: 24px;
}
.main-card.mf-cloud > .el-tabs {
  flex: 1;
  min-width: 0;
}
.config-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  overflow: visible !important;
}
.goods .el-main {
  overflow: visible !important;
}
.goods-item-name {
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 3px;
  margin-bottom: 30px;
  display: inline-block;
}
.goods-change-box {
  max-width: 100%;
}
.goods-change-box .goods-item-box {
  max-height: 500px;
  overflow-y: auto;
  padding: 0.2rem;
}
.goods-change-box .goods-item-box .goods-group-item {
  margin-bottom: 0.3rem;
}
.goods-change-box .goods-item-box .goods-group-item .goods-group-name {
  font-weight: 700;
  font-size: 0.18rem;
  margin-bottom: 0.15rem;
}
.goods-change-box .goods-item-box .goods-group-item .goods-group-info {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 15px;
  row-gap: 0.1rem;
}
.goods-change-box .goods-item-box .goods-group-item .goods-group-info .option-name {
  cursor: pointer;
  font-size: 0.14rem;
}
.goods-change-box .goods-item-box .goods-group-item .goods-group-info .option-name:hover {
  color: var(--color-primary);
}




.common-config .pro-tit {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
  padding-bottom: 16px;
  border-bottom: 2px solid #e8edf2;
  margin-bottom: 8px;
}


.common-config .common-box .config-tit {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  padding-left: 14px;
  margin-bottom: 20px;
}
.common-config .common-box .config-tit::before {
  width: 4px;
  border-radius: 2px;
  height: 16px;
  margin-top: -8px;
  background: linear-gradient(180deg, #4085ff 0%, #2b6bf3 100%);
}


.common-config .common-box .click-select .item {
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
  font-size: 14px;
  color: #334155;
}
.common-config .common-box .click-select .item:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transform: none;
}
.common-config .common-box .click-select .item.com-active {
  border-color: var(--color-primary);
  background: #f0f5ff;
  color: var(--color-primary);
  font-weight: 500;
  box-shadow: 0 0 0 1px var(--color-primary);
}


.common-config .common-box .com-active::after {
  border-bottom: 18px solid var(--color-primary);
  border-left: 18px solid transparent;
  border-radius: 0 0 4px 0;
}


.common-config .common-box .click-select.area .item {
  border-radius: 4px;
  padding: 0 14px;
  transition: all 0.2s ease;
}
.common-config .common-box .click-select.area .item img {
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.common-config .common-box .area-box .country .item,
.common-config .common-box .area-box .city .item {
  border-radius: 4px;
  transition: all 0.2s ease;
}
.common-config .common-box .area-box .country .item:hover,
.common-config .common-box .area-box .city .item:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transform: none;
}


.common-config .common-box .cycle .item {
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}
.common-config .common-box .cycle .item:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transform: none;
}


.common-config .common-box .el-slider__button {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  background: #fff;
  box-shadow: 0 2px 6px rgba(57, 124, 252, 0.3);
}
.common-config .common-box .el-slider__button::after {
  display: none;
}
.common-config .common-box .el-slider__runway {
  border-radius: 4px;
  height: 6px;
}
.common-config .common-box .el-slider__bar {
  border-radius: 4px;
  height: 6px;
  background: linear-gradient(90deg, #4085ff, #2b6bf3);
}


.common-config .common-box .el-select .el-input__inner {
  border-radius: 4px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.common-config .common-box .el-select .el-input__inner:focus,
.common-config .common-box .el-select .el-input.is-focus .el-input__inner {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.08);
}


.common-config .common-box .el-input__inner {
  border-radius: 4px;
}


.f-order {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.92) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.f-order .el-main {
  background: transparent;
  box-shadow: none;
}
.f-order .right .buy {
  border-radius: 4px;
  background: #165dff !important;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.2s ease;
  box-shadow: none;
  line-height: 40px;
  letter-spacing: 1px;
}
.f-order .right .buy:hover {
  background: #0e50e0 !important;
  box-shadow: 0 2px 8px rgba(22, 93, 255, 0.3);
  transform: none;
}
.f-order .right .add-cart {
  border-radius: 4px;
  border: 1px solid var(--color-primary);
  transition: all 0.2s ease;
  font-size: 14px;
  line-height: 40px;
}
.f-order .right .add-cart:hover {
  background: #f0f5ff;
  box-shadow: none;
  transform: none;
}
.f-order .bot-price {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
}
.f-order .bot-price .new span {
  font-family: 'HarmonyOS Sans', "PingFang SC", sans-serif;
  font-size: 0.26rem;
}
.f-order .main-card {
  display: flex !important;
  align-items: center !important;
}
.f-order .main-card .left {
  display: flex !important;
  align-items: center !important;
}
.f-order .main-card .mid {
  display: flex !important;
  align-items: center !important;
}
.f-order .demand-box {
  display: flex !important;
  align-items: center !important;
}
.f-order .bot-price .old {
  margin-top: 0 !important;
}
.f-order .duration-select .el-input__inner {
  border-radius: 4px;
}
.f-order .l-txt {
  color: #64748b !important;
  font-size: 13px !important;
}
.f-order .link {
  color: #4b5563 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.15s ease !important;
}
.f-order .link:hover {
  color: var(--color-primary) !important;
}
.f-order .bot-price .use {
  background: #f0f5ff !important;
  border: 1px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
  border-radius: 4px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  line-height: 24px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.f-order .bot-price .use:hover {
  background: var(--color-primary) !important;
  color: #ffffff !important;
}


.cartDialog {
  border-radius: 16px;
  overflow: hidden;
}
.cartDialog .dialog-footer .el-button {
  border-radius: 8px;
}


.goods-item-name {
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  transition: all 0.25s ease;
  border: 1.5px solid var(--color-primary);
}
.goods-item-name:hover {
  background: rgba(57, 124, 252, 0.06);
  box-shadow: 0 2px 8px rgba(57, 124, 252, 0.15);
}
.goods-item-name.is-open .el-icon-arrow-down {
  transform: rotate(180deg);
}


.common-config .order-right {
  border-radius: 8px !important;
  box-shadow: none !important;
  border: 1px solid #e5e7eb !important;
  padding: 0 !important;
  position: sticky !important;
  top: 20px !important;
  right: auto !important;
  overflow: visible !important;
}
.common-config .order-right .right-main {
  padding: 20px !important;
}
.common-config .order-right .right-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #f0f0f3 !important;
  margin-bottom: 12px !important;
}
.common-config .order-right .info {
  border-bottom: 1px solid #f0f0f3 !important;
  padding: 0 0 12px !important;
}
.common-config .order-right .info .des {
  font-size: 12.5px !important;
  margin-bottom: 8px !important;
}
.common-config .order-right .info .name {
  color: #9ca3af !important;
}
.common-config .order-right .info .price {
  color: #374151 !important;
  font-weight: 500 !important;
}
.common-config .order-right .subtotal {
  padding: 12px 0 !important;
  border-bottom: 1px solid #f0f0f3 !important;
  font-size: 13px !important;
}
.common-config .order-right .subtotal .name {
  color: #6b7280 !important;
}
.common-config .order-right .f-box {
  padding: 16px 20px !important;
  border-top: 1px solid #f0f0f3 !important;
}
.common-config .order-right .footer-total {
  font-size: 13px !important;
}
.common-config .order-right .footer-total .left {
  color: #6b7280 !important;
}
.common-config .order-right .footer-total .right {
  color: #f53f3f !important;
  font-weight: 600 !important;
}
.common-config .f-btn .buy-btn {
  border-radius: 6px !important;
}
.common-config .f-btn .cart {
  border-radius: 6px !important;
}


@media screen and (max-width: 750px) {
  .common-config .pro-tit {
    font-size: 20px;
    padding: 0 14px 12px;
  }
  .common-config .common-box .config-tit {
    font-size: 15px;
  }
  .common-config .common-box .click-select .item {
    width: calc(50% - 10px) !important;
    margin-right: 10px;
    font-size: 13px;
    padding: 8px;
    box-sizing: border-box;
  }
  .common-config .common-box .el-select input {
    width: 100%;
  }
  .common-config .common-box .config-item .slider .el-slider {
    width: 100%;
    margin: 0 12px;
  }
  .common-config .common-box .config-item .slider {
    flex-wrap: wrap;
  }
  .f-order {
    flex-direction: column;
    height: auto;
    padding: 12px 14px;
  }
  .f-order .l-empty {
    display: none;
  }
  .f-order .main-card {
    flex-direction: column;
    gap: 12px;
    align-items: stretch !important;
  }
  .f-order .main-card .left {
    flex-wrap: wrap;
    gap: 10px;
  }
  .f-order .main-card .mid {
    flex-wrap: wrap;
    gap: 8px;
  }
  .f-order .right .buy {
    flex: 1;
    margin-left: 8px;
  }
  .goods-item-name {
    font-size: 13px;
    padding: 6px 12px;
    margin-bottom: 16px;
  }
}


.goods-change-box {
  border-radius: 12px !important;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #e2e8f0 !important;
  padding: 0 !important;
}

.goods-change-box .goods-item-box {
  padding: 24px;
}


.goods-change-box .goods-item-box .el-input {
  width: 100% !important;
  margin-bottom: 24px !important;
}
.goods-change-box .goods-item-box .el-input__inner {
  border-radius: 8px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  transition: all 0.25s ease;
  height: 40px;
  line-height: 40px;
}
.goods-change-box .goods-item-box .el-input__inner:focus {
  background-color: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(57, 124, 252, 0.1);
}


.goods-change-box .goods-item-box .goods-group-item .goods-group-name {
  font-weight: 600;
  font-size: 15px;
  color: #1e293b;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #e2e8f0;
}


.goods-change-box .goods-item-box .goods-group-item .goods-group-info {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}

.goods-change-box .goods-item-box .goods-group-item .goods-group-info .option-name {
  cursor: pointer;
  font-size: 13px;
  color: #475569;
  background: #f8fafc;
  padding: 10px 12px;
  border-radius: 6px;
  text-align: center;
  transition: all 0.25s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid transparent;
}

.goods-change-box .goods-item-box .goods-group-item .goods-group-info .option-name:hover {
  color: var(--color-primary);
  background: rgba(57, 124, 252, 0.05);
  border-color: rgba(57, 124, 252, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(57, 124, 252, 0.1);
}




.mf-cloud .com-tit {
  display: flex !important;
  align-items: center !important;
  font-size: 15px !important;
  font-weight: 500 !important; 
  color: #1e293b !important; 
  padding: 0 0 0 10px !important; 
  background: transparent !important; 
  position: relative !important;
  margin-bottom: 24px !important;
  line-height: 1 !important;
}

.mf-cloud .com-tit::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3px !important; 
  height: 14px !important;
  background: #165dff !important; 
  border-radius: 1px !important;
}



.mf-cloud .cloud-box {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important; 
}

.mf-cloud .cloud-box .cloud-item {
  width: 380px !important; 
  max-width: 100% !important; 
  border-radius: 4px !important; 
  border: 1px solid #e2e8f0 !important;
  background-color: #ffffff !important;
  transition: all 0.2s ease !important;
  overflow: hidden !important;
  height: auto !important; 
  display: flex !important;
  flex-direction: column !important; 
}

.mf-cloud .cloud-box .cloud-item:hover {
  border-color: var(--color-primary) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  transform: none !important; 
}
.mf-cloud .cloud-box .cloud-item.active {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 1px var(--color-primary) !important; 
}


.mf-cloud .cloud-box .cloud-item .top {
  background-color: #f8fafc !important;
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='60' viewBox='0 0 200 60' xmlns='http://www.w3.org/2000/svg' overflow='hidden'%3E%3Ccircle cx='150' cy='60' r='40' stroke='%23165dff' stroke-width='12' fill='none' opacity='0.03' /%3E%3Ccircle cx='190' cy='10' r='45' stroke='%23165dff' stroke-width='16' fill='none' opacity='0.04' /%3E%3Ccircle cx='220' cy='50' r='30' fill='%23165dff' opacity='0.03' /%3E%3Ccircle cx='110' cy='20' r='6' fill='%23165dff' opacity='0.05' /%3E%3C/svg%3E") !important;
  background-position: right 0px center !important;
  background-repeat: no-repeat !important;
  background-size: 200px 60px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
  font-weight: 500 !important; 
  padding: 0 20px !important;
  border-radius: 4px 4px 0 0 !important;
  transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease !important;
  flex-shrink: 0 !important; 
}


.mf-cloud .cloud-box .cloud-item:hover .top {
  background-position: right 15px center !important;
}


.mf-cloud .cloud-box .cloud-item.active .top {
  background-color: #f0f5ff !important;
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='60' viewBox='0 0 200 60' xmlns='http://www.w3.org/2000/svg' overflow='hidden'%3E%3Ccircle cx='150' cy='60' r='40' stroke='%23165dff' stroke-width='12' fill='none' opacity='0.06' /%3E%3Ccircle cx='190' cy='10' r='45' stroke='%23165dff' stroke-width='16' fill='none' opacity='0.08' /%3E%3Ccircle cx='220' cy='50' r='30' fill='%23165dff' opacity='0.06' /%3E%3Ccircle cx='110' cy='20' r='6' fill='%23165dff' opacity='0.1' /%3E%3C/svg%3E") !important;
  color: var(--color-primary) !important;
  border-bottom: 1px solid rgba(22, 93, 255, 0.15) !important;
}


.mf-cloud .cloud-box .info {
  padding: 12px 16px !important;
  flex-grow: 1 !important; 
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important; 
  column-gap: 8px !important; 
  align-content: start !important;
}
.mf-cloud .cloud-box .info p {
  line-height: 28px !important;
  font-size: 13px !important;
  width: 100% !important; 
  margin: 0 !important;
  display: flex !important;
  align-items: flex-start !important; 
}
.mf-cloud .cloud-box .info .name {
  color: #64748b !important; 
  width: 78px !important; 
  flex-shrink: 0 !important;
}
.mf-cloud .cloud-box .info span:not(.name) {
  color: #1e293b !important; 
  font-weight: 500 !important;
}


.mf-cloud .image-item {
  width: 220px !important;
  border-radius: 4px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  transition: all 0.2s ease !important;
  height: auto !important;
  min-height: 72px !important;
}
.mf-cloud .image-item:hover {
  border-color: var(--color-primary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  transform: none !important;
  background: #fafbfc !important;
}
.mf-cloud .image-item.active,
.mf-cloud .image-item.hover {
  border: 1px solid var(--color-primary) !important;
  background: #f0f5ff !important;
  box-shadow: 0 0 0 1px var(--color-primary) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.mf-cloud .image-item .icon {
  transition: opacity 0.2s ease, filter 0.2s ease !important;
  transform: none !important;
}
.mf-cloud .image-item:hover .icon {
  transform: none !important;
  opacity: 0.7 !important;
  -webkit-filter: grayscale(0.3) !important;
}
.mf-cloud .image-item.active .icon,
.mf-cloud .image-item.hover .icon {
  opacity: 1 !important;
  -webkit-filter: grayscale(0) !important;
}
.mf-cloud .image-item .name {
  font-weight: 500 !important;
  color: #1e293b !important;
}
.mf-cloud .image-item .version {
  color: #94a3b8 !important;
  font-size: 12px !important;
}
.mf-cloud .image-item .version-select {
  border-radius: 0 0 4px 4px !important;
  border: 1px solid var(--color-primary) !important;
  border-top: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
.mf-cloud .image-item .version-select .v-item:hover,
.mf-cloud .image-item .version-select .v-item.active {
  background: #f0f5ff !important;
  color: var(--color-primary) !important;
}


.mf-cloud .image-tabs .el-tabs__item {
  font-weight: 500 !important;
  color: #64748b !important;
  font-size: 14px !important;
}
.mf-cloud .image-tabs .el-tabs__item.is-active {
  color: var(--color-primary) !important;
  font-weight: 500 !important;
}


.mf-cloud .s-tip {
  display: block !important;
  width: fit-content !important; 
  background-color: #f2f7ff !important; 
  color: #165dff !important; 
  padding: 10px 18px !important; 
  border-radius: 2px !important; 
  border: none !important;
  border-left: 2px solid #165dff !important; 
  border-right: 2px solid #165dff !important; 
  font-size: 13px !important;
  line-height: 1.6 !important;
  margin-top: 14px !important;
  box-shadow: none !important;
}


.mf-cloud .s-tip::before {
  display: none !important;
}


.mf-cloud .s-tip span {
  color: #ff7d00 !important; 
  font-weight: 500 !important;
  margin: 0 2px !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  white-space: normal !important;
  word-break: break-all !important;
}


.mf-cloud .el-form .el-radio-button__inner {
  border-radius: 6px !important; 
  border: 1px solid #e2e8f0 !important; 
  box-shadow: none !important; 
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin-right: 12px !important; 
  background: #f8fafc !important;
}
.mf-cloud .el-form .el-radio-button:last-child .el-radio-button__inner {
  margin-right: 0 !important;
}
.mf-cloud .el-form .el-radio-button__inner:hover {
  color: var(--color-primary) !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}
.mf-cloud .el-form .el-radio-button.is-active .el-radio-button__inner {
  background: var(--color-primary) !important; 
  border-color: var(--color-primary) !important;
  color: #ffffff !important; 
  font-weight: normal !important; 
  transform: none !important;
  box-shadow: 0 2px 8px rgba(22, 93, 255, 0.25) !important;
}




.mf-cloud .el-form .el-form-item__label {
  color: #1e293b !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}


.mf-cloud .el-tabs__active-bar {
  background-color: var(--color-primary) !important;
  height: 2px !important;
  border-radius: 1px !important;
}
.mf-cloud .el-tabs__nav-wrap::after {
  height: 1px !important;
  background-color: #e2e8f0 !important;
}
.mf-cloud .el-tabs .el-tabs__item {
  color: #64748b !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  transition: color 0.2s ease !important;
}
.mf-cloud .el-tabs .el-tabs__item.is-active {
  color: var(--color-primary) !important;
}
.mf-cloud .el-tabs .el-tabs__item:hover {
  color: var(--color-primary) !important;
}


.mf-cloud .el-checkbox__inner {
  border-radius: 3px !important;
  border-color: #cbd5e1 !important;
  transition: all 0.2s ease !important;
}
.mf-cloud .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
.mf-cloud .el-checkbox__label {
  color: #334155 !important;
  font-size: 14px !important;
}


.mf-cloud .el-input__inner:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.08) !important;
}


.mf-cloud .el-input-number__decrease,
.mf-cloud .el-input-number__increase {
  border-color: #e2e8f0 !important;
  transition: all 0.15s ease !important;
}
.mf-cloud .el-input-number__decrease:hover,
.mf-cloud .el-input-number__increase:hover {
  color: var(--color-primary) !important;
}


.mf-cloud .el-slider__bar {
  background-color: var(--color-primary) !important;
}
.mf-cloud .el-slider__button {
  border-color: var(--color-primary) !important;
}


.template {
  scroll-behavior: smooth;
}


.el-popover {
  border-radius: 4px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #e2e8f0 !important;
}



.mf-dcim .com-tit {
  display: flex !important;
  align-items: center !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  padding: 0 0 0 10px !important;
  background: transparent !important;
  position: relative !important;
  margin-bottom: 24px !important;
  line-height: 1 !important;
}
.mf-dcim .com-tit::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3px !important;
  height: 14px !important;
  background: #165dff !important;
  border-radius: 1px !important;
}
.mf-dcim .s-tip {
  display: block !important;
  width: fit-content !important;
  background-color: #f2f7ff !important;
  color: #165dff !important;
  padding: 10px 18px !important;
  border-radius: 2px !important;
  border: none !important;
  border-left: 2px solid #165dff !important;
  border-right: 2px solid #165dff !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  margin-top: 14px !important;
  box-shadow: none !important;
}
.mf-dcim .s-tip::before {
  display: none !important;
}
.mf-dcim .s-tip span {
  color: #ff7d00 !important;
  font-weight: 500 !important;
  margin: 0 2px !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.mf-dcim .el-form .el-radio-button__inner {
  border-radius: 6px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin-right: 12px !important;
  background: #f8fafc !important;
}
.mf-dcim .el-form .el-radio-button:last-child .el-radio-button__inner {
  margin-right: 0 !important;
}
.mf-dcim .el-form .el-radio-button__inner:hover {
  color: var(--color-primary) !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}
.mf-dcim .el-form .el-radio-button.is-active .el-radio-button__inner {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
  font-weight: normal !important;
  transform: none !important;
  box-shadow: 0 2px 8px rgba(22, 93, 255, 0.25) !important;
}
.mf-dcim .el-form .el-form-item__label {
  color: #1e293b !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}
.mf-dcim .el-tabs__active-bar {
  background-color: var(--color-primary) !important;
  height: 2px !important;
  border-radius: 1px !important;
}
.mf-dcim .el-tabs__nav-wrap::after {
  height: 1px !important;
  background-color: #e2e8f0 !important;
}
.mf-dcim .el-tabs .el-tabs__item {
  color: #64748b !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  transition: color 0.2s ease !important;
}
.mf-dcim .el-tabs .el-tabs__item.is-active {
  color: var(--color-primary) !important;
}
.mf-dcim .el-tabs .el-tabs__item:hover {
  color: var(--color-primary) !important;
}
.mf-dcim .el-checkbox__inner {
  border-radius: 3px !important;
  border-color: #cbd5e1 !important;
  transition: all 0.2s ease !important;
}
.mf-dcim .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
.mf-dcim .el-checkbox__label {
  color: #334155 !important;
  font-size: 14px !important;
}
.mf-dcim .el-input__inner:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.08) !important;
}
.mf-dcim .el-input-number__decrease,
.mf-dcim .el-input-number__increase {
  border-color: #e2e8f0 !important;
  transition: all 0.15s ease !important;
}
.mf-dcim .el-input-number__decrease:hover,
.mf-dcim .el-input-number__increase:hover {
  color: var(--color-primary) !important;
}
.mf-dcim .el-slider__bar {
  background-color: var(--color-primary) !important;
}
.mf-dcim .el-slider__button {
  border-color: var(--color-primary) !important;
}
.mf-dcim .image-item {
  width: 220px !important;
  border-radius: 4px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  transition: all 0.2s ease !important;
  height: auto !important;
  min-height: 72px !important;
}
.mf-dcim .image-item:hover {
  border-color: var(--color-primary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  transform: none !important;
  background: #fafbfc !important;
}
.mf-dcim .image-item.active,
.mf-dcim .image-item.hover {
  border: 1px solid var(--color-primary) !important;
  background: #f0f5ff !important;
  box-shadow: 0 0 0 1px var(--color-primary) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.mf-dcim .image-item .icon {
  transition: opacity 0.2s ease, filter 0.2s ease !important;
  transform: none !important;
}
.mf-dcim .image-item:hover .icon {
  transform: none !important;
  opacity: 0.7 !important;
}
.mf-dcim .image-item.active .icon,
.mf-dcim .image-item.hover .icon {
  opacity: 1 !important;
}
.mf-dcim .image-item .name {
  font-weight: 500 !important;
  color: #1e293b !important;
}
.mf-dcim .image-item .version {
  color: #94a3b8 !important;
  font-size: 12px !important;
}
.mf-dcim .image-item .version-select {
  border-radius: 0 0 4px 4px !important;
  border: 1px solid var(--color-primary) !important;
  border-top: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
.mf-dcim .image-item .version-select .v-item:hover,
.mf-dcim .image-item .version-select .v-item.active {
  background: #f0f5ff !important;
  color: var(--color-primary) !important;
}
.mf-dcim .el-table th {
  background: #f8fafc !important;
  color: #64748b !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}
.mf-dcim .el-table td {
  font-size: 13px !important;
  color: #1e293b !important;
}
.mf-dcim .el-table--enable-row-hover .el-table__body tr:hover > td {
  background: #f0f5ff !important;
}




@media screen and (max-width: 768px) {
  * {
    box-sizing: border-box !important;
  }
  
  
  .el-aside, aside-menu, .el-menu--horizontal, .pc {
    display: none !important;
  }
  
  
  body, html, #app, .goods, .goods > .el-container, .goods > .el-container > .el-container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .goods .el-main {
    padding: 5vw !important;
    background-color: #fff !important;
  }
  
  .Heiguo-box .main-card {
    flex-direction: column !important;
    gap: 3vw !important;
    padding-bottom: 0 !important;
  }

  
  .Heiguo-box .el-form-item__content {
    margin-left: 0 !important;
  }
  
  .Heiguo-box .main-card .el-form .el-form-item {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 4vw !important;
    padding: 0 !important;
  }

  .Heiguo-box .el-form-item__label {
    font-size: 4vw !important;
    width: auto !important;
    text-align: left !important;
    padding: 0 0 2vw 0 !important;
  }

  
  .Heiguo-box .common-config .common-box {
    flex-direction: column !important;
  }
  
  .Heiguo-box .common-config .config-tit {
    padding-left: 3vw !important;
    font-size: 4vw !important;
    margin-bottom: 3vw !important;
  }
  
  .Heiguo-box .common-config .l-config {
    margin-right: 0 !important;
    width: 100% !important;
  }
  
  .Heiguo-box .common-config .order-right {
    width: 100% !important;
    margin-top: 4vw !important;
  }

  
  
  .Heiguo-box .main-card .el-form .el-radio-button__inner {
    min-width: 21vw !important;
    height: 8vw !important;
    line-height: 8vw !important;
    padding: 0 3vw !important;
    font-size: 3.5vw !important;
    border-radius: 4px !important;
  }
  
  .Heiguo-box .common-config .common-box .click-select {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2vw !important;
    margin: 0 !important;
  }
  
  .Heiguo-box .common-config .common-box .click-select .item {
    font-size: 3.5vw !important;
    height: 9vw !important;
    line-height: 9vw !important;
    padding: 0 3vw !important;
    margin: 0 !important;
    width: auto !important;
    border-radius: 4px !important;
  }
  
  .Heiguo-box .el-radio-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
  }

  
  .Heiguo-box .template .cloud-box,
  .Heiguo-box .mf-cloud .cloud-box {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 3vw !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
  }
  
  .Heiguo-box .template .cloud-box .cloud-item,
  .Heiguo-box .mf-cloud .cloud-box .cloud-item {
    margin: 0 !important;
    padding: 3vw !important;
  }
  .Heiguo-box .template .cloud-box .cloud-item .top {
    font-size: 4vw !important;
    line-height: 9vw !important;
    padding: 0 3vw !important;
  }
  .Heiguo-box .template .cloud-box .info {
    padding: 2vw 3vw 0 !important;
    gap: 2vw 0 !important;
  }

  
  .Heiguo-box .image-ul .image-item {
    width: 100% !important;
    height: 15vw !important;
    padding: 3vw !important;
    margin: 0 0 3vw 0 !important;
  }
  .Heiguo-box .image-ul .image-item .icon {
    width: 5vw !important;
    height: 5vw !important;
  }
  .Heiguo-box .image-ul .image-item .name {
    font-size: 3.5vw !important;
  }
  .Heiguo-box .image-ul .image-item .version {
    font-size: 3vw !important;
    margin-top: 1vw !important;
  }
  
  
  .Heiguo-box .main-card .s-tip,
  .Heiguo-box .tip,
  .Heiguo-box .safe-tip {
    padding: 2vw !important;
    font-size: 3vw !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 2vw 0 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-all !important;
    display: block !important;
  }

  
  .Heiguo-box .el-select input {
    height: 9vw !important;
    width: 100% !important;
  }

  .Heiguo-box tbody .el-table__row, 
  .Heiguo-box thead tr {
    height: 10vw !important;
  }
  
  .Heiguo-box .el-table .cell {
    padding: 0 2vw !important;
    white-space: normal !important;
    word-break: break-all !important;
  }

  .Heiguo-box .el-input-number .el-input__inner {
    padding-left: 10vw !important;
    padding-right: 10vw !important;
    height: 9vw !important;
    line-height: 9vw !important;
  }
  
  .Heiguo-box .el-input-number__decrease,
  .Heiguo-box .el-input-number__increase {
    width: 8vw !important;
    height: 9vw !important;
  }
  
  .Heiguo-box .f-order .el-input-number__decrease,
  .Heiguo-box .f-order .el-input-number__increase {
    height: 10vw !important;
    width: 9vw !important;
  }

  
  .Heiguo-box .f-order {
    position: initial !important;
    width: 100% !important;
    height: auto !important;
    box-shadow: none !important;
    padding: 5vw !important;
    background: #fff !important;
    border-top: 1px solid #f1f2f5;
  }
  .Heiguo-box .f-order .el-main {
    padding: 0 !important;
  }
  .Heiguo-box .f-order .main-card {
    flex-direction: column !important;
    row-gap: 5vw !important;
  }
  .Heiguo-box .f-order .main-card .left {
    justify-content: space-between !important;
    width: 100% !important;
  }
  .Heiguo-box .f-order .mid, 
  .Heiguo-box .f-order .right {
    justify-content: space-between !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }
  .Heiguo-box .f-order .bot-price .new .price {
    font-size: 6vw !important;
  }
  .Heiguo-box .f-order .right .buy {
    border-radius: 4px !important;
    box-sizing: border-box !important;
  }

  
  .Heiguo-box .template .cloud-box,
  .Heiguo-box .mf-cloud .cloud-box {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 3vw !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 92vw !important;
    box-sizing: border-box !important;
  }
  .Heiguo-box .template .cloud-box .cloud-item,
  .Heiguo-box .mf-cloud .cloud-box .cloud-item {
    width: auto !important;
    max-width: 92vw !important;
    margin: 0 !important;
    padding: 3vw !important;
    box-sizing: border-box !important;
  }

  
  .Heiguo-box .mf-cloud .s-tip, 
  .Heiguo-box .mf-dcim .s-tip,
  .Heiguo-box .common-config .s-tip, 
  .Heiguo-box .main-card .s-tip,
  .Heiguo-box .tip,
  .Heiguo-box .safe-tip {
    padding: 3vw !important;
    font-size: 3vw !important;
    line-height: 1.6 !important;
    width: auto !important;
    max-width: 92vw !important;
    margin: 2vw 0 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-all !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  
  .Heiguo-box .mf-dcim .image-box .version-list {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 3vw !important;
    width: auto !important;
    max-width: 92vw !important;
  }
  .Heiguo-box .mf-dcim .image-item {
    width: auto !important;
    max-width: 92vw !important;
    margin: 0 !important;
    padding: 3vw !important;
    box-sizing: border-box !important;
  }

  
  .Heiguo-box .mf-dcim .disk-list .disk-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3vw !important;
    width: auto !important;
    max-width: 92vw !important;
    box-sizing: border-box !important;
    padding: 3vw !important;
  }
  .Heiguo-box .mf-dcim .disk-list .disk-item .el-slider {
    width: 100% !important;
    margin-left: 0 !important;
  }
  .Heiguo-box .mf-dcim .disk-list .disk-item .el-input-number {
    width: 35vw !important;
    min-width: 35vw !important;
  }
}

@media screen and (max-width: 768px) {
  .Heiguo-box,
  .Heiguo-box .content,
  .Heiguo-box .mf-cloud,
  .Heiguo-box .top-tab,
  .Heiguo-box .top-tab > .el-tabs__header,
  .Heiguo-box .top-tab > .el-tabs__content,
  .Heiguo-box .el-tabs__content,
  .Heiguo-box .el-tab-pane,
  .Heiguo-box .con,
  .Heiguo-box .el-form,
  .Heiguo-box .el-form-item,
  .Heiguo-box .el-form-item__content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .config-box.Heiguo-box {
    display: block !important;
    margin: 0 !important;
    padding: 5vw 4vw !important;
    overflow-x: hidden !important;
  }

  .Heiguo-box .template,
  .Heiguo-box .main-card.mf-cloud {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .Heiguo-box .mf-cloud,
  .Heiguo-box .top-tab,
  .Heiguo-box .el-tabs__content,
  .Heiguo-box .el-tab-pane,
  .Heiguo-box .con {
    display: block !important;
    overflow-x: hidden !important;
  }

  .Heiguo-box .el-form {
    padding: 0 !important;
  }

  .Heiguo-box .main-card .s-tip,
  .Heiguo-box .mf-cloud .s-tip,
  .Heiguo-box .common-config .s-tip {
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 10px 12px !important;
    border-right: none !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  .Heiguo-box .main-card .s-tip span,
  .Heiguo-box .mf-cloud .s-tip span,
  .Heiguo-box .common-config .s-tip span {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  .Heiguo-box .image-box,
  .Heiguo-box .image-ul,
  .Heiguo-box .image-tabs,
  .Heiguo-box .image-tabs .el-tabs__header,
  .Heiguo-box .image-tabs .el-tabs__nav-wrap,
  .Heiguo-box .image-tabs .el-tabs__nav-scroll {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .Heiguo-box .image-ul {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  .Heiguo-box .image-ul .image-item,
  .Heiguo-box .mf-cloud .image-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 6px !important;
  }

  .Heiguo-box .image-ul .image-item.active,
  .Heiguo-box .image-ul .image-item.hover,
  .Heiguo-box .mf-cloud .image-item.active,
  .Heiguo-box .mf-cloud .image-item.hover {
    border-radius: 6px !important;
  }

  .Heiguo-box .image-ul .image-item .r-info {
    min-width: 0 !important;
    flex: 1 !important;
  }

  .Heiguo-box .image-ul .image-item .name,
  .Heiguo-box .image-ul .image-item .version {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .Heiguo-box .image-ul .image-item .version-select {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .Heiguo-box .store-item .el-table {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .Heiguo-box .store-item .el-table__header-wrapper,
  .Heiguo-box .store-item .el-table__body-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  .Heiguo-box .store-item .el-table .cell {
    padding: 0 8px !important;
    white-space: nowrap !important;
    word-break: normal !important;
  }

  .Heiguo-box .store-item .el-select,
  .Heiguo-box .store-item .el-input,
  .Heiguo-box .store-item .el-input-number {
    max-width: 100% !important;
  }

  .Heiguo-box .store {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    line-height: 1.5 !important;
    height: auto !important;
  }
}

@media screen and (max-width: 768px) {
  .Heiguo-box .store-item .el-table__header,
  .Heiguo-box .store-item .el-table__body {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
  }

  .Heiguo-box .store-item col[name="el-table_1_column_1"] {
    width: 30% !important;
  }

  .Heiguo-box .store-item col[name="el-table_1_column_2"] {
    width: 33% !important;
  }

  .Heiguo-box .store-item col[name="el-table_1_column_3"] {
    width: 37% !important;
  }

  .Heiguo-box .store-item col[name="el-table_1_column_4"],
  .Heiguo-box .store-item th:nth-child(4),
  .Heiguo-box .store-item td:nth-child(4) {
    display: none !important;
    width: 0 !important;
  }

  .Heiguo-box .store-item th,
  .Heiguo-box .store-item td {
    padding: 0 !important;
  }

  .Heiguo-box .store-item .el-table .cell {
    padding: 0 6px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .Heiguo-box .store-item .el-table th .cell {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .Heiguo-box .store-item td:first-child .cell {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .Heiguo-box .store-item .el-select,
  .Heiguo-box .store-item .dis-input,
  .Heiguo-box .store-item td:nth-child(2) .el-input {
    width: 100% !important;
  }

  .Heiguo-box .store-item .el-select .el-input__inner,
  .Heiguo-box .store-item .dis-input .el-input__inner {
    height: 34px !important;
    line-height: 34px !important;
    padding: 0 22px 0 8px !important;
    font-size: 12px !important;
  }

  .Heiguo-box .store-item .el-input-number {
    width: 66px !important;
    min-width: 66px !important;
    line-height: 34px !important;
  }

  .Heiguo-box .store-item .el-input-number .el-input__inner {
    height: 34px !important;
    line-height: 34px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    font-size: 13px !important;
  }

  .Heiguo-box .store-item .el-input-number__decrease,
  .Heiguo-box .store-item .el-input-number__increase {
    width: 22px !important;
    height: 34px !important;
    line-height: 34px !important;
  }
}

@media screen and (max-width: 768px) {
  .Heiguo-box .el-popover__reference-wrapper {
    display: block !important;
    width: 100% !important;
  }

  .Heiguo-box .goods-item-name {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 11vw !important;
    margin: 0 0 5vw !important;
    padding: 0 4vw !important;
    background: #f2f5fa !important;
    border: 1px solid #e5ebf3 !important;
    border-radius: 6px !important;
    color: #111827 !important;
    font-size: 3.6vw !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  .Heiguo-box .goods-item-name .el-icon-arrow-down {
    color: var(--color-primary) !important;
    font-size: 4vw !important;
    margin-left: 2vw !important;
    transition: transform 0.2s ease !important;
  }

  .goods-mobile-switch {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .goods-mobile-switch .goods-item-name.is-open {
    margin-bottom: 2vw !important;
  }

  .goods-mobile-switch .goods-change-box {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 5vw !important;
    transform-origin: top center !important;
  }

  .goods-change-box {
    width: 92vw !important;
    max-width: 92vw !important;
    max-height: 72vh !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .goods-change-box .goods-item-box {
    max-height: 66vh !important;
    padding: 4vw !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  .goods-change-box .goods-item-box .goods-group-item {
    margin-bottom: 5vw !important;
  }

  .goods-change-box .goods-item-box .goods-group-item .goods-group-name {
    font-size: 4vw !important;
    margin-bottom: 3vw !important;
  }

  .goods-change-box .goods-item-box .goods-group-item .goods-group-info {
    display: flex !important;
    gap: 2.5vw !important;
    overflow-x: auto !important;
    padding-bottom: 1vw !important;
  }

  .goods-change-box .goods-item-box .goods-group-item .goods-group-info .option-name {
    flex: 0 0 auto !important;
    max-width: 58vw !important;
    padding: 2.4vw 3.2vw !important;
    font-size: 3.4vw !important;
    border-radius: 5px !important;
  }

  .Heiguo-box .common-config .common-box .config-item .slider {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .Heiguo-box .el-slider.el-slider--with-input {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 38px !important;
    padding-right: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .Heiguo-box .el-slider.el-slider--with-input .el-slider__runway {
    order: 1 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 80px !important;
    margin: 0 !important;
  }

  .Heiguo-box .el-slider.el-slider--with-input .el-slider__input {
    order: 2 !important;
    float: none !important;
    flex: 0 0 30vw !important;
    width: 30vw !important;
    max-width: 30vw !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
  }

  .Heiguo-box .el-slider.el-slider--with-input .el-input,
  .Heiguo-box .el-slider.el-slider--with-input .el-input__inner {
    height: 38px !important;
    line-height: 38px !important;
  }

  .Heiguo-box .el-slider.el-slider--with-input .el-input-number__decrease,
  .Heiguo-box .el-slider.el-slider--with-input .el-input-number__increase {
    width: 8vw !important;
    height: 38px !important;
    line-height: 38px !important;
  }

  .Heiguo-box .el-slider.el-slider--with-input .el-input__inner {
    padding-left: 8vw !important;
    padding-right: 8vw !important;
  }

  .Heiguo-box .mf-cloud .marks,
  .Heiguo-box .marks {
    margin-top: 8px !important;
    font-size: 12px !important;
    line-height: 16px !important;
    min-height: 16px !important;
  }

  .Heiguo-box .mf-cloud .marks .item,
  .Heiguo-box .marks .item {
    height: 16px !important;
    font-size: 12px !important;
    line-height: 16px !important;
    color: #64748b !important;
  }

  .Heiguo-box .store {
    justify-content: flex-start !important;
    gap: 1.5vw 2vw !important;
    height: auto !important;
    margin-top: 2vw !important;
    font-size: 3vw !important;
    color: #667085 !important;
  }

  .Heiguo-box .store .add-disk,
  .Heiguo-box .store .txt {
    font-size: 3vw !important;
    line-height: 1.5 !important;
  }

  .Heiguo-box .store .add-disk {
    color: var(--color-primary) !important;
  }

  .Heiguo-box .store .num {
    font-weight: 700 !important;
  }

  .Heiguo-box .f-order .main-card .left,
  .Heiguo-box .f-order .mid,
  .Heiguo-box .f-order .right {
    gap: 3vw !important;
  }

  .Heiguo-box .f-order .duration-select {
    flex: 1 1 auto !important;
    min-width: 24vw !important;
  }

  .Heiguo-box .f-order .num {
    flex: 0 0 auto !important;
  }

  .Heiguo-box .f-order .right .add-cart {
    flex: 0 0 10vw !important;
    width: 10vw !important;
    height: 10vw !important;
  }

  .Heiguo-box .f-order .right .buy {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 10vw !important;
    line-height: 10vw !important;
    margin-left: 0 !important;
    font-size: 3.4vw !important;
  }
}

@media screen and (max-width: 768px) {
  .Heiguo-box .template > .tit {
    margin: 0 0 2.5vw !important;
    font-size: 4.2vw !important;
    line-height: 1.35 !important;
  }

  .Heiguo-box .main-card {
    padding-top: 2vw !important;
    gap: 0 !important;
  }

  .Heiguo-box .top-tab > .el-tabs__header {
    height: auto !important;
    margin: 0 0 2.5vw !important;
  }

  .Heiguo-box .top-tab .el-tabs__nav-scroll {
    padding: 0 !important;
  }

  .Heiguo-box .top-tab .el-tabs__item,
  .Heiguo-box .image-tabs .el-tabs__item {
    margin: 0 !important;
    height: 9vw !important;
    line-height: 9vw !important;
    padding: 0 4vw !important;
    font-size: 3.5vw !important;
  }

  .Heiguo-box .top-tab > .el-tabs__content {
    padding-bottom: 0 !important;
  }

  .Heiguo-box .con {
    padding: 0 !important;
  }

  .Heiguo-box .main-card,
  .Heiguo-box .top-tab,
  .Heiguo-box .top-tab > .el-tabs__content,
  .Heiguo-box .el-tab-pane,
  .Heiguo-box .con {
    overflow: visible !important;
    scrollbar-width: none !important;
  }

  .Heiguo-box .main-card::-webkit-scrollbar,
  .Heiguo-box .top-tab::-webkit-scrollbar,
  .Heiguo-box .top-tab > .el-tabs__content::-webkit-scrollbar,
  .Heiguo-box .el-tab-pane::-webkit-scrollbar,
  .Heiguo-box .con::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
  }

  .Heiguo-box .com-tit,
  .Heiguo-box .mf-cloud .com-tit,
  .Heiguo-box .mf-dcim .com-tit,
  .Heiguo-box .common-config .config-tit {
    margin-bottom: 3vw !important;
  }

  .Heiguo-box .main-card .el-form .el-form-item {
    margin-bottom: 5vw !important;
  }

  .Heiguo-box .el-form-item__label,
  .Heiguo-box .mf-cloud .el-form .el-form-item__label,
  .Heiguo-box .mf-dcim .el-form .el-form-item__label {
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.35 !important;
    padding-bottom: 2vw !important;
  }

  .Heiguo-box .el-radio-group {
    gap: 2.6vw 3vw !important;
    align-items: flex-start !important;
  }

  .Heiguo-box .el-radio-button {
    margin: 0 !important;
  }

  .Heiguo-box .common-config .common-box .click-select {
    gap: 2.6vw 3vw !important;
  }

  .Heiguo-box .main-card .el-form .el-radio-button__inner {
    min-width: 21vw !important;
    padding: 0 3.5vw !important;
  }

  .Heiguo-box .store-item .el-table {
    width: 100% !important;
    max-width: 100% !important;
  }

  .Heiguo-box .store-item col[name="el-table_1_column_1"] {
    width: 25% !important;
  }

  .Heiguo-box .store-item col[name="el-table_1_column_2"] {
    width: 38% !important;
  }

  .Heiguo-box .store-item col[name="el-table_1_column_3"] {
    width: 37% !important;
  }

  .Heiguo-box .store-item .el-table .cell {
    padding: 0 5px !important;
    font-size: 12px !important;
  }

  .Heiguo-box .store-item .el-select .el-input__inner,
  .Heiguo-box .store-item .dis-input .el-input__inner {
    padding-left: 7px !important;
    padding-right: 20px !important;
  }

  .Heiguo-box .store-item .el-input-number {
    width: 72px !important;
    min-width: 72px !important;
  }
}

@media screen and (max-width: 768px) {
  .Heiguo-box .f-order {
    padding: 0 !important;
    margin-top: 7vw !important;
    border-top: 1px solid #edf1f7 !important;
    background: #fff !important;
  }

  .Heiguo-box .f-order .el-main {
    width: 100% !important;
    padding: 4vw !important;
    border: 1px solid #edf1f7 !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05) !important;
    box-sizing: border-box !important;
  }

  .Heiguo-box .f-order .main-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 4vw !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .Heiguo-box .f-order .main-card .left {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3vw !important;
    width: 100% !important;
  }

  .Heiguo-box .f-order .time,
  .Heiguo-box .f-order .num {
    display: grid !important;
    grid-template-columns: minmax(20vw, max-content) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 3vw !important;
    width: 100% !important;
    height: auto !important;
  }

  .Heiguo-box .f-order .l-txt {
    font-size: 3.5vw !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
  }

  .Heiguo-box .f-order .duration-select,
  .Heiguo-box .f-order .num .el-input-number {
    justify-self: end !important;
  }

  .Heiguo-box .f-order .duration-select {
    width: 29vw !important;
    min-width: 29vw !important;
  }

  .Heiguo-box .f-order .duration-select .el-input__inner {
    height: 10vw !important;
    line-height: 10vw !important;
    padding: 0 8vw 0 4vw !important;
    font-size: 3.8vw !important;
  }

  .Heiguo-box .f-order .num .el-input-number {
    width: 24vw !important;
    min-width: 24vw !important;
    height: 10vw !important;
    line-height: 10vw !important;
  }

  .Heiguo-box .f-order .num .el-input-number .el-input__inner {
    height: 10vw !important;
    line-height: 10vw !important;
    padding-left: 8vw !important;
    padding-right: 8vw !important;
    font-size: 3.8vw !important;
  }

  .Heiguo-box .f-order .num .el-input-number__decrease,
  .Heiguo-box .f-order .num .el-input-number__increase {
    width: 8vw !important;
    height: 10vw !important;
    line-height: 10vw !important;
  }

  .Heiguo-box .f-order .mid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 2vw 3vw !important;
    width: 100% !important;
    padding-top: 4vw !important;
    border-top: 1px solid #edf1f7 !important;
  }

  .Heiguo-box .f-order .mid > span:first-child {
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
  }

  .Heiguo-box .f-order .mid > span:nth-of-type(2) {
    grid-column: 1 / 2 !important;
    grid-row: 2 !important;
  }

  .Heiguo-box .f-order .line-empty {
    display: none !important;
  }

  .Heiguo-box .f-order .link {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 6vw !important;
    font-size: 3.4vw !important;
    line-height: 1.35 !important;
    color: #344054 !important;
    text-decoration: none !important;
    border-bottom: 1px solid currentColor !important;
    padding-bottom: 1px !important;
    white-space: nowrap !important;
  }

  .Heiguo-box .f-order .bot-price {
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 1.5vw !important;
    min-width: 0 !important;
  }

  .Heiguo-box .f-order .bot-price .new {
    display: inline-flex !important;
    align-items: baseline !important;
    color: #f53f3f !important;
    font-size: 3.2vw !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .Heiguo-box .f-order .bot-price .new span,
  .Heiguo-box .f-order .bot-price .new .price {
    font-size: 4.5vw !important;
    line-height: 1 !important;
    margin-left: 1vw !important;
  }

  .Heiguo-box .f-order .bot-price .old {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .Heiguo-box .f-order .discount-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 5vw !important;
    max-width: 28vw !important;
    padding: 0 1.5vw !important;
    overflow: hidden !important;
    border-radius: 3px !important;
    font-size: 2.4vw !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .Heiguo-box .f-order .right {
    display: grid !important;
    grid-template-columns: 11vw minmax(0, 1fr) !important;
    gap: 3vw !important;
    width: 100% !important;
  }

  .Heiguo-box .f-order .right > span,
  .Heiguo-box .f-order .right .el-popover__reference-wrapper {
    display: block !important;
    width: 11vw !important;
  }

  .Heiguo-box .f-order .right .add-cart {
    width: 11vw !important;
    height: 11vw !important;
    min-width: 11vw !important;
    border-radius: 4px !important;
  }

  .Heiguo-box .f-order .right .add-cart svg {
    width: 5.5vw !important;
    height: 5.5vw !important;
  }

  .Heiguo-box .f-order .right .buy {
    width: 100% !important;
    height: 11vw !important;
    line-height: 11vw !important;
    border-radius: 4px !important;
    font-size: 3.8vw !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }

  .duration-pup {
    min-width: 29vw !important;
  }

  .duration-pup .el-select-dropdown__item {
    height: 11vw !important;
    line-height: 11vw !important;
    padding: 0 4vw !important;
    font-size: 4vw !important;
  }

  .duration-pup .el-select-dropdown__item .txt {
    font-size: 4vw !important;
    line-height: 11vw !important;
  }

  .el-tooltip__popper {
    max-width: 56vw !important;
    padding: 2.2vw 3vw !important;
    font-size: 3.6vw !important;
    line-height: 1.45 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  .el-tooltip__popper.is-light {
    border-color: #dfe6f2 !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12) !important;
  }

  .el-tooltip__popper[x-placement^="top"] .popper__arrow {
    bottom: -6px !important;
  }
}

@media screen and (max-width: 768px) {
  .goods .el-main {
    padding: 0 !important;
    margin: 52px 0 0 !important;
    width: 100% !important;
    background-color: #fff !important;
  }

  .Heiguo-box {
    width: 100% !important;
    max-width: 100% !important;
    padding: 5vw 4vw !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }
}

@media screen and (max-width: 768px) {
  .Heiguo-box .store-item .el-table {
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .Heiguo-box .store-item .el-table::before,
  .Heiguo-box .store-item .el-table__fixed-right::before,
  .Heiguo-box .store-item .el-table__fixed::before {
    display: none !important;
  }

  .Heiguo-box .store-item .el-table__header-wrapper,
  .Heiguo-box .store-item .el-table colgroup {
    display: none !important;
  }

  .Heiguo-box .store-item .el-table__body-wrapper {
    overflow: visible !important;
  }

  .Heiguo-box .store-item .el-table__body,
  .Heiguo-box .store-item .el-table__body tbody {
    display: block !important;
    width: 100% !important;
  }

  .Heiguo-box .store-item .el-table__body tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2.5vw !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 3vw !important;
    padding: 3vw !important;
    border: 1px solid #dfe7f2 !important;
    border-radius: 6px !important;
    background: #fbfdff !important;
    box-sizing: border-box !important;
  }

  .Heiguo-box .store-item .el-table__body tr:last-child {
    margin-bottom: 0 !important;
  }

  .Heiguo-box .store-item .el-table td {
    display: grid !important;
    grid-template-columns: 22vw minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 9vw !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  .Heiguo-box .store-item .el-table td:nth-child(4) {
    display: none !important;
  }

  .Heiguo-box .store-item .el-table td::before {
    color: #667085 !important;
    font-size: 3.2vw !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
  }

  .Heiguo-box .store-item .el-table td:nth-child(1)::before {
    content: "用途";
  }

  .Heiguo-box .store-item .el-table td:nth-child(2)::before {
    content: "云盘类型";
  }

  .Heiguo-box .store-item .el-table td:nth-child(3)::before {
    content: "云盘容量";
  }

  .Heiguo-box .store-item .el-table td .cell {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    padding: 0 !important;
    font-size: 3.45vw !important;
    line-height: 1.35 !important;
    color: #101828 !important;
  }

  .Heiguo-box .store-item td:first-child .cell {
    font-weight: 700 !important;
  }

  .Heiguo-box .store-item .el-select,
  .Heiguo-box .store-item .dis-input,
  .Heiguo-box .store-item td:nth-child(2) .el-input {
    width: 100% !important;
  }

  .Heiguo-box .store-item .el-select .el-input__inner,
  .Heiguo-box .store-item .dis-input .el-input__inner {
    height: 9.5vw !important;
    line-height: 9.5vw !important;
    padding-left: 3vw !important;
    padding-right: 8vw !important;
    font-size: 3.45vw !important;
  }

  .Heiguo-box .store-item .el-input-number {
    width: 24vw !important;
    min-width: 24vw !important;
    height: 9.5vw !important;
    line-height: 9.5vw !important;
    margin-right: 2vw !important;
  }

  .Heiguo-box .store-item .el-input-number .el-input__inner {
    height: 9.5vw !important;
    line-height: 9.5vw !important;
    padding-left: 7vw !important;
    padding-right: 7vw !important;
    font-size: 3.6vw !important;
    font-weight: 700 !important;
  }

  .Heiguo-box .store-item .el-input-number__decrease,
  .Heiguo-box .store-item .el-input-number__increase {
    width: 7vw !important;
    height: 9.5vw !important;
    line-height: 9.5vw !important;
  }

  .Heiguo-box .store {
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 2vw 3vw !important;
    margin-top: 3vw !important;
    padding: 2.5vw 3vw !important;
    border-radius: 6px !important;
    background: #f7faff !important;
    box-sizing: border-box !important;
  }

  .Heiguo-box .store .add-disk,
  .Heiguo-box .store .txt {
    font-size: 3.2vw !important;
    line-height: 1.45 !important;
  }
}

@media screen and (min-width: 769px) {
  .Heiguo-box .template.common-config {
    padding-bottom: 118px !important;
  }

  .Heiguo-box .template.common-config .main-card {
    padding: 26px 28px 34px !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.04) !important;
  }

  .Heiguo-box .template.common-config .pro-tit {
    margin-bottom: 22px !important;
    padding-bottom: 18px !important;
    color: #0f172a !important;
    font-size: 26px !important;
    line-height: 1.25 !important;
  }

  .Heiguo-box .template.common-config .common-box,
  .Heiguo-box .template.common-config .l-config {
    width: 100% !important;
    max-width: 980px !important;
  }

  .Heiguo-box .template.common-config .config-item {
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 22px !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 13px 0 !important;
    border-bottom: 1px solid #eef2f7 !important;
  }

  .Heiguo-box .template.common-config .config-item:last-child {
    border-bottom: 0 !important;
  }

  .Heiguo-box .template.common-config .config-tit {
    margin: 0 !important;
    padding-left: 12px !important;
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
  }

  .Heiguo-box .template.common-config .config-way {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  .Heiguo-box .template.common-config .click-select {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .Heiguo-box .template.common-config .click-select .item,
  .Heiguo-box .template.common-config .cycle .item {
    width: auto !important;
    min-width: 138px !important;
    height: 38px !important;
    line-height: 38px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border-radius: 5px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .Heiguo-box .template.common-config .click-select .item.com-active,
  .Heiguo-box .template.common-config .cycle .item.com-active {
    background: #eff5ff !important;
  }

  .Heiguo-box .template.common-config .op-sysyem {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .Heiguo-box .template.common-config .op-sysyem .el-select,
  .Heiguo-box .template.common-config .host .el-input {
    width: 240px !important;
  }

  .Heiguo-box .template.common-config .slider {
    display: grid !important;
    grid-template-columns: auto minmax(280px, 1fr) auto 84px !important;
    align-items: center !important;
    gap: 12px !important;
    width: min(720px, 100%) !important;
  }

  .Heiguo-box .template.common-config .slider .el-slider {
    width: 100% !important;
  }

  .Heiguo-box .template.common-config .slider .el-input-number {
    width: 84px !important;
    min-width: 84px !important;
  }

  .Heiguo-box .template.common-config .unit {
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .Heiguo-box .template.common-config .cycle {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .Heiguo-box .template.common-config .f-order .main-card,
  .Heiguo-box .template.common-config + .f-order .main-card {
    box-shadow: none !important;
  }
}

@media screen and (max-width: 768px) {
  .Heiguo-box .template.common-config {
    padding-bottom: 0 !important;
  }

  .Heiguo-box .template.common-config .main-card {
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .Heiguo-box .template.common-config .pro-tit {
    margin: 0 0 4vw !important;
    padding-bottom: 3vw !important;
    font-size: 6vw !important;
    line-height: 1.25 !important;
  }

  .Heiguo-box .template.common-config .common-box,
  .Heiguo-box .template.common-config .l-config {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .Heiguo-box .template.common-config .config-item {
    margin: 0 0 3.5vw !important;
    padding: 3.2vw !important;
    border: 1px solid #e5ebf3 !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  .Heiguo-box .template.common-config .config-tit {
    margin: 0 0 2.6vw !important;
    padding-left: 2.5vw !important;
    font-size: 3.8vw !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
  }

  .Heiguo-box .template.common-config .config-way {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 2.5vw !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .Heiguo-box .template.common-config .config-way:has(.slider) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 2.4vw !important;
  }

  .Heiguo-box .template.common-config .click-select {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 2.4vw !important;
    width: 100% !important;
    height: auto !important;
  }

  .Heiguo-box .template.common-config .click-select .item,
  .Heiguo-box .template.common-config .cycle .item {
    width: auto !important;
    min-width: 21vw !important;
    max-width: 100% !important;
    height: 9vw !important;
    line-height: 9vw !important;
    margin: 0 !important;
    padding: 0 3vw !important;
    border-radius: 4px !important;
    font-size: 3.4vw !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  .Heiguo-box .template.common-config .click-select .item:last-child {
    margin-right: 0 !important;
  }

  .Heiguo-box .template.common-config .op-sysyem {
    display: grid !important;
    grid-template-columns: 28vw minmax(0, 1fr) !important;
    gap: 2vw !important;
    width: 100% !important;
  }

  .Heiguo-box .template.common-config .op-sysyem .el-select {
    width: 100% !important;
  }

  .Heiguo-box .template.common-config .op-sysyem .el-input__inner,
  .Heiguo-box .template.common-config .host .el-input__inner {
    height: 9.5vw !important;
    line-height: 9.5vw !important;
    font-size: 3.4vw !important;
  }

  .Heiguo-box .template.common-config .slider {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 18vw !important;
    align-items: center !important;
    gap: 2vw !important;
    width: 100% !important;
  }

  .Heiguo-box .template.common-config .slider .min,
  .Heiguo-box .template.common-config .slider .max {
    display: none !important;
  }

  .Heiguo-box .template.common-config .slider .el-slider {
    width: 100% !important;
    min-width: 0 !important;
  }

  .Heiguo-box .template.common-config .slider .el-input-number {
    width: 18vw !important;
    min-width: 18vw !important;
    height: 9.5vw !important;
    line-height: 9.5vw !important;
  }

  .Heiguo-box .template.common-config .slider .el-input-number .el-input__inner {
    height: 9.5vw !important;
    line-height: 9.5vw !important;
    padding: 0 !important;
    font-size: 4vw !important;
    font-weight: 800 !important;
  }

  .Heiguo-box .template.common-config .slider .el-input-number__decrease,
  .Heiguo-box .template.common-config .slider .el-input-number__increase {
    display: none !important;
  }

  .Heiguo-box .template.common-config .unit {
    display: inline-flex !important;
    align-items: center !important;
    min-width: max-content !important;
    color: #0f172a !important;
    font-size: 3vw !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .Heiguo-box .template.common-config .host .el-input,
  .Heiguo-box .template.common-config .host .el-input-number,
  .Heiguo-box .template.common-config .host .el-select {
    width: 100% !important;
    max-width: 100% !important;
  }

  .Heiguo-box .template.common-config .cycle {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2vw !important;
    width: 100% !important;
  }

  .Heiguo-box .template.common-config .cycle .item {
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .Heiguo-box .template.common-config .f-order {
    margin-top: 3vw !important;
  }
}

@media screen and (min-width: 769px) {
  .Heiguo-box .template.common-config .config-item {
    grid-template-columns: 180px minmax(0, 1fr) !important;
  }

  .Heiguo-box .template.common-config .config-tit {
    white-space: nowrap !important;
  }

  .Heiguo-box .template.common-config .f-order {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 28px 0 0 !important;
    padding: 18px 0 0 !important;
    border-top: 1px solid #eef2f7 !important;
    background: #fff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .Heiguo-box .template.common-config .f-order .el-main {
    padding: 0 !important;
    background: transparent !important;
  }

  .Heiguo-box .template.common-config .f-order .main-card {
    display: grid !important;
    grid-template-columns: minmax(180px, auto) minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 28px !important;
    width: 100% !important;
    max-width: 980px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .Heiguo-box .template.common-config .f-order .left,
  .Heiguo-box .template.common-config .f-order .mid,
  .Heiguo-box .template.common-config .f-order .right {
    width: auto !important;
    justify-content: flex-start !important;
  }

  .Heiguo-box .template.common-config .f-order .right {
    justify-self: end !important;
    gap: 10px !important;
  }

  .Heiguo-box .template.common-config .f-order .right .add-cart {
    width: auto !important;
    min-width: 112px !important;
    padding: 0 16px !important;
  }

  .Heiguo-box .template.common-config .f-order .right .buy {
    width: auto !important;
    min-width: 124px !important;
    padding: 0 22px !important;
  }
}

@media screen and (max-width: 768px) {
  .Heiguo-box .template.common-config .f-order .right {
    grid-template-columns: 26vw minmax(0, 1fr) !important;
  }

  .Heiguo-box .template.common-config .f-order .right > span,
  .Heiguo-box .template.common-config .f-order .right .el-popover__reference-wrapper {
    width: 26vw !important;
  }

  .Heiguo-box .template.common-config .f-order .right .add-cart {
    width: 26vw !important;
    min-width: 26vw !important;
    padding: 0 2vw !important;
    overflow: hidden !important;
    font-size: 3.2vw !important;
    line-height: 11vw !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
}

.Heiguo-box .template.common-config.hg-finance-config {
  width: 100% !important;
  box-sizing: border-box !important;
}

.Heiguo-box .template.common-config.hg-finance-config .hg-finance-nav,
.Heiguo-box .template.common-config.hg-finance-config .hg-finance-model,
.Heiguo-box .template.common-config.hg-finance-config .hg-finance-summary {
  box-sizing: border-box !important;
}

.Heiguo-box .template.common-config.hg-finance-config .common-box .com-active::after {
  display: none !important;
  border: 0 !important;
}

.Heiguo-box .template.common-config.hg-finance-config .common-box .com-active > .el-icon-check {
  display: none !important;
}

.Heiguo-box .template.common-config.hg-finance-config .config-way > .click-select + .unit {
  display: none !important;
}

.Heiguo-box .template.common-config.hg-finance-config .cycle .item.com-active,
.Heiguo-box .template.common-config.hg-finance-config .cycle .item.com-active * {
  color: #fff !important;
}

@media screen and (min-width: 1024px) {
  .Heiguo-box .template.common-config.hg-finance-config {
    display: block !important;
    align-items: start !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0 32px !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .hg-finance-nav {
    display: none !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .hg-finance-search {
    height: 36px !important;
    margin-bottom: 10px !important;
    padding: 0 14px 0 38px !important;
    border: 1px solid #d9e1ec !important;
    border-radius: 2px !important;
    background: #fff !important;
    color: #8b98aa !important;
    font-size: 13px !important;
    line-height: 34px !important;
    position: relative !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .hg-finance-search::before {
    content: "" !important;
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    width: 12px !important;
    height: 12px !important;
    margin-top: -7px !important;
    border: 2px solid #9aa8ba !important;
    border-radius: 50% !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .hg-finance-search::after {
    content: "" !important;
    position: absolute !important;
    left: 27px !important;
    top: 22px !important;
    width: 7px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: #9aa8ba !important;
    transform: rotate(45deg) !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .hg-finance-group {
    min-height: 674px !important;
    background: #f6f8fc !important;
    border: 1px solid #eef2f8 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .hg-finance-group-title {
    height: 54px !important;
    padding: 0 20px !important;
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 54px !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .hg-finance-list {
    padding: 0 0 16px !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .hg-finance-list-item {
    position: relative !important;
    height: 44px !important;
    padding: 0 20px 0 56px !important;
    color: #2c3a4f !important;
    font-size: 14px !important;
    line-height: 44px !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .hg-finance-list-item::before {
    content: "" !important;
    position: absolute !important;
    left: 30px !important;
    top: 50% !important;
    width: 10px !important;
    height: 10px !important;
    margin-top: -5px !important;
    border-radius: 2px !important;
    background: #c8d1df !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .hg-finance-list-item.active {
    background: #dceafe !important;
    color: #075bec !important;
    font-weight: 800 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .hg-finance-list-item.active::before {
    background: #f04444 !important;
    box-shadow: inset 0 0 0 2px #fff !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config > .main-card,
  .Heiguo-box .template.common-config.hg-finance-config > .f-order {
    width: 100% !important;
    max-width: none !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config > .main-card {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    border: 1px solid #edf1f7 !important;
    border-radius: 2px !important;
    background: #fff !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .pro-tit {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 20px !important;
    border-bottom: 1px solid #edf1f7 !important;
    color: #102033 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 54px !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .pro-tit::after {
    content: "购物车清单" !important;
    color: #69778c !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .hg-finance-model {
    display: grid !important;
    grid-template-columns: 128px minmax(0, 1fr) !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 36px 20px 28px !important;
    border-bottom: 1px solid #f0f3f8 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .hg-finance-model-label {
    color: #2f3d52 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 36px !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .hg-finance-model-body {
    max-width: 840px !important;
    padding: 16px !important;
    background: #f2f5fb !important;
    border: 1px solid #e8edf5 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .hg-finance-model-current {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 150px !important;
    height: 34px !important;
    padding: 0 18px !important;
    background: #0b63f6 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 34px !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .hg-finance-model-hint {
    margin-top: 14px !important;
    color: #6d7b90 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .common-box,
  .Heiguo-box .template.common-config.hg-finance-config .l-config {
    max-width: none !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .common-box {
    padding: 0 20px 0 !important;
    box-sizing: border-box !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .config-item {
    grid-template-columns: 128px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    min-height: 64px !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid #f0f3f8 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .config-tit {
    padding-left: 0 !important;
    color: #27364c !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .config-tit::before {
    display: none !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .click-select,
  .Heiguo-box .template.common-config.hg-finance-config .cycle,
  .Heiguo-box .template.common-config.hg-finance-config .op-sysyem {
    gap: 10px !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .config-way:has(.slider) {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 18px !important;
    width: fit-content !important;
    max-width: 100% !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .config-way > .click-select + .unit {
    display: none !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .click-select .item,
  .Heiguo-box .template.common-config.hg-finance-config .cycle .item {
    min-width: 134px !important;
    height: 36px !important;
    line-height: 34px !important;
    border: 1px solid #dce3ed !important;
    border-radius: 2px !important;
    background: #fff !important;
    color: #152238 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .click-select .item.com-active,
  .Heiguo-box .template.common-config.hg-finance-config .cycle .item.com-active {
    border-color: #0b63f6 !important;
    background: #0b63f6 !important;
    color: #fff !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .op-sysyem .el-select,
  .Heiguo-box .template.common-config.hg-finance-config .host .el-input {
    width: 240px !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .op-sysyem .el-input__inner,
  .Heiguo-box .template.common-config.hg-finance-config .host .el-input__inner {
    border-radius: 2px !important;
    border-color: #dce3ed !important;
    color: #26364d !important;
    font-weight: 700 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .slider {
    grid-template-columns: 34px minmax(380px, 1fr) 44px 72px !important;
    width: min(760px, 100%) !important;
    max-width: 760px !important;
    gap: 12px !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .slider .el-slider {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .slider .min,
  .Heiguo-box .template.common-config.hg-finance-config .slider .max {
    color: #17243a !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-align: center !important;
    justify-self: end !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .slider .el-input-number {
    width: 72px !important;
    min-width: 72px !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config > .f-order {
    position: static !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #edf1f7 !important;
    border-top: 0 !important;
    border-radius: 0 0 2px 2px !important;
    background: #f8fbff !important;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.04) !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .el-main {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .l-empty {
    display: none !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .main-card {
    display: grid !important;
    grid-template-columns: auto minmax(260px, 1fr) auto !important;
    align-items: center !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 84px !important;
    margin: 0 !important;
    padding: 18px 24px !important;
    background: #f8fbff !important;
    box-sizing: border-box !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .left {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 14px !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .num {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    height: auto !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .l-txt {
    color: #526174 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .num .el-input-number {
    width: 118px !important;
    height: 38px !important;
    line-height: 38px !important;
    border-radius: 3px !important;
    overflow: hidden !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .num .el-input-number .el-input__inner {
    height: 38px !important;
    line-height: 38px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .mid {
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .link,
  .Heiguo-box .template.common-config.hg-finance-config .f-order .discount-text {
    width: auto !important;
    max-width: 116px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .bot-price {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: 0 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .bot-price .old {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    max-width: 76px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .discount-box {
    display: none !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .bot-price .new {
    display: inline-flex !important;
    align-items: baseline !important;
    white-space: nowrap !important;
    color: #ff1f2d !important;
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .bot-price .new span,
  .Heiguo-box .template.common-config.hg-finance-config .f-order .bot-price .new .price {
    display: inline !important;
    font-size: 32px !important;
    font-weight: 900 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .right {
    justify-self: end !important;
    display: flex !important;
    gap: 10px !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .right .add-cart,
  .Heiguo-box .template.common-config.hg-finance-config .f-order .right .buy {
    height: 40px !important;
    border-radius: 3px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 40px !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .right .add-cart {
    min-width: 122px !important;
    border: 1px solid #0b63f6 !important;
    background: #fff !important;
    color: #0b63f6 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .right .buy {
    min-width: 128px !important;
    background: #0b63f6 !important;
    color: #fff !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .Heiguo-box .template.common-config.hg-finance-config .hg-finance-nav {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  .Heiguo-box .template.common-config.hg-finance-config .hg-finance-nav {
    display: none !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config {
    padding-bottom: 3vw !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .pro-tit {
    margin: 0 0 3vw !important;
    padding: 0 1vw 3vw !important;
    border-bottom: 1px solid #e7edf6 !important;
    color: #102033 !important;
    font-size: 5.4vw !important;
    font-weight: 900 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .hg-finance-model {
    display: grid !important;
    grid-template-columns: 100% !important;
    gap: 2vw !important;
    margin: 0 0 3.5vw !important;
    padding: 3.2vw !important;
    border: 1px solid #e5ebf3 !important;
    border-radius: 6px !important;
    background: #fff !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .hg-finance-model-label {
    color: #0f172a !important;
    font-size: 3.8vw !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .hg-finance-model-body {
    padding: 2.6vw !important;
    border-radius: 5px !important;
    background: #f2f6fd !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .hg-finance-model-current {
    display: inline-flex !important;
    max-width: 100% !important;
    min-height: 8.5vw !important;
    padding: 0 3vw !important;
    align-items: center !important;
    border-radius: 4px !important;
    background: #0b63f6 !important;
    color: #fff !important;
    font-size: 3.5vw !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .hg-finance-model-hint {
    margin-top: 2vw !important;
    color: #66758a !important;
    font-size: 3.15vw !important;
    line-height: 1.5 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .config-item {
    border-color: #e3eaf4 !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.035) !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .config-tit {
    padding-left: 0 !important;
    color: #102033 !important;
    font-weight: 900 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .config-tit::before {
    display: none !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .click-select .item.com-active,
  .Heiguo-box .template.common-config.hg-finance-config .cycle .item.com-active {
    border-color: #0b63f6 !important;
    background: #0b63f6 !important;
    color: #fff !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .click-select .item,
  .Heiguo-box .template.common-config.hg-finance-config .cycle .item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 9vw !important;
    line-height: 1.28 !important;
    white-space: normal !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .slider {
    grid-template-columns: minmax(0, 1fr) 20vw auto !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .slider .el-input-number {
    width: 20vw !important;
    min-width: 20vw !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order {
    height: auto !important;
    min-height: 0 !important;
    margin-top: 4vw !important;
    padding: 0 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .el-main {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .l-empty {
    display: none !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .main-card {
    gap: 0 !important;
    padding: 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .left {
    width: 100% !important;
    padding: 3.8vw 4vw !important;
    border-bottom: 1px solid #edf1f7 !important;
    box-sizing: border-box !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .num {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 3vw !important;
    width: 100% !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .l-txt {
    color: #526174 !important;
    font-size: 3.5vw !important;
    font-weight: 900 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .mid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 3vw !important;
    width: 100% !important;
    padding: 4vw !important;
    border-top: 0 !important;
    border-bottom: 1px solid #edf1f7 !important;
    box-sizing: border-box !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .mid > span:first-child,
  .Heiguo-box .template.common-config.hg-finance-config .f-order .mid > span:nth-of-type(2) {
    grid-column: 1 / 2 !important;
    grid-row: auto !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .link {
    min-height: 0 !important;
    font-size: 3.35vw !important;
    font-weight: 800 !important;
    color: #1f2a3d !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .bot-price {
    grid-column: 2 / 3 !important;
    grid-row: 1 / span 2 !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 1.5vw !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .bot-price .new {
    justify-content: flex-end !important;
    color: #ff1f2d !important;
    font-size: 3vw !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .bot-price .new span,
  .Heiguo-box .template.common-config.hg-finance-config .f-order .bot-price .new .price {
    margin-left: 1vw !important;
    color: #ff1f2d !important;
    font-size: 5.2vw !important;
    font-weight: 900 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .discount-text {
    height: 5.4vw !important;
    max-width: 24vw !important;
    border-color: #ff8a00 !important;
    color: #ff8a00 !important;
    background: #fffaf2 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .right {
    display: grid !important;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.7fr) !important;
    gap: 3vw !important;
    width: 100% !important;
    padding: 4vw !important;
    box-sizing: border-box !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .right > span,
  .Heiguo-box .template.common-config.hg-finance-config .f-order .right .el-popover__reference-wrapper {
    width: 100% !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .right .add-cart,
  .Heiguo-box .template.common-config.hg-finance-config .f-order .right .buy {
    width: 100% !important;
    height: 11vw !important;
    min-width: 0 !important;
    border-radius: 4px !important;
    font-size: 3.6vw !important;
    font-weight: 900 !important;
    line-height: 11vw !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .right .add-cart {
    border: 1px solid #0b63f6 !important;
    background: #fff !important;
    color: #0b63f6 !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .right .buy {
    background: #0b63f6 !important;
    color: #fff !important;
  }

  .Heiguo-box .template.common-config.hg-finance-config .f-order .bot-price .new span,
  .Heiguo-box .template.common-config.hg-finance-config .f-order .bot-price .new .price {
    color: #ff1f2d !important;
  }
}

.Heiguo-box .template.common-config.hg-generic-product .common-box .config-way > .unit:empty {
  display: none !important;
}

.Heiguo-box .template.common-config.hg-generic-product .common-box .config-item:has(.cycle:empty) {
  display: none !important;
}

.Heiguo-box .template.common-config.hg-generic-product .common-box .config-item:has(.custom-config .el-form:empty) {
  display: none !important;
}

@media screen and (min-width: 1024px) {
  .Heiguo-box .template.common-config.hg-generic-product {
    max-width: none !important;
    margin: 0 !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product > .main-card {
    border: 1px solid #e7edf6 !important;
    border-radius: 3px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .common-box {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    align-items: start !important;
    gap: 24px !important;
    padding: 0 20px 24px !important;
    box-sizing: border-box !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .l-config {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .config-item {
    display: grid !important;
    grid-template-columns: 128px minmax(260px, 1fr) !important;
    align-items: center !important;
    column-gap: 18px !important;
    min-height: 72px !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid #eef3fa !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .config-tit {
    margin: 0 !important;
    padding-left: 0 !important;
    color: #17243a !important;
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .config-tit::before {
    display: none !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .config-way {
    width: 100% !important;
    max-width: 520px !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .config-way .el-select {
    width: 260px !important;
    max-width: 100% !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .config-way .el-input__inner {
    height: 38px !important;
    line-height: 38px !important;
    border-radius: 3px !important;
    border-color: #d7e0ec !important;
    color: #17243a !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .order-right {
    position: sticky !important;
    top: 80px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border: 1px solid #dfe7f2 !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
    overflow: hidden !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .order-right .right-main {
    padding: 20px 20px 16px !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .order-right .right-title {
    margin: 0 0 14px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid #edf2f8 !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 900 !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .order-right .info {
    padding: 0 0 14px !important;
    border-bottom: 1px solid #edf2f8 !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .order-right .info .des {
    margin: 0 !important;
    color: #17243a !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.6 !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .order-right .subtotal {
    display: flex !important;
    justify-content: space-between !important;
    padding: 14px 0 0 !important;
    border: 0 !important;
    color: #17243a !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .order-right .f-box {
    padding: 18px 20px 20px !important;
    border-top: 1px solid #edf2f8 !important;
    background: #f8fbff !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .order-right .footer-total {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: end !important;
    gap: 12px !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .order-right .footer-total .left {
    color: #66758a !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .order-right .footer-total .right {
    justify-self: end !important;
    color: #ff1f2d !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .order-right .discount-box {
    margin-top: 10px !important;
    text-align: right !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .order-right .discount-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 22px !important;
    padding: 0 8px !important;
    border: 1px solid #ff9f2d !important;
    border-radius: 3px !important;
    background: #fffaf2 !important;
    color: #ff8a00 !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .f-btn {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding-top: 16px !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .f-btn .cart,
  .Heiguo-box .template.common-config.hg-generic-product .f-btn .buy-btn {
    height: 40px !important;
    border-radius: 3px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
  }
}

@media screen and (max-width: 768px) {
  .Heiguo-box .template.common-config.hg-generic-product .common-box {
    display: block !important;
    padding: 0 !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .config-item {
    margin: 0 0 3.5vw !important;
    padding: 3.2vw !important;
    border: 1px solid #e5ebf3 !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.035) !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .config-tit {
    margin: 0 0 2.6vw !important;
    padding-left: 0 !important;
    color: #102033 !important;
    font-size: 3.8vw !important;
    font-weight: 900 !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .config-tit::before {
    display: none !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .config-way,
  .Heiguo-box .template.common-config.hg-generic-product .config-way .el-select {
    width: 100% !important;
    max-width: 100% !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .config-way .el-input__inner {
    height: 9.6vw !important;
    line-height: 9.6vw !important;
    border-radius: 4px !important;
    color: #17243a !important;
    font-size: 3.45vw !important;
    font-weight: 800 !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .order-right {
    width: 100% !important;
    margin: 4vw 0 0 !important;
    border: 1px solid #e1e8f2 !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
    overflow: hidden !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .order-right .right-main {
    padding: 4vw !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .order-right .right-title {
    margin: 0 0 3vw !important;
    padding-bottom: 3vw !important;
    border-bottom: 1px solid #edf2f8 !important;
    color: #0f172a !important;
    font-size: 4vw !important;
    font-weight: 900 !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .order-right .info {
    padding-bottom: 3vw !important;
    border-bottom: 1px solid #edf2f8 !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .order-right .info .des {
    margin: 0 !important;
    color: #17243a !important;
    font-size: 3.25vw !important;
    font-weight: 800 !important;
    line-height: 1.55 !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .order-right .subtotal {
    display: flex !important;
    justify-content: space-between !important;
    padding: 3vw 0 0 !important;
    border: 0 !important;
    font-size: 3.3vw !important;
    font-weight: 800 !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .order-right .f-box {
    padding: 4vw !important;
    border-top: 1px solid #edf2f8 !important;
    background: #f8fbff !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .order-right .footer-total {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: end !important;
    gap: 3vw !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .order-right .footer-total .left {
    color: #66758a !important;
    font-size: 3.4vw !important;
    font-weight: 900 !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .order-right .footer-total .right {
    justify-self: end !important;
    color: #ff1f2d !important;
    font-size: 5.8vw !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .order-right .discount-box {
    margin-top: 2vw !important;
    text-align: right !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .order-right .discount-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 5.2vw !important;
    max-width: 28vw !important;
    padding: 0 1.6vw !important;
    overflow: hidden !important;
    border: 1px solid #ff9f2d !important;
    border-radius: 3px !important;
    background: #fffaf2 !important;
    color: #ff8a00 !important;
    font-size: 2.35vw !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .f-btn {
    display: grid !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) !important;
    gap: 3vw !important;
    padding-top: 4vw !important;
  }

  .Heiguo-box .template.common-config.hg-generic-product .f-btn .cart,
  .Heiguo-box .template.common-config.hg-generic-product .f-btn .buy-btn {
    width: 100% !important;
    height: 11vw !important;
    border-radius: 4px !important;
    font-size: 3.6vw !important;
    font-weight: 900 !important;
  }
}

@media screen and (min-width: 769px) {
  .Heiguo-box .f-order:not(.hg-finance-summary) .main-card {
    display: grid !important;
    grid-template-columns: minmax(320px, auto) minmax(360px, 1fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
    width: 100% !important;
    height: 84px !important;
    min-height: 84px !important;
    padding: 0 28px !important;
    box-sizing: border-box !important;
  }

  .Heiguo-box .f-order:not(.hg-finance-summary) .main-card .left {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    min-width: 0 !important;
  }

  .Heiguo-box .f-order:not(.hg-finance-summary) .time,
  .Heiguo-box .f-order:not(.hg-finance-summary) .num {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
  }

  .Heiguo-box .f-order:not(.hg-finance-summary) .l-txt {
    color: #526174 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .Heiguo-box .f-order:not(.hg-finance-summary) .mid {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .Heiguo-box .f-order:not(.hg-finance-summary) .mid > span {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  .Heiguo-box .f-order:not(.hg-finance-summary) .line-empty {
    flex: 0 0 1px !important;
    width: 1px !important;
    height: 18px !important;
    margin: 0 !important;
    background: #d9e1ec !important;
  }

  .Heiguo-box .f-order:not(.hg-finance-summary) .link {
    display: inline-block !important;
    align-items: center !important;
    max-width: 160px !important;
    overflow: hidden !important;
    color: #344054 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .Heiguo-box .f-order:not(.hg-finance-summary) .bot-price {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .Heiguo-box .f-order:not(.hg-finance-summary) .bot-price .new {
    display: inline-flex !important;
    align-items: baseline !important;
    color: #ff1f2d !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .Heiguo-box .f-order:not(.hg-finance-summary) .bot-price .new::before {
    content: "￥" !important;
    margin-right: 3px !important;
  }

  .Heiguo-box .f-order:not(.hg-finance-summary) .bot-price .new span,
  .Heiguo-box .f-order:not(.hg-finance-summary) .bot-price .new .price {
    display: inline !important;
    margin-left: 3px !important;
    color: #ff1f2d !important;
    font-size: 25px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  .Heiguo-box .f-order:not(.hg-finance-summary) .bot-price .old {
    display: none !important;
  }

  .Heiguo-box .f-order:not(.hg-finance-summary) .right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    width: auto !important;
  }

  .Heiguo-box .f-order:not(.hg-finance-summary) .right .add-cart {
    width: 44px !important;
    min-width: 44px !important;
    height: 40px !important;
    border-radius: 3px !important;
  }

  .Heiguo-box .f-order:not(.hg-finance-summary) .right .buy {
    width: auto !important;
    min-width: 120px !important;
    height: 40px !important;
    padding: 0 24px !important;
    border-radius: 3px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 40px !important;
    white-space: nowrap !important;
  }
}

@media screen and (max-width: 768px) {
  .config-box.Heiguo-box {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 5vw 4vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .Heiguo-box .content,
  .Heiguo-box .template,
  .Heiguo-box .main-card.mf-cloud {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .Heiguo-box .mf-cloud .el-slider.el-slider--with-input,
  .Heiguo-box .el-slider.el-slider--with-input {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 38px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .Heiguo-box .mf-cloud .el-slider.el-slider--with-input .el-slider__runway,
  .Heiguo-box .el-slider.el-slider--with-input .el-slider__runway {
    order: 1 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 80px !important;
    margin: 0 !important;
  }

  .Heiguo-box .mf-cloud .el-slider.el-slider--with-input .el-slider__input,
  .Heiguo-box .el-slider.el-slider--with-input .el-slider__input {
    order: 2 !important;
    flex: 0 0 126px !important;
    width: 126px !important;
    max-width: 126px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
  }

  .Heiguo-box .mf-cloud .el-slider.el-slider--with-input .el-input,
  .Heiguo-box .el-slider.el-slider--with-input .el-input,
  .Heiguo-box .mf-cloud .el-slider.el-slider--with-input .el-input__inner,
  .Heiguo-box .el-slider.el-slider--with-input .el-input__inner {
    height: 38px !important;
    line-height: 38px !important;
  }

  .Heiguo-box .mf-cloud .el-slider.el-slider--with-input .el-input-number__decrease,
  .Heiguo-box .mf-cloud .el-slider.el-slider--with-input .el-input-number__increase,
  .Heiguo-box .el-slider.el-slider--with-input .el-input-number__decrease,
  .Heiguo-box .el-slider.el-slider--with-input .el-input-number__increase {
    width: 34px !important;
    height: 38px !important;
    line-height: 38px !important;
  }

  .Heiguo-box .mf-cloud .marks,
  .Heiguo-box .marks {
    margin-top: 8px !important;
    min-height: 16px !important;
    font-size: 12px !important;
    line-height: 16px !important;
  }

  .Heiguo-box .mf-cloud .marks .item,
  .Heiguo-box .marks .item {
    height: 16px !important;
    font-size: 12px !important;
    line-height: 16px !important;
    color: #64748b !important;
  }
}

@media screen and (max-width: 768px) {
  body .goods > .el-container > .el-container > .el-main,
  body .goods .el-container:nth-child(2) > .el-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 52px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
}