@media (max-width: 767px) {
    .header {
        display: block;
    }
    .logo {
        width: 95%;
        height: auto;
    }
    .main {
        width: 98%;
        padding: 0;
    }
    .main .web-list {
        display: grid;
        justify-content: space-around;
        grid-template-columns: 50% 50%;
        column-gap: 10px;
        padding: 0 15px;
    }
    .main .web-item {
        width: 100%;
        height: 220px;
    }
    .main .web-item .tips {
        height: 42px;
    }
    .main .web-item h2 {
        width: 140px;
    }
    .main .web-item .large {
        width: 160px;
        font-size: 12px;
    }

    .app-title {
        flex-direction: column;
    }

    .app-list {
        justify-content: center;
    }
    .main .app-item {
        margin: 0 8px 16px 8px;
        flex-basis: 100%;
    }
    .footer p {
        text-align: center;
    }
    .footer p span:first-child {
        display: block;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .main {
        width: 750px;
    }
    .main .web-list {
        display: grid;
        justify-content: space-around;
        grid-template-columns: 33.3% 33.3% 33.3%;
        column-gap: 10px;
        padding: 0 15px;
    }
    .main .app-item {
        margin: 0 8px 16px 8px;
        flex-basis: 46%;
    }
}
@media (min-width: 1024px) and (max-width: 1280px) {
    .main {
        width: 1000px;
    }
    .main .app-list {
        justify-content: flex-start;
    }
    .main .app-item {
        margin: 0 8px 16px 8px;
    }
}
@media (min-width: 1290px) {
    .main {
        width: 1290px;
    }
}