* {
    margin: 0;
    padding: 0;
}

#app {
    width: 10rem;
    margin: auto;
}

[v-cloak] {
    display: none;
}

li {
    list-style: none;
}

.box_search {
    width: 9.36rem;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}

    .box_search .content_search {
        margin: auto;
        width: 9.36rem;
        height: 0.90666667rem;
        background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
        background: #f8f8f8;
        border-radius: 0.45333333rem;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
    }

    .box_search .content_search2 {
        width: 8.26666667rem;
        height: 0.90666667rem;
        background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
        background: #f8f8f8;
        border-radius: 0.45333333rem;
        display: flex;
        justify-content: flex-start;
        align-content: center;
        align-items: center;
    }

        .box_search .content_search2 img {
            margin: 0 0 0 0.26666667rem;
        }

        .box_search .content_search2 input {
            width: 6.4rem;
            height: 0.48rem;
            font-size: 0.37333333rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
            line-height: 0.48rem;
            margin: 0 0 0 0.26666667rem;
            border: none;
            background-color: #f8f8f8;
        }

    .box_search img {
        width: 0.42666667rem;
        height: 0.42666667rem;
        margin: 0 0.18666667rem 0 0;
    }

    .box_search p.txt01 {
        height: 0.48rem;
        font-size: 0.37333333rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 0.48rem;
    }

    .box_search p.txt02 {
        height: 0.48rem;
        font-size: 0.37333333rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 0.48rem;
        word-break: break-all;
    }

.all-cover {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
}

.ft-brand-menu {
    width: 100vw;
    height: 100vh;
    background: rgba(51, 51, 51, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

    .ft-brand-menu .list {
        padding: 0 0 0.45333333rem 0;
        background-color: #ffffff;
        max-height: 12.8rem;
        overflow-y: scroll;
    }

        .ft-brand-menu .list .list-item {
            padding: 1.53333333rem 0 0 0;
        }

            .ft-brand-menu .list .list-item .top {
                height: 0.53333333rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 9.36rem;
                margin: auto;
            }

                .ft-brand-menu .list .list-item .top .title {
                    height: 0.53333333rem;
                    font-size: 0.37333333rem;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: bold;
                    color: #333333;
                    line-height: 0.53333333rem;
                }

                .ft-brand-menu .list .list-item .top .right {
                    text-align: center;
                    /* width: 0.86666667rem; */
                    padding: 0 0.2rem;
                    height: 0.50666667rem;
                    border-radius: 0.25333333rem;
                    border: 0.02033333rem solid #c2c2c2;
                    font-size: 0.26666667rem;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999999;
                    line-height: 0.50666667rem;
                }

            .ft-brand-menu .list .list-item .detail {
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                width: 9.36rem;
                margin: 0.326667rem auto 0;
            }

                .ft-brand-menu .list .list-item .detail .detail-item {
                    margin: 0.18666667rem 0.28rem 0 0;
                    width: 2.93333333rem;
                    height: 0.8rem;
                    background: #f6f6f6;
                    border-radius: 0.05333333rem;
                    font-size: 0.32rem;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #666666;
                    line-height: 0.8rem;
                    text-align: center;
                    display: inline-block;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                    .ft-brand-menu .list .list-item .detail .detail-item:nth-child(3n) {
                        margin: 0.18666667rem 0rem 0 0;
                    }

.ft-rule-boxs .cover {
    width: 100vw;
    height: 100vh;
    background: rgba(34, 31, 33, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
}

    .ft-rule-boxs .cover .box_box_rules {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .ft-rule-boxs .cover .box_box_rules .box_rules {
            width: 9.2rem;
            margin: auto;
            position: relative;
        }

            .ft-rule-boxs .cover .box_box_rules .box_rules .headImg {
                width: 5.73333333rem;
                height: 0.96rem;
                position: absolute;
                top: 0.17333333rem;
                left: 1.76rem;
            }

            .ft-rule-boxs .cover .box_box_rules .box_rules .title {
                width: 100%;
                height: 0.96rem;
                position: absolute;
                left: 0;
                top: 0.17333333rem;
                text-align: center;
                font-size: 0.48rem;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ffffff;
                line-height: 0.96rem;
                letter-spacing: 2px;
            }

            .ft-rule-boxs .cover .box_box_rules .box_rules .rules {
                margin: 0rem auto 0;
                width: 9.2rem;
                background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
                border-radius: 0.32rem;
                display: inline-block;
            }

                .ft-rule-boxs .cover .box_box_rules .box_rules .rules .rulesContent {
                    width: 8.4rem;
                    height: 14.08rem;
                    margin: 0.86666667rem auto 0;
                    overflow: scroll;
                }

                    .ft-rule-boxs .cover .box_box_rules .box_rules .rules .rulesContent .part01 span {
                        width: 8.4rem;
                        font-size: 0.37333333rem;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #39393b;
                        word-wrap: word-wrap;
                        word-break: break-word;
                        display: inline-block;
                        margin: 0 0 0.66666667rem 0;
                    }

.ft_box_share {
    width: 10rem;
    height: 100vh;
    position: fixed;
    top: 0;
    left: calc(50vw-5rem);
    background: rgba(51, 51, 51, 0.7);
    z-index: 10000000;
}

    .ft_box_share .layui-m-anim-up {
        width: 10rem;
        height: 6.66666667rem;
        background-color: #FFFFFF;
        border-radius: 0.32rem 0.32rem 0px 0px;
        position: fixed;
        left: calc(50vw-5rem);
        bottom: 0;
        border: none;
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        z-index: 10000000;
    }

        .ft_box_share .layui-m-anim-up p.title {
            margin: 0.42666667rem auto 0;
            width: 100%;
            text-align: center;
            height: 0.49333333rem;
            font-size: 0.38666667rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 0.49333333rem;
        }

        .ft_box_share .layui-m-anim-up .top {
            height: 4.26666667rem;
            background-color: #FFFFFF;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

            .ft_box_share .layui-m-anim-up .top li {
                text-align: center;
            }

                .ft_box_share .layui-m-anim-up .top li img {
                    width: 1.33333333rem;
                    height: 1.33333333rem;
                    margin:auto;
                }

                .ft_box_share .layui-m-anim-up .top li p {
                    font-size: 0.38666667rem;
                    color: #000000;
                    margin: 0.26666667rem 0 0 0;
                }

        .ft_box_share .layui-m-anim-up .bottom {
            height: 0.6rem;
            background-color: #FFFFFF;
            margin: 0rem 0 0 0;
            text-align: center;
            line-height: 0.6rem;
            font-size: 0.42666667rem;
            color: #333333;
        }

.shareToFriend {
    width: 7.84rem;
    height: 6.77333333rem;
    position: fixed;
    top: 0.42666667rem;
    right: 0.74666667rem;
    z-index: 1000000;
    border: none;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-name: layui-m-anim-scale;
    animation-name: layui-m-anim-scale;
}

.status_success {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0rem;
    right: 0rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.10666667rem;
    z-index: 100000000;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-name: layui-m-anim-scale;
    animation-name: layui-m-anim-scale;
}

.status_box_success {
    background: rgba(10, 10, 10, 0.8);
    position: fixed;
    width: 3.73333333rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    z-index: 10000000000;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-name: layui-m-anim-scale;
    animation-name: layui-m-anim-scale;
}

    .status_box_success img {
        border-radius: 50%;
        width: 0.74666667rem;
        height: 0.74666667rem;
        margin: auto;
    }

    .status_box_success p {
        width: 100%;
        font-size: 0.32rem;
        color: #ffffff;
        text-align: center;
        border-radius: 50%;
        height: 0.10666667rem;
        margin: 0.10666667rem auto 0;
    }

.code {
    width: 6.93333333rem;
    height: 7.2rem;
    background: #ffffff;
    border-radius: 0.26666667rem;
    position: fixed;
    z-index: 10000000;
    text-align: center;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-name: layui-m-anim-scale;
    animation-name: layui-m-anim-scale;
    right: 1.52rem;
    top: 3.12rem;
}

    .code .txt01 {
        font-size: 0.53333333rem;
        color: #333333;
        margin: 0.326667rem auto 0.2rem;
    }

    .code .pic01 {
        width: 4.66666667rem;
        height: 4.66666667rem;
        margin: auto;
    }

    .code .txt02 {
        font-size: 0.37333333rem;
        color: #333333;
        margin: 0.13333333rem auto 0;
    }

.btn_close_code {
    width: 0.8rem;
    height: 0.8rem;
    position: fixed;
    z-index: 10000000;
    right: 4.56rem;
    top: 11.30666667rem;
}
.box_qrcode {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000000;
    background: rgba(0, 0, 0, 0.7);
}

    .box_qrcode .content_qrcode {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        flex-wrap: wrap;
    }

        .box_qrcode .content_qrcode .aqrcode {
            width: 6.93333333rem;
            height: 7rem;
            background: #ffffff;
            border-radius: 0.26666667rem;
            text-align: center;
        }

            .box_qrcode .content_qrcode .aqrcode img {
                width: 4.933333rem;
                height: auto;
                margin: 0.6rem auto 0;
            }

            .box_qrcode .content_qrcode .aqrcode .qrcode1Loading {
                width: 4.93333333rem;
                height: 4.93333333rem;
                margin: 1.01333333rem auto 0;
                display: flex;
                flex-wrap: wrap;
                align-content: center;
                align-items: center;
                justify-content: center;
            }

                .box_qrcode .content_qrcode .aqrcode .qrcode1Loading .qrcodeImg {
                    width: 1rem;
                    height: auto;
                }

                .box_qrcode .content_qrcode .aqrcode .qrcode1Loading .qrcodeText {
                    font-size: 0.2rem;
                    width: 100%;
                    margin: 0.5rem auto 0;
                    text-align: center;
                }

            .box_qrcode .content_qrcode .aqrcode .qrcode {
                width: 4.93333333rem;
                height: 4.93333333rem;
                margin: 1.01333333rem auto 0;
            }

            .box_qrcode .content_qrcode .aqrcode .txt02 {
                font-size: 0.4rem;
            }

        .box_qrcode .content_qrcode .box_close {
            width: 100%;
            height: auto;
            text-align: center;
        }

        .box_qrcode .content_qrcode .close {
            width: 0.8rem;
            height: 0.8rem;
            margin: 0.85333333rem auto 0;
        }