button {margin: 0;padding: 0;border: none;outline: none;background-color: transparent;}
    /* -------------------  game_tag  ---------------------------------------- */
.game_tag{z-index: 1;transform: translateY(-.5rem);}
.game_tag *{transition: all .5s;}
.game_tag img{filter: brightness(1.2)grayscale(0);object-fit: cover;max-height:none;position: absolute;top: -1rem;  left: 0;}
.game_tag>div{    box-shadow: #000 0px -10px 10px;}
.game_tag button{  position: relative;overflow: hidden;height: 10rem;}
.game_tag button::after{transition: all .5s;content: '';z-index: 2;position: absolute;width: 100%;height: 100%;background: linear-gradient(-45deg,#00000000 30%,#000);top: 0;left: 0;opacity: 0;}
.game_tag button::before{content: '';z-index: 1;position: absolute;width: 100%;height: 100%;top: 0;left: 0;/*mix-blend-mode: color;*/
background: linear-gradient(-45deg,#00000000 50%,#000),linear-gradient(-45deg,hsla(var(--main-color-hsl),.1) 10%,hsla(var(--main-color-hsl),0) 100%);}
.game_tag .title{  position: absolute;  left: 1rem;  top: 1rem;  color: #fff; z-index: 3;
  text-shadow: 0 0 2px var(--main-color),0 0 5px #000,0 0 10px #000,0 0 10px #000;   font-weight: bold;    transform-origin: left top;}
.game_tag button:hover img,.game_tag button.active img{transform: scale(1.1);}
.game_tag button:hover .title,.game_tag button.active .title{transform: scale(1.5); text-shadow: 0 0 2px var(--main-color),0 0 5px #fff,0 0 20px var(--main-color);}
.game_tag button:hover::after,.game_tag button.active::after{opacity: 1;}
@media screen and (max-width: 768px) {
.game_tag{z-index: 1;transform: translateY(-1rem);}
.game_tag>div{    box-shadow: none;}}
/* -------------------  game_tag  END---------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@700;900&display=swap');
.coin>button>div,.coin>div{width:64px;height:64px;position: relative;
  --line-color:#fff8d9;transform-style:preserve-3d;
  --line:linear-gradient(-45deg, transparent 22px, var(--line-color) 22px 24px, transparent 24px 30px, var(--line-color) 30px 37px, transparent 37px 39px, var(--line-color) 39px 41px, transparent 41px 50px,var(--line-color) 50px 60px,transparent 60px );
  color: #FDD835;transition: all .5s;
}
  .coin>button{margin: 0 .5rem;}
.coin{text-align: center;}
.S_filter .coin>button h5,.S_filter .coin>button>div::before,.coin>button>div::after,.coin>div::after{
  position: absolute;top: 0;left: 0;height: 100%;width: 100%;}
.S_filter .coin>button h5{font-weight: 800;    line-height: 64px;    z-index: 1;
    font-family: 'Source Sans Pro', sans-serif;
    text-shadow: 1px 2.5px 0 #E88102,1px 0 0 #E88102;    backface-visibility: hidden;    top: 0;}
.S_filter .coin>button img{ transition: all .5s;z-index: -1;      transform: rotateY(180deg);    }
    .S_filter .coin>button>div::before{    content: '';filter: drop-shadow(2px 3px 1px #E88102 );
    background: url(../img/SVG/dollar_bg.svg);backface-visibility: hidden;z-index: 1;}
.coin>button>div::after,.coin>div::after{content: '';z-index: 3;
--mask: radial-gradient(transparent, transparent calc(100% - 20px), #000 calc(100% - 20px));    
-webkit-mask:var(--mask);    mask: var(--mask);    border-radius: 100%;border: solid 2px #FEEC9A;    background:var(--line),radial-gradient(#E88102 calc(100% - 16.5px),#FDD835 calc(100% - 16.5px))/**/;}
.S_filter .coin>button:hover>div,.S_filter .coin>button>div.active{transform: rotate3d(0,1,0,180deg);}

.works_service .item{width: 25%;position: relative;max-height: 10rem;}
.works_service .logo{padding:2.5rem 2rem;height: 100%;display: flex;align-items: center;justify-content: center;}
.works_service .logo img{width:100% ;height: 100%;}
.works_service .device{display: flex;align-items: end;justify-content: space-around;z-index: 1;  width: 100%;height: 100%;position: absolute;bottom:0;left: 0;}
.works_service .item::after{content: '';transition: all .5s;position: absolute;bottom:0;left: 0;width: 100%;height:0;background: linear-gradient(#ff00ff00 30%,var(--secondary-color) 70%);}
.works_service .device img{width:1.5rem;height:1.5rem;transition: all .5s;}
.works_service .item:hover::after{backdrop-filter:blur(3px);height: 100%;}
.works_service .item:hover .device img{transform: translateY(-200%);}
@media screen and (max-width: 768px) {
  .works_service .item{width: 50%;}
  .works_service .logo{padding: 2.5rem 1rem;}
  .works_service .device img{width:1.2rem;height:1.2rem;}
}

#overlay{position: fixed;top:0;left: 0;padding: 5%;display: none;  z-index: 100;width: 100%;height: 100%;overflow: auto;}
#overlay>div:not(.Close){background: #fff;border-radius: 10px;padding: 5rem 0;position: relative;}
#overlay.open{display:block;}
#overlay .Close{position: fixed;padding: inherit;top:0;left: 0;background: #000000da;width: 100%;height: 100%;}
#overlay .Close>div{width: 25px;margin: 1rem;height: 25px;position: relative;z-index: 2;float: right;}
#overlay .Close>div::after,#overlay .Close>div::before{
  content: '';position: absolute;width: 100%;height: 2px;top: 50%;left: 0;background: #c3c3c3;transform-origin: 50% 50%;}
#overlay .Close>div::after{transform: rotate(-45deg);}
#overlay .Close>div::before{transform: rotate(45deg);}

/*===================================================================*/
.suppliers_title .title,.bole_icon h6,.certification a {  color:var(--main-color);}
.suppliers_title{flex-wrap: nowrap;}
.suppliers_title .title {  /*padding: 7% 0 23%;*/margin-top:10%;padding-right: 3rem;flex: 1 0 calc(100% / 4);}
.suppliers_title .title img {  height: 100px;/*max-width: 25%;max-height: 5rem;padding-bottom: 1rem;*/ object-fit: contain;}
.suppliers_title .area {border-radius: 2px;background: #a70000cc;padding: 1rem;color: white;/* width: 60%; */}

.info .secnde_title{margin-top: 1rem ;}

.suppliers_title .web_view{right: 0;z-index: 0;width: 100%;flex: 0 1 80%;}
.suppliers_title .web_view iframe,.suppliers_title .web_view video{width: 100%;/*height: 100%;*/height: 30rem;}


#overlay .coin>div{filter: drop-shadow(2px 3px 1px #E88102 );}
.lange_text .secnde_title::after{content: '';width: 10px;height: 10px;display: inline-block;
  --border:3px solid var(--main-color);  border-top:var(--border);border-right:var(--border);
transform: rotate(45deg);border-radius: 1px;transition: all .5s ;}
.lange_text.open .secnde_title::after{transform: rotate(135deg)translate(-5px);}
.lange_text ul{display: flex;flex-wrap: wrap;overflow: hidden;height: auto;max-height: 0;transition: all .5s;}
.lange_text.open ul{max-height: 100rem;}
.lange_text li{list-style: inside;width: 20%;}
@media (max-width: 1270px) {}
@media screen and (max-width: 768px) {
  #overlay{padding:5rem 5%;}  #overlay>div:not(.Close){padding: 2rem 0;}
  .suppliers_title {flex-wrap: wrap;}.suppliers_title .title{flex-basis: 100%;padding-right: 0;text-align: center;}
  .suppliers_title .web_view{flex-basis: 100%;margin-top: 1rem;}
  .suppliers_title .web_view iframe, .suppliers_title .web_view video{    height: 100%;}
  #overlay .currency .d-flex{flex-wrap: wrap;}
  .lange_text li{width: 50%;}
}
/* ====================================================================================================== */
.game_product {width: 100%;color: white;padding: 4rem 0;background-size: cover;overflow: hidden;
/* ==================== */
    background: linear-gradient(180deg, #00000077 0%, #000000ff 100%) 0% 0% no-repeat, url(../img/work_gps_bg.jpg) right/cover no-repeat fixed;
  }
  .game_product::before {
    content: "";height: 600px;width: 5px;position: absolute;background: white;top: 0;left: 50%;
    --transform:skewX(20deg);transform-origin: center;
    transform:var(--transform) ;-webkit-transform: var(--transform) ;-moz-transform: var(--transform) ;-o-transform: var(--transform) ;
  }
  .game_product h5 {padding: 0 .7rem;margin:0 0 3rem 2rem;position: relative;width: fit-content;z-index: 2;font-weight: 900;    text-shadow: 2px 1px 0 #ee8800;
}
  .game_product h5::after {content: "";z-index: -1;width:calc(100% + 2rem);height: 3px;position: absolute;bottom: 4px;left: 0;background: #e80;
  }
  
  .game_product ul {display: flex;flex-wrap: wrap;justify-content: center;align-items: center;/*padding: 0 2rem;*/
  }
  .game_product li {   width: calc(100% / 3); }
  .game_product img,
  .game_product i {display: block;width: 40px;height: 40px;font-size: 64px;margin: 0 auto;}
  .game_product li div {text-align: center;  }
  .game_product p {font-size: 12px;text-align: center;}
  /* .game_product .col-md-6.col-sm-12:nth-child(odd) {    padding-right: 5rem;  } */
@media screen and (max-width: 768px) {
  .game_product::before {display: none;}
  }
  /* ===================================================== */
.backtoindex {margin: 0 auto;width: 100%;  }
  .backtoindex a {
    width: 30%;height: 20%;border: 1px solid #e80;text-align: center;margin: 2% 1%;padding: 1%;
    color: #e80;position: relative;letter-spacing: 1.8px;text-transform: uppercase;-webkit-transition: 0.4s ease all;-ms-transition: 0.4s ease all;-moz-transition: 0.4s ease all;transition: 0.4s ease all;
  }
  .backtoindex a:hover {color: #161514;border: 1px solid rgba(238, 136, 0, 0);  }
  .backtoindex a::after,
  .backtoindex a::before {
    content: "";position: absolute;width: 100%;height: 100%;top: 0;left: 0;
    transform: scaleX(0);-webkit-transition: 0.4s ease all;-ms-transition: 0.4s ease all;-moz-transition: 0.4s ease all;transition: 0.4s ease all;
  }
  .backtoindex a::after {border-top: 1px solid #e80;transform-origin: right;  }
  .backtoindex a::before {border-bottom: 1px solid #e80;transform-origin: left;  }
  .backtoindex a:hover::after,
  .backtoindex a:hover::before {    transform: scaleX(1);  }
  /* =============================== */


  /* -------------------  oldPage CSS  ---------------------------------------- */
  .bf_content h6{font-size: 40px;    position: relative;}
  .gradient_line span{display:inline-block;/* --background:80deg,#e80,#eb0; */width:150px;height:4px;margin:0 0 20px;border-radius:5px;background:linear-gradient(80deg,#e6602c,#e80);background:-webkit-linear-gradient(80deg,#e80,#eb0);background:-moz-linear-gradient(80deg,#e80,#eb0);background:-o-linear-gradient(80deg,#e80,#eb0)}
.gradient_line span:nth-child(2){width:20px;margin-left:5px}
.gradient_line span:nth-child(3){width:10px;margin-left:5px}
  .bf_img:after,.bf_img_effect:after{content:"";display:block;clear:both}
 .submain_vision_info,.works_gametype_info{width:100%;margin:5% auto 9%}
.submain_vision_info{margin-bottom:0}
.bf_content {    position: relative;}
.bf_img_effect{margin:-2.5% 0 0;padding:0 2.5%;position:relative;box-sizing:border-box;-webkit-box-sizing:border-box}
.bf_img{width:850px;float:right;max-width: 100%;}
.bf_img img{display:block;width:100%;height:auto}
:root{--bf_effect_bg:features_bgshow 5s forwards;--bf_effect_main:features_show 5s forwards;}
.bf_effect_main{position:absolute;top:0;right:2.5%}
.bf_effect_bg.activebgshow{animation:var(--bf_effect_bg);-webkit-animation:var(--bf_effect_bg);-moz-animation:var(--bf_effect_bg);-o-animation:var(--bf_effect_bg);-ms-animation:var(--bf_effect_bg)}
.bf_effect_main.activeshow{animation:var(--bf_effect_main);-webkit-animation:var(--bf_effect_main);-moz-animation:var(--bf_effect_main);-o-animation:var(--bf_effect_main);-ms-animation:var(--bf_effect_main)}
@keyframes features_bgshow{0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-10px,0,-1px)}40%{transform:translate3d(10px,0,-1px)}60%{transform:translate3d(10px,0,0)}100%{transform:translate3d(0,0,0)}}
@-webkit-keyframes features_bgshow{0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-10px,0,-1px)}40%{transform:translate3d(10px,0,-1px)}60%{transform:translate3d(10px,0,0)}100%{transform:translate3d(0,0,0)}}
@keyframes features_show{0%{transform:translate3d(0,0,0)}20%{transform:translate3d(10px,-10px,2px)}40%{transform:translate3d(0,-20px,0)}60%{transform:translate3d(-10px,-10px,0)}100%{transform:translate3d(0,0,0)}}
@-webkit-keyframes features_show{0%{transform:translate3d(0,0,0)}20%{transform:translate3d(10px,-10px,2px)}40%{transform:translate3d(0,-20px,0)}60%{transform:translate3d(-10px,-10px,0)}100%{transform:translate3d(0,0,0)}}
/* @media screen and (max-width: 768px) {} */
/* -------------------  oldPage CSS  END---------------------------------------- */