.contact-pop {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
    position: absolute;
    left: 50%;
    visibility: hidden;
    bottom: 60px;
    -webkit-transform: translate(-60%);
    transform: translate(-60%);
    padding-top: 14px
}

.contact-pop .contact-pop-wrap {
    padding: 24px;
    border-radius: 8px;
    background-color: #fff;
    -webkit-box-shadow: 0 3px 14px 0 rgba(0, 0, 0, .06), 0 0 4px 0 rgba(0, 0, 0, .03);
    box-shadow: 0 3px 14px 0 rgba(0, 0, 0, .06), 0 0 4px 0 rgba(0, 0, 0, .03)
}

.main-header {
    position: fixed;
    width: 100vw;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    top: 0;
    z-index: 10;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px)
}

.main-header .bg-hover {
    display: none;
    width: 100%;
    height: 274px;
    background: #fff;
    z-index: -1;
    position: absolute;
    top: 79px;
    left: 0;
    -webkit-animation: bg-hover-show .2s ease-out both;
    -webkit-transform-origin: 50% 0
}

.main-header.bg-white {
    background-color: #fff;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .03), 0 3px 14px rgba(0, 0, 0, .06);
    box-shadow: 0 0 4px rgba(0, 0, 0, .03), 0 3px 14px rgba(0, 0, 0, .06);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    -webkit-transition: all .3s;
    transition: all .3s
}

.main-header a {
    position: relative;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap
}

.main-header a:hover {
    color: #307dff
}

.main-header .nav-list {
    margin-left: 64px;
    width: 604px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.main-header .nav-item.active a {
    color: #9452FE !important
}

.main-header .nav-item.active:after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: 15px;
    left: 50%;
    margin-left: -12px;
    width: 24px;
    height: 3px;
    background: #9452FE
}

.main-header .nav-item {
    position: relative;
    height: 80px;
    line-height: 80px
}

.main-header .nav-item.has-pop-nav:hover .contact-pop {
    display: block
}

.main-header .nav-item:after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: 15px;
    left: 50%;
    margin-left: -12px;
    width: 24px;
    height: 3px;
    background: #9452FE;
    -webkit-transition: transform .2s ease-out, opacity .2s ease-out;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scaleX(.01);
    transform: scaleX(.01)
}

.main-header .nav-item:nth-child(2) {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.main-header .nav-item:hover a {
    color: #9452FE !important
}

.main-header .nav-item:hover:after {
    -webkit-transform: scale(1);
    transform: scale(1);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1
}

.main-header .nav-item:hover .nav-item-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.main-header .nav-item .nav-item-list {
    display: none;
    -webkit-animation: menu-item-show .2s ease-out both;
    animation: menu-item-show .2s ease-out both;
    line-height: 16px;
    position: absolute;
    z-index: 1;
    left: -270px;
    top: 79px;
    width: 888px;
    height: 274px;
    border-radius: 0 0 3px 3px;
    text-align: left;
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
}

.main-header .nav-item .nav-item-list .left {
    width: 256px;
    height: 250px;
    border-radius: 8px;
    padding: 32px 24px;
    background: #f4f4f4;
    overflow: hidden
}

.main-header .nav-item .nav-item-list .left p:first-of-type {
    color: #333;
    font-size: 19px;
    font-weight: 600;
    line-height: 19px
}

.main-header .nav-item .nav-item-list .left p:nth-of-type(2) {
    color: #333;
    font-size: 13px;
    font-weight: 400;
    line-height: 13px
}

.main-header .nav-item .nav-item-list .left p:nth-of-type(3) {
    color: #999;
    font-size: 12px;
    font-weight: 400;
    line-height: 19.2px
}

.main-header .nav-item .nav-item-list .left .content {
    color: #999;
    font-size: 12px;
    line-height: 19.2px
}

.main-header .nav-item .nav-item-list .left .symbol {
    width: 18px;
    height: 3px;
    background: #9452FE
}

.main-header .nav-item .nav-item-list .left .bg-img {
    position: absolute;
    left: 50px;
    bottom: 52px
}

.main-header .nav-item .nav-item-list .right {
    width: 607px;
    height: 250px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: 24px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.main-header .nav-item .nav-item-list .right .solution-bg-img {
    background: url(../image/index-header-10.png), #f9f9f9
}

.main-header .nav-item .nav-item-list .right .solution-bg-img:hover {
    background: -webkit-linear-gradient(4deg, #f2f6ff 5.4%, #fbf8ff 94.27%), url(../image/index-header-8.png);
    background: linear-gradient(86deg, #f2f6ff 5.4%, #fbf8ff 94.27%), url(../image/index-header-8.png);
    background-repeat: no-repeat;
    background-blend-mode: color-burn
}

.main-header .nav-item .nav-item-list .right .example-bg-img {
    background: url(../image/index-header-11.png), #f9f9f9;
    width: 186px;
    height: 113px
}

.main-header .nav-item .nav-item-list .right .example-bg-img:hover {
    background: -webkit-linear-gradient(4deg, #f2f6ff 5.4%, #fbf8ff 94.27%), url(../image/index-header-9.png);
    background: linear-gradient(86deg, #f2f6ff 5.4%, #fbf8ff 94.27%), url(../image/index-header-9.png);
    background-repeat: no-repeat;
    background-blend-mode: color-burn
}

.main-header .nav-item .nav-item-list .right li {
    width: 291px;
    height: 113px;
    padding: 16px;
    border-radius: 8px;
    background: #f9f9f9
}

.main-header .nav-item .nav-item-list .right li a {
    font-weight: 400;
    white-space: wrap
}

.main-header .nav-item .nav-item-list .right li:first-of-type {
    margin-bottom: 24px
}

.main-header .nav-item .nav-item-list .right li:hover {
    cursor: pointer;
    background: -webkit-linear-gradient(4deg, #f2f6ff 5.4%, #fbf8ff 94.27%);
    background: linear-gradient(86deg, #f2f6ff 5.4%, #fbf8ff 94.27%)
}

.main-header .nav-item .nav-item-list .right li:hover img:nth-of-type(2) {
    display: none
}

.main-header .nav-item .nav-item-list .right li:hover img:nth-of-type(3) {
    display: block !important
}

.main-header .nav-item .nav-item-list .right li:hover .icon-box {
    border: 1px solid #83b1ff
}

.main-header .nav-item .nav-item-list .right li:hover .icon-box svg:first-of-type {
    display: none
}

.main-header .nav-item .nav-item-list .right li:hover .icon-box svg:nth-of-type(2) {
    display: block !important
}

.main-header .nav-item .nav-item-list .right li:hover .text-hover {
    color: #307dff
}

.main-header .nav-item .nav-item-list .right .about-our-item {
    height: 100%;
    padding: 16px 24px;
    border-radius: 8px;
    background: #f9f9f9
}

.main-header .nav-item .nav-item-list .right .about-our-item svg {
    margin-right: 4px
}

.main-header .nav-item .nav-item-list .right .about-our-item a:hover {
    color: #333
}

.main-header .nav-item .nav-item-list .right .about-our-item .title {
    font-size: 16px;
    font-weight: 600;
    line-height: 100%;
    color: #333 !important
}

.main-header .nav-item .nav-item-list .right .about-our-item:hover {
    background: -webkit-linear-gradient(4deg, #f2f6ff 5.4%, #fbf8ff 94.27%);
    background: linear-gradient(86deg, #f2f6ff 5.4%, #fbf8ff 94.27%)
}

.main-header .nav-item .nav-item-list .right .about-our-item:first-of-type {
    width: 180px
}

.main-header .nav-item .nav-item-list .right .about-our-item:nth-of-type(2) {
    width: 403px;
    cursor: unset;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.main-header .nav-item .nav-item-list .right .about-our-item:nth-of-type(2) .code-box {
    width: 131px;
    height: 129px;
    border-radius: 8px;
    background: #fff;
    padding: 8px
}

.main-header .nav-item .nav-item-list .right .about-our-item:nth-of-type(2) .code-box .bg-img {
    width: 115px;
    height: 113px;
    zoom: 1
}

.main-header .nav-item .nav-item-list .right .title {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.main-header .nav-item .nav-item-list .right .title span {
    color: #333;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px
}

.main-header .nav-item .nav-item-list .right a.title {
    width: 170px;
    height: 111px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.main-header .nav-item .nav-item-list .right .icon-box {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #e4e4e4;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.main-header .nav-item .nav-item-list .right .content {
    color: #999;
    font-size: 12px;
    line-height: 160%;
    white-space: normal
}

.main-header .nav-item .nav-item-list.solution {
    left: -385px
}

.main-header .nav-item .nav-item-list.example {
    left: -500px
}

.main-header .nav-item .nav-item-list.about-our {
    left: -730px
}

.main-header i {
    zoom: .5
}

.main-header .btn {
    padding: 11px 2px;
    font-weight: 700
}

.main-header .user-info {
    position: relative
}

.main-header .user-info .user-avatar {
    zoom: 1;
    width: 36px;
    height: 36px;
    border: 1px solid #eee;
    border-radius: 50%
}

.main-header .user-info>.elp1 {
    color: #333;
    width: 68px
}

.main-header .user-info:hover .user-pop {
    display: block
}

.main-header .user-pop {
    display: none;
    padding-top: 30px;
    position: absolute;
    right: -6px;
    top: 100%
}

.main-header .user-pop .pop-wrap {
    width: 230px;
    background-color: #fff;
    -webkit-filter: drop-shadow(0 0 2px rgba(0, 0, 0, .04)) drop-shadow(0 4px 16px rgba(0, 0, 0, .04));
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .04)) drop-shadow(0 4px 16px rgba(0, 0, 0, .04));
    border-radius: 8px
}

.main-header .user-pop .pop-header {
    position: relative;
    height: 124px;
    background-color: #eaf2ff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    border-radius: 8px 8px 0 0
}

.main-header .user-pop .pop-header>* {
    z-index: 1
}

.main-header .user-pop .pop-header .user-avatar {
    width: 48px;
    height: 48px
}

.main-header .user-pop .pop-header .bg {
    position: absolute;
    bottom: 10px;
    right: 40px;
    z-index: 0
}

.main-header .user-pop .header-item {
    font-size: 13px;
    position: relative;
    padding: 16px 24px;
    color: #666;
    cursor: pointer;
    border-bottom: 1px solid #eee
}

.main-header .user-pop .header-item:hover>span {
    color: #307dff
}

.main-header .user-pop .header-item:first-child:hover .company-pop {
    display: block
}

.main-header .user-pop .pop-footer {
    text-align: center;
    padding: 16px;
    cursor: pointer
}

.main-header .user-pop .pop-footer:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    opacity: .8
}

.main-header .company-pop {
    display: none;
    position: absolute;
    padding-left: 8px;
    top: 0;
    left: 100%
}

.main-header .company-pop .company-wrap {
    background-color: #fff;
    width: 230px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 8px
}

.main-header .company-pop li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 16px 24px
}

.main-header .company-pop li .label {
    width: 158px
}

.main-header .company-pop li.is-active {
    color: #307dff
}

.main-header .company-pop li.is-active .icon-success {
    display: block
}

.main-header .company-pop li .icon-add-active,
.main-header .company-pop li .icon-success {
    display: none
}

.main-header .company-pop li:hover {
    background-color: #f8f8f8
}

.main-header .company-pop li:hover .icon-add-active {
    display: block
}

.main-header .company-pop li:hover .icon-add {
    display: none
}

.main-header .company-pop li:last-child {
    border-top: 1px solid #eee
}

.main-header .company-pop li:last-child:hover {
    background-color: #eaf2ff;
    color: #307dff
}

.main-wrap .swiper {
    --swiper-theme-color: #f60;
    --swiper-pagination-color: #0f3
}

.main-wrap .swiper .swiper-pagination-bullet {
    width: 26px;
    height: 8px;
    border-radius: 32px;
    background: #c1d8ff;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
    -webkit-transition: all .5s;
    transition: all .5s;
    cursor: pointer
}

.main-wrap .swiper .swiper-pagination-bullet-active {
    width: 52px;
    background: #307dff;
    -webkit-transition: all .5s;
    transition: all .5s
}

.main-wrap .swiper .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 32px
}

.main-top-bg {
    /*background: url(../picture/main-baner-2.png);*/
    height: 720px;
    background-size: cover;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: right;
    -webkit-justify-content: right;
    -ms-flex-pack: right;
    justify-content: right
}
/*.main-top-bg {*/
/*    background: url(http://www.bairuanjian.com/assets/img/hero/h1_hero.png);*/
/*    height: 580px;*/
/*    background-size: cover;*/
/*    -webkit-box-align: center;*/
/*    -webkit-align-items: center;*/
/*    -ms-flex-align: center;*/
/*    align-items: center;*/
/*    -webkit-box-pack: right;*/
/*    -webkit-justify-content: right;*/
/*    -ms-flex-pack: right;*/
/*    justify-content: right*/
/*}*/

.main-top-bg>img {
    display: block;
    height: 420px;
    zoom: 1 !important;
    position: absolute;
    left: 90%;
    margin-left: -520px;
    margin-top: 80px;
}

/*.main-top-bg>img {*/
/*    display: block;*/
/*    height: 720px;*/
/*    zoom: 1 !important;*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    margin-left: -500px*/
/*}*/

.main-top-bg>img:nth-child(2) {
    z-index: -1;
    width: 853.5px
}

.product-server .main-container {
    padding-top: 206px !important
}

.product-server .main-top {
    height: 530px
}

.product-server .main-box {
    width: unset
}

.product-server .main-top-bg {
    background: url(../image/product-server-bg-1.png);
    height: 530px;
    position: relative;
    background-size: cover
}

.product-server .main-top-bg img {
    zoom: .5 !important;
    left: 50%;
    margin-left: 690px;
    top: 50%;
    margin-top: -211px;
    height: unset
}

.product-server .mask {
    background: -webkit-linear-gradient(274deg, #fbfcff 4.15%, #f5fbff 96.47%, #f5fbff 0);
    background: linear-gradient(176deg, #fbfcff 4.15%, #f5fbff 96.47%, #f5fbff 0);
    width: 100%;
    height: 100%
}

.product-server .part {
    width: 1200px;
    padding: 120px 0;
    margin: 0 auto;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.product-server .part h2 {
    color: #333;
    font-size: 44px;
    font-weight: 600;
    line-height: 100%
}

.product-server .part h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 100%;
    background: -webkit-gradient(linear, left top, right top, from(#2164df), to(#449aff));
    background: -webkit-linear-gradient(left, #2164df, #449aff);
    background: linear-gradient(90deg, #FF7533, #FF7533);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.product-server .part .item {
    width: 853px;
    margin-top: 80px
}

.product-server .part .item:first-of-type {
    margin-top: 0
}

.product-server .part .item img {
    zoom: .5
}

.product-server .part .sub {
    color: #666;
    font-size: 18px;
    line-height: 160%
}

.product-server .part .symbol {
    width: 50px;
    height: 7px;
    background: #FF7533
}

.product-server .account-manage {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.product-server .account-manage .left {
    position: -webkit-sticky;
    position: sticky;
    top: 200px;
    height: 139px
}

.product-server .content-manage .left {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.product-server .content-manage h3 {
    font-size: 36px
}

.product-server .content-manage .sub {
    margin-top: 40px
}

.product-server .content-manage .item {
    width: 1200px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 120px !important
}

.product-server .content-manage .item .item-right {
    width: 398px
}

.product-server .content-manage .right:nth-of-type(6) .item>img {
    position: relative;
    right: 85px
}

.deal-example .main-top-bg img {
    width: 688px;
    height: 296px;
    zoom: 1 !important;
    margin-left: 230px;
    top: 50%;
    margin-top: -45px
}

.deal-example .user-oriented {
    background: url(../image/to-user-15.png), -webkit-linear-gradient(274deg, #fbfcff 4.15%, #f5fbff 96.47%, #f5fbff 0);
    background: url(../image/to-user-15.png), linear-gradient(176deg, #fbfcff 4.15%, #f5fbff 96.47%, #f5fbff 0);
    background-position: 100% 100%, 50%;
    background-size: 340px 424px, 100% 100%;
    background-repeat: no-repeat, no-repeat
}

.deal-example .user-oriented .content {
    margin-top: 80px
}

.deal-example .user-oriented .content>li {
    width: 288px;
    height: 396px;
    padding: 40px;
    border-radius: 16px;
    background: -webkit-linear-gradient(4deg, #e2f1ff 5.4%, #ecf1ff 94.27%);
    background: linear-gradient(86deg, #e2f1ff 5.4%, #ecf1ff 94.27%);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.deal-example .user-oriented .content>li h3 {
    font-size: 20px;
    color: #FF7533;
    background: none;
    -webkit-text-fill-color: unset
}

.deal-example .user-oriented .content>li .icon {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    /*border: 1px solid #accbff*/
}

.deal-example .user-oriented .content>li ul {
    height: 188px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.deal-example .user-oriented .content>li li {
    width: 208px;
    padding: 16px 32px;
    border-radius: 8px;
    background: #fff;
    background: hsla(0, 0%, 100%, .6);
    height: 90px;
    font-size: 14px
}

.deal-example .user-oriented .content>li li span {
    background: -webkit-gradient(linear, left top, right top, from(#2164df), to(#449aff));
    background: -webkit-linear-gradient(left, #2164df, #449aff);
    background: linear-gradient(90deg, #FF7533, #FF7533);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.deal-example .user-oriented .content>li:nth-of-type(2) li,
.deal-example .user-oriented .content>li:nth-of-type(3) li {
    height: 56px
}

.deal-example .user-oriented .content:nth-of-type(2)>li li,
.deal-example .user-oriented .content:nth-of-type(3)>li li {
    width: 56px
}

.deal-example .scenario-application {
    background: url(../image/scenario-application-2.png), url(../image/scenario-application-3.png) #061530;
    background-repeat: no-repeat, no-repeat;
    background-position: 100% 100%, 250px top;
    height: 898px
}

.deal-example .scenario-application .part {
    height: 100%;
    width: 1334px;
    background-image: url(../image/scenario-application-1.png), url(../image/scenario-application-4.png);
    background-position: center 244px, top;
    background-size: 1298px 534px, 749px 493px;
    background-repeat: no-repeat, no-repeat
}

.deal-example .scenario-application .part h2 {
    color: #fff
}

.deal-example .scenario-application .text {
    position: absolute;
    line-height: 1.6;
    top: 50%;
    left: 50%
}

.deal-example .scenario-application .put {
    margin-top: 50px;
    left: 177px;
    font-size: 13px
}

.deal-example .scenario-application .top {
    margin-top: -176px;
    margin-left: -257px;
    font-size: 14px;
    color: #dceaff
}

.deal-example .scenario-application .top img {
    position: relative;
    top: 6px;
    margin: 0 15px
}

.deal-example .scenario-application .bottom {
    top: unset;
    bottom: 136px;
    margin-left: -162px
}

.deal-example .scenario-application .bottom img {
    rotate: 180deg
}

.deal-example .scenario-application .kol {
    right: 0;
    left: unset;
    margin-right: 169px;
    text-align: center
}

.deal-example .scenario-application .main {
    margin-top: 40px;
    text-align: center;
    line-height: 1.8;
    font-size: 18px
}

.deal-example .scenario-application .main-1 {
    margin-left: -374px
}

.deal-example .scenario-application .main-2 {
    margin-left: -154px
}

.deal-example .scenario-application .main-3 {
    margin-left: 66px
}

.deal-example .scenario-application .main-4 {
    margin-left: 284px
}

.deal-example .scenario-application .btn-text {
    background: #b4d1ff;
    width: 52px;
    height: 13px;
    padding: 8px;
    font-size: 13px;
    color: #000;
    border-radius: 4px;
    font-weight: 500;
    line-height: 13px
}

.deal-example .scenario-application .text-y {
    margin-left: -254px;
    margin-top: -28px
}

.deal-example .scenario-application .text-s {
    margin-left: -34px;
    margin-top: 135px
}

.deal-example .scenario-application .text-j {
    margin-left: 186px;
    margin-top: -29px
}

.deal-example .scenario-application .text-n {
    margin-left: 186px;
    margin-top: 52px
}

.deal-example .scenario-application .text-x {
    margin-left: 186px;
    margin-top: 137px
}

.deal-example .scenario-application .contact-top-left {
    font-size: 14px;
    color: #dceaff;
    margin-left: -329px;
    margin-top: -78px
}

.deal-example .scenario-application .contact-top-right {
    margin-left: 153px;
    margin-top: -78px
}

.deal-example .scenario-application .contact-bottom-right {
    margin-left: 143px;
    margin-top: 196px
}

.deal-example .scenario-application .contact-bottom-left {
    margin-left: -304px;
    margin-top: 196px
}

.deal-example .difficult-questions {
    background: -webkit-linear-gradient(274deg, #fbfcff 4.15%, #f5fbff 96.47%, #f5fbff 0);
    background: linear-gradient(176deg, #fbfcff 4.15%, #f5fbff 96.47%, #f5fbff 0)
}

.deal-example .difficult-questions .part {
    background: url(../image/deal-example-3.png) no-repeat 50%
}

.deal-example .difficult-questions .right {
    width: 924px;
    height: 480px;
    margin: 80px auto 0
}

.deal-example .difficult-questions .right .tab-list {
    background: #f9f9f9;
    border-radius: 16px 0 0 16px
}

.deal-example .difficult-questions .right li {
    width: 324px;
    height: 108px;
    padding: 32px 40px;
    background-color: #f9f9f9;
    font-size: 24px;
    font-weight: 600;
    line-height: 100%
}

.deal-example .difficult-questions .right li:first-of-type {
    border-radius: 16px 0 0 0
}

.deal-example .difficult-questions .right li:nth-of-type(4) {
    padding-left: 64px;
    border-radius: 0 0 0 16px
}

.deal-example .difficult-questions .right li.active {
    background: #fff
}

.deal-example .difficult-questions .right li.active span {
    background: -webkit-gradient(linear, left top, right top, from(#2164df), to(#449aff));
    background: -webkit-linear-gradient(left, #2164df, #449aff);
    background: linear-gradient(90deg, #FF7533, #FF7533);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.deal-example .difficult-questions .right li.active .icon {
    border: 1px solid #FF7533
}

.deal-example .difficult-questions .right li.active .icon svg:first-of-type {
    display: none
}

.deal-example .difficult-questions .right li.active .icon img,
.deal-example .difficult-questions .right li.active .icon svg:nth-of-type(2) {
    display: block
}

.deal-example .difficult-questions .right li .icon {
    border-radius: 8px;
    border: 1px solid #666;
    padding: 10px;
    margin-right: 30px
}

.deal-example .difficult-questions .right li .icon img,
.deal-example .difficult-questions .right li .icon svg:nth-of-type(2) {
    display: none
}

.deal-example .difficult-questions .right .content {
    border-radius: 0 16px 16px 0;
    background: url(../image/deal-example-1.png) #fff no-repeat bottom
}

.deal-example .difficult-questions .right .content .top {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.deal-example .difficult-questions .right .content .symbol {
    width: 56px;
    height: 7px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    opacity: .8;
    background: -webkit-gradient(linear, left top, right top, from(#2168df), to(#72b3ff));
    background: -webkit-linear-gradient(left, #2168df, #72b3ff);
    background: linear-gradient(90deg, #FF7533, #FF7533)
}

.deal-example .difficult-questions .right .content .bottom {
    color: #535353;
    font-size: 18px;
    line-height: 160%
}

.deal-example .difficult-questions .right .content em {
    font-size: 127px;
    font-weight: 700;
    line-height: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    opacity: .1;
    background: -webkit-gradient(linear, left top, left bottom, from(#307dff), to(#659eff));
    background: -webkit-linear-gradient(top, #307dff, #659eff);
    background: linear-gradient(180deg, #FF7533, #FF7533);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.deal-example .difficult-questions .content {
    width: 600px;
    height: 480px;
    padding: 32px 64px;
    background: #fff
}

.deal-example .reserve-wrap {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.user-example .main-top-bg img {
    width: 529px;
    height: 349px;
    margin-left: 282px;
    margin-top: -128px
}

.user-example .user h3 {
    background: none;
    -webkit-text-fill-color: unset
}

.user-example .user .content {
    position: relative;
    margin-top: 40px
}

.user-example .user ul {
    width: 240px;
    height: 573px;
    border-radius: 16px;
    background: #fff;
    padding: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.user-example .user ul li {
    position: relative;
    font-size: 24px;
    z-index: 1;
    width: 100%;
    height: 76px;
    padding: 16px 32px;
    border-radius: 16px;
    color: #666;
    -webkit-transition: all .3s;
    transition: all .3s
}

.user-example .user ul li svg {
    -webkit-transition: all 5s;
    transition: all 5s;
    margin-right: 24px
}

.user-example .user ul li:first-of-type svg:nth-of-type(2),
.user-example .user ul li svg:nth-of-type(2) {
    display: none;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0
}

.user-example .user ul li:first-of-type svg:nth-of-type(2) {
    display: block;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1
}

.user-example .user .hover-tab-bg {
    position: absolute;
    top: 20px;
    left: 20px;
    -webkit-transition: top .3s, height .3s;
    transition: top .3s, height .3s;
    z-index: 0;
    width: 200px;
    height: 76px;
    border-radius: 16px;
    background: -webkit-gradient(linear, left top, right top, from(#2168df), to(#72b3ff));
    background: -webkit-linear-gradient(left, #2168df, #72b3ff);
    background: linear-gradient(90deg, #2168df, #72b3ff)
}

.user-example .user .middle,
.user-example .user .right .main-item {
    width: 616px;
    padding: 64px;
    border-radius: 16px;
    background: #fff
}

.user-example .user .right .main-item {
    height: 573px
}

.user-example .user .right .btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 158px;
    height: 54px;
    color: #307dff;
    font-size: 18px;
    font-weight: 700;
    line-height: 100%;
    border-radius: 43px;
    border: 1px solid #2168df;
    padding: 16px 26px
}

.user-example .user .right p {
    width: 360px;
    color: #666;
    font-size: 20px;
    line-height: 180%;
    margin: 56px 0 64px;
    height: 108px
}

.user-example .user .right .item-img {
    z-index: 1;
    margin-top: -326px
}

.user-example .user .right .filter-bg,
.user-example .user .right .item-img {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    -webkit-transition: all .5s;
    transition: all .5s;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0
}

.user-example .user .right .filter-bg {
    width: 476px;
    height: 620px;
    margin-top: -242px;
    background: #020f30;
    background: rgba(2, 15, 48, .6);
    fill: rgba(2, 15, 48, .6);
    -webkit-filter: blur(72.8499984741211px);
    filter: blur(72.8499984741211px)
}

.user-example .brand-list {
    background: -webkit-linear-gradient(274deg, #f4f7ff 4.15%, #f5fbff 96.47%, #eff8ff 0);
    background: linear-gradient(176deg, #f4f7ff 4.15%, #f5fbff 96.47%, #eff8ff 0)
}

.user-example .brand-list .part {
    height: 847px;
    width: 1540px
}

.user-example .brand-list ul {
    width: 1540px;
    height: 483px;
    margin-top: 80px;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.user-example .brand-list li {
    width: 260px;
    height: 125px;
    border-radius: 16px;
    background: #fff;
    -webkit-box-shadow: 0 39px 49.2px 0 rgba(18, 108, 243, .15), -12px -16px 16px 0 hsla(0, 0%, 100%, .2);
    box-shadow: 0 39px 49.2px 0 rgba(18, 108, 243, .15), -12px -16px 16px 0 hsla(0, 0%, 100%, .2)
}

.user-example .brand-list li img {
    zoom: 1
}

.main-top {
    height: 580px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.main-top .main-container {
    width: 1200px;
    margin: auto;
    position: relative;
    padding-top: 230px;
    z-index: 1;
    overflow: visible
}

.main-top .main-container>p {
    line-height: 1.6;
    color: #666
}

.main-top h1 {
    font-size: 46px;
    font-weight: 600;
    line-height: 160%
}

.main-top h1 span {
    background: -webkit-gradient(linear, left top, right top, from(#2168df), to(#8a52ff));
    background: -webkit-linear-gradient(left, #2168df, #8a52ff);
    background: linear-gradient(90deg, #2168df, #8a52ff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.main-top .btn.btn-primary {
    padding: 18px 40px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 16px;
    width: 180px;
    height: 52px;
    cursor: pointer
}

.main-top img {
    zoom: .5
}

.main-box {
    width: 1200px;
    position: relative;
    margin: auto
}

.main-box img {
    zoom: .5
}

.conceal {
    display: none
}

.rank-dialog-mask {
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    outline: 0;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #000;
    background-color: rgba(0, 0, 0, .5)
}

.rank-dialog-mask .option-box {
    position: fixed;
    top: 70px;
    z-index: 2;
    left: 50%;
    margin-left: 200px
}

.rank-dialog-mask .option-box,
.rank-dialog-mask .option-box .next-btn,
.rank-dialog-mask .option-box .previous-btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.rank-dialog-mask .option-box .next-btn,
.rank-dialog-mask .option-box .previous-btn {
    border-radius: 26px;
    background: #000;
    background: rgba(0, 0, 0, .2);
    width: 26px;
    height: 75px;
    position: relative;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    margin-bottom: 16px;
    cursor: pointer
}

.rank-dialog-mask .option-box .next-btn:hover img,
.rank-dialog-mask .option-box .next-btn:hover span,
.rank-dialog-mask .option-box .previous-btn:hover img,
.rank-dialog-mask .option-box .previous-btn:hover span {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1
}

.rank-dialog-mask .option-box .next-btn span,
.rank-dialog-mask .option-box .previous-btn span {
    display: block;
    width: 13px;
    height: 39px;
    color: #fff;
    color: hsla(0, 0%, 100%, .8);
    font-size: 13px;
    position: relative;
    bottom: 5px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    opacity: .8
}

.rank-dialog-mask .option-box .next-btn img,
.rank-dialog-mask .option-box .previous-btn img {
    position: relative;
    top: 5px
}

.rank-dialog-mask .option-box .close-btn,
.rank-dialog-mask .option-box .download-btn {
    border-radius: 30px;
    width: 26px;
    height: 26px;
    background: #000;
    background: rgba(0, 0, 0, .2);
    position: relative;
    margin-bottom: 16px;
    cursor: pointer
}

.rank-dialog-mask .option-box .close-btn:hover img,
.rank-dialog-mask .option-box .download-btn:hover img {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1
}

.rank-dialog-mask .option-box .close-btn img,
.rank-dialog-mask .option-box .download-btn img {
    position: absolute;
    left: 50%;
    margin-left: -7px;
    top: 50%;
    margin-top: -8px
}

.rank-dialog-mask .option-box img {
    width: 14px;
    height: 14px;
    margin-bottom: 16px;
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    opacity: .8
}

.rank-dialog {
    margin: 60px auto;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.rank-dialog .rank-dialog__body {
    z-index: 1;
    min-height: 370px;
    background-color: #fcfcfc
}

.rank-dialog .rank-dialog-img,
.rank-dialog .rank-dialog__body {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 375px
}

.main-container {
    margin: auto;
    text-align: center;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}

.main-container .platform-icon {
    margin-top: 80px
}

.main-container .bg-img {
    position: absolute;
    zoom: .5
}

.main-container .bg-img.right {
    right: 0;
    bottom: 0
}

.main-container .bg-img.left {
    left: 0;
    bottom: 0
}

.main-container .function-item {
    min-width: 1300px;
    padding-top: 80px;
    position: relative
}

.main-container .function-item [class^=icon-] {
    zoom: .5
}

.main-container .function-item:nth-child(2),
.main-container .function-item:nth-child(4) {
    background: -webkit-gradient(linear, left top, left bottom, from(#f9fbff), to(#f7faff));
    background: -webkit-linear-gradient(top, #f9fbff, #f7faff);
    background: linear-gradient(180deg, #f9fbff, #f7faff)
}

.main-container .function-item>p {
    font-size: 16px
}

.main-container .manage-item {
    height: 1480px;
    background: url(../image/manage-bg.png);
    background-position: 50%;
    background-repeat: no-repeat
}

.main-container .custom-server-item {
    background-image: url(../image/custom-server-4.png), url(../image/custom-server-3.png) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-color: #040e20 !important;
    background-position: top, 50% !important;
    padding: 180px 0
}

.main-container .custom-server-item .function-detail {
    margin-top: 80px;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.main-container .custom-server-item .function-detail .item {
    width: 494px;
    height: 189px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    border-radius: 16px;
    background-image: url(../image/custom-server-6.png), url(../image/custom-server-5.png);
    background-repeat: no-repeat, no-repeat;
    background-color: #122649;
    background-position: 310px, 100%;
    -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, .25);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .25);
    padding: 24px
}

.main-container .custom-server-item .function-detail .item h4 {
    font-size: 24px;
    font-weight: 600;
    line-height: 24px;
    background: -webkit-gradient(linear, left top, right top, from(#fff), color-stop(95.98%, #e3edff)), -webkit-gradient(linear, left top, right top, from(#fff2da), to(#d6e6ff));
    background: -webkit-linear-gradient(left, #fff, #e3edff 95.98%), -webkit-linear-gradient(left, #fff2da, #d6e6ff);
    background: linear-gradient(90deg, #fff, #e3edff 95.98%), linear-gradient(90deg, #fff2da, #d6e6ff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.main-container .custom-server-item .function-detail .item .icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #fef2da;
    padding: 8px
}

.main-container .custom-server-item .function-detail .item h3 {
    background: -webkit-gradient(linear, left top, right top, from(#fff), color-stop(95.98%, #e3edff));
    background: -webkit-linear-gradient(left, #fff, #e3edff 95.98%);
    background: linear-gradient(90deg, #fff, #e3edff 95.98%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.main-container .custom-server-item .function-detail .item p {
    color: #d5deeb;
    font-size: 18px;
    line-height: 160%
}

.main-container .custom-server-item .function-detail .item .contact-button {
    width: 182px;
    height: 46px;
    cursor: pointer;
    line-height: 22px;
    color: #122649;
    font-size: 18px;
    font-weight: 600;
    line-height: 100%;
    padding: 12px 20px;
    border-radius: 43px;
    background: -webkit-gradient(linear, left top, right top, from(#fff2da), to(#d6e6ff)), -webkit-gradient(linear, left top, right top, from(#99c1ff), color-stop(66.09%, #d3f2ff));
    background: -webkit-linear-gradient(left, #fff2da, #d6e6ff), -webkit-linear-gradient(left, #99c1ff, #d3f2ff 66.09%);
    background: linear-gradient(90deg, #fff2da, #d6e6ff), linear-gradient(90deg, #99c1ff, #d3f2ff 66.09%)
}

.main-container .custom-server-item .function-detail .item:nth-of-type(2) {
    width: 674px;
    background-image: url(../image/custom-server-8.png), url(../image/custom-server-7.png);
    background-position: 415px, 100%
}

.main-container .custom-server-item .function-detail .item:nth-of-type(3) {
    width: 831px;
    background-image: url(../image/custom-server-10.png), url(../image/custom-server-9.png);
    background-position: 510px, 100%
}

.main-container .custom-server-item .function-detail .item:nth-of-type(4) {
    width: 337px;
    background-image: none
}

.main-container .custom-server-item .title {
    background: -webkit-gradient(linear, left top, right top, from(#fff2da), to(#d6e6ff));
    background: -webkit-linear-gradient(left, #fff2da, #d6e6ff);
    background: linear-gradient(90deg, #fff2da, #d6e6ff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.main-container .custom-server-item .title img {
    position: absolute;
    right: 0;
    left: 50%;
    margin-left: 155px;
    width: 187px;
    height: 44px
}

.main-container .custom-server-item .contact-btn-wrap .contact-pop {
    display: block;
    left: 50%;
    bottom: 60px;
    -webkit-transform: translate(-60%);
    transform: translate(-60%);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
    z-index: 1
}

.main-container .custom-server-item .contact-btn-wrap .contact-pop p {
    color: #666 !important
}

.main-container .custom-server-item .contact-btn-wrap:hover .contact-pop {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    -webkit-transition: all 1s;
    transition: all 1s
}

.main-container .custom-server-item .contact-btn-wrap img {
    zoom: .5
}

.main-container .example-item {
    background: url(../image/deal-example-4.png);
    background-position: center 100px;
    background-repeat: no-repeat;
    padding: 120px 0
}

.main-container .example-item .function-detail {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.main-container .example-item .tab-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.main-container .example-item .tab-list li {
    width: 276px;
    height: 62px;
    padding: 20px 6px;
    margin-right: 32px;
    border-radius: 12px;
    border: 1px solid #e2ecff;
    font-size: 22px;
    font-weight: 600;
    line-height: 100%;
    background: -webkit-linear-gradient(353deg, #f3f7ff 19.57%, #f1f7ff 92.77%);
    background: linear-gradient(97deg, #f3f7ff 19.57%, #f1f7ff 92.77%)
}

.main-container .example-item .tab-list li.active {
    color: #fff;
    background: url(../image/deal-example-11.png), -webkit-gradient(linear, left top, right top, from(#FF7533), to(#FF7533));
    background: url(../image/deal-example-11.png), -webkit-linear-gradient(left, #FF7533, #FF7533);
    background: url(../image/deal-example-11.png), linear-gradient(90deg, #FF7533, #FF7533);
    -webkit-box-shadow: 0 0 24px 0 rgba(54, 109, 255, .2);
    box-shadow: 0 0 24px 0 rgba(54, 109, 255, .2);
    background-repeat: no-repeat
}

.main-container .example-item .tab-list li.active svg {
    display: none
}

.main-container .example-item .tab-list li.active svg:nth-of-type(2) {
    display: block !important
}

.main-container .example-item .tab-list li svg {
    margin-right: 10px
}

.main-container .example-item .tab-list li:nth-of-type(4) {
    margin-right: 0
}

.main-container .example-item .content {
    width: 1200px;
    height: 578px;
    padding: 56px 56px 64px;
    margin-top: 48px;
    border-radius: 16px;
    background: #fff
}

.main-container .example-item .content .content-top-left {
    text-align: left
}

.main-container .example-item .content .content-top-left h2 {
    color: #333;
    font-size: 40px;
    font-weight: 600;
    line-height: 100%
}

.main-container .example-item .content .content-top-left h2 span {
    color: #FF7533
}

.main-container .example-item .content .content-top-left p {
    color: #b9b9b9;
    font-size: 18px;
    line-height: 100%;
    margin-bottom: 56px
}

.main-container .example-item .content .content-bottom {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.main-container .example-item .content .content-bottom .item {
    width: 455px;
    height: 320px;
    text-align: left;
    border-radius: 16px;
    border: 2px solid #efefef;
    background: url(../image/deal-example-2.png) #f8f8f8 no-repeat;
    background-position: 124px 24px;
    padding: 24px 16px
}

.main-container .example-item .content .content-bottom .item h3 {
    font-size: 18px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 37px
}

.main-container .example-item .content .content-bottom .item h3 svg {
    margin-right: 8px
}

.main-container .example-item .content .content-bottom .item p {
    color: #999;
    font-size: 16px;
    line-height: 160%;
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline
}

.main-container .example-item .content .content-bottom .item p .circle {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #999;
    margin-right: 12px
}

.main-container .example-item .content .content-bottom .icon-right2 {
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.main-container .example-item .content .content-bottom .item-right {
    width: 580px;
    border: 2px solid #FF7533;
    background: url(../image/deal-example-31.png) #FF7533 no-repeat;
    background-position: 124px 24px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.main-container .example-item .content .content-bottom .item-right h3 {
    color: #fff
}

.main-container .example-item .content .content-bottom .item-right p {
    color: #fff
}

.main-container .example-item .content .content-bottom .item-right p .circle {
    background: #fff
}

.main-container .example-item .content .content-bottom .item-right .right {
    width: 144px;
    border-left: 1px solid #dce9ff;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around
}

.main-container .example-item .content .content-bottom .item-right .right,
.main-container .example-item .content .content-bottom .item-right .right .data-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.main-container .example-item .content .content-bottom .item-right .right .data-item {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.main-container .example-item .content .content-bottom .item-right .right .data-item .num {
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    line-height: 100%
}

.main-container .example-item .content .content-bottom .item-right .right .data-item .text {
    color: #fff;
    font-size: 15px;
    line-height: 15px
}

.main-container .advantage-item {
    padding: 80px 0
}

.main-container .advantage-item .function-detail {
    position: relative
}

.main-container .advantage-item .function-detail .left img {
    zoom: .5
}

.main-container .advantage-item .function-detail .right {
    width: 360px;
    margin-left: 40px;
    z-index: auto
}

.main-container .advantage-item .function-detail .right .box {
    width: 360px;
    margin-bottom: 16px;
    text-align: left;
    position: relative;
    border-radius: 8px;
    background: #fff;
    padding: 32px 24px;
    -webkit-box-shadow: 0 0 24px 0 #e0efff;
    box-shadow: 0 0 24px 0 #e0efff
}

.main-container .advantage-item .function-detail .right .box:last-child {
    margin-bottom: 0
}

.main-container .advantage-item .function-detail .right .box h3 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-size: 20px;
    font-weight: 600;
    line-height: 1
}

.main-container .advantage-item .function-detail .right .box p {
    font-size: 16px;
    line-height: 1.6;
    margin-top: 20px
}

.main-container .advantage-item .function-detail .right .box svg {
    margin-right: 12px
}

.main-container .manage-item .function-detail {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.main-container .manage-item .function-detail .button {
    width: 168px;
    height: 48px;
    padding: 12px 20px;
    border-radius: 37px;
    border: 1px solid #FF7533
}

.main-container .manage-item .function-detail .button .text {
    font-size: 18px;
    font-weight: 600;
    background: -webkit-gradient(linear, left top, right top, from(#FF7533), to(#FF7533));
    background: -webkit-linear-gradient(left, #FF7533, #FF7533);
    background: linear-gradient(90deg, #FF7533, #FF7533);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.main-container .manage-item .function-detail .desc-text {
    font-size: 16px;
    text-align: left;
    line-height: 160%
}

.main-container .manage-item .function-detail .part {
    border-radius: 16px;
    background: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-shadow: 0 3px 28px 0 rgba(0, 0, 0, .05);
    box-shadow: 0 3px 28px 0 rgba(0, 0, 0, .05)
}

.main-container .manage-item .function-detail .part1 {
    width: 1200px;
    height: 366px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around
}

.main-container .manage-item .function-detail .part1 .left {
    width: 313px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.main-container .manage-item .function-detail .part1 .right {
    zoom: .5
}

.main-container .manage-item .function-detail .part2 {
    width: 1200px;
    height: 833px
}

.main-container .manage-item .function-detail .part2 .part {
    width: 588px;
    height: 833px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.main-container .manage-item .function-detail .part2 .left-top {
    height: 477px;
    padding: 32px 48px 12px 40px
}

.main-container .manage-item .function-detail .part2 .left-top .bottom {
    height: 449px;
    position: relative;
    bottom: 102px;
    zoom: .5
}

.main-container .manage-item .function-detail .part2 .left-bottom {
    height: 332px;
    padding: 32px 40px
}

.main-container .manage-item .function-detail .part2 .left-bottom .bottom {
    zoom: .5
}

.main-container .manage-item .function-detail .part2 .right-top {
    height: 627px;
    padding: 32px 40px
}

.main-container .manage-item .function-detail .part2 .right-top .bottom {
    zoom: .5
}

.main-container .manage-item .function-detail .part2 .right-bottom {
    height: 182px;
    padding: 24px 42px;
    text-align: left
}

.main-container .manage-item .function-detail .part2 .right-bottom p {
    font-size: 24px;
    font-weight: 600;
    line-height: 160%
}

.main-container .function-item-wrap {
    position: relative;
    z-index: 1;
    width: 1200px;
    margin: auto
}

.main-container .function-item-wrap>.sub-title {
    margin-top: 24px;
    color: #999;
    font-size: 18px
}

.main-container h3 {
    font-size: 44px;
    font-weight: 600
}

.main-container .function-detail {
    margin-top: 56px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.main-container .function-detail .know-more {
    width: 106px;
    height: 45px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    padding: 12px 20px;
    border-radius: 43px;
    background: -webkit-gradient(linear, left top, right top, from(#FF7533), color-stop(96.88%, #FF7533));
    background: -webkit-linear-gradient(left, #FF7533, #FF7533 96.88%);
    background: linear-gradient(90deg, #FF7533, #FF7533 96.88%)
}

.main-container .function-info {
    text-align: left;
    max-width: calc(100% - 672px)
}

.main-container .function-info .function-box {
    padding: 16px;
    cursor: pointer
}

.main-container .function-info .function-box [class^=icon-] {
    display: block
}

.main-container .function-info .function-box [class$=-active] {
    display: none
}

.main-container .function-info .function-box.is-active,
.main-container .function-info .function-box:hover {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .04);
    box-shadow: 0 0 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .04)
}

.main-container .function-info .function-box.is-active [class^=icon-],
.main-container .function-info .function-box:hover [class^=icon-] {
    display: none
}

.main-container .function-info .function-box.is-active [class$=-active],
.main-container .function-info .function-box:hover [class$=-active] {
    display: block
}

.main-container .function-info .function-box.is-active b,
.main-container .function-info .function-box:hover b {
    color: #333
}

.main-container .function-info .function-box b {
    color: #999;
    font-size: 18px;
    margin-left: 10px
}

.main-container .function-info .function-box ul {
    margin-top: 16px;
    line-height: 21px;
    color: #666;
    list-style: disc outside none;
    list-style: initial;
    padding-left: 16px
}

.main-container .function-info .function-box+.function-box {
    margin-top: 16px
}

@-webkit-keyframes width-auto {
    0% {
        width: 0
    }

    to {
        width: calc(100% - 32px)
    }
}

@keyframes width-auto {
    0% {
        width: 0
    }

    to {
        width: calc(100% - 32px)
    }
}

@-webkit-keyframes menu-item-show {
    0% {
        -webkit-transform: translateY(-30px);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0
    }

    to {
        -webkit-transform: translate(0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1
    }
}

@keyframes menu-item-show {
    0% {
        -webkit-transform: translateY(-30px);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0
    }

    to {
        -webkit-transform: translate(0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1
    }
}

@-webkit-keyframes bg-hover-show {
    0% {
        -webkit-transform: scaleY(.5);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0
    }

    to {
        -webkit-transform: scale(1);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1
    }
}

@keyframes bg-hover-show {
    0% {
        -webkit-transform: scaleY(.5);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0
    }

    to {
        -webkit-transform: scale(1);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1
    }
}

.main-container .function-tabs {
    color: #333;
    font-size: 18px;
    white-space: nowrap
}

.main-container .function-tabs li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 12px 16px;
    border-radius: 36px
}

.main-container .function-tabs li+li {
    margin-left: 8px
}

.main-container .function-tabs li:not(.is-active) {
    cursor: pointer
}

.main-container .function-tabs li [class$=-active] {
    display: none
}

.main-container .function-tabs li.is-active {
    font-weight: 600;
    color: #307dff;
    position: relative
}

.main-container .function-tabs li.is-active [class^=icon-] {
    display: none
}

.main-container .function-tabs li.is-active [class$=-active] {
    display: block
}

.main-container .function-tabs li.is-active:after {
    content: "";
    position: absolute;
    top: calc(100% - 8px);
    left: 16px;
    -webkit-animation: width-auto 5.4s linear;
    animation: width-auto 5.4s linear;
    height: 4px;
    background-color: #307dff;
    border-radius: 0 8px 8px 0
}

.main-container .function-tabs li:hover {
    color: #307dff
}

.main-container .function-tabs li:hover [class^=icon-] {
    display: none
}

.main-container .function-tabs li:hover [class$=-active] {
    display: block
}

.main-container .function-content {
    margin-top: 32px;
    height: 210px;
    font-size: 16px;
    color: #666;
    line-height: 1.5
}

.main-container .function-content [class^=icon-] {
    zoom: .5
}

.main-container .function-content ul {
    padding-left: 24px;
    line-height: 21px
}

.main-container .function-content li {
    position: relative
}

.main-container .function-content li:first-child {
    margin-bottom: 40px
}

.main-container .function-content li:first-child b {
    margin-left: 16px;
    color: #333
}

.main-container .function-content li+li {
    list-style: disc outside none;
    list-style: initial;
    margin-left: 16px;
    margin-top: 10px
}

.main-container .btn {
    font-size: 16px;
    padding: 16px 23px
}

.personal-wrap {
    min-width: 1800px;
    position: relative;
    margin-bottom: 58px;
    background-color: #307dff;
    -webkit-box-sizing: border-box;
    height: 250px;
    box-sizing: border-box;
    text-align: left;
    color: #fff
}

.personal-wrap .main-box,
.personal-wrap h3,
.personal-wrap p {
    position: relative;
    z-index: 1
}

.personal-wrap .main-box {
    width: 1200px;
    margin: auto;
    padding-top: 56px;
    padding-left: 88px
}

.personal-wrap .main-box .bg-img {
    right: 128px;
    top: 0
}

.personal-wrap .personal-content {
    margin-top: 48px
}

.personal-wrap .personal-content+.personal-content {
    margin-top: 16px
}

.personal-wrap .personal-content [class^=icon-] {
    zoom: .5
}

.customer-sample {
    width: 100%;
    height: 494px;
    margin: 56px auto 0;
    border-radius: 24px;
    overflow: hidden;
    background-color: #fff;
    -webkit-box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .04), 0 0 2px 0 rgba(0, 0, 0, .04);
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .04), 0 0 2px 0 rgba(0, 0, 0, .04);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.customer-sample>.left {
    line-height: 1.6;
    background-color: #f8f8f8;
    font-size: 16px;
    width: 96px;
    position: relative;
    z-index: 1
}

.customer-sample>.left li {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 16px;
    cursor: pointer;
    height: 50%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #666
}

.customer-sample>.left li [class$=-active] {
    display: none
}

.customer-sample>.left li:hover {
    color: #307dff
}

.customer-sample>.left li:hover [class^=icon-] {
    display: none
}

.customer-sample>.left li:hover [class$=-active] {
    display: block
}

.customer-sample>.left .is-active {
    background-color: #fff;
    color: #307dff
}

.customer-sample>.left .is-active [class^=icon-] {
    display: none
}

.customer-sample>.left .is-active [class$=-active] {
    display: block
}

.customer-sample>.right {
    width: 1040px;
    padding: 32px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-box-sizing: initial;
    box-sizing: initial
}

.customer-sample>.right:last-child {
    display: none
}

.customer-sample .sample-header {
    position: relative
}

.customer-sample .sample-header .title {
    position: relative;
    font-weight: 700;
    font-size: 24px;
    color: #307dff;
    padding-left: 16px
}

.customer-sample .sample-header .title:before {
    content: "";
    left: 0;
    width: 4px;
    height: 20px;
    border-radius: 4px;
    background-color: #307dff
}

.customer-sample .sample-header .index,
.customer-sample .sample-header .title:before {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.customer-sample .sample-header .index {
    z-index: -1;
    left: calc(100% - 17px);
    font-family: Barlow;
    font-size: 71px;
    font-weight: 500;
    color: #eaf2ff
}

.customer-sample .sample-header li {
    border-radius: 8px;
    background-color: #f8f8f8;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 8px 16px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #999;
    white-space: nowrap
}

.customer-sample .sample-header li+li {
    margin-left: 8px
}

.customer-sample .sample-header li .ft-bar {
    color: #666
}

.customer-sample .sample-header li svg {
    width: 14px
}

.customer-sample .sample-body {
    text-align: left;
    position: relative
}

.customer-sample .sample-body .title {
    position: relative;
    font-weight: 600;
    font-size: 16px
}

.customer-sample .sample-body ul {
    list-style: disc outside none;
    list-style: initial;
    margin-left: 40px;
    line-height: 1.5
}

.customer-sample .sample-body ul li+li {
    margin-top: 16px
}

.customer-sample .sample-body .pointing-box {
    width: 55px;
    height: 35px;
    margin: 0 16px
}

.customer-sample .sample-before {
    height: 368px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 378px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 24px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    grid-gap: 16px;
    gap: 16px;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    color: #999;
    border-radius: 24px;
    border: 1px solid #f3f3f3;
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fcfcfc));
    background: -webkit-linear-gradient(top, #fbfbfb, #fcfcfc);
    background: linear-gradient(180deg, #fbfbfb, #fcfcfc);
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(hsla(0, 0%, 99%, 0)));
    background: -webkit-linear-gradient(top, #fbfbfb, hsla(0, 0%, 99%, 0));
    background: linear-gradient(180deg, #fbfbfb, hsla(0, 0%, 99%, 0))
}

.customer-sample .sample-before .title {
    position: relative;
    color: #333;
    font-weight: 600;
    font-size: 16px;
    padding: 19px 0
}

.customer-sample .sample-before h4 {
    position: relative
}

.customer-sample .sample-before h4:after {
    content: "Before";
    width: 300px;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-family: Barlow;
    font-size: 98px;
    font-style: italic;
    font-weight: 700;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
    opacity: .15;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(55.21%, #bcbcbc), to(#bcbcbc));
    background: -webkit-linear-gradient(top, #bcbcbc 55.21%, #bcbcbc);
    background: linear-gradient(180deg, #bcbcbc 55.21%, #bcbcbc);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(55.21%, #bcbcbc), to(hsla(0, 0%, 74%, 0)));
    background: -webkit-linear-gradient(top, #bcbcbc 55.21%, hsla(0, 0%, 74%, 0));
    background: linear-gradient(180deg, #bcbcbc 55.21%, hsla(0, 0%, 74%, 0));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.customer-sample .icon-right2 {
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    left: 700px
}

.customer-sample .icon-right2,
.customer-sample .sample-after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
    position: absolute
}

.customer-sample .sample-after {
    left: 400px;
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
    width: 604px;
    height: 368px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #307dff;
    padding: 24px;
    border: 1px solid #5997ff;
    border-radius: 16px;
    border: 1px solid #d6e5ff;
    border: 1px solid var(--color-primary-light-8, #d6e5ff);
    background: -webkit-gradient(linear, left top, left bottom, from(#eef4ff), to(#eef4ff));
    background: -webkit-linear-gradient(top, #eef4ff, #eef4ff);
    background: linear-gradient(180deg, #eef4ff, #eef4ff);
    background: -webkit-gradient(linear, left top, left bottom, from(#eef4ff), to(rgba(238, 244, 255, .28)));
    background: -webkit-linear-gradient(top, #eef4ff, rgba(238, 244, 255, .28));
    background: linear-gradient(180deg, #eef4ff, rgba(238, 244, 255, .28))
}

.customer-sample .sample-after .title {
    padding: 15px 0
}

.customer-sample .sample-after h4:after {
    content: "After";
    position: absolute;
    left: 65px;
    top: 50%;
    width: 300px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-family: Barlow;
    font-size: 98px;
    font-style: italic;
    font-weight: 700;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    opacity: .1;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(55.21%, #4a8eff), to(#bcbcbc));
    background: -webkit-linear-gradient(top, #4a8eff 55.21%, #bcbcbc);
    background: linear-gradient(180deg, #4a8eff 55.21%, #bcbcbc);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(55.21%, #4a8eff), to(hsla(0, 0%, 74%, 0)));
    background: -webkit-linear-gradient(top, #4a8eff 55.21%, hsla(0, 0%, 74%, 0));
    background: linear-gradient(180deg, #4a8eff 55.21%, hsla(0, 0%, 74%, 0));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.customer-sample .sample-after ul {
    color: #5997ff
}

.customer-sample .sample-after .right {
    margin-left: 16px;
    border-left: 1px solid #d6e5ff
}

.customer-sample .sample-after .right ul {
    margin-left: 0
}

.customer-sample .sample-after .right ul li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 104px;
    padding: 20px 0 20px 24px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    grid-gap: 16px;
    gap: 16px
}

.customer-sample .sample-after .right ul li+li {
    margin-top: 0
}

.customer-sample .sample-after .right .num {
    line-height: 1;
    font-family: Barlow;
    font-size: 32px;
    font-weight: 600;
    color: #307dff
}

.customer-sample .sample-after .right .label {
    line-height: 1;
    color: #83b1ff;
    font-size: 16px
}

.reserve-wrap {
    -webkit-box-sizing: border-box;
    width: 1200px;
    height: 440px;
    margin: 120px auto;
    padding: 143px 264px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background: url(../image/reserve-item-1.png) #061530;
    border-radius: 24px;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
    background-size: 1200px 440px;
    -webkit-transition: all 2s;
    transition: all 2s
}

.reserve-wrap,
.reserve-wrap button,
.reserve-wrap p {
    position: relative
}

.reserve-wrap .main-box>img {
    zoom: .5;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
}

.reserve-wrap .contact-btn-wrap .contact-pop {
    z-index: 1;
    bottom: 70px
}

.reserve-wrap .contact-btn-wrap:hover .consult {
    position: relative;
    background: -webkit-linear-gradient(5deg, #bbd7ff -.28%, #d0e4ff -.27%, #fff 92.61%);
    background: linear-gradient(85deg, #bbd7ff -.28%, #d0e4ff -.27%, #fff 92.61%);
    border: none;
    color: #1355c4;
    -webkit-text-fill-color: unset
}

.reserve-wrap .contact-btn-wrap:hover .contact-pop {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    -webkit-transition: all 1s;
    transition: all 1s
}

.reserve-wrap .btn {
    width: 180px;
    height: 56px;
    margin-top: 40px;
    background: -webkit-linear-gradient(6deg, #bbd7ff .08%, #d0e4ff .09%, #fff 92.61%);
    background: linear-gradient(84deg, #bbd7ff .08%, #d0e4ff .09%, #fff 92.61%);
    color: #FF7533;
    border-radius: 8px;
    padding: 13px 20px;
    border: 1px solid #d4e5ff;
    font-weight: 700;
    font-size: 16px
}

.reserve-wrap .consult {
    border: 1px solid #d4e5ff;
    background-color: none;
    background: -webkit-linear-gradient(5deg, #bbd7ff 2.42%, #d0e4ff 2.43%, #fff 92.61%);
    background: linear-gradient(85deg, #bbd7ff 2.42%, #d0e4ff 2.43%, #fff 92.61%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.reserve-wrap .consult span {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -90px;
    margin-top: -28px;
    z-index: 1
}

.reserve-wrap .free-btn:hover {
    color: #5794fa
}

.main-footer {
    min-height: 400px;
    background-color: #fff;
    padding-top: 80px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap
}

.main-footer .img {
    zoom: .5
}

.main-footer .footer-wrap {
    width: 1200px;
    margin: auto;
    color: #fff;
    color: hsla(0, 0%, 100%, .6);
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.main-footer .footer-wrap>div {
    margin-left: 200px
}

.main-footer .footer-wrap>div:first-child {
    margin-left: 0
}

.main-footer .footer-wrap dl a {
    color: #fff;
    color: hsla(0, 0%, 100%, .6)
}

.main-footer .footer-wrap dl+dl {
    margin-left: 100px
}

.main-footer .footer-wrap dl dt {
    font-size: 16px;
    color: #fff;
    margin-bottom: 32px
}

.main-footer .footer-wrap dl dd {
    margin-top: 24px
}

.main-footer .footer-wrap dl dd:first-child {
    margin-top: 0
}

.main-footer .qrcode-wrap .qrcode-item {
    background-color: #454545;
    border-radius: 8px;
    padding: 16px 20px;
    text-align: center;
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
    color: #fff
}

.main-footer .qrcode-wrap .qrcode-item+.qrcode-item {
    margin-left: 26px
}

.main-footer .qrcode-wrap .official-qrcode {
    zoom: .5;
    width: 160px;
    height: 160px;
    background: url(../image/qrcodes.png) -10px -10px
}

.main-footer .qrcode-wrap .contact {
    zoom: .5;
    background: url(../image/contact-qrcode.png) no-repeat 50%
}

.main-footer .copyright-box {
    position: absolute;
    bottom: 12px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    color: #fff;
    color: hsla(0, 0%, 100%, .3)
}

.main-footer .copyright {
    margin-right: 6px
}

.main-footer .gongan {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.main-footer .gongan img {
    margin-left: 6px;
    padding-right: 6px;
    width: 14px;
    height: 14px
}

.bg-app-1-1 {
    left: 24px;
    top: 46px;
    width: 1182px;
    height: 704px;
    background: url(../image/demo-app.png) -10px -10px
}

.bg-app-1-2 {
    bottom: 28px;
    right: 100px;
    width: 1026px;
    height: 122px;
    background: url(../image/demo-app.png) -1114px -734px
}

.bg-app-2-1 {
    top: 20px;
    left: 24px;
    width: 1184px;
    height: 638px;
    background: url(../image/demo-app.png) -1212px -10px
}

.bg-app-2-2 {
    bottom: 20px;
    right: 24px;
    width: 1084px;
    height: 204px;
    background: url(../image/demo-app.png) -10px -734px
}

.bg-business-1-1 {
    top: 52px;
    left: 24px;
    width: 1144px;
    height: 632px;
    background: url(../image/demo-business.png) -10px -10px
}

.bg-business-1-2 {
    bottom: 88px;
    right: 24px;
    width: 1122px;
    height: 136px;
    background: url(../image/demo-business.png) -1126px -890px
}

.bg-business-1-2.small {
    zoom: .4 !important;
    bottom: 20px
}

.bg-business-2-1 {
    top: 16px;
    left: 30px;
    width: 1096px;
    height: 488px;
    background: url(../image/demo-business.png) -10px -662px
}

.bg-business-2-2 {
    right: 66px;
    bottom: 16px;
    width: 778px;
    height: 492px;
    background: url(../image/demo-business.png) -10px -1572px
}

.bg-business-3-1 {
    top: 54px;
    left: 14px;
    width: 1218px;
    height: 284px;
    background: url(../image/demo-business.png) -808px -1572px
}

.bg-business-3-2 {
    bottom: 56px;
    left: 14px;
    width: 1218px;
    height: 382px;
    background: url(../image/demo-business.png) -10px -1170px
}

.bg-business-4-1 {
    top: 18px;
    left: 26px;
    width: 1092px;
    height: 208px;
    background: url(../image/demo-business.png) -1126px -662px
}

.bg-business-4-2 {
    right: 18px;
    bottom: 26px;
    width: 1090px;
    height: 612px;
    background: url(../image/demo-business.png) -1174px -10px
}

.bg-brand-1-1 {
    top: 6px;
    left: 214px;
    width: 830px;
    height: 202px;
    background: url(../image/demo-brand.png) -948px -371px
}

.bg-brand-1-2 {
    top: 170px;
    left: 100px;
    width: 856px;
    height: 341px;
    background: url(../image/demo-brand.png) -948px -10px
}

.bg-brand-1-3 {
    right: 100px;
    bottom: 32px;
    width: 804px;
    height: 362px;
    background: url(../image/demo-brand.png) -10px -634px
}

.bg-brand-2-1 {
    top: 20px;
    left: 24px;
    width: 580px;
    height: 364px;
    background: url(../image/demo-brand.png) -10px -1016px
}

.bg-brand-2-2 {
    top: 30px;
    right: 26px;
    width: 582px;
    height: 324px;
    z-index: 3;
    background: url(../image/demo-brand.png) -834px -634px
}

.bg-brand-2-3 {
    left: 114px;
    bottom: 20px;
    width: 918px;
    height: 604px;
    background: url(../image/demo-brand.png) -10px -10px
}

.bg-content-1-1 {
    top: 28px;
    left: 22px;
    width: 1014px;
    height: 218px;
    background: url(../image/demo-content.png) -10px -1496px
}

.bg-content-1-2 {
    right: 20px;
    bottom: 28px;
    width: 1108px;
    height: 582px;
    background: url(../image/demo-content.png) -1060px -10px
}

.bg-content-2-1 {
    top: 8px;
    right: 24px;
    z-index: 2;
    width: 1030px;
    height: 722px;
    background: url(../image/demo-content.png) -10px -10px
}

.bg-content-2-2 {
    left: 10px;
    bottom: 14px;
    width: 1062px;
    height: 166px;
    background: url(../image/demo-content.png) -1044px -1496px
}

.bg-content-3-1 {
    top: 200px;
    right: 8px;
    width: 1212px;
    height: 468px;
    background: url(../image/demo-content.png) -10px -752px
}

.bg-content-3-2 {
    left: 16px;
    bottom: 128px;
    width: 1248px;
    height: 236px;
    background: url(../image/demo-content.png) -10px -1240px
}

.icon-hot {
    background: url(../image/icon-list-content.png) -10px -10px
}

.icon-hot,
.icon-send {
    width: 64px;
    height: 64px
}

.icon-send {
    background: url(../image/icon-list-content.png) -94px -10px
}

.icon-file {
    width: 64px;
    height: 64px;
    background: url(../image/icon-list-content.png) -10px -94px
}

.icon-reserve {
    width: 64px;
    height: 64px;
    background: url(../image/icon-list-content.png) -94px -94px
}

.icon-personal {
    width: 36px;
    height: 36px;
    background: url(../image/icon-list.png) -66px -122px
}

.icon-personal-active {
    width: 36px;
    height: 36px;
    background: url(../image/icon-list.png) -122px -122px
}

.icon-report {
    width: 36px;
    height: 36px;
    background: url(../image/icon-list.png) -178px -122px
}

.icon-report-active {
    width: 36px;
    height: 36px;
    background: url(../image/icon-list.png) -10px -178px
}

.icon-source {
    width: 36px;
    height: 36px;
    background: url(../image/icon-list.png) -66px -178px
}

.icon-source-active {
    width: 36px;
    height: 36px;
    background: url(../image/icon-list.png) -122px -178px
}

.icon-assistant {
    width: 36px;
    height: 36px;
    background: url(../image/icon-list.png) -178px -178px
}

.icon-assistant-active {
    width: 36px;
    height: 36px;
    background: url(../image/icon-list.png) -234px -10px
}

.icon-data {
    width: 36px;
    height: 36px;
    background: url(../image/icon-list.png) -234px -66px
}

.icon-success {
    width: 32px;
    height: 32px;
    background: url(../image/header-icon.png) -10px -10px
}

.icon-add {
    width: 26px;
    height: 26px;
    background: url(../image/header-icon.png) -10px -62px
}

.icon-add-active {
    width: 26px;
    height: 26px;
    background: url(../image/header-icon.png) -56px -62px
}

.icon-down {
    width: 32px;
    height: 32px;
    background: url(../image/header-icon.png) -62px -10px
}

.icon-right {
    width: 26px;
    height: 26px;
    background: url(../image/header-icon.png) -114px -10px
}

.icon-level {
    width: 48px;
    height: 48px;
    background: url(../image/icon-list2.png) -178px -10px
}

.icon-level-active {
    width: 48px;
    height: 48px;
    background: url(../image/icon-list2.png) -178px -78px
}

.icon-lock {
    width: 28px;
    height: 28px;
    background: url(../image/icon-list2.png) -60px -246px
}

.icon-matrix {
    width: 48px;
    height: 48px;
    background: url(../image/icon-list2.png) -10px -178px
}

.icon-matrix-active {
    width: 48px;
    height: 48px;
    background: url(../image/icon-list2.png) -78px -178px
}

.icon-matrix-rank {
    width: 64px;
    height: 64px;
    background: url(../image/icon-list2.png) -10px -10px
}

.icon-monitor {
    width: 64px;
    height: 64px;
    background: url(../image/icon-list2.png) -94px -10px
}

.icon-operate {
    width: 48px;
    height: 48px;
    background: url(../image/icon-list2.png) -146px -178px
}

.icon-operate-active {
    width: 48px;
    height: 48px;
    background: url(../image/icon-list2.png) -246px -10px
}

.icon-personal {
    width: 28px;
    height: 28px;
    background: url(../image/icon-list2.png) -108px -246px
}

.icon-report {
    width: 64px;
    height: 64px;
    background: url(../image/icon-list2.png) -10px -94px
}

.icon-source {
    width: 48px;
    height: 48px;
    background: url(../image/icon-list2.png) -246px -78px
}

.icon-source-active {
    width: 48px;
    height: 48px;
    background: url(../image/icon-list2.png) -246px -146px
}

.icon-check {
    width: 30px;
    height: 30px;
    background: url(../image/icon-list2.png) -10px -246px
}

.icon-data {
    width: 64px;
    height: 64px;
    background: url(../image/icon-list2.png) -94px -94px
}

.bg-2-r {
    width: 615px;
    height: 842px;
    background: url(../image/bg-list.png) -1420px -10px
}

.bg-3 {
    width: 752px;
    height: 462px;
    background: url(../image/bg-list.png) -1518px -1826px
}

.bg-4-l {
    width: 632px;
    height: 724px;
    background: url(../image/bg-list.png) -2055px -10px
}

.bg-4-r {
    width: 710px;
    height: 720px;
    background: url(../image/bg-list.png) -684px -530px
}

.bg-5-c {
    width: 754px;
    height: 500px;
    background: url(../image/bg-list.png) -10px -1826px
}

.bg-5-l {
    width: 1390px;
    height: 500px;
    background: url(../image/bg-list.png) -10px -10px
}

.bg-5-r {
    width: 714px;
    height: 500px;
    background: url(../image/bg-list.png) -784px -1826px
}

.bg-1 {
    width: 846px;
    height: 452px;
    background: url(../image/bg-list.png) -10px -1354px
}

.bg-2-l {
    width: 654px;
    height: 804px;
    background: url(../image/bg-list.png) -10px -530px
}

.bg-6-r {
    width: 952px;
    height: 520px;
    background: url(../image/bg-list2.png) -10px -10px
}

.bg-6-l {
    width: 846px;
    height: 452px;
    background: url(../image/bg-list2.png) -982px -10px
}

.icon-car {
    width: 80px;
    height: 80px;
    background: url(../image/icon-list-sample.png) -10px -10px
}

.icon-car-active {
    width: 80px;
    height: 80px;
    background: url(../image/icon-list-sample.png) -110px -10px
}

.icon-company {
    width: 80px;
    height: 80px;
    background: url(../image/icon-list-sample.png) -10px -110px
}

.icon-company-active {
    width: 80px;
    height: 80px;
    background: url(../image/icon-list-sample.png) -110px -110px
}

.icon-key {
    background: url(../image/icon-list-sample.png) -283px -10px
}

.icon-key,
.icon-plan {
    width: 64px;
    height: 64px
}

.icon-plan {
    background: url(../image/icon-list-sample.png) -283px -94px
}

.icon-right2 {
    margin: 0 32px;
    width: 53px;
    height: 92px;
    background: url(../image/icon-list-sample.png) -210px -10px
}

.icon-header-account {
    width: 32px;
    height: 32px;
    background: url(../image/index-header-2.png)
}

.icon-header-content {
    width: 32px;
    height: 32px;
    background: url(../image/index-header-3.png)
}

.icon-header-manage {
    width: 32px;
    height: 32px;
    background: url(../image/index-header-5.png)
}

.icon-header-serve {
    width: 32px;
    height: 32px;
    background: url(../image/index-header-4.png)
}

.icon-header-go {
    width: 32px;
    height: 32px;
    background: url(../image/index-header-7.png)
}

.icon-header-go-hover {
    width: 32px;
    height: 32px;
    background: url(../image/index-header-6.png)
}

.about-main {
    margin-top: 160px;
    margin-bottom: 80px
}

.about-main .left {
    width: 225px;
    white-space: nowrap;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .03), 0 3px 14px rgba(0, 0, 0, .06);
    box-shadow: 0 0 4px rgba(0, 0, 0, .03), 0 3px 14px rgba(0, 0, 0, .06);
    border-radius: 8px;
    padding: 14px 0;
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start
}

.about-main .left li {
    position: relative;
    padding: 10px 16px;
    font-weight: 700
}

.about-main .left li:not(.is-active) {
    cursor: pointer
}

.about-main .left li.is-active a {
    color: #307dff
}

.about-main .left li.is-active a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 3px;
    height: 12px;
    background-color: #307dff
}

.about-main .left li:hover a {
    color: #307dff
}

.about-main .right {
    width: 943px;
    margin-left: 32px;
    -webkit-box-shadow: 0 20px 120px rgba(0, 0, 0, .05);
    box-shadow: 0 20px 120px rgba(0, 0, 0, .05);
    border-radius: 8px;
    padding: 32px;
    position: relative
}

.about-main .right h2 {
    font-weight: 700;
    font-size: 28px
}

.about-main .right .line-box {
    margin-top: 30px;
    margin-bottom: 30px;
    width: 20px;
    height: 4px;
    background-color: #307dff
}

.about-main .right article {
    line-height: 1.6;
    white-space: pre-line;
    text-indent: 28px;
    color: #666
}

.about-main .right article b {
    color: #333
}

.about-main .right .about-our-p {
    width: 527px;
    white-space: unset;
    line-height: 22.4px;
    text-indent: 28px;
    color: #666
}

.about-main .right .about-wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.about-main .right .about-wrap>div:first-of-type {
    width: 879px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.about-main .right .about-wrap h2 {
    position: relative;
    height: 80px;
    background: url(../image/about.png) no-repeat;
    background-size: 471px 72px;
    background-position: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.about-main .right .about-wrap .desc-right-wrap {
    width: 320px;
    height: 320px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    display: block
}

.about-main .right .about-wrap .desc-right-wrap .city-map {
    width: 320px;
    height: 320px;
    zoom: 1
}

.about-main .right .about-wrap .desc-right-wrap .city-nav {
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000;
    background: rgba(0, 0, 0, .5);
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding: 10px 0
}

.about-main .right .about-wrap .desc-right-wrap .city-nav .city {
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
    position: relative;
    cursor: pointer;
    font-weight: 400;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    opacity: .7;
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in
}

.about-main .right .about-wrap .desc-right-wrap .city-nav .city.active,
.about-main .right .about-wrap .desc-right-wrap .city-nav .city:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
    font-weight: 600
}

.about-main .right .about-wrap .desc-right-wrap .city-nav .city.active:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 6px;
    width: 16px;
    height: 4px;
    background: #fff
}

.about-main .right .about-wrap .desc-right-wrap .map-address {
    position: absolute;
    width: 206px;
    height: 44px;
    left: 57px;
    top: 98px;
    background: #000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    opacity: .5 !important;
    border-radius: 100px;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.2;
    color: #fff;
    padding: 8px 18px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-animation-duration: .2s;
    animation-duration: .2s
}

.about-main .right .about-wrap .desc-right-wrap .map-address:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 12px solid #000;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom-color: transparent;
    bottom: -24px;
    left: calc(50% - 10px)
}

.about-main .right .about-wrap .company-honor-wrap {
    width: 896px;
    padding-top: 54px;
    padding-bottom: 42px;
    margin: 120px auto 0
}

.about-main .right .about-wrap .company-honor-wrap .title {
    height: 80px;
    background: url(../image/HONOUR.png) no-repeat;
    font-weight: 600;
    font-size: 28px;
    color: #000;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background-size: 368px 72px;
    background-position: top;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 760px;
    margin: 0 auto
}

.about-main .right .about-wrap .company-honor-wrap .company-honor-card {
    margin-top: 40px;
    font-size: 0
}

.about-main .right .about-wrap .company-honor-wrap .company-honor-card img+img {
    margin-left: 48px
}

.about-main .right .about-wrap .company-honor-wrap .company-honor-list {
    margin-top: 40px
}

.about-main .right .about-wrap .company-honor-wrap .company-honor-list ul {
    height: 624px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.about-main .right .about-wrap .company-honor-wrap .company-honor-list ul li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 430px;
    margin-bottom: 8px
}

.about-main .right .about-wrap .company-honor-wrap .company-honor-list ul li .label {
    font-weight: 400;
    font-size: 14px;
    line-height: 160%;
    color: #999
}

.about-main .right .about-wrap .company-honor-wrap .company-honor-list ul li .honor-name {
    font-weight: 400;
    font-size: 14px;
    line-height: 160%;
    color: #333;
    margin-left: 12px
}

.industry-observe-wrap {
    padding-bottom: 80px;
    padding-top: 104px
}

.industry-observe-wrap [class^=icon-] {
    zoom: .5
}

.industry-observe-wrap .top-bg {
    width: 1200px;
    margin: auto;
    display: block
}

.industry-observe-wrap .observe-wrap {
    margin-top: 40px
}

.industry-observe-wrap .observe-tab {
    width: 100%;
    border-bottom: 1px solid #eee;
    position: -webkit-sticky;
    position: sticky;
    padding-top: 16px;
    margin-top: -16px;
    top: 80px;
    background-color: #fff;
    z-index: 1
}

.industry-observe-wrap .observe-tab li {
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent
}

.industry-observe-wrap .observe-tab li a {
    padding-bottom: 16px;
    color: #666
}

.industry-observe-wrap .observe-tab li.is-active {
    cursor: auto;
    color: #307dff;
    border-color: #307dff
}

.industry-observe-wrap .observe-tab li.is-active a {
    color: #307dff
}

.industry-observe-wrap .observe-tab li.is-active [class^=icon-] {
    display: none
}

.industry-observe-wrap .observe-tab li.is-active [class$=-active] {
    display: block
}

.industry-observe-wrap .observe-tab li:hover,
.industry-observe-wrap .observe-tab li:hover a {
    color: #307dff
}

.industry-observe-wrap .observe-tab li:hover [class^=icon-] {
    display: none
}

.industry-observe-wrap .observe-tab li:hover [class$=-active],
.industry-observe-wrap .observe-tab li [class^=icon-] {
    display: block
}

.industry-observe-wrap .observe-tab li [class$=-active] {
    display: none
}

.industry-observe-wrap .observe-tab li+li {
    margin-left: 32px
}

.industry-observe-wrap .observe-tab li span {
    margin-left: 4px
}

.industry-observe-wrap .observe-tab .icon-tag-active {
    width: 32px;
    height: 32px;
    background: url(../image/icon-list-tab.png) -10px -10px
}

.industry-observe-wrap .observe-tab .icon-log {
    width: 32px;
    height: 32px;
    background: url(../image/icon-list-tab.png) -62px -10px
}

.industry-observe-wrap .observe-tab .icon-log-active {
    width: 32px;
    height: 32px;
    background: url(../image/icon-list-tab.png) -10px -62px
}

.industry-observe-wrap .observe-tab .icon-report {
    width: 32px;
    height: 32px;
    background: url(../image/icon-list-tab.png) -62px -62px
}

.industry-observe-wrap .observe-tab .icon-report-active {
    width: 32px;
    height: 32px;
    background: url(../image/icon-list-tab.png) -114px -10px
}

.industry-observe-wrap .observe-tab .icon-tag {
    width: 32px;
    height: 32px;
    background: url(../image/icon-list-tab.png) -114px -62px
}

.industry-observe-wrap .content-wrap {
    padding-top: 24px
}

.industry-observe-wrap .content-wrap .list-wrap {
    display: grid;
    grid-gap: 24px;
    gap: 24px;
    grid-template-columns: repeat(3, 1fr)
}

.industry-observe-wrap .content-wrap .content-box {
    position: relative;
    cursor: pointer;
    height: 420px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #eee;
    line-height: 1.6
}

.industry-observe-wrap .content-wrap .content-box>img {
    height: 192px;
    width: 100%;
    border-radius: 8px;
    zoom: 1
}

.industry-observe-wrap .content-wrap .content-box .title {
    margin-top: 24px;
    min-height: 42px;
    font-size: 16px;
    color: #333;
    font-weight: 600
}

.industry-observe-wrap .content-wrap .content-box .text {
    margin-top: 8px;
    color: #666
}

.industry-observe-wrap .content-wrap .content-box .tag-list {
    margin-top: 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 22px;
    overflow: hidden;
    grid-gap: 4px;
    gap: 4px;
    color: #666
}

.industry-observe-wrap .content-wrap .content-box .tag-list li {
    border-radius: 4px;
    background-color: #f4f5f6;
    padding: 5px;
    max-width: 116px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1;
    font-size: 12px
}

.industry-observe-wrap .content-wrap .content-box .date {
    font-family: Barlow;
    font-weight: 600;
    color: #999;
    text-align: right;
    position: absolute;
    right: 24px;
    bottom: 24px;
    line-height: 1
}

.industry-observe-wrap .content-wrap .content-no-data {
    text-align: center;
    color: #666
}

.industry-observe-wrap .content-wrap .content-no-data>img {
    margin-top: 40px;
    width: 180px
}

.article-detail-wrap {
    width: 800px
}

.article-detail-wrap .link-wrap {
    color: #999
}

.article-detail-wrap .link-wrap svg {
    width: 14px;
    height: 14px;
    margin: 0 4px
}

.article-detail-wrap h2 {
    margin-top: 32px;
    font-size: 28px;
    color: #333;
    font-weight: 600
}

.article-detail-wrap .tag-list {
    margin-top: 16px;
    margin-bottom: 32px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    grid-gap: 4px;
    gap: 4px;
    color: #666;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: 12px
}

.article-detail-wrap .tag-list li {
    padding: 5px;
    border-radius: 4px;
    background-color: #f4f5f6
}

.article-detail-wrap .article-content-wrap img {
    zoom: 1;
    max-width: 100%
}
.bg-top-center {
    background-position: top;
}
/*.bg-\[url\(\'public\/assets\/images\/bottom\.jpg\'\)\] {*/
/*    --un-url: url(../image/bottom.jpg);*/
/*    background-image: var(--un-url);*/
/*}*/

/*.h-21\.5 {*/
/*    height: 5.375rem;*/
/*}*/

/*.w-300 {*/
/*    width: 75rem;*/
/*}*/

/*.h-full {*/
/*    height: 100%;*/
/*}*/
/*.mx-a, .mxa {*/
/*    margin-left: auto;*/
/*    margin-right: auto;*/
/*}*/

/*.relative {*/
/*    position: relative;*/
/*}*/

/*.items-center {*/
/*    align-items: center;*/
/*}*/

/*.flex {*/
/*    display: flex;*/
/*}*/
/*.h-full {*/
/*    height: 100%;*/
/*}*/
/*.z-1 {*/
/*    z-index: 1;*/
/*}*/
/*.relative {*/
/*    position: relative;*/
/*}*/
/*.lh-6 {*/
/*    line-height: 1.5rem;*/
/*}*/

/*.font-500, .font-medium {*/
/*    font-weight: 500;*/
/*}*/

/*.color-white, .dark .dark\:text-white {*/
/*    --un-text-opacity: 1;*/
/*    color: rgb(255 255 255 / var(--un-text-opacity));*/
/*}*/
/*.text-6 {*/
/*    font-size: 1.5rem;*/
/*}*/
/*.mr-12 {*/
/*    margin-right: 3rem;*/
/*}*/
/*blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {*/
/*    margin: 0;*/
/*}*/
/*.bg-\#fff, .bg-white {*/
/*    --un-bg-opacity: 1;*/
/*    background-color: rgb(255 255 255 / var(--un-bg-opacity));*/
/*}*/
/*.rounded-9\.5 {*/
/*    border-radius: 2.375rem;*/
/*}*/
/*.justify-center {*/
/*    justify-content: center;*/
/*}*/
/*.items-center {*/
/*    align-items: center;*/
/*}*/
/*.flex {*/
/*    display: flex*/
/*;*/
/*}*/
/*.w-33 {*/
/*    width: 8.25rem;*/
/*}*/
/*.h-11\.5 {*/
/*    height: 2.875rem;*/
/*}*/
/*.bg-\#307dff, .bg-\#307DFF {*/
/*    --un-bg-opacity: 1;*/
/*    background-color: rgb(48 125 255 / var(--un-bg-opacity));*/
/*}*/
/*.rounded-full {*/
/*    border-radius: 9999px;*/
/*}*/
/*.w-5\.5 {*/
/*    width: 1.375rem;*/
/*}*/
/*.h-5\.5 {*/
/*    height: 1.375rem;*/
/*}*/
/*.mr-2\.5 {*/
/*    margin-right: .625rem;*/
/*}*/
/*.color-white, .dark .dark\:text-white {*/
/*    --un-text-opacity: 1;*/
/*    color: rgb(255 255 255 / var(--un-text-opacity));*/
/*}*/
/*.text-5\.5 {*/
/*    font-size: 1.375rem;*/
/*}*/
/*.w-1em {*/
/*    width: 1em;*/
/*}*/
/*.h-1em {*/
/*    height: 1em;*/
/*}*/
/*.i-gj\:btn {*/
/*    --un-icon: url(data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M14.783 6.838c.189.144.31.37.31.626v4.562a.786.786 0 11-1.57 0V9.36l-5.11 5.11a.786.786 0 01-1.111-1.112L12.41 8.25H9.747a.786.786 0 010-1.571h4.561a.8.8 0 01.475.16' clip-rule='evenodd'/%3E%3C/svg%3E);*/
/*    background-color: currentColor;*/
/*    color: inherit;*/
/*    height: 22px;*/
/*    -webkit-mask: var(--un-icon) no-repeat;*/
/*    mask: var(--un-icon) no-repeat;*/
/*    -webkit-mask-size: 100% 100%;*/
/*    mask-size: 100% 100%;*/
/*    width: 22px;*/
/*}*/
/*.color-\#307dff, .color-\#307DFF, .group:hover .group-hover\:color-\#307DFF {*/
/*    --un-text-opacity: 1;*/
/*    color: rgb(48 125 255 / var(--un-text-opacity));*/
/*}*/