.discolorheader.page-header.theme-dark {
    background: rgba(149,149,149,.06)
}

.discolorheader.page-header.theme-dark .main-bottom .submenu,.discolorheader.page-header.theme-dark>.main .main-top .top-wear-right .link-style {
    color: #fff
}

.discolorheader.page-header.theme-dark .main-bottom .button-wrapper .loginButton,.discolorheader.page-header.theme-dark .main-bottom .button-wrapper .memberButton {
    color: #fff;
    border: 1px solid #fff
}

.userInfo-name-text {
    color: #333
}

.discolorheader.page-header {
    z-index: 100;
    background: rgba(239,239,239,.5);
    backdrop-filter: blur(4px)
}

.discolorheader.page-header>.main .main-top .top-wear-left .icon_logo {
    background: url(../../images/logo2023-blue.gif) no-repeat center;
    background-size: contain
}

.discolorheader.page-header.theme-dark>.main .main-top .top-wear-left .icon_logo {
    background: url(../../images/logo.png) no-repeat center;
    background-size: contain
}

.discolorheader.page-header.theme-dark .bottom-wear-right .button-wrapper .userInfo-name .userInfo-name-text {
    color: #fff
}

.page-header .main-bottom .submenu,.page-header>.main .main-top .top-wear-right .link-style {
    color: #333
}

.page-header>.main .main-top .top-wear-right .link-style:hover {
    color: #118efc
}

.discolorheader.page-header .main-bottom .button-wrapper .loginButton,.discolorheader.page-header .main-bottom .button-wrapper .memberButton {
    color: #2799fc;
    border: 1px solid #2799fc
}

.discolorheader.page-header>.main .main-top .top-wear-left {
    height: 48px;
    width: 140px
}

.container-text .title {
    color: #333!important;
    font-size: 42px!important;
    position: relative
}

.container-text .title:after,.container-text .title:before {
    position: absolute;
    width: 68px;
    height: 24px;
    background: linear-gradient(-90deg,#fb2d37 0,#ff6052 100%);
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 700;
    color: #fff;
    line-height: 14px;
    top: -35px;
    text-align: center;
    line-height: 24px
}

.container-text .notitle {
    color: #333!important;
    font-size: 42px!important;
    position: relative
}

.container-text .notitle:after {
    content: '';
    left: 78px
}

.container-text .notitle:before {
    content: ''
}

.container-text .notitle:after,.container-text .notitle:before {
    position: absolute;
    width: 68px;
    height: 24px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 700;
    color: #fff;
    line-height: 14px;
    top: -35px;
    text-align: center;
    line-height: 24px
}

.container-text .desc {
    font-size: 22px!important;
    font-family: Microsoft YaHei;
    font-weight: 400!important;
    color: #333!important;
    line-height: 28px!important
}

.container-text .desc span {
    font-size: 18px;
    margin-top: 5px;
    display: inline-block
}

.container-text .banner-Button {
    background: #edeff2!important;
    margin-top: 0;
    border: 1px solid #333!important;
    color: #333!important
}

.container-text .banner-Button:hover {
    border: 1px solid #118efc!important;
    color: #118efc!important
}

.carousel-inner .container-text.yz .desc {
    letter-spacing: 1px
}

body {
    overflow-x: hidden
}

.animationBanner:after {
    content: '';
    width: 100%;
    height: 100%;
    background-size: 550px 174px;
    background-position: center;
    display: block;
    animation: imgMove .5s linear forwards
}

@keyframes imgMove {
    0% {
        transform: translateY(-50px)
    }

    to {
        transform: translateY(0)
    }
}

// 22ÃƒÂ¥Ã‚Â¹Ã‚Â´8ÃƒÂ¦Ã…â€œÃ‹â€ 2ÃƒÂ¦Ã¢â‚¬â€Ã‚Â¥ yzÃƒÂ¦Ã¢â‚¬â€œÃ‚Â°ÃƒÂ¥Ã‚Â¢Ã…Â¾ .head-title>p.head-title-desc {
    margin-top: 10px
}

.carousel-indicators .indicators-inner {
    padding: 20px 0
}

.index-rj-recommend .carousel-indicators {
    display: flex
}

.index-rj-recommend .carousel-indicators li {
    flex: 1;
    width: auto;
    height: auto;
    line-height: 1
}

.head-title .head-title-desc {
    text-align: center;
    font-size: 18px;
    color: #191919;
    margin-top: 10px
}

.index-rj-recommend .carousel-indicators li,.index-rj-recommend .carousel-indicators li.active,.index-rj-recommend .carousel-indicators li:hover {
    position: relative;
    background: 0 0;
    border: none
}

.index-rj-recommend .carousel-indicators .active::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 100%;
    height: 2px;
    background: #118efc
}

.index-rj-recommend .carousel-indicators .active,.index-rj-recommend .carousel-indicators li:hover {
    color: #118efc
}

.index-rj-recommend #myCarousel1 .carousel-indicators {
    height: auto
}

.index-rj-recommend .carousel-indicators li .indicators-inner-img {
    width: 64px;
    margin-bottom: 10px;
    position: relative;
    -webkit-transition: top .3s;
    transition: top .3s;
    top: 0
}

.index-rj-recommend .carousel-indicators li:hover .indicators-inner-img {
    top: -5px
}

.index-rj-recommend .carousel-indicators li .indicators-inner-text {
    font-size: 16px
}

.carousel-inner .carousel-inner-content .content-left {
    width: 380px
}

.carousel-inner .carousel-inner-content .content-left .content-left-top {
    position: relative;
    cursor: pointer;
    width: 100%;
    height: 380px;
    background-size: cover;
    line-height: 1;
    padding-top: 30px;
    padding-left: 24px;
    color: #191919
}

.carousel-inner .item:nth-child(2) .carousel-inner-content .content-left .content-left-top {
    background: url(../img/home/function_other06.png) no-repeat center;
    background-size: cover
}

.carousel-inner .item:nth-child(3) .carousel-inner-content .content-left .content-left-top {
    background: url(../img/home/function_other07.png) no-repeat center;
    background-size: cover
}

.carousel-inner .item:nth-child(4) .carousel-inner-content .content-left .content-left-top {
    background: url(../img/home/function_other03.png) no-repeat center;
    background-size: cover
}

.carousel-inner .item:nth-child(5) .carousel-inner-content .content-left .content-left-top {
    background: url(../img/home/function_other05.png) no-repeat center;
    background-size: cover
}

.carousel-inner .carousel-inner-content .content-left .content-left-top .left-top-title {
    font-size: 24px;
    font-weight: 500
}

.carousel-inner .carousel-inner-content .content-left .content-left-top .left-top-introduce {
    font-size: 32px;
    margin-bottom: 15px
}

.carousel-inner .item:nth-child(1) .carousel-inner-content .content-left .content-left-top .left-top-introduce {
    font-size: 36px;
    margin: 15px 0
}

.carousel-inner .carousel-inner-content .content-left .content-left-top .left-top-desc {
    font-size: 18px;
    margin-bottom: 14px
}

.carousel-inner .item:nth-child(1) .carousel-inner-content .content-left .content-left-top .left-top-desc {
    font-size: 16px
}

.carousel-inner .carousel-inner-content .content-left .content-left-top .yzButton {
    position: absolute;
    top: 130px;
    width: 120px;
    height: 32px;
    border: 1px solid #fff;
    background: #118efc;
    font-size: 14px;
    font-weight: 400;
    color: #fff
}

.carousel-inner .item:nth-child(1) .carousel-inner-content .content-left .content-left-top .yzButton {
    top: 150px
}

.carousel-inner .carousel-inner-content .content-left .content-left-bottom .yzButton:hover::after,.carousel-inner .carousel-inner-content .content-left .content-left-top .yzButton:hover::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.1)
}

.carousel-inner .carousel-inner-content .content-left .content-left-bottom {
    position: relative;
    width: 100%;
    height: 182px;
    background-size: cover;
    cursor: pointer;
    box-sizing: border-box;
    margin-top: 18px;
    padding-top: 24px;
    padding-left: 24px;
    background-image: url(https://easyv.assets.dtstack.com/homepage/common/assets/images/price/saas_advanced_newbg.png);
    background-color: #fff4d7
}


.carousel-inner .carousel-inner-content .content-left .content-left-bottom .left-bottom-title {
    color: #161616;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
}

.carousel-inner .carousel-inner-content .content-left .content-left-bottom .left-bottom-desc {
    font-weight: 500;
    margin-top: 10px;
    color: #161616;
    font-size: 14px;
    line-height: 22px;
    opacity: .56;
}

.carousel-inner .item:nth-child(1) .carousel-inner-content .content-left .content-left-bottom {
    background-color: #f5faff;
    padding: 24px 20px;
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: contain;
    border-radius: 4px;
    background-image: url(../img/home/saas_personal_newbg.png)
}

.carousel-inner .item:nth-child(3) .carousel-inner-content .content-left .content-left-bottom {
    background-image: url(../img/home/saas_advanced_newbg.png);
    background-color: #fff4d7
}

.carousel-inner .item:nth-child(4) .carousel-inner-content .content-left .content-left-bottom {
    background-image: url(../img/home/saas_vip_newbg.png);
    background-color: #1f1f1f
}

.carousel-inner .item:nth-child(2) .carousel-inner-content .content-left .content-left-bottom {
    background-color: #e0e8ff;
    background-image: url(../img/home/local_newbg.png)
}

.carousel-inner .carousel-inner-content .content-left .content-left-bottom .yzButton {
    width: 121px;
    height: 33px;
    border: none;
    background: linear-gradient(90deg,#ffefcf 0,#ffe5ae 100%);
    font-size: 14px;
    font-weight: 400;
    color: #7f3f00;
    position: absolute;
    bottom: 24px;
    left: 25px
}

.carousel-inner .item:nth-child(1) .carousel-inner-content .content-left .content-left-bottom .yzButton {
    color: #161616;
    border: 1px solid #161616;
    background: transparent;
}

.carousel-inner .item:nth-child(2) .carousel-inner-content .content-left .content-left-bottom .yzButton {
    color: #fff;
    background: linear-gradient(91.54deg, #8a9ed5, #7e91c8);
}

.carousel-inner .item:nth-child(3) .carousel-inner-content .content-left .content-left-bottom .yzButton {
    color: #fff;
    background: linear-gradient(91.54deg, #393939, #1f1f1f);
}

.carousel-inner .item:nth-child(4) .carousel-inner-content .content-left .content-left-bottom .yzButton {
    color: #161616;
    background: linear-gradient(91.54deg, #fbebc9, #f1d7a8);
}

.carousel-inner .item:nth-child(5) .carousel-inner-content .content-left .content-left-bottom .yzButton {}

.carousel-inner .item:nth-child(4) .carousel-inner-content .content-left .content-left-bottom .left-bottom-title,.carousel-inner .item:nth-child(4) .carousel-inner-content .content-left .content-left-bottom .left-bottom-desc {
    color: #fff;
}

.mt-20 {
    margin-top: 20px
}

.carousel-inner .carousel-inner-content .content-right {
    flex-wrap: wrap;
    flex: 1
}

.carousel-inner {
    background: 0 0
}

.carousel-inner .carousel-inner-content .content-right .content-right-item {
    width: calc(50% - 16px);
    box-sizing: border-box;
    padding: 24px;
    margin-left: 16px;
    margin-bottom: 16px;
    position: relative;
    border-radius: 2px;
    background-color: #fff;
    cursor: pointer;
    -webkit-filter: drop-shadow(0 4px 8px rgba(130, 169, 225, .03));
    filter: drop-shadow(0 4px 8px rgba(130, 169, 225, .03));
    -webkit-transition: -webkit-filter .5s;
    transition: -webkit-filter .5s;
    -o-transition: filter .5s;
    -moz-transition: filter .5s;
    transition: filter .5s;
    transition: filter .5s, -webkit-filter .5s;
}

.carousel-inner .carousel-inner-content .content-right .content-right-item .item-title-wrapper {
    align-items: center;
    line-height: 1
}

.carousel-inner .carousel-inner-content .content-right .content-right-item .item-title-wrapper .item-title {
    font-size: 18px;
    font-weight: 700;
    color: #191919
}

.carousel-inner .carousel-inner-content .content-right .content-right-item:hover .item-title-wrapper .item-title {
    color: #118efc
}

.carousel-inner .carousel-inner-content .content-right .content-right-item .item-title-wrapper .item-flag {
    position: relative;
    background: #fff;
    border: 1px solid #ff1f11;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #ff1f11;
    height: 18px;
    padding: 0 5px
}

.carousel-inner .carousel-inner-content .content-right .content-right-item .item-title-wrapper .item-flag.lightBorder::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 50%;
    transform: translate(0,-50%);
    width: 0;
    height: 0;
    border: 5px solid;
    border-color: transparent #fff transparent transparent;
    z-index: 20
}

.carousel-inner .carousel-inner-content .content-right .content-right-item .item-title-wrapper .item-flag.lightBorder::after {
    content: '';
    position: absolute;
    left: -11px;
    top: 50%;
    transform: translate(0,-50%);
    width: 0;
    height: 0;
    border: 5px solid;
    border-color: transparent #ff1f11 transparent transparent
}

.carousel-inner .carousel-inner-content .content-right .content-right-item .item-title-wrapper .item-flag.deepBorder {
    background: #ff1f11;
    color: #fff
}

.carousel-inner .carousel-inner-content .content-right .content-right-item .item-title-wrapper .item-flag.deepBorder::after {
    content: '';
    position: absolute;
    left: -11px;
    top: 50%;
    transform: translate(0,-50%);
    width: 0;
    height: 0;
    border: 5px solid;
    border-color: transparent #ff1f11 transparent transparent
}

.carousel-inner .carousel-inner-content .content-right .content-right-item .item-desc {
    color: #191919;
    font-size: 16px;
    line-height: 1;
    margin-top: 14px;
    margin-bottom: 11px
}

.carousel-inner .carousel-inner-content .content-right .content-right-item .item-area {
    height: 21px;
    box-sizing: border-box;
    padding: 0 9px;
    font-size: 12px;
    color: #999;
    border: 1px solid #dbdbdb
}

.carousel-inner .carousel-inner-content .content-right .content-right-item .item-opearInfo {
    margin-top: 21px;
    align-items: center;
    justify-content: space-between
}

.carousel-inner .carousel-inner-content .content-right .content-right-item .item-opearInfo .item-opearInfo-price {
    color: #ff1f11
}

.carousel-inner .carousel-inner-content .content-right .content-right-item .item-opearInfo .item-opearInfo-price .priceInfo {
    font-size: 24px;
    font-weight: 700
}

.carousel-inner .carousel-inner-content .content-right .content-right-item .item-opearInfo .item-opearInfo-price .priceInfo.connectKefu {
    font-size: 19px
}

.carousel-inner .carousel-inner-content .content-right .content-right-item .item-opearInfo .yzButton {
    width: 121px;
    height: 33px;
    background: #fff;
    border: 1px solid #118efc;
    font-size: 14px;
    font-weight: 400;
    color: #118efc;
    box-sizing: border-box
}

.carousel-inner .carousel-inner-content .content-right .content-right-item .item-opearInfo .yzButton:hover {
    background: #118efc;
    border: none;
    color: #fff
}

.carousel-inner .carousel-inner-content .content-right .content-right-item .item-opearInfo .yzButton a {
    color: inherit!important
}

.ssl-cp.index-tj.index-rj-recommend {
    position: relative
}

.ssl-cp.index-tj.index-rj-recommend::after {
    content: '';
    position: absolute;
    max-width: 1920px;
    margin: auto;
    left: 0;
    right: 0;
    background: #fff;
    height: 292px;
    top: 0
}

.ssl-cp.index-tj.index-rj-recommend .head-title {
    margin-bottom: 15px
}

.banner-top.index,.carousel-inner.banner.index {
    height: 460px
}

#myCarousel .carousel-indicators.banner {
    bottom: 20px
}

.index-rj-recommend .hot-recommend-left {
    background: url(../../images/newUser_aside_img.png) no-repeat center center!important;
    height: 540px;
    background-size: 247px!important
}

.index-rj-recommend .recommend-right .plan1 {
    padding: 0 5px
}

.recommend-right-price {
    margin: 10px 0 5px 101px;
    text-align: left;
    position: relative
}

.recommend-right-price:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 5px solid #ff5107;
    border-bottom: 5px solid transparent;
    top: 15px;
    left: -17px
}

.ssl-button span {
    background: #fff;
    border: 1px solid #118efc;
    color: #118efc;
    padding: 5px;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis
}

.free-use-btn.btn-white {
    background: 0 0;
    color: #fff;
    border: 1px solid #fff;
    padding: 0 35px
}

.index-rj-recommend .recommend-right .plan1 {
    border-right: none
}

.index-rj-recommend .recommend-right {
    border-right: 1px #f8f8f8 solid
}

.index-rj-recommend .recommend-right:last-child {
    border-right: none
}

.page-section {
    position: relative
}

.page-section .lead_effect {
    background: url(../../images/lead-max.jpg);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-name: slideBgImage;
    animation-name: slideBgImage;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear
}

@-webkit-keyframes ImgBounce {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }
}

@keyframes ImgBounce {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }
}

@-webkit-keyframes slideBgImage {
    from {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

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

@keyframes slideBgImage {
    from {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

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

// 2022.11.16 yz ÃƒÂ¦Ã¢â‚¬â€œÃ‚Â°ÃƒÂ¥Ã‚Â¢Ã…Â¾ .carousel .carousel-inner {
    background: #f4f6f8
}

.carousel .carousel-inner.banner.index .item {
    height: 100%;
    padding-top: 190px;
    padding-bottom: 70px
}

.carousel .carousel-inner.banner.index .item:nth-child(2) {
    background: url(../../images/home/2022banner02.png) no-repeat;
    background-size: cover;
    background-position: center
}

.carousel .carousel-inner.banner.index .item:nth-child(3) {
    padding-top: 150px;
    background: url(../../images/home/2022banner03.png) no-repeat;
    background-size: cover;
    background-position: center
}

.carousel .carousel-inner.banner.index .item:nth-child(4) {
    background: url(../../images/home/2022banner01.png) no-repeat;
    background-size: cover;
    background-position: center
}

.carousel .carousel-inner.banner.index .item .container>a {
    display: inline-block
}

.carousel .carousel-inner .item .banner-inner-video {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 1;
    object-fit: cover
}

.space.space-wrapper {
    padding-top: 80px;
    padding-bottom: 50px
}

.client.space.space-wrapper,.ssl-cp.index-tj.index-rj-recommend.space-wrapper {
    background: #f4f6f8
}

.carousel-indicators .active,.carousel-indicators li {
    height: 4px
}

.carousel .carousel-control.left {
    left: 3%
}

.carousel .carousel-control.right {
    right: 3%
}


.tpm-section_hot {
    background: #f9fbff;
}



.tpm-section.tpm-section__lightBg {
    background: #f3f5f8
}

.banner-inner-video_wrap .banner-inner-video {
    position: absolute;
    width: 1926px;
    left: -3px;
    right: inherit;
    height: 100%;
    object-fit: cover;
    z-index: 1
}

.banner-inner-video_wrap {
    width: 1920px;
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 2
}

.tpm-prod-hero__bg-titleBg_desc {
    font-size: 14px;
    font-weight: 500;
    color: #191919;
    line-height: 20px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 43.2%;
    z-index: 1
}

.desc_key {
    color: #ff3b20
}

@media screen and (min-width: 768px) {
    .tpm-prod-hero-parent .tpm-prod-hero__btn-group,.tpm-prod-hero-parent .tpm-prod-hero__desc,.tpm-prod-hero-parent .tpm-prod-hero__dropdown-wrap,.tpm-prod-hero-parent .tpm-prod-hero__header {
        transition:.6s ease-out .1s;
        opacity: 0;
        transform: translateY(40px)
    }

    .tpm-prod-hero-parent .tpm-prod-hero__btn-group {
        transition: .6s ease-out .3s
    }

    .tpm-prod-hero-parent .swiper-slide-active .tpm-prod-hero__btn-group,.tpm-prod-hero-parent .swiper-slide-active .tpm-prod-hero__desc,.tpm-prod-hero-parent .swiper-slide-active .tpm-prod-hero__dropdown-wrap,.tpm-prod-hero-parent .swiper-slide-active .tpm-prod-hero__header {
        opacity: 1;
        transform: translateY(0)
    }
}

#myHomePageBannerSwiper.swiper-container-horizontal>.swiper-pagination-bullets {
    bottom: 100px;
    left: 0;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    right: 0;
    display: flex;
    justify-content: center;
}

.carousel-indicators li {
    text-indent: inherit
}

.index-rj-recommend .carousel-indicators {
    width: 100%;
    top: 0;
    position: inherit;
    margin-bottom: 20px;
    left: 0;
    margin-left: 0;
    text-align: left
}

.carousel-indicators .indicators-inner {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center
}




.index-rj-recommend .carousel-indicators .active::after {
    left: 0;
    right: 0;
    margin: auto;
    max-width: 160px;
    height: 2px;
    background: #006eff
}

.index-rj-recommend .carousel-indicators li .indicators-inner-text {
    color: #191919
}

.content-left-top .tpm-btn.tpm-btn--primary {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%)
}

.index-rj-recommend .carousel-indicators li.active .indicators-inner-text,.index-rj-recommend .carousel-indicators li:hover .indicators-inner-text {
    color: #006eff
}

.tpm-section__resource .tpm-feature__item.tpm-feature__item-writeBg {
    height: 100%
}

#myCarousel1 .tpm-prod-hero__btn {
    font-size: 14px;
    font-weight: 500;
    text-shadow: 0 4px 12px rgba(41,57,87,.08);
    min-width: 128px
}

.carousel-inner .carousel-inner-content .content-left .content-left-bottom .yzButton {
    width: 128px;
    height: 40px;
    left: 24px
}

.carousel-inner .carousel-inner-content .content-right .content-right-item:hover {
    box-shadow: 8px 8px 20px 0 rgb(55 99 170 / 10%),-8px -8px 20px 0 #fff
}

.carousel-inner .carousel-inner-content .content-left .content-left-bottom .tpm-btn {
    left: 24px;
    bottom: 24px;
    position: absolute
}

.carousel-inner .carousel-inner-content .content-right .content-right-item {
    background-size: cover
}

.carousel-inner .carousel-inner-content .content-right .content-right-item .item-area {
    height: 20px;
    line-height: 20px;
    border: 1px solid #3d485d;
    color: #3d485d
}

.carousel-inner .carousel-inner-content .content-right .content-right-item .item-desc {
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #293957;
    line-height: 20px
}

.carousel-inner .carousel-inner-content .content-right .content-right-item .item-title-wrapper .item-title {
    font-weight: 500
}

.carousel-inner .carousel-inner-content .content-right .content-right-item .item-opearInfo .item-opearInfo-price {
    color: #293957
}

.carousel-inner .item-opearInfo-price .oldPrice {
    color: #5b6786!important;
    font-size: 12px;
    text-decoration: line-through
}

.carousel-inner .carousel-inner-content .content-right .content-right-item .item-opearInfo .item-opearInfo-price span {
    color: #ff3b20
}

.content-left-bottom .el-icon {
    transition: transform .4s,-webkit-transform .4s;
    margin-left: 2px
}

.content-left-bottom .yzButton:hover .el-icon.el-icon-arrow-right {
    transform: translateX(4px)
}

.tpm-feature__item-go .copyData:not(.mainColor) {
    color: #293957
}

.tpm-section__resource {
    overflow-x: hidden
}

.tpm-section__resource .tp-grid__row {
    margin-bottom: -16px
}

.tpm-section__resource .tp-grid__row.tp-grid--gutter-8 .tp-grid__col {
    position: relative;
    margin-bottom: 16px
}

.tpm-feature__item.tpm-feature__item-writeBg {
    width: 100%;
    transition: all .3s ease-in-out
}

.tpm-section__resource .tp-grid__row.tp-grid--gutter-8 .tp-grid__col .tpm-feature__item.tpm-feature__item-writeBg.is-active {
    position: absolute;
    width: 592px;
    height: 100%;
    left: 8px;
    top: 0;
    z-index: 1
}

.tpm-section__resource .tp-grid__layout {
    overflow: hidden
}

.tpm-section__resource .tp-grid__row.tp-grid--gutter-8 .tp-grid__col:nth-child(4n) .tpm-feature__item.tpm-feature__item-writeBg.is-active {
    right: 8px;
    left: auto
}

.tpm-section__resource .tp-grid__row .tpm-feature__item-extend::after {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    content: '';
    transition: opacity .3s ease-in-out;
    opacity: 0;
    background: url(../img/home/whybg.png) center no-repeat;
    background-size: cover;
    z-index: -1
}

.tpm-section__resource .tp-grid__row .tp-grid__col .tpm-feature__item-extend.is-active::after {
    opacity: 1
}

.tpm-section__resource .tp-grid__row .tp-grid__col .tpm-feature__item-extend.is-active::before {
    content: '';
    position: absolute;
    border-top: 1px solid #dfdfdf;
    width: 316px;
    height: 0;
    left: 16px;
    bottom: 68px
}

.tpm-section__resource .tp-grid__row .tpm-feature__item-desc {
    margin-bottom: 17px;
    line-height: 20px
}

.tpm-section__resource .tp-grid__row .tp-grid__col .tpm-feature__item-extend.is-active .tpm-feature__item-desc .tpm-feature__item-desc__shrink {
    display: none
}

.tpm-section__resource .tp-grid__row .tpm-feature__item:not(.tpm-feature__item-extend) .tpm-feature__item-desc {
    margin-bottom: 0
}

.tpm-section__resource .tpm-feature__item.tpm-feature__item-writeBg .tpm-feature__item-title {
    line-height: 25px;
    margin-bottom: 6px
}

.tpm-section__resource .tp-grid__row .tpm-feature__item-extend .tpm-feature__item-desc {
    height: 80px
}

.tpm-section__resource .tp-grid__col .tpm-feature__item.tpm-feature__item-writeBg.tpm-feature__item-extend.is-active .tpm-feature__item-go {
    border: none
}

.tpm-feature__item-desc__explode {
    display: none
}

.tpm-feature__item-extend.is-active .tpm-feature__item-desc__explode {
    position: relative;
    display: block;
    opacity: 0;
    -webkit-animation: opacityAnimat .3s .2s linear forwards,fadeToBottom .3s .2s linear forwards;
    animation: opacityAnimat .3s .2s linear forwards,fadeToBottom .3s .2s linear forwards
}

.tpm-feature__item-desc__shrink {
    opacity: 0;
    -webkit-animation: opacityAnimat .3s .2s linear forwards;
    animation: opacityAnimat .3s .2s linear forwards
}

@keyframes fadeToBottom {
    0% {
        bottom: -8px
    }

    to {
        bottom: 0
    }
}

@-webkit-keyframes fadeToBottom {
    0% {
        bottom: -8px
    }

    to {
        bottom: 0
    }
}

.tpm-section.tpm-section__service {
    position: relative
}

.tpm-section.tpm-section__service::before {
    content: '';
    left: 0;
    margin: auto;
    right: 0;
    width: 100%;
    position: absolute;
    top: 0;
    height: 239px;
    width: 100%;
    max-width: 1920px;
    background: url(../../images/home/home_img03.png) top right no-repeat;
    background-size: auto 100%;
    z-index: -1
}

.tpm-section__service .tpm-section__title {
    text-align: left;
    margin-bottom: 16px
}

.tpm-section__service .tpm-section__desc {
    font-size: 16px;
    font-weight: 400;
    color: #293957;
    line-height: 22px;
    text-align: left;
    max-width: 996px
}

.tpm-section.tpm-section__service .tp-grid__col {
    margin-bottom: 16px
}

.tpm-section.tpm-section__service .tp-grid__layout {
    margin-bottom: -16px
}

.tpm_supplier_wrapper.tpm_supplier_wrapper__lookMore {
    padding-top: 0;
    color: #191919
}

.tpm_supplier_wrapper.tpm_supplier_wrapper__lookMore:hover {
    color: #006eff
}

.tpm-section__global {
    position: relative;
    z-index: 1;
    padding-bottom: 0
}

.tpm-section__global .tpm-global__item {
    display: flex
}

.tpm-section__global .tpm-global__item .tpm-global__item-inner {
    padding-top: 8px
}

.tpm-section__global .tpm-global__item .item-inner-title {
    font-size: 14px;
    font-weight: 500;
    color: #191919;
    line-height: 20px
}

.tpm-section__global .tpm-global__item .item-inner-content-li {
    font-size: 14px;
    font-weight: 400;
    color: #3d485d;
    line-height: 20px;
    margin-top: 8px
}

.tpm-section__global .tpm-btn {
    min-width: auto;
    padding: 0 16px
}

.tpm-section__global-inner {
    overflow-x: hidden;
    height: 438px
}

.tpm-section__global-inner::before {
    content: '';
    position: absolute;
    width: 1920px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    margin: auto;
    background: url(../../images/home/home_map.png) center no-repeat;
    background-size: cover;
    z-index: -1
}

.tpm-feature__item-logo {
    width: 60px;
    top: 0;
    right: 0;
    opacity: 1;
    box-shadow: 0 4px 12px 0 rgba(41,57,87,.08)
}

.tpm-section__global .tpm-feature__item.tpm-feature__item-writeBg {
    padding: 24px
}

.tpm-section__global .tpm-feature__item.tpm-feature__item-writeBg .tpm-feature__item-title {
    margin-bottom: 8px;
    line-height: 25px
}

.tpm-section__global .tpm-feature__item-desc {
    line-height: 20px
}

.tpm-section__global .tp-grid__row .tpm-feature__item-desc {
    margin-bottom: 16px
}

.tpm-section__global .tp-grid__row .tpm-feature__item-desc {
    height: 100px
}

.tpm-section__documentCenter .tpm-doc__item {
    padding: 16px 16px 20px 16px
}

.tpm-section__documentCenter .tp-grid__col:not(.tp-grid__col--8) {
    width: 100%
}

.tpm-section__documentCenter .tpm-doc__item {
    background: #f3f5f8
}
