@font-face {
    font-family: 'PoppinsRegular';
    src: url('Poppins-Regular.ttf');
}

@font-face {
    font-family: 'PoppinsBold';
    src: url('Poppins-Bold.ttf');
}

.fReg {
    font-family: 'PoppinsRegular';
}

.fBold {
    font-family: 'PoppinsBold';
}

.fui {
    font-family: 'Microsoft YaHei, 微软雅黑';
}

.addtran {
    transition: .65s cubic-bezier(.4, 0, 0, 1);
}

.addborder {
    border-radius: 2.8rem 3rem 0 2.8rem;
}



.active1 {
    border-radius: 2.8rem 3rem 0 2.8rem;
    background: #f08200;
}

.active2{background: #fff;border-color:#F18101;color:#F18101;border-left: none;border-right: none;border-bottom: none;}

.active3::after{content: '';position: absolute;width: 100%;height: 2px;background: #F18101;top:0;left: 0;}

.addcss1::before{content: '';position: absolute;width: 1px;height: 40%;background: #DDDDDD;top:30%;right: 0;}

@media (width < 800px) {
    .addcss1::before{display: none;}
}

.active4{background: #F18101;color:#fff;}

.active5{background: #F18101;color:#fff;}

/* 搜索框隐藏样式 */
.search-hidden {
    display: none;
}

/* 波纹效果样式 */
.ripple-btn {
    position: relative;
    overflow: hidden;
}

.ripple-btn .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple-animation 1s ease-out;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}



/* 文字渐变样式 */
.text-gradient {
    background: linear-gradient(to right, #F18101, #E34601);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient1 {
    background: linear-gradient(to right, #FF9822, #F15000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.changeimg:hover {
    filter: brightness(0) saturate(100%) invert(51%) sepia(99%) saturate(2244%) hue-rotate(1deg) brightness(101%) contrast(101%);
}

.changeimg1 {
    filter: brightness(0) saturate(100%) invert(10%) sepia(20%) saturate(1000%) hue-rotate(200deg) brightness(90%) contrast(90%);
}

.changeimg2 {
   filter: brightness(0) saturate(100%) invert(51%) sepia(99%) saturate(2244%) hue-rotate(1deg) brightness(101%) contrast(101%);
}

.changeimg3:hover img{
    filter: brightness(0) saturate(100%) invert(100%);
}

.fqoption {
  transition: all 0.3s;
}

.hover-color-orange:hover .hover-color-orange-img{
    filter: brightness(0) saturate(100%) hue-rotate(15deg) brightness(1.2);
}

.accordion-expanded>div{color:#F18101}
.accordion-expanded>img {
    filter: brightness(0) saturate(100%) invert(51%) sepia(99%) saturate(2244%) hue-rotate(1deg) brightness(101%) contrast(101%);
}

#productThumbSwiper .active{border-color:#F18101;}

.pagination {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.pagination,
.pagination li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.pagination li {
    width: 40px;
    height: 40px;
    background: #F0F1F3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin: 0 3px 6px
}

.pagination li a,
.pagination li span {
    color: #666;
    font-size: 16px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination .active {
    background: #F18101;
    color: #fff
}

.pagination .active a,
.pagination .active span {
    color: #fff
}

figure{
    width:unset !important;
}

.img-box img{object-fit: scale-down !important;}