@charset "UTF-8";
/*@import url('https://fonts.googleapis.com/css?family=Sukhumvit+Set:700,500,400|Tahoma:400,700');*/
@import url('https://fonts.googleapis.com/css2?family=Krub:wght@200;400;700&display=swap');
/* CSS Document */
html {
  height: 100%;
}
body {
  margin: 0px;
  border: 0px;
  font-family: 'Tahoma', sans-serif;
  color:#fff;
  background-color: #111;
  height: 100%;
  /*
    height: calc(100vh - 100px);
    
    background-image: url(../images/bg-main.png);
    background-position: center top;
    background-size: contain;
	width: 100%;
    background: radial-gradient(ellipse at center, #3B0303 0%,#000000 100%);
    */
}
h1, h2, h3, h4, h5 {
  font-family: 'Krub', 'Tahoma', sans-serif;
}
h1 {
  color: #ff5353;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 2rem;
font-weight: bold;
}
h2 {
  color: #FF0000;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 20px;
}
h3 {
  color: #FFBC00;
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 22px;
}
h4 {
  color: #FFF;
  margin-top: 5px;
  margin-bottom: 5px;
}
h5 {
    color: #DDD;
}
p {
  text-indent: 1rem;
  line-height: normal;
  letter-spacing: normal;
}
a:link, a:visited, a:hover, a:active {
  text-decoration: none;
}
section {
  display: flex;
}


.alert-danger {
  color: bisque;
  background-color: #44090A;
  border-color: #3C0001;
}
.block {
  flex: 1;
}
.block-s {
  flex: 1;
}

.container {
  max-width: 970px;
  margin: auto auto;
  width: 100%;
}

.container-banner {
  max-width:100%;
  width:100%;
}

.fx {
  display: flex;
  flex-wrap: wrap;
}
.taskbar {
  max-width: 500px;
  margin: 10px auto;
}
.taskbar img {
  width: 50px;
}
.taskbar > div {
  margin-top: auto;
}
.m-icon a:link, .m-icon a:visited, .m-icon a:active {
  color: #CFCFCF;
}
.m-icon {
  font-size: 1.5rem;
  color: #CFCFCF;
}

.fav-icon {
    position: absolute;
    color: #000;
    padding: 0px 8px;
    top: 45px;
    right: 15px;
    font-size: 0.5rem;font-weight: 700;
    background-color: #FFC800;
    border-radius: 15px;
}

.game-detail {

}
.product-list {
    margin: 20px 0px;
    border: 3px solid #820002;
    border-radius: 10px;
    background-color: #260000;
    padding: 20px 0px;
}
.profile-icon {
    font-size: 2rem;
    color: #FFBC00;
    border-radius: 50%;
    background-color: #820002;
    width: 70px;
    height: 70px;
    padding-top: 5px;
    margin-bottom: -50px;
}
.profile-box {
    border: 3px solid #820002;
    border-radius: 10px;
    background-color: #212121;
}


.btn-logout {
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: #464646;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    padding-top: 6px;
}

.active-logo{
    width: 200px;
}

.inactive-logo{
    width: 100px;
    padding: 5px;
    margin: 0px 8px;
}

.closed-logo{
    opacity: 0.7;
    filter: grayscale(100%);
}

/* --------------display--------------- */
.d-block ,.d-sm-none  {
  display:none;
}
.d-none ,.d-xl-block  {
  display:block;
}


/*----------------  box ---------------*/
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}
.box-popup {
  background-color: #111111;
  margin: 70px auto;
  padding: 20px;
  border-radius: 10px;
  width: 400px;
  position: relative;
  transition: all 5s ease-in-out;
}
.box-popup .close {
  position: absolute;
  top: 0px;
  right: 10px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #FFBC00;
}
.box-popup .close:hover {
  color: #ff5353;
}
.box-login {
    position: fixed;
    margin-left: auto;
    margin-right: auto;
  border: medium solid #c1ab52;
  border-radius: 10px;
  width: 400px;
  padding: 30px 10px;
  background-color: #111111;
  color: #AAA;
}

.box-popup .logo {
    width: 200px;
}
.btn-close {
    position: absolute;
    right: 20px;
    top: 10px;
    left:auto;
}

/*----------------  modal ---------------*/
.register-comment {
  width: 90%;
  background-color: #44090A;
  border-radius: 8px;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
  font-weight: 100;
}

.box-login {
    width: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: #111111;
    color: #AAA;
}
.modal-login {
  margin: auto;
  border: medium solid #c1ab52;
  border-radius: 10px;
  width: 400px;
  padding: 30px 10px;
  background-color: #111111;
  color: #AAA;
}
.modal-register {
  margin: auto auto;
  border: medium solid #c1ab52;
  border-radius: 10px;
  padding: 50px 10px;
  background-color: #111111;
  color: #AAA;
}
.register-comment {}
.modal-input {
  position: relative;
  margin: 10px 0px;
}
.modal-btn-ok {
  font-family: 'Krub', 'Tahoma', sans-serif;
  border-radius: 8px;
  color: #FFF;
  width: 100%;
  padding: 15px;
  margin: 10px 0px;
  background-image: linear-gradient(180deg, rgba(230, 0, 0, 1.00) 0%, rgba(255, 61, 61, 61.00) 100%);
  background: linear-gradient(0deg, #E30000, #FF4343);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$from, endColorstr=$to, GradientType=1);
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  border-style: none;
  cursor: pointer;
}
.modal-header {
  flex-wrap: wrap;
  flex-grow: 1;
  padding: 10px 20px;
  text-align: center;
}
.modal-body {
  position: relative;
  margin: 10px 50px;
}
.modal-body a:link {
  color: #CCC;
  text-decoration: underline;
}
.modal-body a:active {
  color: #CCC;
}
.modal-body a:visited {
  color: #CCC;
}
.modal-content {
  background-color:#000000;
}
/*********** form ***************/
.input-icon {
  position: absolute;
  width: 30px;
  top: 18px;
  left: 15px;
  text-align: center;
  color: #E30000;
}
.form-control {
  color: #AAA;
  background-color: #222;
  border-radius: 5px;
  width: 100%;
  font-size: 1rem;
  border: none;
  text-align: center;
  padding: 0.8rem 0px;
}
.form-group {
  display: flex;
  position: relative;
  margin-bottom: 1rem;
}
.form-select {
  -webkit-appearance: none;
  height: 55px;
  padding-left: 50px;
}
/*---------------- header ---------------*/
nav {
  display: flex;
  /* border: thin dashed #D200FF; */
}
nav .navicon {
  color: #FFBC00;
  font-size: 35.0px;
  line-height: 40.0px;
  padding-top: 5px;
  padding-right: 5px;
  padding-left: 5px;
  padding-bottom: 0px;
}
header {
  display: flex;
  margin-top: 0px;
  margin-bottom: -50px;
  padding: 5px 5px;
}
header .logo img {
  width: 350px;
}
.box-header {
  justify-content: space-between;
  font-family: 'Krub', 'Tahoma', sans-serif;
  align-items: center;
  padding: 10px 5px;
}
.logo {
  top: -15;
}
.logo-page {
  display: flex;
  margin: 10px auto;
  width: 300px;
}
.logo-page img {
  width: 100%;
}
.header-btn {
  display: flex;
  font-family: 'Krub', 'Tahoma', sans-serif;
  font-size: 16px;
  line-height: 14px;
  font-weight: 700;
  color: #222;
  border-style: none;
  border-radius: 8px;
  padding: 10px 15px;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 1.00) 0%, rgba(255, 155, 0, 1.00) 100%);
  background: linear-gradient(0deg, #efbb2a, #f6e7a2);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$from, endColorstr=$to, GradientType=1);
  cursor: pointer;
}
.header-btn a:link, .header-btn a:active, .header-btn a:visited {
    color: #222;
}
.header-mainbox {
  font-family: 'Krub', 'Tahoma', sans-serif;
  display: flex;
  flex: 3;
  justify-content: flex-end;
}
/*---------------- splash ---------------*/
.splash-img {

  margin: 10px auto;
}
.box-hilight {
  display: flex;
  justify-content: center;
  color: #DDDDDD;
  font-family: 'Krub', 'Tahoma', sans-serif;
}
.hilight-btn ,.step-btn {
  display: flex;
  font-family: 'Krub', 'Tahoma', sans-serif;
  font-size: 20px;
  line-height: 20px;
  font-weight: 700;
  color: #FFD7D8;
  border-radius: 15px;
  padding: 15px 20px;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(180deg, rgba(230, 0, 0, 1.00) 0%, rgba(255, 61, 61, 61.00) 100%);
  background: linear-gradient(0deg, #E30000, #FF4343);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$from, endColorstr=$to, GradientType=1);
  border-style: none;
  cursor: pointer;
}
.not-active {
  filter: grayscale(100%);
}

.slogan-img {
  width: 150px;
}
/*---------------- contents ---------------*/
.contents {
  display: flex;
  width: 100%;
  align-items: center;
}
.box-dark {
  width: 100%;
  padding: 20px 0px;
  background: rgb(51,51,51);
  background: -moz-radial-gradient(top center, ellipse cover,  rgba(51,51,51,1) 0%, rgba(9,9,9,1) 100%);
  background: -webkit-radial-gradient(top center, ellipse cover,  rgba(51,51,51,1) 0%,rgba(9,9,9,1) 100%);
  background: radial-gradient(ellipse at top center,  rgba(51,51,51,1) 0%,rgba(9,9,9,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#090909',GradientType=1 );
}
.box-red {
  width: 100%;
  background-image: url("../images/splash-bg.png"); /*background-color: #222;*/
  background-position: center top;
  background-size: cover;
  border-bottom: thick solid #960001;
}
.box-black {
  background-color: #000;
  width: 100%;
  padding: 20px 0px;
}

.box-banner {
  width:100%;
  border-bottom: thick solid rgba(255, 155, 0, 1.00);
}

/*---------------- download ---------------*/
.box-download {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  background: rgb(51,51,51);
  background: -moz-linear-gradient(top,  rgba(51,51,51,1) 0%, rgba(9,9,9,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(9,9,9,1) 100%);
  background: linear-gradient(to bottom,  rgba(51,51,51,1) 0%,rgba(9,9,9,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#090909',GradientType=0 );
  border-bottom: thick solid #B30002;
}
/*---------------- game ---------------*/
.box-game {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-around;
}
.each-game {
  display: flex;
  flex-basis: 200px;
  flex-direction: column;
}
.each-game img {
  width: 100%;
}
/*---------------- footer ---------------*/
footer {
  background-color: #3c0001;
  padding: 30px 10px;
  color: #DDD;
  font-size: 12px;
  justify-content: center;
  border-top: thick solid #960001;
  background-image: -webkit-linear-gradient(270deg, rgba(68, 0, 1, 1.00) 0%, rgba(0, 0, 0, 1.00) 100%);
  background-image: -moz-linear-gradient(270deg, rgba(68, 0, 1, 1.00) 0%, rgba(0, 0, 0, 1.00) 100%);
  background-image: -o-linear-gradient(270deg, rgba(68, 0, 1, 1.00) 0%, rgba(0, 0, 0, 1.00) 100%);
  background-image: linear-gradient(180deg, rgba(68, 0, 1, 1.00) 0%, rgba(0, 0, 0, 1.00) 100%);
}
#box-ae {
    max-width: 150px;
    margin-bottom: -100px;
    margin-right: 5px;
    animation-name: slideout;
     animation-duration: 10s; /* or: Xms */
     animation-iteration-count: 1;
}
#box-ae img{
    width: 100%;
}
@keyframes slideout {
    0%   { 
        margin-bottom: 80px;
    }
    90%   { 
        margin-bottom: 75px;
    }
    91%   { 
        margin-bottom: 80px;
    }
    100% { 
        margin-bottom: -100px;
    }
}
/*----------------  products ---------------------*/
/*----------------  padding ---------------------*/
.pd-5 {
  padding: 5px;
}
.pdt-5 {
  padding-top: 5px;
}
.pdb-5 {
  padding-bottom: 5px;
}
.pdl-5 {
  padding-left: 5px;
}
.pdr-5 {
  padding-right: 5px;
}
.pd-10 {
  padding: 10px;
}
.pdt-10 {
  padding-top: 10px;
}
.pdb-10 {
  padding-bottom: 10px;
}
.pdl-10 {
  padding-left: 10px;
}
.pdr-10 {
  padding-right: 10px;
}
.mr-5 {
  margin-right: 5px;
}
.ml-5 {
  margin-left: 5px;
}
.w-100 {
  width: 100%;
}
/******************  **********************/
.txt-white {
  color: #DDDDDD;
}
.fx-440 {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  padding: 10px 20px;
  flex-basis: 440px;
  max-width: 800px;
  align-content: center;
  overflow: hidden;
}
.fx-280 {
  flex-wrap: wrap;
  flex-grow: 1;
  padding: 10px 20px;
  flex-basis: 280px;
  text-align: center;
}
.fx-280 > p {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}
.div80 {
  height: 80px;
}
.jp-vdo {
  width: 100%;
  max-width: 550px;
}
.img-100 {
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.addline-btn , .spin_btn {
  position: fixed;
  right:5%;
  bottom:5%;
  max-width: 200px;
}

.spin_btn {
  left:5%;
  bottom:4%;
}

.btn-receive {
  background-color:#28a745;
  border-color:#28a745;
  color:#fff;
  border-radius:5px;
  padding:10px 15px;
}

/**************  Media Query *******************/
@media screen and (max-width:1200px) {
  header .logo img {
    width: 350px;
  }
  .d-none .d-xl-block {
    display:block;
  }
  .d-block .d-sm-none {
    display:none;
  }
}
@media screen and (max-width:768px) {
  .each-game {
    flex-basis: 170px;
  }
  header {
    margin-bottom: 0px;
  }
  header .logo img {
    width: 250px;
  }
  .logo-page {
    width: 200px;
  }
  .rev-wrap {
    flex-wrap: wrap-reverse;
  }
  .jp-vdo {
    width: 90%;
    max-width: 550px;
  }
  .addline-btn {
    max-width: 200px;
    right:0;
    bottom:2%;
  }
  .spin_btn {
    max-width:200px;
    left:2%;
    bottom:2%;
  }
  /*---------------- splash ---------------*/
  .splash-img {
     
  }
  .hilight-detail {
    background-color: #000000a8;
    padding-bottom: 20px;
  }
  .taskbar img {
    width: 40px;
  }
  .m-icon {
    font-size: 1.5rem;
  }
  /*************************/
    .box-popup {
        padding: 10px 0px;
        width: 100%;
        margin: auto;
        position: fixed;
        background-color: #111111;
        color: #AAA;
        height: 100%;
        border-style: none;
        transition: all 1s ease-in-out;
    }
  /*************************/
  .modal-login {
    border: none;
    width: 100%;
    padding: 0px;
  }
  .modal-register {
    margin-bottom: 80px;
    padding-bottom: 30px;
    padding-top: 0px;
    border: none;
  }
  .modal-body {
    margin: 10px 20px;
  }
  .modal-input {
    position: relative;
    margin: 20px 0px;
  }
  .modal-btn-ok {
    position: fixed;
    border-radius: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0px 0px;
    z-index: 999;
  }
  .modal-comment {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0px 0px;
    padding-bottom: 60px;
    background-color: rgb(0 0 0 / 65%);
  }
  /************/
}
@media screen and (max-width:650px) {
  header .logo img {
    width: 200px;
  }
  .d-sm-none  {
    display:block;
  }
  .d-xl-block {
    display:none;
  }
  .addline-btn {
    max-width: 100px;
    right:0;
    bottom:2%;
  }
  .spin_btn {
    max-width:100px;
    left:2%;
    bottom:2%;
  }
}
@media screen and (max-width:320px) {
  .each-game {
    flex-basis: 220px;
  }
  header .logo img {
    width: 200px;
  }
  .addline-btn {
    max-width: 80px;
    right:0;
    bottom:2%;
  }
  .spin_btn {
    max-width:80px;
    left:2%;
    bottom:2%;
  }
}
.fx-center {
  display: flex;
  justify-content: center;
}
.txt-center {
  text-align: center;
}
.txt-right {
  text-align: right;
}
.btn-tag {
  background-color: #960001;
  color: #D7D7D7;
  font-size: 0.8rem;
  border-radius: 5px;
  padding: 5px 10px;
  line-height: 2.5;
  border-style: none;
}
.header-bar {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  opacity: 1;
  transition: -webkit-transform .5s ease-out;
  transition: transform .5s ease-out;
  transition: transform .5s ease-out, -webkit-transform .5s ease-out;
}
.header-bar-out {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
.detail-btn ,.download-btn {
  font-family: 'Krub', 'Tahoma', sans-serif;
  display: flex;
  color: #FFF;
  font-size: 16px;
  line-height: 14px;
  padding: 8px 10px;
  justify-content: center;
  width: 120px;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(180deg, rgba(230, 0, 0, 1.00) 0%, rgba(255, 61, 61, 61.00) 100%);
  background: linear-gradient(0deg, #E30000, #FF4343);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$from, endColorstr=$to, GradientType=1);
  border-radius: 5px;
  border-style: none;
  cursor: pointer;
}
.download-btn ,.step-btn {
  background: rgb(53,145,232);
  background: -moz-linear-gradient(top,  rgba(53,145,232,1) 0%, rgba(0,86,226,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(53,145,232,1) 0%,rgba(0,86,226,1) 100%);
  background: linear-gradient(to bottom,  rgba(53,145,232,1) 0%,rgba(0,86,226,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3591e8', endColorstr='#0056e2',GradientType=0 );

}



article {}