@media screen and (max-width: 1024px) {
    .treasure-list {
        position: relative;
        width: 100%;
        overflow: hidden;
        padding: 1.0416666667vw 0;
    }

        .treasure-list .list-wrapper {
            display: flex;
            transition: transform .5s ease;
        }

        .treasure-list .item {
            min-width: 100%;
            display: block;
            filter: grayscale(1);
        }

            .treasure-list .item.active {
                filter: grayscale(0);
            }

        .treasure-list .btn-prev,
        .treasure-list .btn-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 15vw;
            height: 10vw;
            border: none;
            background: none;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
            z-index: 2;
            animation: shine-light .5s alternate infinite;
        }

        .treasure-list .btn-prev {
            background-image: url(/Conhan/assets/arrow-left.png);
            left: 9vw;
        }

        .treasure-list .btn-next {
            background-image: url(/Conhan/assets/arrow-right.png);
            right: 9vw;
        }
        .treasure-list .list-wrapper {
            display: flex;
            transition: transform 0.5s ease;
            width: 100%;
        }

        .treasure-list .item {
            min-width: 100%;
            flex-shrink: 0;
        }
}


@keyframes shine-light {
    0% {
        filter: drop-shadow(0px 2px 6px #fff)
    }

    to {
        filter: drop-shadow(0px 2px 6px rgba(4,122,177,.8))
    }
}