.list-banner .list-banner_pc {
    width: 100%;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat
}

.list-banner .list-banner_pc .content {
    padding-top: 150px;
    padding-bottom: 80px
}

.list-banner .list-banner_pc .content .title {
    color: #222;
    margin-bottom: 24px;
    font-weight: 700;
    font-size: 52px;
    line-height: 56px
}

.list-banner .list-banner_pc .content .intro {
    font-size: 16px;
    line-height: 20px;
    color: #666;
    margin-bottom: 32px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.list-banner .list-banner_pc .content .btn {
    width: 124px;
    height: 42px;
    font-size: 14px;
    margin-right: 10px
}

.list-banner .list-banner_pc .hot-product_wrap {
    height: 164px
}

.list-banner .list-banner_pc .hot-product_wrap .hot-product {
    width: 100%
}

.list-banner .list-banner_pc .hot-product_wrap .hot-product .head {
    width: 100%;
    height: 46px;
    display: flex;
    position: relative;
    justify-content: center
}

.list-banner .list-banner_pc .hot-product_wrap .hot-product .head:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: .3;
    background: linear-gradient(270deg,hsla(0,0%,100%,0),#fff 51%,hsla(0,0%,100%,0));
    filter: blur(4px)
}

.list-banner .list-banner_pc .hot-product_wrap .hot-product .head-text {
    color: #222;
    z-index: 2;
    font-weight: 700;
    font-size: 14px;
    line-height: 46px
}

.list-banner .list-banner_pc .hot-product_wrap .hot-product .list {
    display: flex;
    height: 118px;
    background: hsla(0,0%,100%,.8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    list-style-type: none
}

.list-banner .list-banner_pc .hot-product_wrap .hot-product .item-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.list-banner .list-banner_pc .hot-product_wrap .hot-product .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 84px;
    text-align: center
}

.list-banner .list-banner_pc .hot-product_wrap .hot-product .item-divider {
    height: 66px;
    border-left: 1px solid #ddd
}

.list-banner .list-banner_pc .hot-product_wrap .hot-product .item-title {
    color: #222;
    margin-bottom: 8px;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.list-banner .list-banner_pc .hot-product_wrap .hot-product .item-desc {
    color: #666;
    font-size: 14px;
    line-height: 18px;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}

@media screen and (min-width: 768px) and (max-width:1200px) {
    .list-banner .list-banner_pc .content {
        padding-top:75px;
        padding-bottom: 40px
    }
}

.list-banner .list-banner_mobile {
    width: 100%;
    background-image: url(/image/scene/mobileBc.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.list-banner .list-banner_mobile .title {
    font-weight: 700;
    font-size: 24px;
    line-height: 28px;
    color: #222;
    margin-bottom: 12px
}

.list-banner .list-banner_mobile .desc {
    font-size: 12px;
    line-height: 20px;
    color: #222;
    margin-bottom: 16px
}

.list-banner .list-banner_mobile .btn {
    width: 108px;
    height: 32px;
    font-size: 12px;
    margin-right: 6px
}

.list-banner .hot-product_mobile {
    padding: 24px 16px 0
}

.list-banner .hot-product_mobile .header {
    color: #222;
    text-align: center;
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px
}

.list-banner .hot-product_mobile .list {
    list-style-type: none
}

.list-banner .hot-product_mobile .item-wrap {
    margin-bottom: 12px;
    cursor: pointer
}

.list-banner .hot-product_mobile .item-wrap:last-child {
    margin-bottom: 24px
}

.list-banner .hot-product_mobile .item {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 24px 16px;
    box-shadow: 0 8px 16px 0 rgba(23,44,66,.12)
}

.list-banner .hot-product_mobile .item_title {
    color: #222;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.list-banner .hot-product_mobile .item_desc {
    color: #666;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}
.list-page {
    position: relative
}

.list-page .list-page_li {
    background-color: #fff
}

@media screen and (min-width: 768px) {
    .list-page .list-page_li:nth-child(2n) {
        background:url(/image/scene/pageBc.jpg) no-repeat;
        background-size: 100% 100%
    }
}

.level-two .header {
    color: #222;
    text-align: center
}

.level-two .new-product{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100%;
    color: #fff
}

.level-two .new-product .desc,.level-two .new-product .title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.level-two .new-product .btn {
    padding: 8px 24px;
    font-size: 12px
}

.level-two .el-tabs__nav-wrap {
    height: 80px;
    display: flex;
    align-items: flex-end
}

.level-two .el-tabs__nav-wrap:after {
    height: 1px;
    background-color: #ddd
}

.level-two .el-tabs__nav-wrap .el-tabs__nav-next,.level-two .el-tabs__nav-wrap .el-tabs__nav-prev {
    line-height: 48px
}

.level-two .el-tabs__nav-scroll {
    min-width: 100%
}

.level-two .el-tabs__nav {
    min-width: 100%;
    display: flex
}

.level-two .el-tabs__item {
    height: 48px;
    line-height: 52px;
    flex: 1;
    text-align: center
}

.level-two .el-tabs__item .item__text {
    display: inline-block;
    height: 100%;
    color: #333;
    font-weight: 400;
    font-size: 16px;
    line-height: 48px
}

.level-two .el-tabs__item.is-active .item__text {
    font-weight: 700;
    border-bottom: 3px solid #1989fa
}

.level-two .el-tabs__item:hover .item__text {
    border-bottom: 3px solid #1989fa
}

@media screen and (min-width: 768px) {
    .level-two {
        padding-top:64px
    }

    .level-two .header {
        font-weight: 700;
        font-size: 24px;
        line-height: 28px;
        margin-bottom: 32px
    }

    .level-two .new-product {
        padding: 32px
    }

    .level-two .new-product .title {
        font-weight: 700;
        font-size: 18px;
        line-height: 1.2;
        margin-bottom: 16px
    }

    .level-two .new-product .desc {
        font-size: 14px;
        line-height: 1.2;
        margin-bottom: 24px;
        width: 50%
    }

    .level-two .new-product .btn {
        padding: 8px 24px;
        font-size: 12px
    }
}

@media screen and (max-width: 767px) {
    .level-two {
        padding-top:24px;
        margin: 16px 0;
        background-color: #fff;
        box-shadow: 0 -8px 16px 0 rgba(23,44,66,.12)
    }

    .level-two .header {
        font-weight: 700;
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 24px
    }

    .level-two .new-procduct_wrap {
        padding: 0
    }

    .level-two .new-product {
        padding: 16px;
        cursor: pointer
    }

    .level-two .new-product .title {
        margin-bottom: 8px;
        font-weight: 700;
        font-size: 14px;
        line-height: 16px
    }

    .level-two .new-product .desc {
        color: hsla(0,0%,100%,.8);
        font-size: 12px;
        line-height: 14px;
        width: 100%;
        margin-bottom: 0
    }

    .level-two .new-product .btn {
        display: none
    }
}

.product-list .product .title_wrap {
    display: flex;
    align-items: center
}

.product-list .product .title {
    color: #1989fa;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.product-list .product .title:hover {
    opacity: .8
}

.product-list .product .hot {
    width: 34px;
    height: 18px;
    background: rgba(208,2,27,.1);
    border-radius: 2px;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #d0021b;
    margin-left: 8px;
    text-align: center
}

.product-list .product .intro {
    color: #666;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

@media screen and (min-width: 768px) {
    .product-list .product {
        height:134px;
        padding: 32px 40px
    }

    .product-list .product .title_wrap {
        margin-bottom: 8px
    }

    .product-list .product .title {
        font-weight: 700;
        font-size: 18px;
        line-height: 22px
    }

    .product-list .product .intro {
        font-size: 14px;
        line-height: 22px
    }
}

@media screen and (max-width: 767px) {
    .product-list .product {
        height:auto;
        padding: 12px 16px
    }

    .product-list .product .title_wrap {
        margin-bottom: 12px
    }

    .product-list .product .title {
        font-weight: 700;
        font-size: 14px;
        line-height: 18px
    }

    .product-list .product .intro {
        font-size: 12px;
        line-height: 20px
    }
}

.product-list .list-more__wrapper {
    width: 100%;
    padding-bottom: 64px;
    text-align: center
}

.product-list .list-more {
    font-size: 14px;
    color: #1989fa
}

.product-list .list-more:hover {
    color: #0061ff
}

@media screen and (max-width: 767px) {
    .product-list {
        background:linear-gradient(180deg,#e8edf4,#fff 82%);
        box-shadow: 0 8px 16px 0 rgba(23,44,66,.12)
    }
}

.list-nav__wrapper {
    position: sticky;
    top: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 4px 16px 0 rgba(0,0,0,.1);
    z-index: 1000;
    font-size: 16px;
    color: #333
}

.list-nav {
    display: flex;
    align-items: center;
    position: relative
}

.nav-wrapper {
    flex: 1;
    overflow: hidden
}

.nav-container {
    float: left;
    white-space: nowrap
}

.swiper-slide {
    width: auto;
    padding: 0 28px
}

.nav-item {
    display: flex;
    align-items: center;
    height: 64px;
    font-size: 16px;
    color: #333;
    border-bottom: 2px solid transparent
}

.nav-item.is-active,.nav-item:hover {
    border-bottom: 2px solid #1989fa
}

.my-swiper-button__next,.my-swiper-button__prev {
    display: flex;
    align-items: center;
    width: 32px;
    height: 64px;
    position: absolute;
    z-index: 2;
    color: #666
}

.my-swiper-button__next.is-disabled,.my-swiper-button__prev.is-disabled {
    color: #ddd
}

.my-swiper-button__prev {
    justify-content: flex-start;
    left: 0;
    background: linear-gradient(90deg,#fff 59%,hsla(0,0%,100%,0))
}

.my-swiper-button__next {
    justify-content: flex-end;
    right: 0;
    background: linear-gradient(270deg,#fff 59%,hsla(0,0%,100%,0))
}

.case-header__filler {
    height: 90px
}

@media screen and (max-width: 1199px) {
    .case-header__filler {
        height:36px
    }
}

.cosmo-loading-page {
    width: 100%;
    min-height: 60vh;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999
}

.cosmo-loading__icon {
    width: 60px;
    height: 60px;
    position: relative
}

.double-bounce1,.double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #1989fa;
    opacity: .8;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: bounce-data-v-00d01271 2s ease-in-out infinite;
    animation: bounce-data-v-00d01271 2s ease-in-out infinite
}

.double-bounce2 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s
}

@-webkit-keyframes bounce-data-v-00d01271 {
    0%,to {
        transform: scale(0)
    }

    50% {
        transform: scale(1)
    }
}

@keyframes bounce-data-v-00d01271 {
    0%,to {
        transform: scale(0)
    }

    50% {
        transform: scale(1)
    }
}