.breadcrumb {
    display: flex;
    gap: var(--fluid-gp1); --min-gp1: 10; --max-gp1: 20;
    padding: var(--fluid-pd1) var(--fluid-pd2);
    --min-pd1: 8; --max-pd1: 10; --min-pd2: 15; --max-pd2: 30;
    border-bottom: 2px solid var(--breadcrumb-border);
    background: var(--breadcrumb-base);
}
.breadcrumb li i {
    margin-right: var(--fluid-mg1); --min-mg1: 8; --max-mg1: 18;
    font-size: var(--fluid-fs); --min-fs: 10; --max-fs: 12;
    color: rgba(255, 255, 255, .75);
}
.breadcrumb li a {
    font-size: var(--fluid-fs); --min-fs: 12; --max-fs: 14;
    font-weight: 500;
    color: rgba(255, 255, 255, .75);
    letter-spacing: .1em;
}
.breadcrumb li a:hover {
    color: var(--white);
    opacity: 1;
}

.sel-box {
    display: flex;
    align-items: center;
    position: relative;
    margin-left: auto;
    --min-wd: 7; --max-wd: 8;
    --min-hg: 6; --max-hg: 7;
    --min-rg: 7; --max-rg: 10;
}
.sel-box::after {
    content: '';
    width: var(--fluid-wd);
    height: var(--fluid-hg);
    position: absolute;
    right: var(--fluid-rg);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: var(--selbox-btn);
    pointer-events: none;
}
.sel-box select {
    width: var(--fluid-wd); --min-wd: 57; --max-wd: 70;
    padding: var(--fluid-pd1) 0 var(--fluid-pd2) var(--fluid-pd3);
    --min-pd1: 3; --max-pd1: 5; --min-pd2: 3; --max-pd2: 4; --min-pd3: 7; --max-pd3: 10;
    font-size: var(--fluid-fs); --min-fs: 11; --max-fs: 13;
    letter-spacing: .05em;
    color: var(--text);
    border: none;
    border-radius: 3px;
    outline: none;
    background: var(--white);
    box-shadow: 0 4px 4px rgb(0 0 0 / 2%), 0 2px 3px -2px rgba(0 0 0 / 5%);
    appearance: none;
    cursor: pointer;
}