@charset "utf-8";

/****************************************************************************************************************************************
카지노 시작
*****************************************************************************************************************************************/
ul.casino-list {position: relative; margin: 0; padding:0; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap:10px;}
ul.casino-list > li {position: relative; margin: 0; padding:0; width: calc(100% / 6 - 10px);}
ul.casino-list > li > p {margin:0 auto; padding:8px 5px; width: 100%; text-align: center; font-size: 13px;}

.list-wrap {position: relative; margin: 0; padding:0; width: 100%; background: #000; overflow:hidden; cursor: pointer;}
.list-wrap::before {content: ""; position: absolute; top: 0; left: -200%; width: 100%; height: 150%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4),transparent);transform: skewX(-20deg);}

.playGo-btn {opacity: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 10%; z-index: 5; margin: auto; width: 120px; height: 40px; font-weight: 600; color: #000; background: linear-gradient(180deg, #fcedda, #c7dbb6); border-radius: 20px; transition: 0.3s;}

@media (hover: hover) and (pointer: fine) {
    .list-wrap:hover > img {opacity: 0.8;}
    .list-wrap:hover::before {animation: shine 1s ease 0s;}
    .list-wrap:hover:hover .playGo-btn {opacity: 1;}
}


/****************************************************************************************************************************************
슬롯게임 팝업 시작
*****************************************************************************************************************************************/
.slotGame-pop {display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; width: 100%; height: 100%; background: rgba(0,0,0,0.6);}
.slotGame-inner {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; padding:0; width: 900px; background: #fff; box-shadow: 1px 1px 10px rgb(0, 0, 0, 0.7); }

.pop-tit {position:relative; margin: 0 auto; padding:0 15px; width: 100%; height:80px; background: #fef1de url('../img/slotPopup-bg.png') center right no-repeat; background-size: 400px;}
.pop-tit > h2 {position:relative; margin: 0; padding:0; width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: center;}
.pop-tit > h2 > img {height: 50px; max-width: 150px;}
.pop-tit > h2 > span {margin-left: 20px; padding-left: 20px; font-size: 12px; font-weight: 800; border-left: 1px solid #121212;}

.slotGame-close {position: absolute; top:20px; right:20px; z-index: 2; width: 35px; cursor: pointer;}

.game-filter {position: relative; margin:0; padding: 15px 15px; width: 100%; height: min(600px, calc(100vh - 200px)); background: #fff; overflow-y: auto;}

ul.filter-list {position: relative; margin: 0; padding:0; width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; gap:10px;}
ul.filter-list > li {position: relative; margin: 0; padding:0; width: calc(100% / 7 - 10px);}
ul.filter-list > li > p {margin:0 auto; padding:8px 5px; width: 100%; text-align: center; font-size: 13px; font-weight: 500;}

.filter-wrap {position: relative; margin: 0; padding:0; width: 100%; background: #000; border: 1px solid #999; border-radius: 8px; overflow:hidden; cursor: pointer;}
.filter-wrap > img {transition: 0.3s;}

@media (hover: hover) and (pointer: fine) {
    .slotGame-close:hover {filter: brightness(120%);}
    .filter-wrap:hover > img {transform: scale(1.3); opacity: 0.6;}
}

/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:1600px) {  
    ul.casino-list > li {width: calc(100% / 4 - 10px);}
}/* 미디어쿼리문 끝 */

@media (max-width:1280px) {  
    ul.casino-list > li {width: calc(100% / 4 - 10px);}
}/* 미디어쿼리문 끝 */

@media (max-width:992px) {  
    ul.casino-list {padding:10px 5px;}
}/* 미디어쿼리문 끝 */

@media (max-width:930px) {  
    .pop-tit {background-image: none;}
    .slotGame-inner {width: 96%;}
    ul.filter-list > li {width: calc(100% / 5 - 10px);}
}/* 미디어쿼리문 끝 */

@media (max-width:767px) {  
    ul.casino-list > li {width: calc(100% / 3 - 10px);}
    ul.filter-list > li {width: calc(100% / 4 - 10px);}
    ul.filter-list > li > p {font-size:12px; letter-spacing: -1px;}
}/* 미디어쿼리문 끝 */

@media (max-width:639px) {  
    ul.casino-list > li {width: calc(100% / 2 - 10px);}

    .pop-tit {height: 60px;}
    .pop-tit > h2 > img {width: auto; height: 40px; max-width: 120px;}
    .slotGame-close {top:12px; right:5px;}
    .game-filter {padding:15px 10px; height: 400px;}

    ul.filter-list {gap:8px; justify-content: center;}
    ul.filter-list > li {width: calc(100% / 3 - 8px);}
}/* 미디어쿼리문 끝 */