html,
body {
    margin: 0;
    padding: 0;
    font-family: 'Kanit', sans-serif;
}

.fm-poppins {
    font-family: 'Poppins', sans-serif;
}

.hw-100vh-100 {
    min-height: 100vh;
    min-width: 100%;
}


.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}


.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800;
}

.fw-900 {
    font-weight: 900;
}

.red {
    color: var(--red);
}

.isolation {
    isolation: isolate;
}

.main-bg {
    background-image: url("/tmm-26/images/index/index-main-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    /* background-position: center; */
    position: relative;
    isolation: isolate;
}

.main-bg-show {
    background-image: url("../images/show/show-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    /* background-position: center; */
    position: relative;
    isolation: isolate;
}


.mum-bridge-img {
    width: 307px;
}


/* mj index */
.sdw-indexone-img {
    width: 234px;
    position: absolute;
    top: -6px;
    right: 109px;
    z-index: -1;
}

.sdw-indexwhite-img {
    width: 52px;
    position: absolute;
    right: -28px;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.index-bibform {
    max-width: 432px;
    position: absolute;
    right: 103px;
    top: 115px;
    padding: 0;
}

.btn-bib-input {
    background-color: transparent;
    border: 0;
}

.form-control.bib-new-input {
    color: white;
    font-size: 43px;
    padding-left: 0;
    background-color: transparent;
    border-radius: 0;
    border: 0;
    border-bottom: 2.5px dashed #FFFFFF;
    font-weight: 700;
    box-shadow: none;
    opacity: 1;
    padding: 0px;

}



.bib-new-input::placeholder {
    color: white;
    font-size: 43px;
}

.sdw-indexthree-img {
    position: absolute;
    bottom: -7px;
    left: 174px;
    z-index: -1;
    width: 409px;
}

.sdw-indexfour-img {
    position: absolute;
    bottom: 137px;
    left: 4px;
    z-index: -1;
    width: 70px;
}

.tmm-idfc-logo {
    width: 198px;
}

.tmm-logo-img {
    width: 198px;
}

.index-logo-group {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 150px;
    top: 138px;
    max-width: 223px;
    gap: 47px;
}

.bib-submitbtn {
    border: 0;
    background: linear-gradient(246.81deg, #EF7F1A -16.58%, #E20011 4.95%, #973D8D 51.61%, #007DC2 80.31%, #0C4104 112.61%, #EF7F1A 141.32%);
    border-radius: 80px;
    padding: 1px;
    max-width: 372px;
    width: 100%;
    min-height: 114px;
    margin-top: 60px;

}

.bib-sfinner {
    background-color: black;
    width: 100%;
    border-radius: 80px;
    padding: 15px;
}


.bib-sndinner-main {
    border: 0;
    background: linear-gradient(214.04deg, #FFFFFF 1.99%, #ED1A3B 43.87%);
    border-radius: 80px;
    padding: 1px;
}

.bib-sndinner {
    background-color: black;
    width: 100%;
    border-radius: 80px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.submit-text {
    line-height: 1;
    font-weight: 600;
    font-size: 30px;
    color: white;
}

.sbandbtn-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 15px 10px 30px;
}

.error-text {
    color: #ED1A3B;
    font-weight: 600;
    font-size: 18px;
    top: 75px;
    position: absolute;
    left: 0px;
    text-transform: capitalize;
}

.submit-arrow-img {
    width: 60px;
}

.mj-maintext {
    font-weight: 800;
    font-size: 52px;
    text-transform: uppercase;
    position: absolute;
    top: -6px;
    left: 90px;
    color: white;
    max-width: 400px;
}

.btyb-text {
    color: white;
    font-size: 20px;
    text-transform: capitalize;
    text-align: center;
    line-height: 0px;
    margin-bottom: 24px;
}

.custome-width {
    max-width: 1100px;
}

/*end mj index */


/* mj show page */
.mj-video-roll {
    width: 356px;
    position: absolute;
    right: 151px;
    padding: 0px;
    top: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    flex-direction: column;
}

.video-outer-main {
    background: linear-gradient(256.49deg, #EF7F1A -0.45%, #E20011 25.6%, #973D8D 82.04%, #007DC2 116.77%, #0C4104 155.85%, #EF7F1A 190.58%);
    padding: 1px;
    border-radius: 24px;
}

.vp-sp {
    background-color: #000000;
    width: 356px;
    height: 356px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
}

.vp-sp video {
    width: 320px;
    height: 320px;
    background: #000000;
    border-radius: 24px;
    border: 0.36px solid #FFFFFF;
    position: relative;
    z-index: 99;
}

.syam-text {
    color: #F2E5D5;
    font-size: 20px;
    padding-top: 24px;
    padding-bottom: 20px;
    line-height: 0;
    font-weight: 600;
}

.icon-main-group-outer {
    border-radius: 20px;
    background: linear-gradient(263deg, #EF7F1A -6.96%, #E20011 9.21%, #973D8D 44.23%, #007DC2 65.79%, #0C4104 90.03%, #EF7F1A 111.59%);
    width: 100%;
    padding: 1px;
}

.icon-main-group {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: black;
    border-radius: 20px;
    padding: 6px 10px;
}

.cc-iconancr {
    border: 1px solid transparent;
    border-radius: 12px;
}

.cc-iconancr svg {
    fill: white;
    transition: fill 0.3s ease;
}

.cc-iconancr:hover {
    border: 1px solid#ED1A3B;
    background-color: transparent;

}

.dwd-link .cc-iconancr:hover {
    border: 1px solid #ED1A3B !important;
    background-color: transparent;

}

.error-input::placeholder {
    color: #ED1A3B;
}

/*end mj show page */

@media screen and (max-width:1400px) {
    .custome-width {
        max-width: 1000px;
    }

    .mj-maintext {
        font-weight: 800;
        font-size: 48px;
        text-transform: uppercase;
        position: absolute;
        top: -6px;
        left: 77px;
        color: white;
        max-width: 329px;
    }

    .index-logo-group {
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 128px;
        top: 132px;
        /* max-width: 190px; */
        gap: 39px
    }

    .mj-video-roll {
        width: 320px;
        position: absolute;
        right: 139px;
        padding: 0px;
        top: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        flex-direction: column;
    }

    .vp-sp {
        background-color: #000000;
        width: 320px;
        height: 320px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 24px;
    }

    .vp-sp video {
        width: 290px;
        height: 290px;
        background: #000000;
        border-radius: 24px;
        border: 0.36px solid #FFFFFF;
        position: relative;
        z-index: 99;
    }

    .syam-text {
        color: #F2E5D5;
        font-size: 18px;
        padding-top: 22px;
        padding-bottom: 18px;
        line-height: 0;
        font-weight: 600;
    }
}


@media screen and (max-width:1200px) {
    .mj-maintext {
        font-size: 46px;
        text-transform: uppercase;
        position: absolute;
        top: -6px;
        left: 75px;
    }

    .custome-width {
        max-width: 100%;
        width: 1021px;
    }

    .syam-text {
        color: #F2E5D5;
        font-size: 14px;
        padding-top: 18px;
        padding-bottom: 16px;
        line-height: 0;
        font-weight: 600;
    }

    .vp-sp {
        width: 330px;
        height: 330px;
    }

    .vp-sp video {
        width: 295px;
        height: 295px;
        background: #000000;
        border-radius: 24px;
        border: 0.36px solid #FFFFFF;
        position: relative;
        z-index: 99;
    }


    .mj-video-roll {
        width: 320px;
        right: 128px;
        top: 24px;
    }

    .vp-sp {
        width: 320px;
        height: 320px;
    }

    .tmm-logo-img {
        width: 171px;
    }

    .tmm-idfc-logo {
        width: 180px;
    }

    .bib-submitbtn {
        max-width: 345px;
        min-height: 104px;
    }

    .btyb-text {
        font-size: 16px;
        margin-bottom: 22px;
    }

    .form-control.bib-new-input {
        font-size: 40px
    }

    .bib-new-input::placeholder {
        font-size: 40px;
        right: 80px;
    }

    .index-bibform {
        max-width: 400px;
    }

    .bib-sfinner {
        padding: 10px;
    }
}

@media screen and (max-width:992px) {
    .sdw-indexwhite-img {
        width: 93px;
        position: absolute;
        right: -41px;
        top: 42%;
        transform: translate(-50%, -50%);
        z-index: -1;
        height: 297px;
    }

    .mj-maintext {
        font-weight: 800;
        font-size: 56px;
        text-transform: uppercase;
        position: absolute;
        top: -14px;
        left: 160px;
        color: white;
        max-width: 419px;
    }

    .index-bibform {
        max-width: 453px;
        right: unset;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 0;
    }

    .index-logo-group {
        display: flex;
        flex-direction: row;
        position: absolute;
        left: 50%;
        top: 106px;
        transform: translate(-50%);
        max-width: 440px;
        gap: 30px;
        justify-content: center;
    }

    .bib-submitbtn {
        margin-top: 105px;
        max-width: 100%;
        min-height: 113px;
    }

    .bib-sfinner {
        padding: 15px;
    }

    .tmm-logo-img {
        width: 180px;
    }

    .tmm-logo-img {
        width: 169px;
    }

    .tmm-idfc-logo {
        width: 186px;
    }

    .mj-video-roll {
        width: 320px;
        position: absolute;
        right: unset;
        bottom: -80px;
        left: 50%;
        transform: translateX(-50%);
        padding: 0px;
        top: 30px;
        display: flex;
        border-radius: 20px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .form-control.bib-new-input {
        font-size: 50px;
    }

    .bib-new-input::placeholder {
        font-size: 50px;
    }

    .error-text {
        color: #ED1A3B;
        font-weight: 600;
        font-size: 20px;
        top: 87px;
        position: absolute;
        left: 0px;
        text-transform: capitalize;
    }

    .mb-soneimg {
        width: 29px;
        padding: 0px;
        position: absolute;
        left: 22px;
        top: 45%;
        z-index: -1;
    }

    .mb-stwoimg {
        width: 212px;
        position: absolute;
        bottom: -7px;
        left: 173px;
        z-index: -1;
    }

    .mb-sthreeimg {
        width: 129px;
        position: absolute;
        bottom: -6px;
        right: 126px;
        z-index: -1;
    }

    .mb-sfourimg {
        width: 20px;
        padding: 0px;
        position: absolute;
        right: 18px;
        top: 26%;
        z-index: -1;
    }
  .idx-index-logo-group{
        top: 132px;
    }
        .index-bibform {
        max-width: 453px;
        right: unset;
        position: absolute;
        left: 50%;
        top: 55%;
        transform: translate(-50%, -50%);
        padding: 0;
    }

}

@media screen and (max-width:768px) {
  
    .bib-submitbtn{
        max-width: 350px;
    }
    .bib-sfinner {
        background-image: url("/tmm-26/images/index/button-bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
    }

    .mj-video-roll {
        width: 477px;
    }

    .vp-sp {
        width: 477px;
        height: 477px;
    }

    .vp-sp video {
        width: 450px;
        height: 450px;
    }

    .mj-video-roll {
        bottom: -148px;
    }

    .mj-maintext {
        font-weight: 800;
        font-size: 48px;
        text-transform: uppercase;
        position: absolute;
        top: -10px;
        left: 110px;
        color: white;
        max-width: 419px;
    }

    .cc-iconancr svg {
        width: 48px;
        height: 48px;
    }

    .syam-text {
        color: #F2E5D5;
        font-size: 22px;
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .index-bibform {
        max-width: 442px;
        right: unset;
        position: absolute;
        left: 50%;
        top: 66%;
        transform: translate(-50%, -50%);
        padding: 0;
                display: flex;
        flex-direction: column;
        align-items: center;
    }

    .form-control.bib-new-input {
        font-size: 48px;
    }

    .bib-new-input::placeholder {
        font-size: 48px;
    }

    .error-text {
        font-size: 18px;
    }

    .index-logo-group {
        display: flex;
        flex-direction: row;
        position: absolute;
        left: 50%;
        top: 217px;
        transform: translate(-50%);
        max-width: 440px;
        gap: 30px;
        justify-content: center;
    }

    .mb-sfourimg {
        width: 15px;
        padding: 0px;
        position: absolute;
        right: 4px;
        top: 33%;
        z-index: -1;
    }

    .mb-sthreeimg {
        width: 116px;
        position: absolute;
        bottom: -6px;
        right: 29px;
        z-index: -1;
    }

    .mb-soneimg {
        width: 29px;
        padding: 0px;
        position: absolute;
        left: 12px;
        top: 46%;
        z-index: -1;
    }

    .mb-stwoimg {
        width: 212px;
        position: absolute;
        bottom: -7px;
        left: 86px;
        z-index: -1;
    }
     .bib-sndinner-main{
            border-radius: 40px;
    }
    .bib-submitbtn{
        border-radius: 40px;
    }
    .bib-sfinner{
        border-radius: 40px;
    }
    .bib-sndinner{
        border-radius: 40px;
    }
}

@media screen and (max-width:576px) {
    .cc-iconancr svg {
        width: 8.6vw;
        height: 8.6vw;
    }

    .custome-width {
        width: 100%;
        padding-left: 6vw;
        padding-right: 6vw;
    }

    .index-logo-group {
        display: flex;
        flex-direction: row;
        position: absolute;
        left: 50%;
        top: 14vw;
        transform: translate(-50%);
        max-width: 440px;
        gap: 5vw;
        justify-content: center;
        align-items: center;
    }

    .mj-maintext {
        font-size: 8vw;
        top: -1.6vw;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }

    .form-control.bib-new-input {
        font-size: 8.09vw;
    }

    .bib-new-input::placeholder {
        font-size: 8.09vw;
    }

    .index-bibform {
        max-width: 100%;
        position: absolute;
        left: 52%;
        top: 47%;
        transform: translate(-50%, -50%);
        padding: 0;
        padding-left: 11vw;
        padding-right: 11vw;
        margin-top: 22vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .error-text {
        color: #ED1A3B;
        font-weight: 600;
        font-size: 3.1vw;
        top: 14.7vw;
        position: absolute;
        left: 0px;
        padding-left: 11vw;
        padding-right: 11vw;
        width: 100%;
    }

    .tmm-idfc-logo {
        width: 32vw;
    }

    .tmm-logo-img {
        width: 29vw;
    }

    .btyb-text {
        font-size: 3.1vw;
        margin-bottom: 3vw;
    }

    .bib-submitbtn {
        margin-top: 13vw;
        max-width: 60vw;
        min-height: 113px;
    }

    .submit-arrow-img {
        width: 9vw;
    }

    .submit-text {
        font-size: 5vw;
    }

    .bib-submitbtn {
        min-height: 16.9vw;
    }

    .bib-sfinner {
        padding: 12px;
    }

    /* 
    .bib-sfinner {
        padding: 2.76vw;
    } */

    .sbandbtn-group {
        padding: 6px 10px 6px 25px;
    }

    .mum-bridge-img {
        width: 149px;
        z-index: 1;
    }

    .sdw-indexthree-img {
        position: absolute;
        bottom: -1.4vw;
        left: 18vw;
        z-index: -1;
        width: 34vw;
    }

    .sdw-indexfour-img {
        position: absolute;
        bottom: 51vw;
        left: 4.5vw;
        z-index: -1;
        width: 19.5vw;
    }

    .mj-video-roll {
        width: 81vw;
        z-index: 2;

        position: absolute;
        right: unset;
        bottom: 7.75vw;
        left: 50%;
        transform: translateX(-50%);
        padding: 0px;
        display: flex;
        border-radius: 20px;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;

    }

    .vp-sp {
        width: 81vw;
        height: 81vw;
        border-radius: 13px;
    }

    .vp-sp video {
        width: 78vw;
        height: 78vw;
        border-radius: 13px;
    }

    .video-outer-main {
        border-radius: 13px;
    }

    .syam-text {
        color: #F2E5D5;
        font-size: 3.9vw;
        padding-top: 4.6vw;
        padding-bottom: 4.6vw;
        line-height: 0;
        font-weight: 600;
    }

    .cc-iconancr {
        width: 9vw;
    }

    .idx-index-logo-group {
        display: flex;
        flex-direction: row;
        position: absolute;
        left: 50%;
        top: 33vw;
        transform: translate(-50%);
        max-width: 440px;
        gap: 5vw;
        justify-content: center;
        align-items: center;
    }

    .idx-index-bibform {
        max-width: 100%;
        position: absolute;
        left: 50%;
        top: 47%;
        transform: translate(-50%, -50%);
        padding: 0;
        padding-left: 10.5vw;
        padding-right: 10.5vw;
        margin-top: 22vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .main-bg {
        background-image: url("/tmm-26/images/index/index-mb-bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        /* background-position: center; */
        position: relative;
        isolation: isolate;
    }

    .mb-soneimg {
        width: 3.5vw;
        padding: 0px;
        position: absolute;
        left: 5vw;
        top: 48%;
        z-index: -1;
    }

    .mb-stwoimg {
        width: 37vw;
        position: absolute;
        bottom: -1vw;
        left: 54px;
        z-index: -1;
    }

    .mb-sthreeimg {
        width: 25vw;
        position: absolute;
        right: 5vw;
        z-index: -1;
        bottom: -1vw;
    }

          .mb-sfourimg {
        width: 2.4vw;
        padding: 0px;
        position: absolute;
        right: 14px;
        top: 36%;
        z-index: -1;
    }
    .bib-sndinner-main{
            border-radius: 30px;
    }
    .bib-submitbtn{
        border-radius: 30px;
    }
    .bib-sfinner{
        border-radius: 30px;
    }
    .bib-sndinner{
        border-radius: 30px;
    }
}

@media screen and (max-width:480px) {
    .bib-submitbtn {
        min-height: 17.9vw;
    }
}