/* BASIC css start */
/*»ó´Ü Ä¿½ºÅÒ*/
.button-container { max-width: 1200px; margin: 0 auto; padding: 20px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.info-button { background-color: #a7a7a7; color: #fff; padding: 10px 20px; font-size: 16px; text-decoration: none; border-radius: 25px; transition: background-color 0.3s, transform 0.2s; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); display: inline-block; }
.info-button:hover { background-color: #767676; transform: translateY(-2px); }
@media (max-width: 768px) { .info-button { width: 100%; text-align: center; } }


/* Çϴܹ®±¸ */
* { box-sizing: border-box; }
.info-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 10px; padding: 10px; max-width: 1200px; margin: auto; }
.card { background-color: #f8f9fa; border: 1px solid #e0e0e0;  border-radius: 8px; padding: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.2s; }
.card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); }
.card h2 { font-size: 1.3em; color: #333; margin-bottom: 10px; }
.card p { font-size: 1.0em; color: #555; line-height: 1.6; }




/* BASIC css end */