body{ background: #F2F4F5;}
.com-nav{position:sticky;top: 0;z-index: 1;}
.header-top .headerwarp{display: none;}
.bot-buticon{display: none;}
.deta-box{background: #FFFFFF;padding: 8px;margin-bottom: 10px;}
.deta-box .deta-good{display: flex;align-items: center;padding-bottom: 20px;border-bottom: 1px solid #eee;}
.deta-box .deta-good .deta-imgbox{width:60px;height:60px;margin-right: 20px;}
.deta-box .deta-good .prc-img{width: 100%;border-radius: 10px;position: relative;top:0px;}
.deta-box .deta-good .prc-name{font-weight: bolder;}
.deta-box .tips-img{padding-top: 20px;}
.deta-box .tips-img .k-img{width: 80%;}
.deta-box .type-title{margin-bottom: 10px;}
.deta-box .type-btn{display: grid;grid-template-columns: repeat(3, 1fr);grid-auto-rows: auto;grid-column-gap: 8px; grid-row-gap: 15px;}
.deta-box .type-btn .btn-primary {position: relative; padding: 5px;font-size: 14px;background: #f5f5f5;}
.deta-box .type-btn .btn-primary.btn-active {background: var(--btn-theme);opacity: 1;}
.deta-box .type-btn .btn-primary:hover{background: var(--btn-theme);}
.deta-box .type-btn .btn-primary .tips { position: absolute; top: -13px; left: 0px;overflow: hidden;text-overflow: ellipsis; word-break: keep-all; white-space: nowrap; font-size: 12px;}
.deta-box .type-btn .btn-primary .tips span {padding: 0 3px; margin: 0 0 0 0px; background-color: #6744ff; color: #fff; font-size: 12px; border-radius: 2px;    white-space: nowrap;}
.deta-box .type-title.attribute{margin-top: 20px;}
.deta-box .type-title.attr-card{display: flex;justify-content: space-between;margin: 0;}
.deta-box .type-title.attr-card .cost{color: #999;}
.deta-box .type-title.attr-card .price{font-weight: bolder;}

.asklist .ask-ass {flex: 1;display: block;padding: 10px 0;text-align: center;color: #5b5b5b;background: #f2f4f5;border: none;border-top: 2px solid transparent;}
.asklist .ask-ass.active {color: #FBB92A;  border-color: currentColor;background: #fff;}
.asklist .ask-ass .ass-number{display: flex;align-items: center;font-weight: bolder;}
.asklist .ask-ass .ass-number span:first-child {width: 4px;height:20px;background: var(--btn-theme);border-radius: 10px;display: inline-block;margin-right: 10px;}
.asklist .ask-ass .fa-angle-right{font-size: 24px;color: #999;}

.p-review .p-item {padding-top:20px;}
.p-review .p-item .item-head {display:flex;position: relative;margin-bottom: 10px;}
.p-review .p-item .item-img {width:50px;height:50px;flex-shrink:0;display:block;margin-right:.2667rem;border-radius:50%;overflow:hidden}
.p-review .p-item .item-img img {width:100%;height:100%}
.p-review .star .fa {color:#e0e0e0;}
.p-review .star .fa.active {color:var(--btn-theme);}
.p-review .p-item .item-cont p{color:#333;word-wrap:break-word;font-size: 12px;}
.item-info .item-star .item-date{position: absolute;right: 0;font-size: 12px;color: #999;top:10px;}

.brief .brief-tltie{background: #F5F5F5;padding:5px 10px;margin-top: 20px;font-size: 14px;font-weight: bolder;margin-bottom: 20px;}
.brief .brief-con p{font-size: 14px;color: #666;line-height: 30px;}
.brief .infotext{display: none;background: none;border: none;overflow: hidden;color: #999;font-size: 14px;}
.brief .infotext:hover{color: #000;}
.brief .infotext.in-active{display: block;margin: 0 auto;margin-top: 10px;}

.payment-info{background: #fff;position: fixed;bottom: 0;left: 0;padding:10px;width: 100%;box-shadow: 0px 0px 10px rgb(34 25 25 / 20%);}
.payment-info .payment-price{display: flex;align-items: center;justify-content: space-between;margin-bottom: 10px;}
.payment-info .price-value{color: #f60;font-weight: bolder;font-size: 18px;}
.payment-info .original-price {font-size: 13px;color: #838383;text-decoration: line-through;padding-left: 5px;}
.payment-info .int{height: 28px;}
.payment-info .int input{background: #f5f5f5;border: none;width: 60px;padding:2px 5px;text-align: center;}
.payment-info .input-number .fa{background: #f5f5f5;width: 28px;height: 28px;border-radius: 30px;text-align: center;line-height: 28px;color: #999;transition: all 0.3s linear;}
.payment-info .input-number .fa:hover{background: var(--btn-theme);color: #000;}
.payment-info .web-button .web-recharge .pay-btn{opacity: 1;height: 40px;}
.payment-info .input-number .disabled {opacity: .3;}
.payment-info .web-button .web-recharge{display: flex;}
.cart-warp {width: 46px;height: 35px;position: relative;margin-right: 17px;top: -3px;}
.cart-warp .cart-btn,
.cart-warp .cart-success{padding: 0;border-radius: 6px;font-size: 28px;border: 0;height: 100%;width: 100%;color: #40a785;background-color: #fff;opacity: 0.8;}
.cart-warp .cart-success{display: none;position: absolute;z-index: 1;text-align: center;opacity: 1;}
.cart-warp .cart-btn:hover{opacity: 1;}

/*add-to-cart*/
.add-to-cart {border-radius:6px;--color: #fff;--icon: var(--color);--cart: #fff;--dots: #fff;cursor: pointer;position: relative;outline: none;border: none;-webkit-appearance: none;-webkit-tap-highlight-color: transparent;font-size: 16px;padding:6px 11px;font-weight: 500;line-height: 20px;-webkit-transform: scale(var(--s, 0.97));transform: scale(var(--s, 0.97));color: var(--color);background:#40a785;transition: box-shadow .3s, -webkit-transform .3s;transition: transform .3s, box-shadow .3s;transition: transform .3s, box-shadow .3s, -webkit-transform .3s;margin-right: 20px;opacity: .8;}
.add-to-cart:hover{opacity: 1;}
.add-to-cart .default {padding-left: 0px;position: relative;opacity: var(--o, 1);-webkit-transform: scale(var(--s, 1));  transform: scale(var(--s, 1));transition: opacity .3s, -webkit-transform .3s;transition: transform .3s, opacity .3s;transition: transform .3s, opacity .3s, -webkit-transform .3s;transition-delay: var(--d, 0.3s);font-size: 24px;}
.add-to-cart .default:after {--r: 90deg;}
.add-to-cart .success {opacity: var(--o, 0);-webkit-transform: translate(-50%, var(--y, 12px));transform: translate(-50%, var(--y, 12px));position: absolute;top: 10px; left: 50%;transition: opacity .3s, -webkit-transform .3s;transition: opacity .3s, transform .3s;transition: opacity .3s, transform .3s, -webkit-transform .3s;transition-delay: var(--d, 0s);}
.add-to-cart .dots {width: 4px;height: 4px;top:10px;left: 50%;margin-left: -7px;border-radius: 2px;position: absolute;-webkit-transform-origin: 10px 50%;transform-origin: 10px 50%;background: var(--dots);box-shadow: 5px 0 0 var(--dots), 10px 0 0 var(--dots);opacity: var(--o, 0);-webkit-transform: scale(var(--s, 0.4));transform: scale(var(--s, 0.4));transition: opacity .3s, -webkit-transform .3s;transition: opacity .3s, transform .3s;transition: opacity .3s, transform .3s, -webkit-transform .3s;transition-delay: var(--d, 0s);}
.add-to-cart .cart {position: absolute;left: 0;top: 0; right: 0;bottom: 0;z-index: 1;border-radius: inherit;overflow: hidden;-webkit-mask-image: -webkit-radial-gradient(white, black);}
.add-to-cart .cart:before {content: '';position: absolute;width: 20px;height: 16px;background: var(--background);top: 17px;right: 100%;z-index: 1;margin-right: -20px;-webkit-transform: translateX(-18px) rotate(-16deg);transform: translateX(-18px) rotate(-16deg);}
.add-to-cart .cart > div {top: 13px;right: 100%;-webkit-transform: translateX(-18px) rotate(-16deg);transform: translateX(-18px) rotate(-16deg);position: absolute;z-index: 2;-webkit-transform-origin: 1px 21px;transform-origin: 1px 21px;}
.add-to-cart .cart > div:before, .add-to-cart .cart > div:after {content: '';position: absolute;top: var(--t, 4px);left: var(--l, 0);height: 2px;width: var(--w, 18px);background: var(--cart);border-radius: 1px;}
.add-to-cart .cart > div:after {--w: 16px;--t: 14px;--l: 1px;}
.add-to-cart .cart > div > div {width: 2px;height: var(--h, 15px);border-radius: 1px;-webkit-transform: rotate(var(--r, -8deg));transform: rotate(var(--r, -8deg));background: var(--cart);position: relative;}
.add-to-cart .cart > div > div:before, .add-to-cart .cart > div > div:after {content: '';position: absolute;background: inherit;}
.add-to-cart .cart > div > div:after {width: 4px;height: 4px;border-radius: 2px;bottom: var(--b, -6px);left: var(--l, 0);}
.add-to-cart .cart > div > div:first-child:before {border-radius: inherit;top: 0;right: 0;height: 2px;width: 6px;-webkit-transform-origin: 5px 1px;transform-origin: 5px 1px;-webkit-transform: rotate(16deg);transform: rotate(16deg);}
.add-to-cart .cart > div > div:last-child {--h: 12px;--r: 8deg;position: absolute;left: 16px;bottom: -1px;}
.add-to-cart .cart > div > div:last-child:after {--l: -2px;--b: -5px;}
.add-to-cart.added .default {--o: 0;--s: .8;--d: 0s;}
.add-to-cart.added .default:before { --r: -180deg;}
.add-to-cart.added .default:after {--r: -90deg;}
.add-to-cart.added .dots {--o: 1;--s: 1;--d: .3s;-webkit-animation: dots 2s linear forwards;animation: dots 2s linear forwards;}
.add-to-cart.added .success {--o: 1;--y: 0;--d: 1.8s;}
.add-to-cart.added .cart:before, .add-to-cart.added .cart > div {-webkit-animation: cart 2s forwards; animation: cart 2s forwards;}
.add-to-cart:not(.added):hover {--s: 1;--s-y: 8px;--s-b: 20px;}
.add-to-cart:not(.added):active {--s: .94;--s-y: 2px;--s-b: 6px;}
@-webkit-keyframes cart {
    41%,
      49%,
      57%,
      60% {
      -webkit-transform: translateX(16px) rotate(0deg);
              transform: translateX(16px) rotate(0deg);
    }
    40%,
      47%,
      54% {
      -webkit-transform: translateX(16px) rotate(0deg) translateY(1px);
              transform: translateX(16px) rotate(0deg) translateY(1px);
    }
    100% {
      -webkit-transform: translateX(76px) rotate(-16deg);
              transform: translateX(76px) rotate(-16deg);
    }
  }

  @keyframes cart {
    41%,
      49%,
      57%,
      60% {
      -webkit-transform: translateX(16px) rotate(0deg);
              transform: translateX(16px) rotate(0deg);
    }
    40%,
      47%,
      54% {
      -webkit-transform: translateX(16px) rotate(0deg) translateY(1px);
              transform: translateX(16px) rotate(0deg) translateY(1px);
    }
    100% {
      -webkit-transform: translateX(76px) rotate(-16deg);
              transform: translateX(76px) rotate(-16deg);
    }
  }
  @-webkit-keyframes dots {
    5% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    25% {
      -webkit-transform: translateY(-10px) rotate(-32deg);
      transform: translateY(-10px) rotate(-32deg);
      box-shadow: 5px 0 0 var(--dots), 10px 0 0 var(--dots);
    }
    31% {
      box-shadow: 5px -4px 0 var(--dots), 10px -8px 0 var(--dots);
    }
    32%,
      50% {
      -webkit-transform: translateY(0) rotate(0deg);
      transform: translateY(0) rotate(0deg);
      opacity: 1;
    }
    45%,
      100% {
      box-shadow: 5px 0 0 var(--dots), 10px 0 0 var(--dots);
    }
    51%,
      100% {
      opacity: 0;
    }
  }
  @keyframes dots {
    5% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    25% {
      -webkit-transform: translateY(-10px) rotate(-32deg);
      transform: translateY(-20px) rotate(-32deg);
      box-shadow: 5px 0 0 var(--dots), 10px 0 0 var(--dots);
    }
    31% {
      box-shadow: 5px -4px 0 var(--dots), 10px -8px 0 var(--dots);
    }
    32%,
      50% {
      -webkit-transform: translateY(0) rotate(0deg);
              transform: translateY(0) rotate(0deg);
      opacity: 1;
    }
    45%,
      100% {
      box-shadow: 5px 0 0 var(--dots), 10px 0 0 var(--dots);
    }
    51%,
      100% {
      opacity: 0;
    }
  }



/* shopping cart */
.min-cart {position: fixed; top: 4px;right: 12px; z-index: 1;}
.min-cart .cart-btn{cursor: pointer;color: #e28134;position: relative;}
.min-cart .cart-btn .cart-num {background: #cf0900;color: #fff;display: block;border-radius: 12px;font-size: 11px;text-align: center;position: absolute;top: 4px;left: 23px;padding: 0px 5px;transform: scale(0.8);}
.min-cart .fa-shopping-cart{padding: 6px;font-size: 26px;}
.cart-empty{cursor: pointer;}
.cart-empty .cart-btn .cart-num{background: #323232;}
.cart-empty .dropdown-menu{display: none;}
.cart-empty .cart-btn  .cart-num{display: none;}

.deta-box .remind {padding-top: 15px;}
.deta-box .remind ul{display: flex;}
.deta-box .remind li{position: relative;flex: 1;justify-content: center;display: flex;font-size: 13px;}
.deta-box .remind .tick{width: 21px;height: 21px;border: 2px solid #2196F3;border-radius: 31px;text-align: center;}
.deta-box .remind .tick::before {content: '';position: absolute;width: 5px;height: 9px;color: #2196F3;border-bottom: 2px solid;border-right: 2px solid;top: 7px;transform-origin: center;transform: translate(-50%, -30%) rotate(45deg);-webkit-transform: translate(-50%, -30%) rotate(45deg);}
.deta-box .remind span{padding-left:5px;color:#666}
.brief-con {height: 300px;overflow: hidden;}
.brief-con a{color: #199bf4;}
.brief.open .brief-con {height: auto;}
.asklist {display: flex;justify-content: space-between;}

.product-detail {padding: 0;}
.product-detail .brief {padding: 20px; }
.no-pro { min-height: auto!important;}
.describe { padding: 0;}
.describe .p-review, .describe .brief {padding: 20px;}
.p-review {display: none;}
.speci-fica{margin-bottom: 0;}

 input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"]{
    -moz-appearance: textfield;
  }
  .min-cart a{display: block;}

  .page-title {
  max-width: 70vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}