.hero {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img_wrap {
    position: relative;
    width: 416px;
    height: auto;
}

.hero_coming_soon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.img1 {
    width: 416px;
    animation: crossFade1 6s ease-in-out infinite;
}

.img2 {
    width: 235px;
    animation: crossFade2 6s ease-in-out infinite;
}

@keyframes crossFade1 {
    0% { opacity: 0; }
    8% { opacity: 1; }
    42% { opacity: 1; }
    47% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes crossFade2 {
    0%, 47% { opacity: 0; }
    52%, 92% { opacity: 1; }
    100% { opacity: 0; }
}

@media (max-width: 600px) {
    .img1 {
        width: 218px;
    }
    .img2 {
        width: 123px; /* 416:218 비율로 235에 적용한 값, 필요하면 숫자 조절해줘 */
    }
}