@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OneStoreMobileGothicTitleFont';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Title.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

html {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll !important;
}

html::-webkit-scrollbar {
    width: 0;
}

html::-webkit-scrollbar-thumb {
    width: 0;
}

body {
    height: 100%;
    padding-right: 0 !important;
    text-align: center;
    background-color: #040608;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    font-family: "OneStoreMobileGothicTitleFont", sans-serif;
}

button, a, input, select, textarea {
    outline: none !important;
    transition: 0.3s;
}

button { padding: 0; white-space: nowrap; }

h1, h2, h3, h4, h5, h6, p { margin: 0; }

a { font-size: 16px; color: #cccccc; text-decoration: none; position:relative; }

a:hover { color: #ffffff; text-decoration: none; }

img { pointer-events: none; }

tr { cursor: pointer; }

.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;
    transition: 0.3s;
}

.dflex-ac-jc {
    display: flex !important;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

.text-primary { color: #c5ee27 !important; }

.text-second { color: #ff7753 !important; }

.text-light { color: #9ebad7 !important; }

.text-gray { color: #999999 !important; }

.font-sz-12 { font-size: 12px; }

.wrapper {
    width: 100%;
    min-height: 100%;
    padding: 0 0 130px;
    overflow: hidden;
}

section {
    width: 100%;
    position: relative;
    padding: 0 15px;
}

.visual-section {
    margin: 0 0 -8.25%;
}

.visual-section .visual-bg {
    width: 100%;
    position: relative;
    opacity: 0;
}

.visual-bg-anim {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}

.visual-bg-anim:before {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(../img/bg/visual_bg.png);
    background-size: 100% 100%;
    animation: visualBg 10s ease infinite;
}

@keyframes visualBg {
    0% { transform: scale(1.0); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1.0); }
}

.visual-section .bg-visual {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: 1;
}

.visual-section .bg-visual:before,
.visual-section .bg-visual:after {
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
}

.visual-section .bg-visual:before {
    opacity: 0.5;
    background-image: url(../img/bg/line-bg.png);
}

.visual-section .bg-visual:after {
    top: -10%;
    background-image: url(../img/bg/pattern-bg.png);
}

.visual-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.visual-wrap:after {
    content: '';
    width: 100%;
    height: 30%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: linear-gradient(rgba(4, 6, 8, 0), rgba(4, 6, 8, 0.75), rgba(4, 6, 8, 1.0), rgba(4, 6, 8, 1.0), rgba(4, 6, 8, 1.0));
    z-index: 20;
}

.visual-wrap img,
.visual-wrap div {
    position: absolute;
    bottom: 0;
}

.visual-wrap div .d-img {
    width: 100%;
    position: relative;
}

.visual-wrap .main-img {
    width: 18.55%;
    max-width: 356px;
    left: 10%;
    right: 0;
    bottom: 0;
    margin: 0 auto;
}

.visual-wrap .boy {
    width: 116.3%;
    left: -88%;
    bottom: 14%;
    animation: boyImgAnim 12s ease infinite;
}

@keyframes boyImgAnim {
    0% { transform: translateX(0); }
    50% { transform: translateX(-15%); }
    100% { transform: translateX(0); }
}

.visual-wrap .roulette {
    width: 62.36%;
    right: -13%;
    bottom: 11.5%;
}

.visual-wrap .cards {
    width: 82.03%;
    right: -16%;
    bottom: 24%;
}

.visual-wrap .cards .d-img {
    transform-origin: bottom center;
    animation: cardsImgAnim 3s ease infinite;
}

@keyframes cardsImgAnim {
    0% { transform: rotate(0deg); }
    15% { transform: rotate(15deg); }
    30% { transform: rotate(-5deg); }
    45% { transform: rotate(5deg); }
    60% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

.visual-wrap .slotmachine {
    width: 157.03%;
    left: -132%;
    bottom: 5%;
}

.visual-wrap .tables {
    width: 136.24%;
    left: -17%;
    bottom: 25%;
}

.visual-wrap .dealer-02 {
    width: 74.44%;
    right: -61%;
    bottom: 8%;
    animation: dealer02ImgAnim 12s ease infinite;
}

@keyframes dealer02ImgAnim {
    0% { transform: translateX(-15%); }
    50% { transform: translateX(0); }
    100% { transform: translateX(-15%); }
}

.visual-wrap .rocket {
    width: 39.33%;
    left: -84%;
    bottom: auto;
    top: 11.5%;
}

.visual-wrap .rocket .d-img {
    animation: rocketImgAnim 10s ease infinite;
}

@keyframes rocketImgAnim {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-50%, 30%); }
    100% { transform: translate(0, 0); }
}

.visual-wrap .machine {
    width: 17.42%;
    left: -36%;
    bottom: auto;
    top: 5.5%;
}

.visual-wrap .machine .d-img {
    animation: machineImgAnim 10s linear infinite;
}

@keyframes machineImgAnim {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.visual-wrap .cash {
    width: 116.58%;
    right: -28%;
    bottom: auto;
    top: 2%;
}

.visual-wrap .cash .d-img {
    animation: cashImgAnim 8s ease infinite;
}

@keyframes cashImgAnim {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(25deg); }
    100% { transform: rotate(0deg); }
}




































































/* Logo */

.logo {
    width: 48%;
    max-width: 460px;
    display: inline-block;
    position: relative;
    z-index: 30;
}

.logo img {
    position: absolute;
}

.logo div {
    position: absolute;
}

.logo div img {
    width: 100%;
    position: relative;
}

.logo .logo-img {
    width: 100%;
    position: relative;
    opacity: 0;
}

.logo .u {
    width: 20%;
    left: 0;
    top: 0;
    animation: lgUAnim 6s ease infinite;
}

@keyframes lgUAnim {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%);
    }
    5% {
        opacity: 1.0;
        transform: translate(10%, 10%);
    }
    15% {
        opacity: 1.0;
        transform: translate(0, 0);
    }
    95% {
        opacity: 1.0;
        transform: translate(0, 0);
    }
    100% {
        opacity: 0;
        transform: translate(0, 0);
    }
}

.logo .r {
    width: 20.66%;
    max-width: 95px;
    left: 10.65%;
    top: 0;
    animation: lgRAnim 6s ease infinite;
}

@keyframes lgRAnim {
    0% {
        opacity: 0;
        transform: translate(50%, 50%);
    }
    5% {
        opacity: 1.0;
        transform: translate(-10%, -10%);
    }
    15% {
        opacity: 1.0;
        transform: translate(0, 0);
    }
    95% {
        opacity: 1.0;
        transform: translate(0, 0);
    }
    100% {
        opacity: 0;
        transform: translate(0, 0);
    }
}

.logo .ur {
    width: 28.7%;
    max-width: 132px;
    left: 33%;
    bottom: 0;
    animation: lgUrAnim 6s ease infinite;
}

@keyframes lgUrAnim {
    0% {
        opacity: 0;
        transform: translateX(-50%);
    }
    5% {
        opacity: 0;
        transform: translateX(-50%);
    }
    20% {
        opacity: 1.0;
        transform: translateX(0);
    }
    95% {
        opacity: 1.0;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(0);
    }
}

.logo .bet {
    width: 36.09%;
    right: 0;
    bottom: 0;
    animation: lgBetAnim 6s ease infinite;
}

@keyframes lgBetAnim {
    0% {
        opacity: 0;
        transform: translateX(-50%);
    }
    10% {
        opacity: 0;
        transform: translateX(-50%);
    }
    25% {
        opacity: 1.0;
        transform: translateX(0);
    }
    95% {
        opacity: 1.0;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(0);
    }
}


/* Page Title */

.page-title {
    margin: 2% 0 2%;
}

.page-title h1 {
    font-size: 120px;
    margin: 0 0 -0.5%;
}

.page-title h6 {
    font-size: 20px;
    letter-spacing: 2px;
}


/* Page Panel */

.page-panel {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 20px;
    background-image: linear-gradient(to bottom right, rgba(16, 21, 30, 0), rgba(16, 21, 30, 1.0), rgba(16, 21, 30, 0));
    border: solid 1px #3d4e6c;
    padding: 1.5% 1.5% 1.25%;
    font-size: 20px;
}

.page-panel .title-panel {
    font-size: 30px;
    background-color: #313626;
    border: solid 1px #cde932;
    border-radius: 30px;
    padding: 1% 5% 0.25%;
    margin: 0 0 2.25%;
}

.domain-link {
    color: #ffad2c;
    font-size: 95px;
}

.domain-link:hover {
    color: #ffec2c;
}

.a-underline {
    color: #ff591f;
    position: relative;
    display: inline-block;
}

.a-underline:hover {
    color: #fee43d;
}

.a-underline:before,
.a-underline:after {
    content: '';
    width: 100%;
    height: 2px;
    left: 0;
    right: 0;
    margin: 0 auto;
    position: absolute;
    bottom: -1px;
    background-color: #ff591f;
}

.a-underline:after {
    width: 0;
    background-color: #fee43d;
    transition: 0.3s;
}

.a-underline:hover:after {
    width: 100%;
}


/* Access Section */

.access-section {
    margin: 2.5% 0 0;
    font-size: 18px;
}

.access-section h1 {
    font-size: 36px;
}

.alink-panel {
    width: 100%;
    max-width: 700px;
    margin: 0.25% auto 1%;
}

.alink-btn {
    width: 100%;
    margin: 5px 0;
    height: 84px;
    display: inline-block;
    position: relative;
}

.alink-btn .panel {
    width: 100%;
    height: 100%;
    background-color: #005f2f;
    background-image: linear-gradient(to right, #005f2f, #05d95b);
    border: solid 1px #15a655;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
    border-radius: 50px;
    color: #ffffff;
    font-size: 50px;
    padding: 1.25% 0 0;
    margin: 0 auto;
    transition: 0.3s;
    z-index: 5;
    position: relative;
}

.alink-btn:hover .panel {
    color: #fee43d;
    background-color: #1d1007;
    border-color: #fee43d;
}


/* Telegram Link */

.telegram-link {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 20px;
    background-color: #161c27;
    display: inline-block;
    margin: 2% 0 0;
    padding: 1.6% 3% 1%;
    overflow: hidden;
    position: relative;
    color: #ffffff;
    font-size: 20px;
}

.telegram-link:before {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(../img/bg/telegram_bg.png);
    background-size: cover;
    animation: telegramBg 5s ease infinite;
    filter: brightness(0) invert(1);
    opacity: 0.75;
}

@keyframes telegramBg {
    0% { transform: scale(1.0); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1.0); }
}

.telegram-link .deco-01 {
    width: 12.3%;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: top left;
    animation: telegramDeco1 4s ease infinite;
}

@keyframes telegramDeco1 {
    0% { transform: scale(1.0); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1.0); }
}

.telegram-link .deco-02 {
    width: 10.8%;
    position: absolute;
    right: 0;
    top: 0;
    transform-origin: top right;
    animation: telegramDeco1 4s ease infinite;
}

.telegram-link h1 {
    color: #ffffff;
    font-size: 44px;
}

.telegram-link h1 .highlight {
    color: #08538a;
    font-size: 48px;
}

.telegram-link button {
    color: #ffffff;
    font-size: 30px;
    background-color: #4fb9e3;
    background-image: linear-gradient(#4fb9e3, #1484cc);
    border: none;
    border-radius: 10px;
    padding: 1.75% 6% 0.75%;
    margin: 0.5% 0 3%;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.telegram-link button .font-bold {
    animation: telegramClick 0.3s ease infinite;
}

@keyframes telegramClick {
    0% { color: #98e2ff; }
    50% { color: #ffffff; }
    100% { color: #98e2ff; }
}

.telegram-link button:hover .font-bold {
    animation: none;
}

.telegram-link .warning {
    color: #7debff;    
    font-size: 18px;
}


/* Footer */

footer {
    background-color: #161c27;
    color: #696c73;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 30px 0 25px;
    box-shadow: 0 -8px 0 #0c1018;
    margin: -70px 0 0;
}


/* - - - - - Responsive Queries - - - - - */

@media(max-width: 1024px) {
    .page-title {
        margin: 3% 0 3%;
    }

    .page-title h1 {
        font-size: 8.79vw;
        margin: 0 0 -0.5%;
    }

    .page-title h6 {
        font-size: 2.57vw;
    }

    .page-panel .title-panel {
        font-size: 2.93vw;
        padding: 1% 5% 0.25%;
        margin: 0 0 2.25%;
    }

    .domain-link {
        font-size: 7.04vw;
    }

    .access-section {
        margin: 4% 0 0;
    }

    .access-section h1 {
        font-size: 5.52vw;
    }

    .alink-btn .panel {
        font-size: 2.93vw;
    }

    /* Telegram */

    .telegram-link {
        margin: 3% 0 0;
        padding: 3% 3% 2%;
        font-size: 1.96vw;
    }

    .telegram-link h1 {
        font-size: 4.25vw;
    }

    .telegram-link h1 .highlight {
        font-size: 4.66vw;
    }

    .telegram-link button {
        font-size: 2.99vw;
    }

    .telegram-link .warning {
        font-size: 1.76vw;
    }
}

@media(max-width: 767px) {
    .page-panel {
        padding: 3.5% 3.5% 3.25%;
    }

    .page-panel .content p {
        font-size: 14px;
    }
}

@media(max-width: 500px) {
    .wrapper {
        padding: 0 0 110px;
    }

    .visual-section .visual-bg {
        width: 128%;
        left: -14%;
    }

    .visual-wrap .glow-bg {
        width: 100%;
    }

    .visual-wrap .coin-bg {
        width: 68.59%;
    }

    .visual-wrap .main-img {
        width: 36.24%;
    }

    .page-title {
        margin: 5% 0 5%;
    }

    .page-panel {
        padding: 5.5% 6.5% 4.25%;
    }

    .page-panel .title-panel {
        font-size: 4.93vw;
        padding: 1% 5% 0.25%;
        margin: 0 0 3%;
    }

    .access-section {
        margin: 6.5% 0 0;
    }

    .access-section h1 {
        font-size: 5.52vw;
    }

    .page-panel .content p a {
        font-size: 14px;
    }

    .alink-btn .panel {
        font-size: 4.5vw;
    }

    .a-underline:before,
    .a-underline:after {
        height: 1px;
        bottom: 2px;
    }

    /* Telegram */

    .telegram-link {
        margin: 5% 0 0;
        padding: 5% 3% 3%;
        font-size: 3.5vw;
    }

    .telegram-link h1 {
        font-size: 6.25vw;
    }

    .telegram-link h1 .highlight {
        font-size: 6.66vw;
    }

    .telegram-link button {
        font-size: 4.99vw;
        margin: 1.5% 0 4%;
    }

    .telegram-link .warning {
        font-size: 3.25vw;
    }

    .telegram-link .deco-01 {
        width: 15.3%;
    }

    .telegram-link .deco-02 {
        width: 13.8%;
    }
}

@media(max-width: 500px) {
    .visual-section {
        margin-bottom: -17%;
    }

    .visual-section .visual-bg {
        width: 200%;
        left: -50%;
    }

    .access-section h1 {
        margin: 0 0 2%;
    }

    .alink-btn {
        height: initial;
    }

    .alink-btn .panel {
       padding: 3% 0;
        font-size: 5.5vw;
    }
}