@charset "utf-8";
/* Modern Template for 洛阳钧科机电 */
/* Design: Navy + Gold, Full-viewport banner, Clean & Modern */

* { padding:0; margin:0; box-sizing:border-box; }
body { font-family: "PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif; color:#333; background:#fff; -webkit-font-smoothing:antialiased; padding-top:70px; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
li { list-style:none; }
input:focus, textarea:focus { outline:none; }

/* ============ HEADER ============ */

/* ============ HEADER & NAVIGATION ============ */
.header { position:fixed; top:0; left:0; width:100%; z-index:1000; background:#fff; border-bottom:1px solid #e8eaef; transition:all .3s; }
.header.scrolled { box-shadow:0 2px 20px rgba(0,0,0,.08); }
.header-inner { max-width:1400px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:70px; padding:0 20px; }
.header-logo { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.header-logo img { height:38px; }
.header-logo .tagline { padding-left:12px; border-left:1px solid #ddd; font-size:13px; color:#999; line-height:18px; white-space:nowrap; }

/* Inline nav */
.header-nav { display:flex; list-style:none; padding:0; margin:0; gap:0; }
.header-nav > li { position:relative; }
.header-nav > li > a { display:block; padding:0 14px; height:70px; line-height:70px; color:#444; font-size:14px; transition:all .3s; white-space:nowrap; text-decoration:none; }
.header-nav > li > a::after { content:''; position:absolute; bottom:0; left:14px; right:14px; height:2px; background:#3b6fa0; transform:scaleX(0); transition:transform .3s; }
.header-nav > li:hover > a, .header-nav > li.active > a { color:#3b6fa0; }
.header-nav > li:hover > a::after, .header-nav > li.active > a::after { transform:scaleX(1); }

/* Dropdown */
.nav-sub { position:absolute; top:70px; left:0; background:#fff; min-width:120px; border-radius:0 0 6px 6px; overflow:hidden; opacity:0; visibility:hidden; transition:all .2s; box-shadow:0 8px 24px rgba(0,0,0,.1); z-index:999; border:1px solid #eee; border-top:none; list-style:none; padding:0; margin:0; }
.header-nav > li:hover .nav-sub { opacity:1; visibility:visible; }
.nav-sub:empty { display:none; }
.nav-sub li { display:block; }
.nav-sub a { display:block; padding:10px 16px; color:#555; font-size:13px; text-align:center; border-bottom:1px solid #eee; transition:all .15s; white-space:nowrap; text-decoration:none; }
.nav-sub li:last-child a { border-bottom:none; }
.nav-sub a:hover { color:#3b6fa0; background:#f0f4f8; }

/* Phone */
.header-tel { display:flex; align-items:center; gap:5px; color:#3b6fa0; font-size:15px; font-weight:600; white-space:nowrap; flex-shrink:0; }
.header-tel i { font-size:16px; }

/* ============ BANNER ============ */
.banner { width:100%; position:relative; overflow:hidden; }
.banner .bx-wrapper { margin:0; border:none; box-shadow:none; }
.banner .bx-wrapper img { width:100%; height:auto; min-height:600px; object-fit:cover; display:block; }
.banner .bx-pager { bottom:30px !important; }
.banner .bx-pager-item a { width:14px !important; height:14px !important; border-radius:50% !important; background:rgba(255,255,255,.4) !important; }
.banner .bx-pager-item a.active { background:#3b6fa0 !important; }

/* Page banner (sub pages) */
.page-banner { width:100%; height:360px; overflow:hidden; position:relative; }
.page-banner img { width:100%; height:100%; object-fit:cover; }
.page-banner::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(59,111,160,.4) 0%, rgba(59,111,160,.7) 100%); }
.page-banner-text { position:absolute; bottom:50px; left:50%; transform:translateX(-50%); z-index:2; text-align:center; }
.page-banner-text h2 { font-size:36px; color:#fff; font-weight:700; letter-spacing:4px; }
.page-banner-text p { font-size:14px; color:rgba(255,255,255,.6); margin-top:10px; letter-spacing:2px; }

/* ============ SECTIONS ============ */
.section { padding:70px 20px; }
.section-gray { background:#f7f8fa; }
.section-dark { background:#f5f6f8; color:#333; }
.section-inner { max-width:1400px; margin:0 auto; }

.section-title { text-align:center; margin-bottom:40px; }
.section-title h2 { font-size:36px; font-weight:700; color:#3b6fa0; letter-spacing:3px; }
.section-title p { font-size:15px; color:#999; margin-top:12px; letter-spacing:1px; }
.section-title .line { width:60px; height:3px; background:#3b6fa0; margin:15px auto 0; }
.section-dark .section-title h2 { color:#333; }

/* ============ PRODUCT CARDS ============ */
.product-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:25px; }
.product-card { background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,.06); transition:all .4s; }
.product-card:hover { transform:translateY(-8px); box-shadow:0 12px 40px rgba(0,0,0,.12); }
.product-card-image { height:220px; overflow:hidden; }
.product-card-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.product-card:hover .product-card-image img { transform:scale(1.08); }
.product-card-body { padding:20px; text-align:center; }
.product-card-body h4 { font-size:16px; color:#3b6fa0; font-weight:600; }
.product-card-body p { font-size:13px; color:#999; margin-top:8px; }

/* ============ ADVANTAGE ============ */
.advantage-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:30px; }
.advantage-card { text-align:center; padding:40px 20px; background:#fff; border-radius:8px; border:1px solid #e0e3e8; transition:all .3s; }
.advantage-card:hover { background:#f0f4f8; border-color:#3b6fa0; }
.advantage-card .num { font-size:48px; font-weight:800; color:#3b6fa0; line-height:1; }
.advantage-card .label { font-size:15px; color:#555; margin-top:12px; }
.advantage-card .desc { font-size:13px; color:#999; margin-top:8px; line-height:1.6; }

/* ============ NEWS ============ */
.news-split { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.news-col h3 { font-size:20px; color:#3b6fa0; margin-bottom:25px; padding-bottom:12px; border-bottom:2px solid #3b6fa0; display:flex; justify-content:space-between; align-items:center; }
.news-col h3 a { font-size:13px; color:#999; font-weight:normal; }
.news-col h3 a:hover { color:#3b6fa0; }
.news-item { display:flex; gap:15px; padding:15px 0; border-bottom:1px solid #eee; transition:background .3s; }
.news-item:hover { background:#fafbfc; margin:0 -10px; padding:15px 10px; border-radius:6px; }
.news-date { min-width:55px; text-align:center; }
.news-date .d { font-size:26px; font-weight:700; color:#3b6fa0; line-height:1; }
.news-date .m { font-size:12px; color:#999; margin-top:4px; }
.news-info h5 { font-size:15px; color:#333; font-weight:500; line-height:1.4; }
.news-info p { font-size:13px; color:#aaa; margin-top:6px; line-height:1.5; }
.news-list-item { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid #eee; }
.news-list-item:hover { color:#3b6fa0; }
.news-list-item span { font-size:13px; color:#ccc; white-space:nowrap; }

/* ============ ABOUT ============ */
.about-preview { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-image img { border-radius:8px; box-shadow:0 8px 30px rgba(0,0,0,.1); }
.about-text h3 { font-size:28px; color:#3b6fa0; margin-bottom:20px; }
.about-text p { font-size:15px; color:#666; line-height:2; margin-bottom:15px; }
.about-text .more { display:inline-block; margin-top:10px; padding:12px 30px; background:#3b6fa0; color:#fff; border-radius:4px; font-size:14px; transition:all .3s; }
.about-text .more:hover { background:#2d5a8a; transform:translateY(-2px); }

/* ============ CASES ============ */
.case-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.case-card { border-radius:8px; overflow:hidden; position:relative; }
.case-card img { width:100%; height:240px; object-fit:cover; transition:transform .5s; }
.case-card:hover img { transform:scale(1.08); }
.case-card-overlay { position:absolute; bottom:0; left:0; right:0; padding:20px; background:linear-gradient(transparent, rgba(0,0,0,.7)); color:#fff; }
.case-card-overlay h5 { font-size:16px; font-weight:600; }

/* ============ CONTACT BAR ============ */
.contact-bar { display:flex; justify-content:center; align-items:center; gap:40px; padding:30px 0; flex-wrap:wrap; }
.contact-bar-item { text-align:center; color:#333; }
.contact-bar-item i { font-size:28px; color:#3b6fa0; margin-bottom:8px; display:block; }
.contact-bar-item h5 { font-size:14px; color:#999; margin-bottom:4px; }
.contact-bar-item p { font-size:16px; color:#333; font-weight:600; }

/* ============ FOOTER ============ */
.site-footer { background:#2a3040; padding:50px 20px 20px; color:rgba(255,255,255,.6); }
.footer-inner { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; }
.footer-col h4 { color:#fff; font-size:16px; margin-bottom:20px; position:relative; padding-bottom:10px; }
.footer-col h4::after { content:''; position:absolute; bottom:0; left:0; width:30px; height:2px; background:#3b6fa0; }
.footer-col p, .footer-col a { font-size:14px; line-height:2.2; display:block; }
.footer-col a:hover { color:#3b6fa0; }
.footer-bottom { max-width:1400px; margin:30px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); text-align:center; font-size:13px; }

/* ============ SUBPAGES ============ */
.page-wrap { display:flex; max-width:1400px; margin:0 auto; padding:40px 20px; gap:40px; }
.sidebar { width:260px; flex-shrink:0; }
.sidebar-title { background:#3b6fa0; color:#fff; padding:18px 20px; font-size:18px; font-weight:600; text-align:center; letter-spacing:2px; }
.sidebar-nav { background:#f7f8fa; border:1px solid #eee; border-top:none; }
.sidebar-nav a { display:block; padding:14px 20px; font-size:14px; color:#555; border-bottom:1px solid #eee; transition:all .3s; }
.sidebar-nav a::before { content:""; margin-right:8px; }
.sidebar-nav a:hover, .sidebar-nav a.active { color:#3b6fa0; background:#fff; padding-left:25px; }
.sidebar-contact { margin-top:15px; background:#3b6fa0; color:#fff; padding:25px 20px; text-align:center; border-radius:4px; }
.sidebar-contact i { font-size:30px; color:#3b6fa0; margin-bottom:10px; display:block; }
.sidebar-contact p { font-size:18px; font-weight:700; margin:8px 0; }

/* Page content */
.page-content { flex:1; min-width:0; }
.page-content h1 { font-size:26px; color:#3b6fa0; margin-bottom:25px; padding-bottom:15px; border-bottom:2px solid #3b6fa0; }
.page-content p { font-size:15px; color:#666; line-height:2; margin-bottom:15px; }
.page-content img { max-width:100%; border-radius:4px; margin:15px 0; }

/* Product list grid */
.img-list { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.img-list .card { background:#fff; border-radius:6px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.05); transition:all .3s; }
.img-list .card:hover { transform:translateY(-5px); box-shadow:0 8px 25px rgba(0,0,0,.1); }
.img-list .card-img { height:200px; overflow:hidden; }
.img-list .card-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.img-list .card:hover .card-img img { transform:scale(1.05); }
.img-list .card-body { padding:15px; text-align:center; }
.img-list .card-body h4 { font-size:15px; color:#333; }

/* News list */
.news-article { background:#fff; padding:30px; margin-bottom:20px; border-radius:6px; box-shadow:0 2px 12px rgba(0,0,0,.04); display:flex; gap:25px; }
.news-article .date-box { min-width:70px; text-align:center; padding-top:5px; }
.news-article .date-box .d { font-size:30px; font-weight:700; color:#3b6fa0; line-height:1; }
.news-article .date-box .ym { font-size:12px; color:#999; margin-top:4px; }
.news-article h3 { font-size:18px; color:#333; margin-bottom:10px; }
.news-article h3 a:hover { color:#3b6fa0; }
.news-article p { font-size:14px; color:#999; line-height:1.8; }

/* Pagination */
.pagination { text-align:center; margin:40px 0; }
.pagination a, .pagination span { display:inline-block; padding:8px 16px; margin:0 4px; border-radius:4px; font-size:14px; color:#666; border:1px solid #ddd; transition:all .3s; }
.pagination a:hover, .pagination span.current { background:#3b6fa0; color:#fff; border-color:#3b6fa0; }

/* Contact form */
.contact-form input, .contact-form textarea { width:100%; padding:12px 15px; border:1px solid #ddd; border-radius:4px; font-size:14px; margin-bottom:15px; transition:border .3s; }
.contact-form input:focus, .contact-form textarea:focus { border-color:#3b6fa0; }
.contact-form textarea { height:150px; resize:vertical; }
.contact-form button { padding:12px 40px; background:#3b6fa0; color:#fff; border:none; border-radius:4px; font-size:15px; cursor:pointer; transition:all .3s; }
.contact-form button:hover { background:#2d5a8a; transform:translateY(-2px); }

/* Search */
.search-box { display:flex; margin-bottom:30px; }
.search-box input { flex:1; padding:12px 15px; border:2px solid #3b6fa0; border-right:none; border-radius:4px 0 0 4px; font-size:15px; }
.search-box button { padding:12px 25px; background:#3b6fa0; color:#fff; border:none; border-radius:0 4px 4px 0; cursor:pointer; font-size:15px; }

/* ============ RESPONSIVE ============ */
@media (max-width:1200px) {
  .product-grid { grid-template-columns:repeat(3, 1fr); }
  .case-grid { grid-template-columns:repeat(2, 1fr); }
  .img-list { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:768px) {
  .product-grid, .advantage-grid, .case-grid { grid-template-columns:1fr 1fr; }
  .news-split { grid-template-columns:1fr; }
  .about-preview { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr 1fr; }
  .page-wrap { flex-direction:column; }
  .sidebar { width:100%; }
  .img-list { grid-template-columns:1fr; }
}

/* Back to top */
.back-top { position:fixed; bottom:30px; right:30px; width:45px; height:45px; background:#3b6fa0; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:20px; transition:all .3s; opacity:0; visibility:hidden; z-index:999; }
.back-top.show { opacity:1; visibility:visible; }
.back-top:hover { background:#3b6fa0; transform:translateY(-3px); }