@charset "UTF-8";

/* ===== 栅格系统 ===== */
.row { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -15px; }
.col { padding: 0 15px; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; }
.col-2 { width: 16.666%; padding: 0 15px; }
.col-3 { width: 25%; padding: 0 15px; }
.col-4 { width: 33.333%; padding: 0 15px; }
.col-6 { width: 50%; padding: 0 15px; }
.col-8 { width: 66.666%; padding: 0 15px; }
.col-9 { width: 75%; padding: 0 15px; }
.col-12 { width: 100%; padding: 0 15px; }

/* ===== 容器 ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.container-fluid { width: 100%; padding: 0 20px; }
.section { padding: 60px 0; }
.section-title { font-size: 28px; color: #1A2B4A; margin-bottom: 10px; position: relative; padding-bottom: 15px; }
.section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: #C9A96E; }
.section-subtitle { color: #666; font-size: 15px; margin-bottom: 40px; }

/* ===== 响应式断点 ===== */
@media (max-width: 1024px) {
  .col-md-4 { width: 33.333%; }
  .col-md-6 { width: 50%; }
  .col-md-12 { width: 100%; }
}

@media (max-width: 768px) {
  .col-sm-6 { width: 50%; }
  .col-sm-12 { width: 100%; }
  .section { padding: 40px 0; }
  .section-title { font-size: 22px; }
  .container { padding: 0 15px; }
}

@media (max-width: 480px) {
  .col-xs-12 { width: 100%; }
  .section { padding: 30px 0; }
  .section-title { font-size: 20px; }
}

/* ===== Flex响应式 ===== */
@media (max-width: 768px) {
  .flex-sm-wrap { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
  .flex-sm-col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; }
  .text-sm-center { text-align: center; }
}

/* ===== 间距工具 ===== */
.mt-10 { margin-top: 10px; } .mt-20 { margin-top: 20px; } .mt-30 { margin-top: 30px; } .mt-40 { margin-top: 40px; }
.mb-10 { margin-bottom: 10px; } .mb-20 { margin-bottom: 20px; } .mb-30 { margin-bottom: 30px; } .mb-40 { margin-bottom: 40px; }
.pt-10 { padding-top: 10px; } .pt-20 { padding-top: 20px; } .pt-40 { padding-top: 40px; } .pt-60 { padding-top: 60px; }
.pb-10 { padding-bottom: 10px; } .pb-20 { padding-bottom: 20px; } .pb-40 { padding-bottom: 40px; } .pb-60 { padding-bottom: 60px; }