* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #000000;
}

    a:hover {
        text-decoration: none;
    }

li {
    list-style: none;
}

.location {
    position: absolute;
}

body {
    width: 10rem;
    margin: 0 auto;
    text-align: center;
    overflow-x: hidden;
    background: #f7f7f7;
}

header {
    width: 10rem;
    height: 1.506667rem;
    /* border-bottom: 0.02666667rem solid #E5E5E5; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 30000;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10000;
    background-color: #ffffff;
}

    header .left {
        margin: 0rem 0rem 0rem 0.42666667rem;
    }

        header .left .menu {
            width: 0.50666667rem;
            height: 0.45333333rem;
        }

        header .left .close {
            width: 0.42666667rem;
            height: 0.42666667rem;
            display: none;
        }

    header .center {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        header .center img {
            width: 2.24rem;
            height: 0.81333333rem;
        }

        header .center .circle {
            width: 0.05333333rem;
            height: 0.05333333rem;
            border-radius: 50%;
            background: #727171;
            margin: 0rem 0rem 0rem 0.21333333rem;
        }

        header .center span {
            font-size: 0.4266666rem;
            color: #727171;
        }

        header .center a {
            font-size: 0.4266666rem;
            color: #727171;
        }

        header .center a {
            font-size: 0.45333333rem;
            color: #727171;
            margin: 0rem 0rem 0rem 0.21333333rem;
        }

    header .right {
        margin: 0rem 0.4rem 0rem 0rem;
    }

        header .right img {
            width: 0.58666667rem;
            height: 0.58666667rem;
        }

.indexnewPage {
    background-color: #F6F6F6 !important;
    width: 100vw;
    min-height: 100vh !important;
    overflow: scroll;
    position: fixed;
    top: 0;
    height: 100vh;
    left: 0;
    z-index: 100000;
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
    border-radius: none !important;
    padding: 1.14666667rem 0rem 2.66666667rem 0rem;
}

    .indexnewPage .close {
        position: absolute;
        color: #CECECE;
        width: 0.37333333rem;
        height: 0.37333333rem;
        top: 0.37333333rem;
        right: calc(50vw - 5rem + 0.42666667rem);
        opacity: 1 !important;
    }

        .indexnewPage .close img {
            width: 0.37333333rem;
            height: 0.37333333rem;
        }

    .indexnewPage .titlebox .title {
        font-size: 0.48rem;
        color: #000000;
        font-weight: bold;
        margin: 0.69333333rem 0rem 0rem calc(50vw - 5rem + 0.48rem);
        display: inline-block;
        width: 100%;
        text-align: left;
    }

    .indexnewPage .titlebox .box_icon {
        margin: 0.53333333rem auto 0;
        width: 9.04rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        max-height: 13.33333333rem;
        overflow: scroll;
    }

        .indexnewPage .titlebox .box_icon .icon {
            height: 0.93333333rem;
            padding: 0rem 0.5rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 8rem;
            text-align: left;
            background: #ffffff;
            text-align: center;
            line-height: 0.93333333rem;
            margin: 0rem 0.32rem 0.32rem 0rem;
            font-size: 0.4rem;
            color: #333333;
        }

        .indexnewPage .titlebox .box_icon .active {
            font-size: 0.4rem;
            color: #85B12E;
        }

    .indexnewPage .titlebox:last-child {
        margin: 0rem 0rem 1.33333333rem 0rem;
    }


.content .card {
    width: 10rem;
    background: #ffffff;
    display: inline-block;
    margin: 0rem 0rem 0.26666667rem 0rem;
}

    .content .card .top {
        display: flex;
        justify-content: flex-start;
        padding: 0.2rem 0.42666667rem 0.56rem 0.4266666rem;
        border-bottom: 1px solid #F2F2F2;
        position: relative;
    }

        .content .card .top .headImg {
            width: 1.6rem;
            height: 1.6rem;
            border-radius: 50%;
        }

        .content .card .top .icon_gender {
            width: 0.37333333rem;
            height: 0.37333333rem;
            position: absolute;
            left: 1.57333333rem;
            top: 1.76rem;
        }

        .content .card .top .box_msg {
            width: 7.2rem;
            margin: 0rem 0rem 0rem 0.32rem;
            display: flex;
            align-content: flex-start;
            flex-wrap: wrap;
        }

            .content .card .top .box_msg .box_name {
                display: flex;
                justify-content: flex-start;
                align-content: center;
                align-items: center;
                margin: 0.13333333rem 0rem 0rem 0rem;
                width: 3.45rem;
            }

                .content .card .top .box_msg .box_name .name {
                    max-width: 4.8rem;
                    font-weight: bold;
                    font-size: 0.53333333rem;
                    color: #000000;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    text-align: left;
                }

                .content .card .top .box_msg .box_name .icon {
                    width: 0.42666667rem;
                    height: 0.42666667rem;
                    margin: 0rem 0rem 0rem 0.10666667rem;
                }

            .content .card .top .box_msg .box_job {
                margin: 0.16rem 0rem 0.18666667rem 0rem;
                font-size: 0.37333333rem;
                color: #999999;
                width: 7rem;
                overflow: hidden;
                /*鐡掑懎鍤柈銊ュ瀻闂呮劘妫�*/
                text-overflow: ellipsis;
                /* 鐡掑懎鍤柈銊ュ瀻閺勫墽銇氶惇浣烘殣閸欙拷 */
                white-space: nowrap;
                /*鐟欏嫬鐣惧▓浣冩儰娑擃厾娈戦弬鍥ㄦ拱娑撳秷绻樼悰灞惧床鐞涳拷 */
                max-width: 7rem;
                /*闂団偓鐟曚線鍘ら崥鍫濐啍鎼达附娼垫担璺ㄦ暏*/
                text-align: left;
            }

        .content .card .top .box_edit {
            width: 1.6rem;
            height: 0.66666667rem;
            background: #ffffff;
            border: 1px solid #dcdcdc;
            border-radius: 0.10666667rem;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0.21333333rem 0rem 0rem 0.2rem;
            font-size: 0.32rem;
            color: #666666;
        }

            .content .card .top .box_edit img {
                width: 0.32rem;
                height: 0.29333333rem;
            }

        .content .card .top .box_attention {
            width: 1.6rem;
            height: 0.66666667rem;
            background: #87B234;
            border-radius: 0.10666667rem;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0.21333333rem 0rem 0rem 0rem;
        }

            .content .card .top .box_attention img {
                width: 0.32rem;
                height: 0.29333333rem;
            }

            .content .card .top .box_attention span {
                font-size: 0.34666667rem;
                color: #ffffff;
                margin: 0rem 0rem 0rem 0.05333333rem;
            }

    .content .card .bottom {
        margin: 0.53333333rem 0.93333333rem;
        display: flex;
        justify-content: space-between;
    }

        .content .card .bottom li {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: center;
            width: 25%;
        }

            .content .card .bottom li .txt01 {
                font-size: 0.53333333rem;
                font-weight: bold;
                color: #000000;
                font-family: Arial;
            }

            .content .card .bottom li .txt02 {
                width: 100%;
                font-size: 0.32rem;
                color: #666666;
            }

.content .menu {
    display: inline-block;
}

    .content .menu li {
        width: 10rem;
        height: 1.33333333rem;
        line-height: 1.33333333rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #ffffff;
        margin: 0rem 0rem 0.02666667rem 0rem;
    }

        .content .menu li .left {
            display: flex;
            align-items: center;
        }

            .content .menu li .left .icon {
                width: 0.42666667rem;
                height: 0.42666667rem;
                margin: 0rem 0rem 0rem 0.53333333rem;
            }

            .content .menu li .left .icon_phone {
                width: 0.32rem;
                height: 0.48rem;
                margin: 0rem 0rem 0rem 0.53333333rem;
            }

            .content .menu li .left .icon_password {
                width: 0.42666667rem;
                height: 0.48rem;
                margin: 0rem 0rem 0rem 0.53333333rem;
            }

            .content .menu li .left .txt {
                font-size: 0.42666667rem;
                color: #000000;
                text-align: left;
                margin: 0rem 0rem 0rem 0.34666667rem;
            }

        .content .menu li .box_right .right_txt {
            font-size: 0.42666667rem;
            color: #AAA;
            margin: 0rem 0.21333333rem 0rem 0rem;
        }

            .content .menu li .box_right .right_txt.success {
                color: #8FBC29;
            }

        .content .menu li .box_right .right {
            margin: 0rem 0.42666667rem 0rem 0rem;
            width: 0.18666667rem;
            height: 0.34666667rem;
        }

.content .view {
    margin: 0rem 0rem 1.12rem 0rem;
}

    .content .view .title {
        margin: 0.37333333rem 0rem 0rem 0.4rem;
        font-size: 0.37333333rem;
        font-size: 0.37333333;
        color: #AAAAAA;
        text-align: left;
    }

    .content .view .box_view li {
        width: 9.2rem;
        margin: 0.34666667rem auto 0;
        background: #ffffff;
        border: 0.02666667rem solid #e5e5e5;
        box-shadow: 0px 0.05333333rem 0.29333333rem 0px rgba(7, 0, 2, 0.04);
        border-radius: 0.26666667rem;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        align-content: flex-start;
    }

        .content .view .box_view li .top {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 0.45333333rem 0.42666667rem 0rem 0.42666667rem;
            position: relative;
        }

            .content .view .box_view li .top .headImg {
                width: 1.06666667rem;
                height: 1.06666667rem;
                border-radius: 50%;
            }

            .content .view .box_view li .top .box_msg {
                width: 4.8rem;
                margin: 0rem 0rem 0rem 0.32rem;
                display: flex;
                align-content: space-between;
                flex-wrap: wrap;
            }

                .content .view .box_view li .top .box_msg .box_name {
                    display: flex;
                    justify-content: flex-start;
                    align-content: center;
                    align-items: center;
                    width: 4.8rem;
                }

                    .content .view .box_view li .top .box_msg .box_name .name {
                        font-weight: bold;
                        font-size: 0.4rem;
                        color: #000000;
                        max-width: 2.0rem;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        text-align: left;
                    }

                    .content .view .box_view li .top .box_msg .box_name .icon {
                        width: 0.32rem;
                        height: 0.32rem;
                        margin: 0rem 0rem 0rem 0.10666667rem;
                    }

                    .content .view .box_view li .top .box_msg .box_name .time {
                        font-size: 0.32rem;
                        font-size: 0.32;
                        color: #999999;
                        margin: 0rem 0rem 0rem 0.10666667rem;
                    }

                .content .view .box_view li .top .box_msg .box_job {
                    margin: 0rem 0rem 0.18666667rem 0rem;
                    font-size: 0.32rem;
                    font-size: 0.32;
                    color: #999999;
                    width: 4.8rem;
                    overflow: hidden;
                    /*鐡掑懎鍤柈銊ュ瀻闂呮劘妫�*/
                    text-overflow: ellipsis;
                    /* 鐡掑懎鍤柈銊ュ瀻閺勫墽銇氶惇浣烘殣閸欙拷 */
                    white-space: nowrap;
                    /*鐟欏嫬鐣惧▓浣冩儰娑擃厾娈戦弬鍥ㄦ拱娑撳秷绻樼悰灞惧床鐞涳拷 */
                    max-width: 4.8rem;
                    /*闂団偓鐟曚線鍘ら崥鍫濐啍鎼达附娼垫担璺ㄦ暏*/
                    text-align: left;
                }

            .content .view .box_view li .top .box_edit {
                width: 1.6rem;
                height: 0.66666667rem;
                background: #ffffff;
                border: 1px solid #dcdcdc;
                border-radius: 0.10666667rem;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0.21333333rem 0rem 0rem 0rem;
            }

                .content .view .box_view li .top .box_edit img {
                    width: 0.32rem;
                    height: 0.29333333rem;
                }

                .content .view .box_view li .top .box_edit span {
                    font-size: 0.34666667rem;
                    color: #666666;
                    margin: 0rem 0rem 0rem 0.05333333rem;
                }

        .content .view .box_view li .center {
            margin: 0.32rem auto 0;
            width: 8.37333333rem;
            text-align: left;
            border-bottom: 0.02666667rem solid #E5E5E5;
            padding: 0rem 0rem 0.56rem 0rem;
        }

            .content .view .box_view li .center .logo {
                width: 0.82666667rem;
                height: 0.48rem;
                background: #ffffff;
                border: 1px solid #fe3055;
                border-radius: 0.10666667rem;
                font-size: 0.32rem;
                font-size: 0.32;
                color: #FE3055;
                text-align: left;
            }

            .content .view .box_view li .center .txt {
                line-height: 0.61333333rem;
                width: 8.37333333rem;
                font-size: 0.42666667rem;
            }

            .content .view .box_view li .center .box_voice {
                display: flex;
                justify-content: flex-start;
                flex-wrap: nowrap;
                align-items: center;
                align-content: center;
                margin: 0.53333333rem 0 0 0;
                height: 48px;
            }

                .content .view .box_view li .center .box_voice .voice {
                    height: 48px;
                    background: #ffffff;
                    border: 1px solid #e5e5e5;
                    box-shadow: 0px 2px 11px 0px rgba(7, 0, 2, 0.04);
                    border-radius: 24px;
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: nowrap;
                    align-items: center;
                }

                    .content .view .box_view li .center .box_voice .voice .box_line {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        width: 0.37333333rem;
                        height: 1.28rem;
                        margin: 0rem 0rem 0rem 0.64rem;
                    }

                    .content .view .box_view li .center .box_voice .voice .line {
                        background: #2f2d31;
                    }

                    .content .view .box_view li .center .box_voice .voice .line1 {
                        width: 0.02666667rem;
                        height: 0.24rem;
                    }

                    .content .view .box_view li .center .box_voice .voice .line2 {
                        width: 0.02666667rem;
                        height: 0.34666667rem;
                    }

                    .content .view .box_view li .center .box_voice .voice .line3 {
                        width: 0.02666667rem;
                        height: 0.45333333rem;
                    }

                    .content .view .box_view li .center .box_voice .voice .time {
                        margin: 0rem 0.56rem 0rem 0rem;
                    }

                .content .view .box_view li .center .box_voice .red_dotted {
                    width: 0.18666667rem;
                    height: 0.18666667rem;
                    border-radius: 50%;
                    margin: 0rem 0rem 0rem 0.18666667rem;
                    background-color: #F1585D;
                }

        .content .view .box_view li .bottom {
            width: 8.37333333rem;
            font-size: 0.37333333rem;
            font-size: 0.37333333;
            color: #999999;
            text-align: left;
            margin: 0.37333333rem auto 0.37333333rem;
        }

            .content .view .box_view li .bottom p {
                overflow: hidden;
                /*鐡掑懎鍤柈銊ュ瀻闂呮劘妫�*/
                text-overflow: ellipsis;
                /* 鐡掑懎鍤柈銊ュ瀻閺勫墽銇氶惇浣烘殣閸欙拷 */
                white-space: nowrap;
                /*鐟欏嫬鐣惧▓浣冩儰娑擃厾娈戦弬鍥ㄦ拱娑撳秷绻樼悰灞惧床鐞涳拷 */
                max-width: 8rem;
                /*闂団偓鐟曚線鍘ら崥鍫濐啍鎼达附娼垫担璺ㄦ暏*/
                text-align: left;
            }

.hide-guest {
    display: none;
}