body { margin: 0; font-family: 'Segoe UI', Arial, sans-serif; background: #e3f2fd; overflow-x: hidden; }
.header { background: #0288d1; color: white; padding: 35px 15px; display: flex; justify-content: center; align-items: center; text-align: center; }
.header-center-wrapper { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.logo img { width: 115px; height: auto; }
.titles h1 { margin: 0; font-size: 34px; }
.titles h3 { margin: 5px 0; color: #ffd700; font-size: 22px; }
.navbar { background: #01579b; text-align: center; padding: 15px; position: sticky; top: 0; z-index: 1000; }
.navbar a { color: white; text-decoration: none; padding: 0 20px; font-weight: bold; }
.indicator-badge { background: #b3e5fc; padding: 12px 50px; border-radius: 15px; color: #01579b; font-size: 24px; font-weight: bold; display: inline-block; border-bottom: 6px solid #0288d1; }
.library-container { max-width: 1100px; margin: 20px auto; display: flex; justify-content: flex-end; padding: 0 20px; }
.library-btn { background: #ffd700; color: #01579b; padding: 10px 20px; border-radius: 50px; text-decoration: none; font-weight: bold; font-size: 24px; border: 2px solid #01579b; }
.notice-container { display: flex; background: #99f8a1; border: 2px solid #007bff; max-width: 1000px; margin: 20px auto; height: 55px; align-items: center; border-radius: 8px; overflow: hidden; }
.notice-title { background: #007bff; color: white; padding: 0 25px; height: 100%; display: flex; align-items: center; font-weight: bold; font-size: 20px; }
.notice-content { flex-grow: 1; padding: 0 15px; font-size: 18px; }
.slideshow-container { max-width: 1000px; margin: 30px auto; border-radius: 20px; overflow: hidden; border: 5px solid white; box-shadow: 0 10px 30px rgba(0,0,0,0.15); background: white; }
.mySlides { display: none; }
.mySlides img { width: 100%; height: 450px; object-fit: cover; }
.dot { height: 12px; width: 12px; margin: 0 5px; background-color: #bbb; border-radius: 50%; display: inline-block; cursor: pointer; transition: 0.3s; }
.dot.active { background-color: #01579b; }
.fade { animation: fadeEffect 1.5s; }
@keyframes fadeEffect { from {opacity: .4} to {opacity: 1} }
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 25px; max-width: 1100px; margin: 0 auto; padding: 50px 20px; }
.card { background: white; padding: 30px; border-radius: 20px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.08); transition: 0.3s; border-bottom: 5px solid #0288d1; }
.card:hover { transform: translateY(-5px); }
.circle { width: 85px; height: 85px; background: #e3f2fd; border-radius: 50%; margin: 0 auto 20px; line-height: 85px; font-size: 38px; border: 3px solid #0288d1; }
.card h3 { margin: 0; color: #01579b; font-size: 20px; }
.link { text-decoration: none; color: inherit; }
.footer { background: #01579b; color: white; text-align: center; padding: 15px; margin-top: 50px; border-top: 4px solid #ffd700; }
@media (max-width: 767px) {
    .logo img { width: 75px; }
    .titles h1 { font-size: 20px; }
    .mySlides img { height: 250px; }
    .container { grid-template-columns: repeat(2, 1fr); gap: 15px; }
}