/* 小卡片风格广告位 - 扁平简约风格 */
.promo-card-wrapper {
    margin: 0 0 30px 0;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.promo-card-wrapper.below-top {
    margin-top: -10px;
}

.promo-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.promo-card-item {
    background: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
    position: relative;
}

.promo-card-item:hover {
    background: #e7f3ff;
    border-color: #91d5ff;
    transform: translateY(-2px);
}

.promo-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.promo-card-content {
    padding: 18px 14px;
    text-align: center;
    position: relative;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-card-title {
    font-size: 14px;
    color: #495057;
    font-weight: 500;
    line-height: 1.5;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.promo-card-item:hover .promo-card-title {
    color: #1890ff;
}

.promo-card-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #1890ff;
    color: #fff;
    font-size: 10px;
    padding: 3px 7px;
    border-radius: 3px;
    font-weight: 600;
    line-height: 1;
}

/* 彩色文字风格广告位 */
.wzgg {
    width: 100%;
    overflow: hidden;
    display: block;
    margin: 0 0 30px 0;
    background: #fff;
    border-radius: 12px;
    padding: 8px 5px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.wzgg.below-top {
    margin-top: -10px;
}

.wzgg.no-card-wrapper {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin: 0 0 30px 0 !important;
}

.wzgg.no-card-wrapper.below-top {
    margin-top: -10px !important;
}

.promo-card-wrapper.no-card-wrapper {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin: 0 0 30px 0 !important;
}

.promo-card-wrapper.no-card-wrapper.below-top {
    margin-top: -10px !important;
}

/* 虚线边框风格推广位 */
.link-grid-dashed {
    width: 100%;
    padding-top: 6px;
    box-sizing: border-box;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 0 30px 0;
}

.link-grid-dashed.below-top {
    margin-top: -10px;
}

.link-grid-dashed a {
    color: #7fba00;
    font-size: 14px;
    line-height: 38px;
    text-align: center;
    border: 1px dashed rgba(0, 0, 0, 0.2);
    padding: 0 3px;
    box-sizing: border-box;
    float: left;
    width: 11.5%;
    height: 38px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 0.5% 6px;
    text-decoration: none;
    transition: all 0.6s;
}

.link-grid-dashed a:hover {
    font-weight: bold;
    color: #fff !important;
    background: #7fba00;
    transition: all 0.6s;
}

.link-grid-dashed a:nth-child(2n) {
    color: #f74e1e;
}

.link-grid-dashed a:nth-child(2n):hover {
    background: #f74e1e;
    border-color: #f74e1e;
}

.link-grid-dashed a:nth-child(3n) {
    color: #00a4ef;
}

.link-grid-dashed a:nth-child(3n):hover {
    background: #00a4ef;
    border-color: #00a4ef;
}

.link-grid-dashed a:nth-child(4n) {
    color: #0517c2;
}

.link-grid-dashed a:nth-child(4n):hover {
    background: #0517c2;
    border-color: #0517c2;
}

.link-grid-dashed a:nth-child(5n) {
    color: #601165;
}

.link-grid-dashed a:nth-child(5n):hover {
    background: #601165;
    border-color: #601165;
}

.link-grid-dashed a:nth-child(6n) {
    color: #ffb900;
}

.link-grid-dashed a:nth-child(6n):hover {
    background: #ffb900;
    border-color: #ffb900;
}

.link-grid-dashed a:nth-child(7n) {
    color: #0fc317;
}

.link-grid-dashed a:nth-child(7n):hover {
    background: #0fc317;
    border-color: #0fc317;
}

.link-grid-dashed a:nth-child(8n) {
    color: #601165;
}

.link-grid-dashed a:nth-child(8n):hover {
    background: #601165;
    border-color: #601165;
}

.link-grid-dashed a:nth-child(9n) {
    color: #fba78f;
}

.link-grid-dashed a:nth-child(9n):hover {
    background: #fba78f;
    border-color: #fba78f;
}

.link-grid-dashed a:nth-child(10n) {
    color: #13cf8f;
}

.link-grid-dashed a:nth-child(10n):hover {
    background: #13cf8f;
    border-color: #13cf8f;
}

.link-grid-dashed a:nth-child(11n) {
    color: #f74e1e;
}

.link-grid-dashed a:nth-child(11n):hover {
    background: #f74e1e;
    border-color: #f74e1e;
}

.link-grid-dashed a:nth-child(12n) {
    color: #ffb900;
}

.link-grid-dashed a:nth-child(12n):hover {
    background: #ffb900;
    border-color: #ffb900;
}

.link-grid-dashed a:nth-child(13n) {
    color: #fba78f;
}

.link-grid-dashed a:nth-child(13n):hover {
    background: #fba78f;
    border-color: #fba78f;
}

.link-grid-dashed a:nth-child(14n) {
    color: #f74e1e;
}

.link-grid-dashed a:nth-child(14n):hover {
    background: #f74e1e;
    border-color: #f74e1e;
}

.link-grid-dashed a:nth-child(15n) {
    color: #7fba00;
}

.link-grid-dashed a:nth-child(15n):hover {
    background: #7fba00;
    border-color: #7fba00;
}

.link-grid-dashed a:nth-child(16n) {
    color: #0fc317;
}

.link-grid-dashed a:nth-child(16n):hover {
    background: #0fc317;
    border-color: #0fc317;
}

.link-grid-dashed a:nth-child(17n) {
    color: #0517c2;
}

.link-grid-dashed a:nth-child(17n):hover {
    background: #0517c2;
    border-color: #0517c2;
}

.link-grid-dashed a:nth-child(18n) {
    color: #13cf8f;
}

.link-grid-dashed a:nth-child(18n):hover {
    background: #13cf8f;
    border-color: #13cf8f;
}

.link-grid-dashed a:nth-child(19n) {
    color: #ffb900;
}

.link-grid-dashed a:nth-child(19n):hover {
    background: #ffb900;
    border-color: #ffb900;
}

.link-grid-dashed a:nth-child(20n) {
    color: #f74e1e;
}

.link-grid-dashed a:nth-child(20n):hover {
    background: #f74e1e;
    border-color: #f74e1e;
}

.wzgg a {
    width: calc(25% - 10px);
    float: left;
    border-radius: 4px;
    line-height: 36px;
    height: 36px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    display: block;
    background-color: rgb(255, 153, 159);
    margin: 5px;
    transition: all 0.3s ease;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 10px;
    box-sizing: border-box;
    font-weight: 500;
}

.wzgg a:nth-child(1) {
    background-color: #dc3545;
}

.wzgg a:nth-child(2) {
    background-color: #007bff;
}

.wzgg a:nth-child(3) {
    background-color: #28a745;
}

.wzgg a:nth-child(4) {
    background-color: #ffc107;
}

.wzgg a:nth-child(5) {
    background-color: #DB7093;
}

.wzgg a:nth-child(6) {
    background-color: #4169E1;
}

.wzgg a:nth-child(7) {
    background-color: #FFD700;
}

.wzgg a:nth-child(8) {
    background-color: #00CED1;
}

.wzgg a:nth-child(9) {
    background-color: #FF4500;
}

.wzgg a:nth-child(10) {
    background-color: #3CB371;
}

.wzgg a:nth-child(11) {
    background-color: #40E0D0;
}

.wzgg a:nth-child(12) {
    background-color: #1E90FF;
}

.wzgg a:nth-child(13) {
    background-color: #0000FF;
}

.wzgg a:nth-child(14) {
    background-color: #8A2BE2;
}

.wzgg a:nth-child(15) {
    background-color: #FF00FF;
}

.wzgg a:nth-child(16) {
    background-color: #6B8E23;
}

.wzgg a:nth-child(17) {
    background-color: #FF8C00;
}

.wzgg a:nth-child(18) {
    background-color: #A0522D;
}

.wzgg a:nth-child(19) {
    background-color: #B22222;
}

.wzgg a:nth-child(20) {
    background-color: #008080;
}

.wzgg a:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

#gonggao {
    font-size: 17px;
    margin: 0;
    background: linear-gradient(90deg, #ffffff, #ff0000 6.25%, #ff7d00 12.5%, #ffff00 18.75%, #00ff00 25%, #00ffff 31.25%, #0000ff 37.5%, #ff00ff 43.75%, #ffff00 50%, #ff0000 56.25%, #ff7d00 62.5%, #ffff00 68.75%, #00ff00 75%, #00ffff 81.25%, #0000ff 87.5%, #ff00ff 93.75%, #ffff00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    animation: masked-animation 2s infinite linear;
    will-change: background-position;
}

@keyframes masked-animation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}

/* 响应式设计 */
@media screen and (max-width: 1198px) {
    .link-grid-dashed {
        margin: 0 0 20px 0;
    }
    
    .link-grid-dashed.below-top {
        margin-top: -8px;
    }
    
    .link-grid-dashed a {
        width: 24%;
        margin: 0 0.5% 6px;
        font-size: 13px;
    }
}

@media screen and (max-width: 1000px) {
    .link-grid-dashed {
        margin: 0 0 20px 0;
    }
    
    .link-grid-dashed.below-top {
        margin-top: -8px;
    }
}

@media screen and (max-width: 1000px) {
    .promo-card-wrapper {
        margin: 0 0 20px 0;
        padding: 15px;
    }
    
    .promo-card-wrapper.below-top {
        margin-top: -8px;
    }
    
    .promo-card-wrapper.no-card-wrapper {
        padding: 0 !important;
        margin: 0 0 20px 0 !important;
    }
    
    .promo-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .promo-card-content {
        padding: 15px 12px;
        min-height: 52px;
    }
    
    .promo-card-title {
        font-size: 13px;
        line-height: 1.4;
    }
    
    .promo-card-badge {
        font-size: 9px;
        padding: 2px 6px;
        top: 5px;
        right: 5px;
    }
    
    .wzgg {
        margin: 0 0 20px 0;
        padding: 8px 5px;
    }
    
    .wzgg.below-top {
        margin-top: -8px;
    }
    
    .wzgg.no-card-wrapper {
        padding: 0 !important;
        margin: 0 0 20px 0 !important;
    }
    
    .wzgg a {
        width: calc(50% - 10px);
        float: left;
        border-radius: 4px;
        line-height: 36px;
        height: 36px;
        text-align: center;
        font-size: 13px;
        color: #fff;
        display: block;
        margin: 5px;
        transition: all 0.3s ease;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 8px;
        box-sizing: border-box;
        font-weight: 500;
    }
}

.fl, .left {
    float: left;
}

.fr, .right {
    float: right;
}