main div,
main h1,
main h2,
main h3,
main li,
main ol,
main p,
main section,
main ul {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}
.home-banner {
    background: url(/uploads/pages/support/home-banner.png) center no-repeat;
    background-size: cover;
    padding: 100px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 50px
}

.home-banner_title {
    font-size: 52px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 25px
}

.home-banner_desc {
    font-size: 36px;
    font-weight: 400;
    color: #fff;
    line-height: 1.2
}

.home-banner_desc.active {
    display: none
}

@media (max-width:768px) {
    .container {
        padding: 0 15px;
    }
    .home-banner {
        height: 338rem;
        background: url(/uploads/pages/support/home-banner.png) -780rem 0 no-repeat;
        background-size: 1920rem 338rem;
        padding: 0;
        margin-bottom: 50rem
    }

    .home-banner_title {
        font-size: 48rem;
        margin-bottom: 25rem;
        text-align: center
    }

    .home-banner_desc {
        font-weight: 700;
        font-size: 24rem;
        text-align: center;
        padding: 0 40rem
    }
}
.wrapper-1 {
    margin-top: 130px
}

.wrapper_title {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    position: relative;
    font-size: 48px;
    font-weight: 700;
    color: #000
}

.title-1::before,
.title-3::before {
    position: absolute;
    background-image: url(/uploads/pages/support/sprite.png);
    background-repeat: no-repeat;
    background-size: auto;
    left: -84px;
    top: 0;
    content: ''
}

.title-1::before {
    width: 58px;
    height: 54px;
    background-position: -1417px -146px
}

.title-3::before {
    width: 53px;
    height: 51px;
    background-position: -1539px -147px
}

.wrapper_desc {
    text-align: center;
    max-width: 559px;
    margin: 29px auto 76px;
    line-height: 1.5;
    font-size: 16px;
    font-weight: 400;
    color: #333
}

.tab-item_icon {
    position: relative;
    background: url(/uploads/pages/support/sprite.png) no-repeat;
    width: 88px;
    height: 88px;
    margin-bottom: 26px
}

.wrapper_tab {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.wrapper_tab .icon-1 {
    background-position: -1643px -127px
}

.wrapper_tab .icon-2 {
    background-position: -1773px -127px
}

.wrapper_tab .icon-3 {
    background-position: -1903px -127px
}

.tab_item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 31%;
    flex: 0 0 31%;
    background: #fff;
    border-radius: 8px;
    border: 1px solid rgba(150, 169, 239, .5);
    padding: 36px 24px 43px;
    -webkit-transition: .5s all;
    transition: .5s all
}

.tab_item .tab-item_title {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    text-align: left;
    margin-bottom: 30px;
}

.tab_item:hover {
    background: #eff8ff;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    border: 1px solid #377bff
}

.tab-item_swiper {
    height: 60px;
    overflow: hidden;
    margin: 16px 0 33px;
    text-align: left
}

.tab-item_swiper .slide_txt {
    font-size: 16px;
    font-weight: 400;
    color: #999;
    margin-top: 6px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    word-break: break-all
}

.tab-item_jump {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    position: relative;
    font-size: 24px;
    font-weight: 600;
    color: #377bff
}

.tab-item_jump::before {
    content: '';
    position: absolute;
    width: 11px;
    height: 19px;
    background-image: url(/uploads/pages/support/sprite.png);
    background-repeat: no-repeat;
    background-position: -2241px -167px;
    background-size: auto;
    right: -16px;
    top: 7px;
    -webkit-transition: .5s all;
    transition: .5s all
}

.tab-item_jump:hover::before {
    right: -22px
}
.wrapper-3 {
    margin: 130px 0
}

.wrapper-3 .wrapper_desc {
    margin: 29px auto 0
}
.wrapper_pro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    text-align: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 0 20px
}

.wrapper_pro .pro_item {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 250px;
    flex: 0 0 250px;
    border-radius: 17px;
    padding: 48px 30px 32px;
    margin-top: 79px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    color: #000;
    -webkit-transition: .5s all;
    transition: .5s all
}

.wrapper_pro .pro_item:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.wrapper_pro .pro-item_icon {
    background: url(/uploads/pages/support/sprite.png) no-repeat;
    width: 84px;
    height: 84px;
    display: inline-block;
    margin-bottom: 38px
}

.item-1 {
    background: rgba(144, 225, 139, .05);
    border: 1px solid rgba(144, 225, 139, .6)
}

.item-1 .pro-item_icon {
    background-position: -325px -118px
}

.item-2 {
    background: rgba(203, 145, 249, .05);
    border: 1px solid rgba(203, 145, 249, .5)
}

.item-2 .pro-item_icon {
    background-position: -42px -119px
}

.item-3 {
    background: rgba(117, 91, 248, .05);
    border: 1px solid rgba(117, 91, 248, .5)
}

.item-3 .pro-item_icon {
    background-position: -183px -118px
}

.item-4 {
    background: rgba(216, 49, 49, .05);
    border: 1px solid rgba(216, 49, 49, .5)
}

.item-4 .pro-item_icon {
    background-position: -467px -118px
}

.item-5 {
    background: rgba(239, 29, 34, .03);
    border: 1px solid rgba(239, 29, 34, .35)
}

.item-5 .pro-item_icon {
    background-position: -609px -118px
}

.item-6 {
    background: #fff9f3;
    border: 1px solid rgba(255, 205, 29, .45)
}

.item-6 .pro-item_icon {
    background-position: -751px -118px
}

.item-7 {
    background: #e7fcff;
    border: 1px solid rgba(33, 169, 191, .45)
}

.item-7 .pro-item_icon {
    background-position: -893px -118px
}

.item-8 {
    background: #f1f4ff;
    border: 1px solid rgba(55, 92, 137, .45)
}

.item-8 .pro-item_icon {
    background-position: -1035px -118px
}

@media (max-width:770px) {

    .wrapper-1 {
        margin-top: 36rem
    }

    .slide_item,
    .wrapper_tab {
        -webkit-box-direction: normal;
        -ms-flex-direction: column
    }

    .tab-item_jump::before,
    .title-1::before,
    .title-3::before {
        position: absolute;
        background-repeat: no-repeat;
        background-size: 2526rem 4017rem
    }

    .wrapper-1 .wrapper_desc {
        margin: 30rem auto 11rem
    }

    .wrapper_title {
        font-size: 24rem
    }

    .title-1::before {
        content: '';
        width: 26rem;
        height: 24rem;
        background-image: url(/uploads/pages/support/sprite.png);
        background-position: -1438rem -312rem;
        left: -31rem
    }

    .title-3::before {
        content: '';
        width: 23rem;
        height: 21rem;
        background-image: url(/uploads/pages/support/sprite.png);
        background-position: -1528rem -314rem;
        left: -25rem
    }

    .wrapper_desc {
        font-size: 14rem;
        margin: 30rem auto 35rem;
        max-width: 95%
    }

    .tab-item_icon {
        background-size: 2526rem 4017rem;
        width: 78rem;
        height: 78rem;
        margin: 0 auto 36rem
    }

    .wrapper_tab {
        -webkit-box-orient: vertical;
        flex-direction: column;
        text-align: center
    }

    .wrapper_tab .icon-1 {
        background-position: -1415rem -392rem
    }

    .wrapper_tab .icon-2 {
        background-position: -1517rem -392rem
    }

    .wrapper_tab .icon-3 {
        background-position: -1619rem -392rem
    }

    .tab_item {
        -webkit-box-flex: 1;
        -ms-flex: auto;
        flex: auto;
        width: 100%;
        padding: 36rem 25rem 38rem;
        border-radius: 8rem;
        margin-top: 24rem
    }

    .tab_item .tab-item_title {
        font-size: 20rem;
        text-align: center;
        margin-bottom: 30rem;
    }

    .tab-item_swiper {
        height: 60rem;
        margin: 18rem 0 62rem;
        text-align: center
    }

    .tab-item_swiper .slide_txt {
        font-size: 16rem;
        margin-top: 10rem
    }

    .tab-item_jump {
        font-size: 26rem;
        margin: 0 auto
    }

    .tab-item_jump::before {
        content: '';
        width: 11rem;
        height: 19rem;
        background-image: url(/uploads/pages/support/sprite.png);
        background-position: -2241rem -167rem;
        right: -16rem;
        top: 7rem
    }

    .tab-item_jump:hover::before {
        right: -22rem
    }

    .wrapper-3 {
        margin: 36rem 0
    }

    .wrapper-3 .wrapper_desc {
        margin: 19rem auto 40rem
    }

    .wrapper-3 .swiper-horizontal>.swiper-pagination-bullets,
    .wrapper-3 .swiper-pagination-bullets.swiper-pagination-horizontal {
        bottom: 0
    }

    .wrapper_pro {
        display: none
    }
    .swiper-slide {
        height: 0
    }

    .swiper-slide-active {
        height: auto
    }

    .slide_item {
        border-radius: 17rem;
        padding: 41rem 27rem 27rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: center;
        font-size: 20rem;
        font-weight: 700;
        color: #000
    }

    .slide-item_icon {
        background: url(/uploads/pages/support/sprite.png) no-repeat;
        width: 84rem;
        height: 84rem;
        display: inline-block;
        background-size: 2526rem 4017rem;
        margin-bottom: 40rem
    }

    .item-1 .slide-item_icon {
        background-position: -325rem -118rem
    }

    .item-2 .slide-item_icon {
        background-position: -42rem -119rem
    }

    .item-3 .slide-item_icon {
        background-position: -183rem -118rem
    }

    .item-4 .slide-item_icon {
        background-position: -467rem -118rem
    }

    .item-5 .slide-item_icon {
        background-position: -609rem -118rem
    }

    .item-6 .slide-item_icon {
        background-position: -751rem -118rem
    }

    .item-7 .slide-item_icon {
        background-position: -893rem -118rem
    }

    .item-8 .slide-item_icon {
        background-position: -1035rem -118rem
    }
}

.home-contact {
    height: 400px;
    background: rgba(243, 250, 255, .56);
    padding: 60px 0;
    margin-top: 150px;
}

.home-contact .container {
    height: 100%;
    width: 1080px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}
.home-contact_info {
    width: 510px;
    height: 150px;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.home-contact_info .home-contact_title {
    font-size: 40px;
    font-weight: 700;
    color: #000;
    line-height: 1.2;
    margin-bottom: 16px
}

.home-contact_info .home-contact_desc {
    font-size: 28px;
    font-weight: lighter;
    color: #787878;
    line-height: 1.5
}

.home-contact .common-contact_btn {
    width: 240px;
    height: 70px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    border-radius: 35px;
    background: #377bff;
    -webkit-box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, .25) inset;
    box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, .25) inset;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border: none;
    outline: 0
}

.home-contact .common-contact_btn:active {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, .25) inset;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, .25) inset
}

.home-contact_img {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    background: url(/uploads/pages/support/sprite.png) -1422px -1645px no-repeat;
    width: 441px;
    height: 257px;
    margin-left: 120px
}

@media (max-width:768px) {
    .home-contact {
        height: auto;
        padding: 60rem 0;
        margin-top: 150rem;
    }
    .home-contact .container {
        width: 100%;
        height: 100%;
        padding: 0 15px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column wrap;
        flex-flow: column wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .home-contact_info {
        width: 100%;
        height: auto
    }

    .home-contact_info .home-contact_title {
        font-size: 24rem;
        margin-bottom: 16rem;
        text-align: center
    }

    .home-contact_info .home-contact_desc {
        font-size: 20rem;
        text-align: center
    }

    .home-contact .common-contact_btn {
        width: 240rem;
        height: 70rem;
        font-size: 24rem;
        border-radius: 35rem;
        -webkit-box-shadow: 0 -4rem 4rem 0 rgba(0, 0, 0, .25) inset;
        box-shadow: 0 -4rem 4rem 0 rgba(0, 0, 0, .25) inset;
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3
    }

    .home-contact_img {
        background: url(/uploads/pages/support/sprite.png) -1466rem -3293rem no-repeat;
        background-size: 2526rem 4017rem;
        width: 335rem;
        height: 196rem;
        margin: 35rem 0 70rem;
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2
    }
}


.contact-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: rgba(0, 0, 0, .4);
    cursor: pointer;
    display: none
}

.contact-box .contact-content {
    width: 782px;
    height: 578px;
    border-radius: 10px;
    border: 1px solid #78c3ff;
    background: #fff;
    -webkit-box-shadow: 0 7px 11px 0 rgba(169, 202, 226, .25);
    box-shadow: 0 7px 11px 0 rgba(169, 202, 226, .25);
    overflow: hidden;
    cursor: auto
}

.contact-box .contact-content_header {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #d7ecfd;
    padding: 22px 20px
}

.contact-box .contact-content_title {
    font-size: 20px;
    font-weight: 700;
    color: #000
}

.contact-box .contact-content_close {
    background: url(/uploads/pages/support/sprite.png) -2140px -243px no-repeat;
    width: 22px;
    height: 22px;
    cursor: pointer;
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s
}

.contact-box .contact-content_close:hover {
    -webkit-transform: scale(1.1) rotate(90deg);
    transform: scale(1.1) rotate(90deg)
}

.contact-box .contact-content_desc {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #000;
    padding: 20px 20px 12px
}

.contact-box .contact-content_list {
    width: 745px;
    height: 311px;
    margin: 0 auto;
    border: 1px solid #d6d6d6;
    overflow-y: auto;
    padding: 14px 40px 14px 36px
}

.contact-box .contact-content_list .contact-list_item {
    list-style: decimal;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    line-height: 1.5;
    word-wrap: break-word;
    margin-bottom: 8px
}

.contact-box .contact-content_list .list-item_a {
    color: #0500ff;
    text-decoration: underline
}

.contact-box .contact-content_btn {
    width: 190px;
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    border-radius: 45px;
    background: #c5c5c5;
    margin: 55px auto 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: not-allowed
}

.contact-box .contact-content_btn.enable {
    background: #377bff;
    cursor: pointer
}

.contact-box .contact-content_btn.enable:hover {
    background: #1b68fd
}

.contact-box.active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

@media (max-width:768px) {
    .contact-box .contact-content {
        width: 334rem;
        height: 578rem;
        border-radius: 10rem;
        border: 1rem solid #78c3ff;
        -webkit-box-shadow: 0 7rem 11rem 0 rgba(169, 202, 226, .25);
        box-shadow: 0 7rem 11rem 0 rgba(169, 202, 226, .25)
    }

    .contact-box .contact-content_header {
        background: #d7ecfd;
        padding: 12rem 16rem 12rem 12rem
    }

    .contact-box .contact-content_title {
        font-size: 20rem
    }

    .contact-box .contact-content_close {
        -ms-flex-negative: 0;
        flex-shrink: 0;
        background: url(/uploads/pages/support/sprite.png) -2140rem -243rem no-repeat;
        background-size: 2526rem 4017rem;
        width: 22rem;
        height: 22rem
    }

    .contact-box .contact-content_desc {
        font-size: 14rem;
        padding: 20rem 12rem 16rem
    }

    .contact-box .contact-content_list {
        width: 315rem;
        height: 311rem;
        border: 1rem solid #d6d6d6;
        padding: 14rem 26px
    }

    .contact-box .contact-content_list .contact-list_item {
        font-size: 16rem;
        margin-bottom: 8rem
    }

    .contact-box .contact-content_btn {
        width: 190rem;
        height: 40rem;
        font-size: 16rem;
        border-radius: 45rem;
        margin: 55rem auto 0
    }
}