.hot-products {
    padding: 100px 0;
    background: url(https://okki-shop.oss-cn-hangzhou.aliyuncs.com/386/upload/news/128693f3ebc485984eb73e4a7705a631dde7549242225ab2acb716b64a0174a5.jpg) no-repeat center top;
    position: relative
}

.hot-products::before {
    content: "";
    background: url(../../images/ibg2.png) no-repeat;
    position: absolute;
    right: 0;
    top: 0;
    width: 320px;
    height: 334px;
    background-size: 320px 334px
}

.hot-products::after {
    content: "";
    background: url(../../images/ibg3.png) no-repeat;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 320px;
    height: 328px;
    background-size: 320px 328px
}

.hot-products .tit {
    text-align: center;
    position: relative;
    z-index: 20
}

.hot-products .tit h2 {
    font-size:clamp(24px, 3.75vw, 70px);
    line-height: 1;
    font-weight:700;
    color: #000;
    text-transform: uppercase
}

.hot-products .tit h3 span {
    color: var(--color-primary)
}

.hot-products .tit p {
    font-size: 20px;
    color: #373737;
    max-width: 1400px;
    margin: 25px auto 0;
    line-height: 1.5;
}

.hot-products .tit .more {
    margin: 40px auto 0;
    width: 200px;
    height: 50px;
    line-height: 50px;
    background: var(--btn-bg);
    display: block;
    text-align: center;
    font-size: 18px;
    color: #fff
}

.hot-products .tit .more:hover {
    background: var(--btn-bg-hover)
}

.hot-products .list {
    position: relative;
    z-index: 20;
    margin: 70px 0 0
}

.hot-products .swiper-slide {
    padding: 30px 0 44px;
    position: relative
}

.hot-products .swiper-slide .box {
    padding: 0 26px 50px;
    position: relative;
    z-index: 20
}

.hot-products .swiper-slide .box::after {
    content: "";
    background: #1C1C1D;
    position: absolute;
    right: 0;
    left: 0;
    top: 30px;
    width: 100%;
    height: calc(100% - 30px);
    z-index: -1
}

.hot-products .swiper-slide .pic {
    margin-top: -30px;
    width: 100%;
    overflow: hidden;padding:40px;
    background: #fff;
    display: inline-flex;
    justify-content: center;
    align-items: center
}

.hot-products .swiper-slide .pic img {
    display: block;
    transition: all 0.5s ease 0s;
    max-width:100%;}

.hot-products .swiper-slide h6 {
    margin: 10px 0 0;
    font-size: 19px;
    color: #fff;
    text-align: center;
    font-weight: 300;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center
}

.hot-products .swiper-slide .more {
    position: absolute;
    left: calc(50% - 44px);
    bottom: -44px;
    width: 88px;
    height: 88px;
    line-height: 88px;
    background: var(--color-primary);
    border-radius: 50%;
    display: block;
    text-align: center;
    font-size: 18px;
    color: #fff
}

.hot-products .swiper-slide .more i {
    color: #fff;
    font-size: 30px
}

.hot-products .swiper-slide .more:hover {
    background: var(--color-primary)
}

.hot-products .swiper-slide:hover .pic img {
    transform: scale(1.04);
    -webkit-transform: scale(1.04)
}

.hot-products .swiper-pagination-bullets.swiper-pagination-horizontal{
    position: relative;
    width: 80%;
    height: 8px;bottom:auto;
    margin: 120px auto 0
}

.hot-products .swiper-pagination-bullets.swiper-pagination-horizontal::after {
    width: 100%;
    content: "";
    height: 2px;
    background: #aaa;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 3px
}

.hot-products .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet {
    height: 8px;
    width:150px;
    margin: 0;
    background: transparent;
    border-radius: 0;
    opacity: 1;
    vertical-align: top;
    position: relative;
    z-index: 20
}

.hot-products .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active {
    background: var(--color-primary)
}

@media screen and (max-width: 1550px) {
.hot-products{padding:80px 0;}
}
 
@media screen and (max-width:1441px) {
.hot-products{padding:70px 0;}
.hot-products .tit p{font-size:18px;} 
.hot-products .swiper-slide .pic{padding:35px;}
.hot-products .swiper-slide h6{font-size:18px;}
.hot-products .swiper-slide .more{left:calc(50% - 35px);bottom:-35px;width:70px;height:70px;line-height:70px;}
.hot-products .swiper-pagination-bullets.swiper-pagination-horizontal{margin:80px auto 0;}
.hot-products .tit .more{margin:30px auto 0;width:160px;height:40px;line-height:40px;font-size:16px;}
.hot-products .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet{width:120px;}
}
 
@media screen and (max-width:1280px) {
.hot-products{padding:60px 0;}
.hot-products .tit p{font-size:17px;} 
.hot-products .list{margin:50px 0 0;}
.hot-products .swiper-slide .pic{padding:30px;}
.hot-products .swiper-slide h6{font-size:17px;}  
.hot-products .swiper-slide .more{left:calc(50% - 30px);bottom:-30px;width:60px;height:60px;line-height:60px;}
.hot-products .swiper-pagination-bullets.swiper-pagination-horizontal{width:100%;margin:60px auto 0;}
.hot-products .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet{width:80px;}
} 
 
@media screen and (max-width: 1150px) {
    .hot-products .swiper-slide h6 {
        font-size:17px
    }
}

@media screen and (max-width:992px){
.hot-products .swiper-slide .box{padding:0 20px 15px;}
.hot-products .swiper-slide .more{display:none;}
.hot-products .swiper-slide h6{height:50px;}
.hot-products .swiper-pagination-bullets.swiper-pagination-horizontal{margin:40px auto 0;}
}



@media screen and (max-width: 768px) {
    .hot-products {
        padding:30px 0
    }

    .hot-products::before {
        width: 200px;
        height: 209px;
        background-size: 200px 209px
    }

    .hot-products::after {
        width: 200px;
        height: 205px;
        background-size: 200px 205px
    }

    .hot-products .tit p {
        font-size: 16px;
        margin: 15px auto 0
    }

    .hot-products .tit .more {
        margin: 20px auto 0;
        width: 170px;
        height: 40px;
        line-height: 40px;
        font-size: 16px
    }

    .hot-products .list {
        margin: 30px 0 0
    }

    .hot-products .swiper-slide {
        padding: 0
    }

    .hot-products .swiper-slide .box {
        padding: 0;
        position: relative;
        z-index: 20
    }

    .hot-products .swiper-slide .box::after {
        display: none
    }

    .hot-products .swiper-slide .pic {
        margin-top: 0
    }

    .hot-products .swiper-slide h6 {
        margin:15px 0 0;
        font-size:16px;
        color: #333;
        height:auto
    }

    .hot-products .swiper-slide h6 a {
        line-height: 22px
    }

 .hot-products .swiper-pagination-bullets.swiper-pagination-horizontal{margin:30px auto 0}

.hot-products .swiper-pagination-bullets.swiper-pagination-horizontal::after{display:none}
  
  

.hot-products .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet {
        height: 8px;
        width: 20px;
        margin: 0 3px;
        background: #ccc
    }

.hot-products .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active {
        background: var(--color-primary)
    }
}

@media screen and (max-width: 560px) {

}

@media screen and (max-width: 480px) {
.hot-products .tit p{font-size:15px;}
.hot-products .tit .more{width:130px;height:35px;line-height:35px;font-size:14px;}
.hot-products .swiper-slide h6 a{line-height:18px}
}