.mobile {display:none}
@media screen and (min-width:980px) {
    .mobile {display:none !important}
}

@media screen and (max-width:1440px) {
	body,html {min-width:100%}
}

@media screen and (max-width:980px) {
    html, body {height:inherit}
    img {max-width: 100%;}
	.carousel-item > img {height:35vw;}
    .modal-content.login {padding:10px 20px 30px 20px }
    .desktop {display: none !important;}
    .mobile {display: block}
	.mobile-flex {display: flex}

    .modal-dialog.userpage {max-width: 100%;width: 100%;margin: 0;}
    .modal-dialog.userpage .modal-content {min-height: 400px;padding: 0;        border-radius: 10px;}
    .modal-content .inner {padding: 10px 10px;  border: 1px solid #fff;  /*width: 100%;*/    border-radius: 10px;}

    .aside {display: none;z-index: 9999;}
    .aside.active {display: block;}
    .aside .fi-rs-cross {position: absolute;right: 10px;top:10px;font-size: 16px;}
    .wrap_cont {width: 100%;margin-left: 0px;}

    .top_w {position: relative;z-index: 999;margin-bottom: 0;}
    .con_w {margin-top: 0px; padding-top: 0px;}
    .con_w:before {border-radius: 0;}
    .con_w.main {margin-top: 0;}
    .con_w > .cl {z-index: 99;position: fixed;left: 0;top: 62px;width:100%;padding-bottom: 45px;box-shadow: 10px 0 30px rgba(0,0,0,0.6)}
    .con_w .cl .cl_game ul li {display: inline-flex;width:49.4%;padding:0 6px}
    .con_w .cl .cl_game ul li:nth-child(1),.con_w .cl .cl_game ul li:nth-child(2){display: inline-flex;}
    .con_w .cl .cl_game ul li:nth-child(1) a,.con_w .cl .cl_game ul li:nth-child(2) a {color: #1f7aff; }
    .cl.active {display: block !important;}
    .black_cover {background: rgba(0,0,0,0.5);width:100%;height:100%;position: fixed;left:0;top:62px;display:none;z-index: 9;}
    .black_cover.active {display:block}
    #wrap {min-width: 100%;height:inherit}
    .con_w > .cc {width: 100%; padding: 5px !important;border-radius: 0;}
    .bet_slip {display: none;z-index: 99;position: fixed;right: 0;top: 56px;width: 100%;padding-bottom: 45px;}
    .bet_slip.active {display:block;}
    .bc_ttl.useri.dpnone {display: none;}
    .bc_ttl.useri.dpblock {display: flex;}
    .bc_ttl.carti.dpnone {display: none;}
    .bc_ttl.carti.dpblock {display: flex;}
    .cr_slip.dpnone {display: none;}
    .cr_slip.dpblock {display: block;}
    .right_user.dpnone {display: none;}
    .right_user.dpblock {display: flex;}
    .top_w .spot .tr_btnwrap.loginbefore {display: inherit;margin-left: 22px;}
    .top_w .spot .tr_btnwrap {display: none;}
    .bc_ttl {display: none;position: fixed;top: 0;right: 0;background: linear-gradient(180deg, #696864 0, #1c1c14);flex-wrap: wrap;margin-top: 0;padding: 40px 10px 20px 10px;gap: 5px;z-index: 9;margin-right: 0;}
    .bc_ttl button.btn-close {position: absolute;right:10px;top:10px}
    .bc_ttl > div { display: flex;align-items: center;width: 49.2%;justify-content: space-between;background: rgba(0,0,0,0.3);padding: 5px 5px;border-radius: 4px;border: 1px solid #222;}
    .bc_ttl > div > span {width: inherit;justify-content: left;}

    .bc_ttl > div.topright {border:0;background:none;width:100%;padding:0}
    .bc_ttl > div.topright a {width:49%;background:#ff6600;color:#fff;border-radius: 4px;height: 30px;display: flex;align-items: center;justify-content: center;;}

    .mtm56 {margin-top: 0;}

    .main_gamelist {padding: 0 0;padding-bottom: 20px;}
    .main_gamelist .item_list {gap:5px;justify-content: space-between;}
    .main_gamelist .item_list>a {width: 49.2%;height: 152px;}
    .main_gamelist .item_list>a h2 { font-size: 22px;bottom: 10%;}

    .main_gamelist .nav-tabs {margin-bottom: 20px;}

    .main_icon {flex-wrap: wrap; padding: 0;padding-top: 20px;gap:5px}
    .main_icon > div {flex:0 0 49.3%}
    .main_icon > div h4 {font-size: 14px;height: 25px;}

    .check_w .check_cal .tit {height:65px;}
    .check_w .check_cal .tit .num {margin-top: 10px;}
    .slide_banner {padding:0}
    .top_w .spot {height: 56px;padding: 0 10px;flex-wrap: wrap;}
    .top_w .spot .fi-rr-menu-burger {font-size: 24px;color: #ffcc00;position: absolute;left: 10px;top: 14px}
    .top_w .spot .logo {margin:0;display: flex;align-items: center;justify-content: center;}
    .top_w .spot .logo img {height:44px;margin-left: 5px;}
    .top_w .spot .main_menu {display: none;width: 100%;width: 100%;flex-wrap: wrap;height: auto; margin-right: 0;}
    .top_w .spot .main_menu.active {display:flex;}
    .top_w .spot .tr_btnwrap a {padding: 5px 8px;font-size: 12px;height: 32px;min-width:70px}
    .top_w .spot .fi-rs-circle-user {font-size: 24px;color: #ffcc00;position: absolute;right: 10px;top: 14px;}
    .top_w .spot2 {display: none;}
    .top_w .spot2.active {display: block;}

    .top_w .spot .main_menu a { width: 25%;padding: 0;justify-content: center;font-size: 14px;height: 35px;}
    .top_w .spot .main_menu a i {font-size: 16px; margin-right: 2px;}

    .top_w .spot2 .inner {width:100%;flex-wrap: wrap;padding: 10px 10px 10px 10px;gap: 4px;height: auto;}
    .top_w .spot2 .inner a {font-size: 13px;width: 24.0%;display: flex;align-items: center;justify-content: center;background:linear-gradient(180deg, #6933a1, #1b0339);border-radius: 3px;height: 30px;}

    .title {font-size: 18px;}
    .main_banner {gap:0;padding:0;    flex-wrap: wrap;}
    .main_banner > div {width: 100%;}
    .main_banner > div.left_banner {height:200px;margin-top:5px}
    .main_banner > div.left_banner img.logo {height:50px;margin-top:10px;}
    .main_banner > div.left_banner .text p {font-size: 14px;;}

    .slide_banner .carousel-item .banner_text {left:5%;top:10%}
    .slide_banner .carousel-item .banner_text h6 {font-size: 16px;margin-bottom:5px}
    .slide_banner .carousel-item .banner_text h5 {font-size: 21px;}
    .slide_banner .carousel-item .banner_text div.text {font-size: 13px;}
    .slide_banner .carousel-item .banner_text a {display: none;}
    .slide_banner img {width: 100%;}
    
    .mp_icon {gap: 5px;margin: 5px auto;padding: 0 5px;}
    .mp_icon a {width:100%;height:140px;margin-top:20px;}
    .mp_icon a img {height: 135px;right:5px;}
    .mp_icon a h5 {top:45px;left:15px;font-size: 21px;width: 40%;}
    .mp_icon a h5 small {margin: 0;}
    .mp_icon a div.text {bottom:73px;left:10px;display: none;}
    .mp_icon a.n3 {width:100%;height: 120px;}
    .mp_icon a:nth-child(4) img, .mp_icon a:nth-child(5) img {height: 160px;}
    .main_bbs {padding: 0 0px;flex-wrap: wrap;height: inherit;padding-top:20px}
    .main_bbs > div {width: 100%;}

    .board_list table .ii_name {width: inherit;}
	.spade_w.list li {width: calc(100% / 2 - 10px);}

	.ch_select {  position:relative;}
	.ch_select dt { font-size:13px; font-weight: normal;cursor:pointer;width:100%; height:35px; line-height:35px;  background:rgba(255, 255, 255, 0.1);  padding:0 10px;  position:relative;  border: 1px solid rgba(255, 255, 255, 0.2); border-radius:60px;;}
	.ch_select dt i { position:absolute; right:10px; top:12px; display:block;}
	.ch_select dt:hover {background:rgba(255, 255, 255, 0.15);}
	.ch_select > ul { position:absolute; top:40px; left:0; width:100%; background:#2f3139; z-index:1000;border:1px solid #595b61; overflow:hidden; border-radius:20px;}
	.ch_select > ul > li { border-bottom:1px solid rgba(255, 255, 255, 0.2); padding:8px; overflow:hidden; cursor:pointer;}
	.ch_select > ul > li:hover {  background:rgba(0, 0, 0, 0.1);}
	.ch_select > ul > li > i { display:block; float:left; width:20px;}
	.ch_select > ul > li > i:before { font-size:16px; color:#be0000; position:relative; top:3px;}
	.ch_select > ul > li > p { float:left; width:calc(100% - 20px);}
	.ch_select > ul > li > p > b { color:#be0000; display:block; font-size:14px;}

    .footer-wrap {
        width: 100%;
        margin-left: 10px;
        height: auto;
        padding-top: 0px;
        display: inline-block;
    }

    .footer-wrap .link-bl div {
        float: none;
        width: calc( 100% - 0px );
        border-right: none;height: 80px;;
        border-bottom: 1px solid #2b2b2b;margin-top: 0px;
    }
    .footer-wrap .link-bl div:nth-child(2) {
        height: 60px;
        margin-top: 15px;
        margin-left: -25px;
    }
    
    .footer-wrap .link-bl div:nth-child(3) {
        width: calc( 100% - 0px );
        margin-top: 15px;
        margin-left: -25px;
        padding-bottom: 10vw;
    }
    
    .footer-wrap .foot-end {margin-top: 0px;flex-wrap: wrap;}
    .footer-wrap .foot-end span:nth-child(1) img {
        display: none;
    }
    
    .footer-wrap .foot-end span:nth-child(2) {
        display: none;
    } 
    
    .footer-wrap .foot-end span:nth-child(2) br {
        display: none;
    }
    .foot-end span:nth-child(3) {width: 100%;}
    
    .footer-wrap .foot-end span:nth-child(3) img {
        width: 20.5vw;
        margin-top: 0;
    }
    
    .footer-wrap .foot-end span:nth-child(3) ul li{
        margin-right: 10px;
    }


    .link-bl {}
    .link-bl div:nth-child(3) {display: none;}
    .sub_tab {overflow: auto;margin-bottom: 10px;}
    .cc .bonus_wrap .pd5 {padding:0}
    .cc .bonus li {font-size: 11px;}
    .game_pan .tit .league {width:100%}
    .domestic .dome_w .bet_w .bet {width:92%}
    .domestic .dome_w .bet_w .more {width:8%}
    .game_pan .bet li {padding: 0 4px;}
    .game_pan .bet li span {font-size: 11px;    letter-spacing: -0.5px;}
    .game_pan .bet .home .in_team {text-align: left;}
    .game_pan .bet .away .in_team {text-align: right;}
    .game_pan .bet li span.in_team {width:70%}

    .sports_w {width: 100%;}
    .sports_w .sw_l {width:100%;padding:0;border:0}
    .sports_w .sw_r {width: 100%;padding:0;border:0}

    .spoinner.mw1600 {max-width: 100%;}


    .cart_open {position: fixed;bottom: 15px;right: 10px;width: 60px;height: 60px;border-radius: 30px;background: #063476;text-align: center;display: inline-flex;align-items: center;justify-content: center;color: #fff;z-index: 999;   
         border: 1px solid #1f7aff;box-shadow: 0 0 10px #89b9ff;}
    .cart_open i {display: flex;font-size: 28px;margin-top: 20px;justify-content: center;}
    .cart_open small {position: absolute;top:2px;right:18px;width:20px;height:20px;line-height: 20px;border-radius: 10px;font-size: 10px;background: rgba(0,0,0,0.5);text-align: center;}


    .ttbanner {height:inherit}
    .ttbanner img {width: 140%;}
    .ttbanner img.main {width:140%;left:-20%}
    .ttbanner .title {left:10px;top:10px;    font-size: 16px;}
    .ttbanner .shadows {display: none}
    .ttbanner .cont {font-size: 21px;bottom:-5px;right:0px}
    .ttbanner .cont img {height:40px}
    .bil_casino {gap:5px;    margin-top:5px;margin-bottom: 30px;flex-wrap: wrap;}
    .bil_casino.spade a {width:49.2%}
    .bil_casino.spade  a img.vlogo {height:40px;right:5px;top:5px;}

    .n_live_w .nl_l {width: 100%;}
    .n_live_w .nl_r {margin-left: 0;}
    .charge_w .list1 {padding:10px}
    .list1 > li {padding-left:0}
    .board_write table .btn_money {flex-wrap: wrap;}
    .ipw.ipw2{width: 100%;}
    .board_write table thead th, .board_write table tbody th {padding-left:5px;width:20%}
    .board_write table .btn_money li a {padding: 5px 10px;}
    .charge_list table thead td {font-size: 11px;}
    .board_view table .tit {font-size: 14px;}

    .sub_tab.many {display: flex;overflow: auto;gap:1px}
    .sub_tab.many li {width: auto;}
    .sub_tab li a{font-size: 12px;}
    .history .total {flex-wrap: wrap;height:inherit;padding:0 5px}
    .history .total .txt {width:94%;flex-wrap: wrap}
    .history .total .txt > li {font-size: 11px;}
    .history table thead td:nth-child(2) , .history table thead td:nth-child(3) , .history table thead td:nth-child(7) {display: none;}
    .history table tbody td {word-break: break-all;}
    .history table .type {display: none;}
    .history table .league {display: none;}
    .history table .time {font-size: 11px;width: 5%;}
    .history * {font-size: 11px;}
    .history table .score {display: none;}
    .history table .home, .history table .away {width: 34%;}
    .result .dome_w .bet_w .score {display: none;}

    .board_list table .num {width: 50px;font-size: 11px;}
    .board_list table .num .hot {font-size: 11px;letter-spacing: 0px;}


}




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

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

.right-menu-btn .open-icon {
    transition: 0.3s;
    opacity: 0;
    transform: rotate(-45deg);
    position: absolute;
    left: 0;
    top: 0;
}

.right-menu-btn.opened .open-icon {
    opacity: 1;
    transform: rotate(0deg);
    font-size: 22px;
    position: absolute;
}

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

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

/* - - - - - - - - - - Banner Queries - - - - - - - - - - */

@media(max-width:1300px){

    .banner-section {
        height: 400px;
    }

    .logo {
        width: 300px;
        margin-bottom: 20px;
    }

    .banner-carousel {
        margin-bottom: 15px;
    }

}

@media(max-width:1140px){

    .banner-section {
        height: 32vw;
    }

    .logo {
        width: 24vw;
        margin-bottom: 1.8vw;
    }

    .banner-carousel {
        margin-bottom: 1vw;
    }

    .banner-carousel .carousel-item {
        padding: 0 0 1vw;
    }

    .banner-carousel h1 {
        font-size: 3.52vw;
    }

    .banner-carousel h2 {
        font-size: 2.8vw;
    }

    .carousel-indicators {
        height: 1.76vw;
    }

    .carousel-indicators li {
        height: calc(100% - 2px);
    }

    .banner-background .casino-items {
        left: -5.25%;
    }

    .banner-background .dealer-02 {
        left: -10.25%;
    }

    .banner-background .dealer-01 {
        left: 5%;
    }

    .banner-background .panda {
        right: -3.5%;
    }

    .banner-background .slot-girl {
        right: 10.75%;
    }

    .banner-background .golf-ball {
        right: 23.75%;
    }

    .banner-background .frog  {
        right: 5.75%;
    }

}

@media(max-width:1140px) {
    .banner-background {
        width: 108%;
        left: -4%;
    }
}

@media(max-width:1024px) {
    .banner-section:before {
        background-size: cover;
    }
}

@media(max-width:500px) {
    .banner-background .dealer-02 {
        left: -3%;
    }

    .banner-background .dealer-01 {
        left: 11.75%;
    }

    .banner-background .dealer-04 {
        right: -2%;
    }

    .banner-background .dealer-03 {
        right: 10.4%;
    }
}

@media(max-width:840px){ 

    .banner-section {
        height: 35vw;
    }

    .logo {
        width: 32vw;
        margin-bottom: 1.8vw;
    }

    .banner-carousel {
        margin-bottom: 2vw;
    }

    .banner-carousel .carousel-item {
        padding: 0 0 2vw;
    }

    .banner-carousel h1 {
        font-size: 4.22vw;
    }

    .banner-carousel h2 {
        font-size: 3.5vw;
    }

    .carousel-indicators {
        height: auto;
        padding: 0;
        background-color: rgba(0, 0, 0, 0);
        box-shadow: none;
        border: none;
        border-radius: 0;
    }

    .carousel-indicators li {
        width: 30px;
        height: 5px;
        border-radius: 2.5px;
        margin: 0 3px;
    }

    .banner-background .golf-ball {
        bottom: 26%;
    }

}

@media(max-width:500px){ 
    .banner-carousel {
        margin-bottom: 3vw;
    }

    .banner-carousel .carousel-item {
        padding: 0 0 3vw;
    }

    .carousel-indicators li {
        width: 30px;
        height: 3px;
        margin: 0 3px;
    }

}


/* - - - - - - - - - - Main Queries - - - - - - - - - - */

@media(max-width:1360px){

    .board-panel {
        width: 100%;
        max-width: 700px;
        margin: 10px auto;
    }

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

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

    .realtime-board {
        width: 100%;
        max-width: 700px;
        margin: 10px auto;
        order: 1;
    }

}

@media(max-width:1300px){

    .main-menu li {
        padding: 0;
    }

    .before-login .input-panel {
        width: 160px;
    }

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

}

@media(max-width:1140px){

    .header-section {
        height: auto;
    }

    .header-section .container {
        padding: 0;
    }

    .main-menu {
        width: 100%;
        height: 50px;
        border-bottom: solid 1px rgba(0, 0, 0, 0.5);
    }

    .main-menu .bs-ul {
        width: 100%;
        height: 100%;
        table-layout: fixed;
    }

    .main-menu .bs-ul li {
        height: 100%;
    }

    .main-menu .bs-ul li a {
        width: 100%;
        height: 100%;
    }

    .bal-container {
        width: 100%;
        padding: 8px 0;
        border-top: solid 1px rgba(255, 255, 255, 0.1);
    }

    .before-login .input-panel {
        width: 200px;
    }

}

@media(max-width:1024px){

    .toggle-btn {
        height: 80px;
        margin: 0;
    }

    .toggle-btn .text-panel:before, 
    .toggle-btn .text-panel:after {
        height: 90%;
    }

    .toggle-btn .icon-panel {
        width: 100px;
    }

    .toggle-btn .text-panel {
        font-size: 18px;
    }

    .toggle-btn .icon-panel .img-panel .icon-img {
        width: 180px;
        transform: skew(20deg) translateX(0);
    }

    .toggle-btn:last-child .icon-panel .img-panel .icon-img {
        width: 180px;
        transform: skew(-20deg) translateX(0);
    }

    .sc-btn {
        width: calc(25% - 18px);
    }
    
    .scroll-top {
        bottom: 10px;
        right: 10px;
    }

}

@media(max-width:767px){

    .mobile {
        display: block !important;
    }
	
	.mobile-flex {
        display: flex !important;
    }

    .desktop {
        display: none !important;
    }

    .header-section:before {
        width: 100%;
        height: 109px;
        left: 0;
        top: 0;
        background-image: url(../img/bg/header-bg.jpg);
        background-size: 767px 100%;
        background-position: center;
    }

    .after-login .drop-down {
        width: 100%;
        order: 3;
        transition: 0s;
    }

    .after-login .desktop {
        order: 1;
    }

    .after-login .mobile {
        order: 2;
    }

    .drop-down {
        display: none;
    }

    .drop-down-menu{
        width:100%;
        border: none;
        margin: 5px 0 -5px;
        padding:10px 10px;
        transition:0s;
        align-content: flex-start;
        border-radius: 0;
        pointer-events: auto;
        position: relative;
        left: 0;
        transform: translateX(0);
        top: 0;
        opacity: 1;
        box-shadow: none;
    }

    .after-login .account-info .labels {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }

    .after-login .drop-down .mypage-link,
    .after-login .drop-down .message-btn {
        width: calc(50% - 4px);
        margin: 0 2px 5px;
        height: 40px;
        border-radius: 5px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }
    .after-login .drop-down .message-btn i {font-size: 14px;
        margin-right: 5px;
        vertical-align: middle;
        margin-top: -3px;}
    .after-login .account-info .progressbar {
        margin: 0 0 10px;
    }

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

}

@media(max-width:600px){

    .toggle-btn {
        height: 70px;
    }

    .toggle-btn .icon-panel {
        width: 80px;
    }

    .toggle-btn .text-panel {
        font-size: 16px;
        padding-left: 20px;
    }

    .toggle-btn:last-child .text-panel {
        padding-right: 20px;
    }

    .toggle-btn .icon-panel .img-panel .icon-img {
        width: 140px;
    }

    .toggle-btn:last-child .icon-panel .img-panel .icon-img {
        width: 140px;
    }

    .toggle-btn .text-panel .en-text {
        font-size: 10px;
        letter-spacing: initial;
    }

    .sc-btn .logo-panel .g-logo {
        height: 40px;
        bottom: 28px;
    }

    .sc-btn .logo-panel .g-logo img {
        max-width: 100px;
        max-height: 30px;
    }

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

    .board-section {
        padding: 10px 0;
    }

    .realtime-board .realtime-nav button {
        font-size: 16px;
    }

}

@media(max-width:500px){

    .header-section:before {
        height: 98px;
    }

    .main-menu li a {
        font-size: 10px;
    }

    .main-menu li a i {
        height: 22px;
        font-size: 20px;
        margin: 0 0 2px;
    }

    .main-menu li a .fa-building-columns,
    .main-menu li a .fa-coins {
        font-size: 18px;
    }

    .main-menu li a span {
        width: 100%;
        display: inline-block;
        text-align: center;
    }

    .bal-container {
        padding: 5px 0;
    }

    .bal-container .mobile button {
        height: 35px;
    }

    .page-content {
        padding: 10px 0 5px;
    }

    .providers-section {
        margin: 20px 0 0;
    }

    .sc-btn {
        width: calc(33.33% - 10px);
        margin: 0 5px 18px;
    }

    .sc-btn .logo-panel .g-logo {
        bottom: 23px;
    }

    .sc-btn .g-footer {
        height: 25px;
        font-size: 12px;
    }

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

    .rolling-realtime ul li div.amount {
        font-size: 14px;
    }

    .footer-section .footer-providers img {
        max-width: 86px;
        max-height: 24px;
        margin: 10px 7px;
    }

    .footer-section .copyright-text {
        letter-spacing: initial;
    }

}

@media(max-width:414px){

    .toggle-section .container {
        padding: 0;
    }

    .toggle-btn {
        height: 60px;
    }

    .toggle-btn .text-panel {
        font-size: 14px;
        padding-left: 15px;
    }

    .toggle-btn:last-child .text-panel {
        padding-right: 15px;
    }

    .sc-btn {
        width: calc(50% - 10px);
        margin: 0 5px 18px;
    }

}

@media(max-width:375px){

    .toggle-btn .icon-panel {
        width: 70px;
    }

    .toggle-btn .icon-panel .img-panel .icon-img {
        width: 120px;
    }

    .toggle-btn:last-child .icon-panel .img-panel .icon-img {
        width: 120px;
    }
}

/* - - - - - - - - - - Modal Queries - - - - - - - - - - */

@media(max-width:1024px){

    /*.modal-content {
        min-height: auto;
        flex-wrap: wrap;
        align-content: flex-start;
        align-items: flex-start;
    }*/

    .modal-close-btn {
        width: 50px;
        height: 50px;
        top: 8px;
        right: 5px;
    }

    .no-sidebar .modal-close-btn {
        top: 3px;
        right: 0;
    }

    .modal-close-btn:before, .modal-close-btn:after {
        background-color: #93bb54;
    }

    .modal-sidebar {
        width: 100%;
        border-radius: 10px 10px 0 0;
        border-bottom: none;
    }

    .modal-sidebar .header .fa-bars {
        order: 1;
        margin: 0 10px 0 0 !important;
    }

    .modal-sidebar .header .title {
        order: 2;
        margin-right: auto;
    }

    .modal-menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 0 5px;
    }

    .modal-menu li {
        width: 33.33%;
        padding: 2px;
    }

    .modal-menu li a {
        height: 45px;
        border-radius: 5px;
    }

    .modal-menu li a.active {
        font-family: NotoSansKr-Bold;
        color: rgba(0, 0, 0, 0.75);
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
        background-image: linear-gradient(#f7ef0f, #d29f00);
    }

    .modal-menu li a.active i {
        color: rgba(0, 0, 0, 0.75);
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
    }

    .modal-panel {
        width: 100%;
        border-radius: 0 0 10px 10px;
    }

    .modal-title {
        width: calc(100% - 20px);
        max-width: 100%;
        margin: 0 auto;
        background-color: transparent;
        background-image: none;
        border-radius: 0;
        border-top: none;
        border-bottom: solid 1px rgba(255, 255, 255, 0.05);
        box-shadow: none;
    }

    .no-sidebar .modal-title {
        height: 50px;
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 10px 10px 0 0;
    }

}

@media(max-width:767px) {

    .modal-sidebar .header {
        margin-bottom: 5px;
    }

    .modal-menu li a {
        height: 40px;
        font-size: 12px;
        border-radius: 5px;
    }

    .modal-menu li a .icon-panel {
        width: 25px;
        margin-right: 0;
        font-size: 14px;
    }

    .modal-list .bs-ul {
        flex-wrap: wrap !important;
        justify-content: flex-start;
    }

    .modal-list .bs-ul li {
        width: 33.33%;
    }

    .level-information {
        height:auto !important;
        padding: 5px 10px !important;
    }

    .level-information .bs-ul {
        width: 100%;
    }

    .level-information .bs-ul li {
        width:calc(50% - 3px);
        height: 40px;
        margin-right: 6px;
    }

    .level-information .bs-ul li:last-child {
        margin-right: 0;
    }

    .level-information .bs-ul li .labels {
        margin-right: 10px;
    }

    .level-information .point-form{
        width:100%;
        margin: 5px 0 0;
    }

}

@media(max-width:600px){

    .no-sidebar .modal-title i {
        font-size: 18px;
        margin-right: 8px;
    }

    .no-sidebar .modal-title .title{
        color:#ffffff;
        font-size: 18px;
    }

}

@media(max-width:500px) {

    .modal-menu li {
        padding: 1px;
    }

    .modal-menu li a {
        height: 35px;
        justify-content: flex-start;
        padding-left: 10px;
    }

    .modal-menu li a .center {
        min-width: auto;
    }

    .modal-list a {
        font-size: 12px;
    }

    .modal-body {
        padding: 10px 10px 20px;
    }

    .loginModal .modal-body {
        padding-top: 30px;
        padding-bottom: 50px;
    }

    .modal-info {
        height: 60px;
        border-radius: 5px;
        margin: 0 0 20px;
        font-size: 12px;
        padding-left: 10px;
        padding-right: 5px;
    }

    .form-footer {
        margin-top: 30px;
    }

    .bs-table tr .count-td {
        width: auto;
        padding: 0 2px;
    }

    .bs-table tr td a {
        max-width: 180px;
    }

    .bs-table tr .title-td {
        max-width: 180px;
        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 thead th {
        font-size: 12px;
    }

    .joinModal .modal-info {
        height: auto;
        padding: 14px 5px;
    }

    .joinModal .modal-info button {
        width: 100%;
        max-width: 200px;
        margin: 10px auto 0 !important;
    }

}

/* - - - - - - - - - - Gamelist Queries - - - - - - - - - - */

@media(max-width:1340px){

    .game-btn {
        width: calc(20% - 14px);
    }

}

@media(max-width:1160px){

    .game-btn {
        width: calc(25% - 14px);
    }

}

@media(max-width:1024px){

    .gameListModal .modal-panel {
        width: 100%;
    }

    .gameListModal .modal-sidebar {
        width: 100%;
    }

    .gameListModal .modal-body {
        padding: 10px;
    }

    .game-btn {
        width: calc(20% - 14px);
    }

    .game-list-container .scroll-panel {
        width: 100%;
        height: auto;
        margin: 0;
        overflow-y: visible;
        padding: 0;
    }

}

@media(max-width:850px){

    .game-btn {
        width: calc(25% - 14px);
    }

}

@media(max-width:660px){

    .game-btn {
        width: calc(33.33% - 14px);
        margin: 0 7px 14px;
    }

}

@media(max-width:500px){

    .game-btn {
        width: calc(33.33% - 10px);
        margin: 0 5px 10px;
    }

}

@media(max-width:414px){

    .game-btn {
        width: calc(33.33% - 8px);
        margin: 0 4px 8px;
        padding: 1px;
        border-radius: 5px;
    }

    .game-btn .g-panel .g-footer {
        font-size: 10px;
        height: 30px;
    }

    .game-btn .g-panel .g-footer .name-text {
        font-size: 10px;
    }

}

@media(max-width:500px) {

    .form-container .cdb-form .input-container {
        flex-wrap: wrap;
    }

    .form-container .cdb-form .select-input:first-child {
        margin-right: 0;
    }

    .form-container .cdb-form .select-input:nth-child(2) {
        margin-left: 0;
    }

    .form-container .cdb-form .select-input.year {
        width: calc(40% - 2px);
        max-width: 100%;
        margin-top: 5px;
    }

    .form-container .cdb-form .select-input.date-month {
        width: calc(30% - 4px);
        max-width: 100%;
        margin-top: 5px;
    }

    .form-container .cdb-form .select-input.date-month:last-child {
        width: calc(30% - 2px);
    }

    .form-container .form-group .checkbox-input {
        margin-left: auto;
        margin-right: 10px;
    }

}