@charset "UTF-8"; body, div, pre, form, fieldset, input, textarea, p, blockquote, th, td, img, button {
    margin: 0;
    padding: 0;
    border: 0;
}

html {
    -webkit-text-size-adjust: none;
}

body {
    background-color: #FFFFFF/*#f5f7f9*/;
    color: #333;
    font-size: 14px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

body sup {
    display: inline-block!important;
    vertical-align: top;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

input {
    font-weight: normal;
    background: 0;
    box-shadow: none;
    -webkit-appearance: none;
    border-radius: 0;
    outline: 0;
    border: 0
}

a {
    text-decoration: none;
    color: #333333;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: all .4s ease;
}

a:hover {
    text-decoration: none;
    color: #000;
}

a:focus {
    outline: 0 dotted;
}

a:focus, input:focus {
    -moz-outline-style: none;
}

input::placeholder {
    color: #999999;
}

a * {
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: all .4s ease;
}

ol,ul,li {
    list-style: none;
}

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

h1,h2,h3,h4,h5,h6,dl,dd,dt,i,em {
    font-weight: normal;
    font-style: normal;
}

img {
    border: none;
    vertical-align: middle;
    max-width: 100%;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.pic {
    position: relative;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img-block {
    display: block;
    width: 100%;
    height: auto;
}

.clearfix {
    clear: both;
}

/* 通用 */
.container-outer {
    max-width: 1920px;
    width: 100%;
    height: 100%;
    padding: 0 10rem;
    margin: 0 auto;
}

.container-inner {
    margin: auto;
    min-height: 1px;
    width: 100%;
    padding: 80px 40px;
}

.pd80 {
    padding: 80px 0;
}

.view-more {
    display: flex;
    flex-wrap: nowrap
}

.view-more a {
    color: #fff;
    font-size: 0.875rem;
    background: #0863c4;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    padding: 0.75rem 1.875rem;
    position: relative;
    z-index: 1;
    border-radius: 2rem
}

.view-more i {
    font-size: 0.75rem;
    margin-left: 8px;
    position: relative
}

.view-more a:after {
    content: "";
    display: block;
    width: 0;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background: #34C759;
    visibility: hidden;
    z-index: -1;
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s
}

.view-more a:hover:after {
    width: 100%;
    visibility: visible;
    left: 0;
    right: auto
}

.header {
    position: fixed;
    width: 100%;
    height: 5rem;
    top: 0;
    z-index: 1000;
    border-bottom: 1px rgba(255, 255, 255, .09) solid;
    transition: 0.3s;
}

.header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: static;
    max-width: 1920px;
    width: 100%;
    height: 100%;
    padding: 0 10rem;
    margin: 0 auto;
}

.header .header-logo {
    flex-shrink: 0
}

.header .header-logo a {
    display: flex;
    height: 100%;
    align-items: center
}

.header .header-logo img {
    display: block;
    width: 10.5rem;
    transition: 0.5s
}

.header .header-logo img.logo1 {
    display: block
}

.header .header-logo img.logo2 {
    display: none
}

.header .nav-box {
    margin-left: 3rem;
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
    float: right
}

.header .nav-menu {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0
}

.header .nav-menu li {
    position: relative
}

.header .nav-menu a {
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    font-weight: 500;
    letter-spacing: 0.3px
}

.header .nav-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #FFFFFF;
}

.header .nav-menu .submenu-toggle {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1)
}

.header .nav-menu .submenu-toggle::after {
    content: '';
    width: 6px;
    height: 6px;
    border: 2px solid #333;
    border-left: 0;
    border-top: 0;
    display: block;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1)
}

.header .nav-button {
    display: flex;
    margin-left: 2rem
}

.header .nav-button .language {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s
}

.header .nav-button .language > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff
}

.header .nav-button .language span {
    margin-left: .75rem;
    margin-right: .375rem;
    font-size: .875rem;
    white-space: nowrap;
    transition: .5s
}

.header .nav-button .language .icon-dArrow {
    font-size: 0.75rem
}

.header .nav-button .language .language-show {
    position: absolute;
    left: 0;
    top: 100%;
    width: 130px;
    opacity: 0;
    visibility: hidden;
    transform-origin: center top;
    background-color: #FFFFFF;
    transform: scaleY(0);
    box-shadow: 0px 8px 36.8px 3.2px rgba(0, 0, 7, 0.08);
    ;transition: 0.5s;
    border-radius: 6px;
    overflow: hidden;
}

.header .nav-button .language:hover .language-show {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1)
}

.header .nav-button .language .language-show a {
    display: block;
    text-align: left;
    justify-content: flex-start !important;
    padding: 15px 35px 15px 25px;
    padding-left: 25px;
    font-size: 14px;
    color: #333;
    position: relative;
    z-index: 1;
    transition: all 0.2s ease
}

.header .nav-button .language .language-show a:hover {
    color: #fff;
    background: #0863c4;
}

.header .nav-button .search-btn {
    display: flex;
    margin-left: 2rem;
    align-items: center;
    position: relative;
    z-index: 1;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s
}

.header .nav-button .search-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff
}

.header.scrolled .header-logo img.logo1 {
    display: none
}

.header.scrolled .header-logo img.logo2 {
    display: block
}

.header.scrolled {
    background: #fff;
    border-bottom: 1px solid #e6e6e6;
}

.header.scrolled .nav-menu > li > a {
    color: #333
}

.header.scrolled .nav-button .language > a, .header.scrolled .nav-button .search-btn > a {
    color: #333;
}

.header.scrolled .nav-button .language svg > path, .header.scrolled .nav-button .search-btn svg > path {
    stroke: #333333;
}

.header:hover {
    background: #fff;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0, 0, 7, 0.08);
}

.header:hover .header-logo img.logo1 {
    display: none
}

.header:hover .header-logo img.logo2 {
    display: block
}

.header:hover .nav-menu > li > a {
    color: #333333;
}

.header:hover .nav-menu > li > a::after {
    background: #0863c4;
}

.header:hover .nav-button .language > a, .header:hover .nav-button .search-btn > a {
    color: #333;
}

.header:hover .nav-button .language svg > path, .header:hover .nav-button .search-btn svg > path {
    stroke: #333333;
}

.header .m-search {
    display: none;
}

@media screen and (min-width: 960px) {
    .header .nav-toggle {
        display:none
    }

    .header .nav-menu {
        display: flex;
        align-items: center;
        height: 100%
    }

    .header .nav-menu > li {
        height: 100%;
        display: flex;
        align-items: center;
        margin: 0 1.25rem
    }

    .header .nav-menu > li > a {
        line-height: 5rem;
        align-items: center;
        font-size: 1.125rem;
        color: #fff
    }

    .header.transparent .nav-menu > li > a {
        color: #fff
    }

    .header .nav-menu > li > a:after {
        content: "";
        display: block;
        width: 0;
        height: 2px;
        transition: .5s;
        background: #FFFFFF;
        position: absolute;
        right: 0;
        bottom: 20%;
        border-radius: 3px
    }

    .header.scrolled .nav-menu > li > a:after {
        background: #0863c4
    }

    .header .nav-menu > li.active > a:after,.header .nav-menu > li:hover > a:after,.header.scrolled .nav-menu > li.active > a:after,.header.scrolled .nav-menu > li:hover > a:after {
        width: 100%;
        left: 0;
        right: auto
    }

    .header .nav-menu ul {
        position: absolute;
        min-width: 160px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08);
        z-index: 1000;
        border-radius: 6px
    }

    .header .nav-menu > li > ul {
        top: 100%;
        left: 0
    }

    .header .nav-menu ul ul {
        top: 10px;
        left: 100%;
        transform: translateX(10px)
    }

    .header .nav-menu li:hover > ul {
        opacity: 1;
        visibility: visible;
        transform: translate(0)
    }

    .header .nav-menu ul li {
        width: 100%
    }

    .header .nav-menu ul a {
        color: #333;
        padding: 15px 35px 15px 25px;
        white-space: nowrap;
        width: 100%;
        font-size: 14px;
        transition: all 0.2s ease;
        position: relative
    }

    .header .nav-menu ul li:hover > a {
        color: #fff
    }

    .header .nav-menu ul li:hover > a::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #0863c4;
        z-index: -1;
        border-radius: 0
    }

    .header .nav-menu ul li:first-child:hover > a::after {
        border-radius: 6px 6px 0 0
    }

    .header .nav-menu ul li:last-child:hover > a::after {
        border-radius: 0 0 6px 6px
    }

    .header .nav-menu ul li:first-child:last-child:hover > a::after {
        border-radius: 6px
    }

    .header .nav-menu > li.has-children > .submenu-toggle {
        display: none
    }

    .header .nav-menu .submenu-toggle {
        width: 20px;
        height: 20px;
        right: 10px
    }

    .header .nav-menu .submenu-toggle::after {
        transform: rotate(-45deg);
        width: 6px;
        height: 6px;
        border-width: 1.5px
    }

    .header .nav-menu ul li:hover > .submenu-toggle::after {
        border-color: #fff
    }
}

/* 下拉搜索 */
.search-screen-box {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 70vh;
    z-index: 1000000;
    opacity: 0;
    visibility: hidden;
    transition: .6s
}

.search-screen-box:before {
    content: "";
    position: absolute;
    top: 0;
    height: 0;
    transition: .6s;
    left: 0;
    right: 0;
    z-index: 1
}

.search-screen-box:before {
    background-image: -moz-linear-gradient(270deg,#0863c4 20%,transparent 100%);
    background-image: -webkit-linear-gradient(270deg,#0863c4 20%,transparent 100%);
    background-image: -ms-linear-gradient(270deg,#0863c4 20%,transparent 100%)
}

.search-screen-box.active {
    opacity: 1;
    visibility: visible
}

.search-screen-box.active:before {
    height: 100%
}

.search-screen-box .search-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    margin: 0;
    background-size: cover;
    background-repeat: no-repeat;
    transform-origin: center center;
    transition: height .8s cubic-bezier(.77,0,.175,1)
}

.search-screen-box .search-frame {
    position: absolute;
    left: 0;
    top: 30%;
    transform: translateY(-50%);
    width: 100%;
    z-index: 2
}

.search-screen-box .search-frame .search-input {
    overflow: hidden;
    display: flex;
    width: 50rem;
    margin: 0 auto;
    padding-left: 1.5rem;
    background-color: rgba(0,0,0,.1);
    box-sizing: border-box;
    transition: all .3s;
    max-width: 94%;
    border-radius: 2.5rem;
}

.search-screen-box .search-frame .search-input input[type=text] {
    height: 3.75rem;
    flex-grow: 1;
    background-color: transparent;
    font-size: 16px;
    color: #fff;
    transition: all .3s
}

.search-screen-box .search-frame .search-input input::placeholder {
    color: rgba(255,255,255,0.6);
}

.search-screen-box .search-frame .search-input .btn {
    width: 5rem;
    height: 3.75rem;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-screen-box .search-close {
    position: absolute;
    width: 3rem;
    height: 3rem;
    z-index: 10;
    right: 20px;
    top: 20px;
    background-color: rgba(255,255,255,.1);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-screen-box .search-close:hover {
    transform: rotate(180deg)
}

/* 首页banner图 */
.index-banner-swiper {
    height: 100vh;
    position: relative;
    z-index: 0;
    overflow: hidden
}

.index-banner-swiper .swiper-slide {
    overflow: hidden
}

.index-banner-swiper .swiper-slide .pc-image {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.index-banner-swiper .swiper-slide .m-image {
    display: none;
}

.index-banner-swiper .swiper-slide .index-banner-text {
    color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center
}

.index-banner-swiper .swiper-slide .index-banner-text h4 {
    font-size: 2.375rem;
    margin-bottom: 2rem;
    font-weight: bold
}

.index-banner-swiper .swiper-slide .index-banner-text p {
    display: block;
    font-size: 1.25rem;
    line-height: 2rem;
    margin-bottom: 2rem;
}

.index-banner-swiper .swiper-slide .index-banner-text .view-more a {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.index-banner-swiper .swiper-slide .index-banner-text .view-more a:hover {
    border: 1px solid rgba(255, 255, 255, 1);
}

.index-banner-swiper .swiper-slide .index-banner-text .view-more a:after {
    display: none;
}

.index-banner-swiper .swiper-slide .index-banner-text .m-video {
    margin-left: 0.625rem;
}

.index-banner-swiper .swiper-slide .index-banner-text .m-video i {
    font-size: 0.875rem;
}

.index-banner-swiper .swiper-button-white {
    width: 2.25rem;
    height: 9.25rem;
    border-radius: 2rem;
    color: #fff;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-orientation: sideways;
    writing-mode: vertical-rl;
    padding: 15px 0;
    font-weight: bold;
    transition: all 0.4s;
}

.index-banner-swiper .swiper-button-white:hover {
    background: #0863c4;
}

.index-banner-swiper .swiper-button-white::before {
    content: '';
    width: 1px;
    height: 4.125rem;
    background-color: #ffffff;
    margin-bottom: 1.25rem;
    transform: translate(-50%,-50%);
    position: absolute
}

.index-banner-swiper .swiper-button-next {
    left: auto;
    right: 3%
}

.index-banner-swiper .swiper-button-prev {
    right: auto;
    left: 3%
}

.index-banner-swiper .swiper-slide .anim01 {
    opacity: 0
}

.index-banner-swiper .swiper-slide .anim02 {
    opacity: 0
}

.index-banner-swiper .swiper-slide .anim03 {
    opacity: 0
}

.index-banner-swiper .swiper-slide.swiper-slide-active .anim01 {
    animation: enter 1.2s forwards .2s
}

.index-banner-swiper .swiper-slide.swiper-slide-active .anim02 {
    animation: enter 1.2s forwards .4s
}

.index-banner-swiper .swiper-slide.swiper-slide-active .anim03 {
    animation: enter 1.2s forwards .6s
}

.index-banner-swiper .swiper-slide.swiper-slide-active .pc-image {
    animation: scaleUpDown 8s linear forwards;
    -webkit-animation: scaleUpDown 8s linear forwards
}

@-webkit-keyframes enter {
    0% {
        opacity: 0;
        transform: translateY(100px);
        -webkit-transform: translateY(100px);
        -moz-transform: translateY(100px);
        -ms-transform: translateY(100px);
        -o-transform: translateY(100px)
    }

    20% {
        opacity: 0;
        transform: translateY(100px);
        -webkit-transform: translateY(100px);
        -moz-transform: translateY(100px);
        -ms-transform: translateY(100px);
        -o-transform: translateY(100px)
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px)
    }
}

@keyframes enter {
    0% {
        opacity: 0;
        transform: translateY(100px);
        -webkit-transform: translateY(100px);
        -moz-transform: translateY(100px);
        -ms-transform: translateY(100px);
        -o-transform: translateY(100px)
    }

    20% {
        opacity: 0;
        transform: translateY(100px);
        -webkit-transform: translateY(100px);
        -moz-transform: translateY(100px);
        -ms-transform: translateY(100px);
        -o-transform: translateY(100px)
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px)
    }
}

@-webkit-keyframes scaleUpDown {
    from {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes scaleUpDown {
    from {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    to {
        transform: scale(1);
        transform: scale(1)
    }
}

.index-banner-swiper .swiper-pagination {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: auto;
    left: auto!important;
}

.index-banner-swiper .swiper-pagination span {
    width: 70px;
    height: 2px;
    background-color: rgb(255,255,255,0.4);
    transition: .5s;
    border-radius: 50%;
    padding: 0;
    position: relative
}

.index-banner-swiper .swiper-pagination span:before {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    top: 0;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    background: rgba(255,255,255,.25)
}

.index-banner-swiper .swiper-pagination span:after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    left: 0;
    margin-left: 0;
    position: absolute;
    top: 0;
    background: #fff
}

.index-banner-swiper .swiper-pagination span.swiper-pagination-bullet-active:after {
    animation: anim-h 8s linear forwards;
    -webkit-animation: anim-h 8s linear forwards
}

@-webkit-keyframes anim-h {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

@keyframes anim-h {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

.index-banner-swiper .index-banner-bottom {
    position: relative;
    bottom: 8%;
    height: 2rem;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start
}

.index-banner-swiper .swiper-button-next::after,.index-banner-swiper .swiper-button-prev::after {
    display: none
}

/* 首页推荐产品 */
.index-mod-title {
    position: relative
}

.index-mod-title .lines {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-shrink: 0;
    height: 2.875rem
}

.index-mod-title .lines .line1 {
    width: 6px;
    height: 100%;
    background-color: #0863c4;
    margin-right: 5px;
    border-radius: 3px
}

.index-mod-title .lines .line2 {
    width: 6px;
    height: 39%;
    background-color: #34C759;
    align-self: flex-start;
    border-radius: 3px
}

.index-mod-title .lines .tit {
    font-size: 1.75rem;
    font-weight: bold;
    line-height: 1.4;
    margin-left: 1rem;
}

.index-product {
    overflow: hidden
}

.index-product .index-product-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem
}

.index-product .index-product-bottom {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.index-product .index-product-item {
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0, 0, 7, 0.08);
}

.index-product .index-product-item a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    position: relative
}

.index-product .index-product-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.index-product .index-product-item .index-product-title {
    opacity: 1;
    padding: 1.5rem;
    line-height: 1.5;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 9;
    text-align: center;
    color: #fff;
    font-size: 1.125rem;
    font-weight: bold;
    transition: all 0.5s
}

.index-product .index-product-item:hover .index-product-title {
    opacity: 0
}

.index-product .index-product-item .index-product-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8,99,196,0.8);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s
}

.index-product .index-product-item .index-product-info {
    transform: translateY(30px);
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px)
}

.index-product .index-product-item .index-product-info h5 {
    font-size: 1.125rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
    padding-bottom: 10px;
    line-height: 1.5
}

.index-product .index-product-item .index-product-info p {
    font-size: 1rem;
    color: #fff
}

.index-product .index-product-item:hover .index-product-overlay {
    opacity: 1;
    visibility: visible
}

.index-product .index-product-item:hover .index-product-info {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0)
}

/* 首页公司简介 */
.index-about {
    background: url(img/about_bg.jpg) center no-repeat;
    background-size: cover;
    overflow: hidden
}

.index-about .container-outer {
    display: flex;
    align-items: center
}

.index-about .index-about-left {
    max-width: 960px;
    padding-right: 4.375rem
}

.index-about .index-about-introduce {
    font-size: 1rem;
    color: #7e7e7e;
    line-height: 2rem;
    margin-top: 3.625rem;
    word-break: break-all;
    text-align: justify;
    text-justify: auto
}

.index-about .index-about-introduce span {
    font-size: 1.25rem;
    font-weight: bold;
    color: #333;
    margin-right: 5px
}

.index-about .view-more {
    margin-top: 2.5rem
}

.index-about .index-about-number {
    display: flex;
    margin-top: 3.125rem
}

.index-about .index-about-number li {
    margin-right: 13.75%
}

.index-about .index-about-number li:last-child {
    margin-right: 0
}

.index-about .index-about-number p {
    font-size: 1rem;
    margin-bottom: 5px;
    color: #7e7e7e
}

.index-about .index-about-number p:last-child {
    margin-bottom: 0
}

.index-about .index-about-number p > strong {
    font-size: 2.5rem;
    color: #0863c4;
    font-weight: bold
}

.index-about .index-about-number p > span {
    font-size: 1.125rem;
    margin-left: 5px
}

.index-about .index-about-right {
    width: 39.6875rem;
    flex-shrink: 0;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0, 0, 7, 0.08);
    overflow: hidden;
    border-radius: 30px 0;
}

.index-about .pic {
    position: relative
}

.index-about .pic img {
    height: 100%
}

/* 首页解决方案 */
.index-cases {
    overflow: hidden
}

.index-cases .index-cases-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem
}

.index-cases .index-cases-bottom {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.25rem
}

.index-cases .index-cases-item {
    border-radius: 0.75rem;
    overflow: hidden
}

.index-cases .index-cases-item a {
    display: block;
    position: relative
}

.index-cases .index-cases-item .index-cases-img {
    width: 100%;
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0, 0, 7, 0.08);
}

.index-cases .index-cases-item .index-cases-column {
    position: absolute;
    opacity: 1;
    top: 0;
    left: 0;
    height: 2.1875rem;
    text-align: center;
    line-height: 2.1875rem;
    padding: 0 20px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    background: #0863c4;
    border-radius: 0.625rem 0;
}

.index-cases .index-cases-item:hover .index-cases-column {
    opacity: 0
}

.index-cases .index-cases-item .index-cases-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8,99,196,0.8);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s
}

.index-cases .index-cases-item .index-cases-overlay h5 {
    font-size: 1.125rem;
    color: #fff;
    text-align: center;
    white-space: normal;
    line-height: 1.5;
    font-weight: 600;
}

.index-cases .index-cases-item .index-cases-title {
    text-align: center;
    padding-top: 5px;
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s
}

.index-cases .index-cases-item .index-cases-title h5 {
    font-size: 1.125rem;
    font-weight: bold;
    flex-wrap: wrap;
    white-space: inherit;
    overflow: hidden;
    text-align: center;
    margin-top: 1.5rem;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical
}

.index-cases .index-cases-item .index-cases-info {
    transform: translateY(30px);
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px)
}

.index-cases .index-cases-item:hover .index-cases-overlay {
    opacity: 1;
    visibility: visible
}

.index-cases .index-cases-item:hover .index-cases-info {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0)
}

.index-cases .index-cases-item:hover .index-cases-title {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px)
}

/* 首页合作伙伴 */
.index-partner {
    background: url(img/partner_bg.jpg) center no-repeat;
    background-size: cover;
    overflow: hidden
}

.index-partner .index-partner-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem
}

.index-partner .index-partner-bottom {
    display: grid;
    grid-template-rows: repeat(3,1fr);
    grid-template-columns: repeat(6,1fr);
    gap: 1.25rem
}

.index-partner .index-partner-item {
    background: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08)
}

.index-partner .index-partner-item a {
    display: flex;
    height: 100%;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: .5s
}

.index-partner .index-partner-item .index-partner-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding-top: 20px;
    background: rgba(8,99,196,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    transition: .5s;
    opacity: 0;
    visibility: hidden
}

.index-partner .index-partner-item:hover .index-partner-overlay {
    opacity: 1;
    visibility: visible;
    padding-top: 0
}

/* 首页新闻中心 */
.index-news {
    overflow: hidden
}

.index-news .index-news-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem
}

.index-news .index-news-bottom {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.25rem
}

.index-news .index-news-item {
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08)
}

.index-news .index-news-item .index-news-box {
    width: 100%;
    position: relative;
    overflow: hidden;
    background: rgba(8,99,196,0.8);
}

.index-news .index-news-item .pic {
    width: 100%;
    height: 100%;
    overflow: hidden
}

.index-news .index-news-item:hover .pic {
    opacity: 0.05
}

.index-news .index-news-item .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.index-news .index-news-item .index-news-info {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 5%
}

.index-news .index-news-item:hover .index-news-info {
    opacity: 0
}

.index-news .index-news-item .index-news-info .index-news-date01 {
    padding: 0 5%;
    color: #fff;
    font-size: 1rem;
    position: relative;
    display: flex;
    align-items: center
}

.index-news .index-news-item .index-news-info .index-news-date01 svg,.index-news .index-news-item .index-news-overlay .index-news-date02 svg {
    margin-right: 10px
}

.index-news .index-news-item .index-news-info .index-news-title01 {
    color: #fff;
    font-weight: bold;
    position: absolute;
    left: 0;
    bottom: 5rem;
    padding: 0 5%;
    font-size: 1.125rem;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.index-news .index-news-item .index-news-info .index-news-down01 {
    width: 100%;
    height: 3.75rem;
    border-top: 1px solid rgba(221,221,221,.6);
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 5%
}

.index-news .index-news-item .index-news-info .index-news-down01 .index-news-classify01 {
    color: #fff
}

.index-news .index-news-item .index-news-info .index-news-down01 .index-news-icon01 {
    width: 5rem;
    height: 100%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid rgba(221,221,221,.6)
}

.index-news .index-news-item .index-news-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 5%;
    z-index: 2;
    transition: .5s
}

.index-news .index-news-item:hover .index-news-overlay {
    top: 0
}

.index-news .index-news-item .index-news-overlay .index-news-date02 {
    padding: 0 5%;
    color: #fff;
    font-size: 1rem;
    position: relative;
    display: flex;
    align-items: center
}

.index-news .index-news-item .index-news-overlay .index-news-title02 {
    color: #fff;
    font-size: 1.125rem;
    font-weight: bold;
    padding: 0 5%;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 2.5rem 0 1.25rem 0
}

.index-news .index-news-item .index-news-overlay .index-news-description {
    color: #fff;
    font-size: 0.875rem;
    line-height: 2;
    padding: 0 5%;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical
}

.index-news .index-news-item .index-news-overlay .index-news-down02 {
    width: 100%;
    height: 3.75rem;
    border-top: 1px solid rgba(255,255,255,.2);
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 5%
}

.index-news .index-news-item .index-news-overlay .index-news-down02 .index-news-classify02 {
    color: #fff
}

.index-news .index-news-item .index-news-overlay .index-news-down02 .index-news-icon02 {
    width: 5rem;
    height: 100%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid rgba(255,255,255,.2)
}

/* 底部 */
.footer {
    background: #1c1c1c;
    padding-top: 4rem;
    color: #fff;
    position: relative
}

.footer .footer-top {
    display: flex;
    justify-content: space-between
}

.footer .footer-top .title {
    margin-bottom: 1.5rem
}

.footer .footer-top .title h3 {
    font-size: 1.125rem;
    color: #fff;
    margin-bottom: 1.5rem
}

.footer .footer-top .title i {
    display: block;
    width: 1.875rem;
    height: 2px;
    border-radius: 3px;
    background: rgba(255,255,255,1);
}

.footer .footer-nav .box {
    font-size: 1rem;
    line-height: 2.25rem;
    margin: 0 -.75rem;
    display: grid;
    grid-template-columns: repeat(3,1fr)
}

.footer .footer-nav .box a {
    padding: 0 .75rem;
    color: rgba(255,255,255,0.7)
}

.footer .footer-contact {
    overflow: hidden;
    position: relative
}

.footer .footer-contact .info {
    font-size: 1rem;
    line-height: 2.25rem;
    color: rgba(255,255,255,0.7)
}

.footer .footer-contact .info li {
    display: flex;
    align-items: center;
}

.footer .footer-contact .info li svg {
    margin-right: 0.5rem
}

.footer .footer-follow {
    position: relative
}

.footer .footer-follow .qr-code {
    display: flex;
    justify-content: space-between
}

.footer .footer-follow .ewm {
    text-align: center;
    margin-right: 1rem
}

.footer .footer-follow .ewm .pic {
    position: relative;
    width: 7.125rem;
    height: 7.125rem;
    border: 1px solid #525252;
    padding: 7px;
    border-radius: 5px;
}

.footer .footer-follow .ewm .pic img {
    border-radius: 5px;
}

.footer .footer-follow .ewm .qr-scan {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    pointer-events: none
}

.footer .footer-follow .ewm .qr-scan .box {
    height: 100%;
    width: 100%;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden
}

.footer .footer-follow .ewm .qr-scan .line {
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg,rgba(0,255,51,0) 43%,#0863c4 211%);
    border-bottom: 1px solid #0863c4;
    transform: translateY(-100%);
    animation: radar-beam 2s infinite;
    animation-timing-function: cubic-bezier(0.53,0,0.43,0.99);
    animation-delay: 1.4s
}

@keyframes radar-beam {
    0% {
        transform: translateY(-100%)
    }

    100% {
        transform: translateY(0)
    }
}

.footer .footer-follow .ewm p {
    font-size: .875rem;
    margin-top: .75rem
}

.footer .footer-bottom {
    clear: both;
    overflow: hidden;
    padding: 1.5rem 0;
    margin-top: 2.5rem;
    color: rgba(255,255,255,0.5);
    font-size: 0.875rem;
    border-top: 1px solid rgba(255,255,255,0.1)
}

.footer .footer-bottom .copyright {
    float: left
}

.footer .footer-bottom .beian {
    float: right
}

.footer .footer-bottom a {
    color: rgba(255,255,255,0.5)
}

.footer .footer-bottom .copyright a {
    margin-left: 5px
}

.footer .footer-bottom .beian i {
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle
}

.footer a:hover,.footer .footer-nav .box a:hover {
    color: #fff
}

/* 右侧浮动按钮 */
.float-btn {
    opacity: 0;
    visibility: hidden;
    transition: .5s;
    transform: translateY(30px);
    position: fixed;
    right: 10px;
    bottom: 10%;
    z-index: 999;
    -webkit-transition: .5s;
    border-radius: 2rem;
    padding: 1.25rem 0;
    mix-blend-mode: revert;
    background: #fff;
    box-shadow: 1px 1px 1px 2px rgb(0 0 0 / 7%)
}

.float-btn.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.float-btn .btn-item {
    width: 3.4375rem;
    height: 2.5rem;
    cursor: pointer;
    position: relative
}

.float-btn .btn-top {
    padding: 0;
    transition: .5s;
    overflow: hidden
}

.float-btn .btn-item span {
    display: flex;
    float: left;
    color: #777777;
    flex-direction: column;
    text-align: center;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 999;
    overflow: hidden;
    transition: .3s;
    -webkit-transition: .3s;
    flex-shrink: 0
}

.float-btn .btn-item:hover .float-icon svg path {
    stroke: #0863c4
}

.float-btn .show.share {
    position: absolute;
    background: #fff;
    width: 192px;
    padding: 1rem;
    border-radius: 3px;
    right: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    transition: .6s;
    -webkit-transition: .6s;
    opacity: 0;
    visibility: hidden
}

.float-btn .btn-item:hover .show.share {
    transition: .5s;
    -webkit-transition: .5s;
    opacity: 1;
    visibility: visible;
    right: 4.375rem
}

.float-btn .show.share:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-left: 10px solid #fff;
    position: absolute;
    right: -15px;
    top: 50%;
    margin-top: -10px
}

.float-btn .btn-item .show.info {
    position: absolute;
    background: #fff;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    border: 1px solid #e1e6f0;
    width: auto;
    min-height: 3.125rem;
    right: 4.375rem;
    padding: 1rem;
    top: 50%;
    transform: translateY(-50%);
    transition: .5s;
    -webkit-transition: .5s;
    opacity: 0;
    visibility: hidden;
    white-space: nowrap;
    border-radius: 0.75rem;
}

.float-btn .btn-item:hover .show.info {
    transition: .5s;
    -webkit-transition: .5s;
    opacity: 1;
    visibility: visible
}

.float-btn .btn-item .show.info:before {
    content: "";
    position: absolute;
    display: block;
    width: 6px;
    height: 6px;
    background: #fff;
    top: 50%;
    transform: translateY(-50%) rotate(135deg);
    right: -4px;
    border-color: #e1e6f0 transparent transparent #e1e6f0;
    border-style: solid;
    border-width: 1px
}

.float-btn .btn-item .show.info h5 {
    color: rgb(51,51,51);
    font-size: 12px;
    margin-bottom: 5px;
    opacity: 0.7;
    font-weight: normal
}

.float-btn .btn-item .show.info span {
    color: #333;
    font-size: 1.125rem;
    font-weight: bold;
    display: block;
    width: 100%;
    height: 100%;
    white-space: nowrap
}

.float-btn .btn-item.message .show.info h5 {
    color: #333;
    font-size: 14px;
    margin-bottom: 0;
    opacity: 0.8
}

.float-btn .btn-item .show .code {
    width: 6.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.float-btn .btn-item.code .show.info,.float-btn .btn-item.share .show.info {
    padding: 10px
}

.float-btn .btn-top.hide {
    height: 0;
    overflow: hidden;
    display: block !important
}

/* 栏目Banner */
.col-banner {
    position: relative;
    overflow: hidden
}

.col-banner .banner-img {
    width: 100%
}

.col-banner .banner-img .pic img {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    padding: 0;
    width: 100%;
    height: auto;
    border: none
}

.col-banner .text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    text-align: center
}

.col-banner .text .banner-line {
    width: 4.375rem;
    height: 3px;
    background: linear-gradient(90deg, #0863c4 40%, #34C759);
    margin: 0 auto;
    border-radius: 3px
}

.col-banner .text h3 {
    color: #fff;
    font-size: 2.375rem;
    font-weight: bold;
    letter-spacing: 3px;
    margin-bottom: 20px
}

.banner-path {
    position: relative;
    padding: 0;
    border-bottom: 1px solid rgb(229,229,229)
}

.banner-path .container-outer {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.banner-path .banner-nav {
    position: relative;
    flex-grow: 1
}

.banner-path .banner-nav li {
    display: block;
    font-size: 1rem;
    float: left;
    line-height: 4.25rem;
    margin-right: 2.5rem;
    z-index: 1;
    position: relative
}

.banner-path .banner-nav li a {
    display: block;
    color: #333
}

.banner-path .banner-nav li.active a {
    color: #0863c4;
    font-weight: bold
}

.banner-path .banner-nav li:after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    transition: .5s;
    background: #0863c4;
    position: absolute;
    right: 0;
    bottom: 0
}

.banner-path .banner-nav li.active:after {
    width: 100%;
    left: 0;
    right: auto
}

.banner-path .banner-nav li:hover:after {
    width: 100%;
    left: 0;
    right: auto
}

.banner-path .position {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

.banner-path .position .fa-house-chimney {
    color: #0863c4;
    margin-right: 5px
}

.banner-path .position a {
    color: #848692;
    line-height: 4.25rem
}

.banner-path .position a:hover {
    color: #0863c4
}

.banner-path .position .icon-rArrow {
    margin: 0 0.3125rem;
    color: #848692;
    font-size: 10px;
    vertical-align: middle
}

/* 产品列表 */
.product-list {
    overflow: visible;
}

.product-list .container-outer {
    display: flex;
    gap: 1.875rem
}

.product-list .product-list-left {
    flex: 0 0 16.25rem;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08);
    padding: 1.5625rem 0.9375rem;
    height: fit-content;
    top: 6.5rem;
    position: sticky;
    max-height: 90vh;
    overflow-y: auto
}

.product-list .product-list-left .title {
    margin: 0 0.9375rem 1.5625rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.product-list .product-list-left .title h2 {
    font-size: 1.25rem;
    font-weight: 600;
}

.product-list .product-list-left .category-list li h4 {
    font-size: 1rem;
    padding: 1rem 0 1rem 1.875rem;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.product-list .product-list-left .category-list li h4 a {
    color: #333333;
    font-size: 1rem;
}

.product-list .product-list-left .category-list li h4::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.9375rem;
    margin: auto;
    width: 3px;
    height: 0.9375rem;
    background-color: #e5e5e5;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.product-list .product-list-left .category-list li h4::after {
    content: '';
    border: 4px solid transparent;
    border-top: 4px solid #888;
    border-bottom: none;
    position: absolute;
    width: 0;
    height: 0;
    right: 0.9375rem;
    top: 0;
    bottom: 0;
    margin: auto;
    -webkit-transform: rotateZ(-90deg);
    -moz-transform: rotateZ(-90deg);
    -ms-transform: rotateZ(-90deg);
    -o-transform: rotateZ(-90deg);
    transform: rotateZ(-90deg);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.product-list .product-list-left .category-list li.active h4 a,.product-list .product-list-left .category-list li h4:hover a {
    color: #0863c4;
}

.product-list .product-list-left .category-list li.active h4::before,.product-list .product-list-left .category-list li h4:hover::before {
    background-color: #0863c4;
}

.product-list .product-list-left .category-list li.active h4::after,.product-list .product-list-left .category-list li h4:hover::after {
    border-top-color: #0863c4;
}

.product-list .product-list-left .category-list li.active h4::after {
    -webkit-transform: rotateZ(0);
    -moz-transform: rotateZ(0);
    -ms-transform: rotateZ(0);
    -o-transform: rotateZ(0);
    transform: rotateZ(0);
}

.product-list .product-list-left .category-list li .pro-second {
    display: none;
    padding: 0 0 1.5rem 0.9375rem;
    margin: 0 1.875rem;
    border-bottom: 1px dashed #dcdcdc;
}

.product-list .product-list-left .category-list li .pro-second h6 {
    padding: 0.4rem 0;
}

.product-list .product-list-left .category-list li .pro-second .pro-third {
    padding: 0.4rem 0;
    margin: 0 1.25rem;
}

.product-list .product-list-left .category-list li .pro-second h6 a,.product-list .product-list-left .category-list li .pro-second .pro-third a {
    font-size: 0.875rem;
    color: #999999;
    font-weight: normal;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    position: relative;
    display: block;
    padding-left: 0.75rem;
}

.product-list .product-list-left .category-list li .pro-second h6 a::before,.product-list .product-list-left .category-list li .pro-second .pro-third a::before {
    content: '';
    width: 8px;
    height: 2px;
    background: #666;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.product-list .product-list-left .category-list li .pro-second h6.active a,.product-list .product-list-left .category-list li .pro-second h6 a:hover,.product-list .product-list-left .category-list li .pro-second .pro-third.active a,.product-list .product-list-left .category-list li .pro-second .pro-third a:hover {
    color: #0863c4;
}

.product-list .product-list-left .category-list li .pro-second h6.active a::before,.product-list .product-list-left .category-list li .pro-second h6 a:hover::before,.product-list .product-list-left .category-list li .pro-second .pro-third.active a::before,.product-list .product-list-left .category-list li .pro-second .pro-third a:hover::before {
    background: #0863c4;
}

.product-list .product-list-right {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.25rem
}

.product-list .product-list-right .product-item {
    background: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08);
    transition: all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
    position: relative;
    height: fit-content
}

.product-list .product-list-right .product-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg,#0863c4,#42a5f5);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    z-index: 2
}

.product-list .product-list-right .product-item:hover::before {
    transform: scaleX(1)
}

.product-list .product-list-right .product-item .product-image {
    position: relative;
    overflow: hidden;
    transition: transform 0.5s ease
}

.product-list .product-list-right .product-item .product-image .pic {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.5s ease
}

.product-list .product-list-right .product-item .product-info {
    padding: 1.5rem;
    position: relative
}

.product-list .product-list-right .product-item .product-info .product-category {
    display: inline-block;
    background: rgba(59,130,246,0.1);
    color: #0863c4;
    padding: 0.4rem 0.8rem;
    border-radius: 2.5rem;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease
}

.product-list .product-list-right .product-item .product-info .product-title {
    font-size: 1.125rem;
    color: #333333;
    margin-bottom: 0.75rem;
    font-weight: 600;
    transition: color 0.3s ease;
    line-height: 1.4
}

.product-list .product-list-right .product-item .product-info .product-description {
    color: #888888;
    font-size: 0.875rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.product-list .product-list-right .product-item:hover .product-image .pic {
    transform: scale(1.08)
}

.product-list .product-list-right .product-item:hover .product-info .product-title {
    color: #0863c4
}

/* 分页 */
.page ul.pagination {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding-top: 3.75rem
}

.page ul.pagination li a,.page ul.pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.8125rem;
    height: 2.8125rem;
    padding: 0 1rem;
    border-radius: 2rem;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer
}

.page ul.pagination li a {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);
    color: #0863c4;
    border: 1px solid rgb(229,229,229)
}

.page ul.pagination li.active span {
    background: #0863c4;
    color: #fff
}

.page ul.pagination li.disabled span {
    color: #94a3b8;
    border: 1px solid rgb(229,229,229);
    cursor: not-allowed;
    opacity: 0.6
}

.page ul.pagination li a:hover {
    background: #0863c4;
    color: #fff;
    border: 1px solid #0863c4
}

/* 产品详情 */
.product-detail {
    overflow: visible
}

.product-detail .container-outer {
    display: flex;
    align-items: flex-start
}

.product-detail .product-detail-box {
    flex-grow: 1
}

.product-detail .product-detail-top {
    display: flex;
    flex-wrap: wrap;
    gap: 5rem
}

.product-detail .product-detail-top .product-detail-slide {
    flex: 1 1 50%;
    min-width: 300px;
    max-width: 46rem;
    position: relative;
    width: 100%;
    border-radius: 0.75rem;
    overflow: hidden
}

.product-detail .product-detail-top .product-detail-swiper {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%
}

.product-detail .product-detail-top .product-detail-swiper .pic {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%
}

.product-detail .product-detail-top .product-detail-swiper .swiper-button-next,.product-detail .product-detail-top .product-detail-swiper .swiper-button-prev {
    left: auto;
    right: 0;
    top: auto;
    bottom: 0;
    margin: auto;
    width: 90px;
    height: 60px;
    z-index: 10
}

.product-detail .product-detail-top .product-detail-swiper .swiper-button-next::after,.product-detail .product-detail-top .product-detail-swiper .swiper-button-prev::after {
    display: none
}

.product-detail .product-detail-top .product-detail-swiper .swiper-button-next {
    color: #fff;
    background: rgba(0,0,0,.3)
}

.product-detail .product-detail-top .product-detail-swiper .swiper-button-prev {
    color: #fff;
    right: 91px;
    background: rgba(0,0,0,.3)
}

.product-detail .product-detail-top .product-detail-swiper .swiper-button-next:hover {
    background: #0863c4
}

.product-detail .product-detail-top .product-detail-swiper .swiper-button-prev:hover {
    background: #0863c4
}

.product-detail .product-detail-top .product-detail-info {
    flex: 1 1 40%;
    min-width: 300px;
    width: 100%
}

.product-detail .product-detail-top .product-detail-info {
    padding: 2% 0;
    overflow: hidden
}

.product-detail .product-detail-top .product-detail-info h3 {
    font-size: 1.5rem;
    font-weight: 600;
    padding-bottom: 1.25rem
}

.product-detail .product-detail-top .product-detail-info h4 {
    font-size: 1.125rem;
    font-weight: normal;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgb(111 111 111 / 20%)
}

.product-detail .product-detail-top .product-detail-info .product-text {
    color: #8d8d8d;
    font-size: 1rem;
    line-height: 1.75rem;
    padding: 1.875rem 0;
    overflow: hidden;
    text-align: justify
}

.product-detail .product-detail-top .product-detail-info .product-text p {
    line-height: 2.5rem;
}

.product-detail .product-detail-top .product-detail-info .view-more svg {
    margin-left: 0;
    margin-right: 8px;
}

.product-detail .product-detail-bottom {
    padding-top: 3.75rem
}

.product-detail .product-detail-bottom .product-detail-tabs {
    display: flex;
    background: #f2f2f2;
    border-radius: 0.75rem
}

.product-detail .product-detail-bottom .product-detail-tabs .tab {
    padding: 1.25rem 1.875rem;
    margin-left: 1.25rem;
    font-size: 1rem;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    color: #555
}

.product-detail .product-detail-bottom .product-detail-tabs .tab.active {
    color: #0863c4;
    font-weight: bold
}

.product-detail .product-detail-bottom .product-detail-tabs .tab:after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    transition: .5s;
    background: #0863c4;
    position: absolute;
    right: 0;
    bottom: 0
}

.product-detail .product-detail-bottom .product-detail-tabs .tab.active:after {
    width: 100%;
    left: 0;
    right: auto
}

.product-detail .product-detail-bottom .content-section {
    padding-top: 3.5rem
}

.product-detail .product-detail-bottom .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 2.25rem;
    font-size: 1.25rem;
    color: #333
}

.product-detail .product-detail-bottom .section-title i {
    display: inline-block;
    width: 4px;
    height: 22px;
    background: #0863c4;
    margin-right: 1.125rem
}

.product-detail .product-detail-bottom .section-content {
    color: rgba(0,0,0,0.6);
    line-height: 2;
    font-size: 1rem
}

.product-detail .product-detail-bottom .section-content .dot {
    display: block;
    position: relative;
    padding: 0.375rem 0 0.375rem 1.25rem
}

.product-detail .product-detail-bottom .section-content .dot::before {
    content: '✦';
    position: absolute;
    left: 0;
    color: #0863c4;
    font-weight: bold
}

.product-detail .product-detail-bottom .section-content strong {
    color: rgba(0,0,0,0.9)
}

.product-detail .product-detail-bottom .table-bordered {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    font-size: 1rem
}

.product-detail .product-detail-bottom .table-bordered td {
    padding: 0.9375rem;
    text-align: left;
    border: 1px solid #dee2e6;
    vertical-align: top
}

.product-detail .product-detail-bottom .table-bordered td:first-child {
    font-weight: 600;
    color: #343434;
    background-color: #f8f9fa;
    width: 20%
}

.product-detail .product-detail-bottom .table-bordered tr:nth-child(even) td:first-child {
    background-color: #f1f3f5
}

.product-detail .product-detail-bottom .table-bordered br {
    display: none
}

.product-detail .product-detail-bottom .section-content .notes {
    margin-bottom: 1.25rem
}

.product-detail .product-detail-bottom .section-content .download-list {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.25rem
}

.product-detail .product-detail-bottom .section-content .download-list .download-item {
    position: relative;
    overflow: hidden;
    min-width: 250px;
    background: #fff;
    border-radius: 0.75rem;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08)
}

.product-detail .product-detail-bottom .section-content .download-list .download-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg,#0863c4,#42a5f5);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    z-index: 2
}

.product-detail .product-detail-bottom .section-content .download-list .download-item:hover::before {
    transform: scaleX(1);
}

.product-detail .product-detail-bottom .section-content .download-list .download-item .download-icon {
    width: 50px;
    height: 50px;
    background: #0863c4;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem
}

.product-detail .product-detail-bottom .section-content .download-list .download-item .download-info h4 {
    margin-bottom: 5px;
    color: #343a40
}

.product-detail .product-detail-bottom .section-content .download-list .download-item .download-info p {
    color: #6c757d;
    font-size: 0.9rem
}

/* 客户留言 */
.message-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease
}

.message-overlay.active {
    opacity: 1;
    pointer-events: all
}

.message-overlay .message-box {
    background: #fff;
    width: 90%;
    max-width: 600px;
    border-radius: 0.75rem;
    padding: 3.125rem;
    position: relative;
    transform: translateY(50px);
    transition: transform 0.4s ease;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5)
}

.message-overlay.active .message-box {
    transform: translateY(0)
}

.message-overlay .message-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.125rem;
    cursor: pointer;
    color: #888;
    transition: all 0.3s ease;
    z-index: 10
}

.message-overlay .message-close-btn:hover {
    transform: rotate(90deg)
}

.message-overlay .message-close-btn:hover path {
    stroke: #0863c4
}

.message-overlay .message-title {
    color: #333333;
    font-size: 1.375rem;
    margin-bottom: 1.875rem;
    text-align: center;
    font-weight: 600
}

.message-overlay .form-group {
    margin-bottom: 1.5625rem;
    position: relative
}

.message-overlay .form-group svg {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #0863c4;
    font-size: 1.2rem
}

.message-overlay .form-group.textarea-icon svg {
    top: 25%
}

.message-overlay .form-group input,.message-overlay .form-group textarea {
    width: 100%;
    padding: 0.9375rem 1.25rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.75rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #f9f9f9;
    color: #333
}

.message-overlay .form-group.has-icon input,.message-overlay .form-group.has-icon textarea {
    padding-left: 2.8125rem
}

.message-overlay .form-group .required-star {
    color: #e74c3c;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 1.2rem
}

.message-overlay .form-group .captcha-container {
    display: flex;
    gap: 10px;
    align-items: center
}

.message-overlay .form-group .captcha-container .captcha-img {
    flex: 1;
    background: #f0f0f0;
    height: 3.125rem;
    border-radius: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 1px solid #ddd
}

.message-overlay .form-group .captcha-container .captcha-img img {
    width: 100%;
    height: 100%;
    border-radius: 0.75rem;
    object-fit: cover
}

.message-overlay .form-group .captcha-container .captcha-input {
    flex: 2
}

.message-overlay .message-submit-btn {
    background: #0863c4;
    color: #fff;
    border: none;
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
    font-weight: 500;
    text-align: center
}

.message-overlay .message-submit-btn:hover {
    background: #34C759
}

/* 资料下载 */
.download-detail .download-detail-top {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem
}

.download-detail .download-detail-top .download-search-input {
    flex: 1;
    min-width: 250px;
    position: relative
}

.download-detail .download-detail-top .download-search-input input {
    width: 100%;
    padding: 1rem 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    font-size: 1rem;
    transition: all 0.3s
}

.download-detail .download-detail-top .search-category {
    flex: 1;
    min-width: 280px;
    position: relative
}

.download-detail .download-detail-top .search-category .category-select {
    width: 100%;
    padding: 0.9375rem 2.875rem 0.9375rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background-color: #fff;
    font-size: 1rem;
    color: #666666;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 1rem
}

.download-detail .download-detail-top .search-category .category-select .level1 {
    font-weight: 600;
    color: #0f172a;
    padding: 5px 0
}

.download-detail .download-detail-top .search-category .category-select .level2 {
    font-weight: 500;
    color: #64748b;
    padding: 4px 0 4px 15px
}

.download-detail .download-detail-top .search-category .category-select .level3 {
    font-weight: 400;
    color: #64748b;
    padding: 3px 0 3px 30px;
    font-size: 0.95rem
}

.download-detail .download-detail-top .download-search-btn {
    background: #0863c4;
    color: #fff;
    border: none;
    padding: 1rem 2rem;
    border-radius: 2rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    gap: 0.625rem
}

.download-detail .download-detail-top .download-search-btn:hover {
    background: #34C759
}

.download-detail .download-detail-bottom {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.25rem
}

.download-detail .download-detail-bottom .download-item {
    background: #ffffff;
    border-radius: 0.75rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08);
    transition: transform 0.3s,box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer
}

.download-detail .download-detail-bottom .download-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg,#0863c4,#42a5f5);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    z-index: 2
}

.download-detail .download-detail-bottom .download-item:hover::before {
    transform: scaleX(1)
}

.download-detail .download-detail-bottom .download-item .download-item-top {
    padding: 20px 20px 15px;
    border-bottom: 1px solid #e2e8f0
}

.download-detail .download-detail-bottom .download-item .download-type {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-radius: 2.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    background: rgba(59,130,246,0.1);
    color: #0863c4
}

.download-detail .download-detail-bottom .download-item .download-name {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 10px;
    color: #333333;
    height: 3.125rem
}

.download-detail .download-detail-bottom .download-item .download-category {
    color: #888888;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 5px
}

.download-detail .download-detail-bottom .download-item .download-item-bottom {
    padding: 15px 20px;
    flex-grow: 1
}

.download-detail .download-detail-bottom .download-item .meta-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: #888888
}

.download-detail .download-detail-bottom .download-item .meta-item {
    display: flex;
    align-items: center;
    gap: 5px
}

.download-detail .download-detail-bottom .download-item .version-badge {
    background: #34C759;
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500
}

.download-detail .download-detail-bottom .download-item .download-button {
    padding: 0 20px 20px
}

.download-detail .download-detail-bottom .download-item .download-btn {
    width: 100%;
    background: #0863c4;
    color: #fff;
    text-align: center;
    padding: 0.625rem;
    border-radius: 2rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px
}

.download-detail .download-detail-bottom .download-item:hover .download-btn {
    background: #34C759
}

.no-results {
    text-align: center;
    padding: 5rem 1.25rem;
    background: #fff;
    border-radius: 0.75rem;
    grid-column: 1 / -1;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08)
}

.no-results-icon {
    margin-bottom: 1.5rem
}

.no-results-text {
    font-size: 1.25rem;
    color: #999999
}

/* 常见问题 */
.faq-detail .faq-detail-top {
    background: #fff;
    border-radius: 0.75rem;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08)
}

.faq-detail .faq-detail-top .faq-search-box {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap
}

.faq-detail .faq-detail-top .faq-search-box .results-count {
    flex: 1;
    font-size: 1rem;
    font-weight: 500;
    color: #343a40;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px
}

.faq-detail .faq-detail-top .faq-search-box .results-count .icon-faqCount {
    color: #0863c4;
    font-size: 1.125rem;
    margin-right: 0.5rem
}

.faq-detail .faq-detail-top .faq-search-box .results-count .number {
    color: #0863c4;
    font-size: 1.125rem;
    font-weight: bold
}

.faq-detail .faq-detail-top .faq-search-box .faq-search-group {
    flex: 1;
    min-width: 300px;
    position: relative
}

.faq-detail .faq-detail-top .faq-search-box .search-input {
    width: 100%;
    padding: 1rem 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    font-size: 1rem
}

.faq-detail .faq-detail-top .faq-search-box .faq-search-group .icon-search {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 1.125rem
}

.faq-detail .faq-detail-top .faq-search-box .faq-search-btn {
    background: #0863c4;
    color: #fff;
    border: none;
    padding: 1rem 2rem;
    border-radius: 2rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    gap: 0.625rem
}

.faq-detail .faq-detail-top .faq-search-box .faq-search-btn:hover {
    background: #34C759
}

.faq-detail .faq-detail-bottom {
    display: flex;
    flex-direction: column;
    gap: 1.25rem
}

.faq-detail .faq-detail-bottom .faq-item {
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.3s
}

.faq-detail .faq-detail-bottom .faq-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 0;
    background: linear-gradient(180deg,#0863c4,#42a5f5);
    transition: all 0.4s ease;
    z-index: 2
}

.faq-detail .faq-detail-bottom .faq-item:hover::before,.faq-detail .faq-detail-bottom .faq-item.active::before {
    height: 100%;
    top: 0;
    transform: translateY(0)
}

.faq-detail .faq-detail-bottom .faq-question {
    padding: 2rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    transition: all 0.3s
}

.faq-detail .faq-detail-bottom .faq-question h3 {
    font-size: 1.125rem;
    font-weight: 500;
    color: #333333;
    margin: 0;
    flex: 1
}

.faq-detail .faq-detail-bottom .faq-item .faq-toggle {
    width: 1.75rem;
    height: 1.75rem;
    background: #0863c4;
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 1rem;
    transition: all 0.3s
}

.faq-detail .faq-detail-bottom .faq-item .faq-toggle .icon-plus,.faq-detail .faq-detail-bottom .faq-item .faq-toggle .icon-minus {
    transition: all 0.3s ease
}

.faq-detail .faq-detail-bottom .faq-item .faq-toggle .icon-minus {
    display: none
}

.faq-detail .faq-detail-bottom .faq-item.active .faq-toggle .icon-plus {
    display: none
}

.faq-detail .faq-detail-bottom .faq-item.active .faq-toggle .icon-minus {
    display: block
}

.faq-detail .faq-detail-bottom .faq-item:hover .faq-toggle,.faq-detail .faq-detail-bottom .faq-item.active .faq-toggle {
    background: #34C759
}

.faq-detail .faq-detail-bottom .faq-answer {
    overflow: hidden;
    transition: height 0.3s ease;
    height: 0;
    background: #f8f9fa
}

.faq-detail .faq-detail-bottom .faq-content {
    color: #6b7280;
    line-height: 1.7;
    padding: 2rem;
    font-size: 1rem
}

.faq-detail .faq-detail-bottom .faq-item.active .faq-answer {
    height: auto
}

/* 质保查询 */
.qa-detail .qa-detail-top {
    background: #fff;
    backdrop-filter: blur(10px);
    border-radius: 0.75rem;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08);
    text-align: center;
    transition: all 0.3s ease
}

.qa-detail .qa-detail-top .search-box {
    display: flex;
    max-width: 600px;
    margin: 0 auto;
    gap: 1.25rem;
}

.qa-detail .qa-detail-top .search-box .search-input {
    flex: 1;
    padding: 1rem 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s
}

.qa-detail .qa-detail-top .search-box .qa-search-btn {
    padding: 1rem 2rem;
    background: #0863c4;
    color: #fff;
    border: none;
    border-radius: 2rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
}

.qa-detail .qa-detail-top .search-box .qa-search-btn:hover {
    background: #34C759
}

.qa-detail .qa-detail-bottom {
    background: #fff;
    backdrop-filter: blur(10px);
    border-radius: 0.75rem;
    padding: 3rem;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08)
}

.qa-detail .qa-detail-bottom .result-box {
    display: flex;
    gap: 1.875rem
}

.qa-detail .qa-detail-bottom .result-image-container {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.qa-detail .qa-detail-bottom .result-image-container .result-image {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 0.75rem;
    object-fit: cover;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08)
}

.qa-detail .qa-detail-bottom .result-info {
    flex: 1
}

.qa-detail .qa-detail-bottom .result-info .result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.625rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.1)
}

.qa-detail .qa-detail-bottom .result-info .result-title h2 {
    font-size: 1.75rem;
    color: #333333;
    font-weight: bold;
    margin-bottom: 0.5rem
}

.qa-detail .qa-detail-bottom .result-info .result-title p {
    color: #6c757d;
    font-size: 1.125rem
}

.qa-detail .qa-detail-bottom .result-info .warranty-badge {
    padding: 8px 15px;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 14px
}

.qa-detail .qa-detail-bottom .result-info .warranty-badge.warranty-active {
    background: #e3f5ef;
    color: #34C759
}

.qa-detail .qa-detail-bottom .result-info .warranty-badge.warranty-expired {
    background: #fde8e8;
    color: #e74c3c
}

.qa-detail .qa-detail-bottom .result-info .result-details {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 1.25rem
}

.qa-detail .qa-detail-bottom .result-info .detail-item {
    background: #f8f9fa;
    padding: 1.25rem;
    border-radius: 0.75rem
}

.qa-detail .qa-detail-bottom .result-info .detail-item h4 {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 1px
}

.qa-detail .qa-detail-bottom .result-info .detail-item p {
    font-size: 1.125rem;
    color: #212529;
    font-weight: 500
}

.qa-detail .qa-detail-bottom .result-info .detail-item .remaining-time {
    color: #0863c4;
    font-size: 1.25rem;
    font-weight: 600
}

/* 服务策略 */
.service-detail .service-detail-box {
    overflow: hidden;
    background-color: #FFFFFF;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08);
    border-radius: 0.75rem
}

.service-detail .service-detail-box .intro {
    font-size: 1rem;
    margin-bottom: 2.5rem;
    padding: 1.25rem;
    background-color: #f8f9fa;
    border-left: 4px solid #0863c4;
    border-radius: 0 8px 8px 0;
    color: #555;
    line-height: 1.7
}

.service-detail .service-detail-box .section {
    margin-bottom: 2.5rem
}

.service-detail .service-detail-box .section p {
    font-size: 1rem;
    line-height: 1.7
}

.service-detail .service-detail-box .section:last-child {
    margin-bottom: 0
}

.service-detail .service-detail-box .section .section-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    padding-bottom: 0.9375rem;
    border-bottom: 2px solid #eaecef;
    position: relative
}

.service-detail .service-detail-box .section .section-title::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: #0863c4
}

.service-detail .service-detail-box .section .points {
    list-style-type: none;
    padding-left: 5px;
    font-size: 1rem
}

.service-detail .service-detail-box .section .points li {
    margin-bottom: 0.75rem;
    padding-left: 1.5625rem;
    position: relative;
    color: #444;
    line-height: 1.7
}

.service-detail .service-detail-box .section .points li::before {
    content: "•";
    color: #0863c4;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    font-size: 18px
}

.service-detail .service-detail-box .section .highlight {
    background: linear-gradient(120deg,rgba(52,199,89,0.15) 0%,rgba(52,199,89,0.15) 100%);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500
}

.service-detail .service-detail-box .section .contact-info {
    background-color: #f8f9fa;
    padding: 15px 20px;
    border-radius: 8px;
    margin: 20px 0;
    border-left: 4px solid #0863c4
}

/* 合作伙伴 */
.partner-detail .partner-detail-list {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 1.25rem
}

.partner-detail .partner-detail-item {
    background: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08)
}

.partner-detail .partner-detail-item a {
    display: flex;
    height: 100%;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: .5s
}

.partner-detail .partner-detail-item .mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding-top: 20px;
    background: rgba(8,99,196,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    transition: .5s;
    opacity: 0;
    visibility: hidden
}

.partner-detail .partner-detail-item:hover .mask {
    opacity: 1;
    visibility: visible;
    padding-top: 0
}

/* 解决方案列表 */
.cases-list .cases-list-box {
    display: flex;
    align-items: flex-start;
    gap: 1.875rem
}

.cases-list .cases-list-left {
    flex: 1
}

.cases-list .cases-list-left ul {
    display: flex;
    flex-direction: column;
    gap: 1.25rem
}

.cases-list .cases-list-left .cases-item {
    padding: 1.25rem;
    background: #fff;
    border-radius: 0.75rem;
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08)
}

.cases-list .cases-list-left .cases-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 0;
    background: linear-gradient(180deg,#0863c4,#42a5f5);
    transition: all 0.4s ease;
    z-index: 2
}

.cases-list .cases-list-left .cases-item .cases-img {
    width: 30%;
    flex-shrink: 0;
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative
}

.cases-list .cases-list-left .cases-item .cases-img .pic {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.5s ease
}

.cases-list .cases-list-left .cases-item:hover .cases-img .pic {
    transform: scale(1.08)
}

.cases-list .cases-list-left .cases-item .cases-content {
    width: 70%;
    padding: 1.25rem 0
}

.cases-list .cases-list-left .cases-item .cases-content .cases-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    line-height: 1.4;
    transition: all 0.3s ease
}

.cases-list .cases-list-left .cases-item .cases-content .cases-desc {
    font-size: 1rem;
    color: #888888;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.cases-list .cases-list-left .cases-item .cases-content .cases-meta {
    display: flex;
    justify-content: space-between;
    color: #888888;
    font-size: 0.9rem
}

.cases-list .cases-list-left .cases-item .cases-content .cases-meta .cases-time {
    display: flex;
    align-items: center;
    gap: 5px
}

.cases-list .cases-list-left .cases-item .cases-content .cases-meta .cases-button {
    font-size: 0.875rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px
}

.cases-list .cases-list-left .cases-item:hover::before {
    height: 100%;
    top: 0;
    transform: translateY(0)
}

.cases-list .cases-list-left .cases-item:hover .cases-content .cases-title {
    color: #0863c4
}

/* 最新内容 */
.latest-right {
    flex: 0 0 22.5rem;
    position: sticky;
    top: 6.5rem
}

.latest-right .latest-box {
    border-radius: 0.75rem;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0, 0, 7, 0.08);
}

.latest-right .latest-box .index-mod-title {
    padding: 30px 20px 20px;
    border-bottom: 1px solid #e5e5e5
}

.latest-right .latest-box .index-mod-title .lines {
    height: 1.875rem
}

.latest-right .latest-box .index-mod-title .lines .line1,.latest-right .latest-box .index-mod-title .lines .line2 {
    width: 5px
}

.latest-right .latest-box .index-mod-title .lines .latest-title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    margin-left: 0.75rem
}

.latest-right .latest-box ul li {
    padding: 1.25rem;
    border-bottom: 1px solid #e5e5e5
}

.latest-right .latest-box ul li:last-child {
    border-bottom: none
}

.latest-right .latest-box ul li .latest-img {
    border-radius: .625rem;
    margin-bottom: .875rem;
    overflow: hidden
}

.latest-right .latest-box ul li:hover .latest-img .pic {
    transform: scale(1.08);
}

.latest-right .latest-box ul li:hover .latest-tit {
    color: #0863c4
}

.latest-right .latest-box ul li .latest-tit {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
    height: auto;
    overflow: hidden;
    margin-bottom: .75rem
}

.latest-right .latest-box ul li .latest-text {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.latest-right .latest-box ul li .latest-text span {
    font-size: 0.875rem;
    color: #888888;
    display: flex;
    align-items: center;
    gap: 5px;
}

.latest-right .latest-box ul li .latest-text span.latest-view-icon {
    gap: 1px;
}

/* 解决方案详情 */
.cases-detail:after {
    content: "";
    display: table;
    clear: both
}

.cases-detail .cases-detail-box {
    display: flex;
    align-items: flex-start;
    gap: 1.875rem
}

.cases-detail .cases-detail-left {
    flex: 1;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0, 0, 7, 0.08);
    border-radius: 0.75rem;
    padding: 60px
}

.cases-detail .cases-detail-left .cases-detail-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem
}

.cases-detail .cases-detail-left .cases-detail-text {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 2.375rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center
}

.cases-detail .cases-detail-left .cases-detail-text span {
    font-size: 0.9375rem;
    color: #999999;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cases-detail .cases-detail-left .cases-detail-text .social-share {
    display: inline-block
}

.cases-detail .cases-detail-left .cases-detail-text .social-share .social-share-icon {
    width: 24px;
    height: 24px;
    font-size: 12px;
    line-height: 24px
}

.cases-detail .cases-detail-left .cases-detail-text .social-share .social-share-icon svg {
    width: 16px;
    height: 16px;
}

.cases-detail .cases-detail-left .cases-detail-text .social-share .icon-wechat .wechat-qrcode {
    left: -88px
}

.cases-detail .cases-detail-left .cases-detail-main {
    font-size: 1rem;
    color: #666666;
    line-height: 1.875rem;
    text-align: justify;
    padding-bottom: 60px;
    border-bottom: 1px solid #e5e5e5
}

.cases-detail .cases-detail-left .cases-detail-main p {
    font-size: 1rem;
    color: #666666;
    line-height: 1.875rem;
    padding-bottom: 1.25rem;
}

.cases-detail .cases-detail-left .cases-detail-page {
    margin-top: 1.875rem;
    display: flex;
    justify-content: space-between
}

.cases-detail .cases-detail-left .cases-detail-page a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-radius: 30px;
    border: 1px solid #ddd;
    color: #666;
    text-decoration: none;
    transition: all 0.3s;
    max-width: 45%
}

.cases-detail .cases-detail-left .cases-detail-page a.prev span,.cases-detail .cases-detail-left .cases-detail-page a.prev span svg {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.75rem;
}

.cases-detail .cases-detail-left .cases-detail-page a.next span,.cases-detail .cases-detail-left .cases-detail-page a.next span svg {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0.75rem;
}

.cases-detail .cases-detail-left .cases-detail-page a:hover {
    background: #0863c4;
    color: #fff;
    border-color: #0863c4
}

.cases-detail .cases-detail-left .cases-detail-page a:hover svg > path {
    stroke: #FFFFFF;
}

/* 新闻中心列表 */
.news-list .news-list-box {
    display: flex;
    align-items: flex-start;
    gap: 1.875rem
}

.news-list .news-list-left {
    flex: 1
}

.news-list .news-list-left ul {
    display: flex;
    flex-direction: column;
    gap: 1.25rem
}

.news-list .news-list-left .news-item {
    padding: 1.25rem;
    background: #fff;
    border-radius: 0.75rem;
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08)
}

.news-list .news-list-left .news-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 0;
    background: linear-gradient(180deg,#0863c4,#42a5f5);
    transition: all 0.4s ease;
    z-index: 2
}

.news-list .news-list-left .news-item .news-img {
    width: 30%;
    flex-shrink: 0;
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative
}

.news-list .news-list-left .news-item .news-img .pic {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.5s ease
}

.news-list .news-list-left .news-item:hover .news-img .pic {
    transform: scale(1.08)
}

.news-list .news-list-left .news-item .news-content {
    width: 70%;
    padding: 1.25rem 0
}

.news-list .news-list-left .news-item .news-content .news-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    line-height: 1.4;
    transition: all 0.3s ease
}

.news-list .news-list-left .news-item .news-content .news-desc {
    font-size: 1rem;
    color: #888888;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.news-list .news-list-left .news-item .news-content .news-meta {
    display: flex;
    justify-content: space-between;
    color: #888888;
    font-size: 0.9rem
}

.news-list .news-list-left .news-item .news-content .news-meta .news-time {
    display: flex;
    align-items: center;
    gap: 5px
}

.news-list .news-list-left .news-item .news-content .news-meta .news-button {
    font-size: 0.875rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px
}

.news-list .news-list-left .news-item:hover::before {
    height: 100%;
    top: 0;
    transform: translateY(0)
}

.news-list .news-list-left .news-item:hover .news-content .news-title {
    color: #0863c4
}

/* 新闻中心详情 */
.news-detail:after {
    content: "";
    display: table;
    clear: both
}

.news-detail .news-detail-box {
    display: flex;
    align-items: flex-start;
    gap: 1.875rem
}

.news-detail .news-detail-left {
    flex: 1;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0, 0, 7, 0.08);
    border-radius: 0.75rem;
    padding: 60px
}

.news-detail .news-detail-left .news-detail-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem
}

.news-detail .news-detail-left .news-detail-text {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 2.375rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center
}

.news-detail .news-detail-left .news-detail-text span {
    font-size: 0.9375rem;
    color: #999999;
    display: flex;
    align-items: center;
    gap: 5px;
}

.news-detail .news-detail-left .news-detail-text .social-share {
    display: inline-block
}

.news-detail .news-detail-left .news-detail-text .social-share .social-share-icon {
    width: 24px;
    height: 24px;
    font-size: 12px;
    line-height: 24px
}

.news-detail .news-detail-left .news-detail-text .social-share .social-share-icon svg {
    width: 16px;
    height: 16px;
}

.news-detail .news-detail-left .news-detail-text .social-share .icon-wechat .wechat-qrcode {
    left: -88px
}

.news-detail .news-detail-left .news-detail-main {
    font-size: 1rem;
    color: #666666;
    line-height: 1.875rem;
    text-align: justify;
    padding-bottom: 60px;
    border-bottom: 1px solid #e5e5e5
}

.news-detail .news-detail-left .news-detail-main p {
    font-size: 1rem;
    color: #666666;
    line-height: 1.875rem;
    padding-bottom: 1.25rem;
}

.news-detail .news-detail-left .news-detail-page {
    margin-top: 1.875rem;
    display: flex;
    justify-content: space-between
}

.news-detail .news-detail-left .news-detail-page a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-radius: 30px;
    border: 1px solid #ddd;
    color: #666;
    text-decoration: none;
    transition: all 0.3s;
    max-width: 45%
}

.news-detail .news-detail-left .news-detail-page a.prev span,.news-detail .news-detail-left .news-detail-page a.prev span svg {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.75rem;
}

.news-detail .news-detail-left .news-detail-page a.next span,.news-detail .news-detail-left .news-detail-page a.next span svg {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0.75rem;
}

.news-detail .news-detail-left .news-detail-page a:hover {
    background: #0863c4;
    color: #fff;
    border-color: #0863c4
}

.news-detail .news-detail-left .news-detail-page a:hover svg > path {
    stroke: #FFFFFF;
}

/* 公司概况 */
.company-box {
    width: 100%;
    overflow: hidden;
    background: url(img/company_bg.png) center bottom no-repeat
}

.company-box .company-intro {
    display: grid;
    grid-template-columns: calc(58% - 3rem) calc(42% - 3rem);
    gap: 6rem
}

.company-box .company-intro .company-info {
}

.company-box .company-intro .company-media {
    position: relative
}

.company-box .company-intro .company-info .index-mod-title {
    margin-bottom: 2.5rem
}

.company-box .company-intro .company-info .company-text {
    font-size: 1rem;
    color: #666666;
    line-height: 2
}

.company-box .company-intro .company-info .company-text p {
    margin-bottom: 0.9375rem
}

.company-box .company-intro .company-media .company-image {
    width: 100%;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08);
    position: relative
}

.company-box .company-intro .company-media .company-image .pic {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.5s ease
}

.company-box .company-intro .company-media .company-image:hover .pic {
    transform: scale(1.08)
}

.company-box .company-intro .company-media .company-image .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 70px;
    height: 70px;
    background: linear-gradient(90deg,#0863c4,#42a5f5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    animation: pulse-good 2s infinite;
    transition: all 0.3s ease;
    z-index: 10
}

.company-box .company-intro .company-media .company-image .play-btn:hover {
    transform: translate(-50%,-50%) scale(1.1)
}

@keyframes pulse-good {
    0% {
        box-shadow: 0 0 0 0 rgba(8,99,196,0.7)
    }

    70% {
        box-shadow: 0 0 0 20px rgba(8,99,196,0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(8,99,196,0)
    }
}

.develop-box {
    width: 100%;
    overflow: hidden;
    background: linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%)
}

.develop-box .timeline-wrapper {
    position: relative;
    padding: 1.875rem 0 5rem
}

.develop-box .decoration {
    position: absolute;
    z-index: 0;
    opacity: 0.05
}

.develop-box .decoration-1 {
    top: 5%;
    left: 5%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: linear-gradient(45deg,#3498db,#2ecc71)
}

.develop-box .decoration-2 {
    bottom: 10%;
    right: 5%;
    width: 150px;
    height: 150px;
    background: linear-gradient(45deg,#3498db,#2ecc71);
    clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%)
}

.develop-box .decoration-3 {
    top: 50%;
    left: 10%;
    width: 100px;
    height: 100px;
    background: linear-gradient(45deg,#3498db,#2ecc71);
    clip-path: polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%)
}

.develop-box .develop-swiper {
    width: 100%;
    height: 23.75rem;
    padding: 1.875rem 0
}

.develop-box .timeline-wrapper .swiper-slide {
    background: linear-gradient(145deg,#ffffff,#f8f9fa);
    border-radius: 0.75rem;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08);
    padding: 2.1875rem;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0.7;
    transform: scale(0.92);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.develop-box .timeline-wrapper .swiper-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg,#0863c4,#42a5f5);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    z-index: 2
}

.develop-box .timeline-wrapper .swiper-slide-active::before {
    transform: scaleX(1)
}

.develop-box .timeline-wrapper .swiper-slide-active {
    opacity: 1;
    transform: scale(1)
}

.develop-box .develop-swiper .develop-year {
    font-size: 2.375rem;
    font-weight: 600;
    color: rgba(8,99,196,0.8);
    margin-bottom: 1.875rem;
    position: relative;
    display: inline-block;
    letter-spacing: 1px
}

.develop-box .develop-swiper .develop-year::after {
    content: '';
    position: absolute;
    bottom: -0.625rem;
    left: 0;
    width: 3.75rem;
    height: 4px;
    background: linear-gradient(to right,#3498db,#2ecc71);
    border-radius: 3px;
    transition: width 0.3s ease
}

.develop-box .develop-swiper .swiper-slide-active .develop-year::after {
    width: 5rem
}

.develop-box .develop-swiper .develop-content h3 {
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
    color: #2c3e50;
    font-weight: 600
}

.develop-box .develop-swiper .develop-content p {
    color: #6c757d;
    line-height: 1.9;
    font-size: 1.05rem
}

.develop-box .timeline-wrapper .navigation-container {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    gap: 0.9375rem;
    padding: 1.25rem
}

.develop-box .timeline-wrapper .navigation-container .nav-btn {
    width: 3.5rem;
    height: 3.5rem;
    background: #0863c4;
    border-radius: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #FFFFFF;
    position: relative;
    overflow: hidden
}

.develop-box .timeline-wrapper .navigation-container .nav-btn:hover {
    background: #34C759
}

.develop-box .timeline-wrapper .navigation-container .nav-btn:hover::before {
    opacity: 1
}

.culture-box {
    width: 100%;
    overflow: hidden;
    background: url(img/culture_bg.jpg) no-repeat center center / cover
}

.culture-box .index-mod-title {
    margin-bottom: 2.5rem
}

.culture-box .culture-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1.25rem
}

.culture-box .culture-list .culture-item {
    background: rgba(255,255,255,0.5);
    border-radius: 0.75rem;
    padding: 1.875rem 6.25rem;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.culture-box .culture-list .culture-item.item-1 {
    grid-row: span 2
}

.culture-box .culture-list .culture-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg,#0863c4,#42a5f5);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    z-index: 2
}

.culture-box .culture-list .culture-item:hover::before {
    transform: scaleX(1)
}

.culture-box .culture-list .culture-item .culture-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 0.625rem 0
}

.culture-box .culture-list .culture-item .culture-icon {
    width: 5rem;
    height: 5rem;
    background: linear-gradient(90deg,#0863c4,#42a5f5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.875rem;
    transition: transform 0.3s ease
}

.culture-box .culture-list .culture-item:hover .culture-icon {
    transform: scale(1.1)
}

.culture-box .culture-list .culture-item .culture-content .culture-title {
    font-size: 1.6rem;
    margin-bottom: 0.9375rem;
    color: #2c3e50;
    font-weight: 600
}

.culture-box .culture-list .culture-item .culture-content .culture-desc {
    color: #7f8c8d;
    line-height: 1.7;
    font-size: 1.05rem
}

/* 荣誉资质 */
.honor-detail .honor-box {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.25rem
}

.honor-detail .honor-box .honor-item {
    background: #FFFFFF;
    border-radius: 0.75rem;
    overflow: hidden;
    padding: 1.5625rem;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08);
    transition: all 0.4s ease;
    position: relative
}

.honor-detail .honor-box .honor-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg,#0863c4,#42a5f5);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    z-index: 2
}

.honor-detail .honor-box .honor-item:hover::before {
    transform: scaleX(1)
}

.honor-detail .honor-box .honor-item .pic {
    height: 16.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #FFFFFF;
    cursor: pointer;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.honor-detail .honor-box .honor-item .honor-info {
    padding-top: 1.5625rem
}

.honor-detail .honor-box .honor-item .honor-info .honor-type {
    display: inline-block;
    background: rgba(59,130,246,0.1);
    color: #0863c4;
    padding: 0.4rem 0.8rem;
    border-radius: 2.5rem;
    font-size: 0.875rem;
    margin-bottom: 0.9375rem;
    font-weight: 600
}

.honor-detail .honor-box .honor-item .honor-info .honor-name {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
    color: #333333;
    line-height: 1.4;
    font-weight: 600
}

.honor-detail .honor-box .honor-item:hover .honor-info .honor-name {
    color: #0863c4
}

.honor-detail .honor-box .honor-item .honor-info .honor-date {
    color: #777;
    font-size: 1rem;
    display: flex;
    align-items: center;
    font-weight: 500
}

.honor-detail .honor-box .honor-item .honor-info .honor-date svg {
    margin-right: 0.5rem
}

.honor-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    z-index: 1000;
    overflow: auto;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease
}

.honor-overlay .honor-overlay-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    margin: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    animation: zoomIn 0.3s ease
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.honor-overlay .honor-close-btn {
    position: absolute;
    width: 3rem;
    height: 3rem;
    z-index: 10;
    right: 20px;
    top: 20px;
    background-color: rgba(255,255,255,.1);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.honor-overlay .honor-close-btn:hover {
    transform: rotate(180deg)
}

/* 加入我们 */
.join-detail .join-search-box {
    background: #FFFFFF;
    border-radius: 0.75rem;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08);
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center
}

.join-detail .join-search-box input {
    flex: 1;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background-color: #FFFFFF;
    font-size: 1rem;
    outline: none
}

.join-detail .join-search-box select {
    flex: 1;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background-color: #FFFFFF;
    font-size: 1rem;
    color: #333333;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 1rem
}

.join-detail .join-search-box .join-search-btn {
    background: #0863c4;
    color: #fff;
    border: none;
    padding: 1rem 2rem;
    border-radius: 2rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    gap: 0.625rem
}

.join-detail .join-search-box .join-search-btn:hover {
    background: #34C759
}

.join-detail .join-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem
}

.join-detail .join-list .join-item {
    background: #FFFFFF;
    border-radius: 0.75rem;
    padding: 2rem;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08);
    transition: all 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden
}

.join-detail .join-list .join-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 0;
    background: linear-gradient(180deg,#0863c4,#42a5f5);
    transition: all 0.4s ease;
    z-index: 2
}

.join-detail .join-list .join-item:hover::before,.join-detail .join-list .join-item.active::before {
    height: 100%;
    top: 0;
    transform: translateY(0)
}

.join-detail .join-list .join-item .join-summary {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.join-detail .join-list .join-item .join-summary .join-title {
    font-size: 1.125rem;
    font-weight: 500;
    color: #333333;
    flex: 2
}

.join-detail .join-list .join-item .join-summary .join-meta {
    display: flex;
    flex: 5;
    justify-content: space-between;
    align-items: center
}

.join-detail .join-list .join-item .join-summary .join-meta .join-meta-item {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    gap: 6px
}

.join-detail .join-list .join-item .join-summary .join-meta .join-meta-value {
    font-size: 1rem;
    font-weight: 500;
    color: #333
}

.join-detail .join-list .join-item .join-summary .toggle-icon {
    flex: 0.5;
    text-align: center;
    color: #0863c4;
    transition: transform 0.3s
}

.join-detail .join-list .join-item.active .join-summary .toggle-icon {
    transform: rotate(180deg)
}

.join-detail .join-list .join-item .join-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    margin-top: 0;
    opacity: 0
}

.join-detail .join-list .join-item.active .join-details {
    max-height: 800px;
    margin-top: 1.25rem;
    border-top: 1px solid #eee;
    padding-top: 1.25rem;
    opacity: 1;
    overflow: auto;
    transition: max-height 0.4s ease-out,opacity 0.3s ease-out 0.1s
}

.join-detail .join-list .join-item .join-details .join-requirements {
    background: #f8f9fa;
    padding: 1.25rem;
    border-radius: 0.75rem;
    margin-bottom: 1.25rem;
    font-size: 1rem;
    color: #666;
    line-height: 1.8
}

.join-detail .join-list .join-item .join-details .join-actions {
    text-align: center
}

.join-detail .join-list .join-item .join-details .join-actions .join-apply-btn {
    background: #0863c4;
    color: #FFFFFF;
    border: none;
    border-radius: 2rem;
    padding: 0.625rem 1.5625rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s
}

.join-detail .join-list .join-item .join-details .join-actions .join-apply-btn:hover {
    background: #34C759
}

.resume-submit-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease
}

.resume-submit-overlay.active {
    opacity: 1;
    pointer-events: all
}

.resume-submit-overlay .resume-submit-box {
    background: #FFFFFF;
    border-radius: 0.75rem;
    width: 90%;
    max-width: 600px;
    padding: 3.125rem;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    position: relative;
    transform: translateY(50px);
    transition: transform 0.4s ease
}

.resume-submit-overlay.active .resume-submit-box {
    transform: translateY(0)
}

.resume-submit-overlay .resume-submit-box .resume-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.125rem;
    cursor: pointer;
    color: #888;
    transition: all 0.3s ease;
    z-index: 10
}

.resume-submit-overlay .resume-submit-box .resume-close-btn:hover {
    transform: rotate(90deg)
}

.resume-submit-overlay .resume-submit-box .resume-close-btn:hover path {
    stroke: #0863c4
}

.resume-submit-overlay .resume-submit-box .resume-submit-title {
    color: #333333;
    font-size: 1.375rem;
    margin-bottom: 1.875rem;
    text-align: center;
    font-weight: 600
}

.resume-submit-overlay .resume-submit-box .form-group {
    margin-bottom: 1.5625rem;
    position: relative
}

.resume-submit-overlay .resume-submit-box .form-group svg {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #0863c4;
    font-size: 1.2rem
}

.resume-submit-overlay .resume-submit-box .form-group input {
    width: 100%;
    padding: 0.9375rem 1.25rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.75rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #f9f9f9;
    color: #333
}

.resume-submit-overlay .resume-submit-box .form-group.has-icon input {
    padding-left: 2.8125rem
}

.resume-submit-overlay .resume-submit-box .form-group .required-star {
    color: #e74c3c;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 1.2rem
}

.resume-submit-overlay .resume-submit-box .form-group .file-upload-text {
    margin-bottom: 1rem
}

.resume-submit-overlay .resume-submit-box .form-group .file-upload {
    position: relative;
    display: inline-block;
    width: 100%
}

.resume-submit-overlay .resume-submit-box .form-group .file-upload input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer
}

.resume-submit-overlay .resume-submit-box .form-group .file-upload .file-upload-label {
    display: flex;
    align-items: center;
    padding: 0.9375rem 1.25rem;
    background: #f5f7fa;
    border: 1px solid #e0e0e0;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: background 0.3s;
    gap: 10px;
    padding-left: 2.8125rem
}

.resume-submit-overlay .resume-submit-box .form-group .captcha-container {
    display: flex;
    gap: 10px;
    align-items: center
}

.resume-submit-overlay .resume-submit-box .form-group .captcha-container .captcha-img {
    flex: 1;
    background: #f0f0f0;
    height: 3.125rem;
    border-radius: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 1px solid #ddd
}

.resume-submit-overlay .resume-submit-box .form-group .captcha-container .captcha-img img {
    width: 100%;
    height: 100%;
    border-radius: 0.75rem;
    object-fit: cover
}

.resume-submit-overlay .resume-submit-box .form-group .captcha-container .captcha-input {
    flex: 2
}

.resume-submit-overlay .resume-submit-box .resume-submit-btn {
    background: #0863c4;
    color: #fff;
    border: none;
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
    font-weight: 500;
    text-align: center
}

.resume-submit-overlay .resume-submit-box .resume-submit-btn:hover {
    background: #34C759
}

/* 联系我们 */
.contact-information .index-mod-title {
    margin-bottom: 2.5rem
}

.contact-information .contact-information-list {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.25rem
}

.contact-information .contact-information-item {
    background: #FFFFFF;
    border-radius: 0.75rem;
    padding: 3rem 1.5rem;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08);
    transition: transform 0.3s ease,box-shadow 0.3s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    cursor: pointer
}

.contact-information .contact-information-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg,#0863c4,#42a5f5);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    z-index: 2
}

.contact-information .contact-information-item:hover::before {
    transform: scaleX(1)
}

.contact-information .contact-information-item .contact-information-icon {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    font-size: 1.8rem;
    background: rgba(59,130,246,0.1);
    transition: all 0.3s ease
}

.contact-information .contact-information-item:hover .contact-information-icon {
    background: #0863c4;
    transition: all 0.3s ease
}

.contact-information .contact-information-item:hover .contact-information-icon svg path {
    stroke: #FFFFFF;
    transition: all 0.3s ease
}

.contact-information .contact-information-item h3 {
    color: #72777c;
    margin-bottom: 0.9375rem;
    font-size: 1rem
}

.contact-information .contact-information-item p {
    color: #333333;
    font-size: 1.125rem
}

.marketing-network {
    overflow: hidden;
    background: url(img/marketing_bg.jpg) center top no-repeat;
    background-size: cover
}

.marketing-network .index-mod-title {
    margin-bottom: 2.5rem
}

.marketing-network .marketing-network-list {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1.25rem
}

.marketing-network .marketing-network-item {
    background: #FFFFFF;
    border-radius: 0.75rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08);
    transition: transform 0.3s ease,box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    cursor: pointer
}

.marketing-network .marketing-network-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 0;
    background: linear-gradient(180deg,#0863c4,#42a5f5);
    transition: all 0.4s ease;
    z-index: 2
}

.marketing-network .marketing-network-item:hover::before {
    height: 100%;
    top: 0;
    transform: translateY(0)
}

.marketing-network .marketing-network-item.hidden {
    display: none !important
}

.marketing-network .marketing-network-item .marketing-network-name {
    background: linear-gradient(135deg,#1a6bc4 0%,#0863c4 100%);
    color: #FFFFFF;
    padding: 1.25rem;
    text-align: center
}

.marketing-network .marketing-network-item .marketing-network-name h3 {
    font-size: 1.125rem;
    font-weight: bold
}

.marketing-network .marketing-network-item .marketing-network-content {
    padding: 1.25rem;
    flex-grow: 1
}

.marketing-network .marketing-network-item .marketing-network-info li {
    display: flex;
    margin-bottom: 1.25rem;
    align-items: flex-start
}

.marketing-network .marketing-network-item .marketing-network-info li svg {
    margin-right: 0.625rem
}

.marketing-network .marketing-network-item .marketing-network-info li span {
    display: block;
    margin-bottom: 3px;
    color: #333333;
    font-size: 1rem
}

.marketing-network .marketing-network-item .marketing-network-info li p {
    color: #72777c;
    font-size: 0.9rem
}

.marketing-network .load-more-container {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem
}

.marketing-network .load-more-btn {
    background: #0863c4;
    color: #FFFFFF;
    border: none;
    padding: 0.75rem 1.875rem;
    border-radius: 2.5rem;
    cursor: pointer;
    transition: background 0.3s;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08)
}

.marketing-network .load-more-btn:hover {
    background: #34C759
}

/* 搜索中心 */
.search-center .search-center-box {
    display: flex;
    gap: 1.875rem
}

.search-center .search-center-category {
    flex: 0 0 250px;
    background-color: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08);
    height: fit-content
}

.search-center .search-center-category .title {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.search-center .search-center-category .title h2 {
    font-size: 1.375rem;
    font-weight: bold
}

.search-center .search-center-category .category-item {
    margin-bottom: 0.5rem
}

.search-center .search-center-category .category-link {
    display: block;
    padding: 0.8rem 1rem;
    text-decoration: none;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 1rem
}

.search-center .search-center-category .category-link:hover {
    background-color: rgba(59,130,246,0.1);
    color: #0863c4
}

.search-center .search-center-category .category-link.active {
    background-color: #0863c4;
    color: #FFFFFF
}

.search-center .results-section {
    flex: 1
}

.search-center .results-section .results-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem
}

.search-center .results-section .results-list .result-item {
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s
}

.search-center .results-section .results-list .result-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 0;
    background: linear-gradient(180deg,#0863c4,#42a5f5);
    transition: all 0.4s ease;
    z-index: 2
}

.search-center .results-section .results-list .result-item:hover::before {
    height: 100%;
    top: 0;
    transform: translateY(0)
}

.search-center .results-section .results-list .result-item .result-link {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: inherit
}

.search-center .results-section .results-list .result-item .result-category {
    display: inline-block;
    background: rgba(59,130,246,0.1);
    color: #0863c4;
    padding: 0.4rem 0.8rem;
    border-radius: 2.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    margin-right: 1rem
}

.search-center .results-section .results-list .result-item .result-title {
    font-size: 1.125rem;
    font-weight: 500
}

.search-center .results-section .results-list .result-item .result-arrow {
    width: 1.625rem;
    height: 1.625rem;
    background: #0863c4;
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 1rem;
    transition: all 0.3s
}

.search-center .results-section .results-list .result-item:hover .result-arrow {
    background: #34C759
}