@media screen and (max-width: 1220px) {
    .main-4 {
        margin-inline: 10%;
        width: 80%;
    }
}

@media screen and (max-width: 1115px) {
    .header .div-1 {
        gap: 0.25rem;
    }

    .header .div-2 .div-a input {
        width: 10rem;
    }
}

@media screen and (max-width: 1080px) {
    .main-4 {
        margin-inline: 5%;
        width: 90%;
    }
}

@media screen and (max-width: 1050px) {
    .header .div-1 {
        gap: 0rem;
    }

    .header .div-2 .div-a input {
        width: 8rem;
    }
}

@media screen and (max-width: 1000px) {
    .aside-1 {
        display: none;
    }

    .main {
        margin-left: 0rem;
    }

    .header {
        padding-inline: 0.5rem;
    }

    .header .div-1 img {
        width: 60px;
        height: 60px;
    }

    .header .div-1 nav {
        gap: 0.5rem;
    }

    .main-3 {
        padding-left: 10px;
    }
}


@media screen and (max-width: 950px) {
    .main {
        margin-right: 0rem;
    }

    .aside-2 {
        display: none;
    }

    .div_div_div {
        padding-inline: 20%;
    }

    .main-4 {
        margin-inline: unset;
        width: unset;
        margin-top: 70px;
        min-height: calc(100vh - 70px);
        border-radius: unset;
        padding: 0.5rem;
    }

    .main-4 .art-1 {
        padding: 1rem;
    }

    .aside-4 {
        bottom: 70px;
        top: 70px;
        height: unset;
        right: 0;
        left: 0;
        width: unset;
        border-radius: unset;
    }
}

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

    .header .div-1 nav,
    .header .div-2 .div-a {
        display: none;
    }

    .header .div-1 .div-y {
        display: block;
    }

    .aside-3,
    .slip_box {
        display: flex;
    }

    .main-3 {
        gap: 1rem;
    }

    .main-3 .art-1 {
        flex: 0 0 14rem;
    }
}

@media screen and (max-width: 800px) {
    .main-4 .art-1 .div-1 .ul {
        gap: 0.5rem;
    }

    .main-4 .art-1 .div-1 .ul li {
        width: 100px;
        height: 100px;
    }
}


@media screen and (max-width: 650px) {
    .main .art-1 ul {
        overflow: auto;
        display: flex;
        flex-wrap: nowrap;
    }

    .main .art-1 {
        padding: 0.5rem;
    }

    .main .art-1 ul::-webkit-scrollbar {
        display: none;
    }

    .main-3 .art-1,
    .main-3 .art-2 {
        flex: unset;
    }

    .main-3 {
        flex-direction: column;
    }

    .main-5 {
        padding-inline: 2rem;
    }
}

@media screen and (max-width: 600px) {
    .main .art-5 .div-1 {
        padding: 0.5rem;
        margin-top: -70px;
        position: relative;
        z-index: 10000;
    }

    main .art-6 .div-6 .div_a {
        grid-template-columns: 1fr;
    }

    .main .art-5 .div-1 .div-b .div_1 .img {
        width: 2.5rem;
        height: 2.5rem;
    }

    .main .art-5 .div-1 .div-b .div_1 .img img {
        width: 2rem;
        height: 2rem;
    }

    .main .art-5 .div-1 .div-b .div_1,
    .main .art-5 .div-2,
    .main .art-5 .div-3 {
        padding: 0.7rem;
    }

    .main .art-5 .div-1 .div-b .div_1_y {
        justify-content: right;
        text-align: right;
        align-items: end;
    }

    .main .art-5 .div-1 .div-b .div_1_y h3 {
        text-align: right;
    }

    .main .art-5 .div-1 .div-b .div_1_x {
        justify-content: left;
        text-align: left;
        align-items: start;
    }

    .main .art-5 .div-1 .div-b .div_x {
        margin-inline: 2rem;
    }

    .main .art-5 .div-1 .div-b .div_1_x h3 {
        text-align: left;
    }

    .main .art-5 .div-1 .div-a div h1 {
        font-size: 1.2rem;
    }

    .main .art-5 .div-4 {
        margin-inline: 1rem;
    }

    .main .art {
        height: 300px;
    }

    .main .art .div-2 h1 {
        font-size: 2rem;
    }

    .div_div_div {
        padding-inline: 10%;
    }
}

@media screen and (max-width: 530px) {
    .art-2-x ul {
        display: grid !important;
        grid-template-columns: 1fr;
    }

    .main .footer .div-1 {
        justify-content: left;
    }

    .main .footer .div-1 .div-a {
        max-width: unset;
    }

    main .art-6 .div-3 .div-a .div_1 ul {
        grid-template-columns: repeat(2, 1fr);
    }

     main .art-6 .div-3 .div-a .div_1 ul li {
        padding: 0.7rem;
    }

    .main .art-8 .div-2 {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 500px) {
    .main-2 article {
        width: 100%;
        height: 100vh;
        padding: 1.5rem;
        padding-top: 8rem;
        overflow: hidden;
    }

    .div_div_div {
        padding-inline: 5%;
    }

    .main-2-x {
        background-color: #040d29cc;
        margin-top: 30px;
    }

    .main-3 .art-2 .div-1 .div_x .div_h {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .main .art-1 .div-1 div h2 {
        font-size: 1.2rem;
    }

    .main .art-5 .div-3 .div-a ul {
        gap: 0.5rem;
    }

    .main .art-5 .div-3 .div-a .ul-4 {
        grid-template-columns: repeat(3, 1fr);
    }

    .main-5 {
        padding-inline: 1rem;
    }
}

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

    .main .art {
        height: 250px;
    }

    .main .art .div-2 {
        padding-inline: 2rem;
    }

    .header .div-2 button {
        display: none;
    }

    .header .div-2 .btn-1 {
        display: block;
    }

    .header .div-1 img {
        width: 80px;
        height: 80px;
    }

    .main .art-2 ul li .div_b {
        flex-direction: column;
    }

    .main .art-2 ul li .div_b .div-b {
        display: flex;
    }

    .main .art-2 ul li .div_b .div-b {
        display: unset;
    }

    .main .art-2 ul li .div_b .div-b p {
        display: none;
    }

    .main .art-2 ul li .div_b .div-b .d-1 {
        width: 100%;
        margin-top: 2rem;
    }

    .main .art-2 ul li .div_b .div-b .d-1 div {
        flex: 1 0 0;
    }

    .main-3 {
        padding: 0.5rem;
        padding-bottom: 100px;
    }

    .main-3 .art-2 .form .div_2 {
        grid-template-columns: 1fr;
    }

    .main-3 .art-1 {
        padding: 1rem;
    }

    .main-3 .art-2 .form,
    .main-3 .art-2 .div-1 .div_x,
    .main-3 .art-2 .div-2 .div-a,
    .main-3 .art-2 .div-2 .div-b,
    .main-3 .art-2 .div-3 .div-a {
        padding: 1rem;
    }

    .main .art-5 .div-1 .div-b .div_x {
        margin-inline: 1rem;
    }

    .main .art .div-2 h1 {
        font-size: 1.5rem;
    }
}



@media screen and (max-width: 380px) {
    .main-4 .art-3 ul {
        gap: 0.5rem;
    }

}

@media screen and (max-width: 365px) {
    .main-4 .art-1 .div-1 .ul li {
        padding: 0.5rem;
        width: 72px;
        height: 72px;
    }

    .main .art-5 .div-1 .div-b .div_x {
        margin-inline: 0.5rem;
    }

    .main .art-5 .div-1 .div-b .div_x .div_2 h1 {
        font-size: 1.2rem;
    }

    .main-4 .art-3 ul li .div-2 {
        flex-direction: column;
        justify-content: left;
        align-items: unset;
    }
}

@media screen and (max-width: 350px) {
    .main-4 .art-3 ul li {
        padding: 0.5rem;
    }

    .main-4 .art-3 ul li .div-1 .div {
        gap: 0.25rem;
    }

    .main-4 .art-2 ul .div-1 .div h4 {
        font-size: 0.75rem;
    }

    main .art-6 .div-3 .div-a .div_1 ul li {
        padding: 0.5rem;
    }
}