
/*그리드스타일*/
.grid,.grid-2,.grid-3,.grid-4,.grid-5,.grid-6 { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
@media screen and (max-width:1200px){
 .m1200-grid-1 { grid-template-columns: repeat(1, 1fr); }
 .m1200-grid-2 { grid-template-columns: repeat(2, 1fr); }
 .m1200-grid-3 { grid-template-columns: repeat(3, 1fr); }
 .m1200-grid-4 { grid-template-columns: repeat(4, 1fr); }
 .m1200-grid-5 { grid-template-columns: repeat(5, 1fr); }
 }
 @media screen and (max-width:1024px){
 .m1024-grid-1 { grid-template-columns: repeat(1, 1fr); }
 .m1024-grid-2 { grid-template-columns: repeat(2, 1fr); }
 .m1024-grid-3 { grid-template-columns: repeat(3, 1fr); }
 .m1024-grid-4 { grid-template-columns: repeat(4, 1fr); }
 }
 @media screen and (max-width:900px){
 .m900-grid-1 { grid-template-columns: repeat(1, 1fr); grid-gap: 1rem; }
 .m900-grid-2 { grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; }
 .m900-grid-3 { grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; }
 .m900-grid-4 { grid-template-columns: repeat(4, 1fr); grid-gap: 1rem; }
 }
 @media screen and (max-width:768px){
 .m768-grid-1 { grid-template-columns: repeat(1, 1fr); grid-gap: 1rem; }
 .m768-grid-2 { grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; }
 .m768-grid-3 { grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; }
 .m768-grid-4 { grid-template-columns: repeat(4, 1fr); grid-gap: 1rem; }
 }
 @media screen and (max-width:600px){
 .m600-grid-1 { grid-template-columns: repeat(1, 1fr); grid-gap: 1rem; }
 .m600-grid-2 { grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; }
 .m600-grid-3 { grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; }
 .m600-grid-4 { grid-template-columns: repeat(4, 1fr); grid-gap: 1rem; }
 }
 @media screen and (max-width:500px){
 .m500-grid-1 { grid-template-columns: repeat(1, 1fr); grid-gap: 1rem; }
 .m500-grid-2 { grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; }
 .m500-grid-3 { grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; }
 .m500-grid-4 { grid-template-columns: repeat(4, 1fr); grid-gap: 1rem; }
 }
