/*
    version: 1.0.0_custom_axtj
    this file is custom class
    when copy to another project, will need to clear if not needed
    Date : 24-6-2025
    Developer : Jack
    Version : 1.0.0
    Changes : 
    {
    }

*/

.page-content-div {
    margin-top: 100px;
}

.banner-font {
    font-size: 78px;
    color: var(--default-primary-text-color);
    font-weight: 400 !important;
}

.homepage-link-underline {
    text-decoration: underline;
}

.homepage-link-container {
    position: absolute;
    top: 6px;
    right: 10px;
    transform: translate(0px, 11px);
}

.homepage-container1 {
    position: relative;
}

.homepage-banner-section2 {
    background-image: url(../images/mask.png);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    height: 500px;
    /* height: 100%; */
}

.banner-font--secondary {
    font-size: 54px;
}

.content-image {
    position: absolute;
    right: 0;
    bottom: 0;
}

.content-descriptions {
    font-size: 15px;
}

.content-descriptions--bigger {
    font-size: 20px;
}

.contact-title {
    font-size: 30px;
    font-weight: 500;
}

.secondary-font {
    color: var(--default-secondary-text-color) !important;
}

.background-black {
    background: var(--default-primary-bg-color);
}

.background-red {
    background: #D40828;
}

.section3-container {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    /* align-items: center; */
    padding: 50px;
}

.section3-container2, .contact-main-container {
    padding: 42px;
}

.section4-container {
    padding: 90px;
}

.section5-line-container {
    display: flex;
    align-items: center;
}

.section5-line, .footer-line {
    border: none;
    height: 1px;
    background-color: #666;
    flex: 1;
    margin-left: 30px;
}

.footer-line {
    margin: 0 !important;
}

.section6-container-left {
    background-image: url(../images/lock-left.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 400px;
}

.section6-container-right {
    background-image: url(../images/lock-right.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 400px;
}

.section7-container {
    margin-left: 345px;
}

.section7-container--right {
    margin-right: 345px;
}

.section8-container {
    background-image: url(../images/bottom-bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    height: 435px;
}

.contact-container-left {
    padding: 80px;
    padding-top: 60px;
    padding-bottom: 60px;
}
.red-button--header a{
	color: #000;
	font-size:15px;
	font-weight: 500;
}
.red-button,.red-button--long,.red-button--header {
    height: 45px;
    /* width: 120px; */
    border: none;
    color: #000;
    background-color: #d0ff3e;
    border-radius: 10px;
    padding-left: 30px;
    padding-right: 30px;
}

.red-button--header {
    height: unset;
    padding: 5px 15px;
    cursor: pointer;
}

.contact-input {
    border-radius: 0px;
    border: 1px solid #666;
}

.social-media {
    height: 15px;
}

.footer-container-bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    padding-bottom: 16px;
}
/************************** Responsive Section **************************/
/* Overrides KT class to hide Settings in Menu @ PC media */

@media (min-width: 1025px) {
    .kt-header-menu .kt-menu__nav>.kt-menu__item.mobileMenuViewSettings {
        display: none;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0 .15rem;
    }

    .section8-container {
        height: 390px;
    }
}


/* iPad Pro View */
@media (max-width: 1199px) and (min-width: 990px) {
   .page-content-div{
        margin-top: 0;
   }

   .carousel-item-div {
    min-width: 30%;
   }

   .section8-container {
        height: 390px;
    }
}

/* iPad View */
@media (max-width: 989px) and (min-width: 768px) {
    .page-content-div {
        margin-top: 0;
    }

    .carousel-item-div {
        min-width: 40%;
    }

    .pitch-container {
        width: 100%;
    }

    .section8-container {
        height: 390px;
    }
}

/* Mobile View */
@media (max-width: 767px) {

    .section6-container-left,.section6-container-right {
        background-position: center;
    }

    .method-title {
        text-align: center;
    }

    .banner-font  {
        font-size: 30px;
    }

    .homepage-link-container {
        top: -22px;
        left: 0;
    }

    .banner-container {
        padding-top: 40px;
    }

    .content-image {
        bottom: 94px;
        width: 42px;
    }
    
    .handle-img {
        height: 200px;
    }

    .phone-door-img {
        width: 300px;
    }

    .section7-container,.section7-container--right {
        margin: 0;
    }

    .section7-container {
        text-align: right;
    }

    .section7-container--right {
        text-align: left !important;
    }

    .contact-main-container {
        padding: 20px;
    }

    .contact-container-left {
        padding: 20px;
    }

    .homepage-banner-section2 {
        height: 200px;
    }

    .section3-container  {
        margin: 0 !important;
    }

    .section4-container {
        padding: 40px;
    }

    .carousel-item-div {
        min-width: 70%;
    }

    .pitch-container {
        width: 100%;
    }

    .font-xl {
        font-size: 30px;
    }

    .font-lg {
        font-size: 20px;
    }

    .date__selection-container {
        flex-direction: column;
        align-items: start;
    }

    .page-content-div {
        margin-top: 0;
    }

}

  


  
/* Start of Login Template Page*/
.revealPasswordBtn {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(-70px, 230%);
    border: none;
    background-color: transparent;
}
/* End of Login Template Page */

/* Start of Captcha CSS */
.block {
    position: absolute;
    left: 0;
    top: 0;
}
.slidercaptcha {
    margin: 0 auto;
    width: 100%;
    height: 300px;
    border-radius: 4px;
    margin-top: 0;
}

.slidercaptcha canvas:first-child {
    border-radius: 5px;
    border: 1px solid #e6e8eb;
}

.sliderContainer {
    position: relative;
    text-align: center;
    line-height: 40px;
    background: #f7f9fa;
    color: #45494c;
    border-radius: 2px;
}

.sliderbg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background-color: #f7f9fa;
    height: 40px;
    border-radius: 2px;
    border: 1px solid #e6e8eb;
}

.sliderContainer_active .slider {
    top: -1px;
    border: 1px solid #1991FA;
}

.sliderContainer_active .sliderMask {
    border-width: 1px 0 1px 1px;
}

.sliderContainer_success .slider {
        top: -1px;
    border: 1px solid #02c076;
    background-color: #02c076 !important;
    color: #fff;
}

.sliderContainer_success .sliderMask {
    border: 1px solid #52CCBA;
    border-width: 1px 0 1px 1px;
    background-color: #D2F4EF;
}

.sliderContainer_success .sliderIcon:before {
    content: "\f00c";
}

.sliderContainer_fail .slider {
    top: -1px;
    border: 1px solid #f35c59;
    background-color: #f35c59;
    color: #fff;
}

.sliderContainer_fail .sliderMask {
    border: 1px solid #f35c59;
    background-color: #f7dcdd;
    border-width: 1px 0 1px 1px;
}

.sliderContainer_fail .sliderIcon:before {
    content: "\f00d";
}

.sliderContainer_active .sliderText, .sliderContainer_success .sliderText, .sliderContainer_fail .sliderText {
    display: none;
}

.sliderMask {
        position: absolute;
    left: 0;
    top: 0;
    height: 40px;
    border: 0 solid #d1e9fe;
    background: #d1e9fe;    
    border-radius: 2px;
}

.slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: background .2s linear;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider:hover {
    background: #009efb;
    color: #fff;
    border-color: #009efb;
}

.slider:hover .sliderIcon {
    background-position: 0 -13px;
}

.sliderText {
    position: relative;
}

.sliderIcon {
}

.refreshIcon {
        position: absolute;
    right: 5px;
    top: 5px;
    cursor: pointer;
    padding: 6px;
    color: #fff;
    background-color: #ff4c4c;
    font-size: 14px;
    border-radius: 50px;
}

.refreshIcon:hover {
    color: #fff;
}

.roman-list-style {
    list-style: lower-roman;
}


/* End of Captcha */

/* Index css */
    .dropdown, .closeSidebar { cursor: pointer; }
    /* Container */
    /* .container { max-width:1300px; margin: 0 auto; } */
    .row { display: flex; }
    .topup-container{ margin: 4rem 0; }
    .topup-more-container { width: 100%; display: block; }
    .top-container { margin: 4rem 0 8rem; padding: 0 5rem; }
    .games-container, .screen-container { margin: 4rem 0 8rem; padding: 0 5rem; }
    .step-container { margin: 4rem 0 4rem; padding: 0 5rem; }
    .mobile-button-container { text-align: center; display: none; }

    /* Auto Banner */
    .banner-container1 { width: 100%; overflow: hidden; position: relative; }
    .banner-track { display: flex; width: 100%; height: 100%; transition: transform 0.8s ease-in-out; }
    .banner-item { width: 100%; height: 100%; flex-shrink: 0; cursor: pointer; position: relative; overflow: hidden; }
    .banner-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .small-img { display: none; }
    .big-img { display: block; }

    /* Top Up Img */
    .topup-more { float: right; margin: 2rem 5rem 2rem 0; color:#d0ff3e; }
    .topup-box { justify-content: center; padding: 0; margin-left: 0; margin-right: 0; }
    .topup-img { margin: 0 auto; padding: 0; }
    .topup-img img { width: 100%; }
    .top-img-name, .top-img-des { text-align: center; }
    .top-img-name { color: #e6e6e6; }
    .top-img-des { color: rgba(255,255,255,0.5); }

    /* header */
    header { display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
    .brand { display:flex; align-items:center; gap:10px; font-weight:700; color:#d0ff3e; }
    .nav { display:flex; gap:14px; align-items:center; }
    .btn-join { background:#d0ff3e; color:#0b0b0b; padding:8px 14px; border-radius:8px; font-weight:600; }

    /* banner */
    .ref-banner { background:#2b2f31; padding:18px; display:flex; align-items:center; justify-content:space-between; gap:12px; height:250px; }
    .ref-left { font-size:24px; margin: auto; font-weight: 500; color: #fff; }
    .ref-left p { display: inline-block; margin: 0; }
    .ref-code { background:#fff; color: #4b4f50; padding:15px ; margin: 0 10px; border-radius:10px; font-weight:700; }
    .ref-code .code-text { padding-right: 2rem; color: #2b2f31; }
    .ref-code .hint { cursor:pointer; user-select: all; }
    .hint img { width: 20px; margin-bottom: 5px; }

    .ref-banner2 { background:#fff; padding:20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .ref-left2 { font-size:24px; margin: auto; font-weight: 500; color: #2b2f31 }
    .ref-left2 p { display: inline-block; margin: 0; }
    .ref-code2 { background:#2b2f31; color: #fff; padding:15px ; margin: 0 10px; border-radius:10px; font-weight:700; }
    .ref-code2 .code-text { padding-right: 2rem; color: #e6e6e6; }
    .ref-code2 .hint { cursor:pointer; user-select: all; }

    /* Top */
    .top-title { font-weight: 500; margin:4rem 0; text-align:center; color:#d0ff3e; }
    .top-title1 { font-weight: 500; margin:4rem 0; text-align:left; color:#ffffff; }
    .top-box { justify-content: center; margin: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
    .top-img { margin: 0 auto; padding: 0;}
    .top-img img { width: 100%; }

    /* Game List */
    .games-container h2 { margin:3rem 0; text-align:left; color:#ffffff; }
    .game-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px; }
    .game-card { background:#17181a; border-radius:10px; padding:0; text-align:center; box-shadow:0 2px 0 rgba(0,0,0,0.6); }
    .game-card img { width:100%; height:auto; object-fit:cover; border-radius:6px; margin-bottom:0; }
    .game-card .name { font-size:13px; }

    /* Tab list */
    .tabs { display:flex; gap:8px; justify-content:center; margin:12px 0 20px; }
    .tab { background:#202224; padding:8px 12px; border-radius:999px; cursor:pointer; font-size:14px; }
    .tab.active { background:#d0ff3e; color:#0b0b0b; font-weight:700; }

    /* Step */
    .step-title { margin:4rem 0; text-align:center; color: #e6e6e6; }
    .step-title span { font-size: 2rem; color:#d0ff3e; }
    .steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:30px; margin:28px 0; padding: 0 10rem; }
    .step { background:#363636; padding:16px 20px; border-radius:10px; text-align:center; border: 1px solid #d0ff3e; }
    .step .num { font-weight:800; color:#d0ff3e; font-size:20px; }
    .step-img { margin: 2rem 1rem 1rem; }
    .step-img img { width: 50%; height: auto; margin: auto;}
    .desc { margin: 2rem 0; font-size: 14px; color: #fff; }
    .progress-steps {
        display: flex;
        justify-content: space-around;
        position: relative;
        margin: 40px 0;
        padding: 0 10rem;
    }
    .progress-steps::before {
        content: '';
        position: absolute;
        top: 12px;
        left: 12.5%;
        width: 75%;
        height: 3px;
        background: linear-gradient(to right, #d0ff3e 0%, #d0ff3e 75%, #d0ff3e 75%, #d0ff3e 100%);
        z-index: 1;
        border-radius: 1px;
        padding: 0 10rem;
    }
    .progress-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 2;
    }
    .step-circle {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: #363636;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-weight: bold;
        font-size: 20px;
        margin-bottom: 15px;
        border: 1px solid #d0ff3e;
        transition: all 0.3s ease;
    }
    .step-desc {
        font-size: 16px;
        color: #333;
        text-align: center;
        font-weight: 500;
        max-width: 150px;
        line-height: 1.4;
    }
    .progress-step:nth-child(1) .step-desc,
    .progress-step:nth-child(2) .step-desc,
    .progress-step:nth-child(3) .step-desc,
    .progress-step:nth-child(4) .step-desc {
        color: #fff;
    }

    /* CTA */
    .cta { text-align:center; margin-bottom: 8rem; }
    .btn-login { background:#d0ff3e; color:#0b0b0b; padding:1rem 4rem; border-radius:10px; font-weight:800; cursor:pointer; }
    .btn-login3 { background:#d0ff3e; color:#27262A; padding:0.5rem 3rem; border-radius:5px; cursor:pointer; font-weight: 350; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 47%; max-width: 47%; }
    .btn-login2 { background:#27262A; color:#d0ff3e; border: 1px solid #d0ff3e; padding:0.5rem 3rem; border-radius:5px; cursor:pointer; font-weight: 350; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 47%; max-width: 47%; }

    /* Screen Shot */
    .screen-title { margin:3rem 0; text-align:center; color:#d0ff3e; }
    .screen-img { margin: auto; }
    .screen-img img { width: 100%; border: 1px solid #d0ff3e; }

    /* footer */
    footer { margin-top:36px; padding:20px 0; color:#9aa0a0; font-size:13px; text-align:center; border-top:1px solid rgba(255,255,255,0.03); }
    .bottom-img-fix { position: fixed; bottom: 0; width: 100%; display: none; }
    .bottom-img-fix img { width: 100%; }
    .msg-img-fix { position: fixed; top: calc(100% - var(--draggableHeight) - 80px); right: 24px; z-index: 999; --draggableWidth: 54px; --draggableHeight: 54px; cursor: pointer; }
    .msg-img-fix img { width: 54px; height: 54px; }

    /* 小螢幕微調 */
    @media (min-width: 1025px) {
	.container-index { padding-top: 80px; }
    }

    @media (min-width: 991px) and (max-width: 1199px) {
        .steps { padding: 0; }
        .progress-steps{ padding: 0; }
        .progress-steps::before { left: 0; width: 100%; }
    }

    @media (min-width: 768px) and (max-width: 990px) {
        .steps { padding: 0; }
        .progress-steps { display: none; }
        .topup-img { margin: 0 auto 1.5rem;}
    }

    @media (max-width: 767px){
        .progress-steps { display: none; }
        .steps { padding: 0 4rem; }
        .top-container { padding: 0 2rem; }
        .games-container, .screen-container { padding: 0 2rem; }
        .step-container { padding: 0 2rem; }
        .topup-img { margin: 0 auto 1.5rem;}
	.topup-container{ margin: 2rem 0 4rem; }
	.small-img { display: block; }
    	.big-img { display: none; }
	.mobile-button-container { display: block; }
	.btn-login2, .btn-login3 { padding: 0.5rem 1rem; }
	.bottom-img-fix { display: block; }
	.homepage_footer { padding-bottom: 10rem; }
    }

    @media (min-width: 320px) and (max-width: 767px) {
    }

    @media (max-width:581px){
        .ref-left, .ref-left2 { font-size: 14px; text-align: center; }
	.ref-code, .ref-code2 { margin: 1rem 0; display: block; }
        header { flex-direction:column; gap:8px; align-items:flex-start; }
        .ref-banner { flex-direction:column; align-items:flex-start; height: 200px; }
        .steps { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); padding: 0; }
        .screen-img { margin-bottom: 2rem; }
    }

    @media (max-width:395px) {
        .top-box { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    }
/* End Index css */

.footer-title{
	font-size:13px;
	font-weight:500;
}
.footer-nomarl ,.footer-nomarl a{
	font-size:13px;
}