body {
    background: #f9f9f9;
}


.container {
    display: flex;
    gap: 16px;
    min-height: 297mm;
    align-items: stretch;
    max-width: var(--page-max-width);
    margin: 20px auto;
    position: relative;
}

.container .article{flex: 1; max-width: calc(100% - 390px); height: auto; padding: 30px; background: #ffffff; display: flex; gap: 1em; flex-direction: column}
.container .article[fs=s]{font-size: 12px;}
.container .article[fs=x]{font-size: 16px}
.container .article[fs=xx]{font-size: 18px}
.container .article .title{display: flex; flex-direction: column; gap: 1em; text-align: center; min-height: 7em; line-height: 1.4; justify-content: center;}
.container .article .title .eyebrow_title{font-size: 1.4em;}
.container .article .title .titleText{font-size: 1.6em; white-space: pre-wrap}
.container .article .title .sub_title{font-size: 1.4em;}

/* 物流集团个性变化(所有标题设置相同字体大小) */
/* Start */
.container .article .title .eyebrow_title{font-size: 1.6em;}
.container .article .title .titleText{font-size: 1.6em;}
.container .article .title .sub_title{font-size: 1.6em;}
/* End */

.container .article .title .info{margin-top: 1.5rem;}
.container .article .content{display: flex; gap: 1em; flex-direction: column; padding: 2em;}
.container .article .content img{display: block; max-width: 99%; height: auto; margin: 0 auto;}
.container .article hr{}

.container .panels{width: 300px; user-select: none; position: sticky; top: 10px; right: 0; align-self: flex-start; border-radius: 3px; display: flex; gap: 1.2rem; flex-direction: column;}
.container .panels .panel{padding: 15px; background: #FFFFFF; display: flex; gap: 15px; flex-direction: column; border-radius: 3px; overflow: hidden;}
.container .panels .panel *{transition: all .2s;}
.container .panels .panel .ph{font-size: 16px; color: #636363; text-align: center;}
.container .panels .panel .pb{display: flex; gap: 10px;}

.container .fontSize .size span{flex: 1; padding: 10px; background: #fcfcfc; text-align: center; cursor: pointer; border-radius: 3px;}
.container .fontSize .size span.active{background: #777777; color: #FFFFFF;}

.container .attrs .pb span:nth-child(odd){text-align: right;}

.container .share .methods span{background: #fcfcfc; flex: 1; padding: 0.5rem; display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem;
    cursor: pointer; border-radius: 5px;}
.container .share .methods span:hover{}
.container .share .methods span i{font-size: 18px; width: 20px; height: 20px; line-height: 20px}

.container .share .methods span:nth-child(1){color: #28c445;}
.container .share .methods span:nth-child(1):hover{background: #28c445; color: #FFFFFF;}

.container .share .methods span:nth-child(2){color: #68a5e1;}
.container .share .methods span:nth-child(2):hover{background: #68a5e1; color: #FFFFFF;}

.container .share .methods span:nth-child(3){color: #e71f19;}
.container .share .methods span:nth-child(3):hover{background: #e71f19; color: #FFFFFF;}

.container .share .methods span:nth-child(4){color: #666666;}
.container .share .methods span:nth-child(4):hover{background: #666666; color: #FFFFFF;}


.pagination{display: flex; flex-direction: column; width: calc(100% - 4rem); margin: 0 auto; min-height: 50px; line-height: 25px; gap: 1rem; border-top: 1px solid #e7e7e7; padding: 2.5rem 2rem 0;}
.pagination .item{flex: 1; display: flex;}
.pagination .item .prefix{min-width: 4em; flex: none;}
.pagination .item span,
.pagination .item a{flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.pagination .item span{color: #999999}

@media (max-width: 1024px) {
    :root{
        --page-max-width: calc(100% - 20px);
    }
    .sidebar{
        padding-top: 160px;
    }
    .container{
        font-size: 14px;
        padding: 0;
        gap: 1.6rem;
    }
}

@media (max-width: 768px){
    .container{
        flex-direction: column;
        gap: 1rem;
    }
    .container .article{
        width: 100%;
        max-width: calc(100% - 60px);
    }
    .container .article .content{
        padding: 0;
    }
    .container .panels{
        position: static;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
    .container .panels .fontSize,
    .container .panels .share,
    .container .panels .qrcode{
        display: none ;
    }
    .container .panels .attrs .pb{
        align-self: unset;
    }
}

@media print {
    .Header{display: none}
    .sidebar{display: none}
    .Footer{display: none}
    .container .panels{display: none}
    .container .article{width: 100%;  max-width: calc(100% - 60px);}
    @page {
        size: A4;
        margin: 1.5cm 0;
    }
}




/* 表格美化 */
table {width: max-content; /* 或者具体宽度 */border-collapse: collapse; /* 合并边框 */font-family: Arial, sans-serif; /* 字体 */margin: 1rem 0; max-width: 100%; max-height: 200px;}
th, td {border: 1px solid #ddd; /* 边框样式 */padding: 8px; /* 内边距 */text-align: left; /* 文本对齐方式 */}
th {background-color: #f2f2f2; /* 表头背景色 */}
tr:nth-child(even) {background-color: #f9f9f9; /* 偶数行背景色 */}
tr:hover {background-color: #f1f1f1; /* 鼠标悬停背景色 */}
thead {position: sticky; top: 0; background-color: #f2f2f2; /* 表头背景色 */}
table {overflow-y: auto; /* 当内容超出时显示滚动条 */}