/* STARTER */
.starter-box {
    position: absolute;

    top: 1150px;
    left: 50%;

    transform: translateX(-50%);
}

.starter-img {
    width: 1555px;
    display: block;
}

/* BUTTON */
.starter-btn {
    position: absolute;
    transition: 0.2s ease;
    z-index: 5;
}

.starter-btn img {
    display: block;
    width: 119px;
    height: 32px;
}

/* ITEM NEW */
.itemnew-btn {
    top: -10px;
    left: 370px;
}

/* ITEM PROMOTION */
.promotion-btn {
    top: -10px;
    left: 500px;
}

.starter-btn:hover,
.starter-btn.active {
    animation: starterShake 0.5s ease infinite;
}

@keyframes starterShake {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(2deg);
    }

    75% {
        transform: rotate(-2deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* SLIDE BOX */
.starter-slide-box {
    position: absolute;

    top: 65px;
    left: 0px;

    width: 1555px;
    height: 200px;

    overflow: hidden;
    z-index: 4;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.starter-slide-box.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* TRACK */
.starter-slide-track {
    display: flex;
    width: max-content;
    height: 100%;

    animation: starterSlideMove 18s linear infinite;
    will-change: transform;
}

.starter-slide-track img {
    width: 342px;
    height: 148px;

    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

@keyframes starterSlideMove {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-1710px);
    }
}