@media screen and (min-width: 768px) {
    .container {
        width: 760px;
        margin: 0 auto;
    }
    .ps30{
        padding: 30px;
    }
    .grid {
        gap: 30px;
    }

    .grid4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid5 { 
        grid-template-columns: repeat(5, 1fr);
    }
    .grid6 { 
        grid-template-columns: repeat(6, 1fr);
    }
    /* reset */
    /* header */
    .header{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .dh>a{
        padding: 10px 20px;
    }
    /* header */
    /* layout */

    .zxlist>li>a{
        flex-direction: row;
        align-items: center;
    }
    .zxlist .yw-img{
        width: 25%;
    }
    .topmain{
        flex-direction: row;
        align-items: center;
        gap: 30px;
    }
    .topmain-img{
        width: 25%;
    }
    .topmain-text{
        width: 55%;
    }
    .topmain-fen{
        width: 20%;
    }
    /* layout */
    /* single */
}

@media screen and (min-width: 1200px) {
    .container {
        width: 1170px;
    }

    /* reset */
    /* layout */
    .yw{
        flex-direction: row;
        gap: 30px;
    }
    .yw-content{
        flex: 1;
    }
    .yw-sidebar{
        width: 30%;
    }
    .yw-side-title h2{
        font-size: 20px;
        color: var(--main-color);
    }
    .yw-side-ul{
        gap: 15px;
    }
    .yw-side-ul .yw-text{
        padding: 15px 0 0 0;
        text-align: center;
    }
    .yw-side-ul-2{
        counter-reset: item;
    }
    .yw-side-ul-2>li{
        position: relative;
        display: flex;
        align-items: center;
        gap: 15px;
    }
    .yw-side-ul-2>li::before{
        counter-increment: item;
        content: counter(item);
        display: inline-block;
        padding: 2px 10px;
        border-radius: 10px 0 10px 0;
        background: #afb5c5;
        color: var(--white-color);
    }
    .yw-side-ul-2>li:nth-child(1)::before{
        background: linear-gradient(135deg, #ff4e50, #f9d423);
    }
    .yw-side-ul-2>li:nth-child(2)::before{
        background: linear-gradient(135deg, #f7971e, #ffd200);
    }
    .yw-side-ul-2>li:nth-child(3)::before{
        background: linear-gradient(135deg, #fceabb, #f8b500);
    }
    .yw-side-ul-2>li>h3{
        font-size: 15px;
        display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    }
    /* layout */
}