/*그리드스타일*/
.grid,.grid-2,.grid-3,.grid-4,.grid-5,.grid-6  { display: grid; grid-gap: 2rem; }
.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: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; }
 }