/* 1. 흰색 원 (보여지는 창문) */
.icon-window-50 {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: white;
    position: relative;
    /* 자식(이미지)들의 기준점 */
    flex-shrink: 0;
    overflow: hidden;
    transition: background-color 0.3s;
}

/* 2. 이미지 공통 스타일 (겹치기) */
.icon-window-50 img {
    width: 45%;
    height: auto;
    position: absolute;
    /* 4장을 한 자리에 겹침 */
    top: 0;
    left: 0;
    opacity: 0;
    /* 기본적으로 안 보이게 설정 */

    /* 애니메이션: 이름 | 총시간(4장x3초=12초) | 가속도 | 무한 */
    animation: fade-cycle 4s ease-in-out infinite;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 3. 각 이미지별 등장 시간차(Delay) 설정 */
/* 총 12초 주기를 4등분하여 3초씩 늦게 시작 */
.icon-window-50 img:nth-child(1) {
    animation-delay: 0s;
}

.icon-window-50 img:nth-child(2) {
    animation-delay: 1s;
}

.icon-window-50 img:nth-child(3) {
    animation-delay: 2s;
}

.icon-window-50 img:nth-child(4) {
    animation-delay: 3s;
}

/* 4. 페이드 애니메이션 로직 */
@keyframes fade-cycle {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    /* 빠르게 등장 (Fade In) */
    25% {
        opacity: 1;
    }

    /* 1/4 지점까지 유지 (Hold) */
    30% {
        opacity: 0;
    }

    /* 서서히 사라짐 (Fade Out) */
    100% {
        opacity: 0;
    }

    /* 나머지 시간 동안 숨김 */
}

@media screen and (max-width: 1279px) {
    header .inn .btn-text {
        font-size: 16px;
    }

    header .inn .icon-window-50 {
        width: 35px;
        height: 35px;
    }
}