button, a, input, select, textarea, span {outline: none !important;transition: 0.3s;}
button {padding: 0;}
a:hover {text-decoration: none;}
.w-b, .w-a, .w-ba {position: relative;z-index: 1;}
.w-b:before, .w-a:after,.w-ba:before, .w-ba:after {content: '';position: absolute;pointer-events: none;z-index: -1;}
:root {--yellow: #fff302;--yellow-dark: #4c3d00;--green: #83e576;--red: #fd6c45;}
.text-yellow {color: var(--yellow) !important;}
.text-green {color: var(--green) !important;}
.text-red {color: var(--red) !important;}
.text-gray {color: #cccccc !important;}
.font-small {font-size: 10px;}
.font-s-12 {font-size: 12px !important;}
.font-bold {}
.table-layout-fixed {table-layout: fixed;}
.dflex-ac-jc {display: flex !important;align-items: center;align-content: center;justify-content: center;flex-wrap: wrap;text-align: center;}
.dflex-ac-js {display: flex !important;align-items: center;align-content: center;justify-content: flex-start;flex-wrap: wrap;}
.dflex-ac-je {display: flex !important;align-items: center;align-content: center;justify-content: flex-end;flex-wrap: wrap;}
.dflex-ae-jc {display: flex !important;align-items: flex-end;justify-content: center;flex-wrap: wrap;}
.dflex-as-jc {display: flex !important;align-items: stretch;justify-content: center;flex-wrap: wrap;}
.dflex-acs-jc {display: flex !important;align-items: flex-start;align-content: flex-start;justify-content: center;flex-wrap: wrap;}
.wrapper {width: 100%;min-height: 100%;position: relative;overflow: hidden;}
.bs-ul {list-style: none;margin-bottom: 0;width: auto;display: table;padding: 0;}
.bs-ul li {list-style: none;width: auto;height: auto;display: table-cell;text-align: center;vertical-align: middle;position: relative;}
.container {position: relative;margin: 0 auto;}
.marquee_notice {overflow: hidden;width:800px;height:20px;font-size:12px;font-weight:bold;margin: 0 auto;}
#marquee {text-align:center;height:25px;padding:3px;}

@media (min-width: 1200px) {
	.container {}
}
@media (max-width: 1200px) {
	.container {max-width: 100%;}
}

/* Loading Wrapper */
.loading-wrapper {width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.75);background-image: url(/images/client/icon/loading-transparent.gif);background-repeat: no-repeat;background-position: center;position: fixed;z-index: 1999;opacity: 0;pointer-events: none;transition: 0.3s;}
.loading-wrapper.active {opacity: 1;pointer-events: auto;}

/* Site Button */

.btn-yellow {color: #111111;background-color: var(--yellow);border: none;border-radius: 3px;position: relative;z-index: 1;overflow: hidden;font-weight: bold;}
.btn-gray {color: #ffffff;background-color: #444444;border: none;border-radius: 3px;position: relative;z-index: 1;overflow: hidden;}
.btn-transparent {color: #ffffff;background-color: transparent;border: solid 1px rgba(255, 255, 255, 0.25);border-radius: 3px;position: relative;z-index: 1;overflow: hidden;}
.btn-red {color: #ffffff;background-color: #df4c25;border: none;border-radius: 3px;position: relative;z-index: 1;overflow: hidden;}
.btn-yellow:before,
.btn-gray:before,
.btn-red:before,
.btn-transparent:before {content: '';width: 100%;height: 100%;position: absolute;left: 0;top: 0;transition: 0.3s;z-index: -1;border-radius: 4px;transform: translateY(100%);opacity: 0;}
.btn-yellow:before {background-image: linear-gradient(to right, #ffb93d, #ffae1f);}
.btn-gray:before {background-image: linear-gradient(to right, #666666,#555555);}
.btn-transparent:before {background-image: linear-gradient(to right, #666666,#555555);}
.btn-red:before {background-image: linear-gradient(to right, #be330e,#891e01);}

@media(min-width:1024px){ 
	.btn-yellow:hover:before,.btn-gray:hover:before,.btn-red:hover:before,.btn-transparent:hover:before {opacity: 1;transform: translateY(0);}
	.btn-yellow:hover {color: rgba(0, 0, 0, 0.75);}
}

/* Header Section */
.header-section {width: 100%;position: absolute;left: 0;top: 0;z-index: 99;}
.header-main {width: 100%;height: 80px;background-color: #000000;border-bottom: solid 1px var(--yellow-dark);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.75);}

/* Telegram Carousel */
.telegram-carousel {margin-right: 40px;padding-right: 35px;border-right: solid 1px rgba(255, 255, 255, 0.25);}
.telegram-carousel .icon-img {margin-right: 10px;}
.telegram-carousel .carousel-item .text {font-size: 12px;opacity: 0;display: inline-block;animation: carouselY 4s ease 1 forwards;}
@keyframes carouselY {
	0% {opacity: 0;transform: translateY(-100%);}
	15% {opacity: 1;transform: translateY(0);}
	85% {opacity: 1;transform: translateY(0);}
	100% {opacity: 0;transform: translateY(100%);}
}

/* Before After Login  */
.before-login {display: none;}
.before-login.active {display: block;}
.before-login button {width: 118px;height: 40px;margin-left: 7px;}

/* After Login */
.after-login {display: none;position: relative;}
.after-login.active {display: block;}
.after-login button {width: 110px;height: 40px;margin-left: 5px;box-shadow: 0 1px 2px rgba(0, 0, 0, 1);}
.after-login .nav-btn {width: 50px;height: 38px;position: relative;background-color: #444444;color: #ffffff;border-radius: 5px;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);margin: 0 3px;}
.after-login .nav-btn:hover {background-color: #333333;color: #ffffff;text-shadow: 0 1px 0 rgba(0, 0, 0, 1.0), 0 0 10px rgba(255, 255, 255, 0.25);}
.after-login .active .nav-btn {color: #ffffff;text-shadow: 0 1px 0 rgba(0, 0, 0, 1.0), 0 0 10px rgba(255, 255, 255, 0.25);}
.after-login .message-btn .count {width: 14px;height: 14px;border-radius: 50%;background-color:#df4c26;color: #ffffff;font-size: 8px;position: absolute;right: -8px;top: -2px;text-shadow: none;}
.after-login .mobile button {width: 40px;height: 40px;border-radius: 3px;margin-left: 5px;box-shadow: 0 1px 2px rgba(0, 0, 0, 1);}
.after-login .mobile .logout-btn {height: 42px;}

/* Dropdown */
.drop-down {position: relative;transition: 0.3s;}
.drop-down .toggle-btn {transition: 0s;}
.drop-down .toggle-btn .icon{position: relative;top: 0;transition: 0.3s;}
.drop-down.active .toggle-btn .icon{top: -5px;}
.drop-down:hover .toggle-btn .icon{top: -5px;}
.drop-down .toggle-btn .arrow-icon {color: var(--yellow);font-size: 10px;position: absolute;bottom: 5px;left: 0;right: 0;margin: 0 auto;opacity: 0;transition: 0.3s;text-shadow: none;}
.drop-down.active .toggle-btn .arrow-icon {opacity: 1;bottom: 4px;transform: rotate(180deg);color: var(--yellow-white);}
.drop-down:hover .toggle-btn .arrow-icon {opacity: 1;bottom: 4px;}
.drop-down-menu {width: 240px;position: absolute;left: 50%;transform: translateX(-50%);top: 75%;background-color: #2a2a2a;box-shadow: 0 2px 8px rgba(0, 0, 0, 1);border: solid 1px rgba(255, 255, 255, 0.1);padding: 10px 20px;border-radius: 5px;pointer-events: none;opacity: 0;transition: 0.3s;}
.drop-down.active .drop-down-menu {top: calc( 100% + 5px );opacity: 1;pointer-events: auto;}
.drop-down-menu a {white-space: nowrap;height: 40px;border-bottom: solid 1px rgba(255, 255, 255, 0.03);padding: 0 10px;}
.drop-down-menu a:last-child {border-bottom: none;}

/* Account Info */
.after-login .account-info .row {border-bottom: solid 1px rgba(255, 255, 255, 0.1);cursor: pointer;}
.after-login .account-info .row:last-child {border-bottom: none;}
.after-login .account-info .labels{text-align:left;min-width:90px;display:flex;align-items:center;justify-content:flex-start;font-size: 12px;padding: 0;}
.after-login .account-info .labels .icon{width:24px;height:24px;border-radius:3px;display:flex;align-items:center;justify-content:center;background-color: var(--yellow);color: rgba(0, 0, 0, 0.75);margin-right: 10px;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);}
.after-login .account-info .information{text-align:left;display:flex;align-items:center;justify-content:center;color: var(--green);font-size: 13px;padding: 0 0 0 10px;}
.after-login .account-info .information .symbol{margin-left:3px;}

/* Progress Bar */
.after-login .account-info .progressbar .labels{min-width:initial;}
.after-login .account-info .progressbar .labels .icon{background-image: none;background-color: transparent;}
.progress-panel {width: calc(100% - 34px);height: 24px;background-color: rgba(0, 0, 0, 0.5);border-radius: 5px;border: solid 1px rgba(255, 255, 255, 0.15);overflow: hidden;padding: 1px;}
.progress-panel .percent {/*width: 15%;*/height: 100%;border-radius: 3px;overflow: hidden;color: rgba(0, 0, 0, 0.75);font-size: 12px;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);border:  solid 1px #000000;}
.progress-panel .percent:before {width: 200%;height: 100%;left: 0;top: 0;background-image: linear-gradient(to right, #ffbb2b, #ffad00, #ffbb2b, #ffad00, #ffbb2b);animation: percentAnim 0.5s linear infinite;}
@keyframes percentAnim {
0% {left: 0;}
100% {left: -100%;}
}
.after-login .drop-down .mypage-link{width:100%;height:30px;border-radius:3px;margin: 5px 0;border:none;font-size: 12px;}
.after-login .drop-down .message-btn{width:100%;height:40px;border-radius:3px;margin: 10px 0 0;border:none;background-color: #555555;color:#fff;font-size: 12px;position: relative;}
.after-login .drop-down .message-btn .count{left: 0;top: 0;position: relative;color: var(--red);border-radius: 0;width: auto;height: auto;background-image: none;background-color: transparent;font-size: 12px;margin-left: 8px;}

/* Header Menu */
.header-menu {width: 100%;height: 50px;filter: drop-shadow(0 1px 0 #333334) drop-shadow(0 5px 10px rgba(0, 0, 0, 0.75));transition: 0.3s;}
.affix .header-menu {height: 60px;position: fixed;top: 0;left: 0;filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 1));background-color: #333333;border-bottom: solid 1px rgba(255, 255, 255, 0.1);}
.header-menu .container:before {width: 100%;height: 100%;left: 25px;top: 0;background-image: linear-gradient(to right, #333333, #060606);transform: skew(-20deg);transition: 0.3s;}
.header-menu .container:after {width: 100%;height: 100%;right: -100%;top: 0;background-color: #060606;}

/* Logo */
.logo {width: 215px;position: absolute;left: 15px;bottom: -7px;transition: 0.3s;z-index: 9;}
.affix .logo {width: 110px;bottom: -5px;}
.logo img {position: absolute;left: 0;right: 0;margin: 0 auto;}
.logo div {position: absolute;}
.logo .logo-panel {width: 100%;position: relative;opacity: 0;}
.logo .glow-bg {width: 124.19%;height: 100%;top: -32%;left: -12%;animation: logoGlowBg 12s ease infinite;}
@keyframes logoGlowBg {
0% {opacity: 0;}
5% {opacity: 0;}
15% {opacity: 1;}
95% {opacity: 1;}
100% {opacity: 0;}
}
.logo .rays {width: 121.87%;top: -5%;left: -12%;transform-origin: bottom center;animation: logoRays 12s ease infinite;}
@keyframes logoRays {
0% {opacity: 0;transform: scale(0.5);}
5% {opacity: 0;transform: scale(0.5);}
15% {opacity: 1;transform: scale(1);}
95% {opacity: 1;transform: scale(1);}
100% {opacity: 0;transform: scale(1);}
}

.logo .rays .rays-img {width: 100%;position: relative;animation: logoRaysImg 1s ease infinite;}
@keyframes logoRaysImg {
0% {opacity: 1;}
50% {opacity: 0.5;}
100% {opacity: 1;}
}
.logo .fruit-panel {width: 62.33%;top: 0;animation: logoFruitPanel 12s ease infinite;}
@keyframes logoFruitPanel {
0% {opacity: 0;transform: translateY(-20%);}
8% {opacity: 1;transform: translateY(0);}
95% {opacity: 1;transform: translateY(0);}
100% {opacity: 0;transform: translateY(0);}
}

.logo .fruits {width: 50.7%;top: 3%;left: 4.1%;transform-origin: bottom center;animation: logoFruits 12s ease infinite;}
@keyframes logoFruits {
0% {opacity: 0;transform: scale(0);}
5% {opacity: 0;transform: scale(0);}
9% {opacity: 1;transform: scale(1.1);}
12% {opacity: 1;transform: scale(1);}
95% {opacity: 1;transform: scale(1);}
100% {opacity: 0;transform: scale(1);}
}

.logo .panel {width: 100%;left: 0;bottom: 0;animation: logoPanel 12s ease infinite;}
@keyframes logoPanel {
0% {opacity: 0;transform: translateY(20%);}
2% {opacity: 1;}
8% {opacity: 1;transform: translateY(0);}
95% {opacity: 1;transform: translateY(0);}
100% {opacity: 0;transform: translateY(0);}
}

.logo .panel .panel-img {width: 100%;position: relative;}
.logo .panel .lights-off {width: 95.35%;bottom: 3%;}
.logo .panel .lights-on {width: 96.75%;bottom: 2%;right: 1%;left: 0;margin: 0 auto;animation: logoLightsOn 12s ease infinite;}

@keyframes logoLightsOn {
0% {opacity: 0;}
4% {opacity: 0;}
11% {opacity: 1;}
95% {opacity: 1;}
100% {opacity: 0;}
}

.logo .panel .lights-on-img {width: 100%;position: relative;animation: logoLights 0.5s ease infinite;}
@keyframes logoLights {
0% {opacity: 1;}
50% {opacity: 0;}
100% {opacity: 1;}
}

.logo .panel .maxim {width: 96.75%;top: 8%;animation: logoMaxim 12s ease infinite;}
@keyframes logoMaxim {
0% {opacity: 0;transform: translateY(25%);}
4% {opacity: 0;transform: translateY(25%);}
11% {opacity: 1;transform: translateY(0);}
95% {opacity: 1;transform: translateY(0);}
100% {opacity: 0;transform: translateY(0);}
}

.logo .panel .slot {width: 48.38%;bottom: 10%;left: 1%;animation: logoSlot 12s ease infinite;}
@keyframes logoSlot {
0% {opacity: 0;transform: translateY(-25%);}
4% {opacity: 0;transform: translateY(-25%);}
11% {opacity: 1;transform: translateY(0);}
95% {opacity: 1;transform: translateY(0);}
100% {opacity: 0;transform: translateY(0);}
}

.logo .panel .spark-01 {width: 31.17%;left: -10%;top: -23%;animation: logoSparkOn 12s ease infinite;}
.logo .panel .spark-02 {width: 31.17%;right: -14%;top: 7%;animation: logoSparkOn 12s ease infinite;}
.logo .panel .spark-03 {width: 38.61%;left: 3%;bottom: -10%;animation: logoSparkOn 12s ease infinite;}
@keyframes logoSparkOn {
0% {opacity: 0;}
7% {opacity: 0;}
19% {opacity: 1;}
95% {opacity: 1;}
100% {opacity: 0;}
}

.logo .panel .spark-img {width: 100%;position: relative;}
.logo .panel .spark-01 .spark-img {animation: logoSpark01 1s ease infinite;}
@keyframes logoSpark01 {
0% {opacity: 1;}
50% {opacity: 0.5;}
100% {opacity: 1;}
}

.logo .panel .spark-02 .spark-img {animation: logoSpark02 1.5s ease infinite;}

@keyframes logoSpark02 {
0% {opacity: 1;}
75% {opacity: 0.5;}
100% {opacity: 1;}
}

.logo .panel .spark-03 .spark-img {animation: logoSpark03 1s ease infinite;}
@keyframes logoSpark03 {
0% {opacity: 1;}
25% {opacity: 0.5;}
35% {opacity: 1;}
60% {opacity: 0.5;}
70% {opacity: 1;}
100% {opacity: 1;}
}


/* Main Menu */
.main-menu {height: 100%;}
.main-menu li {height: 100%;padding: 0 25px;}
.main-menu li a {height: 100%;color: #ffffff;padding: 0 5px;}
.main-menu li a:hover {text-shadow: 0 0 10px rgba(255, 255, 255, 0.45);}
.main-menu li a:before {width: 0;height: 2px;transition: 0.3s;bottom: 0;left: 0;right: 0;margin: 0 auto;background-color: var(--yellow);opacity: 0;}
.main-menu li a:hover:before {width: 100%;opacity: 1;}
.main-menu li a i {color: var(--yellow);margin-right: 10px;}

/* Banner Section */
.banner-section {margin: 80px 0 0;padding: 50px 0 0;background-color: #060606;height: 474px;}
.banner-carousel {min-width: 842px;margin-right: auto;}
.banner-carousel .carousel-inner {padding: 0 76px 48px;overflow: visible;}
.banner-carousel .text-panel {max-width: 700px;height: 280px;overflow: hidden;opacity: 0;animation: bannerCarousel 5s ease 1 forwards;}

@keyframes bannerCarousel {
0% {opacity: 0;transform: scale(0.5);}
5% {opacity: 1;transform: scale(1.1);}
10% {opacity: 1;transform: scale(1);}
90% {opacity: 1;transform: scale(1);}
100% {opacity: 0;transform: scale(1.1);}
}

.banner-carousel .text-panel h1 {font-size: 60px;white-space: normal;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;}
.banner-carousel .text-panel h2 {font-size: 55px;}
.banner-carousel .text-panel h3 {margin-top:10px;color: #faeed8;font-size: 36px;}
.banner-carousel .text-panel h4 {color: #faeed8;font-size: 30px;}
.banner-carousel .text-panel .text-gradient { -webkit-background-clip: text;-webkit-text-fill-color: transparent;background-image: -webkit-linear-gradient(#fff102, #fff102, #ffffa2, #ffff17, #ff9800, #fef732);background-size: 100% 100%;position: relative;color:#d6d6d6;}
.banner-carousel .text-panel .text-gradient:before {content:attr(data-text);display:inline-block;background:0 0;top:0;left:0;right:0;margin:0 auto;position:absolute;text-shadow: 0 2px 2px #b24c02, 0 4px 2px #de810d, 0 -1px 0 #ffffa0;z-index:-1;}
.banner-carousel .more-btn {width: 160px;height: 40px;border-radius: 20px;font-size: 18px;margin: 20px 0 0;}
.banner-carousel .more-btn i {font-size: 16px;margin-right: 5px;}
.carousel-prev, .carousel-next {width: 56px;height: 60px;display: inline-block;background-size: 100% 100%;background-image: url(/images/client/icon/carousel-arrow.png);position: absolute;top: 0;bottom: 60px;margin: auto 0;}
.carousel-prev {left: 0;}
.carousel-next {transform: rotateY(180deg);right: 0;}
.carousel-prev:after, .carousel-next:after {width: 100%;height: 100%;left: 0;top: 0;background-size: 100% 100%;background-image: url(/images/client/icon/carousel-arrow-on.png);transition: 0.3s;z-index: 2;opacity: 0;}
.carousel-prev:hover:after, .carousel-next:hover:after {opacity: 1;}

/* Carousel Indicator */
.carousel-indicators {margin: 0 auto;bottom: 0;}
.carousel-indicators li {width: 50px;height: 8px;border-radius: 4px;margin: 0 5px;background-color: #ffffff;border: none;opacity: 1;transition: 0.3s;}
.carousel-indicators li:hover {background-color: #ffffff;}
.carousel-indicators li.active {background-color: var(--yellow);}

/* Banner Background */
.banner-background {width: 1920px;height: calc(100% + 50px);position: absolute;left: 50%;transform: translateX(-50%);/*bottom: 0;*/top:50px;pointer-events: none;}
.banner-background img {position: absolute;bottom: 0;}
.banner-background .banner-bg {width: 58.75%;right: -6%;}
.banner-background .banner-bg-mob {width: 100%;left: 0;display: none;}
.banner-background .glow {width: 15.27%;right: 4%;bottom: -20%;animation: bannerCoinsGlow 1s ease infinite;}
@keyframes bannerCoinsGlow {
0% {opacity: 1;}
50% {opacity: 0.5;}
100% {opacity: 1;}
}
.banner-background .captain {width: 31.46%;right: 11%;transform-origin: bottom right;animation: bannerCaptain 10s ease infinite;}
@keyframes bannerCaptain {
0% {opacity: 0;transform: scale(0.75);}
10% {opacity: 1;transform: scale(1);}
90% {opacity: 1;transform: scale(1);}
100% {opacity: 0;transform: scale(1);}
}
.banner-background .coins {width: 19.69%;right: 25%;transform-origin: bottom center;animation: bannerCoins 10s ease infinite;}
@keyframes bannerCoins {
0% {opacity: 0;transform: scale(0.5);}
5% {opacity: 0;transform: scale(0.5);}
15% {opacity: 1;transform: scale(1);}
50% {opacity: 0;transform: scale(0.95);}
100% {opacity: 0;transform: scale(0.9);}
}

.banner-background .lamp {width: 2.97%;bottom: auto;top: 0;right: 42.75%;transform-origin: top center;animation: bannerLamp 5s ease infinite;}
@keyframes bannerLamp {
0% {transform: rotate(-10deg);}
50% {transform: rotate(10deg);}
100% {transform: rotate(-10deg);}
}

.banner-background .wheel {width: 15.94%;left: -3.6%;bottom: -7%;animation: bannerWheel 8s ease infinite;}
@keyframes bannerWheel {
0% {transform: translateY(0) rotate(0deg);}
50% {transform: translateY(5%) rotate(8deg);}
100% {transform: translateY(0) rotate(0deg);}
}

.banner-background .bottle {width: 7.92%;left: 8.75%;bottom: -12%;animation: bannerBottle 3s ease infinite;}

@keyframes bannerBottle {
0% {transform: translateY(0);}
50% {transform: translateY(-5%);}
100% {transform: translateY(0);}
}

.banner-background .splash {width: 17.5%;left: 38%;opacity: 0.5;transform-origin: bottom center;animation: bannerSplash 5s ease infinite;}
@keyframes bannerSplash {
0% {opacity: 0;transform: scale(0);}
2% {opacity: 0;transform: scale(0);}
12% {opacity: 1;transform: scale(1);}
17% {opacity: 1;}
70% {opacity: 0;transform: scale(0.95);}
100% {opacity: 0;transform: scale(1);}
}

.banner-background .splash-02 {width: 14.59%;left: 15%;transform-origin: bottom center;animation: bannerSplash02 5s ease infinite;}
@keyframes bannerSplash02 {
0% {opacity: 0;transform: scale(0);}
10% {opacity: 0;transform: scale(0);}
20% {opacity: 1;transform: scale(1);}
25% {opacity: 1;}
95% {opacity: 0;transform: scale(0.95);}
100% {opacity: 0;transform: scale(1);}
}
.banner-background .clouds-01 {width: 14.02%;top: 19%;left: 2.25%;animation: bannerClouds01 20s linear infinite;}
@keyframes bannerClouds01 {
0% {opacity: 0;transform: translateX(50%);}
5% {opacity: 1;}
80% {opacity: 1;}
95% {opacity: 0;transform: translateX(0);}
100% {opacity: 0;transform: translateX(0);}
}
.banner-background .clouds-02 {width: 11.67%;top: 18%;left: 42%;animation: bannerClouds02 25s linear infinite;}
@keyframes bannerClouds02 {
0% {opacity: 0;transform: translateX(0);}
5% {opacity: 1;}
80% {opacity: 1;}
95% {opacity: 0;transform: translateX(-50%);}
100% {opacity: 0;transform: translateX(-50%);}
}
.banner-background .clouds-03 {width: 18.23%;bottom: 22%;left: 11%;animation: bannerClouds03 15s linear infinite;}
@keyframes bannerClouds03 {
0% {opacity: 0;transform: translateX(0);}
5% {opacity: 1;}
80% {opacity: 1;}
95% {opacity: 0;transform: translateX(-25%);}
100% {opacity: 0;transform: translateX(-25%);}
}


/* Page Content */
.page-content {padding: 42px 0 0;}
.page-content:before,.page-content:after {width: 100%;height: 100%;left: 0;top: 0;}
.page-content:before {max-height: 500px;background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));}
.page-content:after {width: 200%;height: 67px;top: -34px;background-position: top center;background-repeat: repeat-x;background-image: url(/images/client/bg/waves-bg.png);animation: waveSurface 30s linear infinite;}
@keyframes waveSurface {
0% {left: 0;}
100% {left: -100%;}
}

/* Page Header */
.page-header {position: relative;z-index: 2;}
.page-header .ph-panel {width: 100%;height: 100px;padding: 0 15px;background-image: url(/images/client/main/title-notext.png?v=1);background-position: top center;background-repeat: no-repeat;}
.page-header .ph-panel .title-panel {height: 100%;margin: 0 auto;padding: 0 48px;}
.page-header .ph-panel .title-panel:before,
.page-header .ph-panel .title-panel:after {width: 1px;height: 75%;top: 0;bottom: 0;margin: auto 0;}
.page-header .ph-panel .title-panel:before {left: 0;}
.page-header .ph-panel .title-panel:after {right: 0;}
.page-header .ph-panel .title-panel .ship-icon {position: relative;top: -12px;margin-right: 10px;}
.page-header .ph-panel .title-panel .title {line-height: 100%;color: #ff8f00;font-size: 24px;background: linear-gradient(to bottom, #fdffa9, #ff8f00);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-size: 100% 100%;position: relative;top: -7px;}
.page-header .ph-panel .title-panel .title:before {content:attr(data-text);display:inline-block;background:0 0;top:0;left:0;right:0;margin:0 auto;position:absolute;text-shadow: 0 2px 5px rgba(0, 0, 0, 0.75);z-index:-1;}
.ph-board .labels {height: 30px;padding: 0 22px;border: solid 1px var(--yellow-dark);border-radius: 15px;color: var(--yellow);margin: 0 5px;}
.ph-board .labels i {display: none;}

/* Slot Section */
.slot-section {position: relative;padding: 0 0 20px;}
.slot-section .slot-background {width: 1920px;height: 100%;position: absolute;left: 50%;top: 0;transform: translateX(-50%);pointer-events: none;}
.slot-section .slot-background:before {width: calc(100% + 25px);height: 100%;position: absolute;left: 5px;top: -180px;background-image: url(/images/client/bg/fish-bg.png);background-position: top center;}
.slot-section .slot-background div {position: absolute;}
.slot-section .slot-background img {position: absolute;}
.slot-section .slot-background .fish-img {width: 100%;position: relative;}
.slot-section .slot-background .fish-01 {top: 5%;left: 1.75%;}
.slot-section .slot-background .fish-02 {top: -7%;right: 3.25%;}
.slot-section .slot-background .snail {bottom: 26%;left: 2.5%;}
.slot-section .slot-background .starfish {bottom: 26%;right: 3.75%;}
.slot-section .slot-background .whale {bottom: 0;left: 12.75%;}
.slot-section .slot-background .octopus {bottom: 0;right: 12%;}
.slot-section .slot-background .bubbles-01 {left: 20px;top: -88px;animation: bubbles01 1s ease infinite;}
@keyframes bubbles01 {
0% {opacity: 1;}
50% {opacity: 0.5;}
100% {opacity: 1;}
}

.slot-section .slot-background .bubbles-02 {right: -40px;top: 25px;animation: bubbles01 1s ease infinite;}
.slot-section .slot-background .bubbles-03 {left: -100px;top: 30px;animation: bubbles01 0.5s ease infinite;}
.slot-section .slot-background .bubbles-04 {left: -35px;top: -35px;animation: bubbles01 0.8s ease infinite;}
.slot-section .slot-background .bubbles-05 {left: 30px;top: -150px;animation: bubbles01 1s ease infinite;}


/* Slot Btn */
.slot-section .slot-panel {width: calc(100% + 20px);margin: 0 -10px;}
.slot-btn {width: calc(16.6% - 20px);margin: 0 9px 20px;display: inline-block;position: relative;overflow: hidden;padding: 1px;transition: 0.3s;animation: slotBtnAnim 1s ease 1 backwards;cursor: default;}

@keyframes slotBtnAnim {
0% {opacity: 0;transform: scale(0.5);}
25% {opacity: 1;transform: scale(1.1);}
100% {opacity: 1;transform: scale(1);}
}
.slot-btn:hover {box-shadow: 0 2px 5px rgba(0, 0, 0, 1.0);}
.slot-btn:before {width: 100%;height: 100%;left: 0;top: 0;background-image: linear-gradient(#ff8502, var(--yellow-dark));opacity: 0;transition: 0.3s;}
.slot-btn:hover:before {opacity: 1;}
.slot-btn .g-panel {width: 100%;border: 1px solid #eccf90;overflow: hidden;position: relative;z-index: 1;transition: 0.3s;box-shadow: 0 2px 5px rgba(0, 0, 0, 1.0);}
.slot-btn:hover .g-panel {box-shadow: 0 0 0 rgba(0, 0, 0, 0);}
.slot-btn .g-bg {width: 100%;transition: 0.3s;}
.slot-btn:hover .g-bg {filter: blur(4px);}
.slot-btn .g-char {width: 100%;position: absolute;left: 0;bottom: 0;}
.slot-btn .g-char2 {width: 100%;position: absolute;left: 0;bottom: 20px;}
.slot-btn:hover .g-char {animation: sbCharAnim 0.5s 1 forwards ;}
.slot-btn:hover .g-char2 {animation: sbCharAnim 0.5s 1 forwards ;}
@keyframes sbCharAnim {
0% {opacity: 0;transform: translateY(25%);}
100% {opacity: 1;transform: translateY(0);}
}

.slot-btn .g-logo {width: 100%;height: 58px;position: absolute;left: 0;top: 0;z-index: 1;}
.slot-btn .g-logo img {max-width: 90%;transition: 0.3s;filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));}
.slot-btn:hover .g-logo img {filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 1));}
.slot-btn:hover .g-logo img {animation: sbLogoAnim 0.5s 1 forwards ;}
@keyframes sbLogoAnim {
0% {opacity: 0;transform: scale(0.5);}
100% {opacity: 1;transform: scale(1);}
}

.slot-btn .g-footer {width: calc(100% - 10px);height: 35px;position: absolute;left: 0;right: 0;bottom: 6px;margin: 0 auto;z-index: 1;transition: 0.3s;}
.slot-btn .g-footer span {font-size:20px;line-height: 30px;font-weight: bold;color: #fff;text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}

.slot-btn:hover .g-footer {opacity: 0;}
.slot-btn .g-hover {width: 100%;height: 50%;position: absolute;left: 0;bottom: 0;z-index: 2;transition: 0.3s;opacity: 0;transform: translateY(100%);}
.slot-btn:hover .g-hover {transition-delay: 0.2s;opacity: 1;transform: translateY(0);}
.slot-btn .g-hover:before {width: 100%;height: 125%;left: 0;bottom: 0;background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));}
.slot-btn .g-hover .play-btn {width: 50px;height: 50px;border-radius: 50%;margin: 0 0 8px;border: none;box-shadow: 0 2px 5px rgba(0, 0, 0, 1.0);background-image: linear-gradient(#ffe202, #ff6000);;color: rgba(0, 0, 0, 0.75);text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);font-size: 20px;}
.slot-btn .g-hover .name {width: 100%;display: inline-block;color: #ffffff;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);}

/* Board Section */
.board-section {margin-bottom:20px;padding: 50px 0 20px;background-color: rgba(0, 0, 0, 0.8);background-position: bottom center;background-repeat: no-repeat;border-top: solid 1px rgba(255, 255, 255, 0.1);box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.75), 0 5px 10px rgba(0, 0, 0, 1.0);}
.board-section:before,.board-section:after {width: 100%;height: 100%;min-width: 1920px;left: 50%;transform: translateX(-50%);top: 0;background-repeat: no-repeat;}
.board-section:before {background-position: top 20px left;}
.board-section:after {background-position: top right;}
.board-container {width: calc(100% + 16px);margin: 0 -8px;}
.board-container .board-col {width: calc(33.33% - 16px);margin: 0 8px;}
.board-panel {width: 100%;}
.board-panel .header {width: 100%;height: 50px;background-color: rgba(0, 0, 0, 0.5);border-radius: 5px;border-bottom: solid 1px var(--yellow);padding: 0 12px;}
.board-panel .header .title-panel {color: var(--yellow);font-size: 18px;margin-right: auto;line-height: 50px;}
.board-panel .header .more-btn {width: 75px;height: 24px;border-radius: 12px;color: var(--yellow);font-size: 12px;border: solid 1px var(--yellow-dark);background-color: transparent;}
.board-panel .header .more-btn:hover {color: rgba(0, 0, 0, 0.8);background-color: var(--yellow);}
.board-panel .content {width: 100%;margin: 10px 0 0;padding: 0 15px;position: relative;}
.board-panel table {width: 100%;}
.board-panel table tr td {height: 30px;font-size: 13px;}
.board-panel table .num-td{width: 100px;color: #fff;text-align: center;white-space: nowrap;}
.board-panel table .date-td{width: 20%;color: #fff;text-align: right;white-space: nowrap;}
.board-panel table td a{color: #bbbbbb;font-size: 13px;display:inline-block;vertical-align:middle;max-width:100%;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;overflow: hidden;}
.board-panel table td a:hover{color: var(--yellow);}
.board-panel th {border-bottom: solid 1px #626262;padding-bottom: 10px;font-size: 14px;}

/* Withdrawal Board */
.withdrawal-board-panel {width: 100%;background-color: #000000;border-radius: 5px;border: solid 1px var(--yellow-dark);padding: 0 0 20px;/*min-height: 476px;*/}
.withdrawal-board-panel .header {width: 100%;max-width: 460px;height: 94px;background-size: 100% 100%;margin: -40px auto 0;position: relative;z-index: 1;}
.withdrawal-board-panel .header .title {line-height: 100%;width: 100%;text-align: center;display: inline-block;color: var(--yellow);font-size: 24px;-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-image: -webkit-linear-gradient(var(--yellow), #a77c0d);background-size: 100% 100%;position: relative;margin: 23px 0 0;}
.withdrawal-board-panel .header .title:before {content:attr(data-text);display:inline-block;background:0 0;top:0;left:0;right:0;margin:0 auto;position:absolute;text-shadow: 0 2px 2px rgba(0, 0, 0, 0.75);z-index:-1;}
.withdrawal-board-panel .header .sub {width: 100%;text-align: center;display: inline-block;color: #ffea8d;font-size: 14px;margin: 7px 0 0;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);}

/* Rolling Realtime */
.rolling-realtime {width: 100%;}
.ph-board .rolling-realtime {width: 360px;background-color: rgba(0, 0, 0, 0.5);border-radius: 16px;}
.rolling-realtime ul {width: calc(100% - 30px);left: 15px;}
.rolling-realtime ul li {display: flex;align-items: flex-start;justify-content: center;height: 50px;cursor: pointer;transition: 0.3s;}
.ph-board .rolling-realtime ul li {height: 32px;}
.rolling-realtime ul li div {height: 100%;display: flex;align-items: center;justify-content: flex-end;color: #ffffff;font-size: 14px;transition: 0.3s;white-space: nowrap;border-bottom: solid 1px rgba(255, 255, 255, 0.1);}
.rolling-realtime ul li:hover div {background-color: rgba(255, 255, 255, 0.05);}
.ph-board .rolling-realtime ul li div {border-bottom: none;}
.rolling-realtime ul li div.user {width: 35%;justify-content: flex-start;padding-left: 5px;}
.ph-board .rolling-realtime ul li div.user {padding-left: 0;}
.rolling-realtime ul li div.user .icon {margin-right: 5px;position: relative;top: 2px;}
.rolling-realtime ul li div.amount {font-size: 16px;color: var(--green);width: 35%;}
.ph-board .rolling-realtime ul li div.amount {font-size: 14px;font-family: noto-sans-kr;}
.rolling-realtime ul li div.date {color: #808080;width: 30%;text-align: right;padding-right: 5px;}
.ph-board .rolling-realtime ul li div.date {font-size: 12px;padding-right: 0;}
.rolling-realtime ul li div.title {width: 75%;text-align: left;font-size: 12px;}
.rolling-realtime ul li div.title a {color: #ffffff;display:inline-block;vertical-align:middle;max-width:100%;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;overflow: hidden;}
.new-icon{min-width:16px;height:16px;display:inline-block;vertical-align: middle;color:#fff;font-size:10px;border-radius:3px;padding:0;background-color: #df4c26;text-align:center;margin-left:8px;box-shadow: 0 0 10px rgba(253, 126, 103, 0.25);}

/* Customer Board */
.customerModal .customer-board-panel {width: calc(100% - 30px);max-width: 490px;margin: 0 auto;}
.customer-board-panel .pirate-bg {width:220px;position: absolute;top: -32%;right: -12%;z-index: 1;pointer-events: none;}
.customerModal .customer-board-panel .pirate-bg {right: -16%;width:220px;}
.customer-board-panel .bs-ul {width: 100%;display: block;}
.customer-board-panel .bs-ul li {width: 100%;height: 110px;padding: 10px 0 0 30px;z-index: auto;}
.customer-board-panel .bs-ul li:before {width: calc(100% + 60px);height: calc(100% + 19px);background-size: 100% 100%;top: -9px;left: -30px;z-index: auto;}
.customer-board-panel .bs-ul li .labels {font-size: 16px;text-shadow: 0 1px 2px rgba(0, 0, 0, 1.0);margin-right: 10px;position: relative;z-index: 2;}
.customer-board-panel .bs-ul li .icon-img {margin-right: 10px;filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));}
.customer-board-panel .bs-ul li .information {font-size: 18px;text-shadow: 0 1px 2px rgba(0, 0, 0, 1.0);position: relative;z-index: 2;}
.customer-board-panel .warning {margin: 20px 0 0;padding: 20px 0 0;border-top: solid 1px rgba(255, 255, 255, 0.1);}


/* Footer Section */
.footer-section {width: 100%;background-color: rgba(0, 0, 0, 0.75);background-repeat: no-repeat;background-position: bottom 65px center;box-shadow: inset 0 5px 10px rgba(0, 0, 0, 1.0);border-top: solid 1px rgba(255, 255, 255, 0.1);}
.footer-section:before {width: 50%;height: 1px;top: -1px;left: 0;right: 0;margin: 0 auto;background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));}
.footer-section:after {width: 100%;min-width: 1920px;height: 500px;left: 50%;transform: translateX(-50%);top: -245px;background-repeat: no-repeat;background-position: bottom left;animation: shipAnim 4s ease infinite;}
@keyframes shipAnim {
0% {top: -245px;}
50% {top: -220px;}
100% {top: -245px;}
}
.footer-section .company-logo {padding: 20px 0 40px;}
.footer-section .company-logo img {max-width: 104px;max-height: 24px;margin: 8px 12px;}
.footer-section .company-logo .pragmatic {max-height: 48px;}
.copyright-panel {height: 70px;color: #fff;font-size: 12px;letter-spacing: 1px;box-shadow: 0 -2px 5px rgba(0, 0, 0, 1.0);}
.footer-background {width: 100%;min-width: 1920px;height: 100%;min-height: 428px;left: 50%;bottom: 0;transform: translateX(-50%);position: absolute;pointer-events: none;}
.footer-background img {bottom: 0;position: absolute;}
.footer-background div {position: absolute;}
.footer-background div img {width: 100%;position: relative;animation: bubbles01 1s ease infinite;}
.footer-background .skeleton {left: 4%;animation: skeletonAnim 8s ease infinite;}
@keyframes skeletonAnim {
0% {opacity: 0;transform: translateX(-25%);}
5% {opacity: 0;transform: translateX(-25%);}
20% {opacity: 1;transform: translateX(0);}
95% {opacity: 1;transform: translateX(0);}
100% {opacity: 0;transform: translateX(0);}
}
.footer-background .corals-left {left: 0;animation: coralsLeftAnim 8s ease infinite;}
@keyframes coralsLeftAnim {
0% {opacity: 0;transform: translateX(-25%);}
15% {opacity: 1;transform: translateX(0);}
95% {opacity: 1;transform: translateX(0);}
100% {opacity: 0;transform: translateX(0);}
}

.footer-background .bubbles-06 {left: 3.5%;top: 8%;transform-origin: bottom left;animation: bubbleFooterAnim 8s ease infinite;}
@keyframes bubbleFooterAnim {
0% {opacity: 0;transform: scale(0.5);}
10% {opacity: 0;transform: scale(0.5);}
20% {opacity: 1;transform: scale(1);}
95% {opacity: 1;transform: scale(1);}
100% {opacity: 0;transform: scale(1);}
}
.footer-background .anchor {right: 4%;bottom: 5%;transform-origin: bottom center;animation: anchorAnim 8s ease infinite;}
@keyframes anchorAnim {
0% {opacity: 0;transform: rotate(0deg);}
5% {opacity: 0;transform: rotate(0deg);}
15% {opacity: 1;transform: rotate(-15deg);}
25% {opacity: 1;transform: rotate(15deg);}
35% {opacity: 1;transform: rotate(0deg);}
95% {opacity: 1;transform: rotate(0deg);}
100% {opacity: 0;transform: rotate(0deg);}
}

.footer-background .corals-right {right: 0;animation: coralsRightAnim 8s ease infinite;}
@keyframes coralsRightAnim {
0% {opacity: 0;transform: translateX(25%);}
15% {opacity: 1;transform: translateX(0);}
95% {opacity: 1;transform: translateX(0);}
100% {opacity: 0;transform: translateX(0);}
}

.footer-background .bubbles-01 {right: 3%;top: 20%;transform-origin: bottom right;animation: bubbleFooterAnim 8s ease infinite;}

/* Scroll To Top */
.scroll-top {width:60px;height:60px;background-color: var(--yellow);box-shadow: 0 2px 5px rgba(0, 0, 0, 1.0);text-shadow:0 1px 0 rgba(255,255,255,0.5);border:none;border-radius:5px;position:fixed;bottom:20px;right:30px;color: rgba(0, 0, 0, 0.75);font-size:24px;z-index:10;padding:0;}
.scroll-top:hover .fa-anchor {animation: stAnchorAnim 0.8s ease 1 forwards;}
@keyframes stAnchorAnim {
0% {transform: rotate(0deg);}
25% {transform: rotate(15deg);}
50% {transform: rotate(-15deg);}
75% {transform: rotate(10deg);}
100% {transform: rotate(0deg);}
}

.scroll-top .hover {width: 100%;position: absolute;left: 0;top: 0;font-size: 14px;color: #ffffff;transform: translateY(-50%);padding: 0 0 5px;text-shadow: 0 1px 2px rgba(0, 0, 0, 1.0);transition: 0.3s;opacity: 0;}
.scroll-top:hover .hover {transform: translateY(-100%);opacity: 1;}
.scroll-top .hover i {position: relative;top: 4px;}
.scroll-top .hover span {width: 100%;display: inline-block;}


/*=========================================================== M O D A L ==============================================================*/
.modal-backdrop {background-color: #060606;}
.modal-backdrop.show {opacity: 0.8;}
.modal {padding: 0 !important;overflow-y: auto;}
.modal::-webkit-scrollbar {width: 0;background-color: transparent;}
.modal::-webkit-scrollbar-thumb {background-color: transparent;}
.modal *::-webkit-scrollbar {width: 10px;background: #000000;border-radius: 3px;}
.modal *::-webkit-scrollbar-thumb {background: linear-gradient(var(--yellow-dark), var(--yellow-dark));border: solid 2px #000000;border-radius: 3px;}
.modal-dialog {max-width: 1300px;padding: 0 !important;}
.gameListModal .modal-dialog {max-width: 1500px;}
.loginModal .modal-dialog {max-width: 500px;}
.modal-content {background-color: transparent;border-radius: 0;padding: 0;z-index: 1;}
.modal-content:before,.modal-content:after {width: 367px;height: 187px;background-size: 100% 100%;background-image: url(/images/client/bg/modal-bg.png);}
.modal-content:before {left: -140px;bottom: -60px;}
.modal-content:after {right: -180px;top: -70px;}
.modal-container {width: 100%;background-color: #070707;}
.modal-container:before {width: 194px;height: 152px;background-size: 100% 100%;background-image: url(/images/client/bg/chest-bg.png);right: -100px;bottom: -40px;z-index: 2;}

/* Modal Header */
.modal-header {width: 100%;height: 40px;padding: 0 15px;border-bottom-color: var(--yellow);background-image: linear-gradient(to right, #000000, #000000);position: relative;z-index: 5;}
.modal-logo {width: 224px;display: inline-block; }
.modal-header .information {margin-right: 30px;}
.modal-header .information a {margin-left: 5px;}
.modal-header .information a.text-red:hover {color: var(--yellow) !important;}
.modal-header .information a.text-yellow:hover {color: var(--red) !important;}

/* Modal Close Btn */
.modal-close-btn {width: 40px;height: 40px;background-color: #121110;border-radius: 5px;border: solid 1px rgba(255, 255, 255, 0.15);z-index: 9;}
.modal-body .modal-close-btn {top:  -20px;right: 15px;}
.modal-close-btn:before,.modal-close-btn:after{width:2px;height:calc(100% - 20px);background-color: rgba(255, 255, 255, 0.75);left:0;right:0;top:0;bottom:0;margin:auto;transform:rotate(45deg);transition:0.5s;}
.modal-close-btn:after{transform:rotate(-45deg);}
.modal-close-btn:hover:before{transform:rotate(135deg);background-color: var(--red);}
.modal-close-btn:hover:after{transform:rotate(-135deg);background-color: var(--red);}

/* Modal Menu */
.modal-menu {width: 260px;height: 100%;position: absolute;left: 0;top: 0;background-color: #111111;padding: 15px 0 0 10px;box-shadow: 2px 0 10px rgba(0, 0, 0, 1.0);}
.modal-menu .menu-title {padding: 0 10px 0 5px;margin: 0 0 20px;}
.modal-menu .menu-title i {color: #838383;}
.modal-menu .bs-ul {width: 100%;display: block;margin: 0 0 30px;}
.modal-menu .bs-ul li {display: block;}
.modal-menu .bs-ul li a {width: 100%;height: 50px;color: #949494;border-radius: 5px 0 0 5px;padding: 0 15px;}
.modal-menu .bs-ul li a.active {color: #ffffff;background-color: #202020;}
.modal-menu .bs-ul li a:hover {color: #ffffff;}
.modal-menu .bs-ul li a i {color: var(--yellow);min-width: 18px;margin-right: 10px;}
.modal-menu .bs-ul li a span {transition: 0s;}
.modal-menu .bs-ul li a .hover-icon {margin-left: auto;opacity: 0;transition: 0.3s;transform: translateX(-10px);}
.modal-menu .bs-ul li a:hover .hover-icon {opacity: 1;transform: translateX(0);}
.modal-menu .bs-ul li a.active:hover .hover-icon {opacity: 0;}
.modal-menu .btn-grp {width: 100%;}
.modal-menu .menu-btn {width: 100%;height: 40px;border-radius: 5px 0 0 5px;margin: 0 0 8px;text-align: left;padding-left: 20px;}
.modal-menu .menu-btn i {min-width: 18px;}

/* Modal Panel */
.modal-panel {width: calc(100% - 260px);margin-left: auto;background-image: url(/images/client/bg/modal-map-bg.png);background-position: bottom 0px left;background-repeat: no-repeat;background-size: contain;}
/*
.customerModal .modal-panel {background-image: url(/images/client/bg/sea-bg.png);background-position: top 61px center;}
*/
.modal-title {width: 100%;height: 60px;background-color: #1a1a1a;background-image: linear-gradient(to right, #1a1a1a, #080808);border-bottom: solid 1px #262626;font-size: 18px;}
.modal-wrapper {min-height: 500px;padding: 0 0 0 0px;}

/* Modal Footer */
.modal-footer {height: 70px;border-top-color: rgba(255, 255, 255, 0.15);font-size: 10px;color: rgba(255, 255, 255, 0.4);letter-spacing: 1px;}

/* Form Container */
.form-container {width: 100%;max-width: 700px;display: inline-block;position: relative;z-index: 2;}
.form-container .form-group {width: 100%;display: inline-block;margin: 0 0 15px;}
.form-container .form-group:last-child {margin: 0 0;}
.form-container .labels {width: 100%;text-align: left;margin: 0 0 8px;color: #999999;font-size: 14px;position: relative;display: flex;align-items: center;}
.form-container .infos {width: 100%;display: flex;align-items: center;}
.form-container .form-group .input-container {width: 100%;float: left;position: relative;display: flex;align-items: center;justify-content: flex-start;}
.form-container .w-btn .input-container {width: calc(100% - 125px);}
.form-container .form-group input {width: 100%;height: 44px;float: left;color: #000000;background-color: #ffffff;border-radius: 3px;border: none;transition: 0.3s;padding: 0 15px;box-shadow: 0 2px 5px rgba(0, 0, 0, 1.0);}
.form-container .form-group input:read-only {color: #b28000;}
.form-container .form-group input::-webkit-input-placeholder {color: #333333;}
.form-container .form-group .input-container .icon-panel{width: 50px;height: 100%;position: absolute;right: 0;top: 0;color: #000000;}
.form-container .form-group .select-input {width: 100%;height: 45px;float: left;background-color: #ffffff;border: none;border-radius: 3px;transition: 0.3s;display: flex;align-items: center;}
.form-container .form-group .select-input select {width: 100%;height: 100%;border: none;color: #333333;background-color: transparent;-webkit-appearance: none;padding: 0 15px;cursor: pointer;}
.form-container .form-group select option {background-color: #1f0a0a;color: #fff;}
.form-container .form-group .select-input i {font-size: 18px;position: absolute;right: 15px;}
.form-container .form-group textarea {width: 100%;height: 200px;float: left;color: #000000;background-color: #ffffff;border: none;border-radius: 5px;transition: 0.3s;padding: 20px 18px;resize: none;}
.form-container .form-group textarea::-webkit-input-placeholder {color: #333333;}
.form-container .form-group .form-btn {width: 120px;height: 44px;border: none;float: right;padding: 0;margin: 0;white-space: nowrap;position: relative;z-index: 1;overflow: hidden;transition: 0.3s;margin: 0 0 0 5px;}

/* Form Btn Group */
.form-container .form-group .infos .btn-grp {width: 100%;float: left;}
.form-container .form-group .infos .btn-grp button {width: 16.66%;width: calc(16.66% - 4px);height: 38px;float: left;margin: 0 2px;background-color: #666666;border: none;border-radius: 4px;color: #ffffff;font-size: 12px;transition: 0.3s;padding: 0;position: relative;z-index: 1;overflow: hidden;box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);}
.form-container .form-group .infos .btn-grp button:hover {background-color: #888888;}
.form-container .form-group .infos .btn-grp button:first-child {margin-left: 0;width: calc(16.66% - 2px);}
.form-container .form-group .infos .btn-grp button:last-child {width: calc(16.66% - 2px);color: #fff;background-color: #df4c25;margin-right: 0;}
.form-container .form-group .infos .btn-grp button:last-child:hover {background-color: #af3f25;}

/* Form Footer */
.form-footer {width: 100%;margin: 30px 0 0;flex-wrap: nowrap;}
.form-footer button {width: 110px;height: 45px;margin: 2px;min-width: 100px;box-shadow: 0 2px 2px rgba(0, 0, 0, 1.0);}
.form-footer .btn-gray {box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);}
.form-footer .btn-transparent {box-shadow: none;}

/* Pagination */
.pagination {margin:10px auto 0 auto;height:30px}
.pagination li {float: left;}
.pagination>li>a {width: 28px;height: 28px;color: #ffffff;text-decoration: none;background-color: #444444;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;margin: 0 2px;border-radius: 3px;position: relative;z-index: 1;transition: 0.3s;overflow: hidden;}
.pagination .turn-pg a {font-size: 12px;margin: 0 13px;background-color: #606060;}
.pagination>li>a:hover {background-color: #808080;}
.pagination .active {background-color: #df4c25;}
.pagination .active:hover {background-color: #df4c25;}

/* BS Table */
.bs-table {width: 100%;border-collapse: separate;border-spacing: 0;}
.bs-table thead th {height: 50px;color: #fff;font-size: 12px;text-align: center;background-color: rgba(0, 0, 0, 0.5);}
.bs-table thead th:first-child {border-radius: 5px 0 0 0;}
.bs-table thead th:last-child {border-radius: 0 5px 0 0;}
.with-depth thead th {border-radius: 5px 5px 0 0 !important;}
.bs-table tr {cursor: pointer;}
.bs-table tr td {height: 50px;color: #fff;font-size: 12px;text-align: center;padding: 1px;transition: 0.3s;background-color: #744c1a;border-bottom: solid 1px rgba(0, 0, 0, 0.4);border-top: solid 1px rgba(255, 255, 255, 0.05);}
.bs-table tr:last-child td:first-child {border-radius: 0 0 0 5px;}
.bs-table tr:last-child td:last-child {border-radius: 0 0 5px 0;}
.bs-table tr:hover td {background-color: #2d2d2d;}
.bs-table tr td a {color: #fff;font-size: 12px;transition: 0.3s;display: inline-block;vertical-align: middle;max-width: 90%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-decoration: none;}
.bs-table tr td a:hover {color: var(--yellow);}
.bs-table tr.active .title-td {color: var(--yellow);}
.bs-table tr.active td a {color: var(--yellow);}
.bs-table tr .count-td {width: 60px;}
.bs-table tr .count-tag {width: 22px;height: 22px;border-radius: 2px;padding: 1px 0;position: relative;z-index: 1;display: flex;align-items: center;justify-content: center;margin: 0 auto;color: rgba(0, 0, 0, 0.75);text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);background-color: var(--yellow);box-shadow: 0 1px 1px rgba(0, 0, 0, 1), 0 0 5px rgba(255, 255, 255, 0.15);}
.bs-table tr .title-td {text-align: left;padding-left: 15px;max-width: 590px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.bs-table tr .date-td {width: 20%;color: #cccccc;}
.bs-table tr .nav-td {width: 40px;}
.bs-table tr td .delete-btn {background-color: transparent;border: none;color: #ff805f;transition: 0.3s;}
.bs-table tr td .delete-btn:hover {color: #cccccc;}
.bs-table tr td .nav-btn {background-color: transparent;border: none;position: relative;}
.bs-table tr td .nav-btn i {position: relative;color: #fff;font-size: 10px;transition: 0.3s;transform: rotate(0deg);}
.bs-table tr td .nav-btn:hover i {color: #ffca5f;}
.bs-table tr.active td .nav-btn i {transform: rotate(180deg);top: 5px;}
.bs-table tr td .plus-btn {width: 16px;height: 16px;background-color: #fff304;border: none;border-radius: 50%;color: rgba(0, 0, 0, 0.75);font-size: 12px;padding: 0 0 0;display: inline-block;vertical-align: middle;position: relative;}
.bs-table tr td .plus-btn:hover {background-color: #ffae1f;}
.bs-table tr td .plus-btn:before,.bs-table tr td .plus-btn:after {content: '';width: 2px;height: 50%;left: 0;right: 0;top: 0;bottom: 0;margin: auto;position: absolute;background-color: rgba(0, 0, 0, 0.75);transition: 0.3s;}
.bs-table tr td .plus-btn:after {transform: rotate(90deg);}
.bs-table tr.active td .plus-btn:before {height: 0;}
.bs-table tr td .plus-btn:hover:before,.bs-table tr td .plus-btn:hover:after {background-color: rgba(0, 0, 0, 0.5);}

/* With Depth */
.with-depth tr:nth-last-child(2) td:first-child {border-radius: 0 0 0 10px;}
.with-depth tr:nth-last-child(2) td:last-child {border-radius: 0 0 10px 0;}
.with-depth .message-content {display: none;height: 200px;margin: 2px 0 5px;}
.with-depth tr.depth-click {cursor: pointer;}
.with-depth tr.dropdown {background-color: transparent;}
.with-depth tr.dropdown td {padding: 0;border: none;height: auto;box-shadow: none;}
.with-depth tr.dropdown td {background-color: transparent;border: none;}
.with-depth tr.dropdown:hover td {background-color: transparent;border: none;}

/* Message Content */
.message-content {width: 100%;margin: 5px 0 0;padding: 10px;border-radius: 5px;}
.message-content .inner-container {width: 100%;height: 100%;float: left;color: #fff;/*white-space: pre-wrap;*/text-align: left;overflow-y: scroll;padding: 5px 10px;}
.modal-tab {width: 100%;display: none;margin: 0 auto;animation: modalTabAnim 0.5s ease 1 forwards;}
@keyframes modalTabAnim {
0% {opacity: 0;transform: translateY(-10%);}
100% {opacity: 1;transform: translateY(0);}
}
.modal-tab.active {display: block;}

/* Level Information */
.bs-table td .level-txt {display: inline-block;width: 45px;text-align: left;}
.level-information{width:100%;height:80px;float:left;display:flex;position:relative;margin-bottom:10px;border-radius: 5px;background-color: #202020;}
.level-information .container{ width:auto; height:100%;float:left;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding:0 20px !important;}
.level-information .container .inner{ width:auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;}
.level-information .container span{ color:#fff;font-size:14px;white-space:nowrap;}
.level-information .container .labels{ margin-right:10px;}
.level-information .container .amount{color: var(--yellow);font-size:18px;display:inline-block;position:relative;margin:0;vertical-align:middle;}
.level-information .point-form{width:310px;height:100%;float:right;display:flex;align-items:center;justify-content:center;padding:0 125px 0 5px;position:relative;}
.level-information .point-form input{width:100%;height:38px;border-radius:3px;padding:0 5px;color:#000;font-size:12px;background-color:#ffffff;border:none;}
.level-information .point-form input::-webkit-input-placeholder{color:#000;}
.level-information .points-btn{width:110px;height:38px;font-size:12px;border:none;transition:0.3s;white-space:nowrap;position:absolute;right:10px;border-radius:2px;}

/* Gamelist Modal */
.gamelist-container {width: 100%;margin: 0 auto;}
.gamelist-container .scroll-panel {width: calc(100% + 7px);min-height: 570px;max-height: 570px;margin: 0 0 0 -7px;overflow-y: scroll;padding: 0 8px 0 0;}
.game-btn {width: calc(16.66% - 14px);display: inline-block;margin: 0 7px 14px;position: relative;border-radius: 4px;overflow: hidden;background-color: #000000;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.75);animation: scBtnAnim 1s ease 1 backwards;padding: 1px;}
.game-btn:before {width: 100%;height: 100%;transition: 0.3s;background: linear-gradient(var(--yellow), #a77c0d);top: 0;left: 0;opacity: 0;}
.game-btn:hover:before {opacity: 1;}
.game-btn .g-panel {width: 100%;position: relative;background-color: #000000;border-radius: 4px;overflow: hidden;}
.game-btn .g-panel:before {width: 100%;height: 40%;bottom: 0;left: 0;background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));z-index: 1;}
.game-btn .g-panel .g-img {transition: 0.5s;}
.game-btn:hover .g-panel .g-img {opacity: 0.5;transform: scale(1.1);}
.game-btn .g-panel .g-footer {width: calc(100% - 8px);height: 32px;left: 0;right: 0;bottom: 4px;margin: 0 auto;position: absolute;background-color: rgba(0, 0, 0, 0.9);border: solid 1px rgba(255, 255, 255, 0.25);display: flex;align-items: center;justify-content: center;transition: 0.3s;border-radius: 18px;box-shadow: 0 1px 1px rgba(0, 0, 0, 1);z-index: 2;}
.game-btn:hover .g-panel .g-footer {background-color: transparent;border-color: rgba(255, 255, 255, 0);box-shadow: none;}
.game-btn .g-panel .g-footer .name-text {width: 100%;display: inline-block;overflow: hidden;position: relative;color: #ffffc2;font-size: 12px;max-width: 96%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-shadow: 0 1px 1px rgba(0, 0, 0, 1);}
.game-btn:hover .g-panel .g-footer .name-text {color: var(--yellow);}
.game-btn .g-panel .play-btn {width: 50px;height: 50px;position: absolute;top: 0;bottom: 20px;left: 0;right: 0;margin: auto;background-color: rgba(255, 255, 255, 0);border: none;border-radius: 50%;overflow: hidden;color: rgba(0, 0, 0, 0.75);text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);font-size: 22px;box-shadow: 0 2px 5px rgba(0, 0, 0, 1.0);opacity: 0;transition: 0.3s;padding: 0 0 0 4px;}
.game-btn .g-panel .play-btn:hover {padding: 0;}
.game-btn .g-panel .play-btn:before,.game-btn .g-panel .play-btn:after {width: 100%;height: 100%;left: 0;top: 0;border-radius: 50%;transition: 0.3s;background-image: linear-gradient(var(--yellow), #a77c0d);}
.game-btn .g-panel .play-btn:after {background-image: linear-gradient(to right, #ffb93d, #ffae1f);opacity: 0;}
.game-btn .g-panel .play-btn:hover:before {opacity: 0;}
.game-btn  .g-panel .play-btn:hover:after {opacity: 1;}
.game-btn:hover .g-panel .play-btn {animation: gamePlayAnim 0.8s ease 1 forwards;}
@keyframes gamePlayAnim {
0% {opacity: 0;transform: scale(0);}
40% {opacity: 1;transform: scale(1.1);}
100% {opacity: 1;transform: scale(1);}
}
.game-btn .g-panel .play-btn i {transition: 0.3s;}
.game-btn .g-panel .play-btn:hover i {opacity: 0;transform: rotate(360deg);}
.game-btn .g-panel .play-btn .hover-icon {position: absolute;opacity: 0;transform: rotate(-360deg);color: rgba(0, 0, 0, 0.75);text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);}
.game-btn .g-panel .play-btn:hover .hover-icon {opacity: 1;transform: rotate(0deg);}
.game-btn .loading {position: absolute;left: 0;top: 0;z-index: 3;width: 100%;}

/* Login Modal */
.loginModal .modal-content {border-radius: 10px;overflow: hidden;border: solid 2px rgba(255, 255, 255, 0.15);}
.loginModal .modal-content,.joinModal .modal-content {border-radius: 10px;overflow: hidden;}
.loginModal .modal-container {background-color: #181818;}
.loginModal .modal-container:before,.joinModal .modal-container:before {display: none;}
.loginModal .modal-close-btn {position: absolute;top: 15px;right: 15px;}
.loginModal .modal-content .logo {width: 180px;position: relative;left: 0;bottom: 0;margin: 50px auto 0;}
.loginModal .modal-title {height: auto;background-color: transparent;background-image: none;border-bottom: none;margin: 40px 0 0;}
.loginModal .modal-wrapper {min-height: auto;padding: 30px 40px 50px;}
.loginModal .form-container {max-width: 360px;}
.loginModal .form-footer {max-width: 368px;margin: 40px auto 0;}

#coverBG{position:fixed;width:100%;height:100%;top:0;left:0;background-color: rgba(0,0,0,0.85);z-index:1000;display:none;}
#coverBG2{position:fixed;width:100%;height:100%;top:0;left:0;background-color:rgba(0,0,0,.9);z-index:1000;display:none;}
#loading {position:fixed;left:50%;margin-left:-60px;top:50%;margin-top:-33px;z-index:999999;}
#loading img {width : 120px;}
.display_none {display:none;}
.popup_message {position:fixed;top:50%;left:50%;width:186px;margin:-151px 0px 0px -93px;z-index:200;}
.popup_message .message_box {position:relative;cursor:pointer;}
.popup_message .message_box .count01 {position:absolute;top:120px;left:50;font-size:14px;font-weight:bold;width:100%;text-align:center;display:block;line-height:26px;color: #ffc800;}
.popup_message .message_box .count02 {position:absolute;top:145px;left:50;font-size:14px;font-weight:bold;width:100%;text-align:center;display:block;line-height:26px;}
.casino-title{width:100%;float:none;clear:both;margin-top:15px;}
.slot-section{margin-top:0px;}

.mask {position:fixed;background:rgba(0,0,0,0.5);top:0;left:0;bottom:0;right:0;z-index:100;display:none;}
.mask_layer {position:fixed;background:rgba(0,0,0,0.5);top:0;left:0;bottom:0;right:0;z-index:10;display:none;}
.msg_layer {position:fixed;background:rgba(0,0,0,0.5);top:0;left:0;bottom:0;right:0;z-index:10;display:none;}
#popBox {background-color: #000;display: none;z-index: 2147483641;position:fixed;top:0px;right:0px;left:0px;bottom:0px;margin:auto;}
#popBox .close_pop{width:100%;background-color: #ffee00;height:30px;line-height:30px;text-align:center;}
#popBox .close_pop a {text-decoration: none;color: #000;font-size:24px;}
#popBox .content{position:absolute;top:30px;bottom:0px;left:0px;right:0px;}


.board_view {position:relative;padding:1px;margin-bottom:10px;}
.board_view .view_text {padding:20px;border-bottom:1px solid #2d2d34;line-height:22px;}
.message-title {font-size: 28px; color: yellow;;}
/* page_skip */
.page_skip {text-align:center;margin:30px 0px 30px 0px;}
.page_skip span {display:inline-block;padding:0px 4px;}
.page_skip a {display:inline-block;line-height:28px;background:#2d2e35;border-radius:5px;transition:200ms all;padding:0px 15px;border:1px solid transparent;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 4px, rgba(255, 255, 255, 0.22) 1px 1px 4px -2px inset;color:#c8c8c7;}
.page_skip a:hover {color:#ffffff;background:#393a43;}
.page_skip a.on {cursor:default !important;border:1px solid #ffa604;color:#ffa604 !important;background:#312b20 !important;}

.message_box p {font-size:12px;}


.popup-container {position:absolute;top:0;left:0;width:100%;/*background:rgba(0, 0, 0, .5);*/z-index:9999;}
.popup-wrap {width:1400px;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px;align-items: flex-start;}
.popup-container .popup-wrap .popup-box {margin-top:120px;border:1px solid #000;background:#000;color:#fff;width:calc(25% - 10px);overflow:hidden;animation:opacityIn .3s;transition:opacity .3s;}
.popup-container .popup-wrap .popup-box .popup-contents-box {max-height:calc(100vh - 150px);}
.popup-container .popup-wrap .popup-box .popup-contents-box img {width:100%;max-height:calc(100vh - 150px);}
.popup-container .popup-wrap .popup-box .popup-footer {display:flex;justify-content:space-between;border-top:1px solid #717171;}
.popup-container .popup-wrap .popup-box .popup-footer div {width:50%;text-align:center;cursor:pointer;padding:18px 0;position:relative;background:#6a6868;color:#fff;transition:all .3s;padding:14px 0;font-size:14px;}
.popup-container .popup-wrap .popup-box .popup-footer div:first-child:after {content:"";position:absolute;top:50%;transform:translateY(-50%);height:50%;width:1px;right:0;background:#000;}

.join_wrap {width:800px;margin:0 auto;text-align:center;background:#000;}

@media (max-width:768px) {
	.popup-wrap {width:100%;flex-wrap:wrap;justify-content:center}
	.popup-container .popup-wrap .popup-box {margin-top:60px;width:calc(90% - 10px);}	
	
	.join_wrap {width:100%}
}