@media only screen and (max-width: 1200px) {

    .lbox-msg {
        height: 115px;
        padding: 45px;
        top: 145px;
    }

    .main-container {
        max-width: 1024px;
    }

    .how-it-works-container,
    .tc-container,
    .back-to-promotions-container,
    .winners-container {
        width: 245px;
        height: 62px;
    }

    .form-container {
        height: 300px;
    }

    .form-title,
    .form-subtitle {
        font-size: 23px;
    }
}

@media only screen and (max-width: 1024px) {

    .lbox-msg {
        top: 120px;
        width: 320px;
    }

    .tpl-back-btn,
    .tpl-download-faq {
        display: none !important;
    }

    .tpl-right-nav {
        display: none !important;
    }

    .tpl-lang-wrap {
        right: 0px !important;
        top: -10px !important;
    }

    .tpl-join-now {
        padding: 5px;
        position: relative;
        right: 170px;
        height: 22px;
        top: 9px;
        width: 80px;
    }

    main {
        background-image: url(../img/bg-1024.jpg);
        background-position: center -95px;
        height: 720px;
    }

    body.th main {
        background-image: url(../img/bg-tablet-th.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 1024px auto;
        height: 1500px;
    }

    .title-container {
        height: 200px;
        width: 768px;
        margin: auto;
        position: relative;
    }

    .title-container p {
        font-size: 28px;
        top: 25px;
    }

    .form-container {
        width: 365px;
        height: 250px;
        background-size: cover;
        border-radius: 10px;
    }

    .form-title,
    .form-subtitle {
        font-size: 17px;
    }

    .left-container {
        display: none;
    }

    input[type="text"] {
        width: 100%;
    }

    button#submit,
    button#reset {
        width: 145px;
        height: 30px;
        font-size: 20px;
        margin: 0px 8px;
        background-size: cover;
        border-radius: 15px;
    }

    .how-it-works-container,
    .tc-container,
    .back-to-promotions-container,
    .winners-container {
        width: 180px;
        height: 48px;
    }

    .how-it-works-container p,
    .tc-container p,
    .winners-container p {
        font-size: 14px;
    }

    .buttons-container {
        height: unset;
        margin-top: 20px;
    }

    .back-to-promotions-container a {
        font-size: 14px;
    }

    .form-inner-container {
        width: 100%;
        height: 250px;
    }

    .right-container {
        float: right;
        height: 250px;
    }

    form {
        height: 100px;
        top: 80px;
        width: 90%;
    }

    p.form-subtitle-2 {
        font-size: 15px;
        top: 155px;
    }

    body.th .buttons-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        width: 520px;
        margin: 40px auto 0;
        height: auto;
    }

    body.th .how-it-works-container,
    body.th .tc-container,
    body.th .winners-container,
    body.th .back-to-promotions-container {
        width: 100%;
        height: 64px;
        margin: 0;
        background-image: url(../img/box-th.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    body.th .how-it-works-container p,
    body.th .tc-container p,
    body.th .winners-container p,
    body.th .back-to-promotions-container a {
        font-size: 16px;
        line-height: 1.2;
        white-space: nowrap;
    }

    body.th .left-container,
    body.th .right-container {
        transform: scale(1.3);
        margin-top: 410px;
    }

    body.th .title-container p span.yellow {
        top: -5px;
    }

    body.th form {
        margin: 0;
        width: auto;
    }
}

@media only screen and (max-width: 768px) {

    .lbox-msg {
        height: 85px;
        padding: 31px;
        width: 260px;
        top: 113px;
    }

    .lbox-msg span {
        font-size: 19px;
    }

    main {
        height: 700px;
    }

    body.th main {
        background-size: 768px auto;
        height: 1260px;
    }

    .form-container {
        width: 290px;
        height: 220px;
    }

    .form-inner-container {
        height: 100%;
    }

    .form-title,
    .form-subtitle {
        font-size: 13px;
    }

    input[type="text"] {
        height: 35px;
        font-size: 14px;
    }

    button#submit,
    button#reset {
        width: 114px;
        height: 30px;
        font-size: 16px;
    }

    .how-it-works-container,
    .tc-container,
    .back-to-promotions-container,
    .winners-container {
        width: 135px;
        height: 35px;
    }

    .how-it-works-container p,
    .tc-container p,
    .winners-container p {
        font-size: 12px;
    }

    .back-to-promotions-container a {
        font-size: 12px;
    }

    .title-container {
        height: 200px;
        width: 600px;
    }

    .title-container p {
        font-size: 23px;
        top: 20px;
    }

    .title-container p span.yellow {
        font-size: 17px;
        top: -10px;
    }

    body.th .title-container p span.yellow {
        font-size: 18px;
    }

    body.th .left-container,
    body.th .right-container {
        transform: scale(1.1);
        margin-top: 310px;
    }

    body.th .lightbox-bg3 .table-3 {
    width: 65%;
}
}

@media only screen and (max-width: 600px) {

    .period-mobi {
        display: block;
    }

    .period-mobi .yellow span {
        top: -15px;
        position: relative
    }

    .period-desktop {
        display: none;
    }

    h1 {
        background-image: url(../img/title-bga-mobi.png);
        background-repeat: no-repeat;
        width: 475px;
        height: 241px;
        background-size: contain;
        top: 0px;
    }

    body.th h1 {
        width: 455px;
    }

    .lbox-msg {
        height: 95px;
        font-size: 16px;
        width: 350px;
        top: 85px;
    }

    .tpl-lang-wrap {
        left: -25px !important;
    }

    .tpl-join-now {
        top: -15px;
        left: -25px;
        font-size: 11.5px;
    }

    main {
        height: 1420px;
        background-image: url(../img/bg-600.jpg);
        background-position: center -75px;
    }

    body.th main {
        background-repeat: no-repeat;
        background-position: center top;
        background-color: #810400;
        background-size: 599px;
        height: 1285px;
    }

    body.th .lightbox-bg3 .jspVerticalBar{
        right: 47px;
    }
    

    .title-container {
        width: 475px;
        padding-top: 420px;
    }

    .title-container p {
        font-size: 30px;
        top: 0px;
    }

    .tpl-logo-wrap {
        display: block !important;
        margin: 0 auto !important;
    }

    .title-container p span.yellow {
        font-size: 17px;
    }

    body.th .title-container p {
        width: 410px;
        line-height: 0.7;
    }

    body.th .title-container p span.yellow {
        font-size: 15px;
        top: -75px;
        line-height: 0.9;
    }

    .form-container {
        height: 200px;
        width: 85%;
    }

    .right-container {
        top: 370px;
        height: 400px;
        width: 475px;
        margin: 0 auto;
        float: unset;
    }

    .form-title,
    .form-subtitle {
        top: 30px;
        width: unset;
        margin: 5px auto;
        font-size: 17px;
    }

    button#submit,
    button#reset {
        width: 165px;
        height: 35px;
        font-size: 20px;
    }

    form {
        height: 100px;
        top: 50px;
    }

    p.form-subtitle-2 {
        top: 90px;
    }

    .buttons-container {
        width: 400px;
        flex-direction: column;
    }

    .how-it-works-container,
    .tc-container,
    .back-to-promotions-container,
    .winners-container {
        width: 320px;
        height: 80px;
    }

    .how-it-works-container {
        order: 1;
    }

    .tc-container {
        order: 2;
    }

    .winners-container {
        order: 3;
    }

    .back-to-promotions-container {
        order: 4;
    }

    .how-it-works-container p,
    .tc-container p,
    .winners-container p {
        font-size: 22px;
    }

    .back-to-promotions-container a {
        font-size: 22px;
    }

    .lightbox-bg1,
    .lightbox-bg2,
    .lightbox-bg3 {
        width: 470px;
        height: 420px;
    }

    .scroll-pane1,
    .scroll-pane2,
    .scroll-pane3 {
        width: 470px;
        height: 420px;
    }

    .jspContainer1,
    .jspContainer2,
    .jspContainer3 {
        width: 470px;
        height: 420px;
    }

    .jspPane1,
    .jspPane2,
    .jspPane3 {
        width: 470px;
        height: 420px;
    }

    .ol-container,
    .ol-container-2 {
        width: 450px;
        margin: auto;
        top: 15px;
        height: 250px;
    }

    ol li p {
        width: 400px;
    }

    #how-it-works-title,
    #terms-and-conditions-title,
    #winners-title {
        font-size: 25px;
    }

    .lightbox-bg3 p {
        top: 265px;
        font-size: 15px;
    }

    .slider-4 .gift,
    .slider-5 .gift,
    .slider-6 .gift {
        width: 170px;
        height: 190px;
    }

    .slider-7 .gift,
    .slider-8 .gift,
    .slider-9 .gift,
    .slider-10 .gift {
        width: 240px;
        height: 190px;
    }

    .round-title {
        font-size: 18px;
        top: 45px;
    }

    .table-4 {
        height: 300px;
        top: 55px;
    }

    .winners {
        font-size: 17px;
    }

    .numbers {
        font-size: 20px;
        width: 40px;
    }

    .arrow-prev-1,
    .arrow-prev-2,
    .arrow-prev-3,
    .arrow-prev-4 {
        top: 50%;
    }

    .arrow-next-1,
    .arrow-next-2,
    .arrow-next-3,
    .arrow-next-4 {
        top: 50%;
    }

    body.th .buttons-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        width: 100%;
        margin-top: 30px;
    }

    body.th .how-it-works-container,
    body.th .tc-container,
    body.th .winners-container,
    body.th .back-to-promotions-container {
        width: 300px;
        height: 64px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin: 0;
    }

    body.th .how-it-works-container p,
    body.th .tc-container p,
    body.th .winners-container p,
    body.th .back-to-promotions-container a {
        font-size: 18px;
        white-space: nowrap;
    }

    body.th .left-container,
    body.th .right-container {
        margin-top: 85px;
    }

    body.th .title-container {
        top: -75px;
        padding-top: 0;
    }

    body.th .form-subtitle {
        position: static;
        order: 2;
        margin: 8px 0 6px;
        text-align: center;
        font-size: 16px;
        margin-top: 70px;
    }

    body.th form {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-top: 135px;
    }

    body.th input[type="text"] {
        order: 1;
        max-width: 320px;
    }

    body.th .lightbox-bg3 .ol-container-2{
        top: 40px;
    }

    body.th button#submit {
        order: 3;
        width: 50%;
        max-width: 320px;
        height: 50px;
        line-height: 2;
    }

    body.th .lightbox-bg1,
    body.th .lightbox-bg2,
    body.th .lightbox-bg3 {
        width: 445px;
        height: 445px;
        background-size: contain;
    }

    body.th .lightbox-bg3 p {
        top: 290px;
    }

    body.th .lightbox-bg3 .arrow-next-4+p,
    body.th .lightbox-bg3 .arrow-next-5+p,
    body.th .arrow-next-6+p,
    body.th .arrow-next-7+p,
    body.th .arrow-next-8+p,
    body.th .arrow-next-9+p,
    body.th .arrow-next-10+p {
        top: 25px;
    }
}

@media only screen and (max-width: 480px) {

    .title-container p span.yellow {
        font-size: 15px;
    }

    .period-mobi .yellow span {
        top: -5px;
    }

    .lbox-msg {
        height: 95px;
        font-size: 16px;
        width: 270px;
        top: 70px;
    }

    .tpl-lang-wrap {
        left: 20px !important;
        width: 125px;
    }

    .tpl-lang-trigger {
        padding: 5px 5px 5px;
    }

    .tpl-join-now {
        top: -17px;
        left: 20px;
        width: 70px;
    }

    main {
        background-image: url(../img/bg-480.jpg);
        height: 1110px;
    }

    body.th main {
        background-size: 480px;
        height: 1135px;
    }

    body.th .lightbox-bg3 .ol-container-2{
        height: 180px;
        top: 42px;
    }

    .tpl-contacts span.tpl-social-media {
        display: inline-block !important;
        margin-top: 0px !important;
    }

    .title-container {
        width: 320px;
        top: 0px;
        padding-top: 300px;
    }

    h1 {
        width: 320px;
        height: 170px;
    }

    body.th h1 {
        width: 320px;
        height: 170px;
    }

    .title-container p {
        font-size: 20px;
    }

    .title-container p:nth-child(3) {
        font-size: 11px;
    }

    .right-container {
        height: auto;
        width: 320px;
        top: 270px;
    }

    .form-container {
        height: 185px;
        width: 320px;
    }

    .form-inner-container {
        width: 320px;
        height: 100%;
    }

    .form-title,
    .form-subtitle {
        text-align: center;
        top: 15px;
    }

    .form-title {
        font-size: 14px;
    }

    button#submit,
    button#reset {
        width: 115px;
        height: 30px;
        font-size: 16px;
    }

    .form-subtitle {
        font-size: 14px;
    }

    form {
        width: 270px;
        top: 40px;
    }

    p.form-subtitle-2 {
        top: 55px;
        font-size: 13px;
    }

    .buttons-container {
        width: 320px;
    }

    .how-it-works-container,
    .tc-container,
    .back-to-promotions-container,
    .winners-container {
        width: 250px;
        height: 65px;
    }

    .how-it-works-container p,
    .tc-container p,
    .winners-container p,
    .back-to-promotions-container a {
        font-size: 13px;
    }

    .lightbox-bg1,
    .lightbox-bg2,
    .lightbox-bg3 {
        width: 320px;
        background-size: cover;
        border-radius: 10px;
    }

    .scroll-pane1,
    .scroll-pane2,
    .scroll-pane3 {
        width: 310px;
    }

    .jspContainer1,
    .jspContainer2,
    .jspContainer3 {
        width: 310px;
    }

    .jspPane1,
    .jspPane2,
    .jspPane3 {
        width: 310px;
    }

    #how-it-works-title,
    #terms-and-conditions-title,
    #winners-title {
        top: 10px;
        font-size: 20px;
    }

    .ol-container {
        width: 98%;
        top: 12px;
        height: 385px;
    }

    .ol-container-2 {
        width: 90%;
        top: 20px;
        height: 310px;
    }

    .js-close {
        width: 14px;
        height: 14px;
        background-size: contain;
    }

    .table-1 {
        width: 90%;
    }

    .table-2 {
        width: 90%;
        margin: 15px auto;
    }

    ol li p {
        width: 270px;
        font-size: 12px;
        top: 4px;
    }

    .table-3 {
        width: 90%;
    }

    .round-title {
        font-size: 15px;
        top: 30px;
    }

    .table-4 {
        width: 70%;
    }

    .lightbox-bg3 {
        height: 350px;
    }

    .slider-7 .gift span,
    .slider-8 .gift span,
    .slider-9 .gift span,
    .slider-10 .gift span {
        font-size: 55px;
    }

    #how-it-works-title+p {
        font-size: 11px;
        margin-top: 10px;
    }

    .table-2 tr th {
        font-size: 9px;
    }

    .overlay1 p {
        font-size: 11px;
    }

    ol li {
        font-size: 11px;
    }

    .ol-container {
        height: 300px;
    }

    .table-2 tr td {
        font-size: 10px;
    }

    .lightbox-bg3 p {
        font-size: 13px;
    }

    body.th .lightbox-bg3 p {
        top: 215px;
    }

    body.th .lightbox-bg3 .arrow-next-4+p,
    body.th .lightbox-bg3 .arrow-next-5+p,
    body.th .arrow-next-6+p,
    body.th .arrow-next-7+p,
    body.th .arrow-next-8+p,
    body.th .arrow-next-9+p,
    body.th .arrow-next-10+p {
        top: -25px;
    }

    body.th .left-container,
    body.th .right-container {
        margin-top: 60px;
    }

    body.th .title-container p {
        width: 324px;
    }

    body.th .title-container p span.yellow {
        top: -40px;
    }

    body.th .title-container p {
        line-height: 1;
        margin-right: 0;
    }

    body.th .lightbox-bg1,
    body.th .lightbox-bg2,
    body.th .lightbox-bg3 {
        width: 345px;
        height: 345px;
        background-size: contain;
        border-radius: 0;
    }

    body.th .ol-container,
    body.th .ol-container-2 {
        height: 200px;
    }

    body.th .slider-4 .gift,
    body.th .slider-5 .gift,
    body.th .slider-6 .gift,
    body.th .slider-7 .gift,
    body.th .slider-8 .gift {
        width: 135px !important;
        height: 190px !important;
        margin-top: 40px;
    }
}