@charset "utf-8";
  /* ===== MOCKUP BANNER ===== */
  .mockup-banner {
    background: linear-gradient(135deg, #1163ac, #c0392b);
    color: #fff; text-align: center; padding: 12px 20px;
    font-size: 14px; font-weight: bold;
    position: sticky; top: 0; z-index: 9999;
  }
  .mockup-banner small { font-weight: normal; opacity: 0.85; display: block;  margin-top: 2px; }

  /* NEW badge */
  .new-badge {
    display: inline-block; background: #1163ac; color: #fff;
    font-size: 9px; padding: 2px 6px; border-radius: 3px;
    font-weight: bold; letter-spacing: 1px; vertical-align: middle;
    margin-left: 4px;
  }
  .new-flag {
    position: absolute; top: -1px; right: -1px;
    background: #1163ac; color: #fff; font-size: 10px;
    padding: 3px 10px; border-radius: 0 4px 0 8px; font-weight: bold;
	display:none;
	line-height:20px;
  }

  /* ===== TOP CONTACT BAR (NEW) ===== */
  .top-contact-bar {
    background: #e74c3c; color: #fff; font-size: 13px; padding: 7px 0;
    display: flex; justify-content: center; align-items: center; gap: 24px;
  }
  .top-contact-bar .phone-hl { color: #ffd54f; font-weight: bold; font-size: 16px; letter-spacing: 0.5px; }
  .top-contact-bar .sep { opacity: 0.3; }

  /* ===== HEADER ===== */
  .header {
    background: #fff; border-bottom: 3px solid #4caf50;
    position: sticky; top: 38px; z-index: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
  .header-inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px;
  }
  .logo { font-size: 28px; font-weight: bold; color: #e74c3c; letter-spacing: 3px; }
  .nav { display: flex; gap: 0; font-size: 14px; }
  .nav a {
    color: #333; text-decoration: none; padding: 10px 13px;
    transition: all .2s; border-bottom: 2px solid transparent;
  }
  .nav a:hover, .nav a.active { color: #4caf50; border-bottom-color: #4caf50; }
  /* NEW: header contact */
  .header-contact {
    display: flex; align-items: center; gap: 14px;
  }
  .header-phone {
    font-size: 17px; font-weight: bold; color: #e74c3c;
    display: flex; align-items: center; gap: 5px;
  }
  .header-phone-icon { font-size: 16px; }
  .header-wechat-wrap { position: relative; }
  .header-wechat-btn {
    background: #e74c3c; color: #fff; border: none; padding: 7px 14px;
    border-radius: 4px; font-size: 13px; cursor: pointer;
    display: flex; align-items: center; gap: 4px;
  }
  .header-wechat-btn:hover + .header-wechat-popup, .header-wechat-popup:hover { display: block; }
  .header-wechat-popup {
    display: none; position: absolute; top: 38px; right: 0;
    background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
    padding: 14px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    width: 170px; text-align: center; z-index: 200;
  }
  .hw-qr {
    width: 120px; height: 120px; background: #f5f5f5; border: 1px solid #eee;
    margin: 0 auto 8px; display: flex; align-items: center; justify-content: center;
    color: #bbb; border-radius: 4px;
  }
  .hw-qr-text {  color: #666; }

  /* ===== BANNER ===== */
  .banner {
    width: 100%; height: 280px;
    background: linear-gradient(135deg, #a5d6a7 0%, #66bb6a 40%, #43a047 70%, #e74c3c 100%);
    display: flex; align-items: center; justify-content: center;
    position: relative;
  }
  .banner-text { color: #fff; font-size: 14px; opacity: 0.5; text-align: center; }

  /* ===== BREADCRUMB ===== */
  .breadcrumb {
    max-width: 1200px; margin: 0 auto; padding: 14px 20px;
    font-size: 13px; color: #999;
  }
  .breadcrumb a { color: #4caf50; text-decoration: none; }

  /* ===== MAIN ===== */
  .main-layout {
    max-width: 1200px; margin: 0 auto; display: flex; gap: 24px;
    padding: 0 20px 40px;
  }

  /* LEFT SIDEBAR */
  .left-sidebar { width: 240px; min-width: 240px; }
  .sidebar-cat {
    background: #fff; border-radius: 4px; overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  }
  .sidebar-cat a {
    display: block; padding: 14px 18px; font-size: 14px;
    color: #555; text-decoration: none; border-left: 3px solid transparent;
    transition: all .15s;
  }
  .sidebar-cat a:hover { background: #f5f5f5; color: #4caf50; }
  .sidebar-cat a.active { background: #4caf50; color: #fff; font-weight: bold; }

  /* ===== NEW: SIDEBAR CONTACT CARD ===== */
  .sidebar-contact-card {
    background: #fff; border-radius: 4px; margin-top: 16px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    overflow: hidden; position: relative;
  }
  .scc-header {
    background: #77b643; color: #fff; padding: 14px 18px;
    font-size: 14px; font-weight: bold;
  }
  .scc-body { padding: 18px; }
  .scc-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid #f0f0f0;
    font-size: 13px; color: #555;
  }
  .scc-item:last-child { border-bottom: none; }
  .scc-icon { font-size: 18px; width: 24px; text-align: center; }
  .scc-value { font-weight: bold; color: #e74c3c; font-size: 15px; }
  .scc-label { color: #999; }
  .scc-wechat-qr {
    width: 100%; background: #f9f9f9; border: 1px solid #eee;
    border-radius: 4px; padding: 12px; text-align: center; margin-top: 6px;
  }
  .scc-wechat-qr .qr-box {
    100px; background: #eee; border: 1px solid #ddd;
    margin: 10px auto; display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: #bbb; border-radius: 4px;
    width: 157px;
  }
  .scc-wechat-qr p { color: #888; }

  /* ===== CONTENT ===== */
  .content-area { flex: 1; }
  .section-block {
    background: #fff; border-radius: 4px; padding: 28px 30px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06); margin-bottom: 20px;
  }

  /* Product Header */
  .product-title { font-size: 26px; color: #333; margin-bottom: 12px; }
  .download-btns { display: flex; gap: 8px; margin-bottom: 16px; }
  .dl-btn {
    background: #e74c3c; color: #fff; border: none; padding: 8px 16px;
    border-radius: 4px; cursor: pointer; font-size: 13px;
  }

  /* ===== NEW: CONTACT STRIP (replaces chat CTA) ===== */
  .contact-strip {
    background: #f5f5f5; border: 1px solid #e0e0e0;
    border-left: 4px solid #e74c3c; border-radius: 0 6px 6px 0;
    padding: 10px 20px; margin-top: 20px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; position: relative;
		border-bottom: 1px solid #dcdbdb;
  }
  .cs-left { display: flex; align-items: center; gap: 20px; }
  .cs-item {
    display: flex; align-items: center; gap: 6px; font-size: 14px; color: #555;
  }
  .cs-item .cs-icon { font-size: 18px; }
  .cs-item .cs-val { font-weight: bold; color: #e74c3c; font-size: 15px; }
  .cs-divider { width: 1px; height: 24px; background: #ddd; }
  .cs-email-btn {
    background: #e74c3c; color: #fff; border: none; padding: 12px 22px;
    border-radius: 4px; font-size: 13px; font-weight: bold; cursor: pointer;
    white-space: nowrap; transition: all .2s;
  }
  .cs-email-btn:hover { background: #1b5e20; }
   .cs-email-btn  a:hover{ color:#fff;}

  /* Section Headings */
  .section-heading {
    font-size: 18px; color: #4caf50; padding-left: 14px;
    border-left: 4px solid #4caf50; margin-bottom: 18px; line-height: 1.4;
  }
  .section-heading span { font-size: 14px; color: #999; margin-left: 8px; }
  .section-text { font-size: 14px; color: #555; line-height: 1.9; }
  .section-text p { margin-bottom: 12px; }
  .section-text b { color: #333; }

  /* Spec Table */
  .spec-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
  .spec-table td {
    padding: 12px 20px; text-align: center; font-size: 14px;
    border: 1px solid #e0e0e0;
  }
  .spec-table tr:nth-child(odd) td { background: #fff9c4; }
  .spec-table tr:nth-child(even) td { background: #ffe0b2; }

  /* ===== NEW: INLINE CONTACT HINT ===== */
  .inline-contact-hint {
    background: #ffeff0; border-radius: 4px; padding: 12px 18px;
  display: flex; align-items: center; gap: 12px;
color: #e74c3c; position: relative;
  }
  .ich-icon { font-size: 18px; }
  .ich-text a { color:#77b643; font-weight: bold; text-decoration: none; }

  /* FAQ */
  .faq-header {
    background: #8bc34a; color: #fff; padding: 14px 24px;
    font-size: 18px; font-weight: bold; border-radius: 4px 4px 0 0;
  }
  .faq-item { padding: 18px 24px; border-bottom: 1px solid #eee; }
  .faq-q { font-size: 15px; color: #333; font-weight: bold; margin-bottom: 8px; }
  .faq-a { font-size: 13px; color: #666; line-height: 1.8; padding-left: 20px; }

  /* ===== NEW: TRUST BAR ===== */
  .trust-bar {
    background: #fff; border-radius: 4px; padding: 20px 30px;
    margin-bottom: 20px;
    position: relative;
	    border: 1px solid #f2f2f2;
    border: 1px solid #e9e9e9;
    margin-top: 30px;
    background: #f5f5f5;
  }
  .trust-row {
    display: flex; justify-content: space-around; align-items: center; gap: 12px;
  }
  .trust-item { text-align: center; flex: 1; }
  .trust-item .t-icon { font-size: 28px; margin-bottom: 4px; }
  .trust-item .t-label { font-size: 13px; color: #333; font-weight: bold; }
  .trust-item .t-desc { color: #999; margin-top: 2px; }
  .trust-sep { width: 1px; height: 40px; background: #eee; }

  /* ===== NEW: INQUIRY FORM ===== */
  .inquiry-section {
    background: #fff; border-radius: 4px; padding: 28px 30px;
     margin-bottom: 20px;
    position: relative;
	border: 1px solid #e9e9e9;
    background: #f5f5f5;
  }
  .inq-title {
    font-size: 16px; color: #333; font-weight: bold; margin-bottom: 4px;
    padding-left: 14px; border-left: 4px solid #72c949;
  }
  .inq-sub {  color: #999; margin-bottom: 16px; padding-left: 18px; }
  .inq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .inq-grid .full { grid-column: 1 / -1; }
  .inq-grid label {  color: #666; margin-bottom: 2px; display: block; }
  .inq-grid input, .inq-grid textarea {
    width: 100%; padding: 9px 12px; border: 1px solid #ddd; border-radius: 4px;
    font-size: 14px; font-family: inherit;
  }
  .inq-grid input:focus, .inq-grid textarea:focus { outline: none; border-color: #4caf50; }
  .inq-grid textarea { height: 56px; resize: vertical; }
  .inq-submit {
    grid-column: 1 / -1; background: #72c949; color: #fff; border: none;
    padding: 11px; border-radius: 4px; font-size: 15px; font-weight: bold;
    cursor: pointer; transition: all .2s;
  }
  .inq-submit:hover { background: #1b5e20; }

  /* ===== SIDEBAR FLOAT (NEW - minimal) ===== */
  .side-float {
    position: fixed; right: 0; top: 45%; transform: translateY(-50%);
    z-index: 900; display: flex; flex-direction: column; gap: 1px;
    border-radius: 6px 0 0 6px; overflow: hidden;
    box-shadow: -2px 0 10px rgba(0,0,0,0.08);
  }
  .sf-item {
    width: 50px; padding: 10px 0; text-align: center;
    cursor: pointer; transition: all .2s; position: relative;
    font-size: 10px; color: #fff; line-height: 1.3;
  }
  .sf-item .sf-icon { font-size: 18px; display: block; margin-bottom: 2px; }
  .sf-item.sf-phone { background: #e74c3c; border-radius: 6px 0 0 0; }
  .sf-item.sf-wechat { background: #07c160; }
  .sf-item.sf-email { background: #1565c0; }
  .sf-item.sf-top { background: #9e9e9e; border-radius: 0 0 0 6px; }
  .sf-item:hover { width: 56px; }
  .sf-tip {
    display: none; position: absolute; right: 58px; top: 50%; transform: translateY(-50%);
    background: #333; color: #fff; padding: 8px 14px; border-radius: 6px;
    white-space: nowrap; font-size: 13px; z-index: 10;
  }
  .sf-tip::after {
    content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
    border: 6px solid transparent; border-left-color: #333;
  }
  .sf-item:hover .sf-tip { display: block; }
  .sf-wx-popup {
    display: none; position: absolute; right: 58px; top: 50%; transform: translateY(-50%);
    background: #fff; border: 1px solid #ddd; border-radius: 8px;
    padding: 14px; box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    width: 155px; text-align: center; z-index: 10;
  }
  .sf-item.sf-wechat:hover .sf-wx-popup { display: block; }
  .sf-wx-qr {
    width: 105px; height: 105px; background: #f5f5f5; border: 1px solid #eee;
    margin: 0 auto 6px; display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: #bbb; border-radius: 4px;
  }
  .sf-wx-popup p { color: #666; }

  /* ===== FOOTER ===== */
  .footer {
    background: #263238; color: #ccc; padding: 36px 0 16px;
  }
  .footer-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 20px;
    display: grid; grid-template-columns: 280px 1fr 1fr 1fr;
    gap: 28px;
  }
  .footer h4 { color: #4caf50; font-size: 15px; margin-bottom: 12px; }
  .footer p, .footer a { font-size: 13px; color: #aaa; text-decoration: none; line-height: 2; display: block; }
  .footer a:hover { color: #fff; }
  .footer .fp { color: #4caf50; font-size: 16px; font-weight: bold; }
  .footer-bottom {
    max-width: 1200px; margin: 18px auto 0; padding: 14px 20px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    text-align: center;  color: #555;
  }
  
  
  .emojidh{   filter: brightness(0) invert(1);}
  
  
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:none;justify-content:center;align-items:center;z-index:999}
.modal-content{background:#fff;width:90%;max-width:450px;padding:30px;border-radius:10px;text-align:left}
.modal-content h3{margin-bottom:20px;text-align:center; font-size:18px; color:#000; font-weight:700}
.form-group{margin-bottom:15px}
.form-group label{display:block;margin-bottom:6px;font-weight:500}
.form-group input,.form-group textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:5px}
textarea{min-height:100px;resize:vertical}
#submitMessage{background:#409eff;color:#fff;border:none;width:100%;padding:12px;border-radius:5px;cursor:pointer;font-size:15px;margin-top:10px}
#submitMessage:hover{background:#337ecc}


@media (max-width: 767px) {
.pro_l{ width:100%;padding:0;}
.portfolio-details-thumb p a{    margin-bottom: 10px !important; display: inline-block; padding:0px 10px!important;}
.cs-left{ display:block;}
.cs-divider{ display:none;}

}
@media (max-width: 450px) {
.cs-email-btn{ white-space: break-spaces;
    max-width: 90px;padding: 5px 9px;}
}