*{margin:0;padding:0;box-sizing:border-box;font-family:"PingFang SC","Microsoft YaHei",sans-serif;}
body{background:#f5f7fa;color:#333;line-height:1.6;scroll-behavior:smooth;}
a{color:#e74c3c;text-decoration:none;}
a:hover{text-decoration:underline;}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}
.navbar{position:sticky;top:0;z-index:1000;background:#2c3e50;color:#fff;padding:15px 0;box-shadow:0 2px 10px rgba(0,0,0,0.1);}
.navbar .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;}
.logo{font-size:28px;font-weight:700;color:#e74c3c;}
.logo span{color:#fff;}
.nav-links{display:flex;gap:25px;list-style:none;}
.nav-links a{color:#ecf0f1;font-size:15px;transition:color 0.3s;}
.nav-links a:hover{color:#e74c3c;text-decoration:none;}
.menu-toggle{display:none;flex-direction:column;cursor:pointer;}
.menu-toggle span{width:28px;height:3px;background:#fff;margin:4px 0;border-radius:2px;}
.breadcrumb{background:#fff;padding:12px 0;border-bottom:1px solid #e0e0e0;font-size:14px;color:#666;}
.breadcrumb a{color:#e74c3c;}
.breadcrumb span{margin:0 8px;}
.banner{position:relative;overflow:hidden;height:400px;background:linear-gradient(135deg,#1a252f 0%,#2c3e50 50%,#e74c3c 100%);}
.banner-slide{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transition:opacity 1s;padding:40px;}
.banner-slide.active{opacity:1;}
.banner-slide h2{font-size:42px;margin-bottom:15px;text-shadow:0 2px 8px rgba(0,0,0,0.5);}
.banner-slide p{font-size:20px;max-width:700px;text-align:center;}
.banner-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:12px;}
.banner-dots span{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,0.4);cursor:pointer;transition:background 0.3s;}
.banner-dots span.active{background:#e74c3c;}
section{padding:60px 0;}
h1{font-size:38px;text-align:center;margin-bottom:20px;color:#2c3e50;}
h2{font-size:30px;text-align:center;margin-bottom:40px;color:#2c3e50;position:relative;}
h2::after{content:"";display:block;width:60px;height:4px;background:#e74c3c;margin:15px auto 0;border-radius:2px;}
h3{font-size:24px;margin:30px 0 15px;color:#34495e;}
h4{font-size:20px;margin:20px 0 10px;color:#555;}
p{margin-bottom:15px;color:#555;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:30px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;}
.grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:25px;}
.card{background:rgba(255,255,255,0.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:12px;padding:25px;box-shadow:0 4px 12px rgba(0,0,0,0.06);transition:transform 0.3s,box-shadow 0.3s;}
.card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,0.1);}
.card svg{margin-bottom:15px;}
.card h3{font-size:20px;margin-bottom:10px;}
.card p{font-size:15px;}
.btn{display:inline-block;background:#e74c3c;color:#fff;padding:12px 30px;border-radius:30px;font-size:16px;transition:background 0.3s;border:none;cursor:pointer;}
.btn:hover{background:#c0392b;text-decoration:none;}
.faq-item{margin-bottom:15px;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;}
.faq-question{background:#f9f9f9;padding:18px 20px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background 0.3s;}
.faq-question:hover{background:#eee;}
.faq-question::after{content:"+";font-size:22px;color:#e74c3c;}
.faq-question.active::after{content:"-";}
.faq-answer{padding:0 20px;max-height:0;overflow:hidden;transition:max-height 0.4s ease, padding 0.3s;}
.faq-answer.open{padding:20px;max-height:600px;}
.article-list article{margin-bottom:30px;padding:20px;background:rgba(255,255,255,0.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.04);}
.article-list article h3{margin:0 0 8px;}
.article-list article time{font-size:13px;color:#999;}
.article-list article p{margin:10px 0;}
.read-more{color:#e74c3c;font-weight:600;}
footer{background:#2c3e50;color:#ecf0f1;padding:50px 0 30px;}
footer a{color:#bdc3c7;}
footer a:hover{color:#e74c3c;}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-bottom:30px;}
.footer-grid h4{color:#fff;margin-bottom:15px;font-size:18px;}
.footer-grid ul{list-style:none;}
.footer-grid li{margin-bottom:8px;}
.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid #34495e;font-size:14px;}
.back-top{position:fixed;bottom:40px;right:40px;width:50px;height:50px;background:#e74c3c;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity 0.4s,visibility 0.4s;z-index:999;box-shadow:0 4px 12px rgba(0,0,0,0.2);}
.back-top.show{opacity:1;visibility:visible;}
.dark-mode-toggle{position:fixed;bottom:100px;right:40px;width:50px;height:50px;background:#34495e;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;z-index:999;box-shadow:0 4px 12px rgba(0,0,0,0.2);transition:background 0.3s;}
body.dark{background:#1a1a2e;color:#e0e0e0;}
body.dark .card,body.dark .article-list article,body.dark .faq-item,body.dark .breadcrumb{background:rgba(45,45,68,0.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#ddd;}
body.dark h1,body.dark h2,body.dark h3{color:#eee;}
body.dark p{color:#bbb;}
body.dark .navbar{background:#16213e;}
body.dark footer{background:#0f3460;}
.counter{font-size:48px;font-weight:700;color:#e74c3c;}
.search-box{display:flex;gap:10px;margin:20px 0;}
.search-box input{flex:1;padding:12px 18px;border:2px solid #ddd;border-radius:30px;font-size:16px;outline:none;}
.search-box input:focus{border-color:#e74c3c;}
.search-box button{background:#e74c3c;color:#fff;border:none;padding:12px 25px;border-radius:30px;cursor:pointer;font-size:16px;}
@media(max-width:768px){
.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
.nav-links{display:none;flex-direction:column;width:100%;margin-top:15px;gap:10px;text-align:center;}
.nav-links.open{display:flex;}
.menu-toggle{display:flex;}
.banner{height:280px;}
.banner-slide h2{font-size:28px;}
.banner-slide p{font-size:16px;}
.footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:480px){
.footer-grid{grid-template-columns:1fr;}
h1{font-size:28px;}
h2{font-size:24px;}
}