/* pc 端 媒体查询 */
@media screen and (min-width: 769px){
    body{
        background-color: #fafafa;
    }
    .header .pc-header{
        background-color: #FFF !important;
    }
    .pc-container.common-container{
        position: relative;
        display: flex;
        justify-content: space-between;
        margin: 160px auto 0;
    }
    .pc-container::before{
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0px;
        transform: translateX(100%);
        /* width: 68px; */
        width: calc((100vw - 1376px - 17px) / 2);
        background-color: #fff;
    }
    
    .detail-nav{
        z-index: 1;
        position: fixed;
        top: 100px;
        width: 100%;
        height: 59px;
        line-height: 59px;
        background-color: #fff;
        border-top: 1px solid #efefef;
        border-bottom: 1px solid #efefef;
    }
    .detail-wrap{
        flex: 1;
        padding: 75px 0 75px 0;
    }
    .detail-wrap .title{
        margin-bottom: 60px;
        font-size: 36px;
        font-weight: bold;
        color: #000;
        line-height: 1.6;
    }
    .detail-head{
        display: flex;
        justify-content: space-between;
        padding-bottom: 36px;
        border-bottom: 1px solid #DCDCDC;
        margin-bottom: 60px;
    }
    .detail-head .time{
        font-size: 18px;
        color: #999;
    }
    .detail-head .browse-num{
        font-size: 18px;
        color: #999;
    }
    
    .detail-cont{
        font-size: 18px;
        color: #333;
        line-height: 1.6;
    }
    .detail-cont img{
        width: 100%;
    }
    
    .detail-right{
        flex: 0 0 auto;
        width: 33%;
        background-color: #fff;
        margin-left: 80px;
        padding: 86px 0 0 44px;
    }
    
    .detail-right .new-recom{
        width: 332px;
        /* cursor: pointer; */
    }
    .detail-right .new-recom .lable{
        position: relative;
        font-size: 28px;
        color: #333;
        margin-bottom: 35px;
    }
    .detail-right .new-recom .lable::after{
        content: "";
        width: 4px;
        height: 30px;
        background-color: #BB7A51;
        position: absolute;
        left: -44px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .detail-right .recom-item{
        margin-bottom: 35px;
        padding-bottom: 30px;
        border-bottom: 1px solid #DCDCDC;
        cursor: pointer;
        display: block;
    }
    .detail-right .recom-item:last-child{
        border-bottom: none;
    }
    .detail-right .recom-item .recom-tit{
        width: 332px;
        font-size: 18px;
        color: #333;
        line-height: 30px;
        margin-bottom: 21px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
    }
    .detail-right .recom-item .recom-img{
        width: 332px;
    }
    
    .detail-right .hot-news{
        /* cursor: pointer; */
    }
    .detail-right .hot-news .lable{
        position: relative;
        font-size: 28px;
        color: #333;
        margin-bottom: 35px;
    }
    .detail-right .hot-news .lable::after{
        content: "";
        width: 4px;
        height: 30px;
        background-color: #BB7A51;
        position: absolute;
        left: -44px;
        top: 50%;
        transform: translateY(-50%);
    }
    .detail-right .hot-news .hot-item{
        margin-bottom: 35px;
        padding-bottom: 30px;
        border-bottom: 1px solid #DCDCDC;
        cursor: pointer;
        display: block;
    }
    .detail-right .hot-news .hot-item:last-child{
        border-bottom: none;
    }
    .hot-news .hot-item .hot-tit{
        font-size: 18px;
        color: #333;
        line-height: 30px;
    }
}

/* 移动端 媒体查询 */
@media screen and (max-width:768px){
    body{
        background-color: #FBFAFA;
    }
    .pc-detail{
        display: none;
    }
    .detail-right .pc-recom{
        display: none;
    }
    .phone-container{
        
    }
    .phone-container .detail-wrap{
        flex: 1;
        padding: .8rem /* 30px -> .8rem */ .533rem /* 20px -> .533rem */;
    }
    .phone-container .detail-wrap .title{
        margin-bottom: .8rem /* 30px -> .8rem */;
        font-size: .48rem /* 18px -> .48rem */;
        font-weight: bold;
        color: #000;
        line-height: 1.6;
    }
    .phone-container .detail-head{
        display: flex;
        justify-content: space-between;
        padding-bottom: .56rem /* 21px -> .56rem */;
        border-bottom: .027rem /* 1px -> .027rem */ solid #DCDCDC;
        margin-bottom: .8rem /* 30px -> .8rem */;
    }
    .phone-container .detail-head .time{
        font-size: .32rem /* 12px -> .32rem */;
        color: #999;
    }
    .phone-container .detail-head .browse-num{
        font-size: .32rem /* 12px -> .32rem */;
        color: #999;
    }
    
    .phone-container .detail-cont{
        font-size: .373rem /* 14px -> .373rem */;
        color: #333;
        line-height: 1.6;
    }
    .phone-container .detail-cont img{
        width: 100%;
    }

    .detail-right{
        background-color: #fff;
        padding-top: .8rem /* 30px -> .8rem */;
        padding-bottom: .533rem /* 20px -> .533rem */;
    }
    .detail-right .hot-news{
        padding: 0 .533rem /* 20px -> .533rem */ 0 1.333rem /* 50px -> 1.333rem */;
    }
    .detail-right .hot-news .lable{
        position: relative;
        font-size: .667rem /* 25px -> .667rem */;
        color: #333;
        margin-bottom: .8rem /* 30px -> .8rem */;
    }
    .detail-right .hot-news .lable::after{
        content: "";
        width: .107rem /* 4px -> .107rem */;
        height: .72rem /* 27px -> .72rem */;
        background-color: #BB7A51;
        position: absolute;
        left: -0.56rem /* -21px -> -0.56rem */;
        top: 50%;
        transform: translateY(-50%);
    }
    .detail-right .hot-news .hot-item{
        display: block;
        margin-top: .8rem /* 30px -> .8rem */;
        padding-bottom: .8rem /* 30px -> .8rem */;
        border-bottom: .027rem /* 1px -> .027rem */ solid #DCDCDC;
    }
    .detail-right .hot-news .hot-item:last-child{
        border-bottom: none;
    }
    .hot-news .hot-item .hot-tit{
        font-size: .427rem /* 16px -> .427rem */;
        color: #333;
        line-height: .8rem /* 30px -> .8rem */;
    }
}