.system_sh_banner {
    height: 6rem;
    position: relative;
    margin-top: .64rem;
}

.system_sh_banner > img {
    position: absolute;
    height: 6rem;
    width: 100%
}

.system_sh_banner .intro {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    bottom: .6rem
}

.system_sh_banner .intro .intro-item {
    width: 1.24rem;
    height: 1.24rem;
    background: url(../../../public/images/system/system_sh_banner_bth_nor.png);
    background-size: 1.24rem 1.24rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: .48rem
}

.system_sh_banner .intro .intro-item img {
    width: .54rem;
    height: .54rem
}

.system_sh_banner .intro .intro-item:nth-child(1)::after {
    content: "墨水商"
}

.system_sh_banner .intro .intro-item:nth-child(2)::after {
    content: "设备"
}

.system_sh_banner .intro .intro-item:nth-child(3)::after {
    content: "面料"
}

.system_sh_banner .intro .intro-item::after {
    display: none;
    font-size: .24rem;
    background: url(../../../public/images/system/system_sh_banner_bth_sel.png);
    width: 1.24rem;
    height: 1.24rem;
    background-size: 1.24rem 1.24rem;
    color: #fff;
    line-height: 1.24rem;
    text-align: center;
    cursor: pointer
}

.system_sh_banner .intro .intro-item:hover {
    background-image: none
}

.system_sh_banner .intro .intro-item:hover img {
    display: none
}

.system_sh_banner .intro .intro-item:hover::after {
    display: block
}

.how_use {
    padding-top: 1.04rem;
    padding-bottom: .6rem
}

.how_use h4, .lw-title {
    font-size: .3rem;
    font-weight: 500;
    text-align: center
}

.how_use .items {
    display: flex;
    margin: 0 auto;
    flex-wrap: wrap;
    width: 12.2rem;
    margin-top: .87rem;
    justify-content: center;
    position: relative
}

.how_use .items .divider_1 {
    width: 9.74rem;
    top: 1.54rem
}

.how_use .items .divider_2 {
    width: 6.5rem;
    top: 3.73rem;
    right: 1.25rem
}

.how_use .items .divider_1, .how_use .items .divider_2 {
    position: absolute;
    height: .63rem
}

.how_use .items .item:nth-child(4n+2), .how_use .items .item:last-child {
    margin-right: 0
}

.how_use .items .item:nth-child(4n+2)::after, .how_use .items .item:last-child::after {
    display: none
}

.how_use .items .item {
    width: 2.6rem;
    height: 1.48rem;
    border-radius: .06rem;
    background: #fff;
    box-shadow: 0 .05rem .2rem rgba(128, 128, 128, .25);
    text-align: center;
    display: flex;
    align-items: center;
    margin-right: .6rem;
    margin-bottom: .76rem;
    justify-content: center;
    position: relative
}

.how_use .items .item::after {
    content: "";
    width: .48rem;
    background-image: linear-gradient(rgb(75, 116, 253), rgb(119, 126, 249));
    height: .03rem;
    position: absolute;
    right: -0.54rem
}

.how_use .items .item p {
    font-size: .16rem;
    color: #666;
    text-align: center;
    font-weight: 500;
    line-height: .26rem;
    vertical-align: top;
    width: 50%
}

.how_use .items .item img {
    width: .8rem;
    height: .8rem;
    position: absolute;
    top: -0.5rem;
    right: 0
}

h4 {
    font-size: .3rem;
    font-weight: 500;
    text-align: center
}

.system_intro h4 {
    margin-bottom: .4rem
}

.system_intro .bg {
    height: 8.34rem;
    position: relative
}

.system_intro .bg img {
    pointer-events: none
}

.system_intro .bg .title {
    width: 12.2rem;
    margin: 0 auto;
    position: absolute;
    top: .48rem;
    left: 50%;
    transform: translateX(-50%);
}

.system_intro .bg .bg_img {
    width: 100%;
    height: 8.34rem;
    position: absolute
}

.system_intro .bg .intro_items {
    position: absolute;
    width: 12.94rem;
    height: 5.72rem;
    top: 1.9rem;
    background-size: 7.45rem 5.72rem;
    background-image: url(../../../public/images/system/bgs/system_sh_zhutu_01.png);
    background-position: center center;
    background-repeat: no-repeat;
    left: 50%;
    transform: translateX(-50%)
}

.system_intro .bg .intro_items .item {
    width: -moz-fit-content;
    width: fit-content;
    padding: .13rem .12rem;
    padding-left: .35rem;
    text-align: left;
    display: flex;
    justify-content: center;
    position: absolute;
    border-top-left-radius: 0.4rem;
    border-top-right-radius: 0.08rem;
    border-bottom-left-radius: 0.08rem;
}

.system_intro .bg .intro_items .item p {
    font-size: .14rem;
}

.system_intro .bg .intro_items .item:nth-child(2n+1) {
    background: #d4deff
}

.system_intro .bg .intro_items .item:nth-child(2n) {
    background: #4e75fd;
    color: #fff
}

.system_intro .bg .intro_items .item:nth-child(5), .system_intro .bg .intro_items .item:nth-child(6), .system_intro .bg .intro_items .item:nth-child(7) {
    border-top-right-radius: .4rem;
    border-top-left-radius: .08rem;
    border-bottom-right-radius: .08rem;
    padding-left: .12rem;
    padding-right: .35rem
}

.system_intro .bg .intro_items .item::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain
}

.system_intro .bg .intro_items .item:nth-child(1) {
    top: .3rem;
    left: .77rem
}

.system_intro .bg .intro_items .item:nth-child(1):after {
    background-image: url(../../../public/images/system/icons/steps/system_sh_line_yd_01.png);
    background-size: .64rem .12rem;
    width: .64rem;
    height: .12rem;
    right: -0.71rem;
    top: .29rem
}

.system_intro .bg .intro_items .item:nth-child(1) p {
    width: 1.41rem
}

.system_intro .bg .intro_items .item:nth-child(2) {
    top: 1.1rem;
    left: 0rem
}

.system_intro .bg .intro_items .item:nth-child(2):after {
    background-image: url(../../../public/images/system/icons/steps/system_sh_line_yd_02.png);
    background-size: .55rem .49rem;
    width: .55rem;
    height: .49rem;
    right: -0.61rem;
    top: 0rem;
}

.system_intro .bg .intro_items .item:nth-child(2) p {
    width: 2.43rem
}

.system_intro .bg .intro_items .item:nth-child(3) {
    top: 2.18rem;
    left: 0rem
}

.system_intro .bg .intro_items .item:nth-child(3):after {
    background-image: url(../../../public/images/system/icons/steps/system_sh_line_yd_02.png);
    background-size: .55rem .49rem;
    width: .55rem;
    height: .49rem;
    right: -0.61rem;
    top: -0.2rem
}

.system_intro .bg .intro_items .item:nth-child(3) p {
    width: 2.43rem
}

.system_intro .bg .intro_items .item:nth-child(4) {
    top: 3.44rem;
    left: .35rem
}

.system_intro .bg .intro_items .item:nth-child(4):after {
    background-image: url(../../../public/images/system/icons/steps/system_sh_line_yd_02.png);
    background-size: .55rem .49rem;
    width: .55rem;
    height: .49rem;
    right: -0.61rem;
    top: -0.2rem
}

.system_intro .bg .intro_items .item:nth-child(4) p {
    width: 2.1rem
}

.system_intro .bg .intro_items .item:nth-child(5) {
    top: .19rem;
    right: .4rem
}

.system_intro .bg .intro_items .item:nth-child(5):after {
    background-image: url(../../../public/images/system/icons/steps/system_sh_line_yd_03.png);
    background-size: .65rem .61rem;
    width: .65rem;
    height: .61rem;
    left: -0.67rem;
    top: .35rem
}

.system_intro .bg .intro_items .item:nth-child(5) p {
    width: 2.03rem
}

.system_intro .bg .intro_items .item:nth-child(6) {
    top: 1.62rem;
    right: .4rem
}

.system_intro .bg .intro_items .item:nth-child(6):after {
    background-image: url(../../../public/images/system/icons/steps/system_sh_line_yd_03.png);
    background-size: .65rem .61rem;
    width: .65rem;
    height: .61rem;
    left: -0.67rem;
    top: .35rem
}

.system_intro .bg .intro_items .item:nth-child(6) p {
    width: 2.03rem
}

.system_intro .bg .intro_items .item:nth-child(7) {
    top: 3.02rem;
    right: .46rem
}

.system_intro .bg .intro_items .item:nth-child(7):after {
    background-image: url(../../../public/images/system/icons/steps/system_sh_line_yd_04.png);
    background-size: 1.27rem .26rem;
    width: 1.27rem;
    height: .26rem;
    left: -1.26rem;
    top: .17rem
}

.system_intro .bg .intro_items .item:nth-child(7) p {
    width: 3rem
}

.system_pic {
    width: 12.2rem;
    margin: 0 auto;
    padding-top: .97rem
}

.system_pic .pic_step {
    display: flex;
    margin-top: .38rem
}

.system_pic .pic_step .left {
    width: 5.4rem;
    height: 7.38rem;
    margin-right: .27rem
}

.system_pic .pic_step .left img {
    width: 5.4rem;
    height: 7.38rem;
    animation-duration: 500ms;
}

.system_pic .pic_step .right .desc_item {
    width: 5.98rem;
    height: 1.64rem;
    border-radius: .2rem;
    padding: .17rem .21rem;
    box-shadow: 0 .02rem .06rem .04rem rgba(82, 118, 253, .2);
    box-sizing: border-box;
    margin-bottom: .28rem;
    border: .03rem solid rgba(204, 204, 204, 0);
    cursor: pointer
}

.system_pic .pic_step .right .desc_item.active {
    border: .03rem solid #5276fd
}

.system_pic .pic_step .right .desc_item.active .title {
    color: #fff;
    background: linear-gradient(90deg, rgb(78, 117, 253) 0%, rgb(110, 124, 250) 76.96%, rgb(120, 126, 249) 100%)
}

.system_pic .pic_step .right .desc_item .title {
    border-top-right-radius: .2rem;
    border-bottom-right-radius: .2rem;
    border-bottom-left-radius: .5rem;
    font-size: .16rem;
    font-weight: 500;
    line-height: .26rem;
    text-align: center;
    width: .88rem;
    padding-left: .07rem;
    background: #e5e5e5;
    color: #8190c7
}

.system_pic .pic_step .right .desc_item .texts {
    margin-top: .13rem
}

.system_pic .pic_step .right .desc_item .texts .text {
    font-size: .16rem;
    font-weight: 500;
    line-height: .26rem;
    color: #666
}

.system_design {
    width: 12.2rem;
    margin: 0 auto;
    margin-top: .56rem
}

.system_design .intro {
    margin-top: .58rem;
    position: relative
}

.system_design .intro img {
    height: 6.43rem
}

.system_design .intro .intro-text {
    position: absolute;
    width: 5.98rem;
    top: 0;
    background-color: #fff;
    border-radius: .2rem;
    padding: .17rem .21rem;
    box-shadow: 0 .02rem .06rem .04rem rgba(82, 118, 253, .2);
    box-sizing: border-box;
    margin-bottom: .28rem;
    border: .03rem solid #5276fd;
    left: 6.15rem;
    top: 4.5rem
}

.system_design .intro .intro-text .title {
    border-top-right-radius: .2rem;
    border-bottom-right-radius: .2rem;
    border-bottom-left-radius: .5rem;
    font-size: .16rem;
    font-weight: 500;
    line-height: .26rem;
    text-align: center;
    width: .88rem;
    padding-left: .07rem;
    color: #fff;
    background: linear-gradient(90deg, rgb(78, 117, 253) 0%, rgb(110, 124, 250) 76.96%, rgb(120, 126, 249) 100%)
}

.system_design .intro .intro-text .texts {
    margin-top: .13rem
}

.system_design .intro .intro-text .texts .text {
    font-size: .16rem;
    font-weight: 500;
    line-height: .26rem;
    color: #666
}

.system_order {
    width: 12.2rem;
    margin: 0 auto;
    margin-top: .75rem;
}

.system_order .title {
    margin-bottom: .39rem;
}

.system_order .intro {
    background: #f7fbff;
    display: flex;
    border-radius: .2rem;
    transform: translateX(-0.22rem);
}

.system_order .intro .left img {
    width: 6.24rem;
    height: 5.58rem
}

.system_order .intro .right {
    margin-left: .28rem;
    padding-top: 1.52rem
}

.system_order .intro .right h4 {
    color: #4b74fe;
    font-size: .2rem;
    font-weight: 700;
    line-height: .2rem
}

.system_order .intro .right .texts {
    margin-top: .2rem;
    width: 4.82rem
}

.system_order .intro .right .texts p {
    color: #666;
    line-height: .26rem;
    font-size: .16rem;
    margin-bottom: .15rem
}

.system_order .module_title {
    font-size: .2rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: .26rem;
    margin-top: .36rem;
    margin-bottom: .11rem
}

.system_kandeng {
    display: flex;
    margin: 0 auto;
    width: 12.2rem;
    background-color: #f7fbff;
    height: 6.44rem;
    margin-top: .11rem;
    display: flex;
    margin-bottom: 1.47rem;
    border-radius: .2rem;
    transform: translateX(-0.22rem);
}

.system_kandeng .left {
    padding-top: 1.44rem;
    padding-left: .2rem
}

.system_kandeng .left h4 {
    color: #4b74fe;
    line-height: .26rem;
    font-size: .2rem;
    font-weight: 700;
    text-align: left;
    margin-bottom: .21rem
}

.system_kandeng .left ul {
    list-style: none
}

.system_kandeng .left ul li {
    margin-bottom: .3rem;
    font-size: .16rem;
    color: #666
}

.system_kandeng .right img {
    width: 7.85rem;
    height: 6.49rem;
    max-width: unset !important;
}

.title p {
    font-size: .2rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: .26rem;
    margin-top: .22rem
}

.title .system_title_popup {
    width: 1.3rem;
    height: .48rem;
    position: relative;
    color: #fff;
    line-height: .48rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem;
    background: linear-gradient(90deg, rgb(71, 115, 254) 0%, rgb(125, 127, 248) 100%), #4f75fd
}

.title .system_title_popup::after {
    content: "";
    position: absolute;
    bottom: .21rem;
    left: .97rem;
    width: .35rem;
    height: .35rem;
    background-size: .35rem .35rem;
    background-image: url(../../../public/images/system/icons/system_title_popup.png);
    background-repeat: no-repeat;
}

.title .system_title_popup span {
    font-size: .22rem
}

.title .system_title_popup::after {
    content: "";
    position: absolute;
    top: -0.1rem;
    right: -0.05rem;
    width: .35rem;
    height: .35rem;
    background-size: .35rem .35rem;
    background-image: url(../../../public/images/system/icons/system_title_popup.png);
    background-repeat: no-repeat;

}

.title .system_title_popup span {
    font-size: .22rem
}

@keyframes slideInUp {
    0% {
        -webkit-transform: translateY(8%);
        transform: translateY(8%);
        visibility: visible
    }

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