/* CSS Document */

@import url("../fonts/FCHype/stylesheet.css");
@import url("../fonts/FCMinimalMedium/stylesheet.css");
@import url("../fonts/FCSaveSpace/stylesheet.css");



/* html5doctor.com/html-5-reset-stylesheet/ */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,time,mark,audio,video { margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; } 
body { line-height:1; }
ol,ul { list-style:none; }
blockquote,q { quotes:none; }
blockquote:before,blockquote:after,q:before,q:after { content:'';content:none; }
ins { text-decoration:none; }
del { text-decoration:line-through; }
table { border-collapse:collapse;border-spacing:0; }



*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* box-sizing: border-box; */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow-x: hidden;  */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}





/* -- CUSTOM CSS -- */
html, body {width:100%; height:100%; padding:0px; margin:0px}

body{ 
	background-color:#000; 
}
body{ font-family: 'FC Hype', sans-serif; font-size:100%; font-weight:400; color:#000; text-decoration:none; }
img {
	border:0px;
}
.img-responsive { display: block; height: auto; max-width: 100%; }
.img-fluid { max-width: 100%; height: auto; }
strong{ font-weight: 500; }
figure{ margin: 0 0 1rem; }

a,
a:hover{
  text-decoration:none;
  color: inherit;
  outline:0; transition: all 0.3s ease;
}
a:focus {
  text-decoration:none;
  outline:0;
}
button{ font-family: 'FC Hype', sans-serif; border: 0; cursor: pointer; background: transparent; padding: 0; margin: 0; }
.btn.focus, .btn:focus{
	outline:0;
	box-shadow: none;
}
input:focus,
select:focus,
textarea:focus,
button:focus,
.form-control:focus {
  outline: none !important;
  box-shadow: none;
}
input,
select,
textarea{
  background-clip: padding-box;
}


.img-maintain{ width: 100%; height: 100%; line-height: 0; }
.img-maintain img{ object-fit: cover; object-position: center; height: 100%; width: 100%; }

.maintain-bg{ background-image: url('../images/maintain/maintain-bg.jpg'); background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; }
.maintain-text{ max-width: 900px; width: 80%; margin:  0 auto; display: flex; align-items: flex-end; justify-content: center; height: 90%; }
.box-abx{ position: absolute; left: 50%; transform: translateX(-50%); }


.txt-glow{ text-shadow: 0 0 10px rgba(0,168,255,0.77),
  0 0 8px rgba(0,168,255,0.77); }


/**********************************************************/
/********************* page 1 : home **********************/


.divContainer{ max-width: 820px; width: 100%; margin: 0 auto; position: relative; z-index: 4; }


.bg1{ background-color: #000; background-image: url('../images/page1/bg-desktop.jpg'); background-repeat: no-repeat; background-position: center top; background-size: cover; padding-bottom: 60px; }

.divBg{background-repeat: no-repeat; background-position: center top; background-size: cover; }

.bg1-1{ background-image: url('../images/page1/bg1-1.jpg'); background-attachment: fixed; padding-bottom: 340px; }
.bg1-2{ background-image: url('../images/page1/bg1-2.png'); padding-bottom: 40px; margin-top: -300px; padding-top: 500px; }

.logo-mongkol{ padding: 15px; display: flex; justify-content: flex-end; }
.logo-mongkol img{ width: 50px; }


.content2{ width: 100%; margin: 0 auto; padding-top: 300px; position: relative; }

.img-title{ max-width: 500px; width: 100%; margin: 50px auto; }
.img-header{ max-width: 400px; width: 90%; margin: 0 auto; }
.img-frame1{ max-width: 530px; width: 100%; margin: 0 auto 30px; }

/* .frame-1{ background-image: url('../images/frame.png'); background-repeat: no-repeat; background-size: cover; max-width: 630px; width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center; text-align: center;  padding: 50px 0; }
.frame-1 p{ font-size: 20px; line-height: 1.3; font-weight: 500; color: #fff; text-shadow: 0 0 10px rgba(0,168,255,0.77),
  0 0 8px rgba(0,168,255,0.77);  }
.frame-1 p span{ font-size: 24px; font-weight: 600; } */

.btn-viewdetail{ max-width: 300px; width: 80%; margin: 0 auto; }

.text-rule{ padding-top: 300px; max-width: 400px; width: 90%; margin: 0 auto 20px; position: relative; }
.btn-confirm{ max-width: 250px; margin: 0 auto 40px; position: relative; }
.text-warning{ max-width: 560px; margin: 0 auto; position: relative; }

.imgteam{ display: none; }


.shoppc{ display: block; }
.shopmobi{ display: none; }



@media only screen and (max-device-width: 1024px) {
  .bg1-1{
    background-attachment: scroll; 
  }
}


@media (max-width: 1199px){

  .img-title{ max-width: 420px; }
  .img-header{ max-width: 380px; }
  .img-frame1{ max-width: 440px; }

  .btn-viewdetail{ max-width: 250px; }

  .text-rule{ padding-top: 300px; max-width: 400px; }
  .btn-confirm{ max-width: 250px; }
  .text-warning{ max-width: 460px; }

}
@media (max-width: 991px){

  .bg1{ background-image: url('../images/page1/bg-mobile2.jpg'); }

  .bg1-2{ padding-top: 150px;}

  .imgteam{ display: block; position: absolute; top: 80px; left: 0; width: 100%; }
  .imgteam img{ width: 100%; }

  .shoppc{ display: none; }
  .shopmobi{ display: block; }
}
@media (max-width: 767px){

  .bg1{ padding-bottom: 40px; }
  .img-title{ max-width: 300px; }
  .img-header{ max-width: 280px; }
  .img-frame1{ max-width: 350px; }

  .btn-viewdetail{ max-width: 250px; }

  .text-rule{ padding-top: 250px; max-width: 300px; }
  .btn-confirm{ max-width: 200px; }
  .text-warning{ max-width: 360px; width: 95%; }



  .content2{  padding-top: 50px; }
  .logo-mongkol{ padding: 10px; }
  .logo-mongkol img{ width: 30px; }
  .img-title{ margin: 10px auto; }
  .img-header{ margin: 0 auto; }
  .img-frame1{ margin: 0 auto 10px; }

}
@media (max-width: 576px){

  .bg1-2{ padding-top: 0px;}
  .content2{  padding-top: 0; }
  .imgteam{ top: 30px; }

}
@media (max-width: 375px){

  .text-rule{ padding-top: 200px; }

}




/**********************************************************/
/********************* page 2 : game **********************/

.bg-game1{ background-color: #000; background-image: url('../images/page2/bg-1.jpg'); background-repeat: no-repeat; background-position: center top; background-size: cover; width: 100%; padding: 20px 0 0 0; max-width: 425px; margin: 0 auto; }
@media (max-width: 1024px){

  .bg-game1{ max-width: 100%; }

}

.box-game1{ padding-bottom: 130%; }
.img-quest,
.img-howto,
.title-form{ max-width: 425px; width: 100%; margin: 0 auto; }

.box-game2{ padding: 0 20px; }

.bg-game3{ position: relative;  }

.boxform{ background-image: url('../images/page2/bg-form.png'); background-repeat: no-repeat; background-size: contain; background-position: center; max-width: 640px; width: 90%; margin: 0 auto; padding: 30px 40px; }
.inputgroup{ width: 250px; margin: 0 auto 20px; text-align: center; }
.inputgroup label { display: inline-block; margin-bottom: 0.5rem; 
  font-size: 18px; line-height: 1.3; color: #fff; font-weight: 500;
text-shadow: 0 0 10px rgba(0,168,255,0.77),
  0 0 8px rgba(0,168,255,0.77);
}

.forminput{
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 8px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-submit{ text-align: center; position: relative; }
.btn-submit img{ width: 150px; }
.btn-submit input.wpcf7-submit{ background-color: transparent; background-image: url('../images/page2/btn-submit.png'); background-repeat: no-repeat; background-size: cover; width: 150px; height: 60px; border: 0; text-indent: -99999px; cursor: pointer; }


.img-bottom{ position: relative; margin-top: -33px; z-index: 8; }
.img-bottom img{ width: 100%; }


@media (max-width: 370px){

  .boxform{ padding: 30px; }
  .inputgroup{ width: 100%; margin-bottom: 10px; }
  .inputgroup label{ font-size: 15px; }
  .forminput{ height: calc(1.5em + 0.5rem + 2px); padding: 0.3rem 0.5rem; }

}



/* iPads (landscape) Styling */
@media handheld, all and (device-width: 1024px) and (device-height: 768px) and (orientation : landscape) {

  .box-game2{ padding-top: 600px; }

}

/* iPads Air (landscape) Styling */
@media handheld, all and (device-width: 1180px) and (device-height: 820px) and (orientation : landscape) {

  .box-game2{ padding-top: 800px; }

}


/* iPads Pro (portrait) Styling */
@media handheld, all and  (device-width: 1024px) and (device-height: 1366px) and (orientation : portrait) {

  .box-game2{ padding-top: 400px; }
  
}
/* iPads Pro (landscape) Styling */
@media handheld, all and (device-width: 1366px) and (device-height: 1024px) and (orientation : landscape) {

  .box-game2{ padding-top: 1400px; }

}


/**********************************************************/
/******************** page 3 : thank **********************/


.video-container {
    height: 100%;
    width: 100%;
    position: relative;
}

.video-container video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  z-index: 0;
}

/* Just styling the content of the div, the *magic* in the previous rules */
.video-container .caption {
  z-index: 1;
  position: relative; width: 100%; height: 100%;
  padding: 30px 20px;
  display: flex; justify-content: space-between; flex-direction: column;
}
.icon-share{ position: absolute; top: 20px; right: 20px; }
.icon-share img{ width: 15px; }

.title-thank{ max-width: 300px; margin: 0 auto; }
.txt-thank{ font-size: 18px; line-height: 1.3; color: #fff; text-align: center; }

.boxthank .txt-thank{ position: relative; margin-top: -10px; }



.thank-logo{ max-width: 320px; width: 95%; margin: 0 auto 10px; }
.div-social ul{ display: flex; align-items: center; justify-content: center; margin-top: 10px; }
.div-social ul li{ margin: 0 10px; }
.div-social li img{ height: 25px; }


/**********************************************************/
/**********************************************************/

.popup-detail{ height: 100%; display: flex; flex-direction: column; justify-content: center; }
.popup--img{ text-align: center; }
.popup--img img{ width: 40px; }
.popup--txt{ font-size: 20px; line-height: 1.4; font-weight: bold; text-align: center; }

.btnok{ background-color: #000; font-size: 30px; line-height: 1; font-weight: bold; color: #fff; display: block; text-align: center; padding: 20px; width: 100%; border: 1px solid #fff; }


/* MODAL STYLES
-------------------------------*/
.jw-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background-color: rgba(0, 0, 0, .75);
  padding: 40px;
  overflow: auto;
}
.jw-modal.open {
  display: block;
}
.jw-modal-body {
  background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 400px; height: 260px;
  display: flex; flex-direction: column; justify-content: space-between;
}
body.jw-modal-open {
  overflow: hidden;
}



.wpcf7-spinner{ position: absolute; top: 50%; margin: 0; margin-top: -12px; }

.wpcf7-response-output{
  display: none !important;
}


.wpcf7-not-valid-tip{
  padding-top:5px; font-size: 14px;
}