@charset "UTF-8";

.main-slider { overflow: hidden; }

.main-slider--wrapper {
    width: 1000rem;
    transition: all 0.3s ease;
}

.main-slider--item img { border-radius: 1.6rem; }

.main-slider--nav { width: 100%; }

.main-slider--control {
    border-radius: 0.4rem;
    background-color: #E3E3E8;
    box-shadow: 0 0.1rem 0.4rem 0 #C0C0C066;
    transition: all 0.3s ease;
    cursor: pointer;
}

.playing { background-image: url("../img/svg/black/pause.svg"); }
.playing:hover { background-image: url("../img/svg/white/pause.svg"); }

.stopped { background-image: url("../img/svg/black/play.svg"); }
.stopped:hover { background-image: url("../img/svg/white/play.svg"); }

.main-slider--dot {
    border-radius: 0.2rem;
    background-color: #E3E3E8;
    overflow: hidden;
    transition: all 0s linear;
    cursor: pointer;
}

.main-slider--dot .dot-load {
    width: 0%;
    height: 100%;
    background-color: #000000;
}

.main-slider--dot:hover, .main-slider--dot.active {
    background-color: #666666;
    transition: all 0.3s ease;
}

.main-slider--dot.active .dot-load {
    width: 100%;
    transition: all 5s linear;
}

.main-slider--dot.dot-load .dot-load {
    width: 100%;
}

.product-day {
    border-radius: 1.6rem;
    background-color: #fff;
}
.main-front--info { width: 100%; }

.main-label--icon { object-fit: contain; }

.product-day .product-tablet { display: none; }

/* Desktop (Big screen less than 3k) Only */
@media (min-width: 1600px) {
    .main-front {
        margin-top: 3.2rem;
        padding: 3.2rem 0 8rem 0;
    }

    .main-front .wrapper { gap: 2.4rem; }

    .main-slider {
        width: 116rem;
        gap: 2.4rem;
    }

    .main-slider--item { width: 116rem; }

    .main-slider--nav { gap: 1.6rem; }

    .main-slider--control {
        width: 3.2rem;
        height: 3.2rem;
        padding: 0.4rem;
        margin-right: 0.5rem;
        background-size: 4.2rem;
    }

    .main-slider--dot {
        width: 5.6rem;
        height: 0.4rem;
    }

    .product-day {
        width: 33.6rem;
        height: 54rem;
        padding: 2.4rem;
        gap: 1.6rem;
    }
    .main-front--info { margin-top: 5.6rem; }

    .main-info--label {
        max-width: 33.2rem;
        gap: 2.4rem;
    }

    .main-label--icon { width: 5rem; }
}


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

/* Desktop (Small screen less than 1600px) Only  */
@media (min-width: 1025px) and (max-width: 1599px) {
    .main-front {
        padding: 3.2rem 0 5.6rem 0;
    }

    .main-front .wrapper { gap: 1.6rem; }

    .main-slider {
        width: 97.1rem;
        gap: 2.4rem;
    }

    .main-slider--item { width: 97.1rem; }

    .main-slider--nav { gap: 1.6rem; }

    .main-slider--control {
        width: 3.2rem;
        height: 3.2rem;
        padding: 0.4rem;
        margin-right: 0.2rem;
    }

    .main-slider--dot {
        width: 5.6rem;
        height: 0.4rem;
    }

    .product-day {
        width: 29.1rem;
        height: 53.2rem;
        padding: 2.4rem;
        gap: 1.6rem;
    }

    .main-front--info { margin-top: 5.6rem; }

    .main-info--label {
        max-width: 29.8rem;
        gap: 1.6rem;
    }

    .main-label--icon { width: 5rem; }
}

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

/* Tablet Only */
@media (min-width: 600px) and (max-width: 1024px) {
    .main-front {
        padding: 3.2rem 0 6.4rem 0;
    }

    .main-front .wrapper { gap: 3.2rem; }

    .main-slider {
        width: 72rem;
        gap: 1.6rem;
    }

    .main-slider--item { width: 72rem; }

    .main-slider--nav { gap: 1.6rem; }

    .main-slider--control {
        width: 3.2rem;
        height: 3.2rem;
        padding: 0.4rem;
        margin-right: 0.2rem;
    }

    .main-slider--dot {
        width: 5.6rem;
        height: 0.4rem;
    }

    .product-day {
        width: 72rem;
        height: 30.7rem;
        padding: 2.4rem 2.5rem;
        gap: 1.6rem;
    }

    .main-front--info { display: none; }


    .product-day .product { display: none; }


    .product-day .product-tablet {
        display: block;
        width: 67rem;
    }
}

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

/* Mobile Only */
@media (max-width: 599px) {
    .main-front {
        padding: 2.4rem 0 4.8rem 0;
    }

    .main-front .wrapper { gap: 1.6rem; }

    .main-slider {
        width: 34.3rem;
        gap: 2.4rem;
    }

    .main-slider--item { width: 34.3rem; }

    .main-slider--nav { gap: 0.8rem; }

    .main-slider--control {
        width: 3.2rem;
        height: 3.2rem;
        padding: 0.4rem;
        margin-right: 0.2rem;
    }

    .main-slider--dot {
        width: 4.8rem;
        height: 0.4rem;
    }

    .product-day {
        width: 34.3rem;
        height: 21.8rem;
        padding: 1.6rem;
        gap: 0;
    }

    .main-front--info { display: none; }

    .product-day .product { width: 32.3rem; }
    .product-day .product .product-info { width: 20.5rem; }
}