.elementor-17822 .elementor-element.elementor-element-8eeb64a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17822 .elementor-element.elementor-element-3cbc435{--display:flex;}/* Start custom CSS for shortcode, class: .elementor-element-914f393 *//* ==========================================
   INDUSTRIAL ARCHIVE SYSTEM STYLES
   ========================================== */

:root {
  --ind-bg: #f4f5f7;
  --ind-card-bg: #ffffff;
  --ind-primary: #1a1e24;   /* 机械深灰 */
  --ind-accent: #d9531e;    /* 工业橙/标示色 */
  --ind-text: #333333;
  --ind-text-muted: #666666;
  --ind-border: #e0e3e8;
  --ind-border-dark: #2a2f38;
}

.ind-archive-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 15px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ind-text);
}

/* 1. HEADER & SEARCH BAR */
.ind-archive-header {
  background: var(--ind-primary);
  color: #ffffff;
  padding: 40px 30px;
  border-left: 5px solid var(--ind-accent);
  margin-bottom: 40px;
}

.ind-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.ind-sub-badge {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--ind-accent);
  font-weight: 700;
  display: block;
  margin-bottom: 5px;
}

.ind-main-title {
  font-size: 28px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Search Box */
.ind-search-form .ind-input-group {
  display: flex;
  background: #ffffff;
  border: 1px solid var(--ind-border-dark);
}

.ind-search-input {
  border: none !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  outline: none !important;
  width: 260px;
  color: #111;
  border-radius: 0 !important;
}

.ind-search-btn {
  background: var(--ind-accent);
  color: #ffffff;
  border: none;
  padding: 0 20px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease;
  border-radius: 0;
}

.ind-search-btn:hover {
  background: #b84113;
}

/* 2. MAIN LAYOUT (GRID + SIDEBAR) */
.ind-archive-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
}

/* News Grid */
.ind-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.ind-card {
  background: var(--ind-card-bg);
  border: 1px solid var(--ind-border);
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}

.ind-card:hover {
  border-color: var(--ind-accent);
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  transform: translateY(-3px);
}

.ind-card-img-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #111;
}

.ind-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.ind-card:hover .ind-card-img-wrap img {
  transform: scale(1.06);
  opacity: 0.9;
}

.ind-card-tag {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--ind-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ind-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.ind-card-meta {
  font-size: 12px;
  color: var(--ind-text-muted);
  margin-bottom: 10px;
}

.ind-date {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ind-card-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 10px 0;
}

.ind-card-title a {
  color: var(--ind-primary);
  text-decoration: none;
}

.ind-card-title a:hover {
  color: var(--ind-accent);
}

.ind-card-excerpt {
  font-size: 13px;
  color: var(--ind-text-muted);
  line-height: 1.6;
  margin: 0 0 18px 0;
  flex-grow: 1;
}

.ind-card-btn {
  font-size: 12px;
  font-weight: 800;
  color: var(--ind-primary);
  text-decoration: none;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ind-card:hover .ind-card-btn {
  color: var(--ind-accent);
}

/* 3. SIDEBAR STYLES */
.ind-widget {
  background: #ffffff;
  border: 1px solid var(--ind-border);
  padding: 24px;
  margin-bottom: 30px;
}

.ind-widget-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ind-primary);
  margin: 0 0 20px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--ind-border);
  padding-bottom: 8px;
  position: relative;
}

.ind-widget-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--ind-accent);
}

/* Recent Posts Widget */
.ind-recent-item {
  display: flex;
  gap: 12px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px dashed var(--ind-border);
}

.ind-recent-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.ind-recent-thumb {
  width: 65px;
  height: 65px;
  flex-shrink: 0;
  background: #222;
}

.ind-recent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ind-recent-date {
  font-size: 11px;
  color: var(--ind-text-muted);
  display: block;
  margin-bottom: 3px;
}

.ind-recent-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}

.ind-recent-title a {
  color: var(--ind-primary);
  text-decoration: none;
}

.ind-recent-title a:hover {
  color: var(--ind-accent);
}

/* Category Widget */
.ind-cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ind-cat-list li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--ind-border);
  color: var(--ind-primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.ind-cat-list li a:hover {
  color: var(--ind-accent);
}

.cat-count {
  background: var(--ind-bg);
  color: var(--ind-text-muted);
  font-size: 11px;
  padding: 2px 8px;
  font-weight: 700;
}

/* CTA Widget (Industrial Feature) */
.ind-cta-widget {
  background: var(--ind-primary);
  color: #ffffff;
  border: none;
  text-align: center;
}

.ind-cta-inner {
  padding: 10px 0;
}

.ind-cta-icon {
  font-size: 32px;
  color: var(--ind-accent);
  display: block;
  margin-bottom: 10px;
}

.ind-cta-widget h4 {
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 10px 0;
}

.ind-cta-widget p {
  font-size: 13px;
  color: #a0a6b0;
  line-height: 1.5;
  margin-bottom: 20px;
}

.ind-cta-btn {
  display: block;
  background: var(--ind-accent);
  color: #ffffff;
  padding: 12px 20px;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  letter-spacing: 1px;
  transition: background 0.2s ease;
}

.ind-cta-btn:hover {
  background: #e6602b;
}

/* Pagination */
.ind-pagination ul {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 30px 0 0 0;
}

.ind-pagination li a,
.ind-pagination li span {
  display: inline-block;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--ind-border);
  color: var(--ind-primary);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}

.ind-pagination li span.current {
  background: var(--ind-primary);
  color: #ffffff;
  border-color: var(--ind-primary);
}

/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {
  .ind-archive-layout {
    grid-template-columns: 1fr;
  }
  .ind-news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .ind-news-grid {
    grid-template-columns: 1fr;
  }
  .ind-search-input {
    width: 100%;
  }
  .ind-search-form .ind-input-group {
    flex-direction: column;
  }
  .ind-search-btn {
    padding: 12px;
    justify-content: center;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8eeb64a *//****************************************************
 ZK BLOG ARCHIVE DESIGN
 Industrial B2B Style
 Compatible with Elementor
****************************************************/


/* ===============================
   Global Container
================================ */

.zk-container{

    max-width:1200px;

    margin:0 auto;

    padding-left:20px;

    padding-right:20px;

}



/* ===============================
   Hero Section
================================ */


.zk-blog-hero{

    padding:90px 0 70px;

    background:#ffffff;

}



.zk-blog-heading{

    max-width:760px;

}



.zk-subtitle{

    display:inline-block;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    color:#e4572e;

    margin-bottom:20px;

}



.zk-blog-heading h1{


    font-size:48px;

    line-height:1.15;

    font-weight:700;

    color:#111;

    margin-bottom:25px;


}



.zk-blog-heading p{

    font-size:18px;

    line-height:1.8;

    color:#666;

}



/* ===============================
 Category Navigation
================================ */


.zk-category-section{

    border-top:1px solid #eee;

    border-bottom:1px solid #eee;

}



.zk-category-menu{


    display:flex;

    gap:35px;

    align-items:center;

    flex-wrap:wrap;

    padding:25px 0;


}



.zk-category-menu a{


    font-size:14px;

    font-weight:600;

    text-transform:uppercase;

    color:#333;

    text-decoration:none;

    position:relative;


}



.zk-category-menu a:hover,

.zk-category-menu .active{


    color:#e4572e;


}



.zk-category-menu a:after{


    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#e4572e;

    transition:.3s;


}



.zk-category-menu a:hover:after,

.zk-category-menu .active:after{


    width:100%;


}





/* ===============================
 Featured Article
================================ */


.zk-featured-section{


    padding:80px 0;


}



.zk-featured-wrapper{


    display:grid;

    grid-template-columns:

    1.2fr 1fr;


    gap:60px;

    align-items:center;


}




.zk-featured-image{


    overflow:hidden;

    border-radius:8px;


}



.zk-featured-image img{


    width:100%;

    height:500px;

    object-fit:cover;

    transition:.5s;


}



.zk-featured-image:hover img{


    transform:scale(1.05);


}




.zk-featured-content{


    padding-right:30px;


}




.zk-featured-meta{


    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    color:#e4572e;

    margin-bottom:20px;


}




.zk-featured-content h2{


    font-size:36px;

    line-height:1.3;

    margin-bottom:20px;


}



.zk-featured-content h2 a{


    color:#111;

    text-decoration:none;


}



.zk-featured-content h2 a:hover{


    color:#e4572e;


}




.zk-featured-date{


    font-size:14px;

    color:#888;

    margin-bottom:20px;


}



.zk-featured-content p{


    font-size:16px;

    line-height:1.8;

    color:#666;

    margin-bottom:30px;


}




.zk-read-more{


    display:inline-flex;

    align-items:center;

    padding:14px 30px;

    background:#111;

    color:#fff!important;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:.3s;


}



.zk-read-more:hover{


    background:#e4572e;


}





/* ===============================
 Blog Section
================================ */


.zk-blog-section{


    padding:70px 0;


}




.zk-section-title{


    text-align:center;

    margin-bottom:50px;


}



.zk-section-title h2{


    font-size:40px;

    margin-bottom:15px;


}



.zk-section-title p{


    color:#666;

}





/* ===============================
 Blog Grid
================================ */


.zk-blog-data{


    display:grid;

    grid-template-columns:

    repeat(3,1fr);


    gap:35px;


}





.zk-post-item{


    background:#fff;

    border:1px solid #eee;

    overflow:hidden;

    transition:.35s;


}



.zk-post-item:hover{


    transform:translateY(-8px);


}





.zk-post-item img{


    width:100%;

    height:260px;

    object-fit:cover;


}



.zk-post-item h3{


    font-size:22px;

    line-height:1.4;

    padding:0 25px;

    margin-top:25px;


}



.zk-post-item h3 a{


    color:#111;

    text-decoration:none;


}



.zk-post-item h3 a:hover{


    color:#e4572e;


}



.zk-category{


    padding:20px 25px 0;


    font-size:13px;

    color:#e4572e;

    font-weight:700;

    text-transform:uppercase;


}



.zk-date{


    padding:10px 25px;

    color:#999;

    font-size:13px;


}



.zk-post-item p{


    padding:0 25px 30px;

    color:#666;

    line-height:1.7;


}





/* ===============================
 CTA Section
================================ */


.zk-blog-cta{


    padding:80px 0;


}




.zk-cta-box{


    text-align:center;

    background:#111;

    padding:70px 30px;

    color:#fff;


}



.zk-cta-box h2{


    font-size:38px;

    margin-bottom:20px;


}



.zk-cta-box p{


    color:#ddd;

    margin-bottom:35px;


}



.zk-btn{


    display:inline-block;

    background:#e4572e;

    color:#fff!important;

    padding:15px 35px;

    text-decoration:none;

    font-weight:600;


}



/* ===============================
 Tablet
================================ */


@media(max-width:1024px){


.zk-featured-wrapper{


    grid-template-columns:1fr;


}



.zk-featured-image img{


    height:400px;


}



.zk-blog-data{


    grid-template-columns:

    repeat(2,1fr);


}


}





/* ===============================
 Mobile
================================ */


@media(max-width:767px){



.zk-blog-heading h1{


    font-size:34px;


}



.zk-category-menu{


    gap:20px;


}



.zk-featured-section{


    padding:50px 0;


}



.zk-featured-content{


    padding-right:0;


}



.zk-featured-content h2{


    font-size:28px;


}



.zk-featured-image img{


    height:280px;


}



.zk-blog-data{


    grid-template-columns:1fr;


}



.zk-post-item img{


    height:220px;


}



.zk-section-title h2{


    font-size:30px;


}

/* =================================
 Scroll Animation
================================= */


.zk-post-item,
.zk-featured-wrapper{


    opacity:0;

    transform:
    translateY(40px);

    transition:
    all .8s ease;


}



.zk-visible{


    opacity:1;

    transform:
    translateY(0);


}




/* Image Loading */

.zk-featured-image img{


    opacity:0;

    transition:
    opacity .8s ease,
    transform .5s ease;


}



.zk-featured-image img.loaded{


    opacity:1;


}






}/* End custom CSS */