@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: #ffffff; background:var(--neon-orange); 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: #D4AF37;
        text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff, 0 0 50px #ffffff;
        background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
        border: 1px solid #a5683f;
        filter: brightness(1);
    }
}

/* 활성화 상태 - 주황 글자에 흰색 네온 효과 */
ul.casino-list > li.active > .cssino-name,
.cssino-name.active {
    color: #ff7a21 !important;
    text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff, 0 0 50px #ffffff;
    background: #392517;
    border: 1px solid #a5683f;
}


/****************************************************************************************************************************************
slot-search 시작
*****************************************************************************************************************************************/
.slot-search {position:relative; margin: 20px auto; padding: 10px 30px; width: 100%;}
.search-box {
    margin:0; 
    padding:0 5px 0 0; 
    width: 300px; 
    height: 44px; 
    display: flex; 
    align-items: center; 
    background: var(--neo-bg, #ffffff); 
    border-radius: 12px; 
    overflow: hidden;
}
.search-box > input {padding:0 10px; width: 100%; height: 100%; font-size: 14px; font-weight: 500; color: #333; background: #f5f5f5;}
.search-box > input:focus {outline: none;}
.search-box > input::placeholder {color:#757575;}
.search-box > img {width: 27px; cursor: pointer; transition: all .3s;padding:3px;}

/****************************************************************************************************************************************
slot-filter 시작
*****************************************************************************************************************************************/
.slot-filter {position:relative; margin: 20px auto; padding: 20px 30px 30px 30px; width: 100%;background:black}
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 #ff7a21;}
ul.filter-list > li.active > .filter-tit {color:var(--neon-orange);}

/****************************************************************************************************************************************
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: #666; background: rgba(255, 255, 255, 0.9);
    -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: #333;}
}

/****************************************************************************************************************************************
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: calc(var(--vh, 1vh) * 100); flex-wrap: wrap; justify-content: center; align-items: center;  background: rgba(255,255,255,0.95); overflow-y: auto; -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */}
.slot-popup.active {display: flex;}
.slotPopup-inner {
    position: relative; 
    margin:0 auto; 
    padding: 20px 20px; 
    width: 1200px; 
    background: var(--neo-bg, #ffffff); 
    border: 1px solid var(--neo-border, rgba(0,0,0,.10)); 
    border-radius: 16px; 
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

.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; } 
    .search-box {width:100%; 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: #3d2e17; 
         border: 1px solid #ff7a21; 
         box-shadow: inset 0 0 80px rgba(255, 122, 33, .2); 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: #ffffff; background: #050505; border-top: 1px solid #ff7a21;}

    /* 슬롯 팝업 */
    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 rgba(254, 253, 253, 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);}
}/* 미디어쿼리문 끝 */