.yoho-header {
    height: 50px;
    line-height: 50px;
    font-size: 12px;

    .yoho-group-map {
        padding-right: 2px;
        display: inline-block;
        position: relative;

        .iconfont {
            font-size: 18px;
            position: relative;
            top: -1px;
        }

        a {
            vertical-align: top;
        }

        .yoho-group {
            font-size: 14px;
            display: none;
        }

        &:hover {
            height: 48px;
            border-bottom: 2px solid #9a9a9a;

            > * {
                color: #9a9a9a;
            }

            .yoho-group {
                display: block;
            }
        }

        .yoho-group {
            border: 1px solid #eee;
            line-height: 32px;
            padding: 20px 0;
            position: absolute;
            top: 50px;

            li {
                width: 170px;
                padding-left: 20px;
                font-weight: bold;
            }

        }
    }

    .header-tools {
        li {
            float: left;
            padding: 0 2px;
            margin: 0 12px;
        }

        .tag-phone,
        .tag-bag {
            padding-right: 6px;
            margin-right: 8px;
            position: relative;

            &:hover {
                color: #9a9a9a;
                height: 48px;
                border-bottom: 2px solid #9a9a9a;
                cursor: default;
            }

            &:hover .sub-wrapper {
                display: block;
            }
        }

        .tools-icon {
            width: 20px;
            height: 20px;
            display: inline-block;
            vertical-align: middle;
            position: relative;
            top: -1px;
        }

        .icon-phone {
            background-image: url('/layout/phone.png');
        }

        .icon-bag {
            background-image: url('/layout/bag.png');
            line-height: 22px;
            text-align: center;
        }

        .bag-num {
            font-size: 12px;
            font-weight: bold;
            color: #fff;
            display: inline-block;
            transform: scale(0.8, 0.8);
        }

        .down-app-box {
            width: 230px;
            color: #000;
            font-size: 14px;
            padding: 20px 0;
            margin-left: -86px;
            line-height: 1.5;
            border: 1px solid #eee;
            position: absolute;
            text-align: center;
            display: none;

            .down-qr {
                display: inline-block;
                width: 138px;
                height: 138px;
                background-image: resolve('layout/qr.png');
            }

            p {
                margin: 20px 0;
            }

            .more-app {
                color: #ccc;
            }
        }

        .mini-bag-box {
            padding: 18px;
            border: 1px solid #eee;
            position: absolute;
            right: 0;
            display: none;

            .bag-content {
                width: 240px;
                padding: 110px 0;
                text-align: center;
            }

        }
    }
}