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

@font-face {
    font-family: 'DBHelvethaicaXMedv3_2';/*67 Med*/
    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: url(../images/templates/bg-main.jpg) no-repeat center top; }
.bodyrewards { position: relative; height: 100%; text-align: center; background: #000 url(../images/templates/bg-reward-pc.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: 564px; overflow: hidden; }
.bodymain .section1.size-normal {}
.bodymain .section1.size-mobile { display: none; }
.bodymain .section2 {}
.bodymain .section2 .staticContainer { height: 220px; }
.bodymain .section3 {}
.bodymain .section3.size-normal {}
.bodymain .section3.size-mobile { display: none; }
.bodymain .section3 .staticContainer { height: 688px; }

.bodymain .main-1 { width: 940px; margin: 0px auto; }
.bodymain .main-2 { display: table; width: 100%; list-style: none; }
.bodymain .main-2 li { display: inline-block; width: 49.5%; }
.bodymain .main-3 { height: 70px; }
.bodymain .main-4 {}
.bodymain .main-5 {}
.bodymain .main-6 { width: 970px; margin: 0px auto; }
.bodymain .main-7 { display: table; width: 100%; list-style: none; }
.bodymain .main-7 li { float: left; display: inline-block; width: 20%; margin: 6px 0 30px 0; }
.bodymain .main-8 { padding: 16px 0 0 0; }
.bodymain .main-9 { display: none; }

.bodymain .boxs-container { position: relative; display: inline-block; width: 174px; height: 205px; overflow: hidden; }
.bodymain .boxs-image { display: block; width: 100%; height: auto; }
.bodymain .boxs-overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; opacity: 0; transition: .5s ease; }
.bodymain .boxs-container.active .boxs-overlay,
.bodymain .boxs-container:hover .boxs-overlay { opacity: 1; }

.bodymain .section1 .imgbox-1 { position: absolute; top: 26px; left: 50%; margin: 0 0 0 -477px; opacity: 0; }
.bodymain .section1 .imgbox-2 { position: absolute; top: 66px; left: 50%; margin: 0 0 0 -110px; opacity: 0; }
.bodymain .section1 .imgbox-3 { position: absolute; top: 470px; left: 50%; margin: 0 0 0 -460px; }
.bodymain .section1 .imgbox-4 { position: absolute; top: 35px; left: 50%; margin: 0 0 0 2px; opacity: 0; }

.bodymain .section1 .imgboxs-1 { position: absolute; top: 26px; left: 50%; margin: 0 0 0 -335px; opacity: 0; }
.bodymain .section1 .imgboxs-2 { position: absolute; top: 72px; left: 50%; margin: 0 0 0 -456px; opacity: 0 }
.bodymain .section1 .imgboxs-3 { position: absolute; top: 145px; left: 50%; margin: 0 0 0 -462px; opacity: 0 }
.bodymain .section1 .imgboxs-4 { position: absolute; top: 230px; left: 50%; margin: 0 0 0 -393px; opacity: 0 }
.bodymain .section1 .imgboxs-5 { position: absolute; top: 377px; left: 50%; margin: 0 0 0 -387px; opacity: 0 }
.bodymain .section1 .imgboxs-6 { position: absolute; top: 270px; left: 50%; margin: 0 0 0 -477px; opacity: 0 }
.bodymain .section1 .imgboxs-7 { position: absolute; top: 252px; left: 50%; margin: 0 0 0 -196px; opacity: 0 }
.bodymain .section1 .imgboxs-8 { position: absolute; top: 252px; left: 50%; margin: 0 0 0 -196px; opacity: 0 }
.bodymain .section1 .imgboxs-8 img { position: absolute; top:0; left:0; }

.bodymain .main-20 { display: table; width: 100%; height: 540px; background: url(../images/templates/ccv-pc.jpg) no-repeat center top; }
	
/* 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 { padding: 90px 0 0 0; }
.bodyrewards .rew-2.size-normal {}
.bodyrewards .rew-2.size-mobile { display: none; }
.bodyrewards .rew-3 { width: 930px; margin: 0px auto; }
.bodyrewards .rew-4 {}
.bodyrewards .rew-4 .size-normal {}
.bodyrewards .rew-4 .size-mobile { display: none; }
.bodyrewards .rew-5 { padding: 56px 0 0 0; text-align: left; }
.bodyrewards .rew-6 { padding: 38px 0 0 0; }
.bodyrewards .rew-7 { padding: 60px 0 0 0; }
.bodyrewards .rew-7 .size-normal {}
.bodyrewards .rew-7 .size-mobile { display: none; }
.bodyrewards .rew-8 { padding: 60px 0 0 0; text-align: left; }
.bodyrewards .rew-8.size-normal {}
.bodyrewards .rew-8.size-mobile { display: none; }
.bodyrewards .rew-9 { text-align: left; padding: 20px 0 0 0; }
.bodyrewards .rew-10 { text-align: left; padding: 20px 0 0 0; }
.bodyrewards .rew-10.size-normal {}
.bodyrewards .rew-10.size-mobile { display: none; }
.bodyrewards .rew-11 { text-align: left; padding: 14px 0 0 0; }
.bodyrewards .rew-11.size-normal {}
.bodyrewards .rew-11.size-mobile { display: none; }
.bodyrewards .rew-12 { text-align: left; padding: 14px 0 0 0; }
.bodyrewards .rew-12.size-normal {}
.bodyrewards .rew-12.size-mobile { display: none; }
.bodyrewards .rew-13 { text-align: left; padding: 14px 0 0 0; }
.bodyrewards .rew-14 { text-align: left; padding: 0 0 0 0; }
.bodyrewards .rew-15 { padding: 0 0 0 0; }
.bodyrewards .rew-15L { float: right; width: 30%; text-align: center; }
.bodyrewards .rew-15R { float: left; width: 70%; }
.bodyrewards .rew-16 { padding: 0 0 0 0; }
.bodyrewards .rew-17 { padding: 45px 0 0 0; }
.bodyrewards .rew-18 { padding: 0 0 0 0; }
.bodyrewards .rew-19 { padding: 18px 0 0 0; }
.bodyrewards .rew-20 { padding: 16px 0 0 0; }
.bodyrewards .rew-21 { padding: 16px 0 0 0; }
.bodyrewards .rew-22 { padding: 38px 0 0 0; }
.bodyrewards .rew-23 { text-align: left; padding: 14px 0 0 0; }
.bodyrewards .rew-24 { text-align: left; padding: 14px 0 0 0; }
.bodyrewards .rew-25 { text-align: left; padding: 78px 0 0 0; }
.bodyrewards .rew-26 { text-align: left; padding: 10px 0 0 0; }
.bodyrewards .rew-27 { list-style-type: decimal; margin: 0 0 0 1.7em; }
.bodyrewards .rew-27 li { font-family: 'Sukhumvit Set'; font-size: 16px; font-weight: 100; line-height: 30px; color: #fff; }
.bodyrewards .rew-27 li span,
.bodyrewards .rew-27 li a { color: #ffb33d; }
.bodyrewards .rew-28 { padding: 60px 0 70px 0; }

.bodyrewards .text-1 { font-family: 'Sukhumvit Set'; font-size: 40px; font-weight: 900; line-height: 40px; color: #ffb33d; }
.bodyrewards .text-2 { font-family: 'Sukhumvit Set'; font-size: 25px; font-weight: 900; line-height: 25px; color: #fff; }
.bodyrewards .text-3 { font-family: 'Sukhumvit Set'; font-size: 20px; font-weight: 300; line-height: 20px; color: #fff; } 
.bodyrewards .text-4 { font-family: 'Sukhumvit Set'; font-size: 20px; font-weight: 300; line-height: 28px; color: #ffb33d; } 
.bodyrewards .text-5 { font-family: 'Sukhumvit Set'; font-size: 16px; font-weight: 100; line-height: 22px; color: #fff; }
.bodyrewards .text-5 span,
.bodyrewards .text-5 a { color: #ffb33d; }


/* Menu */
.header { position: absolute; top: 0px; left: 0px; display: block; z-index: 10; width: 100%; height: 100px; }
.header .menu-1 { padding: 25px 98px 0 0; text-align: right; }
.header .menu-2 {}
.header .btn-rules.size-normal { display: inline-table; height: 14px; padding: 0 0 0 18px; font-family: 'SukhumvitSetMedium'; font-size: 13px; line-height: 13px; color: #fff; background: url(../images/templates/ico-rules.png) no-repeat left 50%; }
.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; height: 27px; padding: 4.5px 0 0 28px; font-family: 'SukhumvitSetMedium'; font-size: 13px; line-height: 13px; color: #fff; background: url(../images/templates/ico-backto.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%; }

.bodyrewards .header .menu-1 { padding: 25px 0 0 20px; text-align: left; } 

/* 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 center 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; border: #fcb040 solid 2px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; 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: 443px; width: 443px; padding:40px; background: #fff; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.popup-text-1 { width: 443px; height: 180px; background: url(../images/templates/pop-2.png) no-repeat center top; }
.popup-text-2 { width: 443px; height: 180px; background: url(../images/templates/pop-3.png) no-repeat center top; }
.popup-close { position: relative; top: 66px; 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; }

/* Media Screen */
@media only screen and (max-width: 1297px) {
	.header .menu-1 { padding: 25px 4% 0 0; }
}
@media only screen and (max-width: 1217px) {	
}
@media only screen and (max-width: 1090px) {
}
	
@media only screen and (max-width: 1117px) {
}
@media only screen and (max-width: 1041px) {
}
@media only screen and (max-width: 997px) {	
	.bodymain .section3 .staticContainer { height: auto; }
	.bodymain .main-1 { width: 90%; padding: 12px 0 14px 0; }
	.bodymain .main-6 { width: 96%; }
	.bodymain .main-7 li { float: none; width: auto; }		
	.bodymain .main-8 { display: table; width: 100%; padding: 16px 0 58px 0; }
	
	.bodyrewards .rew-3 { width: 90%; }
	.bodyrewards .rew-15L { width: 100%; }
	.bodyrewards .rew-15R { width: 100%; }
	
	.input_c1,
	.input_c2,
	.input_c3 { width: 100%; }
}
@media only screen and (max-width: 877px) {
}
@media only screen and (max-width: 777px) {
	.bodymain { background: url(../images/templates/bg-mb.jpg) no-repeat center 0px; background-size: 100%; }
	
}
@media only screen and (max-width: 737px) {
	.bodymain .section2 .staticContainer { height: auto; }
	.bodymain .main-2 li { width: 100%; }
}
@media only screen and (max-width: 657px) {
}
@media only screen and (max-width: 577px) {
}
@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; }
	
	.bodymain { background: url(../images/templates/bg-mb.jpg) no-repeat center 0px; background-size: 100%; }
	.bodymain .section1.size-normal { display: none; }
	.bodymain .section1.size-mobile { display: inline-block; }
	.bodymain .section1 .staticContainer { height: auto; }
	.bodymain .section3.size-normal { display: none; }
	.bodymain .section3.size-mobile { display: inline-block; }
	.bodymain .main-3 { height: 80px; }
	.bodymain .main-5 { padding: 0 0 20px 0; }
	.bodymain .main-6 { width: 100%; height: 295px; background: url(../images/templates/bg-thumbnail.png) no-repeat center 0px; }
	.bodymain .main-8 { padding: 40px 0 40px 0; }
	.bodymain .main-9 { display: inline-block; }
	.bodymain .main-20 { display: table; width: 100%; height: 784px; background: url(../images/templates/ccv-mb.jpg) no-repeat center top; }
	
	.bodyrewards { position: relative; height: 100%; text-align: center; background: #000 url(../images/templates/bg-reward-mb.jpg) no-repeat center top; }
	.bodyrewards .rew-1 { padding: 74px 0 0 0; }
	.bodyrewards .rew-4 .size-normal { display: none; }
	.bodyrewards .rew-4 .size-mobile { display: inline-block; }
	.bodyrewards .rew-5 { padding: 42px 0 0 0; text-align: center; }
	.bodyrewards .rew-7 .size-normal { display: none; }
	.bodyrewards .rew-7 .size-mobile { display: inline-block; }
	.bodyrewards .rew-8.size-normal { display: none; }
	.bodyrewards .rew-8.size-mobile { display: inline-block; text-align: center; }
	.bodyrewards .rew-9 { text-align: center; }
	.bodyrewards .rew-10.size-normal { display: none; }
	.bodyrewards .rew-10.size-mobile { display: inline-block; text-align: center; padding: 30px 0 0 0; line-height: 26px; }
	.bodyrewards .rew-11.size-normal { display: none; }
	.bodyrewards .rew-11.size-mobile { display: inline-block; text-align: center; padding: 30px 0 0 0; line-height: 26px; }
	.bodyrewards .rew-12.size-normal { display: none; }
	.bodyrewards .rew-12.size-mobile { display: inline-block; text-align: center; padding: 30px 0 0 0; line-height: 26px; }
	.bodyrewards .rew-13 { text-align: center; padding: 25px 0 24px 0; }
	.bodyrewards .rew-18 { letter-spacing: -.8px; }
	
	.input_c2::-webkit-input-placeholder { font-size: 14px; letter-spacing: -.4px; }
	.input_c2::-moz-placeholder { font-size: 14px; letter-spacing: -.4px; }
	.input_c2:-ms-input-placeholder { font-size: 14px; letter-spacing: -.4px; }
	.input_c2:-moz-placeholder { font-size: 14px; letter-spacing: -.4px; }
	
	.input_c3::-webkit-input-placeholder { font-size: 17px; letter-spacing: -.4px; }
	.input_c3::-moz-placeholder { font-size: 17px; letter-spacing: -.4px; }
	.input_c3:-ms-input-placeholder { font-size: 17px; letter-spacing: -.4px; }
	.input_c3:-moz-placeholder { font-size: 17px; letter-spacing: -.4px; }

	
	/*
	.bodyrewards .rew-2.size-normal { display: none; }
	.bodyrewards .rew-2.size-mobile { display: inline-block; }
	*/
	
}
@media only screen and (max-width: 377px) {
	
}

/* clear */
.clear { clear: both; }