body,
    html {
        background: #faf3ed;
    }

    .banner {
        width: 100%;
        height: 4rem;
        margin-top: 0.8rem;
    }


    .banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;

    }

    .nav_box {
        width: 73%;
        margin: 0 auto;
        height: 0.9rem;
        background: #fff;
        position: relative;
        top: -0.9rem;
    }

    .nav_box .nav_list {
        display: flex;
        height: 100%;
    }

    .nav_box .nav_list .nav_item {
        width: 2rem;
        height: 100%;
        line-height: 0.9rem;
        color: #000;
        font-size: 0.24rem;
        text-align: center;
        font-weight: bold;
        cursor: pointer;
    }

    .nav_box .nav_list .active {
        color: #fff;
        background: linear-gradient(to right, #e92b32, #fe5838);
    }

    .nav {
        width: 73%;
        height: 100%;
        line-height: 0.8rem;
        border-left: 12px solid #e92b32;

    }

    .nav>div {
        color: #666666;
        font-size: 14px;
        margin-left: 0.3rem;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .nav>div a {
        color: #666666;
        font-size: 14px;
    }

    .nav>div a:last-child {
        color: #cc0000;
    }

    .detail {
        width: 73%;
        margin: 0 auto;
        margin-top: -0.5rem;
    }

    .detail .content .title {
        font-size: 0.3rem;
        font-weight: bold;
        text-align: center;
    }

    .detail .content {
        margin-top: 0.4rem;
        display: flex;
        justify-content: space-between;

    }

    .detail .content>.left {
        width: 79%;
        background: #fff;
        padding: 0.6rem 0.48rem 0.48rem 0.48rem;
        box-sizing: border-box;

    }

    .detail .content>.left .top {
        width: 100%;
        height: 7rem;
    }
    .detail .content>.left .desc{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top:0.32rem;
        font-size: 14px;
        color:#999999;
    }
    .detail .content>.left .desc .date{
        margin-right:0.4rem;
    }
    .detail .content>.left .article{
        border-top:1px solid #bababa;
        border-bottom:1px solid #bababa;
        padding-top:0.3rem;
        margin-top:0.3rem;

    }
    .detail .content>.left .article p{
        margin-bottom:0.3rem;
        font-size: 0.18rem;
        line-height: 0.5rem;
        color:#333333;
        text-indent: 2em;
    }
    .detail .content>.left .keyword{
        margin-top:0.3rem;
        font-size: 14px;
        padding-bottom:0.3rem;
        border-bottom:1px solid #bababa;
    
    }
    .detail .content>.left .other{
        display: flex;
        margin-top:0.3rem;
        cursor: pointer;
    }
    .detail .content>.left .other .last{
        margin-right:0.5rem;
        height:16px;
        display: flex;
    }
    .detail .content>.left .other .next{
        height:16px;
        display: flex;
    }
    .detail .content>.left .other>a span:nth-child(1){
        font-size: 16px;
        font-weight: bold;
        color:#000;
    }
    .detail .content>.left .other>a span:nth-child(2){
        font-size: 16px;
        width:4rem;
        font-weight: bold;
        color:#9f4343;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        display: box;
        text-overflow: ellipsis;
        overflow: hidden;

    }

    .detail .content>.right {
        width: 20%;
        height: 100%;
        background: #fff;
        padding: 0.3rem 0.2rem 0.3rem 0.2rem;
        box-sizing: border-box;
        position: relative;
    }

    .detail .content>.right .border {
        width: 100%;
        height: 8px;
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(to right, #e92b32, #fe5838);

    }


    .detail .content .left .bottom .swiper-slide img:hover {
        border: 2px solid #e61e28;
    }

    .detail .content .left .bottom .active img {
        border: 2px solid #e61e28;
    }


    .detail .content .right .desc {
        margin-top: 0.5rem;
    }

    .detail .content .right .desc .item {
        display: flex;
        margin-bottom: 0.1rem;
    }

    .detail .content .right .desc .item span:nth-child(1) {
        white-space: nowrap;
        font-size: 0.16rem;
        font-weight: bold;
        line-height: 0.3rem;

    }

    .detail .content .right .desc .item span:nth-child(2) {
        font-size: 0.16rem;
        line-height: 0.3rem;
    }

    .detail .content .right .line {
        width: 100%;
        height: 1px;
        background: #e6e6e6;
        margin-top: 0.6rem;
        margin-bottom: 0.3rem;
    }

    .detail .content .right .case .title {
        font-size: 0.24rem;
        font-weight: bold;
    }

    .detail .content .right .case .case_box {
        margin-top: 0.2rem;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .detail .content .right .case .case_box .case_item {
        overflow: hidden;
        cursor: pointer;
        border-bottom: 1px solid #e6e6e6;
        padding-bottom: 0.2rem;
        margin-bottom: 0.2rem;

    }

    .detail .content .right .case .case_box .case_item img {
        width: 100%;
        height: 1.12rem;
    }

    .detail .content .right .case .case_box .case_item .title {
        font-size: 0.14rem;
        color:#000;
        font-weight: bold;
        margin-top: 0.2rem;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        display: box;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: left;
    }

    .detail .content .right .case .case_box .case_item .date {
        font-size: 0.12rem;
        margin-top: 0.16rem;
        color: #bababa;
    }

    .popular_recommend {
        width: 73%;
        margin: 0 auto;
        margin-top: 0.7rem;
        padding-bottom: 1rem;
        box-sizing: border-box;
    }

    .popular_recommend>.title {
        color: #330000;
        font-size: 0.3rem;
    }

    .popular_box {
        margin-top: 0.4rem;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }

    .popular_box .item {
        height: 2.6rem;
        overflow: hidden;
        cursor: pointer;
    }

    .popular_box .item img {
        width: 100%;
        height: 2.24rem;
        object-fit: cover;
    }

    .popular_box .item .title {
        text-align: center;
        font-size: 0.16rem;
        margin-top: 0.15rem;
        color:#000;
    }