.mobile {
    display: none!important
}

.left-menu-btn {
    width: 40px;
    background-color: transparent;
    border: none;
    padding: 0;
    position: absolute;
    z-index: 100;
    color: #fff;
    margin-right: 20px
}

.left-menu-btn span {
    width: 100%;
    display: block;
    height: 2px;
    background-color: #fff;
    margin: 0 0 10px;
    border-radius: 2px
}

.left-menu-btn span:first-child {
    width: calc(100% - 8px);
    position: relative;
    margin-top: 0;
    margin-left: 4px;
    top: 0;
    transition: top .3s .3s,transform .3s 0s
}

.left-menu-btn span:nth-child(2) {
    width: 100%;
    opacity: 1;
    transition: opacity .3s;
    margin-right: auto
}

.left-menu-btn span:last-child {
    width: calc(100% - 8px);
    margin-bottom: 0;
    position: relative;
    top: 0;
    transition: top .3s .3s,transform .3s 0s
}

.left-menu-btn.opened span:first-child {
    width: 100%;
    top: 12px;
    margin-left: 0;
    transform: rotate(-45deg);
    transition: top .3s 0s,transform .3s .3s,color .3s .3s;
    box-shadow: none
}

.left-menu-btn.opened span:nth-child(2) {
    opacity: 0
}

.left-menu-btn.opened span:last-child {
    width: 100%;
    top: -12px;
    transform: rotate(45deg);
    transition: top .3s 0s,transform .3s .3s;
    box-shadow: none
}

.right-menu-btn {
    width: auto;
    background-color: transparent;
    border: none;
    font-size: 36px;
    margin-right: -5px
}

.right-menu-btn .normal-icon {
    transition: .3s;
    opacity: 1;
    transform: rotate(0deg)
}

.right-menu-btn.opened .normal-icon {
    opacity: 0;
    transform: rotate(45deg)
}

.right-menu-btn .open-icon {
    transition: .3s;
    opacity: 0;
    transform: rotate(-45deg) translateY(0);
    position: absolute;
    bottom: -1px;
    color: #fadb6d
}

.right-menu-btn.opened .open-icon {
    opacity: 1;
    transform: rotate(0deg) translateY(2px)
}

.sn-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 97;
    background-color: rgba(0,0,0,.5);
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    transition: .3s
}

.sn-overlay.active {
    opacity: 1;
    pointer-events: auto
}

@media(max-width: 1024px) {
    /*.desktop { display:none!important }*/
    .page-content:before{background-image:none}
    .container{padding:0 7px !important;}
    
    .mujilogo{display:block;margin: 0 auto;}
    .mujilogo img{width:150px;}
    

    .mobile {
        display: block!important
    }

    .wrapper {
        /*padding: 148px 0 60px
        padding: 193px 0 60px*/
    }

    .header-section {
    /*
        background-color: #141414;
        border-bottom-color: #333;
        
        position: fixed;
        left: 0;
        top: 0*/
    }

    .header-main {
        /*height: 60px;border-bottom: solid 1px #876f0d;*/
        height: 85px;
    }

    .header-main .container:after {
        display: none
    }
    
    .header-main .user-board ul {
        display: flex;
        flex-wrap: wrap;
    }
    
    .header-main .user-board ul li{
        width:50%;
    }

    .logo {
        width: 180px;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto
    }

    .header-menu {
        /*background-color: #000
        background-color: #5DC8DA*/
        height: 107px;
    }

    .before-login,.after-login.al-main {
        width: 100%;
    }

    .before-login button,.after-login.al-main .al-btn button {
        width: calc(49% - 1%);
        height: 40px;
        margin: 0 2px
    }
    
    button.login-link{/*color: #f3c91e;*/}

    .after-login.al-main .al-btn {
        width: 100%
    }

    .btn-transparent:before { /*background-color: #363432*/ }
    
    .sidebar-left {
        width: 250px;
        height: 100%;
        top: 0px;
        left: 0;
        transform: translateX(-100%);
        background-color: #010048;
        border: none;
        border-right: solid 1px #333;
        border-radius: 0;
        margin: 0!important;
        padding: 0 10px 140px;
        display: block;
        overflow-y: auto;
        position: fixed;
        transition: .5s;
        align-items: flex-start;
        align-content: flex-start;
        z-index: 98
    }
    
    /*
    .sidebar-left {
        width: 110px;
        max-width: 280px;
        height: 100%;
        top: 111px;
        left: 0;
        transform: translateX(-100%);
        background-color: #1a1a1a;
        border: none;
        border-right: solid 1px #333;
        border-radius: 0;
        margin: 0!important;
        padding: 0 10px 140px;
        display: block;
        overflow-y: auto;
        position: fixed;
        transition: .5s;
        align-items: flex-start;
        align-content: flex-start;
        z-index: 98
    }
    */

    .sidebar-left.active {
        transform: translateX(0);
        box-shadow: 2px 0 5px #000
    }

    .sidebar-left::-webkit-scrollbar {
        width: 0;
        background: 0 0
    }

    .sidebar-left::-webkit-scrollbar-thumb {
        background: 0 0
    }

    .main-menu ul,.main-menu ul li {
        width: 100%;
        height: auto;
        display: block;
        margin-top: 20px;
    }

    .main-menu ul li {
        padding: 0
    }
    
    .main-menu .bs-ul li.mo{display:block;/*color:#161412*/}
    
    .main-menu .bs-ul li.spacer{
        height: 1px;
        background: #E7E1C7;
        margin: 20px 0px;
    }

    .main-menu ul li a {
        /*width: 100%;*/
        padding: 0;
        margin: 10px 0;
        justify-content: flex-start;
    }

    .main-menu .bs-ul li a .icon-panel {
        /*width: 80px;
        height: 60px;
        border-radius: 10px;
        margin-bottom: 5px;
        background-image: linear-gradient(rgba(255,255,255,0.01),rgba(255,255,255,0.05));
        box-shadow: 0 1px 0 rgba(255,255,255,.15)
        */
        width: 42px;
        font-size: 30px;
        
    }

    .main-menu .bs-ul li a:hover .icon-panel {
        text-shadow: none;
        margin-right: 0
    }

    .main-menu .bs-ul li a .icon-panel:before {
        display: none
    }
    /*
    .main-menu .bs-ul li a .icon-panel i {
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-image: -webkit-linear-gradient(#ffe262,#ffe262,#b77d00,#b77d00);
        background-size: 100% 100%
    }
    */

    .main-menu .bs-ul li a .text {
        /*width: 100%;
        color: #f3c91e;*/
        display: inline-block;
        /*font-size: 12px*/
        font-size: 14px
        
    }

    .sidebar-right {
        width: 280px;
        max-width: 280px;
        height: 100%;
        top: 111px;
        right: 0;
        left: auto;
        transform: translateX(100%);
        background-color: #1a1a1a;
        border: none;
        border-left: solid 1px #2a2a2a;
        border-radius: 0;
        margin: 0!important;
        padding: 5px 10px 140px;
        display: block;
        overflow-y: auto;
        position: fixed;
        transition: .5s;
        align-items: flex-start;
        align-content: flex-start;
        z-index: 98;
        opacity: 1;
        pointer-events: auto
    }

    .sidebar-right.active {
        transform: translateX(0);
        box-shadow: -2px 0 5px #000
    }

    .sidebar-right::-webkit-scrollbar {
        width: 0;
        background: 0 0
    }

    .sidebar-right::-webkit-scrollbar-thumb {
        background: 0 0
    }

    .after-login .account-info .labels {
        padding: 5px 0 6px
    }

    .after-login .account-info .labels .icon {
        width: 40px;
        height: 40px
    }

    .progress-panel {
        width: calc(100% - 48px)
    }

    .after-login .drop-down .btn-grp {
        margin-top: 10px
    }

    .after-login .drop-down .btn-grp button {
        height: 44px;
        margin: 0 0 5px;
        font-size: 14px
    }

    .after-login .message-btn .count {
        width: 18px;
        height: 18px;
        position: relative;
        top: 0;
        right: 0;
        font-size: 10px;
        margin-left: 5px
    }
}

@media(max-width: 1024px) {
    .banner-section {
        height:initial;
        overflow: hidden
    }

    .banner-section .banner-panel {
        margin: 4% 0 2%;
        padding: 0
    }

    .banner-carousel h6 {
        font-size: 1.56vw
    }

    .banner-carousel h1 {
        font-size: 4vw
    }

    .banner-carousel h2 {
        font-size: 2.4vw
    }

    .banner-background {
        /*top: 13%;*/
        top: 40%;
        left: 10%
    }
    
    .form-footer button.size-lg{width: 48%;}
}

@media(max-width: 1024px) {
    .popup-content-2 .brand {
        width:90px;
        height: 90px
    }

    .popup-panel-2 {
        height: 323px
    }
    
    .section_game .sec_wrapper .sec_item .sec_content_grid .item-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width: 350px) {
    .popup-content-2 .brand {
        width:85px;
        height: 85px
    }

    .popup-panel-2 {
        height: 334px
    }
}

@media(max-width: 767px) {
    .banner-section .banner-panel {
        margin:5% 0 3%
    }

    .carousel-nav {
        margin: 2% 0 0
    }

    .carousel-indicators li {
        width: 10px;
        height: 10px;
        margin: 0 5px
    }

    .carousel-nav .control-btn {
        width: 24px;
        height: 24px
    }

    .carousel-nav .control-btn:first-child {
        margin-right: 5px
    }

    .carousel-nav .control-btn:last-child {
        margin-left: 5px
    }
    
    .section_game .sec_wrapper .sec_item .sec_content_grid .item-wrapper .item .img{
        border-radius: 15px;
    }
}

@media(max-width: 500px) {
    .banner-section .banner-panel {
        margin:5.5% 0 2.75%
    }

    .banner-background {
        /*top: 10%*/
    }

    .carousel-indicators li {
        width: 8px;
        height: 8px
    }

    .carousel-nav .control-btn {
        width: 20px;
        height: 20px
    }

    .banner-carousel h1 {
        margin-bottom: -.5%
    }

    .banner-carousel h6 {
        margin-bottom: 2%
    }
}

@media(max-width: 1024px) {
    .mid-section {
        margin:0
    }

    .mid-section:before {
        display: none
    }

    .m-panel {
        width: 100%;
        height: initial
    }

    .m-panel:nth-child(1) {
        order: 2
    }

    .m-panel:nth-child(2) {
        order: 1;
        margin: 0;
        background-image: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0.75),rgba(0,0,0,0));
        padding: 5px 0
    }

    .m-panel:before,.m-panel:after {
        display: none
    }

    .m-panel:last-child:before {
        display: block;
        width: 100%;
        height: 1px;
        left: 0;
        top: 0;
        opacity: 1;
        background-image: linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0.25),rgba(255,255,255,0));
        -webkit-mask-image: none;
        mask-image: none;
        border: none;
        box-shadow: none
    }

    .m-panel .m-cont {
        padding: 0;
        height: initial
    }

    .m-panel:first-child .m-cont {
        border-radius: 0;
        border-left: none;
        padding-right: 0
    }

    .m-panel:last-child .m-cont {
        border-radius: 0;
        border-right: none;
        padding-left: 0
    }

    .m-panel .m-cont:before {
        display: none
    }

    .notice-rolling .icon-panel {
        width: 34px;
        height: 34px
    }
}

@media(max-width: 500px) {
    .notice-ticker a {
        font-size:12px
    }

    .search-form {
        height: 44px
    }
}

@media(max-width: 350px) {
    .notice-ticker a {
        display:inline-block;
        max-width: 220px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }
}

@media(max-width: 1024px) {
    .category-btn .a-panel .a-bg,.category-btn .a-background {
        width:120%!important
    }

    .category-btn .a-panel .a-bg {
        left: 10%;
        position: relative
    }

    .casino-link .a-panel .a-bg {
        left: -10%
    }

    .category-btn .a-background {
        left: -10%;
        position: relative
    }

    .category-btn .a-panel .text-panel {
        width: 55%
    }

    .category-btn .a-panel .text-panel .kr-text,.category-btn .a-panel .text-panel .en-text {
        font-size: 5.86vw
    }

    .category-btn .a-panel .text-panel .kr-text {
        margin: 0 0 -3%
    }

    .category-btn .a-panel .text-panel .en-text {
        font-size: 2.93vw
    }

    .category-btn .a-panel .text-panel button {
        width: initial;
        height: initial;
        margin: 1% 0 0;
        padding: 2.11% 8.07%
    }

    .category-btn .tag {
        display: none
    }
}

@media(max-width: 600px) {
    .category-btn .a-panel .a-bg,.category-btn .a-background {
        /*width:140%!important*/
    }

    .category-btn .a-panel .a-bg {
        left: 20%
    }

    .casino-link .a-panel .a-bg {
        left: -20%
    }

    .category-btn .a-background {
        left: -10%
    }

    .casino-link .a-background {
        left: -30%
    }

    .category-btn .a-panel .text-panel {
        /*width: 50%*/
        width: 42%
    }
    
    .slotModal .subpage-wrapper {padding: 20px 10px 50px 10px;}
    
}

@media(max-width: 500px) {
    .category-section {
        margin-top:15px
    }
    
    .category-section .container{padding: 0 6px !important;}
}

@media(max-width: 414px) {
    .category-btn .a-panel .text-panel button {
        font-size:12px
    }

    .category-btn .a-panel .text-panel button i {
        font-size: 14px;
        margin-right: 0
    }
}

@media(max-width: 1260px) {
    .board-section {
        background-color:#111;
        margin-top: 10px;
        padding-top: 15px
    }

    .board-section:before,.board-section:after {
        display: none
    }

    .board-panel {
        width: 100%;
        max-width: 680px;
        margin: 15px auto
    }

    .board-panel:nth-child(1) {
        order: 2
    }

    .board-panel:nth-child(2) {
        width: 100%;
        max-width: 680px;
        margin: 15px auto
    }

    .board-panel:nth-child(3) {
        order: 3
    }

    .board-panel .header {
        height: 50px;
        background-color: #1a1a1a;
        border-radius: 10px
    }

    .board-panel .content {
        min-height: initial;
        padding-top: 10px;
        padding-bottom: 0
    }

    .realtime-board .content {
        padding-bottom: 5px
    }

    .realtime-board {
        order: 1;
        margin: 15px auto
    }

    .ne-board table tr {
        display: none
    }

    .ne-board table tr:nth-child(1),.ne-board table tr:nth-child(2),.ne-board table tr:nth-child(3) {
        display: table-row
    }

    .board-wrapper:before,.board-wrapper:after,.board-wrapper-inner:before,.board-wrapper-inner:after {
        display: none
    }

    .board-wrapper:last-child {
        margin: 0
    }

    .board-wrapper.w-bg {
        background-color: transparent;
        border-radius: 0;
        padding: 0
    }

    .board-wrapper-inner {
        padding: 0
    }

    .faq-board {
        padding: 0
    }

    .faq-board .content {
        padding-top: 5px
    }

    .faq-board .content ul li {
        display: none
    }

    .faq-board .content ul li:nth-child(1),.faq-board .content ul li:nth-child(2),.faq-board .content ul li:nth-child(3) {
        display: block
    }

    .faq-board .content ul li a {
        margin-bottom: 2px
    }

    .ne-board table tr td {
        height: 32px
    }
}

@media(max-width: 1024px) {
    .logo-footer {
        width:180px
    }
}

@media(max-width: 500px) {
    .table-ticker ul li div.date,.table-ticker ul li div.amount {
        padding-right:0
    }

    .ne-board table tr .title-td {
        padding-left: 0
    }

    .table-ticker ul li .icon-panel {
        width: 40px;
        min-width: 40px;
        height: 34px;
        margin: -1px 10px 0 0
    }

    .new-icon {
        margin-left: 0
    }

    .footer-section {
        background-size: 600px;
        padding: 20px 0 25px
    }

    .realtime-board .header {
        min-height: 70px
    }

    .realtime-board .header .icon-img {
        width: 130px
    }

    .realtime-board .content {
        padding-left: 15px;
        padding-right: 15px
    }

    .realtime-ticker ul li {
        height: 63px
    }

    .realtime-ticker .tr-panel {
        padding: 3px 8px 3px 3px
    }

    .money-board .content {
        overflow: hidden;
        padding: 5px 0 0;
        height: 157px
    }

    .table-ticker ul li {
        height: 38px
    }

    .table-ticker ul li div.amount {
        font-size: 16px
    }
}

@media(max-width: 440px) {
    .table-ticker ul li .td {
        font-size:14px
    }

    .table-ticker ul li .icon-panel {
        width: 34px;
        min-width: 34px;
        height: 30px;
        margin-right: 5px
    }

    .board-panel .content table td a {
        font-size: 13px;
        display: inline-block;
        vertical-align: middle;
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-decoration: none
    }
}

@media(max-width: 414px) {
    .realtime-ticker .tr-panel .info-panel {
        padding-left:5px
    }

    .realtime-ticker .tr-panel .info-panel .amount {
        font-size: 16px
    }

    .realtime-ticker .tr-panel .info-panel .user {
        font-size: 14px
    }

    .realtime-ticker .tr-panel .info-panel .title {
        font-size: 13px
    }
}

@media(max-width: 1770px) {
    /*
    section,main {
        width:calc(100% - 340px)!important;
        margin-left: auto!important;
        margin-right: auto!important
    }*/

    .side-banner {
        width: calc(100% - 30px)
    }
}

@media(max-width: 1500px) {
    section,main {
        width:100%!important
    }

    .side-banner {
        display: none!important
    }

    .side-banner-panel.mob {
        display: block
    }

    .side-banner-panel {
        width: 155px;
        position: fixed;
        right: 0;
        bottom: 70px;
        padding-right: 5px;
        transition: .3s;
        transform: translateX(100%);
        z-index: 1060
    }

    .side-banner-panel.active {
        transform: translateX(0)
    }

    .side-banner-panel .close-sb {
        display: block
    }

    .customer-banner {
        margin-bottom: 5px
    }
}

@media(max-width: 1024px) {
    .subpage-modal .modal-content {
        padding:12px 0 15px;
        border-radius: 0;
        border: none;
        min-height: 550px
    }

    .subpage-modal .modal-content .container:before {
        display: none
    }

    .subpage-sidebar {
        display: none
    }

    .subpage-container {
        width: 100%
    }

    .subpage-header {
        height: 50px;
        padding-left: 15px
    }

    .subpage-panel {
    /*
        background-color: transparent;
        border-radius: 0;
        border: none;*/
        padding: 10px 5px 20px 5px;
        min-height: initial
    }

    .subpage-header .title-panel {
        font-size: 18px
    }

    .subpage-header .title-panel i {
        font-size: 24px;
        margin-right: 5px
    }

    .modal .footer-section {
        padding: 20px 0 25px
    }

    .subpage-footer {
    }

    .modal .logo-footer {
        width: 180px
    }

    .modal .customer-board {
        padding: 15px 0
    }

    .customer-board .c-panel {
        padding: 8px
    }

    .modal .customer-board .c-panel .icon-panel {
        width: 40px;
        height: 40px;
        margin-right: 10px;
        font-size: 24px
    }

    .customer-board .c-panel .text-panel {
        font-size: 14px
    }

    .modal .customer-board .c-panel .text-panel .info {
        font-size: 16px
    }

    .subpage-nav {
        margin: 0
    }

    .subpage-container {
        overflow: visible
    }
}

@media(max-width: 767px) {
    .bonus-information {
        margin:15px 0 10px
    }

    .bonus-panel {
        padding-top: 8px;
        padding-left: 0;
        padding-right: 0
    }

    .bonus-panel .icon-panel {
        margin: 0 auto 5px
    }

    .bonus-panel .text-panel {
        width: 100%
    }

    .bonus-panel .text-panel .labels,.bonus-panel .text-panel .info {
        width: 100%;
        display: inline-block;
        text-align: center;
        margin: 0
    }

    .bonus-panel .text-panel .info {
        margin-top: -5px
    }

    .rujing-panel .text-panel {
        font-size: 20px
    }

    .attendance-info .bs-ul li {
        width: calc(100% - 8px);
        margin-top: 2px;
        margin-bottom: 2px
    }

    .attendance-info .bs-ul li .icon-panel {
        width: 36px;
        height: 36px
    }

    .attendance-info .bs-ul li .icon-panel:before {
        width: calc(100% - 6px);
        height: calc(100% - 6px)
    }

    .attendance-info .bs-ul li .info {
        width: calc(100% - 40px);
        padding-left: 5px
    }

    .form-container .form-group .input-container.w-bg {
        justify-content: flex-start!important
    }

    .form-container .form-group .radio-form {
        width: 100%;
        justify-content: flex-start
    }
}

@media(max-width: 600px) {
    .subpage-nav {
        flex-wrap:wrap;
        justify-content: flex-start
    }

    .subpage-nav a {
        width: 33.33%;
        max-width: initial;
        margin: 0
    }

    .mypageModal .subpage-nav a {
        width: 25%
    }

    .customer-board ul li {
        width: 50%;
        padding-left: 10px
    }

    .customer-board .c-panel .text-panel {
        /*width: calc(100% - 50px);*/
        padding: 0
    }

    .customer-board .c-panel .text-panel .labels,.customer-board .c-panel .text-panel .info {
        width: 100%;
        margin: 0!important;
        white-space: nowrap
    }

    .slotModal .subpage-nav {
        width: 100%;
        margin: -10px 0 5px;
        padding: 0 0 10px;
        justify-content: center
    }

    .slotModal .gamelist-search .input-container {
        width: 100%
    }
}

@media(max-width: 500px) {
    .modal {
        padding:0!important
    }

    .subpage-modal .modal-content { /*background-image: none*/ }

    .page-ul li {
        padding: 0 15px
    }

    .page-ul li a i {
        margin-right: 2px
    }

    .modal-badge {
        margin-bottom: 5px
    }

    .form-container .form-group .infos .btn-grp button {
        width: calc(33.33% - 4px);
        margin: 2px;
        height: 35px
    }

    .modal-footer {
        margin-top: 20px
    }

    .loginModal .form-container .form-group input {
        box-shadow: none;
        background-color: rgba(0,0,0,.5);
        border: solid 1px rgba(255,255,255,.1)
    }

    .form-container .labels {
        margin-bottom: 5px
    }

    .form-footer {
        width: calc(100% + 4px);
        /*margin: 0 -2px;*/
        
    }

    .form-footer button {
        margin: 0 2px
    }

    .modal-notice {
        padding: 10px
    }

    .subpage-nav {
        padding: 5px 0;
        margin: 0
    }

    .bs-table tr .count-td {
        width: auto
    }

    .bs-table tr td a,.bs-table tr .title-td {
        max-width: 220px;
        padding-left: 5px;
    }

    .bs-table tr .nav-td {
        width: auto
    }

    .bs-table td .level-txt {
        width: 100%;
        text-align: center
    }

    .bs-table td .level-icon {
        margin-right: 0
    }

    .bs-table tr .date-td {
        width: auto;
        font-size: 12px
    }

    .bs-table thead th {
        font-size: 12px
    }

    .bs-table tr .status-td {
        padding: 0
    }

    .status-tag {
        min-width: 46px;
        font-size: 10px;
        padding: 2px 3px 1px
    }

    .rujing-panel h1 {
        font-size: 24px
    }

    .rujing-panel h1 i {
        font-size: 32px;
        top: 5px
    }

    .underline:before {
        height: 1px
    }

    .rujing-panel .text-panel br {
        display: block
    }

    .bs-table tr td .coupon-status {
        font-size: 12px
    }

    .modal-body {
        padding-left: 15px;
        padding-right: 15px
    }

    .modal-header {
        height: 70px
    }

    .modal-header .title-panel {
        font-size: 24px
    }

    .modal-header .title-panel .icon {
        font-size: 32px;
        top: 1px
    }

    .modal .close-btn {
        width: 40px;
        height: 40px;
        right: 5px;
        top: 15px
    }

    .attendance-info {
        margin-top: 8px
    }

    .attendance-info .bs-ul li .info {
        font-size: 12px
    }

    .attendance-calendar td {
        height: 90px;
        padding: 5px 0 0
    }

    .attendance-calendar td .date {
        width: 28px;
        height: 24px
    }

    .rujing-panel .vip-panel {
        font-size: 16px;
        padding: 10px 15px
    }

    .form-container .form-group .input-container.w-bg {
        padding: 0 15px
    }

    .form-container .form-group .input-container.w-bg {
        padding: 8px 10px;
        min-height: initial
    }

    .form-container .form-group .radio-form {
        margin: 2px 0
    }

    .alert-modal .modal-body {
        padding: 20px 15px
    }

    .alert-modal h4 {
        font-size: 20px
    }

    .alert-modal .alert-content {
        font-size: 16px
    }
}

@media(max-width: 330px) {
    .form-container .form-group .radio-form span {
        margin:2px 0;
        max-width: 188px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }
}

@media(max-width: 414px) {
    .modal-badge {
        padding:0 5px;
        font-size: 12px;
        min-height: 50px
    }

    .modal-badge .title-panel .icon-img {
        margin-right: 5px;
        max-width: 26px
    }

    .modal-badge button {
        font-size: 12px
    }

    .bs-table tr td a,.bs-table tr .title-td {
        font-size: 13px;
        max-width: 200px
    }

    .subpage-header {
        padding-left: 10px
    }

    .subpage-header .title-panel {
        font-size: 16px
    }

    .page-ul li {
        padding: 0 10px
    }

    .page-ul li a {
        font-size: 12px
    }

    .subpage-nav a {
        font-size: 12px
    }

    .modal-notice .content {
        font-size: 12px
    }

    .form-container .w-btn .input-container {
        width: calc(100% - 105px)
    }

    .form-container .form-group .form-btn {
        width: 100px
    }

    .rujing-panel .text-panel {
        font-size: 17px
    }

    .bs-header {
        padding-left: 10px;
        padding-right: 10px
    }

    .bs-header .btn-grp button {
        font-size: 12px;
        width: initial;
        padding: 0 10px
    }

    .mypageModal .subpage-nav a .text {
        font-size: 10px
    }

    .mypageModal .subpage-nav a i {
        margin-right: 3px
    }
}

@media(max-width: 870px) {
    .wheel-top .wheel-header .title {
        font-size:2.3vw
    }

    .wheel-top .wheel-header .sub {
        font-size: 1.84vw
    }

    .wheel-spin .r-content {
        font-size: 3.22vw
    }

    .wheel-panel .start-btn span {
        font-size: 2.07vw
    }

    .wheel-panel .start-btn .kr-text {
        font-size: 1.23vw
    }

    .roulette-info .coin-panel {
        font-size: 2.6vw
    }
}

@media(max-width: 500px) {
    .roulette-wrapper {
        padding:1px
    }

    .rouletteModal .close-btn {
        width: 40px;
        height: 40px;
        right: 5px;
        top: 5px
    }

    .roulette-wheel {
        width: 56%
    }

    .roulette-wrapper .roulette-main {
        left: -3%
    }

    .roulette-wheel .girl {
        width: 64%;
        left: -31%;
        top: -7%
    }

    .roulette-info .coin-panel {
        border-width: 1px
    }

    .wheel-top .wheel-header .title {
        font-size: 2.6vw
    }

    .wheel-top .wheel-header .sub {
        font-size: 2.14vw
    }

    .wheel-spin .r-content {
        font-size: 3.52vw
    }

    .wheel-panel .start-btn span {
        font-size: 2.37vw
    }

    .wheel-panel .start-btn .kr-text {
        font-size: 1.53vw
    }

    .roulette-info .coin-panel {
        font-size: 3.1vw
    }
}

@media(max-width: 1024px) {
    .sc-btn {
        width:calc(25% - 20px);
        max-width: 220px;
        margin: 0 10px 20px
    }

    .category-toggle {
        display: flex!important;
        margin-top: 3px
    }
}

@media(max-width: 767px) {
    .category-toggle {
        margin-bottom:20px
    }

    .sc-toggle {
        height: 50px;
        width: calc(50% + 10px)
    }

    .sc-toggle:last-child {
        margin-left: -20px
    }

    .sc-toggle:first-child .btn-panel,.sc-toggle:last-child .btn-panel {
        padding: 0
    }

    .sc-toggle .icon-panel {
        width: 40px;
        height: 40px;
        margin: 5px!important
    }

    .sc-toggle .icon-panel img {
        max-width: 36px;
        max-height: 36px
    }

    .sc-toggle .title {
        font-size: 18px
    }

    .sc-toggle .title .sub {
        font-size: 12px
    }

    .sc-btn {
        width: calc(33.33% - 20px)
    }
}

@media(max-width: 600px) {
    .sc-toggle .title .sub {
        display:none
    }

    .casino-providers .sc-btn .g-logo {
        width: 50px;
        height: 50px
    }

    .casino-providers .sc-btn .g-logo img {
        max-width: 36px;
        max-height: 36px
    }

    .slot-providers{display:grid !important;grid-template-columns: repeat(3, 1fr);gap: 15px 5px;}
    .slot-providers .sc-btn { width: 100%; padding: 0; margin: 0;}
}

@media(max-width: 500px) {
    /*
    .sc-btn,.slot-providers .sc-btn {
        width:calc(33.33% - 10px);
        margin: 0 5px 10px
    }*/

    .sc-btn .g-footer {
        width: 100%;
        height: 30px;
        font-size: 12px
    }

    .slot-providers .sc-btn .g-logo {
        width: 44px;
        height: 44px
    }

    .slot-providers .sc-btn .g-logo img {
        max-width: 34px;
        max-height: 28px
    }

    .title {
        font-size: 12px
    }
}

@media(max-width: 414px) {
    .casino-providers .sc-btn .g-logo,.slot-providers .sc-btn .g-logo {
        width:38px;
        height: 38px
    }

    .casino-providers .sc-btn .g-logo img,.slot-providers .sc-btn .g-logo img {
        max-width: 28px;
        max-height: 28px
    }

    .sc-toggle .title {
        font-size: 14px
    }

    .sc-btn .g-footer,.slot-providers .sc-btn .g-footer {
        height: 28px;
        font-size: 10px
    }

    .title {
        font-size: 10px
    }

    .bs-header .btn-grp button {
        font-size: 10px;
        width: initial;
        padding: 0 7px;
        display: flex;
        align-items: center
    }
}

@media(max-width: 1300px) {
    .game-btn {
        width:calc(16.66% - 16px)
    }
}

@media(max-width: 1024px) {
    .gamelist-scroll {
        width:calc(100% + 16px);
        max-height: initial;
        overflow-y: visible;
        padding: 0;
        margin: 0 -8px
    }

    .game-btn .play-btn,.sc-btn .play-btn {
        display: none!important
    }

    .gamelist-search {
        margin-top: 10px
    }
}

@media(max-width: 767px) {
    .game-btn {
        width:calc(25% - 16px)
    }
}

@media(max-width: 500px) {
    .gamelist-scroll {
        width:calc(100% + 8px);
        margin: 0 -4px
    }

    .game-btn {
        width: calc(25% - 8px);
        padding: 1px;
        margin: 0 4px 10px
    }

    .game-btn .g-name {
        width: calc(100% - 8px);
        height: 25px;
        bottom: 5px;
        font-size: 10px
    }

    .gamelist-search .slot-link {
        width: 160px;
        height: 45px;
        font-size: 14px
    }

    .gamelist-search .slot-link .icon-panel {
        width: 30px;
        height: 30px
    }

    .gamelist-search .slot-link .icon-panel img {
        max-width: 20px
    }

    .gamelist-search .input-container {
        width: calc(100% - 165px)
    }

    .gamelist-search .input-container input {
        height: 45px
    }
}

@media(max-width: 414px) {
    .game-btn .g-name {
        height:20px;
        font-size: 8px
    }

    .gamelist-search .slot-link {
        width: 100%;
        margin: 0 0 5px
    }

    .gamelist-search .input-container {
        width: 100%
    }
}

@media(max-width: 920px) {
    .popup-wrapper {
        align-items:flex-start;
        top: 0
    }

    .popup-panel {
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto
    }
}

@media(max-width: 383px) {
    .title {
        font-size:10px
    }
}

@media(max-width: 360px) {
    .bs-header .btn-grp button {
        font-size:7px;
        width: initial;
        padding: 0 10px;
        display: flex;
        align-items: center
    }
}

@media(max-width: 1024px) {
    .mobile-bal-container {
        display:flex
    }

    .bal-container2 {
        display: none
    }
}