@charset "utf-8";

html {height: 100%;overflow-x: hidden;overflow-y: scroll!important}
body {height: 100%;padding-right: 0!important;text-align: center;background: #252634; color: #cfcdcd;font-family: noto sans kr,sans-serif;
    background: url(/assets/images/bg/bg.png);
    background-repeat: repeat;overflow: hidden;
}

button:focus {
  outline: none; /* 포커스 시 테두리 제거 */
}

.wb{max-width:1440px;margin: 0 auto;}
.trans {transition: all .3s ease;cursor: pointer;}

.mt10{margin-top:10px;}

label.error{color: #de2222;margin: 0px 0 15px 0;}

.pc{display:block;}
.mobile{display:none;}


@media(max-width: 1024px) {
	.pc{display:none;}
    .mobile{display:block;}
}
.nodata{text-align:center;font-size:17px;padding:50px 0;}

.btn-wrap{margin-top:15px;text-align:center;width:100%;}
.btn{position: relative;display: inline-block;background: #23262d;color: #cfcdcd;font-weight: 700;margin: 0px;padding: 5px 15px;
    border: 2px solid #2a2b37;border-radius: 3px;box-shadow: rgb(0 0 0 / 35%) 0px 3px 7px 0px;text-align: center;transition: all .3s ease;}
.btn i{color: #a263e1;padding-right: 3px;}
.btn:hover{color:#fff;}
.btn:hover i{color:#e9a401}
.btn-wrap .btn{margin:0 5px;}

/*.wrap::before{content:'';height: 8px;display: block;background: linear-gradient(to right, #b5dbfe, #fed9fe, #568abe);}*/
.wrap {display: flex;flex-direction: column;width:100%;height:100%;overflow: auto;}

header{position: fixed;width:100%;z-index:10;}
header .top-wrap{background:#000;padding:20px 0 30px 0;}
header .top{display: flex;justify-content: space-between;position: relative;}

/*.topmenu_login_input{position: relative; width: 130px; height: 37px; padding: 0px 5px; margin-right: 3px; border: 1px solid #909091; background-color: #5a5b5e; border-radius: 3px; vertical-align: bottom; color: #FFFFFF; }
.topmenu_login_input::placeholder   {color:#DDDDDD;}
*/

header .top div>.btn {position: relative;display: inline-block;background: #23262d;text-transform: uppercase;color: #cfcdcd;font-weight: 700;margin: 0 5px;padding: 5px 15px;border: 2px solid #2a2b37;
        border-radius: 3px;box-shadow: rgb(0 0 0 / 35%) 0px 3px 7px 0px;text-align: center;}
header .top div>.btn i {color: #a263e1; padding-right: 3px;}
header .top div>.btn span {font-size: 9px;}

header .top div>.btn:hover {/*color: #e9a401;*/}
header .top div>.btn:hover i {color: #e9a401;}

header .user_menu{display: flex;margin-top: 20px;border:0;}
header .user_menu li{padding:11px 10px;}
header .user_menu li.logout{padding:0;}
header .user_menu li i{color:#a263e1;}
header .user_menu li .info{color:#e4a101;}

header .nav-wrap{border: 1px solid #1e1e2a;box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 20%);background:#000;}
header .nav .bs-ul{display: flex;justify-content: space-around;width:100%;padding: 20px 0 13px 0;}
header .nav .bs-ul li{width:100%;}
header .nav .bs-ul li a .icon-panel {padding: 5px;font-size: 20px;transition: .3s;    display: inline-block;position:relative;color: #a263e1;}
header .nav .bs-ul li a:hover .icon-panel {color: #fadb6d;margin-right: 5px;text-shadow: 0 0 10px rgba(208,160,34,.75)}

header .nav .bs-ul li a .icon-panel::before {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0px;
    border: solid 1px transparent;
    border-top-color: #9b7820;
    border-bottom-color: #9b7820;
    border-radius: 50%;
    opacity: 0;
    transform: rotate(-180deg);
    transition: .3s;
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

header .nav .bs-ul li a:hover .icon-panel:before {opacity: 1;transform: rotate(0deg)}

.logo_img{width:100px;}

.contents{padding:190px 0 50px 0;flex:1;width:100%;}
/*
.contents:before{width: 100%;
    height: 100%;
    min-height: 690px;
    left: 0;
    bottom: -5%;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-image: url(/assets/images/bg/main-bg.png);content: '';
    position: absolute;
    pointer-events: none;
    z-index: -1;
    transition: .3s;}*/
    

.gm-wrap{margin-bottom:30px;}
.game_title{text-align: left; margin: 0px 0px 0 5px;font-size:17px;margin:20px 0 10px 0;}
.game_title div{font-size: 15px; margin: 0 0 5px 0;}
.game_title font{color: #e4a101;}
.game_title p{float: right; position: relative; }

.gm_list{margin:20px 0;}
.gm_list .item-wrapper{display: flex;flex-wrap: wrap;justify-content: center;}

.gm_list .item-wrapper .item {position: relative;cursor: pointer;width:25%;padding:0 5px;margin-bottom:20px;}

.gm_list .item-wrapper .item .img {position: relative;width: 100%;aspect-ratio: auto;background-color: #1d1f2b;border: 1px solid #313447;
    border-radius: 30px;overflow: hidden;transition: background-color 0.15s, border-color 0.15s;}

.gm_list .item-wrapper .item .img>img {width: 100%;height: 100%;object-fit: cover;transform: scale(1);transition: opacity 0.35s, transform 0.35s;}

.gm_list .item-wrapper .item:hover .img>img {opacity: 0.6;transform: scale(1.2);}

.gm_list .item-wrapper .item:hover .img .figcaption::before {opacity: 1;transform: scale3d(1, 1, 1);}

.gm_list .item-wrapper .item:hover .img .figcaption>span {opacity: 1;}

.gm_list .item-wrapper .item .desc {font-size: inherit;text-align: center;margin-top: 12px;}


.providers-panel {width: 100%;margin: 0 auto;/*max-width: 1000px;*/}
.providers-panel.slot{height:100vh;overflow-y:auto;}


.sc-btn {width: 220px;display: inline-block;position: relative;overflow: hidden;border-radius: 15px;margin: 0 10px 20px}

.sc-btn {width: 160px}

.sc-btn:before {width: 100%;height: 100%;border-radius: 15px;border: solid 1px rgba(255,255,255,.15);left: 0;
    top: 0;
    -webkit-mask-image: linear-gradient(to right,rgba(0,0,0,1.0),rgba(0,0,0,0));
    mask-image: linear-gradient(to right,rgba(0,0,0,1.0),rgba(0,0,0,0));
    z-index: 5;
    content: '';position: absolute;pointer-events: none;transition: .3s;
}

.sc-btn .g-bg {width: 100%;position: absolute;left: 0;bottom: 0;overflow: hidden;border-radius: 15px;background-color: #000}

.sc-btn .g-bg:before {width: 100%;height: 100%;border-radius: 15px;border: solid 1px rgba(255,255,255,.5);
    left: 0;top: 0;
    -webkit-mask-image: linear-gradient(to left,rgba(0,0,0,1.0),rgba(0,0,0,0));
    mask-image: linear-gradient(to left,rgba(0,0,0,1.0),rgba(0,0,0,0));
    z-index: 5
}

.sc-btn .g-bg:before {border: solid 1px rgba(255,255,255,.15);content: '';position: absolute;pointer-events: none;transition: .3s;}

.sc-btn .g-bg img {transition: .3s;width:100%;}

.sc-btn:hover .g-bg img {transform: scale(1.1);opacity: .5}

.sc-btn .g-panel {width: 100%;position: relative;z-index: 1;display: block;}

.sc-btn .g-panel:before {width: 100%;height: 125%;left: -100%;bottom: 0;background-color: #333;transform-origin: bottom right;transform: rotate(15deg);
    box-shadow: inset -3px 0 5px rgba(0,0,0,.5);content: '';position: absolute;pointer-events: none;transition: .3s;z-index: 1;}

.sc-btn:hover .g-panel:before {transform: rotate(25deg);background-color: #222}

.sc-btn .g-panel:after {width: 84%;height: 20%;left: 0;top: 0;background-color: #333;transform-origin: top right;transform: skew(-15deg);border-radius: 0 8px 8px 0}

.sc-btn:hover .g-panel:after {width: 74%;background-color: #222;content: '';position: absolute;pointer-events: none;transition: .3s;}

.sc-btn .g-panel .g-img {transition: .3s;animation: scBtnUpAnim .75s ease 1 backwards;position: relative;z-index: 2;}

@keyframes scBtnUpAnim {
    0% {
        opacity: 0;
        transform: translateY(25%)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.sc-btn:hover .g-panel .g-img {transform: translateX(5%)}

.sc-btn .g-logo {idth: 74px;height: 64px;left: 0;top: 0;position: absolute;transition: .3s}

.sc-btn .g-logo {width: 54px;height: 44px;z-index: 1;}

.sc-btn:hover .g-logo {transform: translate(10%,15%)}

.sc-btn .g-footer {width: 100%;height: 40px;left: 0;bottom: 0;position: absolute;background-color: rgba(16,16,16,.85);color: #ccc;
    transition: .3s;animation: scBtnUpAnim .75s ease .3s 1 backwards}

.sc-btn .g-footer {height: 30px;font-size: 12px;z-index: 2;line-height: 30px;}

.sc-btn:hover .g-footer {color: #fff}

.sc-btn .play-btn {width: 100px;height: 28px;left: 0;bottom: 40px;position: absolute;border-radius: 0 10px 0 0;padding: 0 0 2px;opacity: 0;transform: translateX(-100%);z-index:2;}

.sc-btn .play-btn {bottom: 30px}

.sc-btn .play-btn:hover {text-shadow: 0 1px 2px rgba(0,0,0,.5)}

.sc-btn:hover .play-btn {opacity: 1;transform: translateX(0)}

.sc-btn .play-btn:before,.sc-btn .play-btn:after {border-radius: 0 10px 0 0;content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    z-index: -1;
    transition: .3s;}

.sc-btn .play-btn:after {width: 100%;border: none;transition: .3s;background-image: linear-gradient(to bottom right,#f1c200,#af6f01);;content: '';position: absolute;pointer-events: none;transition: .3s;}

.sc-btn .play-btn i {font-size: 20px}

footer{border-top: 1px solid #232323;}
footer .copyright{padding:50px 0;color:rgba(255,255,255,0.5)}
footer .copyright a{}
footer .copyright p{margin:20px 0;}

.login_wrap  {max-width:600px;margin:0px auto;background: linear-gradient(136deg, #454545, black, #454545);padding: 40px 30px 80px 30px;border-radius: 8px;border: 1px solid #626262;font-size: 18px;margin-top:30px;}
.login_wrap .logo_img{margin-bottom:30px;}
.login_tit {color: #c285ff;text-align:center;margin-bottom:20px;font-size: 24px;}

.intlt{margin-bottom: 7px;text-align: left;}
.intlt span{font-size: 15px;margin-left: 10px;}
.input{background-color: #1b1b1b;border: 1px solid #434343;width:100%;height:50px;color: #ffffff;border-radius:3px;padding:0 0 0 15px;margin-bottom:10px;}
.login_wrap label.error{width: 100%;text-align: left;display: block;}

.inwrap{margin-bottom:20px;width:100%;position: relative;}

.row{margin:0;}

.join .bank{margin-bottom:5px;}
.join label.error{/*position: absolute;right: 10px;width: auto;top: 40px;*/}


.submit-overlay {position: fixed;top: 0;background-color: #000000a1;width: 100%;height: 100%;z-index: 999999999;width: 100%;height: 100%;display: none}

.submit-overlay i {position: absolute;top: 50%;left: 50%;font-size: 40px;color: #fff;animation: rotate_icon 1s linear infinite;transform-origin: 50% 50%}

@keyframes rotate_icon {
    100% {
        transform: rotate(360deg)
    }
}

.box{margin-top: 15px;padding: 20px;border-radius: 8px;border: 1px solid #454545;background: rgba(0, 0, 0, 0.3);min-height: 620px;}

.bs-table {width: 100%;border-collapse: separate;border-spacing: 0 2px}

.bs-table thead th {padding: 20px 0;color: #ccc;font-weight: 300;text-align: center;background-color: #28242b}

.bs-table thead th:first-child {border-radius: 8px 0 0 0px}

.bs-table thead th:last-child {border-radius: 0 8px 0px 0}
.bs-table thead th.one{border-radius:8px 8px 0 0}

.bs-table tr {cursor: pointer}

.bs-table tr td {padding:20px 0;text-align: center;transition: .3s;color: #fff;
    background-color: rgba(255,255,255,.08);
    /*border-top: solid 1px rgba(255,255,255,.3);*/
    border-bottom: solid 1px rgba(255,255,255,.3)
}

.bs-table tr:hover td,.bs-table tr.active td {background-color: rgba(255,255,255,.08)}

/*.bs-table tr td:first-child {border-radius: 8px 0 0 8px;border-left: solid 1px rgba(255,255,255,.3)}
.bs-table tr td:last-child {border-radius: 0 8px 8px 0;border-right: solid 1px rgba(255,255,255,.3)}
*/

.bs-table tr td.one{border-radius:8px;}

.bs-table tr td a {transition: .3s;display: inline-block;vertical-align: middle;max-width: 90%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
    text-decoration: none;color: #fff;font-weight: 300}

.bs-table tr td a:hover {color: #ffde64;text-decoration: underline}

.yellow{color:#e4a101}

.pagination-wrap{width:100%;margin:15px 0;text-align:center;}

.pagination{    justify-content: center;}
.pagination li {display: inline-block;}

.pagination>li>a {width: 28px;height: 28px;text-decoration: none;border: none;display: flex;align-items: center;justify-content: center;margin: 0 3px;
    position: relative;z-index: 1;transition: .3s;overflow: hidden;border-radius: 5px;color: #999;background-color: rgba(255,255,255,.05)
}

.pagination .turn-pg a {background-color: #23262d;border: none;box-shadow: none;font-size: 18px}

.pagination li a:hover {color: #ffdf6f;background-color: rgba(255,255,255,.1)}

.pagination .turn-pg a:hover {color: #ffdf6f;}

.pagination li a.active {color: #fff;background-color: #23262d}


.pupop_wrap{position:fixed;top:0;left:0;width:100%;height:100%;z-index:2000; display:none; }
.pupop_content{width: 300px;top: 30%;left: 50%;transform: translate(-50%,-50%);position: absolute;-o-background-size: contain;
background-size: contain;background-color: #21243a;border-radius: 20px;}
.pupop_content>.title {background-color: #7928cb;padding: 16px;position: relative;border-radius: 20px 20px 0 0;text-align:center;}
.pupop_content>.content{padding:22px;}
.pupop_content>.content .txt{color:#fff;font-size:16px;}
.pupop_content>.content .bottom{text-align: center;margin-top: 20px;}
.pupop_content>.content .bottom button{display: inline;}
.pupop_content>.content .bottom button.close{height: 40px;padding: 0 40px !important;font-size: 14px;cursor: pointer;transition: .2s ease-out;border-radius: 5px;
font-weight: 700;}

.inwrap.tr{display:flex;}
.intlt.th{margin-right: 10px;min-width: 130px;display: flex;align-items: center;}
.inwrap.tr .td{width:100%;text-align:left;}
.inwrap.tr .td.text{padding-top:7px;}

.iln{display:inline-block;}
.wds{max-width:150px;}
.wdm{max-width:250px;}
.wdml{max-width:350px;}

.mgt15{margin-top:15px;}
.mgt25{margin-top:25px;}

.radio-wrap{text-align:left};
.radio-wrap input{margin-left:5px;}
.radio-wrap label{margin-right:10px;}

.sec_head{    margin: 10px;
    text-align: left;
    font-size: 18px;
    color: #e4a101;}
    
    
    
.casino .section_search{background: #11182a;padding: 20px 20px;margin-top: 20px;}
.casino .section_search .game_list{display: flex;align-items: center;gap: 45px;}
.casino .section_search .game_list .item{text-align: center;opacity: 0.5;cursor: pointer;}
.casino .section_search .game_list .item img{filter: invert(100%) sepia(32%) saturate(2%) hue-rotate(347deg) brightness(110%) contrast(101%);}
.casino .section_search .game_list .item:hover{opacity:1;}

.casino .section_search .game_list .item.active{opacity: 1;transition: opacity 0.15s;}
.casino .section_search .game_list .item .img{display: inline-flex;width: 45px;height: 45px;overflow: hidden;}
.casino .section_search .game_list .item .tit{text-align: center;color: #fff;margin-top:10px;}

.casino .section_game{margin-top:50px;}
.casino .section_game.bg1{background-color: #1d1f2b !important;}
.casino .section_game.bg2{background-color: #202430 !important;}

.casino .sec_wrapper .sec_item .sec_head {display: flex;align-items: center;gap: 20px;margin: 0;padding: 20px 0 20px 0;}

.casino .sec_wrapper .sec_item .sec_head .tit {flex-shrink: 0;font-size: 20px;font-weight: 700;color: #fff;}

.casino .sec_wrapper .sec_item .sec_head .tit_line {width: 100%;height: 1px;background-color: #303242;}

.unique-grid3x4 > div:nth-child(1) {
    grid-area: 1 / 1 / span 2 / 1;
}
.unique-grid3x4 > div:nth-child(1) .img {
    height: 408px;
    aspect-ratio: auto;
}

.section_game .sec_wrapper .sec_item .sec_content_grid .item-wrapper {display: grid;
    grid-template-rows:auto;
    grid-template-columns: repeat(3, calc((100% / 3) - 10px));
    grid-template-rows: 2;
    gap: 10px;
}

.section_game .sec_wrapper .sec_item .sec_content_grid .item-wrapper .item {
    position: relative;
    cursor: pointer;
}

.section_game .sec_wrapper .sec_item .sec_content_grid .item-wrapper .item .img {
    position: relative;
    width: 100%;
    aspect-ratio: auto;
    background-color: #1d1f2b;
    border: 1px solid #313447;
    border-radius: 30px;
    overflow: hidden;
    transition: background-color 0.15s, border-color 0.15s;
}
.section_game .sec_wrapper .sec_item .sec_content_grid .item-wrapper .item .desc {
    font-size: inherit;
    text-align: center;
    margin-top: 12px;
}

