@charset "UTF-8";
#menu-popup { background-color: transparent!important; }
#menu-popup menu ul.level-one li.level-one--item ul.level-two .menu-brands--slider .menu-slider--wrapper .menu-slider--item {
    border-radius: 0.8rem;
    transition: all 0.3s ease-in-out;
}
#menu-popup menu ul.level-one li.level-one--item ul.level-two .menu-brands--slider .menu-slider--wrapper .menu-slider--item:hover {
    background-color: #fff;
    box-shadow: 0 0.2rem 0.6rem 0 #D2D2D296;

}
/* Desktop (All screens) */
@media (min-width: 1025px) {
    #menu-popup menu {
        position: relative;
        width: 192rem;
        margin-top: 12.2rem;
        height: calc(100vh - 12.2rem);
        max-height: 100vh;
        padding: 1.6rem;
        background-color: #fff;
        overflow-y: auto;
        overflow-x: hidden;
    }
    menu, menu ul, menu ul li {
        margin: 0;
        padding: 0;
    }
    menu ul { list-style: none; }
    #menu-popup menu ul.level-one {
        position: absolute;
        top: 1.6rem;
        left: 20rem;
        width: 34.8rem;
        height: auto;
        gap: 0.8rem;
    }
    #menu-popup menu ul.level-one ul.level-two {
        position: absolute;
        top: 1.6rem;
        left: 38rem;
        width: 114.8rem;
    }
    #menu-popup menu ul.level-one button {
        position: relative;
        width: 34rem;
        height: 6.4rem;
        padding: 1.6rem;
        gap: 0.8rem;
        margin-left: 1.6rem;
        color: #202020;
        border-radius: 0.6rem;
        background-color: #fff;
        z-index: 2;
        cursor: pointer;
    }
    #menu-popup menu ul.level-one button:hover { background-color: #F4F4F6; }
    #menu-popup menu ul.level-one button:before {
        display: block;
        content: '';
        width: 3.2rem;
        height: 3.2rem;
    }
    #menu-popup menu ul.level-one li.smartphone button:before { background-image: url("../img/svg/black/smartphone.svg"); }
    #menu-popup menu ul.level-one li.pc button:before { background-image: url("../img/svg/black/pc.svg"); }
    #menu-popup menu ul.level-one li.headphone button:before { background-image: url("../img/svg/black/headphone.svg"); }
    #menu-popup menu ul.level-one li.for_home button:before { background-image: url("../img/svg/black/for_home.svg"); }
    #menu-popup menu ul.level-one li.auto button:before { background-image: url("../img/svg/black/auto.svg"); }
    #menu-popup menu ul.level-one li.garden button:before { background-image: url("../img/svg/black/garden.svg"); }
    #menu-popup menu ul.level-one li.transport button:before { background-image: url("../img/svg/black/transport.svg"); }
    #menu-popup menu ul.level-one li.brands button:before { background-image: url("../img/svg/black/brands.svg"); }
    #menu-popup menu ul.level-one li.level-one--item ul.level-two {
        gap: 3.2rem;
        transform: translateX(110rem);
        opacity: 0;
        transition: all 0s linear;
    }
    #menu-popup menu ul.level-one li.level-one--item:hover ul.level-two,
    #menu-popup menu ul.level-one li.level-one--item ul.level-two:hover,
    #menu-popup menu ul.level-one li.level-one--item ul.level-two.active {
        transform: translateX(0);
        opacity: 1;
        transition: transform 0.0s ease, opacity 0.25s linear;
    }
    #menu-popup menu ul.level-one li.level-one--item ul.level-two picture.level-two--banner,
    #menu-popup menu ul.level-one li.level-one--item ul.level-two picture.level-two--banner img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    #menu-popup menu ul.level-one li.level-one--item ul.level-two .menu-brands--slider {
        width: 100%;
        padding: 0.4rem 0;
        overflow-x: hidden;
    }
    #menu-popup menu ul.level-one li.level-one--item ul.level-two .menu-brands--slider .menu-slider--wrapper {
        width: 1000rem;
        gap: 0.8rem;
        transition: all 0.5s ease;
        user-select: none;
    }
    #menu-popup menu ul.level-one li.level-one--item ul.level-two .menu-brands--slider .menu-slider--wrapper .menu-slider--item {
        width: 15.4rem;
        height: 6.4rem;
        padding: 0.5rem 2.4rem;
        background-color: #F9F9FA;

    }
    #menu-popup menu ul.level-one li.level-one--item ul.level-two .menu-brands--slider .menu-slider--wrapper .menu-slider--item picture,
    #menu-popup menu ul.level-one li.level-one--item ul.level-two .menu-brands--slider .menu-slider--wrapper .menu-slider--item picture img {
        width: 10rem;
        height: 5rem;
        object-fit: cover;
    }
    #menu-popup menu ul.level-one li.level-one--item ul.level-two ul.level-three {
        width: 25.7rem;
    }
    #menu-popup menu ul.level-one li.level-one--item ul.level-two ul.level-three li.level-three--item,
    #menu-popup menu ul.level-one li.level-one--item ul.level-two ul.level-three li.level-three--item a {
        width: 100%;
        transition: all 0.3s ease;
    }
    #menu-popup menu ul.level-one li.level-one--item ul.level-two ul.level-three li.level-three--item:has(> a.menu-link--large),
    #menu-popup menu ul.level-one li.level-one--item ul.level-two ul.level-three li.level-three--item:has(> span.menu-more) {
        padding-bottom: 1.6rem;
    }
    #menu-popup menu ul.level-one li.level-one--item ul.level-two ul.level-three li.level-three--item:has(> a.menu-link) {
        padding-bottom: 0.8rem;
    }
    #menu-popup menu ul.level-one li.level-one--item ul.level-two ul.level-three li.level-three--item:has(> a.h5) {
        padding-bottom: 2.4rem;
    }
    #menu-popup menu ul.level-one li.level-one--item ul.level-two ul.level-three li.level-three--item a.menu-link {
        color: #8C8C8C;
    }
    #menu-popup menu ul.level-one li.level-one--item ul.level-two ul.level-three li.level-three--item a.menu-link:hover {
        color: #0AB6C9;
    }
    #menu-popup menu ul.level-one li.level-one--item ul.level-two ul.level-three li.level-three--item a.h5,
    #menu-popup menu ul.level-one li.level-one--item ul.level-two ul.level-three li.level-three--item a.menu-link--large {
        font-weight: 400;
        color: #202020;
    }
    #menu-popup menu ul.level-one li.level-one--item ul.level-two
    ul.level-three li.level-three--item a.menu-link--large { font-size: 1.4rem; }
    #menu-popup menu ul.level-one li.level-one--item ul.level-two ul.level-three li.level-three--item span.menu-more {
        font-size: 1.4rem;
        gap: 0.4rem;
        color: #0AB6C9;
        cursor: pointer;
    }
    #menu-popup menu ul.level-one li.level-one--item ul.level-two ul.level-three li.level-three--item span.menu-more,
    #menu-popup menu ul.level-one li.level-one--item ul.level-two ul.level-three li.level-three--item a.menu-link {
        font-weight: 600;
    }
    #menu-popup menu ul.level-one li.level-one--item ul.level-two ul.level-three li.level-three--item span.menu-more:before {
        display: block;
        content: '';
        width: 1.6rem;
        height: 1.6rem;
        background-image: url("../img/svg/turquoise/nav_arrow.svg");
        transition: all 0.3s ease;
    }
    #menu-popup menu ul.level-one li.level-one--item ul.level-two
    ul.level-three li.level-three--item span.menu-more.open:before { transform: rotate(180deg); }
    #menu-popup menu ul.level-one li.level-one--item ul.level-two ul.level-three li.menu-link--hidden {
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        padding: 0!important;
        margin: 0;
        line-height: 0;
    }
    .menu-link--label {
        margin-left: 0.4rem;
        padding: 0.1rem 0.6rem 0.3rem 0.6rem;
        font-size: 1.2rem;
        font-weight: 600;
        line-height: 1.44rem;
        border-radius: 0.2rem;
        text-transform: capitalize;
    }
    .menu-link--label.sale {
        color: #202020;
        background-color: #FFC633;
    }
    .menu-link--label.hit {
        color: #FFC633;
        background-color: #202020;
    }
    .menu-link--label.new {
        color: #fff;
        background-color: #EF1839;
    }
}

/* Desktop (Small screen less than 1600px) Only  */
@media (min-width: 1025px) and (max-width: 1599px) {
    #menu-popup menu { width: 144rem; }

    #menu-popup menu ul.level-one {
        position: absolute;
        top: 1.6rem;
        left: 6.4rem;
        width: 26.8rem;
        height: auto;
        gap: 0.8rem;
    }
    #menu-popup menu ul.level-one ul.level-two {
        position: absolute;
        top: 1.6rem;
        left: 27.6rem;
        width: 101.2rem;
    }
    #menu-popup menu ul.level-one li.level-one--item ul.level-two {
        row-gap: 3.2rem;
        column-gap: 1.2rem;
    }
    #menu-popup menu ul.level-one button {
        width: 24.4rem;
        height: 4.8rem;
        padding: 0.8rem;
        gap: 0.8rem;
        font-size: 1.4rem;
    }
    #menu-popup menu ul.level-one li.level-one--item ul.level-two .menu-brands--slider .menu-slider--wrapper .menu-slider--item {
        width: 10.8rem;
        height: 4.8rem;
        padding: 0.8rem 2.2rem;

    }
    #menu-popup menu ul.level-one li.level-one--item ul.level-two .menu-brands--slider .menu-slider--wrapper .menu-slider--item picture,
    #menu-popup menu ul.level-one li.level-one--item ul.level-two .menu-brands--slider .menu-slider--wrapper .menu-slider--item picture img {
        width: 6.4rem;
        height: 3.2rem;
    }
    #menu-popup menu ul.level-one li.level-one--item ul.level-two ul.level-three {
        width: 23.75rem;
    }
}

/* Desktop (All screens) + Tablet */
@media (min-width: 600px) {
}

/* Tablet Only */
@media (min-width: 600px) and (max-width: 1024px) {
}

/* Tablet + Mobile */
@media (max-width: 1289px) {
}

/* Mobile Only */
@media (max-width: 599px) {

}