﻿.layoutList{
padding: 0px 10px;
display: flex;
}
.listContent{

width: 70%;
max-width: 70%;
flex-basis: 70%;
}
.listMenu{
padding-right: 30px;
width: 30%;
max-width: 30%;
flex-basis: 30%;
}
@media (max-width: 780px){
.listMenu{
display: none;
}
.listContent{
width: 100%;
max-width: 100%;
flex-basis: 100%;
}
}
@media (min-width: 1300px){
.listMenu{
width: 25%;
max-width: 25%;
flex-basis: 25%;
}
.listContent{
width: 75%;
max-width: 75%;
flex-basis: 750%;
}
}

@media (min-width: 1500px){
.listMenu{
width: 20%;
max-width: 20%;
flex-basis: 20%;
}
.listContent{
width: 80%;
max-width: 80%;
flex-basis: 80%;
}
}
@media (min-width: 2200px){
.listMenu{
width: 15%;
max-width: 15%;
flex-basis: 15%;
}
.listContent{
width: 85%;
max-width: 85%;
flex-basis: 85%;
}
}
@media (min-width: 901px) and (max-width:1100px){
.listMenu{
width: 35%;
max-width: 35%;
flex-basis: 35%;
}
.listContent{
width: 65%;
max-width: 65%;
flex-basis: 65%;
}}
@media (min-width: 781px) and (max-width:900px){
.listMenu{
width: 40%;
max-width: 40%;
flex-basis: 40%;
}
.listContent{
width: 60%;
max-width: 60%;
flex-basis: 60%;
}}