/* ³ÁÖÃĬÈÏÐÎ×´ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans SC', sans-serif;
    /* ˼ԴºÚÌå */
    /* font-family: "Microsoft YaHei", Arial, sans-serif; */
    /* background-color: #f0f0f0; */
}

/* ==================== »ù´¡ÐÎ×´ ==================== */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px;
    height: 70px;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    position: fixed;
    z-index: 1000;
    width: 100%;
    box-sizing: border-box;
    top: 0;
    left: 0;
}

/* LogoÐÎ×´ */
.header-center {
    flex: 0 0 auto;
    z-index: 1001;
}

.logo-img img {
    max-height: 32px;
    width: auto;
    max-width: 100%;
}

/* ==================== ͨÓÃ×é¼þÐÎ×´ ==================== */
/* ºº±¤²Ëµ¥°´Å¥ */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1002;
}

.mobile-menu-toggle span,
.hamburger-line {
    width: 100%;
    height: 3px;
    background-color: #333;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* ºº±¤²Ëµ¥¶¯»­ */
.mobile-menu-toggle.active span:nth-child(1),
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2),
.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3),
.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* ËÑË÷ͼ±ê */
.search-icon {
    font-size: 18px;
    color: #333;
    cursor: pointer;
    padding: 8px;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-icon:hover {
    color: #000;
}

/* ˵»°Çл»ÏÂÀ­¿ò */
.language-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.language-current {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    transition: all 0.3s;
    background-color: #fff;
    min-width: 70px;
}

.language-current:hover {
    border-color: #333;
}

.current-lang {
    font-size: 14px;
    color: #666;
}

.language-current i {
    font-size: 11px;
    color: #666;
    transition: transform 0.3s;
}

.language-dropdown .la-globe {
    font-size: 20px;
    margin-right: 5px;
}

.language-dropdown.active .language-current i {
    transform: rotate(180deg);
}

.language-options {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    min-width: 80px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.language-dropdown.active .language-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 9999;
}

.lang-option {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #666;
    font-size: 14px;
    transition: all 0.3s;
}

.lang-option:hover {
    background-color: #f5f5f5;
    color: #000;
}

.lang-option.active {
    background-color: #f0f0f0;
    color: #000;
    font-weight: 500;
}

/* È«¿íËÑË÷¿ò */
.full-width-search {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    padding: 15px 20px;
    box-sizing: border-box;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.full-width-search.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.full-width-search form {
    width: 800px;
    display: flex;
}

.full-width-search button {
    margin-left: 10px;
    background: linear-gradient(135deg, #1e40af, #2563eb);
    color: #fff;
    padding: 0 30px;
    border-radius: 10px;
    border: none;

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

.full-width-search button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
}

.search-wrapper {
    display: flex;
    align-items: center;
    max-width: 100%;
    /* margin: 0 auto; */
    position: relative;
    flex: 1;
}

.full-search-input {
    width: 100%;
    padding: 12px 45px 12px 15px;
    font-size: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s;
    -webkit-appearance: none;
}

.full-search-input:focus {
    border-color: #333;
}

.search-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #666;
    cursor: pointer;
    padding: 5px;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-close:hover {
    color: #000;
}

.pc-nav .nav-navs {
    display: flex;
    height: 100%;
    flex: 1;
    margin-left: 100px;
}

/* ==================== PC¶Ëµ¼º½ ==================== */
.pc-nav {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    /* align-items: center; */
    height: 100%;
    gap: 20px;
}

.pc-nav .nav-menu {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.pc-nav .nav-menu .nav-items {
    height: 100%;
    position: relative;
}

.pc-nav .nav-2menu {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    transform: translateY(-10px);
    transition: max-height 0.4s ease,
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0s linear 0.3s;
    background-color: #fff;
    position: absolute;
    top: 70px;
    left: 0;
    /* width: 150px; */
    z-index: 999;
    border-bottom: 1px solid rgba(0, 0, 0, 0);

}

.pc-nav .nav-items:hover .nav-2menu {
    max-height: 500px;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;

}

.pc-nav .nav-menu .active {
    color: #2253ce;
    border-bottom: 1px solid #2253ce;
}

.pc-nav .nav-items.active>a {
    color: #2253ce;

}

.pc-nav .nav-menu a {
    text-decoration: none;
    color: #666;
    font-size: 15px;
    transition: color 0.3s;
    white-space: nowrap;
    padding: 15px 20px;
    /* min-width: 100px; */
    text-align: left;
    height: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    /* justify-content: center; */
    /* font-weight: bold; */
}

/* .pc-nav .nav-menu a:hover {
    color: #2253ce;
    border-bottom: 1px solid #2253ce;
} */

.pc-nav .language-dropdown {
    margin-left: 5px;
    border-bottom: none !important;
    color: #000 !important;
}

.pc-nav .search-container {
    position: relative;
    display: flex;
    align-items: center;
}

.pc-nav .nav-3menu {
    display: flex;
    visibility: collapse;
    padding: 30px;
    gap: 0 100px;
}

.pc-nav .nav-3menu-ul .nav-2item {
    border-bottom: 1px solid #838383;
}

.pc-nav .nav-3menu a {
    display: block;
    height: auto;
}

.pc-nav .nav-3menu-ul,
.pc-nav .nav-2menu a {
    border-bottom: 1px solid rgba(0, 0, 0, 0);
}

.pc-nav .nav-3menu-ul a:hover,
.pc-nav .nav-2menu a:hover {
    color: #2253ce;
    border-bottom: 1px solid #2253ce;
}

.pc-nav .nav-3menu-li {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 60px;
}

.pc-nav .nav-3menu-ul:last-child .nav-3menu-li {
    grid-template-columns: repeat(3, 1fr);
}

/* ==================== Òƶ¯¶Ë¹¤¾ßÀ¸ ==================== */
.mobile-header-tools {
    display: none;
    align-items: center;
    gap: 5px;
    z-index: 1002;
}

.mobile-header-tools .language-dropdown {
    margin-left: 0;
}

.mobile-header-tools .language-current {
    padding: 6px 8px;
    min-width: 60px;
}

.mobile-header-tools .current-lang {
    font-size: 13px;
}

.mobile-header-tools .language-options {
    min-width: 70px;
    right: 0;
}

.mobile-header-tools .search-icon {
    font-size: 18px;
    padding: 8px;
}

/* ==================== Òƶ¯¶Ë²à»¬²Ëµ¥ ==================== */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 1);
    z-index: 1001;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    padding-top: 60px;
    box-sizing: border-box;
}

.mobile-nav-overlay.active {
    display: flex;
    transform: translateX(0);
}

.mobile-nav-menu {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mobile-nav-menu a {
    font-size: 18px;
    padding: 15px 0;
    width: 80%;
    text-align: center;
    color: #333;
    text-decoration: none;
}

.mobile-nav-menu>a {
    border-bottom: 1px solid #eee;
}

.sub-nav {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    display: flex;
    flex-direction: column;
    width: 80%;
}

.sub-nav a {
    width: 100%;
}

.sub-nav.open {
    max-height: 100%;
}

/* ==================== ÏìӦʽ²¼¾Ö ==================== */
/* ƽ°åÉ豸ÊÊÅä */
@media (max-width: 1024px) {
    .header {
        padding: 0px 30px;
    }

    .pc-nav .nav-menu {
        gap: 15px;
    }

    .pc-nav .nav-menu a {
        font-size: 14px;
    }
}

/* Òƶ¯¶ËÊÊÅä */
@media (max-width: 768px) {
    .header {
        padding: 8px 15px;
    }

    .logo-img img {
        max-height: 28px;
    }

    /* °µ²ØPCµ¼º½£¬ÏÔʾÒƶ¯¶ËÔªËØ */
    .pc-nav {
        display: none;
    }

    .mobile-header-tools {
        display: flex;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    /* Òƶ¯¶ËËÑË÷ͼ±êÓÅ»¯ */
    .mobile-header-tools .search-icon {
        font-size: 14px;
        padding: 10px;
        background-color: #f5f5f5;
        border-radius: 50%;
    }

    /* È«¿íËÑË÷¿òÒƶ¯¶ËÓÅ»¯ */
    .full-width-search {
        padding: 15px;
    }

    .full-search-input {
        padding: 15px 45px 15px 15px;
        font-size: 16px;
    }

    .search-close {
        right: 15px;
        font-size: 20px;
    }
}

/* Ó×ÆÁÄ»ÊÖ»úÊÊÅä */
@media (max-width: 480px) {
    .header {
        padding: 8px 12px;
    }

    .logo-img img {
        max-height: 24px;
    }

    .mobile-menu-toggle {
        width: 26px;
        height: 20px;
    }

    .mobile-menu-toggle span,
    .hamburger-line {
        height: 2px;
    }

    .mobile-nav-overlay {
        padding-top: 70px;
    }

    .mobile-nav-menu a {
        font-size: 16px;
        padding: 12px 0;
    }

    /* ³¬Ó×ÆÁĻ΢µ÷ */
    .mobile-header-tools {
        gap: 2px;
    }

    .mobile-header-tools .language-current {
        padding: 6px;
        min-width: 55px;
    }

    .mobile-header-tools .current-lang {
        font-size: 12px;
    }
}

/* ºáÆÁÊÊÅä */
@media (max-width: 768px) and (orientation: landscape) {
    .mobile-nav-overlay {
        padding-top: 60px;
    }

    .mobile-nav-menu a {
        padding: 10px 0;
    }
}

/* Ô¤·ÀiOSÊäÈë¿òËõ·Å */
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 768px) {
    .full-search-input {
        font-size: 16px;
    }
}

.index-banner-swiper-container {
    position: relative;
    width: 100%;
    height: 800px;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
    height: 100vh;
}

.index-banner-swiper-container .index-banner-dark {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(30, 41, 59, 0.4);
    z-index: 2;
}

.index-banner-swiper-container .index-banner-video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ¶¯Ì¬²¼¾°²ã */
.index-banner-swiper-container .banner-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.index-banner-swiper-container .grid-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(37, 99, 235, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridMove 25s linear infinite;
}

.index-banner-swiper-container .floating-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.index-banner-swiper-container .particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(37, 99, 235, 0.7);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.9);
}

.index-banner-swiper-container .particle-1 {
    top: 30%;
    left: 15%;
    animation: floatParticle 18s infinite ease-in-out;
}

.index-banner-swiper-container .particle-2 {
    top: 70%;
    left: 85%;
    animation: floatParticle 22s infinite ease-in-out 2s;
}

.index-banner-swiper-container .particle-3 {
    top: 50%;
    left: 50%;
    animation: floatParticle 15s infinite ease-in-out 4s;
}

.index-banner-swiper-container .scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.8), transparent);
    /* animation: scanMove 10s linear infinite; */
}

/* Swiper ÂÖ²¥ */
.index-banner-swiper-container .swiper-wrapper {
    z-index: 2;
}

.index-banner-swiper-container .swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
}

.index-banner-swiper-container .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* opacity: 0.7; */
}

/* ÎÄ×Ö¸²¸Ç²ã */
.index-banner-swiper-container .slide-text-overlay {
    position: absolute;
    z-index: 3;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.index-banner-swiper-container .slide-text-overlay h2 {
    font-size: var(--contenttitle);
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    letter-spacing: 0.2em;
    /* background: linear-gradient(90deg, #fff, #93c5fd); */
    /* -webkit-background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
    /* background-clip: text; */
}

.index-banner-swiper-container .slide-text-overlay p {
    font-size: var(--boldtext);
    color: #fff;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease 0.2s;
}

/* ¼¤»î״̬µÄÎÄ×Ö¶¯»­ */
.index-banner-swiper-container .swiper-slide-active .slide-text-overlay h2,
.index-banner-swiper-container .swiper-slide-active .slide-text-overlay p {
    opacity: 1;
    transform: translateY(0);
}

/* µ¼º½°´Å¥ */
.index-banner-swiper-container .nav-buttons {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
    z-index: 3;
    transform: translateY(-50%);
}

.index-banner-swiper-container .nav-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: var(--title);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.index-banner-swiper-container .nav-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}

/* ·ÖÒ³Æ÷ */
.index-banner-swiper-container .swiper-pagination {
    position: absolute;
    bottom: 40px;
    left: 60%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 12px;
}

.index-banner-swiper-container .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.index-banner-swiper-container .swiper-pagination-bullet-active {
    background: #fff;
    box-shadow: 0 0 15px #fff;
    transform: scale(1.2);
}

/* Ë÷Çó°´Å¥ */
.index-banner-swiper-container .explore-btn {
    position: absolute;
    bottom: 40px;
    right: 40px;
    z-index: 3;
    padding: 15px 35px;
    background: linear-gradient(90deg, #2563eb, #0ea5e9);
    border: none;
    border-radius: 30px;
    color: #fff;
    font-size: var(--text);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s ease;
    box-shadow: 0 5px 20px rgba(37, 99, 235, 0.3);
}

.index-banner-swiper-container .explore-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.5);
}

/* ¶¯»­½ç˵ */
@keyframes gridMove {
    0% {
        transform: perspective(500px) rotateX(60deg) translateY(0);
    }

    100% {
        transform: perspective(500px) rotateX(60deg) translateY(60px);
    }
}

@keyframes floatParticle {

    0%,
    100% {
        transform: translateY(0) translateX(0);
        opacity: 0.7;
    }

    25% {
        transform: translateY(-40px) translateX(20px);
        opacity: 1;
    }

    50% {
        transform: translateY(-15px) translateX(-15px);
        opacity: 0.8;
    }

    75% {
        transform: translateY(-35px) translateX(10px);
        opacity: 1;
    }
}

@keyframes scanMove {
    0% {
        top: 0;
    }

    100% {
        top: 100%;
    }
}

/* ÏìӦʽ */
@media (max-width: 768px) {
    .index-banner-swiper-container {
        height: 40vh;
    }

    .index-banner-swiper-container .slide-text-overlay .text-animate {
        width: 60%;
    }

    .index-banner-swiper-container .slide-text-overlay h2 {
        font-size: var(--title);
    }

    .index-banner-swiper-container .slide-text-overlay p {
        font-size: var(--text);
    }

    .index-banner-swiper-container .nav-buttons {
        padding: 0 20px;
    }

    .index-banner-swiper-container .explore-btn {
        right: 20px;
        bottom: 30px;
        padding: 12px 25px;
    }
}

/* Section Styles */
section {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 10;
}

.section-title h2 {
    font-size: var(--contenttitle);
    font-weight: bold;
    color: #1a1a2e;
    letter-spacing: 2px;
}

.section-title p {
    color: #6c757d;
    font-size: var(--text);
    margin-top: 10px;
}

/* Product Categories */
#products {
    position: relative;
    overflow: hidden;
}

.products-section .products-section-bg {
    position: absolute;
}

.products-section .t-bg {
    position: absolute;
    bottom: -43vh;
    z-index: 1;
}

.products-section .container {
    position: relative;
    z-index: 10;
    max-width: 1400px;
}

#products .product-categories {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
    gap: 10px;
}

#products .category-btn {
    padding: 8px 20px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 30px;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 500;
}

#products .category-btn.active,
#products .category-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Products Grid */
#products .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
}

#products .product-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    border: 1px solid #f5f5f5;
    position: relative;
    padding: 20px;
}

#products .product-card::before {
    content: '';
    position: absolute;
    height: 4px;
    width: 0%;
    bottom: 0;
    left: 0;
    /* ±ØÐë¼Ó£¬´Ó×ó±ßÆðÍ· */
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    transition: width 0.4s ease;
    /* Ö»¹ý¶É¿í¶È¸üÁ÷³© */
}

#products .product-card:hover::before {
    width: 100%;
}

#products .product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

#products .product-img {
    height: 250px;
    overflow: hidden;
}

#products .product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: var(--transition);
}

#products .product-card:hover .product-img img {
    transform: scale(1.05);
}

#products .product-card .product-card-link {
    background-color: #2151CE;
    display: inline;
    padding: 5px 15px;
    border-radius: 15px;
    float: right;
    margin-right: 20px;
}

#products .product-card .product-card-link a {
    color: #fff;

}

#products .product-info {
    margin: 15px 0;
    padding: 15px 0;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
}

#products .product-more {
    background-color: #2151CE;
    display: inline-block;
    padding: 10px 15px;
    border-radius: 15px;
    text-align: center;
    max-width: 200px;
    width: 100%;
    margin: 40px auto 40px;
    float: right;
    transition: all 0.3s ease;
    cursor: pointer;
}

#products .product-more:hover {
    background-color: #1a41a8;
    transform: translateY(-3px);
    box-shadow: 0 7px 15px rgba(33, 81, 206, 0.3);
}

#products .product-more .product-more-link {
    color: #fff;
    width: 100%;
    height: 100%;
    display: inline-block;
    transition: color 0.3s ease;
}

#products .product-more:hover .product-more-link {
    color: #f0f0f0;
}

#products .product-more::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 17px;
    background: linear-gradient(45deg, #2151CE, #4a7cff);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#products .product-more {
    position: relative;
    z-index: 1;
}

#products .product-more:hover::after {
    opacity: 1;
}

#products .product-info h3 {
    font-size: var(--boldtext);
    color: var(--dark-color);
}

#products .product-info p {
    color: var(--gray-color);
    margin-bottom: 15px;
}

#products .product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

#products .product-tag {
    background: #e0f2fe;
    color: var(--primary-color);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: var(--stext);
    font-weight: 500;
}

#products .gear-svg {
    position: absolute;
    fill: rgba(33, 81, 206, 0.08);
    filter: drop-shadow(0 0 2px rgba(33, 81, 206, 0.05));
}

#products .gear-1 {
    width: 600px;
    height: 600px;
    top: -18%;
    left: -12%;
    animation: gearRotate 15s linear infinite;
}

#products .gear-2 {
    width: 1500px;
    height: 1500px;
    bottom: -30%;
    right: -20%;
    animation: gearRotateReverse 20s linear infinite;
}

/* Ðý¶¯µ¯»­ */
@keyframes gearRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes gearRotateReverse {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

/* µ×²¿ÕûÌå */
.site-footer {
    background-color: #1a1a1a;
    color: #ccc;
    font-family: "Microsoft YaHei", sans-serif;
    position: relative;
    overflow: hidden;
}

.site-footer .site-footer-bg {
    position: absolute;
    height: 100%;
    z-index: 1;
    background: url(/static/images/foot.jpg) 50% center / cover no-repeat;

}

.site-footer .site-footer-dark {
    position: absolute;
    height: 100%;
    background-color: rgba(0, 0, 0, .85);
    width: 100%;
    z-index: 2;
}

.site-footer .site-footer-bg img {
    width: 100%;
    position: relative;
    object-fit: cover;
    z-index: 9;
}

/* Ö÷ÌåÄÚÈÝ */
.site-footer .footer-qrcodes .logo-img {
    margin-bottom: 50px;
}

.site-footer .footer-qrcodes .logo-img img {
    max-height: 50px;
}

.site-footer .footer-container {
    position: relative;
    z-index: 10;
    max-width: 1400px;
    margin: 80px auto 20px;
    padding: 0 20px;
    display: flex;
    gap: 50px;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* ±êÌâ */
.site-footer .footer-title {
    font-size: var(--text);
    color: #fff;
    margin-bottom: 20px;
}

/* ¼±¾çÁ´½Ó */
.site-footer .link-list {
    list-style: none;
    display: flex;
    gap: 50px;
    margin-left: 50px;
}

.site-footer .footer-links {
    flex: 1;
}

.site-footer .link-list .title {
    font-weight: bold;
    position: relative;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}

.site-footer .link-list .title:before {
    background-color: #fff;
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 2rem;
}

.site-footer .link-list .title a {
    font-size: 16px;
}

.site-footer .link-list div {
    margin: 10px 0;
    text-align: left;
}

.site-footer .link-list li {
    flex: 1;
}

.site-footer .link-list li a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
}

.site-footer .link-list li a:hover {
    color: #2253ce;
}

/* ¶þάÂëÇøÓò */
.site-footer .qrcode-list {
    display: flex;
    gap: 40px;
}

.site-footer .qrcode-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* ¶þάÂëռλ */
.site-footer .qrcode-img {
    width: 120px;
    height: 120px;
    background-color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.site-footer .qrcode-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.site-footer .qrcode-desc {
    font-size: var(--stext);
    color: #aaa;
}

/* µ×²¿°æȨ */
.site-footer .footer-bottom {
    text-align: center;
    margin: 20px 0 20px;
    font-size: var(--stext);
    color: #999;
    border-top: 1px solid #333;
    padding-top: 15px;
    position: relative;
    z-index: 10;
}

.site-footer .footer-bottom a {
    color: #999;
}

.site-footer .footer-bottom a:hover {
    color: #2253ce;
}

/* ==================== Òƶ¯¶ËÊÊÅä ==================== */
@media screen and (max-width: 992px) {
    .site-footer .footer-container {
        gap: 40px;
    }

    .site-footer .link-list {
        gap: 20px;
    }

    .site-footer .qrcode-list {
        gap: 30px;
    }

    .site-footer .qrcode-img {
        width: 100px;
        height: 100px;
    }
}

@media screen and (max-width: 768px) {
    .site-footer {
        padding: 30px 0 15px;
    }

    .site-footer .footer-container {
        flex-direction: column;
        gap: 35px;
    }

    .site-footer .footer-links {
        width: 100%;
        display: none;
    }

    .site-footer .link-list {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 15px;
    }

    .site-footer .link-list li {
        text-align: center;
    }

    .site-footer .link-list div {
        text-align: center;
    }

    .site-footer .qrcode-list {
        justify-content: space-around;
        width: 100%;
        gap: 20px;
    }

    .site-footer .qrcode-img {
        width: 90px;
        height: 90px;
    }

    .site-footer .footer-bottom {
        margin-top: 30px;
        padding-top: 12px;
    }
}

@media screen and (max-width: 480px) {
    .site-footer .footer-container {
        padding: 0 15px;
        gap: 30px;
        margin: 0 auto 20px;
    }

    .site-footer .footer-qrcodes .logo-img {
        margin-bottom: 30px;
        text-align: center;
    }

    .site-footer .link-list {
        flex-direction: column;
        gap: 12px;
    }

    .site-footer .link-list li {
        flex: none;
        width: 100%;
    }

    .site-footer .qrcode-list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .site-footer .qrcode-item {
        flex: 0 0 calc(33.333% - 10px);
        min-width: 80px;
    }

    .site-footer .qrcode-img {
        width: 80px;
        height: 80px;
    }

    .site-footer .qrcode-desc {
        font-size: 11px;
    }

    .site-footer .footer-bottom {
        font-size: 12px;
        margin-top: 25px;
    }
}

/* ===== ¿Æ¼¼¸ÐÐÂÎÅÄ£¿éÐÎ×´ ===== */
#news .tech-news-section {
    padding: 80px 0;
    background: #f4f7fe;
    font-family: 'Segoe UI', sans-serif;
}

.tech-news-section .tech-news-more {
    max-width: 200px;
    margin: 0 auto;
    margin-top: 20px;
}

.tech-news-section .tech-news-more>div {
    text-align: center;
    background: linear-gradient(90deg, #2563eb, #0ea5e9);
    padding: 10px 0;
    border-radius: 15px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Êó±êÒÆÉÏȥʱµÄ¹âÔóɨ¹ý³ÉЧ */
.tech-news-section .tech-news-more>div::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
    transition: left 0.7s ease;
}

.tech-news-section .tech-news-more>div:hover::before {
    left: 100%;
}

/* Êó±êÒÆÉÏȥʱµÄÐüÍ£³ÉЧ */
.tech-news-section .tech-news-more>div:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
    background: linear-gradient(90deg, #1d4ed8, #0284c7);
}

.tech-news-section .tech-news-more>div>a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.5px;
    display: block;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

/* Êó±êÒÆÉÏȥʱ¼ýͷͼ±êÒƶ¯³ÉЧ */
.tech-news-section .tech-news-more>div>a::after {
    content: '¡ú';
    margin-left: 8px;
    display: inline-block;
    transition: transform 0.3s ease;
}

.tech-news-section .tech-news-more>div:hover>a::after {
    transform: translateX(5px);
}

/* ±êÌâ */
.tech-news-section .section-header {
    text-align: center;
    margin-bottom: 50px;
}

.tech-news-section .section-header h2 {
    font-size: var(--contenttitle);
    font-weight: bold;
    color: #1a1a2e;
    letter-spacing: 2px;
}

.tech-news-section .section-header p {
    color: #6c757d;
    font-size: var(--text);
    margin-top: 10px;
}

/* ²¼¾Ö */
.tech-news-section .tech-news-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ×ó²à´ó¿¨Æ¬ */
.tech-news-section .news-index-card-lg {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    position: relative;
}

.tech-news-section .news-index-card-lg img {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.tech-news-section .news-index-card-lg .news-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background: linear-gradient(90deg, #2563eb, #0ea5e9);
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: var(--stext);
}

.tech-news-section .news-content {
    padding: 25px;
}

.tech-news-section .news-content time {
    color: var(--primary-color);
    font-size: var(--stext);
}

.tech-news-section .news-content h3 {
    font-size: var(--title);
    margin: 10px 0;
    color: #1a1a2e;
}

.tech-news-section .news-content p {
    color: #666;
    font-size: var(--text);
    line-height: 1.8;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* ÏÞ¶ÈÐÐÊý */
    overflow: hidden;
}

.tech-news-section .read-more {
    display: inline-flex;
    align-items: center;
    margin-top: 15px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: var(--text);
}

.tech-news-section .read-more i {
    margin-left: 5px;
    transition: transform .3s;
}

.tech-news-section .read-more:hover i {
    transform: translateX(5px);
}

/* ÓÒ²àÁбí */
.tech-news-section .news-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.tech-news-section .news-list ul {
    list-style: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tech-news-section .news-item {
    position: relative;
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
    transition: all .3s ease;
    border: 1px solid transparent;
    background-color: #fff;
    border: 1px solid #0FA1E9;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.tech-news-section .news-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 5px 20px rgba(37, 99, 235, .15);
}

/* Ðü¸¡É¨ÃèÏß */
.tech-news-section .news-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .1), transparent);
    transition: left .5s ease;
    z-index: 1;
    pointer-events: none;
    /* È·±£²»·´¶Ôµã»÷ */
}

.tech-news-section .news-item:hover::before {
    left: 100%;
}

/* ÐÂÔö£ºÁ´½ÓÐÎ×´ */
.tech-news-section .news-link {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    position: relative;
    z-index: 2;
}

.tech-news-section .item-line {
    width: 2px;
    height: 40px;
    background: #e0e0e0;
    margin: 5px 15px 0;
    flex-shrink: 0;
}

.tech-news-section .news-item time {
    font-size: var(--boldtext);
    font-weight: bold;
    color: #1a1a2e;
    min-width: 60px;
    flex-shrink: 0;
}

.tech-news-section .item-content {
    flex: 1;
    min-width: 0;
}

.tech-news-section .news-item h4 {
    font-size: var(--text);
    color: #333;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    transition: color 0.3s ease;
}

.tech-news-section .news-item:hover h4 {
    color: var(--primary-color);
}

.tech-news-section .news-item span {
    font-size: var(--stext);
    color: #888;
}

/* ¿ÉÑ¡£ºÔö³¤µã»÷·´À¡³ÉЧ */
.tech-news-section .news-item:active {
    transform: scale(0.995);
}

/* ÏìӦʽ */
@media (max-width: 992px) {
    .tech-news-section .tech-news-layout {
        grid-template-columns: 1fr;
    }
}

/* »ù´¡Ä£¿éÈÝÆ÷ */
.why-choose-us {
    position: relative;
    width: 100%;
    padding: 200px 0 100px;
    /* background: linear-gradient(150deg, #0C2C5A 0%, #113873 100%); */
    /* overflow: hidden; */
    color: #fff;
}

.why-choose-us .waves {
    margin-top: 60px;

}

/* ¶¯Ì¬²¼¾°²ã */
.why-choose-us .tech-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.why-choose-us .grid-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(37, 99, 235, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.2) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMove 20s linear infinite;
    opacity: 0.3;
}

.why-choose-us .floating-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.why-choose-us .particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(37, 99, 235, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.8);
}

.why-choose-us .particle-1 {
    top: 20%;
    left: 10%;
    animation: floatParticle 15s infinite ease-in-out;
}

.why-choose-us .particle-2 {
    top: 60%;
    left: 80%;
    animation: floatParticle 18s infinite ease-in-out 2s;
}

.why-choose-us .particle-3 {
    top: 80%;
    left: 30%;
    animation: floatParticle 12s infinite ease-in-out 4s;
}

.why-choose-us .particle-4 {
    top: 40%;
    left: 70%;
    animation: floatParticle 20s infinite ease-in-out 1s;
}

.why-choose-us .scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.8), transparent);
    animation: scanMove 8s linear infinite;
}

/* ÈÝÆ÷ */
.why-choose-us .container {
    position: relative;
    z-index: 1;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ±êÌâÐÎ×´ */
.why-choose-us .section-header {
    text-align: center;
    margin-bottom: 70px;
}

.why-choose-us .title-decorator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.why-choose-us .line {
    height: 2px;
    width: 80px;
    background: linear-gradient(90deg, transparent, #1a1a2e);
    margin: 0 20px;
}

.why-choose-us .line-right {
    background: linear-gradient(90deg, #1a1a2e, transparent);
}

.why-choose-us .section-header h2 {
    font-size: var(--contenttitle);
    font-weight: 800;
    letter-spacing: 2px;
    /* background: linear-gradient(90deg, #fff, #93c5fd); */
    /* -webkit-background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
    background-clip: text;
    color: #1a1a2e;
}

.why-choose-us .highlight {
    color: #1a1a2e;
    -webkit-text-fill-color: #1a1a2e;
}

.why-choose-us .subtitle {
    color: #6c757d;
    ;
    font-size: 16px;
    letter-spacing: 1px;
}

/* ÓÅÊÆÍø¸ñ */
.why-choose-us .advantages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
}

.why-choose-us .advantage-item {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 12px;
    padding: 35px 25px;
    overflow: hidden;
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
}

.why-choose-us .advantage-item:hover {
    transform: translateY(-10px);
    border-color: rgba(37, 99, 235, 0.6);
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.2);
}

.why-choose-us .item-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.why-choose-us .advantage-item:hover .item-bg {
    opacity: 1;
}

.why-choose-us .item-icon {
    position: relative;
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #eb5f5e, #2563eb);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    font-size: var(--title);
    color: #fff;
    z-index: 1;
}

.why-choose-us .icon-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    filter: blur(15px);
    opacity: 0.5;
    z-index: -1;
    transition: opacity 0.4s ease;
}

.why-choose-us .advantage-item:hover .icon-glow {
    opacity: 0.8;
}

.why-choose-us .item-content h3 {
    font-size: var(--title);
    margin-bottom: 15px;
    color: #fff;
}

.why-choose-us .progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-bottom: 20px;
    overflow: hidden;
}

.why-choose-us .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #0ea5e9);
    border-radius: 2px;
    width: 0;
    transition: width 1.5s ease;
}

.why-choose-us .item-content p {
    color: #94a3b8;
    line-height: 1.7;
    font-size: var(--text);
}

.why-choose-us .hover-effect {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.1), transparent);
    transition: left 0.6s ease;
}

.why-choose-us .advantage-item:hover .hover-effect {
    left: 100%;
}

/* Êý¾Ý¿ÉÊÓ»¯ */
.why-choose-us .data-visualization {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    position: absolute;
    top: -10%;
    width: 80%;
    background-color: #26303A;
    left: 10%;
    /* transform: translateX(-50%); */
    z-index: 10;
    border-radius: 15px;
    border-bottom: #9dcafd solid 4px;
}

.why-choose-us .data-circle {
    position: relative;
    width: 100%;
    flex: 1;
    height: 170px;
}

.why-choose-us .data-circle .circle-inner div {
    display: flex;
}

.why-choose-us .circle-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* text-align: center; */
    width: 100%;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    padding: 30px 20px;
}

.why-choose-us .data-circle .circle-inner::after {
    content: "";
    position: absolute;
    right: 0;
    top: 35%;
    width: 1px;
    height: 50px;
    background-color: #fff;
}

.why-choose-us .data-circle:last-child .circle-inner::after {
    display: none;
}

.why-choose-us .circle-inner:first-child div {
    font-size: var(--contenttitle);
    font-weight: 800;
    color: #FF4048;
    line-height: 1;
}

.why-choose-us .data-label {
    display: block;
    font-size: var(--text);
    color: #94a3b8;
    margin-top: 25px;
}

.why-choose-us .circle-progress {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.why-choose-us .circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 2;
}

.why-choose-us .circle-fill {
    fill: none;
    stroke: url(/assets/css/);
    stroke-width: 2;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    transition: stroke-dashoffset 2s ease;
}

/* ¶¯»­½ç˵ */
@keyframes gridMove {
    0% {
        transform: perspective(500px) rotateX(60deg) translateY(0);
    }

    100% {
        transform: perspective(500px) rotateX(60deg) translateY(50px);
    }
}

@keyframes floatParticle {

    0%,
    100% {
        transform: translateY(0) translateX(0);
        opacity: 0.6;
    }

    25% {
        transform: translateY(-30px) translateX(15px);
        opacity: 1;
    }

    50% {
        transform: translateY(-10px) translateX(-10px);
        opacity: 0.8;
    }

    75% {
        transform: translateY(-25px) translateX(5px);
        opacity: 1;
    }
}

@keyframes scanMove {
    0% {
        top: 0;
    }

    100% {
        top: 100%;
    }
}

/* ±êÌâ */
.industry-applications .section-header {
    text-align: center;
    margin-bottom: 60px;
}

.industry-applications .section-header h2 {
    font-size: var(--contenttitle);
    font-weight: 800;
    letter-spacing: 3px;
    color: #1a1a2e;
}

.industry-applications .highlight {
    color: #1a1a2e;
}

.industry-applications .section-header p {
    color: #94a3b8;
    margin-top: 15px;
    font-size: var(--text);
}

/* ÏìӦʽ */
@media (max-width: 768px) {
    .why-choose-us {
        padding: 60px 0;
    }

    .why-choose-us .container {
        padding: 0 20px;
    }

    .why-choose-us .section-header h2 {
        font-size: 26px;
    }

    .why-choose-us .advantages-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .why-choose-us .circle-inner:first-child div {
        font-size: 24px;
    }

    .why-choose-us .data-circle:nth-child(2n) .circle-inner::after {
        display: none;
    }

    .why-choose-us .data-circle {
        height: 120px;
    }

    .why-choose-us .data-label {
        font-size: 14px;
        margin-top: 10px;
    }

    .why-choose-us .data-visualization {
        display: grid;
        grid-template-columns: 1fr 1fr;
        position: relative;
        margin-bottom: 50px;
    }

    .why-choose-us .line {
        width: 30px;
        margin: 0 10px;
    }

    #products .gear-1 {
        width: 400px;
        height: 400px;
        top: -5%;
        left: -32%;
        animation: gearRotate 15s linear infinite;
    }

    #news .section-header h2 {
        font-size: 24px;
    }

    .industry-applications .section-header h2 {
        font-size: 24px;
    }

    .section-title h2 {
        font-size: 24px;
    }
}

/* ===== ÐÐÒµÀûÓÃÐÎ×´£¨ÑϸñºóÊÀÑ¡ÔñÆ÷£©===== */
.industry-applications {
    position: relative;
    width: 100%;
    padding: 100px 0;
    /* background: linear-gradient(150deg, #0C2C5A 0%, #113873 100%); */
    overflow: hidden;
    color: #fff;
}

/* ²¼¾° */
.industry-applications .tech-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.industry-applications .grid-pattern {
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    /* ¹Ø¼ü´úÂ룺½ç˵¶¯»­ */
    animation: moveGrid 1s linear infinite;
}

@keyframes moveGrid {
    0% {
        background-position: 0 0;
    }

    100% {
        /* бÏòÒƶ¯£¬Í¬Ê±Å¤×ª X ºÍ Y Öá */
        background-position: 50px 50px;
    }
}

.industry-applications .glowing-dots {
    position: absolute;
    width: 100%;
    height: 100%;
}

.industry-applications .glowing-dots span {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--dot-color, #2563eb);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--dot-color, #2563eb);
    animation: pulse 4s infinite ease-in-out;
}

/* Ëæ»úÉ¢²¼¹âµã */
.industry-applications .glowing-dots span:nth-child(1) {
    top: 10%;
    left: 5%;
    --dot-color: #2563eb;
}

.industry-applications .glowing-dots span:nth-child(2) {
    top: 20%;
    left: 80%;
    --dot-color: #0ea5e9;
    animation-delay: .5s;
}

.industry-applications .glowing-dots span:nth-child(3) {
    top: 50%;
    left: 20%;
    --dot-color: #7c3aed;
    animation-delay: 1s;
}

.industry-applications .glowing-dots span:nth-child(4) {
    top: 70%;
    left: 90%;
    --dot-color: #f59e0b;
    animation-delay: 1.5s;
}

.industry-applications .glowing-dots span:nth-child(5) {
    top: 85%;
    left: 40%;
    --dot-color: #ef4444;
    animation-delay: 2s;
}

.industry-applications .glowing-dots span:nth-child(6) {
    top: 30%;
    left: 60%;
    --dot-color: #10b981;
    animation-delay: 2.5s;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* ÈÝÆ÷ */
.industry-applications .container {
    position: relative;
    z-index: 1;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
}



/* Íø¸ñ²¼¾Ö - ¿é×´¸Ð */
.industry-applications .industry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* ¿¨Æ¬»ù´¡ÐÎ×´ */
.industry-applications .industry-card {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 16px;
    padding: 30px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
}

/* ´ó¿¨Æ¬Õ¼¾ÝÁ½ÁÐ */
.industry-applications .industry-card.large {
    grid-column: span 2;
}

/* ±ß¿ò¶¯»­ */
.industry-applications .card-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    border: 5px solid transparent;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    transition: all 0.4s ease;
}

/* ÄÚÈÝ */
.industry-applications .icon-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--title);
    color: #fff;
    margin-bottom: 25px;
    transition: all 0.4s ease;
}

.industry-applications .icon-halo {
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    filter: blur(15px);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.industry-applications .card-content h3 {
    font-size: var(--title);
    margin-bottom: 10px;
}

.industry-applications .card-content p {
    color: #94a3b8;
    font-size: var(--text);
    line-height: 1.7;
    margin-bottom: 20px;
}

.industry-applications .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--stext);
    color: #64748b;
}

.industry-applications .arrow-link {
    color: #fff;
    font-size: var(--title);
    transition: transform 0.3s ease;
}

/* ²¼¾°¹âЧ */
.industry-applications .card-bg-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 0%, var(--card-color, #2563eb), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

/* Hover ³ÉЧ */
.industry-applications .industry-card:hover {
    transform: translateY(-10px);
}

.industry-applications .industry-card:hover .card-border {
    border-color: var(--card-color, #2563eb);
}

.industry-applications .industry-card:hover .icon-wrapper {
    background: var(--card-color, #2563eb);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--card-color, #2563eb) 40%, transparent);
}

.industry-applications .industry-card:hover .icon-halo {
    opacity: 0.6;
}

.industry-applications .industry-card:hover .card-bg-effect {
    opacity: 0.1;
}

.industry-applications .industry-card:hover .arrow-link {
    transform: translateX(5px);
}

/* ÏìӦʽ */
@media (max-width: 1200px) {
    .industry-applications .industry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .industry-applications .industry-grid {
        grid-template-columns: 1fr;
    }

    .industry-applications .industry-card.large {
        grid-column: span 1;
    }
}

/* industry-styles.css */
.industry-page,
.product-page {
    width: 100%;
    min-height: 100vh;
    background: #f8fafc;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* BannerÇøÓò */
.industry-page .industry-banner,
.product-page .product-banner {
    position: relative;
    width: 100%;
    height: 600px;
    margin-top: 70px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.industry-page .banner-overlay,
.product-page .banner-overlay {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
}

.industry-page .banner-title,
.product-page .banner-title {
    font-size: 56px;
    font-weight: 800;
    letter-spacing: 4px;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #fff, #93c5fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.industry-page .banner-subtitle,
.product-page .banner-subtitle {
    font-size: 18px;
    color: #94a3b8;
    letter-spacing: 2px;
}

.product-page .product-subtitle {
    max-width: 1400px;
    margin: 0 auto;
}

.banner-backgroun {
    position: absolute;
    width: 100%;
    height: 100%;
}

.banner-backgroun::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
}

.banner-backgroun img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ·ÖÀർº½ */
.category-nav {
    background: white;
    padding: 30px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    /* position: sticky; */
    top: 0;
    z-index: 100;
}

.category-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.category-btn {
    padding: 12px 28px;
    background: #f1f5f9;
    border: none;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.3s ease;
}

.category-btn:hover {
    background: #e2e8f0;
    transform: translateY(-2px);
}

.category-btn.active {
    background: linear-gradient(90deg, #2563eb, #0ea5e9);
    color: white;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

/* Ãæ°üмµ¼º½ */
.pagebreadcrumb {
    max-width: 1400px;
    margin: 20px auto 20px;
    padding: 5px 40px 20px;
    font-size: 18px;
    color: #64748b;
    border-bottom: 2px solid #527edf;
}

.pagebreadcrumb a {
    color: #64748b;
    margin: 0 8px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.pagebreadcrumb a:hover {
    color: #2e353f;
}


/* ·ÖÒ³ */
.pagination-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
}

.pagination {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.page-num {
    border-radius: 8px;

}

.pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 16px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #475569;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.pagination a:hover:not(.disabled) {
    background: #f8fafc;
    border-color: #2563eb;
    color: #2563eb;
    transform: translateY(-2px);
}

.page-num-current {
    background: linear-gradient(90deg, #2563eb, #0ea5e9);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.pagination a.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.page-info {
    color: #64748b;
    font-size: 14px;
}

/* ²úÆ·ÏêÇéÈÝÆ÷ */
.product-page .product-detail-wrapper {
    max-width: 1400px;
    margin: 0 auto 0px;
    padding: 40px;
}

/* Éϰ벿ÃÅ£º¸ÅÀÀÇøÓò */
.product-page .product-overview {
    display: flex;
    gap: 40px;
    margin-bottom: 50px;
}

/* ×ó²àÉÌÆ·»­ÀÈ */
.product-page .product-gallery {
    flex: 1;
    min-width: 0;
}

/* Ö÷ͼÇøÓò - ¹Ì¶¨³¤¿í */
.product-page .gallery-main {
    position: relative;
    width: 100%;
    height: 500px;
    border: 2px solid #e2e3e4;
    background: #f8fafc;
    cursor: crosshair;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-page .gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ·Å´ó¾µÕÚÕÖ²ã */
.product-page .zoom-lens {
    position: absolute;
    width: 150px;
    height: 150px;
    background: rgba(37, 99, 235, 0.3);
    border: 2px solid #2563eb;
    /* border-radius: 4px; */
    display: none;
    pointer-events: none;
    z-index: 10;
}

/* ·Å´óÔ¤ÀÀ¿ò */
.product-page .zoom-preview {
    position: absolute;
    top: 0;
    left: calc(100% + 20px);
    width: 500px;
    height: 500px;
    /* border-radius: 16px; */
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 1000;
    border: 1px solid #e2e8f0;
}

.product-page .zoom-preview img {
    position: absolute;
    max-width: none;
    max-height: none;
    display: block;
}

/* ËõÂÔͼÁбí */
.product-page .gallery-thumbs {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.product-page .gallery-thumbs::-webkit-scrollbar {
    height: 6px;
}

.product-page .gallery-thumbs::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.product-page .gallery-thumbs::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.product-page .thumb-item {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    /* border-radius: 8px; */
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f8fafc;
}

.product-page .thumb-item.active {
    border-color: #2563eb;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.2);
}

.product-page .thumb-item:hover {
    border-color: #93c5fd;
}

.product-page .thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ÓÒ²à¸ù»ùÐÅÏ¢ */
.product-page .product-basic-info {
    flex: 1;
    min-width: 0;
    padding: 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.product-page .product-title {
    font-size: 32px;
    color: #1e293b;
    font-weight: 700;
    margin-bottom: 15px;
}

.product-page .short-desc {
    color: #475569;
    line-height: 1.7;
    margin-bottom: 30px;
    font-size: 15px;
    flex: 1;
}

.product-page .action-buttons {
    display: flex;
    gap: 15px;
}

.product-page .inquiry-btn,
.product-page .call-btn {
    flex: 1;
    padding: 15px;
    text-align: center;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.product-page .inquiry-btn {
    background: linear-gradient(90deg, #2563eb, #0ea5e9);
    color: #fff;
}

.product-page .call-btn {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.product-page .inquiry-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
}

.product-page .call-btn:hover {
    background: #e2e8f0;
    transform: translateY(-3px);
}

/* Ï°벿ÃÅ£ºÏêÇéÇøÓò */
.product-page .product-details-section {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* TabÇл»°´Å¥ */
.product-page .info-tabs {
    display: flex;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 30px;
}

.product-page .tab-btn {
    padding: 20px 30px;
    background: transparent;
    border: none;
    font-size: 16px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.product-page .tab-btn.active {
    color: #2563eb;
}

.product-page .tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #0ea5e9);
}

.product-page .tab-btn:hover:not(.active) {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.05);
}

/* TabÄÚÈÝÇø */
.product-page .tab-contents {
    padding: 40px;
}

.product-page .tab-content {
    display: none;
    animation: fadeIn 0.4s ease;
}

.product-page .tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* »úÄܲÎÊý±í¸ñ */
.product-page .params-table {
    color: #475569;
    line-height: 1.7;
}

.product-page .params-table table {
    width: 100%;
    border-collapse: collapse;
}

.product-page .params-table tr {
    border-bottom: 1px solid #e2e8f0;
}

.product-page .params-table td {
    padding: 15px 10px;
}

.product-page .params-table td:first-child {
    width: 15%;
    font-weight: 500;
    color: #1e293b;
}

/* ²úÆ·ÀûÓÃ/±íÐγߴçÄÚÈÝ */
.product-page .application-content,
.product-page .size-content {
    color: #475569;
    line-height: 1.8;
    font-size: 15px;
}

.product-page .application-content img,
.product-page .size-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
}

/* ×ÊÁÏÏÂÔØÁбí */
.product-page .download-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.product-page .download-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.product-page .download-item:hover {
    background: #f1f5f9;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.product-page .file-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ÎļþÀàÐÍͼ±ê */
.product-page .file-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    flex-shrink: 0;
}

.product-page .file-icon.pdf::before {
    content: "PDF";
}

.product-page .file-icon.docx::before {
    content: "DOC";
}

.product-page .file-icon.xlsx::before {
    content: "XLS";
}

.product-page .file-icon.zip::before {
    content: "ZIP";
}

.product-page .file-icon.default::before {
    content: "FILE";
}

.product-page .file-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.product-page .file-name {
    font-size: 16px;
    color: #1e293b;
    font-weight: 500;
}

.product-page .file-size {
    font-size: 13px;
    color: #64748b;
}

.product-page .download-btn {
    padding: 10px 24px;
    background: linear-gradient(90deg, #2563eb, #0ea5e9);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.product-page .download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
}

/* ÎÞÊý¾ÝÌáÐÑ */
.product-page .no-data {
    color: #94a3b8;
    font-size: 15px;
    text-align: center;
    padding: 40px 0;
}

/* ÏìӦʽÊÊÅä */
@media (max-width: 1200px) {
    .product-page .zoom-preview {
        display: none !important;
    }
}

@media (max-width: 992px) {
    .product-page .product-overview {
        flex-direction: column;
        gap: 30px;
    }

    .product-page .gallery-main {
        height: 400px;
    }

    .product-page .product-title {
        fontSize: 28px;
    }

    .product-page .info-tabs {
        flex-wrap: wrap;
        padding: 0 15px;
    }

    .product-page .tab-btn {
        padding: 15px;
        fontSize: 15px;
    }

    .product-page .tab-contents {
        padding: 30px 20px;
    }

    .product-page .product-subtitle {
        margin: 0 20px;
    }
}

@media (max-width: 768px) {
    .industry-page .industry-banner,
    .product-page .product-banner {
        height: 30vh;
    }

    .category-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0 20px;
        text-align: center;
        gap: 5px;
    }

    .category-btn {
        border-radius: 5px;
    }

    .category-nav {
        padding: 20px 0;
    }

    .product-page .product-detail-wrapper,
    .product-page .pagebreadcrumb {
        padding: 0px 20px 15px;
    }

    .product-page .gallery-main {
        height: 300px;
    }

    .product-page .product-title {
        fontSize: 24px;
    }

    .product-page .action-buttons {
        flex-direction: column;
    }

    .product-page .info-tabs {
        justify-content: center;
    }
}

/* »úÄܲÎÊý±í¸ñÓÅ»¯ - ÆëÈ«ÊÊÅäÏÖÓпƼ¼·ç */
.product-page .params-table table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.product-page .params-table tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s ease;
}

.product-page .params-table tr:last-child {
    border-bottom: none;
}

/* ¸ôÐбäÉ«ÌáÉý¿É¶ÁÐÔ */
.product-page .params-table tr:nth-child(even) {
    background: #f8fafc;
}

.product-page .params-table tr:hover {
    background: #f0f7ff;
}

/* ²ÎÊýÃûÐÎ×´£¨×ó²à¼ÓÆ·ÅÆÉ«Ó×Ô²µã±êʶ£© */
.product-page .param-name {
    width: 30%;
    padding: 16px 20px;
    font-size: 15px;
    color: #475569;
    font-weight: 500;
    position: relative;
    padding-left: 32px;
}

/* ²ÎÊýÖµÐÎ×´£¨ÓÒ¶ÔÆë͹ÆðÊýÖµ£© */
.product-page .param-value {
    width: 70%;
    padding: 16px 20px;
    font-size: 15px;
    color: #1e293b;
    font-weight: 600;
    text-align: left;
}

/* Òƶ¯¶ËÊÊÅä */
@media (max-width: 768px) {

    .product-page .param-name,
    .product-page .param-value {
        padding: 14px 16px;
        font-size: 14px;
    }

    .product-page .param-name {
        width: 40%;
        padding-left: 28px;
    }

    .product-page .param-value {
        width: 60%;
    }
}

/* ²úÆ·ÖÐÐÄÄÚÈÝÇø - ÑϸñºóÊÀÑ¡ÔñÆ÷ */
.product-page .product-content {
    padding: 80px 0;
    /* background: #f4f7fe; */
    width: 100%;
}

.product-page .product-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.product-page .product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* ²úÆ·¿¨Æ¬ */
.product-page .product-card {
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 25px 25px 35px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(30px);
}

/* ½¥±ä±ß¿ò¹âЧ */
.product-page .card-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    border: 3px solid transparent;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), transparent) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    transition: all 0.4s ease;
}

/* ¿¨Æ¬ÄÚÈÝ */
.product-page .card-content {
    position: relative;
    z-index: 2;
}

.product-page .card-icon {
    position: relative;
    width: 100%;
    height: 280px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    transition: all 0.4s ease;
}

.product-page .card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.product-page .icon-halo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.3), transparent);
    border-radius: inherit;
    filter: blur(25px);
    opacity: 0.6;
    z-index: 1;
    transition: opacity 0.4s ease;
}

.product-page .card-title {
    font-size: 22px;
    color: #1e293b;
    margin-bottom: 12px;
    font-weight: 700;
}

.product-page .card-desc {
    color: #64748b;
    line-height: 1.7;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 20px;
}

.product-page .card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
}

.product-page .tag {
    background: #e0f2fe;
    color: #2563eb;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.product-page .card-btn {
    display: block;
    width: 100%;
    padding: 12px;
    background: linear-gradient(90deg, #2563eb, #0ea5e9);
    color: #fff;
    text-align: center;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* ÐüÍ£³ÉЧ */
.product-page .product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.15);
}

.product-page .product-card:hover .card-border {
    border-color: rgba(37, 99, 235, 0.6);
}

.product-page .product-card:hover .card-icon img {
    transform: scale(1.05);
}

.product-page .product-card:hover .icon-halo {
    opacity: 0.8;
}

.product-page .card-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
}

/* ²¼¾°Î¢¹âЧ */
.product-page .card-bg-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.05), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.product-page .product-card:hover .card-bg-glow {
    opacity: 1;
}

/* ÏìӦʽ */
@media (max-width: 1200px) {
    .product-page .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .product-page .product-content {
        padding: 60px 0;
    }

    .product-page .product-container {
        padding: 0 20px;
    }

    .product-page .product-grid {
        grid-template-columns: 1fr;
    }

    .product-page .card-icon {
        height: 140px;
    }
}

/* ÆÙ²¼Á÷ÈÝÆ÷ */
.industry-page .waterfall-container {
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 40px;
    /* columns: 4;
    column-gap: 30px; */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* ÆÙ²¼Á÷ÏîÄ¿ - ³õʼ״̬£¨°µ²Ø£© */
.industry-page .waterfall-item {
    break-inside: avoid;
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ¶¯»­ÊµÏÖ״̬ */
.industry-page .waterfall-item.animate {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.industry-page .waterfall-item.hidden {
    display: none;
}

.industry-page .item-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    position: relative;
}

/* ¿¨Æ¬ÐüÍ£³ÉЧ¼ÓÇ¿ */
.industry-page .item-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* ͼƬÇøÓò¶¯»­ */
.industry-page .item-image {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
}

.industry-page .item-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, rgba(37, 99, 235, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.industry-page .item-card:hover .item-image::after {
    opacity: 1;
}

.industry-page .item-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.industry-page .item-card:hover .item-image img {
    transform: scale(1.05);
}

/* ÄÚÈÝÇøÓò */
.industry-page .item-content {
    padding: 25px 25px 0;
    position: relative;
}

/* ±êÌ⶯»­ */
.industry-page .item-content h3 {
    font-size: 20px;
    color: #1e293b;
    margin-bottom: 12px;
    font-weight: 700;
    position: relative;
    padding-bottom: 12px;
}

.industry-page .item-content h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #0ea5e9);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.industry-page .item-card:hover .item-content h3::after {
    width: 60px;
}

.industry-page .item-content p {
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 10px;
    font-size: 15px;
}

/* ±êÇ©¶¯»­ */
.industry-page .item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.industry-page .item-card .item-list-content {
    max-height: 100px;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.industry-page .item-card .item-list-content video{
    width: 100%;
}
.industry-page .item-card .item-list-content.expanded {
    /* max-height: 500px; */
    transition: max-height 0.4s ease;
}

.industry-page .item-card .item-down {
    padding: 15px 20px;
    text-align: right;
    transition: all 0.2s ease;
    font-weight: bold;
}

.industry-page .item-card .item-down span {
    transition: all 0.2s ease;

}

.industry-page .item-card .item-down span:hover {
    padding: 0 20px;
    text-align: right;
    color: #2563eb;
    cursor: pointer;
    transition: all 0.2s ease;
}

.industry-page .tag {
    background: #f1f5f9;
    color: #475569;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.industry-page .tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.industry-page .item-card:hover .tag::before {
    left: 100%;
}

.industry-page .item-card:hover .tag {
    background: #e0f2fe;
    color: #2563eb;
    transform: translateY(-2px);
}

.industry-page .item-text {

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* ÏÞ¶ÈÐÐÊý */
    overflow: hidden;
}

.industry-page .item-more {
    background: linear-gradient(135deg, #1e40af, #2563eb);
    padding: 5px 10px;
    border-radius: 10px;
}

.industry-page .item-more a {
    color: #fff;
    width: 100%;
    text-align: center;
    display: inline-block;
}

/* ÏìӦʽÉè¼Æ */
@media (max-width: 1200px) {
    .industry-page .waterfall-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .industry-page .waterfall-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .industry-page .category-container {
        padding: 0 20px;
    }

    .industry-page .banner-title,.product-page .banner-title {
        font-size: 30px;
    }
}

@media (max-width: 600px) {
    .industry-page .waterfall-container {
        grid-template-columns: repeat(1, 1fr);
        padding: 0 20px;
    }

    .industry-page .banner-title,.product-page .banner-title {
        font-size: 30px;
    }

    .industry-page .category-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
}

.contact-page {
    width: 100%;
    min-height: 100vh;
    background: #f8fafc;
    font-family: 'Segoe UI', system-ui, sans-serif;
    padding-bottom: 60px;
}

/* BannerÇøÓò */
.contact-page #banner-box {
    position: relative;
    width: 100%;
    height: 600px;
    margin-top: 70px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    overflow: hidden;
}

#banner-box .nav-mouse-down {
    position: absolute;
    bottom: 0px;
    color: #fff;
    z-index: 10;
    text-align: center;
    font-size: 24px;
    animation: floatUpDown 1.5s ease-in-out infinite;
    left: 50%;
}

@keyframes floatUpDown {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

.contact-page #banner-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(37, 99, 235, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.5;
}

.contact-page #banner-box .banner-overlay {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
}

.contact-page #banner-box .banner-title {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 15px;
    background: linear-gradient(90deg, #fff, #93c5fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.contact-page #banner-box .banner-subtitle {
    font-size: 18px;
    color: #94a3b8;
    letter-spacing: 1px;
}

/* ÄÚÈÝÈÝÆ÷ */
.contact-page .contact-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

/* ×ó²àÁªÏµÐÅÏ¢ */
.contact-page .contact-info-section {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-page .contact-card,
.contact-page .form-card {
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    height: 100%;
}

.contact-page .contact-card h2,
.contact-page .form-card h2 {
    font-size: 28px;
    color: #1e293b;
    margin-bottom: 10px;
}

.contact-page .section-desc {
    color: #64748b;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* ÁªÏµÐÅÏ¢Áбí */
.contact-page .contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 45px;
    margin-bottom: 40px;
}

.contact-page .contact-item {
    display: flex;
    gap: 20px;
}

.contact-page .contact-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
}

.contact-page .contact-details h3 {
    font-size: 18px;
    color: #1e293b;
    margin-bottom: 8px;
    font-weight: 600;
}

.contact-page .contact-details p {
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 4px;
    font-size: 18px;
}

.contact-page .map-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #2563eb;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    margin-top: 5px;
    transition: all 0.3s ease;
}

.contact-page .map-link:hover {
    color: #0ea5e9;
    gap: 8px;
}

/* É罻ýÌå */
.contact-page .social-media h3 {
    font-size: 18px;
    color: #1e293b;
    margin-bottom: 15px;
}

.contact-page .social-icons {
    display: flex;
    gap: 15px;
}

.contact-page .social-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
}

.contact-page .social-icon.wechat {
    background: #2dc100;
}

.contact-page .social-icon.weibo {
    background: #e6162d;
}

.contact-page .social-icon.douyin {
    background: #000;
}

.contact-page .social-icon.linkedin {
    background: #0077b5;
}

.contact-page .social-icon:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.contact-page .social-icon .tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    margin-bottom: 8px;
}

.contact-page .social-icon .tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1e293b;
}

.contact-page .social-icon:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

/* µØͼÈÝÆ÷ */
.contact-page .map-container {
    max-width: 1400px;
    margin: 0 auto;
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.contact-page .map-container h3 {
    font-size: 20px;
    color: #1e293b;
    margin-bottom: 20px;
}

.contact-page .map-placeholder {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.contact-page .map-placeholder iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.contact-page .map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.contact-page .map-placeholder:hover .map-overlay {
    opacity: 1;
}

.contact-page .map-overlay i {
    font-size: 48px;
    margin-bottom: 15px;
}

/* ÓÒ²à±íµ¥ */
.contact-page .contact-form-section {
    min-width: 0;
}

.contact-page .form-card {
    height: fit-content;
}

/* ±íµ¥ÐÎ×´ */
.contact-page .contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contact-page .contact-form .form-group {
    margin-bottom: 20px;
}

.contact-page .contact-form label {
    display: block;
    font-size: 15px;
    color: #374151;
    margin-bottom: 8px;
    font-weight: 500;
}

.contact-page .contact-form .required {
    color: #ef4444;
}

.contact-page .contact-form input,
.contact-page .contact-form select,
.contact-page .contact-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 15px;
    color: #1e293b;
    transition: all 0.3s ease;
    background: white;
}

.contact-page .contact-form input:focus,
.contact-page .contact-form select:focus,
.contact-page .contact-form textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.contact-page .contact-form .form-group.focused input,
.contact-page .contact-form .form-group.focused select,
.contact-page .contact-form .form-group.focused textarea {
    border-color: #2563eb;
}

.contact-page .contact-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

/* ÑéÖ¤Âë */
.contact-page .captcha-group .captcha-input {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.contact-page .captcha-group input {
    flex: 1;
}

.contact-page .captcha-img {
    height: 46px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.contact-page .captcha-img:hover {
    border-color: #2563eb;
}

/* ÒþÖÔÕþ²ß */
.contact-page .privacy-policy {
    margin-top: 10px;
}

.contact-page .checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
}

.contact-page .checkbox-container input {
    display: none;
}

.contact-page .checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid #e2e8f0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    margin-top: 2px;
}

.contact-page .checkbox-container input:checked+.checkmark {
    background: #2563eb;
    border-color: #2563eb;
}

.contact-page .checkbox-container input:checked+.checkmark::after {
    content: '?';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.contact-page .checkbox-container a {
    color: #2563eb;
    text-decoration: none;
}

.contact-page .checkbox-container a:hover {
    text-decoration: underline;
}

/* Ìá½»°´Å¥ */
.contact-page .submit-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(90deg, #2563eb, #0ea5e9);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.contact-page .submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
}

.contact-page .submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ÃýÎóÐÂÎÅ */
.contact-page .error-message {
    color: #ef4444;
    font-size: 13px;
    margin-top: 5px;
    display: none;
}

/* ±íµ¥ÐÂÎÅ */
.contact-page .form-message {
    margin-top: 20px;
    padding: 15px;
    border-radius: 8px;
    display: none;
    font-size: 15px;
}

.contact-page .form-message.success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.contact-page .form-message.error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.contact-page .form-message i {
    margin-right: 8px;
}

/* ÏìӦʽÉè¼Æ */
@media (max-width: 1200px) {
    .contact-page .contact-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-page .contact-info-section {
        order: 2;
    }

    .contact-page .contact-form-section {
        order: 1;
    }
}

@media (max-width: 768px) {
    .contact-page .contact-form .form-group .captcha-input {
        flex-direction: row;
    }

    .contact-page #banner-box {
        padding: 40px 0;
    }

    .contact-page #banner-box .banner-title {
        font-size: 32px;
    }

    .contact-page #banner-box .banner-subtitle {
        font-size: 16px;
    }

    .contact-page .contact-container {
        padding: 40px 20px;
    }

    .contact-page .contact-card,
    .contact-page .form-card {
        padding: 30px 20px;
    }

    .contact-page .contact-form .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-page .captcha-group .captcha-input {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-page .captcha-img {
        width: auto;
        height: auto;
    }

    .contact-page .modal-content {
        width: 95%;
    }

    .contact-page .modal-body {
        height: 400px;
    }
}

@media (max-width: 480px) {
    .contact-page #banner-box .banner-title {
        font-size: 28px;
    }

    .contact-page .contact-card h2,
    .contact-page .form-card h2 {
        font-size: 24px;
    }

    .contact-page .contact-item {
        flex-direction: column;
        gap: 15px;
    }

    .contact-page .contact-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .contact-page .social-icons {
        justify-content: center;
    }
}

.news-center-page {
    width: 100%;
    min-height: 100vh;
    background: #f8fafc;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* BannerÇøÓò */
.news-center-page .news-banner {
    position: relative;
    width: 100%;
    height: 600px;
    margin-top: 70px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.news-center-page .news-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(37, 99, 235, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.5;
}

.news-center-page .banner-overlay {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
}

.news-center-page .banner-title {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 15px;
    background: linear-gradient(90deg, #fff, #93c5fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.news-center-page .banner-subtitle {
    font-size: 18px;
    color: #94a3b8;
    letter-spacing: 1px;
}

/* ÐÂÎÅÈÝÆ÷ */
.news-center-page .news-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
}

/* ÐÂÎÅÁбí */
.news-center-page .news-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.news-center-page .news-item {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.news-center-page .news-image {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.news-center-page .news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-center-page .news-item:hover .news-image img {
    transform: scale(1.08);
}

.news-center-page .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.news-center-page .news-item:hover .image-overlay {
    opacity: 1;
}

/* ÈÕÆÚ±êÇ© */
.news-center-page .news-date {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    padding: 10px 15px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.news-center-page .news-date .day {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: #2563eb;
    line-height: 1;
}

.news-center-page .news-date .month-year {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
}

/* ÐÂÎÅÄÚÈÝ */
.news-center-page .news-content {
    padding: 25px;
}

.news-center-page .news-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
    line-height: 1.4;
}

.news-center-page .news-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.news-center-page .news-title a:hover {
    color: #2563eb;
}

.news-center-page .news-description {
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-center-page .news-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px solid #f1f5f9;
    font-size: 13px;
    color: #94a3b8;
}

.news-center-page .news-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.news-center-page .news-meta i {
    font-size: 12px;
}

.news-center-page .read-more {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.news-center-page .read-more:hover {
    color: #0ea5e9;
    transform: translateX(3px);
}

/* ·ÖÒ³ */
.news-center-page .pagination-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.news-center-page .pagination {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.news-center-page .pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 16px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #475569;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.news-center-page .pagination a:hover:not(.disabled) {
    background: #f8fafc;
    border-color: #2563eb;
    color: #2563eb;
    transform: translateY(-2px);
}

.news-center-page .page-num-current {
    background: linear-gradient(90deg, #2563eb, #0ea5e9);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.news-center-page .pagination a.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.news-center-page .page-info {
    color: #64748b;
    font-size: 14px;
}

/* ÏìӦʽÉè¼Æ */
@media (max-width: 1024px) {
    .news-center-page .news-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .news-center-page .news-banner {
        height: 240px;
    }

    .news-center-page .banner-title {
        font-size: 32px;
    }

    .news-center-page .banner-subtitle {
        font-size: 16px;
    }

    .news-center-page .news-list {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .news-center-page .news-container {
        padding: 40px 20px;
    }

    .news-center-page .news-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .news-center-page .read-more {
        align-self: flex-end;
    }

    .news-center-page .pagination {
        gap: 6px;
    }

    .news-center-page .pagination a {
        min-width: 40px;
        height: 40px;
        padding: 0 12px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .news-center-page .news-date {
        padding: 8px 12px;
    }

    .news-center-page .news-date .day {
        font-size: 20px;
    }

    .news-center-page .news-date .month-year {
        font-size: 11px;
    }

    .news-center-page .news-content {
        padding: 20px;
    }

    .news-center-page .news-title {
        font-size: 18px;
    }

    .news-center-page .pagination a {
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        font-size: 13px;
    }
}

.news-detail-page {
    width: 100%;
    min-height: 100vh;
    background: #f8fafc;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* BannerÇøÓò */
.news-detail-page .news-banner {
    position: relative;
    width: 100%;
    height: 300px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.news-detail-page .news-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(37, 99, 235, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.5;
}

.news-detail-page .banner-overlay {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
}

.news-detail-page .banner-title {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 15px;
    background: linear-gradient(90deg, #fff, #93c5fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.news-detail-page .banner-subtitle {
    font-size: 18px;
    color: #94a3b8;
    letter-spacing: 1px;
}


/* ÄÚÈÝÈÝÆ÷ */
.news-detail-page .news-detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 50px;
}

.news-detail-page .industrial_detail {
    grid-template-columns: none !important;
}

.news-detail-page .industrial_detail .title {
    text-align: center;
}

/* ÖØÒªÄÚÈÝÇø */
.news-detail-page .news-content-wrapper {
    min-width: 0;
}

/* ÎÄÕÂÄÚÈÝ */
.news-detail-page .article-content {
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 40px;
}

.news-detail-page .article-content .title {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 15px;
}

.news-detail-page .article-content .news-meta {
    margin: 10px 0;
    text-align: center;
    color: #b5b5b5;
}

.news-detail-page .article-content .news-meta span {
    margin: 0px 10px;
}

.news-detail-page .article-cover {
    margin: -40px -40px 30px -40px;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}

.news-detail-page .article-cover img {
    width: 100%;
    height: auto;
    display: block;
}

.news-detail-page .article-body {
    color: #374151;
    line-height: 1.8;
    font-size: 16px;
}

.news-detail-page .article-body h2 {
    font-size: 24px;
    color: #1e293b;
    margin: 30px 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
}

.news-detail-page .article-body h3 {
    font-size: 20px;
    color: #1e293b;
    margin: 25px 0 15px;
}

.news-detail-page .article-body p {
    margin-bottom: 20px;
}

.news-detail-page .article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
}

.news-detail-page .article-body blockquote {
    background: #f8fafc;
    border-left: 4px solid #2563eb;
    padding: 20px;
    margin: 25px 0;
    border-radius: 0 8px 8px 0;
    color: #475569;
    font-style: italic;
}

/* ÎÄÕÂĿ¼ */
.news-detail-page .article-toc {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
}

.news-detail-page .article-toc h4 {
    font-size: 18px;
    color: #1e293b;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}

.news-detail-page .article-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.news-detail-page .article-toc li {
    margin-bottom: 8px;
}

.news-detail-page .article-toc li.h3 {
    padding-left: 15px;
}

.news-detail-page .article-toc a {
    color: #475569;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.news-detail-page .article-toc a:hover {
    color: #2563eb;
}

/* ±êÇ© */
.news-detail-page .article-tags {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #e2e8f0;
}

.news-detail-page .article-tags h4 {
    font-size: 16px;
    color: #1e293b;
    margin-bottom: 15px;
}

.news-detail-page .tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.news-detail-page .tag {
    display: inline-block;
    padding: 8px 16px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
}

.news-detail-page .tag:hover {
    background: #2563eb;
    color: white;
    transform: translateY(-2px);
}

/* ²Ù×÷À¸ */
.news-detail-page .action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding: 20px 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.news-detail-page .share-buttons {
    display: flex;
    align-items: center;
    gap: 15px;
}

.news-detail-page .share-label {
    color: #64748b;
    font-size: 14px;
}

.news-detail-page .share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.news-detail-page .share-btn.weixin {
    background: #e8f5e9;
    color: #2e7d32;
}

.news-detail-page .share-btn.weibo {
    background: #fce4ec;
    color: #c62828;
}

.news-detail-page .share-btn.qq {
    background: #e3f2fd;
    color: #1565c0;
}

.news-detail-page .share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.news-detail-page .favorite-btn button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #f1f5f9;
    border: none;
    border-radius: 20px;
    color: #475569;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.news-detail-page .favorite-btn button:hover {
    background: #e2e8f0;
}

.news-detail-page .favorite-btn button.favorited {
    background: #fef3c7;
    color: #92400e;
}

/* ÉÏһƪ/ÏÂһƪµ¼º½ */
.news-detail-page .prev-next-nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
}

.news-detail-page .prev-article,
.news-detail-page .next-article {
    flex: 1;
    max-width: 48%;
}

.news-detail-page .nav-link {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.news-detail-page .nav-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.news-detail-page .nav-disabled {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    color: #94a3b8;
}

.news-detail-page .nav-info {
    flex: 1;
}

.news-detail-page .nav-label {
    display: block;
    font-size: 13px;
    color: #64748b;
    margin-bottom: 5px;
}

.news-detail-page .nav-title {
    display: block;
    font-size: 15px;
    color: #1e293b;
    font-weight: 500;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

/* ²à±ßÀ¸ */
.news-detail-page .news-sidebar {
    min-width: 0;
}

.news-detail-page .sidebar-widget {
    background: white;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.news-detail-page .widget-title {
    font-size: 18px;
    color: #1e293b;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
}

.news-detail-page .widget-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 50px;
    height: 2px;
    background: #2563eb;
}

/* ÈȵãÐÂÎÅ */
.news-detail-page .hot-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #f1f5f9;
}

.news-detail-page .hot-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.news-detail-page .hot-rank {
    width: 28px;
    height: 28px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    flex-shrink: 0;
}

.news-detail-page .hot-item:nth-child(1) .hot-rank {
    background: #fef3c7;
    color: #92400e;
}

.news-detail-page .hot-item:nth-child(2) .hot-rank {
    background: #e5e7eb;
    color: #374151;
}

.news-detail-page .hot-item:nth-child(3) .hot-rank {
    background: #fed7aa;
    color: #9a3412;
}

.news-detail-page .hot-info h4 {
    font-size: 15px;
    margin-bottom: 5px;
}

.news-detail-page .hot-info h4 a {
    color: #1e293b;
    text-decoration: none;
    transition: color 0.3s ease;
}

.news-detail-page .hot-info h4 a:hover {
    color: #2563eb;
}

.news-detail-page .hot-meta {
    font-size: 13px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ÓйØÍƼö */
.news-detail-page .related-item {
    display: flex;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #f1f5f9;
}

.news-detail-page .related-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.news-detail-page .related-image {
    width: 80px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.news-detail-page .related-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-detail-page .related-info h4 {
    font-size: 14px;
    margin-bottom: 5px;
}

.news-detail-page .related-info h4 a {
    color: #1e293b;
    text-decoration: none;
    transition: color 0.3s ease;
}

.news-detail-page .related-info h4 a:hover {
    color: #2563eb;
}

.news-detail-page .related-date {
    font-size: 12px;
    color: #94a3b8;
}

/* ÁªÏµÈËÉú¾ÍÊDz©ÊÖ»ú°æ */
.news-detail-page .contact-widget .contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #f1f5f9;
}

.news-detail-page .contact-widget .contact-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.news-detail-page .contact-widget .contact-item i {
    width: 40px;
    height: 40px;
    background: #f0f7ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    font-size: 16px;
    flex-shrink: 0;
}

.news-detail-page .contact-label {
    display: block;
    font-size: 13px;
    color: #64748b;
    margin-bottom: 3px;
}

.news-detail-page .contact-value {
    display: block;
    font-size: 15px;
    color: #1e293b;
    font-weight: 500;
}

/* ÏìӦʽÉè¼Æ */
@media (max-width: 1024px) {
    .news-detail-page .news-detail-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .news-detail-page .news-sidebar {
        order: -1;
    }
}

@media (max-width: 768px) {
    .news-detail-page #banner-box {
        padding: 40px 0;
    }

    .news-detail-page #banner-box .banner-title {
        font-size: 28px;
    }

    .news-detail-page .news-meta {
        gap: 15px;
    }

    .news-detail-page .article-content {
        padding: 30px 20px;
    }

    .news-detail-page .article-cover {
        margin: -30px -20px 25px -20px;
    }

    .news-detail-page .action-bar {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }

    .news-detail-page .prev-next-nav {
        flex-direction: column;
        gap: 20px;
    }

    .news-detail-page .prev-article,
    .news-detail-page .next-article {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .news-detail-page #banner-box .banner-title {
        font-size: 24px;
    }

    .news-detail-page .news-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .news-detail-page .share-buttons {
        flex-wrap: wrap;
    }

    .news-detail-page .article-body {
        font-size: 15px;
    }

    .news-detail-page .article-body h2 {
        font-size: 20px;
    }

    .news-detail-page .article-body h3 {
        font-size: 18px;
    }
}

/* ºáÏòËÄÁÐÈÝÆ÷ */
.why-choose-us .container-bg {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    max-width: 1600px;
    width: 100%;
    background-image: url(/static/images/foot.jpg);
}

.why-choose-us .container-bg::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    /* background: rgba(42, 109, 255, 0.397); */
    /* ÉîÉ«°ëͨÃ÷ */
    backdrop-filter: blur(6px);
    z-index: 0;
}

/* ¿¨Æ¬ÐÎ×´ */
.why-choose-us .index-card {
    flex: 1;
    /* »ù´¡¿í¶È 220px£¬ÔÊÐíÀ©´ó£¬±£ÕϺáÏò·ÖÁÐ */
    min-height: 340px;
    background: rgba(18, 25, 45, 0.50);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 20px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
    border-right: 1px solid #fff;
}

.why-choose-us .index-card:last-child {
    border: none;
}

/* ¿¨Æ¬ÐüÍ£³ÉЧ£º²¼¾°Ö²ʱäÉÉϸ¡£¬Ôö³¤ÒõÓ° */
.why-choose-us .index-card:hover {
    background: rgba(8, 12, 30, 0.9);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.60);
    border-color: rgba(255, 255, 255, 0.15);
}

/* ¿¨Æ¬ÄÚÈÝÇøÓò */
.why-choose-us .index-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    transition: transform 0.3s ease;
}

/* ±êÌâ */
.why-choose-us .index-card-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.50);
}

/* ¼ò¶ÌÃèÊö£¨Ê¼ÖÕÏÔʾ£© */
.why-choose-us .index-card-subtitle {
    font-size: 1rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.04em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.40);
    margin-bottom: 0;
    transition: color 0.3s ease;
    line-height: 1.5;
}

.why-choose-us .index-card:hover .index-card-subtitle {
    color: rgba(255, 255, 255, 0.95);
}

/* ¾ßÌåÃèÊö£¨Ä¬ÈÏ°µ²Ø£¬Ðüͣʹع¿ª£© */
.why-choose-us .index-card-detail {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.23, 1, 0.32, 1),
        opacity 0.5s ease,
        margin 0.4s ease,
        padding 0.4s ease;
    margin-top: 0;
    padding-top: 0;
    color: rgba(255, 255, 255, 0.90);
    font-size: 0.92rem;
    line-height: 1.7;
    font-weight: 300;
    letter-spacing: 0.03em;
    width: 100%;
    border-top: 1px solid transparent;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.40);
}

/* ÐüͣʱÏÔʾ¾ßÌåÃèÊö */
.why-choose-us .index-card:hover .index-card-detail {
    max-height: 400px;
    /* ×ã¹»°üÈݾßÌåÎı¾ */
    opacity: 1;
    margin-top: 16px;
    padding-top: 16px;
    border-top-color: rgba(255, 255, 255, 0.10);
}

/* ¿¨Æ¬ÄڵĸßÁÁ±êÇ©£¨¿ÉÑ¡£¬¼ÓÇ¿¿É¶ÁÐÔ£© */
.why-choose-us .index-card-detail span {
    display: inline-block;
    background: rgba(255, 255, 255, 0.08);
    padding: 0 10px;
    border-radius: 4px;
    margin: 2px 3px;
    font-weight: 400;
    color: #fff;
}

/* ÏìӦʽ£º´óÆÁÀ­É죬ÖÐÆÁ»»ÐУ¬Ó×ÆÁ¶Ñµþ */
@media (max-width: 1024px) {
    .why-choose-us .index-card {
        flex: 1;
        min-height: 300px;
        padding: 24px 18px;
    }

    .why-choose-us .index-card-title {
        font-size: 1.6rem;
    }

    .why-choose-us .index-card-subtitle {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .why-choose-us .container-bg {
        display: grid;
        grid-template-columns: repeat(2, 2fr);
    }

    .why-choose-us .index-card {
        flex: 1;
        min-height: 260px;
        padding: 20px 14px;
    }

    .why-choose-us .index-card:nth-child(n) {
        border-bottom: 1px solid #fff;

    }

    .why-choose-us .index-card-title {
        font-size: 1.3rem;
    }

    .why-choose-us .index-card-detail {
        font-size: 0.82rem;
        line-height: 1.6;
    }

    .why-choose-us .index-card:hover .index-card-detail {
        max-height: 350px;
    }
}

@media (max-width: 480px) {

    .why-choose-us .index-card {
        flex: 1;
        min-height: 200px;
        padding: 18px 12px;
    }

    .why-choose-us .index-card-title {
        font-size: 1.5rem;
    }

    .why-choose-us .index-card-subtitle {
        font-size: 0.85rem;
    }

    .why-choose-us .index-card-detail {
        font-size: 0.8rem;
    }

    .why-choose-us .index-card:hover .index-card-detail {
        max-height: 300px;
    }
}

/* ----- Tab Çл»Ö÷Ìâ ----- */
#products .products-tab {
    position: relative;
    margin-top: 30px;
}

/* ±êÇ©°´Å¥ÈÝÆ÷ */
#products .tab-labels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 28px;
    /* Ôö³¤¼ä¾à */
}

/* ÿ¸ö±êÇ©°´Å¥ */
#products .tab-btn {
    flex: 1;
    padding: 10px 28px;
    background: #f0f4fa;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid transparent;
    letter-spacing: 0.3px;
    position: relative;
    top: -10px;
    /* ĬÈÏÉÏÒÆ£¬Îª¼¤»î̬Áô³ö¿Õ¼ä */
    text-align: center;
    background: #f0f4fa;
    border: none;
    outline: none;
}

#products .tab-btn:hover {
    background: #e3ebf5;
    color: #0b2a4a;
}

/* ¼¤»î״̬£º¸ü¸ß¸ü͹Æð */
#products .tab-btn.active {
    background: #0b1a2f;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(11, 26, 47, 0.20);
    font-weight: 600;
    border-color: #0b1a2f;
    /* ¹Ø¼ü£º±Èͨ³£±êÇ©ÓâÔ½Ò»½Ø */
    top: -20px;
    /* ÉÏÒƸü¶à */
    padding: 14px 32px;
    /* Ôö³¤Äڱ߾࣬ÈñêÇ©¸üºêΰ */
    transform: scale(1.02);
    z-index: 2;
}

/* ===== Áù¸ö·ÖÆçÀ¶É«½¥±ä ===== */
#products .tab-btn:nth-child(1) {
    background: linear-gradient(135deg, #1e3a8a, #3b82f6);
}

#products .tab-btn:nth-child(2) {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

#products .tab-btn:nth-child(3) {
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
}

#products .tab-btn:nth-child(4) {
    background: linear-gradient(135deg, #0ea5e9, #38bdf8);
}

#products .tab-btn:nth-child(5) {
    background: linear-gradient(135deg, #38bdf8, #7dd3fc);
}

#products .tab-btn:nth-child(6) {
    background: linear-gradient(135deg, #7dd3fc, #bae6fd);
}

/* ÄÚÈÝÃæ°åÈÝÆ÷ */
#products .tab-panels {
    min-height: 600px;
    background: #f8f8f8;
    border-radius: 5px;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.02);
    position: relative;
}

/* ËùÓÐÃæ°åĬÈÏ°µ²Ø */
#products .panel {
    display: none;
    animation: fadeUp 0.3s ease;
    position: relative;
    padding: 100px;
}

/* ÏÔʾ¼¤»îµÄÃæ°å£¨Í¨¹ý JS ½ÚÔì class£© */
#products .panel.active {
    display: block;
}

/* ÆäÓàÐÎ×´£¨panel-title, panel-mx, panel-img µÈά³Ö²»±ä£© */
#products .panel-mx {
    margin: 50px 0;
    font-size: 26px;
    max-width: 500px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

#products .panel-title {
    font-size: 48px;
    font-weight: 700;
    color: #0b1a2f;
    margin-bottom: 4px;
}

#products .panel-img {
    width: 400px;
    position: absolute;
    right: 20px;
    top: 20px;
}

#products .panel-img img {
    width: 100%;
}

#products .panel-more {
    display: inline-block;
    border-radius: 50px;
    /* background: linear-gradient(90deg, #1d4ed8, #0284c7); */
    /* padding: 10px 20px; */

    background-color: transparent;
    transition: all .5s ease;
}

#products .panel-more a {
    /* color: #fff; */
    color: #1B52D7;
    font-weight: bold;
    text-decoration: none;
    transition: all .5s ease;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 10px 20px;
}

#products .panel-more a i {
    margin-left: 5px;
    color: #1B52D7;
    transition: all .5s ease;
}

#products .panel-more:hover {
    background-color: #1d4ed8;
    box-shadow: 0 6px 16px rgba(29, 78, 216, .35);
    transition: all .5s ease;
}

#products .panel-more:hover a {
    color: #fff;
    transition: all .5s ease;
}

#products .panel-more:hover a i {
    color: #fff;
    transform: translateX(6px);
    transition: all .5s ease;
}

@keyframes fadeUp {
    0% {
        opacity: 0.3;
        transform: translateY(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ÏìӦʽ */
@media (max-width: 600px) {
    #products .tab-btn {
        padding: 8px 18px;
        font-size: 13px;
        flex: 1 0 auto;
        min-width: 60px;
        text-align: center;
        top: 0;
    }

    #products .tab-btn.active {
        top: -6px;
        padding: 10px 20px;
    }

    #products .panel {
        padding: 20px;
    }

    #products .panel-title {
        font-size: 28px;
    }

    #products .tab-panels {
        padding: 40px 20px;
    }

    #products .panel-img {
        width: 100%;
        right: 10px;
        position: relative;
    }
}


/* ===== ¾Å¹¬¸ñÈÝÆ÷ ===== */
.industry-applications .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

/* ===== ËùÓиñ×ÓͨÓÃÐÎ×´ ===== */
.industry-applications .grid-item {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    position: relative;
    overflow: hidden;
    min-height: 260px;
    padding: 15px;
}

/* ===== ¿¨Æ¬¸ñ×Ó£¨ÓÐÄÚÈÝ£© ===== */
.industry-applications .grid-item.card {
    background: #ffffff;
    border: 1px solid rgba(243, 243, 243, 0.7);
    cursor: default;
    margin: 0;
    border-radius: 0;
    transition: all 0.5s ease;
    position: relative;
    height: 100%;
}

.industry-applications .grid-item.card:hover {
    box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.5);
    transition: all 0.5s ease;
    /* border: 1px solid #0077b5; */
    z-index: 999;
    cursor: pointer;
}

/* ===== ¿¨Æ¬ÐòºÅ ===== */
.industry-applications .card-number {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #214194;
    margin-bottom: 10px;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.industry-applications .card-number a {
    transition: all 0.2s ease;
}

.industry-applications .card-number a:hover {
    transition: all 0.2s ease;
}

/* ===== ¿¨Æ¬±êÌâ ===== */
.industry-applications .card-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0b1e33;
    line-height: 1.2;
    margin-bottom: 10px;
    letter-spacing: -0.3px;
}

.industry-applications .card-pic {
    position: absolute;
    top: 0;
    right: 60px;
    width: 250px;
    height: 100%;
    display: flex;
    align-items: center;
}

.industry-applications .card-pic img {
    width: 100%;
    /* ά³Ö³ä³âÈÝÆ÷£¬Í¨¹ýËõ·Å½ÚÔì¿É¼û´óÓ× */
    opacity: 0;
    transform: scale(0);
    /* ³õʼËõÓ×Ϊ0 */
    transition: all 0.5s ease;
}

.industry-applications .grid-item.card:hover .card-pic img {
    opacity: 1;
    transform: scale(1);
    /* Ðüͣʱ¸´Ô­µ½Ô­Ê¼´óÓ× */
    transition: all 0.5s ease;
}

/* ===== ¿¨Æ¬ÃèÊö ===== */
.industry-applications .card-desc {
    font-size: 0.95rem;
    color: #4a5e72;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0.2px;
}

/* ===== ¿¨Æ¬×°è«É«¿é£¨×óÉϽÇÓ××°µã£© ===== */
.industry-applications .grid-item.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 2px;
    background-color: #214194;
}



/* ===== ռλԲµã ===== */
.industry-applications .placeholder-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(120, 150, 190, 0.15);
    transition: transform 0.3s ease, background 0.3s ease;
}

.industry-applications .grid-item.placeholder:hover .placeholder-dot {
    transform: scale(1.3);
    background: rgba(120, 150, 190, 0.25);
}

/* ===== ÏìӦʽÊÊÅä ===== */
@media (max-width: 700px) {
    .industry-applications .grid-container {
        padding: 18px;
        border-radius: 32px;
        aspect-ratio: auto;
        min-height: 600px;
        grid-template-columns: repeat(2, 1fr);
    }

    .industry-applications .card-pic {
        right: 25px;
        width: 100px;
    }

    .industry-applications .grid-item {
        padding: 18px 16px;
        min-height: 120px;
        border-radius: 20px;
    }

    .industry-applications .card-title {
        font-size: 16px;
    }

    .industry-applications .card-desc {
        font-size: 16px;
    }

    .industry-applications .card-number {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .industry-applications .grid-container {
        padding: 12px;
        border-radius: 24px;
        min-height: 480px;
    }

    .industry-applications .grid-item {
        padding: 14px 12px;
        min-height: 90px;
        border-radius: 16px;
    }

    .industry-applications .card-title {}

    .industry-applications .card-desc {
        line-height: 1.4;
    }

    .industry-applications .card-number {
        margin-bottom: 6px;
    }

    .industry-applications .placeholder-dot {
        width: 8px;
        height: 8px;
    }
}

/* ===== Ó×ÆÁºáÆÁÊÊÅä ===== */
@media (max-width: 700px) and (orientation: landscape) {
    .industry-applications .grid-container {
        max-width: 600px;
        min-height: 400px;
        aspect-ratio: auto;
    }

    .industry-applications .grid-item {
        min-height: 100px;
        padding: 14px 16px;
    }

    .industry-applications .card-title {
        font-size: 1.1rem;
    }

    .industry-applications .card-desc {
        font-size: 0.75rem;
    }
}<!--ºÄʱ1790203645.0614Ãë-->