body {
    margin: 0;
    font-family: -apple-system,PingFangSC-Regular,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft Yahei,STHeiti,SimSun,sans-serif
}

body .ellipsis {
    white-space: nowrap
}

body .ellipsis,body .ellipsis-l2 {
    overflow: hidden;
    text-overflow: ellipsis
}

body .ellipsis-l2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}
body a{
    text-decoration: none;
}
ul {
    margin: 0;
    padding: 0
}

.header-banner-wrap {
    width: 100%;
    background: #7248ff
}

.header-banner-wrap .header-banner {
    max-width: 1000px;
    height: 490px;
    margin: 0 auto;
    padding: 20px 30px 0;
    padding-left: 5px;
    color: #fff;
    background: url("../images/index_1.png") no-repeat 100%;
    background-size: 480px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.header-banner-wrap .header-banner .chengzi-logo {
    margin: 0;
    padding: 82px 0 20px;
    font-size: 12px;
    background: url("../images/logo.png") no-repeat 0 0;
    background-size: 120px;
    color: #fff
}

.header-banner-wrap .header-banner h1 {
    font-size: 48px;
    font-weight: 700;
    line-height: 64px;
    margin: 100px 0 0
}

.header-banner-wrap .header-banner .banner-subtitle {
    font-size: 24px;
    line-height: 28px;
    font-weight: 400;
    margin-top: 15px
}

.header-banner-wrap .header-banner .try-for-free {
    display: inline-block;
    width: 228px;
    height: 52px;
    margin-top: 15px;
    text-align: center;
    line-height: 52px;
    font-size: 20px;
    color: #0f1858;
    background: #fff;
    border-radius: 2px;
    text-decoration: none
}

.intro-item {
    max-width: 1100px;
    margin: 0 auto;
    padding: 135px 50px 0;
    overflow: hidden
}

.intro-item a[href*="account.youzan.com"]:hover {
    color: #fff!important;
    opacity: .8
}

.intro-item.into-single-item {
    padding: 50px
}

.intro-item .intro-item-title {
    line-height: 60px;
    font-size: 36px;
    margin: 0;
    font-weight: 700;
    text-align: center
}

.intro-item .intro-subtitle {
    line-height: 50px;
    color: #9c9c9c;
    margin: 0;
    padding-bottom: 25px;
    font-size: 24px;
    font-weight: 400;
    text-align: center
}

.intro-item .use-regist-btn {
    display: block;
    width: 312px;
    height: 52px;
    margin: 10px auto;
    text-align: center;
    line-height: 52px;
    font-size: 20px;
    color: #fff;
    background: #7248ff;
    border-radius: 2px;
    text-decoration: none
}

.intro-item .use-phone-call {
    color: #9c9c9c;
    font-size: 24px;
    text-align: center;
    line-height: 40px;
    margin: 20px 0 0
}

.link-item-wrapper {
    font-size: 0
}

.link-item-wrapper .link-item {
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    width: -webkit-calc((100% - 40px)/3);
    width: -moz-calc((100% - 40px)/3);
    width: calc((100% - 40px) / 3);
    margin-right: 20px;
    font-size: 12px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none
}

.link-item-wrapper .link-item:nth-child(3n) {
    margin-right: 0
}

.link-item-wrapper .link-item:nth-child(-n+3) {
    margin-bottom: 18px
}

.link-item-wrapper .link-item .link-item-header {
    overflow: hidden;
 
    background-size: cover
}

.link-item-wrapper .link-item .link-item-header h4 {
    margin: 44px 24px 4px;
    font-weight: 600;
    color: #fff;
    font-size: 28px
}

.link-item-wrapper .link-item .link-item-header h4+p {
    margin: 0 24px;
    padding-bottom: 44px;
    color: #fff;
    font-size: 16px
}

.link-item-wrapper .link-item .link-item-header-1 {
    background-image: url(../images/link-item-header-1.png)
}

.link-item-wrapper .link-item .link-item-header-2 {
    background-image: url(../images/link-item-header-2.png)
}

.link-item-wrapper .link-item .link-item-header-3 {
    background-image: url(../images/link-item-header-3.png)
}

.link-item-wrapper .link-item .link-item-header-4 {
    background-image: url(../images/link-item-header-4.png)
}

.link-item-wrapper .link-item .link-item-header-5 {
    background-image: url(../images/link-item-header-5.png)
}

.link-item-wrapper .link-item .link-item-header-6 {
    background-image: url(../images/link-item-header-6.png)
}

.link-item-wrapper .link-item p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.link-item-wrapper .link-item div+p {
    font-size: 18px;
    color: #424242;
    padding: 24px 24px 0;
    margin: 0;
    text-align: left;
    border-left: 1px solid #7248ff;
    border-right: 1px solid #7248ff
}

.link-item-wrapper .link-item p+div {
    font-size: 18px;
    padding: 0 24px 24px;
    line-height: 28px;
    border: 1px solid #7248ff;
    border-top: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.link-item-wrapper .link-item p+div span {
    position: relative
}

.link-item-wrapper .link-item p+div span:first-child {
    color: #7248ff;
    text-align: center
}

.link-item-wrapper .link-item p+div span:first-child:after {
    content: "";
    position: absolute;
    display: block;
    top: 5px;
    right: -20px;
    height: 16px;
    width: 16px;
    background: url(../images/right.png) no-repeat 50%;
    background-size: contain
}

.link-item-wrapper .link-item p+div span:last-child {
    color: silver
}

.link-item-wrapper .link-item p+div span:last-child:before {
    content: "";
    display: block;
    position: absolute;
    height: 14px;
    top: 6px;
    left: -22px;
    width: 19px;
    background: url(../images/eye.png) no-repeat 50%;
    background-size: contain
}

.intro-kit-list {
    margin-top: 20px;
    overflow: hidden
}

.intro-kit-list .kit-item {
    width: 25%;
    float: left;
    text-align: center;
    padding-top: 150px;
    background-repeat: no-repeat;
    background-position: center 20px;
    background-size: 96px
}

.intro-kit-list .kit-item h5 {
    font-size: 26px;
    font-weight: 700;
    line-height: 40px;
    margin: 0
}

.intro-kit-list .kit-item .kit-desc {
    font-size: 20px;
    line-height: 30px;
    margin: 20px 0 0
}

.weapp-intro-list {
    padding-top: 20px;
    overflow: hidden
}

.weapp-intro-list .weapp-intro {
    width: -webkit-calc((100% - 40px)/3);
    width: -moz-calc((100% - 40px)/3);
    width: calc((100% - 40px) / 3);
    height: 185px;
    padding: 40px 20px 20px 130px;
    margin-right: 20px;
    margin-bottom: 20px;
    float: left;
    background: #f8f8f8;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: 20px 40px;
    background-size: 100px
}

.weapp-intro-list .weapp-intro h3 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 40px
}

.weapp-intro-list .weapp-intro p {
    font-size: 18px;
    line-height: 30px
}

.weapp-intro-list .weapp-intro:nth-child(3n) {
    margin-right: 0
}

.case-item-list {
    padding-top: 20px;
    overflow: hidden
}

.case-item-list .case-item {
    width: -webkit-calc((100% - 40px)/3);
    width: -moz-calc((100% - 40px)/3);
    width: calc((100% - 40px) / 3);
    height: 170px;
    float: left;
    font-size: 30px;
    line-height: 170px;
    text-align: center;
    color: #fff;
    margin-right: 20px;
    margin-bottom: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 20px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover
}

.case-item-list .case-item:nth-child(3n) {
    margin-right: 0
}

.solution-item-list .solution-intro {
    float: left;
    width: 50%;
    height: 360px
}

.solution-item-list .solution-intro h2 {
    padding-top: 30px;
    font-size: 34px;
    font-weight: 700;
    line-height: 50px
}

.solution-item-list .solution-intro .divide-line {
    width: 100px;
    height: 4px;
    background: #7248ff;
    overflow: hidden
}

.solution-item-list .solution-intro .regist-btn {
    display: block;
    width: 228px;
    height: 52px;
    margin-top: 60px;
    text-align: center;
    line-height: 52px;
    font-size: 20px;
    color: #fff;
    background: #7248ff;
    border-radius: 2px;
    text-decoration: none
}

.solution-item-list .solution-image {
    width: 50%;
    height: 360px;
    float: left;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 360px
}

.gray-background-item {
    background: #f5f5fa
}

.open-step-list .step-list {
    float: left;
    width: 60%;
    height: 480px;
    background: url("../images/list.png") no-repeat 0;
    background-size: auto 250px
}

.open-step-list .step-list p {
    font-size: 24px;
    padding-left: 80px;
    line-height: 50px;
    margin: 18px 0
}

.open-step-list .shop-exams {
    float: left;
    width: 40%;
    height: 480px;
    background: url("../images/xcx.png") no-repeat 50%;
    background-size: auto 480px
}

.data-item-list {
    overflow: hidden
}

.data-item-list .data-item {
    width: 25%;
    float: left;
    text-align: center
}

.data-item-list .data-item .data-text {
    color: #7248ff;
    font-size: 60px;
    font-weight: 700;
    margin: 5px 0
}

.data-item-list .data-item .data-text span {
    font-size: 28px;
    color: #000
}

.data-item-list .data-item .data-label {
    font-size: 24px;
    color: #333;
    margin: 0
}

.award-board {
    margin-top: 30px;
    width: 100%;
    height: 330px;
    background: url("../images/board.png") no-repeat 50%;
    background-size: auto 280px
}

.award-num {
    text-align: center;
    line-height: 100px;
    font-size: 36px;
    font-weight: 700
}

.award-num span {
    font-size: 50px;
    color: #7248ff
}

.all-solution-title {
    padding-top: 80px;
    font-size: 36px;
    font-weight: 400;
    text-align: center
}

.all-solution-title span {
    font-weight: 700
}

.solution-case-image {
    width: 100%;
    height: 360px;
    background: url("../images/case.png") no-repeat 50%;
    background-size: auto 320px
}

.get-increase-book {
    display: block;
    width: 312px;
    height: 52px;
    margin: 10px auto 0;
    text-align: center;
    line-height: 52px;
    font-size: 20px;
    color: #fff;
    background: #7248ff;
    border-radius: 2px;
    text-decoration: none
}

.get-increase-book+.clue-button-extra {
    margin-bottom: 80px
}

.clue-components-inject-landing-clue-wrapper {
    left: auto!important;
    right: 30px!important;
    z-index: 1000
}

.clue-button-wrapper {
    display: inline-block
}

.clue-button-wrapper .clue-button-extra {
    margin-top: 8px;
    color: #9c9c9c;
    font-size: 16px;
    display: block;
    text-align: center;
    text-decoration: none
}

.intro-item>.clue-button-wrapper {
    display: block
}

@media screen and (min-width: 414px) and (max-width:1200px) {
    .intro-item {
        padding:80px 50px 0
    }

    .intro-item.into-single-item {
        padding: 20px
    }

    .weapp-intro-list .weapp-intro h3 {
        font-size: 20px;
        line-height: 30px
    }

    .weapp-intro-list .weapp-intro p {
        font-size: 16px
    }

    .open-step-list .step-list p {
        font-size: 18px
    }

    .open-step-list .step-list p:first-child {
        padding-top: 96px!important
    }

    .link-item-wrapper .link-item div+p,.link-item-wrapper .link-item p+div span {
        font-size: 12px
    }

    .link-item-wrapper .link-item p+div span:first-child:after,.link-item-wrapper .link-item p+div span:last-child:before {
        width: 12px;
        height: 12px;
        top: 8px
    }
}

.zng-footer, .zng-footer *, .zng-navigation, .zng-navigation *, .zng-subnav, .zng-subnav * {
    box-sizing: border-box;
}

.zng-footer{
    margin: 0;
    padding: 0;
    white-space: nowrap;
    display: block;
    width: 100%;
    background-color: #f5f5fa;
    color: #000;
    font-size: 14px;
    padding-bottom: 33px;
    padding-top: 33px;
    text-align: center;
}


 

.zng-footer__content-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    font-size: 12px;
    padding: 24px 0;
     
    width: 100%;
}

.zng-footer__content {
    -ms-flex: 1 1;
    flex: 1 1;
    max-width: 100%;
}
.zng-footer__content>p {
    margin-bottom: 8px;
}

.zng-footer__content p {
    margin-bottom: 0;
}
.zng-footer__content>* {
    display: -ms-flexbox;
    display: flex
;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: start;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.zng-footer__content a {
    display: -ms-inline-flexbox;
    display: inline-flex
;
}
.zng-footer__content a {
    color: inherit;
    text-decoration: none;
}
.zng-footer__extra>* {
    padding: 0 12px;
}

@media (min-width: 1024px) {
    .px-c {
        padding-left: 32px;
        padding-right: 32px;
    }
}

@media (min-width: 640px) {
    .px-c {
        padding-left: 24px;
        padding-right: 24px;
    }
}
.px-c {
    padding-left: 16px;
    padding-right: 16px;
}
.max-w-c {
    max-width: 1280px;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}


.text-heading {
    color: #1d1d1f;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#dialog{
    display: none;
  
   position: relative;
}
#dialog.show{
     display: block;

}
#dialog > .block{
    position: absolute;
}
#dialog.show > .block{
    position: fixed;
}

@media (min-width: 1280px) {
    .xl\:text-2xl {
        font-size: 24px;
        line-height: 32px;
    }
}
@media (min-width: 1280px) {
    .xl\:mb-20 {
        margin-bottom: 80px;
    }
}
@media (min-width: 768px) {
    .md\:text-xl {
        font-size: 20px;
        line-height: 28px;
    }
}
.text-normal {
    color: #323233;
}
.text-base {
    font-size: 16px;
    line-height: 24px;
}
.text-left {
    text-align: left;
}
.whitespace-pre-wrap {
    white-space: pre-wrap;
}
.mt-16 {
    margin-top: 64px;
}
.ml-6 {
    margin-left: 24px;
}
.mb-16 {
    margin-bottom: 64px;
}
.relative {
    position: relative;
}

/**/
   #backToTop {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, #7748ff, #9e76ff);
      color: white;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 1000;
    }

    #backToTop:hover {
      transform: translateY(-5px) scale(1.1);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    }

    #backToTop:active {
      transform: translateY(-2px) scale(1.05);
    }

    #backToTop.show {
      display: flex;
      animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
 
   
/**/

@media (min-width: 1280px) {
    .xl\:text-xl {
        font-size: 20px;
        line-height: 28px;
    }
    .xl\:mt-16 {
        margin-top: 64px;
    }
     .xl\:text-2xl {
        font-size: 24px;
        line-height: 32px;
    }
     .xl\:mb-20 {
        margin-bottom: 80px;
    }
     .style_clue-wrapper__dtRYq {
        width:1120px;
        height: 740px
    }
}
 
.text-normal {
    color: #323233;
}
.font-normal {
    font-weight: 400;
}
 
@media (min-width: 768px) {
    .md\:text-xl {
        font-size: 20px;
        line-height: 28px;
    }
    .style_clue-wrapper__dtRYq {
        width:480px;
        height: 630px;
        max-height: 90vh
    }
}
 

.style_clue-image-wrapper__UZAGH {
    display: none;
    overflow: hidden;
    border-radius: 12px
}

@media (min-width: 1024px) {
     .style_clue-wrapper__dtRYq {
        width:960px;
        padding: 6px
    }
    .style_clue-image-wrapper__UZAGH {
        display:block;
        height: 100%;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        width: 49.4%;
        -ms-flex-preferred-size: 49.4%;
        flex-basis: 49.4%
    }
}

.style_clue-image-wrapper__UZAGH img {
    border-radius: 12px
}

.style_clue-image-wrapper__UZAGH .swiper-pagination-bullets {
    position: absolute;
    bottom: 16px;
    z-index: 10
}

@media (min-width: 768px) {
    .style_clue-image-wrapper__UZAGH .swiper-pagination-bullets {
        left:24px
    }
}

@media (min-width: 1280px) {
    .style_clue-image-wrapper__UZAGH .swiper-pagination-bullets {
        left:28px
    }
}

.style_clue-image-wrapper__UZAGH .swiper-pagination-bullets {
    width: auto
}

.style_clue-image-wrapper__UZAGH .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    opacity: 1;
    background: transparent!important;
    border: 1px solid #fff
}

.style_clue-image-wrapper__UZAGH .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #fff!important
}

.style_clue-processor__hAwzu {
    position: relative;
    width: 100%;
    border-radius: 9999px;
    background: #fff
}

@media (min-width: 768px) {
    .style_clue-processor__hAwzu {
        background:#f7f7f7
    }
}

.style_clue-processor-item-active__sxFr0 {
    background: linear-gradient(80deg,#8a57ea,#4848e3 68%,#5e5eff)
}

.style_clue-processor-item-active-retail__pisrg {
    background-color: #3370ff
}

.style_drawer-content__Lkx5k {
    display: none;
    overflow: hidden;
    border-radius: 12px;
    margin-top: 6px;
    margin-bottom: 6px;
    margin-right: 6px;
    padding: 32px
}

@media (min-width: 1024px) {
    .style_drawer-content__Lkx5k {
        display:block;
        width: 49.4%;
        height: calc(100% - 12px)
    }
}



@media (min-width: 768px) {
    .weapp-intro-list .weapp-intro{
        width: calc((100% - 40px) / 2);;
    }
    .weapp-intro-list .weapp-intro:nth-child(3n) {
        margin-right: 20px;
    }
}
@media (max-width: 768px) {
    .weapp-intro-list .weapp-intro{
        width: 100%;
        background-position: 15px 30px;
        background-size: 70px;
        height: 140px;
    }
    .link-item-wrapper{
        text-align: center;
    }
    .weapp-intro-list .weapp-intro:nth-child(3n) {
        margin-right: 20px;
    }
    .solution-item-list .solution-image{
         width: 100%;
         background-position: 100%;
        background-size: 30%;

        position: absolute;
        top: -44%;
        left: -66%;
        z-index: -1;
    }
    .solution-item-list .solution-intro{
        width: 100%;
        height: 148px;
    }
    .intro-item.into-single-item{
        padding: 15px;
    }
    .solution-item-list .solution-intro h2{
        text-align: left;
        padding-top: 5%;
        padding-left: 35%;
        font-size: 18px !important;
        line-height: 40px;
    }
    .solution-item-list .solution-intro .divide-line{
        margin: 0 auto;
    }
    .clue-button-wrapper{
        width: 100%;
        margin-top: 20px;
    }
    .solution-item-list .solution-intro .regist-btn{
        margin: 30px auto;
    }
}
@media (max-width: 648px) {
    .intro-item{
        padding: 40px 25px 0;
           position: relative;
    }
    .intro-item .intro-item-title{
        font-size: 24px;
    }
    .intro-item .intro-subtitle{
        font-size: 18px;
        padding-bottom: 10px;
    }
    .intro-item.into-single-item{
        
        position: relative;
    }
    .header-banner-wrap .header-banner h1{
        font-size: 32px;
    }
    .weapp-intro-list .weapp-intro{
        background-position: 10px 20px;
        background-size: 64px;
        padding:20px 0 10px 85px;
        height: 80px;
        margin-right: 0;
        margin-bottom: 10px;
    }
 
    .weapp-intro-list .weapp-intro h3 {
        font-size: 22px;
        line-height: 2em;
    }
    .weapp-intro-list .weapp-intro p {
        font-size: 12px;
        line-height: 14px;
        margin-top: 7px;
        display: none;
    }
    /**/
    .link-item-wrapper .link-item{
        width: calc((100% - 40px) / 2);
    }
    .link-item-wrapper .link-item{
        margin-right: 18px !important;
        margin-bottom: 18px;
    }
}
@media (max-width: 500px) {
    .header-banner-wrap .header-banner .chengzi-logo{
        margin-top: -30px;
    }
    .intro-item{
        padding: 20px 10px 0;
    }
    .header-banner-wrap .header-banner{
        background-position: 0 20vh;
        background-size: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        width:100vw;
        align-items: center;
        padding-right: 0;
        padding-left: 0;
        overflow: hidden;
    }
    .header-banner-wrap .header-banner h1{
        font-size: 24px;
        margin-top: 55vh;
        line-height: 32px ;
    }
    .clue-button-wrapper{
        text-align: center;
        display: none;
    }
    .clue-button-wrapper-last{
        display: block;
    }
  
    .link-item-wrapper .link-item{
        width: calc(100% - 40px);
        margin:0 auto 18px auto;
         margin-right: 0 !important;
    }
    .intro-subtitle{
        font-size: 16px !important;
        line-height: 20px !important;
    }
     h2{
        font-size: 20px !important;
    }
    .zng-footer__content-wrapper{
        padding:0;
    }
    .mobile-hidden{
        display: none;
    }

}