@charset "UTF-8";
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
}

i {
  font-style: normal;
}


/*字体包CDN分离路径*/
@font-face{font-family:'PROJECTDTYPECURVE';src:url("../fonts/PROJECTDTYPECURVE-BOLD.TTF");}
@font-face{font-family:'ProjectDType';src:url("../fonts/ProjectDType-Medium.ttf");}

@font-face{font-family:'NotoSans-Medium';src:url("../fonts/NotoSans-Medium.ttf");}
@font-face{font-family:'NotoSans-Bold';src:url("../fonts/NotoSans-Bold.ttf");}

body {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a:focus, input:focus, p:focus, div:focus {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body,
html {
  width: 100%;
  background: #0a0f12;
  -webkit-overflow-scrolling: touch;
  font-family: 'NotoSans-Medium';
}
.bold{
  font-family: "NotoSans-Bold";
}
.lang-en{
  font-family: "ProjectDType";
}
.lang-en .bold{
  font-family: "PROJECTDTYPECURVE";
}
.lang-ar, .lang-ar input, .lang-ar select {
  direction: rtl;
}

.lang-ar, .lang-ar input, .lang-ar select {
  direction: rtl;
}



.wrapper{
  width: 100%;
  overflow: hidden;
  position: relative;
}
.part1{
  width: 100%;
  height: 18.97rem;
  overflow: hidden;
  background: url(../images/m/bg.jpg) top center no-repeat;
  background-size: 100%;
  margin: 0 auto;
  position: relative;
}
.logo{
  display: block;
  width: 1.21rem;
  height: .72rem;
  background: url(../images/m/logo.png) bottom center no-repeat;
  background-size: 100%;
  position: absolute;
  top: .16rem;
  left: .19rem;
}


.language-box{
  width: 3rem;
  height: .6rem;
  background: url(../images/language_bg.png) top center no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: .1rem;
  right: 0;
  z-index: 19;
}
.language-box .select-language{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: .6rem;
}
.language-box .select-language i{
  display: block;
  width: .44rem;
  height: .44rem;
  background: url(../images/lang_drop.png) top center no-repeat;
  background-size: 100%;
  /*margin: 0 .1rem;*/
}
.language-box .select-language span{
  font-size: .26rem;
  color: #ffffff;
  padding: 0 .03rem;
}
.language-box .language-choose-list{
  width: 3rem;
  height: 0;
  overflow: hidden;
  background: rgba(0,0,0,.95);
  position: absolute;
  top: .6rem;
  left: 0;
  transition: all .8s;
}
.language-box .language-choose-list.on{
  height: 6.6rem;
}
.language-box .language-choose-list ul li{
  width: 100%;
  height: .6rem;
  text-align: center;
  line-height: .6rem;
  font-size: .2rem;
  color: #a6a6a6;
  cursor: pointer;
  font-family: "NotoSans-Medium";
}
.language-box .language-choose-list ul li.on{
  color: #0ff796;
  background-color: #7f878799;
}

.slogan{
  display: block;
  width: 6.5rem;
  height: 1.46rem;
  overflow: hidden;
  background: url(../images/m/slogan_en.png) top center no-repeat;
  background-size: 100%;
  margin: .9rem auto 0;
}
.lang-ar .slogan{
  background: url(../images/m/slogan_ar.png) top center no-repeat;
  background-size: 100%;
}
.lang-de .slogan{
  background: url(../images/m/slogan_de.png) top center no-repeat;
  background-size: 100%;
}
.lang-en .slogan{
  background: url(../images/m/slogan_en.png) top center no-repeat;
  background-size: 100%;
}
.lang-es .slogan{
  background: url(../images/m/slogan_es.png) top center no-repeat;
  background-size: 100%;
}
.lang-fr .slogan{
  background: url(../images/m/slogan_fr.png) top center no-repeat;
  background-size: 100%;
}
.lang-ja .slogan{
  background: url(../images/m/slogan_ja.png) top center no-repeat;
  background-size: 100%;
}
.lang-ko .slogan{
  background: url(../images/m/slogan_ko.png) top center no-repeat;
  background-size: 100%;
}
.lang-pt .slogan{
  background: url(../images/m/slogan_pt.png) top center no-repeat;
  background-size: 100%;
}
.lang-ru .slogan{
  background: url(../images/m/slogan_ru.png) top center no-repeat;
  background-size: 100%;
}
.lang-tr .slogan{
  background: url(../images/m/slogan_tr.png) top center no-repeat;
  background-size: 100%;
}
.lang-zh .slogan{
  background: url(../images/m/slogan_zh.png) top center no-repeat;
  background-size: 100%;
}
.lang-tw .slogan{
  background: url(../images/m/slogan_tw.png) top center no-repeat;
  background-size: 100%;
}
.stitle{
  width: 5.08rem;
  overflow: hidden;
  box-sizing: border-box;
  padding: .05rem .15rem;
  min-height: .38rem;
  margin: .1rem auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../images/m/icon1.png) top center no-repeat;
  background-size: 100% 100%;
}
.lang-tr .stitle{
  width: 5.8rem;
}
.lang-es .stitle{
  width: 5.8rem;
}

.stitle p{
  font-size: .2rem;
  color: #0ff796;
  width: 100%;
  text-align: center;
  line-height: .24rem;
}
.stitle1{
  text-align: center;
  font-size: .2rem;
  color: #ffffff;
  line-height: .3rem;
  margin-top: .14rem;
}
.stitle2{
  display: block;
  width: 4.29rem;
  height: .85rem;
  overflow: hidden;
  background: url(../images/m/slogan1_en.png) top center no-repeat;
  background-size: 100%;
  margin: .05rem auto 0;
}
.lang-ar .stitle2{
  background: url(../images/m/slogan1_ar.png) top center no-repeat;
  background-size: 100%;
}
.lang-de .stitle2{
  background: url(../images/m/slogan1_de.png) top center no-repeat;
  background-size: 100%;
}
.lang-en .stitle2{
  background: url(../images/m/slogan1_en.png) top center no-repeat;
  background-size: 100%;
}
.lang-es .stitle2{
  background: url(../images/m/slogan1_es.png) top center no-repeat;
  background-size: 100%;
}
.lang-fr .stitle2{
  background: url(../images/m/slogan1_fr.png) top center no-repeat;
  background-size: 100%;
}
.lang-ja .stitle2{
  background: url(../images/m/slogan1_ja.png) top center no-repeat;
  background-size: 100%;
}
.lang-ko .stitle2{
  background: url(../images/m/slogan1_ko.png) top center no-repeat;
  background-size: 100%;
}
.lang-pt .stitle2{
  background: url(../images/m/slogan1_pt.png) top center no-repeat;
  background-size: 100%;
}
.lang-ru .stitle2{
  background: url(../images/m/slogan1_ru.png) top center no-repeat;
  background-size: 100%;
}
.lang-tr .stitle2{
  background: url(../images/m/slogan1_tr.png) top center no-repeat;
  background-size: 100%;
}
.lang-zh .stitle2{
  background: url(../images/m/slogan1_zh.png) top center no-repeat;
  background-size: 100%;
}
.lang-tw .stitle2{
  background: url(../images/m/slogan1_tw.png) top center no-repeat;
  background-size: 100%;
}

.leftbox{
  width: 6.9rem;
  height: 7.31rem;
  overflow: hidden;
  background: url(../images/m/box_bg1.png) top center no-repeat;
  background-size: 100%;
  margin: .1rem auto 0;
  box-sizing: border-box;
}
.leftbox .rulebox{
  width: 6.6rem;
  height: 6.8rem;
  overflow-y: auto;
  overflow-x: hidden;
  margin: .2rem auto 0;
  box-sizing: border-box;
}
.leftbox p{
  font-size: .22rem;
  color: #eaebeb;
  line-height: .34rem;
  box-sizing: border-box;
  padding: 0 .1rem;
}
.leftbox p.green{
  color: #0ff796;
  margin-top: .1rem;
}
.tablebox{
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: .2rem auto .2rem;
}
.table{
  width: 6.36rem;
  overflow: hidden;
  box-sizing: border-box;
}
.table .table-title{
  text-align: center;
  font-size: .2rem;
  color: #0ff796;
  line-height: .36rem;
}

.table ul{
  width: 100%;
  overflow: hidden;
  margin: .1rem auto 0;
}
.table ul li{
  width: 100%;
  height: .56rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.table ul li:first-child{
  background: rgba(255,255,255,.2);
}
.table ul li div{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100%;
  box-sizing: border-box;
  border: solid 1px #303030;
}
.table ul li div span{
  font-size: .18rem;
  color: #eaebeb;
  line-height: .26rem;
  text-align: center;
}

.btnrule{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: .1rem;
}
.btnrule a{
  position: relative;
  font-size: .3rem;
  color: #0ff796;
  line-height: .4rem;
}
.btnrule a:after{
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #0ff796;
  position: absolute;
  left: 0;
  bottom: -.04rem;
}

.rightbox{
  width: 6.9rem;
  height: 5.83rem;
  overflow: hidden;
  background: url(../images/m/box_bg2.png) top center no-repeat;
  background-size: 100%;
  margin: .6rem auto 0;
  position: relative;
}
.area-title{
  width: 6.45rem;
  overflow: hidden;
  min-height: .56rem;
  box-sizing: border-box;
  padding: .1rem 0;
  background: url(../images/m/icon3.png) center center no-repeat;
  background-size: 100% 100%;
  margin: .4rem auto 0;
}
.area-title p{
  width: 100%;
  box-sizing: border-box;
  padding: 0 1.1rem;
  text-align: center;
  line-height: .36rem;
  font-size: .24rem;
  color: #0ff796;
}
.arealist{
  width: 100%;
  overflow: hidden;
  margin: .3rem auto 0;
  font-size: 0;
  text-align: center;
}
.arealist div{
  display: inline-block;
  width: 2.35rem;
  height: .77rem;
  position: relative;
  background: url(../images/m/type1.png) top center no-repeat;
  background-size: 100%;
  margin: 0 .23rem .28rem;
  transition: all .6s;
  cursor: pointer;
}
.arealist div.on{
  background: url(../images/m/type2.png) top center no-repeat;
  background-size: 100%;
}
.arealist div p{
  width: 100%;
  box-sizing: border-box;
  padding: 0 .1rem;
  text-align: center;
  line-height: .24rem;
  font-size: .28rem;
  color: #e1e1e1;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%,-50%,0);
  -ms-transform: translate3d(-50%,-50%,0);
  -webkit-transform: translate3d(-50%,-50%,0);
  -o-transform: translate3d(-50%,-50%,0);
  -moz-transform: translate3d(-50%,-50%,0);
}
.arealist div.on p{
  color: #0ff695;
}
.tips{
  width: 6.7rem;
  text-align: center;
  font-size: .18rem;
  line-height: .26rem;
  color: #e1e1e1;
  margin: 0 auto;
}
.tips a{
  font-size: .18rem;
  line-height: .26rem;
  color: #e1e1e1;
  text-decoration: underline;
}
.btn-register{
  display: block;
  width: 3.57rem;
  height: .97rem;
  background: url(../images/m/btn_bg.png) top center no-repeat;
  background-size: 100%;
  margin: .3rem auto 0;
  text-align: center;
  font-size: .32rem; 
  color: #000000;
  line-height: .97rem;
}
.lang-ru .btn-register{
  font-size: .26rem;
}
.lang-es .btn-register{
  font-size: .3rem;
}

.footer{
  width: 100%;
  overflow: hidden;
  background: #0a0f12;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  box-sizing: border-box;
  padding: .4rem .6rem;
  text-align: center;
}
.footer p{
  font-size: .24rem;
  color: rgba(235,235,235,.3);
  line-height: .5rem;
  word-break: break-word;
}
.lang-tw .footer p{
  word-break: keep-all;
}
.lang-ko .footer p{
  word-break: keep-all;
}
.lang-ja .footer p{
  word-break: keep-all;
}
.footer p a{
  color: rgba(235,235,235,.3);
  display: inline-block;
}
.footer p span{
  padding: 0 .05rem;
}

#ot-sdk-btn{
  border: none !important;
  background: none !important;
  font-size: .24rem !important; 
  color: rgba(235,235,235,.3) !important;
  line-height: .5rem !important;
  padding: 0 !important;
}


.scrollbar::-webkit-scrollbar {
  width: calc(6 /1920*100vw);
  height: calc(6 /1920*100vw);
  background-color: rgba(0, 0, 0, 0);
}
.scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
  border-radius: calc(10 /1920*100vw);
  background-color: rgba(0, 0, 0, 0);
  border: none;
}
.scrollbar::-webkit-scrollbar-thumb {
  height: calc(6 /1920*100vw);
  border-radius: calc(4 /1920*100vw);
  -webkit-box-shadow: none;
  background-color: #0ff796;
  box-shadow: none;
}


/**/
.lang-ja .table ul li.ja-hide{
  display: none;
}
.table ul li.ko-show{
  display: none;
}
.lang-ko .table ul li.ko-hide{
  display: none;
}
.lang-ko .table ul li.ko-show{
  display: flex;
}