html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

ul {
    list-style: none
}

a {
    text-decoration: none;
    color: inherit
}

.nodata {
    text-align: center;
    color: #999
}

.clearBox::after {
    content: "";
    display: block;
    clear: both
}

.leftBox {
    float: left
}

.rightBox {
    float: right
}

.container {
    margin: 0 auto;
    max-width: 100rem
}

body {
    padding-top: 5.8333rem
}

.menu {
    display: none;
    margin-left: auto
}

    .menu img {
        width: 4.1667rem;
        height: 4.1667rem;
        display: block
    }

.topNav {
    background: #fff;
    position: fixed;
    top: 0;
    z-index: 9;
    left: 0;
    width: 100vw
}

    .topNav .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 5.8333rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .topNav .logo img {
        width: 15.6667rem;
        display: block
    }

    .topNav .navList {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 100%;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #333;
        margin-left: 1.6667rem
    }

        .topNav .navList .navItem {
            height: 100%;
            width: 9rem;
            line-height: 5.8333rem;
            position: relative;
            cursor: pointer;
            text-align: center;
            font-size: 1.3333rem
        }

            .topNav .navList .navItem a {
                text-decoration: none;
                color: #333;
                width: 100%;
                height: 100%;
                display: block
            }


            .topNav .navList .navItem.active::before {
                content: "";
                display: block;
                position: absolute;
                width: 100%;
                height: 100%;
                width: 2.3333rem;
                height: .3333rem;
                background: #28bca0;
                border-radius: 1.0833rem;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }

            .topNav .navList .navItem::before {
                content: "";
                display: block;
                position: absolute;
                width: 100%;
                height: 100%;
                width: 0;
                height: .3333rem;
                background: #28bca0;
                border-radius: 1.0833rem;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                transition: width .3s;
            }

            .topNav .navList .navItem:hover::before {
                width: 2.3333rem;
            }



    .topNav .concat {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #333;
        font-size: 1.1667rem;
        position: relative;
        cursor: pointer;
        margin-left: auto
    }

    .topNav .concat {
        margin-left: auto;
    }

        .topNav .concat:hover .phone, .topNav .concat:active .phone {
            display: block
        }

        .topNav .concat .phone img {
            width: 9.75rem;
        }

        .topNav .concat .phone {
            position: absolute;
            bottom: -6.3rem;
            display: none;
            left: -6.04165rem;
            background: url(../img/kuang_icon.png) no-repeat;
            background-size: cover;
            width: 14.0833rem;
            height: 5.9167rem;
            color: #28bca0;
            font-size: 1.5rem;
            padding-top: 2.4rem;
            text-align: center
        }

        .topNav .concat .imgBox {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            width: 2rem;
            height: 2rem
        }

            .topNav .concat .imgBox img {
                width: 2rem;
                height: 2rem
            }

    .topNav .topBtn {
        width: 7.6667rem;
        height: 3.3333rem;
        text-align: center;
        background: #fff;
        border-radius: .5rem;
        color: #28bca0;
        border: 1px solid #28bca0;
        line-height: 3.3333rem;
        margin-left: auto;
        cursor: pointer;
        font-size: 1.1667rem;
    }

        .topNav .topBtn:hover {
            background: #28bca0;
            color: #fff;
        }

.footer {
    padding-top: 4.1667rem;
    padding-bottom: 3.0833rem;
    background-color: #333
}

    .footer ul {
        margin-bottom: 2.8333rem
    }

        .footer ul li {
            float: left;
            margin-right: 7.0833rem
        }

            .footer ul li a {
                text-decoration: none;
                color: #fff;
                font-size: 1.1667rem
            }

    .footer .leftBox {
        color: #808082;
        font-size: 1rem
    }

        .footer .leftBox p {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            margin-bottom: .5rem
        }

        .footer .leftBox img {
            width: 1.3333rem;
            height: 1.3333rem
        }

        .footer .leftBox span {
            margin-right: 1.6667rem;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center
        }

    .footer .rightBox p {
        font-size: 1.1667rem;
        color: #fff;
        margin-bottom: 1.3333rem
    }

    .footer .rightBox span {
        display: block;
        font-size: 1rem;
        color: #808082;
        margin-bottom: 1rem
    }

    .footer .rightBox img {
        width: 11.25rem;
        height: 11.25rem
    }

    .footer .qrcode {
        text-align: center;
        margin-right: 7.333rem
    }

        .footer .qrcode p {
            margin-bottom: 0;
            margin-top: 1rem
        }

.fixedBottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 9;
    display: none;
    height: 4rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 1.25rem;
    color: #28bca0;
    -webkit-box-shadow: 0 -1px 5px 0 rgba(0,0,0,.3);
    box-shadow: 0 -1px 5px 0 rgba(0,0,0,.3)
}

    .fixedBottom > div {
        width: 50%;
        text-align: center;
        color: #333;
        height: 100%;
        line-height: 4rem
    }

        .fixedBottom > div:last-child {
            background-color: #28bca0;
            color: #fff
        }

.fixedRight {
    position: fixed;
    z-index: 3;
    right: 0;
    top: calc(50% - 8.8333rem)
}

    .fixedRight ul li {
        cursor: pointer;
        background: #28bca0;
        border-radius: .5rem 0 0 .5rem;
        margin-bottom: .1667rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        font-size: 1rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 5.8333rem;
        height: 5.8333rem;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        color: #fff
    }

        .fixedRight ul li img {
            width: 2.3333rem;
            height: 2.3333rem;
            margin-bottom: .3333rem
        }

    .fixedRight ul .phone {
        position: relative
    }

        .fixedRight ul .phone:hover .phoneBox {
            display: block
        }

        .fixedRight ul .phone .phoneBox img {
            width: 9.75rem;
            height: auto;
            margin-bottom: 0;
        }

        .fixedRight ul .phone .phoneBox {
            position: absolute;
            left: -16.25rem;
            top: calc(50% - 2.6rem);
            width: 16.25rem;
            height: 4.5rem;
            background: url(../img/fixedRight_phone.png) no-repeat center center;
            background-size: cover;
            font-size: 1.5rem;
            color: #28bca0;
            display: none;
            line-height: 4.5rem;
            padding-left: 2.5rem
        }

    .fixedRight ul .qrcode {
        position: relative
    }

        .fixedRight ul .qrcode:hover .qrcodeBox {
            display: block
        }

        .fixedRight ul .qrcode .qrcodeBox {
            position: absolute;
            left: -11.4167rem;
            top: -6.6667rem;
            display: none;
            width: 11.4167rem;
            height: 11.9167rem;
            background: url(../img/fixedRight_qrcode.png) no-repeat;
            background-size: cover;
            color: #28bca0
        }

            .fixedRight ul .qrcode .qrcodeBox img {
                width: 8rem;
                height: 8rem;
                margin-bottom: 0
            }

            .fixedRight ul .qrcode .qrcodeBox .imgBox {
                width: 9.3333rem;
                padding-top: 1rem;
                margin-left: .83333rem;
                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
            }

.mackBox {
    background-color: rgba(0,0,0,.5);
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
    display: none
}

    .mackBox form {
        width: 38.6667rem;
        height: 37.8333rem;
        background: linear-gradient(179.46deg, #CFFFF6 -1.37%, #FFFFFF 26.6%);
        border-radius: .8333rem;
        position: fixed;
        top: calc(50% - 18.9167rem);
        left: calc(50% - 19.3333rem);
        padding-top: 3.3333rem
    }

        .mackBox form .close {
            position: absolute;
            width: 2rem;
            height: 2rem;
            right: .8333rem;
            top: .8333rem
        }

            .mackBox form .close img {
                cursor: pointer;
                width: 100%;
                height: 100%;
                display: block
            }

        .mackBox form h3 {
            text-align: center;
            font-size: 1.6667rem;
            color: #333;
            margin-bottom: .6667rem
        }

        .mackBox form p {
            font-size: 1.1667rem;
            color: #333;
            text-align: center;
            margin-bottom: .8333rem
        }

        .mackBox form .item {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            border-bottom: 1px solid #eee;
            margin: 0 4.1667rem;
            padding: 1.2rem 0
        }

            .mackBox form .item .label {
                width: 2rem;
                height: 2rem;
                margin-right: .6667rem
            }

                .mackBox form .item .label img {
                    width: 100%;
                    height: 100%;
                    display: block
                }

            .mackBox form .item input {
                -webkit-box-flex: 1;
                -ms-flex: 1;
                flex: 1;
                font-size: 1.1667rem;
                outline: none;
                border: none;
                height: 2.5rem;
                background-color: rgba(0,0,0,0)
            }

            .mackBox form .item .getcode {
                width: 7rem;
                height: 2.5rem;
                text-align: center;
                color: #fff;
                font-size: 1.1667rem;
                line-height: 2.5rem;
                background: #28bca0;
                border-radius: .3333rem;
                cursor: pointer
            }

        .mackBox form button {
            display: block;
            width: 30.5833rem;
            margin: 2.6667rem auto 0;
            height: 3.5833rem;
            background: #28bca0;
            border-radius: .25rem;
            text-align: center;
            color: #fff;
            cursor: pointer;
            font-size: 1.1667rem;
            line-height: 3.5833rem;
            padding: 0;
            outline: none;
            border: none
        }

@media(max-width: 1440px) {
    .fixedRight ul li {
        width: 6.8333rem;
        height: 6.8333rem
    }

    .footer ul li {
        margin-right: 5rem
    }

    .mackBox form {
        width: 42.6667rem;
        height: 39.8333rem
    }

        .mackBox form .item .getcode {
            width: 8rem
        }
}

@media(max-width: 1660px) {


    .footer .qrcode {
        margin-right: 1.4rem;
    }
}

@media(max-width: 1440px) {
    .container {
        max-width: 110rem
    }
}

@media(max-width: 1024px)and (min-width: 851px) {
    .footer .leftBox {
        float: none;
        text-align: center;
        margin-bottom: 2rem
    }

        .footer .leftBox ul {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center
        }

        .footer .leftBox p {
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center
        }

    .footer .rightBox {
        float: none;
        margin: 0 auto;
        text-align: center
    }

    .fixedRight ul li {
        width: 8.8333rem;
        height: 8.8333rem
    }

    .fixedRight ul .qrcode .qrcodeBox .imgBox {
        width: 13.333rem;
        padding-top: 4rem;
        margin-left: 1.83333rem
    }

    .fixedRight ul .qrcode .qrcodeBox img {
        width: 9rem;
        height: 9rem
    }

    .topNav .concat .phone {
        height: 6.9rem;
        bottom: -7.3rem;
        display: none;
        left: -6.8rem;
        width: 16.0833rem
    }

    .topNav .topBtn {
        width: 9.6rem
    }

    .fixedRight ul .phone .phoneBox {
        width: 17.25rem;
        height: 5.5rem;
        left: -17.25rem;
        line-height: 5.5rem
    }

    .fixedRight ul .qrcode .qrcodeBox {
        left: -18.4167rem;
        top: -12.6667rem;
        width: 18.4167rem;
        height: 18.9167rem
    }

    .mackBox form {
        width: 54.6667rem;
        height: 46.8333rem
    }

        .mackBox form .item .label {
            width: 4rem;
            height: 4rem
        }

        .mackBox form .item input {
            height: 4rem
        }

        .mackBox form button {
            height: 4.5rem
        }

        .mackBox form .item .getcode {
            width: 12rem;
            height: 3.5rem;
            line-height: 3.5rem
        }

        .mackBox form h3 {
            font-size: 2.3rem
        }
}

@media(max-width:1440px) {
    .topNav .concat .imgBox img {
        width: 3rem;
        height: 3rem;
    }
}

@media(max-width: 850px) {
    body {
        padding-top: 3.8333rem
    }

    .footer {
        padding-bottom: 5rem
    }

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

    .menu {
        display: block
    }

    .rightBox {
        float: none
    }

    .leftBox {
        float: none
    }

    .topNav {
        z-index: 9
    }

        .topNav .container {
            padding-top: 0 !important
        }

    .mack {
        width: 100vw;
        height: calc(100vh - 3.8333rem);
        position: fixed;
        top: 3.8333rem;
        display: none;
        left: 0;
        background-color: rgba(0,0,0,.3)
    }

    .mackBox form {
        width: 90%;
        height: 39rem;
        left: 5%;
        top: calc(50% - 19.5rem)
    }

        .mackBox form .item {
            margin: 0 1rem
        }

        .mackBox form p {
            margin: 0 1.5rem
        }

        .mackBox form button {
            width: 80%;
            margin-bottom: 2.5rem
        }

    .topNav .navList {
        position: fixed;
        right: -13rem;
        display: block;
        top: 3.8333rem;
        height: 100vh;
        margin-left: 0;
        background-color: #fff;
        z-index: 99;
        -webkit-transition: .5s;
        transition: .5s
    }

        .topNav .navList .navItem {
            height: 4rem;
            text-align: center;
            margin-right: 0;
            width: 13rem;
            line-height: 4rem;
            background-color: #fff
        }

            .topNav .navList .navItem a {
                font-size: 1.3333rem
            }

    .topNav .concat {
        display: none
    }

    .topNav .topBtn {
        display: none
    }

    .topNav .logo img {
        width: 10.6667rem
    }

    .menu img {
        width: 2.1667rem;
        height: 2.1667rem;
        display: block
    }

    .topNav .container {
        height: 3.8333rem
    }

    .container {
        max-width: 100%;
        padding: 0 1rem
    }

    .footer ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-bottom: 1.5rem
    }

        .footer ul::after {
            display: none
        }

        .footer ul li {
            margin-right: 0
        }

    .copyright {
        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-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .footer .leftBox .beian {
        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
    }

        .footer .leftBox .beian span {
            margin-right: 0
        }

    .footer .rightBox {
        text-align: center;
        margin-top: 1rem
    }

    .footer .qrcode {
        margin-right: 0
    }

    .fixedRight ul li {
        width: 5rem;
        height: 5rem
    }
}