.sp-text {
    position: relative;
}

.sp-why {
    position: relative;
    position: absolute;
    top: -60px; left: 50%;
    transform: translate(-50%, 0);
    padding: 15px 20px;
    color: #666;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 10px;
    border: 1px solid #ddd;
    background-color: #f2f2f2;
    animation: updown .5s infinite;
}

.sp-why::after {
    content: '';
    position: absolute;
    bottom: -7px; left: 50%;
    transform: translate(-50%, 0) rotate(45deg);
    width: 12px;
    height: 12px;
    background-color: #f2f2f2;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

@keyframes updown {
    50% {
        top: -65px;
    }
}


/*==================================================*/
@media (max-width: 768px) {
    .sub-promotion {
        height: 400px;
    }
}


@media (max-width: 550px) {
    .sp-why {
        top: -50px;
        font-size: 12px;
        padding: 10px 15px;
    }

    @keyframes updown {
        50% {
            top: -55px;
        }
    }
}


@media (max-width: 450px) {
    .sub-promotion {
        height: 330px;
    }
}