@charset "utf-8";
/* Font Document */

@font-face {
    font-family: 'DBHelvethaicaXMedv3_2';
    src: url('../fonts/DBHelvethaicaXMedv3_2.eot');
    src: url('../fonts/DBHelvethaicaXMedv3_2.eot') format('embedded-opentype'),
         url('../fonts/DBHelvethaicaXMedv3_2.woff2') format('woff2'),
         url('../fonts/DBHelvethaicaXMedv3_2.woff') format('woff'),
         url('../fonts/DBHelvethaicaXMedv3_2.ttf') format('truetype'),
         url('../fonts/DBHelvethaicaXMedv3_2.svg#DBHelvethaicaXMedv3_2') format('svg');
}
@font-face {
    font-family: 'Sukhumvit Set';
    src: url('../fonts/SukhumvitSetThin.eot');
    src: url('../fonts/SukhumvitSetThin.eot') format('embedded-opentype'),
         url('../fonts/SukhumvitSetThin.woff2') format('woff2'),
         url('../fonts/SukhumvitSetThin.woff') format('woff'),
         url('../fonts/SukhumvitSetThin.ttf') format('truetype'),
         url('../fonts/SukhumvitSetThin.svg#SukhumvitSetThin') format('svg');
	font-weight: 100;
}
@font-face {
    font-family: 'Sukhumvit Set';
    src: url('../fonts/SukhumvitSetLight.eot');
    src: url('../fonts/SukhumvitSetLight.eot') format('embedded-opentype'),
         url('../fonts/SukhumvitSetLight.woff2') format('woff2'),
         url('../fonts/SukhumvitSetLight.woff') format('woff'),
         url('../fonts/SukhumvitSetLight.ttf') format('truetype'),
         url('../fonts/SukhumvitSetLight.svg#SukhumvitSetLight') format('svg');
	font-weight: 300;
}
@font-face {
    font-family: 'Sukhumvit Set';
    src: url('../fonts/SukhumvitSetText.eot');
    src: url('../fonts/SukhumvitSetText.eot') format('embedded-opentype'),
         url('../fonts/SukhumvitSetText.woff2') format('woff2'),
         url('../fonts/SukhumvitSetText.woff') format('woff'),
         url('../fonts/SukhumvitSetText.ttf') format('truetype'),
         url('../fonts/SukhumvitSetText.svg#SukhumvitSetText') format('svg');
	font-weight: 500;
}
@font-face {
    font-family: 'Sukhumvit Set';
    src: url('../fonts/SukhumvitSetMedium.eot');
    src: url('../fonts/SukhumvitSetMedium.eot') format('embedded-opentype'),
         url('../fonts/SukhumvitSetMedium.woff2') format('woff2'),
         url('../fonts/SukhumvitSetMedium.woff') format('woff'),
         url('../fonts/SukhumvitSetMedium.ttf') format('truetype'),
         url('../fonts/SukhumvitSetMedium.svg#SukhumvitSetMedium') format('svg');
	font-weight: normal;
}
@font-face {
    font-family: 'Sukhumvit Set';
    src: url('../fonts/SukhumvitSetSemiBold.eot');
    src: url('../fonts/SukhumvitSetSemiBold.eot') format('embedded-opentype'),
         url('../fonts/SukhumvitSetSemiBold.woff2') format('woff2'),
         url('../fonts/SukhumvitSetSemiBold.woff') format('woff'),
         url('../fonts/SukhumvitSetSemiBold.ttf') format('truetype'),
         url('../fonts/SukhumvitSetSemiBold.svg#SukhumvitSetSemiBold') format('svg');
	font-weight: 700;
}
@font-face {
    font-family: 'Sukhumvit Set';
    src: url('../fonts/SukhumvitSetBold.eot');
    src: url('../fonts/SukhumvitSetBold.eot') format('embedded-opentype'),
         url('../fonts/SukhumvitSetBold.woff2') format('woff2'),
         url('../fonts/SukhumvitSetBold.woff') format('woff'),
         url('../fonts/SukhumvitSetBold.ttf') format('truetype'),
         url('../fonts/SukhumvitSetBold.svg#SukhumvitSetBold') format('svg');
	font-weight: 900;
}
/* CSS Document */
* { padding: 0px; margin: 0px; border: none; }
html, body { padding: 0px; margin: 0px; vertical-align: baseline; line-height: 0px; border: none; }
a img, img { padding: 0px; margin: 0px; text-decoration: none; outline: none; -moz-outline: none; -webkit-outline: none; border: none; }
a:link, a:hover, a:active, a:visited { text-decoration: none; outline: none; -moz-outline: none; -webkit-outline: none; }
header, nav, article, section, footer { width: 100%; line-height: 0px; }

.bodymain { position: relative; height: 100%; text-align: center; background: #000 url(../images/templates/bg-main.jpg) no-repeat center top; }
.bodystep1,
.bodystep2,
.bodystep3,
.bodystep4,
.bodystep5 { position: relative; height: 100%; text-align: center; background: #000 url(../images/templates/bg-step1-pc.jpg) no-repeat center top; }
.bodyrewards { position: relative; height: 100%; text-align: center; background: #000 url(../images/templates/bg-main.jpg) no-repeat center top; }

/*--------- Main */
.bodymain .section1 { position: relative; top: 0px; left: 0px; padding: 0px; margin: 0px; }
.bodymain .section1 .staticContainer { position: relative; display: block; width: 100%; height: 714px; overflow: hidden; }
.bodymain .section2 { display: none; }
.bodymain .section2 .staticContainer { position: relative; display: block; width: 100%; height: 762px; overflow: hidden; }

.bodymain .section1 .imgboxs-1 { position: absolute; top: 60px; left: 50%; margin: 0 0 0 -470px; opacity: 0; }
.bodymain .section1 .imgboxs-2 { position: absolute; top: 30px; left: 50%; margin: 0 0 0 -26px; opacity: 0; }
.bodymain .section1 .imgboxs-3 { position: absolute; top: 84px; left: 50%; margin: 0 0 0 -142px; opacity: 0; }
/*
.bodymain .section1 .imgboxs-4 { position: absolute; top: 311px; left: 50%; margin: 0 0 0 -158px; opacity: 0; }
.bodymain .section1 .imgboxs-5 { position: absolute; top: 405px; left: 50%; margin: 0 0 0 48px; opacity: 0; }
.bodymain .section1 .imgboxs-6 { position: absolute; top: 519px; left: 50%; margin: 0 0 0 -70px; opacity: 0; }
*/
.bodymain .section1 .imgboxs-4 { position: absolute; top: 330px; left: 50%; margin: 0 0 0 -38px; opacity: 0; }
.bodymain .section1 .imgboxs-5 { position: absolute; top: 468px; left: 50%; margin: 0 0 0 -36px; opacity: 0; }
.bodymain .section1 .imgboxs-7 { position: absolute; top: 288px; left: 50%; margin: 0 0 0 -142px; opacity: 0; }
.bodymain .section1 .imgboxs-8 { position: absolute; top: 467px; left: 50%; margin: 0 0 0 0; opacity: 0; }
.bodymain .section1 .imgboxs-9 { position: absolute; top: 673px; left: 50%; margin: 0 0 0 -124px; opacity: 0; }
.bodymain .section1 .imgboxs-10 { position: absolute; top: 0; left: 50%; margin: 0 0 0 -615px; opacity: 0; }
.bodymain .section1 .imgboxs-11 { position: absolute; top: 186px; left: 50%; margin: 0 0 0 304px; opacity: 0; }
.bodymain .section1 .imgboxs-12 { position: absolute; top: 598px; left: 50%; margin: 0 0 0 -130px; opacity: 0; }
.bodymain .section2 .imgboxs-31 { position: absolute; top: 0; left: 50%; margin: 0 0 0 -230px; }
.bodymain .section2 .imgboxs-32 { position: absolute; top: 634px; left: 50%; margin: 0 0 0 -154px; }
.bodymain .section2 .imgboxs-33 { position: absolute; top: 240px; left: 50%; margin: 0 0 0 -230px; }

/*
.bodymain .section1 .imgboxs-4 { display: inline-block; width: 325px; height: 67px; background: url(../images/templates/mc-4-on.png) no-repeat center top; cursor: pointer; }
.bodymain .section1 .imgboxs-5 { display: inline-block; width: 256px; height: 93px; background: url(../images/templates/mc-5-on.png) no-repeat center top; cursor: pointer; }
.bodymain .section1 .imgboxs-6 { display: inline-block; width: 338px; height: 41px; background: url(../images/templates/mc-6-on.png) no-repeat center top; cursor: pointer; }
.bodymain .section1 .imgboxs-12 { display: inline-block; width: 265px; height: 72px; background: url(../images/templates/btn-2-on.png) no-repeat center top; cursor: pointer; }
*/
.bodymain .section2 .imgboxs-32 { display: inline-block; width: 308px; height: 79px; background: url(../images/templates/btn-2-mb.png) no-repeat center top; cursor: pointer; }
/*
.bodymain .section1 .imgboxs-4:hover { background: url(../images/templates/mc-4-off.png) no-repeat center top; }
.bodymain .section1 .imgboxs-5:hover { background: url(../images/templates/mc-5-off.png) no-repeat center top; }
.bodymain .section1 .imgboxs-6:hover { background: url(../images/templates/mc-6-off.png) no-repeat center top; }
.bodymain .section1 .imgboxs-12:hover { background: url(../images/templates/btn-2-off.png) no-repeat center top; }
*/

.bodymain .section1 .imgboxs-video { position: absolute; top: 0; left: 50%; display: table; width: 1444px; height: 714px; margin: 0 0 0 -720px; background: #000; line-height: 0; -webkit-outline: none; -moz-outline: none; outline: none; }
.bodymain .section2 .imgboxs-video { display: none; }
.bodymain .section1 .index-video-wrapper { width: 100%; height: auto; object-fit: cover; background: #000; }
.bodymain .section2 .index-video-wrapper { display: none; }


/*--------- Step 1 */
.bodystep1 .section1 { position: relative; top: 0px; left: 0px; padding: 0px; margin: 0px; }
.bodystep1 .section1 .staticContainer { position: relative; display: block; width: 100%; height: auto; }
.bodystep1 .st1-1 { display: table; width: 840px; height: 712px; padding: 108px 0 0 0; margin: 0px auto; background: url(../images/templates/step-1-1.png) no-repeat center 96px; }
.bodystep1 .st1-2 { display: table; padding: 99px 0 0 0; }
.bodystep1 .st1-3 { display: inline-block; height: 74px; }
.bodystep1 .st1-4 { padding: 20px 0 0 0; }
.bodystep1 .st1-4.size-normal {}
.bodystep1 .st1-4.size-mobile { display: none; }

/*--------- Step 2 */
.bodystep2 .section1 { position: relative; top: 0px; left: 0px; padding: 0px; margin: 0px; }
.bodystep2 .section1 .staticContainer { position: relative; display: block; width: 100%; height: auto; }
.bodystep2 .st2-1 { display: table; width: 100%; height: 600px; padding: 96px 0 0 0; margin: 0px auto; background: url(../images/templates/step-2-1.png) no-repeat center 96px; }
.bodystep2 .st2-2 { display: table; width: 488px; padding: 40px 0 0 0; margin: 0px auto; }
.bodystep2 .st2-3 { display: table; width: 100%; height: 258px; padding: 0 27px 0 27px; text-align: left; }
.bodystep2 .st2-3-1 { font-family: 'DBHelvethaicaXMedv3_2' ; font-size: 23px; line-height: 1em; color: #fff; }
.bodystep2 .st2-3-2 { font-family: 'DBHelvethaicaXMedv3_2' ; font-size: 19px; line-height: 1em; color: #fff; }
.bodystep2 .st2-3.size-normal {}
.bodystep2 .st2-3.size-mobile { display: none; }
.bodystep2 .st2-4 {}
.bodystep2 .st2-4 .btn-2-1 { margin: 0 10px 0 0; }
.bodystep2 .st2-4 .btn-2-2 { margin: 0 0 0 10px; }
.bodystep2 .st2-5 { height: 112px; }
.bodystep2 .st2-6 { display: table; width: 100%; height: 100%; padding: 12px 0 0 0; }

/*--------- Step 3 */
.bodystep3 .section1 { position: relative; top: 0px; left: 0px; padding: 0px; margin: 0px; }
.bodystep3 .section1 .staticContainer { position: relative; display: block; width: 100%; height: auto; }
.bodystep3 .st3-1 { display: table; width: 100%; height: 712px; padding: 96px 0 0 0; margin: 0px auto; }
.bodystep3 .st3-2 { height: 110px; }
.bodystep3 .st3-3 { display: table; width: 620px; margin: 0px auto; }
.bodystep3 .st3-4 { display: table; width: 100%; list-style: none; }
.bodystep3 .st3-4 li { float: left; display: inline-block; width: 50%; padding: 0 0 28px 0; }
.bodystep3 .st3-5 {}
.bodystep3 .st3-6 {}

.bodystep3 .data-vdo { cursor: pointer; }
.bodystep3 .data-vdo-1 { background: url(../vdo/1-on.jpg) no-repeat center top; background-size: contain; }
.bodystep3 .data-vdo-2 { background: url(../vdo/2-on.jpg) no-repeat center top; background-size: contain; }
.bodystep3 .data-vdo-3 { background: url(../vdo/3-on.jpg) no-repeat center top; background-size: contain; }
.bodystep3 .data-vdo-4 { background: url(../vdo/4-on.jpg) no-repeat center top; background-size: contain; }
.bodystep3 .data-vdo-1.active, .bodystep3 .data-vdo-1:hover { background: url(../vdo/v-1.gif) no-repeat center top; background-size: contain; }
.bodystep3 .data-vdo-2.active, .bodystep3 .data-vdo-2:hover { background: url(../vdo/v-2.gif) no-repeat center top; background-size: contain; }
.bodystep3 .data-vdo-3.active, .bodystep3 .data-vdo-3:hover { background: url(../vdo/v-3.gif) no-repeat center top; background-size: contain; }
.bodystep3 .data-vdo-4.active, .bodystep3 .data-vdo-4:hover { background: url(../vdo/v-4.gif) no-repeat center top; background-size: contain; }
.bodystep3 .data-to { display: inline-block;  width: 254px; height: 72px; background:url(../images/templates/btn-step3-onH.png) no-repeat center top; }
.bodystep3 .data-to.active { background:url(../images/templates/btn-step3-on.png) no-repeat center top; }
.bodystep3 .data-to.active:hover { background:url(../images/templates/btn-step3-off.png) no-repeat center top; }

/*--------- Step 4 */
.bodystep4 .section1 { position: relative; top: 0px; left: 0px; padding: 0px; margin: 0px; }
.bodystep4 .section1 .staticContainer { position: relative; display: block; width: 100%; height: auto; }
.bodystep4 .st4-1 { display: table; width: 100%; height: 712px; padding: 96px 0 0 0; margin: 0px auto; }
.bodystep4 .st4-2 {}
.bodystep4 .st4-3 {}
.bodystep4 .st4-4 {}
.bodystep4 .st4-5 { position: absolute; top: 0; display: table; width: 100%; padding: 180px 0 0 0; }
.bodystep4 .st4-6 {}
.bodystep4 .st4-7 {}
.bodystep4 .st4-8 { display: inline-block; border: #ffc423 solid 3px; }

.bodystep4 .question-info { display: table; width: 820px; margin: 0px auto; }
.bodystep4 .question-header-1 { position: relative; top: 0; display: block; width: 100%; height: 30px; font-family: 'Sukhumvit Set'; font-size: 20px; line-height: 1.2em; font-weight: 900; text-decoration: underline; color: #ffc423; }
.bodystep4 .question-header-2 { position: relative; top: 0; display: block; width: 100%; height: 60px; font-family: 'Sukhumvit Set'; font-size: 23px; line-height: 1.2em; color: #fff; }
.bodystep4 .question-boxs { position: relative; top: 330px; display: table; width: 100%; }
.bodystep4 .question-ul { display: table; width: 100%; }
.bodystep4 .question-ul li { float: left; display: inline-block; width: 50%; padding: 10px 0; text-align: center; }
.bodystep4 .question-answer { display: table-cell; width: 360px; height: 55px; padding: 0 10px; vertical-align: middle; background: url(../images/templates/answer-on.png) no-repeat center top; background-size: contain; cursor: pointer; }
.bodystep4 .question-answer:hover { background: url(../images/templates/answer-off.png) no-repeat center top; background-size: contain; }
.bodystep4 .question-answer .question-answer-a { font-family: 'Sukhumvit Set'; font-size: 15px; font-weight: 900; line-height: 1.4em; color: #ffc423; }
.bodystep4 .question-answer .question-answer-b { font-family: 'Sukhumvit Set'; font-size: 15px; font-weight: 900; line-height: 1.4em; color: #fff; }
.bodystep4 .question-answer:hover .question-answer-a { color: #5a0100; }
.bodystep4 .question-answer:hover .question-answer-b { color: #5a0100; }
.bodystep4 .question-section-1 {}
.bodystep4 .question-section-2 { display: none; }
.bodystep4 .question-section-3 { display: none; }
.bodystep4 .question-section-4 { display: none; }
.bodystep4 .question-section-5 { display: none; }

/*--------- Step 5 */
.bodystep5 .section1 { position: relative; top: 0px; left: 0px; padding: 0px; margin: 0px; }
.bodystep5 .section1 .staticContainer { position: relative; display: block; width: 100%; height: auto; }
.bodystep5 .st5-1 { display: table; width: 100%; height: 712px; padding: 96px 0 0 0; margin: 0px auto; }
.bodystep5 .st5-2 { display: table; width: 490px; height: 590px; margin: 0px auto; }
.bodystep5 .st5-2-1 { background: url(../images/templates/step-5-1.png) no-repeat center top; }
.bodystep5 .st5-2-2 { background: url(../images/templates/step-5-2.png) no-repeat center top; }
.bodystep5 .st5-2-3 { background: url(../images/templates/step-5-3.png) no-repeat center top; }
.bodystep5 .st5-3 { padding: 250px 0 0 0; }
.bodystep5 .st5-4 { padding: 500px 0 0 0; }
.bodystep5 .st5-5 { padding: 500px 0 0 0; }

/*--------- Rewards */
.bodyrewards .section1 { position: relative; top: 0px; left: 0px; padding: 0px; margin: 0px; }
.bodyrewards .section1 .staticContainer { position: relative; display: block; width: 100%; height: auto; }
.bodyrewards .rew-1.size-normal {}
.bodyrewards .rew-1.size-mobile { display: none; border-bottom: #f00 solid 1px; }

/* Menu */
.header { position: absolute; top: 0px; left: 0px; display: block; z-index: 10; width: 100%; height: 100px; }
.header .menu-1 { position: relative; text-align: center; }
.header .menu-2 { position: absolute; top: 24px; right: 90px; }
.header .menu-3 { position: absolute; top: 18px; left: 90px; }
.header .menu-4 { position: absolute; top: 30px; left: 50%; margin: 0 0 0 -27px; }
.header .btn-rules.size-normal { display: inline-table; width: 147px; height: 27px; background: url(../images/templates/btn-1-on.png) no-repeat center top; }
.header .btn-rules:hover.size-normal { background: url(../images/templates/btn-1-off.png) no-repeat center top; }
.header .btn-rules.size-mobile { display: none; width: 48px; height: 48px; padding: 0 0 0 18px; background: url(../images/templates/ico-rules-mb.png) no-repeat left 50%; }

.header .btn-home.size-normal { display: inline-table; width: 100px; height: 15px; padding: 0 0 0 0; background: url(../images/templates/ico-backto-on.png) no-repeat left 0px; }
.header .btn-home:hover.size-normal { background: url(../images/templates/ico-backto-off.png) no-repeat left 0px; }
.header .btn-home.size-mobile { display: none; width: 48px; height: 48px; padding: 0 0 0 18px; background: url(../images/templates/ico-backto-mb.png) no-repeat left 50%; }

/* Footer */
.footer{ font-family: 'DBHelvethaicaXMedv3_2', Helvetica, Arial, sans-serif; background-color: #000; }
.footer h6 { margin-bottom: .5rem; font-size: 24px; line-height: 27px; color: inherit; }
.footer .container { padding: 20px 20px; }
.footer.fix_bottom { position: absolute; width: 100%; bottom: 0; }
.footer li{ font-size: 1.4em; line-height: 1.4; list-style:none; color: #808080; }
.footer li a { text-decoration: none; color: #fff; }
.footer li a:hover { color: #ffce33; }

.footer .social_icon { float: left; width: 100%; }
.footer .social_icon li{ float: left; padding: 10px;}
.footer .header_col { color: #827e7e; text-align: left; }
.footer .social_icon li:first-child { padding-left:0; }
.footer .icon_call { height: 44px; margin: 10px 0; background: url(../images/templates/banner-1711.png) no-repeat left center; background-size: contain; }
.footer .menu_order li { text-align: left; }
.footer .link_footer li { text-align: left; }
.footer .link_footer li a { text-transform: capitalize; }
.footer .copy{ float: left; display: block; font-family: 'DBHelvethaicaXMedv3_2'; font-size: 1.2em; line-height: 1em; color: #fff; }

.input_c1,
.input_c2,
.input_c3 { width: 450px; height: 48px; padding: 0 15px; font-family: 'Sukhumvit Set'; font-style: italic; font-size: 18px; font-weight: normal; text-align: center; line-height: 24px; color: #fff; background: none; outline: none; }
.input_c1::-webkit-input-placeholder { color: #fcb040; }
.input_c1::-moz-placeholder {  color: #fcb040; }
.input_c1:-ms-input-placeholder { color: #fcb040; }
.input_c1:-moz-placeholder { color: #fcb040; }

.input_c2::-webkit-input-placeholder { font-size: 15px; color: #fcb040; }
.input_c2::-moz-placeholder { font-size: 15px; color: #fcb040; }
.input_c2:-ms-input-placeholder { font-size: 15px; color: #fcb040; }
.input_c2:-moz-placeholder { font-size: 15px; color: #fcb040; }

.input_c3::-webkit-input-placeholder { color: #fcb040; }
.input_c3::-moz-placeholder {  color: #fcb040; }
.input_c3:-ms-input-placeholder { color: #fcb040; }
.input_c3:-moz-placeholder { color: #fcb040; }

.input_submit {  border: none; outline: none; cursor: pointer; }
.img-resize { max-width: 100%; }
.img-fullsize { width: 100%; }

/* Pop Up */
.popup { position: fixed; top: 0px; left: 0px; display: none; width: 100%; height: 100%; background: rgba(0,0,0,0.75); }
.popup-inner { position:absolute; top:50%; left:50%; max-width: 442px; width: 442px; background: #fff; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.popup-text-1 { width: 442px; height: 145px; background: url(../images/templates/pop-2.png) no-repeat center top; }
.popup-text-2 { width: 442px; height: 145px; background: url(../images/templates/pop-3.png) no-repeat center top; }
.popup-text-3 { height: 80px; padding: 20px 0 0 0; }
	
.popup-close-1 { position: relative; top: 0; right: 0px; } 
.popup-close-2 { position: relative; top: 70px; right: 0px; } 
.popup-close-bnt { position: absolute; top: 20px; right: 20px; display: inline-block; width: 30px; height: 30px; padding-top: 4px; transition: ease 0.25s all; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); font-family: 'Sukhumvit Set'; font-size: 21px; font-weight: 900; text-align:center; line-height: 1em; color: #fff; }
.popup-close-bnt:hover { -webkit-transform: translate(50%, -50%) rotate(180deg); transform: translate(50%, -50%) rotate(180deg); text-decoration: none; color: #fcb040; }
.notetext1 { font-family: 'Sukhumvit Set'; font-size: 19px; font-weight: 900; text-align:center; line-height: 1em; color: #fff; }
.notetext2 { padding: 0 0 8px 0; font-family: 'Sukhumvit Set'; font-size: 19px; font-weight: 900; text-align:center; line-height: 1em; color: #ffc422; }

/* Tiny Scrollbar */
#scrollbar1 { position: relative; width: 1020px; padding: 140px 0 30px 0; margin: 0 auto; }
#scrollbar1 .viewport { position: relative; height: 588px; overflow: hidden; }
#scrollbar1 .overview { position: absolute; left: 0; top: 0; list-style: none; padding: 0; margin: 0; }
#scrollbar1 .scrollbar{ position: relative; float: right; width: 20px; background: transparent url(../images/templates/bg-scrollbar-track-y.png) no-repeat 0 0; background-position: 0 0; }
#scrollbar1 .track { position: relative; background: transparent url(../images/templates/bg-scrollbar-trackend-y.png) no-repeat 0 100%; width: 20px; height: 100%; }
#scrollbar1 .thumb { position: absolute; top: 0; left: 4px; width: 12px; height: 44px; overflow: hidden; background: transparent url(../images/templates/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; cursor: pointer; }
#scrollbar1 .thumb .end { width: 12px; height: 5px; overflow: hidden; background: transparent url(../images/templates/bg-scrollbar-thumb-y.png) no-repeat 50% 0; }
#scrollbar1 .disable { display: none; }
.noSelect { -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; }


.popup-close-r { position: absolute; top: 25px; right: 25px; display: inline-block; width: 44px; height: 44px; padding-top: 4px; transition: ease 0.25s all; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); font-family: 'Sukhumvit Set'; font-size: 34px; font-weight: 900; text-align:center; line-height: 1em; color: #fff; } 
.popup-close-r:hover { -webkit-transform: translate(50%, -50%) rotate(180deg); transform: translate(50%, -50%) rotate(180deg); text-decoration: none; color: #fcb040; }
.fancybox-slide>div { padding: 4px; background-color: #5a5a5a; }


/* Media Screen */
@media only screen and (max-width: 1297px) {
}
@media only screen and (max-width: 1217px) {
	.header .menu-2 { right: 20px; }
	.header .menu-3 { left: 20px; }	
}
@media only screen and (max-width: 1090px) {
}
	
@media only screen and (max-width: 1117px) {
}
@media only screen and (max-width: 1041px) {
	.bodyrewards .rew-2 { width: 90%; }
	#scrollbar1 { width: 100%; }
	#rewards_img { width: 100%; height: auto; }
}
@media only screen and (max-width: 997px) {
	
}
@media only screen and (max-width: 877px) {
	.bodystep1 .st1-1 { width: 100%; }	
	.bodystep4 .question-info { width: 100%; }
	.bodystep4 .question-ul li { display: table; width: 100%; }
	.bodystep4 .video-Container { position: relative; width: 100%; height: 0; padding: 0 0 56.25% 0; overflow: hidden; background-size: cover; }
	.bodystep4 .video-Container iframe,
	.bodystep4 .video-Container object,
	.bodystep4 .video-Container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	
	.bodystep4 .st4-1 {}
	.bodystep4 .st4-8 { display: block; width: 90%; margin: 0px auto; }
}
@media only screen and (max-width: 777px) {
}
@media only screen and (max-width: 737px) {
}
@media only screen and (max-width: 657px) {
	.bodystep3 .st3-3 { width: 100%; } 
	.bodystep3 .st3-4 li { width: 50%; padding: 0 2% 28px 2%; }
}
@media only screen and (max-width: 577px) {
	.bodystep2 .st2-2 { width: 100%; padding: 30px 0 0 0; }
	.bodystep5 .st5-2 { width: 100%; }	
}
@media only screen and (max-width: 477px) {
	.header .btn-rules.size-normal { display: none; }
	.header .btn-rules.size-mobile { display: inline-block; }	
	.header .btn-home.size-normal { display: none; }
	.header .btn-home.size-mobile { display: inline-block; }	
	.header .menu-3 { top: 14px; left: 14px; width: 128px; }
	.header .menu-4 { top: 20px; }
	
	.bodystep1,
	.bodystep2,
	.bodystep3,	
	.bodystep5 { background: #000 url(../images/templates/bg-step1-mb.jpg) no-repeat center top; }
	.bodystep4 { background: #000 url(../images/templates/bg-step4-mb.jpg) no-repeat center top; }
	.bodyrewards { background: #000 url(../images/templates/bg-rewards-mb.jpg) no-repeat center top; }

	.bodymain .section1 { display: none; }
	.bodymain .section2 { display: inline-block; }
	
	.bodymain .section1 .imgboxs-video { display: none; }
	.bodymain .section2 .imgboxs-video { position: absolute; top: auto; left: 50%; bottom: 0; display: table; width: 1444px; height: 714px; margin: 0 0 0 -720px; background: #000; line-height: 0; -webkit-outline: none; -moz-outline: none; outline: none; }
	.bodymain .section1 .index-video-wrapper { display: none; }
	.bodymain .section2 .index-video-wrapper { display: block; width: 100%; height: auto; object-fit: cover; background: #000; }

	.bodystep1 .st1-1 { height: 762px; background: url(../images/templates/step-1-mb.png) no-repeat center 86px; }
	.bodystep1 .st1-2 { padding: 65px 0 0 0; }
	.bodystep1 .st1-3 { height: 63px; }
	.bodystep1 .st1-4 { padding: 145px 0 0 0; }
	.bodystep1 .st1-4.size-normal { display: none; }
	.bodystep1 .st1-4.size-mobile { display: inline-block; }
	
	
	.bodystep2 .st2-1 { height: 630px; background: url(../images/templates/step-2-1-mb.png) no-repeat center 92px; }
	.bodystep2 .st2-3 { height: 278px; }
	.bodystep2 .st2-3.size-normal { display: none; }
	.bodystep2 .st2-3.size-mobile { display: inline-block; }
	.bodystep2 .st2-4 .size-normal { display: none; }
	.bodystep2 .st2-5 { height: 132px; }
	
	
	.bodystep3 .st3-1 { height: 620px; }
	
	.bodystep4 .st4-1 { height: 762px; }
	.bodystep4 .question-boxs { top: 260px; }
	.bodystep5 .st5-1 { height: 762px; }
	.bodystep5 .st5-2-1 { background-size: 94%; }
	.bodystep5 .st5-2-2 { background-size: 94%; }
	.bodystep5 .st5-2-3 { background-size: 94%; }
	.bodystep5 .st5-3 { padding: 215px 0 0 0; }
	
	.bodyrewards .rew-1 { padding: 80px 0 30px 0; }
	.bodyrewards .rew-1.size-normal { display: none; }
	.bodyrewards .rew-1.size-mobile { display: inline-block; }	
	
	.input_c1, .input_c2, .input_c3 { width: 420px; font-size: 21px; }
	
	.input_c1::-webkit-input-placeholder { padding: 4px 15px 0 15px;  color: #fcb040; }
	.input_c1::-moz-placeholder { padding: 4px 15px 0 15px; color: #fcb040; }
	.input_c1:-ms-input-placeholder { padding: 4px 15px 0 15px; color: #fcb040; }
	.input_c1:-moz-placeholder { padding: 4px 15px 0 15px; color: #fcb040; }
	
	.input_c2::-webkit-input-placeholder { padding: 4px 15px 0 15px; font-size: 13px; color: #fcb040; }
	.input_c2::-moz-placeholder { padding: 4px 15px 0 15px; font-size: 13px; color: #fcb040; }
	.input_c2:-ms-input-placeholder { padding: 4px 15px 0 15px; font-size: 13px; color: #fcb040; }
	.input_c2:-moz-placeholder { padding: 4px 15px 0 15px; font-size: 13px; color: #fcb040; }
	
	.input_c3::-webkit-input-placeholder { padding: 3px 15px 0 15px; font-size: 17px; color: #fcb040; }
	.input_c3::-moz-placeholder { padding: 3px 15px 0 15px; font-size: 17px; color: #fcb040; }
	.input_c3:-ms-input-placeholder { padding: 3px 15px 0 15px; font-size: 17px; color: #fcb040; }
	.input_c3:-moz-placeholder { padding: 3px 15px 0 15px; font-size: 17px; color: #fcb040; }
	
	.popup-inner { top: 25%; }
}
/* clear */
.clear { clear: both; }