@charset "utf-8";

/****************************************************************************************************************************************
casino-tab 시작
*****************************************************************************************************************************************/
ul.mo-balanceInfo {display: none;}

/****************************************************************************************************************************************
카지노 슬라이드
*****************************************************************************************************************************************/
.casino {position: relative; height: 470px;}
.swiper-container {width: 100%;}
.casino .swiper-slide {height:415px;}
.casino-slide-1 {background:url('../../Img/casino/casino_banner_1.jpg?11') center no-repeat; background-size: cover;}
.casino-slide-2 {background:url('../../Img/casino/casino_banner_2.jpg?11') center no-repeat; background-size: cover;}
.casino-slide-3 {background:url('../../Img/casino/casino_banner_3.jpg?11') center no-repeat; background-size: cover;}

.slot-slide-1 {background:url('../../Img/slot/slot_banner_1.jpg') center no-repeat; background-size: cover;}
.slot-slide-2 {background:url('../../Img/slot/slot_banner_2.jpg') center no-repeat; background-size: cover;}
.slot-slide-3 {background:url('../../Img/slot/slot_banner_3.jpg') center no-repeat; background-size: cover;}

/****************************************************************************************************************************************
casino-game 시작
*****************************************************************************************************************************************/
.casino-game {position: relative; margin:30px auto; padding:0 20px; width: 100%;}
ul.casino-list {position: relative; margin:0 auto; padding:0; width: 100%; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(427px, 1fr)); justify-content: center;}
ul.casino-list > li {position: relative; width: 100%; cursor: pointer;}
.casino-item {position: relative; width: 100%; min-width: 450px; border: 1px solid #a1a1a1; filter: brightness(.6); transition: all .3s; overflow: hidden;}
.casino-item > .casino-bg {position: relative; width: 100%; transition: all .4s;}
.casino-item > .casino-logo {position:absolute; left:20px; top:50%; transform: translateY(-50%); max-width: 100%; transition: all .3s;}
.cssino-name {margin:0 auto; padding:10px 10px; width: 100%; text-align: center; font-weight: 600; color: #d7d7d7; background: #050505; border: 1px solid rgb(161, 161, 161, 0.6); border-top: none !important; transition: all .3s;}

@media (hover: hover) and (pointer: fine) {
    ul.casino-list > li:hover > .casino-item  {border: 1px solid #a5683f; filter: brightness(1);}
    ul.casino-list > li:hover > .casino-item > .casino-bg {transform: scale(1.1);}
    ul.casino-list > li:hover > .casino-item > .casino-logo {transform: scale(0.8);}
    ul.casino-list > li:hover > .cssino-name {color: #fff; background:#392517; border: 1px solid #a5683f; filter: brightness(1);}
}


/****************************************************************************************************************************************
slot-search 시작
*****************************************************************************************************************************************/
.slot-search {position:relative; margin: 20px auto; padding: 10px 30px; width: 100%;}
.search-box {margin:0; padding:0 5px 0 0; width: 280px; height: 44px; display: flex; align-items: center; background: #0b0e18; border-radius: 5px; box-shadow: 0 0 8px 5px #ff9249; overflow: hidden;}
.search-box > input {padding:0 10px; width: 100%; height: 100%; font-size: 14px; font-weight: 500; color: #fff; background: #000;}
.search-box > input:focus {outline: none;}
.search-box > input::placeholder {color:#757575;}
.search-box > img {width: 27px; cursor: pointer; transition: all .3s;}

/****************************************************************************************************************************************
slot-filter 시작
*****************************************************************************************************************************************/
.slot-filter {position:relative; margin: 20px auto; padding: 20px 30px 30px 30px; width: 100%;}
ul.filter-list {position:relative; margin:0; padding:0; gap: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));}
ul.filter-list > li {padding:0; display: flex; align-items: center; gap: 10px; cursor: pointer;}
ul.filter-list > li > .selector {width: 20px; height: 20px; flex: 0 0 20px; background: #45515d; border-top: 2px solid #6a7680; border-radius: 50%; transition: all .3s ease-in-out;}
ul.filter-list > li > .filter-tit {font-size:14px; color: #b5aaaa; text-transform: uppercase; transition: all .3s;}
ul.filter-list > li.active > .selector {background: #fff; border: none; box-shadow: 0 0 8px 5px #ff9249;}
ul.filter-list > li.active > .filter-tit {color: #ff8e43;}

/****************************************************************************************************************************************
SlotGamesList시작
*****************************************************************************************************************************************/
.SlotGamesList {position: relative; margin:20px auto 30px auto; padding:0 30px; width: 100%;}
.slotList-con {display:none; position: relative; margin:0 auto; padding:0;}
.slotList-con.active {display: block;}

ul.slot-list {position: relative; display: grid; grid-template-columns: 12% 12% 12% 12% 12% 12% 12% 12%; gap: 10px; place-items: center;}
ul.slot-list > li {position: relative; z-index: 1; width: 100%; filter: brightness(0.6); transition: all 0.4s; cursor: pointer; overflow: hidden;}
ul.slot-list > li > img {width: 100%; transition: all 0.4s;}
ul.slot-list > li > .slot-tit {position: absolute; bottom: 0; left: 0; right: 0; z-index: 20; margin: 0 auto; padding: 10px 0; text-align: center; font-size: 12px; font-weight: 500; color: #aaa; background: rgba(8, 9, 14, 0.467);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px); 
}

.mo-slotGameList {display: none;}

@media (hover: hover) and (pointer: fine) {
    ul.slot-list > li:hover {transform: scale(1.2); z-index: 10; transition: all .1s; box-shadow: 0 0 50px #000; filter: brightness(1);}
    ul.slot-list > li:hover > .slot-tit {font-size: 14px; color: #fff;}
}

/****************************************************************************************************************************************
slot popup
*****************************************************************************************************************************************/
.slot-popup {display: none; position: fixed; top: 0; bottom:0; left:0; right:0; z-index: 10000; padding:20px 20px; width: 100%; height: 100%; flex-wrap: wrap; justify-content: center; align-items: center;  background: rgba(0,0,0,0.6); overflow-y: auto;}
.slot-popup.active {display: flex;}
.slotPopup-inner {position: relative; margin:0 auto; padding: 20px 20px; width: 1200px; background: #222a33; border: 1px #414f5f solid; border-radius: 6px;}

.slot-itemTit {position: relative; margin:0; padding:0 0 20px 0; width: 100%; display: flex; justify-content: space-between; align-items: center;}
.slot-itemTit > span {display:inline-block; text-align: left; font-size: 20px;}
.slotPopup-close {position: relative; margin:0; padding:0; text-align: right;}
.slotPopup-close > svg {font-size: 30px; color: #a2c1e5; cursor: pointer;}

ul.slot-tiem {position: relative; margin:0 auto; padding:0; width: 100%; height: 595px; display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-start; overflow-y: auto;}
ul.slot-tiem > li {position: relative; margin:0; padding:0; width: calc(100% / 6 - 5px); border: 1px #445466 solid; cursor: pointer;}
ul.slot-tiem > li > .slot-itemTit {position: relative; margin:0; padding:5px 5px; width: 100%; text-align: center; font-size: 12px; font-weight: 600; background: #354150;}

@media (hover: hover) and (pointer: fine) {
    .slotPopup-close > svg :hover {filter: brightness(120%);}
    ul.slot-tiem > li:hover {border: 1px #8ba8c8 solid;}
    ul.slot-tiem > li:hover > .slot-itemTit {color:#000; background: #69809b; transition: 0.3s;}
}

/****************************************************************************************************************************************
미디어쿼리문
*****************************************************************************************************************************************/
@media (max-width: 1230px) { 
    .slotPopup-inner {width: 100%;}
}/* 미디어쿼리문 끝 */

@media (max-width: 800px) { 
    /* 카지노 슬라이드 */
    .casino {height: 230px;}
    .casino .swiper-slide {height: 200px;}

    .casino .swiper-container-horizontal>.swiper-pagination-bullets, 
    .casino .swiper-pagination-custom, 
    .casino .swiper-pagination-fraction {bottom: 0 !important;}
    .casino .swiper-pagination-bullet {margin:0 3px !important; width: 12px; height: 12px;}
    .casino .swiper-pagination-bullet-active {width: 23px; height: 12px;}

    .casino-game {margin:10px 0 0 0; padding:0 5px;}
    ul.casino-list {display: flex; flex-wrap: wrap; gap:5px;}
    ul.casino-list > li {width: calc(100% / 3 - 5px);}
    .casino-item {min-width: unset; filter: brightness(.7);}
    .casino-item > .casino-logo {top:unset; transform:unset; bottom: 10px; left:10px; max-width: unset; width: 50%;}
    .cssino-name {padding:5px 5px;}

    /* 슬롯 */
    .SlotGamesList,
    .slot-filter {display: none;}

    .slot-search {margin: 0 auto; padding:5px 5px; background: #0b0e18;} 
    .search-box {width:100%; background: #0e0c1a; border: 1px #663312 solid; box-shadow: none;} 
    .search-box > img {width: 20px;}

    .mo-slotGameList {display:block; position: relative; margin:10px auto; padding:0 10px; width: 100%;}
    ul.slot-choice {position: relative; margin:0 auto; padding:0; width: 100%; display: flex; gap:10px; flex-wrap: wrap; justify-content: center;}
    ul.slot-choice > li {position: relative; padding-top:10px; width: calc(100% / 3 - 10px); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; background: #31150d; border: 1px solid #a46520; box-shadow: inset 0 0 80px rgba(0, 0, 0, .8); cursor: pointer;}
    ul.slot-choice > li > img {max-width: 100px; max-height: 60px;}
    ul.slot-choice > li > .slot-tit {margin:8px auto 0 auto; padding: 8px 0; width: 100%; text-align: center; font-size: 12px; font-weight: 500; color: #fff; background: #3b1a10; border-top: 1px solid #533310;}

    /* 슬롯 팝업 */
    ul.slot-tiem > li {width: calc(100% / 4 - 5px);}

}/* 미디어쿼리문 끝 */

@media (max-width: 639px) {    
    ul.casino-list > li {width: calc(100% / 2 - 5px);}
    .casino-item {filter: brightness(0.8);}
    .casino-item > .casino-logo {width: 45%;}
    .cssino-name {border: 1px solid rgb(161, 161, 161, 0.8);}

    ul.slot-choice > li {width: calc(100% / 2 - 5px);}

    .slot-filter {padding:0 10px;}
    ul.slot-list {justify-content:center;}
    ul.slot-list > li {width: calc(100% / 2 - 10px);}

    /* 슬롯 팝업 */
    .slot-popup {padding:10px 10px;}
    .slotPopup-inner {padding:10px  10px;}

    ul.slot-tiem {height: 450px;}
    ul.slot-tiem > li {width: calc(100% / 2 - 5px);}
}/* 미디어쿼리문 끝 */