/* 819px 媒体查询 */
@media (max-width: 819px) {
    body {
        background-image: url(../images/m_author_sign_bg.png);
        background-repeat: no-repeat;
        background-position: center 60px;
    }
    .welfare-content {
        width: 100%;
        box-sizing: border-box;
    }
    .author-sign-tit {
        margin: 40px auto;
        width: 300px;
    }
    .content {
        flex-direction: column;
        background-color: #fff;
        border-radius: 15px;
    }
    .content .content-l {
        width: 100%;
        height: auto;
        top: 50px;
        z-index: 3;
        padding-left: 30px;
        padding-right: 30px;
        overflow: hidden;
        display: none;
    }
    /* 左侧滚动标识 */
    .content .content-l .left-icon {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        background: url('../images/arrow_left.png') center center no-repeat;
        background-size: 9px 15px;
        z-index: 4;
        opacity: 0;
        color: rgba(255, 174, 34, 1);
        transition: opacity 0.3s ease;
    }
    /* 右侧滚动标识 */
    .content .content-l .right-icon {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        background: url('../images/arrow_right.png') center center no-repeat;
        background-size: 9px 15px;
        z-index: 4;
        opacity: 0;
        color: rgba(255, 174, 34, 1);
        transition: opacity 0.3s ease;
    }

    /* 当可以向左滚动时显示左侧标识 */
    .content .content-l.scroll-left .left-icon {
        opacity: 1;
    }
    
    /* 当可以向右滚动时显示右侧标识 */
    .content .content-l.scroll-right .right-icon {
        opacity: 1;
    }

    .content .content-l ul {
        flex-direction: row;
        overflow-x: auto;
    }
    .content .content-l li {
        width: auto;
        white-space: nowrap;
        height: 40px;
        position: relative;
    }
    .content .content-l li.cur {
        background: none;
    }
    .content .content-l li::before {
        position: absolute;
        bottom: 0;
        width: calc(100% - 8px);
        height: 3px;
    }
    .content .content-r {
        width: 100%;
        padding-bottom: 10px;
    }
    .content .content-r .nav {
        margin-top: 30px;
        justify-content: flex-start;
        padding: 0 20px;
    }
    .content .content-r .nav::before {
        width: 4px;
        height: 16px;
        border-radius: 12px;
        background-color: rgba(255, 204, 49, 1);
    }
    .content .content-r .nav span {
        font-size: 18px;
        margin-left: 8px;
    }
    .content .content-r .nav::after {
        display: none;
    }
    .content .content-r .detail {
        margin-top: 10px;
        padding: 0 20px;
    }
    .rule-state {
        padding-left: 20px;
    }
    .content .tougao {
        text-align: left;
        padding-left: 20px;
    }
    .table {
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 20px;
        border-radius: 15px;
        font-size: 12px;
    }
    .table-head {
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }
    .table-row span {
        padding: 10px 15px;
    }
    .qq-list {
        justify-content: space-between;
    }
    .qq-list li {
        width: calc(50% - 5px);
        margin-bottom: 10px!important;
        border-radius: 10px;
        padding: 5px 10px;
    }
    .qq-list li:nth-child(3n+2) {
        margin: 0;
    }
    .qq-list li .l {
        width: 40px;
        height: 40px;
        background-size: 20px auto;
        flex-shrink: 0;
    }
    .qq-list .qq-name {
        font-size: 14px;
    }
    .qq-list .qq-code {
        font-size: 12px;
        color: rgba(102, 102, 102, 1);
    }
}

/* 820px - 1024px 媒体查询 */
@media (min-width: 820px) and (max-width: 1024px) {
    .welfare-content {
        width: 100%;
    }
    .content .content-l {
        display: none;
    }
}

/* 1024px - 1200px 媒体查询 */
@media (min-width: 1024px) and (max-width: 1200px) {
    .welfare-content {
        width: 100%;
    }
    .content {
        padding: 0 20px;
    }
    .content .content-r {
        width: calc(100% - 320px);
    }
}