body{
            background: #F7F7F7;
        }

        img {
            max-width: 100%;
            vertical-align: middle;
            border: 0;
        }

        .pagetitle img{
            vertical-align: baseline;
        }

        /* 左侧文章内容区域 */
        .article-content {
            flex: 1;
            overflow: hidden;
            margin: 0 20px 0 0;
            background: #fff;
            padding: 50px 40px 60px 40px;
        }
        
        .article-header {
            border-bottom: 1px solid #eee;
            padding-bottom: 20px;
            margin-bottom: 25px;
        }
        
        .article-title {
            font-size: 28px;
            color: #333;
            margin: 0 0 15px 0;
            line-height: 1.4;
        }
        
        .article-meta {
            display: flex;
            color: #8B9499;
            font-size: 14px;
            flex-wrap: wrap;
            margin: 0 -24px;
        }
        
        .article-meta span {
            padding: 0 24px;
            position: relative;
        }
        .article-meta span:nth-child(2):after,
        .article-meta span:nth-child(3):after,
        .article-meta span:nth-child(4):after {
            content: "";
            position: absolute;
            left: 0;
            top: 5px;
            width: 2px;
            height: 12px;
            background: #8B9499;
        }
        
        .article-body {
            font-size: 16px;
            line-height: 1.8;
        }
        
        .article-body p {
            margin-bottom: 20px;
        }
        
        /* 右侧热门文章区域 */
        .hot-articles-sidebar {
            width: 30%;
            position: relative;
        }
        
        .hot-articles {
            background: white;
            position: sticky;
            top: 100px;
            transition: all 0.3s ease;
        }
        
        .hot-articles:hover {
            /*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);*/
            /*transform: translateY(-3px);*/
        }
        
        .hot-articles-title {
            font-size: 24px;
            padding: 24px 30px;
            color: #000000;
            padding-bottom: 15px;
            margin-bottom: 15px;
            /*border-bottom: 2px solid #3498db;*/
            position: relative;
            background: url(/img222/FigmaDDSSlicePNGba80bf16e97149f48e1273f4c675db12.png) no-repeat center center;
            display: flex;
            align-items: center;
        }
        
        .hot-article-list {
            list-style: none;
            padding: 24px 30px;
        }
        
        .hot-article-item {
            padding: 12px 0;
            border-bottom: 1px dashed #eee;
            transition: all 0.2s ease;
        }
        
        .hot-article-item:last-child {
            border-bottom: none;
        }
        
        .hot-article-item:hover {
            /*background-color: #f9f9f9;*/
            /*padding-left: 8px;*/
        }
        
        .hot-article-link {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: #333;
        }
        .hot-article-link a{
            color: #333;
        }
        
        .hot-article-link a:hover {
            color: #f8c300;
        }
        
        .hot-article-index {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background: #f0f0f0;
            margin-right: 24px;
            font-size: 24px;
            padding: 24px;
            font-weight: bold;
            color: #666;
            flex-shrink: 0;
        }
        .hot-article-right>p{
            display: flex;
            justify-content: space-between;
            color: #8B9499;
        }
        
        .hot-article-item:nth-child(1) .hot-article-index {
            background: #e74c3c;
            color: white;
        }
        
        .hot-article-item:nth-child(2) .hot-article-index {
            background: #f39c12;
            color: white;
        }
        
        .hot-article-item:nth-child(3) .hot-article-index {
            background: #3498db;
            color: white;
        }
        
        .hot-article-text {
            flex: 1;
            font-size: 20px;
            color: #333;
            line-height: 1.4;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }





        .article-box{
            display: flex;
        }

        .article-nav {
            display: flex;
            justify-content: space-between;
            margin: 40px 0 0 0;
        }
        .article-nav div{
            width: 48%;
            background: #F7F7F7;
            padding: 14px 19px;
            display: flex;
            align-items: center;
        }
        .article-nav>div span{
            width: 88px;
        }
        .article-nav>div a{
            border-left: 1px solid #E6E6E6;
            padding: 0 0 0 20px;
            flex: 1;
        }
        .article-nav>div a:hover{
            font-weight: 700;
        }
        .ico-yan{
            
        }




        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .container {
                flex-direction: column;
            }
            
            .hot-articles-sidebar {
                width: 100%;
                display: none;
            }
            
            .hot-articles {
                position: static;
            }
            .article-content{
                margin: 0;
                padding: 10px;
            }
            .article-title{
                font-size: 18px;
            }
            .pro-box img{
                width: 100%;
                height: auto !important;
            }
            .article-nav{
                flex-direction: column;
            }
            .article-nav div{
                width: 100%;
            }
            .prev-article{
                margin: 0 0 10px 0;
            }
        }

.art-img {
    display: flex !important;
    justify-content: space-between !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.art-img li {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 49% !important;
}

.art-img img {
    width: 100% !important;
}

.art-img div {
    display: block !important;
    position: relative !important;
    margin: 12px auto !important;
    width: fit-content !important;
    font-size: 14px !important;
    text-transform: capitalize !important;
}