div,p,span{
    position: relative;
}
.posa{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
.fill{width: 100%;height: 100%;}
.hide{display: none;}

.web_banner {display: block;}
.mobile_banner {display: none;}
.bannerBox{width: 100%;}
.store_img img{width: 100%;}
.line1{
    overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line4{
    overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.blogStoryBtn{
    width: 101px;
    height: 65px;
    /* background: linear-gradient(-30deg, #d1b365, #c79b58); */
    background-image: url(../img/blogStory/pc/r_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    /* border-radius: 10px 0px 0px 10px; */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: fixed;
    right: 0;
    top: calc(50% - 75px);
    cursor: pointer;
    z-index: 1000;
}
.blogStoryBtn img{
    width: 37px;
    height: 28px;
    margin-top: 6px;
}
.blogStoryBtn p{
    width: 100%;
    font-weight: bold;
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;
}

.xiaomiCase div{box-sizing: border-box;}
.xiaomiCase{width: 100%;height: 100%;z-index: 9999;position: fixed;left: 0;top: 0;background: rgba(0, 0, 0, 0.7);}
.xiaomiCase .cont{width: 1297px;height: 833px;background-color: #fff;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.xiaomiCase .cont .title{width: 1080px;margin: 44px auto 0;display: flex;align-items: center;font-weight: 800;font-size: 22px;color: #000000;}
.xiaomiCase .cont .title img{width: 168px;height: 21px;font-weight: 800;font-size: 22px;color: #000000;margin-right: 16px;}
.xiaomiCase .cont .closeCase{width: 50px;height: 50px;position: absolute;right: -25px;top: -20px;cursor: pointer;transition: 0.3s all;}
/* .xiaomiCase .cont .closeCase:hover{transform: rotate(180deg);} */
.xiaomiCase .cont .tabs{display: flex;padding: 40px 0 0 0;margin-left: 10px;}
.xiaomiCase .cont .tabs .tab{width: 147px;cursor: pointer;padding-bottom: 20px;margin: 0 0 -2px 0;}
.xiaomiCase .cont .tabs .tab::after{content: '';width: 0;height: 2px;background: #FFB400; position: absolute;left: 50%;bottom: 0;transform: translateX(-50%); transition: 0.3s all;}
.xiaomiCase .cont .tabs .tab:hover::after{width: 74px;}
.xiaomiCase .cont .tabs .tab:nth-child(n+2) p::after{content: '';width: 1px;height: 17px; position: absolute;left: 0;top: 50%;transform: translateY(-50%);background: #EAEAEA;}
.xiaomiCase .cont .tabs .tab img{width: 100%;height: 100%;}
.xiaomiCase .cont .tabs .tab p{width: 100%;font-size: 22px;color: #000000;transition: 0.3s all;text-align: center;}
.xiaomiCase .cont .tabs .tab.tabAct p{font-weight: 800;color: #CC9933;}
.xiaomiCase .cont .tabs .line{width:74px;height: 2px;background: #FFB400;position: absolute;left: 36.5px;bottom: -2px;transition: 0.3s all;}
.xiaomiCase .cont .caseList{width: 1205px;height: calc(100% - 238px);margin: 20px auto 0;display: flex;flex-wrap: wrap;}
.xiaomiCase .cont .caseList .caseItem{width: 220px;height: 285px;cursor: pointer;padding-top: 1px;position: relative;}
.xiaomiCase .cont .caseList .caseItem a{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
.xiaomiCase .cont .caseList .caseItem:nth-child(5n+2),.xiaomiCase .cont .caseList .caseItem:nth-child(5n+3),.xiaomiCase .cont .caseList .caseItem:nth-child(5n+4),.xiaomiCase .cont .caseList .caseItem:nth-child(5n+5){
    margin-left: 22px;
}
.xiaomiCase .cont .caseList .caseItem:nth-child(n+6){margin-top: 22px;}
.xiaomiCase .cont .caseList .caseItem .caseImg{width: 220px;height: 285px;overflow: hidden;border: 2px solid #fff;transition: 0.3s all;}
.xiaomiCase .cont .caseList .caseItem .caseImg img{object-fit: cover;}
.xiaomiCase .cont .caseList .caseItem .caseImg video{object-fit: cover;}
.xiaomiCase .cont .caseList .caseItem .caseImg .botmInfo{position: absolute;left: 0;bottom: 0;padding: 105px 18px 18px 18px;background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);}
.xiaomiCase .cont .caseList .caseItem .caseImg .botmInfo .userInfo{display: flex;align-items: center;}
.xiaomiCase .cont .caseList .caseItem .caseImg .botmInfo .userInfo .head{width: 32px;height: 32px;border-radius: 50%;overflow: hidden;border: 1px solid rgba(255,255,255,0);transition: 0.3s all;}
.xiaomiCase .cont .caseList .caseItem .caseImg .botmInfo .userInfo .name{width: 130px;font-weight: bold;font-size: 16px;color: #FFFFFF;margin-left: 6px;transition: 0.3s all;}
.xiaomiCase .cont .caseList .caseItem .caseImg .botmInfo .userInfo .arrow{width: 8px;height: 14px;margin-left: 4px;}
.xiaomiCase .cont .caseList .caseItem .caseImg .botmInfo .userInfo .arrow img:nth-child(2){opacity: 0;}
.xiaomiCase .cont .caseList .caseItem .caseImg .botmInfo .userInfo .arrow img{transition: 0.3s all;}
.xiaomiCase .cont .caseList .caseItem .caseImg .botmInfo .text{width: 100%;font-weight: 400;font-size: 14px;color: #FFFFFF;line-height: 22px;padding-top: 6px;transition: 0.3s all;}

.xiaomiCase .cont .caseList .caseItem:hover .caseImg{border: 2px solid #CC9933;}
.xiaomiCase .cont .caseList .caseItem:hover .caseImg .botmInfo .userInfo .head{border: 1px solid #CC9933;}
.xiaomiCase .cont .caseList .caseItem:hover .caseImg .botmInfo .userInfo .name{color: #CC9933;}
.xiaomiCase .cont .caseList .caseItem:hover .caseImg .botmInfo .userInfo .arrow img:nth-child(1){opacity: 0;}
.xiaomiCase .cont .caseList .caseItem:hover .caseImg .botmInfo .userInfo .arrow img:nth-child(2){opacity: 1;}
.xiaomiCase .cont .caseList .caseItem:hover .caseImg .botmInfo .text{color: #CC9933;}
#pagination{display: flex;justify-content: center;margin-top: 33px;}

#pagination.light-theme ul li a,#pagination.light-theme ul li span{transition: 0.3s all;}
#pagination.light-theme ul li a.page-link{width: 57px;height: 57px;background: #FFFFFF;border: 2px solid #DFDFDF;font-weight: bold;font-size: 18px;color: #000000;text-align: center;line-height: 53px;text-decoration: none;}
#pagination.light-theme ul li.active span.current{width: 57px;height: 57px;background: #CC9933;border: 2px solid #CC9933;font-weight: bold;font-size: 18px;color: #fff;text-align: center;line-height: 53px;}
#pagination.light-theme ul li span.ellipse.clickable{width: 57px;height: 57px;font-weight: bold;font-size: 30px;color: #000;text-align: center;line-height: 53px;text-decoration: none;}

#pagination.light-theme ul li a.page-link.prev,#pagination.light-theme ul li a.page-link.next{width: 133px;height: 57px;background: #FFFFFF;border: 2px solid #DFDFDF;font-weight: bold;font-size: 18px;color: #000000;text-align: center;line-height: 53px;text-decoration: none;}

#pagination.light-theme ul li.disabled span.prev,#pagination.light-theme ul li.disabled span.next{width: 133px;height: 57px;background: #FFFFFF;border: 2px solid #DFDFDF;opacity: 0.3;font-weight: bold;font-size: 18px;color: rgba(0, 0, 0, 6);text-align: center;line-height: 53px;text-decoration: none;}








@media (max-width:992px){
    /* phone */
    .web_banner {display: none;}
    .mobile_banner {display: block;}

    .blogStoryBtn{
        width: 1.01rem;
        height: 0.65rem;
        /* background: linear-gradient(to top, rgba(214,203,145,1), rgba(199,155,88,1)); */
        background-image: url(../img/blogStory/pc/r_bg.png);
        background-size: cover;
        background-repeat: no-repeat;
        /* border-radius: 0.1rem 0rem 0rem 0.1rem; */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        position: fixed;
        right: 0;
        top: auto;
        bottom: calc(16% + 2.5rem);
        cursor: pointer;
        z-index: 1000;
    }
    .blogStoryBtn img{
        width: 0.37rem;
        height: 0.28rem;
        margin-top: 0.06rem;
    }
    .blogStoryBtn p{
        width: 100%;
        font-weight: bold;
        font-size: 0.16rem;
        color: #FFFFFF;
        text-align: center;
    }

    .xiaomiCase{width: 100%;height: 100%;z-index: 9999;position: fixed;left: 0;top: 0;background: rgba(0, 0, 0, 0.7);}
    .xiaomiCase .cont{width: 100%;height: 100%;background-color: #fff;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);padding-top: 0.71rem;}
    .xiaomiCase .cont .closeCase{width: 0.5rem;height: 0.5rem;position: absolute;right: 0.32rem;top: 1rem;cursor: pointer;transition: 0.3s all;z-index: 1;}
    /* .xiaomiCase .cont .closeCase:hover{transform: rotate(180deg);} */
    .xiaomiCase .cont .tabs{display: flex;padding: 0.38rem 0 0 0;margin-left: 0.1rem;}
    .xiaomiCase .cont .tabs .tab{width: 1.47rem;cursor: pointer;padding-bottom: 0.2rem;margin-bottom: -0.02rem;}
    .xiaomiCase .cont .tabs .tab::after{content: '';width: 0;height: 0.02rem;background: #FFB400; position: absolute;left: 50%;bottom: 0;transform: translateX(-50%); transition: 0.3s all;}
    .xiaomiCase .cont .tabs .tab:hover::after{width: 0.74rem;}
    .xiaomiCase .cont .tabs .tab:nth-child(n+2) p::after{content: '';width: 0.01rem;height: 0.17rem; position: absolute;left: 0;top: 50%;transform: translateY(-50%);background: #EAEAEA;}
    .xiaomiCase .cont .tabs .tab img{width: 100%;height: 100%;}
    .xiaomiCase .cont .tabs .tab p{width: 100%;font-size: 0.3rem;color: #000000;transition: 0.3s all;text-align: center;}
    .xiaomiCase .cont .tabs .tab.tabAct p{font-weight: 800;color: #CC9933;}
    .xiaomiCase .cont .tabs .line{width:0.74rem;height: 0.02rem;background: #FFB400;position: absolute;left: 0.365rem;bottom: -0.02rem;transition: 0.3s all;}
    .xiaomiCase .cont .caseList{width: 6.7rem;height: calc(100% - 2rem);overflow-y: auto;margin: 0.38rem auto 0;display: flex;flex-wrap: wrap;}
    .xiaomiCase .cont .caseList .caseItem{width: 3.17rem;height: 4.13rem;cursor: pointer;padding-top: 0.01rem;}
    .xiaomiCase .cont .caseList .caseItem:nth-child(5n+2),.xiaomiCase .cont .caseList .caseItem:nth-child(5n+3),.xiaomiCase .cont .caseList .caseItem:nth-child(5n+4),.xiaomiCase .cont .caseList .caseItem:nth-child(5n+5){
        margin-left: 0;
    }
    .xiaomiCase .cont .caseList .caseItem:nth-child(2n+2){
        margin-left:0.33rem;
    }
    .xiaomiCase .cont .caseList .caseItem:nth-child(n+3){margin-top: 0.3rem;}
    .xiaomiCase .cont .caseList .caseItem .caseImg{width: 100%;height: 100%;overflow: hidden;border: 0.02rem solid #fff;transition: 0.3s all;}
    .xiaomiCase .cont .caseList .caseItem .caseImg img{object-fit: cover;}
    .xiaomiCase .cont .caseList .caseItem .caseImg video{object-fit: cover;}
    .xiaomiCase .cont .caseList .caseItem .caseImg .botmInfo{position: absolute;left: 0;bottom: 0;padding: 1.62rem 0.27rem 0.22rem 0.27rem;background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);}
    .xiaomiCase .cont .caseList .caseItem .caseImg .botmInfo .userInfo{display: flex;align-items: center;}
    .xiaomiCase .cont .caseList .caseItem .caseImg .botmInfo .userInfo .head{width: 0.44rem;height: 0.44rem;border-radius: 50%;overflow: hidden;border: 0.01rem solid rgba(255,255,255,0);transition: 0.3s all;}
    .xiaomiCase .cont .caseList .caseItem .caseImg .botmInfo .userInfo .name{width: 1.8rem;font-weight: bold;font-size: 0.22rem;color: #FFFFFF;margin-left: 0.08rem;transition: 0.3s all;}
    .xiaomiCase .cont .caseList .caseItem .caseImg .botmInfo .userInfo .arrow{width: 0.11rem;height: 0.19rem;margin-left: 0.12rem;}
    .xiaomiCase .cont .caseList .caseItem .caseImg .botmInfo .userInfo .arrow img:nth-child(2){opacity: 0;}
    .xiaomiCase .cont .caseList .caseItem .caseImg .botmInfo .userInfo .arrow img{transition: 0.3s all;}
    .xiaomiCase .cont .caseList .caseItem .caseImg .botmInfo .text{width: 100%;font-weight: 400;font-size: 0.2rem;color: #FFFFFF;line-height: 0.3rem;padding-top: 0.14rem;transition: 0.3s all;}

    .xiaomiCase .cont .caseList .caseItem:hover .caseImg{border: 0.02rem solid #CC9933;}
    .xiaomiCase .cont .caseList .caseItem:hover .caseImg .botmInfo .userInfo .head{border: 0.01rem solid #CC9933;}
    .xiaomiCase .cont .caseList .caseItem:hover .caseImg .botmInfo .userInfo .name{color: #CC9933;}
    .xiaomiCase .cont .caseList .caseItem:hover .caseImg .botmInfo .userInfo .arrow img:nth-child(1){opacity: 0;}
    .xiaomiCase .cont .caseList .caseItem:hover .caseImg .botmInfo .userInfo .arrow img:nth-child(2){opacity: 1;}
    .xiaomiCase .cont .caseList .caseItem:hover .caseImg .botmInfo .text{color: #CC9933;}
    #pagination{display: none;}

    /* #pagination.light-theme ul li a,#pagination.light-theme ul li span{transition: 0.3s all;}
    #pagination.light-theme ul li a.page-link{width: 57px;height: 57px;background: #FFFFFF;border: 2px solid #DFDFDF;font-weight: bold;font-size: 18px;color: #000000;text-align: center;line-height: 53px;}
    #pagination.light-theme ul li.active span.current{width: 57px;height: 57px;background: #CC9933;border: 2px solid #CC9933;font-weight: bold;font-size: 18px;color: #fff;text-align: center;line-height: 53px;}
    #pagination.light-theme ul li span.ellipse.clickable{width: 57px;height: 57px;font-weight: bold;font-size: 30px;color: #000;text-align: center;line-height: 53px;}

    #pagination.light-theme ul li a.page-link.prev,#pagination.light-theme ul li a.page-link.next{width: 133px;height: 57px;background: #FFFFFF;border: 2px solid #DFDFDF;font-weight: bold;font-size: 18px;color: #000000;text-align: center;line-height: 53px;}

    #pagination.light-theme ul li.disabled span.prev,#pagination.light-theme ul li.disabled span.next{width: 133px;height: 57px;background: #FFFFFF;border: 2px solid #DFDFDF;opacity: 0.3;font-weight: bold;font-size: 18px;color: rgba(0, 0, 0, 6);text-align: center;line-height: 53px;} */
}