.stacked-cards { position: relative; margin:0 auto }

.stacked-cards ul { position: relative; max-width: 100%; margin: 0 auto; padding-left: 0; }

.stacked-cards li { margin-top: 5px; cursor: pointer; border-radius: 8px; list-style: none; width: 85%; position: absolute; left: 50%; transition: 0.5s ease transform; }

.stacked-cards li .thum{opacity: 1;}

.stacked-cards li .play{z-index: 3333; top:190px}

.stacked-cards li.active{opacity: 1; z-index: 555 !important;}





.thum-cards{height:350px;}

.stacked-cards.thum-cards li:nth-child(2n){ transform: translate(-30%, 0%) scale(1) rotate(0deg) !important; width:80%; top:8px; opacity: 0.6; }

.stacked-cards.thum-cards li.active:nth-child(2n){ transform: translate(-47%, 0%) scale(1) rotate(0deg) !important; width:85%; top:0; opacity: 1; }

.stacked-cards.thum-cards li:nth-child(2n-1){ transform: translate(-64%, 0%) scale(1) rotate(0deg) !important; width: 80%; top: 8px; opacity: 0.6; }

.stacked-cards.thum-cards li.active:nth-child(2n-1){ transform: translate(-47%, 0%) scale(1) rotate(0deg) !important; width:85%; top:0; opacity: 1; }

.stacked-cards li:after { bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0;}

.stacked-cards li.active:after { display: none;}

.stacked-cards li img { position: relative; display: block; max-width: 100%; height: auto;}

.stacked-cards li.active { cursor: default; transition: 0.5s ease transform; }





.card2 {margin-bottom:15px; max-width: 600px; height:300px; overflow: hidden;}

.card2 li{width:60%;}

.card2 li::after{content: ''; background:black; opacity: 0.1; top:0; z-index: 55;}





/* 모바일 사이즈 */

@media (max-width: 768px){

    .stacked-cards li .play{z-index: 3333; top:61%}

    .stacked-cards.thum-cards li:nth-child(2n){ transform: translate(-36%, 0%) scale(1) rotate(0deg) !important; width:80%; top:8px; opacity: 0.6; }

    .stacked-cards.thum-cards li.active:nth-child(2n){ transform: translate(-47%, 0%) scale(1) rotate(0deg) !important; width:85%; top:0; opacity: 1; }

    .stacked-cards.thum-cards li:nth-child(2n-1){ transform: translate(-59%, 0%) scale(1) rotate(0deg) !important; width: 80%; top: 8px; opacity: 0.6; }

    .stacked-cards.thum-cards li.active:nth-child(2n-1){ transform: translate(-47%, 0%) scale(1) rotate(0deg) !important; width:85%; top:0; opacity: 1; }

    .thum-cards{margin-bottom:40px; height:250px;}



    /* .card2 li{width:42%}

    .card2 li.active{width:55% !important} */

    .card2{width:100%; overflow: hidden; height:auto}

}