@media screen and (max-width: 580px) {
    header {
        width: 580px;
    }
    .right {
        display: none;
    }
    header .wrapper {
        width: 100%;
    }
    nav {
        display: none;
    }
    header .bot {
        display: none;
    }
    .mnbn .banner {
        display: flex; 
        flex-direction: row; 
        margin: 0;
        width: 100%;
        height: 89vh;
        
    }
    .mnbn .banner .leftbanner h1 {
        padding-top: 110px;
        font-size: 53px;
    }
    .mnbn .banner .leftbanner {
        padding-left: 10px;
        width: 50%;
    }
    .rightbn{
        width: 50%;
    }
    .rightbn img{
        width: 100%;
        height: 100%;
    }
    .product {
        width: 100%;
        padding-top: 76px;
    }
    .product h2 {
        display: flex;
        justify-content: center;
    }
    .wrap1{
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    .product .box {
        width: 73%;
    }
    .product .box img {
        width: 100%;
    }
    .product .box h4 {
        font-size: 22px;
        padding-bottom: 59px;
    }
}