.c-header-jx3box {
    background-color: @bg-black;
    .z(800);
    overflow-y: auto;
    overflow-x: hidden;
    .w(100%);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    transition: 0.5s ease-in-out;
    .clearfix;
    // .pa;

    .none;
    &.on {
        .db;
    }

    // transition:0.5s ease-in-out;
    // transform: translateY(-100%);
    // .pr;top:-@header-height;
    // &.on{
    //     transform: translateY(0);
    //     top:0;
    // }

    ul {
        margin: 0 -20px 0 0;
        padding: 10px 0 10px 20px;
        list-style: none;
        .clearfix;
    }

    li {
        .fl;
        .db;
        .mr(20px);
        .mb(20px);
    }
    .u-item {
        .db;
        .size(74px);
        box-sizing: border-box;
        .x;
        padding: 8px;
        border-radius: 4px;
        border: 1px solid #eee;
        background-color: #fff;
        transition: all 0.1s ease-in;
        background-color: @bg-light;
        .pr;
        overflow: hidden;
        .u-pic-hover {
            .none;
        }
    }
    .u-item:not(.u-doing) {
        &:hover {
            border-color: #111;
            // .u-pic {
            //     .none;
            // }
            // .u-pic-hover{
            //     .db;
            // }
        }
    }
    .u-pic,
    .u-pic-hover {
        .size(32px);
        .db;
        .auto(x);
        fill: @color;
        .tm(0.7);
    }
    .u-txt {
        .fz(12px, 2);
        color: #666;
        .db;
        white-space: nowrap;
    }
    .u-mark {
        color: #fff;
        font-size: 12px;
        line-height: 16px;
        transform: rotate(45deg) scale(0.8);
        position: absolute;
        right: -20px;
        top: 0;
        padding: 0 15px 0 25px;
        font-style: normal;

        &.ishot {
            background-color: #c00;
        }
        &.isnew {
            background-color: #2fcb53;
        }
    }
    .u-app-start {
        .clear(left);
    }
    .u-doing {
        .tm(0.5);
        cursor: default;
    }

    // .pr;
    .u-close {
        // .pa;.rb(0);
        .fr;
        background-color: @color;
        .fz(13px);
        padding: 5px 10px;
        i {
            .mr(3px);
        }
        .pointer;
    }
}
.c-header-jx3box.isOverlay {
    background-color: rgba(0, 0, 0, 0.85);
}
@media screen and (max-width: @ipad-y) {
    .c-jx3box {
        .u-list{
            .flex;
            flex-wrap: wrap;
            justify-content: center;
            padding:20px;
            border-top:1px solid @color;
        }
    }
}

@media screen and (max-width: @phone) {
    .c-jx3box {
        height: calc(100vh - @header-height);
        .u-list {
            border-top:none;
            padding: 0 20px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            justify-content:center;
            .w(100%);
            box-sizing: border-box;
            gap:10px;
            margin: 0 !important;
            &::after {
                flex: 1;
            }
            li {
                padding: 5px;
                .mr(0);
                .mb(0);
            }
        }
        .u-item {
            .size(68px);
            .auto(x);
            .u-pic {
                .size(28px);
            }
        }
        .u-app-start {
            clear: none;
        }
    }
}
@media screen and (max-width:@ip5) {
    .c-jx3box {
        .u-list{
            gap:5px;
        }
        .u-item {
            .size(60px);
            .u-pic {
                .size(22px);
            }
        }
    }
}