body {
    position: relative;
}

/*  #BACKROUND  */

div#backRound {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: -2;
}
@keyframes dashRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.dashRound {
    position: fixed;
    width: 30vw;
    height: 30vw;
    border-radius: 50%;
    border: 1px dashed var(--sub-color);
    animation: dashRotate 360s linear infinite;
}
div#backRound > div:nth-child(1) {
    top: 6vw;
    left: -2vw;
}
div#backRound > div:nth-child(2) {
    top: 1vw;
    right: -3vw;
}
div#backRound > div:nth-child(3) {
    top: -10vw;
    right: -3vw;
}

/*  HOLOGRAM  */

div#hologram {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    position: absolute;
    top: calc(50% - 25vw);
    mix-blend-mode: lighten;
    z-index: 5;
    pointer-events: none;
}

.hologram-scroll::-webkit-scrollbar {
    display: none;
}

.hologram-scroll {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    white-space: nowrap;
    transition: transform 0.3s ease-in-out;
}

.hologram-item {
    position: relative;
    display: inline-block;
    height: 50vw;
    width: 55vw;
    transition: transform 0.3s ease-in-out;
}

div#hologram img {
    position: absolute;
    display: inline-block;
}

.holoBack {
    width: 9vw;
    top: 5vw;
    right: 3vw;
    rotate: -110deg;
    opacity: 0.6;
}
.holoLeft {
    width: 12vw;
    top: 16vw;
    left: -3vw;
}
.holoRight {
    width: 6vw;
    bottom: 12vw;
    right: 3vw;
    rotate: 90deg;
}

.hologram-item:nth-child(1) {
    margin-left: 26vw;
}
.hologram-item:nth-child(9) {
    margin-right: 30vw;
}

/*  SECTION  */

section {
    width: 100vw;
    display: flex;
    height: 50vw;
    justify-content: center;
    align-items: center;
    width: 100vw;
    position: absolute;
    top: calc(50% - 25vw);
    z-index: 1;
}

section ul::-webkit-scrollbar {
    display: none;
}

section ul {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    transition: transform 0.3s ease-in-out;
}
section ul li {
    display: inline-block;
    height: 30vw;
    width: 45vw;
    margin: 10vw 0 10vw 10vw;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    position: relative;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.5) 100%
    );
    padding: 2vw;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    cursor: pointer;
}

section ul li.selected .cardbg {
    background-size: cover;
    transform: scale(1.05);
}

section ul li.selected:hover {
}

section ul li:nth-child(1) {
    margin-left: 30vw;
}
section ul li:nth-child(2) {
}
section ul li:nth-child(3) {
}
section ul li:nth-child(4) {
}
section ul li:nth-child(5) {
}
section ul li:nth-child(6) {
}
section ul li:nth-child(7) {
}
section ul li:nth-child(8) {
}
section ul li:nth-child(9) {
    margin-right: 30vw;
}

.cardbg {
    background-image: url(../img/card-noisebg.jpg);
    background-size: cover;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all 0.3s ease-in-out;
}

.cardTxt,
.cardImg {
    width: 45%;
}

.cardTxt {
    white-space: wrap;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.cardTxt h2 {
    font-size: 2.8vw;
    font-weight: 100;
    line-height: 90%;
    opacity: 0.7;
}
.cardTxt h3 {
    font-size: 2.3vw;
    font-weight: 300;
}
.cardTxt p {
    font-size: 1vw;
    font-weight: 100;
    margin-top: 1.5vw;
    margin-right: 2vw;
}

.cardTxtBtm {
}

.cardImg {
    float: right;
    margin-top: 5vw;
}

.glow {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;

    background-image: radial-gradient(circle at 50% -20%, #ffffff22, #0000000f);
    transition: background-image 0.3s ease-in-out; /* 부드러운 변환 */
    pointer-events: none; /* glow는 클릭에 영향을 미치지 않도록 */
    z-index: 1; /* 다른 요소 위에 배치 */
}

@media (max-width: 780px) {
    /*  HOLOGRAM  */

    body{
        overflow-y:scroll;
    }
    div#backRound{
        position: fixed;
        width: 100vw;
        height: 100vh;
        z-index: -2;
    }

    div#hologram {
        top: 22vw;
    }

    .hologram-scroll::-webkit-scrollbar {
        display: none;
    }

    .hologram-scroll {
        overflow-y: auto; /* 세로 스크롤 활성화 */
        white-space: normal; /* 아이템들이 세로로 쌓이도록 */
    }

    .hologram-item {
        height: 99.5vw;
        width: 100vw;
    }

    div#hologram img {
        position: absolute;
        display: inline-block;
    }

    .holoBack {
        width: 20vw;
        top: 0vw;
        right: 10vw;
    }
    .holoLeft {
        width: 26vw;
        top: 46vw;
        left: 6vw;
    }
    .holoRight {
        width: 14vw;
        bottom: 6vw;
        right: 24vw;
    }

    .hologram-item:nth-child(1) {
        margin-left: 0vw;
    }
    .hologram-item:nth-child(9) {
        margin-right: 30vw;
    }

    section {
        position: unset;
        left: 0;
        height: auto;
        top: 0;
        padding-bottom: 10vw;
    }
    section ul li {
        display: block;
        margin-left: 0;
        height: 90vw;
        width: 70vw;
        margin-top: 10vw;
        padding: 5vw 4vw;
        border-radius: 3vw;
        margin-left: 15vw;
    }
    section ul li:nth-child(1) {
        margin-left: 15vw;
        margin-top: 22vw;
    }

    section ul li::before {
        opacity: 0;
    }

    .cardbg {
        height: 100%;
        width: 100%;
    }

    .cardTxt {
        width: 100%;
        float: none;
        height: auto;
    }
    .cardTxtBtm {
        margin-top: 3vw;
    }
    .cardTxt h2 {
        font-size: 5vw;
        text-align: center;
    }
    .cardTxt h3 {
        font-size: 6vw;
        text-align: center;
    }
    .cardTxt p {
        font-size: 2.1vw;
        margin-top: 1vw;
        margin-right: 0;
    }
    .cardImg {
        width: 70%;
        margin: auto;
        float: none;
    }
}

@media (max-width: 480px) {
    .cardWrap li {
        display: flex !important;
        flex-flow: column nowrap !important;
        justify-content: space-between !important;
        height: 70vh !important;
        padding: 5vw 4vw 0 4vw;
    }
    .cardWrap li .cardImg {
        margin: 0 auto;
        width: 50%;
    }
    .cardWrap li .cardImg img {
        display: block;
    }
    .cardWrap li .cardTxtBtm p {
        font-size: 0.8rem;
    }
    .cardTxt h2 {
        font-size: 5.8vw;
    }
    .cardTxt h3 {
        font-size: 5vw;
        margin-top: 7vw;
    }
}