@charset "utf-8";body{font-family:Arial, Helvetica, sans-serif;font-size:13px;color:#333;line-height:18px;overflow-x:hidden;font-weight:300;}
a{color:#444;text-decoration:none}
a:hover{color:#333}
a:focus{outline:0}
a:hover,a:active{outline:0}
*{margin:0;padding:0;}
h1,h2,h3{line-height:35px;}
img{border:0 none;}
dl{margin:0px;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset, img{border:0;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ul ,li{list-style:none;}
caption, th{text-align:left;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
h1{font-size:2em;font-weight:400;}
h2{font-size:1.250em;font-weight:400;}
h3{font-size:1em;font-weight:400;}
h4{font-size:0.875em;}
h5{font-size:0.813em;}
h6{font-size:0.688em;}
small, .small{font-size:0.750em;}
strong{font-weight:bold;}
img{border:0 none;max-width:100%;height:auto;-ms-interpolation-mode:bicubic;vertical-align:middle;}
img.alignright{float:right;margin:5px 0 20px 20px;}
img.alignnone{margin:5px 20px 20px 0;}
img.alignleft{float:left;margin:5px 30px 20px 0;}
img.aligncenter{display:block;margin-left:auto;margin-right:auto;}
figure.alignright img{float:right;margin:5px 0 20px 20px;}
figure.alignnone img{margin:5px 20px 20px 0;}
figure.alignleft img{float:left;margin:5px 30px 20px 0;}
figure.aligncenter img{display:block;margin-left:auto;margin-right:auto;}
hr{border:0;border-top:2px solid #f2d696;clear:both;height:0;margin:1.250em 0;}
hr.clear{border:none;}
dl{margin:0px;}
table{max-width:100%;background-color:transparent;border-spacing:0}
table thead{background:#ddd}
table thead th{border-color:#ddd!important}
table{width:100%;margin-bottom:18px}
table td,table th{padding:13px;line-height:18px;text-align:left;vertical-align:top;border-top:1px solid #ddd}
table th{font-weight:700}
table thead th{vertical-align:bottom}
table thead:first-child tr:first-child td,table thead:first-child tr:first-child th{border-top:0}
table tbody+tbody{border-top:2px solid #ddd}
table{border:1px solid #ddd;border-collapse:separate;*border-collapse:collapsed;border-left:0}
table td,table th{border-left:1px solid #ddd}
table tbody:first-child tr:first-child td,table tbody:first-child tr:first-child th,table thead:first-child tr:first-child th{border-top:0}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
*:before,
*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body{padding-top:0px;} 
.tt_main{width:100%;max-width:1140px;margin:0px auto;position:relative;}
.tt_main_f{width:100%;max-width:1140px;margin:0px auto;position:relative;}
.tt_l{float:left;}
.tt_r{float:right;}
.tt_full{width:100%;}

.hgamex{position: relative;}
.tt_hgamex_fx { z-index: 9999999999!important;text-align: center;}
.logo_hx {display: inline-block;padding: 5px 0px 10px 0px;}  
.logo_hx img {max-width: 330px;width:100%;}
.tt_redit_r {background-color: #222;padding: 10px 20px 10px 20px;color: #fff;margin-top: 10px;margin-right: 2%;border-radius: 10px;border: 1px solid #333;}
p.credit-text{font-family: "Kanit", sans-serif; font-weight: 500;font-style: normal;line-height: 16px;font-size:13px;margin-bottom: 5px;}
p.credit-numb {color: #f5d72f;font-weight: bold;font-size:18px; }
.tt_logo_fx {width:25%;font-family: "Kanit", sans-serif; font-style: normal;line-height: 16px;font-size:13px;margin: 10px 0px 10px 0px;padding: 5px 10px 5px 10px;}
.tt_logo_fx img {max-width: 250px;width:100%;}
.tt_logo_fx span {float:left;width:100%;margin: 10px 0px 0px 0px;color: #eee;}
.tt_f_text {width:45%;font-family: "Kanit", sans-serif; font-style: normal;line-height: 18px;font-size:14px;margin: 10px 0px 10px 0px;padding: 0px 10px 0px 10px;color: #999;}
.tt_footer-menux {float:right;width:28%;text-align: right;margin-top: 10px;}
.tt_footer-menux .tt_footer-menux-item {display: inline-block;}
.tt_footer-menux .tt_footer-menux-item a {display: inline-block;color: #fff;padding: 10px 10px 0px 10px;font-family: "Kanit", sans-serif; font-weight: 500;font-style: normal;line-height: 16px;font-size:13px;}
.h_titlex {font-size: 28px; line-height: 32px;    font-family: "Kanit", sans-serif; font-weight: 400;font-style: normal;text-align: center;color:#fff;margin: 15px 0px 0px 0px;
background: linear-gradient(to bottom,  rgb(255,255,255) 0%,rgb(243,243,243) 50%,rgb(237,237,237) 51%,rgb(255,255,255) 100%);

text-shadow: 2px 2px 10px rgba(0,0,0,.2);
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent;


}
.arhx { 
  margin: 10px 0px 10px 0px;
  height: 2px;
background: linear-gradient(90deg,rgba(156,103,39,0),rgba(253, 253, 253, 0.5) 32%,#fff 49%,rgba(235, 235, 235, 0.5) 65%,rgba(253,246,174,0));
}


body {background-color: #000;}
.tt_hgamex_fx{background-color: #000;border-bottom: 5px solid #f08f20;}
.tt_fgamex{border-top: 5px solid #f08f20;background: linear-gradient(0deg, rgba(3,3,3,1) 0%, rgba(60,60,60,1) 100%);}
.tt_ctgamex {background-color: #111;border: 1px solid #222;}
.tt_footer-menux .tt_footer-menux-item a:hover {color: #ccb440;}


.tt_ctgamex {min-height: 450px;}



.tabs {
  width:100%;

}
ul#tabs-nav {
  list-style: none;
  margin: 0;
  padding: 5px;
  overflow: auto;
}
ul#tabs-nav li {
  float: left;
  font-size: 16px; 
  line-height: 22px;  
  font-family: "Kanit", sans-serif; 
  font-weight: 400;
  text-align: center;
  width:19%;
  padding: 8px 10px 8px 10px;
  border-radius: 5px 5px 5px 5px;
  margin: 0% 0.5% 0% 0.5%;
  cursor: pointer;
  color: #000;
   background-color: #fff;
}
ul#tabs-nav li:hover,
ul#tabs-nav li.active {
  background: #f08f1e;
}
#tabs-nav li a {
  text-decoration: none;
  color: #000;
}
.tab-content {
  padding: 10px;
  display: none;
  border: 0;
  width: 100%;
  float: left;
  margin: 0px 0px 15px 0px;
 
}
.tab-content:first {display: block;}
.tt_main_search {width:100%;max-width:450px;margin:0px auto;position:relative;padding: 0px 13px 0px 13px;}
#tt_search_game {
	float:right;
	border-radius: 10px;
  background-image: url('../images/searchicon.png'); 
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  width: 100%; 
  box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.2);
  font-size: 16px; line-height: 20px; 
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  padding: 10px 20px 10px 60px; 
 border: 1px solid #ccc;
  margin-bottom: 12px; 
}
.tt_game_title {float: left;width: 100%;font-size: 16px; white-space :nowrap; overflow: hidden;text-overflow: ellipsis;line-height: 20px;  margin-top: 5px;  font-family: "Kanit", sans-serif; font-weight: 400;text-align: center;color:#fff;}
.game-item {float: left;width: 20%;position: relative;padding: 10px 10px 10px 10px;}
.game-item img {float: left;width: 100%;} 
.tt_icon_playx {opacity:0;float: left;width: 100%;position:absolute;z-index: 100;top: 47%;text-align: center;-webkit-transition: all .5s ease-in-out 0s;  -o-transition: all .5s ease-in-out 0s; -moz-transition: all .5s ease-in-out 0s; transition: all .5s ease-in-out 0s;}
.tt_icon_playx span {display: inline-block;padding: 5px 10px 5px 10px;font-size: 14px; line-height: 16px;    font-family: "Kanit", sans-serif; font-weight: 400;color:#000;background: linear-gradient(0deg, rgba(243,199,0,1) 0%, rgba(255,232,126,1) 100%);border: 1px solid #000;border-radius: 5px;}
.game-item:hover .tt_icon_playx {opacity:1;}
.game-item:hover .icon_hotx::before,
.game-item:hover .game-img  {
  -webkit-animation-name: hvr-pulse-shrink;
    animation-name: hvr-pulse-shrink;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}
/* Pulse Shrink */
@-webkit-keyframes hvr-pulse-shrink {
  to {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes hvr-pulse-shrink {
  to {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
.icon_hotx::before {
  display: block;
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  top: 10px;
  right: 10px;
  z-index: 1000;
  background-image: url(../images/hot-icon.png);
  background-repeat: no-repeat;
  background-size: cover;
}






@media screen and (max-width: 980px) {
 
 .logo_hx {width:68%;}
 .tt_redit_r {padding: 5px 10px 5px 10px;}
 p.credit-text {font-size: 13px;margin-bottom: 2px;}
 p.credit-numb {font-size: 16px;}
 .tt_logo_fx a,
 .tt_logo_fx {width: 100%;text-align: center;}
 .tt_f_text {width: 100%;}
 .tt_main_f{max-width:600px}
 .tt_logo_fx {margin: 20px 0px 10px 0px;}
 .tt_logo_fx img {max-width: 300px;}
 .tt_footer-menux {width: 100%;text-align: center;margin: 0px 0px 20px 0px;}
}

@media screen and (max-width: 620px) {
 ul#tabs-nav li {width:23%;margin: 1% 1% 1% 1%;}
 ul#tabs-nav li:first-child {width:99%;}
 ul#tabs-nav {padding: 0px 10px 8px 10px;}
 .game-item {width: 33.33%;padding: 5px;}
 .icon_hotx::before { width: 30px; height: 30px;}
 .tt_icon_playx {top: 40%;}
 .tt_icon_playx span {font-size: 10px;padding: 2px 10px 2px 10px; }
 .tt_game_title {font-size: 13px;}
 .h_titlex {font-size: 22px;line-height: 28px;}
}




.game-item {min-height: 200px;}
@media screen and (max-width: 620px) {.game-item {min-height: 170px;}}  
@media screen and (max-width: 520px) {.game-item {min-height: 150px;}}
@media screen and (max-width: 460px) {.game-item {min-height: 140px;}} 
@media screen and (max-width: 390px) {.game-item {min-height: 120px;}}