@charset "utf-8";


/****************************************************************************************************************************************
카지노 게임리스트 시작
*****************************************************************************************************************************************/
.list-game {position: relative; margin:0 auto 70px auto; padding:0; width: 100%; display: flex; flex-wrap: wrap; gap:15px; justify-content: center;}
.list-item {position:relative; margin:0; padding:0; width: calc(100% / 6 - 15px); text-align: center; border-radius: 10px; overflow:hidden; cursor: pointer;}
.list-item > img {width: 100%; height: 250px; text-align: center;
    transition: transform .7s;
    transform: rotateY(0deg);
    transform-style: preserve-3d; 
}

.list-over {position:absolute; top:0; left:0; transform:translateZ(60px) rotateY(180deg);
    margin:35px auto 0 auto; width: 100%; height: 100%; transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d; backface-visibility: hidden;
}
.list-over > img {width: 100px; filter: drop-shadow(2px 2px 2px #000000);}
.list-over > p {font-size: 12px; font-weight: 700; color:#fff; text-shadow: 1px 0px 2px #000;}
.list-over > button {margin:10px auto 0 auto; padding:10px 20px; display:flex; justify-content: center; align-items: center; font-size:16px; font-weight: 500; color:#7a25ff; background:#fff; border:1px #7a25ff solid; border-radius: 5px; box-shadow: 0px 15px 10px 5px rgba(0, 0, 0, .5);}

.list-check {position: absolute; top:0; left:0; z-index: 1; width: 100%; height: 100%; display: flex; flex-direction: column; align-content: center; justify-content: center;  background:rgba(0,0,0,0.7);}
.list-check > img {margin:0 auto; width: 94px; border-radius: 10px; overflow:hidden;}
.list-check > p {margin-top:5px; font-size:16px; font-weight: 600; color:#fff;}


.list-item.active > img {filter: blur(5px); transform: rotateY(-180deg); box-shadow: 0 0 5px 5px #e7f3ff;}
.list-item.active .list-over {transform: rotateY(0deg);}

@media (hover: hover) and (pointer: fine) {
    .list-item:hover > img {filter: blur(5px); transform: rotateY(-180deg); box-shadow: 0 0 5px 5px #e7f3ff;}
    .list-item:hover .list-over {transform: rotateY(0deg);}

    .list-over > button:hover {color:#fff; background: #7a25ff;}

    .hover-none:hover {transform: rotateY(0deg) !important;}
    .hover-none:hover > img {filter:unset !important; transform:rotateY(0deg) !important;}
}


/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:1200px) {
    .list-item {width: calc(100% / 4 - 20px);}
    .list-item > img {height:200px;}
}/* 미디어쿼리문 끝 */

@media (max-width:992px) {
    .list-over > img {width: 80px;}
    .list-over > button {padding: 8px 20px; font-size: 14px;}
}/* 미디어쿼리문 끝 */

@media (max-width:800px) {
    .list-item {width: calc(100% / 3 - 20px);}
}/* 미디어쿼리문 끝 */


@media (max-width:639px) {
    .list-game {gap:10px;}
    .list-item {width: calc(100% / 2 - 10px);}

    .list-over > img {width: 60px;}
    .list-over > button {padding: 5px 20px; font-size: 14px;}
}/* 미디어쿼리문 끝 */