.carousel {
    background-image: linear-gradient(270deg,#d7b784 0%,#f4dead 34%,#f8e6b9 42%,#d6a560 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-clip: padding-box;
    opacity: 1
}

.show-area {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden
}

.show-area .scroll-area,.show-area .scroll-area .slot-container {
    display: inline-block
}

.tip .icon {
    width: 20px;
    height: 15px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAeCAYAAABe3VzdAAAABHNCSVQICAgIfAhkiAAAA/BJREFUWEfFmGFOGzEQhW2HVhV/gBM03CCcoOEG4QYbCVD/ABsu0HABYkBCFUFiOQH0BIQTwA3IDUil/oLG7nuOHQWzW5IQhZWQCrtrf/PmzXi2UszoStJ0+VNfXVhpf58ft5IZLSvkLBZycEbeYK0Kfm7bx63qLNblGu8G/J6m5b6RV36tDiHHBXTv9uUFKMrCyoP2yWEWB/YuwK00rYiBcrfPyiafjUqtsNVxAbd2G5oBWSuvpbQtq+z6udYMcnhNDbiZplUJ5awQv4Lntnf3m5MAbu7spwDbQ3BrPrg9Aci21veBcCrArZ39REh7IYU8ODs+bIbFJgX03u0IKx7bJ631zd1GBqBvyMDq1IA+6hY8U489kwdIiM9W/EAau1DqMtO6N5pCD9nF3zLcb6LYughch8AnUtBHWJPw25nW17Gh8wDhMz5Xds96peL3vJfv6EHZV2VkpwXYVQYzFqCL0gqqtgGPVEc9MrpZAeA91Mv+lkxGdbD5VftI12NIF7wVX5lqBEUVM6r4JuBIj5OAS4rguGEe4Haa1iyLieoI0UPVO6XiavXt6oH3RF9VWDz0ogQtPbEUR4Tfe3hgJaQIkldj/4yT4hFwVuvqgpE6KPUq1bADukJvAV5Eb32AIGsEtEhBQ5TMsLR9BC0A8n4HcndGqzUnGPen/1VxSNuTMhqpfuTmcTZ8d+C+FMZZYwAYSe573M1MAQetabg5gr6Og/Z2cvDSqBp76twAw+YUQxlVLWrotByeqYVn5gZIC9Au7lhjsQyKYC3Hh85SQpl7FJfz2FxSHAC5uVGmg2PSWagIMDzzIYBeHQ3AQQMfuUJRfhTgC3/lTT2u2pVNhVGVuRZJ6AzohStoMxn7Xd7kHSw39yLxDV9AtRohoNJGfJ6HUycEgcx3nQeLGm/ogziDH59Lpj7tSRLUK+EkMUYlSF2KtZdz/McBtszhl82cQUhOEiB89TBbATu9nzQyHofoT/X4DH1zWPBTN6r3yJ8iDwi4EY9qvk/ecfSXJdNDi8kYxJvDAgH8y038cw+HuH6S4iBPzaJxK/iNFYo1lrExP65eXP7dhJVNO4R3xgIMK/lUUU32zldqFo1baMp3bg2Ma0hfuWBodcrakumyR9IOP7XG2DXhFat5dqQbYYk8wJGgekXjGgcDrkFl3WmD4ggVPjFgjpo83Ov066TfJFwrTOlUdqGvElioCfUqVI/3pwaMvYnKbCqhMOpN8Nk5mHA0p3QWKlMbf+u8C3CY2sHU7CodP2P/zwK/ix2YAiTgWOnxCDYTwKCmm5YHk3g6jrW9P/lRtQTQy7yTZWaA4wDlPZMkyZfFxcWF09PTP3n3/wG5D5GXO450CAAAAABJRU5ErkJggg==) no-repeat;
    background-size: 100%;
    margin-right: 14px
}

.leading-30 {
    display: inline-block;
    line-height: 30px
}

.banner-warp {
    position: relative;
    width: 100%
}

.banner-warp .btn {
    position: absolute;
    top: 50%;
    width: 15px;
    height: 100%;
    margin-top: -110px;
    cursor: pointer;
    background: url(icon-switch.92a0af41.svg) no-repeat;
    background-size: 100% 100%
}

.banner-warp .prv-btn {
    left: -15px
}

.banner-warp .next-btn {
    transform: rotate(-180deg);
    right: -15px
}

.banner-scroll {
    width: 100%;
    overflow: hidden
}

.banner-box {
    width: 3300px;
    transition: all .5s ease
}

.banner-item {
    width: 160px;
    margin-right: 25px
}

.banner-item:last-of-type {
    margin-right: 0
}

.banner-item img {
    width: 160px;
    height: 135px
}

.banner-item p {
    padding-top: 30px;
    font-size: 14px;
    text-align: center
}

@media (min-width: 1024px) {
    .banner-warp {
        width:1160px;
        margin: 0 auto
    }

    .banner-warp .btn {
        margin-top: -160px
    }

    .banner-warp .prv-btn {
        left: -40px
    }

    .banner-warp .next-btn {
        right: -40px
    }

    .banner-scroll {
        width: 100%;
        overflow: hidden
    }

    .banner-box {
        width: 3300px;
        transition: all .5s ease
    }

    .banner-item {
        width: 260px;
        margin-right: 40px
    }

    .banner-item:last-of-type {
        margin-right: 0
    }

    .banner-item img {
        width: 260px;
        height: 220px
    }

    .banner-item p {
        padding-top: 30px;
        font-size: 20px;
        text-align: center
    }
}

.btn-icon {
    width: 18px;
    height: 18px
}

.btn-icon.user-icon {
    background: url(icon-user-white.dee85439.svg) no-repeat;
    background-size: 100% 100%
}

.btn-icon.about-icon {
    background: url(icon-about.aadc522c.svg) no-repeat;
    background-size: 100% 100%
}

.list-item {
    box-shadow: 0 3px 6px #00000029;
    border-radius: 4px;
    position: relative
}

.avatar-box {
    position: absolute;
    width: 120px;
    height: 120px;
    top: -60px;
    left: 50%;
    transform: translate(-50%)
}

.avatar-box img {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.overflow-txt {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.banner-warp {
    position: relative
}

.banner-warp .btn{
    position: absolute;
    top: 50%;
    width: 15px;
    height: 100%;
    margin-top: -50px;
    cursor: pointer;
    background: url(icon-switch.92a0af41.svg) no-repeat;
    background-size: 100% 100%
}

.platform-data .data-item {
    position: relative
}

.platform-data .data-item:hover {
    background: transparent linear-gradient(180deg,#e8c781 0%,#bf9d55 100%) 0% 0% no-repeat padding-box
}

.platform-data .data-item:hover .text p,.platform-data .data-item:hover .text b {
    color: #fff!important
}

.platform-data .data-item .text {
    position: relative
}

.platform-data .data-item .bg {
    position: absolute;
    width: 158px;
    height: 100%;
    right: 0
}

.process-box {
    background: url(process-bg.6a2fa722.png) no-repeat;
    background-size: auto 100%;
    background-position: center
}

.dialog-bg {
    background: url(icon-dialog-bg.1d2dcdfd.svg) no-repeat
}

.arrow-instruct1 {
    background-image: url(icon-arrow2-1.8eaedd4b.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.arrow-instruct2 {
    background-image: url(icon-arrow2-2.55ce3679.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.arrow-instruct3 {
    background-image: url(icon-arrow2-3.0428fc64.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.arrow-instruct4 {
    background-image: url(icon-arrow2-4.f764d24a.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.arrow-instruct1.active {
    background-image: url(icon-arrow2-1-hover.b0fe51b6.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.arrow-instruct2.active {
    background-image: url(icon-arrow2-2-hover.9254aa4b.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.arrow-instruct3.active {
    background-image: url(icon-arrow2-3-hover.d11d42cf.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.arrow-instruct4.active {
    background-image: url(icon-arrow2-4-hover.a37aa467.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%
}