@media screen and (max-width:1200px) {

    /* 定义标签组图标的样式 */
    .tags-group-icon {
        /* 设置标签组图标的宽度 */
        width: 95px;
        /* 设置标签组图标的高度 */
        height: 95px;
        /* 设置标签组图标的圆角半径，以实现圆角效果 */
        border-radius: 25px
    }

    /*左侧 滚动图标 整体布局*/
    .tags-group-wrapper {
        margin-top: 8rem; /* 设置上边距 */
        display: flex; /* 使用弹性盒子布局 */
        flex-wrap: nowrap; /* 不允许项目换行 */
        animation: rowup 30s linear infinite /* 应用名为rowup的动画，持续30秒，线性速度，无限循环 */
    }
    
    /*左侧滚动图标 倾斜角度*/
    .tags-group-all {
        display: flex;
        transform: rotate(-25deg)
    }
        
}




@media screen and (max-width:1150px) {

    /* 定义标签组图标的样式 */
    .tags-group-icon {
        /* 设置标签组图标的宽度 */
        width: 90px;
        /* 设置标签组图标的高度 */
        height: 90px;
        /* 设置标签组图标的圆角半径，以实现圆角效果 */
        border-radius: 25px
    }
    
    /*左侧 滚动图标 整体布局*/
    .tags-group-wrapper {
        margin-top: 8.5rem; /* 设置上边距 */
        display: flex; /* 使用弹性盒子布局 */
        flex-wrap: nowrap; /* 不允许项目换行 */
        animation: rowup 30s linear infinite /* 应用名为rowup的动画，持续30秒，线性速度，无限循环 */
    }
    
    /*左侧滚动图标 倾斜角度*/
    .tags-group-all {
        display: flex;
        transform: rotate(-20deg)
    }

}

@media screen and (max-width:1100px) {

    /* 定义标签组图标的样式 */
    .tags-group-icon {
        /* 设置标签组图标的宽度 */
        width: 85px;
        /* 设置标签组图标的高度 */
        height: 85px;
        /* 设置标签组图标的圆角半径，以实现圆角效果 */
        border-radius: 25px
    }
    
    /*左侧 滚动图标 整体布局*/
    .tags-group-wrapper {
        margin-top: 9rem; /* 设置上边距 */
        display: flex; /* 使用弹性盒子布局 */
        flex-wrap: nowrap; /* 不允许项目换行 */
        animation: rowup 30s linear infinite /* 应用名为rowup的动画，持续30秒，线性速度，无限循环 */
    }
    
    /*左侧滚动图标 倾斜角度*/
    .tags-group-all {
        display: flex;
        transform: rotate(-15deg)
    }

}


@media screen and (max-width:1050px) {

    /* 定义标签组图标的样式 */
    .tags-group-icon {
        /* 设置标签组图标的宽度 */
        width: 80px;
        /* 设置标签组图标的高度 */
        height: 80px;
        /* 设置标签组图标的圆角半径，以实现圆角效果 */
        border-radius: 20px
    }
    
    /*左侧 滚动图标 整体布局*/
    .tags-group-wrapper {
        margin-top: 12rem; /* 设置上边距 */
        display: flex; /* 使用弹性盒子布局 */
        flex-wrap: nowrap; /* 不允许项目换行 */
        animation: rowup 30s linear infinite /* 应用名为rowup的动画，持续30秒，线性速度，无限循环 */
    }
    
    /*左侧滚动图标 倾斜角度*/
    .tags-group-all {
        display: flex;
        transform: rotate(0deg)
    }

}


@media screen and (max-width:1000px) {

    /* 定义标签组图标的样式 */
    .tags-group-icon {
        /* 设置标签组图标的宽度 */
        width: 80px;
        /* 设置标签组图标的高度 */
        height: 80px;
        /* 设置标签组图标的圆角半径，以实现圆角效果 */
        border-radius: 15px
    }
    
    /*左侧 滚动图标 整体布局*/
    .tags-group-wrapper {
        margin-top: 12rem; /* 设置上边距 */
        display: flex; /* 使用弹性盒子布局 */
        flex-wrap: nowrap; /* 不允许项目换行 */
        animation: rowup 30s linear infinite /* 应用名为rowup的动画，持续30秒，线性速度，无限循环 */
    }
    
    /*左侧滚动图标 倾斜角度*/
    .tags-group-all {
        display: flex;
        transform: rotate(-0deg)
    }

}



@media screen and (max-width:950px) {

    /* 定义标签组图标的样式 */
    .tags-group-icon {
        /* 设置标签组图标的宽度 */
        width: 80px;
        /* 设置标签组图标的高度 */
        height: 80px;
        /* 设置标签组图标的圆角半径，以实现圆角效果 */
        border-radius: 15px
    }
    
    /*左侧 滚动图标 整体布局*/
    .tags-group-wrapper {
        margin-top: 12rem; /* 设置上边距 */
        display: flex; /* 使用弹性盒子布局 */
        flex-wrap: nowrap; /* 不允许项目换行 */
        animation: rowup 30s linear infinite /* 应用名为rowup的动画，持续30秒，线性速度，无限循环 */
    }


}



@media screen and (max-width:850px) {

    /* 定义标签组图标的样式 */
    .tags-group-icon {
        /* 设置标签组图标的宽度 */
        width: 75px;
        /* 设置标签组图标的高度 */
        height: 75px;
        /* 设置标签组图标的圆角半径，以实现圆角效果 */
        border-radius: 15px
    }
    
    /*左侧 滚动图标 整体布局*/
    .tags-group-wrapper {
        margin-top: 12rem; /* 设置上边距 */
        display: flex; /* 使用弹性盒子布局 */
        flex-wrap: nowrap; /* 不允许项目换行 */
        animation: rowup 30s linear infinite /* 应用名为rowup的动画，持续30秒，线性速度，无限循环 */
    }


}



@media screen and (max-width:750px) {

    /* 定义标签组图标的样式 */
    .tags-group-icon {
        /* 设置标签组图标的宽度 */
        width: 70px;
        /* 设置标签组图标的高度 */
        height: 70px;
        /* 设置标签组图标的圆角半径，以实现圆角效果 */
        border-radius: 15px
    }
    
    /*左侧 滚动图标 整体布局*/
    .tags-group-wrapper {
        margin-top: 12rem; /* 设置上边距 */
        display: flex; /* 使用弹性盒子布局 */
        flex-wrap: nowrap; /* 不允许项目换行 */
        animation: rowup 30s linear infinite /* 应用名为rowup的动画，持续30秒，线性速度，无限循环 */
    }
    
    /*3个按钮 文字下面横向样式*/
    a.categoryButton:after {
        top: 45px;
        width: 1rem;
        left: 10px;
        height: 2px;
        background: #fff;
        content: "";
        border-radius: 1px;
        position: absolute
    }
    
    
    /*3个按钮 文字样式*/
    .categoryButtonText {
        padding-left: 10px;
        font-weight: 400
    }

}


@media screen and (max-width:650px) {

    /* 定义标签组图标的样式 */
    .tags-group-icon {
        /* 设置标签组图标的宽度 */
        width: 95px;
        /* 设置标签组图标的高度 */
        height: 95px;
        /* 设置标签组图标的圆角半径，以实现圆角效果 */
        border-radius: 15px
    }
    
    /*左侧 滚动图标 整体布局*/
    .tags-group-wrapper {
        margin-top: 8rem; /* 设置上边距 */
        display: flex; /* 使用弹性盒子布局 */
        flex-wrap: nowrap; /* 不允许项目换行 */
        animation: rowup 30s linear infinite /* 应用名为rowup的动画，持续30秒，线性速度，无限循环 */
    }
    
    /*左侧滚动图标 倾斜角度*/
    .tags-group-all {
        display: flex;
        transform: rotate(-25deg)
    }
    
    /*3个按钮 文字下面横向样式*/
    a.categoryButton:after {
        top: 45px;
        width: 1rem;
        left: 10px;
        height: 2px;
        background: #fff;
        content: "";
        border-radius: 1px;
        position: absolute
    }
    
    /*3个按钮 文字样式*/
    .categoryButtonText {
        padding-left: 10px;
        font-weight: 400
    }

    /*右侧框架*/
   .topGroup{
        display: none; /* 隐藏不显示 */
   }


    /*左侧框架*/
    div#bannerGroup {                            /* 选择id为bannerGroup的div元素 */
        width: calc(100%);                          /* 宽度为100% */
        margin-right: 0.8rem;                      /* 右侧外边距为1rem */
        height: calc(165px * 2 + 1.0rem);     /* 总高度为两篇文章高度加上间隔 */
        display: flex;                           /* 显示为弹性盒子 */
        flex-direction: column;                  /* 弹性盒子的方向为垂直 */
        justify-content: space-between           /* 垂直方向上项目间隔分布 */
    }
    
}



@media screen and (max-width:520px) {

    /* 定义标签组图标的样式 */
    .tags-group-icon {
        /* 设置标签组图标的宽度 */
        width: 70px;
        /* 设置标签组图标的高度 */
        height: 70px;
        /* 设置标签组图标的圆角半径，以实现圆角效果 */
        border-radius: 15px
    }
    
    /*左侧 滚动图标 整体布局*/
    .tags-group-wrapper {
        margin-top: 12rem; /* 设置上边距 */
        display: flex; /* 使用弹性盒子布局 */
        flex-wrap: nowrap; /* 不允许项目换行 */
        animation: rowup 30s linear infinite /* 应用名为rowup的动画，持续30秒，线性速度，无限循环 */
    }
    
    /*左侧滚动图标 倾斜角度*/
    .tags-group-all {
        display: flex;
        transform: rotate(0deg)
    }
    
    /*3个按钮 文字下面横向样式*/
    a.categoryButton:after {
        top: 45px;
        width: 1rem;
        left: 10px;
        height: 2px;
        background: #fff;
        content: "";
        border-radius: 1px;
        position: absolute
    }
    
    /*3个按钮 文字样式*/
    .categoryButtonText {
        padding-left: 10px;
        font-weight: 400
    }

    /*右侧框架*/
   .topGroup{
        display: none; /* 隐藏不显示 */
   }


    /*左侧框架*/
    div#bannerGroup {                            /* 选择id为bannerGroup的div元素 */
        width: calc(100%);                          /* 宽度为100% */
        margin-right: 0.8rem;                      /* 右侧外边距为1rem */
        height: calc(165px * 2 + 1.0rem);     /* 总高度为两篇文章高度加上间隔 */
        display: flex;                           /* 显示为弹性盒子 */
        flex-direction: column;                  /* 弹性盒子的方向为垂直 */
        justify-content: space-between           /* 垂直方向上项目间隔分布 */
    }
    
}