@charset "UTF-8";

*,
:after,
:before {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    height: 100%;
    scroll-behavior: smooth
}

body {
    min-height: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    line-height: 1.5;
    transition: padding-right .3s ease
}

body,
html {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji, Microsoft Yahei, PingFang SC
}

ol,
ul {
    list-style: none
}

a {
    color: inherit;
    text-decoration: none
}

canvas,
img,
picture,
svg,
video {
    display: block;
    height: auto;
    max-width: 100%
}

button,
input,
select,
textarea {
    color: inherit;
    font: inherit
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    overflow-wrap: break-word
}

#__next,
#root {
    isolation: isolate
}

button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

fieldset {
    border: 0;
    margin: 0
}

dialog,
fieldset {
    padding: 0
}

* {
    -webkit-tap-highlight-color: transparent
}

::-webkit-scrollbar-track {
    border-radius: 10px
}

::-webkit-scrollbar-thumb {
    background-color: hsla(220, 4%, 58%, .3);
    border-radius: 10px
}

::-webkit-scrollbar {
    height: 16px;
    width: 16px
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
    border: 5px solid transparent;
    border-radius: 999px
}

::-webkit-scrollbar-thumb {
    background-clip: content-box;
    min-height: 20px
}

::-webkit-scrollbar-corner {
    background: transparent
}

.embed-messageboard {
    display: none
}

@font-face {
    font-family: iconfont;
    src: url(//at.alicdn.com/t/font_2104092_mi6hp073c49.eot);
    src: url(//at.alicdn.com/t/font_2104092_mi6hp073c49.eot?#iefix) format("embedded-opentype"), url(//at.alicdn.com/t/font_2104092_mi6hp073c49.woff2) format("woff2"), url(//at.alicdn.com/t/font_2104092_mi6hp073c49.woff) format("woff"), url(//at.alicdn.com/t/font_2104092_mi6hp073c49.ttf) format("truetype"), url(//at.alicdn.com/t/font_2104092_mi6hp073c49.svg#iconfont) format("svg")
}

.iconfont {
    font-family: iconfont !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.iconfont-cw:before {
    content: "\e7f5";
    font-size: 88px
}

.iconfont-zy:before {
    content: "\e7f4";
    font-size: 88px
}

.iconfont-xz:before {
    content: "\e7f3";
    font-size: 88px
}

.iconfont-xs:before {
    content: "\e7f1";
    font-size: 88px
}

.iconfont-rc:before {
    content: "\e7f2";
    font-size: 88px
}

.iconfont-bi:before {
    color: #0092ff;
    content: "\e7ec";
    font-size: 128px
}

.iconfont-bb:before {
    color: #0092ff;
    content: "\e7ed";
    font-size: 128px
}

.iconfont-lc:before {
    color: #0092ff;
    content: "\e7ee";
    font-size: 128px
}

.iconfont-mh:before {
    color: #0092ff;
    content: "\e7ef";
    font-size: 128px
}

.iconfont-ziyuan2:before {
    color: #0092ff;
    content: "\e807";
    font-size: 86px;
    margin: 0 auto;
    position: relative;
    top: 29px
}

.iconfont-zx:before {
    color: #0092ff;
    content: "\e7f0";
    font-size: 128px
}

.iconfont-tx:before {
    color: #0092ff;
    content: "\e7e9";
    font-size: 128px
}

.iconfont-dianhua:before {
    color: #29a3ff;
    content: "\e7fb";
    font-size: 45px;
    padding-left: 10px
}

.iconfont-tiyan:before {
    content: "\e7f7";
    font-size: 26px
}

.iconfont-zixun:before {
    content: "\e7f8";
    font-size: 26px
}

.iconfont-dianhua1:before {
    content: "\e7f9";
    font-size: 30px
}

.iconfont-kefu:before {
    content: "\e7fa";
    font-size: 35px
}

.iconfont-delete:before {
    content: "\e7fd"
}

.iconfont-toTop:before {
    color: #fff;
    content: "\e7fc";
    font-size: 35px
}

.iconfont-check:before {
    color: #bcc1cc;
    content: "\e802";
    font-size: 22px;
    position: absolute;
    right: 0
}

.iconfont-net:before {
    content: "\e800"
}

.iconfont-Java:before,
.iconfont-net:before {
    color: #bcc1cc;
    font-size: 22px;
    left: 8px;
    position: absolute;
    top: 8px
}

.iconfont-Java:before {
    content: "\e801"
}

.iconfont-bofang:before {
    content: "\e805";
    font-size: 27px
}

.iconfont-code1:before {
    content: "\e804";
    font-size: 78px
}

.iconfont-code2:before {
    content: "\e7fe";
    font-size: 78px
}

.iconfont-code3:before {
    content: "\e7ff";
    font-size: 78px
}

.iconfont-code4:before {
    content: "\e803";
    font-size: 78px
}

.invisible {
    visibility: hidden
}

.visible {
    visibility: visible
}

.opacity-0 {
    opacity: 0
}

.opacity-100 {
    opacity: 1
}

.transition-colors {
    transition: color .3s, background-color .3s
}

.transition-shadow {
    transition: box-shadow .3s
}

.transition-all {
    transition: all .3s
}

.animate-fade-in {
    animation: fadeIn .8s ease forwards
}

.animate-slide-up {
    animation: slideUp .8s ease forwards
}

.animate-slide-right {
    animation: slideRight .8s ease forwards
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(30px)
    }

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

@keyframes slideRight {
    0% {
        opacity: 0;
        transform: translateX(-30px)
    }

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

.scroll-animate {
    opacity: 0
}

.service-float {
    background-color: #3860ff;
    border-radius: 6px 0 0 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
    display: flex;
    flex-direction: column;
    height: 240px;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    z-index: 990
}

.service-float .service-item {
    align-items: center;
    border-bottom: 1px solid #efeff9;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    height: 80px;
    justify-content: center;
    padding-bottom: 8px;
    position: relative;
    text-decoration: none;
    transition: background-color .3s
}

.service-float .service-item .iconfont {
    font-size: 18px
}

.service-float .service-item:last-child {
    border-bottom: none
}

.service-float .service-item .service-item-expand {
    align-items: center;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(41, 61, 192, .2);
    display: flex;
    flex-direction: column;
    height: 242px;
    justify-content: center;
    position: absolute;
    right: 90px;
    text-align: center;
    top: 0;
    visibility: hidden;
    width: 212px;
    z-index: 999
}

.service-float .service-item .service-item-expand .img {
    height: 150px;
    margin-bottom: 10px;
    width: 150px
}

.service-float .service-item .service-item-expand .desc {
    color: #333;
    font-size: 14px
}

.service-float .service-item .service-item-expand.service-item-phone {
    color: #333;
    display: inline-block;
    padding: 20px;
    text-align: left;
    top: -80px
}

.service-float .service-item .service-item-expand.service-item-phone .title {
    border-bottom: 1px solid #e1e1e5;
    color: #3a3434;
    font-size: 16px;
    margin-bottom: 26px;
    padding-bottom: 12px
}

.service-float .service-item .service-item-expand.service-item-phone .info {
    display: flex;
    justify-content: space-between
}

.service-float .service-item .service-item-expand.service-item-phone .info p {
    padding: 10px 0 0 10px
}

.service-float .service-item .service-item-expand.service-item-phone .phone {
    color: #3a3434;
    font-size: 22px;
    padding-top: 20px;
    text-align: center
}

.service-float .service-item .service-item-expand.service-item-wxwork {
    top: -160px
}

.service-float .service-item:hover {
    background-color: hsla(0, 0%, 100%, .1)
}

.service-float .service-item:hover .service-item-online,
.service-float .service-item:hover .service-item-phone,
.service-float .service-item:hover .service-item-wxwork {
    visibility: visible
}

.back-to-top {
    align-items: center;
    background-color: #3860ff;
    border-radius: 6px 0 0 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
    color: #fff;
    cursor: pointer;
    display: flex;
    height: 80px;
    justify-content: center;
    position: fixed;
    right: 0;
    top: calc(50% + 162px);
    transform: translateY(-50%);
    transition: all .3s;
    visibility: hidden;
    width: 80px;
    z-index: 991
}

.back-to-top:hover {
    background-color: rgba(56, 96, 255, .9)
}

.back-to-top.visible {
    visibility: visible
}

.banner-inner,
.core-function-inner,
.footer-banner-inner,
.footer-inner,
.page-inner,
.partner-inner,
.platform-solution-inner,
.product-feature-inner,
.radiation-inner,
.scene-template-inner,
.section-inner,
.value-inner {
    margin: 0 auto;
    width: 1200px
}

.section-title {
    color: #171d26;
    font-family: M Ying Hei PRC !important;
    font-size: 42px;
    font-weight: 400;
    margin-bottom: 15px;
    text-align: center
}

.section-desc {
    color: #64748b;
    font-size: 16px;
    margin-bottom: 40px;
    text-align: center
}

.core-competencies-section {
    margin-bottom: 30px;
    padding: 60px 0
}

.core-competencies-section .core-competencies-container {
    align-content: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 42px
}

.core-competencies-section .core-competencies-container .core-competencies-item {
    background: url(/static/default/pc/2026/images/common/core-competencies-bg.webp) 0 no-repeat;
    border-radius: 20px;
    height: 260px;
    padding: 64px 28px 0;
    text-align: center;
    width: 224px
}

.core-competencies-section .core-competencies-container .core-competencies-item:hover {
    box-shadow: 10px 10px 20px rgba(174, 188, 206, .5);
    transform: translateY(-2px);
    transition: all .3s ease-in-out
}

.core-competencies-section .core-competencies-container .core-competencies-item .item-icon {
    display: inline-block
}

.core-competencies-section .core-competencies-container .core-competencies-item .item-title {
    color: #171d26;
    font-family: M Ying Hei PRC !important;
    font-size: 20px;
    font-weight: 500;
    padding-top: 16px
}

.core-competencies-section .core-competencies-container .core-competencies-item .item-desc {
    color: #666;
    font-size: 14px;
    line-height: 20px;
    padding-top: 10px
}

.prod-item-section {
    padding: 60px 0
}

.prod-item-section.item-bg {
    background-color: #f5fbff
}

.prod-item-section .prod-item-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 30px
}

.prod-item-section .prod-item-container img {
    height: 490px;
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity .8s ease, transform .8s ease;
    width: 756px
}

.prod-item-section .prod-item-container .prod-item-info {
    opacity: 0;
    padding: 0 40px;
    transform: translateY(30px);
    transition: opacity .8s ease .2s, transform .8s ease .2s
}

.prod-item-section .prod-item-container .prod-item-info .prod-item-title {
    color: #171d26;
    font-family: M Ying Hei PRC !important;
    font-size: 36px;
    font-weight: 500
}

.prod-item-section .prod-item-container .prod-item-info .prod-item-desc {
    color: #666;
    font-size: 16px;
    padding: 20px 0 50px
}

.prod-item-section .prod-item-container:hover {
    transition: all .3s ease-in-out
}

.prod-item-section .prod-item-container.show-animate img {
    opacity: 1;
    transform: translateX(0)
}

.prod-item-section .prod-item-container.show-animate .prod-item-info {
    opacity: 1;
    transform: translateY(0)
}

.prod-item-section .prod-item-container:nth-child(2) img {
    transform: translateX(40px)
}

.prod-item-section .prod-item-container:nth-child(2) img.show-animate {
    transform: translateX(0)
}

.action-buttons .btn {
    background-blend-mode: overlay;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    height: 46px;
    line-height: 44px;
    margin-right: 12px;
    width: 150px
}

.action-buttons .btn.try-btn {
    background: linear-gradient(341deg, #aac7ff, #3860f9), url(/static/default/pc/2026/images/common/trial-btn.png) 106px no-repeat;
    padding-left: 25px
}

.action-buttons .btn.try-btn:hover {
    box-shadow: 0 8px 24px rgba(37, 99, 235, .35);
    opacity: .9;
    transform: translateY(-1px);
    transition: all .2s
}

.action-buttons .btn.view-btn {
    background: url(/static/default/pc/2026/images/common/video-btn.png) 25px no-repeat;
    border: 1px solid #3860f9;
    color: #3860f9;
    padding-left: 52px
}

.action-buttons .btn.view-btn:hover {
    opacity: .8;
    transition: all .8s
}

.scroll-lock {
    margin-right: 17px !important;
    overflow: hidden
}

.page-title {
    color: #171d26;
    font-family: M Ying Hei PRC !important;
    font-size: 50px;
    font-weight: 500
}

.page_wrap {
    align-items: center;
    box-sizing: border-box;
    justify-content: center;
    margin: 50px auto;
    padding: 0 20px;
    width: 1200px
}

.page_wrap,
.page_wrap .pagination {
    display: flex
}

.page_wrap .pagination li {
    display: inline
}

.page_wrap .pagination li a {
    background-color: #f5f5f5;
    border-radius: 4px;
    color: #3b3b3b;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    margin-left: 12px;
    padding: 0 12px;
    text-align: center
}

.page_wrap .pagination li a:hover {
    background-color: #e4e4e6;
    color: #171d26
}

.page_wrap .pagination li:first-child a,
.page_wrap .pagination li:first-child a:hover {
    background: none
}

.page_wrap .pagination .active a,
.page_wrap .pagination .active a:hover {
    background: #3860f9;
    color: #fff
}

@font-face {
    font-family: swiper-icons;
    font-style: normal;
    font-weight: 400;
    src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA")
}

:root {
    --swiper-theme-color: #007aff
}

:host {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1
}

.swiper {
    display: block;
    list-style: none;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    z-index: 1
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    box-sizing: content-box;
    display: flex;
    height: 100%;
    position: relative;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    width: 100%;
    z-index: 1
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
    transform: translateZ(0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    display: block;
    flex-shrink: 0;
    height: 100%;
    position: relative;
    transition-property: transform;
    width: 100%
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    backface-visibility: hidden;
    transform: translateZ(0)
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 1200px
}

.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide {
    transform-style: preserve-3d
}

.swiper-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper {
    scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: none
}

.swiper-css-mode.swiper-centered>.swiper-wrapper:before {
    content: "";
    flex-shrink: 0;
    order: 9999
}

.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before {
    height: var(--swiper-centered-offset-after);
    min-width: 1px;
    width: 100%
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(270deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-lazy-preloader {
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top: 4px solid transparent;
    box-sizing: border-box;
    height: 42px;
    left: 50%;
    margin-left: -21px;
    margin-top: -21px;
    position: absolute;
    top: 50%;
    transform-origin: 50%;
    width: 42px;
    z-index: 10
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s linear infinite
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.swiper-virtual .swiper-slide {
    -webkit-backface-visibility: hidden;
    transform: translateZ(0)
}

.swiper-virtual.swiper-css-mode .swiper-wrapper:after {
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper:after {
    height: 1px;
    width: var(--swiper-virtual-size)
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper:after {
    height: var(--swiper-virtual-size);
    width: 1px
}

:root {
    --swiper-navigation-size: 44px
}

.swiper-button-next,
.swiper-button-prev {
    align-items: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));
    cursor: pointer;
    display: flex;
    height: var(--swiper-navigation-size);
    justify-content: center;
    margin-top: calc(0px - var(--swiper-navigation-size)/2);
    position: absolute;
    top: var(--swiper-navigation-top-offset, 50%);
    width: calc(var(--swiper-navigation-size)/44*27);
    z-index: 10
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    cursor: auto;
    opacity: .35;
    pointer-events: none
}

.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden {
    cursor: auto;
    opacity: 0;
    pointer-events: none
}

.swiper-navigation-disabled .swiper-button-next,
.swiper-navigation-disabled .swiper-button-prev {
    display: none !important
}

.swiper-button-next svg,
.swiper-button-prev svg {
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    transform-origin: center;
    width: 100%
}

.swiper-rtl .swiper-button-next svg,
.swiper-rtl .swiper-button-prev svg {
    transform: rotate(180deg)
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 10px);
    right: auto
}

.swiper-button-lock {
    display: none
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    font-variant: normal;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none !important
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    content: "prev"
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    left: auto;
    right: var(--swiper-navigation-sides-offset, 10px)
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    content: "next"
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    transform: translateZ(0);
    transition: opacity .3s;
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-pagination-disabled>.swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
    display: none !important
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, 8px);
    left: 0;
    top: var(--swiper-pagination-top, auto);
    width: 100%
}

.swiper-pagination-bullets-dynamic {
    font-size: 0;
    overflow: hidden
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    position: relative;
    transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    transform: scale(.33)
}

.swiper-pagination-bullet {
    background: var(--swiper-pagination-bullet-inactive-color, #000);
    border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
    display: inline-block;
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px))
}

button.swiper-pagination-bullet {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet:only-child {
    display: none !important
}

.swiper-pagination-bullet-active {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    opacity: var(--swiper-pagination-bullet-opacity, 1)
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical>.swiper-pagination-bullets {
    left: var(--swiper-pagination-left, auto);
    right: var(--swiper-pagination-right, 8px);
    top: 50%;
    transform: translate3d(0, -50%, 0)
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    display: block;
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    transition: transform .2s, top .2s
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: transform .2s, left .2s
}

.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: transform .2s, right .2s
}

.swiper-pagination-fraction {
    color: var(--swiper-pagination-fraction-color, inherit)
}

.swiper-pagination-progressbar {
    background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));
    position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: scale(0);
    transform-origin: left top;
    width: 100%
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    transform-origin: right top
}

.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0;
    width: 100%
}

.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-vertical>.swiper-pagination-progressbar {
    height: 100%;
    left: 0;
    top: 0;
    width: var(--swiper-pagination-progressbar-size, 4px)
}

.swiper-pagination-lock {
    display: none
}

.swiper-scrollbar {
    background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, .1));
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    position: relative;
    touch-action: none
}

.swiper-scrollbar-disabled>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
    display: none !important
}

.swiper-horizontal>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
    bottom: var(--swiper-scrollbar-bottom, 4px);
    height: var(--swiper-scrollbar-size, 4px);
    left: var(--swiper-scrollbar-sides-offset, 1%);
    position: absolute;
    top: var(--swiper-scrollbar-top, auto);
    width: calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);
    z-index: 50
}

.swiper-scrollbar.swiper-scrollbar-vertical,
.swiper-vertical>.swiper-scrollbar {
    height: calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);
    left: var(--swiper-scrollbar-left, auto);
    position: absolute;
    right: var(--swiper-scrollbar-right, 4px);
    top: var(--swiper-scrollbar-sides-offset, 1%);
    width: var(--swiper-scrollbar-size, 4px);
    z-index: 50
}

.swiper-scrollbar-drag {
    background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, .5));
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    height: 100%;
    left: 0;
    position: relative;
    top: 0;
    width: 100%
}

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-scrollbar-lock {
    display: none
}

.swiper-zoom-container {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    text-align: center;
    width: 100%
}

.swiper-zoom-container>canvas,
.swiper-zoom-container>img,
.swiper-zoom-container>svg {
    max-height: 100%;
    max-width: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.swiper-slide-zoomed {
    cursor: move;
    touch-action: none
}

.swiper .swiper-notification {
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    z-index: -1000
}

.swiper-free-mode>.swiper-wrapper {
    margin: 0 auto;
    transition-timing-function: ease-out
}

.swiper-grid>.swiper-wrapper {
    flex-wrap: wrap
}

.swiper-grid-column>.swiper-wrapper {
    flex-direction: column;
    flex-wrap: wrap
}

.swiper-fade.swiper-free-mode .swiper-slide {
    transition-timing-function: ease-out
}

.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity
}

.swiper-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper.swiper-cube {
    overflow: visible
}

.swiper-cube .swiper-slide {
    backface-visibility: hidden;
    height: 100%;
    pointer-events: none;
    transform-origin: 0 0;
    visibility: hidden;
    width: 100%;
    z-index: 1
}

.swiper-cube .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-cube.swiper-rtl .swiper-slide {
    transform-origin: 100% 0
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-cube-shadow {
    bottom: 0;
    height: 100%;
    left: 0;
    opacity: .6;
    position: absolute;
    width: 100%;
    z-index: 0
}

.swiper-cube .swiper-cube-shadow:before {
    background: #000;
    bottom: 0;
    content: "";
    filter: blur(50px);
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.swiper-cube .swiper-slide-next+.swiper-slide {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
    backface-visibility: hidden;
    z-index: 0
}

.swiper.swiper-flip {
    overflow: visible
}

.swiper-flip .swiper-slide {
    backface-visibility: hidden;
    pointer-events: none;
    z-index: 1
}

.swiper-flip .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
    backface-visibility: hidden;
    z-index: 0
}

.swiper-creative .swiper-slide {
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform, opacity, height
}

.swiper.swiper-cards {
    overflow: visible
}

.swiper-cards .swiper-slide {
    backface-visibility: hidden;
    overflow: hidden;
    transform-origin: center bottom
}

.header {
    background: hsla(0, 0%, 100%, 0);
    height: 62px;
    padding: 0 60px;
    position: fixed;
    top: 0;
    transition: all .3s;
    width: 100%;
    z-index: 1000
}

.header.scrolled,
.header:hover {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: hsla(0, 0%, 100%, .7);
    box-shadow: 0 8px 24px rgba(37, 99, 235, .35);
    transition: background-color .3s, box-shadow .3s, padding .3s
}

.header .header-inner {
    align-items: center;
    display: flex;
    height: 62px;
    justify-content: space-between;
    min-width: 1380px
}

.header .header-inner .header-logo {
    align-items: center;
    display: flex;
    justify-content: center
}

.header .header-inner .header-logo .yinmai-logo {
    border-right: 1px solid #c9c9c9;
    padding-right: 12px;
    width: 94px
}

.header .header-inner .header-logo .yinmai-logo img {
    width: 94px
}

.header .header-inner .header-logo .jnpf-logo {
    margin-left: 12px;
    width: 128px
}

.header .header-inner .header-logo .jnpf-logo img {
    width: 128px
}

.header .header-inner .header-nav {
    align-items: center;
    display: flex;
    gap: 4px;
    padding-left: 20px
}

.header .header-inner .header-nav a {
    border-radius: 6px;
    color: #303233;
    display: block;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 14px;
    text-align: center;
    transition: all .2s
}

.header .header-inner .header-nav a:active,
.header .header-inner .header-nav a:hover {
    background: rgba(37, 99, 235, .06);
    color: #2563eb
}

.header .header-inner .header-nav .header-nav-prod {
    display: inline-block;
    position: relative
}

.header .header-inner .header-nav .header-nav-prod>a {
    border-radius: 6px;
    color: #303233;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 14px;
    text-align: center;
    transition: all .2s
}

.header .header-inner .header-nav .header-nav-prod>a.prod-active,
.header .header-inner .header-nav .header-nav-prod>a:active,
.header .header-inner .header-nav .header-nav-prod>a:hover {
    background: rgba(37, 99, 235, .06);
    color: #2563eb
}

.header .header-inner .header-nav .header-nav-prod .header-nav-prod-menu {
    background-color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
    left: 0;
    opacity: 0;
    padding: 28px 0 32px;
    position: fixed;
    top: 62px;
    transform: translateY(-8px);
    transition: all .25s ease;
    visibility: hidden;
    width: 100%;
    z-index: 1000
}

.header .header-inner .header-nav .header-nav-prod .header-nav-prod-menu .header-nav-prod-menu-inner {
    display: grid;
    gap: 16px 34px;
    grid-template-columns: 1fr 2fr 2fr 1fr;
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 48px
}

.header .header-inner .header-nav .header-nav-prod .header-nav-prod-menu .header-nav-prod-menu-inner a {
    align-items: center;
    border-radius: 8px;
    color: #303233;
    display: flex;
    font-size: 15px;
    gap: 12px;
    padding: 10px 16px;
    transition: all .15s
}

.header .header-inner .header-nav .header-nav-prod .header-nav-prod-menu .header-nav-prod-menu-inner a:hover {
    background: rgba(37, 99, 235, .04);
    color: #3860f9
}

.header .header-inner .header-nav .header-nav-prod .header-nav-prod-menu .header-nav-prod-menu-inner a img {
    height: 32px;
    -o-object-fit: contain;
    object-fit: contain;
    width: 32px
}

.header .header-inner .header-nav .header-nav-prod .header-nav-prod-menu .header-nav-prod-menu-inner .header-nav-prod-col {
    display: flex;
    flex-direction: column
}

.header .header-inner .header-nav .header-nav-prod .header-nav-prod-menu .header-nav-prod-menu-inner .header-nav-prod-col .header-nav-prod-col-title {
    align-items: center;
    border-bottom: 1px solid #eee;
    color: #171d26;
    display: flex;
    font-family: M Ying Hei PRC !important;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
    padding: 12px 0 10px
}

.header .header-inner .header-nav .header-nav-prod .header-nav-prod-menu .header-nav-prod-menu-inner .header-nav-prod-col .header-nav-prod-col-title svg {
    margin-right: 6px;
    vertical-align: text-bottom
}

.header .header-inner .header-nav .header-nav-prod .header-nav-prod-menu .header-nav-prod-menu-inner .header-nav-prod-col .header-nav-prod-row {
    align-items: flex-start;
    display: flex;
    gap: 20px;
    justify-content: space-between
}

.header .header-inner .header-nav .header-nav-prod .header-nav-prod-menu .header-nav-prod-menu-inner .header-nav-prod-col .header-nav-prod-row .header-nav-prod-sub {
    width: 50%
}

.header .header-inner .header-nav .header-nav-prod:hover .header-nav-prod-menu {
    opacity: 1;
    transform: translateY(0);
    visibility: visible
}

.header .header-inner .header-nav .header-nav-help {
    display: inline-block;
    position: relative
}

.header .header-inner .header-nav .header-nav-help>a {
    border-radius: 6px;
    color: #303233;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 14px;
    text-align: center;
    transition: all .2s
}

.header .header-inner .header-nav .header-nav-help>a.help-active,
.header .header-inner .header-nav .header-nav-help>a:active,
.header .header-inner .header-nav .header-nav-help>a:hover {
    background: rgba(37, 99, 235, .06);
    color: #2563eb
}

.header .header-inner .header-nav .header-nav-help .header-nav-help-menu {
    background-color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
    left: 0;
    opacity: 0;
    padding: 28px 0 32px;
    position: fixed;
    top: 62px;
    transform: translateY(-8px);
    transition: all .25s ease;
    visibility: hidden;
    width: 100%;
    z-index: 1000
}

.header .header-inner .header-nav .header-nav-help .header-nav-help-menu .header-nav-help-menu-inner {
    display: grid;
    gap: 16px 34px;
    grid-template-columns: repeat(5, 1fr);
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 48px
}

.header .header-inner .header-nav .header-nav-help .header-nav-help-menu .header-nav-help-menu-inner a {
    align-items: center;
    border-radius: 8px;
    color: #303233;
    display: flex;
    font-size: 15px;
    gap: 12px;
    padding: 10px 16px;
    transition: all .15s
}

.header .header-inner .header-nav .header-nav-help .header-nav-help-menu .header-nav-help-menu-inner a:hover {
    background: rgba(37, 99, 235, .04);
    color: #3860f9
}

.header .header-inner .header-nav .header-nav-help .header-nav-help-menu .header-nav-help-menu-inner a img {
    height: 32px;
    -o-object-fit: contain;
    object-fit: contain;
    width: 32px
}

.header .header-inner .header-nav .header-nav-help:hover .header-nav-help-menu,
.header .header-inner .header-nav .header-nav-help:hover .header-nav-prod-menu {
    opacity: 1;
    transform: translateY(0);
    visibility: visible
}

.header .header-inner .header-right {
    margin-left: auto;
    margin-right: 60px
}

.header .header-inner .header-right .header-phone {
    align-items: center;
    color: #3860f9;
    display: inline-flex;
    font-family: M Ying Hei PRC !important;
    font-size: 16px;
    font-weight: 500;
    gap: 8px;
    vertical-align: middle
}

.header .header-inner .header-right a {
    border-radius: 16px;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    height: 32px;
    line-height: 32px;
    margin-left: 10px;
    text-align: center;
    width: 100px
}

.header .header-inner .header-right a:hover {
    box-shadow: 0 8px 24px rgba(37, 99, 235, .35);
    transform: translateY(-1px);
    transition: all .2s
}

.header .header-inner .header-right a.java {
    background: linear-gradient(132deg, #1133c1, #4d7af5);
    color: #fff
}

.header .header-inner .header-right a.dotnet {
    background: linear-gradient(129deg, #331de0, #825ff7);
    color: #fff
}

.footer {
    background: linear-gradient(0deg, #253560, #050e2c);
    color: #fff;
    font-size: 16px;
    padding: 0 25px;
    width: 100%
}

.footer .footer-nav {
    display: grid;
    gap: 50px;
    grid-template-columns: repeat(5, 1fr);
    padding: 30px 0
}

.footer .footer-nav dl dt {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 78px
}

.footer .footer-nav dl dd {
    font-size: 16px;
    line-height: 40px;
    margin-bottom: 10px
}

.footer .footer-nav dl dd a {
    color: #dadfe6;
    text-decoration: none;
    transition: all .3s ease
}

.footer .footer-nav dl dd a:hover {
    color: #fff
}

.footer .footer-nav .social {
    width: 160px
}

.footer .footer-nav .social h3 {
    font-size: 18px;
    font-weight: 500;
    line-height: 78px
}

.footer .footer-nav .social .links .follow-qrcode {
    height: 160px;
    width: 160px
}

.footer .footer-nav .social .links .link {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-top: 8px
}

.footer .footer-nav .social .links .link a {
    display: grid;
    line-height: 30px;
    place-items: center;
    transition: all .3s ease
}

.footer .footer-nav .social .links .link img {
    height: 30px;
    width: 30px
}

.footer .copyright {
    align-items: center;
    border-top: 1px solid #5a6371;
    display: flex;
    justify-content: space-between;
    padding: 30px 0
}

.footer .copyright .links a {
    color: hsla(0, 0%, 100%, .8);
    line-height: 20px;
    margin-left: 20px;
    text-decoration: none
}

.footer .copyright .links a:hover {
    color: #fff
}

.footer .copyright .links a.info {
    background: url(/static/default/pc/2026/images/common/icp.png) 0 no-repeat;
    background-size: 20px 20px;
    padding-left: 30px
}

@keyframes scrollLeft {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(-33.33%)
    }
}

.banner {
    box-sizing: border-box;
    width: 100%
}

.banner .banner-container {
    background: url(/static/default/pc/2026/images/page-banner/index-banner.webp) 50%/cover no-repeat;
    height: 100vh;
    padding: 0;
    width: 100%
}

.banner .banner-container .banner-inner {
    align-items: center;
    display: flex;
    gap: 40px;
    height: 100%;
    margin: 0 auto;
    padding-left: 80px;
    width: 1400px
}

.banner .banner-container .banner-inner .shrink {
    flex-shrink: 0
}

.banner .banner-container .banner-inner .video-box {
    flex: 1;
    min-width: 0
}

.banner .banner-container .banner-inner .video-box .ai-interact-video-wrap {
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(56, 96, 249, .2);
    cursor: pointer;
    height: 362px;
    position: relative
}

.banner .banner-container .banner-inner .video-box .ai-interact-video-wrap:hover .ai-interact-play-btn {
    transform: translate(-50%, -50%) scale(1.1) ；
}

.banner .banner-container .banner-inner .video-box .ai-interact-video-wrap video {
    border-radius: 16px;
    display: block;
    height: auto;
    width: 100%
}

.banner .banner-container .banner-inner .video-box .ai-interact-video-wrap .ai-interact-poster {
    border-radius: 16px;
    inset: 0;
    overflow: hidden;
    position: absolute;
    transition: opacity .4s;
    z-index: 2
}

.banner .banner-container .banner-inner .video-box .ai-interact-video-wrap .ai-interact-poster:after {
    content: "";
    inset: 0;
    position: absolute
}

.banner .banner-container .banner-inner .video-box .ai-interact-video-wrap .ai-interact-poster.hidden {
    opacity: 0;
    pointer-events: none
}

.banner .banner-container .banner-inner .video-box .ai-interact-video-wrap .ai-interact-poster img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.banner .banner-container .banner-inner .video-box .ai-interact-video-wrap .ai-interact-play-btn {
    align-items: center;
    background: hsla(0, 0%, 100%, .95);
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
    display: flex;
    height: 72px;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(1.1);
    transition: transform .3s;
    width: 72px;
    z-index: 3
}

.banner .banner-container .banner-inner .video-box .ai-interact-video-wrap .ai-interact-play-btn.hidden {
    display: none
}

.banner .banner-container .banner-inner .video-box .ai-interact-video-wrap .ai-interact-play-btn:after {
    border-color: transparent transparent transparent #3860f9;
    border-style: solid;
    border-width: 16px 0 16px 28px;
    content: "";
    display: block;
    height: 0;
    margin-left: 4px;
    width: 0
}

.banner .banner-container .title {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
}

.banner .banner-container .title h1 {
    align-items: center;
    color: #3860f9;
    display: inline-flex;
    font-family: M Ying Hei PRC !important;
    font-size: 60px;
    font-weight: 600
}

.banner .banner-container .title span {
    color: #171d26;
    font-size: 50px;
    font-weight: 400;
    margin: 0 .2em
}

.banner .banner-container .title p {
    font-family: M Ying Hei PRC !important;
    font-size: 50px;
    font-weight: 600;
    letter-spacing: 3px
}

.banner .banner-container .desc {
    color: #666;
    line-height: 28px;
    padding-top: 34px;
    width: 566px
}

.banner .banner-container .try-btn {
    background: linear-gradient(220deg, #9938f9, #0328f4 27%, #3e17e0 65%, #29c5ff), url(/static/default/pc/2026/images/index/trial-btn.png) 125px no-repeat;
    background-blend-mode: overlay;
    border-radius: 80px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    color: #fff;
    display: inline-block;
    font-size: 18px;
    height: 48px;
    line-height: 48px;
    margin-top: 82px;
    padding-left: 46px;
    width: 196px
}

.banner .banner-container .try-btn:hover {
    box-shadow: 0 8px 24px rgba(37, 99, 235, .35);
    transform: translateY(-1px);
    transition: all .2s
}

.ai-secure-section {
    align-items: center;
    background: linear-gradient(180deg, #e6edf5, #f7f9fa);
    display: flex;
    height: 100vh;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 100%
}

.ai-secure-section .ai-secure-container {
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%
}

.ai-secure-section .ai-secure-container .ai-secure-box {
    box-sizing: border-box;
    height: 100%;
    position: relative;
    width: 100%
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-slides {
    height: 400%;
    inset: 0;
    position: absolute;
    transition: transform 1.3s ease;
    z-index: 0
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-slide {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto 100%;
    height: 25%;
    inset: 0;
    opacity: 0;
    opacity: 1;
    position: absolute;
    position: relative;
    transition: opacity 1.3s ease;
    transition: none
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-slide.active {
    opacity: 1
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-slide.slide-bg-img0 {
    background-image: url(/static/default/pc/2026/images/index/ai-card/back-0.webp)
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-slide.slide-bg-img1 {
    background-image: url(/static/default/pc/2026/images/index/ai-card/back-1.webp)
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-slide.slide-bg-img2 {
    background-image: url(/static/default/pc/2026/images/index/ai-card/back-2.webp)
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-slide.slide-bg-img3 {
    background-image: url(/static/default/pc/2026/images/index/ai-card/back-3.webp)
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-overlay {
    background: radial-gradient(ellipse at 80% 50%, transparent 0, rgba(230, 237, 245, .6) 100%);
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-dotbox {
    left: calc(50% - 600px);
    pointer-events: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-60%);
    width: 1200px;
    z-index: 2
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-dotbox .ai-secure-dot h2 {
    color: #1b2532;
    font-family: M Ying Hei PRC !important;
    font-size: 36px;
    line-height: 1.2;
    margin: 0 0 24px
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-dotbox .ai-secure-collapse {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-dotbox .ai-secure-collapse.is-switching li {
    pointer-events: none
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-dotbox .ai-secure-collapse li {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: hsla(0, 0%, 100%, .65);
    border: 1px solid hsla(0, 0%, 100%, .8);
    border-radius: 16px;
    box-sizing: border-box;
    cursor: pointer;
    height: 64px;
    overflow: hidden;
    padding: 16px 32px;
    position: relative;
    transition: height .55s cubic-bezier(.4, 0, .2, 1), padding .55s cubic-bezier(.4, 0, .2, 1), background .55s ease, border-color .55s ease, transform .55s cubic-bezier(.4, 0, .2, 1);
    width: 520px;
    will-change: height, transform
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-dotbox .ai-secure-collapse li h3 {
    color: #1d2531;
    font-size: 18px;
    font-weight: 600;
    line-height: 30px;
    margin: 0
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-dotbox .ai-secure-collapse li .asc-content {
    opacity: 0;
    pointer-events: none;
    transition: opacity .8s ease
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-dotbox .ai-secure-collapse li .asc-content p {
    color: #657083;
    font-size: 15px;
    height: 48px;
    line-height: 24px;
    margin: 16px 0;
    overflow: hidden
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-dotbox .ai-secure-collapse li .asc-content img {
    display: none
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-dotbox .ai-secure-collapse li .asc-label {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 24px;
    position: relative;
    z-index: 1
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-dotbox .ai-secure-collapse li .asc-label span {
    align-items: center;
    background: hsla(0, 0%, 100%, .45);
    border: 1px solid hsla(0, 0%, 100%, .85);
    border-radius: 14px;
    color: #3860f9;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 400;
    height: 28px;
    justify-content: center;
    padding: 0 11px;
    transition: all .3s ease
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-dotbox .ai-secure-collapse li .asc-label span:hover {
    background-color: #fff
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-dotbox .ai-secure-collapse li .asc-btn {
    background-color: #3860f9;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 15px;
    font-weight: 600;
    height: 40px;
    line-height: 40px;
    position: relative;
    text-align: center;
    transition: all .3s ease;
    z-index: 1
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-dotbox .ai-secure-collapse li .asc-btn:hover {
    background-color: #5f93fa
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-dotbox .ai-secure-collapse li.active {
    background: radial-gradient(261.79% 114.11% at 100% 60.3%, rgba(125, 138, 255, .1), transparent), radial-gradient(112.1% 100% at 58.44% 100%, rgba(125, 255, 224, .15), transparent), radial-gradient(362.76% 142.46% at 101.46% 0, #fff, #d8f1ff);
    background: linear-gradient(#fff, #bbceff);
    border-color: hsla(0, 0%, 100%, .9);
    color: #fff;
    height: 254px;
    padding: 32px
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-dotbox .ai-secure-collapse li.active:before {
    background: #2366fe;
    border-radius: 16px;
    content: "";
    inset: 1px;
    pointer-events: none;
    position: absolute;
    z-index: 0
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-dotbox .ai-secure-collapse li.active .asc-content p,
.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-dotbox .ai-secure-collapse li.active h3 {
    color: #fff;
    position: relative;
    z-index: 1
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-dotbox .ai-secure-collapse li.active .asc-content {
    opacity: 1;
    pointer-events: auto
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-dotbox .ai-secure-collapse li.active .asc-label {
    position: relative;
    z-index: 1
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-dotbox .ai-secure-collapse li.active .asc-label span {
    background: hsla(0, 0%, 100%, .2);
    border-color: hsla(0, 0%, 100%, .32);
    color: #fff
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-dotbox .ai-secure-collapse li.active .asc-label span:hover {
    background: hsla(0, 0%, 100%, .28)
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-dotbox .ai-secure-collapse li.active .asc-btn {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 4px 16px 1px rgba(56, 115, 250, .35);
    color: #3873fa
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-dotbox .ai-secure-collapse li.active .asc-btn:hover {
    background: #fff;
    box-shadow: 0 8px 18px 1px rgba(56, 115, 250, .3);
    transform: translateY(-1px)
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: hsla(0, 0%, 100%, .651);
    border-radius: 16px;
    bottom: 60px;
    box-sizing: border-box;
    height: 82px;
    left: 0;
    margin: 0 auto;
    overflow: hidden;
    position: absolute;
    right: 0;
    transition: all .3s ease-in-out;
    width: 1200px;
    z-index: 2
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer:hover {
    height: 104px
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer:hover .asf-icon,
.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer:hover .asf-msg span {
    display: none
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer:hover .asf-msg p {
    color: #657083;
    display: block
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer ul {
    display: flex;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer li {
    background-position: 100%;
    background-position-y: 15px;
    background-repeat: no-repeat;
    background-size: auto 100%;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 16px 24px;
    position: relative;
    transition: all .3s ease-in-out;
    width: 25%
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer li:not(:last-child) {
    border-right: 1px solid rgba(0, 0, 0, .04)
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer li:hover {
    background-color: #356dee
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer li:hover:first-child {
    background-image: url(/static/default/pc/2026/images/index/ai-card/hover-0.webp)
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer li:hover:nth-child(2) {
    background-image: url(/static/default/pc/2026/images/index/ai-card/hover-1.webp)
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer li:hover:nth-child(3) {
    background-image: url(/static/default/pc/2026/images/index/ai-card/hover-2.webp)
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer li:hover:nth-child(4) {
    background-image: url(/static/default/pc/2026/images/index/ai-card/hover-3.webp)
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer li:hover .asf-title span {
    color: #fff
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer li:hover .asf-title .asf-logo {
    display: none
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer li:hover .asf-title .asf-logo-hover {
    display: block
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer li:hover .asf-title .asf-icon {
    display: none
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer li:hover .asf-title .asf-icon-hover {
    display: block
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer li:hover .asf-msg span {
    display: none
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer li:hover .asf-msg p {
    color: hsla(0, 0%, 100%, .85);
    display: block
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer li .asf-title {
    align-items: center;
    display: flex;
    gap: 12px;
    position: relative;
    z-index: 1
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer li .asf-title img {
    height: 24px;
    -o-object-fit: contain;
    object-fit: contain;
    width: 24px
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer li .asf-title .asf-logo-hover {
    display: none
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer li .asf-title span {
    color: #1b2532;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer li .asf-title .asf-icon {
    height: 18px;
    margin-left: auto;
    transition: all .3s ease;
    width: 18px
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer li .asf-title .asf-icon-hover {
    display: none;
    height: 18px;
    margin-left: auto;
    width: 18px
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer li .asf-msg {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    z-index: 1
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer li .asf-msg span {
    align-items: center;
    background: rgba(0, 0, 0, .04);
    border-radius: 11px;
    color: #657083;
    display: flex;
    font-size: 12px;
    font-weight: 400;
    justify-content: center;
    margin-left: 36px;
    padding: 1px 8px;
    transition: all .3s ease;
    width: -moz-fit-content;
    width: fit-content
}

.ai-secure-section .ai-secure-container .ai-secure-box .ai-secure-footer li .asf-msg p {
    color: #657083;
    display: none;
    font-size: 13px;
    line-height: 22px;
    margin: 0;
    padding-left: 36px
}

.ai-foundation-section {
    background-color: #f5fbff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 0
}

.ai-foundation-section .foundation-row {
    align-items: stretch;
    display: flex;
    gap: 40px;
    margin: 0 auto;
    max-width: 1500px;
    min-height: 620px;
    padding: 0 20px
}

.ai-foundation-section .foundation-row .foundation-left {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 14px;
    width: 300px
}

.ai-foundation-section .foundation-row .foundation-img {
    align-items: center;
    display: flex;
    flex: 1;
    justify-content: center;
    overflow: hidden
}

.ai-foundation-section .foundation-row .foundation-img img {
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .08);
    height: 620px;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.ai-foundation-section .foundation-row .foundation-right {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 14px;
    width: 300px
}

.ai-foundation-section .foundation-row .foundation-card {
    background: #fff;
    border: 2px solid #f0f0f3;
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(185, 193, 211, .15);
    cursor: pointer;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 22px 24px 18px;
    position: relative;
    transition: all .35s ease;
    z-index: 1
}

.ai-foundation-section .foundation-row .foundation-card .card-title {
    color: #15151d;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 16px
}

.ai-foundation-section .foundation-row .foundation-card .card-desc {
    color: #727275;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 16px
}

.ai-foundation-section .foundation-row .foundation-card a {
    color: #3370ff;
    font-size: 16px;
    text-decoration: none
}

.ai-foundation-section .foundation-row .foundation-card:hover {
    border-color: #3370ff;
    box-shadow: 0 8px 24px rgba(185, 193, 211, .25);
    transform: translateY(-2px)
}

.ai-foundation-section .foundation-row .foundation-card.active {
    background: linear-gradient(135deg, #2563eb, #3370ff);
    border-color: #2563eb;
    box-shadow: 0 8px 30px rgba(37, 99, 235, .3)
}

.ai-foundation-section .foundation-row .foundation-card.active .card-desc,
.ai-foundation-section .foundation-row .foundation-card.active .card-title {
    color: #fff
}

.ai-foundation-section .foundation-row .foundation-card.active a {
    color: #fff !important
}

.data-governance-section {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 0;
    position: relative
}

.data-governance-section .page-inner {
    width: 1400px
}

.data-governance-section .data-governance-container {
    display: flex;
    gap: 16px
}

.data-governance-section .data-governance-container .data-governance-card {
    background: hsla(0, 0%, 100%, .5);
    border: 1px solid #fff;
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
    height: 620px;
    overflow: hidden;
    position: relative;
    transition: width .3s ease;
    width: calc(25% - 10.25rem)
}

.data-governance-section .data-governance-container .data-governance-card .card-normal {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.data-governance-section .data-governance-container .data-governance-card .card-normal .normal-img {
    border-radius: 50%;
    box-shadow: 0 .625rem 1.875rem rgba(0, 0, 0, .1);
    height: max(60px, 5.625rem);
    left: 0;
    margin: 0 auto;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 28%;
    width: max(60px, 5.625rem)
}

.data-governance-section .data-governance-container .data-governance-card .card-normal .normal-img img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.data-governance-section .data-governance-container .data-governance-card .card-normal .normal-title {
    color: #1f2329;
    font-size: 1.125rem;
    left: 1rem;
    overflow: hidden;
    position: absolute;
    right: 1rem;
    text-align: center;
    text-overflow: ellipsis;
    top: 24rem;
    white-space: nowrap
}

.data-governance-section .data-governance-container .data-governance-card .card-active {
    border-radius: 10px;
    box-shadow: 0 0 1.875rem rgba(16, 140, 238, .2);
    height: 100%;
    left: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    transition: opacity .3s, visibility .3s;
    visibility: hidden;
    width: 36rem
}

.data-governance-section .data-governance-container .data-governance-card .card-active .active-img {
    display: block;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.data-governance-section .data-governance-container .data-governance-card .card-active .active-overlay {
    background: rgba(0, 0, 0, .5);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.data-governance-section .data-governance-container .data-governance-card .card-active .active-info {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    left: 0;
    padding: 0 5.625rem;
    position: absolute;
    right: 0;
    top: 0
}

.data-governance-section .data-governance-container .data-governance-card .card-active .active-info .active-title {
    color: #fff;
    font-size: 2rem;
    font-weight: 700
}

.data-governance-section .data-governance-container .data-governance-card .card-active .active-info .active-desc {
    color: hsla(0, 0%, 100%, .8);
    font-size: 1.125rem;
    line-height: 1.5;
    margin-top: 10px
}

.data-governance-section .data-governance-container .data-governance-card .card-active .active-info .active-btn {
    margin-top: 1.5rem
}

.data-governance-section .data-governance-container .data-governance-card .card-active .active-info .active-btn a {
    background: url(/static/default/pc/2026/images/index/trial-btn.png) #3860f9 107px no-repeat;
    border-radius: 8px;
    color: #fff;
    display: inline-block;
    height: 46px;
    line-height: 46px;
    padding-left: 25px;
    width: 150px
}

.data-governance-section .data-governance-container .data-governance-card .card-active .active-info .active-btn a:hover {
    box-shadow: 0 8px 24px rgba(37, 99, 235, .35);
    transform: translateY(-1px);
    transition: all .2s
}

.low-code-section {
    background-color: #f5fbff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 0
}

.low-code-section .page-inner {
    width: 1440px
}

.low-code-section .low-code-container {
    display: flex;
    padding: 0 15px
}

.low-code-section .low-code-container .low-code-tab {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 10px;
    width: 33.333%
}

.low-code-section .low-code-container .low-code-tab .low-code-tab-item {
    background: transparent;
    border-radius: 6px;
    border-top: 1px solid rgba(0, 0, 0, .06);
    cursor: pointer;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 24px 30px;
    transition: .3s;
    width: 94%
}

.low-code-section .low-code-container .low-code-tab .low-code-tab-item.active {
    background: #fff
}

.low-code-section .low-code-container .low-code-tab .low-code-tab-item .title {
    color: #333;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    margin: 0 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.low-code-section .low-code-container .low-code-tab .low-code-tab-item .desc {
    color: #919191;
    display: -webkit-box;
    font-size: 14px;
    line-height: 20px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0;
    overflow: hidden
}

.low-code-section .low-code-container .low-code-tab .low-code-tab-item .try-btn {
    color: #3370ff;
    display: block;
    font-size: 14px;
    margin-top: 8px;
    text-decoration: none
}

.low-code-section .low-code-container .low-code-con {
    padding: 0 10px;
    width: 66.667%
}

.low-code-section .low-code-container .low-code-con .low-code-con-item {
    display: none
}

.low-code-section .low-code-container .low-code-con .low-code-con-item.active {
    display: block
}

.low-code-section .low-code-container .low-code-con .low-code-con-item.active img {
    animation: fadeInRight .6s ease-in both
}

.low-code-section .low-code-container .low-code-con .low-code-con-item img {
    border-radius: 22px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .08);
    display: block;
    float: right;
    height: 100%
}

.integration-section {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 0
}

.integration-section .page-inner {
    width: 1440px
}

.integration-section .integration-container {
    height: 620px;
    padding-top: 0
}

.integration-section .integration-container .integration-card-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5vw;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    transition: .5s
}

.integration-section .integration-container .integration-card-list:hover {
    gap: .8vw
}

.integration-section .integration-container .integration-card-list .integration-card {
    background: #fff;
    border: 3px solid transparent;
    border-radius: 20px;
    box-shadow: 10px 10px 20px rgba(174, 188, 206, .18);
    flex: 1;
    height: 500px;
    padding: 3% 1%;
    transition: .5s
}

.integration-section .integration-container .integration-card-list .integration-card:hover {
    border-color: #0189fe;
    flex: 1.1;
    height: 600px;
    padding: 5%
}

.integration-section .integration-container .integration-card-list .integration-card:hover .integration-icon {
    transform: scale(.8333) rotate(1turn)
}

.integration-section .integration-container .integration-card-list .integration-card:hover .integration-view {
    padding-top: 40px
}

.integration-section .integration-container .integration-card-list .integration-card:hover .integration-view span {
    background: linear-gradient(341deg, #8eb8ff, #1d4ed8);
    color: #fff;
    padding: 0 20px
}

.integration-section .integration-container .integration-card-list .integration-card:hover .integration-view span:after {
    filter: brightness(0) invert(1)
}

.integration-section .integration-container .integration-card-list .integration-card a {
    display: block;
    text-decoration: none
}

.integration-section .integration-container .integration-card-list .integration-card .integration-icon {
    background: #f5f9fe;
    border-radius: 50%;
    margin: auto;
    max-width: 130px;
    position: relative;
    transition: .5s
}

.integration-section .integration-container .integration-card-list .integration-card .integration-icon figure {
    margin: 0;
    overflow: hidden;
    padding-bottom: 100%;
    position: relative
}

.integration-section .integration-container .integration-card-list .integration-card .integration-icon figure img {
    bottom: 0;
    height: 46.16%;
    left: 0;
    margin: auto;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    right: 0;
    top: 0;
    width: 46.16%
}

.integration-section .integration-container .integration-card-list .integration-card .integration-desc h4 {
    color: #09090b;
    font-size: 20px;
    font-weight: 700;
    margin: 30px 0 5px
}

.integration-section .integration-container .integration-card-list .integration-card .integration-desc h5 {
    color: #666;
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 15px
}

.integration-section .integration-container .integration-card-list .integration-card .integration-desc p {
    color: #888;
    font-size: 14px;
    line-height: 1.5;
    margin: 0
}

.integration-section .integration-container .integration-card-list .integration-card .integration-view {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    transition: .5s
}

.integration-section .integration-container .integration-card-list .integration-card .integration-view span {
    align-items: center;
    border-radius: 30px;
    color: #006cff;
    display: inline-flex;
    font-size: 14px;
    font-style: normal;
    justify-content: center;
    line-height: 40px;
    padding: 6px 32px;
    transition: .5s
}

.integration-section .integration-container .integration-card-list .integration-card .integration-view span:after {
    background: url(/static/default/pc/2026/images/index/icon-arrow.svg) no-repeat 50%;
    content: "";
    display: inline-block;
    height: 13px;
    transition: .5s;
    width: 23px
}

@keyframes devops-rotate {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes devops-pulse {

    0%,
    to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }
}

@keyframes devops-flow-o {
    0% {
        stroke-dashoffset: 375
    }

    to {
        stroke-dashoffset: 1125
    }
}

@keyframes devops-flow-i {
    0% {
        stroke-dashoffset: 0
    }

    to {
        stroke-dashoffset: 590
    }
}

@keyframes devops-energy-pulse {

    0%,
    to {
        opacity: .78;
        transform: translateX(-50%) scaleX(1)
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scaleX(1.08)
    }
}

@keyframes devops-energy-column {

    0%,
    to {
        opacity: .48;
        transform: scaleY(.92)
    }

    50% {
        opacity: .9;
        transform: scaleY(1.04)
    }
}

@keyframes devops-energy-ray {
    0% {
        opacity: 0;
        transform: translateY(96px) scaleY(.35)
    }

    16% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translateY(-122px) scaleY(1)
    }
}

@keyframes devops-energy-spark {
    0% {
        opacity: 0;
        transform: translate3d(0, 74px, 0) scale(.45)
    }

    20% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(var(--spark-x), -116px, 0) scale(1)
    }
}

@keyframes devops-energy-scan {
    0% {
        opacity: 0;
        transform: translate(-50%, 76px) scale(.65)
    }

    18% {
        opacity: .95
    }

    to {
        opacity: 0;
        transform: translate(-50%, -116px) scale(1.2)
    }
}

@keyframes devops-ring-float {

    0%,
    to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}

@keyframes devops-card-float {

    0%,
    to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }
}

@keyframes devops-flow-a {
    0% {
        stroke-dashoffset: 0
    }

    to {
        stroke-dashoffset: 1000
    }
}

@keyframes devops-flow-b {
    0% {
        stroke-dashoffset: 333
    }

    to {
        stroke-dashoffset: 1333
    }
}

@keyframes devops-flow-c {
    0% {
        stroke-dashoffset: 666
    }

    to {
        stroke-dashoffset: 1666
    }
}

@keyframes devops-dash-clockwise {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.devops-section {
    background-color: #f5fbff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 0 0;
}

.devops-section .devops-container {
    display: flex;
    height: 650px;
    justify-content: center;
    margin-top: 0;
    min-height: auto;
    padding: 0;
    perspective: 800px;
    position: relative
}

.devops-section .devops-container .devops-layer {
    aspect-ratio: 2166/1422;
    flex: 0 0 auto;
    height: 650px;
    max-width: 100%;
    position: relative;
    z-index: auto
}

.devops-section .devops-container .devops-layer .devops-layer-item {
    display: block;
    height: auto;
    pointer-events: none;
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.devops-section .devops-container .devops-layer .devops-layer-item.layer-main {
    left: 12.696%;
    top: 17.651%;
    width: 73.638%;
    z-index: 1
}

.devops-section .devops-container .devops-layer .devops-layer-item.layer-k8s {
    animation: devops-card-float 3.4s ease-in-out -.6s infinite;
    left: 44.599%;
    top: 75.809%;
    width: 15.328%;
    z-index: 5
}

.devops-section .devops-container .devops-layer .devops-layer-item.layer-cicd {
    animation: devops-card-float 3.9s ease-in-out -1.4s infinite;
    left: 78.809%;
    top: 8.65%;
    width: 14.958%;
    z-index: 2
}

.devops-section .devops-container .devops-layer .devops-layer-item.layer-smart {
    animation: devops-card-float 3.2s ease-in-out -2.1s infinite;
    left: 81.671%;
    top: 54.923%;
    width: 16.713%;
    z-index: 2
}

.devops-section .devops-container .devops-layer .devops-layer-item.layer-process {
    animation: devops-card-float 3.7s ease-in-out -.2s infinite;
    left: 2.124%;
    top: 55.626%;
    width: 15.974%;
    z-index: 2
}

.devops-section .devops-container .devops-layer .devops-layer-item.layer-container {
    animation: devops-card-float 4.1s ease-in-out -1.8s infinite;
    left: 5.171%;
    top: 7.665%;
    width: 15.974%;
    z-index: 2
}

.devops-section .devops-container .devops-layer .devops-layer-item.layer-ring {
    animation: devops-ring-float 3s ease-in-out infinite;
    left: 40.628%;
    top: 9.423%;
    width: 18.467%;
    z-index: 3
}

.devops-section .devops-container .devops-layer .devops-layer-item.layer-ring-core {
    animation: devops-ring-float 3s ease-in-out infinite;
    left: 40.766%;
    top: 22.925%;
    width: 7.479%;
    z-index: 6
}

.devops-section .devops-container .devops-flow-light {
    height: 580px;
    left: 50%;
    mix-blend-mode: screen;
    pointer-events: none;
    position: absolute;
    top: 50.8%;
    transform: translate(-50%, -50%);
    width: 780px;
    z-index: 2
}

.devops-section .devops-container .devops-flow-light .devops-flow-svg {
    display: block;
    filter: drop-shadow(0 0 8px rgba(0, 200, 255, .55));
    height: 100%;
    overflow: visible;
    width: 100%
}

.devops-section .devops-container .devops-flow-light .devops-flow-track {
    fill: none;
    stroke-width: 1.5;
    display: none
}

.devops-section .devops-container .devops-flow-light .devops-flow-run {
    fill: none;
    stroke-linecap: round
}

.devops-section .devops-container .devops-flow-light .devops-flow-run.outer-a {
    stroke: rgba(0, 150, 255, .3);
    stroke-width: 1.5;
    stroke-dasharray: 100 650;
    stroke-dashoffset: 375;
    animation: devops-flow-o 5s linear infinite
}

.devops-section .devops-container .devops-flow-light .devops-flow-run.outer-b {
    stroke: rgba(0, 180, 255, .7);
    stroke-width: 2;
    stroke-dasharray: 60 690;
    stroke-dashoffset: 375;
    animation: devops-flow-o 5s linear infinite
}

.devops-section .devops-container .devops-flow-light .devops-flow-run.outer-c {
    stroke: #00e0ff;
    stroke-width: 2.5;
    stroke-dasharray: 30 720;
    stroke-dashoffset: 375;
    animation: devops-flow-o 5s linear infinite;
    filter: drop-shadow(0 0 4px #00d4ff)
}

.devops-section .devops-container .devops-flow-light .devops-flow-run.outer-d {
    stroke: #fff;
    stroke-width: 3;
    stroke-dasharray: 5 745;
    stroke-dashoffset: 375;
    animation: devops-flow-o 5s linear infinite;
    filter: drop-shadow(0 0 3px #fff)
}

.devops-section .devops-container .devops-flow-light .devops-flow-run.inner-a {
    stroke: rgba(0, 150, 255, .25);
    stroke-width: 1.2;
    stroke-dasharray: 80 510;
    stroke-dashoffset: 0;
    animation: devops-flow-i 5s linear infinite
}

.devops-section .devops-container .devops-flow-light .devops-flow-run.inner-b {
    stroke: rgba(0, 180, 255, .6);
    stroke-width: 1.5;
    stroke-dasharray: 50 540;
    stroke-dashoffset: 0;
    animation: devops-flow-i 5s linear infinite
}

.devops-section .devops-container .devops-flow-light .devops-flow-run.inner-c {
    stroke: #00d4ff;
    stroke-width: 2;
    stroke-dasharray: 25 565;
    stroke-dashoffset: 0;
    animation: devops-flow-i 5s linear infinite;
    filter: drop-shadow(0 0 3px #00c8ff)
}

.devops-section .devops-container .devops-flow-light .devops-flow-run.inner-d {
    stroke: #e0ffff;
    stroke-width: 2.5;
    stroke-dasharray: 4 586;
    stroke-dashoffset: 0;
    animation: devops-flow-i 5s linear infinite;
    filter: drop-shadow(0 0 2px #fff)
}

.devops-section .devops-container .devops-energy-core {
    height: 230px;
    left: 50%;
    mix-blend-mode: screen;
    pointer-events: none;
    position: absolute;
    top: 10px;
    transform: translateX(-50%);
    width: 170px;
    z-index: 3
}

.devops-section .devops-container .devops-energy-core:before {
    animation: devops-energy-pulse 2s ease-in-out infinite;
    background: radial-gradient(ellipse at center, hsla(0, 0%, 100%, .98) 0, rgba(89, 233, 255, .9) 24%, rgba(0, 142, 255, .42) 54%, rgba(0, 142, 255, 0) 76%);
    border-radius: 50%;
    bottom: 22px;
    content: "";
    filter: blur(2px) drop-shadow(0 0 16px rgba(0, 216, 255, .9));
    height: 30px;
    left: 50%;
    position: absolute;
    width: 104px
}

.devops-section .devops-container .devops-energy-core:after {
    border: 1px solid rgba(117, 238, 255, .86);
    border-radius: 50%;
    bottom: 12px;
    box-shadow: 0 0 14px rgba(40, 205, 255, .75), inset 0 0 18px rgba(72, 194, 255, .55);
    content: "";
    display: none;
    height: 42px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 128px
}

.devops-section .devops-container .devops-energy-core .devops-energy-scan {
    animation: devops-energy-scan 2.2s ease-out infinite;
    border: 1px solid rgba(125, 245, 255, .78);
    border-radius: 50%;
    bottom: 48px;
    box-shadow: 0 0 12px rgba(0, 214, 255, .85);
    height: 18px;
    left: 50%;
    position: absolute;
    width: 100px
}

.devops-section .devops-container .devops-energy-core .devops-energy-scan.s2 {
    animation-delay: -1.1s;
    height: 24px;
    opacity: .7;
    width: 120px
}

.devops-section .devops-container .devops-energy-core .devops-energy-ray {
    animation: devops-energy-ray 1.7s linear infinite;
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .95) 18%, rgba(0, 218, 255, .9) 52%, rgba(0, 116, 255, 0));
    border-radius: 999px;
    bottom: 38px;
    box-shadow: 0 0 10px rgba(0, 212, 255, .95);
    height: 142px;
    position: absolute;
    width: 3px
}

.devops-section .devops-container .devops-energy-core .devops-energy-ray.r1 {
    animation-delay: 0s;
    height: 128px;
    left: 46px
}

.devops-section .devops-container .devops-energy-core .devops-energy-ray.r2 {
    animation-delay: -.55s;
    height: 154px;
    left: 68px
}

.devops-section .devops-container .devops-energy-core .devops-energy-ray.r3 {
    animation-delay: -1.05s;
    height: 116px;
    left: 87px
}

.devops-section .devops-container .devops-energy-core .devops-energy-ray.r4 {
    animation-delay: -.25s;
    height: 142px;
    left: 105px
}

.devops-section .devops-container .devops-energy-core .devops-energy-spark {
    animation: devops-energy-spark 1.9s linear infinite;
    background: #e8ffff;
    border-radius: 50%;
    bottom: 44px;
    box-shadow: 0 0 8px #00d8ff, 0 0 14px rgba(0, 122, 255, .8);
    height: 4px;
    left: 50%;
    position: absolute;
    width: 4px
}

.devops-section .devops-container .devops-energy-core .devops-energy-spark.p1 {
    --spark-x: -44px;
    animation-delay: 0s
}

.devops-section .devops-container .devops-energy-core .devops-energy-spark.p2 {
    --spark-x: 34px;
    animation-delay: -.35s
}

.devops-section .devops-container .devops-energy-core .devops-energy-spark.p3 {
    --spark-x: -18px;
    animation-delay: -.72s
}

.devops-section .devops-container .devops-energy-core .devops-energy-spark.p4 {
    --spark-x: 52px;
    animation-delay: -1.1s
}

.devops-section .devops-container .devops-energy-core .devops-energy-spark.p5 {
    --spark-x: -58px;
    animation-delay: -1.45s
}

.devops-section .devops-container .devops-layer-title {
    color: #1f2329;
    position: absolute;
    text-align: center
}

.devops-section .devops-container .devops-layer-title.containerization {
    bottom: 395px;
    left: 166px
}

.devops-section .devops-container .devops-layer-title.cicd {
    bottom: 405px;
    right: 14%
}

.devops-section .devops-container .devops-layer-title.flow {
    bottom: 88px;
    left: 10%
}

.devops-section .devops-container .devops-layer-title.k8s {
    bottom: -42px;
    left: 45%
}

.devops-section .devops-container .devops-layer-title.intelligent {
    bottom: 92px;
    right: 11%
}

.devops-section .devops-container .devops-layer-title dt {
    color: #171d26;
    font-size: 20px;
    font-weight: 500px
}

.devops-section .devops-container .devops-layer-title dd {
    color: #666;
    font-size: 14px;
    line-height: 28px
}

@keyframes compatible-flow-a {
    0% {
        stroke-dashoffset: 0
    }

    to {
        stroke-dashoffset: 1000
    }
}

@keyframes compatible-flow-b {
    0% {
        stroke-dashoffset: 333
    }

    to {
        stroke-dashoffset: 1333
    }
}

@keyframes compatible-flow-c {
    0% {
        stroke-dashoffset: 666
    }

    to {
        stroke-dashoffset: 1666
    }
}

@keyframes compatible-dash-clockwise {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.compatible-section {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 0;
    text-align: center
}

.compatible-section .compatible-container {
    align-items: center;
    display: flex;
    height: 620px;
    justify-content: center;
    overflow: visible;
    position: relative
}

.compatible-section .compatible-container .compatible-base-img {
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    position: relative;
    z-index: 1
}

.compatible-section .compatible-container .compatible-flow-layer {
    aspect-ratio: 2160/1521;
    height: 100%;
    left: 50%;
    mix-blend-mode: normal;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2
}

.compatible-section .compatible-container .compatible-flow-layer .compatible-flow-svg {
    display: block;
    filter: drop-shadow(0 0 7px rgba(107, 185, 254, .62));
    height: 100%;
    overflow: visible;
    width: 100%
}

.compatible-section .compatible-container .compatible-flow-layer .compatible-flow-svg .compatible-dash-spin {
    animation: compatible-dash-clockwise 20s linear infinite;
    transform-box: view-box;
    transform-origin: 1100px 820px
}

.compatible-section .compatible-container .compatible-flow-layer .compatible-flow-svg .compatible-dash-spin .compatible-dash-orbit {
    fill: none;
    stroke: rgba(107, 185, 254, .7);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 14 18;
    filter: drop-shadow(0 0 8px rgba(107, 185, 254, .78));
    opacity: 1
}

.compatible-section .compatible-container .compatible-flow-layer .compatible-flow-svg .compatible-flow-track {
    display: none
}

.compatible-section .compatible-container .compatible-flow-layer .compatible-flow-svg .compatible-flow-run {
    fill: none;
    stroke-linecap: round
}

.compatible-section .compatible-container .compatible-flow-layer .compatible-flow-svg .compatible-flow-run.flow-a {
    animation: compatible-flow-a 4.8s linear infinite
}

.compatible-section .compatible-container .compatible-flow-layer .compatible-flow-svg .compatible-flow-run.flow-b {
    animation: compatible-flow-b 4.8s linear infinite
}

.compatible-section .compatible-container .compatible-flow-layer .compatible-flow-svg .compatible-flow-run.flow-c {
    animation: compatible-flow-c 4.8s linear infinite
}

.compatible-section .compatible-container .compatible-flow-layer .compatible-flow-svg .compatible-flow-run.flow-soft {
    stroke: rgba(107, 185, 254, .16);
    stroke-width: 8;
    stroke-dasharray: 112 888;
    filter: drop-shadow(0 0 6px rgba(107, 185, 254, .22)) ；
}

.compatible-section .compatible-container .compatible-flow-layer .compatible-flow-svg .compatible-flow-run.flow-main {
    stroke: rgba(107, 185, 254, .5);
    stroke-width: 6;
    stroke-dasharray: 78 922;
    filter: drop-shadow(0 0 6px rgba(107, 185, 254, .5)) ；
}

.compatible-section .compatible-container .compatible-flow-layer .compatible-flow-svg .compatible-flow-run.flow-core {
    stroke: rgba(140, 202, 255, .82);
    stroke-width: 4;
    stroke-dasharray: 38 962;
    filter: drop-shadow(0 0 5px rgba(107, 185, 254, .68)) ；
}

.compatible-section .compatible-container .compatible-flow-layer .compatible-flow-svg .compatible-flow-run.flow-hot {
    stroke: #6bb9fe;
    stroke-width: 4;
    stroke-dasharray: 12 988;
    filter: drop-shadow(0 0 5px rgba(107, 185, 254, .9)) ；
}

.compatible-section .compatible-container .compatible-flow-layer .compatible-flow-svg .compatible-flow-head {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 0 1000
}

.compatible-section .compatible-container .compatible-flow-layer .compatible-flow-svg .compatible-flow-head.flow-a {
    animation: compatible-flow-a 4.8s linear infinite
}

.compatible-section .compatible-container .compatible-flow-layer .compatible-flow-svg .compatible-flow-head.flow-b {
    animation: compatible-flow-b 4.8s linear infinite
}

.compatible-section .compatible-container .compatible-flow-layer .compatible-flow-svg .compatible-flow-head.flow-c {
    animation: compatible-flow-c 4.8s linear infinite
}

.compatible-section .compatible-container .compatible-flow-layer .compatible-flow-svg .compatible-flow-head.head-a {
    stroke: url(#xinchuangFlowHeadGradA);
    stroke-width: 45;
    filter: drop-shadow(0 0 15px rgba(107, 185, 254, .98))
}

.compatible-section .compatible-container .compatible-flow-layer .compatible-flow-svg .compatible-flow-head.head-b {
    stroke: url(#xinchuangFlowHeadGradB);
    stroke-width: 34;
    filter: drop-shadow(0 0 12px rgba(107, 185, 254, .82))
}

.compatible-section .compatible-container .compatible-flow-layer .compatible-flow-svg .compatible-flow-head.head-c {
    stroke: url(#xinchuangFlowHeadGradC);
    stroke-width: 26;
    filter: drop-shadow(0 0 9px rgba(107, 185, 254, .68))
}

.compatible-section .compatible-container .compatible-label-img {
    height: 100%;
    left: 50%;
    -o-object-fit: contain;
    object-fit: contain;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3
}

.honored-section {
    background-color: #f5fbff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 40px 0
}

.honored-section .honored-container {
    overflow: hidden;
    position: relative;
    width: 100%
}

.honored-section .honored-container .honored-logo-scroll {
    animation: scrollLeft 30s linear infinite;
    display: flex;
    width: -moz-max-content;
    width: max-content
}

.honored-section .honored-container .honored-logo-scroll img {
    flex-shrink: 0;
    height: 590px;
    -o-object-fit: contain;
    object-fit: contain;
    width: auto
}

.whitepaper-section {
    background-color: #f8fafc;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
    padding: 60px 0;
    scroll-snap-align: start
}

.whitepaper-section .whitepaper-container .whitepaper-top-wrap {
    align-items: center;
    display: flex;
    gap: 40px;
    margin: 0 auto 60px;
    max-width: 900px;
    padding: 0 24px
}

.whitepaper-section .whitepaper-container .whitepaper-top-wrap .whitepaper-top-img {
    border: 10px solid #fff;
    border-radius: 12px;
    box-shadow: 10px 0 20px rgba(0, 0, 0, .1);
    flex-shrink: 0;
    height: 350px;
    overflow: hidden;
    position: relative;
    width: 260px
}

.whitepaper-section .whitepaper-container .whitepaper-top-wrap .whitepaper-top-img img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.whitepaper-section .whitepaper-container .whitepaper-top-wrap .whitepaper-top-info {
    flex: 1;
    padding-top: 0
}

.whitepaper-section .whitepaper-container .whitepaper-top-wrap .whitepaper-top-info .wp-title {
    color: #333;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px
}

.whitepaper-section .whitepaper-container .whitepaper-top-wrap .whitepaper-top-info .wp-desc {
    color: #666;
    font-size: 15px;
    line-height: 28px;
    margin-bottom: 48px
}

.whitepaper-section .whitepaper-container .whitepaper-top-wrap .whitepaper-top-info .wp-download-btn {
    align-items: center;
    background: #3860f9;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 15px;
    font-weight: 500;
    gap: 6px;
    padding: 12px 28px;
    text-decoration: none;
    transition: all .3s
}

.whitepaper-section .whitepaper-container .whitepaper-top-wrap .whitepaper-top-info .wp-download-btn:hover {
    background: #1d4ed8
}

.whitepaper-section .whitepaper-container .whitepaper-card-row {
    display: flex;
    gap: 16px;
    padding: 0 180px
}

.whitepaper-section .whitepaper-container .whitepaper-card-row .wp-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 10px 10px 20px rgba(174, 188, 206, .18);
    cursor: pointer;
    display: flex;
    flex: 1;
    gap: 24px;
    overflow: hidden;
    padding: 28px;
    position: relative;
    transition: all .3s
}

.whitepaper-section .whitepaper-container .whitepaper-card-row .wp-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
    transform: translateY(-4px)
}

.whitepaper-section .whitepaper-container .whitepaper-card-row .wp-card:hover .wp-card-img {
    transform: scale(1.05)
}

.whitepaper-section .whitepaper-container .whitepaper-card-row .wp-card:hover .wp-card-info .wp-card-title {
    color: #e60012
}

.whitepaper-section .whitepaper-container .whitepaper-card-row .wp-card:hover .wp-card-info .wp-card-download-btn {
    background: #e60012;
    border-color: #e60012;
    color: #fff
}

.whitepaper-section .whitepaper-container .whitepaper-card-row .wp-card .wp-card-img {
    flex-shrink: 0;
    height: 160px;
    overflow: hidden;
    transition: all .3s;
    width: 118px
}

.whitepaper-section .whitepaper-container .whitepaper-card-row .wp-card .wp-card-img img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: all .3s;
    width: 100%
}

.whitepaper-section .whitepaper-container .whitepaper-card-row .wp-card .wp-card-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between
}

.whitepaper-section .whitepaper-container .whitepaper-card-row .wp-card .wp-card-info .wp-card-title {
    color: #333;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    transition: color .3s
}

.whitepaper-section .whitepaper-container .whitepaper-card-row .wp-card .wp-card-info .wp-card-desc {
    color: #999;
    display: -webkit-box;
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 14px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.whitepaper-section .whitepaper-container .whitepaper-card-row .wp-card .wp-card-info .wp-card-download-btn {
    align-items: center;
    background: transparent;
    border: 1px solid #3860f9;
    border-radius: 4px;
    color: #3860f9;
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 500;
    height: 32px;
    justify-content: center;
    text-decoration: none;
    transition: all .3s;
    width: 100px
}

.whitepaper-modal-overlay {
    align-items: center;
    background: rgba(0, 0, 0, .5);
    display: none;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: 1000
}

.whitepaper-modal-overlay.active {
    display: flex
}

.whitepaper-modal-overlay .whitepaper-modal {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
    max-width: 400px;
    padding: 48px 40px;
    position: relative;
    text-align: center;
    width: 90%
}

.whitepaper-modal-overlay .whitepaper-modal .whitepaper-close-btn {
    border-radius: 50%;
    color: #999;
    cursor: pointer;
    font-size: 18px;
    height: 32px;
    line-height: 32px;
    position: absolute;
    right: 16px;
    text-align: center;
    top: 16px;
    transition: .3s;
    width: 32px
}

.whitepaper-modal-overlay .whitepaper-modal .whitepaper-close-btn:hover {
    background-color: #f0f0f0
}

.whitepaper-modal-overlay .whitepaper-modal .whitepaper-modal-title {
    color: #1a1a2e;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px
}

.whitepaper-modal-overlay .whitepaper-modal .whitepaper-modal-desc {
    color: #666;
    font-size: 14px;
    margin-bottom: 24px
}

.whitepaper-modal-overlay .whitepaper-modal .whitepaper-modal-qrcode {
    display: block;
    height: 200px;
    margin: 0 auto 16px;
    -o-object-fit: contain;
    object-fit: contain;
    width: 200px
}

.whitepaper-modal-overlay .whitepaper-modal .whitepaper-modal-subdesc {
    color: #999;
    font-size: 13px
}

/*# sourceMappingURL=index.min.css.map */