@font-face {
       font-family: 'BodoniBdBTBold';
       src: url('../fonts/BodoniBdBTBold.ttf') format('truetype');
       font-weight: normal;
       font-style: normal;
       font-display: swap;
   }

   .back-top {
       position: fixed;
       bottom: 20px;
       right: 20px;
       color: #45c5cb;
       cursor: pointer;
       padding: 15px 10px;
       background-color: white;
       border-radius: 4px;
       text-align: center;
       z-index: 999;
       opacity: 0;
       /* 添加过渡效果 */
       transition: opacity 0.3s;
   }


   /* Chrome, Safari, Edge, Opera */
   input[type=number]::-webkit-inner-spin-button,
   input[type=number]::-webkit-outer-spin-button {
       -webkit-appearance: none;
       margin: 0;
   }

   /* Firefox */
   input[type=number] {
       -moz-appearance: textfield;
   }

   ul {
       margin: 0;
       padding: 0;
   }

   li {
       list-style: none;
       /* 去掉默认的项目符号 */
       margin: 0;
       /* 去掉默认外边距 */
       padding: 0;
       /* 去掉默认内边距 */
   }

   button {
       border: none;
       outline: none;
       cursor: pointer;
       background: none;
   }


   .sale_container {
       padding: 25px 40px 0;
   }

   .sale_container>.banner {
       width: 100%;
       height: 230px;
       position: relative;
   }

   .sale_container>.banner>img {
       width: 100%;
       height: 100%;
   }

   .sale_container>.banner>.text {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       text-align: center;
   }

   .sale_container>.banner>.text>p:nth-child(1) {
       font-family: 'BodoniBdBTBold', serif;
       font-size: 72px;
       color: #000000;
       margin: 0;
       position: relative;
       top: 15px;
   }

   .sale_container>.banner>.text>p:nth-child(2) {
       font-weight: 500;
       font-size: 24px;
       color: #000000;
       margin-top: 0;
   }

   .sale_container>.content {
       background: #F3F3F3;
       overflow: hidden;
   }

   .sale_container>.content>h1 {
       font-size: 24px;
       color: #131313;
       text-align: center;
       margin: 20px;
   }

   .sale_container>.content>.sale_data {
       display: flex;
   }

   .sale_container>.content>.sale_data>.left {
       min-width: 240px;
   }

   .filter.fixed {
       position: fixed;
       top: 130px;
       left: 40px;
       animation: fadeInDown 1s ease;
   }


   /* 吸附动画（从上方滑入） */
   @keyframes fadeInDown {
       from {
           transform: translateY(-140px);
       }

       to {
           transform: translateY(0);
       }
   }

   .sale_container>.content>.sale_data>.left>.filter {
       width: 240px;
       background-color: #fff;
       transition: all 1s ease;
       height: auto;
   }

   .sale_container>.content>.sale_data>.left>.autoheight {
       height: 750px;
       overflow: auto;

       /* Firefox */
       scrollbar-width: thin;
       scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
   }

   /* Webkit 浏览器滚动条 */
   .sale_container>.content>.sale_data>.left>.autoheight::-webkit-scrollbar {
       width: 5px;
       /* 细滚动条宽度 */
       height: 5px;
   }

   .sale_container>.content>.sale_data>.left>.autoheight::-webkit-scrollbar-track {
       background: transparent;
       /* 轨道透明 */
   }

   .sale_container>.content>.sale_data>.left>.autoheight::-webkit-scrollbar-thumb {
       background-color: rgba(0, 0, 0, 0.1);
       /* 淡黑色 */
       border-radius: 10px;
       border: 1px solid transparent;
   }

   .sale_container>.content>.sale_data>.left>.autoheight::-webkit-scrollbar-thumb:hover {
       background-color: rgba(0, 0, 0, 0.2);
       /* 悬浮时颜色稍深 */
   }

   .sale_container>.content>.sale_data>.left>.filter>.filters {
       padding: 24px;
   }

   .sale_container>.content>.sale_data>.left>.filter>.filters>.filter-title {
       display: flex;
       justify-content: space-between;
       padding-bottom: 10px;
   }

   .sale_container>.content>.sale_data>.left>.filter>.filters>.filter-title>span:nth-child(1) {
       font-weight: bold;
       font-size: 18px;
       color: #333333;
   }

   .sale_container>.content>.sale_data>.left>.filter>.filters>.filter-title>span:nth-child(2) {
       font-size: 12px;
       color: #39C3CB;
       border-bottom: 1px solid #39C3CB;
       height: 14px;
       position: relative;
       top: 4px;
       cursor: pointer;
   }

   .sale_container>.content>.sale_data>.left>.filter>.Category {
       padding: 24px;
   }

   .sale_container>.content>.sale_data>.left>.filter>.Category>.Category-title {
       font-weight: bold;
       font-size: 14px;
       color: #333333;
       padding-bottom: 18px;
   }

   .sale_container>.content>.sale_data>.left>.filter>.Discount {
       padding: 24px 24px 8px;
   }

   .sale_container>.content>.sale_data>.left>.filter>.Discount>.Discount-title {
       font-weight: bold;
       font-size: 14px;
       color: #333333;
       padding-bottom: 10px;
   }

   .sale_container>.content>.sale_data>.left>.filter>.Discount>.checkboxitem {
       margin-bottom: 16px;
   }

   .sale_container>.content>.sale_data>.left>.filter>.Discount>.checkboxitem .is-checked .el-checkbox__inner {
       background-color: #39C3CB !important;
       border-color: #39C3CB !important
   }

   .sale_container>.content>.sale_data>.left>.filter>.Discounted_Price {
       padding: 24px;
   }

   .sale_container>.content>.sale_data>.left>.filter>.Discounted_Price>.Discounted_Price-title {
       font-weight: bold;
       font-size: 14px;
       color: #333333;
   }

   .sale_container>.content>.sale_data>.left>.filter>.Discounted_Price>.inp {
       display: flex;
       align-items: center;
       margin-top: 20px;
   }

   .sale_container>.content>.sale_data>.left>.filter>.Discounted_Price>.inp>span {
       color: #333;
       font-weight: bold;
   }

   .sale_container>.content>.sale_data>.left>.filter>.Discounted_Price>.inp>input {
       border-radius: 4px;
       border: 1px solid #CCCCCC;
       width: 50px;
       height: 30px;
       margin: 0 6px;
       transition: border-color 0.3s ease;
       outline: none;
   }

   .sale_container>.content>.sale_data>.left>.filter>.Discounted_Price>.inp>button {
       width: 34px;
       height: 30px;
       background: #39C3CB;
       border-radius: 4px;
       font-weight: 600;
       color: #fff;
   }

   .sale_container>.content>.sale_data>.left>.filter>.Discounted_Price>.inp>button:active {
       background-color: #3EB1B7;
   }

   .sale_container>.content>.sale_data>.left>.filter>.Discounted_Price>p {
       margin: 0;
       color: red;
       margin-top: 5px;
   }

   .sale_container>.content>.sale_data>.left>.filter>.Sorting {
       padding: 24px 24px 14px;
   }

   .sale_container>.content>.sale_data>.left>.filter>.Sorting>.Sorting-title {
       font-weight: bold;
       font-size: 14px;
       color: #333333;
       margin-bottom: 18px;
   }

   .Sorting-radio .el-radio {
       margin-bottom: 16px;
       width: 100%;
       display: flex !important;
       white-space: normal;
   }

   .Sorting-radio .is-checked .el-radio__inner {
       background: #39C3CB !important;
       border-color: #39C3CB !important
   }

   .sale_container>.content>.sale_data>.left>.filter>.line {
       height: 1px;
       background: #EEEEEE;
   }

   .sale_container>.content>.sale_data>.right {
       width: 100%;
       padding-bottom: 20px;
       margin-left: 22px;
   }

   .sale_container>.content>.sale_data>.right>.box {
       display: flex;
       flex-wrap: wrap;
       gap: 15px;
   }

   .sale_container>.content>.sale_data>.right>.box>li:hover {
       transform: translateY(-5px);

       transform: scale(1.04);
   }

   .sale_container>.content>.sale_data>.right>.box>li {
       position: relative;
       width: 210px;
       overflow: hidden;
       padding-bottom: 10px;
       cursor: pointer;
       transition: all 0.3s ease;
   }

   .sale_container>.content>.sale_data>.right>.box>li>.box-img {
       display: flex;
       justify-content: center;
       align-items: center;
       height: 220px;
       background-color: #fff;
       border-radius: 7px;
       overflow: hidden;
   }

   .sale_container>.content>.sale_data>.right>.box>li>.box-img>img {
       max-width: 100%;
       max-height: 100%;
       object-fit: cover;
       transition: opacity 0.5s ease;
   }

   /* 占位图样式 */
   .placeholder {
       opacity: 1;
       transition: opacity 0.5s ease;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
   }

   /* 加载完成后的样式 */
   .loaded {
       opacity: 1 !important;
   }

   .sale_container>.content>.sale_data>.right>.box>li>.content-text {
       margin-top: 13px;
       padding: 0 8px;
   }

   .sale_container>.content>.sale_data>.right>.box>li>.verified {
       width: 77px;
       height: 24px;
       background: rgba(0, 0, 0, 0.6);
       border-radius: 12px;
       line-height: 24px;
       text-align: center;
       color: #fff;
       position: absolute;
       left: 5px;
       top: 5px;
       display: flex;
       align-items: center;
   }

   .sale_container>.content>.sale_data>.right>.box>li>.verified>.voucher_verify_status_img {
       position: unset;
       margin-right: 2px;
   }

   .content-activity-outer {
       padding: 0 5px;
       border-radius: 3px;
       position: absolute;
       top: 200px;
       left: 4px;
       font-size: 12px;
   }

   .content-text-group {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-top: 5px;
   }

   .content-text-group .left {
       display: flex;
       align-items: center;
   }

   .content-text-group .comment-group {
       color: #7B7B7B;
       font-size: 12px;
       display: flex;
       align-items: flex-start;
       line-height: 12px;
   }

   .content-text-group .div1 {
       color: #E54344;
       font-size: 12px;
   }

   .content-text-group .div2 {
       background-color: #E6E6E6;
       height: 12px;
       width: 2px;
       margin: 0 5px;
   }

   .content-text-group .comment-group .thumb-group-icon {
       display: inline-block;
       width: 10px;
       height: 10px;
       margin-right: 3px;
       background: url('https://vipon.s3.amazonaws.com/img/583044a87d393380ad40c1d56680899ca5ec2c2e107c09.png') -236px -195px no-repeat;
   }

   .content-text-group .comment-group {
       color: #7B7B7B;
       font-size: 12px;
       line-height: 12px;
   }

   .box .content-text-price {
       margin: 4px 0;
   }

   .content-text-price .discound-price {
       font-weight: bold;
       font-size: 16px;
       color: #333333;
   }

   .content-text-price .price {
       font-size: 12px;
       color: #999999;
   }

   .content-text-artname {
       display: -webkit-box;
       /* 创建伸缩盒子模型 */
       -webkit-box-orient: vertical;
       /* 垂直排列子元素 */
       -webkit-line-clamp: 2;
       /* 显示两行 */
       overflow: hidden;
       /* 超出隐藏 */
       text-overflow: ellipsis;
       /* 省略号 */
       font-size: 14px;
       color: #333;
       width: 100%;
       white-space: normal;
       /* 允许换行 */
   }

   .content-text-marketingtags span {
       font-weight: bold;
       font-size: 12px;
       color: #333333;
   }

   .content-text-marketingtags img {
       width: 12px;
   }

   .content-text-fba {
       font-size: 12px;
       color: #999999;
       margin: 4px 0;
   }

   .content-text-timetags {
       font-size: 12px;
       color: #E55F25;
   }

   .box .favorites {
       width: 24px;
       height: 24px;
       border-radius: 50px;
       background-color: #fff;

       border: none;
       position: absolute;
       right: 3px;
       top: 3px;
       display: flex;
       justify-content: center;
       align-items: center;
   }

   /* 按钮选中 */
   .selected {
       background: #DFF5F6 !important;
       color: #39C3CB !important;
   }

   .input-error {
       border: 1px solid red !important;
   }

   /* 组件库样式 */
   .el-checkbox__input.is-checked+.el-checkbox__label {
       color: #333 !important
   }

   .el-checkbox__label,
   .el-radio__label {
       color: #333
   }

   .el-radio__input.is-checked+.el-radio__label {
       color: #333 !important
   }

   .el-slider__bar {
       background-color: #39C3CB !important
   }

   .el-slider__button {
       border: 2px solid #39C3CB !important;
   }

   .el-empty {
       position: relative;
       left: -100px;
   }

   .is-checked>.el-checkbox__inner {
       background-color: #39C3CB !important;
       border-color: #39C3CB !important;
   }

   .el-checkbox__inner:hover {
       border: 1px solid #39C3CB !important;
   }

   .el-checkbox__input.is-focus .el-checkbox__inner {
       border-color: #39C3CB !important;
   }

   .wish-list {
       width: 381px;
       height: 44px;
       border-radius: 4px;
       border: 1px solid #39C3CB;
       background: linear-gradient(to bottom, #E8FCFE, #FFFFFF);
       justify-content: center;
       align-items: center;
       cursor: pointer;
       margin: 0 auto;
       position: fixed;
       left: 50%;
       transform: translate(-50%, 20px);
       bottom: 20px;
       opacity: 0;
       display: none;
       z-index: 1000;
   }

   .wish-list>span {
       color: #39C3CB;
       margin-left: 8px;
   }

   .wish-list-enter {
       animation: slideUp 0.5s ease-out forwards;
   }

   .wish-list-leave {
       animation: slideDown 0.5s ease-in forwards;
   }

   @keyframes slideUp {
       from {
           opacity: 0;
           transform: translate(-50%, 20px);
       }

       to {
           opacity: 1;
           transform: translate(-50%, 0);
       }
   }

   @keyframes slideDown {
       from {
           opacity: 1;
           transform: translate(-50%, 0);
       }

       to {
           opacity: 0;
           transform: translate(-50%, 20px);
       }
   }

   .newmodal {
       display: none;
       position: fixed;
       z-index: 9999;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.5);
   }

   #wishModal>.modal-content {
       background-color: #fff;
       margin: 10% auto;
       width: 525px;
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
   }

   #wishModal>.modal-content>h2 {
       color: #000000;
       padding: 15px 20px;
       border-bottom: 1px solid #BDBDBD;
       font-size: 14px;
       margin: 0;
   }

   #wishModal>.modal-content>.modal-body {
       padding: 0 30px;
   }

   #wishModal>.modal-content>.modal-body>.p1 {
       color: #999999;
       margin: 12px 0 23px;
   }

   #wishModal>.modal-content>.modal-body>.p2 {
       color: #333333;
   }

   #wishModal>.modal-content>.modal-body>textarea {
       resize: none;
       height: 110px;
   }

   #wishModal>.modal-content>.modal-body>textarea::placeholder {
       font-size: 12px;
       color: #BDBDBD;
   }

   #wishModal>.modal-content>.modal-body>button {
       width: 149px;
       height: 32px;
       background: #3FD6DD;
       font-size: 14px;
       color: #FFFFFF;
       border: none;
       margin: 22px auto 10px;
       display: block;
   }

   #wishModal>.modal-content>.modal-body>button:disabled {
       background-color: #AEEDEE;
   }

   #wishModal>.modal-content>.modal-body>.checkbox-wrapper {
       font-size: 12px;
       color: #666666;
       display: flex;
       justify-content: center;
       align-items: center;
       margin-bottom: 25px;
   }

   #wishModal>.modal-content>.modal-body>.checkbox-wrapper input[type="checkbox"] {
       position: relative;
       top: 3px;
       width: 16px;
       height: 16px;
       border: 1px solid #ccc;
       border-radius: 4px;
       appearance: none;
       background-color: #fff;
       cursor: pointer;
       outline: none
   }

   #wishModal>.modal-content>.modal-body>.checkbox-wrapper input[type='checkbox']:checked::after {
       content: '';
       position: absolute;
       left: 5px;
       top: 2px;
       width: 4px;
       height: 8px;
       border: solid #3FD6DD;
       border-width: 0 2px 2px 0;
       transform: rotate(45deg);
   }

   #wishModal .newmodal_close {
       float: right;
       font-size: 24px;
       cursor: pointer;
       color: #000;
       margin: 5px 20px;
   }


   #wishRequestModal>.modal-content {
       background-color: #fff;
       margin: 15% auto;
       width: 520px;
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
       padding: 46px 0;
   }

   #wishRequestModal>.modal-content img {
       display: block;
       margin: 0 auto;
       width: 80px;
   }

   #wishRequestModal>.modal-content h2 {
       margin: 20px 0;
       font-size: 20px;
       color: #333333;
       text-align: center;
       font-weight: 600;
   }

   #wishRequestModal>.modal-content .p1 {
       font-size: 14px;
       color: #999999;
       text-align: center;
       margin-bottom: 22px;
   }

   #wishRequestModal>.modal-content button {
       width: 176px;
       height: 32px;
       background: #39C3CB;
       color: #FFFFFF;
       border: none;
       display: block;
       margin: 0 auto;
   }