.hanzo-menu-box {
    width        : 100%;
    background   : #fff;
    border-radius: 4px;
    padding      : 12px 0 6px 0;
    box-sizing   : border-box;
    margin-bottom: 10px;

    .hanzo-menu-box__skeleton {

        .hanzo-menu-box__skeleton--search {
            height       : 40px;
            margin       : 0 15px;
            background   : #e9edf1;
            border-radius: 20px;
            margin-bottom: 10px;
        }

        .hanzo-menu-box__skeleton--content {
            padding: 0 15px;

            .hanzo-menu-box__skeleton--content-item {
                height: 78px;

                .skeleton-icon {
                    height       : 58px;
                    width        : 58px;
                    display      : block;
                    margin       : 0 auto;
                    border-radius: 50%;
                    background   : #e9edf1;
                }

                .skeleton-text {
                    height       : 18px;
                    display      : block;
                    background   : #e9edf1;
                    margin-bottom: 0;
                    margin       : 4px 5px;
                }
            }

            .hasBottom {
                margin-bottom: 10px;
            }
        }
    }

    .hanzo-menu-box__search {
        padding: 0 15px;
    }

    .hanzo-men-box__comtent--item {
        display: inline-block;
        cursor : pointer;
    }

    .hanzo-men-box__swipe {
        // height: 176px;
    }

    .hanzo-menu-box-item {
        text-align: center;
        margin-top: 10px;

        .hanzo-menu-box-item__icon {
            height: 48px;
        }

        .hanzo-menu-box-item__text {
            font-size  : 14px;
            line-height: 24px;
            margin-top : 6px;
            display    : inline-block;
        }
    }

    .indicator-dot {
        height    : 12px;
        width     : 100%;
        position  : relative;
        margin-top: 4px;

        &-box {

            width          : 100px;
            height         : 12px;
            border-radius  : 6px;
            position       : absolute;
            top            : 0;
            left           : 50%;
            margin-left    : -50px;
            display        : flex;
            justify-content: center;
        }

        .dot-type {
            flex-shrink:0;
            height: 24px;
            width: 24px;
            border-radius: 50%;
            background: #D8D8D8;
            line-height: 24px;
            text-align: center;
            color: #fff;
            font-size: 24px;
            transform:scale(0.5,0.5);
        }

        .dot-left {
            margin: -6px -3px 0 -3px;
        }

        .dot-active {
            background: #FD6226;
        }
    }

    .tips-btn {
        background-image   : url(https://front-xps-cdn.xsyx.xyz/2019/08/16/959154220.png);
        background-position: center;
        background-size    : contain;
        background-repeat  : no-repeat;
        margin             : 6px auto 0;
        width              : 192px;
        height             : 23px;
        overflow           : hidden;

        .tip-left {
            width : 85px;
            height: 23px;
            float : left;
        }

        .tip-right {
            width : 85px;
            height: 23px;
            float : right;
        }
    }

}