/* ============================================================
 * product-lists.css  —  静态站模式下产品列表/详情页专用样式
 * 1:1 对标 https://www.digitalchina.com/product/details221.html?scroll=tabli4
 * 图片资源目录：{template}/pc/skin/picture/  （所有图已下载）
 * JS 脚本：    {template}/pc/skin/js/product-lists.js
 * ============================================================ */

/* ---------- 0. 基础重置 & 防旧 CSS 污染（细节以 !important 兜底） ---------- */
body { margin: 0; padding: 0; }
.page-cr,
.page-cr * { box-sizing: border-box; }
.home-title-box,
.product-banner,
.applicable-scenarios-section,
.best-practices-section,
.product-introduce-section,
.applicable-scenarios-inner,
.applicable-scenarios-swiper-container,
.ai-serve-list-inner,
.particles-wrapper,
.sub-title-box,
.cont,
.swiper-page,
.swiper-arrow,
.swiper-pagination-fraction,
.btn-box a,
.clearfix,
.clearfix:before,
.clearfix:after { box-sizing: border-box; }
.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

/* ---------- 1. Product-Banner（全宽 100% × 522h，与栏目头 header 宽度一致） ---------- */
.product-banner {
    position: relative;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    margin: 0;
    height: 522px;
    min-height: 522px;
    overflow: hidden;
    background: #fff;
    display: block;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}
.product-banner > .hidden-xs,
.product-banner > .visible-xs {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-width: 100%;
    height: 522px;
    min-height: 522px;
    display: block;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
    transform: none;
}
.product-banner > .visible-xs { display: none !important; }
.product-banner .banner-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}
.product-banner .edit-container {
    width: 1200px;
    max-width: 94%;
    margin: 0 auto;
}
.product-banner .edit-container .title {
    font-size: 25.2px;
    line-height: 37.8px;
    font-weight: 700;
    color: #000;
    margin: 0;
}
.product-banner .edit-container .cont {
    font-size: 12.6px;
    line-height: 22.68px;
    color: #000;
    margin: 6.3px 0 0 0;
    max-width: 100%;
}
.product-banner .edit-container .btn-box {
    margin-top: 25px;
    pointer-events: auto;
}
.product-banner .edit-container .btn-box a,
.product-banner .edit-container .btn-box a.expert-counselling-btn,
.product-banner .edit-container .btn-box a.return-product-list {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 178px;
    padding: 0 34px;
    font-size: 11.34px;
    font-weight: 500;
    color: #fff;
    background-image: url('../picture/tde42b1e4_home-banner-btn-bg.webp');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 100%;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: filter .2s ease, transform .2s ease, background-position .2s ease;
}
.product-banner .edit-container .btn-box a:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.product-banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 160px;
    z-index: 1;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 60%, rgba(255,255,255,0.88) 100%);
    pointer-events: none;
}

/* ---------- 2. Home-Title-Box（section 标题 25.2px 700 居中） ---------- */
.home-title-box { width: 100%; }
.home-title-box .title {
    width: 1200px;
    max-width: 94%;
    margin: 0 auto;
    font-size: 25.2px;
    line-height: 37.8px;
    font-weight: 700;
    color: #000;
    text-align: center;
}

/* ---------- 3. Page-Cr Breadcrumb ---------- */
.page-cr {
    padding: 18px 0;
    background: #fafbfd;
    border-bottom: 1px solid #ebeef3;
}
.page-cr .c-wrap {
    width: 1200px;
    max-width: 94%;
    margin: 0 auto;
    font-size: 12.6px;
    color: #555;
    line-height: 1;
}
.page-cr .c-wrap a {
    color: #555;
    text-decoration: none;
    transition: color .15s;
}
.page-cr .c-wrap a:hover { color: #e51d35; }
.page-cr .c-wrap .sep {
    margin: 0 7px;
    color: #b5b7bd;
}
.page-cr .c-wrap .cur {
    color: #000;
    font-weight: 500;
}

/* ---------- 4. Applicable-Scenarios-Section（629h，float 三栏 461 / 89 / 404） ---------- */
.applicable-scenarios-section {
    position: relative;
    padding: 63px 0;
    background: #fff;
    overflow: hidden;
}
.applicable-scenarios-inner {
    width: 1200px;
    max-width: 94%;
    margin: 51px auto 0;
}
.applicable-scenarios-inner .edit-container {
    width: 949px;
    max-width: 100%;
    margin: 0 auto;
}
.applicable-scenarios-swiper-container {
    position: relative;
    width: 949px;
    max-width: 100%;
    height: 415px;
    margin: 0 auto;
    zoom: 1;
}
.applicable-scenarios-swiper-container:after {
    content: "";
    display: table;
    clear: both;
}
.applicable-scenarios-swiper {
    position: relative;
    width: 461px;
    max-width: 100%;
    height: 415px;
    float: left;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0,0,0,0.12), 0 6px 18px rgba(0,0,0,0.07);
    background: linear-gradient(135deg, #f4f6fb 0%, #e8ecf5 100%);
}
.applicable-scenarios-swiper .pic {
    position: absolute;
    inset: 0;
}
.applicable-scenarios-swiper .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.applicable-scenarios-swiper::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255,255,255,0.08) 0%, rgba(229,29,53,0.06) 50%, rgba(0,0,0,0.18) 100%);
}
.applicable-scenarios-swiper-container .swiper-page {
    position: absolute;
    left: 547px;
    top: 336.9px;
    width: 89px;
    height: 28px;
    display: block;
    z-index: 2;
    margin: 0;
}
.applicable-scenarios-swiper-container .swiper-arrow {
    position: relative;
    width: 24px;
    height: 28px;
    background: transparent;
    border: 0;
    display: block;
    cursor: pointer;
    padding: 0;
    transition: opacity .2s;
    overflow: hidden;
}
.applicable-scenarios-swiper-container .swiper-arrow-prev {
    float: left;
    background: url('../picture/tdecb7a71_icon-swiper-arrow-prev.webp') center center no-repeat;
    background-size: 100% auto;
    padding: 0;
    text-indent: -99999px;
}
.applicable-scenarios-swiper-container .swiper-arrow-next {
    float: right;
    background: url('../picture/tdea000ab_icon-swiper-arrow-next.webp') center center no-repeat;
    background-size: 100% auto;
    padding: 0;
    text-indent: -99999px;
}
.applicable-scenarios-swiper-container .swiper-arrow:hover { opacity: .7; }
.applicable-scenarios-swiper-container .swiper-arrow::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    border-top: 1.5px solid #111;
    border-left: 1.5px solid #111;
    display: none;
}
.applicable-scenarios-swiper-container .swiper-pagination-fraction {
    float: left;
    width: 32px;
    margin: 0 0 0 4.5px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    color: #444;
    text-align: center;
}
.applicable-scenarios-swiper-container .swiper-pagination-fraction .swiper-pagination-current {
    font-weight: 700;
    color: #e51d35;
    font-size: 13px;
}
.applicable-scenarios-swiper-cont {
    position: relative;
    width: 404px;
    height: 88px;
    float: right;
    margin: 75.6px 0 0 0;
    display: block;
    text-align: left;
}
.applicable-scenarios-swiper-cont h3,
.applicable-scenarios-swiper-cont .title {
    font-size: 20.16px;
    line-height: 1.4;
    font-weight: 700;
    color: #000;
    margin: 0 0 14px 0;
}
.applicable-scenarios-swiper-cont p,
.applicable-scenarios-swiper-cont .cont {
    font-size: 11.34px;
    line-height: 20.412px;
    color: #000;
    margin: 0;
    text-indent: 0;
}
.applicable-scenarios-swiper-cont a,
.applicable-scenarios-swiper-cont .more {
    font-size: 12.6px;
    line-height: 1;
    color: #bf1010;
    text-decoration: none;
    margin-top: 14px;
    display: inline-block;
}
.applicable-scenarios-swiper-cont a:hover { color: #e51d35; }

/* ---------- 5. Best-Practices-Section（530h，padding 63/63，背景图） ---------- */
.best-practices-section {
    position: relative;
    padding: 63px 0;
    overflow: hidden;
    background: url('../picture/tdef1e367_best-practices-bg.webp') no-repeat 50% 50%;
    background-size: cover;
}
.best-practices-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(246,248,252,0.90) 100%);
    pointer-events: none;
}
.best-practices-section .ai-serve-list-inner {
    position: relative;
    z-index: 1;
    width: 1200px;
    max-width: 94%;
    margin: 32px auto 0;
}
.best-practices-section .ai-serve-list-inner .edit-container {
    position: relative;
    width: 100%;
}
.best-practices-section ul.clearfix {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: block;
    letter-spacing: -0.31em;
    font-size: 0;
    text-align: center;
}
.best-practices-section ul.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
.best-practices-section ul.clearfix > li {
    display: inline-block;
    letter-spacing: 0;
    vertical-align: top;
    width: 33.3333%;
    max-width: 242px;
    height: 328px;
    padding: 0 9.45px;
    box-sizing: border-box;
    margin: 0;
    position: relative;
    float: none;
    list-style: none;
}
.best-practices-section ul.clearfix > li .cover,
.best-practices-section ul.clearfix > li > .card {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0;
    background: #000;
}
.best-practices-section ul.clearfix > li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.best-practices-section ul.clearfix > li:hover img {
    transform: scale(1.05);
}
.best-practices-section ul.clearfix > li .mask {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.45) 68%, rgba(0,0,0,0.78) 100%);
    pointer-events: none;
}
.best-practices-section ul.clearfix > li .text {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 18px;
    z-index: 3;
    color: #fff;
    text-align: left;
}
.best-practices-section ul.clearfix > li .text .title {
    font-size: 20.16px;
    line-height: 1.3;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

/* ---------- 6. Product-Introduce-Section（300h，外层空 canvas-wrapper + 粒子动画 ::after） ---------- */
.product-introduce-section {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    padding: 0 0 63px 0;
    background: #fff;
}
.product-introduce-section .particles-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    width: 100%;
    z-index: 0;
    overflow: hidden;
}
.product-introduce-section::before,
.product-introduce-section .particles-wrapper::before,
.product-introduce-section .particles-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.product-introduce-section::before {
    z-index: 0;
    background:
        radial-gradient(circle at 10% 20%, rgba(229,29,53,0.10) 0%, transparent 36%),
        radial-gradient(circle at 85% 30%, rgba(52,120,255,0.08) 0%, transparent 40%),
        radial-gradient(circle at 50% 90%, rgba(99,102,241,0.08) 0%, transparent 45%);
}
.product-introduce-section .particles-wrapper::after {
    z-index: 1;
    background-image:
        radial-gradient(rgba(0,0,0,0.45) 1px, transparent 1.4px),
        radial-gradient(rgba(229,29,53,0.45) 1px, transparent 1.4px),
        radial-gradient(rgba(99,102,241,0.35) 1px, transparent 1.4px);
    background-size: 120px 120px, 180px 180px, 260px 260px;
    background-position: 0 0, 40px 60px, 80px 30px;
    opacity: 0.35;
    animation: twinkleMove 18s linear infinite;
}
@keyframes twinkleMove {
    0%   { background-position: 0 0, 40px 60px, 80px 30px; opacity: 0.30; }
    50%  { background-position: 30px 18px, 10px 90px, 110px 5px; opacity: 0.42; }
    100% { background-position: 0 0, 40px 60px, 80px 30px; opacity: 0.30; }
}
.product-introduce-section .edit-container {
    position: relative;
    width: 949px;
    max-width: 94%;
    margin: 0 auto;
    height: 237px;
    z-index: 2;
}
.product-introduce-section .sub-title-box { margin: 0 0 19px 0; }
.product-introduce-section .sub-title-box .title {
    font-size: 14px;
    line-height: 37px;
    font-weight: 700;
    color: #000;
    margin: 0;
    height: 37px;
}
.product-introduce-section .cont {
    width: 100%;
    height: 181px;
}
.product-introduce-section .cont p {
    margin: 0 0 13px 0;
    padding: 0;
    font-size: 12.6px;
    line-height: 22.68px;
    color: #000;
    text-align: left;
    text-indent: 0;
}
.product-introduce-section .cont p:last-child { margin-bottom: 0; }
.product-introduce-section .cont p b {
    color: #bf1010;
    font-weight: 700;
    margin-right: 4px;
}
.product-introduce-section canvas {
    display: none !important;
}

/* ---------- 7. 进入视口动画（js-m → animate） ---------- */
.js-m {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition: opacity .75s ease, transform .75s ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.js-m.animate {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
.delay1 { transition-delay: 0.05s; }
.delay2 { transition-delay: 0.18s; }
.delay3 { transition-delay: 0.32s; }

/* ---------- 8. 同系列产品推荐 active（view_product.htm 使用） ---------- */
.best-practices-section ul.clearfix > li.active .cover {
    box-shadow: 0 0 0 2px #e51d35 inset, 0 16px 38px rgba(229,29,53,0.18);
}
.best-practices-section ul.clearfix > li.active .cover .text .title {
    color: #ffd8db;
}

/* ---------- 9. 响应式 @media 992px（平板） ---------- */
@media (max-width: 992px) {
    .product-banner {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        height: 340px !important;
        min-height: 340px !important;
        transform: translateX(-50%) !important;
    }
    .product-banner > .hidden-xs {
        width: 100% !important;
        height: 340px !important;
        min-height: 340px !important;
        object-fit: cover !important;
    }
    .product-banner .edit-container .title {
        font-size: 21px;
        line-height: 1.35;
    }
    .product-banner .edit-container .cont { font-size: 12px; }
    .home-title-box .title { font-size: 21px; }
    .applicable-scenarios-section { padding: 48px 0; }
    .applicable-scenarios-inner { margin-top: 32px !important; }
    .applicable-scenarios-inner .edit-container { width: 100%; }
    .applicable-scenarios-swiper-container {
        width: 100%;
        height: auto;
    }
    .applicable-scenarios-swiper {
        width: 100%;
        max-width: 520px;
        height: auto;
        aspect-ratio: 461 / 415;
        float: none;
    }
    .applicable-scenarios-swiper-container .swiper-page {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 520px !important;
        margin: 14px auto 0 !important;
        height: 28px !important;
    }
    .applicable-scenarios-swiper-container .swiper-pagination-fraction {
        margin-left: calc(50% - 60px);
    }
    .applicable-scenarios-swiper-cont {
        width: 100%;
        height: auto;
        float: none;
        margin: 28px 0 0 0;
    }
    .best-practices-section { padding: 48px 0 !important; }
    .best-practices-section .ai-serve-list-inner { margin-top: 26px !important; }
    .best-practices-section ul.clearfix > li {
        width: 50%;
        max-width: 360px;
        height: auto;
        aspect-ratio: 242 / 328;
    }
    .product-introduce-section {
        height: auto !important;
        padding-bottom: 44px !important;
    }
    .product-introduce-section .particles-wrapper { display: none !important; }
    .product-introduce-section .edit-container {
        width: 100% !important;
        height: auto !important;
        padding-top: 44px !important;
    }
    .product-introduce-section .cont {
        height: auto !important;
    }
}

/* ---------- Footer contact-btn：与 Banner 按钮同一套 tde42b1e4_home-banner-btn-bg.webp ---------- */
.footer-contact {
    margin: 0;
    padding: 0;
    display: block;
}
.footer-contact-btn,
a.footer-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 178px;
    padding: 0 34px;
    font-size: 11.34px;
    font-weight: 500;
    color: #fff;
    background-image: url('../picture/tde42b1e4_home-banner-btn-bg.webp');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 100%;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: filter .2s ease, transform .2s ease, background-position .2s ease;
    box-sizing: border-box;
}
.footer-contact-btn:hover,
a.footer-contact-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* ---------- 10. 响应式 @media 520px（移动端） ---------- */
@media (max-width: 520px) {
    body { padding-top: 40px !important; }
    .product-banner {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        min-height: 220px !important;
        height: 220px !important;
        transform: translateX(-50%) !important;
    }
    .product-banner > .hidden-xs { display: none !important; }
    .product-banner > .visible-xs {
        display: block !important;
        width: 100% !important;
        height: 220px !important;
        min-height: 220px !important;
        object-fit: cover !important;
    }
    .product-banner .banner-inner {
        align-items: flex-end;
        padding-bottom: 20px;
    }
    .product-banner .edit-container .title {
        font-size: 18px !important;
        line-height: 1.35 !important;
        margin-bottom: 0 !important;
    }
    .product-banner .edit-container .cont {
        font-size: 12px !important;
        line-height: 1.55 !important;
        margin-top: 8px !important;
    }
    .product-banner .edit-container .btn-box { margin-top: 14px !important; }
    .product-banner .edit-container .btn-box a {
        height: 36px !important;
        min-width: 140px !important;
        padding: 0 20px !important;
        font-size: 11px !important;
    }
    .page-cr { padding: 12px 0 !important; }
    .page-cr .c-wrap { font-size: 11.5px !important; }
    .home-title-box .title {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }
    .applicable-scenarios-section { padding: 28px 0 !important; }
    .applicable-scenarios-inner { margin-top: 20px !important; }
    .applicable-scenarios-swiper {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 16 / 11 !important;
    }
    .applicable-scenarios-swiper-container .swiper-page {
        width: 100% !important;
        margin-top: 10px !important;
    }
    .applicable-scenarios-swiper-cont {
        width: 100% !important;
        margin-top: 20px !important;
    }
    .applicable-scenarios-swiper-cont .title {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }
    .applicable-scenarios-swiper-cont .cont {
        font-size: 11.5px !important;
        line-height: 1.6 !important;
    }
    .best-practices-section {
        padding: 28px 0 36px !important;
    }
    .best-practices-section .ai-serve-list-inner { margin-top: 20px !important; }
    .best-practices-section ul.clearfix > li {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 10 !important;
        padding: 0 !important;
        margin-bottom: 18px !important;
    }
    .best-practices-section ul.clearfix > li:last-child { margin-bottom: 0 !important; }
    .best-practices-section ul.clearfix > li .text .title {
        font-size: 17px !important;
    }
    .product-introduce-section {
        height: auto !important;
        padding-bottom: 30px !important;
    }
    .product-introduce-section .particles-wrapper { display: none !important; }
    .product-introduce-section .edit-container {
        width: 100% !important;
        height: auto !important;
        padding: 28px 0 0 !important;
    }
    .product-introduce-section .sub-title-box { margin-bottom: 16px !important; }
    .product-introduce-section .sub-title-box .title {
        font-size: 15px !important;
        line-height: 1.4 !important;
        height: auto !important;
    }
    .product-introduce-section .cont {
        width: 100% !important;
        height: auto !important;
    }
    .product-introduce-section .cont p {
        font-size: 11.5px !important;
        line-height: 1.7 !important;
        margin-bottom: 12px !important;
    }
}


/* a837e3 */
:root {
    text-rendering: optimizeLegibility;
}
::selection {
    line-break: strict;
}