/* Responsive  Styles */

.mobile {display: none !important;}
.mobile-menu {width: calc(100% - 60px);height: 60px;display: none;left: 0;bottom: 0;position: fixed;z-index: 10;background-color: #040201;align-items: center;justify-content: center;padding: 0 6px;border-top: solid 1px #333;}
.mobile-menu button {width: calc(50% - 8px);height: 35px;border-radius: 18px;border: none;background-color: #1c1a1b;color: #ffffff;margin: 0 4px;}
.mobile-menu button i {color: var(--yellow);margin-right: 5px;}
.logo-mobile {display: none;}
.left-menu-btn {width: 38px;height: 40px;background-color: transparent;border: none;padding: 0;margin: 0 0 2px 5px;position: relative;z-index: 9;}
.left-menu-btn span {width: 100%;display: block;height: 3px;background-color: var(--yellow);margin: 0 0 8px;border-radius: 5px;}
.left-menu-btn span:first-child {position: relative;margin-top: 0;top: 0;transition: top .3s .3s, transform .3s 0s;}
.left-menu-btn span:nth-child(2) {width: 100%;opacity: 1;transition: opacity .3s;}
.left-menu-btn span:last-child {margin-bottom: 0;position: relative;top: 0;transition: top .3s .3s, transform .3s 0s;}
.left-menu-btn.opened span:first-child {top: 11px;transform: rotate(-45deg);transition: top .3s 0s, transform .3s .3s, color .3s .3s;}
.left-menu-btn.opened span:nth-child(2) {opacity: 0;}
.left-menu-btn.opened span:last-child {top: -11px;transform: rotate(45deg);transition: top .3s 0s, transform .3s .3s;}
.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;}
.right-menu-btn.opened .open-icon {opacity: 1;transform: rotate(0deg);font-size: 24px;position: absolute;}
.sn-overlay {width: 100%;height: 100%;position: fixed;z-index: 98;background-color: rgba(11, 2, 16, 0.5);top: 70px;left: 0;pointer-events: none;opacity: 0;transition: 0.3s;}
.sn-overlay.active {opacity: 1;pointer-events: auto;}

/* - - - - - - - - - - Banner Queries - - - - - - - - - - */
@media(max-width:1500px){
.banner-background {width: 128%;left: 50%;transform: translateX(-50%);top:-50px;}
}

@media(max-width:1440px){
.page-header .ph-panel {padding: 0 5px;}
.page-header .ph-panel .title-panel {padding: 0 30px;}
}

@media(max-width:1400px){
.main-menu {margin-left: 230px;margin-right: auto;}
.banner-section {height: auto;}
.banner-carousel {min-width: 56%;margin: 20px auto 40px 10px;}
.banner-carousel .text-panel{height:260px;}
.banner-carousel .text-panel h1 {font-size: 5.2vw;}
.banner-carousel .text-panel h2 {font-size: 3.6vw;}
.banner-carousel .text-panel h3 {font-size: 2.15vw;}
.banner-carousel .text-panel h4 {font-size: 2.00vw;}
.ph-board .labels {padding: 0 15px;}
.ph-board .rolling-realtime {width: 320px;}
.ph-board .new-icon{margin-left:0;}
.ph-board .rolling-realtime ul li div.amount {width: 38%;}
.ph-board .rolling-realtime ul li div.date {width: 27%;}
.customer-board-panel .pirate-bg {width:200px;height:auto;top: -20%;}
}

@media(max-width:1260px){
.banner-carousel .text-panel{height:auto;}
.ph-board .labels i {display: block;}
.ph-board .labels span {display: none;}
}

@media(max-width:1220px){
.main-menu li {padding: 0 20px;}
}

@media(max-width:1180px){
.slot-section {padding-bottom: 10px;}
.board-container {width: 100%;margin: 0;}
.board-container .board-col {width: 100%;max-width: 767px;margin: 0 0 25px;}
.board-container .board-col:nth-child(1) {/*order: 2;*/}
.board-container .board-col:nth-child(2) {/*order: 1;*/}
.board-container .board-col:nth-child(3) {/*order: 3;*/margin-bottom: 0;}
.board-panel:last-child {margin-bottom: 0;}
.customer-board-panel .pirate-bg {width:200px;height:auto;top: -20%;}
}

@media(max-width:1150px){
.ph-board {display: none !important;}
.page-header .ph-panel .title-panel:before,.page-header .ph-panel .title-panel:after {display: none;}
}

@media(max-width:1024px){
.mobile {display: block !important;}
.desktop {display: none !important;}
.header-main {width: 100%;height: 60px;background-color: #131415;border-bottom-color: #232324;position: fixed;top: 0;left: 0;z-index: 10000;}
.header-main .logo {display: inline-block;}
.dflex-ac-jc {flex-wrap: wrap !important;}
.logo {width: 120px;left: 0;bottom: -10px;right: 0;margin: 0 auto;}
.header-menu {height: 0;filter: none;position: relative;z-index: 1;}
.header-menu .logo {display: none;}
.sidebar-left{width:180px;height:100%;top:60px;left:-100%;background-color: #2b2b2c;border-right: solid 1px rgba(255, 255, 255, 0.05);margin:0 !important;padding:10px 0 64px;display:block;overflow-y:auto;position:fixed;transition:0.5s;z-index:98;}
.sidebar-left.active{left:0;}
.sidebar-left::-webkit-scrollbar {width:0px;background:transparent;}
.sidebar-left::-webkit-scrollbar-thumb {background:transparent;}
.sidebar-left li{width:100%;height:auto;display:block;padding:0;position: relative;z-index: 1;}
.sidebar-left li:before,.sidebar-left li:after {content: '';width: 100%;height: 1px;position: absolute;left: 0;}
.sidebar-left li:before {top: 0;background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));}
.sidebar-left li:first-child:before {display: none;}
.sidebar-left li:after {bottom: 0;background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));}
.sidebar-left li:last-child:after {display: none;}
.sidebar-left li a{width:100%;height:50px;display:flex;align-items:center;justify-content:flex-start;padding:0 15px;color:#fff;text-shadow:none;margin:0;}
.sidebar-left li a:before{display: none;}
.sidebar-left li a i{width:40px;margin-right: 5px;}
.sidebar-right{width:240px;height:100%;top:60px;right:-100%;background-color: #2b2b2c;border: none;border-left: solid 1px rgba(255, 255, 255, 0.05);margin:0 !important;padding:10px 15px 64px;display:block;overflow-y:auto;position:fixed;transition:0.5s;z-index:98;align-content: flex-start;transform: translateX(0);left: auto;opacity: 1;border-radius: 0;pointer-events: auto;}
.sidebar-right.active{right:0;}
.sidebar-right::-webkit-scrollbar {width:0px;background:transparent;}
.sidebar-right::-webkit-scrollbar-thumb {background:transparent;}
.after-login .account-info .labels {padding: 13px 0 !important;}
.after-login .drop-down .mypage-link{height: 40px;}
.banner-section {margin: 10px 0 0;}
.banner-carousel .carousel-inner {padding: 0 76px 30px;}
.carousel-indicators li {width: 40px;height: 6px;}
}

@media(max-width:940px){
.attend_box .attend_table td img {max-width:100% !important;}
}

@media(max-width:767px){
.header-main .container {padding: 0 10px;}
.before-login button {width: 44px;height: 40px;margin-left: 6px;font-size: 18px;}
.logo {z-index: 100;}
.banner-background {width: 162%;top:-50px;}
.banner-background .captain {right: 14%;}
.banner-carousel {margin: 30px auto 40px 10px;}
.banner-carousel .carousel-inner {padding: 0 40px 30px;}
.banner-carousel .text-panel .text-gradient:before {text-shadow: 0 1px 1px #b24c02, 0 2px 2px #de810d, 0 -1px 0 #ffffa0;}
.banner-carousel .text-panel h1 {font-size: 6.2vw;}
.banner-carousel .text-panel h2 {font-size: 4.6vw;}
.banner-carousel .text-panel h3 {font-size: 3.15vw;}
.banner-carousel .text-panel h4 {font-size: 2.55vw;}
.banner-carousel .more-btn {width: 120px;height: 35px;border-radius: 18px;font-size: 14px;margin-top: 15px;}
.banner-carousel .more-btn i {font-size: 14px;}
.carousel-prev, .carousel-next {width: 30px;height: 34px;}
.page-header .ph-panel {}
.page-header .ph-panel .title-panel .title {font-size: 24px;}
.page-header {}
.slot-section .slot-panel {width: calc(100% + 10px);margin: 0 -5px;}
.slot-btn {width: calc(23% - 10px);margin: 0 5px 10px;}
.board-panel table tr td {height: 40px;font-size: 12px;}
}

@media(max-width:600px){
.banner-background {width: 168%;left: 44%;top:-50px;}
.banner-carousel {min-width: auto;margin: 25px auto 25px 0;}
.banner-carousel .carousel-inner {padding: 0 10px 25px;}
.banner-carousel .text-panel {text-align: left;}
.banner-carousel .more-btn {height: 30px;border-radius: 15px;font-size: 12px;margin-top: 15px;border:  solid 1px rgba(255, 255, 255, 0.25);box-shadow: 0 2px 5px rgba(0, 0, 0, 1.0);}
.carousel-prev, .carousel-next {display: none;}
.carousel-indicators {justify-content: flex-start;padding-left: 10px;}
.page-content:after {height: 40px;top: -20px;background-size: 1214px 40px;}
.slot-btn {width: calc(32% - 8px);}
.footer-section .company-logo img {max-width: 100px;max-height: 28px;margin: 7px 6px;}
.footer-section .company-logo .pragmatic {max-height: 40px;}
.marquee_notice {width:600px;}
}

@media(max-width:500px){
.banner-carousel {min-width: auto;margin-bottom: 30px;}
.banner-carousel .carousel-inner {padding: 0 0 25px;}
.banner-carousel .text-panel h1 {margin-bottom: 1% !important;}
.banner-carousel .more-btn {display: none;}
.carousel-indicators {padding-left: 0;}
.carousel-indicators li {width: 30px;height: 4px;margin: 0 3px;}
.page-content {padding: 20px 0 0;}
.page-header .ph-panel {}
.page-header .ph-panel .title-panel .ship-icon {width: 45px;top: -8px;margin-right: 10px;}
.page-header .ph-panel .title-panel .title {font-size: 20px;}
.board-section .board-panel .content table td a {max-width: 200px;font-size: 12px;}
.rolling-realtime ul li div.amount {font-size: 14px;}
.scroll-top {height: 60px;bottom:0;right:0;border-radius: 0;}
.mobile-menu {display: flex;}
.slot-btn .g-hover {height: 60%;}
.slot-btn .g-hover .play-btn {width: 38px;height: 38px;margin: 0 0 3px;font-size: 18px;}
.slot-btn .g-hover .name {font-size: 12px;}
.board-panel .content {padding: 0;}
.modal.show .modal-dialog {margin:0px;}
html::-webkit-scrollbar {width: 0px;}
.mobile_display_none{display:none;};
.board-panel table tr td {height: 40px;font-size: 10px;}
.form-container .infos {font-size:11px;}
.message_box p {font-size:11px;}
}

@media(max-width:414px){
.container {}
.slot-section .slot-panel {width: calc(100% + 8px);margin: 0 -4px;}
.slot-btn {width: calc(50% - 10px);margin: 0 4px 8px;}
.slot-btn .g-footer {width: calc(100% - 4px);height: 28px;bottom: 2px;font-size: 12px;}
.slot-btn .g-logo {height: 40px;}
.slot-btn .g-logo img {max-height: 30px;}
.footer-section .company-logo {padding-bottom: 20px;display: none !important;}
.customer-board-panel .pirate-bg {top: -10%;width:130px !important;height:auto !important;}
.marquee_notice {width:375px;}
}

@media(max-width:375px){
.header-main .container {padding: 0 2px;}
.before-login button {width: 40px;}
.customer-board-panel .pirate-bg {top: -8%;width:100px !important;height:auto !important}
}


/* ========================================== M O D A L ========================================== */
@media(max-width:1260px){ 
.game-btn {width: calc(20% - 14px);}
}

@media(max-width:1024px){
.modal-menu {width: 100%;height: auto;position: relative;padding: 10px 10px 10px;border-bottom: solid 1px rgba(255, 255, 255, 0.15);}
.modal-menu .menu-title {display: none !important;}
.modal-menu .bs-ul {display: flex;flex-wrap: wrap;margin: 0 0 10px;}
.gameListModal .modal-menu .bs-ul {margin-bottom: 0;}
.modal-menu .bs-ul li {width: 16.66%;}
.modal-menu .bs-ul li a {height: 40px;justify-content: center;border-radius: 5px;padding: 0;}
.modal-menu .bs-ul li a .hover-icon {margin-left: 0;display: none;}
.modal-menu .btn-grp {width: calc(100% + 6px);display: flex;flex-wrap: nowrap;margin: 0 -3px;}
.modal-menu .menu-btn {border-radius: 5px;margin: 0 3px;text-align: center;padding-left: 0;}
.modal-panel {width: 100%;}
.level-information .container{ width:25%; }
.level-information .container:first-child{ width:20%; }
.level-information .container span{font-size:12px;}
.level-information .container .labels{ margin-right:0;}
.level-information .container .amount{font-size:14px;}
.level-information .point-form{width:55%;padding:0 5px;}
.level-information .point-form input{width:58%;border-radius:5px 0 0 5px;}
.level-information .points-btn{width:40%;position:relative;right:0;font-size:8px;border-radius:0 5px 5px 0;}
}

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

@media(max-width:700px){
.modal-menu .bs-ul li a i {color: var(--yellow);min-width: 18px;margin-right: 5px;}
}

@media(max-width:660px){
.modal-header {height: auto;padding-top: 20px;padding-bottom: 15px;}
.modal-logo {margin-left: auto; }
.modal-header .information {width: 100%;margin-top: 10px;margin-right: 0;text-align: center;}
.modal-close-btn {width: 30px;height: 30px;position: absolute;right: 10px;top: 10px;}
.modal-menu .bs-ul {margin: 0 0 5px;}
.modal-menu .bs-ul li {width: 33.33%;}
.modal-menu .bs-ul li a i {margin-right: 8px;}
.modal-menu .menu-btn {height: 35px;}
.modal-close-btn:before,.modal-close-btn:after{height:calc(100% - 6px);}
.gameListModal .modal-wrapper {padding: 15px 10px 40px;}
.gamelist-container .scroll-panel {width: 100%;min-height: auto;max-height: initial;margin: 0;overflow-y: visible;padding: 0;}
}

@media(max-width:660px){
.game-btn {width: calc(33.33% - 14px);}
}

@media(max-width:500px){
.modal-container:before {display: none;}
.modal-content:before,.modal-content:after {display: none;}
.modal-logo {width: 180px;}
.modal-wrapper {min-height: auto;padding: 0px;}
.modal-title {height: 50px;font-size: 16px;}
.bs-table tr td a {max-width: 180px;}
.bs-table tr .title-td {max-width: 180px;padding: 0 0 0 5px;}
.bs-table tr .count-td {width: auto;}
.bs-table tr .date-td {width: auto;font-size: 12px;}
.bs-table tr .nav-td {width: auto;padding: 0 4px;}
.bs-table tr .count-tag {width: 20px;height: 20px;margin: 0 0 0 5px;}
.bs-table td .level-txt {width: 100%;text-align: center;}
.gameListModal .modal-wrapper {padding: 15px 6px 40px;}
.game-btn {width: calc(33.33% - 8px);margin: 0 4px 10px;}
}

@media(max-width:414px){
.game-btn .g-panel .g-footer {width: calc(100% - 4px);height: 28px;bottom: 2px;}
.game-btn .g-panel .g-footer .name-text {font-size: 10px;}
.rolling-realtime ul li div.amount {width: 35%;font-size: 11px;}
.rolling-realtime ul li div.date {width: 35%;font-size: 11px;}
}

@media(max-width:375px){
.modal-menu .bs-ul li a {font-size: 12px;}
.loginModal .modal-wrapper {padding-left: 30px;padding-right: 30px;}
}