/*  pc-nav  */
.main-width {
    max-width: 1200px;
    margin: 0 auto;
}

.nav {
    display: flex;
    justify-content: center;
    transition: all .5s;
}

.nav-main {
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nav .nav-item {
    display: flex;
    flex: 1;
    align-items: center;
    font-size: 16px;
    font-weight: 400;

}

.nav .nav-item .nav-item-list {
    display: flex;
}

.nav .nav-item .nav-item-icon {
    display: none;
}

.nav .nav-item .item {
    position: relative;
    box-sizing: border-box;
    padding: 10px 5px;
    margin: 10px;
    transition: all .5s;

}

.nav .nav-item .item a {
    white-space: nowrap;
}

.nav .nav-item .item.current {
    border-bottom: 2px red solid;

}

.nav .nav-item .item.current a {
    color: red
}

.nav .nav-item-children {
    position: absolute;
    z-index: 1;
    display: none;
    left: 0;
    top: 46px;
    background-color: #fff;
    /* border: 1px solid #ddd; */
    border-radius: 5px;
    flex-wrap: wrap;
    width: 500px;
    box-sizing: border-box;
    padding: 10px;
    box-shadow: 0 10px 20px #0000001a;
}

.nav .nav-item-children .item-children {
    align-items: center;
    border-radius: 6px;
    color: #333;
    cursor: pointer;
    display: flex;
    font-size: 16px;
    min-height: 45px;
    width: 215px;
    box-sizing: border-box;
    padding: 5px;
    margin: 10px;
    overflow: hidden;
    /* */

}





.nav .nav-item-children .item-children .nav-icon {
    width: 28px;
    height: 28px;
    background-color: #fff9f2;
    margin-right: 10px;
    margin-left: 5px;
}



.nav .nav-item-children .item-children .nav-content .nav-title {
    font-size: 16px;
    font-weight: 500;
    color: #333
}

.nav .nav-item-children .item-children .nav-content .nav-desc {
    font-size: 12px;
    font-weight: 400;
    width: 156px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.nav .nav-item-children .item-children:hover {
    background-color: #f5f6f7;
}


.nav .nav-item .item:hover>.nav-item-children {
    display: flex;
}

.nav .logo {
    display: flex;
    align-items: center;
    margin-right: 60px;
    transition: all .5s;
}

.nav .logo img {
    height: 40px;
    margin-right: 15px;
}

.nav .logo .title {
    font-size: 20px;
    font-weight: 400;
    color: rgba(82, 74, 74, 1);

}

.nav .login {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 13px;
    color: #e45656;
}

.nav .login .bth {
    display: inline-block;
    width: 96px;
    height: 34px;
    line-height: 34px;
    border-radius: 34px;
    text-align: center;
    /* 手型 */
    cursor: pointer;
}

.nav .login .act-btn {
    background: #fff;
    color: #ff6156;
    border: 1px solid #ff6156;
    margin-right: 20px;
}

.nav .login .login-btn,
.nav .login .actmag-btn {
    background: #ff6156;
    color: #fff;
}

.nav .login .actmag-btn {
    display: none;
}




@media (max-width: 1000px) and (min-width: 768px) {
    .nav .nav-item .item {
        padding: 5px;
        margin: 10px 5px;
    }

    .nav .nav-item .nav-item-list .nav-item-children {
        top: 36px
    }
}

@media (max-width: 768px) {
    .nav {
        position: relative;

    }

    .nav .logo {
        margin-left: 10px;
    }

    .nav .login {
        display: none;
    }

    .nav .nav-item {
        justify-content: flex-end;

    }

    .nav-main .nav-item .nav-item-list {
        display: none;
        position: absolute;
        width: 100%;
        top: 70px;
        z-index: 3;
        background-color: #f3f3f3;
        flex-direction: column;
        overflow: hidden;
    }

    .nav.nav-item.item {
        margin: 10px 0;
        padding: 5px;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .nav .nav-item .nav-item-icon {
        display: block;
        margin-right: 10px;
    }
}

/*  */

.m-2 {
    margin: 10px;
}

.p-2 {
    padding: 10px;
}

.button {
    margin-top: 20px;
}

.td-button {
    text-align: center;
    display: inline-block;
    padding: 8px 20px;
    border-radius: 5px;

    margin-bottom: 25px;
}

/* 幻灯片 */

.slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.slider .slide {
    /* position: absolute; */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    box-sizing: border-box;
    padding: 20px 10px;
}

.slider .slide.active {
    display: flex;
}

.slider .slide img {
    width: 100%;
    /* height: 100%; */
}

.slider .slide .content {
    /* position: absolute; */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
}

.slider .slider-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 100%;
}

.slider:hover .slider-control .arrow {
    opacity: 1;
}

.slider .slider-control .arrow {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 50%;
    margin: auto 0;
    cursor: pointer;
    z-index: 1;
    background-repeat: no-repeat;
    opacity: 0;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    background-image: url(../img/slider-arrow.png);

}

.slider .slider-control .prev {
    left: 30px;
    background-position: -166px center;
    transform: translateX(20px);
    -webkit-transform: translateX(20px);
}

.slider .slider-control .prev:hover {
    background-position: -106px center;
}

.slider .slider-control .next {
    right: 30px;
    background-position: -48px center;
    transform: translateX(-20px);
    -webkit-transform: translateX(-20px);
}

.slider .slider-control .next:hover {
    background-position: 12px center;
}

.slider .info-box {
    display: flex;
    padding-left: 30px;
    justify-content: center;
    flex-direction: column;
}

.slider .slide .type {
    position: relative;
    max-width: 1200px;
    margin: auto;

}


.slider .type1,
.slider .type2 {
    display: flex;
}

.slider .type1 .slide-image,
.slider .type2 .slide-image {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.slider .slide-info {
    display: flex;
    justify-content: center;
}

.slider .slide-info .btn-use {
    margin-top: 20px;
}

.slider .type1 .slide-info,
.slider .type2 .slide-info {
    flex: 1;

    justify-content: flex-start;
}

.slider .type0 .slide-info {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: flex-start;
}

@media (max-width: 768px) {
    /* .slider .active {
        height: 260px !important;
    }

    .slider .type0 .slide-info {
        padding: 0 !important
    }

    .slider .slide-info .btn-use {
        display: none;
    }

    .slider .info-box {
        padding-left: 10px;
    }

    .slider .slide .type {
        display: flex;
        align-items: center;
    } */

}

/* intro*/

.intro {
    background-size: 100% 100%;
}

.intro .title {
    color: #333;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
}

.intro .subtitle {
    align-items: center;
    color: #999;
    font-size: 18px;
    text-align: center;
    line-height: 42px;
    margin-top: 18px;


}

/** row_shape **/


.row_shape-intro {
    padding: 40px 0 80px;
    position: relative;
    width: 100%;
    background-position: 50%;
    background-size: cover;
}


.row_shape-intro .title {
    color: #333;
    font-size: 30px;
    font-weight: 700;
    margin-top: 20px;
    text-align: center;
}

.row_shape-item {
    padding: 40px 0;
}


.row_shape-item:last-child {
    padding-bottom: 0;
}


.row_shape-item img {
    transition: all .5s;
}

.row_shape-item img:hover {
    transform: translateY(-10px)
}

.row_shape-item .a-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

.row_shape-item .type_left {
    padding-right: 60px;
}

.row_shape-item .type_right {
    padding-left: 60px;
}

.row_shape-item .a-box .title {
    color: #333;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.5em;
    text-align: left;
}

.row_shape-item .a-box .desc {
    color: #999;
    font-size: 18px;
    line-height: 30px;
    margin-top: 30px;

}

.row_shape-item .a-box .btn-use {
    margin-top: 54px
}

.row_shape-item .row_shape-flex.img-row_shape {
    display: flex;
    justify-content: right;
    margin: 0 auto;
}

.row_shape-item .row_shape-flex.img-row_shape .a-box {
    flex: 1;

}

.row_shape-item .row_shape-flex.row_shape-img {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.row_shape-item .row_shape-flex.row_shape-img img {
    order: 1
}

@media (max-width: 768px) {
    .row_shape-item .row_shape-flex.row_shape-img {
        flex-direction: column !important;
    }

    .row_shape-item .row_shape-flex.row_shape-img img {
        width: 100% !important;
    }

    .row_shape-item .a-box {
        align-items: center;
    }


    .row_shape-item .type_left,
    .row_shape-item .type_right {
        padding: 10px;
        padding-bottom: 40px;
    }

}

/** grid_card **/
.grid_card-intro {
    padding: 40px 0 40px;
    position: relative;
    width: 100%;
    background-size: cover;
}


.grid_card-intro .cont-box {
    display: flex;
    justify-content: space-evenly;
    margin-top: 60px;
    flex-wrap: wrap;
}

.grid_card-intro .cont-box .is-item {
    display: block;
    text-align: center;
    box-sizing: border-box;
    transition: all .5s;
    overflow: hidden;
    /* 手型 */
    cursor: pointer;
    background-size: 100% 100%;
}



.grid_card-intro .cont-box .is-item:hover {
    box-shadow: 0 10px 20px #0000001a;
    transform: translateY(-10px)
}



.grid_card-intro .cont-box .is-item .is-icon {}



.grid_card-intro .cont-box .is-item .is-title {
    color: #333;
    font-size: 22px;
    font-weight: 700;
    margin: 30px 0 40px
}

.grid_card-intro .cont-box .is-item .is-desc {
    color: #777;
    font-size: 16px;
    line-height: 30px;

}

.grid_card-intro .cont-box .is-item .is-link {
    display: block;
    position: absolute;
    text-align: center;
    bottom: -10px;
    left: calc(50% - 51px);
    width: 102px;
    height: 32px;
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
    line-height: 32px;
    opacity: 0;
    transition: all .3s
}



.grid_card-intro .cont-box .is-item:hover .is-link {
    bottom: 19px;
    cursor: pointer;
    opacity: 1
}

.grid_card-intro .cont-box.is-show-link .is-item:hover .is-icon {
    transform: scale(0.8, 0.8);
    margin-top: -10px;
    transition: all .3s
}

.grid_card-intro .cont-box.is-show-link .is-item:hover .is-title {
    margin-top: 0px;
    margin-bottom: 10px;
    transition: all .3s
}

/* grid_2 */
.grid_card-intro .cont-box .grid_2 {
    padding: 40px 24px;
    width: 560px;
    margin-bottom: 30px;
}

.grid_card-intro .cont-box .grid_2 .is-title {
    margin: 20px 0 20px;
}

.grid_card-intro .cont-box .grid_2.show-up-down {
    padding: 40px;
}

.grid_card-intro .cont-box .grid_2.show-up-down .is-line {
    text-align: left;
    margin-left: 20px;
}

.grid_card-intro .cont-box.is-full .grid_2 {
    padding: 0px 0px 40px 0px;
}

.grid_card-intro .cont-box.is-full .grid_2 .is-line {
    padding: 0 20px 40px;
}

.grid_card-intro .cont-box.is-full .grid_2 .is-title {
    margin: 30px 0 10px;
}

.grid_card-intro .cont-box.is-full .grid_2 {
    padding: 0
}

.grid_card-intro .cont-box.is-full .grid_2.show-up-down .is-line {
    padding: 0;
}

.grid_card-intro .cont-box.is-full .grid_2.show-up-down .is-title {
    margin: 15px 0 10px;
}

.grid_card-intro .cont-box.is-full .grid_2.show-up-down .is-desc {
    margin-bottom: 15px;
}


.grid_card-intro .cont-box .show-up-down .is-line {
    text-align: left;
    margin-left: 25px;
}

/* grid_3 */

.grid_card-intro .cont-box .grid_3 {
    padding: 40px 24px;
    width: 380px;
    margin-bottom: 30px;
}

.grid_card-intro .cont-box .grid_3 .is-title {
    margin: 20px 0 20px;
}

.grid_card-intro .cont-box .grid_3.show-up-down {
    padding: 20px;
}

.grid_card-intro .cont-box .grid_3.show-up-down .is-line {
    text-align: left;
    margin-left: 20px;
}

.grid_card-intro .cont-box.is-full .grid_3 {
    padding: 0px 0px 40px 0px;
}

.grid_card-intro .cont-box.is-full .grid_3 .is-line {
    padding: 0 20px 40px;
}

.grid_card-intro .cont-box.is-full .grid_3 .is-title {
    margin: 30px 0 10px;
}

.grid_card-intro .cont-box.is-full .grid_3 {
    padding: 0
}

.grid_card-intro .cont-box.is-full .grid_3.show-up-down .is-line {
    padding: 0;
}

.grid_card-intro .cont-box.is-full .grid_3.show-up-down .is-title {
    margin: 15px 0 10px;
}

.grid_card-intro .cont-box.is-full .grid_3.show-up-down .is-desc {
    margin-bottom: 15px;
}

/* grid_4 */
.grid_card-intro .cont-box .grid_4 {
    padding: 35px 20px;
    width: 285px;
    margin-bottom: 20px;
}

.grid_card-intro .cont-box .grid_4 .is-title {
    margin: 20px 0 20px;
}

.grid_card-intro .cont-box .grid_4.show-up-down {
    padding: 10px 15px;
}

.grid_card-intro .cont-box .grid_4.show-up-down {
    padding: 10px 15px;
}

.grid_card-intro .cont-box .grid_4.show-up-down .is-line {
    text-align: left;
    margin-left: 15px;
}

.grid_card-intro .cont-box.is-full .grid_4 {
    padding: 0px 0px 35px 0px;
}

.grid_card-intro .cont-box.is-full .grid_4 .is-line {
    padding: 0 20px 35px;
}

.grid_card-intro .cont-box.is-full .grid_4 .is-title {
    margin: 30px 0 10px;
}


.grid_card-intro .cont-box.is-full .grid_4 {
    padding: 0
}

.grid_card-intro .cont-box.is-full .grid_4.show-up-down .is-line {
    padding: 0;
}

.grid_card-intro .cont-box.is-full .grid_4.show-up-down .is-title {
    margin: 10px 0 5px;
}

.grid_card-intro .cont-box.is-full .grid_4.show-up-down .is-desc {
    margin-bottom: 10px;
}



/*  grid_5 */

.grid_card-intro .cont-box .grid_5 {
    padding: 20px 15px;
    width: 228px;
    margin-bottom: 10px;
}

.grid_card-intro .cont-box .grid_5 .is-title {
    margin: 20px 0 20px;
    font-weight: 500;
}

.grid_card-intro .cont-box .grid_5 .is-desc {
    line-height: 20px;
}

.grid_card-intro .cont-box .grid_5.show-up-down {
    padding: 10px;
}

.grid_card-intro .cont-box .grid_5.show-up-down .is-line {
    text-align: left;
    margin-left: 10px;
}

.grid_card-intro .cont-box .grid_5.show-up-down .is-title {
    margin-bottom: 5px;
}

.grid_card-intro .cont-box.is-full .grid_5 {
    padding: 0px 0px 20px 0px;
}

.grid_card-intro .cont-box.is-full .grid_5 .is-line {
    padding: 0 10px 20px;
}

.grid_card-intro .cont-box.is-full .grid_5 .is-title {
    margin: 20px 0 5px;
}


.grid_card-intro .cont-box.is-full .grid_5 {
    padding: 0
}

.grid_card-intro .cont-box.is-full .grid_5.show-up-down .is-line {
    padding: 0;
}

.grid_card-intro .cont-box.is-full .grid_5.show-up-down .is-title {
    margin: 5px 0 5px;
}

.grid_card-intro .cont-box.is-full .grid_5.show-up-down .is-desc {
    margin-bottom: 10px;
}

/* grid_6 */
.grid_card-intro .cont-box .grid_6 {
    padding: 20px 12px;
    width: 189px;
    margin-bottom: 10px;
}

.grid_card-intro .cont-box .grid_6 .is-title {
    margin: 20px 0 10px;
    font-weight: 500;
}

.grid_card-intro .cont-box .grid_6 .is-desc {
    line-height: 20px;
}

.grid_card-intro .cont-box .grid_6.show-up-down {
    padding: 10px;
}

.grid_card-intro .cont-box .grid_6.show-up-down .is-line {
    text-align: left;
    margin-left: 10px;
}

.grid_card-intro .cont-box .grid_6.show-up-down .is-title {
    margin-bottom: 5px;
}

.grid_card-intro .cont-box.is-full .grid_6 {
    padding: 0px 0px 20px 0px;
}

.grid_card-intro .cont-box.is-full .grid_6 .is-line {
    padding: 0 10px 20px;
}

.grid_card-intro .cont-box.is-full .grid_6 .is-title {
    margin: 20px 0 5px;
}


.grid_card-intro .cont-box.is-full .grid_6 {
    padding: 0
}

.grid_card-intro .cont-box.is-full .grid_6.show-up-down .is-line {
    padding: 0;
}

.grid_card-intro .cont-box.is-full .grid_6.show-up-down .is-title {
    margin: 5px 0 5px;
}

.grid_card-intro .cont-box.is-full .grid_6.show-up-down .is-desc {
    margin-bottom: 10px;
}

/* grid_7 */

.grid_card-intro .cont-box .grid_7 {
    padding: 10px 8px;
    width: 162px;
    margin-bottom: 8px;
}


.grid_card-intro .cont-box .grid_7 .is-title {
    margin: 20px 0 10px;
    font-weight: 500;
}

.grid_card-intro .cont-box .grid_7 .is-desc {
    line-height: 20px;
}

.grid_card-intro .cont-box .grid_7.show-up-down {
    padding: 10px;
}

.grid_card-intro .cont-box .grid_7.show-up-down .is-line {
    text-align: left;
    margin-left: 10px;
}

.grid_card-intro .cont-box .grid_7.show-up-down .is-title {
    margin-bottom: 5px;
}

.grid_card-intro .cont-box.is-full .grid_7 {
    padding: 0px 0px 20px 0px;
}

.grid_card-intro .cont-box.is-full .grid_7 .is-line {
    padding: 0 10px 10px;
}

.grid_card-intro .cont-box.is-full .grid_7 .is-title {
    margin: 10px 0 5px;
}


.grid_card-intro .cont-box.is-full .grid_7 {
    padding: 0
}

.grid_card-intro .cont-box.is-full .grid_7.show-up-down .is-line {
    padding: 0;
}

.grid_card-intro .cont-box.is-full .grid_7.show-up-down .is-title {
    margin: 5px 0 5px;
}

.grid_card-intro .cont-box.is-full .grid_7.show-up-down .is-desc {
    margin-bottom: 10px;
}

/* grid_8 */

.grid_card-intro .cont-box .grid_8 {
    padding: 10px 8px;
    width: 140px;
    margin-bottom: 8px;
}


.grid_card-intro .cont-box .grid_8 .is-title {
    margin: 20px 0 10px;
    font-weight: 500;
}

.grid_card-intro .cont-box .grid_8 .is-desc {
    line-height: 20px;
}

.grid_card-intro .cont-box .grid_8.show-up-down {
    padding: 10px;
}

.grid_card-intro .cont-box .grid_8.show-up-down .is-line {
    text-align: left;
    margin-left: 10px;
}

.grid_card-intro .cont-box .grid_8.show-up-down .is-title {
    margin-bottom: 5px;
}

.grid_card-intro .cont-box.is-full .grid_8 {
    padding: 0px 0px 20px 0px;
}

.grid_card-intro .cont-box.is-full .grid_8 .is-line {
    padding: 0 10px 10px;
}

.grid_card-intro .cont-box.is-full .grid_8 .is-title {
    margin: 10px 0 5px;
}


.grid_card-intro .cont-box.is-full .grid_8 {
    padding: 0
}

.grid_card-intro .cont-box.is-full .grid_8.show-up-down .is-line {
    padding: 0;
}

.grid_card-intro .cont-box.is-full .grid_8.show-up-down .is-title {
    margin: 5px 0 5px;
}

.grid_card-intro .cont-box.is-full .grid_8.show-up-down .is-desc {
    margin-bottom: 10px;
}


.grid_card-intro .cont-box .show-up-down {
    display: flex;
    align-items: center;
}



.grid_card-intro .cont-box .show-up-down .is-title {
    margin: 0px 0 10px;
}

.grid_card-intro .cont-box .is-item .is-full {
    width: 100% !important;
}

@media (max-width: 768px) {
    .grid_card-intro .cont-box {
        justify-content: space-around;
    }
}

/* banner-intro*/


.banner-intro {
    background-position: 50%;
    background-size: cover;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
}

.banner-intro .cont-box {
    padding: 40px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.banner-intro .cont-box .title {
    color: #000;
    font-size: 24px;
}

.banner-intro .cont-box .subtitle {
    font-size: 20px;
    margin-top: 15px
}

.banner-intro .cont-box .bth {
    margin-top: 25px;
}


/* index */


.suspension {
    position: relative;
    background: #fff;
    box-shadow: 0 3px 10px rgba(51, 51, 51, .1);
    border-radius: 4px;
    display: flex;
    overflow: hidden;
    z-index: 2;
}

.suspension .child {
    flex: 1;
    padding: 24px 37px;
    display: flex;
    position: relative;
    align-items: center;
    cursor: pointer;
    transition: all .5s;
    --suspension-hover-color: initial;

}



.suspension .child:hover {
    background-color: var(--suspension-hover-color);
}

.suspension .child img {
    margin-right: 16px;
    transition: transform .5s;
}

.suspension .child .main {
    position: relative;
    display: flex;
    flex-direction: column;
}

.suspension .child .main span.title {
    margin-top: 4px;
    font-size: 16px;
    color: #333;
    line-height: 16px;
}

.suspension .child .main span.subtitle {
    display: inline-block;
    font-size: 14px;
    color: #999;
    line-height: 21px;
    margin-top: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

}



.suspension .child:hover img {
    transform: translateY(-5px)
}

@media (max-width: 768px) {
    .suspension .child {
        flex-direction: column;
        padding: 20px 10px;
    }

    .suspension .child .main {
        margin-top: 10px;
        align-items: center;
    }

    .suspension .child img {
        margin-right: 0;
    }
}

/* flow-intro */
.flow-intro {
    background-size: 100% 100%;
    padding: 80px 0 60px 0;
    box-sizing: border-box;
    width: 100%;
}

.flow-intro .flow {
    margin: 0 auto;
    position: relative;
    display: flex;
    width: 80%;
    justify-content: space-between;
    box-sizing: border-box;
    margin-top: 40px;
}


.flow-intro .flow .line {
    background: #e6e6e6;
    bottom: 26px;
    height: 1px;
    left: 6%;
    overflow: hidden;
    position: absolute;
    width: 88%
}

.flow-intro .flow .line .bg {
    background-color: #e50012;
    height: 100%;
    transition: 1s
}

.flow-intro .flow .item {
    color: #666;
    cursor: pointer;
    font-size: 18px;
    text-align: center;
    width: 130px;
    z-index: 2
}

.flow-intro .left .flow-item {

    overflow-y: auto;
    width: 50%;
    transition: all .5s;
}

.flow-intro .flow .item .icon {
    background: #ffdcdc;
    border-radius: 50%;
    height: 20px;
    margin: 17px auto;
    width: 20px;
    z-index: 2
}

.flow-intro .flow .item i {
    background: #ffb2b2;
    border-radius: 50%;
    display: block;
    height: 10px;
    left: 5px;
    position: relative;
    top: 5px;
    width: 10px
}

.flow-intro .flow .item-active {
    color: #e50012
}

.flow-intro .flow .item-active i {
    background: #e50012
}


.flow-intro .box {
    background: #fff;
    border-radius: 8px;
    margin: 50px auto;
    position: relative;
    transition: all .5s
}

.flow-intro .box .right-bg {
    position: absolute;
    right: 0;
    top: 0;
    width: 590px
}

.flow-intro .box .lottie-container {
    width: 50%;
    display: flex;
    align-items: center;
    transition: all .5s;
}

.flow-intro .box .lottie-container .right-iocn {
    width: 100%;
}

.flow-intro .box .lottie-container>div {
    display: none;
}

.flow-intro .box .lottie-container .animation {
    opacity: 0;
    transition: all .5s
}

.flow-intro .box .lottie-container .animation1,
.flow-intro .box .lottie-container .animation10,
.flow-intro .box .lottie-container .animation11,
.flow-intro .box .lottie-container .animation12,
.flow-intro .box .lottie-container .animation2,
.flow-intro .box .lottie-container .animation3,
.flow-intro .box .lottie-container .animation4,
.flow-intro .box .lottie-container .animation5,
.flow-intro .box .lottie-container .animation6,
.flow-intro .box .lottie-container .animation7,
.flow-intro .box .lottie-container .animation8,
.flow-intro .box .lottie-container .animation9 {
    animation: mymove-4b93732b 1s;
    animation-fill-mode: forwards
}

@keyframes mymove-4b93732b {
    0% {
        opacity: .5;
        position: relative;
        top: 30px
    }

    to {
        opacity: 1;
        position: relative;
        top: 0
    }
}

.flow-intro .box .left {
    text-align: left;
    display: none;
    width: 100%;
    background-position: right;
    background-repeat: no-repeat;
}

.flow-intro .box .left .info {
    display: flex;
    flex-direction: row-reverse;
}

.flow-intro .box .left0 {
    display: block;
}

.flow-intro .box .left .title {
    text-align: left;
    color: #000;
    font-size: 24px;
    margin-bottom: 30px;
    padding: 32px 0 0 53px
}

.flow-intro .box .left .flow-subitem {
    box-sizing: border-box;
    cursor: pointer;
    height: 130px;
    padding-right: 15px;

}

.flow-intro .box .left .flex-s {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.flow-intro .box .left .flow-subitem .icon {
    height: 60px;
    margin-left: 38px;
    width: 60px
}

.flow-intro .box .left .flow-subitem .icon img {
    width: 100%
}

.flow-intro .box .left .flow-subitem .text {
    flex: 1;
    margin-left: 8px
}

.flow-intro .box .left .flow-subitem .tit {
    color: #333;
    font-size: 18px
}

.flow-intro .box .left .flow-subitem .desc {
    color: #999;
    font-size: 14px;
    line-height: 23px;
    margin-top: 8px;
    /* 只显示两行 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

}



.flow-intro .box .left .flow-item-on {
    background: linear-gradient(90deg, #f2f4ff, hsla(0, 0%, 100%, 0))
}

.flow-intro .box .left .item-1 {
    background: linear-gradient(90deg, #f2f4ff, hsla(0, 0%, 100%, 0))
}

.flow-intro .box .left .item-2 {
    background: linear-gradient(90deg, #f2fffc, #fff)
}

.flow-intro .box .left .item-3 {
    background: linear-gradient(90deg, #fff9f2, #fff)
}

.flow-intro .box .left .item-4 {
    background: linear-gradient(90deg, #f2fffc, #fff)
}

.flow-intro .box .left .item-5 {
    background: linear-gradient(90deg, #fffbf3, #fff)
}

.flow-intro .box .left .item-6 {
    background: linear-gradient(90deg, #f2fffc, #fff)
}

.flow-intro .box .left .item-7 {
    background: linear-gradient(90deg, #fff9f2, #fff)
}

.flow-intro .box .left .item-8 {
    background: linear-gradient(90deg, #f4f2ff, #fff)
}

.flow-intro .box .left .item-9 {
    background: linear-gradient(90deg, #f2f5ff, #fff)
}

.flow-intro .box .left .item-10 {
    background: linear-gradient(90deg, #f4f2ff, #fff)
}

.flow-intro .box .left .item-11 {
    background: linear-gradient(90deg, #fff9f2, #fff)
}

.flow-intro .box .left .item-12 {
    background: linear-gradient(90deg, #f2f5ff, #fff)
}

.flow-intro .box .left2 .item {
    height: 110px
}

@media (max-width: 768px) {
    .flow-intro .box .left .info {
        flex-direction: column-reverse;
    }

    .flow-intro .box .lottie-container {}

    .flow-intro .box .lottie-container,
    .flow-intro .box .flow-item {
        width: 100%;
    }


}

/* .advantage-list */


.advantage-intro {
    padding: 90px 0 60px;
    position: relative;
    width: 100%
}

.advantage-intro .content-bg {
    left: 0;
    position: absolute;
    top: -71%;
    width: 100%;
    z-index: -1
}

.advantage-intro .advantage-list {
    display: flex;
    flex-wrap: wrap;
    margin: 70px auto 0;
    width: 1200px
}

.advantage-intro .advantage-list .item {
    background: #fff;
    box-sizing: border-box;
    cursor: pointer;
    height: 280px;
    margin-bottom: 30px;
    margin-left: 40px;
    position: relative;
    text-align: center;
    transition: all .4s;
    width: 270px
}

.advantage-intro .advantage-list .item:nth-child(4n+1) {
    margin-left: 0
}

.advantage-intro .advantage-list .item .title {
    color: #333;
    font-size: 20px;
    margin-top: 10px
}

.advantage-intro .advantage-list .item .tip {
    box-sizing: border-box;
    color: #999;
    font-size: 14px;
    line-height: 25px;
    margin-top: 10px;
    padding: 0 20px
}

@keyframes move3000-43ee19c1 {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 0 -3000px
    }
}

@keyframes move6000-43ee19c1 {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 0 -6000px
    }
}

@keyframes move2400-43ee19c1 {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 0 -2400px
    }
}

.advantage-intro .advantage-list .item .img {
    animation-fill-mode: forwards;
    background-repeat: no-repeat;
    height: 120px;
    margin: 30px auto 0;
    overflow: hidden;
    position: relative;
    width: 120px
}

.advantage-intro .advantage-list .item .img.active-2400 {
    animation-name: move2400-43ee19c1
}

.advantage-intro .advantage-list .item .img.active-3000 {
    animation-name: move3000-43ee19c1
}

.advantage-intro .advantage-list .item .img.active-6000 {
    animation-name: move6000-43ee19c1
}

.advantage-intro .advantage-list .item:hover {
    border-radius: 6px;
    box-shadow: 0 0 20px 1px #0000000f;
    transform: translateY(-20px)
}

.advantage-intro .advantage-list .item:hover img {
    opacity: 0 !important
}

.advantage-intro .advantage-list .item:hover .animation {
    opacity: 1
}


/* create-btn */
.create-btn {
    background-position: 50%;
    background-size: cover;
    text-align: center;
    width: 100%;
    padding-bottom: 40px;
}

.create-btn .title {
    color: #000;
    font-size: 24px;
    padding-top: 40px
}

.create-btn .subtitle {
    font-size: 20px;
    padding-top: 15px
}

.create-btn .b-btn {
    background: #e50012;
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    font-size: 20px;
    height: 52px;
    line-height: 52px;
    margin-top: 30px;
    transition: .5s;
    width: 160px
}

.create-btn .b-btn:hover {
    transform: translateY(-5px)
}



.create-btn.bg2 .title {
    color: #fff;
}

.create-btn.bg2 .b-btn {
    background: #fff;
    border-radius: 4px;
    color: #e50012;
}


/* scene */
.scene-intro {
    padding: 80px 0 60px 0;
}

.scene-intro .scene-nav {
    box-sizing: border-box;
    display: flex;
    height: 30px;
    padding: 0 80px;
    position: relative;
    font-size: 16px;
    margin-top: 40px;
    justify-content: center;
}

.scene-intro .scene-nav .dashed {
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%
}

.scene-intro .scene-nav .nav-item {
    cursor: pointer;
    margin-left: 70px;
    padding: 0 10px 30px;
    position: relative;
    z-index: 2
}

.scene-intro .scene-nav .nav-item:first-child {
    margin-left: 0
}

.scene-intro .scene-nav .circular {
    background: #fff;
    border: 1px solid rgba(229, 0, 18, .5);
    border-radius: 50%;
    height: 16px;
    left: 50%;
    margin-left: -10px;
    opacity: 1;
    position: absolute;
    top: 37px;
    transition: .5s;
    width: 16px
}

.scene-intro .scene-nav .circular i {
    background: #e50012;
    border-radius: 50%;
    display: block;
    height: 8px;
    margin: 3px auto;
    width: 8px
}

.scene-intro .scene-nav .nav-item-active {
    color: #e50012;
    border-bottom: 2px solid #e50012;
}


.scene-intro .scene-cont-box {

    margin-top: 30px;
    overflow: hidden;
    position: relative;
    width: 100%;

}

.scene-intro .scene-cont-box .scene-cont-list {
    display: flex;
    position: relative;
    width: 100%;
    display: none;
}

.scene-intro .scene-cont-box .left-img {
    height: 700px;
    position: relative;
    text-align: left;
    width: 50%
}

.scene-intro .scene-cont-box .left-img .phont-top {
    left: 120px;
    position: absolute;
    top: 42px;
    width: 130px;
    z-index: 4
}

.scene-intro .scene-cont-box .left-img .iframe-box {
    border-radius: 10px;

    left: 45px;
    overflow: hidden;
    position: absolute;
    top: 42px;
    width: 320px;
    height: 650px;
    box-shadow: 0 0 5px 0 rgba(51, 51, 51, .2);
}

.scene-intro .scene-cont-box .left-img .iframe-box .iframe-box-con {}

.scene-intro .scene-cont-box .left-img .iframe-box iframe {
    display: block;
    height: 100%;
    width: 100%
}

.scene-intro .scene-cont-box .left-img .btn-list {
    height: auto;
    left: 400px;
    position: absolute;
    top: 136px;
    width: 102px
}

.scene-intro .scene-cont-box .left-img .btn-list .btn {
    background: #f5f5f5;
    border-radius: 18px;
    color: #999;
    cursor: pointer;
    font-size: 16px;
    height: 36px;
    line-height: 36px;
    margin: 39px auto 0;
    text-align: center;
    width: 86px
}

.scene-intro .scene-cont-box .left-img .btn-list .btn:hover {
    background: #e50012;
    color: #fff
}

.scene-intro .scene-cont-box .left-img .btn-list .btn-active {
    background: #e50012;
    border-radius: 22px;
    box-shadow: 0 3px 10px 1px #0000001a;
    color: #fff;
    font-size: 19px;
    height: 43px;
    line-height: 43px;
    width: 102px
}

.scene-intro .scene-cont-box .left-img img {
    width: 430px
}

.scene-intro .scene-cont-box .right-text {
    height: auto;
    padding: 100px 0 0 20px;
    width: 50%;
    box-sizing: border-box;
    transition: all .5s;
}

.scene-intro .scene-cont-box .right-text img {
    margin-left: -10px;
    width: 60px
}

.scene-intro .scene-cont-box .right-text .box {
    position: relative
}

.scene-intro .scene-cont-box .right-text .title {
    color: #141414;
    font-size: 22px;
    margin-top: 15px;
    text-align: left;
}

.scene-intro .scene-cont-box .right-text .tip {
    color: #8b94a3;
    font-size: 14px;
    height: auto;
    line-height: 30px;
    margin-top: 15px;
    width: 100%;

}

.scene-intro .scene-cont-box .right-text .list-href {
    color: #e50012;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    margin-top: 26px
}

.scene-intro .scene-cont-box .right-text .qrcode {

    text-align: center;
    width: 144px;
    margin: auto;
    margin-top: 80px;
}

.scene-intro .scene-cont-box .right-text .qrcode img {
    height: 144px;
    width: 144px
}

.scene-intro .scene-cont-box .right-text .qrcode p {
    color: #999;
    font-size: 14px;
    font-weight: 400;
    margin-top: 10px;
    position: relative;
    text-align: center;
    width: 100%
}

.model-bg {
    display: flex;
    position: relative;
    width: 100%;
    background-position: 50%;
    background-size: cover;
}

@media (max-width: 768px) {
    .scene-intro .scene-cont-box .scene-cont-list {
        flex-direction: column;

    }

    .scene-intro .scene-cont-box .left-img {
        width: 100%;
    }

    .scene-intro .scene-cont-box .right-text {
        width: 100%;
        padding-right: 20px;
    }
}


/* 内容模块 */

.content-intro {
    padding: 40px 0 60px;
    position: relative;
    width: 100%;
    background-position: 50%;
    background-size: cover;
}


.content-intro .title {
    color: #333;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
}

.content-intro .subtitle {
    align-items: center;
    color: #999;
    font-size: 18px;
    text-align: center;
    line-height: 42px;
    margin-top: 18px;
}

.content-item {
    padding: 40px 0;
}


.content-item:last-child {
    padding-bottom: 0;
}


.content-item img {
    transition: all .5s;
    height: 500px;
    width: 700px
}

.content-item img:hover {
    transform: translateY(-10px)
}

.content-item .a-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 440px;
}

.content-item .a-box .title {
    color: #333;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.5em;
    text-align: left;
}

.content-item .a-box .desc {
    color: #999;
    font-size: 18px;
    line-height: 30px;
    margin-top: 30px
}

.content-item .a-box .btn-use {
    margin-top: 54px
}

.content-item .content-flex.img-content {
    display: flex;
    justify-content: right;
    margin: 0 auto;
    width: 1200px
}

.content-item .content-flex.img-content .a-box {
    margin-left: 60px
}

.content-item .content-flex.content-img {
    display: flex;
    justify-content: left;
    margin: 0 auto;
    width: 1200px
}

.content-item .content-flex.content-img img {
    margin-left: 60px;
    order: 1
}

.btn-use {
    background: #e50012;
    border-radius: 4px;
    box-shadow: 0 6px 20px 1px #00000030;
    color: #fff;
    display: block;
    font-size: 20px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    width: 160px;
    transition: .5s;
}

.btn-use.btn-small {
    height: 30px;
    line-height: 30px;
    text-align: center;
    width: 100px;
    font-size: 12px;
}

.btn-use:hover {
    transform: translateY(-5px)
}

@media (max-width: 768px) {
    .btn-use {
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        width: 100px;
    }
}

/* */


.content-intro .ctn-box {
    display: flex;
    justify-content: space-between;
    margin-top: 80px;
    flex-wrap: wrap;
}

.content-intro .ctn-box .is-item {
    display: block;
    background: #fff;
    border-radius: 10px;
    padding: 40px 24px;
    text-align: center;
    transition: all .5s;
    width: 240px;
    margin-bottom: 15px;
}

.content-intro .ctn-box .is-item:hover {
    box-shadow: 0 10px 20px #0000001a;
    transform: translateY(-10px)
}

.content-intro .ctn-box .is-item .is-icon {
    height: 140px;
    margin: 0 auto;
    width: 140px
}

.content-intro .ctn-box .is-item .is-title {
    color: #333;
    font-size: 22px;
    font-weight: 700;
    margin: 30px 0 40px
}

.content-intro .ctn-box .is-item .is-desc {
    color: #777;
    font-size: 16px;
    line-height: 30px;

}

/*vhtml-intro*/

.vhtml-intro {
    box-sizing: border-box;
    padding: 40px 0 60px;
}

.vhtml-intro .cont-box {
    margin-top: 60px;
    font-size: 14px;
    line-height: 2.5em;
    overflow: hidden;
    padding: 0 20px;

}

/* template*/

.com_demo {
    min-height: 800px;
}

.com_demo .case-side {
    background: #fff;
    box-shadow: 0 3px 10px 1px #0000000f;
    height: 98px;
    width: 100%
}

.com_demo .case-side-box {
    overflow: auto;
}

.com_demo .ulli {
    color: #707070;
    font-size: 16px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    white-space: nowrap;
    box-sizing: border-box;
}

.com_demo .case-side .ulli li {
    cursor: pointer;
    display: inline-block;
    height: 98px;
    line-height: 98px;
    margin-left: 40px;
    text-align: center
}

.com_demo .case-side .ulli li:first-child {
    margin-left: 0
}

.com_demo .case-side .ulli li:hover {
    color: #333
}

.com_demo .case-side .ulli .tabBottom {
    background-color: #e50012;
    bottom: 0;
    height: 2px;
    position: absolute;
    transform: translate(0);
    transition: all .5s
}

.com_demo .case-side .ulli .active {
    color: #333
}


.com_demo .case-search {
    background: #f8f8f8;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    margin: 60px auto;
    overflow: hidden;
    padding-left: 25px;
    width: 70%;
    max-width: 850px;
}

.com_demo .case-search .search-input {
    background-color: transparent;
    border: none;
    font-size: 14px;
    outline: none;
    width: calc(100% - 50px)
}

.com_demo .case-search .search-btn {
    background-color: #e50012;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    height: 50px;
    line-height: 50px;
    text-align: center;
    width: 128px
}

.com_demo .main {
    padding-bottom: 40px;
}

.com_demo .main .demo-content {
    padding-bottom: 20px;
}

.com_demo .main .list-status {
    padding: 20px 0;
    position: relative;
    width: 100%
}

.com_demo .main .list-status .list-loading {
    text-align: center;
    color: #666;
}

.com_demo .main .list-status .list-loading .loading {
    position: relative;
    width: 30px;
    height: 30px;
    border: 2px solid #000;
    border-top-color: rgba(0, 0, 0, 0.2);
    border-right-color: rgba(0, 0, 0, 0.2);
    border-bottom-color: rgba(0, 0, 0, 0.2);
    border-radius: 100%;
    margin: auto;
    margin-bottom: 10px;

    animation: circle infinite 0.75s linear;
}

@keyframes circle {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.com_demo .main .list-status .list-empty {
    min-height: 400px;
    padding: 30px 0 50px;
    text-align: center
}

.com_demo .main .list-status .list-empty img {
    width: 250px
}

.com_demo .main .list-status .list-empty .list-tips {
    color: #666;

}

.com_demo .main .list-status .list-finish .list-tips {
    color: #666;
    /* font-size: 16px;
    margin-top: 10px; */
    text-align: center;
}

/*template*/
.template .cases-content {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    box-sizing: border-box;
    justify-content: space-evenly;
}

.template .cases-content:after {
    content: "";
    width: 100%
}

.template .cases-content .cases-content-item {
    margin-left: 20px;
    width: 285px;
    box-sizing: border-box;
}

/* .template .cases-content .cases-content-item:nth-child(4n+1) {
    margin-left: 0
} */

.template .template-item {
    box-sizing: border-box;
    margin-bottom: 30px;
    padding-top: 10px;
    text-align: center;
    width: 100%
}

.template .template-item .item-bg {
    background-color: #fff;
    background-size: cover;
    border: 5px solid #fff;
    border-radius: 5px;
    box-shadow: 0 3px 5px 0px #0000001a;
    cursor: pointer;
    height: 500px;
    margin: 0 auto;
    overflow: hidden;
    transition: .5s;
}

.template .template-item .item-bg .item-img {
    border-radius: 5px;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%
}

.template .template-item .item-bg .item-img img {
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 1
}

.template .template-item .item-bg .item-img .shade {
    background-color: #0000005c;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: .8s;
    width: 100%;
    z-index: 2
}

.template .template-item .item-bg .item-img .shade .qr-code {
    background-color: #fff;
    border: 2px solid #fcc;
    border-radius: 4px;
    margin: 110px auto 0;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    width: 140px;
    align-items: center;
}



.template .template-item .item-bg .item-img .shade .qr-code .qrimg {
    height: 120px;
    width: 120px
}

.template .template-item .item-bg .item-img .shade .qr-code p {
    margin-top: 10px;
    color: #999;
    font-size: 14px
}

.template .template-item .item-bg .item-img .shade .bth-href {
    margin-top: 20px;
    display: inline-block;
}

.template .template-item .itemtexts {
    word-wrap: break-word;
    color: #333;
    font-size: 14px;
    font-weight: 400;
    margin: 15px auto 0;
    overflow: hidden;
    transition: .5s;
    white-space: nowrap;
    width: 249px
}

.template .template-item:hover .item-bg,
.template .template-item:hover .itemtexts {
    transform: translateY(-10px);

}

.template .template-item:hover .item-bg {
    box-shadow: 0 3px 10px 1px #0000001a;
}

.template .template-item:hover .shade {
    opacity: 1 !important
}

@media (min-width: 1200px) {
    .template .cases-content .cases-content-item:nth-child(4n+1) {
        margin-left: 0;
    }

    .template .cases-content {
        justify-content: flex-start;
    }
}

@media (max-width: 1200px) and (min-width: 920px) {
    .template .cases-content .cases-content-item:nth-child(3n+1) {
        margin-left: 0;
    }
}

@media (max-width: 920px) and (min-width: 625px) {
    .template .cases-content .cases-content-item:nth-child(2n+1) {
        margin-left: 0;
    }
}

@media (max-width: 625px) {
    .template .cases-content .cases-content-item {
        margin-left: 0;
    }
}

@media (max-width: 768px) {}

/*act_case*/


.act_case .ac-con,
.flex-s-s {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start
}

.act_case .ac-con {
    position: relative;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
}

.act_case .ac-con .ac-item {
    width: 285px;
    height: 238px;
    margin-left: 20px;
    padding: 6px;
    background: #fff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .06);
    border-radius: 4px;
    box-sizing: border-box;
    transition: .5s;
    margin-top: 28px
}




.act_case .ac-con .ac-item:hover {
    transform: translateY(-10px);
}

.act_case .ac-con .img-box {
    position: relative;
    height: 153px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background-color: #ededed;
}

.act_case .ac-con .img-box:hover .shade {
    opacity: 1
}

.act_case .ac-con .ac-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.act_case .ac-con .ac-title {
    margin: 12px 0 22px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.act_case .ac-con .ac-title:hover {
    color: #00a2ff
}

.act_case .ac-con .ac-num {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    font-size: 14px;
    color: #999
}

.act_case .ac-con .ac-num img {
    max-width: 18px;
    max-height: 15px;
    margin-right: 5px
}

.act_case .ac-con .ac-num-item {
    display: flex;
    align-items: center
}

.act_case .ac-con .shade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    opacity: 0
}

.act_case .ac-con .shade .qr-code {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 106px;
    height: 100px;
    transform: translate(-53px, -58px);
    background-color: #fff;
    border-radius: 6px;
    text-align: center;
    padding: 10px 0
}

.act_case .ac-con .shade .qr-code img {
    width: 80px;
    height: 80px
}

.act_case .ac-con .shade .qr-code p {
    font-size: 12px;
    color: #999
}


@media (min-width: 1200px) {
    .act_case .ac-con {
        justify-content: flex-start;
    }

    .act_case .ac-con .ac-item:nth-child(4n+1) {
        margin-left: 0;
    }
}

@media (max-width: 1200px) and (min-width: 920px) {
    .act_case .ac-con .ac-item:nth-child(3n+1) {
        margin-left: 0;
    }
}

@media (max-width: 920px) and (min-width: 625px) {
    .act_case .ac-con .ac-item:nth-child(2n+1) {
        margin-left: 0;
    }
}

@media (max-width: 625px) {
    .act_case .ac-con {
        justify-content: center;
    }

    .act_case .ac-con .ac-item {
        margin-left: 0;
        width: 90%;
    }

}

/*case_details*/
.case_details {
    padding: 60px 0;
}

.case_details .cont {
    display: flex;
    height: auto;
    margin: auto;
    max-width: 1000px
}

.case_details .cont .iframe-box {
    border-radius: 10px;
    box-shadow: 0 0 5px #3333;
    overflow: hidden;
    width: 385px
}

.case_details .cont .iframe-box iframe {
    display: block;
    height: 100%;
    width: 100%;
    border: none;
}

.case_details .cont .msg-box {
    align-self: flex-start;
    background: #fff;
    flex: 1;
    margin-left: 60px;
    padding-top: 30px;
    border-radius: 10px;
    /* box-shadow: 0 0 5px #3333; */
}

.case_details .cont .msg-box .title-box {
    border-bottom: 1px solid #f2f2f2
}

.case_details .cont .msg-box .title-box .title {
    color: #3b426b;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 25px;
    overflow: hidden;
    padding: 0 20px;
    text-align: center;

}

.case_details .cont .msg-box .title-box .time {
    color: #c3c5d5;
    font-size: 14px;
    line-height: 20px;
    margin: 10px 0 24px;
    text-align: center
}

.case_details .cont .msg-box .msg-three-box {
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    padding: 30px 0
}

.case_details .cont .msg-box .msg-three-box .msg-item {
    color: #666;
    flex: 1;
    text-align: center
}

.case_details .cont .msg-box .msg-three-box .msg-item .num {
    color: #34323e;
    font-size: 24px;
    line-height: 33px
}

.case_details .cont .msg-box .msg-rule {
    padding: 40px 30px
}

.case_details .cont .msg-box .msg-rule p {
    color: #34323e;
    font-size: 18px;
    margin-bottom: 8px;
    text-indent: -5em;
    padding-left: 5em;
    word-wrap: break-word;
}

.case_details .cont .msg-box .QR-code {
    padding: 50px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
}

.case_details .cont .msg-box .QR-code .qr-img-box {
    text-align: center
}

.case_details .cont .msg-box .QR-code .qr-img-box img {
    height: 200px;
    width: 200px
}

.case_details .cont .msg-box .QR-code .img-describe {
    color: #626897;
    font-size: 14px;
    line-height: 20px;
    margin-top: 14px;
    text-align: center
}

.case_details .cont .msg-box .QR-code .btn-use {

    margin-top: 25px;
    width: 210px
}

.case_details .cont .msg-box .b-title {
    border-left: 3px solid;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    padding-left: 10px
}

.case_details .cont .msg-box .line {
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 15px
}

@media (max-width: 768px) {
    .case_details .cont {
        flex-direction: column;
        align-items: center;
    }

    .case_details .cont .iframe-box {
        height: 752px;
    }

    .case_details .cont .msg-box {

        margin: 0px 10px;
    }
}

/* partners_box-intro */

.partners_box-intro {
    padding: 60px 0;
}

.partners_box-intro .partners-lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 50px;

}

.partners_box-intro .partners-lists li {
    width: 19%;
    text-align: center;
    margin-bottom: 10px;
    border-radius: 10px;
    border: 1px solid #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;

}

.partners_box-intro .partners-lists li img {
    width: 100%;
}

@media (max-width: 768px) {
    .partners_box-intro .partners-lists {
        padding: 10px;
    }

    .partners_box-intro .partners-lists li {
        width: 30%;
        text-align: center;
        margin-bottom: 10px;

    }
}

/* questions_answers */

.questions_answers-intro {
    padding: 60px 40px;
}

.questions_answers-intro .problems {
    margin-top: 60px;
}

.questions_answers-intro .problem-item {
    /*border-top: 1px solid #EBECF0;*/
    padding: 0 20px;
    /*height: 100px;*/
    overflow: hidden;
}

.questions_answers-intro .problem-item .space {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.questions_answers-intro .problem-item img {
    width: 22px;
    height: 22px;
    margin-right: 14px;
}

.questions_answers-intro .problem-item .problem-title {
    /*line-height: 100px;*/
    color: #000;
    font-size: 20px;
    font-weight: 600;
    cursor: default;
}

.questions_answers-intro .problem-item .problem-triangle {
    width: 0;
    height: 0;
    margin-top: 5px;
    transition: all 0.3s ease;
    border: 8px solid transparent;
    border-top-color: #293340;
}

.questions_answers-intro .problem-answer {
    font-size: 16px;
    color: #7e8491;
    line-height: 22px;
    cursor: default;
    padding-bottom: 40px;
}

.questions_answers-intro .problem-item .problem-triangle.up {
    transform: rotate(-180deg);
}

/* four_clover-intro */
.four_clover-intro {
    padding: 60px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.four_clover-intro .cont-box {
    margin-top: 60px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    box-sizing: border-box;
    position: relative;
    width: 1000px;
    transition: all .5s;
}

.four_clover-intro .cont-box .is-item {
    box-shadow: 2px 2px 20px 6px rgba(204, 226, 222, 0.2);
    width: 432px;
    height: 161px;
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    /* 手型 */
    cursor: pointer;

}

.four_clover-intro .cont-box .is-item:hover {

    transform: translateY(-10px);
    box-shadow: 0 10px 20px #0000001a;
}

.four_clover-intro .cont-box .is-item:nth-child(1),
.four_clover-intro .cont-box .is-item:nth-child(2) {
    margin-bottom: 50px;
}

.four_clover-intro .cont-box .is-item:nth-child(2n) {
    margin-left: 136px;
}

.four_clover-intro .cont-box .is-item .is-icon {
    margin-right: 25px;
}

.four_clover-intro .cont-box .is-item .is-title {
    color: #333;
    font-size: 22px;
    font-weight: 700;
}

.four_clover-intro .cont-box .is-item .is-desc {
    color: #777;
    font-size: 16px;
    line-height: 28px;
    margin-top: 14px;

}

.four_clover-intro .cont-box .con-bg {
    position: absolute;
    top: 24%;
    left: 50%;
    width: 196px;
    height: 196px;
    transform: translateY(-50%);
    transform: translateX(-50%);
}

.four_clover-intro .cont-box .con-bg img {
    width: 100%;
}



@media (max-width: 768px) {
    .four_clover-intro .cont-box {
        width: auto;
        padding: 0 20px;
    }

    .four_clover-intro .cont-box .is-item {
        width: 100%;
    }

    .four_clover-intro .cont-box .is-item:nth-child(1n),
    .four_clover-intro .cont-box .is-item:nth-child(2n),
    .four_clover-intro .cont-box .is-item:nth-child(3n),
    .four_clover-intro .cont-box .is-item:nth-child(4n) {
        margin-bottom: 20px;
        margin-left: 0;
    }

    .four_clover-intro .cont-box .con-bg {
        display: none;
    }
}

/* footer */

.footer {
    width: 100%;
    background-color: #0b1731;
    height: auto;
    box-sizing: border-box;
}

.footer .main {

    margin: 0 auto;
    display: flex
}

.footer .main .left {
    flex: 1;
}

.footer .main .left .top {
    margin-top: 49px;
    padding-bottom: 34px;
    display: flex;
    border-bottom: 1px solid rgba(4, 4, 4, 0.11);
    flex-wrap: wrap;
}

.footer .main .left .top .item:not(:first-child) {
    margin-left: 100px
}

.footer .main .left .top .item .title {
    color: #fff;
    font-size: 16px;
    white-space: nowrap
}

.footer .main .left .top .item .item-box {
    padding-top: 35px;
    display: flex
}

.footer .main .left .top .item .item-box .type-box:not(:first-child) {
    margin-left: 40px
}

.footer .main .left .top .item .item-box .type-box .type {
    display: block;
    white-space: nowrap;
    font-size: 14px;
    color: #7a8399
}

.footer .main .left .top .item .item-box .type-box .type:hover {
    cursor: pointer;
    color: #0078ff
}

.footer .main .left .top .item .item-box .type-box .type:not(:first-child) {
    margin-top: 15px
}

.footer .main .left .copyright {
    margin-top: 29px;
    margin-bottom: 52px;
    font-size: 15px;
    color: #7a8399;
    opacity: 1
}

.footer .main .left .copyright a {
    color: #7a8399;
}

.footer .main .left .copyright:hover {
    cursor: pointer
}

.footer .main .right {
    width: 160px;
    margin-top: 42px;
    overflow: hidden;
}

.footer .main .right .header {
    display: flex
}

.footer .main .right .header .logo {
    height: 42px
}

.footer .main .right .contact {
    margin-top: 35px;
    font-size: 14px;
    color: #7a8399;
    display: flex
}

.footer .main .right .qrcode {
    margin-top: 35px;

}

.footer .main .right .qrcode img {
    width: 95px;
}

.footer .main .right .contact .call {
    white-space: nowrap
}

.footer .main .right .contact .number:not(:first-child) {
    margin-top: 11px
}

.footer .main .right .qr {
    font-size: 14px;
    color: #7a8399;
    display: flex;
    margin-top: 21px
}

.footer .main .right .qr .qr-box {
    margin-left: 14px
}

.footer .main .right .qr .qr-box img {
    width: 89px;
    height: 91px;
    border-radius: 4px
}

.footer .main .right .qr .qr-box p {
    text-align: center;
    font-size: 14px;
    color: #fff
}

@media (max-width: 768px) {
    .footer .main {
        flex-direction: column;
        align-items: center;
        transition: all .5s;
    }

    .footer .main .left .top .item {
        width: 100%;
        transition: all .5s;
    }

    .footer .main .left .top .item .item-box {
        padding-top: 10px;
    }

    .footer .main .left .top .item:not(:first-child) {
        margin-left: 0;
        margin-top: 20px;
    }

    .footer .main .left {
        padding: 10px;

    }

    .footer .main .right {
        display: none;
    }
}