@media (max-width:700px){
    .main{
        .main-section-first .first-introduction{
            flex-direction: column;

            .introduction-left{
                width: 100%; 
                padding-bottom: 40px;

                .left-title{
                    text-align: center;
                    }

            }

            .introduction-right{
                width: 60%;
                order: -1;

                img{
                    width: 100%;
                }
            }
        }
    }
}

@media (min-width:701px) and (max-width:1000px){
    .main{
        margin-top: 20px;
        .main-section-first .first-introduction{
            flex-direction: column;
            gap: 40px;

            .introduction-left{
                width: 100%; 
                padding-bottom: 40px;
            }

            .introduction-right{
                width: 40%;
                order: -1;
                img{
                    width: 100%;
                }
            }
        }
    }
}