/* ============================================
   MK体育在线官网 - 全站公共样式
   common.css - 6.6KB
   ============================================ */

/* ---- CSS Reset ---- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Microsoft YaHei','PingFang SC','Hiragino Sans GB',sans-serif;line-height:1.6;color:#333;background:#fff}
a{text-decoration:none;color:#3F51B5;transition:color .2s}
a:hover{color:#1A1F3C}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,textarea,select{font-family:inherit;font-size:14px}

/* ---- Container ---- */
.container{width:1200px;margin:0 auto;padding:0 15px}
@media(max-width:1200px){.container{width:100%}}

/* ---- Header ---- */
.header{background:#fff;border-bottom:1px solid #e8eaf6;position:sticky;top:0;z-index:1000}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:80px}
.logo{display:flex;align-items:center;gap:12px}
.logo svg{width:48px;height:48px}
.logo-text h1{font-size:22px;font-weight:700;color:#1A1F3C;line-height:1.2}
.logo-text span{font-size:12px;color:#3F51B5;letter-spacing:2px;text-transform:uppercase}
.nav{display:flex;gap:0}
.nav a{display:block;padding:0 22px;font-size:15px;font-weight:500;color:#333;height:80px;line-height:80px;border-bottom:3px solid transparent;transition:all .25s}
.nav a:hover,.nav a.active{color:#3F51B5;border-bottom-color:#3F51B5;background:#f5f7ff}
.header-contact{text-align:right}
.header-contact .phone{font-size:20px;font-weight:700;color:#3F51B5;display:block}
.header-contact .time{font-size:12px;color:#888}
.mobile-menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:#f5f7ff;border-radius:8px}
.mobile-menu-btn span{display:block;width:24px;height:2px;background:#1A1F3C;transition:all .3s}

/* ---- Footer ---- */
.footer{background:#1A1F3C;color:#a0a8d0;padding:60px 0 0}
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:40px}
.footer-brand p{font-size:14px;line-height:1.8;margin-top:15px;color:#8a93c0}
.footer-title{font-size:16px;font-weight:600;color:#fff;margin-bottom:20px;position:relative;padding-bottom:10px}
.footer-title::after{content:'';position:absolute;bottom:0;left:0;width:40px;height:2px;background:#3F51B5}
.footer-links li{margin-bottom:10px}
.footer-links a{color:#8a93c0;font-size:14px}
.footer-links a:hover{color:#D6EAF8}
.footer-contact li{display:flex;gap:10px;margin-bottom:12px;font-size:14px;color:#8a93c0}
.footer-contact svg{width:18px;height:18px;flex-shrink:0;color:#3F51B5;margin-top:2px}
.footer-bottom{border-top:1px solid #2a3060;padding:20px 0;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#6a72a0}
.footer-bottom a{color:#8a93c0}

/* ---- Section Title ---- */
.section-title{text-align:center;margin-bottom:50px}
.section-title h2{font-size:32px;font-weight:700;color:#1A1F3C;margin-bottom:12px}
.section-title p{color:#666;font-size:15px}
.section-title .line{width:60px;height:3px;background:#3F51B5;margin:15px auto 0}

/* ---- Buttons ---- */
.btn{display:inline-block;padding:12px 32px;font-size:15px;font-weight:500;text-align:center;transition:all .25s;border:0}
.btn-primary{background:#3F51B5;color:#fff}
.btn-primary:hover{background:#1A1F3C;color:#fff}
.btn-outline{border:2px solid #3F51B5;color:#3F51B5;background:transparent}
.btn-outline:hover{background:#3F51B5;color:#fff}
.btn-light{background:#D6EAF8;color:#1A1F3C}
.btn-light:hover{background:#3F51B5;color:#fff}
.btn-lg{padding:14px 40px;font-size:16px}

/* ---- Breadcrumb ---- */
.breadcrumb{background:#f8f9ff;padding:14px 0;border-bottom:1px solid #e8eaf6}
.breadcrumb-inner{font-size:13px;color:#888}
.breadcrumb-inner a{color:#3F51B5}
.breadcrumb-inner span{color:#aaa;margin:0 6px}

/* ---- Pagination ---- */
.pagination{display:flex;justify-content:center;gap:8px;margin:40px 0}
.pagination a,.pagination span{display:block;padding:8px 16px;border:1px solid #e0e0e0;font-size:14px;color:#555;background:#fff;transition:all .2s}
.pagination a:hover,.pagination .current{background:#3F51B5;color:#fff;border-color:#3F51B5}

/* ---- Back to Top ---- */
.back-to-top{position:fixed;bottom:40px;right:40px;width:48px;height:48px;background:#3F51B5;color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transition:all .3s;z-index:999}
.back-to-top.show{opacity:1;visibility:visible}
.back-to-top:hover{background:#1A1F3C}
.back-to-top svg{width:24px;height:24px}

/* ---- Mobile Menu ---- */
.mobile-nav{display:none;position:fixed;top:80px;left:0;right:0;background:#fff;z-index:999;border-bottom:1px solid #e8eaf6;max-height:calc(100vh - 80px);overflow-y:auto}
.mobile-nav a{display:block;padding:15px 20px;border-bottom:1px solid #f0f0f0;font-size:15px;color:#333}
.mobile-nav a:hover{background:#f5f7ff;color:#3F51B5}

/* ---- Responsive ---- */
@media(max-width:992px){
.header-contact{display:none}
.nav a{padding:0 14px;font-size:14px}
}
@media(max-width:768px){
.container{padding:0 12px}
.nav{display:none}
.mobile-menu-btn{display:flex}
.footer-grid{grid-template-columns:1fr;gap:30px}
.section-title h2{font-size:24px}
}

/* ---- Utility Classes ---- */
.text-center{text-align:center}
.flex{display:flex}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-4{gap:16px}
.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}
.hidden{display:none}

/* ---- Service Process Steps ---- */
.process-steps{display:flex;justify-content:center;gap:20px;margin-top:40px;flex-wrap:wrap}
.process-step{flex:1;min-width:220px;max-width:280px;text-align:center;padding:30px 20px;background:#f8f9ff;border-radius:0;border-top:3px solid #3F51B5;position:relative}
.process-step .step-num{width:48px;height:48px;background:#3F51B5;color:#fff;font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 15px}
.process-step h4{font-size:18px;color:#1A1F3C;margin-bottom:10px}
.process-step p{font-size:14px;color:#666;line-height:1.7}

/* ---- Card Base ---- */
.card{background:#fff;border:1px solid #e8eaf6;padding:25px;transition:all .25s}
.card:hover{border-color:#3F51B5;box-shadow:0 4px 20px rgba(63,81,181,.1)}

/* ---- Tag Links ---- */
.tag-links{display:flex;flex-wrap:wrap;gap:10px}
.tag-links a{display:block;padding:6px 16px;background:#f0f3ff;color:#3F51B5;font-size:13px;transition:all .2s}
.tag-links a:hover{background:#3F51B5;color:#fff}